agentcraft 0.0.1

package/web/components/agent-form.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { useState } from 'react';
+import type { AgentFormData, AgentInfo } from '@/lib/types';
+
+const MODELS = ['sonnet', 'opus', 'haiku'];
+const COLORS = ['blue', 'green', 'red', 'purple', 'orange', 'yellow', 'pink'];
+const COMMON_TOOLS = ['Read', 'Write', 'Edit', 'MultiEdit', 'Bash', 'Grep', 'Glob', 'WebFetch', 'WebSearch', 'TodoWrite'];
+
+interface AgentFormProps {
+  initial?: AgentInfo;
+  onSave: (data: AgentFormData, originalName?: string) => Promise<void>;
+  onCancel: () => void;
+}
+
+export function AgentForm({ initial, onSave, onCancel }: AgentFormProps) {
+  const [form, setForm] = useState<AgentFormData>({
+    name: initial?.name ?? '',
+    description: initial?.description ?? '',
+    model: initial?.model ?? 'sonnet',
+    tools: initial?.tools ?? 'Read, Write, Edit, Bash, Grep',
+    color: initial?.color ?? 'blue',
+    prompt: initial?.prompt ?? '',
+  });
+  const [saving, setSaving] = useState(false);
+
+  const set = (key: keyof AgentFormData, val: string) => setForm((f) => ({ ...f, [key]: val }));
+
+  const toggleTool = (tool: string) => {
+    const current = form.tools.split(',').map((t) => t.trim()).filter(Boolean);
+    const next = current.includes(tool)
+      ? current.filter((t) => t !== tool)
+      : [...current, tool];
+    set('tools', next.join(', '));
+  };
+
+  const hasTools = (tool: string) => form.tools.split(',').map((t) => t.trim()).includes(tool);
+
+  const handleSave = async () => {
+    if (!form.name.trim() || !form.description.trim()) return;
+    setSaving(true);
+    try {
+      await onSave(form, initial?.name);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const inputStyle = {
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    border: '1px solid var(--sf-border)',
+    color: 'rgba(255,255,255,0.85)',
+    outline: 'none',
+    fontFamily: 'inherit',
+    fontSize: '11px',
+    padding: '4px 8px',
+    width: '100%',
+  } as const;
+
+  const labelStyle = {
+    fontSize: '9px',
+    color: 'var(--sf-cyan)',
+    opacity: 0.6,
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.1em',
+    marginBottom: '3px',
+    display: 'block',
+  };
+
+  return (
+    <div
+      className="mt-1 mb-2 p-3 space-y-3"
+      style={{ border: '1px solid rgba(0,229,255,0.3)', backgroundColor: 'rgba(0,229,255,0.03)' }}
+    >
+      <div className="sf-heading text-[10px] tracking-widest uppercase opacity-60" style={{ color: 'var(--sf-cyan)' }}>
+        {initial ? 'EDIT UNIT' : 'DEPLOY NEW UNIT'}
+      </div>
+
+      {/* Name */}
+      <div>
+        <label style={labelStyle}>CALLSIGN (name)</label>
+        <input
+          style={inputStyle}
+          value={form.name}
+          onChange={(e) => set('name', e.target.value.toLowerCase().replace(/\s+/g, '-'))}
+          placeholder="my-specialist"
+          disabled={!!initial}
+        />
+      </div>
+
+      {/* Description */}
+      <div>
+        <label style={labelStyle}>BRIEFING (description)</label>
+        <textarea
+          style={{ ...inputStyle, resize: 'vertical', minHeight: '48px' }}
+          value={form.description}
+          onChange={(e) => set('description', e.target.value)}
+          placeholder="Expert in..."
+          rows={2}
+        />
+      </div>
+
+      {/* Model + Color row */}
+      <div className="flex gap-3">
+        <div className="flex-1">
+          <label style={labelStyle}>MODEL</label>
+          <select
+            style={{ ...inputStyle, cursor: 'pointer' }}
+            value={form.model}
+            onChange={(e) => set('model', e.target.value)}
+          >
+            {MODELS.map((m) => <option key={m} value={m}>{m}</option>)}
+          </select>
+        </div>
+        <div className="flex-1">
+          <label style={labelStyle}>COLOR</label>
+          <select
+            style={{ ...inputStyle, cursor: 'pointer' }}
+            value={form.color}
+            onChange={(e) => set('color', e.target.value)}
+          >
+            {COLORS.map((c) => <option key={c} value={c}>{c}</option>)}
+          </select>
+        </div>
+      </div>
+
+      {/* Tools */}
+      <div>
+        <label style={labelStyle}>ARMAMENTS (tools)</label>
+        <div className="flex flex-wrap gap-1 mb-1">
+          {COMMON_TOOLS.map((tool) => (
+            <button
+              key={tool}
+              onClick={() => toggleTool(tool)}
+              className="text-[9px] px-1.5 py-0.5 transition-all"
+              style={{
+                border: `1px solid ${hasTools(tool) ? 'var(--sf-cyan)' : 'var(--sf-border)'}`,
+                color: hasTools(tool) ? 'var(--sf-cyan)' : 'rgba(255,255,255,0.3)',
+                backgroundColor: hasTools(tool) ? 'rgba(0,229,255,0.08)' : 'transparent',
+              }}
+            >
+              {tool}
+            </button>
+          ))}
+        </div>
+        <input
+          style={inputStyle}
+          value={form.tools}
+          onChange={(e) => set('tools', e.target.value)}
+          placeholder="Read, Write, Edit, Bash"
+        />
+      </div>
+
+      {/* System prompt */}
+      <div>
+        <label style={labelStyle}>ORDERS (system prompt)</label>
+        <textarea
+          style={{ ...inputStyle, resize: 'vertical', minHeight: '80px' }}
+          value={form.prompt}
+          onChange={(e) => set('prompt', e.target.value)}
+          placeholder="You are a specialist in..."
+          rows={4}
+        />
+      </div>
+
+      {/* Actions */}
+      <div className="flex gap-2 pt-1">
+        <button
+          onClick={handleSave}
+          disabled={saving || !form.name.trim() || !form.description.trim()}
+          className="flex-1 py-1.5 text-[10px] sf-heading font-bold uppercase tracking-wider transition-all"
+          style={{
+            border: '1px solid var(--sf-cyan)',
+            color: saving ? 'rgba(0,229,255,0.4)' : 'var(--sf-cyan)',
+            backgroundColor: 'rgba(0,229,255,0.08)',
+          }}
+        >
+          {saving ? 'DEPLOYING...' : (initial ? 'UPDATE UNIT' : 'DEPLOY UNIT')}
+        </button>
+        <button
+          onClick={onCancel}
+          className="px-4 py-1.5 text-[10px] sf-heading uppercase tracking-wider transition-all"
+          style={{ border: '1px solid var(--sf-border)', color: 'rgba(255,255,255,0.4)' }}
+        >
+          ABORT
+        </button>
+      </div>
+    </div>
+  );
+}

package/web/components/agent-roster-panel.tsx

@@ -0,0 +1,502 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { HookSlot } from './hook-slot';
+import { AgentForm } from './agent-form';
+import { playUISound } from '@/lib/ui-audio';
+import { getEventLabel } from '@/lib/utils';
+import type { HookEvent, SkillHookEvent, SoundAssignments, AgentInfo, SkillInfo, AgentFormData, SelectMode } from '@/lib/types';
+
+const HOOK_GROUPS: { label: string; events: HookEvent[] }[] = [
+  { label: 'LIFECYCLE', events: ['SessionStart', 'SessionEnd', 'Stop'] },
+  { label: 'TOOLING', events: ['PreToolUse', 'PostToolUse', 'PostToolUseFailure'] },
+  { label: 'SUBAGENTS', events: ['SubagentStop'] },
+  { label: 'SYSTEM', events: ['Notification', 'PreCompact'] },
+];
+
+const ALL_EVENTS: HookEvent[] = HOOK_GROUPS.flatMap((g) => g.events);
+const SKILL_EVENTS: SkillHookEvent[] = ['PreToolUse', 'PostToolUse'];
+const SKILL_EVENT_LABELS: Record<SkillHookEvent, string> = {
+  PreToolUse: 'ON INVOKE',
+  PostToolUse: 'ON COMPLETE',
+};
+
+// ── Agent row ────────────────────────────────────────────────────
+
+interface AgentRowProps {
+  scope: string;
+  label: string;
+  isGlobal?: boolean;
+  hooks: Partial<Record<HookEvent, string>>;
+  enabled?: boolean;
+  agentInfo?: AgentInfo;
+  onToggle?: () => void;
+  onClear: (event: HookEvent) => void;
+  onPreview: (path: string) => void;
+  onEdit?: () => void;
+  onDelete?: () => void;
+  selectMode: SelectMode | null;
+  onSlotSelect: (mode: SelectMode) => void;
+}
+
+function AgentRow({ scope, label, isGlobal, hooks, enabled, onToggle, onClear, onPreview, onEdit, onDelete, selectMode, onSlotSelect }: AgentRowProps) {
+  const [expanded, setExpanded] = useState(!!isGlobal);
+  const [isHovered, setIsHovered] = useState(false);
+  const filledCount = Object.values(hooks).filter(Boolean).length;
+
+  return (
+    <div className="mb-1">
+      <div
+        data-sf-hover
+        data-no-ui-sound
+        className="flex items-center justify-between px-3 py-2 cursor-pointer transition-all group"
+        style={{
+          border: `1px solid ${isGlobal ? 'var(--sf-border-gold)' : isHovered ? 'rgba(0,229,255,0.35)' : 'var(--sf-border)'}`,
+          backgroundColor: isGlobal
+            ? isHovered ? 'rgba(255,192,0,0.08)' : 'rgba(255,192,0,0.04)'
+            : isHovered ? 'rgba(0,229,255,0.04)' : 'transparent',
+        }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onClick={() => { playUISound('toggle', 0.3); setExpanded(!expanded); }}
+      >
+        <div className="flex items-center gap-2 overflow-hidden">
+          <span className="text-[10px] opacity-60 shrink-0">{expanded ? '▾' : '▸'}</span>
+          <span
+            className="text-xs sf-heading font-semibold uppercase tracking-wider truncate"
+            style={{ color: isGlobal ? 'var(--sf-gold)' : 'rgba(255,255,255,0.8)' }}
+          >
+            {label}
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 shrink-0">
+          <span className="text-[10px] opacity-40">{filledCount}/{ALL_EVENTS.length}</span>
+          {!isGlobal && onToggle && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onToggle(); }}
+              className="text-[10px] px-2 py-0.5 transition-all"
+              style={{
+                border: `1px solid ${enabled ? 'var(--sf-cyan)' : 'rgba(255,255,255,0.2)'}`,
+                color: enabled ? 'var(--sf-cyan)' : 'rgba(255,255,255,0.3)',
+              }}
+            >
+              {enabled ? 'ON' : 'OFF'}
+            </button>
+          )}
+          {onEdit && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onEdit(); }}
+              className="text-[10px] px-1.5 py-0.5 opacity-0 group-hover:opacity-100 transition-all"
+              style={{ border: '1px solid var(--sf-border)', color: 'rgba(255,255,255,0.4)' }}
+              title="Edit agent"
+            >
+              ✎
+            </button>
+          )}
+          {onDelete && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onDelete(); }}
+              className="text-[10px] px-1.5 py-0.5 opacity-0 group-hover:opacity-100 transition-all"
+              style={{ border: '1px solid rgba(255,51,102,0.3)', color: 'var(--sf-alert)' }}
+              title="Delete agent"
+            >
+              ✕
+            </button>
+          )}
+        </div>
+      </div>
+
+      {expanded && (
+        <div className="ml-3 mt-1 mb-2 space-y-1">
+          {HOOK_GROUPS.map((group) => (
+            <div key={group.label}>
+              <div className="text-[9px] uppercase tracking-widest opacity-30 mb-1 ml-1">{group.label}</div>
+              {group.events.map((event) => (
+                <HookSlot
+                  key={event}
+                  event={event}
+                  scope={scope}
+                  assignedSound={hooks[event]}
+                  onClear={() => onClear(event)}
+                  onPreview={onPreview}
+                  selectMode={selectMode}
+                  onSelect={() => onSlotSelect({ scope, event, label: getEventLabel(event) })}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Skill row ────────────────────────────────────────────────────
+
+interface SkillRowProps {
+  skill: SkillInfo;
+  hooks: Partial<Record<SkillHookEvent, string>>;
+  enabled: boolean;
+  onToggle: () => void;
+  onClear: (event: SkillHookEvent) => void;
+  onPreview: (path: string) => void;
+  selectMode: SelectMode | null;
+  onSlotSelect: (mode: SelectMode) => void;
+}
+
+function SkillRow({ skill, hooks, enabled, onToggle, onClear, onPreview, selectMode, onSlotSelect }: SkillRowProps) {
+  const [expanded, setExpanded] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const filledCount = Object.values(hooks).filter(Boolean).length;
+  const scope = `skill/${skill.qualifiedName}`;
+
+  return (
+    <div className="mb-1">
+      <div
+        data-sf-hover
+        data-no-ui-sound
+        className="flex items-center justify-between px-3 py-2 cursor-pointer transition-all"
+        style={{
+          border: `1px solid ${isHovered ? 'rgba(0,168,255,0.4)' : 'rgba(0,168,255,0.2)'}`,
+          backgroundColor: isHovered ? 'rgba(0,168,255,0.07)' : 'rgba(0,168,255,0.03)',
+        }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onClick={() => { playUISound('toggle', 0.3); setExpanded(!expanded); }}
+      >
+        <div className="flex items-center gap-2 overflow-hidden">
+          <span className="text-[10px] opacity-60 shrink-0">{expanded ? '▾' : '▸'}</span>
+          <span className="text-xs sf-heading font-semibold uppercase tracking-wider truncate" style={{ color: 'var(--sf-blue)' }}>
+            {skill.name}
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 shrink-0">
+          <span className="text-[10px] opacity-40">{filledCount}/2</span>
+          <button
+            onClick={(e) => { e.stopPropagation(); onToggle(); }}
+            className="text-[10px] px-2 py-0.5 transition-all"
+            style={{
+              border: `1px solid ${enabled ? 'var(--sf-blue)' : 'rgba(255,255,255,0.2)'}`,
+              color: enabled ? 'var(--sf-blue)' : 'rgba(255,255,255,0.3)',
+            }}
+          >
+            {enabled ? 'ON' : 'OFF'}
+          </button>
+        </div>
+      </div>
+
+      {expanded && (
+        <div className="ml-3 mt-1 mb-2">
+          <div className="text-[9px] uppercase tracking-widest opacity-30 mb-1 ml-1">SIGNALS</div>
+          {SKILL_EVENTS.map((event) => (
+            <HookSlot
+              key={event}
+              event={event as HookEvent}
+              scope={scope}
+              assignedSound={hooks[event]}
+              onClear={() => onClear(event)}
+              onPreview={onPreview}
+              selectMode={selectMode}
+              onSelect={() => onSlotSelect({ scope, event, label: SKILL_EVENT_LABELS[event] })}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Panel export ─────────────────────────────────────────────────
+
+interface AgentRosterPanelProps {
+  assignments: SoundAssignments;
+  agents: AgentInfo[];
+  skills: SkillInfo[];
+  onAssignmentChange: (next: SoundAssignments) => void;
+  onPreview: (path: string) => void;
+  onAgentsChange: () => void;
+  selectMode: SelectMode | null;
+  onSlotSelect: (mode: SelectMode) => void;
+}
+
+export function AgentRosterPanel({ assignments, agents, skills, onAssignmentChange, onPreview, onAgentsChange, selectMode, onSlotSelect }: AgentRosterPanelProps) {
+  const [activeView, setActiveView] = useState<'agents' | 'skills'>('agents');
+  const [showForm, setShowForm] = useState(false);
+  const [editingAgent, setEditingAgent] = useState<AgentInfo | undefined>();
+  const [skillSearch, setSkillSearch] = useState('');
+  const [collapsedNs, setCollapsedNs] = useState<Set<string>>(new Set());
+
+  const clearGlobalHook = (event: HookEvent) => {
+    onAssignmentChange({ ...assignments, global: { ...assignments.global, [event]: undefined } });
+  };
+
+  const clearAgentHook = (agentName: string, event: HookEvent) => {
+    onAssignmentChange({
+      ...assignments,
+      agents: {
+        ...assignments.agents,
+        [agentName]: {
+          ...assignments.agents[agentName],
+          hooks: { ...assignments.agents[agentName]?.hooks, [event]: undefined },
+        },
+      },
+    });
+  };
+
+  const clearSkillHook = (skillName: string, event: SkillHookEvent) => {
+    onAssignmentChange({
+      ...assignments,
+      skills: {
+        ...assignments.skills,
+        [skillName]: {
+          ...assignments.skills[skillName],
+          hooks: { ...assignments.skills[skillName]?.hooks, [event]: undefined },
+        },
+      },
+    });
+  };
+
+  const toggleAgent = (agentName: string) => {
+    const current = assignments.agents[agentName] ?? { enabled: true, hooks: {} };
+    onAssignmentChange({
+      ...assignments,
+      agents: { ...assignments.agents, [agentName]: { ...current, enabled: !current.enabled } },
+    });
+  };
+
+  const toggleSkill = (skillName: string) => {
+    const current = assignments.skills[skillName] ?? { enabled: true, hooks: {} };
+    onAssignmentChange({
+      ...assignments,
+      skills: { ...assignments.skills, [skillName]: { ...current, enabled: !current.enabled } },
+    });
+  };
+
+  const handleSaveAgent = async (data: AgentFormData, originalName?: string) => {
+    if (originalName) {
+      await fetch(`/api/agents/${originalName}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+    } else {
+      await fetch('/api/agents', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+    }
+    setShowForm(false);
+    setEditingAgent(undefined);
+    onAgentsChange();
+  };
+
+  const handleDeleteAgent = async (agentName: string) => {
+    await fetch(`/api/agents/${agentName}`, { method: 'DELETE' });
+    onAgentsChange();
+  };
+
+  const allAgentNames = new Set([
+    ...Object.keys(assignments.agents),
+    ...agents.map((a) => a.name),
+  ]);
+
+  // Build unified skill list: merge assigned skills + discovered skills by qualifiedName
+  const allSkills = useMemo(() => {
+    const map = new Map<string, SkillInfo>();
+    // Discovered skills
+    for (const s of skills) map.set(s.qualifiedName, s);
+    // Skills in assignments that weren't discovered (show them anyway)
+    for (const key of Object.keys(assignments.skills)) {
+      if (!map.has(key)) {
+        map.set(key, { name: key.includes(':') ? key.split(':').pop()! : key, qualifiedName: key, description: '' });
+      }
+    }
+    return [...map.values()];
+  }, [skills, assignments.skills]);
+
+  // Filter by search
+  const filteredSkills = useMemo(() => {
+    const q = skillSearch.toLowerCase();
+    return q ? allSkills.filter(s => s.qualifiedName.toLowerCase().includes(q) || s.description.toLowerCase().includes(q)) : allSkills;
+  }, [allSkills, skillSearch]);
+
+  // Group by namespace
+  const skillGroups = useMemo(() => {
+    const groups = new Map<string, SkillInfo[]>();
+    for (const s of filteredSkills) {
+      const ns = s.namespace ?? '(user)';
+      if (!groups.has(ns)) groups.set(ns, []);
+      groups.get(ns)!.push(s);
+    }
+    return [...groups.entries()].sort(([a], [b]) => {
+      if (a === '(user)') return -1;
+      if (b === '(user)') return 1;
+      return a.localeCompare(b);
+    });
+  }, [filteredSkills]);
+
+  return (
+    <div className="flex flex-col overflow-hidden">
+      {/* Tab bar header */}
+      <div className="shrink-0 border-b" style={{ borderColor: 'var(--sf-border)', backgroundColor: 'var(--sf-panel)' }}>
+        <div className="flex items-stretch">
+          {(['agents', 'skills'] as const).map((view) => (
+            <button
+              key={view}
+              data-sf-hover
+              data-no-ui-sound
+              onClick={() => {
+                if (activeView !== view) {
+                  playUISound('pageChange', 0.25);
+                  setActiveView(view);
+                }
+              }}
+              className="flex-1 py-2.5 text-[10px] sf-heading font-semibold uppercase tracking-widest transition-all"
+              style={{
+                color: activeView === view ? 'var(--sf-cyan)' : 'rgba(255,255,255,0.35)',
+                borderBottom: `2px solid ${activeView === view ? 'var(--sf-cyan)' : 'transparent'}`,
+                backgroundColor: activeView === view ? 'rgba(0,229,255,0.04)' : 'transparent',
+              }}
+            >
+              {view === 'agents' ? 'AGENTS' : 'SKILLS'}
+            </button>
+          ))}
+          {activeView === 'agents' && (
+            <button
+              onClick={() => { setShowForm(!showForm); setEditingAgent(undefined); }}
+              className="text-[10px] px-3 sf-heading uppercase tracking-wider transition-all"
+              style={{
+                borderLeft: '1px solid var(--sf-border)',
+                color: showForm ? 'var(--sf-cyan)' : 'rgba(255,255,255,0.4)',
+              }}
+            >
+              {showForm ? '✕' : '+'}
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-3">
+        {activeView === 'agents' && (
+          <>
+            {/* Add/Edit form */}
+            {(showForm || editingAgent) && (
+              <AgentForm
+                initial={editingAgent}
+                onSave={handleSaveAgent}
+                onCancel={() => { setShowForm(false); setEditingAgent(undefined); }}
+              />
+            )}
+
+            {/* Global override */}
+            <AgentRow
+              scope="global"
+              label="GLOBAL OVERRIDE"
+              isGlobal
+              hooks={assignments.global}
+              onClear={clearGlobalHook}
+              onPreview={onPreview}
+              selectMode={selectMode}
+              onSlotSelect={onSlotSelect}
+            />
+
+            {/* Per-agent rows */}
+            {[...allAgentNames].map((name) => {
+              const config = assignments.agents[name] ?? { enabled: true, hooks: {} };
+              const agentInfo = agents.find((a) => a.name === name);
+              return (
+                <AgentRow
+                  key={name}
+                  scope={name}
+                  label={name}
+                  hooks={config.hooks}
+                  enabled={config.enabled}
+                  agentInfo={agentInfo}
+                  onToggle={() => toggleAgent(name)}
+                  onClear={(event) => clearAgentHook(name, event)}
+                  onPreview={onPreview}
+                  onEdit={() => { setEditingAgent(agentInfo); setShowForm(false); }}
+                  onDelete={() => handleDeleteAgent(name)}
+                  selectMode={selectMode}
+                  onSlotSelect={onSlotSelect}
+                />
+              );
+            })}
+          </>
+        )}
+
+        {activeView === 'skills' && (
+          <>
+            {/* Search */}
+            <input
+              type="text"
+              placeholder="FILTER SKILLS..."
+              value={skillSearch}
+              onChange={e => setSkillSearch(e.target.value)}
+              className="w-full text-[10px] px-2 py-1 mb-3 bg-transparent outline-none sf-mono"
+              style={{
+                border: `1px solid ${skillSearch ? 'var(--sf-blue)' : 'var(--sf-border)'}`,
+                color: 'rgba(255,255,255,0.6)',
+                caretColor: 'var(--sf-cyan)',
+              }}
+            />
+
+            {/* Grouped by namespace */}
+            {skillGroups.map(([ns, nsSkills]) => {
+              const isCollapsed = collapsedNs.has(ns);
+              const assignedCount = nsSkills.filter(s => assignments.skills[s.qualifiedName]?.hooks.PreToolUse || assignments.skills[s.qualifiedName]?.hooks.PostToolUse).length;
+              return (
+                <div key={ns} className="mb-1">
+                  {/* Namespace header */}
+                  <div
+                    data-sf-hover
+                    data-no-ui-sound
+                    className="flex items-center justify-between px-2 py-1 cursor-pointer transition-all"
+                    style={{ backgroundColor: 'rgba(0,168,255,0.05)', borderBottom: '1px solid rgba(0,168,255,0.1)' }}
+                    onClick={() => {
+                      playUISound('toggle', 0.3);
+                      setCollapsedNs(prev => {
+                        const next = new Set(prev);
+                        if (next.has(ns)) next.delete(ns); else next.add(ns);
+                        return next;
+                      });
+                    }}
+                  >
+                    <div className="flex items-center gap-1.5">
+                      <span className="text-[9px] opacity-40">{isCollapsed ? '▸' : '▾'}</span>
+                      <span className="sf-heading text-[9px] uppercase tracking-wider" style={{ color: 'var(--sf-blue)' }}>
+                        {ns}
+                      </span>
+                    </div>
+                    <span className="text-[9px] opacity-40">
+                      {assignedCount > 0 && <span style={{ color: 'var(--sf-blue)', marginRight: 4 }}>{assignedCount}✦</span>}
+                      {nsSkills.length}
+                    </span>
+                  </div>
+
+                  {!isCollapsed && nsSkills.sort((a, b) => a.name.localeCompare(b.name)).map((s) => {
+                    const config = assignments.skills[s.qualifiedName] ?? { enabled: true, hooks: {} };
+                    return (
+                      <SkillRow
+                        key={s.qualifiedName}
+                        skill={s}
+                        hooks={config.hooks}
+                        enabled={config.enabled}
+                        onToggle={() => toggleSkill(s.qualifiedName)}
+                        onClear={(event) => clearSkillHook(s.qualifiedName, event)}
+                        onPreview={onPreview}
+                        selectMode={selectMode}
+                        onSlotSelect={onSlotSelect}
+                      />
+                    );
+                  })}
+                </div>
+              );
+            })}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}