@polderlabs/bizar 5.0.0 → 5.0.1

package/bizar-dash/tests/autosave.test.tsx

@@ -0,0 +1,276 @@
+/**
+ * tests/autosave.test.tsx
+ *
+ * Tests for useAutosave hook and AutosaveField component.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, waitFor, act, renderHook } from '@testing-library/react';
+import React from 'react';
+import { useAutosave } from '../src/web/hooks/useAutosave';
+import { AutosaveField } from '../src/web/components/AutosaveField';
+
+// ── useAutosave tests ────────────────────────────────────────────────────────
+
+describe('useAutosave', () => {
+  beforeEach(() => { vi.useFakeTimers({ shouldAdvanceTime: true }); });
+  afterEach(() => { vi.useRealTimers(); });
+
+  it('debounces save by the configured delay', async () => {
+    const saveFn = vi.fn().mockResolvedValue(undefined);
+    const { result } = renderHook(() => useAutosave('initial', saveFn, { delay: 500 }));
+
+    act(() => { result.current.setValue('changed'); });
+    expect(saveFn).not.toHaveBeenCalled();
+
+    act(() => { vi.advanceTimersByTime(500); });
+    expect(saveFn).toHaveBeenCalledTimes(1);
+    expect(saveFn).toHaveBeenCalledWith('changed');
+  });
+
+  it('saves immediately on flush', async () => {
+    const saveFn = vi.fn().mockResolvedValue(undefined);
+    const { result } = renderHook(() => useAutosave('initial', saveFn, { delay: 500 }));
+
+    act(() => { result.current.setValue('changed'); });
+    expect(saveFn).not.toHaveBeenCalled();
+
+    await act(async () => { await result.current.flush(); });
+    expect(saveFn).toHaveBeenCalledTimes(1);
+    expect(saveFn).toHaveBeenCalledWith('changed');
+  });
+
+  it('does not save if value has not changed', async () => {
+    const saveFn = vi.fn().mockResolvedValue(undefined);
+    const { result } = renderHook(() => useAutosave('initial', saveFn, { delay: 500 }));
+
+    act(() => { vi.advanceTimersByTime(600); });
+    expect(saveFn).not.toHaveBeenCalled();
+  });
+
+  it('exposes status transitions: idle → saving → saved → idle', async () => {
+    let resolve: (v: unknown) => void;
+    const saveFn = vi.fn().mockReturnValue(new Promise(r => (resolve = r)));
+    const { result } = renderHook(() => useAutosave('initial', saveFn, { delay: 500 }));
+
+    expect(result.current.status).toBe('idle');
+
+    act(() => { result.current.setValue('changed'); });
+    expect(result.current.status).toBe('idle'); // still debouncing
+
+    act(() => { vi.advanceTimersByTime(500); });
+    expect(result.current.status).toBe('saving');
+
+    await act(async () => { resolve!(); });
+    expect(result.current.status).toBe('saved');
+
+    act(() => { vi.advanceTimersByTime(2000); });
+    expect(result.current.status).toBe('idle');
+  });
+
+  it('exposes error status on save failure', async () => {
+    const saveFn = vi.fn().mockRejectedValue(new Error('network error'));
+    const { result } = renderHook(() => useAutosave('initial', saveFn, { delay: 500 }));
+
+    act(() => { result.current.setValue('changed'); });
+    act(() => { vi.advanceTimersByTime(500); });
+
+    await waitFor(() => {
+      expect(result.current.status).toBe('error');
+    });
+  });
+
+  it('flushes pending save on unmount', async () => {
+    const saveFn = vi.fn().mockResolvedValue(undefined);
+    const { result, unmount } = renderHook(() => useAutosave('initial', saveFn, { delay: 500 }));
+
+    act(() => { result.current.setValue('changed'); });
+    expect(saveFn).not.toHaveBeenCalled();
+
+    unmount();
+    expect(saveFn).toHaveBeenCalledTimes(1);
+  });
+});
+
+// ── AutosaveField tests ───────────────────────────────────────────────────────
+
+describe('AutosaveField', () => {
+  beforeEach(() => { vi.useFakeTimers({ shouldAdvanceTime: true }); });
+  afterEach(() => { vi.useRealTimers(); });
+
+  it('renders the input passed via render prop', () => {
+    const saveFn = vi.fn().mockResolvedValue(undefined);
+    render(
+      <AutosaveField
+        initialValue="hello"
+        saveFn={saveFn}
+        render={({ value, onChange }) => (
+          <input data-testid="input" value={value} onChange={e => onChange(e.target.value)} />
+        )}
+      />,
+    );
+    expect(screen.getByTestId('input')).toHaveValue('hello');
+  });
+
+  it('applies idle class to container by default', () => {
+    const saveFn = vi.fn().mockResolvedValue(undefined);
+    const { container } = render(
+      <AutosaveField
+        initialValue="test"
+        saveFn={saveFn}
+        render={({ value, onChange }) => (
+          <input value={value} onChange={e => onChange(e.target.value)} />
+        )}
+      />,
+    );
+    expect(container.querySelector('.autosave-field')).toHaveClass('autosave-field');
+    expect(container.querySelector('.autosave-field')).not.toHaveClass('saving');
+    expect(container.querySelector('.autosave-field')).not.toHaveClass('saved');
+    expect(container.querySelector('.autosave-field')).not.toHaveClass('error');
+  });
+
+  it('shows saving state during async save', async () => {
+    let resolve: (v: unknown) => void;
+    const saveFn = vi.fn().mockImplementation(async () => {
+      await new Promise(r => (resolve = r));
+    });
+    render(
+      <AutosaveField
+        initialValue="hello"
+        saveFn={saveFn}
+        render={({ value, onChange, onBlur }) => (
+          <input data-testid="input" value={value} onChange={e => onChange(e.target.value)} onBlur={onBlur} />
+        )}
+      />,
+    );
+
+    fireEvent.change(screen.getByTestId('input'), { target: { value: 'changed' } });
+    fireEvent.blur(screen.getByTestId('input'));
+
+    await waitFor(() => {
+      expect(document.querySelector('.autosave-field')).toHaveClass('saving');
+    });
+
+    act(() => { resolve!(); });
+  });
+
+  it('shows saved state after successful save', async () => {
+    const saveFn = vi.fn().mockResolvedValue(undefined);
+    render(
+      <AutosaveField
+        initialValue="hello"
+        saveFn={saveFn}
+        render={({ value, onChange, onBlur }) => (
+          <input data-testid="input" value={value} onChange={e => onChange(e.target.value)} onBlur={onBlur} />
+        )}
+      />,
+    );
+
+    fireEvent.change(screen.getByTestId('input'), { target: { value: 'changed' } });
+    fireEvent.blur(screen.getByTestId('input'));
+
+    await waitFor(() => {
+      expect(document.querySelector('.autosave-field')).toHaveClass('saving');
+    });
+
+    act(() => { vi.advanceTimersByTime(50); });
+
+    await waitFor(() => {
+      expect(document.querySelector('.autosave-field')).toHaveClass('saved');
+    });
+  });
+
+  it('shows error state on failed save', async () => {
+    const saveFn = vi.fn().mockRejectedValue(new Error('network error'));
+    render(
+      <AutosaveField
+        initialValue="hello"
+        saveFn={saveFn}
+        render={({ value, onChange, onBlur }) => (
+          <input data-testid="input" value={value} onChange={e => onChange(e.target.value)} onBlur={onBlur} />
+        )}
+      />,
+    );
+
+    fireEvent.change(screen.getByTestId('input'), { target: { value: 'changed' } });
+    fireEvent.blur(screen.getByTestId('input'));
+
+    await waitFor(() => {
+      expect(document.querySelector('.autosave-field')).toHaveClass('error');
+    });
+  });
+
+  it('saves immediately on blur when debounce is pending (done typing)', async () => {
+    const saveFn = vi.fn().mockResolvedValue(undefined);
+    render(
+      <AutosaveField
+        initialValue="hello"
+        delay={800}
+        saveFn={saveFn}
+        render={({ value, onChange, onBlur }) => (
+          <input data-testid="input" value={value} onChange={e => onChange(e.target.value)} onBlur={onBlur} />
+        )}
+      />,
+    );
+
+    fireEvent.change(screen.getByTestId('input'), { target: { value: 'typing...' } });
+    // Blur immediately — since user is done typing, save fires immediately
+    // (debounce is pending but blur triggers immediate save instead)
+    fireEvent.blur(screen.getByTestId('input'));
+
+    // saveFn should be called immediately on blur
+    expect(saveFn).toHaveBeenCalledTimes(1);
+    expect(saveFn).toHaveBeenCalledWith('typing...');
+
+    // Debounce timer should have been cleared — no duplicate save
+    act(() => { vi.advanceTimersByTime(800); });
+    expect(saveFn).toHaveBeenCalledTimes(1); // still 1, not 2
+  });
+
+  it('saves pending value on unmount', async () => {
+    const saveFn = vi.fn().mockResolvedValue(undefined);
+    const { unmount } = render(
+      <AutosaveField
+        initialValue="test"
+        saveFn={saveFn}
+        render={({ value, onChange }) => (
+          <input data-testid="input" value={value} onChange={e => onChange(e.target.value)} />
+        )}
+      />,
+    );
+
+    // Simulate user typing (schedules debounce)
+    fireEvent.change(screen.getByTestId('input'), { target: { value: 'unsaved' } });
+
+    // Unmount before debounce fires
+    unmount();
+
+    // saveFn should have been called with the pending value
+    await act(async () => { vi.advanceTimersByTime(50); });
+    expect(saveFn).toHaveBeenCalledWith('unsaved');
+  });
+
+  it('renders status icon when saving', async () => {
+    let resolve: (v: unknown) => void;
+    const saveFn = vi.fn().mockImplementation(async () => {
+      await new Promise(r => (resolve = r));
+    });
+    render(
+      <AutosaveField
+        initialValue="hello"
+        saveFn={saveFn}
+        render={({ value, onChange, onBlur }) => (
+          <input data-testid="input" value={value} onChange={e => onChange(e.target.value)} onBlur={onBlur} />
+        )}
+      />,
+    );
+
+    fireEvent.change(screen.getByTestId('input'), { target: { value: 'changed' } });
+    fireEvent.blur(screen.getByTestId('input'));
+
+    await waitFor(() => {
+      expect(document.querySelector('.autosave-status')).toBeInTheDocument();
+    });
+
+    act(() => { resolve!(); });
+  });
+});

package/bizar-dash/tests/chat-composer.test.tsx

@@ -0,0 +1,140 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { ChatComposer } from '../src/web/components/chat/ChatComposer';
+
+// Mock the enhancePrompt API
+vi.mock('../src/web/lib/api', () => ({
+  enhancePrompt: vi.fn().mockResolvedValue('enhanced prompt'),
+}));
+
+// Mock lucide-react — use importOriginal to preserve all real icons,
+// then override only the ones we need to stub
+vi.mock('lucide-react', async (importOriginal) => {
+  const actual = await importOriginal() as Record<string, unknown>;
+  return {
+    ...actual,
+    Send: () => <svg data-testid="send-icon" />,
+    Paperclip: () => <svg data-testid="paperclip-icon" />,
+    X: () => <svg data-testid="x-icon" />,
+    Sparkles: () => <svg data-testid="sparkles-icon" />,
+    Bot: () => <svg data-testid="bot-icon" />,
+    ChevronDown: () => <svg data-testid="chevron-down-icon" />,
+  };
+});
+
+function makeProps() {
+  return {
+    agent: 'test-agent',
+    setAgent: vi.fn(),
+    model: 'test-model',
+    setModel: vi.fn(),
+    text: '',
+    setText: vi.fn(),
+    sending: false,
+    onSend: vi.fn(),
+    attachments: [] as string[],
+    setAttachments: vi.fn(),
+    suggestions: [] as Array<{ cmd: string; desc: string }>,
+    onPickSuggestion: vi.fn(),
+    agents: [{ name: 'test-agent' }],
+    onAttach: vi.fn(),
+  };
+}
+
+describe('ChatComposer sizing', () => {
+  it('renders a textarea inside the composer', () => {
+    render(<ChatComposer {...makeProps()} />);
+    const textarea = screen.getByRole('textbox');
+    expect(textarea).toBeInTheDocument();
+  });
+
+  it('composer pill exists with the correct class', () => {
+    const { container } = render(<ChatComposer {...makeProps()} />);
+    const pill = container.querySelector('.chat-composer-pill');
+    expect(pill).not.toBeNull();
+  });
+
+  it('send button exists with correct class', () => {
+    const { container } = render(<ChatComposer {...makeProps()} />);
+    const sendBtn = container.querySelector('.chat-send-btn');
+    expect(sendBtn).not.toBeNull();
+  });
+
+  it('textarea starts with rows=1 for compact single-line appearance', () => {
+    render(<ChatComposer {...makeProps()} />);
+    const textarea = screen.getByRole('textbox');
+    expect(textarea.getAttribute('rows')).toBe('1');
+  });
+});
+
+describe('ChatComposer auto-grow', () => {
+  it('setText is called on each keystroke (controlled component)', async () => {
+    const user = userEvent.setup();
+    const props = makeProps();
+    render(<ChatComposer {...props} />);
+    const textarea = screen.getByRole('textbox');
+    await user.click(textarea);
+    // user.type fires input events which trigger onChange → setText
+    await user.type(textarea, 'hello');
+    // setText is called for each character in a controlled component
+    expect(props.setText.mock.calls.length).toBeGreaterThanOrEqual(5);
+  });
+
+  it('empty state shows send message placeholder', () => {
+    render(<ChatComposer {...makeProps()} />);
+    const textarea = screen.getByRole('textbox');
+    expect(textarea).toHaveAttribute('placeholder', 'Send a message…');
+  });
+
+  it('sending state shows sending placeholder', () => {
+    const props = makeProps();
+    props.sending = true;
+    render(<ChatComposer {...props} />);
+    const textarea = screen.getByRole('textbox');
+    expect(textarea).toHaveAttribute('placeholder', 'Sending…');
+  });
+});
+
+describe('ChatComposer interactions', () => {
+  it('calls onSend when send button is clicked', async () => {
+    const user = userEvent.setup();
+    const props = makeProps();
+    const { rerender } = render(<ChatComposer {...props} />);
+    // Simulate typing: update the text prop as a real state would
+    props.text = 'hello world';
+    rerender(<ChatComposer {...props} />);
+    const sendBtn = document.querySelector('.chat-send-btn') as HTMLButtonElement;
+    await user.click(sendBtn);
+    expect(props.onSend).toHaveBeenCalled();
+  });
+
+  it('does not call onSend when textarea is empty', async () => {
+    const user = userEvent.setup();
+    const props = makeProps();
+    render(<ChatComposer {...props} />);
+    const sendBtn = document.querySelector('.chat-send-btn') as HTMLButtonElement;
+    await user.click(sendBtn);
+    expect(props.onSend).not.toHaveBeenCalled();
+  });
+
+  it('setText is called on input change', async () => {
+    const user = userEvent.setup();
+    const props = makeProps();
+    render(<ChatComposer {...props} />);
+    const textarea = screen.getByRole('textbox');
+    await user.click(textarea);
+    await user.keyboard('typed text');
+    // For controlled components, setText is called per-keystroke.
+    // Verify it was called multiple times (once per character)
+    expect(props.setText.mock.calls.length).toBeGreaterThanOrEqual(10);
+  });
+
+  it('textarea is disabled while sending', () => {
+    const props = makeProps();
+    props.sending = true;
+    render(<ChatComposer {...props} />);
+    const textarea = screen.getByRole('textbox');
+    expect(textarea).toBeDisabled();
+  });
+});

package/bizar-dash/tests/components/doctor-panel.test.tsx

@@ -0,0 +1,105 @@
+// tests/components/doctor-panel.test.tsx — v6.0.0
+//
+// Tests for the reusable DoctorPanel component. Verifies:
+//   - Renders the category title and check rows with status pills
+//   - Empty state when no checks / info / children
+//   - info list renders below checks
+//   - children bypasses the default check-list render
+
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { DoctorPanel } from '../../src/web/components/DoctorPanel';
+import type { DoctorCheck } from '../../src/web/lib/types';
+
+const checks: DoctorCheck[] = [
+  { name: 'node', status: 'ok', message: 'v22.16.0 on linux/x64' },
+  { name: 'memory', status: 'warn', message: 'rss 612.4 MB' },
+  { name: 'opencode', status: 'fail', message: 'serve-info missing' },
+];
+
+describe('DoctorPanel', () => {
+  it('renders the category title from defaults', () => {
+    render(<DoctorPanel category="system" checks={checks} />);
+    expect(screen.getByText('System health')).toBeInTheDocument();
+  });
+
+  it('renders one row per check, with name + message', () => {
+    render(<DoctorPanel category="services" checks={checks} />);
+    expect(screen.getByText('node')).toBeInTheDocument();
+    expect(screen.getByText('memory')).toBeInTheDocument();
+    expect(screen.getByText('opencode')).toBeInTheDocument();
+    expect(screen.getByText('v22.16.0 on linux/x64')).toBeInTheDocument();
+    expect(screen.getByText('rss 612.4 MB')).toBeInTheDocument();
+    expect(screen.getByText('serve-info missing')).toBeInTheDocument();
+  });
+
+  it('renders the status pill text per row', () => {
+    render(<DoctorPanel category="services" checks={checks} />);
+    expect(screen.getAllByText('ok').length).toBeGreaterThanOrEqual(1);
+    expect(screen.getAllByText('warn').length).toBeGreaterThanOrEqual(1);
+    expect(screen.getAllByText('fail').length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('shows the empty state when no checks / info / children are passed', () => {
+    render(<DoctorPanel category="errors" checks={[]} />);
+    expect(screen.getByText('No recent errors')).toBeInTheDocument();
+  });
+
+  it('renders the info list when info rows are supplied', () => {
+    render(
+      <DoctorPanel
+        category="counts"
+        checks={[]}
+        info={[
+          { label: 'Tasks', value: 42 },
+          { label: 'Mods', value: 5 },
+        ]}
+      />,
+    );
+    expect(screen.getByText('Tasks')).toBeInTheDocument();
+    expect(screen.getByText('Mods')).toBeInTheDocument();
+    expect(screen.getByText('42')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+
+  it('renders children when provided, bypassing the default check-list', () => {
+    render(
+      <DoctorPanel category="actions" checks={[]}>
+        <div data-testid="custom-child">Run Check</div>
+      </DoctorPanel>,
+    );
+    expect(screen.getByTestId('custom-child')).toBeInTheDocument();
+    expect(screen.getByText('Actions')).toBeInTheDocument();
+  });
+
+  it('honors an explicit title override', () => {
+    render(
+      <DoctorPanel
+        category="system"
+        title="My custom title"
+        checks={[]}
+      />,
+    );
+    expect(screen.getByText('My custom title')).toBeInTheDocument();
+    expect(screen.queryByText('System health')).not.toBeInTheDocument();
+  });
+
+  it('renders the meta string when supplied', () => {
+    render(
+      <DoctorPanel
+        category="system"
+        checks={[]}
+        meta="linux/x64"
+      />,
+    );
+    expect(screen.getByText('linux/x64')).toBeInTheDocument();
+  });
+
+  it('applies the category-specific class to the card', () => {
+    const { container } = render(
+      <DoctorPanel category="services" checks={checks} />,
+    );
+    const card = container.querySelector('.doctor-panel-services');
+    expect(card).toBeInTheDocument();
+  });
+});