create-claude-code-visualizer 0.1.0

package/templates/app/src/components/overview/overview-content.tsx

@@ -0,0 +1,287 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useOverview } from "./overview-context";
+import { AgentGrid } from "@/components/agent-grid";
+import { RunHistoryTable } from "@/components/run-history-table";
+import { ScheduleForm } from "@/components/schedule-form";
+import { SkillsBrowser } from "@/components/skills-browser";
+import { CommandsBrowser } from "@/components/commands-browser";
+import { GovernanceDashboard } from "@/components/governance-dashboard";
+import SettingsPage from "@/app/settings/page";
+import type { AgentMeta, AgentRun, AgentSchedule } from "@/lib/types";
+import type { SkillInfo } from "@/lib/capabilities";
+
+type MountedTabs = { agents: boolean; skills: boolean; commands: boolean; runs: boolean; schedules: boolean; governance: boolean; settings: boolean };
+
+export function OverviewContent() {
+  const { activeTab } = useOverview();
+  const [mounted, setMounted] = useState<MountedTabs>({
+    agents: activeTab === "agents",
+    skills: activeTab === "skills",
+    commands: activeTab === "commands",
+    runs: activeTab === "runs",
+    schedules: activeTab === "schedules",
+    governance: activeTab === "governance",
+    settings: activeTab === "settings",
+  });
+
+  useEffect(() => {
+    setMounted((prev) => ({ ...prev, [activeTab]: true }));
+  }, [activeTab]);
+
+  return (
+    <div className="relative h-full">
+      <div className={activeTab === "agents" ? "" : "hidden"}>
+        {mounted.agents && <AgentsTab />}
+      </div>
+      <div className={activeTab === "skills" ? "" : "hidden"}>
+        {mounted.skills && <SkillsTab />}
+      </div>
+      <div className={activeTab === "commands" ? "" : "hidden"}>
+        {mounted.commands && <CommandsBrowser />}
+      </div>
+      <div className={activeTab === "runs" ? "" : "hidden"}>
+        {mounted.runs && <RunsTab />}
+      </div>
+      <div className={activeTab === "schedules" ? "" : "hidden"}>
+        {mounted.schedules && <SchedulesTab />}
+      </div>
+      <div className={activeTab === "governance" ? "" : "hidden"}>
+        {mounted.governance && <GovernanceDashboard />}
+      </div>
+      <div className={activeTab === "settings" ? "" : "hidden"}>
+        {mounted.settings && <SettingsPage />}
+      </div>
+    </div>
+  );
+}
+
+// --- Agents Tab ---
+
+function AgentsTab() {
+  const [agents, setAgents] = useState<AgentMeta[] | null>(null);
+
+  const loadAgents = useCallback(() => {
+    fetch("/api/agents")
+      .then((r) => r.json())
+      .then((data: AgentMeta[]) => {
+        setAgents(data.filter((a) => a.slug !== "main"));
+      });
+  }, []);
+
+  useEffect(() => {
+    loadAgents();
+  }, [loadAgents]);
+
+  useEffect(() => {
+    const handler = () => loadAgents();
+    window.addEventListener("agents-updated", handler);
+    return () => window.removeEventListener("agents-updated", handler);
+  }, [loadAgents]);
+
+  if (!agents) {
+    return (
+      <div>
+        <h2 className="text-[11px] font-medium uppercase tracking-wider text-[var(--text-tertiary)] mb-2">
+          Specialist Agents
+        </h2>
+        <div className="space-y-1 animate-pulse">
+          {[...Array(6)].map((_, i) => (
+            <div key={i} className="flex items-center gap-3 px-3 py-2.5 rounded-md">
+              <div className="h-4 w-4 rounded bg-[var(--bg-elevated)]" />
+              <div className="h-3.5 w-32 rounded bg-[var(--bg-elevated)]" />
+              <div className="h-3 flex-1 rounded bg-[var(--bg-raised)]" />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return <AgentGrid agents={agents} />;
+}
+
+// --- Runs Tab ---
+
+function RunsTab() {
+  const [runs, setRuns] = useState<AgentRun[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchRuns = useCallback(() => {
+    setLoading(true);
+    fetch("/api/runs?limit=100")
+      .then((r) => r.json())
+      .then((data) => {
+        setRuns(data);
+        setLoading(false);
+      });
+  }, []);
+
+  useEffect(() => {
+    fetchRuns();
+  }, [fetchRuns]);
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-[15px] font-semibold text-[var(--text-primary)]">Run History</h1>
+        <button
+          onClick={fetchRuns}
+          className="rounded-md px-2.5 py-1 text-[12px] text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] transition-colors"
+        >
+          Refresh
+        </button>
+      </div>
+      {loading ? (
+        <div className="space-y-1 animate-pulse">
+          {[...Array(6)].map((_, i) => (
+            <div key={i} className="flex items-center gap-3 px-3 py-2.5 rounded-md">
+              <div className="h-2 w-2 rounded-full bg-[var(--bg-elevated)]" />
+              <div className="h-3.5 w-28 rounded bg-[var(--bg-elevated)]" />
+              <div className="h-3 flex-1 rounded bg-[var(--bg-raised)]" />
+              <div className="h-3 w-16 rounded bg-[var(--bg-raised)]" />
+            </div>
+          ))}
+        </div>
+      ) : (
+        <RunHistoryTable runs={runs} />
+      )}
+    </div>
+  );
+}
+
+// --- Schedules Tab ---
+
+function SchedulesTab() {
+  const [schedules, setSchedules] = useState<AgentSchedule[]>([]);
+  const [agents, setAgents] = useState<AgentMeta[]>([]);
+  const [skills, setSkills] = useState<SkillInfo[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  const loadData = useCallback(() => {
+    Promise.all([
+      fetch("/api/schedules").then((r) => r.json()),
+      fetch("/api/agents").then((r) => r.json()),
+      fetch("/api/skills").then((r) => r.json()),
+    ]).then(([sched, ag, sk]) => {
+      setSchedules(sched);
+      setAgents(ag);
+      setSkills(sk);
+      setLoading(false);
+    });
+  }, []);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  const handleCreate = async (data: {
+    agent_slug: string;
+    agent_name: string;
+    prompt: string;
+    cron: string;
+    skill_slug?: string;
+  }) => {
+    setIsSubmitting(true);
+    await fetch("/api/schedules", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
+    setIsSubmitting(false);
+    loadData();
+  };
+
+  const handleToggle = async (id: string, enabled: boolean) => {
+    await fetch(`/api/schedules/${id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ enabled }),
+    });
+    loadData();
+  };
+
+  const handleDelete = async (id: string) => {
+    await fetch(`/api/schedules/${id}`, { method: "DELETE" });
+    loadData();
+  };
+
+  const getSkillName = (slug: string | null) => {
+    if (!slug) return null;
+    return skills.find((s) => s.slug === slug)?.name || slug;
+  };
+
+  if (loading) {
+    return (
+      <div className="max-w-3xl space-y-6">
+        <h1 className="text-[15px] font-semibold text-[var(--text-primary)]">Schedules</h1>
+        <div className="space-y-2 animate-pulse">
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="h-10 rounded-md bg-[var(--bg-raised)]" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-3xl space-y-6">
+      <h1 className="text-[15px] font-semibold text-[var(--text-primary)]">Schedules</h1>
+
+      <ScheduleForm agents={agents} skills={skills} onSubmit={handleCreate} isSubmitting={isSubmitting} />
+
+      <div className="border border-[var(--border-subtle)] rounded-lg divide-y divide-[var(--border-subtle)]">
+        {schedules.length === 0 ? (
+          <p className="text-[13px] text-[var(--text-tertiary)] py-8 text-center">No schedules yet</p>
+        ) : (
+          schedules.map((schedule) => (
+            <div
+              key={schedule.id}
+              className="flex items-center justify-between px-3 py-2.5"
+            >
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <span className="text-[13px] font-medium text-[var(--text-primary)]">{schedule.agent_name}</span>
+                  {schedule.skill_slug && (
+                    <span className="rounded-md bg-[var(--accent-muted)] px-1.5 py-0.5 text-[11px] text-[var(--accent-text)]">
+                      {getSkillName(schedule.skill_slug)}
+                    </span>
+                  )}
+                  <code className="rounded-md bg-[var(--bg-raised)] border border-[var(--border-subtle)] px-1.5 py-0.5 text-[11px] text-[var(--text-tertiary)]">
+                    {schedule.cron}
+                  </code>
+                  <span className={`h-1.5 w-1.5 rounded-full ${schedule.enabled ? "bg-green-400" : "bg-[var(--text-muted)]"}`} />
+                </div>
+                {schedule.prompt && (
+                  <p className="mt-0.5 text-[12px] text-[var(--text-tertiary)] truncate">{schedule.prompt}</p>
+                )}
+              </div>
+              <div className="flex items-center gap-1.5 ml-4 shrink-0">
+                <button
+                  onClick={() => handleToggle(schedule.id, !schedule.enabled)}
+                  className="rounded-md px-2.5 py-1 text-[11px] text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] transition-colors"
+                >
+                  {schedule.enabled ? "Pause" : "Resume"}
+                </button>
+                <button
+                  onClick={() => handleDelete(schedule.id)}
+                  className="rounded-md px-2.5 py-1 text-[11px] text-red-400/60 hover:text-red-400 hover:bg-red-500/10 transition-colors"
+                >
+                  Delete
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+// --- Skills Tab ---
+
+function SkillsTab() {
+  return <SkillsBrowser />;
+}

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

@@ -0,0 +1,88 @@
+"use client";
+
+import { createContext, useContext, useState, useCallback, useEffect } from "react";
+
+export type OverviewTab = "agents" | "skills" | "commands" | "runs" | "schedules" | "governance" | "settings";
+
+const OVERVIEW_PATHS = ["/agents", "/skills", "/commands", "/runs", "/schedules", "/governance", "/settings"];
+
+export function isOverviewPath(pathname: string): boolean {
+  return OVERVIEW_PATHS.some((p) => pathname === p);
+}
+
+function pathToTab(pathname: string): OverviewTab | null {
+  if (pathname === "/agents") return "agents";
+  if (pathname.startsWith("/skills")) return "skills";
+  if (pathname.startsWith("/commands")) return "commands";
+  if (pathname.startsWith("/runs")) return "runs";
+  if (pathname.startsWith("/schedules")) return "schedules";
+  if (pathname.startsWith("/governance")) return "governance";
+  if (pathname.startsWith("/settings")) return "settings";
+  return null;
+}
+
+interface OverviewContextValue {
+  activeTab: OverviewTab;
+  setTab: (tab: OverviewTab) => void;
+  isOverview: boolean;
+}
+
+const OverviewContext = createContext<OverviewContextValue>({
+  activeTab: "agents",
+  setTab: () => {},
+  isOverview: false,
+});
+
+export function useOverview() {
+  return useContext(OverviewContext);
+}
+
+const TAB_PATHS: Record<OverviewTab, string> = {
+  agents: "/agents",
+  skills: "/skills",
+  commands: "/commands",
+  runs: "/runs",
+  schedules: "/schedules",
+  governance: "/governance",
+  settings: "/settings",
+};
+
+export function OverviewProvider({ children, pathname }: { children: React.ReactNode; pathname: string }) {
+  const detectedTab = pathToTab(pathname);
+  const [isOverview, setIsOverview] = useState(detectedTab !== null);
+  const [activeTab, setActiveTab] = useState<OverviewTab>(detectedTab || "agents");
+
+  useEffect(() => {
+    const tab = pathToTab(pathname);
+    setIsOverview(tab !== null);
+    if (tab) {
+      setActiveTab(tab);
+    }
+  }, [pathname]);
+
+  useEffect(() => {
+    const handlePopState = () => {
+      const tab = pathToTab(window.location.pathname);
+      if (tab) {
+        setIsOverview(true);
+        setActiveTab(tab);
+      } else {
+        setIsOverview(false);
+      }
+    };
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, []);
+
+  const setTab = useCallback((tab: OverviewTab) => {
+    setActiveTab(tab);
+    setIsOverview(true);
+    window.history.pushState(null, "", TAB_PATHS[tab]);
+  }, []);
+
+  return (
+    <OverviewContext.Provider value={{ activeTab, setTab, isOverview }}>
+      {children}
+    </OverviewContext.Provider>
+  );
+}

package/templates/app/src/components/preferences-modal.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { XIcon } from "@/components/icons";
+
+interface PreferencesModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function PreferencesModal({ open, onClose }: PreferencesModalProps) {
+  const [preferences, setPreferences] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [dirty, setDirty] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setLoading(true);
+    fetch("/api/preferences")
+      .then((r) => r.json())
+      .then((data) => {
+        setPreferences(data.preferences || "");
+        setDirty(false);
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, [open]);
+
+  const save = useCallback(async () => {
+    setSaving(true);
+    try {
+      await fetch("/api/preferences", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ preferences }),
+      });
+      setDirty(false);
+    } catch {
+      // silent
+    } finally {
+      setSaving(false);
+    }
+  }, [preferences]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handle = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+        e.preventDefault();
+        save();
+      }
+    };
+    document.addEventListener("keydown", handle);
+    return () => document.removeEventListener("keydown", handle);
+  }, [open, save]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div className="relative w-full max-w-lg mx-4 rounded-lg border border-[var(--border-default)] bg-[#111113] shadow-2xl shadow-black/50">
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--border-subtle)]">
+          <div>
+            <h2 className="text-[13px] font-semibold text-[var(--text-primary)]">Personal Preferences</h2>
+            <p className="text-[11px] text-[var(--text-muted)] mt-0.5">
+              Sent to the AI with every message as context about you.
+            </p>
+          </div>
+          <button onClick={onClose} className="p-1 rounded-md text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] transition-colors">
+            <XIcon size={14} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="px-5 py-4">
+          {loading ? (
+            <div className="h-48 rounded-md bg-[var(--bg-raised)] animate-pulse" />
+          ) : (
+            <>
+              <textarea
+                value={preferences}
+                onChange={(e) => { setPreferences(e.target.value); setDirty(true); }}
+                placeholder={"Tell the AI about yourself — your role, communication style, technical level, preferred tools, formatting preferences.\n\nExamples:\n• I'm a senior engineer, skip basic explanations\n• Always respond concisely — no fluff\n• I prefer TypeScript over JavaScript"}
+                className="w-full h-48 rounded-md border border-[var(--border-default)] bg-[var(--bg-raised)] px-3 py-2.5 text-[13px] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:outline-none focus:border-[var(--border-focus)] resize-none"
+              />
+              <p className="text-[11px] text-[var(--text-muted)] mt-2">
+                {preferences.length} characters{dirty ? " · unsaved" : ""} · Ctrl+S to save
+              </p>
+            </>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-[var(--border-subtle)]">
+          <button onClick={onClose} className="px-3 py-1.5 text-[12px] font-medium text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] rounded-md hover:bg-[var(--bg-hover)] transition-colors">
+            Cancel
+          </button>
+          <button
+            onClick={async () => { await save(); onClose(); }}
+            disabled={saving || !dirty}
+            className="px-3 py-1.5 text-[12px] font-medium rounded-md bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)] disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+          >
+            {saving ? "Saving…" : "Save"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/app/src/components/run-form.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState } from "react";
+import type { AgentMeta } from "@/lib/types";
+
+interface RunFormProps {
+  agent: AgentMeta;
+  onRun: (prompt: string) => void;
+  isRunning: boolean;
+  isFollowUp?: boolean;
+}
+
+export function RunForm({ agent, onRun, isRunning, isFollowUp }: RunFormProps) {
+  const [prompt, setPrompt] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!prompt.trim() || isRunning) return;
+    onRun(prompt.trim());
+    setPrompt("");
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (isFollowUp && e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  if (isFollowUp) {
+    return (
+      <form onSubmit={handleSubmit} className="flex gap-2 items-end">
+        <textarea
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Follow up..."
+          rows={1}
+          className="flex-1 resize-none rounded-md border border-[var(--border-default)] bg-[var(--bg-raised)] px-4 py-2.5 text-[13px] text-[var(--text-primary)] placeholder-[var(--text-muted)] focus:border-[var(--border-focus)] focus:outline-none"
+        />
+        <button
+          type="submit"
+          disabled={!prompt.trim() || isRunning}
+          className="rounded-md bg-[var(--accent)] px-4 py-2.5 text-[13px] font-medium text-white transition-colors hover:bg-[var(--accent-hover)] disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
+        >
+          {isRunning ? "..." : "Send"}
+        </button>
+      </form>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-3">
+      <label className="block text-[12px] font-medium text-[var(--text-secondary)]">
+        Prompt for {agent.name}
+      </label>
+      <textarea
+        value={prompt}
+        onChange={(e) => setPrompt(e.target.value)}
+        placeholder="Enter a prompt for this agent..."
+        rows={3}
+        className="w-full rounded-md border border-[var(--border-default)] bg-[var(--bg-raised)] px-4 py-3 text-[13px] text-[var(--text-primary)] placeholder-[var(--text-muted)] focus:border-[var(--border-focus)] focus:outline-none"
+      />
+      <button
+        type="submit"
+        disabled={!prompt.trim() || isRunning}
+        className="rounded-md bg-[var(--accent)] px-4 py-2 text-[12px] font-medium text-white transition-colors hover:bg-[var(--accent-hover)] disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        {isRunning ? "Running..." : "Run Agent"}
+      </button>
+    </form>
+  );
+}