A repository's runs list and a run's log page speak the home page's language #9739

The runs list and a run's log page now drop their boxes. I did not check either page at 390 px, and there is no keep_plan tool in this session, so I kept no plan on the issue.

What changed

• Where the rendering lives: the markup is in src/web/studio/lists.ts and src/web/studio/run.ts, not src/web/pages/runs.ts. pages/runs.ts only delegates to them, so I left it alone.
• Runs list: runsListPage now renders its rows as .card.bare, the same class /audit and /explore use. Each run is a row on the page's one background, with its state as a badge and its agent and age in the row's meta line.
• Run log: .run-log in src/web/style/content.ts loses its fill, border and radius and keeps only vertical space. It still wraps and scrolls inside its own bounds. The steer form under it keeps a single hairline above it.
• Unchanged: the state filter, the working tab, the live tail, the refresh, cancel, the /runs/:id door and every read through the run actions, so not_found for hidden repositories is untouched.
• Docs and test: docs/design/areas/runs.md has a short note on the change, and test/run-page-fit.test.ts now asserts the log has no border and no background. No new component class.

Checks

• bun scripts/design-lint.ts and bun x tsc --noEmit pass.
• The 69 tests across test/runs-*.test.ts, test/studio-runs.test.ts and test/run-page-fit.test.ts pass.
• I did not run scripts/gate.ts.

Left out

• No 390 px render: test/run-page-fit.test.ts only reads the HTML and CSS. The log's wrapping rules are the ones it already had, so a long line should wrap or scroll inside the log, but that is unverified on a phone.
• App page log tail: the small log tail beside a running row on the app page shares .run-log, so it also loses its frame.
• Check progress card: the check run's step list still uses a boxed listCard.
• Steer form: the steer form keeps its card stack classes because a test pins them, and I unframed it in CSS instead.

To try it: open /:owner/:name/runs and /:owner/:name/runs/:id on any preview.

🤖 Generated with Claude Code

Closes #9727

The runs list and a run's log page now drop their boxes. I did not check either page at 390 px, and there is no keep_plan tool in this session, so I kept no plan on the issue.

What changed

• Where the rendering lives: the markup is in src/web/studio/lists.ts and src/web/studio/run.ts, not src/web/pages/runs.ts. pages/runs.ts only delegates to them, so I left it alone.
• Runs list: runsListPage now renders its rows as .card.bare, the same class /audit and /explore use. Each run is a row on the page's one background, with its state as a badge and its agent and age in the row's meta line.
• Run log: .run-log in src/web/style/content.ts loses its fill, border and radius and keeps only vertical space. It still wraps and scrolls inside its own bounds. The steer form under it keeps a single hairline above it.
• Unchanged: the state filter, the working tab, the live tail, the refresh, cancel, the /runs/:id door and every read through the run actions, so not_found for hidden repositories is untouched.
• Docs and test: docs/design/areas/runs.md has a short note on the change, and test/run-page-fit.test.ts now asserts the log has no border and no background. No new component class.

Checks

• bun scripts/design-lint.ts and bun x tsc --noEmit pass.
• The 69 tests across test/runs-*.test.ts, test/studio-runs.test.ts and test/run-page-fit.test.ts pass.
• I did not run scripts/gate.ts.

Left out

• No 390 px render: test/run-page-fit.test.ts only reads the HTML and CSS. The log's wrapping rules are the ones it already had, so a long line should wrap or scroll inside the log, but that is unverified on a phone.
• App page log tail: the small log tail beside a running row on the app page shares .run-log, so it also loses its frame.
• Check progress card: the check run's step list still uses a boxed listCard.
• Steer form: the steer form keeps its card stack classes because a test pins them, and I unframed it in CSS instead.

To try it: open /:owner/:name/runs and /:owner/:name/runs/:id on any preview.

🤖 Generated with Claude Code

The gate failed because no commit message on the pull had a Try: line. I pushed an empty commit whose message has one. I did not re-run the gate or the tests here. The commit changes no code, and my earlier test run was green.

The new line reads: Try: open /<owner>/<name>/runs and /<owner>/<name>/runs/<id> on the preview; rows and space, no boxes.

The pull is otherwise unchanged:

• Runs list: it is now a frameless .card.bare list of rows.
• Run log: it uses space instead of a box.
• Unchanged: the filter, the working tab, the live tail, the refresh, cancel and the /runs/:id door.
• Not done: I did not check either page at 390 px, and the check run's step list is still a boxed card.

To try it, open /:owner/:name/runs and /:owner/:name/runs/:id on the preview.

🤖 Generated with Claude Code

I added the missing test for the runs list, and the docs now say the app-page log tail losing its frame is intended. test/runs-state-filter.test.ts and bun scripts/design-lint.ts pass. I did not run tsc or the other run tests this time.

• The test: it fetches /alice/notes/runs?state=failed and asserts the list is <div class="card bare"><ul class="list"> and that it holds the failed run. Without { extra: "bare" } in src/web/studio/lists.ts it fails.
• The log tail: docs/design/areas/runs.md now says .run-log.log-tail loses its frame on purpose. The tail is a peek under a running row, so it reads better as part of the row than as a box inside it.
• 390 px: still not checked. The wrapping rules on .run-log (overflow-wrap: anywhere, overflow: auto, pre-wrap on titles) are untouched, which is the condition you set for accepting the CSS-only check.

To try it, open /<owner>/<name>/runs on the preview. The list is rows with no card frame.

🤖 Generated with Claude Code

A repository's runs list and a run's page now show rows and space instead of boxed cards.

• Runs list: runsListPage in src/web/studio/lists.ts renders its rows as .card.bare, the class /audit and /explore already use. Each run is a row with its state as a badge and its agent and age in the meta line.
• Check steps: a check run's step list on /runs/:id (#check-steps) is .card.bare too, so that page has no boxed card left.
• Run log: .run-log in src/web/style/content.ts has no fill, border or radius, only vertical space. It still wraps and scrolls inside its own bounds. The steer form under it keeps one hairline above.
• Log tail: the small log tail on the app page shares .run-log, so it loses its frame too. That is intended and written down in docs/design/areas/runs.md.
• Unchanged: the state filter, the working tab, the live tail, refresh, cancel and the /runs/:id door. Every read still goes through the run actions, so a repository the viewer may not see still answers not_found.

Tests

• test/runs-state-filter.test.ts asserts the runs list is a card bare list.
• test/studio-runs.test.ts asserts the same for the check steps.
• test/run-page-fit.test.ts asserts the log has no frame. It also pins what the 390 px fit depends on: the log has no side padding, the 72px speaker column is the only fixed width in a log row, and the words take the rest and wrap.
• I checked the check-steps assertion fails without the change; the runs-list assertion was not run against the old code.

Checks

• bun scripts/design-lint.ts, bun x tsc --noEmit, and test/run-page-fit.test.ts, test/studio-runs.test.ts and test/runs-*.test.ts (71 tests) pass.
• I did not run scripts/gate.ts locally.
• Neither page was seen at phone width. The 390 px fit is asserted from the HTML and CSS, not from a render.

To try it, open /<owner>/<name>/runs and a check run's /<owner>/<name>/runs/<id> on the preview. A reviewer found this repository answers Not found there, so the pages may not be reachable on this preview.

🤖 Generated with Claude Code