@gachlab/devup 0.5.0 → 0.7.1

package/dist/index.js

@@ -3,10 +3,10 @@
 // src/index.ts
 import React7 from "react";
 import { render } from "ink";
-import { readFileSync as readFileSync2 } from "fs";
-import { dirname as dirname6, join as join7 } from "path";
+import { readFileSync as readFileSync3 } from "fs";
+import { dirname as dirname7, join as join9 } from "path";
 import { fileURLToPath as fileURLToPath2 } from "url";
-import { homedir as homedir3 } from "os";
+import { homedir as homedir4 } from "os";
 
 // src/config/loader.ts
 import { existsSync } from "fs";
@@ -74,6 +74,26 @@ function rewriteServicePort(svc) {
 }
 
 // src/config/validator.ts
+function collectWarnings(config) {
+  const warnings = [];
+  if (!config.services?.length) return warnings;
+  for (const svc of config.services) {
+    const ep = svc.extraEnv?.["PORT"];
+    if (ep !== void 0) {
+      const expected = String(svc.port);
+      if (ep !== expected) {
+        warnings.push({
+          field: `services[${svc.name}].extraEnv.PORT`,
+          message: `extraEnv.PORT="${ep}" does not match port=${svc.port}. devup will health-check :${svc.port} but the service will probably bind to :${ep}.`
+        });
+      }
+    }
+  }
+  return warnings;
+}
+function formatValidationWarnings(warnings) {
+  return warnings.map((w) => `  \u26A0 ${w.field}: ${w.message}`).join("\n");
+}
 function validateConfig(config, cwd) {
   const errors = [];
   if (!config.name?.trim()) {
@@ -272,6 +292,10 @@ Log files:
   --no-log-file            Disable persistent log files
   --log-dir <path>         Override log root (default: ~/.devup/logs)
 
+Hot reload:
+  --watch-config           Watch devup.config.* and apply add/remove/restart
+                           service changes without exiting the TUI
+
 Other:
   -h, --help               Show this help and exit
   -v, --version            Show version and exit
@@ -288,7 +312,8 @@ function parseCliArgs(argv) {
     dryRun: false,
     once: false,
     onceTimeout: DEFAULT_ONCE_TIMEOUT,
-    logFile: true
+    logFile: true,
+    watchConfig: false
   };
   for (let i = 0; i < argv.length; i++) {
     const arg = argv[i];
@@ -362,6 +387,9 @@ function parseCliArgs(argv) {
         args.logDir = next;
         i++;
         break;
+      case "--watch-config":
+        args.watchConfig = true;
+        break;
     }
   }
   return args;
@@ -402,7 +430,7 @@ function filterServices(services, args, config) {
 
 // src/orchestrator/subcommands.ts
 import { spawn } from "child_process";
-import { createReadStream, watchFile, unwatchFile, existsSync as existsSync4, statSync } from "fs";
+import { createReadStream, watchFile, unwatchFile, existsSync as existsSync5, statSync } from "fs";
 import { readFile as readFile2 } from "fs/promises";
 import { join as join3, dirname } from "path";
 import { fileURLToPath } from "url";
@@ -484,10 +512,8 @@ function deriveHealth(isUp, currentStatus) {
   return currentStatus === "starting" ? "wait" : "down";
 }
 
-// src/utils.ts
-import { existsSync as existsSync3, readFileSync, writeFileSync } from "fs";
-import { createHash } from "crypto";
-import { join as join2 } from "path";
+// src/utils/env.ts
+import { existsSync as existsSync3, readFileSync } from "fs";
 function parseEnvFile(filePath, baseEnv = {}) {
   const env = { ...baseEnv };
   if (!existsSync3(filePath)) return env;
@@ -505,25 +531,21 @@ function parseEnvFile(filePath, baseEnv = {}) {
   }
   return env;
 }
-function nextRamBannerVisibility(usagePct, previousVisible, highWatermark = 80, lowWatermark = 75) {
-  if (usagePct >= highWatermark) return true;
-  if (usagePct < lowWatermark) return false;
-  return previousVisible;
-}
-function redactSecrets(env) {
-  if (!env) return {};
-  const out = {};
-  for (const [k, v] of Object.entries(env)) {
-    out[k] = /secret|token|password|api[_-]?key|auth/i.test(k) ? "***" : v;
-  }
-  return out;
-}
-function detectLogLevel(line) {
-  const l = line.toLowerCase();
-  if (/\b(?:error|err|fail(?:ed|ure|ures|s)?|fatal|exception|crash(?:ed|es)?)\b/.test(l) || /❌|✗|⛔/.test(line)) return "error";
-  if (/\b(?:warn(?:ed|ing|s|ings)?|deprec)\b/.test(l) || /⚠/.test(line)) return "warn";
-  return "info";
+
+// src/utils/format.ts
+function fmtUptime(ms) {
+  if (!ms || ms < 0) return "-";
+  const s = Math.floor(ms / 1e3);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m${s % 60}s`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h${m % 60}m`;
+  const d = Math.floor(h / 24);
+  return `${d}d${h % 24}h`;
 }
+
+// src/utils/search.ts
 function compileSearchPattern(term) {
   if (!term) return null;
   const slashed = /^\/(.+)\/([gimsuy]*)$/.exec(term);
@@ -540,51 +562,47 @@ function compileSearchPattern(term) {
   const lower = term.toLowerCase();
   return { test: (l) => l.toLowerCase().includes(lower) };
 }
-function fmtUptime(ms) {
-  if (!ms || ms < 0) return "-";
-  const s = Math.floor(ms / 1e3);
-  if (s < 60) return `${s}s`;
-  const m = Math.floor(s / 60);
-  if (m < 60) return `${m}m${s % 60}s`;
-  const h = Math.floor(m / 60);
-  if (h < 24) return `${h}h${m % 60}m`;
-  const d = Math.floor(h / 24);
-  return `${d}d${h % 24}h`;
+function detectLogLevel(line) {
+  const l = line.toLowerCase();
+  if (/\b(?:error|err|fail(?:ed|ure|ures|s)?|fatal|exception|crash(?:ed|es)?)\b/.test(l) || /❌|✗|⛔/.test(line)) return "error";
+  if (/\b(?:warn(?:ed|ing|s|ings)?|deprec)\b/.test(l) || /⚠/.test(line)) return "warn";
+  return "info";
+}
+
+// src/utils/redact.ts
+function redactSecrets(env) {
+  if (!env) return {};
+  const out = {};
+  for (const [k, v] of Object.entries(env)) {
+    out[k] = /secret|token|password|api[_-]?key|auth/i.test(k) ? "***" : v;
+  }
+  return out;
 }
+
+// src/utils/install-stamp.ts
+import { existsSync as existsSync4, readFileSync as readFileSync2, writeFileSync } from "fs";
+import { createHash } from "crypto";
+import { join as join2 } from "path";
 function needsInstall(fullCwd) {
   const nm = join2(fullCwd, "node_modules");
-  if (!existsSync3(nm)) return true;
+  if (!existsSync4(nm)) return true;
   try {
-    const pkgHash = createHash("md5").update(readFileSync(join2(fullCwd, "package.json"))).digest("hex");
+    const pkgHash = createHash("md5").update(readFileSync2(join2(fullCwd, "package.json"))).digest("hex");
     const stampFile = join2(nm, ".install-stamp");
-    if (existsSync3(stampFile) && readFileSync(stampFile, "utf8") === pkgHash) return false;
+    if (existsSync4(stampFile) && readFileSync2(stampFile, "utf8") === pkgHash) return false;
   } catch {
   }
   return true;
 }
 function writeInstallStamp(fullCwd) {
   try {
-    const pkgHash = createHash("md5").update(readFileSync(join2(fullCwd, "package.json"))).digest("hex");
+    const pkgHash = createHash("md5").update(readFileSync2(join2(fullCwd, "package.json"))).digest("hex");
     writeFileSync(join2(fullCwd, "node_modules", ".install-stamp"), pkgHash);
   } catch {
   }
 }
-function sortServiceNames(names, sortMode, statsMap, procState) {
-  if (sortMode === "name") return names.slice().sort();
-  return names.slice().sort((a, b) => {
-    if (sortMode === "mem") {
-      return (parseFloat(statsMap[b]?.mem ?? "0") || 0) - (parseFloat(statsMap[a]?.mem ?? "0") || 0);
-    }
-    return (procState[b]?.errors ?? 0) - (procState[a]?.errors ?? 0);
-  });
-}
-function groupByPhase(services) {
-  const phases = {};
-  for (const s of services) {
-    (phases[s.phase] ??= []).push(s);
-  }
-  return phases;
-}
+
+// src/utils/process-args.ts
 function buildProcessArgs(svc) {
   const extra = svc.nodeArgs ?? [];
   if (!svc.maxMem) return [...extra, ...svc.args];
@@ -602,11 +620,38 @@ function buildProcessEnv(svc, baseEnv) {
   }
   return env;
 }
+
+// src/utils/stats.ts
+function sortServiceNames(names, sortMode, statsMap, procState) {
+  if (sortMode === "name") return names.slice().sort();
+  return names.slice().sort((a, b) => {
+    if (sortMode === "mem") {
+      return (parseFloat(statsMap[b]?.mem ?? "0") || 0) - (parseFloat(statsMap[a]?.mem ?? "0") || 0);
+    }
+    return (procState[b]?.errors ?? 0) - (procState[a]?.errors ?? 0);
+  });
+}
 function calcCpuPercent(totalCpuSec, prevCpu, prevTime) {
   const elapsed = (Date.now() - prevTime) / 1e3;
   const cpuDelta = totalCpuSec - prevCpu;
   return elapsed > 0 ? cpuDelta / elapsed * 100 : 0;
 }
+function nextRamBannerVisibility(usagePct, previousVisible, highWatermark = 80, lowWatermark = 75) {
+  if (usagePct >= highWatermark) return true;
+  if (usagePct < lowWatermark) return false;
+  return previousVisible;
+}
+
+// src/utils/phases.ts
+function groupByPhase(services) {
+  const phases = {};
+  for (const s of services) {
+    (phases[s.phase] ??= []).push(s);
+  }
+  return phases;
+}
+
+// src/utils/colors.ts
 var tagColors = [
   "cyan",
   "yellow",
@@ -650,7 +695,7 @@ async function runLogs(argv, opts) {
     return 1;
   }
   const file = join3(logRoot(opts.config, opts.logDir), `${sanitize(svcArg)}.log`);
-  if (!existsSync4(file)) {
+  if (!existsSync5(file)) {
     out(`No log file yet for "${svcArg}" (${file})`);
     return follow ? await followFile(file, out) : 1;
   }
@@ -668,7 +713,7 @@ async function streamFile(file, out) {
 }
 async function followFile(file, out, startAt = 0) {
   let pos = startAt;
-  while (!existsSync4(file)) await new Promise((r) => setTimeout(r, 500));
+  while (!existsSync5(file)) await new Promise((r) => setTimeout(r, 500));
   return new Promise((resolve4) => {
     const tick = async () => {
       const size = statSync(file).size;
@@ -730,7 +775,7 @@ ${items.length} services up to date`);
   return 0;
 }
 function installOne(cwd, env) {
-  if (!existsSync4(cwd)) return Promise.resolve(false);
+  if (!existsSync5(cwd)) return Promise.resolve(false);
   if (!needsInstall(cwd)) return Promise.resolve(true);
   return new Promise((resolve4) => {
     const command = process.platform === "win32" ? "npm.cmd" : "npm";
@@ -809,7 +854,7 @@ async function detectPlatform() {
 }
 
 // src/proxy-config/traefik.ts
-import { existsSync as existsSync5, mkdirSync, writeFileSync as writeFileSync2 } from "fs";
+import { existsSync as existsSync6, mkdirSync, writeFileSync as writeFileSync2 } from "fs";
 import { dirname as dirname2 } from "path";
 var EMPTY_CONFIG = "http:\n  routers: {}\n  services: {}\n";
 var TraefikProvider = class {
@@ -848,7 +893,7 @@ ${svcs.join("\n")}
   }
   write(content, opts) {
     const dir = dirname2(opts.confPath);
-    if (!existsSync5(dir)) mkdirSync(dir, { recursive: true });
+    if (!existsSync6(dir)) mkdirSync(dir, { recursive: true });
     writeFileSync2(opts.confPath, content);
   }
   clear(opts) {
@@ -857,7 +902,7 @@ ${svcs.join("\n")}
 };
 
 // src/proxy-config/nginx.ts
-import { existsSync as existsSync6, mkdirSync as mkdirSync2, writeFileSync as writeFileSync3 } from "fs";
+import { existsSync as existsSync7, mkdirSync as mkdirSync2, writeFileSync as writeFileSync3 } from "fs";
 import { dirname as dirname3 } from "path";
 var EMPTY_CONFIG2 = "# devup: no healthy services\n";
 var NginxProvider = class {
@@ -896,7 +941,7 @@ var NginxProvider = class {
   }
   write(content, opts) {
     const dir = dirname3(opts.confPath);
-    if (!existsSync6(dir)) mkdirSync2(dir, { recursive: true });
+    if (!existsSync7(dir)) mkdirSync2(dir, { recursive: true });
     writeFileSync3(opts.confPath, content);
   }
   clear(opts) {
@@ -905,7 +950,7 @@ var NginxProvider = class {
 };
 
 // src/proxy-config/caddy.ts
-import { existsSync as existsSync7, mkdirSync as mkdirSync3, writeFileSync as writeFileSync4 } from "fs";
+import { existsSync as existsSync8, mkdirSync as mkdirSync3, writeFileSync as writeFileSync4 } from "fs";
 import { dirname as dirname4 } from "path";
 var EMPTY_CONFIG3 = "# devup: no healthy services\n";
 var CaddyProvider = class {
@@ -930,7 +975,7 @@ var CaddyProvider = class {
   }
   write(content, opts) {
     const dir = dirname4(opts.confPath);
-    if (!existsSync7(dir)) mkdirSync3(dir, { recursive: true });
+    if (!existsSync8(dir)) mkdirSync3(dir, { recursive: true });
     writeFileSync4(opts.confPath, content);
   }
   clear(opts) {
@@ -954,22 +999,20 @@ function detectProxyProvider(name) {
 }
 
 // src/tui/App.tsx
-import { useEffect as useEffect5, useState as useState6, useCallback as useCallback3, useRef as useRef3 } from "react";
-import { Box as Box6, Text as Text6, useStdout } from "ink";
+import { useCallback as useCallback3, useRef as useRef5 } from "react";
+import { Box as Box6, Text as Text6 } from "ink";
 
 // src/tui/hooks/useProcessManager.ts
 import { useState, useEffect, useRef, useCallback } from "react";
 
 // src/process/manager.ts
-import { spawn as spawn3 } from "child_process";
-import { existsSync as existsSync9 } from "fs";
-import { join as join4, resolve as resolve3 } from "path";
+import { join as join5 } from "path";
 
 // src/process/installer.ts
 import { spawn as spawn2 } from "child_process";
-import { existsSync as existsSync8 } from "fs";
+import { existsSync as existsSync9 } from "fs";
 function installService(cwd, env, onLog) {
-  if (!existsSync8(cwd)) {
+  if (!existsSync9(cwd)) {
     onLog?.(`\u26A0 directory not found: ${cwd}`);
     return Promise.resolve(false);
   }
@@ -1002,9 +1045,32 @@ function installService(cwd, env, onLog) {
   });
 }
 
-// src/process/manager.ts
-var MAX_RESTARTS = 3;
-var BACKOFF_BASE_MS = 2e3;
+// src/process/spawner.ts
+import { spawn as spawn3 } from "child_process";
+import { existsSync as existsSync10 } from "fs";
+import { join as join4, resolve as resolve3 } from "path";
+
+// src/process/internals.ts
+function lineBuffer(onLine) {
+  let buf = "";
+  return {
+    push(chunk) {
+      buf += chunk.toString();
+      let idx;
+      while ((idx = buf.indexOf("\n")) !== -1) {
+        const line = buf.slice(0, idx).replace(/\r$/, "");
+        buf = buf.slice(idx + 1);
+        if (line.length) onLine(line);
+      }
+    },
+    flush() {
+      if (buf.length) {
+        onLine(buf);
+        buf = "";
+      }
+    }
+  };
+}
 function compileReadyPattern(pattern) {
   if (!pattern) return null;
   const slashed = /^\/(.+)\/([gimsuy]*)$/.exec(pattern);
@@ -1035,43 +1101,26 @@ function extractWatchPaths(args) {
   }
   return out;
 }
-function lineBuffer(onLine) {
-  let buf = "";
-  return {
-    push(chunk) {
-      buf += chunk.toString();
-      let idx;
-      while ((idx = buf.indexOf("\n")) !== -1) {
-        const line = buf.slice(0, idx).replace(/\r$/, "");
-        buf = buf.slice(idx + 1);
-        if (line.length) onLine(line);
-      }
-    },
-    flush() {
-      if (buf.length) {
-        onLine(buf);
-        buf = "";
-      }
-    }
-  };
-}
-var ProcessManager = class {
-  state = /* @__PURE__ */ new Map();
-  procs = /* @__PURE__ */ new Set();
+var MAX_RESTARTS = 3;
+var BACKOFF_BASE_MS = 2e3;
+
+// src/process/spawner.ts
+var Spawner = class {
   baseCwd;
   env;
-  platform;
+  state;
+  procs;
   events;
+  lifecycle;
+  onCrash;
   constructor(opts) {
     this.baseCwd = opts.baseCwd;
     this.env = opts.env;
-    this.platform = opts.platform;
+    this.state = opts.state;
+    this.procs = opts.procs;
     this.events = opts.events;
-  }
-  async install(svc, colorIdx) {
-    const cwd = join4(this.baseCwd, svc.cwd);
-    const idx = colorIdx ?? this.state.get(svc.name)?.colorIdx ?? 0;
-    return installService(cwd, this.env, (msg) => this.log(svc.name, msg, idx));
+    this.lifecycle = opts.lifecycle;
+    this.onCrash = opts.onCrash;
   }
   async start(svc, colorIdx, isRestart = false) {
     const cwd = join4(this.baseCwd, svc.cwd);
@@ -1090,7 +1139,7 @@ var ProcessManager = class {
       }
     }
     const args = buildProcessArgs(svc);
-    const missingWatchPaths = extractWatchPaths(args).filter((p) => !existsSync9(resolve3(cwd, p)));
+    const missingWatchPaths = extractWatchPaths(args).filter((p) => !existsSync10(resolve3(cwd, p)));
     if (missingWatchPaths.length) {
       this.log(svc.name, `\u26A0 missing watch paths: ${missingWatchPaths.join(", ")}`, colorIdx);
       this.recordCrashedState(svc, colorIdx);
@@ -1114,6 +1163,14 @@ var ProcessManager = class {
     this.state.set(svc.name, state);
     this.procs.add(proc);
     this.events.onStateChange(svc.name, state);
+    this.wireStdio(proc, svc, state, colorIdx);
+    this.wireCloseHandler(proc, svc, state, colorIdx);
+    if (svc.watchBuild) {
+      state.watchProc = this.spawnWatchBuild(svc, cwd, env, colorIdx);
+    }
+    this.log(svc.name, isRestart ? `\u{1F504} restarted (:${svc.port})` : `\u{1F680} started (:${svc.port})`, colorIdx);
+  }
+  wireStdio(proc, svc, state, colorIdx) {
     const readyRegex = compileReadyPattern(svc.readyPattern);
     const markReadyIfMatch = (line) => {
       if (!readyRegex || state.health === "up") return;
@@ -1138,9 +1195,11 @@ var ProcessManager = class {
     proc.stderr?.on("data", (d) => stderrBuf.push(d));
     proc.stdout?.on("end", () => stdoutBuf.flush());
     proc.stderr?.on("end", () => stderrBuf.flush());
+  }
+  wireCloseHandler(proc, svc, state, colorIdx) {
     proc.on("close", (code) => {
       this.procs.delete(proc);
-      this.stopWatchProc(state);
+      this.lifecycle.stopWatchProc(state);
       if (state.intentionalStop) {
         state.intentionalStop = false;
         return;
@@ -1155,23 +1214,12 @@ var ProcessManager = class {
       state.health = "down";
       this.log(svc.name, `\u274C exited with code ${code}`, colorIdx);
       this.events.onStateChange(svc.name, state);
-      if (state.restarts < MAX_RESTARTS) {
-        state.restarts++;
-        const delay = BACKOFF_BASE_MS * Math.pow(2, state.restarts - 1);
-        this.log(svc.name, `\u{1F504} auto-restart ${state.restarts}/${MAX_RESTARTS} in ${delay}ms...`, colorIdx);
-        setTimeout(() => this.start(svc, colorIdx, true), delay);
-      } else {
-        this.log(svc.name, "\u26D4 max restarts reached", colorIdx);
-      }
+      this.onCrash(svc, state, colorIdx);
     });
-    if (svc.watchBuild) {
-      state.watchProc = this.spawnWatchBuild(svc, cwd, env, colorIdx);
-    }
-    this.log(svc.name, isRestart ? `\u{1F504} restarted (:${svc.port})` : `\u{1F680} started (:${svc.port})`, colorIdx);
   }
   runPreBuild(svc, cwd, colorIdx) {
     this.log(svc.name, `\u{1F528} preBuild: ${svc.preBuild}`, colorIdx);
-    return new Promise((resolve4) => {
+    return new Promise((res) => {
       const isWin = process.platform === "win32";
       const shell = isWin ? "cmd.exe" : "sh";
       const shellFlag = isWin ? "/c" : "-c";
@@ -1183,17 +1231,17 @@ var ProcessManager = class {
       child.stderr?.on("data", (d) => errBuf.push(d));
       child.on("error", (err) => {
         this.log(svc.name, `[build] \u274C ${err.message}`, colorIdx);
-        resolve4(false);
+        res(false);
       });
       child.on("close", (code) => {
         outBuf.flush();
         errBuf.flush();
         if (code === 0) {
           this.log(svc.name, `[build] \u2705 done`, colorIdx);
-          resolve4(true);
+          res(true);
         } else {
           this.log(svc.name, `[build] \u274C exited with code ${code}`, colorIdx);
-          resolve4(false);
+          res(false);
         }
       });
     });
@@ -1216,7 +1264,8 @@ var ProcessManager = class {
     child.on("error", (err) => this.log(svc.name, `[watch] \u274C ${err.message}`, colorIdx));
     return child;
   }
-  /** Create a state entry in 'crashed' status without spawning a process (used when preBuild fails). */
+  /** Create a state entry in 'crashed' status without spawning a process
+   *  (used when preBuild fails or pre-flight checks fail). */
   recordCrashedState(svc, colorIdx) {
     const prev = this.state.get(svc.name);
     this.state.set(svc.name, {
@@ -1233,33 +1282,54 @@ var ProcessManager = class {
     });
     this.events.onStateChange(svc.name, this.state.get(svc.name));
   }
-  stop(name) {
-    const st = this.state.get(name);
-    if (!st?.proc || !st.pid) return;
-    st.intentionalStop = true;
-    this.platform.killTree(st.pid);
-    this.stopWatchProc(st);
+  log(name, text, colorIdx) {
+    this.events.onLog(name, text, colorIdx);
   }
-  stopWatchProc(state) {
-    const wp = state.watchProc;
-    if (!wp || !wp.pid) return;
-    try {
-      this.platform.killTree(wp.pid);
-    } catch {
-    }
-    state.watchProc = null;
+};
+
+// src/process/restarter.ts
+var Restarter = class {
+  state;
+  events;
+  spawner;
+  lifecycle;
+  constructor(opts) {
+    this.state = opts.state;
+    this.events = opts.events;
+    this.spawner = opts.spawner;
+    this.lifecycle = opts.lifecycle;
   }
   async restart(name) {
     const st = this.state.get(name);
     if (!st) return;
-    this.stop(name);
+    this.lifecycle.stop(name);
     st.restarts = 0;
     const delay = st.proc ? 1500 : 100;
     await new Promise((r) => setTimeout(r, delay));
-    await this.start(st.svc, st.colorIdx, true);
-    this.log(name, "\u{1F504} manual restart", st.colorIdx);
+    await this.spawner.start(st.svc, st.colorIdx, true);
+    this.events.onLog(name, "\u{1F504} manual restart", st.colorIdx);
+  }
+  scheduleAutoRestart(svc, state, colorIdx) {
+    if (state.restarts >= MAX_RESTARTS) {
+      this.events.onLog(svc.name, "\u26D4 max restarts reached", colorIdx);
+      return;
+    }
+    state.restarts++;
+    const delay = BACKOFF_BASE_MS * Math.pow(2, state.restarts - 1);
+    this.events.onLog(svc.name, `\u{1F504} auto-restart ${state.restarts}/${MAX_RESTARTS} in ${delay}ms...`, colorIdx);
+    setTimeout(() => void this.spawner.start(svc, colorIdx, true), delay);
+  }
+};
+
+// src/process/health-poller.ts
+var HealthPoller = class {
+  state;
+  events;
+  constructor(opts) {
+    this.state = opts.state;
+    this.events = opts.events;
   }
-  async checkAllHealth() {
+  async checkAll() {
     for (const [name, st] of this.state) {
       if (!st.pid || st.status === "idle") {
         st.health = st.status === "idle" ? "idle" : "down";
@@ -1276,6 +1346,41 @@ var ProcessManager = class {
       if (prev !== st.health) this.events.onStateChange(name, st);
     }
   }
+};
+
+// src/process/lifecycle.ts
+var Lifecycle = class {
+  state;
+  procs;
+  platform;
+  constructor(opts) {
+    this.state = opts.state;
+    this.procs = opts.procs;
+    this.platform = opts.platform;
+  }
+  /** Manual / external stop of a single service. Marks `intentionalStop` so the
+   *  close handler doesn't auto-restart, kills the process tree, tears down the
+   *  side-car watchBuild process if any. */
+  stop(name) {
+    const st = this.state.get(name);
+    if (!st?.proc || !st.pid) return;
+    st.intentionalStop = true;
+    this.platform.killTree(st.pid);
+    this.stopWatchProc(st);
+  }
+  /** Tears down the side-car `watchBuild` process for a service (if any) and
+   *  clears the reference. Safe to call repeatedly. */
+  stopWatchProc(state) {
+    const wp = state.watchProc;
+    if (!wp || !wp.pid) return;
+    try {
+      this.platform.killTree(wp.pid);
+    } catch {
+    }
+    state.watchProc = null;
+  }
+  /** Graceful shutdown of every spawned process. Waits `gracePeriodMs` (default
+   *  3000) for clean exits, then SIGKILLs anything still alive. */
   async cleanup(opts = {}) {
     const grace = opts.gracePeriodMs ?? 3e3;
     const procs = [...this.procs];
@@ -1316,27 +1421,88 @@ var ProcessManager = class {
     for (const st of this.state.values()) if (st.proc === proc) return st;
     return void 0;
   }
-  log(name, text, colorIdx) {
-    this.events.onLog(name, text, colorIdx);
-  }
 };
 
-// src/tui/hooks/useProcessManager.ts
-function useProcessManager(platform, baseCwd, env, logSink = null) {
-  const [states, setStates] = useState(/* @__PURE__ */ new Map());
-  const [logs, setLogs] = useState([]);
-  const [stats, setStats] = useState(/* @__PURE__ */ new Map());
-  const mgrRef = useRef(null);
-  const prevCpu = useRef(/* @__PURE__ */ new Map());
-  const pausedRef = useRef(false);
-  const pendingLogsRef = useRef([]);
-  const sinkRef = useRef(logSink);
-  sinkRef.current = logSink;
-  useEffect(() => {
-    const mgr2 = new ProcessManager({
-      baseCwd,
-      env,
-      platform,
+// src/process/manager.ts
+var ProcessManager = class {
+  state = /* @__PURE__ */ new Map();
+  procs = /* @__PURE__ */ new Set();
+  baseCwd;
+  env;
+  events;
+  spawner;
+  restarter;
+  healthPoller;
+  lifecycle;
+  constructor(opts) {
+    this.baseCwd = opts.baseCwd;
+    this.env = opts.env;
+    this.events = opts.events;
+    this.lifecycle = new Lifecycle({
+      state: this.state,
+      procs: this.procs,
+      platform: opts.platform
+    });
+    let restarterRef = null;
+    this.spawner = new Spawner({
+      baseCwd: opts.baseCwd,
+      env: opts.env,
+      state: this.state,
+      procs: this.procs,
+      events: opts.events,
+      lifecycle: this.lifecycle,
+      onCrash: (svc, state, colorIdx) => restarterRef?.scheduleAutoRestart(svc, state, colorIdx)
+    });
+    this.restarter = new Restarter({
+      state: this.state,
+      events: opts.events,
+      spawner: this.spawner,
+      lifecycle: this.lifecycle
+    });
+    restarterRef = this.restarter;
+    this.healthPoller = new HealthPoller({
+      state: this.state,
+      events: opts.events
+    });
+  }
+  install(svc, colorIdx) {
+    const cwd = join5(this.baseCwd, svc.cwd);
+    const idx = colorIdx ?? this.state.get(svc.name)?.colorIdx ?? 0;
+    return installService(cwd, this.env, (msg) => this.events.onLog(svc.name, msg, idx));
+  }
+  start(svc, colorIdx, isRestart = false) {
+    return this.spawner.start(svc, colorIdx, isRestart);
+  }
+  stop(name) {
+    this.lifecycle.stop(name);
+  }
+  restart(name) {
+    return this.restarter.restart(name);
+  }
+  checkAllHealth() {
+    return this.healthPoller.checkAll();
+  }
+  cleanup(opts = {}) {
+    return this.lifecycle.cleanup(opts);
+  }
+};
+
+// src/tui/hooks/useProcessManager.ts
+function useProcessManager(platform, baseCwd, env, logSink = null) {
+  const [states, setStates] = useState(/* @__PURE__ */ new Map());
+  const [logs, setLogs] = useState([]);
+  const [stats, setStats] = useState(/* @__PURE__ */ new Map());
+  const mgrRef = useRef(null);
+  const prevCpu = useRef(/* @__PURE__ */ new Map());
+  const pausedRef = useRef(false);
+  const pendingLogsRef = useRef([]);
+  const sinkRef = useRef(logSink);
+  sinkRef.current = logSink;
+  useEffect(() => {
+    const mgr2 = new ProcessManager({
+      baseCwd,
+      env,
+      platform,
       events: {
         onLog: (svcName, text, colorIdx) => {
           sinkRef.current?.write(svcName, text);
@@ -1546,66 +1712,352 @@ function useProxySync(provider, opts, states, enabled) {
   }, [provider, opts, enabled]);
 }
 
-// src/tui/LogsPanel.tsx
-import { useEffect as useEffect3, useMemo } from "react";
-import { Box, Text } from "ink";
-import { jsx, jsxs } from "react/jsx-runtime";
-function LogsPanel({ logs, filter, searchTerm, paused, showTimestamps, maxNameLen, height, focused, scrollOffset, resetScroll, levelFilter = "all" }) {
-  const byService = filter ? logs.filter((l) => l.svcName === filter) : logs;
-  const filtered = levelFilter === "all" ? byService : levelFilter === "error" ? byService.filter((l) => l.level === "error") : byService.filter((l) => l.level === "error" || l.level === "warn");
-  const contentHeight = Math.max(1, height - 2);
-  const totalLines = filtered.length;
-  const maxOffset = Math.max(0, totalLines - contentHeight);
-  const effectiveOffset = scrollOffset === Number.MAX_SAFE_INTEGER ? maxOffset : Math.min(scrollOffset, maxOffset);
-  const startIndex = Math.max(0, totalLines - contentHeight - effectiveOffset);
-  const endIndex = Math.min(startIndex + contentHeight, totalLines);
-  const visible = filtered.slice(startIndex, endIndex);
+// src/tui/hooks/useTerminalSize.ts
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useStdout } from "ink";
+function useTerminalSize() {
+  const { stdout } = useStdout();
+  const [rows, setRows] = useState3(stdout?.rows ?? 40);
   useEffect3(() => {
-    resetScroll();
-  }, [filter, searchTerm, resetScroll]);
-  const matcher = useMemo(() => compileSearchPattern(searchTerm), [searchTerm]);
-  const scrolled = effectiveOffset > 0;
-  const label = [
-    "Logs",
-    filter ? `[${filter}]` : "",
-    searchTerm ? `/${searchTerm}` : "",
-    matcher?.invalid ? "(invalid regex)" : "",
-    levelFilter !== "all" ? `[level: ${levelFilter}${levelFilter === "warn" ? "+error" : ""}]` : "",
-    paused ? "[PAUSED]" : "",
-    scrolled ? "[SCROLL]" : "",
-    `${filtered.length} lines`,
-    focused && totalLines > 0 ? `(${startIndex + 1}-${endIndex}/${totalLines})` : ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: focused ? "cyan" : "gray", height, children: [
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { bold: true, color: "cyan", children: [
-      " ",
-      label,
-      " "
-    ] }) }),
-    visible.map((entry, i) => {
-      const color = tagColors[entry.colorIdx % tagColors.length];
-      const ts = showTimestamps ? new Date(entry.ts).toLocaleTimeString("en-GB") + " " : "";
-      const line = entry.text;
-      const isMatch = matcher ? matcher.test(line) : false;
-      return /* @__PURE__ */ jsxs(Box, { children: [
-        showTimestamps && /* @__PURE__ */ jsx(Text, { dimColor: true, children: ts }),
-        /* @__PURE__ */ jsxs(Text, { color, children: [
-          "[",
-          entry.svcName.padEnd(maxNameLen),
-          "]"
-        ] }),
-        /* @__PURE__ */ jsx(Text, { children: " " }),
-        isMatch ? /* @__PURE__ */ jsx(Text, { backgroundColor: "yellow", color: "black", children: line }) : /* @__PURE__ */ jsx(Text, { children: line })
-      ] }, i);
-    })
-  ] });
+    if (!stdout) return;
+    const onResize = () => setRows(stdout.rows ?? 40);
+    stdout.on("resize", onResize);
+    return () => {
+      stdout.off("resize", onResize);
+    };
+  }, [stdout]);
+  return rows;
+}
+
+// src/tui/hooks/useLogsPause.ts
+import { useEffect as useEffect4 } from "react";
+function useLogsPause(setPaused, logsPaused, logsScrollOffset) {
+  useEffect4(() => {
+    setPaused(logsPaused || logsScrollOffset > 0);
+  }, [logsPaused, logsScrollOffset, setPaused]);
+}
+
+// src/tui/hooks/useControlPlane.ts
+import { useEffect as useEffect5, useRef as useRef3 } from "react";
+import { createInterface as createInterface3 } from "readline";
+import { createReadStream as createReadStream2, existsSync as existsSync12 } from "fs";
+
+// src/control-plane/socket-server.ts
+import { createServer } from "net";
+import { createInterface as createInterface2 } from "readline";
+import { existsSync as existsSync11, unlinkSync, chmodSync, mkdirSync as mkdirSync4, statSync as statSync2 } from "fs";
+import { dirname as dirname5 } from "path";
+import { join as join6 } from "path";
+import { homedir as homedir2 } from "os";
+function defaultSocketPath(projectName) {
+  const safe = projectName.replace(/[^a-zA-Z0-9._-]+/g, "_") || "devup";
+  return join6(homedir2(), ".devup", `sock-${safe}.sock`);
+}
+async function startSocketServer(projectName, ctx, opts = {}) {
+  const path = opts.path ?? defaultSocketPath(projectName);
+  mkdirSync4(dirname5(path), { recursive: true });
+  if (existsSync11(path)) {
+    try {
+      const st = statSync2(path);
+      if (st.isSocket()) unlinkSync(path);
+    } catch {
+    }
+  }
+  const server = createServer((socket) => handleClient(socket, ctx));
+  await new Promise((resolve4, reject) => {
+    server.once("error", reject);
+    server.listen(path, () => {
+      server.off("error", reject);
+      try {
+        chmodSync(path, 384);
+      } catch {
+      }
+      opts.onLog?.(`\u{1F50C} control plane at ${path}`);
+      resolve4();
+    });
+  });
+  return {
+    server,
+    path,
+    async close() {
+      await new Promise((resolve4) => server.close(() => resolve4()));
+      if (existsSync11(path)) {
+        try {
+          unlinkSync(path);
+        } catch {
+        }
+      }
+    }
+  };
+}
+function handleClient(socket, ctx) {
+  const rl = createInterface2({ input: socket });
+  rl.on("line", async (line) => {
+    if (!line.trim()) return;
+    let req;
+    try {
+      req = JSON.parse(line);
+    } catch (e) {
+      respond(socket, { error: { code: -32700, message: `parse error: ${e.message}` } });
+      return;
+    }
+    if (typeof req.method !== "string") {
+      respond(socket, { id: req.id, error: { code: -32600, message: "method required" } });
+      return;
+    }
+    try {
+      const result = await dispatch(req.method, req.params ?? {}, ctx);
+      respond(socket, { id: req.id, result });
+    } catch (e) {
+      respond(socket, { id: req.id, error: { code: -32603, message: e.message ?? String(e) } });
+    }
+  });
+  socket.on("error", () => {
+  });
+}
+function respond(socket, payload) {
+  if (socket.writable) socket.write(JSON.stringify(payload) + "\n");
+}
+async function dispatch(method, params, ctx) {
+  switch (method) {
+    case "status": {
+      const out = [];
+      for (const [name, st] of ctx.states()) {
+        out.push({
+          name,
+          status: st.status,
+          health: st.health,
+          port: st.svc.port,
+          type: st.svc.type,
+          errors: st.errors,
+          restarts: st.restarts,
+          pid: st.pid,
+          startedAt: st.startedAt
+        });
+      }
+      return { services: out };
+    }
+    case "restart": {
+      const svc = stringOrThrow(params["svc"] ?? params["service"], "svc");
+      await ctx.restart(svc);
+      return { ok: true };
+    }
+    case "stop": {
+      const svc = stringOrThrow(params["svc"] ?? params["service"], "svc");
+      ctx.stop(svc);
+      return { ok: true };
+    }
+    case "logs.tail": {
+      const svc = stringOrThrow(params["svc"] ?? params["service"], "svc");
+      const lines = Math.max(1, Math.min(1e4, Number(params["lines"] ?? 100)));
+      return { lines: await ctx.tailLogs(svc, lines) };
+    }
+    case "ping":
+      return { ok: true, ts: Date.now() };
+    default:
+      throw new Error(`unknown method: ${method}`);
+  }
+}
+function stringOrThrow(v, paramName) {
+  if (typeof v !== "string" || !v.trim()) {
+    throw new Error(`param "${paramName}" must be a non-empty string`);
+  }
+  return v;
+}
+
+// src/tui/hooks/useControlPlane.ts
+function useControlPlane(manager, projectName, logSink, pushLog) {
+  const handleRef = useRef3(null);
+  useEffect5(() => {
+    if (!manager) return;
+    let handle = null;
+    (async () => {
+      try {
+        handle = await startSocketServer(projectName, {
+          states: () => manager.state,
+          restart: (name) => manager.restart(name),
+          stop: (name) => manager.stop(name),
+          tailLogs: async (svcName, lines) => {
+            if (!logSink) return [];
+            const file = logSink.pathFor(svcName);
+            if (!existsSync12(file)) return [];
+            return new Promise((resolve4, reject) => {
+              const buf = [];
+              const rl = createInterface3({ input: createReadStream2(file, { encoding: "utf8" }) });
+              rl.on("line", (l) => {
+                buf.push(l);
+                if (buf.length > lines) buf.shift();
+              });
+              rl.on("close", () => resolve4(buf));
+              rl.on("error", reject);
+            });
+          }
+        }, { onLog: (msg) => pushLog("devup", msg, 12) });
+        handleRef.current = handle;
+      } catch (e) {
+        pushLog("devup", `\u26A0 control plane disabled: ${e.message}`, 5);
+      }
+    })();
+    return () => {
+      void handle?.close();
+      handleRef.current = null;
+    };
+  }, [manager, projectName, logSink, pushLog]);
+  return handleRef;
+}
+
+// src/tui/hooks/useHotReload.ts
+import { useEffect as useEffect6 } from "react";
+import { watch as fsWatch } from "fs";
+
+// src/config/diff.ts
+var SPAWN_RELEVANT = [
+  "cwd",
+  "cmd",
+  "args",
+  "port",
+  "phase",
+  "maxMem",
+  "preBuild",
+  "watchBuild",
+  "nodeArgs",
+  "extraEnv",
+  "healthCheck",
+  "readyPattern",
+  "errorPattern",
+  "type"
+];
+function hasSpawnRelevantChange(prev, next) {
+  for (const k of SPAWN_RELEVANT) {
+    if (JSON.stringify(prev[k]) !== JSON.stringify(next[k])) return true;
+  }
+  return false;
+}
+function diffServices(prev, next) {
+  const prevByName = new Map(prev.map((s) => [s.name, s]));
+  const nextByName = new Map(next.map((s) => [s.name, s]));
+  const added = [];
+  const removed = [];
+  const changed = [];
+  const unchanged = [];
+  for (const [name, p] of prevByName) {
+    if (!nextByName.has(name)) {
+      removed.push(name);
+      continue;
+    }
+    const n = nextByName.get(name);
+    if (hasSpawnRelevantChange(p, n)) changed.push({ prev: p, next: n });
+    else unchanged.push(name);
+  }
+  for (const [name, n] of nextByName) {
+    if (!prevByName.has(name)) added.push(n);
+  }
+  return { added, removed, changed, unchanged };
+}
+function summariseDiff(d) {
+  const parts = [];
+  if (d.added.length) parts.push(`+${d.added.length} added`);
+  if (d.removed.length) parts.push(`-${d.removed.length} removed`);
+  if (d.changed.length) parts.push(`~${d.changed.length} changed`);
+  if (!parts.length) parts.push("no changes");
+  return parts.join(", ");
+}
+
+// src/tui/hooks/useHotReload.ts
+function useHotReload(manager, cliArgs, baseCwd, pushLog) {
+  useEffect6(() => {
+    if (!cliArgs.watchConfig || !manager) return;
+    let watcher = null;
+    let configPath;
+    try {
+      configPath = findConfigFile(baseCwd, cliArgs.configPath);
+    } catch (e) {
+      pushLog("devup", `\u26A0 watch-config disabled: ${e.message}`, 5);
+      return;
+    }
+    pushLog("devup", `\u{1F440} watching ${configPath}`, 12);
+    let reloadInFlight = false;
+    let reloadAgain = false;
+    const reload = async () => {
+      if (reloadInFlight) {
+        reloadAgain = true;
+        return;
+      }
+      reloadInFlight = true;
+      try {
+        const nextCfg = await loadConfig(configPath);
+        const errs = validateConfig(nextCfg, baseCwd);
+        if (errs.length) {
+          pushLog("devup", `\u26A0 config reload failed:
+${formatValidationErrors(errs)}`, 5);
+          return;
+        }
+        const currentSvcs = [...manager.state.values()].map((s) => s.svc);
+        const diff = diffServices(currentSvcs, nextCfg.services);
+        if (!diff.added.length && !diff.removed.length && !diff.changed.length) return;
+        for (const name of diff.removed) {
+          manager.stop(name);
+          manager.state.delete(name);
+        }
+        let colorIdx = currentSvcs.length;
+        for (const { next } of diff.changed) {
+          const prev = manager.state.get(next.name);
+          const ci = prev?.colorIdx ?? colorIdx++;
+          manager.stop(next.name);
+          await new Promise((r) => setTimeout(r, 800));
+          await manager.install(next, ci);
+          await manager.start(next, ci, true);
+        }
+        for (const next of diff.added) {
+          const ci = colorIdx++;
+          await manager.install(next, ci);
+          await manager.start(next, ci);
+        }
+        pushLog("devup", `\u{1F501} config reloaded: ${summariseDiff(diff)}`, 12);
+      } catch (e) {
+        pushLog("devup", `\u26A0 config reload error: ${e.message}`, 5);
+      } finally {
+        reloadInFlight = false;
+        if (reloadAgain) {
+          reloadAgain = false;
+          void reload();
+        }
+      }
+    };
+    let debounceTimer = null;
+    watcher = fsWatch(configPath, () => {
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => void reload(), 250);
+    });
+    return () => {
+      if (debounceTimer) clearTimeout(debounceTimer);
+      watcher?.close();
+    };
+  }, [cliArgs.watchConfig, cliArgs.configPath, baseCwd, manager, pushLog]);
+}
+
+// src/tui/hooks/useContextualTips.ts
+import { useEffect as useEffect8, useRef as useRef4, useState as useState5 } from "react";
+
+// src/tui/tips.ts
+function pickTip(state) {
+  if (state.crashLoopedCount > 0 && !state.shown.has("crashed")) {
+    return { id: "crashed", message: "tip: press r to restart, or check the log of the failing service" };
+  }
+  if (state.totalLogs > 1e3 && !state.hasSearch && !state.shown.has("search")) {
+    return { id: "search", message: "tip: press / to search in logs" };
+  }
+  if (state.totalLogs > 500 && !state.hasFilter && !state.shown.has("filter")) {
+    return { id: "filter", message: "tip: press f to filter logs by service" };
+  }
+  return null;
 }
 
 // src/tui/StatsPanel.tsx
-import { useEffect as useEffect4, useState as useState3 } from "react";
-import { Box as Box2, Text as Text2 } from "ink";
+import { useEffect as useEffect7, useState as useState4 } from "react";
+import { Box, Text } from "ink";
 import os from "os";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var H = {
   up: { c: "\u25CF", color: "green" },
   wait: { c: "\u25CF", color: "yellow" },
@@ -1618,20 +2070,20 @@ function isCrashLooped(st) {
 }
 function Row({ name, st, stat, ml, verbose }) {
   const looped = isCrashLooped(st);
-  const indicator = looped ? /* @__PURE__ */ jsx2(Text2, { color: "red", bold: true, children: "\u2716" }) : /* @__PURE__ */ jsx2(Text2, { color: (H[st.health] ?? H["down"]).color, children: (H[st.health] ?? H["down"]).c });
+  const indicator = looped ? /* @__PURE__ */ jsx(Text, { color: "red", bold: true, children: "\u2716" }) : /* @__PURE__ */ jsx(Text, { color: (H[st.health] ?? H["down"]).color, children: (H[st.health] ?? H["down"]).c });
   const color = tagColors[st.colorIdx % tagColors.length];
   const sc = looped ? "red" : st.status === "running" ? "green" : st.status === "starting" ? "yellow" : st.status === "idle" ? "blue" : "red";
   const statusLabel = looped ? "looping" : st.status;
   const up = st.startedAt ? fmtUptime(Date.now() - st.startedAt) : "-";
   if (!verbose) {
-    return /* @__PURE__ */ jsxs2(Text2, { children: [
+    return /* @__PURE__ */ jsxs(Text, { children: [
       indicator,
       " ",
-      /* @__PURE__ */ jsx2(Text2, { color, children: name.padEnd(ml) }),
+      /* @__PURE__ */ jsx(Text, { color, children: name.padEnd(ml) }),
       " ",
       String(st.svc.port).padStart(5),
       " ",
-      /* @__PURE__ */ jsx2(Text2, { color: sc, bold: looped, children: statusLabel.padEnd(8) }),
+      /* @__PURE__ */ jsx(Text, { color: sc, bold: looped, children: statusLabel.padEnd(8) }),
       " ",
       (stat?.cpu ?? "-").padStart(6),
       " ",
@@ -1647,15 +2099,15 @@ function Row({ name, st, stat, ml, verbose }) {
   const resolvedArgs = buildProcessArgs(st.svc).join(" ");
   const env = redactSecrets(st.svc.extraEnv);
   const envStr = Object.entries(env).map(([k, v]) => `${k}=${v}`).join(" ");
-  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs2(Text2, { children: [
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs(Text, { children: [
       indicator,
       " ",
-      /* @__PURE__ */ jsx2(Text2, { color, children: name.padEnd(ml) }),
+      /* @__PURE__ */ jsx(Text, { color, children: name.padEnd(ml) }),
       " ",
       String(st.svc.port).padStart(5),
       " ",
-      /* @__PURE__ */ jsx2(Text2, { color: sc, bold: looped, children: statusLabel.padEnd(8) }),
+      /* @__PURE__ */ jsx(Text, { color: sc, bold: looped, children: statusLabel.padEnd(8) }),
       " ",
       (stat?.cpu ?? "-").padStart(6),
       " ",
@@ -1667,20 +2119,20 @@ function Row({ name, st, stat, ml, verbose }) {
       " ",
       up.padStart(6)
     ] }),
-    /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+    /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
       "   cmd: ",
       st.svc.cmd,
       " ",
       resolvedArgs
     ] }),
-    envStr && /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+    envStr && /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
       "   env: ",
       envStr
     ] })
   ] });
 }
 function ColHeader({ ml }) {
-  return /* @__PURE__ */ jsxs2(Text2, { bold: true, children: [
+  return /* @__PURE__ */ jsxs(Text, { bold: true, children: [
     "H ",
     "Service".padEnd(ml),
     " ",
@@ -1727,7 +2179,7 @@ function StatsPanel({ states, stats, sortMode, maxNameLen, height, focused, scro
   const webStartIndex = Math.min(effectiveOffset, Math.max(0, webs.length - rowsPerCol));
   const visibleApis = apis.slice(apiStartIndex, apiStartIndex + rowsPerCol);
   const visibleWebs = webs.slice(webStartIndex, webStartIndex + rowsPerCol);
-  useEffect4(() => {
+  useEffect7(() => {
     resetScroll();
   }, [sortMode, resetScroll]);
   const totalRowsLong = Math.max(apis.length, webs.length);
@@ -1735,24 +2187,24 @@ function StatsPanel({ states, stats, sortMode, maxNameLen, height, focused, scro
   const scrolled = effectiveOffset > 0;
   const loopedCount = [...states.values()].filter(isCrashLooped).length;
   const ramPct = parseFloat(usedGB) / parseFloat(totalGB) * 100;
-  const [ramBanner, setRamBanner] = useState3(false);
-  useEffect4(() => {
+  const [ramBanner, setRamBanner] = useState4(false);
+  useEffect7(() => {
     setRamBanner((prev) => nextRamBannerVisibility(ramPct, prev));
   }, [ramPct]);
   const topConsumers = ramBanner ? [...stats.entries()].map(([n, s]) => ({ name: n, mb: parseFloat(s.mem) || 0 })).sort((a, b) => b.mb - a.mb).slice(0, 3) : [];
-  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", borderStyle: "round", borderColor: focused ? "green" : "gray", height, children: [
-    /* @__PURE__ */ jsxs2(Box2, { children: [
-      /* @__PURE__ */ jsxs2(Text2, { bold: true, color: "green", children: [
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: focused ? "green" : "gray", height, children: [
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(Text, { bold: true, color: "green", children: [
         " Stats ",
         positionInfo
       ] }),
-      scrolled && /* @__PURE__ */ jsx2(Text2, { color: "yellow", children: " [SCROLL]" }),
-      loopedCount > 0 && /* @__PURE__ */ jsxs2(Text2, { color: "red", bold: true, children: [
+      scrolled && /* @__PURE__ */ jsx(Text, { color: "yellow", children: " [SCROLL]" }),
+      loopedCount > 0 && /* @__PURE__ */ jsxs(Text, { color: "red", bold: true, children: [
         " \u26A0 ",
         loopedCount,
         " need attention"
       ] }),
-      /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+      /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
         " System: ",
         cpus,
         "c Load ",
@@ -1763,8 +2215,8 @@ function StatsPanel({ states, stats, sortMode, maxNameLen, height, focused, scro
         totalGB,
         "GB"
       ] }),
-      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " \u2502 " }),
-      /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: " \u2502 " }),
+      /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
         "Stack: CPU ",
         totalCpu.toFixed(1),
         "% RAM ",
@@ -1776,170 +2228,67 @@ function StatsPanel({ states, stats, sortMode, maxNameLen, height, focused, scro
         " Svcs ",
         names.length
       ] }),
-      sortMode !== "name" && /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+      sortMode !== "name" && /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
         " \u2502 Sort: ",
         sortMode
       ] })
     ] }),
-    ramBanner && /* @__PURE__ */ jsxs2(Box2, { children: [
-      /* @__PURE__ */ jsxs2(Text2, { color: "yellow", bold: true, children: [
+    ramBanner && /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(Text, { color: "yellow", bold: true, children: [
         " \u26A0 RAM ",
         ramPct.toFixed(0),
         "% \u2014 top: "
       ] }),
-      /* @__PURE__ */ jsx2(Text2, { color: "yellow", children: topConsumers.map((c) => `${c.name} ${c.mb.toFixed(0)}MB`).join(", ") })
+      /* @__PURE__ */ jsx(Text, { color: "yellow", children: topConsumers.map((c) => `${c.name} ${c.mb.toFixed(0)}MB`).join(", ") })
     ] }),
-    /* @__PURE__ */ jsxs2(Box2, { flexGrow: 1, children: [
-      /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", flexGrow: 1, flexBasis: 0, children: [
-        /* @__PURE__ */ jsxs2(Text2, { bold: true, color: "cyan", children: [
+    /* @__PURE__ */ jsxs(Box, { flexGrow: 1, children: [
+      /* @__PURE__ */ jsxs(Box, { flexDirection: "column", flexGrow: 1, flexBasis: 0, children: [
+        /* @__PURE__ */ jsxs(Text, { bold: true, color: "cyan", children: [
           " APIs (",
           apis.length,
           ")"
         ] }),
-        /* @__PURE__ */ jsx2(ColHeader, { ml }),
-        visibleApis.map((n) => /* @__PURE__ */ jsx2(Row, { name: n, st: states.get(n), stat: stats.get(n), ml, verbose }, n))
+        /* @__PURE__ */ jsx(ColHeader, { ml }),
+        visibleApis.map((n) => /* @__PURE__ */ jsx(Row, { name: n, st: states.get(n), stat: stats.get(n), ml, verbose }, n))
       ] }),
-      /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", width: 1, children: Array.from({ length: contentHeight }, (_, i) => /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "\u2502" }, i)) }),
-      /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", flexGrow: 1, flexBasis: 0, children: [
-        /* @__PURE__ */ jsxs2(Text2, { bold: true, color: "magenta", children: [
+      /* @__PURE__ */ jsx(Box, { flexDirection: "column", width: 1, children: Array.from({ length: contentHeight }, (_, i) => /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }, i)) }),
+      /* @__PURE__ */ jsxs(Box, { flexDirection: "column", flexGrow: 1, flexBasis: 0, children: [
+        /* @__PURE__ */ jsxs(Text, { bold: true, color: "magenta", children: [
           " Webs (",
           webs.length,
           ")"
         ] }),
-        /* @__PURE__ */ jsx2(ColHeader, { ml }),
-        visibleWebs.map((n) => /* @__PURE__ */ jsx2(Row, { name: n, st: states.get(n), stat: stats.get(n), ml, verbose }, n))
+        /* @__PURE__ */ jsx(ColHeader, { ml }),
+        visibleWebs.map((n) => /* @__PURE__ */ jsx(Row, { name: n, st: states.get(n), stat: stats.get(n), ml, verbose }, n))
       ] })
     ] })
   ] });
 }
 
-// src/tui/StatusBar.tsx
-import { Box as Box3, Text as Text3 } from "ink";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function StatusBar() {
-  return /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsxs3(Text3, { children: [
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "q" }),
-    " Quit  ",
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "Tab" }),
-    " Switch  ",
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "\u2191\u2193" }),
-    " Scroll  ",
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "PgUp/PgDn" }),
-    " Page  ",
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "Ctrl+A/E" }),
-    " Home/End  ",
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "c" }),
-    " Clear  ",
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "f" }),
-    " Filter  ",
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "L" }),
-    " Level  ",
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "a" }),
-    " All  ",
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "r" }),
-    " Restart  ",
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "/" }),
-    " Search  ",
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "s" }),
-    " Sort  ",
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "o" }),
-    " Open  ",
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "p" }),
-    " Pause  ",
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "t" }),
-    " Time  ",
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "v" }),
-    " Verbose  ",
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "T" }),
-    " Proxy"
-  ] }) });
-}
-
-// src/tui/ServiceList.tsx
-import { useState as useState4, useMemo as useMemo2 } from "react";
-import { Box as Box4, Text as Text4, useInput as useInput2 } from "ink";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function ServiceList({ title, services, onSelect, onClose, filterType }) {
-  const allNames = useMemo2(
-    () => [...services.keys()].filter((n) => !filterType || services.get(n).svc.type === filterType),
-    [services, filterType]
-  );
-  const [idx, setIdx] = useState4(0);
-  const [query, setQuery] = useState4("");
-  const names = useMemo2(() => {
-    if (!query) return allNames;
-    const q = query.toLowerCase();
-    return allNames.filter((n) => n.toLowerCase().includes(q));
-  }, [allNames, query]);
-  const clamped = Math.min(idx, Math.max(0, names.length - 1));
-  useInput2((input, key) => {
-    if (key.escape) {
-      if (query) setQuery("");
-      else onClose();
-      return;
-    }
-    if (key.return) {
-      if (names[clamped]) onSelect(names[clamped]);
-      return;
-    }
-    if (key.upArrow) {
-      setIdx((i) => Math.max(0, i - 1));
-      return;
-    }
-    if (key.downArrow) {
-      setIdx((i) => Math.min(names.length - 1, i + 1));
-      return;
-    }
-    if (key.backspace || key.delete) {
-      setQuery((q) => q.slice(0, -1));
-      setIdx(0);
-      return;
-    }
-    if (input && !key.ctrl && !key.meta && input.length === 1) {
-      setQuery((q) => q + input);
-      setIdx(0);
+// src/tui/hooks/useContextualTips.ts
+function useContextualTips(totalLogs, hasSearch, hasFilter, states) {
+  const shownTips = useRef4(/* @__PURE__ */ new Set());
+  const [activeTip, setActiveTip] = useState5(null);
+  useEffect8(() => {
+    const tip = pickTip({
+      totalLogs,
+      hasSearch,
+      hasFilter,
+      crashLoopedCount: [...states.values()].filter(isCrashLooped).length,
+      shown: shownTips.current
+    });
+    if (tip && tip.message !== activeTip) {
+      shownTips.current.add(tip.id);
+      setActiveTip(tip.message);
+      const timer = setTimeout(() => setActiveTip(null), 12e3);
+      return () => clearTimeout(timer);
     }
-  }, { isActive: process.stdin.isTTY ?? false });
-  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [
-    /* @__PURE__ */ jsxs4(Text4, { bold: true, color: "cyan", children: [
-      " ",
-      title,
-      " ",
-      query && /* @__PURE__ */ jsxs4(Text4, { color: "yellow", children: [
-        "[",
-        query,
-        "]"
-      ] })
-    ] }),
-    names.length === 0 ? /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: " (no matches) " }) : names.map((name, i) => /* @__PURE__ */ jsx4(Box4, { children: /* @__PURE__ */ jsxs4(Text4, { color: i === clamped ? "cyan" : void 0, inverse: i === clamped, children: [
-      " ",
-      name,
-      " :",
-      services.get(name).svc.port,
-      " "
-    ] }) }, name)),
-    /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "type to filter  \u2191\u2193 navigate  Enter select  Esc clear/close" })
-  ] });
+  }, [totalLogs, states, hasSearch, hasFilter, activeTip]);
+  return activeTip;
 }
 
-// src/tui/SearchInput.tsx
-import { useState as useState5 } from "react";
-import { Box as Box5, Text as Text5, useInput as useInput3 } from "ink";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function SearchInput({ onSubmit, onClose }) {
-  const [value, setValue] = useState5("");
-  useInput3((input, key) => {
-    if (key.escape) onClose();
-    else if (key.return) onSubmit(value.trim() || null);
-    else if (key.backspace || key.delete) setValue((v) => v.slice(0, -1));
-    else if (input && !key.ctrl && !key.meta) setValue((v) => v + input);
-  }, { isActive: process.stdin.isTTY ?? false });
-  return /* @__PURE__ */ jsxs5(Box5, { borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [
-    /* @__PURE__ */ jsx5(Text5, { bold: true, color: "yellow", children: "Search: " }),
-    /* @__PURE__ */ jsx5(Text5, { children: value }),
-    /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "\u2588" })
-  ] });
-}
+// src/tui/hooks/useBootSequence.ts
+import { useEffect as useEffect9, useState as useState6 } from "react";
 
 // src/lazy/proxy.ts
 import net2 from "net";
@@ -2056,7 +2405,7 @@ function createLazyProxy(opts) {
 
 // src/process/external.ts
 import { spawn as spawn4 } from "child_process";
-import { join as join5 } from "path";
+import { join as join7 } from "path";
 var DEFAULT_START_TIMEOUT_S = 60;
 async function startExternals(externals, opts) {
   const procs = [];
@@ -2093,139 +2442,54 @@ async function stopExternals(procs, platform, opts = {}) {
           const isWin = process.platform === "win32";
           const shell = isWin ? "cmd.exe" : "sh";
           const flag = isWin ? "/c" : "-c";
-          const cwd = svc.cwd ? join5(opts.baseCwd, svc.cwd) : opts.baseCwd;
+          const cwd = svc.cwd ? join7(opts.baseCwd, svc.cwd) : opts.baseCwd;
           const env = { ...opts.env, ...svc.extraEnv ?? {} };
           const child = spawn4(shell, [flag, svc.stopCmd], { cwd, env, stdio: "ignore" });
           child.on("close", () => resolve4());
           child.on("error", () => resolve4());
-          setTimeout(() => resolve4(), 1e4);
-        });
-      }
-    } catch {
-    }
-    void proc;
-  }
-}
-function spawnExternal(svc, opts) {
-  const isWin = process.platform === "win32";
-  const shell = isWin ? "cmd.exe" : "sh";
-  const flag = isWin ? "/c" : "-c";
-  const cwd = svc.cwd ? join5(opts.baseCwd, svc.cwd) : opts.baseCwd;
-  const env = { ...opts.env, ...svc.extraEnv ?? {} };
-  opts.onLog?.(svc.name, `\u{1F680} ${svc.cmd}`);
-  const child = spawn4(shell, [flag, svc.cmd], {
-    cwd,
-    env,
-    detached: true,
-    stdio: ["ignore", "pipe", "pipe"]
-  });
-  child.stdout?.on("data", (d) => opts.onLog?.(svc.name, d.toString().trimEnd()));
-  child.stderr?.on("data", (d) => opts.onLog?.(svc.name, d.toString().trimEnd()));
-  child.on("error", (err) => opts.onLog?.(svc.name, `\u274C spawn error: ${err.message}`));
-  return child;
-}
-async function waitHealthy(svc, timeoutMs) {
-  const deadline = Date.now() + timeoutMs;
-  const port = svc.port;
-  while (Date.now() < deadline) {
-    if (await checkHealth(port, svc.healthCheck)) return true;
-    await new Promise((r) => setTimeout(r, 500));
-  }
-  return false;
-}
-
-// src/tui/tips.ts
-function pickTip(state) {
-  if (state.crashLoopedCount > 0 && !state.shown.has("crashed")) {
-    return { id: "crashed", message: "tip: press r to restart, or check the log of the failing service" };
-  }
-  if (state.totalLogs > 1e3 && !state.hasSearch && !state.shown.has("search")) {
-    return { id: "search", message: "tip: press / to search in logs" };
-  }
-  if (state.totalLogs > 500 && !state.hasFilter && !state.shown.has("filter")) {
-    return { id: "filter", message: "tip: press f to filter logs by service" };
-  }
-  return null;
-}
-
-// src/tui/App.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function buildServiceUrl(name, port, proxyActive, proxyOpts) {
-  if (proxyActive && proxyOpts) {
-    const sub = proxyOpts.routes[name];
-    if (sub !== void 0) {
-      const host = sub ? `${sub}.${proxyOpts.domain}` : proxyOpts.domain;
-      const scheme = proxyOpts.tls ? "https" : "http";
-      return `${scheme}://${host}`;
-    }
-  }
-  return `http://localhost:${port}`;
-}
-function App({ config, services, cliArgs, platform, env, baseCwd, proxyProvider, proxyOpts, logSink }) {
-  const { stdout } = useStdout();
-  const [rows, setRows] = useState6(stdout?.rows ?? 40);
-  useEffect5(() => {
-    if (!stdout) return;
-    const onResize = () => setRows(stdout.rows ?? 40);
-    stdout.on("resize", onResize);
-    return () => {
-      stdout.off("resize", onResize);
-    };
-  }, [stdout]);
-  const logsHeight = Math.floor(rows * 0.65);
-  const statsHeight = rows - logsHeight - 2;
-  const maxNameLen = Math.max(...services.map((s) => s.name.length), 10);
-  const pm = useProcessManager(platform, baseCwd, env, logSink);
-  const [booted, setBooted] = useState6(false);
-  const lazyProxies = useRef3(/* @__PURE__ */ new Map());
-  const externals = useRef3([]);
-  const shownTips = useRef3(/* @__PURE__ */ new Set());
-  const [activeTip, setActiveTip] = useState6(null);
-  const kb = useKeyBindings({
-    onQuit: () => {
-      void shutdown();
-    },
-    onClearLogs: pm.clearLogs,
-    onToggleProxy: () => {
-    }
-  });
-  const shutdown = useCallback3(async () => {
-    lazyProxies.current.forEach((p) => p.destroy());
-    await pm.cleanup();
-    if (externals.current.length) {
-      await stopExternals(externals.current, platform, {
-        baseCwd,
-        env,
-        onLog: (svc, msg) => pm.pushLog(`ext:${svc}`, msg, 12)
-      });
-      externals.current = [];
-    }
-    await logSink?.close();
-    process.exit(0);
-  }, [pm, logSink, platform, baseCwd, env]);
-  useEffect5(() => {
-    pm.setPaused(kb.logsPaused || kb.logsScrollOffset > 0);
-  }, [kb.logsPaused, kb.logsScrollOffset, pm]);
-  useEffect5(() => {
-    const tip = pickTip({
-      totalLogs: pm.logs.length,
-      hasSearch: !!kb.searchTerm,
-      hasFilter: !!kb.logFilter,
-      crashLoopedCount: [...pm.states.values()].filter(isCrashLooped).length,
-      shown: shownTips.current
-    });
-    if (tip && tip.id !== activeTip) {
-      shownTips.current.add(tip.id);
-      setActiveTip(tip.message);
-      const timer = setTimeout(() => setActiveTip(null), 12e3);
-      return () => clearTimeout(timer);
+          setTimeout(() => resolve4(), 1e4);
+        });
+      }
+    } catch {
     }
-  }, [pm.logs.length, pm.states, kb.searchTerm, kb.logFilter, activeTip]);
-  useProxySync(proxyProvider, proxyOpts, pm.states, kb.proxyEnabled);
-  useEffect5(() => {
-    if (booted || !pm.manager) return;
+    void proc;
+  }
+}
+function spawnExternal(svc, opts) {
+  const isWin = process.platform === "win32";
+  const shell = isWin ? "cmd.exe" : "sh";
+  const flag = isWin ? "/c" : "-c";
+  const cwd = svc.cwd ? join7(opts.baseCwd, svc.cwd) : opts.baseCwd;
+  const env = { ...opts.env, ...svc.extraEnv ?? {} };
+  opts.onLog?.(svc.name, `\u{1F680} ${svc.cmd}`);
+  const child = spawn4(shell, [flag, svc.cmd], {
+    cwd,
+    env,
+    detached: true,
+    stdio: ["ignore", "pipe", "pipe"]
+  });
+  child.stdout?.on("data", (d) => opts.onLog?.(svc.name, d.toString().trimEnd()));
+  child.stderr?.on("data", (d) => opts.onLog?.(svc.name, d.toString().trimEnd()));
+  child.on("error", (err) => opts.onLog?.(svc.name, `\u274C spawn error: ${err.message}`));
+  return child;
+}
+async function waitHealthy(svc, timeoutMs) {
+  const deadline = Date.now() + timeoutMs;
+  const port = svc.port;
+  while (Date.now() < deadline) {
+    if (await checkHealth(port, svc.healthCheck)) return true;
+    await new Promise((r) => setTimeout(r, 500));
+  }
+  return false;
+}
+
+// src/tui/hooks/useBootSequence.ts
+function useBootSequence(manager, config, services, cliArgs, platform, env, baseCwd, refs, pushLog) {
+  const [booted, setBooted] = useState6(false);
+  useEffect9(() => {
+    if (booted || !manager) return;
     setBooted(true);
-    const mgr = pm.manager;
+    const mgr = manager;
     (async () => {
       const lazyMode = cliArgs.lazy;
       const lazyTimeout = cliArgs.lazyTimeout;
@@ -2234,11 +2498,11 @@ function App({ config, services, cliArgs, platform, env, baseCwd, proxyProvider,
           baseCwd,
           env,
           platform,
-          onLog: (svc, msg) => pm.pushLog(`ext:${svc}`, msg, 12)
+          onLog: (svc, msg) => pushLog(`ext:${svc}`, msg, 12)
         });
-        externals.current = result.procs;
+        refs.externals.current = result.procs;
         if (!result.allHealthy) {
-          pm.pushLog("devup", `\u274C external(s) failed: ${result.failed.join(", ")}. Aborting boot.`, 5);
+          pushLog("devup", `\u274C external(s) failed: ${result.failed.join(", ")}. Aborting boot.`, 5);
           return;
         }
       }
@@ -2306,7 +2570,7 @@ function App({ config, services, cliArgs, platform, env, baseCwd, proxyProvider,
               return !!st && !!st.proc && !st.proc.killed && st.health === "up";
             }
           });
-          lazyProxies.current.set(svc.name, proxy);
+          refs.lazyProxies.current.set(svc.name, proxy);
         }
       } else {
         const phases = groupByPhase(services);
@@ -2327,7 +2591,259 @@ function App({ config, services, cliArgs, platform, env, baseCwd, proxyProvider,
         }
       }
     })();
-  }, [booted, pm.manager, services, cliArgs, config.lazy]);
+  }, [booted, manager, services, cliArgs, config.lazy, config.external, baseCwd, env, platform, refs, pushLog]);
+}
+
+// src/tui/LogsPanel.tsx
+import { useEffect as useEffect10, useMemo } from "react";
+import { Box as Box2, Text as Text2 } from "ink";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function resolveBorder(focused, filter, filteredColorIdx) {
+  if (focused) return "cyan";
+  if (filter && filteredColorIdx !== null && filteredColorIdx >= 0) {
+    return tagColors[filteredColorIdx % tagColors.length];
+  }
+  return "gray";
+}
+function LogsPanel({ logs, filter, searchTerm, paused, showTimestamps, maxNameLen, height, focused, scrollOffset, resetScroll, levelFilter = "all", filteredColorIdx = null }) {
+  const byService = filter ? logs.filter((l) => l.svcName === filter) : logs;
+  const filtered = levelFilter === "all" ? byService : levelFilter === "error" ? byService.filter((l) => l.level === "error") : byService.filter((l) => l.level === "error" || l.level === "warn");
+  const contentHeight = Math.max(1, height - 2);
+  const totalLines = filtered.length;
+  const maxOffset = Math.max(0, totalLines - contentHeight);
+  const effectiveOffset = scrollOffset === Number.MAX_SAFE_INTEGER ? maxOffset : Math.min(scrollOffset, maxOffset);
+  const startIndex = Math.max(0, totalLines - contentHeight - effectiveOffset);
+  const endIndex = Math.min(startIndex + contentHeight, totalLines);
+  const visible = filtered.slice(startIndex, endIndex);
+  useEffect10(() => {
+    resetScroll();
+  }, [filter, searchTerm, resetScroll]);
+  const matcher = useMemo(() => compileSearchPattern(searchTerm), [searchTerm]);
+  const scrolled = effectiveOffset > 0;
+  const label = [
+    "Logs",
+    filter ? `[${filter}]` : "",
+    searchTerm ? `/${searchTerm}` : "",
+    matcher?.invalid ? "(invalid regex)" : "",
+    levelFilter !== "all" ? `[level: ${levelFilter}${levelFilter === "warn" ? "+error" : ""}]` : "",
+    paused ? "[PAUSED]" : "",
+    scrolled ? "[SCROLL]" : "",
+    `${filtered.length} lines`,
+    focused && totalLines > 0 ? `(${startIndex + 1}-${endIndex}/${totalLines})` : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", borderStyle: "round", borderColor: resolveBorder(focused, filter, filteredColorIdx), height, children: [
+    /* @__PURE__ */ jsx2(Box2, { children: /* @__PURE__ */ jsxs2(Text2, { bold: true, color: "cyan", children: [
+      " ",
+      label,
+      " "
+    ] }) }),
+    visible.map((entry, i) => {
+      const color = tagColors[entry.colorIdx % tagColors.length];
+      const ts = showTimestamps ? new Date(entry.ts).toLocaleTimeString("en-GB") + " " : "";
+      const line = entry.text;
+      const isMatch = matcher ? matcher.test(line) : false;
+      return /* @__PURE__ */ jsxs2(Box2, { children: [
+        showTimestamps && /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: ts }),
+        /* @__PURE__ */ jsxs2(Text2, { color, children: [
+          "[",
+          entry.svcName.padEnd(maxNameLen),
+          "]"
+        ] }),
+        /* @__PURE__ */ jsx2(Text2, { children: " " }),
+        isMatch ? /* @__PURE__ */ jsx2(Text2, { backgroundColor: "yellow", color: "black", children: line }) : /* @__PURE__ */ jsx2(Text2, { children: line })
+      ] }, i);
+    })
+  ] });
+}
+
+// src/tui/StatusBar.tsx
+import { Box as Box3, Text as Text3 } from "ink";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function StatusBar() {
+  return /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsxs3(Text3, { children: [
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "q" }),
+    " Quit  ",
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "Tab" }),
+    " Switch  ",
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "\u2191\u2193" }),
+    " Scroll  ",
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "PgUp/PgDn" }),
+    " Page  ",
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "Ctrl+A/E" }),
+    " Home/End  ",
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "c" }),
+    " Clear  ",
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "f" }),
+    " Filter  ",
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "L" }),
+    " Level  ",
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "a" }),
+    " All  ",
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "r" }),
+    " Restart  ",
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "/" }),
+    " Search  ",
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "s" }),
+    " Sort  ",
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "o" }),
+    " Open  ",
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "p" }),
+    " Pause  ",
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "t" }),
+    " Time  ",
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "v" }),
+    " Verbose  ",
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "T" }),
+    " Proxy"
+  ] }) });
+}
+
+// src/tui/ServiceList.tsx
+import { useState as useState7, useMemo as useMemo2 } from "react";
+import { Box as Box4, Text as Text4, useInput as useInput2 } from "ink";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ServiceList({ title, services, onSelect, onClose, filterType }) {
+  const allNames = useMemo2(
+    () => [...services.keys()].filter((n) => !filterType || services.get(n).svc.type === filterType),
+    [services, filterType]
+  );
+  const [idx, setIdx] = useState7(0);
+  const [query, setQuery] = useState7("");
+  const names = useMemo2(() => {
+    if (!query) return allNames;
+    const q = query.toLowerCase();
+    return allNames.filter((n) => n.toLowerCase().includes(q));
+  }, [allNames, query]);
+  const clamped = Math.min(idx, Math.max(0, names.length - 1));
+  useInput2((input, key) => {
+    if (key.escape) {
+      if (query) setQuery("");
+      else onClose();
+      return;
+    }
+    if (key.return) {
+      if (names[clamped]) onSelect(names[clamped]);
+      return;
+    }
+    if (key.upArrow) {
+      setIdx((i) => Math.max(0, i - 1));
+      return;
+    }
+    if (key.downArrow) {
+      setIdx((i) => Math.min(names.length - 1, i + 1));
+      return;
+    }
+    if (key.backspace || key.delete) {
+      setQuery((q) => q.slice(0, -1));
+      setIdx(0);
+      return;
+    }
+    if (input && !key.ctrl && !key.meta && input.length === 1) {
+      setQuery((q) => q + input);
+      setIdx(0);
+    }
+  }, { isActive: process.stdin.isTTY ?? false });
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [
+    /* @__PURE__ */ jsxs4(Text4, { bold: true, color: "cyan", children: [
+      " ",
+      title,
+      " ",
+      query && /* @__PURE__ */ jsxs4(Text4, { color: "yellow", children: [
+        "[",
+        query,
+        "]"
+      ] })
+    ] }),
+    names.length === 0 ? /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: " (no matches) " }) : names.map((name, i) => /* @__PURE__ */ jsx4(Box4, { children: /* @__PURE__ */ jsxs4(Text4, { color: i === clamped ? "cyan" : void 0, inverse: i === clamped, children: [
+      " ",
+      name,
+      " :",
+      services.get(name).svc.port,
+      " "
+    ] }) }, name)),
+    /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "type to filter  \u2191\u2193 navigate  Enter select  Esc clear/close" })
+  ] });
+}
+
+// src/tui/SearchInput.tsx
+import { useState as useState8 } from "react";
+import { Box as Box5, Text as Text5, useInput as useInput3 } from "ink";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function SearchInput({ onSubmit, onClose }) {
+  const [value, setValue] = useState8("");
+  useInput3((input, key) => {
+    if (key.escape) onClose();
+    else if (key.return) onSubmit(value.trim() || null);
+    else if (key.backspace || key.delete) setValue((v) => v.slice(0, -1));
+    else if (input && !key.ctrl && !key.meta) setValue((v) => v + input);
+  }, { isActive: process.stdin.isTTY ?? false });
+  return /* @__PURE__ */ jsxs5(Box5, { borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [
+    /* @__PURE__ */ jsx5(Text5, { bold: true, color: "yellow", children: "Search: " }),
+    /* @__PURE__ */ jsx5(Text5, { children: value }),
+    /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "\u2588" })
+  ] });
+}
+
+// src/tui/App.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function buildServiceUrl(name, port, proxyActive, proxyOpts) {
+  if (proxyActive && proxyOpts) {
+    const sub = proxyOpts.routes[name];
+    if (sub !== void 0) {
+      const host = sub ? `${sub}.${proxyOpts.domain}` : proxyOpts.domain;
+      const scheme = proxyOpts.tls ? "https" : "http";
+      return `${scheme}://${host}`;
+    }
+  }
+  return `http://localhost:${port}`;
+}
+function App({ config, services, cliArgs, platform, env, baseCwd, proxyProvider, proxyOpts, logSink }) {
+  const rows = useTerminalSize();
+  const logsHeight = Math.floor(rows * 0.65);
+  const statsHeight = rows - logsHeight - 2;
+  const maxNameLen = Math.max(...services.map((s) => s.name.length), 10);
+  const pm = useProcessManager(platform, baseCwd, env, logSink);
+  const lazyProxies = useRef5(/* @__PURE__ */ new Map());
+  const externals = useRef5([]);
+  const kb = useKeyBindings({
+    onQuit: () => {
+      void shutdown();
+    },
+    onClearLogs: pm.clearLogs,
+    onToggleProxy: () => {
+    }
+  });
+  const socketServer = useControlPlane(pm.manager, config.name, logSink, pm.pushLog);
+  const shutdown = useCallback3(async () => {
+    lazyProxies.current.forEach((p) => p.destroy());
+    await socketServer.current?.close();
+    await pm.cleanup();
+    if (externals.current.length) {
+      await stopExternals(externals.current, platform, {
+        baseCwd,
+        env,
+        onLog: (svc, msg) => pm.pushLog(`ext:${svc}`, msg, 12)
+      });
+      externals.current = [];
+    }
+    await logSink?.close();
+    process.exit(0);
+  }, [pm, logSink, platform, baseCwd, env, socketServer]);
+  useHotReload(pm.manager, cliArgs, baseCwd, pm.pushLog);
+  useLogsPause(pm.setPaused, kb.logsPaused, kb.logsScrollOffset);
+  const activeTip = useContextualTips(pm.logs.length, !!kb.searchTerm, !!kb.logFilter, pm.states);
+  useProxySync(proxyProvider, proxyOpts, pm.states, kb.proxyEnabled);
+  useBootSequence(
+    pm.manager,
+    config,
+    services,
+    cliArgs,
+    platform,
+    env,
+    baseCwd,
+    { lazyProxies, externals },
+    pm.pushLog
+  );
   const handleFilterSelect = useCallback3((name) => kb.setFilter(name), [kb]);
   const handleRestartSelect = useCallback3((name) => {
     pm.restart(name);
@@ -2374,7 +2890,8 @@ function App({ config, services, cliArgs, platform, env, baseCwd, proxyProvider,
         focused: kb.panel === "logs",
         scrollOffset: kb.logsScrollOffset,
         resetScroll: kb.resetLogsScroll,
-        levelFilter: kb.levelFilter
+        levelFilter: kb.levelFilter,
+        filteredColorIdx: kb.logFilter ? pm.states.get(kb.logFilter)?.colorIdx ?? null : null
       }
     ),
     /* @__PURE__ */ jsx6(
@@ -2400,23 +2917,23 @@ function App({ config, services, cliArgs, platform, env, baseCwd, proxyProvider,
 }
 
 // src/process/log-sink.ts
-import { existsSync as existsSync10, mkdirSync as mkdirSync4, renameSync, createWriteStream } from "fs";
-import { join as join6, dirname as dirname5 } from "path";
-import { homedir as homedir2 } from "os";
+import { existsSync as existsSync13, mkdirSync as mkdirSync5, renameSync, createWriteStream } from "fs";
+import { join as join8, dirname as dirname6 } from "path";
+import { homedir as homedir3 } from "os";
 var LogSink = class {
   dir;
   rotateOnStart;
   streams = /* @__PURE__ */ new Map();
   seen = /* @__PURE__ */ new Set();
   constructor(opts) {
-    const root = opts.rootDir ?? join6(homedir2(), ".devup", "logs");
-    this.dir = join6(root, sanitize2(opts.projectName));
+    const root = opts.rootDir ?? join8(homedir3(), ".devup", "logs");
+    this.dir = join8(root, sanitize2(opts.projectName));
     this.rotateOnStart = opts.rotateOnStart ?? true;
-    mkdirSync4(this.dir, { recursive: true });
+    mkdirSync5(this.dir, { recursive: true });
   }
   /** Returns the file path for a service log (useful for tests / UI). */
   pathFor(svcName) {
-    return join6(this.dir, `${sanitize2(svcName)}.log`);
+    return join8(this.dir, `${sanitize2(svcName)}.log`);
   }
   write(svcName, line) {
     const stream = this.streamFor(svcName);
@@ -2435,9 +2952,9 @@ var LogSink = class {
     let s = this.streams.get(svcName);
     if (s) return s;
     const file = this.pathFor(svcName);
-    if (this.rotateOnStart && !this.seen.has(svcName) && existsSync10(file)) {
+    if (this.rotateOnStart && !this.seen.has(svcName) && existsSync13(file)) {
       try {
-        mkdirSync4(dirname5(file), { recursive: true });
+        mkdirSync5(dirname6(file), { recursive: true });
         renameSync(file, file + ".prev");
       } catch {
       }
@@ -2623,9 +3140,9 @@ function defineConfig(config) {
 // src/index.ts
 function readVersion() {
   try {
-    const here = dirname6(fileURLToPath2(import.meta.url));
-    const pkgPath = join7(here, "..", "package.json");
-    return JSON.parse(readFileSync2(pkgPath, "utf8")).version ?? "unknown";
+    const here = dirname7(fileURLToPath2(import.meta.url));
+    const pkgPath = join9(here, "..", "package.json");
+    return JSON.parse(readFileSync3(pkgPath, "utf8")).version ?? "unknown";
   } catch {
     return "unknown";
   }
@@ -2675,6 +3192,11 @@ async function main() {
 ${formatValidationErrors(errors)}`);
     process.exit(1);
   }
+  const warnings = collectWarnings(config);
+  if (warnings.length) {
+    console.warn(`\u26A0 Config warnings:
+${formatValidationWarnings(warnings)}`);
+  }
   let services;
   try {
     services = filterServices(config.services, cliArgs, config);
@@ -2687,7 +3209,7 @@ ${formatValidationErrors(errors)}`);
     process.exit(1);
   }
   const platform = await detectPlatform();
-  const envFile = config.envFile ? join7(cwd, config.envFile) : join7(cwd, ".env");
+  const envFile = config.envFile ? join9(cwd, config.envFile) : join9(cwd, ".env");
   const env = parseEnvFile(envFile, process.env);
   if (config.env) {
     for (const [k, v] of Object.entries(config.env)) {
@@ -2704,7 +3226,7 @@ ${formatValidationErrors(errors)}`);
       routes: config.proxy.routes,
       tls: cliArgs.proxyTls ?? config.proxy.tls ?? true,
       entrypoint: cliArgs.proxyEntrypoint ?? config.proxy.entrypoint ?? "websecure",
-      confPath: cliArgs.proxyConf ?? config.proxy.confPath ?? join7(homedir3(), ".traefik", "traefik_conf.yaml")
+      confPath: cliArgs.proxyConf ?? config.proxy.confPath ?? join9(homedir4(), ".traefik", "traefik_conf.yaml")
     };
   }
   if (cliArgs.dryRun) {