@starlove/orbit 1.3.5 → 1.4.1

package/public/js/ticket-detail.js

@@ -39,6 +39,12 @@ import { toast } from "./toast.js";
 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
@@ -273,6 +279,7 @@ export function startInlineEdit(node, opts) {
 
   editor.addEventListener("blur", commit);
   editor.addEventListener("keydown", (event) => {
+    if (multiline && handleTextareaIndentationKeydown(event, editor)) return;
     if (event.key === "Escape") {
       event.preventDefault();
       void cancel();
@@ -290,8 +297,27 @@ export function startInlineEdit(node, opts) {
   });
 }
 
+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) {
+function wireTicketDetailEditors(ticket, context) {
   const ticketId = ticket.id;
 
   const editTitle = () =>
@@ -347,12 +373,12 @@ function wireTicketDetailEditors(ticket) {
   // "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: "Implementation summary" },
+    { key: "ai_plan", label: "AI Plan" },
+    { key: "implementation_summary", label: "Work Summary" },
     {
       key: "implementation_updates",
-      label: "Implementation updates / lessons",
-    },
+      label: "Revisions",
+    }
   ];
   for (const { key, label } of AI_FIELDS) {
     const fieldEl = drawerInner.querySelector(`[data-edit-field="${key}"]`);
@@ -434,6 +460,10 @@ function wireTicketDetailEditors(ticket) {
     ?.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) => {
@@ -514,7 +544,7 @@ export async function renderDetail(options = {}) {
     )
     .join("");
 
-  const priorityOptions = [0, 1, 2, 3, 4]
+  const priorityOptions = [4, 3, 2, 1, 0]
     .map(
       (p) =>
         `<option value="${p}" ${Number(ticket.priority) === p ? "selected" : ""}>${escapeHtml(priorityLabel(p))}</option>`,
@@ -526,19 +556,11 @@ export async function renderDetail(options = {}) {
       (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">×</button>
+        <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 catalogNames = boardLabelCatalog()
-    .map((l) => l.name)
-    .filter((name) => !ticket.labels?.some((tl) => tl.name === name));
-
-  const datalistOptions = catalogNames
-    .map((name) => `<option value="${escapeHtml(name)}"></option>`)
-    .join("");
-
   const detailCanonicalType = canonicalTicketType(ticket.type);
   const priorityKey = priorityKeyFor(ticket.priority);
   const currentState = states.find((s) => s.id === ticket.state_id);
@@ -547,8 +569,8 @@ export async function renderDetail(options = {}) {
     ? renderPreservedText(ticket.description)
     : escapeHtml("No description yet.");
   const descriptionClass = ticket.description
-    ? "description preserved-text-body editable-field"
-    : "description editable-field is-placeholder";
+    ? "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">
@@ -574,80 +596,103 @@ export async function renderDetail(options = {}) {
     <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>
-      <dl class="ticket-meta" id="ticketMetaGrid" data-ticket-id="${escapeHtml(ticket.id)}">
-        <div class="ticket-meta-row ticket-meta-row--stack">
-          <dt>Labels</dt>
-          <dd>
+    </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">
-              <input type="text" class="label-add-input meta-inline-input" data-label-input list="board-label-suggestions" placeholder="Add label…" aria-label="Add label" />
-              <datalist id="board-label-suggestions">${datalistOptions}</datalist>
-              <button type="button" class="ghost meta-add-btn" data-label-add>Add</button>
+              <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>
-          </dd>
-        </div>
-      </dl>
-    </div>
-
-    ${renderHierarchySection(ticket, context)}
-
-    ${features.attachments ? renderAttachmentSection(ticket, attachmentList.attachments || []) : ""}
-
-    ${renderParentEpicSection(ticket, context)}
-
-    <div class="section">
-      <h3>Related</h3>
-      ${renderRelated(context.relations, ticket)}
-    </div>
-
-    ${
-      currentBoard()?.ai_enabled !== 0
-        ? `
-    <details class="section ai-fields" data-ai-plan-toggle data-ticket-id="${escapeHtml(ticket.id)}"${aiPlanOpen(ticket.id) ? " open" : ""}>
-      <summary><h3>AI Plan / Implementation Record</h3></summary>
-      <div class="ai-fields-grid">
-        ${renderInlinePreservedTextField({
-          fieldName: "ai_plan",
-          label: "AI-Written Plan",
-          value: ticket.ai_plan,
-          placeholder: "Paste or let an AI write the plan...",
-        })}
-        ${renderInlinePreservedTextField({
-          fieldName: "implementation_summary",
-          label: "Implementation Summary",
-          value: ticket.implementation_summary,
-          placeholder: "What changed, what shipped, what remains...",
-        })}
-        ${renderInlinePreservedTextField({
-          fieldName: "implementation_updates",
-          label: "Implementation Updates / Lessons",
-          value: ticket.implementation_updates,
-          placeholder: "Progress notes, mistakes to avoid, discoveries...",
-        })}
-      </div>
-    </details>`
-        : ""
-    }
-
-    <div class="section">
-      <h3>Status History</h3>
-      ${renderStatusHistory(statusHistory)}
-    </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>`,
+            })
+          : ""
+      }
 
-    <div class="section">
-      <h3>Comments</h3>
-      ${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">Comment</button>
-      </form>
+      ${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);
+  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(
@@ -661,6 +706,20 @@ export async function renderDetail(options = {}) {
     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 (
@@ -738,12 +797,45 @@ export async function renderDetail(options = {}) {
     });
   }
 
+  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",
@@ -791,6 +883,9 @@ export async function renderDetail(options = {}) {
   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",
@@ -832,6 +927,53 @@ export async function renderDetail(options = {}) {
     });
   }
 
+  // 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();
 }
 
@@ -842,23 +984,25 @@ function aiPlanOpen(ticketId) {
 function renderAttachmentSection(ticket, attachments = []) {
   const cards = attachments.length
     ? `<div class="attachment-grid">${attachments.map((attachment) => renderAttachmentCard(ticket, attachment)).join("")}</div>`
-    : `<p class="description">No images attached yet.</p>`;
-  return `
-    <div class="section attachments-section" data-attachment-section data-ticket-id="${escapeHtml(ticket.id)}">
-      <div class="attachment-heading-row">
-        <h3>Images</h3>
-        <label class="ghost attachment-upload-button">
+    : `<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>
-      <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}
-    </div>
-  `;
+    `,
+  });
 }
 
 function renderAttachmentCard(ticket, attachment) {
@@ -869,7 +1013,7 @@ function renderAttachmentCard(ticket, attachment) {
       <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">×</button>
+        <button type="button" class="attachment-delete" data-delete-attachment="${escapeHtml(attachment.id)}" aria-label="Remove missing image">${closeIconSvg}</button>
       </article>
     `;
   }
@@ -879,11 +1023,11 @@ function renderAttachmentCard(ticket, attachment) {
   );
   return `
     <article class="attachment-card">
-      <button type="button" class="attachment-thumb-button" data-open-lightbox="${escapeHtml(src)}" data-lightbox-title="${name}">
+      <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">×</button>
+      <button type="button" class="attachment-delete" data-delete-attachment="${escapeHtml(attachment.id)}" aria-label="Remove image">${closeIconSvg}</button>
     </article>
   `;
 }
@@ -1015,7 +1159,7 @@ function openAttachmentLightbox(src, title) {
   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">×</button>
+      <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>
@@ -1078,13 +1222,36 @@ function renderStatusHistory(history) {
 }
 
 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" : ""}">
-      <div class="comment-meta">
-        <strong>${escapeHtml(formatCommentAuthor(comment))}</strong>
-        <span>${comment.kind === "human_comment" ? "" : `${escapeHtml(comment.kind)} - `}${formatDate(comment.created_at)}</span>
+    <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>
   `;
 }
@@ -1100,16 +1267,36 @@ export function renderInlinePreservedTextField({
   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">
-      <span class="inline-md-field-label">${escapeHtml(label)}</span>
+      <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)}"
@@ -1122,7 +1309,9 @@ export function renderInlinePreservedTextField({
   `;
 }
 
-function renderRelated(relations = [], ticket) {
+// 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);
@@ -1131,16 +1320,13 @@ function renderRelated(relations = [], ticket) {
       if (t.parent_ticket_id === ticket.id) hierarchyIds.add(t.id);
     }
   }
-  const candidates = ticketsForProject().filter(
+  return ticketsForProject().filter(
     (t) =>
       t.id !== ticket?.id && !relatedIds.has(t.id) && !hierarchyIds.has(t.id),
   );
-  const datalistOptions = candidates
-    .map(
-      (t) => `<option value="#${t.number} — ${escapeHtml(t.title)}"></option>`,
-    )
-    .join("");
+}
 
+function renderRelated(relations = [], ticket) {
   const list = relations.length
     ? `<div class="detail-card-grid">${relations.map((r) => renderRelatedCard(r)).join("")}</div>`
     : "";
@@ -1148,16 +1334,15 @@ function renderRelated(relations = [], ticket) {
   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" list="related-ticket-suggestions" 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">×</button>
-        <datalist id="related-ticket-suggestions">${datalistOptions}</datalist>
+        <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="ghost meta-add-btn">Add</button>
+      <button type="submit" class="meta-add-btn detail-action-btn" data-variant="ghost">Add</button>
     </form>
   `;
 
@@ -1166,52 +1351,96 @@ function renderRelated(relations = [], ticket) {
 
 function renderHierarchySection(ticket, context) {
   const isEpic = canonicalTicketType(ticket.type) === "epic";
-  if (isEpic) {
-    const cards = context.child_tickets || [];
-    const body = cards.length
-      ? `<div class="detail-card-grid">${cards.map((c) => renderDetailCard(c, { detach: { mode: "child", id: c.id } })).join("")}</div>`
-      : `<p class="description">No child features yet. Create a feature / task card and set this epic as its parent.</p>`;
-    return `
-      <div class="section">
-        <h3>Features inside this Epic</h3>
-        ${body}
+  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>
-    `;
-  }
-  return "";
-}
+      <button type="submit" class="meta-add-btn detail-action-btn" data-variant="ghost">Add</button>
+    </form>
+  `;
 
-function renderParentEpicSection(ticket, context) {
-  if (canonicalTicketType(ticket.type) === "epic") return "";
+  return renderPanel({
+    title: "Features inside this Epic",
+    body: `<div class="settings-row">${grid}${form}</div>`,
+  });
+}
 
-  const epics = ticketsForProject().filter(
+// 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,
   );
-  const datalistOptions = epics
-    .map(
-      (t) => `<option value="#${t.number} — ${escapeHtml(t.title)}"></option>`,
-    )
-    .join("");
+}
+
+// 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">
+      <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" list="parent-epic-suggestions" 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">×</button>
-          <datalist id="parent-epic-suggestions">${datalistOptions}</datalist>
+          <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="ghost meta-add-btn">Set</button>
+        <button type="submit" class="meta-add-btn detail-action-btn" data-variant="ghost">Set</button>
       </form>
     `;
 
-  return `
-    <div class="section">
-      <h3>Epic</h3>
-      ${body}
-    </div>
-  `;
+  return renderPanel({
+    title: "Epic",
+    body: `<div class="settings-row">${body}</div>`,
+  });
 }
 
 export function renderDetailCard(ticket, options = {}) {
@@ -1237,7 +1466,7 @@ export function renderDetailCard(ticket, options = {}) {
       attr = `data-detach-relation="${escapeHtml(id)}"`;
       label = "Remove relation";
     }
-    detachBtn = `<button type="button" class="card-detach-btn" ${attr} aria-label="${label}" title="${label}">×</button>`;
+    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>`;
@@ -1259,7 +1488,6 @@ export function renderDetailCard(ticket, options = {}) {
   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}
-      ${detachBtn}
       ${eyebrow}
       <h3>${escapeHtml(ticket.title)}</h3>
       <div class="card-meta">
@@ -1271,6 +1499,7 @@ export function renderDetailCard(ticket, options = {}) {
           </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>