create-claude-code-visualizer 0.1.0

package/templates/app/src/app/skills/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+export default function SkillsPage() {
+  // This page is handled by the overview tab system.
+  // The OverviewProvider detects /skills and activates the skills tab.
+  return null;
+}

package/templates/app/src/components/agent-card.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import Link from "next/link";
+import type { AgentMeta } from "@/lib/types";
+import { ChevronRightIcon } from "@/components/icons";
+
+/** Tiny color dot derived from agent's assigned color */
+function ColorDot({ color }: { color?: string }) {
+  if (!color) return null;
+  return (
+    <span
+      className="h-2 w-2 rounded-full shrink-0"
+      style={{ backgroundColor: color }}
+    />
+  );
+}
+
+export function AgentCard({ agent }: { agent: AgentMeta }) {
+  return (
+    <Link
+      href={`/agents/${agent.slug}/chat`}
+      className="group flex items-center gap-3 px-3 py-2.5 rounded-md transition-colors hover:bg-[var(--bg-hover)]"
+    >
+      {/* Emoji or color dot */}
+      <span className="text-base shrink-0 w-6 text-center">
+        {agent.emoji || <ColorDot color={agent.color} />}
+      </span>
+
+      {/* Name + description */}
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <span className="text-[13px] font-medium text-[var(--text-primary)] truncate">
+            {agent.name}
+          </span>
+          <ColorDot color={agent.color} />
+        </div>
+        {agent.description && (
+          <p className="text-[12px] text-[var(--text-tertiary)] truncate mt-0.5">
+            {agent.description}
+          </p>
+        )}
+      </div>
+
+      {/* Tool count */}
+      {agent.tools.length > 0 && (
+        <span className="text-[11px] text-[var(--text-muted)] tabular-nums shrink-0">
+          {agent.tools.length} tools
+        </span>
+      )}
+
+      {/* Chevron */}
+      <ChevronRightIcon
+        size={14}
+        className="text-[var(--text-muted)] opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+      />
+    </Link>
+  );
+}

package/templates/app/src/components/agent-grid.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { AgentCard } from "@/components/agent-card";
+import { CreateAgentModal } from "@/components/create-agent-modal";
+import { setAgentCache } from "@/lib/agent-cache";
+import type { AgentMeta } from "@/lib/types";
+import { PlusIcon } from "@/components/icons";
+
+export function AgentGrid({ agents: initialAgents }: { agents: AgentMeta[] }) {
+  const router = useRouter();
+  const [agents, setAgents] = useState(initialAgents);
+  const [showCreate, setShowCreate] = useState(false);
+
+  // Seed client-side cache
+  useEffect(() => {
+    setAgentCache(agents);
+  }, [agents]);
+
+  // Prefetch agent routes
+  useEffect(() => {
+    for (const agent of agents) {
+      router.prefetch(`/agents/${agent.slug}`);
+      router.prefetch(`/agents/${agent.slug}/chat`);
+    }
+  }, [agents, router]);
+
+  const refreshAgents = () => {
+    fetch("/api/agents")
+      .then((r) => r.json())
+      .then((data: AgentMeta[]) => {
+        const specialists = data.filter((a) => a.slug !== "main");
+        setAgents(specialists);
+        setAgentCache(specialists);
+      });
+  };
+
+  // Listen for agent list changes
+  useEffect(() => {
+    const handler = () => refreshAgents();
+    window.addEventListener("agents-updated", handler);
+    return () => window.removeEventListener("agents-updated", handler);
+  }, []);
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-1">
+        <h2 className="text-[11px] font-medium uppercase tracking-wider text-[var(--text-tertiary)]">
+          Specialist Agents
+        </h2>
+        <button
+          onClick={() => setShowCreate(true)}
+          className="flex items-center gap-1.5 rounded-md px-2 py-1 text-[12px] text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] transition-colors"
+        >
+          <PlusIcon size={14} />
+          New agent
+        </button>
+      </div>
+
+      {/* Agent list — no cards, just rows with subtle separators */}
+      <div className="border border-[var(--border-subtle)] rounded-lg divide-y divide-[var(--border-subtle)]">
+        {agents.map((agent) => (
+          <AgentCard key={agent.slug} agent={agent} />
+        ))}
+
+        {agents.length === 0 && (
+          <div className="px-4 py-8 text-center">
+            <p className="text-[13px] text-[var(--text-tertiary)]">No agents yet</p>
+            <button
+              onClick={() => setShowCreate(true)}
+              className="mt-2 text-[13px] text-[var(--accent-text)] hover:text-[var(--accent-hover)] transition-colors"
+            >
+              Create your first agent
+            </button>
+          </div>
+        )}
+      </div>
+
+      <CreateAgentModal
+        open={showCreate}
+        onClose={() => setShowCreate(false)}
+        onCreated={() => {
+          refreshAgents();
+          window.dispatchEvent(new Event("agents-updated"));
+        }}
+      />
+    </div>
+  );
+}

package/templates/app/src/components/auth/auth-context.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState } from "react";
+import { createClient } from "@/lib/supabase-browser";
+import type { User } from "@supabase/supabase-js";
+
+export type Role = "admin" | "operator" | "viewer";
+
+interface AuthContextValue {
+  user: User | null;
+  role: Role | null;
+  loading: boolean;
+  signOut: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextValue>({
+  user: null,
+  role: null,
+  loading: true,
+  signOut: async () => {},
+});
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [role, setRole] = useState<Role | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const supabase = createClient();
+
+    // Get initial session
+    supabase.auth.getUser().then(({ data: { user } }) => {
+      setUser(user);
+      if (user) {
+        fetch("/api/auth/role")
+          .then((r) => r.json())
+          .then((data) => setRole(data.role))
+          .catch(() => {})
+          .finally(() => setLoading(false));
+      } else {
+        setLoading(false);
+      }
+    });
+
+    // Listen for auth changes
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      setUser(session?.user ?? null);
+      if (session?.user) {
+        fetch("/api/auth/role")
+          .then((r) => r.json())
+          .then((data) => setRole(data.role))
+          .catch(() => {});
+      } else {
+        setRole(null);
+      }
+      setLoading(false);
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  async function signOut() {
+    const supabase = createClient();
+    await supabase.auth.signOut();
+    window.location.href = "/login";
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, role, loading, signOut }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  return useContext(AuthContext);
+}

package/templates/app/src/components/chat-thread.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import type { AgentRun } from "@/lib/types";
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+export function ChatThread({ runs }: { runs: AgentRun[] }) {
+  if (runs.length === 0) return null;
+
+  return (
+    <div className="space-y-4">
+      {runs.map((run) => (
+        <div key={run.id} className="space-y-2">
+          {/* User prompt */}
+          <div className="flex justify-end">
+            <div className="max-w-[75%] rounded-lg bg-[var(--bg-elevated)] px-4 py-2.5">
+              <p className="text-[13px] text-[var(--text-primary)] whitespace-pre-wrap">{run.prompt}</p>
+            </div>
+          </div>
+
+          {/* Agent response */}
+          <div className="max-w-[90%]">
+            {run.status === "completed" && run.output ? (
+              <p className="text-[13px] text-[var(--text-secondary)] whitespace-pre-wrap break-words leading-relaxed">
+                {run.output}
+              </p>
+            ) : run.status === "failed" ? (
+              <p className="text-[13px] text-red-400">
+                Failed: {run.error || "Unknown error"}
+              </p>
+            ) : (
+              <p className="text-[13px] text-[var(--text-muted)] italic">
+                {run.status === "running" ? "Running..." : "Queued"}
+              </p>
+            )}
+            {run.status === "completed" && (
+              <div className="mt-1 flex gap-3 text-[10px] text-[var(--text-muted)] tabular-nums">
+                {run.cost_usd != null && <span>${run.cost_usd.toFixed(4)}</span>}
+                {run.duration_ms != null && <span>{formatDuration(run.duration_ms)}</span>}
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}