create-tauri-ui 1.0.5 → 1.0.7

package/assets/debug-panel/debug-panel.tsx.tmpl

@@ -36,6 +36,12 @@ import {
   DropdownMenuTrigger,
 } from "__ALIAS_PREFIX__components/ui/dropdown-menu"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "__ALIAS_PREFIX__components/ui/tabs"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "__ALIAS_PREFIX__components/ui/tooltip"
 import {
   DEBUG_EVENT_NAME,
   type DebugEvent,
@@ -86,6 +92,90 @@ type PathDiagnostics = {
   resourceDir: string | null
 }
 
+type LocaleDefaultsDiagnostics = {
+  localeChain: string[]
+  navigatorLanguage: string
+  intlLocale: string
+  region: string | null
+  timeZone: string
+  calendar: string
+  numberingSystem: string
+  hourCycle: string
+  hour12: boolean | null
+  firstDayOfWeek: string
+  documentLang: string
+  documentDir: string
+}
+
+type AccessibilityDefaultsDiagnostics = {
+  colorScheme: "dark" | "light"
+  reducedMotion: "reduce" | "no-preference"
+  contrast: "more" | "less" | "custom" | "no-preference"
+  forcedColors: "active" | "none"
+  invertedColors: "inverted" | "none"
+  reducedTransparency: "reduce" | "no-preference"
+}
+
+type InputDefaultsDiagnostics = {
+  platform: string
+  userAgent: string
+  maxTouchPoints: number
+  touchCapable: boolean
+  pointer: "fine" | "coarse" | "none"
+  anyPointer: "fine" | "coarse" | "none"
+  hover: boolean
+  anyHover: boolean
+  hardwareConcurrency: number | null
+  deviceMemory: number | null
+}
+
+type DisplayDefaultsDiagnostics = {
+  viewport: string
+  screen: string
+  availableScreen: string
+  devicePixelRatio: number
+  orientation: string
+  colorGamut: "rec2020" | "p3" | "srgb" | "unknown"
+  dynamicRange: "high" | "standard"
+  monochrome: boolean
+}
+
+type NetworkDefaultsDiagnostics = {
+  online: boolean
+  effectiveType: string
+  saveData: boolean | null
+  downlink: number | null
+  rtt: number | null
+}
+
+type NetworkInformationLike = EventTarget & {
+  effectiveType?: string
+  saveData?: boolean
+  downlink?: number
+  rtt?: number
+}
+
+type ExtendedNavigator = Navigator & {
+  connection?: NetworkInformationLike
+  mozConnection?: NetworkInformationLike
+  webkitConnection?: NetworkInformationLike
+  deviceMemory?: number
+  userAgentData?: {
+    platform?: string
+  }
+}
+
+type SourceOrigin = "web" | "tauri"
+
+type GridEntryMeta = {
+  code: string
+  origin: SourceOrigin
+}
+
+type GridEntry =
+  | [label: string, value: React.ReactNode]
+  | [label: string, value: React.ReactNode, meta: GridEntryMeta]
+
 type ErrorLog = {
   id: string
   timestamp: string
@@ -242,6 +332,81 @@ function getLogLevelClasses(level: string) {
   }
 }
 
+function createMediaQueryList(query: string) {
+  try {
+    return window.matchMedia(query)
+  } catch {
+    return null
+  }
+}
+
+function matchesMediaQuery(query: string) {
+  return createMediaQueryList(query)?.matches ?? false
+}
+
+function getLocaleChain() {
+  const candidates = [...navigator.languages]
+
+  if (navigator.language) {
+    candidates.push(navigator.language)
+  }
+
+  return [...new Set(candidates.filter(Boolean))]
+}
+
+function getFirstDayOfWeek(locale: string) {
+  try {
+    const intlLocale = new Intl.Locale(locale) as Intl.Locale & {
+      weekInfo?: {
+        firstDay: number
+      }
+    }
+
+    return intlLocale.weekInfo?.firstDay?.toString() ?? "Unavailable"
+  } catch {
+    return "Unavailable"
+  }
+}
+
+function getContrastPreference() {
+  if (matchesMediaQuery("(prefers-contrast: more)")) return "more"
+  if (matchesMediaQuery("(prefers-contrast: less)")) return "less"
+  if (matchesMediaQuery("(prefers-contrast: custom)")) return "custom"
+  return "no-preference"
+}
+
+function getColorGamut() {
+  if (matchesMediaQuery("(color-gamut: rec2020)")) return "rec2020"
+  if (matchesMediaQuery("(color-gamut: p3)")) return "p3"
+  if (matchesMediaQuery("(color-gamut: srgb)")) return "srgb"
+  return "unknown"
+}
+
+function getPointerPrecision(query: "(pointer: fine)" | "(pointer: coarse)") {
+  if (matchesMediaQuery(query)) {
+    return query.includes("fine") ? "fine" : "coarse"
+  }
+
+  return "none"
+}
+
+function getAnyPointerPrecision() {
+  if (matchesMediaQuery("(any-pointer: fine)")) return "fine"
+  if (matchesMediaQuery("(any-pointer: coarse)")) return "coarse"
+  return "none"
+}
+
+function getConnectionInfo() {
+  const extendedNavigator = navigator as ExtendedNavigator
+
+  return (
+    extendedNavigator.connection ??
+    extendedNavigator.mozConnection ??
+    extendedNavigator.webkitConnection ??
+    null
+  )
+}
+
 function pushRecent<T>(items: T[], nextItem: T) {
   return [nextItem, ...items].slice(0, MAX_LOG_ITEMS)
 }
@@ -288,25 +453,119 @@ function DebugSection({
   )
 }
 
+const DebugPanelThemeContext = React.createContext<React.CSSProperties | undefined>(
+  undefined
+)
+
+function SourceOriginChip({ origin }: { origin: SourceOrigin }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex h-3.5 items-center rounded-sm border px-1 text-[9px] font-semibold uppercase tracking-wide",
+        origin === "tauri"
+          ? "border-amber-500/30 bg-amber-500/15 text-amber-600 dark:text-amber-400"
+          : "border-sky-500/30 bg-sky-500/15 text-sky-600 dark:text-sky-400"
+      )}
+    >
+      {origin} API
+    </span>
+  )
+}
+
+function GridLabel({ label, meta }: { label: string; meta?: GridEntryMeta }) {
+  const themeStyle = React.useContext(DebugPanelThemeContext)
+  const [copied, setCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    if (!copied) {
+      return
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      setCopied(false)
+    }, 1200)
+
+    return () => {
+      window.clearTimeout(timeoutId)
+    }
+  }, [copied])
+
+  if (!meta) {
+    return <span>{label}</span>
+  }
+
+  const handleCopySnippet = async () => {
+    try {
+      await navigator.clipboard.writeText(meta.code)
+      setCopied(true)
+    } catch {
+      setCopied(false)
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span className="cursor-help underline decoration-dotted decoration-muted-foreground/40 underline-offset-4">
+          {label}
+        </span>
+      </TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="start"
+        style={themeStyle}
+        className="max-w-[320px] border border-border/40 bg-popover p-2 text-popover-foreground shadow-md [&>:last-child]:hidden"
+      >
+        <div className="flex items-center gap-2">
+          <SourceOriginChip origin={meta.origin} />
+          <button
+            type="button"
+            onClick={handleCopySnippet}
+            title={copied ? "Copied!" : "Click to copy"}
+            className="group relative flex-1 overflow-hidden rounded-sm bg-muted px-1.5 py-1 text-left font-mono text-[10px] leading-4 text-foreground transition-colors hover:bg-muted/70 active:bg-muted/50"
+          >
+            <pre className="whitespace-pre-wrap break-all">{meta.code}</pre>
+            <span
+              className={cn(
+                "pointer-events-none absolute inset-0 flex items-center justify-center rounded-sm bg-popover/95 text-[10px] font-semibold text-foreground transition-opacity",
+                copied ? "opacity-100" : "opacity-0"
+              )}
+            >
+              Copied!
+            </span>
+          </button>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
 function KeyValueGrid({
   entries,
 }: {
-  entries: Array<[label: string, value: React.ReactNode]>
+  entries: ReadonlyArray<GridEntry>
 }) {
   return (
     <dl className="grid text-[11px] leading-5">
-      {entries.map(([label, value], index) => (
-        <div
-          key={label}
-          className={cn(
-            "grid grid-cols-[92px_minmax(0,1fr)] items-start gap-3 py-1",
-            index > 0 && "border-t border-border/20"
-          )}
-        >
-          <dt className="text-muted-foreground/90">{label}</dt>
-          <dd className="font-mono break-all text-foreground">{value}</dd>
-        </div>
-      ))}
+      {entries.map((entry, index) => {
+        const [label, value] = entry
+        const meta = entry.length === 3 ? entry[2] : undefined
+
+        return (
+          <div
+            key={label}
+            className={cn(
+              "grid grid-cols-[92px_minmax(0,1fr)] items-start gap-3 py-1",
+              index > 0 && "border-t border-border/20"
+            )}
+          >
+            <dt className="text-muted-foreground/90">
+              <GridLabel label={label} meta={meta} />
+            </dt>
+            <dd className="font-mono break-all text-foreground">{value}</dd>
+          </div>
+        )
+      })}
     </dl>
   )
 }
@@ -372,6 +631,58 @@ export function DebugPanel() {
     appConfigDir: null,
     resourceDir: null,
   })
+  const [localeDefaults, setLocaleDefaults] = React.useState<LocaleDefaultsDiagnostics>({
+    localeChain: [],
+    navigatorLanguage: "",
+    intlLocale: "Unavailable",
+    region: null,
+    timeZone: "Unavailable",
+    calendar: "Unavailable",
+    numberingSystem: "Unavailable",
+    hourCycle: "Unavailable",
+    hour12: null,
+    firstDayOfWeek: "Unavailable",
+    documentLang: "",
+    documentDir: "",
+  })
+  const [accessibilityDefaults, setAccessibilityDefaults] =
+    React.useState<AccessibilityDefaultsDiagnostics>({
+      colorScheme: "light",
+      reducedMotion: "no-preference",
+      contrast: "no-preference",
+      forcedColors: "none",
+      invertedColors: "none",
+      reducedTransparency: "no-preference",
+    })
+  const [inputDefaults, setInputDefaults] = React.useState<InputDefaultsDiagnostics>({
+    platform: "Unavailable",
+    userAgent: "",
+    maxTouchPoints: 0,
+    touchCapable: false,
+    pointer: "none",
+    anyPointer: "none",
+    hover: false,
+    anyHover: false,
+    hardwareConcurrency: null,
+    deviceMemory: null,
+  })
+  const [displayDefaults, setDisplayDefaults] = React.useState<DisplayDefaultsDiagnostics>({
+    viewport: "Unavailable",
+    screen: "Unavailable",
+    availableScreen: "Unavailable",
+    devicePixelRatio: 1,
+    orientation: "Unavailable",
+    colorGamut: "unknown",
+    dynamicRange: "standard",
+    monochrome: false,
+  })
+  const [networkDefaults, setNetworkDefaults] = React.useState<NetworkDefaultsDiagnostics>({
+    online: true,
+    effectiveType: "Unavailable",
+    saveData: null,
+    downlink: null,
+    rtt: null,
+  })
   const [externalLinks, setExternalLinks] = React.useState<string[]>([])
   const [invokeLogs, setInvokeLogs] = React.useState<DebugEvent[]>([])
   const [runtimeEvents, setRuntimeEvents] = React.useState<RuntimeEventDebugEvent[]>([])
@@ -524,6 +835,159 @@ export function DebugPanel() {
     void loadPaths()
   }, [tauriReady])
 
+  React.useEffect(() => {
+    function refreshSystemDefaults() {
+      const resolved = new Intl.DateTimeFormat().resolvedOptions()
+      const localeChain = getLocaleChain()
+      let region: string | null = null
+
+      try {
+        region = new Intl.Locale(resolved.locale).region ?? null
+      } catch {
+        region = null
+      }
+
+      setLocaleDefaults({
+        localeChain,
+        navigatorLanguage: navigator.language || "Unavailable",
+        intlLocale: resolved.locale,
+        region,
+        timeZone: resolved.timeZone ?? "Unavailable",
+        calendar: resolved.calendar ?? "Unavailable",
+        numberingSystem: resolved.numberingSystem ?? "Unavailable",
+        hourCycle: resolved.hourCycle ?? "Unavailable",
+        hour12: resolved.hour12 ?? null,
+        firstDayOfWeek: getFirstDayOfWeek(resolved.locale),
+        documentLang: document.documentElement.lang || "(unset)",
+        documentDir: document.documentElement.dir || "(unset)",
+      })
+
+      const extendedNavigator = navigator as ExtendedNavigator
+
+      setAccessibilityDefaults({
+        colorScheme: matchesMediaQuery(COLOR_SCHEME_QUERY) ? "dark" : "light",
+        reducedMotion: matchesMediaQuery("(prefers-reduced-motion: reduce)")
+          ? "reduce"
+          : "no-preference",
+        contrast: getContrastPreference(),
+        forcedColors: matchesMediaQuery("(forced-colors: active)") ? "active" : "none",
+        invertedColors: matchesMediaQuery("(inverted-colors: inverted)")
+          ? "inverted"
+          : "none",
+        reducedTransparency: matchesMediaQuery("(prefers-reduced-transparency: reduce)")
+          ? "reduce"
+          : "no-preference",
+      })
+
+      setInputDefaults({
+        platform:
+          extendedNavigator.userAgentData?.platform ??
+          navigator.platform ??
+          "Unavailable",
+        userAgent: navigator.userAgent || "Unavailable",
+        maxTouchPoints: navigator.maxTouchPoints ?? 0,
+        touchCapable:
+          navigator.maxTouchPoints > 0 ||
+          matchesMediaQuery("(pointer: coarse)") ||
+          "ontouchstart" in window,
+        pointer:
+          getPointerPrecision("(pointer: fine)") === "fine"
+            ? "fine"
+            : getPointerPrecision("(pointer: coarse)"),
+        anyPointer: getAnyPointerPrecision(),
+        hover: matchesMediaQuery("(hover: hover)"),
+        anyHover: matchesMediaQuery("(any-hover: hover)"),
+        hardwareConcurrency: navigator.hardwareConcurrency ?? null,
+        deviceMemory: extendedNavigator.deviceMemory ?? null,
+      })
+
+      setDisplayDefaults({
+        viewport: `${window.innerWidth} × ${window.innerHeight}`,
+        screen: `${window.screen.width} × ${window.screen.height}`,
+        availableScreen: `${window.screen.availWidth} × ${window.screen.availHeight}`,
+        devicePixelRatio: window.devicePixelRatio,
+        orientation:
+          window.screen.orientation?.type ??
+          (window.innerWidth >= window.innerHeight ? "landscape" : "portrait"),
+        colorGamut: getColorGamut(),
+        dynamicRange: matchesMediaQuery("(dynamic-range: high)") ? "high" : "standard",
+        monochrome: matchesMediaQuery("(monochrome)"),
+      })
+
+      const connection = getConnectionInfo()
+
+      setNetworkDefaults({
+        online: navigator.onLine,
+        effectiveType: connection?.effectiveType ?? "Unavailable",
+        saveData: connection?.saveData ?? null,
+        downlink: connection?.downlink ?? null,
+        rtt: connection?.rtt ?? null,
+      })
+    }
+
+    refreshSystemDefaults()
+
+    const mediaQueries = [
+      COLOR_SCHEME_QUERY,
+      "(prefers-reduced-motion: reduce)",
+      "(prefers-contrast: more)",
+      "(prefers-contrast: less)",
+      "(prefers-contrast: custom)",
+      "(forced-colors: active)",
+      "(inverted-colors: inverted)",
+      "(prefers-reduced-transparency: reduce)",
+      "(pointer: fine)",
+      "(pointer: coarse)",
+      "(any-pointer: fine)",
+      "(any-pointer: coarse)",
+      "(hover: hover)",
+      "(any-hover: hover)",
+      "(color-gamut: rec2020)",
+      "(color-gamut: p3)",
+      "(color-gamut: srgb)",
+      "(dynamic-range: high)",
+      "(monochrome)",
+    ]
+      .map((query) => createMediaQueryList(query))
+      .filter((query): query is MediaQueryList => query !== null)
+
+    const handleChange = () => {
+      refreshSystemDefaults()
+    }
+
+    for (const mediaQuery of mediaQueries) {
+      mediaQuery.addEventListener("change", handleChange)
+    }
+
+    window.addEventListener("resize", handleChange)
+    window.addEventListener("online", handleChange)
+    window.addEventListener("offline", handleChange)
+    window.screen.orientation?.addEventListener?.("change", handleChange)
+    document.documentElement.addEventListener(
+      "languagechange",
+      handleChange as EventListener
+    )
+
+    const connection = getConnectionInfo()
+    connection?.addEventListener?.("change", handleChange)
+
+    return () => {
+      for (const mediaQuery of mediaQueries) {
+        mediaQuery.removeEventListener("change", handleChange)
+      }
+
+      window.removeEventListener("resize", handleChange)
+      window.removeEventListener("online", handleChange)
+      window.removeEventListener("offline", handleChange)
+      window.screen.orientation?.removeEventListener?.("change", handleChange)
+      document.documentElement.removeEventListener(
+        "languagechange",
+        handleChange as EventListener
+      )
+      connection?.removeEventListener?.("change", handleChange)
+    }
+  }, [])
+
   React.useEffect(() => {
     if (!tauriReady || !locationState.pathname) {
       return
@@ -1059,19 +1523,20 @@ export function DebugPanel() {
           <div className={overviewLayoutClassName}>
             <DebugSection
               title="App"
-              description="Static application metadata from Tauri v2."
+              description="Static application metadata and current route."
             >
               <KeyValueGrid
                 entries={[
-                  ["Route", locationState.pathname || "/"],
-                  ["URL", locationState.href || "Unavailable"],
-                  ["Search", locationState.search || "(none)"],
-                  ["Hash", locationState.hash || "(none)"],
-                  ["Bridge", tauriReady ? "Tauri" : "Web"],
-                  ["Name", appInfo.name ?? "Unavailable"],
-                  ["Version", appInfo.version ?? "Unavailable"],
-                  ["Identifier", appInfo.identifier ?? "Unavailable"],
-                  ["Tauri", appInfo.tauriVersion ?? "Unavailable"],
+                  ["Route", locationState.pathname || "/", { code: "window.location.pathname", origin: "web" }],
+                  ["URL", locationState.href || "Unavailable", { code: "window.location.href", origin: "web" }],
+                  ["Search", locationState.search || "(none)", { code: "window.location.search", origin: "web" }],
+                  ["Hash", locationState.hash || "(none)", { code: "window.location.hash", origin: "web" }],
+                  ["Bridge", tauriReady ? "Tauri" : "Web", { code: "isTauri()", origin: "tauri" }],
+                  ["Name", appInfo.name ?? "Unavailable", { code: "await getName()", origin: "tauri" }],
+                  ["Version", appInfo.version ?? "Unavailable", { code: "await getVersion()", origin: "tauri" }],
+                  ["Identifier", appInfo.identifier ?? "Unavailable", { code: "await getIdentifier()", origin: "tauri" }],
+                  ["Tauri", appInfo.tauriVersion ?? "Unavailable", { code: "await getTauriVersion()", origin: "tauri" }],
+                  ["Webview", windowInfo.label, { code: "getCurrentWebviewWindow().label", origin: "tauri" }],
                   ["Shortcut", "Cmd/Ctrl + D"],
                 ]}
               />
@@ -1083,57 +1548,68 @@ export function DebugPanel() {
             >
               <KeyValueGrid
                 entries={[
-                  ["Label", windowInfo.label],
-                  ["Title", windowInfo.title ?? "Unavailable"],
+                  ["Label", windowInfo.label, { code: "getCurrentWindow().label", origin: "tauri" }],
+                  ["Title", windowInfo.title ?? "Unavailable", { code: "await getCurrentWindow().title()", origin: "tauri" }],
                   [
                     "Viewport",
                     windowInfo.viewportSize
                       ? `${windowInfo.viewportSize.width} × ${windowInfo.viewportSize.height}`
                       : "Unavailable",
+                    { code: "window.innerWidth × window.innerHeight", origin: "web" },
                   ],
                   [
                     "Tauri inner",
                     windowInfo.tauriInnerSize
                       ? `${windowInfo.tauriInnerSize.width} × ${windowInfo.tauriInnerSize.height}`
                       : "Unavailable",
+                    { code: "await getCurrentWindow().innerSize()", origin: "tauri" },
                   ],
                   [
                     "Window outer",
                     windowInfo.outerSize
                       ? `${windowInfo.outerSize.width} × ${windowInfo.outerSize.height}`
                       : "Unavailable",
+                    { code: "await getCurrentWindow().outerSize()", origin: "tauri" },
                   ],
                   [
                     "Position",
                     windowInfo.outerPosition
                       ? `${windowInfo.outerPosition.x}, ${windowInfo.outerPosition.y}`
                       : "Unavailable",
+                    { code: "await getCurrentWindow().outerPosition()", origin: "tauri" },
                   ],
-                  ["Scale", windowInfo.scaleFactor ?? "Unavailable"],
-                  ["Focused", String(windowInfo.focused)],
-                  ["Visible", String(windowInfo.visible)],
-                  ["Maximized", String(windowInfo.maximized)],
-                  ["Fullscreen", String(windowInfo.fullscreen)],
-                  ["Decorated", String(windowInfo.decorated)],
+                  ["Scale", windowInfo.scaleFactor ?? "Unavailable", { code: "await getCurrentWindow().scaleFactor()", origin: "tauri" }],
+                  ["Focused", String(windowInfo.focused), { code: "await getCurrentWindow().isFocused()", origin: "tauri" }],
+                  ["Visible", String(windowInfo.visible), { code: "await getCurrentWindow().isVisible()", origin: "tauri" }],
+                  ["Maximized", String(windowInfo.maximized), { code: "await getCurrentWindow().isMaximized()", origin: "tauri" }],
+                  ["Fullscreen", String(windowInfo.fullscreen), { code: "await getCurrentWindow().isFullscreen()", origin: "tauri" }],
+                  ["Decorated", String(windowInfo.decorated), { code: "await getCurrentWindow().isDecorated()", origin: "tauri" }],
                   [
                     "Monitor",
                     windowInfo.monitor
                       ? `${windowInfo.monitor.name ?? "Unknown"} (${windowInfo.monitor.size.width} × ${windowInfo.monitor.size.height})`
                       : "Unavailable",
+                    { code: "await currentMonitor()", origin: "tauri" },
                   ],
                 ]}
               />
             </DebugSection>
 
             <DebugSection
-              title="Theme"
-              description="Theme state from the root HTML element and system media query."
+              title="Theme & A11y"
+              description="Theme state plus accessibility preferences from media queries."
             >
               <KeyValueGrid
                 entries={[
-                  ["Current", themeInfo.current],
-                  ["System", themeInfo.system],
-                  ["HTML class", themeInfo.htmlClass || "(none)"],
+                  ["Current", themeInfo.current, { code: 'document.documentElement.classList.contains("dark")', origin: "web" }],
+                  ["System", themeInfo.system, { code: 'matchMedia("(prefers-color-scheme: dark)")', origin: "web" }],
+                  ["HTML class", themeInfo.htmlClass || "(none)", { code: "document.documentElement.className", origin: "web" }],
+                  ["Color scheme", accessibilityDefaults.colorScheme, { code: 'matchMedia("(prefers-color-scheme: dark)")', origin: "web" }],
+                  ["Reduced motion", accessibilityDefaults.reducedMotion, { code: 'matchMedia("(prefers-reduced-motion: reduce)")', origin: "web" }],
+                  ["Contrast", accessibilityDefaults.contrast, { code: 'matchMedia("(prefers-contrast: more | less | custom)")', origin: "web" }],
+                  ["Forced colors", accessibilityDefaults.forcedColors, { code: 'matchMedia("(forced-colors: active)")', origin: "web" }],
+                  ["Inverted colors", accessibilityDefaults.invertedColors, { code: 'matchMedia("(inverted-colors: inverted)")', origin: "web" }],
+                  ["Transparency", accessibilityDefaults.reducedTransparency, { code: 'matchMedia("(prefers-reduced-transparency: reduce)")', origin: "web" }],
                 ]}
               />
             </DebugSection>
@@ -1346,16 +1822,18 @@ export function DebugPanel() {
               description="Resolved Tauri application directories."
             >
               <div className="space-y-1.5">
-                {[
-                  ["App data", pathInfo.appDataDir],
-                  ["App config", pathInfo.appConfigDir],
-                  ["Resources", pathInfo.resourceDir],
-                ].map(([label, value]) => (
+                {([
+                  ["App data", pathInfo.appDataDir, "await appDataDir()"],
+                  ["App config", pathInfo.appConfigDir, "await appConfigDir()"],
+                  ["Resources", pathInfo.resourceDir, "await resourceDir()"],
+                ] as const).map(([label, value, code]) => (
                   <div
                     key={label}
                     className="grid grid-cols-[92px_minmax(0,1fr)_auto] items-start gap-3 border-t border-border/20 py-1 text-[11px] first:border-t-0 first:pt-0"
                   >
-                    <div className="text-muted-foreground">{label}</div>
+                    <div className="text-muted-foreground">
+                      <GridLabel label={label} meta={{ code, origin: "tauri" }} />
+                    </div>
                     <div className="font-mono break-all text-foreground">
                       {value ?? "Unavailable"}
                     </div>
@@ -1369,10 +1847,118 @@ export function DebugPanel() {
             </DebugSection>
 
             <DebugSection
-              title="Webview"
-              description="Current webview identity."
+              title="Display"
+              description="Viewport, screen, and media capability signals."
+            >
+              <KeyValueGrid
+                entries={[
+                  ["Viewport", displayDefaults.viewport, { code: "window.innerWidth × window.innerHeight", origin: "web" }],
+                  ["Screen", displayDefaults.screen, { code: "window.screen.width × window.screen.height", origin: "web" }],
+                  ["Available", displayDefaults.availableScreen, { code: "window.screen.availWidth × window.screen.availHeight", origin: "web" }],
+                  ["DPR", displayDefaults.devicePixelRatio, { code: "window.devicePixelRatio", origin: "web" }],
+                  ["Orientation", displayDefaults.orientation, { code: "window.screen.orientation?.type", origin: "web" }],
+                  ["Color gamut", displayDefaults.colorGamut, { code: 'matchMedia("(color-gamut: rec2020 | p3 | srgb)")', origin: "web" }],
+                  ["Dynamic range", displayDefaults.dynamicRange, { code: 'matchMedia("(dynamic-range: high)")', origin: "web" }],
+                  ["Monochrome", String(displayDefaults.monochrome), { code: 'matchMedia("(monochrome)")', origin: "web" }],
+                ]}
+              />
+            </DebugSection>
+
+            <DebugSection
+              title="Locale"
+              description="Host locale, timezone, calendar, and Intl formatting defaults."
             >
-              <KeyValueGrid entries={[["Current label", windowInfo.label]]} />
+              <KeyValueGrid
+                entries={[
+                  [
+                    "Locale chain",
+                    localeDefaults.localeChain.length
+                      ? localeDefaults.localeChain.join(", ")
+                      : "Unavailable",
+                    { code: "[...navigator.languages, navigator.language]", origin: "web" },
+                  ],
+                  ["Navigator", localeDefaults.navigatorLanguage, { code: "navigator.language", origin: "web" }],
+                  ["Intl locale", localeDefaults.intlLocale, { code: "new Intl.DateTimeFormat().resolvedOptions().locale", origin: "web" }],
+                  ["Region", localeDefaults.region ?? "Unavailable", { code: "new Intl.Locale(locale).region", origin: "web" }],
+                  ["Time zone", localeDefaults.timeZone, { code: "new Intl.DateTimeFormat().resolvedOptions().timeZone", origin: "web" }],
+                  ["Calendar", localeDefaults.calendar, { code: "new Intl.DateTimeFormat().resolvedOptions().calendar", origin: "web" }],
+                  ["Numbering", localeDefaults.numberingSystem, { code: "new Intl.DateTimeFormat().resolvedOptions().numberingSystem", origin: "web" }],
+                  ["Hour cycle", localeDefaults.hourCycle, { code: "new Intl.DateTimeFormat().resolvedOptions().hourCycle", origin: "web" }],
+                  [
+                    "12-hour",
+                    localeDefaults.hour12 === null
+                      ? "Unavailable"
+                      : String(localeDefaults.hour12),
+                    { code: "new Intl.DateTimeFormat().resolvedOptions().hour12", origin: "web" },
+                  ],
+                  ["First day", localeDefaults.firstDayOfWeek, { code: "new Intl.Locale(locale).weekInfo?.firstDay", origin: "web" }],
+                  ["HTML lang", localeDefaults.documentLang, { code: "document.documentElement.lang", origin: "web" }],
+                  ["HTML dir", localeDefaults.documentDir, { code: "document.documentElement.dir", origin: "web" }],
+                ]}
+              />
+            </DebugSection>
+
+            <DebugSection
+              title="Input"
+              description="Pointer, touch, hover, and hardware defaults."
+            >
+              <KeyValueGrid
+                entries={[
+                  ["Platform", inputDefaults.platform, { code: "navigator.userAgentData?.platform ?? navigator.platform", origin: "web" }],
+                  ["Pointer", inputDefaults.pointer, { code: 'matchMedia("(pointer: fine | coarse)")', origin: "web" }],
+                  ["Any pointer", inputDefaults.anyPointer, { code: 'matchMedia("(any-pointer: fine | coarse)")', origin: "web" }],
+                  ["Hover", String(inputDefaults.hover), { code: 'matchMedia("(hover: hover)")', origin: "web" }],
+                  ["Any hover", String(inputDefaults.anyHover), { code: 'matchMedia("(any-hover: hover)")', origin: "web" }],
+                  ["Touch points", inputDefaults.maxTouchPoints, { code: "navigator.maxTouchPoints", origin: "web" }],
+                  ["Touch capable", String(inputDefaults.touchCapable), { code: 'maxTouchPoints > 0 || matchMedia("(pointer: coarse)") || "ontouchstart" in window', origin: "web" }],
+                  [
+                    "CPU threads",
+                    inputDefaults.hardwareConcurrency ?? "Unavailable",
+                    { code: "navigator.hardwareConcurrency", origin: "web" },
+                  ],
+                  [
+                    "Device memory",
+                    inputDefaults.deviceMemory === null
+                      ? "Unavailable"
+                      : `${inputDefaults.deviceMemory} GB`,
+                    { code: "navigator.deviceMemory", origin: "web" },
+                  ],
+                  ["User agent", inputDefaults.userAgent, { code: "navigator.userAgent", origin: "web" }],
+                ]}
+              />
+            </DebugSection>
+
+            <DebugSection
+              title="Network"
+              description="Online state and connection quality hints from the browser."
+            >
+              <KeyValueGrid
+                entries={[
+                  ["Online", String(networkDefaults.online), { code: "navigator.onLine", origin: "web" }],
+                  ["Effective type", networkDefaults.effectiveType, { code: "navigator.connection?.effectiveType", origin: "web" }],
+                  [
+                    "Save-Data",
+                    networkDefaults.saveData === null
+                      ? "Unavailable"
+                      : String(networkDefaults.saveData),
+                    { code: "navigator.connection?.saveData", origin: "web" },
+                  ],
+                  [
+                    "Downlink",
+                    networkDefaults.downlink === null
+                      ? "Unavailable"
+                      : `${networkDefaults.downlink} Mbps`,
+                    { code: "navigator.connection?.downlink", origin: "web" },
+                  ],
+                  [
+                    "RTT",
+                    networkDefaults.rtt === null
+                      ? "Unavailable"
+                      : `${networkDefaults.rtt} ms`,
+                    { code: "navigator.connection?.rtt", origin: "web" },
+                  ],
+                ]}
+              />
             </DebugSection>
           </div>
         </TabsContent>
@@ -1426,19 +2012,21 @@ export function DebugPanel() {
   )
 
   return (
-    <>
-      {open ? (
-        <div
-          className={panelFrameClassName}
-          style={
-            panelSide === "bottom"
-              ? { ...debugPanelThemeStyle, height: `${BOTTOM_PANEL_HEIGHT}px` }
-              : { ...debugPanelThemeStyle, width: `${SIDE_PANEL_WIDTH}px` }
-          }
-        >
-          {panelContent}
-        </div>
-      ) : null}
-    </>
+    <TooltipProvider delayDuration={200}>
+      <DebugPanelThemeContext.Provider value={debugPanelThemeStyle}>
+        {open ? (
+          <div
+            className={panelFrameClassName}
+            style={
+              panelSide === "bottom"
+                ? { ...debugPanelThemeStyle, height: `${BOTTOM_PANEL_HEIGHT}px` }
+                : { ...debugPanelThemeStyle, width: `${SIDE_PANEL_WIDTH}px` }
+            }
+          >
+            {panelContent}
+          </div>
+        ) : null}
+      </DebugPanelThemeContext.Provider>
+    </TooltipProvider>
   )
 }