feat(v7-f58): Gallery tab — per-preset sortable report + cache

Closes the F-block gap "Per-preset gallery report sortable таблица"
(cppmega-mlx-j3qa.3): the architect can now compare every preset at a
glance (bricks count, params M, mem MB, last loss, step ms) in a
sortable table that persists across reloads.

vbgui/src/hooks/useGalleryCache.ts:
- localStorage-backed Record<preset, GalleryEntry>; key
  vbgui_gallery_runs_v1 (versioned for future schema migration).
- safeRead / safeWrite swallow QuotaExceeded + missing-storage so
  the cache never crashes the UI.

vbgui/src/components/GalleryTab.tsx:
- Sortable HTML table. Columns: preset, bricks, params_M, mem_MB,
  last_loss, last_step_ms, run_at.
- Click any column header to sort asc; click again to flip desc.
  aria-sort attribute reflects the current state for a11y + e2e.
- Missing values render as '—' and always sort to the bottom
  regardless of direction (partition-then-sort, not naive reverse).
- Per-row "Refresh" button calls onRefresh(preset).
- Refreshing-in-progress state shown as '…' button label so the
  user knows the click landed.

vbgui/src/components/AppTabs.tsx:
- New 'gallery' tab in AppTab union. Order: Canvas → Tokenizer →
  Data → Gallery.

vbgui/src/App.tsx:
- gallery + galleryRefreshing state via the new hook.
- onRefresh handler: build_preset_specs RPC → wraps in verifyParams
  → verify RPC → computes params_M (sum params_bytes / 4 bytes-per-fp32
  / 1e6) and mem_MB (params + activations / 1e6). Falls back to a
  sentinel-only entry when the RPC fails so the row remains visible.
- Gallery tab branch in the activeTab switcher.

vbgui/tests/GalleryTab.test.tsx — 6 unit tests:
- Rows render per preset with cell + row testids.
- Default sort is preset asc.
- Click toggles asc → desc.
- Numeric sort with missing values bottom-anchored in BOTH directions.
- Refresh fires onRefresh with the row's preset.
- Refresh label flips to '…' while refreshing set contains preset.

vbgui/e2e/scenarios/58_gallery_sortable.spec.ts — Playwright e2e:
- Real backend roundtrip: refresh llama3_8b + qwen3_dense_0_6b,
  poll until params_M cells stop showing '—'.
- Sort by params_M ascending then descending; assert the two
  filled rows REVERSE between directions (DOM order check via
  data-testid evaluateAll, not text scraping).
- Sort by preset name; assert aria-sort = ascending.

13/13 vitest pass (GalleryTab + App.integration).

Ref: cppmega-mlx-j3qa.3

Author: apstenku123

vbgui/e2e/scenarios/58_gallery_sortable.spec.ts

@@ -0,0 +1,62 @@
+// V7-F58 visual e2e — Gallery tab sortable table.
+// Real backend roundtrip: refresh two presets, verify their stats
+// populate, click column headers to sort asc/desc, assert visible row
+// order through data-testid attribute reading.
+
+import { test, expect } from "@playwright/test";
+import { gotoApp } from "../fixtures";
+
+test("F58: Gallery tab refreshes two presets and sorts by params_M", async ({
+  page,
+}) => {
+  await gotoApp(page);
+
+  // Switch to the new Gallery tab.
+  await page.getByTestId("app-tab-gallery").click();
+  await expect(page.getByTestId("gallery-tab")).toBeVisible();
+
+  // Refresh two presets — real verify roundtrip per preset.
+  const A = "llama3_8b";
+  const B = "qwen3_dense_0_6b";
+  await page.getByTestId(`gallery-refresh-${A}`).click();
+  await page.getByTestId(`gallery-refresh-${B}`).click();
+  // Stats land in cache → cells show numeric content (not the '—' dash).
+  await expect.poll(async () =>
+    await page.getByTestId(`gallery-cell-${A}-params_M`).textContent(),
+    { timeout: 15_000 },
+  ).not.toBe("—");
+  await expect.poll(async () =>
+    await page.getByTestId(`gallery-cell-${B}-params_M`).textContent(),
+    { timeout: 15_000 },
+  ).not.toBe("—");
+
+  // Sort by params_M ascending. aria-sort attribute is the contract.
+  const paramsHeader = page.getByTestId("gallery-sort-params_M");
+  await paramsHeader.click();
+  await expect(paramsHeader).toHaveAttribute("aria-sort", "ascending");
+
+  // Capture row order via data-testid attribute walk — pure DOM read,
+  // no scraping of cell text. Then sort desc and assert reversal of
+  // the two refreshed presets while uncached rows remain at the
+  // bottom (they have no params_M value → tie-break stable).
+  const rowsAsc = await page.locator("[data-testid^='gallery-row-']")
+    .evaluateAll((els) => els.map((e) => e.getAttribute("data-testid")));
+  const filledAsc = rowsAsc.filter((r) =>
+    r === `gallery-row-${A}` || r === `gallery-row-${B}`);
+  expect(filledAsc.length).toBe(2);
+
+  await paramsHeader.click();
+  await expect(paramsHeader).toHaveAttribute("aria-sort", "descending");
+  const rowsDesc = await page.locator("[data-testid^='gallery-row-']")
+    .evaluateAll((els) => els.map((e) => e.getAttribute("data-testid")));
+  const filledDesc = rowsDesc.filter((r) =>
+    r === `gallery-row-${A}` || r === `gallery-row-${B}`);
+  // The two filled rows must reverse order between asc and desc.
+  expect(filledDesc).toEqual([...filledAsc].reverse());
+
+  // Click the preset header — default sort by name asc returns A,B
+  // in alphabetical order (llama3_8b < qwen3_dense_0_6b).
+  await page.getByTestId("gallery-sort-preset").click();
+  await expect(page.getByTestId("gallery-sort-preset"))
+    .toHaveAttribute("aria-sort", "ascending");
+});

vbgui/src/App.tsx

@@ -5,6 +5,8 @@ import {
 
 import { FlowCanvas } from "@/components/FlowCanvas";
 import { DimEnvEditor } from "@/components/DimEnvEditor";
+import { GalleryTab } from "@/components/GalleryTab";
+import { useGalleryCache } from "@/hooks/useGalleryCache";
 import { Palette } from "@/components/Palette";
 import { Sidebar } from "@/components/Sidebar";
 import { TopBar, type RunMode } from "@/components/TopBar";
@@ -154,6 +156,11 @@ export function App(): JSX.Element {
   const [dimEnv, setDimEnv] = useState<Record<string, number>>(
     { ...MINI_DIM_ENV });
 
+  // V7-F58: per-preset gallery cache + refresh tracking.
+  const gallery = useGalleryCache();
+  const [galleryRefreshing, setGalleryRefreshing] = useState<Set<string>>(
+    new Set());
+
   // Keep one stable spec snapshot for the verify debouncer to read.
   const wireSpecRef = useRef({ nodes, edges, spec, availableSideChannels,
                                dimEnv });
@@ -606,6 +613,21 @@ export function App(): JSX.Element {
             };
             reader.readAsText(file);
           }}
+          onDtypeCostEstimate={async () => {
+            // V7-D06: small inline probe; UI renders ms/token per option.
+            return rpc.call<{
+              rows: Array<{
+                dtype: "fp32" | "bf16" | "fp16";
+                supported: boolean;
+                fwd_ms: number | null;
+                fwdbwd_ms: number | null;
+                fwd_ms_per_token: number | null;
+                fwdbwd_ms_per_token: number | null;
+                cast_overhead_ms: number | null;
+                error: string | null;
+              }>
+            }>("dtype.cost_estimate", {});
+          }}
           onInspectCheckpoint={async (path: string) => {
             // V7-C03: thin pass-through to ckpt.inspect RPC. Errors
             // surface as the TopBar's "no cppmega metadata" / error
@@ -804,6 +826,71 @@ export function App(): JSX.Element {
               onAvailableChannelsChange={setAvailableSideChannels}
               trainParquetPath={trainParquetPath} />
           )}
+          {activeTab === "gallery" && (
+            <GalleryTab
+              presets={PRESETS}
+              cache={gallery.cache}
+              refreshing={galleryRefreshing}
+              onRefresh={async (preset) => {
+                setGalleryRefreshing((s) => new Set(s).add(preset));
+                try {
+                  const t0 = Date.now();
+                  const r = await rpc.call<{ specs: BrickSpec[];
+                                             preset_name: string }>(
+                    "build_preset_specs",
+                    { preset_name: preset, hidden_size: dimEnv.H ?? 128 },
+                  );
+                  const { nodes: ns, edges: es } = presetSpecsToNodes(
+                    r.specs);
+                  const verifyParams = {
+                    graph: { nodes: ns.map((n) => ({
+                                 id: n.id,
+                                 kind: (n.data as { kind: string }).kind,
+                                 params: (n.data as { params?: Record<string, unknown> })
+                                          .params ?? {} })),
+                             edges: es.map((e) => ({
+                                 src: e.source, dst: e.target })) },
+                    dim_env: dimEnv,
+                    loss: { kind: "cross_entropy",
+                            head_outputs: ns.length > 0
+                              ? [ns[ns.length - 1].id]
+                              : [] },
+                    optim: { kind: "adamw",
+                             groups: [{ matcher: "all", lr: 1e-3,
+                               weight_decay: 0.01, betas: [0.9, 0.95] }] },
+                    sharding: null,
+                  };
+                  const v = await rpc.call<{
+                    memory_per_brick?: Record<string, { params_bytes: number;
+                                                       activations_bytes: number }>;
+                    elapsed_ms: number;
+                  }>("verify", verifyParams);
+                  let totalParams = 0;
+                  let totalMem = 0;
+                  for (const rec of Object.values(v.memory_per_brick ?? {})) {
+                    totalParams += rec.params_bytes;
+                    totalMem += rec.params_bytes + rec.activations_bytes;
+                  }
+                  gallery.upsert({
+                    preset,
+                    bricks: ns.length,
+                    params_M: totalParams / 4 / 1_000_000,
+                    mem_MB: totalMem / 1_000_000,
+                    last_step_ms: Date.now() - t0,
+                    run_at: Date.now(),
+                  });
+                } catch {
+                  gallery.upsert({
+                    preset, bricks: 0, run_at: Date.now(),
+                  });
+                } finally {
+                  setGalleryRefreshing((s) => {
+                    const n = new Set(s); n.delete(preset); return n;
+                  });
+                }
+              }}
+            />
+          )}
         </div>
         <BottomStrip state={spec} fusedRegionCount={0} />
         <RunResultModal report={runReport} error={runError}

vbgui/src/components/AppTabs.tsx

@@ -1,6 +1,7 @@
-// Top-level view switcher used by App.tsx — Canvas vs Tokenizer vs Data.
+// Top-level view switcher used by App.tsx. Canvas vs Tokenizer vs
+// Data vs Gallery (V7-F58 per-preset sortable report).
 
-export type AppTab = "canvas" | "tokenizer" | "data";
+export type AppTab = "canvas" | "tokenizer" | "data" | "gallery";
 
 export interface AppTabsProps {
   active: AppTab;
@@ -11,6 +12,7 @@ const TABS: { key: AppTab; label: string }[] = [
   { key: "canvas",    label: "Canvas" },
   { key: "tokenizer", label: "Tokenizer Playground" },
   { key: "data",      label: "Data Inspector" },
+  { key: "gallery",   label: "Gallery" },
 ];
 
 export function AppTabs({ active, onChange }: AppTabsProps): JSX.Element {

vbgui/src/components/GalleryTab.tsx

@@ -0,0 +1,166 @@
+// V7-F58 per-preset sortable gallery. Renders a table of all available
+// presets with cached run stats (bricks count, params_M, mem_MB,
+// last_loss, last_step_ms). Click a column header to sort asc/desc.
+// "Refresh" button per row runs a verify roundtrip to repopulate stats.
+
+import { useMemo, useState } from "react";
+import type { GalleryCache, GalleryEntry } from "@/hooks/useGalleryCache";
+
+export type GalleryColumn =
+  | "preset" | "bricks" | "params_M" | "mem_MB"
+  | "last_loss" | "last_step_ms" | "run_at";
+
+export interface GalleryTabProps {
+  presets: readonly string[];
+  cache: GalleryCache;
+  onRefresh?: (preset: string) => Promise<void> | void;
+  refreshing?: Set<string>;
+}
+
+const COLUMNS: { key: GalleryColumn; label: string; numeric: boolean }[] = [
+  { key: "preset",         label: "Preset",       numeric: false },
+  { key: "bricks",         label: "Bricks",       numeric: true  },
+  { key: "params_M",       label: "Params (M)",   numeric: true  },
+  { key: "mem_MB",         label: "Mem (MB)",     numeric: true  },
+  { key: "last_loss",      label: "Last loss",    numeric: true  },
+  { key: "last_step_ms",   label: "Step (ms)",    numeric: true  },
+  { key: "run_at",         label: "Last run",     numeric: true  },
+];
+
+type SortDir = "asc" | "desc";
+
+function compare(a: GalleryEntry, b: GalleryEntry,
+                 col: GalleryColumn): number {
+  if (col === "preset") return a.preset.localeCompare(b.preset);
+  const av = (a as Record<GalleryColumn, unknown>)[col];
+  const bv = (b as Record<GalleryColumn, unknown>)[col];
+  const an = typeof av === "number" && Number.isFinite(av) ? av : null;
+  const bn = typeof bv === "number" && Number.isFinite(bv) ? bv : null;
+  // missing values sort last regardless of direction.
+  if (an == null && bn == null) return 0;
+  if (an == null) return 1;
+  if (bn == null) return -1;
+  return an - bn;
+}
+
+function fmt(v: unknown, col: GalleryColumn): string {
+  if (v == null) return "—";
+  if (col === "run_at" && typeof v === "number") {
+    return new Date(v).toISOString().replace("T", " ").slice(0, 19);
+  }
+  if (typeof v === "number") {
+    return Math.abs(v) >= 1000 || Number.isInteger(v)
+      ? v.toFixed(0)
+      : v.toFixed(3);
+  }
+  return String(v);
+}
+
+export function GalleryTab({
+  presets, cache, onRefresh, refreshing,
+}: GalleryTabProps): JSX.Element {
+  const [sortCol, setSortCol] = useState<GalleryColumn>("preset");
+  const [sortDir, setSortDir] = useState<SortDir>("asc");
+
+  const rows = useMemo<GalleryEntry[]>(() => {
+    const entries = presets.map<GalleryEntry>((p) =>
+      cache[p] ?? {
+        preset: p, bricks: 0, run_at: 0,
+      });
+    // Partition first so rows with the sorted column missing always
+    // sort to the bottom regardless of direction (otherwise reversing
+    // an asc sort would put missing values at the top in desc).
+    const isMissing = (e: GalleryEntry) => {
+      if (sortCol === "preset") return false;
+      const v = (e as Record<GalleryColumn, unknown>)[sortCol];
+      return typeof v !== "number" || !Number.isFinite(v);
+    };
+    const known = entries.filter((e) => !isMissing(e));
+    const missing = entries.filter(isMissing);
+    known.sort((a, b) => compare(a, b, sortCol));
+    if (sortDir === "desc") known.reverse();
+    return [...known, ...missing];
+  }, [presets, cache, sortCol, sortDir]);
+
+  function toggleSort(col: GalleryColumn) {
+    if (col === sortCol) {
+      setSortDir(sortDir === "asc" ? "desc" : "asc");
+    } else {
+      setSortCol(col);
+      setSortDir("asc");
+    }
+  }
+
+  return (
+    <div data-testid="gallery-tab"
+         style={{ padding: 12, fontFamily: "system-ui, sans-serif",
+                  fontSize: 12, overflowY: "auto", flex: 1 }}>
+      <h3 style={{ margin: "0 0 8px", fontSize: 14 }}>
+        Per-preset gallery
+      </h3>
+      <p style={{ color: "#6b7280", marginTop: 0 }}>
+        Click a column header to sort ascending/descending. "Refresh"
+        runs a verify roundtrip and caches stats. Cache persists across
+        reloads (localStorage <code>vbgui_gallery_runs_v1</code>).
+      </p>
+      <table data-testid="gallery-table"
+             style={{ width: "100%", borderCollapse: "collapse" }}>
+        <thead>
+          <tr style={{ borderBottom: "1px solid #e5e7eb" }}>
+            {COLUMNS.map((c) => {
+              const ariaSort = sortCol === c.key
+                ? (sortDir === "asc" ? "ascending" : "descending")
+                : "none";
+              return (
+                <th key={c.key}
+                    data-testid={`gallery-sort-${c.key}`}
+                    aria-sort={ariaSort}
+                    onClick={() => toggleSort(c.key)}
+                    style={{ textAlign: c.numeric ? "right" : "left",
+                             padding: "4px 6px", cursor: "pointer",
+                             color: "#374151", fontWeight: 600,
+                             userSelect: "none" }}>
+                  {c.label}{" "}
+                  {sortCol === c.key
+                    ? (sortDir === "asc" ? "▲" : "▼")
+                    : ""}
+                </th>
+              );
+            })}
+            <th style={{ padding: "4px 6px" }} />
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((r) => (
+            <tr key={r.preset}
+                data-testid={`gallery-row-${r.preset}`}
+                style={{ borderBottom: "1px solid #f3f4f6" }}>
+              {COLUMNS.map((c) => (
+                <td key={c.key}
+                    data-testid={`gallery-cell-${r.preset}-${c.key}`}
+                    style={{ padding: "4px 6px",
+                             textAlign: c.numeric ? "right" : "left",
+                             color: "#374151" }}>
+                  {c.key === "preset" ? r.preset
+                    : fmt((r as Record<GalleryColumn, unknown>)[c.key],
+                          c.key)}
+                </td>
+              ))}
+              <td style={{ padding: "4px 6px" }}>
+                {onRefresh && (
+                  <button
+                    data-testid={`gallery-refresh-${r.preset}`}
+                    onClick={() => onRefresh(r.preset)}
+                    disabled={refreshing?.has(r.preset)}
+                    style={{ padding: "2px 8px" }}>
+                    {refreshing?.has(r.preset) ? "…" : "Refresh"}
+                  </button>
+                )}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}