@tonyclaw/agent-inspector 4.0.1 → 4.0.3

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

@@ -1,488 +0,0 @@
-import type { CapturedLog } from "../../contracts";
-import type { ExportMode } from "../../lib/export-logs";
-import type { CaptureMode, TimeDisplayFormat } from "../../lib/runtimeConfig";
-import { extractStopReason, type StopReason } from "../../lib/stopReason";
-import { formatTimestampRange } from "../../lib/timeDisplay";
-import { formatTokens } from "../../lib/utils";
-import { buildTurnGroups } from "./viewerState";
-
-export type ExportActionVisibility = {
-  redacted: boolean;
-  raw: boolean;
-};
-
-export type SessionContextScope = {
-  label: string;
-  logs: CapturedLog[];
-  showBackLink: boolean;
-};
-
-export type SessionSlateStatus = "rolling" | "clear" | "watch" | "failed";
-export type SessionSlateMetricTone = "neutral" | "cool" | "watch" | "danger";
-
-export type ConversationLogs = {
-  logs: CapturedLog[];
-};
-
-export type HomeConnectionEndpoints = {
-  proxy: string;
-  mcp: string;
-};
-
-export const COPYABLE_COMMAND_CONTAINER_CLASS_NAME =
-  "flex w-full min-w-0 items-center gap-2 rounded-md border border-border/70 bg-muted/35 px-3 py-2 sm:w-auto sm:max-w-full";
-export const COPYABLE_COMMAND_TEXT_CLASS_NAME =
-  "m-0 min-w-0 flex-1 overflow-x-auto font-mono text-xs text-foreground sm:text-sm";
-
-export function buildHomeConnectionCommands(endpoints: HomeConnectionEndpoints): readonly string[] {
-  return [`PROXY_BASE_URL=${endpoints.proxy}`, `MCP_URL=${endpoints.mcp}`];
-}
-
-export 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;
-};
-
-type PaginationStatusControls = {
-  isLoading: boolean;
-  total: number | null;
-};
-
-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;
-};
-
-export function shouldShowRawExport(captureMode: CaptureMode): boolean {
-  return captureMode === "full";
-}
-
-export function exportRequiresConfirmation(mode: ExportMode): boolean {
-  return mode === "raw";
-}
-
-export function getExportActionVisibility(
-  captureMode: CaptureMode,
-  logCount: number,
-): ExportActionVisibility {
-  const hasLogs = logCount > 0;
-  return {
-    redacted: hasLogs,
-    raw: hasLogs && shouldShowRawExport(captureMode),
-  };
-}
-
-function formatTimeRange(logs: CapturedLog[], timeDisplayFormat: TimeDisplayFormat): string | null {
-  const first = logs[0];
-  const last = logs[logs.length - 1];
-  if (first === undefined || last === undefined) return null;
-  return formatTimestampRange(first.timestamp, last.timestamp, timeDisplayFormat);
-}
-
-function hasLogFailure(log: CapturedLog): boolean {
-  if (log.error !== null && log.error !== undefined && log.error.length > 0) return true;
-  return log.responseStatus !== null && log.responseStatus >= 400;
-}
-
-function getModelLabel(logs: readonly CapturedLog[]): string {
-  const models = new Set<string>();
-  for (const log of logs) {
-    if (log.model !== null && log.model.length > 0) {
-      models.add(log.model);
-    }
-  }
-  const sorted = [...models].sort();
-  if (sorted.length === 0) return "Model unknown";
-  if (sorted.length === 1) return sorted[0] ?? "Model unknown";
-  return `${sorted.length} models`;
-}
-
-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;
-}
-
-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 (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 &&
-      log.elapsedMs >= slowThresholdMs
-    ) {
-      slow += 1;
-    }
-    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 || (pending > 0 && failures === 0)
-      ? "rolling"
-      : failures > 0
-        ? "failed"
-        : slow > 0 || lengthStops > 0
-          ? "watch"
-          : "clear";
-  const statusLabel =
-    status === "rolling"
-      ? "Rolling"
-      : status === "failed"
-        ? "Failure"
-        : 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)}`,
-  };
-}
-
-export function resolveSessionContextScope({
-  pinnedSessionId,
-  selectedSession,
-  sessions,
-  logs,
-}: {
-  pinnedSessionId: string | undefined;
-  selectedSession: string;
-  sessions: readonly string[];
-  logs: readonly CapturedLog[];
-}): SessionContextScope | null {
-  if (pinnedSessionId !== undefined) {
-    const scopedLogs = logs.filter((log) => log.sessionId === pinnedSessionId);
-    if (scopedLogs.length === 0) return null;
-    return { label: pinnedSessionId, logs: scopedLogs, showBackLink: true };
-  }
-
-  if (selectedSession !== "__all__") {
-    const scopedLogs = logs.filter((log) => log.sessionId === selectedSession);
-    if (scopedLogs.length === 0) return null;
-    return { label: selectedSession, logs: scopedLogs, showBackLink: true };
-  }
-
-  const singleSessionId = sessions.length === 1 ? (sessions[0] ?? null) : null;
-  if (singleSessionId !== null) {
-    const allVisibleLogsBelongToSession = logs.every((log) => log.sessionId === singleSessionId);
-    if (allVisibleLogsBelongToSession) {
-      return { label: singleSessionId, logs: [...logs], showBackLink: false };
-    }
-  }
-
-  const allVisibleLogsAreSessionless =
-    sessions.length === 0 && logs.length > 0 && logs.every((log) => log.sessionId === null);
-  if (allVisibleLogsAreSessionless) {
-    return { label: "Visible requests", logs: [...logs], showBackLink: false };
-  }
-
-  return null;
-}
-
-export function formatPaginationStatus({
-  logs,
-  pagination,
-}: {
-  logs: readonly CapturedLog[];
-  pagination: PaginationStatusControls;
-}): string {
-  if (pagination.isLoading && logs.length === 0) return "Loading logs...";
-  if (logs.length === 0) return "No logs on this page";
-
-  const first = logs[0];
-  const last = logs[logs.length - 1];
-  const range =
-    first === undefined || last === undefined ? "Current page" : `#${first.id}-#${last.id}`;
-  if (pagination.total === null) {
-    return `Showing ${logs.length} logs (${range})`;
-  }
-  if (pagination.total <= logs.length) {
-    return `Showing all ${pagination.total} logs`;
-  }
-  return `Showing ${logs.length} of ${pagination.total} logs (${range})`;
-}

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

@@ -1,131 +0,0 @@
-export type ReplayMetricValue = number | boolean | null;
-
-export type ReplayMetrics = {
-  status: number | null;
-  elapsedMs: number | null;
-  inputTokens: number | null;
-  outputTokens: number | null;
-  responseBytes: number | null;
-  streaming: boolean;
-};
-
-export type ReplayMetricComparison = {
-  id: "status" | "elapsed" | "input" | "output" | "bytes" | "streaming";
-  label: string;
-  original: ReplayMetricValue;
-  replay: ReplayMetricValue;
-  delta: number | null;
-};
-
-type JsonObject = Record<string, unknown>;
-
-function isJsonObject(value: unknown): value is JsonObject {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-
-function byteLength(value: string | null | undefined): number | null {
-  if (value === null || value === undefined) return null;
-  return new TextEncoder().encode(value).length;
-}
-
-export function readRequestModel(body: string): string | null {
-  try {
-    const parsed: unknown = JSON.parse(body);
-    if (!isJsonObject(parsed)) return null;
-    const model = parsed["model"];
-    return typeof model === "string" && model.length > 0 ? model : null;
-  } catch {
-    return null;
-  }
-}
-
-export function replaceRequestModel(
-  body: string,
-  model: string,
-): { body: string; error: string | null } {
-  try {
-    const parsed: unknown = JSON.parse(body);
-    if (!isJsonObject(parsed)) {
-      return { body, error: "Request body must be a JSON object." };
-    }
-    return {
-      body: JSON.stringify({ ...parsed, model }, null, 2),
-      error: null,
-    };
-  } catch {
-    return { body, error: "Request body must be valid JSON before changing the replay model." };
-  }
-}
-
-export function buildReplayMetrics(input: {
-  status: number | null | undefined;
-  elapsedMs: number | null | undefined;
-  inputTokens: number | null | undefined;
-  outputTokens: number | null | undefined;
-  responseText: string | null | undefined;
-  streaming: boolean | null | undefined;
-}): ReplayMetrics {
-  return {
-    status: input.status ?? null,
-    elapsedMs: input.elapsedMs ?? null,
-    inputTokens: input.inputTokens ?? null,
-    outputTokens: input.outputTokens ?? null,
-    responseBytes: byteLength(input.responseText),
-    streaming: input.streaming === true,
-  };
-}
-
-function numericDelta(original: number | null, replay: number | null): number | null {
-  if (original === null || replay === null) return null;
-  return replay - original;
-}
-
-export function buildReplayComparisons(
-  original: ReplayMetrics,
-  replay: ReplayMetrics,
-): ReplayMetricComparison[] {
-  return [
-    {
-      id: "status",
-      label: "Status",
-      original: original.status,
-      replay: replay.status,
-      delta: numericDelta(original.status, replay.status),
-    },
-    {
-      id: "elapsed",
-      label: "Elapsed",
-      original: original.elapsedMs,
-      replay: replay.elapsedMs,
-      delta: numericDelta(original.elapsedMs, replay.elapsedMs),
-    },
-    {
-      id: "input",
-      label: "Input",
-      original: original.inputTokens,
-      replay: replay.inputTokens,
-      delta: numericDelta(original.inputTokens, replay.inputTokens),
-    },
-    {
-      id: "output",
-      label: "Output",
-      original: original.outputTokens,
-      replay: replay.outputTokens,
-      delta: numericDelta(original.outputTokens, replay.outputTokens),
-    },
-    {
-      id: "bytes",
-      label: "Bytes",
-      original: original.responseBytes,
-      replay: replay.responseBytes,
-      delta: numericDelta(original.responseBytes, replay.responseBytes),
-    },
-    {
-      id: "streaming",
-      label: "Stream",
-      original: original.streaming,
-      replay: replay.streaming,
-      delta: null,
-    },
-  ];
-}