react-os-shell 4.1.5 → 4.2.0

package/dist/index.js

@@ -15,8 +15,8 @@ export { ShellAuthProvider, setShellAuthBridge, useShellAuth } from './chunk-ADJ
 import { EditableGrid } from './chunk-GP4Y3VCB.js';
 export { EditableGrid } from './chunk-GP4Y3VCB.js';
 import './chunk-4SQU5YV6.js';
-import { APP_VERSION, VERSION } from './chunk-IMKD43E3.js';
-export { VERSION } from './chunk-IMKD43E3.js';
+import { APP_VERSION, VERSION } from './chunk-ITOOPTGP.js';
+export { VERSION } from './chunk-ITOOPTGP.js';
 import { registerModalEscapeInterceptor, useIsMobile, useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, WINDOW_REGISTRY, isPageEntry, Modal, useShellPrefs, SIDEBAR_STRIP_W, forgetMaximizedWindowBoxes, ModalActions, useModalActive, client_default, LoadingSpinner, isShellApiClientConfigured, CancelButton, setWindowPosition } from './chunk-URHWXWZE.js';
 export { CancelButton, ConfirmProvider, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, ShellPrefsProvider, WindowCrashedFallback, WindowErrorBoundary, WindowManagerProvider, WindowTitle, commitExposeHighlight, confirm, confirmDestructive, exitExposeMode, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, prompt, registerModalEscapeInterceptor, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useLocalStoragePrefs, useModalActive, useShellPrefs, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-URHWXWZE.js';
 import { glassStyle, startMenuCategories, navSections, isSection, GLASS_INPUT_BG, navIcons, isReachable, sectionIcons, visibleChildren } from './chunk-6Q4KYGMH.js';
@@ -506,22 +506,22 @@ function HelpCenter({
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto py-1", children: loading ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-xs text-gray-400", children: "Loading\u2026" }) : visibleGroups.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-xs text-gray-500", children: q ? "No articles match your search." : emptyMessage }) : visibleGroups.map((group) => {
-        const open = isGroupOpen(group.key);
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto py-1", children: loading ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-xs text-gray-400", children: "Loading\u2026" }) : visibleGroups.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-xs text-gray-500", children: q ? "No articles match your search." : emptyMessage }) : visibleGroups.map((group2) => {
+        const open = isGroupOpen(group2.key);
         return /* @__PURE__ */ jsxs("div", { className: "py-0.5", children: [
           /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
-              onClick: () => toggleGroup(group.key),
+              onClick: () => toggleGroup(group2.key),
               className: "w-full flex items-center gap-1.5 px-3 py-1.5 text-left text-[10px] font-semibold uppercase tracking-wide text-gray-400 hover:text-gray-600",
               children: [
                 /* @__PURE__ */ jsx(Chevron, { open }),
-                /* @__PURE__ */ jsx("span", { className: "truncate", children: group.label })
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: group2.label })
               ]
             }
           ),
-          open && group.docs.map((doc) => {
+          open && group2.docs.map((doc) => {
             const active = selected?.slug === doc.slug;
             return /* @__PURE__ */ jsxs(
               "button",
@@ -537,7 +537,7 @@ function HelpCenter({
               doc.slug
             );
           })
-        ] }, group.key);
+        ] }, group2.key);
       }) })
     ] }),
     /* @__PURE__ */ jsx("main", { className: "flex-1 min-w-0 bg-white rounded-lg shadow overflow-hidden flex flex-col", children: selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1183,8 +1183,8 @@ function StatusBadgeProvider({
 }
 function StatusBadge({ status }) {
   const groups = useContext(StatusGroupsContext);
-  const group = groups[status] ?? "neutral";
-  const color = GROUP_COLORS[group];
+  const group2 = groups[status] ?? "neutral";
+  const color = GROUP_COLORS[group2];
   const label = status.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
   return /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${color}`, children: label });
 }
@@ -1370,6 +1370,437 @@ function WidgetManager({ open, onClose }) {
   ] }) });
 }
 
+// src/shell/perfVerdict.ts
+var SMOOTH_FPS = 50;
+var BLOCKED_PCT_CPU = 20;
+var CPU_BOUND = {
+  kind: "cpu",
+  label: "CPU-bound (JavaScript)",
+  detail: "The main thread is blocked. Rendering settings will not help \u2014 this is script or data work."
+};
+function summariseFrames(timestamps) {
+  if (timestamps.length < 2) return { fps: 0, frameMs: 0, worstMs: 0 };
+  let worstMs = 0;
+  for (let i = 1; i < timestamps.length; i++) {
+    const delta = timestamps[i] - timestamps[i - 1];
+    if (delta > worstMs) worstMs = delta;
+  }
+  const spanMs = timestamps[timestamps.length - 1] - timestamps[0];
+  if (spanMs <= 0) return { fps: 0, frameMs: 0, worstMs: 0 };
+  const intervals = timestamps.length - 1;
+  return {
+    fps: intervals / spanMs * 1e3,
+    frameMs: spanMs / intervals,
+    worstMs
+  };
+}
+function classify(reading) {
+  const { fps, blockedPct } = reading;
+  const threadBlocked = blockedPct !== null && blockedPct >= BLOCKED_PCT_CPU;
+  if (!Number.isFinite(fps) || fps <= 0) {
+    if (threadBlocked) return CPU_BOUND;
+    return { kind: "unknown", label: "Measuring\u2026", detail: "Collecting frame timings." };
+  }
+  if (fps >= SMOOTH_FPS) {
+    return {
+      kind: "smooth",
+      label: "Smooth",
+      detail: "Frames are landing on time. No rendering bottleneck here."
+    };
+  }
+  if (blockedPct === null) {
+    return {
+      kind: "unknown",
+      label: "Janky \u2014 cause unknown",
+      detail: "This browser reports no long-task timing, so GPU and JS cannot be told apart. Try Chrome or Edge."
+    };
+  }
+  if (threadBlocked) return CPU_BOUND;
+  return {
+    kind: "gpu",
+    label: "GPU-bound (compositing)",
+    detail: "Frames are late while the main thread sits idle. Try Preferences \u2192 Customization \u2192 Reduce transparency."
+  };
+}
+
+// src/shell/perfLog.ts
+var LOG_CAP = 2400;
+var MIN_GROUP_SAMPLES = 4;
+function appendRecord(log, record, cap = LOG_CAP) {
+  const next = log.length >= cap ? log.slice(log.length - cap + 1) : log.slice();
+  next.push(record);
+  return next;
+}
+function isInteracting(r) {
+  return r.clicks > 0 || r.keys > 0 || r.scrolls > 0 || r.dragMs > 0;
+}
+function median(values) {
+  if (!values.length) return 0;
+  const sorted = values.slice().sort((a, b) => a - b);
+  const mid = Math.floor(sorted.length / 2);
+  return sorted.length % 2 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
+}
+function group(records) {
+  return { samples: records.length, medianFps: median(records.map((r) => r.fps)) };
+}
+function summariseLog(log) {
+  const empty = {
+    samples: 0,
+    durationMs: 0,
+    medianFps: 0,
+    worstFrameMs: 0,
+    verdictShare: { smooth: 0, gpu: 0, cpu: 0, unknown: 0 },
+    interacting: null,
+    idle: null,
+    byWindowCount: [],
+    worstWindows: []
+  };
+  if (!log.length) return empty;
+  const measured = log.filter((r) => r.fps > 0);
+  const verdictShare = { ...empty.verdictShare };
+  for (const r of log) verdictShare[r.verdict] += 1 / log.length;
+  const interacting = measured.filter(isInteracting);
+  const idle = measured.filter((r) => !isInteracting(r));
+  const byWindows = /* @__PURE__ */ new Map();
+  const byKey = /* @__PURE__ */ new Map();
+  for (const r of measured) {
+    const bucket = byWindows.get(r.windows);
+    if (bucket) bucket.push(r);
+    else byWindows.set(r.windows, [r]);
+    if (r.active) {
+      const keyed = byKey.get(r.active);
+      if (keyed) keyed.push(r);
+      else byKey.set(r.active, [r]);
+    }
+  }
+  return {
+    samples: log.length,
+    durationMs: log[log.length - 1].t - log[0].t,
+    medianFps: median(measured.map((r) => r.fps)),
+    worstFrameMs: log.reduce((worst, r) => r.worstMs > worst ? r.worstMs : worst, 0),
+    verdictShare,
+    interacting: interacting.length >= MIN_GROUP_SAMPLES ? group(interacting) : null,
+    idle: idle.length >= MIN_GROUP_SAMPLES ? group(idle) : null,
+    byWindowCount: [...byWindows.entries()].filter(([, rs]) => rs.length >= MIN_GROUP_SAMPLES).map(([windows, rs]) => ({ windows, ...group(rs) })).sort((a, b) => a.windows - b.windows),
+    worstWindows: [...byKey.entries()].filter(([, rs]) => rs.length >= MIN_GROUP_SAMPLES).map(([key, rs]) => ({ key, ...group(rs) })).sort((a, b) => a.medianFps - b.medianFps)
+  };
+}
+var CSV_COLUMNS = [
+  "t",
+  "fps",
+  "frameMs",
+  "worstMs",
+  "blockedPct",
+  "heapMB",
+  "verdict",
+  "windows",
+  "active",
+  "clicks",
+  "keys",
+  "scrolls",
+  "dragMs"
+];
+function toCsv(log) {
+  const cell = (value) => {
+    if (value === null || value === void 0) return "";
+    const text = typeof value === "number" ? String(Math.round(value * 10) / 10) : String(value);
+    return /[",\n]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
+  };
+  return [
+    CSV_COLUMNS.join(","),
+    ...log.map((r) => CSV_COLUMNS.map((c) => cell(r[c])).join(","))
+  ].join("\n");
+}
+var FLUSH_MS = 500;
+var WINDOW_MS = 1e3;
+var HISTORY = 40;
+var PERSIST_EVERY_MS = 1e4;
+var LOG_STORAGE_KEY = "react-os-shell:perf-log";
+var VERDICT_STYLES = {
+  smooth: { dot: "bg-emerald-400", text: "text-emerald-300" },
+  gpu: { dot: "bg-amber-400", text: "text-amber-300" },
+  cpu: { dot: "bg-sky-400", text: "text-sky-300" },
+  unknown: { dot: "bg-gray-400", text: "text-gray-300" }
+};
+function readWindows() {
+  if (typeof document === "undefined") return { windows: 0, active: null };
+  const panels = document.querySelectorAll("[data-modal-panel]");
+  let active = null;
+  let topZ = -Infinity;
+  panels.forEach((panel) => {
+    const z = parseInt(window.getComputedStyle(panel).zIndex, 10);
+    const rank = Number.isFinite(z) ? z : 0;
+    if (rank >= topZ) {
+      topZ = rank;
+      active = panel.dataset.windowKey ?? panel.dataset.modalId ?? null;
+    }
+  });
+  return { windows: panels.length, active };
+}
+function PerfStats({ onClose, className = "" }) {
+  const framesRef = useRef([]);
+  const blockedMsRef = useRef(0);
+  const activityRef = useRef({ clicks: 0, keys: 0, scrolls: 0, dragMs: 0 });
+  const dragRef = useRef({ down: false, since: 0 });
+  const logRef = useRef([]);
+  const startedAtRef = useRef(0);
+  const persistedAtRef = useRef(0);
+  const [longTaskSupported, setLongTaskSupported] = useState(false);
+  const [reading, setReading] = useState({ fps: 0, frameMs: 0, worstMs: 0, blockedPct: null });
+  const [history, setHistory] = useState([]);
+  const [heap, setHeap] = useState(null);
+  const [logSize, setLogSize] = useState(0);
+  useEffect(() => {
+    let raf = 0;
+    const tick = (now) => {
+      const frames = framesRef.current;
+      frames.push(now);
+      const cutoff = now - WINDOW_MS;
+      while (frames.length && frames[0] < cutoff) frames.shift();
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, []);
+  useEffect(() => {
+    if (typeof PerformanceObserver === "undefined") return;
+    let observer;
+    try {
+      observer = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) blockedMsRef.current += entry.duration;
+      });
+      observer.observe({ entryTypes: ["longtask"] });
+      setLongTaskSupported(true);
+    } catch {
+      return;
+    }
+    return () => observer?.disconnect();
+  }, []);
+  useEffect(() => {
+    const onPointerDown = () => {
+      activityRef.current.clicks++;
+      dragRef.current = { down: true, since: performance.now() };
+    };
+    const onPointerMove = () => {
+      if (!dragRef.current.down) return;
+      const now = performance.now();
+      activityRef.current.dragMs += now - dragRef.current.since;
+      dragRef.current.since = now;
+    };
+    const onPointerUp = () => {
+      dragRef.current.down = false;
+    };
+    const onKeyDown = () => {
+      activityRef.current.keys++;
+    };
+    const onWheel = () => {
+      activityRef.current.scrolls++;
+    };
+    const opts = { capture: true, passive: true };
+    window.addEventListener("pointerdown", onPointerDown, opts);
+    window.addEventListener("pointermove", onPointerMove, opts);
+    window.addEventListener("pointerup", onPointerUp, opts);
+    window.addEventListener("pointercancel", onPointerUp, opts);
+    window.addEventListener("keydown", onKeyDown, opts);
+    window.addEventListener("wheel", onWheel, opts);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown, opts);
+      window.removeEventListener("pointermove", onPointerMove, opts);
+      window.removeEventListener("pointerup", onPointerUp, opts);
+      window.removeEventListener("pointercancel", onPointerUp, opts);
+      window.removeEventListener("keydown", onKeyDown, opts);
+      window.removeEventListener("wheel", onWheel, opts);
+    };
+  }, []);
+  const persist = useCallback(() => {
+    try {
+      localStorage.setItem(LOG_STORAGE_KEY, JSON.stringify(logRef.current));
+    } catch {
+    }
+  }, []);
+  useEffect(() => {
+    const onHide = () => persist();
+    window.addEventListener("pagehide", onHide);
+    document.addEventListener("visibilitychange", onHide);
+    return () => {
+      window.removeEventListener("pagehide", onHide);
+      document.removeEventListener("visibilitychange", onHide);
+      persist();
+    };
+  }, [persist]);
+  useEffect(() => {
+    const id = setInterval(() => {
+      const now = performance.now();
+      if (!startedAtRef.current) startedAtRef.current = now;
+      const frames = summariseFrames(framesRef.current);
+      const blockedPct = longTaskSupported ? Math.min(100, blockedMsRef.current / FLUSH_MS * 100) : null;
+      blockedMsRef.current = 0;
+      const memory = performance.memory;
+      const heapMB = memory ? memory.usedJSHeapSize / 1048576 : null;
+      const nextReading = { ...frames, blockedPct };
+      const activity = activityRef.current;
+      const { windows, active } = readWindows();
+      logRef.current = appendRecord(logRef.current, {
+        t: Math.round(now - startedAtRef.current),
+        ...frames,
+        blockedPct,
+        heapMB,
+        verdict: classify(nextReading).kind,
+        windows,
+        active,
+        clicks: activity.clicks,
+        keys: activity.keys,
+        scrolls: activity.scrolls,
+        dragMs: Math.round(activity.dragMs)
+      });
+      activity.clicks = 0;
+      activity.keys = 0;
+      activity.scrolls = 0;
+      activity.dragMs = 0;
+      if (!persistedAtRef.current || now - persistedAtRef.current >= PERSIST_EVERY_MS) {
+        persistedAtRef.current = now;
+        persist();
+      }
+      setReading(nextReading);
+      setHistory((prev) => [...prev, frames.fps].slice(-HISTORY));
+      setHeap(memory ? { usedMB: memory.usedJSHeapSize / 1048576, limitMB: memory.jsHeapSizeLimit / 1048576 } : null);
+      setLogSize(logRef.current.length);
+    }, FLUSH_MS);
+    return () => clearInterval(id);
+  }, [longTaskSupported, persist]);
+  const download = useCallback((body, type, extension) => {
+    const stamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, 19);
+    const url = URL.createObjectURL(new Blob([body], { type }));
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `perf-log-${stamp}.${extension}`;
+    link.click();
+    URL.revokeObjectURL(url);
+  }, []);
+  const exportJson = useCallback(() => {
+    download(
+      JSON.stringify(
+        {
+          generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+          userAgent: navigator.userAgent,
+          screen: { width: window.screen.width, height: window.screen.height, dpr: window.devicePixelRatio },
+          reducedTransparency: document.documentElement.classList.contains("rosh-reduce-transparency"),
+          summary: summariseLog(logRef.current),
+          records: logRef.current
+        },
+        null,
+        2
+      ),
+      "application/json",
+      "json"
+    );
+  }, [download]);
+  const exportCsv = useCallback(() => download(toCsv(logRef.current), "text/csv", "csv"), [download]);
+  const verdict = classify(reading);
+  const styles = VERDICT_STYLES[verdict.kind];
+  const peak = Math.max(60, ...history);
+  const loggedSeconds = Math.round(logSize * FLUSH_MS / 1e3);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `w-56 rounded-lg border border-white/15 bg-[#11111b]/95 px-3 py-2 font-mono text-[10px] text-white/80 shadow-lg select-none ${className}`,
+      role: "status",
+      "aria-live": "off",
+      "aria-label": "Performance statistics",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[9px] uppercase tracking-wider text-white/40", children: "Performance" }),
+          onClose && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onClose,
+              className: "-mr-1 px-1 leading-none text-white/40 transition-colors hover:text-white/90",
+              "aria-label": "Hide performance statistics",
+              children: "\xD7"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
+          /* @__PURE__ */ jsxs("span", { className: `text-base font-semibold tabular-nums ${styles.text}`, children: [
+            reading.fps ? reading.fps.toFixed(0) : "\u2014",
+            /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] font-normal text-white/40", children: "fps" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums text-white/50", children: reading.frameMs ? `${reading.frameMs.toFixed(1)} ms` : "\u2014" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1.5 flex h-5 items-end gap-px", "aria-hidden": "true", children: Array.from({ length: HISTORY }, (_, i) => {
+          const value = history[history.length - HISTORY + i];
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `flex-1 rounded-sm ${value === void 0 ? "bg-white/5" : styles.dot}`,
+              style: { height: value === void 0 ? "2px" : `${Math.max(6, value / peak * 100)}%` }
+            },
+            i
+          );
+        }) }),
+        /* @__PURE__ */ jsxs("dl", { className: "mt-2 space-y-0.5", children: [
+          /* @__PURE__ */ jsx(Row, { label: "worst frame", value: reading.worstMs ? `${reading.worstMs.toFixed(0)} ms` : "\u2014" }),
+          /* @__PURE__ */ jsx(
+            Row,
+            {
+              label: "main thread",
+              value: reading.blockedPct === null ? "n/a" : `${reading.blockedPct.toFixed(0)}% blocked`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Row,
+            {
+              label: "JS heap",
+              value: heap ? `${heap.usedMB.toFixed(0)} / ${heap.limitMB.toFixed(0)} MB` : "n/a"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2 border-t border-white/10 pt-1.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: `h-1.5 w-1.5 shrink-0 rounded-full ${styles.dot}`, "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: `font-semibold ${styles.text}`, children: verdict.label })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "mt-0.5 leading-snug text-white/45", children: verdict.detail })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between border-t border-white/10 pt-1.5", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-white/35", children: [
+            "log ",
+            logSize,
+            " \xB7 ",
+            loggedSeconds < 60 ? `${loggedSeconds}s` : `${Math.round(loggedSeconds / 60)}m`
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "flex gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: exportJson,
+                disabled: !logSize,
+                className: "rounded border border-white/15 px-1.5 py-0.5 text-white/60 transition-colors hover:border-white/30 hover:text-white disabled:cursor-not-allowed disabled:opacity-40",
+                children: "JSON"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: exportCsv,
+                disabled: !logSize,
+                className: "rounded border border-white/15 px-1.5 py-0.5 text-white/60 transition-colors hover:border-white/30 hover:text-white disabled:cursor-not-allowed disabled:opacity-40",
+                children: "CSV"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function Row({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-white/40", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "tabular-nums text-white/70", children: value })
+  ] });
+}
+
 // src/changelog.ts
 var changelog = [];
 var changelog_default = changelog;
@@ -2539,6 +2970,13 @@ function Desktop({ profile }) {
             ] })
           ] }) });
         })(),
+        prefs.show_desktop_stats === true && (() => {
+          const versionShowing = prefs.show_desktop_version === true && !!(host.productVersion ?? APP_VERSION);
+          const taskbarAtBottom = prefs.taskbar_position !== "top" && prefs.taskbar_position !== "left" && prefs.taskbar_position !== "right";
+          const side = prefs.taskbar_position === "right" ? "left-3" : "right-3";
+          const bottom = taskbarAtBottom ? versionShowing ? "bottom-24" : "bottom-16" : versionShowing ? "bottom-8" : "bottom-3";
+          return /* @__PURE__ */ jsx("div", { className: `absolute z-[240] ${side} ${bottom}`, children: /* @__PURE__ */ jsx(PerfStats, { onClose: () => saveShellPrefs({ show_desktop_stats: false }) }) });
+        })(),
         prefs.show_desktop_version === true && (host.productVersion ?? APP_VERSION) && /* @__PURE__ */ jsx(
           "button",
           {
@@ -4063,7 +4501,7 @@ function previewColor(resolved, light, dark, pink, green, grey, blue) {
 }
 function Customization({ omit, section } = {}) {
   const omitSet = new Set(omit ?? []);
-  const inSection = (group) => section === void 0 || section === group;
+  const inSection = (group2) => section === void 0 || section === group2;
   const host = useDesktopHost();
   const WALLPAPERS = host.wallpapers && host.wallpapers.length > 0 ? host.wallpapers : DEFAULT_WALLPAPERS;
   const { prefs, save } = useShellPrefs();
@@ -4375,6 +4813,25 @@ function Customization({ omit, section } = {}) {
             })
           }
         )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Diagnostics" }),
+        /* @__PURE__ */ jsxs("label", { className: "flex items-start gap-2 cursor-pointer", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: !!pref("show_desktop_stats"),
+              onChange: (e) => savePref("show_desktop_stats", e.target.checked),
+              className: "h-4 w-4 mt-0.5 rounded border-gray-300 text-blue-600"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-700", children: [
+            "Show performance stats",
+            /* @__PURE__ */ jsx("span", { className: "block text-xs text-gray-400", children: "Overlays frame rate, worst frame time and a bottleneck reading on the desktop, beside the version number. Turn it on to check whether Reduce transparency actually helps on this machine \u2014 or whether the slowness is coming from somewhere else." }),
+            /* @__PURE__ */ jsx("span", { className: "block text-xs text-gray-400 mt-1", children: "While it is on, each reading is recorded with what was happening at the time \u2014 how many windows were open, which one was on top, and counts of clicks, keystrokes, scrolls and window drags. No page content or keystroke text is recorded. The log stays on this device and is only shared if you export it with the JSON or CSV button on the overlay." })
+          ] })
+        ] })
       ] })
     ] }),
     inSection("layout") && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -4614,7 +5071,7 @@ function BehaviorPanel() {
       /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Behavior" }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx(
-          Row,
+          Row2,
           {
             label: "New window position",
             options: WINDOW_POSITIONS,
@@ -4623,7 +5080,7 @@ function BehaviorPanel() {
           }
         ),
         /* @__PURE__ */ jsx(
-          Row,
+          Row2,
           {
             label: "Double-click desktop",
             options: DESKTOP_DBLCLICK,
@@ -4632,7 +5089,7 @@ function BehaviorPanel() {
           }
         ),
         /* @__PURE__ */ jsx(
-          Row,
+          Row2,
           {
             label: "Default window size",
             options: WINDOW_SIZES,
@@ -4673,7 +5130,7 @@ function BehaviorPanel() {
     /* @__PURE__ */ jsx(ModalActions, { children: /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: "Changes are saved automatically" }) })
   ] });
 }
-function Row({
+function Row2({
   label,
   options,
   value,
@@ -10003,6 +10460,6 @@ function useEditHotkey(callback) {
   }, [callback, isActive]);
 }
 
-export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, Accordion, AuthScreen, Avatar, AvatarGroup, Banner, BarChart, BehaviorPanel, BulkImportGrid, Button_default as Button, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Card, ChangePasswordForm, ChatTemplate, Checkbox_default as Checkbox, CheckoutTemplate, ColoredBadge, ContainerFillChart, Customization, DEV_BANNER_TEXT, DashboardTemplate, DataTablePage, DateRangePicker, Desktop, DesktopHostProvider, DevIndicator, DonutChart, ENTER, EmailTemplate, EmptyState, EntityList, ErrorPage, FilterBar, FormField, FormLayoutPage, GalleryTemplate, GlobalSearch, HelpCenter, INPUT_BASE, Input_default as Input, Kanban, Label, Layout, ListFooter, ListLoadError, LoadingSpinner2 as LoadingSpinner, MOD, Markdown, MediaUploadField, MediaUploadGrid, MetricBar, MilestoneTimeline, NativeSelect, NotificationBell, PageHeader, Pagination, PdfActionButton, Radio_default as Radio, ResizableTable, SHIFT, SearchableSelect, Select_default as Select, ServerStatusIndicator, ShellEntityFetcherProvider, ShortcutHelp, SidebarActionButton, SidebarGroupLabel, SidebarNavItem, SoundsPanel, Sparkline, StartMenu, StatCard, StatusBadge, StatusBadgeProvider, SystemPreferences, Tabs, Textarea_default as Textarea, Tooltip, TopNav, WidgetManager, applyDevTitle, createWindowRegistry, findDuplicateKeys, formatDate, inputClasses, isDevEnv, isMac, isSeverityTone, mediaFileName, mergeBulkItems, severityOf, toISODate2 as toISODate, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useFilters, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
+export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, Accordion, AuthScreen, Avatar, AvatarGroup, BLOCKED_PCT_CPU, Banner, BarChart, BehaviorPanel, BulkImportGrid, Button_default as Button, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Card, ChangePasswordForm, ChatTemplate, Checkbox_default as Checkbox, CheckoutTemplate, ColoredBadge, ContainerFillChart, Customization, DEV_BANNER_TEXT, DashboardTemplate, DataTablePage, DateRangePicker, Desktop, DesktopHostProvider, DevIndicator, DonutChart, ENTER, EmailTemplate, EmptyState, EntityList, ErrorPage, FilterBar, FormField, FormLayoutPage, GalleryTemplate, GlobalSearch, HelpCenter, INPUT_BASE, Input_default as Input, Kanban, LOG_CAP, Label, Layout, ListFooter, ListLoadError, LoadingSpinner2 as LoadingSpinner, MIN_GROUP_SAMPLES, MOD, Markdown, MediaUploadField, MediaUploadGrid, MetricBar, MilestoneTimeline, NativeSelect, NotificationBell, PageHeader, Pagination, PdfActionButton, PerfStats, Radio_default as Radio, ResizableTable, SHIFT, SMOOTH_FPS, SearchableSelect, Select_default as Select, ServerStatusIndicator, ShellEntityFetcherProvider, ShortcutHelp, SidebarActionButton, SidebarGroupLabel, SidebarNavItem, SoundsPanel, Sparkline, StartMenu, StatCard, StatusBadge, StatusBadgeProvider, SystemPreferences, Tabs, Textarea_default as Textarea, Tooltip, TopNav, WidgetManager, appendRecord as appendPerfRecord, applyDevTitle, classify as classifyPerf, createWindowRegistry, findDuplicateKeys, formatDate, inputClasses, isDevEnv, isInteracting, isMac, isSeverityTone, mediaFileName, mergeBulkItems, toCsv as perfLogToCsv, severityOf, summariseFrames, summariseLog as summarisePerfLog, toISODate2 as toISODate, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useFilters, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map