tool-evaluator/artifacts/toolrate/src/components/command-palette.tsx

import { useState, useEffect, useRef } from "react";
import { useLocation } from "wouter";
import { useListTools, getListToolsQueryKey } from "@workspace/api-client-react";
import {
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandSeparator,
} from "@/components/ui/command";
import { useAuth } from "@/hooks/use-auth";
import { useTranslation } from "react-i18next";
import { getRecentTools } from "@/lib/recent-tools";
import {
  Compass,
  PlusCircle,
  BarChart3,
  Trash2,
  ShieldCheck,
  Wrench,
  Star,
  History,
} from "lucide-react";

const openRequesters = new Set<() => void>();

export function requestOpenCommandPalette() {
  for (const request of openRequesters) request();
}

export function CommandPalette() {
  const [, navigate] = useLocation();
  const { t } = useTranslation();
  const { isAuthenticated, isAdmin, hasFeature } = useAuth();
  const [open, setOpen] = useState(false);
  const [search, setSearch] = useState("");
  const [recent, setRecent] = useState(() => getRecentTools());
  const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(() => {
    const request = () => setOpen(true);
    openRequesters.add(request);
    return () => {
      openRequesters.delete(request);
    };
  }, []);

  useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key.toLowerCase() === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setOpen((o) => !o);
      }
    };
    window.addEventListener("keydown", down);
    return () => window.removeEventListener("keydown", down);
  }, []);

  useEffect(() => {
    if (!open) {
      setSearch("");
    } else {
      setRecent(getRecentTools());
    }
  }, [open]);

  const { data: tools } = useListTools(
    search ? { search } : undefined,
    {
      query: {
        queryKey: getListToolsQueryKey(search ? { search } : undefined),
        enabled: open && search.trim().length > 0,
        staleTime: 30_000,
      },
    },
  );

  function go(path: string) {
    setOpen(false);
    navigate(path);
  }

  const showTrash = hasFeature("trash") || isAdmin;
  const showWatchlist = (hasFeature("watchlist") || isAdmin) && isAuthenticated;
  const searching = search.trim().length > 0;

  return (
    <CommandDialog open={open} onOpenChange={setOpen}>
      <CommandInput
        placeholder={`${t("common.search")}…`}
        value={search}
        onValueChange={(v) => {
          setSearch(v);
          if (searchTimer.current) clearTimeout(searchTimer.current);
        }}
      />
      <CommandList>
        <CommandEmpty>
          {searching ? t("command.noResults", { query: search }) : t("command.startTyping")}
        </CommandEmpty>

        {!searching && recent.length > 0 && (
          <CommandGroup heading={t("command.recent")}>
            {recent.map((tool) => (
              <CommandItem key={tool.id} onSelect={() => go(`/tools/${tool.id}`)}>
                <History className="mr-2 h-4 w-4 text-muted-foreground" />
                <span className="truncate">{tool.name}</span>
              </CommandItem>
            ))}
          </CommandGroup>
        )}

        <CommandGroup heading={t("command.navigate")}>
          <CommandItem onSelect={() => go("/tools")}>
            <Compass className="mr-2 h-4 w-4" /> {t("nav.browseTools")}
          </CommandItem>
          <CommandItem onSelect={() => go("/tools/new")}>
            <PlusCircle className="mr-2 h-4 w-4" /> {t("nav.addTool")}
          </CommandItem>
          <CommandItem onSelect={() => go("/analytics")}>
            <BarChart3 className="mr-2 h-4 w-4" /> {t("nav.analytics")}
          </CommandItem>
          {showWatchlist && (
            <CommandItem onSelect={() => go("/watchlist")}>
              <Star className="mr-2 h-4 w-4" /> {t("nav.watchlist")}
            </CommandItem>
          )}
          {showTrash && (
            <CommandItem onSelect={() => go("/trash")}>
              <Trash2 className="mr-2 h-4 w-4" /> {t("nav.trash")}
            </CommandItem>
          )}
          {isAdmin && (
            <CommandItem onSelect={() => go("/admin")}>
              <ShieldCheck className="mr-2 h-4 w-4" /> {t("nav.admin")}
            </CommandItem>
          )}
        </CommandGroup>
        {searching && (
          <>
            <CommandSeparator />
            <CommandGroup heading={t("command.tools")}>
              {(tools ?? []).slice(0, 10).map((tool) => (
                <CommandItem key={tool.id} onSelect={() => go(`/tools/${tool.id}`)}>
                  <Wrench className="mr-2 h-4 w-4 shrink-0 text-muted-foreground" />
                  <span className="truncate">{tool.name}</span>
                  <span className="ml-auto text-xs text-muted-foreground shrink-0">
                    {tool.avgCombined ? `${tool.avgCombined.toFixed(1)}★` : ""}
                  </span>
                </CommandItem>
              ))}
            </CommandGroup>
          </>
        )}
      </CommandList>
    </CommandDialog>
  );
}