Skip to content

macapp round 10: hairline rules, selected state, sidebar width, control-row unification #1074

Description

@dennisonbertram

Round 10 of the Codex gauntlet. From an independent critic that refuted two claims made in round 9.

Corrections to the record first

The composer border reported in round 9 does not exist. The #2B2B2B edge is darker than the #2D2D2D fill — it is the antialiased edge of a rounded rect. The reference's #3C3C3C is lighter than its fill: a real 0.5pt stroke. Verified independently: GoCode 43→45 (darker), Codex 32→60→45 (a distinct lighter band).

The justification for dropping #A3A3A3 was false. The reference does use it — 1,198px, of which 1,067 are in the transcript. It is near-absent from reference chrome (sidebar 82px, header 4px, composer 2px), so removing it from chrome was defensible, but "the reference never uses it" was not true.

Round 8 introduced a regression. Removing the nav fill left no selected state anywhere: the "Chat" row scans uniformly #222222 across x=5→215. The current section is unindicated.

Objective

The critic's one-sentence verdict: the reference is a compartmented app — three hairline rules cutting header from transcript, transcript from composer, sidebar from account — and GoCode has zero rules anywhere, a sidebar 63% of the reference's width, and its title on a second row. It reads as one flat plane with a floating box.

Fix in the critic's stated order.

1. Three hairline rules — STRUCTURAL, loudest

Reference has all three; GoCode has none:

  • main-pane header rule at y=55.0, #3C3C3C, full pane width
  • sidebar/account separator at y=1023.5, #393939, x=20→340
  • composer border #3C3C3C, lighter than the #2D2D2D fill

2. Sidebar width — STRUCTURAL

348.5pt reference vs 220.5pt GoCode: 63% of it, and 20.1% vs 16.1% of window width. Fails on both absolute and proportional measures.

3. Conversation title on a second row — STRUCTURAL

Reference title cap y21.5–33.0 against traffic lights y23–35 — same row. GoCode title cap y72.0–83.5 against lights y20–32 — 52pt lower.

4. Composer control row has two type sizes and two baselines — STRUCTURAL, newly named

Reference: "Approve for me", "Custom", "Medium" all on baseline y=1038.5, x-height 8.0–8.5pt. One size, one baseline.
GoCode: "Server default" baseline y=889.0, x-height 7.0–7.5pt; "Plan mode"/"New" baseline y=890.0, x-height 8.5pt. Two sizes ~17% apart, baselines 1.0pt out, in one row. The critic calls this "the amateur signal in the shot".

5. Chip icons inconsistent — COSMETIC, newly named

GoCode: "Server default" icon 12.5×12.5pt with a 6.5pt label gap; "Plan mode" icon 18.5×14.5pt with a 12.0pt gap. 48% icon-width spread, 85% gap spread between adjacent peers. Reference: 13.5×13.0 and 13.5×14.5, gap 8.5pt both.

6. No selected state — STRUCTURAL (regression from round 8)

Reference active row: #333333 pill, 329pt wide, 36pt tall, #FFFFFF ink. GoCode: nothing. Restore it — the round-8 change over-corrected. Note the principle round 9 asserted was also wrong: the reference does not reserve white for the active conversation. White is a general emphasis token there (2,175px in the header zone), spent on the header title, active sidebar row, account name, plus and mic icons.

7. Header title dimmer than its own folder icon — STRUCTURAL

Round 9 set the folder icon to #FFFFFF and left the title at #DCDCDC, so the decoration outshines the label. The reference sets both to #FFFFFF.

8. Window top rim — COSMETIC, now attributed

#4E4E4E over the sidebar and #464646 over the main pane at y=0, normal by y=1: 2,327px, the largest single ink expenditure in the header zone. The reference has no rim. Previously recorded as unexplained; the critic confirms it is ours and the reference lacks it.

Out of Scope

Measured as exact and not to be touched: composer width (882 vs 883pt), composer fill #2D2D2D, placeholder ink #616161, placeholder left inset 16.5pt, placeholder cap height 11.5pt, secondary label token #969696, overflow #8B8B8B, folder icon #FFFFFF, nav label #DEDEDE, header title cap 12.0pt, all surface fills, sidebar label x-origin (1pt apart despite a 128pt width difference), traffic lights.

Also out: send-button fill #868686#969696, top-right icon at #515151, placeholder copy length, sidebar divider contrast, composer text-well height. Real but lower-ranked.

Acceptance Criteria

  • Three hairlines present, each measured lighter than the fill it borders
  • Sidebar ≥ 300pt
  • Title on the window-control row
  • Control row: one type size, one baseline
  • Chip icons within ~1pt of each other, equal label gaps
  • A visible selected state on the active row
  • Header title and folder icon both #FFFFFF
  • Window y=0 flat, no rim
  • Every claim verified by probe, and for borders verified as lighter than fill — not merely as a colour change

Test Requirements

  • Token tests for the hairline rungs
  • A test asserting a selected-state token exists and is applied
  • Existing 186 Swift tests keep passing

Documentation Updates Required

.ux/gauntlet.md and .ux/design-baseline.md — round 10, including the two round-9 corrections above.

Dependencies

Round 9 (#1073, 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