@tonyclaw/agent-inspector 2.0.1 → 2.0.3

package/src/components/proxy-viewer/AgentTraceSummary.tsx

@@ -0,0 +1,218 @@
+import { useCallback, useMemo, useState, type JSX } from "react";
+import { AlertTriangle, Brain, Clock, Loader2, MessageSquare, Wrench, Zap } from "lucide-react";
+import { z } from "zod";
+import { formatTokens } from "../../lib/utils";
+import { parseJsonResponse, readApiError } from "../../lib/apiClient";
+import { KnowledgeCandidateSchema, type KnowledgeCandidate } from "../../knowledge/types";
+import type { CapturedLog } from "../../proxy/schemas";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import { buildTraceSummary } from "./viewerState";
+
+const CandidateResponseSchema = z.object({
+  candidates: z.array(KnowledgeCandidateSchema),
+});
+
+type CandidateLoadState =
+  | { status: "idle"; error: null }
+  | { status: "loading"; error: null }
+  | { status: "ready"; error: null }
+  | { status: "failed"; error: string };
+
+type AgentTraceSummaryProps = {
+  logs: CapturedLog[];
+  scopeId: string;
+  slowResponseThresholdSeconds: number;
+};
+
+function formatElapsed(ms: number | null): string {
+  if (ms === null) return "-";
+  if (ms < 1000) return `${String(ms)}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function formatTimeRange(startedAt: string | null, endedAt: string | null): string | null {
+  if (startedAt === null || endedAt === null) return null;
+  const format = (iso: string): string =>
+    new Date(iso).toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    });
+  return `${format(startedAt)} - ${format(endedAt)}`;
+}
+
+function scrollToLog(logId: number): void {
+  const target = document.getElementById(`log-${String(logId)}`);
+  if (!(target instanceof HTMLElement)) return;
+  target.scrollIntoView({ block: "center", behavior: "smooth" });
+  target.focus({ preventScroll: true });
+  if (target.getAttribute("data-nav-action") === "expand") {
+    target.click();
+  }
+}
+
+function CandidateList({ candidates }: { candidates: KnowledgeCandidate[] }): JSX.Element | null {
+  if (candidates.length === 0) return null;
+  return (
+    <div className="mt-2 grid gap-1.5">
+      {candidates.map((candidate) => (
+        <div
+          key={candidate.id}
+          className="rounded-md border border-border/80 bg-background/60 px-2.5 py-2"
+        >
+          <div className="flex min-w-0 items-center gap-2">
+            <Badge variant="outline" className="h-5 px-1.5 text-[10px] font-mono">
+              {candidate.type}
+            </Badge>
+            <span className="min-w-0 flex-1 truncate text-xs font-medium" title={candidate.title}>
+              {candidate.title}
+            </span>
+            <span className="shrink-0 font-mono text-[10px] text-muted-foreground">
+              {candidate.status}
+            </span>
+          </div>
+          <div className="mt-1 flex flex-wrap items-center gap-1.5">
+            {candidate.logIds.map((logId) => (
+              <button
+                key={logId}
+                type="button"
+                onClick={() => scrollToLog(logId)}
+                className="rounded border border-border px-1.5 py-0.5 font-mono text-[10px] text-blue-400 transition-colors hover:bg-muted hover:text-blue-300"
+              >
+                #{logId}
+              </button>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function AgentTraceSummary({
+  logs,
+  scopeId,
+  slowResponseThresholdSeconds,
+}: AgentTraceSummaryProps): JSX.Element | null {
+  const [candidates, setCandidates] = useState<KnowledgeCandidate[]>([]);
+  const [candidateState, setCandidateState] = useState<CandidateLoadState>({
+    status: "idle",
+    error: null,
+  });
+  const summary = useMemo(
+    () => buildTraceSummary(logs, slowResponseThresholdSeconds, candidates.length),
+    [candidates.length, logs, slowResponseThresholdSeconds],
+  );
+  const timeRange = useMemo(
+    () => formatTimeRange(summary.startedAt, summary.endedAt),
+    [summary.endedAt, summary.startedAt],
+  );
+
+  const createCandidates = useCallback(() => {
+    if (logs.length === 0 || candidateState.status === "loading") return;
+    setCandidateState({ status: "loading", error: null });
+    void (async () => {
+      try {
+        const response = await fetch(
+          `/api/knowledge/sessions/${encodeURIComponent(scopeId)}/candidates`,
+          { method: "POST" },
+        );
+        if (!response.ok) {
+          const message = await readApiError(
+            response,
+            `Candidate generation failed with ${String(response.status)}`,
+          );
+          setCandidateState({ status: "failed", error: message });
+          return;
+        }
+        const parsed = await parseJsonResponse(response, CandidateResponseSchema);
+        setCandidates(parsed.candidates);
+        setCandidateState({ status: "ready", error: null });
+      } catch (error) {
+        setCandidateState({
+          status: "failed",
+          error: error instanceof Error ? error.message : "Candidate response was invalid",
+        });
+      }
+    })();
+  }, [candidateState.status, logs.length, scopeId]);
+
+  if (logs.length === 0) return null;
+
+  return (
+    <section className="mb-2 rounded-lg border border-border bg-muted/10 px-3 py-2">
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-2 text-xs">
+        <span className="inline-flex items-center gap-1.5 font-semibold text-foreground">
+          <MessageSquare className="size-3.5 text-blue-400" />
+          {summary.llmCallCount} LLM
+        </span>
+        <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+          <Wrench className="size-3.5 text-amber-400" />
+          {summary.toolCallCount} tools
+        </span>
+        <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+          <Zap className="size-3.5 text-emerald-400" />
+          <span className="font-mono">
+            {formatTokens(summary.totalInputTokens)} / {formatTokens(summary.totalOutputTokens)}
+          </span>
+        </span>
+        {(summary.totalCacheCreationInputTokens > 0 || summary.totalCacheReadInputTokens > 0) && (
+          <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+            <Zap className="size-3.5 text-purple-400" />
+            <span className="font-mono">
+              +{formatTokens(summary.totalCacheCreationInputTokens)} / ~
+              {formatTokens(summary.totalCacheReadInputTokens)}
+            </span>
+          </span>
+        )}
+        <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+          <Clock className="size-3.5" />
+          <span className="font-mono">{formatElapsed(summary.totalElapsedMs)}</span>
+          {summary.maxElapsedMs !== null && (
+            <span className="font-mono text-muted-foreground/70">
+              max {formatElapsed(summary.maxElapsedMs)}
+            </span>
+          )}
+        </span>
+        {timeRange !== null && (
+          <span className="font-mono text-muted-foreground/70">{timeRange}</span>
+        )}
+        {(summary.failedCallCount > 0 ||
+          summary.pendingCallCount > 0 ||
+          summary.slowCallCount > 0) && (
+          <span className="inline-flex items-center gap-1.5 text-amber-400">
+            <AlertTriangle className="size-3.5" />
+            <span className="font-mono">
+              {summary.failedCallCount} fail / {summary.pendingCallCount} pending /{" "}
+              {summary.slowCallCount} slow
+            </span>
+          </span>
+        )}
+        <span className="flex-1" />
+        <Badge variant="outline" className="h-6 px-2 text-[10px] font-mono">
+          {summary.knowledgeCandidateCount} memory
+        </Badge>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="h-7 gap-1.5 px-2 text-xs"
+          onClick={createCandidates}
+          disabled={candidateState.status === "loading"}
+        >
+          {candidateState.status === "loading" ? (
+            <Loader2 className="size-3.5 animate-spin" />
+          ) : (
+            <Brain className="size-3.5" />
+          )}
+          Candidate
+        </Button>
+      </div>
+      {candidateState.status === "failed" && (
+        <p className="mt-2 text-xs text-destructive">{candidateState.error}</p>
+      )}
+      <CandidateList candidates={candidates} />
+    </section>
+  );
+}

package/src/components/proxy-viewer/ConversationGroup.tsx

@@ -8,6 +8,7 @@ import {
   type ConversationGroupData,
 } from "./ConversationHeader";
 import { TurnGroup } from "./TurnGroup";
+import { AgentTraceSummary } from "./AgentTraceSummary";
 import type { CacheTrendEntry } from "./cacheTrend";
 import { buildTurnGroups, shouldRenderConversationContent } from "./viewerState";
 
@@ -87,6 +88,11 @@ export const ConversationGroup = memo(function ({
 
       {shouldRenderConversationContent(standalone, expanded) && (
         <div>
+          <AgentTraceSummary
+            logs={group.logs}
+            scopeId={group.conversationId}
+            slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+          />
           {turnGroups.map((tg) => (
             <TurnGroup
               key={tg.turnIndex}

package/src/components/proxy-viewer/ToolTraceEvents.tsx

@@ -0,0 +1,33 @@
+import { type JSX } from "react";
+import { ChevronRight, Wrench } from "lucide-react";
+import type { ToolTraceEvent } from "./viewerState";
+
+type ToolTraceEventsProps = {
+  events: ToolTraceEvent[];
+};
+
+export function ToolTraceEvents({ events }: ToolTraceEventsProps): JSX.Element | null {
+  if (events.length === 0) return null;
+  return (
+    <div className="mx-3 mb-2 grid gap-1.5">
+      {events.map((event) => (
+        <div
+          key={event.id}
+          className="flex min-w-0 items-center gap-2 rounded-md border border-amber-500/20 bg-amber-500/5 px-2.5 py-1.5 text-xs"
+        >
+          <Wrench className="size-3.5 shrink-0 text-amber-400" />
+          <span className="font-mono font-semibold text-amber-300">{event.name}</span>
+          <span className="font-mono text-muted-foreground">#{event.logId}</span>
+          {event.argumentsPreview !== null && (
+            <>
+              <ChevronRight className="size-3 shrink-0 text-muted-foreground/60" />
+              <span className="min-w-0 truncate font-mono text-muted-foreground">
+                {event.argumentsPreview}
+              </span>
+            </>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/proxy-viewer/TurnGroup.tsx

@@ -9,7 +9,8 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/
 import type { CacheTrendEntry } from "./cacheTrend";
 import { LogEntry } from "./LogEntry";
 import { ThreadConnector } from "./ThreadConnector";
-import { isTurnCollapsible, type TurnEntry } from "./viewerState";
+import { ToolTraceEvents } from "./ToolTraceEvents";
+import { extractToolTraceEvents, isTurnCollapsible, type TurnEntry } from "./viewerState";
 
 function formatElapsed(ms: number): string {
   if (ms < 1000) return `${ms}ms`;
@@ -106,6 +107,14 @@ export const TurnGroup = memo(function TurnGroup({
     aggregate.maxElapsed !== null &&
     slowResponseThresholdSeconds > 0 &&
     aggregate.maxElapsed > slowResponseThresholdSeconds * 1000;
+  const toolEventsByLogId = useMemo(() => {
+    const events = new Map<number, ReturnType<typeof extractToolTraceEvents>>();
+    for (const entry of entries) {
+      const extracted = extractToolTraceEvents(entry.log);
+      if (extracted.length > 0) events.set(entry.log.id, extracted);
+    }
+    return events;
+  }, [entries]);
 
   // ResizeObserver → re-render connectors when any LogEntry height changes
   const [layoutVersion, setLayoutVersion] = useState(0);
@@ -327,6 +336,7 @@ export const TurnGroup = memo(function TurnGroup({
                     comparisonPredecessors.has(log.id) ? onCompareWithPrevious : undefined
                   }
                 />
+                <ToolTraceEvents events={toolEventsByLogId.get(log.id) ?? []} />
               </div>
             </div>
           );

package/src/components/proxy-viewer/viewerState.ts

@@ -1,4 +1,5 @@
 import { extractStopReason, isTurnBoundary, type StopReason } from "../../lib/stopReason";
+import { safeGetOwnProperty } from "../../lib/objectUtils";
 import type { CapturedLog } from "../../proxy/schemas";
 import { resolveLogFormat } from "./log-formats";
 
@@ -16,6 +17,34 @@ type ConversationLike = {
   logs: CapturedLog[];
 };
 
+export type TraceSummary = {
+  llmCallCount: number;
+  toolCallCount: number;
+  failedCallCount: number;
+  pendingCallCount: number;
+  slowCallCount: number;
+  totalInputTokens: number;
+  totalOutputTokens: number;
+  totalCacheCreationInputTokens: number;
+  totalCacheReadInputTokens: number;
+  totalElapsedMs: number;
+  maxElapsedMs: number | null;
+  startedAt: string | null;
+  endedAt: string | null;
+  knowledgeCandidateCount: number;
+};
+
+export type ToolTraceEvent = {
+  id: string;
+  logId: number;
+  index: number;
+  provider: "anthropic" | "openai";
+  name: string;
+  argumentsPreview: string | null;
+};
+
+const PREVIEW_LIMIT = 180;
+
 export function shouldRenderConversationContent(standalone: boolean, expanded: boolean): boolean {
   return standalone || expanded;
 }
@@ -64,3 +93,151 @@ export function buildValidPredecessors(groups: ConversationLike[]): Map<number,
 
   return predecessors;
 }
+
+function parseJsonResponse(responseText: string | null): unknown {
+  if (responseText === null) return null;
+  try {
+    const parsed: unknown = JSON.parse(responseText);
+    if (typeof parsed === "string") {
+      return JSON.parse(parsed);
+    }
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
+function previewValue(value: unknown): string | null {
+  if (value === undefined || value === null) return null;
+  const raw = typeof value === "string" ? value : JSON.stringify(value);
+  if (raw === undefined) return null;
+  const normalized = raw.replace(/\s+/g, " ").trim();
+  if (normalized.length === 0) return null;
+  return normalized.length > PREVIEW_LIMIT
+    ? `${normalized.slice(0, PREVIEW_LIMIT - 1)}...`
+    : normalized;
+}
+
+function extractAnthropicToolTraceEvents(log: CapturedLog): ToolTraceEvent[] {
+  const parsed = parseJsonResponse(log.responseText);
+  const content = safeGetOwnProperty(parsed, "content");
+  if (!Array.isArray(content)) return [];
+
+  const events: ToolTraceEvent[] = [];
+  for (const block of content) {
+    const type = safeGetOwnProperty(block, "type");
+    if (type !== "tool_use") continue;
+    const name = safeGetOwnProperty(block, "name");
+    if (typeof name !== "string" || name.length === 0) continue;
+    events.push({
+      id: `${String(log.id)}-anthropic-tool-${String(events.length)}`,
+      logId: log.id,
+      index: events.length,
+      provider: "anthropic",
+      name,
+      argumentsPreview: previewValue(safeGetOwnProperty(block, "input")),
+    });
+  }
+  return events;
+}
+
+function extractOpenAIToolTraceEvents(log: CapturedLog): ToolTraceEvent[] {
+  const parsed = parseJsonResponse(log.responseText);
+  const choices = safeGetOwnProperty(parsed, "choices");
+  if (!Array.isArray(choices)) return [];
+
+  const events: ToolTraceEvent[] = [];
+  for (const choice of choices) {
+    const message = safeGetOwnProperty(choice, "message");
+    const toolCalls = safeGetOwnProperty(message, "tool_calls");
+    if (!Array.isArray(toolCalls)) continue;
+    for (const call of toolCalls) {
+      const fn = safeGetOwnProperty(call, "function");
+      const name = safeGetOwnProperty(fn, "name");
+      if (typeof name !== "string" || name.length === 0) continue;
+      events.push({
+        id: `${String(log.id)}-openai-tool-${String(events.length)}`,
+        logId: log.id,
+        index: events.length,
+        provider: "openai",
+        name,
+        argumentsPreview: previewValue(safeGetOwnProperty(fn, "arguments")),
+      });
+    }
+  }
+  return events;
+}
+
+export function extractToolTraceEvents(log: CapturedLog): ToolTraceEvent[] {
+  const format = resolveLogFormat(log);
+  switch (format) {
+    case "anthropic":
+      return extractAnthropicToolTraceEvents(log);
+    case "openai":
+      return extractOpenAIToolTraceEvents(log);
+    case "unknown":
+      return [];
+  }
+}
+
+export function buildTraceSummary(
+  logs: CapturedLog[],
+  slowResponseThresholdSeconds: number,
+  knowledgeCandidateCount = 0,
+): TraceSummary {
+  let failedCallCount = 0;
+  let pendingCallCount = 0;
+  let slowCallCount = 0;
+  let totalInputTokens = 0;
+  let totalOutputTokens = 0;
+  let totalCacheCreationInputTokens = 0;
+  let totalCacheReadInputTokens = 0;
+  let totalElapsedMs = 0;
+  let maxElapsedMs: number | null = null;
+  let toolCallCount = 0;
+
+  for (const log of logs) {
+    if (log.responseStatus === null) {
+      pendingCallCount += 1;
+    } else if (log.responseStatus >= 400) {
+      failedCallCount += 1;
+    }
+    if (
+      log.elapsedMs !== null &&
+      slowResponseThresholdSeconds > 0 &&
+      log.elapsedMs > slowResponseThresholdSeconds * 1000
+    ) {
+      slowCallCount += 1;
+    }
+    if (log.inputTokens !== null) totalInputTokens += log.inputTokens;
+    if (log.outputTokens !== null) totalOutputTokens += log.outputTokens;
+    if (log.cacheCreationInputTokens !== null) {
+      totalCacheCreationInputTokens += log.cacheCreationInputTokens;
+    }
+    if (log.cacheReadInputTokens !== null) {
+      totalCacheReadInputTokens += log.cacheReadInputTokens;
+    }
+    if (log.elapsedMs !== null) {
+      totalElapsedMs += log.elapsedMs;
+      maxElapsedMs = maxElapsedMs === null ? log.elapsedMs : Math.max(maxElapsedMs, log.elapsedMs);
+    }
+    toolCallCount += extractToolTraceEvents(log).length;
+  }
+
+  return {
+    llmCallCount: logs.length,
+    toolCallCount,
+    failedCallCount,
+    pendingCallCount,
+    slowCallCount,
+    totalInputTokens,
+    totalOutputTokens,
+    totalCacheCreationInputTokens,
+    totalCacheReadInputTokens,
+    totalElapsedMs,
+    maxElapsedMs,
+    startedAt: logs[0]?.timestamp ?? null,
+    endedAt: logs[logs.length - 1]?.timestamp ?? null,
+    knowledgeCandidateCount,
+  };
+}

package/src/knowledge/openclawClient.ts

@@ -1,6 +1,8 @@
 import { z } from "zod";
 import type { KnowledgeCandidate, KnowledgeSearchResponse, OpenClawMemoryPayload } from "./types";
 import { KnowledgeSearchResponseSchema, KnowledgeSearchResultSchema } from "./types";
+import { isOpenClawGatewayConfigured, searchOpenClawGateway } from "./openclawGatewayClient";
+import { isOpenClawFileBridgeConfigured, writeCandidateToOpenClawMemory } from "./openclawMarkdown";
 import { redactCandidate } from "./redactor";
 
 const OpenClawWriteResponseSchema = z.object({
@@ -18,12 +20,16 @@ export type PromoteResult =
       error: string;
     };
 
-function getEndpoint(): string | null {
+function getLegacyEndpoint(): string | null {
   const endpoint = process.env["OPENCLAW_MEMORY_URL"] ?? process.env["OPENCLAW_API_URL"];
   if (endpoint === undefined || endpoint.trim() === "") return null;
   return endpoint.trim();
 }
 
+function isLegacyBackendConfigured(): boolean {
+  return getLegacyEndpoint() !== null;
+}
+
 function buildMemoryUrl(endpoint: string): string {
   return endpoint.endsWith("/memories") ? endpoint : `${endpoint.replace(/\/$/, "")}/memories`;
 }
@@ -61,11 +67,21 @@ export function buildOpenClawPayload(candidate: KnowledgeCandidate): OpenClawMem
 }
 
 export async function promoteToOpenClaw(candidate: KnowledgeCandidate): Promise<PromoteResult> {
-  const endpoint = getEndpoint();
+  if (isOpenClawFileBridgeConfigured()) {
+    const result = await writeCandidateToOpenClawMemory(candidate);
+    if (result.success) {
+      return { success: true, memoryId: result.memoryId };
+    }
+    return { success: false, error: result.error };
+  }
+
+  const endpoint = getLegacyEndpoint();
   if (endpoint === null) {
     return {
       success: false,
-      error: "OpenClaw memory backend is not configured. Set OPENCLAW_MEMORY_URL.",
+      error:
+        "OpenClaw memory backend is not configured. Set OPENCLAW_WORKSPACE_DIR " +
+        "for file-backed memory or OPENCLAW_MEMORY_URL for a legacy HTTP backend.",
     };
   }
 
@@ -91,11 +107,20 @@ export async function searchOpenClaw(
   query: string,
   project?: string,
 ): Promise<KnowledgeSearchResponse> {
-  const endpoint = getEndpoint();
+  if (isOpenClawGatewayConfigured()) {
+    return await searchOpenClawGateway(query, project);
+  }
+
+  const endpoint = getLegacyEndpoint();
   if (endpoint === null) {
+    const workspaceHint = isOpenClawFileBridgeConfigured()
+      ? " OPENCLAW_WORKSPACE_DIR is configured for writes, but search requires OPENCLAW_GATEWAY_URL."
+      : "";
     return {
       results: [],
-      warning: "OpenClaw memory backend is not configured. Set OPENCLAW_MEMORY_URL.",
+      warning:
+        "OpenClaw search backend is not configured. Set OPENCLAW_GATEWAY_URL " +
+        `or OPENCLAW_MEMORY_URL.${workspaceHint}`,
     };
   }
 
@@ -116,3 +141,7 @@ export async function searchOpenClaw(
   }
   return { results: [], warning: "OpenClaw search returned an unparseable response." };
 }
+
+export function isOpenClawPromotionConfigured(): boolean {
+  return isOpenClawFileBridgeConfigured() || isLegacyBackendConfigured();
+}