@polderlabs/bizar 7.0.4 → 8.0.0

package/bizar-dash/src/web/v8/views/Settings/SettingsView.tsx

@@ -0,0 +1,305 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Palette,
+  Keyboard,
+  Bell,
+  Database,
+  Plug,
+  Library as LibraryIcon,
+  Wrench,
+  Activity,
+  Brain,
+  ShieldCheck,
+  Sliders,
+  Sparkles,
+  Terminal,
+  Settings as SettingsIcon,
+  Cpu,
+  type LucideIcon,
+} from 'lucide-react';
+import { Grid } from '../../ui/primitives/Grid.js';
+import { Stack } from '../../ui/primitives/Stack.js';
+import { Switch } from '../../ui/controls/Switch.js';
+import { Select } from '../../ui/controls/Select.js';
+import { Slider } from '../../ui/controls/Slider.js';
+import { Button } from '../../ui/controls/Button.js';
+import { SettingsSection } from '../../ui/settings/SettingsSection.js';
+import { SettingsRow } from '../../ui/settings/SettingsRow.js';
+import { SettingsNav, type SettingsNavItem } from '../../ui/settings/SettingsNav.js';
+import { useTheme } from '../../ui/theme/useTheme.js';
+import { useDensity } from '../../ui/theme/useDensity.js';
+
+/**
+ * SettingsView — composes the 16 PLAN.md sections from SettingsSection
+ * + SettingsRow primitives. Live state is wired to ThemeProvider /
+ * DensityProvider where it makes sense (General, Theme, Density).
+ *
+ * Other sections render with stub controls so the surface is exercisable
+ * end-to-end. Replacing stubs with real wiring is per-section work that
+ * ships incrementally.
+ */
+
+interface Section {
+  id: string;
+  title: string;
+  icon: LucideIcon;
+}
+
+const SECTIONS: Section[] = [
+  { id: 'general', title: 'General', icon: SettingsIcon },
+  { id: 'theme', title: 'Theme', icon: Palette },
+  { id: 'density', title: 'Density', icon: Sliders },
+  { id: 'density-rules', title: 'Density rules', icon: Sparkles },
+  { id: 'palette', title: 'Command palette', icon: Terminal },
+  { id: 'keyboard', title: 'Keyboard', icon: Keyboard },
+  { id: 'notifications', title: 'Notifications', icon: Bell },
+  { id: 'storage', title: 'Storage', icon: Database },
+  { id: 'plugins', title: 'Plugins', icon: Plug },
+  { id: 'mcps', title: 'MCP servers', icon: Cpu },
+  { id: 'skills', title: 'Skills', icon: LibraryIcon },
+  { id: 'hooks', title: 'Hooks', icon: Wrench },
+  { id: 'activity', title: 'Activity', icon: Activity },
+  { id: 'memory', title: 'Memory', icon: Brain },
+  { id: 'privacy', title: 'Privacy', icon: ShieldCheck },
+  { id: 'advanced', title: 'Advanced', icon: SettingsIcon },
+];
+
+export function SettingsView(): JSX.Element {
+  const [activeId, setActiveId] = useState<string>('general');
+  const theme = useTheme();
+  const density = useDensity();
+  const [analytics, setAnalytics] = useState<boolean>(true);
+  const [crashReports, setCrashReports] = useState<boolean>(true);
+  const [reducedMotion, setReducedMotion] = useState<boolean>(false);
+
+  const navItems: SettingsNavItem[] = SECTIONS.map((s) => ({ id: s.id, title: s.title, icon: <s.icon size={14} aria-hidden="true" /> }));
+
+  // Click on a left-rail nav entry → set active + scroll the section into view.
+  const handleSelect = (id: string): void => {
+    setActiveId(id);
+    // Use a rAF so the active highlight paints before the scroll begins —
+    // some browsers queue both as separate compositor passes otherwise.
+    requestAnimationFrame(() => {
+      document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+  };
+
+  // Sync active section with what's actually on screen as the user scrolls.
+  // Without this, the rail highlight lags behind the scroll position.
+  const rootRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (typeof IntersectionObserver === 'undefined') return;
+    const root = rootRef.current;
+    if (!root) return;
+    const targets = SECTIONS
+      .map((s) => document.getElementById(s.id))
+      .filter((el): el is HTMLElement => el !== null);
+    if (targets.length === 0) return;
+
+    const visible = new Map<string, number>();
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const id = entry.target.id;
+          if (entry.isIntersecting) {
+            visible.set(id, entry.intersectionRatio);
+          } else {
+            visible.delete(id);
+          }
+        }
+        if (visible.size === 0) return;
+        // Pick the section with the highest visible ratio.
+        let bestId: string | undefined;
+        let bestRatio = -1;
+        for (const [id, ratio] of visible) {
+          if (ratio > bestRatio) {
+            bestRatio = ratio;
+            bestId = id;
+          }
+        }
+        if (bestId) setActiveId(bestId);
+      },
+      { rootMargin: '-30% 0px -50% 0px', threshold: [0, 0.25, 0.5, 0.75, 1] },
+    );
+    for (const t of targets) observer.observe(t);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <div ref={rootRef}>
+    <Grid cols={3} gap={5}>
+      <aside style={{ position: 'sticky', top: 0, alignSelf: 'start' }}>
+        <SettingsNav items={navItems} activeId={activeId} onSelect={handleSelect} />
+      </aside>
+      <Stack gap={5} style={{ gridColumn: 'span 2' }}>
+        <SettingsSection
+          id="general"
+          title="General"
+          description="Workspace-level defaults."
+          icon={<SettingsIcon size={14} aria-hidden="true" />}
+        >
+          <SettingsRow
+            id="workspace-name"
+            label="Workspace name"
+            description="Shown in the topbar and command palette."
+            control={<input type="text" defaultValue="Bizar Harness" style={{ padding: '6px 10px', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)', background: 'var(--surface-0)', color: 'var(--fg)', fontSize: 'var(--fs-13)' }} />}
+          />
+          <SettingsRow
+            id="default-view"
+            label="Default view on launch"
+            control={
+              <Select defaultValue="overview">
+                <option value="overview">Overview</option>
+                <option value="tasks">Tasks</option>
+                <option value="goals">Goals</option>
+              </Select>
+            }
+          />
+        </SettingsSection>
+
+        <SettingsSection
+          id="theme"
+          title="Theme"
+          description="Color mode. System follows your OS preference."
+          icon={<Palette size={14} aria-hidden="true" />}
+        >
+          <SettingsRow
+            id="theme-mode"
+            label="Color mode"
+            control={
+              <Select value={theme.mode} onValueChange={theme.setMode}>
+                <option value="system">System</option>
+                <option value="light">Light</option>
+                <option value="dark">Dark</option>
+              </Select>
+            }
+          />
+          <SettingsRow
+            id="theme-accent"
+            label="Accent color"
+            description="Personalize the leading-edge accent stripe."
+            control={<input type="color" defaultValue="#5b8def" style={{ width: 40, height: 28, border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)' }} />}
+          />
+        </SettingsSection>
+
+        <SettingsSection
+          id="density"
+          title="Density"
+          description="Comfortable by default. Compact fits more rows on screen."
+          icon={<Sliders size={14} aria-hidden="true" />}
+        >
+          <SettingsRow
+            id="density-mode"
+            label="Density"
+            control={
+              <Select value={density.density} onValueChange={(v) => density.setDensity(v as 'comfortable' | 'compact')}>
+                <option value="comfortable">Comfortable</option>
+                <option value="compact">Compact</option>
+              </Select>
+            }
+          />
+          <SettingsRow
+            id="density-base-font"
+            label="Base font size"
+            description="Adjusts the `--fs-13` token globally."
+            control={<Slider defaultValue={[13]} min={11} max={16} step={1} />}
+          />
+        </SettingsSection>
+
+        <SettingsSection
+          id="density-rules"
+          title="Density rules"
+          description="Override density per surface."
+          icon={<Sparkles size={14} aria-hidden="true" />}
+        >
+          <SettingsRow
+            id="tasks-compact"
+            label="Tasks page — compact by default"
+            control={<Switch />}
+          />
+          <SettingsRow
+            id="memory-compact"
+            label="Memory page — compact by default"
+            control={<Switch defaultChecked />}
+          />
+        </SettingsSection>
+
+        <SettingsSection id="palette" title="Command palette" description="How the ⌘K palette behaves." icon={<Terminal size={14} aria-hidden="true" />}>
+          <SettingsRow id="palette-history" label="Show recent commands" control={<Switch defaultChecked />} />
+          <SettingsRow id="palette-fuzzy" label="Fuzzy match" control={<Switch defaultChecked />} />
+        </SettingsSection>
+
+        <SettingsSection id="keyboard" title="Keyboard" description="Per-action hotkey overrides." icon={<Keyboard size={14} aria-hidden="true" />}>
+          <SettingsRow id="kb-palette" label="Open command palette" control={<code style={{ fontFamily: 'var(--font-mono)' }}>⌘K</code>} />
+          <SettingsRow id="kb-search" label="Search tasks" control={<code style={{ fontFamily: 'var(--font-mono)' }}>⌘/</code>} />
+        </SettingsSection>
+
+        <SettingsSection id="notifications" title="Notifications" description="When the harness should ping you." icon={<Bell size={14} aria-hidden="true" />}>
+          <SettingsRow id="n-agent-finished" label="Agent run finished" control={<Switch defaultChecked />} />
+          <SettingsRow id="n-ci-failed" label="CI failed" control={<Switch defaultChecked />} />
+          <SettingsRow id="n-token-budget" label="Token budget 80%" control={<Switch defaultChecked />} />
+        </SettingsSection>
+
+        <SettingsSection id="storage" title="Storage" description="Where local data lives." icon={<Database size={14} aria-hidden="true" />}>
+          <SettingsRow id="store-path" label="Local store path" control={<code style={{ fontFamily: 'var(--font-mono)' }}>~/.bizar/store.db</code>} />
+          <SettingsRow id="store-clear" label="Clear local store" control={<Button variant="danger">Clear…</Button>} />
+        </SettingsSection>
+
+        <SettingsSection id="plugins" title="Plugins" description="Plugin registrations under `.claude/`." icon={<Plug size={14} aria-hidden="true" />}>
+          <SettingsRow id="plugins-count" label="Enabled plugins" control={<code style={{ fontFamily: 'var(--font-mono)' }}>1</code>} />
+        </SettingsSection>
+
+        <SettingsSection id="mcps" title="MCP servers" description="Model Context Protocol servers." icon={<Cpu size={14} aria-hidden="true" />}>
+          <SettingsRow id="mcps-count" label="Registered MCPs" control={<code style={{ fontFamily: 'var(--font-mono)' }}>3</code>} />
+        </SettingsSection>
+
+        <SettingsSection id="skills" title="Skills" description="Bizar skill packs." icon={<LibraryIcon size={14} aria-hidden="true" />}>
+          <SettingsRow id="skills-count" label="Loaded skills" control={<code style={{ fontFamily: 'var(--font-mono)' }}>18</code>} />
+        </SettingsSection>
+
+        <SettingsSection id="hooks" title="Hooks" description="Executable hook scripts." icon={<Wrench size={14} aria-hidden="true" />}>
+          <SettingsRow id="hooks-count" label="Registered hooks" control={<code style={{ fontFamily: 'var(--font-mono)' }}>5</code>} />
+        </SettingsSection>
+
+        <SettingsSection id="activity" title="Activity" description="Stream retention and export." icon={<Activity size={14} aria-hidden="true" />}>
+          <SettingsRow id="activity-retention" label="Retain last" control={<Select defaultValue="30d"><option>7 days</option><option>30 days</option><option>90 days</option></Select>} />
+        </SettingsSection>
+
+        <SettingsSection id="memory" title="Memory" description="Cross-session memo behavior." icon={<Brain size={14} aria-hidden="true" />}>
+          <SettingsRow id="memory-auto-commit" label="Auto-commit project memos" control={<Switch defaultChecked />} />
+        </SettingsSection>
+
+        <SettingsSection id="privacy" title="Privacy" description="What the harness sends." icon={<ShieldCheck size={14} aria-hidden="true" />}>
+          <SettingsRow
+            id="privacy-analytics"
+            label="Anonymous analytics"
+            control={<Switch checked={analytics} onCheckedChange={setAnalytics} />}
+          />
+          <SettingsRow
+            id="privacy-crash"
+            label="Crash reports"
+            control={<Switch checked={crashReports} onCheckedChange={setCrashReports} />}
+          />
+        </SettingsSection>
+
+        <SettingsSection id="advanced" title="Advanced" description="Power-user toggles." icon={<SettingsIcon size={14} aria-hidden="true" />}>
+          <SettingsRow
+            id="advanced-reduced-motion"
+            label="Reduce motion"
+            description="Disable non-essential transitions."
+            control={<Switch checked={reducedMotion} onCheckedChange={setReducedMotion} />}
+          />
+          <SettingsRow
+            id="advanced-debug"
+            label="Debug overlay"
+            description="Show agent + tool call traces in the topbar."
+            control={<Switch />}
+          />
+        </SettingsSection>
+      </Stack>
+    </Grid>
+    </div>
+  );
+}

package/bizar-dash/src/web/v8/views/Tasks/CommandPalettePlaceholder.tsx

@@ -0,0 +1,106 @@
+import { useEffect } from 'react';
+import { Portal } from '../../ui/primitives/Portal.js';
+import { Box } from '../../ui/primitives/Box.js';
+import { Stack } from '../../ui/primitives/Stack.js';
+import { Search } from 'lucide-react';
+
+/**
+ * CommandPalettePlaceholder — Sprint S1 stand-in for the Cmd+K palette.
+ * Real palette (cmdk) ships in Sprint S4.
+ *
+ * For now: a simple modal with an input. Closes on Escape and on click
+ * outside the panel.
+ */
+export interface CommandPalettePlaceholderProps {
+  onClose: () => void;
+}
+
+export function CommandPalettePlaceholder({ onClose }: CommandPalettePlaceholderProps): JSX.Element {
+  useEffect(() => {
+    function onKey(e: KeyboardEvent): void {
+      if (e.key === 'Escape') onClose();
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  return (
+    <Portal>
+      <Box
+        role="dialog"
+        aria-label="Command palette"
+        aria-modal="true"
+        onClick={onClose}
+        style={{
+          position: 'fixed',
+          inset: 0,
+          background: 'oklch(0 0 0 / 0.40)',
+          display: 'flex',
+          alignItems: 'flex-start',
+          justifyContent: 'center',
+          paddingTop: '15vh',
+          zIndex: 'var(--z-modal)',
+        }}
+      >
+        <Box
+          onClick={(e) => e.stopPropagation()}
+          style={{
+            width: 640,
+            maxWidth: 'calc(100vw - 32px)',
+            background: 'var(--surface-popover)',
+            border: '1px solid var(--border)',
+            borderRadius: 'var(--radius-lg)',
+            boxShadow: 'var(--shadow-4)',
+            overflow: 'hidden',
+          }}
+        >
+          <Stack gap={0}>
+            <Box
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 'var(--space-2)',
+                padding: 'var(--space-3) var(--space-4)',
+                borderBottom: '1px solid var(--border)',
+              }}
+            >
+              <Search size={16} aria-hidden="true" style={{ color: 'var(--fg-muted)' }} />
+              <input
+                autoFocus
+                placeholder="Type a command, page, or setting…"
+                style={{
+                  flex: 1,
+                  background: 'transparent',
+                  border: 0,
+                  outline: 0,
+                  fontSize: 'var(--fs-14)',
+                  color: 'var(--fg)',
+                }}
+              />
+              <Box
+                as="kbd"
+                style={{
+                  fontFamily: 'var(--font-mono)',
+                  fontSize: 'var(--fs-12)',
+                  color: 'var(--fg-muted)',
+                }}
+              >
+                esc
+              </Box>
+            </Box>
+            <Box
+              style={{
+                padding: 'var(--space-6) var(--space-4)',
+                color: 'var(--fg-muted)',
+                fontSize: 'var(--fs-13)',
+                textAlign: 'center',
+              }}
+            >
+              Command palette (cmdk) ships in Sprint S4.
+            </Box>
+          </Stack>
+        </Box>
+      </Box>
+    </Portal>
+  );
+}

package/bizar-dash/src/web/v8/views/Tasks/TasksKanbanPlaceholder.tsx

@@ -0,0 +1,62 @@
+import { Stack } from '../../ui/primitives/Stack.js';
+import { Inline } from '../../ui/primitives/Inline.js';
+import { Box } from '../../ui/primitives/Box.js';
+import { CheckSquare } from 'lucide-react';
+
+/**
+ * TasksKanbanPlaceholder — Sprint S1 stand-in for the Tasks / Kanban view.
+ *
+ * Full Kanban surface (Sprint S5) replaces this. For F-043 (Foundation)
+ * this exists only to prove the shell renders and the route works.
+ */
+export function TasksKanbanPlaceholder(): JSX.Element {
+  return (
+    <Stack gap={4}>
+      <Inline align="center" gap={3}>
+        <CheckSquare size={20} aria-hidden="true" />
+        <h1 style={{ fontSize: 'var(--fs-24)', fontWeight: 600 }}>Tasks › Kanban</h1>
+        <Box
+          style={{
+            fontSize: 'var(--fs-12)',
+            color: 'var(--fg-muted)',
+            padding: '2px 8px',
+            background: 'var(--surface-1)',
+            borderRadius: 'var(--radius-pill)',
+          }}
+        >
+          47
+        </Box>
+      </Inline>
+
+      <Box
+        style={{
+          fontSize: 'var(--fs-13)',
+          color: 'var(--fg-muted)',
+        }}
+      >
+        Kanban board surface ships in Sprint S5. The shell, tokens, primitives,
+        and theme system are live and working.
+      </Box>
+
+      <Box
+        style={{
+          padding: 'var(--space-6)',
+          background: 'var(--surface-1)',
+          border: '1px solid var(--border)',
+          borderRadius: 'var(--radius)',
+        }}
+      >
+        <Stack gap={2}>
+          <strong style={{ fontSize: 'var(--fs-14)' }}>Foundation milestone (F-043) ✓</strong>
+          <ul style={{ paddingLeft: 'var(--space-4)', color: 'var(--fg-muted)', fontSize: 'var(--fs-13)' }}>
+            <li>tokens.css — light + dark + system</li>
+            <li>reset.css + globals.css</li>
+            <li>10 primitives (Box, Stack, Inline, Cluster, Grid, Center, Separator, ScrollArea, Portal, VisuallyHidden)</li>
+            <li>ThemeProvider + DensityProvider + ThemeToggle</li>
+            <li>Topbar, Sidebar (collapsible), AppShell, StatusBar</li>
+          </ul>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}

package/bizar-dash/src/web/v8/views/Tasks/TasksView.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { Stack } from '../../ui/primitives/Stack.js';
+import { ViewHeader } from '../../ui/data/ViewHeader.js';
+import { KanbanBoard } from '../../ui/kanban/KanbanBoard.js';
+import { KanbanColumn, type KanbanColumnData } from '../../ui/kanban/KanbanColumn.js';
+import { KanbanCard, type KanbanCardData } from '../../ui/kanban/KanbanCard.js';
+
+/**
+ * TasksView — the v8 Kanban centerpiece (PLAN.md "Tasks page").
+ *
+ * The card `id` encodes its column (`<columnId>::<cardId>`) so dnd-kit
+ * can resolve drop targets. The visible mapping is held in local state.
+ */
+
+interface CardWithCol extends KanbanCardData {
+  columnId: string;
+}
+
+const COLUMNS: KanbanColumnData[] = [
+  { id: 'backlog', title: 'Backlog', accentTone: 'neutral' },
+  { id: 'todo', title: 'To do', accentTone: 'info' },
+  { id: 'in-progress', title: 'In progress', accentTone: 'accent', wipLimit: 5 },
+  { id: 'review', title: 'In review', accentTone: 'warning' },
+  { id: 'done', title: 'Done', accentTone: 'success' },
+];
+
+const INITIAL_CARDS: CardWithCol[] = [
+  { id: 't1', columnId: 'in-progress', title: 'Wire TanStack Router in v8 App', priority: 'high', branch: 'feat/router', due: 'Today', comments: 3 },
+  { id: 't2', columnId: 'todo', title: 'Add WebSocket layer for live activity', priority: 'medium', branch: 'feat/ws', due: 'Fri', comments: 1 },
+  { id: 't3', columnId: 'review', title: 'Refactor ActivityFeed empty state', priority: 'low', branch: 'fix/activity', comments: 0 },
+  { id: 't4', columnId: 'backlog', title: 'Polish Goals page legend', priority: 'low' },
+  { id: 't5', columnId: 'done', title: 'Wire command palette at app level', priority: 'urgent', branch: 'feat/palette', due: 'Yesterday', comments: 7 },
+];
+
+function cardToId(c: CardWithCol): string {
+  return `${c.columnId}::${c.id}`;
+}
+
+export function TasksView(): JSX.Element {
+  const [cards, setCards] = useState<CardWithCol[]>(INITIAL_CARDS);
+  return (
+    <Stack gap={4}>
+      <ViewHeader
+        title="Tasks"
+        description="Drag cards across columns. Right-click for actions."
+      />
+      <KanbanBoard
+        columns={COLUMNS}
+        onCardMove={(cardId, from, to) => {
+          setCards((prev) =>
+            prev.map((c) =>
+              cardToId(c) === cardId ? { ...c, columnId: to } : c,
+            ),
+          );
+          // The onCardMove callback fires only when the column actually
+          // changed; we use this purely for the side effect of advancing
+          // the visible mapping.
+          void from;
+        }}
+      >
+        {COLUMNS.map((col) => {
+          const inColumn = cards.filter((c) => c.columnId === col.id);
+          return (
+            <KanbanColumn key={col.id} column={{ ...col, count: inColumn.length }}>
+              {inColumn.map((card) => (
+                <KanbanCard key={cardToId(card)} card={card} />
+              ))}
+            </KanbanColumn>
+          );
+        })}
+      </KanbanBoard>
+    </Stack>
+  );
+}

package/bizar-dash/src/web/v8/vite-env.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  /**
+   * Build SHA injected at vite-build time via `define` in vite.config.ts.
+   * Falls back to the literal 'dev' when running `vite` in dev mode or
+   * when BIZAR_BUILD_SHA is unset. The Sidebar footer reads this to
+   * annotate the running build.
+   */
+  readonly VITE_BUILD_SHA: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/bizar-dash/src/web/{mobile.html → v8.html}

@@ -2,11 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="theme-color" content="#8b5cf6" />
-    <title>Bizar</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bizar Dashboard · v8 (preview)</title>
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🪩</text></svg>" />
     <link rel="preconnect" href="https://rsms.me/" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -15,6 +12,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/mobile.tsx"></script>
+    <script type="module" src="/v8/main.tsx"></script>
   </body>
-</html>
+</html>

package/bizar-dash/tests/setup.ts

@@ -13,6 +13,23 @@ if (typeof globalThis.ResizeObserver === 'undefined') {
   } as unknown as typeof ResizeObserver;
 }
 
+// jsdom doesn't ship IntersectionObserver either; SettingsView uses it
+// to sync the left-rail highlight with scroll position. Stub so the
+// effect's `new IntersectionObserver(...)` doesn't throw.
+if (typeof globalThis.IntersectionObserver === 'undefined') {
+  globalThis.IntersectionObserver = class {
+    readonly root: Element | null = null;
+    readonly rootMargin = '';
+    readonly thresholds: ReadonlyArray<number> = [];
+    observe(): void {}
+    unobserve(): void {}
+    disconnect(): void {}
+    takeRecords(): IntersectionObserverEntry[] {
+      return [];
+    }
+  } as unknown as typeof IntersectionObserver;
+}
+
 // Similarly for matchMedia — used by some component libs that the
 // dashboard pulls in. jsdom ships an empty stub but it lacks the
 // addEventListener/removeEventListener pair that React 18 expects.
@@ -32,6 +49,15 @@ if (typeof window !== 'undefined' && !window.matchMedia) {
   });
 }
 
+// jsdom does not implement Element#scrollIntoView, but `cmdk` calls it on
+// the highlighted item during keyboard navigation. Stub a no-op so tests
+// that mount <Dialog><CommandPalette/></Dialog> don't throw.
+if (typeof Element !== 'undefined' && !Element.prototype.scrollIntoView) {
+  Element.prototype.scrollIntoView = function scrollIntoView(): void {
+    /* noop */
+  };
+}
+
 afterEach(() => {
   cleanup();
 });

package/bizar-dash/vite.config.ts

@@ -14,11 +14,35 @@ export default defineConfig({
     emptyOutDir: true,
     sourcemap: true,
     rollupOptions: {
+      // Single dashboard entry — v8. The legacy v7 (index.html) and v7
+      // mobile (mobile.html) entries were removed in the v8 cutover.
       input: {
-        main: resolve(__dirname, 'src/web/index.html'),
-        mobile: resolve(__dirname, 'src/web/mobile.html'),
+        main: resolve(__dirname, 'src/web/v8.html'),
+      },
+      // Code-split views so the initial bundle only ships what the
+      // Overview needs. Manual chunks are safe in v8 (no shared
+      // legacy state).
+      output: {
+        manualChunks(id) {
+          if (id.includes('/v8/views/')) return 'v8-views';
+          if (id.includes('node_modules/@dnd-kit')) return 'dnd-kit';
+          if (id.includes('node_modules/recharts')) return 'recharts';
+          if (id.includes('node_modules/cmdk')) return 'cmdk';
+          return undefined;
+        },
       },
     },
+    // Lift the chunk-size ceiling for code-split views: a single
+    // kanban view with dnd-kit + recharts is bigger than 500 kB
+    // unminified, but gzip shrinks it well under the warning line.
+    chunkSizeWarningLimit: 800,
+  },
+  define: {
+    // Surfaced via `import.meta.env.VITE_BUILD_SHA` so the sidebar
+    // footer can render the real git SHA instead of "build placeholder".
+    'import.meta.env.VITE_BUILD_SHA': JSON.stringify(
+      process.env['BIZAR_BUILD_SHA'] ?? 'dev',
+    ),
   },
   server: {
     port: 5174,