npm - @polderlabs/bizar - Versions diffs - 7.0.2 → 8.0.0 - Mend

@polderlabs/bizar 7.0.2 → 8.0.0

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

Files changed (490) hide show

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

@@ -0,0 +1,86 @@
+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 ADDED Viewed

@@ -0,0 +1,94 @@
+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>;
+}

package/bizar-dash/src/web/v8/ui/theme/ThemeToggle.tsx ADDED Viewed

@@ -0,0 +1,88 @@
+import { Monitor, Moon, Sun } from 'lucide-react';
+import { useTheme } from './useTheme.js';
+import { useDensity } from './useDensity.js';
+import { cx } from '../utils/cx.js';
+/**
+ * ThemeToggle — a single icon button that cycles light → dark → system.
+ *
+ * Shows the icon for the *current resolved* theme:
+ *   - system → Monitor
+ *   - light  → Sun
+ *   - dark   → Moon
+ *
+ * Hover hint and a11y label change with the cycle target.
+ *
+ * Visual: matches IconButton ghost variant (defined separately once
+ * controls/IconButton lands). For the foundation milestone this stays
+ * inline so the shell renders without the full controls library.
+ */
+const RESOLVED_ICON = {
+  light: Sun,
+  dark: Moon,
+  system: Monitor,
+} as const;
+const NEXT_LABEL = {
+  light: 'Switch to dark theme',
+  dark: 'Switch to system theme',
+  system: 'Switch to light theme',
+} as const;
+export interface ThemeToggleProps {
+  className?: string;
+}
+export function ThemeToggle({ className }: ThemeToggleProps): JSX.Element {
+  const { mode, resolved, cycle } = useTheme();
+  const Icon = RESOLVED_ICON[mode];
+  return (
+    <button
+      type="button"
+      onClick={cycle}
+      aria-label={NEXT_LABEL[mode]}
+      title={`${NEXT_LABEL[mode]} (currently: ${resolved})`}
+      className={cx(
+        'v8-theme-toggle',
+        'inline-flex h-8 w-8 items-center justify-center',
+        'rounded-[var(--radius-sm)]',
+        'text-[var(--fg-muted)] hover:text-[var(--fg)] hover:bg-[var(--surface-1)]',
+        'transition-colors duration-[var(--motion-fast)]',
+        className,
+      )}
+    >
+      <Icon size={16} aria-hidden="true" />
+    </button>
+  );
+}
+/**
+ * DensityToggle — pill toggle for comfortable / compact.
+ * Wired into the topbar settings cluster.
+ */
+export interface DensityToggleProps {
+  className?: string;
+}
+export function DensityToggle({ className }: DensityToggleProps): JSX.Element {
+  const { density, toggle } = useDensity();
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      aria-label={`Switch to ${density === 'comfortable' ? 'compact' : 'comfortable'} density`}
+      title={`Density: ${density}`}
+      className={cx(
+        'v8-density-toggle',
+        'inline-flex h-8 px-2 items-center justify-center',
+        'rounded-[var(--radius-sm)]',
+        'text-[var(--fs-12)] font-medium tracking-[var(--tracking-wide)] uppercase',
+        'text-[var(--fg-muted)] hover:text-[var(--fg)] hover:bg-[var(--surface-1)]',
+        'transition-colors duration-[var(--motion-fast)]',
+        className,
+      )}
+    >
+      {density === 'comfortable' ? 'Cozy' : 'Compact'}
+    </button>
+  );
+}

package/bizar-dash/src/web/v8/ui/theme/useDensity.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import { DensityContext, type DensityContextValue } from './DensityProvider.js';
+/**
+ * useDensity — read & mutate UI density (comfortable / compact).
+ *
+ * Throws if used outside of a <DensityProvider>.
+ */
+export function useDensity(): DensityContextValue {
+  const ctx = useContext(DensityContext);
+  if (ctx === null) {
+    throw new Error('useDensity must be used inside <DensityProvider>.');
+  }
+  return ctx;
+}

package/bizar-dash/src/web/v8/ui/theme/useTheme.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+import { ThemeContext, type ThemeContextValue } from './ThemeProvider.js';
+/**
+ * useTheme — read & mutate the active theme.
+ *
+ * Throws if used outside of a <ThemeProvider>. This is intentional:
+ * using the hook without a provider is always a bug.
+ */
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (ctx === null) {
+    throw new Error('useTheme must be used inside <ThemeProvider>.');
+  }
+  return ctx;
+}

package/bizar-dash/src/web/v8/ui/utils/cx.ts ADDED Viewed

@@ -0,0 +1,19 @@
+/**
+ * cx — className combiner.
+ *
+ * Wraps `clsx` (truthy filtering + conditionals) with `tailwind-merge`
+ * (later utilities win — `cx('p-2', 'p-4')` → `'p-4'`).
+ *
+ * Usage:
+ *   cx('btn', isActive && 'btn--active', props.className)
+ *
+ * Why a wrapper: keeps imports to one symbol across the v8 codebase and
+ * lets us swap the implementation later (or add caching) without ripping
+ * through every component.
+ */
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cx(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/bizar-dash/src/web/v8/views/Activity/ActivityView.tsx ADDED Viewed

@@ -0,0 +1,33 @@
+import { GitMerge, GitPullRequest, AlertTriangle, CheckCircle2, Bot, Wrench } from 'lucide-react';
+import { Stack } from '../../ui/primitives/Stack.js';
+import { ViewHeader } from '../../ui/data/ViewHeader.js';
+import { ActivityFeed, type ActivityItem } from '../../ui/activity/ActivityFeed.js';
+/**
+ * ActivityView — full history of events.
+ *
+ * Same shape as the Overview feed, but unbounded — the full stream.
+ */
+const ITEMS: ActivityItem[] = [
+  { id: 'a1', icon: <GitMerge size={14} aria-hidden="true" />, title: 'Merged PR #42 — OKLch token system', meta: '2m ago', tone: 'success' },
+  { id: 'a2', icon: <GitPullRequest size={14} aria-hidden="true" />, title: 'Opened PR #43 — Kanban centerpiece', meta: '12m ago', tone: 'info' },
+  { id: 'a3', icon: <Bot size={14} aria-hidden="true" />, title: 'Atlas — "Wire TanStack Router"', meta: '34m ago', tone: 'info' },
+  { id: 'a4', icon: <CheckCircle2 size={14} aria-hidden="true" />, title: 'Goal "Ship v8 dashboard" advanced to 62%', meta: '52m ago', tone: 'success' },
+  { id: 'a5', icon: <Wrench size={14} aria-hidden="true" />, title: 'Borealis — Edited src/web/v8/ui/index.ts', meta: '1h ago' },
+  { id: 'a6', icon: <AlertTriangle size={14} aria-hidden="true" />, title: 'CI failed on tests/a11y/forms.test.tsx', meta: '1h ago', tone: 'warning' },
+  { id: 'a7', icon: <GitMerge size={14} aria-hidden="true" />, title: 'Merged PR #41 — Sprint S4 (Navigation)', meta: '2h ago', tone: 'success' },
+  { id: 'a8', icon: <GitPullRequest size={14} aria-hidden="true" />, title: 'Opened PR #40 — Sprint S3 (Data display)', meta: '3h ago', tone: 'info' },
+];
+export function ActivityView(): JSX.Element {
+  return (
+    <Stack gap={5}>
+      <ViewHeader
+        title="Activity"
+        description="Full event history across the harness."
+      />
+      <ActivityFeed items={ITEMS} />
+    </Stack>
+  );
+}

package/bizar-dash/src/web/v8/views/Agents/AgentsView.tsx ADDED Viewed

@@ -0,0 +1,108 @@
+import { Stack } from '../../ui/primitives/Stack.js';
+import { Grid } from '../../ui/primitives/Grid.js';
+import { ViewHeader } from '../../ui/data/ViewHeader.js';
+import { AgentCard, type AgentCardProps } from '../../ui/agents/AgentCard.js';
+import { AgentActivity, type AgentActivityItem } from '../../ui/agents/AgentActivity.js';
+import { Card, CardBody, CardHeader } from '../../ui/data/Card.js';
+import { Wrench, Bot, GitMerge, MessageSquare } from 'lucide-react';
+/**
+ * AgentsView — orchestrator agents (PLAN.md "Agents page").
+ *
+ * Each card shows status + current task + token sparkline. Click a card
+ * to see per-agent activity (sample feed below).
+ */
+const AGENTS: AgentCardProps[] = [
+  {
+    id: 'a1',
+    name: 'Atlas',
+    role: 'Lead researcher',
+    status: 'busy',
+    currentTask: 'Wire TanStack Router in v8 App',
+    lastActivity: '2m ago',
+    tasksToday: 7,
+    tpmHistory: [120, 200, 340, 280, 410, 480, 360, 290, 220, 180, 160, 140, 200, 260, 320, 380],
+  },
+  {
+    id: 'a2',
+    name: 'Borealis',
+    role: 'Frontend specialist',
+    status: 'busy',
+    currentTask: 'Polish Settings nav rail',
+    lastActivity: '8m ago',
+    tasksToday: 4,
+    tpmHistory: [60, 90, 120, 150, 180, 200, 220, 240, 260, 230, 210, 190, 170, 150],
+  },
+  {
+    id: 'a3',
+    name: 'Cassini',
+    role: 'QA + review',
+    status: 'idle',
+    currentTask: undefined,
+    lastActivity: '32m ago',
+    tasksToday: 12,
+    tpmHistory: [10, 5, 8, 0, 0, 0, 0, 0, 0, 0, 0],
+  },
+  {
+    id: 'a4',
+    name: 'Drift',
+    role: 'Migration sweeper',
+    status: 'error',
+    currentTask: 'Bulk-rename `var(--token)` to literals',
+    lastActivity: '1h ago',
+    tasksToday: 2,
+    tpmHistory: [200, 220, 240, 260, 0, 0, 0, 0],
+  },
+  {
+    id: 'a5',
+    name: 'Ember',
+    role: 'Memory curator',
+    status: 'paused',
+    lastActivity: '2h ago',
+    tasksToday: 1,
+    tpmHistory: [40, 60, 80, 100, 80, 60, 40, 20],
+  },
+  {
+    id: 'a6',
+    name: 'Ferro',
+    role: 'Build + test',
+    status: 'idle',
+    lastActivity: '15m ago',
+    tasksToday: 9,
+    tpmHistory: [30, 40, 50, 60, 50, 40, 30, 20, 10],
+  },
+];
+const FEATURED_AGENT_ID = 'a1';
+const ACTIVITY: AgentActivityItem[] = [
+  { id: 'ev1', icon: <Bot size={14} aria-hidden="true" />, title: 'Run started', description: 'Picked up "Wire TanStack Router in v8 App"', meta: '12:04', tone: 'info' },
+  { id: 'ev2', icon: <Wrench size={14} aria-hidden="true" />, title: 'Tool call', description: 'Read src/web/v8/App.tsx', meta: '12:05' },
+  { id: 'ev3', icon: <MessageSquare size={14} aria-hidden="true" />, title: 'Message received', description: '"Use the state-based router"', meta: '12:06', tone: 'info' },
+  { id: 'ev4', icon: <GitMerge size={14} aria-hidden="true" />, title: 'Committed', description: 'feat(v8-dash): wire app-level router', meta: '12:08', tone: 'success' },
+];
+export function AgentsView(): JSX.Element {
+  return (
+    <Stack gap={5}>
+      <ViewHeader
+        title="Agents"
+        description="The orchestrator's running entities. Click a card to drill into one."
+      />
+      <Grid cols={3}>
+        {AGENTS.map((agent) => (
+          <AgentCard key={agent.id} {...agent} />
+        ))}
+      </Grid>
+      <Card>
+        <CardHeader
+          title={`Activity — ${AGENTS.find((a) => a.id === FEATURED_AGENT_ID)?.name ?? ''}`}
+        />
+        <CardBody>
+          <AgentActivity items={ACTIVITY} />
+        </CardBody>
+      </Card>
+    </Stack>
+  );
+}

package/bizar-dash/src/web/v8/views/CommandPalette/AppCommandPalette.test.tsx ADDED Viewed

@@ -0,0 +1,142 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeProvider } from '../../ui/theme/ThemeProvider.js';
+import { DensityProvider } from '../../ui/theme/DensityProvider.js';
+import { AppCommandPalette } from './AppCommandPalette.js';
+/**
+ * AppCommandPalette — the ⌘K palette with three scopes:
+ *   Navigation, Actions, Settings.
+ *
+ * The underlying `cmdk` primitive filters items by typed value; we don't
+ * need to type to exercise selection, but typing "Tasks" narrows the
+ * list to the matching Navigation item.
+ *
+ * The Dialog mounts a portal; @testing-library queries reach into the
+ * portal transparently.
+ */
+function PaletteHarness(props: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onNavigate: (id: string) => void;
+}): JSX.Element {
+  return (
+    <ThemeProvider defaultMode="light">
+      <DensityProvider>
+        <AppCommandPalette
+          open={props.open}
+          onOpenChange={props.onOpenChange}
+          onNavigate={props.onNavigate}
+        />
+      </DensityProvider>
+    </ThemeProvider>
+  );
+}
+// `cmdk` calls `scrollIntoView` on the highlighted item whenever the user
+// types. jsdom doesn't implement it natively, so we stub a no-op on the
+// prototype before every test. The real implementation behaves no
+// differently for the assertions we make here.
+beforeEach(() => {
+  if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = vi.fn();
+  }
+});
+describe('AppCommandPalette', () => {
+  it('renders the three scope headings when open', () => {
+    const onNavigate = vi.fn();
+    render(
+      <PaletteHarness
+        open
+        onOpenChange={() => undefined}
+        onNavigate={onNavigate}
+      />,
+    );
+    // Scope to the dialog portal — the sidebar also renders
+    // "Navigation" as a section heading outside the palette.
+    const dialog = screen.getByRole('dialog');
+    expect(dialog).toBeInTheDocument();
+    const headings = Array.from(dialog.querySelectorAll('[cmdk-group-heading]')).map(
+      (node) => node.textContent,
+    );
+    expect(headings).toEqual(['Navigation', 'Actions', 'Settings']);
+  });
+  it('typing Tasks narrows to the Tasks nav item and Enter calls onNavigate("tasks")', async () => {
+    const onNavigate = vi.fn();
+    const onOpenChange = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <PaletteHarness
+        open
+        onOpenChange={onOpenChange}
+        onNavigate={onNavigate}
+      />,
+    );
+    await user.type(screen.getByPlaceholderText(/Type a command/i), 'Tasks');
+    await user.keyboard('{Enter}');
+    expect(onNavigate).toHaveBeenCalledWith('tasks');
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+  it('Toggle theme calls onNavigate("__theme")', async () => {
+    const onNavigate = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <PaletteHarness
+        open
+        onOpenChange={() => undefined}
+        onNavigate={onNavigate}
+      />,
+    );
+    await user.type(screen.getByPlaceholderText(/Type a command/i), 'Toggle theme');
+    await user.keyboard('{Enter}');
+    expect(onNavigate).toHaveBeenCalledWith('__theme');
+  });
+  it('Selecting a Settings item routes to settings + scrolls to section', async () => {
+    const onNavigate = vi.fn();
+    const onOpenChange = vi.fn();
+    const scrollSpy = vi.fn();
+    const user = userEvent.setup();
+    // Stub scrollIntoView on the prototype so the rAF callback finds it.
+    Element.prototype.scrollIntoView = scrollSpy;
+    // Provide a section element for the palette to find after mount.
+    const section = document.createElement('section');
+    section.id = 'density';
+    document.body.appendChild(section);
+    render(
+      <PaletteHarness
+        open
+        onOpenChange={onOpenChange}
+        onNavigate={onNavigate}
+      />,
+    );
+    await user.type(screen.getByPlaceholderText(/Type a command/i), 'Settings · Density');
+    await user.keyboard('{Enter}');
+    // Setting navigation triggers onNavigate('settings') and closes palette.
+    expect(onNavigate).toHaveBeenCalledWith('settings');
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    // Flush the rAF scheduled by handleSelect.
+    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    expect(scrollSpy).toHaveBeenCalled();
+    document.body.removeChild(section);
+  });
+  it('renders the ⌘, shortcut hint on the Settings nav item', () => {
+    render(
+      <PaletteHarness
+        open
+        onOpenChange={() => undefined}
+        onNavigate={() => undefined}
+      />,
+    );
+    expect(screen.getByText('⌘,')).toBeInTheDocument();
+  });
+});