beads-ui 0.2.0 → 0.3.1

package/app/views/list.js

@@ -1,5 +1,6 @@
-/* global NodeListOf */
 import { html, render } from 'lit-html';
+import { createListSelectors } from '../data/list-selectors.js';
+import { cmpClosedDesc } from '../data/sort.js';
 import { ISSUE_TYPES, typeLabel } from '../utils/issue-type.js';
 import { issueHashFor } from '../utils/issue-url.js';
 // issueDisplayId not used directly in this file; rendered in shared row
@@ -9,18 +10,41 @@ import { createIssueRowRenderer } from './issue-row.js';
 // List view implementation; requires a transport send function.
 
 /**
- * @typedef {{ id: string, title?: string, status?: string, priority?: number, issue_type?: string, assignee?: string, labels?: string[] }} Issue
+ * @typedef {{ id: string, title?: string, status?: 'closed'|'open'|'in_progress', priority?: number, issue_type?: string, assignee?: string, labels?: string[] }} Issue
  */
 
 /**
  * Create the Issues List view.
+ *
  * @param {HTMLElement} mount_element - Element to render into.
  * @param {(type: string, payload?: unknown) => Promise<unknown>} sendFn - RPC transport.
  * @param {(hash: string) => void} [navigate_fn] - Navigation function (defaults to setting location.hash).
  * @param {{ getState: () => any, setState: (patch: any) => void, subscribe: (fn: (s:any)=>void)=>()=>void }} [store] - Optional state store.
+ * @param {{ selectors: { getIds: (client_id: string) => string[] } }} [_subscriptions]
+ * @param {{ snapshotFor?: (client_id: string) => any[], subscribe?: (fn: () => void) => () => void }} [issueStores]
  * @returns {{ load: () => Promise<void>, destroy: () => void }} View API.
  */
-export function createListView(mount_element, sendFn, navigate_fn, store) {
+/**
+ * Create the Issues List view.
+ *
+ * @param {HTMLElement} mount_element
+ * @param {(type: string, payload?: unknown) => Promise<unknown>} sendFn
+ * @param {(hash: string) => void} [navigateFn]
+ * @param {{ getState: () => any, setState: (patch: any) => void, subscribe: (fn: (s:any)=>void)=>()=>void }} [store]
+ * @param {{ selectors: { getIds: (client_id: string) => string[] } }} [_subscriptions]
+ * @param {{ snapshotFor?: (client_id: string) => any[], subscribe?: (fn: () => void) => () => void }} [issue_stores]
+ * @returns {{ load: () => Promise<void>, destroy: () => void }}
+ */
+export function createListView(
+  mount_element,
+  sendFn,
+  navigateFn,
+  store,
+  _subscriptions = undefined,
+  issue_stores = undefined
+) {
+  // Touch unused param to satisfy lint rules without impacting behavior
+  /** @type {any} */ (void _subscriptions);
   /** @type {string} */
   let status_filter = 'all';
   /** @type {string} */
@@ -36,7 +60,7 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
   // Shared row renderer (used in template below)
   const row_renderer = createIssueRowRenderer({
     navigate: (id) => {
-      const nav = navigate_fn || ((h) => (window.location.hash = h));
+      const nav = navigateFn || ((h) => (window.location.hash = h));
       /** @type {'issues'|'epics'|'board'} */
       const view = store ? store.getState().view : 'issues';
       nav(issueHashFor(view, id));
@@ -54,12 +78,11 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
    * @param {Event} ev
    */
   const onStatusChange = async (ev) => {
-    /** @type {HTMLSelectElement} */
-    const sel = /** @type {any} */ (ev.currentTarget);
+    const sel = /** @type {HTMLSelectElement} */ (ev.currentTarget);
     status_filter = sel.value;
     if (store) {
       store.setState({
-        filters: { status: /** @type {any} */ (status_filter) }
+        filters: { status: status_filter }
       });
     }
     // Always reload on status changes
@@ -73,8 +96,7 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
    * @param {Event} ev
    */
   const onSearchInput = (ev) => {
-    /** @type {HTMLInputElement} */
-    const input = /** @type {any} */ (ev.currentTarget);
+    const input = /** @type {HTMLInputElement} */ (ev.currentTarget);
     search_text = input.value;
     if (store) {
       store.setState({ filters: { search: search_text } });
@@ -84,11 +106,11 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
 
   /**
    * Event: type select change.
+   *
    * @param {Event} ev
    */
   const onTypeChange = (ev) => {
-    /** @type {HTMLSelectElement} */
-    const sel = /** @type {any} */ (ev.currentTarget);
+    const sel = /** @type {HTMLSelectElement} */ (ev.currentTarget);
     type_filter = sel.value || '';
     if (store) {
       store.setState({ filters: { type: type_filter } });
@@ -106,12 +128,13 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
     }
   }
   // Initial values are reflected via bound `.value` in the template
+  // Compose helpers: centralize membership + entity selection + sorting
+  const selectors = issue_stores ? createListSelectors(issue_stores) : null;
 
   /**
    * Build lit-html template for the list view.
    */
   function template() {
-    /** @type {Issue[]} */
     let filtered = issues_cache;
     if (status_filter !== 'all' && status_filter !== 'ready') {
       filtered = filtered.filter(
@@ -131,6 +154,10 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
         (it) => String(it.issue_type || '') === String(type_filter)
       );
     }
+    // Sorting: closed list is a special case → sort by closed_at desc only
+    if (status_filter === 'closed') {
+      filtered = filtered.slice().sort(cmpClosedDesc);
+    }
 
     return html`
       <div class="panel__header">
@@ -212,40 +239,56 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
   // no separate ready checkbox when using select option
 
   /**
-   * Load issues from backend and re-render.
+   * Update minimal fields inline via ws mutations and refresh that row's data.
+   *
+   * @param {string} id
+   * @param {{ [k: string]: any }} patch
+   */
+  async function updateInline(id, patch) {
+    try {
+      // Dispatch specific mutations based on provided keys
+      if (typeof patch.title === 'string') {
+        await sendFn('edit-text', { id, field: 'title', value: patch.title });
+      }
+      if (typeof patch.assignee === 'string') {
+        await sendFn('update-assignee', { id, assignee: patch.assignee });
+      }
+      if (typeof patch.status === 'string') {
+        await sendFn('update-status', { id, status: patch.status });
+      }
+      if (typeof patch.priority === 'number') {
+        await sendFn('update-priority', { id, priority: patch.priority });
+      }
+    } catch {
+      // ignore failures; UI state remains as-is
+    }
+  }
+
+  /**
+   * Load issues from local push stores and re-render.
    */
   async function load() {
     // Preserve scroll position to avoid jarring jumps on live refresh
-    /** @type {HTMLElement|null} */
-    const beforeEl = /** @type {any} */ (
+    const beforeEl = /** @type {HTMLElement|null} */ (
       mount_element.querySelector('#list-root')
     );
     const prevScroll = beforeEl ? beforeEl.scrollTop : 0;
-    /** @type {any} */
-    const filters = {};
-    if (status_filter !== 'all' && status_filter !== 'ready') {
-      filters.status = status_filter;
-    }
-    if (status_filter === 'ready') {
-      filters.ready = true;
-    }
-    /** @type {unknown} */
-    let result;
+    // Compose items from subscriptions membership and issues store entities
     try {
-      result = await sendFn('list-issues', { filters });
+      if (selectors) {
+        issues_cache = /** @type {Issue[]} */ (
+          selectors.selectIssuesFor('tab:issues')
+        );
+      } else {
+        issues_cache = [];
+      }
     } catch {
-      result = [];
-    }
-    if (!Array.isArray(result)) {
       issues_cache = [];
-    } else {
-      issues_cache = /** @type {Issue[]} */ (result);
     }
     doRender();
     // Restore scroll position if possible
     try {
-      /** @type {HTMLElement|null} */
-      const afterEl = /** @type {any} */ (
+      const afterEl = /** @type {HTMLElement|null} */ (
         mount_element.querySelector('#list-root')
       );
       if (afterEl && prevScroll > 0) {
@@ -262,12 +305,10 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
     // Grid cell Up/Down navigation when focus is inside the table and not within
     // an editable control (input/textarea/select). Preserves column position.
     if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
-      /** @type {any} */
-      const tgt = /** @type {any} */ (ev.target);
-      /** @type {HTMLTableElement|null} */
+      const tgt = /** @type {HTMLElement} */ (ev.target);
       const table =
         tgt && typeof tgt.closest === 'function'
-          ? /** @type {any} */ (tgt.closest('#list-root table.table'))
+          ? tgt.closest('#list-root table.table')
           : null;
       if (table) {
         // Do not intercept when inside native editable controls
@@ -279,34 +320,26 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
               tgt.closest('select'))
         );
         if (!in_editable) {
-          /** @type {HTMLTableCellElement|null} */
           const cell =
-            tgt && typeof tgt.closest === 'function'
-              ? /** @type {any} */ (tgt.closest('td'))
-              : null;
+            tgt && typeof tgt.closest === 'function' ? tgt.closest('td') : null;
           if (cell && cell.parentElement) {
-            /** @type {HTMLTableRowElement} */
-            const row = /** @type {any} */ (cell.parentElement);
-            /** @type {HTMLTableSectionElement|null} */
-            const tbody = /** @type {any} */ (row.parentElement);
+            const row = /** @type {HTMLTableRowElement} */ (cell.parentElement);
+            const tbody = /** @type {HTMLTableSectionElement|null} */ (
+              row.parentElement
+            );
             if (tbody && tbody.querySelectorAll) {
               const rows = Array.from(tbody.querySelectorAll('tr'));
               const row_idx = Math.max(0, rows.indexOf(row));
-              const col_idx = /** @type {any} */ (cell).cellIndex || 0;
+              const col_idx = cell.cellIndex || 0;
               const next_idx =
                 ev.key === 'ArrowDown'
                   ? Math.min(row_idx + 1, rows.length - 1)
                   : Math.max(row_idx - 1, 0);
-              const next_row = /** @type {HTMLTableRowElement} */ (
-                rows[next_idx]
-              );
-              /** @type {HTMLTableCellElement|null} */
-              const next_cell = /** @type {any} */ (
-                next_row && next_row.cells ? next_row.cells[col_idx] : null
-              );
+              const next_row = rows[next_idx];
+              const next_cell =
+                next_row && next_row.cells ? next_row.cells[col_idx] : null;
               if (next_cell) {
-                /** @type {HTMLElement|null} */
-                const focusable = /** @type {any} */ (
+                const focusable = /** @type {HTMLElement|null} */ (
                   next_cell.querySelector(
                     'button:not([disabled]), [tabindex]:not([tabindex="-1"]), a[href], select:not([disabled]), input:not([disabled]):not([type="hidden"]), textarea:not([disabled])'
                   )
@@ -323,14 +356,10 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
       }
     }
 
-    /** @type {HTMLTableSectionElement|null} */
-    const tbody = /** @type {any} */ (
+    const tbody = /** @type {HTMLTableSectionElement|null} */ (
       mount_element.querySelector('#list-root tbody')
     );
-    /** @type {NodeListOf<HTMLTableRowElement>} */
-    const items = tbody
-      ? tbody.querySelectorAll('tr')
-      : /** @type {any} */ ([]);
+    const items = tbody ? tbody.querySelectorAll('tr') : [];
     if (items.length === 0) {
       return;
     }
@@ -370,7 +399,7 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
       const current = items[idx];
       const id = current ? current.getAttribute('data-issue-id') : '';
       if (id) {
-        const nav = navigate_fn || ((h) => (window.location.hash = h));
+        const nav = navigateFn || ((h) => (window.location.hash = h));
         /** @type {'issues'|'epics'|'board'} */
         const view = store ? store.getState().view : 'issues';
         nav(issueHashFor(view, id));
@@ -412,6 +441,20 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
     });
   }
 
+  // Live updates: recompose and re-render when issue stores change
+  if (selectors) {
+    selectors.subscribe(() => {
+      try {
+        issues_cache = /** @type {Issue[]} */ (
+          selectors.selectIssuesFor('tab:issues')
+        );
+        doRender();
+      } catch {
+        // ignore
+      }
+    });
+  }
+
   return {
     load,
     destroy() {
@@ -422,46 +465,4 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
       }
     }
   };
-
-  /**
-   * Update minimal fields inline via ws mutations and refresh that row's data.
-   * @param {string} id
-   * @param {{ [k: string]: any }} patch
-   */
-  async function updateInline(id, patch) {
-    try {
-      // Dispatch specific mutations based on provided keys
-      if (typeof patch.title === 'string') {
-        await sendFn('edit-text', { id, field: 'title', value: patch.title });
-      }
-      if (typeof patch.assignee === 'string') {
-        await sendFn('update-assignee', { id, assignee: patch.assignee });
-      }
-      if (typeof patch.status === 'string') {
-        await sendFn('update-status', { id, status: patch.status });
-      }
-      if (typeof patch.priority === 'number') {
-        await sendFn('update-priority', { id, priority: patch.priority });
-      }
-      // Refresh the item from backend
-      /** @type {any} */
-      const full = await sendFn('show-issue', { id });
-      // Replace in cache
-      const idx = issues_cache.findIndex((x) => x.id === id);
-      if (idx >= 0 && full && typeof full === 'object') {
-        issues_cache[idx] = /** @type {Issue} */ ({
-          id: full.id,
-          title: full.title,
-          status: full.status,
-          priority: full.priority,
-          issue_type: full.issue_type,
-          assignee: full.assignee,
-          labels: Array.isArray(full.labels) ? full.labels : []
-        });
-      }
-      doRender();
-    } catch {
-      // ignore failures; UI state remains as-is
-    }
-  }
 }

package/app/views/nav.js

@@ -2,6 +2,7 @@ import { html, render } from 'lit-html';
 
 /**
  * Render the top navigation with three tabs and handle route changes.
+ *
  * @param {HTMLElement} mount_element
  * @param {{ getState: () => any, subscribe: (fn: (s: any) => void) => () => void }} store
  * @param {{ gotoView: (v: 'issues'|'epics'|'board') => void }} router

package/app/views/new-issue-dialog.js

@@ -3,6 +3,7 @@ import { priority_levels } from '../utils/priority.js';
 
 /**
  * Create and manage the New Issue dialog (native <dialog>).
+ *
  * @param {HTMLElement} mount_element - Container to attach dialog (e.g., main#app)
  * @param {(type: import('../protocol.js').MessageType, payload?: unknown) => Promise<unknown>} sendFn - Transport function
  * @param {{ gotoIssue: (id: string) => void }} router - Router for opening details after create
@@ -10,8 +11,9 @@ import { priority_levels } from '../utils/priority.js';
  * @returns {{ open: () => void, close: () => void }}
  */
 export function createNewIssueDialog(mount_element, sendFn, router, store) {
-  /** @type {HTMLDialogElement} */
-  const dialog = /** @type {any} */ (document.createElement('dialog'));
+  const dialog = /** @type {HTMLDialogElement} */ (
+    document.createElement('dialog')
+  );
   dialog.id = 'new-issue-dialog';
   dialog.setAttribute('role', 'dialog');
   dialog.setAttribute('aria-modal', 'true');
@@ -52,32 +54,34 @@ export function createNewIssueDialog(mount_element, sendFn, router, store) {
 
   mount_element.appendChild(dialog);
 
-  /** @type {HTMLFormElement} */
-  const form = /** @type {any} */ (dialog.querySelector('#new-issue-form'));
-  /** @type {HTMLInputElement} */
-  const input_title = /** @type {any} */ (dialog.querySelector('#new-title'));
-  /** @type {HTMLSelectElement} */
-  const sel_type = /** @type {any} */ (dialog.querySelector('#new-type'));
-  /** @type {HTMLSelectElement} */
-  const sel_priority = /** @type {any} */ (
+  const form = /** @type {HTMLFormElement} */ (
+    dialog.querySelector('#new-issue-form')
+  );
+  const input_title = /** @type {HTMLInputElement} */ (
+    dialog.querySelector('#new-title')
+  );
+  const sel_type = /** @type {HTMLSelectElement} */ (
+    dialog.querySelector('#new-type')
+  );
+  const sel_priority = /** @type {HTMLSelectElement} */ (
     dialog.querySelector('#new-priority')
   );
-  /** @type {HTMLInputElement} */
-  const input_labels = /** @type {any} */ (dialog.querySelector('#new-labels'));
-  /** @type {HTMLTextAreaElement} */
-  const input_description = /** @type {any} */ (
+  const input_labels = /** @type {HTMLInputElement} */ (
+    dialog.querySelector('#new-labels')
+  );
+  const input_description = /** @type {HTMLTextAreaElement} */ (
     dialog.querySelector('#new-description')
   );
-  /** @type {HTMLDivElement} */
-  const error_box = /** @type {any} */ (
+  const error_box = /** @type {HTMLDivElement} */ (
     dialog.querySelector('#new-issue-error')
   );
-  /** @type {HTMLButtonElement} */
-  const btn_cancel = /** @type {any} */ (dialog.querySelector('#btn-cancel'));
-  /** @type {HTMLButtonElement} */
-  const btn_create = /** @type {any} */ (dialog.querySelector('#btn-create'));
-  /** @type {HTMLButtonElement} */
-  const btn_close = /** @type {any} */ (
+  const btn_cancel = /** @type {HTMLButtonElement} */ (
+    dialog.querySelector('#btn-cancel')
+  );
+  const btn_create = /** @type {HTMLButtonElement} */ (
+    dialog.querySelector('#btn-create')
+  );
+  const btn_close = /** @type {HTMLButtonElement} */ (
     dialog.querySelector('.new-issue__close')
   );
 
@@ -181,6 +185,7 @@ export function createNewIssueDialog(mount_element, sendFn, router, store) {
 
   /**
    * Extract numeric suffix from an id like "UI-123"; return -1 when absent.
+   *
    * @param {string} id
    */
   function idNumeric(id) {
@@ -190,29 +195,25 @@ export function createNewIssueDialog(mount_element, sendFn, router, store) {
 
   /**
    * Submit handler: validate, create, then open the created issue details.
+   *
    * @returns {Promise<void>}
    */
   async function createNow() {
     clearError();
-    /** @type {string} */
     const title = String(input_title.value || '').trim();
     if (title.length === 0) {
       setError('Title is required');
       input_title.focus();
       return;
     }
-    /** @type {number} */
     const prio = Number(sel_priority.value || '2');
     if (!(prio >= 0 && prio <= 4)) {
       setError('Priority must be 0..4');
       sel_priority.focus();
       return;
     }
-    /** @type {string} */
     const type = String(sel_type.value || '');
-    /** @type {string} */
     const desc = String(input_description.value || '');
-    /** @type {string[]} */
     const labels = String(input_labels.value || '')
       .split(',')
       .map((s) => s.trim())
@@ -251,10 +252,8 @@ export function createNewIssueDialog(mount_element, sendFn, router, store) {
     } catch {
       list = null;
     }
-    /** @type {string} */
     let created_id = '';
     if (Array.isArray(list)) {
-      /** @type {any[]} */
       const matches = list.filter((it) => String(it.title || '') === title);
       if (matches.length > 0) {
         /** @type {any} */
@@ -326,11 +325,8 @@ export function createNewIssueDialog(mount_element, sendFn, router, store) {
       clearError();
       loadDefaults();
       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/ws.js

@@ -1,4 +1,3 @@
-/* global Console */
 /**
  * @import { MessageType } from './protocol.js'
  */
@@ -9,7 +8,7 @@
  * Usage:
  *   const ws = createWsClient();
  *   const data = await ws.send('list-issues', { filters: {} });
- *   const off = ws.on('issues-changed', (payload) => { ... });
+ *   const off = ws.on('snapshot', (payload) => { <push event> });
  */
 import { MESSAGE_TYPES, makeRequest, nextId } from './protocol.js';
 
@@ -27,6 +26,7 @@ import { MESSAGE_TYPES, makeRequest, nextId } from './protocol.js';
 
 /**
  * Create a WebSocket client with auto-reconnect and message correlation.
+ *
  * @param {ClientOptions} [options]
  */
 export function createWsClient(options = {}) {
@@ -123,8 +123,6 @@ export function createWsClient(options = {}) {
     state = 'open';
     notifyConnection(state);
     attempts = 0;
-    // subscribe first
-    sendRaw(makeRequest('subscribe-updates', {}));
     // flush queue
     while (queue.length) {
       const req = queue.shift();
@@ -193,16 +191,15 @@ export function createWsClient(options = {}) {
     }
     const url = resolveUrl();
     try {
-      ws = /** @type {any} */ (new WebSocket(url));
+      ws = new WebSocket(url);
       state = 'connecting';
       notifyConnection(state);
-      const s = /** @type {any} */ (ws);
-      s.addEventListener('open', onOpen);
-      s.addEventListener('message', onMessage);
-      s.addEventListener('error', () => {
+      ws.addEventListener('open', onOpen);
+      ws.addEventListener('message', onMessage);
+      ws.addEventListener('error', () => {
         // let close handler handle reconnect
       });
-      s.addEventListener('close', onClose);
+      ws.addEventListener('close', onClose);
     } catch (err) {
       logger.error('ws connect failed', err);
       scheduleReconnect();
@@ -214,6 +211,7 @@ export function createWsClient(options = {}) {
   return {
     /**
      * Send a request and await its correlated reply payload.
+     *
      * @param {MessageType} type
      * @param {unknown} [payload]
      * @returns {Promise<any>}
@@ -236,6 +234,7 @@ export function createWsClient(options = {}) {
     /**
      * Register a handler for a server-initiated event type.
      * Returns an unsubscribe function.
+     *
      * @param {MessageType} type
      * @param {(payload: any) => void} handler
      * @returns {() => void}
@@ -252,6 +251,7 @@ export function createWsClient(options = {}) {
     },
     /**
      * Subscribe to connection state changes.
+     *
      * @param {(state: ConnectionState) => void} handler
      * @returns {() => void}
      */

package/bin/bdui.js

@@ -10,7 +10,7 @@ const argv = process.argv.slice(2);
 try {
   const code = await main(argv);
   if (Number.isFinite(code)) {
-    process.exitCode = /** @type {number} */ (code);
+    process.exitCode = code;
   }
 } catch (err) {
   console.error(String(/** @type {any} */ (err)?.message || err));