@harbinger-ai/harbinger 0.1.0 → 0.1.2

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

@@ -1,24 +1,25 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { CrosshairIcon, PlusIcon, TrashIcon, ChevronDownIcon, GlobeIcon, SpinnerIcon, DownloadIcon, CheckIcon } from './icons.js';
 import { getPrograms, createProgram, deleteProgram, getTargets, createTarget, deleteTarget, updateTarget, syncTargetsFromPlatform, syncAllTargets, getSyncStatus } from '../../bounty/actions.js';
 
 const PLATFORMS = [
-  { id: 'hackerone', label: 'HackerOne', color: 'bg-purple-500/10 text-purple-500', border: 'border-purple-500/20' },
-  { id: 'bugcrowd', label: 'Bugcrowd', color: 'bg-orange-500/10 text-orange-500', border: 'border-orange-500/20' },
-  { id: 'intigriti', label: 'Intigriti', color: 'bg-blue-500/10 text-blue-500', border: 'border-blue-500/20' },
-  { id: 'yeswehack', label: 'YesWeHack', color: 'bg-teal-500/10 text-teal-500', border: 'border-teal-500/20' },
-  { id: 'federacy', label: 'Federacy', color: 'bg-pink-500/10 text-pink-500', border: 'border-pink-500/20' },
-  { id: 'custom', label: 'Custom', color: 'bg-muted text-muted-foreground', border: 'border-border' },
+  { id: 'hackerone', label: 'HackerOne', bg: 'bg-purple-500/10', text: 'text-purple-500', border: 'border-purple-500/20' },
+  { id: 'bugcrowd', label: 'Bugcrowd', bg: 'bg-orange-500/10', text: 'text-orange-500', border: 'border-orange-500/20' },
+  { id: 'intigriti', label: 'Intigriti', bg: 'bg-blue-500/10', text: 'text-blue-500', border: 'border-blue-500/20' },
+  { id: 'yeswehack', label: 'YesWeHack', bg: 'bg-teal-500/10', text: 'text-teal-500', border: 'border-teal-500/20' },
+  { id: 'federacy', label: 'Federacy', bg: 'bg-pink-500/10', text: 'text-pink-500', border: 'border-pink-500/20' },
+  { id: 'custom', label: 'Custom', bg: 'bg-white/5', text: 'text-muted-foreground', border: 'border-white/10' },
 ];
 
 const TARGET_TYPES = ['domain', 'wildcard', 'ip', 'cidr', 'url', 'api', 'mobile'];
 const STATUS_COLORS = {
-  in_scope: 'bg-green-500/10 text-green-500',
-  out_of_scope: 'bg-red-500/10 text-red-500',
-  testing: 'bg-yellow-500/10 text-yellow-500',
-  completed: 'bg-blue-500/10 text-blue-500',
+  in_scope: { bg: 'bg-green-500/10', text: 'text-green-500', border: 'border-green-500/20', dot: 'bg-green-500' },
+  out_of_scope: { bg: 'bg-red-500/10', text: 'text-red-500', border: 'border-red-500/20', dot: 'bg-red-500' },
+  testing: { bg: 'bg-yellow-500/10', text: 'text-yellow-500', border: 'border-yellow-500/20', dot: 'bg-yellow-500 animate-pulse' },
+  completed: { bg: 'bg-blue-500/10', text: 'text-blue-500', border: 'border-blue-500/20', dot: 'bg-blue-500' },
 };
 
 function timeAgo(ts) {
@@ -31,8 +32,12 @@ function timeAgo(ts) {
   return `${Math.floor(hrs / 24)}d ago`;
 }
 
+function getPlatStyle(platformId) {
+  return PLATFORMS.find(p => p.id === platformId) || PLATFORMS[5];
+}
+
 function SyncPanel({ onSync, syncStatus }) {
-  const [syncing, setSyncing] = useState(null); // platform name or 'all'
+  const [syncing, setSyncing] = useState(null);
   const [results, setResults] = useState(null);
   const [maxPrograms, setMaxPrograms] = useState('50');
 
@@ -57,20 +62,27 @@ function SyncPanel({ onSync, syncStatus }) {
   const syncablePlatforms = PLATFORMS.filter(p => p.id !== 'custom');
 
   return (
-    <div className="rounded-lg border bg-card p-4 mb-6">
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+      className="rounded-lg border border-white/[0.06] bg-[--card] p-4 mb-6"
+    >
       <div className="flex items-center justify-between mb-3">
         <div>
-          <h3 className="text-sm font-medium">Sync from Bounty Platforms</h3>
-          <p className="text-[11px] text-muted-foreground mt-0.5">
-            Import programs and targets from bounty-targets-data (arkadiyt/bounty-targets-data)
+          <div className="flex items-center gap-2 mb-0.5">
+            <DownloadIcon size={14} />
+            <h3 className="text-sm font-mono font-medium text-[--cyan]">Sync from Bounty Platforms</h3>
+          </div>
+          <p className="text-[11px] text-muted-foreground font-mono">
+            Import programs and targets from bounty-targets-data
           </p>
         </div>
         {syncStatus?.lastSyncedAt && (
-          <span className="text-[10px] text-muted-foreground">Last sync: {timeAgo(syncStatus.lastSyncedAt)}</span>
+          <span className="text-[10px] text-muted-foreground font-mono">Last sync: {timeAgo(syncStatus.lastSyncedAt)}</span>
         )}
       </div>
 
-      {/* Platform sync buttons */}
       <div className="flex flex-wrap gap-2 mb-3">
         {syncablePlatforms.map(p => {
           const count = syncStatus?.platformCounts?.[p.id] || 0;
@@ -79,125 +91,148 @@ function SyncPanel({ onSync, syncStatus }) {
               key={p.id}
               onClick={() => handleSync(p.id)}
               disabled={syncing !== null}
-              className={`inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium border transition-colors hover:bg-accent/50 disabled:opacity-50 ${p.border}`}
+              className={`inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-mono font-medium border transition-colors hover:bg-white/[0.04] disabled:opacity-50 ${p.border}`}
             >
               {syncing === p.id ? <SpinnerIcon size={12} /> : <DownloadIcon size={12} />}
               {p.label}
-              {count > 0 && <span className={`inline-flex rounded-full px-1.5 py-0.5 text-[9px] ${p.color}`}>{count}</span>}
+              {count > 0 && <span className={`inline-flex rounded-full px-1.5 py-0.5 text-[9px] font-mono ${p.bg} ${p.text}`}>{count}</span>}
             </button>
           );
         })}
         <button
           onClick={() => handleSync('all')}
           disabled={syncing !== null}
-          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 disabled:opacity-50"
+          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 disabled:opacity-50 transition-opacity"
         >
           {syncing === 'all' ? <SpinnerIcon size={12} /> : <DownloadIcon size={12} />}
           Sync All
         </button>
       </div>
 
-      {/* Max programs limit */}
       <div className="flex items-center gap-2 mb-3">
-        <label className="text-[10px] text-muted-foreground">Max programs per platform:</label>
+        <label className="text-[10px] text-muted-foreground font-mono uppercase tracking-wider">Max programs:</label>
         <input
           type="number"
           value={maxPrograms}
           onChange={e => setMaxPrograms(e.target.value)}
-          className="w-20 text-xs border rounded-md px-2 py-1 bg-background"
+          className="w-20 text-xs border border-white/[0.06] rounded-md px-2 py-1 bg-black/20 font-mono focus:outline-none focus:border-[--cyan]/40 transition-colors"
           min="0"
           placeholder="0 = all"
         />
-        <span className="text-[10px] text-muted-foreground">(0 = unlimited)</span>
+        <span className="text-[10px] text-muted-foreground font-mono">(0 = unlimited)</span>
       </div>
 
-      {/* Sync results */}
-      {results && (
-        <div className="rounded-md bg-muted/50 p-3 mt-2">
-          {results.error ? (
-            <p className="text-xs text-destructive">{results.error}</p>
-          ) : (
-            <div className="flex flex-col gap-1">
-              {Object.entries(results).map(([platform, stats]) => (
-                <div key={platform} className="flex items-center gap-3 text-xs">
-                  <span className="font-medium w-24">{platform}</span>
-                  <span className="text-green-500">+{stats.programsAdded} programs</span>
-                  <span className="text-blue-500">{stats.programsUpdated} updated</span>
-                  <span className="text-green-500">+{stats.targetsAdded} targets</span>
-                  <span className="text-muted-foreground">{stats.targetsSkipped} skipped</span>
-                  {stats.errors?.length > 0 && <span className="text-destructive">{stats.errors.length} errors</span>}
+      <AnimatePresence>
+        {results && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            className="overflow-hidden"
+          >
+            <div className="rounded-md bg-black/30 border border-white/[0.04] p-3 mt-2">
+              {results.error ? (
+                <p className="text-xs font-mono text-[--destructive]">{results.error}</p>
+              ) : (
+                <div className="flex flex-col gap-1">
+                  {Object.entries(results).map(([platform, stats]) => (
+                    <div key={platform} className="flex items-center gap-3 text-xs font-mono">
+                      <span className="font-medium w-24 text-foreground/80">{platform}</span>
+                      <span className="text-green-500">+{stats.programsAdded} programs</span>
+                      <span className="text-blue-500">{stats.programsUpdated} updated</span>
+                      <span className="text-green-500">+{stats.targetsAdded} targets</span>
+                      <span className="text-muted-foreground">{stats.targetsSkipped} skipped</span>
+                      {stats.errors?.length > 0 && <span className="text-[--destructive]">{stats.errors.length} errors</span>}
+                    </div>
+                  ))}
                 </div>
-              ))}
+              )}
             </div>
-          )}
-        </div>
-      )}
+          </motion.div>
+        )}
+      </AnimatePresence>
 
-      {/* Sync status summary */}
       {syncStatus && syncStatus.totalSyncedPrograms > 0 && (
-        <div className="flex items-center gap-3 mt-2 pt-2 border-t">
-          <span className="text-[10px] text-muted-foreground">{syncStatus.totalSyncedPrograms} synced programs:</span>
+        <div className="flex items-center gap-3 mt-3 pt-3 border-t border-white/[0.06]">
+          <span className="text-[10px] text-muted-foreground font-mono">{syncStatus.totalSyncedPrograms} synced:</span>
           {Object.entries(syncStatus.platformCounts || {}).map(([p, count]) => {
-            const plat = PLATFORMS.find(x => x.id === p);
+            const plat = getPlatStyle(p);
             return (
-              <span key={p} className={`inline-flex rounded-full px-2 py-0.5 text-[9px] font-medium ${plat?.color || ''}`}>
-                {plat?.label || p} ({count})
+              <span key={p} className={`inline-flex rounded-full px-2 py-0.5 text-[9px] font-mono font-medium border ${plat.bg} ${plat.text} ${plat.border}`}>
+                {plat.label} ({count})
               </span>
             );
           })}
         </div>
       )}
-    </div>
+    </motion.div>
   );
 }
 
-function ProgramCard({ program, onSelect, selected, onDelete }) {
-  const platform = PLATFORMS.find(p => p.id === program.platform) || PLATFORMS[5];
+function ProgramCard({ program, onSelect, selected, onDelete, index }) {
+  const plat = getPlatStyle(program.platform);
   return (
-    <button
+    <motion.button
+      initial={{ opacity: 0, x: -8 }}
+      animate={{ opacity: 1, x: 0 }}
+      transition={{ duration: 0.25, delay: index * 0.02 }}
       onClick={() => onSelect(program.id)}
-      className={`flex items-center gap-3 w-full text-left p-3 rounded-lg border transition-colors ${selected ? 'border-foreground bg-accent/50' : 'bg-card hover:bg-accent/30'}`}
+      className={`flex items-center gap-3 w-full text-left p-3 rounded-lg border transition-all ${
+        selected
+          ? 'border-[--cyan]/40 bg-[--cyan]/5 glow-cyan'
+          : 'border-white/[0.06] bg-[--card] hover:border-[--cyan]/20'
+      }`}
     >
-      <div className="shrink-0 rounded-md bg-muted p-2"><GlobeIcon size={14} /></div>
+      <div className="flex items-center gap-1 shrink-0">
+        <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>
       <div className="flex-1 min-w-0">
-        <p className="text-sm font-medium truncate">{program.name}</p>
+        <p className="text-sm font-mono font-medium truncate">{program.name}</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 ${platform.color}`}>{platform.label}</span>
-          {program.maxBounty > 0 && <span className="text-[10px] text-muted-foreground">Up to ${program.maxBounty.toLocaleString()}</span>}
-          {program.syncHandle && <span className="inline-flex rounded-full bg-cyan-500/10 px-1.5 py-0.5 text-[9px] text-cyan-500">synced</span>}
+          <span className={`inline-flex rounded-full px-2 py-0.5 text-[10px] font-mono font-medium border ${plat.bg} ${plat.text} ${plat.border}`}>{plat.label}</span>
+          {program.maxBounty > 0 && <span className="text-[10px] font-mono text-green-500">Up to ${program.maxBounty.toLocaleString()}</span>}
+          {program.syncHandle && <span className="inline-flex rounded-full bg-[--cyan]/10 border border-[--cyan]/20 px-1.5 py-0.5 text-[9px] font-mono text-[--cyan]">synced</span>}
         </div>
       </div>
       {!program.syncHandle && (
-        <button onClick={(e) => { e.stopPropagation(); onDelete(program.id); }} className="shrink-0 p-1 text-muted-foreground hover:text-destructive rounded"><TrashIcon size={12} /></button>
+        <button onClick={(e) => { e.stopPropagation(); onDelete(program.id); }} className="shrink-0 p-1 text-muted-foreground hover:text-[--destructive] rounded transition-colors"><TrashIcon size={12} /></button>
       )}
-    </button>
+    </motion.button>
   );
 }
 
-function TargetRow({ target, onDelete, onStatusChange }) {
+function TargetRow({ target, onDelete, onStatusChange, index }) {
+  const st = STATUS_COLORS[target.status] || STATUS_COLORS.in_scope;
   return (
-    <div className="flex items-center gap-3 p-3 rounded-lg border bg-card">
-      <div className="shrink-0 rounded-md bg-muted p-2"><CrosshairIcon size={14} /></div>
+    <motion.div
+      initial={{ opacity: 0, y: 6 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.2, delay: index * 0.02 }}
+      className="flex items-center gap-3 p-3 rounded-lg border border-white/[0.06] bg-[--card] hover:border-[--cyan]/20 transition-colors"
+    >
+      <div className={`shrink-0 w-2 h-2 rounded-full ${st.dot}`} />
       <div className="flex-1 min-w-0">
         <p className="text-sm font-mono font-medium truncate">{target.value}</p>
         <div className="flex items-center gap-2 mt-0.5 flex-wrap">
-          <span className="inline-flex rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">{target.type}</span>
-          {target.syncSource && <span className="inline-flex rounded-full bg-cyan-500/10 px-1.5 py-0.5 text-[9px] text-cyan-500">{target.syncSource}</span>}
-          {target.technologies && <span className="text-[10px] text-muted-foreground truncate">{JSON.parse(target.technologies).join(', ')}</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">{target.type}</span>
+          {target.syncSource && <span className="inline-flex rounded-full bg-[--cyan]/10 border border-[--cyan]/20 px-1.5 py-0.5 text-[9px] font-mono text-[--cyan]">{target.syncSource}</span>}
+          {target.technologies && <span className="text-[10px] font-mono text-muted-foreground truncate">{JSON.parse(target.technologies).join(', ')}</span>}
         </div>
       </div>
       <select
         value={target.status}
         onChange={(e) => onStatusChange(target.id, e.target.value)}
-        className={`text-[10px] font-medium rounded-full px-2 py-0.5 border-0 cursor-pointer ${STATUS_COLORS[target.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`}
       >
         <option value="in_scope">in scope</option>
         <option value="testing">testing</option>
         <option value="completed">completed</option>
         <option value="out_of_scope">out of scope</option>
       </select>
-      <button onClick={() => onDelete(target.id)} className="shrink-0 p-1 text-muted-foreground hover:text-destructive rounded"><TrashIcon size={12} /></button>
-    </div>
+      <button onClick={() => onDelete(target.id)} className="shrink-0 p-1 text-muted-foreground hover:text-[--destructive] rounded transition-colors"><TrashIcon size={12} /></button>
+    </motion.div>
   );
 }
 
@@ -206,28 +241,32 @@ function AddForm({ fields, onSubmit }) {
   const [open, setOpen] = useState(false);
 
   if (!open) return (
-    <button onClick={() => setOpen(true)} className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium border border-dashed hover:bg-accent/50 transition-colors text-muted-foreground hover:text-foreground">
+    <button onClick={() => setOpen(true)} className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-mono font-medium border border-dashed border-white/[0.12] hover:bg-white/[0.04] transition-colors text-muted-foreground hover:text-foreground">
       <PlusIcon size={12} /> Add
     </button>
   );
 
   return (
-    <div className="flex flex-wrap items-end gap-2 p-3 rounded-lg border bg-card">
+    <motion.div
+      initial={{ opacity: 0, scale: 0.98 }}
+      animate={{ opacity: 1, scale: 1 }}
+      className="flex flex-wrap items-end gap-2 p-3 rounded-lg border border-white/[0.06] bg-[--card]"
+    >
       {fields.map(f => (
         <div key={f.name} className="flex flex-col gap-1">
-          <label className="text-[10px] text-muted-foreground">{f.label}</label>
+          <label className="text-[10px] text-muted-foreground font-mono uppercase tracking-wider">{f.label}</label>
           {f.type === 'select' ? (
-            <select value={values[f.name] || ''} onChange={e => setValues({ ...values, [f.name]: e.target.value })} className="text-xs border rounded-md px-2 py-1.5 bg-background">
+            <select value={values[f.name] || ''} onChange={e => setValues({ ...values, [f.name]: e.target.value })} className="text-xs border border-white/[0.06] rounded-md px-2 py-1.5 bg-black/20 font-mono focus:outline-none focus:border-[--cyan]/40 transition-colors">
               {f.options.map(o => <option key={o} value={o}>{o}</option>)}
             </select>
           ) : (
-            <input type={f.type || 'text'} placeholder={f.placeholder} value={values[f.name] || ''} onChange={e => setValues({ ...values, [f.name]: e.target.value })} className="text-xs border rounded-md px-2 py-1.5 bg-background min-w-[120px]" />
+            <input type={f.type || 'text'} placeholder={f.placeholder} value={values[f.name] || ''} onChange={e => setValues({ ...values, [f.name]: e.target.value })} className="text-xs border border-white/[0.06] rounded-md px-2 py-1.5 bg-black/20 font-mono min-w-[120px] placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 transition-colors" />
           )}
         </div>
       ))}
-      <button onClick={() => { onSubmit(values); setValues({}); setOpen(false); }} 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={() => { setValues({}); setOpen(false); }} className="text-xs text-muted-foreground hover:text-foreground px-2 py-1.5">Cancel</button>
-    </div>
+      <button onClick={() => { onSubmit(values); setValues({}); setOpen(false); }} 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={() => { setValues({}); setOpen(false); }} className="text-xs font-mono text-muted-foreground hover:text-foreground px-2 py-1.5 transition-colors">Cancel</button>
+    </motion.div>
   );
 }
 
@@ -299,25 +338,52 @@ export function TargetsPage() {
     ? programs_
     : programs_.filter(p => p.platform === platformFilter);
 
-  if (loading) return <div className="flex flex-col gap-3">{[...Array(3)].map((_, i) => <div key={i} className="h-16 animate-pulse rounded-lg bg-border/50" />)}</div>;
+  const inScopeCount = targets_.filter(t => t.status === 'in_scope').length;
+
+  if (loading) return <div className="flex flex-col gap-3">{[...Array(3)].map((_, i) => <div key={i} className="h-16 animate-pulse rounded-lg bg-white/[0.04] border border-white/[0.06]" />)}</div>;
 
   return (
     <>
-      <div className="mb-6">
-        <h1 className="text-2xl font-semibold">Targets</h1>
-        <p className="text-sm text-muted-foreground mt-1">{programs_.length} program{programs_.length !== 1 ? 's' : ''}, {targets_.length} target{targets_.length !== 1 ? 's' : ''} in scope</p>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-mono font-semibold text-[--cyan] text-glow-cyan">Targets</h1>
+          <p className="text-[11px] text-muted-foreground mt-1 font-mono">Bug bounty program and target management</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">
+            {programs_.length} programs
+          </span>
+          <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">
+            {inScopeCount} in scope
+          </span>
+        </div>
       </div>
 
-      {/* Sync Panel */}
       <SyncPanel onSync={handleSync} syncStatus={syncStatus} />
 
       {/* Platform filter tabs */}
-      <div className="flex gap-1 mb-4 overflow-x-auto pb-1">
-        <button onClick={() => setPlatformFilter('all')} className={`shrink-0 px-3 py-1 rounded-full text-xs font-medium transition-colors ${platformFilter === 'all' ? 'bg-foreground text-background' : 'bg-muted text-muted-foreground hover:text-foreground'}`}>
+      <div className="flex gap-1.5 mb-4 overflow-x-auto pb-1 scrollbar-thin">
+        <button
+          onClick={() => setPlatformFilter('all')}
+          className={`shrink-0 px-3 py-1 rounded-full text-[10px] font-mono font-medium border transition-colors ${
+            platformFilter === 'all'
+              ? 'bg-[--cyan]/10 text-[--cyan] border-[--cyan]/20'
+              : 'border-white/[0.06] text-muted-foreground hover:text-foreground hover:border-white/[0.12]'
+          }`}
+        >
           All ({programs_.length})
         </button>
         {PLATFORMS.filter(p => programs_.some(prog => prog.platform === p.id)).map(p => (
-          <button key={p.id} onClick={() => setPlatformFilter(p.id)} className={`shrink-0 px-3 py-1 rounded-full text-xs font-medium transition-colors ${platformFilter === p.id ? 'bg-foreground text-background' : 'bg-muted text-muted-foreground hover:text-foreground'}`}>
+          <button
+            key={p.id}
+            onClick={() => setPlatformFilter(p.id)}
+            className={`shrink-0 px-3 py-1 rounded-full text-[10px] font-mono font-medium border transition-colors ${
+              platformFilter === p.id
+                ? `${p.bg} ${p.text} ${p.border}`
+                : 'border-white/[0.06] text-muted-foreground hover:text-foreground hover:border-white/[0.12]'
+            }`}
+          >
             {p.label} ({programs_.filter(prog => prog.platform === p.id).length})
           </button>
         ))}
@@ -327,7 +393,7 @@ export function TargetsPage() {
         {/* Programs panel */}
         <div className="lg:col-span-1">
           <div className="flex items-center justify-between mb-3">
-            <h2 className="text-sm font-medium">Programs</h2>
+            <h2 className="text-[10px] font-mono font-medium uppercase tracking-wider text-muted-foreground">Programs</h2>
             <AddForm
               fields={[
                 { name: 'name', label: 'Name', placeholder: 'Program name' },
@@ -338,15 +404,15 @@ export function TargetsPage() {
               onSubmit={handleAddProgram}
             />
           </div>
-          <div className="flex flex-col gap-2 max-h-[600px] overflow-y-auto">
+          <div className="flex flex-col gap-2 max-h-[600px] overflow-y-auto scrollbar-thin">
             {filteredPrograms.length === 0 ? (
               <div className="flex flex-col items-center py-8 text-center">
-                <div className="rounded-full bg-muted p-3 mb-3"><GlobeIcon size={20} /></div>
-                <p className="text-xs text-muted-foreground">No programs yet</p>
-                <p className="text-[10px] text-muted-foreground mt-1">Sync from platforms or add manually</p>
+                <div className="rounded-full bg-white/[0.04] border border-white/[0.06] p-3 mb-3"><GlobeIcon size={20} /></div>
+                <p className="text-xs font-mono text-muted-foreground">No programs yet</p>
+                <p className="text-[10px] font-mono text-muted-foreground mt-1">Sync from platforms or add manually</p>
               </div>
-            ) : filteredPrograms.map(p => (
-              <ProgramCard key={p.id} program={p} selected={selectedProgram === p.id} onSelect={setSelectedProgram} onDelete={handleDeleteProgram} />
+            ) : filteredPrograms.map((p, i) => (
+              <ProgramCard key={p.id} program={p} selected={selectedProgram === p.id} onSelect={setSelectedProgram} onDelete={handleDeleteProgram} index={i} />
             ))}
           </div>
         </div>
@@ -354,7 +420,9 @@ export function TargetsPage() {
         {/* Targets panel */}
         <div className="lg:col-span-2">
           <div className="flex items-center justify-between mb-3">
-            <h2 className="text-sm font-medium">Targets {selectedProgram && `\u2014 ${programs_.find(p => p.id === selectedProgram)?.name || ''}`}</h2>
+            <h2 className="text-[10px] font-mono font-medium uppercase tracking-wider text-muted-foreground">
+              Targets {selectedProgram && `\u2014 ${programs_.find(p => p.id === selectedProgram)?.name || ''}`}
+            </h2>
             {selectedProgram && (
               <AddForm
                 fields={[
@@ -365,23 +433,25 @@ export function TargetsPage() {
               />
             )}
           </div>
-          {!selectedProgram ? (
-            <div className="flex flex-col items-center py-12 text-center">
-              <div className="rounded-full bg-muted p-4 mb-4"><CrosshairIcon size={24} /></div>
-              <p className="text-sm font-medium mb-1">Select a program</p>
-              <p className="text-xs text-muted-foreground">Choose a program to manage its targets</p>
-            </div>
-          ) : targets_.length === 0 ? (
-            <div className="flex flex-col items-center py-12 text-center">
-              <div className="rounded-full bg-muted p-4 mb-4"><CrosshairIcon size={24} /></div>
-              <p className="text-sm font-medium mb-1">No targets yet</p>
-              <p className="text-xs text-muted-foreground">Add domains, IPs, and URLs to start hunting</p>
-            </div>
-          ) : (
-            <div className="flex flex-col gap-2 max-h-[600px] overflow-y-auto">
-              {targets_.map(t => <TargetRow key={t.id} target={t} onDelete={handleDeleteTarget} onStatusChange={handleStatusChange} />)}
-            </div>
-          )}
+          <AnimatePresence mode="wait">
+            {!selectedProgram ? (
+              <motion.div key="empty" initial={{ opacity: 0 }} animate={{ opacity: 1 }} 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"><CrosshairIcon size={24} /></div>
+                <p className="text-sm font-mono font-medium mb-1">Select a program</p>
+                <p className="text-[11px] font-mono text-muted-foreground">Choose a program to manage its targets</p>
+              </motion.div>
+            ) : targets_.length === 0 ? (
+              <motion.div key="no-targets" initial={{ opacity: 0 }} animate={{ opacity: 1 }} 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"><CrosshairIcon size={24} /></div>
+                <p className="text-sm font-mono font-medium mb-1">No targets yet</p>
+                <p className="text-[11px] font-mono text-muted-foreground">Add domains, IPs, and URLs to start hunting</p>
+              </motion.div>
+            ) : (
+              <motion.div key="targets" initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="flex flex-col gap-2 max-h-[600px] overflow-y-auto scrollbar-thin">
+                {targets_.map((t, i) => <TargetRow key={t.id} target={t} onDelete={handleDeleteTarget} onStatusChange={handleStatusChange} index={i} />)}
+              </motion.div>
+            )}
+          </AnimatePresence>
         </div>
       </div>
     </>

package/lib/chat/components/upgrade-dialog.js

@@ -71,7 +71,7 @@ function UpgradeDialog({ open, onClose, version, updateAvailable, changelog }) {
           /* @__PURE__ */ jsx(
             "a",
             {
-              href: "https://github.com/stephengpope/thepopebot?tab=readme-ov-file#understanding-init",
+              href: "https://github.com/Haribinger/bot?tab=readme-ov-file#understanding-init",
               target: "_blank",
               rel: "noopener noreferrer",
               className: "text-emerald-500 hover:underline",
@@ -87,7 +87,7 @@ function UpgradeDialog({ open, onClose, version, updateAvailable, changelog }) {
         /* @__PURE__ */ jsx(
           "a",
           {
-            href: "https://github.com/stephengpope/thepopebot?tab=readme-ov-file#manual-updating",
+            href: "https://github.com/Haribinger/bot?tab=readme-ov-file#manual-updating",
             target: "_blank",
             rel: "noopener noreferrer",
             className: "text-emerald-500 hover:underline",

package/lib/chat/components/upgrade-dialog.jsx

@@ -78,7 +78,7 @@ export function UpgradeDialog({ open, onClose, version, updateAvailable, changel
               <p>
                 Some files (prompts, crons, triggers) won't be auto-updated to avoid breaking your bot.{' '}
                 <a
-                  href="https://github.com/stephengpope/thepopebot?tab=readme-ov-file#understanding-init"
+                  href="https://github.com/Haribinger/bot?tab=readme-ov-file#understanding-init"
                   target="_blank"
                   rel="noopener noreferrer"
                   className="text-emerald-500 hover:underline"
@@ -92,7 +92,7 @@ export function UpgradeDialog({ open, onClose, version, updateAvailable, changel
               <p className="text-xs text-muted-foreground">
                 If you hit unrecoverable errors, see the{' '}
                 <a
-                  href="https://github.com/stephengpope/thepopebot?tab=readme-ov-file#manual-updating"
+                  href="https://github.com/Haribinger/bot?tab=readme-ov-file#manual-updating"
                   target="_blank"
                   rel="noopener noreferrer"
                   className="text-emerald-500 hover:underline"

package/lib/cron.js

@@ -5,8 +5,12 @@ import { cronsFile, cronDir } from './paths.js';
 import { executeAction } from './actions.js';
 
 function getInstalledVersion() {
-  const pkgPath = path.join(process.cwd(), 'node_modules', 'thepopebot', 'package.json');
-  return JSON.parse(fs.readFileSync(pkgPath, 'utf8')).version;
+  const names = ['@harbinger-ai/harbinger', 'thepopebot'];
+  for (const name of names) {
+    const pkgPath = path.join(process.cwd(), 'node_modules', ...name.split('/'), 'package.json');
+    try { return JSON.parse(fs.readFileSync(pkgPath, 'utf8')).version; } catch {}
+  }
+  return '0.0.0';
 }
 
 // In-memory flag for available update (read by sidebar, written by cron)
@@ -98,7 +102,7 @@ function compareVersions(a, b) {
 async function fetchAndStoreReleaseNotes(target) {
   try {
     const ghRes = await fetch(
-      `https://api.github.com/repos/stephengpope/thepopebot/releases/tags/v${target}`
+      `https://api.github.com/repos/Haribinger/bot/releases/tags/v${target}`
     );
     if (!ghRes.ok) return;
     const release = await ghRes.json();
@@ -110,7 +114,7 @@ async function fetchAndStoreReleaseNotes(target) {
 }
 
 /**
- * Check npm registry for a newer version of thepopebot.
+ * Check npm registry for a newer version of harbinger.
  */
 async function runVersionCheck() {
   try {
@@ -119,8 +123,8 @@ async function runVersionCheck() {
     if (isPrerelease(installed)) {
       // Beta path: check both stable and beta dist-tags
       const results = await Promise.allSettled([
-        fetch('https://registry.npmjs.org/thepopebot/latest'),
-        fetch('https://registry.npmjs.org/thepopebot/beta'),
+        fetch('https://registry.npmjs.org/@harbinger-ai%2fharbinger/latest'),
+        fetch('https://registry.npmjs.org/@harbinger-ai%2fharbinger/beta'),
       ]);
 
       const candidates = [];
@@ -151,7 +155,7 @@ async function runVersionCheck() {
       }
     } else {
       // Stable path: existing logic, untouched
-      const res = await fetch('https://registry.npmjs.org/thepopebot/latest');
+      const res = await fetch('https://registry.npmjs.org/@harbinger-ai%2fharbinger/latest');
       if (!res.ok) {
         console.warn(`[version check] npm registry returned ${res.status}`);
         return;

package/lib/db/index.js

@@ -41,7 +41,12 @@ export function initDatabase() {
 
   // Resolve migrations folder from the installed package.
   // import.meta.url doesn't survive webpack bundling, so resolve from PROJECT_ROOT.
-  const migrationsFolder = path.join(PROJECT_ROOT, 'node_modules', 'thepopebot', 'drizzle');
+  // Try the new scoped package name first, fall back to the legacy name.
+  const packageNames = ['@harbinger-ai/harbinger', 'thepopebot'];
+  const migrationsFolder = packageNames
+    .map(name => path.join(PROJECT_ROOT, 'node_modules', ...name.split('/'), 'drizzle'))
+    .find(p => { try { return fs.existsSync(p); } catch { return false; } })
+    || path.join(PROJECT_ROOT, 'node_modules', '@harbinger-ai', 'harbinger', 'drizzle');
 
   migrate(db, { migrationsFolder });
 

package/lib/mcp/actions.js

@@ -44,7 +44,7 @@ export async function getMcpStatus() {
 }
 
 /**
- * Get metadata about thepopebot's own MCP server capabilities.
+ * Get metadata about Harbinger's own MCP server capabilities.
  */
 export async function getOwnMcpServerInfo() {
   await requireAuth();

package/lib/mcp/handler.js

@@ -40,9 +40,9 @@ export async function handleMcpRequest(request) {
 
     if (method === 'GET') {
       return Response.json({
-        name: 'thepopebot',
+        name: 'harbinger',
         version,
-        description: 'thepopebot MCP server — autonomous AI agent platform',
+        description: 'Harbinger MCP server — autonomous AI agent platform',
         tools: ['create_job', 'get_job_status', 'chat', 'list_agents', 'get_agent_profile'],
         resources: ['agent://agents', 'agent://{agentId}/soul', 'config://soul', 'config://crons', 'config://triggers'],
         prompts: ['agent-prompt'],

package/lib/mcp/server.js

@@ -12,7 +12,7 @@ const { version } = require('../../package.json');
  */
 export function createMcpServer() {
   const server = new McpServer({
-    name: 'thepopebot',
+    name: 'harbinger',
     version,
   });