@atercates/claude-deck 0.2.14 → 0.2.16

package/data/tunnels/queries.ts

@@ -0,0 +1,51 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+
+const tunnelKeys = {
+  status: () => ["tunnels", "status"] as const,
+};
+
+export function useCloudflaredStatus() {
+  return useQuery({
+    queryKey: tunnelKeys.status(),
+    queryFn: async () => {
+      const res = await fetch("/api/tunnels");
+      if (!res.ok) return { installed: false, tunnels: [] };
+      return res.json() as Promise<{
+        installed: boolean;
+        tunnels: { port: number; url: string | null }[];
+      }>;
+    },
+    staleTime: 60_000,
+  });
+}
+
+export function useStartTunnel() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (port: number) => {
+      const res = await fetch(`/api/tunnels/${port}`, { method: "POST" });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "Failed to start tunnel");
+      }
+      return res.json() as Promise<{ port: number; url: string | null }>;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: tunnelKeys.status() });
+    },
+  });
+}
+
+export function useStopTunnel() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (port: number) => {
+      const res = await fetch(`/api/tunnels/${port}`, { method: "DELETE" });
+      if (!res.ok) throw new Error("Failed to stop tunnel");
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: tunnelKeys.status() });
+    },
+  });
+}

package/lib/claude/watcher.ts

@@ -3,7 +3,11 @@ import path from "path";
 import os from "os";
 import { WebSocket } from "ws";
 import { invalidateProject, invalidateAll } from "./jsonl-cache";
-import { onStateFileChange, invalidateSessionName } from "../status-monitor";
+import {
+  onStateFileChange,
+  invalidateSessionName,
+  getStatusSnapshot,
+} from "../status-monitor";
 import { STATES_DIR } from "../hooks/setup";
 
 const CLAUDE_PROJECTS_DIR = path.join(os.homedir(), ".claude", "projects");
@@ -13,6 +17,11 @@ const updateClients = new Set<WebSocket>();
 export function addUpdateClient(ws: WebSocket): void {
   updateClients.add(ws);
   ws.on("close", () => updateClients.delete(ws));
+
+  const snapshot = getStatusSnapshot();
+  if (Object.keys(snapshot).length > 0) {
+    ws.send(JSON.stringify({ type: "session-statuses", statuses: snapshot }));
+  }
 }
 
 export function broadcast(msg: object): void {

package/lib/db/migrations.ts

@@ -6,7 +6,17 @@ interface Migration {
   up: (db: Database.Database) => void;
 }
 
-const migrations: Migration[] = [];
+const migrations: Migration[] = [
+  {
+    id: 1,
+    name: "add_session_listening_ports",
+    up: (db) => {
+      db.exec(
+        "ALTER TABLE sessions ADD COLUMN listening_ports TEXT NOT NULL DEFAULT '[]'"
+      );
+    },
+  },
+];
 
 export function runMigrations(db: Database.Database): void {
   db.exec(`

package/lib/db/types.ts

@@ -29,6 +29,7 @@ export interface Session {
   conductor_session_id: string | null;
   worker_task: string | null;
   worker_status: "pending" | "running" | "completed" | "failed" | null;
+  listening_ports: string;
 }
 
 export interface Project {

package/lib/dev-servers.ts

@@ -2,7 +2,12 @@ import { spawn, exec } from "child_process";
 import { promisify } from "util";
 import fs from "fs";
 import path from "path";
-import { queries, type DevServer, type DevServerType, type DevServerStatus } from "./db";
+import {
+  queries,
+  type DevServer,
+  type DevServerType,
+  type DevServerStatus,
+} from "./db";
 
 const execAsync = promisify(exec);
 
@@ -49,53 +54,60 @@ async function isPidRunning(pid: number): Promise<boolean> {
   }
 }
 
-// Check if a port is in use
-async function isPortInUse(port: number): Promise<boolean> {
-  try {
-    const { stdout } = await execAsync(
-      `lsof -i :${port} -t 2>/dev/null || true`
-    );
-    return stdout.trim().length > 0;
-  } catch {
-    return false;
-  }
-}
-
-// Get PID using a port
-async function getPidOnPort(port: number): Promise<number | null> {
-  try {
-    const { stdout } = await execAsync(
-      `lsof -i :${port} -t 2>/dev/null | head -1`
-    );
-    const pid = parseInt(stdout.trim(), 10);
-    return isNaN(pid) ? null : pid;
-  } catch {
-    return null;
+// Detect which TCP ports a process is listening on via lsof
+async function detectListeningPorts(
+  pid: number,
+  retries = 5
+): Promise<number[]> {
+  for (let i = 0; i < retries; i++) {
+    try {
+      const { stdout } = await execAsync(
+        `lsof -P -iTCP -sTCP:LISTEN -a -p ${pid} -Fn 2>/dev/null || true`
+      );
+      const ports = [
+        ...new Set(
+          stdout
+            .split("\n")
+            .filter((line) => line.startsWith("n"))
+            .map((line) => parseInt(line.slice(line.lastIndexOf(":") + 1), 10))
+            .filter((port) => !isNaN(port) && port > 0)
+        ),
+      ].sort((a, b) => a - b);
+
+      if (ports.length > 0) return ports;
+    } catch {
+      // lsof failed, retry
+    }
+    if (i < retries - 1) {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+    }
   }
+  return [];
 }
 
 // Check Node.js server status
 async function checkNodeStatus(server: DevServer): Promise<DevServerStatus> {
-  if (server.pid) {
-    const running = await isPidRunning(server.pid);
-    if (running) return "running";
-  }
+  if (!server.pid) return "stopped";
 
-  // Check if any of its ports are in use
-  const ports: number[] = JSON.parse(server.ports || "[]");
-  for (const port of ports) {
-    if (await isPortInUse(port)) {
-      // Port is in use, try to get the PID
-      const pid = await getPidOnPort(port);
-      if (pid) {
-        // Update PID in database
-        await queries.updateDevServerPid(pid, "running", server.id);
-        return "running";
-      }
+  const running = await isPidRunning(server.pid);
+  if (!running) return "stopped";
+
+  const ports = await detectListeningPorts(server.pid, 1);
+  if (ports.length > 0) {
+    const current = JSON.stringify(ports);
+    if (current !== server.ports) {
+      await queries.updateDevServer(
+        "running",
+        server.pid,
+        null,
+        current,
+        server.id
+      );
+      server.ports = current;
     }
   }
 
-  return "stopped";
+  return "running";
 }
 
 // Check Docker service status
@@ -269,7 +281,13 @@ export async function startServer(
         opts.command,
         opts.workingDirectory
       );
-      await queries.updateDevServer("running", null, containerId, JSON.stringify(ports), id);
+      await queries.updateDevServer(
+        "running",
+        null,
+        containerId,
+        JSON.stringify(ports),
+        id
+      );
     } else {
       const { pid } = await spawnNodeServer(
         id,
@@ -277,7 +295,15 @@ export async function startServer(
         opts.workingDirectory,
         ports
       );
-      await queries.updateDevServer("running", pid, null, JSON.stringify(ports), id);
+      const detectedPorts = await detectListeningPorts(pid);
+      const resolvedPorts = detectedPorts.length > 0 ? detectedPorts : ports;
+      await queries.updateDevServer(
+        "running",
+        pid,
+        null,
+        JSON.stringify(resolvedPorts),
+        id
+      );
     }
   } catch (error) {
     await queries.updateDevServerStatus("failed", id);
@@ -314,19 +340,6 @@ export async function stopServer(id: string): Promise<void> {
         // Process may already be dead
       }
     }
-
-    // Also check ports and kill anything on them
-    const ports: number[] = JSON.parse(server.ports || "[]");
-    for (const port of ports) {
-      const pid = await getPidOnPort(port);
-      if (pid) {
-        try {
-          process.kill(pid, "SIGTERM");
-        } catch {
-          // Ignore
-        }
-      }
-    }
   }
 
   await queries.updateDevServerStatus("stopped", id);
@@ -345,7 +358,13 @@ export async function restartServer(id: string): Promise<DevServer> {
       server.command,
       server.working_directory
     );
-    await queries.updateDevServer("running", null, containerId, server.ports, id);
+    await queries.updateDevServer(
+      "running",
+      null,
+      containerId,
+      server.ports,
+      id
+    );
   } else {
     const ports: number[] = JSON.parse(server.ports || "[]");
     const { pid } = await spawnNodeServer(
@@ -354,7 +373,15 @@ export async function restartServer(id: string): Promise<DevServer> {
       server.working_directory,
       ports
     );
-    await queries.updateDevServer("running", pid, null, server.ports, id);
+    const detectedPorts = await detectListeningPorts(pid);
+    const resolvedPorts = detectedPorts.length > 0 ? detectedPorts : ports;
+    await queries.updateDevServer(
+      "running",
+      pid,
+      null,
+      JSON.stringify(resolvedPorts),
+      id
+    );
   }
 
   return (await queries.getDevServer(id))!;
@@ -415,23 +442,14 @@ export async function detectNodeServer(
     const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
     const scripts = packageJson.scripts || {};
 
-    // Look for common dev server scripts
     const devScripts = ["dev", "start", "serve", "develop"];
     for (const script of devScripts) {
       if (scripts[script]) {
-        // Try to detect port from script
-        const scriptContent = scripts[script];
-        let port = 3000; // default
-        const portMatch = scriptContent.match(/(?:port|PORT)[=\s]+(\d+)/i);
-        if (portMatch) {
-          port = parseInt(portMatch[1], 10);
-        }
-
         return {
           type: "node",
           name: packageJson.name || path.basename(workingDir),
           command: `npm run ${script}`,
-          ports: [port],
+          ports: [],
         };
       }
     }

package/lib/status-monitor.ts

@@ -20,6 +20,7 @@ import {
 import type { AgentType } from "./providers";
 import { broadcast } from "./claude/watcher";
 import { getDb } from "./db";
+import { getTunnelUrls } from "./tunnels";
 import { STATES_DIR } from "./hooks/setup";
 import { getSessionInfo } from "@anthropic-ai/claude-agent-sdk";
 
@@ -54,6 +55,8 @@ export interface SessionStatusSnapshot {
   waitingContext?: string;
   claudeSessionId: string | null;
   agentType: AgentType;
+  listeningPorts: number[];
+  tunnelUrls: Record<number, string>;
 }
 
 // --- State ---
@@ -88,6 +91,88 @@ function listStateFiles(): Map<string, StateFile> {
   return map;
 }
 
+// --- Port detection ---
+
+interface ListeningProcess {
+  pid: string;
+  port: number;
+  cwd: string;
+}
+
+let cachedListeners: { data: ListeningProcess[]; ts: number } | null = null;
+const LISTENER_CACHE_TTL = 2500;
+
+async function getListeningProcesses(): Promise<ListeningProcess[]> {
+  const now = Date.now();
+  if (cachedListeners && now - cachedListeners.ts < LISTENER_CACHE_TTL) {
+    return cachedListeners.data;
+  }
+
+  try {
+    const { stdout } = await execAsync(
+      `lsof -P -iTCP -sTCP:LISTEN -Fn 2>/dev/null || true`
+    );
+
+    // Parse lsof output: lines alternate between p (pid) and n (name)
+    const results: ListeningProcess[] = [];
+    let currentPid = "";
+    for (const line of stdout.split("\n")) {
+      if (line.startsWith("p")) {
+        currentPid = line.slice(1);
+      } else if (line.startsWith("n") && currentPid) {
+        const port = parseInt(line.slice(line.lastIndexOf(":") + 1), 10);
+        if (!isNaN(port) && port > 0) {
+          results.push({ pid: currentPid, port, cwd: "" });
+        }
+      }
+    }
+
+    // Deduplicate by pid+port
+    const unique = [
+      ...new Map(results.map((r) => [`${r.pid}:${r.port}`, r])).values(),
+    ];
+
+    // Batch-resolve cwds
+    if (unique.length > 0) {
+      const pids = [...new Set(unique.map((r) => r.pid))].join(",");
+      try {
+        const { stdout: cwdOut } = await execAsync(
+          `lsof -a -p ${pids} -d cwd -Fpn 2>/dev/null || true`
+        );
+        const cwdMap = new Map<string, string>();
+        let pid = "";
+        for (const line of cwdOut.split("\n")) {
+          if (line.startsWith("p")) pid = line.slice(1);
+          else if (line.startsWith("n") && pid) cwdMap.set(pid, line.slice(1));
+        }
+        for (const entry of unique) {
+          entry.cwd = cwdMap.get(entry.pid) || "";
+        }
+      } catch {
+        // cwd resolution failed, proceed without
+      }
+    }
+
+    cachedListeners = { data: unique, ts: now };
+    return unique;
+  } catch {
+    return [];
+  }
+}
+
+async function detectSessionPorts(
+  sessionCwd: string | null
+): Promise<number[]> {
+  if (!sessionCwd) return [];
+
+  const listeners = await getListeningProcesses();
+  return [
+    ...new Set(
+      listeners.filter((l) => l.cwd.startsWith(sessionCwd)).map((l) => l.port)
+    ),
+  ].sort((a, b) => a - b);
+}
+
 // --- tmux ---
 
 async function listTmuxSessions(): Promise<Map<string, string>> {
@@ -149,14 +234,22 @@ async function buildSnapshot(
   const entries = await Promise.all(
     [...tmuxSessions.entries()].map(async ([sessionId, tmuxName]) => {
       const meta = await resolveSessionMeta(sessionId);
-      return { sessionId, tmuxName, ...meta };
+      const ports = await detectSessionPorts(meta.cwd);
+      return { sessionId, tmuxName, ports, ...meta };
     })
   );
 
-  for (const { sessionId, tmuxName, name, cwd } of entries) {
+  const db = getDb();
+  const allTunnels = getTunnelUrls();
+  for (const { sessionId, tmuxName, name, cwd, ports } of entries) {
     const agentType = getProviderIdFromSessionName(tmuxName) || "claude";
     const state = stateFiles.get(sessionId);
 
+    const tunnelUrls: Record<number, string> = {};
+    for (const port of ports) {
+      if (allTunnels[port]) tunnelUrls[port] = allTunnels[port];
+    }
+
     snap[sessionId] = {
       sessionName: name,
       cwd,
@@ -167,12 +260,21 @@ async function buildSnapshot(
         : {}),
       claudeSessionId: sessionId,
       agentType,
+      listeningPorts: ports,
+      tunnelUrls,
     };
+
+    try {
+      db.prepare(
+        "UPDATE sessions SET listening_ports = ? WHERE id = ? OR claude_session_id = ?"
+      ).run(JSON.stringify(ports), sessionId, sessionId);
+    } catch {
+      // DB update failure shouldn't break the monitor
+    }
   }
 
   // Filter out hidden sessions
   try {
-    const db = getDb();
     const hiddenRows = db
       .prepare("SELECT item_id FROM hidden_items WHERE item_type = 'session'")
       .all() as { item_id: string }[];
@@ -200,7 +302,9 @@ function snapshotChanged(
       !p ||
       p.status !== n.status ||
       p.lastLine !== n.lastLine ||
-      p.sessionName !== n.sessionName
+      p.sessionName !== n.sessionName ||
+      JSON.stringify(p.listeningPorts) !== JSON.stringify(n.listeningPorts) ||
+      JSON.stringify(p.tunnelUrls) !== JSON.stringify(n.tunnelUrls)
     )
       return true;
   }

package/lib/tunnels.ts

@@ -0,0 +1,157 @@
+import { spawn, exec, type ChildProcess } from "child_process";
+import { promisify } from "util";
+import fs from "fs";
+import path from "path";
+import { broadcast } from "./claude/watcher";
+
+const execAsync = promisify(exec);
+const LOGS_DIR = path.join(process.env.HOME || "~", ".claude-deck", "logs");
+
+const URL_PATTERN = /https:\/\/[a-z0-9-]+\.trycloudflare\.com/;
+const URL_TIMEOUT_MS = 20000;
+
+interface Tunnel {
+  port: number;
+  pid: number;
+  url: string | null;
+  process: ChildProcess;
+}
+
+// Use globalThis to share the Map across Next.js module boundaries
+// (API routes and the custom server may load this module separately)
+const GLOBAL_KEY = "__claudeDeckTunnels" as const;
+const activeTunnels: Map<number, Tunnel> =
+  ((globalThis as Record<string, unknown>)[GLOBAL_KEY] as Map<
+    number,
+    Tunnel
+  >) ??
+  (() => {
+    const map = new Map<number, Tunnel>();
+    (globalThis as Record<string, unknown>)[GLOBAL_KEY] = map;
+    return map;
+  })();
+
+export async function isCloudflaredInstalled(): Promise<boolean> {
+  try {
+    await execAsync("cloudflared --version 2>/dev/null");
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export async function startTunnel(
+  port: number
+): Promise<{ port: number; url: string | null }> {
+  const existing = activeTunnels.get(port);
+  if (existing) return { port: existing.port, url: existing.url };
+
+  const logPath = path.join(LOGS_DIR, `tunnel_${port}.log`);
+  const logStream = fs.createWriteStream(logPath, { flags: "a" });
+
+  const child = spawn(
+    "cloudflared",
+    [
+      "tunnel",
+      "--url",
+      `http://localhost:${port}`,
+      "--http-host-header",
+      `localhost:${port}`,
+    ],
+    {
+      stdio: ["ignore", "pipe", "pipe"],
+      detached: false,
+    }
+  );
+
+  const tunnel: Tunnel = {
+    port,
+    pid: child.pid || 0,
+    url: null,
+    process: child,
+  };
+  activeTunnels.set(port, tunnel);
+
+  const url = await new Promise<string | null>((resolve) => {
+    const timeout = setTimeout(() => resolve(null), URL_TIMEOUT_MS);
+    let resolved = false;
+
+    const handleData = (chunk: Buffer) => {
+      const text = chunk.toString();
+      logStream.write(text);
+      if (resolved) return;
+      const match = text.match(URL_PATTERN);
+      if (match) {
+        resolved = true;
+        clearTimeout(timeout);
+        resolve(match[0]);
+      }
+    };
+
+    child.stdout?.on("data", handleData);
+    child.stderr?.on("data", handleData);
+
+    child.on("exit", () => {
+      if (!resolved) {
+        clearTimeout(timeout);
+        resolve(null);
+      }
+    });
+  });
+
+  tunnel.url = url;
+
+  child.on("exit", () => {
+    activeTunnels.delete(port);
+    logStream.end();
+    broadcastTunnelUpdate();
+  });
+
+  broadcastTunnelUpdate();
+  return { port, url };
+}
+
+export async function stopTunnel(port: number): Promise<void> {
+  const tunnel = activeTunnels.get(port);
+  if (!tunnel) return;
+
+  try {
+    tunnel.process.kill("SIGTERM");
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    if (!tunnel.process.killed) {
+      tunnel.process.kill("SIGKILL");
+    }
+  } catch {
+    // Process may already be dead
+  }
+
+  activeTunnels.delete(port);
+  broadcastTunnelUpdate();
+}
+
+export function getTunnelUrls(): Record<number, string> {
+  const result: Record<number, string> = {};
+  for (const [port, tunnel] of activeTunnels) {
+    if (tunnel.url) result[port] = tunnel.url;
+  }
+  return result;
+}
+
+export function getTunnelsList(): { port: number; url: string | null }[] {
+  return [...activeTunnels.values()].map((t) => ({ port: t.port, url: t.url }));
+}
+
+export function stopAllTunnels(): void {
+  for (const [, tunnel] of activeTunnels) {
+    try {
+      tunnel.process.kill("SIGTERM");
+    } catch {
+      // ignore
+    }
+  }
+  activeTunnels.clear();
+}
+
+function broadcastTunnelUpdate(): void {
+  broadcast({ type: "tunnels-updated", tunnels: getTunnelUrls() });
+}

package/lib/worktrees.ts

@@ -111,6 +111,15 @@ export async function createWorktree(
         { timeout: 30000 }
       );
       lastError = null;
+
+      // Init submodules if present
+      if (fs.existsSync(path.join(worktreePath, ".gitmodules"))) {
+        await execAsync(
+          `git -C "${worktreePath}" submodule update --init --recursive`,
+          { timeout: 120000 }
+        );
+      }
+
       break; // Success!
     } catch (error: unknown) {
       lastError = error instanceof Error ? error : new Error(String(error));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atercates/claude-deck",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "description": "Self-hosted web UI for managing Claude Code sessions",
   "bin": {
     "claude-deck": "./scripts/claude-deck"