beads-ui 0.2.0 → 0.3.0

package/app/views/detail.js

@@ -28,6 +28,7 @@ import { createTypeBadge } from '../utils/type-badge.js';
  * @property {string} [acceptance]
  * @property {string} [notes]
  * @property {string} [status]
+ * @property {string} [assignee]
  * @property {number} [priority]
  * @property {string[]} [labels]
  * @property {Dependency[]} [dependencies]
@@ -46,15 +47,19 @@ function defaultNavigateFn(hash) {
  * @param {HTMLElement} mount_element - Element to render into.
  * @param {(type: string, payload?: unknown) => Promise<unknown>} sendFn - RPC transport.
  * @param {(hash: string) => void} [navigateFn] - Navigation function; defaults to setting location.hash.
+ * @param {{ snapshotFor?: (client_id: string) => any[], subscribe?: (fn: () => void) => () => void }} [issue_stores] - Optional issue stores for live updates.
  * @returns {{ load: (id: string) => Promise<void>, clear: () => void, destroy: () => void }} View API.
  */
 export function createDetailView(
   mount_element,
   sendFn,
-  navigateFn = defaultNavigateFn
+  navigateFn = defaultNavigateFn,
+  issue_stores = undefined
 ) {
   /** @type {IssueDetail | null} */
   let current = null;
+  /** @type {string | null} */
+  let current_id = null;
   /** @type {boolean} */
   let pending = false;
   /** @type {boolean} */
@@ -97,6 +102,46 @@ export function createDetailView(
     );
   }
 
+  /**
+   * Refresh current from subscription store snapshot if available.
+   */
+  function refreshFromStore() {
+    if (
+      !current_id ||
+      !issue_stores ||
+      typeof issue_stores.snapshotFor !== 'function'
+    ) {
+      return;
+    }
+    const arr = /** @type {IssueDetail[]} */ (
+      issue_stores.snapshotFor(`detail:${current_id}`)
+    );
+    if (Array.isArray(arr) && arr.length > 0) {
+      // First item is the issue for this subscription
+      const found =
+        arr.find((it) => String(it.id) === String(current_id)) || arr[0];
+      current = /** @type {IssueDetail} */ (found);
+    }
+  }
+
+  // Live updates: re-render when issue stores change
+  if (issue_stores && typeof issue_stores.subscribe === 'function') {
+    issue_stores.subscribe(() => {
+      try {
+        const prev_id = current && current.id ? String(current.id) : null;
+        refreshFromStore();
+        // Only re-render when the current entity changed or when we were loading
+        if (!prev_id || (current && String(current.id) === prev_id)) {
+          doRender();
+        } else {
+          doRender();
+        }
+      } catch {
+        // ignore
+      }
+    });
+  }
+
   // Handlers
   const onTitleSpanClick = () => {
     edit_title = true;
@@ -118,8 +163,9 @@ export function createDetailView(
     if (!current || pending) {
       return;
     }
-    /** @type {HTMLInputElement|null} */
-    const input = /** @type {any} */ (mount_element.querySelector('h2 input'));
+    const input = /** @type {HTMLInputElement|null} */ (
+      mount_element.querySelector('h2 input')
+    );
     const prev = current.title || '';
     const next = input ? input.value : '';
     if (next === prev) {
@@ -178,14 +224,11 @@ export function createDetailView(
     if (!current || pending) {
       return;
     }
-    /** @type {HTMLInputElement|null} */
-    const input = /** @type {any} */ (
+    const input = /** @type {HTMLInputElement|null} */ (
       mount_element.querySelector('#detail-root .prop.assignee input')
     );
-    const prev = String(
-      (current && /** @type {any} */ (current).assignee) || ''
-    );
-    const next = input ? String(input.value || '') : '';
+    const prev = current?.assignee ?? '';
+    const next = input?.value ?? '';
     if (next === prev) {
       edit_assignee = false;
       doRender();
@@ -207,7 +250,7 @@ export function createDetailView(
       }
     } catch {
       // revert visually
-      /** @type {any} */ (current).assignee = prev;
+      current.assignee = prev;
       edit_assignee = false;
       doRender();
       showToast('Failed to update assignee', 'error');
@@ -225,8 +268,7 @@ export function createDetailView(
    * @param {Event} ev
    */
   const onLabelInput = (ev) => {
-    /** @type {HTMLInputElement} */
-    const el = /** @type {any} */ (ev.currentTarget);
+    const el = /** @type {HTMLInputElement} */ (ev.currentTarget);
     new_label_text = el.value || '';
   };
   /**
@@ -294,8 +336,7 @@ export function createDetailView(
       doRender();
       return;
     }
-    /** @type {HTMLSelectElement} */
-    const sel = /** @type {any} */ (ev.currentTarget);
+    const sel = /** @type {HTMLSelectElement} */ (ev.currentTarget);
     const prev = current.status || 'open';
     const next = sel.value;
     if (next === prev) {
@@ -329,8 +370,7 @@ export function createDetailView(
       doRender();
       return;
     }
-    /** @type {HTMLSelectElement} */
-    const sel = /** @type {any} */ (ev.currentTarget);
+    const sel = /** @type {HTMLSelectElement} */ (ev.currentTarget);
     const prev = typeof current.priority === 'number' ? current.priority : 2;
     const next = Number(sel.value);
     if (next === prev) {
@@ -368,10 +408,7 @@ export function createDetailView(
     if (ev.key === 'Escape') {
       edit_desc = false;
       doRender();
-    } else if (
-      ev.key === 'Enter' &&
-      /** @type {KeyboardEvent} */ (ev).ctrlKey
-    ) {
+    } else if (ev.key === 'Enter' && ev.ctrlKey) {
       const btn = /** @type {HTMLButtonElement|null} */ (
         mount_element.querySelector('#detail-root .editable-actions button')
       );
@@ -384,8 +421,7 @@ export function createDetailView(
     if (!current || pending) {
       return;
     }
-    /** @type {HTMLTextAreaElement|null} */
-    const ta = /** @type {any} */ (
+    const ta = /** @type {HTMLTextAreaElement|null} */ (
       mount_element.querySelector('#detail-root textarea')
     );
     const prev = current.description || '';
@@ -461,8 +497,7 @@ export function createDetailView(
     if (!current || pending) {
       return;
     }
-    /** @type {HTMLTextAreaElement|null} */
-    const ta = /** @type {any} */ (
+    const ta = /** @type {HTMLTextAreaElement|null} */ (
       mount_element.querySelector('#detail-root .design textarea')
     );
     const prev = current.design || '';
@@ -528,8 +563,7 @@ export function createDetailView(
     if (!current || pending) {
       return;
     }
-    /** @type {HTMLTextAreaElement|null} */
-    const ta = /** @type {any} */ (
+    const ta = /** @type {HTMLTextAreaElement|null} */ (
       mount_element.querySelector('#detail-root .notes textarea')
     );
     const prev = current.notes || '';
@@ -594,8 +628,7 @@ export function createDetailView(
     if (!current || pending) {
       return;
     }
-    /** @type {HTMLTextAreaElement|null} */
-    const ta = /** @type {any} */ (
+    const ta = /** @type {HTMLTextAreaElement|null} */ (
       mount_element.querySelector('#detail-root .acceptance textarea')
     );
     const prev = current.acceptance || '';
@@ -971,12 +1004,7 @@ export function createDetailView(
                             .value=${/** @type {any} */ (issue).assignee || ''}
                             size=${Math.min(
                               40,
-                              Math.max(
-                                12,
-                                String(
-                                  /** @type {any} */ (issue).assignee || ''
-                                ).length + 3
-                              )
+                              Math.max(12, (issue.assignee || '').length + 3)
                             )}
                             @keydown=${
                               /** @param {KeyboardEvent} e */ (e) => {
@@ -1005,9 +1033,7 @@ export function createDetailView(
                             Cancel
                           </button>`
                       : html`${(() => {
-                          const raw = String(
-                            /** @type {any} */ (issue).assignee || ''
-                          );
+                          const raw = issue.assignee || '';
                           const has = raw.trim().length > 0;
                           const text = has ? raw : 'Unassigned';
                           const cls = has ? 'editable' : 'editable muted';
@@ -1036,7 +1062,7 @@ export function createDetailView(
 
   function doRender() {
     if (!current) {
-      renderPlaceholder('No issue selected');
+      renderPlaceholder(current_id ? 'Loading…' : 'No issue selected');
       return;
     }
     render(detailTemplate(current), mount_element);
@@ -1051,9 +1077,7 @@ export function createDetailView(
    */
   function makeDepRemoveClick(did, title) {
     return async (ev) => {
-      /** @type {Event} */
-      const e = ev;
-      e.stopPropagation();
+      ev.stopPropagation();
       if (!current || pending) {
         return;
       }
@@ -1099,10 +1123,10 @@ export function createDetailView(
       if (!current || pending) {
         return;
       }
-      /** @type {HTMLButtonElement} */
-      const btn = /** @type {any} */ (ev.currentTarget);
-      /** @type {HTMLInputElement|null} */
-      const input = /** @type {any} */ (btn.previousElementSibling);
+      const btn = /** @type {HTMLButtonElement} */ (ev.currentTarget);
+      const input = /** @type {HTMLInputElement|null} */ (
+        btn.previousElementSibling
+      );
       const target = input ? input.value.trim() : '';
       if (!target || target === current.id) {
         showToast('Enter a different issue id');
@@ -1204,28 +1228,14 @@ export function createDetailView(
         renderPlaceholder('No issue selected');
         return;
       }
-      /** @type {unknown} */
-      let result;
-      try {
-        result = await sendFn('show-issue', { id });
-      } catch {
-        result = null;
-      }
-      if (!result || typeof result !== 'object') {
-        renderPlaceholder('Issue not found');
-        return;
-      }
-      const issue = /** @type {IssueDetail} */ (result);
-      // Some backends may normalize ID casing (e.g., UI-1 vs ui-1).
-      // Treat IDs case-insensitively to avoid false negatives on deep links.
-      if (
-        !issue ||
-        String(issue.id || '').toLowerCase() !== String(id || '').toLowerCase()
-      ) {
-        renderPlaceholder('Issue not found');
-        return;
+      current_id = String(id);
+      // Try from store first; show placeholder while waiting for snapshot
+      current = null;
+      refreshFromStore();
+      if (!current) {
+        renderPlaceholder('Loading…');
       }
-      current = issue;
+      // Render from current (if available) or keep placeholder until push arrives
       pending = false;
       doRender();
     },

package/app/views/epics.js

@@ -1,28 +1,57 @@
 import { html, render } from 'lit-html';
+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}>
@@ -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

@@ -16,8 +16,7 @@ import { createIssueIdRenderer } from '../utils/issue-id-renderer.js';
  * @returns {{ open: (id: string) => void, close: () => void, getMount: () => HTMLElement }}
  */
 export function createIssueDialog(mount_element, store, onClose) {
-  /** @type {HTMLDialogElement} */
-  const dialog = /** @type {any} */ (document.createElement('dialog'));
+  const dialog = document.createElement('dialog');
   dialog.id = 'issue-dialog';
   dialog.setAttribute('role', 'dialog');
   dialog.setAttribute('aria-modal', 'true');
@@ -37,16 +36,13 @@ export function createIssueDialog(mount_element, store, onClose) {
 
   mount_element.appendChild(dialog);
 
-  /** @type {HTMLElement} */
-  const body_mount = /** @type {any} */ (
+  const body_mount = /** @type {HTMLElement} */ (
     dialog.querySelector('#issue-dialog-body')
   );
-  /** @type {HTMLElement} */
-  const title_el = /** @type {any} */ (
+  const title_el = /** @type {HTMLElement} */ (
     dialog.querySelector('#issue-dialog-title')
   );
-  /** @type {HTMLButtonElement} */
-  const btn_close = /** @type {any} */ (
+  const btn_close = /** @type {HTMLButtonElement} */ (
     dialog.querySelector('.issue-dialog__close')
   );
 
@@ -56,7 +52,7 @@ export function createIssueDialog(mount_element, store, onClose) {
   function setTitle(id) {
     // Use copyable ID renderer but keep visible text as raw id for tests/clarity
     title_el.replaceChildren();
-    title_el.appendChild(createIssueIdRenderer(String(id || '')));
+    title_el.appendChild(createIssueIdRenderer(id));
   }
 
   // Backdrop click: when clicking the dialog itself (outside container), close
@@ -102,7 +98,7 @@ export function createIssueDialog(mount_element, store, onClose) {
   function open(id) {
     // Capture currently focused element to restore after closing
     try {
-      const ae = /** @type {any} */ (document.activeElement);
+      const ae = document.activeElement;
       if (ae && ae instanceof HTMLElement) {
         last_focus = ae;
       } else {
@@ -113,11 +109,8 @@ export function createIssueDialog(mount_element, store, onClose) {
     }
     setTitle(id);
     try {
-      if (
-        'showModal' in dialog &&
-        typeof (/** @type {any} */ (dialog).showModal) === 'function'
-      ) {
-        /** @type {any} */ (dialog).showModal();
+      if ('showModal' in dialog && typeof dialog.showModal === 'function') {
+        dialog.showModal();
       } else {
         dialog.setAttribute('open', '');
       }

package/app/views/issue-row.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) {
@@ -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 = {};