slackhive 0.1.40 → 0.1.42

package/apps/web/src/app/agents/new/page.tsx

@@ -1,1161 +0,0 @@
-'use client';
-
-/**
- * @fileoverview 5-step agent onboarding wizard.
- *
- * Steps: Name & Role → Slack App → Credentials → Tools → Review
- *
- * Route: /agents/new
- * @module web/app/agents/new
- */
-
-import React, { useState, useEffect, useRef } from 'react';
-import { AlertTriangle, Eye, EyeOff } from 'lucide-react';
-import { useRouter } from 'next/navigation';
-import type { Agent, McpServer } from '@slackhive/shared';
-import { generateSlackManifest } from '@/lib/slack-manifest';
-
-// ─── State ────────────────────────────────────────────────────────────────────
-
-interface AgentExportPayload {
-  version: number;
-  exportedAt?: string;
-  claudeMd: string;
-  skills: { category: string; filename: string; content: string; sortOrder: number }[];
-}
-
-interface WizardState {
-  name: string; slug: string; description: string; persona: string;
-  model: string; isBoss: boolean;
-  reportsToIds: string[];
-  slackBotToken: string; slackAppToken: string; slackSigningSecret: string;
-  mcpServerIds: string[];
-  skillTemplate: 'blank' | 'data-analyst' | 'writer' | 'developer';
-  importPayload: AgentExportPayload | null;
-}
-
-const INITIAL: WizardState = {
-  name: '', slug: '', description: '', persona: '',
-  model: 'claude-opus-4-6', isBoss: false,
-  reportsToIds: [],
-  slackBotToken: '', slackAppToken: '', slackSigningSecret: '',
-  mcpServerIds: [], skillTemplate: 'blank', importPayload: null,
-};
-
-const MODELS = [
-  { value: 'claude-opus-4-6',           label: 'Opus 4.6',   sub: 'Most capable' },
-  { value: 'claude-sonnet-4-6',         label: 'Sonnet 4.6', sub: 'Balanced' },
-  { value: 'claude-haiku-4-5-20251001', label: 'Haiku 4.5',  sub: 'Fastest' },
-];
-
-const TEMPLATES = [
-  { value: 'blank',        label: 'Blank',        desc: 'Minimal identity only' },
-  { value: 'data-analyst', label: 'Data Analyst', desc: 'SQL, Redshift, metrics' },
-  { value: 'writer',       label: 'Writer',       desc: 'Content & summaries' },
-  { value: 'developer',    label: 'Developer',    desc: 'Code review & dev' },
-];
-
-// ─── Wizard ───────────────────────────────────────────────────────────────────
-
-/**
- * New agent onboarding wizard.
- *
- * @returns {JSX.Element}
- */
-export default function NewAgentWizard() {
-  const router   = useRouter();
-  const [step, setStep]       = useState(0);
-  const [state, setState]     = useState<WizardState>(INITIAL);
-  const [catalog, setCatalog] = useState<McpServer[]>([]);
-  const [agents, setAgents]   = useState<Agent[]>([]);
-  const [submitting, setSubmitting] = useState(false);
-  const [error, setError]     = useState('');
-
-  const bosses = agents.filter(a => a.isBoss);
-
-  useEffect(() => {
-    fetch('/api/mcps').then(r => r.json()).then(setCatalog);
-    fetch('/api/agents').then(r => r.json()).then((a: Agent[]) => {
-      setAgents(a);
-    }).catch(() => {});
-  }, []);
-
-  const update = (patch: Partial<WizardState>) => setState(s => ({ ...s, ...patch }));
-
-  // Boss agents skip the MCPs & Skills step (their CLAUDE.md is auto-generated)
-  const totalSteps = state.isBoss ? 4 : 5;
-  const stepLabels = state.isBoss
-    ? ['Name & Role', 'Slack App', 'Credentials', 'Review']
-    : ['Name & Role', 'Slack App', 'Credentials', 'Tools', 'Review'];
-
-  const next = () => setStep(s => Math.min(s + 1, totalSteps - 1));
-  const back = () => setStep(s => Math.max(s - 1, 0));
-
-  const canNext = () => {
-    if (step === 0) return !!(state.name && state.slug);
-    if (step === 2) return !!(state.slackBotToken && state.slackAppToken && state.slackSigningSecret);
-    return true;
-  };
-
-  const submit = async () => {
-    setSubmitting(true); setError('');
-    try {
-      const r = await fetch('/api/agents', {
-        method: 'POST', headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          ...state,
-          reportsTo: state.isBoss ? [] : state.reportsToIds,
-        }),
-      });
-      const data = await r.json();
-      if (!r.ok) { setError(data.error ?? 'Failed to create agent'); return; }
-
-      // Apply imported config if provided
-      if (state.importPayload) {
-        const { claudeMd, skills } = state.importPayload;
-        await fetch(`/api/agents/${data.id}/claude-md`, {
-          method: 'PUT', headers: { 'Content-Type': 'text/plain' }, body: claudeMd,
-        });
-        await Promise.all(skills.map(s =>
-          fetch(`/api/agents/${data.id}/skills`, {
-            method: 'POST', headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(s),
-          })
-        ));
-      }
-
-      router.push(`/agents/${data.slug}`);
-    } finally { setSubmitting(false); }
-  };
-
-  return (
-    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
-      {/* Top bar */}
-      <div style={{
-        padding: '18px 36px', borderBottom: '1px solid var(--border)',
-        display: 'flex', alignItems: 'center', gap: 12,
-        background: 'var(--surface)',
-      }}>
-        <a href="/" style={{ color: 'var(--muted)', textDecoration: 'none', fontSize: 12 }}>
-          ← Agents
-        </a>
-        <span style={{ color: 'var(--border-2)' }}>/</span>
-        <span style={{ fontSize: 13, color: 'var(--text)', fontWeight: 500 }}>New Agent</span>
-      </div>
-
-      {/* Content */}
-      <div style={{ flex: 1, display: 'flex', padding: '40px 36px', gap: 36, maxWidth: 860, width: '100%' }}>
-
-        {/* ── Left: step nav ───────────────────────────────────────────── */}
-        <div style={{ width: 180, flexShrink: 0 }}>
-          <div style={{ position: 'sticky', top: 40 }}>
-            {stepLabels.map((label, i) => (
-              <div
-                key={i}
-                onClick={() => i < step && setStep(i)}
-                style={{
-                  display: 'flex', alignItems: 'center', gap: 10,
-                  padding: '9px 0', cursor: i < step ? 'pointer' : 'default',
-                }}
-              >
-                <div style={{
-                  width: 26, height: 26, borderRadius: '50%', flexShrink: 0,
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  fontSize: i < step ? 11 : 12, fontWeight: 600,
-                  background: i < step ? 'var(--accent)' :
-                               i === step ? 'rgba(59,130,246,0.15)' :
-                               'var(--border)',
-                  color: i < step ? '#fff' :
-                         i === step ? 'var(--accent)' :
-                         'var(--subtle)',
-                  border: i === step ? '1.5px solid var(--accent)' : '1.5px solid transparent',
-                  transition: 'all 0.2s',
-                }}>
-                  {i < step ? '✓' : i + 1}
-                </div>
-                <span style={{
-                  fontSize: 13,
-                  fontWeight: i === step ? 600 : 400,
-                  color: i === step ? 'var(--text)' : i < step ? 'var(--muted)' : 'var(--subtle)',
-                  transition: 'color 0.2s',
-                }}>{label}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* ── Right: step panel ────────────────────────────────────────── */}
-        <div style={{ flex: 1, minWidth: 0 }}>
-          <div
-            style={{
-              background: 'var(--surface)',
-              borderRadius: 'var(--radius-lg)',
-              padding: '32px',
-              boxShadow: 'var(--shadow-card)',
-            }}
-            className="fade-up"
-            key={step}
-          >
-            {step === 0 && <Step1Identity state={state} update={update} bosses={bosses} />}
-            {step === 1 && <Step2SlackApp state={state} />}
-            {step === 2 && <Step3Tokens state={state} update={update} />}
-            {step === 3 && !state.isBoss && <Step4McpsSkills state={state} update={update} catalog={catalog} />}
-            {((step === 3 && state.isBoss) || step === 4) && <Step5Review state={state} update={update} catalog={catalog} agents={agents} />}
-          </div>
-
-          {error && (
-            <div style={{
-              marginTop: 12, background: 'rgba(239,68,68,0.1)', border: '1px solid rgba(239,68,68,0.3)',
-              borderRadius: 8, padding: '10px 14px', fontSize: 13, color: '#f87171',
-            }}>{error}</div>
-          )}
-
-          {/* Nav buttons */}
-          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 16 }}>
-            <button
-              onClick={back} disabled={step === 0}
-              style={{
-                background: 'transparent', color: step === 0 ? 'var(--subtle)' : 'var(--muted)',
-                border: '1.5px solid var(--border)', borderRadius: 'var(--radius)',
-                padding: '10px 20px', fontSize: 14, fontWeight: 500, cursor: step === 0 ? 'not-allowed' : 'pointer',
-                fontFamily: 'var(--font-sans)', transition: 'border-color 0.15s, color 0.15s',
-              }}
-              onMouseEnter={e => { if (step > 0) { (e.currentTarget as HTMLElement).style.color = 'var(--text)'; (e.currentTarget as HTMLElement).style.borderColor = 'var(--border-2)'; } }}
-              onMouseLeave={e => { (e.currentTarget as HTMLElement).style.color = 'var(--muted)'; (e.currentTarget as HTMLElement).style.borderColor = 'var(--border)'; }}
-            >← Back</button>
-
-            {step < totalSteps - 1 ? (
-              <button
-                onClick={next} disabled={!canNext()}
-                style={{
-                  background: canNext() ? 'var(--accent)' : 'var(--border)',
-                  color: '#fff', border: 'none', borderRadius: 'var(--radius)',
-                  padding: '10px 24px', fontSize: 14, fontWeight: 600,
-                  cursor: canNext() ? 'pointer' : 'not-allowed',
-                  fontFamily: 'var(--font-sans)', transition: 'opacity 0.15s, transform 0.15s',
-                  boxShadow: canNext() ? 'var(--shadow-sm)' : 'none',
-                  letterSpacing: '-0.01em',
-                }}
-                onMouseEnter={e => { if (canNext()) { (e.currentTarget as HTMLElement).style.opacity = '0.88'; (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)'; }}
-              >Continue →</button>
-            ) : (
-              <button
-                onClick={submit}
-                disabled={submitting || !state.slackBotToken || !state.slackAppToken || !state.slackSigningSecret}
-                style={{
-                  background: submitting ? 'var(--border)' : '#16a34a',
-                  color: '#fff', border: 'none', borderRadius: 'var(--radius)',
-                  padding: '10px 24px', fontSize: 14, fontWeight: 600,
-                  cursor: submitting ? 'not-allowed' : 'pointer',
-                  fontFamily: 'var(--font-sans)', transition: 'opacity 0.15s, transform 0.15s',
-                  boxShadow: !submitting ? 'var(--shadow-sm)' : 'none',
-                  letterSpacing: '-0.01em',
-                }}
-                onMouseEnter={e => { if (!submitting) { (e.currentTarget as HTMLElement).style.opacity = '0.88'; (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)'; }}
-              >{submitting ? 'Creating…' : 'Create Agent'}</button>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ─── Step 1: Identity ─────────────────────────────────────────────────────────
-
-function Step1Identity({ state, update, bosses }: {
-  state: WizardState; update: (p: Partial<WizardState>) => void;
-  bosses: Agent[];
-}) {
-  const autoSlug = (name: string) =>
-    name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
-
-  const toggleBoss = (id: string) => {
-    const next = state.reportsToIds.includes(id)
-      ? state.reportsToIds.filter(x => x !== id)
-      : [...state.reportsToIds, id];
-    update({ reportsToIds: next });
-  };
-
-  return (
-    <div>
-      <StepHeader step={1} title="Name your agent" desc="Give it a name and decide if it leads a team or works as a specialist." />
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
-        <Field label="Agent Name *" value={state.name} placeholder="e.g. GILFOYLE"
-          onChange={v => update({ name: v, slug: autoSlug(v) })} />
-        <Field label="Slug *" value={state.slug} placeholder="e.g. gilfoyle"
-          hint="Lowercase, hyphens only"
-          onChange={v => update({ slug: v.toLowerCase().replace(/[^a-z0-9-]/g, '') })} />
-      </div>
-      <Field label="Description" value={state.description} placeholder="Data warehouse NLQ, Redshift queries, business metrics"
-        hint="Used by the boss to decide when to delegate here."
-        onChange={v => update({ description: v })} />
-      <TextArea label="Persona" value={state.persona}
-        placeholder="You are GILFOYLE, a cynical but brilliant data engineer…"
-        hint="Injected into CLAUDE.md as the agent's identity and personality."
-        rows={3} onChange={v => update({ persona: v })} />
-
-      {/* Model selector */}
-      <div style={{ marginBottom: 14 }}>
-        <label style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--muted)', marginBottom: 8 }}>
-          Model
-        </label>
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
-          {MODELS.map(m => (
-            <label key={m.value} style={{
-              display: 'flex', flexDirection: 'column', gap: 2,
-              padding: '10px 12px', border: `1px solid ${state.model === m.value ? 'var(--accent)' : 'var(--border)'}`,
-              borderRadius: 8, cursor: 'pointer',
-              background: state.model === m.value ? 'rgba(59,130,246,0.08)' : 'transparent',
-              transition: 'border-color 0.15s, background 0.15s',
-            }}>
-              <input type="radio" name="model" value={m.value} checked={state.model === m.value}
-                onChange={() => update({ model: m.value })} style={{ display: 'none' }} />
-              <span style={{ fontSize: 12.5, fontWeight: 600, color: state.model === m.value ? 'var(--accent)' : 'var(--text)' }}>
-                {m.label}
-              </span>
-              <span style={{ fontSize: 11, color: 'var(--subtle)' }}>{m.sub}</span>
-            </label>
-          ))}
-        </div>
-      </div>
-
-      {/* Boss toggle */}
-      <div style={{ marginBottom: 14 }}>
-        <label style={{
-          display: 'flex', alignItems: 'center', gap: 10,
-          padding: '10px 14px', border: `1px solid ${state.isBoss ? 'var(--accent)' : 'var(--border)'}`,
-          borderRadius: 8, cursor: 'pointer',
-          background: state.isBoss ? 'rgba(59,130,246,0.08)' : 'transparent',
-          transition: 'all 0.15s',
-        }}>
-          <input type="checkbox" checked={state.isBoss}
-            onChange={e => update({ isBoss: e.target.checked, reportsToIds: [] })}
-            style={{ accentColor: 'var(--accent)', width: 14, height: 14 }} />
-          <div>
-            <div style={{ fontSize: 13, fontWeight: 600, color: state.isBoss ? 'var(--accent)' : 'var(--text)' }}>
-              This agent is a Boss
-            </div>
-            <div style={{ fontSize: 11.5, color: 'var(--subtle)' }}>
-              Boss agents orchestrate specialists. Their CLAUDE.md is auto-generated from the team.
-            </div>
-          </div>
-        </label>
-      </div>
-
-      {/* Reports to — multi-select boss agents (only shown for non-boss agents) */}
-      {!state.isBoss && (
-        <div style={{ marginBottom: 14 }}>
-          <label style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--muted)', marginBottom: 6 }}>
-            Reports to
-          </label>
-          {bosses.length === 0 ? (
-            <div style={{
-              border: '1px dashed var(--border)', borderRadius: 8, padding: '12px 14px',
-              fontSize: 12.5, color: 'var(--subtle)',
-            }}>
-              No boss agents yet — create a boss first, or mark this agent as a boss above.
-            </div>
-          ) : (
-            <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
-              {bosses.map((boss, i) => (
-                <label key={boss.id} style={{
-                  display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px',
-                  cursor: 'pointer',
-                  borderBottom: i < bosses.length - 1 ? '1px solid var(--border)' : 'none',
-                  background: state.reportsToIds.includes(boss.id) ? 'rgba(59,130,246,0.06)' : 'transparent',
-                  transition: 'background 0.12s',
-                }}>
-                  <input type="checkbox"
-                    checked={state.reportsToIds.includes(boss.id)}
-                    onChange={() => toggleBoss(boss.id)}
-                    style={{ accentColor: 'var(--accent)', width: 14, height: 14 }} />
-                  <span style={{ fontSize: 13, color: 'var(--text)' }}>{boss.name}</span>
-                </label>
-              ))}
-            </div>
-          )}
-          {state.reportsToIds.length > 0 && (
-            <p style={{ margin: '5px 0 0', fontSize: 11, color: 'var(--subtle)' }}>
-              This agent will appear in the team registry of {state.reportsToIds.length} boss{state.reportsToIds.length > 1 ? 'es' : ''}.
-            </p>
-          )}
-        </div>
-      )}
-
-      {/* Import config */}
-    </div>
-  );
-}
-
-// ─── Import config picker ─────────────────────────────────────────────────────
-
-function ImportConfigPicker({ value, onChange, compact }: {
-  value: AgentExportPayload | null;
-  onChange: (p: AgentExportPayload | null) => void;
-  compact?: boolean;
-}) {
-  const [error, setError] = useState('');
-  const ref = useRef<HTMLInputElement>(null);
-
-  const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    e.target.value = '';
-    setError('');
-    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)) {
-          setError('Invalid file — must contain claudeMd (string) and skills (array)'); return;
-        }
-        if (typeof data.version !== 'number') {
-          setError('Invalid file — missing version field'); return;
-        }
-        onChange(data);
-      } catch {
-        setError('Could not parse file — must be valid JSON');
-      }
-    };
-    reader.readAsText(file);
-  };
-
-  if (compact) {
-    return (
-      <div>
-        {!value ? (
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
-            <div>
-              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)', marginBottom: 1 }}>Import config</div>
-              <div style={{ fontSize: 11.5, color: 'var(--subtle)' }}>Load CLAUDE.md + skills from an exported agent</div>
-              {error && <div style={{ fontSize: 11, color: 'var(--danger)', marginTop: 3 }}>{error}</div>}
-            </div>
-            <button type="button" onClick={() => ref.current?.click()} style={{
-              display: 'flex', alignItems: 'center', gap: 5, flexShrink: 0,
-              padding: '6px 12px', borderRadius: 6,
-              border: '1px solid var(--border-2)', background: '#fff',
-              fontSize: 12, fontWeight: 500, color: 'var(--muted)', cursor: 'pointer',
-            }}>
-              <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
-                <path d="M8 2v9M4 7l4 4 4-4M2 13h12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
-              </svg>
-              Choose file
-            </button>
-          </div>
-        ) : (
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
-            <div>
-              <div style={{ fontSize: 13, fontWeight: 600, color: '#7c3aed' }}>
-                Config loaded
-              </div>
-              <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>
-                {value.skills.length} skill{value.skills.length !== 1 ? 's' : ''} · CLAUDE.md included
-              </div>
-            </div>
-            <button type="button" onClick={() => { onChange(null); setError(''); }} style={{
-              background: 'none', border: 'none', cursor: 'pointer',
-              fontSize: 11.5, color: 'var(--muted)', padding: '3px 6px',
-            }}>Remove</button>
-          </div>
-        )}
-        <input ref={ref} type="file" accept=".json" style={{ display: 'none' }} onChange={handleFile} />
-      </div>
-    );
-  }
-
-  return (
-    <div style={{
-      marginTop: 20, padding: '14px 16px', borderRadius: 10,
-      border: `1.5px dashed ${value ? '#8b5cf6' : 'var(--border-2)'}`,
-      background: value ? 'rgba(139,92,246,0.03)' : 'var(--surface)',
-      transition: 'all 0.2s',
-    }}>
-      {!value ? (
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
-          <div>
-            <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text)', marginBottom: 2 }}>
-              Import from existing config
-            </div>
-            <div style={{ fontSize: 12, color: 'var(--muted)' }}>
-              Load CLAUDE.md + skills from a previously exported agent
-            </div>
-            {error && <div style={{ fontSize: 11.5, color: 'var(--danger)', marginTop: 4 }}>{error}</div>}
-          </div>
-          <button type="button" onClick={() => ref.current?.click()} style={{
-            display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0,
-            padding: '7px 14px', borderRadius: 7,
-            border: '1.5px solid var(--border-2)', background: '#fff',
-            fontSize: 12.5, fontWeight: 500, color: 'var(--muted)', cursor: 'pointer',
-            transition: 'all 0.15s',
-          }}
-            onMouseEnter={e => { (e.currentTarget as HTMLElement).style.borderColor = '#8b5cf6'; (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)'; }}
-          >
-            <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
-              <path d="M8 2v9M4 7l4 4 4-4M2 13h12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
-            </svg>
-            Choose file
-          </button>
-        </div>
-      ) : (
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'space-between' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-            <div style={{
-              width: 32, height: 32, borderRadius: 8, flexShrink: 0,
-              background: 'rgba(139,92,246,0.1)',
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-            }}>
-              <svg width="15" height="15" viewBox="0 0 16 16" fill="none">
-                <path d="M9 2H4a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V6L9 2z" stroke="#8b5cf6" strokeWidth="1.4" strokeLinejoin="round"/>
-                <path d="M9 2v4h4" stroke="#8b5cf6" strokeWidth="1.4" strokeLinejoin="round"/>
-              </svg>
-            </div>
-            <div>
-              <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text)' }}>
-                Config file loaded
-              </div>
-              <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>
-                {value.skills.length} skill{value.skills.length !== 1 ? 's' : ''} · CLAUDE.md included
-                {value.exportedAt && ` · ${new Date(value.exportedAt).toLocaleDateString()}`}
-              </div>
-            </div>
-          </div>
-          <button type="button" onClick={() => { onChange(null); setError(''); }} style={{
-            background: 'none', border: 'none', cursor: 'pointer',
-            fontSize: 11.5, color: 'var(--muted)', padding: '4px 8px', borderRadius: 5,
-          }}>Remove</button>
-        </div>
-      )}
-      <input ref={ref} type="file" accept=".json" style={{ display: 'none' }} onChange={handleFile} />
-    </div>
-  );
-}
-
-// ─── Step 2: Slack App ────────────────────────────────────────────────────────
-
-function Step2SlackApp({ state }: { state: WizardState }) {
-  const [copied, setCopied] = useState(false);
-  const manifest = state.name
-    ? JSON.stringify(generateSlackManifest({ name: state.name, description: state.description, isBoss: state.isBoss }), null, 2)
-    : '{}';
-
-  const copy = () => { navigator.clipboard.writeText(manifest); setCopied(true); setTimeout(() => setCopied(false), 2000); };
-
-  return (
-    <div>
-      <StepHeader step={2} title="Create a Slack app" desc="Paste this manifest into Slack — it configures everything automatically in about 2 minutes." />
-
-      {/* Steps */}
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 0, marginBottom: 20 }}>
-        {([
-          {
-            n: 1,
-            title: 'Open api.slack.com/apps',
-            body: <>Click <Kbd>Create New App</Kbd> → <Kbd>From a manifest</Kbd> and select your workspace.</>,
-          },
-          {
-            n: 2,
-            title: 'Paste the manifest',
-            body: <>Switch to the <Kbd>JSON</Kbd> tab, paste the manifest below, click <Kbd>Next</Kbd> → <Kbd>Create</Kbd>.</>,
-          },
-          {
-            n: 3,
-            title: 'Install to workspace',
-            body: <>In the sidebar go to <Kbd>Install App</Kbd> → <Kbd>Install to Workspace</Kbd> → Allow. This generates your Bot Token — it won&apos;t appear until you install.</>,
-          },
-        ] as { n: number; title: string; body: React.ReactNode }[]).map(({ n, title, body }, i, arr) => (
-          <div key={n} style={{ display: 'flex', gap: 0 }}>
-            {/* Connector line + dot */}
-            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: 32, flexShrink: 0 }}>
-              <div style={{
-                width: 26, height: 26, borderRadius: '50%', flexShrink: 0,
-                background: 'var(--accent)', color: '#fff',
-                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                fontSize: 11, fontWeight: 700, zIndex: 1,
-              }}>{n}</div>
-              {i < arr.length - 1 && (
-                <div style={{ width: 2, flex: 1, background: 'var(--border)', minHeight: 20, marginTop: 4 }} />
-              )}
-            </div>
-            {/* Content */}
-            <div style={{ paddingLeft: 14, paddingBottom: i < arr.length - 1 ? 20 : 0, paddingTop: 3 }}>
-              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)', marginBottom: 3 }}>{title}</div>
-              <div style={{ fontSize: 12.5, color: 'var(--muted)', lineHeight: 1.65 }}>{body}</div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Manifest block */}
-      <div style={{ background: 'var(--surface-2)', border: '1.5px solid var(--border)', borderRadius: 'var(--radius)', overflow: 'hidden' }}>
-        <div style={{
-          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
-          padding: '10px 16px', borderBottom: '1px solid var(--border)',
-        }}>
-          <span style={{ fontSize: 11.5, color: 'var(--muted)', fontFamily: 'var(--font-mono)' }}>
-            {state.name || 'agent'}-manifest.json
-          </span>
-          <button onClick={copy} style={{
-            background: copied ? '#dcfce7' : 'var(--accent)',
-            color: copied ? '#16a34a' : '#fff',
-            border: 'none', cursor: 'pointer', fontSize: 12, fontWeight: 600,
-            fontFamily: 'var(--font-sans)', padding: '5px 12px', borderRadius: 6,
-            transition: 'all 0.15s',
-          }}>{copied ? '✓ Copied!' : 'Copy manifest'}</button>
-        </div>
-        <pre style={{
-          margin: 0, padding: '16px', fontSize: 11.5, color: 'var(--accent)',
-          fontFamily: 'var(--font-mono)', overflow: 'auto', maxHeight: 260, lineHeight: 1.6,
-        }}>{manifest}</pre>
-      </div>
-    </div>
-  );
-}
-
-// ─── Step 3: Tokens ───────────────────────────────────────────────────────────
-
-function Step3Tokens({ state, update }: { state: WizardState; update: (p: Partial<WizardState>) => void }) {
-  return (
-    <div>
-      <StepHeader step={3} title="Add your tokens" desc="Three values from your Slack app — paste each one below." />
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-        <TokenCard
-          label="Bot Token"
-          prefix="xoxb-"
-          path={['OAuth & Permissions', 'Bot User OAuth Token']}
-          screenshot={<BotTokenScreenshot />}
-          placeholder="xoxb-..."
-          value={state.slackBotToken}
-          onChange={v => update({ slackBotToken: v })}
-        />
-        <TokenCard
-          label="App-Level Token"
-          prefix="xapp-"
-          path={['Basic Information', 'App-Level Tokens']}
-          note={<>Click <strong>Generate Token and Scopes</strong>, add scope <code style={{ fontFamily: 'var(--font-mono)', fontSize: 11, background: 'rgba(59,130,246,0.08)', color: 'var(--accent)', padding: '1px 6px', borderRadius: 4 }}>connections:write</code>, then generate.</>}
-          screenshot={<AppTokenScreenshot />}
-          placeholder="xapp-..."
-          value={state.slackAppToken}
-          onChange={v => update({ slackAppToken: v })}
-        />
-        <TokenCard
-          label="Signing Secret"
-          prefix=""
-          path={['Basic Information', 'App Credentials', 'Signing Secret']}
-          screenshot={<SigningSecretScreenshot />}
-          placeholder="abc123def..."
-          value={state.slackSigningSecret}
-          onChange={v => update({ slackSigningSecret: v })}
-        />
-      </div>
-    </div>
-  );
-}
-
-// ─── Token card ───────────────────────────────────────────────────────────────
-
-function TokenCard({ label, prefix, path, note, screenshot, placeholder, value, onChange }: {
-  label: string; prefix: string;
-  path: string[];
-  note?: React.ReactNode;
-  screenshot?: React.ReactNode;
-  placeholder: string; value: string; onChange: (v: string) => void;
-}) {
-  const [show, setShow] = useState(false);
-  const [showScreenshot, setShowScreenshot] = useState(false);
-  const isDirty = value.length > 0;
-  const isValid = prefix ? value.startsWith(prefix) : value.length >= 8;
-
-  return (
-    <div style={{
-      borderRadius: 'var(--radius)',
-      border: `1.5px solid ${isDirty ? (isValid ? '#86efac' : '#fca5a5') : 'var(--border)'}`,
-      background: '#fff',
-      overflow: 'hidden',
-      transition: 'border-color 0.2s',
-    }}>
-      {/* Header: label + breadcrumb */}
-      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
-          <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)', flexShrink: 0 }}>{label}</span>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 5, overflow: 'hidden' }}>
-            {path.map((p, i) => (
-              <React.Fragment key={i}>
-                {i > 0 && <span style={{ fontSize: 11, color: 'var(--border-2)' }}>›</span>}
-                <span style={{
-                  fontSize: 11.5, whiteSpace: 'nowrap',
-                  color: i === path.length - 1 ? 'var(--muted)' : 'var(--subtle)',
-                  fontWeight: i === path.length - 1 ? 500 : 400,
-                }}>{p}</span>
-              </React.Fragment>
-            ))}
-          </div>
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>
-          {screenshot && (
-            <button
-              type="button"
-              onClick={() => setShowScreenshot(s => !s)}
-              style={{
-                background: showScreenshot ? 'var(--surface-2)' : 'none',
-                border: '1px solid var(--border)', borderRadius: 5,
-                padding: '3px 8px', cursor: 'pointer',
-                color: 'var(--muted)', fontSize: 11, fontWeight: 500,
-                fontFamily: 'var(--font-sans)', transition: 'all 0.15s',
-              }}
-            >{showScreenshot ? 'Hide guide' : 'Where?'}</button>
-          )}
-          {isDirty && (
-            <span style={{ fontSize: 12, fontWeight: 700, color: isValid ? '#16a34a' : '#ef4444' }}>
-              {isValid ? '✓' : '✗'}
-            </span>
-          )}
-        </div>
-      </div>
-
-      {/* Screenshot guide */}
-      {showScreenshot && screenshot && (
-        <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)', background: 'var(--surface-2)' }}>
-          {screenshot}
-        </div>
-      )}
-
-      {/* Note */}
-      {note && (
-        <div style={{ padding: '8px 16px', borderBottom: '1px solid var(--border)', fontSize: 12, color: 'var(--muted)', background: 'var(--surface-2)', lineHeight: 1.6 }}>
-          {note}
-        </div>
-      )}
-
-      {/* Input */}
-      <div style={{ display: 'flex', alignItems: 'center', padding: '0 4px 0 16px', gap: 6 }}>
-        <input
-          type={show ? 'text' : 'password'}
-          value={value}
-          onChange={e => onChange(e.target.value)}
-          placeholder={placeholder}
-          style={{
-            flex: 1, background: 'transparent', border: 'none',
-            padding: '12px 0', color: 'var(--text)',
-            fontSize: 13, fontFamily: value ? 'var(--font-mono)' : 'var(--font-sans)',
-            outline: 'none',
-          }}
-        />
-        <button
-          type="button"
-          onClick={() => setShow(s => !s)}
-          style={{
-            background: 'none', border: 'none', cursor: 'pointer',
-            color: 'var(--subtle)', fontSize: 12, padding: '8px',
-            fontFamily: 'var(--font-sans)', lineHeight: 1,
-          }}
-        >{show ? <EyeOff size={14} /> : <Eye size={14} />}</button>
-      </div>
-    </div>
-  );
-}
-
-// ─── Slack UI screenshot mockups ──────────────────────────────────────────────
-
-const slackStyles = {
-  wrap: {
-    borderRadius: 8, overflow: 'hidden', border: '1px solid #e0e0e0',
-    fontFamily: 'Lato, -apple-system, sans-serif', fontSize: 12,
-  } as React.CSSProperties,
-  chrome: {
-    background: '#f1f1f1', padding: '6px 10px',
-    borderBottom: '1px solid #ddd', display: 'flex', alignItems: 'center', gap: 8,
-  } as React.CSSProperties,
-  urlBar: {
-    flex: 1, background: '#fff', border: '1px solid #ddd', borderRadius: 4,
-    padding: '3px 8px', fontSize: 10.5, color: '#555',
-    fontFamily: 'monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' as const,
-  } as React.CSSProperties,
-  body: { background: '#fff', padding: '14px 16px' } as React.CSSProperties,
-  sectionTitle: { fontSize: 12, fontWeight: 700, color: '#1d1c1d', marginBottom: 10 } as React.CSSProperties,
-  row: {
-    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-    padding: '8px 10px', border: '1px solid #e8e8e8', borderRadius: 5,
-  } as React.CSSProperties,
-  label: { fontSize: 11.5, color: '#616061' } as React.CSSProperties,
-  token: { fontSize: 11, fontFamily: 'monospace', color: '#1d1c1d', letterSpacing: 1 } as React.CSSProperties,
-  greenBtn: {
-    background: '#007a5a', color: '#fff', border: 'none', borderRadius: 4,
-    padding: '5px 10px', fontSize: 11, fontWeight: 700, cursor: 'default',
-    boxShadow: '0 0 0 3px rgba(0,122,90,0.25)',
-  } as React.CSSProperties,
-  badge: {
-    background: '#e8f5f0', color: '#007a5a', border: '1px solid #b8dfd4',
-    borderRadius: 3, padding: '1px 6px', fontSize: 10.5, fontWeight: 600,
-  } as React.CSSProperties,
-  highlight: {
-    outline: '2.5px solid #007a5a', outlineOffset: 2, borderRadius: 4,
-  } as React.CSSProperties,
-};
-
-function ChromeBar({ url }: { url: string }) {
-  return (
-    <div style={slackStyles.chrome}>
-      <div style={{ display: 'flex', gap: 4 }}>
-        {['#ff5f57','#febc2e','#28c840'].map(c => (
-          <div key={c} style={{ width: 8, height: 8, borderRadius: '50%', background: c }} />
-        ))}
-      </div>
-      <div style={slackStyles.urlBar}>{url}</div>
-    </div>
-  );
-}
-
-function SlackLayout({ url, activeNav, children }: { url: string; activeNav: string; children: React.ReactNode }) {
-  const navItems = ['Basic Information', 'Socket Mode', 'Install App', 'OAuth & Permissions', 'Event Subscriptions', 'App Manifest'];
-  return (
-    <div style={slackStyles.wrap}>
-      <ChromeBar url={url} />
-      <div style={{ display: 'flex', background: '#fff' }}>
-        {/* Sidebar */}
-        <div style={{ width: 148, background: '#f8f8f8', borderRight: '1px solid #e0e0e0', padding: '10px 0', flexShrink: 0 }}>
-          {navItems.map(item => (
-            <div key={item} style={{
-              padding: '5px 12px', fontSize: 11, cursor: 'default',
-              background: item === activeNav ? '#e8e8e8' : 'transparent',
-              color: item === activeNav ? '#1d1c1d' : '#616061',
-              fontWeight: item === activeNav ? 700 : 400,
-              borderLeft: item === activeNav ? '2px solid #007a5a' : '2px solid transparent',
-            }}>{item}</div>
-          ))}
-        </div>
-        {/* Content */}
-        <div style={{ flex: 1, padding: '14px 16px', minWidth: 0 }}>{children}</div>
-      </div>
-    </div>
-  );
-}
-
-function BotTokenScreenshot() {
-  return (
-    <SlackLayout url="api.slack.com/apps/A.../oauth" activeNav="OAuth & Permissions">
-      {/* Install notice */}
-      <div style={{ background: '#fff8e6', border: '1px solid #f5c842', borderRadius: 5, padding: '7px 10px', marginBottom: 10, fontSize: 11, color: '#7a5c00', lineHeight: 1.5, display: 'flex', alignItems: 'flex-start', gap: 6 }}>
-        <AlertTriangle size={12} style={{ flexShrink: 0, marginTop: 1 }} />
-        <span>Token only appears after <strong>Install to Workspace</strong> (sidebar → Install App)</span>
-      </div>
-      <div style={slackStyles.sectionTitle}>OAuth Tokens</div>
-      <div style={{ border: '1px solid #e8e8e8', borderRadius: 5, overflow: 'hidden' }}>
-        <div style={{ padding: '8px 10px', background: '#fafafa', borderBottom: '1px solid #e8e8e8' }}>
-          <div style={{ fontSize: 11, color: '#616061', marginBottom: 1 }}>Bot User OAuth Token</div>
-          <div style={{ ...slackStyles.token, fontSize: 10.5 }}>xoxb-••••••••••••-••••••••••••-••••••••••••</div>
-          <div style={{ fontSize: 10, color: '#616061', marginTop: 2 }}>Access Level: Workspace</div>
-        </div>
-        <div style={{ padding: '7px 10px', display: 'flex', justifyContent: 'flex-end' }}>
-          <button style={{ ...slackStyles.greenBtn, ...slackStyles.highlight }}>Copy</button>
-        </div>
-      </div>
-    </SlackLayout>
-  );
-}
-
-function AppTokenScreenshot() {
-  return (
-    <SlackLayout url="api.slack.com/apps/A.../general" activeNav="Basic Information">
-      <div style={slackStyles.sectionTitle}>App-Level Tokens</div>
-      <div style={{ fontSize: 11, color: '#616061', marginBottom: 10, lineHeight: 1.5 }}>
-        App-level tokens represent your app across organizations.
-      </div>
-      <div style={{ marginBottom: 10 }}>
-        <button style={{ ...slackStyles.greenBtn, ...slackStyles.highlight }}>Generate Token and Scopes</button>
-      </div>
-      <div style={{ border: '1px solid #e8e8e8', borderRadius: 5, padding: '8px 10px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <div>
-          <div style={{ fontSize: 11, fontWeight: 700, color: '#1d1c1d', marginBottom: 4 }}>SlackHive</div>
-          <span style={slackStyles.badge}>connections:write</span>
-        </div>
-        <div style={slackStyles.token}>xapp-••••••••••••</div>
-      </div>
-    </SlackLayout>
-  );
-}
-
-function SigningSecretScreenshot() {
-  return (
-    <SlackLayout url="api.slack.com/apps/A.../general" activeNav="Basic Information">
-      <div style={slackStyles.sectionTitle}>App Credentials</div>
-      <div style={{ fontSize: 11, color: '#616061', marginBottom: 10, lineHeight: 1.5 }}>
-        These credentials allow your app to access the Slack API. Keep them secret.
-      </div>
-      {[
-        { label: 'App ID', value: 'A0AN••••••9', mono: true },
-        { label: 'Client ID', value: '9186••••••••••••••••', mono: true },
-        { label: 'Client Secret', value: '••••••••••', mono: true },
-      ].map(row => (
-        <div key={row.label} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0', borderBottom: '1px solid #f0f0f0', fontSize: 11, color: '#616061' }}>
-          <span>{row.label}</span>
-          <span style={{ fontFamily: 'monospace', color: '#1d1c1d' }}>{row.value}</span>
-        </div>
-      ))}
-      {/* Signing Secret highlighted */}
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 10px', marginTop: 6, border: '1px solid #e8e8e8', borderRadius: 5, ...slackStyles.highlight }}>
-        <div>
-          <div style={{ fontSize: 11, fontWeight: 700, color: '#1d1c1d', marginBottom: 2 }}>Signing Secret</div>
-          <div style={slackStyles.token}>••••••••••••••••••••••••</div>
-        </div>
-        <button style={slackStyles.greenBtn}>Show</button>
-      </div>
-    </SlackLayout>
-  );
-}
-
-// ─── Kbd helper ───────────────────────────────────────────────────────────────
-
-function Kbd({ children }: { children: React.ReactNode }) {
-  return (
-    <kbd style={{
-      display: 'inline-block', fontFamily: 'var(--font-sans)', fontSize: 11.5, fontWeight: 600,
-      background: 'var(--surface-3)', color: 'var(--text)',
-      border: '1px solid var(--border)', borderRadius: 5,
-      padding: '1px 7px', lineHeight: 1.7, whiteSpace: 'nowrap',
-    }}>{children}</kbd>
-  );
-}
-
-// ─── Step 4: MCPs & Skills ────────────────────────────────────────────────────
-
-function Step4McpsSkills({
-  state, update, catalog,
-}: { state: WizardState; update: (p: Partial<WizardState>) => void; catalog: McpServer[] }) {
-  const toggle = (id: string) => {
-    const ids = state.mcpServerIds.includes(id)
-      ? state.mcpServerIds.filter(x => x !== id)
-      : [...state.mcpServerIds, id];
-    update({ mcpServerIds: ids });
-  };
-
-  return (
-    <div>
-      <StepHeader step={4} title="Tools & Skills" desc="Attach MCP servers and pick a starting skill template. You can change these anytime." />
-
-      {/* MCP list */}
-      <div style={{ marginBottom: 22 }}>
-        <label style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--muted)', marginBottom: 8, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
-          MCP Servers
-        </label>
-        {catalog.length === 0 ? (
-          <div style={{
-            border: '1px dashed var(--border)', borderRadius: 8, padding: '16px',
-            fontSize: 12.5, color: 'var(--subtle)', textAlign: 'center',
-          }}>
-            No MCP servers yet — you can add them after creation in <strong style={{ color: 'var(--muted)' }}>Settings → MCP Catalog</strong>
-          </div>
-        ) : (
-          <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
-            {catalog.map((mcp, i) => (
-              <label key={mcp.id} style={{
-                display: 'flex', alignItems: 'center', gap: 12, padding: '11px 14px',
-                cursor: mcp.enabled ? 'pointer' : 'not-allowed',
-                borderBottom: i < catalog.length - 1 ? '1px solid var(--border)' : 'none',
-                opacity: mcp.enabled ? 1 : 0.4, transition: 'background 0.12s',
-              }}
-                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={state.mcpServerIds.includes(mcp.id)}
-                  onChange={() => toggle(mcp.id)} disabled={!mcp.enabled}
-                  style={{ accentColor: 'var(--accent)', width: 14, height: 14 }} />
-                <div>
-                  <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-                    <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>
-                  </div>
-                  {mcp.description && <p style={{ margin: 0, fontSize: 11.5, color: 'var(--subtle)' }}>{mcp.description}</p>}
-                </div>
-              </label>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Template grid */}
-      <div>
-        <label style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--muted)', marginBottom: 8, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
-          Skill Template
-        </label>
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
-          {TEMPLATES.map(t => {
-            const active = state.skillTemplate === t.value && !state.importPayload;
-            return (
-              <label key={t.value} style={{
-                padding: '12px 14px', border: `1px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
-                borderRadius: 8, cursor: 'pointer',
-                background: active ? 'rgba(59,130,246,0.08)' : 'transparent',
-                transition: 'all 0.15s',
-              }}>
-                <input type="radio" name="template" value={t.value} checked={active}
-                  onChange={() => update({ skillTemplate: t.value as WizardState['skillTemplate'], importPayload: null })}
-                  style={{ display: 'none' }} />
-                <div style={{ fontSize: 13, fontWeight: 600, color: active ? 'var(--accent)' : 'var(--text)', marginBottom: 2 }}>
-                  {t.label}
-                </div>
-                <div style={{ fontSize: 11.5, color: 'var(--subtle)' }}>{t.desc}</div>
-              </label>
-            );
-          })}
-
-          {/* Import tile */}
-          {(() => {
-            const active = !!state.importPayload;
-            return (
-              <div style={{
-                padding: '12px 14px',
-                border: `1px solid ${active ? '#8b5cf6' : 'var(--border)'}`,
-                borderRadius: 8,
-                background: active ? 'rgba(139,92,246,0.08)' : 'transparent',
-                transition: 'all 0.15s',
-                gridColumn: 'span 2',
-              }}>
-                <ImportConfigPicker
-                  value={state.importPayload}
-                  onChange={payload => update({ importPayload: payload })}
-                  compact
-                />
-              </div>
-            );
-          })()}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ─── Step 5: Review ───────────────────────────────────────────────────────────
-
-function Step5Review({ state, update, catalog, agents }: { state: WizardState; update: (p: Partial<WizardState>) => void; catalog: McpServer[]; agents: Agent[] }) {
-  const assignedBosses = agents.filter(a => state.reportsToIds.includes(a.id));
-  const assignedMcps = catalog.filter(m => state.mcpServerIds.includes(m.id));
-  const template = state.importPayload
-    ? `Import (${state.importPayload.skills.length} skills)`
-    : (TEMPLATES.find(t => t.value === state.skillTemplate)?.label ?? state.skillTemplate);
-
-  const reportsToValue = state.isBoss
-    ? '—'
-    : assignedBosses.length > 0
-      ? assignedBosses.map(b => b.name).join(', ')
-      : 'None';
-
-  return (
-    <div>
-      <StepHeader step={state.isBoss ? 4 : 5} title="Looks good?" desc="Review the details below, then hit Create Agent to launch." />
-
-      <div style={{
-        background: 'var(--surface-2)', border: '1px solid var(--border)',
-        borderRadius: 10, overflow: 'hidden', marginBottom: 18,
-      }}>
-        {[
-          { label: 'Name',          value: state.name,                             mono: false },
-          { label: 'Slug',          value: `@${state.slug}`,                       mono: true  },
-          { label: 'Model',         value: state.model,                            mono: true  },
-          { label: 'Role',          value: state.isBoss ? 'Boss (orchestrator)' : 'Specialist', mono: false },
-          { label: 'Reports to',    value: reportsToValue,                         mono: false },
-          { label: 'Description',   value: state.description || '—',               mono: false },
-          { label: 'Bot Token',     value: `${state.slackBotToken.slice(0, 12)}…`, mono: true  },
-          { label: 'App Token',     value: `${state.slackAppToken.slice(0, 12)}…`, mono: true  },
-          { label: 'Signing Secret',value: '••••••••',                             mono: true  },
-          ...(!state.isBoss ? [
-            { label: 'MCPs',          value: assignedMcps.length > 0 ? assignedMcps.map(m => m.name).join(', ') : 'None', mono: false },
-            { label: 'Skill Template',value: template,                               mono: false },
-          ] : [
-            { label: 'Skills',        value: 'Auto-generated from team registry',   mono: false },
-          ]),
-        ].map((row, i, arr) => (
-          <div key={row.label} style={{
-            display: 'flex', alignItems: 'baseline', gap: 12,
-            padding: '10px 16px',
-            borderBottom: i < arr.length - 1 ? '1px solid var(--border)' : 'none',
-          }}>
-            <span style={{ width: 130, flexShrink: 0, fontSize: 12, color: 'var(--subtle)' }}>{row.label}</span>
-            <span style={{
-              fontSize: 13, color: 'var(--text)',
-              fontFamily: row.mono ? 'var(--font-mono)' : 'var(--font-sans)',
-            }}>{row.value}</span>
-          </div>
-        ))}
-      </div>
-
-      <div style={{
-        background: '#f0fdf4', border: '1px solid #bbf7d0',
-        borderRadius: 'var(--radius)', padding: '14px 16px', fontSize: 13, color: '#15803d', lineHeight: 1.65,
-      }}>
-        Once created, the runner picks up the agent automatically and connects to Slack.
-        Manage skills, MCPs, and channel permissions from the agent detail page.
-      </div>
-    </div>
-  );
-}
-
-// ─── Shared primitives ────────────────────────────────────────────────────────
-
-function StepHeader({ step, title, desc }: { step: number; title: string; desc: string }) {
-  return (
-    <div style={{ marginBottom: 22 }}>
-      <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--accent)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4 }}>
-        Step {step}
-      </div>
-      <h2 style={{ margin: '0 0 4px', fontSize: 18, fontWeight: 700, color: 'var(--text)', letterSpacing: '-0.02em' }}>
-        {title}
-      </h2>
-      <p style={{ margin: 0, fontSize: 13, color: 'var(--muted)' }}>{desc}</p>
-    </div>
-  );
-}
-
-function Field({ label, value, onChange, placeholder, hint, type = 'text' }: {
-  label: string; value: string; onChange: (v: string) => void;
-  placeholder?: string; hint?: string; type?: string;
-}) {
-  return (
-    <div style={{ marginBottom: 14 }}>
-      <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)} placeholder={placeholder}
-        style={{
-          width: '100%', background: 'var(--surface-2)', 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, placeholder, hint, rows = 3 }: {
-  label: string; value: string; onChange: (v: string) => void;
-  placeholder?: string; hint?: string; rows?: number;
-}) {
-  return (
-    <div style={{ marginBottom: 14 }}>
-      <label style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--muted)', marginBottom: 5 }}>
-        {label}
-      </label>
-      <textarea value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} rows={rows}
-        style={{
-          width: '100%', background: 'var(--surface-2)', 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', lineHeight: 1.55,
-        }}
-        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>
-  );
-}