beads-ui 0.1.0

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

@@ -0,0 +1,73 @@
+import { describe, expect, test, vi } from 'vitest';
+import { createDetailView } from './detail.js';
+
+function mountDiv() {
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  return div;
+}
+
+describe('detail view labels', () => {
+  test('shows labels and allows add/remove', async () => {
+    const mount = mountDiv();
+    let current = {
+      id: 'UI-5',
+      title: 'With labels',
+      status: 'open',
+      priority: 2,
+      labels: ['frontend']
+    };
+    const sendFn = vi.fn(async (type, payload) => {
+      if (type === 'show-issue') {
+        return current;
+      }
+      if (type === 'label-add') {
+        current = { ...current, labels: [...current.labels, payload.label] };
+        return current;
+      }
+      if (type === 'label-remove') {
+        current = {
+          ...current,
+          labels: current.labels.filter((l) => l !== payload.label)
+        };
+        return current;
+      }
+      return current;
+    });
+
+    const view = createDetailView(mount, sendFn);
+    await view.load('UI-5');
+
+    // Initial chip present
+    expect(mount.querySelectorAll('.prop.labels .badge').length).toBe(1);
+
+    // Add a label via input + Enter
+    const input = /** @type {HTMLInputElement} */ (
+      mount.querySelector('.prop.labels input')
+    );
+    input.value = 'backend';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
+    );
+    await Promise.resolve();
+
+    expect(sendFn).toHaveBeenCalledWith('label-add', {
+      id: 'UI-5',
+      label: 'backend'
+    });
+    expect(mount.querySelectorAll('.prop.labels .badge').length).toBe(2);
+
+    // Remove the first label by clicking the × button
+    const removeBtn = /** @type {HTMLButtonElement} */ (
+      mount.querySelector('.prop.labels .badge button')
+    );
+    removeBtn.click();
+    await Promise.resolve();
+    expect(sendFn).toHaveBeenCalledWith('label-remove', {
+      id: 'UI-5',
+      label: 'frontend'
+    });
+    expect(mount.querySelectorAll('.prop.labels .badge').length).toBe(1);
+  });
+});

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

@@ -0,0 +1,86 @@
+import { describe, expect, test, vi } from 'vitest';
+import { createDetailView } from './detail.js';
+
+/** @type {(impl: (type: string, payload?: unknown) => Promise<any>) => (type: string, payload?: unknown) => Promise<any>} */
+const mockSend = (impl) => vi.fn(impl);
+
+describe('views/detail priority edit', () => {
+  test('updates priority via dropdown and re-renders from reply', async () => {
+    document.body.innerHTML =
+      '<section class="panel"><div id="mount"></div></section>';
+    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
+
+    const initial = {
+      id: 'UI-70',
+      title: 'P',
+      description: '',
+      status: 'open',
+      priority: 2
+    };
+    const send = mockSend(async (type, payload) => {
+      if (type === 'show-issue') {
+        return initial;
+      }
+      if (type === 'update-priority') {
+        expect(payload).toEqual({ id: 'UI-70', priority: 4 });
+        return { ...initial, priority: 4 };
+      }
+      throw new Error('Unexpected');
+    });
+
+    const view = createDetailView(mount, send);
+    await view.load('UI-70');
+
+    const selects = mount.querySelectorAll('select.badge--priority');
+    expect(selects.length).toBe(1);
+    const prio = /** @type {HTMLSelectElement} */ (selects[0]);
+    expect(prio.value).toBe('2');
+
+    prio.value = '4';
+    prio.dispatchEvent(new Event('change'));
+
+    await Promise.resolve();
+
+    const prio2 = /** @type {HTMLSelectElement} */ (
+      mount.querySelector('select.badge--priority')
+    );
+    expect(prio2.value).toBe('4');
+  });
+
+  test('shows toast on error and restores previous value', async () => {
+    document.body.innerHTML =
+      '<section class="panel"><div id="mount"></div></section>';
+    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
+
+    const initial = { id: 'UI-71', title: 'Q', status: 'open', priority: 1 };
+    const send = mockSend(async (type) => {
+      if (type === 'show-issue') {
+        return initial;
+      }
+      if (type === 'update-priority') {
+        throw new Error('oops');
+      }
+      throw new Error('Unexpected');
+    });
+
+    const view = createDetailView(mount, send);
+    await view.load('UI-71');
+    const prio = /** @type {HTMLSelectElement} */ (
+      mount.querySelector('select.badge--priority')
+    );
+    expect(prio.value).toBe('1');
+
+    prio.value = '3';
+    prio.dispatchEvent(new Event('change'));
+
+    await Promise.resolve();
+
+    const toast = mount.querySelector('.toast');
+    expect(toast).toBeTruthy();
+    // Should restore previous value
+    const prio2 = /** @type {HTMLSelectElement} */ (
+      mount.querySelector('select.badge--priority')
+    );
+    expect(prio2.value).toBe('1');
+  });
+});

package/app/views/detail.test.js

@@ -0,0 +1,188 @@
+/* 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

@@ -0,0 +1,78 @@
+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.js

@@ -0,0 +1,228 @@
+import { html, render } from 'lit-html';
+import { issueDisplayId } from '../utils/issue-id.js';
+import { createIssueRowRenderer } from './issue-row.js';
+
+/**
+ * @typedef {{ id: string, title?: string, status?: string, priority?: number, issue_type?: string, assignee?: string, updated_at?: string }} IssueLite
+ */
+
+/**
+ * Epics view: grouped table using `bd epic status --json`. Expanding a group loads
+ * the epic via `getIssue(id)` and then loads each dependent issue to filter out
+ * closed items. Provides inline editing for type, title, priority, status, assignee.
+ * @param {HTMLElement} mount_element
+ * @param {{ getEpicStatus: () => Promise<any[]>, getIssue: (id: string) => Promise<any>, updateIssue: (input: any) => Promise<any> }} data
+ * @param {(id: string) => void} goto_issue - Navigate to issue detail.
+ */
+export function createEpicsView(mount_element, data, goto_issue) {
+  /** @type {any[]} */
+  let groups = [];
+  /** @type {Set<string>} */
+  const expanded = new Set();
+  /** @type {Map<string, IssueLite[]>} */
+  const children = new Map();
+  /** @type {Set<string>} */
+  const loading = new Set();
+
+  // Shared row renderer used for children rows
+  const renderRow = createIssueRowRenderer({
+    navigate: (id) => goto_issue(id),
+    onUpdate: updateInline,
+    requestRender: doRender,
+    getSelectedId: () => null,
+    row_class: 'epic-row'
+  });
+
+  function doRender() {
+    render(template(), mount_element);
+  }
+
+  function template() {
+    if (!groups.length) {
+      return html`<div class="panel__header muted">No epics found.</div>`;
+    }
+    return html`${groups.map((g) => groupTemplate(g))}`;
+  }
+
+  /**
+   * @param {any} g
+   */
+  function groupTemplate(g) {
+    const epic = g.epic || {};
+    const id = String(epic.id || '');
+    const is_open = expanded.has(id);
+    const list = children.get(id) || [];
+    const is_loading = loading.has(id);
+    return html`
+      <div class="epic-group" data-epic-id=${id}>
+        <div
+          class="epic-header"
+          @click=${() => toggle(id)}
+          role="button"
+          tabindex="0"
+          aria-expanded=${is_open}
+        >
+          <span class="mono">${issueDisplayId(id)}</span>
+          <span class="text-truncate" style="margin-left:8px"
+            >${epic.title || '(no title)'}</span
+          >
+          <span
+            class="epic-progress"
+            style="margin-left:auto; display:flex; align-items:center; gap:8px;"
+          >
+            <progress
+              value=${Number(g.closed_children || 0)}
+              max=${Math.max(1, Number(g.total_children || 0))}
+            ></progress>
+            <span class="muted mono"
+              >${g.closed_children}/${g.total_children}</span
+            >
+          </span>
+        </div>
+        ${is_open
+          ? html`<div class="epic-children">
+              ${is_loading
+                ? html`<div class="muted">Loading…</div>`
+                : list.length === 0
+                  ? html`<div class="muted">No open issues</div>`
+                  : html`<table class="table">
+                      <colgroup>
+                        <col style="width: 100px" />
+                        <col style="width: 120px" />
+                        <col />
+                        <col style="width: 120px" />
+                        <col style="width: 160px" />
+                        <col style="width: 130px" />
+                      </colgroup>
+                      <thead>
+                        <tr>
+                          <th>ID</th>
+                          <th>Type</th>
+                          <th>Title</th>
+                          <th>Status</th>
+                          <th>Assignee</th>
+                          <th>Priority</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        ${list.map((it) => renderRow(it))}
+                      </tbody>
+                    </table>`}
+            </div>`
+          : null}
+      </div>
+    `;
+  }
+
+  /**
+   * @param {string} id
+   * @param {{ [k: string]: any }} patch
+   */
+  async function updateInline(id, patch) {
+    try {
+      await data.updateIssue({ id, ...patch });
+      // Opportunistic refresh for that row
+      const full = await data.getIssue(id);
+      /** @type {IssueLite} */
+      const lite = {
+        id: full.id,
+        title: full.title,
+        status: full.status,
+        priority: full.priority,
+        issue_type: full.issue_type,
+        assignee: full.assignee
+      };
+      // Replace in children map
+      for (const arr of children.values()) {
+        const idx = arr.findIndex((x) => x.id === id);
+        if (idx >= 0) {
+          arr[idx] = lite;
+        }
+      }
+      doRender();
+    } catch {
+      // swallow; UI remains
+    }
+  }
+
+  /**
+   * @param {string} epic_id
+   */
+  async function toggle(epic_id) {
+    if (!expanded.has(epic_id)) {
+      expanded.add(epic_id);
+      // Load children if not present
+      if (!children.has(epic_id)) {
+        loading.add(epic_id);
+        doRender();
+        try {
+          const epic = await data.getIssue(epic_id);
+          // Children for the Epics view come from dependents: issues that list
+          // the epic as a dependency. This matches how progress is tracked.
+          /** @type {{ id: string }[]} */
+          const deps = Array.isArray(epic.dependents) ? epic.dependents : [];
+          /** @type {IssueLite[]} */
+          const list = [];
+          for (const d of deps) {
+            try {
+              const full = await data.getIssue(d.id);
+              if (full.status !== 'closed') {
+                list.push({
+                  id: full.id,
+                  title: full.title,
+                  status: full.status,
+                  priority: full.priority,
+                  issue_type: full.issue_type,
+                  assignee: full.assignee,
+                  // include updated_at for secondary sort within same priority
+                  updated_at: /** @type {any} */ (full).updated_at
+                });
+              }
+            } catch {
+              // ignore individual failures
+            }
+          }
+          // Sort by priority then updated_at (if present)
+          list.sort((a, b) => {
+            const pa = a.priority ?? 2;
+            const pb = b.priority ?? 2;
+            if (pa !== pb) {
+              return pa - pb;
+            }
+            // @ts-ignore optional updated_at if present
+            const ua = a.updated_at || '';
+            // @ts-ignore
+            const ub = b.updated_at || '';
+            return ua < ub ? 1 : ua > ub ? -1 : 0;
+          });
+          children.set(epic_id, list);
+        } finally {
+          loading.delete(epic_id);
+        }
+      }
+    } else {
+      expanded.delete(epic_id);
+    }
+    doRender();
+  }
+
+  return {
+    async load() {
+      const res = await data.getEpicStatus();
+      groups = Array.isArray(res) ? res : [];
+      doRender();
+      // Auto-expand first epic on screen
+      try {
+        if (groups.length > 0) {
+          const first_id = String((groups[0].epic && groups[0].epic.id) || '');
+          if (first_id && !expanded.has(first_id)) {
+            // This will render and load children lazily
+            await toggle(first_id);
+          }
+        }
+      } catch {
+        // ignore auto-expand failures
+      }
+    }
+  };
+}