@polderlabs/bizar 4.5.1 → 4.7.0

package/bizar-dash/tests/frontend-bugfixes.test.mjs

@@ -0,0 +1,151 @@
+// bizar-dash/tests/frontend-bugfixes.test.mjs
+// Lightweight verification of dashboard web + build bug fixes.
+// Run with: node --test bizar-dash/tests/frontend-bugfixes.test.mjs
+
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { describe, it } from 'node:test';
+
+// import.meta.dirname = /.../BizarHarness/bizar-dash/tests
+// So project root is up 2 levels
+const ROOT    = import.meta.dirname;                              // .../BizarHarness/bizar-dash/tests
+const PROJECT = resolve(ROOT, '..', '..');                        // .../BizarHarness/
+const DASH    = resolve(ROOT, '..');                             // .../BizarHarness/bizar-dash/
+
+function read(file) {
+  return readFileSync(resolve(PROJECT, file), 'utf-8');
+}
+function dash(file) {
+  return readFileSync(resolve(DASH, file), 'utf-8');
+}
+
+describe('W1: vite.config.ts sourcemap: hidden', () => {
+  it("sourcemap is 'hidden'", () => {
+    const content = read('vite.config.ts');
+    if (!content.includes("sourcemap: 'hidden'")) {
+      throw new Error("vite.config.ts missing sourcemap: 'hidden'");
+    }
+    if (content.includes('sourcemap: true')) {
+      throw new Error('vite.config.ts still contains sourcemap: true');
+    }
+  });
+});
+
+describe('W2: .npmignore excludes source maps and tests', () => {
+  it('excludes .map files from dist', () => {
+    const c = read('.npmignore');
+    if (!c.includes('bizar-dash/dist/**/*.map')) throw new Error('.npmignore missing bizar-dash/dist/**/*.map');
+  });
+  it('excludes **/__tests__/', () => {
+    const c = read('.npmignore');
+    if (!c.includes('**/__tests__/')) throw new Error('.npmignore missing **/__tests__/');
+  });
+  it('excludes **/*.test.mjs', () => {
+    const c = read('.npmignore');
+    if (!c.includes('**/*.test.mjs')) throw new Error('.npmignore missing **/*.test.mjs');
+  });
+  it('excludes **/*.test.ts', () => {
+    const c = read('.npmignore');
+    if (!c.includes('**/*.test.ts')) throw new Error('.npmignore missing **/*.test.ts');
+  });
+  it('excludes **/*.test.tsx', () => {
+    const c = read('.npmignore');
+    if (!c.includes('**/*.test.tsx')) throw new Error('.npmignore missing **/*.test.tsx');
+  });
+});
+
+describe('W3: Toast.tsx accessibility', () => {
+  it('ToastItem has role="alert"', () => {
+    const c = dash('src/web/components/Toast.tsx');
+    if (!c.includes('role="alert"')) throw new Error('Toast.tsx missing role="alert"');
+  });
+  it('ToastItem has aria-live="assertive"', () => {
+    const c = dash('src/web/components/Toast.tsx');
+    if (!c.includes('aria-live="assertive"')) throw new Error('Toast.tsx missing aria-live="assertive"');
+  });
+  it('ToastItem has aria-atomic="true"', () => {
+    const c = dash('src/web/components/Toast.tsx');
+    if (!c.includes('aria-atomic="true"')) throw new Error('Toast.tsx missing aria-atomic="true"');
+  });
+});
+
+describe('W4: App.tsx Suspense wrapper', () => {
+  it('Suspense imported from react', () => {
+    const c = dash('src/web/App.tsx');
+    if (!c.includes('Suspense')) throw new Error('App.tsx missing Suspense import');
+  });
+  it('renderedView wrapped in Suspense', () => {
+    const c = dash('src/web/App.tsx');
+    if (!c.includes('<Suspense')) throw new Error('App.tsx missing <Suspense> wrapper');
+  });
+});
+
+describe('W5: React.memo on view components', () => {
+  const views = [
+    ['Tasks',       dash('src/web/views/Tasks.tsx')],
+    ['Settings',    dash('src/web/views/Settings.tsx')],
+    ['Memory',      dash('src/web/views/Memory.tsx')],
+    ['Overview',    dash('src/web/views/Overview.tsx')],
+    ['Skills',      dash('src/web/views/Skills.tsx')],
+    ['MiniMaxUsage',dash('src/web/views/MiniMaxUsage.tsx')],
+  ];
+  for (const [name, content] of views) {
+    it(`${name} is wrapped in React.memo`, () => {
+      // Pattern: const Name = React.memo(...) or export const Name = React.memo(...)
+      if (!content.includes('React.memo(')) {
+        throw new Error(`${name} is not wrapped in React.memo`);
+      }
+    });
+  }
+});
+
+describe('W6: Topbar ARIA roles', () => {
+  const c = dash('src/web/components/Topbar.tsx');
+  it('tabs-row has role="tablist"', () => { if (!c.includes('role="tablist"')) throw new Error('Topbar missing role="tablist"'); });
+  it('tabs-row has aria-label="Primary tabs"', () => { if (!c.includes('aria-label="Primary tabs"')) throw new Error('Topbar missing aria-label="Primary tabs"'); });
+  it('tab buttons have role="tab"', () => { if (!c.includes('role="tab"')) throw new Error('Topbar missing role="tab"'); });
+  it('tab buttons have aria-selected', () => { if (!c.includes('aria-selected=')) throw new Error('Topbar missing aria-selected on tabs'); });
+});
+
+describe('F1: Manual snapshot refetch removed from file change WS event', () => {
+  it("'change' WS handler no longer calls api.get('/snapshot')", () => {
+    const c = dash('src/web/App.tsx');
+    const idx = c.indexOf("msg.type === 'change'");
+    if (idx === -1) throw new Error("msg.type === 'change' not found");
+    const block = c.slice(idx, idx + 600);
+    if (block.includes("api.get<Snapshot>('/snapshot')") || block.includes('api.get("/snapshot")')) {
+      throw new Error("Manual api.get('/snapshot') still present in 'change' handler");
+    }
+  });
+});
+
+describe('F2: content-visibility: auto on list items', () => {
+  it('.activity-item has content-visibility: auto (main.css)', () => {
+    const c = dash('src/web/styles/main.css');
+    const i = c.indexOf('.activity-item');
+    if (!c.slice(i, i + 500).includes('content-visibility: auto')) {
+      throw new Error('.activity-item missing content-visibility: auto in main.css');
+    }
+  });
+  it('.task-card has content-visibility: auto (main.css)', () => {
+    const c = dash('src/web/styles/main.css');
+    const i = c.indexOf('.task-card');
+    if (!c.slice(i, i + 500).includes('content-visibility: auto')) {
+      throw new Error('.task-card missing content-visibility: auto in main.css');
+    }
+  });
+  it('.chat-message has content-visibility: auto (chat.css)', () => {
+    const c = dash('src/web/styles/chat.css');
+    const i = c.indexOf('.chat-message');
+    if (!c.slice(i, i + 300).includes('content-visibility: auto')) {
+      throw new Error('.chat-message missing content-visibility: auto in chat.css');
+    }
+  });
+  it('.task-card has content-visibility: auto (tasks.css)', () => {
+    const c = dash('src/web/styles/tasks.css');
+    const i = c.indexOf('.task-card');
+    if (!c.slice(i, i + 500).includes('content-visibility: auto')) {
+      throw new Error('.task-card missing content-visibility: auto in tasks.css');
+    }
+  });
+});

package/bizar-dash/tests/hooks/useModal.test.tsx

@@ -0,0 +1,84 @@
+import { render, screen, renderHook } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect } from 'vitest';
+import { ModalProvider, useModal } from '../../src/web/components/Modal';
+
+function TestHarness() {
+  const modal = useModal();
+  return (
+    <div>
+      <button onClick={() => modal.open({ title: 'Dialog', children: <p>Content</p> })}>
+        Open
+      </button>
+      <span data-testid="modal-open">{String(modal.isModalOpen)}</span>
+    </div>
+  );
+}
+
+describe('useModal', () => {
+  it('isModalOpen starts as false', () => {
+    render(
+      <ModalProvider>
+        <TestHarness />
+      </ModalProvider>,
+    );
+
+    expect(screen.getByTestId('modal-open')).toHaveTextContent('false');
+  });
+
+  it('open() renders a modal dialog', async () => {
+    const user = userEvent.setup();
+    render(
+      <ModalProvider>
+        <TestHarness />
+      </ModalProvider>,
+    );
+
+    await user.click(screen.getByText('Open'));
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText('Dialog')).toBeInTheDocument();
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+
+  it('close() removes the dialog', async () => {
+    const user = userEvent.setup();
+
+    function HarnessWithClose() {
+      const modal = useModal();
+      return (
+        <div>
+          <button
+            onClick={() =>
+              modal.open({
+                title: 'Dialog',
+                children: <p>Content</p>,
+                footer: <button onClick={() => modal.close()}>Close Modal</button>,
+              })
+            }
+          >
+            Open
+          </button>
+        </div>
+      );
+    }
+
+    render(
+      <ModalProvider>
+        <HarnessWithClose />
+      </ModalProvider>,
+    );
+
+    await user.click(screen.getByText('Open'));
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+    await user.click(screen.getByText('Close Modal'));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('returns fallback api when no provider is present', () => {
+    const { result } = renderHook(() => useModal());
+    expect(result.current.isModalOpen).toBe(false);
+    expect(result.current.open({ children: <p>test</p> })).toBe('');
+    expect(() => result.current.close()).not.toThrow();
+  });
+});

package/bizar-dash/tests/hooks/useToast.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen, act, renderHook } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { ToastProvider, useToast } from '../../src/web/components/Toast';
+
+function TestHarness() {
+  const toast = useToast();
+  return (
+    <div>
+      <button onClick={() => toast.success('Success toast body')}>Trigger Success</button>
+      <button onClick={() => toast.error('Error toast body')}>Trigger Error</button>
+      <button onClick={() => toast.info('Info toast body')}>Trigger Info</button>
+    </div>
+  );
+}
+
+describe('useToast', () => {
+  it('calling success() renders a toast', async () => {
+    const user = userEvent.setup();
+    render(
+      <ToastProvider>
+        <TestHarness />
+      </ToastProvider>,
+    );
+
+    await user.click(screen.getByText('Trigger Success'));
+    expect(screen.getByText('Success toast body')).toBeInTheDocument();
+  });
+
+  it('calling error() renders an error toast', async () => {
+    const user = userEvent.setup();
+    render(
+      <ToastProvider>
+        <TestHarness />
+      </ToastProvider>,
+    );
+
+    await user.click(screen.getByText('Trigger Error'));
+    expect(screen.getByText('Error toast body')).toBeInTheDocument();
+  });
+
+  it('returns fallback api when no provider is present', () => {
+    const { result } = renderHook(() => useToast());
+    expect(result.current.toasts).toEqual([]);
+    expect(result.current.isModalOpen).toBeUndefined();
+    // Calling methods should not throw
+    expect(() => result.current.show('test')).not.toThrow();
+    expect(() => result.current.dismiss(1)).not.toThrow();
+  });
+});

package/bizar-dash/tests/lib/i18n.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { t, setLocale, getLocale } from '../../src/web/lib/i18n';
+
+describe('i18n', () => {
+  it('t() returns the key if no translation exists', () => {
+    expect(t('nonexistent.key')).toBe('nonexistent.key');
+  });
+
+  it('t() returns translation if registered', () => {
+    setLocale('en', { 'hello': 'Hello World' });
+    expect(t('hello')).toBe('Hello World');
+  });
+
+  it('setLocale() switches locale and getLocale() reflects it', () => {
+    setLocale('en');
+    expect(getLocale()).toBe('en');
+
+    setLocale('fr');
+    expect(getLocale()).toBe('fr');
+
+    setLocale('de', { greet: 'Hallo' });
+    expect(getLocale()).toBe('de');
+    expect(t('greet')).toBe('Hallo');
+  });
+
+  it('supports variable interpolation with {varName} syntax', () => {
+    setLocale('en', {
+      greeting: 'Hello, {name}!',
+      ageMsg: '{name} is {age} years old',
+    });
+    expect(t('greeting', { name: 'World' })).toBe('Hello, World!');
+    expect(t('ageMsg', { name: 'Alice', age: 30 })).toBe('Alice is 30 years old');
+  });
+
+  it('falls back to en translations when current locale is missing a key', () => {
+    setLocale('en', { shared: 'English text' });
+    setLocale('fr', { local: 'Texte français' });
+
+    // 'shared' is not in fr, should fall back to en
+    expect(t('shared')).toBe('English text');
+    // 'local' is in fr
+    expect(t('local')).toBe('Texte français');
+    // Neither locale has this
+    expect(t('missing')).toBe('missing');
+  });
+});

package/bizar-dash/tests/lib/utils.test.ts

@@ -0,0 +1,194 @@
+import { describe, it, expect, vi } from 'vitest';
+import {
+  cn,
+  formatRelative,
+  formatTime,
+  truncate,
+  debounce,
+  statusBadgeKind,
+  hashText,
+  autoTitleFromContent,
+} from '../../src/web/lib/utils';
+
+describe('cn', () => {
+  it('joins class names', () => {
+    expect(cn('a', 'b')).toBe('a b');
+  });
+
+  it('filters falsy values', () => {
+    expect(cn('a', false, null, undefined, 'b')).toBe('a b');
+  });
+
+  it('returns empty string with no args', () => {
+    expect(cn()).toBe('');
+  });
+});
+
+describe('formatRelative', () => {
+  it('returns empty string for null/undefined', () => {
+    expect(formatRelative(null)).toBe('');
+    expect(formatRelative(undefined)).toBe('');
+  });
+
+  it('returns "just now" for recent timestamps', () => {
+    expect(formatRelative(Date.now())).toBe('just now');
+    expect(formatRelative(Date.now() + 1000)).toBe('just now');
+  });
+
+  it('returns minutes', () => {
+    const fiveMinAgo = Date.now() - 5 * 60_000;
+    expect(formatRelative(fiveMinAgo)).toBe('5m ago');
+  });
+
+  it('returns hours', () => {
+    const twoHoursAgo = Date.now() - 2 * 3_600_000;
+    expect(formatRelative(twoHoursAgo)).toBe('2h ago');
+  });
+
+  it('returns days', () => {
+    const threeDaysAgo = Date.now() - 3 * 86_400_000;
+    expect(formatRelative(threeDaysAgo)).toBe('3d ago');
+  });
+
+  it('returns localized date for older timestamps', () => {
+    const oldDate = Date.now() - 30 * 86_400_000;
+    const result = formatRelative(oldDate);
+    expect(result).not.toMatch(/^(just now|\d+[mhd] ago)$/);
+    expect(result.length).toBeGreaterThan(0);
+  });
+});
+
+describe('formatTime', () => {
+  it('returns empty for null/undefined', () => {
+    expect(formatTime(null)).toBe('');
+    expect(formatTime(undefined)).toBe('');
+  });
+
+  it('formats a Date object', () => {
+    const d = new Date('2024-06-15T12:00:00');
+    const result = formatTime(d);
+    expect(result).toBe(d.toLocaleString());
+  });
+
+  it('formats a timestamp number', () => {
+    const ts = new Date('2024-06-15T12:00:00').getTime();
+    expect(formatTime(ts)).toBe(new Date(ts).toLocaleString());
+  });
+});
+
+describe('truncate', () => {
+  it('returns empty for null/undefined', () => {
+    expect(truncate(null)).toBe('');
+    expect(truncate(undefined)).toBe('');
+  });
+
+  it('returns string as-is when shorter than max', () => {
+    expect(truncate('hello', 10)).toBe('hello');
+  });
+
+  it('truncates with ellipsis when longer than max', () => {
+    expect(truncate('hello world this is long', 10)).toBe('hello worl…');
+  });
+
+  it('uses default max of 160', () => {
+    const short = 'a'.repeat(100);
+    expect(truncate(short)).toBe(short);
+    const long = 'a'.repeat(200);
+    expect(truncate(long)).toHaveLength(161);
+    expect(truncate(long)).toMatch(/…$/);
+  });
+});
+
+describe('debounce', () => {
+  it('delays execution', () => {
+    vi.useFakeTimers();
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+
+    debounced();
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledOnce();
+    vi.useRealTimers();
+  });
+
+  it('calls with the latest arguments', () => {
+    vi.useFakeTimers();
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+
+    debounced('a');
+    debounced('b');
+    vi.advanceTimersByTime(100);
+
+    expect(fn).toHaveBeenCalledOnce();
+    expect(fn).toHaveBeenCalledWith('b');
+    vi.useRealTimers();
+  });
+});
+
+describe('statusBadgeKind', () => {
+  it('returns success for approved/done', () => {
+    expect(statusBadgeKind('approved')).toBe('success');
+    expect(statusBadgeKind('done')).toBe('success');
+  });
+
+  it('returns empty for draft/queued', () => {
+    expect(statusBadgeKind('draft')).toBe('');
+    expect(statusBadgeKind('queued')).toBe('');
+  });
+
+  it('returns info for in-progress/doing', () => {
+    expect(statusBadgeKind('in-progress')).toBe('info');
+    expect(statusBadgeKind('doing')).toBe('info');
+  });
+
+  it('returns error for rejected', () => {
+    expect(statusBadgeKind('rejected')).toBe('error');
+  });
+
+  it('returns accent for unknown statuses', () => {
+    expect(statusBadgeKind('unknown')).toBe('accent');
+  });
+});
+
+describe('hashText', () => {
+  it('returns a string', () => {
+    expect(typeof hashText('hello')).toBe('string');
+  });
+
+  it('is deterministic', () => {
+    expect(hashText('hello')).toBe(hashText('hello'));
+  });
+
+  it('differs for different inputs', () => {
+    expect(hashText('hello')).not.toBe(hashText('world'));
+  });
+});
+
+describe('autoTitleFromContent', () => {
+  it('extracts first non-empty line', () => {
+    expect(autoTitleFromContent('Hello world')).toBe('Hello world');
+  });
+
+  it('strips markdown heading markers', () => {
+    expect(autoTitleFromContent('## My Feature')).toBe('My Feature');
+  });
+
+  it('generates fallback title when body is empty', () => {
+    const result = autoTitleFromContent('');
+    expect(result).toMatch(/^Untitled task/);
+  });
+
+  it('returns empty when fallback is false and body is empty', () => {
+    expect(autoTitleFromContent('', false)).toBe('');
+  });
+
+  it('truncates long first lines', () => {
+    const long = 'a'.repeat(100);
+    const result = autoTitleFromContent(long);
+    expect(result.length).toBeLessThan(long.length);
+    expect(result).toMatch(/…$/);
+  });
+});