npm - @polderlabs/bizar - Versions diffs - 7.0.1 → 7.0.4 - Mend

@polderlabs/bizar 7.0.1 → 7.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

package/bizar-dash/dist/index.html CHANGED Viewed

@@ -29,19 +29,13 @@
         }
       })();
     </script>
-    <script type="module" crossorigin src="/assets/main-DqC58FEZ.js"></script>
-    <link rel="modulepreload" crossorigin href="/assets/vendor-Di7Cp-rw.js">
-    <link rel="modulepreload" crossorigin href="/assets/flow-BpU0-gK2.js">
-    <link rel="modulepreload" crossorigin href="/assets/react-vendor-D3pra6w-.js">
-    <link rel="modulepreload" crossorigin href="/assets/icons-B0AKnYI3.js">
-    <link rel="modulepreload" crossorigin href="/assets/mobile-layout-Ckru3HKJ.js">
-    <link rel="modulepreload" crossorigin href="/assets/Toast-WTxc3m2g.js">
-    <link rel="modulepreload" crossorigin href="/assets/EnvVarsSection-weVnLz3Z.js">
-    <link rel="modulepreload" crossorigin href="/assets/markdown-w2bDDkAH.js">
-    <link rel="modulepreload" crossorigin href="/assets/useSlashCommands-BAxVOU_a.js">
+    <script type="module" crossorigin src="/assets/main-DKKj9dsq.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/mobile-layout-GZ3bE8L6.js">
+    <link rel="modulepreload" crossorigin href="/assets/Toast-ATSAmbdi.js">
+    <link rel="modulepreload" crossorigin href="/assets/EnvVarsSection-BfhAz3ax.js">
+    <link rel="modulepreload" crossorigin href="/assets/useSlashCommands-BOwD7lNb.js">
     <link rel="stylesheet" crossorigin href="/assets/mobile-layout-BWLtwtfQ.css">
-    <link rel="stylesheet" crossorigin href="/assets/react-vendor-BnuhLJ6X.css">
-    <link rel="stylesheet" crossorigin href="/assets/main-BE4Uh9im.css">
+    <link rel="stylesheet" crossorigin href="/assets/main-CJAtrosO.css">
   </head>
   <body>
     <div id="root"></div>

package/bizar-dash/dist/mobile.html CHANGED Viewed

@@ -12,13 +12,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-    <script type="module" crossorigin src="/assets/mobile-DRZsK3ic.js"></script>
-    <link rel="modulepreload" crossorigin href="/assets/vendor-Di7Cp-rw.js">
-    <link rel="modulepreload" crossorigin href="/assets/flow-BpU0-gK2.js">
-    <link rel="modulepreload" crossorigin href="/assets/react-vendor-D3pra6w-.js">
-    <link rel="modulepreload" crossorigin href="/assets/icons-B0AKnYI3.js">
-    <link rel="modulepreload" crossorigin href="/assets/mobile-layout-Ckru3HKJ.js">
-    <link rel="stylesheet" crossorigin href="/assets/react-vendor-BnuhLJ6X.css">
+    <script type="module" crossorigin src="/assets/mobile-C_naUN91.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/mobile-layout-GZ3bE8L6.js">
     <link rel="stylesheet" crossorigin href="/assets/mobile-layout-BWLtwtfQ.css">
   </head>
   <body>

package/bizar-dash/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json ADDED Viewed

@@ -0,0 +1 @@

+ {"version":"4.1.10","results":[[":tests/views/Memory.test.tsx",{"duration":427.588434,"failed":false}],[":tests/BackgroundAgents.test.tsx",{"duration":268.359411,"failed":false}],[":tests/autosave.test.tsx",{"duration":258.93156,"failed":false}],[":tests/views/Overview.test.tsx",{"duration":493.33852,"failed":false}],[":tests/mobile-layout.test.tsx",{"duration":284.669842,"failed":false}],[":tests/views/Agents.test.tsx",{"duration":622.547519,"failed":false}],[":tests/components/settings-search.test.tsx",{"duration":742.6605920000001,"failed":false}],[":tests/eval-web-ui.test.tsx",{"duration":134.72983299999999,"failed":false}],[":tests/views/Tasks.test.tsx",{"duration":443.49187600000005,"failed":false}],[":tests/a11y/forms.test.tsx",{"duration":89.58849199999997,"failed":true}],[":tests/mobile-settings.test.tsx",{"duration":214.629275,"failed":false}],[":tests/a11y.test.tsx",{"duration":2510.271573,"failed":false}],[":tests/backup-restore.test.tsx",{"duration":199.76050199999997,"failed":false}],[":tests/mobile-tasks.test.tsx",{"duration":200.3035920000001,"failed":false}],[":tests/chat-composer.test.tsx",{"duration":273.03698099999997,"failed":false}],[":tests/mobile-overview.test.tsx",{"duration":251.19768999999985,"failed":false}],[":src/web/components/agents/RoutingDecisions.test.tsx",{"duration":96.87386300000003,"failed":false}],[":tests/lib/utils.test.ts",{"duration":16.848490000000027,"failed":false}],[":tests/ui/data/DataTable.test.tsx",{"duration":194.62984499999993,"failed":false}],[":tests/lib/search-fuzzy.test.ts",{"duration":4.908913999999982,"failed":false}],[":tests/settings-layout.test.tsx",{"duration":206.809751,"failed":false}],[":tests/settings-nav.test.tsx",{"duration":282.1045120000001,"failed":false}],[":tests/settings-mode-wiring.test.tsx",{"duration":312.29586500000005,"failed":false}],[":tests/minimax-bar.test.tsx",{"duration":32.567679999999996,"failed":false}],[":tests/ui/feedback/Toast.test.tsx",{"duration":250.11323599999992,"failed":false}],[":tests/ui/navigation/CommandPalette.test.tsx",{"duration":282.23178600000006,"failed":false}],[":tests/components/doctor-panel.test.tsx",{"duration":91.71197599999994,"failed":false}],[":tests/views/sidebar.test.tsx",{"duration":129.53635500000007,"failed":false}],[":tests/ui/layout/Tabs.test.tsx",{"duration":192.45391100000006,"failed":false}],[":tests/views/topbar.test.tsx",{"duration":519.7306729999999,"failed":false}],[":tests/components/Toast.test.tsx",{"duration":201.75069100000007,"failed":false}],[":tests/ui/feedback/Tooltip.test.tsx",{"duration":93.07135800000003,"failed":false}],[":tests/voice-recorder.test.tsx",{"duration":144.5129629999999,"failed":false}],[":tests/mobile-chat.test.tsx",{"duration":81.44125299999996,"failed":false}],[":tests/ui/data/StatTile.test.tsx",{"duration":112.04556500000001,"failed":false}],[":tests/ui/layout/Sidebar.test.tsx",{"duration":160.56550000000004,"failed":false}],[":tests/ui/feedback/Dialog.test.tsx",{"duration":169.84368500000005,"failed":false}],[":tests/goal-input.test.tsx",{"duration":195.10940199999993,"failed":false}],[":tests/goap-planner.test.ts",{"duration":3.8911860000000047,"failed":false}],[":tests/components/Modal.test.tsx",{"duration":201.81510500000002,"failed":false}],[":tests/communication-log.test.tsx",{"duration":76.99420199999997,"failed":false}],[":tests/ui/feedback/ProgressBar.test.tsx",{"duration":76.68909899999994,"failed":false}],[":tests/memory-graph-view.test.tsx",{"duration":46.589782000000014,"failed":false}],[":tests/ui/data/KeyValueList.test.tsx",{"duration":152.445653,"failed":false}],[":tests/ui/layout/Breadcrumbs.test.tsx",{"duration":136.796558,"failed":false}],[":tests/ui/navigation/NavLink.test.tsx",{"duration":178.380541,"failed":false}],[":tests/components/screenshot-ocr.test.tsx",{"duration":34.225052000000005,"failed":false}],[":tests/hooks/useModal.test.tsx",{"duration":147.95084200000008,"failed":false}],[":tests/ui/data/BarChart.test.tsx",{"duration":94.56861200000003,"failed":false}],[":tests/ui/controls/Textarea.test.tsx",{"duration":112.77774600000009,"failed":false}],[":tests/event-log.test.tsx",{"duration":65.03253399999994,"failed":false}],[":tests/ui/controls/Select.test.tsx",{"duration":152.022293,"failed":false}],[":tests/ui/data/Sparkline.test.tsx",{"duration":32.044768999999974,"failed":false}],[":tests/components/workspace-selector.test.tsx",{"duration":137.78600100000006,"failed":false}],[":tests/ui/navigation/NavGroup.test.tsx",{"duration":171.45922700000006,"failed":false}],[":tests/dep-graph.test.tsx",{"duration":118.61701100000005,"failed":false}],[":tests/ui/controls/RadioGroup.test.tsx",{"duration":167.64945699999998,"failed":false}],[":tests/ui/layout/Panel.test.tsx",{"duration":34.87961399999995,"failed":false}],[":tests/quality-gates.test.tsx",{"duration":43.57956200000001,"failed":false}],[":tests/ui/controls/NumberInput.test.tsx",{"duration":149.17823099999998,"failed":false}],[":tests/ui/data/EmptyState.test.tsx",{"duration":104.00983799999995,"failed":false}],[":tests/ui/layout/ViewHeader.test.tsx",{"duration":39.52563399999997,"failed":false}],[":tests/ui/controls/SearchInput.test.tsx",{"duration":150.78952400000003,"failed":false}],[":tests/ui/primitives/Box.test.tsx",{"duration":32.86741299999994,"failed":false}],[":tests/ui/layout/AppShell.test.tsx",{"duration":27.480504999999994,"failed":false}],[":tests/ui/controls/Button.test.tsx",{"duration":141.232436,"failed":false}],[":tests/ui/controls/Slider.test.tsx",{"duration":83.16240600000003,"failed":false}],[":tests/hooks/useToast.test.tsx",{"duration":125.98108200000001,"failed":false}],[":tests/ui/data/ErrorState.test.tsx",{"duration":117.94075600000008,"failed":false}],[":tests/ui/data/LoadingState.test.tsx",{"duration":77.70447200000001,"failed":false}],[":tests/ui/controls/TextInput.test.tsx",{"duration":117.05886900000007,"failed":false}],[":tests/ui/layout/Topbar.test.tsx",{"duration":70.17956199999992,"failed":false}],[":tests/ui/feedback/StatusDot.test.tsx",{"duration":80.754097,"failed":false}],[":tests/lib/i18n.test.ts",{"duration":2.413669000000027,"failed":false}],[":tests/ui/feedback/Badge.test.tsx",{"duration":48.463427000000024,"failed":false}],[":tests/ui/controls/Checkbox.test.tsx",{"duration":116.98734100000001,"failed":false}],[":tests/components/Button.test.tsx",{"duration":115.24144100000001,"failed":false}],[":tests/components/Card.test.tsx",{"duration":25.367482000000052,"failed":false}],[":tests/ui/primitives/Stack.test.tsx",{"duration":25.539912000000072,"failed":false}],[":tests/components/StatusBadge.test.tsx",{"duration":35.74661299999991,"failed":false}],[":tests/ui/controls/Toggle.test.tsx",{"duration":142.27458000000001,"failed":false}],[":tests/ui/primitives/Separator.test.tsx",{"duration":17.745345999999984,"failed":false}],[":tests/ui/controls/IconButton.test.tsx",{"duration":96.80897900000002,"failed":false}],[":tests/ui/controls/Kbd.test.tsx",{"duration":19.74353099999996,"failed":false}],[":tests/ui/primitives/Inline.test.tsx",{"duration":15.097170000000006,"failed":false}],[":tests/ui/primitives/Grid.test.tsx",{"duration":21.766181000000017,"failed":false}],[":tests/ui/layout/PanelHeader.test.tsx",{"duration":18.773353999999983,"failed":false}],[":tests/ui/primitives/VisuallyHidden.test.tsx",{"duration":15.98928699999999,"failed":false}],[":tests/components/Spinner.test.tsx",{"duration":61.72107700000004,"failed":false}]]}

package/bizar-dash/src/web/components/SettingsNav.tsx CHANGED Viewed

@@ -68,7 +68,12 @@ export type SettingsNavProps = {
 export function SettingsNav({ activeSection, onSectionChange, onExitSettings }: SettingsNavProps) {
   return (
-    <div className="settings-nav-root" aria-label="Settings sections">
+    // v7.0.4 — reuse the .sidebar-* shell classes so the Settings rail
+    // is visually identical to the main nav rail. The legacy .settings-nav-*
+    // wrapper classes were a near-duplicate of .sidebar-nav + .sidebar-section-*
+    // and produced a subtly different bg tone. With the shared classes, both
+    // rails read as one component.
+    <nav className="sidebar-nav" aria-label="Settings sections">
       {/* Back button */}
       <button
         type="button"
@@ -80,12 +85,12 @@ export function SettingsNav({ activeSection, onSectionChange, onExitSettings }:
         <span className="sidebar-tab-label">Back</span>
       </button>
-      <div className="settings-nav-divider" aria-hidden="true" />
+      <div className="sidebar-section-divider" aria-hidden="true" />
       {/* Section groups */}
       {SECTION_GROUPS.map((group) => (
         <div key={group.label} className="settings-nav-group">
-          <div className="settings-nav-group-label">{group.label}</div>
+          <div className="sidebar-section-label">{group.label}</div>
           {group.sections.map((s) => {
             const Icon = s.icon;
             const active = activeSection === s.id;
@@ -107,6 +112,6 @@ export function SettingsNav({ activeSection, onSectionChange, onExitSettings }:
           })}
         </div>
       ))}
-    </div>
+    </nav>
   );
 }

package/bizar-dash/src/web/components/Topbar.tsx CHANGED Viewed

@@ -27,6 +27,8 @@ import {
   Stethoscope,
   ClipboardCheck,
   Target,
+  Sun,
+  Moon,
   type LucideIcon,
 } from 'lucide-react';
 import { cn } from '../lib/utils';
@@ -126,6 +128,38 @@ export function Topbar({
   extraTabs,
   clineStatus = null,
 }: TopbarProps) {
+  // v7.0.4 — theme toggle hoisted from views/Overview.tsx so the
+  // user can swap light/dark from any view (not only Overview).
+  // Persisted to localStorage; falls back to system preference once
+  // on first paint, then user choice wins.
+  const [isDark, setIsDark] = useState<boolean>(() => {
+    if (typeof document === 'undefined') return true;
+    const stored = window.localStorage?.getItem('bizar.theme');
+    if (stored === 'light') return false;
+    if (stored === 'dark') return true;
+    const attr = document.documentElement.getAttribute('data-theme');
+    if (attr === 'light') return false;
+    if (attr === 'dark') return true;
+    return window.matchMedia?.('(prefers-color-scheme: light)').matches === false;
+  });
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    if (isDark) {
+      document.documentElement.removeAttribute('data-theme');
+      try {
+        window.localStorage?.setItem('bizar.theme', 'dark');
+      } catch {
+        /* private mode / quota — non-fatal */
+      }
+    } else {
+      document.documentElement.setAttribute('data-theme', 'light');
+      try {
+        window.localStorage?.setItem('bizar.theme', 'light');
+      } catch {
+        /* non-fatal */
+      }
+    }
+  }, [isDark]);
   return (
     <header className="topbar">
       <div className="topbar-row">
@@ -156,6 +190,17 @@ export function Topbar({
         <div className="topbar-right">
           {notificationsSlot}
           {rightSlot}
+          {/* v7.0.4 — theme toggle (hoisted from Overview so it's reachable from any view) */}
+          <button
+            type="button"
+            className="icon-btn topbar-theme-toggle"
+            onClick={() => setIsDark((v) => !v)}
+            aria-label={isDark ? 'Switch to light theme' : 'Switch to dark theme'}
+            title={isDark ? 'Switch to light theme' : 'Switch to dark theme'}
+            data-testid="topbar-theme-toggle"
+          >
+            {isDark ? <Sun size={14} /> : <Moon size={14} />}
+          </button>
           {clineStatus && (
             <div
               className={cn('cline-status', `cline-${clineStatus.state}`)}

package/bizar-dash/src/web/styles/main.css CHANGED Viewed

@@ -141,38 +141,46 @@ pre,
 /* ─── Theme tokens ─────────────────────────────────────────────────── */
 :root {
-  /* Surfaces */
-  --bg: #0b0e14;
-  --bg-elev: #12161f;
-  --bg-elev-2: #1a1f2b;
-  --bg-elev-3: #232a39;
-  /* Borders */
-  --border: #232a39;
-  --border-strong: #2d3648;
-  /* Text */
-  --text: #c9d1d9;
-  --text-dim: #b4bcd0;
-  --text-muted: var(--text-dim);
-  --text-strong: #f0f6fc;
-  /* Brand & status */
-  --accent: #8b5cf6;
-  --accent-2: #a78bfa;
-  --accent-3: #c4b5fd;
-  --accent-bg: rgba(139, 92, 246, 0.12);
-  --accent-border: rgba(139, 92, 246, 0.4);
-  --accent-glow: rgba(139, 92, 246, 0.18);
-  --accent-soft: rgba(139, 92, 246, 0.08);
-  --success: oklch(0.72 0.16 145);
-  --warning: oklch(0.78 0.14 70);
-  --error: oklch(0.66 0.20 25);
-  --info: oklch(0.72 0.13 235);
-  --success-soft: rgba(52, 211, 153, 0.15);
-  --error-soft: rgba(248, 113, 113, 0.12);
-  --warning-soft: rgba(251, 191, 36, 0.15);
+  /* v7.0.4 — legacy token aliases. The chrome (topbar / sidebar /
+     .app shell) reads --bg / --bg-elev / --text-dim / --accent-3 /
+     etc.; the new design-system primitives in `ui/styles/tokens.css`
+     define --surface-* / --text-* / --accent / --border-* as the
+     single source of truth. These aliases collapse the two systems
+     to one so the inner Overview panels and the outer app chrome
+     share the same surface tone — the user's v7.0.4 visual
+     request: "make the whole dashboard look like the inner part of
+     overview".
+     The legacy variable NAMES are kept for backwards-compat with
+     the ~10k-line main.css body (every rule below references
+     these names); we just retarget the values to the design-system
+     tokens. */
+  --bg: var(--surface-0);
+  --bg-elev: var(--surface-1);
+  --bg-elev-2: var(--surface-2);
+  --bg-elev-3: var(--surface-3);
+  --bg-elevated: var(--bg-elev);
+  --border: var(--border-default);
+  --border-strong: var(--border-strong);
+  --text: var(--text-primary);
+  --text-dim: var(--text-secondary);
+  --text-muted: var(--text-tertiary);
+  --text-strong: var(--text-primary);
+  --accent: #3ecf8e;
+  --accent-2: var(--accent);
+  --accent-3: var(--accent);
+  --accent-bg: var(--accent-subtle);
+  --accent-border: var(--accent);
+  --accent-glow: var(--accent-subtle);
+  --accent-soft: var(--accent-subtle);
+  --error: var(--danger);
+  --success-soft: var(--success-subtle);
+  --warning-soft: var(--warning-subtle);
+  --error-soft: var(--danger-subtle);
   /* Syntax highlight (json tree) */
   --syntax-key: #79c0ff;
@@ -232,8 +240,6 @@ pre,
   --shadow-2: 0 4px 12px var(--shadow-color);
   --shadow-3: 0 12px 32px var(--shadow-color);
   --shadow-glow: 0 0 0 1px var(--accent-border), 0 8px 32px var(--accent-glow);
-  --bg-elevated: var(--bg-elev);
-  --surface-2: var(--bg-elev-2);
   /* Motion */
   --motion-fast: 120ms;
@@ -242,11 +248,6 @@ pre,
   --ease: cubic-bezier(0.4, 0, 0.2, 1);
   --motion-ease: cubic-bezier(0.2, 0, 0, 1);
-  /* v3.21.x — Semantic and surface tokens for chat UI overhaul */
-  --surface-0: var(--bg);
-  --surface-1: color-mix(in oklab, var(--bg) 92%, var(--text) 8%);
-  --surface-2: color-mix(in oklab, var(--bg) 84%, var(--text) 16%);
   /* v3.21.x — Gemini-inspired surface tokens for chat UI overhaul.
      --bg-1, --bg-2 are NEW names that don't conflict with --bg / --bg-elev. */
   --bg-1: #18181b;
@@ -275,33 +276,36 @@ pre,
 }
 [data-theme='light'] {
-  --bg: #f7f8fa;
-  --bg-elev: #ffffff;
-  --bg-elev-2: #f0f3f8;
-  --bg-elev-3: #e6ebf2;
-  --border: #e2e8f0;
-  --border-strong: #cbd5e1;
-  --text: #1f2937;
-  --text-dim: #475569;
-  --text-strong: #0f172a;
-  --accent: #7c3aed;
-  --accent-2: #6d28d9;
-  --accent-3: #5b21b6;
-  --accent-bg: rgba(124, 58, 237, 0.08);
-  --accent-border: rgba(124, 58, 237, 0.3);
-  --accent-glow: rgba(124, 58, 237, 0.18);
-  --accent-soft: rgba(124, 58, 237, 0.06);
-  --success: #047857;
-  --warning: #b45309;
-  --error: #b91c1c;
-  --info: #1d4ed8;
-  --success-soft: rgba(5, 150, 105, 0.12);
-  --error-soft: rgba(220, 38, 38, 0.08);
-  --warning-soft: rgba(217, 119, 6, 0.12);
+  /* v7.0.4 — see :root block above. Light theme aliases collapse to the
+     design-system tokens from `ui/styles/tokens.css` as well. */
+  --bg: var(--surface-0);
+  --bg-elev: var(--surface-1);
+  --bg-elev-2: var(--surface-2);
+  --bg-elev-3: var(--surface-3);
+  --border: var(--border-default);
+  --border-strong: var(--border-strong);
+  --text: var(--text-primary);
+  --text-dim: var(--text-secondary);
+  --text-muted: var(--text-tertiary);
+  --text-strong: var(--text-primary);
+  --accent: #3ecf8e;
+  --accent-2: var(--accent);
+  --accent-3: var(--accent);
+  --accent-bg: var(--accent-subtle);
+  --accent-border: var(--accent);
+  --accent-glow: var(--accent-subtle);
+  --accent-soft: var(--accent-subtle);
+  --success: var(--success);
+  --warning: var(--warning);
+  --error: var(--danger);
+  --success-soft: var(--success-subtle);
+  --warning-soft: var(--warning-subtle);
+  --error-soft: var(--danger-subtle);
+  --info: var(--info);
   --syntax-key: #0969da;
   --syntax-string: #0a3069;
@@ -315,18 +319,6 @@ pre,
   --shadow-2: 0 4px 12px var(--shadow-color);
   --shadow-3: 0 12px 32px var(--shadow-color);
-  /* v3.21.x — Surface and semantic tokens (light theme overrides). */
-  --surface-1: color-mix(in oklab, var(--bg) 92%, var(--text) 8%);
-  --surface-2: color-mix(in oklab, var(--bg) 84%, var(--text) 16%);
-  /* v4.8.0 — Darken light-theme status colors so they pass WCAG AA (4.5:1)
-     against the light surface (#f7f8fa). */
-  --success: oklch(0.48 0.14 145);
-  --warning: oklch(0.55 0.15 70);
-  --error: oklch(0.48 0.20 25);
-  --info: oklch(0.48 0.16 235);
-  --bg-1: #f4f4f5;
-  --bg-2: #e4e4e7;
   color-scheme: light;
 }
@@ -336,10 +328,16 @@ pre,
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background:
-    radial-gradient(circle at 0% 0%, var(--accent-bg), transparent 50%),
-    var(--bg);
-  background-attachment: fixed;
+  background: var(--bg);
+  position: relative;
+}
+.app::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: radial-gradient(circle at 0% 0%, var(--accent-bg), transparent 60%);
+  pointer-events: none;
+  z-index: 0;
 }
 /* `.content` styling moved to `.app > .layout-body > .content` in Layout variants below.
@@ -5493,15 +5491,15 @@ button.mod-instructions-head {
 .sidebar-section-divider {
   height: 1px;
-  background: var(--border-soft, rgba(255,255,255,0.06));
-  margin: 12px 8px 4px;
+  background: var(--border);
+  margin: 12px 8px 6px;
 }
 .sidebar-section-label {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  color: var(--text-dim, rgba(255,255,255,0.5));
-  padding: 4px 12px;
+  color: var(--text-tertiary);
+  padding: 6px 12px 2px;
   margin-bottom: 2px;
   font-weight: 600;
 }
@@ -5855,7 +5853,7 @@ html[data-animations="false"] * {
 .sidebar {
   width: 220px;
   flex-shrink: 0;
-  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
+  background: var(--bg-elev);
   border-right: 1px solid var(--border);
   padding: var(--space-3) var(--space-2);
   overflow-y: auto;
@@ -5906,13 +5904,13 @@ html[data-animations="false"] * {
 .sidebar-tab-active {
   background: var(--accent-bg);
-  color: var(--accent-3);
+  color: var(--accent);
   border-color: var(--accent-border);
 }
 .sidebar-tab-active:hover {
   background: var(--accent-bg);
-  color: var(--accent-3);
+  color: var(--accent);
 }
 .sidebar-tab-label {

package/bizar-dash/src/web/styles/memory.css CHANGED Viewed

@@ -11,37 +11,15 @@
 /* ── View layout ──────────────────────────────────────────────────────────── */
 .view-memory {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4, 16px);
-  padding: 16px 20px 32px;
   max-width: 1400px;
   margin: 0 auto;
   width: 100%;
 }
-.memory-tab .view-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-/* ── Body grid (rail + main) ─────────────────────────────────────────────── */
-.memory-tab-body {
-  display: grid;
-  grid-template-columns: 200px 1fr;
-  gap: var(--space-4, 16px);
-  align-items: start;
-}
-@media (max-width: 900px) {
-  .memory-tab-body {
-    grid-template-columns: 1fr;
-  }
-}
+/* v7.0.4 — removed .memory-tab .view-header + .memory-tab-body +
+   @media (max-width: 900px) collapse: Memory.tsx now renders a
+   ui/layout ViewHeader + ui/primitives Grid for the rail/main
+   split, so the legacy selectors are dead. */
 /* ── Source rail ─────────────────────────────────────────────────────────── */
@@ -57,31 +35,48 @@
   top: 16px;
 }
+/* v7.0.4 — Source rail buttons read identical to .sidebar-tab (which
+   the main nav rail uses). Same hover, same active tone. Aligns the
+   Memory rail visually with the rest of the dashboard chrome. */
 .memory-source-button {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 10px 12px;
+  padding: 9px 12px;
   background: transparent;
   border: 1px solid transparent;
-  border-radius: var(--radius-sm, 6px);
-  color: var(--text-dim, #b4bcd0);
+  border-radius: var(--radius, 8px);
+  color: var(--text-dim);
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   text-align: left;
-  transition: background var(--motion-fast, 120ms), color var(--motion-fast, 120ms), border-color var(--motion-fast, 120ms);
+  width: 100%;
+  font-family: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition:
+    background var(--motion-base, 200ms) var(--ease),
+    color var(--motion-base, 200ms) var(--ease),
+    border-color var(--motion-base, 200ms) var(--ease);
 }
 .memory-source-button:hover {
-  background: var(--bg-elev-2, #1a1f2b);
-  color: var(--text, #c9d1d9);
+  background: var(--bg-elev-2);
+  color: var(--text);
 }
 .memory-source-button-active {
-  background: var(--accent-bg, rgba(139, 92, 246, 0.12));
-  border-color: var(--accent-border, rgba(139, 92, 246, 0.4));
-  color: var(--accent, #8b5cf6);
+  background: var(--accent-bg);
+  color: var(--accent);
+  border-color: var(--accent-border);
+}
+.memory-source-button-active:hover {
+  background: var(--accent-bg);
+  color: var(--accent);
 }
 /* ── Main panel column ──────────────────────────────────────────────────── */

package/bizar-dash/src/web/styles/settings.css CHANGED Viewed

@@ -609,34 +609,15 @@
   background: var(--bg);
 }
-/* Settings nav root */
-.settings-nav-root {
-  display: flex;
-  flex-direction: column;
-  padding: var(--space-3);
-  gap: 2px;
-}
-.settings-nav-divider {
-  height: 1px;
-  background: var(--border);
-  margin: var(--space-2) 0;
-}
-/* Section groups */
+/* v7.0.4 — SettingsNav reuses the .sidebar-nav + .sidebar-section-*
+   classes from main.css so the Settings rail is visually identical
+   to the main nav rail. Only the group spacing remains here so each
+   labelled section (General / Core / Agents / Experience / Data) gets
+   extra breathing room between its label and the next group. */
 .settings-nav-group {
   margin-bottom: var(--space-3);
 }
-.settings-nav-group-label {
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-dim);
-  font-weight: 600;
-  padding: 4px 8px 6px;
-}
 /* ─────────────────────────────────────────────────────────────────────
    v5.4 — Mobile settings accordion (mobile-settings)
    ───────────────────────────────────────────────────────────────────── */
@@ -780,8 +761,7 @@
   }
   /* Hide sidebar nav on mobile */
-  .settings-sidebar,
-  .settings-nav-root {
+  .settings-sidebar {
     display: none;
   }

package/bizar-dash/src/web/ui/data/data.css CHANGED Viewed

@@ -166,9 +166,10 @@
 }
 .bd-bar-chart__track {
-  height: 8px;
+  height: 10px;
   width: 100%;
   background: var(--surface-2);
+  border: 1px solid var(--border-subtle);
   border-radius: var(--radius-full);
   overflow: hidden;
 }
@@ -177,6 +178,10 @@
   height: 100%;
   border-radius: var(--radius-full);
   transition: width var(--duration-normal) var(--ease-out);
+  /* v7.0.4 — bars read clearly in dark mode now that tokens.css drives
+     the surface tones. Inner track has a hairline border so empty
+     rows are still visible (no more "barely visible outline"). */
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
 }
 /* ============ DataTable ============ */

package/bizar-dash/src/web/ui/index.ts CHANGED Viewed

@@ -48,6 +48,7 @@ export {
   Topbar, type TopbarProps,
   Panel, type PanelProps, type PanelPadding, type PanelVariant,
   PanelHeader, type PanelHeaderProps,
+  ViewHeader, type ViewHeaderProps,
   Tabs, type TabsProps, type TabDef,
   Breadcrumbs, type BreadcrumbsProps, type BreadcrumbItem,
 } from './layout';