slackhive 0.1.40 → 0.1.42

package/apps/web/src/app/agents/[slug]/page.tsx

@@ -1,2235 +0,0 @@
-'use client';
-
-/**
- * @fileoverview Agent detail page — tabbed control panel.
- *
- * Tabs: Overview · Skills · MCPs · Permissions · Memory · Logs
- *
- * Route: /agents/[slug]
- * @module web/app/agents/[slug]
- */
-
-import React, { useEffect, useState, useRef, use } from 'react';
-import { Brain, Camera, Clock, History, Upload, Download } from 'lucide-react';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import type { Agent, Skill, McpServer, Memory, Permission, Restriction, AgentSnapshot } from '@slackhive/shared';
-import { Portal } from '@/lib/portal';
-import { useAuth } from '@/lib/auth-context';
-import { lineDiff, type DiffLine } from '@/lib/diff';
-
-type Tab = 'overview' | 'skills' | 'claude-md' | 'mcps' | 'permissions' | 'memory' | 'logs' | 'history';
-
-interface AgentExportPayload {
-  version: number;
-  exportedAt?: string;
-  claudeMd: string;
-  skills: { category: string; filename: string; content: string; sortOrder: number }[];
-}
-
-const TABS: { id: Tab; label: string }[] = [
-  { id: 'overview',     label: 'Overview'     },
-  { id: 'skills',       label: 'Skills'       },
-  { id: 'claude-md',    label: 'System Prompt' },
-  { id: 'mcps',         label: 'MCPs'          },
-  { id: 'permissions',  label: 'Tools'         },
-  { id: 'memory',       label: 'Memory'       },
-  { id: 'logs',         label: 'Logs'         },
-  { id: 'history',      label: 'History'      },
-];
-
-const STATUS_COLOR = { running: '#16a34a', stopped: 'var(--border-2)', error: '#ef4444' } as const;
-
-// ─── Page ─────────────────────────────────────────────────────────────────────
-
-/**
- * Agent detail page — loads the agent by slug then renders the tabbed UI.
- *
- * @param {{ params: Promise<{ slug: string }> }} props
- */
-export default function AgentPage({ params }: { params: Promise<{ slug: string }> }) {
-  const { slug } = use(params);
-  const { role, canManageUsers } = useAuth();
-  const [agent, setAgent] = useState<Agent | null>(null);
-  const [allAgents, setAllAgents] = useState<Agent[]>([]);
-  const [canEdit, setCanEdit] = useState(false);
-  const [tab, setTab] = useState<Tab>('overview');
-  const [loading, setLoading] = useState(true);
-  const [actionMsg, setActionMsg] = useState('');
-  const [exporting, setExporting] = useState(false);
-  const [importPreview, setImportPreview] = useState<AgentExportPayload | null>(null);
-  const [importing, setImporting] = useState(false);
-  const [importError, setImportError] = useState('');
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    fetch('/api/agents')
-      .then(r => r.json())
-      .then((agents: Agent[]) => {
-        setAllAgents(agents);
-        const found = agents.find(a => a.slug === slug) ?? null;
-        setAgent(found);
-        if (found) {
-          if (role === 'admin' || role === 'superadmin') {
-            setCanEdit(true);
-          } else if (role === 'editor' || role === 'viewer') {
-            fetch(`/api/agents/${found.id}/access`)
-              .then(r => r.json())
-              .then(data => setCanEdit(role === 'editor' && (data.canWrite ?? false)));
-          }
-        }
-      })
-      .finally(() => setLoading(false));
-  }, [slug, role]);
-
-  const triggerAction = async (action: 'start' | 'stop' | 'reload') => {
-    if (!agent) return;
-    setActionMsg(action === 'start' ? 'Starting…' : action === 'stop' ? 'Stopping…' : 'Reloading…');
-    await fetch(`/api/agents/${agent.id}/${action}`, { method: 'POST' });
-    const r = await fetch(`/api/agents/${agent.id}`);
-    setAgent(await r.json());
-    setActionMsg('Done');
-    setTimeout(() => setActionMsg(''), 2000);
-  };
-
-  const handleExport = async () => {
-    if (!agent) return;
-    setExporting(true);
-    try {
-      const [skillsRes, mdRes] = await Promise.all([
-        fetch(`/api/agents/${agent.id}/skills`),
-        fetch(`/api/agents/${agent.id}/claude-md`),
-      ]);
-      const skills: Skill[] = await skillsRes.json();
-      const claudeMd = await mdRes.text();
-      const payload: AgentExportPayload = {
-        version: 1,
-        exportedAt: new Date().toISOString(),
-        claudeMd,
-        skills: skills.map(s => ({ category: s.category, filename: s.filename, content: s.content, sortOrder: s.sortOrder })),
-      };
-      const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url; a.download = `${agent.slug}-export.json`; a.click();
-      URL.revokeObjectURL(url);
-    } finally { setExporting(false); }
-  };
-
-  const handleImportFile = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    e.target.value = '';
-    setImportError('');
-    const reader = new FileReader();
-    reader.onload = (ev) => {
-      try {
-        const data = JSON.parse(ev.target?.result as string);
-        if (typeof data.claudeMd !== 'string' || !Array.isArray(data.skills)) {
-          setImportError('Invalid export file'); return;
-        }
-        setImportPreview(data);
-      } catch { setImportError('Could not parse file'); }
-    };
-    reader.readAsText(file);
-  };
-
-  const applyImport = async () => {
-    if (!agent || !importPreview) return;
-    setImporting(true);
-    try {
-      await fetch(`/api/agents/${agent.id}/claude-md`, {
-        method: 'PUT', headers: { 'Content-Type': 'text/plain' },
-        body: importPreview.claudeMd,
-      });
-      await Promise.all(importPreview.skills.map(s =>
-        fetch(`/api/agents/${agent.id}/skills?noSnapshot=1`, {
-          method: 'POST', headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(s),
-        })
-      ));
-      const updated = await fetch(`/api/agents/${agent.id}`).then(r => r.json());
-      setAgent(updated);
-      setImportPreview(null);
-    } finally { setImporting(false); }
-  };
-
-  if (loading) return <PageLoader />;
-  if (!agent)  return <NotFound slug={slug} />;
-
-  const statusColor = STATUS_COLOR[agent.status] ?? 'var(--border-2)';
-
-  return (
-    <div style={{ minHeight: '100vh' }} className="fade-up">
-
-      {/* ── Top bar ──────────────────────────────────────────────────────── */}
-      <div style={{
-        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-        padding: '28px 40px 0',
-        borderBottom: '1px solid var(--border)',
-        paddingBottom: 0,
-        flexWrap: 'wrap', gap: 12,
-      }}>
-        <div>
-          {/* Breadcrumb */}
-          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10, fontSize: 12, color: 'var(--muted)' }}>
-            <Link href="/" style={{ color: 'var(--muted)', textDecoration: 'none' }}>Agents</Link>
-            <span style={{ color: 'var(--subtle)' }}>/</span>
-            <span style={{ color: 'var(--text)' }}>{agent.name}</span>
-          </div>
-
-          {/* Agent name + status */}
-          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
-            <div style={{
-              width: 36, height: 36, borderRadius: 10, flexShrink: 0,
-              background: agent.isBoss
-                ? 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)'
-                : 'linear-gradient(135deg, #3b82f6 0%, #6366f1 100%)',
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-              fontSize: 14, fontWeight: 700, color: '#fff',
-            }}>
-              {agent.name.charAt(0)}
-            </div>
-            <div>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                <h1 style={{ margin: 0, fontSize: 18, fontWeight: 600, letterSpacing: '-0.02em', color: 'var(--text)' }}>
-                  {agent.name}
-                </h1>
-                {agent.isBoss && (
-                  <span style={{
-                    fontSize: 10, fontWeight: 600, letterSpacing: '0.06em',
-                    background: 'rgba(245,158,11,0.15)', color: '#f59e0b',
-                    padding: '2px 7px', borderRadius: 5,
-                    border: '1px solid rgba(245,158,11,0.25)',
-                    textTransform: 'uppercase',
-                  }}>Boss</span>
-                )}
-                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                  <div
-                    className={agent.status === 'running' ? 'status-running' : ''}
-                    style={{ width: 7, height: 7, borderRadius: '50%', background: statusColor }}
-                  />
-                  <span style={{ fontSize: 12, color: statusColor, fontWeight: 500, textTransform: 'capitalize' }}>
-                    {agent.status}
-                  </span>
-                </div>
-              </div>
-              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--muted)', marginTop: 1 }}>
-                @{agent.slug} · {agent.model.replace('claude-', '').split('-20')[0]}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Controls */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingBottom: 16 }}>
-          {actionMsg && <span style={{ fontSize: 12, color: 'var(--muted)' }}>{actionMsg}</span>}
-          {importError && <span style={{ fontSize: 12, color: 'var(--danger)' }}>{importError}</span>}
-
-          {/* Export / Import icon buttons */}
-          <IconBtn title="Export config" onClick={handleExport} loading={exporting}>
-            <Download size={15} />
-          </IconBtn>
-          {canEdit && (
-            <IconBtn title="Import config" onClick={() => fileInputRef.current?.click()}>
-              <Upload size={15} />
-            </IconBtn>
-          )}
-          <input ref={fileInputRef} type="file" accept=".json" style={{ display: 'none' }} onChange={handleImportFile} />
-
-          <div style={{ width: 1, height: 20, background: 'var(--border)', margin: '0 2px' }} />
-
-          {canEdit && agent.status !== 'running' && (
-            <Btn color="#22c55e" onClick={() => triggerAction('start')}>Start</Btn>
-          )}
-          {canEdit && agent.status === 'running' && (
-            <Btn color="var(--border-2)" textColor="var(--muted)" onClick={() => triggerAction('reload')}>Reload</Btn>
-          )}
-          {canEdit && agent.status === 'running' && (
-            <Btn color="#ef4444" onClick={() => triggerAction('stop')}>Stop</Btn>
-          )}
-        </div>
-      </div>
-
-      {/* Import confirmation modal */}
-      {importPreview && (
-        <Portal>
-          <div style={{
-            position: 'fixed', inset: 0, zIndex: 1000,
-            background: 'rgba(0,0,0,0.45)', backdropFilter: 'blur(4px)',
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-          }} onClick={() => setImportPreview(null)}>
-            <div style={{
-              background: '#fff', borderRadius: 14, padding: '28px 32px',
-              maxWidth: 480, width: '90%',
-              boxShadow: '0 20px 60px rgba(0,0,0,0.15)',
-            }} onClick={e => e.stopPropagation()}>
-              <h3 style={{ margin: '0 0 16px', fontSize: 16, fontWeight: 700, color: 'var(--text)', letterSpacing: '-0.02em' }}>
-                Import agent config
-              </h3>
-
-              {/* Danger warning — shown first */}
-              <div style={{
-                display: 'flex', gap: 10, padding: '12px 14px', marginBottom: 16,
-                background: '#fff1f2', border: '1.5px solid #fecdd3', borderRadius: 8,
-              }}>
-                <span style={{ fontSize: 16, flexShrink: 0 }}>⚠️</span>
-                <div>
-                  <div style={{ fontSize: 13, fontWeight: 600, color: '#be123c', marginBottom: 2 }}>
-                    This will overwrite current CLAUDE.md and skills
-                  </div>
-                  <div style={{ fontSize: 12, color: '#9f1239' }}>
-                    Existing CLAUDE.md will be replaced. Skills with matching category/filename will be overwritten. A snapshot is saved automatically before applying.
-                  </div>
-                </div>
-              </div>
-
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 20 }}>
-                {importPreview.exportedAt && <InfoRow label="Exported at" value={new Date(importPreview.exportedAt).toLocaleString()} />}
-                <InfoRow label="Skills" value={`${importPreview.skills.length} skill${importPreview.skills.length !== 1 ? 's' : ''} will be upserted`} />
-              </div>
-              <div style={{ display: 'flex', gap: 10 }}>
-                <PrimaryBtn onClick={applyImport} loading={importing}>Apply Import</PrimaryBtn>
-                <GhostBtn onClick={() => setImportPreview(null)}>Cancel</GhostBtn>
-              </div>
-            </div>
-          </div>
-        </Portal>
-      )}
-
-      {/* ── Tab bar ──────────────────────────────────────────────────────── */}
-      <div style={{
-        display: 'flex', gap: 0, padding: '0 36px',
-        borderBottom: '1px solid var(--border)',
-        background: 'var(--surface)',
-        overflowX: 'auto', WebkitOverflowScrolling: 'touch',
-      }}>
-        {TABS.map(t => (
-          <button
-            key={t.id}
-            onClick={() => setTab(t.id)}
-            className={tab === t.id ? 'tab-active' : ''}
-            style={{
-              background: 'none', border: 'none', cursor: 'pointer',
-              padding: '10px 14px', fontSize: 13,
-              color: tab === t.id ? 'var(--text)' : 'var(--muted)',
-              fontWeight: tab === t.id ? 500 : 400,
-              transition: 'color 0.15s',
-              fontFamily: 'var(--font-sans)',
-            }}
-          >
-            {t.label}
-          </button>
-        ))}
-      </div>
-
-      {/* ── Tab content ──────────────────────────────────────────────────── */}
-      <div style={{ padding: '28px 36px' }}>
-        {tab === 'overview'    && <OverviewTab    agent={agent} onUpdate={setAgent} canEdit={canEdit} allAgents={allAgents} role={role} />}
-        {tab === 'skills'      && <SkillsTab      agentId={agent.id} canEdit={canEdit} />}
-        {tab === 'claude-md'   && <ClaudeMdTab    agentId={agent.id} canEdit={canEdit} />}
-        {tab === 'mcps'        && <McpsTab        agentId={agent.id} canEdit={canEdit} />}
-        {tab === 'permissions' && <PermissionsTab agentId={agent.id} canEdit={canEdit} />}
-        {tab === 'memory'      && <MemoryTab      agentId={agent.id} canEdit={canEdit} />}
-        {tab === 'logs'        && <LogsTab        agentId={agent.id} slug={agent.slug} />}
-        {tab === 'history'     && <HistoryTab     agentId={agent.id} canEdit={canEdit} />}
-      </div>
-    </div>
-  );
-}
-
-// ─── Overview ─────────────────────────────────────────────────────────────────
-
-function OverviewTab({ agent, onUpdate, canEdit, allAgents, role }: { agent: Agent; onUpdate: (a: Agent) => void; canEdit: boolean; allAgents: Agent[]; role: string | null }) {
-  const [form, setForm] = useState({
-    name:               agent.name,
-    description:        agent.description ?? '',
-    persona:            agent.persona ?? '',
-    model:              agent.model,
-    slackBotToken:      agent.slackBotToken,
-    slackAppToken:      agent.slackAppToken,
-    slackSigningSecret: agent.slackSigningSecret,
-    isBoss:             agent.isBoss,
-    reportsTo:          agent.reportsTo ?? [] as string[],
-  });
-  const [saving, setSaving]             = useState(false);
-  const [msg, setMsg]                   = useState('');
-  const [manifest, setManifest]         = useState('');
-  const [showManifest, setShowManifest] = useState(false);
-  const [deleting, setDeleting]         = useState(false);
-  const [slackInfo, setSlackInfo]       = useState<{ displayName: string; handle: string; teamName: string } | null>(null);
-  const router = useRouter();
-
-  useEffect(() => {
-    if (!agent.slackBotToken) return;
-    fetch(`/api/agents/${agent.id}/slack-info`)
-      .then(r => r.ok ? r.json() : null)
-      .then(d => d && setSlackInfo(d))
-      .catch(() => {});
-  }, [agent.id, agent.slackBotToken]);
-
-  // Channel restrictions state
-  const [allowedChannels, setAllowedChannels] = useState('');
-
-  useEffect(() => {
-    fetch(`/api/agents/${agent.id}/restrictions`)
-      .then(r => r.json())
-      .then((d: Restriction) => setAllowedChannels((d.allowedChannels ?? []).join('\n')));
-  }, [agent.id]);
-
-  const save = async () => {
-    setSaving(true);
-    try {
-      const [r] = await Promise.all([
-        fetch(`/api/agents/${agent.id}`, {
-          method: 'PATCH', headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(form),
-        }),
-        fetch(`/api/agents/${agent.id}/restrictions`, {
-          method: 'PUT', headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ allowedChannels: allowedChannels.split('\n').map(s => s.trim()).filter(Boolean) }),
-        }),
-      ]);
-      const data = await r.json();
-      if (r.ok) { onUpdate(data); setMsg('Saved'); } else setMsg(data.error ?? 'Error');
-    } finally { setSaving(false); setTimeout(() => setMsg(''), 3000); }
-  };
-
-  const loadManifest = async () => {
-    const r = await fetch(`/api/agents/${agent.id}/manifest`);
-    setManifest(JSON.stringify(await r.json(), null, 2));
-    setShowManifest(true);
-  };
-
-  const handleDelete = async () => {
-    if (!confirm(`Permanently delete agent "${agent.name}"? This cannot be undone.`)) return;
-    setDeleting(true);
-    const r = await fetch(`/api/agents/${agent.id}`, { method: 'DELETE' });
-    if (r.ok) {
-      router.push('/');
-    } else {
-      const err = await r.json();
-      setMsg(err.error ?? 'Delete failed');
-      setDeleting(false);
-    }
-  };
-
-  const isAdmin = role === 'admin' || role === 'superadmin';
-
-  return (
-    <div style={{ maxWidth: 640 }} className="fade-up">
-      <Section title="Identity">
-        <Grid2>
-          <Field label="Name" value={form.name} onChange={v => setForm(f => ({ ...f, name: v }))} readOnly={!canEdit}
-            hint="This is the internal agent name. To update the Slack bot display name, change it in your Slack App settings → App Home." />
-          <Field label="Model" value={form.model} onChange={v => setForm(f => ({ ...f, model: v }))}
-            hint="claude-opus-4-6 · claude-sonnet-4-6 · claude-haiku-4-5-20251001" readOnly={!canEdit} />
-        </Grid2>
-        <Field label="Description" value={form.description}
-          onChange={v => setForm(f => ({ ...f, description: v }))}
-          hint="Shown to the boss agent for delegation decisions." readOnly={!canEdit} />
-        <TextArea label="Persona" value={form.persona}
-          onChange={v => setForm(f => ({ ...f, persona: v }))}
-          hint="Injected into CLAUDE.md — who is this agent?" rows={4} readOnly={!canEdit} />
-      </Section>
-
-      <Section title="Role & Hierarchy">
-        {/* Boss toggle */}
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
-          <div>
-            <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text)', marginBottom: 2 }}>Boss Agent</div>
-            <div style={{ fontSize: 12, color: 'var(--muted)' }}>Boss agents orchestrate other agents and delegate tasks</div>
-          </div>
-          <button
-            disabled={!canEdit}
-            onClick={() => setForm(f => ({ ...f, isBoss: !f.isBoss }))}
-            style={{
-              width: 44, height: 24, borderRadius: 12, border: 'none',
-              background: form.isBoss ? '#d97706' : 'var(--border-2)',
-              cursor: canEdit ? 'pointer' : 'default',
-              position: 'relative', transition: 'background 0.2s', flexShrink: 0,
-            }}
-          >
-            <div style={{
-              position: 'absolute', top: 3, left: form.isBoss ? 23 : 3,
-              width: 18, height: 18, borderRadius: '50%', background: '#fff',
-              transition: 'left 0.2s', boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
-            }} />
-          </button>
-        </div>
-
-        {/* Reports To — only show for non-boss agents */}
-        {!form.isBoss && (() => {
-          const bosses = allAgents.filter(a => a.isBoss && a.id !== agent.id);
-          if (bosses.length === 0) return (
-            <div style={{ fontSize: 12, color: 'var(--subtle)', fontStyle: 'italic' }}>
-              No boss agents available. Create a boss agent first.
-            </div>
-          );
-          return (
-            <div>
-              <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--text)', marginBottom: 6 }}>Reports To</div>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-                {bosses.map(boss => {
-                  const checked = form.reportsTo.includes(boss.id);
-                  return (
-                    <label key={boss.id} style={{
-                      display: 'flex', alignItems: 'center', gap: 10,
-                      padding: '8px 12px', borderRadius: 8,
-                      border: `1px solid ${checked ? 'rgba(217,119,6,0.3)' : 'var(--border)'}`,
-                      background: checked ? 'rgba(217,119,6,0.04)' : 'var(--surface)',
-                      cursor: canEdit ? 'pointer' : 'default',
-                      transition: 'all 0.15s',
-                    }}>
-                      <input
-                        type="checkbox"
-                        checked={checked}
-                        disabled={!canEdit}
-                        onChange={() => setForm(f => ({
-                          ...f,
-                          reportsTo: checked
-                            ? f.reportsTo.filter(id => id !== boss.id)
-                            : [...f.reportsTo, boss.id],
-                        }))}
-                        style={{ accentColor: '#d97706', width: 14, height: 14 }}
-                      />
-                      <div style={{
-                        width: 24, height: 24, borderRadius: 6, background: '#171717',
-                        display: 'flex', alignItems: 'center', justifyContent: 'center',
-                        fontSize: 11, fontWeight: 600, color: '#fff', flexShrink: 0,
-                      }}>
-                        {boss.name.charAt(0).toUpperCase()}
-                      </div>
-                      <div style={{ minWidth: 0 }}>
-                        <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text)' }}>{boss.name}</div>
-                        <div style={{ fontSize: 11, color: 'var(--muted)', fontFamily: 'var(--font-mono)' }}>@{boss.slug}</div>
-                      </div>
-                      {checked && (
-                        <span style={{
-                          marginLeft: 'auto', fontSize: 10, fontWeight: 600,
-                          color: '#d97706', letterSpacing: '0.04em', textTransform: 'uppercase',
-                        }}>Reports to</span>
-                      )}
-                    </label>
-                  );
-                })}
-              </div>
-              <div style={{ fontSize: 11.5, color: 'var(--subtle)', marginTop: 8 }}>
-                An agent can report to multiple bosses.
-              </div>
-            </div>
-          );
-        })()}
-      </Section>
-
-      <Section title="Slack Credentials">
-        <Field label="Bot Token" value={form.slackBotToken}
-          onChange={v => setForm(f => ({ ...f, slackBotToken: v }))} type="password" readOnly={!canEdit}
-          hint={<>api.slack.com/apps → your app → <strong>OAuth &amp; Permissions</strong> → Bot User OAuth Token</>} />
-        <Field label="App-Level Token" value={form.slackAppToken}
-          onChange={v => setForm(f => ({ ...f, slackAppToken: v }))} type="password" readOnly={!canEdit}
-          hint={<>Basic Information → <strong>App-Level Tokens</strong> → Generate with scope <code style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>connections:write</code></>} />
-        <Field label="Signing Secret" value={form.slackSigningSecret}
-          onChange={v => setForm(f => ({ ...f, slackSigningSecret: v }))} type="password" readOnly={!canEdit}
-          hint="Basic Information → App Credentials → Signing Secret" />
-        {slackInfo && (
-          <div style={{
-            background: '#f0fdf4', border: '1px solid #bbf7d0',
-            borderRadius: 7, padding: '10px 14px', fontSize: 12,
-          }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
-              <div style={{ width: 7, height: 7, borderRadius: '50%', background: '#16a34a', flexShrink: 0 }} />
-              <span style={{ color: '#15803d', fontWeight: 600 }}>Connected to Slack</span>
-              <span style={{ color: '#86efac', marginLeft: 'auto', fontSize: 11 }}>{slackInfo.teamName}</span>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: 'max-content 1fr', gap: '4px 16px' }}>
-              <span style={{ color: '#6b7280' }}>Display name</span>
-              <span style={{ color: '#166534', fontWeight: 500 }}>{slackInfo.displayName}</span>
-              <span style={{ color: '#6b7280' }}>@handle</span>
-              <span style={{ color: '#166534', fontFamily: 'var(--font-mono)' }}>@{slackInfo.handle}</span>
-              {agent.slackBotUserId && <>
-                <span style={{ color: '#6b7280' }}>Bot User ID</span>
-                <span style={{ color: '#166534', fontFamily: 'var(--font-mono)' }}>{agent.slackBotUserId}</span>
-              </>}
-            </div>
-          </div>
-        )}
-        {!slackInfo && agent.slackBotUserId && (
-          <div style={{
-            display: 'flex', alignItems: 'center', gap: 8,
-            background: '#f0fdf4', border: '1px solid #bbf7d0',
-            borderRadius: 7, padding: '8px 12px', fontSize: 12,
-          }}>
-            <div style={{ width: 7, height: 7, borderRadius: '50%', background: '#16a34a', flexShrink: 0 }} />
-            <span style={{ color: '#15803d' }}>Connected ·</span>
-            <span style={{ color: '#166534', fontFamily: 'var(--font-mono)' }}>Bot User ID: {agent.slackBotUserId}</span>
-          </div>
-        )}
-      </Section>
-
-      <Section title="Allowed Channels">
-        <p style={{ margin: '0 0 10px', fontSize: 12.5, color: 'var(--muted)', lineHeight: 1.6 }}>
-          Restrict this bot to specific Slack channels. Enter one Slack channel ID per line (e.g. <code style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>C01234ABCDE</code>).
-          If empty, the bot responds in all channels it's invited to.
-          When invited to a non-allowed channel, it will post a notice and leave automatically.
-          Bot-initiated messages from scheduled jobs are not affected.
-        </p>
-        <textarea
-          value={allowedChannels}
-          onChange={e => setAllowedChannels(e.target.value)}
-          rows={4}
-          readOnly={!canEdit}
-          placeholder={'C01234ABCDE\nC09876ZYXWV'}
-          style={{
-            width: '100%', background: 'var(--surface)', border: '1px solid var(--border)',
-            borderRadius: 8, padding: '10px 12px', color: 'var(--text)',
-            fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.7,
-            outline: 'none', resize: 'vertical', boxSizing: 'border-box',
-          }}
-          onFocus={e => (e.currentTarget.style.borderColor = 'var(--accent)')}
-          onBlur={e => (e.currentTarget.style.borderColor = 'var(--border)')}
-        />
-      </Section>
-
-      <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
-        {canEdit && <PrimaryBtn onClick={save} loading={saving}>Save Changes</PrimaryBtn>}
-        <GhostBtn onClick={loadManifest}>View Slack Manifest</GhostBtn>
-        {msg && <span style={{ fontSize: 12, color: '#16a34a' }}>{msg}</span>}
-      </div>
-
-      {showManifest && (
-        <div style={{
-          marginTop: 20, background: 'var(--surface-2)',
-          border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden',
-        }}>
-          <div style={{
-            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
-            padding: '10px 16px', borderBottom: '1px solid var(--border)',
-            background: 'var(--surface-2)',
-          }}>
-            <span style={{ fontSize: 11.5, color: 'var(--muted)', fontFamily: 'var(--font-mono)' }}>
-              slack-manifest.json
-            </span>
-            <button
-              onClick={() => navigator.clipboard.writeText(manifest)}
-              style={{ fontSize: 11.5, color: 'var(--accent)', background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-sans)' }}
-            >Copy</button>
-          </div>
-          <pre style={{
-            margin: 0, padding: '16px', fontSize: 11.5, color: 'var(--accent)',
-            fontFamily: 'var(--font-mono)', overflow: 'auto', maxHeight: 320,
-          }}>{manifest}</pre>
-        </div>
-      )}
-
-      {/* ── Danger Zone ── */}
-      {isAdmin && (
-        <div style={{
-          marginTop: 40, borderTop: '1px solid #fecaca', paddingTop: 28,
-        }}>
-          <div style={{ fontSize: 11, fontWeight: 700, color: '#dc2626', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 16 }}>
-            Danger Zone
-          </div>
-          <div style={{
-            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-            background: '#fff8f8', border: '1px solid #fecaca', borderRadius: 8, padding: '14px 18px',
-          }}>
-            <div>
-              <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text)', marginBottom: 3 }}>Delete this agent</div>
-              <div style={{ fontSize: 12, color: 'var(--muted)' }}>Permanently removes the agent, all its skills, memories, and history. This cannot be undone.</div>
-            </div>
-            <button
-              onClick={handleDelete}
-              disabled={deleting}
-              style={{
-                flexShrink: 0, marginLeft: 24,
-                padding: '8px 18px', borderRadius: 7, border: '1px solid #dc2626',
-                background: deleting ? '#fef2f2' : '#fff', color: '#dc2626',
-                fontSize: 13, fontWeight: 600, cursor: deleting ? 'not-allowed' : 'pointer',
-                fontFamily: 'var(--font-sans)', whiteSpace: 'nowrap',
-              }}
-            >{deleting ? 'Deleting…' : 'Delete Agent'}</button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ─── CLAUDE.md viewer ─────────────────────────────────────────────────────────
-
-function ClaudeMdTab({ agentId, canEdit }: { agentId: string; canEdit: boolean }) {
-  const [content, setContent] = useState<string>('');
-  const [draft, setDraft] = useState<string>('');
-  const [editing, setEditing] = useState(false);
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [msg, setMsg] = useState('');
-
-  const load = () => {
-    setLoading(true);
-    fetch(`/api/agents/${agentId}/claude-md`)
-      .then(r => r.text())
-      .then(t => { setContent(t); setDraft(t); })
-      .catch(() => setContent('Failed to load CLAUDE.md'))
-      .finally(() => setLoading(false));
-  };
-
-  useEffect(() => { load(); }, [agentId]);
-
-  const save = async () => {
-    setSaving(true);
-    try {
-      const res = await fetch(`/api/agents/${agentId}/claude-md`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'text/plain' },
-        body: draft,
-      });
-      if (!res.ok) throw new Error(await res.text());
-      setContent(draft);
-      setEditing(false);
-      setMsg('Saved — agent will use this on next reload.');
-      setTimeout(() => setMsg(''), 4000);
-    } catch (e: any) {
-      setMsg(`Error: ${e.message}`);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  if (loading) return <p style={{ color: 'var(--muted)', fontSize: 14 }}>Loading...</p>;
-
-  return (
-    <div>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
-        <div>
-          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>CLAUDE.md</h3>
-          <p style={{ margin: '4px 0 0', fontSize: 13, color: 'var(--muted)' }}>
-            {editing ? 'Editing raw system prompt — this overrides all individual skills.' : 'Compiled system prompt sent to Claude.'}
-          </p>
-        </div>
-        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-          {!editing && (
-            <span style={{ fontSize: 12, color: 'var(--muted)', background: 'var(--surface-2)', padding: '4px 10px', borderRadius: 6, border: '1px solid var(--border)' }}>
-              {(content.length / 1024).toFixed(1)} KB · {content.split('\n').length} lines
-            </span>
-          )}
-          {editing ? (
-            <>
-              <button onClick={() => { setEditing(false); setDraft(content); }} style={{ padding: '6px 14px', borderRadius: 7, border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13, cursor: 'pointer' }}>
-                Cancel
-              </button>
-              <button onClick={save} disabled={saving} style={{ padding: '6px 16px', borderRadius: 7, border: 'none', background: 'var(--accent)', color: '#fff', fontSize: 13, fontWeight: 600, cursor: 'pointer', opacity: saving ? 0.7 : 1 }}>
-                {saving ? 'Saving…' : 'Save'}
-              </button>
-            </>
-          ) : (
-            canEdit && <button onClick={() => setEditing(true)} style={{ padding: '6px 16px', borderRadius: 7, border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13, cursor: 'pointer' }}>
-              Edit
-            </button>
-          )}
-        </div>
-      </div>
-
-      {msg && <p style={{ fontSize: 13, color: msg.startsWith('Error') ? 'var(--danger)' : 'var(--success)', marginBottom: 12 }}>{msg}</p>}
-
-      {editing ? (
-        <textarea
-          value={draft}
-          onChange={e => setDraft(e.target.value)}
-          style={{
-            width: '100%', height: '70vh', background: 'var(--surface)',
-            border: '1px solid var(--accent)', borderRadius: 10,
-            padding: '20px 24px', fontSize: 12.5, lineHeight: 1.7,
-            color: 'var(--text)', fontFamily: 'var(--font-mono)',
-            resize: 'vertical', outline: 'none', boxSizing: 'border-box',
-          }}
-        />
-      ) : (
-        <pre style={{
-          background: 'var(--surface-2)', border: '1px solid var(--border)',
-          borderRadius: 10, padding: '20px 24px', fontSize: 12.5, lineHeight: 1.7,
-          overflowX: 'auto', overflowY: 'auto', maxHeight: '70vh', margin: 0,
-          whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-          color: 'var(--text)', fontFamily: 'var(--font-mono)',
-        }}>
-          {content}
-        </pre>
-      )}
-    </div>
-  );
-}
-
-// ─── Skills ───────────────────────────────────────────────────────────────────
-
-function SkillsTab({ agentId, canEdit }: { agentId: string; canEdit: boolean }) {
-  const [skills, setSkills]     = useState<Skill[]>([]);
-  const [selected, setSelected] = useState<Skill | null>(null);
-  const [content, setContent]   = useState('');
-  const [saving, setSaving]     = useState(false);
-  const [msg, setMsg]           = useState('');
-  const [showNew, setShowNew]   = useState(false);
-  const [newSkill, setNewSkill] = useState({ category: '', filename: '', content: '' });
-
-  const load = () =>
-    fetch(`/api/agents/${agentId}/skills`).then(r => r.json()).then(setSkills);
-
-  useEffect(() => { load(); }, [agentId]);
-
-  const select = (s: Skill) => { setSelected(s); setContent(s.content); };
-
-  const save = async () => {
-    if (!selected) return;
-    setSaving(true);
-    await fetch(`/api/agents/${agentId}/skills`, {
-      method: 'POST', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ category: selected.category, filename: selected.filename, content, sortOrder: selected.sortOrder }),
-    });
-    setSaving(false); setMsg('Saved'); setTimeout(() => setMsg(''), 2000); load();
-  };
-
-  const remove = async (s: Skill) => {
-    if (!confirm(`Delete ${s.category}/${s.filename}?`)) return;
-    await fetch(`/api/agents/${agentId}/skills/${s.id}`, { method: 'DELETE' });
-    if (selected?.id === s.id) { setSelected(null); setContent(''); }
-    load();
-  };
-
-  const create = async () => {
-    if (!newSkill.category || !newSkill.filename) return;
-    await fetch(`/api/agents/${agentId}/skills`, {
-      method: 'POST', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(newSkill),
-    });
-    setShowNew(false); setNewSkill({ category: '', filename: '', content: '' }); load();
-  };
-
-  const grouped = skills.reduce<Record<string, Skill[]>>((acc, s) => {
-    (acc[s.category] ??= []).push(s); return acc;
-  }, {});
-
-  return (
-    <div className="fade-up" style={{ display: 'flex', gap: 14, height: 580 }}>
-      {/* File tree */}
-      <div style={{
-        width: 220, flexShrink: 0,
-        background: 'var(--surface)', border: '1px solid var(--border)',
-        borderRadius: 10, overflow: 'auto', display: 'flex', flexDirection: 'column',
-      }}>
-        <div style={{
-          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-          padding: '10px 12px', borderBottom: '1px solid var(--border)',
-        }}>
-          <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--muted)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>
-            Files
-          </span>
-          {canEdit && <button onClick={() => setShowNew(true)} style={{
-            background: 'none', border: 'none', cursor: 'pointer',
-            fontSize: 12, color: 'var(--accent)', fontFamily: 'var(--font-sans)',
-          }}>+ New</button>}
-        </div>
-        <div style={{ padding: '6px 6px', flex: 1, overflow: 'auto' }}>
-          {Object.entries(grouped).sort(([a], [b]) => a.localeCompare(b)).map(([cat, catSkills]) => (
-            <div key={cat}>
-              <div style={{
-                fontSize: 10.5, color: 'var(--subtle)', padding: '6px 6px 2px',
-                fontFamily: 'var(--font-mono)', letterSpacing: '0.02em',
-              }}>{cat}/</div>
-              {catSkills.map(s => (
-                <div
-                  key={s.id}
-                  onClick={() => select(s)}
-                  className="skill-row"
-                  style={{
-                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                    padding: '5px 8px', borderRadius: 6, cursor: 'pointer',
-                    fontSize: 12, fontFamily: 'var(--font-mono)',
-                    background: selected?.id === s.id ? 'rgba(59,130,246,0.12)' : 'transparent',
-                    color: selected?.id === s.id ? 'var(--accent)' : 'var(--muted)',
-                    transition: 'background 0.12s, color 0.12s',
-                  }}
-                  onMouseEnter={e => {
-                    if (selected?.id !== s.id) (e.currentTarget as HTMLElement).style.background = 'rgba(255,255,255,0.04)';
-                    const btn = (e.currentTarget as HTMLElement).querySelector('.delete-btn') as HTMLElement | null;
-                    if (btn) btn.style.opacity = '1';
-                  }}
-                  onMouseLeave={e => {
-                    if (selected?.id !== s.id) (e.currentTarget as HTMLElement).style.background = 'transparent';
-                    const btn = (e.currentTarget as HTMLElement).querySelector('.delete-btn') as HTMLElement | null;
-                    if (btn) btn.style.opacity = '0';
-                  }}
-                >
-                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.filename}</span>
-                  {canEdit && <button
-                    onClick={e => { e.stopPropagation(); remove(s); }}
-                    className="delete-btn"
-                    style={{
-                      background: 'none', border: 'none', cursor: 'pointer',
-                      color: '#ef4444', fontSize: 14, opacity: 0, transition: 'opacity 0.12s',
-                      fontFamily: 'var(--font-sans)', lineHeight: 1, padding: '0 2px', flexShrink: 0,
-                    }}
-                  >×</button>}
-                </div>
-              ))}
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Editor */}
-      <div style={{
-        flex: 1, background: 'var(--surface)', border: '1px solid var(--border)',
-        borderRadius: 10, display: 'flex', flexDirection: 'column', overflow: 'hidden',
-      }}>
-        {selected ? (
-          <>
-            <div style={{
-              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-              padding: '10px 16px', borderBottom: '1px solid var(--border)',
-              background: 'var(--surface-2)',
-            }}>
-              <span style={{ fontSize: 12, color: 'var(--muted)', fontFamily: 'var(--font-mono)' }}>
-                {selected.category}/{selected.filename}
-              </span>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-                {msg && <span style={{ fontSize: 11.5, color: '#16a34a' }}>{msg}</span>}
-                {canEdit && <button
-                  onClick={save} disabled={saving}
-                  style={{
-                    background: saving ? 'var(--border)' : 'var(--accent)',
-                    color: '#fff', border: 'none', borderRadius: 6,
-                    padding: '5px 14px', fontSize: 12, fontWeight: 500,
-                    cursor: saving ? 'not-allowed' : 'pointer',
-                    fontFamily: 'var(--font-sans)',
-                  }}
-                >
-                  {saving ? 'Saving…' : 'Save'}
-                </button>}
-              </div>
-            </div>
-            <textarea
-              value={content}
-              onChange={e => setContent(e.target.value)}
-              readOnly={!canEdit}
-              style={{
-                flex: 1, border: 'none', outline: 'none', resize: 'none',
-                background: 'transparent', color: 'var(--text)',
-                fontFamily: 'var(--font-mono)', fontSize: 12.5, lineHeight: 1.65,
-                padding: '16px', caretColor: 'var(--accent)',
-              }}
-              spellCheck={false}
-            />
-          </>
-        ) : (
-          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--subtle)', fontSize: 13 }}>
-            Select a file to edit
-          </div>
-        )}
-      </div>
-
-      {/* New skill modal */}
-      {showNew && (
-        <Modal title="New Skill File" onClose={() => setShowNew(false)}>
-          <Field label="Category" value={newSkill.category}
-            onChange={v => setNewSkill(s => ({ ...s, category: v }))} hint="e.g. 00-core" />
-          <Field label="Filename" value={newSkill.filename}
-            onChange={v => setNewSkill(s => ({ ...s, filename: v }))} hint="e.g. identity.md" />
-          <TextArea label="Content (optional)" value={newSkill.content}
-            onChange={v => setNewSkill(s => ({ ...s, content: v }))} rows={4} />
-          <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
-            <PrimaryBtn onClick={create}>Create</PrimaryBtn>
-            <GhostBtn onClick={() => setShowNew(false)}>Cancel</GhostBtn>
-          </div>
-        </Modal>
-      )}
-    </div>
-  );
-}
-
-// ─── MCPs ─────────────────────────────────────────────────────────────────────
-
-function McpsTab({ agentId, canEdit }: { agentId: string; canEdit: boolean }) {
-  const [all, setAll]         = useState<McpServer[]>([]);
-  const [assigned, setAssigned] = useState<Set<string>>(new Set());
-  const [saving, setSaving]   = useState(false);
-  const [msg, setMsg]         = useState('');
-
-  useEffect(() => {
-    Promise.all([
-      fetch('/api/mcps').then(r => r.json()),
-      fetch(`/api/agents/${agentId}/mcps`).then(r => r.json()),
-    ]).then(([a, b]: [McpServer[], McpServer[]]) => {
-      setAll(a); setAssigned(new Set(b.map(m => m.id)));
-    });
-  }, [agentId]);
-
-  const toggle = (id: string) =>
-    setAssigned(prev => { const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n; });
-
-  const save = async () => {
-    setSaving(true);
-    await fetch(`/api/agents/${agentId}/mcps`, {
-      method: 'PUT', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ mcpIds: [...assigned] }),
-    });
-    setSaving(false); setMsg('Saved & reload triggered');
-    setTimeout(() => setMsg(''), 3000);
-  };
-
-  return (
-    <div style={{ maxWidth: 560 }} className="fade-up">
-      <p style={{ margin: '0 0 16px', fontSize: 13, color: 'var(--muted)' }}>
-        Select MCP servers from the platform catalog to enable for this agent.
-      </p>
-      <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden', marginBottom: 16 }}>
-        {all.length === 0 ? (
-          <div style={{ padding: '24px', textAlign: 'center', color: 'var(--muted)', fontSize: 13 }}>
-            No MCP servers yet.{' '}
-            <Link href="/settings/mcps" style={{ color: 'var(--accent)', textDecoration: 'none' }}>Add some →</Link>
-          </div>
-        ) : all.map((mcp, i) => (
-          <label
-            key={mcp.id}
-            style={{
-              display: 'flex', alignItems: 'center', gap: 12,
-              padding: '13px 16px', cursor: mcp.enabled ? 'pointer' : 'not-allowed',
-              borderBottom: i < all.length - 1 ? '1px solid var(--border)' : 'none',
-              background: 'transparent', transition: 'background 0.12s',
-              opacity: mcp.enabled ? 1 : 0.45,
-            }}
-            onMouseEnter={e => { if (mcp.enabled) (e.currentTarget as HTMLElement).style.background = 'rgba(255,255,255,0.03)'; }}
-            onMouseLeave={e => { (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
-          >
-            <input
-              type="checkbox"
-              checked={assigned.has(mcp.id)}
-              onChange={() => toggle(mcp.id)}
-              disabled={!mcp.enabled || !canEdit}
-              style={{ accentColor: 'var(--accent)', width: 14, height: 14, flexShrink: 0 }}
-            />
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--text)' }}>{mcp.name}</span>
-                <span style={{
-                  fontSize: 10.5, fontFamily: 'var(--font-mono)',
-                  color: 'var(--muted)', background: 'var(--border)',
-                  padding: '1px 6px', borderRadius: 4,
-                }}>{mcp.type}</span>
-                {!mcp.enabled && <span style={{ fontSize: 11, color: 'var(--subtle)' }}>disabled</span>}
-              </div>
-              {mcp.description && <p style={{ margin: 0, fontSize: 12, color: 'var(--muted)', marginTop: 1 }}>{mcp.description}</p>}
-            </div>
-          </label>
-        ))}
-      </div>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-        {canEdit && <PrimaryBtn onClick={save} loading={saving}>Save Assignments</PrimaryBtn>}
-        {msg && <span style={{ fontSize: 12, color: '#16a34a' }}>{msg}</span>}
-      </div>
-    </div>
-  );
-}
-
-// ─── Permissions ──────────────────────────────────────────────────────────────
-
-const QUICK_TOOLS = ['Read', 'Write', 'Edit', 'Bash', 'Glob', 'Grep', 'WebFetch', 'WebSearch'];
-
-function PermissionsTab({ agentId, canEdit }: { agentId: string; canEdit: boolean }) {
-  const [allowed, setAllowed] = useState('');
-  const [denied,  setDenied]  = useState('');
-  const [saving,  setSaving]  = useState(false);
-  const [msg,     setMsg]     = useState('');
-
-  useEffect(() => {
-    fetch(`/api/agents/${agentId}/permissions`).then(r => r.json()).then((p: Permission) => {
-      setAllowed((p.allowedTools ?? []).join('\n'));
-      setDenied((p.deniedTools ?? []).join('\n'));
-    });
-  }, [agentId]);
-
-  const addTool = (tool: string, list: 'allowed' | 'denied') => {
-    const setter = list === 'allowed' ? setAllowed : setDenied;
-    const current = (list === 'allowed' ? allowed : denied).split('\n').map(s => s.trim()).filter(Boolean);
-    if (!current.includes(tool)) setter([...current, tool].join('\n'));
-  };
-
-  const save = async () => {
-    setSaving(true);
-    await fetch(`/api/agents/${agentId}/permissions`, {
-      method: 'PUT', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        allowedTools: allowed.split('\n').map(s => s.trim()).filter(Boolean),
-        deniedTools:  denied.split('\n').map(s => s.trim()).filter(Boolean),
-      }),
-    });
-    setSaving(false); setMsg('Saved & reload triggered');
-    setTimeout(() => setMsg(''), 3000);
-  };
-
-  return (
-    <div style={{ maxWidth: 660 }} className="fade-up">
-      {/* Quick add */}
-      <div style={{
-        background: 'var(--surface)', border: '1px solid var(--border)',
-        borderRadius: 10, padding: '12px 16px', marginBottom: 18,
-      }}>
-        <div style={{ fontSize: 11, color: 'var(--muted)', marginBottom: 8, fontWeight: 500, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
-          Quick add built-in tools
-        </div>
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
-          {QUICK_TOOLS.map(t => (
-            <button
-              key={t}
-              onClick={() => addTool(t, 'allowed')}
-              disabled={!canEdit}
-              style={{
-                background: 'var(--border)', border: '1px solid var(--border-2)',
-                color: 'var(--text)', padding: '3px 10px', borderRadius: 5,
-                fontSize: 11.5, fontFamily: 'var(--font-mono)', cursor: 'pointer',
-                transition: 'background 0.12s, border-color 0.12s',
-              }}
-              onMouseEnter={e => { (e.currentTarget as HTMLElement).style.background = 'var(--border-2)'; (e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)'; }}
-              onMouseLeave={e => { (e.currentTarget as HTMLElement).style.background = 'var(--border)'; (e.currentTarget as HTMLElement).style.borderColor = 'var(--border-2)'; }}
-            >{t}</button>
-          ))}
-        </div>
-        <p style={{ margin: '8px 0 0', fontSize: 11, color: 'var(--subtle)' }}>
-          MCP tools pattern: <code style={{ fontFamily: 'var(--font-mono)', color: 'var(--muted)' }}>mcp__serverName__toolName</code>
-        </p>
-      </div>
-
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 16 }}>
-        <div>
-          <label style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--muted)', marginBottom: 6 }}>
-            Allowed Tools <span style={{ color: 'var(--subtle)', fontWeight: 400 }}>· one per line</span>
-          </label>
-          <textarea
-            value={allowed} onChange={e => setAllowed(e.target.value)}
-            rows={12} readOnly={!canEdit}
-            style={{
-              width: '100%', background: 'var(--surface)', border: '1px solid var(--border)',
-              borderRadius: 8, padding: '10px 12px', color: 'var(--text)',
-              fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.7,
-              outline: 'none', resize: 'vertical',
-            }}
-            onFocus={e => (e.currentTarget.style.borderColor = 'var(--accent)')}
-            onBlur={e => (e.currentTarget.style.borderColor = 'var(--border)')}
-            placeholder={'Read\nWrite\nmcp__redshift-mcp__query'}
-          />
-        </div>
-        <div>
-          <label style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--muted)', marginBottom: 6 }}>
-            Denied Tools <span style={{ color: 'var(--subtle)', fontWeight: 400 }}>· overrides allowed</span>
-          </label>
-          <textarea
-            value={denied} onChange={e => setDenied(e.target.value)}
-            rows={12} readOnly={!canEdit}
-            style={{
-              width: '100%', background: 'var(--surface)', border: '1px solid var(--border)',
-              borderRadius: 8, padding: '10px 12px', color: 'var(--danger)',
-              fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.7,
-              outline: 'none', resize: 'vertical',
-            }}
-            onFocus={e => (e.currentTarget.style.borderColor = '#ef4444')}
-            onBlur={e => (e.currentTarget.style.borderColor = 'var(--border)')}
-            placeholder={'Bash'}
-          />
-        </div>
-      </div>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-        {canEdit && <PrimaryBtn onClick={save} loading={saving}>Save Permissions</PrimaryBtn>}
-        {msg && <span style={{ fontSize: 12, color: '#16a34a' }}>{msg}</span>}
-      </div>
-    </div>
-  );
-}
-
-// ─── Memory ───────────────────────────────────────────────────────────────────
-
-const MEM_TYPE_STYLE: Record<string, { bg: string; color: string }> = {
-  user:      { bg: '#f3f0ff', color: '#7c3aed' },
-  feedback:  { bg: '#eff6ff', color: '#2563eb' },
-  project:   { bg: '#fffbeb', color: '#b45309' },
-  reference: { bg: '#f0fdf4', color: '#15803d' },
-};
-
-function MemoryTab({ agentId, canEdit }: { agentId: string; canEdit: boolean }) {
-  const [memories, setMemories] = useState<Memory[]>([]);
-  const [expanded, setExpanded] = useState<Set<string>>(new Set());
-
-  const load = () => fetch(`/api/agents/${agentId}/memories`).then(r => r.json()).then(setMemories);
-  useEffect(() => { load(); }, [agentId]);
-
-  const remove = async (id: string) => {
-    await fetch(`/api/agents/${agentId}/memories/${id}`, { method: 'DELETE' });
-    load();
-  };
-
-  const toggle = (id: string) =>
-    setExpanded(prev => { const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n; });
-
-  const grouped = memories.reduce<Record<string, Memory[]>>((acc, m) => {
-    (acc[m.type] ??= []).push(m); return acc;
-  }, {});
-
-  if (memories.length === 0) {
-    return (
-      <div className="fade-up" style={{
-        display: 'flex', flexDirection: 'column', alignItems: 'center',
-        paddingTop: 80, color: 'var(--muted)',
-      }}>
-        <Brain size={36} style={{ marginBottom: 12, color: 'var(--border-2)' }} />
-        <p style={{ margin: '0 0 4px', fontSize: 15, fontWeight: 600, color: 'var(--text)', textAlign: 'center' }}>
-          No memories yet
-        </p>
-        <p style={{ fontSize: 13, color: 'var(--muted)', maxWidth: 300, margin: '0', textAlign: 'center' }}>
-          The agent will automatically accumulate memories as it interacts in Slack.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div style={{ maxWidth: 720 }} className="fade-up">
-      <div style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 18 }}>
-        {memories.length} memories across {Object.keys(grouped).length} categories
-      </div>
-      {(['feedback', 'user', 'project', 'reference'] as const).map(type => {
-        const items = grouped[type];
-        if (!items?.length) return null;
-        const style = MEM_TYPE_STYLE[type] ?? { bg: 'var(--border)', color: 'var(--muted)' };
-        return (
-          <div key={type} style={{ marginBottom: 20 }}>
-            <div style={{
-              display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8,
-            }}>
-              <span style={{
-                fontSize: 10.5, fontWeight: 600, letterSpacing: '0.06em',
-                textTransform: 'uppercase',
-                background: style.bg, color: style.color,
-                padding: '2px 8px', borderRadius: 5,
-              }}>{type}</span>
-              <span style={{ fontSize: 11.5, color: 'var(--subtle)' }}>{items.length}</span>
-            </div>
-            <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
-              {items.map((m, i) => (
-                <div key={m.id} style={{ borderBottom: i < items.length - 1 ? '1px solid var(--border)' : 'none' }}>
-                  <div style={{
-                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                    padding: '10px 14px', cursor: 'pointer',
-                  }} onClick={() => toggle(m.id)}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
-                      <span style={{ fontSize: 11, color: 'var(--subtle)' }}>
-                        {expanded.has(m.id) ? '▼' : '▶'}
-                      </span>
-                      <span style={{ fontSize: 13, color: 'var(--text)', fontWeight: 500, fontFamily: 'var(--font-mono)' }}>
-                        {m.name}
-                      </span>
-                    </div>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-                      <span style={{ fontSize: 11, color: 'var(--subtle)' }}>
-                        {new Date(m.updatedAt).toLocaleDateString()}
-                      </span>
-                      {canEdit && <button
-                        onClick={e => { e.stopPropagation(); remove(m.id); }}
-                        style={{
-                          background: 'none', border: 'none', cursor: 'pointer',
-                          color: '#ef4444', fontSize: 13, opacity: 0.5, transition: 'opacity 0.12s',
-                          fontFamily: 'var(--font-sans)',
-                        }}
-                        onMouseEnter={e => (e.currentTarget.style.opacity = '1')}
-                        onMouseLeave={e => (e.currentTarget.style.opacity = '0.5')}
-                      >Delete</button>}
-                    </div>
-                  </div>
-                  {expanded.has(m.id) && (
-                    <pre style={{
-                      margin: 0, padding: '12px 14px',
-                      background: 'var(--surface-2)',
-                      borderTop: '1px solid var(--border)',
-                      fontFamily: 'var(--font-mono)', fontSize: 11.5,
-                      color: 'var(--muted)', whiteSpace: 'pre-wrap', lineHeight: 1.6,
-                    }}>{m.content}</pre>
-                  )}
-                </div>
-              ))}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-// ─── Logs ─────────────────────────────────────────────────────────────────────
-
-type LogLevel = 'all' | 'debug' | 'info' | 'warn' | 'error';
-
-interface ParsedLog {
-  raw: string;
-  level: LogLevel;
-  time: string;
-  message: string;
-  fields: Record<string, string>;
-}
-
-function parseLine(raw: string): ParsedLog {
-  const stripped = raw.replace(/\x1b\[[0-9;]*m/g, '');
-  try {
-    const obj = JSON.parse(stripped);
-    const level: LogLevel =
-      obj.level === 'error' || obj.level === 50 ? 'error' :
-      obj.level === 'warn'  || obj.level === 40 ? 'warn'  :
-      obj.level === 'debug' || obj.level === 20 ? 'debug' : 'info';
-    const ts = obj.timestamp ? new Date(obj.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }) : '';
-    const rawMsg = obj.message ?? obj.msg ?? '';
-    const msg = rawMsg.replace(/^(error|warn|info|debug|trace):\s*/i, '');
-    const skip = new Set(['level', 'message', 'msg', 'timestamp', 'agent', 'service']);
-    const fields: Record<string, string> = {};
-    for (const [k, v] of Object.entries(obj)) {
-      if (!skip.has(k)) fields[k] = typeof v === 'object' ? JSON.stringify(v) : String(v);
-    }
-    return { raw: stripped, level, time: ts, message: msg, fields };
-  } catch {
-    const lo = stripped.toLowerCase();
-    const level: LogLevel =
-      lo.includes('"level":"error"') || lo.includes('"level":50') || lo.includes('error:') ? 'error' :
-      lo.includes('"level":"warn"')  || lo.includes('"level":40') || lo.includes('warn:')  ? 'warn'  :
-      lo.includes('"level":"debug"') || lo.includes('"level":20') || lo.includes('debug:') ? 'debug' : 'info';
-    const plainMsg = stripped.replace(/^(error|warn|info|debug|trace):\s*/i, '');
-    const tsMatch = stripped.match(/"timestamp":"([^"]+)"/);
-    const plainTime = tsMatch ? new Date(tsMatch[1]).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }) : '';
-    return { raw: stripped, level, time: plainTime, message: plainMsg, fields: {} };
-  }
-}
-
-const LOG_META: Record<LogLevel, { label: string; color: string; bg: string; border: string; rowBg: string }> = {
-  all:   { label: 'ALL',   color: '#6b7280', bg: '#f3f4f6', border: '#e5e7eb', rowBg: 'transparent' },
-  info:  { label: 'INFO',  color: '#1d4ed8', bg: '#eff6ff', border: '#bfdbfe', rowBg: 'transparent' },
-  debug: { label: 'DEBUG', color: '#9ca3af', bg: '#f9fafb', border: '#e5e7eb', rowBg: 'transparent' },
-  warn:  { label: 'WARN',  color: '#92400e', bg: '#fffbeb', border: '#fde68a', rowBg: '#fffdf0' },
-  error: { label: 'ERR',   color: '#991b1b', bg: '#fef2f2', border: '#fecaca', rowBg: '#fff8f8' },
-};
-
-function LogRow({ log }: { log: ParsedLog }) {
-  const [expanded, setExpanded] = useState(false);
-  const [hovered, setHovered]   = useState(false);
-  const m = LOG_META[log.level];
-  const hasFields = Object.keys(log.fields).length > 0;
-  const msgColor = log.level === 'error' ? '#7f1d1d' : log.level === 'warn' ? '#78350f' : log.level === 'debug' ? '#9ca3af' : 'var(--text)';
-
-  return (
-    <div
-      onClick={() => setExpanded(e => !e)}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      style={{
-        cursor: 'pointer',
-        background: hovered ? 'var(--surface-2)' : (expanded ? 'var(--surface-2)' : m.rowBg),
-        borderLeft: `3px solid ${expanded ? m.border : 'transparent'}`,
-        borderBottom: '1px solid var(--border)',
-        transition: 'background 0.1s',
-      }}
-    >
-      {/* Compact single row */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '5px 10px', minHeight: 28 }}>
-        <span style={{ color: 'var(--subtle)', flexShrink: 0, fontSize: 10.5, fontVariantNumeric: 'tabular-nums', minWidth: 68 }}>
-          {log.time}
-        </span>
-        <span style={{
-          flexShrink: 0, fontSize: 9.5, fontWeight: 700, letterSpacing: '0.06em',
-          padding: '1px 6px', borderRadius: 3, border: `1px solid ${m.border}`,
-          background: m.bg, color: m.color, minWidth: 34, textAlign: 'center',
-        }}>{m.label}</span>
-        <span style={{ flex: 1, color: msgColor, fontSize: 11.5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-          {log.message}
-        </span>
-        {!expanded && hasFields && (
-          <span style={{ flexShrink: 0, display: 'flex', gap: 3 }}>
-            {Object.keys(log.fields).slice(0, 3).map(k => (
-              <span key={k} style={{ fontSize: 9.5, color: 'var(--muted)', background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 3, padding: '0 4px' }}>{k}</span>
-            ))}
-            {Object.keys(log.fields).length > 3 && <span style={{ fontSize: 9.5, color: 'var(--subtle)' }}>+{Object.keys(log.fields).length - 3}</span>}
-          </span>
-        )}
-        <span style={{ flexShrink: 0, color: 'var(--subtle)', fontSize: 9, transform: expanded ? 'rotate(90deg)' : 'none', transition: 'transform 0.15s' }}>▶</span>
-      </div>
-
-      {/* Expanded detail */}
-      {expanded && (
-        <div style={{ padding: '8px 14px 12px 92px', borderTop: '1px solid var(--border)', background: 'var(--surface-2)' }}>
-          {log.message.includes('\n') && (
-            <pre style={{ margin: '0 0 10px', color: 'var(--text)', fontSize: 11.5, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{log.message}</pre>
-          )}
-          {hasFields && (
-            <div style={{ display: 'grid', gridTemplateColumns: 'max-content 1fr', gap: '4px 16px', marginBottom: 8 }}>
-              {Object.entries(log.fields).map(([k, v]) => (
-                <>
-                  <span key={`k-${k}`} style={{ color: 'var(--accent)', fontSize: 11, fontWeight: 500 }}>{k}</span>
-                  <span key={`v-${k}`} style={{ color: 'var(--muted)', fontSize: 11, wordBreak: 'break-all' }}>{v}</span>
-                </>
-              ))}
-            </div>
-          )}
-          {log.raw && (
-            <>
-              <div style={{ fontSize: 10, color: 'var(--subtle)', marginTop: 8, marginBottom: 4 }}>Raw</div>
-              <pre style={{
-                margin: 0, padding: '8px 10px', background: 'var(--surface-2)',
-                border: '1px solid var(--border)', borderRadius: 4,
-                fontSize: 10.5, color: 'var(--muted)', whiteSpace: 'pre-wrap', wordBreak: 'break-all', maxHeight: 180, overflow: 'auto',
-              }}>{log.raw}</pre>
-            </>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function LogsTab({ agentId, slug }: { agentId: string; slug: string }) {
-  const [lines, setLines]             = useState<ParsedLog[]>([]);
-  const [connected, setConnected]     = useState(false);
-  const [levelFilter, setLevelFilter] = useState<LogLevel>('all');
-  const [search, setSearch]           = useState('');
-  const [autoScroll, setAutoScroll]   = useState(true);
-  const bottomRef    = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const es = new EventSource(`/api/agents/${agentId}/logs`);
-    setConnected(true);
-    es.onmessage = e => {
-      const raw = JSON.parse(e.data) as string;
-      setLines(prev => [...prev.slice(-1000), parseLine(raw)]);
-    };
-    es.onerror = () => setConnected(false);
-    return () => es.close();
-  }, [agentId]);
-
-  useEffect(() => {
-    if (autoScroll) bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [lines, autoScroll]);
-
-  const LEVEL_ORDER: LogLevel[] = ['error', 'warn', 'info', 'debug'];
-
-  const counts = lines.reduce<Record<LogLevel, number>>((acc, l) => {
-    acc[l.level] = (acc[l.level] ?? 0) + 1; return acc;
-  }, { all: lines.length, error: 0, warn: 0, info: 0, debug: 0 });
-
-  const visibleLines = lines.filter(l => {
-    if (levelFilter !== 'all' && l.level !== levelFilter) return false;
-    if (search) {
-      const q = search.toLowerCase();
-      return l.message.toLowerCase().includes(q) ||
-        Object.values(l.fields).some(v => v.toLowerCase().includes(q));
-    }
-    return true;
-  });
-
-  return (
-    <div className="fade-up">
-      {/* Toolbar */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, flexWrap: 'wrap' }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-          <div className={connected ? 'status-running' : ''}
-            style={{ width: 6, height: 6, borderRadius: '50%', background: connected ? '#16a34a' : 'var(--border-2)' }} />
-          <span style={{ fontSize: 11, color: 'var(--muted)' }}>{connected ? 'Live' : 'Disconnected'}</span>
-        </div>
-        <div style={{ width: 1, height: 14, background: 'var(--border)', margin: '0 2px' }} />
-        {/* Level filters with counts */}
-        {(['all', ...LEVEL_ORDER] as LogLevel[]).map(lvl => {
-          const m = LOG_META[lvl];
-          const active = levelFilter === lvl;
-          return (
-            <button key={lvl} onClick={() => setLevelFilter(lvl)} style={{
-              padding: '2px 8px', borderRadius: 4,
-              border: `1px solid ${active ? m.border : 'var(--border)'}`,
-              fontSize: 10.5, fontFamily: 'var(--font-sans)', cursor: 'pointer',
-              background: active ? m.bg : 'transparent',
-              color: active ? m.color : 'var(--muted)',
-              fontWeight: active ? 700 : 400,
-              display: 'flex', alignItems: 'center', gap: 4,
-            }}>
-              {m.label}
-              {counts[lvl] > 0 && <span style={{ fontSize: 9.5, opacity: 0.75 }}>{counts[lvl]}</span>}
-            </button>
-          );
-        })}
-        <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Filter logs…"
-          style={{
-            padding: '3px 10px', borderRadius: 4, border: '1px solid var(--border)',
-            fontSize: 11, fontFamily: 'var(--font-mono)', background: 'transparent',
-            color: 'var(--text)', outline: 'none', width: 180,
-          }} />
-        <button onClick={() => setLines([])} style={{
-          marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer',
-          fontSize: 11, color: 'var(--subtle)', fontFamily: 'var(--font-sans)',
-        }}>Clear</button>
-      </div>
-
-      {/* Log pane */}
-      <div ref={containerRef} onScroll={e => {
-        const el = e.currentTarget;
-        setAutoScroll(el.scrollTop + el.clientHeight >= el.scrollHeight - 40);
-      }} style={{
-        background: '#fff', border: '1px solid var(--border)', borderRadius: 8,
-        height: 520, overflow: 'auto', fontFamily: 'var(--font-mono)',
-      }}>
-        {visibleLines.length === 0 ? (
-          <div style={{ padding: '40px 20px', textAlign: 'center', color: 'var(--subtle)', fontSize: 12 }}>
-            {lines.length === 0 ? 'Waiting for log lines…' : 'No matching lines.'}
-          </div>
-        ) : (
-          visibleLines.map((log, i) => <LogRow key={i} log={log} />)
-        )}
-        <div ref={bottomRef} />
-      </div>
-
-      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 5, padding: '0 2px' }}>
-        <span style={{ fontSize: 10.5, color: 'var(--subtle)' }}>
-          {visibleLines.length}{visibleLines.length !== lines.length ? ` / ${lines.length}` : ''} line{visibleLines.length !== 1 ? 's' : ''}
-        </span>
-        {!autoScroll && (
-          <button onClick={() => { setAutoScroll(true); bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); }}
-            style={{ fontSize: 10.5, color: 'var(--accent)', background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-sans)' }}>
-            ↓ Jump to latest
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
-
-// ─── Shared UI primitives ─────────────────────────────────────────────────────
-
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <div style={{
-      marginBottom: 32, paddingBottom: 28,
-      borderBottom: '1px solid var(--border)',
-    }}>
-      <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--muted)', letterSpacing: '0.08em',
-        textTransform: 'uppercase', marginBottom: 16 }}>
-        {title}
-      </div>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>{children}</div>
-    </div>
-  );
-}
-
-function Grid2({ children }: { children: React.ReactNode }) {
-  return <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>{children}</div>;
-}
-
-function Field({ label, value, onChange, hint, type = 'text', readOnly }: {
-  label: string; value: string; onChange: (v: string) => void;
-  hint?: React.ReactNode; type?: string; readOnly?: boolean;
-}) {
-  return (
-    <div>
-      <label style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--muted)', marginBottom: 5 }}>
-        {label}
-      </label>
-      <input
-        type={type} value={value} onChange={e => onChange(e.target.value)} readOnly={readOnly}
-        style={{
-          width: '100%', background: 'var(--surface)', border: '1.5px solid var(--border)',
-          borderRadius: 'var(--radius)', padding: '10px 14px', color: 'var(--text)',
-          fontSize: 14, fontFamily: 'var(--font-sans)', outline: 'none',
-          transition: 'border-color 0.15s',
-        }}
-        onFocus={e => (e.currentTarget.style.borderColor = 'var(--accent)')}
-        onBlur={e => (e.currentTarget.style.borderColor = 'var(--border)')}
-      />
-      {hint && <p style={{ margin: '5px 0 0', fontSize: 12, color: 'var(--subtle)' }}>{hint}</p>}
-    </div>
-  );
-}
-
-function TextArea({ label, value, onChange, hint, rows = 3, readOnly }: {
-  label: string; value: string; onChange: (v: string) => void;
-  hint?: string; rows?: number; readOnly?: boolean;
-}) {
-  return (
-    <div>
-      <label style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--muted)', marginBottom: 5 }}>
-        {label}
-      </label>
-      <textarea
-        value={value} onChange={e => onChange(e.target.value)} rows={rows} readOnly={readOnly}
-        style={{
-          width: '100%', background: 'var(--surface)', border: '1.5px solid var(--border)',
-          borderRadius: 'var(--radius)', padding: '10px 14px', color: 'var(--text)',
-          fontSize: 14, fontFamily: 'var(--font-sans)', outline: 'none', resize: 'vertical',
-          transition: 'border-color 0.15s',
-        }}
-        onFocus={e => (e.currentTarget.style.borderColor = 'var(--accent)')}
-        onBlur={e => (e.currentTarget.style.borderColor = 'var(--border)')}
-      />
-      {hint && <p style={{ margin: '5px 0 0', fontSize: 12, color: 'var(--subtle)' }}>{hint}</p>}
-    </div>
-  );
-}
-
-function PrimaryBtn({ children, onClick, loading }: {
-  children: React.ReactNode; onClick?: () => void; loading?: boolean;
-}) {
-  return (
-    <button onClick={onClick} disabled={loading} style={{
-      background: loading ? 'var(--border)' : 'var(--accent)',
-      color: '#fff', border: 'none', borderRadius: 'var(--radius)',
-      padding: '10px 22px', fontSize: 14, fontWeight: 600,
-      letterSpacing: '-0.01em',
-      cursor: loading ? 'not-allowed' : 'pointer',
-      fontFamily: 'var(--font-sans)',
-      boxShadow: loading ? 'none' : 'var(--shadow-sm)',
-      transition: 'opacity 0.15s, transform 0.15s, box-shadow 0.15s',
-    }}
-      onMouseEnter={e => { if (!loading) { (e.currentTarget as HTMLElement).style.opacity = '0.88'; (e.currentTarget as HTMLElement).style.transform = 'translateY(-1px)'; (e.currentTarget as HTMLElement).style.boxShadow = 'var(--shadow-hover)'; }}}
-      onMouseLeave={e => { (e.currentTarget as HTMLElement).style.opacity = '1'; (e.currentTarget as HTMLElement).style.transform = 'translateY(0)'; (e.currentTarget as HTMLElement).style.boxShadow = 'var(--shadow-sm)'; }}
-    >{loading ? 'Saving…' : children}</button>
-  );
-}
-
-function GhostBtn({ children, onClick, loading }: { children: React.ReactNode; onClick?: () => void; loading?: boolean }) {
-  return (
-    <button onClick={onClick} disabled={loading} style={{
-      background: 'transparent', color: 'var(--muted)',
-      border: '1.5px solid var(--border-2)', borderRadius: 'var(--radius)',
-      padding: '10px 20px', fontSize: 14, fontWeight: 500, fontFamily: 'var(--font-sans)',
-      cursor: loading ? 'default' : 'pointer', opacity: loading ? 0.6 : 1,
-      transition: 'border-color 0.15s, color 0.15s',
-    }}
-      onMouseEnter={e => { if (!loading) { (e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)'; (e.currentTarget as HTMLElement).style.color = 'var(--text)'; }}}
-      onMouseLeave={e => { (e.currentTarget as HTMLElement).style.borderColor = 'var(--border-2)'; (e.currentTarget as HTMLElement).style.color = 'var(--muted)'; }}
-    >{loading ? '…' : children}</button>
-  );
-}
-
-function InfoRow({ label, value }: { label: string; value: string }) {
-  return (
-    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13 }}>
-      <span style={{ color: 'var(--muted)' }}>{label}</span>
-      <span style={{ color: 'var(--text)', fontWeight: 500 }}>{value}</span>
-    </div>
-  );
-}
-
-function IconBtn({ children, onClick, title, loading }: { children: React.ReactNode; onClick?: () => void; title?: string; loading?: boolean }) {
-  return (
-    <button
-      onClick={onClick}
-      title={title}
-      disabled={loading}
-      style={{
-        display: 'flex', alignItems: 'center', justifyContent: 'center',
-        width: 32, height: 32, borderRadius: 8, border: '1px solid var(--border)',
-        background: 'var(--surface)', color: 'var(--muted)',
-        cursor: loading ? 'default' : 'pointer', opacity: loading ? 0.5 : 1,
-        transition: 'all 0.15s',
-      }}
-      onMouseEnter={e => { if (!loading) { const el = e.currentTarget as HTMLElement; el.style.borderColor = 'var(--border-2)'; el.style.color = 'var(--text)'; el.style.background = 'var(--surface-2)'; }}}
-      onMouseLeave={e => { const el = e.currentTarget as HTMLElement; el.style.borderColor = 'var(--border)'; el.style.color = 'var(--muted)'; el.style.background = 'var(--surface)'; }}
-    >
-      {loading ? <span style={{ fontSize: 11 }}>…</span> : children}
-    </button>
-  );
-}
-
-function Btn({ children, onClick, color, textColor }: {
-  children: React.ReactNode; onClick?: () => void;
-  color?: string; textColor?: string;
-}) {
-  return (
-    <button onClick={onClick} style={{
-      background: color ?? 'var(--border)', color: textColor ?? '#fff',
-      border: 'none', borderRadius: 'var(--radius)', padding: '8px 18px',
-      fontSize: 13, fontWeight: 600, cursor: 'pointer',
-      fontFamily: 'var(--font-sans)', transition: 'opacity 0.15s, transform 0.15s',
-    }}
-      onMouseEnter={e => { (e.currentTarget as HTMLElement).style.opacity = '0.85'; (e.currentTarget as HTMLElement).style.transform = 'translateY(-1px)'; }}
-      onMouseLeave={e => { (e.currentTarget as HTMLElement).style.opacity = '1'; (e.currentTarget as HTMLElement).style.transform = 'translateY(0)'; }}
-    >{children}</button>
-  );
-}
-
-function Modal({ title, children, onClose }: {
-  title: string; children: React.ReactNode; onClose: () => void;
-}) {
-  return (
-    <Portal>
-    <div style={{
-      position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)',
-      display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999,
-      backdropFilter: 'blur(4px)',
-    }}>
-      <div style={{
-        background: 'var(--surface)', border: '1px solid var(--border)',
-        borderRadius: 'var(--radius-lg)', padding: '28px', width: 440,
-        boxShadow: 'var(--shadow-modal)',
-        display: 'flex', flexDirection: 'column', gap: 16,
-        maxHeight: '90vh', overflow: 'auto',
-      }}>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600, color: 'var(--text)' }}>{title}</h3>
-          <button onClick={onClose} style={{
-            background: 'none', border: 'none', cursor: 'pointer',
-            color: 'var(--muted)', fontSize: 18, lineHeight: 1, fontFamily: 'var(--font-sans)',
-          }}>×</button>
-        </div>
-        {children}
-      </div>
-    </div>
-    </Portal>
-  );
-}
-
-function PageLoader() {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', color: 'var(--muted)', fontSize: 13 }}>
-      Loading…
-    </div>
-  );
-}
-
-function NotFound({ slug }: { slug: string }) {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100vh', gap: 12 }}>
-      <p style={{ color: 'var(--muted)', fontSize: 13 }}>Agent not found: <code style={{ fontFamily: 'var(--font-mono)' }}>{slug}</code></p>
-      <Link href="/" style={{ color: 'var(--accent)', fontSize: 13, textDecoration: 'none' }}>← Back to dashboard</Link>
-    </div>
-  );
-}
-
-// ─── History ──────────────────────────────────────────────────────────────────
-
-// ── Diff panel ───────────────────────────────────────────────────────────────
-
-function SkillDiff({ snapshot, current }: { snapshot: AgentSnapshot; current: AgentSnapshot | null }) {
-  const snapSkills = snapshot.skillsJson;
-  const currSkills = current ? current.skillsJson : null;
-
-  // Build lookup maps
-  const snapMap = new Map(snapSkills.map(s => [`${s.category}/${s.filename}`, s.content]));
-  const currMap = currSkills ? new Map(currSkills.map(s => [`${s.category}/${s.filename}`, s.content])) : new Map<string, string>();
-
-  const allKeys = new Set([...snapMap.keys(), ...currMap.keys()]);
-  const files: { key: string; status: 'added' | 'removed' | 'modified' | 'same'; diff?: DiffLine[] }[] = [];
-
-  for (const key of allKeys) {
-    const snapContent = snapMap.get(key);
-    const currContent = currMap.get(key);
-    if (snapContent === undefined) {
-      files.push({ key, status: 'added' });
-    } else if (currContent === undefined) {
-      files.push({ key, status: 'removed' });
-    } else if (snapContent !== currContent) {
-      files.push({ key, status: 'modified', diff: lineDiff(snapContent, currContent) });
-    }
-  }
-
-  if (files.length === 0) {
-    return <p style={{ fontSize: 13, color: 'var(--subtle)', margin: 0 }}>No skill changes.</p>;
-  }
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-      {files.map(f => (
-        <div key={f.key} style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
-          <div style={{
-            padding: '7px 12px', background: 'var(--surface-2)',
-            borderBottom: '1px solid var(--border)',
-            display: 'flex', alignItems: 'center', gap: 8,
-          }}>
-            <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>{f.key}</span>
-            <span style={{
-              fontSize: 10, padding: '1px 6px', borderRadius: 4, fontWeight: 600,
-              background: f.status === 'added' ? 'rgba(22,163,74,0.15)' : f.status === 'removed' ? 'rgba(239,68,68,0.15)' : 'rgba(234,179,8,0.15)',
-              color: f.status === 'added' ? '#16a34a' : f.status === 'removed' ? '#ef4444' : '#ca8a04',
-            }}>{f.status}</span>
-          </div>
-          {f.diff && (
-            <pre style={{
-              margin: 0, padding: '10px 0', fontSize: 11.5, fontFamily: 'var(--font-mono)',
-              lineHeight: 1.6, overflow: 'auto', maxHeight: 320,
-            }}>
-              {f.diff.map((line, i) => (
-                <div key={i} style={{
-                  padding: '0 12px',
-                  background: line.type === 'add' ? 'rgba(22,163,74,0.1)' : line.type === 'remove' ? 'rgba(239,68,68,0.1)' : 'transparent',
-                  color: line.type === 'add' ? '#16a34a' : line.type === 'remove' ? '#ef4444' : 'var(--muted)',
-                }}>
-                  {line.type === 'add' ? '+ ' : line.type === 'remove' ? '- ' : '  '}{line.line}
-                </div>
-              ))}
-            </pre>
-          )}
-          {f.status === 'added' && <p style={{ margin: '8px 12px', fontSize: 12, color: '#16a34a' }}>File added since this snapshot.</p>}
-          {f.status === 'removed' && <p style={{ margin: '8px 12px', fontSize: 12, color: '#ef4444' }}>File deleted since this snapshot.</p>}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function PermsDiff({ snapshot, current }: { snapshot: AgentSnapshot; current: AgentSnapshot | null }) {
-  const currAllowed = new Set(current ? current.allowedTools : []);
-  const currDenied  = new Set(current ? current.deniedTools  : []);
-  const snapAllowed = new Set(snapshot.allowedTools);
-  const snapDenied  = new Set(snapshot.deniedTools);
-
-  const addedAllowed   = [...currAllowed].filter(t => !snapAllowed.has(t));
-  const removedAllowed = [...snapAllowed].filter(t => !currAllowed.has(t));
-  const addedDenied    = [...currDenied].filter(t => !snapDenied.has(t));
-  const removedDenied  = [...snapDenied].filter(t => !currDenied.has(t));
-
-  if (!addedAllowed.length && !removedAllowed.length && !addedDenied.length && !removedDenied.length) {
-    return <p style={{ fontSize: 13, color: 'var(--subtle)', margin: 0 }}>No permission changes.</p>;
-  }
-  const row = (label: string, items: string[], color: string) => items.length > 0 && (
-    <div key={label}>
-      <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--muted)', marginBottom: 4 }}>{label}</div>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
-        {items.map(t => (
-          <span key={t} style={{ fontSize: 11.5, fontFamily: 'var(--font-mono)', padding: '2px 8px', borderRadius: 4, background: `${color}22`, color }}>{t}</span>
-        ))}
-      </div>
-    </div>
-  );
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-      {row('Allowed tools added', addedAllowed, '#16a34a')}
-      {row('Allowed tools removed', removedAllowed, '#ef4444')}
-      {row('Denied tools added', addedDenied, '#ef4444')}
-      {row('Denied tools removed', removedDenied, '#16a34a')}
-    </div>
-  );
-}
-
-function McpsDiff({ snapshot, current, allMcps }: { snapshot: AgentSnapshot; current: AgentSnapshot | null; allMcps: McpServer[] }) {
-  const nameFor = (id: string) => allMcps.find(m => m.id === id)?.name ?? id;
-  const currIds = new Set(current ? current.mcpIds : []);
-  const snapIds = new Set(snapshot.mcpIds);
-  const added   = [...currIds].filter(id => !snapIds.has(id));
-  const removed = [...snapIds].filter(id => !currIds.has(id));
-  if (!added.length && !removed.length) return <p style={{ fontSize: 13, color: 'var(--subtle)', margin: 0 }}>No MCP changes.</p>;
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-      {added.length > 0 && <div>
-        <div style={{ fontSize: 11, fontWeight: 600, color: '#16a34a', marginBottom: 4 }}>Added</div>
-        {added.map(id => <div key={id} style={{ fontSize: 12.5, color: '#16a34a' }}>+ {nameFor(id)}</div>)}
-      </div>}
-      {removed.length > 0 && <div>
-        <div style={{ fontSize: 11, fontWeight: 600, color: '#ef4444', marginBottom: 4 }}>Removed</div>
-        {removed.map(id => <div key={id} style={{ fontSize: 12.5, color: '#ef4444' }}>- {nameFor(id)}</div>)}
-      </div>}
-    </div>
-  );
-}
-
-// ── Trigger badge ─────────────────────────────────────────────────────────────
-
-const TRIGGER_COLORS: Record<string, { bg: string; color: string }> = {
-  skills:      { bg: 'rgba(59,130,246,0.12)',  color: '#3b82f6' },
-  permissions: { bg: 'rgba(234,179,8,0.12)',   color: '#ca8a04' },
-  mcps:        { bg: 'rgba(168,85,247,0.12)',  color: '#a855f7' },
-  'claude-md': { bg: 'rgba(236,72,153,0.12)',  color: '#ec4899' },
-  manual:      { bg: 'rgba(22,163,74,0.12)',   color: '#16a34a' },
-};
-
-function TriggerBadge({ trigger }: { trigger: string }) {
-  const c = TRIGGER_COLORS[trigger] ?? { bg: 'var(--surface-2)', color: 'var(--muted)' };
-  const label: Record<string, string> = {
-    skills: 'Skills', permissions: 'Tools', mcps: 'MCPs',
-    'claude-md': 'System Prompt', manual: 'Manual', restrictions: 'Channels',
-  };
-  return (
-    <span style={{
-      fontSize: 10.5, fontWeight: 600, padding: '3px 8px', borderRadius: 6,
-      background: c.bg, color: c.color, letterSpacing: '0.03em',
-    }}>{label[trigger] ?? trigger}</span>
-  );
-}
-
-// ── Main HistoryTab component ─────────────────────────────────────────────────
-
-function HistoryTab({ agentId, canEdit }: { agentId: string; canEdit: boolean }) {
-  const [snapshots, setSnapshots] = useState<AgentSnapshot[]>([]);
-  const [loading, setLoading]     = useState(true);
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [fullSnapshot, setFullSnapshot] = useState<AgentSnapshot | null>(null);
-  const [compareId, setCompareId] = useState<string>('__current__');
-  const [compareSnapshot, setCompareSnapshot] = useState<AgentSnapshot | null>(null);
-  // Live current state — fetched once and used as the "Current state" comparison target
-  const [liveSnapshot, setLiveSnapshot] = useState<AgentSnapshot | null>(null);
-  const [allMcps, setAllMcps]     = useState<McpServer[]>([]);
-  const [restoring, setRestoring] = useState(false);
-  const [loadingDetail, setLoadingDetail] = useState(false);
-  const [msg, setMsg]             = useState('');
-
-  // Load snapshot list + MCP catalog (fast path — no live state on mount)
-  useEffect(() => {
-    Promise.all([
-      fetch(`/api/agents/${agentId}/snapshots`).then(r => r.json()),
-      fetch('/api/mcps').then(r => r.json()),
-    ]).then(([snaps, mcps]) => {
-      setSnapshots(Array.isArray(snaps) ? snaps : []);
-      setAllMcps(mcps);
-      setLoading(false);
-    });
-  }, [agentId]);
-
-  // Lazy-load live state only when user picks "Compare with current"
-  useEffect(() => {
-    if (compareId !== '__current__' || liveSnapshot) return;
-    Promise.all([
-      fetch(`/api/agents/${agentId}/skills`).then(r => r.json()),
-      fetch(`/api/agents/${agentId}/permissions`).then(r => r.json()),
-      fetch(`/api/agents/${agentId}/mcps`).then(r => r.json()),
-      fetch(`/api/agents/${agentId}/claude-md`).then(r => r.text()),
-    ]).then(([skills, perms, agentMcps, claudeMd]) => {
-      setLiveSnapshot({
-        id: '__current__',
-        agentId,
-        trigger: 'manual',
-        createdBy: 'current',
-        skillsJson: skills.map((s: Skill) => ({
-          category: s.category,
-          filename: s.filename,
-          content: s.content,
-          sort_order: s.sortOrder,
-        })),
-        allowedTools: perms?.allowedTools ?? [],
-        deniedTools:  perms?.deniedTools  ?? [],
-        mcpIds: (agentMcps as McpServer[]).map(m => m.id),
-        compiledMd: claudeMd ?? '',
-        allowedChannels: [],
-        createdAt: new Date(),
-      });
-    });
-  }, [agentId, compareId, liveSnapshot]);
-
-  // Load full snapshot when selected
-  useEffect(() => {
-    if (!selectedId) { setFullSnapshot(null); return; }
-    setFullSnapshot(null);
-    setLoadingDetail(true);
-    fetch(`/api/agents/${agentId}/snapshots/${selectedId}`)
-      .then(r => r.json())
-      .then(snap => { setFullSnapshot(snap); setLoadingDetail(false); })
-      .catch(() => setLoadingDetail(false));
-  }, [agentId, selectedId]);
-
-  // Load compare snapshot when compareId changes
-  useEffect(() => {
-    if (compareId === '__current__') { setCompareSnapshot(null); return; }
-    fetch(`/api/agents/${agentId}/snapshots/${compareId}`)
-      .then(r => r.json())
-      .then(setCompareSnapshot);
-  }, [agentId, compareId]);
-
-  const handleCreateManual = async () => {
-    const label = window.prompt('Snapshot label (optional):') ?? '';
-    const r = await fetch(`/api/agents/${agentId}/snapshots`, {
-      method: 'POST', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ label: label || null }),
-    });
-    if (r.ok) {
-      const snap = await r.json();
-      setSnapshots(prev => [snap, ...prev]);
-      setMsg('Snapshot created.');
-    }
-  };
-
-  const handleDelete = async (id: string) => {
-    if (!window.confirm('Delete this snapshot?')) return;
-    await fetch(`/api/agents/${agentId}/snapshots/${id}`, { method: 'DELETE' });
-    setSnapshots(prev => prev.filter(s => s.id !== id));
-    if (selectedId === id) { setSelectedId(null); setFullSnapshot(null); }
-    setMsg('Snapshot deleted.');
-  };
-
-  const handleRestore = async (snap: AgentSnapshot) => {
-    if (!window.confirm(`Restore to snapshot from ${new Date(snap.createdAt).toLocaleString()}?\n\nThis will replace current skills, permissions, and MCPs.`)) return;
-    setRestoring(true);
-    const r = await fetch(`/api/agents/${agentId}/snapshots/${snap.id}/restore`, { method: 'POST' });
-    setRestoring(false);
-    if (r.ok) {
-      setMsg('Restored. Agent is reloading.');
-    } else {
-      const err = await r.json();
-      setMsg(`Restore failed: ${err.error}`);
-    }
-  };
-
-  const fmt = (d: Date | string) => {
-    const dt = new Date(d);
-    return `${dt.toLocaleDateString()} ${dt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
-  };
-
-  // Build comparison target: live state or a selected historical snapshot
-  const currentAsSnapshot: AgentSnapshot | null = compareId === '__current__' ? liveSnapshot : compareSnapshot;
-
-  if (loading) return (
-    <div style={{ display: 'flex', gap: 20, minHeight: 500 }}>
-      <div style={{ width: 280, flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
-          <div style={{ width: 70, height: 13, borderRadius: 5, background: 'var(--surface-2)' }} />
-          <div style={{ width: 110, height: 30, borderRadius: 8, background: 'var(--surface-2)' }} />
-        </div>
-        {[1, 2, 3, 4].map(i => (
-          <div key={i} style={{
-            background: '#fff', borderRadius: 'var(--radius)', padding: '14px 16px',
-            boxShadow: 'var(--shadow-card)', opacity: 1 - (i - 1) * 0.2,
-          }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
-              <div style={{ width: 70, height: 18, borderRadius: 6, background: 'var(--surface-2)' }} />
-              <div style={{ width: 50, height: 11, borderRadius: 4, background: 'var(--surface-2)' }} />
-            </div>
-            <div style={{ width: '55%', height: 11, borderRadius: 4, background: 'var(--surface-2)' }} />
-          </div>
-        ))}
-      </div>
-      <div style={{ flex: 1, background: '#fff', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-card)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <div style={{ fontSize: 13, color: 'var(--subtle)' }}>Loading history…</div>
-      </div>
-    </div>
-  );
-
-  return (
-    <div style={{ display: 'flex', gap: 20, minHeight: 500, alignItems: 'flex-start' }}>
-
-      {/* ── Left: snapshot list ────────────────────────────────────────────── */}
-      <div style={{ width: 280, flexShrink: 0 }}>
-        {/* Header */}
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
-          <span style={{
-            fontSize: 11, fontWeight: 700, letterSpacing: '0.08em',
-            color: 'var(--subtle)', textTransform: 'uppercase',
-          }}>
-            {snapshots.length} snapshot{snapshots.length !== 1 ? 's' : ''}
-          </span>
-          {canEdit && (
-            <button onClick={handleCreateManual} style={{
-              background: 'var(--accent)', color: '#fff', border: 'none',
-              borderRadius: 'var(--radius-sm)', padding: '7px 13px',
-              fontSize: 12, fontWeight: 600, cursor: 'pointer',
-              fontFamily: 'var(--font-sans)', letterSpacing: '-0.01em',
-              boxShadow: 'var(--shadow-sm)', transition: 'opacity 0.15s',
-            }}
-              onMouseEnter={e => (e.currentTarget.style.opacity = '0.85')}
-              onMouseLeave={e => (e.currentTarget.style.opacity = '1')}
-            >+ Snapshot</button>
-          )}
-        </div>
-
-        {msg && (
-          <div style={{
-            fontSize: 12, color: '#16a34a', background: '#f0fdf4',
-            border: '1px solid #bbf7d0', borderRadius: 8,
-            padding: '8px 12px', marginBottom: 10,
-          }}>{msg}</div>
-        )}
-
-        {snapshots.length === 0 ? (
-          <div style={{
-            background: '#fff', borderRadius: 'var(--radius)',
-            boxShadow: 'var(--shadow-card)', padding: '28px 20px',
-            textAlign: 'center',
-          }}>
-            <Camera size={22} style={{ marginBottom: 10, color: 'var(--border-2)' }} />
-            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)', marginBottom: 6 }}>No snapshots yet</div>
-            <div style={{ fontSize: 12, color: 'var(--muted)', lineHeight: 1.6 }}>
-              Snapshots are saved automatically when you change skills, MCPs, or permissions.
-            </div>
-          </div>
-        ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-            {snapshots.map(snap => {
-              const isSelected = snap.id === selectedId;
-              return (
-                <div
-                  key={snap.id}
-                  onClick={() => { setSelectedId(isSelected ? null : snap.id); setCompareId('__current__'); setCompareSnapshot(null); }}
-                  style={{
-                    background: '#fff',
-                    borderRadius: 'var(--radius)',
-                    boxShadow: isSelected ? '0 0 0 2px var(--accent), var(--shadow-card)' : 'var(--shadow-card)',
-                    padding: '13px 15px', cursor: 'pointer',
-                    transition: 'box-shadow 0.15s',
-                  }}
-                  onMouseEnter={e => { if (!isSelected) (e.currentTarget as HTMLElement).style.boxShadow = 'var(--shadow-hover)'; }}
-                  onMouseLeave={e => { if (!isSelected) (e.currentTarget as HTMLElement).style.boxShadow = 'var(--shadow-card)'; }}
-                >
-                  {/* Top row: badge + author */}
-                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 7 }}>
-                    <TriggerBadge trigger={snap.trigger} />
-                    <span style={{ fontSize: 11, color: 'var(--subtle)', fontFamily: 'var(--font-mono)' }}>{snap.createdBy}</span>
-                  </div>
-
-                  {/* Timestamp */}
-                  <div style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--text)', marginBottom: snap.label ? 4 : 0 }}>
-                    {fmt(snap.createdAt)}
-                  </div>
-
-                  {/* Optional label */}
-                  {snap.label && (
-                    <div style={{
-                      fontSize: 11.5, color: 'var(--muted)', fontStyle: 'italic',
-                      marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-                    }}>{snap.label}</div>
-                  )}
-
-                  {/* Actions — only when selected */}
-                  {isSelected && canEdit && (
-                    <div style={{ display: 'flex', gap: 7, marginTop: 11, paddingTop: 11, borderTop: '1px solid var(--border)' }} onClick={e => e.stopPropagation()}>
-                      <button
-                        onClick={() => handleRestore(snap)}
-                        disabled={restoring}
-                        style={{
-                          flex: 1, fontSize: 12, padding: '6px 0', borderRadius: 6, cursor: restoring ? 'not-allowed' : 'pointer',
-                          background: '#16a34a', color: '#fff', border: 'none',
-                          fontFamily: 'var(--font-sans)', fontWeight: 600, transition: 'opacity 0.15s',
-                        }}
-                        onMouseEnter={e => { if (!restoring) (e.currentTarget.style.opacity = '0.85'); }}
-                        onMouseLeave={e => (e.currentTarget.style.opacity = '1')}
-                      >{restoring ? 'Restoring…' : 'Restore'}</button>
-                      <button
-                        onClick={() => handleDelete(snap.id)}
-                        style={{
-                          fontSize: 12, padding: '6px 12px', borderRadius: 6, cursor: 'pointer',
-                          background: 'transparent', color: 'var(--red)',
-                          border: '1.5px solid rgba(220,38,38,0.25)',
-                          fontFamily: 'var(--font-sans)', fontWeight: 500, transition: 'all 0.15s',
-                        }}
-                        onMouseEnter={e => { (e.currentTarget.style.background = 'var(--red)'); (e.currentTarget.style.color = '#fff'); (e.currentTarget.style.borderColor = 'var(--red)'); }}
-                        onMouseLeave={e => { (e.currentTarget.style.background = 'transparent'); (e.currentTarget.style.color = 'var(--red)'); (e.currentTarget.style.borderColor = 'rgba(220,38,38,0.25)'); }}
-                      >Delete</button>
-                    </div>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
-
-      {/* ── Right: diff panel ─────────────────────────────────────────────── */}
-      {loadingDetail ? (
-        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
-          {/* Compare bar skeleton */}
-          <div style={{ background: '#fff', borderRadius: 'var(--radius)', boxShadow: 'var(--shadow-card)', padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 12 }}>
-            <div style={{ width: 90, height: 14, borderRadius: 4, background: 'var(--surface-2)' }} />
-            <div style={{ flex: 1, height: 34, borderRadius: 8, background: 'var(--surface-2)' }} />
-          </div>
-          {/* Section skeletons */}
-          {[120, 80, 60, 200].map((h, i) => (
-            <div key={i} style={{ background: '#fff', borderRadius: 'var(--radius)', boxShadow: 'var(--shadow-card)', overflow: 'hidden', opacity: 1 - i * 0.15 }}>
-              <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--border)' }}>
-                <div style={{ width: 70, height: 11, borderRadius: 4, background: 'var(--surface-2)' }} />
-              </div>
-              <div style={{ padding: '16px 18px' }}>
-                <div style={{ height: h, borderRadius: 6, background: 'var(--surface-2)' }} />
-              </div>
-            </div>
-          ))}
-        </div>
-      ) : fullSnapshot ? (
-        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
-
-          {/* Compare bar */}
-          <div style={{
-            background: '#fff', borderRadius: 'var(--radius)',
-            boxShadow: 'var(--shadow-card)', padding: '14px 18px',
-            display: 'flex', alignItems: 'center', gap: 12,
-          }}>
-            <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--muted)', letterSpacing: '0.02em', whiteSpace: 'nowrap' }}>
-              Compare with
-            </span>
-            <select
-              value={compareId}
-              onChange={e => setCompareId(e.target.value)}
-              style={{
-                flex: 1, fontSize: 13, padding: '7px 12px', borderRadius: 8,
-                border: '1.5px solid var(--border)', background: 'var(--surface-2)',
-                color: 'var(--text)', fontFamily: 'var(--font-sans)', outline: 'none', cursor: 'pointer',
-              }}
-              onFocus={e => (e.currentTarget.style.borderColor = 'var(--accent)')}
-              onBlur={e => (e.currentTarget.style.borderColor = 'var(--border)')}
-            >
-              <option value="__current__">Current state</option>
-              {snapshots.filter(s => s.id !== selectedId).map(s => (
-                <option key={s.id} value={s.id}>{fmt(s.createdAt)} — {s.trigger}{s.label ? ` · ${s.label}` : ''}</option>
-              ))}
-            </select>
-          </div>
-
-          {/* Diff sections — wait for compare target to load */}
-          {!currentAsSnapshot ? (
-            <div style={{
-              background: '#fff', borderRadius: 'var(--radius)', boxShadow: 'var(--shadow-card)',
-              padding: '24px 18px', textAlign: 'center', color: 'var(--subtle)', fontSize: 13,
-            }}>
-              Loading comparison…
-            </div>
-          ) : [
-            { title: 'Skills',       content: <SkillDiff snapshot={fullSnapshot} current={currentAsSnapshot} /> },
-            { title: 'Tools',        content: <PermsDiff snapshot={fullSnapshot} current={currentAsSnapshot} /> },
-            { title: 'MCPs',         content: <McpsDiff snapshot={fullSnapshot} current={currentAsSnapshot} allMcps={allMcps} /> },
-            { title: 'System Prompt', content: (() => {
-                if (!fullSnapshot.compiledMd || !currentAsSnapshot.compiledMd)
-                  return <p style={{ fontSize: 12.5, color: 'var(--subtle)', margin: 0 }}>Not available for this snapshot</p>;
-                const diff = lineDiff(fullSnapshot.compiledMd.trim(), currentAsSnapshot.compiledMd.trim());
-                const changed = diff.some(l => l.type !== 'same');
-                if (!changed) return <p style={{ fontSize: 12.5, color: 'var(--subtle)', margin: 0 }}>No changes</p>;
-                return (
-                  <pre style={{
-                    margin: 0, padding: '14px 16px', borderRadius: 8, fontSize: 12,
-                    fontFamily: 'var(--font-mono)', background: 'var(--surface-2)',
-                    border: '1px solid var(--border)', overflow: 'auto', maxHeight: 380,
-                    color: 'var(--text)', lineHeight: 1.7,
-                  }}>
-                    {diff.map((l, i) => (
-                      <div key={i} style={{
-                        background: l.type === 'add' ? 'rgba(34,197,94,0.12)' : l.type === 'remove' ? 'rgba(239,68,68,0.10)' : 'transparent',
-                        color: l.type === 'add' ? '#16a34a' : l.type === 'remove' ? '#dc2626' : 'inherit',
-                        padding: '1px 6px', borderRadius: 3, marginBottom: 1,
-                      }}>
-                        {l.type === 'add' ? '+ ' : l.type === 'remove' ? '- ' : '  '}{l.line}
-                      </div>
-                    ))}
-                  </pre>
-                );
-              })(),
-            },
-          ].map(({ title, content }) => (
-            <div key={title} style={{
-              background: '#fff', borderRadius: 'var(--radius)',
-              boxShadow: 'var(--shadow-card)', overflow: 'hidden',
-            }}>
-              <div style={{
-                padding: '12px 18px', borderBottom: '1px solid var(--border)',
-                fontSize: 11, fontWeight: 700, letterSpacing: '0.08em',
-                color: 'var(--muted)', textTransform: 'uppercase',
-              }}>{title}</div>
-              <div style={{ padding: '16px 18px' }}>{content}</div>
-            </div>
-          ))}
-        </div>
-      ) : (
-        <div style={{
-          flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
-          background: '#fff', borderRadius: 'var(--radius-lg)',
-          boxShadow: 'var(--shadow-card)', gap: 10, padding: 40,
-        }}>
-          <History size={32} style={{ color: 'var(--border-2)' }} />
-          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text)' }}>Select a snapshot</div>
-          <div style={{ fontSize: 13, color: 'var(--muted)', textAlign: 'center', maxWidth: 260, lineHeight: 1.6 }}>
-            Click any snapshot on the left to view what changed at that point in time.
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}