🎃 Add a ⌘K / Ctrl+K command palette to the admin UI #1010

Part of the October Challenge #997.

Why

The admin UI has ten sidebar entries, eight settings pages and, in a workspace in daily use, dozens of connectors and MCP servers. Reaching one connector means sidebar → Connectors → search → click. A ⌘K / Ctrl+K command palette (Linear, Vercel, GitHub and Grafana have one) lets keyboard users jump to any page, connector or MCP server, or run a common action, in a couple of keystrokes. Nothing like it exists in the frontend today: no palette component, no global keyboard shortcut.

Self-hosted vs Cloud

• Self-hosted: enabled in Community and Business. Frontend only: no new endpoint, no ee/ code.
• Cloud (DEPLOYMENT_MODE=cloud): enabled. The palette lists the same entries as the sidebar and the settings navigation, with the same rules: "Single sign-on" is hidden on Cloud (selfHostedOnly, settings/layout.tsx:41-44). Connectors and servers come from the existing organization-scoped list endpoints, so only the current workspace's records appear, and the cached lists are dropped after a workspace switch.
• Who can use it: any signed-in user. Admin-only settings (adminOnly, settings/layout.tsx:39-46) appear only for ADMIN. "Add connector" is hidden for VIEWER, who cannot create connectors (connectors.controller.ts:589-593). The palette is mounted inside AppShell, so it never appears on /login or other signed-out pages.

What to build

1. Shared navigation data: move NAV out of components/app-sidebar.tsx:45-73 and SIDEBAR_SECTIONS out of app/settings/layout.tsx:27-49 into packages/frontend/src/lib/navigation.ts, and import them in the sidebar, the settings layout and the palette, so a new page shows up everywhere at once. The icons can stay where they are.
2. Component components/command-palette.tsx on @radix-ui/react-dialog, which the app already uses (for example connectors/page.tsx:271-300). No new dependency. A text input above a grouped result list: Pages, Settings, Connectors, MCP servers, Actions. Matching is case-insensitive and every typed word must appear in the label or in a short keyword list per entry (for example "logs" for Audit Log). At most 8 results per group.
3. Records: on first open, load connectors.list(token) and mcpServers.list(token) (lib/api.ts:313, :1391) and keep them while the app is open; reload after a workspace switch. Show a loading row; if a request fails, pages and actions still work. Entries link to /connectors/<id> and /mcp-server/<id>.
4. Actions: Add connector (/connectors/new), Browse Marketplace (/connectors/store), Toggle theme (useTheme().setTheme), "Switch to " for each other workspace (useAuth().switchOrg), Log out (useAuth().logout).
5. Keyboard and accessibility: ⌘K on macOS and Ctrl+K elsewhere toggles the palette from anywhere inside AppShell, also while focus is in a text field; call preventDefault() so the browser's own Ctrl+K does not fire. ↑/↓ moves, Enter runs, Esc closes and focus returns to where it was. role="combobox" on the input with aria-controls and aria-activedescendant; role="listbox" and role="option" on the results.
6. Visible trigger: a search button in the AppShell header next to the theme toggle (app-shell.tsx:138-145) that shows "⌘K" or "Ctrl K" depending on the platform, so the palette can be found and used on touch devices.

Where to look

• packages/frontend/src/components/app-shell.tsx:69-168: mount point and header actions.
• packages/frontend/src/components/app-sidebar.tsx:45-91: NAV, bestHref, workspace switcher and logout.
• packages/frontend/src/app/settings/layout.tsx:9-55: settings entries and their adminOnly / selfHostedOnly rules.
• packages/frontend/src/lib/auth-context.tsx:29-53: user, orgs, switchOrg, logout, deploymentMode.
• packages/frontend/src/lib/theme-context.tsx:20: useTheme.
• packages/frontend/src/lib/api.ts:313, :1391: connectors and mcpServers clients.
• packages/frontend/src/app/connectors/page.tsx:271-300: Radix Dialog styling to match.
• packages/frontend/tests/e2e/mcp-server-connect-clients.spec.ts:21-54: how tests fake a session and stub the API.

Acceptance criteria

• Ctrl+K opens the palette on every AppShell page and Esc closes it; it does not open on /login.
• Typing "audit" and Enter opens /logs; typing part of a connector's name opens that connector.
• An admin sees "Users"; a viewer sees neither "Users" nor "Add connector". With deploymentMode: 'cloud' in the stubbed /health/server-info, "Single sign-on" is not listed.
• The sidebar and the settings navigation look and behave as before.
• Playwright test tests/e2e/command-palette.spec.ts covering the points above, with /api/connectors, /api/mcp-servers and /health/server-info stubbed. Run with cd packages/frontend && npm run test:e2e.
• A keyboard-only walkthrough and a screen reader check (VoiceOver or NVDA) described in the PR.

Out of scope

• Searching tools, logs, knowledge-graph content or docs, and any backend search endpoint.
• Recent items, favourites, configurable shortcuts.
• Translating the labels (the i18n foundation is a separate challenge issue).

Size

M (1–2 days)

How to claim

Comment "I'd like to work on this" and we'll assign you. Rules in #997.