refactor: restyle jobs viewer as editorial logbook

The original jobs UI shipped as a dashboard — 4-cell run-ledger, twin
Settings/Outcome panels of monospaced key/value tiles, redundant 3-cell
impact grids on every row. The viewer everywhere else is editorial:
Palatino serif, paper cream, navy accent, ornaments, quiet page rows.
The jobs surface now matches that register.

List view: hero kicker + prose deck replaces the stat ledger; runs group
under day labels (Today / Yesterday / weekday / Month D) with an HH:MM
time gutter; each entry is one row — kicker, serif title, two-line
summary, status dot + composed tally. No more right-side impact panel.

Detail view: dual Settings/Outcome panels collapse into a single
two-column colophon (small-caps dt / serif dd); failure gets a left-
border callout; ornament divides metadata from transcript. Status is a
sage/navy/burgundy dot, not a pill chip.

Transcript internals (tool cards, chat bubbles, parsers) are unchanged —
only the surrounding chrome moved.

Decision log + open questions for reviewer: docs/plans/2026-05-10-jobs-ui-redesign.md.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: rohans0509

docs/plans/2026-05-10-jobs-ui-redesign.md

@@ -0,0 +1,127 @@
+# Jobs viewer redesign — decision log
+
+Started 2026-05-10. Owner: Claude (Opus 4.7).
+
+## Why
+
+The jobs UI shipped in commits `42b2ef9` → `7d2e704` was functional but felt
+out of place in the viewer. The rest of the viewer is **editorial**: Palatino
+serif, cream paper, navy accent, dingbat ornaments, hero-with-kicker, quiet
+page rows with chips. Jobs shipped as a **dashboard**: 4-cell run-ledger,
+twin Settings/Outcome panels of monospaced key/value tiles, a redundant
+3-cell "impact" grid pinned to every row.
+
+The information was right; the visual register was wrong. This redesign keeps
+the data, swaps the register.
+
+## Design principles (held while redesigning)
+
+1. **Match the viewer's existing register.** Hero kicker + serif title +
+   muted prose deck. Ornament where a section break needs weight. Chips for
+   taxonomy, not for state.
+2. **One representation per fact.** The old detail page showed
+   created/updated/archived in three places — strip, settings panel, outcome
+   panel. Pick one.
+3. **Prose over grids.** "147 runs recorded — 3 active, 142 completed"
+   reads better than a 4-tile stat grid, and matches the
+   "{N} pages and {M} topics indexed" line on the overview page.
+4. **Group by day.** A run history is a logbook. Group rows under
+   "Today / Yesterday / Mar 8" labels — that gives the page rhythm without
+   filter chrome.
+5. **State as a dot, not a pill.** Pills are loud. A `●` glyph in
+   sage/navy/burgundy + the word reads like an editorial mark.
+6. **Don't touch transcript internals.** The tool-card and chat-bubble work
+   is fine; only the surrounding chrome (avatar, section heading) changes.
+
+## Concrete shape
+
+### List page
+
+```
+[kicker]   LEDGER
+[title]    Run history
+[deck]     147 runs recorded in .almanac/runs —
+           3 active, 142 completed, 2 need attention.
+
+──────── Today ────────
+  14:32   absorb · claude / sonnet-4
+          {displayTitle}
+          {displaySubtitle}
+          ● Completed · +3 created, 2 updated · 3m 24s
+
+  09:14   garden · claude / sonnet-4
+          ...
+
+──────── Yesterday ────────
+  ...
+```
+
+- Time column: `HH:MM` in mono, fixed width, left.
+- Kicker: `operation · provider / model` — small caps, accent color.
+- Title: serif, 18px.
+- Summary: muted, two-line clamp.
+- Tally line: dot + status word + impact (only non-zero counts) + elapsed.
+  No chips here; chips are for taxonomy elsewhere.
+
+### Detail page
+
+```
+[kicker]   ABSORB
+[title]    {displayTitle}
+[deck]     {displaySubtitle}
+[chips]    ● Completed   claude · sonnet-4   3m 24s   absorb-target
+
+───────────── colophon ─────────────
+  Started     2026-05-10 14:32     Created    3
+  Finished    2026-05-10 14:35     Updated    2
+  Provider    claude / sonnet-4    Archived   0
+  Turns       4                    Tokens     12,432
+  Cost        $0.18                Log        .almanac/runs/...
+  Session     {providerSessionId}
+
+[if failure]
+  Failure — {message}
+  Fix — {fix}
+
+[if targets]
+  Targets
+  {chips of paths}
+
+           ✥
+
+Transcript · {N} events
+  ...
+```
+
+- Colophon: one `<dl>`, two columns on wide screens, one column on narrow.
+  Small-caps `dt`, serif `dd`, mono only when the value is a path/hash.
+- Failure: standalone callout with left border in accent; not a fact row.
+- Targets: chip row, separate section so it doesn't get lost in the dl.
+- Ornament `✥` divides above-fold metadata from the transcript, matching
+  page header treatment elsewhere.
+
+## What I deliberately did NOT change
+
+- `jobs-transcript.js` parser and `buildTranscript` / `getToolCardModel`.
+- Tool card open/close, fact grid inside tool cards, code blocks.
+- API shape — pure frontend redesign.
+- Status taxonomy (queued / running / done / failed / cancelled / stale).
+- Color tokens. The dots reuse existing `--ca-accent`, `--ca-sage`, and a
+  derived burgundy for failure.
+
+## Open questions for reviewer
+
+1. Is "LEDGER" the right kicker for the list page? Alternatives: "RUNS",
+   "JOBS LOG". I chose "Ledger" because the viewer already uses words like
+   "almanac" — "ledger" carries the same archival feel.
+2. The colophon two-column layout on the detail page — should it instead
+   be a flowing definition list (one column, all the way down) for easier
+   scanning? I picked two-column because the metadata count is high (10+
+   fields) and a single column scrolls past the fold.
+3. Day grouping uses **local time** of the user's browser. If a run
+   crosses midnight UTC, the label is whatever the viewer's clock says.
+   Acceptable for a local viewer; flagging in case it's not.
+
+## After-thoughts (filled in as work progresses)
+
+- _(to be appended)_

test/viewer-ui-assets.test.ts

@@ -51,8 +51,10 @@ describe("viewer UI assets", () => {
     expect(jobsJs).toContain("export function createJobsView");
     expect(jobsJs).toContain('from "./jobs-transcript.js"');
     expect(jobsJs).toContain("transcriptEntry");
-    expect(jobsJs).toContain("runOutcomeStrip");
-    expect(jobsJs).toContain("jobImpact");
+    expect(jobsJs).toContain("colophonEntries");
+    expect(jobsJs).toContain("groupByDay");
+    expect(jobsJs).toContain("logEntry");
+    expect(jobsJs).toContain("statusMark");
     expect(jobsJs).toContain("cleanSummary");
     expect(jobsJs).toContain("displayTitle");
     expect(jobsJs).toContain("displaySubtitle");
@@ -79,19 +81,24 @@ describe("viewer UI assets", () => {
     expect(appCss).toContain("brightness(0.68)");
     expect(appCss).toContain(".ca-left .ca-link-button.is-active");
     expect(appCss).toContain(".ca-shell.is-rail-hidden");
-    expect(appCss).not.toContain(".ca-job-row");
-    expect(jobsCss).toContain(".ca-job-row");
-    expect(jobsCss).toContain(".ca-job-impact");
-    expect(jobsCss).toContain(".ca-job-stream");
-    expect(jobsCss).toContain(".ca-run-ledger");
+    expect(appCss).not.toContain(".ca-log-entry");
+    expect(jobsCss).toContain(".ca-log-entry");
+    expect(jobsCss).toContain(".ca-logbook");
+    expect(jobsCss).toContain(".ca-log-day");
+    expect(jobsCss).toContain(".ca-colophon");
+    expect(jobsCss).toContain(".ca-transcript-section");
     expect(jobsCss).toContain(".ca-transcript");
     expect(jobsCss).toContain(".ca-chat-bubble");
     expect(jobsCss).toContain(".ca-tool-step");
     expect(jobsCss).toContain(".ca-tool-card");
     expect(jobsCss).toContain(".ca-tool-summary");
     expect(jobsCss).toContain(".ca-tool-facts");
     expect(jobsCss).not.toContain(".ca-event-row");
-    expect(jobsCss).toContain(".ca-status-running");
+    expect(jobsCss).not.toContain(".ca-job-impact");
+    expect(jobsCss).not.toContain(".ca-run-ledger");
+    expect(jobsCss).toContain(".ca-status-tone-active");
+    expect(jobsCss).toContain(".ca-status-tone-done");
+    expect(jobsCss).toContain(".ca-status-tone-alert");
     expect(appCss).toContain(".ca-suggest");
     expect(appCss).toContain(".ca-suggest-item");
     expect(appCss).toContain("overflow-wrap: anywhere");