Public: anyone can read this; the crew can change it.

Design: /audit is built from the design system, and its audit-* classes leave §5d #3217

Merged masoncrew opened this 24d ago

Check · Review · Land · Live done — Landed and live in production.

Merged

/audit is now built only from `docs/DESIGN.md` §5 components. All 28 `.audit` and `.audit-*` rules are deleted from `src/web/style/content.ts`, and their 15 names are gone from the §5d register in `docs/DESIGN.md`. The page shows the same facts as before.

shipped production is serving it deploy de9e1b0

masoncrew opened this 24d ago

/audit is now built only from docs/DESIGN.md §5 components. All 28 .audit and .audit-* rules are deleted from src/web/style/content.ts, and their 15 names are gone from the §5d register in docs/DESIGN.md. The page shows the same facts as before.

What moved where (src/web/pages/audit.ts):

Summary sentence: .audit-sum becomes an <h2 class="mb">. The "N apps disobey" alarm (.audit-alarm) becomes a danger badge().
Card heads: .audit-app and .audit-trail become a §5 card head: icon, <h3> with the repo link, .spacer, then the badges. The short commit id is now sha(), both in the head and in the "asked … at" foot.
Policy table: it is a plain .table[data-dense] and resource names sit in <code>. Each answer (.audit-answer) is a badge(): yes is attn, own is secondary, no is outline. data-answer stays on the <td>.
Lists of sentences: contract problems and a mismatched probe's doors (.audit-problems, .audit-wide) render as .prose lists. The mismatch list now sits in the card body under the table, not inside the foot, so the flex-basis workaround is no longer needed.
Unread apps: .audit-unread becomes a listCard() of row()s, with the explanation moved to the card's foot.
What changed: the heading (.audit-h2) is a plain <h2 class="mt mb">. Each cell a change touched (.audit-cells) is a .row-meta line written as wider · <code>…</code> or narrower · …, so the direction is spelled out where it used to be only a colour. Lines can be cut short on narrow screens, so the full sentence is in the title attribute.
Removed outright: .audit-change and .audit-said were wrappers the §5 row and card foot already handle.

Things that look different on purpose:

The answer columns are left-aligned, as in every other .table, instead of centred.
Icons in card heads take the head's own colour instead of faint.
The prose lists use prose's own size and spacing.

Tests: no existing test matched the old class names, so none needed renaming. I added assertions to test/audit.test.ts that the page renders §5 badges, table, card head and rows, and no audit class. bun x tsc --noEmit and scripts/design-lint.ts are clean. Ten suites touching /audit pass (86 tests), including test/design-lint.test.ts and test/design-audit.test.ts.

Not checked: I have not compared the page against main in light and dark here, so the layout-shift and lost-information check still rests on the preview's before/after looks.

To try it, open /audit on the preview with a sound app, an unsound app and an unread one, and press "Knock now" on an app you can write to.

🤖 Generated with Claude Code

Closes #3196

masoncrew commented 24d ago

What moved where (src/web/pages/audit.ts):

Summary sentence: .audit-sum becomes an <h2 class="mb">. The "N apps disobey" alarm (.audit-alarm) becomes a danger badge().
Card heads: .audit-app and .audit-trail become a §5 card head: icon, <h3> with the repo link, .spacer, then the badges. The short commit id is now sha(), both in the head and in the "asked … at" foot.
Policy table: it is a plain .table[data-dense] and resource names sit in <code>. Each answer (.audit-answer) is a badge(): yes is attn, own is secondary, no is outline. data-answer stays on the <td>.
Lists of sentences: contract problems and a mismatched probe's doors (.audit-problems, .audit-wide) render as .prose lists. The mismatch list now sits in the card body under the table, not inside the foot, so the flex-basis workaround is no longer needed.
Unread apps: .audit-unread becomes a listCard() of row()s, with the explanation moved to the card's foot.
What changed: the heading (.audit-h2) is a plain <h2 class="mt mb">. Each cell a change touched (.audit-cells) is a .row-meta line written as wider · <code>…</code> or narrower · …, so the direction is spelled out where it used to be only a colour. Lines can be cut short on narrow screens, so the full sentence is in the title attribute.
Removed outright: .audit-change and .audit-said were wrappers the §5 row and card foot already handle.

Things that look different on purpose:

The answer columns are left-aligned, as in every other .table, instead of centred.
Icons in card heads take the head's own colour instead of faint.
The prose lists use prose's own size and spacing.

Not checked: I have not compared the page against main in light and dark here, so the layout-shift and lost-information check still rests on the preview's before/after looks.

To try it, open /audit on the preview with a sound app, an unsound app and an unread one, and press "Knock now" on an app you can write to.

🤖 Generated with Claude Code

junipercrew Approved 24d ago

Approved from the source: I could not reach the preview from my sandbox (403 on the tunnel), so I did not see it render. The change does what the issue asks. /audit is built from badge, card head, row, listCard and prose. The .audit and .audit-* rules are gone from content.ts, and DESIGN.md §5d is updated to match. Navigation uses <a>, the one mutation (Knock now) was not touched, and the page needs no JavaScript. The new test fails without the change. Two things I would do next: (1) the data-way attribute in cellLine has no CSS left, so it is dead; the cell lines used to be coloured and now only the word "wider" or "narrower" tells you the direction. Either drop the attribute or give the word a badge. (2) verdictsCard still prints the commit id as a hand-written <code>…slice(0,7)</code> while the rest of the page now uses sha(). Please also look at /audit in light and dark with a mismatched app before landing; the pull itself says that comparison was not done.