apache · choo121600 · Jun 8, 2026 · Jun 9, 2026 · Jun 10, 2026 · Jun 10, 2026
@@ -219,6 +219,47 @@
   },
   "selectLanguage": "Select Language",
   "selected": "Selected",
+  "shortcuts": {
+    "categories": {
+      "code": "Code",
+      "dagView": "Dag View",
+      "filters": "Filters",
+      "global": "Global",
+      "logs": "Logs",
+      "navigation": "Navigation",
+      "runActions": "Run & Task Actions",
+      "search": "Search"
+    },
+    "descriptions": {
+      "clearRun": "Clear $t(dagRun_one)",
+      "clearTaskInstance": "Clear $t(taskInstance_one)",
+      "downloadLogs": "Download logs",
+      "focusFilterSearch": "Focus filter search",
+      "focusLogSearch": "Search logs",
+      "focusSearch": "Focus search",
+      "markRunFailed": "Mark $t(dagRun_one) as failed",
+      "markRunSuccess": "Mark $t(dagRun_one) as success",
+      "markTaskFailed": "Mark $t(task_one) as failed",
+      "markTaskGroupFailed": "Mark $t(taskGroup_one) as failed",
+      "markTaskGroupSuccess": "Mark $t(taskGroup_one) as success",
+      "markTaskSuccess": "Mark $t(task_one) as success",
+      "navigateTasks": "Navigate $t(task_other)",
+      "openGraphFilters": "Open graph filters",
+      "scrollBottom": "Scroll to bottom",
+      "scrollTop": "Scroll to top",
+      "searchDags": "Search $t(dag_other)",
+      "showHelp": "Show $t(shortcuts.title)",
+      "toggleExpand": "Expand or collapse all groups",
+      "toggleFullscreen": "Toggle fullscreen",
+      "toggleGraphGrid": "Toggle graph / grid view",
+      "toggleSource": "Toggle source",
+      "toggleTaskGroup": "Expand or collapse $t(taskGroup_one)",
+      "toggleTimestamp": "Toggle timestamps",
+      "toggleWrap": "Toggle $t(wrap.wrap)"
+    },
+    "empty": "No keyboard shortcuts are available on this page.",
+    "title": "Keyboard Shortcuts"
+  },
   "showDetailsPanel": "Show Details Panel",
   "signedInAs": "Signed in as",
   "source": {

@@ -107,9 +107,7 @@
     "warning": "WARNING"
   },
   "navigation": {
-    "navigation": "Navigation: Shift+{{arrow}}",
-    "openGraphFilters": "Task Filters: Ctrl+Shift+F",
-    "toggleGroup": "Toggle group: Space"
+    "openGraphFilters": "Task Filters: Ctrl+Shift+F"
   },
   "notFound": {
     "back": "Go Back",

@@ -17,12 +17,13 @@
  * under the License.
  */
 import { useDisclosure } from "@chakra-ui/react";
-import { useHotkeys } from "react-hotkeys-hook";
 import { useTranslation } from "react-i18next";
 import { CgRedo } from "react-icons/cg";
 
 import type { DAGRunResponse } from "openapi/requests/types.gen";
 import { IconButton } from "src/components/ui";
+import { SHORTCUTS } from "src/context/keyboardShortcuts";
+import { useShortcut } from "src/hooks/useShortcut";
 
 import ClearRunDialog from "./ClearRunDialog";
 
@@ -35,13 +36,13 @@ const ClearRunButton = ({ dagRun, isHotkeyEnabled = false }: Props) => {
   const { onClose, onOpen, open } = useDisclosure();
   const { t: translate } = useTranslation();
 
-  useHotkeys(
-    "shift+c",
-    () => {
+  useShortcut({
+    ...SHORTCUTS.runActions.clearRun,
+    callback: () => {
       onOpen();
     },
-    { enabled: isHotkeyEnabled },
-  );
+    options: { enabled: isHotkeyEnabled },
+  });
 
   return (
     <>

@@ -17,13 +17,14 @@
  * under the License.
  */
 import { useDisclosure } from "@chakra-ui/react";
-import { useHotkeys } from "react-hotkeys-hook";
 import { useTranslation } from "react-i18next";
 import { CgRedo } from "react-icons/cg";
 
 import type { LightGridTaskInstanceSummary, TaskInstanceResponse } from "openapi/requests/types.gen";
 import { ClearGroupTaskInstanceDialog } from "src/components/Clear/TaskInstance/ClearGroupTaskInstanceDialog";
 import { IconButton } from "src/components/ui";
+import { SHORTCUTS } from "src/context/keyboardShortcuts";
+import { useShortcut } from "src/hooks/useShortcut";
 
 import ClearTaskInstanceDialog from "./ClearTaskInstanceDialog";
 
@@ -58,17 +59,17 @@ const ClearTaskInstanceButton = ({
 
   const selectedInstance = taskInstance ?? groupTaskInstance;
 
-  useHotkeys(
-    "shift+c",
-    () => {
+  useShortcut({
+    ...SHORTCUTS.runActions.clearTaskInstance,
+    callback: () => {
       if (onOpen && selectedInstance) {
         onOpen(selectedInstance);
       } else {
         onOpenInternal();
       }
     },
-    { enabled: isHotkeyEnabled },
-  );
+    options: { enabled: isHotkeyEnabled },
+  });
 
   const label = allMapped
     ? isHotkeyEnabled

@@ -18,11 +18,12 @@
  */
 import { HStack } from "@chakra-ui/react";
 import { useRef } from "react";
-import { useHotkeys } from "react-hotkeys-hook";
 import { LuRegex } from "react-icons/lu";
 
 import { AdvancedSearchToggle } from "src/components/AdvancedSearchToggle";
+import { SHORTCUTS } from "src/context/keyboardShortcuts";
 import { useAdvancedSearch } from "src/hooks/useAdvancedSearch";
+import { useShortcut } from "src/hooks/useShortcut";
 
 import { InputWithAddon } from "../../ui";
 import { FilterPill } from "../FilterPill";
@@ -42,15 +43,15 @@ export const TextSearchFilter = ({ filter, onChange, onRemove }: FilterPluginPro
     onChange(newValue || undefined);
   };
 
-  useHotkeys(
-    "mod+k",
-    () => {
+  useShortcut({
+    ...SHORTCUTS.search.focusFilterSearch,
+    callback: () => {
       if (!filter.config.hotkeyDisabled) {
         hotkeyInputRef.current?.focus();
       }
     },
-    { enabled: !filter.config.hotkeyDisabled, preventDefault: true },
-  );
+    options: { enabled: !filter.config.hotkeyDisabled, preventDefault: true },
+  });
 
   const isAdvanced = showAdvancedToggle && advanced.enabled;
   const stringValue = hasValue && typeof filter.value === "string" ? filter.value : "";

@@ -25,7 +25,6 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import { useEffect, useRef, useState } from "react";
-import { useHotkeys } from "react-hotkeys-hook";
 import { useTranslation } from "react-i18next";
 import { FiSearch } from "react-icons/fi";
 import { useParams, useSearchParams } from "react-router-dom";
@@ -39,6 +38,8 @@ import { NumberInputField, NumberInputRoot } from "src/components/ui/NumberInput
 import { SearchParamsKeys } from "src/constants/searchParams";
 import { taskInstanceStateOptions } from "src/constants/stateOptions";
 import { useGroups } from "src/context/groups";
+import { SHORTCUTS } from "src/context/keyboardShortcuts";
+import { useShortcut } from "src/hooks/useShortcut";
 
 export const GraphTaskFilters = () => {
   const { t: translate } = useTranslation(["dag", "tasks"]);
@@ -140,7 +141,11 @@ export const GraphTaskFilters = () => {
 
   const [isOpen, setIsOpen] = useState(false);
 
-  useHotkeys("mod+shift+f", () => setIsOpen(true), { preventDefault: true });
+  useShortcut({
+    ...SHORTCUTS.filters.openGraphFilters,
+    callback: () => setIsOpen(true),
+    options: { preventDefault: true },
+  });
 
   const panelTitle = translate("dag:panel.graphFilters.title");
 

@@ -0,0 +1,106 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box, Flex, HStack, Heading, Kbd, Text, VStack } from "@chakra-ui/react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Dialog } from "src/components/ui";
+import {
+  SHORTCUT_CATEGORIES,
+  SHORTCUTS,
+  type ShortcutEntry,
+  useShortcutRegistry,
+} from "src/context/keyboardShortcuts";
+import { useShortcut } from "src/hooks/useShortcut";
+import { getMetaKey } from "src/utils";
+
+import { formatShortcutCombo } from "./formatShortcutCombo";
+
+const buildGroups = (shortcuts: ReadonlyArray<ShortcutEntry>) =>
+  SHORTCUT_CATEGORIES.map((category) => {
+    const seen = new Set<string>();
+    const items = shortcuts
+      .filter((entry) => entry.category === category)
+      .filter((entry) => {
+        const key = `${entry.keys.join("+")}|${entry.description}`;
+
+        if (seen.has(key)) {
+          return false;
+        }
+        seen.add(key);
+
+        return true;
+      });
+
+    return { category, items };
+  }).filter((group) => group.items.length > 0);
+
+export const KeyboardShortcutsModal = () => {
+  const { t: translate } = useTranslation("common");
+  const { shortcuts } = useShortcutRegistry();
+  const [open, setOpen] = useState(false);
+  const metaKey = getMetaKey();
+
+  const toggle = () => setOpen((prev) => !prev);
+
+  useShortcut({
+    ...SHORTCUTS.global.showHelp,
+    callback: toggle,
+  });
+
+  const groups = buildGroups(shortcuts);
+
+  return (
+    <Dialog.Root lazyMount onOpenChange={(event) => setOpen(event.open)} open={open} size="md">
+      <Dialog.Content backdrop>
+        <Dialog.Header>{translate("shortcuts.title")}</Dialog.Header>
+        <Dialog.CloseTrigger />
+        <Dialog.Body>
+          {groups.length === 0 ? (
+            <Text color="fg.muted">{translate("shortcuts.empty")}</Text>
+          ) : (
+            <VStack align="stretch" gap={4}>
+              {groups.map(({ category, items }) => (
+                <Box key={category}>
+                  <Heading color="fg.muted" mb={2} size="xs" textTransform="uppercase">
+                    {translate(`shortcuts.categories.${category}`)}
+                  </Heading>
+                  <VStack align="stretch" gap={1}>
+                    {items.map((entry) => (
+                      <Flex alignItems="center" gap={4} justifyContent="space-between" key={entry.id}>
+                        <Text fontSize="sm">{entry.description}</Text>
+                        <HStack gap={1}>
+                          {entry.keys.map((combo) => (
+                            <Kbd key={combo} size="sm">
+                              {formatShortcutCombo(combo, metaKey)}
+                            </Kbd>
+                          ))}
+                        </HStack>
+                      </Flex>
+                    ))}
+                  </VStack>
+                </Box>
+              ))}
+            </VStack>
+          )}
+        </Dialog.Body>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+};
@@ -0,0 +1,41 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { describe, expect, it } from "vitest";
+
+import { formatShortcutCombo } from "./formatShortcutCombo";
+
+describe("formatShortcutCombo", () => {
+  it.each([
+    ["w", "⌘", "W"],
+    ["mod+k", "⌘", "⌘ K"],
+    ["mod+k", "Ctrl", "Ctrl K"],
+    ["mod+shift+f", "⌘", "⌘ ⇧ F"],
+    ["mod+ArrowUp", "Ctrl", "Ctrl ↑"],
+    ["shift+ArrowDown", "⌘", "⇧ ↓"],
+    ["space", "⌘", "Space"],
+    ["/", "⌘", "/"],
+  ])("formats %s (meta=%s) as %s", (combo, metaKey, expected) => {
+    expect(formatShortcutCombo(combo, metaKey)).toBe(expected);
+  });
+
+  it("renders the ? alias for the help shortcut regardless of casing", () => {
+    expect(formatShortcutCombo("shift+Slash", "⌘")).toBe("?");
+    expect(formatShortcutCombo("shift+slash", "Ctrl")).toBe("?");
+  });
+});