@invergent/agent-chat-react 2.0.2 → 2.0.8

package/dist/index.js

@@ -1,8 +1,8 @@
 import { cn } from './chunk-QSC4UIVT.js';
-import { createContext, memo, useRef, useEffect, useCallback, useMemo, useState, lazy, useContext, Suspense, Children } from 'react';
+import { createContext, memo, useRef, useEffect, useCallback, useMemo, useState, lazy, useContext, Fragment as Fragment$1, Suspense, Children } from 'react';
 import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, File as File$1, FileImage, FileAudio, FileVideo, FileText, FileCode, FileArchive, FileSpreadsheet, InboxIcon, Loader2, AlertCircle, Pause, Play, Ban, TargetIcon, ChevronRightIcon, CalendarClockIcon, UsersIcon, MessageSquareIcon, ZapIcon, Maximize2Icon, FolderOpenIcon, Loader2Icon, UploadIcon, RefreshCwIcon, AlertCircleIcon, ExternalLinkIcon, ClipboardCheckIcon, ShieldAlertIcon, TimerIcon, CircleDotIcon, XIcon, Trash2Icon, SquareIcon, ArrowDownIcon, RotateCcwIcon, MousePointer2Icon, DownloadIcon, TrashIcon, ImageIcon, FileTextIcon, CheckIcon, CopyIcon, TerminalIcon, SparklesIcon, ClockIcon, PlusIcon, CloudIcon, HardDriveIcon, PaperclipIcon, GlobeIcon, FolderIcon, FileIcon, ChevronLeftIcon, MinusIcon, SearchIcon, GitBranchIcon, ThumbsUpIcon, ThumbsDownIcon, ActivityIcon, EyeIcon, ListTodoIcon, ArrowUpIcon, XCircleIcon, CheckCircle2Icon, Code, CircleCheckIcon, CircleXIcon, SkullIcon, CheckCircleIcon, CircleIcon } from 'lucide-react';
 import { cva } from 'class-variance-authority';
-import { Collapsible as Collapsible$1, Slot, Tooltip as Tooltip$1, Separator as Separator$1, Dialog as Dialog$1, ScrollArea as ScrollArea$1, Popover as Popover$1, Progress as Progress$1, Tabs as Tabs$1 } from 'radix-ui';
+import { Collapsible as Collapsible$1, Slot, Tooltip as Tooltip$1, Progress as Progress$1, Tabs as Tabs$1, Dialog as Dialog$1, ScrollArea as ScrollArea$1, Popover as Popover$1 } from 'radix-ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
 import { cjk } from '@streamdown/cjk';
@@ -597,26 +597,6 @@ var ConversationScrollButton = ({
     }
   );
 };
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Separator$1.Root,
-    {
-      "data-slot": "separator",
-      decorative,
-      orientation,
-      className: cn(
-        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
-        className
-      ),
-      ...props
-    }
-  );
-}
 var Message = ({ className, from, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
@@ -6209,6 +6189,191 @@ function ChatComposerInner({
     }
   );
 }
+var MAX_REASON_LENGTH2 = 500;
+function TurnFeedback({ msg }) {
+  const { adapter, sessionId } = useAgentChatAdapterContext();
+  const [pending, setPending] = useState(
+    null
+  );
+  const [error, setError] = useState(null);
+  const [reasonDraft, setReasonDraft] = useState(null);
+  const llmResponseEventId = msg.llmResponseEventId;
+  const canRate = llmResponseEventId !== void 0 && msg.status === "complete" && sessionId !== null && adapter.submitUserFeedback !== void 0;
+  if (!canRate) return null;
+  const rating = msg.userFeedback?.rating ?? pending;
+  const alreadyRated = msg.userFeedback !== void 0;
+  const submit = async (next, reason) => {
+    if (sessionId === null || llmResponseEventId === void 0 || adapter.submitUserFeedback === void 0) return;
+    setPending(next);
+    setError(null);
+    try {
+      await adapter.submitUserFeedback({
+        sessionId,
+        llmResponseEventId,
+        rating: next,
+        ...reason ? { reason } : {}
+      });
+      setReasonDraft(null);
+    } catch (e) {
+      setPending(null);
+      setError(e instanceof Error ? e.message : "Failed to submit feedback");
+    }
+  };
+  const handleRate = (next) => {
+    if (alreadyRated || pending !== null) return;
+    if (next === "down") {
+      setReasonDraft("");
+      return;
+    }
+    void submit("up");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "mt-1 space-y-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-xs",
+          "aria-label": "Good response",
+          title: alreadyRated && rating === "up" ? "Good response (recorded)" : "Good response",
+          disabled: pending !== null || alreadyRated,
+          onClick: () => handleRate("up"),
+          className: cn(
+            rating === "up" ? "text-foreground" : "text-muted-foreground/60"
+          ),
+          children: /* @__PURE__ */ jsx(ThumbsUpIcon, { className: "size-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-xs",
+          "aria-label": "Poor response",
+          title: alreadyRated && rating === "down" ? "Poor response (recorded)" : "Poor response",
+          disabled: pending !== null || reasonDraft !== null || alreadyRated,
+          onClick: () => handleRate("down"),
+          className: cn(
+            rating === "down" ? "text-foreground" : "text-muted-foreground/60"
+          ),
+          children: /* @__PURE__ */ jsx(ThumbsDownIcon, { className: "size-3.5" })
+        }
+      ),
+      alreadyRated && msg.userFeedback?.reason && /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "text-muted-foreground/70 truncate max-w-xs",
+          title: msg.userFeedback.reason,
+          children: [
+            '\xB7 "',
+            msg.userFeedback.reason,
+            '"'
+          ]
+        }
+      ),
+      error && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: error })
+    ] }),
+    reasonDraft !== null && !alreadyRated && /* @__PURE__ */ jsx(
+      ReasonForm2,
+      {
+        initialValue: reasonDraft,
+        busy: pending !== null,
+        onSubmit: (reason) => void submit("down", reason),
+        onCancel: () => {
+          setReasonDraft(null);
+          setError(null);
+        }
+      }
+    )
+  ] });
+}
+function ReasonForm2({
+  initialValue,
+  busy,
+  onSubmit,
+  onCancel
+}) {
+  const [value, setValue] = useState(initialValue);
+  const trimmed = value.trim();
+  const charsLeft = MAX_REASON_LENGTH2 - value.length;
+  const submit = () => {
+    if (trimmed && !busy) onSubmit(trimmed);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border bg-muted/30 p-2 space-y-1.5", children: [
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        className: "text-xs text-muted-foreground",
+        htmlFor: "turn-feedback-reason",
+        children: "What was wrong with the response?"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        id: "turn-feedback-reason",
+        autoFocus: true,
+        rows: 3,
+        value,
+        maxLength: MAX_REASON_LENGTH2,
+        placeholder: "e.g. wrong answer, missed a constraint, hallucinated a fact\u2026",
+        onChange: (e) => setValue(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            submit();
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            onCancel();
+          }
+        },
+        className: "text-xs min-h-12",
+        disabled: busy
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "text-[10px] tabular-nums",
+            charsLeft < 50 ? "text-amber-500" : "text-muted-foreground/60"
+          ),
+          children: [
+            charsLeft,
+            " characters left"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "xs",
+            onClick: onCancel,
+            disabled: busy,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "default",
+            size: "xs",
+            onClick: submit,
+            disabled: busy || !trimmed,
+            children: busy ? "Sending\u2026" : "Send feedback"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 var MIN_CPS = 40;
 var MAX_CPS = 240;
 var DRAIN_SECONDS = 0.25;
@@ -6859,7 +7024,8 @@ function messageToEntries(msg, isLast, artifactFallbacks) {
       kind: "text",
       key: `${msg.id}-text`,
       content: msg.content,
-      isStreaming
+      isStreaming,
+      msg
     });
   }
   const hasRunningTool = hasToolCalls && msg.toolCalls.some(
@@ -7162,7 +7328,10 @@ function TextEntry({
       /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
       /* @__PURE__ */ jsx(TimelineIndicator, { className: "size-2 border-none bg-foreground/40" })
     ] }),
-    /* @__PURE__ */ jsx(TimelineContent, { children: /* @__PURE__ */ jsx(MessageResponse, { children: content }) })
+    /* @__PURE__ */ jsxs(TimelineContent, { children: [
+      /* @__PURE__ */ jsx(MessageResponse, { children: content }),
+      entry.isFinalTurnText && entry.msg.status === "complete" && /* @__PURE__ */ jsx(TurnFeedback, { msg: entry.msg })
+    ] })
   ] });
 }
 function AssistantGroup({
@@ -7182,6 +7351,13 @@ function AssistantGroup({
   }
   entries = groupBrowserActivityEntries(entries);
   entries = groupWebSearchEntries(entries);
+  for (let i = entries.length - 1; i >= 0; i--) {
+    const entry = entries[i];
+    if (entry?.kind === "text") {
+      entries[i] = { ...entry, isFinalTurnText: true };
+      break;
+    }
+  }
   const isTailGroup = lastGlobalIndex === totalMessages - 1;
   const lastEntry = entries[entries.length - 1];
   const hasRunningTool = entries.some(
@@ -8491,6 +8667,7 @@ var AGENT_CHAT_LISTENED_EVENTS = [
   "expert.result",
   "expert.endorse",
   "expert.override",
+  "user.feedback",
   "artifact.created",
   "artifact.updated",
   "browser.provisioned",
@@ -8649,6 +8826,11 @@ function applyAgentChatEvent(state, event) {
         nextState,
         applyExpertFeedback(nextState.messages, event.type, event.data)
       );
+    case "user.feedback":
+      return withMessages(
+        nextState,
+        applyUserFeedback(nextState.messages, event.data)
+      );
     case "clarify.response":
       return withMessages(
         nextState,
@@ -8846,17 +9028,23 @@ function applyLlmResponse(state, event) {
         ...current,
         reasoning: (current.reasoning ?? "") + current.content,
         content: "",
-        status: "streaming"
+        status: "streaming",
+        llmResponseEventId: event.eventId
       };
     } else {
-      messages[idx] = { ...current, status: "complete" };
+      messages[idx] = {
+        ...current,
+        status: "complete",
+        llmResponseEventId: event.eventId
+      };
     }
   } else if (matchesExistingToolTurn && idx >= 0) {
     const current = messages[idx];
     messages[idx] = {
       ...current,
       reasoning: responseContent ? appendText(current.reasoning, responseContent) : current.reasoning,
-      status: "streaming"
+      status: "streaming",
+      llmResponseEventId: event.eventId
     };
   } else if (prevHasTools || !prevAssistant || hasUserAfter) {
     messages.push({
@@ -8865,7 +9053,8 @@ function applyLlmResponse(state, event) {
       content: hasToolCalls ? "" : responseContent,
       reasoning: hasToolCalls && responseContent ? responseContent : void 0,
       createdAt: /* @__PURE__ */ new Date(),
-      status: hasToolCalls ? "streaming" : "complete"
+      status: hasToolCalls ? "streaming" : "complete",
+      llmResponseEventId: event.eventId
     });
   } else {
     const current = messages[idx];
@@ -8873,13 +9062,15 @@ function applyLlmResponse(state, event) {
       messages[idx] = {
         ...current,
         reasoning: (current.reasoning ?? "") + responseContent,
-        status: "streaming"
+        status: "streaming",
+        llmResponseEventId: event.eventId
       };
     } else {
       messages[idx] = {
         ...current,
         content: responseContent || current.content,
-        status: hasToolCalls ? "streaming" : "complete"
+        status: hasToolCalls ? "streaming" : "complete",
+        llmResponseEventId: event.eventId
       };
     }
   }
@@ -9092,6 +9283,26 @@ function applyExpertFeedback(messages, type, data) {
   }
   return messages;
 }
+function applyUserFeedback(messages, data) {
+  const source = typeof data.source === "string" ? data.source : "user";
+  if (source !== "user") return messages;
+  const targetEventId = typeof data.target_event_id === "number" ? data.target_event_id : void 0;
+  if (targetEventId == null) return messages;
+  const rating = data.rating === "down" ? "down" : "up";
+  const reason = typeof data.reason === "string" ? data.reason : void 0;
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const msg = messages[i];
+    if (msg?.role !== "assistant") continue;
+    if (msg.llmResponseEventId !== targetEventId) continue;
+    if (msg.userFeedback?.rating === rating && msg.userFeedback?.reason === reason) {
+      return messages;
+    }
+    const next = [...messages];
+    next[i] = { ...msg, userFeedback: { rating, reason } };
+    return next;
+  }
+  return messages;
+}
 function applyClarifyResponse(messages, data) {
   const targetToolId = stringValue2(data.tool_call_id);
   const responses = Array.isArray(data.responses) ? data.responses : void 0;
@@ -10461,42 +10672,6 @@ function Card({
     }
   );
 }
-function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-header",
-      className: cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-none px-8 group-data-[size=sm]/card:px-5 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-8 group-data-[size=sm]/card:[.border-b]:pb-5",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-title",
-      className: cn(
-        "font-heading text-lg font-semibold tracking-wider uppercase",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-description",
-      className: cn("text-sm leading-relaxed text-muted-foreground", className),
-      ...props
-    }
-  );
-}
 function CardContent({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -10564,6 +10739,97 @@ var MISSION_WORKER_KIND_TOOLTIP = {
   worker: "Async one-shot session spawned by spawn_worker. Durable session, no retry/DAG.",
   delegation: "Sync fork-join child spawned by delegate_task. Coordinator's wake blocked until it finished."
 };
+function CountBadge({ n }) {
+  if (n === 0) return null;
+  return /* @__PURE__ */ jsx("span", { className: "ml-1 rounded bg-muted px-1 py-px text-[9px] text-muted-foreground/70", children: n });
+}
+function firstLine3(text, max = 140) {
+  const trimmed = text.replace(/\s+/g, " ").trim();
+  if (trimmed.length <= max) return trimmed;
+  return `${trimmed.slice(0, max).trimEnd()}\u2026`;
+}
+var ACTIVITY_KIND_TONE = {
+  "mission.defined": "bg-primary/10 text-primary border-primary/30",
+  "mission.paused": "bg-amber-500/10 text-amber-600 border-amber-500/30",
+  "mission.cancelled": "bg-destructive/10 text-destructive border-destructive/30",
+  "task.spawned": "bg-foreground/5 text-foreground/80 border-foreground/20",
+  "task.completed": "bg-emerald-500/10 text-emerald-600 border-emerald-500/30",
+  "task.failed": "bg-destructive/10 text-destructive border-destructive/30",
+  "task.cancelled": "bg-muted text-muted-foreground border-border",
+  "worker.latest": "bg-foreground/5 text-foreground/70 border-foreground/15",
+  "evaluator.verdict": "bg-primary/10 text-primary border-primary/30"
+};
+function buildMissionActivity(mission, tasks, workers) {
+  const entries = [];
+  entries.push({
+    at: mission.createdAt,
+    kind: "mission.defined",
+    label: "Mission defined",
+    detail: mission.description
+  });
+  if (mission.status === "paused" && mission.pausedReason) {
+    entries.push({
+      at: mission.updatedAt,
+      kind: "mission.paused",
+      label: "Paused",
+      detail: mission.pausedReason
+    });
+  }
+  if (mission.status === "cancelled" && mission.cancelledReason) {
+    entries.push({
+      at: mission.updatedAt,
+      kind: "mission.cancelled",
+      label: "Cancelled",
+      detail: mission.cancelledReason
+    });
+  }
+  for (const task of tasks) {
+    if (task.createdAt) {
+      entries.push({
+        at: task.createdAt,
+        kind: "task.spawned",
+        label: `Spawn \xB7 ${task.agentDefName ?? "task"}`,
+        detail: firstLine3(task.goal, 200)
+      });
+    }
+    if (task.completedAt) {
+      const kind = task.status === "done" ? "task.completed" : task.status === "failed" ? "task.failed" : task.status === "cancelled" ? "task.cancelled" : "task.completed";
+      entries.push({
+        at: task.completedAt,
+        kind,
+        label: `${task.status} \xB7 ${task.agentDefName ?? "task"}`,
+        detail: task.result ? firstLine3(task.result, 200) : void 0
+      });
+    }
+  }
+  for (const worker of workers) {
+    if (worker.latestEventAt && worker.latestEventKind) {
+      entries.push({
+        at: worker.latestEventAt,
+        kind: "worker.latest",
+        label: `${worker.kind} \xB7 ${worker.latestEventKind}`,
+        detail: deriveMissionWorkerActivityLabel(worker)
+      });
+    }
+  }
+  if (mission.lastEvaluationAt && mission.lastEvaluationResult) {
+    entries.push({
+      at: mission.lastEvaluationAt,
+      kind: "evaluator.verdict",
+      label: `Verdict \xB7 ${mission.lastEvaluationResult}`,
+      detail: mission.lastEvaluationFeedback ?? void 0
+    });
+  }
+  entries.sort((a, b) => b.at.localeCompare(a.at));
+  return entries;
+}
+function formatTimestamp(iso) {
+  try {
+    return new Date(iso).toLocaleTimeString();
+  } catch {
+    return iso;
+  }
+}
 var INITIAL_STATE = {
   mission: null,
   tasks: [],
@@ -10716,210 +10982,153 @@ function MissionDashboard({
       setBusy(false);
     }
   };
-  const statusVariant = mission.status === "satisfied" ? "default" : mission.status === "failed" || mission.status === "cancelled" ? "destructive" : "secondary";
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4 sm:gap-6 sm:p-6", children: [
-    /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-stretch gap-4 sm:flex-row sm:items-start sm:justify-between", children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-1 min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx(CardTitle, { className: "wrap-break-word -uppercase text-sm", children: mission.description }),
-          /* @__PURE__ */ jsxs(CardDescription, { className: "wrap-break-word text-foreground/70", children: [
-            "Rubric: ",
-            mission.rubric
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 pt-2 text-xs text-foreground/70", children: [
-            /* @__PURE__ */ jsx(Badge, { variant: statusVariant, className: "font-mono text-foreground", children: mission.status }),
-            /* @__PURE__ */ jsxs("span", { className: "font-mono text-primary", children: [
-              "Iteration ",
-              mission.iteration,
-              "/",
-              mission.maxIterations
-            ] }),
-            mission.lastEvaluationResult ? /* @__PURE__ */ jsxs("span", { children: [
-              "Last verdict:",
-              " ",
-              /* @__PURE__ */ jsx("span", { className: "font-mono text-primary", children: mission.lastEvaluationResult })
-            ] }) : null
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: ACTIVE_MISSION_STATUSES.has(mission.status) ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          mission.status === "active" ? /* @__PURE__ */ jsxs(
-            Button,
-            {
-              size: "sm",
-              variant: "outline",
-              onClick: doPause,
-              disabled: busy,
-              children: [
-                /* @__PURE__ */ jsx(Pause, { className: "size-4" }),
-                " Pause"
-              ]
-            }
-          ) : /* @__PURE__ */ jsxs(
-            Button,
+  const statusTone = mission.status === "satisfied" ? "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400" : mission.status === "failed" || mission.status === "cancelled" ? "border-destructive/40 bg-destructive/10 text-destructive" : mission.status === "paused" ? "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-400" : "border-primary/40 bg-primary/10 text-primary";
+  const activity = buildMissionActivity(mission, state.tasks, state.workers);
+  const isActive = ACTIVE_MISSION_STATUSES.has(mission.status);
+  const iterationPct = mission.maxIterations > 0 ? Math.min(100, mission.iteration / mission.maxIterations * 100) : 0;
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-1 flex-col overflow-hidden bg-muted/30", children: [
+    /* @__PURE__ */ jsx("div", { className: "shrink-0 px-5 pt-5 sm:px-6 sm:pt-6", children: /* @__PURE__ */ jsx(Card, { className: "border-border/60 bg-card shadow-sm", children: /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4 p-5 sm:p-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsx(
+            "span",
             {
-              size: "sm",
-              variant: "outline",
-              onClick: doResume,
-              disabled: busy,
-              children: [
-                /* @__PURE__ */ jsx(Play, { className: "size-4" }),
-                " Resume"
-              ]
+              className: `rounded-md border px-2 py-0.5 font-mono text-[10px] font-semibold uppercase tracking-wider ${statusTone}`,
+              children: mission.status
             }
           ),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-display text-2xl font-bold tracking-tight tabular-nums text-foreground", children: mission.iteration }),
+            /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground/70", children: [
+              "/ ",
+              mission.maxIterations
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] uppercase tracking-wider text-muted-foreground/60", children: "iterations" })
+          ] }),
+          mission.lastEvaluationResult ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[11px] text-muted-foreground/70", children: [
+            /* @__PURE__ */ jsx("span", { className: "opacity-70", children: "last verdict" }),
+            /* @__PURE__ */ jsx("span", { className: "rounded border border-primary/30 bg-primary/10 px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wider text-primary", children: mission.lastEvaluationResult })
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [
+          isActive ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            mission.status === "active" ? /* @__PURE__ */ jsxs(
+              Button,
+              {
+                size: "sm",
+                variant: "outline",
+                onClick: doPause,
+                disabled: busy,
+                children: [
+                  /* @__PURE__ */ jsx(Pause, { className: "size-4" }),
+                  " Pause"
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs(
+              Button,
+              {
+                size: "sm",
+                variant: "outline",
+                onClick: doResume,
+                disabled: busy,
+                children: [
+                  /* @__PURE__ */ jsx(Play, { className: "size-4" }),
+                  " Resume"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                size: "sm",
+                variant: "destructive",
+                onClick: () => {
+                  setCancelCascade(false);
+                  setCancelOpen(true);
+                },
+                disabled: busy,
+                children: [
+                  /* @__PURE__ */ jsx(Ban, { className: "size-4" }),
+                  " Cancel"
+                ]
+              }
+            )
+          ] }) : onNavigateBack ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: onNavigateBack, children: "Back" }) : null,
+          /* @__PURE__ */ jsx(
             Button,
             {
+              variant: "ghost",
               size: "sm",
-              variant: "destructive",
-              onClick: () => {
-                setCancelCascade(false);
-                setCancelOpen(true);
-              },
+              onClick: () => void refresh(),
               disabled: busy,
-              children: [
-                /* @__PURE__ */ jsx(Ban, { className: "size-4" }),
-                " Cancel"
-              ]
+              "aria-label": "Refresh",
+              title: "Refresh",
+              children: /* @__PURE__ */ jsx(RefreshCw, { className: "size-4" })
             }
           )
-        ] }) : onNavigateBack ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: onNavigateBack, children: "Back" }) : null })
-      ] }) }),
-      mission.lastEvaluationFeedback ? /* @__PURE__ */ jsxs(CardContent, { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-widest text-foreground/70", children: "Evaluator feedback" }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm whitespace-pre-wrap wrap-break-word", children: mission.lastEvaluationFeedback }),
-        mission.lastEvaluationExplanation ? /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground/70 whitespace-pre-wrap wrap-break-word", children: mission.lastEvaluationExplanation }) : null
-      ] }) : null
-    ] }),
-    /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { children: [
-        "Tasks (",
-        state.tasks.length,
-        ")"
-      ] }) }),
-      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
-        ["in_flight", "blocked", "done", "failed_or_cancelled"].map((bucket) => {
-          const rows = taskBuckets[bucket];
-          if (rows.length === 0) return null;
-          const heading = {
-            in_flight: "In flight",
-            blocked: "Blocked",
-            done: "Done",
-            failed_or_cancelled: "Failed / cancelled"
-          }[bucket];
-          return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "text-xs font-semibold uppercase tracking-widest text-foreground/70", children: [
-              heading,
-              " (",
-              rows.length,
-              ")"
-            ] }),
-            /* @__PURE__ */ jsx("ul", { className: "space-y-1.5", children: rows.map((task) => /* @__PURE__ */ jsx(
-              "li",
-              {
-                className: "flex items-start justify-between gap-3 rounded border border-border/40 px-3 py-2 text-sm",
-                children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                    task.agentDefName ? /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground/70", children: task.agentDefName }) : null,
-                    task.attemptCount > 1 ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-foreground/70", children: [
-                      "attempt ",
-                      task.attemptCount,
-                      "/",
-                      task.maxAttempts
-                    ] }) : null
-                  ] }),
-                  /* @__PURE__ */ jsx("div", { className: "text-sm wrap-break-word", children: task.goal }),
-                  task.parentIds.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "text-xs text-foreground/70", children: [
-                    "after:",
-                    " ",
-                    task.parentIds.map((p) => p.slice(0, 8)).join(", ")
-                  ] }) : null,
-                  task.result ? /* @__PURE__ */ jsx("pre", { className: "text-xs whitespace-pre-wrap bg-muted/30 rounded px-2 py-1 max-h-32 overflow-auto", children: task.result }) : null,
-                  task.resultMetadata ? /* @__PURE__ */ jsx("pre", { className: "text-xs whitespace-pre-wrap bg-muted/30 rounded px-2 py-1 max-h-32 overflow-auto", children: JSON.stringify(task.resultMetadata, null, 2) }) : null
-                ] })
-              },
-              task.id
-            )) })
-          ] }, bucket);
-        }),
-        state.tasks.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-sm text-foreground/70", children: "No tasks spawned yet." }) : null
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { children: [
-        "Live workers (",
-        state.workers.length,
-        ")"
-      ] }) }),
-      /* @__PURE__ */ jsx(CardContent, { children: state.workers.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-sm text-foreground/70", children: "No workers attached to this mission right now." }) : /* @__PURE__ */ jsx("ul", { className: "space-y-1.5", children: state.workers.map((w) => {
-        const onTranscriptClick = (e) => {
-          if (onOpenTranscript) {
-            e.preventDefault();
-            onOpenTranscript(w.workerSessionId);
-          }
-        };
-        return /* @__PURE__ */ jsxs(
-          "li",
-          {
-            className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between rounded border border-border/40 px-3 py-2 text-sm",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(
-                    Badge,
-                    {
-                      variant: "outline",
-                      className: MISSION_WORKER_KIND_BADGE_CLASS[w.kind],
-                      title: MISSION_WORKER_KIND_TOOLTIP[w.kind],
-                      children: w.kind
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(Badge, { className: "text-foreground/70", children: w.kind === "task" ? w.taskStatus ?? "\u2014" : w.sessionStatus }),
-                  w.agentDefName ? /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground/70", children: w.agentDefName }) : null
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "text-sm wrap-break-word", children: deriveMissionWorkerActivityLabel(w) }),
-                w.latestEventAt ? /* @__PURE__ */ jsx("div", { className: "text-xs text-foreground/70", children: new Date(w.latestEventAt).toLocaleTimeString() }) : null
-              ] }),
-              /* @__PURE__ */ jsx(
-                "a",
-                {
-                  href: w.transcriptUrl,
-                  target: "_blank",
-                  rel: "noreferrer",
-                  onClick: onTranscriptClick,
-                  className: "text-xs text-primary hover:underline self-start",
-                  children: "View session"
-                }
-              )
-            ]
-          },
-          w.workerSessionId
-        );
-      }) }) })
-    ] }),
-    /* @__PURE__ */ jsx(Separator, {}),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center text-xs text-foreground/70", children: [
-      /* @__PURE__ */ jsxs("span", { children: [
-        "Auto-refresh every ",
-        pollIntervalMs / 1e3,
-        "s while mission is active."
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs(
-        Button,
+      /* @__PURE__ */ jsx(
+        Progress,
         {
-          variant: "ghost",
-          size: "sm",
-          onClick: () => {
-            void refresh();
-          },
-          disabled: busy,
-          children: [
-            /* @__PURE__ */ jsx(RefreshCw, { className: "size-4" }),
-            " Refresh"
-          ]
+          value: iterationPct,
+          className: `h-1 ${isActive ? "" : "opacity-40"}`
         }
-      )
-    ] }),
+      ),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("h1", { className: "line-clamp-4 cursor-default font-display text-lg font-semibold leading-snug text-foreground wrap-break-word", children: mission.description }) }),
+        mission.description.length > 240 ? /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-lg", side: "bottom", children: /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-xs", children: mission.description }) }) : null
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border/60 bg-muted/40 px-3 py-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-0.5 font-mono text-[9px] uppercase tracking-widest text-muted-foreground/70", children: "Rubric" }),
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("p", { className: "line-clamp-3 cursor-default text-sm leading-relaxed text-foreground/90 wrap-break-word", children: mission.rubric }) }),
+          mission.rubric.length > 200 ? /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-lg", side: "bottom", children: /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-xs", children: mission.rubric }) }) : null
+        ] })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        defaultValue: "activity",
+        className: "mt-5 flex flex-1 flex-col overflow-hidden sm:mt-6",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-border bg-background px-5 sm:px-6", children: /* @__PURE__ */ jsxs(TabsList, { variant: "line", children: [
+            /* @__PURE__ */ jsxs(TabsTrigger, { value: "activity", children: [
+              "Activity",
+              /* @__PURE__ */ jsx(CountBadge, { n: activity.length })
+            ] }),
+            /* @__PURE__ */ jsxs(TabsTrigger, { value: "tasks", children: [
+              "Tasks",
+              /* @__PURE__ */ jsx(CountBadge, { n: state.tasks.length })
+            ] }),
+            /* @__PURE__ */ jsxs(TabsTrigger, { value: "workers", children: [
+              "Workers",
+              /* @__PURE__ */ jsx(CountBadge, { n: state.workers.length })
+            ] }),
+            /* @__PURE__ */ jsx(TabsTrigger, { value: "metadata", children: "Metadata" })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto bg-background px-5 py-4 sm:px-6", children: [
+            /* @__PURE__ */ jsx(TabsContent, { value: "activity", className: "mt-0", children: /* @__PURE__ */ jsx(ActivityTimeline, { entries: activity }) }),
+            /* @__PURE__ */ jsx(TabsContent, { value: "tasks", className: "mt-0", children: /* @__PURE__ */ jsx(
+              TasksList,
+              {
+                taskBuckets,
+                totalTasks: state.tasks.length
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TabsContent, { value: "workers", className: "mt-0", children: /* @__PURE__ */ jsx(
+              WorkersList,
+              {
+                workers: state.workers,
+                onOpenTranscript
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TabsContent, { value: "metadata", className: "mt-0", children: /* @__PURE__ */ jsx(MetadataPane, { mission }) })
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(
       Dialog,
       {
@@ -10977,10 +11186,237 @@ function MissionDashboard({
         ] })
       }
     )
+  ] }) });
+}
+function ActivityTimeline({ entries }) {
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-sm text-muted-foreground/60", children: "No mission activity yet." });
+  }
+  return /* @__PURE__ */ jsx("ol", { className: "space-y-1", children: entries.map((e, i) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "flex items-start gap-3 rounded px-2 py-1.5 text-sm hover:bg-muted/30",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "w-20 shrink-0 font-mono text-[10px] text-muted-foreground/60", children: formatTimestamp(e.at) }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `shrink-0 rounded border px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-wide ${ACTIVITY_KIND_TONE[e.kind]}`,
+            children: e.label
+          }
+        ),
+        e.detail ? /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-foreground/80", children: e.detail }) : null
+      ]
+    },
+    `${e.kind}-${e.at}-${i}`
+  )) });
+}
+function TaskRow({ task }) {
+  const [open, setOpen] = useState(false);
+  const goalPreview = firstLine3(task.goal, 160);
+  const hasMore = task.goal.length > 160 || Boolean(task.result) || Boolean(task.resultMetadata);
+  const statusTone = task.status === "done" ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600" : task.status === "failed" ? "border-destructive/30 bg-destructive/10 text-destructive" : task.status === "cancelled" ? "border-border bg-muted text-muted-foreground" : task.status === "running" ? "border-primary/30 bg-primary/10 text-primary" : "border-foreground/20 bg-foreground/5 text-foreground/70";
+  return /* @__PURE__ */ jsx(Collapsible, { open, onOpenChange: setOpen, asChild: true, children: /* @__PURE__ */ jsxs("li", { className: "rounded border border-border/40 text-sm", children: [
+    /* @__PURE__ */ jsx(
+      CollapsibleTrigger,
+      {
+        asChild: true,
+        disabled: !hasMore,
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-start gap-3 px-3 py-2 text-left hover:bg-muted/30 disabled:hover:bg-transparent",
+            children: [
+              /* @__PURE__ */ jsx(
+                ChevronRight,
+                {
+                  className: `mt-0.5 size-3.5 shrink-0 text-muted-foreground/60 transition-transform ${open ? "rotate-90" : ""} ${hasMore ? "" : "opacity-0"}`
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `shrink-0 rounded border px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-wide ${statusTone}`,
+                  children: task.status
+                }
+              ),
+              task.agentDefName ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground/70", children: task.agentDefName }) : null,
+              task.attemptCount > 1 ? /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-[10px] text-muted-foreground/60", children: [
+                "(",
+                task.attemptCount,
+                "/",
+                task.maxAttempts,
+                ")"
+              ] }) : null,
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-foreground/80", children: goalPreview })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(CollapsibleContent, { className: "border-t border-border/40 px-3 py-2 text-xs", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-1 font-mono text-[9px] uppercase tracking-wide text-muted-foreground/60", children: "Goal" }),
+        /* @__PURE__ */ jsx("pre", { className: "max-h-64 overflow-auto whitespace-pre-wrap rounded bg-muted/30 px-2 py-1.5 text-[11px] text-foreground/90", children: task.goal })
+      ] }),
+      task.parentIds.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mb-2 text-[10px] text-muted-foreground/70", children: [
+        "after: ",
+        task.parentIds.map((p) => p.slice(0, 8)).join(", ")
+      ] }) : null,
+      task.result ? /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-1 font-mono text-[9px] uppercase tracking-wide text-muted-foreground/60", children: "Result" }),
+        /* @__PURE__ */ jsx("pre", { className: "max-h-64 overflow-auto whitespace-pre-wrap rounded bg-muted/30 px-2 py-1.5 text-[11px] text-foreground/90", children: task.result })
+      ] }) : null,
+      task.resultMetadata ? /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-1 font-mono text-[9px] uppercase tracking-wide text-muted-foreground/60", children: "Result metadata" }),
+        /* @__PURE__ */ jsx("pre", { className: "max-h-64 overflow-auto whitespace-pre-wrap rounded bg-muted/30 px-2 py-1.5 text-[11px] text-foreground/90", children: JSON.stringify(task.resultMetadata, null, 2) })
+      ] }) : null
+    ] })
+  ] }) });
+}
+function TasksList({
+  taskBuckets,
+  totalTasks
+}) {
+  if (totalTasks === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-sm text-muted-foreground/60", children: "No tasks spawned yet." });
+  }
+  const headings = {
+    in_flight: "In flight",
+    blocked: "Blocked",
+    done: "Done",
+    failed_or_cancelled: "Failed / cancelled"
+  };
+  return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Object.keys(headings).map((bucket) => {
+    const rows = taskBuckets[bucket];
+    if (rows.length === 0) return null;
+    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "font-mono text-[10px] uppercase tracking-widest text-muted-foreground/70", children: [
+        headings[bucket],
+        " (",
+        rows.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: rows.map((task) => /* @__PURE__ */ jsx(TaskRow, { task }, task.id)) })
+    ] }, bucket);
+  }) });
+}
+function WorkersList({
+  workers,
+  onOpenTranscript
+}) {
+  if (workers.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-sm text-muted-foreground/60", children: "No workers attached to this mission right now." });
+  }
+  return /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: workers.map((w) => {
+    const onTranscriptClick = (e) => {
+      if (onOpenTranscript) {
+        e.preventDefault();
+        onOpenTranscript(w.workerSessionId);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "flex flex-col gap-2 rounded border border-border/40 px-3 py-2 text-sm sm:flex-row sm:items-start sm:justify-between",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Badge,
+                {
+                  variant: "outline",
+                  className: MISSION_WORKER_KIND_BADGE_CLASS[w.kind],
+                  title: MISSION_WORKER_KIND_TOOLTIP[w.kind],
+                  children: w.kind
+                }
+              ),
+              /* @__PURE__ */ jsx(Badge, { className: "text-foreground/70", children: w.kind === "task" ? w.taskStatus ?? "\u2014" : w.sessionStatus }),
+              w.agentDefName ? /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground/70", children: w.agentDefName }) : null,
+              w.latestEventAt ? /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] text-muted-foreground/60", children: formatTimestamp(w.latestEventAt) }) : null
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "truncate text-sm text-foreground/80", children: deriveMissionWorkerActivityLabel(w) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: w.transcriptUrl,
+              target: "_blank",
+              rel: "noreferrer",
+              onClick: onTranscriptClick,
+              className: "self-start text-xs text-primary hover:underline",
+              children: "View session"
+            }
+          )
+        ]
+      },
+      w.workerSessionId
+    );
+  }) });
+}
+function MetadataPane({ mission }) {
+  const rows = [];
+  rows.push({
+    label: "Mission ID",
+    value: /* @__PURE__ */ jsx("code", { className: "text-[11px]", children: mission.id })
+  });
+  rows.push({
+    label: "Session ID",
+    value: /* @__PURE__ */ jsx("code", { className: "text-[11px]", children: mission.sessionId })
+  });
+  rows.push({
+    label: "Agent ID",
+    value: /* @__PURE__ */ jsx("code", { className: "text-[11px]", children: mission.agentId })
+  });
+  rows.push({ label: "Status", value: mission.status });
+  rows.push({
+    label: "Iteration",
+    value: `${mission.iteration} / ${mission.maxIterations}`
+  });
+  rows.push({
+    label: "Owner",
+    value: mission.userId ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      "user ",
+      /* @__PURE__ */ jsx("code", { className: "text-[11px]", children: mission.userId })
+    ] }) : mission.serviceAccountId ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      "service account ",
+      /* @__PURE__ */ jsx("code", { className: "text-[11px]", children: mission.serviceAccountId })
+    ] }) : "\u2014"
+  });
+  rows.push({
+    label: "Created",
+    value: /* @__PURE__ */ jsx("span", { className: "font-mono text-[11px]", children: new Date(mission.createdAt).toLocaleString() })
+  });
+  rows.push({
+    label: "Updated",
+    value: /* @__PURE__ */ jsx("span", { className: "font-mono text-[11px]", children: new Date(mission.updatedAt).toLocaleString() })
+  });
+  if (mission.pausedReason) {
+    rows.push({ label: "Paused reason", value: mission.pausedReason });
+  }
+  if (mission.cancelledReason) {
+    rows.push({ label: "Cancelled reason", value: mission.cancelledReason });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    mission.lastEvaluationResult ? /* @__PURE__ */ jsxs("section", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "font-mono text-[10px] uppercase tracking-widest text-muted-foreground/70", children: [
+        "Last verdict \u2014 ",
+        mission.lastEvaluationResult
+      ] }),
+      mission.lastEvaluationFeedback ? /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-sm text-foreground/90", children: mission.lastEvaluationFeedback }) : null,
+      mission.lastEvaluationExplanation ? /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-xs text-muted-foreground/70", children: mission.lastEvaluationExplanation }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-2 font-mono text-[10px] uppercase tracking-widest text-muted-foreground/70", children: "Identifiers" }),
+      /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1 text-xs", children: rows.map((r) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground/70", children: r.label }),
+        /* @__PURE__ */ jsx("dd", { className: "break-all text-foreground/90", children: r.value })
+      ] }, r.label)) })
+    ] })
   ] });
 }
 var DEFAULT_POLL_INTERVAL_MS2 = 3e4;
-var DEFAULT_STATUS = "active,paused";
 function fingerprint(items) {
   return items.map(
     (m) => `${m.id}:${m.status}:${m.iteration}:${m.lastEvaluationResult ?? ""}:${m.lastEvaluationAt ?? ""}:${m.pausedReason ?? ""}:${m.updatedAt}`
@@ -11106,7 +11542,7 @@ function MissionsPanel({
   adapter,
   agentId,
   title = "Missions",
-  status = DEFAULT_STATUS,
+  status,
   hideHeader = false,
   pollIntervalMs = DEFAULT_POLL_INTERVAL_MS2,
   onMissionSelect,