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/board-selector.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { BOARDS } from "@/lib/boards";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+
+export function BoardSelector({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (boardId: string) => void;
+}) {
+  const t = useTranslations("boards");
+
+  return (
+    <div>
+      <div className="mb-3 flex items-baseline justify-between gap-3">
+        <h2 className="m-0 font-[family-name:var(--font-display)] text-[1.05rem] font-bold">
+          {t("title")}
+        </h2>
+        <p className="m-0 text-xs text-[var(--muted)]">{t("hint")}</p>
+      </div>
+      <div
+        className="grid grid-cols-2 gap-2 sm:grid-cols-4"
+        role="radiogroup"
+        aria-label={t("title")}
+      >
+        {BOARDS.map((board) => {
+          const selected = board.id === value;
+          const disabled = !board.available;
+          return (
+            <button
+              key={board.id}
+              type="button"
+              role="radio"
+              aria-checked={selected}
+              aria-disabled={disabled}
+              disabled={disabled}
+              title={disabled ? t("soon") : board.displayName}
+              onClick={() => {
+                if (!disabled) onChange(board.id);
+              }}
+              className={cn(
+                "relative flex flex-col items-start gap-1 rounded-[12px] border px-3 py-3 text-left transition-all",
+                disabled &&
+                  "cursor-not-allowed opacity-40 grayscale-[0.4]",
+                !disabled &&
+                  !selected &&
+                  "border-[var(--line)] bg-[rgba(0,0,0,0.2)] hover:border-[rgba(240,197,10,0.35)]",
+                selected &&
+                  "border-[var(--accent)] bg-[rgba(240,197,10,0.1)] shadow-[inset_0_0_0_1px_rgba(240,197,10,0.25)]"
+              )}
+            >
+              <span className="text-[0.8rem] font-semibold leading-tight">
+                {t(`items.${board.labelKey}`)}
+              </span>
+              <span className="text-[0.7rem] text-[var(--muted)]">
+                {board.chip}
+              </span>
+              {disabled && (
+                <Badge variant="muted" className="mt-1 absolute top-2 right-2">
+                  {t("soon")}
+                </Badge>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

components/firmware-card.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { Film, FileText, ImageIcon } from "lucide-react";
+import type { FirmwareInfo } from "@/lib/firmware";
+import { formatBytes, cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+
+function MediaSlot({ fw, active }: { fw: FirmwareInfo; active: boolean }) {
+  const src = fw.media.animation || fw.media.cover;
+  if (src) {
+    return (
+      // Dynamic firmware media URLs — next/image needs remotePatterns per host
+      // eslint-disable-next-line @next/next/no-img-element -- local API / arbitrary media
+      <img
+        src={src}
+        alt=""
+        className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
+      />
+    );
+  }
+
+  const initials = fw.name
+    .replace(/[^A-Za-z0-9\u4e00-\u9fff]+/g, " ")
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((w) => w[0]?.toUpperCase() ?? "")
+    .join("");
+
+  return (
+    <div
+      className={cn(
+        "flex h-full w-full flex-col items-center justify-center gap-2 bg-[radial-gradient(ellipse_at_30%_20%,rgba(240,197,10,0.18),transparent_55%),linear-gradient(160deg,#1a1610,#0e0c09)]",
+        active && "from-[rgba(240,197,10,0.22)]"
+      )}
+    >
+      <span className="font-[family-name:var(--font-display)] text-3xl font-extrabold tracking-tight text-[var(--accent-hot)]/80">
+        {initials || "FW"}
+      </span>
+      <span className="text-[0.65rem] uppercase tracking-[0.14em] text-[var(--muted)]">
+        preview soon
+      </span>
+    </div>
+  );
+}
+
+export function FirmwareCard({
+  fw,
+  active,
+  onSelect,
+}: {
+  fw: FirmwareInfo;
+  active: boolean;
+  onSelect: () => void;
+}) {
+  const hasVideo = Boolean(fw.media.video);
+  const hasDocs = Boolean(fw.media.docs);
+  const hasCover = Boolean(fw.media.cover || fw.media.animation);
+
+  return (
+    <button
+      type="button"
+      role="option"
+      aria-selected={active}
+      onClick={onSelect}
+      className={cn(
+        "group flex flex-col overflow-hidden rounded-[14px] border text-left transition-all duration-200",
+        active
+          ? "border-[var(--accent)] bg-[rgba(240,197,10,0.08)] shadow-[0_0_0_1px_rgba(240,197,10,0.3),0_12px_32px_rgba(0,0,0,0.35)]"
+          : "border-[var(--line)] bg-[rgba(0,0,0,0.22)] hover:-translate-y-0.5 hover:border-[rgba(240,197,10,0.35)] hover:bg-[rgba(240,197,10,0.04)]"
+      )}
+    >
+      <div className="relative aspect-[16/10] w-full overflow-hidden border-b border-[var(--line)]">
+        <MediaSlot fw={fw} active={active} />
+        <div className="absolute bottom-2 left-2 flex gap-1">
+          {hasCover && (
+            <span className="rounded bg-black/55 p-1 text-[var(--ink)] backdrop-blur-sm">
+              <ImageIcon className="size-3" aria-hidden />
+            </span>
+          )}
+          {hasVideo && (
+            <span className="rounded bg-black/55 p-1 text-[var(--ink)] backdrop-blur-sm">
+              <Film className="size-3" aria-hidden />
+            </span>
+          )}
+          {hasDocs && (
+            <span className="rounded bg-black/55 p-1 text-[var(--ink)] backdrop-blur-sm">
+              <FileText className="size-3" aria-hidden />
+            </span>
+          )}
+        </div>
+        <Badge
+          variant="muted"
+          className="absolute bottom-2 right-2 bg-black/55 text-[0.65rem] backdrop-blur-sm"
+        >
+          {formatBytes(fw.size)}
+        </Badge>
+      </div>
+
+      <div className="flex flex-1 flex-col gap-2 p-3.5">
+        <h3 className="m-0 line-clamp-2 font-semibold leading-snug">{fw.name}</h3>
+        {fw.summary && (
+          <p className="m-0 line-clamp-2 text-xs leading-relaxed text-[var(--muted)]">
+            {fw.summary}
+          </p>
+        )}
+        <div className="mt-auto flex flex-wrap gap-1.5 pt-1">
+          {fw.tags.slice(0, 3).map((tag) => (
+            <Badge key={tag} variant="default" className="max-w-full truncate">
+              {tag}
+            </Badge>
+          ))}
+          {fw.date && (
+            <Badge variant="muted" className="tabular-nums">
+              {fw.date}
+            </Badge>
+          )}
+        </div>
+      </div>
+    </button>
+  );
+}

components/firmware-detail.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ExternalLink, FileText } from "lucide-react";
+import type { FirmwareInfo } from "@/lib/firmware";
+import { formatBytes } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { EspWebInstall } from "@/components/esp-web-install";
+
+export function FirmwareDetail({
+  fw,
+  serialOk,
+}: {
+  fw: FirmwareInfo | null;
+  serialOk: boolean;
+}) {
+  const t = useTranslations();
+
+  if (!fw) {
+    return (
+      <div className="rounded-[14px] border border-dashed border-[var(--line)] bg-[rgba(0,0,0,0.2)] px-5 py-10 text-center text-sm text-[var(--muted)]">
+        {t("firmware.noneSelected")}
+      </div>
+    );
+  }
+
+  const preview = fw.media.video || fw.media.animation || fw.media.cover;
+
+  return (
+    <aside className="sticky top-4 flex flex-col overflow-hidden rounded-[14px] border border-[var(--line)] bg-[color-mix(in_srgb,var(--bg-elev)_92%,transparent)] backdrop-blur-sm">
+      <div className="border-b border-[var(--line)] px-4 py-3">
+        <p className="m-0 text-xs text-[var(--muted)]">
+          {t("firmware.selectedLabel")}
+        </p>
+        <h3 className="m-0 mt-0.5 truncate font-[family-name:var(--font-display)] text-lg font-bold">
+          {fw.name}
+        </h3>
+      </div>
+
+      <div className="aspect-video w-full border-b border-[var(--line)] bg-black/40">
+        {fw.media.video ? (
+          <video
+            key={fw.media.video}
+            className="h-full w-full object-cover"
+            controls
+            playsInline
+            preload="metadata"
+            poster={fw.media.cover || undefined}
+          >
+            <source src={fw.media.video} />
+          </video>
+        ) : preview ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={preview}
+            alt=""
+            className="h-full w-full object-cover"
+          />
+        ) : (
+          <div className="flex h-full flex-col items-center justify-center gap-1 px-4 text-center">
+            <p className="m-0 text-sm text-[var(--muted)]">
+              {t("firmware.mediaPlaceholder")}
+            </p>
+            <p className="m-0 text-xs text-[var(--muted)] opacity-70">
+              meta.json → media.cover / animation / video
+            </p>
+          </div>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-4 p-4">
+        {(fw.description || fw.summary) && (
+          <p className="m-0 text-sm leading-relaxed text-[var(--muted)]">
+            {fw.description || fw.summary}
+          </p>
+        )}
+
+        <div className="flex flex-wrap gap-1.5">
+          {fw.tags.map((tag) => (
+            <Badge key={tag}>{tag}</Badge>
+          ))}
+          <Badge variant="muted">{formatBytes(fw.size)}</Badge>
+          {fw.flash_size && <Badge variant="muted">{fw.flash_size}</Badge>}
+          {fw.git && <Badge variant="muted">git {fw.git}</Badge>}
+          {fw.date && <Badge variant="muted">{fw.date}</Badge>}
+        </div>
+
+        <p className="m-0 text-xs text-[var(--muted)]">
+          {fw.project}/{fw.variant} · {fw.board}
+        </p>
+
+        {fw.media.docs && (
+          <a
+            href={fw.media.docs}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 text-sm text-[var(--accent-hot)] underline-offset-2 hover:underline"
+          >
+            <FileText className="size-4" />
+            {t("firmware.docs")}
+            <ExternalLink className="size-3 opacity-70" />
+          </a>
+        )}
+
+        <EspWebInstall
+          manifest={fw.manifestUrl}
+          label={t("install.cta")}
+          disabled={!serialOk}
+        />
+
+        <ol className="m-0 list-decimal space-y-1 pl-4 text-xs 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>
+      </div>
+    </aside>
+  );
+}

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>
   );
 }