beads-ui 0.1.1 → 0.2.0

package/.prettierignore

@@ -1,5 +0,0 @@
-node_modules
-coverage
-dist
-.beads
-

package/AGENTS.md

@@ -1,85 +0,0 @@
-# Agents
-
-## Beads (bd) — Work Tracking
-
-Use MCP `beads` (bd) as our dependency‑aware issue tracker. Run
-`beads/quickstart` to learn how to use it.
-
-### Issue Types
-
-- `bug` - Something broken that needs fixing
-- `feature` - New functionality
-- `task` - Work item (tests, docs, refactoring)
-- `epic` - Large feature composed of multiple issues
-- `chore` - Maintenance work (dependencies, tooling)
-
-### Priorities
-
-- `0` - Critical (security, data loss, broken builds)
-- `1` - High (major features, important bugs)
-- `2` - Medium (nice-to-have features, minor bugs)
-- `3` - Low (polish, optimization)
-- `4` - Backlog (future ideas)
-
-### Dependency Types
-
-- `blocks` - Hard dependency (issue X blocks issue Y)
-- `related` - Soft relationship (issues are connected)
-- `parent-child` - Epic/subtask relationship
-- `discovered-from` - Track issues discovered during work
-
-Only `blocks` dependencies affect the ready work queue.
-
-### Structured Fields and Labels
-
-- Use issue `type` and `priority` fields.
-- Use issue type "epic" and `parent-child` dependencies.
-- Use `related` or `discovered-from` dependencies.
-- Area pointers are labels, e.g.: `frontend`, `backend`
-
-### Agent Workflow
-
-If no issue is specified, run `bd ready` and claim an unblocked issue.
-
-1. Open issue with `bd show <id>` and read all linked docs.
-2. Assign to `agent`, update status as you work (`in_progress` → `closed`);
-   maintain dependencies, and attach notes/links for traceability.
-3. Discover new work? Create linked issue with dependency
-   `discovered-from:<parent-id>`.
-4. Land the change; run tests/lint; update any referenced docs.
-5. Close the issue with `bd close <id>`.
-
-## Coding Standards
-
-- Use ECMAScript modules.
-- Classes, interfaces, and factory types use `PascalCase`.
-- Functions and methods use `camelCase`.
-- Variables and parameters use `lower_snake_case`, unless they refer to a
-  function or class.
-- Constants are `UPPER_SNAKE_CASE`.
-- File and directory names are `kebab-case`.
-- Use `.js` files with JSDoc type annotations (TypeScript mode).
-- Use `.ts` files only for interface definitions.
-- Type only imports: `@import { X, Y, Z } from './file.js` in top-of-file JSDoc.
-- Add JSDoc to all functions and methods with `@param` (and `@returns` for non
-  trivial return types).
-- Annotate local variables with `@type` blocks if their type is not obvious from
-  the initializer.
-- Use blocks for all control flow statements, even single-line bodies.
-- Avoid runtime type checks, undefined/null checks and optional chaining
-  operators (`?.`, `??`) unless strictly necessary.
-
-## Unit Testing Standards
-
-- Write short, focused test-case functions asserting one behavior each.
-- Do not use "should" in test names; use verbs like "returns", "throws",
-  "emits", or "calls"
-- Structure: setup → execution → assertion (separate with blank lines).
-- Never change implementation code to make tests pass.
-
-## Pre‑Handoff Validation
-
-- Run type checks: `npm run typecheck`
-- Run tests: `npm test`
-- Run eslint: `npm run lint`
-- Run prettier: `npm run format`

package/app/data/providers.test.js

@@ -1,126 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import { createDataLayer } from './providers.js';
-
-// Using a minimal fixture shaped like epic-status-example.json
-const epicFixture = [
-  {
-    epic: {
-      id: 'WK-1',
-      title: 'Example Epic',
-      description: 'Example',
-      acceptance_criteria: 'Demo',
-      notes: '',
-      status: 'open',
-      priority: 1,
-      issue_type: 'epic',
-      created_at: '2025-10-21T00:00:00.000Z',
-      updated_at: '2025-10-21T00:00:00.000Z'
-    },
-    total_children: 2,
-    closed_children: 1,
-    eligible_for_close: false
-  }
-];
-
-/**
- * @returns {{ calls: { type: string, payload: any }[], send: (type: string, payload?: any) => Promise<any> }}
- */
-function makeTransportRecorder() {
-  /** @type {{ type: string, payload: any }[]} */
-  const calls = [];
-  return {
-    calls,
-    /**
-     * @param {string} type
-     * @param {any} [payload]
-     */
-    async send(type, payload) {
-      calls.push({ type, payload });
-      // default fake payloads
-      if (type === 'epic-status') {
-        return [];
-      }
-      if (type === 'list-issues') {
-        return [];
-      }
-      if (type === 'show-issue') {
-        return { id: payload?.id || 'X' };
-      }
-      if (
-        type === 'update-status' ||
-        type === 'update-priority' ||
-        type === 'edit-text' ||
-        type === 'update-assignee'
-      ) {
-        return { id: payload?.id || 'X' };
-      }
-      return null;
-    }
-  };
-}
-
-describe('data/providers', () => {
-  test('getClosed requests list-issues with status and limit=10 by default', async () => {
-    const rec = makeTransportRecorder();
-    const data = createDataLayer((t, p) => rec.send(t, p));
-    await data.getClosed();
-    const last = rec.calls[rec.calls.length - 1];
-    expect(last.type).toBe('list-issues');
-    expect(last.payload.filters.status).toBe('closed');
-    expect(last.payload.filters.limit).toBe(10);
-  });
-
-  test('getInProgress requests list-issues with status=in_progress', async () => {
-    const rec = makeTransportRecorder();
-    const data = createDataLayer((t, p) => rec.send(t, p));
-    await data.getInProgress();
-    const last = rec.calls[rec.calls.length - 1];
-    expect(last.type).toBe('list-issues');
-    expect(last.payload.filters.status).toBe('in_progress');
-  });
-
-  test('getReady uses list-issues with ready:true', async () => {
-    const rec = makeTransportRecorder();
-    const data = createDataLayer((t, p) => rec.send(t, p));
-    await data.getReady();
-    const last = rec.calls[rec.calls.length - 1];
-    expect(last.type).toBe('list-issues');
-    expect(last.payload.filters.ready).toBe(true);
-  });
-
-  test('getEpicStatus calls epic-status and returns fixture-shaped data', async () => {
-    const rec = makeTransportRecorder();
-    const data = createDataLayer(async (t, p) => {
-      if (t === 'epic-status') {
-        rec.calls.push({ type: t, payload: p });
-        return epicFixture;
-      }
-      return rec.send(t, p);
-    });
-    const res = await data.getEpicStatus();
-    const last = rec.calls[rec.calls.length - 1];
-    expect(last.type).toBe('epic-status');
-    expect(Array.isArray(res)).toBe(true);
-    // basic shape check from fixture
-    // @ts-ignore
-    expect(res[0].epic?.id).toBeDefined();
-  });
-
-  test('updateIssue dispatches field-specific mutations', async () => {
-    const rec = makeTransportRecorder();
-    const data = createDataLayer((t, p) => rec.send(t, p));
-    await data.updateIssue({
-      id: 'UI-1',
-      title: 'X',
-      acceptance: 'Y',
-      status: 'in_progress',
-      priority: 2,
-      assignee: 'max'
-    });
-    const types = rec.calls.map((c) => c.type);
-    expect(types).toContain('edit-text');
-    expect(types).toContain('update-status');
-    expect(types).toContain('update-priority');
-    expect(types).toContain('update-assignee');
-  });
-});

package/app/main.board-switch.test.js

@@ -1,94 +0,0 @@
-import { describe, expect, test, vi } from 'vitest';
-import { bootstrap } from './main.js';
-
-// Mock the Board view to manipulate DOM content deterministically
-vi.mock('./views/board.js', () => ({
-  /**
-   * @param {HTMLElement} mount
-   */
-  createBoardView: (mount) => ({
-    async load() {
-      // Simulate a rendered board shell
-      mount.innerHTML = '<div class="panel__body board-root"></div>';
-    },
-    clear() {
-      // No-op in this test; we no longer depend on clearing when switching views
-    }
-  })
-}));
-
-// Mock WS client to avoid network and provide minimal data
-vi.mock('./ws.js', () => ({
-  createWsClient: () => ({
-    /**
-     * @param {string} type
-     */
-    async send(type) {
-      if (type === 'list-issues') {
-        return [];
-      }
-      if (type === 'show-issue') {
-        return null;
-      }
-      if (type === 'epic-status') {
-        return [];
-      }
-      return null;
-    },
-    on() {
-      return () => {};
-    },
-    close() {},
-    getState() {
-      return 'open';
-    }
-  })
-}));
-
-describe('board visibility on view change', () => {
-  test('hides board when leaving and shows again when returning', async () => {
-    // Start on issues, then go to board so subscribers are active
-    window.location.hash = '#/issues';
-    document.body.innerHTML = '<main id="app"></main>';
-    const root = /** @type {HTMLElement} */ (document.getElementById('app'));
-
-    bootstrap(root);
-
-    // Allow initial render to flush
-    await Promise.resolve();
-    await Promise.resolve();
-
-    const boardRoot = /** @type {HTMLElement} */ (
-      document.getElementById('board-root')
-    );
-
-    // Navigate to board
-    window.location.hash = '#/board';
-    window.dispatchEvent(new HashChangeEvent('hashchange'));
-    await Promise.resolve();
-    await Promise.resolve();
-
-    // Board is visible and rendered with its internal shell
-    expect(boardRoot.hidden).toBe(false);
-    expect(boardRoot.querySelector('.board-root')).not.toBeNull();
-
-    // Navigate away to issues
-    window.location.hash = '#/issues';
-    window.dispatchEvent(new HashChangeEvent('hashchange'));
-
-    await Promise.resolve();
-    await Promise.resolve();
-
-    // Board route gets hidden but DOM may remain; CSS [hidden] must hide it
-    expect(boardRoot.hidden).toBe(true);
-    expect(boardRoot.querySelector('.board-root')).not.toBeNull();
-
-    // Go back to Board, content is still there (or re-rendered by load)
-    window.location.hash = '#/board';
-    window.dispatchEvent(new HashChangeEvent('hashchange'));
-    await Promise.resolve();
-    await Promise.resolve();
-    expect(boardRoot.hidden).toBe(false);
-    expect(boardRoot.querySelector('.board-root')).not.toBeNull();
-  });
-});

package/app/main.deep-link.test.js

@@ -1,64 +0,0 @@
-import { describe, expect, test, vi } from 'vitest';
-// Import after mocking
-import { bootstrap } from './main.js';
-
-// Mock WS client before importing the app
-const calls = [];
-const issues = [
-  { id: 'UI-1', title: 'One', status: 'open', priority: 1 },
-  { id: 'UI-2', title: 'Two', status: 'open', priority: 2 }
-];
-vi.mock('./ws.js', () => ({
-  createWsClient: () => ({
-    /**
-     * @param {string} type
-     * @param {any} payload
-     */
-    async send(type, payload) {
-      calls.push({ type, payload });
-      if (type === 'list-issues') {
-        return issues;
-      }
-      if (type === 'show-issue') {
-        const id = /** @type {any} */ (payload).id;
-        const it = issues.find((i) => i.id === id);
-        return it || null;
-      }
-      return null;
-    },
-    on() {
-      return () => {};
-    },
-    close() {},
-    getState() {
-      return 'open';
-    }
-  })
-}));
-
-describe('deep link on initial load (UI-44)', () => {
-  test('loads detail and highlights list item when hash includes issue id', async () => {
-    window.location.hash = '#/issue/UI-2';
-    document.body.innerHTML = '<main id="app"></main>';
-    const root = /** @type {HTMLElement} */ (document.getElementById('app'));
-
-    bootstrap(root);
-
-    // Allow async loads to complete
-    await Promise.resolve();
-    await Promise.resolve();
-
-    const detailId = /** @type {HTMLElement} */ (
-      document.querySelector('#detail-panel .detail-title .detail-id')
-    );
-    expect(detailId && detailId.textContent).toBe('#2');
-
-    const list = /** @type {HTMLElement} */ (
-      document.getElementById('list-root')
-    );
-    const selected = /** @type {HTMLElement|null} */ (
-      list.querySelector('tr.issue-row.selected')
-    );
-    expect(selected && selected.getAttribute('data-issue-id')).toBe('UI-2');
-  });
-});

package/app/main.live-updates.test.js

@@ -1,229 +0,0 @@
-import { describe, expect, test, vi } from 'vitest';
-import { bootstrap } from './main.js';
-
-// Provide a mutable client instance for module-level mock
-/** @type {any} */
-let CLIENT = null;
-vi.mock('./ws.js', () => ({
-  createWsClient: () => CLIENT
-}));
-
-describe('live updates: issues-changed handling', () => {
-  test('refreshes list only when on issues view and preserves scroll', async () => {
-    /** @type {{ send: import('vitest').Mock, on: (t: string, h: (p:any)=>void)=>void, trigger: (t:string, p:any)=>void }} */
-    CLIENT = {
-      send: vi.fn(async (type) => {
-        if (type === 'list-issues') {
-          return [
-            { id: 'UI-1', title: 'A', status: 'open' },
-            { id: 'UI-2', title: 'B', status: 'open' }
-          ];
-        }
-        if (type === 'show-issue') {
-          return { id: 'UI-1' };
-        }
-        if (type === 'epic-status') {
-          return [];
-        }
-        return null;
-      }),
-      /**
-       * @param {string} _type
-       * @param {(p:any)=>void} handler
-       */
-      on(_type, handler) {
-        this._handler = handler;
-        return () => {};
-      },
-      /**
-       * @param {string} type
-       * @param {any} payload
-       */
-      trigger(type, payload) {
-        if (type === 'issues-changed' && this._handler) this._handler(payload);
-      },
-      close() {},
-      getState() {
-        return 'open';
-      }
-    };
-
-    document.body.innerHTML = '<main id="app"></main>';
-    const root = /** @type {HTMLElement} */ (document.getElementById('app'));
-
-    bootstrap(root);
-    await Promise.resolve();
-
-    // Simulate a scrolled list container
-    const listRoot = /** @type {HTMLElement} */ (
-      document.getElementById('list-root')
-    );
-    if (listRoot) {
-      listRoot.scrollTop = 120;
-    }
-
-    const callsBefore = CLIENT.send.mock.calls.length;
-    CLIENT.trigger('issues-changed', { ts: Date.now() });
-    await Promise.resolve();
-
-    const callsAfter = CLIENT.send.mock.calls.length;
-    // One additional list-issues request, no detail fetch
-    const newCalls = CLIENT.send.mock.calls.slice(callsBefore);
-    const types = newCalls.map(/** @param {any} c */ (c) => c[0]);
-    expect(types).toEqual(['list-issues']);
-
-    // Scroll should remain
-    const listRootAfter = /** @type {HTMLElement} */ (
-      document.getElementById('list-root')
-    );
-    expect(listRootAfter.scrollTop).toBe(120);
-    expect(callsAfter).toBe(callsBefore + 1);
-  });
-
-  test('refreshes detail only when detail is visible and id matches hint', async () => {
-    /** @type {{ send: import('vitest').Mock, on: (t: string, h: (p:any)=>void)=>void, trigger: (t:string, p:any)=>void }} */
-    CLIENT = {
-      send: vi.fn(async (type, payload) => {
-        if (type === 'list-issues') {
-          return [];
-        }
-        if (type === 'show-issue') {
-          return { id: payload.id };
-        }
-        if (type === 'epic-status') {
-          return [];
-        }
-        return null;
-      }),
-      /**
-       * @param {string} _type
-       * @param {(p:any)=>void} handler
-       */
-      on(_type, handler) {
-        this._handler = handler;
-        return () => {};
-      },
-      /**
-       * @param {string} type
-       * @param {any} payload
-       */
-      trigger(type, payload) {
-        if (type === 'issues-changed' && this._handler) this._handler(payload);
-      },
-      close() {},
-      getState() {
-        return 'open';
-      }
-    };
-
-    // Navigate to detail view
-    window.location.hash = '#/issue/UI-1';
-    document.body.innerHTML = '<main id="app"></main>';
-    const root = /** @type {HTMLElement} */ (document.getElementById('app'));
-
-    bootstrap(root);
-    await Promise.resolve();
-
-    CLIENT.send.mockClear();
-    CLIENT.trigger('issues-changed', {
-      ts: Date.now(),
-      hint: { ids: ['UI-1'] }
-    });
-    await Promise.resolve();
-
-    const calls = CLIENT.send.mock.calls.map(/** @param {any} c */ (c) => c[0]);
-    expect(calls).toEqual(['show-issue']);
-  });
-
-  test('refreshes epics when epics view visible', async () => {
-    CLIENT = {
-      send: vi.fn(async (type) => {
-        if (type === 'epic-status') {
-          return [];
-        }
-        return [];
-      }),
-      /**
-       * @param {string} _type
-       * @param {(p:any)=>void} handler
-       */
-      on(_type, handler) {
-        this._handler = handler;
-        return () => {};
-      },
-      /**
-       * @param {string} type
-       * @param {any} payload
-       */
-      trigger(type, payload) {
-        if (type === 'issues-changed' && this._handler) this._handler(payload);
-      },
-      close() {},
-      getState() {
-        return 'open';
-      }
-    };
-
-    window.location.hash = '#/epics';
-    document.body.innerHTML = '<main id="app"></main>';
-    const root = /** @type {HTMLElement} */ (document.getElementById('app'));
-    bootstrap(root);
-    await Promise.resolve();
-
-    // Ignore initial load
-    CLIENT.send.mockClear();
-    CLIENT.trigger('issues-changed', { ts: Date.now() });
-    await Promise.resolve();
-
-    const calls = CLIENT.send.mock.calls.map(/** @param {any} c */ (c) => c[0]);
-    expect(calls).toEqual(['epic-status']);
-  });
-
-  test('refreshes board when board view visible', async () => {
-    CLIENT = {
-      send: vi.fn(async (type) => {
-        if (type === 'list-issues') {
-          return [];
-        }
-        if (type === 'epic-status') {
-          return [];
-        }
-        return [];
-      }),
-      /**
-       * @param {string} _type
-       * @param {(p:any)=>void} handler
-       */
-      on(_type, handler) {
-        this._handler = handler;
-        return () => {};
-      },
-      /**
-       * @param {string} type
-       * @param {any} payload
-       */
-      trigger(type, payload) {
-        if (type === 'issues-changed' && this._handler) this._handler(payload);
-      },
-      close() {},
-      getState() {
-        return 'open';
-      }
-    };
-
-    window.location.hash = '#/board';
-    document.body.innerHTML = '<main id="app"></main>';
-    const root = /** @type {HTMLElement} */ (document.getElementById('app'));
-    bootstrap(root);
-    await Promise.resolve();
-
-    CLIENT.send.mockClear();
-    CLIENT.trigger('issues-changed', { ts: Date.now() });
-    await Promise.resolve();
-
-    const calls = CLIENT.send.mock.calls.map(/** @param {any} c */ (c) => c[0]);
-    // Board loads multiple list-issues, assert at least one
-    expect(calls.length > 0).toBe(true);
-    expect(new Set(calls).has('list-issues')).toBe(true);
-  });
-});

package/app/main.test.js

@@ -1,17 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import { bootstrap } from './main.js';
-
-describe('app/main (jsdom)', () => {
-  test('renders two-panel shell into root', () => {
-    document.body.innerHTML = '<main id="app"></main>';
-    const root_element = /** @type {HTMLElement} */ (
-      document.getElementById('app')
-    );
-    bootstrap(root_element);
-
-    const list_panel = root_element.querySelector('#list-panel');
-    const detail_panel = root_element.querySelector('#detail-panel');
-    expect(list_panel).not.toBeNull();
-    expect(detail_panel).not.toBeNull();
-  });
-});

package/app/main.theme.test.js

@@ -1,41 +0,0 @@
-import { describe, expect, test } from 'vitest';
-
-describe('theme toggle', () => {
-  test('sets dark data-theme and persists preference', async () => {
-    document.body.innerHTML = `
-      <header class="app-header">
-        <h1 class="app-title">beads-ui</h1>
-        <div class="header-actions">
-          <label class="theme-toggle">
-            <span>Dark</span>
-            <input id="theme-switch" type="checkbox" />
-          </label>
-        </div>
-      </header>
-      <main id="app"></main>`;
-
-    // Simulate the DOMContentLoaded logic from main.js
-    const themeSwitch = /** @type {HTMLInputElement} */ (
-      document.getElementById('theme-switch')
-    );
-    themeSwitch.checked = true;
-    themeSwitch.dispatchEvent(new Event('change'));
-
-    // Apply attribute as in main.js handler
-    document.documentElement.setAttribute('data-theme', 'dark');
-    window.localStorage.setItem('beads-ui.theme', 'dark');
-
-    expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
-    expect(window.localStorage.getItem('beads-ui.theme')).toBe('dark');
-  });
-
-  test('can switch back to light explicitly', async () => {
-    document.documentElement.setAttribute('data-theme', 'dark');
-    window.localStorage.setItem('beads-ui.theme', 'dark');
-    // Simulate toggle off
-    document.documentElement.setAttribute('data-theme', 'light');
-    window.localStorage.setItem('beads-ui.theme', 'light');
-    expect(document.documentElement.getAttribute('data-theme')).toBe('light');
-    expect(window.localStorage.getItem('beads-ui.theme')).toBe('light');
-  });
-});