beads-ui 0.1.0 → 0.1.2

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');
-  });
-});

package/app/main.view-sync.test.js

@@ -1,54 +0,0 @@
-import { describe, expect, test, vi } from 'vitest';
-import { bootstrap } from './main.js';
-
-// Mock WS client before importing the app
-vi.mock('./ws.js', () => ({
-  createWsClient: () => ({
-    /**
-     * @param {string} type
-     */
-    async send(type) {
-      // Return minimal data for the list view
-      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('initial view sync on reload (#/epics)', () => {
-  test('shows Epics view when hash is #/epics', async () => {
-    window.location.hash = '#/epics';
-    document.body.innerHTML = '<main id="app"></main>';
-    const root = /** @type {HTMLElement} */ (document.getElementById('app'));
-
-    bootstrap(root);
-
-    // Allow any microtasks to flush
-    await Promise.resolve();
-
-    const issuesRoot = /** @type {HTMLElement} */ (
-      document.getElementById('issues-root')
-    );
-    const epicsRoot = /** @type {HTMLElement} */ (
-      document.getElementById('epics-root')
-    );
-
-    expect(issuesRoot.hidden).toBe(true);
-    expect(epicsRoot.hidden).toBe(false);
-  });
-});

package/app/protocol.test.js

@@ -1,57 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import {
-  MESSAGE_TYPES,
-  PROTOCOL_VERSION,
-  decodeReply,
-  decodeRequest,
-  isMessageType,
-  isReply,
-  isRequest,
-  makeError,
-  makeOk,
-  makeRequest
-} from './protocol.js';
-
-describe('protocol', () => {
-  test('version and message types', () => {
-    expect(typeof PROTOCOL_VERSION).toBe('string');
-    expect(Array.isArray(MESSAGE_TYPES)).toBe(true);
-    expect(MESSAGE_TYPES.length).toBeGreaterThan(3);
-    expect(isMessageType('list-issues')).toBe(true);
-    expect(isMessageType('unknown-type')).toBe(false);
-  });
-
-  test('makeRequest / isRequest / decodeRequest', () => {
-    const req = makeRequest(
-      'list-issues',
-      { filters: { status: 'open' } },
-      'r-1'
-    );
-    expect(isRequest(req)).toBe(true);
-    const round = decodeRequest(JSON.parse(JSON.stringify(req)));
-    expect(round.id).toBe('r-1');
-    expect(round.type).toBe('list-issues');
-  });
-
-  test('makeOk / makeError / isReply / decodeReply', () => {
-    const req = makeRequest('show-issue', { id: 'UI-1' }, 'r-2');
-    const ok = makeOk(req, { id: 'UI-1', title: 'T' });
-    expect(isReply(ok)).toBe(true);
-    const ok2 = decodeReply(JSON.parse(JSON.stringify(ok)));
-    expect(ok2.ok).toBe(true);
-
-    const err = makeError(req, 'not_found', 'Issue not found');
-    expect(isReply(err)).toBe(true);
-    const err2 = decodeReply(JSON.parse(JSON.stringify(err)));
-    expect(err2.ok).toBe(false);
-    if (!('error' in err2) || !err2.error) {
-      throw new Error('Expected error to be present when ok=false');
-    }
-    expect(err2.error.code).toBe('not_found');
-  });
-
-  test('invalid envelopes are rejected', () => {
-    expect(() => decodeRequest({})).toThrow();
-    expect(() => decodeReply({ ok: true })).toThrow();
-  });
-});

package/app/router.test.js

@@ -1,34 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import { createHashRouter, parseHash, parseView } from './router.js';
-import { createStore } from './state.js';
-
-describe('router', () => {
-  test('parseHash extracts id', () => {
-    expect(parseHash('#/issue/UI-5')).toBe('UI-5');
-    expect(parseHash('#/anything')).toBeNull();
-  });
-
-  test('router updates store and gotoIssue updates hash', () => {
-    document.body.innerHTML = '<div></div>';
-    const store = createStore();
-    const router = createHashRouter(store);
-    router.start();
-
-    window.location.hash = '#/issue/UI-10';
-    // Trigger handler synchronously
-    window.dispatchEvent(new HashChangeEvent('hashchange'));
-    expect(store.getState().selected_id).toBe('UI-10');
-
-    router.gotoIssue('UI-11');
-    expect(window.location.hash).toBe('#/issue/UI-11');
-    router.stop();
-  });
-
-  test('parseView resolves from hash and defaults to issues', () => {
-    expect(parseView('#/issues')).toBe('issues');
-    expect(parseView('#/epics')).toBe('epics');
-    expect(parseView('#/board')).toBe('board');
-    expect(parseView('')).toBe('issues');
-    expect(parseView('#/unknown')).toBe('issues');
-  });
-});

package/app/state.test.js

@@ -1,21 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import { createStore } from './state.js';
-
-describe('state store', () => {
-  test('get/set/subscribe works and dedupes unchanged', () => {
-    const store = createStore();
-    const seen = [];
-    const off = store.subscribe((s) => seen.push(s));
-
-    store.setState({ selected_id: 'UI-1' });
-    store.setState({ filters: { status: 'open' } });
-    // no-op (unchanged)
-    store.setState({ filters: { status: 'open' } });
-    off();
-
-    expect(seen.length).toBe(2);
-    const state = store.getState();
-    expect(state.selected_id).toBe('UI-1');
-    expect(state.filters.status).toBe('open');
-  });
-});

package/app/utils/markdown.test.js

@@ -1,103 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import { renderMarkdown } from './markdown.js';
-
-describe('utils/markdown', () => {
-  test('returns fragment for empty input', () => {
-    const frag = renderMarkdown('');
-
-    expect(frag).toBeInstanceOf(DocumentFragment);
-  });
-
-  test('renders headings', () => {
-    const frag = renderMarkdown('# Title\n\n### Sub');
-    const host = document.createElement('div');
-
-    host.appendChild(frag);
-
-    const h1 = /** @type {HTMLHeadingElement} */ (host.querySelector('h1'));
-    const h3 = /** @type {HTMLHeadingElement} */ (host.querySelector('h3'));
-    expect(h1.textContent).toBe('Title');
-    expect(h3.textContent).toBe('Sub');
-  });
-
-  test('renders paragraphs with and without blank lines', () => {
-    const frag = renderMarkdown('First line\ncontinues\n\nSecond para');
-    const host = document.createElement('div');
-
-    host.appendChild(frag);
-
-    const ps = host.querySelectorAll('p');
-    expect(ps.length).toBe(2);
-    expect(ps[0].textContent).toBe('First line continues');
-    expect(ps[1].textContent).toBe('Second para');
-  });
-
-  test('renders unordered list items', () => {
-    const frag = renderMarkdown('- a\n- b');
-    const host = document.createElement('div');
-
-    host.appendChild(frag);
-
-    const items = host.querySelectorAll('ul li');
-    expect(items.length).toBe(2);
-    expect(items[0].textContent).toBe('a');
-    expect(items[1].textContent).toBe('b');
-  });
-
-  test('renders ordered list items', () => {
-    const frag = renderMarkdown('1. a\n2. b');
-    const host = document.createElement('div');
-
-    host.appendChild(frag);
-
-    const items = host.querySelectorAll('ol li');
-    expect(items.length).toBe(2);
-    expect(items[0].textContent).toBe('a');
-    expect(items[1].textContent).toBe('b');
-  });
-
-  test('renders fenced code block', () => {
-    const frag = renderMarkdown('```\nline1\nline2\n```');
-    const host = document.createElement('div');
-
-    host.appendChild(frag);
-
-    const code = /** @type {HTMLElement} */ (host.querySelector('pre > code'));
-    expect(code.textContent).toBe('line1\nline2');
-  });
-
-  test('renders inline code', () => {
-    const frag = renderMarkdown('text `code` end');
-    const host = document.createElement('div');
-
-    host.appendChild(frag);
-
-    const code = /** @type {HTMLElement} */ (host.querySelector('p code'));
-    expect(code.textContent).toBe('code');
-  });
-
-  test('renders http and mailto links', () => {
-    const frag = renderMarkdown(
-      '[web](https://example.com) and [mail](mailto:test@example.com)'
-    );
-    const host = document.createElement('div');
-
-    host.appendChild(frag);
-
-    const hrefs = Array.from(host.querySelectorAll('a')).map((a) =>
-      a.getAttribute('href')
-    );
-    expect(hrefs).toEqual(['https://example.com', 'mailto:test@example.com']);
-  });
-
-  test('filters unsafe link schemes', () => {
-    const frag = renderMarkdown('x [danger](javascript:alert(1)) y');
-    const host = document.createElement('div');
-
-    host.appendChild(frag);
-
-    const anchors = host.querySelectorAll('a');
-    expect(anchors.length).toBe(0);
-    expect(host.textContent || '').toContain('danger (javascript:alert(1))');
-  });
-});

package/app/utils/type-badge.test.js

@@ -1,30 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import { createTypeBadge } from './type-badge.js';
-
-describe('utils/type-badge', () => {
-  test('renders known types with modifier class and accessible labels', () => {
-    const types = [
-      ['bug', 'Bug'],
-      ['feature', 'Feature'],
-      ['task', 'Task'],
-      ['epic', 'Epic'],
-      ['chore', 'Chore']
-    ];
-    for (const [t, label] of /** @type {any[]} */ (types)) {
-      const el = createTypeBadge(t);
-      expect(el.classList.contains('type-badge')).toBe(true);
-      expect(el.classList.contains(`type-badge--${t}`)).toBe(true);
-      expect(el.getAttribute('role')).toBe('img');
-      const aria = el.getAttribute('aria-label') || '';
-      expect(aria.toLowerCase()).toContain('issue type');
-      expect(aria).toContain(label);
-      expect(el.textContent).toBe(label);
-    }
-  });
-
-  test('falls back to neutral for unknown types', () => {
-    const el = createTypeBadge('unknown');
-    expect(el.classList.contains('type-badge--neutral')).toBe(true);
-    expect(el.textContent).toBe('—');
-  });
-});

package/app/views/board.test.js

@@ -1,184 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import { createBoardView } from './board.js';
-
-describe('views/board', () => {
-  test('renders four columns with sorted cards and navigates on click', async () => {
-    document.body.innerHTML = '<div id="m"></div>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('m'));
-
-    /** @type {{ getOpen: () => Promise<any[]>, getReady: () => Promise<any[]>, getInProgress: () => Promise<any[]>, getClosed: () => Promise<any[]> }} */
-    const data = {
-      async getOpen() {
-        return [
-          {
-            id: 'O-1',
-            title: 'o1',
-            updated_at: '2025-10-23T07:00:00.000Z',
-            issue_type: 'task'
-          },
-          {
-            id: 'R-2', // also present in Ready, should be filtered from Open
-            title: 'dup-ready',
-            updated_at: '2025-10-22T07:00:00.000Z',
-            issue_type: 'task'
-          }
-        ];
-      },
-      async getReady() {
-        return [
-          {
-            id: 'R-2',
-            title: 'r2',
-            priority: 1,
-            updated_at: '2025-10-20T08:00:00.000Z',
-            issue_type: 'task'
-          },
-          {
-            id: 'R-1',
-            title: 'r1',
-            priority: 0,
-            updated_at: '2025-10-21T08:00:00.000Z',
-            issue_type: 'bug'
-          },
-          {
-            id: 'R-3',
-            title: 'r3',
-            priority: 1,
-            updated_at: '2025-10-22T08:00:00.000Z',
-            issue_type: 'feature'
-          }
-        ];
-      },
-      async getInProgress() {
-        return [
-          {
-            id: 'P-1',
-            title: 'p1',
-            updated_at: '2025-10-23T09:00:00.000Z',
-            issue_type: 'task'
-          },
-          {
-            id: 'P-2',
-            title: 'p2',
-            updated_at: '2025-10-22T09:00:00.000Z',
-            issue_type: 'feature'
-          }
-        ];
-      },
-      async getClosed() {
-        return [
-          {
-            id: 'C-2',
-            title: 'c2',
-            updated_at: '2025-10-20T09:00:00.000Z',
-            issue_type: 'task'
-          },
-          {
-            id: 'C-1',
-            title: 'c1',
-            updated_at: '2025-10-21T09:00:00.000Z',
-            issue_type: 'bug'
-          }
-        ];
-      }
-    };
-
-    /** @type {string[]} */
-    const navigations = [];
-    const view = createBoardView(mount, /** @type {any} */ (data), (id) => {
-      navigations.push(id);
-    });
-
-    await view.load();
-
-    // Open: updated_at desc; excludes items present in Ready
-    const open_ids = Array.from(
-      mount.querySelectorAll('#open-col .board-card .mono')
-    ).map((el) => el.textContent?.trim());
-    expect(open_ids).toEqual(['#1']);
-
-    // Ready: priority asc, then updated_at desc for equal priority
-    const ready_ids = Array.from(
-      mount.querySelectorAll('#ready-col .board-card .mono')
-    ).map((el) => el.textContent?.trim());
-    expect(ready_ids).toEqual(['#1', '#3', '#2']);
-
-    // In progress: updated_at desc
-    const prog_ids = Array.from(
-      mount.querySelectorAll('#in-progress-col .board-card .mono')
-    ).map((el) => el.textContent?.trim());
-    expect(prog_ids).toEqual(['#1', '#2']);
-
-    // Closed: updated_at desc
-    const closed_ids = Array.from(
-      mount.querySelectorAll('#closed-col .board-card .mono')
-    ).map((el) => el.textContent?.trim());
-    expect(closed_ids).toEqual(['#1', '#2']);
-
-    // Click navigates
-    const first_ready = /** @type {HTMLElement|null} */ (
-      mount.querySelector('#ready-col .board-card')
-    );
-    first_ready?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-    expect(navigations[0]).toBe('R-1');
-  });
-
-  test('filters Ready to exclude items that are In Progress', async () => {
-    document.body.innerHTML = '<div id="m"></div>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('m'));
-
-    /** @type {{ getOpen: () => Promise<any[]>, getReady: () => Promise<any[]>, getInProgress: () => Promise<any[]>, getClosed: () => Promise<any[]> }} */
-    const data = {
-      async getOpen() {
-        return [];
-      },
-      async getReady() {
-        return [
-          {
-            id: 'X-1',
-            title: 'x1',
-            priority: 1,
-            updated_at: '2025-10-23T10:00:00.000Z',
-            issue_type: 'task'
-          },
-          {
-            id: 'X-2',
-            title: 'x2',
-            priority: 1,
-            updated_at: '2025-10-23T09:00:00.000Z',
-            issue_type: 'task'
-          }
-        ];
-      },
-      async getInProgress() {
-        return [
-          {
-            id: 'X-2',
-            title: 'x2',
-            updated_at: '2025-10-23T11:00:00.000Z',
-            issue_type: 'task'
-          }
-        ];
-      },
-      async getClosed() {
-        return [];
-      }
-    };
-
-    const view = createBoardView(mount, /** @type {any} */ (data), () => {});
-
-    await view.load();
-
-    const ready_ids = Array.from(
-      mount.querySelectorAll('#ready-col .board-card .mono')
-    ).map((el) => el.textContent?.trim());
-
-    // X-2 is in progress, so Ready should only show X-1
-    expect(ready_ids).toEqual(['#1']);
-
-    const prog_ids = Array.from(
-      mount.querySelectorAll('#in-progress-col .board-card .mono')
-    ).map((el) => el.textContent?.trim());
-    expect(prog_ids).toEqual(['#2']);
-  });
-});

package/app/views/detail.acceptance-notes.test.js

@@ -1,67 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import { createDetailView } from './detail.js';
-
-/** @type {(map: Record<string, any>) => (type: string, payload?: unknown) => Promise<any>} */
-const stubSend = (map) => async (type, payload) => {
-  if (type !== 'show-issue') {
-    throw new Error('Unexpected type');
-  }
-  const id = /** @type {any} */ (payload).id;
-  return map[id] || null;
-};
-
-describe('views/detail acceptance + notes', () => {
-  test('renders acceptance from acceptance_criteria and notes markdown', async () => {
-    document.body.innerHTML =
-      '<section class="panel"><div id="mount"></div></section>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-
-    /** @type {any} */
-    const issue = {
-      id: 'UI-71',
-      title: 'Has acceptance + notes',
-      acceptance_criteria: '- step A\n- step B',
-      notes: 'Plain note text',
-      status: 'open',
-      priority: 2
-    };
-
-    const view = createDetailView(mount, stubSend({ 'UI-71': issue }));
-    await view.load('UI-71');
-
-    const accTitle = mount.querySelector('.acceptance .props-card__title');
-    expect(accTitle && accTitle.textContent).toBe('Acceptance');
-    const accMd = mount.querySelector('.acceptance .md');
-    expect(accMd && (accMd.textContent || '').toLowerCase()).toContain(
-      'step a'
-    );
-
-    const notesTitle = mount.querySelector('.notes .props-card__title');
-    expect(notesTitle && notesTitle.textContent).toBe('Notes');
-    const notesMd = mount.querySelector('.notes .md');
-    expect(notesMd && (notesMd.textContent || '')).toContain('Plain note text');
-  });
-
-  test('gates headings when acceptance and notes are empty', async () => {
-    document.body.innerHTML =
-      '<section class="panel"><div id="mount"></div></section>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-
-    /** @type {any} */
-    const issue = {
-      id: 'UI-72',
-      title: 'No acceptance/notes',
-      acceptance_criteria: '',
-      notes: '',
-      status: 'open',
-      priority: 2
-    };
-
-    const view = createDetailView(mount, stubSend({ 'UI-72': issue }));
-    await view.load('UI-72');
-
-    // Headings should not be present
-    expect(mount.querySelector('.acceptance .props-card__title')).toBeNull();
-    expect(mount.querySelector('.notes .props-card__title')).toBeNull();
-  });
-});