@synergenius/flow-weaver-pack-weaver 0.9.62 → 0.9.78

package/dist/ui/task-detail-view.js

@@ -296,13 +296,19 @@ var {
   Tag,
   Badge,
   Icon,
+  IconButton,
   TaskBlock,
   Button,
+  Card,
+  Chip,
+  Checkbox,
+  Table,
+  Tabs,
+  EmptyState,
   toast,
   usePackWorkspace,
   useEventStream
 } = require("@fw/plugin-ui-kit");
-var { styled } = require("@fw/plugin-theme");
 var statusToIcon = {
   "pending": "pending",
   "in-progress": "running",
@@ -319,76 +325,64 @@ var statusToLabel = {
   "blocked": "Blocked",
   "cancelled": "Cancelled"
 };
-var priorityLabel = (p) => p >= 3 ? "High" : p === 2 ? "Medium" : p === 1 ? "Low" : "None";
-var Container = styled.div({
-  display: "flex",
-  flexDirection: "column",
-  width: "100%",
-  height: "100%",
-  overflow: "hidden"
-});
-var Header = styled.div({
+var headerStyle = {
   padding: "12px 16px",
-  borderBottom: "1px solid $color-border-default",
-  display: "flex",
-  flexDirection: "column",
-  gap: "8px",
+  borderBottom: "1px solid var(--color-border-default)",
   flexShrink: 0
-});
-var HeaderTopRow = styled.div({
-  display: "flex",
-  alignItems: "center",
-  gap: "8px"
-});
-var HeaderMeta = styled.div({
-  display: "flex",
-  alignItems: "center",
-  gap: "8px",
-  flexWrap: "wrap"
-});
-var Section = styled.div({
-  padding: "12px 16px",
-  borderBottom: "1px solid $color-border-default"
-});
-var SectionTitle = styled.div({
-  marginBottom: "8px"
-});
-var FileList = styled.div({
-  display: "flex",
-  flexDirection: "column",
-  gap: "2px"
-});
-var FileItem = styled.div({
+};
+var fileItemStyle = {
   fontFamily: "monospace",
   fontSize: "12px",
-  color: "$color-text-mid",
+  color: "var(--color-text-mid)",
   padding: "2px 4px",
-  borderRadius: "4px",
-  "&:hover": { backgroundColor: "$color-surface-elevated" }
-});
-var NotesBlock = styled.div({
-  whiteSpace: "pre-wrap",
-  fontSize: "13px",
-  color: "$color-text-mid",
-  lineHeight: 1.5,
-  padding: "4px 0"
-});
-var SubtaskRow = styled.div({
-  display: "flex",
-  alignItems: "center",
-  gap: "8px",
+  borderRadius: "4px"
+};
+var fileItemHoverStyle = {
+  ...fileItemStyle,
+  backgroundColor: "var(--color-surface-elevated)"
+};
+var subtaskRowStyle = {
   padding: "6px 8px",
   cursor: "pointer",
-  borderRadius: "6px",
-  "&:hover": { backgroundColor: "$color-surface-elevated" }
-});
-var SubtaskTitle = styled.div({
-  flex: 1,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  minWidth: 0
-});
+  borderRadius: "6px"
+};
+var subtaskRowHoverStyle = {
+  ...subtaskRowStyle,
+  backgroundColor: "var(--color-surface-elevated)"
+};
+function SubtaskRowItem({ sub, onBack }) {
+  const [hovered, setHovered] = useState2(false);
+  return React2.createElement(
+    Flex,
+    {
+      variant: "row-center-start-nowrap-8",
+      style: hovered ? subtaskRowHoverStyle : subtaskRowStyle,
+      onClick: () => onBack(),
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false)
+    },
+    React2.createElement(StatusIcon, {
+      status: statusToIcon[sub.status] || "pending",
+      size: "sm"
+    }),
+    React2.createElement(
+      Flex,
+      {
+        variant: "row-center-start-nowrap-0",
+        style: { flex: 1, minWidth: 0 }
+      },
+      React2.createElement(Typography, { variant: "caption-regular", truncate: true }, sub.title)
+    ),
+    sub.assignedProfile && React2.createElement(Tag, {
+      size: "small",
+      color: "info"
+    }, sub.assignedProfile),
+    React2.createElement(Typography, {
+      variant: "caption-regular",
+      color: "color-text-subtle"
+    }, `#${sub.attempt}`)
+  );
+}
 function TaskDetailView({ taskId, onBack }) {
   const ctx = usePackWorkspace();
   const { callTool } = ctx;
@@ -399,12 +393,16 @@ function TaskDetailView({ taskId, onBack }) {
   const [loading, setLoading] = useState2(true);
   const fetchTask = useCallback(async () => {
     try {
-      const data = await callTool("fw_weaver_task_get", { id: taskId });
+      const raw = await callTool("fw_weaver_task_get", { id: taskId });
+      const data = typeof raw === "string" ? JSON.parse(raw) : raw;
       if (!data) return;
-      const t = data;
+      const t = data.task ?? data;
       setTask(t);
-      if (t.isParent) {
-        const listData = await callTool("fw_weaver_task_list", { parentId: taskId });
+      if (data.subtasks && Array.isArray(data.subtasks)) {
+        setSubtasks(data.subtasks);
+      } else if (t.isParent) {
+        const listRaw = await callTool("fw_weaver_task_list", { parentId: taskId });
+        const listData = typeof listRaw === "string" ? JSON.parse(listRaw) : listRaw;
         if (Array.isArray(listData)) {
           setSubtasks(listData);
         }
@@ -414,7 +412,8 @@ function TaskDetailView({ taskId, onBack }) {
   }, [callTool, taskId]);
   const fetchHistory = useCallback(async () => {
     try {
-      const data = await callTool("fw_weaver_history", { taskId });
+      const raw = await callTool("fw_weaver_history", { taskId });
+      const data = typeof raw === "string" ? JSON.parse(raw) : raw;
       if (Array.isArray(data)) {
         setHistory(
           data.map((r) => {
@@ -455,6 +454,64 @@ function TaskDetailView({ taskId, onBack }) {
     stream.start(packId, "fw_weaver_events", currentRunId);
     return () => stream.stop();
   }, [isLive, currentRunId, packId]);
+  const [detailTab, setDetailTab] = useState2("runs");
+  const [actionLoading, setActionLoading] = useState2(null);
+  const [availableProfiles, setAvailableProfiles] = useState2([]);
+  useEffect2(() => {
+    callTool("fw_weaver_profile_list", {}).then((raw) => {
+      const data = typeof raw === "string" ? JSON.parse(raw) : raw;
+      if (Array.isArray(data)) setAvailableProfiles(data);
+    }).catch(() => {
+    });
+  }, [callTool]);
+  const handleRetry = useCallback(async () => {
+    setActionLoading("retry");
+    try {
+      await callTool("fw_weaver_task_retry", { id: taskId });
+      toast("Task retried, back in pool", { type: "success" });
+      fetchTask();
+    } catch (err) {
+      toast(err instanceof Error ? err.message : "Failed to retry", { type: "error" });
+    }
+    setActionLoading(null);
+  }, [callTool, taskId, fetchTask]);
+  const handleCancel = useCallback(async () => {
+    const ok = await ctx.confirm("Cancel this task? It cannot be undone.", {
+      title: "Cancel Task",
+      confirmLabel: "Cancel Task",
+      state: "warning"
+    });
+    if (!ok) return;
+    setActionLoading("cancel");
+    try {
+      await callTool("fw_weaver_task_cancel", { id: taskId });
+      toast("Task cancelled", { type: "info" });
+      fetchTask();
+    } catch (err) {
+      toast(err instanceof Error ? err.message : "Failed to cancel", { type: "error" });
+    }
+    setActionLoading(null);
+  }, [callTool, taskId, fetchTask, ctx]);
+  const handleAssignProfile = useCallback(async (profileId) => {
+    setActionLoading("assign-profile");
+    try {
+      const newProfile = task?.assignedProfile === profileId ? void 0 : profileId;
+      await callTool("fw_weaver_task_update", { id: taskId, assignedProfile: newProfile ?? null });
+      toast(newProfile ? `Assigned profile ${profileId}` : `Unassigned profile`, { type: "success" });
+      fetchTask();
+    } catch (err) {
+      toast(err instanceof Error ? err.message : "Failed to assign profile", { type: "error" });
+    }
+    setActionLoading(null);
+  }, [callTool, taskId, task, fetchTask]);
+  const handlePriorityChange = useCallback(async (delta) => {
+    const newPriority = Math.max(0, (task?.priority ?? 0) + delta);
+    try {
+      await callTool("fw_weaver_task_update", { id: taskId, priority: newPriority });
+      fetchTask();
+    } catch {
+    }
+  }, [callTool, taskId, task, fetchTask]);
   const [expandedRunId, setExpandedRunId] = useState2(null);
   const [liveExpanded, setLiveExpanded] = useState2(true);
   const toggleExpand = useCallback((id) => {
@@ -521,11 +578,17 @@ function TaskDetailView({ taskId, onBack }) {
   }
   if (loading && !task) {
     return React2.createElement(
-      Container,
-      null,
+      Flex,
+      {
+        variant: "column-stretch-start-nowrap-0",
+        style: { width: "100%", height: "100%", overflow: "hidden" }
+      },
       React2.createElement(
-        Header,
-        null,
+        Flex,
+        {
+          variant: "column-stretch-start-nowrap-8",
+          style: headerStyle
+        },
         React2.createElement(
           Button,
           { variant: "ghost", size: "sm", onClick: onBack },
@@ -537,7 +600,7 @@ function TaskDetailView({ taskId, onBack }) {
         Flex,
         {
           variant: "column-center-center-nowrap-0",
-          style: { flex: 1, padding: "24px" }
+          style: { flex: 1 }
         },
         React2.createElement(
           Typography,
@@ -549,11 +612,17 @@ function TaskDetailView({ taskId, onBack }) {
   }
   if (!task) {
     return React2.createElement(
-      Container,
-      null,
+      Flex,
+      {
+        variant: "column-stretch-start-nowrap-0",
+        style: { width: "100%", height: "100%", overflow: "hidden" }
+      },
       React2.createElement(
-        Header,
-        null,
+        Flex,
+        {
+          variant: "column-stretch-start-nowrap-8",
+          style: headerStyle
+        },
         React2.createElement(
           Button,
           { variant: "ghost", size: "sm", onClick: onBack },
@@ -565,7 +634,7 @@ function TaskDetailView({ taskId, onBack }) {
         Flex,
         {
           variant: "column-center-center-nowrap-0",
-          style: { flex: 1, padding: "24px" }
+          style: { flex: 1 }
         },
         React2.createElement(
           Typography,
@@ -579,210 +648,392 @@ function TaskDetailView({ taskId, onBack }) {
   const hasSubtasks = task.isParent && subtasks.length > 0;
   const hasRuns = runItems.length > 0 || isLive;
   return React2.createElement(
-    Container,
-    null,
+    Flex,
+    {
+      variant: "column-stretch-start-nowrap-0",
+      style: { width: "100%", height: "100%", overflow: "hidden" }
+    },
     // ── Header ──
     React2.createElement(
-      Header,
-      null,
-      // Back button
+      Flex,
+      {
+        variant: "column-stretch-start-nowrap-6",
+        style: { ...headerStyle, padding: "12px 16px", borderBottom: "1px solid var(--color-border-default)" }
+      },
+      // Top row: back + title + status
       React2.createElement(
-        Button,
-        { variant: "ghost", size: "sm", onClick: onBack },
-        React2.createElement(Icon, { name: "arrowBack", size: 16 }),
-        " Back"
-      ),
-      // Title row
-      React2.createElement(
-        HeaderTopRow,
-        null,
+        Flex,
+        { variant: "row-center-start-nowrap-8" },
+        React2.createElement(IconButton, {
+          icon: "back",
+          size: "xs",
+          variant: "clear",
+          onClick: onBack
+        }),
         React2.createElement(StatusIcon, {
           status: statusToIcon[task.status] || "pending",
-          size: "md"
+          size: "sm"
         }),
-        React2.createElement(Typography, { variant: "body-semibold" }, task.title)
+        React2.createElement(Typography, {
+          variant: "caption-thick",
+          color: "color-text-high",
+          style: { flex: 1, minWidth: 0, wordBreak: "break-word" }
+        }, task.title || "Untitled Task")
       ),
-      // Meta row: status label, assigned bots, priority, attempts
+      // Meta row: status tag, assigned profile, priority, attempts
       React2.createElement(
-        HeaderMeta,
-        null,
+        Flex,
+        { variant: "row-center-start-wrap-6" },
         React2.createElement(Tag, {
           size: "small",
-          color: task.status === "done" ? "positive" : task.status === "failed" ? "negative" : task.status === "in-progress" ? "info" : task.status === "blocked" ? "caution" : "default"
-        }, statusToLabel[task.status]),
-        ...task.assignedBots.map(
-          (botId) => React2.createElement(Tag, { key: `bot-${botId}`, size: "small", color: "info" }, botId)
-        ),
-        // Priority
-        task.priority > 0 && React2.createElement(Badge, {
-          variant: task.priority >= 3 ? "warning" : "info"
-        }, `P${task.priority} ${priorityLabel(task.priority)}`),
-        // Attempt count
-        React2.createElement(Typography, {
-          variant: "caption-regular",
+          color: task.status === "done" ? "positive" : task.status === "failed" ? "negative" : task.status === "in-progress" ? "info" : task.status === "blocked" ? "caution" : "secondary"
+        }, statusToLabel[task.status] || task.status || "pending"),
+        task.assignedProfile && React2.createElement(Tag, { key: `profile-${task.assignedProfile}`, size: "small", color: "info" }, task.assignedProfile),
+        task.priority > 0 && React2.createElement(Tag, {
+          size: "small",
+          color: task.priority >= 3 ? "caution" : "info"
+        }, `P${task.priority}`),
+        task.attempt != null && task.maxAttempts != null && React2.createElement(Typography, {
+          variant: "smallCaption-regular",
           color: "color-text-subtle"
         }, `Attempt ${task.attempt}/${task.maxAttempts}`)
       ),
       // Description
       task.description && React2.createElement(Typography, {
-        variant: "caption-regular",
-        color: "color-text-mid",
-        style: { marginTop: "4px" }
-      }, task.description)
+        variant: "smallCaption-regular",
+        color: "color-text-medium"
+      }, task.description),
+      // Profile routing info
+      task.assignedProfile && React2.createElement(
+        Flex,
+        { variant: "column-stretch-start-nowrap-2" },
+        React2.createElement(Typography, {
+          variant: "smallCaption-regular",
+          color: "color-text-medium"
+        }, `Profile: ${task.assignedProfile}`),
+        task.routingReason && React2.createElement(Typography, {
+          variant: "smallCaption-regular",
+          color: "color-text-subtle"
+        }, task.routingReason)
+      )
+      // (Actions moved to tab)
     ),
-    // ── Scrollable content ──
+    // ── Tabs ──
+    React2.createElement(Tabs, {
+      tabs: [
+        { id: "runs", title: `Runs (${runItems.length}${isLive ? "+1" : ""})` },
+        ...hasSubtasks ? [{ id: "subtasks", title: `Subtasks (${subtasks.filter((s) => s.status === "done").length}/${subtasks.length})` }] : [],
+        ...task.status !== "done" && task.status !== "cancelled" ? [{ id: "actions", title: "Actions" }] : [],
+        ...hasContext ? [{ id: "context", title: "Context" }] : []
+      ],
+      activeTabId: detailTab,
+      onSelectTab: (id) => setDetailTab(id),
+      size: "sm"
+    }),
+    // ── Tab content ──
     React2.createElement(
       ScrollArea,
       { ref: scrollRef, style: { flex: 1 } },
       React2.createElement(
         Flex,
-        { variant: "column-stretch-start-nowrap-0" },
-        // ── Context section ──
-        hasContext && React2.createElement(
-          Section,
-          null,
+        { variant: "column-stretch-start-nowrap-8", style: { padding: "12px 16px" } },
+        // ── Runs tab ──
+        detailTab === "runs" && (hasRuns || (task.runs?.length ?? 0) > 0) ? React2.createElement(
+          Flex,
+          { variant: "column-stretch-start-nowrap-8" },
+          ...runItems.map(({ run, runTimeline }) => {
+            const runId = run.id;
+            const isExpanded = expandedRunId === runId;
+            const isSuccess = run.outcome === "completed" || run.success === true;
+            return React2.createElement(TaskBlock, {
+              key: `run-${runId}`,
+              state: isSuccess ? "completed" : "failed",
+              instruction: extractInstruction(run),
+              timeline: runTimeline,
+              cost: typeof run.cost === "number" ? run.cost : run.costDetail?.totalCost ?? null,
+              plan: run.plan,
+              startedAt: run.startedAt,
+              durationMs: run.durationMs ?? run.duration,
+              expanded: isExpanded,
+              onToggleExpand: () => toggleExpand(runId)
+            });
+          }),
+          // Live run
+          isLive && React2.createElement(TaskBlock, {
+            key: "live-run",
+            state: "running",
+            instruction: liveInstruction ?? task.title,
+            timeline: liveTimeline,
+            phase: livePhase,
+            elapsed,
+            cost: liveCost,
+            plan,
+            error: stream.error,
+            approval: approvalStatus ?? void 0,
+            approvalLoading,
+            onApprove: handleApprove,
+            onReject: handleReject,
+            expanded: liveExpanded,
+            onToggleExpand: () => setLiveExpanded((v) => !v)
+          })
+        ) : detailTab === "runs" && React2.createElement(EmptyState, {
+          icon: "smartToy",
+          message: "No runs yet",
+          description: "This task has not been executed yet."
+        }),
+        // ── Subtasks tab ──
+        detailTab === "subtasks" && hasSubtasks && React2.createElement(
+          Flex,
+          {
+            variant: "column-stretch-start-nowrap-0"
+          },
+          ...(subtasks ?? []).map(
+            (sub) => React2.createElement(SubtaskRowItem, {
+              key: sub.id,
+              sub,
+              onBack
+            })
+          )
+        ),
+        // ── Actions tab ──
+        detailTab === "actions" && React2.createElement(
+          Flex,
+          {
+            variant: "column-stretch-start-nowrap-16"
+          },
+          // Status actions
           React2.createElement(
-            SectionTitle,
-            null,
-            React2.createElement(Typography, { variant: "caption-semibold", color: "color-text-high" }, "Context")
+            Flex,
+            { variant: "column-stretch-start-nowrap-8" },
+            React2.createElement(Typography, { variant: "caption-thick", color: "color-text-medium" }, "Status"),
+            React2.createElement(
+              Flex,
+              { variant: "row-center-start-nowrap-6" },
+              task.status === "failed" && React2.createElement(Button, {
+                size: "xs",
+                variant: "fill",
+                color: "primary",
+                onClick: handleRetry,
+                loading: actionLoading === "retry",
+                disabled: !!actionLoading
+              }, "Retry Task"),
+              (task.status === "pending" || task.status === "in-progress" || task.status === "blocked") && React2.createElement(Button, {
+                size: "xs",
+                variant: "outlined",
+                color: "danger",
+                onClick: handleCancel,
+                loading: actionLoading === "cancel",
+                disabled: !!actionLoading
+              }, "Cancel Task")
+            )
           ),
-          // Files
-          task.context.files.length > 0 && React2.createElement(
+          // Priority
+          React2.createElement(
             Flex,
-            {
-              variant: "column-stretch-start-nowrap-4",
-              style: { marginBottom: "8px" }
-            },
-            React2.createElement(Typography, { variant: "caption-regular", color: "color-text-subtle" }, "Files:"),
+            { variant: "column-stretch-start-nowrap-8" },
+            React2.createElement(Typography, { variant: "caption-thick", color: "color-text-medium" }, "Priority"),
             React2.createElement(
-              FileList,
-              null,
-              ...task.context.files.map(
-                (file) => React2.createElement(FileItem, { key: file }, file)
-              )
+              Flex,
+              { variant: "row-center-start-nowrap-8" },
+              React2.createElement(IconButton, {
+                icon: "expandLess",
+                size: "xs",
+                variant: "outlined",
+                onClick: () => handlePriorityChange(1),
+                title: "Increase priority"
+              }),
+              React2.createElement(
+                Typography,
+                { variant: "smallCaption-regular", color: "color-text-high" },
+                `P${task.priority ?? 0}`
+              ),
+              React2.createElement(IconButton, {
+                icon: "expandMore",
+                size: "xs",
+                variant: "outlined",
+                onClick: () => handlePriorityChange(-1),
+                title: "Decrease priority"
+              })
             )
           ),
-          // Notes
-          task.context.notes && React2.createElement(
+          // Assign Profile
+          availableProfiles.length > 0 && React2.createElement(
             Flex,
-            { variant: "column-stretch-start-nowrap-4" },
-            React2.createElement(Typography, { variant: "caption-regular", color: "color-text-subtle" }, "Notes:"),
-            React2.createElement(NotesBlock, null, task.context.notes)
+            { variant: "column-stretch-start-nowrap-8" },
+            React2.createElement(Typography, { variant: "caption-thick", color: "color-text-medium" }, "Assign Profile"),
+            React2.createElement(Table, {
+              size: "compact",
+              getRowKey: (row) => row.id,
+              columns: [
+                {
+                  key: "icon",
+                  header: "",
+                  width: "30px",
+                  render: (_, row) => React2.createElement(Icon, {
+                    name: row.icon || "smartToy",
+                    size: 14,
+                    color: row.color || "color-text-medium"
+                  })
+                },
+                {
+                  key: "name",
+                  header: "Profile"
+                },
+                {
+                  key: "capabilities",
+                  header: "Capabilities",
+                  render: (_, row) => {
+                    const caps = row.capabilities || [];
+                    if (caps.length === 0) return null;
+                    return React2.createElement(
+                      Flex,
+                      { variant: "row-center-start-wrap-4" },
+                      ...caps.slice(0, 4).map(
+                        (cap) => React2.createElement(
+                          "span",
+                          { key: cap.name, title: cap.description },
+                          React2.createElement(Chip, { label: cap.name, size: "small", color: "color-brand-main" })
+                        )
+                      ),
+                      caps.length > 4 && React2.createElement(Typography, {
+                        variant: "smallCaption-regular",
+                        color: "color-text-subtle"
+                      }, `+${caps.length - 4}`)
+                    );
+                  }
+                },
+                {
+                  key: "assigned",
+                  header: "Assign",
+                  width: "50px",
+                  align: "right",
+                  render: (_, row) => {
+                    const isAssigned = task.assignedProfile === row.id;
+                    return React2.createElement(Checkbox, {
+                      checked: isAssigned,
+                      onChange: () => handleAssignProfile(row.id),
+                      size: "sm"
+                    });
+                  }
+                }
+              ],
+              data: availableProfiles
+            })
           )
         ),
-        // ── Subtasks section ──
-        hasSubtasks && React2.createElement(
-          Section,
-          null,
-          React2.createElement(
-            SectionTitle,
-            null,
-            React2.createElement(
-              Typography,
-              { variant: "caption-semibold", color: "color-text-high" },
-              `Subtasks (${subtasks.filter((s) => s.status === "done").length}/${subtasks.length} done)`
+        // ── Context tab ──
+        detailTab === "context" && hasContext && React2.createElement(
+          Flex,
+          {
+            variant: "column-stretch-start-nowrap-12"
+          },
+          // Files
+          (task.context?.files?.length ?? 0) > 0 && React2.createElement(
+            Flex,
+            {
+              variant: "column-stretch-start-nowrap-4"
+            },
+            React2.createElement(Typography, { variant: "caption-thick", color: "color-text-medium" }, "Files"),
+            ...(task.context?.files ?? []).map(
+              (file) => React2.createElement(Typography, {
+                key: file,
+                variant: "smallCaption-regular",
+                color: "color-text-high",
+                style: { fontFamily: "var(--font-mono, monospace)" }
+              }, file)
             )
           ),
-          React2.createElement(
+          // Notes
+          task.context?.notes && React2.createElement(
+            Flex,
+            {
+              variant: "column-stretch-start-nowrap-4"
+            },
+            React2.createElement(Typography, { variant: "caption-thick", color: "color-text-medium" }, "Notes"),
+            React2.createElement(Typography, {
+              variant: "smallCaption-regular",
+              color: "color-text-high",
+              style: { whiteSpace: "pre-wrap" }
+            }, task.context.notes)
+          ),
+          // Last error
+          task.context?.lastError && React2.createElement(
+            Flex,
+            {
+              variant: "column-stretch-start-nowrap-4"
+            },
+            React2.createElement(Typography, { variant: "caption-thick", color: "color-status-negative" }, "Last Error"),
+            React2.createElement(Typography, {
+              variant: "smallCaption-regular",
+              color: "color-text-high",
+              style: { fontFamily: "var(--font-mono, monospace)", whiteSpace: "pre-wrap" }
+            }, task.context.lastError)
+          ),
+          // Run summaries (accumulated context)
+          (task.context?.runSummaries?.length ?? 0) > 0 && React2.createElement(
             Flex,
-            { variant: "column-stretch-start-nowrap-0" },
-            ...subtasks.map(
-              (sub) => React2.createElement(
-                SubtaskRow,
+            {
+              variant: "column-stretch-start-nowrap-6"
+            },
+            React2.createElement(Typography, { variant: "caption-thick", color: "color-text-medium" }, "Run Summaries"),
+            ...(task.context?.runSummaries ?? []).map(
+              (rs, i) => React2.createElement(
+                Card,
                 {
-                  key: sub.id,
-                  onClick: () => {
-                    onBack();
-                  }
+                  key: `rs-${i}`,
+                  variant: "bordered",
+                  padding: "compact",
+                  style: { gap: "4px" }
                 },
-                React2.createElement(StatusIcon, {
-                  status: statusToIcon[sub.status] || "pending",
-                  size: "sm"
-                }),
                 React2.createElement(
-                  SubtaskTitle,
-                  null,
-                  React2.createElement(Typography, { variant: "caption-regular" }, sub.title)
+                  Flex,
+                  { variant: "row-center-space-between-nowrap-8" },
+                  React2.createElement(Typography, {
+                    variant: "smallCaption-thick",
+                    color: rs.outcome === "success" ? "color-status-positive" : "color-status-negative"
+                  }, `${rs.outcome === "success" ? "Success" : "Failed"} (${rs.botId ?? "unknown bot"})`),
+                  React2.createElement(Typography, {
+                    variant: "smallCaption-regular",
+                    color: "color-text-subtle"
+                  }, `${Math.round((rs.durationMs ?? 0) / 1e3)}s \xB7 ${rs.tokensUsed ?? 0} tok \xB7 $${(rs.cost ?? 0).toFixed(3)}`)
                 ),
-                sub.assignedBots.length > 0 && React2.createElement(Tag, {
-                  size: "small",
-                  color: "info"
-                }, sub.assignedBots[0]),
                 React2.createElement(Typography, {
-                  variant: "caption-regular",
-                  color: "color-text-subtle"
-                }, `#${sub.attempt}`)
+                  variant: "smallCaption-regular",
+                  color: "color-text-medium"
+                }, rs.summary ?? ""),
+                (rs.filesModified ?? []).length > 0 && React2.createElement(Typography, {
+                  variant: "smallCaption-regular",
+                  color: "color-text-subtle",
+                  style: { fontFamily: "var(--font-mono, monospace)" }
+                }, `Files: ${rs.filesModified.join(", ")}`),
+                rs.error && React2.createElement(Typography, {
+                  variant: "smallCaption-regular",
+                  color: "color-status-negative"
+                }, `Error: ${rs.error}`)
               )
             )
-          )
-        ),
-        // ── Run history section ──
-        (hasRuns || task.runs.length > 0) && React2.createElement(
-          Section,
-          { style: { borderBottom: "none" } },
-          React2.createElement(
-            SectionTitle,
-            null,
-            React2.createElement(
-              Typography,
-              { variant: "caption-semibold", color: "color-text-high" },
-              `Run History (${runItems.length}${isLive ? " + 1 live" : ""})`
-            )
           ),
-          React2.createElement(
-            Flex,
-            { variant: "column-stretch-start-nowrap-8" },
-            ...runItems.map(({ run, runTimeline }) => {
-              const runId = run.id;
-              const isExpanded = expandedRunId === runId;
-              const isSuccess = run.outcome === "completed" || run.success === true;
-              return React2.createElement(TaskBlock, {
-                key: `run-${runId}`,
-                state: isSuccess ? "completed" : "failed",
-                instruction: extractInstruction(run),
-                timeline: runTimeline,
-                cost: typeof run.cost === "number" ? run.cost : run.costDetail?.totalCost ?? null,
-                plan: run.plan,
-                startedAt: run.startedAt,
-                durationMs: run.durationMs ?? run.duration,
-                expanded: isExpanded,
-                onToggleExpand: () => toggleExpand(runId)
-              });
-            }),
-            // Live run
-            isLive && React2.createElement(TaskBlock, {
-              key: "live-run",
-              state: "running",
-              instruction: liveInstruction ?? task.title,
-              timeline: liveTimeline,
-              phase: livePhase,
-              elapsed,
-              cost: liveCost,
-              plan,
-              error: stream.error,
-              approval: approvalStatus ?? void 0,
-              approvalLoading,
-              onApprove: handleApprove,
-              onReject: handleReject,
-              expanded: liveExpanded,
-              onToggleExpand: () => setLiveExpanded((v) => !v)
-            })
-          )
-        ),
-        // Empty state when no runs and no live
-        !hasRuns && task.runs.length === 0 && React2.createElement(
-          Section,
-          { style: { borderBottom: "none" } },
-          React2.createElement(
+          // Budget
+          (task.tokensUsed > 0 || task.costUsed > 0) && React2.createElement(
             Flex,
             {
-              variant: "column-center-center-nowrap-0",
-              style: { padding: "16px" }
+              variant: "column-stretch-start-nowrap-4"
             },
-            React2.createElement(Typography, {
-              variant: "caption-regular",
-              color: "color-text-subtle"
-            }, "No runs yet for this task.")
+            React2.createElement(Typography, { variant: "caption-thick", color: "color-text-medium" }, "Budget"),
+            React2.createElement(
+              Flex,
+              { variant: "row-center-start-nowrap-16" },
+              React2.createElement(
+                Typography,
+                { variant: "smallCaption-regular", color: "color-text-high" },
+                `Tokens: ${task.tokensUsed?.toLocaleString() ?? 0}${task.budgetTokens ? ` / ${task.budgetTokens.toLocaleString()}` : ""}`
+              ),
+              React2.createElement(
+                Typography,
+                { variant: "smallCaption-regular", color: "color-text-high" },
+                `Cost: $${(task.costUsed ?? 0).toFixed(3)}${task.budgetCost ? ` / $${task.budgetCost.toFixed(2)}` : ""}`
+              )
+            )
           )
         )
       )