Search across panels

SearchAcrossPanels.tsxThe palette on ⌘K. Every row says which field it matched and how much the dashboard is used, and the empty state says what search covers.Copy

import { useEffect, useState } from "react";
import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { ago, search, type Dashboard, type Hit } from "./search";

export function SearchAcrossPanels({ dashboards, open, onOpenChange, defaultQuery = "", onOpen, now }: {
  dashboards: Dashboard[];
  open: boolean;
  onOpenChange: (open: boolean) => void;
  defaultQuery?: string;
  onOpen: (hit: Hit) => void;
  /** The clock to age "edited" against. Pass one to render on a server. */
  now?: Date;
}) {
  const [query, setQuery] = useState(defaultQuery);
  const hits = search(query, dashboards);
  const at = now ?? new Date();

  // ⌘K from anywhere on the page, and the same key closes it.
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault(); onOpenChange(!open); }
      if (e.key === "Escape" && open) onOpenChange(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onOpenChange]);

  if (!open) return null;

  return (
    // In a page this sits in CommandDialog over the dimmed content; the box
    // itself is the same.
    <Command shouldFilter={false} className="relative rounded-lg border shadow-md">
      <CommandInput value={query} onValueChange={setQuery} placeholder="Search dashboards, panels, tags and queries" autoFocus />
      <kbd className="absolute right-3 top-3 rounded border px-1.5 py-0.5 text-[10px] text-muted-foreground">cmd K</kbd>
      <CommandList>
        <CommandEmpty className="px-3 py-6 text-xs text-muted-foreground">
          Nothing in a title, panel, tag or query mentions "{query}". Try one word of it, or a tag.
        </CommandEmpty>
        {hits.map((h) => (
          <CommandItem key={h.dashboard.id} value={h.dashboard.id} onSelect={() => onOpen(h)} className="flex items-start gap-3 px-3 py-2.5">
            <div className="min-w-0 flex-1">
              <p className="text-sm text-popover-foreground">{h.dashboard.title} <span className="text-[11px] text-muted-foreground">{h.dashboard.folder}</span></p>
              {/* Why it matched. The word someone remembers is usually a
                  panel or a tag, and this is where it was. */}
              <p className={`mt-0.5 truncate text-[11px] text-muted-foreground ${h.on === "query" ? "font-mono text-[10px]" : ""}`}>{h.on}: {h.text}</p>
            </div>
            <div className="shrink-0 text-right text-[10px] tabular-nums text-muted-foreground">
              <p>{h.dashboard.opens} opens · 30d</p>
              <p>edited {ago(h.dashboard.edited, at)}</p>
            </div>
          </CommandItem>
        ))}
      </CommandList>
    </Command>
  );
}

search.tsReaches titles, panels, tags and query text; a hit carries the field it was found in; ranks by terms matched, then use, then recency.Copy

/** One dashboard as the index sees it. Everything search reaches is here,
 *  and nothing else is searchable. */
export type Dashboard = {
  id: string;
  title: string;
  folder: string;
  tags: string[];
  panels: { title: string; query: string }[];
  edited: Date;
  /** Opens in the last thirty days. The only signal of which copy a team
   *  actually uses, so it ranks above recency. */
  opens: number;
};

/** Where the hit was. Closed, and a hit cannot exist without one: a result
 *  that only names the dashboard makes the reader open it and hunt. */
export type Field = "title" | "panel" | "tag" | "query";
const ORDER: Field[] = ["title", "panel", "tag", "query"];

export type Hit = { dashboard: Dashboard; on: Field; text: string; terms: number };

const fields = (d: Dashboard): [Field, string][] => [
  ["title", d.title],
  ...d.panels.map(({ title }) => ["panel", title] as [Field, string]),
  ...d.tags.map((t) => ["tag", t] as [Field, string]),
  ...d.panels.map(({ query }) => ["query", query] as [Field, string]),
];

/** Every term is tried against every field. The field that holds the most
 *  terms is the reason shown; ties go to the field a person would remember. */
export function search(q: string, dashboards: Dashboard[]): Hit[] {
  const terms = q.toLowerCase().split(/\s+/).filter(Boolean);
  if (!terms.length) return [];
  const hits: Hit[] = [];
  for (const d of dashboards) {
    let best: Hit | null = null;
    for (const [on, text] of fields(d)) {
      const n = terms.filter((t) => text.toLowerCase().includes(t)).length;
      if (n && (!best || n > best.terms || (n === best.terms && ORDER.indexOf(on) < ORDER.indexOf(best.on))))
        best = { dashboard: d, on, text, terms: n };
    }
    if (best) hits.push(best);
  }
  // Terms matched, then use, then recency. Recency last on purpose: it
  // surfaces whatever somebody edited, which is rarely the authoritative copy.
  return hits.sort((a, b) => b.terms - a.terms || b.dashboard.opens - a.dashboard.opens || b.dashboard.edited.getTime() - a.dashboard.edited.getTime());
}

export function ago(then: Date, now: Date) {
  const days = Math.floor((now.getTime() - then.getTime()) / 86_400_000);
  if (days < 1) return "today";
  if (days === 1) return "yesterday";
  if (days < 30) return `${days} days ago`;
  if (days < 365) return `${Math.floor(days / 30)} months ago`;
  const y = Math.floor(days / 365);
  return y === 1 ? "a year ago" : `${y} years ago`;
}

demo.tsxHow it is called: five dashboards, opened on "checkout p95". Type "api" for the two copies of API Overview and the opens count that separates them.Copy

import { useState } from "react";
import { Search } from "lucide-react";
import { Button } from "@/components/ui/button";
import { SearchAcrossPanels } from "./SearchAcrossPanels";
import type { Dashboard } from "./search";

const NOW = new Date("2026-09-15T09:00:00Z");
const daysAgo = (n: number) => new Date(NOW.getTime() - n * 86_400_000);

/** A slice of the estate. Two are called API Overview; the opens column is
 *  what tells them apart. */
const DASHBOARDS: Dashboard[] = [
  { id: "pay", title: "Payments overview", folder: "Payments", tags: ["payments"], edited: daysAgo(3), opens: 412,
    panels: [{ title: "Checkout p95 by region", query: "histogram_quantile(0.95, sum by (le, region) (rate(checkout_latency_seconds_bucket[5m])))" }, { title: "Authorisations", query: "sum(rate(payment_auth_total[5m]))" }] },
  { id: "slo", title: "Service SLOs", folder: "Platform", tags: ["checkout", "slo"], edited: daysAgo(11), opens: 268,
    panels: [{ title: "Availability", query: "1 - (sum(rate(http_5xx_total[30d])) / sum(rate(http_requests_total[30d])))" }, { title: "Latency burn rate", query: "slo:latency_burn_rate:1h" }] },
  { id: "edge", title: "Edge latency", folder: "Network", tags: ["edge", "cdn"], edited: daysAgo(2), opens: 57,
    panels: [{ title: "TTFB by POP", query: "histogram_quantile(0.95, sum by (le, pop) (rate(checkout_edge_ttfb_seconds_bucket[5m])))" }] },
  { id: "api", title: "API Overview", folder: "Platform", tags: ["api"], edited: daysAgo(120), opens: 390,
    panels: [{ title: "Requests", query: "sum(rate(http_requests_total[5m]))" }] },
  { id: "api-old", title: "API Overview", folder: "Archive", tags: ["api"], edited: daysAgo(730), opens: 2,
    panels: [{ title: "Requests", query: "sum(rate(http_requests_total[5m]))" }] },
];

/** Open on arrival with a search already typed. ⌘K closes and opens it;
 *  picking a result would navigate. Type "api" to see the duplicates. */
export default function Demo() {
  const [open, setOpen] = useState(true);
  const [went, setWent] = useState<string | null>(null);
  return (
    <div className="min-h-[220px]">
      {!open && (
        <Button variant="outline" size="sm" onClick={() => setOpen(true)}><Search className="size-3.5" /> Search <kbd className="ml-1 text-[10px] text-muted-foreground">⌘K</kbd></Button>
      )}
      <SearchAcrossPanels
        dashboards={DASHBOARDS}
        open={open}
        onOpenChange={setOpen}
        defaultQuery="checkout p95"
        onOpen={(h) => { setWent(`${h.dashboard.title}, ${h.on} ${h.text}`); setOpen(false); }}
        now={NOW}
      />
      {went && <p className="mt-2 text-xs text-muted-foreground">opened {went}</p>}
    </div>
  );
}