@tonyclaw/agent-inspector 3.0.22 → 3.0.24

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

@@ -0,0 +1,469 @@
+import type { CapturedLog } from "../../contracts";
+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 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 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/lib/themeMode.ts

@@ -0,0 +1,45 @@
+export type ThemeMode = "light" | "dark" | "eye-care";
+
+export const THEME_MODE_STORAGE_KEY = "agent-inspector.theme";
+
+export function normalizeThemeMode(value: string | null): ThemeMode {
+  switch (value) {
+    case "light":
+      return "light";
+    case "dark":
+      return "dark";
+    case "eye-care":
+      return "eye-care";
+    case null:
+      return "dark";
+    default:
+      return "dark";
+  }
+}
+
+export function applyThemeMode(themeMode: ThemeMode): void {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  root.classList.toggle("dark", themeMode === "dark");
+  root.classList.toggle("eye-care", themeMode === "eye-care");
+  root.dataset.theme = themeMode;
+  root.style.colorScheme = themeMode === "dark" ? "dark" : "light";
+}
+
+export function readStoredThemeMode(): ThemeMode {
+  if (typeof window === "undefined") return "dark";
+  try {
+    return normalizeThemeMode(window.localStorage.getItem(THEME_MODE_STORAGE_KEY));
+  } catch {
+    return "dark";
+  }
+}
+
+export function persistThemeMode(themeMode: ThemeMode): void {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(THEME_MODE_STORAGE_KEY, themeMode);
+  } catch {
+    // Local storage can be unavailable in hardened browser contexts.
+  }
+}

package/src/lib/uiScale.ts

@@ -0,0 +1,112 @@
+export type UiScalePreference = "auto" | "100" | "125" | "150";
+
+export type UiScaleEnvironment = {
+  viewportWidth: number;
+  screenWidth: number;
+  devicePixelRatio: number;
+};
+
+export const UI_SCALE_STORAGE_KEY = "agent-inspector.uiScale";
+export const UI_SCALE_AUTO_MAX_DPR = 1.25;
+export const UI_SCALE_AUTO_MEDIUM_WIDTH = 2200;
+export const UI_SCALE_AUTO_LARGE_WIDTH = 3000;
+
+function positiveFinite(value: number, fallback: number): number {
+  return Number.isFinite(value) && value > 0 ? value : fallback;
+}
+
+export function normalizeUiScalePreference(value: string | null): UiScalePreference {
+  switch (value) {
+    case "auto":
+      return "auto";
+    case "100":
+      return "100";
+    case "125":
+      return "125";
+    case "150":
+      return "150";
+    case null:
+      return "auto";
+    default:
+      return "auto";
+  }
+}
+
+export function resolveUiScale(
+  preference: UiScalePreference,
+  environment: UiScaleEnvironment,
+): number {
+  switch (preference) {
+    case "100":
+      return 1;
+    case "125":
+      return 1.25;
+    case "150":
+      return 1.5;
+    case "auto": {
+      const viewportWidth = positiveFinite(environment.viewportWidth, 1280);
+      const screenWidth = positiveFinite(environment.screenWidth, viewportWidth);
+      const devicePixelRatio = positiveFinite(environment.devicePixelRatio, 1);
+      const availableWidth = Math.min(viewportWidth, screenWidth);
+
+      // High-DPI laptops already receive operating-system scaling. Auto only
+      // enlarges spacious low-DPI desktop layouts, where dense telemetry is
+      // otherwise physically small.
+      if (devicePixelRatio > UI_SCALE_AUTO_MAX_DPR) return 1;
+      if (availableWidth >= UI_SCALE_AUTO_LARGE_WIDTH) return 1.25;
+      if (availableWidth >= UI_SCALE_AUTO_MEDIUM_WIDTH) return 1.125;
+      return 1;
+    }
+  }
+}
+
+export function formatUiScale(scale: number): string {
+  return `${Math.round(scale * 100)}%`;
+}
+
+export function readUiScaleEnvironment(): UiScaleEnvironment {
+  if (typeof window === "undefined") {
+    return { viewportWidth: 1280, screenWidth: 1280, devicePixelRatio: 1 };
+  }
+  const screenWidth =
+    typeof window.screen === "undefined" ? window.innerWidth : window.screen.availWidth;
+  return {
+    viewportWidth: window.innerWidth,
+    screenWidth,
+    devicePixelRatio: window.devicePixelRatio,
+  };
+}
+
+export function applyUiScalePreference(preference: UiScalePreference): number {
+  const scale = resolveUiScale(preference, readUiScaleEnvironment());
+  if (typeof document === "undefined") return scale;
+
+  const root = document.documentElement;
+  root.dataset.uiScale = preference;
+  root.dataset.uiScaleResolved = String(Math.round(scale * 100));
+  root.style.setProperty("--inspector-ui-scale", String(scale));
+  root.style.setProperty("--inspector-root-font-size", `${String(16 * scale)}px`);
+  root.style.setProperty("--inspector-font-9", `${String(9 * scale)}px`);
+  root.style.setProperty("--inspector-font-10", `${String(10 * scale)}px`);
+  root.style.setProperty("--inspector-font-11", `${String(11 * scale)}px`);
+  root.style.setProperty("--inspector-font-13", `${String(13 * scale)}px`);
+  return scale;
+}
+
+export function readStoredUiScalePreference(): UiScalePreference {
+  if (typeof window === "undefined") return "auto";
+  try {
+    return normalizeUiScalePreference(window.localStorage.getItem(UI_SCALE_STORAGE_KEY));
+  } catch {
+    return "auto";
+  }
+}
+
+export function persistUiScalePreference(preference: UiScalePreference): void {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(UI_SCALE_STORAGE_KEY, preference);
+  } catch {
+    // Local storage can be unavailable in hardened browser contexts.
+  }
+}

package/src/lib/useThemeMode.ts

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+  applyThemeMode,
+  normalizeThemeMode,
+  persistThemeMode,
+  readStoredThemeMode,
+  THEME_MODE_STORAGE_KEY,
+  type ThemeMode,
+} from "./themeMode";
+
+export function useThemeMode(): {
+  themeMode: ThemeMode;
+  setThemeMode: (themeMode: ThemeMode) => void;
+} {
+  const [themeMode, setThemeModeState] = useState<ThemeMode>(readStoredThemeMode);
+
+  const setThemeMode = useCallback((nextThemeMode: ThemeMode) => {
+    setThemeModeState(nextThemeMode);
+    applyThemeMode(nextThemeMode);
+    persistThemeMode(nextThemeMode);
+  }, []);
+
+  useEffect(() => {
+    applyThemeMode(themeMode);
+  }, [themeMode]);
+
+  useEffect(() => {
+    function handleStorage(event: StorageEvent): void {
+      if (event.key !== THEME_MODE_STORAGE_KEY) return;
+      const nextThemeMode = normalizeThemeMode(event.newValue);
+      setThemeModeState(nextThemeMode);
+      applyThemeMode(nextThemeMode);
+    }
+
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  }, []);
+
+  return { themeMode, setThemeMode };
+}