@harbinger-ai/harbinger 0.1.1 → 0.1.3

package/lib/chat/components/mission-control.js

@@ -0,0 +1,490 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { SpinnerIcon, RefreshIcon, ChevronDownIcon, BellIcon } from "./icons.js";
+import { getSwarmStatus, getNotifications } from "../actions.js";
+function formatDuration(seconds) {
+  if (!seconds || seconds < 0) return "0s";
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  if (minutes < 60) return `${minutes}m ${secs}s`;
+  const hours = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+  return `${hours}h ${mins}m`;
+}
+function timeAgo(timestamp) {
+  if (!timestamp) return "";
+  const seconds = Math.floor((Date.now() - new Date(timestamp).getTime()) / 1e3);
+  if (seconds < 60) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  return `${Math.floor(hours / 24)}d ago`;
+}
+function getJobId(branch) {
+  if (!branch) return "";
+  return branch.replace("job/", "").slice(0, 8);
+}
+function AgentRoster({ agents, runs, selectedAgent, onSelect, collapsed, onToggleCollapse }) {
+  const agentJobCounts = {};
+  for (const run of runs) {
+    const branch = run.branch || "";
+    for (const agent of agents) {
+      const codename = (agent.codename || agent.name || agent.id || "").toLowerCase();
+      if (branch.toLowerCase().includes(codename)) {
+        agentJobCounts[codename] = (agentJobCounts[codename] || 0) + 1;
+      }
+    }
+  }
+  const activeRuns = runs.filter((r) => r.status === "in_progress" || r.status === "queued");
+  const agentActivity = {};
+  for (const run of activeRuns) {
+    const branch = (run.branch || "").toLowerCase();
+    for (const agent of agents) {
+      const codename = (agent.codename || agent.name || agent.id || "").toLowerCase();
+      if (branch.includes(codename)) {
+        agentActivity[codename] = run.status === "in_progress" ? "active" : "queued";
+      }
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `shrink-0 border-r border-white/[0.06] transition-all ${collapsed ? "w-14" : "w-60"}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3 border-b border-white/[0.06]", children: [
+      !collapsed && /* @__PURE__ */ jsx("h2", { className: "text-[10px] font-mono font-medium uppercase tracking-wider text-muted-foreground", children: "Agents" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onToggleCollapse,
+          className: "p-1 text-muted-foreground hover:text-foreground transition-colors",
+          children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14, className: `transition-transform ${collapsed ? "-rotate-90" : "rotate-90"}` })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 p-2 overflow-y-auto max-h-[calc(100vh-16rem)] scrollbar-thin", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => onSelect(null),
+          className: `flex items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors ${selectedAgent === null ? "bg-[--cyan]/10 text-[--cyan]" : "hover:bg-white/[0.04] text-muted-foreground hover:text-foreground"}`,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[--cyan] shrink-0" }),
+            !collapsed && /* @__PURE__ */ jsx("span", { className: "text-xs font-mono truncate", children: "All Agents" })
+          ]
+        }
+      ),
+      agents.map((agent, i) => {
+        const codename = agent.codename || agent.name || agent.id;
+        const lcCodename = codename.toLowerCase();
+        const activity = agentActivity[lcCodename];
+        const isSelected = selectedAgent === agent.id;
+        return /* @__PURE__ */ jsxs(
+          motion.button,
+          {
+            initial: { opacity: 0, x: -8 },
+            animate: { opacity: 1, x: 0 },
+            transition: { duration: 0.2, delay: i * 0.03 },
+            onClick: () => onSelect(agent.id),
+            className: `flex items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors ${isSelected ? "bg-[--cyan]/10 text-[--cyan]" : "hover:bg-white/[0.04] text-foreground/80 hover:text-foreground"}`,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: `w-2 h-2 rounded-full shrink-0 ${activity === "active" ? "bg-green-500 animate-pulse" : activity === "queued" ? "bg-yellow-500" : "bg-muted-foreground/40"}` }),
+              !collapsed && /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-xs font-mono font-medium truncate block", children: [
+                  "@",
+                  codename.toUpperCase()
+                ] }),
+                agent.role && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-muted-foreground truncate block", children: agent.role })
+              ] })
+            ]
+          },
+          agent.id
+        );
+      }),
+      agents.length === 0 && !collapsed && /* @__PURE__ */ jsx("div", { className: "text-center py-4", children: /* @__PURE__ */ jsx("p", { className: "text-[10px] font-mono text-muted-foreground", children: "No agents configured" }) })
+    ] })
+  ] });
+}
+function MissionCard({ run, agents, index }) {
+  const [expanded, setExpanded] = useState(false);
+  const isActive = run.status === "in_progress";
+  const isQueued = run.status === "queued";
+  const isFailed = run.conclusion === "failure";
+  const isSuccess = run.conclusion === "success";
+  const jobId = getJobId(run.branch);
+  const branch = (run.branch || "").toLowerCase();
+  const matchedAgent = agents.find((a) => {
+    const codename = (a.codename || a.name || a.id || "").toLowerCase();
+    return branch.includes(codename);
+  });
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 6 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.2, delay: index * 0.03 },
+      layout: true,
+      className: `rounded-lg border bg-[--card] transition-all ${isActive ? "border-green-500/30 shadow-[0_0_15px_oklch(0.7_0.17_145/10%)]" : isFailed ? "border-red-500/20" : "border-white/[0.06] hover:border-[--cyan]/20"}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setExpanded(!expanded),
+            className: "flex items-center gap-3 w-full text-left p-3 hover:bg-white/[0.02] rounded-lg transition-colors",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: `shrink-0 w-2.5 h-2.5 rounded-full ${isActive ? "bg-green-500 animate-pulse" : isQueued ? "bg-yellow-500" : isFailed ? "bg-red-500" : isSuccess ? "bg-green-500" : "bg-muted-foreground"}` }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-mono font-medium text-foreground/90 truncate", children: run.workflow_name || run.branch || "Unknown" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-0.5 flex-wrap", children: [
+                  jobId && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-muted-foreground", children: jobId }),
+                  matchedAgent && /* @__PURE__ */ jsxs("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: [
+                    "@",
+                    (matchedAgent.codename || matchedAgent.name || matchedAgent.id).toUpperCase()
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-muted-foreground shrink-0", children: isActive || isQueued ? formatDuration(run.duration_seconds) : timeAgo(run.updated_at || run.started_at) }),
+              !isActive && !isQueued && /* @__PURE__ */ jsx("span", { className: `inline-flex rounded-full px-2 py-0.5 text-[9px] font-mono font-medium border ${isFailed ? "bg-red-500/10 text-red-500 border-red-500/20" : isSuccess ? "bg-green-500/10 text-green-500 border-green-500/20" : "bg-white/5 text-muted-foreground border-white/10"}`, children: run.conclusion || "unknown" }),
+              /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14, className: `shrink-0 text-muted-foreground transition-transform ${expanded ? "rotate-180" : ""}` })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(AnimatePresence, { children: expanded && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { height: 0, opacity: 0 },
+            animate: { height: "auto", opacity: 1 },
+            exit: { height: 0, opacity: 0 },
+            transition: { duration: 0.2 },
+            className: "overflow-hidden",
+            children: /* @__PURE__ */ jsxs("div", { className: "border-t border-white/[0.06] px-4 py-3 flex flex-col gap-2", children: [
+              run.branch && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs items-baseline", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[10px] uppercase tracking-wider w-16 shrink-0", children: "Branch" }),
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground/80", children: run.branch })
+              ] }),
+              run.started_at && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs items-baseline", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[10px] uppercase tracking-wider w-16 shrink-0", children: "Started" }),
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground/80", children: new Date(run.started_at).toLocaleString() })
+              ] }),
+              run.duration_seconds > 0 && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs items-baseline", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[10px] uppercase tracking-wider w-16 shrink-0", children: "Duration" }),
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground/80", children: formatDuration(run.duration_seconds) })
+              ] }),
+              run.html_url && /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx("a", { href: run.html_url, target: "_blank", rel: "noopener noreferrer", className: "text-[10px] font-mono text-[--cyan] hover:underline", children: "View on GitHub \u2192" }) })
+            ] })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function MissionQueue({ runs, agents, selectedAgent }) {
+  const filteredRuns = selectedAgent ? runs.filter((r) => {
+    const branch = (r.branch || "").toLowerCase();
+    const agent = agents.find((a) => a.id === selectedAgent);
+    if (!agent) return false;
+    const codename = (agent.codename || agent.name || agent.id || "").toLowerCase();
+    return branch.includes(codename);
+  }) : runs;
+  const queued = filteredRuns.filter((r) => r.status === "queued");
+  const active = filteredRuns.filter((r) => r.status === "in_progress");
+  const completed = filteredRuns.filter((r) => r.status !== "queued" && r.status !== "in_progress");
+  const columns = [
+    { id: "queued", label: "QUEUED", runs: queued, color: "text-yellow-500", dotColor: "bg-yellow-500" },
+    { id: "active", label: "IN PROGRESS", runs: active, color: "text-green-500", dotColor: "bg-green-500 animate-pulse" },
+    { id: "completed", label: "COMPLETED", runs: completed, color: "text-muted-foreground", dotColor: "bg-muted-foreground" }
+  ];
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 p-4 overflow-y-auto scrollbar-thin", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 h-full", children: columns.map((col) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-h-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3 pb-2 border-b border-white/[0.06]", children: [
+      /* @__PURE__ */ jsx("div", { className: `w-2 h-2 rounded-full ${col.dotColor}` }),
+      /* @__PURE__ */ jsx("h3", { className: `text-[10px] font-mono font-medium uppercase tracking-wider ${col.color}`, children: col.label }),
+      /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-mono text-muted-foreground", children: [
+        "(",
+        col.runs.length,
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 overflow-y-auto scrollbar-thin flex-1", children: [
+      /* @__PURE__ */ jsx(AnimatePresence, { children: col.runs.map((run, i) => /* @__PURE__ */ jsx(MissionCard, { run, agents, index: i }, run.run_id)) }),
+      col.runs.length === 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8 text-[10px] font-mono text-muted-foreground/50", children: "No missions" })
+    ] })
+  ] }, col.id)) }) });
+}
+function LiveFeed({ runs, notifications, collapsed, onToggleCollapse }) {
+  const events = [];
+  for (const run of runs.slice(0, 20)) {
+    const isActive = run.status === "in_progress";
+    const isQueued = run.status === "queued";
+    const isFailed = run.conclusion === "failure";
+    const isSuccess = run.conclusion === "success";
+    events.push({
+      id: `run-${run.run_id}`,
+      time: run.updated_at || run.started_at || run.created_at,
+      type: isActive ? "job_started" : isQueued ? "job_created" : isFailed ? "job_failed" : isSuccess ? "job_completed" : "job_completed",
+      label: isActive ? "Running" : isQueued ? "Queued" : isFailed ? "Failed" : "Completed",
+      description: run.workflow_name || getJobId(run.branch) || "job",
+      color: isActive ? "text-green-500" : isQueued ? "text-yellow-500" : isFailed ? "text-[--destructive]" : "text-green-500",
+      dotColor: isActive ? "bg-green-500 animate-pulse" : isQueued ? "bg-yellow-500" : isFailed ? "bg-red-500" : "bg-green-500",
+      url: run.html_url
+    });
+  }
+  for (const notif of (notifications || []).slice(0, 10)) {
+    const payload = typeof notif.payload === "string" ? JSON.parse(notif.payload) : notif.payload;
+    events.push({
+      id: `notif-${notif.id}`,
+      time: notif.createdAt,
+      type: "notification",
+      label: payload?.conclusion === "failure" ? "Failed" : "PR Merged",
+      description: payload?.title || payload?.pr_title || "Notification",
+      color: payload?.conclusion === "failure" ? "text-[--destructive]" : "text-[--cyan]",
+      dotColor: payload?.conclusion === "failure" ? "bg-red-500" : "bg-[--cyan]",
+      url: payload?.pr_url || payload?.html_url
+    });
+  }
+  events.sort((a, b) => {
+    const ta = a.time ? new Date(a.time).getTime() : 0;
+    const tb = b.time ? new Date(b.time).getTime() : 0;
+    return tb - ta;
+  });
+  const unique = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const e of events) {
+    if (!seen.has(e.id)) {
+      seen.add(e.id);
+      unique.push(e);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `shrink-0 border-l border-white/[0.06] transition-all ${collapsed ? "w-14" : "w-72"}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3 border-b border-white/[0.06]", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onToggleCollapse,
+          className: "p-1 text-muted-foreground hover:text-foreground transition-colors",
+          children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14, className: `transition-transform ${collapsed ? "rotate-90" : "-rotate-90"}` })
+        }
+      ),
+      !collapsed && /* @__PURE__ */ jsx("h2", { className: "text-[10px] font-mono font-medium uppercase tracking-wider text-muted-foreground", children: "Live Feed" })
+    ] }),
+    !collapsed && /* @__PURE__ */ jsxs("div", { className: "flex flex-col overflow-y-auto max-h-[calc(100vh-16rem)] scrollbar-thin", children: [
+      unique.slice(0, 30).map((event, i) => /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          initial: { opacity: 0, x: 8 },
+          animate: { opacity: 1, x: 0 },
+          transition: { duration: 0.2, delay: i * 0.02 },
+          className: "flex items-start gap-2 px-3 py-2 border-b border-white/[0.03] hover:bg-white/[0.02] transition-colors",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: `shrink-0 w-1.5 h-1.5 rounded-full mt-1.5 ${event.dotColor}` }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx("span", { className: `text-[9px] font-mono font-medium ${event.color}`, children: event.label }),
+                /* @__PURE__ */ jsx("span", { className: "text-[9px] font-mono text-muted-foreground", children: timeAgo(event.time) })
+              ] }),
+              event.url ? /* @__PURE__ */ jsx("a", { href: event.url, target: "_blank", rel: "noopener noreferrer", className: "text-[10px] font-mono text-foreground/70 hover:text-[--cyan] truncate block transition-colors", children: event.description }) : /* @__PURE__ */ jsx("p", { className: "text-[10px] font-mono text-foreground/70 truncate", children: event.description })
+            ] })
+          ]
+        },
+        event.id
+      )),
+      unique.length === 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+        /* @__PURE__ */ jsx(BellIcon, { size: 16 }),
+        /* @__PURE__ */ jsx("p", { className: "text-[10px] font-mono text-muted-foreground mt-2", children: "No events yet" })
+      ] })
+    ] })
+  ] });
+}
+function MissionControlPage() {
+  const [agents, setAgents] = useState([]);
+  const [runs, setRuns] = useState([]);
+  const [notifications_, setNotifications] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [selectedAgent, setSelectedAgent] = useState(null);
+  const [leftCollapsed, setLeftCollapsed] = useState(false);
+  const [rightCollapsed, setRightCollapsed] = useState(false);
+  const fetchData = useCallback(async () => {
+    try {
+      const [swarm, notifs, agentProfiles] = await Promise.all([
+        getSwarmStatus(1),
+        getNotifications(),
+        import("../actions.js").then((m) => m.getAgentProfiles ? m.getAgentProfiles() : []).catch(() => [])
+      ]);
+      setRuns(swarm.runs || []);
+      setNotifications(notifs || []);
+      setAgents(agentProfiles || []);
+    } catch (err) {
+      console.error("Failed to fetch mission control data:", err);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, []);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  useEffect(() => {
+    const interval = setInterval(() => fetchData(), 1e4);
+    return () => clearInterval(interval);
+  }, [fetchData]);
+  const activeCount = runs.filter((r) => r.status === "in_progress").length;
+  const queuedCount = runs.filter((r) => r.status === "queued").length;
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-48 animate-pulse rounded-lg bg-white/[0.04]" }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-4 flex-1", children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(4)].map((_2, j) => /* @__PURE__ */ jsx("div", { className: "h-16 animate-pulse rounded-lg bg-white/[0.04] border border-white/[0.06]" }, j)) }, i)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full -m-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-white/[0.06]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-lg font-mono font-semibold text-[--cyan] text-glow-cyan", children: "Mission Control" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          activeCount > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-[10px] font-mono font-medium bg-green-500/10 text-green-500 border border-green-500/20", children: [
+            /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" }),
+            activeCount,
+            " active"
+          ] }),
+          queuedCount > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-[10px] font-mono font-medium bg-yellow-500/10 text-yellow-500 border border-yellow-500/20", children: [
+            queuedCount,
+            " queued"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-[10px] font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20", children: [
+            agents.length,
+            " agents"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => {
+            setRefreshing(true);
+            fetchData();
+          },
+          disabled: refreshing,
+          className: "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-mono font-medium border border-white/[0.06] text-muted-foreground hover:text-foreground hover:bg-white/[0.04] disabled:opacity-50 transition-colors",
+          children: [
+            refreshing ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 14 }) : /* @__PURE__ */ jsx(RefreshIcon, { size: 14 }),
+            refreshing ? "Refreshing" : "Refresh"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "hidden md:flex flex-1 min-h-0", children: [
+      /* @__PURE__ */ jsx(
+        AgentRoster,
+        {
+          agents,
+          runs,
+          selectedAgent,
+          onSelect: setSelectedAgent,
+          collapsed: leftCollapsed,
+          onToggleCollapse: () => setLeftCollapsed(!leftCollapsed)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MissionQueue,
+        {
+          runs,
+          agents,
+          selectedAgent
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        LiveFeed,
+        {
+          runs,
+          notifications: notifications_,
+          collapsed: rightCollapsed,
+          onToggleCollapse: () => setRightCollapsed(!rightCollapsed)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      MobileMissionControl,
+      {
+        agents,
+        runs,
+        notifications: notifications_,
+        selectedAgent,
+        onSelectAgent: setSelectedAgent
+      }
+    )
+  ] });
+}
+function MobileMissionControl({ agents, runs, notifications, selectedAgent, onSelectAgent }) {
+  const [tab, setTab] = useState("missions");
+  const tabs = [
+    { id: "agents", label: "AGENTS", count: agents.length },
+    { id: "missions", label: "MISSIONS", count: runs.length },
+    { id: "feed", label: "FEED", count: null }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 md:hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex gap-1 border-b border-white/[0.06] px-2", children: tabs.map((t) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setTab(t.id),
+        className: `px-3 py-2 text-[10px] font-mono font-medium uppercase tracking-wider border-b-2 transition-colors ${tab === t.id ? "border-[--cyan] text-[--cyan]" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+        children: [
+          t.label,
+          " ",
+          t.count !== null && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+            "(",
+            t.count,
+            ")"
+          ] })
+        ]
+      },
+      t.id
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-3", children: [
+      tab === "agents" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              onSelectAgent(null);
+              setTab("missions");
+            },
+            className: `flex items-center gap-2 rounded-md px-3 py-2 text-left transition-colors ${selectedAgent === null ? "bg-[--cyan]/10 text-[--cyan]" : "hover:bg-white/[0.04]"}`,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[--cyan]" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono", children: "All Agents" })
+            ]
+          }
+        ),
+        agents.map((agent) => {
+          const codename = agent.codename || agent.name || agent.id;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => {
+                onSelectAgent(agent.id);
+                setTab("missions");
+              },
+              className: `flex items-center gap-2 rounded-md px-3 py-2 text-left transition-colors ${selectedAgent === agent.id ? "bg-[--cyan]/10 text-[--cyan]" : "hover:bg-white/[0.04]"}`,
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-muted-foreground/40" }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsxs("span", { className: "text-xs font-mono font-medium block", children: [
+                    "@",
+                    codename.toUpperCase()
+                  ] }),
+                  agent.role && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-muted-foreground block", children: agent.role })
+                ] })
+              ]
+            },
+            agent.id
+          );
+        })
+      ] }),
+      tab === "missions" && /* @__PURE__ */ jsx(MissionQueue, { runs, agents, selectedAgent }),
+      tab === "feed" && /* @__PURE__ */ jsx(LiveFeed, { runs, notifications, collapsed: false, onToggleCollapse: () => {
+      } })
+    ] })
+  ] });
+}
+export {
+  MissionControlPage
+};