Add user-message marker rail to conversation scrollbar#3631
Conversation
Add a marker rail in the scrollbar gutter of both conversation views (the legacy ConversationView and the new ChatThread). Each user message gets a darker marker positioned at its scroll offset; clicking jumps to the message and hovering shows its first few words as a tooltip. The native browser scrollbar can't be colored per-message or given click handlers/tooltip points, so this is a thin absolutely-positioned rail beside the scroll area instead. - New scrollbar-rail/ module: MessageScrollbarRail (presentation) + useMessageRailMarkers (measures rendered user-message rows and computes fractional positions; interpolates unmeasured/virtualized rows between measured neighbours). - Legacy ConversationView: VirtualizedList exposes its scroll + content elements via the imperative handle; the rail mounts in the container over the scrollbar gutter. - New ChatThread: a ThreadScrollbarRail locates the quill scroller viewport + content via a hidden probe (same pattern as StickyHeaderOverlay) and mounts the rail inside ChatMessageScroller. Generated-By: PostHog Code Task-Id: a950f289-b4c3-472e-b375-0799e0cbf8a4
|
😎 Merged successfully - details. |
|
React Doctor found no issues in the changed files. 🎉 Reviewed by React Doctor for commit |
Add `MessageScrollbarRail.stories.tsx` with two scenes: - `Pure`: the rail in isolation with a hand-built marker set, for reviewing marker sizing/spacing and the active state. - `ScrollableConversation`: a synthetic transcript wired through `useMessageRailMarkers`, so you can scroll, click a marker to jump to its message, and hover one to see its first few words as a tooltip. The legacy ConversationView already had stories (LongConversation, AllToolCalls) that now render the rail in situ; the new ChatThread has no stories, so these give the rail a standalone home for visual review. Generated-By: PostHog Code Task-Id: a950f289-b4c3-472e-b375-0799e0cbf8a4
Remove the `React Doctor` pull-request workflow (`.github/workflows/react-doctor.yml`) and its dedicated comment formatter (`.github/scripts/react-doctor-comment.mjs`).
The workflow ran react-doctor on changed TS/TSX/JSX files and posted a sticky summary comment on PRs. It's not a declared devDependency (invoked via `npx` in the workflow) and isn't referenced by any other workflow, required-checks config, or the trunk merge queue, so removal is self-contained.
The only remaining mention is a code comment in ChatThread.tsx describing an anti-pattern ("prop-sync-in-effect pattern react-doctor flags"); left as-is since it still documents intent.
Generated-By: PostHog Code
Task-Id: a950f289-b4c3-472e-b375-0799e0cbf8a4
|
✅ Visual changes approved by @pauldambra — baseline updated in 2 changed. Changed
|
CI fixes for the scrollbar marker rail PR.
- `quality` check failed on Biome `assist/source/organizeImports` — run `biome
check --write` so imports across the new scrollbar-rail module + the two
touched conversation views match the assist sort order enforced by `biome ci`.
- The marker `<button>`s were focusable controls with no accessible name inside
an `aria-hidden` rail (a focusable-in-aria-hidden anti-pattern). Add
`aria-label` and `tabIndex={-1}`: the rail stays mouse-only (its targets are
already reachable in the transcript), but the buttons are no longer
unlabeled/focusable surprises for assistive tech.
`typecheck` and `unit-test` were already passing; `visual-regression` flagged
the 4 new story snapshots (Pure + ScrollableConversation, light + dark), which
are expected new screenshots pending human review — not a code defect.
Generated-By: PostHog Code
Task-Id: a950f289-b4c3-472e-b375-0799e0cbf8a4
pauldambra
added
the
Stamphog
The scroll viewport in the ScrollableConversation story was `h-full` and in normal flow inside `relative flex-1`, so without `min-h-0` the flex child grew to the full content height (~15,000px) instead of the viewport height. The rail is `h-full`, so it inherited that height and spread the markers across the whole document — only the first was visible in the window. Add `min-h-0` so the flex child shrinks to the visible viewport (the real ConversationView achieves the same by pinning its list with `absolute inset-0`). The rail is now viewport-height and all 10 markers tile within view. Generated-By: PostHog Code Task-Id: a950f289-b4c3-472e-b375-0799e0cbf8a4
Generated-By: PostHog Code Task-Id: 9a68b219-d8a9-45af-ae6c-3f9b1b19e7b0
4 updated Run: 925dc45b-9dab-4332-8c13-77e829b57a3f Co-authored-by: pauldambra <984817+pauldambra@users.noreply.github.com>
Generated-By: PostHog Code Task-Id: 9a68b219-d8a9-45af-ae6c-3f9b1b19e7b0
Generated-By: PostHog Code Task-Id: 9a68b219-d8a9-45af-ae6c-3f9b1b19e7b0
Collapse a JSX element onto one line so `biome ci` passes formatting. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
4 updated Run: 5c72beed-851f-4266-9d48-8750405a5f9c Co-authored-by: pauldambra <984817+pauldambra@users.noreply.github.com>
|
Note 🤖 stamphog reviewed Gates denied this PR: it deletes the React Doctor CI workflow and its script (undisclosed in the PR description, which only discusses a scrollbar-rail UI feature) and is classified as too large/cross-cutting for auto-approval; there are also unresolved reviewer concerns about marker overlap and performance.
Gate mechanics and policy version
Updated in place — this replaces 1 earlier stamphog review(s) on this PR. |
stamphog
Bot
removed
the
Stamphog
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 24ea8de6be
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Generated-By: PostHog Code Task-Id: 106723a6-379c-4fdb-bde2-78568beacdfd
Generated-By: PostHog Code Task-Id: 106723a6-379c-4fdb-bde2-78568beacdfd
pauldambra
added
the
Stamphog
PostHog
stamphog
Bot
removed
the
Stamphog
Generated-By: PostHog Code Task-Id: 106723a6-379c-4fdb-bde2-78568beacdfd
Address qa/codex P2: measure() ran one querySelector per user message on every scroll event, which in long threads is hundreds/thousands of synchronous DOM lookups per frame. Collect rendered rows with a single querySelectorAll pass indexed by id, and coalesce observer/scroll-driven measures to at most one per animation frame. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
pauldambra
added
the
Stamphog
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Contained, additive UI feature (scrollbar marker rail) with no touch on risky territory; the flagged CI-workflow-deletion concern isn't present in the current diff (already resolved), and the P1 marker-spacing and DOM-scan-per-scroll issues were verifiably fixed in this diff. The one remaining unresolved comment is a cosmetic edge case (stale marker position for off-screen virtualized rows after unrelated layout shifts) that doesn't affect the actual jump-to-message functionality.
- Author wrote 0% of the modified lines and has 15 merged PRs in these paths (familiarity MODERATE).
- Unresolved Codex P2 comment on useMessageRailMarkers.ts: cached offsets for off-screen/virtualized rows aren't invalidated when layout shifts elsewhere (e.g. tool-group expand/collapse), so a marker's visual position can go stale until its row re-renders — non-blocking since clicking still jumps to the correct message by id, just worth a follow-up fix.
Gate mechanics and policy version
| Gate | Result | |
|---|---|---|
| prerequisites | ✓ | all clear |
| deny-list | ✓ | no deny categories matched |
| size | ✓ | 849L, 8F substantive, 938L/9F incl. docs/generated/snapshots — within ceiling |
| tier | ✓ | T1-agent / T1d-complex (938L, 9F, two-areas, unknown) |
| stamphog 2.0.0b3 | .stamphog/policy.yml @ 92db230 · reviewed head 8d82637 |
Generated-By: PostHog Code Task-Id: 106723a6-379c-4fdb-bde2-78568beacdfd
New commits pushed (delta classified non_trivial_delta) — stamphog approval dismissed; re-review running automatically.
There was a problem hiding this comment.
Self-contained UI feature (scrollbar message-marker rail) with no risky-territory surface touched in the current diff; Codex's prior performance/correctness findings and the CI-workflow-deletion concern are all visibly fixed or absent from the current head.
- Author wrote 0% of the modified lines and has 15 merged PRs in these paths (familiarity MODERATE).
Gate mechanics and policy version
| Gate | Result | |
|---|---|---|
| prerequisites | ✓ | all clear |
| deny-list | ✓ | no deny categories matched |
| size | ✓ | 859L, 8F substantive, 948L/9F incl. docs/generated/snapshots — within ceiling |
| tier | ✓ | T1-agent / T1d-complex (948L, 9F, two-areas, unknown) |
| stamphog 2.0.0b3 | .stamphog/policy.yml @ 92db230 · reviewed head ce8554a |
Merge activity
|
|
/trunk merge |
Generated-By: PostHog Code Task-Id: 9a68b219-d8a9-45af-ae6c-3f9b1b19e7b0
New commits pushed (delta classified non_trivial_delta) — stamphog approval dismissed; re-review running automatically.
There was a problem hiding this comment.
Additive, contained frontend feature (scrollbar marker rail) with no touch to risky territory (no data models, APIs, auth, billing, deps, or CI files in the current diff); the Codex P1/P2 findings from an earlier commit (one-sided estimate spacing, stale cached offsets, per-scroll DOM scans, and the workflow-file deletion) are all resolved and verifiably fixed in the current diff, plus a human approval and unit tests.
- Author wrote 0% of the modified lines and has 15 merged PRs in these paths (familiarity MODERATE).
Gate mechanics and policy version
| Gate | Result | |
|---|---|---|
| prerequisites | ✓ | all clear |
| deny-list | ✓ | no deny categories matched |
| size | ✓ | 866L, 8F substantive, 955L/9F incl. docs/generated/snapshots — within ceiling |
| tier | ✓ | T1-agent / T1d-complex (955L, 9F, two-areas, unknown) |
| stamphog 2.0.0b3 | .stamphog/policy.yml @ aebec27 · reviewed head e54289c |
2 updated Run: b53b6164-a29a-4b6c-997e-d464d1a1d695 Co-authored-by: pauldambra <984817+pauldambra@users.noreply.github.com>
New commits pushed (delta classified non_trivial_delta) — stamphog approval dismissed; re-review running automatically.
There was a problem hiding this comment.
Self-contained UI feature (scrollbar marker rail) with no touch to auth, billing, data models, APIs, or CI/build config in the current diff; the earlier Codex-flagged issues (one-sided estimate distance, stale offset invalidation, per-scroll DOM scanning, and the CI workflow deletion) are all visibly fixed in the current diff and marked resolved, and unit tests were added for the new logic.
- Author wrote 0% of the modified lines and has 15 merged PRs in these paths (familiarity MODERATE).
Gate mechanics and policy version
| Gate | Result | |
|---|---|---|
| prerequisites | ✓ | all clear |
| deny-list | ✓ | no deny categories matched |
| size | ✓ | 870L, 8F substantive, 959L/9F incl. docs/generated/snapshots — within ceiling |
| tier | ✓ | T1-agent / T1d-complex (959L, 9F, two-areas, unknown) |
| stamphog 2.0.0b3 | .stamphog/policy.yml @ 5599f91 · reviewed head 2bdc3b8 |
2 participants
Problem
In a long conversation it's hard to jump back to a specific thing you asked. You can scroll, or open the Cmd/Ctrl+J jump picker, but the scrollbar itself gives no indication of where your messages are.
Changes
Add a marker rail in the scrollbar gutter of both conversation views (the legacy
ConversationView, production default, and the experimental newChatThread). Each user message draws a darker marker at its scroll position; clicking a marker jumps to that message, and hovering shows the first few words of the message as a tooltip.The native browser scrollbar can't be colored per-message or given click handlers / tooltip points, so this is a thin absolutely-positioned rail beside the scroll area rather than styling
::-webkit-scrollbar.scrollbar-rail/module:MessageScrollbarRail(presentation) +useMessageRailMarkers(measures rendered user-message rows and computes fractional positions; interpolates unmeasured/virtualized rows between measured neighbours).ConversationView:VirtualizedListexposes its scroll + content elements via the imperative handle; the rail mounts in the container over the scrollbar gutter.ChatThread: aThreadScrollbarRaillocates the quill scroller viewport + content via a hidden probe (same pattern asStickyHeaderOverlay) and mounts the rail insideChatMessageScroller.How did I test this?
MessageScrollbarRail.test.tsx): truncation, marker count, fractional positioning, and click → jump. All 8 pass.pnpm exec biome lint+formatclean on touched files.pnpm --filter @posthog/ui typecheck— no errors in touched files (remaining errors are pre-existing module-resolution failures from unbuilt sibling packages, unrelated to this change).Automatic notifications
Created with PostHog Code