feat(sessions): Scrollable & collapsible queued-messages dock#2904
feat(sessions): Scrollable & collapsible queued-messages dock#2904arthurdedeus wants to merge 1 commit into
Conversation
A long queue of follow-ups no longer pushes the composer off-screen or crops it: the dock is height-capped and scrolls internally, and a header toggle collapses it. Adds per-task collapse view-state in sessionViewStore. Generated-By: PostHog Code Task-Id: 36c7f9ac-946a-403b-8b7f-c2dd5e3f66fd
|
React Doctor found no issues in the changed files. 🎉 Reviewed by React Doctor for commit |
|
Reviews (1): Last reviewed commit: "feat(sessions): Make the queued-messages..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| queuedState.messages = []; | ||
| const { container } = render(<QueuedMessagesDock taskId="task-empty" />); | ||
| expect(container).toBeEmptyDOMElement(); | ||
| }); | ||
|
|
||
| it("is expanded by default and shows every queued message with a count", () => { | ||
| queuedState.messages = TWO_MESSAGES; | ||
| renderDock("task-expanded"); | ||
|
|
||
| expect(screen.getByText("first queued message")).toBeInTheDocument(); | ||
| expect(screen.getByText("second queued message")).toBeInTheDocument(); | ||
| expect(screen.getByText("2 queued")).toBeInTheDocument(); | ||
| expect( | ||
| screen.getByRole("button", { name: "Collapse queued messages" }), | ||
| ).toHaveAttribute("aria-expanded", "true"); | ||
| }); | ||
|
|
||
| it("caps the list height and scrolls so it can't push the composer down", () => { | ||
| queuedState.messages = TWO_MESSAGES; | ||
| const { container } = renderDock("task-scroll"); | ||
|
|
||
| const scroller = container.querySelector(".overflow-y-auto"); | ||
| expect(scroller).not.toBeNull(); | ||
| expect(scroller?.classList.contains("max-h-[30vh]")).toBe(true); | ||
| }); | ||
|
|
||
| it("collapses and expands the list when the header is toggled", () => { |
There was a problem hiding this comment.
Tests 2 ("is expanded by default…"), 3 ("caps the list height…"), and 1 ("renders nothing…") all share the same shape: configure queuedState.messages, call renderDock, assert output. Combining them — and any future per-message-count assertions — into a single it.each table would satisfy the team's parameterised-test preference and make adding new message-count cases trivial without duplicating the render call.
Context Used: Do not attempt to comment on incorrect alphabetica... (source)
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!
1 participant
Problem
While the agent is running, follow-up messages you submit get queued in a dock pinned above the composer. That dock had no height cap, scroll, or collapse — so with several long messages it grew unbounded, pushing the composer down, cropping the input at the bottom, and hiding the conversation above.
Before
Changes
max-h-[30vh]) and scrolls internally, so a long queue never pushes the composer off-screen. Addedshrink-0to the composer block inSessionViewso the input is never compressed below its (now bounded) height; theflex-1conversation thread yields the space instead.N queued+ caret) toggles the queue open/closed, backed by new per-taskqueueCollapsedByTaskIdview-state insessionViewStore(ephemeral, defaults to expanded, and survives the dock unmounting between turns). The live count stays visible while collapsed.@radix-ui/react-collapsible+ phosphor carets, as inProgressGroupView/SidebarSection— and themax-h … overflow-y-autoscroll idiom. The per-message Steer / Return to editor / Discard actions are unchanged.After — expanded (scrolls instead of growing past the composer)
After — collapsed
Testing
QueuedMessagesDock.test.tsx— default-expanded shows every message with a count, the overflow classes are present, the header toggle collapses/expands the list (count persists), and an empty queue renders nothing.turbo typecheck, Biome lint, and the sessions component suite (100 tests) all pass.Created with PostHog Code