app/frontend/src/components/Flow/CommandPalette.tsx

import { useQuery } from "@tanstack/react-query"
import { useNavigate } from "@tanstack/react-router"

import type { FlowSummary, NodeTypeInfo } from "@/client"
import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import { libraryQueryOptions } from "./queries"

/**
 * ⌘K: add a node, jump to another flow, or run the current one, without
 * reaching for the dock.
 */
export function CommandPalette({
  open,
  onOpenChange,
  nodeTypes,
  flows,
  onAddNode,
  onAddSharedNode,
  onRun,
}: {
  open: boolean
  onOpenChange: (open: boolean) => void
  nodeTypes: NodeTypeInfo[]
  flows: FlowSummary[]
  onAddNode: (type: string) => void
  onAddSharedNode: (libName: string) => void
  onRun: () => void
}) {
  const navigate = useNavigate()
  const { data: libraryData } = useQuery({
    ...libraryQueryOptions(),
    enabled: open,
  })

  // Picking an item re-renders the canvas, which can interrupt the dialog's
  // exit animation and leave its overlay swallowing clicks. Unmounting the
  // dialog outright is deterministic; the palette does not need to fade out.
  if (!open) return null

  const library = libraryData ?? []

  const close = (action: () => void) => {
    onOpenChange(false)
    action()
  }

  return (
    <CommandDialog
      open={open}
      onOpenChange={onOpenChange}
      title="Commands"
      description="Add a node, switch flow, or run"
    >
      <CommandInput placeholder="Add a node, switch flow, run…" />
      <CommandList>
        <CommandEmpty>Nothing matches that.</CommandEmpty>

        <CommandGroup heading="Add a node">
          {nodeTypes.map((nodeType) => (
            <CommandItem
              key={nodeType.type}
              value={`${nodeType.title} ${nodeType.description}`}
              onSelect={() => close(() => onAddNode(nodeType.type))}
            >
              <span className="flex flex-col">
                <span>{nodeType.title}</span>
                <span className="text-xs text-muted-foreground">
                  {nodeType.description}
                </span>
              </span>
            </CommandItem>
          ))}
        </CommandGroup>

        {library.length > 0 ? (
          <CommandGroup heading="Reusable nodes">
            {library.map((entry) => (
              <CommandItem
                key={entry.name}
                value={`shared ${entry.name}`}
                onSelect={() => close(() => onAddSharedNode(entry.name))}
              >
                <span className="flex flex-col">
                  <span className="font-mono">{entry.name}</span>
                  <span className="text-xs text-muted-foreground">
                    {(entry.used_by ?? []).length === 1
                      ? "Used once"
                      : `Used ${(entry.used_by ?? []).length} times`}
                    , code shared with every flow using it
                  </span>
                </span>
              </CommandItem>
            ))}
          </CommandGroup>
        ) : null}

        {flows.length > 0 ? (
          <CommandGroup heading="Flows">
            {flows.map((flow) => (
              <CommandItem
                key={flow.name}
                value={`flow ${flow.name} ${flow.title}`}
                onSelect={() =>
                  close(() =>
                    navigate({
                      to: "/flows/$flowName",
                      params: { flowName: flow.name },
                    }),
                  )
                }
              >
                {flow.title || flow.name}
              </CommandItem>
            ))}
          </CommandGroup>
        ) : null}

        <CommandGroup heading="Actions">
          <CommandItem value="run flow" onSelect={() => close(onRun)}>
            Run this flow
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  )
}