@tonyclaw/agent-inspector 3.0.23 → 3.0.25

package/src/components/ProxyViewer.tsx

@@ -1,8 +1,6 @@
 import {
   type ChangeEvent,
-  type CSSProperties,
   type JSX,
-  type PointerEvent as ReactPointerEvent,
   type ReactNode,
   useCallback,
   useEffect,
@@ -12,6 +10,7 @@ import {
   Suspense,
 } from "react";
 import {
+  ALargeSmall,
   ArrowDownRight,
   ArrowLeft,
   ArrowUpRight,
@@ -25,6 +24,7 @@ import {
   ChevronsRight,
   Copy,
   Download,
+  Eye,
   FileJson,
   Gauge,
   Flag,
@@ -34,6 +34,8 @@ import {
   RefreshCw,
   Search,
   Siren,
+  Moon,
+  Sun,
   Timer,
   Trash2,
   Upload,
@@ -47,11 +49,23 @@ 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 { useThemeMode } from "../lib/useThemeMode";
+import { formatUiScale, normalizeUiScalePreference, type UiScalePreference } from "../lib/uiScale";
+import { useUiScale } from "../lib/useUiScale";
 import { useProviders } from "../lib/useProviders";
 import packageJson from "../../package.json";
 import { groupLogsByConversation, type ConversationGroupData } from "./proxy-viewer";
+import {
+  buildSessionSlateStats,
+  formatPaginationStatus,
+  getExportActionVisibility,
+  resolveSessionContextScope,
+  type SessionContextScope,
+  type SessionSlateMetricTone,
+  type SessionSlateStats,
+  type SessionSlateStatus,
+} from "./proxy-viewer/proxyViewerLogic";
 
 import { CrabLogo } from "./ui/crab-logo";
 import { crabVariants } from "./ui/crab-variants";
@@ -65,12 +79,13 @@ import { AlertsDialog } from "./alerts/AlertsDialog";
 import { GroupsDialog } from "./groups/GroupsDialog";
 import { SettingsDialog } from "./providers/SettingsDialog";
 import { AgentLabDialog } from "./ecosystem/AgentLabDialog";
+import { InspectorPet } from "./inspector-pet/InspectorPet";
 import { PiAgentPanel } from "./pi-agent/PiAgentPanel";
 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 { buildTurnGroups, buildValidPredecessors } from "./proxy-viewer/viewerState";
+import { buildValidPredecessors } from "./proxy-viewer/viewerState";
 import { useKeyboardNavigation } from "./proxy-viewer/useKeyboardNavigation";
 import { SegmentBar } from "./proxy-viewer/anatomy/SegmentBar";
 import type {
@@ -107,26 +122,6 @@ function displayNumberForLog(
   return displayNumberByLogId.get(log.id) ?? log.id;
 }
 
-export function shouldShowRawExport(captureMode: CaptureMode): boolean {
-  return captureMode === "full";
-}
-
-export type ExportActionVisibility = {
-  redacted: boolean;
-  raw: boolean;
-};
-
-export function getExportActionVisibility(
-  captureMode: CaptureMode,
-  logCount: number,
-): ExportActionVisibility {
-  const hasLogs = logCount > 0;
-  return {
-    redacted: hasLogs,
-    raw: hasLogs && shouldShowRawExport(captureMode),
-  };
-}
-
 function computeTokenSummary(logs: CapturedLog[]): { totalIn: number; totalOut: number } {
   let totalIn = 0;
   let totalOut = 0;
@@ -137,12 +132,6 @@ function computeTokenSummary(logs: CapturedLog[]): { totalIn: number; totalOut:
   return { totalIn, totalOut };
 }
 
-export type SessionContextScope = {
-  label: string;
-  logs: CapturedLog[];
-  showBackLink: boolean;
-};
-
 export type SessionMembershipEvidence = {
   groupId: string;
   groupTitle: string;
@@ -177,13 +166,6 @@ export type SessionLoadProgress = {
   loadedPages: number;
 };
 
-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 getFirstUserAgent(logs: CapturedLog[]): string | null {
   for (const log of logs) {
     if (log.userAgent !== null && log.userAgent !== undefined && log.userAgent !== "") {
@@ -193,366 +175,11 @@ function getFirstUserAgent(logs: CapturedLog[]): string | null {
   return 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 {
-  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;
-}
-
-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 (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)}`,
-  };
+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 slateMetricToneClass(tone: SessionSlateMetricTone): string {
@@ -681,46 +308,6 @@ function SessionOpeningSlate({ stats }: { stats: SessionSlateStats }): JSX.Eleme
   );
 }
 
-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;
-}
-
 function formatPercent(value: number | null): string {
   if (value === null) return "Unknown";
   const percent = value * 100;
@@ -969,29 +556,6 @@ function SessionMembershipPanel({
   );
 }
 
-export function formatPaginationStatus({
-  logs,
-  pagination,
-}: {
-  logs: readonly CapturedLog[];
-  pagination: LogPaginationControls;
-}): 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})`;
-}
-
 function LogPaginationButton({
   label,
   title,
@@ -1317,16 +881,109 @@ function CrabFamily({
   );
 }
 
+function ThemeModeToggle(): JSX.Element {
+  const { themeMode, setThemeMode } = useThemeMode();
+
+  return (
+    <div
+      className="border-border/70 bg-muted/70 inline-flex h-8 items-center rounded-md border p-0.5 shadow-sm"
+      aria-label="Theme mode"
+      role="group"
+    >
+      <button
+        type="button"
+        onClick={() => setThemeMode("light")}
+        className={cn(
+          "inline-flex size-7 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground",
+          themeMode === "light" && "bg-background text-foreground shadow-sm",
+        )}
+        aria-label="Use light mode"
+        aria-pressed={themeMode === "light"}
+        title="Light mode"
+      >
+        <Sun className="size-3.5" />
+      </button>
+      <button
+        type="button"
+        onClick={() => setThemeMode("eye-care")}
+        className={cn(
+          "inline-flex size-7 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground",
+          themeMode === "eye-care" && "bg-background text-foreground shadow-sm",
+        )}
+        aria-label="Use eye care mode"
+        aria-pressed={themeMode === "eye-care"}
+        title="Eye care mode"
+      >
+        <Eye className="size-3.5" />
+      </button>
+      <button
+        type="button"
+        onClick={() => setThemeMode("dark")}
+        className={cn(
+          "inline-flex size-7 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground",
+          themeMode === "dark" && "bg-background text-foreground shadow-sm",
+        )}
+        aria-label="Use dark mode"
+        aria-pressed={themeMode === "dark"}
+        title="Dark mode"
+      >
+        <Moon className="size-3.5" />
+      </button>
+    </div>
+  );
+}
+
+function UiScaleControl({
+  preference,
+  resolvedScale,
+  onChange,
+}: {
+  preference: UiScalePreference;
+  resolvedScale: number;
+  onChange: (preference: UiScalePreference) => void;
+}): JSX.Element {
+  const resolvedLabel = formatUiScale(resolvedScale);
+  const currentLabel = preference === "auto" ? `Auto (${resolvedLabel})` : `${preference}%`;
+
+  return (
+    <Select
+      value={preference}
+      onValueChange={(value) => onChange(normalizeUiScalePreference(value))}
+    >
+      <SelectTrigger
+        size="sm"
+        className="bg-white/[0.035] hover:bg-white/[0.065] h-8 min-w-[4rem] justify-center gap-1 border-0 px-2 py-0 text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] [&>svg:last-child]:hidden"
+        aria-label={`Interface size: ${currentLabel}`}
+      >
+        <ALargeSmall className="size-3.5" />
+        <span className="font-mono text-[10px] font-semibold tabular-nums">{resolvedLabel}</span>
+      </SelectTrigger>
+      <SelectContent align="end">
+        <SelectItem value="auto">Auto</SelectItem>
+        <SelectItem value="100">100%</SelectItem>
+        <SelectItem value="125">125%</SelectItem>
+        <SelectItem value="150">150%</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}
+
 function BrandHeader({
   compact,
   crabEntrancePhase,
   currentSessionId,
   logCount,
+  uiScalePreference,
+  resolvedUiScale,
+  onUiScaleChange,
 }: {
   compact: boolean;
   crabEntrancePhase: "hidden" | "playing" | "done";
   currentSessionId: string | null;
   logCount: number;
+  uiScalePreference: UiScalePreference;
+  resolvedUiScale: number;
+  onUiScaleChange: (preference: UiScalePreference) => void;
 }): JSX.Element {
   if (compact) {
     return (
@@ -1347,6 +1004,12 @@ function BrandHeader({
             </div>
           </div>
           <div className="flex shrink-0 items-center gap-1">
+            <ThemeModeToggle />
+            <UiScaleControl
+              preference={uiScalePreference}
+              resolvedScale={resolvedUiScale}
+              onChange={onUiScaleChange}
+            />
             <AlertsDialog />
             <GroupsDialog />
             <AgentLabDialog currentSessionId={currentSessionId} logCount={logCount} />
@@ -1377,6 +1040,12 @@ function BrandHeader({
         </span>
       </h1>
       <div className="flex flex-1 justify-end gap-1">
+        <ThemeModeToggle />
+        <UiScaleControl
+          preference={uiScalePreference}
+          resolvedScale={resolvedUiScale}
+          onChange={onUiScaleChange}
+        />
         <AlertsDialog />
         <GroupsDialog />
         <AgentLabDialog currentSessionId={currentSessionId} logCount={logCount} />
@@ -1386,25 +1055,6 @@ function BrandHeader({
   );
 }
 
-type FloatingLogoPosition = {
-  x: number;
-  y: number;
-};
-
-type FloatingLogoDragState = {
-  pointerId: number;
-  offsetX: number;
-  offsetY: number;
-};
-
-type FloatingLogoEdge = "left" | "right" | "top" | "bottom";
-
-const FLOATING_LOGO_SIZE = 56;
-const FLOATING_LOGO_MARGIN = 14;
-const FLOATING_LOGO_MIN_DRIFT_MS = 5200;
-const FLOATING_LOGO_DRIFT_WINDOW_MS = 2400;
-const FLOATING_LOGO_MIN_STEP = 72;
-const FLOATING_LOGO_MAX_STEP = 156;
 const DETAILS_PANEL_COLLAPSED_STORAGE_KEY = "agent-inspector.detailsPanelCollapsed";
 
 function readStoredDetailsPanelCollapsed(): boolean {
@@ -1413,264 +1063,6 @@ function readStoredDetailsPanelCollapsed(): boolean {
   return stored === null || stored === "1";
 }
 
-function clampFloatingLogoPosition(position: FloatingLogoPosition): FloatingLogoPosition {
-  const maxX = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  const maxY = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  return {
-    x: Math.min(Math.max(position.x, FLOATING_LOGO_MARGIN), maxX),
-    y: Math.min(Math.max(position.y, FLOATING_LOGO_MARGIN), maxY),
-  };
-}
-
-function snapFloatingLogoToEdge(position: FloatingLogoPosition): FloatingLogoPosition {
-  const clamped = clampFloatingLogoPosition(position);
-  const maxX = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  const maxY = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  const leftDistance = clamped.x - FLOATING_LOGO_MARGIN;
-  const rightDistance = maxX - clamped.x;
-  const topDistance = clamped.y - FLOATING_LOGO_MARGIN;
-  const bottomDistance = maxY - clamped.y;
-  const nearestDistance = Math.min(leftDistance, rightDistance, topDistance, bottomDistance);
-
-  if (nearestDistance === leftDistance) return { x: FLOATING_LOGO_MARGIN, y: clamped.y };
-  if (nearestDistance === rightDistance) return { x: maxX, y: clamped.y };
-  if (nearestDistance === topDistance) return { x: clamped.x, y: FLOATING_LOGO_MARGIN };
-  return { x: clamped.x, y: maxY };
-}
-
-function randomFloatingLogoEdgePosition(): FloatingLogoPosition {
-  const maxX = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  const maxY = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  const randomX = FLOATING_LOGO_MARGIN + Math.random() * (maxX - FLOATING_LOGO_MARGIN);
-  const randomY = FLOATING_LOGO_MARGIN + Math.random() * (maxY - FLOATING_LOGO_MARGIN);
-  const edgeIndex = Math.floor(Math.random() * 4);
-
-  switch (edgeIndex) {
-    case 0:
-      return { x: FLOATING_LOGO_MARGIN, y: randomY };
-    case 1:
-      return { x: maxX, y: randomY };
-    case 2:
-      return { x: randomX, y: FLOATING_LOGO_MARGIN };
-    case 3:
-      return { x: randomX, y: maxY };
-    default:
-      return { x: maxX, y: FLOATING_LOGO_MARGIN };
-  }
-}
-
-function nearestFloatingLogoEdge(position: FloatingLogoPosition): FloatingLogoEdge {
-  const clamped = clampFloatingLogoPosition(position);
-  const maxX = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  const maxY = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  const distances: { edge: FloatingLogoEdge; distance: number }[] = [
-    { edge: "left", distance: clamped.x - FLOATING_LOGO_MARGIN },
-    { edge: "right", distance: maxX - clamped.x },
-    { edge: "top", distance: clamped.y - FLOATING_LOGO_MARGIN },
-    { edge: "bottom", distance: maxY - clamped.y },
-  ];
-  return distances.reduce((best, current) => (current.distance < best.distance ? current : best))
-    .edge;
-}
-
-function nextFloatingLogoWalkingPosition(position: FloatingLogoPosition): FloatingLogoPosition {
-  const clamped = snapFloatingLogoToEdge(position);
-  const maxX = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  const maxY = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  const step =
-    FLOATING_LOGO_MIN_STEP + Math.random() * (FLOATING_LOGO_MAX_STEP - FLOATING_LOGO_MIN_STEP);
-  const direction = Math.random() > 0.5 ? 1 : -1;
-  const edge = nearestFloatingLogoEdge(clamped);
-
-  switch (edge) {
-    case "left": {
-      const nextY = clamped.y + step * direction;
-      if (nextY <= FLOATING_LOGO_MARGIN)
-        return { x: FLOATING_LOGO_MARGIN, y: FLOATING_LOGO_MARGIN };
-      if (nextY >= maxY) return { x: FLOATING_LOGO_MARGIN, y: maxY };
-      return { x: FLOATING_LOGO_MARGIN, y: nextY };
-    }
-    case "right": {
-      const nextY = clamped.y + step * direction;
-      if (nextY <= FLOATING_LOGO_MARGIN) return { x: maxX, y: FLOATING_LOGO_MARGIN };
-      if (nextY >= maxY) return { x: maxX, y: maxY };
-      return { x: maxX, y: nextY };
-    }
-    case "top": {
-      const nextX = clamped.x + step * direction;
-      if (nextX <= FLOATING_LOGO_MARGIN)
-        return { x: FLOATING_LOGO_MARGIN, y: FLOATING_LOGO_MARGIN };
-      if (nextX >= maxX) return { x: maxX, y: FLOATING_LOGO_MARGIN };
-      return { x: nextX, y: FLOATING_LOGO_MARGIN };
-    }
-    case "bottom": {
-      const nextX = clamped.x + step * direction;
-      if (nextX <= FLOATING_LOGO_MARGIN) return { x: FLOATING_LOGO_MARGIN, y: maxY };
-      if (nextX >= maxX) return { x: maxX, y: maxY };
-      return { x: nextX, y: maxY };
-    }
-  }
-}
-
-function FloatingInspectorLogo(): JSX.Element {
-  const [position, setPosition] = useState<FloatingLogoPosition>({
-    x: FLOATING_LOGO_MARGIN,
-    y: FLOATING_LOGO_MARGIN,
-  });
-  const [motionTick, setMotionTick] = useState(0);
-  const [dragging, setDragging] = useState(false);
-  const dragStateRef = useRef<FloatingLogoDragState | null>(null);
-
-  useEffect(() => {
-    setPosition(randomFloatingLogoEdgePosition());
-  }, []);
-
-  useEffect(() => {
-    if (dragging) return undefined;
-    let timeoutId: number | null = null;
-
-    const scheduleDrift = () => {
-      const delay = FLOATING_LOGO_MIN_DRIFT_MS + Math.random() * FLOATING_LOGO_DRIFT_WINDOW_MS;
-      timeoutId = window.setTimeout(() => {
-        setMotionTick((current) => current + 1);
-        setPosition((current) => nextFloatingLogoWalkingPosition(current));
-        scheduleDrift();
-      }, delay);
-    };
-
-    scheduleDrift();
-    return () => {
-      if (timeoutId !== null) {
-        window.clearTimeout(timeoutId);
-      }
-    };
-  }, [dragging]);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setPosition((current) => snapFloatingLogoToEdge(current));
-    };
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  const handlePointerDown = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
-    const rect = event.currentTarget.getBoundingClientRect();
-    dragStateRef.current = {
-      pointerId: event.pointerId,
-      offsetX: event.clientX - rect.left,
-      offsetY: event.clientY - rect.top,
-    };
-    event.currentTarget.setPointerCapture(event.pointerId);
-    setDragging(true);
-  }, []);
-
-  const handlePointerMove = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
-    const dragState = dragStateRef.current;
-    if (dragState === null || dragState.pointerId !== event.pointerId) return;
-    setPosition(
-      clampFloatingLogoPosition({
-        x: event.clientX - dragState.offsetX,
-        y: event.clientY - dragState.offsetY,
-      }),
-    );
-  }, []);
-
-  const handlePointerUp = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
-    const dragState = dragStateRef.current;
-    if (dragState === null || dragState.pointerId !== event.pointerId) return;
-    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-    }
-    dragStateRef.current = null;
-    setDragging(false);
-    setPosition((current) => snapFloatingLogoToEdge(current));
-  }, []);
-
-  const style = useMemo<CSSProperties>(
-    () => ({
-      transform: `translate3d(${position.x}px, ${position.y}px, 0) rotate(${
-        motionTick % 2 === 0 ? "-4deg" : "5deg"
-      }) scale(${dragging ? "1.08" : "1"})`,
-      transition: dragging ? "none" : "transform 4800ms cubic-bezier(0.33, 1, 0.68, 1)",
-      touchAction: "none",
-    }),
-    [dragging, motionTick, position.x, position.y],
-  );
-
-  return (
-    <button
-      type="button"
-      className={cn(
-        "fixed left-0 top-0 z-40 flex size-14 items-center justify-center rounded-full bg-transparent text-foreground outline-none transition-[filter,opacity] duration-200 hover:opacity-95 hover:drop-shadow-[0_0_24px_rgba(245,158,11,0.36)] focus-visible:ring-1 focus-visible:ring-amber-300/55",
-        dragging ? "cursor-grabbing" : "cursor-grab",
-      )}
-      style={style}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-      onPointerCancel={handlePointerUp}
-      aria-label="Floating Inspector logo"
-      title="Drag Inspector logo"
-    >
-      <span
-        className={cn(
-          "relative flex size-12 items-center justify-center",
-          !dragging && "floating-crab-body",
-        )}
-        aria-hidden="true"
-      >
-        <CrabLogo className="relative z-10 size-11 text-amber-500 drop-shadow-[0_0_15px_rgba(245,158,11,0.30)]" />
-        <span className="pointer-events-none absolute inset-x-0 bottom-0 z-0 flex items-end justify-center gap-1 text-amber-400/80">
-          {[0, 1, 2, 3, 4, 5].map((leg) => (
-            <span
-              key={leg}
-              className={cn(
-                "floating-crab-leg h-2 w-0.5 rounded-full bg-current shadow-[0_0_7px_rgba(245,158,11,0.24)]",
-                leg < 3 ? "floating-crab-leg-left" : "floating-crab-leg-right",
-                dragging && "animate-none",
-              )}
-              style={{
-                animationDelay: `${leg % 2 === 0 ? 0 : 180}ms`,
-              }}
-            />
-          ))}
-        </span>
-      </span>
-    </button>
-  );
-}
-
 function SessionContextLogButton({ label, logId }: { label: string; logId: number }): JSX.Element {
   return (
     <button
@@ -2049,6 +1441,7 @@ export function ProxyViewer({
 }: ProxyViewerProps): JSX.Element {
   const { totalIn, totalOut } = useMemo(() => computeTokenSummary(logs), [logs]);
   const { providers } = useProviders();
+  const { uiScalePreference, resolvedUiScale, setUiScalePreference } = useUiScale();
   const [exporting, setExporting] = useState<ExportMode | null>(null);
   const [exportError, setExportError] = useState<string | null>(null);
   const [importing, setImporting] = useState(false);
@@ -2334,7 +1727,9 @@ export function ProxyViewer({
         onClick={toggleDetailsPanelCollapsed}
         className={cn(
           "group fixed top-1/2 right-3 z-40 inline-flex h-14 w-7 -translate-y-1/2 items-center justify-center rounded-l-md border border-white/[0.08] bg-background/90 text-muted-foreground shadow-[0_12px_34px_rgba(0,0,0,0.26),inset_0_1px_0_rgba(255,255,255,0.06)] backdrop-blur transition-[right,background-color,color,border-color] duration-200 hover:border-white/[0.16] hover:bg-white/[0.07] hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
-          detailsPanelCollapsed ? "right-3" : "lg:right-[326px] xl:right-[346px]",
+          detailsPanelCollapsed
+            ? "right-3"
+            : "lg:right-[calc(21.25rem-0.875rem)] xl:right-[calc(22.5rem-0.875rem)]",
         )}
         aria-label={detailsPanelCollapsed ? "Show details panel" : "Hide details panel"}
         title={detailsPanelCollapsed ? "Show details panel" : "Hide details panel"}
@@ -2346,13 +1741,13 @@ export function ProxyViewer({
           <PanelRightClose className="size-3.5" />
         )}
       </button>
-      {detailsPanelCollapsed && <FloatingInspectorLogo />}
+      {detailsPanelCollapsed && <InspectorPet logs={logs} />}
       <div
         className={cn(
           "grid w-full min-w-0 grid-cols-1 lg:min-h-0 lg:flex-1 lg:overflow-hidden",
           detailsPanelCollapsed
             ? "lg:grid-cols-[minmax(0,1fr)]"
-            : "lg:grid-cols-[minmax(0,1fr)_340px] xl:grid-cols-[minmax(0,1fr)_360px]",
+            : "lg:grid-cols-[minmax(0,1fr)_21.25rem] xl:grid-cols-[minmax(0,1fr)_22.5rem]",
         )}
       >
         {!detailsPanelCollapsed && (
@@ -2363,6 +1758,9 @@ export function ProxyViewer({
                 crabEntrancePhase={crabEntrancePhase}
                 currentSessionId={labSessionId}
                 logCount={logs.length}
+                uiScalePreference={uiScalePreference}
+                resolvedUiScale={resolvedUiScale}
+                onUiScaleChange={setUiScalePreference}
               />
 
               <SidebarPanel label="Session">