diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette.tsx
index bb643d9c..f8a7ac09 100644
--- a/src/components/CommandPalette.tsx
+++ b/src/components/CommandPalette.tsx
@@ -24,6 +24,7 @@ import {
Bot,
TextAlignStart,
Save,
+ Keyboard,
} from "lucide-react";
import { DatabaseConnection, SavedQuery, QueryHistoryItem } from "@/lib/types";
import { relationObjects, type DetailedObject } from "@/lib/db/detailed-object";
@@ -64,6 +65,8 @@ interface CommandPaletteProps {
* shell declines to offer elsewhere too (`MobileNav.onOpenAgent`).
*/
onAskAgent?: () => void;
+ /** Opens the standalone shell's `ShortcutsDialog` instance (#746). */
+ onShowShortcuts: () => void;
onLogout: () => void;
}
@@ -84,6 +87,7 @@ export function CommandPalette({
onFormatQuery,
onSaveQuery,
onAskAgent,
+ onShowShortcuts,
onLogout,
}: CommandPaletteProps) {
const [open, setOpen] = useState(false);
@@ -142,6 +146,11 @@ export function CommandPalette({
Save Current Query
+ runAction(onShowShortcuts)}>
+
+ Keyboard Shortcuts
+ ?
+
{onAskAgent && (
/*
Named for the ask, not for the surface: `MobileNav` has a control
diff --git a/src/components/DataProfiler.tsx b/src/components/DataProfiler.tsx
index 60aa76b2..9abf6153 100644
--- a/src/components/DataProfiler.tsx
+++ b/src/components/DataProfiler.tsx
@@ -18,6 +18,7 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
+import { ShortcutsDialog } from "@/components/ShortcutsDialog";
interface DataProfilerProps {
isOpen: boolean;
@@ -205,6 +206,11 @@ export function DataProfiler({
if (!isOpen) return;
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key !== "Escape") return;
+ // Radix's Dialog (the shortcuts dialog, #746) handles Escape in the capture
+ // phase and only calls preventDefault(), never stopPropagation() - so with
+ // both open, this bubble-phase listener still fires. Without this check, one
+ // Escape closed the shortcuts dialog AND the profiler underneath it.
+ if (event.defaultPrevented) return;
onClose();
};
document.addEventListener("keydown", handleKeyDown);
@@ -214,221 +220,236 @@ export function DataProfiler({
if (!isOpen) return null;
return (
-
-
- {/* Header */}
- {/*
+ <>
+ {/*
+ Mounted only while the profiler is open (#746) - it unmounts, listener and all, the
+ same instant `isOpen` does, matching the Escape effect above. This is what makes it
+ reachable from the embedded workspace too: that shell renders this component but not
+ `Studio.tsx`, so there is nowhere else to mount it that would still cover both hosts.
+ */}
+
+
+
+ {/* Header */}
+ {/*
`shrink-0` and `relative z-10`, and the title row `min-w-0` with the table
name truncating: the card is `overflow-hidden`, so a header that shrinks or
overflows takes its close control out of reach along with it - and the names
that overflow it are exactly the ones the profile route fails on (a Redis key
prefix is a whole glob, not an identifier).
*/}
-
+
);
}
diff --git a/src/components/ShortcutsDialog.tsx b/src/components/ShortcutsDialog.tsx
new file mode 100644
index 00000000..b1b90da1
--- /dev/null
+++ b/src/components/ShortcutsDialog.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useSyncExternalStore } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { SHORTCUT_GROUPS } from "@/lib/shortcuts";
+
+export interface ShortcutsDialogRef {
+ open: () => void;
+}
+
+/**
+ * Open state lives at module scope rather than in this component's own `useState` (#746
+ * review): `Studio.tsx` mounts one instance unconditionally and `DataProfiler.tsx` mounts a
+ * second whenever it's open, so in the standalone shell with the profiler open BOTH are
+ * mounted at once. Two independent `useState`s would mean two independent dialogs — "?"
+ * opening both, and one Escape closing only the topmost, leaving the other (and the profiler
+ * underneath) still up. A shared store fixes the STATE half of that; `primaryInstanceKey`
+ * below fixes the other half, which instance actually renders the `Dialog`.
+ */
+let sharedOpen = false;
+const openListeners = new Set<() => void>();
+
+function setSharedOpen(next: boolean): void {
+ if (sharedOpen === next) return;
+ sharedOpen = next;
+ openListeners.forEach((listener) => listener());
+}
+
+function subscribeOpen(callback: () => void): () => void {
+ openListeners.add(callback);
+ return () => openListeners.delete(callback);
+}
+
+function getOpenSnapshot(): boolean {
+ return sharedOpen;
+}
+
+function getServerOpenSnapshot(): boolean {
+ return false;
+}
+
+/**
+ * Whichever instance mounts first renders the `Dialog`; a later one sharing the tree (the
+ * standalone shell's Studio-level instance is always first in practice, since `DataProfiler`
+ * mounts only once the profiler opens) shares the same open flag but renders nothing, so
+ * there is exactly one `Dialog` no matter how many instances are mounted at once. The
+ * mutation lives inside `subscribePrimary`, which `useSyncExternalStore` calls from its own
+ * effect — not inside an effect of this component's — so this never calls setState from
+ * render or from an effect body of its own; `isPrimary` is a pure read of external state,
+ * the same shape `useFavoriteConnections`/`useConnectionOrder` already use for this reason.
+ */
+let primaryInstanceKey: object | null = null;
+const mountedInstances = new Map void>();
+
+function subscribePrimary(key: object, callback: () => void): () => void {
+ mountedInstances.set(key, callback);
+ if (primaryInstanceKey === null) primaryInstanceKey = key;
+ return () => {
+ mountedInstances.delete(key);
+ if (primaryInstanceKey === key) {
+ // Promote whichever instance is still mounted, if any, so it starts rendering the
+ // Dialog. In practice this is Studio.tsx's own instance outliving DataProfiler's, not
+ // the reverse, but nothing here assumes that ordering.
+ const [nextKey] = mountedInstances.keys();
+ primaryInstanceKey = nextKey ?? null;
+ }
+ // Nothing left to show it to - and in the embedded workspace, DataProfiler's is the
+ // only instance there is, so this is what closes the dialog on the profiler's own
+ // unmount rather than leaving a stale "open" flag for the next time it mounts.
+ if (mountedInstances.size === 0) setSharedOpen(false);
+ mountedInstances.forEach((listener) => listener());
+ };
+}
+
+function isTypingTarget(target: EventTarget | null): boolean {
+ if (!(target instanceof HTMLElement)) return false;
+ if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) return true;
+ if (target.isContentEditable) return true;
+ // Monaco 0.56 focuses a `div.native-edit-context`, not a textarea or a contentEditable
+ // element, so neither check above sees it - and `?` is the positional-parameter
+ // placeholder in SQLite and MySQL, so missing this let the dialog eat the keystroke
+ // mid-query. `.monaco-editor` is Monaco's own stable root class, not an internal we're
+ // reaching past: checking "inside the editor at all" survives Monaco changing which
+ // element it focuses next, where chasing that element by name would not.
+ return target.closest(".monaco-editor") !== null;
+}
+
+/**
+ * The single place that answers "what shortcuts exist" (#746). Self-contained, following
+ * `CommandPalette`'s own Cmd/Ctrl+K effect: every instance owns its own "?" listener, so
+ * mounting it in both `Studio.tsx` and `DataProfiler.tsx` — `DataProfiler` is itself mounted
+ * by both the standalone shell and the embedded workspace — is what makes the dialog reachable
+ * everywhere without either host threading open state through props. What's shared across
+ * instances (module scope, above) is the open flag itself and which one actually renders.
+ *
+ * `CommandPalette`'s "Keyboard Shortcuts" entry reaches the standalone shell's instance
+ * through the imperative handle below, the same seam `QueryEditorRef` already uses for the
+ * editor. Its `open()` writes the shared flag, so it opens whichever instance is currently
+ * rendering the dialog regardless of which one the ref happens to be attached to.
+ */
+export const ShortcutsDialog = forwardRef(function ShortcutsDialog(_props, ref) {
+ const instanceKey = useRef