@starlove/orbit 1.3.5 → 1.4.1

package/public/js/drawer.js

@@ -10,6 +10,158 @@ import { escapeHtml } from "./format.js";
 /** Bumps on each open/close so a stale `transitionend` from an old close cannot clear a newly opened drawer. */
 let drawerToken = 0;
 
+/** Aborts scroll/resize observers when tabs are re-rendered or the drawer closes. */
+let drawerTabsScrollAbort = null;
+
+/** Toggle edge-fade classes on the tab shell when the strip can scroll further left/right. */
+function syncDrawerTabsScrollState(tabsEl) {
+  const shellEl = document.getElementById("drawerTabsShell");
+  if (!tabsEl || !shellEl) return;
+
+  const maxScroll = tabsEl.scrollWidth - tabsEl.clientWidth;
+  if (maxScroll <= 1) {
+    shellEl.classList.remove("can-scroll-left", "can-scroll-right");
+    return;
+  }
+
+  shellEl.classList.toggle("can-scroll-left", tabsEl.scrollLeft > 1);
+  shellEl.classList.toggle("can-scroll-right", tabsEl.scrollLeft < maxScroll - 1);
+}
+
+/** Keep the active settings tab visible when the strip overflows horizontally. */
+function scrollActiveDrawerTabIntoView(tabsEl) {
+  tabsEl
+    ?.querySelector(".drawer-tab.is-active")
+    ?.scrollIntoView({ block: "nearest", inline: "nearest" });
+}
+
+function teardownDrawerTabsScroll() {
+  drawerTabsScrollAbort?.abort();
+  drawerTabsScrollAbort = null;
+  const shellEl = document.getElementById("drawerTabsShell");
+  const tabsEl = document.getElementById("drawerTabs");
+  shellEl?.classList.remove("can-scroll-left", "can-scroll-right");
+  tabsEl?.classList.remove("is-grabbing");
+}
+
+function bindDrawerTabsScroll(tabsEl) {
+  teardownDrawerTabsScroll();
+  if (!tabsEl) return;
+
+  const controller = new AbortController();
+  drawerTabsScrollAbort = controller;
+  const { signal } = controller;
+
+  const onScrollChange = () => syncDrawerTabsScrollState(tabsEl);
+  tabsEl.addEventListener("scroll", onScrollChange, { passive: true, signal });
+
+  if (typeof ResizeObserver !== "undefined") {
+    const observer = new ResizeObserver(onScrollChange);
+    observer.observe(tabsEl);
+    signal.addEventListener("abort", () => observer.disconnect(), { once: true });
+  }
+
+  // Vertical wheel over the tab strip pans horizontally (no Shift required).
+  const LINE_SCROLL_PX = 16;
+  const wheelPixels = (value, mode) => {
+    if (mode === WheelEvent.DOM_DELTA_LINE) return value * LINE_SCROLL_PX;
+    if (mode === WheelEvent.DOM_DELTA_PAGE) return value * Math.max(tabsEl.clientWidth, 1);
+    return value;
+  };
+
+  tabsEl.addEventListener(
+    "wheel",
+    (event) => {
+      if (event.defaultPrevented || event.ctrlKey) return;
+      if (tabsEl.scrollWidth <= tabsEl.clientWidth) return;
+
+      const horizontalDelta = event.deltaX || event.deltaY;
+      if (!horizontalDelta) return;
+
+      event.preventDefault();
+      tabsEl.scrollLeft += wheelPixels(horizontalDelta, event.deltaMode);
+    },
+    { passive: false, signal }
+  );
+
+  // Click-and-drag horizontal panning; threshold keeps tab clicks intact.
+  const DRAG_THRESHOLD = 4;
+  let dragActive = false;
+  let dragged = false;
+  let startX = 0;
+  let startScroll = 0;
+  let pointerId = 0;
+
+  tabsEl.addEventListener(
+    "pointerdown",
+    (event) => {
+      if (event.button !== 0) return;
+      if (tabsEl.scrollWidth <= tabsEl.clientWidth) return;
+      dragged = false;
+      dragActive = true;
+      pointerId = event.pointerId;
+      startX = event.clientX;
+      startScroll = tabsEl.scrollLeft;
+    },
+    { signal }
+  );
+
+  tabsEl.addEventListener(
+    "pointermove",
+    (event) => {
+      if (!dragActive || event.pointerId !== pointerId) return;
+      const delta = event.clientX - startX;
+      if (!dragged && Math.abs(delta) > DRAG_THRESHOLD) {
+        dragged = true;
+        try {
+          tabsEl.setPointerCapture(pointerId);
+        } catch {
+          /* no-op: some browsers can't capture here */
+        }
+        tabsEl.classList.add("is-grabbing");
+      }
+      if (dragged) {
+        event.preventDefault();
+        tabsEl.scrollLeft = startScroll - delta;
+      }
+    },
+    { signal }
+  );
+
+  const endDrag = (event) => {
+    if (!dragActive || (event && event.pointerId !== pointerId)) return;
+    dragActive = false;
+    tabsEl.classList.remove("is-grabbing");
+    try {
+      tabsEl.releasePointerCapture(pointerId);
+    } catch {
+      /* no-op */
+    }
+  };
+
+  tabsEl.addEventListener("pointerup", endDrag, { signal });
+  tabsEl.addEventListener("pointercancel", endDrag, { signal });
+  tabsEl.addEventListener("pointerleave", endDrag, { signal });
+
+  tabsEl.addEventListener(
+    "click",
+    (event) => {
+      if (dragged) {
+        event.stopPropagation();
+        event.preventDefault();
+        dragged = false;
+      }
+    },
+    { capture: true, signal }
+  );
+
+  requestAnimationFrame(() => {
+    if (signal.aborted) return;
+    onScrollChange();
+    scrollActiveDrawerTabIntoView(tabsEl);
+  });
+}
+
 /** Slide the right drawer in (ticket detail, project settings, or create form). */
 export function openDrawer() {
   drawerToken += 1;
@@ -38,8 +190,11 @@ export function closeDrawer() {
     drawerInner.innerHTML = "";
     const titleBlockEl = document.getElementById("drawerTitleBlock");
     const tabsEl = document.getElementById("drawerTabs");
+    const tabsShellEl = document.getElementById("drawerTabsShell");
     if (titleBlockEl) titleBlockEl.innerHTML = "";
-    if (tabsEl) { tabsEl.innerHTML = ""; tabsEl.hidden = true; }
+    if (tabsEl) tabsEl.innerHTML = "";
+    if (tabsShellEl) tabsShellEl.hidden = true;
+    teardownDrawerTabsScroll();
     drawer.classList.remove("is-wide");
   };
 
@@ -69,6 +224,7 @@ export function renderDrawerShell({ eyebrow, title, titleAttrs, subtitleHtml, ta
   drawer.classList.toggle("is-wide", mode === "ticket" || mode === "settings");
   const titleBlockEl = document.getElementById("drawerTitleBlock");
   const tabsEl = document.getElementById("drawerTabs");
+  const tabsShellEl = document.getElementById("drawerTabsShell");
 
   // Rebuild the eyebrow / title / subtitle wholesale each render. Like
   // drawerInner.innerHTML below, this means any listeners the caller attached
@@ -82,12 +238,14 @@ export function renderDrawerShell({ eyebrow, title, titleAttrs, subtitleHtml, ta
   }
   const segments = [];
   if (eyebrow) segments.push(`<span class="drawer-eyebrow">${escapeHtml(eyebrow)}</span>`);
-  segments.push(`<h2${titleAttrHtml}>${escapeHtml(title ?? "")}</h2>`);
+  if (title != null && String(title).trim() !== "") {
+    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;
+    if (tabsShellEl) tabsShellEl.hidden = false;
     tabsEl.innerHTML = tabs
       .map(
         (t) =>
@@ -101,9 +259,11 @@ export function renderDrawerShell({ eyebrow, title, titleAttrs, subtitleHtml, ta
         btn.addEventListener("click", () => onTabSelect(btn.dataset.drawerTab));
       });
     }
+    bindDrawerTabsScroll(tabsEl);
   } else {
-    tabsEl.hidden = true;
+    if (tabsShellEl) tabsShellEl.hidden = true;
     tabsEl.innerHTML = "";
+    teardownDrawerTabsScroll();
   }
 
   const archiveBtn = document.getElementById("drawerArchiveBtn");

package/public/js/font-preference.js

@@ -0,0 +1,230 @@
+export const FONT_STORAGE_KEY = "orbit_font_preferences";
+export const FONT_CHANGE_EVENT = "orbit:font-preference-change";
+
+// Inter is the default site font and for most categories; headings and badges
+// default to Orbitron. The site font drives global font metrics such as size,
+// spacing, and line-height.
+export const DEFAULT_SITE_FONT = "inter";
+export const DEFAULT_HEADING_FONT = "orbitron";
+export const DEFAULT_BADGE_FONT = "orbitron";
+export const DEFAULT_USER_SCALE = 1;
+export const USER_SCALE_MIN = 0.85;
+export const USER_SCALE_MAX = 1.3;
+export const USER_SCALE_STEP = 0.05;
+
+export const SITE_FONT_OPTIONS = Object.freeze([
+  "inter",
+  "openSans",
+  "jetBrainsMono",
+  "chakraPetch",
+  "orbitron",
+  "rajdhani",
+  "runescapeUF",
+  "openRing"
+]);
+
+export const FONT_OPTIONS = Object.freeze({
+  inter: {
+    label: "Inter",
+    stack: "\"Orbit Inter\", \"Inter\", \"Segoe UI Variable\", \"Segoe UI\", Arial, sans-serif",
+    className: "font-inter"
+  },
+  openSans: {
+    label: "Open Sans",
+    stack: "\"Orbit Open Sans\", \"Open Sans\", \"Segoe UI Variable\", \"Segoe UI\", Arial, sans-serif",
+    className: "font-open-sans"
+  },
+  jetBrainsMono: {
+    label: "JetBrains Mono",
+    stack: "\"Orbit JetBrains Mono\", \"JetBrains Mono\", \"Cascadia Mono\", \"SFMono-Regular\", Consolas, monospace",
+    className: "font-jetbrains-mono"
+  },
+  chakraPetch: {
+    label: "Chakra Petch",
+    stack: "\"Orbit Chakra Petch\", \"Chakra Petch\", \"Segoe UI Variable\", \"Segoe UI\", Arial, sans-serif",
+    className: "font-chakra-petch"
+  },
+  orbitron: {
+    label: "Orbitron",
+    stack: "\"Orbit Orbitron\", \"Orbitron\", \"Segoe UI Variable\", \"Segoe UI\", Arial, sans-serif",
+    className: "font-orbitron"
+  },
+  rajdhani: {
+    label: "Rajdhani",
+    stack: "\"Orbit Rajdhani\", \"Rajdhani\", \"Segoe UI Variable\", \"Segoe UI\", Arial, sans-serif",
+    className: "font-rajdhani"
+  },
+  runescapeUF: {
+    label: "Runescape UF",
+    stack: "\"Orbit Runescape UF\", \"Cascadia Mono\", monospace",
+    className: "font-runescape-uf"
+  },
+  openRing: {
+    label: "Open Ring",
+    stack: "\"Orbit Open Ring\", \"Segoe UI Variable\", \"Segoe UI\", Arial, sans-serif",
+    className: "font-open-ring"
+  }
+});
+
+// Per-category overrides shown in the Appearance grid. Body text is not a
+// target: it always follows the primary font (`site`), so it drives
+// --orbit-font-body directly in applyFontPreferences instead.
+export const FONT_TARGETS = Object.freeze({
+  heading: {
+    label: "Headings",
+    cssVar: "--orbit-font-heading",
+    dataAttr: "fontHeading"
+  },
+  control: {
+    label: "Controls",
+    cssVar: "--orbit-font-control",
+    dataAttr: "fontControl"
+  },
+  label: {
+    label: "Labels",
+    cssVar: "--orbit-font-label",
+    dataAttr: "fontLabel"
+  },
+  badge: {
+    label: "Badges",
+    cssVar: "--orbit-font-badge",
+    dataAttr: "fontBadge"
+  }
+});
+
+export const LEGACY_FONT_TARGET_ALIASES = Object.freeze({
+  ui: "control"
+});
+
+export const DEFAULT_FONT_TARGET_PREFERENCES = Object.freeze({
+  control: DEFAULT_SITE_FONT,
+  heading: DEFAULT_HEADING_FONT,
+  label: DEFAULT_SITE_FONT,
+  badge: DEFAULT_BADGE_FONT
+});
+
+export const DEFAULT_FONT_PREFERENCES = Object.freeze({
+  ...DEFAULT_FONT_TARGET_PREFERENCES,
+  // Primary font: drives body text and the default for every override category.
+  site: DEFAULT_SITE_FONT,
+  // User size slider multiplier (drives --type-user-scale).
+  userScale: DEFAULT_USER_SCALE
+});
+
+function hasOwn(object, key) {
+  return Object.prototype.hasOwnProperty.call(object, key);
+}
+
+export function clampUserScale(value) {
+  const number = Number(value);
+  if (!Number.isFinite(number)) return DEFAULT_USER_SCALE;
+  return Math.min(USER_SCALE_MAX, Math.max(USER_SCALE_MIN, number));
+}
+
+export function normalizeFontPreferences(value) {
+  const input = value && typeof value === "object" ? value : {};
+  const normalized = { ...DEFAULT_FONT_PREFERENCES };
+  const explicitTargets = new Set();
+  for (const key of Object.keys(FONT_TARGETS)) {
+    if (typeof input[key] === "string" && hasOwn(FONT_OPTIONS, input[key])) {
+      normalized[key] = input[key];
+      explicitTargets.add(key);
+    }
+  }
+  for (const [legacyKey, target] of Object.entries(LEGACY_FONT_TARGET_ALIASES)) {
+    if (!explicitTargets.has(target) && typeof input[legacyKey] === "string" && hasOwn(FONT_OPTIONS, input[legacyKey])) {
+      normalized[target] = input[legacyKey];
+    }
+  }
+  if (typeof input.site === "string" && hasOwn(FONT_OPTIONS, input.site)) {
+    normalized.site = input.site;
+  }
+  if (input.userScale !== undefined) {
+    normalized.userScale = clampUserScale(input.userScale);
+  }
+  // Before the split, one "label" target drove both categories. Preserve a
+  // customized label choice for badges unless badge was saved separately.
+  if (!hasOwn(input, "badge") && hasOwn(input, "label") && input.label !== DEFAULT_SITE_FONT) {
+    normalized.badge = normalized.label;
+  }
+  return normalized;
+}
+
+export function storedFontPreferences(storage = globalThis.localStorage) {
+  if (!storage) return { ...DEFAULT_FONT_PREFERENCES };
+  try {
+    const raw = storage.getItem(FONT_STORAGE_KEY);
+    if (!raw) return { ...DEFAULT_FONT_PREFERENCES };
+    return normalizeFontPreferences(JSON.parse(raw));
+  } catch {
+    return { ...DEFAULT_FONT_PREFERENCES };
+  }
+}
+
+export function fontStackFor(optionId) {
+  return FONT_OPTIONS[optionId]?.stack || FONT_OPTIONS[DEFAULT_SITE_FONT].stack;
+}
+
+export function applyFontPreferences(preferences = storedFontPreferences(), { doc = globalThis.document } = {}) {
+  const normalized = normalizeFontPreferences(preferences);
+  const root = doc?.documentElement;
+  if (!root) return normalized;
+
+  for (const [target, config] of Object.entries(FONT_TARGETS)) {
+    const optionId = normalized[target];
+    root.style?.setProperty?.(config.cssVar, fontStackFor(optionId));
+    root.setAttribute?.(`data-${config.dataAttr.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}`, optionId);
+  }
+
+  // Body text (paragraphs, card titles, long-form prose, editors) always tracks
+  // the primary font rather than being an independent category.
+  root.style?.setProperty?.("--orbit-font-body", fontStackFor(normalized.site));
+  // The only size lever is the Appearance slider; font family no longer changes size.
+  root.style?.setProperty?.("--type-user-scale", String(normalized.userScale));
+  root.setAttribute?.("data-font-site", normalized.site);
+  return normalized;
+}
+
+export function setFontPreferences(preferences, {
+  doc = globalThis.document,
+  storage = globalThis.localStorage,
+  eventTarget = globalThis.window
+} = {}) {
+  const normalized = normalizeFontPreferences(preferences);
+  storage?.setItem?.(FONT_STORAGE_KEY, JSON.stringify(normalized));
+  applyFontPreferences(normalized, { doc });
+  eventTarget?.dispatchEvent?.(new CustomEvent(FONT_CHANGE_EVENT, { detail: { preferences: normalized } }));
+  return normalized;
+}
+
+export function resetFontPreferences(options = {}) {
+  options.storage?.removeItem?.(FONT_STORAGE_KEY);
+  return setFontPreferences(DEFAULT_FONT_PREFERENCES, options);
+}
+
+export function setFontPreference(target, optionId, options = {}) {
+  if (!hasOwn(FONT_TARGETS, target)) throw new Error(`Unknown font target: ${target}`);
+  if (!hasOwn(FONT_OPTIONS, optionId)) throw new Error(`Unknown font option: ${optionId}`);
+  return setFontPreferences({ ...storedFontPreferences(options.storage), [target]: optionId }, options);
+}
+
+// Swap the whole site to a primary font: sets every target plus the `site`
+// driver. Per-target overrides can be applied afterward via setFontPreference.
+export function setSiteFont(optionId, options = {}) {
+  if (!hasOwn(FONT_OPTIONS, optionId)) throw new Error(`Unknown font option: ${optionId}`);
+  const next = { ...storedFontPreferences(options.storage) };
+  for (const target of Object.keys(FONT_TARGETS)) next[target] = optionId;
+  next.site = optionId;
+  return setFontPreferences(next, options);
+}
+
+export function setUserScale(value, options = {}) {
+  return setFontPreferences(
+    { ...storedFontPreferences(options.storage), userScale: clampUserScale(value) },
+    options
+  );
+}
+
+export function applyStoredFontPreferences(options = {}) {
+  return applyFontPreferences(storedFontPreferences(options.storage), options);
+}

package/public/js/format.js

@@ -431,13 +431,3 @@ export function renderLabels(labels = []) {
     </div>
   `;
 }
-
-export function repoLabelFromUrl(repoUrl) {
-  const raw = String(repoUrl || "").trim();
-  if (!raw) return "Not set";
-  const githubHttps = raw.match(/github\.com\/([^/\s]+)\/([^/\s]+?)(?:\.git)?$/i);
-  if (githubHttps) return `${githubHttps[1]}/${githubHttps[2]}`;
-  const githubSsh = raw.match(/github\.com[:/]([^/\s]+)\/([^/\s]+?)(?:\.git)?$/i);
-  if (githubSsh) return `${githubSsh[1]}/${githubSsh[2]}`;
-  return raw;
-}

package/public/js/icons.js

@@ -0,0 +1,16 @@
+export const closeIconSvg = `
+  <svg class="ui-icon ui-icon-x" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+    <path d="M6 6l12 12M18 6 6 18" />
+  </svg>
+`;
+
+/** Trash bin — archive / permanent delete actions (drawer header, card archive controls, toasts). */
+export const trashIconSvg = `
+  <svg class="ui-icon ui-icon-trash" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M3 6h18" />
+    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+    <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+    <path d="M10 11v6" />
+    <path d="M14 11v6" />
+  </svg>
+`;

package/public/js/local-backend.js

@@ -17,7 +17,7 @@ const STORES = [
   "labels", // {id, board_id, name, color, created_at}
   "tickets", // full ticket row (no joins)
   "ticket_labels", // {ticket_id, label_id} composite key as `${ticket_id}|${label_id}`
-  "comments", // {id, ticket_id, author, kind, body, created_at}
+  "comments", // {id, ticket_id, author, kind, body, omitted_for_ai, created_at}
   "relations", // {id, source_ticket_id, target_ticket_id, kind, created_at, ...}
   "board_entries", // {id, board_id, type, title, body, ticket_id, struck_at, created_at, updated_at}
   "events", // {id, board_id, ticket_id, type, actor, body_json, created_at}
@@ -166,7 +166,7 @@ async function seedIfEmpty(db) {
     system_path: "",
     default_branch: "main",
     project_notes:
-      "This preview lives entirely in your browser (IndexedDB). Use it to try the flow; export the snapshot from Settings → Repository when you want to move to a real Orbit install.",
+      "This preview lives entirely in your browser (IndexedDB). Use it to try the flow; export the snapshot from Settings → Data when you want to move to a real Orbit install.",
     agent_instructions:
       "Preview edition has no agent or MCP integration. The full Orbit install (npm i -g starscape-orbit && orbit init) provides those.",
     ai_enabled: 0,
@@ -210,7 +210,7 @@ async function seedIfEmpty(db) {
     description:
       "This onboarding card is for the in-browser preview. Drag it across lanes, edit fields, add comments — it all stays in this browser only.",
     type: "epic",
-    aiPlan: "1. Drag this card to In Progress.\n2. Add a comment.\n3. Export the snapshot from Settings → Repository.",
+    aiPlan: "1. Drag this card to In Progress.\n2. Add a comment.\n3. Export the snapshot from Settings → Data.",
     stateId: stateByName.Todo.id,
     priority: 4,
     labels: [labelByName["onboarding"].id, labelByName["needs-decomposition"].id]
@@ -238,7 +238,7 @@ async function seedIfEmpty(db) {
 
   addTicket(4, {
     title: "Export your snapshot when ready",
-    description: "Settings → Repository → Export downloads a JSON snapshot you can import into a real Orbit install.",
+    description: "Settings → Data → Export downloads a JSON snapshot you can import into a real Orbit install.",
     type: "task",
     stateId: stateByName.Backlog.id,
     priority: 1,
@@ -251,6 +251,7 @@ async function seedIfEmpty(db) {
     author: "system",
     kind: "note",
     body: "Welcome to the Orbit preview. Everything lives in your browser.",
+    omitted_for_ai: 0,
     created_at: t
   });
 
@@ -618,7 +619,9 @@ async function handleTicketCreate(body) {
       type: body.type || (body.parent_ticket_id ? "feature" : "task"),
       parent_ticket_id: body.parent_ticket_id || null,
       ai_plan: body.ai_plan || "",
+      plan_artifact_path: body.plan_artifact_path || "",
       implementation_summary: body.implementation_summary || "",
+      implementation_artifact_path: body.implementation_artifact_path || "",
       implementation_updates: body.implementation_updates || "",
       state_id: stateId,
       priority: body.priority ?? 0,
@@ -651,7 +654,9 @@ async function handleTicketPatch(ticketId, body) {
       "type",
       "parent_ticket_id",
       "ai_plan",
+      "plan_artifact_path",
       "implementation_summary",
+      "implementation_artifact_path",
       "implementation_updates",
       "priority"
     ];
@@ -840,6 +845,7 @@ async function handleCommentCreate(ticketId, body) {
       author: "you",
       kind: body.kind || "note",
       body: body.body || "",
+      omitted_for_ai: 0,
       created_at: time
     };
     stores.comments.put(comment);
@@ -851,6 +857,26 @@ async function handleCommentCreate(ticketId, body) {
   });
 }
 
+async function handleCommentPatch(ticketId, commentId, body) {
+  const db = await openDb();
+  return putAndEvent(db, async (stores) => {
+    const ticket = await reqPromise(stores.tickets.get(ticketId));
+    if (!ticket) throw err(404, "ticket_not_found");
+    const comment = await reqPromise(stores.comments.get(commentId));
+    if (!comment || comment.ticket_id !== ticketId) throw err(404, "comment_not_found");
+    const omittedForAi = body.omitted_for_ai ?? body.omittedForAi;
+    if (typeof omittedForAi !== "boolean") throw err(400, "omitted_for_ai_required");
+    const time = nowIso();
+    comment.omitted_for_ai = omittedForAi ? 1 : 0;
+    ticket.updated_at = time;
+    stores.comments.put(comment);
+    stores.tickets.put(ticket);
+    recordEvent(stores, "comment_ai_omission_changed", ticketId, { comment_id: commentId, omitted_for_ai: omittedForAi });
+    await bumpTicketUpdatedAt(stores, ticket.parent_ticket_id, time);
+    return comment;
+  });
+}
+
 async function handleRelationCreate(body) {
   const db = await openDb();
   return putAndEvent(db, async (stores) => {
@@ -970,6 +996,7 @@ const ROUTES = [
   { m: "GET", re: /^\/api\/tickets\/([^/]+)\/comments$/, fn: (m) => handleTicketComments(decodeURIComponent(m[1])) },
   { m: "GET", re: /^\/api\/tickets\/([^/]+)\/history$/, fn: (m) => handleTicketHistory(decodeURIComponent(m[1])) },
   { m: "POST", re: /^\/api\/tickets\/([^/]+)\/comments$/, fn: (m, u, body) => handleCommentCreate(decodeURIComponent(m[1]), body) },
+  { m: "PATCH", re: /^\/api\/tickets\/([^/]+)\/comments\/([^/]+)$/, fn: (m, u, body) => handleCommentPatch(decodeURIComponent(m[1]), decodeURIComponent(m[2]), body) },
   { m: "POST", re: /^\/api\/relations$/, fn: (m, u, body) => handleRelationCreate(body) },
   { m: "DELETE", re: /^\/api\/relations\/([^/]+)$/, fn: (m) => handleRelationDelete(decodeURIComponent(m[1])) },
   { m: "GET", re: /^\/api\/search$/, fn: (m, u) => handleSearch(u.searchParams.get("q")) },

package/public/js/main.js

@@ -43,9 +43,12 @@ import { edition } from "./config.js";
 import { openModal, wireModal } from "./modal.js";
 import { wireTopbarFocus } from "./topbar-notes.js";
 import { wireHelpMenu } from "./help-menu.js";
+import { checkForUpdate } from "./update-check.js";
+import { applyStoredFontPreferences } from "./font-preference.js";
 
 async function init() {
   const welcomeDialog = document.getElementById("welcomeDialog");
+  applyStoredFontPreferences();
   wireModal(welcomeDialog);
   wireTopbarFocus();
   wireHelpMenu();
@@ -97,7 +100,7 @@ async function init() {
     const ticket = state.data?.tickets?.find((t) => t.id === ticketId);
     const titleForToast = ticket?.title || "card";
     await api(withBoardQuery(`/api/tickets/${encodeURIComponent(ticketId)}/archive`), { method: "POST" });
-    toast.error(`Archived: ${titleForToast}`);
+    toast.removed(`Archived: ${titleForToast}`);
     await load();
     navigate({ boardId: state.boardId, view: "board" });
   });
@@ -150,6 +153,9 @@ async function init() {
   } else {
     syncUrlFromState({ replace: true });
   }
+
+  // Best-effort, non-blocking: nudge if a newer Orbit is available.
+  checkForUpdate();
 }
 
 init();

package/public/js/modal.js

@@ -8,7 +8,9 @@
 // Escape key is handled natively by the browser; no extra wiring needed.
 
 export function openModal(dialogEl) {
-  dialogEl?.showModal();
+  if (!dialogEl) return;
+  dialogEl.showModal();
+  dialogEl.querySelector("[data-modal-initial-focus]")?.focus({ preventScroll: true });
 }
 
 export function closeModal(dialogEl) {

package/public/js/panel.js

@@ -0,0 +1,58 @@
+// Reusable settings-style "panel" primitives shared by the project settings
+// drawer and the ticket detail drawer. A panel is a bordered card with a
+// tinted header strip (small-caps title) and a padded body — the same visual
+// language used across the Appearance / AI / Data settings tabs. The
+// collapsible variant turns the header into a <details>/<summary> toggle with a
+// chevron that flips when open, so any surface can drop in a togglable section
+// without re-deriving the markup. These intentionally emit the .settings-card
+// class family (documented in styles.css as a reusable @starlove/ui primitive).
+
+import { escapeHtml } from "./format.js";
+
+const panelChevronSvg = `<svg class="settings-card-chevron" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6" /></svg>`;
+
+/**
+ * Static panel: bordered card with a header title and a padded body.
+ *
+ * Options:
+ *   - title: heading text shown in the small-caps header strip.
+ *   - body: raw HTML for the card body (already escaped by the caller).
+ *   - className: extra classes appended to the .settings-card element.
+ *   - attrs: extra attributes string placed on the <section> (e.g. data-*).
+ *   - headExtra: raw HTML appended after the title inside the header (actions).
+ */
+export function renderPanel({ title, body = "", className = "", attrs = "", headExtra = "" } = {}) {
+  const classAttr = className ? ` ${className}` : "";
+  const extraAttrs = attrs ? ` ${attrs}` : "";
+  return `
+    <section class="settings-card${classAttr}"${extraAttrs}>
+      <header class="settings-card-head">
+        <h3 class="settings-card-title">${escapeHtml(title)}</h3>
+        ${headExtra}
+      </header>
+      <div class="settings-card-body">${body}</div>
+    </section>
+  `;
+}
+
+/**
+ * Collapsible panel: same chrome as renderPanel but the header doubles as a
+ * <details>/<summary> toggle with a flipping chevron.
+ *
+ * Options mirror renderPanel, plus:
+ *   - open: whether the section starts expanded.
+ */
+export function renderTogglePanel({ title, body = "", open = false, className = "", attrs = "", headExtra = "" } = {}) {
+  const classAttr = className ? ` ${className}` : "";
+  const extraAttrs = attrs ? ` ${attrs}` : "";
+  return `
+    <details class="settings-card settings-card--collapsible${classAttr}"${open ? " open" : ""}${extraAttrs}>
+      <summary class="settings-card-head">
+        <h3 class="settings-card-title">${escapeHtml(title)}</h3>
+        ${headExtra}
+        ${panelChevronSvg}
+      </summary>
+      <div class="settings-card-body">${body}</div>
+    </details>
+  `;
+}