@pheem49/mint 1.15.0 → 1.17.0

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

@@ -0,0 +1,420 @@
+import React, { useMemo, useState } from 'react'
+import type { AgentProgress } from '../../types'
+
+interface Props {
+  progress: AgentProgress[]
+  isLive?: boolean
+}
+
+export interface SubagentNode {
+  name: string
+  taskSnippet?: string
+  status: 'running' | 'completed' | 'failed' | 'idle'
+  currentTool?: string
+  elapsedMs?: number
+  summaryPreview?: string
+  tools: Array<{
+    action: string
+    input?: any
+    result?: string
+    isError?: boolean
+  }>
+}
+
+export function parseSubagentGraph(progress: AgentProgress[]): {
+  orchestratorStatus: 'running' | 'completed' | 'idle'
+  subagents: SubagentNode[]
+} {
+  const subagentMap = new Map<string, SubagentNode>()
+  let isWorking = false
+
+  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_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,
+            taskSnippet: instruction.length > 80 ? `${instruction.slice(0, 77)}...` : instruction,
+            status: 'running',
+            tools: [],
+          })
+        }
+      }
+
+      // Tool call inside a subagent
+      if (subagentName) {
+        let node = subagentMap.get(subagentName)
+        if (!node) {
+          node = {
+            name: subagentName,
+            status: 'running',
+            tools: [],
+          }
+          subagentMap.set(subagentName, node)
+        }
+        node.status = 'running'
+        node.currentTool = action
+        node.tools.push({
+          action,
+          input: event.data.input,
+        })
+      }
+    } else if (event.type === 'ToolEnd') {
+      const action = event.data.action
+      const subagentName = event.data.subagent
+      const result = event.data.result || ''
+      const isError = result.startsWith('Error:')
+
+      if (action === 'dispatch_subagent') {
+        const targetName = (event.data.input as any)?.name || 'subagent'
+        const node = subagentMap.get(targetName)
+        if (node) {
+          node.status = isError ? 'failed' : 'completed'
+          node.currentTool = undefined
+        }
+      }
+
+      if (subagentName) {
+        const node = subagentMap.get(subagentName)
+        if (node) {
+          const lastTool = node.tools[node.tools.length - 1]
+          if (lastTool && lastTool.action === action) {
+            lastTool.result = result
+            lastTool.isError = isError
+          }
+          node.currentTool = undefined
+        }
+      }
+    }
+  }
+
+  const subagents = Array.from(subagentMap.values())
+  // 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'
+      }
+    }
+  }
+
+  return {
+    orchestratorStatus: isWorking ? 'running' : 'completed',
+    subagents,
+  }
+}
+
+export function SubagentDagView({ progress, isLive = false }: Props) {
+  const [selectedSubagent, setSelectedSubagent] = useState<string | null>(null)
+
+  const graph = useMemo(() => parseSubagentGraph(progress), [progress])
+  const activeSubagent = useMemo(() => {
+    if (!selectedSubagent) return null
+    return graph.subagents.find((s) => s.name === selectedSubagent) || null
+  }, [graph.subagents, selectedSubagent])
+
+  if (graph.subagents.length === 0) {
+    return (
+      <div style={{ padding: '24px', textAlign: 'center', color: 'var(--text-muted, #9ca3af)', fontSize: '0.85rem' }}>
+        <p style={{ margin: 0, fontWeight: 500 }}>No subagents dispatched in this turn</p>
+        <p style={{ margin: '6px 0 0 0', opacity: 0.7, fontSize: '0.78rem' }}>
+          Subagents will appear here in an interactive DAG tree when the Main Agent invokes them via <code>dispatch_subagent</code>.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="subagent-dag-container" style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }}>
+      {/* SVG Canvas / Flow Layout */}
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '28px',
+          position: 'relative',
+          padding: '12px',
+        }}
+      >
+        {/* Root Orchestrator Node */}
+        <div
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '10px',
+            padding: '10px 18px',
+            borderRadius: '12px',
+            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,
+          }}
+        >
+          <div
+            style={{
+              width: '32px',
+              height: '32px',
+              borderRadius: '8px',
+              background: 'var(--accent)',
+              color: 'var(--text-on-accent)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: '0.75rem',
+              fontWeight: 700,
+            }}
+          >
+            M
+          </div>
+          <div>
+            <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 ? 'var(--interactive-fg)' : 'var(--text-muted)',
+                  display: 'inline-block',
+                }}
+              />
+              {isLive ? 'Active Session' : 'Completed'}
+            </div>
+          </div>
+        </div>
+
+        {/* Subagents Branching Grid */}
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            gap: '16px',
+            width: '100%',
+            position: 'relative',
+            zIndex: 2,
+          }}
+        >
+          {graph.subagents.map((subagent) => {
+            const isSelected = selectedSubagent === subagent.name
+            const statusColor =
+              subagent.status === 'running'
+                ? 'var(--status-info, #3b82f6)'
+                : subagent.status === 'failed'
+                  ? 'var(--status-error, #ef4444)'
+                  : 'var(--interactive-fg)'
+
+            return (
+              <div
+                key={subagent.name}
+                onClick={() => setSelectedSubagent(isSelected ? null : subagent.name)}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  width: '260px',
+                  padding: '12px',
+                  borderRadius: '10px',
+                  background: isSelected ? 'var(--bg-surface-raised)' : 'var(--bg-surface)',
+                  border: `1px solid ${isSelected ? statusColor : 'var(--border-default)'}`,
+                  cursor: 'pointer',
+                  boxShadow: isSelected ? 'var(--shadow-md)' : 'var(--shadow-sm)',
+                  transition: 'all 0.2s ease',
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    <span
+                      style={{
+                        width: '8px',
+                        height: '8px',
+                        borderRadius: '50%',
+                        background: statusColor,
+                        display: 'inline-block',
+                      }}
+                    />
+                    <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',
+                      textTransform: 'none',
+                      background: `color-mix(in srgb, ${statusColor} 15%, transparent)`,
+                      color: statusColor,
+                      border: `1px solid color-mix(in srgb, ${statusColor} 30%, transparent)`,
+                    }}
+                  >
+                    {subagent.status === 'running' && subagent.currentTool
+                      ? subagent.currentTool
+                      : subagent.status}
+                  </span>
+                </div>
+
+                {subagent.taskSnippet && (
+                  <p style={{ margin: '0 0 8px 0', fontSize: '0.74rem', color: 'var(--text-secondary)', lineHeight: 1.4 }}>
+                    {subagent.taskSnippet}
+                  </p>
+                )}
+
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    fontSize: '0.72rem',
+                    color: 'var(--text-muted)',
+                    paddingTop: '6px',
+                    borderTop: '1px solid var(--border-subtle)',
+                  }}
+                >
+                  <span>{subagent.tools.length} tool {subagent.tools.length === 1 ? 'call' : 'calls'}</span>
+                  <span style={{ color: isSelected ? statusColor : 'var(--text-muted)' }}>
+                    {isSelected ? 'Hide Details ▲' : 'View Logs ▼'}
+                  </span>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Selected Subagent Tool Inspection Drawer */}
+      {activeSubagent && (
+        <div
+          style={{
+            background: 'var(--bg-surface-raised)',
+            border: '1px solid var(--border-default)',
+            borderRadius: '10px',
+            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: 'var(--interactive-fg)' }}>
+                Subagent Activity: {activeSubagent.name}
+              </span>
+              <span style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>({activeSubagent.tools.length})</span>
+            </div>
+            <button
+              type="button"
+              onClick={() => setSelectedSubagent(null)}
+              style={{
+                background: 'transparent',
+                border: 'none',
+                color: 'var(--text-muted)',
+                cursor: 'pointer',
+                fontSize: '0.8rem',
+              }}
+            >
+              Close
+            </button>
+          </div>
+
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', maxHeight: '300px', overflowY: 'auto' }}>
+            {activeSubagent.tools.map((tool, idx) => (
+              <div
+                key={idx}
+                style={{
+                  background: 'var(--bg-surface-soft)',
+                  border: '1px solid var(--border-subtle)',
+                  borderRadius: '6px',
+                  padding: '8px 10px',
+                  fontSize: '0.76rem',
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '4px' }}>
+                  <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: 'var(--bg-canvas)',
+                      border: '1px solid var(--border-subtle)',
+                      borderRadius: '4px',
+                      color: 'var(--text-secondary)',
+                      fontSize: '0.72rem',
+                      overflowX: 'auto',
+                    }}
+                  >
+                    {JSON.stringify(tool.input, null, 2)}
+                  </pre>
+                )}
+                {tool.result && (
+                  <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>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/renderer/shared/components/activity/SubagentStatusStrip.test.tsx

@@ -0,0 +1,82 @@
+import { createElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, it, expect } from 'vitest'
+import { SubagentStatusStrip } from './SubagentStatusStrip'
+import type { AgentProgress } from '../../types'
+
+describe('SubagentStatusStrip', () => {
+  it('renders nothing when there are no subagents', () => {
+    const html = renderToStaticMarkup(createElement(SubagentStatusStrip, { progress: [] }))
+    expect(html).toBe('')
+  })
+
+  it('renders running and completed subagent cards', () => {
+    const progress: AgentProgress[] = [
+      {
+        type: 'SubagentStarted',
+        data: {
+          subagent: 'recon',
+          profile: 'explorer',
+          task: 'Searching for payment webhook endpoints...',
+        },
+      },
+      {
+        type: 'SubagentStarted',
+        data: {
+          subagent: 'config',
+          profile: 'explorer',
+          task: 'Checking env files',
+        },
+      },
+      {
+        type: 'SubagentFinished',
+        data: {
+          subagent: 'config',
+          status: 'completed',
+          elapsed_ms: 3000,
+          steps: 2,
+          summary_preview: 'Checked stripe API keys in .env',
+        },
+      },
+    ]
+
+    const html = renderToStaticMarkup(createElement(SubagentStatusStrip, { progress }))
+    expect(html).toContain('subagent-status-strip')
+    expect(html).toContain('Running Subagents (1/2 completed)')
+    expect(html).toContain('[recon]')
+    expect(html).toContain('Searching for payment webhook endpoints...')
+    expect(html).toContain('[config]')
+    expect(html).toContain('Checked stripe API keys in .env')
+    expect(html).toContain('done 3s')
+  })
+
+  it('renders failed subagents with failed status and count', () => {
+    const progress: AgentProgress[] = [
+      {
+        type: 'SubagentStarted',
+        data: {
+          subagent: 'debugger',
+          profile: 'explorer',
+          task: 'Running tests',
+        },
+      },
+      {
+        type: 'SubagentFinished',
+        data: {
+          subagent: 'debugger',
+          status: 'failed',
+          elapsed_ms: 1500,
+          steps: 1,
+          summary_preview: 'Tests failed with panic',
+        },
+      },
+    ]
+
+    const html = renderToStaticMarkup(createElement(SubagentStatusStrip, { progress }))
+    expect(html).toContain('subagent-status-strip')
+    expect(html).toContain('Subagents (0 completed, 1 failed)')
+    expect(html).toContain('[debugger]')
+    expect(html).toContain('Tests failed with panic')
+    expect(html).toContain('failed 2s')
+  })
+})

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

@@ -0,0 +1,107 @@
+import React, { useMemo } from 'react'
+import type { AgentProgress } from '../../types'
+import { parseSubagentGraph } from './SubagentDagView'
+
+export interface SubagentStatusStripProps {
+  progress: AgentProgress[]
+  onOpenDetails?: () => void
+}
+
+export function SubagentStatusStrip({ progress, onOpenDetails }: SubagentStatusStripProps) {
+  const { subagents } = useMemo(() => parseSubagentGraph(progress), [progress])
+
+  if (!subagents || subagents.length === 0) {
+    return null
+  }
+
+  const runningCount = subagents.filter(s => s.status === 'running').length
+  const completedCount = subagents.filter(s => s.status === 'completed').length
+  const failedCount = subagents.filter(s => s.status === 'failed').length
+  const anyRunning = runningCount > 0
+
+  const title = anyRunning
+    ? `Running Subagents (${completedCount}/${subagents.length} completed)`
+    : failedCount > 0
+    ? `Subagents (${completedCount} completed, ${failedCount} failed)`
+    : `Subagents (${completedCount} completed)`
+
+  return (
+    <div
+      className="subagent-status-strip"
+      data-testid="subagent-status-strip"
+      onClick={onOpenDetails}
+      role={onOpenDetails ? 'button' : undefined}
+      tabIndex={onOpenDetails ? 0 : undefined}
+      onKeyDown={e => {
+        if (onOpenDetails && (e.key === 'Enter' || e.key === ' ')) {
+          e.preventDefault()
+          onOpenDetails()
+        }
+      }}
+      title={onOpenDetails ? 'Click to inspect subagent activity' : undefined}
+    >
+      <div className="subagent-status-strip-header">
+        <div className="subagent-status-strip-header-left">
+          {anyRunning ? (
+            <span className="subagent-status-spinner" aria-hidden="true" />
+          ) : failedCount > 0 ? (
+            <span className="subagent-status-icon-alert" aria-hidden="true">⚠</span>
+          ) : (
+            <span className="subagent-status-icon-check" aria-hidden="true">✓</span>
+          )}
+          <span className="subagent-status-strip-title">{title}</span>
+        </div>
+        {onOpenDetails && (
+          <span className="subagent-status-strip-hint">Details ›</span>
+        )}
+      </div>
+
+      <div className="subagent-status-strip-list">
+        {subagents.map(agent => {
+          const isRunning = agent.status === 'running'
+          const isSuccess = agent.status === 'completed'
+          const isFailed = agent.status === 'failed'
+
+          let desc = (agent.taskSnippet && agent.taskSnippet.toLowerCase() !== 'null') ? agent.taskSnippet : 'Working on task...'
+          if ((isSuccess || isFailed) && agent.summaryPreview && agent.summaryPreview.toLowerCase() !== 'null') {
+            desc = agent.summaryPreview
+          } else if (isRunning && agent.currentTool) {
+            desc = `Running ${agent.currentTool.replace('_', ' ')}`
+          }
+
+          let suffix = ''
+          if (isSuccess) {
+            const secs = Math.max(1, Math.round((agent.elapsedMs ?? 0) / 1000))
+            suffix = `done ${secs}s`
+          } else if (isFailed) {
+            const secs = Math.max(1, Math.round((agent.elapsedMs ?? 0) / 1000))
+            suffix = `failed ${secs}s`
+          } else {
+            suffix = 'running'
+          }
+
+          return (
+            <div
+              key={agent.name}
+              className={`subagent-status-strip-row ${agent.status}`}
+              data-testid={`subagent-status-row-${agent.name}`}
+            >
+              <div className="subagent-status-strip-row-main">
+                {isRunning ? (
+                  <span className="subagent-status-row-spinner" aria-hidden="true" />
+                ) : isSuccess ? (
+                  <span className="subagent-status-row-check" aria-hidden="true">✓</span>
+                ) : (
+                  <span className="subagent-status-row-cross" aria-hidden="true">✗</span>
+                )}
+                <span className="subagent-status-strip-tag">[{agent.name}]</span>
+                <span className="subagent-status-strip-desc">{desc}</span>
+              </div>
+              <span className="subagent-status-strip-timing">{suffix}</span>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}