@harbinger-ai/harbinger 0.1.1 → 0.1.3

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

@@ -1,26 +1,27 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { ShieldIcon, PlusIcon, ChevronDownIcon, SpinnerIcon } from './icons.js';
 import { getFindings, createFinding, updateFinding, deleteFinding, getFindingCounts } from '../../bounty/actions.js';
 
 const SEVERITY_CONFIG = {
-  critical: { color: 'bg-red-600/15 text-red-500 border-red-500/20', dot: 'bg-red-500', label: 'Critical' },
-  high: { color: 'bg-orange-500/15 text-orange-500 border-orange-500/20', dot: 'bg-orange-500', label: 'High' },
-  medium: { color: 'bg-yellow-500/15 text-yellow-500 border-yellow-500/20', dot: 'bg-yellow-500', label: 'Medium' },
-  low: { color: 'bg-blue-500/15 text-blue-500 border-blue-500/20', dot: 'bg-blue-500', label: 'Low' },
-  info: { color: 'bg-muted text-muted-foreground border-border', dot: 'bg-muted-foreground', label: 'Info' },
+  critical: { bg: 'bg-red-600/15', text: 'text-red-500', border: 'border-red-500/20', dot: 'bg-red-500', glow: 'shadow-[0_0_20px_oklch(0.6_0.22_25/20%)]', label: 'Critical' },
+  high: { bg: 'bg-orange-500/15', text: 'text-orange-500', border: 'border-orange-500/20', dot: 'bg-orange-500', glow: 'shadow-[0_0_20px_oklch(0.7_0.17_55/20%)]', label: 'High' },
+  medium: { bg: 'bg-yellow-500/15', text: 'text-yellow-500', border: 'border-yellow-500/20', dot: 'bg-yellow-500', glow: '', label: 'Medium' },
+  low: { bg: 'bg-blue-500/15', text: 'text-blue-500', border: 'border-blue-500/20', dot: 'bg-blue-500', glow: '', label: 'Low' },
+  info: { bg: 'bg-white/5', text: 'text-muted-foreground', border: 'border-white/10', dot: 'bg-muted-foreground', glow: '', label: 'Info' },
 };
 
 const STATUS_FLOW = ['new', 'triaging', 'confirmed', 'reported', 'duplicate', 'resolved', 'bounty_paid'];
 const STATUS_COLORS = {
-  new: 'bg-blue-500/10 text-blue-500',
-  triaging: 'bg-yellow-500/10 text-yellow-500',
-  confirmed: 'bg-green-500/10 text-green-500',
-  reported: 'bg-purple-500/10 text-purple-500',
-  duplicate: 'bg-muted text-muted-foreground',
-  resolved: 'bg-emerald-500/10 text-emerald-500',
-  bounty_paid: 'bg-green-600/10 text-green-600',
+  new: { bg: 'bg-blue-500/10', text: 'text-blue-500', border: 'border-blue-500/20' },
+  triaging: { bg: 'bg-yellow-500/10', text: 'text-yellow-500', border: 'border-yellow-500/20' },
+  confirmed: { bg: 'bg-green-500/10', text: 'text-green-500', border: 'border-green-500/20' },
+  reported: { bg: 'bg-purple-500/10', text: 'text-purple-500', border: 'border-purple-500/20' },
+  duplicate: { bg: 'bg-white/5', text: 'text-muted-foreground', border: 'border-white/10' },
+  resolved: { bg: 'bg-emerald-500/10', text: 'text-emerald-500', border: 'border-emerald-500/20' },
+  bounty_paid: { bg: 'bg-green-600/10', text: 'text-green-600', border: 'border-green-600/20' },
 };
 
 const FINDING_TYPES = ['xss', 'sqli', 'ssrf', 'idor', 'rce', 'lfi', 'open_redirect', 'subdomain_takeover', 'info_disclosure', 'misconfig', 'auth_bypass', 'rate_limit', 'cors', 'xxe', 'csrf', 'other'];
@@ -37,40 +38,54 @@ function timeAgo(ts) {
 
 function StatsBar({ counts }) {
   if (!counts) return null;
+  const stats = [
+    { label: 'Total', value: counts.total, text: 'text-[--cyan]', glow: 'glow-cyan' },
+    { label: 'Critical', value: counts.critical, text: 'text-red-500', glow: counts.critical > 0 ? 'shadow-[0_0_20px_oklch(0.6_0.22_25/15%)]' : '' },
+    { label: 'High', value: counts.high, text: 'text-orange-500', glow: counts.high > 0 ? 'shadow-[0_0_20px_oklch(0.7_0.17_55/15%)]' : '' },
+    { label: 'Confirmed', value: counts.confirmed, text: 'text-green-500', glow: '' },
+    { label: 'Reported', value: counts.reported, text: 'text-purple-500', glow: '' },
+    { label: 'Bounty', value: counts.totalBounty > 0 ? `$${counts.totalBounty.toLocaleString()}` : '$0', text: 'text-emerald-500', glow: counts.totalBounty > 0 ? 'shadow-[0_0_20px_oklch(0.7_0.17_160/15%)]' : '' },
+  ];
+
   return (
-    <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-3 mb-6">
-      {[
-        { label: 'Total', value: counts.total, color: 'text-foreground' },
-        { label: 'Critical', value: counts.critical, color: 'text-red-500' },
-        { label: 'High', value: counts.high, color: 'text-orange-500' },
-        { label: 'Confirmed', value: counts.confirmed, color: 'text-green-500' },
-        { label: 'Reported', value: counts.reported, color: 'text-purple-500' },
-        { label: 'Bounty', value: counts.totalBounty > 0 ? `$${counts.totalBounty.toLocaleString()}` : '$0', color: 'text-emerald-500' },
-      ].map(s => (
-        <div key={s.label} className="rounded-lg border bg-card p-3">
-          <p className="text-[10px] text-muted-foreground uppercase tracking-wide">{s.label}</p>
-          <p className={`text-xl font-semibold mt-0.5 ${s.color}`}>{s.value}</p>
-        </div>
+    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 mb-6">
+      {stats.map((s, i) => (
+        <motion.div
+          key={s.label}
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.25, delay: i * 0.05 }}
+          className={`rounded-lg border border-white/[0.06] bg-[--card] p-3 ${s.glow}`}
+        >
+          <p className="text-[10px] text-muted-foreground uppercase tracking-wider font-mono">{s.label}</p>
+          <p className={`text-xl font-mono font-semibold mt-0.5 ${s.text}`}>{s.value}</p>
+        </motion.div>
       ))}
     </div>
   );
 }
 
-function FindingCard({ finding, onUpdate, onDelete }) {
+function FindingCard({ finding, onUpdate, onDelete, index }) {
   const [expanded, setExpanded] = useState(false);
   const sev = SEVERITY_CONFIG[finding.severity] || SEVERITY_CONFIG.info;
+  const st = STATUS_COLORS[finding.status] || STATUS_COLORS.new;
 
   return (
-    <div className={`rounded-lg border bg-card ${sev.color.split(' ')[0].replace('/15', '/5').replace('/10', '/5')}`}>
-      <button onClick={() => setExpanded(!expanded)} className="flex items-center gap-3 w-full text-left p-4 hover:bg-accent/30 rounded-lg">
-        <div className={`shrink-0 w-2 h-2 rounded-full ${sev.dot}`} />
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.25, delay: index * 0.03 }}
+      className={`rounded-lg border border-white/[0.06] bg-[--card] hover:border-[--cyan]/20 transition-all ${sev.glow}`}
+    >
+      <button onClick={() => setExpanded(!expanded)} className="flex items-center gap-3 w-full text-left p-4 hover:bg-white/[0.02] rounded-lg transition-colors">
+        <div className={`shrink-0 w-2.5 h-2.5 rounded-full ${sev.dot}`} />
         <div className="flex-1 min-w-0">
-          <p className="text-sm font-medium truncate">{finding.title}</p>
+          <p className="text-sm font-mono font-medium truncate">{finding.title}</p>
           <div className="flex items-center gap-2 mt-0.5 flex-wrap">
-            <span className={`inline-flex rounded-full px-2 py-0.5 text-[10px] font-medium border ${sev.color}`}>{sev.label}</span>
-            <span className="inline-flex rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">{finding.type}</span>
-            {finding.agentId && <span className="inline-flex rounded-full bg-purple-500/10 px-2 py-0.5 text-[10px] font-medium text-purple-500">{finding.agentId}</span>}
-            <span className="text-[10px] text-muted-foreground">{timeAgo(finding.createdAt)}</span>
+            <span className={`inline-flex rounded-full px-2 py-0.5 text-[10px] font-mono font-medium border ${sev.bg} ${sev.text} ${sev.border}`}>{sev.label}</span>
+            <span className="inline-flex rounded-full bg-white/5 border border-white/10 px-2 py-0.5 text-[10px] font-mono font-medium text-muted-foreground">{finding.type}</span>
+            {finding.agentId && <span className="inline-flex rounded-full bg-purple-500/10 border border-purple-500/20 px-2 py-0.5 text-[10px] font-mono font-medium text-purple-500">{finding.agentId}</span>}
+            <span className="text-[10px] font-mono text-muted-foreground">{timeAgo(finding.createdAt)}</span>
           </div>
         </div>
         <div className="flex items-center gap-2 shrink-0">
@@ -78,7 +93,7 @@ function FindingCard({ finding, onUpdate, onDelete }) {
             value={finding.status}
             onClick={e => e.stopPropagation()}
             onChange={e => { e.stopPropagation(); onUpdate(finding.id, { status: e.target.value }); }}
-            className={`text-[10px] font-medium rounded-full px-2 py-0.5 border-0 cursor-pointer ${STATUS_COLORS[finding.status] || ''}`}
+            className={`text-[10px] font-mono font-medium rounded-full px-2 py-0.5 border cursor-pointer bg-transparent ${st.bg} ${st.text} ${st.border} focus:outline-none`}
           >
             {STATUS_FLOW.map(s => <option key={s} value={s}>{s.replace('_', ' ')}</option>)}
           </select>
@@ -86,41 +101,51 @@ function FindingCard({ finding, onUpdate, onDelete }) {
         </div>
       </button>
 
-      {expanded && (
-        <div className="border-t px-4 py-3 flex flex-col gap-3">
-          {finding.description && (
-            <div>
-              <p className="text-xs font-medium text-muted-foreground mb-1">Description</p>
-              <p className="text-xs whitespace-pre-wrap">{finding.description}</p>
-            </div>
-          )}
-          {finding.stepsToReproduce && (
-            <div>
-              <p className="text-xs font-medium text-muted-foreground mb-1">Steps to Reproduce</p>
-              <pre className="text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48">{finding.stepsToReproduce}</pre>
-            </div>
-          )}
-          {finding.impact && (
-            <div>
-              <p className="text-xs font-medium text-muted-foreground mb-1">Impact</p>
-              <p className="text-xs">{finding.impact}</p>
-            </div>
-          )}
-          {finding.rawOutput && (
-            <div>
-              <p className="text-xs font-medium text-muted-foreground mb-1">Raw Output</p>
-              <pre className="text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-32">{finding.rawOutput}</pre>
+      <AnimatePresence>
+        {expanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="overflow-hidden"
+          >
+            <div className="border-t border-white/[0.06] px-4 py-3 flex flex-col gap-3">
+              {finding.description && (
+                <div>
+                  <p className="text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5">Description</p>
+                  <p className="text-xs font-mono whitespace-pre-wrap text-foreground/80">{finding.description}</p>
+                </div>
+              )}
+              {finding.stepsToReproduce && (
+                <div>
+                  <p className="text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5">Steps to Reproduce</p>
+                  <pre className="text-[11px] bg-black/30 border border-white/[0.04] rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48 text-foreground/80 scrollbar-thin">{finding.stepsToReproduce}</pre>
+                </div>
+              )}
+              {finding.impact && (
+                <div>
+                  <p className="text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5">Impact</p>
+                  <p className="text-xs font-mono text-foreground/80">{finding.impact}</p>
+                </div>
+              )}
+              {finding.rawOutput && (
+                <div>
+                  <p className="text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5">Raw Output</p>
+                  <pre className="text-[11px] bg-black/30 border border-white/[0.04] rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-32 text-foreground/80 scrollbar-thin">{finding.rawOutput}</pre>
+                </div>
+              )}
+              <div className="flex items-center gap-2 pt-1">
+                {finding.bountyAmount > 0 && <span className="inline-flex rounded-full bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 px-2 py-0.5 text-[10px] font-mono font-medium">${finding.bountyAmount}</span>}
+                {finding.reportUrl && <a href={finding.reportUrl} target="_blank" rel="noopener" className="text-[10px] font-mono text-[--cyan] hover:underline">View Report</a>}
+                <div className="flex-1" />
+                <button onClick={() => onDelete(finding.id)} className="text-[10px] font-mono text-muted-foreground hover:text-[--destructive] transition-colors">Delete</button>
+              </div>
             </div>
-          )}
-          <div className="flex items-center gap-2">
-            {finding.bountyAmount > 0 && <span className="inline-flex rounded-full bg-emerald-500/10 text-emerald-500 px-2 py-0.5 text-[10px] font-medium">${finding.bountyAmount}</span>}
-            {finding.reportUrl && <a href={finding.reportUrl} target="_blank" rel="noopener" className="text-[10px] text-blue-500 hover:underline">View Report</a>}
-            <div className="flex-1" />
-            <button onClick={() => onDelete(finding.id)} className="text-[10px] text-muted-foreground hover:text-destructive">Delete</button>
-          </div>
-        </div>
-      )}
-    </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
   );
 }
 
@@ -154,16 +179,20 @@ export function FindingsPage() {
 
   const filtered = filter === 'all' ? findings_ : findings_.filter(f => f.severity === filter);
 
-  if (loading) return <div className="flex flex-col gap-3">{[...Array(4)].map((_, i) => <div key={i} className="h-16 animate-pulse rounded-lg bg-border/50" />)}</div>;
+  if (loading) return <div className="flex flex-col gap-3">{[...Array(4)].map((_, i) => <div key={i} className="h-16 animate-pulse rounded-lg bg-white/[0.04] border border-white/[0.06]" />)}</div>;
 
   return (
     <>
+      {/* Header */}
       <div className="flex items-center justify-between mb-4">
         <div>
-          <h1 className="text-2xl font-semibold">Findings</h1>
-          <p className="text-sm text-muted-foreground mt-1">Vulnerability discoveries across all agents and tools</p>
+          <h1 className="text-2xl font-mono font-semibold text-[--cyan] text-glow-cyan">Findings</h1>
+          <p className="text-[11px] text-muted-foreground mt-1 font-mono">Vulnerability discoveries across all agents and tools</p>
         </div>
-        <button onClick={() => setShowAdd(!showAdd)} className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium bg-foreground text-background hover:opacity-90">
+        <button
+          onClick={() => setShowAdd(!showAdd)}
+          className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-mono font-medium bg-[--cyan] text-[--primary-foreground] hover:opacity-90 transition-opacity"
+        >
           <PlusIcon size={12} /> New Finding
         </button>
       </div>
@@ -171,43 +200,69 @@ export function FindingsPage() {
       <StatsBar counts={counts} />
 
       {/* Add form */}
-      {showAdd && (
-        <div className="rounded-lg border bg-card p-4 mb-4 flex flex-col gap-3">
-          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-            <input placeholder="Title" value={newFinding.title} onChange={e => setNewFinding({ ...newFinding, title: e.target.value })} className="text-sm border rounded-md px-3 py-2 bg-background col-span-1 sm:col-span-3" />
-            <select value={newFinding.severity} onChange={e => setNewFinding({ ...newFinding, severity: e.target.value })} className="text-sm border rounded-md px-3 py-2 bg-background">
-              {Object.keys(SEVERITY_CONFIG).map(s => <option key={s} value={s}>{s}</option>)}
-            </select>
-            <select value={newFinding.type} onChange={e => setNewFinding({ ...newFinding, type: e.target.value })} className="text-sm border rounded-md px-3 py-2 bg-background">
-              {FINDING_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
-            </select>
-          </div>
-          <textarea placeholder="Description..." value={newFinding.description} onChange={e => setNewFinding({ ...newFinding, description: e.target.value })} className="text-sm border rounded-md px-3 py-2 bg-background min-h-[80px]" />
-          <div className="flex gap-2">
-            <button onClick={handleCreate} className="inline-flex items-center gap-1 rounded-md px-3 py-1.5 text-xs font-medium bg-foreground text-background hover:opacity-90">Save</button>
-            <button onClick={() => setShowAdd(false)} className="text-xs text-muted-foreground hover:text-foreground px-3 py-1.5">Cancel</button>
-          </div>
-        </div>
-      )}
+      <AnimatePresence>
+        {showAdd && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.2 }}
+            className="overflow-hidden"
+          >
+            <div className="rounded-lg border border-white/[0.06] bg-[--card] p-4 mb-4 flex flex-col gap-3">
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                <input placeholder="Title" value={newFinding.title} onChange={e => setNewFinding({ ...newFinding, title: e.target.value })} className="text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 col-span-1 sm:col-span-3 font-mono placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors" />
+                <select value={newFinding.severity} onChange={e => setNewFinding({ ...newFinding, severity: e.target.value })} className="text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono focus:outline-none focus:border-[--cyan]/40 transition-colors">
+                  {Object.keys(SEVERITY_CONFIG).map(s => <option key={s} value={s}>{s}</option>)}
+                </select>
+                <select value={newFinding.type} onChange={e => setNewFinding({ ...newFinding, type: e.target.value })} className="text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono focus:outline-none focus:border-[--cyan]/40 transition-colors">
+                  {FINDING_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
+                </select>
+              </div>
+              <textarea placeholder="Description..." value={newFinding.description} onChange={e => setNewFinding({ ...newFinding, description: e.target.value })} className="text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 min-h-[80px] font-mono placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors" />
+              <div className="flex gap-2">
+                <button onClick={handleCreate} className="inline-flex items-center gap-1 rounded-md px-3 py-1.5 text-xs font-mono font-medium bg-[--cyan] text-[--primary-foreground] hover:opacity-90 transition-opacity">Save</button>
+                <button onClick={() => setShowAdd(false)} className="text-xs font-mono text-muted-foreground hover:text-foreground px-3 py-1.5 transition-colors">Cancel</button>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
 
       {/* Filter tabs */}
-      <div className="flex gap-1 mb-4 overflow-x-auto">
-        {['all', ...Object.keys(SEVERITY_CONFIG)].map(f => (
-          <button key={f} onClick={() => setFilter(f)} className={`px-3 py-1 rounded-full text-xs font-medium transition-colors ${filter === f ? 'bg-foreground text-background' : 'bg-muted text-muted-foreground hover:text-foreground'}`}>
-            {f === 'all' ? `All (${findings_.length})` : `${SEVERITY_CONFIG[f].label} (${findings_.filter(x => x.severity === f).length})`}
-          </button>
-        ))}
+      <div className="flex gap-1.5 mb-4 overflow-x-auto scrollbar-thin">
+        {['all', ...Object.keys(SEVERITY_CONFIG)].map(f => {
+          const isActive = filter === f;
+          const sev = SEVERITY_CONFIG[f];
+          return (
+            <button
+              key={f}
+              onClick={() => setFilter(f)}
+              className={`shrink-0 px-3 py-1 rounded-full text-[10px] font-mono font-medium border transition-colors ${
+                isActive
+                  ? f === 'all'
+                    ? 'bg-[--cyan]/10 text-[--cyan] border-[--cyan]/20'
+                    : `${sev.bg} ${sev.text} ${sev.border}`
+                  : 'border-white/[0.06] text-muted-foreground hover:text-foreground hover:border-white/[0.12]'
+              }`}
+            >
+              {f === 'all' ? `All (${findings_.length})` : `${sev.label} (${findings_.filter(x => x.severity === f).length})`}
+            </button>
+          );
+        })}
       </div>
 
       {/* Findings list */}
       {filtered.length === 0 ? (
         <div className="flex flex-col items-center justify-center py-16 text-center">
-          <div className="rounded-full bg-muted p-4 mb-4"><ShieldIcon size={24} /></div>
-          <p className="text-sm font-medium mb-1">No findings yet</p>
-          <p className="text-xs text-muted-foreground max-w-sm">Findings will appear here as your agents discover vulnerabilities, or add them manually.</p>
+          <div className="rounded-full bg-white/[0.04] border border-white/[0.06] p-4 mb-4"><ShieldIcon size={24} /></div>
+          <p className="text-sm font-mono font-medium mb-1">No findings yet</p>
+          <p className="text-[11px] font-mono text-muted-foreground max-w-sm">Findings will appear here as your agents discover vulnerabilities, or add them manually.</p>
         </div>
       ) : (
-        <div className="flex flex-col gap-2">{filtered.map(f => <FindingCard key={f.id} finding={f} onUpdate={handleUpdate} onDelete={handleDelete} />)}</div>
+        <div className="flex flex-col gap-2">
+          {filtered.map((f, i) => <FindingCard key={f.id} finding={f} onUpdate={handleUpdate} onDelete={handleDelete} index={i} />)}
+        </div>
       )}
     </>
   );

package/lib/chat/components/icons.js

@@ -712,6 +712,63 @@ function PlugIcon({ size = 16 }) {
     }
   );
 }
+function CommandIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M2 12a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V7h-5a8 8 0 0 0-5 2 8 8 0 0 0-5-2H2Z" }),
+        /* @__PURE__ */ jsx("path", { d: "M6 11c1.5 0 3 .5 3 2-2 0-3 0-3-2Z" }),
+        /* @__PURE__ */ jsx("path", { d: "M18 11c-1.5 0-3 .5-3 2 2 0 3 0 3-2Z" })
+      ]
+    }
+  );
+}
+function CpuIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", width: size, height: size, children: [
+    /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "6", height: "6" }),
+    /* @__PURE__ */ jsx("path", { d: "M15 2v2" }),
+    /* @__PURE__ */ jsx("path", { d: "M15 20v2" }),
+    /* @__PURE__ */ jsx("path", { d: "M2 15h2" }),
+    /* @__PURE__ */ jsx("path", { d: "M2 9h2" }),
+    /* @__PURE__ */ jsx("path", { d: "M20 15h2" }),
+    /* @__PURE__ */ jsx("path", { d: "M20 9h2" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 2v2" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 20v2" })
+  ] });
+}
+function UsersIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", width: size, height: size, children: [
+    /* @__PURE__ */ jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "7", r: "4" }),
+    /* @__PURE__ */ jsx("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
+  ] });
+}
+function EyeIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", width: size, height: size, children: [
+    /* @__PURE__ */ jsx("path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
+function EyeOffIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", width: size, height: size, children: [
+    /* @__PURE__ */ jsx("path", { d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }),
+    /* @__PURE__ */ jsx("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }),
+    /* @__PURE__ */ jsx("path", { d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }),
+    /* @__PURE__ */ jsx("path", { d: "m2 2 20 20" })
+  ] });
+}
 function LogOutIcon({ size = 16 }) {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -741,9 +798,13 @@ export {
   ChevronDownIcon,
   CirclePlusIcon,
   ClockIcon,
+  CommandIcon,
   CopyIcon,
+  CpuIcon,
   CrosshairIcon,
   DownloadIcon,
+  EyeIcon,
+  EyeOffIcon,
   FileTextIcon,
   GlobeIcon,
   KeyIcon,
@@ -771,6 +832,7 @@ export {
   SunIcon,
   SwarmIcon,
   TrashIcon,
+  UsersIcon,
   WrenchIcon,
   XIcon,
   ZapIcon

package/lib/chat/components/icons.jsx

@@ -720,6 +720,68 @@ export function PlugIcon({ size = 16 }) {
   );
 }
 
+export function CommandIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <path d="M2 12a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V7h-5a8 8 0 0 0-5 2 8 8 0 0 0-5-2H2Z" />
+      <path d="M6 11c1.5 0 3 .5 3 2-2 0-3 0-3-2Z" />
+      <path d="M18 11c-1.5 0-3 .5-3 2 2 0 3 0 3-2Z" />
+    </svg>
+  );
+}
+
+export function CpuIcon({ size = 16 }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" width={size} height={size}>
+      <rect x="4" y="4" width="16" height="16" rx="2" />
+      <rect x="9" y="9" width="6" height="6" />
+      <path d="M15 2v2" /><path d="M15 20v2" /><path d="M2 15h2" /><path d="M2 9h2" />
+      <path d="M20 15h2" /><path d="M20 9h2" /><path d="M9 2v2" /><path d="M9 20v2" />
+    </svg>
+  );
+}
+
+export function UsersIcon({ size = 16 }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" width={size} height={size}>
+      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+      <circle cx="9" cy="7" r="4" />
+      <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+    </svg>
+  );
+}
+
+export function EyeIcon({ size = 16 }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" width={size} height={size}>
+      <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}
+
+export function EyeOffIcon({ size = 16 }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" width={size} height={size}>
+      <path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
+      <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
+      <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
+      <path d="m2 2 20 20" />
+    </svg>
+  );
+}
+
 export function LogOutIcon({ size = 16 }) {
   return (
     <svg

package/lib/chat/components/index.js

@@ -7,10 +7,13 @@ export { TriggersPage } from './triggers-page.js';
 export { PageLayout } from './page-layout.js';
 export { SettingsLayout } from './settings-layout.js';
 export { SettingsSecretsPage } from './settings-secrets-page.js';
+export { SettingsProvidersPage } from './settings-providers-page.js';
 export { McpPage } from './mcp-page.js';
+export { AgentsPage } from './agents-page.js';
 export { TargetsPage } from './targets-page.js';
 export { FindingsPage } from './findings-page.js';
 export { RegistryPage } from './registry-page.js';
+export { MissionControlPage } from './mission-control.js';
 export { AppSidebar } from './app-sidebar.js';
 export { SidebarHistory } from './sidebar-history.js';
 export { SidebarHistoryItem } from './sidebar-history-item.js';