@harbinger-ai/harbinger 0.1.2 → 0.1.3

package/lib/chat/components/agents-page.jsx

@@ -0,0 +1,571 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { UsersIcon, RefreshIcon, SpinnerIcon, ChevronDownIcon, PlusIcon, PencilIcon, CheckIcon, XIcon, SearchIcon } from './icons.js';
+import { getAgentProfilesWithStatus, getAgentProfile, updateAgentFile, createAgent, createAgentJob } from '../actions.js';
+
+// ─── Agent Card ──────────────────────────────────────────────────────────────
+
+function AgentCard({ agent, onViewProfile, onAssignTask, index }) {
+  const codename = agent.codename || agent.name || agent.id;
+  const initial = codename.charAt(0).toUpperCase();
+  const isActive = agent.status === 'active';
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.25, delay: index * 0.04 }}
+      className={`rounded-lg border bg-[--card] transition-all hover:border-[--cyan]/20 ${
+        isActive ? 'border-green-500/20 shadow-[0_0_15px_oklch(0.7_0.17_145/8%)]' : 'border-white/[0.06]'
+      }`}
+    >
+      <div className="flex items-center gap-4 p-4">
+        {/* Avatar */}
+        <div className="shrink-0 w-12 h-12 rounded-lg bg-[--cyan]/10 border border-[--cyan]/20 flex items-center justify-center">
+          <span className="text-xl font-mono font-bold text-[--cyan]">{initial}</span>
+        </div>
+
+        {/* Info */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <p className="text-sm font-mono font-semibold text-foreground">@{codename.toUpperCase()}</p>
+            <div className={`w-2 h-2 rounded-full shrink-0 ${
+              isActive ? 'bg-green-500 animate-pulse' : 'bg-muted-foreground/40'
+            }`} />
+            {isActive && (
+              <span className="inline-flex items-center gap-1 rounded-full bg-green-500/10 text-green-500 border border-green-500/20 px-2 py-0.5 text-[9px] font-mono font-medium">
+                {agent.activeJobs} job{agent.activeJobs !== 1 ? 's' : ''} running
+              </span>
+            )}
+          </div>
+          {agent.role && (
+            <p className="text-xs text-muted-foreground mt-0.5 font-mono truncate">{agent.role}</p>
+          )}
+          {agent.specialization && (
+            <p className="text-[10px] text-muted-foreground/70 mt-0.5 font-mono truncate">{agent.specialization}</p>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-2 shrink-0">
+          <button
+            onClick={() => onViewProfile(agent.id)}
+            className="inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] hover:border-[--cyan]/30 hover:text-[--cyan] transition-colors"
+          >
+            View
+          </button>
+          <button
+            onClick={() => onAssignTask(agent)}
+            className="inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors"
+          >
+            Assign Task
+          </button>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+// ─── Agent Profile Panel ─────────────────────────────────────────────────────
+
+function AgentProfilePanel({ agentId, onClose }) {
+  const [profile, setProfile] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [editingFile, setEditingFile] = useState(null);
+  const [editContent, setEditContent] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    getAgentProfile(agentId).then((p) => { setProfile(p); setLoading(false); });
+  }, [agentId]);
+
+  async function handleSave() {
+    if (!editingFile) return;
+    setSaving(true);
+    await updateAgentFile(agentId, editingFile, editContent);
+    const updated = await getAgentProfile(agentId);
+    setProfile(updated);
+    setEditingFile(null);
+    setSaving(false);
+  }
+
+  function startEdit(filename, content) {
+    setEditingFile(filename);
+    setEditContent(content || '');
+  }
+
+  if (loading) {
+    return (
+      <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} className="rounded-lg border border-[--cyan]/20 bg-[--card] p-5">
+        <div className="flex flex-col gap-3">
+          {[...Array(3)].map((_, i) => <div key={i} className="h-12 animate-shimmer rounded-md border border-white/[0.06]" />)}
+        </div>
+      </motion.div>
+    );
+  }
+
+  if (!profile) return null;
+
+  const codename = profile.codename || profile.name || profile.id;
+  const files = [
+    { name: 'SOUL.md', content: profile.soul, label: 'Soul' },
+    { name: 'SKILLS.md', content: profile.skills, label: 'Skills' },
+    { name: 'TOOLS.md', content: profile.tools, label: 'Tools' },
+    { name: 'HEARTBEAT.md', content: profile.heartbeat, label: 'Heartbeat' },
+  ];
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 12 }}
+      className="rounded-lg border border-[--cyan]/20 bg-[--card] overflow-hidden"
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-white/[0.06]">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-lg bg-[--cyan]/10 border border-[--cyan]/20 flex items-center justify-center">
+            <span className="text-lg font-mono font-bold text-[--cyan]">{codename.charAt(0).toUpperCase()}</span>
+          </div>
+          <div>
+            <p className="text-sm font-mono font-semibold">@{codename.toUpperCase()}</p>
+            {profile.role && <p className="text-[10px] font-mono text-muted-foreground">{profile.role}</p>}
+          </div>
+        </div>
+        <button onClick={onClose} className="text-muted-foreground hover:text-foreground transition-colors">
+          <XIcon size={16} />
+        </button>
+      </div>
+
+      {/* Identity */}
+      <div className="p-4 border-b border-white/[0.06]">
+        <span className="font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider">Identity</span>
+        <div className="grid grid-cols-2 gap-2 mt-2">
+          {profile.name && (
+            <div>
+              <span className="text-[10px] font-mono text-muted-foreground uppercase">Name</span>
+              <p className="text-xs font-mono">{profile.name}</p>
+            </div>
+          )}
+          <div>
+            <span className="text-[10px] font-mono text-muted-foreground uppercase">Codename</span>
+            <p className="text-xs font-mono">{codename}</p>
+          </div>
+          {profile.role && (
+            <div>
+              <span className="text-[10px] font-mono text-muted-foreground uppercase">Role</span>
+              <p className="text-xs font-mono">{profile.role}</p>
+            </div>
+          )}
+          {profile.specialization && (
+            <div>
+              <span className="text-[10px] font-mono text-muted-foreground uppercase">Specialization</span>
+              <p className="text-xs font-mono">{profile.specialization}</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Config */}
+      {profile.config && (
+        <div className="p-4 border-b border-white/[0.06]">
+          <span className="font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider">Config</span>
+          <pre className="mt-2 text-[11px] bg-black/30 rounded-md p-2.5 font-mono overflow-auto max-h-24 text-foreground/80 border border-white/[0.04]">
+            {JSON.stringify(profile.config, null, 2)}
+          </pre>
+        </div>
+      )}
+
+      {/* Files */}
+      <div className="p-4">
+        <span className="font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider">Files</span>
+        <div className="flex flex-col gap-2 mt-2">
+          {files.map((f) => (
+            <div key={f.name}>
+              <div className="flex items-center justify-between">
+                <span className="text-[10px] font-mono text-muted-foreground">{f.name}</span>
+                <div className="flex items-center gap-1">
+                  {f.content ? (
+                    <span className="text-[9px] font-mono text-green-500">exists</span>
+                  ) : (
+                    <span className="text-[9px] font-mono text-muted-foreground/50">empty</span>
+                  )}
+                  <button
+                    onClick={() => editingFile === f.name ? setEditingFile(null) : startEdit(f.name, f.content)}
+                    className="text-muted-foreground hover:text-[--cyan] transition-colors p-0.5"
+                  >
+                    <PencilIcon size={10} />
+                  </button>
+                </div>
+              </div>
+
+              <AnimatePresence>
+                {editingFile === f.name && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: 'auto', opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    className="overflow-hidden"
+                  >
+                    <textarea
+                      value={editContent}
+                      onChange={(e) => setEditContent(e.target.value)}
+                      rows={8}
+                      className="w-full mt-1 text-[11px] border border-white/[0.06] rounded-md p-2.5 bg-black/20 font-mono text-foreground/80 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors resize-y"
+                    />
+                    <div className="flex gap-2 mt-1">
+                      <button
+                        onClick={handleSave}
+                        disabled={saving}
+                        className="inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-[10px] font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors disabled:opacity-50"
+                      >
+                        {saving ? <SpinnerIcon size={10} /> : <CheckIcon size={10} />} Save
+                      </button>
+                      <button
+                        onClick={() => setEditingFile(null)}
+                        className="inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-[10px] font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] transition-colors text-muted-foreground"
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          ))}
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+// ─── Assign Task Dialog ──────────────────────────────────────────────────────
+
+function AssignTaskDialog({ agent, onClose }) {
+  const [prompt, setPrompt] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [result, setResult] = useState(null);
+
+  async function handleSubmit() {
+    if (!prompt) return;
+    setSubmitting(true);
+    const res = await createAgentJob(agent.id, prompt);
+    setResult(res);
+    setSubmitting(false);
+  }
+
+  const codename = agent.codename || agent.name || agent.id;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.95 }}
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+    >
+      <div className="absolute inset-0 bg-black/60" onClick={onClose} />
+      <div className="relative w-full max-w-lg rounded-lg border border-[--cyan]/20 bg-[--card] shadow-2xl">
+        <div className="flex items-center justify-between p-4 border-b border-white/[0.06]">
+          <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1">
+              <div className="w-2 h-2 rounded-full bg-[#ff5f57]" />
+              <div className="w-2 h-2 rounded-full bg-[#febc2e]" />
+              <div className="w-2 h-2 rounded-full bg-[#28c840]" />
+            </div>
+            <span className="font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider ml-1">
+              Assign Task to @{codename.toUpperCase()}
+            </span>
+          </div>
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground"><XIcon size={14} /></button>
+        </div>
+        <div className="p-4">
+          <textarea
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            placeholder="Describe the task for this agent..."
+            rows={4}
+            className="w-full text-sm border border-white/[0.06] rounded-md p-3 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors resize-y"
+            autoFocus
+          />
+          {result && (
+            <p className={`text-xs font-mono mt-2 ${result.error ? 'text-[--destructive]' : 'text-green-500'}`}>
+              {result.error || 'Job created successfully'}
+            </p>
+          )}
+          <div className="flex justify-end gap-2 mt-3">
+            <button onClick={onClose}
+              className="inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] transition-colors text-muted-foreground">
+              Cancel
+            </button>
+            <button onClick={handleSubmit} disabled={submitting || !prompt}
+              className="inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors disabled:opacity-50">
+              {submitting ? <SpinnerIcon size={12} /> : 'Create Job'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+// ─── Create Agent Form ───────────────────────────────────────────────────────
+
+function CreateAgentForm({ onCreated, onClose }) {
+  const [name, setName] = useState('');
+  const [codename, setCodename] = useState('');
+  const [role, setRole] = useState('');
+  const [specialization, setSpecialization] = useState('');
+  const [soul, setSoul] = useState('');
+  const [creating, setCreating] = useState(false);
+  const [result, setResult] = useState(null);
+
+  async function handleCreate() {
+    if (!name && !codename) return;
+    setCreating(true);
+    const res = await createAgent({ name, codename, role, specialization, soul });
+    setResult(res);
+    if (!res.error) {
+      onCreated();
+      setName(''); setCodename(''); setRole(''); setSpecialization(''); setSoul('');
+    }
+    setCreating(false);
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, height: 0 }}
+      animate={{ opacity: 1, height: 'auto' }}
+      exit={{ opacity: 0, height: 0 }}
+      className="overflow-hidden"
+    >
+      <div className="rounded-lg border border-[--cyan]/20 bg-[--card] p-5 mt-4">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1">
+              <div className="w-2 h-2 rounded-full bg-[#ff5f57]" />
+              <div className="w-2 h-2 rounded-full bg-[#febc2e]" />
+              <div className="w-2 h-2 rounded-full bg-[#28c840]" />
+            </div>
+            <span className="font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider ml-1">
+              Create New Agent
+            </span>
+          </div>
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground"><XIcon size={14} /></button>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-3">
+          <div>
+            <label className="block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1">Name</label>
+            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Reaper"
+              className="w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors" />
+          </div>
+          <div>
+            <label className="block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1">Codename</label>
+            <input value={codename} onChange={(e) => setCodename(e.target.value)} placeholder="REAPER"
+              className="w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors" />
+          </div>
+          <div>
+            <label className="block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1">Role</label>
+            <input value={role} onChange={(e) => setRole(e.target.value)} placeholder="Autonomous Recon Specialist"
+              className="w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors" />
+          </div>
+          <div>
+            <label className="block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1">Specialization</label>
+            <input value={specialization} onChange={(e) => setSpecialization(e.target.value)} placeholder="Bug Bounty Recon"
+              className="w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors" />
+          </div>
+        </div>
+
+        <div className="mb-3">
+          <label className="block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1">SOUL.md (optional)</label>
+          <textarea value={soul} onChange={(e) => setSoul(e.target.value)} rows={4} placeholder="Agent personality and system prompt..."
+            className="w-full text-sm border border-white/[0.06] rounded-md p-3 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors resize-y" />
+        </div>
+
+        {result && (
+          <p className={`text-xs font-mono mb-2 ${result.error ? 'text-[--destructive]' : 'text-green-500'}`}>
+            {result.error || `Agent created: ${result.id}`}
+          </p>
+        )}
+
+        <div className="flex gap-2">
+          <button onClick={handleCreate} disabled={creating || (!name && !codename)}
+            className="inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors disabled:opacity-50">
+            {creating ? <SpinnerIcon size={12} /> : <PlusIcon size={12} />} Create Agent
+          </button>
+          <button onClick={onClose}
+            className="inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] transition-colors text-muted-foreground">
+            Cancel
+          </button>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+// ─── Main Page ───────────────────────────────────────────────────────────────
+
+export function AgentsPage() {
+  const [agents, setAgents] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [viewingProfile, setViewingProfile] = useState(null);
+  const [assigningTask, setAssigningTask] = useState(null);
+  const [showCreate, setShowCreate] = useState(false);
+  const [search, setSearch] = useState('');
+
+  async function load() {
+    try {
+      const a = await getAgentProfilesWithStatus();
+      setAgents(a);
+    } catch {}
+    setLoading(false);
+    setRefreshing(false);
+  }
+
+  useEffect(() => { load(); }, []);
+
+  const activeCount = agents.filter(a => a.status === 'active').length;
+
+  const filtered = agents.filter(a => {
+    if (!search) return true;
+    const q = search.toLowerCase();
+    const codename = (a.codename || a.name || a.id || '').toLowerCase();
+    const role = (a.role || '').toLowerCase();
+    return codename.includes(q) || role.includes(q);
+  });
+
+  if (loading) {
+    return (
+      <div className="flex flex-col gap-4 p-6">
+        <div className="h-8 w-48 animate-pulse rounded-lg bg-white/[0.04]" />
+        <div className="flex flex-col gap-3">
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="h-20 animate-pulse rounded-lg bg-white/[0.04] border border-white/[0.06]" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-mono font-semibold text-[--cyan] text-glow-cyan">Agents</h1>
+          <p className="text-[11px] text-muted-foreground mt-1 font-mono">Manage agent profiles, roles, and assignments</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-[10px] font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20">
+            {agents.length} agents
+          </span>
+          {activeCount > 0 && (
+            <span className="inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-[10px] font-mono font-medium bg-green-500/10 text-green-500 border border-green-500/20">
+              <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
+              {activeCount} active
+            </span>
+          )}
+          <button
+            onClick={() => setShowCreate(!showCreate)}
+            className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors"
+          >
+            <PlusIcon size={12} /> New Agent
+          </button>
+          <button
+            onClick={() => { setRefreshing(true); load(); }}
+            disabled={refreshing}
+            className="inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-mono font-medium border border-white/[0.06] text-muted-foreground hover:text-foreground hover:bg-white/[0.04] disabled:opacity-50 transition-colors"
+          >
+            {refreshing ? <SpinnerIcon size={14} /> : <RefreshIcon size={14} />}
+          </button>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-3 gap-3 mb-6">
+        <div className="flex flex-col items-center justify-center p-4 rounded-lg border border-white/[0.06] bg-[--card]">
+          <span className="text-2xl font-semibold text-[--cyan] font-mono">{agents.length}</span>
+          <span className="font-mono text-[10px] text-muted-foreground uppercase tracking-wider mt-1">Agents</span>
+        </div>
+        <div className="flex flex-col items-center justify-center p-4 rounded-lg border border-white/[0.06] bg-[--card]">
+          <span className="text-2xl font-semibold text-green-500 font-mono">{activeCount}</span>
+          <span className="font-mono text-[10px] text-muted-foreground uppercase tracking-wider mt-1">Active</span>
+        </div>
+        <div className="flex flex-col items-center justify-center p-4 rounded-lg border border-white/[0.06] bg-[--card]">
+          <span className="text-2xl font-semibold font-mono text-muted-foreground">{agents.length - activeCount}</span>
+          <span className="font-mono text-[10px] text-muted-foreground uppercase tracking-wider mt-1">Idle</span>
+        </div>
+      </div>
+
+      {/* Search */}
+      {agents.length > 0 && (
+        <div className="relative mb-4">
+          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"><SearchIcon size={14} /></div>
+          <input
+            placeholder="Search agents..."
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            className="w-full text-sm border border-white/[0.06] rounded-md pl-9 pr-3 py-2 bg-black/20 font-mono placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+          />
+        </div>
+      )}
+
+      {/* Create form */}
+      <AnimatePresence>
+        {showCreate && (
+          <CreateAgentForm onCreated={() => { load(); setShowCreate(false); }} onClose={() => setShowCreate(false)} />
+        )}
+      </AnimatePresence>
+
+      {/* Agent list */}
+      <div className="flex flex-col gap-3 mt-4">
+        {filtered.length === 0 && agents.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-center rounded-lg border border-white/[0.06] bg-[--card]">
+            <div className="rounded-full bg-[--cyan]/10 p-4 mb-4">
+              <UsersIcon size={24} className="text-[--cyan]" />
+            </div>
+            <p className="text-sm font-mono font-medium mb-1">No agents configured</p>
+            <p className="text-[11px] text-muted-foreground font-mono max-w-sm">
+              Create agent profiles in the <span className="text-[--cyan]">agents/</span> directory or click "New Agent" above.
+            </p>
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="flex flex-col items-center py-12 text-center">
+            <div className="rounded-full bg-white/[0.04] border border-white/[0.06] p-4 mb-4"><SearchIcon size={24} /></div>
+            <p className="text-sm font-mono text-muted-foreground">No agents match your search.</p>
+          </div>
+        ) : (
+          filtered.map((agent, i) => (
+            <AgentCard
+              key={agent.id}
+              agent={agent}
+              onViewProfile={setViewingProfile}
+              onAssignTask={setAssigningTask}
+              index={i}
+            />
+          ))
+        )}
+      </div>
+
+      {/* Profile panel */}
+      <AnimatePresence>
+        {viewingProfile && (
+          <div className="mt-4">
+            <AgentProfilePanel agentId={viewingProfile} onClose={() => setViewingProfile(null)} />
+          </div>
+        )}
+      </AnimatePresence>
+
+      {/* Assign task dialog */}
+      <AnimatePresence>
+        {assigningTask && (
+          <AssignTaskDialog agent={assigningTask} onClose={() => setAssigningTask(null)} />
+        )}
+      </AnimatePresence>
+    </>
+  );
+}

package/lib/chat/components/app-sidebar.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { CirclePlusIcon, PanelLeftIcon, MessageIcon, BellIcon, SwarmIcon, ArrowUpCircleIcon, LifeBuoyIcon, CrosshairIcon, ShieldIcon, PackageIcon, CommandIcon } from "./icons.js";
+import { CirclePlusIcon, PanelLeftIcon, MessageIcon, BellIcon, SwarmIcon, ArrowUpCircleIcon, LifeBuoyIcon, CrosshairIcon, ShieldIcon, PackageIcon, CommandIcon, UsersIcon } from "./icons.js";
 import { getUnreadNotificationCount, getAppVersion } from "../actions.js";
 import { SidebarHistory } from "./sidebar-history.js";
 import { SidebarUserNav } from "./sidebar-user-nav.js";
@@ -128,6 +128,22 @@ function AppSidebar({ user }) {
             ) }),
             collapsed && /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Mission Control" })
           ] }) }),
+          /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              SidebarMenuButton,
+              {
+                className: collapsed ? "justify-center" : "",
+                onClick: () => {
+                  window.location.href = "/agents";
+                },
+                children: [
+                  /* @__PURE__ */ jsx(UsersIcon, { size: 16 }),
+                  !collapsed && /* @__PURE__ */ jsx("span", { children: "Agents" })
+                ]
+              }
+            ) }),
+            collapsed && /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Agents" })
+          ] }) }),
           /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
               SidebarMenuButton,

package/lib/chat/components/app-sidebar.jsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { CirclePlusIcon, PanelLeftIcon, MessageIcon, BellIcon, SwarmIcon, ArrowUpCircleIcon, LifeBuoyIcon, CrosshairIcon, ShieldIcon, PackageIcon, CommandIcon } from './icons.js';
+import { CirclePlusIcon, PanelLeftIcon, MessageIcon, BellIcon, SwarmIcon, ArrowUpCircleIcon, LifeBuoyIcon, CrosshairIcon, ShieldIcon, PackageIcon, CommandIcon, UsersIcon } from './icons.js';
 import { getUnreadNotificationCount, getAppVersion } from '../actions.js';
 import { SidebarHistory } from './sidebar-history.js';
 import { SidebarUserNav } from './sidebar-user-nav.js';
@@ -147,6 +147,24 @@ export function AppSidebar({ user }) {
             </Tooltip>
           </SidebarMenuItem>
 
+          {/* Agents */}
+          <SidebarMenuItem>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <SidebarMenuButton
+                  className={collapsed ? 'justify-center' : ''}
+                  onClick={() => { window.location.href = '/agents'; }}
+                >
+                  <UsersIcon size={16} />
+                  {!collapsed && <span>Agents</span>}
+                </SidebarMenuButton>
+              </TooltipTrigger>
+              {collapsed && (
+                <TooltipContent side="right">Agents</TooltipContent>
+              )}
+            </Tooltip>
+          </SidebarMenuItem>
+
           {/* Targets */}
           <SidebarMenuItem>
             <Tooltip>