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

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

@@ -0,0 +1,841 @@
+/**
+ * Task Detail View — full task detail with context, subtasks, and run history.
+ *
+ * Shows a single task's complete information:
+ * - 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
+ * - Active run: live streaming via useEventStream
+ * - Back button to return to dashboard
+ */
+const React = require('react');
+const { useState, useEffect, useCallback, useRef, useMemo } = React;
+const {
+  Flex, Typography, ScrollArea, StatusIcon, Tag, Badge, Icon, IconButton, TaskBlock, Button,
+  Card, Chip, Checkbox, Table, Tabs, EmptyState, toast, usePackWorkspace, useEventStream,
+} = require('@fw/plugin-ui-kit');
+
+import { useStreamTimeline } from './use-stream-timeline';
+import { traceToTimeline } from './trace-to-timeline';
+import type { HistoricalRun } from './trace-to-timeline';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type TaskStatus = 'pending' | 'in-progress' | 'blocked' | 'done' | 'failed' | 'cancelled';
+
+interface TaskContext {
+  files: string[];
+  notes: string;
+  runSummaries: Array<{
+    runId: string;
+    botId: string;
+    outcome: string;
+    summary: string;
+    filesModified: string[];
+    error?: string;
+    durationMs: number;
+    tokensUsed: number;
+    cost: number;
+  }>;
+  lastError?: string;
+}
+
+interface Task {
+  id: string;
+  title: string;
+  description: string;
+  status: TaskStatus;
+  priority: number;
+  isParent: boolean;
+  parentId?: string;
+  dependsOn: string[];
+  currentBotId?: string;
+  currentRunId?: string;
+  context: TaskContext;
+  runs: string[];
+  attempt: number;
+  maxAttempts: number;
+  budgetTokens?: number;
+  budgetCost?: number;
+  tokensUsed: number;
+  costUsed: number;
+  createdAt: string;
+  updatedAt: string;
+  completedAt?: string;
+  assignedProfile?: string;
+  routingReason?: string;
+}
+
+interface Subtask {
+  id: string;
+  title: string;
+  status: TaskStatus;
+  priority: number;
+  assignedProfile?: string;
+  attempt: number;
+}
+
+interface TaskDetailViewProps {
+  taskId: string;
+  onBack: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Status mapping
+// ---------------------------------------------------------------------------
+
+const statusToIcon: Record<TaskStatus, string> = {
+  'pending': 'pending',
+  'in-progress': 'running',
+  'done': 'completed',
+  'failed': 'failed',
+  'blocked': 'pending',
+  'cancelled': 'failed',
+};
+
+const statusToLabel: Record<TaskStatus, string> = {
+  'pending': 'Pending',
+  'in-progress': 'In Progress',
+  'done': 'Done',
+  'failed': 'Failed',
+  'blocked': 'Blocked',
+  'cancelled': 'Cancelled',
+};
+
+const priorityLabel = (p: number) => p >= 3 ? 'High' : p === 2 ? 'Medium' : p === 1 ? 'Low' : 'None';
+
+// ---------------------------------------------------------------------------
+// Inline styles for replaced styled components
+// ---------------------------------------------------------------------------
+
+const headerStyle: React.CSSProperties = {
+  padding: '12px 16px',
+  borderBottom: '1px solid var(--color-border-default)',
+  flexShrink: 0,
+};
+
+const sectionStyle: React.CSSProperties = {
+  padding: '12px 16px',
+  borderBottom: '1px solid var(--color-border-default)',
+};
+
+const fileItemStyle: React.CSSProperties = {
+  fontFamily: 'monospace',
+  fontSize: '12px',
+  color: 'var(--color-text-mid)',
+  padding: '2px 4px',
+  borderRadius: '4px',
+};
+
+const fileItemHoverStyle: React.CSSProperties = {
+  ...fileItemStyle,
+  backgroundColor: 'var(--color-surface-elevated)',
+};
+
+const notesBlockStyle: React.CSSProperties = {
+  whiteSpace: 'pre-wrap',
+  fontSize: '13px',
+  color: 'var(--color-text-mid)',
+  lineHeight: 1.5,
+  padding: '4px 0',
+};
+
+const subtaskRowStyle: React.CSSProperties = {
+  padding: '6px 8px',
+  cursor: 'pointer',
+  borderRadius: '6px',
+};
+
+const subtaskRowHoverStyle: React.CSSProperties = {
+  ...subtaskRowStyle,
+  backgroundColor: 'var(--color-surface-elevated)',
+};
+
+// ---------------------------------------------------------------------------
+// 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
+// ---------------------------------------------------------------------------
+
+function TaskDetailView({ taskId, onBack }: TaskDetailViewProps) {
+  const ctx = usePackWorkspace();
+  const { callTool } = ctx;
+  const packId = ctx.packId;
+
+  // ── 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 ──
+  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) as Task;
+      setTask(t);
+
+      // 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[]);
+        }
+      }
+    } catch (err) {
+      // Non-fatal — keep existing data
+    }
+  }, [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: Record<string, unknown>) => {
+            const costObj = r.cost && typeof r.cost === 'object' ? (r.cost as Record<string, unknown>) : undefined;
+            return { ...r, costDetail: costObj, cost: costObj?.totalCost } as unknown as HistoricalRun;
+          }),
+        );
+      }
+    } catch {
+      // Non-fatal
+    }
+  }, [callTool, taskId]);
+
+  // Initial load
+  useEffect(() => {
+    setLoading(true);
+    Promise.all([fetchTask(), fetchHistory()]).finally(() => setLoading(false));
+  }, [fetchTask, fetchHistory]);
+
+  // Poll while in-progress (every 5s)
+  useEffect(() => {
+    if (!task || task.status !== 'in-progress') return;
+    const interval = setInterval(() => {
+      fetchTask();
+      fetchHistory();
+    }, 5_000);
+    return () => clearInterval(interval);
+  }, [task?.status, fetchTask, fetchHistory]);
+
+  // ── Live streaming for active run ──
+  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;
+
+  useEffect(() => {
+    if (!isLive || !currentRunId) return;
+    stream.start(packId, 'fw_weaver_events', currentRunId);
+    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);
+
+  const toggleExpand = useCallback((id: string) => {
+    setExpandedRunId((prev: string | null) => (prev === id ? null : id));
+  }, []);
+
+  // ── 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 ──
+  const [approvalStatus, setApprovalStatus] = useState<'pending' | 'approved' | 'rejected' | null>(null);
+  const [approvalLoading, setApprovalLoading] = useState(false);
+
+  useEffect(() => {
+    if (awaitingApproval) setApprovalStatus('pending');
+  }, [awaitingApproval]);
+
+  useEffect(() => {
+    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: unknown) {
+      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: unknown) {
+      toast(err instanceof Error ? err.message : 'Failed to reject', { type: 'error' });
+    }
+    setApprovalLoading(false);
+  }, [callTool]);
+
+  // ── Build run timeline entries from history ──
+  const runItems = useMemo(() => {
+    return history.map((run: HistoricalRun) => ({
+      run,
+      runTimeline: traceToTimeline(run),
+    }));
+  }, [history]);
+
+  // ── Extract instruction from run ──
+  function extractInstruction(run: HistoricalRun): string {
+    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: string) => p.trim());
+        const taskPart = parts.find((p: string) => p.startsWith('Task:'));
+        const summaryPart = parts.find((p: string) => 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';
+  }
+
+  // ── 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...',
+        ),
+      ),
+    );
+  }
+
+  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.',
+        ),
+      ),
+    );
+  }
+
+  const hasContext = (task.context?.files?.length > 0) || task.context?.notes;
+  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
+      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: 'sm',
+        }),
+        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 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'
+            : 'secondary',
+        }, statusToLabel[task.status] || task.status || 'pending'),
+
+        task.assignedProfile && React.createElement(Tag, { key: `profile-${task.assignedProfile}`, size: 'small', color: 'info' }, task.assignedProfile),
+
+        task.priority > 0 && React.createElement(Tag, {
+          size: 'small', color: task.priority >= 3 ? 'caution' : 'info',
+        }, `P${task.priority}`),
+
+        (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: '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.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'),
+            ),
+          ),
+
+          // 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),
+          ),
+
+          // 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),
+          ),
+
+          // 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(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.error && React.createElement(Typography, {
+                  variant: 'smallCaption-regular', color: 'color-status-negative',
+                }, `Error: ${rs.error}`),
+              ),
+            ),
+          ),
+
+          // 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}${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)}` : ''}`),
+            ),
+          ),
+        ),
+      ),
+    ),
+  );
+}
+
+export { TaskDetailView };
+export default TaskDetailView;
+module.exports = TaskDetailView;