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

package/src/ui/task-detail-view.tsx

@@ -9,12 +9,11 @@
  * - Active run: live streaming via useEventStream
  * - Back button to return to dashboard
  */
-const React = require('react');
-const { useState, useEffect, useCallback, useRef, useMemo } = React;
-const {
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import {
   Flex, Typography, ScrollArea, StatusIcon, Badge, Icon, IconButton, TaskBlock, Button,
   Card, Chip, Checkbox, Table, Tabs, EmptyState, toast, usePackWorkspace, useEventStream,
-} = require('@fw/plugin-ui-kit');
+} from '@fw/plugin-ui-kit';
 
 import { useStreamTimeline } from './use-stream-timeline';
 import { traceToTimeline } from './trace-to-timeline';
@@ -155,36 +154,42 @@ const subtaskRowHoverStyle: React.CSSProperties = {
 
 function FileItemRow({ children }: { children: React.ReactNode }) {
   const [hovered, setHovered] = useState(false);
-  return React.createElement(Flex, {
-    variant: 'row-center-start-nowrap-0',
-    style: hovered ? fileItemHoverStyle : fileItemStyle,
-    onMouseEnter: () => setHovered(true),
-    onMouseLeave: () => setHovered(false),
-  }, children);
+  return (
+    <Flex
+      variant="row-center-start-nowrap-0"
+      style={hovered ? fileItemHoverStyle : fileItemStyle}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {children}
+    </Flex>
+  );
 }
 
 function SubtaskRowItem({ sub, onBack }: { sub: Subtask; onBack: () => void }) {
   const [hovered, setHovered] = useState(false);
-  return React.createElement(Flex, {
-    variant: 'row-center-start-nowrap-8',
-    style: hovered ? subtaskRowHoverStyle : subtaskRowStyle,
-    onClick: () => onBack(),
-    onMouseEnter: () => setHovered(true),
-    onMouseLeave: () => setHovered(false),
-  },
-    React.createElement(StatusIcon, {
-      status: statusToIcon[sub.status] || 'pending',
-      size: 'sm',
-    }),
-    React.createElement(Flex, {
-      variant: 'row-center-start-nowrap-0',
-      style: { flex: 1, minWidth: 0 },
-    },
-      React.createElement(Typography, { variant: 'caption-regular', truncate: true }, sub.title),
-    ),
-    sub.assignedProfile && React.createElement(Chip, {
-      label: sub.assignedProfile, size: 'small', color: 'color-status-info',
-    }),
+  return (
+    <Flex
+      variant="row-center-start-nowrap-8"
+      style={hovered ? subtaskRowHoverStyle : subtaskRowStyle}
+      onClick={() => onBack()}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <StatusIcon
+        status={statusToIcon[sub.status] || 'pending'}
+        size="sm"
+      />
+      <Flex
+        variant="row-center-start-nowrap-0"
+        style={{ flex: 1, minWidth: 0 }}
+      >
+        <Typography variant="caption-regular" truncate={true}>{sub.title}</Typography>
+      </Flex>
+      {sub.assignedProfile && (
+        <Chip label={sub.assignedProfile} size="small" color="color-status-info" />
+      )}
+    </Flex>
   );
 }
 
@@ -197,13 +202,13 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
   const { callTool } = ctx;
   const packId = ctx.packId;
 
-  // ── Task data ──
+  // -- Task data --
   const [task, setTask] = useState<Task | null>(null);
   const [subtasks, setSubtasks] = useState<Subtask[]>([]);
   const [history, setHistory] = useState<HistoricalRun[]>([]);
   const [loading, setLoading] = useState(true);
 
-  // ── Fetch task data ──
+  // -- Fetch task data --
   const fetchTask = useCallback(async () => {
     try {
       const raw = await callTool('fw_weaver_task_get', { id: taskId });
@@ -284,7 +289,7 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
     return () => clearInterval(interval);
   }, [task?.status, fetchTask, fetchHistory]);
 
-  // ── Live streaming for active run ──
+  // -- Live streaming for active run --
   const stream = useEventStream();
   const {
     timeline: liveTimeline,
@@ -306,10 +311,10 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
     return () => stream.stop();
   }, [isLive, activeRunId, packId]);
 
-  // ── Detail tab state ──
+  // -- Detail tab state --
   const [detailTab, setDetailTab] = useState('runs');
 
-  // ── Action state ──
+  // -- Action state --
   const [actionLoading, setActionLoading] = useState<string | null>(null);
   const [availableProfiles, setAvailableProfiles] = useState<Array<{ id: string; name: string; icon?: string; color?: string }>>([]);
 
@@ -372,7 +377,7 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
     } catch { /* non-fatal */ }
   }, [callTool, taskId, task, fetchTask]);
 
-  // ── Run expansion state ──
+  // -- Run expansion state --
   const [expandedRunId, setExpandedRunId] = useState<string | null>(null);
   const [liveExpanded, setLiveExpanded] = useState(true);
 
@@ -380,14 +385,14 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
     setExpandedRunId((prev: string | null) => (prev === id ? null : id));
   }, []);
 
-  // ── Auto-scroll ──
+  // -- Auto-scroll --
   const scrollRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     const el = scrollRef.current;
     if (el) el.scrollTop = el.scrollHeight;
   }, [liveTimeline.length, stream.events.length]);
 
-  // ── Approval handling ──
+  // -- Approval handling --
   const [approvalStatus, setApprovalStatus] = useState<'pending' | 'approved' | 'rejected' | null>(null);
   const [approvalLoading, setApprovalLoading] = useState(false);
 
@@ -423,7 +428,7 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
     setApprovalLoading(false);
   }, [callTool]);
 
-  // ── Build run timeline entries from history ──
+  // -- Build run timeline entries from history --
   const runItems = useMemo(() => {
     return history.map((run: HistoricalRun) => ({
       run,
@@ -431,24 +436,19 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
     }));
   }, [history]);
 
-  // ── Extract instruction from run ──
-  // The run.instruction may be a raw markdown prompt ("## Task: Title\n\n...")
-  // or a plain string. Extract just the title for display.
+  // -- Extract instruction from run --
   function extractInstruction(run: HistoricalRun): string {
     if (run.instruction) {
       const text = run.instruction;
-      // Extract title from markdown prompt format: "## Task: Title\n\n..."
       const titleMatch = text.match(/^##\s*Task:\s*(.+)/m);
       if (titleMatch) {
         const title = titleMatch[1].trim();
         return title.length > 120 ? title.slice(0, 117) + '...' : title;
       }
-      // Extract from "Task: Title | ..." pipe-separated summary
       if (text.startsWith('Task:')) {
         const title = text.split('|')[0].replace('Task:', '').trim();
         return title.length > 120 ? title.slice(0, 117) + '...' : title;
       }
-      // Plain instruction — use first line only
       const firstLine = text.split('\n')[0].trim();
       return firstLine.length > 120 ? firstLine.slice(0, 117) + '...' : firstLine;
     }
@@ -463,58 +463,49 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
       }
       return summary.length > 120 ? summary.slice(0, 117) + '...' : summary;
     }
-    // Fall back to task title if available
     return task?.title ?? 'Bot run';
   }
 
-  // ── Loading state ──
+  // -- Loading state --
   if (loading && !task) {
-    return React.createElement(Flex, {
-      variant: 'column-stretch-start-nowrap-0',
-      style: { width: '100%', height: '100%', overflow: 'hidden' },
-    },
-      React.createElement(Flex, {
-        variant: 'column-stretch-start-nowrap-8',
-        style: headerStyle,
-      },
-        React.createElement(Button, { variant: 'ghost', size: 'sm', onClick: onBack },
-          React.createElement(Icon, { name: 'arrowBack', size: 16 }),
-          ' Back',
-        ),
-      ),
-      React.createElement(Flex, {
-        variant: 'column-center-center-nowrap-0',
-        style: { flex: 1 },
-      },
-        React.createElement(Typography, { variant: 'caption-regular', color: 'color-text-subtle' },
-          'Loading task...',
-        ),
-      ),
+    return (
+      <Flex
+        variant="column-stretch-start-nowrap-0"
+        style={{ width: '100%', height: '100%', overflow: 'hidden' }}
+      >
+        <Flex variant="column-stretch-start-nowrap-8" style={headerStyle}>
+          <Button variant="ghost" size="sm" onClick={onBack}>
+            <Icon name="arrowBack" size={16} />
+            {' Back'}
+          </Button>
+        </Flex>
+        <Flex variant="column-center-center-nowrap-0" style={{ flex: 1 }}>
+          <Typography variant="caption-regular" color="color-text-subtle">
+            Loading task...
+          </Typography>
+        </Flex>
+      </Flex>
     );
   }
 
   if (!task) {
-    return React.createElement(Flex, {
-      variant: 'column-stretch-start-nowrap-0',
-      style: { width: '100%', height: '100%', overflow: 'hidden' },
-    },
-      React.createElement(Flex, {
-        variant: 'column-stretch-start-nowrap-8',
-        style: headerStyle,
-      },
-        React.createElement(Button, { variant: 'ghost', size: 'sm', onClick: onBack },
-          React.createElement(Icon, { name: 'arrowBack', size: 16 }),
-          ' Back',
-        ),
-      ),
-      React.createElement(Flex, {
-        variant: 'column-center-center-nowrap-0',
-        style: { flex: 1 },
-      },
-        React.createElement(Typography, { variant: 'caption-regular', color: 'color-text-subtle' },
-          'Task not found.',
-        ),
-      ),
+    return (
+      <Flex
+        variant="column-stretch-start-nowrap-0"
+        style={{ width: '100%', height: '100%', overflow: 'hidden' }}
+      >
+        <Flex variant="column-stretch-start-nowrap-8" style={headerStyle}>
+          <Button variant="ghost" size="sm" onClick={onBack}>
+            <Icon name="arrowBack" size={16} />
+            {' Back'}
+          </Button>
+        </Flex>
+        <Flex variant="column-center-center-nowrap-0" style={{ flex: 1 }}>
+          <Typography variant="caption-regular" color="color-text-subtle">
+            Task not found.
+          </Typography>
+        </Flex>
+      </Flex>
     );
   }
 
@@ -522,348 +513,414 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
   const hasSubtasks = task.isParent && subtasks.length > 0;
   const hasRuns = runItems.length > 0 || isLive;
 
-  return React.createElement(Flex, {
-    variant: 'column-stretch-start-nowrap-0',
-    style: { width: '100%', height: '100%', overflow: 'hidden' },
-  },
-    // ── Header ──
-    React.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
-      React.createElement(Flex, { variant: 'row-center-space-between-nowrap-8' },
-        React.createElement(Flex, { variant: 'row-center-start-nowrap-8', style: { flex: 1, minWidth: 0 } },
-          React.createElement(IconButton, {
-            icon: 'back', size: 'xs', variant: 'clear',
-            onClick: onBack,
-          }),
-          React.createElement(StatusIcon, {
-            status: statusToIcon[task.status] || 'pending',
-            size: 'sm',
-          }),
-          React.createElement(Typography, {
-            variant: 'caption-thick',
-            color: 'color-text-high',
-            style: { flex: 1, minWidth: 0, wordBreak: 'break-word' },
-          }, task.title || 'Untitled Task'),
-        ),
-        onEdit && React.createElement(IconButton, {
-          icon: 'edit', size: 'xs', variant: 'clear',
-          onClick: () => onEdit(taskId),
-          title: 'Edit task',
-        }),
-      ),
-
-      // Meta row: status tag, assigned profile, priority, attempts
-      React.createElement(Flex, { variant: 'row-center-start-wrap-6' },
-        React.createElement(Chip, {
-          label: statusToLabel[task.status as TaskStatus] || 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 && React.createElement(Chip, { key: `profile-${task.assignedProfile}`, label: task.assignedProfile, size: 'small', color: 'color-status-info' }),
-
-        task.priority > 0 && React.createElement(Chip, {
-          label: `P${task.priority}`, size: 'small', color: task.priority >= 3 ? 'color-status-caution' : 'color-status-info',
-        }),
-
-        (task.context?.runHistory?.length ?? 0) > 0 && React.createElement(Typography, {
-          variant: 'smallCaption-regular',
-          color: 'color-text-subtle',
-        }, `${task.context.runHistory.length} run${task.context.runHistory.length !== 1 ? 's' : ''}`),
-      ),
-
-      // Description
-      task.description && React.createElement(Typography, {
-        variant: 'smallCaption-regular',
-        color: 'color-text-medium',
-      }, task.description),
-
-      // Profile routing info
-      task.assignedProfile && React.createElement(Flex, { variant: 'column-stretch-start-nowrap-2' },
-        React.createElement(Typography, {
-          variant: 'smallCaption-regular',
-          color: 'color-text-medium',
-        }, `Profile: ${task.assignedProfile}`),
-        task.routingReason && React.createElement(Typography, {
-          variant: 'smallCaption-regular',
-          color: 'color-text-subtle',
-        }, task.routingReason),
-      ),
-
-      // (Actions moved to tab)
-    ),
-
-    // ── Tabs ──
-    React.createElement(Tabs, {
-      tabs: [
-        { id: 'runs', title: `Runs (${runItems.length}${isLive ? '+1' : ''})` },
-        ...(hasSubtasks ? [{ id: 'subtasks', title: `Subtasks (${subtasks.filter((s: Subtask) => 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: string) => setDetailTab(id),
-      size: 'sm',
-    }),
-
-    // ── Tab content ──
-    React.createElement(ScrollArea, { ref: scrollRef, style: { flex: 1 } },
-      React.createElement(Flex, { variant: 'column-stretch-start-nowrap-8', style: { padding: '12px 16px' } },
-
-        // ── Runs tab ──
-        detailTab === 'runs' && (hasRuns || (task.context?.runHistory?.length ?? 0) > 0)
-          ? React.createElement(Flex, { variant: 'column-stretch-start-nowrap-8' },
-              // Historical runs
-              ...runItems.map(({ run, runTimeline }: { run: HistoricalRun; runTimeline: Array<Record<string, unknown>> }) => {
-                const runId = run.id;
-                const isExpanded = expandedRunId === runId;
-                const isSuccess = run.outcome === 'completed' || run.success === true;
-                return React.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 as number) ?? null),
-                  plan: run.plan,
-                  startedAt: run.startedAt,
-                  durationMs: run.durationMs ?? run.duration,
-                  expanded: isExpanded,
-                  onToggleExpand: () => toggleExpand(runId),
-                });
-              }),
-              // Live run
-              isLive && React.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 ?? undefined,
-                approvalLoading,
-                onApprove: handleApprove,
-                onReject: handleReject,
-                expanded: liveExpanded,
-                onToggleExpand: () => setLiveExpanded((v: boolean) => !v),
-              }),
+  return (
+    <Flex
+      variant="column-stretch-start-nowrap-0"
+      style={{ width: '100%', height: '100%', overflow: 'hidden' }}
+    >
+      {/* -- Header -- */}
+      <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 */}
+        <Flex variant="row-center-space-between-nowrap-8">
+          <Flex variant="row-center-start-nowrap-8" style={{ flex: 1, minWidth: 0 }}>
+            <IconButton
+              icon="back"
+              size="xs"
+              variant="clear"
+              onClick={onBack}
+            />
+            <StatusIcon
+              status={statusToIcon[task.status] || 'pending'}
+              size="sm"
+            />
+            <Typography
+              variant="caption-thick"
+              color="color-text-high"
+              style={{ flex: 1, minWidth: 0, wordBreak: 'break-word' }}
+            >
+              {task.title || 'Untitled Task'}
+            </Typography>
+          </Flex>
+          {onEdit && (
+            <IconButton
+              icon="edit"
+              size="xs"
+              variant="clear"
+              onClick={() => onEdit(taskId)}
+              title="Edit task"
+            />
+          )}
+        </Flex>
+
+        {/* Meta row: status tag, assigned profile, priority, attempts */}
+        <Flex variant="row-center-start-wrap-6">
+          <Chip
+            label={statusToLabel[task.status as TaskStatus] || 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 && (
+            <Chip key={`profile-${task.assignedProfile}`} label={task.assignedProfile} size="small" color="color-status-info" />
+          )}
+
+          {task.priority > 0 && (
+            <Chip
+              label={`P${task.priority}`}
+              size="small"
+              color={task.priority >= 3 ? 'color-status-caution' : 'color-status-info'}
+            />
+          )}
+
+          {(task.context?.runHistory?.length ?? 0) > 0 && (
+            <Typography variant="smallCaption-regular" color="color-text-subtle">
+              {`${task.context.runHistory.length} run${task.context.runHistory.length !== 1 ? 's' : ''}`}
+            </Typography>
+          )}
+        </Flex>
+
+        {/* Description */}
+        {task.description && (
+          <Typography variant="smallCaption-regular" color="color-text-medium">
+            {task.description}
+          </Typography>
+        )}
+
+        {/* Profile routing info */}
+        {task.assignedProfile && (
+          <Flex variant="column-stretch-start-nowrap-2">
+            <Typography variant="smallCaption-regular" color="color-text-medium">
+              {`Profile: ${task.assignedProfile}`}
+            </Typography>
+            {task.routingReason && (
+              <Typography variant="smallCaption-regular" color="color-text-subtle">
+                {task.routingReason}
+              </Typography>
+            )}
+          </Flex>
+        )}
+      </Flex>
+
+      {/* -- Tabs -- */}
+      <Tabs
+        tabs={[
+          { id: 'runs', title: `Runs (${runItems.length}${isLive ? '+1' : ''})` },
+          ...(hasSubtasks ? [{ id: 'subtasks', title: `Subtasks (${subtasks.filter((s: Subtask) => 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: string) => setDetailTab(id)}
+        size="sm"
+      />
+
+      {/* -- Tab content -- */}
+      <ScrollArea ref={scrollRef} style={{ flex: 1 }}>
+        <Flex variant="column-stretch-start-nowrap-8" style={{ padding: '12px 16px' }}>
+
+          {/* -- Runs tab -- */}
+          {detailTab === 'runs' && (hasRuns || (task.context?.runHistory?.length ?? 0) > 0)
+            ? (
+              <Flex variant="column-stretch-start-nowrap-8">
+                {/* Historical runs */}
+                {runItems.map(({ run, runTimeline }: { run: HistoricalRun; runTimeline: Array<Record<string, unknown>> }) => {
+                  const runId = run.id;
+                  const isExpanded = expandedRunId === runId;
+                  const isSuccess = run.outcome === 'completed' || run.success === true;
+                  return (
+                    <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 as number) ?? null)}
+                      plan={run.plan}
+                      startedAt={run.startedAt}
+                      durationMs={run.durationMs ?? run.duration}
+                      expanded={isExpanded}
+                      onToggleExpand={() => toggleExpand(runId)}
+                    />
+                  );
+                })}
+                {/* Live run */}
+                {isLive && (
+                  <TaskBlock
+                    key="live-run"
+                    state="running"
+                    instruction={liveInstruction ?? task.title}
+                    timeline={liveTimeline}
+                    report={liveReport}
+                    phase={livePhase}
+                    elapsed={elapsed}
+                    cost={liveCost}
+                    plan={plan}
+                    error={stream.error}
+                    approval={approvalStatus ?? undefined}
+                    approvalLoading={approvalLoading}
+                    onApprove={handleApprove}
+                    onReject={handleReject}
+                    expanded={liveExpanded}
+                    onToggleExpand={() => setLiveExpanded((v: boolean) => !v)}
+                  />
+                )}
+              </Flex>
             )
-          : detailTab === 'runs' && React.createElement(EmptyState, {
-              icon: 'smartToy',
-              message: 'No runs yet',
-              description: 'This task has not been executed yet.',
-            }),
-
-        // ── Subtasks tab ──
-        detailTab === 'subtasks' && hasSubtasks && React.createElement(Flex, {
-          variant: 'column-stretch-start-nowrap-0',
-        },
-          ...(subtasks ?? []).map((sub: Subtask) =>
-            React.createElement(SubtaskRowItem, {
-              key: sub.id,
-              sub,
-              onBack,
-            }),
-          ),
-        ),
-
-        // ── Actions tab ──
-        detailTab === 'actions' && React.createElement(Flex, {
-          variant: 'column-stretch-start-nowrap-16',
-        },
-          // Status actions
-          React.createElement(Flex, { variant: 'column-stretch-start-nowrap-8' },
-            React.createElement(Typography, { variant: 'caption-thick', color: 'color-text-medium' }, 'Status'),
-            React.createElement(Flex, { variant: 'row-center-start-nowrap-6' },
-              (task.status === 'open' && (task.context?.runHistory?.length ?? 0) > 0) && React.createElement(Button, {
-                size: 'xs', variant: 'fill', color: 'primary',
-                onClick: handleRetry,
-                loading: actionLoading === 'retry',
-                disabled: !!actionLoading,
-              }, 'Retry Task'),
-
-              (task.status === 'open' || task.status === 'in-progress') && React.createElement(Button, {
-                size: 'xs', variant: 'outlined', color: 'danger',
-                onClick: handleCancel,
-                loading: actionLoading === 'cancel',
-                disabled: !!actionLoading,
-              }, 'Cancel Task'),
-            ),
-          ),
-
-          // Priority
-          React.createElement(Flex, { variant: 'column-stretch-start-nowrap-8' },
-            React.createElement(Typography, { variant: 'caption-thick', color: 'color-text-medium' }, 'Priority'),
-            React.createElement(Flex, { variant: 'row-center-start-nowrap-8' },
-              React.createElement(IconButton, {
-                icon: 'expandLess', size: 'xs', variant: 'outlined',
-                onClick: () => handlePriorityChange(1),
-                title: 'Increase priority',
-              }),
-              React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-high' },
-                `P${task.priority ?? 0}`),
-              React.createElement(IconButton, {
-                icon: 'expandMore', size: 'xs', variant: 'outlined',
-                onClick: () => handlePriorityChange(-1),
-                title: 'Decrease priority',
-              }),
-            ),
-          ),
-
-          // Assign Profile
-          availableProfiles.length > 0 && React.createElement(Flex, { variant: 'column-stretch-start-nowrap-8' },
-            React.createElement(Typography, { variant: 'caption-thick', color: 'color-text-medium' }, 'Assign Profile'),
-            React.createElement(Table, {
-              size: 'compact',
-              getRowKey: (row: Record<string, unknown>) => row.id as string,
-              columns: [
-                {
-                  key: 'icon',
-                  header: '',
-                  width: '30px',
-                  render: (_: unknown, row: Record<string, unknown>) =>
-                    React.createElement(Icon, {
-                      name: (row.icon as string) || 'smartToy',
-                      size: 14,
-                      color: (row.color as string) || 'color-text-medium',
-                    }),
-                },
-                {
-                  key: 'name',
-                  header: 'Profile',
-                },
-                {
-                  key: 'capabilities',
-                  header: 'Capabilities',
-                  render: (_: unknown, row: Record<string, unknown>) => {
-                    const caps = (row.capabilities as Array<{ name: string; description: string }>) || [];
-                    if (caps.length === 0) return null;
-                    return React.createElement(Flex, { variant: 'row-center-start-wrap-4' },
-                      ...caps.slice(0, 4).map((cap) =>
-                        React.createElement('span', { key: cap.name, title: cap.description },
-                          React.createElement(Chip, { label: cap.name, size: 'small', color: 'color-brand-main' }),
-                        )
-                      ),
-                      caps.length > 4 && React.createElement(Typography, {
-                        variant: 'smallCaption-regular', color: 'color-text-subtle',
-                      }, `+${caps.length - 4}`),
-                    );
-                  },
-                },
-                {
-                  key: 'assigned',
-                  header: 'Assign',
-                  width: '50px',
-                  align: 'right' as const,
-                  render: (_: unknown, row: Record<string, unknown>) => {
-                    const isAssigned = task.assignedProfile === (row.id as string);
-                    return React.createElement(Checkbox, {
-                      checked: isAssigned,
-                      onChange: () => handleAssignProfile(row.id as string),
-                      size: 'sm',
-                    });
-                  },
-                },
-              ],
-              data: availableProfiles,
-            }),
-          ),
-        ),
-
-        // ── Context tab ──
-        detailTab === 'context' && hasContext && React.createElement(Flex, {
-          variant: 'column-stretch-start-nowrap-12',
-        },
-          // Files
-          (task.context?.files?.length ?? 0) > 0 && React.createElement(Flex, {
-            variant: 'column-stretch-start-nowrap-4',
-          },
-            React.createElement(Typography, { variant: 'caption-thick', color: 'color-text-medium' }, 'Files'),
-            ...(task.context?.files ?? []).map((file: string) =>
-              React.createElement(Typography, {
-                key: file,
-                variant: 'smallCaption-regular',
-                color: 'color-text-high',
-                style: { fontFamily: 'var(--font-mono, monospace)' },
-              }, file),
-            ),
-          ),
-
-          // Notes
-          task.context?.notes && React.createElement(Flex, {
-            variant: 'column-stretch-start-nowrap-4',
-          },
-            React.createElement(Typography, { variant: 'caption-thick', color: 'color-text-medium' }, 'Notes'),
-            React.createElement(Typography, {
-              variant: 'smallCaption-regular',
-              color: 'color-text-high',
-              style: { whiteSpace: 'pre-wrap' },
-            }, task.context.notes),
-          ),
-
-          // Run history (accumulated context)
-          (task.context?.runHistory?.length ?? 0) > 0 && React.createElement(Flex, {
-            variant: 'column-stretch-start-nowrap-6',
-          },
-            React.createElement(Typography, { variant: 'caption-thick', color: 'color-text-medium' }, 'Run History'),
-            ...(task.context?.runHistory ?? []).map((rs: Record<string, unknown>, i: number) =>
-              React.createElement(Card, {
-                key: `rs-${i}`,
-                variant: 'bordered',
-                padding: 'compact',
-                style: { gap: '4px' },
-              },
-                React.createElement(Flex, { variant: 'row-center-space-between-nowrap-8' },
-                  React.createElement(Typography, {
-                    variant: 'smallCaption-thick',
-                    color: rs.outcome === 'success' ? 'color-status-positive' : 'color-status-negative',
-                  }, `${rs.outcome === 'success' ? 'Success' : 'Failed'} (${(rs as Record<string, unknown>).botId ?? 'unknown bot'})`),
-                  React.createElement(Typography, {
-                    variant: 'smallCaption-regular', color: 'color-text-subtle',
-                  }, `${Math.round((rs.durationMs as number ?? 0) / 1000)}s · ${rs.tokensUsed ?? 0} tok · $${((rs.cost as number) ?? 0).toFixed(3)}`),
-                ),
-                React.createElement(Typography, {
-                  variant: 'smallCaption-regular', color: 'color-text-medium',
-                }, rs.summary as string ?? ''),
-                (rs.filesModified as string[] ?? []).length > 0 && React.createElement(Typography, {
-                  variant: 'smallCaption-regular', color: 'color-text-subtle',
-                  style: { fontFamily: 'var(--font-mono, monospace)' },
-                }, `Files: ${(rs.filesModified as string[]).join(', ')}`),
-                rs.remainingWork && React.createElement(Typography, {
-                  variant: 'smallCaption-regular', color: 'color-status-caution',
-                }, `Remaining: ${rs.remainingWork}`),
-              ),
-            ),
-          ),
-
-          // Budget
-          (task.tokensUsed > 0 || task.costUsed > 0) && React.createElement(Flex, {
-            variant: 'column-stretch-start-nowrap-4',
-          },
-            React.createElement(Typography, { variant: 'caption-thick', color: 'color-text-medium' }, 'Budget'),
-            React.createElement(Flex, { variant: 'row-center-start-nowrap-16' },
-              React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-high' },
-                `Tokens: ${task.tokensUsed?.toLocaleString() ?? 0}`),
-              React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-high' },
-                `Cost: $${(task.costUsed ?? 0).toFixed(3)}${task.budgetCost ? ` / $${task.budgetCost.toFixed(2)}` : ''}`),
-            ),
-          ),
-        ),
-      ),
-    ),
+            : detailTab === 'runs' && (
+              <EmptyState
+                icon="smartToy"
+                message="No runs yet"
+                description="This task has not been executed yet."
+              />
+            )}
+
+          {/* -- Subtasks tab -- */}
+          {detailTab === 'subtasks' && hasSubtasks && (
+            <Flex variant="column-stretch-start-nowrap-0">
+              {(subtasks ?? []).map((sub: Subtask) => (
+                <SubtaskRowItem
+                  key={sub.id}
+                  sub={sub}
+                  onBack={onBack}
+                />
+              ))}
+            </Flex>
+          )}
+
+          {/* -- Actions tab -- */}
+          {detailTab === 'actions' && (
+            <Flex variant="column-stretch-start-nowrap-16">
+              {/* Status actions */}
+              <Flex variant="column-stretch-start-nowrap-8">
+                <Typography variant="caption-thick" color="color-text-medium">Status</Typography>
+                <Flex variant="row-center-start-nowrap-6">
+                  {(task.status === 'open' && (task.context?.runHistory?.length ?? 0) > 0) && (
+                    <Button
+                      size="xs"
+                      variant="fill"
+                      color="primary"
+                      onClick={handleRetry}
+                      loading={actionLoading === 'retry'}
+                      disabled={!!actionLoading}
+                    >
+                      Retry Task
+                    </Button>
+                  )}
+
+                  {(task.status === 'open' || task.status === 'in-progress') && (
+                    <Button
+                      size="xs"
+                      variant="outlined"
+                      color="danger"
+                      onClick={handleCancel}
+                      loading={actionLoading === 'cancel'}
+                      disabled={!!actionLoading}
+                    >
+                      Cancel Task
+                    </Button>
+                  )}
+                </Flex>
+              </Flex>
+
+              {/* Priority */}
+              <Flex variant="column-stretch-start-nowrap-8">
+                <Typography variant="caption-thick" color="color-text-medium">Priority</Typography>
+                <Flex variant="row-center-start-nowrap-8">
+                  <IconButton
+                    icon="expandLess"
+                    size="xs"
+                    variant="outlined"
+                    onClick={() => handlePriorityChange(1)}
+                    title="Increase priority"
+                  />
+                  <Typography variant="smallCaption-regular" color="color-text-high">
+                    {`P${task.priority ?? 0}`}
+                  </Typography>
+                  <IconButton
+                    icon="expandMore"
+                    size="xs"
+                    variant="outlined"
+                    onClick={() => handlePriorityChange(-1)}
+                    title="Decrease priority"
+                  />
+                </Flex>
+              </Flex>
+
+              {/* Assign Profile */}
+              {availableProfiles.length > 0 && (
+                <Flex variant="column-stretch-start-nowrap-8">
+                  <Typography variant="caption-thick" color="color-text-medium">Assign Profile</Typography>
+                  <Table
+                    size="compact"
+                    getRowKey={(row: Record<string, unknown>) => row.id as string}
+                    columns={[
+                      {
+                        key: 'icon',
+                        header: '',
+                        width: '30px',
+                        render: (_: unknown, row: Record<string, unknown>) => (
+                          <Icon
+                            name={(row.icon as string) || 'smartToy'}
+                            size={14}
+                            color={(row.color as string) || 'color-text-medium'}
+                          />
+                        ),
+                      },
+                      {
+                        key: 'name',
+                        header: 'Profile',
+                      },
+                      {
+                        key: 'capabilities',
+                        header: 'Capabilities',
+                        render: (_: unknown, row: Record<string, unknown>) => {
+                          const caps = (row.capabilities as Array<{ name: string; description: string }>) || [];
+                          if (caps.length === 0) return null;
+                          return (
+                            <Flex variant="row-center-start-wrap-4">
+                              {caps.slice(0, 4).map((cap) => (
+                                <span key={cap.name} title={cap.description}>
+                                  <Chip label={cap.name} size="small" color="color-brand-main" />
+                                </span>
+                              ))}
+                              {caps.length > 4 && (
+                                <Typography variant="smallCaption-regular" color="color-text-subtle">
+                                  {`+${caps.length - 4}`}
+                                </Typography>
+                              )}
+                            </Flex>
+                          );
+                        },
+                      },
+                      {
+                        key: 'assigned',
+                        header: 'Assign',
+                        width: '50px',
+                        align: 'right' as const,
+                        render: (_: unknown, row: Record<string, unknown>) => {
+                          const isAssigned = task.assignedProfile === (row.id as string);
+                          return (
+                            <Checkbox
+                              checked={isAssigned}
+                              onChange={() => handleAssignProfile(row.id as string)}
+                              size="sm"
+                            />
+                          );
+                        },
+                      },
+                    ]}
+                    data={availableProfiles}
+                  />
+                </Flex>
+              )}
+            </Flex>
+          )}
+
+          {/* -- Context tab -- */}
+          {detailTab === 'context' && hasContext && (
+            <Flex variant="column-stretch-start-nowrap-12">
+              {/* Files */}
+              {(task.context?.files?.length ?? 0) > 0 && (
+                <Flex variant="column-stretch-start-nowrap-4">
+                  <Typography variant="caption-thick" color="color-text-medium">Files</Typography>
+                  {(task.context?.files ?? []).map((file: string) => (
+                    <Typography
+                      key={file}
+                      variant="smallCaption-regular"
+                      color="color-text-high"
+                      style={{ fontFamily: 'var(--font-mono, monospace)' }}
+                    >
+                      {file}
+                    </Typography>
+                  ))}
+                </Flex>
+              )}
+
+              {/* Notes */}
+              {task.context?.notes && (
+                <Flex variant="column-stretch-start-nowrap-4">
+                  <Typography variant="caption-thick" color="color-text-medium">Notes</Typography>
+                  <Typography
+                    variant="smallCaption-regular"
+                    color="color-text-high"
+                    style={{ whiteSpace: 'pre-wrap' }}
+                  >
+                    {task.context.notes}
+                  </Typography>
+                </Flex>
+              )}
+
+              {/* Run history (accumulated context) */}
+              {(task.context?.runHistory?.length ?? 0) > 0 && (
+                <Flex variant="column-stretch-start-nowrap-6">
+                  <Typography variant="caption-thick" color="color-text-medium">Run History</Typography>
+                  {(task.context?.runHistory ?? []).map((rs: Record<string, unknown>, i: number) => (
+                    <Card
+                      key={`rs-${i}`}
+                      variant="bordered"
+                      padding="compact"
+                      style={{ gap: '4px' }}
+                    >
+                      <Flex variant="row-center-space-between-nowrap-8">
+                        <Typography
+                          variant="smallCaption-thick"
+                          color={rs.outcome === 'success' ? 'color-status-positive' : 'color-status-negative'}
+                        >
+                          {`${rs.outcome === 'success' ? 'Success' : 'Failed'} (${(rs as Record<string, unknown>).botId ?? 'unknown bot'})`}
+                        </Typography>
+                        <Typography variant="smallCaption-regular" color="color-text-subtle">
+                          {`${Math.round((rs.durationMs as number ?? 0) / 1000)}s · ${rs.tokensUsed ?? 0} tok · $${((rs.cost as number) ?? 0).toFixed(3)}`}
+                        </Typography>
+                      </Flex>
+                      <Typography variant="smallCaption-regular" color="color-text-medium">
+                        {rs.summary as string ?? ''}
+                      </Typography>
+                      {(rs.filesModified as string[] ?? []).length > 0 && (
+                        <Typography
+                          variant="smallCaption-regular"
+                          color="color-text-subtle"
+                          style={{ fontFamily: 'var(--font-mono, monospace)' }}
+                        >
+                          {`Files: ${(rs.filesModified as string[]).join(', ')}`}
+                        </Typography>
+                      )}
+                      {rs.remainingWork && (
+                        <Typography variant="smallCaption-regular" color="color-status-caution">
+                          {`Remaining: ${rs.remainingWork}`}
+                        </Typography>
+                      )}
+                    </Card>
+                  ))}
+                </Flex>
+              )}
+
+              {/* Budget */}
+              {(task.tokensUsed > 0 || task.costUsed > 0) && (
+                <Flex variant="column-stretch-start-nowrap-4">
+                  <Typography variant="caption-thick" color="color-text-medium">Budget</Typography>
+                  <Flex variant="row-center-start-nowrap-16">
+                    <Typography variant="smallCaption-regular" color="color-text-high">
+                      {`Tokens: ${task.tokensUsed?.toLocaleString() ?? 0}`}
+                    </Typography>
+                    <Typography variant="smallCaption-regular" color="color-text-high">
+                      {`Cost: $${(task.costUsed ?? 0).toFixed(3)}${task.budgetCost ? ` / $${task.budgetCost.toFixed(2)}` : ''}`}
+                    </Typography>
+                  </Flex>
+                </Flex>
+              )}
+            </Flex>
+          )}
+        </Flex>
+      </ScrollArea>
+    </Flex>
   );
 }
 
 export { TaskDetailView };
 export default TaskDetailView;
-module.exports = TaskDetailView;