@tonyclaw/agent-inspector 3.0.23 → 3.0.25

package/src/lib/useUiScale.ts

@@ -0,0 +1,52 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+  applyUiScalePreference,
+  normalizeUiScalePreference,
+  persistUiScalePreference,
+  readStoredUiScalePreference,
+  UI_SCALE_STORAGE_KEY,
+  type UiScalePreference,
+} from "./uiScale";
+
+export function useUiScale(): {
+  uiScalePreference: UiScalePreference;
+  resolvedUiScale: number;
+  setUiScalePreference: (preference: UiScalePreference) => void;
+} {
+  const [uiScalePreference, setUiScalePreferenceState] = useState<UiScalePreference>(
+    readStoredUiScalePreference,
+  );
+  const [resolvedUiScale, setResolvedUiScale] = useState(1);
+
+  const setUiScalePreference = useCallback((nextPreference: UiScalePreference) => {
+    setUiScalePreferenceState(nextPreference);
+    persistUiScalePreference(nextPreference);
+    setResolvedUiScale(applyUiScalePreference(nextPreference));
+  }, []);
+
+  useEffect(() => {
+    const refreshScale = (): void => {
+      setResolvedUiScale(applyUiScalePreference(uiScalePreference));
+    };
+
+    refreshScale();
+    if (uiScalePreference !== "auto") return;
+
+    window.addEventListener("resize", refreshScale);
+    return () => window.removeEventListener("resize", refreshScale);
+  }, [uiScalePreference]);
+
+  useEffect(() => {
+    const handleStorage = (event: StorageEvent): void => {
+      if (event.key !== UI_SCALE_STORAGE_KEY) return;
+      const nextPreference = normalizeUiScalePreference(event.newValue);
+      setUiScalePreferenceState(nextPreference);
+      setResolvedUiScale(applyUiScalePreference(nextPreference));
+    };
+
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  }, []);
+
+  return { uiScalePreference, resolvedUiScale, setUiScalePreference };
+}

package/src/routes/__root.tsx

@@ -5,6 +5,81 @@ import { SWRConfig } from "swr";
 import faviconSvg from "../assets/favicon.svg?url";
 import appCss from "../index.css?url";
 import { installChunkLoadRecovery } from "../lib/chunkLoadRecovery";
+import { THEME_MODE_STORAGE_KEY } from "../lib/themeMode";
+import {
+  UI_SCALE_AUTO_LARGE_WIDTH,
+  UI_SCALE_AUTO_MAX_DPR,
+  UI_SCALE_AUTO_MEDIUM_WIDTH,
+  UI_SCALE_STORAGE_KEY,
+} from "../lib/uiScale";
+
+const themeModeBootstrapScript = `
+(function () {
+  try {
+    var storedThemeMode = window.localStorage.getItem("${THEME_MODE_STORAGE_KEY}");
+    var themeMode = storedThemeMode === "light" || storedThemeMode === "eye-care"
+      ? storedThemeMode
+      : "dark";
+    var 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";
+  } catch (error) {
+    document.documentElement.classList.add("dark");
+    document.documentElement.classList.remove("eye-care");
+    document.documentElement.dataset.theme = "dark";
+    document.documentElement.style.colorScheme = "dark";
+  }
+})();
+`;
+
+const uiScaleBootstrapScript = `
+(function () {
+  try {
+    var storedUiScale = window.localStorage.getItem("${UI_SCALE_STORAGE_KEY}");
+    var uiScalePreference = storedUiScale === "100" || storedUiScale === "125" || storedUiScale === "150"
+      ? storedUiScale
+      : "auto";
+    var resolvedUiScale = 1;
+    if (uiScalePreference === "125") resolvedUiScale = 1.25;
+    if (uiScalePreference === "150") resolvedUiScale = 1.5;
+    if (uiScalePreference === "auto") {
+      var viewportWidth = Number.isFinite(window.innerWidth) && window.innerWidth > 0
+        ? window.innerWidth
+        : 1280;
+      var rawScreenWidth = typeof window.screen === "undefined"
+        ? viewportWidth
+        : window.screen.availWidth;
+      var screenWidth = Number.isFinite(rawScreenWidth) && rawScreenWidth > 0
+        ? rawScreenWidth
+        : viewportWidth;
+      var rawDevicePixelRatio = window.devicePixelRatio;
+      var devicePixelRatio = Number.isFinite(rawDevicePixelRatio) && rawDevicePixelRatio > 0
+        ? rawDevicePixelRatio
+        : 1;
+      var availableWidth = Math.min(viewportWidth, screenWidth);
+      if (devicePixelRatio <= ${String(UI_SCALE_AUTO_MAX_DPR)} && availableWidth >= ${String(UI_SCALE_AUTO_LARGE_WIDTH)}) {
+        resolvedUiScale = 1.25;
+      } else if (devicePixelRatio <= ${String(UI_SCALE_AUTO_MAX_DPR)} && availableWidth >= ${String(UI_SCALE_AUTO_MEDIUM_WIDTH)}) {
+        resolvedUiScale = 1.125;
+      }
+    }
+    var root = document.documentElement;
+    root.dataset.uiScale = uiScalePreference;
+    root.dataset.uiScaleResolved = String(Math.round(resolvedUiScale * 100));
+    root.style.setProperty("--inspector-ui-scale", String(resolvedUiScale));
+    root.style.setProperty("--inspector-root-font-size", String(16 * resolvedUiScale) + "px");
+    root.style.setProperty("--inspector-font-9", String(9 * resolvedUiScale) + "px");
+    root.style.setProperty("--inspector-font-10", String(10 * resolvedUiScale) + "px");
+    root.style.setProperty("--inspector-font-11", String(11 * resolvedUiScale) + "px");
+    root.style.setProperty("--inspector-font-13", String(13 * resolvedUiScale) + "px");
+  } catch (error) {
+    document.documentElement.dataset.uiScale = "auto";
+    document.documentElement.dataset.uiScaleResolved = "100";
+  }
+})();
+`;
 
 export const Route = createRootRoute({
   head: () => ({
@@ -60,8 +135,10 @@ function RootNotFoundComponent() {
 
 function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
   return (
-    <html lang="en" className="dark" suppressHydrationWarning={true}>
+    <html lang="en" className="dark" data-theme="dark" suppressHydrationWarning={true}>
       <head>
+        <script dangerouslySetInnerHTML={{ __html: themeModeBootstrapScript }} />
+        <script dangerouslySetInnerHTML={{ __html: uiScaleBootstrapScript }} />
         <HeadContent />
       </head>
       <body suppressHydrationWarning={true}>

package/styles/globals.css

@@ -3,6 +3,7 @@
 @plugin "@tailwindcss/typography";
 
 @custom-variant dark (&:is(.dark *));
+@custom-variant eye-care (&:is(.eye-care *));
 
 @theme inline {
   --color-background: var(--background);
@@ -50,37 +51,51 @@
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --inspector-ui-scale: 1;
+  --inspector-root-font-size: 16px;
+  --inspector-font-9: 9px;
+  --inspector-font-10: 10px;
+  --inspector-font-11: 11px;
+  --inspector-font-13: 13px;
+  --inspector-surface-low: color-mix(in oklch, var(--foreground) 3.5%, transparent);
+  --inspector-surface-medium: color-mix(in oklch, var(--foreground) 6%, transparent);
+  --inspector-status-cool: oklch(0.42 0.12 225);
+  --inspector-status-info: oklch(0.42 0.15 265);
+  --inspector-status-success: oklch(0.4 0.11 158);
+  --inspector-status-watch: oklch(0.42 0.12 65);
+  --inspector-status-danger: oklch(0.44 0.18 25);
+  --inspector-status-accent: oklch(0.42 0.14 295);
+  --background: oklch(0.976 0.004 250);
+  --foreground: oklch(0.18 0.012 255);
+  --card: oklch(0.995 0.002 250);
+  --card-foreground: oklch(0.18 0.012 255);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.18 0.012 255);
+  --primary: oklch(0.27 0.018 255);
   --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --secondary: oklch(0.935 0.007 250);
+  --secondary-foreground: oklch(0.24 0.018 255);
+  --muted: oklch(0.925 0.006 250);
+  --muted-foreground: oklch(0.46 0.018 255);
+  --accent: oklch(0.91 0.018 235);
+  --accent-foreground: oklch(0.24 0.035 240);
+  --destructive: oklch(0.5 0.2 27);
+  --border: oklch(0.85 0.01 250);
+  --input: oklch(0.78 0.015 250);
+  --ring: oklch(0.48 0.11 230);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar: oklch(0.955 0.006 250);
+  --sidebar-foreground: oklch(0.18 0.012 255);
+  --sidebar-primary: oklch(0.27 0.018 255);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-accent: oklch(0.91 0.018 235);
+  --sidebar-accent-foreground: oklch(0.24 0.035 240);
+  --sidebar-border: oklch(0.85 0.01 250);
+  --sidebar-ring: oklch(0.48 0.11 230);
 }
 
 .dark {
@@ -117,6 +132,46 @@
   --sidebar-ring: oklch(0.556 0 0);
 }
 
+.eye-care {
+  --inspector-status-cool: oklch(0.38 0.08 195);
+  --inspector-status-info: oklch(0.4 0.12 270);
+  --inspector-status-success: oklch(0.36 0.1 155);
+  --inspector-status-watch: oklch(0.39 0.1 65);
+  --inspector-status-danger: oklch(0.41 0.16 25);
+  --inspector-status-accent: oklch(0.4 0.12 295);
+  --background: oklch(0.932 0.018 135);
+  --foreground: oklch(0.22 0.03 150);
+  --card: oklch(0.975 0.012 132);
+  --card-foreground: oklch(0.22 0.03 150);
+  --popover: oklch(0.985 0.01 132);
+  --popover-foreground: oklch(0.22 0.03 150);
+  --primary: oklch(0.36 0.09 154);
+  --primary-foreground: oklch(0.985 0.006 125);
+  --secondary: oklch(0.875 0.028 135);
+  --secondary-foreground: oklch(0.26 0.04 150);
+  --muted: oklch(0.885 0.022 132);
+  --muted-foreground: oklch(0.4 0.04 150);
+  --accent: oklch(0.84 0.045 148);
+  --accent-foreground: oklch(0.25 0.055 151);
+  --destructive: oklch(0.47 0.17 28);
+  --border: oklch(0.76 0.028 132);
+  --input: oklch(0.7 0.034 132);
+  --ring: oklch(0.42 0.1 154);
+  --chart-1: oklch(0.49 0.11 153);
+  --chart-2: oklch(0.55 0.1 226);
+  --chart-3: oklch(0.67 0.13 77);
+  --chart-4: oklch(0.56 0.11 307);
+  --chart-5: oklch(0.58 0.15 25);
+  --sidebar: oklch(0.9 0.024 135);
+  --sidebar-foreground: oklch(0.22 0.03 150);
+  --sidebar-primary: oklch(0.36 0.09 154);
+  --sidebar-primary-foreground: oklch(0.985 0.006 125);
+  --sidebar-accent: oklch(0.84 0.045 148);
+  --sidebar-accent-foreground: oklch(0.25 0.055 151);
+  --sidebar-border: oklch(0.76 0.028 132);
+  --sidebar-ring: oklch(0.42 0.1 154);
+}
+
 @keyframes crab-crawl-down {
   0%, 100% {
     transform: translateY(0px);
@@ -195,12 +250,80 @@
   }
 }
 
+@keyframes inspector-pet-watch {
+  0%,
+  100% {
+    filter: brightness(1);
+  }
+  50% {
+    filter: brightness(1.16) drop-shadow(0 0 8px rgb(34 211 238 / 0.22));
+  }
+}
+
+@keyframes inspector-pet-attention {
+  0%,
+  82%,
+  100% {
+    transform: rotate(0deg);
+  }
+  88% {
+    transform: rotate(-4deg);
+  }
+  94% {
+    transform: rotate(4deg);
+  }
+}
+
+@keyframes inspector-pet-sleep {
+  0%,
+  100% {
+    opacity: 0.72;
+    transform: translateY(0) scale(0.98);
+  }
+  50% {
+    opacity: 0.9;
+    transform: translateY(1px) scale(1);
+  }
+}
+
+@keyframes inspector-pet-pat {
+  0%,
+  100% {
+    transform: translateY(0) rotate(0deg) scale(1);
+  }
+  45% {
+    transform: translateY(-5px) rotate(4deg) scale(1.08);
+  }
+  72% {
+    transform: translateY(1px) rotate(-2deg) scale(1.02);
+  }
+}
+
+@keyframes inspector-pet-heart {
+  0% {
+    opacity: 0;
+    transform: translateY(3px) scale(0.65);
+  }
+  35% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-11px) scale(1.05);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .animate-crab-piano-pop {
     animation: none !important;
   }
   .floating-crab-body,
-  .floating-crab-leg {
+  .floating-crab-leg,
+  .inspector-pet-active,
+  .inspector-pet-attention,
+  .inspector-pet-sleeping,
+  .inspector-pet-patted,
+  .inspector-pet-heart {
     animation: none !important;
   }
 }
@@ -217,6 +340,7 @@
     @apply border-border outline-ring/50;
   }
   html {
+    font-size: var(--inspector-root-font-size);
     scrollbar-color: color-mix(in srgb, var(--muted-foreground) 32%, transparent) transparent;
     scrollbar-width: thin;
   }
@@ -239,6 +363,22 @@
 }
 
 @layer utilities {
+  [class~="text-[9px]"] {
+    font-size: var(--inspector-font-9);
+  }
+
+  [class~="text-[10px]"] {
+    font-size: var(--inspector-font-10);
+  }
+
+  [class~="text-[11px]"] {
+    font-size: var(--inspector-font-11);
+  }
+
+  [class~="text-[13px]"] {
+    font-size: var(--inspector-font-13);
+  }
+
   .floating-crab-body {
     animation: var(--animate-crab-short-leg-body);
     transform-origin: 50% 74%;
@@ -259,6 +399,35 @@
     --crab-leg-step: -14deg;
   }
 
+  .inspector-pet-active {
+    animation: inspector-pet-watch 1.25s ease-in-out infinite;
+  }
+
+  .inspector-pet-attention {
+    animation: inspector-pet-attention 2.4s ease-in-out infinite;
+  }
+
+  .inspector-pet-sleeping {
+    animation: inspector-pet-sleep 3.6s ease-in-out infinite;
+  }
+
+  .inspector-pet-patted {
+    animation: inspector-pet-pat 720ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  .inspector-pet-heart {
+    animation: inspector-pet-heart 720ms ease-out forwards;
+  }
+
+  [data-pet-mood="active"] .floating-crab-leg {
+    animation-duration: 260ms;
+  }
+
+  [data-pet-mood="sleeping"] .floating-crab-leg {
+    animation-duration: 1.8s;
+    opacity: 0.3;
+  }
+
   .inspector-scrollbar {
     scrollbar-color: color-mix(in srgb, var(--muted-foreground) 32%, transparent) transparent;
     scrollbar-width: thin;
@@ -284,4 +453,214 @@
     background: color-mix(in srgb, var(--muted-foreground) 42%, transparent);
     background-clip: content-box;
   }
+
+  /* Legacy surfaces were tuned against a dark canvas. Keep them theme-aware while
+     components migrate to semantic color utilities. */
+  :root:not(.dark)
+    :is(
+      [class~="bg-white/[0.008]"],
+      [class~="bg-white/[0.025]"],
+      [class~="bg-white/[0.028]"],
+      [class~="bg-white/[0.03]"],
+      [class~="bg-white/[0.035]"],
+      [class~="bg-white/[0.04]"],
+      [class~="bg-white/[0.045]"]
+    ) {
+    background-color: var(--inspector-surface-low);
+  }
+
+  :root:not(.dark)
+    :is(
+      [class~="bg-white/[0.055]"],
+      [class~="bg-white/[0.06]"],
+      [class~="bg-white/[0.065]"],
+      [class~="bg-white/[0.07]"],
+      [class~="bg-white/[0.075]"],
+      [class~="bg-white/10"],
+      [class~="bg-black/[0.10]"],
+      [class~="bg-black/[0.14]"],
+      [class~="bg-black/[0.16]"],
+      [class~="bg-black/[0.18]"],
+      [class~="bg-black/10"],
+      [class~="bg-black/15"],
+      [class~="bg-black/20"],
+      [class~="bg-black/25"],
+      [class~="bg-black/30"],
+      [class~="bg-black/40"]
+    ) {
+    background-color: var(--inspector-surface-medium);
+  }
+
+  :root:not(.dark)
+    :is(
+      [class~="border-white/[0.045]"],
+      [class~="border-white/[0.055]"],
+      [class~="border-white/[0.08]"],
+      [class~="border-white/[0.16]"],
+      [class~="border-white/10"]
+    ) {
+    border-color: color-mix(in oklch, var(--foreground) 12%, transparent);
+  }
+
+  :root:not(.dark)
+    :is(
+      [class~="hover:bg-white/[0.03]"],
+      [class~="hover:bg-white/[0.035]"],
+      [class~="hover:bg-white/[0.04]"],
+      [class~="hover:bg-white/[0.045]"],
+      [class~="hover:bg-white/[0.06]"],
+      [class~="hover:bg-white/[0.065]"],
+      [class~="hover:bg-white/[0.07]"],
+      [class~="hover:bg-white/[0.075]"],
+      [class~="hover:bg-white/10"]
+    ):hover {
+    background-color: color-mix(in oklch, var(--foreground) 9%, transparent);
+  }
+
+  :root:not(.dark)
+    :is(
+      [class~="text-white/35"],
+      [class~="text-white/40"],
+      [class~="text-white/45"],
+      [class~="text-white/50"],
+      [class~="text-white/55"],
+      [class~="text-white/60"],
+      [class~="text-slate-300"]
+    ) {
+    color: var(--muted-foreground);
+  }
+
+  :root:not(.dark)
+    :is(
+      [class~="text-white/75"],
+      [class~="text-slate-50"],
+      [class~="text-slate-100"],
+      [class~="text-slate-200"],
+      [class~="text-zinc-50"],
+      [class~="text-zinc-100"]
+    ) {
+    color: var(--foreground);
+  }
+
+  :root:not(.dark) [class~="bg-zinc-950"] {
+    background-color: var(--popover);
+  }
+
+  :root:not(.dark) [class*="shadow-[inset_0_0_0_1px_rgba(255,255,255"] {
+    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent) !important;
+  }
+
+  :root:not(.dark) [class*="shadow-[inset_0_1px_0_rgba(255,255,255"] {
+    box-shadow:
+      inset 0 1px 0 color-mix(in oklch, var(--foreground) 10%, transparent),
+      0 8px 24px color-mix(in oklch, var(--foreground) 8%, transparent) !important;
+  }
+
+  :root:not(.dark)
+    :is(
+      [class~="text-cyan-100"],
+      [class~="text-cyan-100/70"],
+      [class~="text-cyan-100/75"],
+      [class~="text-cyan-200"],
+      [class~="text-cyan-200/75"],
+      [class~="text-cyan-200/80"],
+      [class~="text-cyan-300"],
+      [class~="text-cyan-400"],
+      [class~="text-sky-100"],
+      [class~="text-sky-200"],
+      [class~="text-sky-300"],
+      [class~="text-sky-300/70"],
+      [class~="text-sky-300/80"],
+      [class~="text-sky-400/65"],
+      [class~="text-sky-400/70"],
+      [class~="text-sky-400/80"]
+    ) {
+    color: var(--inspector-status-cool);
+  }
+
+  :root:not(.dark)
+    :is(
+      [class~="text-blue-300"],
+      [class~="text-blue-300/85"],
+      [class~="text-blue-400"],
+      [class~="text-blue-400/80"]
+    ) {
+    color: var(--inspector-status-info);
+  }
+
+  :root:not(.dark)
+    :is(
+      [class~="text-emerald-100"],
+      [class~="text-emerald-200"],
+      [class~="text-emerald-300"],
+      [class~="text-emerald-300/90"],
+      [class~="text-emerald-400"],
+      [class~="text-emerald-400/50"],
+      [class~="text-green-300"],
+      [class~="text-green-400"],
+      [class~="text-teal-300"]
+    ) {
+    color: var(--inspector-status-success);
+  }
+
+  :root:not(.dark)
+    :is(
+      [class~="text-amber-100"],
+      [class~="text-amber-100/90"],
+      [class~="text-amber-200"],
+      [class~="text-amber-300"],
+      [class~="text-amber-300/80"],
+      [class~="text-amber-400"],
+      [class~="text-amber-400/80"]
+    ) {
+    color: var(--inspector-status-watch);
+  }
+
+  :root:not(.dark)
+    :is(
+      [class~="text-red-100"],
+      [class~="text-red-200"],
+      [class~="text-red-200/80"],
+      [class~="text-red-300"],
+      [class~="text-red-400"],
+      [class~="text-rose-100"],
+      [class~="text-rose-300"],
+      [class~="text-rose-300/90"],
+      [class~="text-rose-400"]
+    ) {
+    color: var(--inspector-status-danger);
+  }
+
+  :root:not(.dark)
+    :is(
+      [class~="text-violet-100"],
+      [class~="text-violet-200"],
+      [class~="text-violet-300"],
+      [class~="text-purple-300"],
+      [class~="text-purple-400"],
+      [class~="text-purple-400/90"]
+    ) {
+    color: var(--inspector-status-accent);
+  }
+
+  :root:not(.dark)
+    :is(
+      [class~="hover:text-cyan-100"],
+      [class~="hover:text-cyan-200"],
+      [class~="hover:text-cyan-300"],
+      [class~="hover:text-sky-100"],
+      [class~="hover:text-sky-300"]
+    ):hover {
+    color: var(--inspector-status-cool);
+  }
+
+  :root:not(.dark)
+    :is(
+      [class~="text-amber-500"]:not(svg),
+      [class~="text-emerald-500"]:not(svg),
+      [class~="text-green-500"]:not(svg),
+      [class~="text-rose-500"]:not(svg)
+    ) {
+    color: var(--foreground);
+  }
 }