feat(web): attach composer state drawers

[maria-rcks]

What changed

• Attaches approval, user-input, plan, sync, slash-command, and stash states directly to the composer surface.
• Preserves real runtime data and the existing approval guards. Pending approvals still disable editing, sending, prompt replacement, and stashing.
• Keeps full approval commands readable and labels session-wide approval explicitly.

Screenshots

Direct parent on the left; this PR on the right. Same viewport and copied application state.

Before	After

## Why

The composer pass was uncommitted work on the original branch and is independent of tool activity. It belongs in its own UI review.

Review note

• Pending-input stash restore remains hidden because restoration writes the normal composer draft, not the active pending answer. Exposing it there would be a broken affordance.

Validation

• Composer banner, command menu, approval, user-input, stash, and sync-state tests
• Affected-package typechecks
• Changed-file lint and formatting checks

Stack order

1. feat(web): unify workspace navigation #7153 workspace and navigation
2. feat(web): redesign usage insights #7147 Usage
3. feat(web): refresh pull request details #7148 Pull Requests
4. feat(web): improve terminal workspace controls #7149 terminal
5. feat(web): attach composer state drawers #7150 composer, this PR
6. fix(server): preserve tool lifecycle identity #7151 tool lifecycle projection
7. feat(web): collapse tool activity into one line #7152 tool activity UI

Built with GPT-5.6-sol in the Codex harness.

---

Note

Medium Risk
Large composer layout/CSS refactor and new drawer stacking behavior could cause visual or focus regressions; plan duration derivation changes displayed timing but not server data.

Overview
Reworks the chat composer so runtime state sits in attached “drawer” surfaces above the input instead of floating pills and dropdown glass. Task progress from the thread shell appears in a new shoulder tab / expandable list (with per-turn dismiss), alongside stash and top drawers for approvals, pending user input, and plan follow-up—all using shared chat-composer-drawer-* styling and glass-shell attachment when banners or drawers are present.

Slash-command and stash pickers, banner stack, and thread sync status use the same attached drawer treatment; command menu positioning aligns to the main composer surface with drawer inset and overlap. Approval and pending-input UI is compacted (micro buttons, inline command detail, tighter option rows); background-work banner copy is shortened.

Plan activities now get durationMs on completed steps via addPlanStepDurations (handles plan clears, repeated step labels, completion-order fallbacks). Provider skills move presentation helpers to @t3tools/client-runtime/providerSkills with resolveProviderSkillSourceKind and source-specific icons on web and mobile. Adds Button micro size and inline chip geometry tweaks.

^{Reviewed by Cursor Bugbot for commit 0fbf449. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Attach composer state drawers and add task progress badge/drawer

• Converts composer popovers (command menu, stash menu, banner stack) into attached drawer surfaces that anchor to the composer's main surface, with new CSS classes and data attributes for glass backgrounds, outlines, and shadows
• Adds ComposerTasksBadge and ComposerTasksDrawer to show per-turn task progress inline and in an expandable drawer; ChatComposer wires these via new activeTasksProgress and activeTaskSteps props from ChatView",

^{Macroscope summarized 0fbf449.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 8e2a6844-1fdd-4e36-8193-8ca61a19dacd

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	12.6 KiB	12.6 KiB	−2 B (−0.0%)	15.1 KiB	✅
Codex	Thread snapshot wire	6.3 KiB	6.3 KiB	−7 B (−0.1%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.3 KiB	6.3 KiB	+5 B (+0.1%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	51.8 KiB	51.8 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	16	16	0 (0.0%)	21	✅
Claude	Total thread wire	12.6 KiB	12.6 KiB	−13 B (−0.1%)	15.1 KiB	✅
Claude	Thread snapshot wire	6.3 KiB	6.3 KiB	−9 B (−0.1%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.3 KiB	6.3 KiB	−4 B (−0.1%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	52.7 KiB	52.7 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	16	16	0 (0.0%)	21	✅

Baseline: 105cd5e · PR result: 0fbf449 · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 99.9 KiB
• Claude decoded thread snapshot: 100.6 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

UI Consistency

Five findings, all introduced by this PR's composer/drawer refresh. The largest are a responsive geometry override that silently loses at sm and up, and px constants in ComposerCommandMenuLayer that duplicate rem-based drawer tokens.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR introduces new user-facing features including task progress drawers, refactored stash UI, and significant composer layout changes. The new components, state management, and visual effects represent meaningful feature additions warranting human review.

^{You can add or adjust custom eligibility rules. Learn more.}

[macroscopeapp]

UI consistency review of the composer drawer refactor. Three new findings on this revision (accessibility state on the stash tab, coarse-pointer reachability of the stash delete action, and an inert data-variant hook). Earlier findings on the size="xs" + h-5 px-1.5 text-[11px] overrides, the hardcoded px drawer geometry, and the undefined chat-composer-drawer-attached class are still open in the existing threads and are not repeated here. Thanks for restoring Cancel in the desktop approval row and for keeping the stash tab mounted while its drawer is open.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Three new findings on the attached-drawer refresh (all in apps/web/src). Findings from my earlier runs on this branch (micro-button geometry overrides, the px drawer inset/overlap constants, the undefined chat-composer-drawer-attached class, aria-expanded="false", the pointer-events-none stash delete button, and the inert data-variant) still apply to the rebased head; I have not re-posted them here.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Three new findings on the attached-drawer refresh (all in apps/web/src). Findings from my earlier runs on this branch (micro-button geometry overrides, the px drawer inset/overlap constants, the undefined chat-composer-drawer-attached class, aria-expanded="false", the pointer-events-none stash delete button, and the inert data-variant) still apply to the rebased head; I have not re-posted them here.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

UI consistency — 1 finding in the composer top drawer's type scale. Details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

UI consistency review of the composer drawer refactor. One new finding: the split-glass fill is applied to the same element that carries the provider frame class, whose unlayered background: transparent wins the cascade.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

UI consistency review — 1 finding on the new attached-drawer treatment. Details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

UI consistency review of the composer drawer refactor. Two findings: one CSS-ownership gap where the new split-glass path never activates for the drawers that attach from outside the shell, and one focus-semantics regression on the new stash close button.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Reviewed the composer drawer refactor against the shared control/Tailwind ownership rules. Most of the earlier structural concerns are resolved in this revision (the micro size now owns its own type scale, the split-glass path is driven by an explicit chat-composer-glass-shell-attached class instead of :has() reaching outside the shell, the banner cap shares the drawer's surface tokens, the drawer inset is tokenized and read by the portal positioner, and the stash drawer gained an outside-pointer/close path that preserves composer focus).

Two findings remain, both on changed lines.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

UI consistency review of the composer drawer refresh. One finding on the new inline stash placement.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

UI consistency review of the inline stash badge migration. One finding: the inline placement's open/pulsing emphasis never renders because both children opt out of the button's text color.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

UI consistency review of the composer drawer refresh. Two findings; earlier findings from previous runs on this branch are not repeated.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

UI consistency — 1 finding

apps/web/src/components/chat/ComposerCommandMenu.tsx: the skill source moved from a text label to an aria-hidden icon with no text alternative, so the source is no longer exposed to assistive tech and has no visible name either.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

UI consistency — 1 finding

The new inline task badge hand-rolls the micro ghost control that this PR just standardized as a Button size/variant, and it renders immediately next to ComposerStashBadge's inline placement, which does use the primitive.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

UI consistency: 2 findings in the new composer task controls.

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

There are 4 total unresolved issues (including 3 from previous reviews).

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit d5bdcc7. Configure here.}