Colors, background headless, new mcps

francescov1 · francescov1 · commit 45e155661f48 · 2026-02-12T10:57:31.000-08:00
diff --git a/kern.jsonc b/kern.jsonc
@@ -12,29 +12,34 @@
 
   "processes": [
     {
-      "name": "Counter",
-      "command": "while true; do echo \"[$(date +%H:%M:%S)] tick $(( i++ ))\"; sleep 1; done"
+      "name": "Worker",
+      "command": "trap 'printf \"\\033[33m[Worker]\\033[0m SIGTERM received, finishing current job...\\n\"; sleep 2; printf \"\\033[33m[Worker]\\033[0m Job completed. Shutting down.\\n\"; exit 0' TERM; printf '\\033[1;35m[Worker]\\033[0m Connected to job queue\\n'; while true; do JOB=$((RANDOM % 1000)); printf '\\033[35m[Worker]\\033[0m Processing job \\033[1m#%d\\033[0m...\\n' \"$JOB\"; sleep 3; printf '\\033[35m[Worker]\\033[0m Job \\033[1m#%d\\033[0m \\033[32mdone\\033[0m\\n' \"$JOB\"; done",
+      // Worker shuts down first (finish current job before API stops accepting)
+      "shutdownOrder": 1
     },
     {
-      "name": "Logger",
-      "command": "for i in $(seq 1 50); do echo \"Log line $i\"; sleep 0.2; done; echo 'Done!' >&2",
-      // Intentionally bad cwd to demo crash handling
-      "cwd": "./logs"
+      "name": "API Server",
+      "command": "trap 'printf \"\\033[33m[API]\\033[0m Graceful shutdown: closing connections...\\n\"; sleep 1; printf \"\\033[33m[API]\\033[0m Draining request queue...\\n\"; sleep 1; printf \"\\033[33m[API]\\033[0m Shutdown complete.\\n\"; exit 0' TERM; printf '\\033[1;32m[API]\\033[0m Server started on \\033[36mhttp://localhost:3000\\033[0m\\n'; while true; do printf '\\033[32m[API]\\033[0m %s \\033[1mGET\\033[0m /api/health \\033[32m200\\033[0m %dms\\n' \"$(date +%H:%M:%S)\" \"$((RANDOM % 50 + 5))\"; sleep 2; done",
+      // API + Cache shut down together (order 2)
+      "shutdownOrder": 2
+    },
+    {
+      "name": "Cache",
+      "command": "trap 'printf \"\\033[33m[Cache]\\033[0m Persisting cache to disk...\\n\"; sleep 2; printf \"\\033[33m[Cache]\\033[0m Written 1247 keys. Shutdown complete.\\n\"; exit 0' TERM; printf '\\033[1;36m[Cache]\\033[0m Redis-like cache ready on port \\033[36m6379\\033[0m\\n'; while true; do printf '\\033[36m[Cache]\\033[0m %s \\033[90mHIT\\033[0m session:%d \\033[90m<1ms\\033[0m\\n' \"$(date +%H:%M:%S)\" \"$((RANDOM % 500))\"; sleep 3; done",
+      // Cache shuts down with API (same order 2, so they stop in parallel)
+      "shutdownOrder": 2
     },
     {
-      "name": "Watcher",
-      "command": "echo 'Watching files...' && while true; do echo \"$(date +%H:%M:%S) - no changes\"; sleep 3; done",
-      // Pass custom environment variables
-      "env": {
-        "WATCH_DIR": "./src",
-        "POLL_INTERVAL": "3"
-      }
+      "name": "DB",
+      "command": "trap 'printf \"\\033[33m[DB]\\033[0m Flushing WAL to disk...\\n\"; sleep 1; printf \"\\033[33m[DB]\\033[0m Closing connections...\\n\"; sleep 1; printf \"\\033[33m[DB]\\033[0m Clean shutdown.\\n\"; exit 0' TERM; printf '\\033[1;34m[DB]\\033[0m Database ready on port \\033[36m5432\\033[0m\\n'; while true; do printf '\\033[34m[DB]\\033[0m %s \\033[90mquery\\033[0m SELECT * FROM users \\033[90m%dms\\033[0m\\n' \"$(date +%H:%M:%S)\" \"$((RANDOM % 10 + 1))\"; sleep 4; done",
+      // DB shuts down last, after everything else is gone
+      "shutdownOrder": 3
     },
     {
-      "name": "Health Check",
-      "command": "while true; do echo \"$(date +%H:%M:%S) healthy\"; sleep 5; done",
-      // Skip the parent template for this process (runs on host even when parent is set)
-      "noParent": true
+      "name": "Migrations",
+      "command": "printf '\\033[36m[Migrate]\\033[0m Running migrations...\\n'; sleep 1; printf '\\033[36m[Migrate]\\033[0m Applied: 001_create_users\\n'; sleep 0.5; printf '\\033[36m[Migrate]\\033[0m Applied: 002_add_sessions\\n'; sleep 0.5; printf '\\033[31m[Migrate]\\033[0m FATAL: column \"email\" already exists in \"users\"\\n' >&2; exit 1",
+      // Crashes on its own — demos the red crashed status dot
+      "cwd": "./logs"
     }
   ]
 }
diff --git a/src/components/LogViewer.tsx b/src/components/LogViewer.tsx
@@ -1,5 +1,6 @@
 import { useRef, useMemo, useEffect } from "react";
 import { useKernTheme } from "../lib/theme-context.ts";
+import { parseAnsi, hasAnsi, stripAnsi } from "../lib/ansi.ts";
 import type { ScrollBoxRenderable } from "@opentui/core";
 import type { ProcessState, LogLine } from "../lib/types.ts";
 
@@ -28,12 +29,14 @@ function findMatchIndices(logs: LogLine[], query: string): number[] {
   try {
     const re = new RegExp(query, "i");
     for (let i = 0; i < logs.length; i++) {
-      if (re.test(logs[i]!.text)) indices.push(i);
+      const plain = stripAnsi(logs[i]!.text);
+      if (re.test(plain)) indices.push(i);
     }
   } catch {
     const lower = query.toLowerCase();
     for (let i = 0; i < logs.length; i++) {
-      if (logs[i]!.text.toLowerCase().includes(lower)) indices.push(i);
+      const plain = stripAnsi(logs[i]!.text);
+      if (plain.toLowerCase().includes(lower)) indices.push(i);
     }
   }
   return indices;
@@ -133,22 +136,28 @@ export function LogViewer({
           logs.map((line, i) => {
             const isMatch = matchSet.has(i);
             const isCurrent = i === targetLogIndex;
+            // Override color: search current match > stderr > ANSI colors
+            const overrideFg = isCurrent
+              ? colors.searchCurrentMatchText
+              : line.stream === "stderr"
+                ? colors.stderrText
+                : undefined;
+
             return (
               <box
                 key={i}
                 paddingLeft={1}
                 backgroundColor={isCurrent ? colors.searchCurrentMatchBackground : isMatch ? colors.searchMatchBackground : undefined}
               >
-                <text
-                  fg={
-                    isCurrent
-                      ? colors.searchCurrentMatchText
-                      : line.stream === "stderr"
-                        ? colors.stderrText
-                        : undefined
+                <text fg={overrideFg}>
+                  {overrideFg || !hasAnsi(line.text)
+                    ? line.text.replace(/\x1b\[[0-9;]*m/g, "")
+                    : parseAnsi(line.text).map((seg, j) => (
+                        <span key={j} fg={seg.fg} bg={seg.bg}>
+                          {seg.text}
+                        </span>
+                      ))
                   }
-                >
-                  {line.text}
                 </text>
               </box>
             );
diff --git a/src/index.tsx b/src/index.tsx
@@ -8,6 +8,49 @@ if (args.includes("--headless")) {
     console.error("Usage: kern --headless <config.jsonc> [config2.jsonc ...]");
     process.exit(1);
   }
+
+  const { resolve } = await import("path");
+  const { listSessions } = await import("./lib/session.ts");
+
+  const before = new Set((await listSessions()).map((s) => s.id));
+  const absolutePaths = configPaths.map((p) => resolve(p));
+
+  // Spawn the daemon process in the background
+  const isCompiled = process.execPath === process.argv[1] || !process.argv[1];
+  const entryScript = isCompiled ? [] : [process.argv[1]!];
+  const child = Bun.spawn([process.execPath, ...entryScript, "--daemon", ...absolutePaths], {
+    stdio: ["ignore", "ignore", "ignore"],
+    env: process.env,
+  });
+  child.unref();
+
+  // Poll for the session file (up to 5 seconds)
+  const deadline = Date.now() + 5000;
+  let newSession = null;
+  while (Date.now() < deadline) {
+    await new Promise((r) => setTimeout(r, 200));
+    const current = await listSessions();
+    newSession = current.find((s) => !before.has(s.id) && s.pid === child.pid);
+    if (newSession) break;
+  }
+
+  if (newSession) {
+    console.log(`kern started in background`);
+    console.log(`  session:   ${newSession.id}`);
+    console.log(`  pid:       ${newSession.pid}`);
+    console.log(`  processes: ${newSession.processNames.join(", ")}`);
+    console.log();
+    console.log(`Attach:  kern --attach ${newSession.id}`);
+    console.log(`Stop:    kern --stop ${newSession.id}`);
+  } else {
+    console.log(`kern spawned in background (pid ${child.pid})`);
+    console.log(`Use 'kern --list' to see sessions once ready.`);
+  }
+
+  process.exit(0);
+} else if (args.includes("--daemon")) {
+  // Internal: the actual headless process running in the background
+  const configPaths = args.filter((a) => a !== "--daemon");
   const { runHeadless } = await import("./headless.ts");
   await runHeadless(configPaths);
 } else if (args.includes("--attach")) {
@@ -64,10 +107,10 @@ if (args.includes("--headless")) {
   const configPaths = args;
   if (configPaths.length === 0) {
     console.error("Usage: kern <config.jsonc> [config2.jsonc ...]");
-    console.error("       kern --headless <config.jsonc>");
-    console.error("       kern --attach <session-id>");
-    console.error("       kern --list");
-    console.error("       kern --stop <session-id>");
+    console.error("       kern --headless <config.jsonc>    Start in background (detached)");
+    console.error("       kern --attach <session-id>        Attach to a session");
+    console.error("       kern --list                       List active sessions");
+    console.error("       kern --stop <session-id>          Stop a session");
     process.exit(1);
   }
 
diff --git a/src/lib/ansi.ts b/src/lib/ansi.ts
@@ -0,0 +1,189 @@
+/** Parse ANSI escape codes into styled segments for rendering */
+
+export interface AnsiSegment {
+  text: string;
+  fg?: string;
+  bg?: string;
+  bold?: boolean;
+  dim?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+}
+
+const ANSI_COLORS: Record<number, string> = {
+  30: "#000000", 31: "#cc0000", 32: "#4e9a06", 33: "#c4a000",
+  34: "#3465a4", 35: "#75507b", 36: "#06989a", 37: "#d3d7cf",
+  90: "#555753", 91: "#ef2929", 92: "#8ae234", 93: "#fce94f",
+  94: "#729fcf", 95: "#ad7fa8", 96: "#34e2e2", 97: "#eeeeec",
+};
+
+const ANSI_BG_COLORS: Record<number, string> = {
+  40: "#000000", 41: "#cc0000", 42: "#4e9a06", 43: "#c4a000",
+  44: "#3465a4", 45: "#75507b", 46: "#06989a", 47: "#d3d7cf",
+  100: "#555753", 101: "#ef2929", 102: "#8ae234", 103: "#fce94f",
+  104: "#729fcf", 105: "#ad7fa8", 106: "#34e2e2", 107: "#eeeeec",
+};
+
+// 256-color palette (indices 0-255)
+const COLOR_256: string[] = (() => {
+  const palette: string[] = [];
+  // 0-7: standard colors
+  palette.push("#000000", "#cc0000", "#4e9a06", "#c4a000", "#3465a4", "#75507b", "#06989a", "#d3d7cf");
+  // 8-15: bright colors
+  palette.push("#555753", "#ef2929", "#8ae234", "#fce94f", "#729fcf", "#ad7fa8", "#34e2e2", "#eeeeec");
+  // 16-231: 6x6x6 color cube
+  for (let r = 0; r < 6; r++) {
+    for (let g = 0; g < 6; g++) {
+      for (let b = 0; b < 6; b++) {
+        const rv = r === 0 ? 0 : 55 + r * 40;
+        const gv = g === 0 ? 0 : 55 + g * 40;
+        const bv = b === 0 ? 0 : 55 + b * 40;
+        palette.push(`#${rv.toString(16).padStart(2, "0")}${gv.toString(16).padStart(2, "0")}${bv.toString(16).padStart(2, "0")}`);
+      }
+    }
+  }
+  // 232-255: grayscale
+  for (let i = 0; i < 24; i++) {
+    const v = 8 + i * 10;
+    palette.push(`#${v.toString(16).padStart(2, "0")}${v.toString(16).padStart(2, "0")}${v.toString(16).padStart(2, "0")}`);
+  }
+  return palette;
+})();
+
+// Regex to match ANSI escape sequences
+const ANSI_RE = /\x1b\[([0-9;]*)m/g;
+
+interface AnsiState {
+  fg?: string;
+  bg?: string;
+  bold?: boolean;
+  dim?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+}
+
+function applyCode(state: AnsiState, codes: number[]): void {
+  let i = 0;
+  while (i < codes.length) {
+    const code = codes[i]!;
+
+    if (code === 0) {
+      state.fg = undefined;
+      state.bg = undefined;
+      state.bold = undefined;
+      state.dim = undefined;
+      state.italic = undefined;
+      state.underline = undefined;
+    } else if (code === 1) {
+      state.bold = true;
+    } else if (code === 2) {
+      state.dim = true;
+    } else if (code === 3) {
+      state.italic = true;
+    } else if (code === 4) {
+      state.underline = true;
+    } else if (code === 22) {
+      state.bold = undefined;
+      state.dim = undefined;
+    } else if (code === 23) {
+      state.italic = undefined;
+    } else if (code === 24) {
+      state.underline = undefined;
+    } else if (code === 39) {
+      state.fg = undefined;
+    } else if (code === 49) {
+      state.bg = undefined;
+    } else if (code >= 30 && code <= 37) {
+      state.fg = ANSI_COLORS[code];
+    } else if (code >= 90 && code <= 97) {
+      state.fg = ANSI_COLORS[code];
+    } else if (code >= 40 && code <= 47) {
+      state.bg = ANSI_BG_COLORS[code];
+    } else if (code >= 100 && code <= 107) {
+      state.bg = ANSI_BG_COLORS[code];
+    } else if (code === 38 && codes[i + 1] === 5 && codes[i + 2] !== undefined) {
+      state.fg = COLOR_256[codes[i + 2]!] ?? undefined;
+      i += 2;
+    } else if (code === 48 && codes[i + 1] === 5 && codes[i + 2] !== undefined) {
+      state.bg = COLOR_256[codes[i + 2]!] ?? undefined;
+      i += 2;
+    } else if (code === 38 && codes[i + 1] === 2 && codes.length >= i + 5) {
+      const r = codes[i + 2]!;
+      const g = codes[i + 3]!;
+      const b = codes[i + 4]!;
+      state.fg = `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+      i += 4;
+    } else if (code === 48 && codes[i + 1] === 2 && codes.length >= i + 5) {
+      const r = codes[i + 2]!;
+      const g = codes[i + 3]!;
+      const b = codes[i + 4]!;
+      state.bg = `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+      i += 4;
+    }
+
+    i++;
+  }
+}
+
+export function parseAnsi(text: string): AnsiSegment[] {
+  const segments: AnsiSegment[] = [];
+  const state: AnsiState = {};
+  let lastIndex = 0;
+
+  ANSI_RE.lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = ANSI_RE.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      const chunk = text.slice(lastIndex, match.index);
+      if (chunk) {
+        segments.push({
+          text: chunk,
+          ...(state.fg && { fg: state.fg }),
+          ...(state.bg && { bg: state.bg }),
+          ...(state.bold && { bold: true }),
+          ...(state.dim && { dim: true }),
+          ...(state.italic && { italic: true }),
+          ...(state.underline && { underline: true }),
+        });
+      }
+    }
+
+    const codeStr = match[1]!;
+    const codes = codeStr === "" ? [0] : codeStr.split(";").map(Number);
+    applyCode(state, codes);
+
+    lastIndex = ANSI_RE.lastIndex;
+  }
+
+  if (lastIndex < text.length) {
+    const chunk = text.slice(lastIndex);
+    if (chunk) {
+      segments.push({
+        text: chunk,
+        ...(state.fg && { fg: state.fg }),
+        ...(state.bg && { bg: state.bg }),
+        ...(state.bold && { bold: true }),
+        ...(state.dim && { dim: true }),
+        ...(state.italic && { italic: true }),
+        ...(state.underline && { underline: true }),
+      });
+    }
+  }
+
+  if (segments.length === 0 && text) {
+    segments.push({ text });
+  }
+
+  return segments;
+}
+
+/** Check if text contains any ANSI escape codes */
+export function hasAnsi(text: string): boolean {
+  return /\x1b\[/.test(text);
+}
+
+/** Strip ANSI codes from text (for search, MCP output, etc.) */
+export function stripAnsi(text: string): string {
+  return text.replace(/\x1b\[[0-9;]*m/g, "");
+}
diff --git a/src/lib/mcp-server.ts b/src/lib/mcp-server.ts
diff --git a/src/lib/process-manager.ts b/src/lib/process-manager.ts
