@tonyclaw/agent-inspector 3.0.23 → 3.0.24

package/src/components/ProxyViewer.tsx

@@ -12,6 +12,7 @@ import {
   Suspense,
 } from "react";
 import {
+  ALargeSmall,
   ArrowDownRight,
   ArrowLeft,
   ArrowUpRight,
@@ -25,6 +26,7 @@ import {
   ChevronsRight,
   Copy,
   Download,
+  Eye,
   FileJson,
   Gauge,
   Flag,
@@ -34,6 +36,8 @@ import {
   RefreshCw,
   Search,
   Siren,
+  Moon,
+  Sun,
   Timer,
   Trash2,
   Upload,
@@ -47,11 +51,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";
@@ -70,7 +86,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 { 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 +123,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 +133,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 +167,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 +176,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 +309,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 +557,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 +882,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 +1005,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 +1041,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} />
@@ -2049,6 +1719,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 +2005,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"}
@@ -2352,7 +2025,7 @@ export function ProxyViewer({
           "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 +2036,9 @@ export function ProxyViewer({
                 crabEntrancePhase={crabEntrancePhase}
                 currentSessionId={labSessionId}
                 logCount={logs.length}
+                uiScalePreference={uiScalePreference}
+                resolvedUiScale={resolvedUiScale}
+                onUiScaleChange={setUiScalePreference}
               />
 
               <SidebarPanel label="Session">