@tonyclaw/agent-inspector 2.1.16 → 2.1.18

package/src/components/ProxyViewer.tsx

@@ -25,8 +25,10 @@ import {
   Download,
   FileJson,
   Gauge,
+  Flag,
   Plus,
   Siren,
+  Timer,
   Trash2,
   Upload,
 } from "lucide-react";
@@ -38,6 +40,7 @@ import { copyTextToClipboard } from "../lib/clipboard";
 import type { InspectorGroupEvidence, InspectorGroupMember } from "../lib/groupContract";
 import type { CaptureMode, TimeDisplayFormat } from "../lib/runtimeConfig";
 import { formatTimestampRange } from "../lib/timeDisplay";
+import { extractStopReason, type StopReason } from "../lib/stopReason";
 import { cn, formatContextWindowTokens, formatTokens } from "../lib/utils";
 import { useProviders } from "../lib/useProviders";
 import packageJson from "../../package.json";
@@ -56,7 +59,7 @@ import { computeCacheTrends } from "./proxy-viewer/cacheTrend";
 import { LazyCompareDrawer } from "./proxy-viewer/lazy";
 import { dispatchLogFocusRequest } from "./proxy-viewer/logFocus";
 import { ConversationGroupList } from "./proxy-viewer/ConversationGroupList";
-import { buildValidPredecessors } from "./proxy-viewer/viewerState";
+import { buildTurnGroups, buildValidPredecessors } from "./proxy-viewer/viewerState";
 import { useKeyboardNavigation } from "./proxy-viewer/useKeyboardNavigation";
 import { SegmentBar } from "./proxy-viewer/anatomy/SegmentBar";
 import type {
@@ -171,16 +174,34 @@ function getFirstUserAgent(logs: CapturedLog[]): string | null {
 }
 
 type SessionSlateStatus = "rolling" | "clear" | "watch" | "failed";
+type SessionSlateMetricTone = "neutral" | "cool" | "watch" | "danger";
+
+type ConversationLogs = {
+  logs: CapturedLog[];
+};
 
 type SessionSlateStats = {
   status: SessionSlateStatus;
   statusLabel: string;
   modelLabel: string;
+  providerLabel: string;
   requests: number;
+  turns: number;
   failures: number;
+  pending: number;
   slow: number;
+  lengthStops: number;
   timeRange: string | null;
   tokenLabel: string;
+  finishLabel: string;
+  finishDetail: string;
+  finishTone: SessionSlateMetricTone;
+  outcomeLabel: string;
+  outcomeDetail: string;
+  outcomeTone: SessionSlateMetricTone;
+  slowestLabel: string;
+  slowestDetail: string;
+  heaviestDetail: string;
 };
 
 function hasLogFailure(log: CapturedLog): boolean {
@@ -201,25 +222,237 @@ function getModelLabel(logs: readonly CapturedLog[]): string {
   return `${sorted.length} models`;
 }
 
-function buildSessionSlateStats({
+function getProviderLabel(logs: readonly CapturedLog[]): string {
+  const providers = new Set<string>();
+  for (const log of logs) {
+    if (
+      log.providerName !== null &&
+      log.providerName !== undefined &&
+      log.providerName.length > 0
+    ) {
+      providers.add(log.providerName);
+    }
+  }
+  const sorted = [...providers].sort();
+  if (sorted.length === 0) return "Provider unknown";
+  if (sorted.length === 1) return sorted[0] ?? "Provider unknown";
+  return `${sorted.length} providers`;
+}
+
+function formatElapsedMs(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60_000) {
+    const seconds = ms / 1000;
+    return `${seconds < 10 ? seconds.toFixed(1) : seconds.toFixed(0)}s`;
+  }
+  const totalSeconds = Math.round(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}m ${seconds}s`;
+}
+
+function formatTokenPair(inputTokens: number, outputTokens: number): string {
+  return `${formatTokens(inputTokens)} in / ${formatTokens(outputTokens)} out`;
+}
+
+function countSessionTurns(
+  logs: CapturedLog[],
+  conversationGroups: readonly ConversationLogs[],
+): number {
+  if (logs.length === 0) return 0;
+  if (conversationGroups.length === 0) return buildTurnGroups(logs).length;
+
+  let turns = 0;
+  for (const group of conversationGroups) {
+    turns += buildTurnGroups(group.logs).length;
+  }
+  return turns;
+}
+
+type FinishSummary = {
+  label: string;
+  detail: string;
+  tone: SessionSlateMetricTone;
+};
+
+type SessionOutcomeSummary = {
+  label: string;
+  detail: string;
+  tone: SessionSlateMetricTone;
+};
+
+type FailureSummary = {
+  logNumber: number;
+  status: number | null;
+  error: string | null;
+};
+
+function summarizeFinishReason({
+  stopReason,
+  pending,
+  lastFailureLogNumber,
+}: {
+  stopReason: StopReason;
+  pending: number;
+  lastFailureLogNumber: number | null;
+}): FinishSummary {
+  if (pending > 0) {
+    return {
+      label: "In flight",
+      detail: `${pending} request${pending === 1 ? "" : "s"} pending`,
+      tone: "cool",
+    };
+  }
+
+  if (lastFailureLogNumber !== null && stopReason === null) {
+    return {
+      label: "Error",
+      detail: `Last failed request #${lastFailureLogNumber}`,
+      tone: "danger",
+    };
+  }
+
+  switch (stopReason) {
+    case "end_turn":
+      return { label: "End turn", detail: "Assistant completed the turn", tone: "neutral" };
+    case "stop":
+      return { label: "Stop", detail: "Model reached a stop condition", tone: "neutral" };
+    case "length":
+      return { label: "Output limit", detail: "Turn ended at max output tokens", tone: "watch" };
+    case "tool_use":
+      return { label: "Tool call", detail: "Assistant requested a tool", tone: "cool" };
+    case null:
+      return { label: "Unknown", detail: "No finish reason captured", tone: "neutral" };
+  }
+}
+
+function isClientAbortError(error: string | null): boolean {
+  if (error === null) return false;
+  const lower = error.toLowerCase();
+  return (
+    lower.includes("abort") ||
+    lower.includes("cancel") ||
+    lower.includes("client disconnected") ||
+    lower.includes("stream disconnected") ||
+    lower.includes("connection closed")
+  );
+}
+
+function summarizeSessionOutcome({
+  pending,
+  failures,
+  lengthStops,
+  stopReason,
+  lastFailure,
+}: {
+  pending: number;
+  failures: number;
+  lengthStops: number;
+  stopReason: StopReason;
+  lastFailure: FailureSummary | null;
+}): SessionOutcomeSummary {
+  if (
+    lastFailure !== null &&
+    (lastFailure.status === 499 || isClientAbortError(lastFailure.error))
+  ) {
+    return {
+      label: "Client aborted",
+      detail: `Request #${lastFailure.logNumber} ended before completion`,
+      tone: "watch",
+    };
+  }
+
+  if (pending > 0) {
+    return {
+      label: "In flight",
+      detail: `${pending} request${pending === 1 ? "" : "s"} still running`,
+      tone: "cool",
+    };
+  }
+
+  if (lastFailure !== null && lastFailure.status !== null && lastFailure.status >= 500) {
+    return {
+      label: "Provider error",
+      detail: `Request #${lastFailure.logNumber} returned HTTP ${lastFailure.status}`,
+      tone: "danger",
+    };
+  }
+
+  if (failures > 0 && lastFailure !== null) {
+    return {
+      label: "Failed",
+      detail: `Request #${lastFailure.logNumber} needs attention`,
+      tone: "danger",
+    };
+  }
+
+  if (lengthStops > 0 || stopReason === "length") {
+    return {
+      label: "Output limited",
+      detail: "Model stopped at the output token limit",
+      tone: "watch",
+    };
+  }
+
+  switch (stopReason) {
+    case "end_turn":
+    case "stop":
+      return { label: "Completed", detail: "Assistant completed normally", tone: "neutral" };
+    case "tool_use":
+      return { label: "Tool requested", detail: "Assistant handed off to a tool", tone: "cool" };
+    case null:
+      return { label: "Unknown", detail: "No terminal signal captured", tone: "neutral" };
+  }
+}
+
+export function buildSessionSlateStats({
   logs,
+  conversationGroups,
   isLoading,
   timeDisplayFormat,
   slowResponseThresholdSeconds,
 }: {
   logs: CapturedLog[];
+  conversationGroups: readonly ConversationLogs[];
   isLoading: boolean;
   timeDisplayFormat: TimeDisplayFormat;
   slowResponseThresholdSeconds: number;
 }): SessionSlateStats {
   let failures = 0;
+  let pending = 0;
   let slow = 0;
+  let lengthStops = 0;
   let totalIn = 0;
   let totalOut = 0;
+  let terminalStopReason: StopReason = null;
+  let lastFailureLogNumber: number | null = null;
+  let lastFailure: FailureSummary | null = null;
+  let slowestMs: number | null = null;
+  let slowestLogNumber: number | null = null;
+  let heaviestTokens = 0;
+  let heaviestInputTokens = 0;
+  let heaviestOutputTokens = 0;
+  let heaviestLogNumber: number | null = null;
   const slowThresholdMs = slowResponseThresholdSeconds * 1000;
 
-  for (const log of logs) {
-    if (hasLogFailure(log)) failures += 1;
+  for (let index = 0; index < logs.length; index += 1) {
+    const log = logs[index];
+    if (log === undefined) continue;
+    const logNumber = index + 1;
+    const stopReason = extractStopReason(log);
+    if (stopReason !== null) terminalStopReason = stopReason;
+    if (stopReason === "length") lengthStops += 1;
+
+    if (hasLogFailure(log)) {
+      failures += 1;
+      lastFailureLogNumber = logNumber;
+      lastFailure = {
+        logNumber,
+        status: log.responseStatus,
+        error: log.error ?? null,
+      };
+    }
+    if (log.responseStatus === null) pending += 1;
     if (
       slowResponseThresholdSeconds > 0 &&
       log.elapsedMs !== null &&
@@ -229,15 +462,30 @@ function buildSessionSlateStats({
     }
     if (log.inputTokens !== null) totalIn += log.inputTokens;
     if (log.outputTokens !== null) totalOut += log.outputTokens;
+    if (log.elapsedMs !== null && (slowestMs === null || log.elapsedMs > slowestMs)) {
+      slowestMs = log.elapsedMs;
+      slowestLogNumber = logNumber;
+    }
+
+    const inputTokens = log.inputTokens ?? 0;
+    const outputTokens = log.outputTokens ?? 0;
+    const requestTokens = inputTokens + outputTokens;
+    if (requestTokens > heaviestTokens) {
+      heaviestTokens = requestTokens;
+      heaviestInputTokens = inputTokens;
+      heaviestOutputTokens = outputTokens;
+      heaviestLogNumber = logNumber;
+    }
   }
 
-  const status: SessionSlateStatus = isLoading
-    ? "rolling"
-    : failures > 0
-      ? "failed"
-      : slow > 0
-        ? "watch"
-        : "clear";
+  const status: SessionSlateStatus =
+    isLoading || (pending > 0 && failures === 0)
+      ? "rolling"
+      : failures > 0
+        ? "failed"
+        : slow > 0 || lengthStops > 0
+          ? "watch"
+          : "clear";
   const statusLabel =
     status === "rolling"
       ? "Rolling"
@@ -246,87 +494,169 @@ function buildSessionSlateStats({
         : status === "watch"
           ? "Watch"
           : "Clear";
+  const finish = summarizeFinishReason({
+    stopReason: terminalStopReason,
+    pending,
+    lastFailureLogNumber,
+  });
+  const outcome = summarizeSessionOutcome({
+    pending,
+    failures,
+    lengthStops,
+    stopReason: terminalStopReason,
+    lastFailure,
+  });
 
   return {
     status,
     statusLabel,
     modelLabel: getModelLabel(logs),
+    providerLabel: getProviderLabel(logs),
     requests: logs.length,
+    turns: countSessionTurns(logs, conversationGroups),
     failures,
+    pending,
     slow,
+    lengthStops,
     timeRange: formatTimeRange(logs, timeDisplayFormat),
     tokenLabel: `${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out`,
+    finishLabel: finish.label,
+    finishDetail: finish.detail,
+    finishTone: finish.tone,
+    outcomeLabel: outcome.label,
+    outcomeDetail: outcome.detail,
+    outcomeTone: outcome.tone,
+    slowestLabel: slowestMs === null ? "n/a" : formatElapsedMs(slowestMs),
+    slowestDetail: slowestLogNumber === null ? "Latency pending" : `Request #${slowestLogNumber}`,
+    heaviestDetail:
+      heaviestLogNumber === null
+        ? "Tokens pending"
+        : `#${heaviestLogNumber} ${formatTokenPair(heaviestInputTokens, heaviestOutputTokens)}`,
   };
 }
 
-function slateStatusClass(status: SessionSlateStatus): string {
+function slateMetricToneClass(tone: SessionSlateMetricTone): string {
+  switch (tone) {
+    case "cool":
+      return "text-cyan-100";
+    case "danger":
+      return "text-red-100";
+    case "watch":
+      return "text-amber-100";
+    case "neutral":
+      return "text-foreground";
+  }
+}
+
+function statusMetricTone(status: SessionSlateStatus): SessionSlateMetricTone {
   switch (status) {
     case "rolling":
-      return "border-cyan-400/35 bg-cyan-500/10 text-cyan-200";
+      return "cool";
     case "failed":
-      return "border-red-400/35 bg-red-500/10 text-red-100";
+      return "danger";
     case "watch":
-      return "border-amber-300/35 bg-amber-400/10 text-amber-100";
+      return "watch";
     case "clear":
-      return "border-slate-300/20 bg-slate-300/[0.08] text-slate-100";
+      return "neutral";
   }
 }
 
+function requestHealthDetail(stats: SessionSlateStats): string {
+  if (stats.pending > 0) return `${stats.pending} pending / ${stats.failures} failed`;
+  if (stats.lengthStops > 0) return `${stats.lengthStops} output limit / ${stats.failures} failed`;
+  return `${stats.failures} failed / ${stats.slow} slow`;
+}
+
+function SessionSlateMetric({
+  label,
+  value,
+  detail,
+  icon,
+  tone = "neutral",
+}: {
+  label: string;
+  value: string;
+  detail: string;
+  icon?: ReactNode;
+  tone?: SessionSlateMetricTone;
+}): JSX.Element {
+  return (
+    <div className="min-w-0 border-t border-white/10 px-4 py-3">
+      <div className="flex items-center gap-1 text-[10px] uppercase text-muted-foreground">
+        {icon}
+        {label}
+      </div>
+      <div className={cn("mt-2 font-mono text-sm font-semibold", slateMetricToneClass(tone))}>
+        {value}
+      </div>
+      <div className="mt-1 font-mono text-[11px] leading-snug text-muted-foreground">{detail}</div>
+    </div>
+  );
+}
+
 function SessionOpeningSlate({ stats }: { stats: SessionSlateStats }): JSX.Element | null {
   if (stats.requests === 0) return null;
 
   return (
-    <div className="border border-border bg-card shadow-sm mb-4 rounded-[8px]">
-      <div className="grid grid-cols-2 gap-0 md:grid-cols-[minmax(220px,1.2fr)_repeat(4,minmax(120px,1fr))]">
-        <div className="col-span-2 border-b border-white/10 px-4 py-3 md:col-span-1 md:border-b-0 md:border-r">
-          <div className="flex items-center gap-2 text-[10px] font-semibold uppercase text-muted-foreground">
-            <Clapperboard className="size-3.5 text-cyan-300" />
-            Opening Slate
-          </div>
-          <div className="mt-2 min-w-0 truncate font-mono text-sm font-semibold text-foreground">
-            {stats.modelLabel}
-          </div>
-          <div className="mt-1 truncate font-mono text-[11px] text-muted-foreground">
-            {stats.timeRange ?? "Timeline pending"}
-          </div>
-        </div>
-        <div className="border-r border-b border-white/10 px-4 py-3 md:border-b-0">
-          <div className="text-[10px] uppercase text-muted-foreground">Status</div>
-          <div
-            className={cn(
-              "mt-2 inline-flex h-7 items-center rounded-md border px-2.5 font-mono text-xs font-semibold",
-              slateStatusClass(stats.status),
-            )}
-          >
-            {stats.statusLabel}
-          </div>
-        </div>
-        <div className="border-b border-white/10 px-4 py-3 md:border-b-0 md:border-r">
-          <div className="text-[10px] uppercase text-muted-foreground">Requests</div>
-          <div className="mt-2 font-mono text-xl font-semibold text-foreground">
-            {stats.requests}
-          </div>
-        </div>
-        <div className="border-r border-white/10 px-4 py-3 md:border-r">
-          <div className="flex items-center gap-1 text-[10px] uppercase text-muted-foreground">
-            <Siren className="size-3 text-red-300" />
-            Failure
-          </div>
-          <div className="mt-2 font-mono text-xl font-semibold text-red-100">{stats.failures}</div>
-        </div>
-        <div className="px-4 py-3">
-          <div className="flex items-center gap-1 text-[10px] uppercase text-muted-foreground">
-            <Gauge className="size-3 text-amber-200" />
-            Tempo
-          </div>
-          <div className="mt-2 font-mono text-sm font-semibold text-foreground">
-            {stats.slow} slow
+    <div className="border border-border bg-card shadow-sm mb-4 overflow-hidden rounded-[8px]">
+      <div className="px-4 py-3">
+        <div className="flex flex-wrap items-end justify-between gap-3">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2 text-[10px] font-semibold uppercase text-muted-foreground">
+              <Clapperboard className="size-3.5 text-slate-300" />
+              Flight Recorder
+            </div>
+            <div className="mt-2 min-w-0 font-mono text-sm font-semibold text-foreground">
+              {stats.modelLabel}
+            </div>
           </div>
-          <div className="mt-1 truncate font-mono text-[11px] text-muted-foreground">
-            {stats.tokenLabel}
+          <div className="flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-muted-foreground">
+            <span className="min-w-0 font-mono">{stats.providerLabel}</span>
+            <span className="min-w-0 font-mono">{stats.timeRange ?? "Timeline pending"}</span>
           </div>
         </div>
       </div>
+      <div className="grid grid-cols-2 border-t border-white/10 md:grid-cols-3 2xl:grid-cols-6">
+        <SessionSlateMetric
+          label="Status"
+          value={stats.statusLabel}
+          detail={requestHealthDetail(stats)}
+          tone={statusMetricTone(stats.status)}
+        />
+        <SessionSlateMetric
+          label="Turns"
+          value={String(stats.turns)}
+          detail={stats.finishLabel}
+          icon={<Flag className="size-3 text-muted-foreground" />}
+          tone={stats.finishTone}
+        />
+        <SessionSlateMetric
+          label="Requests"
+          value={String(stats.requests)}
+          detail={`${stats.failures} failed / ${stats.slow} slow`}
+          icon={<Siren className="size-3 text-muted-foreground" />}
+          tone={stats.failures > 0 ? "danger" : "neutral"}
+        />
+        <SessionSlateMetric
+          label="Peak"
+          value={stats.slowestLabel}
+          detail={stats.slowestDetail}
+          icon={<Timer className="size-3 text-muted-foreground" />}
+          tone={stats.slow > 0 ? "watch" : "neutral"}
+        />
+        <SessionSlateMetric
+          label="Tokens"
+          value={stats.tokenLabel}
+          detail={stats.heaviestDetail}
+          icon={<Gauge className="size-3 text-muted-foreground" />}
+        />
+        <SessionSlateMetric
+          label="Outcome"
+          value={stats.outcomeLabel}
+          detail={stats.outcomeDetail}
+          tone={stats.outcomeTone}
+        />
+      </div>
     </div>
   );
 }
@@ -1503,11 +1833,12 @@ export function ProxyViewer({
     () =>
       buildSessionSlateStats({
         logs,
+        conversationGroups: groups,
         isLoading,
         timeDisplayFormat,
         slowResponseThresholdSeconds,
       }),
-    [isLoading, logs, slowResponseThresholdSeconds, timeDisplayFormat],
+    [groups, isLoading, logs, slowResponseThresholdSeconds, timeDisplayFormat],
   );
   const handleCompareWithPrevious = useCallback(
     (log: CapturedLog) => {