@synergenius/flow-weaver-pack-weaver 0.9.199 → 0.9.201

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

@@ -24,6 +24,8 @@ __export(task_detail_view_exports, {
   default: () => task_detail_view_default
 });
 module.exports = __toCommonJS(task_detail_view_exports);
+var import_react = require("react");
+var import_plugin_ui_kit = require("@fw/plugin-ui-kit");
 
 // src/ui/use-stream-timeline.ts
 var React = require("react");
@@ -325,28 +327,7 @@ function traceToTimeline(run) {
 }
 
 // src/ui/task-detail-view.tsx
-var React2 = require("react");
-var { useState: useState2, useEffect: useEffect2, useCallback, useRef: useRef2, useMemo: useMemo2 } = React2;
-var {
-  Flex,
-  Typography,
-  ScrollArea,
-  StatusIcon,
-  Badge,
-  Icon,
-  IconButton,
-  TaskBlock,
-  Button,
-  Card,
-  Chip,
-  Checkbox,
-  Table,
-  Tabs,
-  EmptyState,
-  toast,
-  usePackWorkspace,
-  useEventStream
-} = require("@fw/plugin-ui-kit");
+var import_jsx_runtime = require("react/jsx-runtime");
 var statusToIcon = {
   "open": "pending",
   "in-progress": "running",
@@ -385,44 +366,45 @@ var subtaskRowHoverStyle = {
   backgroundColor: "var(--color-surface-elevated)"
 };
 function SubtaskRowItem({ sub, onBack }) {
-  const [hovered, setHovered] = useState2(false);
-  return React2.createElement(
-    Flex,
+  const [hovered, setHovered] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_plugin_ui_kit.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(Chip, {
-      label: sub.assignedProfile,
-      size: "small",
-      color: "color-status-info"
-    })
+      onMouseLeave: () => setHovered(false),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_plugin_ui_kit.StatusIcon,
+          {
+            status: statusToIcon[sub.status] || "pending",
+            size: "sm"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_plugin_ui_kit.Flex,
+          {
+            variant: "row-center-start-nowrap-0",
+            style: { flex: 1, minWidth: 0 },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "caption-regular", truncate: true, children: sub.title })
+          }
+        ),
+        sub.assignedProfile && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Chip, { label: sub.assignedProfile, size: "small", color: "color-status-info" })
+      ]
+    }
   );
 }
 function TaskDetailView({ taskId, onBack, onEdit }) {
-  const ctx = usePackWorkspace();
+  const ctx = (0, import_plugin_ui_kit.usePackWorkspace)();
   const { callTool } = ctx;
   const packId = ctx.packId;
-  const [task, setTask] = useState2(null);
-  const [subtasks, setSubtasks] = useState2([]);
-  const [history, setHistory] = useState2([]);
-  const [loading, setLoading] = useState2(true);
-  const fetchTask = useCallback(async () => {
+  const [task, setTask] = (0, import_react.useState)(null);
+  const [subtasks, setSubtasks] = (0, import_react.useState)([]);
+  const [history, setHistory] = (0, import_react.useState)([]);
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  const fetchTask = (0, import_react.useCallback)(async () => {
     try {
       const raw = await callTool("fw_weaver_task_get", { id: taskId });
       const data = typeof raw === "string" ? JSON.parse(raw) : raw;
@@ -460,7 +442,7 @@ function TaskDetailView({ taskId, onBack, onEdit }) {
     } catch (err) {
     }
   }, [callTool, taskId]);
-  const fetchHistory = useCallback(async () => {
+  const fetchHistory = (0, import_react.useCallback)(async () => {
     try {
       const raw = await callTool("fw_weaver_history", { taskId });
       const data = typeof raw === "string" ? JSON.parse(raw) : raw;
@@ -476,11 +458,11 @@ function TaskDetailView({ taskId, onBack, onEdit }) {
     } catch {
     }
   }, [callTool, taskId]);
-  useEffect2(() => {
+  (0, import_react.useEffect)(() => {
     setLoading(true);
     Promise.all([fetchTask(), fetchHistory()]).finally(() => setLoading(false));
   }, [fetchTask, fetchHistory]);
-  useEffect2(() => {
+  (0, import_react.useEffect)(() => {
     if (!task || task.status !== "in-progress") return;
     const interval = setInterval(() => {
       fetchTask();
@@ -488,7 +470,7 @@ function TaskDetailView({ taskId, onBack, onEdit }) {
     }, 5e3);
     return () => clearInterval(interval);
   }, [task?.status, fetchTask, fetchHistory]);
-  const stream = useEventStream();
+  const stream = (0, import_plugin_ui_kit.useEventStream)();
   const {
     timeline: liveTimeline,
     phase: livePhase,
@@ -501,33 +483,33 @@ function TaskDetailView({ taskId, onBack, onEdit }) {
   } = useStreamTimeline(stream.events, stream.isDone);
   const activeRunId = task?.activeRunId;
   const isLive = task?.status === "in-progress" && !!activeRunId;
-  useEffect2(() => {
+  (0, import_react.useEffect)(() => {
     if (!isLive || !activeRunId) return;
     stream.start(packId, "fw_weaver_events", activeRunId);
     return () => stream.stop();
   }, [isLive, activeRunId, packId]);
-  const [detailTab, setDetailTab] = useState2("runs");
-  const [actionLoading, setActionLoading] = useState2(null);
-  const [availableProfiles, setAvailableProfiles] = useState2([]);
-  useEffect2(() => {
+  const [detailTab, setDetailTab] = (0, import_react.useState)("runs");
+  const [actionLoading, setActionLoading] = (0, import_react.useState)(null);
+  const [availableProfiles, setAvailableProfiles] = (0, import_react.useState)([]);
+  (0, import_react.useEffect)(() => {
     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 () => {
+  const handleRetry = (0, import_react.useCallback)(async () => {
     setActionLoading("retry");
     try {
       await callTool("fw_weaver_task_retry", { id: taskId });
-      toast("Task retried, back in pool", { type: "success" });
+      (0, import_plugin_ui_kit.toast)("Task retried, back in pool", { type: "success" });
       fetchTask();
     } catch (err) {
-      toast(err instanceof Error ? err.message : "Failed to retry", { type: "error" });
+      (0, import_plugin_ui_kit.toast)(err instanceof Error ? err.message : "Failed to retry", { type: "error" });
     }
     setActionLoading(null);
   }, [callTool, taskId, fetchTask]);
-  const handleCancel = useCallback(async () => {
+  const handleCancel = (0, import_react.useCallback)(async () => {
     const ok = await ctx.confirm("Cancel this task? It cannot be undone.", {
       title: "Cancel Task",
       confirmLabel: "Cancel Task",
@@ -537,26 +519,26 @@ function TaskDetailView({ taskId, onBack, onEdit }) {
     setActionLoading("cancel");
     try {
       await callTool("fw_weaver_task_cancel", { id: taskId });
-      toast("Task cancelled", { type: "info" });
+      (0, import_plugin_ui_kit.toast)("Task cancelled", { type: "info" });
       fetchTask();
     } catch (err) {
-      toast(err instanceof Error ? err.message : "Failed to cancel", { type: "error" });
+      (0, import_plugin_ui_kit.toast)(err instanceof Error ? err.message : "Failed to cancel", { type: "error" });
     }
     setActionLoading(null);
   }, [callTool, taskId, fetchTask, ctx]);
-  const handleAssignProfile = useCallback(async (profileId) => {
+  const handleAssignProfile = (0, import_react.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" });
+      (0, import_plugin_ui_kit.toast)(newProfile ? `Assigned profile ${profileId}` : `Unassigned profile`, { type: "success" });
       fetchTask();
     } catch (err) {
-      toast(err instanceof Error ? err.message : "Failed to assign profile", { type: "error" });
+      (0, import_plugin_ui_kit.toast)(err instanceof Error ? err.message : "Failed to assign profile", { type: "error" });
     }
     setActionLoading(null);
   }, [callTool, taskId, task, fetchTask]);
-  const handlePriorityChange = useCallback(async (delta) => {
+  const handlePriorityChange = (0, import_react.useCallback)(async (delta) => {
     const newPriority = Math.max(0, (task?.priority ?? 0) + delta);
     try {
       await callTool("fw_weaver_task_update", { id: taskId, priority: newPriority });
@@ -564,47 +546,47 @@ function TaskDetailView({ taskId, onBack, onEdit }) {
     } catch {
     }
   }, [callTool, taskId, task, fetchTask]);
-  const [expandedRunId, setExpandedRunId] = useState2(null);
-  const [liveExpanded, setLiveExpanded] = useState2(true);
-  const toggleExpand = useCallback((id) => {
+  const [expandedRunId, setExpandedRunId] = (0, import_react.useState)(null);
+  const [liveExpanded, setLiveExpanded] = (0, import_react.useState)(true);
+  const toggleExpand = (0, import_react.useCallback)((id) => {
     setExpandedRunId((prev) => prev === id ? null : id);
   }, []);
-  const scrollRef = useRef2(null);
-  useEffect2(() => {
+  const scrollRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
     const el = scrollRef.current;
     if (el) el.scrollTop = el.scrollHeight;
   }, [liveTimeline.length, stream.events.length]);
-  const [approvalStatus, setApprovalStatus] = useState2(null);
-  const [approvalLoading, setApprovalLoading] = useState2(false);
-  useEffect2(() => {
+  const [approvalStatus, setApprovalStatus] = (0, import_react.useState)(null);
+  const [approvalLoading, setApprovalLoading] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
     if (awaitingApproval) setApprovalStatus("pending");
   }, [awaitingApproval]);
-  useEffect2(() => {
+  (0, import_react.useEffect)(() => {
     if (stream.events.length === 0) setApprovalStatus(null);
   }, [stream.events.length]);
-  const handleApprove = useCallback(async () => {
+  const handleApprove = (0, import_react.useCallback)(async () => {
     setApprovalLoading(true);
     try {
       await callTool("fw_weaver_approve", { approved: true });
       setApprovalStatus("approved");
-      toast("Plan approved", { type: "success" });
+      (0, import_plugin_ui_kit.toast)("Plan approved", { type: "success" });
     } catch (err) {
-      toast(err instanceof Error ? err.message : "Failed to approve", { type: "error" });
+      (0, import_plugin_ui_kit.toast)(err instanceof Error ? err.message : "Failed to approve", { type: "error" });
     }
     setApprovalLoading(false);
   }, [callTool]);
-  const handleReject = useCallback(async () => {
+  const handleReject = (0, import_react.useCallback)(async () => {
     setApprovalLoading(true);
     try {
       await callTool("fw_weaver_approve", { approved: false });
       setApprovalStatus("rejected");
-      toast("Plan rejected", { type: "info" });
+      (0, import_plugin_ui_kit.toast)("Plan rejected", { type: "info" });
     } catch (err) {
-      toast(err instanceof Error ? err.message : "Failed to reject", { type: "error" });
+      (0, import_plugin_ui_kit.toast)(err instanceof Error ? err.message : "Failed to reject", { type: "error" });
     }
     setApprovalLoading(false);
   }, [callTool]);
-  const runItems = useMemo2(() => {
+  const runItems = (0, import_react.useMemo)(() => {
     return history.map((run) => ({
       run,
       runTimeline: traceToTimeline(run)
@@ -639,470 +621,382 @@ function TaskDetailView({ taskId, onBack, onEdit }) {
     return task?.title ?? "Bot run";
   }
   if (loading && !task) {
-    return React2.createElement(
-      Flex,
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_plugin_ui_kit.Flex,
       {
         variant: "column-stretch-start-nowrap-0",
-        style: { width: "100%", height: "100%", overflow: "hidden" }
-      },
-      React2.createElement(
-        Flex,
-        {
-          variant: "column-stretch-start-nowrap-8",
-          style: headerStyle
-        },
-        React2.createElement(
-          Button,
-          { variant: "ghost", size: "sm", onClick: onBack },
-          React2.createElement(Icon, { name: "arrowBack", size: 16 }),
-          " Back"
-        )
-      ),
-      React2.createElement(
-        Flex,
-        {
-          variant: "column-center-center-nowrap-0",
-          style: { flex: 1 }
-        },
-        React2.createElement(
-          Typography,
-          { variant: "caption-regular", color: "color-text-subtle" },
-          "Loading task..."
-        )
-      )
+        style: { width: "100%", height: "100%", overflow: "hidden" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Flex, { variant: "column-stretch-start-nowrap-8", style: headerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Button, { variant: "ghost", size: "sm", onClick: onBack, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Icon, { name: "arrowBack", size: 16 }),
+            " Back"
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Flex, { variant: "column-center-center-nowrap-0", style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "caption-regular", color: "color-text-subtle", children: "Loading task..." }) })
+        ]
+      }
     );
   }
   if (!task) {
-    return React2.createElement(
-      Flex,
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_plugin_ui_kit.Flex,
       {
         variant: "column-stretch-start-nowrap-0",
-        style: { width: "100%", height: "100%", overflow: "hidden" }
-      },
-      React2.createElement(
-        Flex,
-        {
-          variant: "column-stretch-start-nowrap-8",
-          style: headerStyle
-        },
-        React2.createElement(
-          Button,
-          { variant: "ghost", size: "sm", onClick: onBack },
-          React2.createElement(Icon, { name: "arrowBack", size: 16 }),
-          " Back"
-        )
-      ),
-      React2.createElement(
-        Flex,
-        {
-          variant: "column-center-center-nowrap-0",
-          style: { flex: 1 }
-        },
-        React2.createElement(
-          Typography,
-          { variant: "caption-regular", color: "color-text-subtle" },
-          "Task not found."
-        )
-      )
+        style: { width: "100%", height: "100%", overflow: "hidden" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Flex, { variant: "column-stretch-start-nowrap-8", style: headerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Button, { variant: "ghost", size: "sm", onClick: onBack, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Icon, { name: "arrowBack", size: 16 }),
+            " Back"
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Flex, { variant: "column-center-center-nowrap-0", style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "caption-regular", color: "color-text-subtle", children: "Task not found." }) })
+        ]
+      }
     );
   }
   const hasContext = task.context?.files?.length > 0 || task.context?.notes;
   const hasSubtasks = task.isParent && subtasks.length > 0;
   const hasRuns = runItems.length > 0 || isLive;
-  return React2.createElement(
-    Flex,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_plugin_ui_kit.Flex,
     {
       variant: "column-stretch-start-nowrap-0",
-      style: { width: "100%", height: "100%", overflow: "hidden" }
-    },
-    // ── Header ──
-    React2.createElement(
-      Flex,
-      {
-        variant: "column-stretch-start-nowrap-6",
-        style: { ...headerStyle, padding: "12px 16px", borderBottom: "1px solid var(--color-border-default)" }
-      },
-      // Top row: back + title + status + edit
-      React2.createElement(
-        Flex,
-        { variant: "row-center-space-between-nowrap-8" },
-        React2.createElement(
-          Flex,
-          { variant: "row-center-start-nowrap-8", style: { flex: 1, minWidth: 0 } },
-          React2.createElement(IconButton, {
-            icon: "back",
-            size: "xs",
-            variant: "clear",
-            onClick: onBack
-          }),
-          React2.createElement(StatusIcon, {
-            status: statusToIcon[task.status] || "pending",
-            size: "sm"
-          }),
-          React2.createElement(Typography, {
-            variant: "caption-thick",
-            color: "color-text-high",
-            style: { flex: 1, minWidth: 0, wordBreak: "break-word" }
-          }, task.title || "Untitled Task")
-        ),
-        onEdit && React2.createElement(IconButton, {
-          icon: "edit",
-          size: "xs",
-          variant: "clear",
-          onClick: () => onEdit(taskId),
-          title: "Edit task"
-        })
-      ),
-      // Meta row: status tag, assigned profile, priority, attempts
-      React2.createElement(
-        Flex,
-        { variant: "row-center-start-wrap-6" },
-        React2.createElement(Chip, {
-          label: statusToLabel[task.status] || task.status || "open",
-          size: "small",
-          color: task.status === "done" ? "color-status-positive" : task.status === "cancelled" ? "color-status-negative" : task.status === "in-progress" ? "color-status-info" : "color-brand-alt"
-        }),
-        task.assignedProfile && React2.createElement(Chip, { key: `profile-${task.assignedProfile}`, label: task.assignedProfile, size: "small", color: "color-status-info" }),
-        task.priority > 0 && React2.createElement(Chip, {
-          label: `P${task.priority}`,
-          size: "small",
-          color: task.priority >= 3 ? "color-status-caution" : "color-status-info"
-        }),
-        (task.context?.runHistory?.length ?? 0) > 0 && React2.createElement(Typography, {
-          variant: "smallCaption-regular",
-          color: "color-text-subtle"
-        }, `${task.context.runHistory.length} run${task.context.runHistory.length !== 1 ? "s" : ""}`)
-      ),
-      // Description
-      task.description && React2.createElement(Typography, {
-        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)
-    ),
-    // ── 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-8", style: { padding: "12px 16px" } },
-        // ── Runs tab ──
-        detailTab === "runs" && (hasRuns || (task.context?.runHistory?.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,
-              report: run.report ?? null,
-              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,
-            report: liveReport,
-            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,
+      style: { width: "100%", height: "100%", overflow: "hidden" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_plugin_ui_kit.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(
-            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 === "open" && (task.context?.runHistory?.length ?? 0) > 0 && React2.createElement(Button, {
-                size: "xs",
-                variant: "fill",
-                color: "primary",
-                onClick: handleRetry,
-                loading: actionLoading === "retry",
-                disabled: !!actionLoading
-              }, "Retry Task"),
-              (task.status === "open" || task.status === "in-progress") && React2.createElement(Button, {
-                size: "xs",
-                variant: "outlined",
-                color: "danger",
-                onClick: handleCancel,
-                loading: actionLoading === "cancel",
-                disabled: !!actionLoading
-              }, "Cancel Task")
-            )
-          ),
-          // Priority
-          React2.createElement(
-            Flex,
-            { variant: "column-stretch-start-nowrap-8" },
-            React2.createElement(Typography, { variant: "caption-thick", color: "color-text-medium" }, "Priority"),
-            React2.createElement(
-              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"
-              })
-            )
-          ),
-          // Assign Profile
-          availableProfiles.length > 0 && React2.createElement(
-            Flex,
-            { 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),
+            variant: "column-stretch-start-nowrap-6",
+            style: { ...headerStyle, padding: "12px 16px", borderBottom: "1px solid var(--color-border-default)" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "row-center-space-between-nowrap-8", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "row-center-start-nowrap-8", style: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_plugin_ui_kit.IconButton,
+                    {
+                      icon: "back",
+                      size: "xs",
+                      variant: "clear",
+                      onClick: onBack
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_plugin_ui_kit.StatusIcon,
+                    {
+                      status: statusToIcon[task.status] || "pending",
                       size: "sm"
-                    });
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_plugin_ui_kit.Typography,
+                    {
+                      variant: "caption-thick",
+                      color: "color-text-high",
+                      style: { flex: 1, minWidth: 0, wordBreak: "break-word" },
+                      children: task.title || "Untitled Task"
+                    }
+                  )
+                ] }),
+                onEdit && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_plugin_ui_kit.IconButton,
+                  {
+                    icon: "edit",
+                    size: "xs",
+                    variant: "clear",
+                    onClick: () => onEdit(taskId),
+                    title: "Edit task"
                   }
-                }
-              ],
-              data: availableProfiles
-            })
-          )
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "row-center-start-wrap-6", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_plugin_ui_kit.Chip,
+                  {
+                    label: statusToLabel[task.status] || task.status || "open",
+                    size: "small",
+                    color: task.status === "done" ? "color-status-positive" : task.status === "cancelled" ? "color-status-negative" : task.status === "in-progress" ? "color-status-info" : "color-brand-alt"
+                  }
+                ),
+                task.assignedProfile && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Chip, { label: task.assignedProfile, size: "small", color: "color-status-info" }, `profile-${task.assignedProfile}`),
+                task.priority > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_plugin_ui_kit.Chip,
+                  {
+                    label: `P${task.priority}`,
+                    size: "small",
+                    color: task.priority >= 3 ? "color-status-caution" : "color-status-info"
+                  }
+                ),
+                (task.context?.runHistory?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-subtle", children: `${task.context.runHistory.length} run${task.context.runHistory.length !== 1 ? "s" : ""}` })
+              ] }),
+              task.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-medium", children: task.description }),
+              task.assignedProfile && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "column-stretch-start-nowrap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-medium", children: `Profile: ${task.assignedProfile}` }),
+                task.routingReason && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-subtle", children: task.routingReason })
+              ] })
+            ]
+          }
         ),
-        // ── Context tab ──
-        detailTab === "context" && hasContext && React2.createElement(
-          Flex,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_plugin_ui_kit.Tabs,
           {
-            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)
+            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"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.ScrollArea, { ref: scrollRef, style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "column-stretch-start-nowrap-8", style: { padding: "12px 16px" }, children: [
+          detailTab === "runs" && (hasRuns || (task.context?.runHistory?.length ?? 0) > 0) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "column-stretch-start-nowrap-8", children: [
+            runItems.map(({ run, runTimeline }) => {
+              const runId = run.id;
+              const isExpanded = expandedRunId === runId;
+              const isSuccess = run.outcome === "completed" || run.success === true;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_plugin_ui_kit.TaskBlock,
+                {
+                  state: isSuccess ? "completed" : "failed",
+                  instruction: extractInstruction(run),
+                  timeline: runTimeline,
+                  report: run.report ?? null,
+                  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)
+                },
+                `run-${runId}`
+              );
+            }),
+            isLive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_plugin_ui_kit.TaskBlock,
+              {
+                state: "running",
+                instruction: liveInstruction ?? task.title,
+                timeline: liveTimeline,
+                report: liveReport,
+                phase: livePhase,
+                elapsed,
+                cost: liveCost,
+                plan,
+                error: stream.error,
+                approval: approvalStatus ?? void 0,
+                approvalLoading,
+                onApprove: handleApprove,
+                onReject: handleReject,
+                expanded: liveExpanded,
+                onToggleExpand: () => setLiveExpanded((v) => !v)
+              },
+              "live-run"
             )
-          ),
-          // Notes
-          task.context?.notes && React2.createElement(
-            Flex,
+          ] }) : detailTab === "runs" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_plugin_ui_kit.EmptyState,
             {
-              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)
+              icon: "smartToy",
+              message: "No runs yet",
+              description: "This task has not been executed yet."
+            }
           ),
-          // Run history (accumulated context)
-          (task.context?.runHistory?.length ?? 0) > 0 && React2.createElement(
-            Flex,
+          detailTab === "subtasks" && hasSubtasks && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Flex, { variant: "column-stretch-start-nowrap-0", children: (subtasks ?? []).map((sub) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            SubtaskRowItem,
             {
-              variant: "column-stretch-start-nowrap-6"
+              sub,
+              onBack
             },
-            React2.createElement(Typography, { variant: "caption-thick", color: "color-text-medium" }, "Run History"),
-            ...(task.context?.runHistory ?? []).map(
-              (rs, i) => React2.createElement(
-                Card,
-                {
-                  key: `rs-${i}`,
-                  variant: "bordered",
-                  padding: "compact",
-                  style: { gap: "4px" }
-                },
-                React2.createElement(
-                  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.id
+          )) }),
+          detailTab === "actions" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "column-stretch-start-nowrap-16", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "column-stretch-start-nowrap-8", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "caption-thick", color: "color-text-medium", children: "Status" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "row-center-start-nowrap-6", children: [
+                task.status === "open" && (task.context?.runHistory?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_plugin_ui_kit.Button,
+                  {
+                    size: "xs",
+                    variant: "fill",
+                    color: "primary",
+                    onClick: handleRetry,
+                    loading: actionLoading === "retry",
+                    disabled: !!actionLoading,
+                    children: "Retry Task"
+                  }
                 ),
-                React2.createElement(Typography, {
-                  variant: "smallCaption-regular",
-                  color: "color-text-medium"
-                }, rs.summary ?? ""),
-                (rs.filesModified ?? []).length > 0 && React2.createElement(Typography, {
+                (task.status === "open" || task.status === "in-progress") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_plugin_ui_kit.Button,
+                  {
+                    size: "xs",
+                    variant: "outlined",
+                    color: "danger",
+                    onClick: handleCancel,
+                    loading: actionLoading === "cancel",
+                    disabled: !!actionLoading,
+                    children: "Cancel Task"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "column-stretch-start-nowrap-8", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "caption-thick", color: "color-text-medium", children: "Priority" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "row-center-start-nowrap-8", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_plugin_ui_kit.IconButton,
+                  {
+                    icon: "expandLess",
+                    size: "xs",
+                    variant: "outlined",
+                    onClick: () => handlePriorityChange(1),
+                    title: "Increase priority"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-high", children: `P${task.priority ?? 0}` }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_plugin_ui_kit.IconButton,
+                  {
+                    icon: "expandMore",
+                    size: "xs",
+                    variant: "outlined",
+                    onClick: () => handlePriorityChange(-1),
+                    title: "Decrease priority"
+                  }
+                )
+              ] })
+            ] }),
+            availableProfiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "column-stretch-start-nowrap-8", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "caption-thick", color: "color-text-medium", children: "Assign Profile" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_plugin_ui_kit.Table,
+                {
+                  size: "compact",
+                  getRowKey: (row) => row.id,
+                  columns: [
+                    {
+                      key: "icon",
+                      header: "",
+                      width: "30px",
+                      render: (_, row) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_plugin_ui_kit.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 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "row-center-start-wrap-4", children: [
+                          caps.slice(0, 4).map((cap) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { title: cap.description, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Chip, { label: cap.name, size: "small", color: "color-brand-main" }) }, cap.name)),
+                          caps.length > 4 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-subtle", children: `+${caps.length - 4}` })
+                        ] });
+                      }
+                    },
+                    {
+                      key: "assigned",
+                      header: "Assign",
+                      width: "50px",
+                      align: "right",
+                      render: (_, row) => {
+                        const isAssigned = task.assignedProfile === row.id;
+                        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_plugin_ui_kit.Checkbox,
+                          {
+                            checked: isAssigned,
+                            onChange: () => handleAssignProfile(row.id),
+                            size: "sm"
+                          }
+                        );
+                      }
+                    }
+                  ],
+                  data: availableProfiles
+                }
+              )
+            ] })
+          ] }),
+          detailTab === "context" && hasContext && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "column-stretch-start-nowrap-12", children: [
+            (task.context?.files?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "column-stretch-start-nowrap-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "caption-thick", color: "color-text-medium", children: "Files" }),
+              (task.context?.files ?? []).map((file) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_plugin_ui_kit.Typography,
+                {
                   variant: "smallCaption-regular",
-                  color: "color-text-subtle",
-                  style: { fontFamily: "var(--font-mono, monospace)" }
-                }, `Files: ${rs.filesModified.join(", ")}`),
-                rs.remainingWork && React2.createElement(Typography, {
+                  color: "color-text-high",
+                  style: { fontFamily: "var(--font-mono, monospace)" },
+                  children: file
+                },
+                file
+              ))
+            ] }),
+            task.context?.notes && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "column-stretch-start-nowrap-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "caption-thick", color: "color-text-medium", children: "Notes" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_plugin_ui_kit.Typography,
+                {
                   variant: "smallCaption-regular",
-                  color: "color-status-caution"
-                }, `Remaining: ${rs.remainingWork}`)
-              )
-            )
-          ),
-          // Budget
-          (task.tokensUsed > 0 || task.costUsed > 0) && React2.createElement(
-            Flex,
-            {
-              variant: "column-stretch-start-nowrap-4"
-            },
-            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}`
-              ),
-              React2.createElement(
-                Typography,
-                { variant: "smallCaption-regular", color: "color-text-high" },
-                `Cost: $${(task.costUsed ?? 0).toFixed(3)}${task.budgetCost ? ` / $${task.budgetCost.toFixed(2)}` : ""}`
+                  color: "color-text-high",
+                  style: { whiteSpace: "pre-wrap" },
+                  children: task.context.notes
+                }
               )
-            )
-          )
-        )
-      )
-    )
+            ] }),
+            (task.context?.runHistory?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "column-stretch-start-nowrap-6", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "caption-thick", color: "color-text-medium", children: "Run History" }),
+              (task.context?.runHistory ?? []).map((rs, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_plugin_ui_kit.Card,
+                {
+                  variant: "bordered",
+                  padding: "compact",
+                  style: { gap: "4px" },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "row-center-space-between-nowrap-8", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_plugin_ui_kit.Typography,
+                        {
+                          variant: "smallCaption-thick",
+                          color: rs.outcome === "success" ? "color-status-positive" : "color-status-negative",
+                          children: `${rs.outcome === "success" ? "Success" : "Failed"} (${rs.botId ?? "unknown bot"})`
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-subtle", children: `${Math.round((rs.durationMs ?? 0) / 1e3)}s \xB7 ${rs.tokensUsed ?? 0} tok \xB7 $${(rs.cost ?? 0).toFixed(3)}` })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-medium", children: rs.summary ?? "" }),
+                    (rs.filesModified ?? []).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_plugin_ui_kit.Typography,
+                      {
+                        variant: "smallCaption-regular",
+                        color: "color-text-subtle",
+                        style: { fontFamily: "var(--font-mono, monospace)" },
+                        children: `Files: ${rs.filesModified.join(", ")}`
+                      }
+                    ),
+                    rs.remainingWork && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-status-caution", children: `Remaining: ${rs.remainingWork}` })
+                  ]
+                },
+                `rs-${i}`
+              ))
+            ] }),
+            (task.tokensUsed > 0 || task.costUsed > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "column-stretch-start-nowrap-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "caption-thick", color: "color-text-medium", children: "Budget" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_plugin_ui_kit.Flex, { variant: "row-center-start-nowrap-16", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-high", children: `Tokens: ${task.tokensUsed?.toLocaleString() ?? 0}` }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugin_ui_kit.Typography, { variant: "smallCaption-regular", color: "color-text-high", children: `Cost: $${(task.costUsed ?? 0).toFixed(3)}${task.budgetCost ? ` / $${task.budgetCost.toFixed(2)}` : ""}` })
+              ] })
+            ] })
+          ] })
+        ] }) })
+      ]
+    }
   );
 }
 var task_detail_view_default = TaskDetailView;
-module.exports = TaskDetailView;