npm - @polderlabs/bizar - Versions diffs - 7.0.4 → 8.1.0 - Mend

@polderlabs/bizar 7.0.4 → 8.1.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 (627) 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,71 @@
+import { useCallback, useMemo, useState } from 'react';
+import { GitMerge, GitPullRequest, AlertTriangle, CheckCircle2, Bot, Wrench, Activity as ActivityIcon, type LucideIcon } 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';
+import { Skeleton } from '../../ui/feedback/Skeleton.js';
+import { useFetch } from '../../data/useFetch.js';
+import { useWsMessage } from '../../data/useWebSocket.js';
+import type { ActivityEvent } from '../../data/types.js';
+/**
+ * ActivityView — Sprint S10. Full activity stream from `/api/activity`.
+ * Live-tail via `activity:new` WS messages.
+ */
+const ICON_MAP: Record<string, LucideIcon> = {
+  'git.merge': GitMerge,
+  'git.pull-request': GitPullRequest,
+  'task.completed': CheckCircle2,
+  'task.failed': AlertTriangle,
+  'agent.run': Bot,
+  'agent.tool': Wrench,
+  'agent.message': ActivityIcon,
+};
+function iconFor(key: string | undefined): JSX.Element {
+  const Icon = ICON_MAP[key || ''] || ActivityIcon;
+  return <Icon size={14} aria-hidden="true" />;
+}
+function toItem(e: ActivityEvent, idx: number): ActivityItem {
+  return {
+    id: e.id || `${e.ts || idx}-${idx}`,
+    icon: iconFor(e.iconKey || e.kind),
+    title: e.title || e.description || e.kind || 'event',
+    description: e.description,
+    meta: e.meta || (e.ts ? new Date(e.ts).toLocaleString() : ''),
+    tone: e.tone,
+  };
+}
+export function ActivityView(): JSX.Element {
+  const events = useFetch<{ events?: ActivityEvent[] }>('/api/activity?limit=200');
+  const [live, setLive] = useState<ActivityEvent[]>([]);
+  const onEvent = useCallback((msg: { event?: ActivityEvent } & Record<string, unknown>) => {
+    const ev = msg.event;
+    if (!ev) return;
+    setLive((prev) => [ev, ...prev].slice(0, 200));
+  }, []);
+  useWsMessage('activity:new', onEvent);
+  const items = useMemo<ActivityItem[]>(() => {
+    const merged = [...live, ...(events.data?.events || [])];
+    return merged.map(toItem);
+  }, [live, events.data]);
+  return (
+    <Stack gap={5}>
+      <ViewHeader
+        title="Activity"
+        description="Full event history across the harness."
+      />
+      {events.loading && items.length === 0 ? (
+        <Skeleton style={{ height: 320 }} />
+      ) : (
+        <ActivityFeed items={items} />
+      )}
+    </Stack>
+  );
+}

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

@@ -0,0 +1,172 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Stack } from '../../ui/primitives/Stack.js';
+import { Inline } from '../../ui/primitives/Inline.js';
+import { Grid } from '../../ui/primitives/Grid.js';
+import { ViewHeader } from '../../ui/data/ViewHeader.js';
+import { AgentCard, type AgentCardProps, type AgentStatus } from '../../ui/agents/AgentCard.js';
+import { AgentDetail } from '../../ui/agents/AgentDetail.js';
+import { Chip } from '../../ui/data/Chip.js';
+import { Skeleton } from '../../ui/feedback/Skeleton.js';
+import { useFetch } from '../../data/useFetch.js';
+import { useWsMessage } from '../../data/useWebSocket.js';
+import type { BizarAgent, CCAgent, WsMessage } from '../../data/types.js';
+import { Bot, Cpu } from 'lucide-react';
+/**
+ * AgentsView — Sprint S10. Unified Bizar + Claude Code agents.
+ *
+ * Two REST calls (Bizar agents from `/api/agents`, CC from
+ * `/api/cc-agents`) merged into a single grid. A `source` filter
+ * chip switches between `bizar | claude-code | all`. Live updates
+ * via `agents:change` and `agent:status` WS events.
+ */
+const SOURCE_LABELS = {
+  all: 'All',
+  bizar: 'Bizar',
+  'claude-code': 'Claude Code',
+} as const;
+type SourceFilter = keyof typeof SOURCE_LABELS;
+function mapBizar(a: BizarAgent): AgentCardProps {
+  const raw = (a.status || 'idle').toLowerCase();
+  const status: AgentStatus =
+    raw === 'busy' || raw === 'working' ? 'busy' :
+    raw === 'error' || raw === 'stuck' ? 'error' :
+    raw === 'paused' ? 'paused' : 'idle';
+  return {
+    id: `bizar:${a.name}`,
+    name: a.name,
+    role: a.role || a.category || a.mode || 'agent',
+    status,
+    currentTask: a.currentTaskId ? `Task ${a.currentTaskId}` : undefined,
+    lastActivity: a.lastSeen ? new Date(a.lastSeen).toLocaleTimeString() : undefined,
+    tasksToday: a.tasksTotal || 0,
+    tpmHistory: [],
+    badges: a.tags || [],
+  };
+}
+function mapCC(a: CCAgent): AgentCardProps {
+  const raw = (a.status || a.state || 'idle').toLowerCase();
+  const status: AgentStatus =
+    raw === 'busy' || raw === 'working' ? 'busy' :
+    raw === 'error' ? 'error' :
+    raw === 'paused' ? 'paused' : 'idle';
+  return {
+    id: `cc:${a.sessionId || a.id}`,
+    name: a.name || a.sessionId?.slice(0, 8) || 'unknown',
+    role: a.kind === 'background' ? 'CC background' : 'CC interactive',
+    status,
+    currentTask: a.lastMessageSnippet || undefined,
+    lastActivity: a.lastMessageAt ? new Date(a.lastMessageAt).toLocaleTimeString() : (a.startedAt ? new Date(a.startedAt).toLocaleTimeString() : undefined),
+    tasksToday: a.messageCount || 0,
+    tpmHistory: [],
+    badges: [a.cwd?.split('/').slice(-2).join('/') || ''].filter(Boolean),
+  };
+}
+export function AgentsView(): JSX.Element {
+  const bizar = useFetch<{ agents?: BizarAgent[] }>('/api/agents');
+  const cc = useFetch<{ agents?: CCAgent[]; error?: string }>('/api/cc-agents');
+  const [source, setSource] = useState<SourceFilter>('all');
+  const [bizarList, setBizarList] = useState<BizarAgent[]>([]);
+  const [ccList, setCCList] = useState<CCAgent[]>([]);
+  const [initialized, setInitialized] = useState(false);
+  const [openId, setOpenId] = useState<string | null>(null);
+  useEffect(() => {
+    if (!initialized && bizar.data?.agents !== undefined && cc.data?.agents !== undefined) {
+      setInitialized(true);
+      setBizarList(bizar.data.agents);
+      setCCList(cc.data.agents);
+    }
+  }, [bizar.data, cc.data, initialized]);
+  const onAgentsChange = useCallback(() => {
+    // Bust both caches; the next mount will re-fetch (cheap because
+    // the dashboard views are lazy-mounted).
+    bizar.refetch();
+    cc.refetch();
+  }, [bizar, cc]);
+  useWsMessage('agents:change', onAgentsChange);
+  const onAgentStatus = useCallback((msg: WsMessage) => {
+    if (msg.type !== 'agent:status') return;
+    const a = (msg as Extract<WsMessage, { type: 'agent:status' }>).agent;
+    if (!a || !a.name) return;
+    setBizarList((prev) => {
+      const idx = prev.findIndex((x) => x.name === a.name);
+      if (idx === -1) return [...prev, a];
+      const copy = prev.slice();
+      copy[idx] = { ...copy[idx], ...a };
+      return copy;
+    });
+  }, []);
+  useWsMessage('agent:status', onAgentStatus);
+  const cards = useMemo(() => {
+    const out: Array<AgentCardProps & { source: 'bizar' | 'claude-code' }> = [];
+    if (source !== 'claude-code') {
+      for (const a of bizarList) out.push({ ...mapBizar(a), source: 'bizar' });
+    }
+    if (source !== 'bizar') {
+      for (const a of ccList) out.push({ ...mapCC(a), source: 'claude-code' });
+    }
+    return out;
+  }, [bizarList, ccList, source]);
+  return (
+    <Stack gap={5}>
+      <ViewHeader
+        title="Agents"
+        description="Bizar agents (frontmatter-driven) and Claude Code background agents."
+      />
+      <Inline gap={2}>
+        {(['all', 'bizar', 'claude-code'] as SourceFilter[]).map((id) => (
+          <Chip
+            key={id}
+            selected={source === id}
+            onClick={() => setSource(id)}
+          >
+            {id === 'bizar' ? <Bot size={12} aria-hidden /> : id === 'claude-code' ? <Cpu size={12} aria-hidden /> : null}{' '}
+            {SOURCE_LABELS[id]}
+          </Chip>
+        ))}
+      </Inline>
+      {cards.length === 0 && (bizar.loading || cc.loading) ? (
+        <Grid cols={3}>
+          <Skeleton style={{ height: 140 }} />
+          <Skeleton style={{ height: 140 }} />
+          <Skeleton style={{ height: 140 }} />
+        </Grid>
+      ) : cards.length === 0 ? (
+        <span style={{ color: 'var(--fg-muted)' }}>
+          No agents yet. Run <code>/loop</code> or spawn one via the command palette.
+        </span>
+      ) : (
+        <Grid cols={3}>
+          {cards.map((c) => (
+            <AgentCard key={c.id} {...c} onOpen={() => setOpenId(c.id)} />
+          ))}
+        </Grid>
+      )}
+      {openId !== null && (() => {
+        const sel = cards.find((c) => c.id === openId);
+        if (!sel) return null;
+        return (
+          <AgentDetail
+            agentId={sel.id}
+            name={sel.name}
+            role={sel.role}
+            status={sel.status}
+            currentTask={sel.currentTask}
+            open={openId !== null}
+            onOpenChange={(o) => { if (!o) setOpenId(null); }}
+          />
+        );
+      })()}
+    </Stack>
+  );
+}