@starlove/orbit 1.4.0 → 2.0.0

package/public/js/ticket-detail.js

@@ -1,1516 +0,0 @@
-// Ticket detail drawer: renders the full ticket pane (header meta, AI plan,
-// status history, comments) and wires every editable surface — inline title
-// and description editors, meta selects, label management, parent epic, and
-// related cards. Also owns the small render helpers (status history,
-// comments, detail-card) that are only used inside the drawer.
-
-import {
-  state,
-  ticketsForProject,
-  selectableStatesForProject,
-  boardLabelCatalog,
-  currentBoard,
-  upsertTicket,
-} from "./state.js";
-import { drawerInner, drawer, $ } from "./dom.js";
-import {
-  escapeHtml,
-  formatDate,
-  formatDateDetail,
-  ticketLabel,
-  canonicalTicketType,
-  typeLabel,
-  typeLabelLong,
-  priorityLabel,
-  priorityKeyFor,
-  renderPreservedText,
-  stateClassFor,
-  cleanText,
-} from "./format.js";
-import { renderTypeIcon, renderPriorityPill, renderBoard } from "./kanban.js";
-import { renderDrawerShell, openDrawer, closeDrawer } from "./drawer.js";
-import { navigate } from "./router.js";
-import { api, withBoardQuery } from "./api.js";
-import { features } from "./config.js";
-import { toast } from "./toast.js";
-// `load()` is intentionally not used for drawer-local mutations. Reloading
-// /api/bootstrap rebuilds the whole app; these helpers patch the local ticket
-// cache and refresh only the surfaces that actually changed.
-import { renderProjectDetail } from "./settings.js";
-import { unreadCount, markRead } from "./unread.js";
-import { formatActorLabel, formatCommentAuthor } from "./actor-labels.js";
-import { openArtifactDrawer } from "./artifact-drawer.js";
-import { closeIconSvg } from "./icons.js";
-import { handleTextareaIndentationKeydown } from "./text-editing.js";
-import { renderPanel, renderTogglePanel } from "./panel.js";
-import { attachTypeahead } from "./typeahead.js";
-import { attachTicketTypeahead } from "./ticket-typeahead.js";
-
-/**
- * Refresh the open drawer from the focused ticket context endpoint. When the
- * board card itself changed, also rebuild the board from the patched local
- * cache; otherwise leave the board DOM alone.
- */
-async function refreshTicketDetail(
-  ticketId,
-  { renderBoardAfter = false } = {},
-) {
-  const [context, statusHistory, commentsResult] = await Promise.all([
-    api(withBoardQuery(`/api/tickets/${ticketId}/context?depth=1`)),
-    api(withBoardQuery(`/api/tickets/${ticketId}/history`)),
-    api(withBoardQuery(`/api/tickets/${ticketId}/comments`)),
-  ]);
-  if (context.ticket?.id !== ticketId) return;
-  upsertTicket(context.ticket);
-  if (renderBoardAfter) renderBoard();
-  if (state.detailMode !== "ticket" || state.selectedTicketId !== ticketId)
-    return;
-  await renderDetail({
-    context,
-    statusHistory,
-    comments: commentsResult.comments || [],
-  });
-}
-
-/**
- * PATCH a ticket then refresh only the board/detail surfaces that depend on
- * the changed ticket. This avoids the previous full /api/bootstrap reload for
- * every drawer edit.
- */
-async function patchTicket(ticketId, body) {
-  await api(withBoardQuery(`/api/tickets/${ticketId}`), {
-    method: "PATCH",
-    body,
-  });
-  await refreshTicketDetail(ticketId, { renderBoardAfter: true });
-}
-
-/**
- * Replace a static node with an inline editor; commit on Enter / blur, cancel on Esc.
- * For multi-line fields, Ctrl/Cmd+Enter commits and plain Enter inserts a newline.
- *
- * Options:
- *   - fieldName: short identifier used for aria-label / data attribute (e.g. "title").
- *   - multiline: true for <textarea> + Ctrl+Enter commit; false for <input> + Enter commit.
- *   - initialValue: text shown in the editor on open.
- *   - ariaLabel: full label for screen readers.
- *   - emptyMessage: if set, an empty trimmed value triggers a warning toast and cancels.
- *   - sourceEvent: optional pointer/click event used to seed the textarea caret near the clicked text.
- *   - rerender: async fn called on cancel / no-change to put the static node back.
- *   - commit: async fn called with the new value when the user accepts a real change.
- *             Receives the *raw* editor value; the caller is responsible for any
- *             trimming, cleanText, or PATCH wiring.
- */
-function inlineTextOffsetFromPoint(node, sourceEvent, maxLength) {
-  if (
-    !node ||
-    !sourceEvent ||
-    typeof sourceEvent.clientX !== "number" ||
-    typeof sourceEvent.clientY !== "number"
-  )
-    return null;
-
-  let range = null;
-  if (document.caretPositionFromPoint) {
-    const position = document.caretPositionFromPoint(
-      sourceEvent.clientX,
-      sourceEvent.clientY,
-    );
-    if (
-      position?.offsetNode &&
-      (position.offsetNode === node || node.contains(position.offsetNode))
-    ) {
-      range = document.createRange();
-      range.setStart(node, 0);
-      range.setEnd(position.offsetNode, position.offset);
-    }
-  } else if (document.caretRangeFromPoint) {
-    const caretRange = document.caretRangeFromPoint(
-      sourceEvent.clientX,
-      sourceEvent.clientY,
-    );
-    if (
-      caretRange?.startContainer &&
-      (caretRange.startContainer === node ||
-        node.contains(caretRange.startContainer))
-    ) {
-      range = document.createRange();
-      range.setStart(node, 0);
-      range.setEnd(caretRange.startContainer, caretRange.startOffset);
-    }
-  }
-
-  if (!range) return null;
-  return Math.max(0, Math.min(maxLength, range.toString().length));
-}
-
-function captureInlineEditScrollState(node) {
-  const scrollContainer = node?.closest?.(".drawer-inner");
-  if (!scrollContainer) return null;
-  return {
-    scrollContainer,
-    nodeRect: node.getBoundingClientRect(),
-    scrollTop: scrollContainer.scrollTop,
-  };
-}
-
-function restoreInlineEditScroll(scrollState, editor) {
-  if (!scrollState?.scrollContainer || !editor?.isConnected) return;
-  const editorRect = editor.getBoundingClientRect();
-  const nextScrollTop = Math.max(
-    0,
-    scrollState.scrollContainer.scrollTop +
-      (editorRect.top - scrollState.nodeRect.top),
-  );
-  if (Number.isFinite(nextScrollTop))
-    scrollState.scrollContainer.scrollTop = nextScrollTop;
-  else scrollState.scrollContainer.scrollTop = scrollState.scrollTop;
-}
-
-function focusWithoutScrolling(editor) {
-  try {
-    editor.focus({ preventScroll: true });
-  } catch {
-    editor.focus();
-  }
-}
-
-export function startInlineEdit(node, opts) {
-  if (!node || node.dataset.editing === "true") return;
-  const {
-    fieldName,
-    multiline = true,
-    initialValue = "",
-    ariaLabel,
-    emptyMessage,
-    sourceEvent,
-    rerender,
-    commit: commitHandler,
-  } = opts;
-
-  const scrollState = multiline ? captureInlineEditScrollState(node) : null;
-  const initialString = String(initialValue);
-  const clickedCaretOffset = multiline
-    ? inlineTextOffsetFromPoint(node, sourceEvent, initialString.length)
-    : null;
-
-  node.dataset.editing = "true";
-
-  const editor = document.createElement(multiline ? "textarea" : "input");
-  editor.className = multiline ? "inline-desc-editor" : "inline-title-editor";
-  editor.value = initialString;
-  if (fieldName) editor.setAttribute("data-editing-field", fieldName);
-  if (ariaLabel) editor.setAttribute("aria-label", ariaLabel);
-  if (!multiline) {
-    editor.type = "text";
-    editor.maxLength = 500;
-    editor.autocomplete = "off";
-    editor.spellcheck = true;
-  } else {
-    editor.rows = Math.max(3, initialString.split("\n").length + 1);
-    const sourceHeight = node.getBoundingClientRect().height;
-    if (Number.isFinite(sourceHeight) && sourceHeight > 0) {
-      editor.style.minHeight = `${Math.ceil(sourceHeight)}px`;
-    }
-  }
-
-  node.replaceWith(editor);
-  focusWithoutScrolling(editor);
-  if (!multiline) {
-    editor.select();
-  } else {
-    const selectionStart = clickedCaretOffset ?? 0;
-    editor.setSelectionRange(selectionStart, selectionStart);
-    restoreInlineEditScroll(scrollState, editor);
-  }
-
-  let done = false;
-
-  const stopWatchingOutsideClicks = () => {
-    document.removeEventListener("pointerdown", handleOutsidePointerDown, true);
-  };
-
-  // If a downstream render rebuilds the title block while the editor is open,
-  // the editor is dropped along with everything else; only restore the saved
-  // node when our editor is still connected to the DOM.
-  const restoreNode = () => {
-    if (editor.isConnected) editor.replaceWith(node);
-    delete node.dataset.editing;
-  };
-
-  const finish = () => {
-    done = true;
-    stopWatchingOutsideClicks();
-    restoreNode();
-  };
-
-  function handleOutsidePointerDown(event) {
-    if (done || event.target === editor || editor.contains(event.target))
-      return;
-    // Some drawer/header surfaces are not focusable, so clicking them does not
-    // reliably blur the input in every browser. Force the blur path used on
-    // commit so the edit styling cannot get stuck.
-    editor.blur();
-  }
-
-  document.addEventListener("pointerdown", handleOutsidePointerDown, true);
-
-  const commit = async () => {
-    if (done) return;
-    const next = multiline ? editor.value : editor.value.trim();
-    finish();
-    if (String(next) === String(initialValue)) {
-      if (rerender) await rerender();
-      return;
-    }
-    if (emptyMessage && !next.trim()) {
-      toast.warning(emptyMessage);
-      if (rerender) await rerender();
-      return;
-    }
-    if (commitHandler) await commitHandler(next);
-  };
-
-  const cancel = async () => {
-    if (done) return;
-    finish();
-    if (rerender) await rerender();
-  };
-
-  editor.addEventListener("blur", commit);
-  editor.addEventListener("keydown", (event) => {
-    if (multiline && handleTextareaIndentationKeydown(event, editor)) return;
-    if (event.key === "Escape") {
-      event.preventDefault();
-      void cancel();
-      return;
-    }
-    if (event.key === "Enter") {
-      if (!multiline) {
-        event.preventDefault();
-        void commit();
-      } else if (event.metaKey || event.ctrlKey) {
-        event.preventDefault();
-        void commit();
-      }
-    }
-  });
-}
-
-function promptArtifactPath({ currentPath = "", label = "Artifact" } = {}) {
-  const next = window.prompt(
-    `Local markdown/text path for ${label} (example: docs/test.md or ./docs/test.md)`,
-    currentPath || "docs/",
-  );
-  if (next === null) return null;
-  return cleanText(next).trim();
-}
-
-async function promptAndSaveArtifactPath({ ticketId, fieldName, currentPath, label }) {
-  if (!ticketId || !fieldName) return null;
-  const next = promptArtifactPath({ currentPath, label });
-  if (next === null) return null;
-  await patchTicket(ticketId, { [fieldName]: next });
-  await refreshTicketDetail(ticketId);
-  toast.success(next ? "Artifact path updated" : "Artifact path cleared");
-  return next;
-}
-
-/** Wire inline editors on the ticket detail header (meta fields, labels). */
-function wireTicketDetailEditors(ticket, context) {
-  const ticketId = ticket.id;
-
-  const editTitle = () =>
-    startInlineEdit(titleEl, {
-      fieldName: "title",
-      multiline: false,
-      initialValue: ticket.title || "",
-      ariaLabel: "Edit ticket title",
-      emptyMessage: "Title cannot be empty",
-      rerender: () => renderDetail(),
-      commit: (next) => patchTicket(ticketId, { title: next }),
-    });
-
-  const titleEl = drawer.querySelector('[data-edit-field="title"]');
-  if (titleEl) {
-    titleEl.addEventListener("click", editTitle);
-    titleEl.addEventListener("keydown", (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        editTitle();
-      }
-    });
-  }
-
-  const descEl = drawerInner.querySelector('[data-edit-field="description"]');
-  const editDescription = (sourceEvent) =>
-    startInlineEdit(descEl, {
-      fieldName: "description",
-      multiline: true,
-      initialValue: ticket.description || "",
-      ariaLabel: "Edit ticket description",
-      sourceEvent,
-      rerender: () => renderDetail(),
-      commit: (next) => patchTicket(ticketId, { description: cleanText(next) }),
-    });
-
-  if (descEl) {
-    descEl.addEventListener("click", (event) => {
-      event.preventDefault();
-      editDescription(event);
-    });
-    descEl.addEventListener("keydown", (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        editDescription();
-      }
-    });
-  }
-
-  // AI Plan / Implementation fields: each becomes its own click-to-edit
-  // surface so they save independently on blur / Ctrl+Enter, matching the
-  // description field. The "ai_plan" / "implementation_summary" /
-  // "implementation_updates" data-edit-field selectors are emitted by the
-  // detail body template below.
-  const AI_FIELDS = [
-    { key: "ai_plan", label: "AI Plan" },
-    { key: "implementation_summary", label: "Work Summary" },
-    {
-      key: "implementation_updates",
-      label: "Revisions",
-    }
-  ];
-  for (const { key, label } of AI_FIELDS) {
-    const fieldEl = drawerInner.querySelector(`[data-edit-field="${key}"]`);
-    if (!fieldEl) continue;
-    const edit = (sourceEvent) =>
-      startInlineEdit(fieldEl, {
-        fieldName: key,
-        multiline: true,
-        initialValue: ticket[key] || "",
-        ariaLabel: `Edit ${label}`,
-        sourceEvent,
-        rerender: () => renderDetail(),
-        commit: (next) => patchTicket(ticketId, { [key]: cleanText(next) }),
-      });
-    fieldEl.addEventListener("click", (event) => {
-      event.preventDefault();
-      edit(event);
-    });
-    fieldEl.addEventListener("keydown", (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        edit();
-      }
-    });
-  }
-
-  drawer.querySelectorAll(".meta-select[data-meta-field]").forEach((select) => {
-    select.addEventListener("change", async () => {
-      const field = select.dataset.metaField;
-      if (field === "type") {
-        await patchTicket(ticketId, { type: select.value });
-        return;
-      }
-      if (field === "state_id") {
-        await patchTicket(ticketId, { state_id: select.value });
-        return;
-      }
-      if (field === "parent_ticket_id") {
-        await patchTicket(ticketId, { parent_ticket_id: select.value || null });
-        return;
-      }
-      if (field === "priority") {
-        await patchTicket(ticketId, { priority: Number(select.value) });
-      }
-    });
-  });
-
-  const applyLabelPatch = async (nextNames) => {
-    await patchTicket(ticketId, { labels: nextNames });
-  };
-
-  drawerInner.querySelectorAll("[data-remove-label]").forEach((btn) => {
-    btn.addEventListener("click", async () => {
-      const removeName = btn.getAttribute("data-remove-label");
-      const names = (ticket.labels || [])
-        .map((l) => l.name)
-        .filter((n) => n !== removeName);
-      await applyLabelPatch(names);
-    });
-  });
-
-  const addLabel = async () => {
-    const input = drawerInner.querySelector("[data-label-input]");
-    if (!input) return;
-    const name = input.value.trim();
-    if (!name) return;
-    const names = (ticket.labels || []).map((l) => l.name);
-    if (names.includes(name)) {
-      input.value = "";
-      return;
-    }
-    names.push(name);
-    input.value = "";
-    await applyLabelPatch(names);
-  };
-
-  drawerInner
-    .querySelector("[data-label-add]")
-    ?.addEventListener("click", () => {
-      void addLabel();
-    });
-  // Attach the typeahead first so its Enter handler runs before the add-on-Enter
-  // handler below; when a suggestion is highlighted it stops propagation so the
-  // partial typed text isn't added instead.
-  attachLabelTypeahead(drawerInner.querySelector("[data-label-input]"), ticket);
-  drawerInner
-    .querySelector("[data-label-input]")
-    ?.addEventListener("keydown", (event) => {
-      if (event.key === "Enter") {
-        event.preventDefault();
-        void addLabel();
-      }
-    });
-}
-
-export async function renderDetail(options = {}) {
-  if (state.detailMode === "settings") {
-    await renderProjectDetail();
-    openDrawer();
-    return;
-  }
-
-  if (!state.selectedTicketId) {
-    closeDrawer();
-    return;
-  }
-
-  const requestedTicketId = state.selectedTicketId;
-  const hasOption = (key) => Object.prototype.hasOwnProperty.call(options, key);
-  const [context, statusHistory, comments, attachmentList] = await Promise.all([
-    hasOption("context")
-      ? Promise.resolve(options.context)
-      : api(
-          withBoardQuery(`/api/tickets/${requestedTicketId}/context?depth=1`),
-        ),
-    hasOption("statusHistory")
-      ? Promise.resolve(options.statusHistory)
-      : api(withBoardQuery(`/api/tickets/${requestedTicketId}/history`)),
-    hasOption("comments")
-      ? Promise.resolve(options.comments)
-      : api(withBoardQuery(`/api/tickets/${requestedTicketId}/comments`)).then(
-          (result) => result.comments || [],
-        ),
-    hasOption("attachmentList")
-      ? Promise.resolve(options.attachmentList)
-      : features.attachments
-        ? api(
-            withBoardQuery(`/api/tickets/${requestedTicketId}/attachments`),
-          ).catch(() => ({ attachments: [] }))
-        : Promise.resolve({ attachments: [] }),
-  ]);
-  if (
-    state.detailMode !== "ticket" ||
-    state.selectedTicketId !== requestedTicketId
-  )
-    return;
-  if (context.ticket?.id !== requestedTicketId) return;
-  const ticket = context.ticket;
-  // Acknowledge the read receipt: clear the unread dot on this card.
-  // Also wipe the dot from the already-rendered card in the board so the
-  // user doesn't see it lingering until the next full re-render.
-  markRead(ticket.id, ticket.updated_at);
-  document
-    .querySelector(
-      `.card[data-ticket-id="${CSS.escape(ticket.id)}"] .card-unread-dot`,
-    )
-    ?.remove();
-  const states = selectableStatesForProject(ticket.state_id);
-
-  // Ordered by the canonical hierarchy so the dropdown visually reinforces scale:
-  // Epic (biggest) → Feature → Task → Bug.
-  const typeOptions = ["epic", "feature", "task", "bug"]
-    .map(
-      (value) =>
-        `<option value="${escapeHtml(value)}" ${canonicalTicketType(ticket.type) === value ? "selected" : ""}>${escapeHtml(typeLabelLong(value))}</option>`,
-    )
-    .join("");
-
-  const stateOptions = states
-    .map(
-      (s) =>
-        `<option value="${escapeHtml(s.id)}" ${s.id === ticket.state_id ? "selected" : ""}>${escapeHtml(s.name)}</option>`,
-    )
-    .join("");
-
-  const priorityOptions = [4, 3, 2, 1, 0]
-    .map(
-      (p) =>
-        `<option value="${p}" ${Number(ticket.priority) === p ? "selected" : ""}>${escapeHtml(priorityLabel(p))}</option>`,
-    )
-    .join("");
-
-  const labelPills = (ticket.labels || [])
-    .map(
-      (label) => `
-      <span class="label-pill-removable" style="--label-color: ${escapeHtml(label.color)}">
-        ${escapeHtml(label.name)}
-        <button type="button" class="label-pill-remove" data-remove-label="${escapeHtml(label.name)}" title="Remove label" aria-label="Remove label">${closeIconSvg}</button>
-      </span>`,
-    )
-    .join("");
-
-  const detailCanonicalType = canonicalTicketType(ticket.type);
-  const priorityKey = priorityKeyFor(ticket.priority);
-  const currentState = states.find((s) => s.id === ticket.state_id);
-  const stateClass = stateClassFor(currentState);
-  const descriptionHtml = ticket.description
-    ? renderPreservedText(ticket.description)
-    : escapeHtml("No description yet.");
-  const descriptionClass = ticket.description
-    ? "description preserved-text-body editable-field detail-description-body"
-    : "description editable-field detail-description-body is-placeholder";
-  const detailSubtitleHtml = `
-    <span class="ticket-number">${escapeHtml(ticketLabel(ticket))}</span>
-    <div class="detail-meta-badge-row" aria-label="Ticket metadata controls">
-      <select class="detail-meta-badge detail-state-badge meta-select" data-variant="${escapeHtml(stateClass)}" data-meta-field="state_id" aria-label="Ticket state">${stateOptions}</select>
-      <select class="detail-meta-badge detail-type-badge type-pill-${escapeHtml(detailCanonicalType)} meta-select" data-meta-field="type" aria-label="Ticket type">${typeOptions}</select>
-      <select class="detail-meta-badge detail-priority-badge priority-pill meta-select" data-variant="${escapeHtml(priorityKey)}" data-meta-field="priority" aria-label="Ticket priority">${priorityOptions}</select>
-    </div>
-  `;
-
-  renderDrawerShell({
-    mode: "ticket",
-    title: ticket.title,
-    titleAttrs: {
-      class: "editable-field",
-      "data-edit-field": "title",
-      role: "button",
-      tabindex: "0",
-      title: "Click or press Enter to edit ticket title",
-      "aria-label": "Edit ticket title",
-    },
-    subtitleHtml: detailSubtitleHtml,
-    body: `
-    <div class="detail-head">
-      <p class="detail-updated" title="Last saved change">Updated ${escapeHtml(formatDateDetail(ticket.updated_at))}</p>
-      <div class="${descriptionClass}" data-edit-field="description" tabindex="0" title="Click to edit">${descriptionHtml}</div>
-    </div>
-
-    <div class="settings-stack detail-section-stack">
-      ${renderPanel({
-        title: "Labels",
-        body: `
-          <div class="settings-row">
-            <div class="label-pills-row" data-other-labels>${labelPills}</div>
-            <div class="label-add-row">
-              <div class="label-add-input-wrap">
-                <input type="text" class="label-add-input meta-inline-input" data-label-input autocomplete="off" placeholder="Add label…" aria-label="Add label" />
-              </div>
-              <button type="button" class="meta-add-btn detail-action-btn" data-variant="ghost" data-label-add>Add</button>
-            </div>
-          </div>
-        `,
-      })}
-
-      ${renderHierarchySection(ticket, context)}
-
-      ${features.attachments ? renderAttachmentSection(ticket, attachmentList.attachments || []) : ""}
-
-      ${renderParentEpicSection(ticket, context)}
-
-      ${renderPanel({
-        title: "Related",
-        body: `<div class="settings-row">${renderRelated(context.relations, ticket)}</div>`,
-      })}
-
-      ${
-        currentBoard()?.ai_enabled !== 0
-          ? renderTogglePanel({
-              title: "AI Plan / Implementation Record",
-              open: aiPlanOpen(ticket.id),
-              attrs: `data-ai-plan-toggle data-ticket-id="${escapeHtml(ticket.id)}"`,
-              body: `
-        <div class="ai-fields-grid">
-          ${renderInlinePreservedTextField({
-            fieldName: "ai_plan",
-            label: "AI Plan",
-            value: ticket.ai_plan,
-            placeholder: "What to do: ",
-            ticketId: ticket.id,
-            artifactPath: ticket.plan_artifact_path,
-            artifactFieldName: "plan_artifact_path",
-            artifactLabel: "Open full handoff",
-          })}
-          ${renderInlinePreservedTextField({
-            fieldName: "implementation_summary",
-            label: "Work Summary",
-            value: ticket.implementation_summary,
-            placeholder: "What was done: ",
-            ticketId: ticket.id,
-            artifactPath: ticket.implementation_artifact_path,
-            artifactFieldName: "implementation_artifact_path",
-            artifactLabel: "Open full report",
-          })}
-          ${renderInlinePreservedTextField({
-            fieldName: "implementation_updates",
-            label: "Revisions",
-            value: ticket.implementation_updates,
-            placeholder: "Changes since initial implementation: ",
-          })}
-        </div>`,
-            })
-          : ""
-      }
-
-      ${renderPanel({
-        title: "Status History",
-        body: `<div class="settings-row">${renderStatusHistory(statusHistory)}</div>`,
-      })}
-
-      ${renderPanel({
-        title: "Comments",
-        body: `
-          <div class="settings-row">
-            ${comments.map(renderComment).join("") || `<p class="description">No comments yet.</p>`}
-            <form class="comment-form" id="detailCommentForm">
-              <textarea name="body" placeholder="Add a comment, decision, or instruction..." required></textarea>
-              <button type="submit" class="detail-action-btn" data-variant="ghost">Comment</button>
-            </form>
-          </div>
-        `,
-      })}
-    </div>
-  `,
-  });
-
-  wireTicketDetailEditors(ticket, context);
-  if (features.attachments) wireAttachmentControls(ticket);
-
-  const commentTextarea = $("#detailCommentForm textarea");
-  commentTextarea?.addEventListener("keydown", (event) => {
-    handleTextareaIndentationKeydown(event, commentTextarea);
-  });
-
-  $("#detailCommentForm").addEventListener("submit", async (event) => {
-    event.preventDefault();
-    const body = cleanText(
-      new FormData(event.currentTarget).get("body"),
-    ).trim();
-    if (!body) return;
-    await api(withBoardQuery(`/api/tickets/${ticket.id}/comments`), {
-      method: "POST",
-      body: { body },
-    });
-    await refreshTicketDetail(ticket.id);
-  });
-
-  drawerInner.querySelectorAll("[data-comment-action='toggle-ai-omission']").forEach((button) => {
-    button.addEventListener("click", async () => {
-      const commentId = button.dataset.commentId;
-      if (!commentId) return;
-      const omittedForAi = button.dataset.omittedForAi !== "true";
-      await api(withBoardQuery(`/api/tickets/${ticket.id}/comments/${commentId}`), {
-        method: "PATCH",
-        body: { omitted_for_ai: omittedForAi },
-      });
-      toast.info(omittedForAi ? "Comment omitted from AI context" : "Comment included in AI context");
-      await refreshTicketDetail(ticket.id);
-    });
-  });
-
-  drawerInner.querySelectorAll("[data-open-ticket]").forEach((card) => {
-    card.addEventListener("click", async (event) => {
-      if (
-        event.target.closest(
-          "[data-detach-child],[data-detach-parent],[data-detach-relation]",
-        )
-      )
-        return;
-      navigate({
-        boardId: state.boardId,
-        view: "ticket",
-        ticketId: card.dataset.openTicket,
-      });
-    });
-  });
-
-  drawerInner.querySelectorAll("[data-detach-child]").forEach((btn) => {
-    btn.addEventListener("click", async (event) => {
-      event.stopPropagation();
-      const childId = btn.dataset.detachChild;
-      try {
-        await api(withBoardQuery(`/api/tickets/${childId}`), {
-          method: "PATCH",
-          body: { parent_ticket_id: null },
-        });
-      } catch (err) {
-        toast.error(err.message || "Failed to remove child");
-        return;
-      }
-      await refreshTicketDetail(ticket.id, { renderBoardAfter: true });
-      toast.success("Removed from epic");
-    });
-  });
-
-  drawerInner.querySelectorAll("[data-detach-parent]").forEach((btn) => {
-    btn.addEventListener("click", async (event) => {
-      event.stopPropagation();
-      try {
-        await api(withBoardQuery(`/api/tickets/${ticket.id}`), {
-          method: "PATCH",
-          body: { parent_ticket_id: null },
-        });
-      } catch (err) {
-        toast.error(err.message || "Failed to remove parent");
-        return;
-      }
-      await refreshTicketDetail(ticket.id, { renderBoardAfter: true });
-      toast.success("Parent epic removed");
-    });
-  });
-
-  drawerInner.querySelectorAll("[data-detach-relation]").forEach((btn) => {
-    btn.addEventListener("click", async (event) => {
-      event.stopPropagation();
-      const relationId = btn.dataset.detachRelation;
-      try {
-        await api(withBoardQuery(`/api/relations/${relationId}`), {
-          method: "DELETE",
-        });
-      } catch (err) {
-        toast.error(err.message || "Failed to remove relation");
-        return;
-      }
-      await refreshTicketDetail(ticket.id);
-      toast.success("Relation removed");
-    });
-  });
-
-  const aiPlanEl = drawerInner.querySelector("[data-ai-plan-toggle]");
-  if (aiPlanEl) {
-    aiPlanEl.addEventListener("toggle", () => {
-      const id = aiPlanEl.dataset.ticketId;
-      if (aiPlanEl.open) localStorage.setItem(`mab_ai_plan_open:${id}`, "1");
-      else localStorage.removeItem(`mab_ai_plan_open:${id}`);
-    });
-  }
-
-  drawerInner.querySelectorAll("[data-open-artifact]").forEach((btn) => {
-    btn.addEventListener("click", async (event) => {
-      event.stopPropagation();
-      const artifactFieldName = btn.dataset.artifactField;
-      const artifactTitle = btn.dataset.artifactTitle || "Linked artifact";
-      const artifactTicketId = btn.dataset.artifactTicketId || ticket.id;
-      const currentPath = String(btn.dataset.openArtifact || "").trim();
-      if (!currentPath) {
-        await promptAndSaveArtifactPath({
-          ticketId: artifactTicketId,
-          fieldName: artifactFieldName,
-          currentPath,
-          label: artifactTitle,
-        });
-        return;
-      }
-      const opened = await openArtifactDrawer({
-        ticketId: artifactTicketId,
-        path: currentPath,
-        title: artifactTitle,
-      });
-      if (opened === false && artifactFieldName) {
-        await promptAndSaveArtifactPath({
-          ticketId: artifactTicketId,
-          fieldName: artifactFieldName,
-          currentPath,
-          label: artifactTitle,
-        });
-      }
-    });
-  });
-
-  const parentEpicForm = drawerInner.querySelector("#parentEpicForm");
-  if (parentEpicForm) {
-    const parentInput = parentEpicForm.querySelector("[name=target]");
-    const parentClear = parentEpicForm.querySelector(
-      "[data-parent-epic-clear]",
-    );
-    attachTicketTypeahead(parentInput, () => epicCandidates(ticket));
-    const syncParentClear = () => {
-      parentEpicForm.classList.toggle(
-        "has-value",
-        parentInput.value.length > 0,
-      );
-    };
-    parentInput.addEventListener("input", syncParentClear);
-    syncParentClear();
-    parentClear.addEventListener("click", () => {
-      parentInput.value = "";
-      syncParentClear();
-      parentInput.focus();
-    });
-    parentEpicForm.addEventListener("submit", async (event) => {
-      event.preventDefault();
-      const targetLabel = String(
-        new FormData(event.currentTarget).get("target") || "",
-      ).trim();
-      if (!targetLabel) return;
-      const targetId = resolveTicketIdFromLabel(targetLabel, ticket.id);
-      if (!targetId) {
-        toast.warning("Pick an epic from the suggestions");
-        return;
-      }
-      const target = ticketsForProject().find((t) => t.id === targetId);
-      if (!target || canonicalTicketType(target.type) !== "epic") {
-        toast.warning("Parent must be an epic");
-        return;
-      }
-      try {
-        await api(withBoardQuery(`/api/tickets/${ticket.id}`), {
-          method: "PATCH",
-          body: { parent_ticket_id: targetId },
-        });
-      } catch (err) {
-        toast.error(err.message || "Failed to set parent epic");
-        return;
-      }
-      await refreshTicketDetail(ticket.id, { renderBoardAfter: true });
-      toast.success("Parent epic set");
-    });
-  }
-
-  const relatedAddForm = drawerInner.querySelector("#relatedAddForm");
-  if (relatedAddForm) {
-    const relatedInput = relatedAddForm.querySelector("[name=target]");
-    const relatedClear = relatedAddForm.querySelector("[data-related-clear]");
-    attachTicketTypeahead(relatedInput, () =>
-      relatedTicketCandidates(context.relations, ticket),
-    );
-    const syncRelatedClear = () => {
-      relatedAddForm.classList.toggle(
-        "has-value",
-        relatedInput.value.length > 0,
-      );
-    };
-    relatedInput.addEventListener("input", syncRelatedClear);
-    syncRelatedClear();
-    relatedClear.addEventListener("click", () => {
-      relatedInput.value = "";
-      syncRelatedClear();
-      relatedInput.focus();
-    });
-    relatedAddForm.addEventListener("submit", async (event) => {
-      event.preventDefault();
-      const form = new FormData(event.currentTarget);
-      const targetLabel = String(form.get("target") || "").trim();
-      const relationType = String(form.get("type") || "relates_to");
-      if (!targetLabel) return;
-      const targetId = resolveTicketIdFromLabel(targetLabel, ticket.id);
-      if (!targetId) {
-        toast.warning("Pick a ticket from the suggestions");
-        return;
-      }
-      try {
-        await api(withBoardQuery(`/api/relations`), {
-          method: "POST",
-          body: {
-            source_ticket_id: ticket.id,
-            target_ticket_id: targetId,
-            type: relationType,
-          },
-        });
-      } catch (err) {
-        toast.error(err.message || "Failed to add relation");
-        return;
-      }
-      await refreshTicketDetail(ticket.id);
-    });
-  }
-
-  // Reverse of "Set parent epic": from an epic, pull a feature/task in as a
-  // child by patching that ticket's parent_ticket_id to this epic.
-  const epicChildForm = drawerInner.querySelector("#epicChildForm");
-  if (epicChildForm) {
-    const childInput = epicChildForm.querySelector("[name=target]");
-    const childClear = epicChildForm.querySelector("[data-epic-child-clear]");
-    const syncChildClear = () => {
-      epicChildForm.classList.toggle("has-value", childInput.value.length > 0);
-    };
-    childInput.addEventListener("input", syncChildClear);
-    syncChildClear();
-    childClear.addEventListener("click", () => {
-      childInput.value = "";
-      syncChildClear();
-      childInput.focus();
-    });
-    attachTicketTypeahead(childInput, () => childCandidates(ticket));
-    epicChildForm.addEventListener("submit", async (event) => {
-      event.preventDefault();
-      const targetLabel = String(
-        new FormData(event.currentTarget).get("target") || "",
-      ).trim();
-      if (!targetLabel) return;
-      const targetId = resolveTicketIdFromLabel(targetLabel, ticket.id);
-      if (!targetId) {
-        toast.warning("Pick a ticket from the suggestions");
-        return;
-      }
-      const target = ticketsForProject().find((t) => t.id === targetId);
-      if (!target || canonicalTicketType(target.type) === "epic") {
-        toast.warning("Epics can't be nested inside an epic");
-        return;
-      }
-      try {
-        await api(withBoardQuery(`/api/tickets/${targetId}`), {
-          method: "PATCH",
-          body: { parent_ticket_id: ticket.id },
-        });
-      } catch (err) {
-        toast.error(err.message || "Failed to add feature");
-        return;
-      }
-      await refreshTicketDetail(ticket.id, { renderBoardAfter: true });
-      toast.success("Feature added to epic");
-    });
-  }
-
-  openDrawer();
-}
-
-function aiPlanOpen(ticketId) {
-  return localStorage.getItem(`mab_ai_plan_open:${ticketId}`) === "1";
-}
-
-function renderAttachmentSection(ticket, attachments = []) {
-  const cards = attachments.length
-    ? `<div class="attachment-grid">${attachments.map((attachment) => renderAttachmentCard(ticket, attachment)).join("")}</div>`
-    : `<p class="description attachment-empty-state">No images attached yet.</p>`;
-  return renderPanel({
-    title: "Images",
-    className: "attachments-panel",
-    attrs: `data-attachment-section data-ticket-id="${escapeHtml(ticket.id)}"`,
-    body: `
-      <div class="settings-row">
-        <div class="attachment-dropzone" data-attachment-dropzone tabindex="0">
-          <strong>Paste, drag, or upload images</strong>
-          <span>PNG, JPG, GIF, WebP, SVG, BMP, or AVIF up to 10 MB each.</span>
-        </div>
-        ${cards}
-        <label class="attachment-upload-button detail-action-btn" role="button" data-variant="ghost" tabindex="0">
-          Upload
-          <input type="file" accept="image/*" multiple data-attachment-input />
-        </label>
-      </div>
-    `,
-  });
-}
-
-function renderAttachmentCard(ticket, attachment) {
-  const name = escapeHtml(attachment.original_name || "image");
-  const meta = `${formatBytes(attachment.size_bytes)} · ${escapeHtml(attachment.mime_type || "image")}`;
-  if (attachment.missing) {
-    return `
-      <article class="attachment-card is-missing">
-        <div class="attachment-missing-thumb">Missing</div>
-        <div class="attachment-card-meta"><strong>${name}</strong><span>${meta}</span></div>
-        <button type="button" class="attachment-delete" data-delete-attachment="${escapeHtml(attachment.id)}" aria-label="Remove missing image">${closeIconSvg}</button>
-      </article>
-    `;
-  }
-  const src = withBoardQuery(
-    attachment.content_url ||
-      `/api/tickets/${ticket.id}/attachments/${attachment.id}/content`,
-  );
-  return `
-    <article class="attachment-card">
-      <button type="button" class="attachment-thumb-button" data-no-arc data-open-lightbox="${escapeHtml(src)}" data-lightbox-title="${name}">
-        <img src="${escapeHtml(src)}" alt="${name}" loading="lazy" />
-      </button>
-      <div class="attachment-card-meta"><strong>${name}</strong><span>${meta}</span></div>
-      <button type="button" class="attachment-delete" data-delete-attachment="${escapeHtml(attachment.id)}" aria-label="Remove image">${closeIconSvg}</button>
-    </article>
-  `;
-}
-
-function formatBytes(value) {
-  const bytes = Number(value || 0);
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-function imageFilesFromList(files) {
-  return [...(files || [])].filter(
-    (file) => file && String(file.type || "").startsWith("image/"),
-  );
-}
-
-async function uploadAttachmentFiles(ticket, files) {
-  const imageFiles = imageFilesFromList(files);
-  if (!imageFiles.length) {
-    toast.warning("No image files found");
-    return;
-  }
-  for (const file of imageFiles) {
-    const response = await fetch(
-      withBoardQuery(
-        `/api/tickets/${ticket.id}/attachments?filename=${encodeURIComponent(file.name || "image")}`,
-      ),
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": file.type || "application/octet-stream",
-          "X-File-Name": file.name || "image",
-        },
-        body: file,
-      },
-    );
-    if (!response.ok) {
-      let payload = {};
-      try {
-        payload = await response.json();
-      } catch {}
-      throw new Error(payload.error || `Upload failed (${response.status})`);
-    }
-  }
-  await refreshTicketDetail(ticket.id);
-  toast.success(
-    imageFiles.length === 1
-      ? "Image attached"
-      : `${imageFiles.length} images attached`,
-  );
-}
-
-function wireAttachmentControls(ticket) {
-  const section = drawerInner.querySelector("[data-attachment-section]");
-  if (!section) return;
-  const input = section.querySelector("[data-attachment-input]");
-  input?.addEventListener("change", async () => {
-    try {
-      await uploadAttachmentFiles(ticket, input.files);
-      input.value = "";
-    } catch (err) {
-      toast.error(err.message || "Upload failed");
-    }
-  });
-
-  const dropzone = section.querySelector("[data-attachment-dropzone]");
-  dropzone?.addEventListener("dragover", (event) => {
-    event.preventDefault();
-    dropzone.classList.add("is-dragover");
-  });
-  dropzone?.addEventListener("dragleave", () =>
-    dropzone.classList.remove("is-dragover"),
-  );
-  dropzone?.addEventListener("drop", async (event) => {
-    event.preventDefault();
-    dropzone.classList.remove("is-dragover");
-    try {
-      await uploadAttachmentFiles(ticket, event.dataTransfer?.files || []);
-    } catch (err) {
-      toast.error(err.message || "Upload failed");
-    }
-  });
-
-  drawerInner.onpaste = async (event) => {
-    if (event.target.closest("input, textarea, [contenteditable='true']"))
-      return;
-    const files = imageFilesFromList(event.clipboardData?.files || []);
-    if (!files.length) return;
-    event.preventDefault();
-    try {
-      await uploadAttachmentFiles(ticket, files);
-    } catch (err) {
-      toast.error(err.message || "Paste upload failed");
-    }
-  };
-
-  section.querySelectorAll("[data-delete-attachment]").forEach((btn) => {
-    btn.addEventListener("click", async () => {
-      try {
-        await api(
-          withBoardQuery(
-            `/api/tickets/${ticket.id}/attachments/${btn.dataset.deleteAttachment}`,
-          ),
-          { method: "DELETE" },
-        );
-        await refreshTicketDetail(ticket.id);
-        toast.success("Image removed");
-      } catch (err) {
-        toast.error(err.message || "Delete failed");
-      }
-    });
-  });
-
-  section.querySelectorAll("[data-open-lightbox]").forEach((btn) => {
-    btn.addEventListener("click", () =>
-      openAttachmentLightbox(
-        btn.dataset.openLightbox,
-        btn.dataset.lightboxTitle || "Image",
-      ),
-    );
-  });
-}
-
-function openAttachmentLightbox(src, title) {
-  const existing = document.querySelector(".attachment-lightbox");
-  existing?.remove();
-  const overlay = document.createElement("div");
-  overlay.className = "attachment-lightbox";
-  overlay.innerHTML = `
-    <div class="attachment-lightbox-panel" role="dialog" aria-modal="true" aria-label="${escapeHtml(title)}">
-      <button type="button" class="attachment-lightbox-close" aria-label="Close image">${closeIconSvg}</button>
-      <img src="${escapeHtml(src)}" alt="${escapeHtml(title)}" />
-      <p>${escapeHtml(title)}</p>
-    </div>
-  `;
-  const close = () => {
-    document.removeEventListener("keydown", onKeyDown);
-    overlay.remove();
-  };
-  function onKeyDown(event) {
-    if (event.key === "Escape") close();
-  }
-  overlay.addEventListener("click", (event) => {
-    if (
-      event.target === overlay ||
-      event.target.closest(".attachment-lightbox-close")
-    )
-      close();
-  });
-  document.addEventListener("keydown", onKeyDown);
-  document.body.append(overlay);
-}
-
-function resolveTicketIdFromLabel(label, selfId) {
-  const trimmed = label.trim();
-  const match = trimmed.match(/^#?(\d+)\b/);
-  const tickets = ticketsForProject().filter((t) => t.id !== selfId);
-  if (match) {
-    const n = Number(match[1]);
-    const hit = tickets.find((t) => t.number === n);
-    if (hit) return hit.id;
-  }
-  const exact = tickets.find((t) => `#${t.number} — ${t.title}` === trimmed);
-  return exact ? exact.id : "";
-}
-
-function renderStatusHistory(history) {
-  if (!history || history.length === 0) {
-    return `<p class="description">No status changes yet.</p>`;
-  }
-  return history
-    .map((event) => {
-      const body = event.body;
-      const from = body.from ? escapeHtml(body.from) : "?";
-      const to = escapeHtml(body.to || body.state || body.next_state || "?");
-      const byLine = escapeHtml(
-        formatActorLabel({
-          actor: event.actor,
-          actorType: body.actor_type || "human",
-          actorId: body.actor_id,
-        }),
-      );
-      return `<div class="comment status-change">
-        <div class="comment-meta">
-          <span class="status-route">${from} → ${to}</span>
-          <span>${byLine} · ${formatDate(event.created_at)}</span>
-        </div>
-      </div>`;
-    })
-    .join("");
-}
-
-function renderComment(comment) {
-  const aiEnabled = currentBoard()?.ai_enabled !== 0;
-  const omittedForAi = Boolean(comment.omitted_for_ai);
-  const kindLabel =
-    comment.kind === "human_comment" ? "" : escapeHtml(comment.kind.replace(/_/g, " "));
-  return `
-    <div class="comment ${comment.kind === "checkpoint" ? "checkpoint" : ""} ${aiEnabled && omittedForAi ? "is-ai-omitted" : ""}">
-      <div class="comment-head">
-        <div class="comment-head-main">
-          <div class="comment-head-title">
-            <strong>${escapeHtml(formatCommentAuthor(comment))}</strong>
-            ${kindLabel ? `<span class="comment-kind-pill">${kindLabel}</span>` : ""}
-          </div>
-        </div>
-      </div>
-      <div class="comment-body preserved-text-body">${renderPreservedText(comment.body)}</div>
-      <div class="comment-footer">
-        <span class="comment-footer-meta">${formatDate(comment.created_at)}</span>
-        ${
-          aiEnabled
-            ? `<button
-          type="button"
-          class="comment-ai-toggle detail-action-btn"
-          data-variant="ghost"
-          data-comment-action="toggle-ai-omission"
-          data-comment-id="${escapeHtml(comment.id)}"
-          data-omitted-for-ai="${omittedForAi ? "true" : "false"}"
-        >${omittedForAi ? "AI Include" : "AI Ignore"}</button>`
-            : ""
-        }
-      </div>
-    </div>
-  `;
-}
-
-/**
- * Click-to-edit row for AI Plan / Implementation fields and any other
- * long-form ticket field that should render literal read-only text and become
- * a textarea on click. The wiring (event handlers + commit) lives in
- * wireTicketDetailEditors so this helper stays a pure template.
- */
-export function renderInlinePreservedTextField({
-  fieldName,
-  label,
-  value,
-  placeholder,
-  ticketId,
-  artifactPath,
-  artifactFieldName,
-  artifactLabel,
-}) {
-  const text = value || "";
-  const hasValue = Boolean(text.trim());
-  const artifactPathText = String(artifactPath || "").trim();
-  const hasArtifactControl = Boolean(artifactLabel || artifactFieldName);
-  const inner = hasValue
-    ? renderPreservedText(text)
-    : escapeHtml(placeholder || "");
-  const placeholderClass = hasValue ? "" : "is-placeholder";
-  const artifactButton = hasArtifactControl
-    ? `<button
-        type="button"
-        class="detail-action-btn"
-        data-variant="ghost"
-        data-open-artifact="${escapeHtml(artifactPathText)}"
-        data-artifact-field="${escapeHtml(artifactFieldName || "")}"
-        data-artifact-ticket-id="${escapeHtml(ticketId || "")}"
-        data-artifact-title="${escapeHtml(label)}"
-      >${escapeHtml(artifactLabel || "Open full artifact")}</button>`
-    : "";
-  return `
-    <div class="inline-md-field">
-      <div class="inline-md-field-head">
-        <span class="inline-md-field-label">${escapeHtml(label)}</span>
-        ${artifactButton}
-      </div>
-      <div
-        class="inline-md-field-body preserved-text-body editable-field ${placeholderClass}"
-        data-edit-field="${escapeHtml(fieldName)}"
-        tabindex="0"
-        title="Click to edit"
-        role="button"
-        aria-label="Edit ${escapeHtml(label)}"
-      >${inner}</div>
-    </div>
-  `;
-}
-
-// Tickets eligible to be linked as "related": everything in the project except
-// the ticket itself, its existing relations, and its parent/child hierarchy.
-function relatedTicketCandidates(relations = [], ticket) {
-  const relatedIds = new Set(relations.map((r) => r.other_ticket.id));
-  const hierarchyIds = new Set();
-  if (ticket?.parent_ticket_id) hierarchyIds.add(ticket.parent_ticket_id);
-  if (ticket?.id) {
-    for (const t of ticketsForProject()) {
-      if (t.parent_ticket_id === ticket.id) hierarchyIds.add(t.id);
-    }
-  }
-  return ticketsForProject().filter(
-    (t) =>
-      t.id !== ticket?.id && !relatedIds.has(t.id) && !hierarchyIds.has(t.id),
-  );
-}
-
-function renderRelated(relations = [], ticket) {
-  const list = relations.length
-    ? `<div class="detail-card-grid">${relations.map((r) => renderRelatedCard(r)).join("")}</div>`
-    : "";
-
-  const form = `
-    <form id="relatedAddForm" class="related-add-row">
-      <div class="related-add-input-wrap">
-        <input type="text" name="target" class="related-add-input meta-inline-input" placeholder="Add related ticket…" aria-label="Add related ticket" autocomplete="off" />
-        <button type="button" class="related-add-clear" data-related-clear aria-label="Clear" tabindex="-1">${closeIconSvg}</button>
-      </div>
-      <select name="type" class="related-add-type meta-inline" aria-label="Relation type">
-        <option value="relates_to">relates to</option>
-        <option value="blocks">blocks</option>
-        <option value="blocked_by">blocked by</option>
-      </select>
-      <button type="submit" class="meta-add-btn detail-action-btn" data-variant="ghost">Add</button>
-    </form>
-  `;
-
-  return list + form;
-}
-
-function renderHierarchySection(ticket, context) {
-  const isEpic = canonicalTicketType(ticket.type) === "epic";
-  if (!isEpic) return "";
-
-  const cards = context.child_tickets || [];
-  const grid = cards.length
-    ? `<div class="detail-card-grid">${cards.map((c) => renderDetailCard(c, { detach: { mode: "child", id: c.id } })).join("")}</div>`
-    : "";
-
-  const form = `
-    <form id="epicChildForm" class="related-add-row epic-child-form">
-      <div class="related-add-input-wrap">
-        <input type="text" name="target" class="related-add-input meta-inline-input" placeholder="Add feature to epic…" aria-label="Add feature to epic" autocomplete="off" />
-        <button type="button" class="related-add-clear" data-epic-child-clear aria-label="Clear" tabindex="-1">${closeIconSvg}</button>
-      </div>
-      <button type="submit" class="meta-add-btn detail-action-btn" data-variant="ghost">Add</button>
-    </form>
-  `;
-
-  return renderPanel({
-    title: "Features inside this Epic",
-    body: `<div class="settings-row">${grid}${form}</div>`,
-  });
-}
-
-// Epics eligible to become this ticket's parent (any epic but itself).
-function epicCandidates(ticket) {
-  return ticketsForProject().filter(
-    (t) => t.type === "epic" && t.id !== ticket.id,
-  );
-}
-
-// Tickets eligible to be pulled into this epic as children: any non-epic ticket
-// not already parented to it. (A ticket with another parent is reparented.)
-function childCandidates(epic) {
-  return ticketsForProject().filter(
-    (t) =>
-      t.id !== epic.id &&
-      canonicalTicketType(t.type) !== "epic" &&
-      t.parent_ticket_id !== epic.id,
-  );
-}
-
-
-// Board labels not yet applied to this ticket, as {name, color} items.
-function labelCandidates(ticket) {
-  const applied = new Set((ticket.labels || []).map((l) => l.name));
-  return boardLabelCatalog().filter((l) => !applied.has(l.name));
-}
-
-// A typeahead row for a label: colour swatch + bold name. Mirrors the topbar
-// hit layout (bold lead + trailing badge), adapted for a label's lack of a
-// number / state.
-function renderLabelHitRow(label) {
-  return `
-    <span class="search-hit-main">
-      <span class="typeahead-swatch" style="--label-color: ${escapeHtml(label.color || "var(--muted)")}"></span>
-      <strong>${escapeHtml(label.name)}</strong>
-    </span>
-  `;
-}
-
-function attachLabelTypeahead(input, ticket) {
-  if (!input) return;
-  attachTypeahead(input, {
-    getItems: () => labelCandidates(ticket),
-    match: (label, query) => label.name.toLowerCase().includes(query),
-    renderItem: renderLabelHitRow,
-    valueOf: (label) => label.name,
-    emptyText: "No matching labels",
-  });
-}
-
-function renderParentEpicSection(ticket, context) {
-  if (canonicalTicketType(ticket.type) === "epic") return "";
-
-  const body = context.parent_ticket
-    ? `<div class="detail-card-grid detail-card-grid--single">${renderDetailCard(context.parent_ticket, { detach: { mode: "parent" } })}</div>`
-    : `
-      <form id="parentEpicForm" class="related-add-row parent-epic-form">
-        <div class="related-add-input-wrap">
-          <input type="text" name="target" class="related-add-input meta-inline-input" placeholder="Set parent epic…" aria-label="Set parent epic" autocomplete="off" />
-          <button type="button" class="related-add-clear" data-parent-epic-clear aria-label="Clear" tabindex="-1">${closeIconSvg}</button>
-        </div>
-        <button type="submit" class="meta-add-btn detail-action-btn" data-variant="ghost">Set</button>
-      </form>
-    `;
-
-  return renderPanel({
-    title: "Epic",
-    body: `<div class="settings-row">${body}</div>`,
-  });
-}
-
-export function renderDetailCard(ticket, options = {}) {
-  const canonicalType = canonicalTicketType(ticket.type);
-  const priorityKey = priorityKeyFor(ticket.priority);
-  const stateClass = stateClassFor(ticket);
-  const typeText = typeLabel(ticket.type).toUpperCase();
-  const eyebrow = options.eyebrow
-    ? `<span class="card-eyebrow">${escapeHtml(options.eyebrow)}</span>`
-    : "";
-  let detachBtn = "";
-  if (options.detach) {
-    const { mode, id } = options.detach;
-    let attr = "";
-    let label = "";
-    if (mode === "child") {
-      attr = `data-detach-child="${escapeHtml(id)}"`;
-      label = "Remove from epic";
-    } else if (mode === "parent") {
-      attr = `data-detach-parent="1"`;
-      label = "Remove parent epic";
-    } else if (mode === "relation") {
-      attr = `data-detach-relation="${escapeHtml(id)}"`;
-      label = "Remove relation";
-    }
-    detachBtn = `<button type="button" class="card-detach-btn" ${attr} aria-label="${label}" title="${label}">${closeIconSvg}</button>`;
-  } else if (options.archive) {
-    const tid = escapeHtml(options.archive.id);
-    const restoreSvg = `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>`;
-    const trashSvg = `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>`;
-    detachBtn = `
-      <div class="card-archive-actions">
-        <button type="button" class="card-archive-btn card-archive-btn--restore" data-archive-restore="${tid}" aria-label="Restore to board" title="Restore to board">${restoreSvg}</button>
-        <button type="button" class="card-archive-btn card-archive-btn--delete" data-archive-delete="${tid}" aria-label="Delete permanently" title="Delete permanently">${trashSvg}</button>
-      </div>
-    `;
-  }
-  const unreadN = unreadCount(ticket);
-  const unreadDot =
-    unreadN === 0
-      ? ""
-      : unreadN === 1
-        ? `<span class="card-unread-dot" role="status" aria-label="1 unread update"></span>`
-        : `<span class="card-unread-dot has-count" role="status" aria-label="${unreadN} unread updates">${unreadN > 99 ? "99+" : unreadN}</span>`;
-  return `
-    <article class="card card--detail type-${escapeHtml(canonicalType)} priority-${escapeHtml(priorityKey)}" data-variant="${escapeHtml(canonicalType)}"${options.disableOpen ? "" : ` data-open-ticket="${escapeHtml(ticket.id)}"`}>
-      ${unreadDot}
-      ${eyebrow}
-      <h3>${escapeHtml(ticket.title)}</h3>
-      <div class="card-meta">
-        <div class="card-expand-trigger card-expand-trigger--static">
-          <span class="ticket-number">${escapeHtml(ticketLabel(ticket))}</span>
-          <div class="card-type-id type-pill-${escapeHtml(canonicalType)}">
-            ${renderTypeIcon(ticket.type)}
-            <span class="card-type-label">${escapeHtml(typeText)}</span>
-          </div>
-          <span class="detail-card-state" data-variant="${escapeHtml(stateClass)}">${escapeHtml(ticket.state_name || "State")}</span>
-          ${state.showPriority ? renderPriorityPill(ticket.priority) : ""}
-          ${detachBtn}
-        </div>
-      </div>
-    </article>
-  `;
-}
-
-function renderRelatedCard(relation) {
-  const verb = String(relation.type || "").replace(/_/g, " ");
-  const direction = relation.direction === "incoming" ? "from" : "to";
-  return renderDetailCard(relation.other_ticket, {
-    eyebrow: `${verb} ${direction}`,
-    detach: { mode: "relation", id: relation.id },
-  });
-}