@tbox.cn/app-template-agent 0.7.4 → 0.8.0

package/packages/agent-ui-kit/src/components/ToolCallBlock/detail.ts

@@ -0,0 +1,204 @@
+/**
+ * 工具调用展示视图模型：聚合摘要 / 流内活动行 / 行内详情。
+ * 语义来源链：SDK describeToolCall 判定四分支 → 契约 parse 取原始字段 → 此处组装视图模型；
+ * 模板唯一需要理解 display.kind 的地方（SDK 新增伪工具 kind 经 assertNever 编译期暴露到此单文件）。
+ * debug 门控在渲染层（组件 debug prop）——视图模型保持纯数据投影，不感知环境。
+ */
+import { describeToolCall } from '../../utils/tool-call-display';
+import type { ToolCallInfo } from '@tbox.cn/app-sdk/client';
+import {
+  MEMORY_TOOL_CALL_NAME,
+  parseMemoryToolCallArgs,
+  parsePreToolToolCallArgs,
+  parseSkillToolCallArgs,
+} from '@tbox.cn/app-contracts';
+import { resolveToolTitle } from './titles';
+
+export type ToolCallBadge = '前置工具' | '前置技能' | '记忆召回';
+
+export type ToolCallItemStatus = 'calling' | 'done' | 'error';
+
+export interface ToolCallDetail {
+  /** 紧凑原始文本；详情展开时经 prettyDetailText 归一（幂等） */
+  inputText: string;
+  outputText: string;
+  isError: boolean;
+}
+
+export interface ToolCallViewItem {
+  id: string;
+  kind: 'skill' | 'preTool' | 'normal' | 'memory';
+  /** 用户可见中文标题；协议中的技术 name 不在此字段透出 */
+  label: string;
+  status: ToolCallItemStatus;
+  /** normal 恒无 */
+  badge?: ToolCallBadge;
+  /** 协议技术名/底层工具标识（018 dev 视图展示用；prod 渲染层不消费） */
+  techName?: string;
+  /** undefined ⇒ 无详情入口（calling 恒无）；prod 渲染层门控不展示 */
+  detail?: ToolCallDetail;
+}
+
+export interface ToolCallSummary {
+  /** skill 条目总数（含进行中） */
+  skillCount: number;
+  /** preTool + normal 条目总数 */
+  toolCount: number;
+  /** 当前摘要包含的全部活动数 */
+  totalCount: number;
+  /** 当前仍在执行的活动数 */
+  callingCount: number;
+  /** 最近开始且仍在执行的任务标题；技术 name 已在视图层中文化 */
+  activeTitle?: string;
+  /** 任一执行中 → 摘要行 spinner */
+  calling: boolean;
+  failedCount: number;
+}
+
+const SKILL_LOADED_TEXT = '已加载';
+
+/** 单条 tool-call → 视图条目（kind 判定唯一来源 SDK describeToolCall） */
+export function deriveToolCallItem(tc: ToolCallInfo): ToolCallViewItem {
+  const display = describeToolCall(tc);
+  switch (display.kind) {
+    case 'skill': {
+      const args = parseSkillToolCallArgs(tc.args);
+      return {
+        id: tc.id,
+        kind: 'skill',
+        label: resolveToolTitle(display.label || tc.name, args?.description, '加载技能'),
+        status: tc.status,
+        badge: '前置技能',
+        // dev 视图技术标识：skill 的可排障身份是 skillName（args 解析失败回退伪工具名）
+        techName: args?.skillName ?? tc.name,
+        ...(tc.status !== 'calling' && args?.description
+          ? {
+              detail: {
+                inputText: args.description,
+                outputText: tc.error ?? SKILL_LOADED_TEXT,
+                isError: tc.status === 'error',
+              },
+            }
+          : {}),
+      };
+    }
+    case 'preTool': {
+      const args = parsePreToolToolCallArgs(tc.args);
+      const isError = display.status === 'error';
+      return {
+        id: tc.id,
+        kind: 'preTool',
+        label: resolveToolTitle(args?.toolName ?? tc.name, display.label, '准备工具任务'),
+        status: display.status,
+        badge: '前置工具',
+        // dev 视图技术标识：被预执行的真实工具 id
+        techName: args?.toolName ?? tc.name,
+        ...(display.status !== 'calling'
+          ? {
+              detail: {
+                inputText: JSON.stringify(args?.toolArgs ?? {}),
+                outputText: isError
+                  ? (display.errorText ?? tc.error ?? '预执行失败')
+                  : (display.resultText ?? ''),
+                isError,
+              },
+            }
+          : {}),
+      };
+    }
+    case 'memory': {
+      const args = parseMemoryToolCallArgs(tc.args);
+      // status 单一来源 = display（SDK envelope 派生）——此处不重复 parse result
+      const status = display.status;
+      // degraded → error 视觉态（超时/存储异常）；miss/skipped 恒 done
+      const itemStatus: ToolCallItemStatus = status === 'degraded' ? 'error' : 'done';
+      const isError = status === 'degraded';
+      return {
+        id: tc.id,
+        kind: 'memory',
+        label: display.label,
+        status: itemStatus,
+        badge: '记忆召回',
+        techName: MEMORY_TOOL_CALL_NAME,
+        ...(display.hasDetail && display.detailText
+          ? {
+              detail: {
+                inputText: args?.query ?? '',
+                outputText: display.detailText,
+                isError,
+              },
+            }
+          : {}),
+      };
+    }
+    case 'normal': {
+      const isError = tc.status === 'error' || !!tc.error;
+      return {
+        id: tc.id,
+        kind: 'normal',
+        label: resolveToolTitle(tc.name),
+        status: tc.status,
+        techName: tc.name,
+        ...(tc.status !== 'calling' && (tc.args || tc.result || tc.error)
+          ? {
+              detail: {
+                inputText: tc.args ?? '',
+                outputText: isError ? (tc.error ?? '') : (tc.result ?? ''),
+                isError,
+              },
+            }
+          : {}),
+      };
+    }
+    default:
+      return assertNever(display);
+  }
+}
+
+/** L1 聚合：技能/工具计数 + 执行中/失败标记 */
+export function deriveSummary(items: ToolCallViewItem[]): ToolCallSummary {
+  const skillCount = items.filter((i) => i.kind === 'skill').length;
+  const callingCount = items.filter((i) => i.status === 'calling').length;
+  const activeItem = [...items].reverse().find((item) => item.status === 'calling');
+  return {
+    skillCount,
+    toolCount: items.length - skillCount,
+    totalCount: items.length,
+    callingCount,
+    ...(activeItem ? { activeTitle: activeItem.label } : {}),
+    calling: callingCount > 0,
+    failedCount: items.filter((i) => i.status === 'error').length,
+  };
+}
+
+/**
+ * 聚合行文案：执行中以最近任务标题为主、并行数量为辅；稳定态按 [技能, 工具] 报告已经发生的活动。
+ * 失败段由组件独立渲染，避免把失败混写成成功。
+ */
+export function buildSummaryText(s: ToolCallSummary): string[] {
+  if (s.callingCount > 0) {
+    const activeTitle = s.activeTitle ?? '处理当前任务';
+    const activeText = activeTitle.startsWith('正在') ? activeTitle : `正在${activeTitle}`;
+    return [s.callingCount > 1 ? `${activeText} · 另有 ${s.callingCount - 1} 项` : activeText];
+  }
+
+  const segments: string[] = [];
+  if (s.skillCount > 0) segments.push(`已加载技能 ${s.skillCount} 个`);
+  if (s.toolCount > 0) segments.push(`已调用工具 ${s.toolCount} 个`);
+  return segments.length > 0 ? segments : ['暂无工具活动'];
+}
+
+/** 详情文本归一：合法 JSON→pretty（幂等），否则原文；不截断（行内区域可滚动） */
+export function prettyDetailText(raw: string): string {
+  if (!raw) return '';
+  try {
+    return JSON.stringify(JSON.parse(raw), null, 2);
+  } catch {
+    return raw;
+  }
+}
+
+/** 穷尽守卫：SDK display 新增 kind 时编译期报错（不静默落 default） */
+function assertNever(x: never): never {
+  throw new Error(`unhandled tool call display kind: ${JSON.stringify(x)}`);
+}

package/packages/agent-ui-kit/src/components/ToolCallBlock/index.less

@@ -0,0 +1,312 @@
+// Codex 风格工具活动日志：无卡框、弱层级、流内展开。
+// web-view 约定：颜色走现有 mall token；滚动区隐藏滚动条；图标走 currentColor。
+.tool-calls {
+  display: flex;
+  flex-direction: column;
+  margin: 0 0 12px;
+}
+
+.tool-calls__summary,
+.tool-calls__item-trigger,
+.tool-calls__copy {
+  appearance: none;
+  border: 0;
+  font: inherit;
+}
+
+// 工具活动区统一沿用摘要字号，保留现有 rem 缩放比例。
+.tool-calls__summary-text,
+.tool-calls__item-name,
+.tool-calls__badge,
+.tool-calls__item-tech,
+.tool-calls__detail-label,
+.tool-calls__detail-body,
+.tool-calls__copy {
+  font-size: 24px;
+}
+
+.tool-calls__summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 88px;
+  padding: 10px 4px;
+  border-radius: 16px;
+  background: transparent;
+  color: var(--tbox-text-muted);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    color var(--tbox-transition-fast),
+    background var(--tbox-transition-fast);
+
+  &:active {
+    background: rgba(11, 15, 23, 0.035);
+  }
+
+  &:focus-visible {
+    outline: 4px solid var(--tbox-primary);
+    outline-offset: 4px;
+  }
+
+  &--calling {
+    color: var(--tbox-text-secondary);
+  }
+}
+
+.tool-calls__left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-width: 0;
+  flex: 1;
+}
+
+.tool-calls__summary-text {
+  min-width: 0;
+  overflow: hidden;
+  color: currentColor;
+  font-weight: 400;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tool-calls__failed {
+  color: var(--tbox-text-muted);
+}
+
+.tool-calls__chevron,
+.tool-calls__item-chevron {
+  color: var(--tbox-text-muted);
+  flex-shrink: 0;
+  transition: transform var(--tbox-transition-fast);
+
+  &--up {
+    transform: rotate(180deg);
+  }
+}
+
+.tool-calls__chevron {
+  margin-left: 16px;
+}
+
+.tool-calls__icon {
+  flex-shrink: 0;
+
+  &--success {
+    color: var(--tbox-text-muted);
+  }
+
+  &--error {
+    color: var(--tbox-text-muted);
+  }
+}
+
+.tool-calls__spinner {
+  width: 28px;
+  height: 28px;
+  border: 4px solid rgba(9, 107, 250, 0.2);
+  border-top-color: var(--tbox-primary);
+  border-radius: 50%;
+  flex-shrink: 0;
+  animation: tool-spin 0.8s linear infinite;
+
+  &--sm {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.tool-calls__list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: 4px;
+  padding-left: 4px;
+}
+
+.tool-calls__item {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+
+  &--calling .tool-calls__item-name {
+    color: var(--tbox-text-secondary);
+  }
+
+  &--error .tool-calls__item-name {
+    color: var(--tbox-text-muted);
+  }
+}
+
+.tool-calls__item-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 88px;
+  padding: 10px 4px;
+  border-radius: 16px;
+  background: transparent;
+  color: var(--tbox-text-secondary);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    color var(--tbox-transition-fast),
+    background var(--tbox-transition-fast);
+
+  &:active {
+    background: rgba(11, 15, 23, 0.035);
+  }
+
+  &:focus-visible {
+    outline: 4px solid var(--tbox-primary);
+    outline-offset: 4px;
+  }
+
+  &--static {
+    cursor: default;
+  }
+}
+
+.tool-calls__item-left {
+  display: flex;
+  align-items: baseline;
+  gap: 16px;
+  min-width: 0;
+
+  > .tool-calls__icon,
+  > .tool-calls__spinner {
+    align-self: center;
+  }
+}
+
+.tool-calls__item-name {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--tbox-text-secondary);
+  font-weight: 400;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tool-calls__badge,
+.tool-calls__item-tech {
+  color: var(--tbox-text-muted);
+  font-family: inherit;
+  line-height: 1.4;
+}
+
+.tool-calls__badge {
+  flex-shrink: 0;
+}
+
+// 018 dev 视图技术名后缀（debug 态渲染；prod 不出 DOM）
+.tool-calls__item-tech {
+  word-break: break-all;
+}
+
+.tool-calls__item-chevron {
+  margin-left: 16px;
+}
+
+.tool-calls__detail {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin: 2px 0 16px 40px;
+  padding: 10px 0 10px 28px;
+  border-left: 4px solid var(--tbox-border);
+}
+
+.tool-calls__detail-section {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.tool-calls__detail-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.tool-calls__detail-label {
+  color: var(--tbox-text-muted);
+  line-height: 1.4;
+}
+
+.tool-calls__detail-body {
+  max-height: 560px;
+  margin: 0;
+  padding: 20px 24px;
+  overflow: auto;
+  border-radius: 16px;
+  background: var(--tbox-bg-subtle);
+  color: var(--tbox-text-secondary);
+  font-family: Menlo, Monaco, Consolas, monospace;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-all;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &--error {
+    color: var(--tbox-text-muted);
+  }
+}
+
+.tool-calls__copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 88px;
+  padding: 6px 10px;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--tbox-text-muted);
+  line-height: 1.2;
+  flex-shrink: 0;
+  cursor: pointer;
+
+  &:active {
+    color: var(--tbox-text-secondary);
+  }
+
+  &:focus-visible {
+    outline: 4px solid var(--tbox-primary);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: default;
+  }
+}
+
+@keyframes tool-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tool-calls__summary,
+  .tool-calls__item-trigger,
+  .tool-calls__chevron,
+  .tool-calls__item-chevron {
+    transition: none;
+  }
+
+  .tool-calls__spinner {
+    animation: none;
+  }
+}