Function DebugMenu

client-next/src/components/debug-menu.tsx:10–113

()

import { cn } from "@/lib/utils";

export function DebugMenu() {
  const [isOpen, setIsOpen] = useState(false);
  const [debugInfo, setDebugInfo] = useState<any>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "F2") {
        setIsOpen((prev) => !prev);
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, []);

  useEffect(() => {
    if (isOpen) {
      fetchDebugInfo();
    }
  }, [isOpen]);

  const fetchDebugInfo = async () => {
    setLoading(true);
    try {
      const info = await getDebugInfo();
      setDebugInfo({
        ...info,
        userAgent: navigator.userAgent,
        timestamp: new Date().toISOString(),
        windowSize: `${window.innerWidth}x${window.innerHeight}`,
      });
    } catch (err) {
      console.error("Failed to fetch debug info", err);
      setDebugInfo({ error: "Failed to fetch debug info from backend" });
    } finally {
      setLoading(false);
    }
  };

  const copyToClipboard = () => {
    if (debugInfo) {
      navigator.clipboard.writeText(JSON.stringify(debugInfo, null, 2));
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <Card className="w-full max-w-2xl max-h-[80vh] overflow-hidden flex flex-col shadow-2xl border-primary/20">
        <CardHeader className="flex flex-row items-center justify-between border-b px-6 py-4 bg-muted/50">
          <CardTitle className="text-lg font-bold flex items-center gap-2">
            <div className="w-2 h-2 rounded-full bg-yellow-500 animate-pulse" />
            Debug Menu
          </CardTitle>
          <Button variant="ghost" size="icon" onClick={() => setIsOpen(false)}>
            <X className="h-4 w-4" />