@starlove/orbit 1.0.6 → 1.0.7

package/public/js/main.js

@@ -18,7 +18,14 @@ import {
 import { state } from "./state.js";
 import { api, withBoardQuery } from "./api.js";
 import { toast, debounce } from "./toast.js";
-import { navigate, applyRoute, syncUrlFromState, setRouterReady } from "./router.js";
+import {
+  navigate,
+  applyRoute,
+  currentRoute,
+  hasRoute,
+  syncUrlFromState,
+  setRouterReady
+} from "./router.js";
 import {
   openBoardFlyout,
   closeBoardFlyout,
@@ -125,14 +132,15 @@ async function init() {
 
   enableKanbanDragScroll();
 
+  const initialRoute = currentRoute();
+  if (initialRoute.boardSlug) state.boardSlug = initialRoute.boardSlug;
   await load();
 
-  // Activate the router. If the page was loaded with a hash, restore that
-  // view; otherwise canonicalize the URL to reflect the current state so the
-  // back button has a starting point.
+  // Activate the router. If the page was loaded with a hash route, restore
+  // that view; otherwise canonicalize the URL to reflect the current
+  // state so the back button has a starting point.
   setRouterReady(true);
-  const initialHash = location.hash;
-  if (initialHash && initialHash !== "#" && initialHash !== "#/") {
+  if (hasRoute()) {
     await applyRoute();
   } else {
     syncUrlFromState({ replace: true });

package/public/js/motion-preference.js

@@ -0,0 +1,53 @@
+export const REDUCE_MOTION_STORAGE_KEY = "mab_reduce_motion";
+
+function safeStorage(storage) {
+  try {
+    return storage ?? globalThis.localStorage ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function defaultMediaMatcher(query) {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function"
+    ? window.matchMedia(query)
+    : { matches: false };
+}
+
+export function storedReducedMotionPreference(storage = safeStorage()) {
+  const store = safeStorage(storage);
+  const value = store?.getItem?.(REDUCE_MOTION_STORAGE_KEY);
+  if (value === "true") return true;
+  if (value === "false") return false;
+  return null;
+}
+
+export function browserPrefersReducedMotion(mediaMatcher = defaultMediaMatcher) {
+  try {
+    return !!mediaMatcher("(prefers-reduced-motion: reduce)")?.matches;
+  } catch {
+    return false;
+  }
+}
+
+export function effectiveReducedMotionPreference({ storage = safeStorage(), mediaMatcher = defaultMediaMatcher } = {}) {
+  const stored = storedReducedMotionPreference(storage);
+  return stored ?? browserPrefersReducedMotion(mediaMatcher);
+}
+
+export function setReducedMotionPreference(reduce, storage = safeStorage()) {
+  const store = safeStorage(storage);
+  const value = reduce ? "true" : "false";
+  store?.setItem?.(REDUCE_MOTION_STORAGE_KEY, value);
+  return reduce;
+}
+
+export function applyReducedMotionPreference({
+  doc = globalThis.document,
+  storage = safeStorage(),
+  mediaMatcher = defaultMediaMatcher
+} = {}) {
+  const reduce = effectiveReducedMotionPreference({ storage, mediaMatcher });
+  doc?.documentElement?.setAttribute("data-reduced-motion", reduce ? "reduce" : "allow");
+  return reduce;
+}

package/public/js/router.js

@@ -1,52 +1,51 @@
-// Hash-based router. The URL hash is the source of truth for which view is
-// shown. `navigate()` writes to it; the popstate listener replays it. The
-// in-memory `state` object is still used for rendering — applyRoute() just
-// mirrors the parsed hash into `state` before calling render().
+// Hash router. Copy/share URLs use board slugs, such as
+// `#/b/<boardSlug>`, `#/b/<boardSlug>/t/<ticketId>`, and
+// `#/b/<boardSlug>/settings/<tab>`. Keeping routing in the hash lets the
+// preview app keep working when mounted under `/app/` or opened as static HTML.
 
-import { state } from "./state.js";
-import { SETTINGS_TAB_IDS, normalizeSettingsTab } from "./settings-tabs.js";
+import { currentBoard, state } from "./state.js";
+import { normalizeSettingsTab } from "./settings-tabs.js";
 import { closeMenuFlyouts } from "./board-menu.js";
 import { closeCreateFlyout } from "./create-card.js";
+import {
+  buildRoute,
+  hasRoute,
+  isCanonicalRouteUrl,
+  parseRoute
+} from "./url-routes.js";
 
-const Route = {
-  parse(hash) {
-    const cleaned = String(hash || "").replace(/^#/, "").replace(/^\/+/, "");
-    const parts = cleaned ? cleaned.split("/") : [];
-    const out = { boardId: "", view: "board", ticketId: "", tab: "" };
-    let i = 0;
-    if (parts[i] === "b" && parts[i + 1]) { out.boardId = decodeURIComponent(parts[i + 1]); i += 2; }
-    if (parts[i] === "t" && parts[i + 1]) {
-      out.view = "ticket";
-      out.ticketId = decodeURIComponent(parts[i + 1]);
-    } else if (parts[i] === "settings") {
-      out.view = "settings";
-      const t = parts[i + 1];
-      if (t && SETTINGS_TAB_IDS.has(t)) out.tab = t;
-    }
-    return out;
-  },
-  build({ boardId = "", view = "board", ticketId = "", tab = "" } = {}) {
-    const segs = [];
-    if (boardId) segs.push("b", encodeURIComponent(boardId));
-    if (view === "ticket" && ticketId) segs.push("t", encodeURIComponent(ticketId));
-    else if (view === "settings") {
-      segs.push("settings");
-      if (tab && SETTINGS_TAB_IDS.has(tab)) segs.push(tab);
-    }
-    return "#/" + segs.join("/");
-  },
-  fromState() {
-    let view = "board";
-    if (state.detailMode === "ticket" && state.selectedTicketId) view = "ticket";
-    else if (state.detailMode === "settings") view = "settings";
-    return {
-      boardId: state.boardId,
-      view,
-      ticketId: state.selectedTicketId,
-      tab: view === "settings" ? normalizeSettingsTab(state.settingsTab) : ""
-    };
-  }
-};
+export { buildRoute, hasRoute, parseRoute } from "./url-routes.js";
+
+function boardBySlugOrId(value) {
+  if (!value) return null;
+  const boards = state.data?.boards || [];
+  return boards.find((b) => b.slug === value) || boards.find((b) => b.id === value) || null;
+}
+
+function routeBoardSlug(routeObj = {}) {
+  if (routeObj.boardSlug) return routeObj.boardSlug;
+  if (routeObj.boardId) return boardBySlugOrId(routeObj.boardId)?.slug || routeObj.boardId;
+  return currentBoard()?.slug || state.boardSlug || "";
+}
+
+function normalizeRouteForUrl(routeObj = {}) {
+  return {
+    ...routeObj,
+    boardSlug: routeBoardSlug(routeObj)
+  };
+}
+
+function routeFromState() {
+  let view = "board";
+  if (state.detailMode === "ticket" && state.selectedTicketId) view = "ticket";
+  else if (state.detailMode === "settings") view = "settings";
+  return {
+    boardSlug: currentBoard()?.slug || state.boardSlug,
+    view,
+    ticketId: state.selectedTicketId,
+    tab: view === "settings" ? normalizeSettingsTab(state.settingsTab) : ""
+  };
+}
 
 let routerReady = false;
 
@@ -54,14 +53,19 @@ export function setRouterReady(value) {
   routerReady = value;
 }
 
+export function currentRoute() {
+  return parseRoute(location);
+}
+
 export async function navigate(routeObj, { replace = false } = {}) {
-  const hash = Route.build(routeObj);
-  if (location.hash === hash) {
+  const route = normalizeRouteForUrl(routeObj);
+  const url = buildRoute(route);
+  if (isCanonicalRouteUrl(location, route)) {
     if (routerReady) await applyRoute();
     return;
   }
-  if (replace) history.replaceState(null, "", hash);
-  else history.pushState(null, "", hash);
+  if (replace) history.replaceState(null, "", url);
+  else history.pushState(null, "", url);
   if (routerReady) await applyRoute();
 }
 
@@ -69,17 +73,32 @@ export async function navigate(routeObj, { replace = false } = {}) {
 // Used after flows that already mutated state and called load()/render()
 // (e.g. ticket/board creation).
 export function syncUrlFromState({ replace = false } = {}) {
-  const hash = Route.build(Route.fromState());
-  if (location.hash === hash) return;
-  if (replace) history.replaceState(null, "", hash);
-  else history.pushState(null, "", hash);
+  const route = routeFromState();
+  const url = buildRoute(route);
+  if (isCanonicalRouteUrl(location, route)) return;
+  if (replace) history.replaceState(null, "", url);
+  else history.pushState(null, "", url);
 }
 
 export async function applyRoute() {
   const { load, render } = await import("./app.js");
-  const r = Route.parse(location.hash);
+  const r = currentRoute();
+  const urlHadRoute = hasRoute(location);
   const prevBoardId = state.boardId;
-  if (r.boardId) state.boardId = r.boardId;
+  const routeBoard = boardBySlugOrId(r.boardSlug);
+  const fallbackBoard = routeBoard || (r.boardSlug ? currentBoard() : null);
+
+  if (fallbackBoard) {
+    state.boardId = fallbackBoard.id;
+    state.boardSlug = fallbackBoard.slug;
+  } else if (r.boardSlug) {
+    state.boardSlug = r.boardSlug;
+  }
+
+  const canonicalRoute = fallbackBoard ? { ...r, boardSlug: fallbackBoard.slug } : r;
+  if (urlHadRoute && !isCanonicalRouteUrl(location, canonicalRoute)) {
+    history.replaceState(null, "", buildRoute(canonicalRoute));
+  }
 
   if (r.view === "ticket") {
     state.selectedTicketId = r.ticketId || "";
@@ -103,7 +122,7 @@ export async function applyRoute() {
   closeMenuFlyouts();
   closeCreateFlyout();
 
-  if (r.boardId && r.boardId !== prevBoardId) {
+  if (state.boardId && state.boardId !== prevBoardId) {
     await load();
   }
   await render();

package/public/js/settings-tabs.js

@@ -1,5 +1,5 @@
 /** Settings drawer tab ids — must match URL segments `#/b/…/settings/:tab` and `settings.js` tab config. */
-export const SETTINGS_TAB_IDS = new Set(["lanes", "ai", "notes", "journal", "repository", "archive"]);
+export const SETTINGS_TAB_IDS = new Set(["lanes", "appearance", "ai", "notes", "journal", "repository", "archive"]);
 
 export function normalizeSettingsTab(raw) {
   if (!raw || !SETTINGS_TAB_IDS.has(raw)) return "lanes";

package/public/js/settings.js

@@ -1,5 +1,5 @@
-// Project settings drawer (the cog/settings icon). Six tabs: Lanes, AI,
-// Notes, Journal, Repository, Archive. Owns lane CRUD/reorder, the
+// Project settings drawer (the cog/settings icon). Tabs: Lanes, Appearance,
+// Card Archive, Notes, Journal, AI, Repository. Owns lane CRUD/reorder, the
 // archive list, project context/notes form persistence, and per-tab handler wiring.
 
 import { state, getSettingsTab, statesForProject, ticketsForProject, currentBoard } from "./state.js";
@@ -13,6 +13,14 @@ import { renderBoard } from "./kanban.js";
 import { renderDetailCard } from "./ticket-detail.js";
 import { load } from "./app.js";
 import { features } from "./config.js";
+import {
+  applyReducedMotionPreference,
+  browserPrefersReducedMotion,
+  effectiveReducedMotionPreference,
+  setReducedMotionPreference,
+  storedReducedMotionPreference
+} from "./motion-preference.js";
+import { currentTheme, setThemePreference } from "./theme-preference.js";
 
 const repositoryDelete = {
   boardId: "",
@@ -27,10 +35,11 @@ export async function renderProjectDetail() {
 
   const tabs = [
     { id: "lanes", label: "Lanes" },
+    { id: "appearance", label: "Appearance" },
     { id: "archive", label: "Card Archive" },
     { id: "notes", label: "Notes" },
-    ...(features.ai ? [{ id: "ai", label: "AI" }] : []),
     { id: "journal", label: "Journal" },
+    ...(features.ai ? [{ id: "ai", label: "AI" }] : []),
     { id: "repository", label: "Repository" }
   ];
 
@@ -61,6 +70,8 @@ function renderProjectTabBody(context, tab) {
       return renderNotesSettingsTab(context);
     case "lanes":
       return renderProjectLanesTab();
+    case "appearance":
+      return renderProjectAppearanceTab();
     case "ai":
       return features.ai ? renderProjectAiTab(context) : renderProjectLanesTab();
     case "journal":
@@ -473,6 +484,70 @@ function renderProjectLanesTab() {
   `;
 }
 
+function renderProjectAppearanceTab() {
+  const theme = currentTheme();
+  const reduceMotion = effectiveReducedMotionPreference();
+  const storedMotion = storedReducedMotionPreference();
+  const browserDefault = browserPrefersReducedMotion();
+  const sourceLabel = storedMotion === null
+    ? `Using browser default (${browserDefault ? "reduced motion" : "motion allowed"}).`
+    : "Using your saved preference.";
+
+  return `
+    <div class="section appearance-theme-section">
+      <fieldset class="appearance-theme-field">
+        <legend>Theme</legend>
+        <div class="appearance-theme-options">
+          ${renderThemeOption("light", "Light", theme)}
+          ${renderThemeOption("dark", "Dark", theme)}
+        </div>
+        <p class="description">Applies the light/dark theme used by the top rail toggle.</p>
+      </fieldset>
+    </div>
+    <div class="section">
+      <label class="orbit-check" for="reduceMotionToggle">
+        <input
+          type="checkbox"
+          id="reduceMotionToggle"
+          ${reduceMotion ? "checked" : ""}
+        />
+        <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="orbit-check-label">Reduce theme motion</span>
+      </label>
+      <p class="description">Turns off the animated starfield, meteors, and theme animations. ${escapeHtml(sourceLabel)}</p>
+    </div>
+  `;
+}
+
+function renderThemeOption(value, label, selectedTheme) {
+  const checked = selectedTheme === value ? "checked" : "";
+  const icon = value === "dark"
+    ? '<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />'
+    : '<circle cx="12" cy="12" r="5" /><path d="M12 1v2m0 18v2M4.2 4.2l1.4 1.4m12.8 12.8l1.4 1.4M1 12h2m18 0h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />';
+
+  return `
+    <label class="appearance-theme-option">
+      <input type="radio" name="themePreference" value="${value}" ${checked} />
+      <span class="appearance-theme-option-mark" aria-hidden="true">
+        <svg
+          class="appearance-theme-option-icon"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >${icon}</svg>
+      </span>
+      <span class="appearance-theme-option-label">${label}</span>
+    </label>
+  `;
+}
+
 function renderProjectJournalTab(context) {
   const aiEnabled = context.board?.ai_enabled !== 0;
   return `
@@ -609,6 +684,24 @@ function bindProjectTabHandlers(context, tab) {
     });
   }
 
+  if (tab === "appearance") {
+    drawerInner.querySelectorAll("input[name='themePreference']").forEach((input) => {
+      input.addEventListener("change", (event) => {
+        if (!event.currentTarget.checked) return;
+        const theme = setThemePreference(event.currentTarget.value);
+        toast.success(theme === "dark" ? "Dark theme enabled" : "Light theme enabled");
+      });
+    });
+
+    $("#reduceMotionToggle")?.addEventListener("change", (event) => {
+      const reduce = !!event.currentTarget.checked;
+      setReducedMotionPreference(reduce);
+      applyReducedMotionPreference();
+      window.dispatchEvent(new CustomEvent("orbit:motion-preference-change", { detail: { reduce } }));
+      toast.success(reduce ? "Theme motion reduced" : "Theme motion enabled");
+    });
+  }
+
   if (tab === "ai") {
     const updateMcpPreview = () => {
       const osId = $("#mcpOsSelect")?.value || detectedMcpOs();

package/public/js/starscape.js

@@ -9,12 +9,19 @@
 // nebula ghosts, signature stars with spikes, and meteors stay in CSS.
 
 import { themeToggle, themeIcon } from "./dom.js";
+import { applyReducedMotionPreference, effectiveReducedMotionPreference } from "./motion-preference.js";
+import {
+  THEME_CHANGE_EVENT,
+  applyStoredThemePreference,
+  currentTheme,
+  toggleThemePreference
+} from "./theme-preference.js";
 
 // Stored theme must be applied before startStarscape() so its first sync()
 // sees the real theme; otherwise the canvas stays stopped until next resize.
 {
-  const storedTheme = localStorage.getItem("mab_theme");
-  if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
+  applyStoredThemePreference();
+  applyReducedMotionPreference();
 }
 
 const starscape = startStarscape();
@@ -31,19 +38,18 @@ scheduleMeteor();
 }
 
 syncThemeIcon();
-themeToggle.addEventListener("click", () => {
-  const next =
-    document.documentElement.getAttribute("data-theme") === "dark"
-      ? "light"
-      : "dark";
-  document.documentElement.setAttribute("data-theme", next);
-  localStorage.setItem("mab_theme", next);
+themeToggle?.addEventListener("click", () => {
+  toggleThemePreference();
+});
+
+window.addEventListener(THEME_CHANGE_EVENT, () => {
   syncThemeIcon();
   starscape.sync();
 });
 
 function syncThemeIcon() {
-  const dark = document.documentElement.getAttribute("data-theme") === "dark";
+  if (!themeIcon) return;
+  const dark = currentTheme() === "dark";
   themeIcon.innerHTML = dark
     ? '<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />'
     : '<circle cx="12" cy="12" r="5" /><path d="M12 1v2m0 18v2M4.2 4.2l1.4 1.4m12.8 12.8l1.4 1.4M1 12h2m18 0h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />';
@@ -207,8 +213,8 @@ function startStarscape() {
   }
 
   function sync() {
-    const isDark = document.documentElement.getAttribute("data-theme") === "dark";
-    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const isDark = currentTheme() === "dark";
+    const reduced = effectiveReducedMotionPreference();
     if (!isDark) {
       stop();
       ctx.clearRect(0, 0, width, height);
@@ -229,7 +235,11 @@ function startStarscape() {
   }, { passive: true });
   window.addEventListener("pointermove", onPointerMove, { passive: true });
   document.addEventListener("visibilitychange", sync);
-  window.matchMedia("(prefers-reduced-motion: reduce)").addEventListener("change", sync);
+  window.matchMedia("(prefers-reduced-motion: reduce)").addEventListener("change", () => {
+    applyReducedMotionPreference();
+    sync();
+  });
+  window.addEventListener("orbit:motion-preference-change", sync);
 
   resize();
   sync();
@@ -259,11 +269,8 @@ function scheduleMeteor() {
 }
 
 function spawnMeteor() {
-  const isDark =
-    document.documentElement.getAttribute("data-theme") === "dark";
-  const reduced = window.matchMedia(
-    "(prefers-reduced-motion: reduce)"
-  ).matches;
+  const isDark = currentTheme() === "dark";
+  const reduced = effectiveReducedMotionPreference();
   const grain = document.querySelector(".grain");
   if (!isDark || reduced || document.hidden || !grain) {
     scheduleMeteor();

package/public/js/state.js

@@ -10,6 +10,8 @@ export const state = {
   /** Currently selected board id. Single-board UI; this points at the active
    *  board in `state.data.boards`. */
   boardId: "",
+  /** URL-facing board identifier. Routes use slugs; API calls keep using ids. */
+  boardSlug: "",
   selectedTicketId: "",
   expandedCardIds: new Set(),
   /** "empty" | "ticket" | "settings" — drives the main right overlay drawer (not the New flyout). */
@@ -30,9 +32,16 @@ export function getSettingsTab() {
 export function syncBoardSelection() {
   if (!state.data) return;
   const boards = state.data.boards || [];
-  if (!state.boardId || !boards.some((b) => b.id === state.boardId)) {
-    state.boardId = boards[0]?.id || "";
+  let board = state.boardId ? boards.find((b) => b.id === state.boardId) : null;
+  if (!board && state.boardSlug) {
+    board = boards.find((b) => b.slug === state.boardSlug) || boards.find((b) => b.id === state.boardSlug);
   }
+  if (!board) {
+    const activeBoardId = state.data.active_board_id;
+    board = boards.find((b) => b.id === activeBoardId) || boards[0] || null;
+  }
+  state.boardId = board?.id || "";
+  state.boardSlug = board?.slug || "";
 }
 
 export function currentBoard() {

package/public/js/theme-preference.js

@@ -0,0 +1,88 @@
+export const THEME_STORAGE_KEY = "mab_theme";
+export const THEME_CHANGE_EVENT = "orbit:theme-change";
+
+const THEMES = new Set(["light", "dark"]);
+
+function safeStorage(storage) {
+  try {
+    return storage ?? globalThis.localStorage ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function safeDocument(doc) {
+  try {
+    return doc ?? globalThis.document ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function safeEventTarget(eventTarget) {
+  try {
+    return eventTarget ?? globalThis.window ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export function normalizeTheme(theme) {
+  return THEMES.has(theme) ? theme : "light";
+}
+
+export function storedThemePreference(storage = safeStorage()) {
+  const store = safeStorage(storage);
+  const value = store?.getItem?.(THEME_STORAGE_KEY);
+  return THEMES.has(value) ? value : null;
+}
+
+export function currentTheme({ doc = safeDocument(), storage = safeStorage() } = {}) {
+  const rootTheme = safeDocument(doc)?.documentElement?.getAttribute?.("data-theme");
+  return THEMES.has(rootTheme) ? rootTheme : storedThemePreference(storage) ?? "light";
+}
+
+export function applyStoredThemePreference({
+  doc = safeDocument(),
+  storage = safeStorage()
+} = {}) {
+  const storedTheme = storedThemePreference(storage);
+  if (storedTheme) {
+    safeDocument(doc)?.documentElement?.setAttribute?.("data-theme", storedTheme);
+  }
+  return currentTheme({ doc, storage });
+}
+
+export function setThemePreference(theme, {
+  doc = safeDocument(),
+  storage = safeStorage(),
+  eventTarget = safeEventTarget(),
+  notify = true
+} = {}) {
+  const next = normalizeTheme(theme);
+  safeDocument(doc)?.documentElement?.setAttribute?.("data-theme", next);
+  safeStorage(storage)?.setItem?.(THEME_STORAGE_KEY, next);
+
+  if (notify) {
+    dispatchThemeChange(next, eventTarget);
+  }
+
+  return next;
+}
+
+export function toggleThemePreference(options = {}) {
+  const next = currentTheme(options) === "dark" ? "light" : "dark";
+  return setThemePreference(next, options);
+}
+
+function dispatchThemeChange(theme, eventTarget = safeEventTarget()) {
+  const target = safeEventTarget(eventTarget);
+  if (typeof target?.dispatchEvent !== "function") return;
+
+  if (typeof CustomEvent === "function") {
+    target.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, { detail: { theme } }));
+    return;
+  }
+
+  target.dispatchEvent({ type: THEME_CHANGE_EVENT, detail: { theme } });
+}

package/public/js/ticket-detail.js

@@ -15,7 +15,8 @@ import {
   typeLabel,
   typeLabelLong,
   priorityLabel,
-  priorityKeyFor
+  priorityKeyFor,
+  renderMarkdown
 } from "./format.js";
 import { renderTypeIcon, renderPriorityPill } from "./kanban.js";
 import { renderDrawerShell, openDrawer, closeDrawer } from "./drawer.js";
@@ -125,7 +126,8 @@ function wireTicketDetailEditors(ticket) {
 
   const descEl = drawerInner.querySelector('[data-edit-field="description"]');
   if (descEl) {
-    descEl.addEventListener("click", () => {
+    descEl.addEventListener("click", (event) => {
+      event.preventDefault();
       startInlineEdit(descEl, "description", ticket.description || "", ticketId);
     });
     descEl.addEventListener("keydown", (event) => {
@@ -270,6 +272,7 @@ export async function renderDetail() {
   `;
 
   renderDrawerShell({
+    mode: "ticket",
     title: ticket.title,
     titleAttrs: {
       class: "editable-field",
@@ -281,7 +284,7 @@ export async function renderDetail() {
     body: `
     <div class="detail-head">
       <p class="detail-updated" title="Last saved change">Updated ${escapeHtml(formatDateDetail(ticket.updated_at))}</p>
-      <p class="description editable-field ${ticket.description ? "" : "is-placeholder"}" data-edit-field="description" tabindex="0" title="Click to edit">${escapeHtml(ticket.description || "No description yet.")}</p>
+      <div class="description markdown-body editable-field ${ticket.description ? "" : "is-placeholder"}" data-edit-field="description" tabindex="0" title="Click to edit">${ticket.description ? renderMarkdown(ticket.description) : escapeHtml("No description yet.")}</div>
       <dl class="ticket-meta" id="ticketMetaGrid" data-ticket-id="${escapeHtml(ticket.id)}">
         <div class="ticket-meta-row">
           <dt>State</dt>