contactsheet 0.1.4 → 0.1.6

package/dist/canvas/style.css

@@ -1187,3 +1187,34 @@ body:not([data-sidebar="off"]) #cs-hud { left: calc(var(--cs-sb-w) + 16px); }
   box-shadow: 0 0 0 3px var(--cs-accent), 0 0 0 6px var(--cs-accent-32);
   z-index: 4;
 }
+
+/* ---------- dev server 僵死横幅(全局,盖在一切之上但不拦事件之外的区域) ---------- */
+.cs-health {
+  position: fixed;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: var(--cs-z-overlay);
+  display: flex;
+  align-items: baseline;
+  gap: var(--cs-sp-4);
+  max-width: min(720px, 86vw);
+  padding: var(--cs-sp-4) var(--cs-sp-6);
+  border: 1px solid var(--cs-danger);
+  border-radius: var(--cs-r-3);
+  background: color-mix(in srgb, var(--cs-danger) 12%, var(--cs-s1));
+  color: var(--cs-fg);
+  font: var(--cs-fs-sm)/1.5 var(--cs-ff-sans);
+  box-shadow: var(--cs-e3);
+  /* 入场:@starting-style 由 transition 接住,无 JS 时序(MOTION-013);进入用 ease-out(MOTION-006) */
+  transition: opacity var(--cs-dur-3) var(--cs-ease-out), translate var(--cs-dur-3) var(--cs-ease-out);
+}
+@starting-style {
+  .cs-health { opacity: 0; translate: 0 -8px; }
+}
+.cs-health b { color: var(--cs-danger); font-weight: var(--cs-fw-bold); white-space: nowrap; }
+.cs-health span { color: var(--cs-fg-2); }
+@media (prefers-reduced-motion: reduce) {
+  .cs-health { transition: opacity var(--cs-dur-3) var(--cs-ease-out); }
+  @starting-style { .cs-health { translate: none; } }
+}

package/dist/cli.js

@@ -1,5 +1,11 @@
 #!/usr/bin/env node
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 
 // src/cli.ts
 import { parseArgs } from "node:util";
@@ -29,7 +35,6 @@ function loadConfig(cwd, flags) {
     // 末尾斜杠去掉,后面一律靠 `${target}/xxx` 拼
     target: String(pick("target") ?? DEFAULT_TARGET).replace(/\/+$/, ""),
     port,
-    portExplicit: flags.port !== void 0,
     appDir: pick("appDir") ?? detectAppDir(projectRoot),
     designDir: pick("designDir") ?? DEFAULT_DESIGN_DIR
   };
@@ -1147,6 +1152,56 @@ async function pushToSession(cfg, text2, pid) {
   return { ok: true, pid: target.pid, name: target.name };
 }
 
+// src/server/health.ts
+var INTERVAL_MS = Number(process.env.CS_HEALTH_INTERVAL_MS ?? 2e4);
+var TIMEOUT_MS = Number(process.env.CS_HEALTH_TIMEOUT_MS ?? 1e4);
+var FAILS_TO_TRIP = 2;
+var current = { ok: true };
+function currentHealth() {
+  return current;
+}
+function startHealthMonitor(cfg, broadcast2) {
+  let fails = 0;
+  let everOk = false;
+  let timer = null;
+  const probe = async () => {
+    let failDetail = null;
+    try {
+      const r = await fetch(`${cfg.target}/__cs/registry`, { signal: AbortSignal.timeout(TIMEOUT_MS) });
+      if (r.ok || r.status === 404) {
+        everOk = true;
+        fails = 0;
+        if (!current.ok) {
+          current = { ok: true, lastOkAt: Date.now() };
+          broadcast2({ type: "health", ok: true });
+        } else {
+          current = { ok: true, lastOkAt: Date.now() };
+        }
+        return;
+      }
+      failDetail = `SSR \u63A2\u6D4B\u8FD4\u56DE HTTP ${r.status}`;
+    } catch (err) {
+      const e = err;
+      failDetail = e.name === "TimeoutError" ? `SSR \u63A2\u6D4B ${TIMEOUT_MS / 1e3}s \u65E0\u54CD\u5E94` : `\u8FDE\u4E0D\u4E0A(${e.cause?.code ?? "network"})`;
+    }
+    if (!everOk) return;
+    fails++;
+    if (fails >= FAILS_TO_TRIP && current.ok) {
+      current = { ok: false, detail: failDetail ?? "\u672A\u77E5", lastOkAt: current.lastOkAt };
+      broadcast2({ type: "health", ok: false, detail: current.detail });
+      console.warn(`[contactsheet] \u26A0 \u76EE\u6807 ${cfg.target} \u7591\u4F3C\u50F5\u6B7B:${current.detail}(\u9759\u6001\u53EF\u80FD\u4ECD 200)\u3002\u753B\u5E03\u5DF2\u6302\u6A2A\u5E45\u3002`);
+    }
+  };
+  timer = setInterval(() => void probe(), INTERVAL_MS);
+  timer.unref();
+  void probe();
+  return {
+    close() {
+      if (timer) clearInterval(timer);
+    }
+  };
+}
+
 // src/server/sse.ts
 var clients = /* @__PURE__ */ new Set();
 var heartbeat = null;
@@ -1383,6 +1438,10 @@ async function handleApi(cfg, req, res, pathname) {
     const rel = await saveRef(cfg, body.name || "ref.png", body.dataBase64);
     return sendJson(res, 200, { path: rel });
   }
+  if (pathname === "/__cs/api/health") {
+    if (method !== "GET") return sendText(res, 405, "method not allowed");
+    return sendJson(res, 200, currentHealth());
+  }
   if (pathname === "/__cs/api/context") {
     if (method !== "GET") return sendText(res, 405, "method not allowed");
     try {
@@ -1559,6 +1618,11 @@ async function startServer(cfg) {
       res.destroy();
     }
   });
+  proxy.on("proxyReq", (proxyReq, _req, res) => {
+    res.on("close", () => {
+      if (!res.writableEnded) proxyReq.destroy();
+    });
+  });
   proxy.on("proxyRes", () => proxyLog.alive());
   proxy.on("open", () => proxyLog.alive());
   let mcp = null;
@@ -1594,9 +1658,11 @@ async function startServer(cfg) {
       warn(`\u76D1\u542C\u5728 ${host}:${port} \u2014\u2014 \u753B\u5E03\u65E0\u9274\u6743,\u540C\u7F51\u7EDC\u7684\u4EFB\u4F55\u4EBA\u90FD\u80FD\u8BFB\u4F60\u7684\u6279\u6CE8\u3001\u5E76\u5411\u4F60\u7684 Claude Code \u4F1A\u8BDD\u63A8\u9001\u6D88\u606F\u3002\u53EA\u5728\u53EF\u4FE1\u7F51\u7EDC\u8FD9\u4E48\u505A\u3002`)
     );
   }
+  const health = startHealthMonitor(cfg, broadcast);
   return {
     port,
     async close() {
+      health.close();
       closeAll();
       proxyLog.close();
       proxy.close();
@@ -1673,15 +1739,27 @@ function downPage(target) {
 function escapeHtml(s) {
   return s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
 }
-async function occupiedBySameProject(cfg, port) {
+async function probeSameProject(cfg, port) {
+  for (let i = 0; i < 2; i++) {
+    try {
+      const r = await fetch(`http://127.0.0.1:${port}/__cs/api/state`, {
+        signal: AbortSignal.timeout(2500)
+      });
+      if (!r.ok) return null;
+      const data = await r.json();
+      return data?.projectRoot === cfg.projectRoot ? { version: data.version } : null;
+    } catch {
+    }
+  }
+  return null;
+}
+function occupierPid(port) {
   try {
-    const ctl = AbortSignal.timeout(800);
-    const r = await fetch(`http://127.0.0.1:${port}/__cs/api/state`, { signal: ctl });
-    if (!r.ok) return false;
-    const data = await r.json();
-    return data?.projectRoot === cfg.projectRoot;
+    const { execSync } = __require("node:child_process");
+    const out = execSync(`lsof -t -nP -iTCP:${port} -sTCP:LISTEN`, { timeout: 3e3 }).toString().trim();
+    return out.split("\n")[0] || null;
   } catch {
-    return false;
+    return null;
   }
 }
 async function listenWithFallback(server, cfg, host, onTwin) {
@@ -1713,27 +1791,27 @@ async function listenWithFallback(server, cfg, host, onTwin) {
     return false;
   };
   if (await tryListen(cfg.port)) return cfg.port;
-  if (await occupiedBySameProject(cfg, cfg.port)) {
+  const running = await probeSameProject(cfg, cfg.port);
+  if (running) {
+    if (running.version && running.version !== pkgVersion()) {
+      const pid2 = occupierPid(cfg.port);
+      console.error(
+        warn(`\u672C\u9879\u76EE\u5DF2\u6709\u4E00\u4E2A contactsheet \u5728 ${cfg.port} \u4E0A,\u4F46\u5B83\u662F v${running.version},\u5F53\u524D\u662F v${pkgVersion()}\u3002`) + `
+  \u65E7\u5B9E\u4F8B\u4E0D\u4F1A\u81EA\u52A8\u5347\u7EA7 \u2014\u2014 \u5148\u505C\u6389\u5B83\u518D\u8D77:kill ${pid2 ?? "<lsof -t -iTCP:" + cfg.port + ">"}`
+      );
+      process.exit(1);
+    }
     console.log(
       `${cyan("\u25CF")} \u672C\u9879\u76EE\u5DF2\u7ECF\u6709\u4E00\u4E2A contactsheet \u5728\u8DD1\u4E86,\u76F4\u63A5\u7528\u5B83:${link(`http://localhost:${cfg.port}/__cs`)}`
     );
     process.exit(0);
   }
-  if (cfg.portExplicit) {
-    throw new Error(
-      `\u7AEF\u53E3 ${cfg.port} \u88AB\u5176\u4ED6\u8FDB\u7A0B\u5360\u7528\u3002\u6362\u4E00\u4E2A --port,\u6216\u627E\u51FA\u5360\u7528\u8005:lsof -nP -iTCP:${cfg.port} -sTCP:LISTEN`
-    );
-  }
-  for (let p = cfg.port + 1; p <= cfg.port + 20; p++) {
-    if (await tryListen(p)) {
-      console.warn(
-        warn(`\u7AEF\u53E3 ${cfg.port} \u88AB\u5360,\u5DF2\u987A\u5EF6\u5230 ${p} \u2192 `) + link(`http://localhost:${p}/__cs`) + "\n" + dim(`   \u6CE8\u610F:\u6362\u7AEF\u53E3 = \u6362\u6D4F\u89C8\u5668\u6E90\u3002\u753B\u677F\u4F4D\u7F6E/\u6298\u53E0/\u5E95\u8272\u8FD9\u4E9B\u672C\u673A\u8BB0\u5FC6\u6309\u6E90\u9694\u79BB,\u8FD9\u4E2A\u7AEF\u53E3\u4E0B\u662F\u5168\u65B0\u7684;
-`) + dim(`   .mcp.json \u4E0E hook \u4ECD\u6307\u5411 ${cfg.port}\u3002\u60F3\u8981\u7A33\u5B9A,\u8BF7\u91CA\u653E ${cfg.port},\u6216\u6539 config \u7684 port \u540E\u91CD\u8DD1 npx contactsheet init\u3002`)
-      );
-      return p;
-    }
-  }
-  throw new Error(`\u4ECE ${cfg.port} \u5F80\u4E0A\u8FDE\u8BD5 20 \u4E2A\u7AEF\u53E3\u90FD\u88AB\u5360,\u7528 --port \u6307\u5B9A\u4E00\u4E2A\u7A7A\u95F2\u7AEF\u53E3`);
+  const pid = occupierPid(cfg.port);
+  throw new Error(
+    `\u7AEF\u53E3 ${cfg.port} \u88AB\u5176\u4ED6\u8FDB\u7A0B\u5360\u7528${pid ? `(PID ${pid})` : ""}\u3002.mcp.json/hook/config \u90FD\u6307\u5411 ${cfg.port},\u6362\u7AEF\u53E3\u5B83\u4EEC\u4F1A\u5168\u90E8\u5931\u8054,\u6240\u4EE5\u4E0D\u81EA\u52A8\u987A\u5EF6 \u2014\u2014
+  \u91CA\u653E\u5B83:kill ${pid ?? `$(lsof -t -nP -iTCP:${cfg.port} -sTCP:LISTEN)`}
+  \u6216\u6362\u7AEF\u53E3:\u6539 contactsheet.config.json \u7684 port \u540E\u91CD\u8DD1 npx contactsheet init(MCP/hook \u4F1A\u8DDF\u7740\u6362)`
+  );
 }
 
 // src/watch/index.ts