@harbinger-ai/harbinger 0.1.1 → 0.1.3

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

@@ -1,22 +1,23 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 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) {
   if (!ts) return "never";
@@ -27,6 +28,9 @@ function timeAgo(ts) {
   if (hrs < 24) return `${hrs}h ago`;
   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);
   const [results, setResults] = useState(null);
@@ -49,183 +53,229 @@ function SyncPanel({ onSync, syncStatus }) {
     setSyncing(null);
   }
   const syncablePlatforms = PLATFORMS.filter((p) => p.id !== "custom");
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4 mb-6", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Sync from Bounty Platforms" }),
-        /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5", children: "Import programs and targets from bounty-targets-data (arkadiyt/bounty-targets-data)" })
-      ] }),
-      syncStatus?.lastSyncedAt && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
-        "Last sync: ",
-        timeAgo(syncStatus.lastSyncedAt)
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2 mb-3", children: [
-      syncablePlatforms.map((p) => {
-        const count = syncStatus?.platformCounts?.[p.id] || 0;
-        return /* @__PURE__ */ jsxs(
-          "button",
+  return /* @__PURE__ */ jsxs(
+    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",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-0.5", children: [
+              /* @__PURE__ */ jsx(DownloadIcon, { size: 14 }),
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-mono font-medium text-[--cyan]", children: "Sync from Bounty Platforms" })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground font-mono", children: "Import programs and targets from bounty-targets-data" })
+          ] }),
+          syncStatus?.lastSyncedAt && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground font-mono", children: [
+            "Last sync: ",
+            timeAgo(syncStatus.lastSyncedAt)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2 mb-3", children: [
+          syncablePlatforms.map((p) => {
+            const count = syncStatus?.platformCounts?.[p.id] || 0;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                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-mono font-medium border transition-colors hover:bg-white/[0.04] disabled:opacity-50 ${p.border}`,
+                children: [
+                  syncing === p.id ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(DownloadIcon, { size: 12 }),
+                  p.label,
+                  count > 0 && /* @__PURE__ */ jsx("span", { className: `inline-flex rounded-full px-1.5 py-0.5 text-[9px] font-mono ${p.bg} ${p.text}`, children: count })
+                ]
+              },
+              p.id
+            );
+          }),
+          /* @__PURE__ */ jsxs(
+            "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-mono font-medium bg-[--cyan] text-[--primary-foreground] hover:opacity-90 disabled:opacity-50 transition-opacity",
+              children: [
+                syncing === "all" ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(DownloadIcon, { size: 12 }),
+                "Sync All"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-[10px] text-muted-foreground font-mono uppercase tracking-wider", children: "Max programs:" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              value: maxPrograms,
+              onChange: (e) => setMaxPrograms(e.target.value),
+              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"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground font-mono", children: "(0 = unlimited)" })
+        ] }),
+        /* @__PURE__ */ jsx(AnimatePresence, { children: results && /* @__PURE__ */ jsx(
+          motion.div,
           {
-            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}`,
-            children: [
-              syncing === p.id ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(DownloadIcon, { size: 12 }),
-              p.label,
-              count > 0 && /* @__PURE__ */ jsx("span", { className: `inline-flex rounded-full px-1.5 py-0.5 text-[9px] ${p.color}`, children: count })
-            ]
-          },
-          p.id
-        );
-      }),
-      /* @__PURE__ */ jsxs(
-        "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",
-          children: [
-            syncing === "all" ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(DownloadIcon, { size: 12 }),
-            "Sync All"
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
-      /* @__PURE__ */ jsx("label", { className: "text-[10px] text-muted-foreground", children: "Max programs per platform:" }),
-      /* @__PURE__ */ jsx(
-        "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",
-          min: "0",
-          placeholder: "0 = all"
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "(0 = unlimited)" })
-    ] }),
-    results && /* @__PURE__ */ jsx("div", { className: "rounded-md bg-muted/50 p-3 mt-2", children: results.error ? /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: results.error }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: Object.entries(results).map(([platform, stats]) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs", children: [
-      /* @__PURE__ */ jsx("span", { className: "font-medium w-24", children: platform }),
-      /* @__PURE__ */ jsxs("span", { className: "text-green-500", children: [
-        "+",
-        stats.programsAdded,
-        " programs"
-      ] }),
-      /* @__PURE__ */ jsxs("span", { className: "text-blue-500", children: [
-        stats.programsUpdated,
-        " updated"
-      ] }),
-      /* @__PURE__ */ jsxs("span", { className: "text-green-500", children: [
-        "+",
-        stats.targetsAdded,
-        " targets"
-      ] }),
-      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
-        stats.targetsSkipped,
-        " skipped"
-      ] }),
-      stats.errors?.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-destructive", children: [
-        stats.errors.length,
-        " errors"
-      ] })
-    ] }, platform)) }) }),
-    syncStatus && syncStatus.totalSyncedPrograms > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mt-2 pt-2 border-t", children: [
-      /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
-        syncStatus.totalSyncedPrograms,
-        " synced programs:"
-      ] }),
-      Object.entries(syncStatus.platformCounts || {}).map(([p, count]) => {
-        const plat = PLATFORMS.find((x) => x.id === p);
-        return /* @__PURE__ */ jsxs("span", { className: `inline-flex rounded-full px-2 py-0.5 text-[9px] font-medium ${plat?.color || ""}`, children: [
-          plat?.label || p,
-          " (",
-          count,
-          ")"
-        ] }, p);
-      })
-    ] })
-  ] });
+            initial: { opacity: 0, height: 0 },
+            animate: { opacity: 1, height: "auto" },
+            exit: { opacity: 0, height: 0 },
+            className: "overflow-hidden",
+            children: /* @__PURE__ */ jsx("div", { className: "rounded-md bg-black/30 border border-white/[0.04] p-3 mt-2", children: results.error ? /* @__PURE__ */ jsx("p", { className: "text-xs font-mono text-[--destructive]", children: results.error }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: Object.entries(results).map(([platform, stats]) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs font-mono", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-medium w-24 text-foreground/80", children: platform }),
+              /* @__PURE__ */ jsxs("span", { className: "text-green-500", children: [
+                "+",
+                stats.programsAdded,
+                " programs"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "text-blue-500", children: [
+                stats.programsUpdated,
+                " updated"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "text-green-500", children: [
+                "+",
+                stats.targetsAdded,
+                " targets"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                stats.targetsSkipped,
+                " skipped"
+              ] }),
+              stats.errors?.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[--destructive]", children: [
+                stats.errors.length,
+                " errors"
+              ] })
+            ] }, platform)) }) })
+          }
+        ) }),
+        syncStatus && syncStatus.totalSyncedPrograms > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mt-3 pt-3 border-t border-white/[0.06]", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground font-mono", children: [
+            syncStatus.totalSyncedPrograms,
+            " synced:"
+          ] }),
+          Object.entries(syncStatus.platformCounts || {}).map(([p, count]) => {
+            const plat = getPlatStyle(p);
+            return /* @__PURE__ */ jsxs("span", { className: `inline-flex rounded-full px-2 py-0.5 text-[9px] font-mono font-medium border ${plat.bg} ${plat.text} ${plat.border}`, children: [
+              plat.label,
+              " (",
+              count,
+              ")"
+            ] }, p);
+          })
+        ] })
+      ]
+    }
+  );
 }
-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 /* @__PURE__ */ jsxs(
-    "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"}`,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "shrink-0 rounded-md bg-muted p-2", children: /* @__PURE__ */ jsx(GlobeIcon, { size: 14 }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", 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__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: program.name }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium truncate", children: program.name }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-0.5 flex-wrap", children: [
-            /* @__PURE__ */ jsx("span", { className: `inline-flex rounded-full px-2 py-0.5 text-[10px] font-medium ${platform.color}`, children: platform.label }),
-            program.maxBounty > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("span", { className: `inline-flex rounded-full px-2 py-0.5 text-[10px] font-mono font-medium border ${plat.bg} ${plat.text} ${plat.border}`, children: plat.label }),
+            program.maxBounty > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-mono text-green-500", children: [
               "Up to $",
               program.maxBounty.toLocaleString()
             ] }),
-            program.syncHandle && /* @__PURE__ */ jsx("span", { className: "inline-flex rounded-full bg-cyan-500/10 px-1.5 py-0.5 text-[9px] text-cyan-500", children: "synced" })
+            program.syncHandle && /* @__PURE__ */ jsx("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]", children: "synced" })
           ] })
         ] }),
         !program.syncHandle && /* @__PURE__ */ jsx("button", { onClick: (e) => {
           e.stopPropagation();
           onDelete(program.id);
-        }, className: "shrink-0 p-1 text-muted-foreground hover:text-destructive rounded", children: /* @__PURE__ */ jsx(TrashIcon, { size: 12 }) })
+        }, className: "shrink-0 p-1 text-muted-foreground hover:text-[--destructive] rounded transition-colors", children: /* @__PURE__ */ jsx(TrashIcon, { size: 12 }) })
       ]
     }
   );
 }
-function TargetRow({ target, onDelete, onStatusChange }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3 rounded-lg border bg-card", children: [
-    /* @__PURE__ */ jsx("div", { className: "shrink-0 rounded-md bg-muted p-2", children: /* @__PURE__ */ jsx(CrosshairIcon, { size: 14 }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium truncate", children: target.value }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-0.5 flex-wrap", children: [
-        /* @__PURE__ */ jsx("span", { className: "inline-flex rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: target.type }),
-        target.syncSource && /* @__PURE__ */ jsx("span", { className: "inline-flex rounded-full bg-cyan-500/10 px-1.5 py-0.5 text-[9px] text-cyan-500", children: target.syncSource }),
-        target.technologies && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground truncate", children: JSON.parse(target.technologies).join(", ") })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "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] || ""}`,
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "in_scope", children: "in scope" }),
-          /* @__PURE__ */ jsx("option", { value: "testing", children: "testing" }),
-          /* @__PURE__ */ jsx("option", { value: "completed", children: "completed" }),
-          /* @__PURE__ */ jsx("option", { value: "out_of_scope", children: "out of scope" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("button", { onClick: () => onDelete(target.id), className: "shrink-0 p-1 text-muted-foreground hover:text-destructive rounded", children: /* @__PURE__ */ jsx(TrashIcon, { size: 12 }) })
-  ] });
+function TargetRow({ target, onDelete, onStatusChange, index }) {
+  const st = STATUS_COLORS[target.status] || STATUS_COLORS.in_scope;
+  return /* @__PURE__ */ jsxs(
+    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",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: `shrink-0 w-2 h-2 rounded-full ${st.dot}` }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium truncate", children: target.value }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-0.5 flex-wrap", children: [
+            /* @__PURE__ */ jsx("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", children: target.type }),
+            target.syncSource && /* @__PURE__ */ jsx("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]", children: target.syncSource }),
+            target.technologies && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-muted-foreground truncate", children: JSON.parse(target.technologies).join(", ") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: target.status,
+            onChange: (e) => onStatusChange(target.id, e.target.value),
+            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`,
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "in_scope", children: "in scope" }),
+              /* @__PURE__ */ jsx("option", { value: "testing", children: "testing" }),
+              /* @__PURE__ */ jsx("option", { value: "completed", children: "completed" }),
+              /* @__PURE__ */ jsx("option", { value: "out_of_scope", children: "out of scope" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { onClick: () => onDelete(target.id), className: "shrink-0 p-1 text-muted-foreground hover:text-[--destructive] rounded transition-colors", children: /* @__PURE__ */ jsx(TrashIcon, { size: 12 }) })
+      ]
+    }
+  );
 }
 function AddForm({ fields, onSubmit }) {
   const [values, setValues] = useState({});
   const [open, setOpen] = useState(false);
-  if (!open) return /* @__PURE__ */ jsxs("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", children: [
+  if (!open) return /* @__PURE__ */ jsxs("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", children: [
     /* @__PURE__ */ jsx(PlusIcon, { size: 12 }),
     " Add"
   ] });
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end gap-2 p-3 rounded-lg border bg-card", children: [
-    fields.map((f) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx("label", { className: "text-[10px] text-muted-foreground", children: f.label }),
-      f.type === "select" ? /* @__PURE__ */ jsx("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", children: f.options.map((o) => /* @__PURE__ */ jsx("option", { value: o, children: o }, o)) }) : /* @__PURE__ */ jsx("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]" })
-    ] }, f.name)),
-    /* @__PURE__ */ jsx("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", children: "Save" }),
-    /* @__PURE__ */ jsx("button", { onClick: () => {
-      setValues({});
-      setOpen(false);
-    }, className: "text-xs text-muted-foreground hover:text-foreground px-2 py-1.5", children: "Cancel" })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    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]",
+      children: [
+        fields.map((f) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-[10px] text-muted-foreground font-mono uppercase tracking-wider", children: f.label }),
+          f.type === "select" ? /* @__PURE__ */ jsx("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", children: f.options.map((o) => /* @__PURE__ */ jsx("option", { value: o, children: o }, o)) }) : /* @__PURE__ */ jsx("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" })
+        ] }, f.name)),
+        /* @__PURE__ */ jsx("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", children: "Save" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => {
+          setValues({});
+          setOpen(false);
+        }, className: "text-xs font-mono text-muted-foreground hover:text-foreground px-2 py-1.5 transition-colors", children: "Cancel" })
+      ]
+    }
+  );
 }
 function TargetsPage() {
   const [programs_, setPrograms] = useState([]);
@@ -289,39 +339,58 @@ function TargetsPage() {
     loadTargets();
   }
   const filteredPrograms = platformFilter === "all" ? programs_ : programs_.filter((p) => p.platform === platformFilter);
-  if (loading) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-16 animate-pulse rounded-lg bg-border/50" }, i)) });
+  const inScopeCount = targets_.filter((t) => t.status === "in_scope").length;
+  if (loading) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-16 animate-pulse rounded-lg bg-white/[0.04] border border-white/[0.06]" }, i)) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
-      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: "Targets" }),
-      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: [
-        programs_.length,
-        " program",
-        programs_.length !== 1 ? "s" : "",
-        ", ",
-        targets_.length,
-        " target",
-        targets_.length !== 1 ? "s" : "",
-        " in scope"
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-6", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-mono font-semibold text-[--cyan] text-glow-cyan", children: "Targets" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground mt-1 font-mono", children: "Bug bounty program and target management" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs("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", children: [
+          programs_.length,
+          " programs"
+        ] }),
+        /* @__PURE__ */ jsxs("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", children: [
+          inScopeCount,
+          " in scope"
+        ] })
       ] })
     ] }),
     /* @__PURE__ */ jsx(SyncPanel, { onSync: handleSync, syncStatus }),
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-1 mb-4 overflow-x-auto pb-1", children: [
-      /* @__PURE__ */ jsxs("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"}`, children: [
-        "All (",
-        programs_.length,
-        ")"
-      ] }),
-      PLATFORMS.filter((p) => programs_.some((prog) => prog.platform === p.id)).map((p) => /* @__PURE__ */ jsxs("button", { 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"}`, children: [
-        p.label,
-        " (",
-        programs_.filter((prog) => prog.platform === p.id).length,
-        ")"
-      ] }, p.id))
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 mb-4 overflow-x-auto pb-1 scrollbar-thin", children: [
+      /* @__PURE__ */ jsxs(
+        "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]"}`,
+          children: [
+            "All (",
+            programs_.length,
+            ")"
+          ]
+        }
+      ),
+      PLATFORMS.filter((p) => programs_.some((prog) => prog.platform === p.id)).map((p) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          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]"}`,
+          children: [
+            p.label,
+            " (",
+            programs_.filter((prog) => prog.platform === p.id).length,
+            ")"
+          ]
+        },
+        p.id
+      ))
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", children: [
       /* @__PURE__ */ jsxs("div", { className: "lg:col-span-1", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-sm font-medium", children: "Programs" }),
+          /* @__PURE__ */ jsx("h2", { className: "text-[10px] font-mono font-medium uppercase tracking-wider text-muted-foreground", children: "Programs" }),
           /* @__PURE__ */ jsx(
             AddForm,
             {
@@ -335,15 +404,15 @@ function TargetsPage() {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 max-h-[600px] overflow-y-auto", children: filteredPrograms.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-8 text-center", children: [
-          /* @__PURE__ */ jsx("div", { className: "rounded-full bg-muted p-3 mb-3", children: /* @__PURE__ */ jsx(GlobeIcon, { size: 20 }) }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "No programs yet" }),
-          /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground mt-1", children: "Sync from platforms or add manually" })
-        ] }) : filteredPrograms.map((p) => /* @__PURE__ */ jsx(ProgramCard, { program: p, selected: selectedProgram === p.id, onSelect: setSelectedProgram, onDelete: handleDeleteProgram }, p.id)) })
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 max-h-[600px] overflow-y-auto scrollbar-thin", children: filteredPrograms.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-8 text-center", children: [
+          /* @__PURE__ */ jsx("div", { className: "rounded-full bg-white/[0.04] border border-white/[0.06] p-3 mb-3", children: /* @__PURE__ */ jsx(GlobeIcon, { size: 20 }) }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-mono text-muted-foreground", children: "No programs yet" }),
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] font-mono text-muted-foreground mt-1", children: "Sync from platforms or add manually" })
+        ] }) : filteredPrograms.map((p, i) => /* @__PURE__ */ jsx(ProgramCard, { program: p, selected: selectedProgram === p.id, onSelect: setSelectedProgram, onDelete: handleDeleteProgram, index: i }, p.id)) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-          /* @__PURE__ */ jsxs("h2", { className: "text-sm font-medium", children: [
+          /* @__PURE__ */ jsxs("h2", { className: "text-[10px] font-mono font-medium uppercase tracking-wider text-muted-foreground", children: [
             "Targets ",
             selectedProgram && `\u2014 ${programs_.find((p) => p.id === selectedProgram)?.name || ""}`
           ] }),
@@ -358,15 +427,15 @@ function TargetsPage() {
             }
           )
         ] }),
-        !selectedProgram ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-12 text-center", children: [
-          /* @__PURE__ */ jsx("div", { className: "rounded-full bg-muted p-4 mb-4", children: /* @__PURE__ */ jsx(CrosshairIcon, { size: 24 }) }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-1", children: "Select a program" }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Choose a program to manage its targets" })
-        ] }) : targets_.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-12 text-center", children: [
-          /* @__PURE__ */ jsx("div", { className: "rounded-full bg-muted p-4 mb-4", children: /* @__PURE__ */ jsx(CrosshairIcon, { size: 24 }) }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-1", children: "No targets yet" }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Add domains, IPs, and URLs to start hunting" })
-        ] }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 max-h-[600px] overflow-y-auto", children: targets_.map((t) => /* @__PURE__ */ jsx(TargetRow, { target: t, onDelete: handleDeleteTarget, onStatusChange: handleStatusChange }, t.id)) })
+        /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: !selectedProgram ? /* @__PURE__ */ jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, 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(CrosshairIcon, { size: 24 }) }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium mb-1", children: "Select a program" }),
+          /* @__PURE__ */ jsx("p", { className: "text-[11px] font-mono text-muted-foreground", children: "Choose a program to manage its targets" })
+        ] }, "empty") : targets_.length === 0 ? /* @__PURE__ */ jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, 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(CrosshairIcon, { size: 24 }) }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium mb-1", children: "No targets yet" }),
+          /* @__PURE__ */ jsx("p", { className: "text-[11px] font-mono text-muted-foreground", children: "Add domains, IPs, and URLs to start hunting" })
+        ] }, "no-targets") : /* @__PURE__ */ jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "flex flex-col gap-2 max-h-[600px] overflow-y-auto scrollbar-thin", children: targets_.map((t, i) => /* @__PURE__ */ jsx(TargetRow, { target: t, onDelete: handleDeleteTarget, onStatusChange: handleStatusChange, index: i }, t.id)) }, "targets") })
       ] })
     ] })
   ] });