// CRITICAL"use client"; import { useEffect, useMemo, useRef, useState } from "react";import { Search, CornerDownLeft } from "lucide-react"; export type CommandPaletteAction = {  id: string;  label: string;  hint?: string;  keywords?: string[];  run: () => void | Promise<void>;}; export function CommandPalette({  open,  onClose,  actions,  statusText,}: {  open: boolean;  onClose: () => void;  actions: CommandPaletteAction[];  statusText?: string;}) {  const inputRef = useRef<HTMLInputElement>(null);  const [query, setQuery] = useState("");  const [activeIndex, setActiveIndex] = useState(0);   useEffect(() => {    if (!open) return;    setQuery("");    setActiveIndex(0);    const t = window.setTimeout(() => inputRef.current?.focus(), 0);    return () => window.clearTimeout(t);  }, [open]);   const filtered = useMemo(() => {    const q = query.trim().toLowerCase();    if (!q) return actions;    return actions.filter((a) => {      const hay = [a.label, a.hint, ...(a.keywords || [])].filter(Boolean).join(" ").toLowerCase();      return hay.includes(q);    });  }, [actions, query]);   const runActive = async () => {    const action = filtered[activeIndex];    if (!action) return;    try {      await action.run();    } finally {      onClose();    }  };   if (!open) return null;   return (    <div      className="fixed inset-0 z-60 flex items-start justify-center pt-24 bg-black/60"      onMouseDown={onClose}    >      <div        className="w-full max-w-xl bg-(--card) border border-(--border) rounded-xl shadow-2xl overflow-hidden"        onMouseDown={(e) => e.stopPropagation()}      >        <div className="flex items-center gap-2 px-4 py-3 border-b border-(--border) bg-(--card)">          <Search className="h-4 w-4 text-[#9a9590]" />          <input            ref={inputRef}            value={query}            onChange={(e) => setQuery(e.target.value)}            placeholder="Search commands…"            className="flex-1 bg-transparent outline-none text-sm"            onKeyDown={(e) => {              if (e.key === "Escape") {                e.preventDefault();                onClose();                return;              }              if (e.key === "ArrowDown") {                e.preventDefault();                setActiveIndex((i) => Math.min(i + 1, Math.max(filtered.length - 1, 0)));                return;              }              if (e.key === "ArrowUp") {                e.preventDefault();                setActiveIndex((i) => Math.max(i - 1, 0));                return;              }              if (e.key === "Enter") {                e.preventDefault();                runActive();              }            }}          />          <div className="flex items-center gap-1 text-[10px] text-[#9a9590]">            <CornerDownLeft className="h-3 w-3" />            Enter          </div>        </div>         <div className="max-h-80 overflow-y-auto">          {filtered.length === 0 ? (            <div className="px-4 py-6 text-sm text-[#9a9590]">No matching commands.</div>          ) : (            filtered.map((a, idx) => (              <button                key={a.id}                onClick={() => {                  setActiveIndex(idx);                  runActive();                }}                onMouseEnter={() => setActiveIndex(idx)}                className={`w-full text-left px-4 py-3 border-t border-(--border) first:border-t-0 ${                  idx === activeIndex ? "bg-(--card-hover)" : "hover:bg-(--card-hover)"                }`}              >                <div className="flex items-center justify-between gap-3">                  <div className="min-w-0">                    <div className="text-sm font-medium truncate">{a.label}</div>                    {a.hint && <div className="text-xs text-[#9a9590] truncate">{a.hint}</div>}                  </div>                  <div className="text-[10px] text-[#9a9590] font-mono shrink-0">{a.id}</div>                </div>              </button>            ))          )}        </div>         <div className="px-4 py-2 border-t border-(--border) text-xs text-[#9a9590] flex items-center justify-between">          <span>{statusText || "Ctrl/⌘K to open"}</span>          <button            onClick={onClose}            className="px-2 py-1 rounded border border-(--border) hover:bg-(--accent) transition-colors"          >            Close          </button>        </div>      </div>    </div>  );}