claude-code-kanban 4.17.0 → 4.18.0

package/public/index.html

@@ -301,7 +301,7 @@
           <button class="icon-btn" aria-label="Open in editor" title="Open in editor" onclick="openMsgInEditor()">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
           </button>
-          <button id="msg-detail-fullscreen-btn" class="icon-btn" aria-label="Toggle fullscreen" title="Toggle fullscreen" onclick="toggleModalFullscreen('msg-detail-modal')">
+          <button id="msg-detail-modal-fullscreen-btn" class="icon-btn" aria-label="Toggle fullscreen" title="Toggle fullscreen" onclick="toggleModalFullscreen('msg-detail-modal')">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
           </button>
           <button class="modal-close" aria-label="Close" onclick="closeMsgDetailModal()">
@@ -310,7 +310,7 @@
         </div>
       </div>
       <div class="modal-body" style="flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;">
-        <div id="msg-detail-body" class="rendered-md" style="word-break: break-word; font-size: 13px; line-height: 1.6; overflow-y: auto; flex: 0 1 auto; min-height: 0; padding-right: 8px;"></div>
+        <div id="msg-detail-body" class="rendered-md modal-zoomable"></div>
         <div id="msg-detail-meta" style="margin-top: 12px; font-size: 11px; color: var(--text-muted); flex-shrink: 0;"></div>
       </div>
     </div>
@@ -337,7 +337,7 @@
         </div>
       </div>
       <div class="modal-body">
-        <div id="preview-modal-body" class="rendered-md"></div>
+        <div id="preview-modal-body" class="rendered-md modal-zoomable"></div>
         <div id="preview-modal-meta"></div>
       </div>
     </div>
@@ -354,7 +354,7 @@
           </svg>
         </button>
       </div>
-      <div class="modal-body">
+      <div class="modal-body modal-zoomable">
         <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px;">
           <div style="display: grid; gap: 16px; align-content: start;">
             <div>
@@ -459,6 +459,14 @@
                 <td style="padding: 4px 0; color: var(--text-secondary);"><kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">Shift+M</kbd></td>
                 <td style="padding: 4px 0; color: var(--text-primary);">Open last message detail</td>
               </tr>
+              <tr>
+                <td style="padding: 4px 0; color: var(--text-secondary);"><kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">Ctrl++</kbd> / <kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">Ctrl+-</kbd></td>
+                <td style="padding: 4px 0; color: var(--text-primary);">Modal text size</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px 0; color: var(--text-secondary);"><kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">Ctrl+0</kbd></td>
+                <td style="padding: 4px 0; color: var(--text-primary);">Reset text size</td>
+              </tr>
               <tr>
                 <td style="padding: 4px 0; color: var(--text-secondary);"><kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">Shift+S</kbd></td>
                 <td style="padding: 4px 0; color: var(--text-primary);">Storage manager</td>
@@ -527,7 +535,7 @@
           </button>
         </div>
       </div>
-      <div id="team-modal-body" class="modal-body"></div>
+      <div id="team-modal-body" class="modal-body modal-zoomable"></div>
       <div class="modal-footer">
         <button id="session-info-dismiss-btn" class="btn btn-secondary" onclick="toggleDismissSession(_infoModalSessionId); closeTeamModal()">Dismiss</button>
         <button class="btn btn-secondary" onclick="showToolStatsModal(_infoModalSessionId)" title="Tool invocation statistics">Tool Stats</button>
@@ -547,7 +555,7 @@
           </svg>
         </button>
       </div>
-      <div id="tool-stats-modal-body" class="modal-body" style="overflow-y:auto;flex:1 1 auto;min-height:0;"></div>
+      <div id="tool-stats-modal-body" class="modal-body modal-zoomable" style="overflow-y:auto;flex:1 1 auto;min-height:0;"></div>
       <div class="modal-footer">
         <button class="btn btn-secondary" onclick="closeToolStatsModal()">Close</button>
       </div>
@@ -576,7 +584,7 @@
           </button>
         </div>
       </div>
-      <div id="plan-modal-body" class="modal-body detail-desc rendered-md" style="overflow-y: auto; flex: 0 1 auto; min-height: 0;"></div>
+      <div id="plan-modal-body" class="modal-body detail-desc rendered-md modal-zoomable"></div>
       <div class="modal-footer">
         <button class="btn btn-secondary" onclick="closePlanModal()">Close</button>
       </div>
@@ -622,7 +630,7 @@
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
         </button>
       </div>
-      <div id="loop-modal-body" class="modal-body" style="overflow-y:auto;flex:0 1 auto;min-height:0;"></div>
+      <div id="loop-modal-body" class="modal-body modal-zoomable" style="overflow-y:auto;flex:0 1 auto;min-height:0;"></div>
       <div class="modal-footer">
         <button class="btn btn-secondary" onclick="closeLoopModal()">Close</button>
       </div>
@@ -646,7 +654,7 @@
           </button>
         </div>
       </div>
-      <div id="workflow-modal-body" class="modal-body" style="overflow-y:auto;flex:1 1 auto;min-height:0;"></div>
+      <div id="workflow-modal-body" class="modal-body modal-zoomable" style="overflow-y:auto;flex:1 1 auto;min-height:0;"></div>
       <div class="modal-footer">
         <button class="btn btn-secondary" onclick="closeWorkflowModal()">Close</button>
       </div>
@@ -677,7 +685,7 @@
           </button>
         </div>
       </div>
-      <div id="agent-modal-body" class="modal-body" style="overflow-y: auto; overflow-x: hidden; flex: 0 1 auto; min-height: 0;"></div>
+      <div id="agent-modal-body" class="modal-body modal-zoomable" style="overflow-y: auto; overflow-x: hidden; flex: 0 1 auto; min-height: 0;"></div>
       <div class="modal-footer">
         <button id="agent-modal-dismiss-btn" class="btn agent-dismiss-btn" style="display:none" onclick="dismissAgent(currentAgentModalId);closeAgentModal()">Dismiss</button>
         <button class="btn btn-secondary" onclick="closeAgentModal()">Close</button>
@@ -720,7 +728,7 @@
         <button class="storage-tab" data-tab="scratchpads" onclick="switchStorageTab('scratchpads')">Scratchpads</button>
         <button class="storage-tab" data-tab="linked-docs" onclick="switchStorageTab('linked-docs')">Linked Docs</button>
       </div>
-      <div class="modal-body" id="storage-modal-body" style="overflow-y:auto;min-height:200px;max-height:60vh;padding-top:16px;padding-right:8px;"></div>
+      <div class="modal-body modal-zoomable" id="storage-modal-body"></div>
       <div class="modal-footer">
         <button id="storage-cleanup-btn" class="btn btn-secondary" onclick="cleanupOrphanedStorage()">Clean Orphaned</button>
         <button class="btn btn-secondary" onclick="closeStorageManager()">Close</button>

package/public/style.css

@@ -38,6 +38,8 @@
   /* aliases: many rules reference --font-mono/--font-serif; keep them on-brand */
   --font-mono: var(--mono);
   --font-serif: var(--serif);
+  /* reading-surface scale for the message-detail and preview modals (Ctrl +/-/0) */
+  --modal-zoom: 1;
 }
 
 * {
@@ -3729,10 +3731,12 @@ body.light .msg-assistant .msg-text {
   overflow-y: auto;
 }
 
+/* Height is a cap, not a floor — a two-line message should not sit in a 92vh box.
+   The HTML preview keeps its explicit height below: its iframe is `height: 100%`
+   and needs a resolvable parent height. */
 .modal.fullscreen {
   width: 80vw;
   max-width: 80vw;
-  height: 92vh;
   max-height: 92vh;
 }
 
@@ -3773,7 +3777,9 @@ body.light .msg-assistant .msg-text {
   overflow: hidden;
 }
 
-#preview-modal-body {
+#msg-detail-body,
+#preview-modal-body,
+#plan-modal-body {
   word-break: break-word;
   font-size: 13px;
   line-height: 1.6;
@@ -3783,6 +3789,30 @@ body.light .msg-assistant .msg-text {
   padding-right: 8px;
 }
 
+/* Same reading size as the other modal bodies — `.detail-desc` is really the
+   task-panel inline editor's style, and its 14px/1.7 is wrong here. */
+.agent-tab-panel .detail-desc {
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+/* One reading scale for every modal (Ctrl +/-/0). `zoom` rather than font-size
+   because the bodies mix px, rem, inline sizes from tool rendering and an iframe.
+   It hangs on the inner scrolling body — never on `.modal`, whose own vw/vh
+   sizing would scale with it and push the dialog off-screen. */
+.modal-zoomable {
+  zoom: var(--modal-zoom, 1);
+}
+
+/* Height is left to the flex column under `.storage-modal`'s 85vh cap — a `vh`
+   cap here would be multiplied by the zoom above. */
+#storage-modal-body {
+  overflow-y: auto;
+  min-height: 200px;
+  padding-top: 16px;
+  padding-right: 8px;
+}
+
 #preview-modal-meta {
   margin-top: 12px;
   font-size: 11px;

package/server.js

@@ -8,7 +8,10 @@ const readline = require('readline');
 const chokidar = require('chokidar');
 const os = require('os');
 const crypto = require('crypto');
-const { spawn, spawnSync } = require('child_process');
+const { spawnSync } = require('child_process');
+const { assertOpenTarget, openInEditor } = require('./lib/open-editor');
+const { createNetGuard } = require('./lib/net-guard');
+const { isContained } = require('./lib/contain');
 
 const {
   readRecentMessages: _readRecentMessagesUncached,
@@ -29,6 +32,7 @@ const {
   updateLoopInfo,
   buildLoopInfoFromState
 } = require('./lib/parsers');
+const { inlineHtmlAssets } = require('./lib/inline-assets');
 
 if (process.argv.includes("--install") || process.argv.includes("--uninstall")) {
   const { runInstall, runUninstall } = require("./install");
@@ -44,6 +48,13 @@ if (require("./cli").runCli(process.argv)) return;
 const app = express();
 const PORT = process.env.PORT || 3541;
 
+// Mounted before express.json() so a rejected request never buffers a body, and
+// before the /api catch-all so no route escapes the check.
+const net = createNetGuard({ appName: 'Claude Task Kanban' });
+app.use(net.hostGuard);
+app.use(net.frameGuard);
+app.use(net.originGuard);
+
 // Parse --dir flag for custom Claude directory
 function getClaudeDir() {
   const dirIndex = process.argv.findIndex(arg => arg.startsWith('--dir'));
@@ -197,8 +208,10 @@ function getGitBranch(cwd) {
   if (cached && now - cached.ts < GIT_BRANCH_TTL_MS) return cached.branch;
   let branch = null;
   try {
-    const r = spawnSync('git', ['-C', cwd, 'rev-parse', '--abbrev-ref', 'HEAD'], {
-      encoding: 'utf8', timeout: 500, windowsHide: true
+    // cwd rather than `-C <cwd>`: a path beginning with a dash would otherwise be
+    // read by git as an option.
+    const r = spawnSync('git', ['rev-parse', '--abbrev-ref', 'HEAD'], {
+      cwd, encoding: 'utf8', timeout: 500, windowsHide: true
     });
     if (r.status === 0) {
       const out = (r.stdout || '').trim();
@@ -253,8 +266,28 @@ function checkAgentStatus(agentDir, stale, logMtime, isTeam) {
   return result;
 }
 
+// isContained canonicalises both sides with realpath, which costs ~100x a plain
+// path.join. This is called once per session on the /api/sessions hot path, and
+// the verdict for a given name cannot change while TEAMS_DIR is fixed — so the
+// resolved path (or the null rejection) is memoized.
+const teamPathCache = new Map();
+const TEAM_PATH_CACHE_MAX = 1000;
+
+function teamConfigPath(teamName) {
+  if (typeof teamName !== 'string' || !teamName) return null;
+  if (teamPathCache.has(teamName)) return teamPathCache.get(teamName);
+  const candidate = path.join(TEAMS_DIR, teamName, 'config.json');
+  // TEAMS_DIR follows --dir / CLAUDE_CONFIG_DIR, so containment is checked against
+  // the module-level constant rather than a hardcoded ~/.claude/teams.
+  const configPath = isContained(candidate, TEAMS_DIR) ? candidate : null;
+  if (teamPathCache.size >= TEAM_PATH_CACHE_MAX) teamPathCache.clear();
+  teamPathCache.set(teamName, configPath);
+  return configPath;
+}
+
 function isTeamSession(sessionId) {
-  return existsSync(path.join(TEAMS_DIR, sessionId, 'config.json'));
+  const configPath = teamConfigPath(sessionId);
+  return !!configPath && existsSync(configPath);
 }
 
 const teamConfigCache = new Map();
@@ -264,8 +297,8 @@ function loadTeamConfig(teamName) {
   const cached = teamConfigCache.get(teamName);
   if (cached && Date.now() - cached.ts < TEAM_CACHE_TTL) return cached.data;
   try {
-    const configPath = path.join(TEAMS_DIR, teamName, 'config.json');
-    if (!existsSync(configPath)) return null;
+    const configPath = teamConfigPath(teamName);
+    if (!configPath || !existsSync(configPath)) return null;
     const data = JSON.parse(readFileSync(configPath, 'utf8'));
     teamConfigCache.set(teamName, { data, ts: Date.now() });
     return data;
@@ -416,6 +449,12 @@ app.param('taskId', (req, res, next, val) => {
   if (!isSafeId(val)) return res.status(400).json({ error: 'Invalid task ID' });
   next();
 });
+// Team names are directory names under TEAMS_DIR, so /api/teams/:name was a
+// straight traversal before this.
+app.param('name', (req, res, next, val) => {
+  if (!isSafeId(val)) return res.status(400).json({ error: 'Invalid team name' });
+  next();
+});
 
 // Parse JSON bodies
 app.use(express.json());
@@ -633,6 +672,7 @@ function refreshSessionMetadataPath(jsonlPath) {
   // Direct assign (not guarded) so a /goal clear propagates as null.
   existing.goal = info.goal || null;
   if (info.logicalParentUuid) existing.logicalParentUuid = info.logicalParentUuid;
+  if (info.compactBoundaryUuid) existing.compactBoundaryUuid = info.compactBoundaryUuid;
   return true;
 }
 
@@ -719,7 +759,8 @@ function loadSessionMetadata() {
           customTitle: sessionInfo.customTitle || null,
           goal: sessionInfo.goal || null,
           jsonlPath: jsonlPath,
-          logicalParentUuid: sessionInfo.logicalParentUuid || null
+          logicalParentUuid: sessionInfo.logicalParentUuid || null,
+          compactBoundaryUuid: sessionInfo.compactBoundaryUuid || null
         };
         sessionIds.push(sessionId);
       }
@@ -1249,15 +1290,22 @@ app.get('/api/sessions', async (req, res) => {
 
     // Suppress parent sessions that have a compact continuation — compaction is involuntary
     // (context limit hit), not an intentional fork. Only the continuation is shown.
+    // A fork off an already-compacted transcript looks identical from the metadata alone
+    // (its copied compact_boundary gives the child a logicalParentUuid), so the verdict
+    // comes from lookupParentSession, not from the anchor's presence.
     const compactSuppressed = new Set();
     for (const [sid] of sessionsMap) {
-      const compactAnchor = metadata[sid]?.logicalParentUuid;
-      if (!compactAnchor) continue;
+      // Cheap pre-gate: only a session with a boundary anchor can be a continuation,
+      // and lookupParentSession reads JSONLs on a cold cache.
+      if (!metadata[sid]?.logicalParentUuid) continue;
       const parent = lookupParentSession(sid);
-      if (parent.parentSessionId && sessionsMap.has(parent.parentSessionId)) {
-        compactSuppressed.add(parent.parentSessionId);
-        sessionsMap.get(sid).continuedFromSessionId = parent.parentSessionId;
-      }
+      if (parent.relation !== 'compact' || !sessionsMap.has(parent.parentSessionId)) continue;
+      compactSuppressed.add(parent.parentSessionId);
+      sessionsMap.get(sid).continuedFromSessionId = parent.parentSessionId;
+    }
+    // Invariant: a running process is never a superseded lineage, whatever the heuristics say.
+    if (compactSuppressed.size) {
+      for (const s of loadLiveSessions()) compactSuppressed.delete(s.sessionId);
     }
     for (const sid of compactSuppressed) sessionsMap.delete(sid);
 
@@ -1652,17 +1700,12 @@ app.get('/api/sessions/:sessionId/workflows/:wfId/run', async (req, res) => {
   }
 });
 
-function openInEditor(...targets) {
-  const editor = process.env.EDITOR || 'code';
-  spawn(editor, ['-n', ...targets], { shell: true, stdio: 'ignore', detached: true }).unref();
-}
-
 // API: Open a workflow script in VS Code
 app.post('/api/sessions/:sessionId/workflows/:wfId/open', (req, res) => {
   try {
     const wf = getWorkflowScripts(req.params.sessionId).find((w) => w.id === req.params.wfId);
     if (!wf) return res.status(404).json({ error: 'Workflow script not found' });
-    openInEditor(wf.path);
+    openInEditor([wf.path]);
     res.json({ success: true });
   } catch (error) {
     console.error('Error opening workflow script in editor:', error);
@@ -1681,7 +1724,7 @@ app.post('/api/sessions/:sessionId/plan/open', (req, res) => {
     const planPath = path.join(PLANS_DIR, `${slug}.md`);
     if (!existsSync(planPath)) return res.status(404).json({ error: 'No plan found' });
 
-    openInEditor(planPath);
+    openInEditor([planPath]);
     res.json({ success: true });
   } catch (error) {
     console.error('Error opening plan in editor:', error);
@@ -1693,10 +1736,12 @@ app.post('/api/sessions/:sessionId/plan/open', (req, res) => {
 app.post('/api/open-folder', (req, res) => {
   try {
     const { folder, file } = req.body;
-    const target = folder || CLAUDE_DIR;
-    openInEditor(target, ...(file ? [file] : []));
+    const targets = [folder ? assertOpenTarget(folder, 'folder') : CLAUDE_DIR];
+    if (file) targets.push(assertOpenTarget(file, 'file'));
+    openInEditor(targets);
     res.json({ success: true });
   } catch (error) {
+    if (error.status) return res.status(error.status).json({ error: error.message });
     console.error('Error opening folder:', error);
     res.status(500).json({ error: 'Failed to open folder' });
   }
@@ -1707,8 +1752,9 @@ app.post('/api/open-in-editor', (req, res) => {
   try {
     const { content, title, file } = req.body;
     if (file) {
-      openInEditor(file);
-      return res.json({ success: true, path: file });
+      const resolved = assertOpenTarget(file, 'file');
+      openInEditor([resolved]);
+      return res.json({ success: true, path: resolved });
     }
     if (!content) return res.status(400).json({ error: 'No content provided' });
 
@@ -1717,9 +1763,10 @@ app.post('/api/open-in-editor', (req, res) => {
     const tmpFile = path.join(os.tmpdir(), `claude-kanban-${safeName}-${hash}.md`);
     require('fs').writeFileSync(tmpFile, content, 'utf8');
 
-    openInEditor(tmpFile);
+    openInEditor([tmpFile]);
     res.json({ success: true, path: tmpFile });
   } catch (error) {
+    if (error.status) return res.status(error.status).json({ error: error.message });
     console.error('Error opening in editor:', error);
     res.status(500).json({ error: 'Failed to open in editor' });
   }
@@ -2091,12 +2138,14 @@ function findForkAnchorUuid(jsonlPath) {
   }
   return firstUuid;
 }
-// Fallback when metadata cache lacks logicalParentUuid (older entries, cold cache).
-// Hot path reads from metadata directly; this never runs from the suppression loop.
+// Fallback when the metadata cache lacks the boundary pair (older entries, cold cache).
+// Reached only from lookupParentSession, whose result is memoized for the process life —
+// at most one read per session, never per request.
 // Bounded read (~1 MB) mirrors readSessionInfoFromJsonl's HEAD_MAX — compact_boundary
 // always sits in the preamble before the first user/assistant record.
 const COMPACT_ANCHOR_READ_MAX = 1048576;
-function findCompactAnchorUuid(jsonlPath) {
+// Returns { anchor, boundaryUuid } for the preamble compact_boundary, or null.
+function findCompactBoundary(jsonlPath) {
   let fd;
   try {
     fd = openSync(jsonlPath, 'r');
@@ -2110,17 +2159,23 @@ function findCompactAnchorUuid(jsonlPath) {
       try {
         const d = JSON.parse(l);
         if (d.type === 'user' || d.type === 'assistant') return null;
-        if (d.subtype === 'compact_boundary' && d.logicalParentUuid) return d.logicalParentUuid;
+        if (d.subtype === 'compact_boundary' && d.logicalParentUuid) {
+          return { anchor: d.logicalParentUuid, boundaryUuid: d.uuid || null };
+        }
       } catch { /* skip malformed */ }
     }
     return null;
   } catch { return null; }
   finally { if (fd !== undefined) { try { closeSync(fd); } catch {} } }
 }
-function findSessionContainingUuid(projectDir, targetUuid, excludeJsonlPath, maxBirthtimeMs) {
+// forkProbeUuid (optional): the child's own compact_boundary uuid. It only shows up
+// in the parent when the child copied the record — i.e. a fork off an already-compacted
+// transcript, not a compact continuation. Probed once, on the winner's text, which the
+// scan already read.
+function findSessionContainingUuid(projectDir, targetUuid, excludeJsonlPath, maxBirthtimeMs, forkProbeUuid) {
   let files;
   try { files = readdirSync(projectDir); } catch { return null; }
-  let best = null;
+  let best = null, bestBirthtime = Infinity, bestText = null;
   for (const f of files) {
     if (!f.endsWith('.jsonl')) continue;
     const fp = path.join(projectDir, f);
@@ -2128,7 +2183,7 @@ function findSessionContainingUuid(projectDir, targetUuid, excludeJsonlPath, max
     let birthtime = 0;
     try { birthtime = statSync(fp).birthtimeMs; } catch { continue; }
     if (maxBirthtimeMs != null && birthtime >= maxBirthtimeMs) continue;
-    if (best && birthtime >= best.birthtime) continue;
+    if (birthtime >= bestBirthtime) continue;
     let text;
     try { text = readFileSync(fp, 'utf8'); } catch { continue; }
     if (!text.includes(targetUuid)) continue;
@@ -2137,32 +2192,51 @@ function findSessionContainingUuid(projectDir, targetUuid, excludeJsonlPath, max
       try {
         const d = JSON.parse(l);
         if (d.uuid === targetUuid && d.sessionId) {
-          best = { parentSessionId: d.sessionId, parentJsonlPath: fp, birthtime };
+          best = { parentSessionId: d.sessionId, parentJsonlPath: fp, isFork: false };
+          bestBirthtime = birthtime;
+          bestText = text;
           break;
         }
       } catch { /* skip */ }
     }
   }
   if (!best) return null;
-  return { parentSessionId: best.parentSessionId, parentJsonlPath: best.parentJsonlPath };
+  if (forkProbeUuid) best.isFork = bestText.includes(forkProbeUuid);
+  return best;
 }
 function lookupParentSession(sessionId) {
   if (parentSessionCache.has(sessionId)) return parentSessionCache.get(sessionId);
   const meta = loadSessionMetadata()[sessionId];
-  const result = { parentSessionId: null, parentJsonlPath: null, isCompact: false };
+  // relation is the single verdict: 'none' (no parent found), 'compact' (this session
+  // continues a lineage the parent could not hold) or 'fork' (an intentional branch off
+  // a parent that keeps its own life). isCompact/isFork are derived views of it.
+  const result = { parentSessionId: null, parentJsonlPath: null, relation: 'none', isCompact: false, isFork: false };
   if (meta?.jsonlPath) {
-    const compactAnchor = meta.logicalParentUuid || findCompactAnchorUuid(meta.jsonlPath);
-    result.isCompact = !!compactAnchor;
+    // Metadata entries cached before compactBoundaryUuid existed carry the anchor
+    // without the boundary uuid — re-read rather than lose fork detection.
+    const boundary = (meta.logicalParentUuid && meta.compactBoundaryUuid)
+      ? { anchor: meta.logicalParentUuid, boundaryUuid: meta.compactBoundaryUuid }
+      : findCompactBoundary(meta.jsonlPath);
+    const compactAnchor = boundary?.anchor ?? meta.logicalParentUuid ?? null;
+    // A fork copies the parent's early records verbatim, so its first uuid is the anchor.
     const anchorUuid = compactAnchor ?? findForkAnchorUuid(meta.jsonlPath);
     if (anchorUuid) {
       let selfBirthtime;
       try { selfBirthtime = statSync(meta.jsonlPath).birthtimeMs; } catch { /* ignore */ }
       if (selfBirthtime != null) {
-        const hit = findSessionContainingUuid(path.dirname(meta.jsonlPath), anchorUuid, meta.jsonlPath, selfBirthtime);
-        if (hit) Object.assign(result, hit);
+        const hit = findSessionContainingUuid(path.dirname(meta.jsonlPath), anchorUuid, meta.jsonlPath, selfBirthtime, boundary?.boundaryUuid);
+        if (hit) {
+          // No compact boundary at all → fork by construction; with one, the copied
+          // boundary uuid (hit.isFork) is what separates a fork from a continuation.
+          result.parentSessionId = hit.parentSessionId;
+          result.parentJsonlPath = hit.parentJsonlPath;
+          result.relation = (!compactAnchor || hit.isFork) ? 'fork' : 'compact';
+        }
       }
     }
   }
+  result.isCompact = result.relation === 'compact';
+  result.isFork = result.relation === 'fork';
   parentSessionCache.set(sessionId, result);
   return result;
 }
@@ -2656,7 +2730,21 @@ async function validatePreviewFile(absPath) {
 
 async function readPreviewFile(absPath) {
   const { kind } = await validatePreviewFile(absPath);
-  return { content: await fs.readFile(absPath, 'utf8'), kind };
+  const raw = await fs.readFile(absPath, 'utf8');
+  if (kind !== 'html') return { content: raw, kind };
+  // The client renders HTML into a `srcdoc` iframe, which has no base URL — sibling
+  // assets have to travel inside the document or they never load.
+  try {
+    const { html, skipped } = await inlineHtmlAssets(raw, absPath);
+    for (const s of skipped) {
+      console.warn(`Preview: skipped inlining ${s.path} (${s.reason}, ${s.size} bytes)`);
+    }
+    return { content: html, kind };
+  } catch (e) {
+    // Inlining is an enhancement: a failure here must not cost the user the preview.
+    console.error('Preview: asset inlining failed, serving as authored:', e.message);
+    return { content: raw, kind };
+  }
 }
 
 // Paths copied out of a browser or a slide deck carry a URL fragment
@@ -3112,28 +3200,23 @@ async function prewarmCaches() {
   }
 }
 
-  const server = app.listen(PORT, () => {
-    const actualPort = server.address().port;
+  const onReady = (actualPort) => {
     console.log(`Claude Task Kanban running at http://localhost:${actualPort}`);
+    const warning = net.exposureWarning();
+    if (warning) console.log(warning);
 
     if (process.argv.includes('--open')) {
       import('open').then(open => open.default(`http://localhost:${actualPort}`));
     }
     setImmediate(prewarmCaches);
-  });
+  };
+
+  const server = net.listenLoopback(app, PORT, onReady);
 
   server.on('error', (err) => {
     if (err.code === 'EADDRINUSE') {
       console.log(`Port ${PORT} in use, trying random port...`);
-      const fallback = app.listen(0, () => {
-        const actualPort = fallback.address().port;
-        console.log(`Claude Task Kanban running at http://localhost:${actualPort}`);
-
-        if (process.argv.includes('--open')) {
-          import('open').then(open => open.default(`http://localhost:${actualPort}`));
-        }
-        setImmediate(prewarmCaches);
-      });
+      net.listenLoopback(app, 0, onReady);
     } else {
       throw err;
     }