Skip to content

tracking(desktop): align shell chrome and settings with Astryx and DESIGN.md #4679

Description

@Astro-Han

Goal

Bring the Desktop shell chrome and the settings pages onto the Astryx idiom and the DESIGN.md contract, so that every visible surface reads as one system: one surface ladder, one border means, one radius ladder, two ink tiers, and Astryx primitives at the seam.

This tracker owns the visual and structural work. Behavioural bugs and renderer performance are tracked separately in #4677; WorkHub lives in #3492.

Baseline and predecessors

Work items

Each item is one PR with BEFORE/AFTER Storybook captures (light and dark, same stories, same viewport) in the PR body.

Titlebar

  • Land or supersede fix(desktop): plan titlebar chrome from the front surface #2628 (jackwener, plan titlebar chrome from the front surface; conflicts with main since 08-27) before touching titlebar geometry.
  • Titlebar geometry and identity: one height on the 4px rhythm, session identity from titlebar-session-identity.tsx as the only title authority, chrome actions as Astryx Button/Toolbar, no product shadow.
  • Titlebar dim and modal sync (titlebar-dim-color.ts, titlebar-modal-sync.ts) read colour from the painted root per DESIGN.md §8, never from a token string.

Workbar (right side)

Session rail (left sidebar)

  • Rows on the Astryx List/Item idiom: 32–36px rows, dividers instead of cards, status via StatusDot (no decorative Badge).
  • Hover card, rename dialog and context menu on Astryx Tooltip/Dialog/DropdownMenu with the Floating Recipe (DESIGN.md §5).
  • Project grouping header and pin affordance per Discussion What should Pin do in the “By project” view? #4453 outcome.

Settings (13 pages, in groups of 2–3 per PR, following #4571)

  • General, Appearance, Data
  • Memory, Projects, Subagents
  • Providers overview and connection detail (keep the multi-level IA; fix C1–C4 inside it)
  • Bots overview, detail, onboarding modal
  • Usage, Web search, Health, Permission, Daily review
  • Rules for every page: open groups with Heading + Divider (no stacked cards, C1), no nested containers (C2), no decorative Badge (C3), one primary action per view (C4), no accent as texture (C5), unified row grammar (C7), no dashboard stat tiles (C8).

Cross-cutting

Non-goals

Verification

  • Storybook stories for every touched surface; apps/desktop/e2e where behaviour exists.
  • Inventory regen stays at blocker 0; DESIGN.md contract tests pass.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions