@tonyclaw/agent-inspector 3.1.32 → 4.0.2

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

@@ -1,902 +0,0 @@
-import { useCallback, useMemo, useState, type JSX } from "react";
-import {
-  AlertTriangle,
-  Brain,
-  ChevronDown,
-  ChevronRight,
-  CircleCheck,
-  Clock,
-  FileSearch,
-  Loader2,
-  MessageSquare,
-  Pencil,
-  RefreshCw,
-  Save,
-  ShieldCheck,
-  UploadCloud,
-  Wrench,
-  X,
-  XCircle,
-  Zap,
-} from "lucide-react";
-import { z } from "zod";
-import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
-import { formatTimestampRange } from "../../lib/timeDisplay";
-import { cn, formatTokens } from "../../lib/utils";
-import { fetchJsonWithTimeout, fetchWithTimeout } from "../../lib/apiClient";
-import {
-  KnowledgeCandidateSchema,
-  type KnowledgeCandidate,
-  type KnowledgeCandidateStatus,
-} from "../../knowledge/types";
-import type { CapturedLog } from "../../contracts";
-import { Badge } from "../ui/badge";
-import { Button } from "../ui/button";
-import { buildTraceSummary, extractToolTraceEvents, type TraceSummary } from "./viewerState";
-
-const CandidateResponseSchema = z.object({
-  candidates: z.array(KnowledgeCandidateSchema),
-});
-
-const CandidatePromotionResponseSchema = z.object({
-  candidate: KnowledgeCandidateSchema,
-});
-
-const CandidatePromotionFailureResponseSchema = z.object({
-  error: z.string().optional(),
-  candidate: KnowledgeCandidateSchema.optional(),
-});
-
-const CandidateUpdateResponseSchema = z.object({
-  candidate: KnowledgeCandidateSchema,
-});
-
-type CandidateDraftUpdate = {
-  type: KnowledgeCandidate["type"];
-  title: string;
-  content: string;
-  tags: string[];
-};
-
-type CandidateLoadState =
-  | { status: "idle"; error: null }
-  | { status: "loading"; error: null }
-  | { status: "ready"; error: null }
-  | { status: "failed"; error: string };
-
-const CANDIDATE_GENERATE_TIMEOUT_MS = 30_000;
-const CANDIDATE_PROMOTE_TIMEOUT_MS = 15_000;
-const CANDIDATE_UPDATE_TIMEOUT_MS = 15_000;
-
-type TraceInsightKind = "session" | "tool" | "slow" | "failure" | "candidate";
-
-type TraceInsight = {
-  kind: TraceInsightKind;
-  title: string;
-  detail: string;
-  logId: number | null;
-};
-
-const CANDIDATE_STATUS_CLASSES: Record<KnowledgeCandidateStatus, string> = {
-  draft: "border-amber-500/30 bg-amber-500/10 text-amber-500",
-  promoted: "border-emerald-500/30 bg-emerald-500/10 text-emerald-500",
-  failed: "border-destructive/30 bg-destructive/10 text-destructive",
-};
-
-type AgentTraceSummaryProps = {
-  logs: CapturedLog[];
-  scopeId: string;
-  slowResponseThresholdSeconds: number;
-  showRollupMetrics: boolean;
-  timeDisplayFormat: TimeDisplayFormat;
-};
-
-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,
-  timeDisplayFormat: TimeDisplayFormat,
-): string | null {
-  if (startedAt === null || endedAt === null) return null;
-  return formatTimestampRange(startedAt, endedAt, timeDisplayFormat);
-}
-
-function formatCandidateCount(count: number): string {
-  return `${String(count)} candidate${count === 1 ? "" : "s"}`;
-}
-
-function getLogAnchor(logId: number): string {
-  return `log-${String(logId)}`;
-}
-
-function jumpToLog(logId: number): void {
-  const anchor = getLogAnchor(logId);
-  const target = document.getElementById(anchor);
-  window.history.replaceState(null, "", `#${anchor}`);
-  if (!(target instanceof HTMLElement)) return;
-  target.scrollIntoView({ block: "center", behavior: "smooth" });
-  target.focus({ preventScroll: true });
-}
-
-function firstFailureLog(logs: CapturedLog[]): CapturedLog | null {
-  for (const log of logs) {
-    if (log.responseStatus !== null && log.responseStatus >= 400) return log;
-  }
-  return null;
-}
-
-function slowestLog(logs: CapturedLog[]): CapturedLog | null {
-  let current: CapturedLog | null = null;
-  let currentElapsed = -1;
-  for (const log of logs) {
-    if (log.elapsedMs === null) continue;
-    if (log.elapsedMs > currentElapsed) {
-      current = log;
-      currentElapsed = log.elapsedMs;
-    }
-  }
-  return current;
-}
-
-function firstToolLog(logs: CapturedLog[]): CapturedLog | null {
-  for (const log of logs) {
-    if (extractToolTraceEvents(log).length > 0) return log;
-  }
-  return null;
-}
-
-function buildDisplayNumberByLogId(logs: readonly CapturedLog[]): Map<number, number> {
-  const result = new Map<number, number>();
-  for (let index = 0; index < logs.length; index += 1) {
-    const log = logs[index];
-    if (log === undefined) continue;
-    result.set(log.id, index + 1);
-  }
-  return result;
-}
-
-function displayLogNumber(
-  logId: number,
-  displayNumberByLogId: ReadonlyMap<number, number>,
-): string {
-  return String(displayNumberByLogId.get(logId) ?? logId);
-}
-
-function buildTraceInsights(input: {
-  logs: CapturedLog[];
-  scopeId: string;
-  summary: TraceSummary;
-  candidates: KnowledgeCandidate[];
-  displayNumberByLogId: ReadonlyMap<number, number>;
-}): TraceInsight[] {
-  const insights: TraceInsight[] = [
-    {
-      kind: "session",
-      title: `${String(input.summary.llmCallCount)} LLM call${
-        input.summary.llmCallCount === 1 ? "" : "s"
-      }`,
-      detail: `Scope ${input.scopeId}`,
-      logId: input.logs[0]?.id ?? null,
-    },
-  ];
-
-  const toolLog = firstToolLog(input.logs);
-  if (input.summary.toolCallCount > 0 && toolLog !== null) {
-    insights.push({
-      kind: "tool",
-      title: `${String(input.summary.toolCallCount)} tool call${
-        input.summary.toolCallCount === 1 ? "" : "s"
-      }`,
-      detail: `First tool evidence at #${displayLogNumber(toolLog.id, input.displayNumberByLogId)}`,
-      logId: toolLog.id,
-    });
-  }
-
-  const failure = firstFailureLog(input.logs);
-  if (failure !== null) {
-    insights.push({
-      kind: "failure",
-      title: `Failure #${String(failure.responseStatus)}`,
-      detail: `First failed request is #${displayLogNumber(failure.id, input.displayNumberByLogId)}`,
-      logId: failure.id,
-    });
-  }
-
-  const slowest = slowestLog(input.logs);
-  if (slowest !== null && input.summary.maxElapsedMs !== null) {
-    insights.push({
-      kind: "slow",
-      title: `Slowest ${formatElapsed(input.summary.maxElapsedMs)}`,
-      detail: `Max latency observed at #${displayLogNumber(slowest.id, input.displayNumberByLogId)}`,
-      logId: slowest.id,
-    });
-  }
-
-  if (input.candidates.length > 0) {
-    const draftCount = input.candidates.filter((candidate) => candidate.status === "draft").length;
-    const promotedCount = input.candidates.filter(
-      (candidate) => candidate.status === "promoted",
-    ).length;
-    insights.push({
-      kind: "candidate",
-      title: `${String(input.candidates.length)} memory candidate${
-        input.candidates.length === 1 ? "" : "s"
-      }`,
-      detail: `${String(draftCount)} draft / ${String(promotedCount)} promoted`,
-      logId: input.candidates[0]?.logIds[0] ?? null,
-    });
-  }
-
-  return insights;
-}
-
-function insightIcon(kind: TraceInsightKind): JSX.Element {
-  switch (kind) {
-    case "session":
-      return <MessageSquare className="size-3.5 text-blue-400" />;
-    case "tool":
-      return <Wrench className="size-3.5 text-sky-400/70" />;
-    case "slow":
-      return <Clock className="size-3.5 text-amber-400" />;
-    case "failure":
-      return <XCircle className="size-3.5 text-destructive" />;
-    case "candidate":
-      return <Brain className="size-3.5 text-emerald-400" />;
-  }
-}
-
-function TraceInsights({ insights }: { insights: TraceInsight[] }): JSX.Element | null {
-  if (insights.length === 0) return null;
-  return (
-    <div className="mt-2 grid gap-1.5 border-t border-border/70 pt-2 md:grid-cols-2 xl:grid-cols-3">
-      {insights.map((insight) => (
-        <button
-          key={`${insight.kind}-${insight.title}`}
-          type="button"
-          className={cn(
-            "flex min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs",
-            "text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          )}
-          onClick={() => {
-            if (insight.logId !== null) jumpToLog(insight.logId);
-          }}
-          disabled={insight.logId === null}
-        >
-          {insightIcon(insight.kind)}
-          <span className="min-w-0">
-            <span className="block truncate font-medium text-foreground/90">{insight.title}</span>
-            <span className="block truncate font-mono text-[10px]">{insight.detail}</span>
-          </span>
-        </button>
-      ))}
-    </div>
-  );
-}
-
-function candidateStatusLabel(status: KnowledgeCandidateStatus): string {
-  switch (status) {
-    case "draft":
-      return "Draft";
-    case "promoted":
-      return "Promoted";
-    case "failed":
-      return "Failed";
-  }
-}
-
-function candidatePromoteLabel(candidate: KnowledgeCandidate, promoting: boolean): string {
-  if (promoting) return "Promoting";
-  switch (candidate.status) {
-    case "draft":
-      return "Promote";
-    case "failed":
-      return "Retry";
-    case "promoted":
-      return "Promoted";
-  }
-}
-
-function redactionLabel(candidate: KnowledgeCandidate): string {
-  if (!candidate.redaction.redacted) return "No sensitive pattern matched";
-  return `Redacted ${candidate.redaction.patterns.join(", ")}`;
-}
-
-function previewText(value: string, maxLength: number): string {
-  const normalized = value.replace(/\s+/g, " ").trim();
-  if (normalized.length <= maxLength) return normalized;
-  return `${normalized.slice(0, maxLength - 3)}...`;
-}
-
-function logRangeLabel(
-  logIds: number[],
-  displayNumberByLogId: ReadonlyMap<number, number>,
-): string {
-  const first = logIds[0];
-  const last = logIds[logIds.length - 1];
-  if (first === undefined) return "No evidence logs";
-  const firstLabel = displayLogNumber(first, displayNumberByLogId);
-  if (last === undefined || first === last) return `#${firstLabel}`;
-  return `#${firstLabel}-#${displayLogNumber(last, displayNumberByLogId)}`;
-}
-
-function tagsToText(tags: string[]): string {
-  return tags.join(", ");
-}
-
-function textToTags(value: string): string[] {
-  return value
-    .split(",")
-    .map((tag) => tag.trim())
-    .filter((tag) => tag.length > 0);
-}
-
-function CandidateItem({
-  candidate,
-  isPromoting,
-  isUpdating,
-  onPromoteCandidate,
-  onUpdateCandidate,
-  displayNumberByLogId,
-}: {
-  candidate: KnowledgeCandidate;
-  isPromoting: boolean;
-  isUpdating: boolean;
-  onPromoteCandidate: (candidateId: string) => void;
-  onUpdateCandidate: (candidateId: string, update: CandidateDraftUpdate) => Promise<boolean>;
-  displayNumberByLogId: ReadonlyMap<number, number>;
-}): JSX.Element {
-  const [editing, setEditing] = useState(false);
-  const [draftType, setDraftType] = useState<KnowledgeCandidate["type"]>(candidate.type);
-  const [draftTitle, setDraftTitle] = useState(candidate.title);
-  const [draftContent, setDraftContent] = useState(candidate.content);
-  const [draftTags, setDraftTags] = useState(tagsToText(candidate.tags));
-  const [localError, setLocalError] = useState<string | null>(null);
-  const canPromote = candidate.status !== "promoted";
-  const canEdit = candidate.status !== "promoted";
-
-  const resetDraft = useCallback(() => {
-    setDraftType(candidate.type);
-    setDraftTitle(candidate.title);
-    setDraftContent(candidate.content);
-    setDraftTags(tagsToText(candidate.tags));
-    setLocalError(null);
-  }, [candidate.content, candidate.tags, candidate.title, candidate.type]);
-
-  const saveDraft = useCallback(async () => {
-    const title = draftTitle.trim();
-    const content = draftContent.trim();
-    const tags = textToTags(draftTags);
-    if (title.length === 0) {
-      setLocalError("Title is required.");
-      return;
-    }
-    if (content.length === 0) {
-      setLocalError("Content is required.");
-      return;
-    }
-    if (tags.length === 0) {
-      setLocalError("At least one tag is required.");
-      return;
-    }
-    setLocalError(null);
-    const saved = await onUpdateCandidate(candidate.id, {
-      type: draftType,
-      title,
-      content,
-      tags,
-    });
-    if (saved) setEditing(false);
-  }, [candidate.id, draftContent, draftTags, draftTitle, draftType, onUpdateCandidate]);
-
-  if (editing) {
-    return (
-      <div className="border border-border bg-card shadow-sm rounded-[8px] px-2.5 py-2">
-        <div className="grid gap-2">
-          <div className="flex flex-wrap items-center gap-2">
-            <select
-              value={draftType}
-              disabled={isUpdating}
-              onChange={(event) => {
-                const parsed = KnowledgeCandidateSchema.shape.type.safeParse(
-                  event.currentTarget.value,
-                );
-                if (parsed.success) setDraftType(parsed.data);
-              }}
-              className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 rounded-md px-2 text-xs"
-              aria-label="Candidate type"
-            >
-              <option value="episode">episode</option>
-              <option value="procedure">procedure</option>
-              <option value="preference">preference</option>
-              <option value="project-fact">project-fact</option>
-            </select>
-            <input
-              value={draftTitle}
-              disabled={isUpdating}
-              onChange={(event) => setDraftTitle(event.currentTarget.value)}
-              className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 min-w-[220px] flex-1 rounded-md px-2 text-xs"
-              aria-label="Candidate title"
-            />
-          </div>
-          <textarea
-            value={draftContent}
-            disabled={isUpdating}
-            onChange={(event) => setDraftContent(event.currentTarget.value)}
-            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground min-h-28 rounded-md px-2 py-1.5 font-mono text-[11px] leading-relaxed"
-            aria-label="Candidate content"
-          />
-          <input
-            value={draftTags}
-            disabled={isUpdating}
-            onChange={(event) => setDraftTags(event.currentTarget.value)}
-            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 rounded-md px-2 text-xs"
-            aria-label="Candidate tags"
-          />
-          <div className="flex flex-wrap items-center gap-2">
-            <span className="inline-flex items-center gap-1 text-[10px] text-muted-foreground">
-              <ShieldCheck className="size-3" />
-              Saving reruns Inspector redaction before promotion.
-            </span>
-            <span className="flex-1" />
-            {localError !== null && (
-              <span className="text-[10px] text-destructive">{localError}</span>
-            )}
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="h-7 gap-1.5 px-2 text-xs"
-              disabled={isUpdating}
-              onClick={() => {
-                resetDraft();
-                setEditing(false);
-              }}
-            >
-              <X className="size-3.5" />
-              Cancel
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="h-7 gap-1.5 px-2 text-xs"
-              disabled={isUpdating}
-              onClick={() => {
-                void saveDraft();
-              }}
-            >
-              {isUpdating ? (
-                <RefreshCw className="size-3.5 animate-spin" />
-              ) : (
-                <Save className="size-3.5" />
-              )}
-              Save
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div 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>
-        <Badge
-          variant="outline"
-          className={cn(
-            "h-5 shrink-0 px-1.5 text-[10px] font-mono",
-            CANDIDATE_STATUS_CLASSES[candidate.status],
-          )}
-        >
-          {candidateStatusLabel(candidate.status)}
-        </Badge>
-      </div>
-      <p
-        className="mt-1 text-[11px] leading-relaxed text-muted-foreground"
-        title={candidate.content}
-      >
-        {previewText(candidate.content, 360)}
-      </p>
-      <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] text-muted-foreground">
-        <span className="inline-flex items-center gap-1">
-          <FileSearch className="size-3" />
-          {logRangeLabel(candidate.logIds, displayNumberByLogId)}
-        </span>
-        <span className="inline-flex items-center gap-1">
-          <ShieldCheck className="size-3" />
-          {redactionLabel(candidate)}
-        </span>
-        {candidate.status === "promoted" && (
-          <span className="inline-flex items-center gap-1 text-emerald-500">
-            <CircleCheck className="size-3" />
-            {candidate.openClawMemoryId ?? "OpenClaw"}
-          </span>
-        )}
-        {candidate.status === "failed" && candidate.error !== null && (
-          <span className="inline-flex items-center gap-1 text-destructive">
-            <XCircle className="size-3" />
-            {candidate.error}
-          </span>
-        )}
-      </div>
-      <div className="mt-1 flex flex-wrap items-center gap-1.5">
-        {candidate.logIds.map((logId) => {
-          const displayNumber = displayLogNumber(logId, displayNumberByLogId);
-          return (
-            <a
-              key={logId}
-              href={`#${getLogAnchor(logId)}`}
-              onClick={(event) => {
-                event.preventDefault();
-                jumpToLog(logId);
-              }}
-              className="rounded border border-blue-400/25 px-1.5 py-0.5 font-mono text-[10px] text-blue-400 underline-offset-2 transition-colors hover:bg-blue-400/10 hover:text-blue-300 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              aria-label={`Jump to evidence log ${displayNumber}`}
-              title={`Log ID ${String(logId)}`}
-            >
-              #{displayNumber}
-            </a>
-          );
-        })}
-        <span className="flex-1" />
-        {canEdit && (
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            className="h-6 gap-1.5 px-2 text-[10px]"
-            disabled={isUpdating || isPromoting}
-            onClick={() => setEditing(true)}
-          >
-            <Pencil className="size-3" />
-            Review
-          </Button>
-        )}
-        <Button
-          type="button"
-          variant={canPromote ? "outline" : "ghost"}
-          size="sm"
-          className="h-6 gap-1.5 px-2 text-[10px]"
-          onClick={() => onPromoteCandidate(candidate.id)}
-          disabled={!canPromote || isPromoting || isUpdating}
-        >
-          {isPromoting ? (
-            <RefreshCw className="size-3 animate-spin" />
-          ) : canPromote ? (
-            <UploadCloud className="size-3" />
-          ) : (
-            <CircleCheck className="size-3" />
-          )}
-          {candidatePromoteLabel(candidate, isPromoting)}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-function CandidateList({
-  candidates,
-  promotingCandidateIds,
-  updatingCandidateIds,
-  onPromoteCandidate,
-  onUpdateCandidate,
-  displayNumberByLogId,
-}: {
-  candidates: KnowledgeCandidate[];
-  promotingCandidateIds: ReadonlySet<string>;
-  updatingCandidateIds: ReadonlySet<string>;
-  onPromoteCandidate: (candidateId: string) => void;
-  onUpdateCandidate: (candidateId: string, update: CandidateDraftUpdate) => Promise<boolean>;
-  displayNumberByLogId: ReadonlyMap<number, number>;
-}): JSX.Element | null {
-  if (candidates.length === 0) return null;
-  return (
-    <div className="mt-2 grid gap-1.5">
-      {candidates.map((candidate) => (
-        <CandidateItem
-          key={candidate.id}
-          candidate={candidate}
-          isPromoting={promotingCandidateIds.has(candidate.id)}
-          isUpdating={updatingCandidateIds.has(candidate.id)}
-          onPromoteCandidate={onPromoteCandidate}
-          onUpdateCandidate={onUpdateCandidate}
-          displayNumberByLogId={displayNumberByLogId}
-        />
-      ))}
-    </div>
-  );
-}
-
-export function AgentTraceSummary({
-  logs,
-  scopeId,
-  slowResponseThresholdSeconds,
-  showRollupMetrics,
-  timeDisplayFormat,
-}: AgentTraceSummaryProps): JSX.Element | null {
-  const [candidates, setCandidates] = useState<KnowledgeCandidate[]>([]);
-  const [candidatesExpanded, setCandidatesExpanded] = useState(true);
-  const [candidateState, setCandidateState] = useState<CandidateLoadState>({
-    status: "idle",
-    error: null,
-  });
-  const [promotingCandidateIds, setPromotingCandidateIds] = useState<ReadonlySet<string>>(
-    () => new Set(),
-  );
-  const [updatingCandidateIds, setUpdatingCandidateIds] = useState<ReadonlySet<string>>(
-    () => new Set(),
-  );
-  const hasCandidates = candidates.length > 0;
-  const summary = useMemo(
-    () => buildTraceSummary(logs, slowResponseThresholdSeconds, candidates.length),
-    [candidates.length, logs, slowResponseThresholdSeconds],
-  );
-  const displayNumberByLogId = useMemo(() => buildDisplayNumberByLogId(logs), [logs]);
-  const traceInsights = useMemo(
-    () => buildTraceInsights({ logs, scopeId, summary, candidates, displayNumberByLogId }),
-    [candidates, displayNumberByLogId, logs, scopeId, summary],
-  );
-  const showElapsedSummary = showRollupMetrics || summary.maxElapsedMs !== null;
-  const timeRange = useMemo(
-    () => formatTimeRange(summary.startedAt, summary.endedAt, timeDisplayFormat),
-    [summary.endedAt, summary.startedAt, timeDisplayFormat],
-  );
-
-  const createCandidates = useCallback(() => {
-    if (logs.length === 0 || candidateState.status === "loading") return;
-    setCandidateState({ status: "loading", error: null });
-    void (async () => {
-      try {
-        const parsed = await fetchJsonWithTimeout(
-          `/api/knowledge/sessions/${encodeURIComponent(scopeId)}/candidates`,
-          CandidateResponseSchema,
-          CANDIDATE_GENERATE_TIMEOUT_MS,
-          { method: "POST" },
-          (response) => `Candidate generation failed with ${String(response.status)}`,
-        );
-        setCandidates(parsed.candidates);
-        setCandidatesExpanded(parsed.candidates.length > 0);
-        setCandidateState(
-          parsed.candidates.length > 0
-            ? { status: "ready", error: null }
-            : { status: "failed", error: "No candidate was generated for this trace scope." },
-        );
-      } catch (error) {
-        setCandidateState({
-          status: "failed",
-          error: error instanceof Error ? error.message : "Candidate response was invalid",
-        });
-      }
-    })();
-  }, [candidateState.status, logs.length, scopeId]);
-
-  const promoteCandidate = useCallback((candidateId: string) => {
-    setPromotingCandidateIds((current) => {
-      if (current.has(candidateId)) return current;
-      const next = new Set(current);
-      next.add(candidateId);
-      return next;
-    });
-
-    void (async () => {
-      try {
-        const response = await fetchWithTimeout(
-          `/api/knowledge/candidates/${encodeURIComponent(candidateId)}/promote`,
-          CANDIDATE_PROMOTE_TIMEOUT_MS,
-          { method: "POST" },
-        );
-        const raw: unknown = await response.json().catch(() => null);
-        const parsed = CandidatePromotionResponseSchema.safeParse(raw);
-        if (response.ok && parsed.success) {
-          setCandidates((current) =>
-            current.map((candidate) =>
-              candidate.id === parsed.data.candidate.id ? parsed.data.candidate : candidate,
-            ),
-          );
-          setCandidateState({ status: "ready", error: null });
-          return;
-        }
-
-        const failure = CandidatePromotionFailureResponseSchema.safeParse(raw);
-        if (failure.success && failure.data.candidate !== undefined) {
-          setCandidates((current) =>
-            current.map((candidate) =>
-              candidate.id === failure.data.candidate?.id ? failure.data.candidate : candidate,
-            ),
-          );
-        }
-        setCandidateState({
-          status: "failed",
-          error: failure.success
-            ? (failure.data.error ?? "Candidate promotion failed")
-            : `Candidate promotion failed with ${String(response.status)}`,
-        });
-      } catch (error) {
-        setCandidateState({
-          status: "failed",
-          error: error instanceof Error ? error.message : "Candidate promotion failed",
-        });
-      } finally {
-        setPromotingCandidateIds((current) => {
-          const next = new Set(current);
-          next.delete(candidateId);
-          return next;
-        });
-      }
-    })();
-  }, []);
-
-  const updateCandidate = useCallback(
-    async (candidateId: string, update: CandidateDraftUpdate): Promise<boolean> => {
-      setUpdatingCandidateIds((current) => {
-        if (current.has(candidateId)) return current;
-        const next = new Set(current);
-        next.add(candidateId);
-        return next;
-      });
-
-      try {
-        const parsed = await fetchJsonWithTimeout(
-          `/api/knowledge/candidates/${encodeURIComponent(candidateId)}`,
-          CandidateUpdateResponseSchema,
-          CANDIDATE_UPDATE_TIMEOUT_MS,
-          {
-            method: "PATCH",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(update),
-          },
-          (response) => `Candidate update failed with ${String(response.status)}`,
-        );
-        setCandidates((current) =>
-          current.map((candidate) =>
-            candidate.id === parsed.candidate.id ? parsed.candidate : candidate,
-          ),
-        );
-        setCandidateState({ status: "ready", error: null });
-        return true;
-      } catch (error) {
-        setCandidateState({
-          status: "failed",
-          error: error instanceof Error ? error.message : "Candidate update failed",
-        });
-        return false;
-      } finally {
-        setUpdatingCandidateIds((current) => {
-          const next = new Set(current);
-          next.delete(candidateId);
-          return next;
-        });
-      }
-    },
-    [],
-  );
-
-  if (logs.length === 0) return null;
-
-  return (
-    <section className="border border-border bg-card shadow-sm mb-2 rounded-[8px] px-3 py-2">
-      <div className="flex flex-wrap items-center gap-x-3 gap-y-2 text-xs">
-        {showRollupMetrics && (
-          <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-sky-400/70" />
-          {summary.toolCallCount} tools
-        </span>
-        {showRollupMetrics && (
-          <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">
-              KV Cache +{formatTokens(summary.totalCacheCreationInputTokens)} / ~
-              {formatTokens(summary.totalCacheReadInputTokens)}
-            </span>
-          </span>
-        )}
-        {showElapsedSummary && (
-          <span className="inline-flex items-center gap-1.5 text-muted-foreground">
-            <Clock className="size-3.5" />
-            {showRollupMetrics && (
-              <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>
-        )}
-        {showRollupMetrics && 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" />
-        {hasCandidates && (
-          <Badge variant="outline" className="h-6 px-2 text-[10px] font-mono">
-            {formatCandidateCount(summary.knowledgeCandidateCount)}
-          </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>
-        {hasCandidates && (
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            className="size-7 text-muted-foreground"
-            onClick={() => setCandidatesExpanded((value) => !value)}
-            aria-expanded={candidatesExpanded}
-            aria-label={
-              candidatesExpanded ? "Collapse memory candidates" : "Expand memory candidates"
-            }
-          >
-            {candidatesExpanded ? (
-              <ChevronDown className="size-3.5" />
-            ) : (
-              <ChevronRight className="size-3.5" />
-            )}
-          </Button>
-        )}
-      </div>
-      {candidateState.status === "failed" && (
-        <p className="mt-2 text-xs text-destructive">{candidateState.error}</p>
-      )}
-      <TraceInsights insights={traceInsights} />
-      {candidatesExpanded && (
-        <CandidateList
-          candidates={candidates}
-          promotingCandidateIds={promotingCandidateIds}
-          updatingCandidateIds={updatingCandidateIds}
-          onPromoteCandidate={promoteCandidate}
-          onUpdateCandidate={updateCandidate}
-          displayNumberByLogId={displayNumberByLogId}
-        />
-      )}
-    </section>
-  );
-}