beads-ui 0.1.0

package/app/views/detail.js

@@ -0,0 +1,1039 @@
+// Issue Detail view implementation (lit-html based)
+import { html, render } from 'lit-html';
+import { issueDisplayId } from '../utils/issue-id.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 { createTypeBadge } from '../utils/type-badge.js';
+
+/**
+ * @typedef {Object} Dependency
+ * @property {string} id
+ * @property {string} [title]
+ * @property {string} [status]
+ * @property {number} [priority]
+ * @property {string} [issue_type]
+ */
+
+/**
+ * @typedef {Object} IssueDetail
+ * @property {string} id
+ * @property {string} [title]
+ * @property {string} [description]
+ * @property {string} [acceptance]
+ * @property {string} [notes]
+ * @property {string} [status]
+ * @property {number} [priority]
+ * @property {string[]} [labels]
+ * @property {Dependency[]} [dependencies]
+ * @property {Dependency[]} [dependents]
+ */
+
+/**
+ * @param {string} hash
+ */
+function defaultNavigateFn(hash) {
+  window.location.hash = hash;
+}
+
+/**
+ * Create the Issue Detail view.
+ * @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.
+ * @returns {{ load: (id: string) => Promise<void>, clear: () => void, destroy: () => void }} View API.
+ */
+export function createDetailView(
+  mount_element,
+  sendFn,
+  navigateFn = defaultNavigateFn
+) {
+  /** @type {IssueDetail | null} */
+  let current = null;
+  /** @type {boolean} */
+  let pending = false;
+  /** @type {boolean} */
+  let edit_title = false;
+  /** @type {boolean} */
+  let edit_desc = 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}`;
+  }
+
+  /**
+   * @param {string} message
+   */
+  function renderPlaceholder(message) {
+    render(
+      html`
+        <div class="panel__body" id="detail-root">
+          <p class="muted">${message}</p>
+        </div>
+      `,
+      mount_element
+    );
+  }
+
+  // Handlers
+  const onTitleSpanClick = () => {
+    edit_title = true;
+    doRender();
+  };
+  /**
+   * @param {KeyboardEvent} ev
+   */
+  const onTitleKeydown = (ev) => {
+    if (ev.key === 'Enter') {
+      edit_title = true;
+      doRender();
+    } else if (ev.key === 'Escape') {
+      edit_title = false;
+      doRender();
+    }
+  };
+  const onTitleSave = async () => {
+    if (!current || pending) {
+      return;
+    }
+    /** @type {HTMLInputElement|null} */
+    const input = /** @type {any} */ (mount_element.querySelector('h2 input'));
+    const prev = current.title || '';
+    const next = input ? input.value : '';
+    if (next === prev) {
+      edit_title = false;
+      doRender();
+      return;
+    }
+    pending = true;
+    if (input) {
+      input.disabled = true;
+    }
+    try {
+      const updated = await sendFn('edit-text', {
+        id: current.id,
+        field: 'title',
+        value: next
+      });
+      if (updated && typeof updated === 'object') {
+        current = /** @type {IssueDetail} */ (updated);
+        edit_title = false;
+        doRender();
+      }
+    } catch {
+      current.title = prev;
+      edit_title = false;
+      doRender();
+      showToast('Failed to save title');
+    } finally {
+      pending = false;
+    }
+  };
+  const onTitleCancel = () => {
+    edit_title = false;
+    doRender();
+  };
+  // Assignee inline edit handlers
+  const onAssigneeSpanClick = () => {
+    edit_assignee = true;
+    doRender();
+  };
+  /**
+   * @param {KeyboardEvent} ev
+   */
+  const onAssigneeKeydown = (ev) => {
+    if (ev.key === 'Enter') {
+      ev.preventDefault();
+      edit_assignee = true;
+      doRender();
+    } else if (ev.key === 'Escape') {
+      ev.preventDefault();
+      edit_assignee = false;
+      doRender();
+    }
+  };
+  const onAssigneeSave = async () => {
+    if (!current || pending) {
+      return;
+    }
+    /** @type {HTMLInputElement|null} */
+    const input = /** @type {any} */ (
+      mount_element.querySelector('#detail-root .prop.assignee input')
+    );
+    const prev = String(
+      (current && /** @type {any} */ (current).assignee) || ''
+    );
+    const next = input ? String(input.value || '') : '';
+    if (next === prev) {
+      edit_assignee = false;
+      doRender();
+      return;
+    }
+    pending = true;
+    if (input) {
+      input.disabled = true;
+    }
+    try {
+      const updated = await sendFn('update-assignee', {
+        id: current.id,
+        assignee: next
+      });
+      if (updated && typeof updated === 'object') {
+        current = /** @type {IssueDetail} */ (updated);
+        edit_assignee = false;
+        doRender();
+      }
+    } catch {
+      // revert visually
+      /** @type {any} */ (current).assignee = prev;
+      edit_assignee = false;
+      doRender();
+      showToast('Failed to update assignee');
+    } finally {
+      pending = false;
+    }
+  };
+  const onAssigneeCancel = () => {
+    edit_assignee = false;
+    doRender();
+  };
+
+  // Labels handlers
+  /**
+   * @param {Event} ev
+   */
+  const onLabelInput = (ev) => {
+    /** @type {HTMLInputElement} */
+    const el = /** @type {any} */ (ev.currentTarget);
+    new_label_text = el.value || '';
+  };
+  /**
+   * @param {KeyboardEvent} e
+   */
+  function onLabelKeydown(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      void onAddLabel();
+    }
+  }
+  async function onAddLabel() {
+    if (!current || pending) {
+      return;
+    }
+    const text = new_label_text.trim();
+    if (!text) {
+      return;
+    }
+    pending = true;
+    try {
+      const updated = await sendFn('label-add', {
+        id: current.id,
+        label: text
+      });
+      if (updated && typeof updated === 'object') {
+        current = /** @type {IssueDetail} */ (updated);
+        new_label_text = '';
+        doRender();
+      }
+    } catch {
+      showToast('Failed to add label');
+    } finally {
+      pending = false;
+    }
+  }
+  /**
+   * @param {string} label
+   */
+  async function onRemoveLabel(label) {
+    if (!current || pending) {
+      return;
+    }
+    pending = true;
+    try {
+      const updated = await sendFn('label-remove', {
+        id: current.id,
+        label
+      });
+      if (updated && typeof updated === 'object') {
+        current = /** @type {IssueDetail} */ (updated);
+        doRender();
+      }
+    } catch {
+      showToast('Failed to remove label');
+    } finally {
+      pending = false;
+    }
+  }
+  /**
+   * @param {Event} ev
+   */
+  const onStatusChange = async (ev) => {
+    if (!current || pending) {
+      doRender();
+      return;
+    }
+    /** @type {HTMLSelectElement} */
+    const sel = /** @type {any} */ (ev.currentTarget);
+    const prev = current.status || 'open';
+    const next = sel.value;
+    if (next === prev) {
+      return;
+    }
+    pending = true;
+    current.status = next;
+    doRender();
+    try {
+      const updated = await sendFn('update-status', {
+        id: current.id,
+        status: next
+      });
+      if (updated && typeof updated === 'object') {
+        current = /** @type {IssueDetail} */ (updated);
+        doRender();
+      }
+    } catch {
+      current.status = prev;
+      doRender();
+      showToast('Failed to update status');
+    } finally {
+      pending = false;
+    }
+  };
+  /**
+   * @param {Event} ev
+   */
+  const onPriorityChange = async (ev) => {
+    if (!current || pending) {
+      doRender();
+      return;
+    }
+    /** @type {HTMLSelectElement} */
+    const sel = /** @type {any} */ (ev.currentTarget);
+    const prev = typeof current.priority === 'number' ? current.priority : 2;
+    const next = Number(sel.value);
+    if (next === prev) {
+      return;
+    }
+    pending = true;
+    current.priority = next;
+    doRender();
+    try {
+      const updated = await sendFn('update-priority', {
+        id: current.id,
+        priority: next
+      });
+      if (updated && typeof updated === 'object') {
+        current = /** @type {IssueDetail} */ (updated);
+        doRender();
+      }
+    } catch {
+      current.priority = prev;
+      doRender();
+      showToast('Failed to update priority');
+    } finally {
+      pending = false;
+    }
+  };
+
+  const onDescEdit = () => {
+    edit_desc = true;
+    doRender();
+  };
+  /**
+   * @param {KeyboardEvent} ev
+   */
+  const onDescKeydown = (ev) => {
+    if (ev.key === 'Escape') {
+      edit_desc = false;
+      doRender();
+    } else if (
+      ev.key === 'Enter' &&
+      /** @type {KeyboardEvent} */ (ev).ctrlKey
+    ) {
+      const btn = /** @type {HTMLButtonElement|null} */ (
+        mount_element.querySelector('#detail-root .editable-actions button')
+      );
+      if (btn) {
+        btn.click();
+      }
+    }
+  };
+  const onDescSave = async () => {
+    if (!current || pending) {
+      return;
+    }
+    /** @type {HTMLTextAreaElement|null} */
+    const ta = /** @type {any} */ (
+      mount_element.querySelector('#detail-root textarea')
+    );
+    const prev = current.description || '';
+    const next = ta ? ta.value : '';
+    if (next === prev) {
+      edit_desc = false;
+      doRender();
+      return;
+    }
+    pending = true;
+    if (ta) {
+      ta.disabled = true;
+    }
+    try {
+      const updated = await sendFn('edit-text', {
+        id: current.id,
+        field: 'description',
+        value: next
+      });
+      if (updated && typeof updated === 'object') {
+        current = /** @type {IssueDetail} */ (updated);
+        edit_desc = false;
+        doRender();
+      }
+    } catch {
+      current.description = prev;
+      edit_desc = false;
+      doRender();
+      showToast('Failed to save description');
+    } finally {
+      pending = false;
+    }
+  };
+  const onDescCancel = () => {
+    edit_desc = false;
+    doRender();
+  };
+
+  const onAcceptEdit = () => {
+    edit_accept = true;
+    doRender();
+  };
+  /**
+   * @param {KeyboardEvent} ev
+   */
+  const onAcceptKeydown = (ev) => {
+    if (ev.key === 'Escape') {
+      edit_accept = false;
+      doRender();
+    } else if (
+      ev.key === 'Enter' &&
+      /** @type {KeyboardEvent} */ (ev).ctrlKey
+    ) {
+      const btn = /** @type {HTMLButtonElement|null} */ (
+        mount_element.querySelector(
+          '#detail-root .acceptance .editable-actions button'
+        )
+      );
+      if (btn) {
+        btn.click();
+      }
+    }
+  };
+  const onAcceptSave = async () => {
+    if (!current || pending) {
+      return;
+    }
+    /** @type {HTMLTextAreaElement|null} */
+    const ta = /** @type {any} */ (
+      mount_element.querySelector('#detail-root .acceptance textarea')
+    );
+    const prev = current.acceptance || '';
+    const next = ta ? ta.value : '';
+    if (next === prev) {
+      edit_accept = false;
+      doRender();
+      return;
+    }
+    pending = true;
+    if (ta) {
+      ta.disabled = true;
+    }
+    try {
+      const updated = await sendFn('edit-text', {
+        id: current.id,
+        field: 'acceptance',
+        value: next
+      });
+      if (updated && typeof updated === 'object') {
+        current = /** @type {IssueDetail} */ (updated);
+        edit_accept = false;
+        doRender();
+      }
+    } catch {
+      current.acceptance = prev;
+      edit_accept = false;
+      doRender();
+      showToast('Failed to save acceptance');
+    } finally {
+      pending = false;
+    }
+  };
+  const onAcceptCancel = () => {
+    edit_accept = false;
+    doRender();
+  };
+
+  /**
+   * @param {'Dependencies'|'Dependents'} title
+   * @param {Dependency[]} items
+   */
+  function depsSection(title, items) {
+    const test_id =
+      title === 'Dependencies' ? 'add-dependency' : 'add-dependent';
+    return html`
+      <div class="props-card">
+        <div>
+          <div class="props-card__title">${title}</div>
+        </div>
+        <ul>
+          ${!items || items.length === 0
+            ? null
+            : 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;"
+                  @click=${() => navigateFn(href)}
+                >
+                  <a href=${href} @click=${makeDepLinkClick(href)}
+                    >${issueDisplayId(did)}</a
+                  >
+                  ${createTypeBadge(dep.issue_type || '')}
+                  <span class="text-truncate">${dep.title || ''}</span>
+                  <button
+                    aria-label=${`Remove dependency ${issueDisplayId(did)}`}
+                    @click=${makeDepRemoveClick(did, title)}
+                  >
+                    ×
+                  </button>
+                </li>`;
+              })}
+        </ul>
+        <div class="props-card__footer">
+          <input type="text" placeholder="Issue ID" data-testid=${test_id} />
+          <button @click=${makeDepAddClick(items, title)}>Add</button>
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * @param {IssueDetail} issue
+   */
+  function detailTemplate(issue) {
+    const title_zone = edit_title
+      ? html`<div class="detail-title">
+          <h2>
+            <input
+              type="text"
+              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>
+          </h2>
+          <span class="mono detail-id">${issueDisplayId(issue.id)}</span>
+        </div>`
+      : html`<div class="detail-title">
+          <h2>
+            <span
+              class="editable"
+              tabindex="0"
+              role="button"
+              aria-label="Edit title"
+              @click=${onTitleSpanClick}
+              @keydown=${onTitleKeydown}
+              >${issue.title || ''}</span
+            >
+          </h2>
+          <span class="mono detail-id">${issueDisplayId(issue.id)}</span>
+        </div>`;
+
+    const status_select = html`<select
+      class=${`badge-select badge--status is-${issue.status || 'open'}`}
+      @change=${onStatusChange}
+      .value=${issue.status || 'open'}
+      ?disabled=${pending}
+    >
+      ${(() => {
+        const cur = String(issue.status || 'open');
+        return ['open', 'in_progress', 'closed'].map(
+          (s) =>
+            html`<option value=${s} ?selected=${cur === s}>
+              ${statusLabel(s)}
+            </option>`
+        );
+      })()}
+    </select>`;
+
+    const priority_select = html`<select
+      class=${`badge-select badge--priority is-p${String(
+        typeof issue.priority === 'number' ? issue.priority : 2
+      )}`}
+      @change=${onPriorityChange}
+      .value=${String(typeof issue.priority === 'number' ? issue.priority : 2)}
+      ?disabled=${pending}
+    >
+      ${(() => {
+        const cur = String(
+          typeof issue.priority === 'number' ? issue.priority : 2
+        );
+        return priority_levels.map(
+          (p, i) =>
+            html`<option value=${String(i)} ?selected=${cur === String(i)}>
+              ${emojiForPriority(i)} ${p}
+            </option>`
+        );
+      })()}
+    </select>`;
+
+    const desc_block = edit_desc
+      ? html`<div class="description">
+          <textarea
+            @keydown=${onDescKeydown}
+            .value=${issue.description || ''}
+            rows="8"
+            style="width:100%"
+          ></textarea>
+          <div class="editable-actions">
+            <button @click=${onDescSave}>Save</button>
+            <button @click=${onDescCancel}>Cancel</button>
+          </div>
+        </div>`
+      : html`<div
+          class="md editable"
+          tabindex="0"
+          role="button"
+          aria-label="Edit description"
+          @click=${onDescEdit}
+          @keydown=${onDescEditableKeydown}
+        >
+          ${(() => {
+            const text = issue.description || '';
+            if (text.trim() === '') {
+              return html`<div class="muted">Description</div>`;
+            }
+            return renderMarkdown(text);
+          })()}
+        </div>`;
+
+    // Normalize acceptance text: prefer issue.acceptance, fallback to acceptance_criteria from bd
+    const acceptance_text = (() => {
+      /** @type {any} */
+      const any_issue = issue;
+      const raw = String(
+        issue.acceptance || any_issue.acceptance_criteria || ''
+      );
+      return raw;
+    })();
+
+    const accept_block = edit_accept
+      ? html`<div class="acceptance">
+          ${acceptance_text.trim().length > 0
+            ? html`<div class="props-card__title">Acceptance</div>`
+            : ''}
+          <textarea
+            @keydown=${onAcceptKeydown}
+            .value=${acceptance_text}
+            rows="6"
+            style="width:100%"
+          ></textarea>
+          <div class="editable-actions">
+            <button @click=${onAcceptSave}>Save</button>
+            <button @click=${onAcceptCancel}>Cancel</button>
+          </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>`
+            : ''}
+        </div>`;
+
+    // Notes (read-only): show heading only if there is content
+    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>`;
+
+    // Labels section
+    const labels = Array.isArray(issue.labels) ? issue.labels : [];
+    const labels_block = html`<div class="prop labels">
+      <div class="label">Labels</div>
+      <div class="value">
+        <div>
+          ${labels.map(
+            (l) =>
+              html`<span class="badge" title=${l}
+                >${l}
+                <button
+                  class="icon-button"
+                  title="Remove label"
+                  aria-label=${'Remove label ' + l}
+                  @click=${() => onRemoveLabel(l)}
+                  style="margin-left:6px"
+                >
+                  ×
+                </button></span
+              >`
+          )}
+          <input
+            type="text"
+            aria-label="Add label"
+            placeholder="Add label…"
+            .value=${new_label_text}
+            @input=${onLabelInput}
+            @keydown=${onLabelKeydown}
+            size=${Math.max(12, Math.min(28, new_label_text.length + 3))}
+          />
+        </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}
+            </div>
+            <div class="detail-side">
+              <div class="props-card">
+                <div class="props-card__title">Properties</div>
+                <div class="prop">
+                  <div class="label">Type</div>
+                  <div class="value">
+                    ${createTypeBadge(/** @type {any} */ (issue).issue_type)}
+                  </div>
+                </div>
+                <div class="prop">
+                  <div class="label">Status</div>
+                  <div class="value">${status_select}</div>
+                </div>
+                <div class="prop">
+                  <div class="label">Priority</div>
+                  <div class="value">${priority_select}</div>
+                </div>
+                <div class="prop assignee">
+                  <div class="label">Assignee</div>
+                  <div class="value">
+                    ${edit_assignee
+                      ? html`<input
+                            type="text"
+                            aria-label="Edit assignee"
+                            .value=${/** @type {any} */ (issue).assignee || ''}
+                            size=${Math.min(
+                              40,
+                              Math.max(
+                                12,
+                                String(
+                                  /** @type {any} */ (issue).assignee || ''
+                                ).length + 3
+                              )
+                            )}
+                            @keydown=${
+                              /** @param {KeyboardEvent} e */ (e) => {
+                                if (e.key === 'Escape') {
+                                  e.preventDefault();
+                                  onAssigneeCancel();
+                                } else if (e.key === 'Enter') {
+                                  e.preventDefault();
+                                  onAssigneeSave();
+                                }
+                              }
+                            }
+                          />
+                          <button
+                            class="btn"
+                            style="margin-left:6px"
+                            @click=${onAssigneeSave}
+                          >
+                            Save
+                          </button>
+                          <button
+                            class="btn"
+                            style="margin-left:6px"
+                            @click=${onAssigneeCancel}
+                          >
+                            Cancel
+                          </button>`
+                      : html`${(() => {
+                          const raw = String(
+                            /** @type {any} */ (issue).assignee || ''
+                          );
+                          const has = raw.trim().length > 0;
+                          const text = has ? raw : 'Unassigned';
+                          const cls = has ? 'editable' : 'editable muted';
+                          return html`<span
+                            class=${cls}
+                            tabindex="0"
+                            role="button"
+                            aria-label="Edit assignee"
+                            @click=${onAssigneeSpanClick}
+                            @keydown=${onAssigneeKeydown}
+                            >${text}</span
+                          >`;
+                        })()}`}
+                  </div>
+                </div>
+                ${labels_block}
+              </div>
+              ${depsSection('Dependencies', issue.dependencies || [])}
+              ${depsSection('Dependents', issue.dependents || [])}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  function doRender() {
+    if (!current) {
+      renderPlaceholder('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
+   * @param {'Dependencies'|'Dependents'} title
+   * @returns {(ev: Event) => Promise<void>}
+   */
+  function makeDepRemoveClick(did, title) {
+    return async (ev) => {
+      /** @type {Event} */
+      const e = ev;
+      e.stopPropagation();
+      if (!current || pending) {
+        return;
+      }
+      pending = true;
+      try {
+        if (title === 'Dependencies') {
+          const updated = await sendFn('dep-remove', {
+            a: current.id,
+            b: did,
+            view_id: current.id
+          });
+          if (updated && typeof updated === 'object') {
+            current = /** @type {IssueDetail} */ (updated);
+            doRender();
+          }
+        } else {
+          const updated = await sendFn('dep-remove', {
+            a: did,
+            b: current.id,
+            view_id: current.id
+          });
+          if (updated && typeof updated === 'object') {
+            current = /** @type {IssueDetail} */ (updated);
+            doRender();
+          }
+        }
+      } catch {
+        // ignore
+      } finally {
+        pending = false;
+      }
+    };
+  }
+
+  /**
+   * Create a click handler for the Add button in a dependency section.
+   * @param {Dependency[]} items
+   * @param {'Dependencies'|'Dependents'} title
+   * @returns {(ev: Event) => Promise<void>}
+   */
+  function makeDepAddClick(items, title) {
+    return async (ev) => {
+      if (!current || pending) {
+        return;
+      }
+      /** @type {HTMLButtonElement} */
+      const btn = /** @type {any} */ (ev.currentTarget);
+      /** @type {HTMLInputElement|null} */
+      const input = /** @type {any} */ (btn.previousElementSibling);
+      const target = input ? input.value.trim() : '';
+      if (!target || target === current.id) {
+        showToast('Enter a different issue id');
+        return;
+      }
+      const set = new Set((items || []).map((d) => d.id));
+      if (set.has(target)) {
+        showToast('Link already exists');
+        return;
+      }
+      pending = true;
+      if (btn) {
+        btn.disabled = true;
+      }
+      if (input) {
+        input.disabled = true;
+      }
+      try {
+        if (title === 'Dependencies') {
+          const updated = await sendFn('dep-add', {
+            a: current.id,
+            b: target,
+            view_id: current.id
+          });
+          if (updated && typeof updated === 'object') {
+            current = /** @type {IssueDetail} */ (updated);
+            doRender();
+          }
+        } else {
+          const updated = await sendFn('dep-add', {
+            a: target,
+            b: current.id,
+            view_id: current.id
+          });
+          if (updated && typeof updated === 'object') {
+            current = /** @type {IssueDetail} */ (updated);
+            doRender();
+          }
+        }
+      } catch {
+        showToast('Failed to add dependency');
+      } finally {
+        pending = false;
+      }
+    };
+  }
+  /**
+   * @param {KeyboardEvent} ev
+   */
+  function onTitleInputKeydown(ev) {
+    if (ev.key === 'Escape') {
+      edit_title = false;
+      doRender();
+    } else if (ev.key === 'Enter') {
+      ev.preventDefault();
+      onTitleSave();
+    }
+  }
+
+  /**
+   * @param {KeyboardEvent} ev
+   */
+  function onDescEditableKeydown(ev) {
+    if (ev.key === 'Enter') {
+      onDescEdit();
+    }
+  }
+
+  /**
+   * @param {KeyboardEvent} ev
+   */
+  function onAcceptEditableKeydown(ev) {
+    if (ev.key === 'Enter') {
+      onAcceptEdit();
+    }
+  }
+
+  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 = issue;
+      pending = false;
+      doRender();
+    },
+    clear() {
+      renderPlaceholder('Select an issue to view details');
+    },
+    destroy() {
+      mount_element.replaceChildren();
+    }
+  };
+}