feat(react): add global command palette (⌘K)

apps/cloud/src/web/shell.tsx

@@ -5,9 +5,21 @@ import { sourcesAtom } from "@executor/react/api/atoms";
 import { useScope } from "@executor/react/api/scope-context";
 import { Button } from "@executor/react/components/button";
 import { SourceFavicon } from "@executor/react/components/source-favicon";
+import { CommandPalette } from "@executor/react/components/command-palette";
+import { openApiSourcePlugin } from "@executor/plugin-openapi/react";
+import { mcpSourcePlugin } from "@executor/plugin-mcp/react";
+import { googleDiscoverySourcePlugin } from "@executor/plugin-google-discovery/react";
+import { graphqlSourcePlugin } from "@executor/plugin-graphql/react";
 import { AUTH_PATHS } from "../auth/api";
 import { useAuth } from "./auth";
 
+const sourcePlugins = [
+  openApiSourcePlugin,
+  mcpSourcePlugin,
+  googleDiscoverySourcePlugin,
+  graphqlSourcePlugin,
+];
+
 // ── NavItem ──────────────────────────────────────────────────────────────
 
 function NavItem(props: { to: string; label: string; active: boolean; onNavigate?: () => void }) {
@@ -194,6 +206,7 @@ export function Shell() {
 
   return (
     <div className="flex h-screen overflow-hidden">
+      <CommandPalette sourcePlugins={sourcePlugins} />
       {/* Desktop sidebar */}
       <aside className="hidden w-52 shrink-0 border-r border-sidebar-border bg-sidebar md:flex md:flex-col lg:w-56">
         <SidebarContent pathname={pathname} />

apps/local/src/web/shell.tsx

@@ -5,6 +5,18 @@ import { sourcesAtom, toolsAtom } from "@executor/react/api/atoms";
 import { useScope, useScopeInfo } from "@executor/react/api/scope-context";
 import { Button } from "@executor/react/components/button";
 import { SourceFavicon } from "@executor/react/components/source-favicon";
+import { CommandPalette } from "@executor/react/components/command-palette";
+import { openApiSourcePlugin } from "@executor/plugin-openapi/react";
+import { mcpSourcePlugin } from "@executor/plugin-mcp/react";
+import { googleDiscoverySourcePlugin } from "@executor/plugin-google-discovery/react";
+import { graphqlSourcePlugin } from "@executor/plugin-graphql/react";
+
+const sourcePlugins = [
+  openApiSourcePlugin,
+  mcpSourcePlugin,
+  googleDiscoverySourcePlugin,
+  graphqlSourcePlugin,
+];
 
 // ── Env ─────────────────────────────────────────────────────────────────
 
@@ -391,6 +403,7 @@ export function Shell() {
 
   return (
     <div className="flex h-screen overflow-hidden">
+      <CommandPalette sourcePlugins={sourcePlugins} />
       {/* Desktop sidebar */}
       <aside className="hidden w-52 shrink-0 border-r border-sidebar-border bg-sidebar md:flex md:flex-col lg:w-56">
         <SidebarContent

packages/react/src/components/code-block.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
+import { useCallback, useMemo, useState, type ReactNode } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { toJsxRuntime } from "hast-util-to-jsx-runtime";
 import {

packages/react/src/components/command-palette.tsx

@@ -0,0 +1,201 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { useAtomValue, Result } from "@effect-atom/atom-react";
+import { PlusIcon } from "lucide-react";
+import { SourceFavicon } from "./source-favicon";
+import { sourcesAtom } from "../api/atoms";
+import { useScope } from "../hooks/use-scope";
+import type { SourcePlugin } from "../plugins/source-plugin";
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "./command";
+
+// ---------------------------------------------------------------------------
+// CommandPalette — global ⌘K navigator.
+//
+// Order of entries:
+//   1. Connected sources (priority, shown first)
+//   2. Add <Plugin> actions for each available source plugin
+//   3. Popular sources (plugin presets)
+// ---------------------------------------------------------------------------
+
+export function CommandPalette(props: { sourcePlugins: readonly SourcePlugin[] }) {
+  const { sourcePlugins } = props;
+  const [open, setOpen] = useState(false);
+  const navigate = useNavigate();
+  const scopeId = useScope();
+  const sourcesResult = useAtomValue(sourcesAtom(scopeId));
+
+  // Toggle with ⌘K / Ctrl+K
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((o) => !o);
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  const connectedSources = useMemo(
+    () =>
+      Result.match(sourcesResult, {
+        onInitial: () =>
+          [] as Array<{
+            id: string;
+            name: string;
+            kind: string;
+            url?: string;
+            runtime?: boolean;
+          }>,
+        onFailure: () =>
+          [] as Array<{
+            id: string;
+            name: string;
+            kind: string;
+            url?: string;
+            runtime?: boolean;
+          }>,
+        onSuccess: ({ value }) => value.filter((s) => !s.runtime),
+      }),
+    [sourcesResult],
+  );
+
+  const presetEntries = useMemo(() => {
+    const entries: Array<{
+      pluginKey: string;
+      pluginLabel: string;
+      presetId: string;
+      presetName: string;
+      presetSummary?: string;
+      presetUrl?: string;
+      presetIcon?: string;
+    }> = [];
+    for (const plugin of sourcePlugins) {
+      for (const preset of plugin.presets ?? []) {
+        entries.push({
+          pluginKey: plugin.key,
+          pluginLabel: plugin.label,
+          presetId: preset.id,
+          presetName: preset.name,
+          presetSummary: preset.summary,
+          presetUrl: preset.url,
+          presetIcon: preset.icon,
+        });
+      }
+    }
+    return entries;
+  }, [sourcePlugins]);
+
+  const close = useCallback(() => setOpen(false), []);
+
+  const goToSource = useCallback(
+    (id: string) => {
+      close();
+      void navigate({ to: "/sources/$namespace", params: { namespace: id } });
+    },
+    [close, navigate],
+  );
+
+  const goToAdd = useCallback(
+    (pluginKey: string) => {
+      close();
+      void navigate({
+        to: "/sources/add/$pluginKey",
+        params: { pluginKey },
+      });
+    },
+    [close, navigate],
+  );
+
+  const goToPreset = useCallback(
+    (pluginKey: string, presetId: string, presetUrl?: string) => {
+      close();
+      const search: Record<string, string> = { preset: presetId };
+      if (presetUrl) search.url = presetUrl;
+      void navigate({
+        to: "/sources/add/$pluginKey",
+        params: { pluginKey },
+        search,
+      });
+    },
+    [close, navigate],
+  );
+
+  return (
+    <CommandDialog open={open} onOpenChange={setOpen}>
+      <CommandInput placeholder="Search sources or jump to add…" />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+
+        {connectedSources.length > 0 && (
+          <CommandGroup heading="Connected">
+            {connectedSources.map((s) => (
+              <CommandItem
+                key={`source-${s.id}`}
+                value={`connected ${s.name} ${s.id} ${s.kind}`}
+                onSelect={() => goToSource(s.id)}
+              >
+                <SourceFavicon url={s.url} />
+                <span className="flex-1 truncate">{s.name}</span>
+                <CommandShortcut>{s.kind}</CommandShortcut>
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        )}
+
+        {connectedSources.length > 0 && sourcePlugins.length > 0 && <CommandSeparator />}
+
+        {sourcePlugins.length > 0 && (
+          <CommandGroup heading="Add source">
+            {sourcePlugins.map((plugin) => (
+              <CommandItem
+                key={`add-${plugin.key}`}
+                value={`add ${plugin.label} ${plugin.key}`}
+                onSelect={() => goToAdd(plugin.key)}
+              >
+                <PlusIcon />
+                <span className="flex-1 truncate">Add {plugin.label}</span>
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        )}
+
+        {presetEntries.length > 0 && <CommandSeparator />}
+
+        {presetEntries.length > 0 && (
+          <CommandGroup heading="Popular sources">
+            {presetEntries.map((e) => (
+              <CommandItem
+                key={`preset-${e.pluginKey}-${e.presetId}`}
+                value={`preset ${e.presetName} ${e.presetSummary ?? ""} ${e.pluginLabel}`}
+                onSelect={() => goToPreset(e.pluginKey, e.presetId, e.presetUrl)}
+              >
+                {e.presetIcon ? (
+                  <img
+                    src={e.presetIcon}
+                    alt=""
+                    className="size-4 shrink-0 object-contain"
+                    loading="lazy"
+                  />
+                ) : (
+                  <span aria-hidden className="size-4 shrink-0 rounded-sm bg-muted-foreground/20" />
+                )}
+                <span className="flex-1 truncate">{e.presetName}</span>
+                <CommandShortcut>{e.pluginLabel}</CommandShortcut>
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        )}
+      </CommandList>
+    </CommandDialog>
+  );
+}

packages/react/src/lib/shiki.ts

@@ -11,6 +11,7 @@ import langJavascript from "@shikijs/langs/javascript";
 import langTsx from "@shikijs/langs/tsx";
 import langJsx from "@shikijs/langs/jsx";
 import langJson from "@shikijs/langs/json";
+import langShellscript from "@shikijs/langs/shellscript";
 import githubDark from "@shikijs/themes/github-dark";
 import githubLight from "@shikijs/themes/github-light";
 
@@ -76,7 +77,6 @@ const LANG_ALIASES: Record<string, SupportedLang> = {
 const LAZY_LANG_LOADERS: Partial<Record<SupportedLang, () => Promise<unknown>>> = {
   xml: () => import("@shikijs/langs/xml"),
   yaml: () => import("@shikijs/langs/yaml"),
-  shellscript: () => import("@shikijs/langs/shellscript"),
   python: () => import("@shikijs/langs/python"),
   html: () => import("@shikijs/langs/html"),
   css: () => import("@shikijs/langs/css"),
@@ -145,7 +145,7 @@ export function isSupportedLang(lang: string): boolean {
 
 const highlighter: HighlighterCore = createHighlighterCoreSync({
   themes: [githubDark, githubLight],
-  langs: [langTypescript, langJavascript, langTsx, langJsx, langJson],
+  langs: [langTypescript, langJavascript, langTsx, langJsx, langJson, langShellscript],
   engine: createJavaScriptRegexEngine({ forgiving: true }),
 });