Skip to content

macapp round 9: conversation header, ink hierarchy, composer vocabulary #1073

Description

@dennisonbertram

Round 9 of the Codex look-and-feel gauntlet, from an independent critic's blind A/B. All figures in POINTS (raw ÷ 2; both captures verified 2x via 24px traffic lights).

Closed in round 8 — do not revisit

  • Full-width titlebar band: gone. At raw y=2–23, x=100 is (34,34,34) and x=600/1200 is (24,24,24) — matches Codex exactly.
  • Sidebar row type at body size: cap 13.0pt vs Codex 12.0pt.
  • Nav rows carry no fill.

Objective

Close the four loudest remaining gaps. One is systemic and has never been named before.

1. Two stacked header bands instead of one title bar — STRUCTURAL, loudest

Codex: a single 55.0pt header closed by a hairline at y=55.0, #3C3C3C, spanning the main pane only (x 348→1727.5, not the sidebar). Title + folder icon on one row centred at y=27.8pt, at x=367 — 18.5pt from the column divider. Four-control cluster at x 1534–1709.
GoCode: no header band and no hairline anywhere in the main pane (a full-height scan at x=800 finds non-#181818 only at y=0 and y=833). Top-right icons centred at y=25.3; conversation title on a separate row at y=77.5, leaving a 38.5pt empty gap. Title indented to x=354.5 — 133.5pt inside the pane's leading edge — because it aligns to the content column rather than the title bar.

2. No ink hierarchy — SYSTEMIC, never previously named

Codex runs a six-step ramp: #FFFFFF (pane title, selected title, folder icon) → #DEDEDE (wordmark, nav labels) → #969696 (chip labels) → #8B8B8B#909090 (overflow, panel icons) → #747474 (section labels) → #616161 (placeholder).
GoCode collapses seven elements into one 220–224 band: pane title #DCDCDC, "Server default" #E0E0E0, "Plan mode" #DFDFDF, "···" #DDDDDD, title chevron #DDDDDD, all five bottom icons #DEDEDE. Nothing at #747474 or #969696, and it adds #A3A3A3, which Codex never uses.

Two inversions on one row: the folder icon is #A3A3A3 where Codex is #FFFFFF; "···" is #DDDDDD where Codex is #8B8B8B. In the sidebar, "Chat" is #FFFFFF where Codex's nav labels are #DEDEDE — Codex reserves white for the selected conversation.

3. Composer type one step small, padding compressed to match — COSMETIC

Placeholder cap: Codex 12.0pt, GoCode 9.5pt (−21%). Control labels: 12.0 vs 10.5pt.
Composer height 119.5 vs 89.0pt; top-edge-to-placeholder 23.5 vs 15.0pt; placeholder-to-controls 37.0 vs 13.5pt.

4. Composer has no border, window has one it should not — COSMETIC

Codex composer: #2D2D2D fill with a ~0.5pt hairline on all four edges — top (60,60,60), left (55,55,55), bottom (59,59,59). Corner radius 27.5pt.
GoCode composer: fill straight against #181818, no stroke, radius 18.0pt.
Inverted at the window edge: GoCode's raw y=0 is #4E4E4E over the sidebar and #464646 over the main pane — a bright 1px rim at ~2× the sidebar's brightness, reading as a raised bezel. Codex's y=0 is already flat fill. Left, right and bottom are clean in both, so this is a real top-only stroke.

5. A square checkbox in the composer — STRUCTURAL (vocabulary)

GoCode draws a 14.0pt square checkbox for "Plan mode". Codex's composer left group is a borderless "+" glyph and an icon+label chip ("Approve for me", label ink #969696). No checkbox anywhere in the reference. The critic calls this "the most out-of-family single control on screen — AppKit form vocabulary in a chat composer".

Scope

  • macapp/Sources/GoCodeUI/ChatView.swift — conversation header placement, composer type/padding/border, Plan mode control
  • macapp/Sources/GoCodeUI/ConversationChrome.swift — header row
  • macapp/Sources/GoCodeUI/AppShell.swift — window top rim, nav label ink
  • macapp/Sources/GoCodeUI/DesignSystem/Theme.swift — the ink ramp; this is where item 2 is fixed, not at call sites
  • macapp/Tests/GoCodeUITests/ — token tests for the ramp

Out of Scope

  • Everything the critic measured as matching: surface colours, composer width (883.0 vs 884.5pt), composer left inset (20.5 vs 20.0), send diameter (34.0 vs 33.5), placeholder ink (#616161 exact), top-right cluster inset (19.5 vs 19.0), folder icon width, traffic-light pitch, sidebar row type. Do not touch.
  • Sidebar width (220.5 vs 348.5pt). Real, but its consequence is unassessable with an empty conversation list.
  • Sidebar account row, stray chevron, nav icon size, divider colour, send inset, traffic-light offset — real, lower-ranked, a later round.

Acceptance Criteria

  • Conversation title on the window-control row, ~18pt from the divider; first content no lower than ~60pt
  • Header hairline present at y≈55pt, #3C3C3C, spanning the main pane only
  • Ink ramp has distinct rungs at #FFFFFF, #DEDEDE, #969696, #8B8B8B, #747474, #616161; folder icon white, "···" #8B8B8B, nav labels #DEDEDE
  • Placeholder cap ≈12.0pt; composer height ≈119pt
  • Composer carries a hairline border; radius ≈27.5pt
  • Window raw y=0 is flat fill, not a bright rim
  • Plan mode is a chip, not a checkbox
  • Every value verified by probe on the running app

Test Requirements

  • Token tests asserting the ramp rungs are distinct and hold their measured values
  • A test asserting no element uses #A3A3A3 in chrome (the value Codex never uses)
  • Existing 183 Swift tests keep passing

Documentation Updates Required

  • .ux/design-baseline.md and .ux/gauntlet.md — round 9 entry with before/after

Dependencies

Round 8 (#1071, PR #1072).

Metadata

Metadata

Assignees

No one assigned

    Labels

    taskScoped engineering task

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions