Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#1,010 2 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@AYUshJaiswal454 ya está trabajando en esto.

Desde el 14/10/2026.

  • #1094 de @AYUshJaiswal454 — abierto

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
45/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript
Área
frontend

Línea de trabajo

Start with the mount point in packages/frontend/src/components/app-shell.tsx and the NAV array in components/app-sidebar.tsx, then the SIDEBAR_SECTIONS in app/settings/layout.tsx that move into a new lib/navigation.ts. The palette goes in components/command-palette.tsx, and the e2e reference is tests/e2e/mcp-server-connect-clients.spec.ts. Done when Ctrl+K opens and closes the palette on AppShell pages, role-based entries are filtered, the sidebar and settings navigation look unchanged, and the new tests/e2e/command-palette.spec.ts passes.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

enhancement hacktoberfest help wanted

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.

Lenguaje dominante
TypeScript
Estrellas
856
Forks
82
Merge medio
5 h 18 min
PR fusionados (30 d)
162

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de HelpCode-ai/anythingmcp

Todos los issues de HelpCode-ai/anythingmcp

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.