@veltra/ai 2.1.6 → 2.1.8

package/src/components/ai-chat/ask-question.vue

@@ -81,7 +81,7 @@
     </template>
 
     <!-- 提交后：问答摘要 -->
-    <template v-else-if="toolCall.status === 'success'">
+    <template v-else-if="answers != null">
       <div v-for="(item, i) in doneAnswers" :key="i" :class="cls.e('ask-question-result')">
         <div :class="cls.e('ask-question-result-q')">
           <span
@@ -101,7 +101,7 @@
     </template>
 
     <!-- 异常 / 取消 -->
-    <div v-else :class="cls.e('ask-question-status')">{{ statusText }}</div>
+    <div v-else :class="cls.e('ask-question-status')">{{ error }}</div>
   </div>
 </template>
 
@@ -110,39 +110,34 @@ import { UButton, UInput } from '@veltra/desktop'
 import { bem } from '@veltra/utils'
 import { computed, inject, ref, watch } from 'vue'
 
-import type { ChatToolCall } from '../../chat/types'
 import type {
-  AskQuestionArgs,
+  AskQuestionAnswer,
   AskQuestionItem,
   AskQuestionResult
 } from '../../tools/ask-question/ask-question'
-import { resolveAskQuestion } from '../../tools/ask-question/deferred'
 import { AiChatDIKey } from './di'
 
 defineOptions({ name: 'UAiChatAskQuestion' })
 
-const props = defineProps<{ toolCall: ChatToolCall }>()
+const props = defineProps<{
+  /** 问题列表；组件不再从 toolCall 解析参数 */
+  questions: AskQuestionItem[]
+  /** 已提交摘要；有值则展示结果而非表单 */
+  answers?: AskQuestionAnswer[]
+  /** 失败 / 取消文案 */
+  error?: string
+}>()
+
+const emit = defineEmits<{
+  /** 提交问答；值为答案数组（与 AskQuestionResult 兼容） */
+  (e: 'submit', value: AskQuestionAnswer[] | AskQuestionResult): void
+}>()
 
 const di = inject(AiChatDIKey)
 const cls = di?.cls ?? bem('ai-chat')
 
-/** 模型输出的提问参数 */
-const questions = computed<AskQuestionItem[]>(() => {
-  try {
-    const args = JSON.parse(props.toolCall.arguments || '{}') as Partial<AskQuestionArgs>
-    return Array.isArray(args.questions) ? args.questions : []
-  } catch {
-    return []
-  }
-})
-
-/** 作答中：execute 挂起等待用户提交 */
-const answering = computed(() => {
-  return (
-    props.toolCall.result == null &&
-    (props.toolCall.status === 'running' || props.toolCall.status === 'pending')
-  )
-})
+/** 作答中：尚未提交、也没有失败文案 */
+const answering = computed(() => props.answers == null && !props.error)
 
 /** 当前题索引 */
 const current = ref(0)
@@ -152,16 +147,16 @@ const selections = ref<(string | null)[]>([])
 const customs = ref<string[]>([])
 
 watch(
-  questions,
+  () => props.questions,
   (list) => {
-    if (props.toolCall.result != null) return
+    if (props.answers != null) return
     selections.value = list.map(() => null)
     customs.value = list.map(() => '')
   },
   { immediate: true }
 )
 
-const currentQuestion = computed(() => questions.value[current.value])
+const currentQuestion = computed(() => props.questions[current.value])
 
 /** 某题是否已作答：自定义输入非空优先，否则看选中项 */
 const isAnswered = (index: number) => {
@@ -169,11 +164,11 @@ const isAnswered = (index: number) => {
 }
 
 const allAnswered = computed(() => {
-  return questions.value.length > 0 && questions.value.every((_, i) => isAnswered(i))
+  return props.questions.length > 0 && props.questions.every((_, i) => isAnswered(i))
 })
 
 const goTo = (index: number) => {
-  if (index < 0 || index >= questions.value.length) return
+  if (index < 0 || index >= props.questions.length) return
   current.value = index
 }
 
@@ -192,41 +187,30 @@ const onCustomInput = (value: string) => {
 }
 
 const handleSubmit = () => {
-  const firstUnanswered = questions.value.findIndex((_, i) => !isAnswered(i))
+  const firstUnanswered = props.questions.findIndex((_, i) => !isAnswered(i))
   if (firstUnanswered >= 0) {
     current.value = firstUnanswered
     return
   }
-  const answers = questions.value.map((item, i) => ({
-    question: item.question,
-    answer: customs.value[i]?.trim() || selections.value[i] || ''
-  }))
-  resolveAskQuestion(props.toolCall.id, { answers })
+  emit(
+    'submit',
+    props.questions.map((item, i) => ({
+      question: item.question,
+      answer: customs.value[i]?.trim() || selections.value[i] || ''
+    }))
+  )
 }
 
-/** 提交后的问答摘要（含历史恢复：从序列化结果解析） */
+/** 提交后的问答摘要：命中预设选项的回答渲染为 chip */
 const doneAnswers = computed(() => {
-  if (props.toolCall.status !== 'success' || !props.toolCall.result) return []
-  let result: AskQuestionResult
-  try {
-    result = JSON.parse(props.toolCall.result)
-  } catch {
-    return []
-  }
-  if (!Array.isArray(result?.answers)) return []
-  return result.answers.map((item) => ({
-    ...item,
-    /** 命中预设选项的回答渲染为 chip */
-    isOption: questions.value.some(
+  const list = props.answers
+  if (!list?.length) return []
+  return list.map((item) => ({
+    question: item.question,
+    answer: item.answer,
+    isOption: props.questions.some(
       (q) => q.question === item.question && q.options?.includes(item.answer)
     )
   }))
 })
-
-const statusText = computed(() => {
-  if (props.toolCall.status !== 'error') return ''
-  const err = props.toolCall.error ?? ''
-  if (err.includes('Abort') || err.includes('取消')) return '已取消'
-  return err || '提问失败'
-})
 </script>

package/src/components/ai-chat/di.ts

@@ -1,15 +1,17 @@
 import type { BEM } from '@veltra/utils'
-import type { ComputedRef, InjectionKey, Slots } from 'vue'
+import type { Component, ComputedRef, InjectionKey, Slots } from 'vue'
 
-import type { ChatTool } from '../../chat/types'
+import type { ChatTool, ChatToolMeta } from '../../chat/types'
 
 export interface AiChatContext {
   /** ai-chat 组件的 BEM 类生成器 */
   cls: BEM<'ai-chat'>
   /** ai-chat 使用方提供的插槽（用于 tool-<name> 动态插槽） */
   slots: Slots
-  /** 按 name 索引的工具定义（解析 icon/label/render/autoCollapse） */
-  tools: ComputedRef<Record<string, ChatTool | undefined>>
+  /** 按 name 索引的工具定义或渲染元信息（解析 icon/label/render/autoCollapse） */
+  tools: ComputedRef<Record<string, ChatTool | ChatToolMeta | undefined>>
+  /** 宿主覆盖的 toolName → icon；缺省走包内名称规则 */
+  toolIcons: ComputedRef<Record<string, Component> | undefined>
   /** 打开右侧面板并聚焦到指定工具调用（renderTo: 'panel' 工具的「查看面板」入口） */
   openPanel: (toolCallId: string) => void
 }

package/src/components/ai-chat/job-bar.vue

@@ -0,0 +1,41 @@
+<template>
+  <div v-if="jobs.length" :class="cls.e('job-bar')">
+    <button type="button" :class="cls.e('job-bar-head')" @click="expanded = !expanded">
+      <span>作业 · {{ jobs.length }}</span>
+      <UIcon :class="[cls.e('job-bar-chevron'), bem.is('expanded', expanded)]">
+        <ArrowRight />
+      </UIcon>
+    </button>
+    <div v-if="expanded" :class="cls.e('job-bar-list')">
+      <div v-for="job in jobs" :key="job.id" :class="cls.e('job-bar-item')">
+        <UIcon :class="cls.e('job-bar-icon')">
+          <component :is="resolveToolIcon(job.kind)" />
+        </UIcon>
+        <span :class="[cls.e('job-bar-label'), job.status === 'running' && 'u-shine']">
+          {{ job.label }}
+        </span>
+        <span :class="[cls.e('job-bar-dot'), bem.is(job.status)]" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UIcon } from '@veltra/desktop'
+import { ArrowRight } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { inject, ref } from 'vue'
+
+import type { ChatJob } from '../../chat/types'
+import { AiChatDIKey } from './di'
+import { resolveToolIcon } from './tool-icons'
+
+defineOptions({ name: 'UAiChatJobBar' })
+
+defineProps<{ jobs: ChatJob[] }>()
+
+const expanded = ref(true)
+
+const di = inject(AiChatDIKey)
+const cls = di?.cls ?? bem('ai-chat')
+</script>

package/src/components/ai-chat/message-list.vue

@@ -70,7 +70,8 @@
                 :key="welcomeIndex"
                 type="button"
                 :class="cls.e('welcome-item')"
-                @click="emit('welcome-click', currentWelcomeItem)"
+                :disabled="readonly"
+                @click="!readonly && emit('welcome-click', currentWelcomeItem)"
               >
                 {{ currentWelcomeItem }}
               </button>
@@ -128,6 +129,8 @@ const props = defineProps<{
   welcome?: string | string[]
   /** 是否生成中（控制底部工作状态指示） */
   running?: boolean
+  /** 只读时欢迎语不可点击发送 */
+  readonly?: boolean
   /** 透传给 MarkdownRender 的属性 */
   rendererProps?: Record<string, unknown>
 }>()

package/src/components/ai-chat/queue-list.vue

@@ -3,7 +3,7 @@
     <div :class="cls.e('queue-head')">待发送队列 · {{ queue.length }}</div>
     <div v-for="item in queue" :key="item.id" :class="cls.e('queue-item')">
       <span :class="cls.e('queue-text')" :title="item.content">{{ item.content }}</span>
-      <span :class="cls.e('queue-actions')">
+      <span v-if="!readonly" :class="cls.e('queue-actions')">
         <button
           type="button"
           :class="[cls.e('queue-action'), cls.em('queue-action', 'primary')]"
@@ -47,6 +47,8 @@ defineOptions({ name: 'UAiChatQueueList' })
 defineProps<{
   /** 待发送队列（按执行顺序排列） */
   queue: ChatQueuedMessage[]
+  /** 只读时不展示插队 / 编辑 / 移除 */
+  readonly?: boolean
 }>()
 
 const emit = defineEmits<{

package/src/components/ai-chat/side-panel.vue

@@ -22,12 +22,13 @@
 
 <script lang="ts" setup>
 import { UIcon, UScroll } from '@veltra/desktop'
-import { CircleCheckFilled, CircleClose, Close, Loading, WarningFilled } from '@veltra/icons/normal'
+import { Close } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
-import { computed, inject, type Component } from 'vue'
+import { computed, inject } from 'vue'
 
 import type { ChatToolCall } from '../../chat/types'
 import { AiChatDIKey } from './di'
+import { resolveToolIcon } from './tool-icons'
 
 defineOptions({ name: 'UAiChatSidePanel' })
 
@@ -41,20 +42,21 @@ const cls = di?.cls ?? bem('ai-chat')
 /** 当前调用对应的工具定义（解析 icon/label/render） */
 const tool = computed(() => di?.tools.value[props.toolCall.name])
 
-const STATUS_META: Record<string, { icon: Component; class: string }> = {
-  pending: { icon: Loading, class: 'is-active' },
-  running: { icon: Loading, class: 'is-active' },
-  'awaiting-confirm': { icon: WarningFilled, class: 'is-warning' },
-  success: { icon: CircleCheckFilled, class: 'is-success' },
-  error: { icon: CircleClose, class: 'is-danger' },
-  rejected: { icon: Close, class: 'is-danger' }
+const STATUS_CLASS: Record<string, string> = {
+  pending: 'is-active',
+  running: 'is-active',
+  'awaiting-confirm': 'is-warning',
+  success: 'is-success',
+  error: 'is-danger',
+  rejected: 'is-danger'
 }
 
-const statusIcon = computed(() => STATUS_META[props.toolCall.status]?.icon ?? Loading)
-const statusClass = computed(() => STATUS_META[props.toolCall.status]?.class ?? '')
+const statusClass = computed(() => STATUS_CLASS[props.toolCall.status] ?? '')
 
-/** 头部图标：工具自定义图标优先，缺省用状态图标（与工具卡片一致） */
-const headerIcon = computed(() => tool.value?.icon ?? statusIcon.value)
+/** 头部图标：meta.icon > 宿主覆盖 > 内置名称规则 > 兜底；状态点走 status class */
+const headerIcon = computed(
+  () => tool.value?.icon ?? resolveToolIcon(props.toolCall.name, di?.toolIcons?.value)
+)
 
 /** 面板标题：优先工具定义的 panelTitle（业务对象 + 动作），缺省回落到 label ?? name */
 const panelTitle = computed(() => {

package/src/components/ai-chat/style.scss

@@ -161,7 +161,7 @@ $root-name: ai-chat;
   @include m.e(panel-fallback) {
     margin: 0;
     padding: fn.use-var(gap, default);
-    font-family: fn.use-var(font-family, code);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
     font-size: fn.use-var(font-size-main, small);
     line-height: 1.5;
     white-space: pre-wrap;
@@ -265,6 +265,16 @@ $root-name: ai-chat;
       color: fn.use-var(color, primary);
       background-color: fn.use-var(color, primary, 'light-9');
     }
+
+    &:disabled {
+      cursor: default;
+      color: fn.use-var(text-color, second);
+
+      &:hover {
+        color: fn.use-var(text-color, second);
+        background-color: fn.use-var(bg-color, top);
+      }
+    }
   }
 
   // 欢迎语逐条轮换的切换过渡
@@ -621,19 +631,31 @@ $root-name: ai-chat;
 
   @include m.e(tool-call-section) {
     color: fn.use-var(text-color, assist);
-    margin-bottom: 4px;
+  }
 
+  @include m.e(tool-call-json) {
     &:not(:first-child) {
       margin-top: fn.use-var(gap, small);
     }
   }
 
+  @include m.e(tool-call-json-head) {
+    @include m.flex(flex, flex-start, center);
+    gap: fn.use-var(gap, small);
+    margin-bottom: 4px;
+  }
+
+  @include m.e(tool-call-json-toggle) {
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
   @include m.e(tool-call-code) {
     margin: 0;
     padding: 4px fn.use-var(gap, small);
     border-radius: fn.use-var(radius, small);
     background-color: fn.use-var(bg-color, bottom);
-    font-family: fn.use-var(font-family, code);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
     font-size: fn.use-var(font-size-main, small);
     line-height: 1.5;
     white-space: pre-wrap;
@@ -866,6 +888,136 @@ $root-name: ai-chat;
     }
   }
 
+  // 作业条：有 jobs 时出现在输入区上方
+  @include m.e(job-bar) {
+    flex-shrink: 0;
+    width: 100%;
+    max-width: 800px;
+    box-sizing: border-box;
+    margin-bottom: 4px;
+    border-radius: fn.use-var(radius, default);
+    background-color: fn.use-var(bg-color, middle);
+    padding: 4px;
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  @include m.e(job-bar-head) {
+    @include m.flex(flex, space-between, center);
+    width: 100%;
+    border: none;
+    background: none;
+    padding: 2px 6px;
+    color: fn.use-var(text-color, assist);
+    font-size: inherit;
+    font-family: inherit;
+    cursor: pointer;
+  }
+
+  @include m.e(job-bar-chevron) {
+    font-size: 12px;
+    transition: transform 0.2s;
+
+    @include m.is(expanded) {
+      transform: rotate(90deg);
+    }
+  }
+
+  @include m.e(job-bar-list) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  @include m.e(job-bar-item) {
+    @include m.flex(flex, flex-start, center);
+    gap: 6px;
+    padding: 3px 6px;
+    border-radius: fn.use-var(radius, small);
+  }
+
+  @include m.e(job-bar-icon) {
+    flex-shrink: 0;
+    font-size: 13px;
+    color: fn.use-var(text-color, second);
+  }
+
+  @include m.e(job-bar-label) {
+    flex: 1;
+    min-width: 0;
+    @include m.ellipsis;
+    color: fn.use-var(text-color, main);
+  }
+
+  @include m.e(job-bar-dot) {
+    flex-shrink: 0;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: fn.use-var(text-color, placeholder);
+
+    @include m.is(running) {
+      background-color: fn.use-var(color, primary);
+    }
+
+    @include m.is(done) {
+      background-color: fn.use-var(color, success);
+    }
+
+    @include m.is(error) {
+      background-color: fn.use-var(color, danger);
+    }
+  }
+
+  // session 提问：与输入区同宽卡片
+  @include m.e(session-question) {
+    flex-shrink: 0;
+    width: 100%;
+    max-width: 800px;
+    box-sizing: border-box;
+    margin-bottom: 4px;
+    border-radius: fn.use-var(radius, default);
+    background-color: fn.use-var(bg-color, top);
+    box-shadow: fn.use-var(shadow, sm);
+    padding: fn.use-var(gap, small);
+  }
+
+  // 无 callId 的审批横幅（浮动确认卡）
+  @include m.e(approval-banner) {
+    flex-shrink: 0;
+    width: 100%;
+    max-width: 800px;
+    box-sizing: border-box;
+    margin-bottom: 4px;
+  }
+
+  @include m.e(approval-banner-card) {
+    padding: fn.use-var(gap, small);
+    border-radius: fn.use-var(radius, default);
+    background-color: fn.use-var(bg-color, top);
+    box-shadow: fn.use-var(shadow, sm);
+
+    & + & {
+      margin-top: 4px;
+    }
+  }
+
+  @include m.e(approval-banner-title) {
+    color: fn.use-var(text-color, title);
+    font-weight: 500;
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  @include m.e(approval-banner-reason) {
+    margin-top: 4px;
+    color: fn.use-var(text-color, assist);
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  @include m.e(approval-banner-actions) {
+    @include m.flex(flex, flex-end, center);
+    gap: fn.use-var(gap, small);
+    margin-top: fn.use-var(gap, small);
+  }
+
   // 输入区：无边框卡片，靠浅阴影区分层级；聚焦不换蓝描边，避免变成另一种框
   @include m.e(input-area) {
     flex-shrink: 0;
@@ -934,7 +1086,7 @@ $root-name: ai-chat;
     transition: background-color 0.15s ease;
 
     &:hover {
-      background-color: var(--u-nav-hover-bg);
+      background-color: fn.use-var(bg-color, hover);
     }
   }
 
@@ -1051,7 +1203,7 @@ $root-name: ai-chat;
     transition: background-color 0.15s ease;
 
     &:hover {
-      background-color: var(--u-nav-hover-bg);
+      background-color: fn.use-var(bg-color, hover);
     }
   }
 
@@ -1148,7 +1300,7 @@ $root-name: ai-chat;
       color 0.15s ease;
 
     &:hover {
-      background-color: var(--u-nav-hover-bg);
+      background-color: fn.use-var(bg-color, hover);
     }
 
     @include m.is(active) {

package/src/components/ai-chat/tool-call.vue

@@ -33,33 +33,26 @@
         查看面板
       </UButton>
     </div>
-    <!-- 自定义渲染：工具定义的 render 优先于 tool-<name> 插槽，均替换整个 body -->
+    <!-- 自定义渲染：meta.render / tool-<name> 插槽优先于通用工具视图 -->
     <component :is="tool.render" v-else-if="tool?.render" :tool-call="toolCall" />
     <component :is="slotBody" v-else-if="slotBody && hasResult" />
     <template v-else>
-      <template v-if="prettyArguments">
-        <div :class="cls.e('tool-call-section')">参数</div>
-        <pre :class="cls.e('tool-call-code')">{{ prettyArguments }}</pre>
-      </template>
-
-      <template v-if="hasResult">
-        <div :class="cls.e('tool-call-section')">
-          {{ toolCall.status === 'error' ? '错误' : '结果' }}
-        </div>
-        <pre :class="cls.e('tool-call-code')">{{ displayResult }}</pre>
-      </template>
+      <ToolJson v-if="prettyArguments" title="参数" :text="prettyArguments" />
+      <ToolJson v-if="hasResult" :title="resultTitle" :text="displayResult" />
+      <ToolJson v-if="prettyView" title="视图" :text="prettyView" />
     </template>
   </UCollapseItem>
 </template>
 
 <script lang="ts" setup>
 import { UButton, UCollapseItem, UIcon } from '@veltra/desktop'
-import { CircleCheckFilled, CircleClose, Close, Loading, WarningFilled } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
-import { computed, inject, ref, watch, type Component } from 'vue'
+import { computed, inject, ref, watch } from 'vue'
 
 import type { ChatToolCall } from '../../chat/types'
 import { AiChatDIKey } from './di'
+import { resolveToolIcon } from './tool-icons'
+import ToolJson from './tool-json.vue'
 
 defineOptions({ name: 'UAiChatToolCall' })
 
@@ -70,7 +63,24 @@ const emit = defineEmits<{ (e: 'respond', approved: boolean): void }>()
 const di = inject(AiChatDIKey)
 const cls = di?.cls ?? bem('ai-chat')
 
-/** 当前调用对应的工具定义（解析 icon/label/render/autoCollapse/terminal） */
+/** 把未知值格式成可读 JSON，循环引用等异常时退回 String，不得 throw */
+function formatUnknown(value: unknown): string {
+  if (value == null) return ''
+  if (typeof value === 'string') {
+    try {
+      return JSON.stringify(JSON.parse(value), null, 2)
+    } catch {
+      return value
+    }
+  }
+  try {
+    return JSON.stringify(value, null, 2) ?? String(value)
+  } catch {
+    return String(value)
+  }
+}
+
+/** 当前调用对应的工具定义或渲染元信息（session 下忽略 execute / needsConfirm / terminal） */
 const tool = computed(() => di?.tools.value[props.toolCall.name])
 
 const isExpanded = ref(false)
@@ -94,7 +104,7 @@ watch(
   () => props.toolCall.status,
   (status) => {
     if (userToggled) return
-    if (status === 'running' || status === 'awaiting-confirm') {
+    if (status === 'pending' || status === 'running' || status === 'awaiting-confirm') {
       isExpanded.value = true
     } else {
       isExpanded.value = !autoCollapse.value
@@ -103,17 +113,16 @@ watch(
   { immediate: true }
 )
 
-const STATUS_META: Record<string, { icon: Component; class: string }> = {
-  pending: { icon: Loading, class: 'is-active' },
-  running: { icon: Loading, class: 'is-active' },
-  'awaiting-confirm': { icon: WarningFilled, class: 'is-warning' },
-  success: { icon: CircleCheckFilled, class: 'is-success' },
-  error: { icon: CircleClose, class: 'is-danger' },
-  rejected: { icon: Close, class: 'is-danger' }
+const STATUS_CLASS: Record<string, string> = {
+  pending: 'is-active',
+  running: 'is-active',
+  'awaiting-confirm': 'is-warning',
+  success: 'is-success',
+  error: 'is-danger',
+  rejected: 'is-danger'
 }
 
-const statusIcon = computed(() => STATUS_META[props.toolCall.status]?.icon ?? Loading)
-const statusClass = computed(() => STATUS_META[props.toolCall.status]?.class ?? '')
+const statusClass = computed(() => STATUS_CLASS[props.toolCall.status] ?? '')
 
 /** 进行中（pending/running）：工具名带扫光效果 */
 const isActive = computed(() => {
@@ -131,8 +140,10 @@ const isSettled = computed(() => {
  */
 const destroyOnCollapse = computed(() => isSettled.value && !isPanelTool.value)
 
-/** 头部图标：工具自定义图标优先，缺省用状态图标 */
-const headerIcon = computed(() => tool.value?.icon ?? statusIcon.value)
+/** 头部图标：meta.icon > 宿主覆盖 > 内置名称规则 > 兜底；状态点走 status class */
+const headerIcon = computed(
+  () => tool.value?.icon ?? resolveToolIcon(props.toolCall.name, di?.toolIcons?.value)
+)
 
 const parsedArguments = computed<Record<string, unknown> | null>(() => {
   if (!props.toolCall.arguments) return null
@@ -165,13 +176,14 @@ const hasResult = computed(() => {
   return props.toolCall.result != null || props.toolCall.error != null
 })
 
-const displayResult = computed(() => {
-  const raw = props.toolCall.error ?? props.toolCall.result ?? ''
-  try {
-    return JSON.stringify(JSON.parse(raw), null, 2)
-  } catch {
-    return raw
-  }
+const resultTitle = computed(() => (props.toolCall.status === 'error' ? '错误' : '结果'))
+
+const displayResult = computed(() => formatUnknown(props.toolCall.error ?? props.toolCall.result))
+
+/** 服务端下发的 view，格式化为 JSON；不得丢弃、不得 throw */
+const prettyView = computed(() => {
+  if (props.toolCall.view == null) return ''
+  return formatUnknown(props.toolCall.view)
 })
 
 /** 使用方通过 tool-<name> 插槽自定义该工具的展示（有结果时替换整个 body） */