create-claude-pipeline 0.1.0

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

@@ -0,0 +1,36 @@
+{
+  "name": "dashboard",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "tsx server.ts",
+    "build": "next build",
+    "start": "NODE_ENV=production tsx server.ts",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@tailwindcss/typography": "^0.5.19",
+    "next": "14.2.35",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^16.1.1",
+    "remark-gfm": "^4.0.1",
+    "uuid": "^13.0.0",
+    "ws": "^8.20.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@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",
+    "tailwindcss": "^3.4.1",
+    "tsx": "^4.21.0",
+    "typescript": "^5"
+  }
+}

package/template/.claude-pipeline/dashboard/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

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

@@ -0,0 +1,24 @@
+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";
+const port = parseInt(process.env.PORT || "3000", 10);
+
+const app = next({ dev, hostname, port });
+const handle = app.getRequestHandler();
+
+app.prepare().then(() => {
+  const server = createServer((req, res) => {
+    const parsedUrl = parse(req.url!, true);
+    handle(req, res, parsedUrl);
+  });
+
+  createWSServer(server);
+
+  server.listen(port, () => {
+    console.log(`> Ready on http://${hostname}:${port}`);
+  });
+});

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

@@ -0,0 +1,23 @@
+import { NextResponse } from "next/server";
+import { readPipelineState, writeCheckpointResponse } from "@/lib/pipelines";
+
+export async function POST(request: Request, { params }: { params: { id: string } }) {
+  const state = readPipelineState(params.id);
+  if (!state) {
+    return NextResponse.json({ error: "Pipeline not found" }, { status: 404 });
+  }
+
+  const body = await request.json();
+  const { action, message } = body;
+
+  if (action !== "approve" && action !== "reject") {
+    return NextResponse.json({ error: "Invalid action" }, { status: 400 });
+  }
+
+  const success = writeCheckpointResponse(params.id, action, message);
+  if (!success) {
+    return NextResponse.json({ error: "Failed to write checkpoint response" }, { status: 500 });
+  }
+
+  return NextResponse.json({ success: true });
+}

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

@@ -0,0 +1,18 @@
+import { NextResponse } from "next/server";
+import { readOutputFile } from "@/lib/pipelines";
+
+export async function GET(_: Request, { params }: { params: { id: string; filepath: string[] } }) {
+  const filepath = params.filepath.join("/");
+  const result = readOutputFile(params.id, filepath);
+
+  if ("error" in result) {
+    if (result.error === "forbidden") {
+      return NextResponse.json({ error: "File not registered in outputs" }, { status: 403 });
+    }
+    return NextResponse.json({ error: "File not found" }, { status: 404 });
+  }
+
+  return new NextResponse(result.content, {
+    headers: { "Content-Type": result.contentType },
+  });
+}

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

@@ -0,0 +1,10 @@
+import { NextResponse } from "next/server";
+import { readPipelineState } from "@/lib/pipelines";
+
+export async function GET(_: Request, { params }: { params: { id: string } }) {
+  const state = readPipelineState(params.id);
+  if (!state) {
+    return NextResponse.json({ error: "Pipeline not found" }, { status: 404 });
+  }
+  return NextResponse.json(state);
+}

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

@@ -0,0 +1,64 @@
+import { NextResponse } from "next/server";
+import { listPipelines, getPipelinesDir } from "@/lib/pipelines";
+import { v4 as uuidv4 } from "uuid";
+import fs from "fs";
+import path from "path";
+import { spawn } from "child_process";
+
+export async function GET() {
+  try {
+    const pipelines = listPipelines();
+    return NextResponse.json({ pipelines });
+  } catch {
+    return NextResponse.json({ error: "Failed to read pipelines directory" }, { status: 500 });
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { requirements } = body;
+
+    if (!requirements || !requirements.trim()) {
+      return NextResponse.json({ error: "Requirements is required" }, { status: 400 });
+    }
+
+    const id = uuidv4();
+    const pipelineDir = path.join(getPipelinesDir(), id);
+    fs.mkdirSync(pipelineDir, { recursive: true });
+
+    const initialState = {
+      id,
+      name: `Pipeline ${id.slice(0, 8)}`,
+      requirements: requirements.trim(),
+      status: "running",
+      currentPhase: 0,
+      agents: {},
+      outputs: [],
+      activities: [],
+      createdAt: new Date().toISOString(),
+    };
+
+    fs.writeFileSync(
+      path.join(pipelineDir, "state.json"),
+      JSON.stringify(initialState, null, 2)
+    );
+
+    // Spawn CLI process (fire-and-forget)
+    try {
+      const child = spawn("claude", [requirements.trim()], {
+        cwd: path.resolve(process.cwd(), ".."),
+        detached: true,
+        stdio: "ignore",
+        env: { ...process.env, PIPELINE_ID: id },
+      });
+      child.unref();
+    } catch (e) {
+      console.error("Failed to spawn CLI:", e);
+    }
+
+    return NextResponse.json({ id, status: "running" }, { status: 201 });
+  } catch {
+    return NextResponse.json({ error: "Failed to start pipeline process" }, { status: 500 });
+  }
+}

package/template/.claude-pipeline/dashboard/src/app/globals.css

@@ -0,0 +1,52 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #111827;
+  --foreground: #f3f4f6;
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: #1f2937;
+}
+::-webkit-scrollbar-thumb {
+  background: #374151;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #4b5563;
+}
+
+.writing-mode-vertical {
+  writing-mode: vertical-lr;
+}
+
+/* Prose overrides for dark theme */
+.prose-invert {
+  --tw-prose-headings: #a5b4fc;
+  --tw-prose-links: #8b5cf6;
+  --tw-prose-bold: #f3f4f6;
+  --tw-prose-code: #a5b4fc;
+}
+
+.prose table {
+  border-collapse: collapse;
+}
+.prose th, .prose td {
+  border: 1px solid #374151;
+  padding: 6px 12px;
+}
+.prose th {
+  background: #1f2937;
+}

package/template/.claude-pipeline/dashboard/src/app/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "Pipeline Dashboard",
+  description: "Agent Pipeline 진행 상태 모니터링 대시보드",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="ko">
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+        {children}
+      </body>
+    </html>
+  );
+}

package/template/.claude-pipeline/dashboard/src/app/page.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useState } from "react";
+import { usePipelines } from "@/hooks/use-pipelines";
+import { PipelineCard } from "@/components/pipeline-card";
+import { NewPipelineModal } from "@/components/new-pipeline-modal";
+
+export default function Home() {
+  const { pipelines, loading } = usePipelines();
+  const [modalOpen, setModalOpen] = useState(false);
+
+  return (
+    <div className="min-h-screen font-[family-name:var(--font-geist-sans)]">
+      <header className="flex justify-between items-center px-6 py-4 border-b border-border">
+        <h1 className="text-lg font-bold bg-gradient-to-r from-accent-purple to-accent-purple-light bg-clip-text text-transparent">
+          Pipeline Dashboard
+        </h1>
+        <button
+          onClick={() => setModalOpen(true)}
+          className="bg-gradient-to-r from-accent-purple to-accent-purple-light text-white text-sm px-4 py-2 rounded-lg hover:opacity-90"
+        >
+          + New Pipeline
+        </button>
+      </header>
+
+      <main className="p-6">
+        {loading ? (
+          <div className="text-text-secondary text-center py-20">Loading...</div>
+        ) : pipelines.length === 0 ? (
+          <div className="text-text-secondary text-center py-20">
+            아직 파이프라인이 없습니다.
+            <br />
+            <button onClick={() => setModalOpen(true)} className="text-accent-purple-light mt-2 hover:underline">
+              + New Pipeline으로 시작하세요.
+            </button>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-3 max-w-4xl mx-auto">
+            {pipelines.map((p) => (
+              <PipelineCard key={p.id} pipeline={p} />
+            ))}
+          </div>
+        )}
+      </main>
+
+      <NewPipelineModal open={modalOpen} onClose={() => setModalOpen(false)} />
+    </div>
+  );
+}

package/template/.claude-pipeline/dashboard/src/app/pipeline/[id]/page.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { usePipelineDetail } from "@/hooks/use-pipeline-detail";
+import { PhaseDots } from "@/components/phase-dots";
+import { AgentCardList } from "@/components/agent-card";
+import { AgentLogs } from "@/components/agent-logs";
+import { OutputList } from "@/components/output-list";
+import { CheckpointBanner } from "@/components/checkpoint-banner";
+import { ResizablePanels } from "@/components/resizable-panels";
+import { ArtifactViewer } from "@/components/artifact-viewer";
+
+export default function PipelineDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const id = params.id as string;
+  const { pipeline, checkpoint, loading, notFound, respondToCheckpoint } = usePipelineDetail(id);
+  const [selectedOutput, setSelectedOutput] = useState<string | null>(null);
+
+  if (loading) {
+    return <div className="text-text-secondary text-center py-20">Loading...</div>;
+  }
+
+  if (notFound || !pipeline) {
+    router.push("/");
+    return null;
+  }
+
+  const statusColor =
+    pipeline.status === "running" ? "text-accent-green" :
+    pipeline.status === "completed" ? "text-text-muted" :
+    pipeline.status === "failed" ? "text-red-500" :
+    "text-yellow-500";
+
+  return (
+    <div className="h-screen flex flex-col font-[family-name:var(--font-geist-sans)]">
+      {/* Header */}
+      <header className="px-6 py-3 border-b border-border flex-shrink-0">
+        <div className="flex justify-between items-start">
+          <button onClick={() => router.push("/")} className="text-text-secondary text-[11px] hover:text-text-primary">
+            ← Back
+          </button>
+          <span className={`text-[11px] ${statusColor}`}>● {pipeline.status.toUpperCase()}</span>
+        </div>
+        <div className="flex justify-between items-center mt-1">
+          <h1 className="text-base font-semibold text-text-primary">{pipeline.requirements}</h1>
+          <PhaseDots currentPhase={pipeline.currentPhase} showLabel />
+        </div>
+      </header>
+
+      {/* 3-Panel Layout */}
+      <div className="flex-1 overflow-hidden">
+        <ResizablePanels
+          left={<AgentCardList agents={pipeline.agents} />}
+          center={<AgentLogs activities={pipeline.activities} />}
+          right={
+            <OutputList
+              outputs={pipeline.outputs}
+              onSelect={setSelectedOutput}
+              selected={selectedOutput || undefined}
+            />
+          }
+        />
+      </div>
+
+      {/* Checkpoint Banner */}
+      {checkpoint && checkpoint.status === "pending" && (
+        <CheckpointBanner checkpoint={checkpoint} onRespond={respondToCheckpoint} />
+      )}
+
+      {/* Artifact Viewer */}
+      {selectedOutput && (
+        <ArtifactViewer
+          pipelineId={id}
+          outputs={pipeline.outputs}
+          selected={selectedOutput}
+          onSelect={setSelectedOutput}
+          onClose={() => setSelectedOutput(null)}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,40 @@
+"use client";
+
+import { AGENTS } from "@/lib/agents";
+import type { AgentState } from "@/types/pipeline";
+
+interface AgentCardListProps {
+  agents: Record<string, AgentState>;
+}
+
+export function AgentCardList({ agents }: AgentCardListProps) {
+  return (
+    <div className="p-3">
+      <div className="text-text-secondary text-[11px] font-semibold mb-2">AGENTS</div>
+      <div className="flex flex-col gap-[6px]">
+        {AGENTS.map((meta) => {
+          const state = agents[meta.id];
+          const status = state?.status || "idle";
+          const borderColor =
+            status === "working" ? meta.workingColor : "#6b7280";
+          const statusColor =
+            status === "working" ? meta.workingColor :
+            status === "done" ? "#6b7280" : "#6b7280";
+
+          return (
+            <div
+              key={meta.id}
+              className="bg-panel p-2 rounded-md flex justify-between items-center text-[11px]"
+              style={{ borderLeft: `3px solid ${borderColor}` }}
+            >
+              <span className="text-text-primary">
+                {meta.emoji} {meta.name} ({meta.role})
+              </span>
+              <span style={{ color: statusColor }}>{status}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/template/.claude-pipeline/dashboard/src/components/agent-logs.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { AGENTS, AGENT_MAP, ACTIVITY_TAG } from "@/lib/agents";
+import type { Activity } from "@/types/pipeline";
+
+interface AgentLogsProps {
+  activities: Activity[];
+}
+
+export function AgentLogs({ activities }: AgentLogsProps) {
+  const activeAgentIds = Array.from(new Set(activities.map((a) => a.agentId)));
+  const tabOrder = AGENTS.filter((a) => activeAgentIds.includes(a.id));
+  // Always show system as first tab option if it has activities
+  const allTabs = activeAgentIds.includes("system")
+    ? [{ id: "system", emoji: "⚙️", name: "System" }, ...tabOrder]
+    : tabOrder;
+
+  const [selectedTab, setSelectedTab] = useState(allTabs[0]?.id || "");
+  const logsEndRef = useRef<HTMLDivElement>(null);
+
+  const filteredLogs = activities.filter((a) => a.agentId === selectedTab);
+
+  useEffect(() => {
+    logsEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [filteredLogs.length]);
+
+  return (
+    <>
+      <div className="flex gap-0 border-b border-border px-3 bg-[#111827] overflow-x-auto">
+        {allTabs.map((agent) => (
+          <button
+            key={agent.id}
+            onClick={() => setSelectedTab(agent.id)}
+            className={`text-[11px] px-3 py-2 whitespace-nowrap ${
+              selectedTab === agent.id
+                ? "text-accent-purple-light font-semibold border-b-2 border-accent-purple-light"
+                : "text-text-muted hover:text-text-secondary"
+            }`}
+          >
+            {agent.emoji} {agent.name}
+          </button>
+        ))}
+      </div>
+      <div className="flex-1 bg-[#0d1117] p-3 overflow-y-auto font-[family-name:var(--font-geist-mono)] text-[11px]">
+        {filteredLogs.length === 0 ? (
+          <div className="text-text-muted text-center py-10">아직 활동 로그가 없습니다.</div>
+        ) : (
+          filteredLogs.map((log) => {
+            const tag = ACTIVITY_TAG[log.type] || ACTIVITY_TAG.info;
+            const time = new Date(log.timestamp).toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit" });
+            return (
+              <div key={log.id} className="mb-[5px]">
+                <span className="text-text-muted">{time}</span>{" "}
+                <span style={{ color: tag.color }}>[{tag.label}]</span>{" "}
+                <span className="text-text-primary">{log.message}</span>
+              </div>
+            );
+          })
+        )}
+        <div ref={logsEndRef} />
+      </div>
+    </>
+  );
+}

package/template/.claude-pipeline/dashboard/src/components/artifact-viewer.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import dynamic from "next/dynamic";
+import remarkGfm from "remark-gfm";
+import type { OutputEntry } from "@/types/pipeline";
+
+const ReactMarkdown = dynamic(() => import("react-markdown").then((mod) => mod.default), {
+  ssr: false,
+  loading: () => <div className="text-text-muted text-center py-10">Loading renderer...</div>,
+});
+
+interface ArtifactViewerProps {
+  pipelineId: string;
+  outputs: OutputEntry[];
+  selected: string;
+  onSelect: (filename: string | null) => void;
+  onClose: () => void;
+}
+
+export function ArtifactViewer({ pipelineId, outputs, selected, onSelect, onClose }: ArtifactViewerProps) {
+  const [content, setContent] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+  const [viewMode, setViewMode] = useState<"rendered" | "raw">("rendered");
+
+  useEffect(() => {
+    if (!selected) return;
+    setLoading(true);
+    fetch(`/api/pipelines/${pipelineId}/outputs/${selected}`)
+      .then((res) => res.text())
+      .then(setContent)
+      .catch(() => setContent("Failed to load file"))
+      .finally(() => setLoading(false));
+  }, [pipelineId, selected]);
+
+  const ext = selected.split(".").pop()?.toLowerCase() || "";
+  const isMarkdown = ext === "md";
+  const isHtml = ext === "html";
+
+  const grouped = outputs.reduce((acc, o) => {
+    (acc[o.phase] ||= []).push(o);
+    return acc;
+  }, {} as Record<number, OutputEntry[]>);
+
+  return (
+    <div className="fixed inset-0 bg-black/60 z-50 flex justify-end" onClick={onClose}>
+      <div className="w-full max-w-4xl bg-[#111827] border-l border-border flex" onClick={(e) => e.stopPropagation()}>
+        {/* File list */}
+        <div className="w-[200px] bg-panel border-r border-border overflow-y-auto flex-shrink-0">
+          <div className="px-3 py-2 border-b border-border">
+            <div className="text-text-secondary text-[10px] font-semibold">FILES</div>
+          </div>
+          <div className="p-2 text-[11px]">
+            {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}
+                  </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 cursor-pointer ${
+                          selected === f.filename
+                            ? "bg-border text-accent-purple-light"
+                            : "text-text-secondary hover:bg-panel"
+                        }`}
+                      >
+                        {icon} {name}
+                      </div>
+                    );
+                  })}
+                </div>
+              ))}
+          </div>
+        </div>
+
+        {/* Preview */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          <div className="flex justify-between items-center px-4 py-3 border-b border-border">
+            <div className="text-text-primary text-sm font-semibold">{selected.split("/").pop()}</div>
+            <div className="flex items-center gap-2">
+              {isMarkdown && (
+                <div className="flex gap-1">
+                  <button
+                    onClick={() => setViewMode("rendered")}
+                    className={`px-2 py-1 text-[10px] rounded ${viewMode === "rendered" ? "bg-panel text-accent-purple-light" : "text-text-muted"}`}
+                  >
+                    Rendered
+                  </button>
+                  <button
+                    onClick={() => setViewMode("raw")}
+                    className={`px-2 py-1 text-[10px] rounded ${viewMode === "raw" ? "bg-panel text-accent-purple-light" : "text-text-muted"}`}
+                  >
+                    Raw
+                  </button>
+                </div>
+              )}
+              <button onClick={onClose} className="text-text-muted hover:text-text-primary text-lg">×</button>
+            </div>
+          </div>
+          <div className="flex-1 overflow-y-auto p-4">
+            {loading ? (
+              <div className="text-text-muted text-center py-10">Loading...</div>
+            ) : isHtml ? (
+              <iframe
+                srcDoc={content}
+                className="w-full h-full border-0 bg-white rounded"
+                sandbox="allow-scripts"
+              />
+            ) : isMarkdown && viewMode === "rendered" ? (
+              <div className="prose prose-invert prose-sm max-w-none">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+              </div>
+            ) : isMarkdown && viewMode === "raw" ? (
+              <pre className="text-text-primary text-xs whitespace-pre-wrap font-[family-name:var(--font-geist-mono)]">{content}</pre>
+            ) : (
+              <pre className="text-text-primary text-xs whitespace-pre-wrap font-[family-name:var(--font-geist-mono)]">{content}</pre>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}