#Direction 4 · Dense Data UI — assistant-log

#The product

A self-hosted, single-user log aggregator for CLI AI assistants (Claude Code, opencode, crush, pi, kimi). Server runs on a home server (phoebe) behind Tailscale; collectors run as systemd user units on each machine and POST normalized turns to SQLite + FTS5. Server-rendered HTML UI, no SPA. Single user. Full transcripts of every session across every tool across every machine, searchable in one place.

#Aesthetic + personality

GitHub/Linear-style dense data UI for power scanning. Built on the assumption the user lives in terminals all day and wants information density, not chrome.

• Top bar: dark (#1c1a17), monospace, contains breadcrumb (assistant-log / scarlet), an always-visible search input that responds to ⌘K, and tab nav (Recent / Projects / Stats / Health / Settings).
• Body: warm off-white (#fdfcf8), Inter for prose, JetBrains Mono for all data (timestamps, paths, tokens, IDs).
• Accent: terracotta #c96442, used sparingly — selected tab, primary chip, sparkline highlight, FTS hit highlight, "stale" warnings.
• Type scale: 11–13 px body. Tight (1.4) line-height. Uppercase 10 px column headers with 0.05 em tracking and var(--ink-3) color.
• Rows: 28–32 px tall (compact mode 22–24), 1 px --rule-2 dividers, hover #f3f0e7.
• Tags: small mono pills — neutral #ebe7d8, host-green #d9e6dd, accent terracotta. Per-tool a 8 px square color dot (claude-code terracotta, opencode green, crush purple, pi ochre, kimi blue).
• Sparklines: 60–140 × 12–18 px inline SVG polylines, stroke 1.2, accent-colored when row is "the user's main thing".

#Layout pattern (every page)

1. Dark mono top bar (search + nav).
2. Light sub-bar with active filters as removable chips, plus a contextual stat strip on the right (e.g. turns/day sparkline + total).
3. Tight grid header row (uppercase mono labels).
4. Scrollable rows with display: grid; grid-template-columns: …, mono in time/path/numeric columns, sans in prose columns.
5. Optional footer strip for global state (backfill progress, last error).

#Screens

1. Home (Recent) — Reverse-chronological feed of sessions across all tools/hosts. Columns: when · tool tag · host tag · session question + cwd · turns · tok · turns/h sparkline. Top sub-bar carries tool: any · host: any · since: 30d chips and a global turns/day sparkline.

2. Search results — Results are a flat table of turns (not sessions), one match per row, with the snippet truncated and FTS hits wrapped in a terracotta <mark>. Filters in chips above. Save-search action lives next to the chip row.

3. Session view — Two-column. Left aside (240 px) is a turn list with # · role glyph · preview · token count, current turn highlighted with a left accent border. Right pane is the linear transcript: each turn is a row separated by 1 px rules, role label is mono uppercase color-coded (USER neutral, ASSISTANT accent, TOOL muted), tool calls render as monospace cards with a faint background tint. Sticky header carries cwd · title · tool tag · host tag · model · turn count · tokens · open dot.

4. Project view (cwd) — Header shows ~/code/ breadcrumb + tt-bundle in mono, count chips, and a sparkline of activity. Saved-search chips below. Then the same dense session table filtered to that cwd.

5. Stats — Top sub-bar has range pills (7d / 30d / 90d / all) and group-by pills (tool / host / project / model). Content is a grid of cards: per-tool stat strip (turns / tokens / cost / sparkline / share %), a stacked turns/day chart (60 days), a 12-week activity heatmap, and a top-cwd bar list.

6. Ingestion health — Status pills in sub-bar (● 7 ok · ● 1 warn). Table of every (host, tool, source) row with: status dot · host · tool · source path · lag · outbox depth · last-OK · events 24h. Stale rows get accent-colored lag, non-empty outboxes get accent-colored count. Footer strip: backfill progress bar + last parser error inline.

7. Settings — Sidebar nav (Sources / Display / Auth / Backup / Export / Tags / Saved searches). Sources page is the dense source table with status dot, tool tag, path, poll interval, event count, last-OK, edit. Display has compact tag-pair toggles (density, tool calls, accent).

#Interaction model

• Always-on global search (⌘K focuses the top input from any page).
• Filter chips are removable and additive; "+ add filter" opens a small popover.
• All paths are clickable and open the corresponding Project view.
• Each row in any list is clickable and opens its session/turn permalink.
• Keyboard: j/k move row, ↵ open, g h/s/p/i jump to home / stats / projects / health.

#Mock data shape

Sample sessions (across claude-code, opencode, crush, pi, kimi on laptop and workpc):

Ingestion health — 8 collector rows (one per host × tool):

Per-tool 30-day rollups:

• claude-code — 1820 turns / 482k tok / $0 (Max sub, cost unknowable)
• opencode — 211 turns / 18k tok / $4.12
• crush — 64 turns / 2k tok / $0.71
• pi — 32 turns / 7k tok / $0
• kimi — 11 turns / 1k tok / $0

#Tech assumptions for the build

• React 18.3.1 + Babel standalone for the prototype.
• Inter + JetBrains Mono via Google Fonts.
• All data is hard-coded mock data. No real backend.
• Single HTML file with split JSX modules per screen for maintainability.

#Suggested first prompt for the new chat

Build a hi-fi clickable prototype of a personal CLI AI assistant log aggregator UI in the Dense Data UI style described in the attached spec. One HTML file. Real navigation between screens (top-bar tabs, row clicks, ⌘K search focus, filter chips). Cover Home / Search / Session / Project / Stats / Health / Settings. Use the mock data shape and visual system specified.