An app's policy line draws §5's row and badge, and .policy-line leaves the stylesheet #4778

The restyle is right in kind: row() and badge(), .policy-line gone from the stylesheet and DESIGN.md, and the new test covers both tones. It breaks on a 360px phone, though, and that is the one fix.

.row-title is nowrap with an ellipsis, and .row-trail is flex: none. The trail now holds a nowrap badge sentence ("was not running when knocked on", about 190px) plus the "The table" link. At 360px the trail takes nearly the whole row and the title ("One resource, nothing open to anyone", the point of the line) is cut to a few characters. The "Its contract does not read, so an app built on it does not boot" row is cut the same way and loses the explanation. The old line wrapped, so this is a regression on phones.

Fix first: use the pattern DESIGN.md §5d names for rows whose text must wrap. Render both lines as <ul class="list setting-list"> inside the card, so the title wraps and the trail takes its own line under 640px. Keep listCard if it can take that class, otherwise build the card with card(..., {pad:false}) around that ul. Then check the preview at 360px.

Second: the badge carries a sentence. Keep the badge short ("obeys", "disobeys", "not knocked", "down") and put the full phrase in the row meta, or accept the sentence and make sure it can wrap. Update the test strings to match.

After these two I would approve. The preview answers 200.

Approved. The policy line is now a row() in a setting-list card, with the verdict as a text badge, so it is not colour-only. The title wraps and the trail drops under it on a phone. It is all plain server-rendered HTML with a real <a>, and it works with JavaScript off. The .policy-line rules and the DESIGN.md entry are gone. The tests would fail without the change. Next: (1) the badge's short words (obeys/disobeys/down/no door) repeat the meta sentence, so consider dropping the meta when the badge says it all; (2) the policyCard helper is a one-off, so if another page needs a wrapping setting-list card, give listCard a class option instead. I judged this from the diff and the preview answering 200. I did not open the phone screenshots and I did not run 360px checks myself.

The policy line is now a §5 row with a badge in a setting-list card, so it wraps on a 360px phone. The five .policy-line rules and the DESIGN.md entry are gone. Both links stay plain anchors and it works without JavaScript. The tests would fail without the change. I did not see the policy line itself in the preview: the front page answers, but the line only appears on an app with a policy. I checked that the setting-list rules exist in components.ts. Two things I would do next: (1) The state is told twice, by the short badge and the long meta line. On a phone the meta wraps under the title and repeats the badge, so consider dropping the meta when the verdict is ok. (2) The not knocked and down badges use the default tone, which is easy to miss. Consider the warning tone for down so an app that is not running reads differently from one never checked.

Approved. The policy line is now a row() in a setting-list card with a short badge (success for obeys, danger for disobeys, default otherwise). The full phrase moved into the row meta, so a phone gets the wrapping the setting-list rules already give. All .policy-line CSS and its DESIGN.md mention are gone. The new test checks both badge tones and the absence of the old class, and would fail without the change. It uses no new dependency, adds no script, and works with JavaScript off. I read the diff and the design doc, and did not run the preview, which needs a signed-in studio view. Two things I would do next: (1) add a small listCard option for a class so policyCard() does not hand-roll card(<ul class=list setting-list>); (2) check the 360px layout by eye on a real app page, since the wrapping rests on existing CSS and was not rendered.

Approved. The policy line is now a row() in a setting-list card with a badge() for the verdict, so it uses the named components. .policy-line is gone from the stylesheet and from DESIGN.md, and the verdict is carried by badge text, not colour alone. The new test checks the success and danger badges and that no policy-line remains. Not checked: the preview was blocked from my sandbox, so I did not see it at 360px and I read the markup only. Next: (1) check the 360px wrap on a real phone (title wraps, trail drops under it). (2) Replace the nested ternaries for tone and short with one small verdict-to-{tone, word} map next to the phrase for said.

Clean on security, and it does what the issue asks. It adds no input, no write and no route. Every value it shows goes through the escaping html template: the resource count, the door count, the verdict phrase and href (built from the repo's owner and name). Both links are plain <a> and the badge is a server-rendered span, so it works with JavaScript off.

Design: it uses the components DESIGN.md names. Each line is a row() in a setting-list card, so on a phone the title wraps and the trail drops under it. The verdict is a short badge() whose tone also has words, so it is not colour alone, and the only colours are the success and danger tones. All five .policy-line rules and the §5d entry are gone, and nothing else refers to them.

Tests: the new test records an ok probe, then a mismatch probe, and checks the success and danger badges plus the absence of the old class. Both checks would fail on main.

Preview: / and /audit answer 200. No app on the preview has a policy, so I could not see the line itself there.

Not blocking:

1. policyCard is also the name of the table-drawing function in src/web/pages/audit.ts, which does something different. A distinct name (for example policyLineCard) would keep a grep from finding two of them. Better still, give listCard a class option so this one-off helper is not needed.
2. The two nested ternaries for tone and short, and the one for said, could be one map from verdict to tone, word and phrase.

Approved. The policy line is now a row() in a setting-list card with a short, worded badge (obeys/disobeys/not knocked/down/no door). Tone is not colour alone. The links are plain <a>, so it works with JS off, and the title wraps and the trail drops under it at 360px via the existing setting-list rules, the same pattern settings.ts and repo.ts already use. The five .policy-line rules and the 5d entry are gone. No new input, route or write; the values go through the escaping html template. The test would fail on main. The preview answers 200, but I could not see a policy line on it, and I did not check 360px by eye. Two things I would do next: (1) give listCard a class option so policyLineCard in src/web/studio/app.ts is not a hand-rolled card; (2) fold the nested ternaries for said, tone and short into one verdict map of tone, word and phrase.

Approved. The policy line is now a row() with a badge() inside a setting-list card, so it uses the named components and the title wraps and the trail drops under it on a phone. The verdict has words as well as a tone, both links are plain <a>, and it works with JavaScript off. All .policy-line rules and the 5d entry are gone. The new test records an ok probe and then a mismatch probe, and would fail on main. It adds no input, write or route, and every value goes through the escaping html template. I read the diff and did not exercise the preview, and I did not check the 360px layout. Two things I would do next: (1) give listCard a class option so the hand-rolled card in policyLineCard goes away; (2) replace the three nested ternaries (tone, short, said) with one verdict-to-{tone, word, phrase} map.