@harbinger-ai/harbinger 0.1.4 → 0.1.5

package/lib/chat/actions.js

@@ -986,6 +986,169 @@ export async function createAgentJob(agentId, prompt) {
   }
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Agent-Program Assignment actions
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Get program assignments for an agent.
+ * Stored in settings table: type='agent_assignment', key=agentId.
+ */
+export async function getAgentAssignments(agentId) {
+  await requireAuth();
+  try {
+    const { getDb } = await import('../db/index.js');
+    const { settings } = await import('../db/schema.js');
+    const { eq, and } = await import('drizzle-orm');
+    const db = getDb();
+    const row = db.select().from(settings)
+      .where(and(eq(settings.type, 'agent_assignment'), eq(settings.key, agentId)))
+      .get();
+    if (!row) return { programs: [], targets: [] };
+    return JSON.parse(row.value);
+  } catch {
+    return { programs: [], targets: [] };
+  }
+}
+
+/**
+ * Get assignments for ALL agents at once.
+ */
+export async function getAllAgentAssignments() {
+  await requireAuth();
+  try {
+    const { getDb } = await import('../db/index.js');
+    const { settings } = await import('../db/schema.js');
+    const { eq } = await import('drizzle-orm');
+    const db = getDb();
+    const rows = db.select().from(settings)
+      .where(eq(settings.type, 'agent_assignment'))
+      .all();
+    const result = {};
+    for (const row of rows) {
+      try { result[row.key] = JSON.parse(row.value); } catch {}
+    }
+    return result;
+  } catch {
+    return {};
+  }
+}
+
+/**
+ * Assign programs to an agent.
+ */
+export async function assignProgramsToAgent(agentId, programIds) {
+  await requireAuth();
+  try {
+    const { getDb } = await import('../db/index.js');
+    const { settings } = await import('../db/schema.js');
+    const { eq, and } = await import('drizzle-orm');
+    const { randomUUID } = await import('crypto');
+    const db = getDb();
+
+    const existing = db.select().from(settings)
+      .where(and(eq(settings.type, 'agent_assignment'), eq(settings.key, agentId)))
+      .get();
+
+    const current = existing ? JSON.parse(existing.value) : { programs: [], targets: [] };
+    current.programs = [...new Set([...current.programs, ...programIds])];
+    const value = JSON.stringify(current);
+    const now = Date.now();
+
+    if (existing) {
+      db.update(settings).set({ value, updatedAt: now })
+        .where(and(eq(settings.type, 'agent_assignment'), eq(settings.key, agentId))).run();
+    } else {
+      db.insert(settings).values({
+        id: randomUUID(), type: 'agent_assignment', key: agentId,
+        value, createdAt: now, updatedAt: now,
+      }).run();
+    }
+    return { success: true, assignments: current };
+  } catch (err) {
+    return { error: err.message };
+  }
+}
+
+/**
+ * Remove a program from an agent's assignments.
+ */
+export async function unassignProgramFromAgent(agentId, programId) {
+  await requireAuth();
+  try {
+    const { getDb } = await import('../db/index.js');
+    const { settings } = await import('../db/schema.js');
+    const { eq, and } = await import('drizzle-orm');
+    const db = getDb();
+
+    const existing = db.select().from(settings)
+      .where(and(eq(settings.type, 'agent_assignment'), eq(settings.key, agentId)))
+      .get();
+    if (!existing) return { success: true };
+
+    const current = JSON.parse(existing.value);
+    current.programs = current.programs.filter(id => id !== programId);
+    db.update(settings).set({ value: JSON.stringify(current), updatedAt: Date.now() })
+      .where(and(eq(settings.type, 'agent_assignment'), eq(settings.key, agentId))).run();
+    return { success: true, assignments: current };
+  } catch (err) {
+    return { error: err.message };
+  }
+}
+
+/**
+ * Get programs with target counts for the assignment wizard.
+ * Returns slimmed-down program list with counts.
+ */
+export async function getProgramsForAssignment() {
+  await requireAuth();
+  try {
+    const { getDb } = await import('../db/index.js');
+    const db = getDb();
+    const rows = db.prepare(`
+      SELECT p.id, p.name, p.platform, p.status, p.url,
+        p.min_bounty, p.max_bounty,
+        COUNT(t.id) as target_count,
+        SUM(CASE WHEN t.status = 'in_scope' THEN 1 ELSE 0 END) as in_scope_count
+      FROM programs p
+      LEFT JOIN targets t ON t.program_id = p.id
+      GROUP BY p.id
+      ORDER BY target_count DESC, p.name ASC
+    `).all();
+    return rows.map(r => ({
+      id: r.id, name: r.name, platform: r.platform, status: r.status, url: r.url,
+      minBounty: r.min_bounty, maxBounty: r.max_bounty,
+      targetCount: r.target_count, inScopeCount: r.in_scope_count,
+    }));
+  } catch (err) {
+    return [];
+  }
+}
+
+/**
+ * Get targets for a list of program IDs (for agent deep dive).
+ */
+export async function getTargetsForPrograms(programIds) {
+  await requireAuth();
+  if (!Array.isArray(programIds) || programIds.length === 0) return [];
+  try {
+    const { getDb } = await import('../db/index.js');
+    const db = getDb();
+    const placeholders = programIds.map(() => '?').join(',');
+    const rows = db.prepare(`
+      SELECT t.*, p.name as program_name, p.platform as program_platform
+      FROM targets t
+      JOIN programs p ON p.id = t.program_id
+      WHERE t.program_id IN (${placeholders})
+      AND t.status = 'in_scope'
+      ORDER BY p.name, t.type, t.value
+    `).all(...programIds);
+    return rows;
+  } catch {
+    return [];
+  }
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Swarm actions
 // ─────────────────────────────────────────────────────────────────────────────

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

@@ -2,8 +2,22 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { UsersIcon, RefreshIcon, SpinnerIcon, ChevronDownIcon, PlusIcon, PencilIcon, CheckIcon, XIcon, SearchIcon, CpuIcon, PackageIcon, DatabaseIcon, FolderIcon, ClockIcon, SlidersIcon, TagIcon, HashIcon, PlayIcon } from "./icons.js";
-import { getAgentProfilesWithStatus, getAgentProfile, updateAgentFile, createAgent, createAgentJob, getAvailableMcpTools, getLlmProviders } from "../actions.js";
+import { UsersIcon, RefreshIcon, SpinnerIcon, ChevronDownIcon, PlusIcon, PencilIcon, CheckIcon, XIcon, SearchIcon, CpuIcon, PackageIcon, DatabaseIcon, FolderIcon, ClockIcon, SlidersIcon, TagIcon, HashIcon, PlayIcon, CrosshairIcon, ShieldIcon, GlobeIcon, FilterIcon } from "./icons.js";
+import {
+  getAgentProfilesWithStatus,
+  getAgentProfile,
+  updateAgentFile,
+  createAgent,
+  createAgentJob,
+  getAvailableMcpTools,
+  getLlmProviders,
+  getAgentAssignments,
+  getAllAgentAssignments,
+  assignProgramsToAgent,
+  unassignProgramFromAgent,
+  getProgramsForAssignment,
+  getTargetsForPrograms
+} from "../actions.js";
 const PROVIDER_MODELS = {
   anthropic: ["claude-sonnet-4-20250514", "claude-opus-4-20250514", "claude-haiku-4-5-20251001"],
   openai: ["gpt-4o", "gpt-4o-mini", "gpt-4-turbo", "o1", "o1-mini", "o3-mini"],
@@ -86,10 +100,11 @@ Describe the agent's primary objective here.
 - Step 2
 - Step 3`
 };
-function AgentCard({ agent, onViewProfile, onAssignTask, index }) {
+function AgentCard({ agent, onViewProfile, onAssignTask, onAssignPrograms, assignments, index }) {
   const codename = agent.codename || agent.name || agent.id;
   const initial = codename.charAt(0).toUpperCase();
   const isActive = agent.status === "active";
+  const programCount = assignments?.programs?.length || 0;
   return /* @__PURE__ */ jsx(
     motion.div,
     {
@@ -100,7 +115,7 @@ function AgentCard({ agent, onViewProfile, onAssignTask, index }) {
       children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 p-4", children: [
         /* @__PURE__ */ jsx("div", { className: "shrink-0 w-12 h-12 rounded-lg bg-[--cyan]/10 border border-[--cyan]/20 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-xl font-mono font-bold text-[--cyan]", children: initial }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
             /* @__PURE__ */ jsxs("p", { className: "text-sm font-mono font-semibold text-foreground", children: [
               "@",
               codename.toUpperCase()
@@ -111,25 +126,43 @@ function AgentCard({ agent, onViewProfile, onAssignTask, index }) {
               " job",
               agent.activeJobs !== 1 ? "s" : "",
               " running"
+            ] }),
+            programCount > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-orange-500/10 text-orange-400 border border-orange-500/20 px-2 py-0.5 text-[9px] font-mono font-medium", children: [
+              /* @__PURE__ */ jsx(CrosshairIcon, { size: 8 }),
+              " ",
+              programCount,
+              " program",
+              programCount !== 1 ? "s" : ""
             ] })
           ] }),
           agent.role && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5 font-mono truncate", children: agent.role }),
           agent.specialization && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground/70 mt-0.5 font-mono truncate", children: agent.specialization })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [
           /* @__PURE__ */ jsx(
             "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",
+              className: "inline-flex items-center gap-1 rounded-md px-2 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",
               children: "View"
             }
           ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => onAssignPrograms(agent),
+              className: "inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-mono font-medium border border-orange-500/20 text-orange-400 hover:bg-orange-500/10 transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(CrosshairIcon, { size: 10 }),
+                " Programs"
+              ]
+            }
+          ),
           /* @__PURE__ */ jsx(
             "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",
+              className: "inline-flex items-center gap-1 rounded-md px-2 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",
               children: "Assign Task"
             }
           )
@@ -345,6 +378,350 @@ function AssignTaskDialog({ agent, onClose }) {
     }
   );
 }
+function ProgramAssignmentWizard({ agent, currentAssignments, onClose, onAssigned }) {
+  const [programs, setPrograms] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState("");
+  const [selected, setSelected] = useState(new Set(currentAssignments?.programs || []));
+  const [saving, setSaving] = useState(false);
+  const [step, setStep] = useState("select");
+  const [deepDiveProgram, setDeepDiveProgram] = useState(null);
+  const [deepDiveTargets, setDeepDiveTargets] = useState([]);
+  const [loadingTargets, setLoadingTargets] = useState(false);
+  const [filter, setFilter] = useState("all");
+  useEffect(() => {
+    getProgramsForAssignment().then((p) => {
+      setPrograms(p);
+      setLoading(false);
+    });
+  }, []);
+  const codename = agent.codename || agent.name || agent.id;
+  function toggleProgram(id) {
+    const next = new Set(selected);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    setSelected(next);
+  }
+  async function handleSave() {
+    setSaving(true);
+    const ids = [...selected];
+    await assignProgramsToAgent(agent.id, ids);
+    setSaving(false);
+    onAssigned();
+    onClose();
+  }
+  async function handleDeepDive(program) {
+    setDeepDiveProgram(program);
+    setStep("deepdive");
+    setLoadingTargets(true);
+    const targets = await getTargetsForPrograms([program.id]);
+    setDeepDiveTargets(targets);
+    setLoadingTargets(false);
+  }
+  async function handleRemoveProgram(programId) {
+    await unassignProgramFromAgent(agent.id, programId);
+    const next = new Set(selected);
+    next.delete(programId);
+    setSelected(next);
+    onAssigned();
+  }
+  const filtered = programs.filter((p) => {
+    if (search) {
+      const q = search.toLowerCase();
+      if (!p.name.toLowerCase().includes(q) && !p.platform.toLowerCase().includes(q)) return false;
+    }
+    if (filter === "with-targets" && p.targetCount === 0) return false;
+    if (filter === "bounty" && (!p.maxBounty || p.maxBounty === 0)) return false;
+    return true;
+  });
+  const sorted = [...filtered].sort((a, b) => {
+    const aS = selected.has(a.id) ? 1 : 0;
+    const bS = selected.has(b.id) ? 1 : 0;
+    if (bS !== aS) return bS - aS;
+    return b.targetCount - a.targetCount;
+  });
+  const selectedPrograms = programs.filter((p) => selected.has(p.id));
+  const totalTargets = selectedPrograms.reduce((sum, p) => sum + p.targetCount, 0);
+  return /* @__PURE__ */ jsxs(
+    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",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/60", onClick: onClose }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-2xl max-h-[85vh] rounded-lg border border-orange-500/20 bg-[--card] shadow-2xl flex flex-col overflow-hidden", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b border-white/[0.06] shrink-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#ff5f57]" }),
+                /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#febc2e]" }),
+                /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#28c840]" })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-orange-400 uppercase tracking-wider ml-1", children: step === "deepdive" ? `Deep Dive \u2014 ${deepDiveProgram?.name}` : step === "review" ? `Review \u2014 @${codename.toUpperCase()}` : `Assign Programs \u2014 @${codename.toUpperCase()}` })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              step !== "select" && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setStep("select"),
+                  className: "text-[10px] font-mono text-muted-foreground hover:text-foreground transition-colors",
+                  children: "\u2190 Back"
+                }
+              ),
+              /* @__PURE__ */ jsx("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx(XIcon, { size: 14 }) })
+            ] })
+          ] }),
+          step === "select" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-2.5 border-b border-white/[0.06] bg-black/20 shrink-0", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-mono text-muted-foreground", children: [
+                selected.size,
+                " program",
+                selected.size !== 1 ? "s" : "",
+                " selected"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-mono text-orange-400", children: [
+                totalTargets,
+                " targets"
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: ["all", "with-targets", "bounty"].map((f) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setFilter(f),
+                  className: `px-2 py-0.5 text-[9px] font-mono rounded-full border transition-colors ${filter === f ? "bg-orange-500/10 text-orange-400 border-orange-500/20" : "border-white/[0.06] text-muted-foreground hover:text-foreground"}`,
+                  children: f === "all" ? "All" : f === "with-targets" ? "Has Targets" : "Bounty"
+                },
+                f
+              )) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "px-4 pt-3 pb-2 shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsx(SearchIcon, { size: 14 }) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  placeholder: "Search programs...",
+                  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-orange-500/40 focus:ring-1 focus:ring-orange-500/20 transition-colors",
+                  autoFocus: true
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-4 py-2 min-h-0", children: loading ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-14 animate-shimmer rounded-lg border border-white/[0.06]" }, i)) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+              sorted.map((p) => {
+                const isSelected = selected.has(p.id);
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: `flex items-center gap-3 p-2.5 rounded-lg border cursor-pointer transition-all ${isSelected ? "border-orange-500/30 bg-orange-500/5" : "border-white/[0.06] hover:border-white/[0.12]"}`,
+                    onClick: () => toggleProgram(p.id),
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: `w-5 h-5 rounded border flex items-center justify-center shrink-0 transition-colors ${isSelected ? "bg-orange-500 border-orange-500" : "border-white/[0.15]"}`, children: isSelected && /* @__PURE__ */ jsx(CheckIcon, { size: 12, className: "text-white" }) }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsx("p", { className: "text-xs font-mono font-medium truncate", children: p.name }),
+                          /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-white/[0.04] px-1.5 py-0 text-[9px] font-mono text-muted-foreground border border-white/[0.06] shrink-0", children: p.platform })
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mt-0.5", children: [
+                          /* @__PURE__ */ jsxs("span", { className: "text-[9px] font-mono text-muted-foreground", children: [
+                            p.targetCount,
+                            " targets"
+                          ] }),
+                          p.inScopeCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[9px] font-mono text-green-500", children: [
+                            p.inScopeCount,
+                            " in scope"
+                          ] }),
+                          p.maxBounty > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[9px] font-mono text-yellow-500", children: [
+                            "$",
+                            p.minBounty || 0,
+                            "\u2013$",
+                            p.maxBounty
+                          ] })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handleDeepDive(p);
+                          },
+                          className: "shrink-0 inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-mono text-muted-foreground hover:text-orange-400 border border-white/[0.06] hover:border-orange-500/20 transition-colors",
+                          children: [
+                            /* @__PURE__ */ jsx(SearchIcon, { size: 10 }),
+                            " Deep Dive"
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  p.id
+                );
+              }),
+              sorted.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-center py-8", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-mono text-muted-foreground", children: "No programs found" }) })
+            ] }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-white/[0.06] shrink-0 bg-black/20", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setStep("review"),
+                  disabled: selected.size === 0,
+                  className: "text-[10px] font-mono text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50",
+                  children: "Review Selection \u2192"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "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",
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: handleSave,
+                    disabled: saving || selected.size === 0,
+                    className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium bg-orange-500/10 text-orange-400 border border-orange-500/20 hover:bg-orange-500 hover:text-white transition-colors disabled:opacity-50",
+                    children: [
+                      saving ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(CheckIcon, { size: 12 }),
+                      "Assign ",
+                      selected.size,
+                      " Program",
+                      selected.size !== 1 ? "s" : ""
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          step === "review" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-4 min-h-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 mb-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center p-3 rounded-lg border border-orange-500/20 bg-[--card]", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-xl font-semibold text-orange-400 font-mono", children: selected.size }),
+                  /* @__PURE__ */ jsx("span", { className: "font-mono text-[9px] text-muted-foreground uppercase tracking-wider mt-0.5", children: "Programs" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center p-3 rounded-lg border border-orange-500/20 bg-[--card]", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-xl font-semibold text-orange-400 font-mono", children: totalTargets }),
+                  /* @__PURE__ */ jsx("span", { className: "font-mono text-[9px] text-muted-foreground uppercase tracking-wider mt-0.5", children: "Total Targets" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-orange-400 uppercase tracking-wider", children: "Assigned Programs" }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 mt-2", children: selectedPrograms.map((p) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3 rounded-lg border border-orange-500/10 bg-orange-500/5", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium", children: p.name }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mt-0.5", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-muted-foreground", children: p.platform }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-mono text-green-500", children: [
+                      p.targetCount,
+                      " targets"
+                    ] }),
+                    p.maxBounty > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-mono text-yellow-500", children: [
+                      "$",
+                      p.minBounty || 0,
+                      "\u2013$",
+                      p.maxBounty
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => handleDeepDive(p),
+                    className: "shrink-0 text-[10px] font-mono text-muted-foreground hover:text-orange-400 transition-colors",
+                    children: "Deep Dive"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => handleRemoveProgram(p.id),
+                    className: "shrink-0 text-muted-foreground hover:text-[--destructive] transition-colors",
+                    children: /* @__PURE__ */ jsx(XIcon, { size: 12 })
+                  }
+                )
+              ] }, p.id)) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end px-4 py-3 border-t border-white/[0.06] shrink-0", children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleSave,
+                disabled: saving,
+                className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium bg-orange-500/10 text-orange-400 border border-orange-500/20 hover:bg-orange-500 hover:text-white transition-colors disabled:opacity-50",
+                children: [
+                  saving ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(CheckIcon, { size: 12 }),
+                  " Save Assignments"
+                ]
+              }
+            ) })
+          ] }),
+          step === "deepdive" && deepDiveProgram && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-white/[0.06] bg-black/20 shrink-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium", children: deepDiveProgram.name }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mt-0.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-muted-foreground", children: deepDiveProgram.platform }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-mono text-green-500", children: [
+                    deepDiveProgram.targetCount,
+                    " targets (",
+                    deepDiveProgram.inScopeCount,
+                    " in scope)"
+                  ] }),
+                  deepDiveProgram.maxBounty > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-mono text-yellow-500", children: [
+                    "$",
+                    deepDiveProgram.minBounty || 0,
+                    "\u2013$",
+                    deepDiveProgram.maxBounty
+                  ] }),
+                  deepDiveProgram.url && /* @__PURE__ */ jsx("a", { href: deepDiveProgram.url, target: "_blank", rel: "noopener", className: "text-[10px] font-mono text-[--cyan] hover:underline", children: "View on Platform \u2192" })
+                ] })
+              ] }),
+              !selected.has(deepDiveProgram.id) ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    toggleProgram(deepDiveProgram.id);
+                  },
+                  className: "inline-flex items-center gap-1 rounded-md px-3 py-1.5 text-xs font-mono font-medium bg-orange-500/10 text-orange-400 border border-orange-500/20 hover:bg-orange-500 hover:text-white transition-colors",
+                  children: [
+                    /* @__PURE__ */ jsx(PlusIcon, { size: 12 }),
+                    " Assign to Agent"
+                  ]
+                }
+              ) : /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-orange-500/10 text-orange-400 border border-orange-500/20 px-2 py-0.5 text-[10px] font-mono", children: [
+                /* @__PURE__ */ jsx(CheckIcon, { size: 10 }),
+                " Assigned"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-4 py-3 min-h-0", children: loadingTargets ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-10 animate-shimmer rounded-lg border border-white/[0.06]" }, i)) }) : deepDiveTargets.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-8", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-mono text-muted-foreground", children: "No in-scope targets found for this program" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              (() => {
+                const types = {};
+                deepDiveTargets.forEach((t) => {
+                  types[t.type] = (types[t.type] || 0) + 1;
+                });
+                return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 mb-3", children: Object.entries(types).sort((a, b) => b[1] - a[1]).map(([type, count]) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center rounded-full bg-white/[0.04] px-2 py-0.5 text-[9px] font-mono border border-white/[0.06]", children: [
+                  type,
+                  " ",
+                  /* @__PURE__ */ jsx("span", { className: "text-[--cyan] ml-1", children: count })
+                ] }, type)) });
+              })(),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: deepDiveTargets.map((t, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2 rounded-md border border-white/[0.04] hover:border-white/[0.08] transition-colors", children: [
+                /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-1.5 py-0 text-[8px] font-mono border shrink-0 ${t.type === "domain" ? "bg-blue-500/10 text-blue-400 border-blue-500/20" : t.type === "wildcard" ? "bg-purple-500/10 text-purple-400 border-purple-500/20" : t.type === "url" ? "bg-green-500/10 text-green-400 border-green-500/20" : t.type === "ip" || t.type === "cidr" ? "bg-orange-500/10 text-orange-400 border-orange-500/20" : "bg-white/[0.04] text-muted-foreground border-white/[0.06]"}`, children: t.type }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-foreground/90 flex-1 truncate", children: t.value }),
+                t.notes && /* @__PURE__ */ jsx("span", { className: "text-[9px] font-mono text-muted-foreground/60 shrink-0 truncate max-w-[120px]", children: t.notes })
+              ] }, t.id || i)) })
+            ] }) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
 function TabBtn({ active, onClick, icon: Icon, label }) {
   return /* @__PURE__ */ jsxs(
     "button",
@@ -798,17 +1175,30 @@ function AgentsPage() {
   const [refreshing, setRefreshing] = useState(false);
   const [viewingProfile, setViewingProfile] = useState(null);
   const [assigningTask, setAssigningTask] = useState(null);
+  const [assigningPrograms, setAssigningPrograms] = useState(null);
   const [showCreate, setShowCreate] = useState(false);
   const [search, setSearch] = useState("");
+  const [allAssignments, setAllAssignments] = useState({});
   async function load() {
     try {
-      const a = await getAgentProfilesWithStatus();
+      const [a, assignments] = await Promise.all([
+        getAgentProfilesWithStatus(),
+        getAllAgentAssignments()
+      ]);
       setAgents(a);
+      setAllAssignments(assignments || {});
     } catch {
     }
     setLoading(false);
     setRefreshing(false);
   }
+  async function refreshAssignments() {
+    try {
+      const assignments = await getAllAgentAssignments();
+      setAllAssignments(assignments || {});
+    } catch {
+    }
+  }
   useEffect(() => {
     load();
   }, []);
@@ -908,9 +1298,29 @@ function AgentsPage() {
     ] }) : filtered.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-12 text-center", children: [
       /* @__PURE__ */ jsx("div", { className: "rounded-full bg-white/[0.04] border border-white/[0.06] p-4 mb-4", children: /* @__PURE__ */ jsx(SearchIcon, { size: 24 }) }),
       /* @__PURE__ */ jsx("p", { className: "text-sm font-mono text-muted-foreground", children: "No agents match your search." })
-    ] }) : filtered.map((agent, i) => /* @__PURE__ */ jsx(AgentCard, { agent, onViewProfile: setViewingProfile, onAssignTask: setAssigningTask, index: i }, agent.id)) }),
+    ] }) : filtered.map((agent, i) => /* @__PURE__ */ jsx(
+      AgentCard,
+      {
+        agent,
+        onViewProfile: setViewingProfile,
+        onAssignTask: setAssigningTask,
+        onAssignPrograms: setAssigningPrograms,
+        assignments: allAssignments[agent.id],
+        index: i
+      },
+      agent.id
+    )) }),
     /* @__PURE__ */ jsx(AnimatePresence, { children: viewingProfile && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(AgentProfilePanel, { agentId: viewingProfile, onClose: () => setViewingProfile(null) }) }) }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: assigningTask && /* @__PURE__ */ jsx(AssignTaskDialog, { agent: assigningTask, onClose: () => setAssigningTask(null) }) })
+    /* @__PURE__ */ jsx(AnimatePresence, { children: assigningTask && /* @__PURE__ */ jsx(AssignTaskDialog, { agent: assigningTask, onClose: () => setAssigningTask(null) }) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: assigningPrograms && /* @__PURE__ */ jsx(
+      ProgramAssignmentWizard,
+      {
+        agent: assigningPrograms,
+        currentAssignments: allAssignments[assigningPrograms.id],
+        onClose: () => setAssigningPrograms(null),
+        onAssigned: refreshAssignments
+      }
+    ) })
   ] });
 }
 export {

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

@@ -2,8 +2,13 @@
 
 import { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { UsersIcon, RefreshIcon, SpinnerIcon, ChevronDownIcon, PlusIcon, PencilIcon, CheckIcon, XIcon, SearchIcon, CpuIcon, PackageIcon, DatabaseIcon, FolderIcon, ClockIcon, SlidersIcon, TagIcon, HashIcon, PlayIcon } from './icons.js';
-import { getAgentProfilesWithStatus, getAgentProfile, updateAgentFile, createAgent, createAgentJob, getAvailableMcpTools, getLlmProviders } from '../actions.js';
+import { UsersIcon, RefreshIcon, SpinnerIcon, ChevronDownIcon, PlusIcon, PencilIcon, CheckIcon, XIcon, SearchIcon, CpuIcon, PackageIcon, DatabaseIcon, FolderIcon, ClockIcon, SlidersIcon, TagIcon, HashIcon, PlayIcon, CrosshairIcon, ShieldIcon, GlobeIcon, FilterIcon } from './icons.js';
+import {
+  getAgentProfilesWithStatus, getAgentProfile, updateAgentFile, createAgent, createAgentJob,
+  getAvailableMcpTools, getLlmProviders,
+  getAgentAssignments, getAllAgentAssignments, assignProgramsToAgent,
+  unassignProgramFromAgent, getProgramsForAssignment, getTargetsForPrograms,
+} from '../actions.js';
 
 const PROVIDER_MODELS = {
   anthropic: ['claude-sonnet-4-20250514', 'claude-opus-4-20250514', 'claude-haiku-4-5-20251001'],
@@ -24,10 +29,11 @@ const SOUL_TEMPLATES = {
 
 // ─── Agent Card ──────────────────────────────────────────────────────────────
 
-function AgentCard({ agent, onViewProfile, onAssignTask, index }) {
+function AgentCard({ agent, onViewProfile, onAssignTask, onAssignPrograms, assignments, index }) {
   const codename = agent.codename || agent.name || agent.id;
   const initial = codename.charAt(0).toUpperCase();
   const isActive = agent.status === 'active';
+  const programCount = assignments?.programs?.length || 0;
 
   return (
     <motion.div
@@ -43,7 +49,7 @@ function AgentCard({ agent, onViewProfile, onAssignTask, index }) {
           <span className="text-xl font-mono font-bold text-[--cyan]">{initial}</span>
         </div>
         <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 flex-wrap">
             <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 && (
@@ -51,17 +57,26 @@ function AgentCard({ agent, onViewProfile, onAssignTask, index }) {
                 {agent.activeJobs} job{agent.activeJobs !== 1 ? 's' : ''} running
               </span>
             )}
+            {programCount > 0 && (
+              <span className="inline-flex items-center gap-1 rounded-full bg-orange-500/10 text-orange-400 border border-orange-500/20 px-2 py-0.5 text-[9px] font-mono font-medium">
+                <CrosshairIcon size={8} /> {programCount} program{programCount !== 1 ? 's' : ''}
+              </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>
-        <div className="flex items-center gap-2 shrink-0">
+        <div className="flex items-center gap-1.5 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">
+            className="inline-flex items-center gap-1 rounded-md px-2 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={() => onAssignPrograms(agent)}
+            className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-mono font-medium border border-orange-500/20 text-orange-400 hover:bg-orange-500/10 transition-colors">
+            <CrosshairIcon size={10} /> Programs
+          </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">
+            className="inline-flex items-center gap-1 rounded-md px-2 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>
@@ -242,6 +257,339 @@ function AssignTaskDialog({ agent, onClose }) {
   );
 }
 
+// ─── Program Assignment Wizard ───────────────────────────────────────────────
+
+function ProgramAssignmentWizard({ agent, currentAssignments, onClose, onAssigned }) {
+  const [programs, setPrograms] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState('');
+  const [selected, setSelected] = useState(new Set(currentAssignments?.programs || []));
+  const [saving, setSaving] = useState(false);
+  const [step, setStep] = useState('select'); // 'select' | 'review' | 'deepdive'
+  const [deepDiveProgram, setDeepDiveProgram] = useState(null);
+  const [deepDiveTargets, setDeepDiveTargets] = useState([]);
+  const [loadingTargets, setLoadingTargets] = useState(false);
+  const [filter, setFilter] = useState('all'); // 'all', 'with-targets', 'bounty'
+
+  useEffect(() => {
+    getProgramsForAssignment().then(p => { setPrograms(p); setLoading(false); });
+  }, []);
+
+  const codename = agent.codename || agent.name || agent.id;
+
+  function toggleProgram(id) {
+    const next = new Set(selected);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    setSelected(next);
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    const ids = [...selected];
+    await assignProgramsToAgent(agent.id, ids);
+    setSaving(false);
+    onAssigned();
+    onClose();
+  }
+
+  async function handleDeepDive(program) {
+    setDeepDiveProgram(program);
+    setStep('deepdive');
+    setLoadingTargets(true);
+    const targets = await getTargetsForPrograms([program.id]);
+    setDeepDiveTargets(targets);
+    setLoadingTargets(false);
+  }
+
+  async function handleRemoveProgram(programId) {
+    await unassignProgramFromAgent(agent.id, programId);
+    const next = new Set(selected);
+    next.delete(programId);
+    setSelected(next);
+    onAssigned();
+  }
+
+  // Filter programs
+  const filtered = programs.filter(p => {
+    if (search) {
+      const q = search.toLowerCase();
+      if (!p.name.toLowerCase().includes(q) && !p.platform.toLowerCase().includes(q)) return false;
+    }
+    if (filter === 'with-targets' && p.targetCount === 0) return false;
+    if (filter === 'bounty' && (!p.maxBounty || p.maxBounty === 0)) return false;
+    return true;
+  });
+
+  // Sort: selected first, then by target count
+  const sorted = [...filtered].sort((a, b) => {
+    const aS = selected.has(a.id) ? 1 : 0;
+    const bS = selected.has(b.id) ? 1 : 0;
+    if (bS !== aS) return bS - aS;
+    return b.targetCount - a.targetCount;
+  });
+
+  const selectedPrograms = programs.filter(p => selected.has(p.id));
+  const totalTargets = selectedPrograms.reduce((sum, p) => sum + p.targetCount, 0);
+
+  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-2xl max-h-[85vh] rounded-lg border border-orange-500/20 bg-[--card] shadow-2xl flex flex-col overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-white/[0.06] shrink-0">
+          <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-orange-400 uppercase tracking-wider ml-1">
+              {step === 'deepdive'
+                ? `Deep Dive — ${deepDiveProgram?.name}`
+                : step === 'review'
+                  ? `Review — @${codename.toUpperCase()}`
+                  : `Assign Programs — @${codename.toUpperCase()}`}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            {step !== 'select' && (
+              <button onClick={() => setStep('select')}
+                className="text-[10px] font-mono text-muted-foreground hover:text-foreground transition-colors">
+                ← Back
+              </button>
+            )}
+            <button onClick={onClose} className="text-muted-foreground hover:text-foreground"><XIcon size={14} /></button>
+          </div>
+        </div>
+
+        {/* Step: Select programs */}
+        {step === 'select' && (
+          <>
+            {/* Selection summary bar */}
+            <div className="flex items-center gap-3 px-4 py-2.5 border-b border-white/[0.06] bg-black/20 shrink-0">
+              <span className="text-[10px] font-mono text-muted-foreground">
+                {selected.size} program{selected.size !== 1 ? 's' : ''} selected
+              </span>
+              <span className="text-[10px] font-mono text-orange-400">{totalTargets} targets</span>
+              <div className="flex-1" />
+              {/* Filters */}
+              <div className="flex items-center gap-1">
+                {['all', 'with-targets', 'bounty'].map(f => (
+                  <button key={f} onClick={() => setFilter(f)}
+                    className={`px-2 py-0.5 text-[9px] font-mono rounded-full border transition-colors ${
+                      filter === f
+                        ? 'bg-orange-500/10 text-orange-400 border-orange-500/20'
+                        : 'border-white/[0.06] text-muted-foreground hover:text-foreground'
+                    }`}>
+                    {f === 'all' ? 'All' : f === 'with-targets' ? 'Has Targets' : 'Bounty'}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Search */}
+            <div className="px-4 pt-3 pb-2 shrink-0">
+              <div className="relative">
+                <div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"><SearchIcon size={14} /></div>
+                <input placeholder="Search programs..." 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-orange-500/40 focus:ring-1 focus:ring-orange-500/20 transition-colors" autoFocus />
+              </div>
+            </div>
+
+            {/* Program list */}
+            <div className="flex-1 overflow-y-auto px-4 py-2 min-h-0">
+              {loading ? (
+                <div className="flex flex-col gap-2">
+                  {[...Array(5)].map((_, i) => <div key={i} className="h-14 animate-shimmer rounded-lg border border-white/[0.06]" />)}
+                </div>
+              ) : (
+                <div className="flex flex-col gap-1.5">
+                  {sorted.map(p => {
+                    const isSelected = selected.has(p.id);
+                    return (
+                      <div key={p.id}
+                        className={`flex items-center gap-3 p-2.5 rounded-lg border cursor-pointer transition-all ${
+                          isSelected ? 'border-orange-500/30 bg-orange-500/5' : 'border-white/[0.06] hover:border-white/[0.12]'
+                        }`}
+                        onClick={() => toggleProgram(p.id)}
+                      >
+                        <div className={`w-5 h-5 rounded border flex items-center justify-center shrink-0 transition-colors ${
+                          isSelected ? 'bg-orange-500 border-orange-500' : 'border-white/[0.15]'
+                        }`}>
+                          {isSelected && <CheckIcon size={12} className="text-white" />}
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2">
+                            <p className="text-xs font-mono font-medium truncate">{p.name}</p>
+                            <span className="inline-flex items-center rounded-full bg-white/[0.04] px-1.5 py-0 text-[9px] font-mono text-muted-foreground border border-white/[0.06] shrink-0">
+                              {p.platform}
+                            </span>
+                          </div>
+                          <div className="flex items-center gap-3 mt-0.5">
+                            <span className="text-[9px] font-mono text-muted-foreground">{p.targetCount} targets</span>
+                            {p.inScopeCount > 0 && <span className="text-[9px] font-mono text-green-500">{p.inScopeCount} in scope</span>}
+                            {p.maxBounty > 0 && <span className="text-[9px] font-mono text-yellow-500">${p.minBounty || 0}–${p.maxBounty}</span>}
+                          </div>
+                        </div>
+                        <button
+                          onClick={(e) => { e.stopPropagation(); handleDeepDive(p); }}
+                          className="shrink-0 inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-mono text-muted-foreground hover:text-orange-400 border border-white/[0.06] hover:border-orange-500/20 transition-colors"
+                        >
+                          <SearchIcon size={10} /> Deep Dive
+                        </button>
+                      </div>
+                    );
+                  })}
+                  {sorted.length === 0 && (
+                    <div className="text-center py-8">
+                      <p className="text-sm font-mono text-muted-foreground">No programs found</p>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* Footer */}
+            <div className="flex items-center justify-between px-4 py-3 border-t border-white/[0.06] shrink-0 bg-black/20">
+              <button onClick={() => setStep('review')} disabled={selected.size === 0}
+                className="text-[10px] font-mono text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50">
+                Review Selection →
+              </button>
+              <div className="flex items-center gap-2">
+                <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={handleSave} disabled={saving || selected.size === 0}
+                  className="inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium bg-orange-500/10 text-orange-400 border border-orange-500/20 hover:bg-orange-500 hover:text-white transition-colors disabled:opacity-50">
+                  {saving ? <SpinnerIcon size={12} /> : <CheckIcon size={12} />}
+                  Assign {selected.size} Program{selected.size !== 1 ? 's' : ''}
+                </button>
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* Step: Review */}
+        {step === 'review' && (
+          <>
+            <div className="flex-1 overflow-y-auto px-4 py-4 min-h-0">
+              <div className="grid grid-cols-2 gap-3 mb-4">
+                <div className="flex flex-col items-center p-3 rounded-lg border border-orange-500/20 bg-[--card]">
+                  <span className="text-xl font-semibold text-orange-400 font-mono">{selected.size}</span>
+                  <span className="font-mono text-[9px] text-muted-foreground uppercase tracking-wider mt-0.5">Programs</span>
+                </div>
+                <div className="flex flex-col items-center p-3 rounded-lg border border-orange-500/20 bg-[--card]">
+                  <span className="text-xl font-semibold text-orange-400 font-mono">{totalTargets}</span>
+                  <span className="font-mono text-[9px] text-muted-foreground uppercase tracking-wider mt-0.5">Total Targets</span>
+                </div>
+              </div>
+
+              <span className="font-mono text-[10px] font-medium text-orange-400 uppercase tracking-wider">Assigned Programs</span>
+              <div className="flex flex-col gap-2 mt-2">
+                {selectedPrograms.map(p => (
+                  <div key={p.id} className="flex items-center gap-3 p-3 rounded-lg border border-orange-500/10 bg-orange-500/5">
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-mono font-medium">{p.name}</p>
+                      <div className="flex items-center gap-3 mt-0.5">
+                        <span className="text-[10px] font-mono text-muted-foreground">{p.platform}</span>
+                        <span className="text-[10px] font-mono text-green-500">{p.targetCount} targets</span>
+                        {p.maxBounty > 0 && <span className="text-[10px] font-mono text-yellow-500">${p.minBounty || 0}–${p.maxBounty}</span>}
+                      </div>
+                    </div>
+                    <button onClick={() => handleDeepDive(p)}
+                      className="shrink-0 text-[10px] font-mono text-muted-foreground hover:text-orange-400 transition-colors">
+                      Deep Dive
+                    </button>
+                    <button onClick={() => handleRemoveProgram(p.id)}
+                      className="shrink-0 text-muted-foreground hover:text-[--destructive] transition-colors"><XIcon size={12} /></button>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="flex items-center justify-end px-4 py-3 border-t border-white/[0.06] shrink-0">
+              <button onClick={handleSave} disabled={saving}
+                className="inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium bg-orange-500/10 text-orange-400 border border-orange-500/20 hover:bg-orange-500 hover:text-white transition-colors disabled:opacity-50">
+                {saving ? <SpinnerIcon size={12} /> : <CheckIcon size={12} />} Save Assignments
+              </button>
+            </div>
+          </>
+        )}
+
+        {/* Step: Deep Dive into a program's targets */}
+        {step === 'deepdive' && deepDiveProgram && (
+          <>
+            <div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.06] bg-black/20 shrink-0">
+              <div className="flex-1">
+                <p className="text-sm font-mono font-medium">{deepDiveProgram.name}</p>
+                <div className="flex items-center gap-3 mt-0.5">
+                  <span className="text-[10px] font-mono text-muted-foreground">{deepDiveProgram.platform}</span>
+                  <span className="text-[10px] font-mono text-green-500">{deepDiveProgram.targetCount} targets ({deepDiveProgram.inScopeCount} in scope)</span>
+                  {deepDiveProgram.maxBounty > 0 && <span className="text-[10px] font-mono text-yellow-500">${deepDiveProgram.minBounty || 0}–${deepDiveProgram.maxBounty}</span>}
+                  {deepDiveProgram.url && <a href={deepDiveProgram.url} target="_blank" rel="noopener" className="text-[10px] font-mono text-[--cyan] hover:underline">View on Platform →</a>}
+                </div>
+              </div>
+              {!selected.has(deepDiveProgram.id) ? (
+                <button onClick={() => { toggleProgram(deepDiveProgram.id); }}
+                  className="inline-flex items-center gap-1 rounded-md px-3 py-1.5 text-xs font-mono font-medium bg-orange-500/10 text-orange-400 border border-orange-500/20 hover:bg-orange-500 hover:text-white transition-colors">
+                  <PlusIcon size={12} /> Assign to Agent
+                </button>
+              ) : (
+                <span className="inline-flex items-center gap-1 rounded-full bg-orange-500/10 text-orange-400 border border-orange-500/20 px-2 py-0.5 text-[10px] font-mono">
+                  <CheckIcon size={10} /> Assigned
+                </span>
+              )}
+            </div>
+
+            <div className="flex-1 overflow-y-auto px-4 py-3 min-h-0">
+              {loadingTargets ? (
+                <div className="flex flex-col gap-2">
+                  {[...Array(5)].map((_, i) => <div key={i} className="h-10 animate-shimmer rounded-lg border border-white/[0.06]" />)}
+                </div>
+              ) : deepDiveTargets.length === 0 ? (
+                <div className="text-center py-8">
+                  <p className="text-sm font-mono text-muted-foreground">No in-scope targets found for this program</p>
+                </div>
+              ) : (
+                <>
+                  {/* Type summary */}
+                  {(() => {
+                    const types = {};
+                    deepDiveTargets.forEach(t => { types[t.type] = (types[t.type] || 0) + 1; });
+                    return (
+                      <div className="flex flex-wrap gap-1.5 mb-3">
+                        {Object.entries(types).sort((a, b) => b[1] - a[1]).map(([type, count]) => (
+                          <span key={type} className="inline-flex items-center rounded-full bg-white/[0.04] px-2 py-0.5 text-[9px] font-mono border border-white/[0.06]">
+                            {type} <span className="text-[--cyan] ml-1">{count}</span>
+                          </span>
+                        ))}
+                      </div>
+                    );
+                  })()}
+
+                  <div className="flex flex-col gap-1">
+                    {deepDiveTargets.map((t, i) => (
+                      <div key={t.id || i} className="flex items-center gap-2 p-2 rounded-md border border-white/[0.04] hover:border-white/[0.08] transition-colors">
+                        <span className={`inline-flex items-center rounded-full px-1.5 py-0 text-[8px] font-mono border shrink-0 ${
+                          t.type === 'domain' ? 'bg-blue-500/10 text-blue-400 border-blue-500/20'
+                            : t.type === 'wildcard' ? 'bg-purple-500/10 text-purple-400 border-purple-500/20'
+                            : t.type === 'url' ? 'bg-green-500/10 text-green-400 border-green-500/20'
+                            : t.type === 'ip' || t.type === 'cidr' ? 'bg-orange-500/10 text-orange-400 border-orange-500/20'
+                            : 'bg-white/[0.04] text-muted-foreground border-white/[0.06]'
+                        }`}>
+                          {t.type}
+                        </span>
+                        <span className="text-xs font-mono text-foreground/90 flex-1 truncate">{t.value}</span>
+                        {t.notes && <span className="text-[9px] font-mono text-muted-foreground/60 shrink-0 truncate max-w-[120px]">{t.notes}</span>}
+                      </div>
+                    ))}
+                  </div>
+                </>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </motion.div>
+  );
+}
+
 // ─── Tab Button ──────────────────────────────────────────────────────────────
 
 function TabBtn({ active, onClick, icon: Icon, label }) {
@@ -741,18 +1089,31 @@ export function AgentsPage() {
   const [refreshing, setRefreshing] = useState(false);
   const [viewingProfile, setViewingProfile] = useState(null);
   const [assigningTask, setAssigningTask] = useState(null);
+  const [assigningPrograms, setAssigningPrograms] = useState(null);
   const [showCreate, setShowCreate] = useState(false);
   const [search, setSearch] = useState('');
+  const [allAssignments, setAllAssignments] = useState({});
 
   async function load() {
     try {
-      const a = await getAgentProfilesWithStatus();
+      const [a, assignments] = await Promise.all([
+        getAgentProfilesWithStatus(),
+        getAllAgentAssignments(),
+      ]);
       setAgents(a);
+      setAllAssignments(assignments || {});
     } catch {}
     setLoading(false);
     setRefreshing(false);
   }
 
+  async function refreshAssignments() {
+    try {
+      const assignments = await getAllAgentAssignments();
+      setAllAssignments(assignments || {});
+    } catch {}
+  }
+
   useEffect(() => { load(); }, []);
 
   const activeCount = agents.filter(a => a.status === 'active').length;
@@ -848,7 +1209,10 @@ export function AgentsPage() {
           </div>
         ) : (
           filtered.map((agent, i) => (
-            <AgentCard key={agent.id} agent={agent} onViewProfile={setViewingProfile} onAssignTask={setAssigningTask} index={i} />
+            <AgentCard key={agent.id} agent={agent}
+              onViewProfile={setViewingProfile} onAssignTask={setAssigningTask}
+              onAssignPrograms={setAssigningPrograms} assignments={allAssignments[agent.id]}
+              index={i} />
           ))
         )}
       </div>
@@ -864,6 +1228,18 @@ export function AgentsPage() {
       <AnimatePresence>
         {assigningTask && <AssignTaskDialog agent={assigningTask} onClose={() => setAssigningTask(null)} />}
       </AnimatePresence>
+
+      {/* Program assignment wizard */}
+      <AnimatePresence>
+        {assigningPrograms && (
+          <ProgramAssignmentWizard
+            agent={assigningPrograms}
+            currentAssignments={allAssignments[assigningPrograms.id]}
+            onClose={() => setAssigningPrograms(null)}
+            onAssigned={refreshAssignments}
+          />
+        )}
+      </AnimatePresence>
     </>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harbinger-ai/harbinger",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "description": "Create autonomous AI agents with a two-layer architecture: Next.js Event Handler + Docker Agent.",
   "bin": {