Skip to content

Frosted Instrument: full visual redesign on macOS vibrancy - #53

Merged
Tryanks merged 16 commits into
mainfrom
visual-redesign
Jul 17, 2026
Merged

Frosted Instrument: full visual redesign on macOS vibrancy#53
Tryanks merged 16 commits into
mainfrom
visual-redesign

Conversation

@Tryanks

@Tryanks Tryanks commented Jul 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Owner

Frosted Instrument — a full visual redesign

Reshapes tcode's entire visual language while keeping the layout, interactions, blue primary, and DM Sans + SF Mono type. The design language is "Frosted Instrument": a vibrancy glass chrome wrapped around a near‑opaque paper reading plane, with blue promoted from a button color to the ink line that runs through selection, focus, and emphasis. Full spec in docs/visual-redesign.md.

Light

Chat, light

Dark

Chat, dark

Diff panel · agent marketplace

Diff panel Agent marketplace

What changes

  • Materials. On macOS the window is WindowBackgroundAppearance::Blurred with a translucent glass canvas (T0); the sidebar sits directly on the glass with no seam borders; the chat, right, and settings columns paint a near‑opaque paper surface (T1) that floats on a soft shadow. Non‑macOS windows stay opaque via a flattened palette. TCODE_NO_VIBRANCY=1 forces the opaque path.
  • Palette. Light mode pairs warm paper white with a cool glass chrome; dark mode is a blue‑carbon "night instrument" tone. Semantic colors align with the macOS system palette.
  • Separators. Full‑bleed 1px rules are gone — whitespace, material seams, and end‑faded hairlines carry structure instead.
  • Rail language. Event and tool‑call cards and toasts drop their border boxes for a 2px semantic left rail (info / success / danger) on a soft fill; the changed‑files summary is a quiet prose‑aligned manifest.
  • Overlay contour. Popovers, menus, dialogs, and toasts share a near‑opaque fill + hairline border + large soft shadow at a 14px radius, over a dimming scrim.
  • Composer as hero. 16px radius, resting hairline + shadow, focused ring + blue glow; control‑row chips read as glass.
  • Settings. macOS System Settings idiom — one hairline‑bordered group container per section, transparent rows split by inset hairlines, small‑caps section labels. Selection is a 6px rounded rect with the blue tint, consistent across sidebar, palette, and diff rows.
  • System. A role‑based radius scale and an 11 / 13 / 15px type scale, both enforced through the material module — no magic corner numbers or stray sizes.
  • Tooling. tools/vm-screenshot.sh + tools/vm-seed/ capture seeded, window‑cropped screenshots inside a tart macOS VM for repeatable visual acceptance; every screenshot here and in the README is produced by it.

Gates

  • cargo fmt --all --check clean
  • cargo clippy --workspace --all-targets -- -D warnings clean
  • cargo test --workspace green (430+ tests, no new failures)
  • Both appearances accepted from release‑build VM captures over a seeded, content‑rich session

🤖 Generated with Claude Code

Tryanks and others added 16 commits July 17, 2026 00:18
@Tryanks @claude
Lay the Frosted Instrument foundation: vibrancy window, material tier…
fa1fe9e 
…s, new palette

macOS window goes Blurred with a translucent glass canvas (solid-flattened
on other platforms); chat/right/settings columns paint a near-opaque paper
surface; themes/tcode.json gets the full Frosted Instrument palette; the
material module owns tiers, the role-based radius scale, and light effects.
Spec in docs/visual-redesign.md.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@Tryanks @claude
Give dialogs, toasts and the palette the Frosted Instrument overlay c…
5d3ce0c 
…ontour

T3 double contour (near-opaque fill + hairline + shadow_xl) with the overlay
radius; toast rails and action chips speak the semantic-tint language; command
palette rows become tinted pills; typography normalized to the 11/13/15 scale.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@Tryanks @claude
Restyle the diff, terminal, preview, plan and acp panels to Frosted I…
3a7d42e 
…nstrument

Full-bleed separators give way to whitespace and faded hairlines; selection
rows become tinted pills; floating layers get the T3 double contour; chips
speak semantic tints; radii move to the role scale.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@Tryanks @claude
Restyle settings and provider surfaces to Frosted Instrument
0f27812 
Provider cards drop their border boxes for T2 fills with semantic status
chips; the amber status dot moves off its hardcoded hex onto the warning
token; pickers get the overlay contour; typography lands on the 11/13/15
scale.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@Tryanks @claude
Let the sidebar sit on raw glass: no seam borders, tinted selection pill
6ca67b3 
The paper columns gain their floating shadow; the sidebar loses its right
seam and footer divider (material contrast separates), the section label goes
small-caps, and the active thread becomes a blue-tinted pill that ignores
hover.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@Tryanks @claude
Make the composer the hero: focus glow, overlay contours, glass chips
5761f46 
The input card gets the 16px hero radius with a resting hairline + shadow_md
and a focused ring + blue glow; every control-row popover takes the T3 double
contour at the overlay radius; attachment thumbnails drop hard borders for T2
fills; typography lands on the 11/13/15 scale.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@Tryanks @claude
Speak the rail language in the chat timeline
7fa325a 
Event and tool-call cards drop their border boxes for a 2px semantic left
rail on a T2 fill; the thread header loses its full-bleed divider; chat menus
take the T3 overlay contour; chips move to semantic tints and the type scale
settles on 11/13/15.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@Tryanks @claude
Run rustfmt over the composer sweep
4c8d03f 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@Tryanks @claude
Refresh README screenshots for the Frosted Instrument redesign
c3bf307 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@Tryanks @claude
Add the tart-VM screenshot pipeline used for visual acceptance
01959b6 
tools/vm-screenshot.sh launches a given tcode binary inside the local tart
macOS VM, optionally seeds a demo session store (tools/vm-seed), sets the
appearance, fits and window-crops the capture, and copies PNGs back out.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@Tryanks @claude
Polish the material system after first-hand review
fdccd19 
The composer becomes a true white console (popover fill — the glass canvas
token rendered as murk on paper); event cards soften to a 60% wash with
floating rounded rails; the changed-files card sheds its slab and rail for a
quiet prose-aligned manifest; dialogs get a real scrim (overlay token) and
opaque panels; the sidebar toggle moves to the header's far right instead of
posing as a fourth traffic light; TCODE_NO_VIBRANCY=1 gives a diagnostic
opaque window. Spec gains the revised component doctrine.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@Tryanks @claude
Selection is a tight 6px rounded rect, not a capsule
405c8b1 
Sidebar threads, palette rows and diff-panel scope rows drop the pill for
the native macOS selection shape; capsules stay reserved for badges and
status dots. Doctrine recorded in the spec.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@Tryanks @claude
Rebuild settings surfaces on the macOS grouped-list idiom
6ec39a5 
Settings, provider and orchestrate pages drop their stacked card slabs for
System Settings anatomy: one popover-filled hairline-bordered container per
group, transparent rows split by inset hairlines, 11px small-caps section
labels, and real whitespace between groups. Provider cards become rows whose
expanded editors nest inside the group.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@Tryanks @claude
Fix settings nav selection shape and kill the orchestrate callout slabs
1648689 
Settings nav items match the main sidebar: 6px rounded rect with list_active
tint, not a capsule. The orchestrate intro becomes quiet muted helper text
instead of a colored callout box, and the empty/none-enabled states move to
the shared soft-fill floating-rail language.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@Tryanks @claude
Reshoot README screenshots from a release build (embedded icons)
cdf61c6 
Debug builds resolve gpui-component's SVG icons from the host cargo checkout
at runtime, which the screenshot VM lacks, so the earlier debug captures were
missing every library icon. Release builds embed the SVGs, so these captures
show the full icon set. Also refreshes the settings nav selection shape and
orchestrate callout fixes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@Tryanks @claude
Multiplex vm-screenshot SSH calls over one connection
69c032d 
The script makes ~20 SSH round trips per run; a fresh handshake + password
auth each time dominated wall-clock (the loopback binary copy is cheap).
ControlMaster/ControlPersist shares one master connection, cutting warm-VM
runs from ~55s to ~13s.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@Tryanks
Tryanks merged commit 6fad3c7 into main Jul 17, 2026
3 checks passed
@Tryanks
Tryanks deleted the visual-redesign branch August 10, 2026 05:48
This was referenced Oct 11, 2026
Merged
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@Tryanks