feat(e7-3-ui): Roundtrip OK/FAIL badge per row in DataInspector

Follow-up to E7-3 (adefb18) — wires the data.roundtrip_check RPC into
the UI so users see per-row OK/FAIL badges (green/red) with tooltip
showing byte_diff + decoded preview.

vbgui/src/components/DataInspector.tsx:
- New tokenizer path input + "Check roundtrip" button (disabled until
  both parquet path and tokenizer path are set).
- roundtrip state map keyed by row_idx; on click fires data.roundtrip_check
  RPC and stores results.
- Inline badge next to "row #N": green "Roundtrip OK" or red
  "Roundtrip FAIL" with title=byte_diff + decoded_preview.

Tests (+3 vitest):
- tokenizer input + button render; button disabled when paths empty
- button enables when both paths are filled
- after Load + Check: data-roundtrip-{i} badges appear with OK/FAIL
  text per row matching the RPC payload

Regression: vbgui vitest 153 / 0 failed.

Closes cppmega-mlx-bb0.15.

Author: apstenku123

vbgui/src/components/DataInspector.tsx

@@ -39,6 +39,21 @@ function isArrayRibbon(v: unknown): v is unknown[] {
   return Array.isArray(v);
 }
 
+interface RoundtripRowResult {
+  row_idx: number;
+  matches: boolean;
+  byte_diff: number;
+  decoded_preview: string;
+  original_bytes: number;
+  decoded_bytes: number;
+}
+interface RoundtripCheckResult {
+  rows: RoundtripRowResult[];
+  pass_rate: number;
+  tokenizer_capability: string;
+  has_original_text: boolean;
+}
+
 export function DataInspector({
   rpc, initialPath = "", pageSize = 16,
 }: DataInspectorProps): JSX.Element {
@@ -47,6 +62,9 @@ export function DataInspector({
   const [result, setResult] = useState<PreviewParquetResult | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [enabled, setEnabled] = useState<Set<string>>(new Set());
+  const [tokenizerSource, setTokenizerSource] = useState("");
+  const [roundtrip, setRoundtrip] =
+    useState<Map<number, RoundtripRowResult>>(new Map());
 
   const load = useCallback(async (nextOffset: number) => {
     if (!path) return;
@@ -101,6 +119,29 @@ export function DataInspector({
           Load
         </button>
       </header>
+      <header style={{ display: "flex", gap: 8, alignItems: "center" }}>
+        <span style={{ fontSize: 11, color: "#6b7280" }}>Tokenizer:</span>
+        <input data-testid="data-tokenizer-path"
+               type="text" placeholder="/path/to/tokenizer.json (optional)"
+               value={tokenizerSource}
+               onChange={(e) => setTokenizerSource(e.target.value)}
+               style={{ flex: 1, fontFamily: "monospace", fontSize: 11 }} />
+        <button data-testid="data-roundtrip"
+                disabled={!path || !tokenizerSource}
+                onClick={async () => {
+                  try {
+                    const r = await rpc.call<RoundtripCheckResult>(
+                      "data.roundtrip_check",
+                      { parquet_path: path, tokenizer_source: tokenizerSource,
+                        max_rows: pageSize });
+                    const m = new Map<number, RoundtripRowResult>();
+                    for (const row of r.rows) m.set(row.row_idx, row);
+                    setRoundtrip(m);
+                  } catch (e) { setError(String(e)); }
+                }}>
+          Check roundtrip
+        </button>
+      </header>
 
       {error && (
         <div data-testid="data-error"
@@ -147,7 +188,23 @@ export function DataInspector({
                    data-testid={`data-row-${row.row_index}`}
                    style={{ padding: 6, borderBottom: "1px solid #f3f4f6",
                             fontFamily: "monospace", fontSize: 11 }}>
-                <div style={{ color: "#6b7280" }}>row #{row.row_index}</div>
+                <div style={{ color: "#6b7280",
+                              display: "flex", gap: 6, alignItems: "center" }}>
+                  <span>row #{row.row_index}</span>
+                  {roundtrip.has(row.row_index) && (() => {
+                    const rt = roundtrip.get(row.row_index)!;
+                    return (
+                      <span data-testid={`data-roundtrip-${row.row_index}`}
+                            title={`byte_diff=${rt.byte_diff} · decoded="${rt.decoded_preview}"`}
+                            style={{ padding: "1px 6px", borderRadius: 3,
+                                     fontSize: 10, fontWeight: 600,
+                                     background: rt.matches ? "#dcfce7" : "#fee2e2",
+                                     color: rt.matches ? "#166534" : "#991b1b" }}>
+                        Roundtrip {rt.matches ? "OK" : "FAIL"}
+                      </span>
+                    );
+                  })()}
+                </div>
                 <div style={{ display: "flex", flexWrap: "wrap", gap: 2,
                               padding: "2px 0" }}>
                   {row.tokens.map((tok, i) => (

vbgui/tests/DataInspectorRoundtrip.test.tsx

@@ -0,0 +1,74 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { DataInspector } from "@/components/DataInspector";
+import type { RpcClient } from "@/lib/rpc";
+
+const PREVIEW = {
+  rows: [
+    { row_index: 0, tokens: ["a", "b"], channels: {} },
+    { row_index: 1, tokens: ["c", "d"], channels: {} },
+  ],
+  token_column: "input_ids",
+  available_channels: [],
+  bytes_per_token_avg: 2.5,
+  bytes_per_token_p95: 4,
+  bytes_per_token_max: 8,
+  total_rows: 2,
+};
+
+const ROUNDTRIP = {
+  rows: [
+    { row_idx: 0, matches: true, byte_diff: 0,
+      decoded_preview: "ab", original_bytes: 2, decoded_bytes: 2 },
+    { row_idx: 1, matches: false, byte_diff: 3,
+      decoded_preview: "xy", original_bytes: 4, decoded_bytes: 2 },
+  ],
+  pass_rate: 0.5,
+  tokenizer_capability: "exact",
+  has_original_text: true,
+};
+
+function fakeRpc(): RpcClient {
+  return {
+    call: vi.fn(async (method: string) => {
+      if (method === "data.preview_parquet") return PREVIEW;
+      if (method === "data.roundtrip_check") return ROUNDTRIP;
+      throw new Error("unexpected " + method);
+    }),
+  } as unknown as RpcClient;
+}
+
+describe("DataInspector roundtrip badge (E7-3-UI)", () => {
+  it("tokenizer input + Check roundtrip button render", () => {
+    render(<DataInspector rpc={fakeRpc()} />);
+    expect(screen.getByTestId("data-tokenizer-path")).toBeTruthy();
+    const btn = screen.getByTestId("data-roundtrip") as HTMLButtonElement;
+    expect(btn.disabled).toBe(true);  // disabled until both paths filled
+  });
+
+  it("Check roundtrip button enables when both paths filled", async () => {
+    render(<DataInspector rpc={fakeRpc()} />);
+    fireEvent.change(screen.getByTestId("data-path"),
+                     { target: { value: "/p.parquet" } });
+    fireEvent.change(screen.getByTestId("data-tokenizer-path"),
+                     { target: { value: "/tok.json" } });
+    const btn = screen.getByTestId("data-roundtrip") as HTMLButtonElement;
+    expect(btn.disabled).toBe(false);
+  });
+
+  it("Check roundtrip → per-row OK/FAIL badges appear", async () => {
+    render(<DataInspector rpc={fakeRpc()} />);
+    fireEvent.change(screen.getByTestId("data-path"),
+                     { target: { value: "/p.parquet" } });
+    fireEvent.click(screen.getByTestId("data-load"));
+    await waitFor(() => screen.getByTestId("data-row-0"));
+    fireEvent.change(screen.getByTestId("data-tokenizer-path"),
+                     { target: { value: "/tok.json" } });
+    fireEvent.click(screen.getByTestId("data-roundtrip"));
+    await waitFor(() => screen.getByTestId("data-roundtrip-0"));
+    expect(screen.getByTestId("data-roundtrip-0").textContent)
+      .toContain("OK");
+    expect(screen.getByTestId("data-roundtrip-1").textContent)
+      .toContain("FAIL");
+  });
+});