feat(web): adopt the composer state drawers (DEF-5) (#63)

* feat(web): attach composer state drawers (#7150)

(cherry picked from commit 792a1404f6d25838597f8f31b0af144dc1beee12)

* feat(web): collapse tool activity into one line (#7152)

(cherry picked from commit 4a9edff4c1093c1d31b7c97d6d1f32489ea035bd)

Adopted with MessagesTimeline reconciled Pylon-first rather than taken
wholesale: its divergence is only ~93 lines, so upstream's new
`isExpandedToolGroupEntry` plumbing and `GroupContainer` are unioned with
Pylon's response-status group label, session-notification row, and the
failure/success/neutral indicators.

The three-way merge also dropped `activeTurnInProgress` as collateral — upstream
never had it, so its diff context silently removed Pylon's prop from ChatView,
the props interface, the row activity context, and the shared test fixture. All
four are restored; the success and neutral indicators depend on it.

* feat(web): rebuild the composer on upstream's structure (DEF-5)

Closes DEF-5. `#7150` rewrites 1084 lines of a file where Pylon diverged by
1460, and the previous attempt — merging upstream's diff into Pylon's tree
block by block — produced 8 JSX errors because upstream flattens the fragment
and provider-frame divs into one `<form>` while Pylon's layers cannot host its
drawer tree. The two are ends of one restructure.

This takes upstream's composer as the base and replays Pylon's divergence onto
it with `git apply --3way`, which is the same reconciliation in the direction
that actually converges: 8 conflicts instead of a hand-rebuild, and every
feature that was not structural applied clean.

Resolved Pylon-first where the two disagree:

- The command-menu position keeps Pylon's settle loop from `ce5371d41` and
  takes upstream's drawer-aware measurement. Upstream schedules from a plain
  ResizeObserver on the ancestors, which that commit established does not fire
  while the composer glides into place — the bug it fixed and browser-verified
  at 2200px. Its measurement is kept; the loop still owns *when*.
- `resolvedRuntimeMode` / `supportedRuntimeModes` over upstream's plain
  `runtimeMode`, at both the footer and the compact controls menu.
- Quick question and session-resource controls, and Pylon's superset of props
  on ComposerPrimaryActions.
- `ThreadHandoffTab` was lost with upstream's replaced form root and is
  restored; a symbol sweep against origin/pylon caught it.

Upstream's structure wins where it is merely different: the flattened `<form>`,
the drawer tree, the inline task and stash badges. `formatProviderSkillDisplayName`
moves to the client-runtime path `#7150` introduced.

Verified: typecheck clean across 7 packages, 370 tests over 26 composer and
timeline suites, and a symbol-by-symbol sweep confirming all 20 Pylon composer
features survive.

* docs(upstream): retire DEF-5, composer drawers adopted

* style(web): collapse the timeline activity dependency array

* docs(upstream): format the DEF-5 ledger entry

---------

Co-authored-by: maria <maria@kuuro.net>

Author: rynfar

.agents/upstream-review.md

@@ -1946,6 +1946,51 @@ Open questions raised by this batch:
 - **`#7595` made the Past-24h empty state unreachable**: `hours` is always 24 entries, so
   an idle day renders 24 `$0.00` rows instead of "No activity in this window."
 
+## 2026-08-20 (DEF-5) — composer state drawers
+
+**DEF-5 adopted and retired.** `#7150` and `#7152` are in, on branch
+`upstream/def-5-composer`. The register is empty again.
+
+The first attempt merged upstream's diff into Pylon's composer block by block and
+compiled to 8 JSX errors: upstream flattens the fragment and provider-frame divs into
+one `<form>`, and Pylon's layers cannot host its drawer tree. The two are ends of one
+restructure, so the merge could not converge in that direction.
+
+**What worked was reversing it.** Take upstream's composer as the base, then replay
+Pylon's divergence onto it with `git apply --3way`. That is the same reconciliation
+pointed the way that converges: 8 conflicts instead of a hand-rebuild of 1460 lines, and
+every non-structural Pylon feature applied clean. The developer chose this direction
+explicitly — maximum fidelity to upstream over minimum divergence.
+
+Resolved Pylon-first where the two genuinely disagree:
+
+| Conflict                                                        | Resolution                                                                                                                                                                                                                                                                                                                      |
+| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Command-menu position                                           | Pylon's settle loop from `ce5371d41` with upstream's drawer-aware measurement inside it. Upstream schedules from a plain ResizeObserver on the ancestors, which that commit established does not fire while the composer glides into place — the bug it fixed and browser-verified at 2200px. Measurement kept, scheduling not. |
+| Runtime mode                                                    | `resolvedRuntimeMode` / `supportedRuntimeModes` over upstream's plain `runtimeMode`, at the footer and the compact controls menu.                                                                                                                                                                                               |
+| Quick question, session resources, ComposerPrimaryActions props | Pylon's, which are supersets.                                                                                                                                                                                                                                                                                                   |
+| Form root, drawer tree, inline task/stash badges                | Upstream's.                                                                                                                                                                                                                                                                                                                     |
+
+**`ThreadHandoffTab` was lost and restored.** It lived in the form root upstream replaced,
+so it survived as an unused import — invisible to typecheck. A symbol-by-symbol sweep of
+20 Pylon composer features against `origin/pylon` caught it. **`#7152` also deleted
+`activeTurnInProgress` as collateral** across ChatView, the props interface, the row
+activity context, and the shared test fixture — upstream never had it, so its diff context
+swept it up. Both are worth remembering: a green typecheck does not prove a three-way
+merge preserved fork-only code, and the sweep is what does.
+
+MessagesTimeline was reconciled rather than replaced — its divergence is only ~93 lines —
+unioning upstream's `isExpandedToolGroupEntry` plumbing with Pylon's response-status label,
+session-notification row, failure/success/neutral indicators, and its `DotMatrix` marker
+(upstream's replacement is three staggered pulsing dots that repaint every vsync).
+
+Validation: typecheck clean across 7 packages, 370 tests over 26 composer and timeline
+suites, and a live pass confirming the composer renders with both upstream drawer hooks and
+the command menu positions to upstream's exact drawer math (offset 22px = the inset, width
+= form width less twice it). **Not verified in a browser:** the settle loop's dynamic
+re-anchoring, because the composer could not be made to move in the test environment, and a
+thread exercising `#7152`'s collapsed tool rows.
+
 ## Deferred register
 
 _The register is currently empty. DEF-1 and DEF-2 were adopted on 2026-08-11
@@ -1963,6 +2008,5 @@ Every review must read this register before reporting new candidates,
 re-evaluate each `Revisit when` against the current upstream head, and report
 the outcome. See Phase 2.5 of the `review-t3-upstream` skill.
 
-| ID    | Upstream                                  | Deferred on | Revisit when                                                                                                                                                                                                                                                                                                                 | Why deferred                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| ----- | ----------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| DEF-5 | `#7150` `792a1404f` + `#7152` `4a9edff4c` | 2026-08-20  | Whenever the composer is next worked on deliberately. This is scheduled work, not a bet on upstream changing, so there is no waiting condition to poll. Before starting, check `git log --oneline 792a1404f..t3code-upstream/main -- apps/web/src/components/chat/ChatComposer.tsx` for follow-ups that should land with it. | `#7150` rewrites 1084 lines of `ChatComposer.tsx` against 50 Pylon commits and a 4837-vs-2824 line divergence. A full block-by-block resolution compiled to 8 JSX errors: upstream flattens the fragment and provider-frame divs into one `<form>`, so its 335-line drawer tree cannot be hosted by Pylon's layers. Needs the composer rebuilt on upstream's structure with Pylon's ThreadHandoffTab, provider frame classes, settle loop, `resolvedRuntimeMode`, and Quick question / session-resource controls grafted back. `#7152` depends on it. |
+| ID  | Upstream | Deferred on | Revisit when | Why deferred |
+| --- | -------- | ----------- | ------------ | ------------ |

apps/mobile/src/components/AppSymbol.tsx

@@ -2,6 +2,7 @@ import {
   IconAdjustmentsHorizontal,
   IconAlertCircle,
   IconAlertTriangle,
+  IconApps,
   IconArchive,
   IconArrowBackUp,
   IconArrowDownCircle,
@@ -13,6 +14,7 @@ import {
   IconArrowsMaximize,
   IconBellRinging,
   IconBolt,
+  IconBox,
   IconCamera,
   IconChartBar,
   IconCheck,
@@ -104,6 +106,7 @@ const ANDROID_ICON_BY_SF_SYMBOL: Partial<Record<SFSymbol, Icon>> = {
   checkmark: IconCheck,
   "checkmark.circle": IconCircleCheck,
   clock: IconClock,
+  cube: IconBox,
   "chevron.down": IconChevronDown,
   "chevron.left": IconChevronLeft,
   "chevron.left.forwardslash.chevron.right": IconCode,
@@ -141,6 +144,7 @@ const ANDROID_ICON_BY_SF_SYMBOL: Partial<Record<SFSymbol, Icon>> = {
   "sidebar.right": IconLayoutSidebarRight,
   "slider.horizontal.3": IconAdjustmentsHorizontal,
   "square.and.pencil": IconEdit,
+  "square.grid.2x2": IconApps,
   "square.split.2x1": IconLayoutColumns,
   "sun.max": IconSun,
   "stop.fill": IconPlayerStopFilled,

apps/mobile/src/features/threads/ComposerCommandPopover.tsx

@@ -1,9 +1,13 @@
-import type { ComposerTriggerKind } from "@t3tools/shared/composerTrigger";
+import {
+  resolveProviderSkillSourceKind,
+  type ProviderSkillSourceKind,
+} from "@t3tools/client-runtime/providerSkills";
 import type { ServerProviderSkill, ServerProviderSlashCommand } from "@t3tools/contracts";
-import { SymbolView } from "../../components/AppSymbol";
+import type { ComposerTriggerKind } from "@t3tools/shared/composerTrigger";
 import { memo } from "react";
 import { Pressable, ScrollView, View, type ViewStyle } from "react-native";
 
+import { SymbolView, type AppSymbolName } from "../../components/AppSymbol";
 import { AppText as Text } from "../../components/AppText";
 import { GlassSurface } from "../../components/GlassSurface";
 import { PierreEntryIcon } from "../../components/PierreEntryIcon";
@@ -61,13 +65,22 @@ function PopoverSurface(props: { readonly children: React.ReactNode; readonly st
   );
 }
 
-function itemIcon(item: ComposerCommandItem) {
+const SKILL_SOURCE_SYMBOL_BY_KIND: Record<ProviderSkillSourceKind, AppSymbolName> = {
+  app: "square.grid.2x2",
+  repo: "folder",
+  project: "folder",
+  personal: "person.crop.circle",
+  system: "gearshape",
+  other: "cube",
+};
+
+function itemIcon(item: ComposerCommandItem): AppSymbolName | null {
   switch (item.type) {
     case "slash-command":
     case "provider-slash-command":
-      return "terminal" as const;
+      return "terminal";
     case "skill":
-      return "cube" as const;
+      return SKILL_SOURCE_SYMBOL_BY_KIND[resolveProviderSkillSourceKind(item.skill)];
     case "path":
       return null;
   }

apps/web/src/components/ChatView.tsx

@@ -603,8 +603,10 @@ function useLocalDispatchState(input: {
   threadError: string | null | undefined;
 }) {
   const [localDispatch, setLocalDispatch] = useState<LocalDispatchSnapshot | null>(null);
-  const latestUserMessageId =
-    input.activeThread?.messages.findLast((message) => message.role === "user")?.id ?? null;
+  const latestUserMessage = input.activeThread?.messages.findLast(
+    (message) => message.role === "user",
+  );
+  const latestUserMessageId = latestUserMessage?.id ?? null;
 
   const resetLocalDispatch = useCallback(() => {
     setLocalDispatch(null);
@@ -654,6 +656,7 @@ function useLocalDispatchState(input: {
     beginLocalDispatch,
     resetLocalDispatch,
     localDispatchStartedAt: activeLocalDispatch?.startedAt ?? null,
+    latestUserMessageAt: latestUserMessage?.createdAt ?? null,
     isPreparingWorktree: activeLocalDispatch?.preparingWorktree ?? false,
     isSendBusy: activeLocalDispatch !== null,
   };
@@ -2549,6 +2552,7 @@ function ChatViewContent(props: ChatViewProps) {
     beginLocalDispatch,
     resetLocalDispatch,
     localDispatchStartedAt,
+    latestUserMessageAt,
     isPreparingWorktree,
     isSendBusy,
   } = useLocalDispatchState({
@@ -2564,6 +2568,7 @@ function ChatViewContent(props: ChatViewProps) {
     activeLatestTurn,
     activeThread?.session ?? null,
     localDispatchStartedAt,
+    latestUserMessageAt,
   );
   useEffect(() => {
     attachmentPreviewHandoffByMessageIdRef.current = attachmentPreviewHandoffByMessageId;
@@ -4411,6 +4416,14 @@ function ChatViewContent(props: ChatViewProps) {
   // partition (same shell, same capability gate, same PR auto-settle input)
   // so the banner and the sidebar row never disagree.
   const activeThreadShell = useThreadShell(isServerThread ? activeThreadRef : null);
+  const activeComposerTasksProgress =
+    activeLatestTurn !== null && !latestTurnSettled
+      ? (activeThreadShell?.planProgress ?? null)
+      : null;
+  const activeComposerTaskSteps =
+    activeComposerTasksProgress && activePlan && activePlan.turnId === activeLatestTurn?.turnId
+      ? activePlan.steps
+      : null;
   const autoSettleAfterDays = useClientSettings((settings) => settings.sidebarAutoSettleAfterDays);
   const autoSettleOnMerge = useClientSettings((settings) => settings.sidebarAutoSettleOnMerge);
   const activeThreadPr = resolveDisplayedThreadPr({
@@ -4843,13 +4856,13 @@ function ChatViewContent(props: ChatViewProps) {
       ),
       title: working
         ? liveCount > 0
-          ? `${liveCount} ${liveCount === 1 ? "agent" : "agents"} working in the background`
-          : "Background work running"
-        : "Monitoring in the background",
+          ? `${liveCount} ${liveCount === 1 ? "agent" : "agents"} working`
+          : "Background work"
+        : "Monitoring",
       actions: (
         <Button
           size="xs"
-          variant="outline"
+          variant="ghost"
           disabled={isStoppingBackgroundWork}
           onClick={() => void handleStopBackgroundWork()}
         >
@@ -5011,7 +5024,6 @@ function ChatViewContent(props: ChatViewProps) {
     systemComposerBannerItems,
     wokeThreadBannerItem,
   ]);
-
   useEffect(() => {
     setPendingServerThreadEnvMode(null);
     setPendingServerThreadBranch(undefined);
@@ -7253,6 +7265,8 @@ function ChatViewContent(props: ChatViewProps) {
     setDragActive: setIsWorkspaceFileDragActive,
     addFiles: (files) => composerRef.current?.addDroppedFiles(files),
   });
+  const externalComposerDrawerAttached =
+    composerBannerItems.length > 0 || Boolean(threadSyncPhase && !activeEnvironmentUnavailable);
 
   return (
     <div className="relative flex min-h-0 min-w-0 flex-1 overflow-hidden bg-background">
@@ -7464,6 +7478,7 @@ function ChatViewContent(props: ChatViewProps) {
                     <div
                       className={cn(
                         "chat-composer-glass-shell relative mx-auto w-full max-w-3xl",
+                        externalComposerDrawerAttached && "chat-composer-glass-shell-attached",
                         showComposerContextStrip && "chat-composer-glass-shell-with-context",
                       )}
                     >
@@ -7516,6 +7531,7 @@ function ChatViewContent(props: ChatViewProps) {
                                   : null
                             }
                             isPreparingWorktree={isPreparingWorktree}
+                            externalDrawerAttached={externalComposerDrawerAttached}
                             environmentUnavailable={activeEnvironmentUnavailableState}
                             activePendingApproval={activePendingApproval}
                             pendingApprovals={pendingApprovals}
@@ -7528,6 +7544,8 @@ function ChatViewContent(props: ChatViewProps) {
                             respondingRequestIds={respondingRequestIds}
                             showPlanFollowUpPrompt={showPlanFollowUpPrompt}
                             activeProposedPlan={activeProposedPlan}
+                            activeTasksProgress={activeComposerTasksProgress}
+                            activeTaskSteps={activeComposerTaskSteps}
                             runtimeMode={runtimeMode}
                             interactionMode={interactionMode}
                             lockedProvider={lockedProvider}

apps/web/src/components/ComposerPromptEditor.tsx

@@ -73,13 +73,13 @@ import { basenameOfPath } from "~/pierre-icons";
 import {
   COMPOSER_INLINE_CHIP_DECORATOR_CLASS_NAME,
   COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
+  COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME,
   COMPOSER_INLINE_SKILL_CHIP_CLASS_NAME,
-  COMPOSER_INLINE_SKILL_CHIP_LABEL_CLASS_NAME,
   SKILL_CHIP_ICON_SVG,
 } from "./composerInlineChip";
 import { FILE_TAG_CHIP_CLASS_NAME, FileTagChipContent } from "./chat/FileTagChip";
 import { ComposerPendingTerminalContextChip } from "./chat/ComposerPendingTerminalContexts";
-import { formatProviderSkillDisplayName } from "~/providerSkillPresentation";
+import { formatProviderSkillDisplayName } from "@t3tools/client-runtime/providerSkills";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
 import { registerComposerInlineTokenPaste } from "./composerInlineTokenPaste";
 
@@ -257,7 +257,7 @@ function ComposerSkillDecorator(props: { skillLabel: string; skillDescription: s
         className={COMPOSER_INLINE_CHIP_ICON_CLASS_NAME}
         dangerouslySetInnerHTML={{ __html: SKILL_CHIP_ICON_SVG }}
       />
-      <span className={COMPOSER_INLINE_SKILL_CHIP_LABEL_CLASS_NAME}>{props.skillLabel}</span>
+      <span className={COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME}>{props.skillLabel}</span>
     </span>
   );