Spaces:

WaveCut
/

Bonsai-Chat-WebGPU

Running

App Files Files Community

Valeriy Selitskiy commited on about 19 hours ago

Commit

c3633b1

1 Parent(s): 67dce87

Release v1.2.0 live model telemetry

Browse files

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

.gitignore +0 -1
README.md +13 -21
THIRD_PARTY_NOTICES.md +0 -2
dist/assets/index-BY7HNxCd.js +0 -0
dist/assets/index-C-2tm91j.css +0 -1
dist/assets/index-Dn6W9Rfz.js +0 -0
dist/assets/index-DnMbdiUB.css +1 -0
dist/assets/{worker-CUYMhoYj.js → worker-Bn87aL54.js} +0 -0
dist/index.html +2 -2
dist/manifest/models.json +1 -90
dist/wasm/wllama-compat.wasm +2 -2
dist/wasm/wllama.wasm +2 -2
public/manifest/models.json +1 -90
public/wasm/wllama-compat.wasm +2 -2
public/wasm/wllama.wasm +2 -2
scripts/verify-wllama-assets.mjs +9 -0
src/app/App.test.ts +22 -0
src/app/App.tsx +232 -60
src/app/components/ArtifactPane.tsx +1 -1
src/app/components/BonsaiShell.tsx +2 -4
src/app/components/ChatSurface.tsx +39 -13
src/app/components/ComposerActivity.tsx +205 -0
src/app/components/InspectorPanel.tsx +23 -47
src/app/components/ModelRail.tsx +1 -42
src/app/styles.css +405 -296
src/bench/report.test.ts +1 -62
src/bench/report.ts +0 -20
src/engine/blob-integrity.test.ts +45 -1
src/engine/blob-integrity.ts +11 -0
src/engine/client.test.ts +26 -0
src/engine/client.ts +5 -1
src/engine/device-gate.test.ts +1 -0
src/engine/manifest.test.ts +0 -130
src/engine/manifest.ts +0 -293
src/engine/native-log.test.ts +80 -0
src/engine/native-log.ts +80 -1
src/engine/protocol.ts +35 -1
src/engine/runtime-device-lost.test.ts +1 -0
src/engine/runtime-download.test.ts +32 -1
src/engine/runtime-generate.test.ts +208 -4
src/engine/runtime-score-sequence.test.ts +1 -0
src/engine/runtime.ts +295 -14
src/lib/contracts.ts +27 -10
src/vite-env.d.ts +6 -0
vendor/wllama-bonsai/PATCH.diff +73 -6
vendor/wllama-bonsai/SOURCE.json +10 -9
vendor/wllama-bonsai/esm/index.cjs +0 -0
vendor/wllama-bonsai/esm/index.js +0 -0
vendor/wllama-bonsai/esm/index.min.js +0 -0
vendor/wllama-bonsai/esm/index.min.js.map +0 -0

.gitignore CHANGED Viewed

@@ -1,5 +1,4 @@
 node_modules/
-dist/
 playwright-report/
 test-results/
 *.log

 node_modules/
 playwright-report/
 test-results/
 *.log

README.md CHANGED Viewed

@@ -57,7 +57,12 @@ shard from byte zero; the UI does not claim resumable Range downloads.
 `maxStorageBufferBindingSize`, `shader-f16`, browser quota, or all-WebGPU graph
 requirement does not pass. Chrome on Apple Silicon is the validated release
 path. Safari 26.5 on Apple Silicon has also passed a real foreground cold 27B
-load through compat/Asyncify plus explicit OPFS eviction. Firefox gating was
 validated on macOS: it selected compat, offered CPU-WASM for dense tiers, and
 refused 27B without WebGPU; Firefox model generation was not exercised.
 Windows Chrome/Edge on a discrete GPU and a physical low-limit iGPU laptop
@@ -85,7 +90,7 @@ validates the pinned native CPU prompt/reference fixture, then teacher-forces
 that fixed 1,024-token sequence through raw token-ID prefixes. Schema v3 keeps
 the forced reference logprob, natural top five, mean NLL, and perplexity
 separate from the natural browser generation. This scoring method is not
-available to normal chat and does not activate DFlash.
 On the pinned Apple `metal-3` release path, the final JSPI runtime completed the
 natural 1,024-token 27B run at 11.3 tok/s with one graph, zero CPU ops, and
@@ -128,18 +133,6 @@ first-download claim:
 | 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
-Q8_0 native GGUF reference are pinned in the manifest. The strict D1 audit
-passes all 39 shape, tokenizer, target-tap, conversion, revision, and evidence
-checks, including a 32-token temperature-0 native Bonsai-27B parity smoke. The
-custom WASM contains the DFlash llama.cpp architecture, but the browser load
-API does not yet plumb `spec_type=draft-dflash`; the Q8
-`fc.weight` also exceeds the 128 MiB baseline WebGPU binding limit. It remains
-disabled and unavailable until a lower-bit candidate, browser parity,
-acceptance, and positive speed gates all pass.
 ## Local tools and safety boundary
 Tools are off by default. Memory writes/deletes require operator confirmation.
@@ -155,10 +148,10 @@ 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`
-- custom patch set: `27b96fa48c6fd66b44fe70e83cc775902e29ec5877261c7eb04fecabc529d2f9`
-- custom ESM: `10c3811776e34092a225632929b97046af4215a4c91156169105c886be5cba5d`
-- JSPI WASM: `b292bf670a25e1ecf02c71dd92b49196f3336842135f1f85efd5a3fd5f36ea8a`
-- compat WASM: `ea0623d2ca1758287a569169b4ad5a69c22e41bce3e5d022c7d3e4fb5c37918c`
 - compat worker: `0b667db536815fb9e5dc9ffbfbd6ba29affdda38a4ba892d5372ddb41ce9a8c8`
 The vendored runtime exposes the validated token-embedding WebGPU placement
@@ -178,8 +171,7 @@ remains off and F16/F16 remains the release default.
 ## Licenses and attribution
 The Bonsai GGUF tiers are Apache-2.0 model artifacts; their upstream notices
-are published in `WaveCut/Bonsai-web-GGUF@v1.1.3/notices/`. The DFlash Q8_0
-native reference is MIT-licensed by Z Lab and has a separate notice in that
-same release. The shipped wllama/llama.cpp engines, React runtime, and
 `@noble/hashes` are MIT-licensed. Exact runtime license texts are included in
 `public/licenses/`; the consolidated inventory is `THIRD_PARTY_NOTICES.md`.

 `maxStorageBufferBindingSize`, `shader-f16`, browser quota, or all-WebGPU graph
 requirement does not pass. Chrome on Apple Silicon is the validated release
 path. Safari 26.5 on Apple Silicon has also passed a real foreground cold 27B
+load through compat/Asyncify plus explicit OPFS eviction. The normal compat
+path caps prefill at `n_batch=32` and `n_ubatch=16` so Safari submits shorter
+Metal command buffers; explicit benchmark tuning can still override the cap.
+On Safari 26.5.2, the final 64-token gate completed at 1.2 prefill tok/s and
+3.5 decode tok/s with one graph, zero CPU ops, and 65/65 GPU layers. Chrome's
+JSPI path does not use this cap. Firefox gating was
 validated on macOS: it selected compat, offered CPU-WASM for dense tiers, and
 refused 27B without WebGPU; Firefox model generation was not exercised.
 Windows Chrome/Edge on a discrete GPU and a physical low-limit iGPU laptop
 that fixed 1,024-token sequence through raw token-ID prefixes. Schema v3 keeps
 the forced reference logprob, natural top five, mean NLL, and perplexity
 separate from the natural browser generation. This scoring method is not
+available to normal chat.
 On the pinned Apple `metal-3` release path, the final JSPI runtime completed the
 natural 1,024-token 27B run at 11.3 tok/s with one graph, zero CPU ops, and
 | 8B | WebGPU | 9,870 ms | 998 ms | 33.8 tok/s |
 | 27B | WebGPU | 29,488 ms | 3,348 ms | 11.9 tok/s |
 ## Local tools and safety boundary
 Tools are off by default. Memory writes/deletes require operator confirmation.
 - Dawn native WebGPU validation: `18eb229ef5f707c1464cc581252e7603c73a3ef0`
 - custom wllama source: `912c18b75d4358c1405a64646b8dbe43a205943b`
 - custom nested llama.cpp: `00fa7cb284cbf133fc426733bd64238a3588a33e`
+- custom patch set: `e94aef3f672211e72bab039385b3bcbeda46f0e3218db7a86a9b5468186ab491`
+- custom ESM: `b7e883ebeed6aad1b4587d89c20cc4ee8e69e7a0e94e1d307dcad756d657a41a`
+- JSPI WASM: `5a8686c10f7639653e7e1854d34f39c31ddba404de876a5ae15d36c42263ddc4`
+- compat WASM: `c823684229149dd2386308978288e366f2ff209b231b78485507db8cb735bbdd`
 - compat worker: `0b667db536815fb9e5dc9ffbfbd6ba29affdda38a4ba892d5372ddb41ce9a8c8`
 The vendored runtime exposes the validated token-embedding WebGPU placement
 ## Licenses and attribution
 The Bonsai GGUF tiers are Apache-2.0 model artifacts; their upstream notices
+are published in `WaveCut/Bonsai-web-GGUF@v1.1.3/notices/`. The shipped
+wllama/llama.cpp engines, React runtime, and
 `@noble/hashes` are MIT-licensed. Exact runtime license texts are included in
 `public/licenses/`; the consolidated inventory is `THIRD_PARTY_NOTICES.md`.

THIRD_PARTY_NOTICES.md CHANGED Viewed

@@ -4,8 +4,6 @@ The distributed Space bundle includes:
 - Bonsai 1.7B/4B/8B/27B GGUF model downloads, Apache-2.0, with per-tier
   notices in `WaveCut/Bonsai-web-GGUF@v1.1.3/notices/`;
-- the optional, runtime-disabled DFlash Q8_0 native reference, MIT,
-  Copyright (c) 2026 Z Lab, with `NOTICE-DFLASH.txt` in that model release;
 - wllama at `912c18b75d4358c1405a64646b8dbe43a205943b`, MIT;
 - llama.cpp/ggml at `00fa7cb284cbf133fc426733bd64238a3588a33e`, MIT;
 - React and React DOM 19.2.4, MIT;

 - Bonsai 1.7B/4B/8B/27B GGUF model downloads, Apache-2.0, with per-tier
   notices in `WaveCut/Bonsai-web-GGUF@v1.1.3/notices/`;
 - wllama at `912c18b75d4358c1405a64646b8dbe43a205943b`, MIT;
 - llama.cpp/ggml at `00fa7cb284cbf133fc426733bd64238a3588a33e`, MIT;
 - React and React DOM 19.2.4, MIT;

dist/assets/index-BY7HNxCd.js ADDED Viewed

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

dist/assets/index-C-2tm91j.css DELETED Viewed

@@ -1 +0,0 @@

- :root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#111512;--ink-raised:#191e1a;--ink-soft:#252b25;--paper:#e8dfca;--paper-deep:#d8cdb4;--paper-ghost:#e8dfca9e;--phosphor:#b9ff45;--phosphor-dim:#b9ff4529;--moss:#6f8062;--rust:#c96f43;--line-light:#e8dfca24;--line-dark:#1115122e;--display:"Bodoni 72", Didot, "Iowan Old Style", Baskerville, serif;--body:"Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;--mono:"Berkeley Mono", Iosevka, "SFMono-Regular", Consolas, monospace;font-family:var(--body);font-synthesis:none;text-rendering:optimizelegibility}*{box-sizing:border-box}html{background:var(--ink)}body{background:linear-gradient(90deg, #1115120f 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(#1115120b 1px, transparent 1px) 0 0 / 22px 22px, var(--paper);min-width:320px;min-height:100vh;color:var(--paper);margin:0}button,textarea,select{font:inherit}button{color:inherit}button:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--phosphor);outline-offset:3px}button:disabled{cursor:not-allowed}::selection{color:var(--ink);background:var(--phosphor)}.station-frame{isolation:isolate;min-height:100dvh;animation:.58s cubic-bezier(.16,1,.3,1) both station-in}.station-frame:before{z-index:20;pointer-events:none;content:"";opacity:.14;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");position:fixed;inset:0}.station-header{background:var(--ink);border-bottom:1px solid var(--phosphor);z-index:10;grid-template-columns:minmax(330px,1fr) auto minmax(220px,1fr);align-items:stretch;min-height:76px;display:grid;position:relative;box-shadow:0 12px 38px #11151238}.brand-block{align-items:center;gap:14px;padding:12px 24px;display:flex}.brand-block h1{font:400 clamp(25px, 2vw, 34px) / .9 var(--display);letter-spacing:-.035em;margin:0}.brand-block h1 i{color:var(--phosphor);font-weight:400}.brand-mark{background:repeating-radial-gradient(at 52% 62%,#0000 0 4px,#b9ff456b 4.5px 5px);border:1px solid #b9ff457a;border-radius:50%;flex:0 0 42px;place-items:center;width:42px;height:42px;display:grid;transform:rotate(-11deg)}.brand-mark:before,.brand-mark:after,.brand-mark span:before,.brand-mark span:after{content:"";background:var(--phosphor);transform-origin:bottom;width:1px;position:absolute}.brand-mark:before{height:25px;transform:translate(-1px,4px)rotate(0)}.brand-mark:after{height:13px;transform:translate(4px,-2px)rotate(43deg)}.brand-mark span:before{height:11px;transform:translate(-5px,-1px)rotate(-47deg)}.brand-mark span:after{height:8px;transform:translate(3px,-9px)rotate(72deg)}.eyebrow{color:#e8dfca85;font:600 9px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;margin:0 0 5px}.eyebrow.ink{color:#11151285}.local-promise{border-inline:1px solid var(--line-light);background:linear-gradient(115deg,#b9ff4514,#0000 66%);align-items:center;gap:11px;min-width:360px;padding:0 28px;display:flex}.signal-dot,.live-label i,.sampling-label i{background:var(--phosphor);width:7px;height:7px;box-shadow:0 0 0 5px var(--phosphor-dim), 0 0 17px #b9ff459e;border-radius:50%;display:inline-block}.local-promise span:last-child{gap:3px;display:grid}.local-promise strong{color:var(--phosphor);font:600 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase}.local-promise small{color:var(--paper-ghost);font:11px/1.2 var(--body)}.header-actions{justify-self:end;align-items:center;padding-right:18px;display:flex}.station-clock{color:var(--paper-ghost);font-family:var(--mono);justify-items:end;padding:0 18px;display:grid}.station-clock small{letter-spacing:.18em;font-size:8px}.station-clock span{letter-spacing:.09em;margin-top:4px;font-size:10px}.icon-button{cursor:pointer;background:0 0;border:1px solid #e8dfca3d;border-radius:50%;place-items:center;width:38px;height:38px;transition:color .16s,border-color .16s,transform .16s;display:grid}.icon-button:hover{color:var(--phosphor);border-color:var(--phosphor);transform:rotate(-7deg)}.icon-button svg{fill:none;stroke:currentColor;stroke-width:1.4px;width:18px}.workspace-grid{grid-template-columns:clamp(240px,18vw,286px) minmax(510px,1fr) clamp(310px,23vw,370px);grid-template-areas:"models chat inspector";min-height:calc(100dvh - 76px);display:grid}.model-rail,.inspector{background:var(--ink);min-width:0}.model-rail{border-right:1px solid var(--line-light);flex-direction:column;grid-area:models;padding:24px 16px 14px;animation:.52s cubic-bezier(.16,1,.3,1) .1s both rise-in;display:flex;position:relative;overflow:hidden}.model-rail:before{z-index:0;content:"";opacity:.18;background:repeating-radial-gradient(ellipse at 51% 47%, transparent 0 7px, var(--moss) 7.5px 8.5px);border-radius:43% 57% 52% 48%;width:265px;height:265px;position:absolute;bottom:44px;left:-103px;transform:rotate(18deg)}.rail-heading,.section-heading{z-index:1;align-items:flex-start;gap:11px;display:flex;position:relative}.rail-heading>span,.section-heading>span:first-child{color:var(--phosphor);font:500 9px/1 var(--mono);border-top:1px solid var(--phosphor);padding-top:5px}.rail-heading h2,.section-heading h2{font:400 22px/1 var(--display);letter-spacing:-.025em;margin:0}.model-list{z-index:1;gap:5px;margin-top:21px;display:grid;position:relative}.model-card{border:1px solid #0000;transition:border-color .18s,background .18s}.model-card.is-active{border-color:var(--phosphor);background:var(--phosphor-dim);box-shadow:inset 3px 0 0 var(--phosphor)}.model-select{text-align:left;width:100%;color:var(--paper);cursor:pointer;background:0 0;border:0;grid-template-columns:23px 1fr auto;gap:8px;padding:12px 8px 11px;display:grid}.model-card:not(.is-active) .model-select:hover{background:#e8dfca0e}.model-index{color:#e8dfca61;font:8px/1 var(--mono);padding-top:4px}.model-copy{gap:3px;min-width:0;display:grid}.model-title-line{justify-content:space-between;align-items:center;gap:7px;display:flex}.model-title-line strong{font:500 20px/1 var(--display)}.model-copy em{color:#e8dfca75;font:italic 10px/1.2 var(--display);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.model-copy>span:last-child{color:var(--paper-ghost);margin-top:3px;font-size:10px}.availability{font:600 7px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-light);padding:2px 4px}.availability-loaded,.availability-loading,.availability-cached{color:var(--phosphor);border-color:#b9ff4552}.availability-remote,.availability-limited{color:var(--rust);border-color:#c96f4366}.model-footprint{color:#e8dfca63;font:8px/1 var(--mono);white-space:nowrap;align-self:end}.text-action{width:calc(100% - 30px);color:var(--rust);font:8px/1 var(--mono);text-align:left;cursor:pointer;background:0 0;border:0;border-top:1px dashed #c96f4359;margin:-3px 8px 9px 30px;padding:7px 0}.text-action span{float:right}.text-action.is-status{cursor:default;text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.model-limit-reason{color:#e8dfca94;font:8px/1.35 var(--mono);margin:-4px 8px 9px 30px;display:block}.dflash-card{z-index:1;background:#111512b8;border:1px dashed #e8dfca3b;margin-top:auto;padding:13px 12px 11px;position:relative}.dflash-card.is-available{border-color:#b9ff457a}.dflash-heading{justify-content:space-between;gap:12px;display:flex}.dflash-heading h3{font:500 14px/1 var(--display);margin:7px 0 0}.experimental-stamp{color:var(--rust);font:700 7px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;border:1px solid;padding:3px 5px 2px;display:inline-block;transform:rotate(-2deg)}.switch{cursor:pointer;background:0 0;border:1px solid #e8dfca4d;border-radius:10px;width:35px;height:18px;padding:2px}.switch span{background:#e8dfca6b;border-radius:50%;width:12px;height:12px;transition:transform .17s,background .17s;display:block}.switch[aria-checked=true]{border-color:var(--phosphor)}.switch[aria-checked=true] span{background:var(--phosphor);transform:translate(17px)}.switch:disabled{opacity:.38}.dflash-card p{color:#e8dfca80;font:9px/1.45 var(--body);margin:9px 0 5px}.dflash-contract{color:#c96f43b8;font:7px/1.3 var(--mono);text-transform:uppercase;margin-bottom:11px;display:block}.dflash-axis{border-top:1px solid #e8dfca1f;justify-content:space-between;align-items:center;display:flex}.dflash-axis span{background:#e8dfca47;width:1px;height:5px;margin-top:-1px}.rail-footnote{z-index:1;color:#e8dfca4d;font:7px/1 var(--mono);letter-spacing:.03em;justify-content:space-between;gap:8px;margin-top:12px;display:flex;position:relative}.chat-surface{min-width:0;height:calc(100dvh - 76px);min-height:calc(100dvh - 76px);color:var(--ink);background:radial-gradient(ellipse at 82% 16%, transparent 0 77px, #1115120e 78px 79px, transparent 80px 89px, #1115120b 90px 91px, transparent 92px), linear-gradient(100deg, transparent 0 67%, #11151206 67.2% 67.35%, transparent 67.5%), var(--paper);grid-area:chat;grid-template-rows:auto 19px minmax(0,1fr) auto;animation:.56s cubic-bezier(.16,1,.3,1) .16s both rise-in;display:grid;position:relative;overflow:hidden}.chat-header{border-bottom:1px solid var(--line-dark);justify-content:space-between;align-items:center;gap:20px;min-height:82px;padding:17px clamp(21px,3vw,44px) 13px;display:flex}.chat-header h2{font:500 clamp(25px, 2.4vw, 37px)/1 var(--display);letter-spacing:-.045em;margin:0;display:inline}.botanical-subtitle{color:#11151275;font:italic 12px/1 var(--display);margin-left:10px}.chat-header-meta{color:#1115128c;font:8px/1 var(--mono);text-transform:uppercase;letter-spacing:.07em;grid-template-columns:repeat(2,auto);gap:5px 13px;display:grid}.header-load-button{color:var(--ink);border:1px solid var(--ink);background:var(--phosphor);font:700 7px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;grid-column:span 2;justify-self:end;padding:6px 9px}.header-load-button:disabled{opacity:.42}.live-label{color:#3d551d;grid-column:span 2;justify-self:end;align-items:center;gap:7px;display:flex}.live-label i{background:#5d7e2e;width:5px;height:5px;box-shadow:0 0 0 3px #5a782b21}.live-label.is-dormant{color:#1115127a}.live-label.is-dormant i{background:#1115125c;box-shadow:0 0 0 3px #11151217}.runtime-error{z-index:4;color:var(--paper);border:1px solid var(--rust);background:#111512f5;justify-content:space-between;align-items:center;gap:16px;padding:11px 13px;display:flex;position:absolute;top:105px;left:clamp(21px,3vw,44px);right:clamp(21px,3vw,44px);box-shadow:4px 4px #c96f433d}.runtime-error div{gap:3px;display:grid}.runtime-error strong{color:#ff9a68;font:700 8px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}.runtime-error span{font:10px/1.35 var(--mono);overflow-wrap:anywhere}.runtime-error button{font:7px/1 var(--mono);text-transform:uppercase;cursor:pointer;background:0 0;border:1px solid #e8dfca4d;flex:none;padding:5px 8px}.runtime-error button:disabled{cursor:wait;opacity:.5}.runtime-error.download-retry button{max-width:132px;line-height:1.25}.chat-ruler{color:#11151266;font:7px/1 var(--mono);background:repeating-linear-gradient(90deg,#0000 0 14px,#11151233 14px 15px) 0 100%/100% 4px no-repeat;border-bottom:1px solid #11151217;justify-content:space-between;padding-inline:clamp(21px,3vw,44px);display:flex}.transcript{scrollbar-color:#11151247 transparent;min-height:0;padding:20px clamp(21px,4vw,64px) 32px;overflow-y:auto}.transcript-date{color:#11151273;font:8px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;align-items:center;gap:10px;margin-bottom:22px;display:flex}.transcript-date:before,.transcript-date:after{content:"";background:#11151224;flex:1;height:1px}.transcript-empty{text-align:center;color:#11151280;max-width:430px;margin:12vh auto 0}.transcript-empty>span{color:#507324;font:42px/1 var(--display);display:block}.transcript-empty h3{color:var(--ink);font:400 25px/1 var(--display);margin:8px 0 6px}.transcript-empty p{margin:0;font-size:11px;line-height:1.5}.message{max-width:690px;margin-bottom:25px;animation:.43s cubic-bezier(.16,1,.3,1) both note-in}.message>header{color:#11151278;font:8px/1 var(--mono);text-transform:uppercase;letter-spacing:.07em;align-items:center;gap:8px;margin-bottom:8px;display:flex}.message>header strong{color:var(--ink)}.message>header time{margin-left:auto}.message-ordinal{color:#4d6728;min-width:22px}.message-content{font:15px/1.55 var(--body)}.message-content>p{margin:0}.markdown-content>:first-child{margin-top:0}.markdown-content>:last-child{margin-bottom:0}.markdown-content p,.markdown-content ul,.markdown-content ol,.markdown-content blockquote{margin:0 0 10px}.markdown-content ul,.markdown-content ol{padding-left:22px}.markdown-content h3,.markdown-content h4,.markdown-content h5{font-family:var(--display);margin:16px 0 7px;font-weight:500;line-height:1.1}.markdown-content blockquote{color:#111512ad;white-space:pre-wrap;border-left:2px solid #5073248c;padding-left:12px}.markdown-content code{font:.78em/1.4 var(--mono);background:#11151214;padding:1px 4px}.markdown-content pre{max-width:100%;color:var(--paper);background:var(--ink);border-left:2px solid var(--phosphor);margin:11px 0;padding:12px;position:relative;overflow:auto}.markdown-content pre code{white-space:pre;background:0 0;padding:0}.markdown-content a{color:#3f6417;text-underline-offset:2px;text-decoration-thickness:1px}.message-user .markdown-content code{background:#e8dfca1f}.reasoning-block{color:#1115129e;background:#11151209;border:1px dashed #1115123d;margin:0 0 11px;padding:8px 10px;font-size:11px}.reasoning-block summary{color:#4d6728;font:700 7px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.reasoning-block[open] summary{margin-bottom:8px}.generation-placeholder{color:#11151273;margin:0;font-style:italic}.message-error{color:#8d321b;font:9px/1.4 var(--mono);margin:9px 0 0}.message.has-error{border-color:var(--rust)}.message-assistant{border-left:2px solid var(--ink);padding-left:22px}.message-assistant .message-content>p:first-letter{float:left;color:#38511d;font:42px/.75 var(--display);margin:1px 6px 0 0}.message-user{max-width:min(78%,610px);color:var(--paper);background:var(--ink);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);margin-left:auto;padding:12px 15px 13px;box-shadow:5px 5px #1115121f}.message-user>header,.message-user>header strong{color:#e8dfca8f}.message-user .message-ordinal{color:var(--phosphor)}.message>footer{color:#1115126e;font:8px/1 var(--mono);border-top:1px dashed #11151230;gap:12px;margin-top:9px;padding-top:7px;display:flex}.stream-cursor{vertical-align:-2px;background:#507324;width:7px;height:14px;margin-left:4px;animation:.86s step-end infinite cursor-blink;display:inline-block}.tool-call{background:#1115120b;border:1px solid #1115122e;margin-top:13px}.tool-call summary{cursor:pointer;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:8px 10px;list-style:none;display:grid}.tool-call summary::-webkit-details-marker{display:none}.tool-call code{font:9px/1.4 var(--mono)}.tool-call summary>span:last-child{color:#1115127a;font:7px/1 var(--mono);text-transform:uppercase}.tool-state,.event-pip{background:var(--moss);border-radius:50%;width:6px;height:6px}.tool-state-complete,.event-complete{background:#55772c}.tool-state-running,.event-running{background:var(--phosphor);box-shadow:0 0 0 3px #5a782b26}.tool-state-error,.event-error{background:var(--rust)}.tool-call>div{border-top:1px solid #11151221;padding:9px 10px}.tool-call>div p{color:#11151294;margin:5px 0 0;font-size:10px}.composer{border-top:1px solid var(--line-dark);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);background:#d8cdb4d1;padding:10px clamp(21px,3vw,44px) 18px;position:relative;box-shadow:0 -15px 38px #1115120f}.composer:before{content:"";background:repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 12px);opacity:.23;height:5px;position:absolute;top:-5px;left:0;right:0}.composer-meta{color:#11151275;font:8px/1 var(--mono);justify-content:space-between;align-items:center;gap:12px;margin-bottom:7px;display:flex}.tool-toggle{color:#1115128a;font:700 8px/1 var(--mono);text-transform:uppercase;cursor:pointer;background:0 0;border:0;align-items:center;gap:5px;padding:0;display:flex}.tool-toggle.is-on{color:#425f1f}.regenerate-button{color:#1115128a;font:700 8px/1 var(--mono);text-transform:uppercase;cursor:pointer;background:0 0;border:0;margin-right:auto;padding:0}.regenerate-button:disabled{cursor:default;opacity:.45}.tool-toggle svg{fill:none;stroke:currentColor;stroke-width:1.3px;width:12px}.composer-field{border:1px solid var(--ink);background:#e8dfcad4;grid-template-columns:1fr auto;min-height:76px;display:grid;position:relative;box-shadow:4px 4px #1115121a}.composer-field label{color:#11151273;font:7px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;position:absolute;top:7px;left:11px}.composer-field textarea{resize:none;min-width:0;color:var(--ink);font:14px/1.4 var(--body);background:0 0;border:0;outline:none;padding:23px 13px 9px}.composer-field textarea::placeholder{color:#11151257}.send-button{min-width:82px;color:var(--ink);border:1px solid var(--ink);background:var(--phosphor);font:700 9px/1 var(--mono);text-transform:uppercase;cursor:pointer;justify-content:center;align-items:center;gap:7px;margin:7px;transition:transform .15s,box-shadow .15s,background .15s;display:flex}.send-button:hover:not(:disabled){box-shadow:3px 3px 0 var(--ink);transform:translate(-2px,-2px)}.send-button:disabled{opacity:.34}.send-button svg{fill:none;stroke:currentColor;stroke-width:1.4px;width:15px}.send-button.stop{color:var(--paper);background:var(--ink)}.send-button.stop span{background:var(--rust);width:7px;height:7px}.inspector{border-left:1px solid var(--line-light);scrollbar-color:#e8dfca2e transparent;grid-area:inspector;height:calc(100dvh - 76px);min-height:calc(100dvh - 76px);animation:.57s cubic-bezier(.16,1,.3,1) .22s both rise-in;overflow-y:auto}.inspector-section{border-bottom:1px solid var(--line-light);padding:20px 18px}.section-heading{align-items:center;margin-bottom:17px}.section-heading.compact{margin-bottom:14px}.section-heading>div{flex:1}.section-heading h2{font-size:20px}.sampling-label,.persistence{color:#e8dfca6b;font:7px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;align-items:center;gap:6px;display:flex}.sampling-label i{width:4px;height:4px}.speed-gauge{grid-template-columns:116px 1fr;align-items:center;gap:15px;display:grid}.gauge-ring{background:radial-gradient(circle, var(--ink) 0 51%, transparent 52%), conic-gradient(var(--phosphor) 0 var(--gauge), #e8dfca1c var(--gauge) 100%);border-radius:49% 51% 47% 53%;place-items:center;width:116px;height:116px;display:grid;transform:rotate(-9deg);box-shadow:inset 0 0 0 1px #e8dfca1a,0 0 30px #b9ff450e}.gauge-ring:after{content:"";border:1px dashed #e8dfca21;border-radius:45% 55% 52% 48%;width:128px;height:128px;position:absolute}.gauge-ring>div{z-index:1;justify-items:center;display:grid;position:relative;transform:rotate(9deg)}.gauge-ring strong{color:var(--phosphor);font:400 29px/1 var(--display)}.gauge-ring small{color:var(--paper-ghost);font:7px/1 var(--mono);text-transform:uppercase;margin-top:3px}.speed-gauge dl{margin:0}.speed-gauge dl div{border-bottom:1px solid var(--line-light);font:8px/1 var(--mono);justify-content:space-between;padding:7px 0;display:flex}.speed-gauge dt{color:#e8dfca6e}.speed-gauge dd{color:var(--paper);margin:0}.device-card{background:linear-gradient(90deg,#b9ff4514,#0000);border:1px solid #b9ff453b;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin:19px 0 14px;padding:10px;display:grid}.device-icon{border:1px solid #b9ff4540;align-items:flex-end;gap:3px;width:28px;height:28px;padding:5px;display:flex}.device-icon i{background:var(--phosphor);width:4px}.device-icon i:first-child{opacity:.45;height:7px}.device-icon i:nth-child(2){height:15px}.device-icon i:nth-child(3){opacity:.7;height:11px}.device-card>div{gap:3px;display:grid}.device-card small,.memory-grid small,.meter small,.download-item small{color:#e8dfca6b;font:7px/1 var(--mono);text-transform:uppercase}.device-card strong{font:500 11px/1 var(--mono)}.device-card>span:last-child{color:var(--phosphor);font:600 13px/1 var(--mono);justify-items:end;display:grid}.device-card>span:last-child small{color:#e8dfca5e;margin-top:3px;font-size:6px}.meter{margin-top:13px}.meter>div:first-child{font:8px/1 var(--mono);justify-content:space-between;margin-bottom:6px;display:flex}.meter-track{border:1px solid #e8dfca36;height:5px;padding:1px}.meter-track>span{background:repeating-linear-gradient(90deg, var(--phosphor) 0 5px, transparent 5px 7px);height:100%;display:block}.memory-grid{background:var(--line-light);grid-template-columns:1fr 1fr;gap:1px;margin-top:14px;display:grid}.memory-grid>div{background:var(--ink);gap:6px;padding:10px;display:grid}.memory-grid strong{font:500 12px/1 var(--mono)}.event-log{gap:0;margin:0;padding:0;list-style:none;display:grid;position:relative}.event-log:before{content:"";background:var(--line-light);width:1px;position:absolute;top:5px;bottom:5px;left:3px}.event-log li{grid-template-columns:8px 64px 1fr;align-items:start;gap:8px;padding:7px 0;display:grid}.event-log li.event-empty{color:#e8dfca5c;font:8px/1.4 var(--mono);padding:5px 0;display:block}.event-pip{z-index:1;border:1px solid var(--ink);margin-top:2px}.event-log time{color:#e8dfca57;font:7px/1.2 var(--mono)}.event-log div{gap:3px;display:grid}.event-log strong{font:500 9px/1 var(--mono)}.event-log small{color:#e8dfca6b;font-size:8px}.persistence{border:1px solid var(--line-light);padding:3px 5px}.persistence.is-persistent{color:var(--phosphor);border-color:#b9ff4547}.download-item{border:1px solid var(--line-light);grid-template-columns:1fr auto;gap:8px;margin-top:16px;padding:11px 10px 10px;display:grid;position:relative}.download-item>div:first-child{gap:5px;display:grid}.download-item strong{font:500 10px/1 var(--mono)}.download-state{width:fit-content;color:var(--rust);font:700 6px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}.state-downloading{color:var(--phosphor)}.download-percent{color:var(--phosphor);font:500 15px/1 var(--display)}.download-track{background:#e8dfca1a;grid-column:span 2;height:3px}.download-track span{background:var(--phosphor);height:100%;display:block;box-shadow:0 0 9px #b9ff4559}.artifact-close{border:1px solid var(--line-light);cursor:pointer;background:0 0;border-radius:50%;width:25px;height:25px}.artifact-empty{color:#e8dfca66;font:8px/1.5 var(--mono);margin:0}.artifact-pane{border:1px solid var(--line-light);background:#f8f5eb}.artifact-tabs{color:var(--paper);border-bottom:1px solid var(--line-light);background:var(--ink-raised);grid-template-columns:auto auto 1fr;align-items:center;display:grid}.artifact-tabs button{border:0;border-right:1px solid var(--line-light);font:7px/1 var(--mono);text-transform:uppercase;cursor:pointer;background:0 0;padding:7px 9px}.artifact-tabs button[aria-selected=true]{color:var(--ink);background:var(--phosphor)}.artifact-tabs span{color:#e8dfca73;font:7px/1 var(--mono);text-align:right;text-overflow:ellipsis;white-space:nowrap;padding:0 8px;overflow:hidden}.artifact-pane iframe{background:#fff;border:0;width:100%;height:260px;display:block}.artifact-running{position:relative}.artifact-running>button{z-index:2;color:var(--paper);border:1px solid var(--rust);font:7px/1 var(--mono);text-transform:uppercase;cursor:pointer;background:#111512e6;padding:5px 7px;position:absolute;top:7px;right:7px}.artifact-launch{min-height:180px;color:var(--ink);text-align:center;align-content:center;justify-items:center;gap:13px;padding:20px;display:grid}.artifact-launch p{color:#1115129e;max-width:250px;font:9px/1.5 var(--mono);margin:0}.artifact-launch button{color:var(--ink);border:1px solid var(--ink);background:var(--phosphor);font:700 7px/1 var(--mono);text-transform:uppercase;cursor:pointer;padding:8px 10px}.artifact-code{height:260px;color:var(--paper);font:8px/1.45 var(--mono);white-space:pre-wrap;background:#0d100e;margin:0;padding:10px;overflow:auto}.settings-layer{z-index:50;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#080b09a3;justify-content:flex-end;animation:.16s both station-in;display:flex;position:fixed;inset:0}.settings-sheet{width:min(430px,100%);min-height:100%;color:var(--paper);border-left:1px solid var(--phosphor);background:repeating-radial-gradient(ellipse at 104% 101%, transparent 0 13px, #b9ff450e 13.5px 14.5px), var(--ink);padding:30px 27px;animation:.3s cubic-bezier(.16,1,.3,1) both sheet-in;overflow-y:auto;box-shadow:-24px 0 70px #00000052}.settings-sheet>header{border-bottom:1px solid var(--line-light);justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:37px;padding-bottom:20px;display:flex}.settings-sheet h2{font:400 31px/1 var(--display);margin:0}.sheet-close{border:1px solid var(--line-light);width:35px;height:35px;font:300 22px/1 var(--body);cursor:pointer;background:0 0;border-radius:50%}.sheet-close:hover{color:var(--phosphor);border-color:var(--phosphor)}.setting-group{border-bottom:1px solid var(--line-light);grid-template-columns:24px 1fr auto;align-items:center;gap:12px;padding:15px 0;display:grid}.setting-number{color:var(--phosphor);font:8px/1 var(--mono)}.setting-group>div,.range-setting>span:first-child{gap:5px;display:grid}.setting-group small,.range-setting small{color:#e8dfca6e;font:7px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}.setting-group strong,.range-setting strong{font:500 13px/1 var(--mono)}.setting-locked{color:#e8dfca5c;font:7px/1 var(--mono);text-transform:uppercase}.setting-select select{max-width:112px;color:var(--paper);border:1px solid var(--line-light);background:var(--ink-raised);font:8px/1 var(--mono);border-radius:0;padding:6px 7px}.range-setting{gap:13px;margin-top:29px;display:grid}.range-setting>span:first-child{justify-content:space-between;align-items:end;display:flex}.range-setting input{appearance:none;background:linear-gradient(90deg, var(--phosphor) 0 35%, #e8dfca1c 35%);border:1px solid #e8dfca3d;border-radius:0;width:100%;height:4px;margin:0}.range-setting:first-of-type input{background:var(--phosphor)}.range-setting input::-webkit-slider-thumb{appearance:none;border:2px solid var(--ink);background:var(--phosphor);width:12px;height:18px;box-shadow:0 0 0 1px var(--phosphor);cursor:grab}.range-setting input::-moz-range-thumb{border:2px solid var(--ink);background:var(--phosphor);width:10px;height:16px;box-shadow:0 0 0 1px var(--phosphor);cursor:grab;border-radius:0}.range-ticks{pointer-events:none;justify-content:space-between;margin-top:-13px;display:flex}.range-limits{color:#e8dfca59;font:7px/1 var(--mono);justify-content:space-between;display:flex}.range-limits i{font-style:normal}.system-prompt-setting{gap:9px;margin-top:29px;display:grid}.system-prompt-setting>span{color:#e8dfca6e;font:7px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;justify-content:space-between;display:flex}.system-prompt-setting textarea{resize:vertical;color:var(--paper);border:1px solid var(--line-light);background:var(--ink-raised);font:10px/1.45 var(--mono);padding:10px}.settings-actions{grid-template-columns:1fr 1fr;gap:7px;margin-top:29px;display:grid}.settings-actions button{color:var(--paper);border:1px solid var(--line-light);font:7px/1.2 var(--mono);text-transform:uppercase;cursor:pointer;background:0 0;padding:9px}.settings-actions button:hover{color:var(--phosphor);border-color:var(--phosphor)}.settings-actions .danger-action{color:#e78a62;border-color:#c96f4373;grid-column:span 2}.boot-screen{min-height:100dvh;color:var(--paper);background:var(--ink);justify-content:center;align-items:center;gap:18px;padding:24px;display:flex}.boot-screen h1{color:var(--phosphor);font:400 34px/1 var(--display);margin:0}.boot-screen p:last-child{color:var(--paper-ghost);font:10px/1.5 var(--mono)}.range-ticks i{background:#e8dfca40;width:1px;height:5px}.settings-note{background:#b9ff450f;border:1px solid #b9ff4540;align-items:flex-start;gap:13px;margin-top:42px;padding:15px;display:flex}.settings-note .signal-dot{flex:0 0 7px;margin-top:6px}.settings-note p{color:#e8dfca94;margin:0;font-size:10px;line-height:1.5}.settings-note strong{color:var(--phosphor)}@keyframes station-in{0%{opacity:0}to{opacity:1}}@keyframes rise-in{0%{opacity:0;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}@keyframes note-in{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes cursor-blink{0%,52%{opacity:1}53%,to{opacity:0}}@keyframes sheet-in{0%{opacity:0;transform:translate(34px)}to{opacity:1;transform:translate(0)}}@media (width<=1279px){.station-header{grid-template-columns:minmax(320px,1fr) auto auto}.local-promise{min-width:auto}.local-promise small{display:none}.workspace-grid{grid-template-columns:260px minmax(500px,1fr);grid-template-areas:"models chat""inspector inspector"}.model-rail,.chat-surface{height:calc(100dvh - 76px);min-height:calc(100dvh - 76px)}.inspector{border-top:1px solid var(--phosphor);border-left:0;grid-template-columns:repeat(2,minmax(0,1fr));height:auto;min-height:auto;display:grid;overflow:visible}.inspector-section{border-right:1px solid var(--line-light);border-bottom:0}}@media (width<=820px){.station-header{min-height:70px;display:block}.brand-block{padding:11px 70px 11px 15px}.brand-mark{flex-basis:36px;width:36px;height:36px}.local-promise{border:0;border-top:1px solid var(--line-light);min-height:31px;padding:0 16px}.header-actions{position:absolute;top:10px;right:0}.station-clock{display:none}.workspace-grid{display:block}.model-rail,.chat-surface,.inspector{height:auto;min-height:auto}.model-rail{border-right:0;border-bottom:1px solid var(--phosphor);padding:18px 15px;display:block}.model-list{scroll-snap-type:x mandatory;gap:7px;padding-bottom:7px;display:flex;overflow-x:auto}.model-card{scroll-snap-align:start;min-width:205px}.dflash-card{margin-top:13px}.rail-footnote{display:none}.chat-surface{grid-template-rows:auto 19px minmax(450px,auto) auto;display:grid;overflow:visible}.transcript{padding-inline:22px;overflow:visible}.chat-header{padding:17px 19px}.chat-header-meta span:not(.live-label){display:none}.chat-header-meta .header-load-button{display:block}.live-label{grid-column:1}.composer{z-index:5;padding-inline:14px;position:sticky;bottom:0}.inspector{border-top:1px solid var(--phosphor);display:block}.inspector-section{border-right:0;border-bottom:1px solid var(--line-light)}}@media (width<=520px){.brand-block h1{font-size:24px}.brand-block .eyebrow,.local-promise strong{font-size:7px}.chat-header{align-items:flex-end}.botanical-subtitle{margin:4px 0 0;display:block}.message-user{max-width:91%}.composer-meta>span{display:none}.composer-field{grid-template-columns:1fr;padding-bottom:50px}.send-button{height:35px;position:absolute;bottom:0;right:0}.speed-gauge{grid-template-columns:106px 1fr}.gauge-ring{width:102px;height:102px}.gauge-ring:after{width:113px;height:113px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.bench-page{min-height:100dvh;color:var(--ink);background:var(--paper)}.bench-masthead{min-height:86px;color:var(--paper);border-bottom:1px solid var(--phosphor);background:var(--ink);grid-template-columns:minmax(310px,1fr) minmax(360px,1.2fr) auto;align-items:stretch;display:grid}.bench-masthead .brand-block h1{color:var(--paper)}.bench-masthead-note{border-inline:1px solid var(--line-light);background:linear-gradient(110deg,#b9ff4517,#0000 72%);flex-direction:column;justify-content:center;gap:5px;padding:14px 28px;display:flex}.bench-masthead-note strong{color:var(--phosphor);font:700 9px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase}.bench-masthead-note span{color:#e8dfca8c;max-width:520px;font:10px/1.35 var(--body)}.bench-return{color:var(--paper);font:700 8px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:8px;padding:0 25px;text-decoration:none;display:flex}.bench-return:hover{color:var(--phosphor)}.bench-layout{grid-template-columns:minmax(275px,330px) minmax(0,1fr);min-height:calc(100dvh - 86px);display:grid}.bench-controls{color:var(--paper);border-right:1px solid var(--phosphor);background:repeating-radial-gradient(ellipse at -12% 102%, transparent 0 24px, #b9ff450b 25px 26px), var(--ink);padding:28px 22px}.bench-controls h2{font:400 30px/1 var(--display);letter-spacing:-.03em;margin:0}.bench-control-intro{color:#e8dfca80;margin:9px 0 22px;font-size:11px;line-height:1.45}.bench-controls form{gap:15px;display:grid}.bench-field{gap:6px;min-width:0;display:grid}.bench-field>span{color:#e8dfcac7;font:700 8px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}.bench-field select,.bench-field input{width:100%;min-width:0;height:39px;color:var(--paper);background:var(--ink-raised);font:10px/1 var(--mono);border:1px solid #e8dfca38;border-radius:0;outline:0;padding:0 10px}.bench-field input::placeholder{color:#e8dfca40}.bench-field select:disabled,.bench-field input:disabled{opacity:.5}.bench-field small{color:#e8dfca59;font:8px/1.2 var(--mono)}.bench-field-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.bench-experimental{background:#c96f430d;border:1px dashed #c96f437a;padding:11px}.bench-experimental summary{color:#e19a76;font:700 8px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;cursor:pointer}.bench-experimental>p{color:#e8dfca75;margin:10px 0;font-size:9px;line-height:1.4}.bench-locks{color:#e8dfca70;font:7px/1.35 var(--mono);gap:5px;margin:10px 0 0;display:grid}.bench-locks div{justify-content:space-between;gap:8px;display:flex}.bench-locks dt,.bench-locks dd{margin:0}.bench-locks dt{color:#e8dfcab8}.bench-gate{border-left:2px solid var(--rust);background:#c96f4314;gap:5px;padding:10px;display:grid}.bench-gate.pass{border-color:var(--phosphor);background:var(--phosphor-dim)}.bench-gate strong{color:#ff9a68;font:700 8px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}.bench-gate.pass strong{color:var(--phosphor)}.bench-gate span{color:#e8dfca80;font:8px/1.4 var(--mono);overflow-wrap:anywhere}.bench-run-actions{grid-template-columns:1fr auto;gap:8px;display:grid}.bench-run-button,.bench-stop-button,.bench-section-heading button{border:1px solid var(--ink);background:var(--phosphor);min-height:38px;font:800 8px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:0;padding:0 13px}.bench-run-button:disabled{opacity:.35}.bench-stop-button{color:#ffb08a;border-color:var(--rust);background:0 0}.bench-workbench{background:linear-gradient(90deg, #1115120b 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(#1115120a 1px, transparent 1px) 0 0 / 22px 22px, var(--paper);min-width:0;padding:clamp(26px,4vw,58px)}.bench-hero{border-bottom:1px solid var(--line-dark);grid-template-columns:minmax(320px,1.3fr) minmax(260px,.7fr);align-items:end;gap:34px;padding-bottom:29px;display:grid}.bench-hero h2{max-width:690px;font:400 clamp(42px, 6vw, 82px)/.84 var(--display);letter-spacing:-.065em;margin:0}.bench-hero h2 em{color:#4f7125;font-weight:400}.bench-hero>p{color:#11151294;max-width:430px;margin:0;font-size:11px;line-height:1.55}.bench-progress{gap:8px;padding:16px 0;display:grid}.bench-progress>div{font:8px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;justify-content:space-between;gap:20px;display:flex}.bench-progress>div span{color:#11151273}.bench-progress-track{background:#11151221;height:3px}.bench-progress-track i{background:#527426;height:100%;transition:width .18s;display:block}.bench-error{color:var(--paper);border-left:3px solid var(--rust);background:var(--ink);gap:5px;margin-bottom:18px;padding:12px 14px;display:grid}.bench-error strong{color:#ff9a68;font:700 8px/1 var(--mono);letter-spacing:.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{justify-content:space-between;align-items:end;gap:20px;margin-bottom:13px;display:flex}.bench-section-heading h3,.bench-output h3{font:500 24px/1 var(--display);margin:0}.bench-section-heading button{min-height:31px;color:var(--paper);border-color:var(--ink);background:var(--ink)}.bench-core-sample{border:1px solid var(--ink);background:var(--paper-deep);grid-template-columns:repeat(4,minmax(0,1fr));display:grid;position:relative;overflow:hidden}.bench-core-sample:before{content:"";pointer-events:none;opacity:.35;background:repeating-radial-gradient(#0000 0 34px,#1115122b 35px 36px);position:absolute;inset:-130% -5%}.bench-core-sample article{background:#e8dfca91;border-right:1px solid #11151242;flex-direction:column;justify-content:space-between;min-height:128px;padding:17px;display:flex;position:relative}.bench-core-sample article:nth-child(2n){background:#d8cdb499}.bench-core-sample article:last-child{color:var(--paper);background:#111512e8;border-right:0}.bench-core-sample article>span{font:800 8px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}.bench-core-sample article strong{font:400 clamp(28px, 3vw, 43px)/1 var(--display);letter-spacing:-.04em;margin-block:auto}.bench-core-sample article small{color:#11151280;font:7px/1.2 var(--mono);text-transform:uppercase}.bench-core-sample article:last-child small{color:#e8dfca7a}.bench-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px;display:grid}.bench-data-card{border:1px solid var(--line-dark);background:#e8dfcaad;padding:16px}.bench-runtime-card,.bench-tuning-card{grid-column:span 2}.bench-data-card dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px;margin:0;display:grid}.bench-runtime-card dl{grid-template-columns:minmax(180px,1.5fr) repeat(4,minmax(100px,.7fr))}.bench-tuning-card dl{grid-template-columns:repeat(4,minmax(0,1fr))}.bench-data-card dl div{border-top:1px solid #11151221;gap:4px;min-width:0;padding-top:8px;display:grid}.bench-data-card dt{color:#11151273;font:7px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase}.bench-data-card dd{min-width:0;font:500 16px/1.2 var(--body);text-overflow:ellipsis;white-space:nowrap;margin:0;overflow:hidden}.bench-output{border:1px dashed #1115124d;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;margin-top:12px;padding:21px;display:grid}.bench-output>div:last-child{border-left:1px solid var(--line-dark);padding-left:34px}.bench-output p:not(.eyebrow){color:#11151299;white-space:pre-wrap;margin:8px 0 0;font-size:11px;line-height:1.5}@media (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 #11151242}.bench-runtime-card dl{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=760px){.bench-masthead{align-items:center;display:flex}.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 (width<=480px){.bench-masthead .brand-mark{display:none}.bench-core-sample,.bench-data-card dl,.bench-runtime-card dl,.bench-tuning-card dl{grid-template-columns:1fr}.bench-core-sample article{border-bottom:1px solid #11151242;border-right:0;min-height:105px}.bench-core-sample article:last-child{border-bottom:0}}

dist/assets/index-Dn6W9Rfz.js DELETED Viewed

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

dist/assets/index-DnMbdiUB.css ADDED Viewed

	@@ -0,0 +1 @@

+ :root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#111512;--ink-raised:#191e1a;--ink-soft:#252b25;--paper:#e8dfca;--paper-deep:#d8cdb4;--paper-ghost:#e8dfca9e;--phosphor:#b9ff45;--phosphor-dim:#b9ff4529;--moss:#6f8062;--rust:#c96f43;--line-light:#e8dfca24;--line-dark:#1115122e;--display:"Bodoni 72", Didot, "Iowan Old Style", Baskerville, serif;--body:"Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;--mono:"Berkeley Mono", Iosevka, "SFMono-Regular", Consolas, monospace;--type-utility:clamp(.6875rem, .15vw + .65rem, .8125rem);--type-caption:clamp(.75rem, .18vw + .7rem, .875rem);--type-body:clamp(1rem, .22vw + .95rem, 1.125rem);--type-heading:clamp(1.75rem, 1.15vw + 1.45rem, 2.5rem);font-family:var(--body);font-synthesis:none;text-rendering:optimizelegibility}*{box-sizing:border-box}html{background:var(--ink)}body{background:linear-gradient(90deg, #1115120f 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(#1115120b 1px, transparent 1px) 0 0 / 22px 22px, var(--paper);min-width:320px;min-height:100vh;color:var(--paper);font-size:var(--type-body);margin:0}button,textarea,select{font:inherit}button{color:inherit}button:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--phosphor);outline-offset:3px}button:disabled{cursor:not-allowed}::selection{color:var(--ink);background:var(--phosphor)}.station-frame{isolation:isolate;min-height:100dvh;animation:.58s cubic-bezier(.16,1,.3,1) both station-in}.station-frame:before{z-index:20;pointer-events:none;content:"";opacity:.14;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");position:fixed;inset:0}.station-header{background:var(--ink);border-bottom:1px solid var(--phosphor);z-index:10;grid-template-columns:minmax(330px,1fr) auto minmax(220px,1fr);align-items:stretch;min-height:76px;display:grid;position:relative;box-shadow:0 12px 38px #11151238}.brand-block{align-items:center;gap:14px;padding:12px 24px;display:flex}.brand-block h1{font:400 clamp(25px, 2vw, 34px) / .9 var(--display);letter-spacing:-.035em;margin:0}.brand-block h1 i{color:var(--phosphor);font-weight:400}.brand-mark{background:repeating-radial-gradient(at 52% 62%,#0000 0 4px,#b9ff456b 4.5px 5px);border:1px solid #b9ff457a;border-radius:50%;flex:0 0 42px;place-items:center;width:42px;height:42px;display:grid;transform:rotate(-11deg)}.brand-mark:before,.brand-mark:after,.brand-mark span:before,.brand-mark span:after{content:"";background:var(--phosphor);transform-origin:bottom;width:1px;position:absolute}.brand-mark:before{height:25px;transform:translate(-1px,4px)rotate(0)}.brand-mark:after{height:13px;transform:translate(4px,-2px)rotate(43deg)}.brand-mark span:before{height:11px;transform:translate(-5px,-1px)rotate(-47deg)}.brand-mark span:after{height:8px;transform:translate(3px,-9px)rotate(72deg)}.eyebrow{color:#e8dfca85;font:600 var(--type-utility)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;margin:0 0 5px}.eyebrow.ink{color:#11151285}.local-promise{border-inline:1px solid var(--line-light);background:linear-gradient(115deg,#b9ff4514,#0000 66%);align-items:center;gap:11px;min-width:360px;padding:0 28px;display:flex}.signal-dot,.live-label i,.sampling-label i{background:var(--phosphor);width:7px;height:7px;box-shadow:0 0 0 5px var(--phosphor-dim), 0 0 17px #b9ff459e;border-radius:50%;display:inline-block}.local-promise span:last-child{gap:3px;display:grid}.local-promise strong{color:var(--phosphor);font:600 var(--type-caption)/1 var(--mono);letter-spacing:.13em;text-transform:uppercase}.local-promise small{color:var(--paper-ghost);font:var(--type-caption)/1.25 var(--body)}.header-actions{justify-self:end;align-items:center;padding-right:18px;display:flex}.station-clock{color:var(--paper-ghost);font-family:var(--mono);justify-items:end;padding:0 18px;display:grid}.station-clock small{font-size:var(--type-utility);letter-spacing:.18em}.station-clock span{font-size:var(--type-caption);letter-spacing:.09em;margin-top:4px}.icon-button{cursor:pointer;background:0 0;border:1px solid #e8dfca3d;border-radius:50%;place-items:center;width:44px;height:44px;transition:color .16s,border-color .16s,transform .16s;display:grid}.icon-button:hover{color:var(--phosphor);border-color:var(--phosphor);transform:rotate(-7deg)}.icon-button svg{fill:none;stroke:currentColor;stroke-width:1.4px;width:18px}.workspace-grid{grid-template-columns:clamp(280px,19vw,340px) minmax(560px,1fr) clamp(340px,23vw,410px);grid-template-areas:"models chat inspector";min-height:calc(100dvh - 76px);display:grid}.model-rail,.inspector{background:var(--ink);min-width:0}.model-rail{border-right:1px solid var(--line-light);flex-direction:column;grid-area:models;padding:24px 16px 14px;animation:.52s cubic-bezier(.16,1,.3,1) .1s both rise-in;display:flex;position:relative;overflow:hidden}.model-rail:before{z-index:0;content:"";opacity:.18;background:repeating-radial-gradient(ellipse at 51% 47%, transparent 0 7px, var(--moss) 7.5px 8.5px);border-radius:43% 57% 52% 48%;width:265px;height:265px;position:absolute;bottom:44px;left:-103px;transform:rotate(18deg)}.rail-heading,.section-heading{z-index:1;align-items:flex-start;gap:11px;display:flex;position:relative}.rail-heading>span,.section-heading>span:first-child{color:var(--phosphor);font:500 var(--type-utility)/1 var(--mono);border-top:1px solid var(--phosphor);padding-top:5px}.rail-heading h2,.section-heading h2{font:400 26px/1 var(--display);letter-spacing:-.025em;margin:0}.model-list{z-index:1;gap:5px;margin-top:21px;display:grid;position:relative}.model-card{border:1px solid #0000;transition:border-color .18s,background .18s}.model-card.is-active{border-color:var(--phosphor);background:var(--phosphor-dim);box-shadow:inset 3px 0 0 var(--phosphor)}.model-select{text-align:left;width:100%;min-height:76px;color:var(--paper);cursor:pointer;background:0 0;border:0;grid-template-columns:23px 1fr auto;gap:8px;padding:13px 9px 12px;display:grid}.model-card:not(.is-active) .model-select:hover{background:#e8dfca0e}.model-index{color:#e8dfca61;font:var(--type-utility)/1 var(--mono);padding-top:4px}.model-copy{gap:3px;min-width:0;display:grid}.model-title-line{justify-content:space-between;align-items:center;gap:7px;display:flex}.model-title-line strong{font:500 24px/1 var(--display)}.model-copy em{color:#e8dfca75;font:italic var(--type-caption)/1.2 var(--display);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.model-copy>span:last-child{color:var(--paper-ghost);font-size:var(--type-caption);margin-top:3px}.availability{font:600 var(--type-utility)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-light);padding:2px 4px}.availability-loaded,.availability-loading,.availability-cached{color:var(--phosphor);border-color:#b9ff4552}.availability-remote,.availability-limited{color:var(--rust);border-color:#c96f4366}.model-footprint{color:#e8dfca63;font:var(--type-utility)/1 var(--mono);white-space:nowrap;align-self:end}.model-limit-reason{color:#e8dfca94;font:var(--type-utility)/1.35 var(--mono);margin:-4px 8px 9px 30px;display:block}.rail-footnote{z-index:1;color:#e8dfca4d;font:var(--type-utility)/1.2 var(--mono);letter-spacing:.03em;justify-content:space-between;gap:8px;margin-top:auto;display:flex;position:relative}.chat-surface{min-width:0;height:calc(100dvh - 76px);min-height:calc(100dvh - 76px);color:var(--ink);background:radial-gradient(ellipse at 82% 16%, transparent 0 77px, #1115120e 78px 79px, transparent 80px 89px, #1115120b 90px 91px, transparent 92px), linear-gradient(100deg, transparent 0 67%, #11151206 67.2% 67.35%, transparent 67.5%), var(--paper);grid-area:chat;grid-template-rows:auto 19px minmax(0,1fr) auto;animation:.56s cubic-bezier(.16,1,.3,1) .16s both rise-in;display:grid;position:relative;overflow:hidden}.chat-header{border-bottom:1px solid var(--line-dark);justify-content:space-between;align-items:center;gap:20px;min-height:82px;padding:17px clamp(21px,3vw,44px) 13px;display:flex}.chat-header h2{font:500 var(--type-heading)/1 var(--display);letter-spacing:-.045em;margin:0;display:inline}.botanical-subtitle{color:#11151275;font:italic var(--type-caption)/1 var(--display);margin-left:10px}.chat-header-meta{color:#1115128c;font:var(--type-utility)/1.2 var(--mono);text-transform:uppercase;letter-spacing:.07em;grid-template-columns:repeat(2,auto);gap:5px 13px;display:grid}.live-label{color:#3d551d;grid-column:span 2;justify-self:end;align-items:center;gap:7px;display:flex}.live-label i{background:#5d7e2e;width:5px;height:5px;box-shadow:0 0 0 3px #5a782b21}.live-label.is-dormant{color:#1115127a}.live-label.is-dormant i{background:#1115125c;box-shadow:0 0 0 3px #11151217}.runtime-error{z-index:4;color:var(--paper);border:1px solid var(--rust);background:#111512f5;justify-content:space-between;align-items:center;gap:16px;padding:11px 13px;display:flex;position:absolute;top:105px;left:clamp(21px,3vw,44px);right:clamp(21px,3vw,44px);box-shadow:4px 4px #c96f433d}.runtime-error div{gap:3px;display:grid}.runtime-error strong{color:#ff9a68;font:700 var(--type-utility)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}.runtime-error span{font:var(--type-caption)/1.35 var(--mono);overflow-wrap:anywhere}.runtime-error button{min-height:44px;font:var(--type-utility)/1.2 var(--mono);text-transform:uppercase;cursor:pointer;background:0 0;border:1px solid #e8dfca4d;flex:none;padding:5px 8px}.runtime-error button:disabled{cursor:wait;opacity:.5}.runtime-error.download-retry button{max-width:132px;line-height:1.25}.chat-ruler{color:#11151266;font:var(--type-utility)/1 var(--mono);background:repeating-linear-gradient(90deg,#0000 0 14px,#11151233 14px 15px) 0 100%/100% 4px no-repeat;border-bottom:1px solid #11151217;justify-content:space-between;padding-inline:clamp(21px,3vw,44px);display:flex}.transcript{scrollbar-color:#11151247 transparent;min-height:0;padding:20px clamp(21px,4vw,64px) 32px;overflow-y:auto}.transcript-date{color:#11151273;font:var(--type-utility)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;align-items:center;gap:10px;margin-bottom:22px;display:flex}.transcript-date:before,.transcript-date:after{content:"";background:#11151224;flex:1;height:1px}.transcript-empty{text-align:center;color:#11151280;max-width:430px;margin:12vh auto 0}.transcript-empty>span{color:#507324;font:42px/1 var(--display);display:block}.transcript-empty h3{color:var(--ink);font:400 25px/1 var(--display);margin:8px 0 6px}.transcript-empty p{font-size:var(--type-body);margin:0;line-height:1.5}.message{max-width:690px;margin-bottom:25px;animation:.43s cubic-bezier(.16,1,.3,1) both note-in}.message>header{color:#11151278;font:var(--type-utility)/1.2 var(--mono);text-transform:uppercase;letter-spacing:.07em;align-items:center;gap:8px;margin-bottom:8px;display:flex}.message>header strong{color:var(--ink)}.message>header time{margin-left:auto}.message-ordinal{color:#4d6728;min-width:22px}.message-content{font:var(--type-body)/1.58 var(--body)}.message-content>p{margin:0}.markdown-content>:first-child{margin-top:0}.markdown-content>:last-child{margin-bottom:0}.markdown-content p,.markdown-content ul,.markdown-content ol,.markdown-content blockquote{margin:0 0 10px}.markdown-content ul,.markdown-content ol{padding-left:22px}.markdown-content h3,.markdown-content h4,.markdown-content h5{font-family:var(--display);margin:16px 0 7px;font-weight:500;line-height:1.1}.markdown-content blockquote{color:#111512ad;white-space:pre-wrap;border-left:2px solid #5073248c;padding-left:12px}.markdown-content code{font:.78em/1.4 var(--mono);background:#11151214;padding:1px 4px}.markdown-content pre{max-width:100%;color:var(--paper);background:var(--ink);border-left:2px solid var(--phosphor);margin:11px 0;padding:12px;position:relative;overflow:auto}.markdown-content pre code{white-space:pre;background:0 0;padding:0}.markdown-content a{color:#3f6417;text-underline-offset:2px;text-decoration-thickness:1px}.message-user .markdown-content code{background:#e8dfca1f}.reasoning-block{color:#1115129e;font-size:var(--type-caption);background:#11151209;border:1px dashed #1115123d;margin:0 0 11px;padding:8px 10px}.reasoning-block summary{color:#4d6728;font:700 var(--type-utility)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.reasoning-block[open] summary{margin-bottom:8px}.generation-placeholder{color:#11151273;margin:0;font-style:italic}.message-error{color:#8d321b;font:var(--type-caption)/1.4 var(--mono);margin:9px 0 0}.message.has-error{border-color:var(--rust)}.message-assistant{border-left:2px solid var(--ink);padding-left:22px}.message-assistant .message-content>p:first-letter{float:left;color:#38511d;font:42px/.75 var(--display);margin:1px 6px 0 0}.message-user{max-width:min(78%,610px);color:var(--paper);background:var(--ink);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);margin-left:auto;padding:12px 15px 13px;box-shadow:5px 5px #1115121f}.message-user>header,.message-user>header strong{color:#e8dfca8f}.message-user .message-ordinal{color:var(--phosphor)}.message>footer{color:#1115126e;font:var(--type-utility)/1.2 var(--mono);border-top:1px dashed #11151230;gap:12px;margin-top:9px;padding-top:7px;display:flex}.stream-cursor{vertical-align:-2px;background:#507324;width:7px;height:14px;margin-left:4px;animation:.86s step-end infinite cursor-blink;display:inline-block}.tool-call{background:#1115120b;border:1px solid #1115122e;margin-top:13px}.tool-call summary{cursor:pointer;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:8px 10px;list-style:none;display:grid}.tool-call summary::-webkit-details-marker{display:none}.tool-call code{font:var(--type-caption)/1.4 var(--mono)}.tool-call summary>span:last-child{color:#1115127a;font:var(--type-utility)/1 var(--mono);text-transform:uppercase}.tool-state,.event-pip{background:var(--moss);border-radius:50%;width:6px;height:6px}.tool-state-complete,.event-complete{background:#55772c}.tool-state-running,.event-running{background:var(--phosphor);box-shadow:0 0 0 3px #5a782b26}.tool-state-error,.event-error{background:var(--rust)}.tool-call>div{border-top:1px solid #11151221;padding:9px 10px}.tool-call>div p{color:#11151294;font-size:var(--type-caption);margin:5px 0 0}.composer{border-top:1px solid var(--line-dark);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);background:#d8cdb4d1;padding:12px clamp(21px,3vw,44px) 18px;position:relative;box-shadow:0 -15px 38px #1115120f}.composer:before{content:"";background:repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 12px);opacity:.23;height:5px;position:absolute;top:-5px;left:0;right:0}.composer-activity{height:164px;color:var(--paper);background:linear-gradient(105deg, #b9ff4512, transparent 58%), var(--ink);border:1px solid #111512d1;grid-template-rows:24px 26px 40px 34px;gap:6px;margin-bottom:10px;padding:11px 12px;display:grid;overflow:hidden;box-shadow:4px 4px #1115121f}.activity-stage-line{grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;gap:6px;display:grid}.activity-stage-line span{color:#e8dfca57;min-width:0;font:700 var(--type-utility)/1 var(--mono);letter-spacing:.04em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;border-top:1px solid #e8dfca24;align-items:center;gap:5px;padding-top:5px;display:flex;overflow:hidden}.activity-stage-line i{border:1px solid;border-radius:50%;flex:0 0 6px;width:6px;height:6px}.activity-stage-line span.is-complete,.activity-stage-line span.is-current{color:var(--phosphor);border-color:#b9ff4585}.activity-stage-line span.is-complete i{background:var(--phosphor)}.activity-stage-line span.is-current i{box-shadow:0 0 0 4px var(--phosphor-dim)}.activity-status,.activity-status>div{align-items:center;display:flex}.activity-status{border-bottom:1px solid var(--line-light);min-width:0;font:var(--type-utility)/1 var(--mono);justify-content:space-between;gap:12px}.activity-status>div{gap:8px;min-width:0}.activity-status strong{color:var(--paper);letter-spacing:.04em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-weight:600;overflow:hidden}.activity-status>span{color:#e8dfca80;flex:none}.activity-pulse{background:#e8dfca59;border-radius:50%;flex:0 0 7px;width:7px;height:7px}.composer-activity.is-loading .activity-pulse,.composer-activity.is-inference .activity-pulse{background:var(--phosphor);box-shadow:0 0 0 4px var(--phosphor-dim);animation:1.15s ease-in-out infinite activity-pulse}.load-live-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:12px;display:grid}.activity-track-block,.live-metric{gap:6px;min-width:0;display:grid}.activity-track-block>div,.live-metric>div{font:var(--type-utility)/1 var(--mono);justify-content:space-between;align-items:baseline;gap:8px;display:flex}.activity-track-block span,.live-metric span,.activity-memory span{color:#e8dfca75;text-transform:uppercase}.activity-track-block small,.live-metric small{color:#e8dfca80;font-size:inherit}.activity-memory{min-width:86px;font:var(--type-utility)/1 var(--mono);justify-items:end;gap:6px;display:grid}.activity-memory strong{color:var(--phosphor);font-size:var(--type-caption);font-weight:600}.activity-track{background:#e8dfca0e;border:1px solid #e8dfca2e;height:5px;overflow:hidden}.activity-track>span{background:repeating-linear-gradient(90deg, var(--phosphor) 0 7px, transparent 7px 9px);height:100%;transition:width .12s linear;display:block;box-shadow:0 0 10px #b9ff4557}.inference-live-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.live-metric{border:1px solid var(--line-light);opacity:.64;padding:5px 8px 6px}.live-metric.is-active{opacity:1;background:#b9ff450f;border-color:#b9ff457a}.live-metric strong{color:var(--phosphor);font-size:var(--type-caption);margin-left:auto;font-weight:600}.shard-strip{grid-template-columns:repeat(8,minmax(0,1fr));align-items:end;gap:5px;min-width:0;display:grid}.shard-strip.is-empty{border-top:1px dashed var(--line-light);align-items:center;display:flex}.shard-placeholder{color:#e8dfca52;font:var(--type-utility)/1.2 var(--mono)}.shard-cell{opacity:.55;gap:5px;min-width:0;display:grid}.shard-cell.state-downloading,.shard-cell.state-verifying,.shard-cell.state-complete,.shard-cell.state-cached{opacity:1}.shard-cell>span{color:#e8dfca7a;font:var(--type-utility)/1 var(--mono);justify-content:space-between;gap:3px;display:flex}.shard-cell b{color:var(--paper);font-weight:600}.shard-cell small{font-size:inherit;text-overflow:ellipsis;overflow:hidden}.composer-meta{color:#11151275;min-height:24px;font:var(--type-utility)/1 var(--mono);justify-content:space-between;align-items:center;gap:12px;margin-bottom:7px;display:flex}.tool-toggle{color:#1115128a;min-height:32px;font:700 var(--type-utility)/1 var(--mono);text-transform:uppercase;cursor:pointer;background:0 0;border:0;align-items:center;gap:5px;padding:0 2px;display:flex}.tool-toggle.is-on{color:#425f1f}.regenerate-button{color:#1115128a;min-height:32px;font:700 var(--type-utility)/1 var(--mono);text-transform:uppercase;cursor:pointer;background:0 0;border:0;margin-right:auto;padding:0 2px}.regenerate-button:disabled{cursor:default;opacity:.45}.tool-toggle svg{fill:none;stroke:currentColor;stroke-width:1.3px;width:12px}.composer-field{border:1px solid var(--ink);background:#e8dfcad4;grid-template-columns:1fr auto;min-height:84px;display:grid;position:relative;box-shadow:4px 4px #1115121a}.composer-field label{color:#11151273;font:var(--type-utility)/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;position:absolute;top:7px;left:11px}.composer-field textarea{resize:none;min-width:0;color:var(--ink);font:var(--type-body)/1.45 var(--body);background:0 0;border:0;outline:none;padding:23px 13px 9px}.composer-field textarea::placeholder{color:#11151257}.send-button{min-width:112px;min-height:52px;color:var(--ink);border:1px solid var(--ink);background:var(--phosphor);font:700 var(--type-caption)/1 var(--mono);text-transform:uppercase;cursor:pointer;justify-content:center;align-items:center;gap:7px;margin:7px;transition:transform .15s,box-shadow .15s,background .15s;display:flex}.send-button:hover:not(:disabled){box-shadow:3px 3px 0 var(--ink);transform:translate(-2px,-2px)}.send-button:disabled{opacity:.34}.send-button svg{fill:none;stroke:currentColor;stroke-width:1.4px;width:15px}.send-button.stop{color:var(--paper);background:var(--ink)}.send-button.stop span{background:var(--rust);width:7px;height:7px}.send-button.load{background:var(--phosphor)}.inspector{border-left:1px solid var(--line-light);scrollbar-color:#e8dfca2e transparent;grid-area:inspector;height:calc(100dvh - 76px);min-height:calc(100dvh - 76px);animation:.57s cubic-bezier(.16,1,.3,1) .22s both rise-in;overflow-y:auto}.inspector-section{border-bottom:1px solid var(--line-light);padding:20px 18px}.section-heading{align-items:center;margin-bottom:17px}.section-heading.compact{margin-bottom:14px}.section-heading>div{flex:1}.section-heading h2{font-size:24px}.sampling-label{color:#e8dfca6b;font:var(--type-utility)/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;align-items:center;gap:6px;display:flex}.sampling-label i{width:4px;height:4px}.speed-gauge{grid-template-columns:116px 1fr;align-items:center;gap:15px;display:grid}.gauge-ring{background:radial-gradient(circle, var(--ink) 0 51%, transparent 52%), conic-gradient(var(--phosphor) 0 var(--gauge), #e8dfca1c var(--gauge) 100%);border-radius:49% 51% 47% 53%;place-items:center;width:116px;height:116px;display:grid;transform:rotate(-9deg);box-shadow:inset 0 0 0 1px #e8dfca1a,0 0 30px #b9ff450e}.gauge-ring:after{content:"";border:1px dashed #e8dfca21;border-radius:45% 55% 52% 48%;width:128px;height:128px;position:absolute}.gauge-ring>div{z-index:1;justify-items:center;display:grid;position:relative;transform:rotate(9deg)}.gauge-ring strong{color:var(--phosphor);font:400 29px/1 var(--display)}.gauge-ring small{color:var(--paper-ghost);font:var(--type-utility)/1 var(--mono);text-transform:uppercase;margin-top:3px}.speed-gauge dl{margin:0}.speed-gauge dl div{border-bottom:1px solid var(--line-light);font:var(--type-utility)/1 var(--mono);justify-content:space-between;padding:7px 0;display:flex}.speed-gauge dt{color:#e8dfca6e}.speed-gauge dd{color:var(--paper);margin:0}.device-card{background:linear-gradient(90deg,#b9ff4514,#0000);border:1px solid #b9ff453b;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin:19px 0 14px;padding:10px;display:grid}.device-icon{border:1px solid #b9ff4540;align-items:flex-end;gap:3px;width:28px;height:28px;padding:5px;display:flex}.device-icon i{background:var(--phosphor);width:4px}.device-icon i:first-child{opacity:.45;height:7px}.device-icon i:nth-child(2){height:15px}.device-icon i:nth-child(3){opacity:.7;height:11px}.device-card>div{gap:3px;display:grid}.device-card small,.memory-grid small,.meter small{color:#e8dfca6b;font:var(--type-utility)/1 var(--mono);text-transform:uppercase}.device-card strong{font:500 var(--type-caption)/1 var(--mono)}.device-card>span:last-child{color:var(--phosphor);font:600 15px/1 var(--mono);justify-items:end;display:grid}.device-card>span:last-child small{color:#e8dfca5e;font-size:var(--type-utility);margin-top:3px}.meter{margin-top:13px}.meter>div:first-child{font:var(--type-utility)/1 var(--mono);justify-content:space-between;margin-bottom:6px;display:flex}.meter-track{border:1px solid #e8dfca36;height:5px;padding:1px}.meter-track>span{background:repeating-linear-gradient(90deg, var(--phosphor) 0 5px, transparent 5px 7px);height:100%;display:block}.memory-grid{background:var(--line-light);grid-template-columns:1fr 1fr;gap:1px;margin-top:14px;display:grid}.memory-grid>div{background:var(--ink);gap:6px;padding:10px;display:grid}.memory-grid strong{font:500 var(--type-caption)/1 var(--mono)}.event-log{gap:0;margin:0;padding:0;list-style:none;display:grid;position:relative}.event-log:before{content:"";background:var(--line-light);width:1px;position:absolute;top:5px;bottom:5px;left:3px}.event-log li{grid-template-columns:8px 64px 1fr;align-items:start;gap:8px;padding:7px 0;display:grid}.event-log li.event-empty{color:#e8dfca5c;font:var(--type-utility)/1.4 var(--mono);padding:5px 0;display:block}.event-pip{z-index:1;border:1px solid var(--ink);margin-top:2px}.event-log time{color:#e8dfca57;font:var(--type-utility)/1.2 var(--mono)}.event-log div{gap:3px;display:grid}.event-log strong{font:500 var(--type-caption)/1 var(--mono)}.event-log small{color:#e8dfca6b;font-size:var(--type-utility)}.artifact-close{border:1px solid var(--line-light);cursor:pointer;background:0 0;border-radius:50%;width:25px;height:25px}.artifact-empty{color:#e8dfca66;font:var(--type-utility)/1.5 var(--mono);margin:0}.artifact-pane{border:1px solid var(--line-light);background:#f8f5eb}.artifact-tabs{color:var(--paper);border-bottom:1px solid var(--line-light);background:var(--ink-raised);grid-template-columns:auto auto 1fr;align-items:center;display:grid}.artifact-tabs button{border:0;border-right:1px solid var(--line-light);min-height:44px;font:var(--type-utility)/1 var(--mono);text-transform:uppercase;cursor:pointer;background:0 0;padding:7px 9px}.artifact-tabs button[aria-selected=true]{color:var(--ink);background:var(--phosphor)}.artifact-tabs span{color:#e8dfca73;font:var(--type-utility)/1 var(--mono);text-align:right;text-overflow:ellipsis;white-space:nowrap;padding:0 8px;overflow:hidden}.artifact-pane iframe{background:#fff;border:0;width:100%;height:260px;display:block}.artifact-running{position:relative}.artifact-running>button{z-index:2;color:var(--paper);border:1px solid var(--rust);min-height:44px;font:var(--type-utility)/1 var(--mono);text-transform:uppercase;cursor:pointer;background:#111512e6;padding:5px 7px;position:absolute;top:7px;right:7px}.artifact-launch{min-height:180px;color:var(--ink);text-align:center;align-content:center;justify-items:center;gap:13px;padding:20px;display:grid}.artifact-launch p{color:#1115129e;max-width:250px;font:var(--type-caption)/1.5 var(--mono);margin:0}.artifact-launch button{color:var(--ink);border:1px solid var(--ink);background:var(--phosphor);min-height:44px;font:700 var(--type-utility)/1 var(--mono);text-transform:uppercase;cursor:pointer;padding:8px 10px}.artifact-code{height:260px;color:var(--paper);font:var(--type-utility)/1.5 var(--mono);white-space:pre-wrap;background:#0d100e;margin:0;padding:10px;overflow:auto}.settings-layer{z-index:50;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#080b09a3;justify-content:flex-end;animation:.16s both station-in;display:flex;position:fixed;inset:0}.settings-sheet{width:min(430px,100%);min-height:100%;color:var(--paper);border-left:1px solid var(--phosphor);background:repeating-radial-gradient(ellipse at 104% 101%, transparent 0 13px, #b9ff450e 13.5px 14.5px), var(--ink);padding:30px 27px;animation:.3s cubic-bezier(.16,1,.3,1) both sheet-in;overflow-y:auto;box-shadow:-24px 0 70px #00000052}.settings-sheet>header{border-bottom:1px solid var(--line-light);justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:37px;padding-bottom:20px;display:flex}.settings-sheet h2{font:400 31px/1 var(--display);margin:0}.sheet-close{border:1px solid var(--line-light);width:35px;height:35px;font:300 22px/1 var(--body);cursor:pointer;background:0 0;border-radius:50%}.sheet-close:hover{color:var(--phosphor);border-color:var(--phosphor)}.setting-group{border-bottom:1px solid var(--line-light);grid-template-columns:24px 1fr auto;align-items:center;gap:12px;padding:15px 0;display:grid}.setting-number{color:var(--phosphor);font:var(--type-utility)/1 var(--mono)}.setting-group>div,.range-setting>span:first-child{gap:5px;display:grid}.setting-group small,.range-setting small{color:#e8dfca6e;font:var(--type-utility)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}.setting-group strong,.range-setting strong{font:500 var(--type-caption)/1 var(--mono)}.setting-locked{color:#e8dfca5c;font:var(--type-utility)/1 var(--mono);text-transform:uppercase}.setting-select select{max-width:112px;color:var(--paper);border:1px solid var(--line-light);background:var(--ink-raised);min-height:44px;font:var(--type-utility)/1 var(--mono);border-radius:0;padding:6px 7px}.range-setting{gap:13px;margin-top:29px;display:grid}.range-setting>span:first-child{justify-content:space-between;align-items:end;display:flex}.range-setting input{appearance:none;background:linear-gradient(90deg, var(--phosphor) 0 35%, #e8dfca1c 35%);border:1px solid #e8dfca3d;border-radius:0;width:100%;height:4px;margin:0}.range-setting:first-of-type input{background:var(--phosphor)}.range-setting input::-webkit-slider-thumb{appearance:none;border:2px solid var(--ink);background:var(--phosphor);width:12px;height:18px;box-shadow:0 0 0 1px var(--phosphor);cursor:grab}.range-setting input::-moz-range-thumb{border:2px solid var(--ink);background:var(--phosphor);width:10px;height:16px;box-shadow:0 0 0 1px var(--phosphor);cursor:grab;border-radius:0}.range-ticks{pointer-events:none;justify-content:space-between;margin-top:-13px;display:flex}.range-limits{color:#e8dfca59;font:var(--type-utility)/1 var(--mono);justify-content:space-between;display:flex}.range-limits i{font-style:normal}.system-prompt-setting{gap:9px;margin-top:29px;display:grid}.system-prompt-setting>span{color:#e8dfca6e;font:var(--type-utility)/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;justify-content:space-between;display:flex}.system-prompt-setting textarea{resize:vertical;color:var(--paper);border:1px solid var(--line-light);background:var(--ink-raised);font:var(--type-caption)/1.5 var(--mono);padding:10px}.settings-actions{grid-template-columns:1fr 1fr;gap:7px;margin-top:29px;display:grid}.settings-actions button{color:var(--paper);border:1px solid var(--line-light);min-height:44px;font:var(--type-utility)/1.2 var(--mono);text-transform:uppercase;cursor:pointer;background:0 0;padding:9px}.settings-actions button:hover{color:var(--phosphor);border-color:var(--phosphor)}.settings-actions .danger-action{color:#e78a62;border-color:#c96f4373;grid-column:span 2}.boot-screen{min-height:100dvh;color:var(--paper);background:var(--ink);justify-content:center;align-items:center;gap:18px;padding:24px;display:flex}.boot-screen h1{color:var(--phosphor);font:400 34px/1 var(--display);margin:0}.boot-screen p:last-child{color:var(--paper-ghost);font:var(--type-caption)/1.5 var(--mono)}.range-ticks i{background:#e8dfca40;width:1px;height:5px}.settings-note{background:#b9ff450f;border:1px solid #b9ff4540;align-items:flex-start;gap:13px;margin-top:42px;padding:15px;display:flex}.settings-note .signal-dot{flex:0 0 7px;margin-top:6px}.settings-note p{color:#e8dfca94;font-size:var(--type-caption);margin:0;line-height:1.5}.settings-note strong{color:var(--phosphor)}@keyframes station-in{0%{opacity:0}to{opacity:1}}@keyframes rise-in{0%{opacity:0;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}@keyframes note-in{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes cursor-blink{0%,52%{opacity:1}53%,to{opacity:0}}@keyframes activity-pulse{0%,to{opacity:.55;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}@keyframes sheet-in{0%{opacity:0;transform:translate(34px)}to{opacity:1;transform:translate(0)}}@media (width<=1279px){.station-header{grid-template-columns:minmax(320px,1fr) auto auto}.local-promise{min-width:auto}.local-promise small{display:none}.workspace-grid{grid-template-columns:280px minmax(500px,1fr);grid-template-areas:"models chat""inspector inspector"}.model-rail,.chat-surface{height:calc(100dvh - 76px);min-height:calc(100dvh - 76px)}.inspector{border-top:1px solid var(--phosphor);border-left:0;grid-template-columns:repeat(2,minmax(0,1fr));height:auto;min-height:auto;display:grid;overflow:visible}.inspector-section{border-right:1px solid var(--line-light);border-bottom:0}}@media (width<=820px){.station-header{min-height:70px;display:block}.brand-block{padding:11px 70px 11px 15px}.brand-mark{flex-basis:36px;width:36px;height:36px}.local-promise{border:0;border-top:1px solid var(--line-light);min-height:31px;padding:0 16px}.header-actions{position:absolute;top:10px;right:0}.station-clock{display:none}.workspace-grid{display:block}.model-rail,.chat-surface,.inspector{height:auto;min-height:auto}.model-rail{border-right:0;border-bottom:1px solid var(--phosphor);padding:18px 15px;display:block}.model-list{scroll-snap-type:x mandatory;gap:7px;padding-bottom:7px;display:flex;overflow-x:auto}.model-card{scroll-snap-align:start;min-width:205px}.rail-footnote{display:none}.chat-surface{grid-template-rows:auto 19px minmax(240px,auto) auto;display:grid;overflow:visible}.transcript{padding-inline:22px;overflow:visible}.chat-header{padding:17px 19px}.chat-header-meta span:not(.live-label){display:none}.live-label{grid-column:1}.composer{z-index:5;padding-inline:14px;position:relative}.transcript-empty{margin-top:4vh}.inspector{border-top:1px solid var(--phosphor);display:block}.inspector-section{border-right:0;border-bottom:1px solid var(--line-light)}}@media (width<=520px){.brand-block h1{font-size:24px}.brand-block .eyebrow,.local-promise strong{font-size:var(--type-utility)}.chat-header{align-items:flex-end}.botanical-subtitle{margin:4px 0 0;display:block}.message-user{max-width:91%}.composer-meta>span{display:none}.composer-activity{grid-template-rows:24px 30px 44px 36px;height:176px;padding-inline:9px}.activity-stage-line{gap:3px}.activity-stage-line span{letter-spacing:0;gap:3px}.activity-stage-line i{display:none}.load-live-grid{gap:7px}.activity-memory{min-width:68px}.shard-strip{gap:3px}.shard-cell small{display:none}.composer-field{grid-template-columns:1fr;padding-bottom:62px}.send-button{height:52px;position:absolute;bottom:0;right:0}.speed-gauge{grid-template-columns:106px 1fr}.gauge-ring{width:102px;height:102px}.gauge-ring:after{width:113px;height:113px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.bench-page{min-height:100dvh;color:var(--ink);background:var(--paper)}.bench-masthead{min-height:86px;color:var(--paper);border-bottom:1px solid var(--phosphor);background:var(--ink);grid-template-columns:minmax(310px,1fr) minmax(360px,1.2fr) auto;align-items:stretch;display:grid}.bench-masthead .brand-block h1{color:var(--paper)}.bench-masthead-note{border-inline:1px solid var(--line-light);background:linear-gradient(110deg,#b9ff4517,#0000 72%);flex-direction:column;justify-content:center;gap:5px;padding:14px 28px;display:flex}.bench-masthead-note strong{color:var(--phosphor);font:700 9px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase}.bench-masthead-note span{color:#e8dfca8c;max-width:520px;font:10px/1.35 var(--body)}.bench-return{color:var(--paper);font:700 8px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:8px;padding:0 25px;text-decoration:none;display:flex}.bench-return:hover{color:var(--phosphor)}.bench-layout{grid-template-columns:minmax(275px,330px) minmax(0,1fr);min-height:calc(100dvh - 86px);display:grid}.bench-controls{color:var(--paper);border-right:1px solid var(--phosphor);background:repeating-radial-gradient(ellipse at -12% 102%, transparent 0 24px, #b9ff450b 25px 26px), var(--ink);padding:28px 22px}.bench-controls h2{font:400 30px/1 var(--display);letter-spacing:-.03em;margin:0}.bench-control-intro{color:#e8dfca80;margin:9px 0 22px;font-size:11px;line-height:1.45}.bench-controls form{gap:15px;display:grid}.bench-field{gap:6px;min-width:0;display:grid}.bench-field>span{color:#e8dfcac7;font:700 8px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}.bench-field select,.bench-field input{width:100%;min-width:0;height:39px;color:var(--paper);background:var(--ink-raised);font:10px/1 var(--mono);border:1px solid #e8dfca38;border-radius:0;outline:0;padding:0 10px}.bench-field input::placeholder{color:#e8dfca40}.bench-field select:disabled,.bench-field input:disabled{opacity:.5}.bench-field small{color:#e8dfca59;font:8px/1.2 var(--mono)}.bench-field-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.bench-experimental{background:#c96f430d;border:1px dashed #c96f437a;padding:11px}.bench-experimental summary{color:#e19a76;font:700 8px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;cursor:pointer}.bench-experimental>p{color:#e8dfca75;margin:10px 0;font-size:9px;line-height:1.4}.bench-locks{color:#e8dfca70;font:7px/1.35 var(--mono);gap:5px;margin:10px 0 0;display:grid}.bench-locks div{justify-content:space-between;gap:8px;display:flex}.bench-locks dt,.bench-locks dd{margin:0}.bench-locks dt{color:#e8dfcab8}.bench-gate{border-left:2px solid var(--rust);background:#c96f4314;gap:5px;padding:10px;display:grid}.bench-gate.pass{border-color:var(--phosphor);background:var(--phosphor-dim)}.bench-gate strong{color:#ff9a68;font:700 8px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}.bench-gate.pass strong{color:var(--phosphor)}.bench-gate span{color:#e8dfca80;font:8px/1.4 var(--mono);overflow-wrap:anywhere}.bench-run-actions{grid-template-columns:1fr auto;gap:8px;display:grid}.bench-run-button,.bench-stop-button,.bench-section-heading button{border:1px solid var(--ink);background:var(--phosphor);min-height:38px;font:800 8px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:0;padding:0 13px}.bench-run-button:disabled{opacity:.35}.bench-stop-button{color:#ffb08a;border-color:var(--rust);background:0 0}.bench-workbench{background:linear-gradient(90deg, #1115120b 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(#1115120a 1px, transparent 1px) 0 0 / 22px 22px, var(--paper);min-width:0;padding:clamp(26px,4vw,58px)}.bench-hero{border-bottom:1px solid var(--line-dark);grid-template-columns:minmax(320px,1.3fr) minmax(260px,.7fr);align-items:end;gap:34px;padding-bottom:29px;display:grid}.bench-hero h2{max-width:690px;font:400 clamp(42px, 6vw, 82px)/.84 var(--display);letter-spacing:-.065em;margin:0}.bench-hero h2 em{color:#4f7125;font-weight:400}.bench-hero>p{color:#11151294;max-width:430px;margin:0;font-size:11px;line-height:1.55}.bench-progress{gap:8px;padding:16px 0;display:grid}.bench-progress>div{font:8px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;justify-content:space-between;gap:20px;display:flex}.bench-progress>div span{color:#11151273}.bench-progress-track{background:#11151221;height:3px}.bench-progress-track i{background:#527426;height:100%;transition:width .18s;display:block}.bench-error{color:var(--paper);border-left:3px solid var(--rust);background:var(--ink);gap:5px;margin-bottom:18px;padding:12px 14px;display:grid}.bench-error strong{color:#ff9a68;font:700 8px/1 var(--mono);letter-spacing:.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{justify-content:space-between;align-items:end;gap:20px;margin-bottom:13px;display:flex}.bench-section-heading h3,.bench-output h3{font:500 24px/1 var(--display);margin:0}.bench-section-heading button{min-height:31px;color:var(--paper);border-color:var(--ink);background:var(--ink)}.bench-core-sample{border:1px solid var(--ink);background:var(--paper-deep);grid-template-columns:repeat(4,minmax(0,1fr));display:grid;position:relative;overflow:hidden}.bench-core-sample:before{content:"";pointer-events:none;opacity:.35;background:repeating-radial-gradient(#0000 0 34px,#1115122b 35px 36px);position:absolute;inset:-130% -5%}.bench-core-sample article{background:#e8dfca91;border-right:1px solid #11151242;flex-direction:column;justify-content:space-between;min-height:128px;padding:17px;display:flex;position:relative}.bench-core-sample article:nth-child(2n){background:#d8cdb499}.bench-core-sample article:last-child{color:var(--paper);background:#111512e8;border-right:0}.bench-core-sample article>span{font:800 8px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}.bench-core-sample article strong{font:400 clamp(28px, 3vw, 43px)/1 var(--display);letter-spacing:-.04em;margin-block:auto}.bench-core-sample article small{color:#11151280;font:7px/1.2 var(--mono);text-transform:uppercase}.bench-core-sample article:last-child small{color:#e8dfca7a}.bench-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px;display:grid}.bench-data-card{border:1px solid var(--line-dark);background:#e8dfcaad;padding:16px}.bench-runtime-card,.bench-tuning-card{grid-column:span 2}.bench-data-card dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px;margin:0;display:grid}.bench-runtime-card dl{grid-template-columns:minmax(180px,1.5fr) repeat(4,minmax(100px,.7fr))}.bench-tuning-card dl{grid-template-columns:repeat(4,minmax(0,1fr))}.bench-data-card dl div{border-top:1px solid #11151221;gap:4px;min-width:0;padding-top:8px;display:grid}.bench-data-card dt{color:#11151273;font:7px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase}.bench-data-card dd{min-width:0;font:500 16px/1.2 var(--body);text-overflow:ellipsis;white-space:nowrap;margin:0;overflow:hidden}.bench-output{border:1px dashed #1115124d;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;margin-top:12px;padding:21px;display:grid}.bench-output>div:last-child{border-left:1px solid var(--line-dark);padding-left:34px}.bench-output p:not(.eyebrow){color:#11151299;white-space:pre-wrap;margin:8px 0 0;font-size:11px;line-height:1.5}@media (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 #11151242}.bench-runtime-card dl{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=760px){.bench-masthead{align-items:center;display:flex}.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 (width<=480px){.bench-masthead .brand-mark{display:none}.bench-core-sample,.bench-data-card dl,.bench-runtime-card dl,.bench-tuning-card dl{grid-template-columns:1fr}.bench-core-sample article{border-bottom:1px solid #11151242;border-right:0;min-height:105px}.bench-core-sample article:last-child{border-bottom:0}}

dist/assets/{worker-CUYMhoYj.js → worker-Bn87aL54.js} RENAMED Viewed

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

dist/index.html CHANGED Viewed

@@ -10,8 +10,8 @@
       content="Bonsai local inference field station — private WebGPU language models in your browser."
     />
     <title>Bonsai Field Station</title>
-    <script type="module" crossorigin src="/assets/index-Dn6W9Rfz.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-C-2tm91j.css">
   </head>
   <body>
     <div id="root"></div>

       content="Bonsai local inference field station — private WebGPU language models in your browser."
     />
     <title>Bonsai Field Station</title>
+    <script type="module" crossorigin src="/assets/index-BY7HNxCd.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DnMbdiUB.css">
   </head>
   <body>
     <div id="root"></div>

dist/manifest/models.json CHANGED Viewed

@@ -248,94 +248,5 @@
         "requireSingleWebGPUGraph": true
       }
     }
-  ],
-  "dflash": {
-    "status": "conditional",
-    "enabledByDefault": false,
-    "runtimeAvailable": false,
-    "source": {
-      "repo": "z-lab/Qwen3.6-27B-DFlash",
-      "revision": "0919688658996800f86b895034249700e9481106",
-      "file": "model.safetensors",
-      "bytes": 3460432504,
-      "sha256": "e0c050b34798d32728a164d2c3f1681746ff85c11945701b0205b654e2f1fdbe",
-      "format": "safetensors",
-      "dtype": "BF16",
-      "parameters": 1730213120,
-      "sourceOnly": true,
-      "license": "MIT"
-    },
-    "nativeReference": {
-      "path": "dflash/Qwen3.6-27B-DFlash-Q8_0.gguf",
-      "bytes": 1849481440,
-      "sha256": "80f04984d70c0989f4bc2c3b8ef34bc274226fce2723dc8a68e930ae46225fe9",
-      "format": "GGUF",
-      "quantization": "Q8_0",
-      "largestTensor": {
-        "name": "fc.weight",
-        "bytes": 139264000
-      },
-      "role": "native correctness reference only"
-    },
-    "browser": {
-      "enabled": false,
-      "architectureCompiled": true,
-      "specTypePlumbed": false,
-      "candidateQuantizationStatus": "q8-rejected-binding-limit"
-    },
-    "validation": {
-      "shape": "pass",
-      "tokenizer": "exact-match",
-      "targetTaps": [
-        2,
-        17,
-        32,
-        47,
-        62
-      ],
-      "nativeGreedyParity": {
-        "status": "pass",
-        "tokens": 32,
-        "temperature": 0
-      },
-      "acceptanceBenchmark": "pending",
-      "browserSpeedGate": "pending"
-    },
-    "pairings": {
-      "1_7b": {
-        "support": "unsupported",
-        "reason": "No compatible DFlash drafter is locked and validated for the Bonsai 1.7B target."
-      },
-      "4b": {
-        "support": "unsupported",
-        "reason": "The pinned drafter is trained for Qwen3.6-27B (hidden size 5120, mask token 248070, and 64 target layers) and is not compatible with Bonsai 4B."
-      },
-      "8b": {
-        "support": "unsupported",
-        "reason": "The pinned drafter is trained for Qwen3.6-27B (hidden size 5120, mask token 248070, and 64 target layers) and is not compatible with Bonsai 8B."
-      },
-      "27b": {
-        "support": "conditional",
-        "compatibilityStatus": "native-greedy-parity-pass",
-        "runtimeAvailable": false,
-        "blockSize": 16,
-        "maskTokenId": 248070,
-        "targetLayerIdsZeroBased": [
-          1,
-          16,
-          31,
-          46,
-          61
-        ],
-        "targetTapsOneBased": [
-          2,
-          17,
-          32,
-          47,
-          62
-        ],
-        "reason": "The target/drafter contract and 32-token native greedy parity pass. Browser runtime stays disabled because spec_type=draft-dflash is not plumbed, the Q8 fc.weight exceeds the 128 MiB baseline binding limit, and acceptance/speed are unmeasured."
-      }
-    }
-  }
 }

         "requireSingleWebGPUGraph": true
       }
     }
+  ]
 }

dist/wasm/wllama-compat.wasm CHANGED Viewed

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

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

dist/wasm/wllama.wasm CHANGED Viewed

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

 version https://git-lfs.github.com/spec/v1
+oid sha256:5a8686c10f7639653e7e1854d34f39c31ddba404de876a5ae15d36c42263ddc4
+size 8020809

public/manifest/models.json CHANGED Viewed

@@ -248,94 +248,5 @@
         "requireSingleWebGPUGraph": true
       }
     }
-  ],
-  "dflash": {
-    "status": "conditional",
-    "enabledByDefault": false,
-    "runtimeAvailable": false,
-    "source": {
-      "repo": "z-lab/Qwen3.6-27B-DFlash",
-      "revision": "0919688658996800f86b895034249700e9481106",
-      "file": "model.safetensors",
-      "bytes": 3460432504,
-      "sha256": "e0c050b34798d32728a164d2c3f1681746ff85c11945701b0205b654e2f1fdbe",
-      "format": "safetensors",
-      "dtype": "BF16",
-      "parameters": 1730213120,
-      "sourceOnly": true,
-      "license": "MIT"
-    },
-    "nativeReference": {
-      "path": "dflash/Qwen3.6-27B-DFlash-Q8_0.gguf",
-      "bytes": 1849481440,
-      "sha256": "80f04984d70c0989f4bc2c3b8ef34bc274226fce2723dc8a68e930ae46225fe9",
-      "format": "GGUF",
-      "quantization": "Q8_0",
-      "largestTensor": {
-        "name": "fc.weight",
-        "bytes": 139264000
-      },
-      "role": "native correctness reference only"
-    },
-    "browser": {
-      "enabled": false,
-      "architectureCompiled": true,
-      "specTypePlumbed": false,
-      "candidateQuantizationStatus": "q8-rejected-binding-limit"
-    },
-    "validation": {
-      "shape": "pass",
-      "tokenizer": "exact-match",
-      "targetTaps": [
-        2,
-        17,
-        32,
-        47,
-        62
-      ],
-      "nativeGreedyParity": {
-        "status": "pass",
-        "tokens": 32,
-        "temperature": 0
-      },
-      "acceptanceBenchmark": "pending",
-      "browserSpeedGate": "pending"
-    },
-    "pairings": {
-      "1_7b": {
-        "support": "unsupported",
-        "reason": "No compatible DFlash drafter is locked and validated for the Bonsai 1.7B target."
-      },
-      "4b": {
-        "support": "unsupported",
-        "reason": "The pinned drafter is trained for Qwen3.6-27B (hidden size 5120, mask token 248070, and 64 target layers) and is not compatible with Bonsai 4B."
-      },
-      "8b": {
-        "support": "unsupported",
-        "reason": "The pinned drafter is trained for Qwen3.6-27B (hidden size 5120, mask token 248070, and 64 target layers) and is not compatible with Bonsai 8B."
-      },
-      "27b": {
-        "support": "conditional",
-        "compatibilityStatus": "native-greedy-parity-pass",
-        "runtimeAvailable": false,
-        "blockSize": 16,
-        "maskTokenId": 248070,
-        "targetLayerIdsZeroBased": [
-          1,
-          16,
-          31,
-          46,
-          61
-        ],
-        "targetTapsOneBased": [
-          2,
-          17,
-          32,
-          47,
-          62
-        ],
-        "reason": "The target/drafter contract and 32-token native greedy parity pass. Browser runtime stays disabled because spec_type=draft-dflash is not plumbed, the Q8 fc.weight exceeds the 128 MiB baseline binding limit, and acceptance/speed are unmeasured."
-      }
-    }
-  }
 }

         "requireSingleWebGPUGraph": true
       }
     }
+  ]
 }

public/wasm/wllama-compat.wasm CHANGED Viewed

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

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

public/wasm/wllama.wasm CHANGED Viewed

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

 version https://git-lfs.github.com/spec/v1
+oid sha256:5a8686c10f7639653e7e1854d34f39c31ddba404de876a5ae15d36c42263ddc4
+size 8020809

scripts/verify-wllama-assets.mjs CHANGED Viewed

@@ -48,6 +48,15 @@ const oaiDeclarations = await readFile(resolve(root, 'vendor/wllama-bonsai/esm/t
 if (!oaiDeclarations.includes('export interface ChatCompletionLogprob {\n    id: number;')) {
   throw new Error('Vendored Bonsai wllama declarations lack sampled token ids');
 }
 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');

 if (!oaiDeclarations.includes('export interface ChatCompletionLogprob {\n    id: number;')) {
   throw new Error('Vendored Bonsai wllama declarations lack sampled token ids');
 }
+if (!oaiDeclarations.includes('return_progress?: boolean;')) {
+  throw new Error('Vendored Bonsai wllama declarations lack prompt-progress opt-in');
+}
+if (!oaiDeclarations.includes('export interface PromptProgress')) {
+  throw new Error('Vendored Bonsai wllama declarations lack prompt-progress payloads');
+}
+if (!oaiDeclarations.includes('prompt_progress?: PromptProgress;')) {
+  throw new Error('Vendored Bonsai wllama declarations do not expose streamed prompt progress');
+}
 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

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest';
 import { EngineClientError } from '../engine';
 import {
   DEFAULT_MODEL_ID,
   reconcileCompletionTokens,
   reconcileTotalTokens,
   reportsModelWeightProgress,
@@ -58,3 +59,24 @@ describe('App streamed completion telemetry', () => {
     expect(reconcileTotalTokens(80, 5, 64)).toBe(80);
   });
 });

 import { EngineClientError } from '../engine';
 import {
   DEFAULT_MODEL_ID,
+  publishBackendReport,
   reconcileCompletionTokens,
   reconcileTotalTokens,
   reportsModelWeightProgress,
     expect(reconcileTotalTokens(80, 5, 64)).toBe(80);
   });
 });
+describe('App backend diagnostics', () => {
+  it('publishes the complete backend report for the browser gate without rendering it', () => {
+    const report = {
+      backends: ['WebGPU'],
+      nGraphSplits: 1,
+      opsOnCpu: 0,
+      layersGpu: { offloaded: 65, total: 65 },
+      flashAttention: false,
+      cacheTypeK: 'f16',
+      cacheTypeV: 'f16',
+      webgpuKvBufferBytes: 1024,
+      webgpuTrace: ['@@WEBGPU_TRACE@@completion_end id=1 steps=65 error=0'],
+    };
+    publishBackendReport(report);
+    expect(globalThis.__bonsaiBackendReport).toEqual(report);
+    delete globalThis.__bonsaiBackendReport;
+  });
+});

src/app/App.tsx CHANGED Viewed

@@ -6,6 +6,7 @@ import {
   isShardDownloadFailureDetails,
   loadModelManifestV2,
   type EngineCapabilities,
   type EngineChatMessage,
   type EngineChatToolCall,
   type EngineEvent,
@@ -18,7 +19,7 @@ import { AGENT_TOOLS, executeAgentTool, type ArtifactDocument } from '../lib/age
 import type {
   ChatMessage,
   ComposerSubmission,
-  DFlashState,
   ModelId,
   ModelOption,
   RuntimeSettings,
@@ -100,6 +101,12 @@ const INITIAL_TELEMETRY: TelemetrySnapshot = {
   contextUsed: 0,
   contextLimit: 4096,
   tokensPerSecond: 0,
   timeToFirstTokenMs: 0,
   gpuLayers: '—',
   graphSplits: null,
@@ -112,6 +119,18 @@ const INITIAL_STORAGE: StorageStatus = {
   downloads: [],
 };
 let sharedClient: BrowserEngineClient | null = null;
 function getEngineClient(): BrowserEngineClient {
@@ -189,6 +208,10 @@ export function reconcileTotalTokens(
   return Math.max(totalCount, promptCount + completionTokens);
 }
 function appendSegment(current: string, next: string): string {
   const trimmed = next.trim();
   if (!trimmed) return current;
@@ -244,24 +267,6 @@ function fallbackToolCalls(text: string): EngineChatToolCall[] {
   }));
 }
-function dflashState(manifest: ModelManifestV2 | null, tier: ModelTierId): DFlashState {
-  if (!manifest) {
-    return {
-      enabled: false,
-      available: false,
-      status: 'unsupported',
-      reason: 'No DFlash audit is present in the pinned manifest.',
-    };
-  }
-  const pairing = manifest.dflash.pairings[tier];
-  return {
-    enabled: false,
-    available: false,
-    status: pairing.support,
-    reason: pairing.reason,
-  };
-}
 export function App() {
   const [client] = useState(getEngineClient);
   const [manifest, setManifest] = useState<ModelManifestV2 | null>(null);
@@ -271,6 +276,7 @@ export function App() {
   const [loadingModelId, setLoadingModelId] = useState<ModelId | null>(null);
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [streamState, setStreamState] = useState<StreamState>('idle');
   const [toolsEnabled, setToolsEnabled] = useState(false);
   const [settings, setSettings] = useState<RuntimeSettings>(INITIAL_SETTINGS);
   const [settingsOpen, setSettingsOpen] = useState(false);
@@ -284,6 +290,61 @@ export function App() {
   const operationRef = useRef<AbortController | null>(null);
   const loadedConfigurationRef = useRef<{ id: ModelId; backend: RequestedBackend; contextSize: number } | null>(null);
   const historyReadyRef = useRef(false);
   const handleModelInvalidation = (runtimeError: unknown): boolean => {
     if (!requiresModelReload(runtimeError)) return false;
@@ -295,6 +356,13 @@ export function App() {
       modelMemoryBytes: 0,
       kvMemoryBytes: 0,
       contextUsed: 0,
       gpuLayers: '—',
       graphSplits: null,
     }));
@@ -306,6 +374,15 @@ export function App() {
   };
   const persistenceAttemptedRef = useRef(false);
   useEffect(() => {
     let cancelled = false;
     const bootstrap = async () => {
@@ -413,14 +490,12 @@ export function App() {
         capability: decor.capability,
         contextLimit: model.contextLength,
         defaultContext: model.defaultContext,
-        dflash: manifest.dflash.pairings[model.id].support,
         ...(limitReason ? { limitReason } : {}),
       };
     });
   }, [capabilities, loadedModelId, loadingModelId, manifest, settings.backend, settings.contextSize, storage.downloads]);
   const activeTier = UI_TO_TIER[activeModelId];
-  const dflash = useMemo(() => dflashState(manifest, activeTier), [activeTier, manifest]);
   const refreshStorage = async (): Promise<void> => {
     const estimate = await client.storageEstimate();
@@ -473,6 +548,15 @@ export function App() {
     setError(null);
     setShardRetry(null);
     setBootStatus(`Preparing ${model.displayName}…`);
     try {
       const result = await client.loadModel({
         manifestUrl: manifestUrl(),
@@ -482,26 +566,51 @@ export function App() {
       }, {
         signal: controller.signal,
         onProgress: (progress) => {
           if (!reportsModelWeightProgress(progress.phase)) {
             setBootStatus('Reading pinned model manifest…');
             return;
           }
-          const received = Math.min(progress.loadedBytes, model.downloadBytes);
-          const shard = progress.shardIndex === null ? '' : ` · shard ${progress.shardIndex + 1}/${progress.shardCount}`;
-          setBootStatus(`${progress.phase}${shard} · ${formatBytes(received)} / ${formatBytes(model.downloadBytes)}`);
-          setStorage((current) => ({
-            ...current,
-            downloads: [
-              ...current.downloads.filter((download) => download.modelId !== modelId),
-              {
-                modelId,
-                label: `${model.displayName}${shard}`,
-                receivedBytes: received,
-                totalBytes: model.downloadBytes,
-                state: progress.loadedBytes >= model.downloadBytes ? 'complete' : 'downloading',
-              },
-            ],
-          }));
         },
       });
       setLoadedModelId(modelId);
@@ -513,7 +622,8 @@ export function App() {
         device: result.backend === 'webgpu'
           ? capabilities?.webgpu.name || 'WebGPU adapter'
           : `CPU · ${capabilities?.hardwareConcurrency ?? navigator.hardwareConcurrency ?? 1} logical cores`,
-        modelMemoryBytes: model.downloadBytes,
         contextUsed: 0,
         contextLimit: result.context.size,
         gpuLayers: result.backendReport.layersGpu
@@ -521,6 +631,17 @@ export function App() {
           : result.backend === 'wasm' ? 'CPU' : 'unreported',
         graphSplits: result.backendReport.nGraphSplits,
       }));
       setBootStatus(`${model.displayName} loaded · ${result.backend.toUpperCase()} · ${result.context.size.toLocaleString()} ctx`);
       await refreshStorage();
     } catch (loadError) {
@@ -539,6 +660,11 @@ export function App() {
           error: errorMessage(loadError),
         });
       }
       setStorage((current) => ({
         ...current,
         downloads: operatorAborted
@@ -621,6 +747,22 @@ export function App() {
     baseMessages: ChatMessage[],
   ) => {
     if (operationRef.current || !manifest) return;
     const controller = new AbortController();
     operationRef.current = controller;
     const nonce = crypto.randomUUID();
@@ -645,37 +787,41 @@ export function App() {
     setError(null);
     const run = async () => {
-      const tier = UI_TO_TIER[activeModelId];
-      const model = manifest.models.find((candidate) => candidate.id === tier);
-      if (!model) throw new Error(`Model ${tier} is absent from the pinned manifest.`);
-      const requestedContext = targetContext(model);
-      const configured = loadedConfigurationRef.current;
-      const needsLoad = loadedModelId !== activeModelId
-        || configured?.backend !== settings.backend
-        || configured.contextSize !== requestedContext;
-      if (needsLoad) {
-        await requestPersistentStorage();
-        if (controller.signal.aborted) throw new DOMException('Model loading was aborted.', 'AbortError');
-        await loadModel(activeModelId, controller, requestedContext);
-      }
       setStreamState('streaming');
-      setBootStatus(`Generating with ${model.displayName}…`);
       const engineMessages = buildEngineHistory(historySnapshot, settings.systemPrompt);
       let visibleText = '';
       let reasoningText = '';
       let totalCompletionTokens = 0;
       let lastTotalTokens = 0;
       let tokensPerSecond = 0;
       let firstTokenAt = 0;
       const generationStartedAt = performance.now();
       let toolRounds = 0;
       let totalToolCalls = 0;
       while (true) {
         let streamedText = '';
         let streamedReasoning = '';
         let streamedTokenEvents = 0;
         const result = await client.generate({
           messages: engineMessages,
           maxTokens: settings.maxTokens,
@@ -686,6 +832,12 @@ export function App() {
           cachePrompt: true,
         }, {
           signal: controller.signal,
           onToken: (delta, reasoningDelta) => {
             if (!firstTokenAt && (delta || reasoningDelta)) firstTokenAt = performance.now();
             if (delta || reasoningDelta) streamedTokenEvents += 1;
@@ -708,6 +860,8 @@ export function App() {
           result.usage?.completionTokens,
           streamedTokenEvents,
         );
         totalCompletionTokens += roundCompletionTokens;
         lastTotalTokens = Math.max(
           lastTotalTokens,
@@ -717,7 +871,14 @@ export function App() {
             roundCompletionTokens,
           ),
         );
-        tokensPerSecond = result.timings?.predictedTokensPerSecond ?? tokensPerSecond;
         const thought = parseThoughtStream(result.text);
         const textual = parseToolCalls(thought.content);
         if (textual.incomplete || textual.errors.length > 0) {
@@ -791,11 +952,14 @@ export function App() {
       }
       const generationElapsedSeconds = Math.max(0.001, (performance.now() - generationStartedAt) / 1000);
-      if (!Number.isFinite(tokensPerSecond) || tokensPerSecond <= 0 || tokensPerSecond > 10_000 || totalCompletionTokens < 2) {
-        tokensPerSecond = totalCompletionTokens / generationElapsedSeconds;
-      }
       const ttft = firstTokenAt ? Math.round(firstTokenAt - generationStartedAt) : 0;
       const report = await client.backendReport();
       replaceMessage(setMessages, assistantId, (message) => ({
         ...message,
         state: 'complete',
@@ -803,6 +967,7 @@ export function App() {
         metrics: {
           tokens: totalCompletionTokens,
           tokensPerSecond,
           timeToFirstTokenMs: ttft,
         },
       }));
@@ -810,6 +975,12 @@ export function App() {
         ...current,
         contextUsed: Math.min(current.contextLimit, Math.max(lastTotalTokens, totalCompletionTokens)),
         tokensPerSecond,
         timeToFirstTokenMs: ttft,
         graphSplits: report.nGraphSplits,
         gpuLayers: report.layersGpu
@@ -817,12 +988,13 @@ export function App() {
           : current.gpuLayers,
       }));
       setStreamState('complete');
-      setBootStatus(`${model.displayName} complete · ${tokensPerSecond.toFixed(1)} tok/s`);
       await refreshStorage();
     };
     void run()
       .catch((runError) => {
         if (handleModelInvalidation(runError)) {
           const message = errorMessage(runError);
           replaceMessage(setMessages, assistantId, (current) => ({
@@ -837,6 +1009,7 @@ export function App() {
         if (isAborted(runError, controller.signal)) {
           replaceMessage(setMessages, assistantId, (message) => ({ ...message, state: 'complete', isThinking: false }));
           setStreamState('complete');
           setBootStatus('Generation stopped by operator');
           return;
         }
@@ -849,6 +1022,7 @@ export function App() {
         }));
         setError(message);
         setStreamState('error');
         setBootStatus('Runtime stopped safely');
       })
       .finally(() => {
@@ -944,10 +1118,10 @@ export function App() {
       loadedModelId={effectiveLoadedModelId}
       messages={messages}
       streamState={streamState}
       telemetry={telemetry}
       toolEvents={toolEvents}
       storage={storage}
-      dflash={dflash}
       artifact={artifact}
       toolsEnabled={toolsEnabled}
       settings={settings}
@@ -961,7 +1135,6 @@ export function App() {
       onRegenerate={handleRegenerate}
       onCancel={handleCancel}
       onToolsEnabledChange={setToolsEnabled}
-      onDFlashChange={() => undefined}
       onOpenSettings={() => { if (!operationRef.current) setSettingsOpen(true); }}
       onCloseSettings={() => setSettingsOpen(false)}
       onSettingsChange={(nextSettings) => { if (!operationRef.current) setSettings(nextSettings); }}
@@ -971,7 +1144,6 @@ export function App() {
       onDismissError={() => setError(null)}
       onRetryShard={handleLoadModel}
       onCloseArtifact={() => setArtifact(null)}
-      onRequestDownload={handleLoadModel}
     />
   );
 }

   isShardDownloadFailureDetails,
   loadModelManifestV2,
   type EngineCapabilities,
+  type BackendReport,
   type EngineChatMessage,
   type EngineChatToolCall,
   type EngineEvent,
 import type {
   ChatMessage,
   ComposerSubmission,
+  ModelLoadProgress,
   ModelId,
   ModelOption,
   RuntimeSettings,
   contextUsed: 0,
   contextLimit: 4096,
   tokensPerSecond: 0,
+  prefillTokensPerSecond: 0,
+  decodeTokensPerSecond: 0,
+  inferencePhase: 'idle',
+  promptProcessed: 0,
+  promptTotal: 0,
+  completionTokens: 0,
   timeToFirstTokenMs: 0,
   gpuLayers: '—',
   graphSplits: null,
   downloads: [],
 };
+const INITIAL_MODEL_LOAD_PROGRESS: ModelLoadProgress = {
+  modelId: null,
+  modelLabel: '',
+  stage: 'idle',
+  stageProgress: 0,
+  downloadedBytes: 0,
+  totalBytes: 0,
+  residentBytes: 0,
+  nativeStage: null,
+  shards: [],
+};
 let sharedClient: BrowserEngineClient | null = null;
 function getEngineClient(): BrowserEngineClient {
   return Math.max(totalCount, promptCount + completionTokens);
 }
+export function publishBackendReport(report: BackendReport): void {
+  globalThis.__bonsaiBackendReport = report;
+}
 function appendSegment(current: string, next: string): string {
   const trimmed = next.trim();
   if (!trimmed) return current;
   }));
 }
 export function App() {
   const [client] = useState(getEngineClient);
   const [manifest, setManifest] = useState<ModelManifestV2 | null>(null);
   const [loadingModelId, setLoadingModelId] = useState<ModelId | null>(null);
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [streamState, setStreamState] = useState<StreamState>('idle');
+  const [modelLoadProgress, setModelLoadProgress] = useState<ModelLoadProgress>(INITIAL_MODEL_LOAD_PROGRESS);
   const [toolsEnabled, setToolsEnabled] = useState(false);
   const [settings, setSettings] = useState<RuntimeSettings>(INITIAL_SETTINGS);
   const [settingsOpen, setSettingsOpen] = useState(false);
   const operationRef = useRef<AbortController | null>(null);
   const loadedConfigurationRef = useRef<{ id: ModelId; backend: RequestedBackend; contextSize: number } | null>(null);
   const historyReadyRef = useRef(false);
+  const loadProgressFrameRef = useRef<number | null>(null);
+  const pendingLoadProgressRef = useRef<ModelLoadProgress | null>(null);
+  const modelLoadProgressRef = useRef<ModelLoadProgress>(INITIAL_MODEL_LOAD_PROGRESS);
+  const inferenceFrameRef = useRef<number | null>(null);
+  const pendingInferenceRef = useRef<Extract<EngineEvent, { event: 'generation' }> | null>(null);
+  const publishModelLoadProgress = (next: ModelLoadProgress): void => {
+    modelLoadProgressRef.current = next;
+    pendingLoadProgressRef.current = next;
+    if (loadProgressFrameRef.current !== null) return;
+    loadProgressFrameRef.current = window.requestAnimationFrame(() => {
+      loadProgressFrameRef.current = null;
+      const pending = pendingLoadProgressRef.current;
+      pendingLoadProgressRef.current = null;
+      if (pending) setModelLoadProgress(pending);
+    });
+  };
+  const publishInferenceProgress = (
+    next: Extract<EngineEvent, { event: 'generation' }>,
+  ): void => {
+    pendingInferenceRef.current = next;
+    if (inferenceFrameRef.current !== null) return;
+    inferenceFrameRef.current = window.requestAnimationFrame(() => {
+      inferenceFrameRef.current = null;
+      const pending = pendingInferenceRef.current;
+      pendingInferenceRef.current = null;
+      if (!pending) return;
+      const liveRate = pending.phase === 'prefill'
+        ? pending.promptTokensPerSecond
+        : pending.decodeTokensPerSecond;
+      setTelemetry((current) => ({
+        ...current,
+        inferencePhase: pending.phase,
+        tokensPerSecond: liveRate,
+        prefillTokensPerSecond: pending.promptTokensPerSecond || current.prefillTokensPerSecond,
+        decodeTokensPerSecond: pending.decodeTokensPerSecond || current.decodeTokensPerSecond,
+        promptProcessed: pending.promptProcessed,
+        promptTotal: pending.promptTotal,
+        completionTokens: pending.completionTokens,
+        contextUsed: Math.min(
+          current.contextLimit,
+          Math.max(current.contextUsed, pending.promptProcessed + pending.completionTokens),
+        ),
+      }));
+    });
+  };
+  const clearPendingInferenceProgress = (): void => {
+    if (inferenceFrameRef.current !== null) {
+      window.cancelAnimationFrame(inferenceFrameRef.current);
+      inferenceFrameRef.current = null;
+    }
+    pendingInferenceRef.current = null;
+  };
   const handleModelInvalidation = (runtimeError: unknown): boolean => {
     if (!requiresModelReload(runtimeError)) return false;
       modelMemoryBytes: 0,
       kvMemoryBytes: 0,
       contextUsed: 0,
+      tokensPerSecond: 0,
+      prefillTokensPerSecond: 0,
+      decodeTokensPerSecond: 0,
+      inferencePhase: 'idle',
+      promptProcessed: 0,
+      promptTotal: 0,
+      completionTokens: 0,
       gpuLayers: '—',
       graphSplits: null,
     }));
   };
   const persistenceAttemptedRef = useRef(false);
+  useEffect(() => () => {
+    if (loadProgressFrameRef.current !== null) {
+      window.cancelAnimationFrame(loadProgressFrameRef.current);
+    }
+    if (inferenceFrameRef.current !== null) {
+      window.cancelAnimationFrame(inferenceFrameRef.current);
+    }
+  }, []);
   useEffect(() => {
     let cancelled = false;
     const bootstrap = async () => {
         capability: decor.capability,
         contextLimit: model.contextLength,
         defaultContext: model.defaultContext,
         ...(limitReason ? { limitReason } : {}),
       };
     });
   }, [capabilities, loadedModelId, loadingModelId, manifest, settings.backend, settings.contextSize, storage.downloads]);
   const activeTier = UI_TO_TIER[activeModelId];
   const refreshStorage = async (): Promise<void> => {
     const estimate = await client.storageEstimate();
     setError(null);
     setShardRetry(null);
     setBootStatus(`Preparing ${model.displayName}…`);
+    const initialProgress: ModelLoadProgress = {
+      ...INITIAL_MODEL_LOAD_PROGRESS,
+      modelId,
+      modelLabel: model.displayName,
+      stage: 'manifest',
+      totalBytes: model.downloadBytes,
+    };
+    modelLoadProgressRef.current = initialProgress;
+    setModelLoadProgress(initialProgress);
     try {
       const result = await client.loadModel({
         manifestUrl: manifestUrl(),
       }, {
         signal: controller.signal,
         onProgress: (progress) => {
+          const received = Math.min(progress.loadedBytes, model.downloadBytes);
+          const shard = progress.shardIndex === null ? '' : ` · shard ${progress.shardIndex + 1}/${progress.shardCount}`;
+          const stageProgress = progress.stageProgress
+            ?? (progress.totalBytes > 0 ? progress.loadedBytes / progress.totalBytes : 0);
+          publishModelLoadProgress({
+            modelId,
+            modelLabel: model.displayName,
+            stage: progress.phase,
+            stageProgress: Math.min(1, Math.max(0, stageProgress)),
+            downloadedBytes: received,
+            totalBytes: model.downloadBytes,
+            residentBytes: progress.residentBytes ?? 0,
+            nativeStage: progress.nativeStage,
+            shards: progress.shards.map((item) => ({ ...item })),
+          });
+          if (progress.residentBytes !== null) {
+            setTelemetry((current) => ({ ...current, modelMemoryBytes: progress.residentBytes ?? 0 }));
+          }
           if (!reportsModelWeightProgress(progress.phase)) {
             setBootStatus('Reading pinned model manifest…');
             return;
           }
+          const stageLabel = progress.phase === 'cache'
+            ? 'Inspecting cache'
+            : progress.phase === 'verify'
+              ? 'Verifying shards'
+              : progress.phase === 'load'
+                ? 'Allocating model'
+                : 'Downloading model';
+          setBootStatus(`${stageLabel}${shard} · ${Math.round(stageProgress * 100)}%`);
+          if (progress.phase !== 'load') {
+            setStorage((current) => ({
+              ...current,
+              downloads: [
+                ...current.downloads.filter((download) => download.modelId !== modelId),
+                {
+                  modelId,
+                  label: model.displayName,
+                  receivedBytes: received,
+                  totalBytes: model.downloadBytes,
+                  state: received >= model.downloadBytes ? 'complete' : 'downloading',
+                },
+              ],
+            }));
+          }
         },
       });
       setLoadedModelId(modelId);
         device: result.backend === 'webgpu'
           ? capabilities?.webgpu.name || 'WebGPU adapter'
           : `CPU · ${capabilities?.hardwareConcurrency ?? navigator.hardwareConcurrency ?? 1} logical cores`,
+        modelMemoryBytes: result.backendReport.modelBufferBytes ?? model.downloadBytes,
+        kvMemoryBytes: result.backendReport.webgpuKvBufferBytes ?? 0,
         contextUsed: 0,
         contextLimit: result.context.size,
         gpuLayers: result.backendReport.layersGpu
           : result.backend === 'wasm' ? 'CPU' : 'unreported',
         graphSplits: result.backendReport.nGraphSplits,
       }));
+      publishModelLoadProgress({
+        ...modelLoadProgressRef.current,
+        modelId,
+        modelLabel: model.displayName,
+        stage: 'ready',
+        stageProgress: 1,
+        downloadedBytes: model.downloadBytes,
+        totalBytes: model.downloadBytes,
+        residentBytes: result.backendReport.allocatedBufferBytes ?? result.backendReport.modelBufferBytes ?? model.downloadBytes,
+        nativeStage: null,
+      });
       setBootStatus(`${model.displayName} loaded · ${result.backend.toUpperCase()} · ${result.context.size.toLocaleString()} ctx`);
       await refreshStorage();
     } catch (loadError) {
           error: errorMessage(loadError),
         });
       }
+      publishModelLoadProgress({
+        ...modelLoadProgressRef.current,
+        stage: operatorAborted ? 'idle' : 'error',
+        nativeStage: null,
+      });
       setStorage((current) => ({
         ...current,
         downloads: operatorAborted
     baseMessages: ChatMessage[],
   ) => {
     if (operationRef.current || !manifest) return;
+    const tier = UI_TO_TIER[activeModelId];
+    const selectedModel = manifest.models.find((candidate) => candidate.id === tier);
+    if (!selectedModel) {
+      setError(`Model ${tier} is absent from the pinned manifest.`);
+      return;
+    }
+    const requestedContext = targetContext(selectedModel);
+    const configured = loadedConfigurationRef.current;
+    const needsLoad = loadedModelId !== activeModelId
+      || configured?.backend !== settings.backend
+      || configured.contextSize !== requestedContext;
+    if (needsLoad) {
+      setError(`Load ${selectedModel.displayName} before running this prompt.`);
+      setBootStatus('Explicit model load required');
+      return;
+    }
     const controller = new AbortController();
     operationRef.current = controller;
     const nonce = crypto.randomUUID();
     setError(null);
     const run = async () => {
       setStreamState('streaming');
+      setBootStatus(`Generating with ${selectedModel.displayName}…`);
       const engineMessages = buildEngineHistory(historySnapshot, settings.systemPrompt);
       let visibleText = '';
       let reasoningText = '';
       let totalCompletionTokens = 0;
+      let totalPromptTokens = 0;
       let lastTotalTokens = 0;
       let tokensPerSecond = 0;
+      let prefillTokensPerSecond = 0;
+      let totalPromptSeconds = 0;
+      let totalDecodeSeconds = 0;
       let firstTokenAt = 0;
       const generationStartedAt = performance.now();
       let toolRounds = 0;
       let totalToolCalls = 0;
+      clearPendingInferenceProgress();
+      setTelemetry((current) => ({
+        ...current,
+        inferencePhase: 'prefill',
+        tokensPerSecond: 0,
+        prefillTokensPerSecond: 0,
+        decodeTokensPerSecond: 0,
+        promptProcessed: 0,
+        promptTotal: 0,
+        completionTokens: 0,
+        timeToFirstTokenMs: 0,
+      }));
       while (true) {
         let streamedText = '';
         let streamedReasoning = '';
         let streamedTokenEvents = 0;
+        const completionOffset = totalCompletionTokens;
         const result = await client.generate({
           messages: engineMessages,
           maxTokens: settings.maxTokens,
           cachePrompt: true,
         }, {
           signal: controller.signal,
+          onGenerationProgress: (progress) => {
+            publishInferenceProgress({
+              ...progress,
+              completionTokens: completionOffset + progress.completionTokens,
+            });
+          },
           onToken: (delta, reasoningDelta) => {
             if (!firstTokenAt && (delta || reasoningDelta)) firstTokenAt = performance.now();
             if (delta || reasoningDelta) streamedTokenEvents += 1;
           result.usage?.completionTokens,
           streamedTokenEvents,
         );
+        const roundPromptTokens = result.usage?.promptTokens ?? 0;
+        totalPromptTokens += roundPromptTokens;
         totalCompletionTokens += roundCompletionTokens;
         lastTotalTokens = Math.max(
           lastTotalTokens,
             roundCompletionTokens,
           ),
         );
+        const roundPrefillRate = result.timings?.promptTokensPerSecond ?? 0;
+        const roundDecodeRate = result.timings?.predictedTokensPerSecond ?? 0;
+        if (roundPromptTokens > 0 && roundPrefillRate > 0) {
+          totalPromptSeconds += roundPromptTokens / roundPrefillRate;
+        }
+        if (roundCompletionTokens > 0 && roundDecodeRate > 0) {
+          totalDecodeSeconds += roundCompletionTokens / roundDecodeRate;
+        }
         const thought = parseThoughtStream(result.text);
         const textual = parseToolCalls(thought.content);
         if (textual.incomplete || textual.errors.length > 0) {
       }
       const generationElapsedSeconds = Math.max(0.001, (performance.now() - generationStartedAt) / 1000);
+      tokensPerSecond = totalDecodeSeconds > 0
+        ? totalCompletionTokens / totalDecodeSeconds
+        : totalCompletionTokens / generationElapsedSeconds;
+      prefillTokensPerSecond = totalPromptSeconds > 0 ? totalPromptTokens / totalPromptSeconds : 0;
       const ttft = firstTokenAt ? Math.round(firstTokenAt - generationStartedAt) : 0;
       const report = await client.backendReport();
+      publishBackendReport(report);
+      clearPendingInferenceProgress();
       replaceMessage(setMessages, assistantId, (message) => ({
         ...message,
         state: 'complete',
         metrics: {
           tokens: totalCompletionTokens,
           tokensPerSecond,
+          promptTokensPerSecond: prefillTokensPerSecond,
           timeToFirstTokenMs: ttft,
         },
       }));
         ...current,
         contextUsed: Math.min(current.contextLimit, Math.max(lastTotalTokens, totalCompletionTokens)),
         tokensPerSecond,
+        prefillTokensPerSecond,
+        decodeTokensPerSecond: tokensPerSecond,
+        inferencePhase: 'complete',
+        promptProcessed: totalPromptTokens,
+        promptTotal: totalPromptTokens,
+        completionTokens: totalCompletionTokens,
         timeToFirstTokenMs: ttft,
         graphSplits: report.nGraphSplits,
         gpuLayers: report.layersGpu
           : current.gpuLayers,
       }));
       setStreamState('complete');
+      setBootStatus(`${selectedModel.displayName} complete · ${tokensPerSecond.toFixed(1)} tok/s`);
       await refreshStorage();
     };
     void run()
       .catch((runError) => {
+        clearPendingInferenceProgress();
         if (handleModelInvalidation(runError)) {
           const message = errorMessage(runError);
           replaceMessage(setMessages, assistantId, (current) => ({
         if (isAborted(runError, controller.signal)) {
           replaceMessage(setMessages, assistantId, (message) => ({ ...message, state: 'complete', isThinking: false }));
           setStreamState('complete');
+          setTelemetry((current) => ({ ...current, inferencePhase: 'idle' }));
           setBootStatus('Generation stopped by operator');
           return;
         }
         }));
         setError(message);
         setStreamState('error');
+        setTelemetry((current) => ({ ...current, inferencePhase: 'idle' }));
         setBootStatus('Runtime stopped safely');
       })
       .finally(() => {
       loadedModelId={effectiveLoadedModelId}
       messages={messages}
       streamState={streamState}
+      modelLoadProgress={modelLoadProgress}
       telemetry={telemetry}
       toolEvents={toolEvents}
       storage={storage}
       artifact={artifact}
       toolsEnabled={toolsEnabled}
       settings={settings}
       onRegenerate={handleRegenerate}
       onCancel={handleCancel}
       onToolsEnabledChange={setToolsEnabled}
       onOpenSettings={() => { if (!operationRef.current) setSettingsOpen(true); }}
       onCloseSettings={() => setSettingsOpen(false)}
       onSettingsChange={(nextSettings) => { if (!operationRef.current) setSettings(nextSettings); }}
       onDismissError={() => setError(null)}
       onRetryShard={handleLoadModel}
       onCloseArtifact={() => setArtifact(null)}
     />
   );
 }

src/app/components/ArtifactPane.tsx CHANGED Viewed

@@ -25,7 +25,7 @@ export function ArtifactPane({ artifact, onClose }: ArtifactPaneProps) {
   return (
     <section className="inspector-section artifact-section" aria-labelledby="artifact-title">
       <div className="section-heading compact">
-        <span>05</span>
         <div>
           <p className="eyebrow">Isolated terrarium</p>
           <h2 id="artifact-title">Artifact</h2>

   return (
     <section className="inspector-section artifact-section" aria-labelledby="artifact-title">
       <div className="section-heading compact">
+        <span>04</span>
         <div>
           <p className="eyebrow">Isolated terrarium</p>
           <h2 id="artifact-title">Artifact</h2>

src/app/components/BonsaiShell.tsx CHANGED Viewed

@@ -20,17 +20,16 @@ export function BonsaiShell(props: BonsaiShellProps) {
         <ModelRail
           models={props.models}
           activeModelId={props.activeModelId}
-          dflash={props.dflash}
           busy={busy}
           onModelSelect={props.onModelSelect}
-          onDFlashChange={props.onDFlashChange}
-          onRequestDownload={props.onRequestDownload}
         />
         <ChatSurface
           activeModel={activeModel}
           loadedModelId={props.loadedModelId}
           messages={props.messages}
           streamState={props.streamState}
           toolsEnabled={props.toolsEnabled}
           runtimeStatus={props.runtimeStatus}
           error={props.error}
@@ -46,7 +45,6 @@ export function BonsaiShell(props: BonsaiShellProps) {
         <InspectorPanel
           telemetry={props.telemetry}
           toolEvents={props.toolEvents}
-          storage={props.storage}
           artifact={props.artifact}
           onCloseArtifact={props.onCloseArtifact}
         />

         <ModelRail
           models={props.models}
           activeModelId={props.activeModelId}
           busy={busy}
           onModelSelect={props.onModelSelect}
         />
         <ChatSurface
           activeModel={activeModel}
           loadedModelId={props.loadedModelId}
           messages={props.messages}
           streamState={props.streamState}
+          modelLoadProgress={props.modelLoadProgress}
+          telemetry={props.telemetry}
           toolsEnabled={props.toolsEnabled}
           runtimeStatus={props.runtimeStatus}
           error={props.error}
         <InspectorPanel
           telemetry={props.telemetry}
           toolEvents={props.toolEvents}
           artifact={props.artifact}
           onCloseArtifact={props.onCloseArtifact}
         />

src/app/components/ChatSurface.tsx CHANGED Viewed

@@ -2,12 +2,15 @@ import { useMemo, useState, type FormEvent, type KeyboardEvent } from 'react';
 import type {
   ChatMessage,
   ComposerSubmission,
   ModelId,
   ModelOption,
   ShardRetryNotice,
   StreamState,
   ToolRun,
 } from '../../lib/contracts';
 import { MarkdownContent } from './MarkdownContent';
 interface ChatSurfaceProps {
@@ -15,6 +18,8 @@ interface ChatSurfaceProps {
   loadedModelId: ModelId | null;
   messages: ChatMessage[];
   streamState: StreamState;
   toolsEnabled: boolean;
   runtimeStatus: string;
   error: string | null;
@@ -33,6 +38,8 @@ export function ChatSurface({
   loadedModelId,
   messages,
   streamState,
   toolsEnabled,
   runtimeStatus,
   error,
@@ -46,7 +53,9 @@ export function ChatSurface({
   onToolsEnabledChange,
 }: ChatSurfaceProps) {
   const [prompt, setPrompt] = useState('');
-  const isBusy = streamState === 'streaming' || streamState === 'loading';
   const isLoaded = loadedModelId === activeModel.id;
   const logDate = useMemo(() => new Intl.DateTimeFormat('en-GB', {
     day: '2-digit', month: 'long', year: 'numeric',
@@ -54,7 +63,7 @@ export function ChatSurface({
   const submit = () => {
     const trimmed = prompt.trim();
-    if (!trimmed || isBusy) return;
     onSend({ prompt: trimmed, toolsEnabled });
     setPrompt('');
   };
@@ -83,11 +92,6 @@ export function ChatSurface({
           <span>{activeModel.capability} canopy</span>
           <span>{Math.round(activeModel.contextLimit / 1024)}K context</span>
           <span className={`live-label${isLoaded ? '' : ' is-dormant'}`}><i /> {isLoaded ? 'local graph' : 'not loaded'}</span>
-          {!isLoaded && (
-            <button className="header-load-button" type="button" disabled={isBusy} onClick={() => onLoadModel(activeModel.id)}>
-              Load locally
-            </button>
-          )}
         </div>
       </header>
@@ -129,6 +133,13 @@ export function ChatSurface({
       </section>
       <form className="composer" onSubmit={handleSubmit}>
         <div className="composer-meta">
           <button
             className={`tool-toggle${toolsEnabled ? ' is-on' : ''}`}
@@ -139,7 +150,7 @@ export function ChatSurface({
             <ToolIcon /> Tools {toolsEnabled ? 'armed' : 'off'}
           </button>
           {messages.some((message) => message.role === 'user') && (
-            <button className="regenerate-button" type="button" disabled={isBusy} onClick={onRegenerate}>
               Regenerate last
             </button>
           )}
@@ -152,17 +163,21 @@ export function ChatSurface({
             value={prompt}
             onChange={(event) => setPrompt(event.target.value)}
             onKeyDown={handleKeyDown}
-            placeholder={isLoaded ? 'Describe an observation or assign a tool…' : 'The first run will download this model…'}
             rows={2}
-            disabled={isBusy}
           />
           {isBusy ? (
             <button className="send-button stop" type="button" onClick={onCancel}>
-              <span aria-hidden="true" /> Stop
             </button>
           ) : (
             <button className="send-button" type="submit" disabled={!prompt.trim()}>
-              {isLoaded ? 'Run' : 'Load + run'} <ArrowIcon />
             </button>
           )}
         </div>
@@ -196,7 +211,10 @@ function Message({ message, ordinal }: { message: ChatMessage; ordinal: number }
       {message.metrics && (
         <footer>
           <span>{message.metrics.tokens} tok</span>
-          <span>{message.metrics.tokensPerSecond.toFixed(1)} tok/s</span>
           <span>TTFT {message.metrics.timeToFirstTokenMs} ms</span>
         </footer>
       )}
@@ -235,3 +253,11 @@ function ArrowIcon() {
     </svg>
   );
 }

 import type {
   ChatMessage,
   ComposerSubmission,
+  ModelLoadProgress,
   ModelId,
   ModelOption,
   ShardRetryNotice,
   StreamState,
+  TelemetrySnapshot,
   ToolRun,
 } from '../../lib/contracts';
+import { ComposerActivity } from './ComposerActivity';
 import { MarkdownContent } from './MarkdownContent';
 interface ChatSurfaceProps {
   loadedModelId: ModelId | null;
   messages: ChatMessage[];
   streamState: StreamState;
+  modelLoadProgress: ModelLoadProgress;
+  telemetry: TelemetrySnapshot;
   toolsEnabled: boolean;
   runtimeStatus: string;
   error: string | null;
   loadedModelId,
   messages,
   streamState,
+  modelLoadProgress,
+  telemetry,
   toolsEnabled,
   runtimeStatus,
   error,
   onToolsEnabledChange,
 }: ChatSurfaceProps) {
   const [prompt, setPrompt] = useState('');
+  const isLoading = streamState === 'loading';
+  const isStreaming = streamState === 'streaming';
+  const isBusy = isStreaming || isLoading;
   const isLoaded = loadedModelId === activeModel.id;
   const logDate = useMemo(() => new Intl.DateTimeFormat('en-GB', {
     day: '2-digit', month: 'long', year: 'numeric',
   const submit = () => {
     const trimmed = prompt.trim();
+    if (!trimmed || isBusy || !isLoaded) return;
     onSend({ prompt: trimmed, toolsEnabled });
     setPrompt('');
   };
           <span>{activeModel.capability} canopy</span>
           <span>{Math.round(activeModel.contextLimit / 1024)}K context</span>
           <span className={`live-label${isLoaded ? '' : ' is-dormant'}`}><i /> {isLoaded ? 'local graph' : 'not loaded'}</span>
         </div>
       </header>
       </section>
       <form className="composer" onSubmit={handleSubmit}>
+        <ComposerActivity
+          modelId={activeModel.id}
+          isLoaded={isLoaded}
+          streamState={streamState}
+          progress={modelLoadProgress}
+          telemetry={telemetry}
+        />
         <div className="composer-meta">
           <button
             className={`tool-toggle${toolsEnabled ? ' is-on' : ''}`}
             <ToolIcon /> Tools {toolsEnabled ? 'armed' : 'off'}
           </button>
           {messages.some((message) => message.role === 'user') && (
+            <button className="regenerate-button" type="button" disabled={isBusy || !isLoaded} onClick={onRegenerate}>
               Regenerate last
             </button>
           )}
             value={prompt}
             onChange={(event) => setPrompt(event.target.value)}
             onKeyDown={handleKeyDown}
+            placeholder={isLoaded ? 'Describe an observation or assign a tool…' : 'Write while the model loads, then run locally…'}
             rows={2}
+            disabled={isStreaming}
           />
           {isBusy ? (
             <button className="send-button stop" type="button" onClick={onCancel}>
+              <span aria-hidden="true" /> {isLoading ? 'Stop load' : 'Stop'}
+            </button>
+          ) : !isLoaded ? (
+            <button className="send-button load" type="button" onClick={() => onLoadModel(activeModel.id)}>
+              Load model <DownloadIcon />
             </button>
           ) : (
             <button className="send-button" type="submit" disabled={!prompt.trim()}>
+              Run <ArrowIcon />
             </button>
           )}
         </div>
       {message.metrics && (
         <footer>
           <span>{message.metrics.tokens} tok</span>
+          {message.metrics.promptTokensPerSecond !== undefined && (
+            <span>Prefill {message.metrics.promptTokensPerSecond.toFixed(1)} tok/s</span>
+          )}
+          <span>Decode {message.metrics.tokensPerSecond.toFixed(1)} tok/s</span>
           <span>TTFT {message.metrics.timeToFirstTokenMs} ms</span>
         </footer>
       )}
     </svg>
   );
 }
+function DownloadIcon() {
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M10 2v11m-4-4 4 4 4-4M3 17h14" />
+    </svg>
+  );
+}

src/app/components/ComposerActivity.tsx ADDED Viewed

	@@ -0,0 +1,205 @@

+import type {
+  ModelId,
+  ModelLoadProgress,
+  StreamState,
+  TelemetrySnapshot,
+} from '../../lib/contracts';
+import { formatBytes, formatPercent } from '../../lib/format';
+interface ComposerActivityProps {
+  modelId: ModelId;
+  isLoaded: boolean;
+  streamState: StreamState;
+  progress: ModelLoadProgress;
+  telemetry: TelemetrySnapshot;
+}
+const LOAD_STAGES = [
+  ['manifest', 'Manifest'],
+  ['cache', 'Cache'],
+  ['download', 'Download'],
+  ['verify', 'Verify'],
+  ['load', 'Allocate'],
+] as const;
+type LoadStage = typeof LOAD_STAGES[number][0];
+function ratio(value: number, total: number): number {
+  return total > 0 ? Math.min(1, Math.max(0, value / total)) : 0;
+}
+function humanizeStage(value: string | null): string {
+  if (!value) return '';
+  return value.replaceAll('_', ' ').replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+export function ComposerActivity({
+  modelId,
+  isLoaded,
+  streamState,
+  progress,
+  telemetry,
+}: ComposerActivityProps) {
+  const tracksModel = progress.modelId === modelId;
+  const isLoading = streamState === 'loading' && tracksModel;
+  const isInferring = streamState === 'streaming'
+    || telemetry.inferencePhase === 'prefill'
+    || telemetry.inferencePhase === 'decode';
+  const activeStage = tracksModel && LOAD_STAGES.some(([stage]) => stage === progress.stage)
+    ? progress.stage as LoadStage
+    : null;
+  const downloadRatio = tracksModel ? ratio(progress.downloadedBytes, progress.totalBytes) : 0;
+  const verifiedBytes = displayShardsTotal(progress.shards, 'verifiedBytes');
+  const verifiedRatio = tracksModel ? ratio(verifiedBytes, progress.totalBytes) : 0;
+  const prefillRatio = ratio(telemetry.promptProcessed, telemetry.promptTotal);
+  const displayShards = tracksModel ? progress.shards : [];
+  const pipelineProgress = !tracksModel
+    ? 0
+    : progress.stage === 'ready'
+      ? 1
+      : progress.stage === 'load'
+        ? 0.85 + Math.min(1, Math.max(0, progress.stageProgress)) * 0.15
+        : progress.stage === 'manifest'
+          ? Math.min(1, Math.max(0, progress.stageProgress)) * 0.05
+          : Math.min(0.85, 0.05 + downloadRatio * 0.55 + verifiedRatio * 0.25);
+  const status = isLoading
+    ? progress.nativeStage
+      ? humanizeStage(progress.nativeStage)
+      : LOAD_STAGES.find(([stage]) => stage === activeStage)?.[1] ?? 'Preparing model'
+    : isInferring
+      ? telemetry.inferencePhase === 'prefill' ? 'Prefilling prompt' : 'Generating response'
+      : progress.stage === 'error' && tracksModel
+        ? 'Model load stopped'
+        : isLoaded ? 'Model ready in this tab' : 'Model is not loaded';
+  return (
+    <section className={`composer-activity${isLoading ? ' is-loading' : ''}${isInferring ? ' is-inference' : ''}`} aria-label="Runtime activity">
+      <div className="activity-stage-line" aria-hidden="true">
+        {LOAD_STAGES.map(([stage, label]) => {
+          const complete = isLoaded || progress.stage === 'ready' || (
+            stage === 'manifest' ? progress.stage !== 'idle' && progress.stage !== 'manifest'
+              : stage === 'cache' ? progress.shards.length > 0 && progress.stage !== 'manifest'
+                : stage === 'download' ? downloadRatio >= 1
+                  : stage === 'verify' ? progress.shards.length > 0 && verifiedRatio >= 1
+                    : false
+          );
+          const current = isLoading && activeStage === stage;
+          return (
+            <span className={`${complete ? 'is-complete' : ''}${current ? ' is-current' : ''}`} key={stage}>
+              <i /> {label}
+            </span>
+          );
+        })}
+      </div>
+      <div className="activity-status" aria-live="polite" aria-atomic="true">
+        <div>
+          <span className="activity-pulse" aria-hidden="true" />
+          <strong>{status}</strong>
+        </div>
+        {isLoading && (
+          <span>{formatPercent(pipelineProgress)} · {formatBytes(progress.downloadedBytes)} / {formatBytes(progress.totalBytes)}</span>
+        )}
+        {isInferring && telemetry.inferencePhase === 'prefill' && (
+          <span>{telemetry.promptProcessed.toLocaleString()} / {telemetry.promptTotal.toLocaleString()} tokens</span>
+        )}
+        {isInferring && telemetry.inferencePhase === 'decode' && (
+          <span>{telemetry.completionTokens.toLocaleString()} generated tokens</span>
+        )}
+        {!isLoading && !isInferring && isLoaded && progress.residentBytes > 0 && (
+          <span>{formatBytes(progress.residentBytes)} allocated</span>
+        )}
+      </div>
+      {isInferring ? (
+        <div className="inference-live-grid">
+          <LiveMetric
+            label="Prefill"
+            value={`${telemetry.prefillTokensPerSecond.toFixed(1)} tok/s`}
+            detail={telemetry.promptTotal > 0 ? formatPercent(prefillRatio) : 'waiting'}
+            progress={prefillRatio}
+            active={telemetry.inferencePhase === 'prefill'}
+          />
+          <LiveMetric
+            label="Decode"
+            value={`${telemetry.decodeTokensPerSecond.toFixed(1)} tok/s`}
+            detail={`${telemetry.completionTokens.toLocaleString()} tok`}
+            progress={Math.min(1, telemetry.decodeTokensPerSecond / 20)}
+            active={telemetry.inferencePhase === 'decode'}
+          />
+        </div>
+      ) : (
+        <div className="load-live-grid">
+          <div className="activity-track-block">
+            <div><span>Model transfer</span><small>{formatPercent(downloadRatio)}</small></div>
+            <ProgressTrack label="Model transfer" value={downloadRatio} />
+          </div>
+          <div className="activity-track-block">
+            <div><span>Load pipeline</span><small>{formatPercent(pipelineProgress)}</small></div>
+            <ProgressTrack label="Overall model load pipeline" value={pipelineProgress} />
+          </div>
+          <div className="activity-memory">
+            <span>Resident</span>
+            <strong>{formatBytes(tracksModel ? progress.residentBytes : 0)}</strong>
+          </div>
+        </div>
+      )}
+      <div className={`shard-strip${displayShards.length === 0 ? ' is-empty' : ''}`} aria-label="Model shard progress">
+        {displayShards.length === 0
+          ? <span className="shard-placeholder">Shard detail appears during cache inspection and transfer.</span>
+          : displayShards.map((shard) => {
+            const shardRatio = shard.state === 'complete' || shard.state === 'cached'
+              ? 1
+              : shard.state === 'verifying'
+                ? ratio(shard.verifiedBytes, shard.totalBytes)
+                : ratio(shard.loadedBytes, shard.totalBytes);
+            return (
+              <div className={`shard-cell state-${shard.state}`} key={`${shard.index}-${shard.path}`} title={shard.path}>
+                <span><b>S{shard.index + 1}</b><small>{formatPercent(shardRatio)}</small></span>
+                <ProgressTrack label={`Shard ${shard.index + 1} ${shard.state}`} value={shardRatio} />
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+}
+function displayShardsTotal(
+  shards: ModelLoadProgress['shards'],
+  field: 'loadedBytes' | 'verifiedBytes',
+): number {
+  return shards.reduce((total, shard) => total + shard[field], 0);
+}
+function LiveMetric({
+  label,
+  value,
+  detail,
+  progress,
+  active,
+}: {
+  label: string;
+  value: string;
+  detail: string;
+  progress: number;
+  active: boolean;
+}) {
+  return (
+    <div className={`live-metric${active ? ' is-active' : ''}`}>
+      <div><span>{label}</span><strong>{value}</strong><small>{detail}</small></div>
+      <ProgressTrack label={`${label} live progress`} value={progress} />
+    </div>
+  );
+}
+function ProgressTrack({ label, value }: { label: string; value: number }) {
+  const percentage = Math.round(Math.min(1, Math.max(0, value)) * 100);
+  return (
+    <div className="activity-track" role="progressbar" aria-label={label} aria-valuemin={0} aria-valuemax={100} aria-valuenow={percentage}>
+      <span style={{ width: `${percentage}%` }} />
+    </div>
+  );
+}

src/app/components/InspectorPanel.tsx CHANGED Viewed

@@ -1,20 +1,26 @@
 import type { ArtifactDocument } from '../../lib/agent-tools';
-import type { StorageStatus, TelemetrySnapshot, ToolEvent } from '../../lib/contracts';
-import { formatBytes, formatPercent } from '../../lib/format';
 import { ArtifactPane } from './ArtifactPane';
 interface InspectorPanelProps {
   telemetry: TelemetrySnapshot;
   toolEvents: ToolEvent[];
-  storage: StorageStatus;
   artifact: ArtifactDocument | null;
   onCloseArtifact: () => void;
 }
-export function InspectorPanel({ telemetry, toolEvents, storage, artifact, onCloseArtifact }: InspectorPanelProps) {
   const contextRatio = telemetry.contextLimit > 0 ? telemetry.contextUsed / telemetry.contextLimit : 0;
-  const storageRatio = storage.quotaBytes > 0 ? storage.usedBytes / storage.quotaBytes : 0;
-  const speedRatio = Math.min(1, Math.max(0, telemetry.tokensPerSecond / 50));
   return (
     <aside className="inspector" aria-label="Runtime inspector">
@@ -25,18 +31,24 @@ export function InspectorPanel({ telemetry, toolEvents, storage, artifact, onClo
             <p className="eyebrow">Live cambium</p>
             <h2 id="telemetry-title">Telemetry</h2>
           </div>
-          <span className="sampling-label"><i /> sampling</span>
         </div>
         <div className="speed-gauge">
           <div className="gauge-ring" style={{ '--gauge': `${Math.round(speedRatio * 100)}%` } as React.CSSProperties}>
             <div>
-              <strong>{telemetry.tokensPerSecond.toFixed(1)}</strong>
-              <small>tokens / sec</small>
             </div>
           </div>
           <dl>
             <div><dt>Backend</dt><dd>{telemetry.backend}</dd></div>
             <div><dt>First token</dt><dd>{telemetry.timeToFirstTokenMs} ms</dd></div>
             <div><dt>Graph splits</dt><dd>{telemetry.graphSplits ?? '—'}</dd></div>
           </dl>
@@ -53,8 +65,8 @@ export function InspectorPanel({ telemetry, toolEvents, storage, artifact, onClo
         <Meter label="Context rings" value={contextRatio} detail={`${telemetry.contextUsed.toLocaleString()} / ${telemetry.contextLimit.toLocaleString()}`} />
         <div className="memory-grid">
-          <div><small>Model buffer</small><strong>{formatBytes(telemetry.modelMemoryBytes)}</strong></div>
-          <div><small>KV growth</small><strong>{formatBytes(telemetry.kvMemoryBytes)}</strong></div>
         </div>
       </section>
@@ -78,42 +90,6 @@ export function InspectorPanel({ telemetry, toolEvents, storage, artifact, onClo
         </ol>
       </section>
-      <section className="inspector-section storage-section" aria-labelledby="storage-title">
-        <div className="section-heading compact">
-          <span>04</span>
-          <div>
-            <p className="eyebrow">Root cellar</p>
-            <h2 id="storage-title">Downloads</h2>
-          </div>
-          <span className={`persistence${storage.persistent ? ' is-persistent' : ''}`}>
-            {storage.persistent ? 'persistent' : 'session'}
-          </span>
-        </div>
-        <Meter
-          label="Browser storage"
-          value={storageRatio}
-          detail={`${formatBytes(storage.usedBytes)} of ${formatBytes(storage.quotaBytes)}`}
-        />
-        {storage.downloads.map((download) => {
-          const ratio = download.receivedBytes / download.totalBytes;
-          return (
-            <div className="download-item" key={download.modelId}>
-              <div>
-                <span className={`download-state state-${download.state}`}>{download.state}</span>
-                <strong>{download.label}</strong>
-                <small>{formatBytes(download.receivedBytes)} / {formatBytes(download.totalBytes)}</small>
-              </div>
-              <span className="download-percent">{formatPercent(ratio)}</span>
-              <div className="download-track" aria-label={`${download.label} download progress`} role="progressbar" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(ratio * 100)}>
-                <span style={{ width: formatPercent(ratio) }} />
-              </div>
-            </div>
-          );
-        })}
-      </section>
       <ArtifactPane artifact={artifact} onClose={onCloseArtifact} />
     </aside>
   );

 import type { ArtifactDocument } from '../../lib/agent-tools';
+import type { TelemetrySnapshot, ToolEvent } from '../../lib/contracts';
+import { formatBytes } from '../../lib/format';
 import { ArtifactPane } from './ArtifactPane';
 interface InspectorPanelProps {
   telemetry: TelemetrySnapshot;
   toolEvents: ToolEvent[];
   artifact: ArtifactDocument | null;
   onCloseArtifact: () => void;
 }
+export function InspectorPanel({ telemetry, toolEvents, artifact, onCloseArtifact }: InspectorPanelProps) {
   const contextRatio = telemetry.contextLimit > 0 ? telemetry.contextUsed / telemetry.contextLimit : 0;
+  const activeRate = telemetry.inferencePhase === 'prefill'
+    ? telemetry.prefillTokensPerSecond
+    : telemetry.decodeTokensPerSecond || telemetry.tokensPerSecond;
+  const speedRatio = Math.min(1, Math.max(0, activeRate / 50));
+  const gaugeLabel = telemetry.inferencePhase === 'prefill'
+    ? 'prefill tok / sec'
+    : telemetry.inferencePhase === 'decode'
+      ? 'decode tok / sec'
+      : 'average tok / sec';
   return (
     <aside className="inspector" aria-label="Runtime inspector">
             <p className="eyebrow">Live cambium</p>
             <h2 id="telemetry-title">Telemetry</h2>
           </div>
+          <span className={`sampling-label phase-${telemetry.inferencePhase}`}><i /> {
+            telemetry.inferencePhase === 'idle'
+              ? 'ready'
+              : telemetry.inferencePhase === 'complete' ? 'average' : 'live'
+          }</span>
         </div>
         <div className="speed-gauge">
           <div className="gauge-ring" style={{ '--gauge': `${Math.round(speedRatio * 100)}%` } as React.CSSProperties}>
             <div>
+              <strong>{activeRate.toFixed(1)}</strong>
+              <small>{gaugeLabel}</small>
             </div>
           </div>
           <dl>
             <div><dt>Backend</dt><dd>{telemetry.backend}</dd></div>
+            <div><dt>Prefill</dt><dd>{telemetry.prefillTokensPerSecond.toFixed(1)} tok/s</dd></div>
+            <div><dt>Decode</dt><dd>{telemetry.decodeTokensPerSecond.toFixed(1)} tok/s</dd></div>
             <div><dt>First token</dt><dd>{telemetry.timeToFirstTokenMs} ms</dd></div>
             <div><dt>Graph splits</dt><dd>{telemetry.graphSplits ?? '—'}</dd></div>
           </dl>
         <Meter label="Context rings" value={contextRatio} detail={`${telemetry.contextUsed.toLocaleString()} / ${telemetry.contextLimit.toLocaleString()}`} />
         <div className="memory-grid">
+          <div><small>Model allocation</small><strong>{formatBytes(telemetry.modelMemoryBytes)}</strong></div>
+          <div><small>KV allocation</small><strong>{formatBytes(telemetry.kvMemoryBytes)}</strong></div>
         </div>
       </section>
         </ol>
       </section>
       <ArtifactPane artifact={artifact} onClose={onCloseArtifact} />
     </aside>
   );

src/app/components/ModelRail.tsx CHANGED Viewed

@@ -1,13 +1,10 @@
-import type { DFlashState, ModelId, ModelOption } from '../../lib/contracts';
 interface ModelRailProps {
   models: ModelOption[];
   activeModelId: ModelId;
-  dflash: DFlashState;
   busy: boolean;
   onModelSelect: (modelId: ModelId) => void;
-  onDFlashChange: (enabled: boolean) => void;
-  onRequestDownload: (modelId: ModelId) => void;
 }
 const availabilityLabels: Record<ModelOption['availability'], string> = {
@@ -21,11 +18,8 @@ const availabilityLabels: Record<ModelOption['availability'], string> = {
 export function ModelRail({
   models,
   activeModelId,
-  dflash,
   busy,
   onModelSelect,
-  onDFlashChange,
-  onRequestDownload,
 }: ModelRailProps) {
   return (
     <aside className="model-rail" aria-labelledby="model-rail-title">
@@ -62,47 +56,12 @@ export function ModelRail({
                 </span>
                 <span className="model-footprint">{model.footprint}</span>
               </button>
-              {(model.availability === 'remote' || model.availability === 'cached' || model.availability === 'limited') && (
-                <button className="text-action" type="button" disabled={busy} onClick={() => onRequestDownload(model.id)}>
-                  {model.availability === 'cached' ? 'Load cached specimen' : model.availability === 'limited' ? 'Try device gate' : 'Download & load'} <span aria-hidden="true">↘</span>
-                </button>
-              )}
-              {model.availability === 'loading' && <span className="text-action is-status">Preparing local graph…</span>}
               {model.availability === 'limited' && <small className="model-limit-reason">{model.limitReason ?? 'Device gate unavailable'}</small>}
             </article>
           );
         })}
       </div>
-      <section className="dflash-card" aria-labelledby="dflash-title">
-        <div className="dflash-heading">
-          <div>
-            <span className="experimental-stamp">Inspection only</span>
-            <h3 id="dflash-title">DFlash research lane</h3>
-          </div>
-          <button
-            className="switch"
-            type="button"
-            role="switch"
-            aria-checked={dflash.enabled}
-            disabled={!dflash.available}
-            onClick={() => onDFlashChange(!dflash.enabled)}
-            aria-label="Toggle DFlash speculative decoding"
-          >
-            <span />
-          </button>
-        </div>
-        <p>{dflash.reason}</p>
-        <small className="dflash-contract">{dflash.status} · default-off D0–D3 gate</small>
-        <div className="dflash-axis" aria-hidden="true">
-          <span />
-          <span />
-          <span />
-          <span />
-          <span />
-        </div>
-      </section>
       <footer className="rail-footnote">
         <span>GGUF · Q1_0</span>
         <span>Manifest v2 · commit pinned</span>

+import type { ModelId, ModelOption } from '../../lib/contracts';
 interface ModelRailProps {
   models: ModelOption[];
   activeModelId: ModelId;
   busy: boolean;
   onModelSelect: (modelId: ModelId) => void;
 }
 const availabilityLabels: Record<ModelOption['availability'], string> = {
 export function ModelRail({
   models,
   activeModelId,
   busy,
   onModelSelect,
 }: ModelRailProps) {
   return (
     <aside className="model-rail" aria-labelledby="model-rail-title">
                 </span>
                 <span className="model-footprint">{model.footprint}</span>
               </button>
               {model.availability === 'limited' && <small className="model-limit-reason">{model.limitReason ?? 'Device gate unavailable'}</small>}
             </article>
           );
         })}
       </div>
       <footer className="rail-footnote">
         <span>GGUF · Q1_0</span>
         <span>Manifest v2 · commit pinned</span>

src/app/styles.css CHANGED Viewed

@@ -15,6 +15,10 @@
   --display: "Bodoni 72", Didot, "Iowan Old Style", Baskerville, serif;
   --body: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
   --mono: "Berkeley Mono", Iosevka, "SFMono-Regular", Consolas, monospace;
   font-family: var(--body);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -37,6 +41,7 @@ body {
     linear-gradient(rgba(17, 21, 18, 0.045) 1px, transparent 1px) 0 0 / 22px 22px,
     var(--paper);
   color: var(--paper);
 }
 button,
@@ -159,7 +164,7 @@ button:disabled {
 .eyebrow {
   margin: 0 0 5px;
   color: rgba(232, 223, 202, 0.52);
-  font: 600 9px/1 var(--mono);
   letter-spacing: 0.18em;
   text-transform: uppercase;
 }
@@ -196,14 +201,14 @@ button:disabled {
 .local-promise strong {
   color: var(--phosphor);
-  font: 600 10px/1 var(--mono);
   letter-spacing: 0.13em;
   text-transform: uppercase;
 }
 .local-promise small {
   color: var(--paper-ghost);
-  font: 11px/1.2 var(--body);
 }
 .header-actions {
@@ -222,19 +227,19 @@ button:disabled {
 }
 .station-clock small {
-  font-size: 8px;
   letter-spacing: 0.18em;
 }
 .station-clock span {
   margin-top: 4px;
-  font-size: 10px;
   letter-spacing: 0.09em;
 }
 .icon-button {
-  width: 38px;
-  height: 38px;
   display: grid;
   place-items: center;
   border: 1px solid rgba(232, 223, 202, 0.24);
@@ -260,7 +265,7 @@ button:disabled {
 .workspace-grid {
   min-height: calc(100dvh - 76px);
   display: grid;
-  grid-template-columns: clamp(240px, 18vw, 286px) minmax(510px, 1fr) clamp(310px, 23vw, 370px);
   grid-template-areas: "models chat inspector";
 }
@@ -307,7 +312,7 @@ button:disabled {
 .rail-heading > span,
 .section-heading > span:first-child {
   color: var(--phosphor);
-  font: 500 9px/1 var(--mono);
   border-top: 1px solid var(--phosphor);
   padding-top: 5px;
 }
@@ -315,7 +320,7 @@ button:disabled {
 .rail-heading h2,
 .section-heading h2 {
   margin: 0;
-  font: 400 22px/1 var(--display);
   letter-spacing: -0.025em;
 }
@@ -343,7 +348,8 @@ button:disabled {
   display: grid;
   grid-template-columns: 23px 1fr auto;
   gap: 8px;
-  padding: 12px 8px 11px;
   text-align: left;
   color: var(--paper);
   border: 0;
@@ -357,7 +363,7 @@ button:disabled {
 .model-index {
   color: rgba(232, 223, 202, 0.38);
-  font: 8px/1 var(--mono);
   padding-top: 4px;
 }
@@ -375,13 +381,13 @@ button:disabled {
 }
 .model-title-line strong {
-  font: 500 20px/1 var(--display);
 }
 .model-copy em {
   overflow: hidden;
   color: rgba(232, 223, 202, 0.46);
-  font: italic 10px/1.2 var(--display);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -389,12 +395,12 @@ button:disabled {
 .model-copy > span:last-child {
   margin-top: 3px;
   color: var(--paper-ghost);
-  font-size: 10px;
 }
 .availability {
   padding: 2px 4px;
-  font: 600 7px/1 var(--mono);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   border: 1px solid var(--line-light);
@@ -416,32 +422,7 @@ button:disabled {
 .model-footprint {
   align-self: end;
   color: rgba(232, 223, 202, 0.39);
-  font: 8px/1 var(--mono);
-  white-space: nowrap;
-}
-.text-action {
-  width: calc(100% - 30px);
-  margin: -3px 8px 9px 30px;
-  padding: 7px 0;
-  color: var(--rust);
-  border: 0;
-  border-top: 1px dashed rgba(201, 111, 67, 0.35);
-  background: transparent;
-  font: 8px/1 var(--mono);
-  text-align: left;
-  cursor: pointer;
-}
-.text-action span {
-  float: right;
-}
-.text-action.is-status {
-  display: block;
-  cursor: default;
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -449,102 +430,7 @@ button:disabled {
   display: block;
   margin: -4px 8px 9px 30px;
   color: rgba(232, 223, 202, 0.58);
-  font: 8px/1.35 var(--mono);
-}
-.dflash-card {
-  position: relative;
-  z-index: 1;
-  margin-top: auto;
-  padding: 13px 12px 11px;
-  border: 1px dashed rgba(232, 223, 202, 0.23);
-  background: rgba(17, 21, 18, 0.72);
-}
-.dflash-card.is-available {
-  border-color: rgba(185, 255, 69, 0.48);
-}
-.dflash-heading {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-}
-.dflash-heading h3 {
-  margin: 7px 0 0;
-  font: 500 14px/1 var(--display);
-}
-.experimental-stamp {
-  display: inline-block;
-  color: var(--rust);
-  border: 1px solid currentColor;
-  padding: 3px 5px 2px;
-  font: 700 7px/1 var(--mono);
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  transform: rotate(-2deg);
-}
-.switch {
-  width: 35px;
-  height: 18px;
-  padding: 2px;
-  border: 1px solid rgba(232, 223, 202, 0.3);
-  border-radius: 10px;
-  background: transparent;
-  cursor: pointer;
-}
-.switch span {
-  display: block;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: rgba(232, 223, 202, 0.42);
-  transition: transform 170ms ease, background 170ms ease;
-}
-.switch[aria-checked="true"] {
-  border-color: var(--phosphor);
-}
-.switch[aria-checked="true"] span {
-  background: var(--phosphor);
-  transform: translateX(17px);
-}
-.switch:disabled {
-  opacity: 0.38;
-}
-.dflash-card p {
-  margin: 9px 0 5px;
-  color: rgba(232, 223, 202, 0.5);
-  font: 9px/1.45 var(--body);
-}
-.dflash-contract {
-  display: block;
-  margin-bottom: 11px;
-  color: rgba(201, 111, 67, 0.72);
-  font: 7px/1.3 var(--mono);
-  text-transform: uppercase;
-}
-.dflash-axis {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-top: 1px solid rgba(232, 223, 202, 0.12);
-}
-.dflash-axis span {
-  width: 1px;
-  height: 5px;
-  margin-top: -1px;
-  background: rgba(232, 223, 202, 0.28);
 }
 .rail-footnote {
@@ -553,9 +439,9 @@ button:disabled {
   display: flex;
   justify-content: space-between;
   gap: 8px;
-  margin-top: 12px;
   color: rgba(232, 223, 202, 0.3);
-  font: 7px/1 var(--mono);
   letter-spacing: 0.03em;
 }
@@ -589,14 +475,14 @@ button:disabled {
 .chat-header h2 {
   display: inline;
   margin: 0;
-  font: 500 clamp(25px, 2.4vw, 37px)/1 var(--display);
   letter-spacing: -0.045em;
 }
 .botanical-subtitle {
   margin-left: 10px;
   color: rgba(17, 21, 18, 0.46);
-  font: italic 12px/1 var(--display);
 }
 .chat-header-meta {
@@ -604,28 +490,11 @@ button:disabled {
   grid-template-columns: repeat(2, auto);
   gap: 5px 13px;
   color: rgba(17, 21, 18, 0.55);
-  font: 8px/1 var(--mono);
   text-transform: uppercase;
   letter-spacing: 0.07em;
 }
-.header-load-button {
-  grid-column: span 2;
-  justify-self: end;
-  padding: 6px 9px;
-  color: var(--ink);
-  border: 1px solid var(--ink);
-  background: var(--phosphor);
-  font: 700 7px/1 var(--mono);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  cursor: pointer;
-}
-.header-load-button:disabled {
-  opacity: 0.42;
-}
 .live-label {
   grid-column: span 2;
   justify-self: end;
@@ -675,13 +544,13 @@ button:disabled {
 .runtime-error strong {
   color: #ff9a68;
-  font: 700 8px/1 var(--mono);
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
 .runtime-error span {
-  font: 10px/1.35 var(--mono);
   overflow-wrap: anywhere;
 }
@@ -690,7 +559,8 @@ button:disabled {
   padding: 5px 8px;
   border: 1px solid rgba(232, 223, 202, 0.3);
   background: transparent;
-  font: 7px/1 var(--mono);
   text-transform: uppercase;
   cursor: pointer;
 }
@@ -712,7 +582,7 @@ button:disabled {
   color: rgba(17, 21, 18, 0.4);
   border-bottom: 1px solid rgba(17, 21, 18, 0.09);
   background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(17, 21, 18, 0.2) 14px 15px) left bottom / 100% 4px no-repeat;
-  font: 7px/1 var(--mono);
 }
 .transcript {
@@ -728,7 +598,7 @@ button:disabled {
   gap: 10px;
   margin-bottom: 22px;
   color: rgba(17, 21, 18, 0.45);
-  font: 8px/1 var(--mono);
   letter-spacing: 0.1em;
   text-transform: uppercase;
 }
@@ -762,7 +632,7 @@ button:disabled {
 .transcript-empty p {
   margin: 0;
-  font-size: 11px;
   line-height: 1.5;
 }
@@ -778,7 +648,7 @@ button:disabled {
   gap: 8px;
   margin-bottom: 8px;
   color: rgba(17, 21, 18, 0.47);
-  font: 8px/1 var(--mono);
   text-transform: uppercase;
   letter-spacing: 0.07em;
 }
@@ -797,7 +667,7 @@ button:disabled {
 }
 .message-content {
-  font: 15px/1.55 var(--body);
 }
 .message-content > p {
@@ -879,12 +749,12 @@ button:disabled {
   color: rgba(17, 21, 18, 0.62);
   border: 1px dashed rgba(17, 21, 18, 0.24);
   background: rgba(17, 21, 18, 0.035);
-  font-size: 11px;
 }
 .reasoning-block summary {
   color: #4d6728;
-  font: 700 7px/1 var(--mono);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   cursor: pointer;
@@ -903,7 +773,7 @@ button:disabled {
 .message-error {
   margin: 9px 0 0;
   color: #8d321b;
-  font: 9px/1.4 var(--mono);
 }
 .message.has-error {
@@ -948,7 +818,7 @@ button:disabled {
   padding-top: 7px;
   color: rgba(17, 21, 18, 0.43);
   border-top: 1px dashed rgba(17, 21, 18, 0.19);
-  font: 8px/1 var(--mono);
 }
 .stream-cursor {
@@ -982,12 +852,12 @@ button:disabled {
 }
 .tool-call code {
-  font: 9px/1.4 var(--mono);
 }
 .tool-call summary > span:last-child {
   color: rgba(17, 21, 18, 0.48);
-  font: 7px/1 var(--mono);
   text-transform: uppercase;
 }
@@ -1023,12 +893,12 @@ button:disabled {
 .tool-call > div p {
   margin: 5px 0 0;
   color: rgba(17, 21, 18, 0.58);
-  font-size: 10px;
 }
 .composer {
   position: relative;
-  padding: 10px clamp(21px, 3vw, 44px) 18px;
   border-top: 1px solid var(--line-dark);
   background: rgba(216, 205, 180, 0.82);
   box-shadow: 0 -15px 38px rgba(17, 21, 18, 0.06);
@@ -1046,6 +916,258 @@ button:disabled {
   opacity: 0.23;
 }
 .composer-meta {
   display: flex;
   align-items: center;
@@ -1053,18 +1175,20 @@ button:disabled {
   gap: 12px;
   margin-bottom: 7px;
   color: rgba(17, 21, 18, 0.46);
-  font: 8px/1 var(--mono);
 }
 .tool-toggle {
   display: flex;
   align-items: center;
   gap: 5px;
-  padding: 0;
   color: rgba(17, 21, 18, 0.54);
   border: 0;
   background: transparent;
-  font: 700 8px/1 var(--mono);
   text-transform: uppercase;
   cursor: pointer;
 }
@@ -1075,11 +1199,12 @@ button:disabled {
 .regenerate-button {
   margin-right: auto;
-  padding: 0;
   color: rgba(17, 21, 18, 0.54);
   border: 0;
   background: transparent;
-  font: 700 8px/1 var(--mono);
   text-transform: uppercase;
   cursor: pointer;
 }
@@ -1100,7 +1225,7 @@ button:disabled {
   display: grid;
   grid-template-columns: 1fr auto;
   position: relative;
-  min-height: 76px;
   border: 1px solid var(--ink);
   background: rgba(232, 223, 202, 0.83);
   box-shadow: 4px 4px 0 rgba(17, 21, 18, 0.1);
@@ -1111,7 +1236,7 @@ button:disabled {
   top: 7px;
   left: 11px;
   color: rgba(17, 21, 18, 0.45);
-  font: 7px/1 var(--mono);
   letter-spacing: 0.09em;
   text-transform: uppercase;
 }
@@ -1124,7 +1249,7 @@ button:disabled {
   border: 0;
   outline: none;
   background: transparent;
-  font: 14px/1.4 var(--body);
 }
 .composer-field textarea::placeholder {
@@ -1132,7 +1257,8 @@ button:disabled {
 }
 .send-button {
-  min-width: 82px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1141,7 +1267,7 @@ button:disabled {
   color: var(--ink);
   border: 1px solid var(--ink);
   background: var(--phosphor);
-  font: 700 9px/1 var(--mono);
   text-transform: uppercase;
   cursor: pointer;
   transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
@@ -1174,6 +1300,10 @@ button:disabled {
   background: var(--rust);
 }
 .inspector {
   grid-area: inspector;
   min-height: calc(100dvh - 76px);
@@ -1203,16 +1333,15 @@ button:disabled {
 }
 .section-heading h2 {
-  font-size: 20px;
 }
-.sampling-label,
-.persistence {
   display: flex;
   align-items: center;
   gap: 6px;
   color: rgba(232, 223, 202, 0.42);
-  font: 7px/1 var(--mono);
   text-transform: uppercase;
   letter-spacing: 0.06em;
 }
@@ -1267,7 +1396,7 @@ button:disabled {
 .gauge-ring small {
   margin-top: 3px;
   color: var(--paper-ghost);
-  font: 7px/1 var(--mono);
   text-transform: uppercase;
 }
@@ -1280,7 +1409,7 @@ button:disabled {
   justify-content: space-between;
   padding: 7px 0;
   border-bottom: 1px solid var(--line-light);
-  font: 8px/1 var(--mono);
 }
 .speed-gauge dt {
@@ -1329,28 +1458,27 @@ button:disabled {
 .device-card small,
 .memory-grid small,
-.meter small,
-.download-item small {
   color: rgba(232, 223, 202, 0.42);
-  font: 7px/1 var(--mono);
   text-transform: uppercase;
 }
 .device-card strong {
-  font: 500 11px/1 var(--mono);
 }
 .device-card > span:last-child {
   display: grid;
   justify-items: end;
   color: var(--phosphor);
-  font: 600 13px/1 var(--mono);
 }
 .device-card > span:last-child small {
   margin-top: 3px;
   color: rgba(232, 223, 202, 0.37);
-  font-size: 6px;
 }
 .meter {
@@ -1361,7 +1489,7 @@ button:disabled {
   display: flex;
   justify-content: space-between;
   margin-bottom: 6px;
-  font: 8px/1 var(--mono);
 }
 .meter-track {
@@ -1392,7 +1520,7 @@ button:disabled {
 }
 .memory-grid strong {
-  font: 500 12px/1 var(--mono);
 }
 .event-log {
@@ -1426,7 +1554,7 @@ button:disabled {
   display: block;
   padding: 5px 0;
   color: rgba(232, 223, 202, 0.36);
-  font: 8px/1.4 var(--mono);
 }
 .event-pip {
@@ -1437,7 +1565,7 @@ button:disabled {
 .event-log time {
   color: rgba(232, 223, 202, 0.34);
-  font: 7px/1.2 var(--mono);
 }
 .event-log div {
@@ -1446,71 +1574,12 @@ button:disabled {
 }
 .event-log strong {
-  font: 500 9px/1 var(--mono);
 }
 .event-log small {
   color: rgba(232, 223, 202, 0.42);
-  font-size: 8px;
-}
-.persistence {
-  padding: 3px 5px;
-  border: 1px solid var(--line-light);
-}
-.persistence.is-persistent {
-  color: var(--phosphor);
-  border-color: rgba(185, 255, 69, 0.28);
-}
-.download-item {
-  position: relative;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 8px;
-  margin-top: 16px;
-  padding: 11px 10px 10px;
-  border: 1px solid var(--line-light);
-}
-.download-item > div:first-child {
-  display: grid;
-  gap: 5px;
-}
-.download-item strong {
-  font: 500 10px/1 var(--mono);
-}
-.download-state {
-  width: fit-content;
-  color: var(--rust);
-  font: 700 6px/1 var(--mono);
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-}
-.state-downloading {
-  color: var(--phosphor);
-}
-.download-percent {
-  color: var(--phosphor);
-  font: 500 15px/1 var(--display);
-}
-.download-track {
-  grid-column: span 2;
-  height: 3px;
-  background: rgba(232, 223, 202, 0.1);
-}
-.download-track span {
-  display: block;
-  height: 100%;
-  background: var(--phosphor);
-  box-shadow: 0 0 9px rgba(185, 255, 69, 0.35);
 }
 .artifact-close {
@@ -1525,7 +1594,7 @@ button:disabled {
 .artifact-empty {
   margin: 0;
   color: rgba(232, 223, 202, 0.4);
-  font: 8px/1.5 var(--mono);
 }
 .artifact-pane {
@@ -1547,7 +1616,8 @@ button:disabled {
   border: 0;
   border-right: 1px solid var(--line-light);
   background: transparent;
-  font: 7px/1 var(--mono);
   text-transform: uppercase;
   cursor: pointer;
 }
@@ -1561,7 +1631,7 @@ button:disabled {
   overflow: hidden;
   padding: 0 8px;
   color: rgba(232, 223, 202, 0.45);
-  font: 7px/1 var(--mono);
   text-align: right;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1588,7 +1658,8 @@ button:disabled {
   color: var(--paper);
   border: 1px solid var(--rust);
   background: rgba(17, 21, 18, 0.9);
-  font: 7px/1 var(--mono);
   text-transform: uppercase;
   cursor: pointer;
 }
@@ -1608,7 +1679,7 @@ button:disabled {
   max-width: 250px;
   margin: 0;
   color: rgba(17, 21, 18, 0.62);
-  font: 9px/1.5 var(--mono);
 }
 .artifact-launch button {
@@ -1616,7 +1687,8 @@ button:disabled {
   color: var(--ink);
   border: 1px solid var(--ink);
   background: var(--phosphor);
-  font: 700 7px/1 var(--mono);
   text-transform: uppercase;
   cursor: pointer;
 }
@@ -1628,7 +1700,7 @@ button:disabled {
   padding: 10px;
   color: var(--paper);
   background: #0d100e;
-  font: 8px/1.45 var(--mono);
   white-space: pre-wrap;
 }
@@ -1698,7 +1770,7 @@ button:disabled {
 .setting-number {
   color: var(--phosphor);
-  font: 8px/1 var(--mono);
 }
 .setting-group > div,
@@ -1710,19 +1782,19 @@ button:disabled {
 .setting-group small,
 .range-setting small {
   color: rgba(232, 223, 202, 0.43);
-  font: 7px/1 var(--mono);
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
 .setting-group strong,
 .range-setting strong {
-  font: 500 13px/1 var(--mono);
 }
 .setting-locked {
   color: rgba(232, 223, 202, 0.36);
-  font: 7px/1 var(--mono);
   text-transform: uppercase;
 }
@@ -1733,7 +1805,8 @@ button:disabled {
   border: 1px solid var(--line-light);
   border-radius: 0;
   background: var(--ink-raised);
-  font: 8px/1 var(--mono);
 }
 .range-setting {
@@ -1793,7 +1866,7 @@ button:disabled {
   display: flex;
   justify-content: space-between;
   color: rgba(232, 223, 202, 0.35);
-  font: 7px/1 var(--mono);
 }
 .range-limits i {
@@ -1810,7 +1883,7 @@ button:disabled {
   display: flex;
   justify-content: space-between;
   color: rgba(232, 223, 202, 0.43);
-  font: 7px/1 var(--mono);
   letter-spacing: 0.05em;
   text-transform: uppercase;
 }
@@ -1821,7 +1894,7 @@ button:disabled {
   color: var(--paper);
   border: 1px solid var(--line-light);
   background: var(--ink-raised);
-  font: 10px/1.45 var(--mono);
 }
 .settings-actions {
@@ -1836,7 +1909,8 @@ button:disabled {
   color: var(--paper);
   border: 1px solid var(--line-light);
   background: transparent;
-  font: 7px/1.2 var(--mono);
   text-transform: uppercase;
   cursor: pointer;
 }
@@ -1871,7 +1945,7 @@ button:disabled {
 .boot-screen p:last-child {
   color: var(--paper-ghost);
-  font: 10px/1.5 var(--mono);
 }
 .range-ticks i {
@@ -1898,7 +1972,7 @@ button:disabled {
 .settings-note p {
   margin: 0;
   color: rgba(232, 223, 202, 0.58);
-  font-size: 10px;
   line-height: 1.5;
 }
@@ -1926,6 +2000,11 @@ button:disabled {
   53%, 100% { opacity: 0; }
 }
 @keyframes sheet-in {
   from { opacity: 0; transform: translateX(34px); }
   to { opacity: 1; transform: translateX(0); }
@@ -1945,7 +2024,7 @@ button:disabled {
   }
   .workspace-grid {
-    grid-template-columns: 260px minmax(500px, 1fr);
     grid-template-areas:
       "models chat"
       "inspector inspector";
@@ -2038,17 +2117,13 @@ button:disabled {
     scroll-snap-align: start;
   }
-  .dflash-card {
-    margin-top: 13px;
-  }
   .rail-footnote {
     display: none;
   }
   .chat-surface {
     display: grid;
-    grid-template-rows: auto 19px minmax(450px, auto) auto;
     overflow: visible;
   }
@@ -2065,21 +2140,20 @@ button:disabled {
     display: none;
   }
-  .chat-header-meta .header-load-button {
-    display: block;
-  }
   .live-label {
     grid-column: 1;
   }
   .composer {
-    position: sticky;
-    bottom: 0;
     z-index: 5;
     padding-inline: 14px;
   }
   .inspector {
     display: block;
     border-top: 1px solid var(--phosphor);
@@ -2098,7 +2172,7 @@ button:disabled {
   .brand-block .eyebrow,
   .local-promise strong {
-    font-size: 7px;
   }
   .chat-header {
@@ -2118,16 +2192,51 @@ button:disabled {
     display: none;
   }
   .composer-field {
     grid-template-columns: 1fr;
-    padding-bottom: 50px;
   }
   .send-button {
     position: absolute;
     right: 0;
     bottom: 0;
-    height: 35px;
   }
   .speed-gauge {

   --display: "Bodoni 72", Didot, "Iowan Old Style", Baskerville, serif;
   --body: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
   --mono: "Berkeley Mono", Iosevka, "SFMono-Regular", Consolas, monospace;
+  --type-utility: clamp(0.6875rem, 0.15vw + 0.65rem, 0.8125rem);
+  --type-caption: clamp(0.75rem, 0.18vw + 0.7rem, 0.875rem);
+  --type-body: clamp(1rem, 0.22vw + 0.95rem, 1.125rem);
+  --type-heading: clamp(1.75rem, 1.15vw + 1.45rem, 2.5rem);
   font-family: var(--body);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
     linear-gradient(rgba(17, 21, 18, 0.045) 1px, transparent 1px) 0 0 / 22px 22px,
     var(--paper);
   color: var(--paper);
+  font-size: var(--type-body);
 }
 button,
 .eyebrow {
   margin: 0 0 5px;
   color: rgba(232, 223, 202, 0.52);
+  font: 600 var(--type-utility)/1 var(--mono);
   letter-spacing: 0.18em;
   text-transform: uppercase;
 }
 .local-promise strong {
   color: var(--phosphor);
+  font: 600 var(--type-caption)/1 var(--mono);
   letter-spacing: 0.13em;
   text-transform: uppercase;
 }
 .local-promise small {
   color: var(--paper-ghost);
+  font: var(--type-caption)/1.25 var(--body);
 }
 .header-actions {
 }
 .station-clock small {
+  font-size: var(--type-utility);
   letter-spacing: 0.18em;
 }
 .station-clock span {
   margin-top: 4px;
+  font-size: var(--type-caption);
   letter-spacing: 0.09em;
 }
 .icon-button {
+  width: 44px;
+  height: 44px;
   display: grid;
   place-items: center;
   border: 1px solid rgba(232, 223, 202, 0.24);
 .workspace-grid {
   min-height: calc(100dvh - 76px);
   display: grid;
+  grid-template-columns: clamp(280px, 19vw, 340px) minmax(560px, 1fr) clamp(340px, 23vw, 410px);
   grid-template-areas: "models chat inspector";
 }
 .rail-heading > span,
 .section-heading > span:first-child {
   color: var(--phosphor);
+  font: 500 var(--type-utility)/1 var(--mono);
   border-top: 1px solid var(--phosphor);
   padding-top: 5px;
 }
 .rail-heading h2,
 .section-heading h2 {
   margin: 0;
+  font: 400 26px/1 var(--display);
   letter-spacing: -0.025em;
 }
   display: grid;
   grid-template-columns: 23px 1fr auto;
   gap: 8px;
+  min-height: 76px;
+  padding: 13px 9px 12px;
   text-align: left;
   color: var(--paper);
   border: 0;
 .model-index {
   color: rgba(232, 223, 202, 0.38);
+  font: var(--type-utility)/1 var(--mono);
   padding-top: 4px;
 }
 }
 .model-title-line strong {
+  font: 500 24px/1 var(--display);
 }
 .model-copy em {
   overflow: hidden;
   color: rgba(232, 223, 202, 0.46);
+  font: italic var(--type-caption)/1.2 var(--display);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .model-copy > span:last-child {
   margin-top: 3px;
   color: var(--paper-ghost);
+  font-size: var(--type-caption);
 }
 .availability {
   padding: 2px 4px;
+  font: 600 var(--type-utility)/1 var(--mono);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   border: 1px solid var(--line-light);
 .model-footprint {
   align-self: end;
   color: rgba(232, 223, 202, 0.39);
+  font: var(--type-utility)/1 var(--mono);
   white-space: nowrap;
 }
   display: block;
   margin: -4px 8px 9px 30px;
   color: rgba(232, 223, 202, 0.58);
+  font: var(--type-utility)/1.35 var(--mono);
 }
 .rail-footnote {
   display: flex;
   justify-content: space-between;
   gap: 8px;
+  margin-top: auto;
   color: rgba(232, 223, 202, 0.3);
+  font: var(--type-utility)/1.2 var(--mono);
   letter-spacing: 0.03em;
 }
 .chat-header h2 {
   display: inline;
   margin: 0;
+  font: 500 var(--type-heading)/1 var(--display);
   letter-spacing: -0.045em;
 }
 .botanical-subtitle {
   margin-left: 10px;
   color: rgba(17, 21, 18, 0.46);
+  font: italic var(--type-caption)/1 var(--display);
 }
 .chat-header-meta {
   grid-template-columns: repeat(2, auto);
   gap: 5px 13px;
   color: rgba(17, 21, 18, 0.55);
+  font: var(--type-utility)/1.2 var(--mono);
   text-transform: uppercase;
   letter-spacing: 0.07em;
 }
 .live-label {
   grid-column: span 2;
   justify-self: end;
 .runtime-error strong {
   color: #ff9a68;
+  font: 700 var(--type-utility)/1 var(--mono);
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
 .runtime-error span {
+  font: var(--type-caption)/1.35 var(--mono);
   overflow-wrap: anywhere;
 }
   padding: 5px 8px;
   border: 1px solid rgba(232, 223, 202, 0.3);
   background: transparent;
+  min-height: 44px;
+  font: var(--type-utility)/1.2 var(--mono);
   text-transform: uppercase;
   cursor: pointer;
 }
   color: rgba(17, 21, 18, 0.4);
   border-bottom: 1px solid rgba(17, 21, 18, 0.09);
   background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(17, 21, 18, 0.2) 14px 15px) left bottom / 100% 4px no-repeat;
+  font: var(--type-utility)/1 var(--mono);
 }
 .transcript {
   gap: 10px;
   margin-bottom: 22px;
   color: rgba(17, 21, 18, 0.45);
+  font: var(--type-utility)/1 var(--mono);
   letter-spacing: 0.1em;
   text-transform: uppercase;
 }
 .transcript-empty p {
   margin: 0;
+  font-size: var(--type-body);
   line-height: 1.5;
 }
   gap: 8px;
   margin-bottom: 8px;
   color: rgba(17, 21, 18, 0.47);
+  font: var(--type-utility)/1.2 var(--mono);
   text-transform: uppercase;
   letter-spacing: 0.07em;
 }
 }
 .message-content {
+  font: var(--type-body)/1.58 var(--body);
 }
 .message-content > p {
   color: rgba(17, 21, 18, 0.62);
   border: 1px dashed rgba(17, 21, 18, 0.24);
   background: rgba(17, 21, 18, 0.035);
+  font-size: var(--type-caption);
 }
 .reasoning-block summary {
   color: #4d6728;
+  font: 700 var(--type-utility)/1 var(--mono);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   cursor: pointer;
 .message-error {
   margin: 9px 0 0;
   color: #8d321b;
+  font: var(--type-caption)/1.4 var(--mono);
 }
 .message.has-error {
   padding-top: 7px;
   color: rgba(17, 21, 18, 0.43);
   border-top: 1px dashed rgba(17, 21, 18, 0.19);
+  font: var(--type-utility)/1.2 var(--mono);
 }
 .stream-cursor {
 }
 .tool-call code {
+  font: var(--type-caption)/1.4 var(--mono);
 }
 .tool-call summary > span:last-child {
   color: rgba(17, 21, 18, 0.48);
+  font: var(--type-utility)/1 var(--mono);
   text-transform: uppercase;
 }
 .tool-call > div p {
   margin: 5px 0 0;
   color: rgba(17, 21, 18, 0.58);
+  font-size: var(--type-caption);
 }
 .composer {
   position: relative;
+  padding: 12px clamp(21px, 3vw, 44px) 18px;
   border-top: 1px solid var(--line-dark);
   background: rgba(216, 205, 180, 0.82);
   box-shadow: 0 -15px 38px rgba(17, 21, 18, 0.06);
   opacity: 0.23;
 }
+.composer-activity {
+  height: 164px;
+  display: grid;
+  grid-template-rows: 24px 26px 40px 34px;
+  gap: 6px;
+  margin-bottom: 10px;
+  padding: 11px 12px;
+  overflow: hidden;
+  color: var(--paper);
+  border: 1px solid rgba(17, 21, 18, 0.82);
+  background:
+    linear-gradient(105deg, rgba(185, 255, 69, 0.07), transparent 58%),
+    var(--ink);
+  box-shadow: 4px 4px 0 rgba(17, 21, 18, 0.12);
+}
+.activity-stage-line {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 6px;
+  align-items: start;
+}
+.activity-stage-line span {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding-top: 5px;
+  overflow: hidden;
+  color: rgba(232, 223, 202, 0.34);
+  border-top: 1px solid rgba(232, 223, 202, 0.14);
+  font: 700 var(--type-utility)/1 var(--mono);
+  letter-spacing: 0.04em;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.activity-stage-line i {
+  width: 6px;
+  height: 6px;
+  flex: 0 0 6px;
+  border: 1px solid currentColor;
+  border-radius: 50%;
+}
+.activity-stage-line span.is-complete,
+.activity-stage-line span.is-current {
+  color: var(--phosphor);
+  border-color: rgba(185, 255, 69, 0.52);
+}
+.activity-stage-line span.is-complete i {
+  background: var(--phosphor);
+}
+.activity-stage-line span.is-current i {
+  box-shadow: 0 0 0 4px var(--phosphor-dim);
+}
+.activity-status,
+.activity-status > div {
+  display: flex;
+  align-items: center;
+}
+.activity-status {
+  min-width: 0;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid var(--line-light);
+  font: var(--type-utility)/1 var(--mono);
+}
+.activity-status > div {
+  min-width: 0;
+  gap: 8px;
+}
+.activity-status strong {
+  overflow: hidden;
+  color: var(--paper);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.activity-status > span {
+  flex: 0 0 auto;
+  color: rgba(232, 223, 202, 0.5);
+}
+.activity-pulse {
+  width: 7px;
+  height: 7px;
+  flex: 0 0 7px;
+  border-radius: 50%;
+  background: rgba(232, 223, 202, 0.35);
+}
+.composer-activity.is-loading .activity-pulse,
+.composer-activity.is-inference .activity-pulse {
+  background: var(--phosphor);
+  box-shadow: 0 0 0 4px var(--phosphor-dim);
+  animation: activity-pulse 1.15s ease-in-out infinite;
+}
+.load-live-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: end;
+}
+.activity-track-block,
+.live-metric {
+  min-width: 0;
+  display: grid;
+  gap: 6px;
+}
+.activity-track-block > div,
+.live-metric > div {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  font: var(--type-utility)/1 var(--mono);
+}
+.activity-track-block span,
+.live-metric span,
+.activity-memory span {
+  color: rgba(232, 223, 202, 0.46);
+  text-transform: uppercase;
+}
+.activity-track-block small,
+.live-metric small {
+  color: rgba(232, 223, 202, 0.5);
+  font-size: inherit;
+}
+.activity-memory {
+  min-width: 86px;
+  display: grid;
+  gap: 6px;
+  justify-items: end;
+  font: var(--type-utility)/1 var(--mono);
+}
+.activity-memory strong {
+  color: var(--phosphor);
+  font-size: var(--type-caption);
+  font-weight: 600;
+}
+.activity-track {
+  height: 5px;
+  overflow: hidden;
+  border: 1px solid rgba(232, 223, 202, 0.18);
+  background: rgba(232, 223, 202, 0.055);
+}
+.activity-track > span {
+  display: block;
+  height: 100%;
+  background: repeating-linear-gradient(90deg, var(--phosphor) 0 7px, transparent 7px 9px);
+  box-shadow: 0 0 10px rgba(185, 255, 69, 0.34);
+  transition: width 120ms linear;
+}
+.inference-live-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+.live-metric {
+  padding: 5px 8px 6px;
+  border: 1px solid var(--line-light);
+  opacity: 0.64;
+}
+.live-metric.is-active {
+  border-color: rgba(185, 255, 69, 0.48);
+  background: rgba(185, 255, 69, 0.06);
+  opacity: 1;
+}
+.live-metric strong {
+  margin-left: auto;
+  color: var(--phosphor);
+  font-size: var(--type-caption);
+  font-weight: 600;
+}
+.shard-strip {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  gap: 5px;
+  align-items: end;
+}
+.shard-strip.is-empty {
+  display: flex;
+  align-items: center;
+  border-top: 1px dashed var(--line-light);
+}
+.shard-placeholder {
+  color: rgba(232, 223, 202, 0.32);
+  font: var(--type-utility)/1.2 var(--mono);
+}
+.shard-cell {
+  min-width: 0;
+  display: grid;
+  gap: 5px;
+  opacity: 0.55;
+}
+.shard-cell.state-downloading,
+.shard-cell.state-verifying,
+.shard-cell.state-complete,
+.shard-cell.state-cached {
+  opacity: 1;
+}
+.shard-cell > span {
+  display: flex;
+  justify-content: space-between;
+  gap: 3px;
+  color: rgba(232, 223, 202, 0.48);
+  font: var(--type-utility)/1 var(--mono);
+}
+.shard-cell b {
+  color: var(--paper);
+  font-weight: 600;
+}
+.shard-cell small {
+  overflow: hidden;
+  font-size: inherit;
+  text-overflow: ellipsis;
+}
 .composer-meta {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 7px;
   color: rgba(17, 21, 18, 0.46);
+  min-height: 24px;
+  font: var(--type-utility)/1 var(--mono);
 }
 .tool-toggle {
   display: flex;
   align-items: center;
   gap: 5px;
+  min-height: 32px;
+  padding: 0 2px;
   color: rgba(17, 21, 18, 0.54);
   border: 0;
   background: transparent;
+  font: 700 var(--type-utility)/1 var(--mono);
   text-transform: uppercase;
   cursor: pointer;
 }
 .regenerate-button {
   margin-right: auto;
+  min-height: 32px;
+  padding: 0 2px;
   color: rgba(17, 21, 18, 0.54);
   border: 0;
   background: transparent;
+  font: 700 var(--type-utility)/1 var(--mono);
   text-transform: uppercase;
   cursor: pointer;
 }
   display: grid;
   grid-template-columns: 1fr auto;
   position: relative;
+  min-height: 84px;
   border: 1px solid var(--ink);
   background: rgba(232, 223, 202, 0.83);
   box-shadow: 4px 4px 0 rgba(17, 21, 18, 0.1);
   top: 7px;
   left: 11px;
   color: rgba(17, 21, 18, 0.45);
+  font: var(--type-utility)/1 var(--mono);
   letter-spacing: 0.09em;
   text-transform: uppercase;
 }
   border: 0;
   outline: none;
   background: transparent;
+  font: var(--type-body)/1.45 var(--body);
 }
 .composer-field textarea::placeholder {
 }
 .send-button {
+  min-width: 112px;
+  min-height: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--ink);
   border: 1px solid var(--ink);
   background: var(--phosphor);
+  font: 700 var(--type-caption)/1 var(--mono);
   text-transform: uppercase;
   cursor: pointer;
   transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
   background: var(--rust);
 }
+.send-button.load {
+  background: var(--phosphor);
+}
 .inspector {
   grid-area: inspector;
   min-height: calc(100dvh - 76px);
 }
 .section-heading h2 {
+  font-size: 24px;
 }
+.sampling-label {
   display: flex;
   align-items: center;
   gap: 6px;
   color: rgba(232, 223, 202, 0.42);
+  font: var(--type-utility)/1 var(--mono);
   text-transform: uppercase;
   letter-spacing: 0.06em;
 }
 .gauge-ring small {
   margin-top: 3px;
   color: var(--paper-ghost);
+  font: var(--type-utility)/1 var(--mono);
   text-transform: uppercase;
 }
   justify-content: space-between;
   padding: 7px 0;
   border-bottom: 1px solid var(--line-light);
+  font: var(--type-utility)/1 var(--mono);
 }
 .speed-gauge dt {
 .device-card small,
 .memory-grid small,
+.meter small {
   color: rgba(232, 223, 202, 0.42);
+  font: var(--type-utility)/1 var(--mono);
   text-transform: uppercase;
 }
 .device-card strong {
+  font: 500 var(--type-caption)/1 var(--mono);
 }
 .device-card > span:last-child {
   display: grid;
   justify-items: end;
   color: var(--phosphor);
+  font: 600 15px/1 var(--mono);
 }
 .device-card > span:last-child small {
   margin-top: 3px;
   color: rgba(232, 223, 202, 0.37);
+  font-size: var(--type-utility);
 }
 .meter {
   display: flex;
   justify-content: space-between;
   margin-bottom: 6px;
+  font: var(--type-utility)/1 var(--mono);
 }
 .meter-track {
 }
 .memory-grid strong {
+  font: 500 var(--type-caption)/1 var(--mono);
 }
 .event-log {
   display: block;
   padding: 5px 0;
   color: rgba(232, 223, 202, 0.36);
+  font: var(--type-utility)/1.4 var(--mono);
 }
 .event-pip {
 .event-log time {
   color: rgba(232, 223, 202, 0.34);
+  font: var(--type-utility)/1.2 var(--mono);
 }
 .event-log div {
 }
 .event-log strong {
+  font: 500 var(--type-caption)/1 var(--mono);
 }
 .event-log small {
   color: rgba(232, 223, 202, 0.42);
+  font-size: var(--type-utility);
 }
 .artifact-close {
 .artifact-empty {
   margin: 0;
   color: rgba(232, 223, 202, 0.4);
+  font: var(--type-utility)/1.5 var(--mono);
 }
 .artifact-pane {
   border: 0;
   border-right: 1px solid var(--line-light);
   background: transparent;
+  min-height: 44px;
+  font: var(--type-utility)/1 var(--mono);
   text-transform: uppercase;
   cursor: pointer;
 }
   overflow: hidden;
   padding: 0 8px;
   color: rgba(232, 223, 202, 0.45);
+  font: var(--type-utility)/1 var(--mono);
   text-align: right;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--paper);
   border: 1px solid var(--rust);
   background: rgba(17, 21, 18, 0.9);
+  min-height: 44px;
+  font: var(--type-utility)/1 var(--mono);
   text-transform: uppercase;
   cursor: pointer;
 }
   max-width: 250px;
   margin: 0;
   color: rgba(17, 21, 18, 0.62);
+  font: var(--type-caption)/1.5 var(--mono);
 }
 .artifact-launch button {
   color: var(--ink);
   border: 1px solid var(--ink);
   background: var(--phosphor);
+  min-height: 44px;
+  font: 700 var(--type-utility)/1 var(--mono);
   text-transform: uppercase;
   cursor: pointer;
 }
   padding: 10px;
   color: var(--paper);
   background: #0d100e;
+  font: var(--type-utility)/1.5 var(--mono);
   white-space: pre-wrap;
 }
 .setting-number {
   color: var(--phosphor);
+  font: var(--type-utility)/1 var(--mono);
 }
 .setting-group > div,
 .setting-group small,
 .range-setting small {
   color: rgba(232, 223, 202, 0.43);
+  font: var(--type-utility)/1 var(--mono);
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
 .setting-group strong,
 .range-setting strong {
+  font: 500 var(--type-caption)/1 var(--mono);
 }
 .setting-locked {
   color: rgba(232, 223, 202, 0.36);
+  font: var(--type-utility)/1 var(--mono);
   text-transform: uppercase;
 }
   border: 1px solid var(--line-light);
   border-radius: 0;
   background: var(--ink-raised);
+  min-height: 44px;
+  font: var(--type-utility)/1 var(--mono);
 }
 .range-setting {
   display: flex;
   justify-content: space-between;
   color: rgba(232, 223, 202, 0.35);
+  font: var(--type-utility)/1 var(--mono);
 }
 .range-limits i {
   display: flex;
   justify-content: space-between;
   color: rgba(232, 223, 202, 0.43);
+  font: var(--type-utility)/1 var(--mono);
   letter-spacing: 0.05em;
   text-transform: uppercase;
 }
   color: var(--paper);
   border: 1px solid var(--line-light);
   background: var(--ink-raised);
+  font: var(--type-caption)/1.5 var(--mono);
 }
 .settings-actions {
   color: var(--paper);
   border: 1px solid var(--line-light);
   background: transparent;
+  min-height: 44px;
+  font: var(--type-utility)/1.2 var(--mono);
   text-transform: uppercase;
   cursor: pointer;
 }
 .boot-screen p:last-child {
   color: var(--paper-ghost);
+  font: var(--type-caption)/1.5 var(--mono);
 }
 .range-ticks i {
 .settings-note p {
   margin: 0;
   color: rgba(232, 223, 202, 0.58);
+  font-size: var(--type-caption);
   line-height: 1.5;
 }
   53%, 100% { opacity: 0; }
 }
+@keyframes activity-pulse {
+  0%, 100% { opacity: 0.55; transform: scale(0.82); }
+  50% { opacity: 1; transform: scale(1); }
+}
 @keyframes sheet-in {
   from { opacity: 0; transform: translateX(34px); }
   to { opacity: 1; transform: translateX(0); }
   }
   .workspace-grid {
+    grid-template-columns: 280px minmax(500px, 1fr);
     grid-template-areas:
       "models chat"
       "inspector inspector";
     scroll-snap-align: start;
   }
   .rail-footnote {
     display: none;
   }
   .chat-surface {
     display: grid;
+    grid-template-rows: auto 19px minmax(240px, auto) auto;
     overflow: visible;
   }
     display: none;
   }
   .live-label {
     grid-column: 1;
   }
   .composer {
+    position: relative;
     z-index: 5;
     padding-inline: 14px;
   }
+  .transcript-empty {
+    margin-top: 4vh;
+  }
   .inspector {
     display: block;
     border-top: 1px solid var(--phosphor);
   .brand-block .eyebrow,
   .local-promise strong {
+    font-size: var(--type-utility);
   }
   .chat-header {
     display: none;
   }
+  .composer-activity {
+    height: 176px;
+    grid-template-rows: 24px 30px 44px 36px;
+    padding-inline: 9px;
+  }
+  .activity-stage-line {
+    gap: 3px;
+  }
+  .activity-stage-line span {
+    gap: 3px;
+    letter-spacing: 0;
+  }
+  .activity-stage-line i {
+    display: none;
+  }
+  .load-live-grid {
+    gap: 7px;
+  }
+  .activity-memory {
+    min-width: 68px;
+  }
+  .shard-strip {
+    gap: 3px;
+  }
+  .shard-cell small {
+    display: none;
+  }
   .composer-field {
     grid-template-columns: 1fr;
+    padding-bottom: 62px;
   }
   .send-button {
     position: absolute;
     right: 0;
     bottom: 0;
+    height: 52px;
   }
   .speed-gauge {

src/bench/report.test.ts CHANGED Viewed

@@ -23,17 +23,6 @@ const JSPI_WASM_SHA256 = 'd'.repeat(64);
 const COMPAT_WASM_SHA256 = 'c'.repeat(64);
 const COMPAT_WORKER_SHA256 = 'b'.repeat(64);
-const dflash27bPairing = {
-  support: 'conditional',
-  compatibilityStatus: 'native-greedy-parity-pass',
-  runtimeAvailable: false,
-  blockSize: 16,
-  maskTokenId: 248_070,
-  targetLayerIdsZeroBased: [1, 16, 31, 46, 61],
-  targetTapsOneBased: [2, 17, 32, 47, 62],
-  reason: 'Native parity passes; browser activation remains gated.',
-} as const;
 const model = {
   id: '8b',
   displayName: 'Bonsai 8B',
@@ -58,15 +47,6 @@ const manifest = {
     id: 'WaveCut/Bonsai-web-GGUF',
     revision: '112ea7a1a6229bde132b176b9a72477a7ecfde64',
   },
-  dflash: {
-    status: 'conditional',
-    pairings: {
-      '1_7b': { support: 'unsupported', reason: 'No compatible 1.7B drafter is locked.' },
-      '4b': { support: 'unsupported', reason: 'The 27B drafter is incompatible with Bonsai 4B.' },
-      '8b': { support: 'unsupported', reason: 'The 27B drafter is incompatible with Bonsai 8B.' },
-      '27b': dflash27bPairing,
-    },
-  },
 } as unknown as ModelManifestV2;
 const capabilities = {
@@ -112,6 +92,7 @@ const backendReport = {
   cacheTypeK: 'f16',
   cacheTypeV: 'f16',
   webgpuKvBufferBytes: 56 * 1024 ** 2,
 } satisfies BackendReport;
 const loadResult = {
@@ -495,15 +476,6 @@ describe('benchmark report', () => {
         operatorConfigurable: false,
         status: 'fixed-release-default-alternatives-unvalidated',
       },
-      dflash: {
-        enabled: false,
-        runtimeAvailable: false,
-        globalStatus: 'conditional',
-        pairing: {
-          support: 'unsupported',
-          reason: 'The 27B drafter is incompatible with Bonsai 8B.',
-        },
-      },
     });
   });
@@ -582,39 +554,6 @@ describe('benchmark report', () => {
     expect(report.generation.rawReasoningText).toBe('reasoning-only fixture');
   });
-  it('exports the selected model DFlash pairing for unsupported 1.7B and conditional 27B', () => {
-    const reportFor = (modelId: ManifestModelV2['id']) => buildBenchmarkReport(observation({
-      model: {
-        ...model,
-        id: modelId,
-        displayName: `Bonsai ${modelId}`,
-      } as ManifestModelV2,
-      loadResult: { ...loadResult, modelId },
-    }));
-    expect(reportFor('1_7b').releasePolicy.dflash).toEqual({
-      enabled: false,
-      runtimeAvailable: false,
-      globalStatus: 'conditional',
-      pairing: {
-        support: 'unsupported',
-        reason: 'No compatible 1.7B drafter is locked.',
-      },
-    });
-    const report27b = reportFor('27b');
-    expect(report27b.releasePolicy.dflash).toEqual({
-      enabled: false,
-      runtimeAvailable: false,
-      globalStatus: 'conditional',
-      pairing: dflash27bPairing,
-    });
-    const exportedPairing = report27b.releasePolicy.dflash.pairing;
-    expect(exportedPairing.support).toBe('conditional');
-    if (exportedPairing.support !== 'conditional') throw new Error('Expected the conditional 27B pairing.');
-    expect(exportedPairing.targetLayerIdsZeroBased).not.toBe(dflash27bPairing.targetLayerIdsZeroBased);
-  });
   it('uses the exact token-id trace when final engine usage is present but incomplete', () => {
     const report = buildBenchmarkReport(observation({
       streamedTokenEvents: 64,

 const COMPAT_WASM_SHA256 = 'c'.repeat(64);
 const COMPAT_WORKER_SHA256 = 'b'.repeat(64);
 const model = {
   id: '8b',
   displayName: 'Bonsai 8B',
     id: 'WaveCut/Bonsai-web-GGUF',
     revision: '112ea7a1a6229bde132b176b9a72477a7ecfde64',
   },
 } as unknown as ModelManifestV2;
 const capabilities = {
   cacheTypeK: 'f16',
   cacheTypeV: 'f16',
   webgpuKvBufferBytes: 56 * 1024 ** 2,
+  webgpuTrace: [],
 } satisfies BackendReport;
 const loadResult = {
         operatorConfigurable: false,
         status: 'fixed-release-default-alternatives-unvalidated',
       },
     });
   });
     expect(report.generation.rawReasoningText).toBe('reasoning-only fixture');
   });
   it('uses the exact token-id trace when final engine usage is present but incomplete', () => {
     const report = buildBenchmarkReport(observation({
       streamedTokenEvents: 64,

src/bench/report.ts CHANGED Viewed

@@ -203,12 +203,6 @@ export interface BenchmarkReport {
       operatorConfigurable: false;
       status: 'fixed-release-default-alternatives-unvalidated';
     };
-    dflash: {
-      enabled: false;
-      runtimeAvailable: false;
-      globalStatus: ModelManifestV2['dflash']['status'];
-      pairing: ModelManifestV2['dflash']['pairings'][ManifestModelV2['id']];
-    };
   };
 }
@@ -571,8 +565,6 @@ export function buildBenchmarkReport(observation: BenchmarkObservation): Benchma
   const device = loadResult.backend === 'webgpu'
     ? capabilities.webgpu.name || 'WebGPU adapter'
     : `CPU · ${capabilities.hardwareConcurrency} logical cores`;
-  const dflashPairing = observation.manifest.dflash.pairings[observation.model.id];
   return {
     schemaVersion: 3,
     kind: 'bonsai-browser-benchmark',
@@ -694,18 +686,6 @@ export function buildBenchmarkReport(observation: BenchmarkObservation): Benchma
         operatorConfigurable: false,
         status: 'fixed-release-default-alternatives-unvalidated',
       },
-      dflash: {
-        enabled: false,
-        runtimeAvailable: false,
-        globalStatus: observation.manifest.dflash.status,
-        pairing: dflashPairing.support === 'conditional'
-          ? {
-              ...dflashPairing,
-              targetLayerIdsZeroBased: [...dflashPairing.targetLayerIdsZeroBased],
-              targetTapsOneBased: [...dflashPairing.targetTapsOneBased],
-            }
-          : { ...dflashPairing },
-      },
     },
   };
 }

       operatorConfigurable: false;
       status: 'fixed-release-default-alternatives-unvalidated';
     };
   };
 }
   const device = loadResult.backend === 'webgpu'
     ? capabilities.webgpu.name || 'WebGPU adapter'
     : `CPU · ${capabilities.hardwareConcurrency} logical cores`;
   return {
     schemaVersion: 3,
     kind: 'bonsai-browser-benchmark',
         operatorConfigurable: false,
         status: 'fixed-release-default-alternatives-unvalidated',
       },
     },
   };
 }

src/engine/blob-integrity.test.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest';
 import { verifyBlobSha256 } from './blob-integrity';
 describe('verifyBlobSha256', () => {
@@ -23,6 +23,50 @@ describe('verifyBlobSha256', () => {
     expect(corrupted.actualSha256).not.toBe(expected.actualSha256);
   });
   it('stops hashing when the caller aborts', async () => {
     const controller = new AbortController();
     controller.abort();

+import { describe, expect, it, vi } from 'vitest';
 import { verifyBlobSha256 } from './blob-integrity';
 describe('verifyBlobSha256', () => {
     expect(corrupted.actualSha256).not.toBe(expected.actualSha256);
   });
+  it('reports monotonic byte progress while hashing a shard', async () => {
+    const data = new Uint8Array(256 * 1024);
+    data.fill(0x61);
+    const blob = new Blob([data]);
+    Object.defineProperty(blob, 'stream', {
+      value: () => {
+        let offset = 0;
+        return new ReadableStream<Uint8Array>({
+          pull(controller) {
+            if (offset >= data.byteLength) {
+              controller.close();
+              return;
+            }
+            const nextOffset = Math.min(data.byteLength, offset + (64 * 1024));
+            controller.enqueue(data.subarray(offset, nextOffset));
+            offset = nextOffset;
+          },
+        });
+      },
+    });
+    const progress: Array<{ loadedBytes: number; totalBytes: number }> = [];
+    let timestamp = 0;
+    const now = vi.spyOn(performance, 'now').mockImplementation(() => {
+      timestamp += 101;
+      return timestamp;
+    });
+    try {
+      await verifyBlobSha256(blob, '0'.repeat(64), undefined, (loadedBytes, totalBytes) => {
+        progress.push({ loadedBytes, totalBytes });
+      });
+    } finally {
+      now.mockRestore();
+    }
+    expect(progress[0]).toEqual({ loadedBytes: 0, totalBytes: blob.size });
+    expect(progress.at(-1)).toEqual({ loadedBytes: blob.size, totalBytes: blob.size });
+    expect(progress.some(({ loadedBytes }) => loadedBytes > 0 && loadedBytes < blob.size)).toBe(true);
+    expect(progress.every(({ totalBytes }) => totalBytes === blob.size)).toBe(true);
+    expect(progress.every((sample, index) => (
+      index === 0 || sample.loadedBytes >= (progress[index - 1]?.loadedBytes ?? 0)
+    ))).toBe(true);
+  });
   it('stops hashing when the caller aborts', async () => {
     const controller = new AbortController();
     controller.abort();

src/engine/blob-integrity.ts CHANGED Viewed

@@ -11,6 +11,7 @@ export async function verifyBlobSha256(
   blob: Blob,
   expectedSha256: string,
   signal?: AbortSignal,
 ): Promise<BlobIntegrityResult> {
   if (signal) {
     throwIfAborted(signal);
@@ -21,6 +22,9 @@ export async function verifyBlobSha256(
     void reader.cancel(abortError()).catch(() => undefined);
   };
   signal?.addEventListener('abort', cancelRead, { once: true });
   try {
     while (true) {
       if (signal) {
@@ -34,7 +38,14 @@ export async function verifyBlobSha256(
         break;
       }
       hasher.update(value);
     }
     const actualSha256 = bytesToHex(hasher.digest());
     return {
       actualSha256,

   blob: Blob,
   expectedSha256: string,
   signal?: AbortSignal,
+  onProgress?: (loadedBytes: number, totalBytes: number) => void,
 ): Promise<BlobIntegrityResult> {
   if (signal) {
     throwIfAborted(signal);
     void reader.cancel(abortError()).catch(() => undefined);
   };
   signal?.addEventListener('abort', cancelRead, { once: true });
+  let loadedBytes = 0;
+  let lastProgressAt = 0;
+  onProgress?.(0, blob.size);
   try {
     while (true) {
       if (signal) {
         break;
       }
       hasher.update(value);
+      loadedBytes += value.byteLength;
+      const now = performance.now();
+      if (now - lastProgressAt >= 100) {
+        lastProgressAt = now;
+        onProgress?.(Math.min(loadedBytes, blob.size), blob.size);
+      }
     }
+    onProgress?.(blob.size, blob.size);
     const actualSha256 = bytesToHex(hasher.digest());
     return {
       actualSha256,

src/engine/client.test.ts CHANGED Viewed

@@ -63,6 +63,10 @@ describe('BrowserEngineClient worker lifecycle', () => {
       shardIndex: null,
       shardCount: 1,
       shardPath: null,
     });
     controller.abort();
@@ -118,6 +122,17 @@ describe('BrowserEngineClient worker lifecycle', () => {
         shardIndex: 0,
         shardCount: 1,
         shardPath: 'model.gguf',
       });
       controller.abort();
@@ -156,6 +171,17 @@ describe('BrowserEngineClient worker lifecycle', () => {
       shardIndex: 0,
       shardCount: 1,
       shardPath: 'model.gguf',
     });
     controller.abort();

       shardIndex: null,
       shardCount: 1,
       shardPath: null,
+      stageProgress: 0,
+      nativeStage: null,
+      residentBytes: null,
+      shards: [],
     });
     controller.abort();
         shardIndex: 0,
         shardCount: 1,
         shardPath: 'model.gguf',
+        stageProgress: null,
+        nativeStage: null,
+        residentBytes: null,
+        shards: [{
+          index: 0,
+          path: 'model.gguf',
+          loadedBytes: 1,
+          verifiedBytes: 0,
+          totalBytes: 100,
+          state: 'downloading',
+        }],
       });
       controller.abort();
       shardIndex: 0,
       shardCount: 1,
       shardPath: 'model.gguf',
+      stageProgress: null,
+      nativeStage: null,
+      residentBytes: null,
+      shards: [{
+        index: 0,
+        path: 'model.gguf',
+        loadedBytes: 50,
+        verifiedBytes: 0,
+        totalBytes: 100,
+        state: 'downloading',
+      }],
     });
     controller.abort();

src/engine/client.ts CHANGED Viewed

@@ -14,12 +14,14 @@ import type {
 type ProgressEvent = Extract<EngineEvent, { event: 'progress' }>;
 type TokenEvent = Extract<EngineEvent, { event: 'token' }>;
 export interface EngineRequestOptions {
   requestId?: string;
   signal?: AbortSignal;
   onProgress?: (event: ProgressEvent) => void;
   onToken?: (text: string, reasoningDelta?: string) => void;
 }
 interface PendingRequest {
@@ -244,8 +246,10 @@ export class BrowserEngineClient {
           return;
         }
         pending.options.onProgress?.(message);
-      } else {
         pending.options.onToken?.(message.text, message.reasoningDelta);
       }
       return;
     }

 type ProgressEvent = Extract<EngineEvent, { event: 'progress' }>;
 type TokenEvent = Extract<EngineEvent, { event: 'token' }>;
+type GenerationEvent = Extract<EngineEvent, { event: 'generation' }>;
 export interface EngineRequestOptions {
   requestId?: string;
   signal?: AbortSignal;
   onProgress?: (event: ProgressEvent) => void;
   onToken?: (text: string, reasoningDelta?: string) => void;
+  onGenerationProgress?: (event: GenerationEvent) => void;
 }
 interface PendingRequest {
           return;
         }
         pending.options.onProgress?.(message);
+      } else if (message.event === 'token') {
         pending.options.onToken?.(message.text, message.reasoningDelta);
+      } else {
+        pending.options.onGenerationProgress?.(message);
       }
       return;
     }

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

@@ -222,6 +222,7 @@ describe('assertBackendPolicy', () => {
     cacheTypeK: 'f16',
     cacheTypeV: 'f16',
     webgpuKvBufferBytes: 56 * 1024 ** 2,
   };
   it('accepts a proven single WebGPU graph', () => {

     cacheTypeK: 'f16',
     cacheTypeV: 'f16',
     webgpuKvBufferBytes: 56 * 1024 ** 2,
+    webgpuTrace: [],
   };
   it('accepts a proven single WebGPU graph', () => {

src/engine/manifest.test.ts CHANGED Viewed

@@ -50,70 +50,11 @@ function rawModel(id: ModelTierId) {
   };
 }
-function rawDFlash() {
-  return {
-    status: 'conditional',
-    enabledByDefault: false,
-    runtimeAvailable: false,
-    source: {
-      repo: 'z-lab/Qwen3.6-27B-DFlash',
-      revision: REVISION,
-      file: 'model.safetensors',
-      bytes: 3_460_432_504,
-      sha256: SHA,
-      format: 'safetensors',
-      dtype: 'BF16',
-      parameters: 1_730_213_120,
-      sourceOnly: true,
-      license: 'MIT',
-    },
-    nativeReference: {
-      path: 'dflash/Qwen3.6-27B-DFlash-Q8_0.gguf',
-      bytes: 1_849_481_440,
-      sha256: SHA,
-      format: 'GGUF',
-      quantization: 'Q8_0',
-      largestTensor: { name: 'fc.weight', bytes: 139_264_000 },
-      role: 'native correctness reference only',
-    },
-    browser: {
-      enabled: false,
-      architectureCompiled: true,
-      specTypePlumbed: false,
-      candidateQuantizationStatus: 'q8-rejected-binding-limit',
-    },
-    validation: {
-      shape: 'pass',
-      tokenizer: 'exact-match',
-      targetTaps: [2, 17, 32, 47, 62],
-      nativeGreedyParity: { status: 'pass', tokens: 32, temperature: 0 },
-      acceptanceBenchmark: 'pending',
-      browserSpeedGate: 'pending',
-    },
-    pairings: {
-      '1_7b': { support: 'unsupported', reason: 'No compatible drafter.' },
-      '4b': { support: 'unsupported', reason: 'Tokenizer mismatch.' },
-      '8b': { support: 'unsupported', reason: 'Tokenizer mismatch.' },
-      '27b': {
-        support: 'conditional',
-        compatibilityStatus: 'native-greedy-parity-pass',
-        runtimeAvailable: false,
-        blockSize: 16,
-        maskTokenId: 248070,
-        targetLayerIdsZeroBased: [1, 16, 31, 46, 61],
-        targetTapsOneBased: [2, 17, 32, 47, 62],
-        reason: 'Native parity passes; browser activation remains gated.',
-      },
-    },
-  };
-}
 function rawManifest() {
   return {
     schemaVersion: 2,
     repository: { id: 'WaveCut/Bonsai-web-GGUF', revision: REVISION },
     models: (['1_7b', '4b', '8b', '27b'] as const).map(rawModel),
-    dflash: rawDFlash(),
   };
 }
@@ -128,77 +69,6 @@ describe('model manifest v2', () => {
     ]);
   });
-  it('parses the typed, default-off DFlash evidence contract', () => {
-    const dflash = parseModelManifestV2(rawManifest()).dflash;
-    expect(dflash.status).toBe('conditional');
-    expect(dflash.runtimeAvailable).toBe(false);
-    expect(dflash.nativeReference.largestTensor).toEqual({ name: 'fc.weight', bytes: 139_264_000 });
-    expect(dflash.validation.nativeGreedyParity).toEqual({ status: 'pass', tokens: 32, temperature: 0 });
-    expect(dflash.pairings['27b'].support).toBe('conditional');
-    expect(dflash.pairings['8b'].support).toBe('unsupported');
-  });
-  it('requires the DFlash add-on contract', () => {
-    const { dflash: _dflash, ...withoutDFlash } = rawManifest();
-    expect(() => parseModelManifestV2(withoutDFlash)).toThrow(/dflash must be an object/);
-  });
-  const failClosedDFlashCases: Array<[
-    string,
-    (value: ReturnType<typeof rawManifest>) => void,
-    RegExp,
-  ]> = [
-    [
-      'runtime activation before browser gates pass',
-      (value) => { value.dflash.runtimeAvailable = true; },
-      /runtimeAvailable must remain false/,
-    ],
-    [
-      'speculative type plumbing claimed active',
-      (value) => { value.dflash.browser.specTypePlumbed = true; },
-      /specTypePlumbed must remain false/,
-    ],
-    [
-      'invalid source evidence hash',
-      (value) => { value.dflash.source.sha256 = 'invalid'; },
-      /source\.sha256 must be lowercase SHA-256/,
-    ],
-    [
-      'invalid native reference byte count',
-      (value) => { value.dflash.nativeReference.bytes = 0; },
-      /nativeReference\.bytes must be a positive integer/,
-    ],
-    [
-      'Q8 tensor no longer explaining the binding-limit rejection',
-      (value) => { value.dflash.nativeReference.largestTensor.bytes = 128 * 1024 * 1024; },
-      /must exceed the rejected 128 MiB baseline limit/,
-    ],
-    [
-      '27B pairing no longer conditional',
-      (value) => { value.dflash.pairings['27b'].support = 'unsupported'; },
-      /pairings\.27b\.support must equal conditional/,
-    ],
-    [
-      'acceptance benchmark claimed complete',
-      (value) => { value.dflash.validation.acceptanceBenchmark = 'pass'; },
-      /acceptanceBenchmark must remain pending/,
-    ],
-    [
-      'validation taps disagree with the 27B pairing',
-      (value) => { value.dflash.validation.targetTaps[0] = 3; },
-      /validation\.targetTaps must match the 27b pairing/,
-    ],
-  ];
-  it.each(failClosedDFlashCases)('rejects DFlash when %s', (_label, mutate, expected) => {
-    const value = rawManifest();
-    mutate(value);
-    expect(() => parseModelManifestV2(value)).toThrow(expected);
-  });
   it('rejects out-of-order shards', () => {
     const value = rawManifest();
     const model = value.models.find((candidate) => candidate.id === '27b')!;

   };
 }
 function rawManifest() {
   return {
     schemaVersion: 2,
     repository: { id: 'WaveCut/Bonsai-web-GGUF', revision: REVISION },
     models: (['1_7b', '4b', '8b', '27b'] as const).map(rawModel),
   };
 }
     ]);
   });
   it('rejects out-of-order shards', () => {
     const value = rawManifest();
     const model = value.models.find((candidate) => candidate.id === '27b')!;

src/engine/manifest.ts CHANGED Viewed

@@ -47,80 +47,6 @@ export interface ManifestModelV2 {
   };
 }
-export interface ManifestDFlashSource {
-  repo: string;
-  revision: string;
-  file: string;
-  bytes: number;
-  sha256: string;
-  format: 'safetensors';
-  dtype: 'BF16';
-  parameters: number;
-  sourceOnly: true;
-  license: 'MIT';
-}
-export interface ManifestDFlashNativeReference {
-  path: string;
-  bytes: number;
-  sha256: string;
-  format: 'GGUF';
-  quantization: 'Q8_0';
-  largestTensor: {
-    name: string;
-    bytes: number;
-  };
-  role: 'native correctness reference only';
-}
-export interface ManifestDFlashUnsupportedPairing {
-  support: 'unsupported';
-  reason: string;
-}
-export interface ManifestDFlashConditionalPairing {
-  support: 'conditional';
-  compatibilityStatus: 'native-greedy-parity-pass';
-  runtimeAvailable: false;
-  blockSize: number;
-  maskTokenId: number;
-  targetLayerIdsZeroBased: number[];
-  targetTapsOneBased: number[];
-  reason: string;
-}
-export interface ManifestDFlash {
-  status: 'conditional';
-  enabledByDefault: false;
-  runtimeAvailable: false;
-  source: ManifestDFlashSource;
-  nativeReference: ManifestDFlashNativeReference;
-  browser: {
-    enabled: false;
-    architectureCompiled: true;
-    specTypePlumbed: false;
-    candidateQuantizationStatus: 'q8-rejected-binding-limit';
-  };
-  validation: {
-    shape: 'pass';
-    tokenizer: 'exact-match';
-    targetTaps: number[];
-    nativeGreedyParity: {
-      status: 'pass';
-      tokens: number;
-      temperature: 0;
-    };
-    acceptanceBenchmark: 'pending';
-    browserSpeedGate: 'pending';
-  };
-  pairings: {
-    '1_7b': ManifestDFlashUnsupportedPairing;
-    '4b': ManifestDFlashUnsupportedPairing;
-    '8b': ManifestDFlashUnsupportedPairing;
-    '27b': ManifestDFlashConditionalPairing;
-  };
-}
 export interface ModelManifestV2 {
   schemaVersion: 2;
   repository: {
@@ -128,14 +54,12 @@ export interface ModelManifestV2 {
     revision: string | null;
   };
   models: ManifestModelV2[];
-  dflash: ManifestDFlash;
 }
 const MODEL_IDS = new Set<ModelTierId>(['1_7b', '4b', '8b', '27b']);
 const SHA256 = /^[0-9a-f]{64}$/;
 const REVISION = /^[0-9a-f]{40}$/;
 const SPLIT_FILE = /-(\d{5})-of-(\d{5})\.gguf$/i;
-const BASELINE_WEBGPU_STORAGE_BUFFER_BYTES = 128 * 1024 * 1024;
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
@@ -188,25 +112,6 @@ function requirePath(value: unknown, field: string): string {
   return path;
 }
-function requireSafetensorsPath(value: unknown, field: string): string {
-  const path = requireString(value, field);
-  assert(!path.startsWith('/'), `${field} must be repository-relative`);
-  assert(!path.split('/').some((part) => part === '' || part === '.' || part === '..'), `${field} contains an unsafe segment`);
-  assert(path.toLowerCase().endsWith('.safetensors'), `${field} must point to a safetensors file`);
-  return path;
-}
-function requireIntegerArray(value: unknown, field: string, minimum: number): number[] {
-  assert(Array.isArray(value) && value.length > 0, `${field} must be a non-empty array`);
-  return value.map((item, index) => {
-    assert(
-      Number.isSafeInteger(item) && Number(item) >= minimum,
-      `${field}[${index}] must be an integer greater than or equal to ${minimum}`,
-    );
-    return Number(item);
-  });
-}
 function parseSource(value: unknown, field: string): ManifestSourceModel {
   assert(isRecord(value), `${field} must be an object`);
   return {
@@ -262,201 +167,6 @@ function parseChatTemplate(value: unknown, field: string): ManifestChatTemplate
   };
 }
-function parseDFlashUnsupportedPairing(
-  value: unknown,
-  field: string,
-): ManifestDFlashUnsupportedPairing {
-  assert(isRecord(value), `${field} must be an object`);
-  assert(value.support === 'unsupported', `${field}.support must equal unsupported`);
-  return {
-    support: 'unsupported',
-    reason: requireString(value.reason, `${field}.reason`),
-  };
-}
-function parseDFlash(value: unknown): ManifestDFlash {
-  const field = 'dflash';
-  assert(isRecord(value), `${field} must be an object`);
-  assert(value.status === 'conditional', `${field}.status must equal conditional`);
-  assert(value.enabledByDefault === false, `${field}.enabledByDefault must remain false`);
-  assert(value.runtimeAvailable === false, `${field}.runtimeAvailable must remain false`);
-  assert(isRecord(value.source), `${field}.source must be an object`);
-  const source = value.source;
-  assert(source.format === 'safetensors', `${field}.source.format must equal safetensors`);
-  assert(source.dtype === 'BF16', `${field}.source.dtype must equal BF16`);
-  assert(source.sourceOnly === true, `${field}.source.sourceOnly must remain true`);
-  assert(source.license === 'MIT', `${field}.source.license must equal MIT`);
-  assert(isRecord(value.nativeReference), `${field}.nativeReference must be an object`);
-  const nativeReference = value.nativeReference;
-  assert(nativeReference.format === 'GGUF', `${field}.nativeReference.format must equal GGUF`);
-  assert(nativeReference.quantization === 'Q8_0', `${field}.nativeReference.quantization must equal Q8_0`);
-  assert(
-    nativeReference.role === 'native correctness reference only',
-    `${field}.nativeReference.role must remain native correctness reference only`,
-  );
-  assert(
-    isRecord(nativeReference.largestTensor),
-    `${field}.nativeReference.largestTensor must be an object`,
-  );
-  const largestTensor = {
-    name: requireString(nativeReference.largestTensor.name, `${field}.nativeReference.largestTensor.name`),
-    bytes: requirePositiveInteger(nativeReference.largestTensor.bytes, `${field}.nativeReference.largestTensor.bytes`),
-  };
-  const nativeReferenceBytes = requirePositiveInteger(
-    nativeReference.bytes,
-    `${field}.nativeReference.bytes`,
-  );
-  assert(
-    largestTensor.bytes <= nativeReferenceBytes,
-    `${field}.nativeReference.largestTensor.bytes cannot exceed nativeReference.bytes`,
-  );
-  assert(
-    largestTensor.bytes > BASELINE_WEBGPU_STORAGE_BUFFER_BYTES,
-    `${field}.nativeReference.largestTensor.bytes must exceed the rejected 128 MiB baseline limit`,
-  );
-  assert(isRecord(value.browser), `${field}.browser must be an object`);
-  const browser = value.browser;
-  assert(browser.enabled === false, `${field}.browser.enabled must remain false`);
-  assert(browser.architectureCompiled === true, `${field}.browser.architectureCompiled must equal true`);
-  assert(browser.specTypePlumbed === false, `${field}.browser.specTypePlumbed must remain false`);
-  assert(
-    browser.candidateQuantizationStatus === 'q8-rejected-binding-limit',
-    `${field}.browser.candidateQuantizationStatus must equal q8-rejected-binding-limit`,
-  );
-  assert(isRecord(value.validation), `${field}.validation must be an object`);
-  const validation = value.validation;
-  assert(validation.shape === 'pass', `${field}.validation.shape must equal pass`);
-  assert(validation.tokenizer === 'exact-match', `${field}.validation.tokenizer must equal exact-match`);
-  assert(
-    validation.acceptanceBenchmark === 'pending',
-    `${field}.validation.acceptanceBenchmark must remain pending`,
-  );
-  assert(validation.browserSpeedGate === 'pending', `${field}.validation.browserSpeedGate must remain pending`);
-  assert(
-    isRecord(validation.nativeGreedyParity),
-    `${field}.validation.nativeGreedyParity must be an object`,
-  );
-  assert(
-    validation.nativeGreedyParity.status === 'pass',
-    `${field}.validation.nativeGreedyParity.status must equal pass`,
-  );
-  assert(
-    validation.nativeGreedyParity.temperature === 0,
-    `${field}.validation.nativeGreedyParity.temperature must equal 0`,
-  );
-  const targetTaps = requireIntegerArray(validation.targetTaps, `${field}.validation.targetTaps`, 1);
-  assert(
-    new Set(targetTaps).size === targetTaps.length,
-    `${field}.validation.targetTaps must not contain duplicates`,
-  );
-  assert(isRecord(value.pairings), `${field}.pairings must be an object`);
-  const pairings = value.pairings;
-  assert(
-    Object.keys(pairings).length === MODEL_IDS.size
-      && Object.keys(pairings).every((id) => MODEL_IDS.has(id as ModelTierId)),
-    `${field}.pairings must contain exactly the four Bonsai tiers`,
-  );
-  const unsupported1_7b = parseDFlashUnsupportedPairing(pairings['1_7b'], `${field}.pairings.1_7b`);
-  const unsupported4b = parseDFlashUnsupportedPairing(pairings['4b'], `${field}.pairings.4b`);
-  const unsupported8b = parseDFlashUnsupportedPairing(pairings['8b'], `${field}.pairings.8b`);
-  assert(isRecord(pairings['27b']), `${field}.pairings.27b must be an object`);
-  const pairing27b = pairings['27b'];
-  assert(pairing27b.support === 'conditional', `${field}.pairings.27b.support must equal conditional`);
-  assert(
-    pairing27b.compatibilityStatus === 'native-greedy-parity-pass',
-    `${field}.pairings.27b.compatibilityStatus must equal native-greedy-parity-pass`,
-  );
-  assert(pairing27b.runtimeAvailable === false, `${field}.pairings.27b.runtimeAvailable must remain false`);
-  const targetLayerIdsZeroBased = requireIntegerArray(
-    pairing27b.targetLayerIdsZeroBased,
-    `${field}.pairings.27b.targetLayerIdsZeroBased`,
-    0,
-  );
-  const targetTapsOneBased = requireIntegerArray(
-    pairing27b.targetTapsOneBased,
-    `${field}.pairings.27b.targetTapsOneBased`,
-    1,
-  );
-  assert(
-    targetLayerIdsZeroBased.length === targetTapsOneBased.length
-      && targetTapsOneBased.every((tap, index) => tap === targetLayerIdsZeroBased[index]! + 1),
-    `${field}.pairings.27b target layers and taps must describe the same one-based positions`,
-  );
-  assert(
-    targetTaps.length === targetTapsOneBased.length
-      && targetTaps.every((tap, index) => tap === targetTapsOneBased[index]),
-    `${field}.validation.targetTaps must match the 27b pairing`,
-  );
-  return {
-    status: 'conditional',
-    enabledByDefault: false,
-    runtimeAvailable: false,
-    source: {
-      repo: requireRepo(source.repo, `${field}.source.repo`),
-      revision: requireRevision(source.revision, `${field}.source.revision`),
-      file: requireSafetensorsPath(source.file, `${field}.source.file`),
-      bytes: requirePositiveInteger(source.bytes, `${field}.source.bytes`),
-      sha256: requireSha256(source.sha256, `${field}.source.sha256`),
-      format: 'safetensors',
-      dtype: 'BF16',
-      parameters: requirePositiveInteger(source.parameters, `${field}.source.parameters`),
-      sourceOnly: true,
-      license: 'MIT',
-    },
-    nativeReference: {
-      path: requirePath(nativeReference.path, `${field}.nativeReference.path`),
-      bytes: nativeReferenceBytes,
-      sha256: requireSha256(nativeReference.sha256, `${field}.nativeReference.sha256`),
-      format: 'GGUF',
-      quantization: 'Q8_0',
-      largestTensor,
-      role: 'native correctness reference only',
-    },
-    browser: {
-      enabled: false,
-      architectureCompiled: true,
-      specTypePlumbed: false,
-      candidateQuantizationStatus: 'q8-rejected-binding-limit',
-    },
-    validation: {
-      shape: 'pass',
-      tokenizer: 'exact-match',
-      targetTaps,
-      nativeGreedyParity: {
-        status: 'pass',
-        tokens: requirePositiveInteger(
-          validation.nativeGreedyParity.tokens,
-          `${field}.validation.nativeGreedyParity.tokens`,
-        ),
-        temperature: 0,
-      },
-      acceptanceBenchmark: 'pending',
-      browserSpeedGate: 'pending',
-    },
-    pairings: {
-      '1_7b': unsupported1_7b,
-      '4b': unsupported4b,
-      '8b': unsupported8b,
-      '27b': {
-        support: 'conditional',
-        compatibilityStatus: 'native-greedy-parity-pass',
-        runtimeAvailable: false,
-        blockSize: requirePositiveInteger(pairing27b.blockSize, `${field}.pairings.27b.blockSize`),
-        maskTokenId: requireNonNegativeInteger(pairing27b.maskTokenId, `${field}.pairings.27b.maskTokenId`),
-        targetLayerIdsZeroBased,
-        targetTapsOneBased,
-        reason: requireString(pairing27b.reason, `${field}.pairings.27b.reason`),
-      },
-    },
-  };
-}
 function validateFileOrder(files: ManifestModelFile[], field: string): void {
   const matches = files.map((file) => file.path.match(SPLIT_FILE));
   const splitCount = matches.filter(Boolean).length;
@@ -549,8 +259,6 @@ export function parseModelManifestV2(value: unknown): ModelManifestV2 {
   assert(models.length === MODEL_IDS.size, 'models must contain exactly the four Bonsai tiers');
   assert(new Set(models.map((model) => model.id)).size === models.length, 'models contains duplicate ids');
   assert(models.every((model) => MODEL_IDS.has(model.id)), 'models contains an unsupported id');
-  const dflash = parseDFlash(value.dflash);
   return {
     schemaVersion: 2,
     repository: {
@@ -558,7 +266,6 @@ export function parseModelManifestV2(value: unknown): ModelManifestV2 {
       revision: repositoryRevision,
     },
     models,
-    dflash,
   };
 }

   };
 }
 export interface ModelManifestV2 {
   schemaVersion: 2;
   repository: {
     revision: string | null;
   };
   models: ManifestModelV2[];
 }
 const MODEL_IDS = new Set<ModelTierId>(['1_7b', '4b', '8b', '27b']);
 const SHA256 = /^[0-9a-f]{64}$/;
 const REVISION = /^[0-9a-f]{40}$/;
 const SPLIT_FILE = /-(\d{5})-of-(\d{5})\.gguf$/i;
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
   return path;
 }
 function parseSource(value: unknown, field: string): ManifestSourceModel {
   assert(isRecord(value), `${field} must be an object`);
   return {
   };
 }
 function validateFileOrder(files: ManifestModelFile[], field: string): void {
   const matches = files.map((file) => file.path.match(SPLIT_FILE));
   const splitCount = matches.filter(Boolean).length;
   assert(models.length === MODEL_IDS.size, 'models must contain exactly the four Bonsai tiers');
   assert(new Set(models.map((model) => model.id)).size === models.length, 'models contains duplicate ids');
   assert(models.every((model) => MODEL_IDS.has(model.id)), 'models contains an unsupported id');
   return {
     schemaVersion: 2,
     repository: {
       revision: repositoryRevision,
     },
     models,
   };
 }

src/engine/native-log.test.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import {
   NativeLogCollector,
   parseNativeDeviceLostSignal,
   parseNativeLog,
 } from './native-log';
 describe('parseNativeLog', () => {
@@ -17,9 +18,14 @@ llama_kv_cache: WebGPU KV buffer size = 56.00 MiB
 llama_kv_cache: size = 56.00 MiB, K (f16): 28.00 MiB, V (f16): 28.00 MiB
 sched_reserve: WebGPU compute buffer size = 301.00 MiB
 sched_reserve: CPU compute buffer size = 13.01 MiB
 sched_reserve: graph splits = 1
 `);
     expect(report).toEqual({
       backends: ['WebGPU', 'CPU'],
       nGraphSplits: 1,
@@ -29,7 +35,53 @@ sched_reserve: graph splits = 1
       cacheTypeK: 'f16',
       cacheTypeV: 'f16',
       webgpuKvBufferBytes: 56 * 1024 ** 2,
     });
   });
   it('counts explicit CPU graph nodes and keeps the worst graph split observation', () => {
@@ -100,6 +152,7 @@ sched_reserve: graph splits = 1
       cacheTypeK: null,
       cacheTypeV: null,
       webgpuKvBufferBytes: null,
     });
     expect(collector.deviceLostSignal()).toMatchObject({ reason: 1, message: 'unknown' });
@@ -107,6 +160,33 @@ sched_reserve: graph splits = 1
     expect(collector.deviceLostSignal()).toBeNull();
   });
   it('notifies an active native-operation watcher without polling', async () => {
     const collector = new NativeLogCollector();
     const watch = collector.watchDeviceLost();

   NativeLogCollector,
   parseNativeDeviceLostSignal,
   parseNativeLog,
+  parseNativeModelLoadProgress,
 } from './native-log';
 describe('parseNativeLog', () => {
 llama_kv_cache: size = 56.00 MiB, K (f16): 28.00 MiB, V (f16): 28.00 MiB
 sched_reserve: WebGPU compute buffer size = 301.00 MiB
 sched_reserve: CPU compute buffer size = 13.01 MiB
+llama_context: CPU output buffer size = 0.95 MiB
 sched_reserve: graph splits = 1
 `);
+    const modelBufferBytes = Math.round(72 * 1024 ** 2) + Math.round(3616.77 * 1024 ** 2);
+    const computeBufferBytes = Math.round(301 * 1024 ** 2) + Math.round(13.01 * 1024 ** 2);
+    const outputBufferBytes = Math.round(0.95 * 1024 ** 2);
     expect(report).toEqual({
       backends: ['WebGPU', 'CPU'],
       nGraphSplits: 1,
       cacheTypeK: 'f16',
       cacheTypeV: 'f16',
       webgpuKvBufferBytes: 56 * 1024 ** 2,
+      modelBufferBytes,
+      computeBufferBytes,
+      outputBufferBytes,
+      allocatedBufferBytes: modelBufferBytes
+        + computeBufferBytes
+        + outputBufferBytes
+        + (56 * 1024 ** 2),
+      webgpuTrace: [],
+    });
+  });
+  it('parses and clamps structured native model-load progress', () => {
+    expect(parseNativeModelLoadProgress(
+      '@@MODEL_LOAD_PROGRESS@@{"state":"loading","stages":["metadata","tensors"],"current":"tensors","value":0.375}',
+    )).toEqual({
+      state: 'loading',
+      stages: ['metadata', 'tensors'],
+      current: 'tensors',
+      value: 0.375,
     });
+    expect(parseNativeModelLoadProgress(
+      '@@MODEL_LOAD_PROGRESS@@{"state":"loading","value":7}',
+    )).toEqual({ state: 'loading', stages: [], current: null, value: 1 });
+    expect(parseNativeModelLoadProgress(
+      '@@MODEL_LOAD_PROGRESS@@{"state":"ready","value":0}',
+    )).toEqual({ state: 'ready', stages: [], current: null, value: 1 });
+    expect(parseNativeModelLoadProgress('@@MODEL_LOAD_PROGRESS@@not-json')).toBeNull();
+  });
+  it('delivers native model-load progress to active listeners only', () => {
+    const collector = new NativeLogCollector();
+    const observed: unknown[] = [];
+    const unsubscribe = collector.onModelLoadProgress((progress) => observed.push(progress));
+    collector.append([
+      '@@MODEL_LOAD_PROGRESS@@{"state":"loading","stages":["tensors"],"current":"tensors","value":0.5}',
+    ]);
+    collector.append(['@@MODEL_LOAD_PROGRESS@@invalid']);
+    unsubscribe();
+    collector.append(['@@MODEL_LOAD_PROGRESS@@{"state":"ready"}']);
+    expect(observed).toEqual([{
+      state: 'loading',
+      stages: ['tensors'],
+      current: 'tensors',
+      value: 0.5,
+    }]);
   });
   it('counts explicit CPU graph nodes and keeps the worst graph split observation', () => {
       cacheTypeK: null,
       cacheTypeV: null,
       webgpuKvBufferBytes: null,
+      webgpuTrace: [],
     });
     expect(collector.deviceLostSignal()).toMatchObject({ reason: 1, message: 'unknown' });
     expect(collector.deviceLostSignal()).toBeNull();
   });
+  it('retains WebGPU trace markers in a separate report channel', () => {
+    const collector = new NativeLogCollector();
+    collector.append(['@@WEBGPU_TRACE@@completion_begin id=1']);
+    collector.append(['@@WEBGPU_TRACE@@graph_end id=1 nodes=3735 dispatches=1940 submits=31']);
+    collector.append(['unrelated native output']);
+    expect(collector.report().webgpuTrace).toEqual([
+      '@@WEBGPU_TRACE@@completion_begin id=1',
+      '@@WEBGPU_TRACE@@graph_end id=1 nodes=3735 dispatches=1940 submits=31',
+    ]);
+    collector.clear();
+    expect(collector.report().webgpuTrace).toEqual([]);
+  });
+  it('bounds the trace independently with room for a complete 64-token run', () => {
+    const collector = new NativeLogCollector();
+    for (let index = 0; index <= 16_384; index += 1) {
+      collector.append([`@@WEBGPU_TRACE@@step_end completion=1 step=${index}`]);
+    }
+    const trace = collector.report().webgpuTrace;
+    expect(trace).toHaveLength(16_384);
+    expect(trace[0]).toContain('step=1');
+    expect(trace.at(-1)).toContain('step=16384');
+  });
   it('notifies an active native-operation watcher without polling', async () => {
     const collector = new NativeLogCollector();
     const watch = collector.watchDeviceLost();

src/engine/native-log.ts CHANGED Viewed

@@ -12,6 +12,11 @@ export interface BackendReport {
   cacheTypeK: string | null;
   cacheTypeV: string | null;
   webgpuKvBufferBytes: number | null;
 }
 export interface NativeDeviceLostSignal {
@@ -25,10 +30,20 @@ export interface NativeDeviceLostWatch {
   dispose(): void;
 }
 const BACKEND_NAMES = ['WebGPU', 'CPU', 'Metal', 'CUDA', 'Vulkan'] as const;
 const EVIDENCE = /using device|model buffer size|KV buffer size|compute buffer size|output buffer size|offloaded \d+\/\d+ layers|graph splits\s*=|graph_compute\(|backend\s*=\s*CPU|assigned to (?:device )?CPU|(?:ops?|nodes?).*(?:on|to) CPU|flash_attn\s*=|flash attention.*(?:enabled|disabled)|\bK\s*\([^)]+\).*\bV\s*\([^)]+\)/i;
 const WEBGPU_DEVICE_LOST = /\bdevice\s+lost!?(?:\s+reason:\s*(-?\d+),\s*message:\s*(.*))?/i;
 const WEBGPU_KV_BUFFER = /\bWebGPU\s+KV buffer size\s*=\s*(\d+(?:\.\d+)?)\s*(KiB|MiB|GiB)\b/i;
 const BINARY_UNIT_BYTES = {
   kib: 1024,
@@ -81,6 +96,26 @@ export function parseNativeDeviceLostSignal(line: string): NativeDeviceLostSigna
   };
 }
 export function parseNativeLog(input: string | readonly string[]): BackendReport {
   const lines = typeof input === 'string' ? input.split(/\r?\n/) : input;
   const backends = new Set<string>();
@@ -91,6 +126,9 @@ export function parseNativeLog(input: string | readonly string[]): BackendReport
   let cacheTypeK: string | null = null;
   let cacheTypeV: string | null = null;
   let webgpuKvBufferBytes: number | null = null;
   for (const line of lines) {
     const deviceMatch = line.match(/using device\s+([^\s(]+)\s+\(([^)]+)\)/i);
@@ -141,9 +179,24 @@ export function parseNativeLog(input: string | readonly string[]): BackendReport
       const bytes = Math.round(Number(kvBufferSize) * unitBytes);
       webgpuKvBufferBytes = (webgpuKvBufferBytes ?? 0) + bytes;
     }
     opsOnCpu += cpuOpsInLine(line);
   }
   return {
     backends: [...backends],
     nGraphSplits: graphSplits.length > 0 ? Math.max(...graphSplits) : null,
@@ -153,16 +206,24 @@ export function parseNativeLog(input: string | readonly string[]): BackendReport
     cacheTypeK,
     cacheTypeV,
     webgpuKvBufferBytes,
   };
 }
 export class NativeLogCollector {
   private lines: string[] = [];
   private deviceLost: NativeDeviceLostSignal | null = null;
   private readonly deviceLostListeners = new Set<(signal: NativeDeviceLostSignal) => void>();
   clear(): void {
     this.lines = [];
     this.deviceLost = null;
   }
@@ -170,6 +231,10 @@ export class NativeLogCollector {
     const line = values
       .map((value) => (typeof value === 'string' ? value : JSON.stringify(value)))
       .join(' ');
     if (!this.deviceLost) {
       const deviceLost = parseNativeDeviceLostSignal(line);
       if (deviceLost) {
@@ -184,10 +249,19 @@ export class NativeLogCollector {
         this.lines.shift();
       }
     }
   }
   report(): BackendReport {
-    return parseNativeLog(this.lines);
   }
   deviceLostSignal(): NativeDeviceLostSignal | null {
@@ -211,4 +285,9 @@ export class NativeLogCollector {
       },
     };
   }
 }

   cacheTypeK: string | null;
   cacheTypeV: string | null;
   webgpuKvBufferBytes: number | null;
+  modelBufferBytes?: number;
+  computeBufferBytes?: number;
+  outputBufferBytes?: number;
+  allocatedBufferBytes?: number;
+  webgpuTrace: string[];
 }
 export interface NativeDeviceLostSignal {
   dispose(): void;
 }
+export interface NativeModelLoadProgress {
+  state: 'loading' | 'ready';
+  stages: string[];
+  current: string | null;
+  value: number;
+}
 const BACKEND_NAMES = ['WebGPU', 'CPU', 'Metal', 'CUDA', 'Vulkan'] as const;
 const EVIDENCE = /using device|model buffer size|KV buffer size|compute buffer size|output buffer size|offloaded \d+\/\d+ layers|graph splits\s*=|graph_compute\(|backend\s*=\s*CPU|assigned to (?:device )?CPU|(?:ops?|nodes?).*(?:on|to) CPU|flash_attn\s*=|flash attention.*(?:enabled|disabled)|\bK\s*\([^)]+\).*\bV\s*\([^)]+\)/i;
 const WEBGPU_DEVICE_LOST = /\bdevice\s+lost!?(?:\s+reason:\s*(-?\d+),\s*message:\s*(.*))?/i;
 const WEBGPU_KV_BUFFER = /\bWebGPU\s+KV buffer size\s*=\s*(\d+(?:\.\d+)?)\s*(KiB|MiB|GiB)\b/i;
+const WEBGPU_TRACE_PREFIX = '@@WEBGPU_TRACE@@';
+const MODEL_LOAD_PROGRESS_PREFIX = '@@MODEL_LOAD_PROGRESS@@';
+const WEBGPU_TRACE_LINE_LIMIT = 16_384;
 const BINARY_UNIT_BYTES = {
   kib: 1024,
   };
 }
+export function parseNativeModelLoadProgress(line: string): NativeModelLoadProgress | null {
+  if (!line.startsWith(MODEL_LOAD_PROGRESS_PREFIX)) return null;
+  try {
+    const payload = JSON.parse(line.slice(MODEL_LOAD_PROGRESS_PREFIX.length)) as Record<string, unknown>;
+    if (payload.state !== 'loading' && payload.state !== 'ready') return null;
+    const stages = Array.isArray(payload.stages)
+      ? payload.stages.filter((stage): stage is string => typeof stage === 'string')
+      : [];
+    const current = typeof payload.current === 'string' ? payload.current : null;
+    const value = payload.state === 'ready'
+      ? 1
+      : typeof payload.value === 'number' && Number.isFinite(payload.value)
+        ? Math.min(1, Math.max(0, payload.value))
+        : 0;
+    return { state: payload.state, stages, current, value };
+  } catch {
+    return null;
+  }
+}
 export function parseNativeLog(input: string | readonly string[]): BackendReport {
   const lines = typeof input === 'string' ? input.split(/\r?\n/) : input;
   const backends = new Set<string>();
   let cacheTypeK: string | null = null;
   let cacheTypeV: string | null = null;
   let webgpuKvBufferBytes: number | null = null;
+  let modelBufferBytes = 0;
+  let computeBufferBytes = 0;
+  let outputBufferBytes = 0;
   for (const line of lines) {
     const deviceMatch = line.match(/using device\s+([^\s(]+)\s+\(([^)]+)\)/i);
       const bytes = Math.round(Number(kvBufferSize) * unitBytes);
       webgpuKvBufferBytes = (webgpuKvBufferBytes ?? 0) + bytes;
     }
+    const bufferMatch = line.match(/\b(model|compute|output) buffer size\s*=\s*(\d+(?:\.\d+)?)\s*(KiB|MiB|GiB)\b/i);
+    const bufferKind = bufferMatch?.[1]?.toLowerCase();
+    const bufferSize = bufferMatch?.[2];
+    const bufferUnit = bufferMatch?.[3];
+    if (bufferKind && bufferSize && bufferUnit) {
+      const unitBytes = BINARY_UNIT_BYTES[bufferUnit.toLowerCase() as keyof typeof BINARY_UNIT_BYTES];
+      const bytes = Math.round(Number(bufferSize) * unitBytes);
+      if (bufferKind === 'model') modelBufferBytes += bytes;
+      if (bufferKind === 'compute') computeBufferBytes += bytes;
+      if (bufferKind === 'output') outputBufferBytes += bytes;
+    }
     opsOnCpu += cpuOpsInLine(line);
   }
+  const allocatedBufferBytes = modelBufferBytes
+    + computeBufferBytes
+    + outputBufferBytes
+    + (webgpuKvBufferBytes ?? 0);
   return {
     backends: [...backends],
     nGraphSplits: graphSplits.length > 0 ? Math.max(...graphSplits) : null,
     cacheTypeK,
     cacheTypeV,
     webgpuKvBufferBytes,
+    ...(modelBufferBytes > 0 ? { modelBufferBytes } : {}),
+    ...(computeBufferBytes > 0 ? { computeBufferBytes } : {}),
+    ...(outputBufferBytes > 0 ? { outputBufferBytes } : {}),
+    ...(allocatedBufferBytes > 0 ? { allocatedBufferBytes } : {}),
+    webgpuTrace: [],
   };
 }
 export class NativeLogCollector {
   private lines: string[] = [];
+  private webgpuTrace: string[] = [];
   private deviceLost: NativeDeviceLostSignal | null = null;
   private readonly deviceLostListeners = new Set<(signal: NativeDeviceLostSignal) => void>();
+  private readonly modelLoadListeners = new Set<(progress: NativeModelLoadProgress) => void>();
   clear(): void {
     this.lines = [];
+    this.webgpuTrace = [];
     this.deviceLost = null;
   }
     const line = values
       .map((value) => (typeof value === 'string' ? value : JSON.stringify(value)))
       .join(' ');
+    const modelLoadProgress = parseNativeModelLoadProgress(line);
+    if (modelLoadProgress) {
+      for (const listener of this.modelLoadListeners) listener(modelLoadProgress);
+    }
     if (!this.deviceLost) {
       const deviceLost = parseNativeDeviceLostSignal(line);
       if (deviceLost) {
         this.lines.shift();
       }
     }
+    if (line.startsWith(WEBGPU_TRACE_PREFIX)) {
+      this.webgpuTrace.push(line.slice(0, 4096));
+      if (this.webgpuTrace.length > WEBGPU_TRACE_LINE_LIMIT) {
+        this.webgpuTrace.shift();
+      }
+    }
   }
   report(): BackendReport {
+    return {
+      ...parseNativeLog(this.lines),
+      webgpuTrace: [...this.webgpuTrace],
+    };
   }
   deviceLostSignal(): NativeDeviceLostSignal | null {
       },
     };
   }
+  onModelLoadProgress(listener: (progress: NativeModelLoadProgress) => void): () => void {
+    this.modelLoadListeners.add(listener);
+    return () => this.modelLoadListeners.delete(listener);
+  }
 }

src/engine/protocol.ts CHANGED Viewed

@@ -340,17 +340,38 @@ export type EngineResponse = {
     };
 }[EngineMethod];
 export type EngineEvent =
   | {
     type: 'event';
     requestId: string;
     event: 'progress';
-    phase: 'manifest' | 'download' | 'load';
     loadedBytes: number;
     totalBytes: number;
     shardIndex: number | null;
     shardCount: number;
     shardPath: string | null;
   }
   | {
     type: 'event';
@@ -358,6 +379,19 @@ export type EngineEvent =
     event: 'token';
     text: string;
     reasoningDelta?: string;
   };
 export type EngineWorkerMessage = EngineResponse | EngineEvent;

     };
 }[EngineMethod];
+export type EngineShardProgressState =
+  | 'queued'
+  | 'cached'
+  | 'downloading'
+  | 'verifying'
+  | 'complete'
+  | 'error';
+export interface EngineShardProgress {
+  index: number;
+  path: string;
+  loadedBytes: number;
+  verifiedBytes: number;
+  totalBytes: number;
+  state: EngineShardProgressState;
+}
 export type EngineEvent =
   | {
     type: 'event';
     requestId: string;
     event: 'progress';
+    phase: 'manifest' | 'cache' | 'download' | 'verify' | 'load';
     loadedBytes: number;
     totalBytes: number;
     shardIndex: number | null;
     shardCount: number;
     shardPath: string | null;
+    stageProgress: number | null;
+    nativeStage: string | null;
+    residentBytes: number | null;
+    shards: EngineShardProgress[];
   }
   | {
     type: 'event';
     event: 'token';
     text: string;
     reasoningDelta?: string;
+  }
+  | {
+    type: 'event';
+    requestId: string;
+    event: 'generation';
+    phase: 'prefill' | 'decode';
+    promptProcessed: number;
+    promptTotal: number;
+    promptCached: number;
+    completionTokens: number;
+    elapsedMs: number;
+    promptTokensPerSecond: number;
+    decodeTokensPerSecond: number;
   };
 export type EngineWorkerMessage = EngineResponse | EngineEvent;

src/engine/runtime-device-lost.test.ts CHANGED Viewed

@@ -70,6 +70,7 @@ describe('BrowserEngineRuntime WebGPU device loss', () => {
       cacheTypeK: null,
       cacheTypeV: null,
       webgpuKvBufferBytes: null,
     });
     expect(exit).not.toHaveBeenCalled();
     expect(internals.loaded).not.toBeNull();

       cacheTypeK: null,
       cacheTypeV: null,
       webgpuKvBufferBytes: null,
+      webgpuTrace: [],
     });
     expect(exit).not.toHaveBeenCalled();
     expect(internals.loaded).not.toBeNull();

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

@@ -4,7 +4,12 @@ import { verifyBlobSha256 } from './blob-integrity';
 import { EngineRuntimeError } from './errors';
 import type { ManifestModelV2 } from './manifest';
 import { isShardDownloadFailureDetails, type EngineEvent } from './protocol';
-import { BrowserEngineRuntime, resolveLoadTuning, selectWasmFlavor } from './runtime';
 type DownloadOptions = {
   signal?: AbortSignal;
@@ -455,6 +460,32 @@ describe('resolveLoadTuning', () => {
   });
 });
 describe('selectWasmFlavor', () => {
   it('uses the browser-native flavor for auto', () => {
     expect(selectWasmFlavor('auto', false)).toBe('jspi');

 import { EngineRuntimeError } from './errors';
 import type { ManifestModelV2 } from './manifest';
 import { isShardDownloadFailureDetails, type EngineEvent } from './protocol';
+import {
+  BrowserEngineRuntime,
+  resolveLoadTuning,
+  resolveRuntimeBatchShape,
+  selectWasmFlavor,
+} from './runtime';
 type DownloadOptions = {
   signal?: AbortSignal;
   });
 });
+describe('resolveRuntimeBatchShape', () => {
+  const releaseDefaults = resolveLoadTuning(undefined, 'auto');
+  it('caps only the compat release path to short Safari-safe command buffers', () => {
+    expect(resolveRuntimeBatchShape(releaseDefaults, 'compat')).toEqual({
+      nBatch: 32,
+      nUbatch: 16,
+    });
+    expect(resolveRuntimeBatchShape(releaseDefaults, 'jspi')).toEqual({
+      nBatch: undefined,
+      nUbatch: undefined,
+    });
+  });
+  it('preserves explicit tuning and never defaults microbatch above batch', () => {
+    expect(resolveRuntimeBatchShape({ nBatch: 96, nUbatch: 24 }, 'compat')).toEqual({
+      nBatch: 96,
+      nUbatch: 24,
+    });
+    expect(resolveRuntimeBatchShape({ nBatch: 8, nUbatch: null }, 'compat')).toEqual({
+      nBatch: 8,
+      nUbatch: 8,
+    });
+  });
+});
 describe('selectWasmFlavor', () => {
   it('uses the browser-native flavor for auto', () => {
     expect(selectWasmFlavor('auto', false)).toBe('jspi');

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

@@ -1,29 +1,35 @@
-import { describe, expect, it } from 'vitest';
 import type { ChatCompletionChunk } from '../../vendor/wllama-bonsai/esm/index.js';
 import { BrowserEngineRuntime } from './runtime';
 interface CompletionOptions {
   onData(chunk: ChatCompletionChunk): void;
   logprobs?: boolean;
   top_logprobs?: number;
 }
 interface RuntimeInternals {
   wllama: {
     isModelLoaded(): boolean;
     createChatCompletion(options: CompletionOptions): Promise<void>;
   } | null;
   loaded: {
     manifest: unknown;
-    backend: 'wasm';
     model: {
       id: '1_7b';
       displayName: string;
       cpuFallback: true;
       runtimePolicy: {
         flashAttention: false;
-        tokenEmbeddingOnWebGPU: true;
-        requireSingleWebGPUGraph: false;
       };
     };
   } | null;
@@ -145,6 +151,204 @@ describe('BrowserEngineRuntime generation telemetry', () => {
     expect(completionOptions).not.toHaveProperty('top_logprobs');
   });
   it('reconciles incomplete streamed usage with llama.cpp timing counts', async () => {
     const runtime = new BrowserEngineRuntime();
     const internals = runtime as unknown as RuntimeInternals;

+import { describe, expect, it, vi } from 'vitest';
 import type { ChatCompletionChunk } from '../../vendor/wllama-bonsai/esm/index.js';
+import type { EngineEvent } from './protocol';
 import { BrowserEngineRuntime } from './runtime';
 interface CompletionOptions {
   onData(chunk: ChatCompletionChunk): void;
   logprobs?: boolean;
   top_logprobs?: number;
+  return_progress?: boolean;
+  timings_per_token?: boolean;
 }
+type GenerationProgressEvent = Extract<EngineEvent, { event: 'generation' }>;
 interface RuntimeInternals {
+  wllamaFlavor: 'compat' | 'jspi' | null;
   wllama: {
     isModelLoaded(): boolean;
     createChatCompletion(options: CompletionOptions): Promise<void>;
   } | null;
   loaded: {
     manifest: unknown;
+    backend: 'wasm' | 'webgpu';
     model: {
       id: '1_7b';
       displayName: string;
       cpuFallback: true;
       runtimePolicy: {
         flashAttention: false;
+        tokenEmbeddingOnWebGPU: boolean;
+        requireSingleWebGPUGraph: boolean;
       };
     };
   } | null;
     expect(completionOptions).not.toHaveProperty('top_logprobs');
   });
+  it('streams separate live rates without trusting unstable first-token timings', async () => {
+    const runtime = new BrowserEngineRuntime();
+    const internals = runtime as unknown as RuntimeInternals;
+    let completionOptions: CompletionOptions | null = null;
+    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 (options) => {
+        completionOptions = options;
+        const earlyPrefill = chunk('', {
+          timings: {
+            cache_n: 2,
+            prompt_n: 7,
+            prompt_ms: 0.001,
+            prompt_per_token_ms: 0.001 / 5,
+            prompt_per_second: 5_000_000,
+            predicted_n: 0,
+            predicted_ms: 0,
+            predicted_per_token_ms: 0,
+            predicted_per_second: 0,
+          },
+        }) as ChatCompletionChunk & {
+          prompt_progress: { total: number; cache: number; processed: number; time_ms: number };
+        };
+        const earlyPrefillChoice = earlyPrefill.choices[0];
+        if (!earlyPrefillChoice) throw new Error('Prefill fixture requires one choice.');
+        earlyPrefillChoice.finish_reason = null;
+        earlyPrefill.prompt_progress = { total: 12, cache: 2, processed: 7, time_ms: 1 };
+        options.onData(earlyPrefill);
+        const prefill = chunk('') as ChatCompletionChunk & {
+          prompt_progress: { total: number; cache: number; processed: number; time_ms: number };
+        };
+        const prefillChoice = prefill.choices[0];
+        if (!prefillChoice) throw new Error('Prefill fixture requires one choice.');
+        prefillChoice.finish_reason = null;
+        prefill.prompt_progress = { total: 12, cache: 2, processed: 7, time_ms: 100 };
+        options.onData(prefill);
+        options.onData(chunk('A', {
+          timings: {
+            cache_n: 2,
+            prompt_n: 12,
+            prompt_ms: 100,
+            prompt_per_token_ms: 10,
+            prompt_per_second: 100,
+            predicted_n: 1,
+            predicted_ms: 0.001,
+            predicted_per_token_ms: 0.001,
+            predicted_per_second: 1_000_000,
+          },
+        }));
+        options.onData(chunk('B', {
+          usage: { prompt_tokens: 12, completion_tokens: 3, total_tokens: 15 },
+          timings: {
+            cache_n: 2,
+            prompt_n: 12,
+            prompt_ms: 100,
+            prompt_per_token_ms: 10,
+            prompt_per_second: 100,
+            predicted_n: 3,
+            predicted_ms: 200,
+            predicted_per_token_ms: 200 / 3,
+            predicted_per_second: 15,
+          },
+        }));
+        options.onData(chunk(''));
+      },
+    };
+    const progress: GenerationProgressEvent[] = [];
+    const result = await runtime.generate(
+      'request-live-progress',
+      { messages: [{ role: 'user', content: 'Count.' }] },
+      new AbortController().signal,
+      (event) => {
+        if (event.event === 'generation') progress.push(event);
+      },
+    );
+    expect(completionOptions).toHaveProperty('return_progress', true);
+    expect(completionOptions).toHaveProperty('timings_per_token', true);
+    expect(progress.map(({ phase }) => phase)).toEqual([
+      'prefill',
+      'prefill',
+      'prefill',
+      'decode',
+      'decode',
+    ]);
+    expect(progress[1]).toMatchObject({
+      promptProcessed: 7,
+      promptTotal: 12,
+      promptCached: 2,
+      elapsedMs: 1,
+      promptTokensPerSecond: 0,
+      decodeTokensPerSecond: 0,
+    });
+    expect(progress[2]).toMatchObject({
+      promptProcessed: 7,
+      promptTotal: 12,
+      promptCached: 2,
+      elapsedMs: 100,
+      promptTokensPerSecond: 50,
+      decodeTokensPerSecond: 0,
+    });
+    expect(progress[3]).toMatchObject({
+      completionTokens: 1,
+      elapsedMs: 0.001,
+      decodeTokensPerSecond: 0,
+    });
+    expect(progress[4]).toMatchObject({ completionTokens: 3, elapsedMs: 200 });
+    expect(progress[4]?.decodeTokensPerSecond).toBeCloseTo(10, 3);
+    expect(result.text).toBe('AB');
+    expect(result.usage).toEqual({ promptTokens: 12, completionTokens: 3, totalTokens: 15 });
+  });
+  it('uses token arrival time for live decode telemetry in the compat runtime', async () => {
+    const runtime = new BrowserEngineRuntime();
+    const internals = runtime as unknown as RuntimeInternals;
+    let completionOptions: CompletionOptions | null = null;
+    internals.wllamaFlavor = 'compat';
+    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 (options) => {
+        completionOptions = options;
+        options.onData(chunk('A'));
+        options.onData(chunk('B', {
+          usage: { prompt_tokens: 8, completion_tokens: 2, total_tokens: 10 },
+          timings: {
+            cache_n: 0,
+            prompt_n: 8,
+            prompt_ms: 200,
+            prompt_per_token_ms: 25,
+            prompt_per_second: 40,
+            predicted_n: 2,
+            predicted_ms: 500,
+            predicted_per_token_ms: 250,
+            predicted_per_second: 4,
+          },
+        }));
+        options.onData(chunk(''));
+      },
+    };
+    const now = vi.spyOn(performance, 'now')
+      .mockReturnValueOnce(1_000)
+      .mockReturnValueOnce(1_250);
+    const progress: GenerationProgressEvent[] = [];
+    try {
+      const result = await runtime.generate(
+        'request-compat-progress',
+        { messages: [{ role: 'user', content: 'Count.' }] },
+        new AbortController().signal,
+        (event) => {
+          if (event.event === 'generation') progress.push(event);
+        },
+      );
+      expect(completionOptions).not.toHaveProperty('timings_per_token');
+      expect(completionOptions).not.toHaveProperty('return_progress');
+      expect(progress.map(({ phase }) => phase)).toEqual([
+        'prefill',
+        'decode',
+        'decode',
+      ]);
+      expect(progress[1]).toMatchObject({ completionTokens: 1, decodeTokensPerSecond: 0 });
+      expect(progress[2]).toMatchObject({ completionTokens: 2, decodeTokensPerSecond: 4 });
+      expect(result.timings).toEqual({ promptTokensPerSecond: 40, predictedTokensPerSecond: 4 });
+    } finally {
+      now.mockRestore();
+    }
+  });
   it('reconciles incomplete streamed usage with llama.cpp timing counts', async () => {
     const runtime = new BrowserEngineRuntime();
     const internals = runtime as unknown as RuntimeInternals;

src/engine/runtime-score-sequence.test.ts CHANGED Viewed

@@ -52,6 +52,7 @@ const backendReport: BackendReport = {
   cacheTypeK: 'f16',
   cacheTypeV: 'f16',
   webgpuKvBufferBytes: 128 * 1024 ** 2,
 };
 function configuredRuntime(createCompletion: (options: RawCompletionOptions) => Promise<unknown>) {

   cacheTypeK: 'f16',
   cacheTypeV: 'f16',
   webgpuKvBufferBytes: 128 * 1024 ** 2,
+  webgpuTrace: [],
 };
 function configuredRuntime(createCompletion: (options: RawCompletionOptions) => Promise<unknown>) {

src/engine/runtime.ts CHANGED Viewed

@@ -38,6 +38,7 @@ import type {
   EngineCapabilities,
   EngineEvent,
   EngineSampledTokenTraceEntry,
   GenerateParams,
   GenerateResult,
   LoadModelParams,
@@ -57,6 +58,9 @@ const WLLAMA_COMPAT_WORKER_PATH = '/wasm/wllama-compat.js';
 const MAX_GLUE_INT = 2_147_483_647;
 const DEVICE_LOST_EXIT_GRACE_MS = 100;
 const TOKEN_TRACE_TOP_LOGPROBS = 5;
 const STATE_DRIFT_REFERENCE_TOKENS = 1_024;
 const STATE_DRIFT_PROMPT_TOKENS = 38;
 const TEACHER_FORCE_LOGIT_BIAS = 1_000;
@@ -70,6 +74,23 @@ export interface ResolvedLoadTuning {
   wasmFlavor: BenchmarkWasmFlavor;
 }
 function validateBatchValue(value: unknown, label: 'n_batch' | 'n_ubatch'): number | null {
   if (value === undefined) return null;
   if (!Number.isSafeInteger(value) || (value as number) <= 0 || (value as number) > MAX_GLUE_INT) {
@@ -201,6 +222,33 @@ interface LoadedModelState {
 interface CachedShardState {
   blobs: Array<Blob | null>;
   cachedBytes: number;
 }
 function errorText(error: unknown): string {
@@ -277,13 +325,41 @@ function installWorkerDocumentShim(): void {
 function emitProgress(
   sink: EventSink,
   requestId: string,
-  values: Omit<Extract<EngineEvent, { event: 'progress' }>, 'type' | 'requestId' | 'event'>,
 ): void {
   sink({
     type: 'event',
     requestId,
     event: 'progress',
     ...values,
   });
 }
@@ -730,13 +806,32 @@ export class BrowserEngineRuntime {
   }
   private async inspectCachedShards(
     wllama: Wllama,
     model: ManifestModelV2,
     urls: readonly string[],
     signal: AbortSignal,
   ): Promise<CachedShardState> {
     const blobs: Array<Blob | null> = [];
     let cachedBytes = 0;
     for (let index = 0; index < urls.length; index += 1) {
       const url = urls[index];
       const file = model.files[index];
@@ -749,10 +844,23 @@ export class BrowserEngineRuntime {
         wllama.cacheManager.getMetadata(key),
       ]);
       if (blob?.size === file.bytes && metadata?.sha256 === file.sha256) {
-        const integrity = await verifyBlobSha256(blob, file.sha256, signal);
         if (integrity.matches) {
           blobs.push(blob);
           cachedBytes += file.bytes;
           continue;
         }
       }
@@ -760,8 +868,15 @@ export class BrowserEngineRuntime {
         await wllama.cacheManager.delete(url);
       }
       blobs.push(null);
     }
-    return { blobs, cachedBytes };
   }
   private async downloadShards(
@@ -779,15 +894,21 @@ export class BrowserEngineRuntime {
     else signal.addEventListener('abort', abortDownloads, { once: true });
     const downloadSignal = downloadController.signal;
     const loadedByShard = model.files.map((file, index) => cached.blobs[index] ? file.bytes : 0);
-    const emitDownloadProgress = (shardIndex: number): void => {
       const file = model.files[shardIndex] ?? null;
       emitProgress(sink, requestId, {
-        phase: 'download',
         loadedBytes: loadedByShard.reduce((sum, value) => sum + value, 0),
         totalBytes: model.downloadBytes,
         shardIndex,
         shardCount: model.files.length,
         shardPath: file?.path ?? null,
       });
     };
     emitDownloadProgress(0);
@@ -810,7 +931,13 @@ export class BrowserEngineRuntime {
         if (!file || !url) {
           throw new EngineRuntimeError('INVALID_SHARD_ORDER', 'Manifest shard URL and file counts differ.');
         }
         try {
           await wllama.cacheManager.download(url, {
             signal: downloadSignal,
             metadataAdditional: {
@@ -820,6 +947,7 @@ export class BrowserEngineRuntime {
             },
             progressCallback: ({ loaded }) => {
               loadedByShard[index] = Math.min(loaded, file.bytes);
               emitDownloadProgress(index);
             },
           });
@@ -831,7 +959,15 @@ export class BrowserEngineRuntime {
               `Downloaded shard ${file.path} has ${blob?.size ?? 0} bytes; expected ${file.bytes}.`,
             );
           }
-          const integrity = await verifyBlobSha256(blob, file.sha256, downloadSignal);
           if (!integrity.matches) {
             throw new EngineRuntimeError(
               'SHARD_HASH_MISMATCH',
@@ -847,6 +983,9 @@ export class BrowserEngineRuntime {
           });
           cached.blobs[index] = blob;
           loadedByShard[index] = file.bytes;
           emitDownloadProgress(index);
         } catch (error) {
           const failure = classifyShardFailure(error, downloadSignal);
@@ -855,6 +994,9 @@ export class BrowserEngineRuntime {
           if (isPrimaryFailure) firstFailureReserved = true;
           cached.blobs[index] = null;
           loadedByShard[index] = 0;
           let partialDeleted = false;
           let cleanupError: unknown;
           try {
@@ -863,7 +1005,7 @@ export class BrowserEngineRuntime {
           } catch (deleteError) {
             cleanupError = deleteError;
           }
-          emitDownloadProgress(index);
           const normalizedFailure = shardFailure(
             error,
             failure,
@@ -922,6 +1064,9 @@ export class BrowserEngineRuntime {
       shardIndex: null,
       shardCount: 0,
       shardPath: null,
     });
     const manifest = params.manifestUrl !== undefined
       ? await loadModelManifestV2(params.manifestUrl, signal)
@@ -934,6 +1079,9 @@ export class BrowserEngineRuntime {
       shardIndex: null,
       shardCount: 0,
       shardPath: null,
     });
     const model = findManifestModel(manifest, params.modelId);
     const contextSize = params.contextSize ?? model.defaultContext;
@@ -951,7 +1099,7 @@ export class BrowserEngineRuntime {
     }
     const urls = orderedShardUrls(manifest, model);
     const wllama = await this.ensureWllama(wasmFlavor);
-    const cached = await this.inspectCachedShards(wllama, model, urls, signal);
     const [adapter, storage] = await Promise.all([
       inspectWebGpuAdapter(),
       estimateStorage(),
@@ -971,25 +1119,45 @@ export class BrowserEngineRuntime {
     throwIfAborted(signal);
     emitProgress(sink, requestId, {
       phase: 'load',
-      loadedBytes: 0,
       totalBytes: model.downloadBytes,
       shardIndex: null,
       shardCount: model.files.length,
       shardPath: null,
     });
     const defaultThreads = Math.max(1, Math.floor((navigator.hardwareConcurrency || 1) / 2));
     const threads = params.threads ?? (gate.selectedBackend === 'wasm' ? defaultThreads : 1);
     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: tuning.nBatch ?? undefined,
-        n_ubatch: tuning.nUbatch ?? undefined,
         seed: 42,
         flash_attn: tuning.flashMode === 'auto',
         warmup: false,
@@ -1075,6 +1243,9 @@ export class BrowserEngineRuntime {
         shardIndex: null,
         shardCount: model.files.length,
         shardPath: null,
       });
       return {
         modelId: model.id,
@@ -1106,6 +1277,8 @@ export class BrowserEngineRuntime {
       this.wllamaFlavor = null;
       this.loaded = null;
       throw error;
     }
   }
@@ -1130,8 +1303,55 @@ export class BrowserEngineRuntime {
     let finishReason: GenerateResult['finishReason'] = null;
     let usage: GenerateResult['usage'] = null;
     let timings: GenerateResult['timings'] = null;
     const tokenTrace: EngineSampledTokenTraceEntry[] | null = params.returnTokenIds === true ? [] : null;
     const streamedToolCalls = new ToolCallAccumulator();
     try {
       await this.raceWebGpuDeviceLoss('generate', loaded.backend, loaded.model, wllama.createChatCompletion({
         messages: params.messages as ChatCompletionMessage[],
@@ -1149,13 +1369,74 @@ export class BrowserEngineRuntime {
           ? { logprobs: true, top_logprobs: TOKEN_TRACE_TOP_LOGPROBS }
           : {}),
         abortSignal: signal,
-        timings_per_token: true,
         onData: (chunk: ChatCompletionChunk) => {
-          if (tokenTrace !== null) appendSampledTokenTrace(tokenTrace, chunk);
-          streamedToolCalls.append(chunk.choices[0]?.delta.tool_calls);
           const delta = chunk.choices[0]?.delta.content;
           const textDelta = typeof delta === 'string' ? delta : '';
           const reasoningDelta = asReasoningDelta(chunk);
           if (textDelta || reasoningDelta) {
             text += textDelta;
             reasoningText += reasoningDelta ?? '';

   EngineCapabilities,
   EngineEvent,
   EngineSampledTokenTraceEntry,
+  EngineShardProgress,
   GenerateParams,
   GenerateResult,
   LoadModelParams,
 const MAX_GLUE_INT = 2_147_483_647;
 const DEVICE_LOST_EXIT_GRACE_MS = 100;
 const TOKEN_TRACE_TOP_LOGPROBS = 5;
+const MIN_LIVE_RATE_WINDOW_MS = 50;
+const COMPAT_STABLE_BATCH_SIZE = 32;
+const COMPAT_STABLE_MICRO_BATCH_SIZE = 16;
 const STATE_DRIFT_REFERENCE_TOKENS = 1_024;
 const STATE_DRIFT_PROMPT_TOKENS = 38;
 const TEACHER_FORCE_LOGIT_BIAS = 1_000;
   wasmFlavor: BenchmarkWasmFlavor;
 }
+export function resolveRuntimeBatchShape(
+  tuning: Pick<ResolvedLoadTuning, 'nBatch' | 'nUbatch'>,
+  wasmFlavor: 'jspi' | 'compat',
+): { nBatch: number | undefined; nUbatch: number | undefined } {
+  if (wasmFlavor !== 'compat') {
+    return {
+      nBatch: tuning.nBatch ?? undefined,
+      nUbatch: tuning.nUbatch ?? undefined,
+    };
+  }
+  const nBatch = tuning.nBatch ?? COMPAT_STABLE_BATCH_SIZE;
+  return {
+    nBatch,
+    nUbatch: tuning.nUbatch ?? Math.min(COMPAT_STABLE_MICRO_BATCH_SIZE, nBatch),
+  };
+}
 function validateBatchValue(value: unknown, label: 'n_batch' | 'n_ubatch'): number | null {
   if (value === undefined) return null;
   if (!Number.isSafeInteger(value) || (value as number) <= 0 || (value as number) > MAX_GLUE_INT) {
 interface CachedShardState {
   blobs: Array<Blob | null>;
   cachedBytes: number;
+  shards?: EngineShardProgress[];
+}
+function initialShardProgress(
+  model: ManifestModelV2,
+  blobs: readonly (Blob | null)[] = [],
+): EngineShardProgress[] {
+  return model.files.map((file, index) => ({
+    index,
+    path: file.path,
+    loadedBytes: blobs[index] ? file.bytes : 0,
+    verifiedBytes: blobs[index] ? file.bytes : 0,
+    totalBytes: file.bytes,
+    state: blobs[index] ? 'cached' : 'queued',
+  }));
+}
+function copyShardProgress(shards: readonly EngineShardProgress[]): EngineShardProgress[] {
+  return shards.map((shard) => ({ ...shard }));
+}
+function totalShardProgress(shards: readonly EngineShardProgress[]): number {
+  return shards.reduce((sum, shard) => sum + shard.loadedBytes, 0);
+}
+function totalVerifiedShardProgress(shards: readonly EngineShardProgress[]): number {
+  return shards.reduce((sum, shard) => sum + shard.verifiedBytes, 0);
 }
 function errorText(error: unknown): string {
 function emitProgress(
   sink: EventSink,
   requestId: string,
+  values: Omit<
+    Extract<EngineEvent, { event: 'progress' }>,
+    'type' | 'requestId' | 'event' | 'nativeStage'
+  > & { nativeStage?: string | null },
 ): void {
   sink({
     type: 'event',
     requestId,
     event: 'progress',
     ...values,
+    nativeStage: values.nativeStage ?? null,
+  });
+}
+interface PromptProgressSample {
+  total: number;
+  cache: number;
+  processed: number;
+  time_ms: number;
+}
+type LiveCompletionChunk = ChatCompletionChunk & {
+  prompt_progress?: PromptProgressSample;
+};
+function emitGenerationProgress(
+  sink: EventSink,
+  requestId: string,
+  values: Omit<Extract<EngineEvent, { event: 'generation' }>, 'type' | 'requestId' | 'event'>,
+): void {
+  sink({
+    type: 'event',
+    requestId,
+    event: 'generation',
+    ...values,
   });
 }
   }
   private async inspectCachedShards(
+    requestId: string,
     wllama: Wllama,
     model: ManifestModelV2,
     urls: readonly string[],
     signal: AbortSignal,
+    sink: EventSink,
   ): Promise<CachedShardState> {
     const blobs: Array<Blob | null> = [];
+    const shards = initialShardProgress(model);
     let cachedBytes = 0;
+    const emitCacheProgress = (shardIndex: number, phase: 'cache' | 'verify'): void => {
+      const shard = shards[shardIndex] ?? null;
+      emitProgress(sink, requestId, {
+        phase,
+        loadedBytes: totalShardProgress(shards),
+        totalBytes: model.downloadBytes,
+        shardIndex,
+        shardCount: model.files.length,
+        shardPath: shard?.path ?? null,
+        stageProgress: phase === 'verify'
+          ? totalVerifiedShardProgress(shards) / model.downloadBytes
+          : totalShardProgress(shards) / model.downloadBytes,
+        residentBytes: null,
+        shards: copyShardProgress(shards),
+      });
+    };
     for (let index = 0; index < urls.length; index += 1) {
       const url = urls[index];
       const file = model.files[index];
         wllama.cacheManager.getMetadata(key),
       ]);
       if (blob?.size === file.bytes && metadata?.sha256 === file.sha256) {
+        const shard = shards[index];
+        if (!shard) throw new EngineRuntimeError('INVALID_SHARD_ORDER', 'Manifest shard progress is incomplete.');
+        shard.state = 'verifying';
+        shard.loadedBytes = file.bytes;
+        shard.verifiedBytes = 0;
+        emitCacheProgress(index, 'verify');
+        const integrity = await verifyBlobSha256(blob, file.sha256, signal, (loadedBytes) => {
+          shard.verifiedBytes = Math.min(loadedBytes, shard.totalBytes);
+          emitCacheProgress(index, 'verify');
+        });
         if (integrity.matches) {
           blobs.push(blob);
           cachedBytes += file.bytes;
+          shard.loadedBytes = file.bytes;
+          shard.verifiedBytes = file.bytes;
+          shard.state = 'cached';
+          emitCacheProgress(index, 'cache');
           continue;
         }
       }
         await wllama.cacheManager.delete(url);
       }
       blobs.push(null);
+      const shard = shards[index];
+      if (shard) {
+        shard.loadedBytes = 0;
+        shard.verifiedBytes = 0;
+        shard.state = 'queued';
+        emitCacheProgress(index, 'cache');
+      }
     }
+    return { blobs, cachedBytes, shards };
   }
   private async downloadShards(
     else signal.addEventListener('abort', abortDownloads, { once: true });
     const downloadSignal = downloadController.signal;
     const loadedByShard = model.files.map((file, index) => cached.blobs[index] ? file.bytes : 0);
+    const shards = cached.shards ?? initialShardProgress(model, cached.blobs);
+    const emitDownloadProgress = (shardIndex: number, phase: 'download' | 'verify' = 'download'): void => {
       const file = model.files[shardIndex] ?? null;
       emitProgress(sink, requestId, {
+        phase,
         loadedBytes: loadedByShard.reduce((sum, value) => sum + value, 0),
         totalBytes: model.downloadBytes,
         shardIndex,
         shardCount: model.files.length,
         shardPath: file?.path ?? null,
+        stageProgress: phase === 'verify'
+          ? totalVerifiedShardProgress(shards) / model.downloadBytes
+          : totalShardProgress(shards) / model.downloadBytes,
+        residentBytes: null,
+        shards: copyShardProgress(shards),
       });
     };
     emitDownloadProgress(0);
         if (!file || !url) {
           throw new EngineRuntimeError('INVALID_SHARD_ORDER', 'Manifest shard URL and file counts differ.');
         }
+        const shard = shards[index];
+        if (!shard) throw new EngineRuntimeError('INVALID_SHARD_ORDER', 'Manifest shard progress is incomplete.');
         try {
+          shard.state = 'downloading';
+          shard.loadedBytes = 0;
+          shard.verifiedBytes = 0;
+          emitDownloadProgress(index);
           await wllama.cacheManager.download(url, {
             signal: downloadSignal,
             metadataAdditional: {
             },
             progressCallback: ({ loaded }) => {
               loadedByShard[index] = Math.min(loaded, file.bytes);
+              shard.loadedBytes = loadedByShard[index] ?? 0;
               emitDownloadProgress(index);
             },
           });
               `Downloaded shard ${file.path} has ${blob?.size ?? 0} bytes; expected ${file.bytes}.`,
             );
           }
+          shard.state = 'verifying';
+          shard.loadedBytes = file.bytes;
+          shard.verifiedBytes = 0;
+          loadedByShard[index] = file.bytes;
+          emitDownloadProgress(index, 'verify');
+          const integrity = await verifyBlobSha256(blob, file.sha256, downloadSignal, (loadedBytes) => {
+            shard.verifiedBytes = Math.min(loadedBytes, file.bytes);
+            emitDownloadProgress(index, 'verify');
+          });
           if (!integrity.matches) {
             throw new EngineRuntimeError(
               'SHARD_HASH_MISMATCH',
           });
           cached.blobs[index] = blob;
           loadedByShard[index] = file.bytes;
+          shard.loadedBytes = file.bytes;
+          shard.verifiedBytes = file.bytes;
+          shard.state = 'complete';
           emitDownloadProgress(index);
         } catch (error) {
           const failure = classifyShardFailure(error, downloadSignal);
           if (isPrimaryFailure) firstFailureReserved = true;
           cached.blobs[index] = null;
           loadedByShard[index] = 0;
+          shard.loadedBytes = 0;
+          shard.verifiedBytes = 0;
+          shard.state = 'error';
           let partialDeleted = false;
           let cleanupError: unknown;
           try {
           } catch (deleteError) {
             cleanupError = deleteError;
           }
+          emitDownloadProgress(index, failure === 'verification' ? 'verify' : 'download');
           const normalizedFailure = shardFailure(
             error,
             failure,
       shardIndex: null,
       shardCount: 0,
       shardPath: null,
+      stageProgress: 0,
+      residentBytes: null,
+      shards: [],
     });
     const manifest = params.manifestUrl !== undefined
       ? await loadModelManifestV2(params.manifestUrl, signal)
       shardIndex: null,
       shardCount: 0,
       shardPath: null,
+      stageProgress: 1,
+      residentBytes: null,
+      shards: [],
     });
     const model = findManifestModel(manifest, params.modelId);
     const contextSize = params.contextSize ?? model.defaultContext;
     }
     const urls = orderedShardUrls(manifest, model);
     const wllama = await this.ensureWllama(wasmFlavor);
+    const cached = await this.inspectCachedShards(requestId, wllama, model, urls, signal, sink);
     const [adapter, storage] = await Promise.all([
       inspectWebGpuAdapter(),
       estimateStorage(),
     throwIfAborted(signal);
     emitProgress(sink, requestId, {
       phase: 'load',
+      loadedBytes: model.downloadBytes,
       totalBytes: model.downloadBytes,
       shardIndex: null,
       shardCount: model.files.length,
       shardPath: null,
+      stageProgress: 0,
+      residentBytes: null,
+      shards: copyShardProgress(cached.shards ?? initialShardProgress(model, blobs)),
     });
     const defaultThreads = Math.max(1, Math.floor((navigator.hardwareConcurrency || 1) / 2));
     const threads = params.threads ?? (gate.selectedBackend === 'wasm' ? defaultThreads : 1);
     if (!Number.isSafeInteger(threads) || threads <= 0) {
       throw new EngineRuntimeError('INVALID_THREAD_COUNT', 'Thread count must be a positive integer.');
     }
+    const loadShards = copyShardProgress(cached.shards ?? initialShardProgress(model, blobs));
+    const runtimeBatch = resolveRuntimeBatchShape(tuning, wasmFlavor);
+    const stopLoadProgress = this.nativeLog.onModelLoadProgress((progress) => {
+      const liveReport = this.nativeLog.report();
+      emitProgress(sink, requestId, {
+        phase: 'load',
+        loadedBytes: model.downloadBytes,
+        totalBytes: model.downloadBytes,
+        shardIndex: null,
+        shardCount: model.files.length,
+        shardPath: null,
+        stageProgress: progress.value,
+        nativeStage: progress.current,
+        residentBytes: liveReport.allocatedBufferBytes ?? null,
+        shards: copyShardProgress(loadShards),
+      });
+    });
     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: runtimeBatch.nBatch,
+        n_ubatch: runtimeBatch.nUbatch,
         seed: 42,
         flash_attn: tuning.flashMode === 'auto',
         warmup: false,
         shardIndex: null,
         shardCount: model.files.length,
         shardPath: null,
+        stageProgress: 1,
+        residentBytes: report.allocatedBufferBytes ?? null,
+        shards: copyShardProgress(loadShards),
       });
       return {
         modelId: model.id,
       this.wllamaFlavor = null;
       this.loaded = null;
       throw error;
+    } finally {
+      stopLoadProgress();
     }
   }
     let finishReason: GenerateResult['finishReason'] = null;
     let usage: GenerateResult['usage'] = null;
     let timings: GenerateResult['timings'] = null;
+    let livePromptTokensPerSecond = 0;
+    let liveDecodeTokensPerSecond = 0;
+    let livePromptProcessed = 0;
+    let livePromptTotal = 0;
+    let livePromptCached = 0;
+    let fallbackCompletionTokens = 0;
+    let fallbackDecodeStartedAt: number | null = null;
+    const decodeRateSamples: Array<{ tokens: number; elapsedMs: number }> = [];
+    const usePerTokenTimings = this.wllamaFlavor !== 'compat';
+    const sampleDecodeRate = (tokens: number, elapsedMs: number): void => {
+      const lastSample = decodeRateSamples.at(-1);
+      if (
+        tokens <= 0
+        || !Number.isFinite(elapsedMs)
+        || (lastSample && (tokens <= lastSample.tokens || elapsedMs < lastSample.elapsedMs))
+      ) {
+        return;
+      }
+      decodeRateSamples.push({ tokens, elapsedMs });
+      while (decodeRateSamples.length > 2) {
+        const first = decodeRateSamples[0];
+        if (!first) break;
+        const tokenSpan = tokens - first.tokens;
+        const timeSpan = elapsedMs - first.elapsedMs;
+        if (tokenSpan <= 12 && timeSpan <= 2_000) break;
+        decodeRateSamples.shift();
+      }
+      const first = decodeRateSamples[0];
+      if (!first) return;
+      const tokenSpan = tokens - first.tokens;
+      const timeSpan = elapsedMs - first.elapsedMs;
+      if (tokenSpan <= 0 || timeSpan <= 0) return;
+      const rate = tokenSpan * 1_000 / timeSpan;
+      if (Number.isFinite(rate) && rate >= 0) {
+        liveDecodeTokensPerSecond = rate;
+      }
+    };
     const tokenTrace: EngineSampledTokenTraceEntry[] | null = params.returnTokenIds === true ? [] : null;
     const streamedToolCalls = new ToolCallAccumulator();
+    emitGenerationProgress(sink, requestId, {
+      phase: 'prefill',
+      promptProcessed: 0,
+      promptTotal: 0,
+      promptCached: 0,
+      completionTokens: 0,
+      elapsedMs: 0,
+      promptTokensPerSecond: 0,
+      decodeTokensPerSecond: 0,
+    });
     try {
       await this.raceWebGpuDeviceLoss('generate', loaded.backend, loaded.model, wllama.createChatCompletion({
         messages: params.messages as ChatCompletionMessage[],
           ? { logprobs: true, top_logprobs: TOKEN_TRACE_TOP_LOGPROBS }
           : {}),
         abortSignal: signal,
+        ...(usePerTokenTimings ? { timings_per_token: true, return_progress: true } : {}),
         onData: (chunk: ChatCompletionChunk) => {
+          const liveChunk = chunk as LiveCompletionChunk;
           const delta = chunk.choices[0]?.delta.content;
           const textDelta = typeof delta === 'string' ? delta : '';
           const reasoningDelta = asReasoningDelta(chunk);
+          const progress = liveChunk.prompt_progress;
+          if (progress) {
+            const processed = Math.max(0, progress.processed);
+            const cached = Math.max(0, Math.min(processed, progress.cache));
+            const elapsedMs = Math.max(0, progress.time_ms);
+            const processedNow = Math.max(0, processed - cached);
+            livePromptProcessed = processed;
+            livePromptTotal = Math.max(processed, progress.total);
+            livePromptCached = cached;
+            const promptRate = elapsedMs >= MIN_LIVE_RATE_WINDOW_MS
+              ? processedNow * 1000 / elapsedMs
+              : 0;
+            if (Number.isFinite(promptRate) && promptRate >= 0) {
+              livePromptTokensPerSecond = promptRate;
+            }
+            emitGenerationProgress(sink, requestId, {
+              phase: 'prefill',
+              promptProcessed: processed,
+              promptTotal: livePromptTotal,
+              promptCached: cached,
+              completionTokens: 0,
+              elapsedMs,
+              promptTokensPerSecond: livePromptTokensPerSecond,
+              decodeTokensPerSecond: 0,
+            });
+          } else if (usePerTokenTimings && chunk.timings) {
+            const predictedTokens = Math.max(0, chunk.timings.predicted_n);
+            const predictedMs = Math.max(0, chunk.timings.predicted_ms);
+            sampleDecodeRate(predictedTokens, predictedMs);
+            const finalPromptRate = Math.max(0, chunk.timings.prompt_per_second);
+            if (Number.isFinite(finalPromptRate)) {
+              livePromptTokensPerSecond = finalPromptRate;
+            }
+            emitGenerationProgress(sink, requestId, {
+              phase: 'decode',
+              promptProcessed: Math.max(0, chunk.timings.prompt_n),
+              promptTotal: Math.max(0, chunk.timings.prompt_n),
+              promptCached: Math.max(0, chunk.timings.cache_n),
+              completionTokens: predictedTokens,
+              elapsedMs: predictedMs,
+              promptTokensPerSecond: livePromptTokensPerSecond,
+              decodeTokensPerSecond: liveDecodeTokensPerSecond,
+            });
+          } else if (!usePerTokenTimings && (textDelta || reasoningDelta)) {
+            fallbackCompletionTokens += 1;
+            const now = performance.now();
+            fallbackDecodeStartedAt ??= now;
+            const elapsedMs = now - fallbackDecodeStartedAt;
+            sampleDecodeRate(fallbackCompletionTokens, elapsedMs);
+            emitGenerationProgress(sink, requestId, {
+              phase: 'decode',
+              promptProcessed: livePromptProcessed,
+              promptTotal: livePromptTotal,
+              promptCached: livePromptCached,
+              completionTokens: fallbackCompletionTokens,
+              elapsedMs,
+              promptTokensPerSecond: livePromptTokensPerSecond,
+              decodeTokensPerSecond: liveDecodeTokensPerSecond,
+            });
+          }
+          if (tokenTrace !== null) appendSampledTokenTrace(tokenTrace, chunk);
+          streamedToolCalls.append(chunk.choices[0]?.delta.tool_calls);
           if (textDelta || reasoningDelta) {
             text += textDelta;
             reasoningText += reasoningDelta ?? '';

src/lib/contracts.ts CHANGED Viewed

@@ -19,7 +19,6 @@ export interface ModelOption {
   capability: string;
   contextLimit: number;
   defaultContext: number;
-  dflash: 'unsupported' | 'conditional';
   limitReason?: string;
 }
@@ -34,6 +33,7 @@ export interface ToolRun {
 export interface MessageMetrics {
   tokens: number;
   tokensPerSecond: number;
   timeToFirstTokenMs: number;
 }
@@ -59,6 +59,12 @@ export interface TelemetrySnapshot {
   contextUsed: number;
   contextLimit: number;
   tokensPerSecond: number;
   timeToFirstTokenMs: number;
   gpuLayers: string;
   graphSplits: number | null;
@@ -95,12 +101,25 @@ export interface StorageStatus {
   downloads: DownloadItem[];
 }
-export interface DFlashState {
-  enabled: boolean;
-  available: boolean;
-  status: 'source-audited' | 'conditional' | 'unsupported';
-  acceptanceRate?: number;
-  reason: string;
 }
 export interface RuntimeSettings {
@@ -122,10 +141,10 @@ export interface BonsaiShellProps {
   loadedModelId: ModelId | null;
   messages: ChatMessage[];
   streamState: StreamState;
   telemetry: TelemetrySnapshot;
   toolEvents: ToolEvent[];
   storage: StorageStatus;
-  dflash: DFlashState;
   artifact: ArtifactDocument | null;
   toolsEnabled: boolean;
   settings: RuntimeSettings;
@@ -139,7 +158,6 @@ export interface BonsaiShellProps {
   onRegenerate: () => void;
   onCancel: () => void;
   onToolsEnabledChange: (enabled: boolean) => void;
-  onDFlashChange: (enabled: boolean) => void;
   onOpenSettings: () => void;
   onCloseSettings: () => void;
   onSettingsChange: (settings: RuntimeSettings) => void;
@@ -149,5 +167,4 @@ export interface BonsaiShellProps {
   onDismissError: () => void;
   onRetryShard: (modelId: ModelId) => void;
   onCloseArtifact: () => void;
-  onRequestDownload: (modelId: ModelId) => void;
 }

   capability: string;
   contextLimit: number;
   defaultContext: number;
   limitReason?: string;
 }
 export interface MessageMetrics {
   tokens: number;
   tokensPerSecond: number;
+  promptTokensPerSecond?: number;
   timeToFirstTokenMs: number;
 }
   contextUsed: number;
   contextLimit: number;
   tokensPerSecond: number;
+  prefillTokensPerSecond: number;
+  decodeTokensPerSecond: number;
+  inferencePhase: 'idle' | 'prefill' | 'decode' | 'complete';
+  promptProcessed: number;
+  promptTotal: number;
+  completionTokens: number;
   timeToFirstTokenMs: number;
   gpuLayers: string;
   graphSplits: number | null;
   downloads: DownloadItem[];
 }
+export interface ModelShardProgress {
+  index: number;
+  path: string;
+  loadedBytes: number;
+  verifiedBytes: number;
+  totalBytes: number;
+  state: 'queued' | 'cached' | 'downloading' | 'verifying' | 'complete' | 'error';
+}
+export interface ModelLoadProgress {
+  modelId: ModelId | null;
+  modelLabel: string;
+  stage: 'idle' | 'manifest' | 'cache' | 'download' | 'verify' | 'load' | 'ready' | 'error';
+  stageProgress: number;
+  downloadedBytes: number;
+  totalBytes: number;
+  residentBytes: number;
+  nativeStage: string | null;
+  shards: ModelShardProgress[];
 }
 export interface RuntimeSettings {
   loadedModelId: ModelId | null;
   messages: ChatMessage[];
   streamState: StreamState;
+  modelLoadProgress: ModelLoadProgress;
   telemetry: TelemetrySnapshot;
   toolEvents: ToolEvent[];
   storage: StorageStatus;
   artifact: ArtifactDocument | null;
   toolsEnabled: boolean;
   settings: RuntimeSettings;
   onRegenerate: () => void;
   onCancel: () => void;
   onToolsEnabledChange: (enabled: boolean) => void;
   onOpenSettings: () => void;
   onCloseSettings: () => void;
   onSettingsChange: (settings: RuntimeSettings) => void;
   onDismissError: () => void;
   onRetryShard: (modelId: ModelId) => void;
   onCloseArtifact: () => void;
 }

src/vite-env.d.ts CHANGED Viewed

	@@ -1 +1,7 @@
1	/// <reference types="vite/client" />

 /// <reference types="vite/client" />
+import type { BackendReport } from './engine/native-log';
+declare global {
+  var __bonsaiBackendReport: BackendReport | undefined;
+}

vendor/wllama-bonsai/PATCH.diff CHANGED Viewed

@@ -23,7 +23,7 @@ index f1496a4..8883324 100644
    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..d261dfe 100644
 --- a/cpp/wllama-context.h
 +++ b/cpp/wllama-context.h
@@ -19,6 +19,7 @@
@@ -34,7 +34,15 @@ index 0dafe6d..d261dfe 100644
  #include "ggml-cpu.h"
  #include "ggml-backend.h"
-@@ -300,16 +301,28 @@ struct wllama_context
        server_task task = server_task(SERVER_TASK_TYPE_COMPLETION);
        task.id = rd->get_new_id();
        task.index = 0;
@@ -67,7 +75,7 @@ index 0dafe6d..d261dfe 100644
        rd->post_task({std::move(task)});
      }
-@@ -415,6 +428,8 @@ struct wllama_context
        params.embedding = req.embeddings.value;
      if (req.n_batch.not_null())
        params.n_batch = req.n_batch.value;
@@ -76,10 +84,16 @@ index 0dafe6d..d261dfe 100644
      if (req.n_parallel.not_null())
        params.n_parallel = req.n_parallel.value;
      if (req.pooling_type.not_null())
-@@ -568,6 +583,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");
@@ -126,10 +140,18 @@ index 08f0d87..c1001da 100644
    n_threads: number;
    model_alias?: string | undefined;
 diff --git a/src/types/oai-compat.ts b/src/types/oai-compat.ts
-index dbeeaa2..fd41519 100644
 --- a/src/types/oai-compat.ts
 +++ b/src/types/oai-compat.ts
-@@ -135,6 +135,7 @@ export type ChatCompletionParams = {
  // Response types----------
  export interface ChatCompletionLogprob {
@@ -137,6 +159,28 @@ index dbeeaa2..fd41519 100644
    token: string;
    logprob: number;
    bytes: number[] | null;
 diff --git a/src/types/types.ts b/src/types/types.ts
 index 2b3cca7..e91b395 100644
 --- a/src/types/types.ts
@@ -285,3 +329,26 @@ index be62030..9f5144a 100644
        // length of output buffer is written at the first 4 bytes of input buffer
        const outputLen = new Uint32Array(
          getHeapU8().buffer,

    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..4782268 100644
 --- a/cpp/wllama-context.h
 +++ b/cpp/wllama-context.h
@@ -19,6 +19,7 @@
  #include "ggml-cpu.h"
  #include "ggml-backend.h"
+@@ -263,7 +264,6 @@ struct wllama_context
+   // using unique_ptr to allow late initialization
+   std::unique_ptr<server_response_reader> rd;
+   std::unique_ptr<const server_context_meta> meta;
+-
+   struct console
+   {
+     struct spinner
+@@ -300,16 +300,28 @@ struct wllama_context
        server_task task = server_task(SERVER_TASK_TYPE_COMPLETION);
        task.id = rd->get_new_id();
        task.index = 0;
        rd->post_task({std::move(task)});
      }
+@@ -415,6 +427,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_parallel.not_null())
        params.n_parallel = req.n_parallel.value;
      if (req.pooling_type.not_null())
+@@ -568,6 +582,30 @@ struct wllama_context
      // load model
      llama_backend_init();
      llama_numa_init(params.numa);
++    ctx_server.set_state_callback([](server_state state, json payload)
++    {
++      payload["state"] = server_state_to_str(state);
++      const std::string serialized = payload.dump();
++      fprintf(stderr, "@@MODEL_LOAD_PROGRESS@@%s\n", serialized.c_str());
++    });
 +    if (req.offload_token_embedding.not_null() && req.offload_token_embedding.value)
 +    {
 +      auto *webgpu_dev = ggml_backend_dev_by_name("WebGPU");
    n_threads: number;
    model_alias?: string | undefined;
 diff --git a/src/types/oai-compat.ts b/src/types/oai-compat.ts
+index dbeeaa2..e2f960e 100644
 --- a/src/types/oai-compat.ts
 +++ b/src/types/oai-compat.ts
+@@ -128,6 +128,7 @@ export type ChatCompletionParams = {
+   // llama-server-specific
+   chat_template_kwargs?: Record<string, any>;
+   cache_prompt?: boolean;
++  return_progress?: boolean;
+   return_tokens?: boolean;
+   timings_per_token?: boolean;
+ } & SamplingParams;
+@@ -135,6 +136,7 @@ export type ChatCompletionParams = {
  // Response types----------
  export interface ChatCompletionLogprob {
    token: string;
    logprob: number;
    bytes: number[] | null;
+@@ -214,6 +216,13 @@ export interface ResultTimings {
+   predicted_per_second: number;
+ }
++export interface PromptProgress {
++  total: number;
++  cache: number;
++  processed: number;
++  time_ms: number;
++}
++
+ /** Response when stream=true — one chunk per SSE event */
+ export interface ChatCompletionChunk {
+   id: string;
+@@ -223,6 +232,7 @@ export interface ChatCompletionChunk {
+   choices: ChatCompletionChunkChoice[];
+   usage?: ChatCompletionUsage | null;
+   timings?: ResultTimings;
++  prompt_progress?: PromptProgress;
+ }
+ // Raw (text) completion
 diff --git a/src/types/types.ts b/src/types/types.ts
 index 2b3cca7..e91b395 100644
 --- a/src/types/types.ts
        // length of output buffer is written at the first 4 bytes of input buffer
        const outputLen = new Uint32Array(
          getHeapU8().buffer,
+diff --git a/llama.cpp/ggml/src/ggml-webgpu/ggml-webgpu-shader-lib.hpp b/llama.cpp/ggml/src/ggml-webgpu/ggml-webgpu-shader-lib.hpp
+index d769236..131b82c 100644
+--- a/llama.cpp/ggml/src/ggml-webgpu/ggml-webgpu-shader-lib.hpp
++++ b/llama.cpp/ggml/src/ggml-webgpu/ggml-webgpu-shader-lib.hpp
+@@ -50,6 +50,7 @@
+ // Matrix-vector multiplication parameters
+ #define WEBGPU_MUL_MAT_VEC_WG_SIZE 256
++#define WEBGPU_MUL_MAT_VEC_Q1_NO_SG_WG_SIZE 128
+ #define WEBGPU_MUL_MAT_VEC_FLOAT_OUTPUTS_PER_WG    4
+ #define WEBGPU_MUL_MAT_VEC_LEGACY_Q_OUTPUTS_PER_WG 4
+@@ -1995,6 +1996,10 @@ class ggml_webgpu_shader_lib {
+         if (key.src0_type == GGML_TYPE_Q1_0) {
+             outputs_per_wg = WEBGPU_MUL_MAT_VEC_LEGACY_Q_OUTPUTS_PER_WG;
++            if (!context.supports_subgroups) {
++                wg_size = WEBGPU_MUL_MAT_VEC_Q1_NO_SG_WG_SIZE;
++                variant += "_wg128";
++            }
+         } else if (key.src0_type >= GGML_TYPE_Q2_K) {
+             outputs_per_wg = WEBGPU_MUL_MAT_VEC_K_Q_OUTPUTS_PER_WG;
+         } else if (key.src0_type >= GGML_TYPE_Q4_0) {

vendor/wllama-bonsai/SOURCE.json CHANGED Viewed

@@ -4,16 +4,17 @@
   "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; add an opt-in forceCompat selector for controlled benchmark A/B runs; type sampled token ids in OAI logprob payloads; accept one raw token-id completion prompt and fail loudly on null action responses.",
   "patchSet": {
     "format": "git-diff-binary",
     "path": "vendor/wllama-bonsai/PATCH.diff",
-    "bytes": 11052,
-    "sha256": "27b96fa48c6fd66b44fe70e83cc775902e29ec5877261c7eb04fecabc529d2f9",
     "files": [
       "CMakeLists.txt",
       "cpp/glue.hpp",
       "cpp/wllama-context.h",
       "src/glue/messages.ts",
       "src/types/oai-compat.ts",
       "src/types/types.ts",
@@ -30,18 +31,18 @@
   "files": [
     {
       "path": "vendor/wllama-bonsai/esm/index.js",
-      "bytes": 365536,
-      "sha256": "10c3811776e34092a225632929b97046af4215a4c91156169105c886be5cba5d"
     },
     {
       "path": "public/wasm/wllama.wasm",
-      "bytes": 8017784,
-      "sha256": "b292bf670a25e1ecf02c71dd92b49196f3336842135f1f85efd5a3fd5f36ea8a"
     },
     {
       "path": "public/wasm/wllama-compat.wasm",
-      "bytes": 14865338,
-      "sha256": "ea0623d2ca1758287a569169b4ad5a69c22e41bce3e5d022c7d3e4fb5c37918c"
     },
     {
       "path": "public/wasm/wllama-compat.js",

   "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; add an opt-in forceCompat selector for controlled benchmark A/B runs; expose native model-load and prompt-prefill progress; type sampled token ids in OAI logprob payloads; accept one raw token-id completion prompt; fail loudly on null action responses; and cap non-subgroup Q1_0 matrix-vector workgroups at the validated 128 threads.",
   "patchSet": {
     "format": "git-diff-binary",
     "path": "vendor/wllama-bonsai/PATCH.diff",
+    "bytes": 13467,
+    "sha256": "e94aef3f672211e72bab039385b3bcbeda46f0e3218db7a86a9b5468186ab491",
     "files": [
       "CMakeLists.txt",
       "cpp/glue.hpp",
       "cpp/wllama-context.h",
+      "llama.cpp/ggml/src/ggml-webgpu/ggml-webgpu-shader-lib.hpp",
       "src/glue/messages.ts",
       "src/types/oai-compat.ts",
       "src/types/types.ts",
   "files": [
     {
       "path": "vendor/wllama-bonsai/esm/index.js",
+      "bytes": 365544,
+      "sha256": "b7e883ebeed6aad1b4587d89c20cc4ee8e69e7a0e94e1d307dcad756d657a41a"
     },
     {
       "path": "public/wasm/wllama.wasm",
+      "bytes": 8020809,
+      "sha256": "5a8686c10f7639653e7e1854d34f39c31ddba404de876a5ae15d36c42263ddc4"
     },
     {
       "path": "public/wasm/wllama-compat.wasm",
+      "bytes": 14871898,
+      "sha256": "c823684229149dd2386308978288e366f2ff209b231b78485507db8cb735bbdd"
     },
     {
       "path": "public/wasm/wllama-compat.js",

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

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

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

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

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