@starlove/orbit 1.0.6 → 1.1.0

package/public/js/ticket-detail.js

@@ -4,7 +4,7 @@
 // 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 } from "./state.js";
+import { state, ticketsForProject, selectableStatesForProject, boardLabelCatalog, currentBoard, upsertTicket } from "./state.js";
 import { drawerInner, drawer, $ } from "./dom.js";
 import {
   escapeHtml,
@@ -15,76 +15,152 @@ import {
   typeLabel,
   typeLabelLong,
   priorityLabel,
-  priorityKeyFor
+  priorityKeyFor,
+  renderPreservedText,
+  stateClassFor,
+  cleanText
 } from "./format.js";
-import { renderTypeIcon, renderPriorityPill } from "./kanban.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";
-import { load } from "./app.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";
 
 /**
- * PATCH a ticket then reload + re-render the drawer in ticket mode. Lives
- * here because every caller is a drawer interaction; api.js stays I/O-only.
+ * 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 patchTicket(ticketId, body) {
-  await api(withBoardQuery(`/api/tickets/${ticketId}`), { method: "PATCH", body });
-  await load();
+async function refreshTicketDetail(ticketId, { renderBoardAfter = false } = {}) {
   state.selectedTicketId = ticketId;
   state.detailMode = "ticket";
-  await renderDetail();
+  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`))
+  ]);
+  upsertTicket(context.ticket);
+  if (renderBoardAfter) renderBoard();
+  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.
+ *   - 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 startInlineEdit(node, field, initialValue, ticketId) {
+export function startInlineEdit(node, opts) {
   if (!node || node.dataset.editing === "true") return;
+  const {
+    fieldName,
+    multiline = true,
+    initialValue = "",
+    ariaLabel,
+    emptyMessage,
+    rerender,
+    commit: commitHandler
+  } = opts;
+
   node.dataset.editing = "true";
 
-  const isTextarea = field === "description";
-  const editor = document.createElement(isTextarea ? "textarea" : "input");
-  editor.className = isTextarea ? "inline-desc-editor" : "inline-title-editor";
+  const editor = document.createElement(multiline ? "textarea" : "input");
+  editor.className = multiline ? "inline-desc-editor" : "inline-title-editor";
   editor.value = initialValue;
-  editor.setAttribute("data-editing-field", field);
-  if (!isTextarea) {
+  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, String(initialValue).split("\n").length + 1);
   }
 
   node.replaceWith(editor);
   editor.focus();
-  if (!isTextarea) editor.select();
+  if (!multiline) editor.select();
   else editor.setSelectionRange(editor.value.length, editor.value.length);
 
   let done = false;
 
+  const stopWatchingOutsideClicks = () => {
+    document.removeEventListener("pointerdown", handleOutsidePointerDown, true);
+  };
+
+  // The title row uses a persistent shell element (#drawerTitle) that
+  // renderDrawerShell re-queries by id on every render. Leaving the editor in
+  // its place means the next render finds nothing, throws, and the input is
+  // stranded on screen until a full reload. Put the original node back before
+  // any downstream render runs.
+  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;
-    done = true;
-    const next = editor.value;
+    const next = multiline ? editor.value : editor.value.trim();
+    finish();
     if (String(next) === String(initialValue)) {
-      await renderDetail();
+      if (rerender) await rerender();
       return;
     }
-    if (field === "title" && !next.trim()) {
-      toast.warning("Title cannot be empty");
-      await renderDetail();
+    if (emptyMessage && !next.trim()) {
+      toast.warning(emptyMessage);
+      if (rerender) await rerender();
       return;
     }
-    await patchTicket(ticketId, { [field]: next });
+    if (commitHandler) await commitHandler(next);
   };
 
   const cancel = async () => {
     if (done) return;
-    done = true;
-    await renderDetail();
+    finish();
+    if (rerender) await rerender();
   };
 
   editor.addEventListener("blur", commit);
@@ -95,7 +171,7 @@ function startInlineEdit(node, field, initialValue, ticketId) {
       return;
     }
     if (event.key === "Enter") {
-      if (!isTextarea) {
+      if (!multiline) {
         event.preventDefault();
         void commit();
       } else if (event.metaKey || event.ctrlKey) {
@@ -110,33 +186,87 @@ function startInlineEdit(node, field, initialValue, ticketId) {
 function wireTicketDetailEditors(ticket) {
   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", () => {
-      startInlineEdit(titleEl, "title", ticket.title || "", ticketId);
-    });
+    titleEl.addEventListener("click", editTitle);
     titleEl.addEventListener("keydown", (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
-        startInlineEdit(titleEl, "title", ticket.title || "", ticketId);
+        editTitle();
       }
     });
   }
 
   const descEl = drawerInner.querySelector('[data-edit-field="description"]');
+  const editDescription = () =>
+    startInlineEdit(descEl, {
+      fieldName: "description",
+      multiline: true,
+      initialValue: ticket.description || "",
+      ariaLabel: "Edit ticket description",
+      rerender: () => renderDetail(),
+      commit: (next) => patchTicket(ticketId, { description: cleanText(next) })
+    });
+
   if (descEl) {
-    descEl.addEventListener("click", () => {
-      startInlineEdit(descEl, "description", ticket.description || "", ticketId);
+    descEl.addEventListener("click", (event) => {
+      event.preventDefault();
+      editDescription();
     });
     descEl.addEventListener("keydown", (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
-        startInlineEdit(descEl, "description", ticket.description || "", ticketId);
+        editDescription();
       }
     });
   }
 
-  drawerInner.querySelectorAll(".meta-select[data-meta-field]").forEach((select) => {
+  // 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: "Implementation summary" },
+    { key: "implementation_updates", label: "Implementation updates / lessons" }
+  ];
+  for (const { key, label } of AI_FIELDS) {
+    const fieldEl = drawerInner.querySelector(`[data-edit-field="${key}"]`);
+    if (!fieldEl) continue;
+    const edit = () =>
+      startInlineEdit(fieldEl, {
+        fieldName: key,
+        multiline: true,
+        initialValue: ticket[key] || "",
+        ariaLabel: `Edit ${label}`,
+        rerender: () => renderDetail(),
+        commit: (next) => patchTicket(ticketId, { [key]: cleanText(next) })
+      });
+    fieldEl.addEventListener("click", (event) => {
+      event.preventDefault();
+      edit();
+    });
+    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") {
@@ -195,7 +325,7 @@ function wireTicketDetailEditors(ticket) {
   });
 }
 
-export async function renderDetail() {
+export async function renderDetail(options = {}) {
   if (state.detailMode === "settings") {
     await renderProjectDetail();
     openDrawer();
@@ -207,9 +337,22 @@ export async function renderDetail() {
     return;
   }
 
-  const [context, statusHistory] = await Promise.all([
-    api(withBoardQuery(`/api/tickets/${state.selectedTicketId}/context?depth=1`)),
-    api(withBoardQuery(`/api/tickets/${state.selectedTicketId}/history`))
+  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/${state.selectedTicketId}/context?depth=1`)),
+    hasOption("statusHistory")
+      ? Promise.resolve(options.statusHistory)
+      : api(withBoardQuery(`/api/tickets/${state.selectedTicketId}/history`)),
+    hasOption("comments")
+      ? Promise.resolve(options.comments)
+      : api(withBoardQuery(`/api/tickets/${state.selectedTicketId}/comments`)).then((result) => result.comments || []),
+    hasOption("attachmentList")
+      ? Promise.resolve(options.attachmentList)
+      : features.attachments
+        ? api(withBoardQuery(`/api/tickets/${state.selectedTicketId}/attachments`)).catch(() => ({ attachments: [] }))
+        : Promise.resolve({ attachments: [] })
   ]);
   const ticket = context.ticket;
   // Acknowledge the read receipt: clear the unread dot on this card.
@@ -259,42 +402,39 @@ export async function renderDetail() {
   const datalistOptions = catalogNames.map((name) => `<option value="${escapeHtml(name)}"></option>`).join("");
 
   const detailCanonicalType = canonicalTicketType(ticket.type);
-  const detailTypeText = typeLabel(ticket.type).toUpperCase();
+  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"
+    : "description editable-field is-placeholder";
   const detailSubtitleHtml = `
     <span class="ticket-number">${escapeHtml(ticketLabel(ticket))}</span>
-    <div class="card-type-id type-pill-${escapeHtml(detailCanonicalType)}">
-      ${renderTypeIcon(ticket.type)}
-      <span class="card-type-label">${escapeHtml(detailTypeText)}</span>
+    <div class="detail-meta-badge-row" aria-label="Ticket metadata controls">
+      <select class="detail-meta-badge detail-state-badge state-pill-${escapeHtml(stateClass)} meta-select" 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 priority-pill-${escapeHtml(priorityKey)} meta-select" data-meta-field="priority" aria-label="Ticket priority">${priorityOptions}</select>
     </div>
-    ${renderPriorityPill(ticket.priority)}
   `;
 
   renderDrawerShell({
+    mode: "ticket",
     title: ticket.title,
     titleAttrs: {
       class: "editable-field",
       "data-edit-field": "title",
+      role: "button",
       tabindex: "0",
-      title: "Click to edit"
+      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>
-      <p class="description editable-field ${ticket.description ? "" : "is-placeholder"}" data-edit-field="description" tabindex="0" title="Click to edit">${escapeHtml(ticket.description || "No description yet.")}</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">
-          <dt>State</dt>
-          <dd><select class="meta-select meta-inline" data-meta-field="state_id" aria-label="Lane / state">${stateOptions}</select></dd>
-        </div>
-        <div class="ticket-meta-row">
-          <dt>Type</dt>
-          <dd><select class="meta-select meta-inline" data-meta-field="type" aria-label="Ticket type">${typeOptions}</select></dd>
-        </div>
-        <div class="ticket-meta-row">
-          <dt>Priority</dt>
-          <dd><select class="meta-select meta-inline" data-meta-field="priority" aria-label="Priority">${priorityOptions}</select></dd>
-        </div>
         <div class="ticket-meta-row ticket-meta-row--stack">
           <dt>Labels</dt>
           <dd>
@@ -311,6 +451,8 @@ export async function renderDetail() {
 
     ${renderHierarchySection(ticket, context)}
 
+    ${features.attachments ? renderAttachmentSection(ticket, attachmentList.attachments || []) : ""}
+
     ${renderParentEpicSection(ticket, context)}
 
     <div class="section">
@@ -321,21 +463,26 @@ export async function renderDetail() {
     ${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>
-      <form id="aiFieldsForm" class="field-form">
-        <label>
-          <span>AI-Written Plan</span>
-          <textarea name="ai_plan" placeholder="Paste or let an AI write the plan...">${escapeHtml(ticket.ai_plan || "")}</textarea>
-        </label>
-        <label>
-          <span>Implementation Summary</span>
-          <textarea name="implementation_summary" placeholder="What changed, what shipped, what remains...">${escapeHtml(ticket.implementation_summary || "")}</textarea>
-        </label>
-        <label>
-          <span>Implementation Updates / Lessons</span>
-          <textarea name="implementation_updates" placeholder="Progress notes, mistakes to avoid, discoveries...">${escapeHtml(ticket.implementation_updates || "")}</textarea>
-        </label>
-        <button type="submit">Save Fields</button>
-      </form>
+      <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">
@@ -345,7 +492,7 @@ export async function renderDetail() {
 
     <div class="section">
       <h3>Comments</h3>
-      ${context.comments.map(renderComment).join("") || `<p class="description">No comments yet.</p>`}
+      ${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>
@@ -355,37 +502,17 @@ export async function renderDetail() {
   });
 
   wireTicketDetailEditors(ticket);
-
-  $("#aiFieldsForm")?.addEventListener("submit", async (event) => {
-    event.preventDefault();
-    const form = new FormData(event.currentTarget);
-    await api(withBoardQuery(`/api/tickets/${ticket.id}`), {
-      method: "PATCH",
-      body: {
-        ai_plan: form.get("ai_plan"),
-        implementation_summary: form.get("implementation_summary"),
-        implementation_updates: form.get("implementation_updates")
-      }
-    });
-    await load();
-    state.selectedTicketId = ticket.id;
-    state.detailMode = "ticket";
-    await renderDetail();
-    toast.success("AI fields saved");
-  });
+  if (features.attachments) wireAttachmentControls(ticket);
 
   $("#detailCommentForm").addEventListener("submit", async (event) => {
     event.preventDefault();
-    const body = new FormData(event.currentTarget).get("body").trim();
+    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 load();
-    state.selectedTicketId = ticket.id;
-    state.detailMode = "ticket";
-    await renderDetail();
+    await refreshTicketDetail(ticket.id);
   });
 
   drawerInner.querySelectorAll("[data-open-ticket]").forEach((card) => {
@@ -412,10 +539,7 @@ export async function renderDetail() {
         toast.error(err.message || "Failed to remove child");
         return;
       }
-      await load();
-      state.selectedTicketId = ticket.id;
-      state.detailMode = "ticket";
-      await renderDetail();
+      await refreshTicketDetail(ticket.id, { renderBoardAfter: true });
       toast.success("Removed from epic");
     });
   });
@@ -432,10 +556,7 @@ export async function renderDetail() {
         toast.error(err.message || "Failed to remove parent");
         return;
       }
-      await load();
-      state.selectedTicketId = ticket.id;
-      state.detailMode = "ticket";
-      await renderDetail();
+      await refreshTicketDetail(ticket.id, { renderBoardAfter: true });
       toast.success("Parent epic removed");
     });
   });
@@ -450,10 +571,7 @@ export async function renderDetail() {
         toast.error(err.message || "Failed to remove relation");
         return;
       }
-      await load();
-      state.selectedTicketId = ticket.id;
-      state.detailMode = "ticket";
-      await renderDetail();
+      await refreshTicketDetail(ticket.id);
       toast.success("Relation removed");
     });
   });
@@ -504,10 +622,7 @@ export async function renderDetail() {
         toast.error(err.message || "Failed to set parent epic");
         return;
       }
-      await load();
-      state.selectedTicketId = ticket.id;
-      state.detailMode = "ticket";
-      await renderDetail();
+      await refreshTicketDetail(ticket.id, { renderBoardAfter: true });
       toast.success("Parent epic set");
     });
   }
@@ -546,10 +661,7 @@ export async function renderDetail() {
         toast.error(err.message || "Failed to add relation");
         return;
       }
-      await load();
-      state.selectedTicketId = ticket.id;
-      state.detailMode = "ticket";
-      await renderDetail();
+      await refreshTicketDetail(ticket.id);
     });
   }
 
@@ -560,6 +672,172 @@ 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">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">
+          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) {
+  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">×</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-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>
+    </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">×</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/);
@@ -582,13 +860,13 @@ function renderStatusHistory(history) {
       const body = event.body;
       const from = body.from ? escapeHtml(body.from) : "?";
       const to = escapeHtml(body.to || body.state || body.next_state || "?");
-      const actorType = body.actor_type || "human";
-      const actorName = escapeHtml(event.actor);
-      const actorId = body.actor_id && body.actor_id !== event.actor ? escapeHtml(body.actor_id) : null;
-      const byLine =
-        actorType === "agent"
-          ? `agent · ${actorId ? `${actorName} (${actorId})` : actorName}`
-          : `you`;
+      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>
@@ -603,10 +881,36 @@ function renderComment(comment) {
   return `
     <div class="comment ${comment.kind === "checkpoint" ? "checkpoint" : ""}">
       <div class="comment-meta">
-        <strong>${escapeHtml(comment.author)}</strong>
+        <strong>${escapeHtml(formatCommentAuthor(comment))}</strong>
         <span>${comment.kind === "human_comment" ? "" : `${escapeHtml(comment.kind)} - `}${formatDate(comment.created_at)}</span>
       </div>
-      <div class="comment-body">${escapeHtml(comment.body)}</div>
+      <div class="comment-body preserved-text-body">${renderPreservedText(comment.body)}</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 }) {
+  const text = value || "";
+  const hasValue = Boolean(text.trim());
+  const inner = hasValue ? renderPreservedText(text) : escapeHtml(placeholder || "");
+  const placeholderClass = hasValue ? "" : "is-placeholder";
+  return `
+    <div class="inline-md-field">
+      <span class="inline-md-field-label">${escapeHtml(label)}</span>
+      <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>
   `;
 }
@@ -699,6 +1003,7 @@ function renderParentEpicSection(ticket, context) {
 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>`
@@ -749,6 +1054,7 @@ export function renderDetailCard(ticket, options = {}) {
             ${renderTypeIcon(ticket.type)}
             <span class="card-type-label">${escapeHtml(typeText)}</span>
           </div>
+          <span class="detail-card-state state-pill-${escapeHtml(stateClass)}">${escapeHtml(ticket.state_name || "State")}</span>
           ${state.showPriority ? renderPriorityPill(ticket.priority) : ""}
         </div>
       </div>