@starlove/orbit 1.1.1 → 1.1.11

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;

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