@polderlabs/bizar 7.0.4 → 8.1.0

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,165 @@
+import { useCallback, 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, useKanbanCardSortable, type KanbanCardData } from '../../ui/kanban/KanbanCard.js';
+import { Skeleton } from '../../ui/feedback/Skeleton.js';
+import { useFetch } from '../../data/useFetch.js';
+import { useWsMessage } from '../../data/useWebSocket.js';
+import { fetchJson } from '../../data/fetcher.js';
+import type { Task, WsMessage } from '../../data/types.js';
+
+type TaskStatus = 'queued' | 'doing' | 'blocked' | 'done' | 'archived';
+
+/**
+ * TasksView — Sprint S10. Pulls `/api/tasks` and maps server statuses
+ * to v8 kanban columns. Drag a card between columns → PATCH
+ * /api/tasks/:id/status. Live updates via `tasks:change`.
+ */
+
+const COLUMNS: KanbanColumnData[] = [
+  { id: 'queued', title: 'Backlog', accentTone: 'neutral' },
+  { id: 'doing', title: 'In progress', accentTone: 'accent', wipLimit: 5 },
+  { id: 'blocked', title: 'In review', accentTone: 'warning' },
+  { id: 'done', title: 'Done', accentTone: 'success' },
+  { id: 'archived', title: 'Archived', accentTone: 'neutral' },
+];
+
+const PRIORITY_MAP: Record<string, KanbanCardData['priority']> = {
+  low: 'low',
+  medium: 'medium',
+  high: 'high',
+  urgent: 'urgent',
+};
+
+interface Card extends KanbanCardData {
+  taskId: string;
+  columnId: TaskStatus;
+}
+
+function taskToCard(t: Task): Card {
+  return {
+    id: t.id,
+    taskId: t.id,
+    columnId: statusToColumn(t.status),
+    title: t.title,
+    priority: PRIORITY_MAP[t.priority || 'medium'] || 'medium',
+    branch: t.branch,
+    due: t.due,
+    comments: t.comments,
+    attachments: t.attachments,
+  };
+}
+
+function statusToColumn(status?: TaskStatus): TaskStatus {
+  switch (status) {
+    case 'queued':
+    case 'doing':
+    case 'blocked':
+    case 'done':
+    case 'archived':
+      return status;
+    default:
+      return 'queued';
+  }
+}
+
+/**
+ * SortableCard — wraps a single KanbanCard with dnd-kit's useSortable
+ * so KanbanBoard.onDragEnd can fire.
+ */
+function SortableCard({ card }: { card: Card }): JSX.Element {
+  const sortable = useKanbanCardSortable(card.id);
+  return (
+    <KanbanCard
+      card={card}
+      isDragging={sortable.isDragging}
+      dragHandleProps={{ ...sortable.attributes, ...sortable.listeners, ref: sortable.setNodeRef, style: sortable.style }}
+    />
+  );
+}
+
+export function TasksView(): JSX.Element {
+  const tasks = useFetch<{ tasks?: Task[]; count?: number }>('/api/tasks');
+  const [cards, setCards] = useState<Card[]>([]);
+  const [initialized, setInitialized] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Sync fetched list → local state.
+  if (tasks.data?.tasks && !initialized) {
+    setInitialized(true);
+    setCards(tasks.data.tasks.map(taskToCard));
+  }
+
+  const onWsChange = useCallback((msg: WsMessage) => {
+    if (msg.type !== 'tasks:change') return;
+    const t = msg.task as Task | undefined;
+    if (!t) return;
+    setCards((prev) => {
+      const idx = prev.findIndex((c) => c.taskId === t.id);
+      const card = taskToCard({ ...t, status: statusToColumn(t.status) });
+      if (idx === -1) return [...prev, card];
+      const copy = prev.slice();
+      copy[idx] = { ...copy[idx], ...card };
+      return copy;
+    });
+  }, []);
+  useWsMessage('tasks:change', onWsChange);
+
+  const onCardMove = useCallback(async (cardId: string, _from: string, to: string) => {
+    const card = cards.find((c) => c.taskId === cardId || c.id === cardId);
+    if (!card) return;
+    const nextStatus = statusToColumn(to as TaskStatus);
+    setCards((prev) =>
+      prev.map((c) => (c.taskId === cardId ? { ...c, columnId: nextStatus } : c)),
+    );
+    try {
+      await fetchJson(`/api/tasks/${encodeURIComponent(card.taskId)}/status`, {
+        method: 'PATCH',
+        body: { status: nextStatus },
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      // Roll back on failure.
+      setCards((prev) =>
+        prev.map((c) => (c.taskId === cardId ? { ...c, columnId: card.columnId } : c)),
+      );
+    }
+  }, [cards]);
+
+  const counts: Record<string, number> = {};
+  for (const c of cards) counts[c.columnId] = (counts[c.columnId] || 0) + 1;
+
+  return (
+    <Stack gap={4}>
+      <ViewHeader
+        title="Tasks"
+        description="Drag cards across columns. Right-click for actions."
+        actions={error ? <span style={{ color: 'var(--danger)' }}>{error}</span> : null}
+      />
+      {tasks.loading && cards.length === 0 ? (
+        <Stack gap={3}>
+          <Skeleton style={{ height: 120 }} />
+          <Skeleton style={{ height: 120 }} />
+        </Stack>
+      ) : (
+        <KanbanBoard columns={COLUMNS} onCardMove={onCardMove}>
+          {COLUMNS.map((col) => {
+            const inColumn = cards.filter((c) => c.columnId === col.id);
+            return (
+              <KanbanColumn
+                key={col.id}
+                column={{ ...col, count: counts[col.id] || 0 }}
+              >
+                {inColumn.map((card) => (
+                  <SortableCard key={card.id} 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/components/Button.test.tsx

@@ -1,10 +1,21 @@
+/**
+ * tests/components/Button.test.tsx
+ *
+ * v8 migration — Button test rewritten against the v8 API.
+ *
+ * v7 had CSS-class assertions (`btn-primary`, `btn-size-lg`, `btn-spinner`).
+ * v8 uses semantic attributes (`aria-busy="true"`, `data-*`) and class
+ * namespaced as `v8-btn--<variant>`. Assertions below target the v8
+ * semantic surface; class assertions kept where they directly verify
+ * the variant mapping.
+ */
+import { describe, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi } from 'vitest';
-import { Button } from '../../src/web/components/Button';
+import { Button } from '../../src/web/v8/ui/index.js';
 
-describe('Button', () => {
-  it('renders text', () => {
+describe('Button (v8)', () => {
+  it('renders text and exposes role=button', () => {
     render(<Button>Click me</Button>);
     expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
   });
@@ -22,20 +33,46 @@ describe('Button', () => {
     expect(screen.getByRole('button')).toBeDisabled();
   });
 
-  it('shows loading state and disables button', () => {
+  it('shows loading state, disables interaction, marks aria-busy', () => {
     render(<Button loading>Saving</Button>);
-    const btn = screen.getByRole('button');
+    const btn = screen.getByRole('button', { name: /saving/i });
     expect(btn).toBeDisabled();
-    expect(btn.querySelector('.btn-spinner')).toBeInTheDocument();
+    expect(btn).toHaveAttribute('aria-busy', 'true');
+  });
+
+  it('does not fire onClick while loading', async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    render(<Button loading onClick={onClick}>Saving</Button>);
+    await user.click(screen.getByRole('button'));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('applies variant class names (primary / secondary / ghost / danger / outline)', () => {
+    const variants = ['primary', 'secondary', 'ghost', 'danger', 'outline'] as const;
+    for (const v of variants) {
+      const { unmount } = render(<Button variant={v}>x</Button>);
+      expect(screen.getByRole('button')).toHaveClass(`v8-btn--${v}`);
+      unmount();
+    }
   });
 
-  it('applies variant classes', () => {
-    const { container } = render(<Button variant="primary">Primary</Button>);
-    expect(container.firstChild).toHaveClass('btn-primary');
+  it('applies size class names (sm / md / lg / icon)', () => {
+    const sizes = ['sm', 'md', 'lg', 'icon'] as const;
+    for (const s of sizes) {
+      const { unmount } = render(<Button size={s}>x</Button>);
+      expect(screen.getByRole('button')).toHaveClass(`v8-btn--${s}`);
+      unmount();
+    }
   });
 
-  it('applies size classes', () => {
-    const { container } = render(<Button size="lg">Large</Button>);
-    expect(container.firstChild).toHaveClass('btn-size-lg');
+  it('renders leftIcon and rightIcon', () => {
+    render(
+      <Button leftIcon={<span data-testid="li" />} rightIcon={<span data-testid="ri" />}>
+        X
+      </Button>,
+    );
+    expect(screen.getByTestId('li')).toBeInTheDocument();
+    expect(screen.getByTestId('ri')).toBeInTheDocument();
   });
-});
+});

package/bizar-dash/tests/components/Card.test.tsx

@@ -1,42 +1,59 @@
-import { render, screen } from '@testing-library/react';
+/**
+ * tests/components/Card.test.tsx
+ *
+ * v8 migration — Card test rewritten against the v8 API.
+ *
+ * v7 exported `Card / CardTitle / CardMeta` with `variant` strings.
+ * v8 exports `Card / CardHeader / CardBody / CardFooter` with the same
+ * variant set; `CardTitle` → `CardHeader title={...}`,
+ * `CardMeta` → `CardHeader description={...}`.
+ */
 import { describe, it, expect } from 'vitest';
-import { Card, CardTitle, CardMeta } from '../../src/web/components/Card';
+import { render, screen } from '@testing-library/react';
+import { Card, CardHeader, CardBody, CardFooter } from '../../src/web/v8/ui/index.js';
 
-describe('Card', () => {
+describe('Card (v8)', () => {
   it('renders children', () => {
     render(<Card>Hello</Card>);
     expect(screen.getByText('Hello')).toBeInTheDocument();
   });
 
-  it('has expected class name', () => {
+  it('has the v8 card base class', () => {
     const { container } = render(<Card>Test</Card>);
-    expect(container.firstChild).toHaveClass('card');
+    expect(container.firstChild).toHaveClass('v8-card');
   });
 
-  it('applies variant classes', () => {
-    const { container, rerender } = render(<Card variant="elevated">Test</Card>);
-    expect(container.firstChild).toHaveClass('card-elevated');
-
-    rerender(<Card variant="outlined">Test</Card>);
-    expect(container.firstChild).toHaveClass('card-outlined');
-
-    rerender(<Card variant="filled">Test</Card>);
-    expect(container.firstChild).toHaveClass('card-filled');
+  it('applies variant class names', () => {
+    const variants = ['default', 'elevated', 'ghost', 'outlined'] as const;
+    for (const v of variants) {
+      const { unmount } = render(<Card variant={v}>x</Card>);
+      expect(screen.getByText('x')).toHaveClass(`v8-card--${v}`);
+      unmount();
+    }
   });
 
-  it('renders CardTitle and CardMeta', () => {
+  it('renders CardHeader with title + description, and CardBody / CardFooter slots', () => {
     render(
       <Card>
-        <CardTitle>My Title</CardTitle>
-        <CardMeta>Meta info</CardMeta>
+        <CardHeader title="My Title" description="Meta info" />
+        <CardBody>Body content</CardBody>
+        <CardFooter>Footer</CardFooter>
       </Card>,
     );
     expect(screen.getByText('My Title')).toBeInTheDocument();
     expect(screen.getByText('Meta info')).toBeInTheDocument();
+    expect(screen.getByText('Body content')).toBeInTheDocument();
+    expect(screen.getByText('Footer')).toBeInTheDocument();
   });
 
-  it('sets interactive class when interactive prop is true', () => {
+  it('marks the card as interactive when interactive prop is true', () => {
     const { container } = render(<Card interactive>Clickable</Card>);
-    expect(container.firstChild).toHaveClass('card-interactive');
+    expect(container.firstChild).toHaveClass('is-interactive');
+  });
+
+  it('removes padding when flush prop is true', () => {
+    const { container } = render(<Card flush>Flush</Card>);
+    const el = container.firstChild as HTMLElement;
+    expect(el.style.padding).toBe('0px');
   });
-});
+});

package/bizar-dash/tests/components/Dialog.test.tsx

@@ -0,0 +1,80 @@
+/**
+ * tests/components/Dialog.test.tsx
+ *
+ * v8 migration — Modal test rewritten against the v8 Dialog API.
+ *
+ * v7 had a `ModalProvider` + `useModal()` imperative hook.
+ * v8 replaced that with Radix Dialog primitives: declarative
+ * `<Dialog><DialogTrigger/><DialogContent/></Dialog>`.
+ *
+ * The useModal hook has no v8 equivalent (declarative > imperative);
+ * its tests were absorbed here as direct Dialog assertions.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+import * as UiExports from '../../src/web/v8/ui/index.js';
+import { Dialog, DialogTrigger, DialogContent } from '../../src/web/v8/ui/index.js';
+
+function ControlledDialog({ open: openInit = false }: { open?: boolean }) {
+  const [open, setOpen] = useState(openInit);
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <button>Open</button>
+      </DialogTrigger>
+      <DialogContent title="Dialog">
+        <p>Content</p>
+        <DialogTrigger asChild>
+          <button onClick={() => setOpen(false)}>Close</button>
+        </DialogTrigger>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+describe('Dialog (v8)', () => {
+  it('does not render dialog content when closed', () => {
+    render(<ControlledDialog open={false} />);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(screen.getByText('Open')).toBeInTheDocument();
+  });
+
+  it('renders dialog content when open', () => {
+    render(<ControlledDialog open={true} />);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText('Dialog')).toBeInTheDocument();
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+
+  it('opens the dialog when the trigger is clicked', async () => {
+    const user = userEvent.setup();
+    render(<ControlledDialog />);
+    await user.click(screen.getByText('Open'));
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('closes the dialog when the trigger inside fires onOpenChange(false)', async () => {
+    const user = userEvent.setup();
+    render(<ControlledDialog open={true} />);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    await user.click(screen.getByText('Close'));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('exposes the dialog title via Radix Title (accessible name)', () => {
+    render(<ControlledDialog open={true} />);
+    const dialog = screen.getByRole('dialog');
+    expect(dialog).toHaveAccessibleName('Dialog');
+  });
+});
+
+describe('Dialog imperative surface (v8)', () => {
+  it('keeps Radix Dialog as the only modal mechanism (no useModal hook needed)', () => {
+    // Sanity check: v8 intentionally does not export a `useModal` hook.
+    // Declarative Dialog is the canonical pattern. This test documents
+    // the decision so a future contributor doesn't reintroduce the hook.
+    expect((UiExports as Record<string, unknown>).useModal).toBeUndefined();
+  });
+});