feat(panel): editorial almanac visual redesign

[upsetbit]

What

Visual redesign of prosa-panel in an Editorial Almanac direction: a warm-ink,
printed-journal look that leans into the design brief's "airy, contemplative digital
notebook" intent with a distinctive typographic point of view. Chosen from five full
prototypes built in parallel and compared on real data.

The look

• Type: Newsreader (serif) for headings, the wordmark, and big KPI numerals;
  Geist for body, tables, and prose; Geist Mono for IDs, timestamps, costs, raw.
• Palette: warm near-black ink surfaces (#15140f) with a single petrol accent
  (#2f8f7f).
• Layout: hairline rules in place of bordered cards; small-caps section labels;
  serif KPI numerals; folio-style topbar; generous page margins.

Themes

The editorial layout and type are global, so every theme gets them; each named theme
stays a distinct color skin. Almanac (warm editorial) is the new default in
:root; the original Colorblind (Okabe-Ito) palette returns as a selectable
[data-theme="colorblind"] theme so the colorblind-safe option is kept.

Session detail (side panel)

Restructured from a chat-bubble layout into an editorial dossier:

• A slim sticky bar (agent + close) keeps identity and close reachable.
• A serif masthead: the first prompt as the headline, plus a byline of
  project, time, and model.
• A horizontal stat strip (turns, tools, duration, tokens, cost) in serif numerals.
• The dense metadata folds into a collapsed Details disclosure.
• The transcript is a left-aligned role-rail thread: a colored left rule plus a
  small-caps role label per turn (user input on a subtle surface, assistant prose
  bare, tool output as a monospace block), under a toolbar with search, turn count,
  and collapse-all. All HTMX (subagent drilldown, raw pagination) and Alpine
  (collapse, search) wiring is preserved.

Reviewer pass

Ran prosa-panel-ui-reviewer and addressed the findings:

• Accessibility: functional labels (nav, table headers, section eyebrows, side
  panel labels, transcript meta) moved from --text-3 to --text-2 so they pass
  WCAG AA on the default theme.
• Removed a dead duplicate background declaration in the side-panel header.
• Dropped the unused Newsreader 500 and 600 faces.
• Corrected a stale colorblind default-theme reference in the architecture doc.

Remaining nits (pre-existing, tracked for a follow-on): --text-3 timestamps on
solarized-light and nord are low-contrast for tertiary text; a couple of :focus vs
:focus-visible cleanups; one #ffffff literal in a color-mix.

Refinement pass

Desktop polish and a light information-architecture pass on top of the visual
redesign:

• Sessions → a day-grouped feed. One quiet line per session (agent color dot ·
  message · subagent count · project · tokens · time), grouped under Today /
  Yesterday / dated headers, with the filter wall collapsed behind a Filters
  disclosure. Replaces the agent/kind pill table whose rows wrapped to uneven heights.
• Session detail → navigable subagents. The subagents list moves up under the
  stats, and subagent sessions get a prev/next sibling pager plus a back-to-parent
  link instead of a list buried at the end.
• Projects → a magnitude leaderboard. Each row gains a sessions bar; the
  dead-space table is gone.
• Home → fewer, denser cards. The Models and Tokens-&-cost cards merge into one
  Models leaderboard (sessions · tokens · spend · bar); chart legends collapse to a
  horizontal labels-only strip; and the Across-the-day card drops its duplicate
  tokens line.
• Numbers + restraint. Token totals humanize (26.5b) and spend gains thousands
  separators ($17,436.35); accent is reserved for links and hover instead of whole
  data columns; the content reading measure is capped on wide screens; the
  error-prone-model KPI renders as a label rather than a 44px headline; and a
  nested-anchor break in the Issues / Top-delegators lists is fixed.

Also folds in the earlier responsive pass (favicon-safe dev-login, card layouts for
the devices table and the mobile side panel) and aligns the preference tests with the
almanac default.

Annotated polish pass

A second review pass driven by annotated screenshots, plus a global model-name cleanup:

• Model names everywhere. A new displayModel normalizer renders raw ids as compact
  labels (claude-opus-4-8 → "Opus 4.8", claude-haiku-4-5-20251001 → "Haiku 4.5",
  gpt-5.3-codex → "GPT-5.3 Codex") across the model board, errors-per-model, the
  error-prone-model KPI, model share, across-the-day, and the session byline. Display-only —
  raw ids still drive links and filters.
• Home. The activity heatmap fills the content width; the hour-of-day chart grows to
  balance the Usage column; the Issues KPIs baseline-align; and the KPI strip's doubled
  hairline collapses to a single rule (shared fix across Home, Insights, and Profiles).
• Insights. Spend and tokens merge into one overlaid chart (each series normalized to
  its own peak, real totals kept in the caption); model share widens to the top 7 so
  "other" shrinks; the punch card gains the heatmap's hover tooltip; and "Agentic session
  kinds" stacks under "By parent agent" to balance the row.
• Profiles. The small cost donut and its redundant legend give way to one leaderboard —
  a token magnitude bar plus the est. spend on each profile row.
• Session detail. Header pills align with the masthead, the byline unifies to one size
  (mono time + model), subagents render as minimal feed rows instead of heavy cards, and
  the subagents block no longer collides with the Details disclosure.

Scope

The stack is unchanged — server-rendered html/template + HTMX + Frappe charts, a
single binary with no build step, everything flowing through the existing CSS tokens.
The refinement pass does touch panel handlers and templates (feed grouping, subagent
sibling lookup, the project/model leaderboards, number formatting), but the server
API, OAuth/CSRF, and the chart library are untouched.

Fonts are self-hosted: Newsreader, Geist, and Geist Mono ship as latin-subset
woff2 embedded via embed.FS and served from the binary as font/woff2. No
external font requests.

Preview

just build
PROSA_PANEL_DEV_LOGIN=hi@caian.org PROSA_PANEL_LISTEN_ADDR=:8081 ./bin/prosa-panel

Pick Almanac in Settings to see the default editorial palette, then open a session
from the Sessions table to see the redesigned detail panel.

🤖 Generated with Claude Code