npm - create-claude-code-visualizer - Versions diffs - 0.1.0 - Mend

create-claude-code-visualizer 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (220) hide show

package/templates/app/src/app/globals.css ADDED Viewed

@@ -0,0 +1,115 @@
+@import "tailwindcss";
+/* --- Linear-style design tokens --- */
+:root {
+  /* Surfaces */
+  --bg-base: #09090b;
+  --bg-raised: rgba(255, 255, 255, 0.02);
+  --bg-elevated: rgba(255, 255, 255, 0.04);
+  --bg-hover: rgba(255, 255, 255, 0.06);
+  --bg-active: rgba(255, 255, 255, 0.08);
+  /* Borders */
+  --border-subtle: rgba(255, 255, 255, 0.06);
+  --border-default: rgba(255, 255, 255, 0.08);
+  --border-strong: rgba(255, 255, 255, 0.12);
+  --border-focus: rgba(255, 255, 255, 0.2);
+  /* Text */
+  --text-primary: rgba(255, 255, 255, 0.95);
+  --text-secondary: rgba(255, 255, 255, 0.6);
+  --text-tertiary: rgba(255, 255, 255, 0.4);
+  --text-muted: rgba(255, 255, 255, 0.25);
+  /* Accent — desaturated blue, Linear-style */
+  --accent: #5e6ad2;
+  --accent-hover: #6e79d6;
+  --accent-muted: rgba(94, 106, 210, 0.15);
+  --accent-text: #8b94e4;
+  /* Status — desaturated */
+  --status-success: #4ade80;
+  --status-warning: #f59e0b;
+  --status-error: #ef4444;
+  --status-info: #60a5fa;
+  /* Font stacks */
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+}
+html {
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/* Code/data elements */
+code, pre, .font-mono {
+  font-family: var(--font-mono);
+}
+/* --- Focus indicators (keyboard only) --- */
+@layer base {
+  :focus-visible {
+    outline: 1.5px solid var(--accent);
+    outline-offset: 1px;
+    border-radius: 4px;
+  }
+  /* Remove focus outline on mouse click */
+  :focus:not(:focus-visible) {
+    outline: none;
+  }
+}
+/* --- Reduced motion --- */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+/* --- Consistent transitions --- */
+button, a, [role="button"] {
+  transition-property: color, background-color, border-color, opacity;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo */
+}
+/* Auto-hide scrollbars — visible only while scrolling/hovering */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+*:hover,
+*:active {
+  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
+}
+/* Webkit (Chrome, Edge, Safari) */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 3px;
+}
+*:hover::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.08);
+}
+*:hover::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.15);
+}

package/templates/app/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import type { Metadata } from "next";
+import { AppShell } from "@/components/layout/app-shell";
+import "./globals.css";
+export const metadata: Metadata = {
+  title: "Agent Dashboard",
+  description: "Personal AI Agent Dashboard",
+};
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className="dark">
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
+        <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+      </head>
+      <body className="bg-[var(--bg-base)] text-[var(--text-primary)] antialiased">
+        <AppShell>{children}</AppShell>
+      </body>
+    </html>
+  );
+}

package/templates/app/src/app/loading.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+export default function HomeLoading() {
+  return (
+    <div className="animate-pulse">
+      <div className="h-3 w-32 rounded bg-[var(--bg-elevated)] mb-3" />
+      <div className="space-y-1">
+        {[...Array(5)].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>
+  );
+}

package/templates/app/src/app/login/page.tsx ADDED Viewed

@@ -0,0 +1,64 @@
+"use client";
+import { useState } from "react";
+import { createClient } from "@/lib/supabase-browser";
+export default function LoginPage() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  async function signInWithGoogle() {
+    setLoading(true);
+    setError(null);
+    const supabase = createClient();
+    const { error } = await supabase.auth.signInWithOAuth({
+      provider: "google",
+      options: {
+        redirectTo: `${window.location.origin}/auth/callback`,
+      },
+    });
+    if (error) {
+      setError(error.message);
+      setLoading(false);
+    }
+  }
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-[var(--bg-base)]">
+      <div className="w-full max-w-sm space-y-6 rounded-lg border border-[var(--border-default)] bg-[#111113] p-8">
+        <div className="text-center space-y-2">
+          <div className="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-[var(--bg-elevated)] border border-[var(--border-subtle)]">
+            <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-[var(--accent-text)]">
+              <path d="M8 2C5.8 2 4 3.8 4 6c0 1.2.5 2.2 1.3 3L6 10.5v1a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-1L10.7 9A4 4 0 0012 6c0-2.2-1.8-4-4-4z" />
+              <path d="M6.5 13h3M7 14h2" />
+            </svg>
+          </div>
+          <h1 className="text-[15px] font-semibold text-[var(--text-primary)]">PAI Dashboard</h1>
+          <p className="text-[13px] text-[var(--text-tertiary)]">Sign in to your personal assistant</p>
+        </div>
+        {error && (
+          <div className="rounded-md bg-red-500/10 border border-red-500/15 px-4 py-3 text-[13px] text-red-400">
+            {error}
+          </div>
+        )}
+        <button
+          onClick={signInWithGoogle}
+          disabled={loading}
+          className="flex w-full items-center justify-center gap-3 rounded-md bg-white px-4 py-2.5 text-[13px] font-medium text-zinc-900 transition-colors hover:bg-zinc-200 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+            <path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844a4.14 4.14 0 01-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" fill="#4285F4"/>
+            <path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.26c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 009 18z" fill="#34A853"/>
+            <path d="M3.964 10.71A5.41 5.41 0 013.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.997 8.997 0 000 9c0 1.452.348 2.827.957 4.042l3.007-2.332z" fill="#FBBC05"/>
+            <path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 00.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z" fill="#EA4335"/>
+          </svg>
+          {loading ? "Signing in..." : "Continue with Google"}
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/app/src/app/not-authorized/page.tsx ADDED Viewed

@@ -0,0 +1,33 @@
+"use client";
+import { createClient } from "@/lib/supabase-browser";
+import { ShieldIcon } from "@/components/icons";
+export default function NotAuthorizedPage() {
+  async function handleSignOut() {
+    const supabase = createClient();
+    await supabase.auth.signOut();
+    window.location.href = "/login";
+  }
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-[var(--bg-base)]">
+      <div className="w-full max-w-sm space-y-6 rounded-lg border border-[var(--border-default)] bg-[#111113] p-8 text-center">
+        <div className="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-red-500/10 border border-red-500/15">
+          <ShieldIcon size={20} className="text-red-400" />
+        </div>
+        <h1 className="text-[15px] font-semibold text-[var(--text-primary)]">Access Denied</h1>
+        <p className="text-[13px] text-[var(--text-tertiary)]">
+          Your account hasn&apos;t been granted access to this app. Contact an
+          administrator to request access.
+        </p>
+        <button
+          onClick={handleSignOut}
+          className="w-full rounded-md border border-[var(--border-default)] bg-[var(--bg-elevated)] px-4 py-2 text-[13px] font-medium text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]"
+        >
+          Sign out
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/app/src/app/runs/page.tsx ADDED Viewed

@@ -0,0 +1,55 @@
+"use client";
+import { useEffect, useState } from "react";
+import { RunHistoryTable } from "@/components/run-history-table";
+import type { AgentRun } from "@/lib/types";
+export default function RunsPage() {
+  const [runs, setRuns] = useState<AgentRun[]>([]);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    fetch("/api/runs?limit=100")
+      .then((r) => r.json())
+      .then((data) => {
+        setRuns(data);
+        setLoading(false);
+      });
+  }, []);
+  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={() => {
+            setLoading(true);
+            fetch("/api/runs?limit=100")
+              .then((r) => r.json())
+              .then((data) => {
+                setRuns(data);
+                setLoading(false);
+              });
+          }}
+          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>
+  );
+}

package/templates/app/src/app/schedules/page.tsx ADDED Viewed

@@ -0,0 +1,110 @@
+"use client";
+import { useEffect, useState } from "react";
+import { ScheduleForm } from "@/components/schedule-form";
+import type { AgentMeta, AgentSchedule } from "@/lib/types";
+import type { SkillInfo } from "@/lib/capabilities";
+export default function SchedulesPage() {
+  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 = () => {
+    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(); }, []);
+  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-elevated)] 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>
+  );
+}