[maria-rcks]

Part 6 of 6 of the T3 Code redesign. Chats, files, terminals and the browser open as panes in a horizontally scrolling workspace instead of fixed side panels.

• workspace panes with tab strips: reorder by drag, overflow scrolling that reveals the active tab, restoring closed tabs, and terminal panes in tab drop targets.
• layout hints and a guided tour introduce the workspace and stay inside the viewport on mobile.
• ⌥⌘ + scroll moves between columns. Pane backgrounds paint without a retained compositor layer, and hints follow compositor motion without a continuous repaint.
• the usage page reuses the floating settings shell.

Needs approval: Theo for vite.config.ts (lint ceilings only); Theo or Julius for packages/contracts (ipc, keybindings, server, settings).

Stack

Do not merge: this stack still needs review. Each PR targets the one below it.

1. feat(web): establish redesign primitives and shell #28839 1-primitives-shell
2. feat(web): redesign composer and conversation timeline #28840 2-composer-timeline
3. feat(web): redesign review panels and supporting pages #28841 3-panels-pages
4. feat(web): redesign settings and setup surfaces #28842 4-settings-setup
5. feat(voice): add environment speech input #28844 5-voice
6. feat(web): add workspace panes and transitions #28845 6-workspace-panes (this PR)

Evidence

Captured against base 5ba6597504b681819ff657e5e0808c54b37edb42 and head f6f00d4f4fe175e66f5d7fc6018ace6a1c841ca3, using separate seeded worktrees and the same replay scenarios at 1280 × 720. Dark mode unless labeled light. No code, PR, or branch changes.

Chat, terminal, and the same server/package.json file: the fixed right panel becomes an independent workspace column.

Browser: the same example.com page remains usable beside the chat and terminal, with the file and browser represented as workspace tabs.

Workspace tab strip: overflow scrolling and active filename reveal were exercised with package.json, README.md, tsconfig.json, vite.config.ts, and the browser. Measured 466 px of tab content in a 326 px viewport; selecting vite.config.ts revealed its filename. Native drag reordered vite.config.ts before README.md and before tsconfig.json in separate passes. The base has no workspace pane tab strip; its fixed panel baseline is shown above.

Restore a closed chat: Ctrl+Shift+T reopened Replay: todo-list with its existing conversation. Closing and restoring a browser also retained its URL and page. Chat-tab restore has no equivalent on the base.

Layout introduction and guided tour are new on this layer. Opened Show me, advanced through all five steps, entered the overview lesson, and finished back in the workspace.

Usage adopts the floating settings shell. Both refs show the same real provider error, with matching selections, in dark mode.

Usage, matching light-mode pair.

Nine-second recording: native tab drag, horizontal column scrolling, closing the chat, and restoring it. Reviewed the exported sequence, then played the uploaded video to completion and checked seeking.

Findings and limits:

• The recording shows a brief empty pane during chat restoration around 5–6 seconds, before its conversation returns. This is observed app behavior, not a successful no-blank-frame result.
• Usage retrieval is unverified: both refs report Codex could not read usage (JSON-RPC -32600). No usage data was fabricated.
• This is a Linux web browser. Ctrl+Alt plus horizontal scroll moved the workspace strip from 223 px to 0 px. The macOS ⌥⌘ path, Electron desktop, native mobile, and three-finger gestures remain unverified.
• Browser automation intermittently disconnected. Native drag succeeded after targeting the visible pane specifically; exploratory pointer-event checks were not used in the final recording.
• No automated test suite or production-build checks were run for this evidence-only task.

Verification

Every layer, on its own and rebased on main fa31b66, passes CI's commands on Blacksmith: vp run knip:check, both GraphQL codegen checks, vp check, vp run typecheck, vp run --filter @t3tools/web test (unit and browser), and the Test job. Layer 6 also passes vp run --filter @t3tools/desktop test.

Done with Claude Code (Opus 5.5) and Codex (gpt-6.1-sol high) children in T3 Code.

🤖 Generated with Claude Code

[macroscopeapp]

Macroscope skipped reviewing this pull request. Per-review cost limit exceeded (workspace setting).

This review would cost an estimated $36.47, which exceeds your per-review limit of $15.00.

The top 3 files driving up this estimate:

File	Diff Size	Estimate
apps/web/src/layout/SurfaceHost.tsx	79.98KB	$3.19
apps/web/src/layout/layoutModel.ts	66.54KB	$2.65
apps/web/src/layout/Overview.tsx	53.51KB	$2.13

Tip

To get this pull request reviewed, you can:

1. Comment @macroscope-app on this PR to request a manual review (monthly spend limits still apply).
2. Exclude the file(s) above from review by adding a pattern to your .macroscope/ignore.md — note that creating this file replaces Macroscope's built-in default ignores rather than extending them.
3. Raise your cost limit in your workspace billing settings.

^{Turn off this reminder going forward}

[macroscopeapp]

Approvability

Verdict: Needs Human Approval

Macroscope's review found this PR requires human approval — This adds workspace panes and transitions while changing familiar default shortcuts, including Mod+D, Mod+W, and Mod+T. Human review is required for those product-default changes and their migration into existing shortcut configurations.

Needs human approval because:

• Per-review cost limit exceeded (workspace setting). Approvability relies on correctness review in order to determine eligibility

^{Review your spending limits in Billing settings, or comment @macroscope-app review this PR to bypass the limit and review now. You can add or adjust custom eligibility rules. Learn more.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

ℹ️ No successful main baseline artifact is available yet. This run establishes the initial measurement.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	—	5.0 KiB	—	6.8 KiB	✅
Codex	Thread snapshot wire	—	3.8 KiB	—	4.9 KiB	✅
Codex	Live turn WebSocket wire	—	1.2 KiB	—	2.0 KiB	✅
Codex	Live turn WebSocket decoded	—	21.5 KiB	—	24.4 KiB	✅
Codex	Live turn messages	—	1	—	8	✅
Claude	Total thread wire	—	5.0 KiB	—	6.8 KiB	✅
Claude	Thread snapshot wire	—	3.8 KiB	—	4.9 KiB	✅
Claude	Live turn WebSocket wire	—	1.3 KiB	—	2.0 KiB	✅
Claude	Live turn WebSocket decoded	—	21.9 KiB	—	24.4 KiB	✅
Claude	Live turn messages	—	2	—	8	✅

Baseline: unavailable · PR result: 814c2e3 · 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: 108.5 KiB
• Claude decoded thread snapshot: 108.8 KiB

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

[coderabbitai]

Finishing Touches

Generate docstrings

• Commit to this branch
• Create a new PR

Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts