Expanded SearchExpanded Search

"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import { SearchExpand, type SearchExpandGroup } from "@/components/ui/notchset/search-expand";

export function AppBar({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  // Each result says what choosing it does: here, open its page.
  const results: SearchExpandGroup[] = [
    { id: "agents", label: "AGENTS", items: [{ label: "Planner", meta: "PROD", onSelect: () => router.push("/agents/planner") }, { label: "Triage", meta: "STAGING", onSelect: () => router.push("/agents/triage") }] },
    { id: "runs", label: "RUNS", items: [{ label: "run_8f3a1", meta: "OK · 2.1S", onSelect: () => router.push("/runs/run_8f3a1") }, { label: "run_8f3a2", meta: "FAILED", tone: "signal", onSelect: () => router.push("/runs/run_8f3a2") }] },
  ];
  return (
    <SearchExpand
      nav={
        <nav className="flex gap-4 font-mono text-xs">
          <a href="/agents">AGENTS</a>
          <a href="/runs">RUNS</a>
        </nav>
      }
      groups={results}
    >
      {children}
    </SearchExpand>
  );
}