[maria-rcks]

Part 1 of 6 of the T3 Code redesign. The web client's controls, overlays and shell use a mix of one-off sizes and styles that don't follow the new design canvas.

This layer adds the redesign's shared foundation, which the other five build on:

• components/ui primitives (buttons, menus, pickers, fields, dialogs, popovers, tooltips) restyled to the canvas, with relaxed picker spacing, compact key hints and the inset field surface.
• type roles and the /design-system catalog, kept in sync with the primitives.
• the app shell: sidebar, titlebar, project search, browser address toolbar, floating browser preview frame.
• reduced motion honored in overlay primitives.

Needs approval: Theo for vite.config.ts and components/ui/scroll-area.tsx; Theo or Julius for packages/contracts (ipc, 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 (this PR)
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

Evidence

compared upstream main 57d764ea1aaa0227ed851641c155765525df9273 with 9873e800af8e7205038528dbe52ec556f11c079b in isolated worktrees, using the same seed and todo-list replay. captures are 1280×720, except the add action dialog at 1280×900. replay timestamps and measured turn duration differ between runs.

the sidebar and titlebar use inset panes, revised type and compact controls in dark mode.

the same shell and replay in light mode.

project filtering keeps the same two results for "t3" with revised field and picker geometry.

the thread action menu uses wider rows, revised spacing, icons and surface styling.

the add action dialog uses the new type roles, inset fields, buttons and switches.

the sidebar toggle tooltip uses the revised surface and type styling.

the browser address toolbar uses an inset address field and revised spacing around navigation controls.

the new web titlebar back and forward controls navigate between the seeded thread and replay.

the browser floats into the revised landscape frame while retaining its loaded page.

the /design-system catalog is new in this layer, so there is no before equivalent. these captures show the live foundation tokens and button specimens.

all images were inspected at full size. uploaded images were opened at their original dimensions. both trimmed recordings were inspected, played through, and seeked in the uploaded browser player. project filtering, thread menus, dialog open/cancel, tooltips, sidebar collapse/restore, titlebar history navigation, browser URL navigation and floating preview opening were exercised in the real web client with the dev replay provider.

unverified: returning the floating preview to the right panel, because the automation click timed out; native desktop chrome, mobile, reduced-motion behavior and narrow layouts were outside this capture pass. no code checks were run for this evidence-only task. no pr edits, comments, commits or pushes were made.

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]

Approvability

Verdict: Needs Human Approval

Macroscope's review found this PR requires human approval — Alongside the redesign, vite.config.ts adds a file-level nodeBuiltinImport:off diagnostic suppression. That new static-analysis exception requires human review.

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

[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	5.0 KiB	5.0 KiB	+6 B (+0.1%)	6.8 KiB	✅
Codex	Thread snapshot wire	3.8 KiB	3.8 KiB	0 B (0.0%)	4.9 KiB	✅
Codex	Live turn WebSocket wire	1.2 KiB	1.3 KiB	+6 B (+0.5%)	2.0 KiB	✅
Codex	Live turn WebSocket decoded	21.6 KiB	21.6 KiB	0 B (0.0%)	24.4 KiB	✅
Codex	Live turn messages	2	2	0 (0.0%)	8	✅
Claude	Total thread wire	5.1 KiB	5.0 KiB	−6 B (−0.1%)	6.8 KiB	✅
Claude	Thread snapshot wire	3.8 KiB	3.8 KiB	0 B (0.0%)	4.9 KiB	✅
Claude	Live turn WebSocket wire	1.3 KiB	1.3 KiB	−6 B (−0.5%)	2.0 KiB	✅
Claude	Live turn WebSocket decoded	21.9 KiB	21.9 KiB	0 B (0.0%)	24.4 KiB	✅
Claude	Live turn messages	2	2	0 (0.0%)	8	✅

Baseline: e6e2ab0 · PR result: dada6cc · 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.