# feat\(web\): attach composer state drawers · PR \#7150 · pingdotgg/t3code

[View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/7150)

Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code)

Visibility: public

State: merged

Source repository: pingdotgg/t3code

Source branch: ui-refresh/composer

Target branch: main

Head commit: 0fbf449b86a430d9b4d99a954a807ade37329e08

[Discussion and reviews](https://git.cafe/pingdotgg/t3code/pull/7150)

[Commits](https://git.cafe/pingdotgg/t3code/pull/7150/commits?format=markdown)

[Files changed](https://git.cafe/pingdotgg/t3code/pull/7150/diffs?format=markdown)

## Description

---

## 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._

<table>
<tr><th>Before</th><th>After</th></tr>
<tr>
<td><img src="https://github.com/user-attachments/assets/7a09263b-63e4-4df3-ab28-da8f325bdf4c" alt="Composer slash-command drawer before" width="500"></td>
<td><img src="https://github.com/user-attachments/assets/ad52096c-64f2-4ea6-b1f5-641d4bf94f49" alt="Composer slash-command drawer after" width="500"></td>
</tr>
</table>
## 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. #7153 workspace and navigation
2. #7147 Usage
3. #7148 Pull Requests
4. #7149 terminal
5. #7150 composer, this PR
6. #7151 tool lifecycle projection
7. #7152 tool activity UI

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

<!-- CURSOR_SUMMARY -->
---

> [!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.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 0fbf449b86a430d9b4d99a954a807ade37329e08. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

<!-- Macroscope's pull request summary starts here -->
<!-- Macroscope will only edit the content between these invisible markers, and the markers themselves will not be visible in the GitHub rendered markdown. -->
<!-- If you delete either of the start / end markers from your PR's description, Macroscope will append its summary at the bottom of the description. -->
> [!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's review summary starts here -->
>
> <sup><a href="https://app.macroscope.com">Macroscope</a> summarized 0fbf449.</sup>
> <!-- Macroscope's review summary ends here -->
>
<!-- Macroscope's pull request summary ends here -->