Add keyboard shortcut hints to empty pane placeholder

apps/desktop/src/features/editor/WorkspacePaneEmptyState.test.tsx

@@ -1,7 +1,9 @@
 import "@testing-library/jest-dom/vitest";
 import { screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it } from "vitest";
+import { formatShortcutAction } from "../../app/shortcuts/format";
 import { useEditorStore } from "../../app/store/editorStore";
+import { getDesktopPlatform } from "../../app/utils/platform";
 import { renderComponent } from "../../test/test-utils";
 import { WorkspacePaneEmptyState } from "./WorkspacePaneEmptyState";
 
@@ -19,12 +21,33 @@ describe("WorkspacePaneEmptyState", () => {
         );
     });
 
-    it("shows a compact empty state message", () => {
-        renderComponent(<WorkspacePaneEmptyState paneId="primary" />);
+    it("shows a compact empty state message with shortcut hints", () => {
+        const { container } = renderComponent(
+            <WorkspacePaneEmptyState paneId="primary" />,
+        );
+
+        // The placeholder lists each action with its keyboard shortcut.
+        // Text nodes are interleaved with <kbd> elements, so assert on the
+        // paragraph's combined text content.
+        const text = container.textContent ?? "";
+        expect(text).toContain("Open a file");
+        expect(text).toContain("browse commands");
+        expect(text).toContain("start a chat");
+        expect(text).toContain("launch a terminal");
+
+        // Shortcuts are resolved from the registry for the current test platform.
+        const hints = Array.from(
+            container.querySelectorAll("kbd"),
+            (kbd) => kbd.textContent,
+        );
+        const platform = getDesktopPlatform();
+        expect(hints).toEqual([
+            formatShortcutAction("quick_switcher", platform),
+            formatShortcutAction("command_palette", platform),
+            formatShortcutAction("new_agent", platform),
+            formatShortcutAction("new_terminal", platform),
+        ]);
 
-        expect(
-            screen.getByText("Open a file, start a chat or launch a terminal."),
-        ).toBeVisible();
         expect(
             screen.queryByRole("button", { name: "New Note" }),
         ).not.toBeInTheDocument();

apps/desktop/src/features/editor/WorkspacePaneEmptyState.tsx

@@ -1,7 +1,33 @@
+import { formatShortcutAction } from "../../app/shortcuts/format";
+import type { ShortcutActionId } from "../../app/shortcuts/registry";
+import { getDesktopPlatform } from "../../app/utils/platform";
+
 interface WorkspacePaneEmptyStateProps {
     paneId: string;
 }
 
+// Resolve the binding from the shortcut registry at render time so the hint
+// stays accurate if the user rebinds an action, and so the platform modifier
+// (⌘ vs Ctrl) is correct per OS.
+function ShortcutHint({ action }: { action: ShortcutActionId }) {
+    const label = formatShortcutAction(action, getDesktopPlatform());
+    if (!label) return null;
+    return (
+        <kbd
+            className="ml-1 rounded px-1.5 py-0.5 text-xs font-medium"
+            style={{
+                color: "var(--text-primary)",
+                background: "var(--bg-tertiary)",
+                border: "1px solid color-mix(in srgb, var(--border) 80%, transparent)",
+                fontFamily: "inherit",
+                whiteSpace: "nowrap",
+            }}
+        >
+            {label}
+        </kbd>
+    );
+}
+
 export function WorkspacePaneEmptyState({
     paneId,
 }: WorkspacePaneEmptyStateProps) {
@@ -11,10 +37,14 @@ export function WorkspacePaneEmptyState({
             data-workspace-empty-pane={paneId}
         >
             <p
-                className="max-w-md text-center text-sm leading-6"
+                className="max-w-md text-center text-sm leading-8"
                 style={{ color: "var(--text-secondary)" }}
             >
-                Open a file, start a chat or launch a terminal.
+                Open a file
+                <ShortcutHint action="quick_switcher" />, browse commands
+                <ShortcutHint action="command_palette" />, start a chat
+                <ShortcutHint action="new_agent" />, or launch a terminal
+                <ShortcutHint action="new_terminal" />.
             </p>
         </div>
     );