@polderlabs/bizar 6.3.0 → 7.0.1

package/bizar-dash/tests/communication-log.test.tsx

@@ -0,0 +1,67 @@
+// tests/communication-log.test.tsx — F-036 Goal Planner UI.
+// Renders the CommunicationLog component with a mocked Ws class so
+// we can drive agent:* events through the handler without opening a
+// real socket.
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import { ToastProvider } from '../src/web/components/Toast';
+import { CommunicationLog } from '../src/web/components/agents/CommunicationLog';
+
+type Handler = (msg: { type: string; ts?: number } & Record<string, unknown>) => void;
+
+let registeredHandler: Handler | null = null;
+
+vi.mock('../src/web/lib/ws', () => ({
+  Ws: class {
+    constructor() {}
+    on(handler: Handler) {
+      registeredHandler = handler;
+      return () => { registeredHandler = null; };
+    }
+    close() {}
+  },
+}));
+
+function wrap(node: React.ReactNode) {
+  return <ToastProvider>{node}</ToastProvider>;
+}
+
+function emit(type: string, payload: Record<string, unknown> = {}) {
+  if (!registeredHandler) throw new Error('no ws handler registered');
+  act(() => {
+    registeredHandler!({ type, ts: Date.now(), ...payload });
+  });
+}
+
+beforeEach(() => {
+  registeredHandler = null;
+});
+
+describe('CommunicationLog', () => {
+  it('renders empty state when no messages have arrived', () => {
+    render(wrap(<CommunicationLog />));
+    expect(screen.getByTestId('communication-log-empty')).toBeInTheDocument();
+    expect(screen.getByTestId('communication-log-count').textContent?.trim()).toBe('0');
+  });
+
+  it('renders a single agent:status message', () => {
+    render(wrap(<CommunicationLog />));
+    emit('agent:status', { agent: { name: 'Odin', status: 'working' } });
+    expect(screen.getByTestId('communication-log-count').textContent?.trim()).toBe('1');
+    const rows = screen.getAllByTestId('communication-log-row');
+    expect(rows.length).toBe(1);
+    expect(rows[0].getAttribute('data-kind')).toBe('status');
+  });
+
+  it('renders multiple agent:* messages in reverse order', () => {
+    render(wrap(<CommunicationLog />));
+    emit('agent:status', { agent: { name: 'Odin', status: 'working' } });
+    emit('agent:restarted', { agent: { name: 'Thor' } });
+    emit('agent:message', { message: { from: 'Thor', to: 'Odin', text: 'done' } });
+    const rows = screen.getAllByTestId('communication-log-row');
+    expect(rows.length).toBe(3);
+    expect(rows[0].getAttribute('data-kind')).toBe('message');
+    expect(rows[1].getAttribute('data-kind')).toBe('restarted');
+    expect(rows[2].getAttribute('data-kind')).toBe('status');
+  });
+});

package/bizar-dash/tests/dep-graph.test.tsx

@@ -0,0 +1,40 @@
+// tests/dep-graph.test.tsx — F-036 Goal Planner UI.
+// Renders the DependencyGraph component with and without a plan.
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { DependencyGraph } from '../src/web/components/agents/DependencyGraph';
+import type { Plan } from '../src/web/lib/goapPlanner';
+
+function makePlan(): Plan {
+  return {
+    id: 'plan_x',
+    goal: 'Build it, test it, deploy it.',
+    steps: [
+      { id: 's1', action: 'build', title: 'Build the artifact', agent: 'Thor', description: 'Construct the artifact end-to-end.', effects: ['artifact_built'], deps: [], status: 'pending', estimatedCost: 3, estimatedDurationMs: 120000 },
+      { id: 's2', action: 'test', title: 'Run the tests', agent: 'Forseti', description: 'Run the test suite.', effects: ['tests_passing'], deps: ['s1'], status: 'pending', estimatedCost: 2, estimatedDurationMs: 60000 },
+      { id: 's3', action: 'deploy', title: 'Deploy to production', agent: 'Heimdall', description: 'Promote the artifact to production.', effects: ['deployed'], deps: ['s2'], status: 'pending', estimatedCost: 2, estimatedDurationMs: 60000 },
+    ],
+    totalCost: 7,
+    totalDurationMs: 240000,
+    goalEffects: ['artifact_built', 'tests_passing', 'deployed'],
+  };
+}
+
+describe('DependencyGraph', () => {
+  it('renders an empty-state card when no plan is supplied', () => {
+    render(<DependencyGraph plan={null} />);
+    expect(screen.getByTestId('dep-graph')).toBeInTheDocument();
+    expect(screen.getByText(/Submit a goal/i)).toBeInTheDocument();
+  });
+
+  it('renders the canvas when a plan is supplied', () => {
+    render(<DependencyGraph plan={makePlan()} />);
+    expect(screen.getByTestId('dep-graph-canvas')).toBeInTheDocument();
+  });
+
+  it('renders three step nodes when a three-step plan is supplied', () => {
+    render(<DependencyGraph plan={makePlan()} />);
+    const nodes = document.querySelectorAll('.dep-node');
+    expect(nodes.length).toBe(3);
+  });
+});

package/bizar-dash/tests/event-log.test.tsx

@@ -0,0 +1,61 @@
+// tests/event-log.test.tsx — F-036 Goal Planner UI.
+// Renders the RealTimeEventLog with a mocked Ws class.
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import { ToastProvider } from '../src/web/components/Toast';
+import { RealTimeEventLog } from '../src/web/components/agents/RealTimeEventLog';
+
+type Handler = (msg: { type: string; ts?: number } & Record<string, unknown>) => void;
+let registeredHandler: Handler | null = null;
+
+vi.mock('../src/web/lib/ws', () => ({
+  Ws: class {
+    constructor() {}
+    on(handler: Handler) {
+      registeredHandler = handler;
+      return () => { registeredHandler = null; };
+    }
+    close() {}
+  },
+}));
+
+function wrap(node: React.ReactNode) {
+  return <ToastProvider>{node}</ToastProvider>;
+}
+
+function emit(type: string, payload: Record<string, unknown> = {}) {
+  if (!registeredHandler) throw new Error('no ws handler registered');
+  act(() => {
+    registeredHandler!({ type, ts: Date.now(), ...payload });
+  });
+}
+
+beforeEach(() => {
+  registeredHandler = null;
+});
+
+describe('RealTimeEventLog', () => {
+  it('renders empty state when no events arrived', () => {
+    render(wrap(<RealTimeEventLog />));
+    expect(screen.getByTestId('event-log-empty')).toBeInTheDocument();
+    expect(screen.getByTestId('event-log-count').textContent?.trim()).toBe('0');
+  });
+
+  it('renders a single info event', () => {
+    render(wrap(<RealTimeEventLog />));
+    emit('tasks:change', { task: { id: 't1' } });
+    const rows = screen.getAllByTestId('event-log-row');
+    expect(rows.length).toBe(1);
+    expect(rows[0].getAttribute('data-severity')).toBe('info');
+  });
+
+  it('renders multiple events with severity coding', () => {
+    render(wrap(<RealTimeEventLog />));
+    emit('task:progress', { taskId: 't1', progress: 50 });
+    emit('agent:stuck', { agents: [{ name: 'Odin' }] });
+    emit('goal:planned', { planId: 'p1' });
+    const rows = screen.getAllByTestId('event-log-row');
+    expect(rows.length).toBe(3);
+    expect(screen.getByTestId('event-log-count').textContent?.trim()).toBe('3');
+  });
+});

package/bizar-dash/tests/goal-input.test.tsx

@@ -0,0 +1,72 @@
+// tests/goal-input.test.tsx — F-036 Goal Planner UI.
+// Renders the GoalInput textarea + submit, mocks the API client,
+// and verifies the planner endpoint is called with the trimmed
+// goal text.
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ToastProvider } from '../src/web/components/Toast';
+import { GoalInput } from '../src/web/components/goals/GoalInput';
+import type { Plan } from '../src/web/lib/goapPlanner';
+
+const mockApiPost = vi.fn();
+
+vi.mock('../src/web/lib/api', () => ({
+  api: {
+    post: (...args: unknown[]) => mockApiPost(...args),
+  },
+}));
+
+function makePlan(): Plan {
+  return {
+    id: 'plan_test',
+    goal: 'Build it',
+    steps: [
+      { id: 's1', action: 'build', title: 'Build', agent: 'Thor', description: 'Build.', effects: ['artifact_built'], deps: [], status: 'pending', estimatedCost: 3, estimatedDurationMs: 120000 },
+    ],
+    totalCost: 3,
+    totalDurationMs: 120000,
+    goalEffects: ['artifact_built'],
+  };
+}
+
+function wrap(node: React.ReactNode) {
+  return <ToastProvider>{node}</ToastProvider>;
+}
+
+beforeEach(() => {
+  mockApiPost.mockReset();
+  mockApiPost.mockResolvedValue(makePlan());
+});
+
+describe('GoalInput', () => {
+  it('renders a textarea and a submit button', () => {
+    render(wrap(<GoalInput />));
+    expect(screen.getByTestId('goal-input-textarea')).toBeInTheDocument();
+    expect(screen.getByTestId('goal-input-submit')).toBeInTheDocument();
+    expect(screen.getByTestId('goal-input-counter').textContent).toMatch(/0 \/ 4000/);
+  });
+
+  it('submits the trimmed goal to the planner endpoint and emits the plan', async () => {
+    const user = userEvent.setup();
+    const onPlan = vi.fn();
+    render(wrap(<GoalInput onPlan={onPlan} />));
+    const textarea = screen.getByTestId('goal-input-textarea');
+    await user.type(textarea, '   Research quantum.   ');
+    const submit = screen.getByTestId('goal-input-submit');
+    await user.click(submit);
+    await waitFor(() => expect(mockApiPost).toHaveBeenCalledTimes(1));
+    expect(mockApiPost).toHaveBeenCalledWith('/goal-planner/plan', { goal: 'Research quantum.' });
+    await waitFor(() => expect(onPlan).toHaveBeenCalledTimes(1));
+    expect(onPlan.mock.calls[0][0].id).toBe('plan_test');
+  });
+
+  it('does not submit when the textarea is empty', async () => {
+    const user = userEvent.setup();
+    render(wrap(<GoalInput />));
+    const submit = screen.getByTestId('goal-input-submit');
+    expect(submit).toBeDisabled();
+    await user.click(submit).catch(() => undefined);
+    expect(mockApiPost).not.toHaveBeenCalled();
+  });
+});

package/bizar-dash/tests/goap-planner.test.ts

@@ -0,0 +1,68 @@
+// tests/goap-planner.test.ts — F-036 Goal Planner UI.
+// Verifies the pure-TS A* planner: clause split, verb mapping,
+// dependency link, total cost rollup.
+import { describe, it, expect } from 'vitest';
+import {
+  planGoal,
+  splitGoalClauses,
+  extractVerb,
+  clauseToAction,
+  planDependencyEdges,
+  type Plan,
+} from '../src/web/lib/goapPlanner';
+
+describe('goapPlanner — clauses', () => {
+  it('splits a multi-clause goal on sentence boundaries', () => {
+    const clauses = splitGoalClauses('Research quantum. Then build a demo. Finally deploy it.');
+    expect(clauses.length).toBe(3);
+  });
+
+  it('extracts the leading verb after stripping polite prefixes', () => {
+    expect(extractVerb('Research the topic')).toBe('research');
+    expect(extractVerb('Please build it')).toBe('build');
+    expect(extractVerb('We should test the change')).toBe('test');
+  });
+
+  it('maps known verbs to action templates with effects', () => {
+    const t = clauseToAction('Deploy the artifact');
+    expect(t.name).toBe('deploy');
+    expect(t.effect).toBe('deployed');
+  });
+});
+
+describe('goapPlanner — planGoal', () => {
+  it('produces a plan with at least one step for a simple goal', () => {
+    const plan = planGoal('Research quantum computing.');
+    expect(plan.id.length).toBeGreaterThan(0);
+    expect(plan.goal).toBe('Research quantum computing.');
+    expect(plan.steps.length).toBeGreaterThan(0);
+    expect(plan.totalCost).toBeGreaterThan(0);
+    expect(plan.totalDurationMs).toBeGreaterThan(0);
+  });
+
+  it('links dep steps via effect-to-id resolution', () => {
+    const plan = planGoal('Design, build, test, and deploy the API.');
+    // Build depends on design_drafted (from the design step).
+    const build = plan.steps.find((s) => s.action === 'build' || s.action === 'implement');
+    expect(build).toBeDefined();
+    expect(build!.deps.length).toBeGreaterThan(0);
+  });
+
+  it('returns a plan whose dependency edges cover the dep list', () => {
+    const plan: Plan = planGoal('Plan it, build it, test it.');
+    const edges = planDependencyEdges(plan);
+    expect(edges.length).toBeGreaterThan(0);
+    // Every edge must reference a known step id.
+    const ids = new Set(plan.steps.map((s) => s.id));
+    for (const e of edges) {
+      expect(ids.has(e.from)).toBe(true);
+      expect(ids.has(e.to)).toBe(true);
+    }
+  });
+
+  it('caps step count at 8 to keep A* tractable', () => {
+    const goal = 'Research. Investigate. Analyze. Plan. Design. Architect. Build. Implement. Create. Add. Test. Review. Document. Deploy. Commit. Publish.';
+    const plan = planGoal(goal);
+    expect(plan.steps.length).toBeLessThanOrEqual(8);
+  });
+});

package/bizar-dash/tests/quality-gates.test.tsx

@@ -0,0 +1,59 @@
+// tests/quality-gates.test.tsx — F-036 Goal Planner UI.
+// Renders the QualityGates panel with empty, single, and multi
+// metrics so the pass/warn/fail logic is observable.
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { QualityGates } from '../src/web/components/agents/QualityGates';
+
+const baseMetrics = {
+  compileCheck: false,
+  testCoverage: 0,
+  archScore: 0,
+  evidencePresent: false,
+};
+
+describe('QualityGates', () => {
+  it('renders four gate rows when metrics are empty', () => {
+    render(<QualityGates plan={null} metrics={baseMetrics} />);
+    const rows = screen.getAllByTestId('quality-gates-row');
+    expect(rows.length).toBe(4);
+    // None of the gates should be passing on a fresh install.
+    expect(rows.every((r) => r.getAttribute('data-status') !== 'passed')).toBe(true);
+  });
+
+  it('renders all gates as passing when metrics are at threshold', () => {
+    render(
+      <QualityGates
+        plan={null}
+        metrics={{
+          compileCheck: true,
+          testCoverage: 85,
+          archScore: 92,
+          evidencePresent: true,
+        }}
+      />,
+    );
+    const rows = screen.getAllByTestId('quality-gates-row');
+    expect(rows.length).toBe(4);
+    expect(rows.every((r) => r.getAttribute('data-status') === 'passed')).toBe(true);
+  });
+
+  it('renders mixed pass/warn/fail when metrics are heterogeneous', () => {
+    render(
+      <QualityGates
+        plan={null}
+        metrics={{
+          compileCheck: true,
+          testCoverage: 65, // warning
+          archScore: 50, // failed
+          evidencePresent: false,
+        }}
+      />,
+    );
+    const rows = screen.getAllByTestId('quality-gates-row');
+    const statuses = rows.map((r) => r.getAttribute('data-status'));
+    expect(statuses).toContain('passed');
+    expect(statuses).toContain('warning');
+    expect(statuses).toContain('failed');
+  });
+});

package/bizar-dash/tests/setup.ts

@@ -1,6 +1,36 @@
 import '@testing-library/jest-dom/vitest';
 import { cleanup } from '@testing-library/react';
-import { afterEach } from 'vitest';
+import { afterEach, vi } from 'vitest';
+
+// jsdom doesn't ship ResizeObserver, but @xyflow/react (and other
+// layout libs) expect it to be present. Stub a no-op so React renders
+// don't crash when a component mounts a graph.
+if (typeof globalThis.ResizeObserver === 'undefined') {
+  globalThis.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as unknown as typeof ResizeObserver;
+}
+
+// Similarly for matchMedia — used by some component libs that the
+// dashboard pulls in. jsdom ships an empty stub but it lacks the
+// addEventListener/removeEventListener pair that React 18 expects.
+if (typeof window !== 'undefined' && !window.matchMedia) {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+}
 
 afterEach(() => {
   cleanup();

package/bizar-dash/tests/ui/controls/Button.test.tsx

@@ -0,0 +1,50 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button } from '../../../src/web/ui/controls/Button';
+
+describe('Button', () => {
+  it('renders its children', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+  });
+
+  it('fires onClick when clicked', async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    render(<Button onClick={onClick}>Go</Button>);
+    await user.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<Button disabled>Off</Button>);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('shows the spinner and disables clicks when loading', async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    render(<Button loading onClick={onClick}>Saving</Button>);
+    const btn = screen.getByRole('button');
+    expect(btn).toBeDisabled();
+    expect(btn.querySelector('.btn-spinner')).toBeInTheDocument();
+    await user.click(btn);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('applies variant and size classes', () => {
+    const { container } = render(
+      <Button variant="primary" size="lg">
+        Primary
+      </Button>,
+    );
+    const btn = container.firstChild as HTMLElement;
+    expect(btn).toHaveClass('btn-primary', 'btn-size-lg');
+  });
+
+  it('renders as full-width when fullWidth is true', () => {
+    render(<Button fullWidth>Wide</Button>);
+    expect(screen.getByRole('button')).toHaveClass('btn-full');
+  });
+});

package/bizar-dash/tests/ui/controls/Checkbox.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Checkbox } from '../../../src/web/ui/controls/Checkbox';
+
+describe('Checkbox', () => {
+  it('renders with the supplied label', () => {
+    render(<Checkbox checked={false} onChange={() => {}} label="Accept" />);
+    expect(screen.getByRole('checkbox', { name: 'Accept' })).toBeInTheDocument();
+  });
+
+  it('fires onChange(true) when clicked', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Checkbox checked={false} onChange={onChange} label="X" />);
+    await user.click(screen.getByRole('checkbox'));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('toggles checked visually when checked is true', () => {
+    render(<Checkbox checked onChange={() => {}} label="X" data-testid="c" />);
+    expect(screen.getByTestId('c')).toHaveClass('checkbox-checked');
+  });
+
+  it('renders indeterminate state class', () => {
+    render(
+      <Checkbox
+        checked={false}
+        indeterminate
+        onChange={() => {}}
+        label="X"
+        data-testid="c"
+      />,
+    );
+    expect(screen.getByTestId('c')).toHaveClass('checkbox-indeterminate');
+  });
+
+  it('is disabled when disabled is set', () => {
+    render(
+      <Checkbox checked={false} onChange={() => {}} label="X" disabled />,
+    );
+    expect(screen.getByRole('checkbox')).toBeDisabled();
+  });
+});

package/bizar-dash/tests/ui/controls/IconButton.test.tsx

@@ -0,0 +1,37 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Star } from 'lucide-react';
+import { IconButton } from '../../../src/web/ui/controls/IconButton';
+
+describe('IconButton', () => {
+  it('renders an accessible button with the supplied label', () => {
+    render(<IconButton aria-label="Star" icon={<Star data-testid="i" />} />);
+    expect(screen.getByRole('button', { name: 'Star' })).toBeInTheDocument();
+  });
+
+  it('forwards onClick', async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <IconButton aria-label="X" icon={<Star />} onClick={onClick} />,
+    );
+    await user.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies variant + size classes', () => {
+    const { container } = render(
+      <IconButton aria-label="X" icon={<Star />} variant="danger" size="lg" />,
+    );
+    const btn = container.firstChild as HTMLElement;
+    expect(btn).toHaveClass('icon-btn-danger', 'icon-btn-size-lg');
+  });
+
+  it('is disabled when disabled is set', () => {
+    render(
+      <IconButton aria-label="X" icon={<Star />} disabled />,
+    );
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+});

package/bizar-dash/tests/ui/controls/Kbd.test.tsx

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Kbd } from '../../../src/web/ui/controls/Kbd';
+
+describe('Kbd', () => {
+  it('renders its children as text content', () => {
+    render(<Kbd>K</Kbd>);
+    expect(screen.getByText('K')).toBeInTheDocument();
+  });
+
+  it('renders a <kbd> element with the kbd class', () => {
+    const { container } = render(<Kbd>X</Kbd>);
+    const el = container.querySelector('kbd');
+    expect(el).toBeInTheDocument();
+    expect(el).toHaveClass('kbd');
+  });
+
+  it('passes through HTML attributes', () => {
+    render(
+      <Kbd id="shortcut-1" data-testid="k">
+        ⌘
+      </Kbd>,
+    );
+    const el = screen.getByTestId('k');
+    expect(el.id).toBe('shortcut-1');
+    expect(el.tagName).toBe('KBD');
+  });
+
+  it('combines user className with the kbd class via cx', () => {
+    render(
+      <Kbd data-testid="k" className="extra">
+        K
+      </Kbd>,
+    );
+    const el = screen.getByTestId('k');
+    expect(el).toHaveClass('kbd');
+    expect(el).toHaveClass('extra');
+  });
+});

package/bizar-dash/tests/ui/controls/NumberInput.test.tsx

@@ -0,0 +1,56 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NumberInput } from '../../../src/web/ui/controls/NumberInput';
+
+describe('NumberInput', () => {
+  it('renders a spinbox with the numeric value', () => {
+    render(<NumberInput value={5} onChange={() => {}} />);
+    const input = screen.getByRole('spinbutton');
+    expect(input).toHaveValue(5);
+  });
+
+  it('accepts a string value', () => {
+    render(<NumberInput value="12" onChange={() => {}} />);
+    const input = screen.getByRole('spinbutton');
+    expect(input).toHaveValue(12);
+  });
+
+  it('fires onChange with a number when typing digits', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<NumberInput value={0} onChange={onChange} />);
+    const input = screen.getByRole('spinbutton');
+    input.focus();
+    await user.type(input, '7');
+    expect(onChange).toHaveBeenCalled();
+    const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1]?.[0];
+    expect(typeof lastCall === 'number' || lastCall === '07').toBe(true);
+  });
+
+  it('forwards min/max/step', () => {
+    render(
+      <NumberInput
+        value={1}
+        onChange={() => {}}
+        min={0}
+        max={10}
+        step={0.5}
+      />,
+    );
+    const input = screen.getByRole('spinbutton') as HTMLInputElement;
+    expect(input.min).toBe('0');
+    expect(input.max).toBe('10');
+    expect(input.step).toBe('0.5');
+  });
+
+  it('applies error class when error is set', () => {
+    render(<NumberInput value={1} onChange={() => {}} error="bad" />);
+    expect(screen.getByRole('spinbutton')).toHaveClass('field-error');
+  });
+
+  it('is disabled when disabled is set', () => {
+    render(<NumberInput value={1} onChange={() => {}} disabled />);
+    expect(screen.getByRole('spinbutton')).toBeDisabled();
+  });
+});