create-claude-code-visualizer 0.1.0

package/templates/app/src/components/run-history-table.tsx

@@ -0,0 +1,226 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import type { AgentRun } from "@/lib/types";
+import { ChevronRightIcon, DollarIcon, ClockIcon, MessageIcon, AlertIcon, UserIcon, ScheduleIcon } from "@/components/icons";
+
+const statusConfig: Record<
+  string,
+  { dot: string; label: string }
+> = {
+  queued: { dot: "bg-yellow-400", label: "Queued" },
+  running: { dot: "bg-[var(--accent)] animate-pulse", label: "Running" },
+  completed: { dot: "bg-emerald-400", label: "Completed" },
+  failed: { dot: "bg-red-400", label: "Failed" },
+  stopped: { dot: "bg-[var(--text-muted)]", label: "Stopped" },
+};
+
+type StatusFilter = "all" | "running" | "completed" | "failed" | "queued" | "stopped";
+type SourceFilter = "all" | "manual" | "scheduled";
+
+function timeAgo(date: string): string {
+  const seconds = Math.floor((Date.now() - new Date(date).getTime()) / 1000);
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  const s = ms / 1000;
+  if (s < 60) return `${s.toFixed(1)}s`;
+  const m = Math.floor(s / 60);
+  const remaining = Math.floor(s % 60);
+  return `${m}m ${remaining}s`;
+}
+
+function runHref(run: AgentRun): string {
+  const base = `/agents/${run.agent_slug}/chat`;
+  return run.session_id ? `${base}?session=${run.session_id}` : base;
+}
+
+function RunRow({ run }: { run: AgentRun }) {
+  const status = statusConfig[run.status] || statusConfig.stopped;
+
+  return (
+    <Link
+      href={runHref(run)}
+      className="group flex items-center gap-3 px-3 py-2.5 transition-colors hover:bg-[var(--bg-hover)]"
+    >
+      {/* Status dot */}
+      <span className={`h-2 w-2 rounded-full shrink-0 ${status.dot}`} />
+
+      {/* Agent name */}
+      <span className="text-[13px] font-medium text-[var(--text-primary)] w-32 shrink-0 truncate">
+        {run.agent_name}
+      </span>
+
+      {/* Prompt */}
+      <span className="text-[12px] text-[var(--text-tertiary)] truncate flex-1 min-w-0">
+        {run.prompt || "—"}
+      </span>
+
+      {/* Meta: cost, duration, events */}
+      <div className="flex items-center gap-3 shrink-0 text-[11px] text-[var(--text-muted)] tabular-nums">
+        {run.cost_usd != null && (
+          <span className="flex items-center gap-1">
+            <DollarIcon size={12} className="opacity-50" />
+            ${run.cost_usd.toFixed(4)}
+          </span>
+        )}
+        {run.duration_ms != null && (
+          <span className="flex items-center gap-1">
+            <ClockIcon size={12} className="opacity-50" />
+            {formatDuration(run.duration_ms)}
+          </span>
+        )}
+        {run.event_count > 0 && (
+          <span className="flex items-center gap-1">
+            <MessageIcon size={12} className="opacity-50" />
+            {run.event_count}
+          </span>
+        )}
+        {run.error && (
+          <AlertIcon size={12} className="text-red-400/60" />
+        )}
+      </div>
+
+      {/* Time */}
+      <span className="text-[11px] text-[var(--text-muted)] w-16 text-right shrink-0 tabular-nums">
+        {timeAgo(run.created_at)}
+      </span>
+
+      {/* Chevron */}
+      <ChevronRightIcon
+        size={14}
+        className="text-[var(--text-muted)] opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+      />
+    </Link>
+  );
+}
+
+export function RunHistoryTable({ runs }: { runs: AgentRun[] }) {
+  const [filter, setFilter] = useState<StatusFilter>("all");
+  const [source, setSource] = useState<SourceFilter>("all");
+
+  const manualCount = runs.filter((r) => !r.schedule_id).length;
+  const scheduledCount = runs.filter((r) => !!r.schedule_id).length;
+
+  const sourceFiltered =
+    source === "all" ? runs : source === "manual" ? runs.filter((r) => !r.schedule_id) : runs.filter((r) => !!r.schedule_id);
+
+  const counts = sourceFiltered.reduce(
+    (acc, r) => {
+      acc[r.status] = (acc[r.status] || 0) + 1;
+      return acc;
+    },
+    {} as Record<string, number>,
+  );
+
+  const filtered = filter === "all" ? sourceFiltered : sourceFiltered.filter((r) => r.status === filter);
+
+  const activeFilters = (["all", "running", "completed", "failed", "queued", "stopped"] as const).filter(
+    (f) => f === "all" || counts[f],
+  );
+
+  if (runs.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-16 text-center">
+        <p className="text-[13px] text-[var(--text-tertiary)]">No runs yet</p>
+        <p className="mt-1 text-[12px] text-[var(--text-muted)]">
+          Run an agent to see its history here
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {/* Source toggle + Status filter pills */}
+      <div className="flex items-center gap-4">
+        {/* Source toggle */}
+        <div className="flex items-center rounded-lg border border-[var(--border-subtle)] p-0.5">
+          {(
+            [
+              { key: "all", label: "All", icon: null, count: runs.length },
+              { key: "manual", label: "Manual", icon: UserIcon, count: manualCount },
+              { key: "scheduled", label: "Scheduled", icon: ScheduleIcon, count: scheduledCount },
+            ] as const
+          ).map(({ key, label, icon: IconCmp, count }) => {
+            const isActive = source === key;
+            return (
+              <button
+                key={key}
+                onClick={() => { setSource(key); setFilter("all"); }}
+                className={`inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-[11px] font-medium transition-colors ${
+                  isActive
+                    ? "bg-[var(--bg-active)] text-[var(--text-primary)]"
+                    : "text-[var(--text-tertiary)] hover:text-[var(--text-secondary)]"
+                }`}
+              >
+                {IconCmp && <IconCmp size={12} className="opacity-60" />}
+                {label}
+                <span className="opacity-50 tabular-nums">{count}</span>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Status filter pills */}
+        {activeFilters.length > 2 && (
+          <div className="flex items-center gap-1 border-l border-[var(--border-subtle)] pl-4">
+          {activeFilters.map((f) => {
+            const isActive = filter === f;
+            const count = f === "all" ? sourceFiltered.length : counts[f] || 0;
+            const config = f !== "all" ? statusConfig[f] : null;
+
+            return (
+              <button
+                key={f}
+                onClick={() => setFilter(f)}
+                className={`inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-[11px] font-medium transition-colors ${
+                  isActive
+                    ? "bg-[var(--bg-active)] text-[var(--text-primary)]"
+                    : "text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"
+                }`}
+              >
+                {config && <span className={`h-1.5 w-1.5 rounded-full ${config.dot}`} />}
+                {f === "all" ? "All" : config?.label || f}
+                <span className="opacity-50 tabular-nums">{count}</span>
+              </button>
+            );
+          })}
+          </div>
+        )}
+      </div>
+
+      {/* Table header */}
+      <div className="flex items-center gap-3 px-3 py-1.5 text-[10px] font-medium uppercase tracking-wider text-[var(--text-muted)]">
+        <span className="w-2 shrink-0" />
+        <span className="w-32 shrink-0">Agent</span>
+        <span className="flex-1">Prompt</span>
+        <span className="w-[200px] shrink-0 text-right">Details</span>
+        <span className="w-16 text-right shrink-0">When</span>
+        <span className="w-[14px] shrink-0" />
+      </div>
+
+      {/* Run rows */}
+      <div className="border border-[var(--border-subtle)] rounded-lg divide-y divide-[var(--border-subtle)]">
+        {filtered.map((run) => (
+          <RunRow key={run.id} run={run} />
+        ))}
+      </div>
+
+      {filtered.length === 0 && (filter !== "all" || source !== "all") && (
+        <p className="text-[12px] text-[var(--text-muted)] text-center py-8">
+          No {filter !== "all" ? (statusConfig[filter]?.label.toLowerCase() + " ") : ""}{source !== "all" ? source + " " : ""}runs
+        </p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,187 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { SSEMessage } from "@/hooks/use-sse";
+
+interface ApprovalRequest {
+  tool_name: string;
+  tool_input: Record<string, unknown>;
+  tool_use_id: string;
+}
+
+interface RunOutputProps {
+  messages: SSEMessage[];
+  isConnected: boolean;
+  onStop?: () => void;
+  onApprove?: (toolUseId: string, approved: boolean) => void;
+}
+
+function formatToolName(name: string): string {
+  if (!name.startsWith("mcp__")) return name;
+  const parts = name.replace(/^mcp__/, "").split("__");
+  const service = parts[0] || "";
+  const action = (parts[1] || "").replace(/^[^_]+_/, "").replace(/_/g, " ");
+  return `${service}: ${action}`;
+}
+
+export function RunOutput({ messages, isConnected, onStop, onApprove }: RunOutputProps) {
+  const outputRef = useRef<HTMLDivElement>(null);
+  const debugRef = useRef<HTMLPreElement>(null);
+  const [showDebug, setShowDebug] = useState(false);
+  const [handledApprovals, setHandledApprovals] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    if (outputRef.current) outputRef.current.scrollTop = outputRef.current.scrollHeight;
+    if (debugRef.current) debugRef.current.scrollTop = debugRef.current.scrollHeight;
+  }, [messages]);
+
+  const tokens = messages.filter((m) => m.type === "token").map((m) => m.text as string).join("");
+
+  const activities: Array<{ type: string; label: string; key: number }> = [];
+  let activityKey = 0;
+  for (const m of messages) {
+    if (m.type === "thinking" && m.active) activities.push({ type: "thinking", label: "Thinking...", key: activityKey++ });
+    else if (m.type === "tool_call" && m.status === "start") activities.push({ type: "tool", label: m.name as string, key: activityKey++ });
+    else if (m.type === "progress") activities.push({ type: "progress", label: m.info as string, key: activityKey++ });
+  }
+
+  const debugMessages = messages.filter((m) => m.type === "debug");
+  const doneMsg = messages.find((m) => m.type === "done");
+  const stoppedMsg = messages.find((m) => m.type === "stopped");
+  const errorMsg = messages.find((m) => m.type === "error" && !doneMsg);
+  const statusMsg = messages.findLast((m) => m.type === "status");
+
+  const pendingApprovals = messages
+    .filter((m) => m.type === "approval_required" && !handledApprovals.has(m.tool_use_id as string))
+    .map((m) => ({ tool_name: m.tool_name as string, tool_input: m.tool_input as Record<string, unknown>, tool_use_id: m.tool_use_id as string })) as ApprovalRequest[];
+
+  const handleApproval = (toolUseId: string, approved: boolean) => {
+    setHandledApprovals((prev) => new Set(prev).add(toolUseId));
+    onApprove?.(toolUseId, approved);
+  };
+
+  const thinkingMsgs = messages.filter((m) => m.type === "thinking");
+  const isThinking = thinkingMsgs.length > 0 && (thinkingMsgs[thinkingMsgs.length - 1].active as boolean);
+  const toolMsgs = messages.filter((m) => m.type === "tool_call");
+  const lastTool = toolMsgs.length > 0 ? toolMsgs[toolMsgs.length - 1] : null;
+  const activeTool = lastTool?.status === "start" ? (lastTool.name as string) : null;
+
+  if (messages.length === 0 && !isConnected) return null;
+  const finishedMsg = doneMsg || stoppedMsg;
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <h3 className="text-[13px] font-medium text-[var(--text-secondary)]">Output</h3>
+        {isConnected && (
+          <span className="flex items-center gap-1 text-[11px] text-green-400/70">
+            <span className="h-1.5 w-1.5 rounded-full bg-green-400/70 animate-pulse" />
+            Live
+          </span>
+        )}
+        {finishedMsg && (
+          <span className="text-[11px] text-[var(--text-muted)] tabular-nums">
+            ${(finishedMsg.cost_usd as number)?.toFixed(4) || "?"} · {((finishedMsg.duration_ms as number) / 1000)?.toFixed(1) || "?"}s
+          </span>
+        )}
+        {isConnected && onStop && (
+          <button onClick={onStop}
+            className="ml-auto rounded-md border border-red-500/20 bg-red-500/10 px-3 py-1 text-[11px] font-medium text-red-400 transition-colors hover:bg-red-500/15">
+            Stop
+          </button>
+        )}
+        {debugMessages.length > 0 && (
+          <button onClick={() => setShowDebug(!showDebug)}
+            className={`${isConnected && onStop ? "" : "ml-auto "}rounded-md bg-[var(--bg-elevated)] px-2 py-0.5 text-[11px] text-[var(--text-tertiary)] hover:bg-[var(--bg-hover)]`}>
+            {showDebug ? "Hide" : "Show"} Debug ({debugMessages.length})
+          </button>
+        )}
+      </div>
+
+      {/* Approval prompts */}
+      {pendingApprovals.map((req) => (
+        <div key={req.tool_use_id} className="rounded-md border border-amber-500/15 bg-amber-500/5 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <span className="h-2 w-2 rounded-full bg-amber-400 animate-pulse" />
+            <span className="text-[12px] font-medium text-amber-300">Approval Required</span>
+          </div>
+          <p className="text-[13px] text-[var(--text-secondary)]">
+            Run: <span className="font-mono text-amber-200">{formatToolName(req.tool_name)}</span>
+          </p>
+          {Object.keys(req.tool_input).length > 0 && (
+            <pre className="max-h-40 overflow-auto rounded-md border border-[var(--border-subtle)] bg-[var(--bg-base)] p-2 text-[11px] text-[var(--text-muted)] font-mono">
+              {JSON.stringify(req.tool_input, null, 2)}
+            </pre>
+          )}
+          <div className="flex gap-2">
+            <button onClick={() => handleApproval(req.tool_use_id, true)}
+              className="rounded-md bg-green-600/80 px-3 py-1 text-[12px] font-medium text-white transition-colors hover:bg-green-600">
+              Allow
+            </button>
+            <button onClick={() => handleApproval(req.tool_use_id, false)}
+              className="rounded-md border border-[var(--border-default)] px-3 py-1 text-[12px] font-medium text-[var(--text-tertiary)] transition-colors hover:bg-[var(--bg-hover)]">
+              Deny
+            </button>
+          </div>
+        </div>
+      ))}
+
+      {/* Activity bar */}
+      {isConnected && (isThinking || activeTool) && (
+        <div className="flex items-center gap-2 rounded-md border border-[var(--border-subtle)] bg-[var(--bg-raised)] px-3 py-1.5 text-[11px] text-[var(--text-tertiary)]">
+          <span className="h-1.5 w-1.5 rounded-full bg-amber-400 animate-pulse" />
+          {isThinking && !activeTool && "Thinking..."}
+          {activeTool && <>Using: <span className="font-mono text-amber-300/80">{activeTool}</span></>}
+        </div>
+      )}
+
+      {/* Activity feed */}
+      {activities.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {activities.map((a) => (
+            <span key={a.key}
+              className={`inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-[10px] font-medium border ${
+                a.type === "thinking" ? "bg-[var(--accent-muted)] text-[var(--accent-text)] border-[var(--accent-muted)]"
+                  : a.type === "tool" ? "bg-amber-500/10 text-amber-400/80 border-amber-500/15"
+                  : "bg-[var(--bg-elevated)] text-[var(--text-tertiary)] border-[var(--border-subtle)]"
+              }`}>
+              {a.label}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* Main output */}
+      <div ref={outputRef}
+        className="max-h-[500px] overflow-auto rounded-md border border-[var(--border-subtle)] bg-[var(--bg-base)] p-4 text-[13px] text-[var(--text-secondary)] whitespace-pre-wrap break-words">
+        {tokens || (statusMsg?.status as string) || "Waiting..."}
+      </div>
+
+      {errorMsg && (
+        <div className="rounded-md border border-red-500/15 bg-red-500/5 p-3 text-[13px] text-red-400">
+          Error: {errorMsg.error as string}
+        </div>
+      )}
+      {stoppedMsg && (
+        <div className="rounded-md border border-amber-500/15 bg-amber-500/5 p-3 text-[13px] text-amber-400/80">
+          Stopped by user
+        </div>
+      )}
+      {doneMsg && !errorMsg && (
+        <div className="rounded-md border border-green-500/15 bg-green-500/5 p-3 text-[13px] text-green-400/80">
+          Completed successfully
+        </div>
+      )}
+
+      {showDebug && debugMessages.length > 0 && (
+        <div>
+          <h4 className="text-[11px] font-medium text-[var(--text-muted)] mb-1">Debug Log</h4>
+          <pre ref={debugRef}
+            className="max-h-[300px] overflow-auto rounded-md border border-[var(--border-subtle)] bg-[var(--bg-raised)] p-3 text-[11px] text-[var(--text-muted)] whitespace-pre-wrap break-words font-mono">
+            {debugMessages.map((m) => m.message as string).join("\n")}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,148 @@
+"use client";
+
+import { useState } from "react";
+import type { AgentMeta } from "@/lib/types";
+import type { SkillInfo } from "@/lib/capabilities";
+
+interface ScheduleFormProps {
+  agents: AgentMeta[];
+  skills: SkillInfo[];
+  onSubmit: (data: {
+    agent_slug: string;
+    agent_name: string;
+    prompt: string;
+    cron: string;
+    skill_slug?: string;
+  }) => void;
+  isSubmitting: boolean;
+}
+
+const presets = [
+  { label: "Every minute (test)", cron: "* * * * *" },
+  { label: "Every hour", cron: "0 * * * *" },
+  { label: "Daily 9 AM", cron: "0 9 * * *" },
+  { label: "Daily 3 PM", cron: "0 15 * * *" },
+  { label: "Mon-Fri 9 AM", cron: "0 9 * * 1-5" },
+  { label: "Weekly Monday 9 AM", cron: "0 9 * * 1" },
+];
+
+export function ScheduleForm({ agents, skills, onSubmit, isSubmitting }: ScheduleFormProps) {
+  const [agentSlug, setAgentSlug] = useState("");
+  const [skillSlug, setSkillSlug] = useState("");
+  const [prompt, setPrompt] = useState("");
+  const [cron, setCron] = useState("0 9 * * *");
+
+  const selectedAgent = agents.find((a) => a.slug === agentSlug);
+  const selectedSkill = skills.find((s) => s.slug === skillSlug);
+
+  const skillsByCategory = skills.reduce<Record<string, SkillInfo[]>>((acc, skill) => {
+    (acc[skill.category] ??= []).push(skill);
+    return acc;
+  }, {});
+
+  const canSubmit = agentSlug && cron.trim() && (prompt.trim() || skillSlug);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!canSubmit) return;
+    onSubmit({
+      agent_slug: agentSlug,
+      agent_name: selectedAgent?.name || agentSlug,
+      prompt: prompt.trim(),
+      cron: cron.trim(),
+      ...(skillSlug ? { skill_slug: skillSlug } : {}),
+    });
+    setPrompt("");
+    setSkillSlug("");
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4 rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-raised)] p-5">
+      <h3 className="text-[13px] font-medium text-[var(--text-primary)]">New Schedule</h3>
+
+      <div>
+        <label className="block text-[11px] text-[var(--text-tertiary)] mb-1">Agent</label>
+        <select
+          value={agentSlug}
+          onChange={(e) => setAgentSlug(e.target.value)}
+          className="w-full rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-2 text-[13px] text-[var(--text-primary)] focus:border-[var(--border-focus)] focus:outline-none"
+        >
+          <option value="">Select an agent...</option>
+          {agents.map((a) => (
+            <option key={a.slug} value={a.slug}>{a.emoji} {a.name}</option>
+          ))}
+        </select>
+      </div>
+
+      <div>
+        <label className="block text-[11px] text-[var(--text-tertiary)] mb-1">Skill (optional)</label>
+        <select
+          value={skillSlug}
+          onChange={(e) => setSkillSlug(e.target.value)}
+          className="w-full rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-2 text-[13px] text-[var(--text-primary)] focus:border-[var(--border-focus)] focus:outline-none"
+        >
+          <option value="">No skill — use prompt only</option>
+          {Object.entries(skillsByCategory).map(([category, categorySkills]) => (
+            <optgroup key={category} label={category}>
+              {categorySkills.map((s) => (
+                <option key={s.slug} value={s.slug}>{s.name}</option>
+              ))}
+            </optgroup>
+          ))}
+        </select>
+        {selectedSkill && (
+          <p className="mt-1.5 rounded-md bg-[var(--bg-elevated)] px-3 py-1.5 text-[11px] text-[var(--text-tertiary)]">
+            {selectedSkill.description}
+          </p>
+        )}
+      </div>
+
+      <div>
+        <label className="block text-[11px] text-[var(--text-tertiary)] mb-1">
+          {skillSlug ? "Additional Instructions (optional)" : "Prompt"}
+        </label>
+        <textarea
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          placeholder={skillSlug ? "Any extra instructions..." : "Enter the prompt for scheduled runs..."}
+          rows={2}
+          className="w-full rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-2 text-[13px] text-[var(--text-primary)] placeholder-[var(--text-muted)] focus:border-[var(--border-focus)] focus:outline-none"
+        />
+      </div>
+
+      <div>
+        <label className="block text-[11px] text-[var(--text-tertiary)] mb-1">Cron Expression</label>
+        <input
+          value={cron}
+          onChange={(e) => setCron(e.target.value)}
+          placeholder="0 9 * * *"
+          className="w-full rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-2 text-[13px] text-[var(--text-primary)] font-mono placeholder-[var(--text-muted)] focus:border-[var(--border-focus)] focus:outline-none"
+        />
+        <div className="mt-2 flex flex-wrap gap-1">
+          {presets.map((p) => (
+            <button
+              key={p.cron}
+              type="button"
+              onClick={() => setCron(p.cron)}
+              className={`rounded-md px-2 py-0.5 text-[11px] transition-colors ${
+                cron === p.cron
+                  ? "bg-[var(--accent)] text-white"
+                  : "bg-[var(--bg-elevated)] text-[var(--text-tertiary)] hover:bg-[var(--bg-hover)]"
+              }`}
+            >
+              {p.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <button
+        type="submit"
+        disabled={!canSubmit || isSubmitting}
+        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"
+      >
+        {isSubmitting ? "Creating..." : "Create Schedule"}
+      </button>
+    </form>
+  );
+}