@polderlabs/bizar 10.7.2 → 10.11.0

package/bizar-dash/src/web/v8/ui/tasks/TaskDetail.tsx

@@ -1,313 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Plus, Trash2 } from 'lucide-react';
-import { Sheet, SheetContent } from '../feedback/Sheet.js';
-import { Stack } from '../primitives/Stack.js';
-import { Inline } from '../primitives/Inline.js';
-import { Button } from '../controls/Button.js';
-import { Input } from '../controls/Input.js';
-import { Textarea } from '../controls/Textarea.js';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '../controls/Select.js';
-import { Skeleton } from '../feedback/Skeleton.js';
-import { Badge } from '../data/Badge.js';
-import { fetchJson } from '../../data/fetcher.js';
-import type { Task } from '../../data/types.js';
-
-/**
- * TaskDetail — right-side Drawer for editing a single task. Sprint S17.
- *
- * Source-of-truth lives on the backend (tasks-store). Each edit PATCHes
- * `/api/tasks/:id` and the server re-broadcasts the canonical state via
- * `tasks:change`. The Drawer stays open while the WS round-trip resolves
- * so optimistic UI + canonical merge feels seamless.
- */
-
-const PRIORITY_OPTIONS = [
-  { value: 'low', label: 'Low' },
-  { value: 'medium', label: 'Medium' },
-  { value: 'high', label: 'High' },
-  { value: 'urgent', label: 'Urgent' },
-];
-
-const STATUS_OPTIONS = [
-  { value: 'queued', label: 'Backlog' },
-  { value: 'doing', label: 'In progress' },
-  { value: 'blocked', label: 'In review' },
-  { value: 'done', label: 'Done' },
-  { value: 'archived', label: 'Archived' },
-];
-
-export interface TaskDetailProps {
-  task: Task;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onDeleted?: () => void;
-}
-
-export function TaskDetail(props: TaskDetailProps): JSX.Element {
-  const { task, open, onOpenChange, onDeleted } = props;
-  const [title, setTitle] = useState<string>(task.title);
-  const [description, setDescription] = useState<string>(task.description || '');
-  const [priority, setPriority] = useState<string>(task.priority || 'medium');
-  const [status, setStatus] = useState<string>(task.status || 'queued');
-  const [assignee, setAssignee] = useState<string>(task.assignee || '');
-  const [due, setDue] = useState<string>(task.due || '');
-  const [branch, setBranch] = useState<string>(task.branch || '');
-  const [comment, setComment] = useState<string>('');
-  const [busy, setBusy] = useState<string | null>(null);
-  const [message, setMessage] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [deleting, setDeleting] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (open) {
-      setTitle(task.title);
-      setDescription(task.description || '');
-      setPriority(task.priority || 'medium');
-      setStatus(task.status || 'queued');
-      setAssignee(task.assignee || '');
-      setDue(task.due || '');
-      setBranch(task.branch || '');
-      setComment('');
-      setMessage(null);
-      setError(null);
-    }
-  }, [open, task]);
-
-  const patch = async (body: Record<string, unknown>, label: string): Promise<void> => {
-    setBusy(label);
-    setMessage(null);
-    setError(null);
-    try {
-      await fetchJson(`/api/tasks/${encodeURIComponent(task.id)}`, {
-        method: 'PATCH',
-        body,
-      });
-      setMessage(`${label} saved.`);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setBusy(null);
-    }
-  };
-
-  const saveTitle = (): void => {
-    if (title.trim() && title !== task.title) void patch({ title: title.trim() }, 'Title');
-  };
-  const saveDescription = (): void => {
-    if (description !== (task.description || '')) void patch({ description }, 'Description');
-  };
-  const savePriority = (v: string): void => {
-    setPriority(v);
-    if (v !== task.priority) void patch({ priority: v }, 'Priority');
-  };
-  const saveStatus = (v: string): void => {
-    setStatus(v);
-    if (v !== task.status) void patch({ status: v }, 'Status');
-  };
-  const saveAssignee = (): void => {
-    const v = assignee.trim();
-    if (v !== (task.assignee || '')) void patch({ assignee: v }, 'Assignee');
-  };
-  const saveDue = (): void => {
-    const v = due.trim();
-    if (v !== (task.due || '')) void patch({ due: v }, 'Due');
-  };
-  const saveBranch = (): void => {
-    const v = branch.trim();
-    if (v !== (task.branch || '')) void patch({ branch: v }, 'Branch');
-  };
-
-  const addComment = async (): Promise<void> => {
-    const v = comment.trim();
-    if (!v) return;
-    setBusy('comment');
-    setError(null);
-    try {
-      await fetchJson(`/api/tasks/${encodeURIComponent(task.id)}/comments`, {
-        method: 'POST',
-        body: { text: v },
-      });
-      setComment('');
-      setMessage('Comment added.');
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setBusy(null);
-    }
-  };
-
-  const removeTask = async (): Promise<void> => {
-    const ok = typeof window !== 'undefined' && typeof window.confirm === 'function'
-      ? window.confirm(`Delete task "${task.title}"? This is irreversible.`)
-      : true;
-    if (!ok) return;
-    setDeleting(true);
-    try {
-      await fetchJson(`/api/tasks/${encodeURIComponent(task.id)}`, { method: 'DELETE' });
-      onDeleted?.();
-      onOpenChange(false);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-      setDeleting(false);
-    }
-  };
-
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side="right" title="Edit task">
-        <Stack gap={4} style={{ padding: 'var(--space-4)' }}>
-          <Stack gap={2}>
-            <label htmlFor="task-title" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
-              Title
-            </label>
-            <Input
-              id="task-title"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              onBlur={saveTitle}
-              disabled={busy !== null}
-            />
-          </Stack>
-
-          <Stack gap={2}>
-            <label htmlFor="task-status" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
-              Status
-            </label>
-            <Select value={status} onValueChange={saveStatus}>
-              <SelectTrigger id="task-status" size="sm" placeholder="Status" />
-              <SelectContent>
-                {STATUS_OPTIONS.map((opt) => (
-                  <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </Stack>
-
-          <Inline gap={2}>
-            <Stack gap={2} style={{ flex: 1 }}>
-              <label htmlFor="task-priority" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
-                Priority
-              </label>
-              <Select value={priority} onValueChange={savePriority}>
-                <SelectTrigger id="task-priority" size="sm" placeholder="Priority" />
-                <SelectContent>
-                  {PRIORITY_OPTIONS.map((opt) => (
-                    <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </Stack>
-            <Stack gap={2} style={{ flex: 1 }}>
-              <label htmlFor="task-due" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
-                Due
-              </label>
-              <Input
-                id="task-due"
-                type="date"
-                value={due ? due.slice(0, 10) : ''}
-                onChange={(e) => setDue(e.target.value)}
-                onBlur={saveDue}
-                disabled={busy !== null}
-              />
-            </Stack>
-          </Inline>
-
-          <Inline gap={2}>
-            <Stack gap={2} style={{ flex: 1 }}>
-              <label htmlFor="task-assignee" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
-                Assignee
-              </label>
-              <Input
-                id="task-assignee"
-                value={assignee}
-                onChange={(e) => setAssignee(e.target.value)}
-                onBlur={saveAssignee}
-                placeholder="agent name (blank = unassigned)"
-                disabled={busy !== null}
-              />
-            </Stack>
-            <Stack gap={2} style={{ flex: 1 }}>
-              <label htmlFor="task-branch" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
-                Branch
-              </label>
-              <Input
-                id="task-branch"
-                value={branch}
-                onChange={(e) => setBranch(e.target.value)}
-                onBlur={saveBranch}
-                placeholder="feature/foo"
-                disabled={busy !== null}
-              />
-            </Stack>
-          </Inline>
-
-          <Stack gap={2}>
-            <label htmlFor="task-description" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
-              Description
-            </label>
-            <Textarea
-              id="task-description"
-              rows={5}
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              onBlur={saveDescription}
-              disabled={busy !== null}
-              placeholder="What's the work, why, how to verify…"
-            />
-          </Stack>
-
-          <Stack gap={2}>
-            <label htmlFor="task-comment" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
-              Add comment
-            </label>
-            <Inline gap={2} align="start">
-              <Textarea
-                id="task-comment"
-                rows={2}
-                value={comment}
-                onChange={(e) => setComment(e.target.value)}
-                placeholder="Leave a progress note…"
-                disabled={busy !== null}
-                style={{ flex: 1 }}
-              />
-              <Button variant="secondary" onClick={() => { void addComment(); }} disabled={!comment.trim() || busy !== null}>
-                <Plus size={14} aria-hidden /> Comment
-              </Button>
-            </Inline>
-          </Stack>
-
-          <Stack gap={2}>
-            <div style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Metadata</div>
-            <Inline gap={1} wrap>
-              {task.metadata?.goalId !== undefined && typeof task.metadata.goalId === 'string' && (
-                <Badge tone="info" title={`Linked to goal ${String(task.metadata.goalId)}`}>
-                  goal: {String(task.metadata.goalId)}
-                </Badge>
-              )}
-              {task.metadata?.krId !== undefined && typeof task.metadata.krId === 'string' && (
-                <Badge tone="info" title={`Linked to KR ${String(task.metadata.krId)}`}>
-                  kr: {String(task.metadata.krId)}
-                </Badge>
-              )}
-              {task.id && <Badge tone="neutral" title={task.id}>id: {task.id}</Badge>}
-            </Inline>
-          </Stack>
-
-          <div style={{ borderTop: '1px solid var(--border)', paddingTop: 'var(--space-3)' }}>
-            <Button variant="danger" onClick={() => { void removeTask(); }} disabled={deleting || busy !== null}>
-              <Trash2 size={14} aria-hidden /> {deleting ? 'Deleting…' : 'Delete task'}
-            </Button>
-          </div>
-
-          {message !== null && (
-            <div role="status" style={{ fontSize: 'var(--fs-12)', color: 'var(--success)' }}>{message}</div>
-          )}
-          {error !== null && (
-            <div role="alert" style={{ fontSize: 'var(--fs-12)', color: 'var(--danger)' }}>{error}</div>
-          )}
-          {busy !== null && <Skeleton style={{ height: 12 }} />}
-        </Stack>
-      </SheetContent>
-    </Sheet>
-  );
-}

package/bizar-dash/src/web/v8/ui/theme/DensityProvider.test.tsx

@@ -1,74 +0,0 @@
-import { describe, expect, it, beforeEach } from 'vitest';
-import { act, render, screen } from '@testing-library/react';
-import { DensityProvider } from './DensityProvider.js';
-import { useDensity } from './useDensity.js';
-
-/**
- * DensityProvider tests — verifies toggle, persistence, and the
- * `data-density` attribute on <html>.
- */
-
-function Probe(): JSX.Element {
-  const { density, setDensity, toggle } = useDensity();
-  return (
-    <div>
-      <span data-testid="density">{density}</span>
-      <button type="button" onClick={() => setDensity('compact')}>set-compact</button>
-      <button type="button" onClick={toggle}>toggle</button>
-    </div>
-  );
-}
-
-beforeEach(() => {
-  window.localStorage.clear();
-  document.documentElement.dataset['density'] = '';
-});
-
-describe('DensityProvider', () => {
-  it('defaults to comfortable', () => {
-    render(
-      <DensityProvider>
-        <Probe />
-      </DensityProvider>,
-    );
-    expect(screen.getByTestId('density').textContent).toBe('comfortable');
-    expect(document.documentElement.dataset['density']).toBe('comfortable');
-  });
-
-  it('respects defaultDensity', () => {
-    render(
-      <DensityProvider defaultDensity="compact">
-        <Probe />
-      </DensityProvider>,
-    );
-    expect(screen.getByTestId('density').textContent).toBe('compact');
-    expect(document.documentElement.dataset['density']).toBe('compact');
-  });
-
-  it('setDensity persists to localStorage and updates the attribute', () => {
-    render(
-      <DensityProvider>
-        <Probe />
-      </DensityProvider>,
-    );
-    act(() => screen.getByText('set-compact').click());
-    expect(screen.getByTestId('density').textContent).toBe('compact');
-    expect(window.localStorage.getItem('bizar:density')).toBe('compact');
-    expect(document.documentElement.dataset['density']).toBe('compact');
-  });
-
-  it('toggle flips comfortable ↔ compact', () => {
-    render(
-      <DensityProvider>
-        <Probe />
-      </DensityProvider>,
-    );
-    expect(screen.getByTestId('density').textContent).toBe('comfortable');
-
-    act(() => screen.getByText('toggle').click());
-    expect(screen.getByTestId('density').textContent).toBe('compact');
-
-    act(() => screen.getByText('toggle').click());
-    expect(screen.getByTestId('density').textContent).toBe('comfortable');
-  });
-});

package/bizar-dash/src/web/v8/ui/theme/DensityProvider.tsx

@@ -1,66 +0,0 @@
-import { createContext, useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
-
-/**
- * UI density — affects row heights, control heights, card padding via tokens.
- *   - 'comfortable' → standard spacing (default).
- *   - 'compact'     → dense data tables, power-user mode.
- *
- * Persisted to localStorage and reflected as `data-density="…"` on <html>
- * so tokens.css rules (e.g. `--density-row-h`) swap without a re-render.
- */
-export type Density = 'comfortable' | 'compact';
-
-export interface DensityContextValue {
-  density: Density;
-  setDensity: (next: Density) => void;
-  toggle: () => void;
-}
-
-export const DensityContext = createContext<DensityContextValue | null>(null);
-
-const STORAGE_KEY = 'bizar:density';
-
-function readStoredDensity(): Density {
-  if (typeof window === 'undefined') return 'comfortable';
-  const raw = window.localStorage.getItem(STORAGE_KEY);
-  if (raw === 'comfortable' || raw === 'compact') return raw;
-  return 'comfortable';
-}
-
-function applyDensityAttribute(density: Density): void {
-  if (typeof document === 'undefined') return;
-  document.documentElement.dataset['density'] = density;
-}
-
-export interface DensityProviderProps {
-  children: ReactNode;
-  defaultDensity?: Density;
-}
-
-export function DensityProvider({ children, defaultDensity }: DensityProviderProps): JSX.Element {
-  const [density, setDensityState] = useState<Density>(() => defaultDensity ?? readStoredDensity());
-
-  useEffect(() => {
-    applyDensityAttribute(density);
-  }, [density]);
-
-  const setDensity = useCallback((next: Density) => {
-    setDensityState(next);
-    if (typeof window !== 'undefined') window.localStorage.setItem(STORAGE_KEY, next);
-  }, []);
-
-  const toggle = useCallback(() => {
-    setDensityState((prev) => {
-      const next: Density = prev === 'comfortable' ? 'compact' : 'comfortable';
-      if (typeof window !== 'undefined') window.localStorage.setItem(STORAGE_KEY, next);
-      return next;
-    });
-  }, []);
-
-  const value = useMemo<DensityContextValue>(
-    () => ({ density, setDensity, toggle }),
-    [density, setDensity, toggle],
-  );
-
-  return <DensityContext.Provider value={value}>{children}</DensityContext.Provider>;
-}

package/bizar-dash/src/web/v8/ui/theme/ThemeProvider.test.tsx

@@ -1,86 +0,0 @@
-import { describe, expect, it, beforeEach } from 'vitest';
-import { act, render, screen } from '@testing-library/react';
-import { ThemeProvider } from './ThemeProvider.js';
-import { useTheme } from './useTheme.js';
-
-/**
- * ThemeProvider tests — verifies mode cycling, localStorage persistence,
- * and the `data-theme` attribute on <html>.
- *
- * The test harness's matchMedia stub returns `matches: false`, so the
- * 'system' mode always resolves to 'light'. Tests pin the starting mode
- * via the `defaultMode` prop to avoid that ambiguity.
- */
-
-function Probe(): JSX.Element {
-  const { mode, resolved, setMode, cycle } = useTheme();
-  return (
-    <div>
-      <span data-testid="mode">{mode}</span>
-      <span data-testid="resolved">{resolved}</span>
-      <button type="button" onClick={() => setMode('dark')}>set-dark</button>
-      <button type="button" onClick={cycle}>cycle</button>
-    </div>
-  );
-}
-
-beforeEach(() => {
-  window.localStorage.clear();
-  document.documentElement.dataset['theme'] = '';
-});
-
-describe('ThemeProvider', () => {
-  it('resolves forced light to light and stamps data-theme on <html>', () => {
-    render(
-      <ThemeProvider defaultMode="light">
-        <Probe />
-      </ThemeProvider>,
-    );
-    expect(screen.getByTestId('mode').textContent).toBe('light');
-    expect(screen.getByTestId('resolved').textContent).toBe('light');
-    expect(document.documentElement.dataset['theme']).toBe('light');
-  });
-
-  it('resolves forced dark to dark and stamps data-theme on <html>', () => {
-    render(
-      <ThemeProvider defaultMode="dark">
-        <Probe />
-      </ThemeProvider>,
-    );
-    expect(screen.getByTestId('resolved').textContent).toBe('dark');
-    expect(document.documentElement.dataset['theme']).toBe('dark');
-  });
-
-  it('setMode persists to localStorage and updates the attribute', () => {
-    render(
-      <ThemeProvider defaultMode="light">
-        <Probe />
-      </ThemeProvider>,
-    );
-    act(() => {
-      screen.getByText('set-dark').click();
-    });
-    expect(screen.getByTestId('mode').textContent).toBe('dark');
-    expect(screen.getByTestId('resolved').textContent).toBe('dark');
-    expect(window.localStorage.getItem('bizar:theme')).toBe('dark');
-    expect(document.documentElement.dataset['theme']).toBe('dark');
-  });
-
-  it('cycle goes light → dark → system → light', () => {
-    render(
-      <ThemeProvider defaultMode="light">
-        <Probe />
-      </ThemeProvider>,
-    );
-    expect(screen.getByTestId('mode').textContent).toBe('light');
-
-    act(() => screen.getByText('cycle').click());
-    expect(screen.getByTestId('mode').textContent).toBe('dark');
-
-    act(() => screen.getByText('cycle').click());
-    expect(screen.getByTestId('mode').textContent).toBe('system');
-
-    act(() => screen.getByText('cycle').click());
-    expect(screen.getByTestId('mode').textContent).toBe('light');
-  });
-});

package/bizar-dash/src/web/v8/ui/theme/ThemeProvider.tsx

@@ -1,94 +0,0 @@
-import { createContext, useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
-
-/**
- * Theme modes.
- *   - 'system'  → follows `prefers-color-scheme` media query, stored as `data-theme="light|dark"` on <html>.
- *   - 'light'   → forces light.
- *   - 'dark'    → forces dark.
- */
-export type ThemeMode = 'system' | 'light' | 'dark';
-export type ResolvedTheme = 'light' | 'dark';
-
-export interface ThemeContextValue {
-  /** The user's chosen mode (may be 'system'). */
-  mode: ThemeMode;
-  /** The active theme after resolving 'system' against the OS preference. */
-  resolved: ResolvedTheme;
-  /** Persist a new mode. */
-  setMode: (mode: ThemeMode) => void;
-  /** Cycle through light → dark → system → light. Wired to the toolbar toggle. */
-  cycle: () => void;
-}
-
-export const ThemeContext = createContext<ThemeContextValue | null>(null);
-
-const STORAGE_KEY = 'bizar:theme';
-
-function readStoredMode(): ThemeMode {
-  if (typeof window === 'undefined') return 'system';
-  const raw = window.localStorage.getItem(STORAGE_KEY);
-  if (raw === 'light' || raw === 'dark' || raw === 'system') return raw;
-  return 'system';
-}
-
-function systemPrefersDark(): boolean {
-  if (typeof window === 'undefined' || !window.matchMedia) return false;
-  return window.matchMedia('(prefers-color-scheme: dark)').matches;
-}
-
-function resolveTheme(mode: ThemeMode): ResolvedTheme {
-  if (mode === 'light' || mode === 'dark') return mode;
-  return systemPrefersDark() ? 'dark' : 'light';
-}
-
-function applyThemeAttribute(resolved: ResolvedTheme): void {
-  if (typeof document === 'undefined') return;
-  document.documentElement.dataset['theme'] = resolved;
-}
-
-export interface ThemeProviderProps {
-  children: ReactNode;
-  /** Override default mode on first render (still persists on change). */
-  defaultMode?: ThemeMode;
-}
-
-export function ThemeProvider({ children, defaultMode }: ThemeProviderProps): JSX.Element {
-  const [mode, setModeState] = useState<ThemeMode>(() => defaultMode ?? readStoredMode());
-  const [systemDark, setSystemDark] = useState<boolean>(systemPrefersDark);
-
-  // Subscribe to system preference changes when in 'system' mode.
-  useEffect(() => {
-    if (typeof window === 'undefined' || !window.matchMedia) return;
-    const mql = window.matchMedia('(prefers-color-scheme: dark)');
-    const handler = (e: MediaQueryListEvent): void => setSystemDark(e.matches);
-    mql.addEventListener('change', handler);
-    return () => mql.removeEventListener('change', handler);
-  }, []);
-
-  const resolved: ResolvedTheme = mode === 'system' ? (systemDark ? 'dark' : 'light') : mode;
-
-  // Apply to <html data-theme="…"> so tokens.css overrides win over media query.
-  useEffect(() => {
-    applyThemeAttribute(resolved);
-  }, [resolved]);
-
-  const setMode = useCallback((next: ThemeMode) => {
-    setModeState(next);
-    if (typeof window !== 'undefined') window.localStorage.setItem(STORAGE_KEY, next);
-  }, []);
-
-  const cycle = useCallback(() => {
-    setModeState((prev) => {
-      const next: ThemeMode = prev === 'light' ? 'dark' : prev === 'dark' ? 'system' : 'light';
-      if (typeof window !== 'undefined') window.localStorage.setItem(STORAGE_KEY, next);
-      return next;
-    });
-  }, []);
-
-  const value = useMemo<ThemeContextValue>(
-    () => ({ mode, resolved, setMode, cycle }),
-    [mode, resolved, setMode, cycle],
-  );
-
-  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
-}