@starlove/orbit 1.3.5 → 1.4.0

package/public/js/board-export.js

@@ -0,0 +1,161 @@
+// Board snapshot export: builds a ZIP of every board's `.orbit.json` and
+// triggers a browser download. Extracted from board-menu.js so both the Board
+// flyout's "Export All" and Settings → Appearance's "Back up all boards" can
+// reuse the exact same archive without importing the heavier board-menu module
+// (which would create a settings ↔ board-menu import cycle). Depends only on
+// state/api/toast, so it stays safe to import from anywhere.
+
+import { state } from "./state.js";
+import { api } from "./api.js";
+import { toast } from "./toast.js";
+
+const crcTable = Array.from({ length: 256 }, (_, index) => {
+  let crc = index;
+  for (let bit = 0; bit < 8; bit += 1) {
+    crc = crc & 1 ? 0xedb88320 ^ (crc >>> 1) : crc >>> 1;
+  }
+  return crc >>> 0;
+});
+
+function crc32(bytes) {
+  let crc = 0xffffffff;
+  for (const byte of bytes) crc = crcTable[(crc ^ byte) & 0xff] ^ (crc >>> 8);
+  return (crc ^ 0xffffffff) >>> 0;
+}
+
+function writeUint16(bytes, value) {
+  bytes.push(value & 0xff, (value >>> 8) & 0xff);
+}
+
+function writeUint32(bytes, value) {
+  bytes.push(value & 0xff, (value >>> 8) & 0xff, (value >>> 16) & 0xff, (value >>> 24) & 0xff);
+}
+
+function zipDateTime(date = new Date()) {
+  return {
+    time:
+      ((date.getHours() & 0x1f) << 11) |
+      ((date.getMinutes() & 0x3f) << 5) |
+      (Math.floor(date.getSeconds() / 2) & 0x1f),
+    date:
+      (((date.getFullYear() - 1980) & 0x7f) << 9) |
+      (((date.getMonth() + 1) & 0xf) << 5) |
+      (date.getDate() & 0x1f)
+  };
+}
+
+export function createZip(files) {
+  const encoder = new TextEncoder();
+  const localParts = [];
+  const centralParts = [];
+  let offset = 0;
+  const timestamp = zipDateTime();
+
+  files.forEach((file) => {
+    const nameBytes = encoder.encode(file.name);
+    const dataBytes = encoder.encode(file.content);
+    const checksum = crc32(dataBytes);
+    const localHeader = [];
+    writeUint32(localHeader, 0x04034b50);
+    writeUint16(localHeader, 20);
+    writeUint16(localHeader, 0x0800);
+    writeUint16(localHeader, 0);
+    writeUint16(localHeader, timestamp.time);
+    writeUint16(localHeader, timestamp.date);
+    writeUint32(localHeader, checksum);
+    writeUint32(localHeader, dataBytes.length);
+    writeUint32(localHeader, dataBytes.length);
+    writeUint16(localHeader, nameBytes.length);
+    writeUint16(localHeader, 0);
+    localParts.push(new Uint8Array(localHeader), nameBytes, dataBytes);
+
+    const centralHeader = [];
+    writeUint32(centralHeader, 0x02014b50);
+    writeUint16(centralHeader, 20);
+    writeUint16(centralHeader, 20);
+    writeUint16(centralHeader, 0x0800);
+    writeUint16(centralHeader, 0);
+    writeUint16(centralHeader, timestamp.time);
+    writeUint16(centralHeader, timestamp.date);
+    writeUint32(centralHeader, checksum);
+    writeUint32(centralHeader, dataBytes.length);
+    writeUint32(centralHeader, dataBytes.length);
+    writeUint16(centralHeader, nameBytes.length);
+    writeUint16(centralHeader, 0);
+    writeUint16(centralHeader, 0);
+    writeUint16(centralHeader, 0);
+    writeUint16(centralHeader, 0);
+    writeUint32(centralHeader, 0);
+    writeUint32(centralHeader, offset);
+    centralParts.push(new Uint8Array(centralHeader), nameBytes);
+
+    offset += localHeader.length + nameBytes.length + dataBytes.length;
+  });
+
+  const centralOffset = offset;
+  const centralSize = centralParts.reduce((sum, part) => sum + part.length, 0);
+  const endHeader = [];
+  writeUint32(endHeader, 0x06054b50);
+  writeUint16(endHeader, 0);
+  writeUint16(endHeader, 0);
+  writeUint16(endHeader, files.length);
+  writeUint16(endHeader, files.length);
+  writeUint32(endHeader, centralSize);
+  writeUint32(endHeader, centralOffset);
+  writeUint16(endHeader, 0);
+
+  return new Blob([...localParts, ...centralParts, new Uint8Array(endHeader)], { type: "application/zip" });
+}
+
+export function downloadBlob(filename, blob) {
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  URL.revokeObjectURL(url);
+}
+
+export function safeExportName(board, usedNames) {
+  const base = String(board?.slug || board?.name || board?.id || "board")
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9._-]+/g, "-")
+    .replace(/^-+|-+$/g, "") || "board";
+  let name = `${base}.orbit.json`;
+  let suffix = 2;
+  while (usedNames.has(name)) {
+    name = `${base}-${suffix}.orbit.json`;
+    suffix += 1;
+  }
+  usedNames.add(name);
+  return name;
+}
+
+/** Export every board the actor can see as a single ZIP of `.orbit.json`
+ *  snapshots. Resolves `true` once the download starts, `false` if there are
+ *  no boards. Throws on a failed export request so callers can surface it. */
+export async function exportAllBoards({ includeAttachments = false } = {}) {
+  const boards = state.data?.boards || [];
+  if (!boards.length) {
+    toast.error("No boards to export");
+    return false;
+  }
+  const suffix = includeAttachments ? "?include_attachments=true" : "";
+  const usedNames = new Set();
+  const files = [];
+  for (const board of boards) {
+    const snapshot = await api(`/api/boards/${encodeURIComponent(board.id)}/export${suffix}`);
+    files.push({
+      name: safeExportName(board, usedNames),
+      content: JSON.stringify(snapshot, null, 2)
+    });
+  }
+  const archive = createZip(files);
+  const date = new Date().toISOString().slice(0, 10);
+  downloadBlob(`orbit-boards-${date}${includeAttachments ? ".with-images" : ""}.zip`, archive);
+  toast.success(`Exported ${files.length} board${files.length === 1 ? "" : "s"}`);
+  return true;
+}

package/public/js/board-menu.js

@@ -11,11 +11,15 @@ import { closeCreateFlyout } from "./create-card.js";
 import { toast } from "./toast.js";
 import { load } from "./app.js";
 import { features } from "./config.js";
+import { exportAllBoards } from "./board-export.js";
+
+let boardFlyoutView = "list";
 
 export function closeBoardFlyout() {
   if (!boardFlyout) return;
   boardFlyout.hidden = true;
   boardFlyout.innerHTML = "";
+  boardFlyoutView = "list";
   boardMenuBtn?.setAttribute("aria-expanded", "false");
 }
 
@@ -32,8 +36,8 @@ const boardChipIcon = `
     fill="none"
     aria-hidden="true"
   >
-    <rect x="4" y="4" width="6" height="16" rx="0.75" stroke="currentColor" stroke-width="2" />
-    <rect x="14" y="4" width="6" height="16" rx="0.75" stroke="currentColor" stroke-width="2" />
+    <rect x="4" y="2" width="6" height="20" rx="0.75" stroke="currentColor" stroke-width="2" />
+    <rect x="14" y="2" width="6" height="20" rx="0.75" stroke="currentColor" stroke-width="2" />
   </svg>`;
 
 export function updateTopbarChips() {
@@ -46,6 +50,88 @@ export function updateTopbarChips() {
   }
 }
 
+async function inflateZipEntry(bytes) {
+  if (typeof DecompressionStream === "undefined") {
+    throw new Error("Compressed ZIP entries are not supported in this browser.");
+  }
+  const stream = new Blob([bytes]).stream().pipeThrough(new DecompressionStream("deflate-raw"));
+  return new Uint8Array(await new Response(stream).arrayBuffer());
+}
+
+function parseImportSnapshotText(text, filename = "snapshot") {
+  const trimmed = String(text || "").trimStart();
+  if (trimmed.startsWith("<")) throw new Error(`${filename} looks like HTML instead of JSON.`);
+  try {
+    const snapshot = JSON.parse(text);
+    if (!snapshot?.board) throw new Error("snapshot_missing_board");
+    return snapshot;
+  } catch (error) {
+    throw new Error(`${filename}: ${error?.message || "invalid JSON"}`);
+  }
+}
+
+async function readZipSnapshots(file) {
+  const buffer = await file.arrayBuffer();
+  const view = new DataView(buffer);
+  const bytes = new Uint8Array(buffer);
+  const decoder = new TextDecoder();
+  const snapshots = [];
+  let offset = 0;
+
+  while (offset + 30 <= bytes.length) {
+    const signature = view.getUint32(offset, true);
+    if (signature === 0x02014b50 || signature === 0x06054b50) break;
+    if (signature !== 0x04034b50) throw new Error("Invalid ZIP archive.");
+
+    const flags = view.getUint16(offset + 6, true);
+    const method = view.getUint16(offset + 8, true);
+    const compressedSize = view.getUint32(offset + 18, true);
+    const filenameLength = view.getUint16(offset + 26, true);
+    const extraLength = view.getUint16(offset + 28, true);
+    const nameStart = offset + 30;
+    const dataStart = nameStart + filenameLength + extraLength;
+    const dataEnd = dataStart + compressedSize;
+    if (flags & 0x0008) throw new Error("ZIP entries with data descriptors are not supported.");
+    if (dataEnd > bytes.length) throw new Error("Invalid ZIP archive.");
+
+    const name = decoder.decode(bytes.slice(nameStart, nameStart + filenameLength));
+    if (!name.endsWith("/")) {
+      if (!name.toLowerCase().endsWith(".orbit.json")) {
+        throw new Error("ZIP imports may contain only .orbit.json files.");
+      }
+      const compressed = bytes.slice(dataStart, dataEnd);
+      const data = method === 0 ? compressed : method === 8 ? await inflateZipEntry(compressed) : null;
+      if (!data) throw new Error("Unsupported ZIP compression method.");
+      snapshots.push(parseImportSnapshotText(decoder.decode(data), name));
+    }
+
+    offset = dataEnd;
+  }
+
+  if (!snapshots.length) throw new Error("ZIP archive did not contain any .orbit.json snapshots.");
+  return snapshots;
+}
+
+async function readImportSnapshots(file) {
+  const name = String(file?.name || "").toLowerCase();
+  if (name.endsWith(".zip")) return readZipSnapshots(file);
+  if (name.endsWith(".orbit.json")) return [parseImportSnapshotText(await file.text(), file.name)];
+  throw new Error("Choose a .zip archive or a single .orbit.json snapshot.");
+}
+
+function renderBoardFlyoutHeader() {
+  const showListButton = boardFlyoutView !== "list";
+  const newLabel = showListButton ? "List" : "New";
+  return `
+    <div class="menu-flyout-head menu-flyout-head--actions">
+      <span>Board</span>
+      <span class="menu-flyout-actions">
+        ${features.multiBoard ? `<button type="button" data-variant="ghost" data-board-view="${showListButton ? "list" : "new"}">${newLabel}</button>` : ""}
+        <button type="button" data-variant="ghost" data-board-view="export">Export</button>
+      </span>
+    </div>`;
+}
+
 function renderBoardFlyoutInner() {
   const boards = state.data.boards || [];
   const rows = boards
@@ -60,10 +146,10 @@ function renderBoardFlyoutInner() {
   const listBody =
     rows ||
     `<p class="menu-flyout-hint menu-flyout-hint--empty">No boards yet. Create one below if you can.</p>`;
-  const createBlock = features.multiBoard
-    ? `
+  const listBlock = `<div class="menu-flyout-list">${listBody}</div>`;
+  const createBlock = `
     <div class="menu-flyout-section">
-      <h3 class="menu-flyout-heading">New board</h3>
+      <h3 class="menu-flyout-heading">New Board</h3>
       <form id="createBoardForm" class="menu-flyout-form">
         <input name="name" type="text" required placeholder="Board name" autocomplete="off" />
         <div class="folder-picker-field">
@@ -78,20 +164,57 @@ function renderBoardFlyoutInner() {
           </label>
         </div>
         <input name="slug" type="text" placeholder="Slug (optional)" autocomplete="off" />
-        <input name="default_branch" type="text" placeholder="Default branch (optional)" autocomplete="off" />
-        <input name="repo_url" type="text" placeholder="Repo URL (optional)" autocomplete="off" />
         <button type="submit">Create board</button>
       </form>
-    </div>`
-    : "";
+    </div>`;
+  const exportBlock = `
+    <div class="menu-flyout-section menu-flyout-section--export">
+      <p class="menu-flyout-copy">Export every board as Orbit snapshots in a ZIP archive.</p>
+      ${features.attachments ? `
+        <label class="orbit-check menu-flyout-toggle">
+          <input type="checkbox" id="exportAllBoardImages" />
+          <span class="orbit-check-box" aria-hidden="true">
+            <svg viewBox="0 0 16 16" class="orbit-check-tick"><path d="M3.5 8.5l3 3 6-7" /></svg>
+          </span>
+          <span class="menu-flyout-toggle-text">Include attached images</span>
+        </label>
+      ` : ""}
+      <div class="menu-flyout-actions-row">
+        <button type="button" id="exportAllBoards">Export All</button>
+      </div>
+      <div class="menu-flyout-divider" aria-hidden="true"></div>
+      <section class="menu-flyout-danger-section" aria-label="Import All">
+        <h3 class="menu-flyout-danger-heading">Import All</h3>
+        <p class="menu-flyout-danger-copy">Imports fully overwrite each matching board. Snapshots without a matching board create new boards.</p>
+        <div class="menu-flyout-actions-row">
+          <input type="file" id="importAllBoardsFile" class="import-file-input" accept=".zip,.orbit.json,application/zip" />
+          <button type="button" data-arc="danger" id="importAllBoards">Import All</button>
+        </div>
+      </section>
+    </div>`;
+  const body = boardFlyoutView === "export" ? exportBlock : boardFlyoutView === "new" && features.multiBoard ? createBlock : listBlock;
   return `
-    <div class="menu-flyout-head">Board</div>
-    <div class="menu-flyout-list">${listBody}</div>
-    ${createBlock}
+    ${renderBoardFlyoutHeader()}
+    ${body}
   `;
 }
 
+function rerenderBoardFlyout(view) {
+  boardFlyoutView = view;
+  boardFlyout.innerHTML = renderBoardFlyoutInner();
+  wireBoardFlyout();
+  if (view === "new") boardFlyout.querySelector('input[name="name"]')?.focus();
+}
+
 function wireBoardFlyout() {
+  boardFlyout.querySelectorAll("[data-board-view]").forEach((button) => {
+    button.addEventListener("click", (event) => {
+      event.stopPropagation();
+      const view = button.getAttribute("data-board-view") || "list";
+      rerenderBoardFlyout(view);
+    });
+  });
+
   boardFlyout.querySelectorAll("[data-pick-board]").forEach((btn) => {
     btn.addEventListener("click", async (event) => {
       event.stopPropagation();
@@ -137,8 +260,6 @@ function wireBoardFlyout() {
       event.preventDefault();
       const fd = new FormData(form);
       const slug = String(fd.get("slug") || "").trim();
-      const branch = String(fd.get("default_branch") || "").trim();
-      const repo = String(fd.get("repo_url") || "").trim();
       const repoPath = String(fd.get("repo_path") || "").trim();
       // Folder is optional. Only forward the helper-files choice when a folder
       // is set; the server ignores it otherwise.
@@ -147,9 +268,7 @@ function wireBoardFlyout() {
         body: {
           name: fd.get("name"),
           ...(repoPath ? { repo_path: repoPath, manage_helper_files: fd.get("manage_helper_files") === "on" } : {}),
-          ...(slug ? { slug } : {}),
-          ...(branch ? { default_branch: branch } : {}),
-          ...(repo ? { repo_url: repo } : {})
+          ...(slug ? { slug } : {})
         }
       });
       closeBoardFlyout();
@@ -161,10 +280,93 @@ function wireBoardFlyout() {
       toast.success("Board created");
     });
   }
+
+  boardFlyout.querySelector("#exportAllBoards")?.addEventListener("click", async (event) => {
+    const button = event.currentTarget;
+    const includeAttachments = Boolean(boardFlyout.querySelector("#exportAllBoardImages")?.checked);
+    button.disabled = true;
+    const originalText = button.textContent;
+    button.textContent = "Exporting...";
+    try {
+      await exportAllBoards({ includeAttachments });
+    } catch (error) {
+      toast.error(`Export failed: ${error?.message || "request failed"}`);
+    } finally {
+      button.disabled = false;
+      button.textContent = originalText;
+    }
+  });
+
+  const importAllBoardsFile = boardFlyout.querySelector("#importAllBoardsFile");
+  boardFlyout.querySelector("#importAllBoards")?.addEventListener("click", () => {
+    importAllBoardsFile?.click();
+  });
+
+  importAllBoardsFile?.addEventListener("change", async (event) => {
+    const input = event.currentTarget;
+    const file = input.files?.[0];
+    if (!file) return;
+    const importButton = boardFlyout.querySelector("#importAllBoards");
+    const originalText = importButton?.textContent;
+    if (importButton) {
+      importButton.disabled = true;
+      importButton.textContent = "Importing...";
+    }
+    try {
+      const snapshots = await readImportSnapshots(file);
+      const boardsById = new Map((state.data.boards || []).map((board) => [board.id, board]));
+      const boardsBySlug = new Map((state.data.boards || []).map((board) => [board.slug, board]));
+      let replaced = 0;
+      let created = 0;
+
+      for (const snapshot of snapshots) {
+        const incomingBoard = snapshot.board || {};
+        const match = boardsBySlug.get(incomingBoard.slug) || boardsById.get(incomingBoard.id);
+        if (match) {
+          await api("/api/admin/import", {
+            method: "POST",
+            body: {
+              board_id: match.id,
+              replace_existing: true,
+              snapshot
+            }
+          });
+          replaced += 1;
+          continue;
+        }
+
+        const result = await api("/api/admin/import", {
+          method: "POST",
+          body: {
+            ...(state.boardId ? { board_id: state.boardId } : {}),
+            create_new: true,
+            snapshot
+          }
+        });
+        created += 1;
+        if (result.imported_board_id) boardsById.set(result.imported_board_id, { id: result.imported_board_id, slug: result.imported_board_slug });
+        if (result.imported_board_slug) boardsBySlug.set(result.imported_board_slug, { id: result.imported_board_id, slug: result.imported_board_slug });
+      }
+
+      await load();
+      toast.success(`Imported ${snapshots.length} board${snapshots.length === 1 ? "" : "s"} (${replaced} replaced, ${created} created)`);
+      closeBoardFlyout();
+      await navigate({ boardId: state.boardId, view: "board" }, { replace: true });
+    } catch (error) {
+      toast.error(`Import failed: ${error?.message || "invalid import file"}`);
+    } finally {
+      input.value = "";
+      if (importButton) {
+        importButton.disabled = false;
+        importButton.textContent = originalText;
+      }
+    }
+  });
 }
 
 export function openBoardFlyout() {
   closeCreateFlyout();
+  if (boardFlyoutView === "new" && !features.multiBoard) boardFlyoutView = "list";
   boardFlyout.innerHTML = renderBoardFlyoutInner();
   boardFlyout.hidden = false;
   boardMenuBtn?.setAttribute("aria-expanded", "true");

package/public/js/card-actions.js

@@ -133,7 +133,7 @@ export function createCardActionHandlers({ apiClient = api, navigator = null, co
     async archive(ticket) {
       if (typeof confirmer === "function" && !confirmer(`Archive "${ticket.title || "card"}"? You can restore it from Settings → Card Archive.`)) return false;
       await apiClient(withBoardQuery(`/api/tickets/${encodeURIComponent(ticket.id)}/archive`), { method: "POST" });
-      toast.error(`Archived: ${ticket.title || "card"}`);
+      toast.removed(`Archived: ${ticket.title || "card"}`);
       return true;
     }
   };

package/public/js/create-card.js

@@ -8,12 +8,15 @@ import {
   createFlyoutBackdrop
 } from "./dom.js";
 import { state, visibleStatesForProject, ticketsForProject } from "./state.js";
-import { escapeHtml, ticketLabel } from "./format.js";
+import { escapeHtml } from "./format.js";
 import { api } from "./api.js";
 import { syncUrlFromState } from "./router.js";
+import { handleTextareaIndentationKeydown } from "./text-editing.js";
 import { closeDrawer } from "./drawer.js";
 import { closeMenuFlyouts } from "./board-menu.js";
 import { load } from "./app.js";
+import { closeIconSvg } from "./icons.js";
+import { attachTicketTypeahead, ticketCanonicalLabel } from "./ticket-typeahead.js";
 
 /** Clears any pending hide timeout when reopening the create flyout quickly. */
 let createFlyoutHideTimer = 0;
@@ -66,25 +69,21 @@ function renderCreateForm(preselectedLaneId) {
         `<option value="${escapeHtml(item.id)}" ${item.id === effectiveStateId ? "selected" : ""}>${escapeHtml(item.name)}</option>`
     )
     .join("");
-  const parentOptions = ticketsForProject()
-    .filter((ticket) => ticket.type === "epic")
-    .map((ticket) => `<option value="${escapeHtml(ticket.id)}">${escapeHtml(ticketLabel(ticket))}</option>`)
-    .join("");
   return `
     <div class="create-flyout-head">
       <h2>New card</h2>
-      <button type="button" class="create-flyout-close ghost" id="createFlyoutClose" aria-label="Close">×</button>
+      <button type="button" class="create-flyout-close ghost" id="createFlyoutClose" aria-label="Close">${closeIconSvg}</button>
     </div>
     <form id="createTicketForm" class="create-flyout-form">
       <input id="createTicketTitle" name="title" type="text" placeholder="Title — what is this card?" autocomplete="off" required />
       <textarea id="createTicketDescription" name="description" placeholder="Description (optional)"></textarea>
-      <div class="create-flyout-grid">
-        <label>
-          Lane
+      <div class="control-grid">
+        <label class="control-field">
+          <span class="control-field-label">LANE</span>
           <select id="createTicketState" name="state" class="select-chevron-field" aria-label="Lane">${stateOptions}</select>
         </label>
-        <label>
-          Type
+        <label class="control-field">
+          <span class="control-field-label">TYPE</span>
           <select id="createTicketType" name="type" class="select-chevron-field" aria-label="Ticket type">
             <option value="epic">Epic</option>
             <option value="feature">Feature</option>
@@ -92,23 +91,21 @@ function renderCreateForm(preselectedLaneId) {
             <option value="bug">Bug</option>
           </select>
         </label>
-        <label>
-          Priority
+        <label class="control-field">
+          <span class="control-field-label">PRIORITY</span>
           <select id="createTicketPriority" name="priority" class="select-chevron-field" aria-label="Priority">
-            <option value="0">MAYBE</option>
-            <option value="1">LOW</option>
-            <option value="2" selected>MED</option>
-            <option value="3">HIGH</option>
             <option value="4">URGENT</option>
+            <option value="3">HIGH</option>
+            <option value="2" selected>MED</option>
+            <option value="1">LOW</option>
+            <option value="0">MAYBE</option>
           </select>
         </label>
       </div>
-      <label>
-        Parent epic
-        <select id="createTicketParent" name="parent_ticket_id" class="select-chevron-field" aria-label="Parent epic">
-          <option value="">None</option>
-          ${parentOptions}
-        </select>
+      <label class="control-field" id="createTicketParentField">
+        <span class="control-field-label">Parent epic</span>
+        <input id="createTicketParent" name="parent_target" type="text" placeholder="Search epic… (optional)" autocomplete="off" aria-label="Parent epic" />
+        <input type="hidden" name="parent_ticket_id" id="createTicketParentId" value="" />
       </label>
       <input id="createTicketLabels" name="labels" type="text" placeholder="Labels (comma-separated)" />
       <button type="submit">Create card</button>
@@ -119,6 +116,46 @@ function renderCreateForm(preselectedLaneId) {
 function wireCreateForm() {
   const form = $("#createTicketForm");
   if (!form) return;
+  const description = form.querySelector("#createTicketDescription");
+  description?.addEventListener("keydown", (event) => {
+    handleTextareaIndentationKeydown(event, description);
+  });
+
+  // Parent epic is chosen via the shared styled typeahead. The visible field
+  // holds the "#12 — Title" label; the resolved epic id lives in a hidden input
+  // that the submit reads. Typing (or clearing) drops a stale id so only an
+  // explicit pick is submitted.
+  const parentInput = form.querySelector("#createTicketParent");
+  const parentId = form.querySelector("#createTicketParentId");
+  parentInput.addEventListener("input", () => {
+    parentId.value = "";
+  });
+  attachTicketTypeahead(
+    parentInput,
+    () => ticketsForProject().filter((ticket) => ticket.type === "epic"),
+    {
+      onSelect: (ticket) => {
+        parentId.value = ticket.id;
+        parentInput.value = ticketCanonicalLabel(ticket);
+      },
+    },
+  );
+
+  // Epics cannot have a parent (server rejects with `epic_cannot_have_parent`),
+  // so hide the Parent epic field whenever Type is Epic.
+  const typeSelect = form.querySelector("#createTicketType");
+  const parentField = form.querySelector("#createTicketParentField");
+  const syncParentVisibility = () => {
+    const isEpic = typeSelect.value === "epic";
+    parentField.hidden = isEpic;
+    if (isEpic) {
+      parentInput.value = "";
+      parentId.value = "";
+    }
+  };
+  typeSelect.addEventListener("change", syncParentVisibility);
+  syncParentVisibility();
+
   form.addEventListener("submit", createTicketFromDrawer);
 }