create-claude-pipeline 0.1.0

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

@@ -0,0 +1,91 @@
+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으로 실행해주세요.");
+}
+
+export function getPipelinesDir(): string {
+  return path.resolve(PIPELINES_DIR);
+}
+
+export function getPipelineDir(id: string): string {
+  return path.join(getPipelinesDir(), id);
+}
+
+export function readPipelineState(id: string): PipelineState | null {
+  const filePath = path.join(getPipelineDir(id), "state.json");
+  try {
+    const raw = fs.readFileSync(filePath, "utf-8");
+    return JSON.parse(raw) as PipelineState;
+  } catch {
+    return null;
+  }
+}
+
+export function listPipelines(): PipelineSummary[] {
+  const dir = getPipelinesDir();
+  if (!fs.existsSync(dir)) return [];
+
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  const summaries: PipelineSummary[] = [];
+
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+    const state = readPipelineState(entry.name);
+    if (!state) continue;
+    summaries.push({
+      id: state.id,
+      requirements: state.requirements,
+      status: state.status,
+      currentPhase: state.currentPhase,
+      createdAt: state.createdAt,
+      agents: state.agents,
+    });
+  }
+
+  return summaries.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+}
+
+export function readOutputFile(pipelineId: string, filepath: string): { content: string; contentType: string } | { error: "forbidden" } | { error: "not_found" } {
+  const pipelineDir = getPipelineDir(pipelineId);
+  const resolved = path.resolve(pipelineDir, filepath);
+
+  if (!resolved.startsWith(path.resolve(pipelineDir))) {
+    return { error: "forbidden" };
+  }
+
+  const state = readPipelineState(pipelineId);
+  if (!state) return { error: "not_found" };
+
+  const isRegistered = state.outputs.some((o) => o.filename === filepath);
+  if (!isRegistered) return { error: "forbidden" };
+
+  try {
+    const content = fs.readFileSync(resolved, "utf-8");
+    const ext = path.extname(filepath).toLowerCase();
+    const contentType =
+      ext === ".md" ? "text/markdown; charset=utf-8" :
+      ext === ".html" ? "text/html; charset=utf-8" :
+      "text/plain; charset=utf-8";
+    return { content, contentType };
+  } catch {
+    return { error: "not_found" };
+  }
+}
+
+export function writeCheckpointResponse(pipelineId: string, action: string, message?: string): boolean {
+  const filePath = path.join(getPipelineDir(pipelineId), "checkpoint_response.json");
+  try {
+    fs.writeFileSync(filePath, JSON.stringify({
+      action,
+      message: message || "",
+      timestamp: new Date().toISOString(),
+    }));
+    return true;
+  } catch {
+    return false;
+  }
+}

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

@@ -0,0 +1,90 @@
+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

@@ -0,0 +1,123 @@
+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 };
+}

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

@@ -0,0 +1,61 @@
+export interface PipelineState {
+  id: string;
+  name: string;
+  requirements: string;
+  status: "running" | "completed" | "failed" | "paused";
+  currentPhase: number;
+  agents: Record<string, AgentState>;
+  outputs: OutputEntry[];
+  activities: Activity[];
+  createdAt: string;
+}
+
+export interface AgentState {
+  id: string;
+  status: "idle" | "working" | "done";
+  currentTask?: string;
+}
+
+export interface OutputEntry {
+  filename: string;
+  status: "complete";
+  phase: number;
+  updatedAt: string;
+}
+
+export interface Activity {
+  id: string;
+  agentId: string;
+  message: string;
+  timestamp: string;
+  type: "info" | "success" | "error" | "progress";
+}
+
+export interface CheckpointInfo {
+  phase: number;
+  description: string;
+  status: "pending" | "approved" | "rejected";
+}
+
+export interface PipelineSummary {
+  id: string;
+  requirements: string;
+  status: PipelineState["status"];
+  currentPhase: number;
+  createdAt: string;
+  agents: Record<string, AgentState>;
+}
+
+// WebSocket messages
+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/tailwind.config.ts

@@ -0,0 +1,31 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+        panel: "#1f2937",
+        border: "#374151",
+        accent: {
+          purple: "#6366f1",
+          "purple-light": "#8b5cf6",
+          green: "#34d399",
+        },
+        text: {
+          primary: "#f3f4f6",
+          secondary: "#9ca3af",
+          muted: "#6b7280",
+        },
+      },
+    },
+  },
+  plugins: [require("@tailwindcss/typography")],
+};
+export default config;

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

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}