feat: design wave 2 — identity tokens: accent scale, StatusStamp, mono utility (goal 0001) (#48)

A full-app design audit (screenshots, both themes) found pill/color/
typography drift beyond wave 1's convention fixes: 7 independent ad-hoc
`<Label variant="...">` pill families with no shared vocabulary, node-kind
canvas colors literally aliasing Primer's status-semantic tokens (a
process-kind node and a success-status pill rendered the identical green
-- "green triple duty"), and machine-readable facts (URLs, IDs, commands,
timestamps) rendering in body text with nothing to mark them as such.

1. Accent scale: Mill's own desaturated verdigris/teal, layered over
   Primer's functional accent tokens (frontend/src/app/mill-tokens.css)
   so every Primer component reading them (links, focus rings, selected
   tabs, the sidebar active row) picks it up for free. Deliberately a
   separate file imported AFTER @primer/primitives' theme CSS in
   main.tsx -- Primer's own light.css sets these tokens on its
   ThemeProvider's internal wrapper <div> directly (not just :root), so
   a same-specificity override has to win the cascade by load order;
   caught by a computed-style e2e proof against the real compiled page
   after a specificity-only attempt looked correct on paper and still
   lost.
2. Node-Kind canvas colors (composition/nodeKind.ts) decoupled from
   status semantics: own fixed --mill-kind-* tokens, contrast-checked
   independently, never aliased to a Primer semantic token or the
   accent scale.
3. shared/StatusStamp.tsx: one stamp component replacing the 7 pill
   families across the app, five semantic variants only (success/
   caution/danger/neutral/identity). Primer Label stays for genuine
   categorization tags (auth type, field In/Type) -- StatusStamp is for
   STATE, Label stays for CATEGORY. Also closed two stray un-migrated
   key-combo sites (NodeInspector, SettingsView) onto wave 1's
   KeyComboChip, a gap wave 1's own commit message had claimed closed.
4. shared/monoText.module.css: a mono utility class applied to MCP
   server commands, AI provider/Integration base URLs, run timestamps,
   ExecEnv directories, Decision output keys.

Full local gate green (tsc/eslint/boundaries/vitest/check-loc/golangci-
lint/go vet/go build desktop+server/go test/ls_lint) plus a full
Playwright e2e run (196/196, 3 pre-existing timing-flake tests confirmed
via isolated reruns, none touching a Label/StatusStamp testid or
variant). docs/SPEC.md §3.8-area, goal 0001, and BACKLOG annotated;
goal stays OPEN pending wave 3 (palette IA) and the owner's live sign-off.


Claude-Session: https://claude.ai/code/session_018pkViCNAuZp2vBv2K9AbUh

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: alicoding

docs/SPEC.md

@@ -4503,6 +4503,57 @@ surface can already express.
   authoring UI — Phase B's own bigger, genuinely separate design
   surface, tracked in the ADR, not silently folded into what shipped.
 
+- **Design system tokens, `LOCKED`, built (goal 0001, design wave 2,
+  2026-08-13) — a deliberate identity layer over Primer, not
+  per-surface ad hoc styling.** Prompted by a full-app design audit
+  (screenshots, both themes) finding pill/color/typography drift that
+  outlived wave 1's convention fixes above. Three pieces, all
+  app/frontend/src/app/mill-tokens.css + shared/:
+  - **Accent scale**: a desaturated verdigris/teal (`#1F6F6B` light /
+    `#3FA39E` dark text, `#2B7D77` dark fill — the two dark shades
+    split for contrast reasons Primer's own dark theme already
+    demonstrates: a fill needs contrast FOR white content painted on
+    it, text needs contrast AGAINST the page behind it) layered over
+    Primer's functional `--bgColor-accent-*`/`--borderColor-accent-*`/
+    `--fgColor-accent` tokens, so every Primer component reading them
+    (links, focus rings, selected tabs, the sidebar active row) picks
+    it up for free. Lives in its own `mill-tokens.css`, imported
+    *after* `@primer/primitives`' theme CSS in `main.tsx` — Primer's
+    own light.css sets these tokens on three selectors including one
+    matching its ThemeProvider's internal wrapper `<div>` directly
+    (not just `:root`), so a same-specificity override has to win by
+    load order, not by a selector-specificity trick alone (an earlier
+    attempt at boosted specificity looked correct on paper and still
+    lost the real cascade — caught by a computed-style e2e proof
+    against the compiled page, not assumed from reading the CSS).
+  - **Node-Kind canvas colors decoupled from status semantics**
+    (`composition/nodeKind.ts`'s `KIND_ICON_BG`, confined to
+    canvas/palette only): previously aliased Primer's own
+    `--bgColor-success-emphasis`/`--bgColor-attention-emphasis`/etc.
+    directly, so a `process`-kind node card and a `success`-status
+    pill rendered the literal same green ("green triple duty") — now
+    each kind has its own fixed `--mill-kind-*` custom property,
+    contrast-checked independently, never aliased to a Primer semantic
+    token or the accent scale above.
+  - **`shared/StatusStamp.tsx`**: one stamp component (mono uppercase
+    label, slightly-squared radius, subtle border) replacing 7 ad-hoc
+    `<Label variant="...">` pill families across the app (workflow
+    live/draft/disabled, run SUCCESS/ERROR, guardrail approved/denied,
+    built-in badges, trigger armed/not-live, run kind, dev-build
+    identity). Five semantic variants only — `success`/`caution`/
+    `danger`/`neutral`/`identity` — deliberately fewer than Primer's
+    own variant palette, so two different pill families can never
+    drift onto different colors for the same meaning again. Primer's
+    `Label` stays in use for genuine categorization tags (auth type,
+    field `In`/`Type`, a Decision's category column) — StatusStamp is
+    for STATE, Label stays for CATEGORY, not a wholesale replacement.
+  - **Mono utility** (`shared/monoText.module.css`'s single `.mono`
+    class, a `--mill-mono` ui-monospace stack): applied to
+    machine-readable facts — MCP server commands, AI provider/
+    Integration base URLs, run timestamps, ExecEnv directories,
+    Decision output keys — a class, not a component, since the only
+    thing every call site needs is one CSS property.
+
 ## 11. Enterprise / regulated deployment readiness
 
 `OPEN` throughout — this section is Research only. Nothing here is

docs/goals/0001-authoring-surface-overhaul.md

@@ -137,6 +137,60 @@ the real Settings dark-theme toggle and asserts computed
 than a manual-only note — Settings already ships a working dark-theme
 `SegmentedControl`, so this was e2e-feasible, not desktop-only.
 
+## Design wave 2 — delivered (2026-08-13)
+
+The taste-layer pass named as a separate later piece in wave 1's own
+note above: identity tokens across the whole app (not just the
+authoring surface), driven by the same full-app design audit's
+sections 1/2/6. Two sequential PRs; this is PR 1. Full detail in
+`docs/SPEC.md` §3.8-area's new "Design system tokens" bullet — summary
+here:
+
+1. **Accent scale**: Mill's own desaturated verdigris/teal, layered
+   over Primer's functional accent tokens (`app/mill-tokens.css`) so
+   every Primer component reading them picks it up for free. Proven
+   via a computed-style e2e test against the real compiled page after
+   a same-specificity attempt first looked correct on paper and still
+   lost the cascade.
+2. **Node-Kind canvas colors decoupled from status semantics**
+   (`composition/nodeKind.ts`): no longer aliased to Primer's shared
+   `--bgColor-success-emphasis`/etc. — own fixed `--mill-kind-*`
+   tokens, closing the audit's "green triple duty" finding (a
+   `process`-kind node and a `success`-status pill used to be the
+   literal same green).
+3. **`shared/StatusStamp.tsx`**: one stamp component replacing 7 ad-hoc
+   `<Label variant="...">` pill families (workflow live/draft/
+   disabled, run SUCCESS/ERROR, guardrail approved/denied, built-in,
+   trigger armed/not-live, run kind, dev-build identity) — five
+   semantic variants only (`success`/`caution`/`danger`/`neutral`/
+   `identity`). Primer `Label` stays for genuine categorization tags
+   (auth type, field `In`/`Type`) — not a wholesale replacement.
+   Two stray un-migrated key-combo sites found during the sweep
+   (`NodeInspector.tsx`'s per-node hotkey editor, `SettingsView.tsx`'s
+   global summon hotkey) now render through wave 1's own
+   `KeyComboChip` too, closing a gap wave 1's commit message claimed
+   was already closed everywhere.
+4. **Mono utility** (`shared/monoText.module.css`): applied to MCP
+   server commands, AI provider/Integration base URLs, run timestamps,
+   ExecEnv directories, Decision output keys.
+
+Proofs: `e2e/dark-mode.spec.ts` gained two new tests — one asserting
+the real computed `--bgColor-accent-emphasis`/`--fgColor-accent`
+values in both themes (the actual cascade-order regression this
+caught), one asserting a rendered StatusStamp's computed color.
+Existing suites green (196/196 e2e, full Go suite, vitest, tsc,
+eslint, boundaries, check-loc) — 3 pre-existing timing-flake e2e tests
+unrelated to this change (confirmed via isolated reruns, none touching
+a Label/StatusStamp testid or variant). Screenshots: `scratchpad/audit/
+*-after.png` (workflows list, Configure MCP Servers, Settings, light +
+dark) for the owner's review against the `-light.png`/`-dark.png`
+before-references from the original audit.
+
+Goal stays OPEN — wave 3 (palette IA regrouping, Configure Attributes
+tab conformance) is the second PR of this same design pass, and the
+owner's own live sign-off (this goal's stated Acceptance) hasn't
+happened yet.
+
 ## Live-review additions (2026-08-10)
 - Hotkey recorder vs native menu accelerators (owner hit ⌘⇧W while
   recording — the window closed, and since Mill exits on last-window-

docs/goals/BACKLOG.md

@@ -208,7 +208,7 @@ live-review material, interleaved during owner reviews, not a lane.**
 11. [ ] 0030 second-pass linters (gocritic/prealloc/contextcheck/sqlclosecheck — named future work in goal 0028) + `.ls-lint.yml` gains a root `node_modules` ignore (gap found 2026-08-12: a stray root node_modules broke root-file-naming; tiny, rides this or any PR).
 
 **Owner-needed lane (parallel, never blocks the queue)**
-- [ ] [0001 — Authoring-surface overhaul](0001-authoring-surface-overhaul.md) (spacing audit + §3.8 prototype elements — live-review material, needs the owner driving; design wave 1 DELIVERED 2026-08-12 — 7 app-wide convention/bug fixes from a full-app audit screenshot pass, zero taste calls; the taste-layer wave 2/3 pending, goal stays open)
+- [ ] [0001 — Authoring-surface overhaul](0001-authoring-surface-overhaul.md) (spacing audit + §3.8 prototype elements — live-review material, needs the owner driving; design wave 1 DELIVERED 2026-08-12 — 7 app-wide convention/bug fixes from a full-app audit screenshot pass, zero taste calls; design wave 2 DELIVERED 2026-08-13 — identity tokens: Mill's own accent scale layered over Primer, node-kind canvas colors decoupled from status semantics, one StatusStamp component replacing 7 pill families, a shared mono-font utility; wave 3 (palette IA regroup, Configure Attributes conformance) next, goal stays open pending the owner's live sign-off)
 - [ ] Owner hands-on pass over the week's shipped features (Quick Panel focus fix, view-mode hardening, inline hotkey hints, seed reset/restore)
 
 **Delivered**

frontend/e2e/dark-mode.spec.ts

@@ -57,3 +57,54 @@ test('the canvas minimap is themed in dark mode, not React Flow\'s light default
   // dark in dark mode.
   expect(bg).not.toBe('rgb(255, 255, 255)')
 })
+
+// Design wave 2: Mill's own teal accent (app/index.css) is layered
+// over Primer's shared --bgColor-accent-emphasis/-muted,
+// --borderColor-accent-emphasis/-muted, --fgColor-accent tokens via
+// `html:root`/`html[data-color-mode=...]` selectors carrying one extra
+// specificity segment over Primer's own bare `:root`/attribute
+// selectors -- this proves that actually wins the real cascade in a
+// live browser (not just "should win" from reading the CSS), in both
+// themes, rather than trusting the specificity math alone.
+test('Mill\'s teal accent tokens override Primer\'s default blue, light and dark', async ({ page }) => {
+  await page.goto('/')
+
+  const readAccent = () => page.evaluate(() => {
+    const style = getComputedStyle(document.documentElement)
+    return {
+      emphasis: style.getPropertyValue('--bgColor-accent-emphasis').trim(),
+      fg: style.getPropertyValue('--fgColor-accent').trim(),
+    }
+  })
+
+  const light = await readAccent()
+  expect(light.emphasis.toLowerCase()).toBe('#1f6f6b')
+  expect(light.fg.toLowerCase()).toBe('#1f6f6b')
+  // Never Primer's own default accent blue -- the actual regression
+  // this guards (a same-specificity override losing to import order).
+  expect(light.emphasis.toLowerCase()).not.toBe('#0969da')
+
+  await switchToDarkTheme(page)
+  const dark = await readAccent()
+  expect(dark.emphasis.toLowerCase()).toBe('#2b7d77')
+  expect(dark.fg.toLowerCase()).toBe('#3fa39e')
+  expect(dark.emphasis.toLowerCase()).not.toBe('#1f6feb')
+})
+
+// StatusStamp (design wave 2, goal 0001 audit §1): a real rendered
+// stamp resolves to the semantic colors its variant promises, and the
+// `identity` variant specifically resolves to Mill's own teal accent
+// rather than Primer's default blue -- the concrete "green triple
+// duty"-style collision this component exists to prevent, proven for
+// the accent/identity pairing the same way the kind-color test proves
+// it for canvas nodes.
+test('StatusStamp variants resolve to distinct, correct colors', async ({ page }) => {
+  await page.goto('/')
+  await page.getByRole('link', { name: 'Workflows' }).click()
+
+  const builtInStamp = page.locator('[data-testid="inventory-row"][data-entity="workflow"] [data-variant="identity"]').first()
+  await expect(builtInStamp).toBeVisible()
+  const color = await builtInStamp.evaluate((el) => getComputedStyle(el).color)
+  // rgb(31, 111, 107) == #1f6f6b, the light-theme accent fg.
+  expect(color).toBe('rgb(31, 111, 107)')
+})

frontend/src/app/App.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import {Events, WML} from "@wailsio/runtime";
-import {Label, PageLayout, useTheme} from "@primer/react";
+import {PageLayout, useTheme} from "@primer/react";
+import { StatusStamp } from '../shared/StatusStamp'
 import HomeView from "../views/HomeView";
 import ActivityView from "../views/ActivityView";
 import ReviewView from "../views/ReviewView";
@@ -466,9 +467,9 @@ function App() {
               time by the band-tracking e2e's intercepted clicks. The
               footer never moves. */}
           {isIsolatedData && (
-            <Label variant="accent" size="small" data-testid="isolated-data-badge">
+            <StatusStamp variant="identity" data-testid="isolated-data-badge">
               {t('shell.testDataBadge')}
-            </Label>
+            </StatusStamp>
           )}
         </span>
         <span className={styles.time}>

frontend/src/app/BuildIdentityBadge.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { Label } from '@primer/react'
+import { StatusStamp } from '../shared/StatusStamp'
 import { SettingsService } from '../shared/bindings'
 import type { BuildInfo } from '../shared/bindings'
 import { useGoSourceStale } from './goLiveness'
@@ -62,19 +62,19 @@ export function BuildIdentityBadge({ buildInfo }: { buildInfo: BuildInfo | null
     // amber (unlike green/red) isn't self-explanatory at a glance.
     if (goSourceStale) {
       return (
-        <Label
-          variant="attention" size="small" className={styles.devRibbon}
+        <StatusStamp
+          variant="caution" className={styles.devRibbon}
           data-testid="dev-go-stale-badge"
           title={t('buildIdentityBadge.goStaleTooltip')}
         >
           {t('buildIdentityBadge.devGoStale')}
-        </Label>
+        </StatusStamp>
       )
     }
     return (
-      <Label variant="success" size="small" className={styles.devRibbon} data-testid="dev-build-badge">
+      <StatusStamp variant="success" className={styles.devRibbon} data-testid="dev-build-badge">
         {t('buildIdentityBadge.devLive')}
-      </Label>
+      </StatusStamp>
     )
   }
 
@@ -86,32 +86,32 @@ export function BuildIdentityBadge({ buildInfo }: { buildInfo: BuildInfo | null
     // the bundle got newer). A server-mode browser tab only informs: it
     // must never kill the shared server.
     return isNativeWebview ? (
-      <Label
-        variant="danger" size="small"
+      <StatusStamp
+        variant="danger"
         className={`${styles.devRibbon} ${styles.devRibbonAction}`}
         data-testid="stale-build-badge"
         onClick={() => { void SettingsService.QuitApp() }}
       >
         {t('buildIdentityBadge.staleBuildClickToClose', { binaryHead, repoHead: __MILL_REPO_HEAD__ })}
-      </Label>
+      </StatusStamp>
     ) : (
-      <Label variant="danger" size="small" className={styles.devRibbon} data-testid="stale-build-badge">
+      <StatusStamp variant="danger" className={styles.devRibbon} data-testid="stale-build-badge">
         {t('buildIdentityBadge.staleBuildRestart', { binaryHead, repoHead: __MILL_REPO_HEAD__ })}
-      </Label>
+      </StatusStamp>
     )
   }
 
   if (isNativeWebview) {
     return (
-      <Label variant="secondary" size="small" className={styles.devRibbon} data-testid="installed-build-badge">
+      <StatusStamp variant="neutral" className={styles.devRibbon} data-testid="installed-build-badge">
         {t('buildIdentityBadge.installed')}{binaryHead ? ` · ${binaryHead}` : ''}
-      </Label>
+      </StatusStamp>
     )
   }
 
   return (
-    <Label variant="secondary" size="small" className={styles.devRibbon} data-testid="server-build-badge">
+    <StatusStamp variant="neutral" className={styles.devRibbon} data-testid="server-build-badge">
       {t('buildIdentityBadge.server')}{binaryHead ? ` · ${binaryHead}` : ''}
-    </Label>
+    </StatusStamp>
   )
 }

frontend/src/app/index.css

@@ -33,6 +33,11 @@
     -webkit-text-size-adjust: 100%;
 }
 
+/* Mill's own accent + node-kind + mono tokens live in mill-tokens.css,
+   imported from main.tsx AFTER @primer/primitives' theme CSS
+   (deliberately, not here) -- see that file's header comment for why
+   this needed a real separate file rather than living in this one. */
+
 * { box-sizing: border-box; }
 
 html {

frontend/src/app/main.tsx

@@ -5,6 +5,12 @@ import './index.css'
 import '@primer/primitives/dist/css/primitives.css'
 import '@primer/primitives/dist/css/functional/themes/light.css'
 import '@primer/primitives/dist/css/functional/themes/dark.css'
+// AFTER Primer's own theme CSS, deliberately -- mill-tokens.css's own
+// header comment has the full reasoning (a same-specificity override
+// needs to win the cascade tie by load order here, not just win on
+// paper via a selector-specificity trick that turned out to target
+// the wrong element).
+import './mill-tokens.css'
 import { ThemeProvider, BaseStyles } from '@primer/react'
 import App from './App'
 import { QuickPanelApp } from './QuickPanelApp'