beads-ui 0.1.0 → 0.1.2

package/app/views/detail.test.js

@@ -1,188 +0,0 @@
-/* global NodeListOf */
-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', () => {
-  test('renders fields, markdown description, and dependency links', 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-29',
-      title: 'Issue detail view',
-      description:
-        '# Heading\n\nImplement detail view with a [link](https://example.com) and `code`.',
-      status: 'open',
-      priority: 2,
-      dependencies: [{ id: 'UI-25' }, { id: 'UI-27' }],
-      dependents: [{ id: 'UI-34' }]
-    };
-
-    /** @type {string[]} */
-    const navigations = [];
-    const view = createDetailView(
-      mount,
-      stubSend({ 'UI-29': issue }),
-      (hash) => {
-        navigations.push(hash);
-      }
-    );
-
-    await view.load('UI-29');
-
-    const idMono = /** @type {HTMLElement|null} */ (
-      mount.querySelector('.detail-title .detail-id')
-    );
-    expect(idMono && idMono.textContent).toBe('#29');
-    const titleSpan = /** @type {HTMLSpanElement} */ (
-      mount.querySelector('h2 .editable')
-    );
-    expect(titleSpan.textContent).toBe('Issue detail view');
-    // status select + priority select exist
-    const selects = mount.querySelectorAll('select');
-    expect(selects.length).toBeGreaterThanOrEqual(2);
-    // description rendered as markdown in read mode
-    const md = /** @type {HTMLDivElement} */ (mount.querySelector('.md'));
-    expect(md).toBeTruthy();
-    const a = /** @type {HTMLAnchorElement|null} */ (md.querySelector('a'));
-    expect(a && a.getAttribute('href')).toBe('https://example.com');
-    const code = md.querySelector('code');
-    expect(code && code.textContent).toBe('code');
-
-    const links = /** @type {NodeListOf<HTMLAnchorElement>} */ (
-      mount.querySelectorAll('a')
-    );
-    const hrefs = Array.from(links)
-      .map((a) => a.getAttribute('href') || '')
-      .filter((h) => h.startsWith('#/issue/'));
-    expect(hrefs).toEqual(['#/issue/UI-25', '#/issue/UI-27', '#/issue/UI-34']);
-
-    // No textarea in read mode
-    const descInput0 = /** @type {HTMLTextAreaElement|null} */ (
-      mount.querySelector('textarea')
-    );
-    expect(descInput0).toBeNull();
-
-    // Simulate clicking the first internal link, ensure navigate_fn is used
-    const firstInternal = Array.from(links).find((a) =>
-      (a.getAttribute('href') || '').startsWith('#/issue/')
-    );
-    if (!firstInternal) {
-      throw new Error('No internal link found');
-    }
-    firstInternal.click();
-    expect(navigations[navigations.length - 1]).toBe('#/issue/UI-25');
-  });
-
-  test('renders type in Properties sidebar', 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-50',
-      title: 'With type',
-      issue_type: 'feature',
-      dependencies: [],
-      dependents: []
-    };
-    const view = createDetailView(mount, async (type) => {
-      if (type === 'show-issue') {
-        return issue;
-      }
-      throw new Error('Unexpected');
-    });
-    await view.load('UI-50');
-    const badge = mount.querySelector('.props-card .type-badge');
-    expect(badge).toBeTruthy();
-    expect(badge && badge.textContent).toBe('Feature');
-  });
-
-  test('inline editing toggles for title and description', 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-29',
-      title: 'Issue detail view',
-      description: 'Some text',
-      status: 'open',
-      priority: 2,
-      dependencies: [],
-      dependents: []
-    };
-
-    const view = createDetailView(mount, async (type, payload) => {
-      if (type === 'show-issue') {
-        return issue;
-      }
-      if (type === 'edit-text') {
-        const f = /** @type {any} */ (payload).field;
-        const v = /** @type {any} */ (payload).value;
-        issue[f] = v;
-        return issue;
-      }
-      throw new Error('Unexpected type');
-    });
-
-    await view.load('UI-29');
-
-    // Title: click to edit -> input appears, Esc cancels
-    const titleSpan = /** @type {HTMLSpanElement} */ (
-      mount.querySelector('h2 .editable')
-    );
-    titleSpan.click();
-    let titleInput = /** @type {HTMLInputElement} */ (
-      mount.querySelector('h2 input')
-    );
-    expect(titleInput).toBeTruthy();
-    const esc = new KeyboardEvent('keydown', { key: 'Escape' });
-    titleInput.dispatchEvent(esc);
-    expect(
-      /** @type {HTMLInputElement|null} */ (mount.querySelector('h2 input'))
-    ).toBeNull();
-
-    // Description: click to edit -> textarea appears, Ctrl+Enter saves
-    const md = /** @type {HTMLDivElement} */ (mount.querySelector('.md'));
-    md.click();
-    const area = /** @type {HTMLTextAreaElement} */ (
-      mount.querySelector('textarea')
-    );
-    area.value = 'Changed';
-    const key = new KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true });
-    area.dispatchEvent(key);
-    // After save, returns to read mode (allow microtask flush)
-    await Promise.resolve();
-    expect(
-      /** @type {HTMLTextAreaElement|null} */ (mount.querySelector('textarea'))
-    ).toBeNull();
-  });
-
-  test('shows placeholder when not found or bad payload', async () => {
-    document.body.innerHTML =
-      '<section class="panel"><div id="mount"></div></section>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-    const view = createDetailView(mount, stubSend({}));
-
-    await view.load('UI-404');
-    expect((mount.textContent || '').toLowerCase()).toContain('not found');
-
-    view.clear();
-    expect((mount.textContent || '').toLowerCase()).toContain(
-      'select an issue'
-    );
-  });
-});

package/app/views/detail.ui47.test.js

@@ -1,78 +0,0 @@
-import { describe, expect, test, vi } from 'vitest';
-import { createDetailView } from './detail.js';
-
-describe('detail deps UI (UI-47)', () => {
-  test('renders id, type and title for dependency items', 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-100',
-      title: 'Parent',
-      dependencies: [
-        { id: 'UI-1', issue_type: 'feature', title: 'Alpha' },
-        { id: 'UI-2', issue_type: 'bug', title: 'Beta' }
-      ],
-      dependents: [{ id: 'UI-3', issue_type: 'task', title: 'Gamma' }]
-    };
-
-    const view = createDetailView(mount, async (type) => {
-      if (type === 'show-issue') {
-        return issue;
-      }
-      throw new Error('Unexpected');
-    });
-
-    await view.load('UI-100');
-
-    const text = mount.textContent || '';
-    expect(text).toContain('#1');
-    expect(text).toContain('Alpha');
-    expect(text).toContain('#3');
-    expect(text).toContain('Gamma');
-    const badges = mount.querySelectorAll('ul .type-badge');
-    expect(badges.length).toBeGreaterThanOrEqual(2);
-  });
-
-  test('clicking a dependency row triggers navigation', async () => {
-    document.body.innerHTML =
-      '<section class="panel"><div id="mount"></div></section>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-    const navs = /** @type {string[]} */ ([]);
-    const send = vi.fn().mockResolvedValue({
-      id: 'UI-200',
-      dependencies: [{ id: 'UI-9', issue_type: 'feature', title: 'Z' }],
-      dependents: []
-    });
-    const view = createDetailView(mount, /** @type {any} */ (send), (hash) =>
-      navs.push(hash)
-    );
-
-    await view.load('UI-200');
-
-    const row = /** @type {HTMLLIElement} */ (mount.querySelector('ul li'));
-    row.click();
-    expect(navs[navs.length - 1]).toBe('#/issue/UI-9');
-  });
-
-  test('add input is placed at the bottom of the section', async () => {
-    document.body.innerHTML =
-      '<section class="panel"><div id="mount"></div></section>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-    const send = vi
-      .fn()
-      .mockResolvedValue({ id: 'UI-300', dependencies: [], dependents: [] });
-    const view = createDetailView(mount, /** @type {any} */ (send));
-    await view.load('UI-300');
-
-    const input = /** @type {HTMLInputElement} */ (
-      mount.querySelector('[data-testid="add-dependency"]')
-    );
-    expect(input).toBeTruthy();
-    const prev = input.parentElement?.previousElementSibling;
-    // Expect the add controls to follow the list (ul)
-    expect(prev && prev.tagName).toBe('UL');
-  });
-});

package/app/views/epics.test.js

@@ -1,283 +0,0 @@
-import { describe, expect, test, vi } from 'vitest';
-import { createEpicsView } from './epics.js';
-
-describe('views/epics', () => {
-  test('loads groups and expands to show non-closed children, navigates on click', async () => {
-    document.body.innerHTML = '<div id="m"></div>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('m'));
-    const data = {
-      async getEpicStatus() {
-        return [
-          {
-            epic: { id: 'UI-1', title: 'Epic One' },
-            total_children: 2,
-            closed_children: 1,
-            eligible_for_close: false
-          }
-        ];
-      },
-      /** @param {string} id */
-      async getIssue(id) {
-        if (id === 'UI-1') {
-          return { id: 'UI-1', dependents: [{ id: 'UI-2' }, { id: 'UI-3' }] };
-        }
-        if (id === 'UI-2') {
-          return {
-            id: 'UI-2',
-            title: 'Alpha',
-            status: 'open',
-            priority: 1,
-            issue_type: 'task'
-          };
-        }
-        return {
-          id: 'UI-3',
-          title: 'Beta',
-          status: 'closed',
-          priority: 2,
-          issue_type: 'task'
-        };
-      },
-      updateIssue: vi.fn()
-    };
-    /** @type {string[]} */
-    const navCalls = [];
-    const view = createEpicsView(mount, /** @type {any} */ (data), (id) =>
-      navCalls.push(id)
-    );
-    await view.load();
-    const header = mount.querySelector('.epic-header');
-    expect(header).not.toBeNull();
-    // After expansion, only non-closed child should be present
-    const rows = mount.querySelectorAll('tr.epic-row');
-    expect(rows.length).toBe(1);
-    rows[0].dispatchEvent(new MouseEvent('click', { bubbles: true }));
-    expect(navCalls[0]).toBe('UI-2');
-  });
-
-  test('sorts children by priority then updated_at', async () => {
-    document.body.innerHTML = '<div id="m"></div>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('m'));
-    const data = {
-      async getEpicStatus() {
-        return [
-          {
-            epic: { id: 'UI-10', title: 'Epic Sort' },
-            total_children: 3,
-            closed_children: 0,
-            eligible_for_close: false
-          }
-        ];
-      },
-      /** @param {string} id */
-      async getIssue(id) {
-        if (id === 'UI-10') {
-          return {
-            id: 'UI-10',
-            dependents: [{ id: 'UI-11' }, { id: 'UI-12' }, { id: 'UI-13' }]
-          };
-        }
-        if (id === 'UI-11') {
-          return {
-            id: 'UI-11',
-            title: 'Low priority, newest within p1',
-            status: 'open',
-            priority: 1,
-            issue_type: 'task',
-            updated_at: '2025-10-22T10:00:00.000Z'
-          };
-        }
-        if (id === 'UI-12') {
-          return {
-            id: 'UI-12',
-            title: 'Low priority, older',
-            status: 'open',
-            priority: 1,
-            issue_type: 'task',
-            updated_at: '2025-10-20T10:00:00.000Z'
-          };
-        }
-        return {
-          id: 'UI-13',
-          title: 'Higher priority number (lower precedence)',
-          status: 'open',
-          priority: 2,
-          issue_type: 'task',
-          updated_at: '2025-10-23T10:00:00.000Z'
-        };
-      },
-      updateIssue: vi.fn()
-    };
-    const view = createEpicsView(mount, /** @type {any} */ (data), () => {});
-    await view.load();
-    const rows = Array.from(mount.querySelectorAll('tr.epic-row'));
-    const ids = rows.map((r) =>
-      /** @type {HTMLElement} */ (
-        r.querySelector('td.mono')
-      )?.textContent?.trim()
-    );
-    expect(ids).toEqual(['#11', '#12', '#13']);
-  });
-
-  test('clicking inputs/selects inside a row does not navigate', async () => {
-    document.body.innerHTML = '<div id="m"></div>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('m'));
-    const data = {
-      async getEpicStatus() {
-        return [
-          {
-            epic: { id: 'UI-20', title: 'Epic Click Guard' },
-            total_children: 1,
-            closed_children: 0,
-            eligible_for_close: false
-          }
-        ];
-      },
-      /** @param {string} id */
-      async getIssue(id) {
-        if (id === 'UI-20') {
-          return { id: 'UI-20', dependents: [{ id: 'UI-21' }] };
-        }
-        return {
-          id: 'UI-21',
-          title: 'Editable',
-          status: 'open',
-          priority: 2,
-          issue_type: 'task',
-          updated_at: '2025-10-21T10:00:00.000Z'
-        };
-      },
-      updateIssue: vi.fn()
-    };
-    /** @type {string[]} */
-    const navCalls = [];
-    const view = createEpicsView(mount, /** @type {any} */ (data), (id) =>
-      navCalls.push(id)
-    );
-    await view.load();
-    // Click a select inside the row; should not navigate
-    const sel = /** @type {HTMLSelectElement|null} */ (
-      mount.querySelector('tr.epic-row select')
-    );
-    sel?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-    expect(navCalls.length).toBe(0);
-  });
-
-  test('shows Loading… while fetching children on manual expansion (no flicker)', async () => {
-    document.body.innerHTML = '<div id="m"></div>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('m'));
-    let resolveEpic;
-    const epicPromise = new Promise((r) => {
-      resolveEpic = r;
-    });
-    const data = {
-      async getEpicStatus() {
-        return [
-          {
-            epic: { id: 'UI-40', title: 'Auto Expanded' },
-            total_children: 0,
-            closed_children: 0,
-            eligible_for_close: false
-          },
-          {
-            epic: { id: 'UI-41', title: 'Manual Expand' },
-            total_children: 1,
-            closed_children: 0,
-            eligible_for_close: false
-          }
-        ];
-      },
-      /** @param {string} id */
-      async getIssue(id) {
-        if (id === 'UI-40') {
-          return { id: 'UI-40', dependents: [] };
-        }
-        if (id === 'UI-41') {
-          // Delay to simulate loading
-          await epicPromise;
-          return { id: 'UI-41', dependents: [{ id: 'UI-42' }] };
-        }
-        return {
-          id: 'UI-42',
-          title: 'Child',
-          status: 'open',
-          priority: 2,
-          issue_type: 'task'
-        };
-      },
-      updateIssue: vi.fn()
-    };
-    const view = createEpicsView(mount, /** @type {any} */ (data), () => {});
-    await view.load();
-    // Expand the second group manually
-    const groups = Array.from(mount.querySelectorAll('.epic-group'));
-    const manual = groups.find(
-      (g) => g.getAttribute('data-epic-id') === 'UI-41'
-    );
-    expect(manual).toBeDefined();
-    manual
-      ?.querySelector('.epic-header')
-      ?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-
-    // Immediately after click, expect Loading…
-    const text = manual?.querySelector('.epic-children')?.textContent || '';
-    expect(text.includes('Loading…')).toBe(true);
-
-    // Resolve and ensure a row appears
-    // @ts-ignore
-    resolveEpic();
-    await new Promise((r) => setTimeout(r, 0));
-    await new Promise((r) => setTimeout(r, 0));
-    const rows = manual?.querySelectorAll('tr.epic-row') || [];
-    expect(rows.length).toBe(1);
-  });
-
-  test('clicking the editable title does not navigate and enters edit mode', async () => {
-    document.body.innerHTML = '<div id="m"></div>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('m'));
-    const data = {
-      async getEpicStatus() {
-        return [
-          {
-            epic: { id: 'UI-30', title: 'Epic Title Click' },
-            total_children: 1,
-            closed_children: 0,
-            eligible_for_close: false
-          }
-        ];
-      },
-      /** @param {string} id */
-      async getIssue(id) {
-        if (id === 'UI-30') {
-          return { id: 'UI-30', dependents: [{ id: 'UI-31' }] };
-        }
-        return {
-          id: 'UI-31',
-          title: 'Clickable Title',
-          status: 'open',
-          priority: 2,
-          issue_type: 'task'
-        };
-      },
-      updateIssue: vi.fn()
-    };
-    /** @type {string[]} */
-    const navCalls = [];
-    const view = createEpicsView(mount, /** @type {any} */ (data), (id) =>
-      navCalls.push(id)
-    );
-    await view.load();
-    const titleSpan = /** @type {HTMLElement|null} */ (
-      mount.querySelector('tr.epic-row td:nth-child(3) .editable')
-    );
-    expect(titleSpan).not.toBeNull();
-    titleSpan?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-    // Should not have navigated
-    expect(navCalls.length).toBe(0);
-    // Should render an input for title now
-    const input = /** @type {HTMLInputElement|null} */ (
-      mount.querySelector('tr.epic-row td:nth-child(3) input[type="text"]')
-    );
-    expect(input).not.toBeNull();
-  });
-});

package/app/views/list.inline-edits.test.js

@@ -1,84 +0,0 @@
-import { describe, expect, test, vi } from 'vitest';
-import { createListView } from './list.js';
-
-describe('views/list inline edits', () => {
-  test('priority select dispatches update and refreshes row', async () => {
-    document.body.innerHTML = '<aside id="mount" class="panel"></aside>';
-    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
-
-    const initial = [
-      {
-        id: 'UI-1',
-        title: 'One',
-        status: 'open',
-        priority: 1,
-        issue_type: 'task'
-      },
-      {
-        id: 'UI-2',
-        title: 'Two',
-        status: 'open',
-        priority: 2,
-        issue_type: 'bug'
-      }
-    ];
-
-    /** @type {{ calls: Array<{ type: string, payload: any }> }} */
-    const spy = { calls: [] };
-    let current = [...initial];
-
-    /** @type {(type: string, payload?: any) => Promise<any>} */
-    const send = vi.fn(async (type, payload) => {
-      spy.calls.push({ type, payload });
-      if (type === 'list-issues') {
-        return current;
-      }
-      if (type === 'update-priority') {
-        // no-op; list refresh happens via show-issue below
-        return {};
-      }
-      if (type === 'show-issue') {
-        const id = payload.id;
-        const idx = current.findIndex((x) => x.id === id);
-        if (idx >= 0) {
-          // Return an updated item with a different priority to simulate backend
-          const updated = { ...current[idx], priority: 4 };
-          // and reflect it into the list that will be rendered after refresh
-          current[idx] = updated;
-          return updated;
-        }
-        return null;
-      }
-      throw new Error('Unexpected');
-    });
-
-    const view = createListView(mount, send);
-    await view.load();
-
-    const firstRow = /** @type {HTMLElement} */ (
-      mount.querySelector('tr.issue-row[data-issue-id="UI-1"]')
-    );
-    expect(firstRow).toBeTruthy();
-    const prio = /** @type {HTMLSelectElement} */ (
-      firstRow.querySelector('select.badge--priority')
-    );
-    expect(prio.value).toBe('1');
-
-    // Change to a different priority; handler should call update-priority then show-issue
-    prio.value = '4';
-    prio.dispatchEvent(new Event('change'));
-
-    await Promise.resolve();
-
-    const types = spy.calls.map((c) => c.type);
-    expect(types).toContain('update-priority');
-    expect(types).toContain('show-issue');
-
-    const prio2 = /** @type {HTMLSelectElement} */ (
-      mount.querySelector(
-        'tr.issue-row[data-issue-id="UI-1"] select.badge--priority'
-      )
-    );
-    expect(prio2.value).toBe('4');
-  });
-});