@polderlabs/bizar 6.0.0-beta.1 → 6.0.2

package/bizar-dash/DESIGN.md

@@ -1,10 +1,9 @@
 # DESIGN.md — Bizar Dashboard
 
-> 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.
+> The BizarHarness dashboard. Operator console surface, dark-mode first,
+> dense by intent. **v7.1** — image-led refresh toward flatter product
+> shells, restrained green signaling, and settings-grade control
+> surfaces.
 
 ## 0 · How to use this file
 
@@ -19,6 +18,12 @@ Do not hardcode hex outside `:root`. Derive tints with
 `color-mix(in oklch, var(--accent) 12%, transparent)` rather than
 inventing new tokens.
 
+**Reference priority.** When fresh product reference images are
+attached for a redesign pass, they override older stylistic
+assumptions in this document. Preserve the structural rules here, but
+bind the live visual system to the reference shell, spacing, and state
+language.
+
 **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
@@ -45,7 +50,7 @@ them in order; if two conflict, the higher rule wins.
    decoration.
 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
+   gradients. No decorative color washes behind text. No stripes on
    container edges.
 3. **State is signal, not decoration.** Active, streaming, awaiting,
    error, success — every state must be distinguishable at a glance
@@ -64,8 +69,8 @@ them in order; if two conflict, the higher rule wins.
 
 | | |
 |--|--|
-| **Wordmark** | Bizar · runic `ᛒ` glyph in `var(--accent)` |
-| **Version pill** | mono text on a `var(--accent)` → `oklch(0.55 0.22 25)` gradient |
+| **Wordmark** | Bizar / Agent Console · simple accent glyph in `var(--accent)` |
+| **Version pill** | mono text on a tinted neutral surface with accent border |
 | **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". |
@@ -91,12 +96,12 @@ or external-tool interop.
 ### 3.1 Surface scale (dark, default)
 
 ```
---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            oklch(13.5% 0.003 220)  page canvas
+--bg-elev       oklch(16.5% 0.003 220)  cards, topbar, sidebars
+--bg-elev-2     oklch(19.5% 0.004 220)  nested surfaces
+--bg-elev-3     oklch(23% 0.005 220)    hover / pressed surfaces
+--border        oklch(27% 0.004 220)    hairlines
+--border-strong oklch(34% 0.005 220)    focus rings, dividers
 ```
 
 `--bg-1` and `--bg-2` from v6.x are deprecated; use `--bg-elev` and
@@ -127,9 +132,9 @@ or external-tool interop.
 
 | Token | Dark | Light | Use |
 |---|---|---|---|
-| `--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` | `oklch(74% 0.13 154)` | `oklch(56% 0.13 154)` | Primary action, active state, focus |
+| `--accent-2` | `oklch(67% 0.10 154)` | `oklch(50% 0.10 154)` | Hover state on accent |
+| `--accent-3` | `oklch(58% 0.07 154)` | `oklch(42% 0.08 154)` | 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 |
@@ -1149,4 +1154,4 @@ component in `src/web/views/settings/`.
   semantic spacing aliases, command palette.
 - v2.x — Light theme, kanban board, hooks refactor.
 
-Future changes update this file first, then ship.
+Future changes update this file first, then ship.

package/bizar-dash/bizar-design/canvas.html

@@ -3,59 +3,65 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Bizar Dashboard Canvas</title>
+  <title>Bizar Operator Canvas</title>
   <link rel="stylesheet" href="./tokens.css">
   <link rel="stylesheet" href="./components.css">
 </head>
 <body>
   <div class="design-shell has-sidebar">
     <header class="shell-topbar" data-od-id="canvas-topbar">
-      <div class="brand-mark">
-        <div class="brand-glyph">B</div>
-        <div class="brand-copy">
-          <strong>Bizar</strong>
-          <span>Operator command surface</span>
+      <div class="shell-topbar-start">
+        <div class="brand-mark">
+          <div class="brand-glyph">B</div>
+          <div class="brand-copy">
+            <strong>Agent Console</strong>
+            <span>Operator command surface</span>
+          </div>
         </div>
+        <nav class="topbar-nav" aria-label="Design package">
+          <a class="section-tab" href="./index.html"><svg class="nav-icon"><use href="./icons.svg#icon-link"></use></svg><span>Launcher</span></a>
+          <a class="section-tab is-active" href="./canvas.html"><svg class="nav-icon"><use href="./icons.svg#icon-canvas"></use></svg><span>Canvas</span></a>
+          <a class="section-tab" href="./components.html"><svg class="nav-icon"><use href="./icons.svg#icon-components"></use></svg><span>Components</span></a>
+        </nav>
       </div>
-      <nav class="topbar-nav" aria-label="Design package">
-        <a class="section-tab" href="./index.html"><svg class="nav-icon"><use href="./icons.svg#icon-link"></use></svg><span>Launcher</span></a>
-        <a class="section-tab is-active" href="./canvas.html"><svg class="nav-icon"><use href="./icons.svg#icon-canvas"></use></svg><span>Canvas</span></a>
-        <a class="section-tab" href="./components.html"><svg class="nav-icon"><use href="./icons.svg#icon-components"></use></svg><span>Components</span></a>
-      </nav>
-      <div class="project-pill mono">project · bizar-harness</div>
-      <div class="topbar-search">
-        <span>Search sessions, tasks, memory, artifacts</span>
-        <span class="kbd">⌘K</span>
+      <div class="shell-topbar-center">
+        <div class="project-pill mono">project · bizar-harness</div>
+        <div class="topbar-search">
+          <span>Search agents, memory, settings, sessions</span>
+          <span class="kbd">⌘K</span>
+        </div>
       </div>
-      <div class="topbar-cluster">
+      <div class="shell-topbar-end">
         <div class="runtime-pill mono"><span class="dot"></span> ws · live</div>
-        <div class="runtime-pill mono" style="color: var(--success);"><span class="dot"></span> cline · active</div>
-        <button class="button is-primary">New session</button>
+        <div class="runtime-pill mono" style="color: var(--success);"><span class="dot"></span> agents · active</div>
+        <button class="button is-primary">New run</button>
       </div>
     </header>
 
     <div class="shell-body">
-      <aside class="sidebar" data-od-id="canvas-sidebar">
+      <aside class="sidebar shell-sidebar" data-od-id="canvas-sidebar">
         <div class="sidebar-header">
-          <button class="nav-button sidebar-toggle" data-sidebar-toggle>
+          <button class="nav-button sidebar-toggle" data-sidebar-toggle title="Toggle sidebar">
             <svg class="nav-icon"><use href="./icons.svg#icon-link"></use></svg>
             <span class="nav-link-copy"><span class="nav-link-label">Toggle sidebar</span><span class="nav-link-meta">Cmd/Ctrl+B</span></span>
           </button>
         </div>
-        <nav class="sidebar-nav">
-          <a class="nav-link" href="./index.html" title="Launcher"><svg class="nav-icon"><use href="./icons.svg#icon-link"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Launcher</span><span class="nav-link-meta">Package</span></span></a>
-          <a class="nav-link is-active" href="./canvas.html" title="Canvas"><svg class="nav-icon"><use href="./icons.svg#icon-canvas"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Canvas</span><span class="nav-link-meta">System</span></span></a>
-          <a class="nav-link" href="./components.html" title="Components"><svg class="nav-icon"><use href="./icons.svg#icon-components"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Components</span><span class="nav-link-meta">Library</span></span></a>
-        </nav>
-        <div class="sidebar-group">
-          <div class="sidebar-group-label">Screens</div>
+        <div class="shell-sidebar-body">
           <nav class="sidebar-nav">
-            <a class="nav-link" href="./desktop/overview.html" title="Overview"><svg class="nav-icon"><use href="./icons.svg#icon-overview"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Overview</span><span class="nav-link-meta">Desktop</span></span></a>
-            <a class="nav-link" href="./desktop/agents.html" title="Agents"><svg class="nav-icon"><use href="./icons.svg#icon-agents"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Agents</span><span class="nav-link-meta">Desktop</span></span></a>
-            <a class="nav-link" href="./desktop/memory.html" title="Memory"><svg class="nav-icon"><use href="./icons.svg#icon-memory"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Memory</span><span class="nav-link-meta">Desktop</span></span></a>
-            <a class="nav-link" href="./desktop/metrics.html" title="Metrics"><svg class="nav-icon"><use href="./icons.svg#icon-metrics"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Metrics</span><span class="nav-link-meta">Desktop</span></span></a>
-            <a class="nav-link" href="./desktop/settings.html" title="Settings"><svg class="nav-icon"><use href="./icons.svg#icon-settings"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Settings</span><span class="nav-link-meta">Desktop</span></span></a>
+            <a class="nav-link" href="./index.html" title="Launcher"><svg class="nav-icon"><use href="./icons.svg#icon-link"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Launcher</span><span class="nav-link-meta">Package</span></span></a>
+            <a class="nav-link is-active" href="./canvas.html" title="Canvas"><svg class="nav-icon"><use href="./icons.svg#icon-canvas"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Canvas</span><span class="nav-link-meta">System</span></span></a>
+            <a class="nav-link" href="./components.html" title="Components"><svg class="nav-icon"><use href="./icons.svg#icon-components"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Components</span><span class="nav-link-meta">Library</span></span></a>
           </nav>
+          <div class="sidebar-group">
+            <div class="sidebar-group-label">Screens</div>
+            <nav class="sidebar-nav">
+              <a class="nav-link" href="./desktop/overview.html" title="Overview"><svg class="nav-icon"><use href="./icons.svg#icon-overview"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Overview</span><span class="nav-link-meta">Desktop</span></span></a>
+              <a class="nav-link" href="./desktop/agents.html" title="Agents"><svg class="nav-icon"><use href="./icons.svg#icon-agents"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Agents</span><span class="nav-link-meta">Desktop</span></span></a>
+              <a class="nav-link" href="./desktop/memory.html" title="Memory"><svg class="nav-icon"><use href="./icons.svg#icon-memory"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Memory</span><span class="nav-link-meta">Desktop</span></span></a>
+              <a class="nav-link" href="./desktop/metrics.html" title="Metrics"><svg class="nav-icon"><use href="./icons.svg#icon-metrics"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Metrics</span><span class="nav-link-meta">Desktop</span></span></a>
+              <a class="nav-link" href="./desktop/settings.html" title="Settings"><svg class="nav-icon"><use href="./icons.svg#icon-settings"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Settings</span><span class="nav-link-meta">Desktop</span></span></a>
+            </nav>
+          </div>
         </div>
       </aside>
 
@@ -65,11 +71,11 @@
             <div class="workspace-header" data-od-id="canvas-header">
               <div>
                 <p class="eyebrow">System canvas</p>
-                <h1 class="page-title">Operator dashboard reference with stronger hierarchy</h1>
+                <h1 class="page-title">Console reference for controlling and configuring agents</h1>
                 <p class="hero-lead">
-                  This page is the north star for the dashboard shell: compact chrome, dense
-                  signal surfaces, clear intervention points, and modules that can be translated
-                  directly into product code without inventing new patterns.
+                  This is the integrated view built from the component library: compact shell,
+                  dense state surfaces, settings-grade clarity, and intervention points that read
+                  like a real operating console instead of a presentation mockup.
                 </p>
               </div>
               <div class="toolbar">
@@ -83,16 +89,16 @@
               </div>
             </div>
             <div class="signal-grid">
-              <div class="signal-tile"><span class="label">active sessions</span><span class="value mono">189</span><span class="detail">32 approval-bound</span></div>
-              <div class="signal-tile"><span class="label">median latency</span><span class="value mono">842ms</span><span class="detail">healthy but spiky on eval</span></div>
-              <div class="signal-tile"><span class="label">token burn</span><span class="value mono">1.42M/h</span><span class="detail">+12.4% vs previous window</span></div>
+              <div class="signal-tile"><span class="label">active runs</span><span class="value mono">189</span><span class="detail">32 need operator attention</span></div>
+              <div class="signal-tile"><span class="label">median latency</span><span class="value mono">842ms</span><span class="detail">healthy with brief eval spikes</span></div>
+              <div class="signal-tile"><span class="label">token burn</span><span class="value mono">1.42M/h</span><span class="detail">chat + eval dominate usage</span></div>
               <div class="signal-tile"><span class="label">error pressure</span><span class="value mono">0.21%</span><span class="detail">2 routes degraded</span></div>
             </div>
           </div>
           <aside class="canvas-command" data-od-id="canvas-command">
             <div>
               <p class="eyebrow">Command posture</p>
-              <h2 class="card-title">What the dashboard must make obvious</h2>
+              <h2 class="card-title">What the console must make obvious</h2>
             </div>
             <div class="terminal-line"><span>agents</span><span>who is running, paused, or stuck</span></div>
             <div class="terminal-line"><span>budget</span><span>where tokens and spend are concentrating</span></div>
@@ -112,8 +118,8 @@
             <section class="card" data-od-id="canvas-activity">
               <div class="card-header">
                 <div>
-                  <h2 class="card-title">Live activity and intervention queue</h2>
-                  <p class="card-meta">One dominant stream for recent runtime events, approvals, and recoveries.</p>
+                <h2 class="card-title">Live activity and intervention queue</h2>
+                <p class="card-meta">One dominant stream for runtime events, approvals, failures, and recoveries.</p>
                 </div>
                 <span class="pill success">streaming</span>
               </div>
@@ -182,7 +188,7 @@
             <div class="card-header">
               <div>
                 <h2 class="card-title">Token spend and model mix</h2>
-                <p class="card-meta">The chart is the cost story; the summary blocks explain why the line looks that way.</p>
+                <p class="card-meta">Thin, readable charting backed by cost summary blocks and explicit model attribution.</p>
               </div>
               <div class="cluster">
                 <span class="pill success">budget healthy</span>
@@ -191,11 +197,19 @@
             </div>
             <div class="card-body">
               <div class="sparkline">
-                <svg viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true">
-                  <path d="M0 24 L10 22 L20 21 L30 17 L40 18 L50 12 L60 9 L70 11 L80 8 L90 7 L100 10" fill="none" stroke="var(--accent)" stroke-width="1.8"></path>
-                  <path d="M0 30 L0 24 L10 22 L20 21 L30 17 L40 18 L50 12 L60 9 L70 11 L80 8 L90 7 L100 10 L100 30 Z" fill="color-mix(in oklch, var(--accent) 16%, transparent)"></path>
+                <svg class="chart-svg" viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true">
+                  <path class="chart-area" d="M0 30 L0 23.7 L10 22.5 L20 21.8 L30 18.1 L40 18.6 L50 14.3 L60 11.2 L70 12.6 L80 9.6 L90 8.4 L100 10.3 L100 30 Z"></path>
+                  <path class="chart-line secondary" d="M0 21.8 L10 21.3 L20 20.4 L30 18.9 L40 18.1 L50 16.4 L60 15.1 L70 14.5 L80 13.2 L90 12.2 L100 11.8"></path>
+                  <path class="chart-line" d="M0 23.7 L10 22.5 L20 21.8 L30 18.1 L40 18.6 L50 14.3 L60 11.2 L70 12.6 L80 9.6 L90 8.4 L100 10.3"></path>
+                  <circle class="chart-point" cx="80" cy="9.6" r="0.95"></circle>
+                  <circle class="chart-point" cx="90" cy="8.4" r="0.95"></circle>
                 </svg>
               </div>
+              <div class="chart-legend">
+                <span class="chart-legend-item"><span class="legend-swatch" style="color: var(--accent);"></span>token volume</span>
+                <span class="chart-legend-item"><span class="legend-swatch secondary"></span>budget baseline</span>
+              </div>
+              <div class="chart-axis"><span>00h</span><span>06h</span><span>12h</span><span>18h</span><span>24h</span></div>
               <div class="metric-strip" style="margin-top: var(--space-4);">
                 <div class="mini-card"><h4>Model mix</h4><p>sonnet 47% · minimax 31% · haiku 14% · local 8%</p></div>
                 <div class="mini-card"><h4>Top path</h4><p class="mono">chat.send → 38% of total tokens</p></div>