feat(chat): unify the session composer around a taller agent config picker#871
Merged
Conversation
The ACP config picker trigger now supports a configurable layout: the existing horizontal style renders model and effort inline in the same style separated by a dot, while the new vertical style renders the model as a title with the effort as a smaller subtitle below it. New-session surfaces keep the horizontal default; the session chat pane opts into vertical, with its trigger switched from a fixed h-9 to min-h-9 so the two-line label can grow the button. The trailing spinner/chevron swap is also wrapped in a fixed 12px slot with the icons absolutely positioned, so toggling between loading and idle no longer changes how much horizontal space the trailing icon takes (previously the spinner could constrain the label while the initial discovery load was in flight). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: Matt Toohey <contact@matttoohey.com>
The picker trigger's label width comes from a ResizeObserver watching a hidden sizer, but the callback read the width via getBoundingClientRect, which includes ancestor transforms. The trigger mounts inside dialogs (session/note modals, new-session modal) whose open animation scales the content from 0.95, so any measurement taken during that window came in ~5% short. Because the sizer's local size never changes afterwards, the observer never fired again and the label stayed truncated — visible as the provider label being cut while the discovery spinner showed, and as permanently shortened model/effort text in chat when cached discovery resolved within the animation window. Read the width from the observer entry (borderBoxSize, falling back to contentRect) instead; entry sizes are reported in local CSS pixels and are unaffected by ancestor transforms. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: Matt Toohey <contact@matttoohey.com>
… dialog The note dialog's chat pane and the session chat dialog both render SessionChatPane, but the bottom input UI diverged: compact panes rewrote the single-row layout into two rows via CSS wrap/order overrides, and the attach affordance changed shape depending on whether images were attached. Extract the bottom input into a shared ChatComposer component housing the text input, send/stop button, attach button, and attached-image strip, so both surfaces render the identical composer. The layout is now always the note-pane style: the text input gets its own full-width row with the controls beneath it. The attach button is styled like the agent config picker trigger (same border, background, and height chrome, built from the same base class that the composer now exports as composerControlClass) and stays visible once images are attached. The attached-image strip loses its own dashed add button and sits inside the composer, sharing its background instead of drawing a separately-bordered band above the input. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: Matt Toohey <contact@matttoohey.com>
The shared chat composer's send button was a small outline icon button, unlike the accent-filled submit in the new session dialog. Restyle it to match NewSessionModal's submit: accent background with hover shade, the Send icon at 14px next to a "Send" label (Spinner + "Sending…" while in flight), text-sm font-semibold, px-4 py-2. The mobile height bump uses the composer's existing 640px breakpoint so it grows together with the adjacent config picker and attach controls. The stop button shown while a session is running is unchanged. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: Matt Toohey <contact@matttoohey.com>
Start/send/queue buttons now share one look: a label-only accent-filled button, with a spinner while the action is in flight. The blue styling from the new-session submit becomes an `accent` Button variant (ui-accent background with hover shade, semibold, primary-foreground text) so call sites no longer copy the class string around. Applied to the new-session dialog submit (Start/Queue/New), the chat composer send, the diff pane's Start/Queue commit launcher (previously outline), and the queued-message send in the chat queue popover — which was an icon-only ghost button and becomes a mini accent "Send" text button. The paper plane icon is removed everywhere and its imports dropped. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: Matt Toohey <contact@matttoohey.com>
The config picker trigger grows to two lines for its vertical model/effort label, leaving the attach, send, and stop buttons shorter and bottom-aligned beside it. Switch the control row from align-items: flex-end to stretch and give every button an auto height with a min-h-9 floor so they all match the tallest control (and stay 36px when the picker is single-line or absent). The attach and stop buttons drop the icon size variant because its size-9 utility survives tailwind-merge against both w-9 and a later h-auto, pinning the height; explicit h-auto/w-9 classes stretch correctly. The send button also moves from py-2 to the picker's py-1 so padding no longer competes with the shared height floor. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: Matt Toohey <contact@matttoohey.com>
The attach button in the composer's control row was icon-only. Add an "Attach" label next to the paperclip so it reads like its neighbors. With a label it no longer needs the icon-width overrides — it now uses composerControlClass directly (the config picker trigger's px-4 py-1 chrome) plus the h-auto stretch override. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: Matt Toohey <contact@matttoohey.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The agent config picker trigger in the session chat pane gains a vertical title/subtitle layout (model as title, effort as subtitle), making it a two-line button. The rest of the composer's bottom row is reworked so every control stretches to match it, and the composer itself is extracted into one shared component used by both the note chat pane and the chat dialog.
Config picker trigger
min-h-9so the two-line label can grow the button. The trailing spinner/chevron now lives in a fixed 12px slot so loading no longer squeezes the label.borderBoxSize/contentRect) instead ofgetBoundingClientRect, which included the dialog open animation's 0.95 scale and left labels permanently truncated (~5% short) when discovery resolved during the animation window.Shared composer
SessionChatPaneinto a newChatComposercomponent (text input, send/stop, attach button, attached-image strip) so the note chat pane and chat dialog render the identical composer. The layout is always the note-pane style: full-width input row with controls beneath, and the attach button stays visible once images are attached.accentButton variant (the new-session submit's blue styling) and apply it to all start/send/queue buttons — new-session submit, composer send, diff pane commit launcher, and the queued-message send — dropping the paper plane icon everywhere in favor of label-only accent buttons with an in-flight spinner.align-items: stretchwith anh-auto/min-h-9floor on every button so attach/send/stop match the two-line picker's height (and stay 36px when it's single-line or absent).composerControlClass.