create-claude-code-visualizer 0.1.0

package/templates/app/src/app/api/agents/[slug]/route.ts

@@ -0,0 +1,57 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getAgent, updateAgentMeta, deleteAgent } from "@/lib/agents";
+import { getAgentCapabilities } from "@/lib/capabilities";
+
+export async function GET(
+  _req: Request,
+  { params }: { params: Promise<{ slug: string }> }
+) {
+  const { slug } = await params;
+  const agent = getAgent(slug);
+  if (!agent) {
+    return NextResponse.json({ error: "Agent not found" }, { status: 404 });
+  }
+
+  const capabilities = getAgentCapabilities(slug);
+
+  return NextResponse.json({ ...agent, capabilities });
+}
+
+export async function PATCH(
+  req: NextRequest,
+  { params }: { params: Promise<{ slug: string }> }
+) {
+  const { slug } = await params;
+
+  if (slug === "main") {
+    return NextResponse.json({ error: "Main agent cannot be edited" }, { status: 400 });
+  }
+
+  const body = await req.json();
+  const { name, description, emoji, vibe, tools, mcpServers } = body;
+
+  const updated = updateAgentMeta(slug, { name, description, emoji, vibe, tools, mcpServers });
+  if (!updated) {
+    return NextResponse.json({ error: "Agent not found" }, { status: 404 });
+  }
+
+  return NextResponse.json(updated);
+}
+
+export async function DELETE(
+  _req: NextRequest,
+  { params }: { params: Promise<{ slug: string }> }
+) {
+  const { slug } = await params;
+
+  if (slug === "main") {
+    return NextResponse.json({ error: "Main agent cannot be deleted" }, { status: 400 });
+  }
+
+  const deleted = deleteAgent(slug);
+  if (!deleted) {
+    return NextResponse.json({ error: "Agent not found" }, { status: 404 });
+  }
+
+  return NextResponse.json({ ok: true });
+}

package/templates/app/src/app/api/agents/route.ts

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getAgents, createAgent } from "@/lib/agents";
+
+export async function GET() {
+  const agents = getAgents();
+  return NextResponse.json(agents);
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json();
+    const { name, description, tools, mcpServers, color, emoji, vibe, model, content } = body;
+
+    if (!name || !description || !content) {
+      return NextResponse.json(
+        { error: "name, description, and content are required" },
+        { status: 400 }
+      );
+    }
+
+    const agent = createAgent({ name, description, tools, mcpServers, color, emoji, vibe, model, content });
+    return NextResponse.json(agent, { status: 201 });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Failed to create agent";
+    const status = message.includes("already exists") ? 409 : 500;
+    return NextResponse.json({ error: message }, { status });
+  }
+}

package/templates/app/src/app/api/ai/generate-agent/route.ts

@@ -0,0 +1,87 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const ANTHROPIC_API_URL = "https://api.anthropic.com/v1/messages";
+const MODEL = "claude-haiku-4-5-20251001";
+
+const SYSTEM_PROMPT = `You are an agent architect. Given a user's description of what they want an agent to do, generate a complete agent definition.
+
+Return a JSON object with these fields:
+- name: A short, descriptive name (2-4 words)
+- description: One sentence explaining what the agent does
+- tools: Comma-separated list of tools the agent needs. Available tools: WebFetch, WebSearch, Read, Write, Edit, Bash, Glob, Grep
+- color: A hex color or named color that fits the agent's theme (e.g., "#10B981", "teal", "purple", "#F59E0B")
+- emoji: A single emoji that represents the agent
+- vibe: A short, witty tagline (under 80 chars) describing the agent's personality
+- content: The full system prompt for the agent in markdown. This should be detailed and include:
+  - An identity section explaining who the agent is and what it does
+  - Specific instructions for how it should operate
+  - Any relevant constraints or guidelines
+  - Output format preferences if applicable
+
+The content should be well-structured markdown with headers. Make the agent focused and practical.
+
+Return ONLY valid JSON, no markdown fences or extra text.`;
+
+export async function POST(req: NextRequest) {
+  const apiKey = process.env.ANTHROPIC_API_KEY;
+  if (!apiKey) {
+    return NextResponse.json({ error: "ANTHROPIC_API_KEY not set" }, { status: 500 });
+  }
+
+  const { prompt } = await req.json();
+  if (!prompt || typeof prompt !== "string") {
+    return NextResponse.json({ error: "prompt is required" }, { status: 400 });
+  }
+
+  try {
+    const res = await fetch(ANTHROPIC_API_URL, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": apiKey,
+        "anthropic-version": "2023-06-01",
+      },
+      body: JSON.stringify({
+        model: MODEL,
+        max_tokens: 4096,
+        system: SYSTEM_PROMPT,
+        messages: [
+          {
+            role: "user",
+            content: `Create an agent for the following purpose:\n\n${prompt}`,
+          },
+        ],
+      }),
+    });
+
+    if (!res.ok) {
+      const body = await res.text();
+      return NextResponse.json(
+        { error: `Anthropic API error ${res.status}: ${body}` },
+        { status: 502 }
+      );
+    }
+
+    const data = await res.json();
+    const text = data.content?.[0]?.text || "";
+
+    // Strip markdown fences if present
+    const cleaned = text.trim().replace(/^```(?:json)?\s*\n?/i, "").replace(/\n?```\s*$/i, "").trim();
+    const agent = JSON.parse(cleaned);
+
+    // Validate required fields
+    if (!agent.name || !agent.description || !agent.content) {
+      return NextResponse.json(
+        { error: "AI generated incomplete agent definition" },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json(agent);
+  } catch (err) {
+    return NextResponse.json(
+      { error: err instanceof Error ? err.message : "Failed to generate agent" },
+      { status: 500 }
+    );
+  }
+}

package/templates/app/src/app/api/ai/improve-claude-md/route.ts

@@ -0,0 +1,78 @@
+import { NextRequest, NextResponse } from "next/server";
+import { requireRole } from "@/lib/auth-guard";
+
+const GEMINI_URL =
+  "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent";
+
+const SYSTEM_PROMPT = `You are a precise editor for CLAUDE.md files (project-level instructions for Claude Code).
+
+Rules:
+- Apply ONLY the changes the user requests. Do not rewrite, reformat, or "improve" anything else.
+- Preserve the exact structure, formatting, whitespace, and ordering of sections you don't touch.
+- Return the COMPLETE file contents with your changes applied — nothing else.
+- Do NOT wrap output in markdown code fences or add any explanation.
+- Do NOT add or remove blank lines unless the user specifically asks.
+- If the instruction is unclear, make the minimal reasonable interpretation.`;
+
+export async function POST(req: NextRequest) {
+  const auth = await requireRole(req, ["admin"], "improve_claude_md", "settings/claude-md");
+  if (!auth.authorized) return auth.response;
+
+  const { content, instruction } = await req.json();
+
+  if (typeof content !== "string" || typeof instruction !== "string" || !instruction.trim()) {
+    return NextResponse.json(
+      { error: "content and instruction are required" },
+      { status: 400 }
+    );
+  }
+
+  const apiKey = process.env.GEMINI_API_KEY;
+  if (!apiKey) {
+    return NextResponse.json({ error: "GEMINI_API_KEY not set" }, { status: 500 });
+  }
+
+  try {
+    const res = await fetch(`${GEMINI_URL}?key=${apiKey}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        system_instruction: { parts: [{ text: SYSTEM_PROMPT }] },
+        contents: [
+          {
+            parts: [
+              {
+                text: `Here is the current CLAUDE.md file:\n\n${content}\n\n---\n\nUser instruction: ${instruction}`,
+              },
+            ],
+          },
+        ],
+        generationConfig: {
+          maxOutputTokens: 16384,
+          temperature: 0.1,
+        },
+      }),
+    });
+
+    if (!res.ok) {
+      const body = await res.text();
+      throw new Error(`Gemini API error ${res.status}: ${body}`);
+    }
+
+    const data = await res.json();
+    let improved =
+      data.candidates?.[0]?.content?.parts?.[0]?.text || "";
+
+    // Strip any accidental code fences the model might add
+    improved = improved
+      .replace(/^```(?:markdown|md)?\s*\n/i, "")
+      .replace(/\n```\s*$/, "");
+
+    return NextResponse.json({ improved });
+  } catch (err) {
+    return NextResponse.json(
+      { error: err instanceof Error ? err.message : "Failed to improve content" },
+      { status: 500 }
+    );
+  }
+}

package/templates/app/src/app/api/ai/suggestions/route.ts

@@ -0,0 +1,64 @@
+import { NextRequest, NextResponse } from "next/server";
+import { callHaiku } from "@/lib/ai";
+
+// In-memory cache: key = "slug:hash" → suggestions[]
+const cache = new Map<string, { suggestions: string[]; hash: string }>();
+
+function hashString(s: string): string {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) {
+    h = ((h << 5) - h + s.charCodeAt(i)) | 0;
+  }
+  return h.toString(36);
+}
+
+export async function GET(req: NextRequest) {
+  const slug = req.nextUrl.searchParams.get("slug");
+  const name = req.nextUrl.searchParams.get("name");
+  const description = req.nextUrl.searchParams.get("description");
+
+  if (!slug || !name || !description) {
+    return NextResponse.json(
+      { error: "slug, name, and description are required" },
+      { status: 400 }
+    );
+  }
+
+  const hash = hashString(`${name}:${description}`);
+  const cached = cache.get(slug);
+  if (cached && cached.hash === hash) {
+    return NextResponse.json({ suggestions: cached.suggestions });
+  }
+
+  try {
+    const raw = await callHaiku(
+      "You generate short prompt suggestions for an AI assistant chat interface. Return exactly 3 suggestions as a JSON array of strings. Each suggestion should be a natural, conversational request that a user might ask this specific agent. Keep them short (under 60 chars), varied in topic, and practical. Return ONLY the JSON array, no other text.",
+      [
+        {
+          role: "user",
+          content: `Agent name: ${name}\nAgent description: ${description}\n\nGenerate 4 prompt suggestions:`,
+        },
+      ],
+      200
+    );
+
+    // Strip markdown code fences if present
+    const cleaned = raw.trim().replace(/^```(?:json)?\s*\n?/i, "").replace(/\n?```\s*$/i, "").trim();
+    const suggestions = JSON.parse(cleaned);
+    if (Array.isArray(suggestions) && suggestions.length >= 3) {
+      const result = suggestions.slice(0, 3).map(String);
+      cache.set(slug, { suggestions: result, hash });
+      return NextResponse.json({ suggestions: result });
+    }
+
+    return NextResponse.json(
+      { error: "Invalid response from model" },
+      { status: 500 }
+    );
+  } catch (err) {
+    return NextResponse.json(
+      { error: err instanceof Error ? err.message : "Failed to generate suggestions" },
+      { status: 500 }
+    );
+  }
+}

package/templates/app/src/app/api/ai/title/route.ts

@@ -0,0 +1,88 @@
+import { NextRequest, NextResponse } from "next/server";
+import { supabase } from "@/lib/supabase";
+
+const GEMINI_URL = "https://generativelanguage.googleapis.com/v1beta/models/gemini-3.1-flash-lite-preview:generateContent";
+
+const SYSTEM_PROMPT =
+  "You name chat conversations. Given the user's first message, generate a very short chat title (2-5 words max). Start with a relevant emoji. Return ONLY the title, nothing else. Examples:\n🐛 Fix login bug\n📊 Sales dashboard layout\n🚀 Deploy to production\n✍️ Write blog post\n📧 Email template help";
+
+async function generateTitle(message: string): Promise<string> {
+  const apiKey = process.env.GEMINI_API_KEY;
+  if (!apiKey) throw new Error("GEMINI_API_KEY not set");
+
+  const res = await fetch(`${GEMINI_URL}?key=${apiKey}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      system_instruction: { parts: [{ text: SYSTEM_PROMPT }] },
+      contents: [{ parts: [{ text: message }] }],
+      generationConfig: { maxOutputTokens: 30, temperature: 0.7 },
+    }),
+  });
+
+  if (!res.ok) {
+    const body = await res.text();
+    throw new Error(`Gemini API error ${res.status}: ${body}`);
+  }
+
+  const data = await res.json();
+  const text = data.candidates?.[0]?.content?.parts?.[0]?.text || "";
+  return text.trim().replace(/^["']|["']$/g, "");
+}
+
+export async function POST(req: NextRequest) {
+  const { session_id, message } = await req.json();
+
+  if (!session_id || !message) {
+    return NextResponse.json(
+      { error: "session_id and message are required" },
+      { status: 400 }
+    );
+  }
+
+  // Check if title already exists
+  const { data: existing } = await supabase
+    .from("session_titles")
+    .select("title")
+    .eq("session_id", session_id)
+    .single();
+
+  if (existing?.title) {
+    return NextResponse.json({ title: existing.title });
+  }
+
+  try {
+    const title = await generateTitle(message);
+
+    await supabase
+      .from("session_titles")
+      .upsert({ session_id, title });
+
+    return NextResponse.json({ title });
+  } catch (err) {
+    return NextResponse.json(
+      { error: err instanceof Error ? err.message : "Failed to generate title" },
+      { status: 500 }
+    );
+  }
+}
+
+export async function GET(req: NextRequest) {
+  const sessionIds = req.nextUrl.searchParams.get("session_ids");
+  if (!sessionIds) {
+    return NextResponse.json({ error: "session_ids required" }, { status: 400 });
+  }
+
+  const ids = sessionIds.split(",").filter(Boolean);
+  const { data } = await supabase
+    .from("session_titles")
+    .select("session_id, title")
+    .in("session_id", ids);
+
+  const map: Record<string, string> = {};
+  for (const row of data || []) {
+    map[row.session_id] = row.title;
+  }
+
+  return NextResponse.json({ titles: map });
+}

package/templates/app/src/app/api/auth/role/route.ts

@@ -0,0 +1,17 @@
+import { NextResponse } from "next/server";
+import { createClient } from "@/lib/supabase-server";
+
+export async function GET() {
+  const supabase = await createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+
+  if (!user?.email) {
+    return NextResponse.json({ role: null });
+  }
+
+  const { data: role } = await supabase.rpc("check_user_role", {
+    user_email: user.email,
+  });
+
+  return NextResponse.json({ role: role || null, email: user.email });
+}

package/templates/app/src/app/api/commands/[slug]/route.ts

@@ -0,0 +1,61 @@
+import { NextRequest, NextResponse } from "next/server";
+import fs from "fs";
+import path from "path";
+
+const PROJECT_ROOT = process.env.PROJECT_ROOT || path.resolve(__dirname, "../../../../..");
+const COMMANDS_DIR = path.join(PROJECT_ROOT, ".claude", "commands");
+
+function resolveCommandPath(slug: string): string | null {
+  // slug can be "foo" (top-level) or "consider/pareto" (grouped)
+  const parts = slug.split("/");
+  if (parts.length === 1) {
+    const p = path.join(COMMANDS_DIR, `${slug}.md`);
+    return fs.existsSync(p) ? p : null;
+  }
+  if (parts.length === 2) {
+    const p = path.join(COMMANDS_DIR, parts[0], `${parts[1]}.md`);
+    return fs.existsSync(p) ? p : null;
+  }
+  return null;
+}
+
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ slug: string }> }
+) {
+  const { slug } = await params;
+  const decoded = decodeURIComponent(slug);
+  const filePath = resolveCommandPath(decoded);
+
+  if (!filePath) {
+    return NextResponse.json({ error: "Command not found" }, { status: 404 });
+  }
+
+  try {
+    const content = fs.readFileSync(filePath, "utf-8");
+    return NextResponse.json({ slug: decoded, content });
+  } catch {
+    return NextResponse.json({ error: "Command not found" }, { status: 404 });
+  }
+}
+
+export async function PATCH(
+  req: NextRequest,
+  { params }: { params: Promise<{ slug: string }> }
+) {
+  const { slug } = await params;
+  const decoded = decodeURIComponent(slug);
+  const filePath = resolveCommandPath(decoded);
+
+  if (!filePath) {
+    return NextResponse.json({ error: "Command not found" }, { status: 404 });
+  }
+
+  const { content } = await req.json();
+  if (typeof content !== "string") {
+    return NextResponse.json({ error: "content must be a string" }, { status: 400 });
+  }
+
+  fs.writeFileSync(filePath, content, "utf-8");
+  return NextResponse.json({ slug: decoded, saved: true });
+}

package/templates/app/src/app/api/commands/route.ts

@@ -0,0 +1,6 @@
+import { NextResponse } from "next/server";
+import { readCommands } from "@/lib/capabilities";
+
+export async function GET() {
+  return NextResponse.json(readCommands());
+}

package/templates/app/src/app/api/governance/costs/route.ts

@@ -0,0 +1,117 @@
+import { NextRequest, NextResponse } from "next/server";
+import { supabase } from "@/lib/supabase";
+import { requireRole } from "@/lib/auth-guard";
+
+/**
+ * GET /api/governance/costs
+ *
+ * Returns cost aggregations from agent_runs for today, this week, and this month.
+ * Also returns per-agent breakdowns and top runs by cost.
+ */
+export async function GET(req: NextRequest) {
+  const auth = await requireRole(req, ["admin"], "governance:costs", "/api/governance/costs");
+  if (!auth.authorized) return auth.response!;
+
+  const now = new Date();
+
+  // Start of today (UTC)
+  const todayStart = new Date(now);
+  todayStart.setUTCHours(0, 0, 0, 0);
+
+  // Start of this week (Monday, UTC)
+  const weekStart = new Date(now);
+  const dayOfWeek = weekStart.getUTCDay();
+  const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+  weekStart.setUTCDate(weekStart.getUTCDate() - daysToMonday);
+  weekStart.setUTCHours(0, 0, 0, 0);
+
+  // Start of this month (UTC)
+  const monthStart = new Date(now.getUTCFullYear(), now.getUTCMonth(), 1);
+
+  // Fetch all runs with cost data from this month (superset of week and day)
+  const { data: runs, error } = await supabase
+    .from("agent_runs")
+    .select("cost_usd, agent_slug, agent_name, created_at, duration_ms, prompt")
+    .gte("created_at", monthStart.toISOString())
+    .not("cost_usd", "is", null)
+    .order("created_at", { ascending: false });
+
+  if (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+
+  const safeRuns = runs || [];
+
+  // Aggregate by time period
+  let todayTotal = 0;
+  let todayCount = 0;
+  let weekTotal = 0;
+  let weekCount = 0;
+  let monthTotal = 0;
+  let monthCount = 0;
+
+  // Per-agent breakdown (for the month)
+  const agentCosts: Record<string, { name: string; total: number; count: number }> = {};
+
+  for (const run of safeRuns) {
+    const cost = run.cost_usd as number;
+    const createdAt = new Date(run.created_at);
+    const slug = run.agent_slug as string;
+    const name = run.agent_name as string;
+
+    // Month (all runs in result set)
+    monthTotal += cost;
+    monthCount++;
+
+    // Week
+    if (createdAt >= weekStart) {
+      weekTotal += cost;
+      weekCount++;
+    }
+
+    // Today
+    if (createdAt >= todayStart) {
+      todayTotal += cost;
+      todayCount++;
+    }
+
+    // Per-agent
+    if (!agentCosts[slug]) {
+      agentCosts[slug] = { name, total: 0, count: 0 };
+    }
+    agentCosts[slug].total += cost;
+    agentCosts[slug].count++;
+  }
+
+  // Sort agents by total cost descending
+  const agentBreakdown = Object.entries(agentCosts)
+    .map(([slug, data]) => ({
+      slug,
+      name: data.name,
+      total: data.total,
+      count: data.count,
+      avgPerRun: data.count > 0 ? data.total / data.count : 0,
+    }))
+    .sort((a, b) => b.total - a.total);
+
+  // Top 5 most expensive individual runs this month
+  const topRuns = safeRuns
+    .sort((a, b) => (b.cost_usd as number) - (a.cost_usd as number))
+    .slice(0, 5)
+    .map((r) => ({
+      agent_name: r.agent_name,
+      cost_usd: r.cost_usd,
+      prompt: (r.prompt as string)?.slice(0, 80) || "—",
+      created_at: r.created_at,
+    }));
+
+  return NextResponse.json({
+    periods: {
+      today: { total: todayTotal, count: todayCount },
+      week: { total: weekTotal, count: weekCount },
+      month: { total: monthTotal, count: monthCount },
+    },
+    agentBreakdown,
+    topRuns,
+  });
+}