@invergent/agent-chat-react 2.0.1 → 2.0.7

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 { 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, FolderIcon, FileIcon, ChevronLeftIcon, MinusIcon, SearchIcon, GitBranchIcon, ThumbsUpIcon, ThumbsDownIcon, ActivityIcon, EyeIcon, GlobeIcon, ListTodoIcon, ArrowUpIcon, XCircleIcon, CheckCircle2Icon, Code, CircleCheckIcon, CircleXIcon, SkullIcon, CheckCircleIcon, CircleIcon } from 'lucide-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",
   {
@@ -5698,7 +5678,13 @@ function ChatComposerInner({
   disabled = false,
   disabledReason,
   tokenUsage,
-  onComposerError
+  onComposerError,
+  showBrowser = false,
+  onToggleBrowser,
+  showWorkspace = false,
+  onToggleWorkspace,
+  canShowBrowser = false,
+  canShowWorkspace = false
 }) {
   const { adapter } = useAgentChatAdapterContext();
   const { textInput, attachments } = usePromptInputController();
@@ -6005,6 +5991,28 @@ function ChatComposerInner({
                       }
                     )
                   ] }),
+                  canShowBrowser && onToggleBrowser && /* @__PURE__ */ jsx(
+                    PromptInputButton,
+                    {
+                      "aria-label": showBrowser ? "Hide browser pane" : "Show browser pane",
+                      "aria-pressed": showBrowser,
+                      onClick: onToggleBrowser,
+                      tooltip: showBrowser ? "Hide browser pane" : "Show browser pane",
+                      className: showBrowser ? "bg-accent text-foreground" : void 0,
+                      children: /* @__PURE__ */ jsx(GlobeIcon, { className: "size-4" })
+                    }
+                  ),
+                  canShowWorkspace && onToggleWorkspace && /* @__PURE__ */ jsx(
+                    PromptInputButton,
+                    {
+                      "aria-label": showWorkspace ? "Hide workspace pane" : "Show workspace pane",
+                      "aria-pressed": showWorkspace,
+                      onClick: onToggleWorkspace,
+                      tooltip: showWorkspace ? "Hide workspace pane" : "Show workspace pane",
+                      className: showWorkspace ? "bg-accent text-foreground" : void 0,
+                      children: /* @__PURE__ */ jsx(FolderIcon, { className: "size-4" })
+                    }
+                  ),
                   tokenUsage && tokenUsage.contextWindow > 0 && /* @__PURE__ */ jsxs(
                     Context,
                     {
@@ -7223,7 +7231,13 @@ function ChatThread({
   tokenUsage,
   retryIndicator,
   onRetry,
-  onComposerError
+  onComposerError,
+  showBrowser = false,
+  onToggleBrowser,
+  showWorkspace = false,
+  onToggleWorkspace,
+  canShowBrowser = false,
+  canShowWorkspace = false
 }) {
   const groups = useMemo(() => groupMessages(messages), [messages]);
   const artifactFallbacks = useMemo(() => {
@@ -7340,7 +7354,13 @@ function ChatThread({
           disabled,
           disabledReason,
           tokenUsage,
-          onComposerError
+          onComposerError,
+          showBrowser,
+          onToggleBrowser,
+          showWorkspace,
+          onToggleWorkspace,
+          canShowBrowser,
+          canShowWorkspace
         }
       )
     ] })
@@ -9274,6 +9294,16 @@ function useAgentChatRuntime({
         }));
       }
     }).catch(() => void 0);
+    void adapter.getBrowserState(sessionId).then((browserState) => {
+      if (sessionIdRef.current !== sessionId) return;
+      setState((prev) => ({
+        ...prev,
+        browser: browserState ? {
+          status: browserState.status,
+          controlOwner: browserState.controlOwner ?? null
+        } : null
+      }));
+    }).catch(() => void 0);
     return () => {
       clearReconnectTimer();
       closeStream();
@@ -9518,6 +9548,8 @@ function AgentChat({
 }) {
   const [workspacePath, setWorkspacePath] = useState(null);
   const [mobileView, setMobileView] = useState("chat");
+  const [showBrowser, setShowBrowser] = useState(true);
+  const [showWorkspace, setShowWorkspace] = useState(true);
   const runtime = useAgentChatRuntime({
     adapter,
     agentId,
@@ -9528,7 +9560,12 @@ function AgentChat({
   const effectiveDisabled = disabled || isReadOnlySession;
   const disabledReason = isReadOnlySession ? "Scheduled run is read-only" : void 0;
   const browserState = runtime.state.browser;
-  const hasBrowserPanel = browserState !== null && sessionId;
+  const browserAvailable = browserState !== null && browserState.status !== "closed" && !!sessionId;
+  const browserVisible = browserAvailable && showBrowser;
+  const workspaceAvailable = !!sessionId;
+  const workspaceVisible = workspaceAvailable && showWorkspace;
+  const rightStackVisible = browserVisible || workspaceVisible;
+  const bothPanesVisible = browserVisible && workspaceVisible;
   useEffect(() => {
     onMessagesChange?.(runtime.messages);
   }, [onMessagesChange, runtime.messages]);
@@ -9536,11 +9573,18 @@ function AgentChat({
     (path) => {
       setWorkspacePath(path);
       setMobileView("workspace");
+      setShowWorkspace(true);
       onFileSelect?.(path);
     },
     [onFileSelect]
   );
-  const showMobileToggle = Boolean(sessionId);
+  const handleToggleBrowser = useCallback(() => {
+    setShowBrowser((prev) => !prev);
+  }, []);
+  const handleToggleWorkspace = useCallback(() => {
+    setShowWorkspace((prev) => !prev);
+  }, []);
+  const showMobileToggle = rightStackVisible;
   return /* @__PURE__ */ jsx(
     AgentChatAdapterProvider,
     {
@@ -9558,8 +9602,11 @@ function AgentChat({
             // Phone: flex column, tab toggle on top, then either chat or
             // right stack visible based on `data-mobile-view`.
             "flex min-h-0 flex-1 flex-col overflow-hidden bg-background text-sm text-foreground",
-            // md+: restore desktop two-pane layout.
-            hasBrowserPanel ? "md:relative md:flex-row" : "md:flex-row"
+            // md+: restore desktop two-pane layout when the right stack
+            // is visible. With both panes, absolute positioning lets the
+            // browser/workspace split occupy a fixed width. Without the
+            // right stack, the chat takes the full width.
+            browserVisible ? "md:relative md:flex-row" : "md:flex-row"
           ),
           style: { direction: "ltr", ...RIGHT_STACK_STYLE },
           children: [
@@ -9600,8 +9647,13 @@ function AgentChat({
                   // Phone: full width column, hidden when workspace tab active.
                   "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
                   showMobileToggle && "data-[mobile-view=workspace]:hidden md:flex!",
-                  // md+: restore desktop positioning.
-                  hasBrowserPanel ? "md:absolute md:inset-y-0 md:left-0 md:right-(--right-stack-w,440px) md:flex" : "md:relative md:flex-1"
+                  // md+: positioning depends on whether the browser/workspace
+                  // right stack is laid out. When the browser pane is shown
+                  // we pin a fixed-width column on the right and absolutely
+                  // position the chat panel beside it. Otherwise the chat
+                  // panel just flexes alongside the workspace (or fills the
+                  // space when nothing else is visible).
+                  browserVisible ? "md:absolute md:inset-y-0 md:left-0 md:right-(--right-stack-w,440px) md:flex" : "md:relative md:flex-1"
                 ),
                 children: /* @__PURE__ */ jsx(
                   ChatThread,
@@ -9618,12 +9670,18 @@ function AgentChat({
                     disabledReason,
                     tokenUsage: runtime.tokenUsage,
                     retryIndicator: runtime.retryIndicator,
-                    onComposerError
+                    onComposerError,
+                    showBrowser,
+                    onToggleBrowser: handleToggleBrowser,
+                    showWorkspace,
+                    onToggleWorkspace: handleToggleWorkspace,
+                    canShowBrowser: browserAvailable,
+                    canShowWorkspace: workspaceAvailable
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsxs(
+            rightStackVisible && /* @__PURE__ */ jsxs(
               "div",
               {
                 "data-testid": "right-stack",
@@ -9632,17 +9690,23 @@ function AgentChat({
                   // Phone: full width column, hidden when chat tab active.
                   "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
                   showMobileToggle && "data-[mobile-view=chat]:hidden md:flex!",
-                  // md+: restore desktop positioning. With browser panel the
-                  // right stack is absolutely positioned at the configured
-                  // width; without it the stack flows in the row.
-                  hasBrowserPanel ? "md:absolute md:inset-y-0 md:right-0 md:w-(--right-stack-w,440px) md:flex-none" : "md:relative md:shrink-0 md:flex-none md:w-(--right-stack-w,440px)"
+                  // md+: positioning differs depending on what is inside.
+                  // - browser visible (with or without workspace): absolute
+                  //   right column at the configured width.
+                  // - workspace only: relative shrink-0 column letting
+                  //   WorkspacePanel manage its own width via the resize
+                  //   handle.
+                  browserVisible ? "md:absolute md:inset-y-0 md:right-0 md:w-(--right-stack-w,440px) md:flex-none" : "md:relative md:shrink-0 md:flex-none md:w-auto"
                 ),
                 children: [
-                  hasBrowserPanel && /* @__PURE__ */ jsx(
+                  browserVisible && /* @__PURE__ */ jsx(
                     "div",
                     {
                       "data-testid": "browser-panel",
-                      className: "h-1/2 min-h-0 w-full overflow-hidden border-b border-line",
+                      className: cn(
+                        "min-h-0 w-full overflow-hidden",
+                        bothPanesVisible ? "h-1/2 border-b border-line" : "h-full"
+                      ),
                       children: /* @__PURE__ */ jsx(
                         BrowserPane,
                         {
@@ -9653,11 +9717,11 @@ function AgentChat({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx(
+                  workspaceVisible && /* @__PURE__ */ jsx(
                     "div",
                     {
                       "data-testid": "workspace-panel-frame",
-                      className: hasBrowserPanel ? "h-1/2 min-h-0 w-full overflow-hidden" : "min-h-0 h-full",
+                      className: bothPanesVisible ? "h-1/2 min-h-0 w-full overflow-hidden" : "min-h-0 h-full",
                       children: /* @__PURE__ */ jsx(
                         WorkspacePanel,
                         {
@@ -9667,7 +9731,7 @@ function AgentChat({
                           onSelectedPathChange: setWorkspacePath,
                           refreshSignal: runtime.workspaceRefreshKey,
                           disabled: effectiveDisabled,
-                          fillParent: Boolean(hasBrowserPanel)
+                          fillParent: bothPanesVisible
                         }
                       )
                     }
@@ -10377,42 +10441,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",
@@ -10480,6 +10508,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: [],
@@ -10632,210 +10751,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,
       {
@@ -10893,6 +10955,234 @@ 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;