availsync 0.1.0

package/frontend/app/app/agents/page.tsx

@@ -0,0 +1,1155 @@
+'use client';
+
+import { useEffect, useState, useCallback, useRef } from 'react';
+import {
+  listAgents,
+  createAgent,
+  updateAgent,
+  deleteAgent,
+  getValueHealth,
+  rotateAgentKey,
+  runAgentSetupTest,
+  testAgentConnection,
+  type SetupTestRun,
+  type ValueHealth,
+} from '@/lib/api';
+import { loadSession, type StoredSession } from '@/lib/storage';
+import { Badge } from '@/components/ui/Badge';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { SkeletonRow } from '@/components/ui/Skeleton';
+import { useToast } from '@/components/ui/Toast';
+import { Check, KeyRound, Pencil, Plug, Trash2, Users, Plus, Copy, X, Eye, EyeOff } from 'lucide-react';
+import type { Agent } from '@/lib/schemas';
+import {
+  automationGuardrailSnippets,
+  claudeCursorSnippet,
+  codexMultiAgentMcpSnippet,
+  codexMcpSetupSnippet,
+  codexPromptSnippet,
+  mcpEnvSnippet,
+  nodeSdkSnippets,
+  openClawSetupSnippet,
+  openClawSkillSnippet,
+  schedulingSnippets,
+  serverCronSnippet,
+  workGuardrailSnippets,
+  type SetupSnippet,
+} from '@/lib/setupGuides';
+import { billingUpgradesEnabled } from '@/lib/billing';
+
+const typeLabels: Record<string, string> = {
+  external_meeting: 'External',
+  internal: 'Internal',
+  focus: 'Focus',
+  generic: 'Generic',
+};
+
+const typeBadgeVariant: Record<string, 'accent' | 'success' | 'warning' | 'neutral'> = {
+  external_meeting: 'accent',
+  internal: 'success',
+  focus: 'warning',
+  generic: 'neutral',
+};
+
+const healthBadge: Record<ValueHealth['agent_health'][number]['status'], { label: string; variant: 'success' | 'warning' | 'neutral' | 'error' }> = {
+  healthy: { label: 'Healthy', variant: 'success' },
+  quiet: { label: 'Quiet', variant: 'warning' },
+  never_connected: { label: 'Never connected', variant: 'neutral' },
+  error: { label: 'Error', variant: 'error' },
+};
+
+const enforcementBadge: Record<Agent['enforcement_mode'], { label: string; variant: 'success' | 'neutral' }> = {
+  enforce: { label: 'Enforce', variant: 'success' },
+  observe: { label: 'Observe', variant: 'neutral' },
+};
+
+function formatAgentTimestamp(value: string | null | undefined) {
+  if (!value) return '-';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '-';
+  const pad = (number: number) => String(number).padStart(2, '0');
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+function mcpStatus(agent: Agent): { label: string; variant: 'success' | 'warning' | 'neutral'; detail: string } {
+  if (!agent.mcp_last_seen_at) {
+    return { label: 'Offline', variant: 'neutral', detail: 'No heartbeat yet' };
+  }
+
+  const diffMs = Date.now() - new Date(agent.mcp_last_seen_at).getTime();
+  if (diffMs < 2 * 60 * 1000) {
+    return { label: 'Online', variant: 'success', detail: 'Seen just now' };
+  }
+  if (diffMs < 15 * 60 * 1000) {
+    return { label: 'Recent', variant: 'warning', detail: `${Math.floor(diffMs / 60000)}m ago` };
+  }
+
+  return { label: 'Offline', variant: 'neutral', detail: `${Math.floor(diffMs / 60000)}m ago` };
+}
+
+export default function AgentsPage() {
+  const { toast } = useToast();
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [valueHealth, setValueHealth] = useState<ValueHealth | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [session, setSession] = useState<StoredSession | null>(null);
+  const [showNewPanel, setShowNewPanel] = useState(false);
+  const [newAgentKey, setNewAgentKey] = useState<string | null>(null);
+  const [newAgentId, setNewAgentId] = useState<string | null>(null);
+  const [newAgentKeySaved, setNewAgentKeySaved] = useState(false);
+  const [form, setForm] = useState({ name: '', agent_type: 'generic', priority: 0 });
+  const [editingAgentId, setEditingAgentId] = useState<string | null>(null);
+  const [editForm, setEditForm] = useState({ name: '', agent_type: 'generic', priority: 0, enforcement_mode: 'enforce' as Agent['enforcement_mode'] });
+  const [creating, setCreating] = useState(false);
+  const [connectAgent, setConnectAgent] = useState<Agent | null>(null);
+  const [connection, setConnection] = useState<Awaited<ReturnType<typeof testAgentConnection>> | null>(null);
+  const [connectionLoading, setConnectionLoading] = useState(false);
+  const [rotatedKey, setRotatedKey] = useState<string | null>(null);
+  const [rotating, setRotating] = useState(false);
+  const [planLimit, setPlanLimit] = useState<{ message: string; upgrade_plan: string | null } | null>(null);
+  const [connectTab, setConnectTab] = useState<'status' | 'sdk' | 'mcp' | 'automation' | 'openclaw' | 'rest' | 'codex' | 'activity'>('status');
+  const [connectResource, setConnectResource] = useState({ resource_type: 'repo' as 'project' | 'repo', resource_key: 'owner/repo', duration_minutes: 45 });
+  const [setupTest, setSetupTest] = useState<SetupTestRun | null>(null);
+  const [setupTestRunning, setSetupTestRunning] = useState(false);
+  const autoOpenedAgent = useRef<string | null>(null);
+
+  const loadAgents = useCallback(() => {
+    const s = loadSession();
+    setSession(s);
+    if (s) {
+      Promise.all([
+        listAgents(s.orgId),
+        getValueHealth().catch(() => null),
+      ])
+        .then(([data, health]) => {
+          setAgents(data);
+          setValueHealth(health);
+          setLoading(false);
+        })
+        .catch(() => setLoading(false));
+    } else {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadAgents();
+  }, [loadAgents]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !session || agents.length === 0) return;
+    const agentId = new URLSearchParams(window.location.search).get('connect');
+    if (!agentId || autoOpenedAgent.current === agentId) return;
+    const agent = agents.find((row) => row.id === agentId);
+    if (!agent) return;
+    autoOpenedAgent.current = agentId;
+    openConnect(agent);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [agents, session]);
+
+  // Keyboard shortcut: N to open new agent panel
+  useEffect(() => {
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === 'n' && !showNewPanel && !(e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)) {
+        e.preventDefault();
+        setShowNewPanel(true);
+      }
+      if (e.key === 'Escape') {
+        setShowNewPanel(false);
+        setNewAgentKey(null);
+        setNewAgentId(null);
+        setNewAgentKeySaved(false);
+      }
+    }
+    window.addEventListener('keydown', handleKey);
+    return () => window.removeEventListener('keydown', handleKey);
+  }, [showNewPanel]);
+
+  const handleCreate = async () => {
+    if (!session || !form.name.trim()) return;
+    setCreating(true);
+    try {
+      setPlanLimit(null);
+      const result = await createAgent({
+        orgId: session.orgId,
+        name: form.name.trim(),
+        agent_type: form.agent_type as Agent['agent_type'],
+        priority: form.priority,
+      });
+      setNewAgentKey(result.apiKey);
+      setNewAgentId(result.agent.id);
+      setNewAgentKeySaved(false);
+      setForm({ name: '', agent_type: 'generic', priority: 0 });
+      loadAgents();
+      toast('Agent created', 'success');
+    } catch (err) {
+      const body = (err as { body?: { error?: string; message?: string; upgrade_plan?: string | null } }).body;
+      if (body?.error === 'plan_limit_reached') {
+        setPlanLimit({ message: body.message || (err as Error).message, upgrade_plan: body.upgrade_plan ?? null });
+      }
+      toast((err as Error).message, 'error');
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const startEdit = (agent: Agent) => {
+    setEditingAgentId(agent.id);
+    setEditForm({
+      name: agent.name,
+      agent_type: agent.agent_type,
+      priority: agent.priority,
+      enforcement_mode: agent.enforcement_mode,
+    });
+  };
+
+  const handleUpdate = async () => {
+    if (!session || !editingAgentId || !editForm.name.trim()) return;
+    try {
+      await updateAgent({
+        orgId: session.orgId,
+        agentId: editingAgentId,
+        name: editForm.name.trim(),
+        agent_type: editForm.agent_type as Agent['agent_type'],
+        priority: editForm.priority,
+        enforcement_mode: editForm.enforcement_mode,
+      });
+      toast('Agent updated', 'success');
+      setEditingAgentId(null);
+      loadAgents();
+    } catch (err) {
+      toast((err as Error).message, 'error');
+    }
+  };
+
+  const handleDelete = async (agent: Agent) => {
+    if (!session) return;
+    if (!window.confirm(`Delete ${agent.name}? Holds and windows for this agent will also be removed.`)) return;
+    try {
+      await deleteAgent(session.orgId, agent.id);
+      toast('Agent deleted', 'success');
+      loadAgents();
+    } catch (err) {
+      toast((err as Error).message, 'error');
+    }
+  };
+
+  const openConnect = async (agent: Agent) => {
+    if (!session) return;
+    setConnectAgent(agent);
+    setConnectTab('status');
+    setConnection(null);
+    setRotatedKey(null);
+    setSetupTest(null);
+    setConnectionLoading(true);
+    try {
+      setConnection(await testAgentConnection(session.orgId, agent.id));
+    } catch (err) {
+      toast((err as Error).message, 'error');
+    } finally {
+      setConnectionLoading(false);
+    }
+  };
+
+  const handleRotateKey = async () => {
+    if (!session || !connectAgent) return;
+    if (!window.confirm('Rotate this API key? The old key will stop working immediately.')) return;
+    setRotating(true);
+    try {
+      const result = await rotateAgentKey(session.orgId, connectAgent.id);
+      setRotatedKey(result.apiKey);
+      toast('API key rotated', 'success');
+      loadAgents();
+    } catch (err) {
+      toast((err as Error).message, 'error');
+    } finally {
+      setRotating(false);
+    }
+  };
+
+  const handleRunSetupTest = async () => {
+    if (!session || !connectAgent) return;
+    setSetupTestRunning(true);
+    try {
+      const result = await runAgentSetupTest(session.orgId, connectAgent.id);
+      setSetupTest(result);
+      setConnection(await testAgentConnection(session.orgId, connectAgent.id));
+      setValueHealth(await getValueHealth().catch(() => null));
+      toast(result.status === 'success' ? 'Setup test passed' : `Setup test ${result.status}`, result.status === 'error' ? 'error' : 'success');
+    } catch (err) {
+      const body = (err as { body?: SetupTestRun }).body;
+      if (body?.steps) setSetupTest(body);
+      toast((err as Error).message, 'error');
+    } finally {
+      setSetupTestRunning(false);
+    }
+  };
+
+  const copyText = (text: string, label = 'Copied') => {
+    navigator.clipboard.writeText(text);
+    toast(label, 'success');
+  };
+
+  const appUrl = typeof window !== 'undefined' ? window.location.origin : 'https://availsync.dev';
+  const guideInput = {
+    appUrl,
+    agentId: connectAgent?.id,
+    resourceType: connectResource.resource_type,
+    resourceKey: connectResource.resource_key || 'owner/repo',
+    durationMinutes: connectResource.duration_minutes || 45,
+  };
+  const mcpSnippet = mcpEnvSnippet(guideInput);
+  const sdkSnippets = nodeSdkSnippets(guideInput);
+  const cursorSnippet = claudeCursorSnippet(guideInput);
+  const codexMcpSnippet = codexMcpSetupSnippet(guideInput);
+  const codexMultiAgentSnippet = codexMultiAgentMcpSnippet(guideInput);
+  const automationSnippets = automationGuardrailSnippets(guideInput);
+  const openClawSkill = openClawSkillSnippet(guideInput);
+  const openClawSetup = openClawSetupSnippet(guideInput);
+  const workSnippets = workGuardrailSnippets(guideInput);
+  const scheduleSnippets = schedulingSnippets(guideInput);
+  const healthByAgent = new Map(valueHealth?.agent_health.map((health) => [health.agent_id, health]) ?? []);
+  const connectAgentHealth = connectAgent ? healthByAgent.get(connectAgent.id) : undefined;
+  const codexSnippet = codexPromptSnippet(guideInput);
+  const cronSnippet = serverCronSnippet(guideInput);
+  const readinessItems = connection
+    ? [
+        ['Agent created', connection.setup_readiness.agent_created],
+        ['API key copied or rotated', Boolean(rotatedKey || connection.last_successful_api_call || connection.last_seen_at || connection.mcp_last_seen_at)],
+        ['MCP heartbeat seen', connection.setup_readiness.mcp_heartbeat_seen],
+        ['First availability check', connection.setup_readiness.first_availability_check],
+        ['First conflict preview', connection.setup_readiness.first_conflict_preview],
+        ['First work check', connection.setup_readiness.first_work_check],
+        ['First work claim', connection.setup_readiness.first_work_claim],
+        ['First work extend', connection.setup_readiness.first_work_extend],
+        ['First work release', connection.setup_readiness.first_work_release],
+      ] as Array<[string, boolean]>
+    : [];
+  const missingReadinessItems = readinessItems.filter(([, value]) => !value).map(([label]) => label);
+
+  return (
+    <div className="w-full max-w-none p-4 sm:p-6">
+      <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
+        <h1 className="text-title font-semibold text-text-primary">Agents</h1>
+        <button
+          onClick={() => setShowNewPanel(true)}
+          className="flex items-center gap-1.5 rounded bg-accent text-white px-3 py-1.5 text-body font-medium hover:bg-accent-hover transition-colors active:scale-[0.98]"
+        >
+          <Plus className="h-3.5 w-3.5" />
+          New agent
+        </button>
+      </div>
+
+      {planLimit && (
+        <div className="mb-4 rounded border border-warning/40 bg-warning/10 p-3 text-body text-warning">
+          <div>{planLimit.message}</div>
+          {planLimit.upgrade_plan && (
+            <a
+              className="mt-2 inline-block text-accent hover:text-accent-hover"
+              href={billingUpgradesEnabled() ? `/checkout?plan=${planLimit.upgrade_plan}` : '/app/settings?tab=billing'}
+            >
+              {billingUpgradesEnabled() ? `Upgrade to ${planLimit.upgrade_plan}` : 'Join paid plan waitlist'}
+            </a>
+          )}
+        </div>
+      )}
+
+      {/* New agent slide-over */}
+      {showNewPanel && (
+        <div className="fixed inset-0 z-50 flex justify-end">
+          <div className="absolute inset-0 bg-black/50" onClick={() => { setShowNewPanel(false); setNewAgentKey(null); setNewAgentId(null); setNewAgentKeySaved(false); }} />
+          <div className="relative w-full max-w-sm overflow-y-auto border-l border-border bg-surface p-4 sm:p-6">
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-heading font-medium text-text-primary">New agent</h2>
+              <button onClick={() => { setShowNewPanel(false); setNewAgentKey(null); setNewAgentId(null); setNewAgentKeySaved(false); }} className="text-text-tertiary hover:text-text-secondary">
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+
+            {newAgentKey ? (
+              <div>
+                <OneTimeKeyPanel apiKey={newAgentKey} onCopy={copyText} saved={newAgentKeySaved} onSavedChange={setNewAgentKeySaved} />
+                {newAgentId && (
+                  <div className="rounded border border-border bg-bg p-4 mb-4">
+                    <label className="block text-label uppercase text-text-tertiary mb-1">Agent ID</label>
+                    <div className="flex items-center gap-2">
+                      <span className="font-mono text-[12px] text-text-secondary break-all">{newAgentId}</span>
+                      <button
+                        onClick={() => {
+                          navigator.clipboard.writeText(newAgentId);
+                          toast('Agent ID copied', 'success');
+                        }}
+                        className="text-text-tertiary hover:text-text-secondary"
+                        title="Copy agent ID"
+                      >
+                        <Copy className="h-3.5 w-3.5" />
+                      </button>
+                    </div>
+                  </div>
+                )}
+                <button
+                  onClick={() => { setShowNewPanel(false); setNewAgentKey(null); setNewAgentId(null); setNewAgentKeySaved(false); }}
+                  disabled={!newAgentKeySaved}
+                  className="w-full rounded bg-surface-raised text-text-secondary py-2 text-body hover:bg-border transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+                >
+                  Done
+                </button>
+              </div>
+            ) : (
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-label uppercase text-text-tertiary mb-1">Name</label>
+                  <input
+                    value={form.name}
+                    onChange={(e) => setForm({ ...form, name: e.target.value })}
+                    className="w-full rounded bg-bg border border-border px-3 py-2 text-body text-text-primary outline-none focus:border-border-focus"
+                    placeholder="e.g. deploy_agent"
+                    autoFocus
+                  />
+                </div>
+                <div>
+                  <label className="block text-label uppercase text-text-tertiary mb-1">Type</label>
+                  <select
+                    value={form.agent_type}
+                    onChange={(e) => setForm({ ...form, agent_type: e.target.value })}
+                    className="w-full rounded bg-bg border border-border px-3 py-2 text-body text-text-primary outline-none focus:border-border-focus"
+                  >
+                    <option value="external_meeting">External meeting</option>
+                    <option value="internal">Internal</option>
+                    <option value="focus">Focus</option>
+                    <option value="generic">Coding / generic</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-label uppercase text-text-tertiary mb-1">Priority</label>
+                  <input
+                    type="number"
+                    value={form.priority}
+                    onChange={(e) => setForm({ ...form, priority: Number(e.target.value) })}
+                    className="w-full rounded bg-bg border border-border px-3 py-2 text-body text-text-primary outline-none focus:border-border-focus"
+                  />
+                </div>
+                <button
+                  onClick={handleCreate}
+                  disabled={creating || !form.name.trim()}
+                  className="w-full rounded bg-accent text-white py-2 text-body font-medium hover:bg-accent-hover transition-colors disabled:opacity-40 active:scale-[0.98]"
+                >
+                  {creating ? 'Creating...' : 'Create agent'}
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {connectAgent && (
+        <div className="fixed inset-0 z-50 flex justify-end">
+          <div className="absolute inset-0 bg-black/50" onClick={() => setConnectAgent(null)} />
+          <div className="relative w-full max-w-2xl overflow-y-auto border-l border-border bg-surface p-4 sm:p-6">
+            <div className="mb-6 flex items-start justify-between gap-4">
+              <div>
+                <h2 className="text-heading font-medium text-text-primary">Connect {connectAgent.name}</h2>
+                <div className="mt-1 flex items-center gap-2">
+                  <p className="break-all font-mono text-[12px] text-text-tertiary">{connectAgent.id}</p>
+                  <button
+                    onClick={() => copyText(connectAgent.id, 'Agent ID copied')}
+                    className="shrink-0 text-text-tertiary hover:text-text-secondary"
+                    title="Copy agent ID"
+                  >
+                    <Copy className="h-3.5 w-3.5" />
+                  </button>
+                </div>
+              </div>
+              <button onClick={() => setConnectAgent(null)} className="text-text-tertiary hover:text-text-secondary">
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+
+            <div className="mb-5 flex flex-wrap gap-2 border-b border-border pb-3">
+              {[
+                ['status', 'Status'],
+                ['sdk', 'Node SDK'],
+                ['mcp', 'MCP'],
+                ['automation', 'Automation'],
+                ['openclaw', 'OpenClaw'],
+                ['rest', 'REST'],
+                ['codex', 'Codex/Cursor'],
+                ['activity', 'Activity'],
+              ].map(([id, label]) => (
+                <button
+                  key={id}
+                  onClick={() => setConnectTab(id as typeof connectTab)}
+                  className={`rounded border px-3 py-1.5 text-body transition-colors ${
+                    connectTab === id
+                      ? 'border-accent bg-accent/10 text-accent'
+                      : 'border-border bg-bg text-text-secondary hover:text-text-primary'
+                  }`}
+                >
+                  {label}
+                </button>
+              ))}
+            </div>
+
+            {connectTab === 'status' && (
+              <>
+                <div className="mb-5 rounded border border-border bg-bg p-4">
+                  <div className="mb-3 flex items-center justify-between">
+                    <h3 className="text-body font-medium text-text-primary">Connection status</h3>
+                    <button
+                      onClick={() => openConnect(connectAgent)}
+                      className="text-body text-accent hover:text-accent-hover"
+                    >
+                      Test again
+                    </button>
+                  </div>
+                  {connectionLoading ? (
+                    <p className="text-body text-text-tertiary">Testing connection...</p>
+                  ) : connection ? (
+                    <>
+                      <div className="grid gap-2 sm:grid-cols-2">
+                        <StatusLine label="MCP" value={connection.mcp_status} success={connection.mcp_status === 'online'} />
+                        <StatusLine label="Health" value={connectAgentHealth ? healthBadge[connectAgentHealth.status].label : 'unknown'} success={connectAgentHealth?.status === 'healthy'} />
+                        <StatusLine label="Enforcement" value={enforcementBadge[connectAgent.enforcement_mode].label} success={connectAgent.enforcement_mode === 'enforce'} />
+                        <StatusLine label="Last seen" value={connection.last_seen_at ? new Date(connection.last_seen_at).toLocaleString() : 'none'} />
+                        <StatusLine label="Last real activity" value={connectAgentHealth?.last_activity_at ? new Date(connectAgentHealth.last_activity_at).toLocaleString() : 'none'} />
+                        <StatusLine label="Last call" value={connection.last_successful_api_call?.activity_type || 'none'} />
+                        <StatusLine label="Last error" value={connectAgentHealth?.last_error_code || connection.last_error?.error_code || 'none'} success={!connectAgentHealth?.last_error_at && !connection.last_error} />
+                        <StatusLine
+                          label="Latest activity"
+                          value={connection.setup_readiness.latest_activity_type || 'none'}
+                        />
+                      </div>
+                      {connection.mcp_status !== 'online' && (
+                        <p className="mt-3 text-body text-text-secondary">
+                          MCP is offline. Go to the MCP tab if this agent should be connected through Claude, Cursor, or another MCP client.
+                        </p>
+                      )}
+                      {connectAgentHealth?.status === 'quiet' && (
+                        <p className="mt-3 text-body text-warning">
+                          No Availsync calls in 3 days. Check SDK/MCP env config.
+                        </p>
+                      )}
+                      {connectAgent.enforcement_mode === 'observe' && (
+                        <p className="mt-3 text-body text-text-secondary">
+                          Observe-only is active. This agent will still run; Availsync records what it would have blocked.
+                        </p>
+                      )}
+                      <div className="mt-4 rounded border border-border bg-surface px-3 py-2">
+                        <p className="text-body text-text-secondary">
+                          Recommended pilot path: run verification, switch this agent to Observe,
+                          install <code>@availsync/node@alpha</code>, then check Activity for real traffic.
+                        </p>
+                        <div className="mt-2 flex flex-wrap gap-3">
+                          <button onClick={() => setConnectTab('sdk')} className="text-body text-accent hover:text-accent-hover">
+                            Open Node SDK setup
+                          </button>
+                          <a href="/docs/sdk/node" className="text-body text-accent hover:text-accent-hover">
+                            Read SDK docs
+                          </a>
+                        </div>
+                      </div>
+                    </>
+                  ) : (
+                    <p className="text-body text-text-tertiary">Run a connection test to verify setup.</p>
+                  )}
+                </div>
+
+                <div className="mb-5 rounded border border-border bg-bg p-4">
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                    <div>
+                      <h3 className="text-body font-medium text-text-primary">Dashboard setup test</h3>
+                      <p className="mt-1 text-body text-text-secondary">
+                        Run this safe dashboard test first, then connect your real MCP client.
+                      </p>
+                    </div>
+                    <button
+                      onClick={handleRunSetupTest}
+                      disabled={setupTestRunning}
+                      className="rounded bg-accent px-3 py-1.5 text-body font-medium text-white hover:bg-accent-hover disabled:opacity-50"
+                    >
+                      {setupTestRunning ? 'Running...' : 'Run test workflow'}
+                    </button>
+                  </div>
+                  {setupTest && (
+                    <div className="mt-4 space-y-2">
+                      <div className="flex items-center justify-between">
+                        <span className="font-mono text-[12px] text-text-tertiary">{setupTest.run_id}</span>
+                        <Badge variant={setupTest.status === 'success' ? 'success' : setupTest.status === 'warning' ? 'warning' : 'error'}>
+                          {setupTest.status}
+                        </Badge>
+                      </div>
+                      <div className="space-y-2">
+                        {setupTest.steps.map((step) => (
+                          <SetupTestStepRow key={`${setupTest.run_id}-${step.name}`} step={step} />
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {connection && (
+                  <div className="mb-5 rounded border border-border bg-bg p-4">
+                    <h3 className="mb-3 text-body font-medium text-text-primary">Setup checklist</h3>
+                    <div className="grid gap-2 sm:grid-cols-2">
+                      {readinessItems.map(([label, value]) => (
+                        <div key={label} className="flex items-center justify-between gap-2 rounded border border-border bg-surface px-3 py-2 text-body">
+                          <span className="text-text-secondary">{label}</span>
+                          <Badge variant={value ? 'success' : 'neutral'}>{value ? 'Done' : 'Missing'}</Badge>
+                        </div>
+                      ))}
+                    </div>
+                    {missingReadinessItems.length > 0 && (
+                      <div className="mt-4 rounded border border-border bg-surface px-3 py-2">
+                        <p className="text-body text-text-secondary">
+                          Next: {missingReadinessItems.slice(0, 3).join(', ')}
+                          {missingReadinessItems.length > 3 ? ` and ${missingReadinessItems.length - 3} more` : ''}.
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                <div className="rounded border border-border bg-bg p-4">
+                  <div className="mb-3 flex items-center gap-2">
+                    <KeyRound className="h-4 w-4 text-text-tertiary" />
+                    <h3 className="text-body font-medium text-text-primary">API key</h3>
+                  </div>
+                  {rotatedKey ? (
+                    <div>
+                      <OneTimeKeyPanel apiKey={rotatedKey} onCopy={copyText} />
+                    </div>
+                  ) : (
+                    <button
+                      onClick={handleRotateKey}
+                      disabled={rotating}
+                      className="rounded border border-error/40 px-3 py-1.5 text-body font-medium text-error hover:border-error hover:bg-error/10 disabled:opacity-50"
+                    >
+                      {rotating ? 'Rotating...' : 'Rotate key'}
+                    </button>
+                  )}
+                </div>
+              </>
+            )}
+
+            {connectTab === 'sdk' && (
+              <div className="space-y-4">
+                <div className="rounded border border-border bg-bg p-4">
+                  <h3 className="text-body font-medium text-text-primary">Node SDK pilot path</h3>
+                  <p className="mt-1 text-body text-text-secondary">
+                    Install <code>@availsync/node@alpha</code>, keep the API key in env, and wrap the repo task with withClaim. Use Observe first when you want proof without blocking real work.
+                  </p>
+                  <div className="mt-3 flex flex-wrap gap-3">
+                    <a href="/docs/sdk/node" className="text-body text-accent hover:text-accent-hover">
+                      Full SDK docs
+                    </a>
+                    <a href="/docs/pilot" className="text-body text-accent hover:text-accent-hover">
+                      Pilot guide
+                    </a>
+                  </div>
+                </div>
+                {sdkSnippets.map((snippet) => <SnippetCard key={snippet.id} snippet={snippet} onCopy={copyText} />)}
+              </div>
+            )}
+
+            {connectTab === 'mcp' && (
+              <div className="space-y-4">
+                <div className="rounded border border-border bg-bg p-4">
+                  <h3 className="text-body font-medium text-text-primary">Codex app setup</h3>
+                  <p className="mt-1 text-body text-text-secondary">
+                    Open Codex, go to Settings, then MCP servers. Add a new server and use the
+                    field values below. The API key is the one-time secret from create or rotate key.
+                  </p>
+                  <div className="mt-3 grid gap-2 text-body text-text-secondary sm:grid-cols-2">
+                    {[
+                      'Save the server.',
+                      'Restart Codex or reload MCP servers.',
+                      'Ask Codex to list available MCP tools.',
+                      'Return here and click Test again.',
+                    ].map((step, index) => (
+                      <div className="flex gap-2 rounded border border-border bg-surface px-3 py-2" key={step}>
+                        <span className="font-mono text-text-tertiary">{index + 1}</span>
+                        <span>{step}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                <SnippetCard snippet={codexMcpSnippet} onCopy={copyText} />
+                <div className="rounded border border-border bg-bg p-4">
+                  <h3 className="text-body font-medium text-text-primary">Multiple Codex sessions</h3>
+                  <p className="mt-1 text-body text-text-secondary">
+                    Use one shared agent id when you only need a global Codex lock across sessions.
+                    Use one Availsync agent per Codex role when you want different priorities or
+                    conflict behavior.
+                  </p>
+                  <div className="mt-3 grid gap-2 text-body text-text-secondary sm:grid-cols-2">
+                    <div className="rounded border border-border bg-surface px-3 py-2">
+                      <span className="font-medium text-text-primary">Shared agent</span>
+                      <p className="mt-1 text-text-tertiary">Best when all Codex sessions act as the same operator.</p>
+                    </div>
+                    <div className="rounded border border-border bg-surface px-3 py-2">
+                      <span className="font-medium text-text-primary">Role agents</span>
+                      <p className="mt-1 text-text-tertiary">Best for builder, reviewer, deploy, cleanup, or experiment priorities.</p>
+                    </div>
+                  </div>
+                </div>
+                <SnippetCard snippet={codexMultiAgentSnippet} onCopy={copyText} />
+                <SnippetCard snippet={mcpSnippet} onCopy={copyText} />
+                <SnippetCard snippet={cursorSnippet} onCopy={copyText} />
+                <div className="rounded border border-border bg-bg p-4">
+                  <h3 className="text-body font-medium text-text-primary">MCP tool order</h3>
+                  <p className="mt-1 text-body text-text-secondary">
+                    heartbeat {'->'} check_work_slot {'->'} claim_work_slot {'->'} extend_work_slot while working {'->'} release_work_slot.
+                  </p>
+                  <p className="mt-2 text-body text-text-tertiary">
+                    If Codex does not show these tools, check that Node.js and npx work locally,
+                    confirm the agent id matches this agent, and rotate the key if the original API
+                    key was lost.
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {connectTab === 'automation' && (
+              <div className="space-y-4">
+                <div className="rounded border border-border bg-bg p-4">
+                  <h3 className="text-body font-medium text-text-primary">Automation guardrail</h3>
+                  <p className="mt-1 text-body text-text-secondary">
+                    Generate a wrapper for scheduled Codex, Claude, Cursor, cron, or server jobs. Blocked runs return skip_run and should exit cleanly.
+                  </p>
+                  <p className="mt-2 text-body text-text-secondary">
+                    To pilot safely, switch the agent to Observe on the Agents table. Observe mode never creates a lease; it only reports what Availsync would have blocked.
+                  </p>
+                  <p className="mt-2 text-body text-text-tertiary">
+                    Default to repo-level for maximum safety. Use project-level only for independent streams; Availsync does not yet infer dependencies between different resources.
+                  </p>
+                  <div className="mt-4 grid gap-3 sm:grid-cols-[140px_1fr_120px]">
+                    <div>
+                      <label className="mb-1 block text-label uppercase text-text-tertiary">Resource</label>
+                      <select
+                        value={connectResource.resource_type}
+                        onChange={(event) => setConnectResource({ ...connectResource, resource_type: event.target.value as 'project' | 'repo' })}
+                        className="w-full rounded border border-border bg-surface px-3 py-2 text-body text-text-primary outline-none focus:border-border-focus"
+                      >
+                        <option value="repo">Repo · safest</option>
+                        <option value="project">Project · advanced</option>
+                      </select>
+                    </div>
+                    <div>
+                      <label className="mb-1 block text-label uppercase text-text-tertiary">Resource key</label>
+                      <input
+                        value={connectResource.resource_key}
+                        onChange={(event) => setConnectResource({ ...connectResource, resource_key: event.target.value })}
+                        className="w-full rounded border border-border bg-surface px-3 py-2 text-body text-text-primary outline-none focus:border-border-focus"
+                        placeholder="owner/repo"
+                      />
+                    </div>
+                    <div>
+                      <label className="mb-1 block text-label uppercase text-text-tertiary">Minutes</label>
+                      <input
+                        type="number"
+                        min={1}
+                        max={240}
+                        value={connectResource.duration_minutes}
+                        onChange={(event) => setConnectResource({ ...connectResource, duration_minutes: Number(event.target.value) || 45 })}
+                        className="w-full rounded border border-border bg-surface px-3 py-2 text-body text-text-primary outline-none focus:border-border-focus"
+                      />
+                    </div>
+                  </div>
+                </div>
+                {automationSnippets.map((snippet) => <SnippetCard key={snippet.id} snippet={snippet} onCopy={copyText} />)}
+              </div>
+            )}
+
+            {connectTab === 'openclaw' && (
+              <div className="space-y-4">
+                <div className="rounded border border-border bg-bg p-4">
+                  <h3 className="text-body font-medium text-text-primary">OpenClaw skill pack</h3>
+                  <p className="mt-1 text-body text-text-secondary">
+                    Install the SKILL.md in OpenClaw and keep API_KEY in env. The skill teaches OpenClaw to start, extend, and finish Availsync work runs before touching the repo.
+                  </p>
+                </div>
+                <SnippetCard snippet={openClawSkill} onCopy={copyText} />
+                <SnippetCard snippet={openClawSetup} onCopy={copyText} />
+              </div>
+            )}
+
+            {connectTab === 'rest' && (
+              <div className="space-y-4">
+                <div className="rounded border border-border bg-bg p-4">
+                  <h3 className="text-body font-medium text-text-primary">Work guardrail flow</h3>
+                  <p className="mt-1 text-body text-text-secondary">
+                    Use Availsync to stop agents from acting on the same selected resource at the same time. Repo-level is the safest default.
+                  </p>
+                </div>
+                {workSnippets.map((snippet) => <SnippetCard key={snippet.id} snippet={snippet} onCopy={copyText} />)}
+                {scheduleSnippets.map((snippet) => <SnippetCard key={snippet.id} snippet={snippet} onCopy={copyText} />)}
+              </div>
+            )}
+
+            {connectTab === 'codex' && (
+              <div className="space-y-4">
+                <SnippetCard snippet={codexSnippet} onCopy={copyText} />
+                <SnippetCard snippet={cronSnippet} onCopy={copyText} />
+                <div className="rounded border border-border bg-bg p-4">
+                  <h3 className="text-body font-medium text-text-primary">Plugin roadmap</h3>
+                  <p className="mt-1 text-body text-text-secondary">
+                    A dedicated Codex plugin is a future integration layer. For now, use the MCP server or REST flow above.
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {connectTab === 'activity' && (
+              <div className="space-y-4">
+                <div className="rounded border border-border bg-bg p-4">
+                  <h3 className="text-body font-medium text-text-primary">Activity validation</h3>
+                  <p className="mt-1 text-body text-text-secondary">
+                    Activity shows MCP/API/runtime traffic. Audit stays focused on governance, work lifecycle decisions, holds, and conflicts.
+                  </p>
+                  <button
+                    onClick={() => { window.location.href = `/app/activity?agent=${connectAgent.id}`; }}
+                    className="mt-4 rounded bg-accent px-3 py-1.5 text-body font-medium text-white hover:bg-accent-hover"
+                  >
+                    Open Activity filtered to this agent
+                  </button>
+                </div>
+                <div className="rounded border border-border bg-bg p-4">
+                  <h3 className="text-body font-medium text-text-primary">Latest observed event</h3>
+                  <p className="mt-1 font-mono text-[12px] text-text-tertiary">
+                    {connection?.setup_readiness.latest_activity_type || 'none'} {connection?.setup_readiness.latest_activity_at || ''}
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Agent table */}
+      {loading ? (
+        <div className="rounded border border-border overflow-hidden">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <SkeletonRow key={i} />
+          ))}
+        </div>
+      ) : agents.length === 0 ? (
+        <EmptyState
+          icon={Users}
+          title="No agents yet"
+          description="Create your first agent, copy its one-time API key, then install the Node SDK to send real guarded runs."
+          action={
+            <button
+              onClick={() => setShowNewPanel(true)}
+              className="rounded bg-accent text-white px-3 py-1.5 text-body font-medium hover:bg-accent-hover transition-colors"
+            >
+              Create agent
+            </button>
+          }
+        />
+      ) : (
+        <div className="overflow-x-auto rounded border border-border dark-scroll">
+          <table className="w-full min-w-[1180px]">
+            <colgroup>
+              <col className="w-[150px]" />
+              <col className="w-[130px]" />
+              <col className="w-[100px]" />
+              <col className="w-[95px]" />
+              <col className="w-[135px]" />
+              <col className="w-[150px]" />
+              <col className="w-[100px]" />
+              <col className="w-[85px]" />
+              <col className="w-[120px]" />
+              <col className="w-[115px]" />
+            </colgroup>
+            <thead>
+              <tr className="border-b border-border bg-surface text-label uppercase text-text-tertiary">
+                <th className="px-4 py-2 text-left font-medium">Name</th>
+                <th className="px-4 py-2 text-left font-medium">Agent ID</th>
+                <th className="px-4 py-2 text-left font-medium">Health</th>
+                <th className="px-4 py-2 text-left font-medium">Mode</th>
+                <th className="px-4 py-2 text-left font-medium">MCP</th>
+                <th className="px-4 py-2 text-left font-medium">Last seen</th>
+                <th className="px-4 py-2 text-left font-medium">Type</th>
+                <th className="px-4 py-2 text-left font-medium">Priority</th>
+                <th className="px-4 py-2 text-left font-medium">Created</th>
+                <th className="px-4 py-2 text-right font-medium">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {agents.map((agent) => {
+                const status = mcpStatus(agent);
+                const health = healthByAgent.get(agent.id);
+                return (
+                  <tr
+                    key={agent.id}
+                    className="h-11 border-b border-border transition-colors duration-150 hover:bg-surface-raised"
+                  >
+                    <td className="px-4 py-2 text-body font-medium text-text-primary">
+                      {editingAgentId === agent.id ? (
+                        <input
+                          value={editForm.name}
+                          onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
+                          className="w-full rounded bg-bg border border-border px-2 py-1 text-body text-text-primary outline-none focus:border-border-focus"
+                        />
+                      ) : (
+                        <span className="block truncate" title={agent.name}>{agent.name}</span>
+                      )}
+                    </td>
+                    <td className="px-4 py-2">
+                      <div className="flex items-center gap-2 whitespace-nowrap">
+                        <span className="font-mono text-[12px] text-text-secondary" title={agent.id}>
+                          {agent.id.slice(0, 8)}...
+                        </span>
+                        <button
+                          onClick={() => {
+                            navigator.clipboard.writeText(agent.id);
+                            toast('Agent ID copied', 'success');
+                          }}
+                          className="shrink-0 text-text-tertiary hover:text-text-secondary"
+                          title="Copy full agent ID"
+                        >
+                          <Copy className="h-3.5 w-3.5" />
+                        </button>
+                      </div>
+                    </td>
+                    <td className="px-4 py-2">
+                      {health ? (
+                        <Badge variant={healthBadge[health.status].variant}>{healthBadge[health.status].label}</Badge>
+                      ) : (
+                        <Badge variant="neutral">Unknown</Badge>
+                      )}
+                    </td>
+                    <td className="px-4 py-2">
+                      {editingAgentId === agent.id ? (
+                        <select
+                          value={editForm.enforcement_mode}
+                          onChange={(e) => setEditForm({ ...editForm, enforcement_mode: e.target.value as Agent['enforcement_mode'] })}
+                          className="rounded bg-bg border border-border px-2 py-1 text-body text-text-primary outline-none focus:border-border-focus"
+                        >
+                          <option value="enforce">Enforce</option>
+                          <option value="observe">Observe</option>
+                        </select>
+                      ) : (
+                        <Badge variant={enforcementBadge[agent.enforcement_mode].variant}>{enforcementBadge[agent.enforcement_mode].label}</Badge>
+                      )}
+                    </td>
+                    <td className="px-4 py-2">
+                      <div className="flex items-center gap-2 whitespace-nowrap">
+                        <Badge variant={status.variant}>{status.label}</Badge>
+                        <span className="text-label text-text-tertiary">{status.detail}</span>
+                      </div>
+                    </td>
+                    <td className="whitespace-nowrap px-4 py-2 font-mono text-body text-text-tertiary">
+                      {formatAgentTimestamp(agent.last_seen_at ?? agent.last_used_at)}
+                    </td>
+                    <td className="px-4 py-2">
+                      {editingAgentId === agent.id ? (
+                        <select
+                          value={editForm.agent_type}
+                          onChange={(e) => setEditForm({ ...editForm, agent_type: e.target.value })}
+                          className="rounded bg-bg border border-border px-2 py-1 text-body text-text-primary outline-none focus:border-border-focus"
+                        >
+                          <option value="external_meeting">External</option>
+                          <option value="internal">Internal</option>
+                          <option value="focus">Focus</option>
+                          <option value="generic">Generic</option>
+                        </select>
+                      ) : (
+                        <Badge variant={typeBadgeVariant[agent.agent_type] || 'neutral'}>
+                          {typeLabels[agent.agent_type] || agent.agent_type}
+                        </Badge>
+                      )}
+                    </td>
+                    <td className="whitespace-nowrap px-4 py-2 font-mono text-body text-text-secondary">
+                      {editingAgentId === agent.id ? (
+                        <input
+                          type="number"
+                          value={editForm.priority}
+                          onChange={(e) => setEditForm({ ...editForm, priority: Number(e.target.value) })}
+                          className="w-20 rounded bg-bg border border-border px-2 py-1 text-body text-text-primary outline-none focus:border-border-focus"
+                        />
+                      ) : (
+                        agent.priority
+                      )}
+                    </td>
+                    <td className="whitespace-nowrap px-4 py-2 font-mono text-body text-text-tertiary">
+                      {formatAgentTimestamp(agent.created_at).slice(0, 10)}
+                    </td>
+                    <td className="px-4 py-2">
+                      <div className="flex items-center justify-end gap-3 whitespace-nowrap">
+                        {editingAgentId === agent.id ? (
+                          <>
+                            <button
+                              onClick={handleUpdate}
+                              className="shrink-0 text-success hover:text-success/80"
+                              title="Save changes"
+                            >
+                              <Check className="h-3.5 w-3.5" />
+                            </button>
+                            <button
+                              onClick={() => setEditingAgentId(null)}
+                              className="shrink-0 text-text-tertiary hover:text-text-secondary"
+                              title="Cancel"
+                            >
+                              <X className="h-3.5 w-3.5" />
+                            </button>
+                          </>
+                        ) : (
+                          <>
+                            <button
+                              onClick={() => openConnect(agent)}
+                              className="shrink-0 text-text-tertiary hover:text-text-secondary"
+                              title="Connect agent"
+                            >
+                              <Plug className="h-3.5 w-3.5" />
+                            </button>
+                            <button
+                              onClick={() => startEdit(agent)}
+                              className="shrink-0 text-text-tertiary hover:text-text-secondary"
+                              title="Edit agent"
+                            >
+                              <Pencil className="h-3.5 w-3.5" />
+                            </button>
+                            <button
+                              onClick={() => handleDelete(agent)}
+                              className="shrink-0 text-error hover:text-error/80"
+                              title="Delete agent"
+                            >
+                              <Trash2 className="h-3.5 w-3.5" />
+                            </button>
+                          </>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StatusLine({ label, value, success }: { label: string; value: string; success?: boolean }) {
+  return (
+    <div className="rounded border border-border bg-surface p-3">
+      <div className="text-label uppercase text-text-tertiary">{label}</div>
+      <div className="mt-1 flex items-center justify-between gap-2">
+        <span className="truncate text-body text-text-secondary">{value}</span>
+        {success != null && <Badge variant={success ? 'success' : 'neutral'}>{success ? 'OK' : 'Check'}</Badge>}
+      </div>
+    </div>
+  );
+}
+
+function SetupTestStepRow({ step }: { step: SetupTestRun['steps'][number] }) {
+  const variant =
+    step.status === 'success' ? 'success' : step.status === 'warning' ? 'warning' : step.status === 'blocked' || step.status === 'error' ? 'error' : 'neutral';
+
+  return (
+    <div className="rounded border border-border bg-surface p-3">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <div className="font-mono text-[12px] text-text-primary">{step.name.replaceAll('_', ' ')}</div>
+          <p className="mt-1 text-body text-text-secondary">{step.summary}</p>
+          {step.next_action && (
+            <p className="mt-1 text-body text-warning">{step.next_action}</p>
+          )}
+        </div>
+        <div className="flex shrink-0 flex-col items-end gap-1">
+          <Badge variant={variant}>{step.status}</Badge>
+          <span className="font-mono text-[11px] text-text-tertiary">{step.latency_ms}ms</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function OneTimeKeyPanel({
+  apiKey,
+  onCopy,
+  saved,
+  onSavedChange,
+}: {
+  apiKey: string;
+  onCopy: (text: string, label?: string) => void;
+  saved?: boolean;
+  onSavedChange?: (saved: boolean) => void;
+}) {
+  const [revealed, setRevealed] = useState(false);
+
+  return (
+    <div className="mb-4 rounded border border-warning/30 bg-bg p-4">
+      <p className="mb-2 text-body font-medium text-warning">Copy now. This key will not be shown again.</p>
+      <div className="mb-3 flex items-center gap-2 rounded bg-surface p-3">
+        <input
+          readOnly
+          type={revealed ? 'text' : 'password'}
+          value={apiKey}
+          className="min-w-0 flex-1 bg-transparent font-mono text-[12px] text-text-secondary outline-none"
+        />
+        <button
+          onClick={() => setRevealed((value) => !value)}
+          className="shrink-0 text-text-tertiary hover:text-text-secondary"
+          title={revealed ? 'Hide API key' : 'Reveal API key'}
+        >
+          {revealed ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+        </button>
+      </div>
+      <div className="flex flex-wrap items-center gap-3">
+        <button
+          onClick={() => {
+            onCopy(apiKey, 'API key copied');
+            onSavedChange?.(true);
+          }}
+          className="flex items-center gap-1.5 text-body text-accent hover:text-accent-hover"
+        >
+          <Copy className="h-3.5 w-3.5" />
+          Copy to clipboard
+        </button>
+        {onSavedChange && (
+          <label className="flex items-center gap-2 text-body text-text-secondary">
+            <input
+              type="checkbox"
+              checked={Boolean(saved)}
+              onChange={(event) => onSavedChange(event.target.checked)}
+              className="h-4 w-4 accent-accent"
+            />
+            I saved this key
+          </label>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function SnippetCard({
+  snippet,
+  onCopy,
+}: {
+  snippet: SetupSnippet;
+  onCopy: (text: string, label?: string) => void;
+}) {
+  return (
+    <div className="rounded border border-border bg-bg p-4">
+      <div className="mb-3 flex items-start justify-between gap-3">
+        <div>
+          <h3 className="text-body font-medium text-text-primary">{snippet.title}</h3>
+          <p className="mt-1 text-body text-text-secondary">{snippet.description}</p>
+        </div>
+        <button
+          onClick={() => onCopy(snippet.code, snippet.copyLabel)}
+          className="flex shrink-0 items-center gap-1.5 rounded border border-border bg-surface px-2 py-1 text-body text-text-secondary hover:text-text-primary"
+        >
+          <Copy className="h-3.5 w-3.5" />
+          Copy
+        </button>
+      </div>
+      <pre className="max-h-72 overflow-auto rounded border border-border bg-surface p-3 text-[11px] text-text-secondary whitespace-pre-wrap">
+        {snippet.code}
+      </pre>
+    </div>
+  );
+}