@polderlabs/bizar 7.0.4 → 8.0.0

package/bizar-dash/src/web/v8/__tests__/views.test.tsx

@@ -0,0 +1,112 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../ui/theme/ThemeProvider.js';
+import { DensityProvider } from '../ui/theme/DensityProvider.js';
+import { OverviewView } from '../views/Overview/OverviewView.js';
+import { TasksView } from '../views/Tasks/TasksView.js';
+import { GoalsView } from '../views/Goals/GoalsView.js';
+import { AgentsView } from '../views/Agents/AgentsView.js';
+import { ActivityView } from '../views/Activity/ActivityView.js';
+import { MemoryView } from '../views/Memory/MemoryView.js';
+import { LibrariesView } from '../views/Libraries/LibrariesView.js';
+import { SettingsView } from '../views/Settings/SettingsView.js';
+
+function Providers({ children }: { children: React.ReactNode }): JSX.Element {
+  return (
+    <ThemeProvider>
+      <DensityProvider>{children}</DensityProvider>
+    </ThemeProvider>
+  );
+}
+
+describe('OverviewView', () => {
+  it('renders stat tiles, recent activity, and needs-attention cards', () => {
+    render(<Providers><OverviewView /></Providers>);
+    expect(screen.getByRole('heading', { level: 1, name: /overview/i })).toBeInTheDocument();
+    expect(screen.getByText(/Active tasks/i)).toBeInTheDocument();
+    expect(screen.getByText(/Goals on track/i)).toBeInTheDocument();
+    expect(screen.getByText(/Recent activity/i)).toBeInTheDocument();
+    expect(screen.getByText(/Needs attention/i)).toBeInTheDocument();
+  });
+});
+
+describe('TasksView', () => {
+  it('renders the kanban columns with sample cards', () => {
+    render(<Providers><TasksView /></Providers>);
+    expect(screen.getByRole('heading', { level: 1, name: /tasks/i })).toBeInTheDocument();
+    expect(screen.getByText(/Backlog/i)).toBeInTheDocument();
+    expect(screen.getByText(/To do/i)).toBeInTheDocument();
+    expect(screen.getByText(/In progress/i)).toBeInTheDocument();
+    expect(screen.getByText(/Wire TanStack Router in v8 App/i)).toBeInTheDocument();
+  });
+});
+
+describe('GoalsView', () => {
+  it('renders goals and key results', () => {
+    render(<Providers><GoalsView /></Providers>);
+    expect(screen.getByRole('heading', { level: 1, name: /goals/i })).toBeInTheDocument();
+    expect(screen.getByText(/Ship v8 dashboard/i)).toBeInTheDocument();
+    expect(screen.getByText(/Cut S9 polish in half/i)).toBeInTheDocument();
+    expect(screen.getByText(/Key results — current focus/i)).toBeInTheDocument();
+    expect(screen.getByText(/Publish Plan.md with 17 sections/i)).toBeInTheDocument();
+  });
+});
+
+describe('AgentsView', () => {
+  it('renders the agent roster and a featured activity feed', () => {
+    render(<Providers><AgentsView /></Providers>);
+    expect(screen.getByRole('heading', { level: 1, name: /agents/i })).toBeInTheDocument();
+    expect(screen.getByText(/Lead researcher/i)).toBeInTheDocument();
+    expect(screen.getByText(/Frontend specialist/i)).toBeInTheDocument();
+    expect(screen.getByText(/Activity — Atlas/i)).toBeInTheDocument();
+  });
+});
+
+describe('ActivityView', () => {
+  it('renders the full event history', () => {
+    render(<Providers><ActivityView /></Providers>);
+    expect(screen.getByRole('heading', { level: 1, name: /activity/i })).toBeInTheDocument();
+    expect(screen.getByText(/Merged PR #42 — OKLch token system/i)).toBeInTheDocument();
+  });
+});
+
+describe('MemoryView', () => {
+  it('renders memos with project and global scopes', () => {
+    render(<Providers><MemoryView /></Providers>);
+    expect(screen.getByRole('heading', { level: 1, name: /memory/i })).toBeInTheDocument();
+    expect(screen.getAllByText(/^Project$/i).length).toBeGreaterThan(0);
+    expect(screen.getAllByText(/^Global$/i).length).toBeGreaterThan(0);
+  });
+});
+
+describe('LibrariesView (Skills)', () => {
+  const items = [
+    { id: 'frigg', name: 'Frigg', slug: 'frigg', status: 'enabled' as const, description: 'Read-only codebase Q&A.' },
+    { id: 'mimir', name: 'Mimir', slug: 'mimir', status: 'enabled' as const, description: 'Deep codebase research.' },
+  ];
+
+  it('renders the title and library items', () => {
+    const { container } = render(<Providers><LibrariesView kind="skills" items={items} /></Providers>);
+    expect(screen.getByRole('heading', { level: 1, name: /skills/i })).toBeInTheDocument();
+    expect(container.textContent).toContain('Frigg');
+    expect(container.textContent).toContain('Read-only codebase Q&A.');
+  });
+});
+
+describe('SettingsView', () => {
+  it('renders the 16 settings sections', () => {
+    render(<Providers><SettingsView /></Providers>);
+    expect(screen.getByRole('heading', { level: 2, name: /^General$/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 2, name: /^Theme$/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 2, name: /^Density$/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 2, name: /^Privacy$/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 2, name: /^Advanced$/i })).toBeInTheDocument();
+  });
+
+  it('shows the settings nav with the active section', () => {
+    render(<Providers><SettingsView /></Providers>);
+    const navButtons = screen.getAllByRole('button');
+    const generalBtn = navButtons.find((b) => b.textContent === 'General');
+    expect(generalBtn?.getAttribute('aria-current')).toBe('true');
+  });
+});

package/bizar-dash/src/web/v8/main.tsx

@@ -0,0 +1,28 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { ThemeProvider } from './ui/theme/ThemeProvider.js';
+import { DensityProvider } from './ui/theme/DensityProvider.js';
+import { App } from './App.js';
+import './ui/styles/globals.css';
+
+/**
+ * v8 entry — mounts the React 18 root with the theme + density providers
+ * wrapping the App. The root element id is `root`; the v7 dashboard mounts
+ * on `root` as well, so the v8 entry is wired from a separate route via
+ * the dashboard server (see PLAN.md §4 for the v8 → v7 migration plan).
+ */
+const container = document.getElementById('root');
+if (container === null) {
+  throw new Error('v8 mount target #root not found in DOM.');
+}
+
+const root = createRoot(container);
+root.render(
+  <StrictMode>
+    <ThemeProvider>
+      <DensityProvider>
+        <App />
+      </DensityProvider>
+    </ThemeProvider>
+  </StrictMode>,
+);

package/bizar-dash/src/web/v8/shell/AppShell.tsx

@@ -0,0 +1,90 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Box } from '../ui/primitives/Box.js';
+import { Topbar } from './Topbar.js';
+import { Sidebar } from './Sidebar.js';
+
+/**
+ * AppShell — the v8 layout skeleton.
+ *
+ *       ┌──────────────────────────────────────────────────┐
+ *       │  Topbar (56px, sticky)                           │
+ *       ├────────────┬─────────────────────────────────────┤
+ *       │  Sidebar   │  SidebarInset (main content)         │
+ *       │  260px     │                                     │
+ *       │            │                                     │
+ *       │            │                                     │
+ *       └────────────┴─────────────────────────────────────┘
+ *
+ * The SidebarInset caps at max-width 1440px (DESIGN.md §7) and centers
+ * itself, with 24px gutters on either side at >=1440px viewports.
+ *
+ * The ref forwarded from `App.tsx` lands on the `<main>` element so the
+ * caller can re-focus it when the route changes (and announce the new
+ * route to screen readers). `tabIndex={-1}` makes `<main>` focusable
+ * without putting it in the keyboard tab order.
+ */
+
+export interface AppShellProps {
+  topbar?: ReactNode;
+  sidebar?: ReactNode;
+  children?: ReactNode;
+}
+
+export const AppShell = forwardRef<HTMLElement, AppShellProps>(function AppShell(
+  { topbar, sidebar, children },
+  ref,
+) {
+  return (
+    <Box
+      className="v8-app-shell"
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100vh',
+        background: 'var(--bg)',
+        color: 'var(--fg)',
+      }}
+    >
+      {topbar ?? <Topbar />}
+
+      <Box
+        className="v8-app-shell-body"
+        style={{
+          display: 'flex',
+          flex: 1,
+          minHeight: 0, // critical: lets the body actually scroll instead of expanding
+        }}
+      >
+        {sidebar ?? <Sidebar />}
+
+        <Box
+          as="main"
+          ref={ref}
+          id="main"
+          tabIndex={-1}
+          className="v8-sidebar-inset"
+          role="main"
+          style={{
+            flex: 1,
+            minWidth: 0,
+            overflow: 'auto',
+            background: 'var(--bg)',
+            outline: 'none', // visible focus ring handled by :focus-visible
+          }}
+        >
+          <Box
+            className="v8-sidebar-inset-inner"
+            style={{
+              maxWidth: 1440,
+              margin: '0 auto',
+              padding: 'var(--space-6) var(--space-6)',
+              width: '100%',
+            }}
+          >
+            {children}
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+});

package/bizar-dash/src/web/v8/shell/PageSkeleton.tsx

@@ -0,0 +1,29 @@
+import { Box } from '../ui/primitives/Box.js';
+import { Skeleton } from '../ui/feedback/Skeleton.js';
+import { Stack } from '../ui/primitives/Stack.js';
+
+/**
+ * PageSkeleton — a non-blocking fallback for the lazy Router Suspense
+ * boundary. Renders five skeleton rows that approximate the visual
+ * weight of a typical view header + the first body row.
+ */
+export function PageSkeleton(): JSX.Element {
+  return (
+    <Box
+      role="status"
+      aria-busy="true"
+      aria-live="polite"
+      style={{ padding: 'var(--space-5) var(--space-6)' }}
+    >
+      <Stack gap={5}>
+        <Skeleton height={32} width="40%" />
+        <Skeleton height={16} width="65%" />
+        <Stack gap={2}>
+          <Skeleton height={14} width="100%" />
+          <Skeleton height={14} width="92%" />
+          <Skeleton height={14} width="78%" />
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}

package/bizar-dash/src/web/v8/shell/Sidebar.tsx

@@ -0,0 +1,361 @@
+import { useState, type ReactNode } from 'react';
+import { Box } from '../ui/primitives/Box.js';
+import { Stack } from '../ui/primitives/Stack.js';
+import { Separator } from '../ui/primitives/Separator.js';
+import { ScrollArea } from '../ui/primitives/ScrollArea.js';
+import {
+  Activity,
+  Bot,
+  CheckSquare,
+  ChevronsLeft,
+  ChevronsRight,
+  Goal,
+  Layers,
+  Library,
+  Settings as SettingsIcon,
+  Target,
+  Cpu,
+  type LucideIcon,
+} from 'lucide-react';
+import { cx } from '../ui/utils/cx.js';
+
+/**
+ * Sidebar — the 260px collapsible navigation rail.
+ *
+ * Layout:
+ *   ┌─ WORKSPACE ───────────┐
+ *   │  Overview             │
+ *   │  Tasks           47   │ ◀ active item gets accent-soft bg
+ *   │  Goals            3   │
+ *   ├─ OPERATIONS ──────────┤
+ *   │  Agents          8/16 │
+ *   │  Activity   ●  live   │
+ *   │  Memory               │
+ *   ├─ LIBRARIES ──────────┤
+ *   │  Skills          18   │
+ *   │  MCPs             3   │
+ *   │  Hooks             5  │
+ *   ├─ SYSTEM ──────────────┤
+ *   │  Settings             │
+ *   └───────────────────────┘
+ *   ◉ online · v8.0.0
+ *
+ * Collapsed (60px) state keeps only icons + section dividers.
+ * Footer collapses to just the status dot.
+ */
+
+export interface SidebarItem {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+  /** Optional count badge (e.g. "47"). */
+  count?: number | string;
+  /** Active visual state. */
+  active?: boolean;
+  /** Indicates the item has live activity (pulsing dot). */
+  live?: boolean;
+  href?: string;
+}
+
+export interface SidebarSection {
+  id: string;
+  label: string;
+  items: SidebarItem[];
+}
+
+export interface SidebarProps {
+  sections?: SidebarSection[];
+  /** Default sections if `sections` is omitted — keeps the shell self-contained for F-043. */
+  defaultSections?: boolean;
+  /** Footer content (e.g. version + build hash). */
+  footer?: ReactNode;
+  /** Default collapsed state. Persisted to localStorage. */
+  defaultCollapsed?: boolean;
+  /**
+   * Fires when the user activates a sidebar item (click, Enter, Space).
+   * The Sidebar takes no opinion on what `id` does — `App.tsx` wires it
+   * to `setActiveId`. `href` is not navigated (we preventDefault); use
+   * a real `<a>` only if you want browser navigation.
+   */
+  onItemSelect?: (id: string) => void;
+  /**
+   * Override which item is currently active. If omitted, each item's
+   * `active` flag is used as-is (set externally by the consumer).
+   */
+  activeId?: string;
+  className?: string;
+}
+
+const STORAGE_KEY = 'bizar:sidebar:collapsed';
+
+const DEFAULT_SECTIONS: SidebarSection[] = [
+  {
+    id: 'workspace',
+    label: 'Workspace',
+    items: [
+      { id: 'overview', label: 'Overview', icon: Layers },
+      { id: 'tasks', label: 'Tasks', icon: CheckSquare, count: 47, active: true },
+      { id: 'goals', label: 'Goals', icon: Target, count: 3 },
+    ],
+  },
+  {
+    id: 'operations',
+    label: 'Operations',
+    items: [
+      { id: 'agents', label: 'Agents', icon: Bot, count: '8/16' },
+      { id: 'activity', label: 'Activity', icon: Activity, live: true },
+      { id: 'memory', label: 'Memory', icon: Cpu },
+    ],
+  },
+  {
+    id: 'libraries',
+    label: 'Libraries',
+    items: [
+      { id: 'skills', label: 'Skills', icon: Goal, count: 18 },
+      { id: 'mcps', label: 'MCPs', icon: Library, count: 3 },
+      { id: 'hooks', label: 'Hooks', icon: Layers, count: 5 },
+    ],
+  },
+  {
+    id: 'system',
+    label: 'System',
+    items: [{ id: 'settings', label: 'Settings', icon: SettingsIcon }],
+  },
+];
+
+export function Sidebar({
+  sections,
+  defaultSections = true,
+  footer,
+  defaultCollapsed,
+  onItemSelect,
+  activeId,
+  className,
+}: SidebarProps): JSX.Element {
+  const initial =
+    defaultCollapsed ??
+    (typeof window !== 'undefined' && window.localStorage.getItem(STORAGE_KEY) === '1');
+  const [collapsed, setCollapsed] = useState<boolean>(initial);
+
+  const data = sections ?? (defaultSections ? DEFAULT_SECTIONS : []);
+  const width = collapsed ? 'var(--sidebar-w-collapsed)' : 'var(--sidebar-w)';
+
+  // Resolve active state: prefer the consumer-supplied `activeId` (state
+  // driven); fall back to each item's `active` flag (default sections).
+  const isActive = (id: string): boolean =>
+    activeId !== undefined ? id === activeId : false;
+
+  return (
+    <Box
+      as="aside"
+      role="navigation"
+      aria-label="Primary navigation"
+      className={cx('v8-sidebar', className)}
+      style={{
+        width,
+        flexShrink: 0,
+        height: '100%',
+        background: 'var(--sidebar-bg)',
+        color: 'var(--sidebar-fg)',
+        borderRight: '1px solid var(--sidebar-border)',
+        display: 'flex',
+        flexDirection: 'column',
+        transition: 'width var(--motion-base) var(--ease-out)',
+      }}
+    >
+      <ScrollArea style={{ flex: 1, padding: 'var(--space-3) var(--space-2)' }}>
+        <Stack gap={4}>
+          {data.map((section) => (
+            <SidebarSectionView
+              key={section.id}
+              section={section}
+              collapsed={collapsed}
+              onItemSelect={onItemSelect}
+              isItemActive={isActive}
+            />
+          ))}
+        </Stack>
+      </ScrollArea>
+
+      <Separator />
+
+      <Box
+        style={{
+          padding: 'var(--space-3) var(--space-3)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: collapsed ? 'center' : 'space-between',
+          gap: 'var(--space-2)',
+        }}
+      >
+        {collapsed ? (
+          <Box
+            aria-hidden="true"
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: 'var(--radius-pill)',
+              background: 'var(--success)',
+            }}
+          />
+        ) : (
+          <>
+            <Box style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+              <div>◉ online · v8.0.0</div>
+              <div
+                style={{ fontFamily: 'var(--font-mono)' }}
+                title={`build ${import.meta.env.VITE_BUILD_SHA}`}
+              >
+                build {import.meta.env.VITE_BUILD_SHA}
+              </div>
+            </Box>
+            <button
+              type="button"
+              onClick={() => {
+                setCollapsed((c) => {
+                  const next = !c;
+                  if (typeof window !== 'undefined') {
+                    window.localStorage.setItem(STORAGE_KEY, next ? '1' : '0');
+                  }
+                  return next;
+                });
+              }}
+              aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+              className="v8-sidebar-collapse"
+              style={{
+                width: 24,
+                height: 24,
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: 'var(--radius-sm)',
+                color: 'var(--fg-muted)',
+                background: 'transparent',
+                border: '1px solid var(--border)',
+              }}
+            >
+              {collapsed ? <ChevronsRight size={14} /> : <ChevronsLeft size={14} />}
+            </button>
+          </>
+        )}
+      </Box>
+
+      {!collapsed && footer}
+    </Box>
+  );
+}
+
+function SidebarSectionView({
+  section,
+  collapsed,
+  onItemSelect,
+  isItemActive,
+}: {
+  section: SidebarSection;
+  collapsed: boolean;
+  onItemSelect?: (id: string) => void;
+  isItemActive: (id: string) => boolean;
+}): JSX.Element {
+  return (
+    <Stack gap={1}>
+      {!collapsed && (
+        <Box
+          style={{
+            padding: 'var(--space-1) var(--space-3)',
+            fontSize: 'var(--fs-12)',
+            fontWeight: 600,
+            color: 'var(--fg-subtle)',
+            letterSpacing: 'var(--tracking-wide)',
+            textTransform: 'uppercase',
+          }}
+        >
+          {section.label}
+        </Box>
+      )}
+      {section.items.map((item) => (
+        <SidebarItemView
+          key={item.id}
+          item={item}
+          collapsed={collapsed}
+          active={isItemActive(item.id)}
+          onSelect={onItemSelect}
+        />
+      ))}
+    </Stack>
+  );
+}
+
+function SidebarItemView({
+  item,
+  collapsed,
+  active,
+  onSelect,
+}: {
+  item: SidebarItem;
+  collapsed: boolean;
+  active: boolean;
+  onSelect?: (id: string) => void;
+}): JSX.Element {
+  const Icon = item.icon;
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect?.(item.id)}
+      aria-current={active ? 'page' : undefined}
+      aria-label={item.label}
+      title={collapsed ? item.label : undefined}
+      data-sidebar-item={item.id}
+      className={cx('v8-sidebar-item', active && 'is-active')}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'var(--space-2)',
+        padding: collapsed ? 'var(--space-2)' : 'var(--space-2) var(--space-3)',
+        borderRadius: 'var(--radius-sm)',
+        fontSize: 'var(--fs-13)',
+        color: active ? 'var(--fg)' : 'var(--fg-muted)',
+        background: active ? 'var(--sidebar-hover)' : 'transparent',
+        fontWeight: active ? 500 : 400,
+        justifyContent: collapsed ? 'center' : 'flex-start',
+        minHeight: 32,
+        // DESIGN.md §7.3 — single permitted edge bar (active item only).
+        boxShadow: active ? 'inset 2px 0 0 0 var(--sidebar-accent)' : 'none',
+        border: 'none',
+        cursor: 'pointer',
+        textAlign: 'left',
+        transition: 'background var(--motion-fast) var(--ease-out)',
+      }}
+    >
+      <Icon size={16} aria-hidden="true" />
+      {!collapsed && (
+        <>
+          <span style={{ flex: 1, minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {item.label}
+          </span>
+          {item.live && (
+            <Box
+              aria-hidden="true"
+              style={{
+                width: 6,
+                height: 6,
+                borderRadius: 'var(--radius-pill)',
+                background: 'var(--success)',
+              }}
+            />
+          )}
+          {item.count !== undefined && (
+            <Box
+              style={{
+                fontSize: 'var(--fs-12)',
+                color: 'var(--fg-subtle)',
+                fontVariantNumeric: 'tabular-nums',
+              }}
+            >
+              {item.count}
+            </Box>
+          )}
+        </>
+      )}
+    </button>
+  );
+}

package/bizar-dash/src/web/v8/shell/StatusBar.tsx

@@ -0,0 +1,63 @@
+import { type ReactNode } from 'react';
+import { Box } from '../ui/primitives/Box.js';
+import { Inline } from '../ui/primitives/Inline.js';
+
+/**
+ * StatusBar — bottom 32px alert bar. Only visible when there is an active alert.
+ *
+ * Color comes from the alert `tone`. Default: warning yellow.
+ *
+ * Wired to AlertManager in Sprint S9 (Polish). For F-043 this is rendered
+ * as a no-op placeholder so the shell composes correctly.
+ */
+
+export type StatusBarTone = 'info' | 'success' | 'warning' | 'danger';
+
+export interface StatusBarProps {
+  tone?: StatusBarTone;
+  children?: ReactNode;
+  /** Optional right-aligned actions (e.g. "Dismiss", "View"). */
+  actions?: ReactNode;
+}
+
+const TONE_BG: Record<StatusBarTone, string> = {
+  info: 'oklch(from var(--info) l c h / 0.10)',
+  success: 'oklch(from var(--success) l c h / 0.10)',
+  warning: 'oklch(from var(--warning) l c h / 0.10)',
+  danger: 'oklch(from var(--danger) l c h / 0.10)',
+};
+
+const TONE_BORDER: Record<StatusBarTone, string> = {
+  info: 'var(--info)',
+  success: 'var(--success)',
+  warning: 'var(--warning)',
+  danger: 'var(--danger)',
+};
+
+export function StatusBar({ tone = 'warning', children, actions }: StatusBarProps): JSX.Element {
+  return (
+    <Box
+      role="status"
+      aria-live="polite"
+      className="v8-status-bar"
+      style={{
+        height: 'var(--statusbar-h)',
+        flexShrink: 0,
+        background: TONE_BG[tone],
+        borderTop: `1px solid ${TONE_BORDER[tone]}`,
+        paddingLeft: 'var(--space-4)',
+        paddingRight: 'var(--space-4)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        fontSize: 'var(--fs-12)',
+        color: 'var(--fg-muted)',
+      }}
+    >
+      <Inline align="center" gap={2}>
+        {children}
+      </Inline>
+      {actions && <Inline align="center" gap={2}>{actions}</Inline>}
+    </Box>
+  );
+}