beads-ui 0.1.0

package/app/views/epics.test.js

@@ -0,0 +1,283 @@
+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/issue-row.js

@@ -0,0 +1,191 @@
+import { html } from 'lit-html';
+import { issueDisplayId } from '../utils/issue-id.js';
+import { emojiForPriority } from '../utils/priority-badge.js';
+import { priority_levels } from '../utils/priority.js';
+import { statusLabel } from '../utils/status.js';
+import { createTypeBadge } from '../utils/type-badge.js';
+
+/**
+ * @typedef {{ id: string, title?: string, status?: string, priority?: number, issue_type?: string, assignee?: string }} IssueRowData
+ */
+
+/**
+ * Create a reusable issue row renderer used by list and epics views.
+ * Handles inline editing for title/assignee and selects for status/priority.
+ * @param {{
+ *   navigate: (id: string) => void,
+ *   onUpdate: (id: string, patch: { title?: string, assignee?: string, status?: 'open'|'in_progress'|'closed', priority?: number }) => Promise<void>,
+ *   requestRender: () => void,
+ *   getSelectedId?: () => string | null,
+ *   row_class?: string
+ * }} options
+ * @returns {(it: IssueRowData) => import('lit-html').TemplateResult<1>}
+ */
+export function createIssueRowRenderer(options) {
+  const navigate = options.navigate;
+  const on_update = options.onUpdate;
+  const request_render = options.requestRender;
+  const get_selected_id = options.getSelectedId || (() => null);
+  const row_class = options.row_class || 'issue-row';
+
+  /** @type {Set<string>} */
+  const editing = new Set();
+
+  /**
+   * @param {string} id
+   * @param {'title'|'assignee'} key
+   * @param {string} value
+   * @param {string} [placeholder]
+   */
+  function editableText(id, key, value, placeholder = '') {
+    /** @type {string} */
+    const k = `${id}:${key}`;
+    const is_edit = editing.has(k);
+    if (is_edit) {
+      return html`<span>
+        <input
+          type="text"
+          .value=${value}
+          class="inline-edit"
+          @keydown=${
+            /** @param {KeyboardEvent} e */ async (e) => {
+              if (e.key === 'Escape') {
+                editing.delete(k);
+                request_render();
+              } else if (e.key === 'Enter') {
+                const el = /** @type {HTMLInputElement} */ (e.currentTarget);
+                const next = el.value || '';
+                if (next !== value) {
+                  await on_update(id, { [key]: next });
+                }
+                editing.delete(k);
+                request_render();
+              }
+            }
+          }
+          @blur=${
+            /** @param {Event} ev */ async (ev) => {
+              const el = /** @type {HTMLInputElement} */ (ev.currentTarget);
+              const next = el.value || '';
+              if (next !== value) {
+                await on_update(id, { [key]: next });
+              }
+              editing.delete(k);
+              request_render();
+            }
+          }
+          autofocus
+        />
+      </span>`;
+    }
+    return html`<span
+      class="editable text-truncate ${value ? '' : 'muted'}"
+      tabindex="0"
+      role="button"
+      @click=${
+        /** @param {MouseEvent} e */ (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          editing.add(k);
+          request_render();
+        }
+      }
+      @keydown=${
+        /** @param {KeyboardEvent} e */ (e) => {
+          e.stopPropagation();
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            editing.add(k);
+            request_render();
+          }
+        }
+      }
+      >${value || placeholder}</span
+    >`;
+  }
+
+  /**
+   * @param {string} id
+   * @param {'priority'|'status'} key
+   * @returns {(ev: Event) => Promise<void>}
+   */
+  function makeSelectChange(id, key) {
+    return async (ev) => {
+      /** @type {HTMLSelectElement} */
+      const sel = /** @type {any} */ (ev.currentTarget);
+      const val = sel.value || '';
+      /** @type {{ [k:string]: any }} */
+      const patch = {};
+      patch[key] = key === 'priority' ? Number(val) : val;
+      await on_update(id, patch);
+    };
+  }
+
+  /**
+   * @param {string} id
+   * @returns {(ev: Event) => void}
+   */
+  function makeRowClick(id) {
+    return (ev) => {
+      const el = /** @type {HTMLElement|null} */ (ev.target);
+      if (el && (el.tagName === 'INPUT' || el.tagName === 'SELECT')) {
+        return;
+      }
+      navigate(id);
+    };
+  }
+
+  /**
+   * @param {IssueRowData} it
+   */
+  function rowTemplate(it) {
+    const cur_status = String(it.status || 'open');
+    const cur_prio = String(it.priority ?? 2);
+    const is_selected = get_selected_id() === it.id;
+    return html`<tr
+      class="${row_class} ${is_selected ? 'selected' : ''}"
+      data-issue-id=${it.id}
+      @click=${makeRowClick(it.id)}
+    >
+      <td class="mono">${issueDisplayId(it.id)}</td>
+      <td>${createTypeBadge(it.issue_type)}</td>
+      <td>${editableText(it.id, 'title', it.title || '')}</td>
+      <td>
+        <select
+          class="badge-select badge--status is-${cur_status}"
+          .value=${cur_status}
+          @change=${makeSelectChange(it.id, 'status')}
+        >
+          ${['open', 'in_progress', 'closed'].map(
+            (s) =>
+              html`<option value=${s} ?selected=${cur_status === s}>
+                ${statusLabel(s)}
+              </option>`
+          )}
+        </select>
+      </td>
+      <td>
+        ${editableText(it.id, 'assignee', it.assignee || '', 'Unassigned')}
+      </td>
+      <td>
+        <select
+          class="badge-select badge--priority ${'is-p' + cur_prio}"
+          .value=${cur_prio}
+          @change=${makeSelectChange(it.id, 'priority')}
+        >
+          ${priority_levels.map(
+            (p, i) =>
+              html`<option
+                value=${String(i)}
+                ?selected=${cur_prio === String(i)}
+              >
+                ${emojiForPriority(i)} ${p}
+              </option>`
+          )}
+        </select>
+      </td>
+    </tr>`;
+  }
+
+  return rowTemplate;
+}

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

@@ -0,0 +1,84 @@
+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');
+  });
+});