create-claude-code-visualizer 0.1.0

package/templates/app/src/app/api/settings/env-keys/route.ts

@@ -0,0 +1,271 @@
+import { NextRequest, NextResponse } from "next/server";
+import { requireRole } from "@/lib/auth-guard";
+import fs from "fs";
+import path from "path";
+
+// ---------------------------------------------------------------------------
+// Key manifest — the keys this app cares about
+// ---------------------------------------------------------------------------
+
+interface KeyDef {
+  name: string;
+  category: "core" | "auth";
+  optional: boolean;
+  /** Which .env file this key lives in (relative to PROJECT_ROOT) */
+  envFile: string;
+  /** Validation description shown in UI */
+  validationHint: string;
+}
+
+const KEY_MANIFEST: KeyDef[] = [
+  {
+    name: "ANTHROPIC_API_KEY",
+    category: "core",
+    optional: false,
+    envFile: "personal-assistant-app/.env.local",
+    validationHint: "Tested against Anthropic API",
+  },
+  {
+    name: "GEMINI_API_KEY",
+    category: "core",
+    optional: false,
+    envFile: "personal-assistant-app/.env.local",
+    validationHint: "Tested against Gemini API",
+  },
+  {
+    name: "SUPABASE_URL",
+    category: "core",
+    optional: false,
+    envFile: "personal-assistant-app/.env.local",
+    validationHint: "Must be a valid URL",
+  },
+  {
+    name: "SUPABASE_ANON_KEY",
+    category: "core",
+    optional: false,
+    envFile: "personal-assistant-app/.env.local",
+    validationHint: "JWT format (eyJ...)",
+  },
+  {
+    name: "GOOGLE_CLIENT_ID",
+    category: "auth",
+    optional: true,
+    envFile: "personal-assistant-app/.env.local",
+    validationHint: "OAuth client ID",
+  },
+  {
+    name: "GOOGLE_CLIENT_SECRET",
+    category: "auth",
+    optional: true,
+    envFile: "personal-assistant-app/.env.local",
+    validationHint: "OAuth client secret",
+  },
+];
+
+const PROJECT_ROOT = process.env.PROJECT_ROOT || "/mnt/c/Users/Admin/Documents/PersonalAIssistant";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function maskValue(value: string): string {
+  if (value.length <= 8) return "••••••••";
+  return "••••••••" + value.slice(-4);
+}
+
+type Source = "env-file" | "process" | "missing";
+
+function detectSource(name: string, envFile: string): { source: Source; value: string } {
+  // Check .env file first
+  const envPath = path.join(PROJECT_ROOT, envFile);
+  try {
+    const content = fs.readFileSync(envPath, "utf-8");
+    const regex = new RegExp(`^${name}=(.*)$`, "m");
+    const match = content.match(regex);
+    if (match && match[1].trim()) {
+      return { source: "env-file", value: match[1].trim() };
+    }
+  } catch { /* file doesn't exist */ }
+
+  // Check process.env
+  if (process.env[name]) {
+    return { source: "process", value: process.env[name]! };
+  }
+
+  return { source: "missing", value: "" };
+}
+
+async function validateKey(name: string, value: string): Promise<{ valid: boolean; error?: string }> {
+  if (!value) return { valid: false, error: "Empty value" };
+
+  switch (name) {
+    case "ANTHROPIC_API_KEY": {
+      try {
+        // Make a real API call — /v1/models doesn't check credit balance, so a "stuck" key looks valid there
+        const res = await fetch("https://api.anthropic.com/v1/messages", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key": value,
+            "anthropic-version": "2023-06-01",
+          },
+          body: JSON.stringify({
+            model: "claude-haiku-4-5-20251001",
+            max_tokens: 1,
+            messages: [{ role: "user", content: "." }],
+          }),
+        });
+        if (res.ok) return { valid: true };
+        if (res.status === 401) return { valid: false, error: "Invalid API key" };
+        const body = await res.text();
+        if (body.includes("credit balance")) {
+          return { valid: false, error: "Key stuck — Anthropic cached a zero balance on this key. Generate a new one at console.anthropic.com/settings/keys" };
+        }
+        return { valid: false, error: `API returned ${res.status}` };
+      } catch (e) {
+        return { valid: false, error: `Connection failed: ${(e as Error).message}` };
+      }
+    }
+
+    case "GEMINI_API_KEY": {
+      try {
+        const res = await fetch(
+          `https://generativelanguage.googleapis.com/v1beta/models?key=${value}`
+        );
+        if (res.ok) return { valid: true };
+        if (res.status === 400 || res.status === 403) return { valid: false, error: "Invalid API key" };
+        return { valid: false, error: `API returned ${res.status}` };
+      } catch (e) {
+        return { valid: false, error: `Connection failed: ${(e as Error).message}` };
+      }
+    }
+
+    case "SUPABASE_URL": {
+      try {
+        new URL(value);
+        return { valid: true };
+      } catch {
+        return { valid: false, error: "Not a valid URL" };
+      }
+    }
+
+    case "SUPABASE_ANON_KEY": {
+      if (value.startsWith("eyJ") && value.includes(".")) return { valid: true };
+      return { valid: false, error: "Doesn't look like a JWT (should start with eyJ)" };
+    }
+
+    case "GOOGLE_CLIENT_ID":
+    case "GOOGLE_CLIENT_SECRET":
+      return { valid: true }; // Just non-empty, already checked above
+
+    default:
+      return { valid: true };
+  }
+}
+
+// ---------------------------------------------------------------------------
+// GET — return manifest with masked values and health status
+// ---------------------------------------------------------------------------
+
+export async function GET(req: NextRequest) {
+  const auth = await requireRole(req, ["admin"], "read", "env-keys");
+  if (!auth.authorized) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  const keys = await Promise.all(
+    KEY_MANIFEST.map(async (def) => {
+      const { source, value } = detectSource(def.name, def.envFile);
+      let health: "valid" | "invalid" | "unchecked" | "missing" = "unchecked";
+      let healthError: string | undefined;
+
+      if (source === "missing") {
+        health = def.optional ? "unchecked" : "missing";
+      } else {
+        const result = await validateKey(def.name, value);
+        health = result.valid ? "valid" : "invalid";
+        healthError = result.error;
+      }
+
+      return {
+        name: def.name,
+        category: def.category,
+        optional: def.optional,
+        masked: source !== "missing" ? maskValue(value) : null,
+        source,
+        health,
+        healthError,
+        validationHint: def.validationHint,
+      };
+    })
+  );
+
+  return NextResponse.json(keys);
+}
+
+// ---------------------------------------------------------------------------
+// PATCH — update a single key
+// ---------------------------------------------------------------------------
+
+export async function PATCH(req: NextRequest) {
+  const auth = await requireRole(req, ["admin"], "write", "env-keys");
+  if (!auth.authorized) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  const { name, value } = await req.json();
+
+  if (typeof name !== "string" || typeof value !== "string") {
+    return NextResponse.json({ error: "name and value must be strings" }, { status: 400 });
+  }
+
+  const def = KEY_MANIFEST.find((k) => k.name === name);
+  if (!def) {
+    return NextResponse.json({ error: `Unknown key: ${name}` }, { status: 400 });
+  }
+
+  // Validate before writing
+  const validation = await validateKey(name, value);
+  if (!validation.valid) {
+    return NextResponse.json(
+      { error: `Validation failed: ${validation.error}`, validated: false },
+      { status: 422 }
+    );
+  }
+
+  // Write to .env file
+  const envPath = path.join(PROJECT_ROOT, def.envFile);
+  try {
+    let content = "";
+    try {
+      content = fs.readFileSync(envPath, "utf-8");
+    } catch {
+      // File doesn't exist, will create
+    }
+
+    const regex = new RegExp(`^${name}=.*$`, "m");
+    const newLine = `${name}=${value}`;
+
+    if (regex.test(content)) {
+      content = content.replace(regex, newLine);
+    } else {
+      content = content.trimEnd() + "\n" + newLine + "\n";
+    }
+
+    fs.writeFileSync(envPath, content, "utf-8");
+
+    // Update process.env in-place (no restart needed)
+    process.env[name] = value;
+
+    return NextResponse.json({
+      success: true,
+      masked: maskValue(value),
+      health: "valid",
+    });
+  } catch (e) {
+    return NextResponse.json(
+      { error: `Failed to write: ${(e as Error).message}` },
+      { status: 500 }
+    );
+  }
+}

package/templates/app/src/app/api/settings/users/route.ts

@@ -0,0 +1,108 @@
+import { NextRequest, NextResponse } from "next/server";
+import { createClient } from "@/lib/supabase-server";
+import { requireRole } from "@/lib/auth-guard";
+
+export async function GET(req: NextRequest) {
+  const auth = await requireRole(req, ["admin"], "view_users", "settings/users");
+  if (!auth.authorized) return auth.response;
+
+  const supabase = await createClient();
+  const { data, error } = await supabase
+    .from("user_roles")
+    .select("*")
+    .order("created_at", { ascending: true });
+
+  if (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+
+  return NextResponse.json(data);
+}
+
+export async function POST(req: NextRequest) {
+  const auth = await requireRole(req, ["admin"], "add_user", "settings/users");
+  if (!auth.authorized) return auth.response;
+
+  const supabase = await createClient();
+  const { email, role } = await req.json();
+
+  if (!email || !role) {
+    return NextResponse.json(
+      { error: "email and role are required" },
+      { status: 400 }
+    );
+  }
+
+  if (!["admin", "operator", "viewer"].includes(role)) {
+    return NextResponse.json(
+      { error: "role must be admin, operator, or viewer" },
+      { status: 400 }
+    );
+  }
+
+  const { data, error } = await supabase
+    .from("user_roles")
+    .insert({ email: email.toLowerCase().trim(), role, added_by: auth.user!.email })
+    .select()
+    .single();
+
+  if (error) {
+    if (error.code === "23505") {
+      return NextResponse.json(
+        { error: "This email is already added" },
+        { status: 409 }
+      );
+    }
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+
+  return NextResponse.json(data, { status: 201 });
+}
+
+export async function PATCH(req: NextRequest) {
+  const auth = await requireRole(req, ["admin"], "update_user_role", "settings/users");
+  if (!auth.authorized) return auth.response;
+
+  const supabase = await createClient();
+  const { id, role } = await req.json();
+
+  if (!id || !role || !["admin", "operator", "viewer"].includes(role)) {
+    return NextResponse.json({ error: "Invalid request" }, { status: 400 });
+  }
+
+  const { data, error } = await supabase
+    .from("user_roles")
+    .update({ role })
+    .eq("id", id)
+    .select()
+    .single();
+
+  if (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+
+  return NextResponse.json(data);
+}
+
+export async function DELETE(req: NextRequest) {
+  const auth = await requireRole(req, ["admin"], "remove_user", "settings/users");
+  if (!auth.authorized) return auth.response;
+
+  const supabase = await createClient();
+  const { id, email } = await req.json();
+
+  if (email === auth.user!.email) {
+    return NextResponse.json(
+      { error: "You cannot remove yourself" },
+      { status: 400 }
+    );
+  }
+
+  const { error } = await supabase.from("user_roles").delete().eq("id", id);
+
+  if (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+
+  return NextResponse.json({ deleted: true });
+}

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

@@ -0,0 +1,43 @@
+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 SKILLS_DIR = path.join(PROJECT_ROOT, ".claude", "skills");
+
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ slug: string }> }
+) {
+  const { slug } = await params;
+  const skillFile = path.join(SKILLS_DIR, slug, "SKILL.md");
+
+  try {
+    const content = fs.readFileSync(skillFile, "utf-8");
+    return NextResponse.json({ slug, content });
+  } catch {
+    return NextResponse.json({ error: "Skill not found" }, { status: 404 });
+  }
+}
+
+export async function PATCH(
+  req: NextRequest,
+  { params }: { params: Promise<{ slug: string }> }
+) {
+  const { slug } = await params;
+  const skillFile = path.join(SKILLS_DIR, slug, "SKILL.md");
+
+  // Verify skill directory exists
+  const skillDir = path.join(SKILLS_DIR, slug);
+  if (!fs.existsSync(skillDir)) {
+    return NextResponse.json({ error: "Skill 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(skillFile, content, "utf-8");
+  return NextResponse.json({ slug, saved: true });
+}

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

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

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

@@ -0,0 +1,65 @@
+import { NextResponse } from "next/server";
+import { readSkills } from "@/lib/capabilities";
+import fs from "fs";
+import path from "path";
+
+const PROJECT_ROOT = process.env.PROJECT_ROOT || path.resolve(__dirname, "../../../../..");
+const MCP_PATH = path.join(PROJECT_ROOT, ".mcp.json");
+
+interface ToolOption {
+  name: string;
+  category: "builtin" | "mcp" | "skill";
+  description?: string;
+}
+
+const BUILTIN_TOOLS: ToolOption[] = [
+  { name: "Read", category: "builtin", description: "Read files from the filesystem" },
+  { name: "Write", category: "builtin", description: "Write/create files" },
+  { name: "Edit", category: "builtin", description: "Edit existing files" },
+  { name: "Bash", category: "builtin", description: "Execute shell commands" },
+  { name: "Glob", category: "builtin", description: "Find files by pattern" },
+  { name: "Grep", category: "builtin", description: "Search file contents" },
+  { name: "WebSearch", category: "builtin", description: "Search the web" },
+  { name: "WebFetch", category: "builtin", description: "Fetch web page content" },
+  { name: "Agent", category: "builtin", description: "Delegate to subagents" },
+];
+
+export async function GET() {
+  const tools: ToolOption[] = [...BUILTIN_TOOLS];
+
+  // MCP servers
+  try {
+    const raw = JSON.parse(fs.readFileSync(MCP_PATH, "utf-8"));
+    const servers = raw.mcpServers || {};
+    for (const name of Object.keys(servers)) {
+      tools.push({
+        name: `mcp:${name}`,
+        category: "mcp",
+        description: `MCP server: ${name}`,
+      });
+    }
+  } catch {
+    // no MCP config
+  }
+
+  // Anthropic-hosted integrations
+  for (const name of ["Gmail", "Linear", "Canva", "ClickUp"]) {
+    tools.push({
+      name: `hosted:${name}`,
+      category: "mcp",
+      description: `Anthropic-hosted integration: ${name}`,
+    });
+  }
+
+  // Skills
+  const skills = readSkills();
+  for (const skill of skills) {
+    tools.push({
+      name: `skill:${skill.slug}`,
+      category: "skill",
+      description: skill.description,
+    });
+  }
+
+  return NextResponse.json(tools);
+}

package/templates/app/src/app/api/uploads/cleanup/route.ts

@@ -0,0 +1,29 @@
+import { NextResponse } from "next/server";
+import fs from "fs";
+import path from "path";
+
+const UPLOADS_ROOT = path.join(process.cwd(), "uploads");
+const MAX_AGE_MS = 3 * 24 * 60 * 60 * 1000; // 3 days
+
+export async function POST() {
+  if (!fs.existsSync(UPLOADS_ROOT)) {
+    return NextResponse.json({ deleted: 0 });
+  }
+
+  const now = Date.now();
+  let deleted = 0;
+
+  const entries = fs.readdirSync(UPLOADS_ROOT, { withFileTypes: true });
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+    const dirPath = path.join(UPLOADS_ROOT, entry.name);
+    const stat = fs.statSync(dirPath);
+
+    if (now - stat.mtimeMs > MAX_AGE_MS) {
+      fs.rmSync(dirPath, { recursive: true, force: true });
+      deleted++;
+    }
+  }
+
+  return NextResponse.json({ deleted });
+}

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

@@ -0,0 +1,77 @@
+import { NextRequest, NextResponse } from "next/server";
+import fs from "fs";
+import path from "path";
+import { requireRole } from "@/lib/auth-guard";
+
+const UPLOADS_ROOT = path.join(process.cwd(), "uploads");
+
+const ALLOWED_TYPES = new Set([
+  "image/png",
+  "image/jpeg",
+  "image/gif",
+  "image/webp",
+  "text/markdown",
+]);
+
+const ALLOWED_EXTENSIONS = new Set([".png", ".jpg", ".jpeg", ".gif", ".webp", ".md"]);
+
+function isAllowed(file: File): boolean {
+  if (ALLOWED_TYPES.has(file.type)) return true;
+  const ext = path.extname(file.name).toLowerCase();
+  return ALLOWED_EXTENSIONS.has(ext);
+}
+
+export async function POST(req: NextRequest) {
+  const auth = await requireRole(req, ["admin", "operator"], "upload_file", "uploads");
+  if (!auth.authorized) return auth.response;
+
+  const formData = await req.formData();
+  const runId = formData.get("run_id") as string | null;
+
+  if (!runId) {
+    return NextResponse.json({ error: "run_id is required" }, { status: 400 });
+  }
+
+  // Sanitize runId to prevent path traversal
+  const safeRunId = runId.replace(/[^a-zA-Z0-9_-]/g, "");
+  if (!safeRunId) {
+    return NextResponse.json({ error: "Invalid run_id" }, { status: 400 });
+  }
+
+  const files = formData.getAll("files") as File[];
+  if (files.length === 0) {
+    return NextResponse.json({ error: "No files provided" }, { status: 400 });
+  }
+
+  // Validate file types
+  const rejected = files.filter((f) => !isAllowed(f));
+  if (rejected.length > 0) {
+    return NextResponse.json(
+      { error: `Only images and markdown files are allowed. Rejected: ${rejected.map((f) => f.name).join(", ")}` },
+      { status: 400 }
+    );
+  }
+
+  const runDir = path.join(UPLOADS_ROOT, safeRunId);
+  fs.mkdirSync(runDir, { recursive: true });
+
+  const saved: { name: string; path: string; size: number; type: string }[] = [];
+
+  for (const file of files) {
+    // Sanitize filename — keep extension, strip dangerous chars
+    const safeName = file.name.replace(/[^a-zA-Z0-9._-]/g, "_");
+    const filePath = path.join(runDir, safeName);
+
+    const buffer = Buffer.from(await file.arrayBuffer());
+    fs.writeFileSync(filePath, buffer);
+
+    saved.push({
+      name: file.name,
+      path: filePath,
+      size: buffer.length,
+      type: file.type,
+    });
+  }
+
+  return NextResponse.json({ files: saved }, { status: 201 });
+}

package/templates/app/src/app/auth/callback/route.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from "next/server";
+import { createClient } from "@/lib/supabase-server";
+
+export async function GET(request: Request) {
+  const { searchParams, origin } = new URL(request.url);
+  const code = searchParams.get("code");
+  const next = searchParams.get("next") ?? "/";
+
+  if (code) {
+    const supabase = await createClient();
+    const { error } = await supabase.auth.exchangeCodeForSession(code);
+    if (!error) {
+      return NextResponse.redirect(`${origin}${next}`);
+    }
+  }
+
+  // Auth error — redirect to login with error
+  return NextResponse.redirect(`${origin}/login?error=auth`);
+}