revert(web): restore previous composer banners

[t3dotgg]

#8693 moved Compact and dismiss controls into the title row and reduced the banner edge padding. The controls no longer align with the full title and description block.

This fully reverts commit 3d32797f6f4614205debf8a61f09e950f5f9a81c and restores the previous composer banners and activity logs.

Tests not run, as requested.

Made with GPT-5.6 Sol in the Codex harness.

---

Note

Medium Risk
Large composer and banner refactor affects scroll padding, notice stacking, and in-flight turn UX, but stays in presentation-layer React/CSS with added unit tests.

Overview
Reworks the chat composer layout by removing the ComposerSurface / ComposerBanner layer and driving the glass shell, drawers, and shoulder tabs with shared CSS classes and simpler markup (BranchToolbar context strip included).

System notices move out of ChatComposer: ComposerBannerStack now sits above the composer in ChatView, built on the shared Alert UI with hover/focus stack expansion (variant-colored peek cap). Banner ordering is assembled in ChatView—urgent system items first, background liveness in the middle so Stop stays reachable, then calmer notices—using an urgent flag instead of in-stack priority sorting. Server-update banners use inline titles plus ServerUpdateProgress, and failed-update dismissal is folded into version-mismatch dismiss.

Activity shifts to the timeline and tabs: composer “working/sync” rows and ComposerActivityStatus are removed; an in-timeline working row gets workingStepLabel and activeTurnStartedAt. Thread sync uses ThreadSyncStatusPill beside the stack. Plan/task progress for the shoulder tab comes from activeThreadShell.planProgress, with per-turn dismiss on the tasks tab/drawer.

Scroll/layout fixes: shoulderTabReserve subtracts shoulder-tab height from composer overlay clearance (with a MutationObserver when tabs mount), and stash/tasks render as attached shoulder tabs with inline fallbacks when drawers or external banners occupy the top.

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

Note

Replace ComposerBanner system with Alert-based stack and add WorkingTimelineRow to MessagesTimeline

• Removes the ComposerBanner.* component family across composer UI; ComposerBannerStack now uses Alert/Button with hover/focus CSS expansion, and drawers (ComposerStashMenu, ComposerCommandMenu) render in plain div wrappers with glass-surface classes
• Adds a working row variant to MessagesTimeline with a self-ticking WorkingTimer and optional ThinkingActivityRow; work-log overflow collapses after MAX_VISIBLE_WORK_LOG_ENTRIES = 1 visible entry behind a +N previous … toggle
• Introduces per-turn task dismissal in ChatComposer via dismissedTasksTurnId, hiding task progress/steps for the active turn until the thread advances
• Adds ThreadSyncStatusPill as an accessible status indicator for loading/syncing phases, and shoulderTabReserve to adjust composer overlay clearance for shoulder tabs
• deriveWorkLogEntries now includes turn.plan.updated activities instead of filtering them out
• Risk: ChatComposerProps removes bannerItems, isWorking, activeWorkStartedAt, and threadSyncPhase, replacing them with externalDrawerAttached; ComposerTasksBadge now requires onDismiss and hasTrailingShoulder props. versionSkew.ts removes isServerUpdateFailureDismissed and dismissServerUpdateFailure exports. ComposerPendingApprovalPanel renders a div instead of span, which may change wrapping behavior in surrounding markup.

📊 Macroscope summarized 6aa5498. 17 files reviewed, 3 issues evaluated, 0 issues filtered, 3 comments posted

🗂️ Filtered Issues

[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: bd359f5e-6743-45d7-84e9-e1bcae1f6ee6

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

---

_{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	13.3 KiB	13.3 KiB	+31 B (+0.2%)	15.1 KiB	✅
Codex	Thread snapshot wire	6.9 KiB	6.9 KiB	−3 B (−0.0%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.4 KiB	6.4 KiB	+34 B (+0.5%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	55.6 KiB	55.6 KiB	+44 B (+0.1%)	66.4 KiB	✅
Codex	Live turn messages	10	11	+1 (+10.0%)	21	✅
Claude	Total thread wire	13.3 KiB	13.3 KiB	−5 B (−0.0%)	15.1 KiB	✅
Claude	Thread snapshot wire	6.9 KiB	6.9 KiB	−1 B (−0.0%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.5 KiB	6.4 KiB	−4 B (−0.1%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	56.4 KiB	56.4 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	11	11	0 (0.0%)	21	✅

Baseline: 1f8ed54 · PR result: 6aa5498 · 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: 109.4 KiB
• Claude decoded thread snapshot: 110.1 KiB

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

[macroscopeapp]

🟡 Medium chat/MessagesTimeline.logic.ts:934

Error-toned entries can be placed in hiddenEntries and disappear behind the generic toggle, while hasFailure remains false when a later tool entry succeeds. This removes the visible and accessibility indication of the failed operation; exclude error entries from the overflow candidates so they are always rendered.

Suggested change

	const overflowCandidates = visibleGroupedEntries.filter(
	(entry) => entry.agentSpawn === undefined,
	);
	const overflowCandidates = visibleGroupedEntries.filter(
	(entry) => entry.agentSpawn === undefined && entry.tone !== "error",
	);

🚀 Reply "fix it for me" or copy this AI Prompt for your agent:

In file @apps/web/src/components/chat/MessagesTimeline.logic.ts around lines 934-936:

Error-toned entries can be placed in `hiddenEntries` and disappear behind the generic toggle, while `hasFailure` remains `false` when a later tool entry succeeds. This removes the visible and accessibility indication of the failed operation; exclude error entries from the overflow candidates so they are always rendered.

[macroscopeapp]

🟡 Medium chat/ComposerStashMenu.tsx:90

Arrow-key navigation updates highlightedId without scrolling the selected CommandItem into view, so with a max-h-64 list the item that Enter will restore can move below the viewport and remain invisible. Restore the selected-row scrollIntoView behavior (or equivalent) when highlightedId changes.

🚀 Reply "fix it for me" or copy this AI Prompt for your agent:

In file @apps/web/src/components/chat/ComposerStashMenu.tsx around line 90:

Arrow-key navigation updates `highlightedId` without scrolling the selected `CommandItem` into view, so with a `max-h-64` list the item that `Enter` will restore can move below the viewport and remain invisible. Restore the selected-row `scrollIntoView` behavior (or equivalent) when `highlightedId` changes.

[macroscopeapp]

🟠 High chat/ComposerBannerStack.tsx:152

On touch-only devices, stacked banners remain inaccessible: the expanded list is gated by group-hover/group-focus-within, while the collapsed cap has pointer-events-none and the banners are visibility: hidden. This prevents users from reaching actions such as the background-work Stop button when another banner is in front. Restore a touch-activatable expansion control or provide a non-hover path to reveal the stack.

🚀 Reply "fix it for me" or copy this AI Prompt for your agent:

In file @apps/web/src/components/chat/ComposerBannerStack.tsx around line 152:

On touch-only devices, stacked banners remain inaccessible: the expanded list is gated by `group-hover`/`group-focus-within`, while the collapsed cap has `pointer-events-none` and the banners are `visibility: hidden`. This prevents users from reaching actions such as the background-work `Stop` button when another banner is in front. Restore a touch-activatable expansion control or provide a non-hover path to reveal the stack.

[macroscopeapp]

UI Consistency — 4 findings

This revert restores the pre-primitive composer markup. Most of it is a faithful rollback, but a few keyboard/AT affordances that existed on main do not come back, and the shared attached-drawer contract is now duplicated across call sites.

• ComposerBannerStack.tsx — stacked banners become hover-only; the group-focus-within path is unreachable because the region is visibility: hidden.
• ComposerStashMenu.tsx — arrow navigation no longer scrolls the highlighted row into view or moves focus, and rows are no longer focusable/labelled controls.
• ThreadSyncStatusPill.tsx (+ 4 other call sites) — the attached-drawer surface geometry is now copy-pasted rather than owned by one component.
• ComposerPlanFollowUpBanner.tsx — commented-out JSX reintroduced.

None of these block the rollback itself; they are the parts of the reverted behavior worth keeping or re-adding.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Stacked banners are now reachable by hover only. The collapsed cap is aria-hidden + pointer-events-none, and this region stays invisible (visibility: hidden) until group-focus-within — but a visibility-hidden subtree is removed from the tab order, so focus can never enter and group-focus-within:* can never fire. Keyboard and coarse-pointer users lose access to every stacked banner and to its actions/dismiss buttons; the version being reverted exposed a real Peek button (aria-expanded / aria-controls, Escape to collapse) for exactly this.

Smallest fix: keep a focusable trigger that toggles an explicit stackExpanded state and drive visibility from that state instead of group-hover/group-focus-within alone.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Commented-out JSX is reintroduced here; it has no owner and will silently rot.

       </div>
-      {/* <div className="mt-2 text-xs text-muted-foreground">
-        Review the plan
-      </div> */}
     </div>

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

The attached-drawer contract (chat-composer-drawer-surface chat-composer-drawer-attached chat-composer-drawer-slot plus the pb-[calc(var(--chat-composer-attachment-overlap)_+_0.375rem)] overlap padding) is now hand-copied here and in ComposerBannerStack, ComposerStashMenu, ComposerCommandMenu, and ChatComposer's top drawer, with the overlap padding spelled as an arbitrary calc() in two of them. That is durable shared geometry with five owners, which is what drifts first.

If the rollback stands, a one-component wrapper for the surface classes (call sites keeping only layout/padding) would preserve the revert while keeping a single owner for the seam.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

ArrowUp/ArrowDown now only update highlightedId. The removed scrollIntoView({ block: "nearest" }) / focus() calls were what kept the highlighted entry inside the max-h-64 scroll region and moved real focus onto the row. Combined with rows rendering as non-focusable CommandItems (no per-row restore button, no accessible name, no aria-activedescendant), keyboard users can highlight entries that stay scrolled out of view and assistive tech is never told which entry is active.

Smallest fix: scroll the highlighted row into view when it changes (e.g. drawerRef.current?.querySelector('[data-stash-entry="…"]')?.scrollIntoView({ block: "nearest" })) and keep the restore action as a focusable, labelled control per row.

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.

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

Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.

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

[cursor]

Stacked banners unreachable on touch

Medium Severity

The restored stack only reveals hidden banners via group-hover and group-focus-within. The peek cap is pointer-events-none and aria-hidden, so there is no tap target. When the front item is urgent and has no actions (for example the reconnecting notice), touch users cannot reach banners behind it, including background-liveness Stop.

Additional Locations (1)

• apps/web/src/components/chat/ComposerBannerStack.tsx#L110-L122

 

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

[cursor]

Failed update banner cannot dismiss

Medium Severity

A failed server update always shows in the stack, but dismiss is omitted whenever updateFailed is true, and Retry is omitted when versionMismatch is missing. That can leave a persistent error banner with no action until update state clears on its own.

 

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

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is a large production composer and timeline refactor that changes default banner stacking, keyboard/touch access, update failure handling, and shared layout geometry. Unresolved accessibility and failure-state concerns remain in these normal user paths.

Not approved because:

• 3 blocking correctness issues found at or above your repo's Minimum Blocking Severity

^{Adjust the Minimum Blocking Severity for this repo — including turning it Off — in Settings. You can add or adjust custom eligibility rules. Learn more.}