@synergenius/flow-weaver-pack-weaver 0.9.59 → 0.9.77

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

@@ -0,0 +1,1044 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ui/task-detail-view.tsx
+var task_detail_view_exports = {};
+__export(task_detail_view_exports, {
+  TaskDetailView: () => TaskDetailView,
+  default: () => task_detail_view_default
+});
+module.exports = __toCommonJS(task_detail_view_exports);
+
+// src/ui/use-stream-timeline.ts
+var React = require("react");
+var { useMemo, useState, useEffect, useRef } = React;
+function useStreamTimeline(events, isDone) {
+  const [elapsed, setElapsed] = useState(0);
+  const startTimeRef = useRef(null);
+  useEffect(() => {
+    if (events.length === 0) {
+      startTimeRef.current = null;
+      setElapsed(0);
+    } else if (startTimeRef.current === null) {
+      startTimeRef.current = events[0].timestamp;
+    }
+  }, [events.length]);
+  useEffect(() => {
+    if (isDone || !startTimeRef.current) return;
+    const tick = () => setElapsed(Date.now() - (startTimeRef.current ?? Date.now()));
+    tick();
+    const interval = setInterval(tick, 1e3);
+    return () => clearInterval(interval);
+  }, [isDone, events.length]);
+  const timeline = useMemo(() => {
+    const entries = [];
+    const nodeEntryIndex = /* @__PURE__ */ new Map();
+    const nodeStarts = /* @__PURE__ */ new Map();
+    let idCounter = 0;
+    for (const event of events) {
+      const d = event.data ?? {};
+      switch (event.type) {
+        case "bot-started":
+          entries.push({
+            id: `s-${idCounter++}`,
+            timestamp: new Date(event.timestamp),
+            type: "task-started",
+            label: "Task started",
+            detail: d.instruction
+          });
+          break;
+        case "node-start": {
+          const nodeId = d.nodeId;
+          if (nodeId) nodeStarts.set(nodeId, event.timestamp);
+          const idx = entries.length;
+          nodeEntryIndex.set(nodeId, idx);
+          entries.push({
+            id: `s-${idCounter++}`,
+            timestamp: new Date(event.timestamp),
+            type: "node-started",
+            nodeId,
+            label: d.label ?? d.nodeType ?? nodeId ?? "Node"
+          });
+          break;
+        }
+        case "node-complete": {
+          const nodeId = d.nodeId;
+          const startTs = nodeStarts.get(nodeId);
+          const duration = d.durationMs ?? (startTs ? event.timestamp - startTs : void 0);
+          if (nodeId) nodeStarts.delete(nodeId);
+          const rawOutputs = d.outputs;
+          const completed = {
+            id: `s-${idCounter++}`,
+            timestamp: new Date(startTs ?? event.timestamp),
+            type: "node-completed",
+            nodeId,
+            label: d.label ?? d.nodeType ?? nodeId ?? "Node",
+            duration,
+            outputs: rawOutputs && rawOutputs.length > 0 ? rawOutputs : void 0
+          };
+          const existingIdx = nodeEntryIndex.get(nodeId);
+          if (existingIdx != null && entries[existingIdx]) {
+            entries[existingIdx] = completed;
+            nodeEntryIndex.delete(nodeId);
+          } else {
+            entries.push(completed);
+          }
+          break;
+        }
+        case "node-error": {
+          const nodeId = d.nodeId;
+          const startTs = nodeStarts.get(nodeId);
+          const duration = d.durationMs ?? (startTs ? event.timestamp - startTs : void 0);
+          if (nodeId) nodeStarts.delete(nodeId);
+          const rawOutputs = d.outputs;
+          const failed = {
+            id: `s-${idCounter++}`,
+            timestamp: new Date(startTs ?? event.timestamp),
+            type: "node-failed",
+            nodeId,
+            label: d.label ?? d.nodeType ?? nodeId ?? "Node",
+            detail: d.error,
+            duration,
+            outputs: rawOutputs && rawOutputs.length > 0 ? rawOutputs : void 0
+          };
+          const existingIdx = nodeEntryIndex.get(nodeId);
+          if (existingIdx != null && entries[existingIdx]) {
+            entries[existingIdx] = failed;
+            nodeEntryIndex.delete(nodeId);
+          } else {
+            entries.push(failed);
+          }
+          break;
+        }
+        case "bot-completed":
+          entries.push({
+            id: `s-${idCounter++}`,
+            timestamp: new Date(event.timestamp),
+            type: "task-completed",
+            label: d.success ? "Task completed" : "Task finished",
+            detail: d.summary
+          });
+          break;
+        case "bot-failed":
+          entries.push({
+            id: `s-${idCounter++}`,
+            timestamp: new Date(event.timestamp),
+            type: "task-failed",
+            label: "Task failed",
+            detail: d.error
+          });
+          break;
+        // Skip audit, cost-update, done — they're used for metadata, not timeline
+        default:
+          break;
+      }
+    }
+    return entries;
+  }, [events]);
+  const { phase, instruction, cost, plan, awaitingApproval } = useMemo(() => {
+    let phase2 = "idle";
+    let instruction2 = null;
+    let cost2 = null;
+    let plan2 = null;
+    let awaitingApproval2 = false;
+    for (const event of events) {
+      const d = event.data ?? {};
+      if (event.type === "bot-started") {
+        phase2 = "planning";
+        instruction2 = d.instruction ?? null;
+      } else if (event.type === "node-start" && phase2 !== "completed" && phase2 !== "failed") {
+        phase2 = "executing";
+      } else if (event.type === "bot-completed") {
+        phase2 = d.success ? "completed" : "failed";
+      } else if (event.type === "bot-failed") {
+        phase2 = "failed";
+      } else if (event.type === "cost-update") {
+        cost2 = d.totalCost ?? cost2;
+      } else if (event.type === "audit:plan-created" || event.type === "plan-created") {
+        const planData = d.plan ?? d;
+        const summary = planData.summary ?? "";
+        const steps = planData.steps ?? [];
+        if (summary || steps.length > 0) {
+          plan2 = { summary, steps };
+        }
+      } else if (event.type === "approval-needed") {
+        awaitingApproval2 = true;
+      } else if (event.type === "audit:approval-decision") {
+        awaitingApproval2 = false;
+      }
+    }
+    if (isDone && phase2 !== "completed" && phase2 !== "failed") {
+      phase2 = "completed";
+    }
+    return { phase: phase2, instruction: instruction2, cost: cost2, plan: plan2, awaitingApproval: awaitingApproval2 };
+  }, [events, isDone]);
+  return { timeline, phase, instruction, elapsed, cost, plan, awaitingApproval };
+}
+
+// src/ui/trace-to-timeline.ts
+function traceToTimeline(run) {
+  const entries = [];
+  let idCounter = 0;
+  const meta = run.nodeMeta ?? {};
+  if (run.trace && run.trace.length > 0) {
+    const nodeStarts = /* @__PURE__ */ new Map();
+    for (const event of run.trace) {
+      if (event.type === "node-start") {
+        nodeStarts.set(event.nodeId, event);
+      } else if (event.type === "node-complete" || event.type === "node-error") {
+        const start = nodeStarts.get(event.nodeId);
+        const duration = event.durationMs ?? (start ? event.timestamp - start.timestamp : void 0);
+        const nm = meta[event.nodeId] ?? (event.nodeType ? meta[event.nodeType] : void 0);
+        entries.push({
+          id: `trace-${idCounter++}`,
+          timestamp: new Date(event.timestamp),
+          type: event.type === "node-complete" ? "node-completed" : "node-failed",
+          nodeId: event.nodeId,
+          label: nm?.label ?? event.nodeType ?? event.nodeId,
+          detail: event.error,
+          duration,
+          color: nm?.color,
+          icon: nm?.icon,
+          outputs: event.outputs && event.outputs.length > 0 ? event.outputs : void 0
+        });
+        nodeStarts.delete(event.nodeId);
+      }
+    }
+    for (const [nodeId, event] of nodeStarts) {
+      const nm = meta[nodeId] ?? (event.nodeType ? meta[event.nodeType] : void 0);
+      entries.push({
+        id: `trace-${idCounter++}`,
+        timestamp: new Date(event.timestamp),
+        type: "node-started",
+        nodeId,
+        label: nm?.label ?? event.nodeType ?? nodeId,
+        color: nm?.color,
+        icon: nm?.icon
+      });
+    }
+  } else if (run.stepLog && run.stepLog.length > 0) {
+    for (const step of run.stepLog) {
+      const type = step.status === "ok" ? "node-completed" : step.status === "error" ? "node-failed" : "node-completed";
+      entries.push({
+        id: `step-${idCounter++}`,
+        timestamp: new Date(run.startedAt ?? Date.now()),
+        type,
+        label: step.step,
+        detail: step.detail,
+        icon: step.status === "ok" ? "success" : step.status === "error" ? "error" : "warning"
+      });
+    }
+  }
+  if (run.outcome === "failed" || run.outcome === "error") {
+    let errorDetail = "";
+    if (run.auditTrail) {
+      for (const a of run.auditTrail) {
+        if (a.type === "step-complete" && a.data) {
+          const errors = a.data.errors;
+          if (errors && errors.length > 0) {
+            errorDetail = errors.map((e) => e.length > 120 ? e.slice(0, 117) + "..." : e).join("\n");
+            break;
+          }
+        }
+      }
+    }
+    if (!errorDetail && run.summary) {
+      const parts = run.summary.split("|").map((p) => p.trim());
+      const outcomePart = parts.find((p) => p.startsWith("Outcome:"));
+      const summaryPart = parts.find((p) => p.startsWith("Summary:"));
+      errorDetail = summaryPart?.replace("Summary:", "").trim() ?? outcomePart ?? run.summary;
+    }
+    entries.push({
+      id: `result-${idCounter++}`,
+      timestamp: new Date(run.finishedAt ?? run.startedAt ?? Date.now()),
+      type: "task-failed",
+      label: "Task failed",
+      detail: errorDetail || "Unknown failure",
+      icon: "error"
+    });
+  } else if (run.outcome === "completed" && run.success) {
+    entries.push({
+      id: `result-${idCounter++}`,
+      timestamp: new Date(run.finishedAt ?? run.startedAt ?? Date.now()),
+      type: "task-completed",
+      label: "Task completed",
+      detail: run.summary?.includes("|") ? run.summary.split("|").find((p) => p.trim().startsWith("Summary:"))?.replace("Summary:", "").trim() : void 0
+    });
+  }
+  entries.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
+  return entries;
+}
+
+// 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,
+  Tag,
+  Badge,
+  Icon,
+  IconButton,
+  TaskBlock,
+  Button,
+  Card,
+  Chip,
+  Checkbox,
+  Table,
+  Tabs,
+  EmptyState,
+  toast,
+  usePackWorkspace,
+  useEventStream
+} = require("@fw/plugin-ui-kit");
+var statusToIcon = {
+  "pending": "pending",
+  "in-progress": "running",
+  "done": "completed",
+  "failed": "failed",
+  "blocked": "pending",
+  "cancelled": "failed"
+};
+var statusToLabel = {
+  "pending": "Pending",
+  "in-progress": "In Progress",
+  "done": "Done",
+  "failed": "Failed",
+  "blocked": "Blocked",
+  "cancelled": "Cancelled"
+};
+var headerStyle = {
+  padding: "12px 16px",
+  borderBottom: "1px solid var(--color-border-default)",
+  flexShrink: 0
+};
+var fileItemStyle = {
+  fontFamily: "monospace",
+  fontSize: "12px",
+  color: "var(--color-text-mid)",
+  padding: "2px 4px",
+  borderRadius: "4px"
+};
+var fileItemHoverStyle = {
+  ...fileItemStyle,
+  backgroundColor: "var(--color-surface-elevated)"
+};
+var subtaskRowStyle = {
+  padding: "6px 8px",
+  cursor: "pointer",
+  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;
+  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 () => {
+    try {
+      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.task ?? data;
+      setTask(t);
+      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);
+        }
+      }
+    } catch (err) {
+    }
+  }, [callTool, taskId]);
+  const fetchHistory = useCallback(async () => {
+    try {
+      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) => {
+            const costObj = r.cost && typeof r.cost === "object" ? r.cost : void 0;
+            return { ...r, costDetail: costObj, cost: costObj?.totalCost };
+          })
+        );
+      }
+    } catch {
+    }
+  }, [callTool, taskId]);
+  useEffect2(() => {
+    setLoading(true);
+    Promise.all([fetchTask(), fetchHistory()]).finally(() => setLoading(false));
+  }, [fetchTask, fetchHistory]);
+  useEffect2(() => {
+    if (!task || task.status !== "in-progress") return;
+    const interval = setInterval(() => {
+      fetchTask();
+      fetchHistory();
+    }, 5e3);
+    return () => clearInterval(interval);
+  }, [task?.status, fetchTask, fetchHistory]);
+  const stream = useEventStream();
+  const {
+    timeline: liveTimeline,
+    phase: livePhase,
+    instruction: liveInstruction,
+    elapsed,
+    cost: liveCost,
+    plan,
+    awaitingApproval
+  } = useStreamTimeline(stream.events, stream.isDone);
+  const currentRunId = task?.currentRunId;
+  const isLive = task?.status === "in-progress" && !!currentRunId;
+  useEffect2(() => {
+    if (!isLive || !currentRunId) return;
+    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) => {
+    setExpandedRunId((prev) => prev === id ? null : id);
+  }, []);
+  const scrollRef = useRef2(null);
+  useEffect2(() => {
+    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(() => {
+    if (awaitingApproval) setApprovalStatus("pending");
+  }, [awaitingApproval]);
+  useEffect2(() => {
+    if (stream.events.length === 0) setApprovalStatus(null);
+  }, [stream.events.length]);
+  const handleApprove = useCallback(async () => {
+    setApprovalLoading(true);
+    try {
+      await callTool("fw_weaver_approve", { approved: true });
+      setApprovalStatus("approved");
+      toast("Plan approved", { type: "success" });
+    } catch (err) {
+      toast(err instanceof Error ? err.message : "Failed to approve", { type: "error" });
+    }
+    setApprovalLoading(false);
+  }, [callTool]);
+  const handleReject = useCallback(async () => {
+    setApprovalLoading(true);
+    try {
+      await callTool("fw_weaver_approve", { approved: false });
+      setApprovalStatus("rejected");
+      toast("Plan rejected", { type: "info" });
+    } catch (err) {
+      toast(err instanceof Error ? err.message : "Failed to reject", { type: "error" });
+    }
+    setApprovalLoading(false);
+  }, [callTool]);
+  const runItems = useMemo2(() => {
+    return history.map((run) => ({
+      run,
+      runTimeline: traceToTimeline(run)
+    }));
+  }, [history]);
+  function extractInstruction(run) {
+    if (run.instruction) {
+      const text = run.instruction;
+      return text.length > 120 ? text.slice(0, 117) + "..." : text;
+    }
+    if (run.summary) {
+      const summary = run.summary;
+      if (summary.includes("|")) {
+        const parts = summary.split("|").map((p) => p.trim());
+        const taskPart = parts.find((p) => p.startsWith("Task:"));
+        const summaryPart = parts.find((p) => p.startsWith("Summary:"));
+        const text = taskPart?.replace("Task:", "").trim() ?? summaryPart?.replace("Summary:", "").trim() ?? parts[0] ?? "";
+        return text.length > 120 ? text.slice(0, 117) + "..." : text;
+      }
+      return summary.length > 120 ? summary.slice(0, 117) + "..." : summary;
+    }
+    return "Bot run";
+  }
+  if (loading && !task) {
+    return React2.createElement(
+      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..."
+        )
+      )
+    );
+  }
+  if (!task) {
+    return React2.createElement(
+      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."
+        )
+      )
+    );
+  }
+  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,
+    {
+      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
+      React2.createElement(
+        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: "sm"
+        }),
+        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 tag, assigned profile, priority, attempts
+      React2.createElement(
+        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" : "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: "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.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(
+            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")
+            )
+          ),
+          // 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),
+                      size: "sm"
+                    });
+                  }
+                }
+              ],
+              data: availableProfiles
+            })
+          )
+        ),
+        // ── 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)
+            )
+          ),
+          // 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-6"
+            },
+            React2.createElement(Typography, { variant: "caption-thick", color: "color-text-medium" }, "Run Summaries"),
+            ...(task.context?.runSummaries ?? []).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)}`)
+                ),
+                React2.createElement(Typography, {
+                  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}`)
+              )
+            )
+          ),
+          // 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}${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)}` : ""}`
+              )
+            )
+          )
+        )
+      )
+    )
+  );
+}
+var task_detail_view_default = TaskDetailView;
+module.exports = TaskDetailView;