Function AgentPanel

src/cli.tsx:79–167

({ agent, width }: { agent: AgentState; width: number })

}

function AgentPanel({ agent, width }: { agent: AgentState; width: number }) {
  const maxLines = 15;
  const contentWidth = width - 4;

  // Build all display lines from activity
  const displayLines: { text: string; color?: string; dim?: boolean }[] = [];

  for (const event of agent.activity) {
    switch (event.type) {
      case 'thinking': {
        const wrapped = wrapText(`💭 ${event.text}`, contentWidth);
        wrapped.forEach((line) => displayLines.push({ text: line, dim: true }));
        break;
      }
      case 'tool_call': {
        const toolText = `🔧 ${event.name}(${event.args})`;
        const wrapped = wrapText(toolText, contentWidth);
        wrapped.forEach((line) => displayLines.push({ text: line, color: 'cyan' }));
        break;
      }
      case 'tool_result': {
        const wrapped = wrapText(`  ↪ ${event.preview}`, contentWidth);
        wrapped.forEach((line) => displayLines.push({ text: line, color: 'gray' }));
        break;
      }
      case 'response': {
        const wrapped = wrapText(event.text, contentWidth);
        wrapped.forEach((line) => displayLines.push({ text: line }));
        break;
      }
      case 'error': {
        const wrapped = wrapText(`❌ ${event.text}`, contentWidth);
        wrapped.forEach((line) => displayLines.push({ text: line, color: 'red' }));
        break;
      }
    }
  }

  // Add current streaming text
  if (agent.currentText && agent.status === 'running') {
    const wrapped = wrapText(`▸ ${agent.currentText}`, contentWidth);
    wrapped.forEach((line) => displayLines.push({ text: line, color: 'white' }));
  }

  // Take last N lines
  const visibleLines = displayLines.slice(-maxLines);

  return (
    <Box
      flexDirection="column"
      width={width}
      borderStyle="round"
      borderColor={agent.color}
      paddingX={1}
    >
      {/* Header */}
      <Box justifyContent="space-between">
        <Text bold color={agent.color}>