@starlove/orbit 1.1.2 → 1.1.11

package/public/js/drawer.js

@@ -36,19 +36,9 @@ export function closeDrawer() {
     drawer.hidden = true;
     drawerBackdrop.hidden = true;
     drawerInner.innerHTML = "";
-    const eyebrowEl = document.getElementById("drawerEyebrow");
-    const titleEl = document.getElementById("drawerTitle");
-    const subtitleEl = document.getElementById("drawerSubtitle");
+    const titleBlockEl = document.getElementById("drawerTitleBlock");
     const tabsEl = document.getElementById("drawerTabs");
-    if (eyebrowEl) { eyebrowEl.textContent = ""; eyebrowEl.hidden = true; }
-    if (titleEl) {
-      for (const attr of Array.from(titleEl.attributes)) {
-        if (attr.name !== "id") titleEl.removeAttribute(attr.name);
-      }
-      titleEl.className = "drawer-title-text";
-      titleEl.textContent = "";
-    }
-    if (subtitleEl) { subtitleEl.innerHTML = ""; subtitleEl.hidden = true; }
+    if (titleBlockEl) titleBlockEl.innerHTML = "";
     if (tabsEl) { tabsEl.innerHTML = ""; tabsEl.hidden = true; }
     drawer.classList.remove("is-wide");
   };
@@ -77,40 +67,24 @@ export function closeDrawer() {
 export function renderDrawerShell({ eyebrow, title, titleAttrs, subtitleHtml, tabs, activeTab, onTabSelect, body, mode }) {
   drawer.classList.toggle("is-settings", mode === "settings");
   drawer.classList.toggle("is-wide", mode === "ticket" || mode === "settings");
-  const eyebrowEl = document.getElementById("drawerEyebrow");
-  const titleEl = document.getElementById("drawerTitle");
-  const subtitleEl = document.getElementById("drawerSubtitle");
+  const titleBlockEl = document.getElementById("drawerTitleBlock");
   const tabsEl = document.getElementById("drawerTabs");
 
-  if (eyebrow) {
-    eyebrowEl.textContent = eyebrow;
-    eyebrowEl.hidden = false;
-  } else {
-    eyebrowEl.textContent = "";
-    eyebrowEl.hidden = true;
-  }
-
-  if (subtitleHtml) {
-    subtitleEl.innerHTML = subtitleHtml;
-    subtitleEl.hidden = false;
-  } else {
-    subtitleEl.innerHTML = "";
-    subtitleEl.hidden = true;
-  }
-
-  // Reset prior edit-attrs / classes each render so different modes don't
-  // carry state from one another.
-  for (const attr of Array.from(titleEl.attributes)) {
-    if (attr.name !== "id") titleEl.removeAttribute(attr.name);
-  }
-  titleEl.className = "drawer-title-text";
-  if (titleAttrs) {
-    for (const [key, value] of Object.entries(titleAttrs)) {
-      if (key === "class") titleEl.className = `drawer-title-text ${value}`;
-      else titleEl.setAttribute(key, value);
-    }
+  // Rebuild the eyebrow / title / subtitle wholesale each render. Like
+  // drawerInner.innerHTML below, this means any listeners the caller attached
+  // last render (e.g. the inline title editor's click handler) die with the
+  // old nodes, instead of stacking on persistent shell elements.
+  const extraTitleClass = titleAttrs?.class ? ` ${titleAttrs.class}` : "";
+  let titleAttrHtml = ` class="drawer-title-text${extraTitleClass}"`;
+  for (const [key, value] of Object.entries(titleAttrs || {})) {
+    if (key === "class") continue;
+    titleAttrHtml += ` ${key}="${escapeHtml(String(value))}"`;
   }
-  titleEl.textContent = title ?? "";
+  const segments = [];
+  if (eyebrow) segments.push(`<span class="drawer-eyebrow">${escapeHtml(eyebrow)}</span>`);
+  segments.push(`<h2${titleAttrHtml}>${escapeHtml(title ?? "")}</h2>`);
+  if (subtitleHtml) segments.push(`<div class="drawer-subtitle">${subtitleHtml}</div>`);
+  titleBlockEl.innerHTML = segments.join("");
 
   if (tabs && tabs.length) {
     tabsEl.hidden = false;

package/public/js/format.js

@@ -11,9 +11,9 @@ export function escapeHtml(value) {
 }
 
 // UTF-8 bytes mis-decoded as CP-437 (the typical Windows-tmux artifact).
-// Ported from aeva-dashboard's fix-newlines tool — every entry is
-// [mojibake sequence, what it should have been]. Long sequences first so
-// shorter prefixes do not eat them.
+// Ported from a local fix-newlines utility — every entry is [mojibake sequence,
+// what it should have been]. Long sequences first so shorter prefixes do not
+// eat them.
 const MOJIBAKE_REPLACEMENTS = [
   // General Punctuation (UTF-8 E2 80 XX → CP-437 "ΓÇ" + glyph)
   ["ΓÇô", "–"],
@@ -84,8 +84,8 @@ const MOJIBAKE_REPLACEMENTS = [
   ["┬º", "§"],
   ["┬╖", "·"],
 
-  // Stray curly quotes that survived as proper Unicode — Bruce writes with
-  // ASCII straight quotes, so normalize for consistency.
+  // Stray curly quotes that survived as proper Unicode; normalize to ASCII
+  // straight quotes so pasted terminal/log text stays consistent.
   ["“", '"'],
   ["”", '"'],
   ["‘", "'"],

package/public/js/kanban.js

@@ -19,106 +19,162 @@ import { api, withBoardQuery } from "./api.js";
 import { navigate } from "./router.js";
 import { closeCreateFlyout, openCreateFlyout } from "./create-card.js";
 import { load } from "./app.js";
-import { bindCardContextMenu, closeCardActionMenu, createCardActionHandlers, setCardActionDragInFlight } from "./card-actions.js";
+import { bindCardContextMenuDelegated, closeCardActionMenu, createCardActionHandlers, setCardActionDragInFlight } from "./card-actions.js";
 import { unreadCount } from "./unread.js";
 
+// Lookup for the current board's tickets, keyed by id. Refreshed on every
+// renderBoard() so the single, persistent set of delegated listeners can
+// resolve a card's ticket in O(1) without re-binding anything per render.
+let boardTicketsById = new Map();
+// Created once (lazily) and reused — handlers are stateless w.r.t. a given card.
+let cardActionHandlers = null;
+// HTML5 DnD ends with a synthetic click on the drag source; this flag lets the
+// delegated click handler swallow that one click so a drop doesn't also open
+// the ticket drawer. Module-scoped because there's now one shared listener.
+let suppressClickAfterDrag = false;
+
+// renderBoard() is hot: it runs on every drag-drop, every SSE board event, and
+// every settings toggle. Keep it to a single innerHTML write plus a Map refresh.
+// All interaction wiring lives in enableKanbanInteractions(), attached ONCE to
+// the persistent `kanban` element (see below), so re-rendering never re-binds
+// per-card/column/button listeners or rescans the ticket list.
 export function renderBoard() {
   const states = visibleStatesForProject();
   const tickets = ticketsForProject();
+  boardTicketsById = new Map(tickets.map((ticket) => [ticket.id, ticket]));
   kanban.innerHTML = states.map((column) => renderColumn(column, tickets)).join("");
+}
 
-  kanban.querySelectorAll(".column").forEach((column) => {
-    column.addEventListener("dragover", (event) => {
-      event.preventDefault();
-      column.classList.add("drag-over");
-    });
-    column.addEventListener("dragleave", () => column.classList.remove("drag-over"));
-    column.addEventListener("drop", async (event) => {
-      event.preventDefault();
-      column.classList.remove("drag-over");
-      const ticketId = event.dataTransfer.getData("text/plain");
-      if (!ticketId) return;
-      closeCreateFlyout();
-      await api(withBoardQuery(`/api/tickets/${ticketId}`), {
-        method: "PATCH",
-        body: { state_id: column.dataset.stateId }
-      });
-      // Refresh board only; do not open the ticket drawer (DnD also fires a
-      // synthetic click on the card — suppressed in the card listener).
-      await load();
-    });
+function toggleCardExpansion(card) {
+  if (!card) return;
+  const id = card.dataset.ticketId;
+  const willExpand = !state.expandedCardIds.has(id);
+  if (willExpand) {
+    state.expandedCardIds.add(id);
+    // Build the expandable body (markdown parse + labels + relations) the first
+    // time a card opens. Collapsed cards — the overwhelming majority on render —
+    // never pay this cost. Once built it stays cached in the DOM for re-toggles.
+    if (!card.querySelector(".card-expandable")) {
+      const ticket = boardTicketsById.get(id);
+      const meta = card.querySelector(".card-meta");
+      if (ticket && meta) meta.insertAdjacentHTML("afterend", renderCardExpandable(ticket));
+    }
+  } else {
+    state.expandedCardIds.delete(id);
+  }
+  card.classList.toggle("is-expanded", willExpand);
+  const toggleBtn = card.querySelector("button.card-expand-trigger");
+  if (toggleBtn) toggleBtn.setAttribute("aria-expanded", willExpand ? "true" : "false");
+}
+
+// One-time setup: attach delegated listeners to the persistent board container.
+// Because events bubble to `kanban`, these survive every innerHTML swap, so
+// renderBoard() does zero listener work regardless of card count.
+export function enableKanbanInteractions() {
+  cardActionHandlers = cardActionHandlers || createCardActionHandlers({ navigator: navigate });
+
+  // --- Drag & drop (HTML5 DnD events bubble, so one set covers all cards) ---
+  let dragOverColumn = null;
+  const setDragOverColumn = (column) => {
+    if (dragOverColumn === column) return;
+    if (dragOverColumn) dragOverColumn.classList.remove("drag-over");
+    dragOverColumn = column;
+    if (dragOverColumn) dragOverColumn.classList.add("drag-over");
+  };
+
+  kanban.addEventListener("dragstart", (event) => {
+    const card = event.target instanceof Element ? event.target.closest(".card") : null;
+    if (!card) return;
+    closeCardActionMenu();
+    setCardActionDragInFlight(true);
+    event.dataTransfer.setData("text/plain", card.dataset.ticketId);
+    event.dataTransfer.effectAllowed = "move";
   });
 
-  kanban.querySelectorAll("[data-add-to-state]").forEach((btn) => {
-    btn.addEventListener("click", (event) => {
-      event.stopPropagation();
-      openCreateFlyout(btn.dataset.addToState || "");
-    });
+  kanban.addEventListener("dragover", (event) => {
+    const column = event.target instanceof Element ? event.target.closest(".column") : null;
+    if (!column) return;
+    event.preventDefault();
+    setDragOverColumn(column);
   });
 
-  kanban.querySelectorAll(".epic-mini-header[data-ticket-id]").forEach((header) => {
-    header.addEventListener("click", () => {
-      closeCreateFlyout();
-      navigate({
-        boardId: state.boardId,
-        view: "ticket",
-        ticketId: header.dataset.ticketId
-      });
+  kanban.addEventListener("dragend", () => {
+    setCardActionDragInFlight(false);
+    setDragOverColumn(null);
+    suppressClickAfterDrag = true;
+    // If no synthetic click follows (e.g. drag cancelled oddly), don't eat the
+    // next real click.
+    setTimeout(() => {
+      suppressClickAfterDrag = false;
+    }, 0);
+  });
+
+  kanban.addEventListener("drop", async (event) => {
+    const column = event.target instanceof Element ? event.target.closest(".column") : null;
+    if (!column) return;
+    event.preventDefault();
+    setDragOverColumn(null);
+    const ticketId = event.dataTransfer.getData("text/plain");
+    if (!ticketId) return;
+    closeCreateFlyout();
+    await api(withBoardQuery(`/api/tickets/${ticketId}`), {
+      method: "PATCH",
+      body: { state_id: column.dataset.stateId }
     });
+    // Refresh board only; do not open the ticket drawer (DnD also fires a
+    // synthetic click on the card — suppressed by suppressClickAfterDrag).
+    await load();
   });
 
-  const cardActionHandlers = createCardActionHandlers({ navigator: navigate });
-  kanban.querySelectorAll(".card").forEach((card) => {
-    const ticket = tickets.find((item) => item.id === card.dataset.ticketId);
-    if (ticket) bindCardContextMenu(card, ticket, { handlers: cardActionHandlers, onBeforeOpen: closeCreateFlyout });
-    // HTML5 DnD ends with a synthetic click on the source element; ignore that
-    // follow-up click so dropping a card does not also open the detail drawer.
-    let suppressClickAfterDrag = false;
-    card.addEventListener("click", async (event) => {
-      const clickTarget = event.target instanceof Element ? event.target : event.target?.parentElement;
-      if (clickTarget?.closest("a")) {
-        event.stopPropagation();
-        return;
-      }
-      if (suppressClickAfterDrag) {
-        suppressClickAfterDrag = false;
-        event.preventDefault();
-        event.stopPropagation();
-        return;
-      }
+  // --- Clicks (precedence: add-button > expand toggle > link > epic header > card) ---
+  kanban.addEventListener("click", (event) => {
+    const target = event.target instanceof Element ? event.target : event.target?.parentElement;
+    if (!target) return;
+
+    const addBtn = target.closest("[data-add-to-state]");
+    if (addBtn) {
+      event.stopPropagation();
+      openCreateFlyout(addBtn.dataset.addToState || "");
+      return;
+    }
+
+    const toggle = target.closest("button.card-expand-trigger");
+    if (toggle) {
+      event.stopPropagation();
+      event.preventDefault();
+      toggleCardExpansion(toggle.closest(".card"));
+      return;
+    }
+
+    // Anchors inside a card keep their native behavior.
+    if (target.closest("a")) {
+      event.stopPropagation();
+      return;
+    }
+
+    const epicHeader = target.closest(".epic-mini-header[data-ticket-id]");
+    if (epicHeader) {
       closeCreateFlyout();
-      navigate({
-        boardId: state.boardId,
-        view: "ticket",
-        ticketId: card.dataset.ticketId
-      });
-    });
-    const toggleBtn = card.querySelector("button.card-expand-trigger");
-    if (toggleBtn) {
-      toggleBtn.addEventListener("click", (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        const id = card.dataset.ticketId;
-        if (state.expandedCardIds.has(id)) state.expandedCardIds.delete(id);
-        else state.expandedCardIds.add(id);
-        const expanded = card.classList.toggle("is-expanded");
-        toggleBtn.setAttribute("aria-expanded", expanded ? "true" : "false");
-      });
+      navigate({ boardId: state.boardId, view: "ticket", ticketId: epicHeader.dataset.ticketId });
+      return;
     }
-    card.addEventListener("dragstart", (event) => {
-      closeCardActionMenu();
-      setCardActionDragInFlight(true);
-      event.dataTransfer.setData("text/plain", card.dataset.ticketId);
-      event.dataTransfer.effectAllowed = "move";
-    });
-    card.addEventListener("dragend", () => {
-      setCardActionDragInFlight(false);
-      suppressClickAfterDrag = true;
-      // If no click follows (e.g. drag cancelled oddly), do not eat the next real click.
-      setTimeout(() => {
-        suppressClickAfterDrag = false;
-      }, 0);
-    });
+
+    const card = target.closest(".card");
+    if (!card) return;
+    if (suppressClickAfterDrag) {
+      suppressClickAfterDrag = false;
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    closeCreateFlyout();
+    navigate({ boardId: state.boardId, view: "ticket", ticketId: card.dataset.ticketId });
+  });
+
+  // --- Context menu ---
+  bindCardContextMenuDelegated(kanban, (id) => boardTicketsById.get(id), {
+    handlers: cardActionHandlers,
+    onBeforeOpen: closeCreateFlyout
   });
 }
 
@@ -388,18 +444,27 @@ function renderCard(ticket, { asEpicChild = false } = {}) {
           : `<div class="card-expand-trigger card-expand-trigger--static">${triggerInner}</div>`}
       </div>
 
-      ${hasExpandable ? `
-        <div class="card-expandable">
-          ${hasDescription ? `<div class="card-description markdown-body">${renderMarkdown(ticket.description)}</div>` : ""}
-          ${renderLabels(ticket.labels)}
-          ${ticket.parent_ticket ? `<div class="parent-line">-> ${escapeHtml(ticketLabel(ticket.parent_ticket))}</div>` : ""}
-          ${ticket.child_count ? `<div class="child-count">${ticket.child_count} feature${ticket.child_count === 1 ? "" : "s"} inside</div>` : ""}
-        </div>
-      ` : ""}
+      ${hasExpandable && isExpanded ? renderCardExpandable(ticket) : ""}
     </article>
   `;
 }
 
+// The expandable body holds the only genuinely expensive per-card work: a full
+// markdown parse of the description. It's rendered eagerly only for cards that
+// are already expanded; collapsed cards get it injected on first open (see
+// toggleCardExpansion). Kept as its own function so both paths share one source.
+function renderCardExpandable(ticket) {
+  const hasDescription = Boolean(String(ticket.description || "").trim());
+  return `
+    <div class="card-expandable">
+      ${hasDescription ? `<div class="card-description markdown-body">${renderMarkdown(ticket.description)}</div>` : ""}
+      ${renderLabels(ticket.labels)}
+      ${ticket.parent_ticket ? `<div class="parent-line">-> ${escapeHtml(ticketLabel(ticket.parent_ticket))}</div>` : ""}
+      ${ticket.child_count ? `<div class="child-count">${ticket.child_count} feature${ticket.child_count === 1 ? "" : "s"} inside</div>` : ""}
+    </div>
+  `;
+}
+
 /**
  * Click-and-drag horizontal panning on the kanban container.
  * Skipped when the pointer starts on a .card (cards own their own click + HTML5 DnD),

package/public/js/main.js

@@ -36,7 +36,7 @@ import {
   closeCreateFlyout,
   isCreateFlyoutOpen
 } from "./create-card.js";
-import { enableKanbanDragScroll } from "./kanban.js";
+import { enableKanbanDragScroll, enableKanbanInteractions } from "./kanban.js";
 import { runSearch, hideSearch } from "./search.js";
 import { load } from "./app.js";
 import { edition } from "./config.js";
@@ -131,6 +131,7 @@ async function init() {
   });
 
   enableKanbanDragScroll();
+  enableKanbanInteractions();
 
   const initialRoute = currentRoute();
   if (initialRoute.boardSlug) state.boardSlug = initialRoute.boardSlug;

package/public/js/motion-preference.js

@@ -47,7 +47,18 @@ export function applyReducedMotionPreference({
   storage = safeStorage(),
   mediaMatcher = defaultMediaMatcher
 } = {}) {
-  const reduce = effectiveReducedMotionPreference({ storage, mediaMatcher });
-  doc?.documentElement?.setAttribute("data-reduced-motion", reduce ? "reduce" : "allow");
-  return reduce;
+  // Starscape v3 `data-motion` contract (three-state; shared with the
+  // ui-system-v3 package and ss-nebula). Replaces the legacy two-state
+  // `data-reduced-motion="reduce|allow"`:
+  //   • stored reduce → data-motion="reduce" (always reduce)
+  //   • stored allow  → data-motion="full"   (ignore OS reduce)
+  //   • no stored pref → no attribute        (follow OS prefers-reduced-motion)
+  const root = doc?.documentElement;
+  const stored = storedReducedMotionPreference(storage);
+  if (root) {
+    if (stored === true) root.setAttribute("data-motion", "reduce");
+    else if (stored === false) root.setAttribute("data-motion", "full");
+    else root.removeAttribute("data-motion");
+  }
+  return effectiveReducedMotionPreference({ storage, mediaMatcher });
 }

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>
   `;
 }
@@ -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" />
@@ -394,8 +405,23 @@ function renderProjectRepositoryTab(context) {
       <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>
+          <input type="file" id="importSnapshotAsNewFile" accept=".orbit.json,.json,application/json" />
+          <span>Import as New Board</span>
+        </label>
+      </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">
+        <label class="import-button danger-button">
+          <input type="file" id="replaceCurrentBoardImportFile" accept=".orbit.json,.json,application/json" disabled />
+          <span>Replace Current Board</span>
         </label>
       </div>
     </div>
@@ -599,6 +625,18 @@ function renderProjectJournalTab(context) {
   `;
 }
 
+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 +666,63 @@ 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 = "";
+    };
+
+    $("#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");
+    replaceImportConfirmInput?.addEventListener("input", () => {
+      if (replaceCurrentBoardImportFile) replaceCurrentBoardImportFile.disabled = replaceImportConfirmInput.value.trim() !== project.slug;
+    });
+
+    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 +899,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;