Add tool call observability

2026-07-17 18:06:06 +00:00 · 2026-07-02 15:52:46 +08:00
parent b1bc05d5d3
commit c809e3d14f
19 changed files with 1351 additions and 65 deletions
@@ -9,6 +9,7 @@ import {
  Cpu,
  Hash,
  User,
+  Wrench,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { MessageContentRenderer } from './MessageContentRenderer';
@@ -36,6 +37,11 @@ function formatDuration(ms: number) {
  return `${(ms / 1000).toFixed(2)}s`;
 }

+function truncateDetail(value?: string) {
+  if (!value) return '';
+  return value.length > 1200 ? `${value.slice(0, 1200)}...` : value;
+}
+
 function roleLabel(message: MonitoringMessage | undefined) {
  const role = message?.role?.toLowerCase();
  if (role === 'assistant') return 'assistant';
@@ -147,6 +153,16 @@ export function ConversationTurnList({
  onToggleTurn,
 }: ConversationTurnListProps) {
  const { t } = useTranslation();
+  const [expandedToolCallIds, setExpandedToolCallIds] = React.useState<
+    Record<string, boolean>
+  >({});
+
+  const toggleToolCallDetails = (toolCallKey: string) => {
+    setExpandedToolCallIds((previous) => ({
+      ...previous,
+      [toolCallKey]: !previous[toolCallKey],
+    }));
+  };

  return (
    <div className="space-y-4">
@@ -268,6 +284,12 @@ export function ConversationTurnList({
                      icon={<Cpu className="h-3.5 w-3.5" />}
                      label={`${turn.llmCalls.length} LLM`}
                    />
+                    {turn.toolCalls.length > 0 && (
+                      <Metric
+                        icon={<Wrench className="h-3.5 w-3.5" />}
+                        label={`${turn.toolCalls.length} tools`}
+                      />
+                    )}
                    <Metric
                      icon={<Hash className="h-3.5 w-3.5" />}
                      label={`${turn.totalTokens.toLocaleString()} tokens`}
@@ -434,6 +456,157 @@ export function ConversationTurnList({
                    </div>
                  </section>

+                  <section>
+                    <h4 className="mb-3 flex items-center gap-2 text-sm font-semibold text-foreground">
+                      <Wrench className="h-4 w-4" />
+                      {t('monitoring.toolCalls.title', {
+                        defaultValue: '工具调用',
+                      })}{' '}
+                      ({turn.toolCalls.length})
+                    </h4>
+
+                    <div className="grid grid-cols-2 gap-2 lg:grid-cols-3">
+                      <MetaItem
+                        label={t('monitoring.toolCalls.totalCalls', {
+                          defaultValue: '调用次数',
+                        })}
+                        value={String(turn.toolCalls.length)}
+                      />
+                      <MetaItem
+                        label={t('monitoring.toolCalls.duration', {
+                          defaultValue: '工具耗时',
+                        })}
+                        value={formatDuration(turn.totalToolDuration)}
+                      />
+                      <MetaItem
+                        label={t('monitoring.toolCalls.errorCalls', {
+                          defaultValue: '失败次数',
+                        })}
+                        value={String(
+                          turn.toolCalls.filter(
+                            (call) => call.status === 'error',
+                          ).length,
+                        )}
+                      />
+                    </div>
+
+                    <div className="mt-3 rounded-lg bg-background px-3 py-3">
+                      {turn.toolCalls.length > 0 ? (
+                        turn.toolCalls.map((call, index) => {
+                          const toolCallKey = `${turn.id}:${call.id}`;
+                          const hasToolDetails = Boolean(
+                            call.arguments || call.result || call.errorMessage,
+                          );
+                          const expandedToolCall = Boolean(
+                            expandedToolCallIds[toolCallKey],
+                          );
+                          const detailsId = `monitoring-tool-call-details-${call.id}`;
+
+                          return (
+                            <div
+                              key={call.id}
+                              className="border-t border-border/70 py-2 first:border-t-0 first:pt-0 last:pb-0"
+                            >
+                              <button
+                                type="button"
+                                className={cn(
+                                  'flex w-full items-start justify-between gap-3 rounded-md px-2 py-2 text-left outline-none transition-colors',
+                                  hasToolDetails &&
+                                    'cursor-pointer hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring',
+                                )}
+                                aria-expanded={
+                                  hasToolDetails ? expandedToolCall : undefined
+                                }
+                                aria-controls={
+                                  hasToolDetails ? detailsId : undefined
+                                }
+                                aria-disabled={!hasToolDetails}
+                                onClick={() =>
+                                  hasToolDetails &&
+                                  toggleToolCallDetails(toolCallKey)
+                                }
+                              >
+                                <div className="flex min-w-0 flex-wrap items-center gap-2">
+                                  {hasToolDetails &&
+                                    (expandedToolCall ? (
+                                      <ChevronDown className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+                                    ) : (
+                                      <ChevronRight className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+                                    ))}
+                                  <span className="min-w-0 truncate text-sm font-medium text-foreground">
+                                    #{index + 1} {call.toolName}
+                                  </span>
+                                  <span className="rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">
+                                    {call.toolSource}
+                                  </span>
+                                  <span
+                                    className={cn(
+                                      'rounded-md px-2 py-1 text-xs font-medium',
+                                      call.status === 'success'
+                                        ? 'bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-300'
+                                        : 'bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-300',
+                                    )}
+                                  >
+                                    {call.status}
+                                  </span>
+                                  <span className="font-mono text-xs text-muted-foreground">
+                                    ID: {shortId(call.id)}
+                                  </span>
+                                </div>
+                                <span className="shrink-0 text-xs text-muted-foreground">
+                                  {formatDuration(call.duration)}
+                                </span>
+                              </button>
+
+                              {hasToolDetails && expandedToolCall && (
+                                <div
+                                  id={detailsId}
+                                  className="mt-1 grid gap-2 px-2 pb-2 text-xs lg:grid-cols-2"
+                                >
+                                  {call.arguments && (
+                                    <div className="min-w-0 rounded-md bg-muted/50 p-2">
+                                      <div className="mb-1 font-medium text-foreground">
+                                        {t('monitoring.toolCalls.arguments', {
+                                          defaultValue: '参数',
+                                        })}
+                                      </div>
+                                      <pre className="whitespace-pre-wrap break-words font-mono text-muted-foreground">
+                                        {truncateDetail(call.arguments)}
+                                      </pre>
+                                    </div>
+                                  )}
+                                  {call.result && (
+                                    <div className="min-w-0 rounded-md bg-muted/50 p-2">
+                                      <div className="mb-1 font-medium text-foreground">
+                                        {t('monitoring.toolCalls.result', {
+                                          defaultValue: '结果',
+                                        })}
+                                      </div>
+                                      <pre className="whitespace-pre-wrap break-words font-mono text-muted-foreground">
+                                        {truncateDetail(call.result)}
+                                      </pre>
+                                    </div>
+                                  )}
+                                  {call.errorMessage && (
+                                    <div className="min-w-0 whitespace-pre-wrap break-words rounded-md bg-red-50 p-2 text-red-600 dark:bg-red-950/40 dark:text-red-400 lg:col-span-2">
+                                      {call.errorMessage}
+                                    </div>
+                                  )}
+                                </div>
+                              )}
+                            </div>
+                          );
+                        })
+                      ) : (
+                        <div className="py-4 text-center text-sm text-muted-foreground">
+                          {t('monitoring.toolCalls.noToolCalls', {
+                            defaultValue: '未记录工具调用',
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  </section>
+
                  {turn.errors.length > 0 && (
                    <section>
                      <h4 className="mb-3 flex items-center gap-2 text-sm font-semibold text-red-700 dark:text-red-300">
@@ -106,6 +106,9 @@ export function useMonitoringData(filterState: FilterState) {
      const llmCalls = Array.isArray(response?.llmCalls)
        ? response.llmCalls
        : [];
+      const toolCalls = Array.isArray(response?.toolCalls)
+        ? response.toolCalls
+        : [];
      const embeddingCalls = Array.isArray(response?.embeddingCalls)
        ? response.embeddingCalls
        : [];
@@ -116,6 +119,7 @@ export function useMonitoringData(filterState: FilterState) {
      const totalCount = response?.totalCount ?? {
        messages: messages.length,
        llmCalls: llmCalls.length,
+        toolCalls: toolCalls.length,
        embeddingCalls: embeddingCalls.length,
        sessions: sessions.length,
        errors: errors.length,
@@ -207,6 +211,41 @@ export function useMonitoringData(filterState: FilterState) {
            messageId: call.message_id,
          }),
        ),
+        toolCalls: toolCalls.map(
+          (call: {
+            id: string;
+            timestamp: string;
+            tool_name: string;
+            tool_source: string;
+            duration: number;
+            status: string;
+            bot_id: string;
+            bot_name: string;
+            pipeline_id: string;
+            pipeline_name: string;
+            session_id?: string;
+            message_id?: string;
+            arguments?: string;
+            result?: string;
+            error_message?: string;
+          }) => ({
+            id: call.id,
+            timestamp: parseUTCTimestamp(call.timestamp),
+            toolName: call.tool_name,
+            toolSource: call.tool_source,
+            duration: call.duration,
+            status: call.status as 'success' | 'error',
+            botId: call.bot_id,
+            botName: call.bot_name,
+            pipelineId: call.pipeline_id,
+            pipelineName: call.pipeline_name,
+            sessionId: call.session_id,
+            messageId: call.message_id,
+            arguments: call.arguments,
+            result: call.result,
+            errorMessage: call.error_message,
+          }),
+        ),
        embeddingCalls: embeddingCalls.map(
          (call: {
            id: string;
@@ -300,6 +339,7 @@ export function useMonitoringData(filterState: FilterState) {
        totalCount: {
          messages: totalCount.messages,
          llmCalls: totalCount.llmCalls,
+          toolCalls: totalCount.toolCalls ?? toolCalls.length,
          embeddingCalls: totalCount.embeddingCalls || 0,
          sessions: totalCount.sessions,
          errors: totalCount.errors,
@@ -104,8 +104,9 @@ function MonitoringPageContent() {
        data?.messages || [],
        data?.llmCalls || [],
        data?.errors || [],
+        data?.toolCalls || [],
      ),
-    [data?.messages, data?.llmCalls, data?.errors],
+    [data?.messages, data?.llmCalls, data?.errors, data?.toolCalls],
  );

  // State for expanded errors
@@ -38,6 +38,24 @@ export interface LLMCall {
  messageId?: string;
 }

+export interface ToolCall {
+  id: string;
+  timestamp: Date;
+  toolName: string;
+  toolSource: 'native' | 'plugin' | 'mcp' | 'skill' | string;
+  duration: number;
+  status: 'success' | 'error';
+  botId: string;
+  botName: string;
+  pipelineId: string;
+  pipelineName: string;
+  sessionId?: string;
+  messageId?: string;
+  arguments?: string;
+  result?: string;
+  errorMessage?: string;
+}
+
 export interface EmbeddingCall {
  id: string;
  timestamp: Date;
@@ -202,6 +220,7 @@ export interface MonitoringData {
  overview: OverviewMetrics;
  messages: MonitoringMessage[];
  llmCalls: LLMCall[];
+  toolCalls: ToolCall[];
  embeddingCalls: EmbeddingCall[];
  modelCalls: ModelCall[];
  sessions: SessionInfo[];
@@ -211,6 +230,7 @@ export interface MonitoringData {
  totalCount: {
    messages: number;
    llmCalls: number;
+    toolCalls?: number;
    embeddingCalls: number;
    sessions: number;
    errors: number;
@@ -1,4 +1,9 @@
-import { ErrorLog, LLMCall, MonitoringMessage } from '../types/monitoring';
+import {
+  ErrorLog,
+  LLMCall,
+  MonitoringMessage,
+  ToolCall,
+} from '../types/monitoring';

 type MessageRole = 'user' | 'assistant' | 'unknown';

@@ -19,6 +24,7 @@ export interface ConversationTurn {
  assistantMessages: MonitoringMessage[];
  messages: MonitoringMessage[];
  llmCalls: LLMCall[];
+  toolCalls: ToolCall[];
  errors: ErrorLog[];
  status: 'success' | 'error' | 'pending';
  level: 'info' | 'warning' | 'error' | 'debug';
@@ -26,6 +32,7 @@ export interface ConversationTurn {
  outputTokens: number;
  totalTokens: number;
  totalDuration: number;
+  totalToolDuration: number;
 }

 function normalizeRole(
@@ -91,6 +98,7 @@ function createTurn(message: MonitoringMessage): ConversationTurn {
    assistantMessages: [],
    messages: [],
    llmCalls: [],
+    toolCalls: [],
    errors: [],
    status: message.status,
    level: message.level,
@@ -98,6 +106,7 @@ function createTurn(message: MonitoringMessage): ConversationTurn {
    outputTokens: 0,
    totalTokens: 0,
    totalDuration: 0,
+    totalToolDuration: 0,
  };
 }

@@ -174,12 +183,16 @@ export function buildConversationTurns(
  messages: MonitoringMessage[],
  llmCalls: LLMCall[],
  errors: ErrorLog[],
+  toolCalls: ToolCall[] = [],
 ): ConversationTurn[] {
-  const llmMessageIds = new Set(
-    llmCalls
+  const activityMessageIds = new Set([
+    ...llmCalls
      .map((call) => call.messageId)
      .filter((messageId): messageId is string => Boolean(messageId)),
-  );
+    ...toolCalls
+      .map((call) => call.messageId)
+      .filter((messageId): messageId is string => Boolean(messageId)),
+  ]);
  const visibleMessages = messages
    .filter((message) => hasRenderableMessageContent(message.messageContent))
    .sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
@@ -189,7 +202,7 @@ export function buildConversationTurns(
  const messageIdToTurn = new Map<string, ConversationTurn>();

  for (const message of visibleMessages) {
-    const role = normalizeRole(message, llmMessageIds);
+    const role = normalizeRole(message, activityMessageIds);
    const previousTurn = lastTurnBySession.get(message.sessionId);
    const shouldStartTurn = role === 'user' || !previousTurn;
    const turn = shouldStartTurn ? createTurn(message) : previousTurn;
@@ -229,6 +242,25 @@ export function buildConversationTurns(
    }
  }

+  for (const call of toolCalls) {
+    const turn =
+      (call.messageId ? messageIdToTurn.get(call.messageId) : undefined) ??
+      findTurnBySessionTime(sessionTurns, call.sessionId, call.timestamp);
+
+    if (!turn) {
+      continue;
+    }
+
+    turn.toolCalls.push(call);
+    turn.totalToolDuration += call.duration;
+    updateTurnActivity(turn, call.timestamp);
+
+    if (call.status === 'error') {
+      turn.status = 'error';
+      turn.level = 'error';
+    }
+  }
+
  for (const error of errors) {
    const turn =
      (error.messageId ? messageIdToTurn.get(error.messageId) : undefined) ??
@@ -250,6 +282,9 @@ export function buildConversationTurns(
      (a, b) => a.timestamp.getTime() - b.timestamp.getTime(),
    );
    turn.llmCalls.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
+    turn.toolCalls.sort(
+      (a, b) => a.timestamp.getTime() - b.timestamp.getTime(),
+    );
    turn.errors.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
  }