feat(desktop): hidden 8-click logo gesture to open DevTools (agentscope-ai#5805)

Author: zhaozhuang521

console/src-tauri/Cargo.toml

@@ -25,7 +25,7 @@ semver = "1"
 base64 = "0.22"
 minisign-verify = "0.2"
 sha2 = "0.10"
-tauri = { version = "2.10.3", features = ["tray-icon"] }
+tauri = { version = "2.10.3", features = ["tray-icon", "devtools"] }
 tauri-plugin-log = "2"
 tauri-plugin-shell = "2"
 tauri-plugin-dialog = "2"

console/src-tauri/capabilities/default.json

@@ -4,14 +4,16 @@
   "description": "enables the default permissions",
   "windows": ["main"],
   "remote": {
-    "urls": ["http://127.0.0.1:*"]
+    "urls": ["http://127.0.0.1:*", "http://localhost:*"]
   },
   "permissions": [
     "backend",
     "backend-download",
     "core:default",
+    "core:webview:allow-internal-toggle-devtools",
     "desktop-updater-check",
     "desktop-updater-install",
+    "devtools",
     "dialog:allow-save",
     "open-external-link",
     "tray"

console/src-tauri/icons/icon.png

@@ -0,0 +1,4 @@
+[[permission]]
+identifier = "devtools"
+description = "Allows the frontend to open DevTools via the hidden 8-click logo gesture."
+commands.allow = ["open_devtools"]

console/src-tauri/permissions/devtools.toml

@@ -6,7 +6,15 @@ mod external_link;
 mod updates;
 mod tray;
 
-use tauri::{Manager, RunEvent, WindowEvent};
+use tauri::{Manager, RunEvent, WebviewWindow, WindowEvent};
+
+/// Opens the WebView DevTools. Gated by the hidden 8-click logo gesture in the
+/// frontend so end users cannot open DevTools via the default context menu or
+/// keyboard shortcuts in production builds.
+#[tauri::command]
+fn open_devtools(window: WebviewWindow) {
+    window.open_devtools();
+}
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 /// Build the desktop app, wire native plugins/commands, and stop the backend on exit.
@@ -16,6 +24,7 @@ pub fn run() {
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_updater::Builder::new().build())
         .invoke_handler(tauri::generate_handler![
+            open_devtools,
             backend_download::download_backend_file,
             backend::backend_port,
             backend::backend_startup_error,

console/src-tauri/src/lib.rs

@@ -37,6 +37,7 @@ import { languageApi } from "./api/modules/language";
 import { useUploadLimitStore } from "./stores/uploadLimitStore";
 import { getApiUrl, getApiToken, clearAuthToken } from "./api/config";
 import CloseWindowPrompt from "./tauri/CloseWindowPrompt";
+import { isTauri } from "@tauri-apps/api/core";
 import "./styles/layout.css";
 import "./styles/form-override.css";
 
@@ -168,6 +169,16 @@ function AppInner() {
     };
   }, [i18n]);
 
+  // Disable the default browser context menu in the Tauri desktop build so
+  // users cannot open DevTools via right-click. DevTools is still available
+  // through the hidden 8-click logo gesture handled in Header.tsx.
+  useEffect(() => {
+    if (!isTauri()) return;
+    const preventContextMenu = (e: MouseEvent) => e.preventDefault();
+    window.addEventListener("contextmenu", preventContextMenu);
+    return () => window.removeEventListener("contextmenu", preventContextMenu);
+  }, []);
+
   // Wait for plugins to load before rendering routes that might be patched
   if (pluginsLoading) {
     return null;

console/src/App.tsx

@@ -1,4 +1,13 @@
-import { Layout, Space, Badge, Spin, Tooltip, Dropdown, Popover } from "antd";
+import {
+  Layout,
+  Space,
+  Badge,
+  Spin,
+  Tooltip,
+  Dropdown,
+  Popover,
+  message,
+} from "antd";
 import type { MenuProps } from "antd";
 import LanguageSwitcher, {
   LANGUAGE_LIST,
@@ -23,7 +32,8 @@ import {
   compareVersions,
 } from "./constants";
 import { useTheme } from "../contexts/ThemeContext";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
+import { invoke } from "@tauri-apps/api/core";
 import { Slot } from "../plugins/registry/Slot";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -80,6 +90,7 @@ export default function Header() {
   const [latestVersion, setLatestVersion] = useState<string>("");
   const [updateModalOpen, setUpdateModalOpen] = useState(false);
   const [updateMarkdown, setUpdateMarkdown] = useState<string>("");
+  const logoClicksRef = useRef<number[]>([]);
 
   useEffect(() => {
     api
@@ -88,6 +99,34 @@ export default function Header() {
       .catch(() => {});
   }, []);
 
+  // Hidden gesture: 8 rapid clicks on the logo within 3 seconds toggles DevTools
+  // in the Tauri desktop build. This keeps DevTools inaccessible via the default
+  // context menu or keyboard shortcuts while still allowing support/debugging.
+  const handleLogoClick = () => {
+    if (!onDesktop) return;
+    const now = Date.now();
+    const windowStart = now - 3000;
+    logoClicksRef.current = logoClicksRef.current.filter(
+      (time) => time > windowStart,
+    );
+    logoClicksRef.current.push(now);
+    if (logoClicksRef.current.length >= 8) {
+      logoClicksRef.current = [];
+      invoke("open_devtools")
+        .then(() => message.success("DevTools opened"))
+        .catch((err: unknown) => {
+          const errMsg =
+            err instanceof Error
+              ? err.message
+              : typeof err === "string"
+              ? err
+              : JSON.stringify(err);
+          console.error("Failed to open DevTools:", errMsg);
+          message.error(`DevTools error: ${errMsg}`);
+        });
+    }
+  };
+
   // Web-only PyPI fallback: desktop path is owned by DesktopUpdateContext.
   useEffect(() => {
     if (onDesktop) return;
@@ -297,7 +336,7 @@ export default function Header() {
   return (
     <>
       <AntHeader className={styles.header}>
-        <div className={styles.logoWrapper}>
+        <div className={styles.logoWrapper} onClick={handleLogoClick}>
           {/*
             Slot lets a plugin replace the brand logo (e.g. a per-agent
             branding override). When no plugin registers a replacement —