Add multi-board selector and scalable firmware catalog UI.

Board chips reserve future models; firmware uses searchable cards with detail pane and optional meta.json media/docs.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/flasher-panel.tsx

@@ -1,14 +1,16 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslations } from "next-intl";
-import { RefreshCw } from "lucide-react";
+import { RefreshCw, Search } from "lucide-react";
 import type { FirmwareInfo } from "@/lib/firmware";
-import { formatBytes, cn } from "@/lib/utils";
+import { DEFAULT_BOARD_ID } from "@/lib/boards";
+import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Card, CardHeader, CardTitle } from "@/components/ui/card";
-import { EspWebInstall } from "@/components/esp-web-install";
+import { Card } from "@/components/ui/card";
+import { BoardSelector } from "@/components/board-selector";
+import { FirmwareCard } from "@/components/firmware-card";
+import { FirmwareDetail } from "@/components/firmware-detail";
 
 function supportsWebSerial() {
   return typeof navigator !== "undefined" && "serial" in navigator;
@@ -17,7 +19,9 @@ function supportsWebSerial() {
 export function FlasherPanel() {
   const t = useTranslations();
   const [firmwares, setFirmwares] = useState<FirmwareInfo[]>([]);
+  const [boardId, setBoardId] = useState(DEFAULT_BOARD_ID);
   const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [query, setQuery] = useState("");
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [serialOk, setSerialOk] = useState(true);
@@ -29,12 +33,7 @@ export function FlasherPanel() {
       const res = await fetch("/api/firmware", { cache: "no-store" });
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       const data = (await res.json()) as { firmwares: FirmwareInfo[] };
-      const list = data.firmwares ?? [];
-      setFirmwares(list);
-      setSelectedId((prev) => {
-        if (prev && list.some((f) => f.id === prev)) return prev;
-        return list[0]?.id ?? null;
-      });
+      setFirmwares(data.firmwares ?? []);
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
       setFirmwares([]);
@@ -48,7 +47,32 @@ export function FlasherPanel() {
     void load();
   }, [load]);
 
-  const selected = firmwares.find((f) => f.id === selectedId) ?? null;
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return firmwares.filter((fw) => {
+      if (fw.boardId !== boardId) return false;
+      if (!q) return true;
+      const hay = [
+        fw.name,
+        fw.summary,
+        fw.description,
+        fw.project,
+        fw.variant,
+        ...fw.tags,
+      ]
+        .filter(Boolean)
+        .join(" ")
+        .toLowerCase();
+      return hay.includes(q);
+    });
+  }, [firmwares, boardId, query]);
+
+  useEffect(() => {
+    if (selectedId && filtered.some((f) => f.id === selectedId)) return;
+    setSelectedId(filtered[0]?.id ?? null);
+  }, [filtered, selectedId]);
+
+  const selected = filtered.find((f) => f.id === selectedId) ?? null;
 
   return (
     <div className="flex flex-col gap-5">
@@ -59,104 +83,90 @@ export function FlasherPanel() {
       )}
 
       <Card>
-        <CardHeader>
-          <CardTitle>{t("firmware.title")}</CardTitle>
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            onClick={() => void load()}
-            disabled={loading}
-          >
-            <RefreshCw className={cn("size-3.5", loading && "animate-spin")} />
-            {t("firmware.refresh")}
-          </Button>
-        </CardHeader>
+        <BoardSelector
+          value={boardId}
+          onChange={(id) => {
+            setBoardId(id);
+            setQuery("");
+          }}
+        />
+      </Card>
+
+      <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(280px,360px)] lg:items-start">
+        <Card className="min-w-0">
+          <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+            <div>
+              <h2 className="m-0 font-[family-name:var(--font-display)] text-[1.05rem] font-bold">
+                {t("firmware.title")}
+              </h2>
+              <p className="mt-1 m-0 text-xs text-[var(--muted)]">
+                {t("firmware.count", { count: filtered.length })}
+              </p>
+            </div>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={() => void load()}
+              disabled={loading}
+            >
+              <RefreshCw
+                className={cn("size-3.5", loading && "animate-spin")}
+              />
+              {t("firmware.refresh")}
+            </Button>
+          </div>
+
+          <label className="relative mb-4 block">
+            <Search
+              className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-[var(--muted)]"
+              aria-hidden
+            />
+            <input
+              type="search"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder={t("firmware.search")}
+              className="w-full rounded-xl border border-[var(--line)] bg-[rgba(0,0,0,0.28)] py-2.5 pr-3 pl-10 text-sm text-[var(--ink)] outline-none placeholder:text-[var(--muted)] focus:border-[rgba(240,197,10,0.45)]"
+            />
+          </label>
 
-        <div className="flex flex-col gap-2" role="listbox" aria-label={t("firmware.title")}>
           {loading && !firmwares.length && (
-            <p className="m-0 text-sm text-[var(--muted)]">{t("firmware.scanning")}</p>
+            <p className="m-0 text-sm text-[var(--muted)]">
+              {t("firmware.scanning")}
+            </p>
           )}
           {error && (
             <p className="m-0 text-sm text-[var(--warn)]">
               {t("firmware.error", { message: error })}
             </p>
           )}
-          {!loading && !error && !firmwares.length && (
-            <p className="m-0 text-sm text-[var(--muted)]">{t("firmware.empty")}</p>
+          {!loading && !error && !filtered.length && (
+            <p className="m-0 text-sm text-[var(--muted)]">
+              {t("firmware.empty")}
+            </p>
           )}
-          {firmwares.map((fw) => {
-            const active = fw.id === selectedId;
-            const meta = [fw.board, fw.date, fw.git ? `git ${fw.git}` : null]
-              .filter(Boolean)
-              .join(" · ");
-            return (
-              <button
+
+          <div
+            className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3"
+            role="listbox"
+            aria-label={t("firmware.title")}
+          >
+            {filtered.map((fw) => (
+              <FirmwareCard
                 key={fw.id}
-                type="button"
-                role="option"
-                aria-selected={active}
-                className={cn(
-                  "grid w-full grid-cols-[auto_1fr_auto] items-center gap-x-4 gap-y-1 rounded-[10px] border px-4 py-3.5 text-left transition-colors",
-                  active
-                    ? "border-[var(--accent)] bg-[rgba(240,197,10,0.1)] shadow-[inset_0_0_0_1px_rgba(240,197,10,0.25)]"
-                    : "border-[var(--line)] bg-[rgba(0,0,0,0.2)] hover:border-[rgba(240,197,10,0.35)] hover:bg-[rgba(240,197,10,0.05)]"
-                )}
-                onClick={() => setSelectedId(fw.id)}
-              >
-                <span
-                  className={cn(
-                    "size-4 shrink-0 rounded-full border-2",
-                    active
-                      ? "border-[var(--accent)] bg-[radial-gradient(circle_at_center,var(--accent)_40%,transparent_45%)]"
-                      : "border-[var(--muted)]"
-                  )}
-                  aria-hidden
-                />
-                <span className="min-w-0">
-                  <span className="block font-semibold leading-snug">{fw.name}</span>
-                  <span className="mt-0.5 block text-xs text-[var(--muted)]">
-                    {fw.project} / {fw.variant}
-                    {meta ? ` · ${meta}` : ""}
-                  </span>
-                </span>
-                <Badge variant="muted" className="justify-self-end tabular-nums">
-                  {formatBytes(fw.size)}
-                </Badge>
-              </button>
-            );
-          })}
+                fw={fw}
+                active={fw.id === selectedId}
+                onSelect={() => setSelectedId(fw.id)}
+              />
+            ))}
+          </div>
+        </Card>
+
+        <div className="lg:sticky lg:top-4">
+          <FirmwareDetail fw={selected} serialOk={serialOk} />
         </div>
-      </Card>
-
-      <Card>
-        <div className="mb-4 rounded-lg border border-dashed border-[var(--line)] bg-[rgba(0,0,0,0.25)] px-3.5 py-3 text-sm">
-          {selected ? (
-            <>
-              {t("firmware.selectedLabel")}{" "}
-              <strong className="font-semibold text-[var(--accent-hot)]">
-                {selected.name}
-              </strong>
-              <span className="text-[var(--muted)]"> ({selected.id})</span>
-            </>
-          ) : (
-            <span className="text-[var(--muted)]">{t("firmware.noneSelected")}</span>
-          )}
-        </div>
-
-        <EspWebInstall
-          manifest={selected?.manifestUrl ?? null}
-          label={t("install.cta")}
-          disabled={!serialOk || !selected}
-        />
-
-        <ol className="mt-5 list-decimal space-y-1.5 pl-5 text-sm text-[var(--muted)]">
-          <li>{t("install.steps.1")}</li>
-          <li>{t("install.steps.2")}</li>
-          <li>{t("install.steps.3")}</li>
-          <li>{t("install.steps.4")}</li>
-        </ol>
-      </Card>
+      </div>
     </div>
   );
 }