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

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

@@ -1,29 +1,31 @@
 /**
- * Task Detail View — full task detail with context, subtasks, and run history.
+ * Task Detail View — full task detail with rich header, acceptance checks,
+ * live status, 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
+ * Redesigned layout:
+ * - Header: title + inline status/profile/attempts/cost
+ * - Tab 1 "Actions": What's happening, Acceptance, Quick actions
+ * - Tab 2 "Details": Edit form (description, profile, priority, context)
+ * - Tab 3 "Runs": Run history + live run
+ * - Tab 4 "Subtasks": (conditional)
+ * - Tab 5 "Context": Files, notes, accumulated context
  */
 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,
+  Flex, Typography, ScrollArea, StatusIcon, Icon, IconButton, TaskBlock, Button,
+  Card, Chip, Tabs, EmptyState, CollapsibleBlock, StatusChip,
+  toast, usePackWorkspace, useEventStream, formatCost, formatDuration,
 } from '@fw/plugin-ui-kit';
 
 import { useStreamTimeline } from './use-stream-timeline';
 import { traceToTimeline } from './trace-to-timeline';
 import type { HistoricalRun } from './trace-to-timeline';
+import TaskEditor from './task-editor';
 
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
 
-type TaskStatus = 'open' | 'in-progress' | 'done' | 'cancelled';
 
 interface TaskContext {
   files: string[];
@@ -46,11 +48,22 @@ interface TaskContext {
   stagnationCount: number;
 }
 
+interface AcceptanceCheck {
+  name: string;
+  command: string;
+}
+
+interface AcceptanceResult {
+  met: boolean;
+  results: Array<{ name: string; pass: boolean; detail?: string }>;
+  checkedAt: string;
+}
+
 interface Task {
   id: string;
   title: string;
   description: string;
-  status: TaskStatus;
+  status: TTaskStatus;
   priority: number;
   isParent: boolean;
   parentId?: string;
@@ -65,12 +78,14 @@ interface Task {
   completedAt?: string;
   assignedProfile?: string;
   routingReason?: string;
+  acceptance?: { checks: AcceptanceCheck[] };
+  lastAcceptanceCheck?: AcceptanceResult;
 }
 
 interface Subtask {
   id: string;
   title: string;
-  status: TaskStatus;
+  status: TTaskStatus;
   priority: number;
   assignedProfile?: string;
 }
@@ -81,115 +96,90 @@ interface TaskDetailViewProps {
   onEdit?: (taskId: string) => void;
 }
 
-// ---------------------------------------------------------------------------
-// Status mapping
-// ---------------------------------------------------------------------------
-
-const statusToIcon: Record<TaskStatus, string> = {
-  'open': 'pending',
-  'in-progress': 'running',
-  'done': 'completed',
-  'cancelled': 'failed',
-};
-
-const statusToLabel: Record<TaskStatus, string> = {
-  'open': 'Open',
-  'in-progress': 'Running',
-  'done': 'Done',
-  'cancelled': 'Cancelled',
-};
-
-const priorityLabel = (p: number) => p >= 3 ? 'High' : p === 2 ? 'Medium' : p === 1 ? 'Low' : 'None';
+import {
+  TASK_STATUS_ICON, TASK_STATUS_ICON_OVERRIDE, TASK_STATUS_CHIP, TASK_STATUS_LABEL,
+} from './task-status';
+import type { TaskStatus as TTaskStatus } from './task-status';
 
 // ---------------------------------------------------------------------------
-// Inline styles for replaced styled components
+// Inline styles
 // ---------------------------------------------------------------------------
 
 const headerStyle: React.CSSProperties = {
   padding: '12px 16px',
-  borderBottom: '1px solid var(--color-border-default)',
+  borderBottom: '1px solid var(--color-border-faint)',
   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)',
+const sectionDivider: React.CSSProperties = {
+  borderBottom: '1px solid var(--color-border-faint)',
+  paddingBottom: '12px',
+  marginBottom: '4px',
 };
 
 // ---------------------------------------------------------------------------
-// Small hover-wrapper components
+// Sub-components
 // ---------------------------------------------------------------------------
 
-function FileItemRow({ children }: { children: React.ReactNode }) {
+function SubtaskRowItem(props: { key?: string; sub: Subtask; onClick: () => void }) {
+  const { sub, onClick } = props;
   const [hovered, setHovered] = useState(false);
   return (
     <Flex
-      variant="row-center-start-nowrap-0"
-      style={hovered ? fileItemHoverStyle : fileItemStyle}
+      variant="row-center-start-nowrap-8"
+      style={{
+        padding: '6px 8px',
+        cursor: 'pointer',
+        borderRadius: '6px',
+        backgroundColor: hovered ? 'var(--color-surface-hover)' : 'transparent',
+      }}
+      onClick={onClick}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
     >
-      {children}
+      <StatusIcon status={TASK_STATUS_ICON[sub.status] || 'pending'} icon={TASK_STATUS_ICON_OVERRIDE[sub.status]} size="sm" />
+      <Typography variant="caption-regular" truncate style={{ flex: 1, minWidth: 0 }}>
+        {sub.title}
+      </Typography>
+      {sub.assignedProfile && (
+        <Chip label={sub.assignedProfile} size="small" color="color-status-info" />
+      )}
     </Flex>
   );
 }
 
-function SubtaskRowItem({ sub, onBack }: { sub: Subtask; onBack: () => void }) {
-  const [hovered, setHovered] = useState(false);
+/** Single acceptance check result row */
+function AcceptanceCheckRow(props: { key?: string; name: string; pass: boolean; detail?: string }) {
+  const { name, pass, detail } = props;
+  const [expanded, setExpanded] = useState(!pass && !!detail);
   return (
-    <Flex
-      variant="row-center-start-nowrap-8"
-      style={hovered ? subtaskRowHoverStyle : subtaskRowStyle}
-      onClick={() => onBack()}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
+    <CollapsibleBlock
+      status={pass ? 'completed' : 'error'}
+      label={
+        <Flex variant="row-center-start-nowrap-6" style={{ flex: 1 }}>
+          <Typography variant="smallCaption-thick" color={pass ? 'color-status-positive' : 'color-status-negative'}>
+            {name}
+          </Typography>
+          <Typography variant="smallCaption-regular" color="color-text-subtle">
+            {pass ? 'passed' : 'failed'}
+          </Typography>
+        </Flex>
+      }
+      expanded={expanded}
+      onToggle={() => setExpanded((v: boolean) => !v)}
+      canExpand={!!detail}
     >
-      <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" />
+      {detail && (
+        <Typography
+          variant="smallCaption-regular"
+          color="color-text-medium"
+          mono
+          style={{ whiteSpace: 'pre-wrap', padding: '6px 0' }}
+        >
+          {detail}
+        </Typography>
       )}
-    </Flex>
+    </CollapsibleBlock>
   );
 }
 
@@ -223,7 +213,7 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
       const summaries = rs?.runHistory as Array<Record<string, unknown>> | undefined;
       if (summaries?.length) {
         setHistory(prev => {
-          if (prev.length > 0) return prev; // Don't overwrite if RunStore data exists
+          if (prev.length > 0) return prev;
           return summaries.map((s) => ({
             id: s.runId as string,
             runId: s.runId as string,
@@ -239,18 +229,15 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
         });
       }
 
-      // 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[]);
-        }
+        if (Array.isArray(listData)) setSubtasks(listData as Subtask[]);
       }
-    } catch (err) {
-      // Non-fatal — keep existing data
+    } catch {
+      // Non-fatal
     }
   }, [callTool, taskId]);
 
@@ -265,7 +252,6 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
             return { ...r, costDetail: costObj, cost: costObj?.totalCost } as unknown as HistoricalRun;
           }),
         );
-        return;
       }
     } catch {
       // Non-fatal
@@ -278,8 +264,7 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
     Promise.all([fetchTask(), fetchHistory()]).finally(() => setLoading(false));
   }, [fetchTask, fetchHistory]);
 
-
-  // Poll while in-progress (every 5s)
+  // Poll while in-progress
   useEffect(() => {
     if (!task || task.status !== 'in-progress') return;
     const interval = setInterval(() => {
@@ -311,21 +296,50 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
     return () => stream.stop();
   }, [isLive, activeRunId, packId]);
 
-  // -- Detail tab state --
-  const [detailTab, setDetailTab] = useState('runs');
+  // -- Tab state --
+  const [activeTab, setActiveTab] = useState('runs');
 
   // -- Action state --
   const [actionLoading, setActionLoading] = useState<string | null>(null);
-  const [availableProfiles, setAvailableProfiles] = useState<Array<{ id: string; name: string; icon?: string; color?: string }>>([]);
+  const [runningChecks, setRunningChecks] = useState(false);
+
+  // -- Approval --
+  const [approvalStatus, setApprovalStatus] = useState<'pending' | 'approved' | 'rejected' | null>(null);
+  const [approvalLoading, setApprovalLoading] = useState(false);
 
-  // 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(() => {});
+    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]);
+
+  // -- Actions --
   const handleRetry = useCallback(async () => {
     setActionLoading('retry');
     try {
@@ -356,31 +370,23 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
     setActionLoading(null);
   }, [callTool, taskId, fetchTask, ctx]);
 
-  const handleAssignProfile = useCallback(async (profileId: string) => {
-    setActionLoading('assign-profile');
+  const handleRunChecks = useCallback(async () => {
+    setRunningChecks(true);
     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();
+      // Trigger acceptance check via task retry with check-only flag
+      await callTool('fw_weaver_task_update', { id: taskId, runAcceptanceChecks: true });
+      toast('Acceptance checks triggered', { type: 'info' });
+      // Re-fetch to get updated results
+      setTimeout(() => fetchTask(), 2000);
     } catch (err: unknown) {
-      toast(err instanceof Error ? err.message : 'Failed to assign profile', { type: 'error' });
+      toast(err instanceof Error ? err.message : 'Failed to run checks', { 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]);
+    setRunningChecks(false);
+  }, [callTool, taskId, fetchTask]);
 
-  // -- Run expansion state --
+  // -- Run expansion --
   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));
   }, []);
@@ -392,43 +398,7 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
     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 --
+  // -- Build run timeline --
   const runItems = useMemo(() => {
     return history.map((run: HistoricalRun) => ({
       run,
@@ -436,7 +406,6 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
     }));
   }, [history]);
 
-  // -- Extract instruction from run --
   function extractInstruction(run: HistoricalRun): string {
     if (run.instruction) {
       const text = run.instruction;
@@ -466,23 +435,42 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
     return task?.title ?? 'Bot run';
   }
 
-  // -- Loading state --
+  // -- Derived data --
+  const acceptanceChecks = task?.acceptance?.checks ?? [];
+  const lastAcceptance = task?.lastAcceptanceCheck;
+  const hasAcceptance = acceptanceChecks.length > 0;
+  const hasContext = (task?.context?.files?.length ?? 0) > 0 || task?.context?.notes;
+  const hasSubtasks = task?.isParent && subtasks.length > 0;
+  const hasRuns = runItems.length > 0 || isLive;
+  const attemptCount = task?.context?.runHistory?.length ?? 0;
+  const isTerminal = task?.status === 'done' || task?.status === 'cancelled';
+  const blockedByIds = task?.dependsOn?.length ? task.dependsOn : [];
+
+  // Files changed since last acceptance pass
+  const filesChangedSincePass = useMemo(() => {
+    if (!lastAcceptance?.met || !lastAcceptance.checkedAt) return [];
+    const passTime = new Date(lastAcceptance.checkedAt).getTime();
+    const changed: string[] = [];
+    for (const run of (task?.context?.runHistory ?? [])) {
+      const runTime = new Date(run.endedAt).getTime();
+      if (runTime > passTime) {
+        changed.push(...(run.filesModified ?? []), ...(run.filesCreated ?? []));
+      }
+    }
+    return [...new Set(changed)];
+  }, [lastAcceptance, task?.context?.runHistory]);
+
+  // -- Loading / not found --
   if (loading && !task) {
     return (
-      <Flex
-        variant="column-stretch-start-nowrap-0"
-        style={{ width: '100%', height: '100%', overflow: 'hidden' }}
-      >
+      <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'}
+            <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>
+          <Typography variant="caption-regular" color="color-text-subtle">Loading task...</Typography>
         </Flex>
       </Flex>
     );
@@ -490,50 +478,41 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
 
   if (!task) {
     return (
-      <Flex
-        variant="column-stretch-start-nowrap-0"
-        style={{ width: '100%', height: '100%', overflow: 'hidden' }}
-      >
+      <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'}
+            <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>
+          <Typography variant="caption-regular" color="color-text-subtle">Task not found.</Typography>
         </Flex>
       </Flex>
     );
   }
 
-  const hasContext = (task.context?.files?.length > 0) || task.context?.notes;
-  const hasSubtasks = task.isParent && subtasks.length > 0;
-  const hasRuns = runItems.length > 0 || isLive;
+  // -- Build tabs --
+  const tabs = [
+    { id: 'runs', title: `Runs (${runItems.length}${isLive ? '+1' : ''})` },
+    ...(hasAcceptance ? [{ id: 'checks', title: 'Checks' }] : []),
+    { id: 'details', title: 'Details' },
+    ...(hasSubtasks ? [{ id: 'subtasks', title: `Subtasks (${subtasks.filter((s: Subtask) => s.status === 'done').length}/${subtasks.length})` }] : []),
+    ...(hasContext ? [{ id: 'context', title: 'Context' }] : []),
+  ];
 
   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="column-stretch-start-nowrap-0" style={{ width: '100%', height: '100%', overflow: 'hidden' }}>
+      {/* ----------------------------------------------------------------- */}
+      {/* HEADER: back + title + inline meta                                */}
+      {/* ----------------------------------------------------------------- */}
+      <Flex variant="column-stretch-start-nowrap-6" style={headerStyle}>
+        {/* Row 1: back, status icon, title, actions */}
+        <Flex variant="row-center-space-between-nowrap-8" style={{ minWidth: 0 }}>
           <Flex variant="row-center-start-nowrap-8" style={{ flex: 1, minWidth: 0 }}>
-            <IconButton
-              icon="back"
-              size="xs"
-              variant="clear"
-              onClick={onBack}
-            />
+            <IconButton icon="back" size="xs" variant="clear" onClick={onBack} />
             <StatusIcon
-              status={statusToIcon[task.status] || 'pending'}
+              status={TASK_STATUS_ICON[task.status as TTaskStatus] || 'pending'}
+              icon={TASK_STATUS_ICON_OVERRIDE[task.status as TTaskStatus]}
               size="sm"
             />
             <Typography
@@ -544,91 +523,202 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
               {task.title || 'Untitled Task'}
             </Typography>
           </Flex>
-          {onEdit && (
-            <IconButton
-              icon="edit"
-              size="xs"
-              variant="clear"
-              onClick={() => onEdit(taskId)}
-              title="Edit task"
-            />
+          {!isTerminal && (
+            <Flex variant="row-center-end-nowrap-4" style={{ flexShrink: 0 }}>
+              {task.status === 'open' && attemptCount > 0 && (
+                <IconButton
+                  icon="replay"
+                  size="xs"
+                  variant="outlined"
+                  onClick={handleRetry}
+                  title="Retry"
+                />
+              )}
+              <IconButton
+                icon="close"
+                size="xs"
+                variant="outlined"
+                color="danger"
+                onClick={handleCancel}
+                title="Cancel"
+              />
+            </Flex>
           )}
         </Flex>
 
-        {/* Meta row: status tag, assigned profile, priority, attempts */}
+        {/* Row 2: inline chips — status, profile, priority, attempts, cost */}
         <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'}
-          />
+          <StatusChip status={TASK_STATUS_CHIP[task.status as TTaskStatus] ?? 'info'} icon={TASK_STATUS_ICON[task.status as TTaskStatus]}>
+            {TASK_STATUS_LABEL[task.status as TTaskStatus]}
+          </StatusChip>
 
           {task.assignedProfile && (
-            <Chip key={`profile-${task.assignedProfile}`} label={task.assignedProfile} size="small" color="color-status-info" />
+            <StatusChip status="info" icon="person">{task.assignedProfile}</StatusChip>
           )}
 
           {task.priority > 0 && (
-            <Chip
-              label={`P${task.priority}`}
-              size="small"
-              color={task.priority >= 3 ? 'color-status-caution' : 'color-status-info'}
-            />
+            <StatusChip
+              status={task.priority >= 3 ? 'error' : task.priority === 2 ? 'warning' : 'info'}
+              icon="flag"
+            >
+              P{task.priority}
+            </StatusChip>
           )}
 
-          {(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>
+          {attemptCount > 0 && (
+            <StatusChip status="info" icon="replay">
+              {attemptCount} {attemptCount === 1 ? 'attempt' : 'attempts'}
+            </StatusChip>
+          )}
+
+          {task.costUsed > 0 && (
+            <StatusChip status="info" icon="payments">
+              {formatCost(task.costUsed)}
+              {task.budgetCost ? ` / ${formatCost(task.budgetCost)}` : ''}
+            </StatusChip>
+          )}
+
+          {hasAcceptance && lastAcceptance && (
+            <StatusChip
+              status={lastAcceptance.met ? 'success' : 'error'}
+              icon={lastAcceptance.met ? 'checkCircle' : 'cancel'}
+            >
+              {lastAcceptance.met ? 'Checks pass' : 'Checks fail'}
+            </StatusChip>
           )}
         </Flex>
 
-        {/* Description */}
+        {/* Description (one line) */}
         {task.description && (
-          <Typography variant="smallCaption-regular" color="color-text-medium">
+          <Typography variant="smallCaption-regular" color="color-text-medium" truncate>
             {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
-        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)}
+        tabs={tabs}
+        activeTabId={activeTab}
+        onSelectTab={(id: string) => setActiveTab(id)}
         size="sm"
       />
 
-      {/* -- Tab content -- */}
+      {/* ----------------------------------------------------------------- */}
+      {/* TAB CONTENT                                                       */}
+      {/* ----------------------------------------------------------------- */}
       <ScrollArea ref={scrollRef} style={{ flex: 1 }}>
-        <Flex variant="column-stretch-start-nowrap-8" style={{ padding: '12px 16px' }}>
+        <Flex variant="column-stretch-start-nowrap-12" style={{ padding: '12px 16px' }}>
+
+          {/* ============================================================= */}
+          {/* ACTIONS TAB                                                    */}
+          {/* ============================================================= */}
+          {activeTab === 'checks' && hasAcceptance && (
+            <Flex variant="column-stretch-start-nowrap-8">
+              <Flex variant="row-center-space-between-nowrap-8">
+                <Typography variant="caption-thick" color="color-text-medium">
+                  Acceptance Checks
+                </Typography>
+                <Button
+                  size="xs"
+                  variant="outlined"
+                  onClick={handleRunChecks}
+                  loading={runningChecks}
+                  disabled={runningChecks || isLive}
+                >
+                  <Icon name="playArrow" size={12} /> Run
+                </Button>
+              </Flex>
+
+              {lastAcceptance ? (
+                <Flex variant="column-stretch-start-nowrap-4">
+                  <Flex variant="row-center-start-nowrap-8">
+                    <StatusChip
+                      status={lastAcceptance.met ? 'success' : 'error'}
+                      icon={lastAcceptance.met ? 'check' : 'close'}
+                    >
+                      {lastAcceptance.results.filter((r: { pass: boolean }) => r.pass).length}/{lastAcceptance.results.length} passed
+                    </StatusChip>
+                    <Typography variant="smallCaption-regular" color="color-text-subtle">
+                      {new Date(lastAcceptance.checkedAt).toLocaleTimeString()}
+                    </Typography>
+                  </Flex>
+
+                  {lastAcceptance.results.map((r: { name: string; pass: boolean; detail?: string }) => (
+                    <AcceptanceCheckRow
+                      key={r.name}
+                      name={r.name}
+                      pass={r.pass}
+                      detail={r.detail}
+                    />
+                  ))}
+
+                  {lastAcceptance.met && filesChangedSincePass.length > 0 && (
+                    <Flex variant="column-stretch-start-nowrap-4" style={{ marginTop: '4px' }}>
+                      <Flex variant="row-center-start-nowrap-6">
+                        <Icon name="warning" size={12} color="color-status-caution" />
+                        <Typography variant="smallCaption-regular" color="color-status-caution">
+                          {filesChangedSincePass.length} file{filesChangedSincePass.length !== 1 ? 's' : ''} changed since last pass
+                        </Typography>
+                      </Flex>
+                      {filesChangedSincePass.slice(0, 5).map((f: string) => (
+                        <Typography key={f} variant="smallCaption-regular" color="color-text-subtle" mono>
+                          {f}
+                        </Typography>
+                      ))}
+                      {filesChangedSincePass.length > 5 && (
+                        <Typography variant="smallCaption-regular" color="color-text-subtle">
+                          +{filesChangedSincePass.length - 5} more
+                        </Typography>
+                      )}
+                    </Flex>
+                  )}
+                </Flex>
+              ) : (
+                <Flex variant="column-stretch-start-nowrap-4">
+                  {acceptanceChecks.map((check: AcceptanceCheck) => (
+                    <Flex key={check.name} variant="row-center-start-nowrap-6">
+                      <Icon name="schedule" size={12} color="color-text-subtle" />
+                      <Typography variant="smallCaption-regular" color="color-text-medium">
+                        {check.name}
+                      </Typography>
+                      <Typography variant="smallCaption-regular" color="color-text-subtle" mono>
+                        {check.command}
+                      </Typography>
+                    </Flex>
+                  ))}
+                  <Typography variant="smallCaption-regular" color="color-text-subtle">
+                    Not yet run
+                  </Typography>
+                </Flex>
+              )}
+            </Flex>
+          )}
+
+          {/* ============================================================= */}
+          {/* DETAILS TAB (embedded edit form)                               */}
+          {/* ============================================================= */}
+          {activeTab === 'details' && (
+            <div style={{ margin: '-12px -16px', flex: 1, minHeight: 0 }}>
+              <TaskEditor
+                mode="edit"
+                taskId={taskId}
+                embedded
+                onSave={() => { fetchTask(); setActiveTab('actions'); }}
+                onCancel={() => setActiveTab('actions')}
+                onDelete={() => { fetchTask(); setActiveTab('actions'); }}
+              />
+            </div>
+          )}
 
-          {/* -- Runs tab -- */}
-          {detailTab === 'runs' && (hasRuns || (task.context?.runHistory?.length ?? 0) > 0)
+          {/* ============================================================= */}
+          {/* RUNS TAB                                                       */}
+          {/* ============================================================= */}
+          {activeTab === 'runs' && (hasRuns
             ? (
               <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;
@@ -649,7 +739,6 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
                     />
                   );
                 })}
-                {/* Live run */}
                 {isLive && (
                   <TaskBlock
                     key="live-run"
@@ -672,160 +761,31 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
                 )}
               </Flex>
             )
-            : detailTab === 'runs' && (
+            : (
               <EmptyState
                 icon="smartToy"
                 message="No runs yet"
                 description="This task has not been executed yet."
               />
-            )}
+            )
+          )}
 
-          {/* -- Subtasks tab -- */}
-          {detailTab === 'subtasks' && hasSubtasks && (
+          {/* ============================================================= */}
+          {/* SUBTASKS TAB                                                   */}
+          {/* ============================================================= */}
+          {activeTab === 'subtasks' && hasSubtasks && (
             <Flex variant="column-stretch-start-nowrap-0">
               {(subtasks ?? []).map((sub: Subtask) => (
-                <SubtaskRowItem
-                  key={sub.id}
-                  sub={sub}
-                  onBack={onBack}
-                />
+                <SubtaskRowItem key={sub.id} sub={sub} onClick={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 && (
+          {/* ============================================================= */}
+          {/* CONTEXT TAB                                                    */}
+          {/* ============================================================= */}
+          {activeTab === '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>
@@ -834,7 +794,7 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
                       key={file}
                       variant="smallCaption-regular"
                       color="color-text-high"
-                      style={{ fontFamily: 'var(--font-mono, monospace)' }}
+                      mono
                     >
                       {file}
                     </Typography>
@@ -842,7 +802,6 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
                 </Flex>
               )}
 
-              {/* Notes */}
               {task.context?.notes && (
                 <Flex variant="column-stretch-start-nowrap-4">
                   <Typography variant="caption-thick" color="color-text-medium">Notes</Typography>
@@ -856,64 +815,39 @@ function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
                 </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' }}
-                    >
+                    <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'})`}
+                          {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)}`}
+                          {formatDuration((rs.durationMs as number) ?? 0)} · {rs.tokensUsed ?? 0} tok · {formatCost((rs.cost as number) ?? 0)}
                         </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 variant="smallCaption-regular" color="color-text-subtle" mono>
+                          Files: {(rs.filesModified as string[]).join(', ')}
                         </Typography>
                       )}
                       {rs.remainingWork && (
                         <Typography variant="smallCaption-regular" color="color-status-caution">
-                          {`Remaining: ${rs.remainingWork}`}
+                          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>