beads-ui 0.1.2 → 0.3.0

package/app/views/epics.js

@@ -1,28 +1,57 @@
 import { html, render } from 'lit-html';
-import { issueDisplayId } from '../utils/issue-id.js';
+import { createListSelectors } from '../data/list-selectors.js';
+import { createIssueIdRenderer } from '../utils/issue-id-renderer.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
+ * @typedef {{ id: string, title?: string, status?: string, priority?: number, issue_type?: string, assignee?: string, created_at?: number, updated_at?: number }} 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.
+ * Epics view (push-only):
+ * - Derives epic groups from the local issues store (no RPC reads)
+ * - Subscribes to `tab:epics` for top-level membership
+ * - On expand, subscribes to `detail:{id}` (issue-detail) for the epic
+ * - Renders children from the epic detail's `dependents` list
+ * - Provides inline edits via mutations; UI re-renders on push
  * @param {HTMLElement} mount_element
- * @param {{ getEpicStatus: () => Promise<any[]>, getIssue: (id: string) => Promise<any>, updateIssue: (input: any) => Promise<any> }} data
+ * @param {{ updateIssue: (input: any) => Promise<any> }} data
  * @param {(id: string) => void} goto_issue - Navigate to issue detail.
+ * @param {{ subscribeList: (client_id: string, spec: { type: string, params?: Record<string, string|number|boolean> }) => Promise<() => Promise<void>>, selectors: { getIds: (client_id: string) => string[], count?: (client_id: string) => number } }} [subscriptions]
+ * @param {{ snapshotFor?: (client_id: string) => any[], subscribe?: (fn: () => void) => () => void }} [issue_stores]
  */
-export function createEpicsView(mount_element, data, goto_issue) {
+export function createEpicsView(
+  mount_element,
+  data,
+  goto_issue,
+  subscriptions = undefined,
+  issue_stores = undefined
+) {
   /** @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();
+  /** @type {Map<string, () => Promise<void>>} */
+  const epic_unsubs = new Map();
+  // Centralized selection helpers
+  const selectors = issue_stores ? createListSelectors(issue_stores) : null;
+  // Live re-render on pushes: recompute groups when stores change
+  if (selectors) {
+    selectors.subscribe(() => {
+      const had_none = groups.length === 0;
+      groups = buildGroupsFromSnapshot();
+      doRender();
+      // Auto-expand first epic when transitioning from empty to non-empty
+      if (had_none && groups.length > 0) {
+        const first_id = String(groups[0].epic?.id || '');
+        if (first_id && !expanded.has(first_id)) {
+          void toggle(first_id);
+        }
+      }
+    });
+  }
 
   // Shared row renderer used for children rows
   const renderRow = createIssueRowRenderer({
@@ -51,7 +80,8 @@ export function createEpicsView(mount_element, data, goto_issue) {
     const epic = g.epic || {};
     const id = String(epic.id || '');
     const is_open = expanded.has(id);
-    const list = children.get(id) || [];
+    // Compose children via selectors
+    const list = selectors ? selectors.selectEpicChildren(id) : [];
     const is_loading = loading.has(id);
     return html`
       <div class="epic-group" data-epic-id=${id}>
@@ -62,7 +92,7 @@ export function createEpicsView(mount_element, data, goto_issue) {
           tabindex="0"
           aria-expanded=${is_open}
         >
-          <span class="mono">${issueDisplayId(id)}</span>
+          ${createIssueIdRenderer(id, { class_name: 'mono' })}
           <span class="text-truncate" style="margin-left:8px"
             >${epic.title || '(no title)'}</span
           >
@@ -84,7 +114,7 @@ export function createEpicsView(mount_element, data, goto_issue) {
               ${is_loading
                 ? html`<div class="muted">Loading…</div>`
                 : list.length === 0
-                  ? html`<div class="muted">No open issues</div>`
+                  ? html`<div class="muted">No issues found</div>`
                   : html`<table class="table">
                       <colgroup>
                         <col style="width: 100px" />
@@ -121,24 +151,7 @@ export function createEpicsView(mount_element, data, goto_issue) {
   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;
-        }
-      }
+      // Re-render; view will update on subsequent push
       doRender();
     } catch {
       // swallow; UI remains
@@ -151,70 +164,109 @@ export function createEpicsView(mount_element, data, goto_issue) {
   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();
+      loading.add(epic_id);
+      doRender();
+      // Subscribe to epic detail; children are rendered from `dependents`
+      if (subscriptions && typeof subscriptions.subscribeList === 'function') {
         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
+          // Register store first to avoid dropping the initial snapshot
+          try {
+            if (issue_stores && /** @type {any} */ (issue_stores).register) {
+              /** @type {any} */ (issue_stores).register(`detail:${epic_id}`, {
+                type: 'issue-detail',
+                params: { id: epic_id }
+              });
             }
+          } catch {
+            // ignore
           }
-          // 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;
+          const u = await subscriptions.subscribeList(`detail:${epic_id}`, {
+            type: 'issue-detail',
+            params: { id: epic_id }
           });
-          children.set(epic_id, list);
-        } finally {
-          loading.delete(epic_id);
+          epic_unsubs.set(epic_id, u);
+        } catch {
+          // ignore subscription failures
         }
       }
+      // Mark as not loading after subscribe attempt; membership will stream in
+      loading.delete(epic_id);
     } else {
       expanded.delete(epic_id);
+      // Unsubscribe when collapsing
+      if (epic_unsubs.has(epic_id)) {
+        try {
+          const u = epic_unsubs.get(epic_id);
+          if (u) {
+            await u();
+          }
+        } catch {
+          // ignore
+        }
+        epic_unsubs.delete(epic_id);
+        try {
+          if (issue_stores && /** @type {any} */ (issue_stores).unregister) {
+            /** @type {any} */ (issue_stores).unregister(`detail:${epic_id}`);
+          }
+        } catch {
+          // ignore
+        }
+      }
     }
     doRender();
   }
 
+  /** Build groups from the current `tab:epics` snapshot. */
+  function buildGroupsFromSnapshot() {
+    /** @type {IssueLite[]} */
+    const epic_entities =
+      issue_stores && issue_stores.snapshotFor
+        ? /** @type {IssueLite[]} */ (
+            issue_stores.snapshotFor('tab:epics') || []
+          )
+        : [];
+    const next_groups = [];
+    for (const epic of epic_entities) {
+      const dependents = Array.isArray(/** @type {any} */ (epic).dependents)
+        ? /** @type {any[]} */ (/** @type {any} */ (epic).dependents)
+        : [];
+      // Prefer explicit counters when provided by server; otherwise derive
+      const has_total = Number.isFinite(
+        /** @type {any} */ (epic).total_children
+      );
+      const has_closed = Number.isFinite(
+        /** @type {any} */ (epic).closed_children
+      );
+      const total = has_total
+        ? Number(/** @type {any} */ (epic).total_children) || 0
+        : dependents.length;
+      let closed = has_closed
+        ? Number(/** @type {any} */ (epic).closed_children) || 0
+        : 0;
+      if (!has_closed) {
+        for (const d of dependents) {
+          if (String(d.status || '') === 'closed') {
+            closed++;
+          }
+        }
+      }
+      next_groups.push({
+        epic,
+        total_children: total,
+        closed_children: closed
+      });
+    }
+    return next_groups;
+  }
+
   return {
     async load() {
-      const res = await data.getEpicStatus();
-      groups = Array.isArray(res) ? res : [];
+      groups = buildGroupsFromSnapshot();
       doRender();
       // Auto-expand first epic on screen
       try {
         if (groups.length > 0) {
-          const first_id = String((groups[0].epic && groups[0].epic.id) || '');
+          const first_id = String(groups[0].epic?.id || '');
           if (first_id && !expanded.has(first_id)) {
             // This will render and load children lazily
             await toggle(first_id);

package/app/views/issue-dialog.js

@@ -0,0 +1,163 @@
+// Lightweight wrapper around the native <dialog> for issue details
+import { createIssueIdRenderer } from '../utils/issue-id-renderer.js';
+
+// Provides: open(id), close(), getMount()
+// Ensures accessibility, backdrop click to close, and Esc handling.
+
+/**
+ * @typedef {{ getState: () => { selected_id: string|null } }} Store
+ */
+
+/**
+ * Create and manage the Issue Details dialog.
+ * @param {HTMLElement} mount_element - Container to attach the <dialog> to (e.g., #detail-panel)
+ * @param {Store} store - Read-only access to app state
+ * @param {() => void} onClose - Called when dialog requests close (backdrop/esc/button)
+ * @returns {{ open: (id: string) => void, close: () => void, getMount: () => HTMLElement }}
+ */
+export function createIssueDialog(mount_element, store, onClose) {
+  const dialog = document.createElement('dialog');
+  dialog.id = 'issue-dialog';
+  dialog.setAttribute('role', 'dialog');
+  dialog.setAttribute('aria-modal', 'true');
+
+  // Shell: header (id + close) + body mount
+  dialog.innerHTML = `
+    <div class="issue-dialog__container" part="container">
+      <header class="issue-dialog__header">
+        <div class="issue-dialog__title">
+          <span class="mono" id="issue-dialog-title"></span>
+        </div>
+        <button type="button" class="issue-dialog__close" aria-label="Close">×</button>
+      </header>
+      <div class="issue-dialog__body" id="issue-dialog-body"></div>
+    </div>
+  `;
+
+  mount_element.appendChild(dialog);
+
+  const body_mount = /** @type {HTMLElement} */ (
+    dialog.querySelector('#issue-dialog-body')
+  );
+  const title_el = /** @type {HTMLElement} */ (
+    dialog.querySelector('#issue-dialog-title')
+  );
+  const btn_close = /** @type {HTMLButtonElement} */ (
+    dialog.querySelector('.issue-dialog__close')
+  );
+
+  /**
+   * @param {string} id
+   */
+  function setTitle(id) {
+    // Use copyable ID renderer but keep visible text as raw id for tests/clarity
+    title_el.replaceChildren();
+    title_el.appendChild(createIssueIdRenderer(id));
+  }
+
+  // Backdrop click: when clicking the dialog itself (outside container), close
+  dialog.addEventListener('mousedown', (ev) => {
+    if (ev.target === dialog) {
+      ev.preventDefault();
+      requestClose();
+    }
+  });
+  // Esc key produces a cancel event on <dialog>
+  dialog.addEventListener('cancel', (ev) => {
+    ev.preventDefault();
+    requestClose();
+  });
+  // Close button
+  btn_close.addEventListener('click', () => requestClose());
+
+  /** @type {HTMLElement | null} */
+  let last_focus = null;
+
+  function requestClose() {
+    try {
+      if (typeof dialog.close === 'function') {
+        dialog.close();
+      } else {
+        dialog.removeAttribute('open');
+      }
+    } catch {
+      dialog.removeAttribute('open');
+    }
+    try {
+      onClose();
+    } catch {
+      // ignore consumer errors
+    }
+    // Restore focus to the element that had focus before opening
+    restoreFocus();
+  }
+
+  /**
+   * @param {string} id
+   */
+  function open(id) {
+    // Capture currently focused element to restore after closing
+    try {
+      const ae = document.activeElement;
+      if (ae && ae instanceof HTMLElement) {
+        last_focus = ae;
+      } else {
+        last_focus = null;
+      }
+    } catch {
+      last_focus = null;
+    }
+    setTitle(id);
+    try {
+      if ('showModal' in dialog && typeof dialog.showModal === 'function') {
+        dialog.showModal();
+      } else {
+        dialog.setAttribute('open', '');
+      }
+      // Focus the dialog container for keyboard users
+      setTimeout(() => {
+        try {
+          btn_close.focus();
+        } catch {
+          // ignore
+        }
+      }, 0);
+    } catch {
+      // Fallback for environments without <dialog>
+      dialog.setAttribute('open', '');
+    }
+  }
+
+  function close() {
+    try {
+      if (typeof dialog.close === 'function') {
+        dialog.close();
+      } else {
+        dialog.removeAttribute('open');
+      }
+    } catch {
+      dialog.removeAttribute('open');
+    }
+    restoreFocus();
+  }
+
+  function restoreFocus() {
+    try {
+      if (last_focus && document.contains(last_focus)) {
+        last_focus.focus();
+      }
+    } catch {
+      // ignore focus errors
+    } finally {
+      last_focus = null;
+    }
+  }
+
+  return {
+    open,
+    close,
+    getMount() {
+      return body_mount;
+    }
+  };
+}

package/app/views/issue-row.js

@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import { issueDisplayId } from '../utils/issue-id.js';
+import { createIssueIdRenderer } from '../utils/issue-id-renderer.js';
 import { emojiForPriority } from '../utils/priority-badge.js';
 import { priority_levels } from '../utils/priority.js';
 import { statusLabel } from '../utils/status.js';
@@ -38,7 +38,6 @@ export function createIssueRowRenderer(options) {
    * @param {string} [placeholder]
    */
   function editableText(id, key, value, placeholder = '') {
-    /** @type {string} */
     const k = `${id}:${key}`;
     const is_edit = editing.has(k);
     if (is_edit) {
@@ -92,9 +91,9 @@ export function createIssueRowRenderer(options) {
       }
       @keydown=${
         /** @param {KeyboardEvent} e */ (e) => {
-          e.stopPropagation();
           if (e.key === 'Enter') {
             e.preventDefault();
+            e.stopPropagation();
             editing.add(k);
             request_render();
           }
@@ -111,8 +110,7 @@ export function createIssueRowRenderer(options) {
    */
   function makeSelectChange(id, key) {
     return async (ev) => {
-      /** @type {HTMLSelectElement} */
-      const sel = /** @type {any} */ (ev.currentTarget);
+      const sel = /** @type {HTMLSelectElement} */ (ev.currentTarget);
       const val = sel.value || '';
       /** @type {{ [k:string]: any }} */
       const patch = {};
@@ -143,14 +141,15 @@ export function createIssueRowRenderer(options) {
     const cur_prio = String(it.priority ?? 2);
     const is_selected = get_selected_id() === it.id;
     return html`<tr
+      role="row"
       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>
+      <td role="gridcell" class="mono">${createIssueIdRenderer(it.id)}</td>
+      <td role="gridcell">${createTypeBadge(it.issue_type)}</td>
+      <td role="gridcell">${editableText(it.id, 'title', it.title || '')}</td>
+      <td role="gridcell">
         <select
           class="badge-select badge--status is-${cur_status}"
           .value=${cur_status}
@@ -164,10 +163,10 @@ export function createIssueRowRenderer(options) {
           )}
         </select>
       </td>
-      <td>
+      <td role="gridcell">
         ${editableText(it.id, 'assignee', it.assignee || '', 'Unassigned')}
       </td>
-      <td>
+      <td role="gridcell">
         <select
           class="badge-select badge--priority ${'is-p' + cur_prio}"
           .value=${cur_prio}