improvement: detect and warn about duplicate shortcuts (#7412)

Closes #7395 

<img width="877" height="593" alt="Screenshot 2025-12-05 at 10 10 05 AM"
src="https://github.com/user-attachments/assets/220dc1bb-c711-4e45-b855-7003aa9985ef"
/>

Author: mscolnick

frontend/src/components/editor/controls/duplicate-shortcut-banner.tsx

@@ -0,0 +1,50 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { AlertTriangleIcon } from "lucide-react";
+import { KeyboardHotkeys } from "@/components/shortcuts/renderShortcut";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import type { DuplicateGroup } from "@/hooks/useDuplicateShortcuts";
+
+interface DuplicateShortcutBannerProps {
+  duplicates: DuplicateGroup[];
+}
+
+/**
+ * Banner component that warns about duplicate keyboard shortcuts.
+ * Displays a warning when multiple actions share the same key binding.
+ */
+export const DuplicateShortcutBanner: React.FC<
+  DuplicateShortcutBannerProps
+> = ({ duplicates }) => {
+  // Don't render if no duplicates
+  if (duplicates.length === 0) {
+    return null;
+  }
+
+  return (
+    <Alert variant="warning" className="mb-4">
+      <AlertTriangleIcon className="h-4 w-4" />
+      <AlertTitle>Duplicate shortcuts</AlertTitle>
+      <AlertDescription>
+        <p className="mb-2">
+          Multiple actions are assigned to the same keyboard shortcut:
+        </p>
+        <ul className="space-y-2">
+          {duplicates.map(({ key, actions }) => (
+            <li key={key} className="text-xs">
+              <div className="flex items-center gap-2 mb-1">
+                <KeyboardHotkeys shortcut={key} />
+                <span className="font-semibold">is used by:</span>
+              </div>
+              <ul className="ml-6 list-disc">
+                {actions.map(({ action, name }) => (
+                  <li key={action}>{name}</li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      </AlertDescription>
+    </Alert>
+  );
+};

frontend/src/components/editor/controls/keyboard-shortcuts.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { atom, useAtom, useAtomValue } from "jotai";
-import { EditIcon, XIcon } from "lucide-react";
+import { AlertTriangleIcon, EditIcon, XIcon } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -15,6 +15,7 @@ import {
 } from "@/core/hotkeys/hotkeys";
 import { isPlatformMac } from "@/core/hotkeys/shortcuts";
 import { useRequestClient } from "@/core/network/requests";
+import { useDuplicateShortcuts } from "../../../hooks/useDuplicateShortcuts";
 import { useHotkey } from "../../../hooks/useHotkey";
 import { KeyboardHotkeys } from "../../shortcuts/renderShortcut";
 import {
@@ -25,6 +26,7 @@ import {
   DialogPortal,
   DialogTitle,
 } from "../../ui/dialog";
+import { DuplicateShortcutBanner } from "./duplicate-shortcut-banner";
 
 export const keyboardShortcutsAtom = atom(false);
 
@@ -37,6 +39,10 @@ export const KeyboardShortcuts: React.FC = () => {
   const [config, setConfig] = useResolvedMarimoConfig();
   const hotkeys = useAtomValue(hotkeysAtom);
   const { saveUserConfig } = useRequestClient();
+  const { duplicates, hasDuplicate, getDuplicatesFor } = useDuplicateShortcuts(
+    hotkeys,
+    "Markdown",
+  );
 
   useHotkey("global.showHelp", () => setIsOpen((v) => !v));
 
@@ -214,6 +220,9 @@ export const KeyboardShortcuts: React.FC = () => {
       );
     }
 
+    const isDuplicate = hasDuplicate(action);
+    const duplicateActions = isDuplicate ? getDuplicatesFor(action) : [];
+
     return (
       <div
         key={action}
@@ -231,7 +240,20 @@ export const KeyboardShortcuts: React.FC = () => {
           <div className="w-3 h-3" />
         )}
         <KeyboardHotkeys className="justify-end" shortcut={hotkey.key} />
-        <span>{hotkey.name.toLowerCase()}</span>
+        <div className="flex items-center gap-1">
+          <span>{hotkey.name.toLowerCase()}</span>
+          {isDuplicate && (
+            <div className="group relative inline-flex">
+              <AlertTriangleIcon className="w-3 h-3 text-(--yellow-11)" />
+              <div className="invisible group-hover:visible absolute left-0 top-5 z-10 w-max max-w-xs rounded-md bg-(--yellow-2) border border-(--yellow-7) p-2 text-xs text-(--yellow-11) shadow-md">
+                Also used by:{" "}
+                {duplicateActions
+                  .map((a) => hotkeys.getHotkey(a).name.toLowerCase())
+                  .join(", ")}
+              </div>
+            </div>
+          )}
+        </div>
       </div>
     );
   };
@@ -279,6 +301,7 @@ export const KeyboardShortcuts: React.FC = () => {
           <DialogHeader>
             <DialogTitle>Shortcuts</DialogTitle>
           </DialogHeader>
+          <DuplicateShortcutBanner duplicates={duplicates} />
           <div className="flex flex-row gap-3">
             <div className="w-1/2">
               {renderGroup("Editing")}

frontend/src/components/editor/output/__tests__/ansi-reduce.test.ts

@@ -534,13 +534,13 @@ describe("AnsiReducer streaming with append()", () => {
 describe("AnsiReducer color preservation", () => {
   const CASES = [
     // SGR sequences
-    "\u001b[34mBlue text\u001b[m normal text\u001b[31mRed text\u001b[0m",
+    "\u001B[34mBlue text\u001B[m normal text\u001B[31mRed text\u001B[0m",
     // Complex SGR with parameters
-    "\u001b[1;31mBold Red\u001b[0m \u001b[48;5;240mGray bg\u001b[0m",
+    "\u001B[1;31mBold Red\u001B[0m \u001B[48;5;240mGray bg\u001B[0m",
     // Character set selection
-    "Text\u001b(BMore\u001b(0Graphics\u001b(B",
+    "Text\u001B(BMore\u001B(0Graphics\u001B(B",
     // Complex case
-    "\u001b[34m[D 251201 15:32:24 cell_runner:695]\u001b(B\u001b[m Running post_execution hooks in context\n\u001b[34m[D 251201 15:32:24 hooks_post_execution:65]\u001b(B\u001b[m Acquiring graph lock to update cell import workspace\n\u001b[34m[D 251201 15:32:24 hooks_post_execution:67]\u001b(B\u001b[m Acquired graph lock to update import workspace.\n",
+    "\u001B[34m[D 251201 15:32:24 cell_runner:695]\u001B(B\u001B[m Running post_execution hooks in context\n\u001B[34m[D 251201 15:32:24 hooks_post_execution:65]\u001B(B\u001B[m Acquiring graph lock to update cell import workspace\n\u001B[34m[D 251201 15:32:24 hooks_post_execution:67]\u001B(B\u001B[m Acquired graph lock to update import workspace.\n",
   ];
 
   test.each(CASES)("preserves ANSI color codes", (input) => {
@@ -554,12 +554,12 @@ describe("AnsiReducer color preservation", () => {
     // Test that color codes work alongside cursor movements
     // Note: when cursor moves up, lines below are discarded (tqdm behavior)
     const result = reducer.reduce(
-      "Line1\n\u001b[31mRed\u001b[0m\u001b[1A\u001b[32mGreen\u001b[0m",
+      "Line1\n\u001B[31mRed\u001B[0m\u001B[1A\u001B[32mGreen\u001B[0m",
     );
     // After moving up from row 1 to row 0, row 1 is discarded
     // Green is written at the end of row 0
     expect(result).toMatchInlineSnapshot(
-      `"Line1       \u001b[32mGreen\u001b[0m"`,
+      `"Line1       \u001B[32mGreen\u001B[0m"`,
     );
   });
 });

frontend/src/core/state/__mocks__/mocks.ts

@@ -1,3 +1,4 @@
+/* Copyright 2024 Marimo. All rights reserved. */
 import type { Observable } from "../observable";
 
 export function createMockObservable<T>(