beads-ui 0.1.2 → 0.3.0

package/app/views/detail.js

@@ -1,10 +1,13 @@
 // Issue Detail view implementation (lit-html based)
 import { html, render } from 'lit-html';
+import { parseView } from '../router.js';
 import { issueDisplayId } from '../utils/issue-id.js';
+import { issueHashFor } from '../utils/issue-url.js';
 import { renderMarkdown } from '../utils/markdown.js';
 import { emojiForPriority } from '../utils/priority-badge.js';
 import { priority_levels } from '../utils/priority.js';
 import { statusLabel } from '../utils/status.js';
+import { showToast } from '../utils/toast.js';
 import { createTypeBadge } from '../utils/type-badge.js';
 
 /**
@@ -21,9 +24,11 @@ import { createTypeBadge } from '../utils/type-badge.js';
  * @property {string} id
  * @property {string} [title]
  * @property {string} [description]
+ * @property {string} [design]
  * @property {string} [acceptance]
  * @property {string} [notes]
  * @property {string} [status]
+ * @property {string} [assignee]
  * @property {number} [priority]
  * @property {string[]} [labels]
  * @property {Dependency[]} [dependencies]
@@ -42,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} */
@@ -58,42 +67,25 @@ export function createDetailView(
   /** @type {boolean} */
   let edit_desc = false;
   /** @type {boolean} */
+  let edit_design = false;
+  /** @type {boolean} */
+  let edit_notes = false;
+  /** @type {boolean} */
   let edit_accept = false;
   /** @type {boolean} */
   let edit_assignee = false;
   /** @type {string} */
   let new_label_text = '';
 
-  /**
-   * Show a transient toast message.
-   * @param {string} text
-   */
-  function showToast(text) {
-    /** @type {HTMLDivElement} */
-    const toast = document.createElement('div');
-    toast.className = 'toast';
-    toast.textContent = text;
-    toast.style.position = 'absolute';
-    toast.style.right = '12px';
-    toast.style.bottom = '12px';
-    toast.style.background = 'rgba(0,0,0,0.8)';
-    toast.style.color = '#fff';
-    toast.style.padding = '8px 10px';
-    toast.style.borderRadius = '4px';
-    toast.style.fontSize = '12px';
-    mount_element.appendChild(toast);
-    setTimeout(() => {
-      try {
-        toast.remove();
-      } catch {
-        /* ignore */
-      }
-    }, 2800);
-  }
-
   /** @param {string} id */
   function issueHref(id) {
-    return `#/issue/${id}`;
+    try {
+      /** @type {'issues'|'epics'|'board'} */
+      const view = parseView(window.location.hash || '');
+      return issueHashFor(view, id);
+    } catch {
+      return issueHashFor('issues', id);
+    }
   }
 
   /**
@@ -110,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;
@@ -131,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) {
@@ -159,7 +192,7 @@ export function createDetailView(
       current.title = prev;
       edit_title = false;
       doRender();
-      showToast('Failed to save title');
+      showToast('Failed to save title', 'error');
     } finally {
       pending = false;
     }
@@ -191,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();
@@ -220,10 +250,10 @@ export function createDetailView(
       }
     } catch {
       // revert visually
-      /** @type {any} */ (current).assignee = prev;
+      current.assignee = prev;
       edit_assignee = false;
       doRender();
-      showToast('Failed to update assignee');
+      showToast('Failed to update assignee', 'error');
     } finally {
       pending = false;
     }
@@ -238,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 || '';
   };
   /**
@@ -271,7 +300,7 @@ export function createDetailView(
         doRender();
       }
     } catch {
-      showToast('Failed to add label');
+      showToast('Failed to add label', 'error');
     } finally {
       pending = false;
     }
@@ -294,7 +323,7 @@ export function createDetailView(
         doRender();
       }
     } catch {
-      showToast('Failed to remove label');
+      showToast('Failed to remove label', 'error');
     } finally {
       pending = false;
     }
@@ -307,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,7 +357,7 @@ export function createDetailView(
     } catch {
       current.status = prev;
       doRender();
-      showToast('Failed to update status');
+      showToast('Failed to update status', 'error');
     } finally {
       pending = false;
     }
@@ -342,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) {
@@ -364,7 +391,7 @@ export function createDetailView(
     } catch {
       current.priority = prev;
       doRender();
-      showToast('Failed to update priority');
+      showToast('Failed to update priority', 'error');
     } finally {
       pending = false;
     }
@@ -381,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')
       );
@@ -397,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 || '';
@@ -427,7 +450,7 @@ export function createDetailView(
       current.description = prev;
       edit_desc = false;
       doRender();
-      showToast('Failed to save description');
+      showToast('Failed to save description', 'error');
     } finally {
       pending = false;
     }
@@ -437,6 +460,148 @@ export function createDetailView(
     doRender();
   };
 
+  // Design inline edit handlers (same UX as Description)
+  const onDesignEdit = () => {
+    edit_design = true;
+    doRender();
+    try {
+      const ta = /** @type {HTMLTextAreaElement|null} */ (
+        mount_element.querySelector('#detail-root .design textarea')
+      );
+      if (ta) {
+        ta.focus();
+      }
+    } catch {
+      // ignore focus errors
+    }
+  };
+  /**
+   * @param {KeyboardEvent} ev
+   */
+  const onDesignKeydown = (ev) => {
+    if (ev.key === 'Escape') {
+      edit_design = false;
+      doRender();
+    } else if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey)) {
+      const btn = /** @type {HTMLButtonElement|null} */ (
+        mount_element.querySelector(
+          '#detail-root .design .editable-actions button'
+        )
+      );
+      if (btn) {
+        btn.click();
+      }
+    }
+  };
+  const onDesignSave = async () => {
+    if (!current || pending) {
+      return;
+    }
+    const ta = /** @type {HTMLTextAreaElement|null} */ (
+      mount_element.querySelector('#detail-root .design textarea')
+    );
+    const prev = current.design || '';
+    const next = ta ? ta.value : '';
+    if (next === prev) {
+      edit_design = false;
+      doRender();
+      return;
+    }
+    pending = true;
+    if (ta) {
+      ta.disabled = true;
+    }
+    try {
+      const updated = await sendFn('edit-text', {
+        id: current.id,
+        field: 'design',
+        value: next
+      });
+      if (updated && typeof updated === 'object') {
+        current = /** @type {IssueDetail} */ (updated);
+        edit_design = false;
+        doRender();
+      }
+    } catch {
+      current.design = prev;
+      edit_design = false;
+      doRender();
+      showToast('Failed to save design', 'error');
+    } finally {
+      pending = false;
+    }
+  };
+  const onDesignCancel = () => {
+    edit_design = false;
+    doRender();
+  };
+
+  // Notes inline edit handlers
+  const onNotesEdit = () => {
+    edit_notes = true;
+    doRender();
+  };
+  /**
+   * @param {KeyboardEvent} ev
+   */
+  const onNotesKeydown = (ev) => {
+    if (ev.key === 'Escape') {
+      edit_notes = false;
+      doRender();
+    } else if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey)) {
+      const btn = /** @type {HTMLButtonElement|null} */ (
+        mount_element.querySelector(
+          '#detail-root .notes .editable-actions button'
+        )
+      );
+      if (btn) {
+        btn.click();
+      }
+    }
+  };
+  const onNotesSave = async () => {
+    if (!current || pending) {
+      return;
+    }
+    const ta = /** @type {HTMLTextAreaElement|null} */ (
+      mount_element.querySelector('#detail-root .notes textarea')
+    );
+    const prev = current.notes || '';
+    const next = ta ? ta.value : '';
+    if (next === prev) {
+      edit_notes = false;
+      doRender();
+      return;
+    }
+    pending = true;
+    if (ta) {
+      ta.disabled = true;
+    }
+    try {
+      const updated = await sendFn('edit-text', {
+        id: current.id,
+        field: 'notes',
+        value: next
+      });
+      if (updated && typeof updated === 'object') {
+        current = /** @type {IssueDetail} */ (updated);
+        edit_notes = false;
+        doRender();
+      }
+    } catch {
+      current.notes = prev;
+      edit_notes = false;
+      doRender();
+      showToast('Failed to save notes', 'error');
+    } finally {
+      pending = false;
+    }
+  };
+  const onNotesCancel = () => {
+    edit_notes = false;
+    doRender();
+  };
+
   const onAcceptEdit = () => {
     edit_accept = true;
     doRender();
@@ -448,10 +613,7 @@ export function createDetailView(
     if (ev.key === 'Escape') {
       edit_accept = false;
       doRender();
-    } else if (
-      ev.key === 'Enter' &&
-      /** @type {KeyboardEvent} */ (ev).ctrlKey
-    ) {
+    } else if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey)) {
       const btn = /** @type {HTMLButtonElement|null} */ (
         mount_element.querySelector(
           '#detail-root .acceptance .editable-actions button'
@@ -466,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 || '';
@@ -496,7 +657,7 @@ export function createDetailView(
       current.acceptance = prev;
       edit_accept = false;
       doRender();
-      showToast('Failed to save acceptance');
+      showToast('Failed to save acceptance', 'error');
     } finally {
       pending = false;
     }
@@ -524,13 +685,10 @@ export function createDetailView(
             : items.map((dep) => {
                 const did = dep.id;
                 const href = issueHref(did);
-                return html` <li
-                  style="display:grid;grid-template-columns:auto auto 1fr auto;gap:6px;align-items:center;padding:2px 0;cursor:pointer;"
+                return html`<li
+                  data-href=${href}
                   @click=${() => navigateFn(href)}
                 >
-                  <a href=${href} @click=${makeDepLinkClick(href)}
-                    >${issueDisplayId(did)}</a
-                  >
                   ${createTypeBadge(dep.issue_type || '')}
                   <span class="text-truncate">${dep.title || ''}</span>
                   <button
@@ -562,14 +720,10 @@ export function createDetailView(
               aria-label="Edit title"
               .value=${issue.title || ''}
               @keydown=${onTitleInputKeydown}
-              style="width:100%;font-size:inherit;line-height:inherit;"
             />
-            <button style="margin-left:6px" @click=${onTitleSave}>Save</button>
-            <button style="margin-left:6px" @click=${onTitleCancel}>
-              Cancel
-            </button>
+            <button @click=${onTitleSave}>Save</button>
+            <button @click=${onTitleCancel}>Cancel</button>
           </h2>
-          <span class="mono detail-id">${issueDisplayId(issue.id)}</span>
         </div>`
       : html`<div class="detail-title">
           <h2>
@@ -583,7 +737,6 @@ export function createDetailView(
               >${issue.title || ''}</span
             >
           </h2>
-          <span class="mono detail-id">${issueDisplayId(issue.id)}</span>
         </div>`;
 
     const status_select = html`<select
@@ -667,7 +820,7 @@ export function createDetailView(
     const accept_block = edit_accept
       ? html`<div class="acceptance">
           ${acceptance_text.trim().length > 0
-            ? html`<div class="props-card__title">Acceptance</div>`
+            ? html`<div class="props-card__title">Acceptance Criteria</div>`
             : ''}
           <textarea
             @keydown=${onAcceptKeydown}
@@ -681,29 +834,66 @@ export function createDetailView(
           </div>
         </div>`
       : html`<div class="acceptance">
-          ${acceptance_text.trim().length > 0
-            ? html`<div class="props-card__title">Acceptance</div>
-                <div
-                  class="md editable"
-                  tabindex="0"
-                  role="button"
-                  aria-label="Edit acceptance"
-                  @click=${onAcceptEdit}
-                  @keydown=${onAcceptEditableKeydown}
-                >
-                  ${renderMarkdown(acceptance_text)}
-                </div>`
-            : ''}
+          ${(() => {
+            const text = acceptance_text;
+            const has = text.trim().length > 0;
+            return html`${has
+                ? html`<div class="props-card__title">Acceptance Criteria</div>`
+                : ''}
+              <div
+                class="md editable"
+                tabindex="0"
+                role="button"
+                aria-label="Edit acceptance criteria"
+                @click=${onAcceptEdit}
+                @keydown=${onAcceptEditableKeydown}
+              >
+                ${has
+                  ? renderMarkdown(text)
+                  : html`<div class="muted">Add acceptance criteria…</div>`}
+              </div>`;
+          })()}
         </div>`;
 
-    // Notes (read-only): show heading only if there is content
+    // Notes: editable in-place similar to Description
     const notes_text = String(issue.notes || '');
-    const notes_block = html`<div class="notes">
-      ${notes_text.trim().length > 0
-        ? html`<div class="props-card__title">Notes</div>
-            <div class="md">${renderMarkdown(notes_text)}</div>`
-        : ''}
-    </div>`;
+    const notes_block = edit_notes
+      ? html`<div class="notes">
+          ${notes_text.trim().length > 0
+            ? html`<div class="props-card__title">Notes</div>`
+            : ''}
+          <textarea
+            @keydown=${onNotesKeydown}
+            .value=${notes_text}
+            rows="6"
+            style="width:100%"
+          ></textarea>
+          <div class="editable-actions">
+            <button @click=${onNotesSave}>Save</button>
+            <button @click=${onNotesCancel}>Cancel</button>
+          </div>
+        </div>`
+      : html`<div class="notes">
+          ${(() => {
+            const text = notes_text;
+            const has = text.trim().length > 0;
+            return html`${has
+                ? html`<div class="props-card__title">Notes</div>`
+                : ''}
+              <div
+                class="md editable"
+                tabindex="0"
+                role="button"
+                aria-label="Edit notes"
+                @click=${onNotesEdit}
+                @keydown=${onNotesEditableKeydown}
+              >
+                ${has
+                  ? renderMarkdown(text)
+                  : html`<div class="muted">Add notes…</div>`}
+              </div>`;
+          })()}
+        </div>`;
 
     // Labels section
     const labels = Array.isArray(issue.labels) ? issue.labels : [];
@@ -729,7 +919,7 @@ export function createDetailView(
           <input
             type="text"
             aria-label="Add label"
-            placeholder="Add label…"
+            placeholder="Add label"
             .value=${new_label_text}
             @input=${onLabelInput}
             @keydown=${onLabelKeydown}
@@ -739,12 +929,53 @@ export function createDetailView(
       </div>
     </div>`;
 
+    // Design section block
+    const design_text = String(issue.design || '');
+    const design_block = edit_design
+      ? html`<div class="design">
+          ${design_text.trim().length > 0
+            ? html`<div class="props-card__title">Design</div>`
+            : ''}
+          <textarea
+            @keydown=${onDesignKeydown}
+            .value=${design_text}
+            rows="6"
+            style="width:100%"
+          ></textarea>
+          <div class="editable-actions">
+            <button @click=${onDesignSave}>Save</button>
+            <button @click=${onDesignCancel}>Cancel</button>
+          </div>
+        </div>`
+      : html`<div class="design">
+          ${(() => {
+            const text = design_text;
+            const has = text.trim().length > 0;
+            return html`${has
+                ? html`<div class="props-card__title">Design</div>`
+                : ''}
+              <div
+                class="md editable"
+                tabindex="0"
+                role="button"
+                aria-label="Edit design"
+                @click=${onDesignEdit}
+                @keydown=${onDesignEditableKeydown}
+              >
+                ${has
+                  ? renderMarkdown(text)
+                  : html`<div class="muted">Add design…</div>`}
+              </div>`;
+          })()}
+        </div>`;
+
     return html`
       <div class="panel__body" id="detail-root">
         <div style="position:relative">
           <div class="detail-layout">
             <div class="detail-main">
-              ${title_zone} ${desc_block} ${notes_block} ${accept_block}
+              ${title_zone} ${desc_block} ${design_block} ${notes_block}
+              ${accept_block}
             </div>
             <div class="detail-side">
               <div class="props-card">
@@ -773,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) => {
@@ -807,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';
@@ -838,29 +1062,13 @@ export function createDetailView(
 
   function doRender() {
     if (!current) {
-      renderPlaceholder('No issue selected');
+      renderPlaceholder(current_id ? 'Loading…' : 'No issue selected');
       return;
     }
     render(detailTemplate(current), mount_element);
     // panel header removed for detail view; ID is shown inline with title
   }
 
-  /**
-   * Create an anchor click handler for dependency links.
-   * @param {string} href
-   * @returns {(ev: Event) => void}
-   */
-  function makeDepLinkClick(href) {
-    return (ev) => {
-      ev.preventDefault();
-      /** @type {Event} */
-      const e = ev;
-      // stop bubbling to the li row click
-      e.stopPropagation();
-      navigateFn(href);
-    };
-  }
-
   /**
    * Create a click handler for the remove button of a dependency row.
    * @param {string} did
@@ -869,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;
       }
@@ -917,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');
@@ -961,7 +1167,7 @@ export function createDetailView(
           }
         }
       } catch {
-        showToast('Failed to add dependency');
+        showToast('Failed to add dependency', 'error');
       } finally {
         pending = false;
       }
@@ -998,34 +1204,38 @@ export function createDetailView(
     }
   }
 
+  /**
+   * @param {KeyboardEvent} ev
+   */
+  function onNotesEditableKeydown(ev) {
+    if (ev.key === 'Enter') {
+      onNotesEdit();
+    }
+  }
+
+  /**
+   * @param {KeyboardEvent} ev
+   */
+  function onDesignEditableKeydown(ev) {
+    if (ev.key === 'Enter') {
+      onDesignEdit();
+    }
+  }
+
   return {
     async load(id) {
       if (!id) {
         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();
     },