Spaces:

WaveCut
/

Bonsai-Chat-WebGPU

Running

App Files Files Community

WaveCut commited on 2 days ago

Commit

c2b7fe3

verified ·

1 Parent(s): 48cbfef

Add Phase 5 benchmark and runtime provenance

Browse files

Files changed (28) hide show

.gitattributes +0 -2
README.md +32 -2
bench/index.html +18 -0
public/wasm/wllama-compat.wasm +2 -2
public/wasm/wllama.wasm +2 -2
scripts/verify-wllama-assets.mjs +18 -0
src/app/App.test.ts +20 -1
src/app/App.tsx +47 -3
src/app/styles.css +606 -0
src/bench/BenchApp.tsx +589 -0
src/bench/report.test.ts +259 -0
src/bench/report.ts +304 -0
src/engine/device-gate.test.ts +22 -0
src/engine/device-gate.ts +13 -5
src/engine/protocol.ts +20 -0
src/engine/runtime-download.test.ts +27 -0
src/engine/runtime-generate.test.ts +48 -0
src/engine/runtime.ts +89 -8
src/main.tsx +7 -1
vendor/wllama-bonsai/PATCH.diff +181 -0
vendor/wllama-bonsai/SOURCE.json +29 -4
vendor/wllama-bonsai/esm/index.cjs +1 -0
vendor/wllama-bonsai/esm/index.js +1 -0
vendor/wllama-bonsai/esm/index.min.js +0 -0
vendor/wllama-bonsai/esm/index.min.js.map +0 -0
vendor/wllama-bonsai/esm/types/types.d.ts +1 -0
vendor/wllama-bonsai/esm/wasm/source-map.d.ts +1 -0
vite.config.ts +8 -0

.gitattributes CHANGED Viewed

@@ -1,3 +1 @@
 public/wasm/*.wasm filter=lfs diff=lfs merge=lfs -text
-dist/wasm/wllama-compat.wasm filter=lfs diff=lfs merge=lfs -text
-dist/wasm/wllama.wasm filter=lfs diff=lfs merge=lfs -text


1	public/wasm/*.wasm filter=lfs diff=lfs merge=lfs -text

README.md CHANGED Viewed

@@ -62,6 +62,32 @@ path. Edge/Windows, Safari, and Firefox remain explicit release-matrix gaps;
 dense CPU fallback is offered only when that browser exposes the required
 cross-origin-isolated WASM features.
 ## DFlash research lane
 DFlash is visible only as an inspection-only experiment. Its BF16 source and
@@ -88,6 +114,9 @@ stay in the browser; only model/static asset downloads contact Hugging Face.
 - Dawn native WebGPU validation: `18eb229ef5f707c1464cc581252e7603c73a3ef0`
 - custom wllama source: `912c18b75d4358c1405a64646b8dbe43a205943b`
 - custom nested llama.cpp: `00fa7cb284cbf133fc426733bd64238a3588a33e`
 The vendored runtime exposes the validated token-embedding WebGPU placement
 needed for single-graph Bonsai inference and fails closed when placement or the
@@ -96,8 +125,9 @@ backend tripwire disagrees. Its exact JS/WASM hashes are checked during
 `vendor/wllama-bonsai/SOURCE.json`. Third-party notices are in
 `THIRD_PARTY_NOTICES.md` and `public/licenses/`.
-Flash Attention remains off for the release path because quantized K/V
-combinations are not fully supported by the validated WebGPU backend.
 ## Licenses and attribution

 dense CPU fallback is offered only when that browser exposes the required
 cross-origin-isolated WASM features.
+## Growth benchmark
+[`/bench/`](https://wavecut-bonsai-webgpu-chat.static.hf.space/bench/) is a
+separate, shareable benchmark surface. It loads nothing until **Run benchmark**
+is pressed, then records first-load and verified-cache reload wall time, TTFT,
+prefill/decode throughput, graph placement, device limits, engine revisions,
+the exact runtime artifact hash, and a fixed temperature-0 prompt. The report
+exports as JSON; generated model text is deliberately excluded.
+`n_batch` and `n_ubatch` are available there as explicitly experimental shape
+controls. The browser result reports both requested and actual llama.cpp
+values. A pinned 1.7B WebGPU smoke proved `256/128` end to end with one graph,
+29/29 GPU layers, and zero CPU ops. Flash Attention remains locked off and KV
+remains F16/F16 on this page until candidate settings pass graph and output
+parity checks.
+The public prewarmed-cache baseline below is one Apple `metal-3` / headless
+Chrome sample, not a cross-device study and not a first-download claim:
+| Tier | Backend | Load | TTFT | Decode |
+| --- | --- | ---: | ---: | ---: |
+| 1.7B | WebGPU | 3,314 ms | 300 ms | 71.9 tok/s |
+| 1.7B | CPU-WASM | 3,844 ms | 6,092 ms | 10.6 tok/s |
+| 8B | WebGPU | 9,870 ms | 998 ms | 33.8 tok/s |
+| 27B | WebGPU | 29,488 ms | 3,348 ms | 11.9 tok/s |
 ## DFlash research lane
 DFlash is visible only as an inspection-only experiment. Its BF16 source and
 - Dawn native WebGPU validation: `18eb229ef5f707c1464cc581252e7603c73a3ef0`
 - custom wllama source: `912c18b75d4358c1405a64646b8dbe43a205943b`
 - custom nested llama.cpp: `00fa7cb284cbf133fc426733bd64238a3588a33e`
+- custom patch set: `62efebdb3071ba49b87c835c1b45716257fe5ea6cb7eec6ee82f6a2f33bc581c`
+- JSPI WASM: `dd71f58c75f32c677a64eeb2e56efab7dedbe7395f730bb08bc80021bd182caa`
+- compat WASM: `eca9754d0d8a490b5c7b58cb384d67e31aa8ab26dd330e4ad1460982df6dd82e`
 The vendored runtime exposes the validated token-embedding WebGPU placement
 needed for single-graph Bonsai inference and fails closed when placement or the
 `vendor/wllama-bonsai/SOURCE.json`. Third-party notices are in
 `THIRD_PARTY_NOTICES.md` and `public/licenses/`.
+The pinned WebGPU source implements Flash Attention with Q4_0/Q8_0 K/V, but
+those combinations are not yet validated for Bonsai browser parity. Flash
+Attention therefore remains off for the release path.
 ## Licenses and attribution

bench/index.html ADDED Viewed

	@@ -0,0 +1,18 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#111512" />
+    <link rel="icon" href="data:," />
+    <meta
+      name="description"
+      content="Bonsai browser-local benchmark — repeatable cold load, warm load, prefill, and decode evidence."
+    />
+    <title>Bonsai Growth Bench</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

public/wasm/wllama-compat.wasm CHANGED Viewed

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:609979201d693d58cd23972113af5cbe08d0a8e16deef26fc3c9d230c0228eed
-size 14864168

 version https://git-lfs.github.com/spec/v1
+oid sha256:eca9754d0d8a490b5c7b58cb384d67e31aa8ab26dd330e4ad1460982df6dd82e
+size 14864188

public/wasm/wllama.wasm CHANGED Viewed

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:829dd6c01e99893c7a0e2f9c00a97b1578ce30f0d03720b1eab5f3bc3063f973
-size 8017146

 version https://git-lfs.github.com/spec/v1
+oid sha256:dd71f58c75f32c677a64eeb2e56efab7dedbe7395f730bb08bc80021bd182caa
+size 8017169

scripts/verify-wllama-assets.mjs CHANGED Viewed

@@ -12,9 +12,20 @@ if (source.wllamaRevision !== '912c18b75d4358c1405a64646b8dbe43a205943b') {
 if (source.llamaCppRevision !== '00fa7cb284cbf133fc426733bd64238a3588a33e') {
   throw new Error(`Unexpected llama.cpp revision: ${String(source.llamaCppRevision)}`);
 }
 for (const file of source.files) {
   const bytes = await readFile(resolve(root, file.path));
   const digest = createHash('sha256').update(bytes).digest('hex');
   if (digest !== file.sha256) {
     throw new Error(`SHA-256 mismatch for ${file.path}: ${digest}`);
@@ -26,3 +37,10 @@ const declarations = await readFile(resolve(root, 'vendor/wllama-bonsai/esm/type
 if (!declarations.includes('offload_token_embedding?: boolean')) {
   throw new Error('Vendored Bonsai wllama declarations lack offload_token_embedding');
 }

 if (source.llamaCppRevision !== '00fa7cb284cbf133fc426733bd64238a3588a33e') {
   throw new Error(`Unexpected llama.cpp revision: ${String(source.llamaCppRevision)}`);
 }
+if (source.schemaVersion !== 2 || !source.patchSet?.sha256 || !source.build?.dawnArchiveSha256) {
+  throw new Error('Vendored Bonsai wllama provenance is incomplete');
+}
+const patchBytes = await readFile(resolve(root, source.patchSet.path));
+const patchDigest = createHash('sha256').update(patchBytes).digest('hex');
+if (patchBytes.byteLength !== source.patchSet.bytes || patchDigest !== source.patchSet.sha256) {
+  throw new Error(`Bonsai wllama patch-set mismatch: ${patchDigest}`);
+}
 for (const file of source.files) {
   const bytes = await readFile(resolve(root, file.path));
+  if (bytes.byteLength !== file.bytes) {
+    throw new Error(`Byte-size mismatch for ${file.path}: ${bytes.byteLength}`);
+  }
   const digest = createHash('sha256').update(bytes).digest('hex');
   if (digest !== file.sha256) {
     throw new Error(`SHA-256 mismatch for ${file.path}: ${digest}`);
 if (!declarations.includes('offload_token_embedding?: boolean')) {
   throw new Error('Vendored Bonsai wllama declarations lack offload_token_embedding');
 }
+if (!declarations.includes('n_ubatch?: number')) {
+  throw new Error('Vendored Bonsai wllama declarations lack n_ubatch');
+}
+const moduleSource = await readFile(resolve(root, 'vendor/wllama-bonsai/esm/index.js'), 'utf8');
+if (!moduleSource.includes('n_ubatch: params.n_ubatch')) {
+  throw new Error('Vendored Bonsai wllama module does not forward n_ubatch');
+}

src/app/App.test.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import { EngineClientError } from '../engine';
-import { requiresModelReload } from './App';
 function engineError(code: string): EngineClientError {
   return new EngineClientError({ code, message: code });
@@ -19,3 +19,22 @@ describe('App model invalidation policy', () => {
     expect(requiresModelReload(engineError('ABORTED'))).toBe(false);
   });
 });

 import { describe, expect, it } from 'vitest';
 import { EngineClientError } from '../engine';
+import { reconcileCompletionTokens, reconcileTotalTokens, requiresModelReload } from './App';
 function engineError(code: string): EngineClientError {
   return new EngineClientError({ code, message: code });
     expect(requiresModelReload(engineError('ABORTED'))).toBe(false);
   });
 });
+describe('App streamed completion telemetry', () => {
+  it('uses observed stream events when final engine usage is incomplete', () => {
+    expect(reconcileCompletionTokens(5, 64)).toBe(64);
+  });
+  it('keeps the engine count when one stream event contains multiple tokens', () => {
+    expect(reconcileCompletionTokens(12, 8)).toBe(12);
+  });
+  it('fails closed to the observed count for invalid engine usage', () => {
+    expect(reconcileCompletionTokens(Number.NaN, 7)).toBe(7);
+  });
+  it('keeps context usage consistent with a reconciled completion count', () => {
+    expect(reconcileTotalTokens(5, 5, 64)).toBe(69);
+    expect(reconcileTotalTokens(80, 5, 64)).toBe(80);
+  });
+});

src/app/App.tsx CHANGED Viewed

@@ -148,6 +148,39 @@ export function requiresModelReload(error: unknown): error is EngineClientError
   ].includes(error.code);
 }
 function appendSegment(current: string, next: string): string {
   const trimmed = next.trim();
   if (!trimmed) return current;
@@ -659,8 +692,19 @@ export function App() {
           },
         });
-        totalCompletionTokens += result.usage?.completionTokens ?? streamedTokenEvents;
-        lastTotalTokens = result.usage?.totalTokens ?? lastTotalTokens;
         tokensPerSecond = result.timings?.predictedTokensPerSecond ?? tokensPerSecond;
         const thought = parseThoughtStream(result.text);
         const textual = parseToolCalls(thought.content);
@@ -752,7 +796,7 @@ export function App() {
       }));
       setTelemetry((current) => ({
         ...current,
-        contextUsed: Math.min(current.contextLimit, lastTotalTokens || totalCompletionTokens),
         tokensPerSecond,
         timeToFirstTokenMs: ttft,
         graphSplits: report.nGraphSplits,

   ].includes(error.code);
 }
+export function reconcileCompletionTokens(
+  engineCompletionTokens: number | undefined,
+  streamedTokenEvents: number,
+): number {
+  const engineCount = typeof engineCompletionTokens === 'number'
+    && Number.isSafeInteger(engineCompletionTokens)
+    && engineCompletionTokens >= 0
+    ? engineCompletionTokens
+    : 0;
+  const streamCount = Number.isSafeInteger(streamedTokenEvents) && streamedTokenEvents >= 0
+    ? streamedTokenEvents
+    : 0;
+  return Math.max(engineCount, streamCount);
+}
+export function reconcileTotalTokens(
+  engineTotalTokens: number | undefined,
+  enginePromptTokens: number | undefined,
+  completionTokens: number,
+): number {
+  const totalCount = typeof engineTotalTokens === 'number'
+    && Number.isSafeInteger(engineTotalTokens)
+    && engineTotalTokens >= 0
+    ? engineTotalTokens
+    : 0;
+  const promptCount = typeof enginePromptTokens === 'number'
+    && Number.isSafeInteger(enginePromptTokens)
+    && enginePromptTokens >= 0
+    ? enginePromptTokens
+    : 0;
+  return Math.max(totalCount, promptCount + completionTokens);
+}
 function appendSegment(current: string, next: string): string {
   const trimmed = next.trim();
   if (!trimmed) return current;
           },
         });
+        const roundCompletionTokens = reconcileCompletionTokens(
+          result.usage?.completionTokens,
+          streamedTokenEvents,
+        );
+        totalCompletionTokens += roundCompletionTokens;
+        lastTotalTokens = Math.max(
+          lastTotalTokens,
+          reconcileTotalTokens(
+            result.usage?.totalTokens,
+            result.usage?.promptTokens,
+            roundCompletionTokens,
+          ),
+        );
         tokensPerSecond = result.timings?.predictedTokensPerSecond ?? tokensPerSecond;
         const thought = parseThoughtStream(result.text);
         const textual = parseToolCalls(thought.content);
       }));
       setTelemetry((current) => ({
         ...current,
+        contextUsed: Math.min(current.contextLimit, Math.max(lastTotalTokens, totalCompletionTokens)),
         tokensPerSecond,
         timeToFirstTokenMs: ttft,
         graphSplits: report.nGraphSplits,

src/app/styles.css CHANGED Viewed

@@ -2155,3 +2155,609 @@ button:disabled {
     transition-duration: 0.01ms !important;
   }
 }

     transition-duration: 0.01ms !important;
   }
 }
+/* Growth bench: a companion field instrument, served independently at /bench/. */
+.bench-page {
+  min-height: 100dvh;
+  color: var(--ink);
+  background: var(--paper);
+}
+.bench-masthead {
+  min-height: 86px;
+  display: grid;
+  grid-template-columns: minmax(310px, 1fr) minmax(360px, 1.2fr) auto;
+  align-items: stretch;
+  color: var(--paper);
+  border-bottom: 1px solid var(--phosphor);
+  background: var(--ink);
+}
+.bench-masthead .brand-block h1 {
+  color: var(--paper);
+}
+.bench-masthead-note {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  padding: 14px 28px;
+  border-inline: 1px solid var(--line-light);
+  background: linear-gradient(110deg, rgba(185, 255, 69, 0.09), transparent 72%);
+}
+.bench-masthead-note strong {
+  color: var(--phosphor);
+  font: 700 9px/1 var(--mono);
+  letter-spacing: 0.11em;
+  text-transform: uppercase;
+}
+.bench-masthead-note span {
+  max-width: 520px;
+  color: rgba(232, 223, 202, 0.55);
+  font: 10px/1.35 var(--body);
+}
+.bench-return {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 25px;
+  color: var(--paper);
+  font: 700 8px/1 var(--mono);
+  letter-spacing: 0.08em;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+.bench-return:hover {
+  color: var(--phosphor);
+}
+.bench-layout {
+  min-height: calc(100dvh - 86px);
+  display: grid;
+  grid-template-columns: minmax(275px, 330px) minmax(0, 1fr);
+}
+.bench-controls {
+  padding: 28px 22px;
+  color: var(--paper);
+  border-right: 1px solid var(--phosphor);
+  background:
+    repeating-radial-gradient(ellipse at -12% 102%, transparent 0 24px, rgba(185, 255, 69, 0.045) 25px 26px),
+    var(--ink);
+}
+.bench-controls h2 {
+  margin: 0;
+  font: 400 30px/1 var(--display);
+  letter-spacing: -0.03em;
+}
+.bench-control-intro {
+  margin: 9px 0 22px;
+  color: rgba(232, 223, 202, 0.5);
+  font-size: 11px;
+  line-height: 1.45;
+}
+.bench-controls form {
+  display: grid;
+  gap: 15px;
+}
+.bench-field {
+  min-width: 0;
+  display: grid;
+  gap: 6px;
+}
+.bench-field > span {
+  color: rgba(232, 223, 202, 0.78);
+  font: 700 8px/1 var(--mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.bench-field select,
+.bench-field input {
+  width: 100%;
+  min-width: 0;
+  height: 39px;
+  padding: 0 10px;
+  color: var(--paper);
+  border: 1px solid rgba(232, 223, 202, 0.22);
+  border-radius: 0;
+  outline: 0;
+  background: var(--ink-raised);
+  font: 10px/1 var(--mono);
+}
+.bench-field input::placeholder {
+  color: rgba(232, 223, 202, 0.25);
+}
+.bench-field select:disabled,
+.bench-field input:disabled {
+  opacity: 0.5;
+}
+.bench-field small {
+  color: rgba(232, 223, 202, 0.35);
+  font: 8px/1.2 var(--mono);
+}
+.bench-field-pair {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+.bench-experimental {
+  padding: 11px;
+  border: 1px dashed rgba(201, 111, 67, 0.48);
+  background: rgba(201, 111, 67, 0.05);
+}
+.bench-experimental summary {
+  color: #e19a76;
+  font: 700 8px/1 var(--mono);
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+.bench-experimental > p {
+  margin: 10px 0;
+  color: rgba(232, 223, 202, 0.46);
+  font-size: 9px;
+  line-height: 1.4;
+}
+.bench-locks {
+  display: grid;
+  gap: 5px;
+  margin: 10px 0 0;
+  color: rgba(232, 223, 202, 0.44);
+  font: 7px/1.35 var(--mono);
+}
+.bench-locks div {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+.bench-locks dt,
+.bench-locks dd {
+  margin: 0;
+}
+.bench-locks dt {
+  color: rgba(232, 223, 202, 0.72);
+}
+.bench-gate {
+  display: grid;
+  gap: 5px;
+  padding: 10px;
+  border-left: 2px solid var(--rust);
+  background: rgba(201, 111, 67, 0.08);
+}
+.bench-gate.pass {
+  border-color: var(--phosphor);
+  background: var(--phosphor-dim);
+}
+.bench-gate strong {
+  color: #ff9a68;
+  font: 700 8px/1 var(--mono);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.bench-gate.pass strong {
+  color: var(--phosphor);
+}
+.bench-gate span {
+  color: rgba(232, 223, 202, 0.5);
+  font: 8px/1.4 var(--mono);
+  overflow-wrap: anywhere;
+}
+.bench-run-actions {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 8px;
+}
+.bench-run-button,
+.bench-stop-button,
+.bench-section-heading button {
+  min-height: 38px;
+  padding: 0 13px;
+  border: 1px solid var(--ink);
+  border-radius: 0;
+  background: var(--phosphor);
+  font: 800 8px/1 var(--mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+.bench-run-button:disabled {
+  opacity: 0.35;
+}
+.bench-stop-button {
+  color: #ffb08a;
+  border-color: var(--rust);
+  background: transparent;
+}
+.bench-workbench {
+  min-width: 0;
+  padding: clamp(26px, 4vw, 58px);
+  background:
+    linear-gradient(90deg, rgba(17, 21, 18, 0.045) 1px, transparent 1px) 0 0 / 22px 22px,
+    linear-gradient(rgba(17, 21, 18, 0.04) 1px, transparent 1px) 0 0 / 22px 22px,
+    var(--paper);
+}
+.bench-hero {
+  display: grid;
+  grid-template-columns: minmax(320px, 1.3fr) minmax(260px, 0.7fr);
+  align-items: end;
+  gap: 34px;
+  padding-bottom: 29px;
+  border-bottom: 1px solid var(--line-dark);
+}
+.bench-hero h2 {
+  max-width: 690px;
+  margin: 0;
+  font: 400 clamp(42px, 6vw, 82px)/0.84 var(--display);
+  letter-spacing: -0.065em;
+}
+.bench-hero h2 em {
+  color: #4f7125;
+  font-weight: 400;
+}
+.bench-hero > p {
+  max-width: 430px;
+  margin: 0;
+  color: rgba(17, 21, 18, 0.58);
+  font-size: 11px;
+  line-height: 1.55;
+}
+.bench-progress {
+  display: grid;
+  gap: 8px;
+  padding: 16px 0;
+}
+.bench-progress > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  font: 8px/1 var(--mono);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+.bench-progress > div span {
+  color: rgba(17, 21, 18, 0.45);
+}
+.bench-progress-track {
+  height: 3px;
+  background: rgba(17, 21, 18, 0.13);
+}
+.bench-progress-track i {
+  display: block;
+  height: 100%;
+  background: #527426;
+  transition: width 180ms ease;
+}
+.bench-error {
+  display: grid;
+  gap: 5px;
+  margin-bottom: 18px;
+  padding: 12px 14px;
+  color: var(--paper);
+  border-left: 3px solid var(--rust);
+  background: var(--ink);
+}
+.bench-error strong {
+  color: #ff9a68;
+  font: 700 8px/1 var(--mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.bench-error span {
+  font: 9px/1.4 var(--mono);
+  overflow-wrap: anywhere;
+}
+.bench-core-section {
+  margin-top: 13px;
+}
+.bench-section-heading {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 13px;
+}
+.bench-section-heading h3,
+.bench-output h3 {
+  margin: 0;
+  font: 500 24px/1 var(--display);
+}
+.bench-section-heading button {
+  min-height: 31px;
+  color: var(--paper);
+  border-color: var(--ink);
+  background: var(--ink);
+}
+.bench-core-sample {
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  border: 1px solid var(--ink);
+  background: var(--paper-deep);
+}
+.bench-core-sample::before {
+  position: absolute;
+  inset: -130% -5%;
+  content: "";
+  pointer-events: none;
+  opacity: 0.35;
+  background: repeating-radial-gradient(ellipse at center, transparent 0 34px, rgba(17, 21, 18, 0.17) 35px 36px);
+}
+.bench-core-sample article {
+  position: relative;
+  min-height: 128px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 17px;
+  border-right: 1px solid rgba(17, 21, 18, 0.26);
+  background: rgba(232, 223, 202, 0.57);
+}
+.bench-core-sample article:nth-child(even) {
+  background: rgba(216, 205, 180, 0.6);
+}
+.bench-core-sample article:last-child {
+  color: var(--paper);
+  border-right: 0;
+  background: rgba(17, 21, 18, 0.91);
+}
+.bench-core-sample article > span {
+  font: 800 8px/1 var(--mono);
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+.bench-core-sample article strong {
+  margin-block: auto;
+  font: 400 clamp(28px, 3vw, 43px)/1 var(--display);
+  letter-spacing: -0.04em;
+}
+.bench-core-sample article small {
+  color: rgba(17, 21, 18, 0.5);
+  font: 7px/1.2 var(--mono);
+  text-transform: uppercase;
+}
+.bench-core-sample article:last-child small {
+  color: rgba(232, 223, 202, 0.48);
+}
+.bench-detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 12px;
+}
+.bench-data-card {
+  padding: 16px;
+  border: 1px solid var(--line-dark);
+  background: rgba(232, 223, 202, 0.68);
+}
+.bench-runtime-card {
+  grid-column: span 2;
+}
+.bench-data-card dl {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px 26px;
+  margin: 0;
+}
+.bench-runtime-card dl {
+  grid-template-columns: minmax(180px, 1.5fr) repeat(3, minmax(100px, 0.7fr));
+}
+.bench-data-card dl div {
+  min-width: 0;
+  display: grid;
+  gap: 4px;
+  border-top: 1px solid rgba(17, 21, 18, 0.13);
+  padding-top: 8px;
+}
+.bench-data-card dt {
+  color: rgba(17, 21, 18, 0.45);
+  font: 7px/1 var(--mono);
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+.bench-data-card dd {
+  min-width: 0;
+  overflow: hidden;
+  margin: 0;
+  font: 500 16px/1.2 var(--body);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bench-output {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 34px;
+  margin-top: 12px;
+  padding: 21px;
+  border: 1px dashed rgba(17, 21, 18, 0.3);
+}
+.bench-output > div:last-child {
+  border-left: 1px solid var(--line-dark);
+  padding-left: 34px;
+}
+.bench-output p:not(.eyebrow) {
+  margin: 8px 0 0;
+  color: rgba(17, 21, 18, 0.6);
+  font-size: 11px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+@media (max-width: 1050px) {
+  .bench-masthead {
+    grid-template-columns: minmax(310px, 1fr) auto;
+  }
+  .bench-masthead-note {
+    display: none;
+  }
+  .bench-layout {
+    grid-template-columns: 285px minmax(0, 1fr);
+  }
+  .bench-core-sample {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .bench-core-sample article:nth-child(2) {
+    border-right: 0;
+  }
+  .bench-core-sample article:nth-child(-n + 2) {
+    border-bottom: 1px solid rgba(17, 21, 18, 0.26);
+  }
+  .bench-runtime-card dl {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 760px) {
+  .bench-masthead {
+    display: flex;
+    align-items: center;
+  }
+  .bench-masthead .brand-block {
+    flex: 1;
+    min-width: 0;
+  }
+  .bench-return {
+    padding: 0 15px;
+    font-size: 0;
+  }
+  .bench-return span {
+    font-size: 17px;
+  }
+  .bench-layout {
+    display: block;
+  }
+  .bench-controls {
+    border-right: 0;
+    border-bottom: 1px solid var(--phosphor);
+  }
+  .bench-workbench {
+    padding: 28px 16px;
+  }
+  .bench-hero,
+  .bench-output {
+    grid-template-columns: 1fr;
+    gap: 18px;
+  }
+  .bench-hero h2 {
+    font-size: clamp(42px, 14vw, 68px);
+  }
+  .bench-detail-grid {
+    display: block;
+  }
+  .bench-data-card + .bench-data-card {
+    margin-top: 10px;
+  }
+  .bench-output > div:last-child {
+    border-top: 1px solid var(--line-dark);
+    border-left: 0;
+    padding-top: 18px;
+    padding-left: 0;
+  }
+}
+@media (max-width: 480px) {
+  .bench-masthead .brand-mark {
+    display: none;
+  }
+  .bench-core-sample,
+  .bench-data-card dl,
+  .bench-runtime-card dl {
+    grid-template-columns: 1fr;
+  }
+  .bench-core-sample article {
+    min-height: 105px;
+    border-right: 0;
+    border-bottom: 1px solid rgba(17, 21, 18, 0.26);
+  }
+  .bench-core-sample article:last-child {
+    border-bottom: 0;
+  }
+}

src/bench/BenchApp.tsx ADDED Viewed

	@@ -0,0 +1,589 @@

+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  BrowserEngineClient,
+  EngineClientError,
+  evaluateModelGate,
+  loadModelManifestV2,
+  type EngineCapabilities,
+  type ModelManifestV2,
+  type ModelTierId,
+  type RequestedBackend,
+} from '../engine';
+import { formatBytes } from '../lib/format';
+import {
+  BENCHMARK_PROMPT,
+  BENCHMARK_PROMPT_ID,
+  benchmarkReportFilename,
+  buildBenchmarkReport,
+  serializeBenchmarkReport,
+  type BenchmarkReport,
+} from './report';
+const MANIFEST_PATH = 'manifest/models.json';
+const DEFAULT_MODEL: ModelTierId = '1_7b';
+interface RunProgress {
+  label: string;
+  loadedBytes: number;
+  totalBytes: number;
+}
+let sharedBenchClient: BrowserEngineClient | null = null;
+function getBenchClient(): BrowserEngineClient {
+  sharedBenchClient ??= new BrowserEngineClient();
+  return sharedBenchClient;
+}
+function manifestUrl(): string {
+  return new URL(`${import.meta.env.BASE_URL}${MANIFEST_PATH}`, document.baseURI).href;
+}
+function errorMessage(error: unknown): string {
+  if (error instanceof EngineClientError) return `${error.code}: ${error.message}`;
+  return error instanceof Error ? error.message : String(error);
+}
+function isAbort(error: unknown, signal: AbortSignal): boolean {
+  return signal.aborted
+    || (error instanceof DOMException && error.name === 'AbortError')
+    || (error instanceof EngineClientError && ['ABORTED', 'SHARD_DOWNLOAD_ABORTED'].includes(error.code));
+}
+function throwIfAborted(signal: AbortSignal): void {
+  if (signal.aborted) throw new DOMException('Benchmark stopped by operator.', 'AbortError');
+}
+function parseOptionalInteger(value: string): number | null {
+  if (value.trim() === '') return null;
+  const parsed = Number(value);
+  return Number.isSafeInteger(parsed) && parsed > 0 ? parsed : null;
+}
+function formatDuration(value: number | null | undefined): string {
+  if (value === null || value === undefined) return '—';
+  return value >= 1_000 ? `${(value / 1_000).toFixed(2)} s` : `${value.toFixed(1)} ms`;
+}
+function formatRate(value: number | null | undefined): string {
+  return value === null || value === undefined ? '—' : `${value.toFixed(2)} t/s`;
+}
+function downloadReport(report: BenchmarkReport): void {
+  const blob = new Blob([serializeBenchmarkReport(report)], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = benchmarkReportFilename(report);
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  window.setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+export function BenchApp() {
+  const [client] = useState(getBenchClient);
+  const [manifest, setManifest] = useState<ModelManifestV2 | null>(null);
+  const [capabilities, setCapabilities] = useState<EngineCapabilities | null>(null);
+  const [modelId, setModelId] = useState<ModelTierId>(DEFAULT_MODEL);
+  const [backend, setBackend] = useState<RequestedBackend>('auto');
+  const [contextSize, setContextSize] = useState(4_096);
+  const [maxTokens, setMaxTokens] = useState(64);
+  const [nBatchInput, setNBatchInput] = useState('');
+  const [nUbatchInput, setNUbatchInput] = useState('');
+  const [running, setRunning] = useState(false);
+  const [progress, setProgress] = useState<RunProgress>({
+    label: 'Waiting for an operator-initiated run',
+    loadedBytes: 0,
+    totalBytes: 0,
+  });
+  const [report, setReport] = useState<BenchmarkReport | null>(null);
+  const [output, setOutput] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const operationRef = useRef<AbortController | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    const controller = new AbortController();
+    setProgress((current) => ({ ...current, label: 'Inspecting manifest and browser runtime' }));
+    void Promise.all([
+      loadModelManifestV2(manifestUrl(), controller.signal),
+      client.capabilities(),
+    ]).then(([loadedManifest, loadedCapabilities]) => {
+      if (cancelled) return;
+      const initial = loadedManifest.models.find((model) => model.id === DEFAULT_MODEL)
+        ?? loadedManifest.models[0];
+      if (!initial) throw new Error('The benchmark manifest contains no model tiers.');
+      setManifest(loadedManifest);
+      setCapabilities(loadedCapabilities);
+      setModelId(initial.id);
+      setContextSize(initial.defaultContext);
+      setProgress({
+        label: 'Ready · no model is loaded until Run benchmark is pressed',
+        loadedBytes: 0,
+        totalBytes: 0,
+      });
+    }).catch((bootstrapError) => {
+      if (cancelled || controller.signal.aborted) return;
+      setError(errorMessage(bootstrapError));
+      setProgress((current) => ({ ...current, label: 'Runtime inspection failed' }));
+    });
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [client]);
+  const model = useMemo(
+    () => manifest?.models.find((candidate) => candidate.id === modelId) ?? null,
+    [manifest, modelId],
+  );
+  const deviceGate = useMemo(() => {
+    if (!model || !capabilities) return null;
+    return evaluateModelGate(model, backend, capabilities.webgpu, {
+      usageBytes: null,
+      quotaBytes: null,
+      persisted: capabilities.storage.persisted,
+    });
+  }, [backend, capabilities, model]);
+  const storageGate = useMemo(() => {
+    if (!model || !capabilities) return null;
+    return evaluateModelGate(model, backend, capabilities.webgpu, capabilities.storage);
+  }, [backend, capabilities, model]);
+  const contextLimit = model?.id === '27b'
+    ? model.defaultContext
+    : model?.contextLength ?? 4_096;
+  const nBatch = parseOptionalInteger(nBatchInput);
+  const nUbatch = parseOptionalInteger(nUbatchInput);
+  const tuningValid = (nBatchInput.trim() === '' || nBatch !== null)
+    && (nUbatchInput.trim() === '' || nUbatch !== null);
+  const configurationValid = Number.isSafeInteger(contextSize)
+    && contextSize > 0
+    && contextSize <= contextLimit
+    && Number.isSafeInteger(maxTokens)
+    && maxTokens >= 8
+    && maxTokens <= 512
+    && tuningValid;
+  const canRun = Boolean(manifest && capabilities && model && deviceGate?.allowed && configurationValid);
+  const handleModelChange = (nextId: ModelTierId) => {
+    if (running || !manifest) return;
+    const next = manifest.models.find((candidate) => candidate.id === nextId);
+    if (!next) return;
+    setModelId(nextId);
+    setContextSize(next.defaultContext);
+    if (!next.cpuFallback && backend === 'wasm') setBackend('auto');
+    setReport(null);
+    setOutput('');
+    setError(null);
+  };
+  const runBenchmark = () => {
+    if (!canRun || !manifest || !capabilities || !model || operationRef.current) return;
+    const controller = new AbortController();
+    operationRef.current = controller;
+    setRunning(true);
+    setReport(null);
+    setOutput('');
+    setError(null);
+    const startedAt = new Date().toISOString();
+    const run = async () => {
+      let storagePersistent = capabilities.storage.persisted;
+      setProgress({ label: 'Requesting persistent browser storage', loadedBytes: 0, totalBytes: 0 });
+      try {
+        const storage = await client.storagePersist();
+        storagePersistent = storage.persisted;
+        setCapabilities((current) => current ? { ...current, storage } : current);
+      } catch {
+        // Persistence is a browser policy choice. The runtime storage gate remains authoritative.
+      }
+      throwIfAborted(controller.signal);
+      await client.unload();
+      throwIfAborted(controller.signal);
+      let coldCachedBytes: number | null = null;
+      const loadParams = {
+        manifest,
+        modelId: model.id,
+        backend,
+        contextSize,
+        ...(nBatch === null ? {} : { nBatch }),
+        ...(nUbatch === null ? {} : { nUbatch }),
+        flashAttention: false as const,
+      };
+      const coldStarted = performance.now();
+      const coldLoad = await client.loadModel(loadParams, {
+        signal: controller.signal,
+        onProgress: (event) => {
+          if (event.phase === 'download' && coldCachedBytes === null) {
+            coldCachedBytes = event.loadedBytes;
+          }
+          const shard = event.shardIndex === null ? '' : ` · shard ${event.shardIndex + 1}/${event.shardCount}`;
+          setProgress({
+            label: `Cold load · ${event.phase}${shard}`,
+            loadedBytes: event.loadedBytes,
+            totalBytes: event.totalBytes,
+          });
+        },
+      });
+      const coldLoadMs = performance.now() - coldStarted;
+      throwIfAborted(controller.signal);
+      setProgress({ label: 'Unloading model before verified-cache reload', loadedBytes: 0, totalBytes: 0 });
+      await client.unload();
+      throwIfAborted(controller.signal);
+      const warmStarted = performance.now();
+      const warmLoad = await client.loadModel(loadParams, {
+        signal: controller.signal,
+        onProgress: (event) => {
+          const shard = event.shardIndex === null ? '' : ` · shard ${event.shardIndex + 1}/${event.shardCount}`;
+          setProgress({
+            label: `Warm load · ${event.phase}${shard}`,
+            loadedBytes: event.loadedBytes,
+            totalBytes: event.totalBytes,
+          });
+        },
+      });
+      const warmLoadMs = performance.now() - warmStarted;
+      if (coldLoad.backend !== warmLoad.backend) {
+        throw new Error(`Backend changed between cold and warm loads (${coldLoad.backend} → ${warmLoad.backend}).`);
+      }
+      throwIfAborted(controller.signal);
+      let firstTokenAt: number | null = null;
+      let streamedTokenEvents = 0;
+      const generationStarted = performance.now();
+      setProgress({ label: `Generating fixed prompt · ${BENCHMARK_PROMPT_ID}`, loadedBytes: 0, totalBytes: maxTokens });
+      const generationResult = await client.generate({
+        messages: [{ role: 'user', content: BENCHMARK_PROMPT }],
+        maxTokens,
+        temperature: 0,
+        topK: 1,
+        topP: 1,
+        seed: 42,
+        toolChoice: 'none',
+        cachePrompt: false,
+      }, {
+        signal: controller.signal,
+        onToken: (text, reasoningDelta) => {
+          if (!text && !reasoningDelta) return;
+          if (firstTokenAt === null) firstTokenAt = performance.now();
+          streamedTokenEvents += 1;
+          setProgress({
+            label: `Generating fixed prompt · ${streamedTokenEvents} stream event${streamedTokenEvents === 1 ? '' : 's'}`,
+            loadedBytes: streamedTokenEvents,
+            totalBytes: maxTokens,
+          });
+        },
+      });
+      const generationCompleted = performance.now();
+      throwIfAborted(controller.signal);
+      const backendReport = await client.backendReport();
+      throwIfAborted(controller.signal);
+      const nextReport = buildBenchmarkReport({
+        startedAt,
+        completedAt: new Date().toISOString(),
+        manifest,
+        model,
+        capabilities,
+        requestedBackend: backend,
+        contextSize: warmLoad.context.size,
+        maxTokens,
+        nBatch,
+        nUbatch,
+        coldLoadMs,
+        warmLoadMs,
+        coldCachedBytes,
+        storagePersistent,
+        loadResult: warmLoad,
+        generationResult,
+        generationElapsedMs: generationCompleted - generationStarted,
+        timeToFirstTokenMs: firstTokenAt === null ? null : firstTokenAt - generationStarted,
+        streamedTokenEvents,
+        backendReport,
+      });
+      setReport(nextReport);
+      setOutput(generationResult.text);
+      setProgress({
+        label: 'Benchmark complete · JSON report is ready',
+        loadedBytes: 1,
+        totalBytes: 1,
+      });
+    };
+    void run().catch((runError) => {
+      if (isAbort(runError, controller.signal)) {
+        setProgress({ label: 'Benchmark stopped by operator', loadedBytes: 0, totalBytes: 0 });
+        return;
+      }
+      setError(errorMessage(runError));
+      setProgress({ label: 'Benchmark failed safely · no report exported', loadedBytes: 0, totalBytes: 0 });
+    }).finally(() => {
+      if (operationRef.current === controller) operationRef.current = null;
+      setRunning(false);
+    });
+  };
+  const progressPercent = progress.totalBytes > 0
+    ? Math.min(100, Math.max(0, progress.loadedBytes / progress.totalBytes * 100))
+    : 0;
+  const fullGateStorageOnly = storageGate && !storageGate.allowed && deviceGate?.allowed;
+  return (
+    <div className="bench-page station-frame">
+      <header className="bench-masthead">
+        <div className="brand-block" aria-label="Bonsai benchmark field station">
+          <span className="brand-mark" aria-hidden="true"><span /></span>
+          <div>
+            <p className="eyebrow">Repeatable local inference assay</p>
+            <h1>Bonsai <i>growth bench</i></h1>
+          </div>
+        </div>
+        <div className="bench-masthead-note">
+          <strong>Nothing runs on arrival</strong>
+          <span>One click performs two loads, one fixed prompt, and no network call beyond model assets.</span>
+        </div>
+        <a className="bench-return" href={import.meta.env.BASE_URL}>Open chat station <span aria-hidden="true">↗</span></a>
+      </header>
+      <div className="bench-layout">
+        <aside className="bench-controls">
+          <p className="eyebrow">Assay controls</p>
+          <h2>Shape one run</h2>
+          <p className="bench-control-intro">The fixed prompt and temperature stay locked so exported runs remain comparable.</p>
+          <form onSubmit={(event) => { event.preventDefault(); runBenchmark(); }}>
+            <label className="bench-field">
+              <span>Model tier</span>
+              <select
+                value={modelId}
+                disabled={running || !manifest}
+                onChange={(event) => handleModelChange(event.target.value as ModelTierId)}
+              >
+                {(manifest?.models ?? []).map((candidate) => (
+                  <option key={candidate.id} value={candidate.id}>{candidate.displayName}</option>
+                ))}
+              </select>
+              <small>{model ? `${formatBytes(model.downloadBytes)} verified weights` : 'Loading manifest…'}</small>
+            </label>
+            <label className="bench-field">
+              <span>Backend</span>
+              <select
+                value={backend}
+                disabled={running}
+                onChange={(event) => {
+                  setBackend(event.target.value as RequestedBackend);
+                  setReport(null);
+                  setOutput('');
+                }}
+              >
+                <option value="auto">Auto · gated</option>
+                <option value="webgpu">WebGPU · explicit</option>
+                <option value="wasm" disabled={model?.cpuFallback === false}>CPU-WASM</option>
+              </select>
+              <small>{deviceGate?.selectedBackend ? `Preflight selects ${deviceGate.selectedBackend}` : 'No backend selected'}</small>
+            </label>
+            <div className="bench-field-pair">
+              <label className="bench-field">
+                <span>Context</span>
+                <input
+                  type="number"
+                  min="256"
+                  max={contextLimit}
+                  step="256"
+                  value={contextSize}
+                  disabled={running}
+                  onChange={(event) => {
+                    setContextSize(Number(event.target.value));
+                    setReport(null);
+                  }}
+                />
+                <small>Max {contextLimit.toLocaleString()}</small>
+              </label>
+              <label className="bench-field">
+                <span>Max tokens</span>
+                <input
+                  type="number"
+                  min="8"
+                  max="512"
+                  step="8"
+                  value={maxTokens}
+                  disabled={running}
+                  onChange={(event) => {
+                    setMaxTokens(Number(event.target.value));
+                    setReport(null);
+                  }}
+                />
+                <small>8–512</small>
+              </label>
+            </div>
+            <details className="bench-experimental">
+              <summary>Experimental batch shape</summary>
+              <p>Blank uses the pinned runtime defaults. Values are exported as experiments, not release recommendations.</p>
+              <div className="bench-field-pair">
+                <label className="bench-field">
+                  <span>nBatch</span>
+                  <input
+                    type="number"
+                    min="1"
+                    step="1"
+                    placeholder="runtime default"
+                    value={nBatchInput}
+                    disabled={running}
+                    onChange={(event) => {
+                      setNBatchInput(event.target.value);
+                      setReport(null);
+                    }}
+                  />
+                </label>
+                <label className="bench-field">
+                  <span>nUbatch</span>
+                  <input
+                    type="number"
+                    min="1"
+                    step="1"
+                    placeholder="runtime default"
+                    value={nUbatchInput}
+                    disabled={running}
+                    onChange={(event) => {
+                      setNUbatchInput(event.target.value);
+                      setReport(null);
+                    }}
+                  />
+                </label>
+              </div>
+              <dl className="bench-locks">
+                <div><dt>flashAttention</dt><dd>false · locked, unvalidated</dd></div>
+                <div><dt>KV cache K / V</dt><dd>f16 / f16 · locked release default</dd></div>
+              </dl>
+            </details>
+            <div className={`bench-gate ${deviceGate?.allowed ? 'pass' : 'fail'}`}>
+              <strong>{deviceGate?.allowed ? 'Device preflight passed' : 'Device preflight blocked'}</strong>
+              <span>
+                {deviceGate?.reasons[0]
+                  ?? (fullGateStorageOnly
+                    ? 'Storage cannot be proven before cache inspection; the worker repeats the authoritative gate.'
+                    : deviceGate?.warnings[0] ?? 'Waiting for capability inspection.')}
+              </span>
+            </div>
+            <div className="bench-run-actions">
+              <button className="bench-run-button" type="submit" disabled={!canRun || running}>
+                {running ? 'Run in progress' : 'Run benchmark'}
+              </button>
+              {running && (
+                <button
+                  className="bench-stop-button"
+                  type="button"
+                  onClick={() => {
+                    setProgress((current) => ({ ...current, label: 'Stopping benchmark…' }));
+                    operationRef.current?.abort();
+                  }}
+                >
+                  Stop
+                </button>
+              )}
+            </div>
+          </form>
+        </aside>
+        <main className="bench-workbench">
+          <section className="bench-hero">
+            <div>
+              <p className="eyebrow ink">Phase 5 · operator evidence</p>
+              <h2>Measure the whole <em>growth cycle.</em></h2>
+            </div>
+            <p>Cold load includes cache inspection and any missing download. Warm load repeats initialization after unload with verified shards retained. Generation uses one public, fixed prompt.</p>
+          </section>
+          <section className="bench-progress" aria-live="polite">
+            <div><strong>{progress.label}</strong><span>{progress.totalBytes > 1 ? `${Math.round(progressPercent)}%` : ''}</span></div>
+            <span className="bench-progress-track"><i style={{ width: `${progressPercent}%` }} /></span>
+          </section>
+          {error && <div className="bench-error" role="alert"><strong>Run rejected</strong><span>{error}</span></div>}
+          <section className="bench-core-section" aria-label="Benchmark measurements">
+            <div className="bench-section-heading">
+              <div><p className="eyebrow ink">Core sample</p><h3>Four boundaries, one run</h3></div>
+              {report && <button type="button" onClick={() => downloadReport(report)}>Export JSON</button>}
+            </div>
+            <div className="bench-core-sample">
+              <article>
+                <span>Cold load</span>
+                <strong>{formatDuration(report?.load.cold.durationMs)}</strong>
+                <small>{report ? `${report.load.cold.cacheState} at start` : 'first boundary'}</small>
+              </article>
+              <article>
+                <span>Warm load</span>
+                <strong>{formatDuration(report?.load.warm.durationMs)}</strong>
+                <small>verified cache retained</small>
+              </article>
+              <article>
+                <span>TTFT</span>
+                <strong>{formatDuration(report?.generation.timeToFirstTokenMs)}</strong>
+                <small>request to first stream</small>
+              </article>
+              <article>
+                <span>Decode</span>
+                <strong>{formatRate(report?.generation.decodeTokensPerSecond)}</strong>
+                <small>{report ? `${report.generation.completionTokens} completion tokens` : 'engine timing'}</small>
+              </article>
+            </div>
+          </section>
+          <section className="bench-detail-grid">
+            <article className="bench-data-card">
+              <p className="eyebrow ink">Throughput</p>
+              <dl>
+                <div><dt>Prompt</dt><dd>{formatRate(report?.generation.promptTokensPerSecond)}</dd></div>
+                <div><dt>Decode</dt><dd>{formatRate(report?.generation.decodeTokensPerSecond)}</dd></div>
+                <div><dt>Token count</dt><dd>{report?.generation.completionTokens ?? '—'}</dd></div>
+                <div><dt>Finish</dt><dd>{report?.generation.finishReason ?? '—'}</dd></div>
+              </dl>
+            </article>
+            <article className="bench-data-card">
+              <p className="eyebrow ink">Graph tripwire</p>
+              <dl>
+                <div><dt>Graph splits</dt><dd>{report?.execution.graphSplits ?? '—'}</dd></div>
+                <div><dt>CPU ops</dt><dd>{report?.execution.opsOnCpu ?? '—'}</dd></div>
+                <div><dt>GPU layers</dt><dd>{report?.execution.gpuLayers ? `${report.execution.gpuLayers.offloaded}/${report.execution.gpuLayers.total}` : '—'}</dd></div>
+                <div><dt>Backend</dt><dd>{report?.execution.selectedBackend.toUpperCase() ?? '—'}</dd></div>
+              </dl>
+            </article>
+            <article className="bench-data-card bench-runtime-card">
+              <p className="eyebrow ink">Runtime pins</p>
+              <dl>
+                <div><dt>Device</dt><dd>{report?.execution.device ?? capabilities?.webgpu.name ?? 'Inspecting…'}</dd></div>
+                <div><dt>wllama</dt><dd title={report?.runtime.wllamaRevision}>{report?.runtime.wllamaRevision.slice(0, 12) ?? '—'}</dd></div>
+                <div><dt>llama.cpp</dt><dd title={report?.runtime.llamaCppRevision}>{report?.runtime.llamaCppRevision.slice(0, 12) ?? '—'}</dd></div>
+                <div><dt>Weights</dt><dd title={report?.runtime.manifestRevision ?? undefined}>{report?.runtime.manifestRevision?.slice(0, 12) ?? '—'}</dd></div>
+              </dl>
+            </article>
+          </section>
+          <section className="bench-output">
+            <div>
+              <p className="eyebrow ink">Fixed specimen</p>
+              <h3>{BENCHMARK_PROMPT_ID}</h3>
+              <p>{BENCHMARK_PROMPT}</p>
+            </div>
+            <div>
+              <p className="eyebrow ink">Generated text · excluded from export</p>
+              <p>{output || 'Run the assay to inspect the generated specimen.'}</p>
+            </div>
+          </section>
+        </main>
+      </div>
+    </div>
+  );
+}

src/bench/report.test.ts ADDED Viewed

	@@ -0,0 +1,259 @@

+import { describe, expect, it } from 'vitest';
+import type {
+  EngineCapabilities,
+  LoadModelResult,
+  ManifestModelV2,
+  ModelManifestV2,
+} from '../engine';
+import {
+  benchmarkReportFilename,
+  buildBenchmarkReport,
+  classifyCacheState,
+  serializeBenchmarkReport,
+  type BenchmarkObservation,
+} from './report';
+const model = {
+  id: '8b',
+  displayName: 'Bonsai 8B',
+  architecture: 'qwen3next',
+  downloadBytes: 1_000,
+} as ManifestModelV2;
+const manifest = {
+  repository: {
+    id: 'WaveCut/Bonsai-web-GGUF',
+    revision: '112ea7a1a6229bde132b176b9a72477a7ecfde64',
+  },
+  dflash: { status: 'conditional' },
+} as ModelManifestV2;
+const capabilities = {
+  crossOriginIsolated: true,
+  sharedArrayBuffer: true,
+  hardwareConcurrency: 12,
+  storage: { usageBytes: 1_000, quotaBytes: 10_000, persisted: true },
+  webgpu: {
+    available: true,
+    name: 'Apple M4 Max',
+    vendor: 'Apple',
+    architecture: 'metal-3',
+    device: null,
+    description: 'Apple M4 Max',
+    limits: { maxStorageBufferBindingSize: 1_073_741_824 },
+    features: ['shader-f16'],
+  },
+  browser: {
+    userAgent: 'Mozilla/5.0 Chrome/150.0.0.0 Safari/537.36',
+    platform: 'MacIntel',
+    language: 'en-GB',
+  },
+  runtime: {
+    implementation: 'bonsai-wllama',
+    wllamaRevision: '912c18b75d4358c1405a64646b8dbe43a205943b',
+    llamaCppRevision: '00fa7cb284cbf133fc426733bd64238a3588a33e',
+    patchSetSha256: 'f'.repeat(64),
+    moduleSha256: 'e'.repeat(64),
+    wasmFlavor: 'jspi',
+    wasmSha256: 'd'.repeat(64),
+    compatWorkerSha256: null,
+    tokenEmbeddingOnWebGPU: true,
+    tensorPlacementOverrides: false,
+  },
+} satisfies EngineCapabilities;
+const loadResult = {
+  backend: 'webgpu',
+  context: { batchSize: 2_048, microBatchSize: 512 },
+  tuning: { flashAttention: false, cacheTypeK: 'f16', cacheTypeV: 'f16' },
+} as LoadModelResult;
+function observation(overrides: Partial<BenchmarkObservation> = {}): BenchmarkObservation {
+  return {
+    startedAt: '2026-07-15T10:00:00.000Z',
+    completedAt: '2026-07-15T10:00:10.123Z',
+    manifest,
+    model,
+    capabilities,
+    requestedBackend: 'auto',
+    contextSize: 4_096,
+    maxTokens: 64,
+    nBatch: null,
+    nUbatch: null,
+    coldLoadMs: 1_234.56,
+    warmLoadMs: 234.54,
+    coldCachedBytes: 250,
+    storagePersistent: true,
+    loadResult,
+    generationResult: {
+      text: 'fixture',
+      finishReason: 'stop',
+      toolCalls: [],
+      usage: { promptTokens: 20, completionTokens: 8, totalTokens: 28 },
+      timings: { promptTokensPerSecond: 123.456, predictedTokensPerSecond: 45.678 },
+    },
+    generationElapsedMs: 900.04,
+    timeToFirstTokenMs: 123.45,
+    streamedTokenEvents: 5,
+    backendReport: {
+      backends: ['WebGPU'],
+      nGraphSplits: 1,
+      opsOnCpu: 0,
+      layersGpu: { offloaded: 49, total: 49 },
+    },
+    ...overrides,
+  };
+}
+describe('benchmark report', () => {
+  it('classifies the shard cache observed at the first load boundary', () => {
+    expect(classifyCacheState(null, 1_000)).toBe('unknown');
+    expect(classifyCacheState(0, 1_000)).toBe('empty');
+    expect(classifyCacheState(1, 1_000)).toBe('partial');
+    expect(classifyCacheState(1_000, 1_000)).toBe('cached');
+  });
+  it('builds a shareable report with pinned runtime evidence and fixed-safe policy', () => {
+    const report = buildBenchmarkReport(observation());
+    expect(report.load).toMatchObject({
+      tuning: {
+        requestedNBatch: null,
+        requestedNUbatch: null,
+        nBatch: 2_048,
+        nUbatch: 512,
+        flashAttention: false,
+        cacheTypeK: 'f16',
+        cacheTypeV: 'f16',
+        status: 'release-defaults',
+      },
+      cold: { durationMs: 1_234.6, cacheState: 'partial' },
+      warm: { durationMs: 234.5 },
+    });
+    expect(report.generation).toMatchObject({
+      promptTokensPerSecond: 123.46,
+      decodeTokensPerSecond: 45.68,
+      engineCompletionTokens: 8,
+      streamedTokenEvents: 5,
+      completionTokens: 8,
+      tokenCountSource: 'engine-usage',
+    });
+    expect(report.execution).toMatchObject({
+      selectedBackend: 'webgpu',
+      device: 'Apple M4 Max',
+      graphSplits: 1,
+      opsOnCpu: 0,
+    });
+    expect(report.runtime.manifestRevision).toBe('112ea7a1a6229bde132b176b9a72477a7ecfde64');
+    expect(report.runtime).toMatchObject({
+      patchSetSha256: 'f'.repeat(64),
+      moduleSha256: 'e'.repeat(64),
+      wasmFlavor: 'jspi',
+      wasmSha256: 'd'.repeat(64),
+      compatWorkerSha256: null,
+    });
+    expect(report.environment).toEqual({
+      browser: {
+        userAgent: 'Mozilla/5.0 Chrome/150.0.0.0 Safari/537.36',
+        platform: 'MacIntel',
+        language: 'en-GB',
+      },
+      webgpu: {
+        available: true,
+        name: 'Apple M4 Max',
+        vendor: 'Apple',
+        architecture: 'metal-3',
+        device: null,
+        description: 'Apple M4 Max',
+        limits: { maxStorageBufferBindingSize: 1_073_741_824 },
+        features: ['shader-f16'],
+      },
+    });
+    expect(report.releasePolicy).toEqual({
+      flashAttention: {
+        enabled: false,
+        operatorConfigurable: false,
+        status: 'fixed-off-unvalidated-for-release',
+      },
+      kvCache: {
+        key: 'f16',
+        value: 'f16',
+        operatorConfigurable: false,
+        status: 'fixed-release-default-alternatives-unvalidated',
+      },
+      dflash: {
+        enabled: false,
+        runtimeAvailable: false,
+        status: 'conditional',
+      },
+    });
+  });
+  it('records experimental batch shape by the runtime field names without enabling flash attention', () => {
+    const report = buildBenchmarkReport(observation({ nBatch: 512, nUbatch: 128 }));
+    expect(report.load.tuning).toEqual({
+      requestedNBatch: 512,
+      requestedNUbatch: 128,
+      nBatch: 2_048,
+      nUbatch: 512,
+      flashAttention: false,
+      cacheTypeK: 'f16',
+      cacheTypeV: 'f16',
+      status: 'experimental-batch-shape',
+    });
+  });
+  it('uses streamed events when final engine usage is present but incomplete', () => {
+    const report = buildBenchmarkReport(observation({
+      streamedTokenEvents: 64,
+      generationResult: {
+        text: 'fixture',
+        finishReason: 'length',
+        toolCalls: [],
+        usage: { promptTokens: 5, completionTokens: 0, totalTokens: 5 },
+        timings: { promptTokensPerSecond: 20, predictedTokensPerSecond: 30 },
+      },
+    }));
+    expect(report.generation).toMatchObject({
+      engineCompletionTokens: 0,
+      streamedTokenEvents: 64,
+      completionTokens: 64,
+      engineTotalTokens: 5,
+      totalTokens: 69,
+      tokenCountSource: 'stream-events-fallback',
+    });
+  });
+  it('falls back to streamed events without emitting non-finite JSON metrics', () => {
+    const report = buildBenchmarkReport(observation({
+      generationElapsedMs: Number.NaN,
+      timeToFirstTokenMs: Number.POSITIVE_INFINITY,
+      generationResult: {
+        text: 'fixture',
+        finishReason: 'length',
+        toolCalls: [],
+        usage: null,
+        timings: null,
+      },
+    }));
+    expect(report.generation).toMatchObject({
+      elapsedMs: null,
+      timeToFirstTokenMs: null,
+      decodeTokensPerSecond: null,
+      completionTokens: 5,
+      tokenCountSource: 'stream-events-fallback',
+    });
+    expect(serializeBenchmarkReport(report)).not.toContain('NaN');
+    expect(serializeBenchmarkReport(report)).toMatch(/\n$/);
+  });
+  it('uses the model, selected backend, and UTC completion time in the export name', () => {
+    const report = buildBenchmarkReport(observation());
+    expect(benchmarkReportFilename(report)).toBe(
+      'bonsai-bench-8b-webgpu-2026-07-15T10-00-10-123Z.json',
+    );
+  });
+});

src/bench/report.ts ADDED Viewed

	@@ -0,0 +1,304 @@

+import type {
+  BackendReport,
+  EngineCapabilities,
+  GenerateResult,
+  LoadModelResult,
+  ManifestModelV2,
+  ModelManifestV2,
+  RequestedBackend,
+} from '../engine';
+export const BENCHMARK_PROMPT_ID = 'bonsai-field-core-v1';
+export const BENCHMARK_PROMPT = 'Describe how a tree survives one dry season in exactly eight short, factual sentences.';
+export type CacheState = 'empty' | 'partial' | 'cached' | 'unknown';
+export interface BenchmarkObservation {
+  startedAt: string;
+  completedAt: string;
+  manifest: ModelManifestV2;
+  model: ManifestModelV2;
+  capabilities: EngineCapabilities;
+  requestedBackend: RequestedBackend;
+  contextSize: number;
+  maxTokens: number;
+  nBatch: number | null;
+  nUbatch: number | null;
+  coldLoadMs: number;
+  warmLoadMs: number;
+  coldCachedBytes: number | null;
+  storagePersistent: boolean;
+  loadResult: LoadModelResult;
+  generationResult: GenerateResult;
+  generationElapsedMs: number;
+  timeToFirstTokenMs: number | null;
+  streamedTokenEvents: number;
+  backendReport: BackendReport;
+}
+export interface BenchmarkReport {
+  schemaVersion: 1;
+  kind: 'bonsai-browser-benchmark';
+  startedAt: string;
+  completedAt: string;
+  model: {
+    id: ManifestModelV2['id'];
+    displayName: string;
+    architecture: string;
+    downloadBytes: number;
+    contextSize: number;
+  };
+  load: {
+    tuning: {
+      requestedNBatch: number | null;
+      requestedNUbatch: number | null;
+      nBatch: number;
+      nUbatch: number;
+      flashAttention: boolean;
+      cacheTypeK: LoadModelResult['tuning']['cacheTypeK'];
+      cacheTypeV: LoadModelResult['tuning']['cacheTypeV'];
+      status: 'release-defaults' | 'experimental-batch-shape';
+    };
+    cold: {
+      durationMs: number | null;
+      cachedBytesAtStart: number | null;
+      cacheState: CacheState;
+      definition: string;
+    };
+    warm: {
+      durationMs: number | null;
+      definition: string;
+    };
+  };
+  generation: {
+    promptId: typeof BENCHMARK_PROMPT_ID;
+    prompt: typeof BENCHMARK_PROMPT;
+    maxTokens: number;
+    temperature: 0;
+    seed: 42;
+    elapsedMs: number | null;
+    timeToFirstTokenMs: number | null;
+    promptTokensPerSecond: number | null;
+    decodeTokensPerSecond: number | null;
+    promptTokens: number | null;
+    engineCompletionTokens: number | null;
+    streamedTokenEvents: number;
+    completionTokens: number;
+    engineTotalTokens: number | null;
+    totalTokens: number | null;
+    tokenCountSource: 'engine-usage' | 'stream-events-fallback';
+    finishReason: GenerateResult['finishReason'];
+  };
+  execution: {
+    requestedBackend: RequestedBackend;
+    selectedBackend: LoadModelResult['backend'];
+    device: string;
+    graphSplits: number | null;
+    opsOnCpu: number;
+    gpuLayers: BackendReport['layersGpu'];
+    confirmedBackends: string[];
+  };
+  runtime: {
+    implementation: EngineCapabilities['runtime']['implementation'];
+    wllamaRevision: string;
+    llamaCppRevision: string;
+    patchSetSha256: string;
+    moduleSha256: string;
+    wasmFlavor: EngineCapabilities['runtime']['wasmFlavor'];
+    wasmSha256: string;
+    compatWorkerSha256: string | null;
+    manifestRepository: string;
+    manifestRevision: string | null;
+    crossOriginIsolated: boolean;
+    sharedArrayBuffer: boolean;
+    hardwareConcurrency: number;
+    persistentStorage: boolean;
+  };
+  environment: {
+    browser: EngineCapabilities['browser'];
+    webgpu: EngineCapabilities['webgpu'];
+  };
+  releasePolicy: {
+    flashAttention: {
+      enabled: false;
+      operatorConfigurable: false;
+      status: 'fixed-off-unvalidated-for-release';
+    };
+    kvCache: {
+      key: 'f16';
+      value: 'f16';
+      operatorConfigurable: false;
+      status: 'fixed-release-default-alternatives-unvalidated';
+    };
+    dflash: {
+      enabled: false;
+      runtimeAvailable: false;
+      status: ModelManifestV2['dflash']['status'];
+    };
+  };
+}
+function roundedNonNegative(value: number | null, digits: number): number | null {
+  if (value === null || !Number.isFinite(value) || value < 0) return null;
+  const scale = 10 ** digits;
+  return Math.round(value * scale) / scale;
+}
+export function classifyCacheState(observedBytes: number | null, totalBytes: number): CacheState {
+  if (observedBytes === null || !Number.isFinite(observedBytes) || totalBytes <= 0) return 'unknown';
+  if (observedBytes <= 0) return 'empty';
+  if (observedBytes >= totalBytes) return 'cached';
+  return 'partial';
+}
+export function buildBenchmarkReport(observation: BenchmarkObservation): BenchmarkReport {
+  const { generationResult, capabilities, backendReport, loadResult } = observation;
+  const usage = generationResult.usage;
+  const engineCompletionTokens = usage
+    && Number.isFinite(usage.completionTokens)
+    && usage.completionTokens >= 0
+    ? usage.completionTokens
+    : null;
+  const streamedTokenEvents = Number.isFinite(observation.streamedTokenEvents)
+    ? Math.floor(Math.max(0, observation.streamedTokenEvents))
+    : 0;
+  const completionTokens = Math.max(engineCompletionTokens ?? 0, streamedTokenEvents);
+  const promptTokens = usage && Number.isFinite(usage.promptTokens) && usage.promptTokens >= 0
+    ? Math.floor(usage.promptTokens)
+    : null;
+  const engineTotalTokens = usage && Number.isFinite(usage.totalTokens) && usage.totalTokens >= 0
+    ? Math.floor(usage.totalTokens)
+    : null;
+  const totalTokens = usage
+    ? Math.max(engineTotalTokens ?? 0, (promptTokens ?? 0) + completionTokens)
+    : null;
+  const decodeRate = generationResult.timings?.predictedTokensPerSecond
+    ?? (completionTokens > 0 && observation.generationElapsedMs > 0
+      ? completionTokens / (observation.generationElapsedMs / 1000)
+      : null);
+  const device = loadResult.backend === 'webgpu'
+    ? capabilities.webgpu.name || 'WebGPU adapter'
+    : `CPU · ${capabilities.hardwareConcurrency} logical cores`;
+  return {
+    schemaVersion: 1,
+    kind: 'bonsai-browser-benchmark',
+    startedAt: observation.startedAt,
+    completedAt: observation.completedAt,
+    model: {
+      id: observation.model.id,
+      displayName: observation.model.displayName,
+      architecture: observation.model.architecture,
+      downloadBytes: observation.model.downloadBytes,
+      contextSize: observation.contextSize,
+    },
+    load: {
+      tuning: {
+        requestedNBatch: observation.nBatch,
+        requestedNUbatch: observation.nUbatch,
+        nBatch: loadResult.context.batchSize,
+        nUbatch: loadResult.context.microBatchSize,
+        flashAttention: loadResult.tuning.flashAttention,
+        cacheTypeK: loadResult.tuning.cacheTypeK,
+        cacheTypeV: loadResult.tuning.cacheTypeV,
+        status: observation.nBatch === null && observation.nUbatch === null
+          ? 'release-defaults'
+          : 'experimental-batch-shape',
+      },
+      cold: {
+        durationMs: roundedNonNegative(observation.coldLoadMs, 1),
+        cachedBytesAtStart: roundedNonNegative(observation.coldCachedBytes, 0),
+        cacheState: classifyCacheState(observation.coldCachedBytes, observation.model.downloadBytes),
+        definition: 'First load in this benchmark run; previously verified browser shards may already be cached.',
+      },
+      warm: {
+        durationMs: roundedNonNegative(observation.warmLoadMs, 1),
+        definition: 'Second load after an explicit unload, with the verified shard cache retained.',
+      },
+    },
+    generation: {
+      promptId: BENCHMARK_PROMPT_ID,
+      prompt: BENCHMARK_PROMPT,
+      maxTokens: observation.maxTokens,
+      temperature: 0,
+      seed: 42,
+      elapsedMs: roundedNonNegative(observation.generationElapsedMs, 1),
+      timeToFirstTokenMs: roundedNonNegative(observation.timeToFirstTokenMs, 1),
+      promptTokensPerSecond: roundedNonNegative(
+        generationResult.timings?.promptTokensPerSecond ?? null,
+        2,
+      ),
+      decodeTokensPerSecond: roundedNonNegative(decodeRate, 2),
+      promptTokens,
+      engineCompletionTokens,
+      streamedTokenEvents,
+      completionTokens,
+      engineTotalTokens,
+      totalTokens,
+      tokenCountSource: engineCompletionTokens !== null && engineCompletionTokens >= streamedTokenEvents
+        ? 'engine-usage'
+        : 'stream-events-fallback',
+      finishReason: generationResult.finishReason,
+    },
+    execution: {
+      requestedBackend: observation.requestedBackend,
+      selectedBackend: loadResult.backend,
+      device,
+      graphSplits: backendReport.nGraphSplits,
+      opsOnCpu: backendReport.opsOnCpu,
+      gpuLayers: backendReport.layersGpu,
+      confirmedBackends: [...backendReport.backends],
+    },
+    runtime: {
+      implementation: capabilities.runtime.implementation,
+      wllamaRevision: capabilities.runtime.wllamaRevision,
+      llamaCppRevision: capabilities.runtime.llamaCppRevision,
+      patchSetSha256: capabilities.runtime.patchSetSha256,
+      moduleSha256: capabilities.runtime.moduleSha256,
+      wasmFlavor: capabilities.runtime.wasmFlavor,
+      wasmSha256: capabilities.runtime.wasmSha256,
+      compatWorkerSha256: capabilities.runtime.compatWorkerSha256,
+      manifestRepository: observation.manifest.repository.id,
+      manifestRevision: observation.manifest.repository.revision,
+      crossOriginIsolated: capabilities.crossOriginIsolated,
+      sharedArrayBuffer: capabilities.sharedArrayBuffer,
+      hardwareConcurrency: capabilities.hardwareConcurrency,
+      persistentStorage: observation.storagePersistent,
+    },
+    environment: {
+      browser: { ...capabilities.browser },
+      webgpu: {
+        ...capabilities.webgpu,
+        limits: { ...capabilities.webgpu.limits },
+        features: [...capabilities.webgpu.features],
+      },
+    },
+    releasePolicy: {
+      flashAttention: {
+        enabled: false,
+        operatorConfigurable: false,
+        status: 'fixed-off-unvalidated-for-release',
+      },
+      kvCache: {
+        key: 'f16',
+        value: 'f16',
+        operatorConfigurable: false,
+        status: 'fixed-release-default-alternatives-unvalidated',
+      },
+      dflash: {
+        enabled: false,
+        runtimeAvailable: false,
+        status: observation.manifest.dflash.status,
+      },
+    },
+  };
+}
+export function serializeBenchmarkReport(report: BenchmarkReport): string {
+  return `${JSON.stringify(report, null, 2)}\n`;
+}
+export function benchmarkReportFilename(report: BenchmarkReport): string {
+  const timestamp = report.completedAt.replace(/[:.]/g, '-');
+  return `bonsai-bench-${report.model.id}-${report.execution.selectedBackend}-${timestamp}.json`;
+}

src/engine/device-gate.test.ts CHANGED Viewed

@@ -80,6 +80,28 @@ describe('inspectWebGpuAdapter', () => {
     expect(requestAdapter).toHaveBeenCalledWith();
     expect(snapshot.name).toBe('Default test GPU');
   });
 });
 describe('supportsWllamaWebGpuRuntime', () => {

     expect(requestAdapter).toHaveBeenCalledWith();
     expect(snapshot.name).toBe('Default test GPU');
   });
+  it('normalizes empty adapter-info strings instead of exporting an empty device name', async () => {
+    vi.stubGlobal('navigator', {
+      gpu: {
+        requestAdapter: vi.fn().mockResolvedValue({
+          limits: {},
+          features: new Set(),
+          info: { vendor: '  Apple ', architecture: '', device: '', description: ' ' },
+        }),
+      },
+    });
+    const snapshot = await inspectWebGpuAdapter();
+    expect(snapshot).toMatchObject({
+      name: 'Apple',
+      vendor: 'Apple',
+      architecture: null,
+      device: null,
+      description: null,
+    });
+  });
 });
 describe('supportsWllamaWebGpuRuntime', () => {

src/engine/device-gate.ts CHANGED Viewed

@@ -113,14 +113,22 @@ export async function inspectWebGpuAdapter(): Promise<WebGpuAdapterSnapshot> {
     };
   }
   const info = adapter.info ?? await adapter.requestAdapterInfo?.() ?? {};
-  const name = info.description ?? info.device ?? info.architecture ?? info.vendor ?? 'WebGPU adapter';
   return {
     available: true,
     name,
-    vendor: info.vendor ?? null,
-    architecture: info.architecture ?? null,
-    device: info.device ?? null,
-    description: info.description ?? null,
     limits: readLimits(adapter.limits),
     features: [...adapter.features].sort(),
   };

     };
   }
   const info = adapter.info ?? await adapter.requestAdapterInfo?.() ?? {};
+  const clean = (value: string | undefined): string | null => {
+    const trimmed = value?.trim();
+    return trimmed ? trimmed : null;
+  };
+  const vendor = clean(info.vendor);
+  const architecture = clean(info.architecture);
+  const device = clean(info.device);
+  const description = clean(info.description);
+  const name = description ?? device ?? architecture ?? vendor ?? 'WebGPU adapter';
   return {
     available: true,
     name,
+    vendor,
+    architecture,
+    device,
+    description,
     limits: readLimits(adapter.limits),
     features: [...adapter.features].sort(),
   };

src/engine/protocol.ts CHANGED Viewed

@@ -27,10 +27,20 @@ export interface EngineCapabilities {
   hardwareConcurrency: number;
   webgpu: WebGpuAdapterSnapshot;
   storage: StorageEstimate;
   runtime: {
     implementation: 'bonsai-wllama';
     wllamaRevision: string;
     llamaCppRevision: string;
     tokenEmbeddingOnWebGPU: true;
     tensorPlacementOverrides: false;
   };
@@ -96,6 +106,9 @@ export type LoadModelParams = ManifestSource & {
   backend: RequestedBackend;
   contextSize?: number;
   threads?: number;
   cacheTypeK?: 'f32' | 'f16' | 'q8_0' | 'q5_1' | 'q5_0' | 'q4_1' | 'q4_0';
   cacheTypeV?: 'f32' | 'f16' | 'q8_0' | 'q5_1' | 'q5_0' | 'q4_1' | 'q4_0';
   tensorPlacement?: FutureTensorPlacement;
@@ -124,6 +137,13 @@ export interface LoadModelResult {
     trainingSize: number;
     layerCount: number;
     vocabularySize: number;
   };
   chatTemplate: {
     bytes: number;

   hardwareConcurrency: number;
   webgpu: WebGpuAdapterSnapshot;
   storage: StorageEstimate;
+  browser: {
+    userAgent: string;
+    platform: string;
+    language: string;
+  };
   runtime: {
     implementation: 'bonsai-wllama';
     wllamaRevision: string;
     llamaCppRevision: string;
+    patchSetSha256: string;
+    moduleSha256: string;
+    wasmFlavor: 'jspi' | 'compat';
+    wasmSha256: string;
+    compatWorkerSha256: string | null;
     tokenEmbeddingOnWebGPU: true;
     tensorPlacementOverrides: false;
   };
   backend: RequestedBackend;
   contextSize?: number;
   threads?: number;
+  nBatch?: number;
+  nUbatch?: number;
+  flashAttention?: boolean;
   cacheTypeK?: 'f32' | 'f16' | 'q8_0' | 'q5_1' | 'q5_0' | 'q4_1' | 'q4_0';
   cacheTypeV?: 'f32' | 'f16' | 'q8_0' | 'q5_1' | 'q5_0' | 'q4_1' | 'q4_0';
   tensorPlacement?: FutureTensorPlacement;
     trainingSize: number;
     layerCount: number;
     vocabularySize: number;
+    batchSize: number;
+    microBatchSize: number;
+  };
+  tuning: {
+    flashAttention: boolean;
+    cacheTypeK: NonNullable<LoadModelParams['cacheTypeK']>;
+    cacheTypeV: NonNullable<LoadModelParams['cacheTypeV']>;
   };
   chatTemplate: {
     bytes: number;

src/engine/runtime-download.test.ts CHANGED Viewed

@@ -312,3 +312,30 @@ describe('BrowserEngineRuntime per-shard retry', () => {
     expect(progress[progress.length - 1]).toBe(0);
   });
 });

     expect(progress[progress.length - 1]).toBe(0);
   });
 });
+describe('BrowserEngineRuntime benchmark load controls', () => {
+  const invalidLoad = (extra: { nBatch?: number; nUbatch?: number }) => new BrowserEngineRuntime().loadModel(
+    'request-invalid-batch',
+    {
+      manifest: { schemaVersion: 2 } as never,
+      modelId: '1_7b',
+      backend: 'webgpu',
+      ...extra,
+    },
+    new AbortController().signal,
+    () => undefined,
+  );
+  it('rejects invalid n_batch before touching the manifest or model cache', async () => {
+    await expect(invalidLoad({ nBatch: 0 })).rejects.toMatchObject({ code: 'INVALID_BATCH_SIZE' });
+  });
+  it('rejects invalid n_ubatch before touching the manifest or model cache', async () => {
+    await expect(invalidLoad({ nUbatch: 1.5 })).rejects.toMatchObject({ code: 'INVALID_UBATCH_SIZE' });
+  });
+  it('rejects batch values that overflow the signed glue integer', async () => {
+    await expect(invalidLoad({ nBatch: 2_147_483_648 })).rejects.toMatchObject({ code: 'INVALID_BATCH_SIZE' });
+    await expect(invalidLoad({ nUbatch: Number.MAX_SAFE_INTEGER })).rejects.toMatchObject({ code: 'INVALID_UBATCH_SIZE' });
+  });
+});

src/engine/runtime-generate.test.ts CHANGED Viewed

@@ -93,4 +93,52 @@ describe('BrowserEngineRuntime generation telemetry', () => {
     expect(result.usage).toEqual({ promptTokens: 9, completionTokens: 1, totalTokens: 10 });
     expect(result.timings).toEqual({ promptTokensPerSecond: 100, predictedTokensPerSecond: 50 });
   });
 });

     expect(result.usage).toEqual({ promptTokens: 9, completionTokens: 1, totalTokens: 10 });
     expect(result.timings).toEqual({ promptTokensPerSecond: 100, predictedTokensPerSecond: 50 });
   });
+  it('reconciles incomplete streamed usage with llama.cpp timing counts', async () => {
+    const runtime = new BrowserEngineRuntime();
+    const internals = runtime as unknown as RuntimeInternals;
+    internals.loaded = {
+      manifest: {},
+      backend: 'wasm',
+      model: {
+        id: '1_7b',
+        displayName: 'Fixture Bonsai',
+        cpuFallback: true,
+        runtimePolicy: {
+          flashAttention: false,
+          tokenEmbeddingOnWebGPU: true,
+          requireSingleWebGPUGraph: false,
+        },
+      },
+    };
+    internals.wllama = {
+      isModelLoaded: () => true,
+      createChatCompletion: async ({ onData }) => {
+        onData(chunk('one, two, three', {
+          usage: { prompt_tokens: 3, completion_tokens: 1, total_tokens: 4 },
+          timings: {
+            cache_n: 0,
+            prompt_n: 9,
+            prompt_ms: 90,
+            prompt_per_token_ms: 10,
+            prompt_per_second: 100,
+            predicted_n: 64,
+            predicted_ms: 1_280,
+            predicted_per_token_ms: 20,
+            predicted_per_second: 50,
+          },
+        }));
+        onData(chunk(''));
+      },
+    };
+    const result = await runtime.generate(
+      'request-incomplete-usage',
+      { messages: [{ role: 'user', content: 'Count.' }] },
+      new AbortController().signal,
+      () => undefined,
+    );
+    expect(result.usage).toEqual({ promptTokens: 9, completionTokens: 64, totalTokens: 73 });
+  });
 });

src/engine/runtime.ts CHANGED Viewed

@@ -6,6 +6,7 @@ import {
   type ChatCompletionUsage,
   type ResultTimings,
 } from '../../vendor/wllama-bonsai/esm/index.js';
 import {
   assertBackendPolicy,
   estimateStorage,
@@ -46,8 +47,27 @@ const LLAMA_CPP_REVISION = '00fa7cb284cbf133fc426733bd64238a3588a33e';
 const WLLAMA_WASM_PATH = '/wasm/wllama.wasm';
 const WLLAMA_COMPAT_WASM_PATH = '/wasm/wllama-compat.wasm';
 const WLLAMA_COMPAT_WORKER_PATH = '/wasm/wllama-compat.js';
 const DEVICE_LOST_EXIT_GRACE_MS = 100;
 type EventSink = (event: EngineEvent) => void;
 interface LoadedModelState {
@@ -145,14 +165,31 @@ function emitProgress(
   });
 }
-function mapUsage(usage: ChatCompletionUsage | null | undefined): GenerateResult['usage'] {
-  if (!usage) {
     return null;
   }
   return {
-    promptTokens: usage.prompt_tokens,
-    completionTokens: usage.completion_tokens,
-    totalTokens: usage.total_tokens,
   };
 }
@@ -290,16 +327,32 @@ export class BrowserEngineRuntime {
       inspectWebGpuAdapter(),
       estimateStorage(),
     ]);
     return {
       crossOriginIsolated: globalThis.crossOriginIsolated,
       sharedArrayBuffer: typeof SharedArrayBuffer !== 'undefined',
       hardwareConcurrency: navigator.hardwareConcurrency || 1,
       webgpu,
       storage,
       runtime: {
         implementation: 'bonsai-wllama',
         wllamaRevision: WLLAMA_REVISION,
         llamaCppRevision: LLAMA_CPP_REVISION,
         tokenEmbeddingOnWebGPU: true,
         tensorPlacementOverrides: false,
       },
@@ -488,6 +541,26 @@ export class BrowserEngineRuntime {
         params.tensorPlacement,
       );
     }
     await this.unload();
     this.nativeLog.clear();
     emitProgress(sink, requestId, {
@@ -551,15 +624,16 @@ export class BrowserEngineRuntime {
     if (!Number.isSafeInteger(threads) || threads <= 0) {
       throw new EngineRuntimeError('INVALID_THREAD_COUNT', 'Thread count must be a positive integer.');
     }
     try {
       await this.raceWebGpuDeviceLoss('load', gate.selectedBackend, model, wllama.loadModel(blobs, {
         n_gpu_layers: gate.selectedBackend === 'webgpu' ? 99999 : 0,
         offload_token_embedding: gate.selectedBackend === 'webgpu',
         n_ctx: contextSize,
         n_threads: threads,
         seed: 42,
-        flash_attn: false,
         warmup: false,
         cache_type_k: params.cacheTypeK ?? 'f16',
         cache_type_v: params.cacheTypeV ?? 'f16',
@@ -597,6 +671,13 @@ export class BrowserEngineRuntime {
           trainingSize: context.n_ctx_train,
           layerCount: context.n_layer,
           vocabularySize: context.n_vocab,
         },
         chatTemplate: {
           bytes: new TextEncoder().encode(template).byteLength,
@@ -667,7 +748,7 @@ export class BrowserEngineRuntime {
             });
           }
           finishReason = chunk.choices[0]?.finish_reason ?? finishReason;
-          usage = mapUsage(chunk.usage) ?? usage;
           timings = mapTimings(chunk.timings) ?? timings;
         },
       }));

   type ChatCompletionUsage,
   type ResultTimings,
 } from '../../vendor/wllama-bonsai/esm/index.js';
+import runtimeSource from '../../vendor/wllama-bonsai/SOURCE.json';
 import {
   assertBackendPolicy,
   estimateStorage,
 const WLLAMA_WASM_PATH = '/wasm/wllama.wasm';
 const WLLAMA_COMPAT_WASM_PATH = '/wasm/wllama-compat.wasm';
 const WLLAMA_COMPAT_WORKER_PATH = '/wasm/wllama-compat.js';
+const MAX_GLUE_INT = 2_147_483_647;
 const DEVICE_LOST_EXIT_GRACE_MS = 100;
+function runtimeArtifact(path: string): { bytes: number; sha256: string } {
+  const artifact = runtimeSource.files.find((file) => file.path === path);
+  if (!artifact) throw new Error(`Runtime provenance is missing ${path}`);
+  return artifact;
+}
+function needsCompatWasm(): boolean {
+  if (!(WebAssembly as typeof WebAssembly & { Suspending?: unknown }).Suspending) return true;
+  try {
+    new WebAssembly.Memory(
+      { address: 'i64', initial: 1n } as unknown as WebAssembly.MemoryDescriptor,
+    );
+    return false;
+  } catch {
+    return true;
+  }
+}
 type EventSink = (event: EngineEvent) => void;
 interface LoadedModelState {
   });
 }
+function tokenCount(value: number | null | undefined): number {
+  return typeof value === 'number' && Number.isFinite(value) && value >= 0
+    ? Math.floor(value)
+    : 0;
+}
+function mapUsage(
+  usage: ChatCompletionUsage | null | undefined,
+  timings: ResultTimings | undefined,
+): GenerateResult['usage'] {
+  if (!usage && !timings) {
     return null;
   }
+  const promptTokens = Math.max(
+    tokenCount(usage?.prompt_tokens),
+    tokenCount(timings?.prompt_n),
+  );
+  const completionTokens = Math.max(
+    tokenCount(usage?.completion_tokens),
+    tokenCount(timings?.predicted_n),
+  );
   return {
+    promptTokens,
+    completionTokens,
+    totalTokens: Math.max(tokenCount(usage?.total_tokens), promptTokens + completionTokens),
   };
 }
       inspectWebGpuAdapter(),
       estimateStorage(),
     ]);
+    const wasmFlavor = needsCompatWasm() ? 'compat' : 'jspi';
+    const wasmArtifact = runtimeArtifact(
+      wasmFlavor === 'compat' ? 'public/wasm/wllama-compat.wasm' : 'public/wasm/wllama.wasm',
+    );
     return {
       crossOriginIsolated: globalThis.crossOriginIsolated,
       sharedArrayBuffer: typeof SharedArrayBuffer !== 'undefined',
       hardwareConcurrency: navigator.hardwareConcurrency || 1,
       webgpu,
       storage,
+      browser: {
+        userAgent: navigator.userAgent,
+        platform: navigator.platform,
+        language: navigator.language,
+      },
       runtime: {
         implementation: 'bonsai-wllama',
         wllamaRevision: WLLAMA_REVISION,
         llamaCppRevision: LLAMA_CPP_REVISION,
+        patchSetSha256: runtimeSource.patchSet.sha256,
+        moduleSha256: runtimeArtifact('vendor/wllama-bonsai/esm/index.js').sha256,
+        wasmFlavor,
+        wasmSha256: wasmArtifact.sha256,
+        compatWorkerSha256: wasmFlavor === 'compat'
+          ? runtimeArtifact('public/wasm/wllama-compat.js').sha256
+          : null,
         tokenEmbeddingOnWebGPU: true,
         tensorPlacementOverrides: false,
       },
         params.tensorPlacement,
       );
     }
+    if (params.nBatch !== undefined && (
+      !Number.isSafeInteger(params.nBatch)
+      || params.nBatch <= 0
+      || params.nBatch > MAX_GLUE_INT
+    )) {
+      throw new EngineRuntimeError(
+        'INVALID_BATCH_SIZE',
+        `n_batch must be a positive signed 32-bit integer (maximum ${MAX_GLUE_INT}).`,
+      );
+    }
+    if (params.nUbatch !== undefined && (
+      !Number.isSafeInteger(params.nUbatch)
+      || params.nUbatch <= 0
+      || params.nUbatch > MAX_GLUE_INT
+    )) {
+      throw new EngineRuntimeError(
+        'INVALID_UBATCH_SIZE',
+        `n_ubatch must be a positive signed 32-bit integer (maximum ${MAX_GLUE_INT}).`,
+      );
+    }
     await this.unload();
     this.nativeLog.clear();
     emitProgress(sink, requestId, {
     if (!Number.isSafeInteger(threads) || threads <= 0) {
       throw new EngineRuntimeError('INVALID_THREAD_COUNT', 'Thread count must be a positive integer.');
     }
     try {
       await this.raceWebGpuDeviceLoss('load', gate.selectedBackend, model, wllama.loadModel(blobs, {
         n_gpu_layers: gate.selectedBackend === 'webgpu' ? 99999 : 0,
         offload_token_embedding: gate.selectedBackend === 'webgpu',
         n_ctx: contextSize,
         n_threads: threads,
+        n_batch: params.nBatch,
+        n_ubatch: params.nUbatch,
         seed: 42,
+        flash_attn: params.flashAttention ?? false,
         warmup: false,
         cache_type_k: params.cacheTypeK ?? 'f16',
         cache_type_v: params.cacheTypeV ?? 'f16',
           trainingSize: context.n_ctx_train,
           layerCount: context.n_layer,
           vocabularySize: context.n_vocab,
+          batchSize: context.n_batch,
+          microBatchSize: context.n_ubatch,
+        },
+        tuning: {
+          flashAttention: params.flashAttention ?? false,
+          cacheTypeK: params.cacheTypeK ?? 'f16',
+          cacheTypeV: params.cacheTypeV ?? 'f16',
         },
         chatTemplate: {
           bytes: new TextEncoder().encode(template).byteLength,
             });
           }
           finishReason = chunk.choices[0]?.finish_reason ?? finishReason;
+          usage = mapUsage(chunk.usage, chunk.timings) ?? usage;
           timings = mapTimings(chunk.timings) ?? timings;
         },
       }));

src/main.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './app/App';
 import './app/styles.css';
 const root = document.getElementById('root');
@@ -9,8 +10,13 @@ if (!root) {
   throw new Error('Bonsai shell root element is missing');
 }
 createRoot(root).render(
   <StrictMode>
-    <App />
   </StrictMode>,
 );

 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './app/App';
+import { BenchApp } from './bench/BenchApp';
 import './app/styles.css';
 const root = document.getElementById('root');
   throw new Error('Bonsai shell root element is missing');
 }
+export function isBenchPath(pathname: string): boolean {
+  const normalized = pathname.replace(/\/+$/, '');
+  return /(?:^|\/)bench(?:\/index\.html|\.html)?$/.test(normalized);
+}
 createRoot(root).render(
   <StrictMode>
+    {isBenchPath(window.location.pathname) ? <BenchApp /> : <App />}
   </StrictMode>,
 );

vendor/wllama-bonsai/PATCH.diff ADDED Viewed

	@@ -0,0 +1,181 @@

+diff --git a/CMakeLists.txt b/CMakeLists.txt
+index ba95350..33fcbbf 100644
+--- a/CMakeLists.txt
++++ b/CMakeLists.txt
+@@ -103,6 +103,7 @@ set(LLAMA_SERVER_SRC llama.cpp/tools/server/server-context.cpp
+     llama.cpp/tools/server/server-task.cpp
+     llama.cpp/tools/server/server-chat.cpp
+     llama.cpp/tools/server/server-common.cpp
++    llama.cpp/tools/server/server-schema.cpp
+ )
+ set(WLLAMA_SRC ${LLAMA_COMMON_SRC} ${LLAMA_SERVER_SRC}
+diff --git a/cpp/glue.hpp b/cpp/glue.hpp
+index f1496a4..8883324 100644
+--- a/cpp/glue.hpp
++++ b/cpp/glue.hpp
+@@ -502,6 +502,7 @@ struct glue_msg_load_req
+   GLUE_FIELD(bool, use_mmap)
+   GLUE_FIELD(bool, use_mlock)
+   GLUE_FIELD(int, n_gpu_layers)
++  GLUE_FIELD_NULLABLE(bool, offload_token_embedding)
+   GLUE_FIELD(int, n_ctx)
+   GLUE_FIELD(int, n_threads)
+   GLUE_FIELD_NULLABLE(str, model_alias)
+diff --git a/cpp/wllama-context.h b/cpp/wllama-context.h
+index 0dafe6d..c4b46f9 100644
+--- a/cpp/wllama-context.h
++++ b/cpp/wllama-context.h
+@@ -19,6 +19,7 @@
+ #include "server-context.h"
+ #include "server-queue.h"
++#include "server-schema.h"
+ #include "ggml-cpu.h"
+ #include "ggml-backend.h"
+@@ -300,7 +301,7 @@ struct wllama_context
+       server_task task = server_task(SERVER_TASK_TYPE_COMPLETION);
+       task.id = rd->get_new_id();
+       task.index = 0;
+-      task.params = server_task::params_from_json_cmpl(
++      task.params = server_schema::eval_llama_cmpl_schema(
+           vocab,
+           params,
+           meta->slot_n_ctx,
+@@ -415,6 +416,8 @@ struct wllama_context
+       params.embedding = req.embeddings.value;
+     if (req.n_batch.not_null())
+       params.n_batch = req.n_batch.value;
++    if (req.n_ubatch.not_null())
++      params.n_ubatch = req.n_ubatch.value;
+     if (req.n_parallel.not_null())
+       params.n_parallel = req.n_parallel.value;
+     if (req.pooling_type.not_null())
+@@ -568,6 +571,24 @@ struct wllama_context
+     // load model
+     llama_backend_init();
+     llama_numa_init(params.numa);
++    if (req.offload_token_embedding.not_null() && req.offload_token_embedding.value)
++    {
++      auto *webgpu_dev = ggml_backend_dev_by_name("WebGPU");
++      if (webgpu_dev == nullptr)
++      {
++        throw app_exception("offload_token_embedding was requested, but the WebGPU device is unavailable");
++      }
++
++      auto *webgpu_buft = ggml_backend_dev_buffer_type(webgpu_dev);
++      if (webgpu_buft == nullptr)
++      {
++        throw app_exception("offload_token_embedding was requested, but the WebGPU buffer type is unavailable");
++      }
++
++      params.tensor_buft_overrides.push_back({"^token_embd\\.weight$", webgpu_buft});
++      params.tensor_buft_overrides.push_back({nullptr, nullptr});
++      fprintf(stderr, "@@INFO@@offload_token_embedding: token_embd.weight -> %s\n", ggml_backend_buft_name(webgpu_buft));
++    }
+     if (!ctx_server.load_model(params))
+     {
+       glue_msg_load_res res;
+diff --git a/src/glue/messages.ts b/src/glue/messages.ts
+index 08f0d87..c1001da 100644
+--- a/src/glue/messages.ts
++++ b/src/glue/messages.ts
+@@ -53,6 +53,11 @@ export const GLUE_MESSAGE_PROTOTYPES: { [name: string]: GlueMessageProto } = {
+         "name": "n_gpu_layers",
+         "isNullable": false
+       },
++      {
++        "type": "bool",
++        "name": "offload_token_embedding",
++        "isNullable": true
++      },
+       {
+         "type": "int",
+         "name": "n_ctx",
+@@ -618,6 +623,7 @@ export interface GlueMsgLoadReq {
+   use_mmap: boolean;
+   use_mlock: boolean;
+   n_gpu_layers: number;
++  offload_token_embedding?: boolean | undefined;
+   n_ctx: number;
+   n_threads: number;
+   model_alias?: string | undefined;
+diff --git a/src/types/types.ts b/src/types/types.ts
+index 2b3cca7..e91b395 100644
+--- a/src/types/types.ts
++++ b/src/types/types.ts
+@@ -4,8 +4,12 @@ export interface LoadModelParams {
+   seed?: number;
+   n_ctx?: number;
+   n_batch?: number;
++  n_ubatch?: number;
+   // by default, all layers are offloaded if WebGPU is available
+   n_gpu_layers?: number;
++  // keeps token lookup on WebGPU, avoiding a CPU GET_ROWS graph split;
++  // defaults to true when n_gpu_layers is non-zero and WebGPU supports shader-f16
++  offload_token_embedding?: boolean;
+   // by default, on multi-thread build, we take half number of available threads (hardwareConcurrency / 2)
+   n_threads?: number;
+   embeddings?: boolean;
+diff --git a/src/wllama.ts b/src/wllama.ts
+index ce74b2b..8057028 100644
+--- a/src/wllama.ts
++++ b/src/wllama.ts
+@@ -478,6 +478,27 @@ export class Wllama {
+     if (this.proxy) {
+       throw new WllamaError('Module is already initialized', 'load_error');
+     }
++    const nGpuLayers = params.n_gpu_layers ?? 99999;
++    const wantsTokenEmbeddingOffload =
++      params.offload_token_embedding === true ||
++      (params.offload_token_embedding === undefined && nGpuLayers !== 0);
++    let compatibleWebGPU = false;
++    if (wantsTokenEmbeddingOffload && isSupportWebGPU()) {
++      try {
++        const adapter = await (navigator as any).gpu.requestAdapter();
++        compatibleWebGPU = !!adapter?.features?.has('shader-f16');
++      } catch {
++        compatibleWebGPU = false;
++      }
++    }
++    if (params.offload_token_embedding === true && !compatibleWebGPU) {
++      throw new WllamaError(
++        'offload_token_embedding was requested, but WebGPU is unavailable',
++        'load_error'
++      );
++    }
++    const offloadTokenEmbedding =
++      params.offload_token_embedding ?? compatibleWebGPU;
+     // detect if we can use multi-thread and webgpu
+     const supportMultiThread = await isSupportMultiThread();
+     const hwConccurency = Math.floor((navigator.hardwareConcurrency || 1) / 2);
+@@ -518,7 +539,8 @@ export class Wllama {
+       // if async read is not supported, use mmap; refer to README-dev.md for more details
+       use_mmap: !canUseAsyncFileRead(workerResources.compat),
+       use_mlock: false,
+-      n_gpu_layers: params.n_gpu_layers ?? 99999,
++      n_gpu_layers: nGpuLayers,
++      offload_token_embedding: offloadTokenEmbedding,
+       n_ctx: params.n_ctx ?? 1024,
+       n_threads: this.useMultiThread ? nbThreads : 1,
+       n_ctx_auto: false, // not supported for now
+@@ -529,6 +551,7 @@ export class Wllama {
+       embeddings: params.embeddings,
+       offload_kqv: params.offload_kqv,
+       n_batch: params.n_batch,
++      n_ubatch: params.n_ubatch,
+       pooling_type: params.pooling_type as string,
+       rope_scaling_type: params.rope_scaling_type as string,
+       rope_freq_base: params.rope_freq_base,
+@@ -579,6 +602,10 @@ export class Wllama {
+       skip_chat_parsing: params.skip_chat_parsing,
+       prefill_assistant: params.prefill_assistant,
+     });
++    if (!loadResult.success) {
++      await this.exit();
++      throw new WllamaError('Failed to load model', 'load_error');
++    }
+     const loadedCtxInfo: LoadedContextInfo & GlueMsgLoadRes = {
+       ...loadResult,
+       metadata: {},

vendor/wllama-bonsai/SOURCE.json CHANGED Viewed

@@ -1,24 +1,49 @@
 {
   "upstream": "https://github.com/ngxson/wllama",
   "wllamaRevision": "912c18b75d4358c1405a64646b8dbe43a205943b",
   "llamaCppRevision": "00fa7cb284cbf133fc426733bd64238a3588a33e",
   "license": "MIT",
-  "patch": "Expose offload_token_embedding and place token_embd.weight on WebGPU whenever GPU layers are requested; fail loudly when the requested WebGPU buffer is unavailable.",
   "files": [
     {
       "path": "vendor/wllama-bonsai/esm/index.js",
-      "sha256": "398239a8aeb35550bcbde7f6c3702e282fb87d73254865de9cb6f8f17c184435"
     },
     {
       "path": "public/wasm/wllama.wasm",
-      "sha256": "829dd6c01e99893c7a0e2f9c00a97b1578ce30f0d03720b1eab5f3bc3063f973"
     },
     {
       "path": "public/wasm/wllama-compat.wasm",
-      "sha256": "609979201d693d58cd23972113af5cbe08d0a8e16deef26fc3c9d230c0228eed"
     },
     {
       "path": "public/wasm/wllama-compat.js",
       "sha256": "0b667db536815fb9e5dc9ffbfbd6ba29affdda38a4ba892d5372ddb41ce9a8c8"
     }
   ]

 {
+  "schemaVersion": 2,
   "upstream": "https://github.com/ngxson/wllama",
   "wllamaRevision": "912c18b75d4358c1405a64646b8dbe43a205943b",
   "llamaCppRevision": "00fa7cb284cbf133fc426733bd64238a3588a33e",
   "license": "MIT",
+  "patch": "Expose offload_token_embedding and n_ubatch; place token_embd.weight on WebGPU whenever GPU layers are requested; fail loudly when the requested WebGPU buffer is unavailable.",
+  "patchSet": {
+    "format": "git-diff-binary",
+    "path": "vendor/wllama-bonsai/PATCH.diff",
+    "bytes": 6896,
+    "sha256": "62efebdb3071ba49b87c835c1b45716257fe5ea6cb7eec6ee82f6a2f33bc581c",
+    "files": [
+      "CMakeLists.txt",
+      "cpp/glue.hpp",
+      "cpp/wllama-context.h",
+      "src/glue/messages.ts",
+      "src/types/types.ts",
+      "src/wllama.ts"
+    ]
+  },
+  "build": {
+    "emsdkImage": "emscripten/emsdk:4.0.20-arm64",
+    "builderImageId": "sha256:1143696588c47ddcfa796d7a84663a1fd1d8f28e2e1db62d50cac618776d11dd",
+    "dawnTag": "v20260317.182325",
+    "dawnArchiveSha256": "8dcae86c630d76b6794b271c6572becba36f4237d132bee121a56638c3d76575"
+  },
   "files": [
     {
       "path": "vendor/wllama-bonsai/esm/index.js",
+      "bytes": 364498,
+      "sha256": "67eb16e67297b05e8fc7424d9b273d1586ad8097f8551216b55fa4b77d5e5c51"
     },
     {
       "path": "public/wasm/wllama.wasm",
+      "bytes": 8017169,
+      "sha256": "dd71f58c75f32c677a64eeb2e56efab7dedbe7395f730bb08bc80021bd182caa"
     },
     {
       "path": "public/wasm/wllama-compat.wasm",
+      "bytes": 14864188,
+      "sha256": "eca9754d0d8a490b5c7b58cb384d67e31aa8ab26dd330e4ad1460982df6dd82e"
     },
     {
       "path": "public/wasm/wllama-compat.js",
+      "bytes": 166895,
       "sha256": "0b667db536815fb9e5dc9ffbfbd6ba29affdda38a4ba892d5372ddb41ce9a8c8"
     }
   ]

vendor/wllama-bonsai/esm/index.cjs CHANGED Viewed

@@ -2919,6 +2919,7 @@ var Wllama = class {
         embeddings: params.embeddings,
         offload_kqv: params.offload_kqv,
         n_batch: params.n_batch,
         pooling_type: params.pooling_type,
         rope_scaling_type: params.rope_scaling_type,
         rope_freq_base: params.rope_freq_base,

         embeddings: params.embeddings,
         offload_kqv: params.offload_kqv,
         n_batch: params.n_batch,
+        n_ubatch: params.n_ubatch,
         pooling_type: params.pooling_type,
         rope_scaling_type: params.rope_scaling_type,
         rope_freq_base: params.rope_freq_base,

vendor/wllama-bonsai/esm/index.js CHANGED Viewed

@@ -2884,6 +2884,7 @@ var Wllama = class {
         embeddings: params.embeddings,
         offload_kqv: params.offload_kqv,
         n_batch: params.n_batch,
         pooling_type: params.pooling_type,
         rope_scaling_type: params.rope_scaling_type,
         rope_freq_base: params.rope_freq_base,

         embeddings: params.embeddings,
         offload_kqv: params.offload_kqv,
         n_batch: params.n_batch,
+        n_ubatch: params.n_ubatch,
         pooling_type: params.pooling_type,
         rope_scaling_type: params.rope_scaling_type,
         rope_freq_base: params.rope_freq_base,

vendor/wllama-bonsai/esm/index.min.js CHANGED Viewed

The diff for this file is too large to render. See raw diff

vendor/wllama-bonsai/esm/index.min.js.map CHANGED Viewed

The diff for this file is too large to render. See raw diff

vendor/wllama-bonsai/esm/types/types.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ export interface LoadModelParams {
     seed?: number;
     n_ctx?: number;
     n_batch?: number;
     n_gpu_layers?: number;
     offload_token_embedding?: boolean;
     n_threads?: number;

     seed?: number;
     n_ctx?: number;
     n_batch?: number;
+    n_ubatch?: number;
     n_gpu_layers?: number;
     offload_token_embedding?: boolean;
     n_threads?: number;

vendor/wllama-bonsai/esm/wasm/source-map.d.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ export declare const WASM_SOURCE_MAP: Record<string, string>;

vite.config.ts CHANGED Viewed

@@ -3,6 +3,14 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
   plugins: [react()],
   server: {
     headers: {
       'Cross-Origin-Embedder-Policy': 'require-corp',

 export default defineConfig({
   plugins: [react()],
+  build: {
+    rollupOptions: {
+      input: {
+        main: 'index.html',
+        bench: 'bench/index.html',
+      },
+    },
+  },
   server: {
     headers: {
       'Cross-Origin-Embedder-Policy': 'require-corp',