feat(web): establish redesign primitives and shell by maria-rcks · Pull Request #28839 · pingdotgg/t3code

maria-rcks · 2026-11-01T19:25:39Z

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.

feat(web): establish redesign primitives and shell #28839 1-primitives-shell (this PR)
feat(web): redesign composer and conversation timeline #28840 2-composer-timeline
feat(web): redesign review panels and supporting pages #28841 3-panels-pages
feat(web): redesign settings and setup surfaces #28842 4-settings-setup
feat(voice): add environment speech input #28844 5-voice
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 · 2026-11-01T19:28:22Z

Approvability

Verdict: Needs Human Approval

Macroscope's review found this PR requires human approval — The redesign introduces a default gradient-rim surface treatment and adds a file-level static-analysis suppression in vite.config.ts. Both changes require explicit human review.

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

github-actions · 2026-11-01T19:29:39Z

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	0 B (0.0%)	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.2 KiB	0 B (0.0%)	2.0 KiB	✅
Codex	Live turn WebSocket decoded	21.5 KiB	21.5 KiB	0 B (0.0%)	24.4 KiB	✅
Codex	Live turn messages	1	1	0 (0.0%)	8	✅
Claude	Total thread wire	5.0 KiB	5.0 KiB	0 B (0.0%)	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.2 KiB	1.2 KiB	0 B (0.0%)	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	1	1	0 (0.0%)	8	✅

Baseline: a185dd9 · PR result: c0c5bde · 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 · 2026-11-02T21:29:04Z

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

…s drop "Until" (#29134) Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

* fix(web): project location keeps its machine name when the path truncates

…esign (#30470)

…mitives, composer, panels, settings, voice, panes) Upstream stack top: pingdotgg#28845 at ada1a8b Squash of the six-PR stack onto Baton main. Redesign wins on look and structure; Baton and adopted-PR features are ported into it. Non-trivial conflict decisions: - Shared right-panel width (pingdotgg#22256): the redesign has no per-thread resizable panel (right panel is embedded in workspace panes), so the Settings row, search entry and reset entries are removed. sharedPanelWidth stays in the contracts schema, inert. - persistComposerContextStrip dropped, following the redesign. - Queued-run reorder (pingdotgg#28440): web UI uses the redesign's drag handle and arrow keys over the same reorderQueuedRun command; our up/down buttons are gone. Mobile unchanged. - Transcript view (pingdotgg#27031): ported into the redesign's turn-fold model (turnFoldStartsOpen/withTurnFoldOpen take transcriptStartsOpen). The old "interrupted run opens its fold" rule is superseded by the redesign's failed/limited rule. - Thread details stay closed (pingdotgg#25598): ThreadPanelVisibility.inlineOpen stays optional; workspace panes pass threadDetailsOpenByDefault. - Mention index (pingdotgg#31201): jira/figma/issue item types and the Figma card grid ported into the redesign's grouped composer menu. Classic # menu shows threads only with the mention index off. - Usage page (pingdotgg#15902): keeps UsageExplorer and range picker; the redesign's UsageOverview is dropped. - Settings: Authorized clients/Pairing sections from the redesign, with the multi-environment access picker kept; keybindings grouping (list.* prefix) is gone with the redesign, list.* commands get flat labels. - Baton identity: wordmark in standalone-page header dropped (element removed upstream); brand-width probe, labels and telemetry notice kept; microphone usage string branded. - Diff header collapse toggle is no longer disabled for pending files; GitActionsControl shows the base label inside the redesign's summary row; the native title tooltip on it was dropped for lint. - Lint conversions of Baton code to the redesign's rules: text roles instead of raw sizes, Button/Select instead of hand-styled controls, no " · " joined strings in usage and mention labels. - Voice/speech: VoiceTranscriptionError and speech stream decode moved to the repo's Schema.TaggedError / Effect forms. - pnpm-lock.yaml regenerated with pnpm install.

maria-rcks added the DO NOT MERGE Experimental pull request. Do not merge. label Nov 1, 2026

github-actions Bot added the vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. label Nov 1, 2026

This was referenced Nov 1, 2026

feat(web): redesign composer and conversation timeline #28840

Open

feat(web): redesign review panels and supporting pages #28841

Open

github-actions Bot added the size:XXL 1,000+ changed lines (additions + deletions). label Nov 1, 2026

This was referenced Nov 1, 2026

feat(web): redesign settings and setup surfaces #28842

Open

feat(voice): add environment speech input #28844

Open

feat(web): add workspace panes and transitions #28845

Open

macroscopeapp Bot reviewed Nov 1, 2026

View reviewed changes

Comment thread oxlint-plugin-t3code/rules/no-styled-raw-controls.ts Resolved

Comment thread oxlint-plugin-t3code/rules/no-styled-raw-controls.ts Resolved

maria-rcks added this pull request to stack #28864 November 1, 2026 20:00

maria-rcks force-pushed the maria/redesign/1-primitives-shell branch 5 times, most recently from c812323 to dada6cc Compare November 2, 2026 01:30

macroscopeapp Bot reviewed Nov 2, 2026

View reviewed changes

Comment thread apps/web/src/components/chat/DraftHeroHeadline.tsx Resolved

maria-rcks force-pushed the maria/redesign/1-primitives-shell branch 2 times, most recently from de9a00a to 9802f93 Compare November 3, 2026 00:00

macroscopeapp Bot reviewed Nov 3, 2026

View reviewed changes

Comment thread oxlint-plugin-t3code/rules/no-dot-separated-text.ts Resolved

maria-rcks force-pushed the maria/redesign/1-primitives-shell branch from 9802f93 to 15320fd Compare November 3, 2026 00:05

macroscopeapp Bot reviewed Nov 3, 2026

View reviewed changes

Comment thread oxlint-plugin-t3code/rules/no-dot-separated-text.ts Resolved

maria-rcks and others added 14 commits November 5, 2026 03:57

fix(ui): fit browser previews inside a landscape floating frame

945d8df

fix(web): restore compact panel controls and touch targets

11035a3

fix(web): home screen project rows show the project they open (#29085)

70fa6ae

fix(web): Snoozed and Settled rows drop the PR badge, and snooze time…

b3329c6

…s drop "Until" (#29134) Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

fix(web): snoozed rows show the snooze time like main

b34b201

fix(web): project groups show an icon if any checkout has one (#29199)

1f56095

fix(web): open pull requests show the arrow icon again (#29213)

2aa33fa

fix(web): restore main sidebar thread rows

f77d0c7

fix(web): new-thread project rows inset their environment icon (#29985)

6cd0c38

fix(web): palette project rows show the location under the name (#29980)

d8727ee

* fix(web): project location keeps its machine name when the path truncates

fix(web): sidebar New thread skips the project dialog (#29973)

f391418

fix(web): preserve rebased server text and shortcut expectations

0addf89

fix(web): sidebar rows no longer show a Merged status (#31105)

dee2da0

fix(web): sidebar PR badges use the same green as the rest of the red…

4c1d766

…esign (#30470)

maria-rcks force-pushed the maria/redesign/1-primitives-shell branch from 15672d0 to 4c1d766 Compare November 5, 2026 03:57

This was referenced Nov 5, 2026

fix(web): sidebar toggles move the main pane in one direction #31595

Draft

fix(web): swap sidebar status and hover actions together #31596

Draft

fix(web): suppress sidebar hover cards while scrolling #31603

Draft

Navigation Menu

Repository navigation

feat(web): establish redesign primitives and shell - #28839

feat(web): establish redesign primitives and shell#28839
maria-rcks wants to merge 28 commits into
mainfrom
maria/redesign/1-primitives-shell

maria-rcks commented Nov 1, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

macroscopeapp Bot commented Nov 1, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Nov 1, 2026 •

edited

Loading

Uh oh!

Uh oh!

coderabbitai Bot commented Nov 2, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

maria-rcks commented Nov 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Stack

Evidence

Verification

Uh oh!

Uh oh!

Uh oh!

macroscopeapp Bot commented Nov 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Approvability

Uh oh!

github-actions Bot commented Nov 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Thread transfer impact

Uh oh!

Uh oh!

coderabbitai Bot commented Nov 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

maria-rcks commented Nov 1, 2026 •

edited

Loading

macroscopeapp Bot commented Nov 1, 2026 •

edited

Loading

github-actions Bot commented Nov 1, 2026 •

edited

Loading

coderabbitai Bot commented Nov 2, 2026 •

edited

Loading