feat(sidebar): show PR state for cloud runs with a provenance badge by gantoine · Pull Request #3245 · PostHog/code

gantoine · 2026-07-07T19:11:05Z

Problem

Cloud runs never surfaced their branch lifecycle (draft / open / merged / closed PR) in the sidebar the way local runs do — a finished cloud run always showed the green/red cloud icon, so you couldn't tell at a glance which cloud runs had landed and which still had a PR waiting on review.

The PR-state data was already there: useTaskPrStatus resolves the live GitHub state whenever a cloud run's output carries a pr_url, and every TaskIcon consumer already passes it in. The blocker was icon priority — TaskIcon's waterfall checked "terminal cloud run" before "PR state", so the PR branch was unreachable for cloud tasks.

UX

The PR-state glyph becomes the primary icon (identical to local runs: merged purple, open green, draft gray, closed red), with a small provenance badge stacked on the bottom-right corner — a filled cloud, or the origin-product icon (Slack, Signals, …) for branded tasks. Once a run has finished, the branch lifecycle is what you scan for; where it ran is static context, so it takes the badge slot. This also makes the whole sidebar read in one visual language regardless of local vs cloud.

Details:

A radial-gradient CSS mask punches a hole in the PR glyph beneath the badge, so both shapes stay legible on any row background (hover, selected, command palette highlight) without hardcoding a cutout ring color.
Origin-branded tasks keep their clickable "open thread" behavior on the stacked icon; tooltips combine both facts ("PR merged · Slack").
Failed/cancelled cloud runs keep the red cloud — the failure is the actionable signal there. Queued/running runs and completed runs without a PR are unchanged, as are needs-permission / generating / unread priorities.
Applies to every TaskIcon consumer: sidebar rows, task tabs, command palette, command center.

Notes

Cloud PR state only resolves when the run output has a pr_url; runs that never published keep the plain cloud icon (nothing to show).
Badge size/offset constants (0.66× icon size, 2px overflow) may deserve a visual fine-tuning pass in the running app.

Generated-By: PostHog Code
Task-Id: 3c36b344-ed49-424a-9218-703049ad89db

Created with PostHog Code

Cloud runs never surfaced their branch lifecycle (draft/open/merged/closed PR) in the sidebar: the terminal-cloud branch of TaskIcon's waterfall won before the PR-state branch, so a completed cloud run always showed the green cloud icon even when its PR state was already resolved via the run's pr_url. Now a cloud run that finished cleanly and has a known PR state renders the same PR-state glyphs as local runs (merged purple, open green, draft gray, closed red), with a small filled cloud — or the origin-product icon (Slack, Signals, …) — stacked on the glyph's bottom-right corner so cloud provenance stays visible at a glance. A radial-gradient mask punches a hole in the PR glyph under the badge, keeping both shapes legible on any row background without hardcoding a cutout ring color. Origin-branded tasks keep their clickable thread link on the stacked icon. Failed/cancelled cloud runs keep the red cloud icon: the failure remains the actionable signal there. Queued/running runs and completed runs without a PR are unchanged. Applies to every TaskIcon consumer (sidebar, tabs, command palette, command center). Generated-By: PostHog Code Task-Id: 3c36b344-ed49-424a-9218-703049ad89db

trunk-io · 2026-07-07T19:11:09Z

Merging to main in this repository is managed by Trunk.

To merge this pull request, check the box to the left or comment /trunk merge below.

After your PR is submitted to the merge queue, this comment will be automatically updated with its status. If the PR fails, failure details will also be posted here

github-actions · 2026-07-07T19:11:40Z

React Doctor found 1 issue in 1 file · 1 warning.

1 warning

src/features/sidebar/components/items/TaskIcon.tsx

⚠️ src/features/sidebar/components/items/TaskIcon.tsx:396 Component rendered by inline function call no-render-in-render

_{Reviewed by React Doctor for commit e51a417.}

github-actions · 2026-07-08T16:00:13Z

🖥️ macOS test build (Apple Silicon)

A signed macOS build for this PR is ready to download and run.

⬇️ Open this run and download the code-macos-arm64 artifact (Apple Silicon / M-series).

Unzip it to get the .dmg, open it, and drag PostHog Code into Applications.

This build is signed but not notarized, so macOS quarantines it on download and Gatekeeper reports "PostHog Code is damaged and can't be opened". That is the missing notarization, not a corrupt file — clear the quarantine flag once and it launches:

xattr -dr com.apple.quarantine "/Applications/PostHog Code.app"

Then open PostHog Code normally. (Fully notarized, double-click-to-run builds ship only from the tagged release pipeline.)

_{Built from 4c5a82f · rebuilds on each push while the build-installer label is present. Downloading requires being signed in to GitHub with repo access.}

Generated-By: PostHog Code Task-Id: 3c36b344-ed49-424a-9218-703049ad89db

…ride quill's `.quill-button svg:not([class*=size-])` rule forces every descendant svg inside a sidebar row (a quill Button) to the button's icon size, overriding phosphor's width/height attributes. The provenance badge therefore rendered at 14px instead of 6px, covering the PR glyph entirely and reading as a full-size cloud. Inline width/height win over the rule and keep the badge at half the icon size. Generated-By: PostHog Code Task-Id: 3c36b344-ed49-424a-9218-703049ad89db

The primary PR glyph was still being inflated to the quill button icon size while the mask geometry assumed the passed size, so the punched hole landed offset and oversized — eating the glyph's bottom-right corner and leaving a wide empty ring around the badge. Pin the glyph's dimensions inline like the badge's, shrink the badge bleed to 1px, and cut the hole at badge radius + 0.5px so the ring reads as a snug outline instead of padding. Generated-By: PostHog Code Task-Id: 3c36b344-ed49-424a-9218-703049ad89db

The stacked composite pinned its glyph to the `size` prop (12px) while plain PR icons on local-run rows get inflated to the quill button icon size (14px), so badged cloud rows looked smaller than their local siblings. Drop the inline pinning on the glyph and express the badge and mask-hole geometry as percentages of the rendered box instead: the glyph now always matches plain PR icons in the same context, and the badge scales with it (7px in the sidebar). Percentage inline dimensions still exempt the badge from quill's svg sizing rule. Generated-By: PostHog Code Task-Id: 3c36b344-ed49-424a-9218-703049ad89db

Generated-By: PostHog Code Task-Id: 3c36b344-ed49-424a-9218-703049ad89db

github-actions

Pure UI rendering change — refactors repeated if-chains into a lookup table and adds a stacked provenance badge for cloud tasks showing PR state. Logic is sound and no business logic, API contracts, or data models are affected.

greptile-apps · 2026-07-08T20:04:13Z

_{Reviews (1): Last reviewed commit: "chore(sidebar): drop geometry explainer ..." | Re-trigger Greptile}

greptile-apps · 2026-07-08T20:04:18Z

+        provenanceBadge={
+          isCloudTask
+            ? (originProductMeta ?? { Icon: CloudIcon, label: "Cloud" })
+            : undefined
+        }


Inline fallback object creates a new reference on every render

originProductMeta ?? { Icon: CloudIcon, label: "Cloud" } allocates a fresh object each render when originProductMeta is undefined. While PrStatusIcon isn't memoized today, extracting this to a module-level constant (e.g. const CLOUD_BADGE_META: OriginProductMeta = { Icon: CloudIcon, label: "Cloud" }) keeps the intent explicit and pairs naturally with the existing PR_STATE_META and DIFF_META pattern established in this PR.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

The inline percentage width/height always override the svg attributes phosphor derives from `size`, so the `Math.round(size * 0.65)` value was never used. Omit the prop and let the inline style be the single source of truth. Generated-By: PostHog Code Task-Id: 3c36b344-ed49-424a-9218-703049ad89db

New commits pushed (delta classified non_trivial_delta) — stamphog approval dismissed; re-review running automatically.

The inline `{ Icon: CloudIcon, label: "Cloud" }` fallback allocated a new object on every TaskIcon render; a module-level CLOUD_BADGE_META matches the PR_STATE_META / DIFF_META pattern. Generated-By: PostHog Code Task-Id: 3c36b344-ed49-424a-9218-703049ad89db

github-actions

Pure UI rendering refactor in a sidebar icon component — replaces if-chains with a lookup table and adds a stacked provenance badge for cloud tasks. No business logic, data model, API contract, or security changes. The one unresolved bot comment flags a minor object-allocation pattern that has no functional impact (non-memoized component, cosmetic sidebar item).

New commits pushed (delta classified non_trivial_delta) — stamphog approval dismissed; re-review running automatically.

github-actions

Pure UI rendering refactor with an additive feature; the one unresolved bot comment about object allocation was already addressed in the current diff by extracting a module-level constant.

gantoine added the build-installer Build a macOS installer for this PR label Jul 8, 2026

gantoine added 6 commits July 8, 2026 15:10

fix(sidebar): shrink provenance badge to half the icon size

25c86b4

Generated-By: PostHog Code Task-Id: 3c36b344-ed49-424a-9218-703049ad89db

fix(sidebar): grow the provenance badge to 65% of the glyph

891ff3c

Generated-By: PostHog Code Task-Id: 3c36b344-ed49-424a-9218-703049ad89db

chore(sidebar): drop geometry explainer comment from PrStatusIcon

61bf4e6

Generated-By: PostHog Code Task-Id: 3c36b344-ed49-424a-9218-703049ad89db

gantoine added the Stamphog This will request an autostamp by stamphog on small changes label Jul 8, 2026

gantoine marked this pull request as ready for review July 8, 2026 20:01

github-actions Bot previously approved these changes Jul 8, 2026

View reviewed changes

greptile-apps Bot reviewed Jul 8, 2026

View reviewed changes

github-actions Bot previously approved these changes Jul 8, 2026

View reviewed changes

gantoine closed this Jul 8, 2026

github-actions Bot approved these changes Jul 8, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(sidebar): show PR state for cloud runs with a provenance badge#3245

feat(sidebar): show PR state for cloud runs with a provenance badge#3245
gantoine wants to merge 9 commits into
mainfrom
posthog-code/cloud-run-pr-state-icon

gantoine commented Jul 7, 2026 •

edited

Loading

Uh oh!

trunk-io Bot commented Jul 7, 2026

Uh oh!

github-actions Bot commented Jul 7, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 8, 2026 •

edited

Loading

Uh oh!

github-actions Bot left a comment

Uh oh!

greptile-apps Bot commented Jul 8, 2026

Uh oh!

Uh oh!

greptile-apps Bot Jul 8, 2026

Uh oh!

github-actions Bot left a comment

Uh oh!

github-actions Bot left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

gantoine commented Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

UX

Notes

Uh oh!

trunk-io Bot commented Jul 7, 2026

Uh oh!

github-actions Bot commented Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🖥️ macOS test build (Apple Silicon)

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot commented Jul 8, 2026

Uh oh!

Uh oh!

greptile-apps Bot Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

gantoine commented Jul 7, 2026 •

edited

Loading

github-actions Bot commented Jul 7, 2026 •

edited

Loading

github-actions Bot commented Jul 8, 2026 •

edited

Loading