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

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

@@ -2,7 +2,7 @@
  * Task Detail View — full task detail with context, subtasks, and run history.
  *
  * Shows a single task's complete information:
- * - Header: title, status, assigned bots, priority, attempt count
+ * - Header: title, status, assigned profile, priority, attempt count
  * - Context: files list, notes
  * - Subtasks: list with status icons (clickable)
  * - Run history: each run as a TaskBlock
@@ -12,10 +12,9 @@
 const React = require('react');
 const { useState, useEffect, useCallback, useRef, useMemo } = React;
 const {
-  Flex, Typography, ScrollArea, StatusIcon, Tag, Badge, Icon, TaskBlock, Button,
-  toast, usePackWorkspace, useEventStream,
+  Flex, Typography, ScrollArea, StatusIcon, Tag, Badge, Icon, IconButton, TaskBlock, Button,
+  Card, Chip, Checkbox, Table, Tabs, EmptyState, toast, usePackWorkspace, useEventStream,
 } = require('@fw/plugin-ui-kit');
-const { styled } = require('@fw/plugin-theme');
 
 import { useStreamTimeline } from './use-stream-timeline';
 import { traceToTimeline } from './trace-to-timeline';
@@ -53,7 +52,6 @@ interface Task {
   isParent: boolean;
   parentId?: string;
   dependsOn: string[];
-  assignedBots: string[];
   currentBotId?: string;
   currentRunId?: string;
   context: TaskContext;
@@ -67,6 +65,8 @@ interface Task {
   createdAt: string;
   updatedAt: string;
   completedAt?: string;
+  assignedProfile?: string;
+  routingReason?: string;
 }
 
 interface Subtask {
@@ -74,7 +74,7 @@ interface Subtask {
   title: string;
   status: TaskStatus;
   priority: number;
-  assignedBots: string[];
+  assignedProfile?: string;
   attempt: number;
 }
 
@@ -108,88 +108,94 @@ const statusToLabel: Record<TaskStatus, string> = {
 const priorityLabel = (p: number) => p >= 3 ? 'High' : p === 2 ? 'Medium' : p === 1 ? 'Low' : 'None';
 
 // ---------------------------------------------------------------------------
-// Styled components
+// Inline styles for replaced styled components
 // ---------------------------------------------------------------------------
 
-const Container = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-  height: '100%',
-  overflow: 'hidden',
-});
-
-const Header = styled.div({
+const headerStyle: React.CSSProperties = {
   padding: '12px 16px',
-  borderBottom: '1px solid $color-border-default',
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '8px',
+  borderBottom: '1px solid var(--color-border-default)',
   flexShrink: 0,
-});
-
-const HeaderTopRow = styled.div({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '8px',
-});
-
-const HeaderMeta = styled.div({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '8px',
-  flexWrap: 'wrap',
-});
-
-const Section = styled.div({
-  padding: '12px 16px',
-  borderBottom: '1px solid $color-border-default',
-});
-
-const SectionTitle = styled.div({
-  marginBottom: '8px',
-});
+};
 
-const FileList = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '2px',
-});
+const sectionStyle: React.CSSProperties = {
+  padding: '12px 16px',
+  borderBottom: '1px solid var(--color-border-default)',
+};
 
-const FileItem = styled.div({
+const fileItemStyle: React.CSSProperties = {
   fontFamily: 'monospace',
   fontSize: '12px',
-  color: '$color-text-mid',
+  color: 'var(--color-text-mid)',
   padding: '2px 4px',
   borderRadius: '4px',
-  '&:hover': { backgroundColor: '$color-surface-elevated' },
-});
+};
 
-const NotesBlock = styled.div({
+const fileItemHoverStyle: React.CSSProperties = {
+  ...fileItemStyle,
+  backgroundColor: 'var(--color-surface-elevated)',
+};
+
+const notesBlockStyle: React.CSSProperties = {
   whiteSpace: 'pre-wrap',
   fontSize: '13px',
-  color: '$color-text-mid',
+  color: 'var(--color-text-mid)',
   lineHeight: 1.5,
   padding: '4px 0',
-});
+};
 
-const SubtaskRow = styled.div({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '8px',
+const subtaskRowStyle: React.CSSProperties = {
   padding: '6px 8px',
   cursor: 'pointer',
   borderRadius: '6px',
-  '&:hover': { backgroundColor: '$color-surface-elevated' },
-});
+};
+
+const subtaskRowHoverStyle: React.CSSProperties = {
+  ...subtaskRowStyle,
+  backgroundColor: 'var(--color-surface-elevated)',
+};
 
-const SubtaskTitle = styled.div({
-  flex: 1,
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  minWidth: 0,
-});
+// ---------------------------------------------------------------------------
+// Small hover-wrapper components
+// ---------------------------------------------------------------------------
+
+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);
+}
+
+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(Tag, {
+      size: 'small', color: 'info',
+    }, sub.assignedProfile),
+    React.createElement(Typography, {
+      variant: 'caption-regular',
+      color: 'color-text-subtle',
+    }, `#${sub.attempt}`),
+  );
+}
 
 // ---------------------------------------------------------------------------
 // Component
@@ -209,15 +215,19 @@ function TaskDetailView({ taskId, onBack }: TaskDetailViewProps) {
   // ── Fetch task data ──
   const fetchTask = useCallback(async () => {
     try {
-      const data = (await callTool('fw_weaver_task_get', { id: taskId })) as Record<string, unknown> | null;
+      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 as unknown as Task;
+      const t = (data.task ?? data) as Task;
       setTask(t);
 
-      // If parent task, fetch subtasks from the task list
-      if (t.isParent) {
-        const listData = (await callTool('fw_weaver_task_list', { parentId: taskId })) as unknown[];
+      // Subtasks from response or fetch separately
+      if (data.subtasks && Array.isArray(data.subtasks)) {
+        setSubtasks(data.subtasks as Subtask[]);
+      } 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 as Subtask[]);
         }
@@ -229,7 +239,8 @@ function TaskDetailView({ taskId, onBack }: TaskDetailViewProps) {
 
   const fetchHistory = useCallback(async () => {
     try {
-      const data = (await callTool('fw_weaver_history', { taskId })) as unknown;
+      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: Record<string, unknown>) => {
@@ -280,6 +291,72 @@ function TaskDetailView({ taskId, onBack }: TaskDetailViewProps) {
     return () => stream.stop();
   }, [isLive, currentRunId, packId]);
 
+  // ── Detail tab state ──
+  const [detailTab, setDetailTab] = useState('runs');
+
+  // ── Action state ──
+  const [actionLoading, setActionLoading] = useState<string | null>(null);
+  const [availableProfiles, setAvailableProfiles] = useState<Array<{ id: string; name: string; icon?: string; color?: string }>>([]);
+
+  // Fetch profiles for assign dropdown
+  useEffect(() => {
+    callTool('fw_weaver_profile_list', {}).then((raw: unknown) => {
+      const data = typeof raw === 'string' ? JSON.parse(raw as string) : 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: unknown) {
+      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: unknown) {
+      toast(err instanceof Error ? err.message : 'Failed to cancel', { type: 'error' });
+    }
+    setActionLoading(null);
+  }, [callTool, taskId, fetchTask, ctx]);
+
+  const handleAssignProfile = useCallback(async (profileId: string) => {
+    setActionLoading('assign-profile');
+    try {
+      const newProfile = task?.assignedProfile === profileId ? undefined : profileId;
+      await callTool('fw_weaver_task_update', { id: taskId, assignedProfile: newProfile ?? null });
+      toast(newProfile ? `Assigned profile ${profileId}` : `Unassigned profile`, { type: 'success' });
+      fetchTask();
+    } catch (err: unknown) {
+      toast(err instanceof Error ? err.message : 'Failed to assign profile', { type: 'error' });
+    }
+    setActionLoading(null);
+  }, [callTool, taskId, task, fetchTask]);
+
+  const handlePriorityChange = useCallback(async (delta: number) => {
+    const newPriority = Math.max(0, (task?.priority ?? 0) + delta);
+    try {
+      await callTool('fw_weaver_task_update', { id: taskId, priority: newPriority });
+      fetchTask();
+    } catch { /* non-fatal */ }
+  }, [callTool, taskId, task, fetchTask]);
+
   // ── Run expansion state ──
   const [expandedRunId, setExpandedRunId] = useState<string | null>(null);
   const [liveExpanded, setLiveExpanded] = useState(true);
@@ -361,8 +438,14 @@ function TaskDetailView({ taskId, onBack }: TaskDetailViewProps) {
 
   // ── Loading state ──
   if (loading && !task) {
-    return React.createElement(Container, null,
-      React.createElement(Header, null,
+    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',
@@ -370,7 +453,7 @@ function TaskDetailView({ taskId, onBack }: TaskDetailViewProps) {
       ),
       React.createElement(Flex, {
         variant: 'column-center-center-nowrap-0',
-        style: { flex: 1, padding: '24px' },
+        style: { flex: 1 },
       },
         React.createElement(Typography, { variant: 'caption-regular', color: 'color-text-subtle' },
           'Loading task...',
@@ -380,8 +463,14 @@ function TaskDetailView({ taskId, onBack }: TaskDetailViewProps) {
   }
 
   if (!task) {
-    return React.createElement(Container, null,
-      React.createElement(Header, null,
+    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',
@@ -389,7 +478,7 @@ function TaskDetailView({ taskId, onBack }: TaskDetailViewProps) {
       ),
       React.createElement(Flex, {
         variant: 'column-center-center-nowrap-0',
-        style: { flex: 1, padding: '24px' },
+        style: { flex: 1 },
       },
         React.createElement(Typography, { variant: 'caption-regular', color: 'color-text-subtle' },
           'Task not found.',
@@ -402,187 +491,344 @@ function TaskDetailView({ taskId, onBack }: TaskDetailViewProps) {
   const hasSubtasks = task.isParent && subtasks.length > 0;
   const hasRuns = runItems.length > 0 || isLive;
 
-  return React.createElement(Container, null,
+  return React.createElement(Flex, {
+    variant: 'column-stretch-start-nowrap-0',
+    style: { width: '100%', height: '100%', overflow: 'hidden' },
+  },
     // ── Header ──
-    React.createElement(Header, null,
-      // Back button
-      React.createElement(Button, { variant: 'ghost', size: 'sm', onClick: onBack },
-        React.createElement(Icon, { name: 'arrowBack', size: 16 }),
-        ' Back',
-      ),
-
-      // Title row
-      React.createElement(HeaderTopRow, null,
+    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
+      React.createElement(Flex, { variant: 'row-center-start-nowrap-8' },
+        React.createElement(IconButton, {
+          icon: 'back', size: 'xs', variant: 'clear',
+          onClick: onBack,
+        }),
         React.createElement(StatusIcon, {
           status: statusToIcon[task.status] || 'pending',
-          size: 'md',
+          size: 'sm',
         }),
-        React.createElement(Typography, { variant: 'body-semibold' }, task.title),
+        React.createElement(Typography, {
+          variant: 'caption-thick',
+          color: 'color-text-high',
+          style: { flex: 1, minWidth: 0, wordBreak: 'break-word' },
+        }, task.title || 'Untitled Task'),
       ),
 
-      // Meta row: status label, assigned bots, priority, attempts
-      React.createElement(HeaderMeta, null,
+      // Meta row: status tag, assigned profile, priority, attempts
+      React.createElement(Flex, { variant: 'row-center-start-wrap-6' },
         React.createElement(Tag, {
           size: 'small',
           color: task.status === 'done' ? 'positive'
             : task.status === 'failed' ? 'negative'
             : task.status === 'in-progress' ? 'info'
             : task.status === 'blocked' ? 'caution'
-            : 'default',
-        }, statusToLabel[task.status]),
+            : 'secondary',
+        }, statusToLabel[task.status] || task.status || 'pending'),
 
-        // Assigned bots
-        ...task.assignedBots.map((botId: string) =>
-          React.createElement(Tag, { key: `bot-${botId}`, size: 'small', color: 'info' }, botId),
-        ),
+        task.assignedProfile && React.createElement(Tag, { key: `profile-${task.assignedProfile}`, size: 'small', color: 'info' }, task.assignedProfile),
 
-        // Priority
-        task.priority > 0 && React.createElement(Badge, {
-          variant: task.priority >= 3 ? 'warning' : 'info',
-        }, `P${task.priority} ${priorityLabel(task.priority)}`),
+        task.priority > 0 && React.createElement(Tag, {
+          size: 'small', color: task.priority >= 3 ? 'caution' : 'info',
+        }, `P${task.priority}`),
 
-        // Attempt count
-        React.createElement(Typography, {
-          variant: 'caption-regular',
+        (task.attempt != null && task.maxAttempts != null) && React.createElement(Typography, {
+          variant: 'smallCaption-regular',
           color: 'color-text-subtle',
         }, `Attempt ${task.attempt}/${task.maxAttempts}`),
       ),
 
       // Description
       task.description && React.createElement(Typography, {
-        variant: 'caption-regular',
-        color: 'color-text-mid',
-        style: { marginTop: '4px' },
+        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)
     ),
 
-    // ── Scrollable content ──
+    // ── 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-0' },
+      React.createElement(Flex, { variant: 'column-stretch-start-nowrap-8', style: { padding: '12px 16px' } },
+
+        // ── Runs tab ──
+        detailTab === 'runs' && (hasRuns || (task.runs?.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,
+                  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,
+                phase: livePhase,
+                elapsed,
+                cost: liveCost,
+                plan,
+                error: stream.error,
+                approval: approvalStatus ?? undefined,
+                approvalLoading,
+                onApprove: handleApprove,
+                onReject: handleReject,
+                expanded: liveExpanded,
+                onToggleExpand: () => setLiveExpanded((v: boolean) => !v),
+              }),
+            )
+          : 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 === 'failed' && React.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') && React.createElement(Button, {
+                size: 'xs', variant: 'outlined', color: 'danger',
+                onClick: handleCancel,
+                loading: actionLoading === 'cancel',
+                disabled: !!actionLoading,
+              }, 'Cancel Task'),
+            ),
+          ),
 
-        // ── Context section ──
-        hasContext && React.createElement(Section, null,
-          React.createElement(SectionTitle, null,
-            React.createElement(Typography, { variant: 'caption-semibold', color: 'color-text-high' }, 'Context'),
+          // 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 && React.createElement(Flex, {
+          (task.context?.files?.length ?? 0) > 0 && React.createElement(Flex, {
             variant: 'column-stretch-start-nowrap-4',
-            style: { marginBottom: '8px' },
           },
-            React.createElement(Typography, { variant: 'caption-regular', color: 'color-text-subtle' }, 'Files:'),
-            React.createElement(FileList, null,
-              ...task.context.files.map((file: string) =>
-                React.createElement(FileItem, { key: file }, file),
-              ),
+            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-regular', color: 'color-text-subtle' }, 'Notes:'),
-            React.createElement(NotesBlock, null, task.context.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),
           ),
-        ),
 
-        // ── Subtasks section ──
-        hasSubtasks && React.createElement(Section, null,
-          React.createElement(SectionTitle, null,
-            React.createElement(Typography, { variant: 'caption-semibold', color: 'color-text-high' },
-              `Subtasks (${subtasks.filter((s: Subtask) => s.status === 'done').length}/${subtasks.length} done)`,
-            ),
+          // Last error
+          task.context?.lastError && React.createElement(Flex, {
+            variant: 'column-stretch-start-nowrap-4',
+          },
+            React.createElement(Typography, { variant: 'caption-thick', color: 'color-status-negative' }, 'Last Error'),
+            React.createElement(Typography, {
+              variant: 'smallCaption-regular',
+              color: 'color-text-high',
+              style: { fontFamily: 'var(--font-mono, monospace)', whiteSpace: 'pre-wrap' },
+            }, task.context.lastError),
           ),
-          React.createElement(Flex, { variant: 'column-stretch-start-nowrap-0' },
-            ...subtasks.map((sub: Subtask) =>
-              React.createElement(SubtaskRow, {
-                key: sub.id,
-                onClick: () => {
-                  // Navigate to subtask detail — reuse same callback pattern
-                  // The parent dashboard handles navigation by changing taskId
-                  onBack();
-                  // Small delay so dashboard re-renders, then we'd need parent to support subtask nav
-                  // For now, this is a placeholder — the dashboard's onTaskClick handles it
-                },
+
+          // Run summaries (accumulated context)
+          (task.context?.runSummaries?.length ?? 0) > 0 && React.createElement(Flex, {
+            variant: 'column-stretch-start-nowrap-6',
+          },
+            React.createElement(Typography, { variant: 'caption-thick', color: 'color-text-medium' }, 'Run Summaries'),
+            ...(task.context?.runSummaries ?? []).map((rs: Record<string, unknown>, i: number) =>
+              React.createElement(Card, {
+                key: `rs-${i}`,
+                variant: 'bordered',
+                padding: 'compact',
+                style: { gap: '4px' },
               },
-                React.createElement(StatusIcon, {
-                  status: statusToIcon[sub.status] || 'pending',
-                  size: 'sm',
-                }),
-                React.createElement(SubtaskTitle, null,
-                  React.createElement(Typography, { variant: 'caption-regular' }, sub.title),
+                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)}`),
                 ),
-                sub.assignedBots.length > 0 && React.createElement(Tag, {
-                  size: 'small', color: 'info',
-                }, sub.assignedBots[0]),
                 React.createElement(Typography, {
-                  variant: 'caption-regular',
-                  color: 'color-text-subtle',
-                }, `#${sub.attempt}`),
+                  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.error && React.createElement(Typography, {
+                  variant: 'smallCaption-regular', color: 'color-status-negative',
+                }, `Error: ${rs.error}`),
               ),
             ),
           ),
-        ),
 
-        // ── Run history section ──
-        (hasRuns || task.runs.length > 0) && React.createElement(Section, { style: { borderBottom: 'none' } },
-          React.createElement(SectionTitle, null,
-            React.createElement(Typography, { variant: 'caption-semibold', color: 'color-text-high' },
-              `Run History (${runItems.length}${isLive ? ' + 1 live' : ''})`,
-            ),
-          ),
-          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,
-                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,
-              phase: livePhase,
-              elapsed,
-              cost: liveCost,
-              plan,
-              error: stream.error,
-              approval: approvalStatus ?? undefined,
-              approvalLoading,
-              onApprove: handleApprove,
-              onReject: handleReject,
-              expanded: liveExpanded,
-              onToggleExpand: () => setLiveExpanded((v: boolean) => !v),
-            }),
-          ),
-        ),
-
-        // Empty state when no runs and no live
-        !hasRuns && task.runs.length === 0 && React.createElement(Section, { style: { borderBottom: 'none' } },
-          React.createElement(Flex, {
-            variant: 'column-center-center-nowrap-0',
-            style: { padding: '16px' },
+          // Budget
+          (task.tokensUsed > 0 || task.costUsed > 0) && React.createElement(Flex, {
+            variant: 'column-stretch-start-nowrap-4',
           },
-            React.createElement(Typography, {
-              variant: 'caption-regular',
-              color: 'color-text-subtle',
-            }, 'No runs yet for this task.'),
+            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}${task.budgetTokens ? ` / ${task.budgetTokens.toLocaleString()}` : ''}`),
+              React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-high' },
+                `Cost: $${(task.costUsed ?? 0).toFixed(3)}${task.budgetCost ? ` / $${task.budgetCost.toFixed(2)}` : ''}`),
+            ),
           ),
         ),
       ),