create-pixi-vn 2.1.3 → 2.1.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-pixi-vn",
   "description": "Create a new Pixi’VN project",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "type": "module",
   "license": "GPL-3.0",
   "author": "DRincs-Productions",

package/template-lib/package.json

@@ -9,6 +9,9 @@
   "files": [
     "dist"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "workspaces": [
     "playground"
   ],

package/template-nqtr-react-vite-muijoy/.assetpack.ts

@@ -1,5 +1,83 @@
-import type { AssetPackConfig } from "@assetpack/core";
+import type { AssetPackConfig, AssetPipe } from "@assetpack/core";
+import { path } from "@assetpack/core";
 import { pixiPipes } from "@assetpack/core/pixi";
+import fs from "node:fs/promises";
+
+const manifestOutput = "src/assets/manifest.gen.json";
+
+/**
+ * AssetPack only creates a manifest bundle for folders explicitly tagged
+ * with "{m}" (see pixiManifest's `manifest` tag); everything else lands in
+ * the single "default" bundle. This splits the "default" bundle into one
+ * bundle per top-level folder under the assets entry, named after that
+ * folder, so bundles mirror the folder structure without needing to tag
+ * every folder manually. Files directly at the entry root (no folder) stay
+ * in "default". Runs after the manifest has been written to disk, so it
+ * re-reads and rewrites the file.
+ */
+function groupBundlesByFolder(options: { output: string }): AssetPipe<{ output: string }> {
+    return {
+        name: "group-bundles-by-folder",
+        defaultOptions: options,
+        async finish(_asset, opts) {
+            const manifest = JSON.parse(await fs.readFile(opts.output, "utf-8"));
+
+            const bundles = new Map<string, { name: string; assets: unknown[] }>();
+            for (const bundle of manifest.bundles) {
+                if (bundle.name !== "default") {
+                    bundles.set(bundle.name, bundle);
+                    continue;
+                }
+                for (const asset of bundle.assets) {
+                    const folder = path.dirname(asset.src[0]).split("/")[0];
+                    const bundleName = folder === "." ? "default" : folder;
+                    const target = bundles.get(bundleName) ?? { name: bundleName, assets: [] };
+                    target.assets.push(asset);
+                    bundles.set(bundleName, target);
+                }
+            }
+            manifest.bundles = [...bundles.values()];
+
+            await fs.writeFile(opts.output, JSON.stringify(manifest, null, 2));
+        },
+    };
+}
+
+/**
+ * Removes file extensions from the aliases generated by the pixi manifest
+ * pipe and replaces path separators with underscores (e.g.
+ * "yard/yard1.png" -> "yard_yard1"). Runs after the manifest has been
+ * written to disk, so it re-reads and rewrites the file.
+ *
+ * If two assets end up with the same normalized alias, the later one is
+ * prefixed with its bundle name (e.g. "yard_yard_yard1") to keep aliases
+ * unique across the whole manifest.
+ */
+function normalizeAliases(options: { output: string }): AssetPipe<{ output: string }> {
+    return {
+        name: "normalize-aliases",
+        defaultOptions: options,
+        async finish(_asset, opts) {
+            const manifest = JSON.parse(await fs.readFile(opts.output, "utf-8"));
+
+            const seen = new Set<string>();
+            for (const bundle of manifest.bundles) {
+                for (const asset of bundle.assets) {
+                    asset.alias = asset.alias.map((alias: string) => {
+                        const normalized = path.trimExt(alias).replaceAll("/", "_");
+                        const unique = seen.has(normalized)
+                            ? `${bundle.name}_${normalized}`
+                            : normalized;
+                        seen.add(normalized);
+                        return unique;
+                    });
+                }
+            }
+
+            await fs.writeFile(opts.output, JSON.stringify(manifest, null, 2));
+        },
+    };
+}
 
 const config: AssetPackConfig = {
     entry: "./src/assets",
@@ -8,10 +86,12 @@ const config: AssetPackConfig = {
     pipes: [
         ...pixiPipes({
             manifest: {
-                output: "src/assets/manifest.gen.json",
+                output: manifestOutput,
                 createShortcuts: true,
             },
         }),
+        groupBundlesByFolder({ output: manifestOutput }),
+        normalizeAliases({ output: manifestOutput }),
     ],
 };
 

package/template-nqtr-react-vite-muijoy/package.json

@@ -19,8 +19,8 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
-    "@drincs/nqtr": "^1.0.2",
-    "@drincs/pixi-vn": "^1.8.21",
+    "@drincs/nqtr": "^1.0.3",
+    "@drincs/pixi-vn": "^1.8.25",
     "@tailwindcss/vite": "^4.3.0",
     "@tanstack/hotkeys": "^0.8.0",
     "@tanstack/react-hotkeys": "^0.10.0",

package/template-nqtr-react-vite-muijoy/src/assets/index.ts

@@ -14,16 +14,7 @@ export const manifest: AssetsManifest = {
         ...generatedManifestJson.bundles,
         {
             name: AUDIO_BUNDLE_NAME,
-            assets: [
-                {
-                    alias: "bgm_cheerful",
-                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/audio/bgm_cheerful.wav",
-                },
-                {
-                    alias: "sfx_whoosh",
-                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/audio/sfx_whoosh.wav",
-                },
-            ],
+            assets: [],
         },
         // screens
         {
@@ -31,7 +22,7 @@ export const manifest: AssetsManifest = {
             assets: [
                 {
                     alias: "background_main_menu",
-                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/main-menu.png",
+                    src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/main-menu.png",
                 },
             ],
         },

package/template-nqtr-react-vite-muijoy/src/assets/manifest.gen.json

@@ -1,8 +1,3 @@
 {
-  "bundles": [
-    {
-      "name": "default",
-      "assets": []
-    }
-  ]
-}
+  "bundles": []
+}

package/template-nqtr-react-vite-muijoy/src/components/menus/settings/index.tsx

@@ -1,6 +1,7 @@
 import { About } from "@/components/menus/settings/about";
 import { DialoguesControls } from "@/components/menus/settings/dialogues-controls";
 import { ControlsListSettingsPage } from "@/components/menus/settings/menus/controls";
+import { DiagnosticsSettingsPage } from "@/components/menus/settings/menus/diagnostics";
 import { HistoryListSettingsPage } from "@/components/menus/settings/menus/history";
 import { SaveLoadSettingsPage } from "@/components/menus/settings/menus/save-load";
 import { QuickMenus } from "@/components/menus/settings/quick-menus";
@@ -23,7 +24,7 @@ import { ArrowLeftIcon } from "lucide-react";
 import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
 
-type SettingsTabPath = "menus/controls" | "menus/history" | "menus/save-load";
+type SettingsTabPath = "menus/controls" | "menus/history" | "menus/save-load" | "menus/diagnostics";
 
 type BreadcrumbEntry = {
     id: string;
@@ -38,7 +39,8 @@ export function Settings() {
     const normalizedTab: SettingsTabPath | undefined =
         currentTab === "menus/controls" ||
         currentTab === "menus/history" ||
-        currentTab === "menus/save-load"
+        currentTab === "menus/save-load" ||
+        currentTab === "menus/diagnostics"
             ? (currentTab as SettingsTabPath)
             : undefined;
 
@@ -55,7 +57,8 @@ export function Settings() {
         if (
             normalizedTab === "menus/controls" ||
             normalizedTab === "menus/history" ||
-            normalizedTab === "menus/save-load"
+            normalizedTab === "menus/save-load" ||
+            normalizedTab === "menus/diagnostics"
         ) {
             trail.push({ id: "menus", label: t("menus") });
             trail.push({
@@ -64,13 +67,17 @@ export function Settings() {
                         ? "menus-controls"
                         : normalizedTab === "menus/history"
                           ? "menus-history"
-                          : "menus-save-load",
+                          : normalizedTab === "menus/save-load"
+                            ? "menus-save-load"
+                            : "menus-diagnostics",
                 label:
                     normalizedTab === "menus/controls"
                         ? t("hotkeys_menu")
                         : normalizedTab === "menus/history"
                           ? t("history")
-                          : `${t("save")}/${t("load")}`,
+                          : normalizedTab === "menus/save-load"
+                            ? `${t("save")}/${t("load")}`
+                            : t("diagnostics"),
             });
         }
         return trail;
@@ -112,7 +119,8 @@ export function Settings() {
     if (
         normalizedTab === "menus/controls" ||
         normalizedTab === "menus/history" ||
-        normalizedTab === "menus/save-load"
+        normalizedTab === "menus/save-load" ||
+        normalizedTab === "menus/diagnostics"
     ) {
         return (
             <>
@@ -130,6 +138,7 @@ export function Settings() {
                 {normalizedTab === "menus/controls" ? <ControlsListSettingsPage /> : null}
                 {normalizedTab === "menus/history" ? <HistoryListSettingsPage /> : null}
                 {normalizedTab === "menus/save-load" ? <SaveLoadSettingsPage /> : null}
+                {normalizedTab === "menus/diagnostics" ? <DiagnosticsSettingsPage /> : null}
             </>
         );
     }

package/template-nqtr-react-vite-muijoy/src/components/menus/settings/menus/diagnostics.tsx

@@ -0,0 +1,266 @@
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useDeviceDiagnostics } from "@/lib/hooks/device-diagnostics-hooks";
+import {
+    buildDiagnosticsReportText,
+    downloadDiagnosticsReportJson,
+} from "@/lib/utils/device-diagnostics-utility";
+import { AlertTriangleIcon, CheckIcon, ClipboardCopyIcon, DownloadIcon, XIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+function DiagnosticsSection({ title, children }: { title: string; children: ReactNode }) {
+    return (
+        <div className="flex flex-col gap-2">
+            <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+                {title}
+            </h3>
+            <div className="flex flex-col gap-1 rounded-lg border bg-card/80 p-3">{children}</div>
+        </div>
+    );
+}
+
+function DiagnosticRow({ label, value }: { label: string; value: ReactNode }) {
+    return (
+        <div className="flex items-start justify-between gap-4 text-sm">
+            <span className="text-muted-foreground">{label}</span>
+            <span className="text-right font-medium break-all">{value}</span>
+        </div>
+    );
+}
+
+function CapabilityRow({
+    label,
+    supported,
+    hint,
+}: {
+    label: string;
+    supported: boolean | null;
+    hint?: string;
+}) {
+    const { t } = useTranslation(["ui"]);
+    return (
+        <div className="flex items-center justify-between gap-4 text-sm">
+            <div>
+                <p className="font-medium">{label}</p>
+                {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
+            </div>
+            {supported === null ? (
+                <span className="shrink-0 text-xs text-muted-foreground">
+                    {t("diagnostics_unknown")}
+                </span>
+            ) : supported ? (
+                <CheckIcon className="size-4 shrink-0 text-green-600 dark:text-green-400" />
+            ) : (
+                <XIcon className="size-4 shrink-0 text-red-600 dark:text-red-400" />
+            )}
+        </div>
+    );
+}
+
+export function DiagnosticsSettingsPage() {
+    const diagnostics = useDeviceDiagnostics();
+    const { t } = useTranslation(["ui"]);
+    const { webgl, capabilities, resolution, memory, fps } = diagnostics;
+    const yesNo = (value: boolean | null) =>
+        value === null
+            ? t("diagnostics_unknown")
+            : value
+              ? t("diagnostics_yes")
+              : t("diagnostics_no");
+
+    const handleCopyReport = async () => {
+        try {
+            await navigator.clipboard.writeText(buildDiagnosticsReportText(diagnostics));
+            toast.success(t("diagnostics_report_copied"));
+        } catch {
+            toast.error(t("diagnostics_report_copy_failed"));
+        }
+    };
+
+    const handleDownloadReport = () => {
+        downloadDiagnosticsReportJson(diagnostics);
+        toast.success(t("diagnostics_report_downloaded"));
+    };
+
+    return (
+        <ScrollArea className="flex-1 min-h-0">
+            <div className="mx-auto flex max-w-3xl flex-col gap-4 p-4">
+                <div className="flex justify-end gap-2">
+                    <Button variant="outline" onClick={handleDownloadReport}>
+                        <DownloadIcon />
+                        {t("diagnostics_download_report")}
+                    </Button>
+                    <Button onClick={handleCopyReport}>
+                        <ClipboardCopyIcon />
+                        {t("diagnostics_copy_report")}
+                    </Button>
+                </div>
+
+                {!webgl.webgl2Supported && (
+                    <div className="flex items-start gap-3 rounded-lg border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive">
+                        <AlertTriangleIcon className="mt-0.5 size-5 shrink-0" />
+                        <p>{t("diagnostics_webgl2_missing_message")}</p>
+                    </div>
+                )}
+
+                <DiagnosticsSection title={t("diagnostics_section_engine")}>
+                    <DiagnosticRow
+                        label={t("diagnostics_game_version")}
+                        value={diagnostics.gameVersion}
+                    />
+                    <DiagnosticRow
+                        label={t("diagnostics_pixijs_version")}
+                        value={diagnostics.pixiJsVersion}
+                    />
+                    <DiagnosticRow
+                        label={t("diagnostics_pixivn_version")}
+                        value={diagnostics.pixiVnVersion}
+                    />
+                    <DiagnosticRow
+                        label={t("diagnostics_tonejs_version")}
+                        value={diagnostics.toneJsVersion}
+                    />
+                    <DiagnosticRow
+                        label={t("diagnostics_motion_version")}
+                        value={diagnostics.motionVersion}
+                    />
+                </DiagnosticsSection>
+
+                <DiagnosticsSection title={t("diagnostics_section_device")}>
+                    <DiagnosticRow label={t("diagnostics_platform")} value={diagnostics.platform} />
+                    <DiagnosticRow
+                        label={t("diagnostics_browser_engine")}
+                        value={diagnostics.browserEngine}
+                    />
+                    <DiagnosticRow
+                        label={t("diagnostics_user_agent")}
+                        value={diagnostics.userAgent}
+                    />
+                </DiagnosticsSection>
+
+                <DiagnosticsSection title={t("diagnostics_section_graphics")}>
+                    <DiagnosticRow
+                        label={t("diagnostics_webgl1")}
+                        value={yesNo(webgl.webgl1Supported)}
+                    />
+                    <DiagnosticRow
+                        label={t("diagnostics_webgl2")}
+                        value={yesNo(webgl.webgl2Supported)}
+                    />
+                    <DiagnosticRow
+                        label={t("diagnostics_hardware_acceleration")}
+                        value={yesNo(webgl.hardwareAccelerated)}
+                    />
+                    <DiagnosticRow
+                        label={t("diagnostics_gpu_vendor")}
+                        value={webgl.unmaskedVendor ?? webgl.vendor ?? t("diagnostics_unknown")}
+                    />
+                    <DiagnosticRow
+                        label={t("diagnostics_gpu_renderer")}
+                        value={webgl.unmaskedRenderer ?? webgl.renderer ?? t("diagnostics_unknown")}
+                    />
+                    <DiagnosticRow
+                        label={t("diagnostics_max_texture_size")}
+                        value={webgl.maxTextureSize ?? t("diagnostics_unknown")}
+                    />
+                </DiagnosticsSection>
+
+                <DiagnosticsSection title={t("diagnostics_section_display")}>
+                    <DiagnosticRow
+                        label={t("diagnostics_resolution")}
+                        value={`${resolution.innerWidth}x${resolution.innerHeight}`}
+                    />
+                    <DiagnosticRow
+                        label={t("diagnostics_device_pixel_ratio")}
+                        value={resolution.devicePixelRatio}
+                    />
+                    <DiagnosticRow
+                        label={t("diagnostics_fps")}
+                        value={fps ?? t("diagnostics_unknown")}
+                    />
+                </DiagnosticsSection>
+
+                <DiagnosticsSection title={t("diagnostics_section_memory")}>
+                    {memory ? (
+                        <DiagnosticRow
+                            label={t("diagnostics_js_heap")}
+                            value={`${(memory.usedJSHeapSize / 1024 / 1024).toFixed(1)} / ${(
+                                memory.totalJSHeapSize / 1024 / 1024
+                            ).toFixed(1)} MB`}
+                        />
+                    ) : (
+                        <p className="text-sm text-muted-foreground">
+                            {t("diagnostics_js_heap_unavailable")}
+                        </p>
+                    )}
+                </DiagnosticsSection>
+
+                <DiagnosticsSection title={t("diagnostics_section_capabilities")}>
+                    <CapabilityRow
+                        label={t("diagnostics_webgl2")}
+                        supported={webgl.webgl2Supported}
+                    />
+                    <CapabilityRow
+                        label={t("diagnostics_hardware_acceleration")}
+                        supported={webgl.hardwareAccelerated}
+                    />
+                    <CapabilityRow
+                        label={t("diagnostics_gpu_supported")}
+                        supported={webgl.webgl1Supported || webgl.webgl2Supported}
+                    />
+                    <CapabilityRow
+                        label={t("diagnostics_max_texture_size_check")}
+                        supported={(webgl.maxTextureSize ?? 0) >= 8192}
+                    />
+                    <CapabilityRow
+                        label={t("diagnostics_float_textures")}
+                        supported={webgl.floatTexturesSupported}
+                    />
+                    <CapabilityRow label={t("diagnostics_msaa")} supported={webgl.msaaSupported} />
+                    <CapabilityRow
+                        label={t("diagnostics_shaders_compile")}
+                        supported={webgl.shadersCompile}
+                    />
+                    <CapabilityRow label={t("diagnostics_audio")} supported={capabilities.audio} />
+                    <CapabilityRow
+                        label={t("diagnostics_gamepad")}
+                        supported={capabilities.gamepad}
+                    />
+                    <CapabilityRow
+                        label={t("diagnostics_clipboard")}
+                        supported={capabilities.clipboard}
+                    />
+                    <CapabilityRow
+                        label={t("diagnostics_fullscreen")}
+                        supported={capabilities.fullscreen}
+                    />
+                    <CapabilityRow
+                        label={t("diagnostics_local_storage")}
+                        supported={capabilities.localStorage}
+                    />
+                    <CapabilityRow
+                        label={t("diagnostics_indexed_db")}
+                        supported={capabilities.indexedDb}
+                    />
+                    <CapabilityRow
+                        label={t("diagnostics_steam_overlay")}
+                        supported={capabilities.steamOverlayDetected}
+                        hint={t("diagnostics_steam_overlay_hint")}
+                    />
+                </DiagnosticsSection>
+
+                <DiagnosticsSection title={t("diagnostics_section_extensions")}>
+                    {webgl.keyExtensions.map((extension) => (
+                        <CapabilityRow
+                            key={extension.name}
+                            label={extension.name}
+                            supported={extension.supported}
+                        />
+                    ))}
+                </DiagnosticsSection>
+            </div>
+        </ScrollArea>
+    );
+}

package/template-nqtr-react-vite-muijoy/src/components/menus/settings/quick-menus.tsx

@@ -5,7 +5,7 @@ import { Separator } from "@/components/ui/separator";
 import { useSetSearchParamState } from "@/lib/hooks/navigation-hooks";
 import { Game } from "@drincs/pixi-vn";
 import { useLocation, useNavigate } from "@tanstack/react-router";
-import { Gamepad2Icon, HistoryIcon, LogOutIcon, SaveIcon } from "lucide-react";
+import { Gamepad2Icon, HistoryIcon, LogOutIcon, SaveIcon, StethoscopeIcon } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 export function QuickMenus() {
@@ -18,6 +18,7 @@ export function QuickMenus() {
                 {isInGame && <OpenHistorySettingButton />}
                 <SaveLoadMenuButton />
                 <OpenControlsListSettingButton />
+                <OpenDiagnosticsSettingButton />
             </div>
             {isInGame && <Separator />}
             {isInGame && <ReturnMainMenuButton />}
@@ -49,6 +50,29 @@ export function OpenControlsListSettingButton() {
     );
 }
 
+export function OpenDiagnosticsSettingButton() {
+    const { t } = useTranslation(["ui"]);
+    const setSettingsOpen = useSetSearchParamState<boolean>("settings");
+    const setSettingsTab = useSetSearchParamState<string>("settings_tab");
+
+    return (
+        <Button
+            variant="outline"
+            className="w-full justify-start"
+            onClick={() => {
+                setSettingsOpen(true);
+                setSettingsTab("menus/diagnostics");
+            }}
+        >
+            <StethoscopeIcon />
+            {t("diagnostics")}
+            <KbdGroup className="ml-auto">
+                <Kbd>F8</Kbd>
+            </KbdGroup>
+        </Button>
+    );
+}
+
 export function ReturnMainMenuButton() {
     const navigate = useNavigate();
     const { t } = useTranslation(["ui"]);

package/template-nqtr-react-vite-muijoy/src/lib/hooks/device-diagnostics-hooks.ts

@@ -0,0 +1,68 @@
+import {
+    type DeviceDiagnosticsSnapshot,
+    detectBrowserEngine,
+    detectPlatform,
+    getBrowserCapabilities,
+    getCurrentFps,
+    getGameVersion,
+    getJsMemoryInfo,
+    getMotionVersion,
+    getPixiJsVersion,
+    getPixiVnVersion,
+    getResolutionInfo,
+    getToneJsVersion,
+    getWebglDiagnostics,
+} from "@/lib/utils/device-diagnostics-utility";
+import { useEffect, useMemo, useState } from "react";
+
+const LIVE_REFRESH_INTERVAL_MS = 1000;
+
+/**
+ * WebGL support, browser capabilities, UA, platform and engine don't change during a session,
+ * so they're probed once. FPS, resolution and JS memory are polled since they change live.
+ */
+export function useDeviceDiagnostics(): DeviceDiagnosticsSnapshot {
+    const webgl = useMemo(() => getWebglDiagnostics(), []);
+    const capabilities = useMemo(() => getBrowserCapabilities(), []);
+    const platform = useMemo(() => detectPlatform(), []);
+    const browserEngine = useMemo(() => detectBrowserEngine(), []);
+    const gameVersion = useMemo(() => getGameVersion(), []);
+    const pixiJsVersion = useMemo(() => getPixiJsVersion(), []);
+    const pixiVnVersion = useMemo(() => getPixiVnVersion(), []);
+    const toneJsVersion = useMemo(() => getToneJsVersion(), []);
+    const motionVersion = useMemo(() => getMotionVersion(), []);
+
+    const [resolution, setResolution] = useState(() => getResolutionInfo());
+    const [memory, setMemory] = useState(() => getJsMemoryInfo());
+    const [fps, setFps] = useState<number | null>(() => getCurrentFps());
+
+    useEffect(() => {
+        const onResize = () => setResolution(getResolutionInfo());
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    }, []);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setFps(getCurrentFps());
+            setMemory(getJsMemoryInfo());
+        }, LIVE_REFRESH_INTERVAL_MS);
+        return () => clearInterval(interval);
+    }, []);
+
+    return {
+        webgl,
+        capabilities,
+        resolution,
+        memory,
+        fps,
+        userAgent: navigator.userAgent,
+        platform,
+        browserEngine,
+        gameVersion,
+        pixiJsVersion,
+        pixiVnVersion,
+        toneJsVersion,
+        motionVersion,
+    };
+}

package/template-nqtr-react-vite-muijoy/src/lib/hooks/hotkeys-hooks.ts

@@ -175,6 +175,11 @@ export function useSettingsHotkeys(): null {
         setSettingsTab("menus/controls");
     }, [setSettingsOpen, setSettingsTab]);
 
+    const openDiagnosticsPage = useCallback(() => {
+        setSettingsOpen(true);
+        setSettingsTab("menus/diagnostics");
+    }, [setSettingsOpen, setSettingsTab]);
+
     useHotkeys([
         {
             hotkey: "Escape",
@@ -197,6 +202,17 @@ export function useSettingsHotkeys(): null {
                 },
             },
         },
+        {
+            hotkey: "F8",
+            callback: openDiagnosticsPage,
+            options: {
+                enabled: !isAnyMenuOrDialogOpen,
+                meta: {
+                    name: t("diagnostics"),
+                    description: t("diagnostics_hotkey_description"),
+                },
+            },
+        },
     ]);
 
     return null;