agent-management/skills/agent-management-external-workflow/references/platform/components/agent-thinking/AgentThinkingPanel.vue

<script setup>
/**
 * v1.1：Hermes Agent 思考过程展示容器（深色风格）
 *
 * 整合 3 个区域（ThinkingLive 已提到 WorkflowEditor.vue 的 .nrc-thinking 上方）：
 *   ③ TodoListPanel   —— 待办清单（位于工具调用上方）
 *   ④ ToolCalls       —— 工具调用（current + history）
 *   ⑤ AskforPanel     —— 全局唯一用户确认（内嵌）
 *
 * 还包含 RunReconnectBadge 显示断线重连状态。
 */
import { computed } from 'vue'
import ToolCalls from './ToolCalls.vue'
import TodoListPanel from './TodoListPanel.vue'
import AskforPanel from './AskforPanel.vue'
import RunReconnectBadge from './RunReconnectBadge.vue'

const props = defineProps({
  // 当前节点结果对象（必填）
  node: { type: Object, required: true },
  // v1.1：全局 Askfor 暂停点（来自 runner.pendingAsk）
  pendingAsk: { type: Object, default: null },
  // v1.1：全局重连状态（来自 runner.reconnecting）
  reconnecting: { type: Boolean, default: false },
})

const emit = defineEmits(['submit-clarify'])

// M-9：仅当至少一项子内容可展示时才渲染容器，避免空 div（含 RunReconnectBadge）占位
const hasAnyContent = computed(() => {
  return (props.node?.todos?.length > 0)
    || (props.node?.toolHistory?.length > 0)
    || !!props.node?.currentTool
    || !!props.pendingAsk
    || !!props.reconnecting
})
</script>

<template>
  <div v-if="hasAnyContent" class="agent-thinking-panel">
    <RunReconnectBadge :reconnecting="reconnecting" />

    <!-- ③ 待办清单：放在工具调用上方，running 时强制展开，完成后自动收起 -->
    <TodoListPanel
      :todos="node.todos || []"
      :node-running="node.status === 'running'"
    />

    <!-- ④ 工具调用：传节点状态，running 时强制展开历史 -->
    <ToolCalls
      :current-tool="node.currentTool || null"
      :history="node.toolHistory || []"
      :node-running="node.status === 'running'"
    />

    <!-- ⑤ Askfor 内嵌（pendingAsk 与当前节点绑定时显示） -->
    <AskforPanel :pending="pendingAsk" @submit="answer => emit('submit-clarify', answer)" />
  </div>
</template>

<style scoped>
/* v1.1：Agent 思考过程容器，深色风格（与 .nrc-thinking 视觉一致）
   容器本身不占额外 padding/margin，让子组件（ToolCalls/TodoList/Askfor）
   的 margin 直接生效，与 .nrc-thinking 在 .node-result-card 中对齐 */
.agent-thinking-panel {
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;
}
</style>