sparkecoder 0.1.98 → 0.1.100

package/web/.next/standalone/web/src/app/(main)/settings/page.tsx

@@ -0,0 +1,1116 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import {
+  Loader2, Slack, Cloud, Calendar as CalendarIcon, Webhook as WebhookIcon,
+  Copy, RotateCw, Trash2, Plus, Check, Eye, EyeOff, Bot, Cpu, Key,
+  BookOpen, X as XIcon, ShieldCheck, Plug,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { getApiUrl, getConfig as getAppConfig } from '@/lib/config';
+import { cn } from '@/lib/utils';
+
+interface IntegrationsResponse {
+  channels: Array<{ id: string; canSend: boolean; label: string }>;
+  slack: {
+    configured: boolean;
+    botTokenSet: boolean;
+    signingSecretSet: boolean;
+    defaultOrchestratorName: string | null;
+    eventsUrl: string;
+    allowedUsers: string[];
+    allowedChannels: string[];
+    allowDmsFromAnyone: boolean;
+    deniedReplyEnabled: boolean;
+    deniedReplyTemplate: string;
+  };
+  cloudflared: { publicBaseUrl: string | null; hint: string };
+  cfAccess: { enabled: boolean; teamDomain: string | null; allowedEmails: string[] };
+}
+
+interface ScheduleRow {
+  id: string; name: string; cron: string; prompt: string;
+  replyChannel?: string; enabled: boolean; lastFiredAt?: string; createdAt: string;
+}
+
+interface WebhookRow {
+  id: string; name: string; token: string; url: string;
+  wake: 'now' | 'next'; template?: string;
+  hitCount: number; lastHitAt?: string; createdAt: string;
+}
+
+interface OrchestratorInfo {
+  id: string; name: string; personality: string; model: string; workingDirectory: string;
+}
+
+interface ApiKeyStatus {
+  provider: string; envVar: string; configured: boolean;
+  source: 'env' | 'storage' | 'none'; maskedKey: string | null;
+}
+
+import type { AppConfig } from '@/lib/config';
+
+const api = (path: string) => `${getApiUrl()}${path}`;
+async function jsonFetch<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(api(path), {
+    ...init,
+    headers: { 'Content-Type': 'application/json', ...(init?.headers || {}) },
+  });
+  return res.json();
+}
+
+type TabId = 'general' | 'integrations' | 'mcp' | 'schedules' | 'webhooks' | 'models' | 'apikeys';
+
+const TABS: Array<{ id: TabId; label: string; icon: React.ComponentType<{ className?: string }> }> = [
+  { id: 'general',      label: 'General',      icon: Bot },
+  { id: 'integrations', label: 'Integrations', icon: Slack },
+  { id: 'mcp',          label: 'MCP',          icon: Plug },
+  { id: 'schedules',    label: 'Schedules',    icon: CalendarIcon },
+  { id: 'webhooks',     label: 'Webhooks',     icon: WebhookIcon },
+  { id: 'models',       label: 'Models',       icon: Cpu },
+  { id: 'apikeys',      label: 'API Keys',     icon: Key },
+];
+
+export default function SettingsPage() {
+  const [tab, setTab] = useState<TabId>('general');
+
+  return (
+    <div className="h-full flex bg-background">
+      {/* Left rail */}
+      <nav className="w-56 shrink-0 border-r border-border/60 p-3 overflow-y-auto">
+        <div className="px-2 py-2 mb-2">
+          <h1 className="text-base font-semibold">Settings</h1>
+          <p className="text-[11px] text-muted-foreground mt-0.5">Configure your orchestrator and channels.</p>
+        </div>
+        <ul className="space-y-0.5">
+          {TABS.map((t) => {
+            const Icon = t.icon;
+            const active = tab === t.id;
+            return (
+              <li key={t.id}>
+                <button
+                  type="button"
+                  onClick={() => setTab(t.id)}
+                  className={cn(
+                    'w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm transition-colors',
+                    active ? 'bg-accent text-foreground' : 'hover:bg-accent/60 text-foreground/80',
+                  )}
+                >
+                  <Icon className={cn('size-4 shrink-0', active ? 'text-primary' : 'text-muted-foreground')} />
+                  <span>{t.label}</span>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </nav>
+
+      {/* Right pane */}
+      <div className="flex-1 min-w-0 overflow-y-auto">
+        <div className="max-w-3xl mx-auto p-6">
+          {tab === 'general' && <GeneralSection />}
+          {tab === 'integrations' && <IntegrationsSection />}
+          {tab === 'mcp' && <McpSection />}
+          {tab === 'schedules' && <SchedulesSection />}
+          {tab === 'webhooks' && <WebhooksSection />}
+          {tab === 'models' && <ModelsSection />}
+          {tab === 'apikeys' && <ApiKeysSection />}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SectionHeader({ title, description }: { title: string; description?: string }) {
+  return (
+    <div className="mb-4">
+      <h2 className="text-lg font-semibold">{title}</h2>
+      {description && <p className="text-sm text-muted-foreground mt-0.5">{description}</p>}
+    </div>
+  );
+}
+
+// ============================================================
+// General — orchestrator name + personality
+// ============================================================
+
+function GeneralSection() {
+  const [orc, setOrc] = useState<OrchestratorInfo | null>(null);
+  const [name, setName] = useState('');
+  const [personality, setPersonality] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  const refresh = useCallback(async () => {
+    const o = await jsonFetch<OrchestratorInfo>('/api/orchestrator');
+    setOrc(o);
+    setName(o.name || '');
+    setPersonality(o.personality || '');
+  }, []);
+
+  useEffect(() => { refresh(); }, [refresh]);
+
+  const save = async () => {
+    setSaving(true);
+    setSaved(false);
+    try {
+      await jsonFetch('/api/orchestrator', {
+        method: 'PATCH',
+        body: JSON.stringify({ name: name || undefined, personality }),
+      });
+      setSaved(true);
+      setTimeout(() => setSaved(false), 1500);
+    } finally { setSaving(false); }
+  };
+
+  if (!orc) {
+    return <div className="flex items-center justify-center py-12"><Loader2 className="size-5 animate-spin text-muted-foreground" /></div>;
+  }
+
+  const dirty = name !== orc.name || personality !== (orc.personality || '');
+
+  return (
+    <section>
+      <SectionHeader
+        title="Orchestrator"
+        description="Your supervisor agent's name and personality. The personality is appended to its system prompt."
+      />
+
+      <div className="space-y-4">
+        <div>
+          <Label className="text-sm font-medium">Agent name</Label>
+          <p className="text-xs text-muted-foreground mb-1.5">Shown in the sidebar and chat header.</p>
+          <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Orchestrator" className="max-w-md" />
+        </div>
+
+        <div>
+          <Label className="text-sm font-medium">Personality / persona</Label>
+          <p className="text-xs text-muted-foreground mb-1.5">
+            Optional. Free-form instructions appended to your orchestrator's system prompt every turn.
+            Examples: <em>"speak in haiku"</em>, <em>"be terse and professional"</em>, <em>"respond in Korean"</em>,
+            <em>"you are a senior engineer who values shipping over perfection"</em>.
+          </p>
+          <textarea
+            value={personality}
+            onChange={(e) => setPersonality(e.target.value)}
+            rows={6}
+            placeholder="(blank = default tone)"
+            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-primary/40"
+          />
+        </div>
+
+        <div className="flex items-center gap-3 pt-1">
+          <Button onClick={save} disabled={!dirty || saving}>
+            {saving ? <Loader2 className="size-4 animate-spin mr-2" /> : null}
+            Save
+          </Button>
+          {saved && <span className="text-xs text-emerald-500">Saved ✓</span>}
+        </div>
+
+        <div className="rounded-md border border-border/40 bg-muted/30 p-3 text-xs space-y-1">
+          <p><span className="text-muted-foreground">Session id:</span> <code>{orc.id}</code></p>
+          <p><span className="text-muted-foreground">Model:</span> <code>{orc.model}</code></p>
+          <p><span className="text-muted-foreground">Working directory:</span> <code className="break-all">{orc.workingDirectory}</code></p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// ============================================================
+// Integrations — Slack + Cloudflared
+// ============================================================
+
+function IntegrationsSection() {
+  const [data, setData] = useState<IntegrationsResponse | null>(null);
+  const refresh = useCallback(async () => {
+    setData(await jsonFetch<IntegrationsResponse>('/api/integrations'));
+  }, []);
+  useEffect(() => { refresh(); }, [refresh]);
+  if (!data) return <div className="flex items-center justify-center py-12"><Loader2 className="size-5 animate-spin text-muted-foreground" /></div>;
+  return (
+    <section className="space-y-4">
+      <SectionHeader title="Integrations" description="External channels the orchestrator can send and receive messages on." />
+      <SlackCard data={data} onChange={refresh} />
+      <CloudflaredCard data={data} />
+    </section>
+  );
+}
+
+function SlackCard({ data, onChange }: { data: IntegrationsResponse; onChange: () => void }) {
+  const [botToken, setBotToken] = useState('');
+  const [signingSecret, setSigningSecret] = useState('');
+  const [showToken, setShowToken] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [testChannel, setTestChannel] = useState('');
+  const [testResult, setTestResult] = useState<string | null>(null);
+  const [showSetup, setShowSetup] = useState(false);
+
+  const save = async () => {
+    setSaving(true);
+    try {
+      await jsonFetch('/api/integrations/slack', {
+        method: 'POST',
+        body: JSON.stringify({ botToken: botToken || undefined, signingSecret: signingSecret || undefined }),
+      });
+      setBotToken(''); setSigningSecret(''); onChange();
+    } finally { setSaving(false); }
+  };
+  const disconnect = async () => {
+    if (!confirm('Remove Slack credentials?')) return;
+    await jsonFetch('/api/integrations/slack', { method: 'DELETE' });
+    onChange();
+  };
+  const test = async () => {
+    if (!testChannel) return;
+    setTestResult('Sending…');
+    const r = await jsonFetch<{ ok: boolean; error?: string }>('/api/integrations/slack/test', {
+      method: 'POST', body: JSON.stringify({ channel: testChannel }),
+    });
+    setTestResult(r.ok ? 'Sent.' : `Failed: ${r.error}`);
+  };
+
+  return (
+    <>
+      <Card>
+        <CardHeader icon={<Slack className="size-4 text-[#4A154B] dark:text-pink-300" />} title="Slack"
+          status={data.slack.configured ? 'Configured' : 'Not configured'}
+          statusTone={data.slack.configured ? 'text-emerald-500' : 'text-muted-foreground'}
+        />
+        <p className="text-xs text-muted-foreground mb-3">
+          Lets the orchestrator receive @mentions and DMs in Slack and reply in-thread via the messenger tool.
+        </p>
+        <div className="flex gap-2 mb-3">
+          <Button size="sm" variant="outline" onClick={() => setShowSetup(true)}>
+            <BookOpen className="size-3.5 mr-1.5" />Setup instructions
+          </Button>
+        </div>
+        <div className="space-y-2">
+          <div>
+            <Label className="text-xs">Bot token (xoxb-...)</Label>
+            <div className="flex gap-2">
+              <Input type={showToken ? 'text' : 'password'} value={botToken} onChange={(e) => setBotToken(e.target.value)}
+                placeholder={data.slack.botTokenSet ? '(set)' : 'xoxb-...'} className="text-xs" />
+              <Button variant="outline" size="icon" onClick={() => setShowToken((v) => !v)}>
+                {showToken ? <EyeOff className="size-3.5" /> : <Eye className="size-3.5" />}
+              </Button>
+            </div>
+          </div>
+          <div>
+            <Label className="text-xs">Signing secret</Label>
+            <Input type="password" value={signingSecret} onChange={(e) => setSigningSecret(e.target.value)}
+              placeholder={data.slack.signingSecretSet ? '(set)' : '...'} className="text-xs" />
+          </div>
+          <div className="flex gap-2 pt-1">
+            <Button size="sm" onClick={save} disabled={saving || (!botToken && !signingSecret)}>
+              {saving ? <Loader2 className="size-3.5 animate-spin" /> : 'Save'}
+            </Button>
+            {data.slack.configured && <Button size="sm" variant="outline" onClick={disconnect}>Disconnect</Button>}
+          </div>
+        </div>
+        <div className="mt-3 rounded border border-border/40 bg-background/50 p-2 text-xs space-y-1">
+          <p><strong>Events URL</strong> (paste into Slack &rarr; Event Subscriptions):</p>
+          <code className="block px-2 py-1 rounded bg-muted text-[11px] break-all">{data.slack.eventsUrl}</code>
+          <p className="text-muted-foreground">Subscribe to bot events: <code>app_mention</code>, <code>message.im</code>.</p>
+        </div>
+        {data.slack.configured && (
+          <div className="mt-3 flex gap-2 items-end">
+            <div className="flex-1">
+              <Label className="text-xs">Test post (channel id or #channel)</Label>
+              <Input value={testChannel} onChange={(e) => setTestChannel(e.target.value)} placeholder="C0123 or #general" className="text-xs" />
+            </div>
+            <Button size="sm" variant="outline" onClick={test} disabled={!testChannel}>Send test</Button>
+            {testResult && <span className="text-xs text-muted-foreground">{testResult}</span>}
+          </div>
+        )}
+      </Card>
+
+      {/* Access control card */}
+      <Card>
+        <CardHeader icon={<ShieldCheck className="size-4 text-amber-500" />} title="Slack access control"
+          status={accessSummary(data.slack)}
+          statusTone="text-muted-foreground"
+        />
+        <SlackAllowlistEditor data={data} onChange={onChange} />
+      </Card>
+
+      {showSetup && (
+        <SlackSetupModal
+          eventsUrl={data.slack.eventsUrl}
+          onClose={() => setShowSetup(false)}
+        />
+      )}
+    </>
+  );
+}
+
+function accessSummary(slack: IntegrationsResponse['slack']): string {
+  const parts: string[] = [];
+  if (slack.allowedUsers.length > 0) parts.push(`${slack.allowedUsers.length} user(s)`);
+  if (slack.allowedChannels.length > 0) parts.push(`${slack.allowedChannels.length} channel(s)`);
+  if (!slack.allowDmsFromAnyone) parts.push('DMs locked');
+  return parts.length === 0 ? 'Open to anyone' : parts.join(' · ');
+}
+
+function SlackAllowlistEditor({ data, onChange }: { data: IntegrationsResponse; onChange: () => void }) {
+  const [allowedUsers, setAllowedUsers] = useState(data.slack.allowedUsers.join(', '));
+  const [allowedChannels, setAllowedChannels] = useState(data.slack.allowedChannels.join(', '));
+  const [allowDmsFromAnyone, setAllowDmsFromAnyone] = useState(data.slack.allowDmsFromAnyone);
+  const [deniedReplyEnabled, setDeniedReplyEnabled] = useState(data.slack.deniedReplyEnabled);
+  const [deniedReplyTemplate, setDeniedReplyTemplate] = useState(data.slack.deniedReplyTemplate);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  const dirty =
+    allowedUsers.trim() !== data.slack.allowedUsers.join(', ').trim() ||
+    allowedChannels.trim() !== data.slack.allowedChannels.join(', ').trim() ||
+    allowDmsFromAnyone !== data.slack.allowDmsFromAnyone ||
+    deniedReplyEnabled !== data.slack.deniedReplyEnabled ||
+    deniedReplyTemplate !== data.slack.deniedReplyTemplate;
+
+  const save = async () => {
+    setSaving(true); setSaved(false);
+    try {
+      const splitList = (s: string) => s.split(/[\s,]+/).map((x) => x.trim()).filter(Boolean);
+      await jsonFetch('/api/integrations/slack', {
+        method: 'POST',
+        body: JSON.stringify({
+          allowedUsers: splitList(allowedUsers),
+          allowedChannels: splitList(allowedChannels),
+          allowDmsFromAnyone,
+          deniedReplyEnabled,
+          deniedReplyTemplate,
+        }),
+      });
+      onChange();
+      setSaved(true); setTimeout(() => setSaved(false), 1500);
+    } finally { setSaving(false); }
+  };
+
+  return (
+    <div className="space-y-3">
+      <p className="text-xs text-muted-foreground">
+        Empty lists = no allowlist (accept anyone Slack delivers an event for). When a list is set, only matching users / channels can talk to the orchestrator.
+      </p>
+
+      <div>
+        <Label className="text-xs">Allowed users (Slack user IDs)</Label>
+        <p className="text-[11px] text-muted-foreground mb-1">Comma or space separated. e.g. <code>U01ABCD</code>, <code>U09XYZ</code>. Leave blank to allow anyone.</p>
+        <Input value={allowedUsers} onChange={(e) => setAllowedUsers(e.target.value)} placeholder="U01..., U02..." className="text-xs font-mono" />
+      </div>
+
+      <div>
+        <Label className="text-xs">Allowed channels (Slack channel IDs)</Label>
+        <p className="text-[11px] text-muted-foreground mb-1">Channel IDs only (not <code>#name</code>). e.g. <code>C012345</code>. Affects @mentions; DMs use the toggle below.</p>
+        <Input value={allowedChannels} onChange={(e) => setAllowedChannels(e.target.value)} placeholder="C012345, C098765" className="text-xs font-mono" />
+      </div>
+
+      <label className="flex items-start gap-2 cursor-pointer">
+        <input
+          type="checkbox"
+          checked={allowDmsFromAnyone}
+          onChange={(e) => setAllowDmsFromAnyone(e.target.checked)}
+          className="mt-1"
+        />
+        <div className="text-xs">
+          <span className="font-medium">Allow DMs from anyone</span>
+          <p className="text-muted-foreground">
+            On: anyone who DMs your bot can talk to it. Off: only users in the allowlist above can DM.
+          </p>
+        </div>
+      </label>
+
+      <div className="border-t border-border/40 pt-3">
+        <label className="flex items-start gap-2 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={deniedReplyEnabled}
+            onChange={(e) => setDeniedReplyEnabled(e.target.checked)}
+            className="mt-1"
+          />
+          <div className="text-xs">
+            <span className="font-medium">Auto-reply to denied users</span>
+            <p className="text-muted-foreground">
+              When someone is blocked by the rules above, post a canned reply (no AI) so they know why nothing happened. Posted in-thread for @mentions; in the DM for DMs.
+            </p>
+          </div>
+        </label>
+        <div className="mt-2 pl-6">
+          <Label className="text-xs">Reply template</Label>
+          <p className="text-[11px] text-muted-foreground mb-1">
+            Placeholders: <code className="px-1 rounded bg-muted">{'{user}'}</code> &rarr; mentions the requester, <code className="px-1 rounded bg-muted">{'{channel}'}</code> &rarr; mentions the channel.
+          </p>
+          <textarea
+            value={deniedReplyTemplate}
+            onChange={(e) => setDeniedReplyTemplate(e.target.value)}
+            rows={3}
+            disabled={!deniedReplyEnabled}
+            className="w-full rounded-md border border-input bg-background px-2 py-1.5 text-xs disabled:opacity-50"
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 pt-1">
+        <Button size="sm" onClick={save} disabled={!dirty || saving}>
+          {saving ? <Loader2 className="size-3.5 animate-spin" /> : 'Save'}
+        </Button>
+        {saved && <span className="text-xs text-emerald-500">Saved ✓</span>}
+      </div>
+    </div>
+  );
+}
+
+function SlackSetupModal({ eventsUrl, onClose }: { eventsUrl: string; onClose: () => void }) {
+  const [copied, setCopied] = useState<string | null>(null);
+  const manifest = buildSlackManifest(eventsUrl);
+  const copy = async (key: string, text: string) => {
+    await navigator.clipboard.writeText(text);
+    setCopied(key); setTimeout(() => setCopied(null), 1500);
+  };
+  return (
+    <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4" onClick={onClose}>
+      <div className="bg-card rounded-lg border border-border max-w-2xl w-full max-h-[85vh] overflow-y-auto shadow-2xl" onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center justify-between px-5 py-3 border-b border-border/60 sticky top-0 bg-card">
+          <h2 className="text-base font-semibold flex items-center gap-2">
+            <Slack className="size-4 text-[#4A154B] dark:text-pink-300" />
+            Slack setup
+          </h2>
+          <Button size="icon" variant="ghost" onClick={onClose}><XIcon className="size-4" /></Button>
+        </div>
+        <div className="p-5 space-y-5 text-sm">
+          <Step n={1} title="Create a Slack app from manifest">
+            <p>Go to <a href="https://api.slack.com/apps?new_app=1" target="_blank" rel="noreferrer" className="text-primary underline">api.slack.com/apps</a>, click <strong>Create New App</strong> → <strong>From a manifest</strong>, pick your workspace, paste the YAML below, then create.</p>
+            <CopyBlock label="Slack manifest" value={manifest} onCopy={() => copy('manifest', manifest)} copied={copied === 'manifest'} />
+          </Step>
+
+          <Step n={2} title="Grab credentials">
+            <p>In your new app's <strong>Basic Information</strong> page, copy the <strong>Signing Secret</strong>. Then under <strong>OAuth &amp; Permissions</strong>, install the app to your workspace and copy the <strong>Bot User OAuth Token</strong> (starts with <code>xoxb-</code>).</p>
+            <p className="text-xs text-muted-foreground">Paste both into the Slack card above, then click Save.</p>
+          </Step>
+
+          <Step n={3} title="Verify the Events URL">
+            <p>Slack will challenge the URL automatically when you create the app from the manifest (it's pre-filled with your URL below). If it shows <strong>Verified</strong> you're done.</p>
+            <CopyBlock label="Events URL (already in the manifest)" value={eventsUrl} onCopy={() => copy('eventsUrl', eventsUrl)} copied={copied === 'eventsUrl'} mono />
+            <p className="text-[11px] text-muted-foreground">If verification fails, your sparkecoder isn't reachable from the public internet. Set up a cloudflared tunnel — see the Cloudflared card.</p>
+          </Step>
+
+          <Step n={4} title="Invite the bot to channels">
+            <p>In Slack: <code>/invite @your-bot-name</code> in any channel you want it to respond in. (DMs work without an invite.)</p>
+          </Step>
+
+          <Step n={5} title="Lock it down (optional but recommended)">
+            <p>By default <strong>anyone</strong> in your workspace can DM the bot or mention it in any channel it's in. Use the <strong>Slack access control</strong> section to limit access to specific Slack user IDs and channel IDs.</p>
+            <p className="text-[11px] text-muted-foreground">Find a user ID: click their name in Slack → ⋮ → Copy member ID. Find a channel ID: click the channel name → About → bottom of the panel.</p>
+          </Step>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Step({ n, title, children }: { n: number; title: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-2">
+      <h3 className="font-medium flex items-center gap-2">
+        <span className="inline-flex items-center justify-center size-5 rounded-full bg-primary/15 text-primary text-[11px] font-semibold">{n}</span>
+        {title}
+      </h3>
+      <div className="pl-7 space-y-2 text-sm text-foreground/90">{children}</div>
+    </div>
+  );
+}
+
+function CopyBlock({ label, value, onCopy, copied, mono }: { label: string; value: string; onCopy: () => void; copied: boolean; mono?: boolean }) {
+  return (
+    <div className="rounded border border-border/60 bg-background/60 overflow-hidden">
+      <div className="px-3 py-1.5 flex items-center justify-between border-b border-border/40 bg-muted/40">
+        <span className="text-[11px] text-muted-foreground">{label}</span>
+        <Button size="sm" variant="ghost" onClick={onCopy} className="h-6 text-[11px]">
+          {copied ? <Check className="size-3 mr-1" /> : <Copy className="size-3 mr-1" />}
+          {copied ? 'Copied' : 'Copy'}
+        </Button>
+      </div>
+      <pre className={cn('px-3 py-2 text-[11px] overflow-x-auto whitespace-pre-wrap break-all', mono && 'font-mono')}>{value}</pre>
+    </div>
+  );
+}
+
+function buildSlackManifest(eventsUrl: string): string {
+  // Trim trailing whitespace; Slack rejects manifests with weird indents.
+  return `display_information:
+  name: sparkecoder
+  description: Your orchestrator agent. Spawns worker agents, posts updates, answers questions.
+  background_color: "#1f1f24"
+features:
+  bot_user:
+    display_name: sparkecoder
+    always_online: true
+oauth_config:
+  scopes:
+    bot:
+      - app_mentions:read
+      - channels:history
+      - chat:write
+      - groups:history
+      - im:history
+      - im:read
+      - im:write
+      - users:read
+settings:
+  event_subscriptions:
+    request_url: ${eventsUrl}
+    bot_events:
+      - app_mention
+      - message.im
+  interactivity:
+    is_enabled: false
+  org_deploy_enabled: false
+  socket_mode_enabled: false
+  token_rotation_enabled: false
+`;
+}
+
+function CloudflaredCard({ data }: { data: IntegrationsResponse }) {
+  return (
+    <Card>
+      <CardHeader icon={<Cloud className="size-4 text-orange-500" />} title="Cloudflared tunnel"
+        status={data.cloudflared.publicBaseUrl ? 'Hostname set' : 'Local-only'}
+        statusTone={data.cloudflared.publicBaseUrl ? 'text-emerald-500' : 'text-muted-foreground'}
+      />
+      <p className="text-xs text-muted-foreground mb-2">
+        Required to receive Slack events and webhook hits from the public internet. Run{' '}
+        <code className="px-1 rounded bg-muted text-[11px]">sparkecoder cloudflared-setup</code> for a copy-paste recipe.
+      </p>
+      {data.cloudflared.publicBaseUrl && (
+        <div className="text-xs">
+          <span className="text-muted-foreground">Public base: </span>
+          <code className="px-1 rounded bg-muted">{data.cloudflared.publicBaseUrl}</code>
+        </div>
+      )}
+      {data.cfAccess.enabled && (
+        <div className="mt-2 text-xs">
+          <span className="text-muted-foreground">CF Access: </span><span className="text-emerald-500">enabled</span>
+          {data.cfAccess.allowedEmails.length > 0 && (
+            <span className="text-muted-foreground"> · {data.cfAccess.allowedEmails.length} allowed email(s)</span>
+          )}
+        </div>
+      )}
+    </Card>
+  );
+}
+
+// ============================================================
+// Schedules
+// ============================================================
+
+function SchedulesSection() {
+  const [rows, setRows] = useState<ScheduleRow[]>([]);
+  const [adding, setAdding] = useState(false);
+  const refresh = useCallback(async () => {
+    const r = await jsonFetch<{ schedules: ScheduleRow[] }>('/api/schedules');
+    setRows(r.schedules || []);
+  }, []);
+  useEffect(() => { refresh(); }, [refresh]);
+  return (
+    <section>
+      <div className="flex items-center justify-between mb-3">
+        <SectionHeader title="Schedules" description="Recurring prompts that wake the orchestrator on a cron." />
+        <Button size="sm" variant="outline" onClick={() => setAdding((v) => !v)}><Plus className="size-3.5 mr-1" />New</Button>
+      </div>
+      {adding && <ScheduleForm onCancel={() => setAdding(false)} onSaved={() => { setAdding(false); refresh(); }} />}
+      {rows.length === 0 ? (
+        <p className="text-xs text-muted-foreground italic px-1">No schedules yet.</p>
+      ) : (
+        <div className="space-y-2">{rows.map((r) => <ScheduleRowView key={r.id} row={r} onChange={refresh} />)}</div>
+      )}
+    </section>
+  );
+}
+
+function ScheduleForm({ initial, onCancel, onSaved }: { initial?: Partial<ScheduleRow>; onCancel: () => void; onSaved: () => void }) {
+  const [name, setName] = useState(initial?.name || '');
+  const [cron, setCron] = useState(initial?.cron || '0 9 * * 1-5');
+  const [prompt, setPrompt] = useState(initial?.prompt || '');
+  const [replyChannel, setReplyChannel] = useState(initial?.replyChannel || '');
+  const [saving, setSaving] = useState(false);
+  const save = async () => {
+    if (!name || !cron || !prompt) return;
+    setSaving(true);
+    try {
+      if (initial?.id) {
+        await jsonFetch(`/api/schedules/${initial.id}`, { method: 'PATCH', body: JSON.stringify({ name, cron, prompt, replyChannel: replyChannel || undefined }) });
+      } else {
+        await jsonFetch('/api/schedules', { method: 'POST', body: JSON.stringify({ name, cron, prompt, replyChannel: replyChannel || undefined }) });
+      }
+      onSaved();
+    } finally { setSaving(false); }
+  };
+  return (
+    <div className="rounded-lg border border-border/60 bg-card/40 p-3 mb-2 space-y-2">
+      <div className="grid grid-cols-2 gap-2">
+        <div><Label className="text-xs">Name</Label><Input value={name} onChange={(e) => setName(e.target.value)} placeholder="standup-9am" className="text-xs" /></div>
+        <div><Label className="text-xs">Cron (5 fields)</Label><Input value={cron} onChange={(e) => setCron(e.target.value)} placeholder="0 9 * * 1-5" className="text-xs font-mono" /></div>
+      </div>
+      <div><Label className="text-xs">Prompt</Label><Input value={prompt} onChange={(e) => setPrompt(e.target.value)} placeholder="Summarize yesterday's git activity" className="text-xs" /></div>
+      <div><Label className="text-xs">Default reply channel (optional)</Label><Input value={replyChannel} onChange={(e) => setReplyChannel(e.target.value)} placeholder="slack:#standup" className="text-xs" /></div>
+      <div className="flex gap-2 pt-1">
+        <Button size="sm" onClick={save} disabled={saving || !name || !cron || !prompt}>{saving ? <Loader2 className="size-3.5 animate-spin" /> : 'Save'}</Button>
+        <Button size="sm" variant="ghost" onClick={onCancel}>Cancel</Button>
+      </div>
+    </div>
+  );
+}
+
+function ScheduleRowView({ row, onChange }: { row: ScheduleRow; onChange: () => void }) {
+  const toggle = async () => { await jsonFetch(`/api/schedules/${row.id}`, { method: 'PATCH', body: JSON.stringify({ enabled: !row.enabled }) }); onChange(); };
+  const remove = async () => { if (!confirm(`Delete schedule "${row.name}"?`)) return; await jsonFetch(`/api/schedules/${row.id}`, { method: 'DELETE' }); onChange(); };
+  return (
+    <div className="rounded-md border border-border/60 bg-background/50 p-3 flex items-start gap-3">
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2"><span className="text-sm font-medium">{row.name}</span>{!row.enabled && <span className="text-[10px] uppercase tracking-wide text-muted-foreground">paused</span>}</div>
+        <code className="text-[11px] text-muted-foreground font-mono">{row.cron}</code>
+        <p className="text-xs mt-1 line-clamp-2 text-foreground/80">{row.prompt}</p>
+        {row.replyChannel && <p className="text-[10px] text-muted-foreground mt-0.5">replyChannel: {row.replyChannel}</p>}
+        {row.lastFiredAt && <p className="text-[10px] text-muted-foreground mt-0.5">last fired {new Date(row.lastFiredAt).toLocaleString()}</p>}
+      </div>
+      <div className="flex flex-col gap-1">
+        <Button size="sm" variant="outline" onClick={toggle}>{row.enabled ? 'Pause' : 'Resume'}</Button>
+        <Button size="sm" variant="ghost" onClick={remove} className="text-rose-500 hover:text-rose-600"><Trash2 className="size-3.5" /></Button>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================
+// Webhooks
+// ============================================================
+
+function WebhooksSection() {
+  const [rows, setRows] = useState<WebhookRow[]>([]);
+  const [adding, setAdding] = useState(false);
+  const refresh = useCallback(async () => {
+    const r = await jsonFetch<{ webhooks: WebhookRow[] }>('/api/webhooks');
+    setRows(r.webhooks || []);
+  }, []);
+  useEffect(() => { refresh(); }, [refresh]);
+  return (
+    <section>
+      <div className="flex items-center justify-between mb-3">
+        <SectionHeader title="Webhooks" description="Custom token-protected URLs. POST any JSON to ping the orchestrator." />
+        <Button size="sm" variant="outline" onClick={() => setAdding((v) => !v)}><Plus className="size-3.5 mr-1" />New</Button>
+      </div>
+      {adding && <WebhookForm onCancel={() => setAdding(false)} onSaved={() => { setAdding(false); refresh(); }} />}
+      {rows.length === 0 ? <p className="text-xs text-muted-foreground italic px-1">No webhooks yet.</p>
+        : <div className="space-y-2">{rows.map((r) => <WebhookRowView key={r.id} row={r} onChange={refresh} />)}</div>}
+    </section>
+  );
+}
+
+function WebhookForm({ onCancel, onSaved }: { onCancel: () => void; onSaved: () => void }) {
+  const [name, setName] = useState('');
+  const [wake, setWake] = useState<'now' | 'next'>('now');
+  const [template, setTemplate] = useState('');
+  const [saving, setSaving] = useState(false);
+  const save = async () => {
+    if (!name) return;
+    setSaving(true);
+    try {
+      await jsonFetch('/api/webhooks', { method: 'POST', body: JSON.stringify({ name, wake, template: template || undefined }) });
+      onSaved();
+    } finally { setSaving(false); }
+  };
+  return (
+    <div className="rounded-lg border border-border/60 bg-card/40 p-3 mb-2 space-y-2">
+      <div className="grid grid-cols-2 gap-2">
+        <div><Label className="text-xs">Name</Label><Input value={name} onChange={(e) => setName(e.target.value)} placeholder="github-prs" className="text-xs" /></div>
+        <div><Label className="text-xs">Wake</Label>
+          <select value={wake} onChange={(e) => setWake(e.target.value as 'now' | 'next')} className="w-full text-xs h-9 rounded-md border border-input bg-background px-2">
+            <option value="now">now — ping orchestrator immediately</option>
+            <option value="next">next — add as context, fire later</option>
+          </select>
+        </div>
+      </div>
+      <div><Label className="text-xs">Template (optional)</Label>
+        <Input value={template} onChange={(e) => setTemplate(e.target.value)} placeholder="PR {{pull_request.title}} by {{sender.login}}" className="text-xs font-mono" />
+      </div>
+      <div className="flex gap-2 pt-1">
+        <Button size="sm" onClick={save} disabled={saving || !name}>{saving ? <Loader2 className="size-3.5 animate-spin" /> : 'Create'}</Button>
+        <Button size="sm" variant="ghost" onClick={onCancel}>Cancel</Button>
+      </div>
+    </div>
+  );
+}
+
+function WebhookRowView({ row, onChange }: { row: WebhookRow; onChange: () => void }) {
+  const [copied, setCopied] = useState(false);
+  const copy = async () => { await navigator.clipboard.writeText(row.url); setCopied(true); setTimeout(() => setCopied(false), 1500); };
+  const rotate = async () => { if (!confirm('Rotate the token?')) return; await jsonFetch(`/api/webhooks/${row.id}`, { method: 'PATCH', body: JSON.stringify({ rotateToken: true }) }); onChange(); };
+  const remove = async () => { if (!confirm(`Delete webhook "${row.name}"?`)) return; await jsonFetch(`/api/webhooks/${row.id}`, { method: 'DELETE' }); onChange(); };
+  return (
+    <div className="rounded-md border border-border/60 bg-background/50 p-3 space-y-2">
+      <div className="flex items-center gap-2">
+        <span className="text-sm font-medium">{row.name}</span>
+        <span className="text-[10px] uppercase tracking-wide text-muted-foreground">wake={row.wake}</span>
+        <span className="ml-auto text-[11px] text-muted-foreground">{row.hitCount} hit{row.hitCount === 1 ? '' : 's'}</span>
+      </div>
+      <div className="flex gap-1 items-center">
+        <code className="flex-1 text-[11px] px-2 py-1 rounded bg-muted break-all">{row.url}</code>
+        <Button size="icon" variant="outline" onClick={copy}>{copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}</Button>
+        <Button size="icon" variant="outline" onClick={rotate} title="Rotate token"><RotateCw className="size-3.5" /></Button>
+        <Button size="icon" variant="ghost" onClick={remove} className="text-rose-500 hover:text-rose-600"><Trash2 className="size-3.5" /></Button>
+      </div>
+      {row.template && <p className="text-[10px] text-muted-foreground font-mono">template: {row.template}</p>}
+      {row.lastHitAt && <p className="text-[10px] text-muted-foreground">last hit {new Date(row.lastHitAt).toLocaleString()}</p>}
+    </div>
+  );
+}
+
+// ============================================================
+// Models — default model picker
+// ============================================================
+
+function ModelsSection() {
+  const [cfg, setCfg] = useState<AppConfig | null>(null);
+  useEffect(() => { (async () => { setCfg(await getAppConfig()); })(); }, []);
+  if (!cfg) return <div className="flex items-center justify-center py-12"><Loader2 className="size-5 animate-spin text-muted-foreground" /></div>;
+  const current = cfg.availableModels.find((m) => m.id === cfg.defaultModel);
+  return (
+    <section>
+      <SectionHeader title="Models" description="Default model used for new sessions (orchestrator + workers). You can override per-session from the chat header." />
+      <div className="rounded-lg border border-border/60 bg-card/40 p-3 max-w-lg">
+        <Label className="text-xs">Current default</Label>
+        <p className="text-sm mt-1">
+          <strong>{current?.name || cfg.defaultModel}</strong>
+          {current?.provider && <span className="text-muted-foreground"> — {current.provider}</span>}
+        </p>
+        <p className="text-[11px] text-muted-foreground mt-2">
+          To change the default, set <code className="px-1 rounded bg-muted">defaultModel</code> in your{' '}
+          <code className="px-1 rounded bg-muted">sparkecoder.config.json</code> and restart the server.
+        </p>
+      </div>
+
+      <div className="mt-4">
+        <Label className="text-xs uppercase tracking-wide text-muted-foreground">Available models</Label>
+        <div className="mt-2 rounded-lg border border-border/60 divide-y divide-border/40">
+          {cfg.availableModels.map((m) => (
+            <div key={m.id} className={cn('flex items-center justify-between px-3 py-2 text-sm', m.id === cfg.defaultModel && 'bg-primary/5')}>
+              <div>
+                <span className="font-medium">{m.name}</span>
+                <span className="text-muted-foreground"> — {m.provider}</span>
+                {m.id === cfg.defaultModel && <span className="ml-2 text-[10px] uppercase tracking-wide text-primary">default</span>}
+              </div>
+              <code className="text-[10px] text-muted-foreground font-mono">{m.id}</code>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// ============================================================
+// API Keys — provider keys
+// ============================================================
+
+function ApiKeysSection() {
+  const [keys, setKeys] = useState<ApiKeyStatus[]>([]);
+  const refresh = useCallback(async () => {
+    const r = await jsonFetch<{ providers: ApiKeyStatus[] }>('/health/api-keys');
+    setKeys(r.providers || []);
+  }, []);
+  useEffect(() => { refresh(); }, [refresh]);
+  return (
+    <section>
+      <SectionHeader title="API Keys" description="Provider credentials used for AI inference (Vercel AI Gateway etc.). Keys are stored locally." />
+      <div className="space-y-2">
+        {keys.map((k) => <ApiKeyRow key={k.provider} keyStatus={k} onChange={refresh} />)}
+        {keys.length === 0 && <p className="text-xs text-muted-foreground italic px-1">No providers configured.</p>}
+      </div>
+    </section>
+  );
+}
+
+function ApiKeyRow({ keyStatus, onChange }: { keyStatus: ApiKeyStatus; onChange: () => void }) {
+  const [editing, setEditing] = useState(false);
+  const [value, setValue] = useState('');
+  const [show, setShow] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const save = async () => {
+    if (!value.trim()) return;
+    setSaving(true);
+    try {
+      await jsonFetch('/health/api-keys', { method: 'POST', body: JSON.stringify({ provider: keyStatus.provider, apiKey: value.trim() }) });
+      setValue(''); setEditing(false); onChange();
+    } finally { setSaving(false); }
+  };
+  const remove = async () => {
+    if (!confirm(`Remove ${keyStatus.provider} API key?`)) return;
+    await fetch(api(`/health/api-keys/${keyStatus.provider}`), { method: 'DELETE' });
+    onChange();
+  };
+  return (
+    <div className="rounded-md border border-border/60 bg-background/50 p-3">
+      <div className="flex items-center gap-2">
+        <span className="text-sm font-medium capitalize">{keyStatus.provider}</span>
+        {keyStatus.configured && (
+          <span className={cn(
+            'text-[10px] px-1.5 py-0.5 rounded font-medium',
+            keyStatus.source === 'env' ? 'bg-blue-500/20 text-blue-600 dark:text-blue-300' : 'bg-emerald-500/20 text-emerald-600 dark:text-emerald-300',
+          )}>{keyStatus.source === 'env' ? 'from env' : 'saved'}</span>
+        )}
+        <span className="ml-auto text-[10px] text-muted-foreground font-mono">{keyStatus.envVar}</span>
+      </div>
+      {editing ? (
+        <div className="flex gap-2 mt-2">
+          <div className="relative flex-1">
+            <Input type={show ? 'text' : 'password'} value={value} onChange={(e) => setValue(e.target.value)}
+              placeholder="Paste your API key…" className="pr-8 text-xs font-mono" autoFocus />
+            <Button type="button" variant="ghost" size="icon" className="absolute right-0 top-0 h-full px-2 hover:bg-transparent" onClick={() => setShow((v) => !v)}>
+              {show ? <EyeOff className="size-3.5" /> : <Eye className="size-3.5" />}
+            </Button>
+          </div>
+          <Button size="sm" onClick={save} disabled={saving || !value.trim()}>{saving ? <Loader2 className="size-3.5 animate-spin" /> : 'Save'}</Button>
+          <Button size="sm" variant="ghost" onClick={() => { setEditing(false); setValue(''); }}>Cancel</Button>
+        </div>
+      ) : (
+        <div className="flex items-center mt-1">
+          <p className="text-[11px] text-muted-foreground font-mono flex-1">{keyStatus.configured ? keyStatus.maskedKey : 'Not configured'}</p>
+          <Button size="sm" variant="ghost" onClick={() => setEditing(true)} className="h-7 text-xs">{keyStatus.configured ? 'Update' : 'Add'}</Button>
+          {keyStatus.configured && keyStatus.source === 'storage' && (
+            <Button size="icon" variant="ghost" onClick={remove} className="text-rose-500 hover:text-rose-600"><Trash2 className="size-3.5" /></Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================================
+// MCP servers
+// ============================================================
+
+interface McpServerRow {
+  id: string;
+  name: string;
+  transport: 'http' | 'sse' | 'stdio';
+  url?: string;
+  headers?: Record<string, string>;
+  command?: string;
+  args?: string[];
+  enabled: boolean;
+  createdAt: string;
+}
+
+function McpSection() {
+  const [rows, setRows] = useState<McpServerRow[]>([]);
+  const [adding, setAdding] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      const r = await jsonFetch<{ servers: McpServerRow[] }>('/api/mcp');
+      setRows(r.servers || []);
+    } finally { setLoading(false); }
+  }, []);
+  useEffect(() => { refresh(); }, [refresh]);
+  return (
+    <section>
+      <div className="flex items-center justify-between mb-3">
+        <SectionHeader
+          title="MCP integrations"
+          description={'Model Context Protocol servers. Each adds tools to every agent under "mcp_<name>_<tool>" on the next turn.'}
+        />
+        <Button size="sm" variant="outline" onClick={() => setAdding((v) => !v)}>
+          <Plus className="size-3.5 mr-1" />New
+        </Button>
+      </div>
+      <p className="text-[11px] text-muted-foreground mb-3 max-w-2xl">
+        For OAuth-protected MCP servers, paste the access token as a header here:
+        <code className="px-1 rounded bg-muted ml-1">{"{ Authorization: 'Bearer <your-token>' }"}</code>.
+        For unauthed servers, leave headers empty. Use <strong>Test</strong> to confirm the server is reachable.
+      </p>
+      {adding && <McpForm onCancel={() => setAdding(false)} onSaved={() => { setAdding(false); refresh(); }} />}
+      {loading ? <div className="flex items-center justify-center py-8"><Loader2 className="size-4 animate-spin text-muted-foreground" /></div>
+        : rows.length === 0 ? <p className="text-xs text-muted-foreground italic px-1">No MCP servers configured.</p>
+        : <div className="space-y-2">{rows.map((r) => <McpRowView key={r.id} row={r} onChange={refresh} />)}</div>}
+    </section>
+  );
+}
+
+function McpForm({ initial, onCancel, onSaved }: { initial?: Partial<McpServerRow>; onCancel: () => void; onSaved: () => void }) {
+  const [name, setName] = useState(initial?.name || '');
+  const [transport, setTransport] = useState<'http' | 'sse' | 'stdio'>((initial?.transport as any) || 'http');
+  const [url, setUrl] = useState(initial?.url || '');
+  const [headersText, setHeadersText] = useState(initial?.headers ? JSON.stringify(initial.headers, null, 2) : '');
+  const [command, setCommand] = useState(initial?.command || '');
+  const [argsText, setArgsText] = useState(initial?.args?.join(' ') || '');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const save = async () => {
+    setError(null);
+    let headers: Record<string, string> | undefined;
+    if (headersText.trim()) {
+      try {
+        const parsed = JSON.parse(headersText);
+        if (parsed && typeof parsed === 'object') headers = parsed as Record<string, string>;
+      } catch {
+        setError('Headers must be valid JSON, e.g. {"Authorization":"Bearer xxx"}');
+        return;
+      }
+    }
+    setSaving(true);
+    try {
+      const body: any = { name, transport, enabled: true };
+      if (transport === 'http' || transport === 'sse') { body.url = url; if (headers) body.headers = headers; }
+      if (transport === 'stdio') { body.command = command; body.args = argsText.split(/\s+/).filter(Boolean); }
+      if (initial?.id) {
+        await jsonFetch(`/api/mcp/${initial.id}`, { method: 'PATCH', body: JSON.stringify(body) });
+      } else {
+        await jsonFetch('/api/mcp', { method: 'POST', body: JSON.stringify(body) });
+      }
+      onSaved();
+    } catch (err: any) {
+      setError(err?.message || 'Save failed');
+    } finally { setSaving(false); }
+  };
+
+  return (
+    <div className="rounded-lg border border-border/60 bg-card/40 p-3 mb-3 space-y-2">
+      <div className="grid grid-cols-3 gap-2">
+        <div className="col-span-2">
+          <Label className="text-xs">Name</Label>
+          <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="github" className="text-xs" />
+          <p className="text-[10px] text-muted-foreground mt-0.5">Used as a tool prefix (e.g. <code>mcp_github_search</code>).</p>
+        </div>
+        <div>
+          <Label className="text-xs">Transport</Label>
+          <select value={transport} onChange={(e) => setTransport(e.target.value as any)} className="w-full text-xs h-9 rounded-md border border-input bg-background px-2">
+            <option value="http">HTTP (recommended)</option>
+            <option value="sse">SSE</option>
+            <option value="stdio">stdio (local)</option>
+          </select>
+        </div>
+      </div>
+      {transport !== 'stdio' ? (
+        <>
+          <div>
+            <Label className="text-xs">URL</Label>
+            <Input value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://your-server.com/mcp" className="text-xs font-mono" />
+          </div>
+          <div>
+            <Label className="text-xs">Headers (JSON, optional)</Label>
+            <textarea value={headersText} onChange={(e) => setHeadersText(e.target.value)}
+              rows={3} placeholder={'{ "Authorization": "Bearer xxx" }'}
+              className="w-full rounded-md border border-input bg-background px-2 py-1.5 text-xs font-mono" />
+          </div>
+        </>
+      ) : (
+        <>
+          <div>
+            <Label className="text-xs">Command</Label>
+            <Input value={command} onChange={(e) => setCommand(e.target.value)} placeholder="node" className="text-xs font-mono" />
+          </div>
+          <div>
+            <Label className="text-xs">Args (space separated)</Label>
+            <Input value={argsText} onChange={(e) => setArgsText(e.target.value)} placeholder="src/stdio/dist/server.js" className="text-xs font-mono" />
+          </div>
+        </>
+      )}
+      {error && <p className="text-[11px] text-rose-500">{error}</p>}
+      <div className="flex gap-2 pt-1">
+        <Button size="sm" onClick={save} disabled={saving || !name || (transport !== 'stdio' ? !url : !command)}>
+          {saving ? <Loader2 className="size-3.5 animate-spin" /> : 'Save'}
+        </Button>
+        <Button size="sm" variant="ghost" onClick={onCancel}>Cancel</Button>
+      </div>
+    </div>
+  );
+}
+
+function McpRowView({ row, onChange }: { row: McpServerRow; onChange: () => void }) {
+  const [testResult, setTestResult] = useState<null | { ok: boolean; error?: string; toolCount?: number; toolNames?: string[] }>(null);
+  const [testing, setTesting] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const toggle = async () => {
+    await jsonFetch(`/api/mcp/${row.id}`, { method: 'PATCH', body: JSON.stringify({ enabled: !row.enabled }) });
+    onChange();
+  };
+  const remove = async () => {
+    if (!confirm(`Delete MCP server "${row.name}"?`)) return;
+    await jsonFetch(`/api/mcp/${row.id}`, { method: 'DELETE' });
+    onChange();
+  };
+  const test = async () => {
+    setTesting(true); setTestResult(null);
+    try {
+      const r = await jsonFetch<any>(`/api/mcp/${row.id}/test`, { method: 'POST' });
+      setTestResult(r);
+    } finally { setTesting(false); }
+  };
+  if (editing) {
+    return <McpForm initial={row} onCancel={() => setEditing(false)} onSaved={() => { setEditing(false); onChange(); }} />;
+  }
+  return (
+    <div className="rounded-md border border-border/60 bg-background/50 p-3">
+      <div className="flex items-center gap-2">
+        <Plug className={cn('size-4', row.enabled ? 'text-emerald-500' : 'text-muted-foreground')} />
+        <span className="text-sm font-medium">{row.name}</span>
+        <span className="text-[10px] uppercase tracking-wide text-muted-foreground">{row.transport}</span>
+        {!row.enabled && <span className="text-[10px] uppercase tracking-wide text-muted-foreground">disabled</span>}
+        <span className="ml-auto text-[11px] text-muted-foreground font-mono break-all">
+          tool prefix: <code>mcp_{row.name}_*</code>
+        </span>
+      </div>
+      <p className="text-[11px] text-muted-foreground mt-1 break-all">
+        {row.transport === 'stdio' ? <>cmd: <code>{row.command} {row.args?.join(' ')}</code></> : <>url: <code>{row.url}</code></>}
+        {row.headers && Object.keys(row.headers).length > 0 && (
+          <span className="ml-2">headers: {Object.entries(row.headers).map(([k, v]) => `${k}: ${v}`).join(', ')}</span>
+        )}
+      </p>
+      <div className="flex gap-1 mt-2">
+        <Button size="sm" variant="outline" onClick={test} disabled={testing}>
+          {testing ? <Loader2 className="size-3 animate-spin mr-1" /> : null}Test
+        </Button>
+        <Button size="sm" variant="outline" onClick={toggle}>{row.enabled ? 'Disable' : 'Enable'}</Button>
+        <Button size="sm" variant="ghost" onClick={() => setEditing(true)}>Edit</Button>
+        <Button size="sm" variant="ghost" onClick={remove} className="text-rose-500 hover:text-rose-600 ml-auto">
+          <Trash2 className="size-3.5" />
+        </Button>
+      </div>
+      {testResult && (
+        <div className={cn('mt-2 rounded border p-2 text-[11px]', testResult.ok ? 'border-emerald-500/40 bg-emerald-500/5' : 'border-rose-500/40 bg-rose-500/5')}>
+          {testResult.ok ? (
+            <>
+              <p className="text-emerald-500">✓ Connected — {testResult.toolCount} tool(s) discovered</p>
+              {testResult.toolNames && testResult.toolNames.length > 0 && (
+                <p className="text-muted-foreground font-mono mt-0.5 break-all">{testResult.toolNames.join(', ')}</p>
+              )}
+            </>
+          ) : (
+            <p className="text-rose-500">✗ {testResult.error}</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================================
+// Shared shell
+// ============================================================
+
+function Card({ children }: { children: React.ReactNode }) {
+  return <div className="rounded-lg border border-border/60 bg-card/40 p-4">{children}</div>;
+}
+function CardHeader({ icon, title, status, statusTone }: { icon: React.ReactNode; title: string; status: string; statusTone: string }) {
+  return (
+    <div className="flex items-center gap-2 mb-3">
+      {icon}
+      <h3 className="font-medium">{title}</h3>
+      <span className={cn('ml-auto text-xs', statusTone)}>{status}</span>
+    </div>
+  );
+}