create-claude-pipeline 0.1.0

package/template/.claude-pipeline/dashboard/src/components/checkpoint-banner.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useState } from "react";
+import type { CheckpointInfo } from "@/types/pipeline";
+
+interface CheckpointBannerProps {
+  checkpoint: CheckpointInfo;
+  onRespond: (action: "approve" | "reject", message?: string) => void;
+}
+
+export function CheckpointBanner({ checkpoint, onRespond }: CheckpointBannerProps) {
+  const [showFeedback, setShowFeedback] = useState(false);
+  const [feedback, setFeedback] = useState("");
+
+  if (showFeedback) {
+    return (
+      <div className="mx-4 mb-3 bg-gradient-to-r from-accent-purple/10 to-accent-purple-light/10 border border-accent-purple rounded-lg p-4">
+        <div className="text-accent-purple-light text-[12px] font-semibold mb-2">피드백 작성</div>
+        <textarea
+          value={feedback}
+          onChange={(e) => setFeedback(e.target.value)}
+          className="w-full bg-[#111827] border border-border rounded-lg p-2 text-text-primary text-sm resize-none h-20 focus:outline-none focus:border-accent-purple"
+          placeholder="피드백을 입력하세요..."
+          autoFocus
+        />
+        <div className="flex justify-end gap-2 mt-2">
+          <button onClick={() => setShowFeedback(false)} className="px-3 py-1 text-[11px] text-text-secondary bg-border rounded-md">
+            취소
+          </button>
+          <button
+            onClick={() => onRespond("reject", feedback)}
+            className="px-3 py-1 text-[11px] text-white bg-gradient-to-r from-accent-purple to-accent-purple-light rounded-md"
+          >
+            전송
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-4 mb-3 bg-gradient-to-r from-accent-purple/10 to-accent-purple-light/10 border border-accent-purple rounded-lg px-4 py-3 flex justify-between items-center">
+      <div>
+        <div className="text-accent-purple-light text-[12px] font-semibold">
+          ⏳ CHECKPOINT {checkpoint.phase}
+        </div>
+        <div className="text-text-primary text-[12px] mt-1">{checkpoint.description}</div>
+      </div>
+      <div className="flex gap-2">
+        <button onClick={() => setShowFeedback(true)} className="px-3 py-1 text-[11px] text-text-primary bg-border rounded-md hover:bg-text-muted/30">
+          피드백
+        </button>
+        <button onClick={() => onRespond("approve")} className="px-3 py-1 text-[11px] text-white bg-gradient-to-r from-accent-purple to-accent-purple-light rounded-md">
+          승인
+        </button>
+      </div>
+    </div>
+  );
+}

package/template/.claude-pipeline/dashboard/src/components/new-pipeline-modal.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+interface NewPipelineModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function NewPipelineModal({ open, onClose }: NewPipelineModalProps) {
+  const [requirements, setRequirements] = useState("");
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  if (!open) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!requirements.trim() || loading) return;
+
+    setLoading(true);
+    try {
+      const res = await fetch("/api/pipelines", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ requirements: requirements.trim() }),
+      });
+      const data = await res.json();
+      if (res.ok) {
+        router.push(`/pipeline/${data.id}`);
+        onClose();
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={onClose}>
+      <div className="bg-panel border border-border rounded-lg p-6 w-full max-w-md" onClick={(e) => e.stopPropagation()}>
+        <h2 className="text-text-primary text-lg font-semibold mb-4">New Pipeline</h2>
+        <form onSubmit={handleSubmit}>
+          <textarea
+            value={requirements}
+            onChange={(e) => setRequirements(e.target.value)}
+            placeholder="요구사항을 입력하세요..."
+            className="w-full bg-[#111827] border border-border rounded-lg p-3 text-text-primary text-sm resize-none h-32 focus:outline-none focus:border-accent-purple"
+            autoFocus
+          />
+          <div className="flex justify-end gap-2 mt-4">
+            <button type="button" onClick={onClose} className="px-4 py-2 text-sm text-text-secondary bg-border rounded-lg hover:bg-text-muted/30">
+              취소
+            </button>
+            <button type="submit" disabled={!requirements.trim() || loading} className="px-4 py-2 text-sm text-white bg-gradient-to-r from-accent-purple to-accent-purple-light rounded-lg disabled:opacity-50">
+              {loading ? "생성 중..." : "생성"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/template/.claude-pipeline/dashboard/src/components/output-list.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import type { OutputEntry } from "@/types/pipeline";
+import { PHASE_NAMES } from "@/lib/agents";
+
+interface OutputListProps {
+  outputs: OutputEntry[];
+  onSelect: (filename: string) => void;
+  selected?: string;
+}
+
+export function OutputList({ outputs, onSelect, selected }: OutputListProps) {
+  const grouped = outputs.reduce((acc, o) => {
+    (acc[o.phase] ||= []).push(o);
+    return acc;
+  }, {} as Record<number, OutputEntry[]>);
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-3 py-2 border-b border-border">
+        <div className="text-text-secondary text-[11px] font-semibold">OUTPUTS</div>
+      </div>
+      <div className="flex-1 px-3 py-2 overflow-y-auto">
+        {outputs.length === 0 ? (
+          <div className="text-text-muted text-[11px] text-center py-10">아직 산출물이 없습니다.</div>
+        ) : (
+          Object.entries(grouped)
+            .sort(([a], [b]) => Number(a) - Number(b))
+            .map(([phase, files]) => (
+              <div key={phase}>
+                <div className="text-text-secondary text-[9px] font-semibold mt-2 mb-1">
+                  PHASE {phase} {PHASE_NAMES[Number(phase)] || ""}
+                </div>
+                {files.map((f) => {
+                  const icon = f.filename.endsWith(".html") ? "🌐" : "📄";
+                  const name = f.filename.split("/").pop();
+                  return (
+                    <div
+                      key={f.filename}
+                      onClick={() => onSelect(f.filename)}
+                      className={`px-2 py-1 rounded text-[11px] cursor-pointer ${
+                        selected === f.filename
+                          ? "bg-border text-accent-purple-light"
+                          : "text-text-primary hover:bg-panel"
+                      }`}
+                    >
+                      {icon} {name}
+                    </div>
+                  );
+                })}
+              </div>
+            ))
+        )}
+      </div>
+    </div>
+  );
+}

package/template/.claude-pipeline/dashboard/src/components/phase-dots.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { PHASE_NAMES } from "@/lib/agents";
+
+interface PhaseDotsProp {
+  currentPhase: number;
+  showLabel?: boolean;
+}
+
+export function PhaseDots({ currentPhase, showLabel = false }: PhaseDotsProp) {
+  return (
+    <div className="flex items-center gap-[6px]">
+      {PHASE_NAMES.map((name, i) => {
+        const isComplete = i < currentPhase;
+        const isCurrent = i === currentPhase;
+        return (
+          <div
+            key={i}
+            className={`rounded-full ${
+              isCurrent
+                ? "w-[10px] h-[10px] bg-accent-purple-light shadow-[0_0_6px_rgba(139,92,246,0.5)]"
+                : isComplete
+                ? "w-2 h-2 bg-accent-purple"
+                : "w-2 h-2 bg-border"
+            }`}
+            title={`P${i} ${name}`}
+          />
+        );
+      })}
+      {showLabel && (
+        <span className="text-text-secondary text-[11px] ml-1">
+          P{currentPhase} {PHASE_NAMES[currentPhase]}
+        </span>
+      )}
+    </div>
+  );
+}

package/template/.claude-pipeline/dashboard/src/components/pipeline-card.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Link from "next/link";
+import { PhaseDots } from "./phase-dots";
+import { AGENT_MAP } from "@/lib/agents";
+import type { PipelineSummary } from "@/types/pipeline";
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+export function PipelineCard({ pipeline }: { pipeline: PipelineSummary }) {
+  const workingAgents = Object.values(pipeline.agents)
+    .filter((a) => a.status === "working")
+    .map((a) => AGENT_MAP[a.id]?.emoji)
+    .filter(Boolean);
+
+  const statusColor =
+    pipeline.status === "running" ? "text-accent-green" :
+    pipeline.status === "completed" ? "text-text-muted" :
+    pipeline.status === "failed" ? "text-red-500" :
+    "text-yellow-500";
+
+  return (
+    <Link href={`/pipeline/${pipeline.id}`}>
+      <div className="bg-panel p-4 rounded-lg border border-border hover:border-accent-purple/50 transition-colors cursor-pointer flex justify-between items-center">
+        <div>
+          <div className="flex items-center gap-2 mb-1">
+            <span className={`text-[11px] ${statusColor}`}>
+              ● {pipeline.status.toUpperCase()}
+            </span>
+            <span className="text-text-primary text-[13px] font-medium">
+              {pipeline.requirements}
+            </span>
+          </div>
+          <div className="text-text-muted text-[11px]">
+            Phase {pipeline.currentPhase}
+            {workingAgents.length > 0 && ` · ${workingAgents.join("")} working`}
+            {" · "}
+            {timeAgo(pipeline.createdAt)}
+          </div>
+        </div>
+        <PhaseDots currentPhase={pipeline.currentPhase} />
+      </div>
+    </Link>
+  );
+}

package/template/.claude-pipeline/dashboard/src/components/resizable-panels.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useState, useRef, useCallback, useEffect, ReactNode } from "react";
+
+interface ResizablePanelsProps {
+  left: ReactNode;
+  center: ReactNode;
+  right: ReactNode;
+}
+
+const STORAGE_KEY = "panel-sizes";
+const DEFAULT_SIZES = [25, 50, 25];
+const MIN_SIZES = [160, 200, 180];
+
+export function ResizablePanels({ left, center, right }: ResizablePanelsProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [sizes, setSizes] = useState(DEFAULT_SIZES);
+  const dragState = useRef<{ index: number; startX: number; startSizes: number[] } | null>(null);
+
+  useEffect(() => {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        setSizes(JSON.parse(saved));
+      } catch { /* ignore */ }
+    }
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(sizes));
+  }, [sizes]);
+
+  const onMouseDown = useCallback((index: number, e: React.MouseEvent) => {
+    e.preventDefault();
+    dragState.current = { index, startX: e.clientX, startSizes: [...sizes] };
+
+    const onMouseMove = (e: MouseEvent) => {
+      if (!dragState.current || !containerRef.current) return;
+      const { index, startX, startSizes } = dragState.current;
+      const containerWidth = containerRef.current.offsetWidth;
+      const deltaPct = ((e.clientX - startX) / containerWidth) * 100;
+
+      const newSizes = [...startSizes];
+      newSizes[index] = Math.max((MIN_SIZES[index] / containerWidth) * 100, startSizes[index] + deltaPct);
+      newSizes[index + 1] = Math.max((MIN_SIZES[index + 1] / containerWidth) * 100, startSizes[index + 1] - deltaPct);
+
+      setSizes(newSizes);
+    };
+
+    const onMouseUp = () => {
+      dragState.current = null;
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  }, [sizes]);
+
+  const onDoubleClick = useCallback(() => {
+    setSizes(DEFAULT_SIZES);
+  }, []);
+
+  return (
+    <div ref={containerRef} className="flex h-full">
+      <div style={{ width: `${sizes[0]}%` }} className="overflow-y-auto">
+        {left}
+      </div>
+      <div
+        className="w-[6px] bg-panel cursor-col-resize flex items-center justify-center flex-shrink-0 hover:bg-border transition-colors"
+        onMouseDown={(e) => onMouseDown(0, e)}
+        onDoubleClick={onDoubleClick}
+      >
+        <span className="text-text-muted text-[9px] writing-mode-vertical select-none">⋮⋮</span>
+      </div>
+      <div style={{ width: `${sizes[1]}%` }} className="overflow-hidden flex flex-col">
+        {center}
+      </div>
+      <div
+        className="w-[6px] bg-panel cursor-col-resize flex items-center justify-center flex-shrink-0 hover:bg-border transition-colors"
+        onMouseDown={(e) => onMouseDown(1, e)}
+        onDoubleClick={onDoubleClick}
+      >
+        <span className="text-text-muted text-[9px] writing-mode-vertical select-none">⋮⋮</span>
+      </div>
+      <div style={{ width: `${sizes[2]}%` }} className="overflow-y-auto">
+        {right}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,65 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import type { PipelineState, CheckpointInfo, ServerMessage } from "@/types/pipeline";
+import { useWebSocket } from "./use-websocket";
+
+export function usePipelineDetail(id: string) {
+  const [pipeline, setPipeline] = useState<PipelineState | null>(null);
+  const [checkpoint, setCheckpoint] = useState<CheckpointInfo | null>(null);
+  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 handleMessage = useCallback((msg: ServerMessage) => {
+    if (msg.type === "pipeline:updated" && msg.id === id) {
+      setPipeline(msg.state);
+    } else if (msg.type === "pipeline:activity" && msg.id === id) {
+      setPipeline((prev) => {
+        if (!prev) return prev;
+        return { ...prev, activities: [...prev.activities, msg.activity] };
+      });
+    } else if (msg.type === "pipeline:checkpoint" && msg.id === id) {
+      setCheckpoint(msg.checkpoint);
+    } else if (msg.type === "pipeline:removed" && msg.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]);
+
+  return { pipeline, checkpoint, loading, notFound, respondToCheckpoint };
+}

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

@@ -0,0 +1,60 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import type { PipelineSummary, ServerMessage } from "@/types/pipeline";
+import { useWebSocket } from "./use-websocket";
+
+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 handleMessage = useCallback((msg: ServerMessage) => {
+    if (msg.type === "pipeline:updated") {
+      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,
+        };
+        if (idx >= 0) {
+          const next = [...prev];
+          next[idx] = summary;
+          return next;
+        }
+        return [summary, ...prev];
+      });
+    } else if (msg.type === "pipeline:removed") {
+      setPipelines((prev) => prev.filter((p) => p.id !== msg.id));
+    }
+  }, []);
+
+  const { send, connected } = useWebSocket(handleMessage, fetchPipelines);
+
+  useEffect(() => {
+    fetchPipelines();
+  }, [fetchPipelines]);
+
+  useEffect(() => {
+    if (connected) {
+      send({ type: "subscribe:all" });
+    }
+  }, [connected, send]);
+
+  return { pipelines, loading };
+}

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

@@ -0,0 +1,58 @@
+"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/agents.ts

@@ -0,0 +1,30 @@
+export interface AgentMeta {
+  id: string;
+  emoji: string;
+  name: string;
+  role: string;
+  workingColor: string;
+}
+
+export const AGENTS: AgentMeta[] = [
+  { id: "alex", emoji: "🦁", name: "Alex", role: "PM", workingColor: "#8b5cf6" },
+  { id: "mina", emoji: "🦉", name: "Mina", role: "기획", workingColor: "#8b5cf6" },
+  { id: "lena", emoji: "🦋", name: "Lena", role: "디자인", workingColor: "#34d399" },
+  { id: "jay", emoji: "🦊", name: "Jay", role: "FE", workingColor: "#34d399" },
+  { id: "sam", emoji: "🐻", name: "Sam", role: "BE", workingColor: "#34d399" },
+  { id: "dex", emoji: "🐺", name: "Dex", role: "Infra", workingColor: "#34d399" },
+  { id: "eva", emoji: "🐱", name: "Eva", role: "QA", workingColor: "#34d399" },
+  { id: "rex", emoji: "🐍", name: "Rex", role: "보안", workingColor: "#8b5cf6" },
+  { id: "nora", emoji: "🦅", name: "Nora", role: "리뷰", workingColor: "#34d399" },
+];
+
+export const AGENT_MAP = Object.fromEntries(AGENTS.map((a) => [a.id, a]));
+
+export const PHASE_NAMES = ["인풋", "기획", "설계", "구현", "QA"] as const;
+
+export const ACTIVITY_TAG: Record<string, { label: string; color: string }> = {
+  success: { label: "완료", color: "#34d399" },
+  progress: { label: "진행", color: "#a5b4fc" },
+  info: { label: "info", color: "#a5b4fc" },
+  error: { label: "에러", color: "#ef4444" },
+};

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

@@ -0,0 +1,37 @@
+import type { Activity, CheckpointInfo } from "@/types/pipeline";
+
+export function detectCheckpoint(activities: Activity[]): CheckpointInfo | null {
+  let lastCheckpointIdx = -1;
+  let checkpointPhase = 0;
+  let checkpointDesc = "";
+
+  for (let i = activities.length - 1; i >= 0; i--) {
+    const a = activities[i];
+    if (a.agentId === "system" && a.message.includes("Checkpoint")) {
+      if (a.message.includes("approved") || a.message.includes("rejected")) {
+        return null;
+      }
+      lastCheckpointIdx = i;
+      checkpointDesc = a.message;
+      const phaseMatch = a.message.match(/Phase (\d+)/);
+      if (phaseMatch) checkpointPhase = parseInt(phaseMatch[1]);
+      break;
+    }
+  }
+
+  if (lastCheckpointIdx === -1) return null;
+
+  for (let i = lastCheckpointIdx + 1; i < activities.length; i++) {
+    const a = activities[i];
+    if (a.agentId === "system") {
+      if (a.message.includes("Checkpoint approved")) return null;
+      if (a.message.includes("Checkpoint rejected")) return null;
+    }
+  }
+
+  return {
+    phase: checkpointPhase,
+    description: checkpointDesc,
+    status: "pending",
+  };
+}