@polderlabs/bizar 7.0.4 → 8.0.0

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

@@ -0,0 +1,84 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { render, screen, act } 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 { SettingsView } from '../views/Settings/SettingsView.js';
+
+function Providers({ children }: { children: React.ReactNode }): JSX.Element {
+  return (
+    <ThemeProvider>
+      <DensityProvider>{children}</DensityProvider>
+    </ThemeProvider>
+  );
+}
+
+describe('SettingsView', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  it('renders all 16 sections', () => {
+    render(<Providers><SettingsView /></Providers>);
+    for (const title of [
+      'General',
+      'Theme',
+      'Density',
+      'Density rules',
+      'Command palette',
+      'Keyboard',
+      'Notifications',
+      'Storage',
+      'Plugins',
+      'MCP servers',
+      'Skills',
+      'Hooks',
+      'Activity',
+      'Memory',
+      'Privacy',
+      'Advanced',
+    ]) {
+      expect(screen.getByRole('heading', { level: 2, name: new RegExp(`^${title}$`, 'i') })).toBeInTheDocument();
+    }
+  });
+
+  it('marks the active nav item with aria-current', () => {
+    render(<Providers><SettingsView /></Providers>);
+    const generalNav = screen.getByRole('button', { name: /^General$/i });
+    expect(generalNav).toHaveAttribute('aria-current', 'true');
+  });
+
+  it('clicking a left-rail nav entry calls scrollIntoView on the section element', async () => {
+    const user = userEvent.setup();
+    // Spy on Element.prototype.scrollIntoView so we can assert the call.
+    const scrollSpy = vi.fn();
+    const original = Element.prototype.scrollIntoView;
+    Element.prototype.scrollIntoView = scrollSpy;
+
+    try {
+      render(<Providers><SettingsView /></Providers>);
+      const themeNav = screen.getByRole('button', { name: /^Theme$/i });
+      await user.click(themeNav);
+      // handleSelect uses requestAnimationFrame — flush it.
+      await act(async () => {
+        await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+      });
+      expect(scrollSpy).toHaveBeenCalled();
+      const arg = scrollSpy.mock.calls[0]?.[0] as ScrollIntoViewOptions | undefined;
+      expect(arg?.behavior).toBe('smooth');
+      expect(arg?.block).toBe('start');
+    } finally {
+      Element.prototype.scrollIntoView = original;
+    }
+  });
+
+  it('updates activeId when a different nav item is clicked', async () => {
+    const user = userEvent.setup();
+    render(<Providers><SettingsView /></Providers>);
+    const densityNav = screen.getByRole('button', { name: /^Density$/i });
+    await user.click(densityNav);
+    expect(densityNav).toHaveAttribute('aria-current', 'true');
+    const generalNav = screen.getByRole('button', { name: /^General$/i });
+    expect(generalNav).not.toHaveAttribute('aria-current');
+  });
+});

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

@@ -0,0 +1,95 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Bot, CheckSquare, Layers } from 'lucide-react';
+import type { ReactNode } from 'react';
+import { Sidebar, type SidebarSection } from '../shell/Sidebar.js';
+
+const SECTIONS: SidebarSection[] = [
+  {
+    id: 'workspace',
+    label: 'Workspace',
+    items: [
+      { id: 'overview', label: 'Overview', icon: Layers },
+      { id: 'tasks', label: 'Tasks', icon: CheckSquare, count: 47 },
+    ],
+  },
+  {
+    id: 'ops',
+    label: 'Ops',
+    items: [{ id: 'agents', label: 'Agents', icon: Bot, count: '8/16' }],
+  },
+];
+
+function renderSidebar(props: {
+  onItemSelect?: ReturnType<typeof vi.fn>;
+  activeId?: string;
+} = {}): { onItemSelect?: ReturnType<typeof vi.fn> } {
+  render(
+    <Sidebar
+      sections={SECTIONS}
+      defaultSections={false}
+      onItemSelect={props.onItemSelect}
+      activeId={props.activeId}
+    />,
+  );
+  return props;
+}
+
+describe('Sidebar', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  it('renders every section label and item', () => {
+    renderSidebar();
+    expect(screen.getByText('Workspace')).toBeInTheDocument();
+    expect(screen.getByText('Ops')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /overview/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /tasks/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /agents/i })).toBeInTheDocument();
+  });
+
+  it('renders items as <button> elements (not anchors)', () => {
+    renderSidebar();
+    const overview = screen.getByRole('button', { name: /overview/i });
+    expect(overview.tagName).toBe('BUTTON');
+    expect(overview).not.toHaveAttribute('href');
+  });
+
+  it('fires onItemSelect with the clicked item id', async () => {
+    const user = userEvent.setup();
+    const onItemSelect = vi.fn();
+    renderSidebar({ onItemSelect });
+
+    await user.click(screen.getByRole('button', { name: /^Tasks$/i }));
+
+    expect(onItemSelect).toHaveBeenCalledTimes(1);
+    expect(onItemSelect).toHaveBeenCalledWith('tasks');
+  });
+
+  it('marks activeId item with aria-current="page"', () => {
+    renderSidebar({ activeId: 'tasks' });
+    const tasks = screen.getByRole('button', { name: /^Tasks$/i });
+    const overview = screen.getByRole('button', { name: /^Overview$/i });
+    expect(tasks).toHaveAttribute('aria-current', 'page');
+    expect(overview).not.toHaveAttribute('aria-current');
+  });
+
+  it('marks each item with aria-label so collapsed icons stay announced', () => {
+    renderSidebar();
+    // aria-label is always set; expanded view relies on visible label,
+    // collapsed view relies on aria-label.
+    expect(screen.getByRole('button', { name: /^Tasks$/i })).toHaveAttribute('aria-label', 'Tasks');
+    expect(screen.getByRole('button', { name: /^Agents$/i })).toHaveAttribute('aria-label', 'Agents');
+  });
+
+  it('persists collapsed state in localStorage when toggled', async () => {
+    const user = userEvent.setup();
+    renderSidebar();
+    // Find the collapse button by its aria-label (always present).
+    const collapseBtn = screen.getByRole('button', { name: /collapse sidebar/i });
+    await user.click(collapseBtn);
+    expect(window.localStorage.getItem('bizar:sidebar:collapsed')).toBe('1');
+  });
+});

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

@@ -0,0 +1,63 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { GitMerge } from 'lucide-react';
+import { ActivityFeed, type ActivityItem } from '../ui/activity/ActivityFeed';
+
+const items: ActivityItem[] = [
+  {
+    id: 'a1',
+    icon: <GitMerge size={14} aria-hidden="true" />,
+    title: 'Merged PR #42',
+    description: 'Add OKLch token system',
+    meta: '2m ago',
+    tone: 'success',
+  },
+  {
+    id: 'a2',
+    title: 'Agent run started',
+    description: 'Atlas — "Wire v8 routing"',
+    meta: '5m ago',
+    tone: 'info',
+  },
+  {
+    id: 'a3',
+    title: 'CI failed',
+    description: 'tests/a11y/forms.test.tsx',
+    meta: '1h ago',
+    tone: 'danger',
+  },
+];
+
+describe('ActivityFeed', () => {
+  it('renders all items with title and meta', () => {
+    render(<ActivityFeed items={items} />);
+    expect(screen.getByText(/Merged PR #42/i)).toBeInTheDocument();
+    expect(screen.getByText(/Agent run started/i)).toBeInTheDocument();
+    expect(screen.getByText(/CI failed/i)).toBeInTheDocument();
+    expect(screen.getByText(/2m ago/i)).toBeInTheDocument();
+    expect(screen.getByText(/5m ago/i)).toBeInTheDocument();
+    expect(screen.getByText(/1h ago/i)).toBeInTheDocument();
+  });
+
+  it('renders as an ordered list', () => {
+    const { container } = render(<ActivityFeed items={items} />);
+    expect(container.querySelector('ol')).not.toBeNull();
+    expect(container.querySelectorAll('li')).toHaveLength(3);
+  });
+
+  it('shows descriptions when provided', () => {
+    render(<ActivityFeed items={items} />);
+    expect(screen.getByText(/Add OKLch token system/i)).toBeInTheDocument();
+    expect(screen.getByText(/Atlas — "Wire v8 routing"/i)).toBeInTheDocument();
+  });
+
+  it('renders the empty node when no items', () => {
+    render(<ActivityFeed items={[]} empty={<div>All quiet.</div>} />);
+    expect(screen.getByText(/All quiet\./i)).toBeInTheDocument();
+  });
+
+  it('hides description when not provided', () => {
+    render(<ActivityFeed items={[{ id: 'a', title: 'Single' }]} />);
+    expect(screen.getByText(/single/i)).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,90 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Bot } from 'lucide-react';
+import { AgentCard } from '../ui/agents/AgentCard';
+import { AgentActivity, type AgentActivityItem } from '../ui/agents/AgentActivity';
+
+describe('AgentCard', () => {
+  it('renders name, role, status badge', () => {
+    render(<AgentCard id="a1" name="Atlas" role="Lead researcher" status="busy" />);
+    expect(screen.getByText(/atlas/i)).toBeInTheDocument();
+    expect(screen.getByText(/lead researcher/i)).toBeInTheDocument();
+    expect(screen.getByText(/busy/i)).toBeInTheDocument();
+  });
+
+  it('shows current task and last activity + tasksToday', () => {
+    render(
+      <AgentCard
+        id="a1"
+        name="Atlas"
+        role="x"
+        status="busy"
+        currentTask="Writing sprint contract"
+        lastActivity="2m ago"
+        tasksToday={7}
+      />,
+    );
+    expect(screen.getByText(/writing sprint contract/i)).toBeInTheDocument();
+    expect(screen.getByText(/2m ago/i)).toBeInTheDocument();
+    expect(screen.getByText(/7 today/i)).toBeInTheDocument();
+  });
+
+  it('invokes onOpen when clicked', async () => {
+    const onOpen = vi.fn();
+    render(<AgentCard id="a1" name="Atlas" role="x" status="idle" onOpen={onOpen} />);
+    await userEvent.click(screen.getByRole('button', { name: /atlas/i }));
+    expect(onOpen).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders error status label', () => {
+    render(<AgentCard id="a1" name="Atlas" role="x" status="error" />);
+    expect(screen.getByText(/error/i)).toBeInTheDocument();
+  });
+});
+
+describe('AgentActivity', () => {
+  const items: AgentActivityItem[] = [
+    {
+      id: 'i1',
+      icon: <Bot size={14} aria-hidden="true" />,
+      title: 'Run started',
+      description: 'Picked up "Patch login bug"',
+      meta: '12:04',
+      tone: 'info',
+    },
+    {
+      id: 'i2',
+      title: 'Tool call',
+      description: 'grep',
+      meta: '12:05',
+    },
+    {
+      id: 'i3',
+      title: 'Run finished',
+      meta: '12:08',
+      tone: 'success',
+    },
+  ];
+
+  it('renders all items', () => {
+    render(<AgentActivity items={items} />);
+    expect(screen.getByText(/run started/i)).toBeInTheDocument();
+    expect(screen.getByText(/tool call/i)).toBeInTheDocument();
+    expect(screen.getByText(/run finished/i)).toBeInTheDocument();
+  });
+
+  it('renders as an ordered list', () => {
+    const { container } = render(<AgentActivity items={items} />);
+    expect(container.querySelector('ol')).not.toBeNull();
+  });
+
+  it('hides optional description and meta when absent', () => {
+    render(
+      <AgentActivity
+        items={[{ id: 'i1', title: 'Single' }]}
+      />,
+    );
+    expect(screen.getByText(/single/i)).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,135 @@
+/**
+ * Controls layer tests — Button, IconButton, Input, Checkbox, Switch, Toggle,
+ * Select, Slider. Covers rendering, a11y attributes, and event wiring.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  Button,
+  IconButton,
+  Input,
+  Checkbox,
+  Switch,
+  Toggle,
+  Slider,
+} from '../ui/index.js';
+
+describe('Button', () => {
+  it('renders with default variant and size', () => {
+    render(<Button>Save</Button>);
+    const btn = screen.getByRole('button', { name: /save/i });
+    expect(btn).toBeInTheDocument();
+    expect(btn).toHaveAttribute('type', 'button');
+  });
+
+  it('calls onClick when clicked', async () => {
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>Go</Button>);
+    await userEvent.click(screen.getByRole('button', { name: /go/i }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows loading spinner and disables interaction', () => {
+    render(<Button loading>Saving</Button>);
+    const btn = screen.getByRole('button', { name: /saving/i });
+    expect(btn).toBeDisabled();
+    expect(btn).toHaveAttribute('aria-busy', 'true');
+  });
+
+  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();
+  });
+
+  it('does not invoke onClick when disabled', async () => {
+    const onClick = vi.fn();
+    render(<Button disabled onClick={onClick}>X</Button>);
+    await userEvent.click(screen.getByRole('button', { name: /x/i }));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+});
+
+describe('IconButton', () => {
+  it('requires aria-label', () => {
+    render(<IconButton aria-label="Close">×</IconButton>);
+    expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
+  });
+
+  it('toggles active state', () => {
+    render(
+      <IconButton aria-label="Pin" active>
+        ★
+      </IconButton>,
+    );
+    const btn = screen.getByRole('button', { name: /pin/i });
+    expect(btn).toHaveAttribute('data-active', 'true');
+  });
+});
+
+describe('Input', () => {
+  it('renders with placeholder', () => {
+    render(<Input placeholder="Search…" aria-label="Search" />);
+    expect(screen.getByPlaceholderText(/search/i)).toBeInTheDocument();
+  });
+
+  it('forwards value via change handler', () => {
+    const onChange = vi.fn();
+    render(<Input aria-label="x" onChange={onChange} />);
+    fireEvent.change(screen.getByLabelText('x'), { target: { value: 'a' } });
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('renders leftAddon when provided', () => {
+    render(<Input leftAddon={<span data-testid="addon" />} aria-label="x" />);
+    expect(screen.getByTestId('addon')).toBeInTheDocument();
+  });
+});
+
+describe('Checkbox', () => {
+  it('renders with role=checkbox', () => {
+    render(<Checkbox aria-label="Accept" />);
+    expect(screen.getByRole('checkbox', { name: /accept/i })).toBeInTheDocument();
+  });
+
+  it('toggles checked state on click', async () => {
+    const onCheckedChange = vi.fn();
+    render(<Checkbox aria-label="Accept" onCheckedChange={onCheckedChange} />);
+    await userEvent.click(screen.getByRole('checkbox', { name: /accept/i }));
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+});
+
+describe('Switch', () => {
+  it('renders with role=switch', () => {
+    render(<Switch aria-label="Dark mode" />);
+    expect(screen.getByRole('switch', { name: /dark/i })).toBeInTheDocument();
+  });
+});
+
+describe('Toggle', () => {
+  it('renders with role=button and aria-pressed', () => {
+    render(<Toggle aria-label="Bold">B</Toggle>);
+    const btn = screen.getByRole('button', { name: /bold/i });
+    expect(btn).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('invokes onPressedChange when clicked', async () => {
+    const onPressedChange = vi.fn();
+    render(<Toggle aria-label="Bold" onPressedChange={onPressedChange}>B</Toggle>);
+    await userEvent.click(screen.getByRole('button', { name: /bold/i }));
+    expect(onPressedChange).toHaveBeenCalled();
+  });
+});
+
+describe('Slider', () => {
+  it('renders with role=slider', () => {
+    render(<Slider defaultValue={[50]} aria-label="Volume" />);
+    expect(screen.getByRole('slider', { name: /volume/i })).toBeInTheDocument();
+  });
+});

package/bizar-dash/src/web/v8/__tests__/cx.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { cx } from '../ui/utils/cx.js';
+
+describe('cx', () => {
+  it('returns a single class verbatim', () => {
+    expect(cx('btn')).toBe('btn');
+  });
+
+  it('joins truthy values with a space', () => {
+    expect(cx('btn', 'btn--primary', undefined, false, null)).toBe('btn btn--primary');
+  });
+
+  it('honors object conditionals', () => {
+    expect(cx('btn', { 'btn--active': true, 'btn--disabled': false })).toBe('btn btn--active');
+  });
+
+  it('lets later tailwind utilities win', () => {
+    expect(cx('p-2', 'p-4')).toBe('p-4');
+    expect(cx('text-red-500', 'text-blue-500')).toBe('text-blue-500');
+  });
+
+  it('drops falsy values without leaving double spaces', () => {
+    expect(cx('a', undefined, 'b', null, '', 'c')).toBe('a b c');
+  });
+});