From cd8cd0fb5c5cb56e437827966e1b9b731d9c581c Mon Sep 17 00:00:00 2001
From: Lum1104 <linyux1104@163.com>
Date: Tue, 24 Mar 2026 10:19:31 +0800
Subject: [PATCH] fix: keyboard shortcuts bugs and add shortcut hint
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix ? shortcut: add shiftKey: true so it matches on standard keyboards
- Fix Escape: keep hook always enabled so ESC closes the modal
  (remove dead showKeyboardHelp branch, read all state at invocation time)
- Fix formatShortcutKey: don't show redundant ⇧ for shifted punctuation
- Remove stale showKeyboardHelp from useMemo deps
- Add "Press ? for keyboard shortcuts" hint in graph area

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../packages/dashboard/src/App.tsx               | 16 ++++++++++------
 .../dashboard/src/hooks/useKeyboardShortcuts.ts  |  6 ++++--
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/understand-anything-plugin/packages/dashboard/src/App.tsx b/understand-anything-plugin/packages/dashboard/src/App.tsx
index 6961930..3f1f265 100644
--- a/understand-anything-plugin/packages/dashboard/src/App.tsx
+++ b/understand-anything-plugin/packages/dashboard/src/App.tsx
@@ -32,6 +32,7 @@ function App() {
       // Help
       {
         key: "?",
+        shiftKey: true,
         description: "Show keyboard shortcuts",
         action: () => setShowKeyboardHelp((prev) => !prev),
         category: "General",
@@ -43,14 +44,14 @@ function App() {
         action: () => {
           // Read from store at invocation time to avoid stale closures
           const state = useDashboardStore.getState();
-          if (showKeyboardHelp) {
-            setShowKeyboardHelp(false);
-          } else if (state.codeViewerOpen) {
+          if (state.codeViewerOpen) {
             state.closeCodeViewer();
           } else if (state.selectedNodeId) {
             state.selectNode(null);
           } else if (state.tourActive) {
             state.stopTour();
+          } else {
+            setShowKeyboardHelp(false);
           }
         },
         category: "Navigation",
@@ -109,11 +110,11 @@ function App() {
         category: "View",
       },
     ],
-    [showKeyboardHelp]
+    []
   );
 
   // Register keyboard shortcuts
-  useKeyboardShortcuts(shortcuts, !showKeyboardHelp);
+  useKeyboardShortcuts(shortcuts);
 
   useEffect(() => {
     fetch("/knowledge-graph.json")
@@ -219,8 +220,11 @@ function App() {
       {/* Main content: Graph + Sidebar */}
       <div className="flex-1 flex min-h-0 relative">
         {/* Graph area */}
-        <div className="flex-1 min-w-0 min-h-0">
+        <div className="flex-1 min-w-0 min-h-0 relative">
           <GraphView />
+          <div className="absolute top-3 right-3 text-sm text-text-muted/60 pointer-events-none select-none">
+            Press <kbd className="kbd">?</kbd> for keyboard shortcuts
+          </div>
         </div>
 
         {/* Right sidebar */}
diff --git a/understand-anything-plugin/packages/dashboard/src/hooks/useKeyboardShortcuts.ts b/understand-anything-plugin/packages/dashboard/src/hooks/useKeyboardShortcuts.ts
index a46d754..fcf91e3 100644
--- a/understand-anything-plugin/packages/dashboard/src/hooks/useKeyboardShortcuts.ts
+++ b/understand-anything-plugin/packages/dashboard/src/hooks/useKeyboardShortcuts.ts
@@ -60,10 +60,12 @@ export function formatShortcutKey(shortcut: KeyboardShortcut): string {
   if (shortcut.ctrlKey || shortcut.metaKey) {
     keys.push(isMac ? "⌘" : "Ctrl");
   }
-  if (shortcut.shiftKey) keys.push("⇧");
+  // Don't show ⇧ for keys that inherently require Shift (e.g. ?, !, @)
+  const isShiftedPunctuation = shortcut.key.length === 1 && /[^a-zA-Z0-9]/.test(shortcut.key);
+  if (shortcut.shiftKey && !isShiftedPunctuation) keys.push("⇧");
   if (shortcut.altKey) keys.push(isMac ? "⌥" : "Alt");
 
-  keys.push(shortcut.key.toUpperCase());
+  keys.push(isShiftedPunctuation ? shortcut.key : shortcut.key.toUpperCase());
 
   return keys.join(" + ");
 }