IC-Coder-Plugin/src/views/agentCard.ts

/**
 * 智能体卡片组件
 *
 * 功能说明:
 * - 提供智能体执行状态的可视化展示
 * - 显示智能体名称、状态和执行步骤
 * - 支持实时更新步骤信息
 */

import { agentIconSvg } from "../constants/toolIcons";

/**
 * 获取智能体卡片的样式
 */
export function getAgentCardStyles(): string {
  return `
    /* 智能体卡片样式 */
    .segment-agent {
      margin: 8px 0;
    }
    .agent-card {
      border: 1px solid var(--vscode-input-border);
      border-radius: 8px;
      overflow: hidden;
      background: var(--vscode-editor-background);
    }
    .agent-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: var(--vscode-sideBar-background);
      border-bottom: 1px solid var(--vscode-input-border);
    }
    .agent-icon {
      font-size: 16px;
    }
    .agent-name {
      font-weight: 500;
      flex: 1;
      font-size:14px
    }
    .agent-status {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 10px;
    }
    .agent-status.running {
      background: var(--vscode-inputValidation-infoBackground);
      color: var(--vscode-inputValidation-infoForeground);
    }
    .agent-status.completed {
      background: #28a745;
      color: white;
    }
    .agent-status.error {
      background: #dc3545;
      color: white;
    }
    .agent-body {
      padding: 8px;
    }
    .agent-steps-container {
      max-height: 150px;
      overflow-y: auto;
      font-size: 12px;
    }
    .agent-step {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 4px;
      margin-bottom: 4px;
      background: var(--vscode-list-hoverBackground);
    }
    .agent-step:last-child {
      margin-bottom: 0;
    }
    .step-icon {
      flex-shrink: 0;
    }
    .step-name {
      font-weight: 500;
      color: var(--vscode-foreground);
    }
    .step-result {
      color: var(--vscode-descriptionForeground);
      font-size: 11px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .agent-step-placeholder {
      color: var(--vscode-descriptionForeground);
      font-style: italic;
      padding: 8px;
      text-align: center;
    }
    /* 低调显示的工具调用样式 */
    .agent-step.low-profile {
      opacity: 0.85;
      font-size: 13px;
      padding: 4px 8px;
      background: transparent;
      margin-bottom: 2px;
    }
    .agent-step.low-profile .step-icon {
      opacity: 0.8;
      font-size: 13px;
    }
    .agent-step.low-profile .step-name {
      font-weight: 400;
      color: var(--vscode-descriptionForeground);
      opacity: 0.9;
    }
    .agent-step.low-profile .step-result {
      opacity: 0.85;
      font-size: 12px;
    }
  `;
}

/**
 * 获取智能体卡片的脚本
 */
export function getAgentCardScript(): string {
  return `
    // 工具名称中文映射
    function getAgentToolDisplayName(toolName) {
      const toolNameMap = {
        'file_read': '文件读取',
        'file_write': '文件写入',
        'file_delete': '文件删除',
        'file_list': '检索文件',
        'syntax_check': '语法检查',
        'simulation': '仿真',
        'waveform_summary': '波形分析',
        'knowledge_save': '保存知识库',
        'knowledge_load': '加载知识库',
        'queryKnowledgeSummary': '查询知识摘要',
        'queryRules': '查询规则',
        'setModule': '设置模块',
        'addSignal': '正在分析信号定义',
        'addSignalExample': '正在处理信号示例',
        'validateKnowledgeGraph': '验证知识图谱',
        'querySignals': '查询信号',
        'addPlan': '添加计划',
        'addEdge': '添加边',
        'showPlan': '显示计划',
        'spawnExplorer': '代码探索',
        'spawnDebugger': '波形调试',
        'queryByBFS': 'BFS查询',
        'queryStateTransitions': '查询状态转移',
        'addStateTransition': '添加状态转移'
      };
      return toolNameMap[toolName] || toolName;
    }

    /**
     * 渲染智能体卡片
     * @param {Object} segment - 智能体段落数据
     * @param {HTMLElement} segmentDiv - 段落容器元素
     */
    function renderAgentCard(segment, segmentDiv) {
      segmentDiv.className += ' segment-agent';

      const statusText = segment.agentStatus === 'completed' ? '完成'
        : segment.agentStatus === 'error' ? '错误' : '执行中';
      const statusClass = segment.agentStatus || 'running';

      const stepsHtml = (segment.agentSteps || []).map(step => {
        const icon = step.status === 'completed' ? '✅' : step.status === 'error' ? '❌' : '🔄';
        const displayName = getAgentToolDisplayName(step.toolName);
        const result = step.toolResult ? \`: \${step.toolResult.substring(0, 50)}\${step.toolResult.length > 50 ? '...' : ''}\` : '';
        // 所有工具调用都使用低调样式
        const stepClass = 'agent-step low-profile';
        return \`<div class="\${stepClass}"><span class="step-icon">\${icon}</span><span class="step-name">\${displayName}</span><span class="step-result">\${result}</span></div>\`;
      }).join('');

      segmentDiv.innerHTML = \`
        <div class="agent-card">
          <div class="agent-header">
            <span class="agent-icon">${agentIconSvg}</span>
            <span class="agent-name">\${segment.agentName || '智能体'}</span>
            <span class="agent-status \${statusClass}">\${statusText}</span>
          </div>
          <div class="agent-body">
            <div class="agent-steps-container">
              \${stepsHtml || '<div class="agent-step-placeholder">等待执行...</div>'}
            </div>
          </div>
        </div>
      \`;

      // 自动滚动到最新步骤
      setTimeout(() => {
        const container = segmentDiv.querySelector('.agent-steps-container');
        if (container) {
          container.scrollTop = container.scrollHeight;
        }
      }, 0);
    }
  `;
}