qwen-code/packages/cli/src/ui/components/subagents/SubagentExecutionDisplay.tsx

/**
 * @license
 * Copyright 2025 Qwen
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useMemo } from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../../colors.js';
import {
  TaskResultDisplay,
  SubagentStatsSummary,
} from '@qwen-code/qwen-code-core';
import { theme } from '../../semantic-colors.js';
import { useKeypress } from '../../hooks/useKeypress.js';
import { COLOR_OPTIONS } from './constants.js';
import { fmtDuration } from './utils.js';

export type DisplayMode = 'compact' | 'default' | 'verbose';

export interface SubagentExecutionDisplayProps {
  data: TaskResultDisplay;
}

const getStatusColor = (
  status: TaskResultDisplay['status'] | 'executing' | 'success',
) => {
  switch (status) {
    case 'running':
    case 'executing':
      return theme.status.warning;
    case 'completed':
    case 'success':
      return theme.status.success;
    case 'failed':
      return theme.status.error;
    default:
      return Colors.Gray;
  }
};

const getStatusText = (status: TaskResultDisplay['status']) => {
  switch (status) {
    case 'running':
      return 'Running';
    case 'completed':
      return 'Completed';
    case 'failed':
      return 'Failed';
    default:
      return 'Unknown';
  }
};

/**
 * Component to display subagent execution progress and results.
 * This is now a pure component that renders the provided SubagentExecutionResultDisplay data.
 * Real-time updates are handled by the parent component updating the data prop.
 */
export const SubagentExecutionDisplay: React.FC<
  SubagentExecutionDisplayProps
> = ({ data }) => {
  const [displayMode, setDisplayMode] = React.useState<DisplayMode>('default');

  const agentColor = useMemo(() => {
    const colorOption = COLOR_OPTIONS.find(
      (option) => option.name === data.subagentColor,
    );
    return colorOption?.value || theme.text.accent;
  }, [data.subagentColor]);

  const footerText = React.useMemo(() => {
    // This component only listens to keyboard shortcut events when the subagent is running
    if (data.status !== 'running') return '';

    if (displayMode === 'verbose') return 'Press ctrl+r to show less.';

    if (displayMode === 'default') {
      const hasMoreLines = data.taskPrompt.split('\n').length > 10;
      const hasMoreToolCalls = data.toolCalls && data.toolCalls.length > 5;

      if (hasMoreToolCalls || hasMoreLines) {
        return 'Press ctrl+s to show more.';
      }
      return '';
    }
    return '';
  }, [displayMode, data.toolCalls, data.taskPrompt, data.status]);

  // Handle ctrl+s and ctrl+r keypresses to control display mode
  useKeypress(
    (key) => {
      if (key.ctrl && key.name === 's') {
        setDisplayMode((current) =>
          current === 'default' ? 'verbose' : 'verbose',
        );
      } else if (key.ctrl && key.name === 'r') {
        setDisplayMode((current) =>
          current === 'verbose' ? 'default' : 'default',
        );
      }
    },
    { isActive: true },
  );

  return (
    <Box flexDirection="column" paddingX={1} gap={1}>
      {/* Header with subagent name and status */}
      <Box flexDirection="row">
        <Text bold color={agentColor}>
          {data.subagentName}
        </Text>
        <StatusDot status={data.status} />
        <StatusIndicator status={data.status} />
      </Box>

      {/* Task description */}
      <TaskPromptSection
        taskPrompt={data.taskPrompt}
        displayMode={displayMode}
      />

      {/* Progress section for running tasks */}
      {data.status === 'running' &&
        data.toolCalls &&
        data.toolCalls.length > 0 && (
          <Box flexDirection="column">
            <ToolCallsList
              toolCalls={data.toolCalls}
              displayMode={displayMode}
            />
          </Box>
        )}

      {/* Results section for completed/failed tasks */}
      {(data.status === 'completed' || data.status === 'failed') && (
        <ResultsSection data={data} displayMode={displayMode} />
      )}

      {/* Footer with keyboard shortcuts */}
      {footerText && (
        <Box flexDirection="row">
          <Text color={Colors.Gray}>{footerText}</Text>
        </Box>
      )}
    </Box>
  );
};

/**
 * Task prompt section with truncation support
 */
const TaskPromptSection: React.FC<{
  taskPrompt: string;
  displayMode: DisplayMode;
}> = ({ taskPrompt, displayMode }) => {
  const lines = taskPrompt.split('\n');
  const shouldTruncate = lines.length > 10;
  const showFull = displayMode === 'verbose';
  const displayLines = showFull ? lines : lines.slice(0, 10);

  return (
    <Box flexDirection="column" gap={1}>
      <Box flexDirection="row">
        <Text color={theme.text.primary}>Task Detail: </Text>
        {shouldTruncate && displayMode === 'default' && (
          <Text color={Colors.Gray}> Showing the first 10 lines.</Text>
        )}
      </Box>
      <Box paddingLeft={1}>
        <Text wrap="wrap">
          {displayLines.join('\n') + (shouldTruncate && !showFull ? '...' : '')}
        </Text>
      </Box>
    </Box>
  );
};

/**
 * Status dot component with similar height as text
 */
const StatusDot: React.FC<{
  status: TaskResultDisplay['status'];
}> = ({ status }) => (
  <Box marginLeft={1} marginRight={1}>
    <Text color={getStatusColor(status)}>●</Text>
  </Box>
);

/**
 * Status indicator component
 */
const StatusIndicator: React.FC<{
  status: TaskResultDisplay['status'];
}> = ({ status }) => {
  const color = getStatusColor(status);
  const text = getStatusText(status);
  return <Text color={color}>{text}</Text>;
};

/**
 * Tool calls list - format consistent with ToolInfo in ToolMessage.tsx
 */
const ToolCallsList: React.FC<{
  toolCalls: TaskResultDisplay['toolCalls'];
  displayMode: DisplayMode;
}> = ({ toolCalls, displayMode }) => {
  const calls = toolCalls || [];
  const shouldTruncate = calls.length > 5;
  const showAll = displayMode === 'verbose';
  const displayCalls = showAll ? calls : calls.slice(-5); // Show last 5

  // Reverse the order to show most recent first
  const reversedDisplayCalls = [...displayCalls].reverse();

  return (
    <Box flexDirection="column">
      <Box flexDirection="row" marginBottom={1}>
        <Text color={theme.text.primary}>Tools:</Text>
        {shouldTruncate && displayMode === 'default' && (
          <Text color={Colors.Gray}>
            {' '}
            Showing the last 5 of {calls.length} tools.
          </Text>
        )}
      </Box>
      {reversedDisplayCalls.map((toolCall, index) => (
        <ToolCallItem key={`${toolCall.name}-${index}`} toolCall={toolCall} />
      ))}
    </Box>
  );
};

/**
 * Individual tool call item - consistent with ToolInfo format
 */
const ToolCallItem: React.FC<{
  toolCall: {
    name: string;
    status: 'executing' | 'success' | 'failed';
    error?: string;
    args?: Record<string, unknown>;
    result?: string;
    resultDisplay?: string;
    description?: string;
  };
}> = ({ toolCall }) => {
  const STATUS_INDICATOR_WIDTH = 3;

  // Map subagent status to ToolCallStatus-like display
  const statusIcon = React.useMemo(() => {
    const color = getStatusColor(toolCall.status);
    switch (toolCall.status) {
      case 'executing':
        return <Text color={color}>⊷</Text>; // Using same as ToolMessage
      case 'success':
        return <Text color={color}>✔</Text>;
      case 'failed':
        return (
          <Text color={color} bold>
            x
          </Text>
        );
      default:
        return <Text color={color}>o</Text>;
    }
  }, [toolCall.status]);

  const description = React.useMemo(() => {
    if (!toolCall.description) return '';
    const firstLine = toolCall.description.split('\n')[0];
    return firstLine.length > 80
      ? firstLine.substring(0, 80) + '...'
      : firstLine;
  }, [toolCall.description]);

  // Get first line of resultDisplay for truncated output
  const truncatedOutput = React.useMemo(() => {
    if (!toolCall.resultDisplay) return '';
    const firstLine = toolCall.resultDisplay.split('\n')[0];
    return firstLine.length > 80
      ? firstLine.substring(0, 80) + '...'
      : firstLine;
  }, [toolCall.resultDisplay]);

  return (
    <Box flexDirection="column" paddingLeft={1} marginBottom={0}>
      {/* First line: status icon + tool name + description (consistent with ToolInfo) */}
      <Box flexDirection="row">
        <Box minWidth={STATUS_INDICATOR_WIDTH}>{statusIcon}</Box>
        <Text wrap="truncate-end">
          <Text color={Colors.Foreground} bold>
            {toolCall.name}
          </Text>{' '}
          <Text color={Colors.Gray}>{description}</Text>
          {toolCall.error && (
            <Text color={theme.status.error}> - {toolCall.error}</Text>
          )}
        </Text>
      </Box>

      {/* Second line: truncated returnDisplay output */}
      {truncatedOutput && (
        <Box flexDirection="row" paddingLeft={STATUS_INDICATOR_WIDTH}>
          <Text color={Colors.Gray}>{truncatedOutput}</Text>
        </Box>
      )}
    </Box>
  );
};

/**
 * Execution summary details component
 */
const ExecutionSummaryDetails: React.FC<{
  data: TaskResultDisplay;
  displayMode: DisplayMode;
}> = ({ data, displayMode: _displayMode }) => {
  const stats = data.executionSummary;

  if (!stats) {
    return (
      <Box flexDirection="column" paddingLeft={1}>
        <Text color={Colors.Gray}>• No summary available</Text>
      </Box>
    );
  }

  return (
    <Box flexDirection="column" paddingLeft={1}>
      <Text>
        • <Text>Duration: {fmtDuration(stats.totalDurationMs)}</Text>
      </Text>
      <Text>
        • <Text>Rounds: {stats.rounds}</Text>
      </Text>
      <Text>
        • <Text>Tokens: {stats.totalTokens.toLocaleString()}</Text>
      </Text>
    </Box>
  );
};

/**
 * Tool usage statistics component
 */
const ToolUsageStats: React.FC<{
  executionSummary?: SubagentStatsSummary;
}> = ({ executionSummary }) => {
  if (!executionSummary) {
    return (
      <Box flexDirection="column" paddingLeft={1}>
        <Text color={Colors.Gray}>• No tool usage data available</Text>
      </Box>
    );
  }

  return (
    <Box flexDirection="column" paddingLeft={1}>
      <Text>
        • <Text bold>Total Calls:</Text> {executionSummary.totalToolCalls}
      </Text>
      <Text>
        • <Text bold>Success Rate:</Text>{' '}
        <Text color={Colors.AccentGreen}>
          {executionSummary.successRate.toFixed(1)}%
        </Text>{' '}
        (
        <Text color={Colors.AccentGreen}>
          {executionSummary.successfulToolCalls} success
        </Text>
        ,{' '}
        <Text color={Colors.AccentRed}>
          {executionSummary.failedToolCalls} failed
        </Text>
        )
      </Text>
    </Box>
  );
};

/**
 * Results section for completed executions - matches the clean layout from the image
 */
const ResultsSection: React.FC<{
  data: TaskResultDisplay;
  displayMode: DisplayMode;
}> = ({ data, displayMode }) => (
  <Box flexDirection="column" gap={1}>
    {/* Tool calls section - clean list format */}
    {data.toolCalls && data.toolCalls.length > 0 && (
      <ToolCallsList toolCalls={data.toolCalls} displayMode={displayMode} />
    )}

    {/* Execution Summary section */}
    <Box flexDirection="column">
      <Box flexDirection="row" marginBottom={1}>
        <Text color={theme.text.primary}>Execution Summary:</Text>
      </Box>
      <ExecutionSummaryDetails data={data} displayMode={displayMode} />
    </Box>

    {/* Tool Usage section */}
    {data.executionSummary && (
      <Box flexDirection="column">
        <Box flexDirection="row" marginBottom={1}>
          <Text color={theme.text.primary}>Tool Usage:</Text>
        </Box>
        <ToolUsageStats executionSummary={data.executionSummary} />
      </Box>
    )}

    {/* Error reason for failed tasks */}
    {data.status === 'failed' && data.terminateReason && (
      <Box flexDirection="row">
        <Text color={Colors.AccentRed}>❌ Failed: </Text>
        <Text color={Colors.Gray}>{data.terminateReason}</Text>
      </Box>
    )}
  </Box>
);