@pheem49/mint 1.16.0 → 1.18.0

package/src/renderer/shared/components/activity/RunSummaryDashboard.tsx

@@ -0,0 +1,222 @@
+import React, { useState, useCallback } from 'react'
+import type { RunTelemetrySummary, StandardTrajectoryRun } from '../../types'
+import {
+  CheckCircle2,
+  XCircle,
+  RotateCcw,
+  Clock,
+  Coins,
+  Wrench,
+  FileCode2,
+  Activity,
+  Download,
+  Check,
+} from 'lucide-react'
+
+interface Props {
+  summary: RunTelemetrySummary
+  className?: string
+}
+
+export function formatRunDuration(secs: number): { value: string; subtext?: string } {
+  if (secs < 60) {
+    return { value: `${secs.toFixed(1)}s` }
+  }
+  const mins = Math.floor(secs / 60)
+  const remSecs = secs % 60
+  const remSecsStr = remSecs < 10 ? `0${remSecs.toFixed(1)}` : remSecs.toFixed(1)
+
+  if (mins >= 60) {
+    const hours = Math.floor(mins / 60)
+    const remMins = mins % 60
+    return {
+      value: `${hours}h ${remMins}m`,
+      subtext: `${secs.toFixed(1)}s`,
+    }
+  }
+
+  return {
+    value: `${mins}m ${remSecsStr}s`,
+    subtext: `${secs.toFixed(1)}s`,
+  }
+}
+
+export function RunSummaryDashboard({ summary, className = '' }: Props) {
+  const [exported, setExported] = useState(false)
+
+  const handleExportTrajectory = useCallback(() => {
+    try {
+      const trajectoryData: StandardTrajectoryRun = summary.trajectory || {
+        schemaVersion: '1.0',
+        runId: summary.runId,
+        chatId: 'default',
+        task: summary.task || 'Agent Run',
+        model: 'unknown',
+        provider: 'unknown',
+        startedAt: new Date(Date.now() - summary.durationSecs * 1000).toISOString(),
+        completedAt: new Date().toISOString(),
+        outcome: summary.outcome,
+        totalSteps: summary.toolCallsCount,
+        totalTokens: summary.totalTokens,
+        durationSecs: summary.durationSecs,
+        filesCreated: summary.filesCreated || [],
+        filesModified: (summary.filesChanged || []).filter(
+          (f) => !(summary.filesCreated || []).includes(f)
+        ),
+        trajectory: (summary.toolTimeline || []).map((item, idx) => ({
+          step: item.step || idx + 1,
+          timestamp: new Date().toISOString(),
+          thought: '',
+          action: item.action,
+          input: { target: item.target },
+          observation: item.success ? 'Success' : 'Failed',
+          status: item.success ? 'success' : 'failed',
+          durationMs: 0,
+          tokens: { inputTokens: 0, generatedTokens: 0 },
+        })),
+      }
+
+      const json = JSON.stringify(trajectoryData, null, 2)
+      if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+        const blob = new Blob([json], { type: 'application/json' })
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = `${summary.runId}-trajectory.json`
+        document.body.appendChild(a)
+        a.click()
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+      }
+      if (typeof navigator !== 'undefined' && navigator.clipboard) {
+        navigator.clipboard.writeText(json).catch(() => {})
+      }
+      setExported(true)
+      setTimeout(() => setExported(false), 2000)
+    } catch (e) {
+      console.error('Failed to export trajectory:', e)
+    }
+  }, [summary])
+
+  const isSuccess = summary.outcome === 'SUCCESS' || summary.outcome === 'VERIFIED'
+  const isCompleted = summary.outcome === 'PARTIAL' || summary.outcome === 'COMPLETED'
+  const isRolledBack = summary.outcome === 'ROLLED_BACK'
+  const isUnverified = summary.outcome === 'UNVERIFIED'
+  const isFailed = summary.outcome === 'FAILED'
+
+  const formattedTokens =
+    summary.totalTokens >= 1000
+      ? `${(summary.totalTokens / 1000).toFixed(1)}k`
+      : summary.totalTokens.toString()
+
+  const formattedDuration = formatRunDuration(summary.durationSecs)
+
+  const badgeClass = isSuccess || isCompleted
+    ? 'run-summary-badge success'
+    : isRolledBack || isUnverified
+      ? 'run-summary-badge rollback'
+      : 'run-summary-badge failure'
+
+  const badgeText = isSuccess
+    ? (summary.outcome === 'VERIFIED' ? 'Verified' : 'Success')
+    : isCompleted
+      ? 'Completed'
+      : isRolledBack
+        ? 'Rolled Back'
+        : isUnverified
+          ? 'Unverified'
+          : 'Failure'
+
+  return (
+    <div className={`run-summary-card ${className}`}>
+      {/* Header */}
+      <div className="run-summary-header">
+        <div className="run-summary-title">
+          <Activity size={16} aria-hidden="true" />
+          <span className="run-summary-heading"><strong>Run summary</strong><small title={`Run ${summary.runId}`}>#{summary.runId}</small></span>
+        </div>
+        <div className="run-summary-actions">
+          <button
+            type="button"
+            className="run-summary-export-btn"
+            onClick={handleExportTrajectory}
+            title="Export SWE-bench / Agent Protocol compliant trajectory JSON"
+            aria-label="Export trajectory"
+          >
+            {exported ? (
+              <Check style={{ width: '12px', height: '12px' }} />
+            ) : (
+              <Download style={{ width: '12px', height: '12px' }} />
+            )}
+            <span>{exported ? 'Exported!' : 'Export Trajectory'}</span>
+          </button>
+          <span className={badgeClass}>
+            {(isSuccess || isCompleted) && <CheckCircle2 style={{ width: '12px', height: '12px' }} />}
+            {(isRolledBack || isUnverified) && <RotateCcw style={{ width: '12px', height: '12px' }} />}
+            {(!isSuccess && !isCompleted && !isRolledBack && !isUnverified) && <XCircle style={{ width: '12px', height: '12px' }} />}
+            <span>{badgeText}</span>
+          </span>
+        </div>
+      </div>
+
+      {/* KPI Grid */}
+      <div className="run-kpi-grid">
+        <div className="run-kpi-box">
+          <div className="run-kpi-label">
+            <Clock style={{ width: '12px', height: '12px' }} />
+            <span>Duration</span>
+          </div>
+          <div className="run-kpi-value" title={`${summary.durationSecs.toFixed(1)}s`}>
+            {formattedDuration.value}
+            {formattedDuration.subtext && (
+              <span className="run-kpi-subtext"> · {formattedDuration.subtext}</span>
+            )}
+          </div>
+        </div>
+
+        <div className="run-kpi-box">
+          <div className="run-kpi-label">
+            <Coins style={{ width: '12px', height: '12px' }} />
+            <span>Tokens</span>
+          </div>
+          <div className="run-kpi-value">{formattedTokens}</div>
+        </div>
+
+        <div className="run-kpi-box">
+          <div className="run-kpi-label">
+            <Wrench style={{ width: '12px', height: '12px' }} />
+            <span>Tools</span>
+          </div>
+          <div className="run-kpi-value">
+            {summary.toolCallsCount}
+            {summary.retriesCount > 0 && <span className="run-kpi-subtext"> · {summary.retriesCount} retried</span>}
+          </div>
+        </div>
+
+        <div className="run-kpi-box">
+          <div className="run-kpi-label">
+            <FileCode2 style={{ width: '12px', height: '12px' }} />
+            <span>Files</span>
+          </div>
+          <div className="run-kpi-value">
+            {summary.filesCreated && summary.filesCreated.length > 0 && summary.filesChanged.length - summary.filesCreated.length > 0 ? (
+              <>
+                {summary.filesCreated.length} <span className="run-kpi-subtext">created</span>, {summary.filesChanged.length - summary.filesCreated.length} <span className="run-kpi-subtext">modified</span>
+              </>
+            ) : summary.filesCreated && summary.filesCreated.length > 0 ? (
+              <>
+                {summary.filesCreated.length}{' '}
+                <span className="run-kpi-subtext">created</span>
+              </>
+            ) : summary.filesChanged.length > 0 ? (
+              <>
+                {summary.filesChanged.length}{' '}
+                <span className="run-kpi-subtext">modified</span>
+              </>
+            ) : <>0 <span className="run-kpi-subtext">files</span></>}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/renderer/shared/components/activity/SubagentDagView.test.ts

@@ -0,0 +1,123 @@
+import { describe, it, expect } from 'vitest'
+import { parseSubagentGraph } from './SubagentDagView'
+import type { AgentProgress } from '../../types'
+
+describe('parseSubagentGraph', () => {
+  it('parses modern swarm lifecycle events (SubagentStarted and SubagentFinished)', () => {
+    const progress: AgentProgress[] = [
+      {
+        type: 'SubagentStarted',
+        data: {
+          subagent: 'stripe-webhook-tracer',
+          profile: 'explorer',
+          task: 'Trace webhook verification flow in routes/webhook.rs',
+        },
+      },
+      {
+        type: 'ToolStart',
+        data: {
+          action: 'read_file',
+          input: { path: 'src/webhook.rs' },
+          subagent: 'stripe-webhook-tracer',
+        },
+      },
+      {
+        type: 'ToolEnd',
+        data: {
+          action: 'read_file',
+          input: { path: 'src/webhook.rs' },
+          result: 'pub fn verify() {}',
+          subagent: 'stripe-webhook-tracer',
+        },
+      },
+      {
+        type: 'SubagentFinished',
+        data: {
+          subagent: 'stripe-webhook-tracer',
+          status: 'completed',
+          elapsed_ms: 1200,
+          steps: 2,
+          summary_preview: 'Found verify function in webhook.rs',
+        },
+      },
+    ]
+
+    const graph = parseSubagentGraph(progress)
+    expect(graph.subagents).toHaveLength(1)
+    const node = graph.subagents[0]
+    expect(node.name).toBe('stripe-webhook-tracer')
+    expect(node.status).toBe('completed')
+    expect(node.tools).toHaveLength(1)
+    expect(node.tools[0].action).toBe('read_file')
+  })
+
+  it('maintains backward compatibility with legacy dispatch_subagent events', () => {
+    const legacyProgress: AgentProgress[] = [
+      {
+        type: 'ToolStart',
+        data: {
+          action: 'dispatch_subagent',
+          input: { name: 'explorer', instruction: 'Search for config files' },
+        },
+      },
+      {
+        type: 'ToolStart',
+        data: {
+          action: 'list_files',
+          input: { path: '.' },
+          subagent: 'explorer',
+        },
+      },
+      {
+        type: 'ToolEnd',
+        data: {
+          action: 'list_files',
+          input: { path: '.' },
+          result: 'Cargo.toml\nREADME.md',
+          subagent: 'explorer',
+        },
+      },
+      {
+        type: 'ToolEnd',
+        data: {
+          action: 'dispatch_subagent',
+          input: { name: 'explorer', instruction: 'Search for config files' },
+          result: '[Subagent explorer result]\nFound Cargo.toml',
+        },
+      },
+    ]
+
+    const graph = parseSubagentGraph(legacyProgress)
+    expect(graph.subagents).toHaveLength(1)
+    const node = graph.subagents[0]
+    expect(node.name).toBe('explorer')
+    expect(node.status).toBe('completed')
+    expect(node.tools).toHaveLength(1)
+  })
+
+  it('marks subagent as failed on error', () => {
+    const progress: AgentProgress[] = [
+      {
+        type: 'SubagentStarted',
+        data: {
+          subagent: 'debugger',
+          profile: 'debugger',
+          task: 'Run failing test',
+        },
+      },
+      {
+        type: 'SubagentFinished',
+        data: {
+          subagent: 'debugger',
+          status: 'failed',
+          elapsed_ms: 500,
+          steps: 1,
+          summary_preview: 'Command exited with 101',
+        },
+      },
+    ]
+
+    const graph = parseSubagentGraph(progress)
+    expect(graph.subagents[0].status).toBe('failed')
+  })
+})

package/src/renderer/shared/components/{SubagentDagView.tsx → activity/SubagentDagView.tsx}

@@ -1,16 +1,18 @@
 import React, { useMemo, useState } from 'react'
-import type { AgentProgress } from '../types'
+import type { AgentProgress } from '../../types'
 
 interface Props {
   progress: AgentProgress[]
   isLive?: boolean
 }
 
-interface SubagentNode {
+export interface SubagentNode {
   name: string
   taskSnippet?: string
   status: 'running' | 'completed' | 'failed' | 'idle'
   currentTool?: string
+  elapsedMs?: number
+  summaryPreview?: string
   tools: Array<{
     action: string
     input?: any
@@ -29,15 +31,61 @@ export function parseSubagentGraph(progress: AgentProgress[]): {
   for (const event of progress || []) {
     if (event.type === 'Thinking') {
       isWorking = true
+    } else if (event.type === 'SubagentStarted') {
+      isWorking = true
+      const { subagent, task } = event.data
+      let node = subagentMap.get(subagent)
+      if (!node) {
+        node = {
+          name: subagent,
+          taskSnippet: task && task.length > 80 ? `${task.slice(0, 77)}...` : task,
+          status: 'running',
+          tools: [],
+        }
+        subagentMap.set(subagent, node)
+      } else {
+        node.status = 'running'
+        if (task) {
+          node.taskSnippet = task.length > 80 ? `${task.slice(0, 77)}...` : task
+        }
+      }
+    } else if (event.type === 'SubagentFinished') {
+      const { subagent, status, elapsedMs, elapsed_ms, summaryPreview, summary_preview } = event.data as any
+      const node = subagentMap.get(subagent)
+      if (node) {
+        node.status = status === 'completed' ? 'completed' : 'failed'
+        node.currentTool = undefined
+        node.elapsedMs = elapsedMs ?? elapsed_ms
+        node.summaryPreview = summaryPreview ?? summary_preview
+      }
     } else if (event.type === 'ToolStart') {
       isWorking = true
       const action = event.data.action
       const subagentName = event.data.subagent
 
-      // Detect dispatch_subagent call from parent
-      if (action === 'dispatch_subagent') {
-        const targetName = (event.data.input as any)?.name || 'subagent'
-        const instruction = (event.data.input as any)?.instruction || ''
+      // Detect dispatch_agents or dispatch_subagent call from parent
+      if (action === 'dispatch_agents') {
+        const tasks = (event.data.input as any)?.tasks || []
+        for (const t of tasks) {
+          const roleValid = t.role && typeof t.role === 'string' && t.role.toLowerCase() !== 'null'
+          const baseValid = t.base && typeof t.base === 'string' && t.base.toLowerCase() !== 'null'
+          const targetName = roleValid ? t.role : baseValid ? t.base : 'agent'
+          const rawInst = typeof t.instruction === 'string' ? t.instruction.trim() : ''
+          const instruction = rawInst && rawInst.toLowerCase() !== 'null' ? rawInst : 'Working on task...'
+          if (!subagentMap.has(targetName)) {
+            subagentMap.set(targetName, {
+              name: targetName,
+              taskSnippet: instruction.length > 80 ? `${instruction.slice(0, 77)}...` : instruction,
+              status: 'running',
+              tools: [],
+            })
+          }
+        }
+      } else if (action === 'dispatch_subagent') {
+        const rawName = (event.data.input as any)?.name
+        const targetName = typeof rawName === 'string' && rawName.toLowerCase() !== 'null' && rawName.trim() ? rawName.trim() : 'subagent'
+        const rawInst = (event.data.input as any)?.instruction
+        const instruction = typeof rawInst === 'string' && rawInst.toLowerCase() !== 'null' && rawInst.trim() ? rawInst.trim() : 'Working on task...'
         if (!subagentMap.has(targetName)) {
           subagentMap.set(targetName, {
             name: targetName,
@@ -96,10 +144,15 @@ export function parseSubagentGraph(progress: AgentProgress[]): {
   }
 
   const subagents = Array.from(subagentMap.values())
-  // If subagents were created, mark ones with no running tool as completed if turn finished
-  for (const sub of subagents) {
-    if (!sub.currentTool && sub.status === 'running') {
-      sub.status = 'completed'
+  // Only for legacy dispatch_subagent calls without lifecycle events:
+  const hasModernLifecycle = (progress || []).some(
+    e => e.type === 'SubagentStarted' || e.type === 'SubagentFinished'
+  )
+  if (!hasModernLifecycle) {
+    for (const sub of subagents) {
+      if (!sub.currentTool && sub.status === 'running') {
+        sub.status = 'completed'
+      }
     }
   }
 
@@ -149,10 +202,10 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
             alignItems: 'center',
             gap: '10px',
             padding: '10px 18px',
-            borderRadius: '12px',
-            background: 'linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(59, 130, 246, 0.15))',
-            border: '1px solid rgba(16, 185, 129, 0.35)',
-            boxShadow: '0 4px 16px rgba(0, 0, 0, 0.3)',
+            borderRadius: 'var(--radius-xl, 18px)',
+            background: 'linear-gradient(135deg, var(--accent-subtle), color-mix(in srgb, var(--status-info, #3b82f6) 15%, transparent))',
+            border: '1px solid var(--accent-border)',
+            boxShadow: 'var(--shadow-md)',
             zIndex: 2,
           }}
         >
@@ -160,9 +213,9 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
             style={{
               width: '32px',
               height: '32px',
-              borderRadius: '8px',
-              background: '#10b981',
-              color: '#ffffff',
+              borderRadius: 'var(--radius-sm, 8px)',
+              background: 'var(--accent)',
+              color: 'var(--text-on-accent)',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
@@ -173,14 +226,14 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
             M
           </div>
           <div>
-            <div style={{ fontWeight: 600, fontSize: '0.88rem', color: '#f3f4f6' }}>Main orchestrator</div>
-            <div style={{ fontSize: '0.72rem', color: isLive ? '#10b981' : '#9ca3af', display: 'flex', alignItems: 'center', gap: '4px' }}>
+            <div style={{ fontWeight: 600, fontSize: '0.88rem', color: 'var(--text-primary)' }}>Main orchestrator</div>
+            <div style={{ fontSize: '0.72rem', color: isLive ? 'var(--interactive-fg)' : 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: '4px' }}>
               <span
                 style={{
                   width: '6px',
                   height: '6px',
                   borderRadius: '50%',
-                  background: isLive ? '#10b981' : '#6b7280',
+                  background: isLive ? 'var(--interactive-fg)' : 'var(--text-muted)',
                   display: 'inline-block',
                 }}
               />
@@ -205,10 +258,10 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
             const isSelected = selectedSubagent === subagent.name
             const statusColor =
               subagent.status === 'running'
-                ? '#3b82f6'
+                ? 'var(--status-info, #3b82f6)'
                 : subagent.status === 'failed'
-                  ? '#ef4444'
-                  : '#10b981'
+                  ? 'var(--status-error, #ef4444)'
+                  : 'var(--interactive-fg)'
 
             return (
               <div
@@ -219,11 +272,11 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
                   flexDirection: 'column',
                   width: '260px',
                   padding: '12px',
-                  borderRadius: '10px',
-                  background: isSelected ? 'rgba(30, 41, 59, 0.95)' : 'rgba(15, 23, 42, 0.8)',
-                  border: `1px solid ${isSelected ? statusColor : 'rgba(255, 255, 255, 0.1)'}`,
+                  borderRadius: 'var(--radius-lg, 14px)',
+                  background: isSelected ? 'var(--bg-surface-raised)' : 'var(--bg-surface)',
+                  border: `1px solid ${isSelected ? statusColor : 'var(--border-default)'}`,
                   cursor: 'pointer',
-                  boxShadow: isSelected ? `0 0 16px ${statusColor}33` : '0 4px 12px rgba(0, 0, 0, 0.2)',
+                  boxShadow: isSelected ? 'var(--shadow-md)' : 'var(--shadow-sm)',
                   transition: 'all 0.2s ease',
                 }}
               >
@@ -238,18 +291,18 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
                         display: 'inline-block',
                       }}
                     />
-                    <span style={{ fontWeight: 600, fontSize: '0.84rem', color: '#f3f4f6' }}>{subagent.name}</span>
+                    <span style={{ fontWeight: 600, fontSize: '0.84rem', color: 'var(--text-primary)' }}>{subagent.name}</span>
                   </div>
                   <span
                     style={{
                       fontSize: '0.68rem',
                       fontWeight: 600,
                       padding: '2px 6px',
-                      borderRadius: '4px',
+                      borderRadius: 'var(--radius-2xs, 4px)',
                       textTransform: 'none',
-                      background: `${statusColor}22`,
+                      background: `color-mix(in srgb, ${statusColor} 15%, transparent)`,
                       color: statusColor,
-                      border: `1px solid ${statusColor}44`,
+                      border: `1px solid color-mix(in srgb, ${statusColor} 30%, transparent)`,
                     }}
                   >
                     {subagent.status === 'running' && subagent.currentTool
@@ -259,7 +312,7 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
                 </div>
 
                 {subagent.taskSnippet && (
-                  <p style={{ margin: '0 0 8px 0', fontSize: '0.74rem', color: '#94a3b8', lineHeight: 1.4 }}>
+                  <p style={{ margin: '0 0 8px 0', fontSize: '0.74rem', color: 'var(--text-secondary)', lineHeight: 1.4 }}>
                     {subagent.taskSnippet}
                   </p>
                 )}
@@ -270,13 +323,13 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
                     alignItems: 'center',
                     justifyContent: 'space-between',
                     fontSize: '0.72rem',
-                    color: '#64748b',
+                    color: 'var(--text-muted)',
                     paddingTop: '6px',
-                    borderTop: '1px solid rgba(255, 255, 255, 0.06)',
+                    borderTop: '1px solid var(--border-subtle)',
                   }}
                 >
                   <span>{subagent.tools.length} tool {subagent.tools.length === 1 ? 'call' : 'calls'}</span>
-                  <span style={{ color: isSelected ? statusColor : '#94a3b8' }}>
+                  <span style={{ color: isSelected ? statusColor : 'var(--text-muted)' }}>
                     {isSelected ? 'Hide Details ▲' : 'View Logs ▼'}
                   </span>
                 </div>
@@ -290,19 +343,19 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
       {activeSubagent && (
         <div
           style={{
-            background: 'rgba(15, 23, 42, 0.95)',
-            border: '1px solid rgba(255, 255, 255, 0.1)',
-            borderRadius: '10px',
+            background: 'var(--bg-surface-raised)',
+            border: '1px solid var(--border-default)',
+            borderRadius: 'var(--radius-lg, 14px)',
             padding: '14px',
             marginTop: '8px',
           }}
         >
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '12px' }}>
             <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-              <span style={{ fontWeight: 600, fontSize: '0.86rem', color: '#10b981' }}>
+              <span style={{ fontWeight: 600, fontSize: '0.86rem', color: 'var(--interactive-fg)' }}>
                 Subagent Activity: {activeSubagent.name}
               </span>
-              <span style={{ fontSize: '0.75rem', color: '#94a3b8' }}>({activeSubagent.tools.length})</span>
+              <span style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>({activeSubagent.tools.length})</span>
             </div>
             <button
               type="button"
@@ -310,7 +363,7 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
               style={{
                 background: 'transparent',
                 border: 'none',
-                color: '#94a3b8',
+                color: 'var(--text-muted)',
                 cursor: 'pointer',
                 fontSize: '0.8rem',
               }}
@@ -324,25 +377,26 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
               <div
                 key={idx}
                 style={{
-                  background: 'rgba(0, 0, 0, 0.25)',
-                  border: '1px solid rgba(255, 255, 255, 0.05)',
-                  borderRadius: '6px',
+                  background: 'var(--bg-surface-soft)',
+                  border: '1px solid var(--border-subtle)',
+                  borderRadius: 'var(--radius-xs, 6px)',
                   padding: '8px 10px',
                   fontSize: '0.76rem',
                 }}
               >
                 <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '4px' }}>
-                  <span style={{ fontWeight: 600, color: '#38bdf8' }}>{tool.action}</span>
-                  {tool.isError && <span style={{ color: '#f87171', fontWeight: 600 }}>Failed</span>}
+                  <span style={{ fontWeight: 600, color: 'var(--status-info, #38bdf8)' }}>{tool.action}</span>
+                  {tool.isError && <span style={{ color: 'var(--status-error, #f87171)', fontWeight: 600 }}>Failed</span>}
                 </div>
                 {tool.input && (
                   <pre
                     style={{
                       margin: '4px 0',
                       padding: '4px 6px',
-                      background: '#090d16',
-                      borderRadius: '4px',
-                      color: '#cbd5e1',
+                      background: 'var(--bg-canvas)',
+                      border: '1px solid var(--border-subtle)',
+                      borderRadius: 'var(--radius-2xs, 4px)',
+                      color: 'var(--text-secondary)',
                       fontSize: '0.72rem',
                       overflowX: 'auto',
                     }}
@@ -351,7 +405,7 @@ export function SubagentDagView({ progress, isLive = false }: Props) {
                   </pre>
                 )}
                 {tool.result && (
-                  <div style={{ marginTop: '4px', color: '#94a3b8', fontSize: '0.72rem', maxHeight: '100px', overflowY: 'auto' }}>
+                  <div style={{ marginTop: '4px', color: 'var(--text-muted)', fontSize: '0.72rem', maxHeight: '100px', overflowY: 'auto' }}>
                     <strong>Result:</strong> {tool.result.slice(0, 200)}
                     {tool.result.length > 200 ? '...' : ''}
                   </div>