@starlove/orbit 1.1.2 → 1.2.0

package/public/js/settings.js

@@ -165,8 +165,12 @@ function renderProjectAiTab(context) {
 }
 
 function renderAgentContextSection(project) {
-  const ph =
+  const instructionsPlaceholder =
     "This project is about…\n\nHow any AI agent should use this board and work in this repo.";
+  const instructions = project.agent_instructions || "";
+  const hasInstructions = Boolean(instructions.trim());
+  const placeholderClass = hasInstructions ? "" : "is-placeholder";
+  const inner = hasInstructions ? renderPreservedText(instructions) : escapeHtml(instructionsPlaceholder);
   return `
     <div class="section ai-subsection ai-context-setup">
       <div class="ai-context-title-row">
@@ -174,10 +178,16 @@ function renderAgentContextSection(project) {
         <h3>Agent Instructions</h3>
       </div>
       <p class="description">This project-level context is provided to agents when they work on tickets.</p>
-      <form id="agentInstructionsForm" class="field-form">
-        <textarea name="agent_instructions" placeholder="${escapeHtml(ph)}">${escapeHtml(project.agent_instructions || "")}</textarea>
-        <button type="submit">Save</button>
-      </form>
+      <div class="inline-md-field">
+        <div
+          class="inline-md-field-body preserved-text-body editable-field settings-agent-instructions-body ${placeholderClass}"
+          data-edit-field="agent_instructions"
+          tabindex="0"
+          title="Click to edit"
+          role="button"
+          aria-label="Edit Agent Instructions"
+        >${inner}</div>
+      </div>
     </div>
   `;
 }
@@ -232,7 +242,7 @@ function renderMcpSetupSection(context) {
               <strong data-mcp-output-title>${escapeHtml(client.label)} setup</strong>
               <p class="description" data-mcp-helper>${escapeHtml(client.helper)}</p>
             </div>
-            <button type="button" class="ghost" data-copy-mcp="config">Copy setup</button>
+            <button type="button" data-variant="secondary" data-copy-mcp="config">Copy setup</button>
           </div>
           <div class="mcp-terminal">
             <div class="mcp-terminal-chrome" aria-hidden="true"><span></span><span></span><span></span></div>
@@ -248,7 +258,7 @@ function renderMcpSetupSection(context) {
               <strong>Manual run command</strong>
               <p class="description">Use this only when an app asks you to start the MCP server yourself.</p>
             </div>
-            <button type="button" class="ghost" data-copy-mcp="command">Copy command</button>
+            <button type="button" data-variant="secondary" data-copy-mcp="command">Copy command</button>
           </div>
           <div class="mcp-terminal">
             <div class="mcp-terminal-chrome" aria-hidden="true"><span></span><span></span><span></span></div>
@@ -381,6 +391,7 @@ function renderProjectRepositoryTab(context) {
 
     <div class="section">
       <h3>Board Snapshot</h3>
+      <p class="description">Import accepts Orbit snapshots or Trello board JSON exports. The default import creates a separate board and leaves this board untouched.</p>
       ${features.attachments ? `
         <label class="orbit-check">
           <input type="checkbox" id="exportProjectImages" />
@@ -392,11 +403,22 @@ function renderProjectRepositoryTab(context) {
         <p class="description">Image exports are embedded in the .orbit.json snapshot and may be much larger.</p>
       ` : ""}
       <div class="deployment-actions">
-        <button type="button" class="ghost" id="exportProject">Export</button>
-        <label class="import-button">
-          <input type="file" id="importSnapshotFile" accept=".orbit.json,.json,application/json" />
-          <span>Import</span>
-        </label>
+        <button type="button" data-variant="secondary" id="exportProject">Export</button>
+        <input type="file" id="importSnapshotAsNewFile" class="import-file-input" accept=".orbit.json,.json,application/json" />
+        <button type="button" data-variant="secondary" id="importSnapshotAsNewButton">Import as New Board</button>
+      </div>
+    </div>
+
+    <div class="section repository-danger-zone">
+      <h3>Replace Current Board</h3>
+      <p class="description">Advanced: replace this board from an Orbit snapshot or Trello export after making the normal pre-import backup. Type <strong>${escapeHtml(project.slug || "")}</strong> to enable replacement.</p>
+      <label class="repository-confirm-field">
+        <span>Board slug</span>
+        <input id="replaceImportConfirmInput" autocomplete="off" spellcheck="false" placeholder="${escapeHtml(project.slug || "")}" />
+      </label>
+      <div class="deployment-actions">
+        <input type="file" id="replaceCurrentBoardImportFile" class="import-file-input" accept=".orbit.json,.json,application/json" disabled />
+        <button type="button" data-variant="secondary" id="replaceCurrentBoardImportButton" disabled>Replace Current Board</button>
       </div>
     </div>
 
@@ -414,7 +436,7 @@ function renderBoardRenameSection(project) {
           <span>Display name</span>
           <input name="name" value="${escapeHtml(project.name || "")}" maxlength="120" required />
         </label>
-        <button type="submit">Rename Board</button>
+        <button type="submit" data-variant="secondary">Rename Board</button>
       </form>
     </div>
   `;
@@ -428,9 +450,9 @@ function renderDeleteBoardSection(project) {
         <h3>Delete Board</h3>
         <p class="description">Delete this board from Orbit and remove its repo-local Orbit files. Export a snapshot first if you may need this board again.</p>
         <div class="repository-delete-actions">
-          <button type="button" class="ghost" id="deleteBoardExportFirst">Export first</button>
-          <button type="button" class="ghost danger-button" id="deleteBoardSkipExport">Delete without exporting</button>
-          <button type="button" class="ghost" id="deleteBoardCancel">Cancel</button>
+          <button type="button" data-variant="secondary" id="deleteBoardExportFirst">Export first</button>
+          <button type="button" data-variant="ghost" class="danger-button" id="deleteBoardSkipExport">Delete without exporting</button>
+          <button type="button" data-variant="ghost" id="deleteBoardCancel">Cancel</button>
         </div>
       </div>
     `;
@@ -450,8 +472,8 @@ function renderDeleteBoardSection(project) {
           <input id="deleteBoardConfirmInput" autocomplete="off" spellcheck="false" placeholder="${slug}" autofocus />
         </label>
         <div class="repository-delete-actions">
-          <button type="button" class="danger-button" id="deleteBoardConfirm" disabled>Delete board permanently</button>
-          <button type="button" class="ghost" id="deleteBoardCancel">Cancel</button>
+          <button type="button" data-variant="primary" class="danger-button" id="deleteBoardConfirm" disabled>Delete board permanently</button>
+          <button type="button" data-variant="ghost" id="deleteBoardCancel">Cancel</button>
         </div>
       </div>
     `;
@@ -461,7 +483,7 @@ function renderDeleteBoardSection(project) {
     <div class="section repository-danger-zone">
       <h3>Delete Board</h3>
       <p class="description">Remove this board from Orbit and delete its repo-local Orbit files. This cannot be undone without an exported snapshot.</p>
-      <button type="button" class="ghost danger-button" id="deleteBoardStart">Delete Board</button>
+      <button type="button" data-variant="ghost" class="danger-button" id="deleteBoardStart">Delete Board</button>
     </div>
   `;
 }
@@ -510,7 +532,7 @@ function renderProjectLanesTab() {
       ${renderLaneManager()}
       <form id="laneCreateForm" class="lane-create-form">
         <input name="name" placeholder="New lane name..." required />
-        <button type="submit">Add Lane</button>
+        <button type="submit" data-variant="primary">Add Lane</button>
       </form>
     </div>
   `;
@@ -593,12 +615,24 @@ function renderProjectJournalTab(context) {
         </select>
         <input name="title" placeholder="Entry title..." required />
         <textarea name="body" placeholder="Decision rationale or lesson: do X instead of Y when working with Z." required></textarea>
-        <button type="submit">Add Entry</button>
+        <button type="submit" data-variant="primary">Add Entry</button>
       </form>
     </div>
   `;
 }
 
+function parseImportSnapshotText(text) {
+  const trimmed = String(text || "").trimStart();
+  if (trimmed.startsWith("<")) {
+    throw new Error("That file looks like an HTML page instead of JSON. In Trello, use Export JSON/download the board JSON, not Save Page As.");
+  }
+  try {
+    return JSON.parse(text);
+  } catch (error) {
+    throw new Error(error?.message || "invalid JSON");
+  }
+}
+
 function bindProjectTabHandlers(context, tab) {
   const project = context.board;
 
@@ -628,19 +662,76 @@ function bindProjectTabHandlers(context, tab) {
       toast.success(`Renamed board to ${nextName}. Canonical slug unchanged: ${project.slug}`);
     });
 
-    $("#importSnapshotFile")?.addEventListener("change", async (event) => {
-      const file = event.currentTarget.files?.[0];
-      if (!file) return;
+    const importSnapshotFile = async (file, bodyForSnapshot) => {
       const text = await file.text();
-      const snapshot = JSON.parse(text);
-      await api("/api/admin/import", {
+      const snapshot = parseImportSnapshotText(text);
+      return api("/api/admin/import", {
         method: "POST",
-        body: { snapshot, replace_existing: true, board_id: project.id }
+        body: bodyForSnapshot(snapshot)
       });
-      await load();
-      state.detailMode = "settings";
-      toast.success("Board imported");
-      event.currentTarget.value = "";
+    };
+
+    const importSnapshotAsNewFile = $("#importSnapshotAsNewFile");
+    $("#importSnapshotAsNewButton")?.addEventListener("click", () => {
+      importSnapshotAsNewFile?.click();
+    });
+
+    importSnapshotAsNewFile?.addEventListener("change", async (event) => {
+      const input = event.currentTarget;
+      const file = input.files?.[0];
+      if (!file) return;
+      try {
+        const result = await importSnapshotFile(file, (snapshot) => ({ snapshot, create_new: true, board_id: project.id }));
+        state.boardId = result.imported_board_id;
+        state.boardSlug = result.imported_board_slug;
+        state.detailMode = "empty";
+        await load();
+        await navigate({ boardId: result.imported_board_id, view: "board" });
+        const counts = result.imported_counts || {};
+        const cardCount = Number.isFinite(Number(counts.tickets)) ? ` (${counts.tickets} cards)` : "";
+        toast.success(result.source_format === "trello-board-export" ? `Trello board imported as new board${cardCount}` : "Board imported as new board");
+      } catch (err) {
+        toast.error(`Import failed: ${err?.message || "invalid JSON"}`);
+      } finally {
+        input.value = "";
+      }
+    });
+
+    const replaceImportConfirmInput = $("#replaceImportConfirmInput");
+    const replaceCurrentBoardImportFile = $("#replaceCurrentBoardImportFile");
+    const replaceCurrentBoardImportButton = $("#replaceCurrentBoardImportButton");
+    replaceImportConfirmInput?.addEventListener("input", () => {
+      const disabled = replaceImportConfirmInput.value.trim() !== project.slug;
+      if (replaceCurrentBoardImportFile) replaceCurrentBoardImportFile.disabled = disabled;
+      if (replaceCurrentBoardImportButton) replaceCurrentBoardImportButton.disabled = disabled;
+    });
+
+    replaceCurrentBoardImportButton?.addEventListener("click", () => {
+      if (replaceCurrentBoardImportButton.disabled || replaceCurrentBoardImportFile?.disabled) return;
+      replaceCurrentBoardImportFile?.click();
+    });
+
+    replaceCurrentBoardImportFile?.addEventListener("change", async (event) => {
+      const input = event.currentTarget;
+      const file = input.files?.[0];
+      if (!file) return;
+      if (replaceImportConfirmInput.value.trim() !== project.slug) {
+        toast.error("Type the board slug before replacing this board.");
+        input.value = "";
+        return;
+      }
+      try {
+        const result = await importSnapshotFile(file, (snapshot) => ({ snapshot, replace_existing: true, board_id: project.id }));
+        await load();
+        state.detailMode = "settings";
+        const counts = result.imported_counts || {};
+        const cardCount = Number.isFinite(Number(counts.tickets)) ? ` (${counts.tickets} cards)` : "";
+        toast.success(result.source_format === "trello-board-export" ? `Trello board replaced from Trello import${cardCount}` : "Board replaced from snapshot");
+      } catch (err) {
+        toast.error(`Import failed: ${err?.message || "invalid JSON"}`);
+      } finally {
+        input.value = "";
+      }
     });
 
     $("#deleteBoardStart")?.addEventListener("click", async () => {
@@ -817,17 +908,39 @@ function bindProjectTabHandlers(context, tab) {
       });
     });
 
-    $("#agentInstructionsForm")?.addEventListener("submit", async (event) => {
-      event.preventDefault();
-      const form = new FormData(event.currentTarget);
-      await api(`/api/boards/${project.id}`, {
-        method: "PATCH",
-        body: Object.fromEntries(form.entries())
+    const instructionsEl = drawerInner.querySelector('[data-edit-field="agent_instructions"]');
+    if (instructionsEl) {
+      const edit = () =>
+        startInlineEdit(instructionsEl, {
+          fieldName: "agent_instructions",
+          multiline: true,
+          initialValue: project.agent_instructions || "",
+          ariaLabel: "Edit Agent Instructions",
+          rerender: async () => {
+            state.detailMode = "settings";
+            await renderProjectDetail();
+          },
+          commit: async (next) => {
+            await api(`/api/boards/${project.id}`, {
+              method: "PATCH",
+              body: { agent_instructions: cleanText(next) }
+            });
+            await load();
+            state.detailMode = "settings";
+            toast.success("Saved");
+          }
+        });
+      instructionsEl.addEventListener("click", (event) => {
+        event.preventDefault();
+        edit();
       });
-      await load();
-      state.detailMode = "settings";
-      toast.success("Saved");
-    });
+      instructionsEl.addEventListener("keydown", (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          edit();
+        }
+      });
+    }
 
     $("#aiEnabledToggle")?.addEventListener("change", async (event) => {
       const enabled = !!event.currentTarget.checked;
@@ -950,7 +1063,8 @@ function renderProjectEntries(entries = []) {
               <span>${escapeHtml(entry.created_by)} - ${formatDate(entry.created_at)}</span>
               <button
                 type="button"
-                class="ghost project-entry-strike"
+                data-variant="ghost"
+                class="project-entry-strike"
                 data-entry-action="toggle-struck"
                 data-entry-id="${escapeHtml(entry.id)}"
                 data-struck="${isStruck ? "true" : "false"}"
@@ -1018,14 +1132,14 @@ function renderLaneManager() {
             : "";
           return `
             <div class="lane-row${isAiReady ? " lane-row--locked" : ""}" data-lane-id="${lane.id}">
-              <button type="button" class="lane-icon-btn" data-lane-action="up" ${index === 0 ? "disabled" : ""} title="Move lane left" aria-label="Move lane left">↑</button>
-              <button type="button" class="lane-icon-btn" data-lane-action="down" ${index === lanes.length - 1 ? "disabled" : ""} title="Move lane right" aria-label="Move lane right">↓</button>
+              <button type="button" data-variant="ghost" class="settings-lane-icon-btn" data-lane-action="up" ${index === 0 ? "disabled" : ""} title="Move lane left" aria-label="Move lane left">↑</button>
+              <button type="button" data-variant="ghost" class="settings-lane-icon-btn" data-lane-action="down" ${index === lanes.length - 1 ? "disabled" : ""} title="Move lane right" aria-label="Move lane right">↓</button>
               <input name="name" value="${escapeHtml(lane.name)}" aria-label="Lane name" ${isAiReady ? `readonly title="${escapeHtml(nameTitle)}"` : ""} />
-              <button type="button" class="lane-new-toggle ${lane.is_default ? "is-on" : ""}" data-lane-action="toggle-default" aria-pressed="${lane.is_default ? "true" : "false"}" title="${lane.is_default ? "Default lane for new cards — click another lane to move it" : "Make this the default lane for new cards"}" aria-label="Default lane for new cards">
+              <button type="button" data-variant="${lane.is_default ? "secondary" : "ghost"}" class="settings-lane-new-toggle ${lane.is_default ? "is-on" : ""}" data-lane-action="toggle-default" aria-pressed="${lane.is_default ? "true" : "false"}" title="${lane.is_default ? "Default lane for new cards — click another lane to move it" : "Make this the default lane for new cards"}" aria-label="Default lane for new cards">
                 <span class="lane-new-sun" aria-hidden="true"></span>
                 <span class="lane-new-label">New</span>
               </button>
-              <button type="button" class="lane-delete-btn" data-lane-action="delete" ${deleteDisabled(lane, counts, aiEnabled) ? "disabled" : ""} title="${deleteTitle(lane, counts, aiEnabled)}" aria-label="Delete lane">×</button>
+              <button type="button" data-variant="ghost" class="settings-lane-delete-btn danger-button" data-lane-action="delete" ${deleteDisabled(lane, counts, aiEnabled) ? "disabled" : ""} title="${deleteTitle(lane, counts, aiEnabled)}" aria-label="Delete lane">×</button>
             </div>
           `;
         })
@@ -1054,9 +1168,11 @@ async function handleLaneAction(button) {
     if (wasOn) return;
     drawerInner.querySelectorAll('[data-lane-action="toggle-default"]').forEach((btn) => {
       btn.setAttribute("aria-pressed", "false");
+      btn.setAttribute("data-variant", "ghost");
       btn.classList.remove("is-on");
     });
     button.setAttribute("aria-pressed", "true");
+    button.setAttribute("data-variant", "secondary");
     button.classList.add("is-on");
     await updateLane(row, { silent: true });
     toast.success("Default lane updated");

package/public/js/ticket-detail.js

@@ -39,15 +39,15 @@ import { formatActorLabel, formatCommentAuthor } from "./actor-labels.js";
  * cache; otherwise leave the board DOM alone.
  */
 async function refreshTicketDetail(ticketId, { renderBoardAfter = false } = {}) {
-  state.selectedTicketId = ticketId;
-  state.detailMode = "ticket";
   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 || [] });
 }
 
@@ -71,11 +71,62 @@ async function patchTicket(ticketId, body) {
  *   - 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 {
@@ -84,15 +135,20 @@ export function startInlineEdit(node, opts) {
     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 = initialValue;
+  editor.value = initialString;
   if (fieldName) editor.setAttribute("data-editing-field", fieldName);
   if (ariaLabel) editor.setAttribute("aria-label", ariaLabel);
   if (!multiline) {
@@ -101,13 +157,22 @@ export function startInlineEdit(node, opts) {
     editor.autocomplete = "off";
     editor.spellcheck = true;
   } else {
-    editor.rows = Math.max(3, String(initialValue).split("\n").length + 1);
+    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);
-  editor.focus();
-  if (!multiline) editor.select();
-  else editor.setSelectionRange(editor.value.length, editor.value.length);
+  focusWithoutScrolling(editor);
+  if (!multiline) {
+    editor.select();
+  } else {
+    const selectionStart = clickedCaretOffset ?? 0;
+    editor.setSelectionRange(selectionStart, selectionStart);
+    restoreInlineEditScroll(scrollState, editor);
+  }
 
   let done = false;
 
@@ -115,11 +180,9 @@ export function startInlineEdit(node, opts) {
     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.
+  // 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;
@@ -209,12 +272,13 @@ function wireTicketDetailEditors(ticket) {
   }
 
   const descEl = drawerInner.querySelector('[data-edit-field="description"]');
-  const editDescription = () =>
+  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) })
     });
@@ -222,7 +286,7 @@ function wireTicketDetailEditors(ticket) {
   if (descEl) {
     descEl.addEventListener("click", (event) => {
       event.preventDefault();
-      editDescription();
+      editDescription(event);
     });
     descEl.addEventListener("keydown", (event) => {
       if (event.key === "Enter" || event.key === " ") {
@@ -245,18 +309,19 @@ function wireTicketDetailEditors(ticket) {
   for (const { key, label } of AI_FIELDS) {
     const fieldEl = drawerInner.querySelector(`[data-edit-field="${key}"]`);
     if (!fieldEl) continue;
-    const edit = () =>
+    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();
+      edit(event);
     });
     fieldEl.addEventListener("keydown", (event) => {
       if (event.key === "Enter" || event.key === " ") {
@@ -337,23 +402,26 @@ export async function renderDetail(options = {}) {
     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/${state.selectedTicketId}/context?depth=1`)),
+      : api(withBoardQuery(`/api/tickets/${requestedTicketId}/context?depth=1`)),
     hasOption("statusHistory")
       ? Promise.resolve(options.statusHistory)
-      : api(withBoardQuery(`/api/tickets/${state.selectedTicketId}/history`)),
+      : api(withBoardQuery(`/api/tickets/${requestedTicketId}/history`)),
     hasOption("comments")
       ? Promise.resolve(options.comments)
-      : api(withBoardQuery(`/api/tickets/${state.selectedTicketId}/comments`)).then((result) => result.comments || []),
+      : api(withBoardQuery(`/api/tickets/${requestedTicketId}/comments`)).then((result) => result.comments || []),
     hasOption("attachmentList")
       ? Promise.resolve(options.attachmentList)
       : features.attachments
-        ? api(withBoardQuery(`/api/tickets/${state.selectedTicketId}/attachments`)).catch(() => ({ 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
@@ -412,9 +480,9 @@ export async function renderDetail(options = {}) {
   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 state-pill-${escapeHtml(stateClass)} meta-select" data-meta-field="state_id" aria-label="Ticket state">${stateOptions}</select>
+      <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 priority-pill-${escapeHtml(priorityKey)} meta-select" data-meta-field="priority" aria-label="Ticket priority">${priorityOptions}</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>
   `;
 
@@ -1042,7 +1110,7 @@ export function renderDetailCard(ticket, options = {}) {
       ? `<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)}"${options.disableOpen ? "" : ` data-open-ticket="${escapeHtml(ticket.id)}"`}>
+    <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}
@@ -1054,7 +1122,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>
+          <span class="detail-card-state" data-variant="${escapeHtml(stateClass)}">${escapeHtml(ticket.state_name || "State")}</span>
           ${state.showPriority ? renderPriorityPill(ticket.priority) : ""}
         </div>
       </div>