feinai 0.6.6 → 0.7.0

package/src/cli.ts

@@ -47,8 +47,15 @@ import {
   formatStatus,
   type OutputFormat,
 } from "./format";
+import {
+  readServerState,
+  writeServerState,
+  clearServerState,
+  findFreePort,
+  repairServerState,
+} from "./server-state";
 
-const VERSION = "0.6.4";
+const VERSION = "0.6.7";
 
 interface ParsedArgs {
   positional: string[];
@@ -130,7 +137,7 @@ function detectFormat(args: ParsedArgs): OutputFormat {
  *   2. parent process name (on Linux via /proc/$PPID/comm) → "{parent_name}:{ppid}:{user}"
  *   3. fallback: "{user}@{hostname}"
  *
- * The parent process name lets us distinguish "claude:12345:m" from "opencode:23456:m"
+ * The parent process name lets us distinguish "harness-a:12345:m" from "harness-b:23456:m"
  * from "bash:9999:m" in the events audit log without manual configuration.
  */
 function getCurrentUser(): string {
@@ -261,13 +268,13 @@ GLOBAL FLAGS:
 ENV:
   FEINAI_USER                        Override owner/actor identity used in audit log
 
-\x1b[34m\x1b[1m── Claude Code Skills ─────────────────────────────────────────────\x1b[0m
-  \x1b[36mActivate feinai skills for Claude Code (run once after install):\x1b[0m
+\x1b[34m\x1b[1m── Agent Harness Skills ───────────────────────────────────────────\x1b[0m
+  \x1b[36mActivate feinai skills for your agent harness (run once after install):\x1b[0m
 
-  \x1b[33mmkdir -p ~/.claude/skills\x1b[0m
+  \x1b[33mmkdir -p <your-harness-skills-dir>\x1b[0m
   \x1b[33mSKILLS=~/.bun/install/global/node_modules/feinai/skills\x1b[0m
   \x1b[33mfor skill in feinai-sdd feinai-write-spec feinai-write-tasks feinai-dispatch feinai-implement; do\x1b[0m
-  \x1b[33m  ln -sf "$SKILLS/$skill" ~/.claude/skills/$skill\x1b[0m
+  \x1b[33m  ln -sf "$SKILLS/$skill" <your-harness-skills-dir>/$skill\x1b[0m
   \x1b[33mdone\x1b[0m
 
   \x1b[36mSkills included:\x1b[0m
@@ -429,10 +436,11 @@ function cmdStatus(format: OutputFormat): void {
   const specs = (db.prepare(`SELECT COUNT(*) AS n FROM specs`).get() as { n: number }).n;
   const plans = (db.prepare(`SELECT COUNT(*) AS n FROM plans`).get() as { n: number }).n;
 
-  // Check if server is running by probing the port
-  const port = 8272;
-  const lsof = Bun.spawnSync(["lsof", "-ti", `tcp:${port}`]);
-  const serverRunning = lsof.exitCode === 0 && new TextDecoder().decode(lsof.stdout).trim().length > 0;
+  // Check server state: validate and repair stale records first
+  const serverRecord = repairServerState(db);
+  const serverRunning = serverRecord !== null;
+  const serverPort = serverRecord?.port ?? 8272;
+  const serverUrl = serverRunning ? `http://127.0.0.1:${serverPort}` : undefined;
 
   console.log(
     formatStatus(
@@ -443,7 +451,8 @@ function cmdStatus(format: OutputFormat): void {
         specs,
         plans,
         serverRunning,
-        serverPort: port,
+        serverPort,
+        serverUrl,
       },
       format,
     ),
@@ -770,19 +779,47 @@ function cmdSpec(rest: string[], args: ParsedArgs, format: OutputFormat): void {
 async function cmdServer(args: ParsedArgs): Promise<void> {
   const port = Number(args.options.port ?? "8272");
 
-  // --down: kill whatever is listening on the feinai port
+  // --down: stop the project's recorded server, fallback to default port
   if (args.flags["down"]) {
-    if (Number.isNaN(port) || port < 1 || port > 65535) {
+    const db = findDbPath() ? openDb() : null;
+    let targetPort = port;
+    let targetPids: number[] = [];
+
+    if (db) {
+      // Try recorded server first
+      repairServerState(db);
+      const record = readServerState(db);
+      if (record) {
+        targetPort = record.port;
+        targetPids = [record.pid];
+      }
+    }
+
+    if (Number.isNaN(targetPort) || targetPort < 1 || targetPort > 65535) {
       console.error("Error: --port must be a valid port number");
+      if (db) db.close();
       process.exit(1);
     }
-    const result = Bun.spawnSync(["lsof", "-ti", `tcp:${port}`]);
-    const pids = new TextDecoder().decode(result.stdout).trim().split("\n").filter(Boolean);
-    if (pids.length === 0) {
-      console.log(`No process found listening on port ${port}.`);
+
+    // If no recorded pids, fall back to lsof probe on target port
+    if (targetPids.length === 0) {
+      const result = Bun.spawnSync(["lsof", "-ti", `tcp:${targetPort}`]);
+      targetPids = new TextDecoder()
+        .decode(result.stdout)
+        .trim()
+        .split("\n")
+        .filter(Boolean)
+        .map((s) => Number(s))
+        .filter((n) => !isNaN(n));
+    }
+
+    if (targetPids.length === 0) {
+      console.log(`No process found listening on port ${targetPort}.`);
+      if (db) db.close();
       return;
     }
-    for (const pid of pids) {
+
+    for (const pid of targetPids) {
       try {
         process.kill(Number(pid), "SIGTERM");
         console.log(`Stopped feinai server (PID ${pid}).`);
@@ -790,6 +827,12 @@ async function cmdServer(args: ParsedArgs): Promise<void> {
         console.error(`Failed to kill PID ${pid}.`);
       }
     }
+
+    // Clear the row after stopping
+    if (db) {
+      clearServerState(db);
+      db.close();
+    }
     return;
   }
 
@@ -799,30 +842,85 @@ async function cmdServer(args: ParsedArgs): Promise<void> {
     process.exit(2);
   }
 
+  const db = ensureDb();
   const host = args.options.host ?? "127.0.0.1";
 
+  // Pre-flight consistency check: repair stale records, reject if valid server exists
+  repairServerState(db);
+  const existing = readServerState(db);
+  if (existing) {
+    console.error(
+      `feinai server is already running for this project at http://127.0.0.1:${existing.port}`,
+    );
+    console.error(`Stop it first with: feinai server --down --port ${existing.port}`);
+    db.close();
+    process.exit(1);
+  }
+
+  // Determine port: if --port is given, use it; otherwise auto-increment from 8272
+  const requestedPort = args.options.port ? Number(args.options.port) : undefined;
+  let resolvedPort: number;
+
+  if (requestedPort !== undefined) {
+    if (isNaN(requestedPort) || requestedPort < 1 || requestedPort > 65535) {
+      console.error("Error: --port must be a valid port number (1-65535)");
+      db.close();
+      process.exit(1);
+    }
+    if (findFreePort(requestedPort) !== requestedPort) {
+      console.error(`Error: port ${requestedPort} is already in use.`);
+      db.close();
+      process.exit(1);
+    }
+    resolvedPort = requestedPort;
+  } else {
+    resolvedPort = findFreePort(8272);
+  }
+
   if (args.flags["daemon"]) {
     // Spawn a detached child WITHOUT starting the server in the parent first.
     const noDaemon = (a: string) => a !== "--daemon" && a !== "-d";
     // In compiled binary argv[1] is a virtual /$bunfs/ path — skip it; user args start at argv[2].
     // In dev mode (bun src/cli.ts) argv[1] is the script path — keep it.
     const isCompiled = process.argv[1]?.startsWith("/$bunfs/");
-    const childArgs = isCompiled
-      ? [process.execPath, ...process.argv.slice(2).filter(noDaemon)]
-      : [process.execPath, ...process.argv.slice(1).filter(noDaemon)];
+    let childArgs: string[];
+    if (isCompiled) {
+      childArgs = [process.execPath, ...process.argv.slice(2).filter(noDaemon)];
+    } else {
+      childArgs = [process.execPath, ...process.argv.slice(1).filter(noDaemon)];
+    }
+    // Pass the resolved port so the child doesn't re-resolve (which could pick a different port)
+    if (!args.options.port) {
+      childArgs.push("--port", String(resolvedPort));
+    }
     const child = Bun.spawn(childArgs, { detached: true, stdio: ["ignore", "ignore", "ignore"] });
     child.unref();
-    console.log(`feinai dashboard → http://${host}:${port}`);
-    console.log(`Stop with: feinai server --down`);
+    console.log(`feinai dashboard → http://${host}:${resolvedPort}`);
+    console.log(`Stop with: feinai server --down --port ${resolvedPort}`);
+    db.close();
     return;
   }
 
   // Lazy import so server.ts and dashboard.ts aren't loaded in non-server CLI invocations.
   const { startServer } = await import("./server");
-  const server = startServer({ port, host });
+  const server = startServer({ port: resolvedPort, host });
+
+  // Write the server state row after successful bind
+  writeServerState(db, resolvedPort, process.pid);
+  db.close();
 
   console.log(`feinai dashboard listening at ${server.url}`);
-  console.log(`Stop with: feinai server --down`);
+  console.log(`Stop with: feinai server --down --port ${resolvedPort}`);
+
+  // Keep process alive until SIGINT
+  process.on("SIGINT", () => {
+    console.log("\nStopping server...");
+    const cleanupDb = ensureDb();
+    clearServerState(cleanupDb);
+    cleanupDb.close();
+    server.stop();
+    process.exit(0);
+  });
 
   // Keep process alive until SIGINT
   process.on("SIGINT", () => {

package/src/dashboard.html

@@ -293,6 +293,11 @@
       z-index: 100;
     }
     .modal-bg.visible { display: flex; }
+    @keyframes modal-in {
+      from { opacity: 0; transform: scale(0.96); }
+      to   { opacity: 1; transform: scale(1); }
+    }
+    .modal-bg.visible .modal { animation: modal-in 0.15s ease-out; }
     .modal {
       background: var(--bg-card);
       border: 1px solid var(--border-strong);
@@ -389,6 +394,13 @@
     .markdown em { color: var(--fg); font-style: italic; }
     .events-list .item { padding: 8px 16px; cursor: default; }
     .events-list .item:hover { background: transparent; }
+    .events-list .item.event-taken     { border-left: 2px solid var(--blue); }
+    .events-list .item.event-completed { border-left: 2px solid var(--green); }
+    .events-list .item.event-failed    { border-left: 2px solid var(--red); }
+    .events-list .item.event-created   { border-left: 2px solid var(--accent); }
+    .events-list .item.event-released  { border-left: 2px solid var(--gray); }
+    .events-list .item.event-started   { border-left: 2px solid var(--yellow); }
+    .event-payload { font-size:11px;color:var(--fg-dim);background:var(--bg-input);border-radius:4px;padding:6px 8px;margin:4px 0 0;overflow:auto;max-height:120px; }
     .event-type {
       font-size: 11px;
       padding: 1px 6px;
@@ -506,10 +518,17 @@
     .worktree-card {
       background: var(--bg-card);
       border: 1px solid var(--border);
+      border-left: 3px solid transparent;
       border-radius: 8px;
       padding: 12px 14px;
       font-size: 12px;
     }
+    .worktree-card[data-card-state="active"]      { border-left-color: var(--blue); }
+    .worktree-card[data-card-state="clean"]       { border-left-color: var(--gray); }
+    .worktree-card[data-card-state="error"],
+    .worktree-card[data-card-state="removed"]     { border-left-color: var(--red); }
+    .worktree-card[data-card-state="merged"]      { border-left-color: var(--green); }
+    .worktree-card[data-card-state="not-created"] { border-left-color: var(--yellow); }
     .worktree-card-header {
       display: flex;
       align-items: center;
@@ -666,6 +685,15 @@
       font-size: 13px;
       padding: 12px 0;
     }
+    .modal-meta-grid { display: grid; grid-template-columns: 120px 1fr; gap: 4px 12px; font-size: 12px; margin: 8px 0; }
+    .modal-meta-label { color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.3px; font-size: 11px; padding-top: 2px; }
+    .modal-meta-value { color: var(--fg-dim); word-break: break-all; }
+    .modal-divider { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
+    .confirm-overlay { position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center; }
+    .confirm-box { background:var(--bg-card);border:1px solid var(--border-strong);border-radius:10px;padding:24px;min-width:280px;max-width:380px; }
+    .confirm-message { margin:0 0 16px;font-size:15px; }
+    .confirm-skip { display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-dim);margin-bottom:16px;cursor:pointer; }
+    .confirm-actions { display:flex;gap:8px;justify-content:flex-end; }
   </style>
 </head>
 <body>
@@ -719,6 +747,11 @@
 
     <section class="section-wide">
       <h2>Recent events <span class="badge" id="event-count">0</span></h2>
+      <div class="filter-bar" id="event-filters">
+        <button class="filter-btn active" data-event-filter="">all</button>
+        <button class="filter-btn" data-event-filter="event">events</button>
+        <button class="filter-btn" data-event-filter="request">requests</button>
+      </div>
       <div class="list events-list" id="events-list"><div class="empty">loading...</div></div>
     </section>
   </main>
@@ -745,6 +778,17 @@
     const $$ = (sel) => Array.from(document.querySelectorAll(sel));
     let activeTaskStatuses = new Set();
     let activeSpecStatuses = new Set();
+    let activeEventFilter = '';
+    let visibleSpecIds = new Set();
+    let lastDbEvents = [];
+
+    function relativeTime(dateStr) {
+      const diff = Date.now() - new Date(dateStr).getTime();
+      if (diff < 60000) return 'just now';
+      if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago';
+      if (diff < 86400000) return Math.floor(diff / 3600000) + 'h ago';
+      return new Date(dateStr).toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
+    }
     let liveRequests = [];
 
     // -------- strings --------
@@ -786,14 +830,14 @@
       return new Promise((resolve) => {
         if (localStorage.getItem("feinai-skip-" + skipKey) === "1") { resolve(true); return; }
         const overlay = document.createElement("div");
-        overlay.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center;";
+        overlay.className = "confirm-overlay";
         overlay.innerHTML = `
-          <div style="background:var(--bg-card);border:1px solid var(--border-strong);border-radius:10px;padding:24px;min-width:280px;max-width:380px;">
-            <p style="margin:0 0 16px;font-size:15px;">${escapeHtml(message)}</p>
-            <label style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-dim);margin-bottom:16px;cursor:pointer;">
+          <div class="confirm-box">
+            <p class="confirm-message">${escapeHtml(message)}</p>
+            <label class="confirm-skip">
               <input type="checkbox" id="skip-cb"> ${t("skip_confirm")}
             </label>
-            <div style="display:flex;gap:8px;justify-content:flex-end;">
+            <div class="confirm-actions">
               <button id="confirm-cancel" class="btn">${t("cancel_btn")}</button>
               <button id="confirm-ok" class="btn primary">${t("confirm_btn")}</button>
             </div>
@@ -961,6 +1005,7 @@
 
     function renderSpecs(specs) {
       const filtered = activeSpecStatuses.size > 0 ? specs.filter((s) => activeSpecStatuses.has(s.status)) : specs;
+      visibleSpecIds = new Set(filtered.map(s => s.id));
       $("#specs-count").textContent = filtered.length;
       if (!filtered.length) {
         $("#specs-list").innerHTML = '<div class="empty">no specs match filter</div>';
@@ -997,7 +1042,14 @@
     }
 
     function renderTasks(tasks) {
-      const filtered = activeTaskStatuses.size > 0 ? tasks.filter((t) => activeTaskStatuses.has(t.status)) : tasks;
+      // Cross-filter: if specs are filtered, only show tasks belonging to visible specs
+      let crossFiltered = tasks;
+      if (activeSpecStatuses.size > 0) {
+        crossFiltered = tasks.filter(t => !t.spec_id || visibleSpecIds.has(t.spec_id));
+      }
+      const filtered = activeTaskStatuses.size > 0
+        ? crossFiltered.filter((t) => activeTaskStatuses.has(t.status))
+        : crossFiltered;
       $("#tasks-count").textContent = filtered.length;
       if (!filtered.length) {
         $("#tasks-list").innerHTML = '<div class="empty">no tasks match filter</div>';
@@ -1030,7 +1082,10 @@
         ...liveRequests.map((r) => ({ ...r, _kind: "request" })),
       ];
       all.sort((a, b) => new Date(b.created_at || b.timestamp).getTime() - new Date(a.created_at || a.timestamp).getTime());
-      const combined = all.slice(0, 50);
+      const filtered = activeEventFilter
+        ? all.filter((e) => e._kind === activeEventFilter)
+        : all;
+      const combined = filtered.slice(0, 50);
 
       $("#event-count").textContent = combined.length;
       if (!combined.length) {
@@ -1046,7 +1101,7 @@
                 <span class="method-badge ${escapeHtml(e.method.toLowerCase())}">${escapeHtml(e.method)}</span>
                 <code>${escapeHtml(e.path)}</code>
                 <span class="source-badge ${escapeHtml(e.source.toLowerCase())}">${escapeHtml(e.source)}</span>
-                <span style="color: var(--fg-dim); margin-left: auto;">${escapeHtml(e.timestamp)}</span>
+                <span style="color: var(--fg-dim); margin-left: auto;">${relativeTime(e.created_at ?? e.ts ?? e.timestamp)}</span>
               </div>
               <div class="item-meta">
                 <span>${escapeHtml(e.actor)}</span>
@@ -1054,16 +1109,17 @@
             </div>
           `;
         }
+        const payload = (() => { try { return e.payload ? JSON.parse(e.payload) : null; } catch { return e.payload || null; } })();
         return `
-          <div class="item">
+          <div class="item event-${escapeHtml(e.event_type)}">
             <div class="item-row1">
               <span class="event-type ${escapeHtml(e.event_type)}">${escapeHtml(e.event_type)}</span>
               <code>${escapeHtml(e.entity_type)}/${escapeHtml(e.entity_id)}</code>
-              <span style="color: var(--fg-dim); margin-left: auto;">${escapeHtml(e.created_at)}</span>
+              <span style="color: var(--fg-dim); margin-left: auto;">${relativeTime(e.created_at ?? e.ts)}</span>
             </div>
             <div class="item-meta">
               ${e.actor ? `<span>${escapeHtml(e.actor)}</span>` : ""}
-              ${e.payload ? `<code style="color: var(--fg-faint);">${escapeHtml(e.payload)}</code>` : ""}
+              ${payload ? `<details><summary style="cursor:pointer;color:var(--fg-faint);font-size:11px;list-style:none;">payload ▸</summary><pre class="event-payload">${escapeHtml(JSON.stringify(payload, null, 2))}</pre></details>` : ""}
             </div>
           </div>
         `;
@@ -1101,6 +1157,7 @@
         actions.push(`<button class="btn danger" data-action="delete-spec" data-id="${escapeHtml(spec.id)}">delete</button>`);
         setModalBody(`
           ${actions.length ? `<div class="modal-actions">${actions.join("")}</div>` : ""}
+          <hr class="modal-divider">
           ${spec.content ? `
             <div class="modal-section">
               <h3>Spec content <span class="badge">${spec.content.length}B</span></h3>
@@ -1111,6 +1168,7 @@
               <h3>Plan v${latest_plan.version} <span class="badge">${latest_plan.content.length}B</span></h3>
               <div class="markdown">${renderMarkdown(latest_plan.content)}</div>
             </div>` : ""}
+          <hr class="modal-divider">
           <div class="modal-section">
             <h3>Tasks <span class="badge">${tasks.length}</span></h3>
             <div>${tasks.length === 0 ? '<div class="empty">no tasks</div>' : tasks.map((task) => `
@@ -1161,20 +1219,23 @@
         if (taskData.spec_id) {
           actions.unshift(`<button class="btn" data-action="back-to-spec" data-spec="${escapeHtml(taskData.spec_id)}">← ${escapeHtml(taskData.spec_id)}</button>`);
         }
+        const metaRows = [
+          taskData.owner        ? `<span class="modal-meta-label">Owner</span><span class="modal-meta-value">${escapeHtml(taskData.owner)}</span>` : "",
+          taskData.taken_at     ? `<span class="modal-meta-label">Taken</span><span class="modal-meta-value">${escapeHtml(taskData.taken_at)}</span>` : "",
+          taskData.completed_at ? `<span class="modal-meta-label">Completed</span><span class="modal-meta-value">${escapeHtml(taskData.completed_at)}</span>` : "",
+          taskData.worktree     ? `<span class="modal-meta-label">Worktree</span><span class="modal-meta-value"><code>${escapeHtml(taskData.worktree)}</code></span>` : "",
+          taskData.blocked_by?.length ? `<span class="modal-meta-label">Blocked by</span><span class="modal-meta-value">${taskData.blocked_by.map((id) => `<code>${escapeHtml(id)}</code>`).join(", ")}</span>` : "",
+          taskData.packages?.length   ? `<span class="modal-meta-label">Packages</span><span class="modal-meta-value">${taskData.packages.map((p) => `<code>${escapeHtml(p)}</code>`).join(", ")}</span>` : "",
+          taskData.quality_gates?.length ? `<span class="modal-meta-label">Quality gates</span><span class="modal-meta-value">${taskData.quality_gates.map((g) => `<code>${escapeHtml(g)}</code>`).join("<br>")}</span>` : "",
+        ].filter(Boolean).join("");
         setModalBody(`
           ${actions.length ? `<div class="modal-actions">${actions.join("")}</div>` : ""}
+          <hr class="modal-divider">
           <div class="modal-section">
             <h3>Metadata</h3>
-            <div class="item-meta">
-              ${taskData.owner ? `<span><strong>owner:</strong> ${escapeHtml(taskData.owner)}</span>` : ""}
-              ${taskData.taken_at ? `<span><strong>taken:</strong> ${escapeHtml(taskData.taken_at)}</span>` : ""}
-              ${taskData.completed_at ? `<span><strong>completed:</strong> ${escapeHtml(taskData.completed_at)}</span>` : ""}
-            </div>
-            ${taskData.worktree ? `<div style="margin-top:8px;"><strong>worktree:</strong> <code>${escapeHtml(taskData.worktree)}</code></div>` : ""}
-            ${taskData.blocked_by?.length ? `<div style="margin-top:8px;"><strong>blocked by:</strong> ${taskData.blocked_by.map((id) => `<code>${escapeHtml(id)}</code>`).join(", ")}</div>` : ""}
-            ${taskData.packages?.length ? `<div style="margin-top:8px;"><strong>packages:</strong> ${taskData.packages.map((p) => `<code>${escapeHtml(p)}</code>`).join(", ")}</div>` : ""}
-            ${taskData.quality_gates?.length ? `<div style="margin-top:8px;"><strong>quality gates:</strong><ul style="margin: 4px 0 0 16px;">${taskData.quality_gates.map((g) => `<li><code>${escapeHtml(g)}</code></li>`).join("")}</ul></div>` : ""}
+            <div class="modal-meta-grid">${metaRows}</div>
           </div>
+          <hr class="modal-divider">
           ${taskData.description ? `
             <div class="modal-section">
               <h3>Description / workplan</h3>
@@ -1495,13 +1556,29 @@
         worktreeElapsedTimer = setInterval(() => {
           document.querySelectorAll('[data-elapsed]').forEach((el) => {
             const iso = el.getAttribute('data-elapsed');
-            el.textContent = iso ? elapsedSince(iso) : '';
+            if (iso) {
+              el.textContent = elapsedSince(iso);
+              const minutes = Math.floor((Date.now() - new Date(iso).getTime()) / 60000);
+              if (minutes >= 60) el.style.color = 'var(--red)';
+              else if (minutes >= 30) el.style.color = 'var(--yellow)';
+              else el.style.color = 'var(--fg-dim)';
+            } else {
+              el.textContent = '';
+            }
           });
         }, 1000);
         // Immediate first update
         document.querySelectorAll('[data-elapsed]').forEach((el) => {
           const iso = el.getAttribute('data-elapsed');
-          el.textContent = iso ? elapsedSince(iso) : '';
+          if (iso) {
+            el.textContent = elapsedSince(iso);
+            const minutes = Math.floor((Date.now() - new Date(iso).getTime()) / 60000);
+            if (minutes >= 60) el.style.color = 'var(--red)';
+            else if (minutes >= 30) el.style.color = 'var(--yellow)';
+            else el.style.color = 'var(--fg-dim)';
+          } else {
+            el.textContent = '';
+          }
         });
       }
     }
@@ -1525,6 +1602,14 @@
       }
     }
 
+    function gitFileColor(line) {
+      if (/^(\?\?|!!)\s/.test(line)) return 'var(--fg-faint)';
+      if (/^A[\s]/.test(line) || /^[A-Z]A/.test(line)) return 'var(--green)';
+      if (/^D[\s]/.test(line) || /^[A-Z]D/.test(line)) return 'var(--red)';
+      if (/M/.test(line.slice(0,2))) return 'var(--yellow)';
+      return 'var(--fg-dim)';
+    }
+
     function updateWorktreeCard(id, data) {
       const badgeEl = $(`[data-state-badge="${CSS.escape(id)}"]`);
       const filesEl = $(`[data-files="${CSS.escape(id)}"]`);
@@ -1534,6 +1619,8 @@
       const state = worktreeStateBadge(data);
       badgeEl.className = `worktree-state ${state.cls}`;
       badgeEl.textContent = state.text;
+      const card = badgeEl.closest('.worktree-card');
+      if (card) card.dataset.cardState = state.cls;
       const agent = agentProcesses.find((a) => a.taskId === id);
       if (processEl) {
         const ownerEl = badgeEl.closest('.worktree-card')?.querySelector('.owner');
@@ -1548,7 +1635,7 @@
       }
       if (filesEl) {
         filesEl.innerHTML = data.files?.length
-          ? data.files.map((f) => `<li>${escapeHtml(f)}</li>`).join("")
+          ? data.files.map((f) => `<li style="color: ${gitFileColor(f)}">${escapeHtml(f)}</li>`).join("")
           : "";
       }
       if (commitEl) {
@@ -1572,6 +1659,7 @@
         renderSpecs(specs);
         renderTasks(tasks);
         renderWorktreeCards(tasks);
+        lastDbEvents = dbEvents;
         renderCombinedEvents(dbEvents);
       } catch (err) {
         console.error("refresh failed:", err);
@@ -1652,7 +1740,9 @@
     }
 
     // -------- Boot --------
-    $("#modal-bg").addEventListener("click", (e) => { if (e.target === $("#modal-bg")) closeModal(); });
+    $('#modal-bg').addEventListener('click', (e) => {
+      if (e.target === e.currentTarget) closeModal();
+    });
     $("#modal-close").addEventListener("click", closeModal);
     document.addEventListener("keydown", (e) => { if (e.key === "Escape") closeModal(); });
     $$("#task-filters .filter-btn").forEach((btn) => {
@@ -1687,6 +1777,14 @@
         refresh();
       });
     });
+    $$("#event-filters .filter-btn").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        activeEventFilter = btn.dataset.eventFilter;
+        $$("#event-filters .filter-btn").forEach((b) => b.classList.remove("active"));
+        btn.classList.add("active");
+        renderCombinedEvents(lastDbEvents);
+      });
+    });
     $("#new-spec-btn").addEventListener("click", openNewSpecModal);
     $("#new-task-btn").addEventListener("click", openNewTaskModal);
 

package/src/db.ts

@@ -61,6 +61,14 @@ const SCHEMA_STATEMENTS: string[] = [
     created_at   TEXT NOT NULL DEFAULT (datetime('now'))
   )`,
 
+  `CREATE TABLE IF NOT EXISTS server_state (
+    id          INTEGER PRIMARY KEY CHECK (id = 1),
+    port        INTEGER NOT NULL,
+    pid         INTEGER NOT NULL,
+    started_at  TEXT NOT NULL,
+    updated_at  TEXT NOT NULL DEFAULT (datetime('now'))
+  )`,
+
   `CREATE INDEX IF NOT EXISTS idx_tasks_status ON tasks(status)`,
   `CREATE INDEX IF NOT EXISTS idx_tasks_spec_id ON tasks(spec_id)`,
   `CREATE INDEX IF NOT EXISTS idx_tasks_owner ON tasks(owner)`,

package/src/format.ts

@@ -148,12 +148,12 @@ export function formatPlanList(plans: Plan[], format: OutputFormat): string {
 }
 
 export function formatStatus(
-  stats: { pending: number; in_progress: number; completed: number; specs: number; plans: number; serverRunning?: boolean; serverPort?: number },
+  stats: { pending: number; in_progress: number; completed: number; specs: number; plans: number; serverRunning?: boolean; serverPort?: number; serverUrl?: string },
   format: OutputFormat,
 ): string {
   if (format === "json") return JSON.stringify(stats, null, 2);
   const serverLine = stats.serverRunning
-    ? c(format, "green", `server:      running → http://127.0.0.1:${stats.serverPort}`)
+    ? c(format, "green", `server:      running → ${stats.serverUrl ?? `http://127.0.0.1:${stats.serverPort}`}`)
     : c(format, "dim",   `server:      stopped  (feinai server -d to start)`);
   return [
     `${c(format, "yellow", `pending:     ${stats.pending}`)}`,