@polderlabs/bizar 5.6.0-beta.16 → 5.6.0-beta.17

package/bizar-dash/DESIGN.md

@@ -1,7 +1,10 @@
 # DESIGN.md — Bizar Dashboard
 
-> The BizarHarness dashboard. Norse-pantheon inspired, operator-quality
-> surfaces, dark-mode-first. v6.0.0.
+> The BizarHarness dashboard. Norse-pantheon operator surface, dark-mode
+> first, dense by intent. **v7.0** — adds the comprehensive view index,
+> per-view data shapes, and the patterns needed for the eight secondary
+> tabs (Overview, Agents, Active, Skills, Memory, Mods, Schedules,
+> Settings) that v6 didn't fully document.
 
 ## 0 · How to use this file
 
@@ -11,14 +14,23 @@ derivable from the tokens and rules below. If a future change isn't
 covered here, **add it to this file first**, then implement it.
 
 **Token binding.** Components consume CSS variables (`--bg`,
-`--text-strong`, etc.) defined in `:root` of `styles/main.css`. Do not
-hardcode hex outside `:root`. Derive with `color-mix(in oklab,
-var(--accent), …)` rather than inventing new tokens.
-
-**Themes.** The dashboard ships two themes — **dark** (default,
-`color-scheme: dark`) and **light** (`[data-theme='light']`). Both share
-the same token names; only the values change. Every component must read
-correctly in both themes without per-component overrides.
+`--text-strong`, `--accent`) defined in `:root` of `styles/main.css`.
+Do not hardcode hex outside `:root`. Derive tints with
+`color-mix(in oklch, var(--accent) 12%, transparent)` rather than
+inventing new tokens.
+
+**Themes.** The dashboard ships two themes — **dark** (default) and
+**light** (`[data-theme="light"]`). Both share the same token names;
+only the values change. Every component must read correctly in both
+themes without per-component overrides. Tokens are written in
+**OKLch** because the lightness/chroma/hue model flips cleanly across
+themes without the dark-mode channel separation that hex/rgb needs.
+
+**Visual contract for new screens.** A new view must:
+1. Sit on one of three layouts (topbar / sidebar / both).
+2. Use tokens from §3-§8 only.
+3. Document its data shape in §15.
+4. Have a P0 entry in the checklist (§14) and pass it.
 
 ---
 
@@ -31,14 +43,14 @@ them in order; if two conflict, the higher rule wins.
    numeric, monospace-friendly. Information per square inch matters
    more than breathing room. Whitespace is spent on legibility, not
    decoration.
-2. **One accent, used with intent.** The accent (`--accent`) earns its
-   place by signaling primary action, active state, or data emphasis.
-   No "AI sparkle" gradients. No purple washes behind text. No purple
-   stripes on container edges.
+2. **One accent, used with intent.** The accent earns its place by
+   signaling primary action, active state, or data emphasis. No AI
+   gradients. No purple washes behind text. No purple stripes on
+   container edges.
 3. **State is signal, not decoration.** Active, streaming, awaiting,
    error, success — every state must be distinguishable at a glance
    without reading copy. Use weight, glow, motion, and color — but
-   never vertical accent edges on containers.
+   **never vertical accent edges on containers**.
 4. **Type does hierarchy.** `Inter` carries the body, `JetBrains Mono`
    carries the metadata. Tabular numerics on every number. Display
    sizes scale with container, not viewport. Long copy wraps pretty.
@@ -53,17 +65,17 @@ them in order; if two conflict, the higher rule wins.
 | | |
 |--|--|
 | **Wordmark** | Bizar · runic `ᛒ` glyph in `var(--accent)` |
-| **Version pill** | `var(--version)` text in mono, accent-tinted gradient background |
-| **Voice** | Direct, technical, never marketing. "404 not found" not "Oops! Something went wrong". Numbers with units. |
+| **Version pill** | mono text on a `var(--accent)` → `oklch(0.55 0.22 25)` gradient |
+| **Voice** | Direct, technical, never marketing. "404 not found" not "Oops! Something went wrong." Numbers with units. |
 | **Tab labels** | Single noun (`Chat`, `Agents`, `Tasks`). No icons-in-paragraphs. |
 | **Status copy** | "Streaming" not "Loading…". "Awaiting your reply" not "Ready". "13 of 47" not "Lots". |
 
-**Banned tropes** (audited by anti-slop spot-check):
+**Banned tropes** (audited before each PR):
 
 - Aggressive purple gradient backgrounds behind text or as page chrome.
-- Vertical accent stripes on containers (`box-shadow: inset 2px 0 0 …`).
-  State-encoded or not. Active state uses background, weight, glow, or
-  motion — never a left-edge bar.
+- Vertical accent stripes on containers (`box-shadow: inset 2px 0 0 …`,
+  `border-left: 3px solid …`). State-encoded or not. Active state uses
+  background, weight, glow, or motion — **never a left-edge bar**.
 - Generic emoji icons in feature lists (✨ 🚀 🎯 ❓). Use Lucide.
 - Inter as a display face for hero/section titles (Inter is body;
   display uses larger sizes of the same family but tighter tracking).
@@ -73,85 +85,90 @@ them in order; if two conflict, the higher rule wins.
 
 ## 3 · Color tokens
 
+All values written in OKLch where possible. Hex kept only for legacy
+or external-tool interop.
+
 ### 3.1 Surface scale (dark, default)
 
 ```
---bg            #0b0e14    page canvas
---bg-elev       #12161f    cards, panels, topbar
---bg-elev-2     #1a1f2b    nested surfaces (modal over modal)
---bg-elev-3     #232a39    hover / pressed surfaces
---border        #232a39    hairlines
---border-strong #2d3648    heavier dividers, focus rings
+--bg            oklch(15% 0.012 260)    #0b0e14  page canvas
+--bg-elev       oklch(18% 0.012 260)    #12161f  cards, topbar, sidebars
+--bg-elev-2     oklch(22% 0.014 260)    #1a1f2b  nested surfaces
+--bg-elev-3     oklch(27% 0.016 260)    #232a39  hover / pressed surfaces
+--border        oklch(27% 0.016 260)    #232a39  hairlines
+--border-strong oklch(33% 0.018 260)    #2d3648  focus rings, dividers
 ```
 
+`--bg-1` and `--bg-2` from v6.x are deprecated; use `--bg-elev` and
+`--bg-elev-2` instead. (The chat composer backdrop uses
+`color-mix(in oklch, var(--bg-elev), black 12%)` for that nested feel.)
+
 ### 3.2 Surface scale (light)
 
 ```
---bg            #f7f8fa
---bg-elev       #ffffff
---bg-elev-2     #f0f3f8
---bg-elev-3     #e6ebf2
---border        #e2e8f0
---border-strong #cbd5e1
+--bg            oklch(98% 0.004 240)    #f7f8fa
+--bg-elev       oklch(100% 0 0)        #ffffff
+--bg-elev-2     oklch(96% 0.006 240)    #f0f3f8
+--bg-elev-3     oklch(92% 0.008 240)    #e6ebf2
+--border        oklch(90% 0.008 240)    #e2e8f0
+--border-strong oklch(82% 0.012 240)    #cbd5e1
 ```
 
 ### 3.3 Text scale
 
-| Token | Dark | Light | Use |
+| Token | Dark (OKLch) | Light (hex) | Use |
 |---|---|---|---|
-| `--text-strong` | `#f0f6fc` | `#0f172a` | Headings, primary content |
-| `--text` | `#c9d1d9` | `#1f2937` | Body |
-| `--text-dim` (= `--text-muted`) | `#b4bcd0` | `#475569` | Captions, metadata |
-| `--text-on-accent` | `#ffffff` | `#ffffff` | Text over accent fills |
+| `--text-strong` | `oklch(96% 0.005 240)` | `#0f172a` | Headings, primary content |
+| `--text` | `oklch(82% 0.010 245)` | `#1f2937` | Body |
+| `--text-dim` | `oklch(72% 0.012 245)` | `#475569` | Captions, metadata |
+| `--text-on-accent` | `oklch(100% 0 0)` | `#ffffff` | Text over accent fills |
 
 ### 3.4 Brand accent
 
 | Token | Dark | Light | Use |
 |---|---|---|---|
-| `--accent` | `#8b5cf6` | `#7c3aed` | Primary action, active state, focus |
-| `--accent-2` | `#a78bfa` | `#6d28d9` | Hover state on accent |
-| `--accent-3` | `#c4b5fd` | `#5b21b6` | Subdued accent text |
-| `--accent-bg` | `rgba(139,92,246,0.12)` | `rgba(124,58,237,0.08)` | Tinted panel backgrounds |
-| `--accent-border` | `rgba(139,92,246,0.4)` | `rgba(124,58,237,0.3)` | Tinted borders |
-| `--accent-glow` | `rgba(139,92,246,0.18)` | `rgba(124,58,237,0.18)` | Focus glow shadow |
-| `--accent-soft` | `rgba(139,92,246,0.08)` | `rgba(124,58,237,0.06)` | Hover wash on neutral surface |
+| `--accent` | `oklch(0.62 0.18 273)` | `oklch(0.55 0.20 273)` | Primary action, active state, focus |
+| `--accent-2` | `oklch(0.72 0.16 273)` | `oklch(0.48 0.20 273)` | Hover state on accent |
+| `--accent-3` | `oklch(0.82 0.10 273)` | `oklch(0.40 0.18 273)` | Subdued accent text |
+| `--accent-bg` | `color-mix(in oklch, var(--accent) 12%, transparent)` | same, 8% | Tinted panel backgrounds |
+| `--accent-border` | `color-mix(in oklch, var(--accent) 40%, transparent)` | same, 30% | Tinted borders |
+| `--accent-glow` | `color-mix(in oklch, var(--accent) 18%, transparent)` | same | Focus glow shadow |
+| `--accent-soft` | `color-mix(in oklch, var(--accent) 8%, transparent)` | same, 6% | Hover wash on neutral surface |
 
 **Accent budget.** Two uses per region, max. Default allocation:
 1. Active nav item background OR primary CTA fill.
 2. Active state badge OR streaming pill.
 
-### 3.5 Status colors
+### 3.5 Status colors (OKLch in both themes)
 
-| Token | Dark (OKLch) | Light (hex) | Use |
+| Token | Dark | Light | Use |
 |---|---|---|---|
-| `--success` | `oklch(0.72 0.16 145)` | `#047857` | Streaming OK, task done, connected |
-| `--warning` | `oklch(0.78 0.14 70)` | `#b45309` | Stuck agent, retry, cost spike |
-| `--error` | `oklch(0.66 0.20 25)` | `#b91c1c` | Failed, deleted, auth error |
-| `--info` | `oklch(0.72 0.13 235)` | `#1d4ed8` | Neutral informational |
-| `--success-soft` | `rgba(52,211,153,0.15)` | `rgba(5,150,105,0.12)` | Status pill background |
-| `--error-soft` | `rgba(248,113,113,0.12)` | `rgba(190,18,60,0.10)` | Error region background |
-| `--warning-soft` | `rgba(251,191,36,0.15)` | `rgba(180,83,9,0.10)` | Warning region background |
+| `--success` | `oklch(0.72 0.16 145)` | `oklch(0.50 0.15 145)` | Streaming OK, task done, connected |
+| `--warning` | `oklch(0.78 0.14 70)` | `oklch(0.55 0.15 70)` | Stuck agent, retry, cost spike |
+| `--error` | `oklch(0.66 0.20 25)` | `oklch(0.52 0.20 25)` | Failed, deleted, auth error |
+| `--info` | `oklch(0.72 0.13 235)` | `oklch(0.50 0.15 235)` | Neutral informational |
+| `--success-soft` | `color-mix(in oklch, var(--success) 15%, transparent)` | same, 12% | Status pill bg |
+| `--error-soft` | `color-mix(in oklch, var(--error) 12%, transparent)` | same, 10% | Error region bg |
+| `--warning-soft` | `color-mix(in oklch, var(--warning) 15%, transparent)` | same, 10% | Warning region bg |
 
-### 3.6 Derived tokens (chat overhaul, v3.21)
+### 3.6 Derived tokens (chat overhaul, v3.21 — preserved)
 
 ```
---bg-1     #18181b       Gemini-style nested surface (chat composer backdrop)
---bg-2     #27272a       Chat composer input + tokens bar
---gradient-hello   90deg, accent-lightened → accent
---gradient-name    90deg, accent → accent→red35 → accent→red65
+--gradient-hello   linear 90deg, var(--accent-3) → var(--accent)
+--gradient-name    linear 90deg, var(--accent) → oklch(0.55 0.22 25)
 ```
 
-The two gradients are reserved for the **chat greeting** (`hello, name`)
+Both gradients are reserved for the **chat greeting** (`hello, name`)
 and **brand mark** (`ᛒ Bizar`) — never used elsewhere.
 
 ### 3.7 Syntax highlight (json tree in JSON viewer)
 
 ```
---syntax-key      #79c0ff
---syntax-string   #a5d6ff
---syntax-number   #ffa657
---syntax-boolean  #ff7b72
---syntax-null     #ff7b72
+--syntax-key      oklch(0.78 0.13 235)
+--syntax-string   oklch(0.84 0.10 235)
+--syntax-number   oklch(0.78 0.16 60)
+--syntax-boolean  oklch(0.68 0.20 25)
+--syntax-null     oklch(0.68 0.20 25)
 ```
 
 ### 3.8 Anti-pattern reference colors
@@ -179,8 +196,7 @@ and **brand mark** (`ᛒ Bizar`) — never used elsewhere.
 ```
 
 Inter variable enables `cv02`, `cv03`, `cv04`, `cv11` stylistic sets
-for more legible numbers, parentheses, and `@` symbol — already enabled
-in the body rule.
+for more legible numbers, parentheses, and `@` symbol.
 
 ### 4.2 Scale
 
@@ -287,10 +303,10 @@ update in place. The number just changes — no flicker, no count-up.
 
 ---
 
-## 9 · Components
+## 9 · Components catalog
 
-The dashboard has ~50 components. Below is the canonical catalog. Every
-new component must slot into one of these categories.
+The dashboard ships ~60 components. Every new component must slot into
+one of these categories.
 
 ### 9.1 Chrome
 
@@ -303,8 +319,8 @@ new component must slot into one of these categories.
 ```
 
 - Brand block: runic `ᛒ` (24px, `--accent`) + "Bizar" wordmark +
-  version pill. Pill uses `--gradient-name` and `text-shadow: 0 1px 0
-  rgba(0,0,0,0.2)` so it reads on light too.
+  version pill. Pill uses `--gradient-name` and
+  `text-shadow: 0 1px 0 rgba(0,0,0,0.2)` so it reads on light too.
 - Project selector: pill button with `Folder` icon + project name +
   chevron. Dropdown is `--bg-elev-2` with 8px radius, items 32px tall.
 - Search trigger: pill button with kbd hint `⌘K`, `--border` outline.
@@ -442,7 +458,7 @@ in footer showing shortcuts.
   thread, `--bg-elev-2` + `--shadow-2`.
 
 #### Composer
-- Pill-shaped input, `--bg-1` (Gemini dark), `--bg-2` inner field.
+- Pill-shaped input, `--bg-elev` outer, `--bg-elev-2` inner field.
 - Attachments: chip row above input.
 - Slash command suggestions: popover above, mono, `--font-mono`.
 - Agent + model selectors: pill chips on left, opens dropdown on
@@ -463,7 +479,7 @@ in footer showing shortcuts.
   letter-spacing.
 - Body row: 14px, `--text`, 12px 14px padding.
 - Numerics: `--font-mono`, `tabular-nums`, right-aligned.
-- Hover: `--fg-soft` (6% text-color wash) — not a colored row.
+- Hover: `--bg-elev-2` wash — not a colored row.
 
 ### 9.12 Kanban (Tasks)
 
@@ -504,6 +520,41 @@ in footer showing shortcuts.
 - Each result: icon + title + path (mono, dim) + kbd hint.
 - Arrow keys to navigate, Enter to open.
 
+### 9.17 Sparkline & metric charts
+
+- Inline SVG, 32px tall, `--accent` stroke 1.5px, gradient fill (8% → 0%).
+- Right-aligned delta: `--success` for "up is good", `--error` for "up is bad".
+- Numeric body always tabular-nums.
+
+### 9.18 Workflow DAG visualizer (v6.0.0)
+
+Used in Tasks card detail and Eval reports.
+- Nodes: rounded rectangles (8px radius), `--bg-elev-2` background, hairline border.
+- Node states: idle / running / done / failed / skipped — colored border + center dot.
+- Edges: 1.5px lines in `--text-dim`, animated dashed line on the "currently running" edge.
+- Vertical timeline: time on the left axis in mono.
+
+### 9.19 Approval queue (v6.0.0)
+
+Used in Plans & Memory tabs.
+- Each row: 56px tall, agent avatar + plan title + target file (mono) + Approve / Steer / Reject buttons.
+- Hairline separators; rejected plans get a thin `--error-soft` wash on hover-to-undo.
+- Bulk action toolbar floats above the queue when ≥1 selected.
+
+### 9.20 Cost / token chart card (v6.0.0)
+
+Used in Usage (MiniMax) and Overview.
+- Card: title + period selector (24h / 7d / 30d) + big numeric + sparkline + breakdown bars.
+- Breakdown bars: horizontal stacked bar by model, `--accent` for primary, `--text-dim` for others.
+- Always tabular-nums. Always right-aligned.
+
+### 9.21 BG agent live panel (v6.0.0)
+
+Used in Active tab.
+- Row: 56px tall, agent avatar + name + status pill + elapsed (mono, 1s tick) + action buttons (pause / steer / stop).
+- Status pill variants: `running` (success pulse) / `paused` (warning) / `stuck` (warning static + Retry) / `done` (text-dim).
+- Collapsed by default, expands to show streaming output and tool calls.
+
 ---
 
 ## 10 · Patterns
@@ -609,6 +660,92 @@ Pills are pill-success / pill-warning / pill-error as appropriate.
 Progress bars: `--bg-elev-2` track, `--accent` fill. **No colored
 track backgrounds** — color stays on the fill, not on the rail.
 
+### 10.9 Overview dashboard layout (v6.0.0)
+
+```
+┌────────────────────────────────────────────────────────────────┐
+│  HEADER:  ⌂ Bizar   project▾   ⌘K Search  • ws·live  • cline   │
+├────────────────────────────────────────────────────────────────┤
+│  HERO ROW (4 cards):                                           │
+│  ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
+│  │ tokens/hr  │ │ latency    │ │ error rate │ │ cost/hr    │ │
+│  │ 1.42M      │ │ 842ms      │ │ 0.21%      │ │ $1.84      │ │
+│  │ +12% ▲     │ │ −18ms ▼    │ │ +0.04 ▲    │ │ −8% ▼      │ │
+│  └────────────┘ └────────────┘ └────────────┘ └────────────┘ │
+├────────────────────────────────────────────────────────────────┤
+│  TWO-COL:                                                      │
+│  ┌──────────────────────┐ ┌──────────────────────────────┐    │
+│  │ Live activity feed   │ │ Active agents (3 running)    │    │
+│  │ (timestamped rows)   │ │ (status rows w/ pause)       │    │
+│  │                      │ │                              │    │
+│  │                      │ │ Memory health                │    │
+│  │                      │ │ (4 sources at a glance)      │    │
+│  └──────────────────────┘ └──────────────────────────────┘    │
+├────────────────────────────────────────────────────────────────┤
+│  GRAPH ROW:                                                    │
+│  ┌──────────────────────────────────────────────────────────┐ │
+│  │ Token spend · last 24h  (large sparkline + breakdown)   │ │
+│  └──────────────────────────────────────────────────────────┘ │
+└────────────────────────────────────────────────────────────────┘
+```
+
+### 10.10 Cost dashboard layout (Usage tab)
+
+```
+┌────────────────────────────────────────────────────────────────┐
+│  HEADER  Usage  · 24h ▾    $1.84/hr  −8% ▲                    │
+├────────────────────────────────────────────────────────────────┤
+│  STAT CARDS (4):                                               │
+│  [spent 24h] [cost/hr] [tokens/hr] [alerts]                   │
+├──────────────────────────────┬─────────────────────────────────┤
+│  TOKEN SPEND CHART           │  MODEL BREAKDOWN               │
+│  (stacked area, last 24h)    │  (horizontal bars per model)   │
+│                              │                                 │
+├──────────────────────────────┼─────────────────────────────────┤
+│  RECENT ALARMS               │  BUDGET STATUS                 │
+│  (timeline of cost spikes)   │  (4 budgets, percent gauges)   │
+└──────────────────────────────┴─────────────────────────────────┘
+```
+
+### 10.11 Active BG agents layout
+
+```
+┌────────────────────────────────────────────────────────────────┐
+│  HEADER  Active · 3 running 1 paused 1 stuck                   │
+├────────────────────────────────────────────────────────────────┤
+│  ROW (collapsible, default collapsed):                         │
+│  ● odin       streaming  4m12s   [pause][steer][stop][expand]  │
+│   ─ expanded: streaming output + tool call list ─              │
+│                                                                │
+│  ● thor       paused     8m03s   [resume][steer][stop]         │
+│  ● mimir      stuck      5m21s   [retry][steer][stop]          │
+│  ● tyr        done       2m41s   [restart][remove]             │
+└────────────────────────────────────────────────────────────────┘
+```
+
+### 10.12 Settings mode (v4.9.0)
+
+When the user enters the Settings tab, the sidebar replaces its
+tab list with the full SettingsNav (16 sections). The active section
+lights up in the sidebar and the main panel scrolls to it.
+
+```
+┌──────┬───────────────────────────────────────────────┐
+│ ⌂    │  Theme                                          │
+│ 💬   │  ──────                                         │
+│ 🤖   │  Accent color        [color picker]             │
+│ ... │  Font family         [Inter ▾]                  │
+│ ⚙ → │  Compact mode        [▢]                       │
+│      │                                                 │
+│ ▼    │  Layout                                         │
+│ Theme│  ──────                                         │
+│ Layo │  UI layout         (•) sidebar ( ) topnav ( ) both│
+│ Net  │  Show header        [✓]                       │
+│ Auth │                                                 │
+│ ...  │                                                 │
+└──────┴───────────────────────────────────────────────┘
+```
+
 ---
 
 ## 11 · Iconography
@@ -691,8 +828,318 @@ blocker.
 
 ---
 
-## 15 · Versioning
+## 15 · View index & data shapes
+
+Every view declares the data it consumes. Mock data lives in
+`canvas.html` for visual development; the live API endpoint that
+backs each view is documented in `docs/api.md`.
+
+### 15.1 Overview
+
+**Layout:** §10.9. **Endpoint:** `GET /snapshot.overview`.
+
+```ts
+interface OverviewData {
+  // Live activity (last 50 items, newest first)
+  recentActivity: ActivityItem[];
+
+  // Hero metrics
+  metrics: {
+    tokensPerHour: number;
+    avgLatencyMs: number;
+    errorRate: number;        // 0..1
+    costPerHour: number;      // USD
+    activeBgAgents: number;
+    activeSessions: number;
+  };
+
+  // Active agents (subset of BackgroundAgents)
+  activeAgents: BgInstance[];
+
+  // Memory health (4 sources)
+  memoryHealth: {
+    source: 'lightrag' | 'obsidian' | 'gitsync' | 'semantic';
+    state: 'ok' | 'degraded' | 'down';
+    lastSync: string;
+  }[];
+
+  // Token spend chart (last 24h, hourly buckets)
+  tokenSpend: { hour: string; tokens: number; cost: number }[];
+}
+```
+
+### 15.2 Chat
+
+**Layout:** §10.2. **Endpoints:** `GET /snapshot.sessions` (list),
+`GET /api/cline-sessions` (cline), `POST /api/chat` (send),
+`WS /ws` (stream).
+
+```ts
+interface ChatSession {
+  id: string;
+  title: string;
+  mtime: number;
+  state: 'idle' | 'streaming' | 'awaiting';
+  source: 'bizar' | 'cline';
+  agent: string;
+  unread?: number;
+  pinned?: boolean;
+  tree?: { root: AgentTreeNode };  // orchestrator sub-agents
+}
+
+interface ChatMessage {
+  id: number;
+  role: 'user' | 'assistant' | 'tool';
+  author: string;
+  ts: string;       // HH:MM
+  text: ReactNode;
+  toolCalls?: ToolCall[];
+  pinned?: boolean;
+}
+```
+
+### 15.3 Agents
+
+**Layout:** Roster grid (3-col on ≥1440px, 2-col on ≥1024px, 1-col
+below). **Endpoint:** `GET /snapshot.agents`.
+
+```ts
+interface Agent {
+  name: string;          // 'odin', 'thor', 'mimir', ...
+  model: string;         // 'anthropic/claude-sonnet-4-6'
+  mode: string;          // 'plan-then-forseti'
+  status: 'idle' | 'busy' | 'stuck' | 'down';
+  lastSeen: number;
+  tasksCompleted: number;
+  avgLatencyMs: number;
+}
+```
+
+Each card: avatar (first 2 letters), name (mono), model (dim mono),
+status pill, last seen time, 3 mini stats.
+
+### 15.4 Glyphs (Artifacts)
+
+**Layout:** Masonry grid of square cards. **Endpoint:**
+`GET /snapshot.artifacts`.
+
+```ts
+interface Artifact {
+  id: string;
+  title: string;
+  kind: 'glyph' | 'note' | 'doc';
+  createdAt: number;
+  thumbnail?: string;   // data URL or absent
+  size: number;         // bytes
+}
+```
+
+### 15.5 Tasks
+
+**Layout:** 5-column kanban (§9.12). **Endpoint:** `GET /snapshot.tasks`.
+
+```ts
+interface Task {
+  id: string;            // 'T-120'
+  title: string;
+  col: 'backlog' | 'todo' | 'in_progress' | 'review' | 'done';
+  priority: 'high' | 'mid' | 'low';
+  tags: string[];
+  team?: boolean;        // v6 team badge
+  by: string;            // agent name
+  when: string;          // 'now', '3h', '1d'
+}
+```
+
+### 15.6 Activity
+
+**Layout:** Timeline (§9.7). **Endpoint:** `WS /api/activity/stream`.
+
+```ts
+interface ActivityItem {
+  kind: 'agent' | 'task' | 'error' | 'info';
+  ts: string;            // HH:MM
+  text: ReactNode;       // allows inline mono spans
+  target?: string;       // optional file/task id
+}
+```
+
+### 15.7 Active (Background agents)
+
+**Layout:** §10.11. **Endpoints:** `GET /background`, `WS bg:*`.
+
+```ts
+interface BgInstance {
+  instanceId: string;
+  agent: string;
+  prompt: string;
+  status: 'pending' | 'running' | 'paused' | 'done' | 'failed';
+  startedAt: number;
+  elapsedMs: number;
+  toolCalls: BgToolCall[];
+  output: string;        // last 32k chars
+  stuck?: boolean;       // server-flagged
+}
+```
+
+### 15.8 Skills
+
+**Layout:** Card grid (3-col), each card collapsible. **Endpoint:**
+`GET /skills` (planned).
+
+```ts
+interface Skill {
+  id: string;            // 'design-taste-frontend'
+  name: string;
+  description: string;
+  enabled: boolean;
+  triggers: string[];
+  updatedAt: number;
+}
+```
+
+### 15.9 Memory
+
+**Layout:** 3-column (source rail · main panel · detail). **Endpoint:**
+`GET /memory/overview`, `GET /memory/{source}`, `POST /memory/search`.
+
+```ts
+interface MemoryOverview {
+  sources: {
+    id: 'lightrag' | 'obsidian' | 'gitsync' | 'semantic';
+    state: 'ok' | 'degraded' | 'down';
+    noteCount: number;
+    lastSync: number;
+  }[];
+  recent: MemoryNote[];
+}
+
+interface MemoryNote {
+  id: string;
+  source: MemoryOverview['sources'][number]['id'];
+  title: string;
+  preview: string;
+  tags: string[];
+  updatedAt: number;
+}
+```
+
+### 15.10 Mods
+
+**Layout:** List of installed mods with enable/disable, install new
+from URL. **Endpoint:** `GET /mods`, `POST /mods/install`.
+
+```ts
+interface Mod {
+  id: string;
+  name: string;
+  version: string;
+  enabled: boolean;
+  hasViews: boolean;
+  installPath: string;
+  updatedAt: number;
+}
+```
+
+### 15.11 Schedules
+
+**Layout:** Card list with cron expression, last run, next run,
+toggle. **Endpoint:** `GET /schedules`.
+
+```ts
+interface Schedule {
+  id: string;
+  name: string;
+  cron: string;          // '0 */6 * * *'
+  prompt: string;
+  agent: string;
+  enabled: boolean;
+  lastRun: number | null;
+  lastResult: 'ok' | 'fail' | null;
+  nextRun: number;
+}
+```
+
+### 15.12 Usage (MiniMax)
+
+**Layout:** §10.10. **Endpoint:** `GET /api/usage?range=24h|7d|30d`.
+
+```ts
+interface UsageData {
+  range: '24h' | '7d' | '30d';
+  totalCost: number;
+  totalTokens: number;
+  costPerHour: number;
+  byModel: { model: string; tokens: number; cost: number }[];
+  byHour: { hour: string; tokens: number; cost: number }[];
+  alerts: { ts: number; severity: 'warn' | 'error'; text: string }[];
+  budgets: { id: string; label: string; cap: number; spent: number }[];
+}
+```
+
+### 15.13 Eval
+
+**Layout:** Run list (top) + last run detail (bottom). **Endpoint:**
+`GET /eval/runs`, `GET /eval/runs/:id`.
+
+```ts
+interface EvalRun {
+  id: string;
+  startedAt: number;
+  finishedAt: number | null;
+  passed: number;
+  total: number;
+  cases: { name: string; pass: boolean; latencyMs: number }[];
+}
+```
+
+### 15.14 Doctor
+
+**Layout:** Hero score + 8 subsystem cards (§9.18). **Endpoint:**
+`GET /doctor`.
+
+```ts
+interface DoctorData {
+  checkedAt: number;
+  overall: number;        // 0..8
+  subsystems: {
+    name: string;
+    state: 'ok' | 'degraded' | 'warning' | 'error';
+    score: number;
+    total: number;
+    note: string;
+  }[];
+}
+```
+
+### 15.15 Harness
+
+**Layout:** Audit rules list + 6/6 pass badge. **Endpoint:**
+`GET /harness/audit`.
+
+```ts
+interface HarnessAudit {
+  version: string;
+  rules: { rule: string; pass: boolean; detail: string }[];
+}
+```
+
+### 15.16 Settings
+
+**Layout:** §10.12. **Endpoint:** `GET /settings`, `POST /settings`.
+
+16 sections: theme, updates, layout, general, env-vars, network,
+notifications, auth, agents, dashboard, background, system-llm,
+headroom, activity-log, workspaces, about. Each section is its own
+component in `src/web/views/settings/`.
+
+---
+
+## 16 · Versioning
 
+- v7.0 — this document. Adds view index, data shapes, 5 new component
+  patterns (DAG, approvals, cost chart, BG panel, workflow). Token
+  system migrated to OKLch + color-mix.
 - v6.0.0 — Cline runtime badge, Harness tab, Tasks kanban team badge,
   brand version pill, Mods-only navigation.
 - v5.x — Eval framework, Doctor page.