sp/apps/web/src/components/command-palette.tsx

"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command";
import {
  ActivityIcon,
  CoinsIcon,
  FolderIcon,
  LayoutDashboardIcon,
  LightbulbIcon,
  LogOutIcon,
  PenLineIcon,
  ScrollTextIcon,
  Settings2Icon,
  SlidersHorizontalIcon,
  SparklesIcon,
  TerminalIcon,
} from "lucide-react";
import { signOut } from "@/lib/auth-client";

type ProjectLite = { key: string; name: string; status: string };

export function CommandPalette({ projects }: { projects: ProjectLite[] }) {
  const router = useRouter();
  const [open, setOpen] = useState(false);

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

  const go = (path: string) => {
    setOpen(false);
    router.push(path);
  };

  return (
    <CommandDialog open={open} onOpenChange={setOpen} title="Command palette" description="Quick navigation">
      <CommandInput placeholder="Jump to project, page, or action…" />
      <CommandList>
        <CommandEmpty>No match.</CommandEmpty>

        <CommandGroup heading="Navigation">
          <CommandItem onSelect={() => go("/")}><LayoutDashboardIcon /> Overview</CommandItem>
          <CommandItem onSelect={() => go("/projects")}><FolderIcon /> Projects</CommandItem>
          <CommandItem onSelect={() => go("/operations")}><TerminalIcon /> Operations</CommandItem>
          <CommandItem onSelect={() => go("/events")}><ActivityIcon /> Events</CommandItem>
          <CommandItem onSelect={() => go("/audit")}><ScrollTextIcon /> Audit</CommandItem>
          <CommandItem onSelect={() => go("/settings")}><Settings2Icon /> Settings</CommandItem>
        </CommandGroup>

        <CommandSeparator />

        <CommandGroup heading="Insights">
          <CommandItem keywords={["inbox","triage"]} onSelect={() => go("/insights")}>
            <LightbulbIcon /> Insight inbox
          </CommandItem>
          <CommandItem keywords={["brief","daily","summary"]} onSelect={() => go("/insights/brief")}>
            <LightbulbIcon /> Daily brief
          </CommandItem>
          <CommandItem keywords={["eval","test","quality"]} onSelect={() => go("/insights/settings/eval-sets")}>
            <SparklesIcon /> Eval sets
          </CommandItem>
          <CommandItem keywords={["cost","spend","budget","llm"]} onSelect={() => go("/insights/costs")}>
            <CoinsIcon /> Cost dashboard
          </CommandItem>
          <CommandItem keywords={["pipeline","sessions","posthog"]} onSelect={() => go("/insights/pipeline")}>
            <ActivityIcon /> Pipeline (sessions)
          </CommandItem>
          <CommandItem keywords={["pattern","cluster","group"]} onSelect={() => go("/insights/patterns")}>
            <SparklesIcon /> Patterns (clusters)
          </CommandItem>
          <CommandItem keywords={["budget","cap","pause"]} onSelect={() => go("/insights/settings/budgets")}>
            <SlidersHorizontalIcon /> Budget settings
          </CommandItem>
          <CommandItem keywords={["prompt","template","llm"]} onSelect={() => go("/insights/settings/prompts")}>
            <SparklesIcon /> Prompt registry
          </CommandItem>
        </CommandGroup>

        <CommandSeparator />

        <CommandGroup heading="Content">
          <CommandItem keywords={["content","icerik","konu","kuyruk","queue"]} onSelect={() => go("/content")}>
            <PenLineIcon /> İçerik kuyruğu
          </CommandItem>
          <CommandItem keywords={["content","cost","maliyet","spend"]} onSelect={() => go("/content/costs")}>
            <CoinsIcon /> İçerik maliyeti
          </CommandItem>
        </CommandGroup>

        <CommandSeparator />

        <CommandGroup heading="Projects">
          {projects.map((p) => (
            <CommandItem
              key={p.key}
              keywords={[p.key, p.name, p.status]}
              onSelect={() => go(`/projects/${p.key}`)}
            >
              <FolderIcon />
              <span>{p.name}</span>
              <span className="ml-auto text-xs text-muted-foreground">{p.status}</span>
            </CommandItem>
          ))}
        </CommandGroup>

        <CommandSeparator />

        <CommandGroup heading="Account">
          <CommandItem
            onSelect={async () => {
              setOpen(false);
              await signOut();
              router.replace("/login");
            }}
          >
            <LogOutIcon /> Sign out
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  );
}