Open in dashboard: searchable Command list

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/components/Runs/OpenInDashboard.tsx

@@ -9,6 +9,14 @@ import {
   dashboardsQueryOptions,
 } from "@/components/Dashboard/queries"
 import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
 import {
   Popover,
   PopoverContent,
@@ -78,39 +86,46 @@ export function OpenInDashboard({
           Open in dashboard
         </Button>
       </PopoverTrigger>
-      <PopoverContent align="end" className="w-64 p-1">
-        {flow && !hasResults && (
-          <button
-            type="button"
-            onClick={() => generate.mutate(flow)}
-            disabled={generate.isPending}
-            className="w-full rounded-md px-2 py-1.5 text-left text-sm hover:bg-accent disabled:opacity-50"
-          >
-            {generate.isPending
-              ? "Building…"
-              : `Build a results dashboard for ${flow}`}
-          </button>
-        )}
-        {dashboards.map((one) => (
-          <button
-            key={one.name}
-            type="button"
-            onClick={() => show(one.name)}
-            className="w-full rounded-md px-2 py-1.5 text-left text-sm hover:bg-accent"
-          >
-            {one.title || one.name}
-            {one.name === results && (
-              <span className="ml-2 text-muted-foreground text-xs">
-                results
-              </span>
-            )}
-          </button>
-        ))}
-        {dashboards.length === 0 && !flow && (
-          <p className="px-2 py-1.5 text-muted-foreground text-sm">
-            No dashboards yet.
-          </p>
-        )}
+      <PopoverContent align="end" className="w-64 p-0">
+        <Command>
+          <CommandInput placeholder="Search dashboards" />
+          <CommandList>
+            <CommandEmpty>
+              {dashboards.length
+                ? "No dashboard by that name."
+                : "No dashboards yet."}
+            </CommandEmpty>
+            {flow && !hasResults ? (
+              <CommandGroup>
+                <CommandItem
+                  value={`build results ${flow}`}
+                  onSelect={() => generate.mutate(flow)}
+                  disabled={generate.isPending}
+                >
+                  {generate.isPending
+                    ? "Building…"
+                    : `Build a results dashboard for ${flow}`}
+                </CommandItem>
+              </CommandGroup>
+            ) : null}
+            <CommandGroup>
+              {dashboards.map((one) => (
+                <CommandItem
+                  key={one.name}
+                  value={`${one.name} ${one.title}`}
+                  onSelect={() => show(one.name)}
+                >
+                  {one.title || one.name}
+                  {one.name === results ? (
+                    <span className="ml-2 text-xs text-muted-foreground">
+                      results
+                    </span>
+                  ) : null}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
       </PopoverContent>
     </Popover>
   )