create-claude-pipeline 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-claude-pipeline",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Claude Code 파이프라인 시스템을 프로젝트에 설치하고 대시보드를 실행합니다",
   "bin": {
     "create-claude-pipeline": "./bin/cli.js"

package/template/.claude-pipeline/dashboard/package.json

@@ -16,8 +16,7 @@
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.1",
     "remark-gfm": "^4.0.1",
-    "uuid": "^13.0.0",
-    "ws": "^8.20.0"
+    "uuid": "^13.0.0"
   },
   "devDependencies": {
     "@types/node": "^20",
@@ -25,7 +24,6 @@
     "@types/react-dom": "^18",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/uuid": "^10.0.0",
-    "@types/ws": "^8.18.1",
     "eslint": "^8",
     "eslint-config-next": "14.2.35",
     "postcss": "^8",

package/template/.claude-pipeline/dashboard/server.ts

@@ -1,7 +1,6 @@
 import { createServer } from "http";
 import { parse } from "url";
 import next from "next";
-import { createWSServer } from "./src/lib/ws-server";
 
 const dev = process.env.NODE_ENV !== "production";
 const hostname = "localhost";
@@ -16,9 +15,11 @@ app.prepare().then(() => {
     handle(req, res, parsedUrl);
   });
 
-  createWSServer(server);
-
   server.listen(port, () => {
     console.log(`> Ready on http://${hostname}:${port}`);
+    console.log(`> PIPELINES_DIR: ${process.env.PIPELINES_DIR || "(default: ../pipelines)"}`);
   });
+}).catch((err) => {
+  console.error("Failed to start dashboard:", err);
+  process.exit(1);
 });

package/template/.claude-pipeline/dashboard/src/app/api/pipelines/[id]/events/route.ts

@@ -0,0 +1,85 @@
+import { createSSEResponse } from "@/lib/sse";
+import { readPipelineState, getPipelineDir } from "@/lib/pipelines";
+import { detectCheckpoint } from "@/lib/checkpoint";
+import fs from "fs";
+import path from "path";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(
+  _request: Request,
+  { params }: { params: { id: string } },
+) {
+  const { id } = params;
+  const pipelineDir = getPipelineDir(id);
+
+  if (!fs.existsSync(pipelineDir)) {
+    return new Response(JSON.stringify({ error: "Pipeline not found" }), {
+      status: 404,
+    });
+  }
+
+  return createSSEResponse((writer, signal) => {
+    let prevActivitiesCount = 0;
+    let lastMtime = 0;
+
+    // Send initial state
+    const initialState = readPipelineState(id);
+    if (initialState) {
+      writer.write("pipeline:updated", { id, state: initialState });
+      prevActivitiesCount = initialState.activities.length;
+
+      const checkpoint = detectCheckpoint(initialState.activities);
+      if (checkpoint) {
+        writer.write("pipeline:checkpoint", { id, checkpoint });
+      }
+    }
+
+    // Poll state.json for changes
+    const stateFile = path.join(pipelineDir, "state.json");
+
+    const interval = setInterval(() => {
+      if (signal.aborted) {
+        clearInterval(interval);
+        return;
+      }
+
+      try {
+        const stat = fs.statSync(stateFile);
+        if (stat.mtimeMs === lastMtime) return;
+        lastMtime = stat.mtimeMs;
+
+        const state = readPipelineState(id);
+        if (!state) return;
+
+        // Send full state update
+        writer.write("pipeline:updated", { id, state });
+
+        // Send new activities individually
+        const newActivities = state.activities.slice(prevActivitiesCount);
+        for (const activity of newActivities) {
+          writer.write("pipeline:activity", { id, activity });
+        }
+        prevActivitiesCount = state.activities.length;
+
+        // Check for checkpoint
+        const checkpoint = detectCheckpoint(state.activities);
+        if (checkpoint) {
+          writer.write("pipeline:checkpoint", { id, checkpoint });
+        }
+      } catch {
+        // state.json may be mid-write or pipeline removed
+        if (!fs.existsSync(pipelineDir)) {
+          writer.write("pipeline:removed", { id });
+          clearInterval(interval);
+          writer.close();
+        }
+      }
+    }, 500);
+
+    signal.addEventListener("abort", () => {
+      clearInterval(interval);
+      writer.close();
+    });
+  });
+}

package/template/.claude-pipeline/dashboard/src/app/api/pipelines/stream/route.ts

@@ -0,0 +1,72 @@
+import { createSSEResponse } from "@/lib/sse";
+import { listPipelines, readPipelineState, getPipelinesDir } from "@/lib/pipelines";
+import fs from "fs";
+import path from "path";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  return createSSEResponse((writer, signal) => {
+    // Send initial pipeline list
+    const pipelines = listPipelines();
+    writer.write("pipeline:init", { pipelines });
+
+    const pipelinesDir = getPipelinesDir();
+    if (!fs.existsSync(pipelinesDir)) {
+      fs.mkdirSync(pipelinesDir, { recursive: true });
+    }
+
+    // Track known pipeline state file mtimes for change detection
+    const lastMtimes = new Map<string, number>();
+
+    // Poll for changes (simpler and more reliable than fs.watch across platforms)
+    const interval = setInterval(() => {
+      if (signal.aborted) {
+        clearInterval(interval);
+        return;
+      }
+
+      try {
+        const entries = fs.readdirSync(pipelinesDir, { withFileTypes: true });
+        const currentIds = new Set<string>();
+
+        for (const entry of entries) {
+          if (!entry.isDirectory()) continue;
+          currentIds.add(entry.name);
+
+          const stateFile = path.join(pipelinesDir, entry.name, "state.json");
+          try {
+            const stat = fs.statSync(stateFile);
+            const mtime = stat.mtimeMs;
+            const prev = lastMtimes.get(entry.name);
+
+            if (prev === undefined || prev !== mtime) {
+              lastMtimes.set(entry.name, mtime);
+              const state = readPipelineState(entry.name);
+              if (state) {
+                writer.write("pipeline:updated", { id: entry.name, state });
+              }
+            }
+          } catch {
+            // state.json doesn't exist yet
+          }
+        }
+
+        // Detect removed pipelines
+        for (const id of lastMtimes.keys()) {
+          if (!currentIds.has(id)) {
+            lastMtimes.delete(id);
+            writer.write("pipeline:removed", { id });
+          }
+        }
+      } catch {
+        // pipelines dir may not exist yet
+      }
+    }, 1000);
+
+    signal.addEventListener("abort", () => {
+      clearInterval(interval);
+      writer.close();
+    });
+  });
+}

package/template/.claude-pipeline/dashboard/src/hooks/use-pipeline-detail.ts

@@ -1,8 +1,8 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
-import type { PipelineState, CheckpointInfo, ServerMessage } from "@/types/pipeline";
-import { useWebSocket } from "./use-websocket";
+import { useState, useCallback } from "react";
+import type { PipelineState, CheckpointInfo } from "@/types/pipeline";
+import { useSSE } from "./use-sse";
 
 export function usePipelineDetail(id: string) {
   const [pipeline, setPipeline] = useState<PipelineState | null>(null);
@@ -10,56 +10,42 @@ export function usePipelineDetail(id: string) {
   const [loading, setLoading] = useState(true);
   const [notFound, setNotFound] = useState(false);
 
-  const fetchPipeline = useCallback(async () => {
-    try {
-      const res = await fetch(`/api/pipelines/${id}`);
-      if (res.status === 404) {
-        setNotFound(true);
-        return;
-      }
-      const data = await res.json();
-      setPipeline(data);
-    } catch {
-      // Ignore
-    } finally {
-      setLoading(false);
-    }
-  }, [id]);
+  const handleEvent = useCallback((event: string, data: unknown) => {
+    const d = data as Record<string, unknown>;
 
-  const handleMessage = useCallback((msg: ServerMessage) => {
-    if (msg.type === "pipeline:updated" && msg.id === id) {
-      setPipeline(msg.state);
-    } else if (msg.type === "pipeline:activity" && msg.id === id) {
+    if (event === "pipeline:updated" && d.id === id) {
+      setPipeline(d.state as PipelineState);
+      setLoading(false);
+    } else if (event === "pipeline:activity" && d.id === id) {
       setPipeline((prev) => {
         if (!prev) return prev;
-        return { ...prev, activities: [...prev.activities, msg.activity] };
+        const activity = d.activity as PipelineState["activities"][0];
+        return { ...prev, activities: [...prev.activities, activity] };
       });
-    } else if (msg.type === "pipeline:checkpoint" && msg.id === id) {
-      setCheckpoint(msg.checkpoint);
-    } else if (msg.type === "pipeline:removed" && msg.id === id) {
+    } else if (event === "pipeline:checkpoint" && d.id === id) {
+      setCheckpoint(d.checkpoint as CheckpointInfo);
+    } else if (event === "pipeline:removed" && d.id === id) {
       setNotFound(true);
     }
   }, [id]);
 
-  const { send, connected } = useWebSocket(handleMessage, fetchPipeline);
-
-  useEffect(() => {
-    fetchPipeline();
-  }, [fetchPipeline]);
-
-  useEffect(() => {
-    if (connected) {
-      send({ type: "subscribe", pipelineId: id });
-      return () => {
-        send({ type: "unsubscribe", pipelineId: id });
-      };
-    }
-  }, [connected, id, send]);
-
-  const respondToCheckpoint = useCallback((action: "approve" | "reject", message?: string) => {
-    send({ type: "checkpoint:respond", pipelineId: id, action, message });
-    setCheckpoint(null);
-  }, [id, send]);
+  useSSE(`/api/pipelines/${id}/events`, handleEvent);
+
+  const respondToCheckpoint = useCallback(
+    async (action: "approve" | "reject", message?: string) => {
+      try {
+        await fetch(`/api/pipelines/${id}/checkpoint`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ action, message }),
+        });
+        setCheckpoint(null);
+      } catch {
+        // Ignore fetch errors
+      }
+    },
+    [id],
+  );
 
   return { pipeline, checkpoint, loading, notFound, respondToCheckpoint };
 }

package/template/.claude-pipeline/dashboard/src/hooks/use-pipelines.ts

@@ -1,37 +1,32 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
-import type { PipelineSummary, ServerMessage } from "@/types/pipeline";
-import { useWebSocket } from "./use-websocket";
+import { useState, useCallback } from "react";
+import type { PipelineSummary, PipelineState } from "@/types/pipeline";
+import { useSSE } from "./use-sse";
 
 export function usePipelines() {
   const [pipelines, setPipelines] = useState<PipelineSummary[]>([]);
   const [loading, setLoading] = useState(true);
 
-  const fetchPipelines = useCallback(async () => {
-    try {
-      const res = await fetch("/api/pipelines");
-      const data = await res.json();
-      setPipelines(data.pipelines);
-    } catch {
-      // Ignore fetch errors
-    } finally {
-      setLoading(false);
-    }
-  }, []);
+  const handleEvent = useCallback((event: string, data: unknown) => {
+    const d = data as Record<string, unknown>;
 
-  const handleMessage = useCallback((msg: ServerMessage) => {
-    if (msg.type === "pipeline:updated") {
+    if (event === "pipeline:init") {
+      const list = d.pipelines as PipelineSummary[];
+      setPipelines(list);
+      setLoading(false);
+    } else if (event === "pipeline:updated") {
+      const state = d.state as PipelineState;
+      const summary: PipelineSummary = {
+        id: state.id,
+        requirements: state.requirements,
+        status: state.status,
+        currentPhase: state.currentPhase,
+        createdAt: state.createdAt,
+        agents: state.agents,
+      };
       setPipelines((prev) => {
-        const idx = prev.findIndex((p) => p.id === msg.id);
-        const summary: PipelineSummary = {
-          id: msg.state.id,
-          requirements: msg.state.requirements,
-          status: msg.state.status,
-          currentPhase: msg.state.currentPhase,
-          createdAt: msg.state.createdAt,
-          agents: msg.state.agents,
-        };
+        const idx = prev.findIndex((p) => p.id === state.id);
         if (idx >= 0) {
           const next = [...prev];
           next[idx] = summary;
@@ -39,22 +34,14 @@ export function usePipelines() {
         }
         return [summary, ...prev];
       });
-    } else if (msg.type === "pipeline:removed") {
-      setPipelines((prev) => prev.filter((p) => p.id !== msg.id));
+      setLoading(false);
+    } else if (event === "pipeline:removed") {
+      const id = d.id as string;
+      setPipelines((prev) => prev.filter((p) => p.id !== id));
     }
   }, []);
 
-  const { send, connected } = useWebSocket(handleMessage, fetchPipelines);
-
-  useEffect(() => {
-    fetchPipelines();
-  }, [fetchPipelines]);
-
-  useEffect(() => {
-    if (connected) {
-      send({ type: "subscribe:all" });
-    }
-  }, [connected, send]);
+  useSSE("/api/pipelines/stream", handleEvent);
 
   return { pipelines, loading };
 }

package/template/.claude-pipeline/dashboard/src/hooks/use-sse.ts

@@ -0,0 +1,61 @@
+"use client";
+
+import { useEffect, useRef, useCallback, useState } from "react";
+
+export type SSEHandler = (event: string, data: unknown) => void;
+
+/**
+ * React hook for Server-Sent Events.
+ * Browser-native EventSource with automatic reconnection.
+ */
+export function useSSE(url: string | null, onEvent: SSEHandler) {
+  const [connected, setConnected] = useState(false);
+  const eventSourceRef = useRef<EventSource | null>(null);
+  const onEventRef = useRef(onEvent);
+  onEventRef.current = onEvent;
+
+  useEffect(() => {
+    if (!url) return;
+
+    const es = new EventSource(url);
+    eventSourceRef.current = es;
+
+    es.onopen = () => {
+      setConnected(true);
+    };
+
+    es.onerror = () => {
+      setConnected(false);
+      // EventSource auto-reconnects natively
+    };
+
+    // Named event listener helper
+    const events = [
+      "pipeline:updated",
+      "pipeline:activity",
+      "pipeline:checkpoint",
+      "pipeline:removed",
+      "pipeline:init",
+      "error",
+    ];
+
+    for (const eventName of events) {
+      es.addEventListener(eventName, (e: MessageEvent) => {
+        try {
+          const data = JSON.parse(e.data);
+          onEventRef.current(eventName, data);
+        } catch {
+          // Ignore parse errors
+        }
+      });
+    }
+
+    return () => {
+      es.close();
+      eventSourceRef.current = null;
+      setConnected(false);
+    };
+  }, [url]);
+
+  return { connected };
+}

package/template/.claude-pipeline/dashboard/src/lib/pipelines.ts

@@ -2,10 +2,8 @@ import fs from "fs";
 import path from "path";
 import type { PipelineState, PipelineSummary } from "@/types/pipeline";
 
-const PIPELINES_DIR = process.env.PIPELINES_DIR;
-if (!PIPELINES_DIR) {
-  throw new Error("PIPELINES_DIR 환경변수가 설정되지 않았습니다. npx create-claude-pipeline으로 실행해주세요.");
-}
+const PIPELINES_DIR = process.env.PIPELINES_DIR
+  || path.resolve(process.cwd(), "..", "pipelines");
 
 export function getPipelinesDir(): string {
   return path.resolve(PIPELINES_DIR);

package/template/.claude-pipeline/dashboard/src/lib/sse.ts

@@ -0,0 +1,55 @@
+/**
+ * SSE (Server-Sent Events) utility for Next.js API routes.
+ * Replaces WebSocket for server→client push.
+ */
+
+export interface SSEWriter {
+  write(event: string, data: unknown): void;
+  close(): void;
+}
+
+export function createSSEResponse(
+  handler: (writer: SSEWriter, signal: AbortSignal) => void | Promise<void>,
+): Response {
+  const encoder = new TextEncoder();
+  let controllerRef: ReadableStreamDefaultController | null = null;
+  const abortController = new AbortController();
+
+  const stream = new ReadableStream({
+    start(controller) {
+      controllerRef = controller;
+
+      const writer: SSEWriter = {
+        write(event: string, data: unknown) {
+          try {
+            const payload = `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`;
+            controller.enqueue(encoder.encode(payload));
+          } catch {
+            // Stream may be closed
+          }
+        },
+        close() {
+          try {
+            controller.close();
+          } catch {
+            // Already closed
+          }
+        },
+      };
+
+      handler(writer, abortController.signal);
+    },
+    cancel() {
+      abortController.abort();
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache, no-transform",
+      Connection: "keep-alive",
+      "X-Accel-Buffering": "no",
+    },
+  });
+}

package/template/.claude-pipeline/dashboard/src/types/pipeline.ts

@@ -46,16 +46,10 @@ export interface PipelineSummary {
   agents: Record<string, AgentState>;
 }
 
-// WebSocket messages
+// SSE event data types (server → client only)
 export type ServerMessage =
   | { type: "pipeline:updated"; id: string; state: PipelineState }
   | { type: "pipeline:activity"; id: string; activity: Activity }
   | { type: "pipeline:checkpoint"; id: string; checkpoint: CheckpointInfo }
   | { type: "pipeline:removed"; id: string }
   | { type: "error"; message: string };
-
-export type ClientMessage =
-  | { type: "subscribe:all" }
-  | { type: "subscribe"; pipelineId: string }
-  | { type: "unsubscribe"; pipelineId: string }
-  | { type: "checkpoint:respond"; pipelineId: string; action: "approve" | "reject"; message?: string };

package/template/.claude-pipeline/dashboard/src/hooks/use-websocket.ts

@@ -1,58 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useCallback, useState } from "react";
-import type { ServerMessage, ClientMessage } from "@/types/pipeline";
-
-export function useWebSocket(onMessage: (msg: ServerMessage) => void, onReconnect?: () => void) {
-  const wsRef = useRef<WebSocket | null>(null);
-  const reconnectDelay = useRef(1000);
-  const [connected, setConnected] = useState(false);
-
-  const connect = useCallback(() => {
-    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    const ws = new WebSocket(`${protocol}//${window.location.host}/ws`);
-
-    ws.onopen = () => {
-      const wasDisconnected = !connected;
-      setConnected(true);
-      reconnectDelay.current = 1000;
-      // Signal reconnect so data hooks can re-fetch
-      if (wasDisconnected && onReconnect) onReconnect();
-    };
-
-    ws.onmessage = (event) => {
-      try {
-        const msg = JSON.parse(event.data) as ServerMessage;
-        onMessage(msg);
-      } catch {
-        // Ignore parse errors
-      }
-    };
-
-    ws.onclose = () => {
-      setConnected(false);
-      wsRef.current = null;
-      // Exponential backoff reconnection
-      const delay = reconnectDelay.current;
-      reconnectDelay.current = Math.min(delay * 2, 30000);
-      setTimeout(connect, delay);
-    };
-
-    wsRef.current = ws;
-  }, [onMessage]);
-
-  useEffect(() => {
-    connect();
-    return () => {
-      wsRef.current?.close();
-    };
-  }, [connect]);
-
-  const send = useCallback((msg: ClientMessage) => {
-    if (wsRef.current?.readyState === WebSocket.OPEN) {
-      wsRef.current.send(JSON.stringify(msg));
-    }
-  }, []);
-
-  return { send, connected };
-}

package/template/.claude-pipeline/dashboard/src/lib/watcher.ts

@@ -1,90 +0,0 @@
-import fs from "fs";
-import path from "path";
-import { getPipelinesDir, readPipelineState } from "./pipelines";
-import type { PipelineState } from "@/types/pipeline";
-
-type WatchCallback = (id: string, state: PipelineState | null) => void;
-
-export class PipelineWatcher {
-  private watchers = new Map<string, fs.FSWatcher>();
-  private debounceTimers = new Map<string, NodeJS.Timeout>();
-  private dirWatcher: fs.FSWatcher | null = null;
-  private callback: WatchCallback;
-
-  constructor(callback: WatchCallback) {
-    this.callback = callback;
-  }
-
-  start() {
-    const dir = getPipelinesDir();
-    if (!fs.existsSync(dir)) {
-      fs.mkdirSync(dir, { recursive: true });
-    }
-
-    this.dirWatcher = fs.watch(dir, (_, filename) => {
-      if (!filename) return;
-      const fullPath = path.join(dir, filename);
-      if (fs.existsSync(fullPath) && fs.statSync(fullPath).isDirectory()) {
-        this.watchPipeline(filename);
-      } else {
-        this.unwatchPipeline(filename);
-      }
-    });
-
-    const entries = fs.readdirSync(dir, { withFileTypes: true });
-    for (const entry of entries) {
-      if (entry.isDirectory()) {
-        this.watchPipeline(entry.name);
-      }
-    }
-  }
-
-  private watchPipeline(id: string) {
-    if (this.watchers.has(id)) return;
-
-    const stateFile = path.join(getPipelinesDir(), id, "state.json");
-    if (!fs.existsSync(stateFile)) return;
-
-    try {
-      const watcher = fs.watch(stateFile, () => {
-        const existing = this.debounceTimers.get(id);
-        if (existing) clearTimeout(existing);
-
-        this.debounceTimers.set(id, setTimeout(() => {
-          this.debounceTimers.delete(id);
-          const state = readPipelineState(id);
-          this.callback(id, state);
-        }, 100));
-      });
-
-      watcher.on("error", () => {
-        this.unwatchPipeline(id);
-        this.callback(id, null);
-      });
-
-      this.watchers.set(id, watcher);
-    } catch {
-      // Ignore watch errors
-    }
-  }
-
-  private unwatchPipeline(id: string) {
-    const watcher = this.watchers.get(id);
-    if (watcher) {
-      watcher.close();
-      this.watchers.delete(id);
-    }
-    const timer = this.debounceTimers.get(id);
-    if (timer) {
-      clearTimeout(timer);
-      this.debounceTimers.delete(id);
-    }
-  }
-
-  stop() {
-    this.dirWatcher?.close();
-    this.watchers.forEach((_, id) => {
-      this.unwatchPipeline(id);
-    });
-  }
-}

package/template/.claude-pipeline/dashboard/src/lib/ws-server.ts

@@ -1,123 +0,0 @@
-import { WebSocketServer, WebSocket } from "ws";
-import type { Server } from "http";
-import type { PipelineState, ServerMessage, ClientMessage } from "@/types/pipeline";
-import { PipelineWatcher } from "./watcher";
-import { readPipelineState, writeCheckpointResponse, getPipelineDir } from "./pipelines";
-import { detectCheckpoint } from "./checkpoint";
-import fs from "fs";
-
-interface ClientState {
-  ws: WebSocket;
-  mode: "none" | "all" | "single";
-  pipelineId?: string;
-}
-
-export function createWSServer(server: Server) {
-  const wss = new WebSocketServer({ server, path: "/ws" });
-  const clients = new Map<WebSocket, ClientState>();
-  const prevActivitiesCount = new Map<string, number>();
-
-  const watcher = new PipelineWatcher((id, state) => {
-    if (state === null) {
-      broadcast({ type: "pipeline:removed", id }, (c) => c.mode !== "none");
-      prevActivitiesCount.delete(id);
-      return;
-    }
-
-    broadcastToAll({ type: "pipeline:updated", id, state });
-
-    const prevCount = prevActivitiesCount.get(id) || 0;
-    const newActivities = state.activities.slice(prevCount);
-    prevActivitiesCount.set(id, state.activities.length);
-
-    for (const activity of newActivities) {
-      broadcastToSingle(id, { type: "pipeline:activity", id, activity });
-    }
-
-    const checkpoint = detectCheckpoint(state.activities);
-    if (checkpoint) {
-      broadcastToSingle(id, { type: "pipeline:checkpoint", id, checkpoint });
-    }
-
-    broadcastToSingle(id, { type: "pipeline:updated", id, state });
-  });
-
-  watcher.start();
-
-  function broadcast(msg: ServerMessage, filter: (c: ClientState) => boolean) {
-    const data = JSON.stringify(msg);
-    clients.forEach((client) => {
-      if (client.ws.readyState === WebSocket.OPEN && filter(client)) {
-        client.ws.send(data);
-      }
-    });
-  }
-
-  function broadcastToAll(msg: ServerMessage) {
-    broadcast(msg, (c) => c.mode === "all");
-  }
-
-  function broadcastToSingle(pipelineId: string, msg: ServerMessage) {
-    broadcast(msg, (c) => c.mode === "single" && c.pipelineId === pipelineId);
-  }
-
-  wss.on("connection", (ws) => {
-    const clientState: ClientState = { ws, mode: "none" };
-    clients.set(ws, clientState);
-
-    ws.on("message", (raw) => {
-      try {
-        const msg = JSON.parse(raw.toString()) as ClientMessage;
-        handleMessage(clientState, msg);
-      } catch {
-        ws.send(JSON.stringify({ type: "error", message: "Invalid message" }));
-      }
-    });
-
-    ws.on("close", () => {
-      clients.delete(ws);
-    });
-  });
-
-  function handleMessage(client: ClientState, msg: ClientMessage) {
-    switch (msg.type) {
-      case "subscribe:all":
-        client.mode = "all";
-        client.pipelineId = undefined;
-        break;
-
-      case "subscribe": {
-        const dir = getPipelineDir(msg.pipelineId);
-        if (!fs.existsSync(dir)) {
-          client.ws.send(JSON.stringify({ type: "error", message: "Pipeline not found" }));
-          return;
-        }
-        client.mode = "single";
-        client.pipelineId = msg.pipelineId;
-
-        const state = readPipelineState(msg.pipelineId);
-        if (state) {
-          prevActivitiesCount.set(msg.pipelineId, state.activities.length);
-          client.ws.send(JSON.stringify({ type: "pipeline:updated", id: msg.pipelineId, state }));
-          const checkpoint = detectCheckpoint(state.activities);
-          if (checkpoint) {
-            client.ws.send(JSON.stringify({ type: "pipeline:checkpoint", id: msg.pipelineId, checkpoint }));
-          }
-        }
-        break;
-      }
-
-      case "unsubscribe":
-        client.mode = "none";
-        client.pipelineId = undefined;
-        break;
-
-      case "checkpoint:respond": {
-        writeCheckpointResponse(msg.pipelineId, msg.action, msg.message);
-        break;
-      }
-    }
-  }
-
-  return { wss, watcher };
-}