Spaces:

WaveCut
/

Bonsai-Chat-WebGPU

Running

App Files Files Community

Valeriy Selitskiy commited on 1 day ago

Commit

6c62075

1 Parent(s): c3633b1

Release v1.2.1 adaptive chat workspace

Browse files

Files changed (25) hide show

README.md +13 -1
dist/assets/index-BY7HNxCd.js +0 -0
dist/assets/index-BbReSmeP.css +1 -0
dist/assets/index-DnMbdiUB.css +0 -1
dist/assets/index-DsVgIwSl.js +0 -0
dist/index.html +2 -2
src/app/App.tsx +122 -13
src/app/components/ArtifactPane.tsx +1 -5
src/app/components/BonsaiShell.tsx +60 -7
src/app/components/ChatSurface.tsx +26 -22
src/app/components/ComposerActivity.test.tsx +64 -0
src/app/components/ComposerActivity.tsx +97 -171
src/app/components/ConversationList.tsx +72 -0
src/app/components/Header.test.ts +11 -0
src/app/components/Header.tsx +72 -14
src/app/components/InspectorPanel.tsx +64 -25
src/app/components/ModelRail.tsx +7 -7
src/app/components/SettingsSheet.tsx +15 -7
src/app/styles.css +758 -543
src/app/theme.test.ts +16 -0
src/app/theme.ts +12 -0
src/lib/contracts.ts +17 -0
src/lib/conversations.test.ts +33 -0
src/lib/conversations.ts +22 -0
src/lib/idb.ts +9 -0

README.md CHANGED Viewed

@@ -40,9 +40,21 @@ Vite during its container build. The checked-in bundle is produced locally by
 `npm ci && npm run build`; source, tests, lockfile, and exact runtime assets
 remain in the same Space repository.
 ## Browser requirements
-Chrome or Edge with WebGPU is recommended. CPU-WASM fallback requires a
 cross-origin-isolated browser with `SharedArrayBuffer`; the Nginx configuration
 enables it. Model storage uses the browser cache/OPFS path exposed by wllama and
 requests persistent storage before the first model byte is downloaded. A browser

 `npm ci && npm run build`; source, tests, lockfile, and exact runtime assets
 remain in the same Space repository.
+## Chat workspace
+Chat sessions and their system instructions are saved locally in IndexedDB.
+The chat list can reopen, continue, or delete a session without touching the
+model cache. New chats begin with the bundled private-assistant instructions;
+an empty chat exposes them directly, while an active chat keeps them in Chat
+settings. Appearance can follow the operating system or be pinned to the light
+or dark theme. Both sidebars can collapse, and the transcript can switch
+between centered and full-width layouts.
 ## Browser requirements
+Chrome or Edge with WebGPU is recommended. Safari uses the stable compatibility
+runtime but is substantially slower, so the UI calls this limitation out before
+the model is loaded. CPU-WASM fallback requires a
 cross-origin-isolated browser with `SharedArrayBuffer`; the Nginx configuration
 enables it. Model storage uses the browser cache/OPFS path exposed by wllama and
 requests persistent storage before the first model byte is downloaded. A browser

dist/assets/index-BY7HNxCd.js DELETED Viewed

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

dist/assets/index-BbReSmeP.css ADDED Viewed

	@@ -0,0 +1 @@

+ :root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#141613;--ink-raised:#1b1e1a;--ink-soft:#252921;--paper:#f1f2ed;--paper-deep:#e4e6df;--paper-ghost:#f1f2eda3;--phosphor:#a8d574;--phosphor-dim:#a8d57424;--moss:#738066;--rust:#c27a56;--line-light:#f1f2ed21;--line-dark:#14161326;--display:"Avenir Next", "Helvetica Neue", ui-sans-serif, sans-serif;--body:"Avenir Next", "Helvetica Neue", ui-sans-serif, sans-serif;--mono:"Berkeley Mono", Iosevka, "SFMono-Regular", Consolas, monospace;--type-utility:clamp(.75rem, .12vw + .72rem, .8125rem);--type-caption:clamp(.8125rem, .15vw + .77rem, .9375rem);--type-body:clamp(1.0625rem, .18vw + 1.02rem, 1.1875rem);--type-heading:clamp(1.55rem, .85vw + 1.35rem, 2.15rem);font-family:var(--body);font-synthesis:none;text-rendering:optimizelegibility}*{box-sizing:border-box}html{background:var(--ink)}body{background:var(--ink);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{--canvas-bg:#f1f2ed;--canvas-raised:#e4e6df;--canvas-field:#f8f9f5;--canvas-text:#141613;--canvas-muted:#14161385;--canvas-line:#14161326;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;isolation:isolate;min-height:100dvh;animation:.58s cubic-bezier(.16,1,.3,1) both station-in}.station-frame[data-theme=dark]{--canvas-bg:#1a1c18;--canvas-raised:#20231f;--canvas-field:#252823;--canvas-text:#edf0e8;--canvas-muted:#edf0e894;--canvas-line:#edf0e821;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.station-frame:before{display:none}.station-header{background:var(--ink);border-bottom:1px solid var(--line-light);z-index:10;grid-template-columns:260px minmax(320px,1fr) auto;align-items:stretch;min-height:64px;display:grid;position:relative}.brand-block{border-right:1px solid var(--line-light);align-items:center;gap:10px;padding:10px 18px;display:flex}.brand-block h1{font:650 20px/1.1 var(--display);letter-spacing:-.02em;margin:0}.brand-block>div{gap:2px;display:grid}.brand-block>div>span{color:var(--paper-ghost);font-size:var(--type-caption)}.brand-glyph{width:34px;height:34px;color:var(--phosphor);font:650 16px/1 var(--mono);border:1px solid #a8d5746b;border-radius:8px;flex:0 0 34px;place-items:center;display:grid}.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}.browser-notice{align-items:center;gap:10px;min-width:0;padding:0 20px;display:flex}.notice-mark{background:var(--phosphor);border-radius:2px;flex:0 0 6px;width:6px;height:6px}.browser-notice>span:last-child{gap:2px;display:grid}.browser-notice strong{color:var(--paper);font:600 var(--type-caption)/1.2 var(--body)}.browser-notice>span>span{color:var(--paper-ghost);font:var(--type-caption)/1.25 var(--body)}.browser-notice.is-warning .notice-mark{background:var(--rust)}.browser-notice.is-warning strong{color:#efb08f}.header-actions{border-left:1px solid var(--line-light);justify-self:end;align-items:center;gap:10px;padding:0 14px;display:flex}.layout-controls{gap:4px;display:flex}.layout-controls button,.icon-button{width:36px;height:36px;color:var(--paper-ghost);border:1px solid var(--line-light);cursor:pointer;background:0 0;border-radius:7px;place-items:center;transition:color .15s,border-color .15s,background .15s;display:grid}.layout-controls button:hover,.icon-button:hover{color:var(--paper);background:#f1f2ed0d;border-color:#f1f2ed4d}.layout-controls button[aria-pressed=true]{color:var(--phosphor);background:var(--phosphor-dim);border-color:#a8d57457}.layout-controls svg,.icon-button svg{fill:none;stroke:currentColor;stroke-width:1.4px;width:18px}.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{flex:0 0 36px}.icon-button:hover{color:var(--paper)}.icon-button svg{fill:none;stroke:currentColor;stroke-width:1.4px;width:18px}.workspace-grid{background:#10120f;grid-template-columns:260px minmax(0,1fr) 340px;grid-template-areas:"models chat inspector";min-height:calc(100dvh - 64px);display:grid}.workspace-grid.is-models-collapsed{grid-template-columns:0 minmax(0,1fr) 340px}.workspace-grid.is-inspector-collapsed{grid-template-columns:260px minmax(0,1fr) 0}.workspace-grid.is-models-collapsed.is-inspector-collapsed{grid-template-columns:0 minmax(0,1fr) 0}.workspace-grid.layout-centered .chat-surface{justify-self:center;width:min(100%,1120px)}.workspace-grid.layout-wide .chat-surface{width:100%}.model-rail[hidden],.inspector[hidden]{display:none!important}.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:20px 14px 14px;display:flex;position:relative;overflow:hidden}.model-rail:before{display:none}.rail-heading,.section-heading{z-index:1;align-items:center;gap:10px;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:600 20px/1.2 var(--display);letter-spacing:-.015em;margin:0}.rail-heading p{color:var(--paper-ghost);font-size:var(--type-caption);margin:4px 0 0;line-height:1.35}.model-list{z-index:1;gap:5px;margin-top:21px;display:grid;position:relative}.model-card{border:1px solid var(--line-light);border-radius:8px;transition:border-color .18s,background .18s}.model-card.is-active{background:var(--phosphor-dim);border-color:#a8d57494}.model-select{text-align:left;width:100%;min-height:72px;color:var(--paper);cursor:pointer;background:0 0;border:0;grid-template-columns:1fr auto;gap:8px;padding:13px 9px 12px;display:grid}.model-card:not(.is-active) .model-select:hover{background:#f1f2ed0b}.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:600 20px/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:0;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;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 - 64px);min-height:calc(100dvh - 64px);color:var(--canvas-text);background:var(--canvas-bg);grid-area:chat;grid-template-rows:auto minmax(0,1fr) auto;display:grid;position:relative;overflow:hidden}.chat-header{border-bottom:1px solid var(--canvas-line);justify-content:space-between;align-items:center;gap:20px;min-height:72px;padding:14px clamp(20px,3vw,40px);display:flex}.chat-header h2{font:650 var(--type-heading)/1.1 var(--display);letter-spacing:-.025em;margin:0;display:inline}.chat-header-main{align-items:center;gap:8px;min-width:0;display:flex}.chat-list-button,.chat-settings-button{min-height:36px;color:var(--canvas-muted);border:1px solid var(--canvas-line);font:600 var(--type-utility)/1 var(--body);white-space:nowrap;cursor:pointer;background:0 0;border-radius:7px;align-items:center;gap:5px;padding:0 9px;display:inline-flex}.chat-list-button:hover,.chat-settings-button:hover{color:var(--canvas-text);border-color:var(--canvas-muted)}.chat-list-button svg{fill:none;stroke:currentColor;stroke-width:1.5px;width:16px}.chat-title{align-items:baseline;gap:10px;min-width:0;display:flex}.botanical-subtitle{color:#11151275;font:var(--type-caption)/1 var(--body)}.chat-header-meta{color:#1115128c;font:var(--type-utility)/1.2 var(--mono);letter-spacing:0;grid-template-columns:repeat(2,auto);gap:5px 13px;display:grid}.live-label{color:#46622f;grid-column:span 2;justify-self:end;align-items:center;gap:7px;display:flex}.live-label i{width:5px;height:5px;box-shadow:none;background:#668a45}.live-label.is-dormant{color:#1115127a}.live-label.is-dormant i{box-shadow:none;background:#1115125c}.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:0;align-items:center;gap:10px;margin-bottom:22px;display:flex}.transcript-date:before,.transcript-date:after{display:none}.transcript-empty{text-align:center;color:#11151280;max-width:430px;margin:12vh auto 0}.transcript-empty h3{color:var(--ink);font:650 22px/1.2 var(--display);margin:0 0 8px}.transcript-empty p{font-size:var(--type-body);margin:0;line-height:1.5}.system-instructions-button,.conversation-list-empty button,.new-chat-button{min-height:42px;color:var(--ink);border:1px solid var(--ink);background:var(--phosphor);font:650 var(--type-caption)/1 var(--body);cursor:pointer;border-radius:7px;padding:0 13px}.system-instructions-button{margin-top:18px}.conversation-library{grid-template-rows:auto minmax(0,1fr)}.conversation-list-header>div{gap:4px;display:grid}.conversation-list-header p{color:var(--canvas-muted);font-size:var(--type-caption);margin:0}.conversation-list{scrollbar-color:var(--canvas-muted) transparent;min-height:0;padding:clamp(20px,4vw,48px);overflow-y:auto}.conversation-row{border:1px solid var(--canvas-line);background:var(--canvas-field);border-radius:9px;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;max-width:850px;margin:0 auto 9px;display:grid}.conversation-row.is-current{border-color:#738066b8}.conversation-open{min-width:0;color:var(--canvas-text);text-align:left;cursor:pointer;background:0 0;border:0;gap:6px;padding:15px 16px;display:grid}.conversation-title-line{align-items:center;gap:9px;min-width:0;display:flex}.conversation-title-line strong{font:650 var(--type-body)/1.2 var(--display);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.conversation-title-line small{color:#52712f;font:600 var(--type-utility)/1 var(--body);flex:none}.conversation-open>span:nth-child(2){color:var(--canvas-muted);font-size:var(--type-caption);text-overflow:ellipsis;white-space:nowrap;line-height:1.35;overflow:hidden}.conversation-open>small{color:var(--canvas-muted);font:var(--type-utility)/1.2 var(--mono)}.conversation-actions{border-left:1px solid var(--canvas-line);align-content:center;gap:4px;padding:7px;display:grid}.conversation-actions button{min-height:34px;color:var(--canvas-muted);font:600 var(--type-utility)/1 var(--body);cursor:pointer;background:0 0;border:0;padding:0 8px}.conversation-actions button:hover{color:var(--canvas-text)}.conversation-actions .conversation-delete{color:var(--rust)}.conversation-list-empty{max-width:430px;color:var(--canvas-muted);text-align:center;justify-items:center;gap:10px;margin:15vh auto 0;display:grid}.conversation-list-empty h3,.conversation-list-empty p{margin:0}.conversation-list-empty h3{color:var(--canvas-text);font:650 22px/1.2 var(--display)}.conversation-list-empty button{margin-top:8px}.message{max-width:760px;margin-bottom:25px}.message>header{color:#11151278;font:var(--type-utility)/1.2 var(--mono);letter-spacing:0;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:#11151208;border:1px solid #11151229;border-radius:8px;margin:0 0 11px;padding:8px 10px}.reasoning-block summary{color:#4d6728;font:600 var(--type-caption)/1.2 var(--body);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 #546f3c73;padding-left:22px}.message-assistant .message-content>p:first-letter{float:none;color:inherit;font:inherit;margin:0}.message-user{max-width:min(78%,610px);color:var(--paper);background:var(--ink);border-radius:10px;margin-left:auto;padding:12px 15px 13px}.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 solid #11151221;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(--canvas-line);background:var(--canvas-raised);padding:12px clamp(21px,3vw,44px) 18px;position:relative}.composer:before{display:none}.composer-activity{color:var(--paper);background:var(--ink);border:1px solid #141613e6;border-radius:8px;gap:10px;margin-bottom:12px;padding:12px 14px;display:grid}.activity-status,.activity-status>div{align-items:center;display:flex}.activity-status{min-width:0;font:var(--type-caption)/1.2 var(--body);justify-content:space-between;gap:12px}.activity-status>div{gap:10px;min-width:0}.activity-status>div>span:last-child{gap:3px;min-width:0;display:grid}.activity-status strong,.activity-status small{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.activity-status strong{color:var(--paper);font-weight:600}.activity-status small{color:var(--paper-ghost);font-size:var(--type-utility)}.activity-status>b{color:var(--phosphor);font:600 var(--type-caption)/1 var(--mono);flex:none}.activity-pulse{background:var(--phosphor);border-radius:2px;flex:0 0 5px;width:5px;height:22px}.activity-track{background:#f1f2ed1f;border-radius:3px;height:6px;overflow:hidden}.activity-track>span{border-radius:inherit;background:var(--phosphor);height:100%;transition:width .12s linear;display:block}.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);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);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(--canvas-text);background:var(--canvas-field);border-radius:10px;grid-template-columns:1fr auto;min-height:84px;display:grid;position:relative;overflow:hidden}.composer-field label{color:#11151273;font:var(--type-utility)/1 var(--mono);letter-spacing:0;position:absolute;top:7px;left:11px}.composer-field textarea{resize:none;min-width:0;color:var(--canvas-text);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);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:7px;margin:7px;transition:background .15s,opacity .15s;display:flex}.send-button:hover:not(:disabled){background:#b6df87}.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)}.station-frame[data-theme=dark] .botanical-subtitle,.station-frame[data-theme=dark] .chat-header-meta,.station-frame[data-theme=dark] .transcript-date,.station-frame[data-theme=dark] .transcript-empty,.station-frame[data-theme=dark] .message>header,.station-frame[data-theme=dark] .message>footer,.station-frame[data-theme=dark] .composer-meta,.station-frame[data-theme=dark] .tool-toggle,.station-frame[data-theme=dark] .regenerate-button,.station-frame[data-theme=dark] .composer-field label{color:var(--canvas-muted)}.station-frame[data-theme=dark] .transcript-empty h3,.station-frame[data-theme=dark] .message>header strong{color:var(--canvas-text)}.station-frame[data-theme=dark] .live-label{color:#a8d574}.station-frame[data-theme=dark] .conversation-title-line small{color:var(--phosphor)}.station-frame[data-theme=dark] .live-label.is-dormant{color:var(--canvas-muted)}.station-frame[data-theme=dark] .live-label.is-dormant i{background:var(--canvas-muted)}.station-frame[data-theme=dark] .transcript{scrollbar-color:#edf0e83d transparent}.station-frame[data-theme=dark] .markdown-content blockquote,.station-frame[data-theme=dark] .reasoning-block,.station-frame[data-theme=dark] .tool-call>div p{color:#edf0e8b3}.station-frame[data-theme=dark] .markdown-content code{background:#edf0e817}.station-frame[data-theme=dark] .markdown-content pre{color:var(--paper);background:#0f110e}.station-frame[data-theme=dark] .markdown-content a,.station-frame[data-theme=dark] .reasoning-block summary{color:var(--phosphor)}.station-frame[data-theme=dark] .reasoning-block,.station-frame[data-theme=dark] .tool-call{border-color:var(--canvas-line);background:#edf0e809}.station-frame[data-theme=dark] .generation-placeholder,.station-frame[data-theme=dark] .tool-call summary>span:last-child,.station-frame[data-theme=dark] .composer-field textarea::placeholder{color:#edf0e866}.station-frame[data-theme=dark] .message-assistant{border-left-color:#a8d57470}.station-frame[data-theme=dark] .message-user{color:var(--canvas-text);border:1px solid var(--canvas-line);background:#11130f}.station-frame[data-theme=dark] .message>footer,.station-frame[data-theme=dark] .tool-call>div{border-color:var(--canvas-line)}.station-frame[data-theme=dark] .tool-toggle.is-on{color:var(--phosphor)}.station-frame[data-theme=dark] .composer-field textarea{color:var(--canvas-text)}.station-frame[data-theme=dark] .composer-field{border-color:#edf0e84d}.station-frame[data-theme=dark] .send-button{color:var(--ink);border-color:#0f110e}.station-frame[data-theme=dark] .send-button.stop{color:var(--canvas-text);border-color:var(--canvas-line);background:#11130f}.inspector{border-left:1px solid var(--line-light);scrollbar-color:#e8dfca2e transparent;grid-area:inspector;height:calc(100dvh - 64px);min-height:calc(100dvh - 64px);overflow-y:auto}.inspector-section{border-bottom:1px solid var(--line-light);padding:20px 18px}.section-heading{justify-content:space-between;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{color:var(--paper-ghost);border:1px solid var(--line-light);font:var(--type-utility)/1 var(--body);border-radius:6px;padding:3px 6px}.sampling-label.phase-prefill,.sampling-label.phase-decode{color:var(--phosphor);border-color:#a8d57459}.speed-gauge{grid-template-columns:116px 1fr;align-items:center;gap:15px;display:grid}.gauge-ring{background:radial-gradient(circle, var(--ink) 0 56%, transparent 57%), conic-gradient(var(--phosphor) 0 var(--gauge), #f1f2ed1c var(--gauge) 100%);border-radius:50%;place-items:center;width:116px;height:116px;display:grid;box-shadow:inset 0 0 0 1px #f1f2ed14}.gauge-ring:after{display:none}.gauge-ring>div{z-index:1;justify-items:center;min-width:0;display:grid;position:relative}.gauge-ring strong{color:var(--phosphor);font:600 clamp(24px, 2vw, 29px)/1 var(--display);white-space:nowrap}.gauge-ring small{color:var(--paper-ghost);font:600 10px/1 var(--mono);letter-spacing:.02em;text-transform:uppercase;justify-items:center;gap:2px;margin-top:3px;display:grid}.gauge-ring small span{white-space:nowrap}.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}.telemetry-live-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px;display:grid}.telemetry-metric{border:1px solid var(--line-light);background:var(--ink-raised);border-radius:8px;gap:6px;min-width:0;padding:10px;display:grid}.telemetry-metric.is-active{border-color:#a8d57466}.telemetry-metric>div:first-child{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.telemetry-metric span,.telemetry-metric small{color:var(--paper-ghost);font-size:var(--type-utility)}.telemetry-metric strong{color:var(--paper);font:600 var(--type-caption)/1 var(--mono);white-space:nowrap}.telemetry-metric.is-active strong{color:var(--phosphor)}.telemetry-meter{background:#f1f2ed1a;border-radius:2px;height:4px;overflow:hidden}.telemetry-meter>span{border-radius:inherit;background:var(--phosphor);height:100%;transition:width .12s linear;display:block}.device-card{border:1px solid var(--line-light);background:var(--ink-raised);border-radius:8px;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:var(--phosphor);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:6px;width:25px;height:25px}.artifact-empty{color:var(--paper-ghost);font:var(--type-caption)/1.5 var(--body);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;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: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:minmax(0,1fr) auto;align-items:center;gap:12px;padding:15px 0;display:grid}.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:240px minmax(260px,1fr) auto}.browser-notice>span>span{display:none}.browser-notice.is-warning>span>span{display:block}.workspace-grid{grid-template-columns:240px minmax(0,1fr);grid-template-areas:"models chat""inspector inspector"}.workspace-grid.is-models-collapsed,.workspace-grid.is-models-collapsed.is-inspector-collapsed{grid-template-columns:0 minmax(0,1fr)}.workspace-grid.is-inspector-collapsed:not(.is-models-collapsed){grid-template-columns:240px minmax(0,1fr)}.model-rail,.chat-surface{height:calc(100dvh - 64px);min-height:calc(100dvh - 64px)}.inspector{border-top:1px solid var(--line-light);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{grid-template-columns:minmax(0,1fr) auto;min-height:58px;display:grid}.brand-block{border-right:0;min-width:0;padding:10px 14px}.brand-glyph{flex-basis:32px;width:32px;height:32px}.browser-notice{border-top:1px solid var(--line-light);grid-area:2/1/auto/-1;min-height:38px;padding:7px 14px}.header-actions{border-left:0;grid-area:1/2;padding-inline:10px;position:static}.workspace-grid{display:block}.model-rail,.chat-surface,.inspector{height:auto;min-height:auto}.model-rail{border-right:0;border-bottom:1px solid var(--line-light);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 minmax(240px,auto) auto;min-height:calc(100dvh - 96px);display:grid;overflow:visible;width:100%!important}.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(--line-light);display:block}.inspector-section{border-right:0;border-bottom:1px solid var(--line-light)}}@media (width<=520px){.brand-block h1{font-size:18px}.brand-block>div>span{display:none}.layout-controls{gap:2px}.layout-controls button,.icon-button{width:32px;height:32px}.chat-header{align-items:flex-end}.botanical-subtitle{display:none}.message-user{max-width:91%}.composer-meta>span{display:none}.composer-activity{padding-inline:10px}.activity-status small{max-width:210px}.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{display:none}.telemetry-live-grid{grid-template-columns:1fr}}@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-DnMbdiUB.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;--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/index-DsVgIwSl.js ADDED 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-BY7HNxCd.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DnMbdiUB.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-DsVgIwSl.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BbReSmeP.css">
   </head>
   <body>
     <div id="root"></div>

src/app/App.tsx CHANGED Viewed

@@ -18,6 +18,7 @@ import {
 import { AGENT_TOOLS, executeAgentTool, type ArtifactDocument } from '../lib/agent-tools';
 import type {
   ChatMessage,
   ComposerSubmission,
   ModelLoadProgress,
   ModelId,
@@ -31,13 +32,13 @@ import type {
   ToolRun,
 } from '../lib/contracts';
 import { formatBytes } from '../lib/format';
-import { listConversations, saveConversation } from '../lib/idb';
 import { parseThoughtStream } from '../lib/think-parser';
 import { parseToolCalls } from '../lib/tool-protocol';
 import { BonsaiShell } from './components/BonsaiShell';
 const MANIFEST_PATH = 'manifest/models.json';
-const CONVERSATION_ID = 'primary-field-log';
 const MAX_TOOL_ROUNDS = 5;
 const MAX_TOOL_CALLS_PER_ROUND = 4;
 const MAX_TOOL_CALLS_TOTAL = 12;
@@ -150,6 +151,10 @@ function eventClock(): string {
   return new Date().toISOString().slice(11, 23);
 }
 function errorMessage(error: unknown): string {
   if (error instanceof EngineClientError) return `${error.code}: ${error.message}`;
   return error instanceof Error ? error.message : String(error);
@@ -275,6 +280,9 @@ export function App() {
   const [loadedModelId, setLoadedModelId] = useState<ModelId | 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);
@@ -415,9 +423,23 @@ export function App() {
         if (!cancelled) setError(`Capability inspection failed: ${errorMessage(capabilityError)}`);
       }
       try {
-        const conversations = await listConversations<ChatMessage>();
-        const latest = conversations.find((conversation) => conversation.id === CONVERSATION_ID);
-        if (!cancelled && latest) setMessages(latest.messages);
       } catch {
         // Private browsing may disable IndexedDB. Chat remains usable for the tab.
         if (!cancelled) setBootStatus((current) => `${current} · history is session-only`);
@@ -432,19 +454,24 @@ export function App() {
   useEffect(() => {
     if (!historyReadyRef.current) return;
     const timer = window.setTimeout(() => {
-      void saveConversation({
-        id: CONVERSATION_ID,
-        title: messages.find((message) => message.role === 'user')?.content.slice(0, 80) || 'Bonsai field log',
-        messages,
-        modelId: activeModelId,
-        updatedAt: Date.now(),
-      }).catch(() => setBootStatus((current) => current.includes('history is session-only')
         ? current
         : `${current} · history is session-only`));
     }, 250);
     return () => window.clearTimeout(timer);
-  }, [activeModelId, messages]);
   const models = useMemo<ModelOption[]>(() => {
     if (!manifest) return [];
@@ -1082,10 +1109,84 @@ export function App() {
   const handleClearConversation = () => {
     if (operationRef.current) return;
     setMessages([]);
     setToolEvents([]);
     setArtifact(null);
     setBootStatus('Conversation cleared · model remains local');
   };
   const effectiveLoadedModelId = (() => {
@@ -1117,6 +1218,9 @@ export function App() {
       activeModelId={activeModelId}
       loadedModelId={effectiveLoadedModelId}
       messages={messages}
       streamState={streamState}
       modelLoadProgress={modelLoadProgress}
       telemetry={telemetry}
@@ -1141,6 +1245,11 @@ export function App() {
       onPersistStorage={handlePersistStorage}
       onClearStorage={handleClearStorage}
       onClearConversation={handleClearConversation}
       onDismissError={() => setError(null)}
       onRetryShard={handleLoadModel}
       onCloseArtifact={() => setArtifact(null)}

 import { AGENT_TOOLS, executeAgentTool, type ArtifactDocument } from '../lib/agent-tools';
 import type {
   ChatMessage,
+  ChatSession,
   ComposerSubmission,
   ModelLoadProgress,
   ModelId,
   ToolRun,
 } from '../lib/contracts';
 import { formatBytes } from '../lib/format';
+import { conversationTitle, normalizeConversationModelId, upsertConversation } from '../lib/conversations';
+import { deleteConversation, listConversations, saveConversation } from '../lib/idb';
 import { parseThoughtStream } from '../lib/think-parser';
 import { parseToolCalls } from '../lib/tool-protocol';
 import { BonsaiShell } from './components/BonsaiShell';
 const MANIFEST_PATH = 'manifest/models.json';
 const MAX_TOOL_ROUNDS = 5;
 const MAX_TOOL_CALLS_PER_ROUND = 4;
 const MAX_TOOL_CALLS_TOTAL = 12;
   return new Date().toISOString().slice(11, 23);
 }
+function createConversationId(): string {
+  return crypto.randomUUID();
+}
 function errorMessage(error: unknown): string {
   if (error instanceof EngineClientError) return `${error.code}: ${error.message}`;
   return error instanceof Error ? error.message : String(error);
   const [loadedModelId, setLoadedModelId] = useState<ModelId | null>(null);
   const [loadingModelId, setLoadingModelId] = useState<ModelId | null>(null);
   const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [conversations, setConversations] = useState<ChatSession[]>([]);
+  const [activeConversationId, setActiveConversationId] = useState(createConversationId);
+  const [conversationListOpen, setConversationListOpen] = useState(false);
   const [streamState, setStreamState] = useState<StreamState>('idle');
   const [modelLoadProgress, setModelLoadProgress] = useState<ModelLoadProgress>(INITIAL_MODEL_LOAD_PROGRESS);
   const [toolsEnabled, setToolsEnabled] = useState(false);
         if (!cancelled) setError(`Capability inspection failed: ${errorMessage(capabilityError)}`);
       }
       try {
+        const storedConversations = (await listConversations<ChatMessage>()).map((conversation) => ({
+          ...conversation,
+          modelId: normalizeConversationModelId(conversation.modelId),
+          systemPrompt: typeof conversation.systemPrompt === 'string'
+            ? conversation.systemPrompt
+            : INITIAL_SETTINGS.systemPrompt,
+        }));
+        const latest = storedConversations[0];
+        if (!cancelled) {
+          setConversations(storedConversations);
+          if (latest) {
+            setActiveConversationId(latest.id);
+            setActiveModelId(latest.modelId);
+            setMessages(latest.messages);
+            setSettings((current) => ({ ...current, systemPrompt: latest.systemPrompt }));
+          }
+        }
       } catch {
         // Private browsing may disable IndexedDB. Chat remains usable for the tab.
         if (!cancelled) setBootStatus((current) => `${current} · history is session-only`);
   useEffect(() => {
     if (!historyReadyRef.current) return;
+    const alreadySaved = conversations.some((conversation) => conversation.id === activeConversationId);
+    if (messages.length === 0 && settings.systemPrompt === INITIAL_SETTINGS.systemPrompt && !alreadySaved) return;
+    const nextConversation: ChatSession = {
+      id: activeConversationId,
+      title: conversationTitle(messages),
+      messages,
+      modelId: activeModelId,
+      systemPrompt: settings.systemPrompt,
+      updatedAt: Date.now(),
+    };
     const timer = window.setTimeout(() => {
+      setConversations((current) => upsertConversation(current, nextConversation));
+      void saveConversation(nextConversation).catch(() => setBootStatus((current) => current.includes('history is session-only')
         ? current
         : `${current} · history is session-only`));
     }, 250);
     return () => window.clearTimeout(timer);
+  }, [activeConversationId, activeModelId, messages, settings.systemPrompt]);
   const models = useMemo<ModelOption[]>(() => {
     if (!manifest) return [];
   const handleClearConversation = () => {
     if (operationRef.current) return;
+    const clearedId = activeConversationId;
+    setConversations((current) => current.filter((conversation) => conversation.id !== clearedId));
+    setActiveConversationId(createConversationId());
     setMessages([]);
     setToolEvents([]);
     setArtifact(null);
     setBootStatus('Conversation cleared · model remains local');
+    void deleteConversation(clearedId).catch(() => setBootStatus('Conversation cleared for this tab · local history is unavailable'));
+  };
+  const handleOpenConversationList = () => {
+    if (operationRef.current) return;
+    const alreadySaved = conversations.some((conversation) => conversation.id === activeConversationId);
+    if (messages.length > 0 || settings.systemPrompt !== INITIAL_SETTINGS.systemPrompt || alreadySaved) {
+      const nextConversation: ChatSession = {
+        id: activeConversationId,
+        title: conversationTitle(messages),
+        messages,
+        modelId: activeModelId,
+        systemPrompt: settings.systemPrompt,
+        updatedAt: Date.now(),
+      };
+      setConversations((current) => upsertConversation(current, nextConversation));
+      void saveConversation(nextConversation).catch(() => undefined);
+    }
+    setConversationListOpen(true);
+  };
+  const handleNewConversation = () => {
+    if (operationRef.current) return;
+    setActiveConversationId(createConversationId());
+    setMessages([]);
+    setToolEvents([]);
+    setArtifact(null);
+    setError(null);
+    setStreamState('idle');
+    setSettings((current) => ({ ...current, systemPrompt: INITIAL_SETTINGS.systemPrompt }));
+    setConversationListOpen(false);
+    setBootStatus('New local chat · model remains available');
+  };
+  const handleOpenConversation = (conversationId: string) => {
+    if (operationRef.current) return;
+    const conversation = conversations.find((candidate) => candidate.id === conversationId);
+    if (!conversation) return;
+    setActiveConversationId(conversation.id);
+    setMessages(conversation.messages);
+    setToolEvents([]);
+    setArtifact(null);
+    setError(null);
+    setStreamState('idle');
+    setSettings((current) => ({ ...current, systemPrompt: conversation.systemPrompt }));
+    handleModelSelect(conversation.modelId);
+    setConversationListOpen(false);
+    setBootStatus(`Opened local chat · ${conversation.title}`);
+  };
+  const handleOpenConversationSettings = (conversationId: string) => {
+    if (operationRef.current) return;
+    handleOpenConversation(conversationId);
+    setSettingsOpen(true);
+  };
+  const handleDeleteConversation = (conversationId: string) => {
+    if (operationRef.current) return;
+    const conversation = conversations.find((candidate) => candidate.id === conversationId);
+    if (!conversation || !window.confirm(`Delete “${conversation.title}” from this browser?`)) return;
+    setConversations((current) => current.filter((candidate) => candidate.id !== conversationId));
+    if (conversationId === activeConversationId) {
+      setActiveConversationId(createConversationId());
+      setMessages([]);
+      setToolEvents([]);
+      setArtifact(null);
+      setSettings((current) => ({ ...current, systemPrompt: INITIAL_SETTINGS.systemPrompt }));
+    }
+    void deleteConversation(conversationId)
+      .then(() => setBootStatus('Local chat deleted'))
+      .catch(() => setBootStatus('Chat removed for this tab · local history is unavailable'));
   };
   const effectiveLoadedModelId = (() => {
       activeModelId={activeModelId}
       loadedModelId={effectiveLoadedModelId}
       messages={messages}
+      conversations={conversations}
+      activeConversationId={activeConversationId}
+      conversationListOpen={conversationListOpen}
       streamState={streamState}
       modelLoadProgress={modelLoadProgress}
       telemetry={telemetry}
       onPersistStorage={handlePersistStorage}
       onClearStorage={handleClearStorage}
       onClearConversation={handleClearConversation}
+      onOpenConversationList={handleOpenConversationList}
+      onNewConversation={handleNewConversation}
+      onOpenConversation={handleOpenConversation}
+      onOpenConversationSettings={handleOpenConversationSettings}
+      onDeleteConversation={handleDeleteConversation}
       onDismissError={() => setError(null)}
       onRetryShard={handleLoadModel}
       onCloseArtifact={() => setArtifact(null)}

src/app/components/ArtifactPane.tsx CHANGED Viewed

@@ -25,11 +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>04</span>
-        <div>
-          <p className="eyebrow">Isolated terrarium</p>
-          <h2 id="artifact-title">Artifact</h2>
-        </div>
         {artifact && <button className="artifact-close" type="button" onClick={onClose} aria-label="Close artifact">×</button>}
       </div>
       {!artifact ? (

   return (
     <section className="inspector-section artifact-section" aria-labelledby="artifact-title">
       <div className="section-heading compact">
+        <h2 id="artifact-title">Artifact</h2>
         {artifact && <button className="artifact-close" type="button" onClick={onClose} aria-label="Close artifact">×</button>}
       </div>
       {!artifact ? (

src/app/components/BonsaiShell.tsx CHANGED Viewed

@@ -1,35 +1,83 @@
 import type { BonsaiShellProps } from '../../lib/contracts';
 import { ChatSurface } from './ChatSurface';
-import { Header } from './Header';
 import { InspectorPanel } from './InspectorPanel';
 import { ModelRail } from './ModelRail';
 import { SettingsSheet } from './SettingsSheet';
 export function BonsaiShell(props: BonsaiShellProps) {
   const activeModel = props.models.find((model) => model.id === props.activeModelId);
   const busy = props.streamState === 'loading' || props.streamState === 'streaming';
   if (!activeModel) {
     throw new Error(`Active model ${props.activeModelId} is missing from the model catalog`);
   }
   return (
-    <div className="station-frame">
-      <Header onOpenSettings={props.onOpenSettings} disabled={busy} />
-      <div className="workspace-grid">
         <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}
@@ -41,8 +89,11 @@ export function BonsaiShell(props: BonsaiShellProps) {
           onRegenerate={props.onRegenerate}
           onCancel={props.onCancel}
           onToolsEnabledChange={props.onToolsEnabledChange}
-        />
         <InspectorPanel
           telemetry={props.telemetry}
           toolEvents={props.toolEvents}
           artifact={props.artifact}
@@ -51,6 +102,8 @@ export function BonsaiShell(props: BonsaiShellProps) {
       </div>
       <SettingsSheet
         open={props.settingsOpen}
         activeModel={activeModel}
         telemetry={props.telemetry}
         settings={props.settings}

+import { useEffect, useState } from 'react';
 import type { BonsaiShellProps } from '../../lib/contracts';
+import { normalizeThemeMode, resolveThemeMode, THEME_STORAGE_KEY, type ThemeMode } from '../theme';
 import { ChatSurface } from './ChatSurface';
+import { ConversationList } from './ConversationList';
+import { Header, type ChatWidth } from './Header';
 import { InspectorPanel } from './InspectorPanel';
 import { ModelRail } from './ModelRail';
 import { SettingsSheet } from './SettingsSheet';
 export function BonsaiShell(props: BonsaiShellProps) {
+  const [leftSidebarOpen, setLeftSidebarOpen] = useState(true);
+  const [rightSidebarOpen, setRightSidebarOpen] = useState(true);
+  const [chatWidth, setChatWidth] = useState<ChatWidth>('centered');
+  const [themeMode, setThemeMode] = useState<ThemeMode>(() => {
+    try {
+      return normalizeThemeMode(globalThis.localStorage?.getItem(THEME_STORAGE_KEY));
+    } catch {
+      return 'system';
+    }
+  });
+  const [systemDark, setSystemDark] = useState(() => globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false);
   const activeModel = props.models.find((model) => model.id === props.activeModelId);
   const busy = props.streamState === 'loading' || props.streamState === 'streaming';
+  const resolvedTheme = resolveThemeMode(themeMode, systemDark);
+  useEffect(() => {
+    const media = globalThis.matchMedia?.('(prefers-color-scheme: dark)');
+    if (!media) return;
+    const handleChange = (event: MediaQueryListEvent) => setSystemDark(event.matches);
+    setSystemDark(media.matches);
+    media.addEventListener('change', handleChange);
+    return () => media.removeEventListener('change', handleChange);
+  }, []);
+  useEffect(() => {
+    try {
+      globalThis.localStorage?.setItem(THEME_STORAGE_KEY, themeMode);
+    } catch {
+      // Theme still works for the current tab when storage is unavailable.
+    }
+  }, [themeMode]);
   if (!activeModel) {
     throw new Error(`Active model ${props.activeModelId} is missing from the model catalog`);
   }
   return (
+    <div className="station-frame" data-theme={resolvedTheme} data-theme-mode={themeMode}>
+      <Header
+        onOpenSettings={props.onOpenSettings}
+        disabled={busy}
+        leftSidebarOpen={leftSidebarOpen}
+        rightSidebarOpen={rightSidebarOpen}
+        chatWidth={chatWidth}
+        onToggleLeftSidebar={() => setLeftSidebarOpen((open) => !open)}
+        onToggleRightSidebar={() => setRightSidebarOpen((open) => !open)}
+        onToggleChatWidth={() => setChatWidth((width) => width === 'centered' ? 'wide' : 'centered')}
+      />
+      <div className={`workspace-grid layout-${chatWidth}${leftSidebarOpen ? '' : ' is-models-collapsed'}${rightSidebarOpen ? '' : ' is-inspector-collapsed'}`}>
         <ModelRail
+          hidden={!leftSidebarOpen}
           models={props.models}
           activeModelId={props.activeModelId}
           busy={busy}
           onModelSelect={props.onModelSelect}
         />
+        {props.conversationListOpen ? <ConversationList
+          conversations={props.conversations}
+          activeConversationId={props.activeConversationId}
+          onNewConversation={props.onNewConversation}
+          onOpenConversation={props.onOpenConversation}
+          onOpenConversationSettings={props.onOpenConversationSettings}
+          onDeleteConversation={props.onDeleteConversation}
+        /> : <ChatSurface
           activeModel={activeModel}
           loadedModelId={props.loadedModelId}
           messages={props.messages}
           streamState={props.streamState}
           modelLoadProgress={props.modelLoadProgress}
           toolsEnabled={props.toolsEnabled}
           runtimeStatus={props.runtimeStatus}
           error={props.error}
           onRegenerate={props.onRegenerate}
           onCancel={props.onCancel}
           onToolsEnabledChange={props.onToolsEnabledChange}
+          onOpenConversationList={props.onOpenConversationList}
+          onOpenSettings={props.onOpenSettings}
+        />}
         <InspectorPanel
+          hidden={!rightSidebarOpen}
           telemetry={props.telemetry}
           toolEvents={props.toolEvents}
           artifact={props.artifact}
       </div>
       <SettingsSheet
         open={props.settingsOpen}
+        themeMode={themeMode}
+        onThemeModeChange={setThemeMode}
         activeModel={activeModel}
         telemetry={props.telemetry}
         settings={props.settings}

src/app/components/ChatSurface.tsx CHANGED Viewed

@@ -7,7 +7,6 @@ import type {
   ModelOption,
   ShardRetryNotice,
   StreamState,
-  TelemetrySnapshot,
   ToolRun,
 } from '../../lib/contracts';
 import { ComposerActivity } from './ComposerActivity';
@@ -19,7 +18,6 @@ interface ChatSurfaceProps {
   messages: ChatMessage[];
   streamState: StreamState;
   modelLoadProgress: ModelLoadProgress;
-  telemetry: TelemetrySnapshot;
   toolsEnabled: boolean;
   runtimeStatus: string;
   error: string | null;
@@ -31,6 +29,8 @@ interface ChatSurfaceProps {
   onRegenerate: () => void;
   onCancel: () => void;
   onToolsEnabledChange: (enabled: boolean) => void;
 }
 export function ChatSurface({
@@ -39,7 +39,6 @@ export function ChatSurface({
   messages,
   streamState,
   modelLoadProgress,
-  telemetry,
   toolsEnabled,
   runtimeStatus,
   error,
@@ -51,6 +50,8 @@ export function ChatSurface({
   onRegenerate,
   onCancel,
   onToolsEnabledChange,
 }: ChatSurfaceProps) {
   const [prompt, setPrompt] = useState('');
   const isLoading = streamState === 'loading';
@@ -83,22 +84,23 @@ export function ChatSurface({
   return (
     <main className="chat-surface">
       <header className="chat-header">
-        <div>
-          <p className="eyebrow ink">Active specimen</p>
-          <h2>{activeModel.label}</h2>
-          <span className="botanical-subtitle">{activeModel.botanicalName}</span>
         </div>
         <div className="chat-header-meta">
-          <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>
-      <div className="chat-ruler" aria-hidden="true">
-        <span>00</span><span>¼</span><span>½</span><span>¾</span><span>{Math.round(activeModel.contextLimit / 1024)}K</span>
-      </div>
       {shardRetry && (
         <div className="runtime-error download-retry" role="alert">
           <div>
@@ -119,26 +121,24 @@ export function ChatSurface({
       )}
       <section className="transcript" aria-label="Conversation transcript" aria-live="polite">
-        <div className="transcript-date"><span>Field log · {logDate}</span></div>
         {messages.length === 0 && (
           <div className="transcript-empty">
-            <span aria-hidden="true">⌁</span>
             <h3>No observations yet</h3>
             <p>Choose a model, keep the backend on Auto, and send a prompt. The model is downloaded once and runs inside this browser.</p>
           </div>
         )}
-        {messages.map((message, index) => (
-          <Message key={message.id} message={message} ordinal={index + 1} />
         ))}
       </section>
       <form className="composer" onSubmit={handleSubmit}>
         <ComposerActivity
           modelId={activeModel.id}
-          isLoaded={isLoaded}
           streamState={streamState}
           progress={modelLoadProgress}
-          telemetry={telemetry}
         />
         <div className="composer-meta">
           <button
@@ -157,9 +157,10 @@ export function ChatSurface({
           <span>{runtimeStatus}</span>
         </div>
         <div className="composer-field">
-          <label htmlFor="bonsai-prompt">Ask the local specimen</label>
           <textarea
             id="bonsai-prompt"
             value={prompt}
             onChange={(event) => setPrompt(event.target.value)}
             onKeyDown={handleKeyDown}
@@ -186,13 +187,12 @@ export function ChatSurface({
   );
 }
-function Message({ message, ordinal }: { message: ChatMessage; ordinal: number }) {
   const streaming = message.state === 'streaming';
   return (
     <article className={`message message-${message.role}${streaming ? ' is-streaming' : ''}${message.error ? ' has-error' : ''}`}>
       <header>
-        <span className="message-ordinal">{String(ordinal).padStart(2, '0')}</span>
-        <strong>{message.role === 'assistant' ? 'Bonsai observation' : message.role === 'system' ? 'Station protocol' : 'Field operator'}</strong>
         <time>{message.timestamp}</time>
       </header>
       <div className="message-content">
@@ -246,6 +246,10 @@ function ToolIcon() {
   );
 }
 function ArrowIcon() {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true">

   ModelOption,
   ShardRetryNotice,
   StreamState,
   ToolRun,
 } from '../../lib/contracts';
 import { ComposerActivity } from './ComposerActivity';
   messages: ChatMessage[];
   streamState: StreamState;
   modelLoadProgress: ModelLoadProgress;
   toolsEnabled: boolean;
   runtimeStatus: string;
   error: string | null;
   onRegenerate: () => void;
   onCancel: () => void;
   onToolsEnabledChange: (enabled: boolean) => void;
+  onOpenConversationList: () => void;
+  onOpenSettings: () => void;
 }
 export function ChatSurface({
   messages,
   streamState,
   modelLoadProgress,
   toolsEnabled,
   runtimeStatus,
   error,
   onRegenerate,
   onCancel,
   onToolsEnabledChange,
+  onOpenConversationList,
+  onOpenSettings,
 }: ChatSurfaceProps) {
   const [prompt, setPrompt] = useState('');
   const isLoading = streamState === 'loading';
   return (
     <main className="chat-surface">
       <header className="chat-header">
+        <div className="chat-header-main">
+          <button className="chat-list-button" type="button" disabled={isBusy} onClick={onOpenConversationList} aria-label="Open chat list">
+            <BackIcon /> Chats
+          </button>
+          <button className="chat-settings-button" type="button" disabled={isBusy} onClick={onOpenSettings}>Chat settings</button>
+          <div className="chat-title">
+            <h2>{activeModel.label}</h2>
+            <span className="botanical-subtitle">{activeModel.botanicalName}</span>
+          </div>
         </div>
         <div className="chat-header-meta">
+          <span>{activeModel.footprint} download</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>
       {shardRetry && (
         <div className="runtime-error download-retry" role="alert">
           <div>
       )}
       <section className="transcript" aria-label="Conversation transcript" aria-live="polite">
+        <div className="transcript-date"><span>{logDate}</span></div>
         {messages.length === 0 && (
           <div className="transcript-empty">
             <h3>No observations yet</h3>
             <p>Choose a model, keep the backend on Auto, and send a prompt. The model is downloaded once and runs inside this browser.</p>
+            <button className="system-instructions-button" type="button" onClick={onOpenSettings}>Set system instructions</button>
           </div>
         )}
+        {messages.map((message) => (
+          <Message key={message.id} message={message} />
         ))}
       </section>
       <form className="composer" onSubmit={handleSubmit}>
         <ComposerActivity
           modelId={activeModel.id}
           streamState={streamState}
           progress={modelLoadProgress}
         />
         <div className="composer-meta">
           <button
           <span>{runtimeStatus}</span>
         </div>
         <div className="composer-field">
+          <label htmlFor="bonsai-prompt">Prompt</label>
           <textarea
             id="bonsai-prompt"
+            aria-label="Ask the local specimen"
             value={prompt}
             onChange={(event) => setPrompt(event.target.value)}
             onKeyDown={handleKeyDown}
   );
 }
+function Message({ message }: { message: ChatMessage }) {
   const streaming = message.state === 'streaming';
   return (
     <article className={`message message-${message.role}${streaming ? ' is-streaming' : ''}${message.error ? ' has-error' : ''}`}>
       <header>
+        <strong>{message.role === 'assistant' ? 'Bonsai' : message.role === 'system' ? 'System' : 'You'}</strong>
         <time>{message.timestamp}</time>
       </header>
       <div className="message-content">
   );
 }
+function BackIcon() {
+  return <svg viewBox="0 0 20 20" aria-hidden="true"><path d="m11.5 5-5 5 5 5M7 10h7" /></svg>;
+}
 function ArrowIcon() {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true">

src/app/components/ComposerActivity.test.tsx ADDED Viewed

	@@ -0,0 +1,64 @@

+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import type { ModelLoadProgress, ModelShardProgress } from '../../lib/contracts';
+import { ComposerActivity, describeLoadProgress, overallLoadProgress } from './ComposerActivity';
+function shard(index: number, state: ModelShardProgress['state']): ModelShardProgress {
+  return {
+    index,
+    path: `shard-${index + 1}.gguf`,
+    loadedBytes: state === 'queued' ? 0 : 100,
+    verifiedBytes: state === 'complete' || state === 'cached' ? 100 : 0,
+    totalBytes: 100,
+    state,
+  };
+}
+function progress(overrides: Partial<ModelLoadProgress> = {}): ModelLoadProgress {
+  return {
+    modelId: 'bonsai-27b',
+    modelLabel: 'Bonsai 27B',
+    stage: 'download',
+    stageProgress: 0.5,
+    downloadedBytes: 400,
+    totalBytes: 800,
+    residentBytes: 0,
+    nativeStage: null,
+    shards: [
+      shard(0, 'complete'),
+      shard(1, 'downloading'),
+      ...Array.from({ length: 6 }, (_, index) => shard(index + 2, 'queued')),
+    ],
+    ...overrides,
+  };
+}
+describe('ComposerActivity', () => {
+  it('combines the load pipeline into one weighted overall progress value', () => {
+    expect(overallLoadProgress(progress())).toBeCloseTo(0.39625);
+    expect(overallLoadProgress(progress({ stage: 'cache', stageProgress: 0.2 }))).toBeCloseTo(0.39625);
+    expect(overallLoadProgress(progress({ stage: 'load', stageProgress: 0.5 }))).toBeCloseTo(0.95);
+    expect(overallLoadProgress(progress({ stage: 'ready' }))).toBe(1);
+  });
+  it('annotates the active shard and total ready shard count', () => {
+    expect(describeLoadProgress(progress())).toEqual({
+      label: 'Downloading shard 2 of 8',
+      detail: '1 of 8 shards ready · 400 B / 800 B',
+    });
+  });
+  it('renders exactly one progressbar during load and disappears afterwards', () => {
+    const loading = renderToStaticMarkup(
+      <ComposerActivity modelId="bonsai-27b" streamState="loading" progress={progress()} />,
+    );
+    expect(loading.match(/role="progressbar"/g)).toHaveLength(1);
+    expect(loading).not.toContain('Model transfer');
+    expect(loading).not.toContain('Load pipeline');
+    const ready = renderToStaticMarkup(
+      <ComposerActivity modelId="bonsai-27b" streamState="complete" progress={progress({ stage: 'ready' })} />,
+    );
+    expect(ready).toBe('');
+  });
+});

src/app/components/ComposerActivity.tsx CHANGED Viewed

@@ -1,29 +1,17 @@
 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;
 }
@@ -33,173 +21,111 @@ function humanizeStage(value: string | null): string {
   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>
-  );
-}

+import { useRef } from 'react';
 import type {
   ModelId,
   ModelLoadProgress,
   StreamState,
 } from '../../lib/contracts';
 import { formatBytes, formatPercent } from '../../lib/format';
 interface ComposerActivityProps {
   modelId: ModelId;
   streamState: StreamState;
   progress: ModelLoadProgress;
 }
 function ratio(value: number, total: number): number {
   return total > 0 ? Math.min(1, Math.max(0, value / total)) : 0;
 }
   return value.replaceAll('_', ' ').replace(/\b\w/g, (letter) => letter.toUpperCase());
 }
+export function overallLoadProgress(progress: ModelLoadProgress): number {
+  const stageProgress = Math.min(1, Math.max(0, progress.stageProgress));
+  const loadedShardBytes = progress.shards.reduce((total, shard) => (
+    total + (shard.state === 'cached' || shard.state === 'complete'
+      ? shard.totalBytes
+      : Math.min(shard.loadedBytes, shard.totalBytes))
+  ), 0);
+  const verifiedBytes = progress.shards.reduce((total, shard) => (
+    total + (shard.state === 'cached' || shard.state === 'complete'
+      ? shard.totalBytes
+      : Math.min(shard.verifiedBytes, shard.totalBytes))
+  ), 0);
+  const downloadRatio = ratio(Math.max(progress.downloadedBytes, loadedShardBytes), progress.totalBytes);
+  const verifiedRatio = ratio(verifiedBytes, progress.totalBytes);
+  const transferProgress = Math.min(0.9, 0.08 + downloadRatio * 0.57 + verifiedRatio * 0.25);
+  switch (progress.stage) {
+    case 'manifest':
+      return stageProgress * 0.03;
+    case 'cache':
+      return Math.max(0.03 + stageProgress * 0.05, transferProgress);
+    case 'download':
+    case 'verify':
+      return transferProgress;
+    case 'load':
+      return 0.9 + stageProgress * 0.1;
+    case 'ready':
+      return 1;
+    default:
+      return 0;
+  }
+}
+export function describeLoadProgress(progress: ModelLoadProgress): { label: string; detail: string } {
+  const shardCount = progress.shards.length;
+  const readyShards = progress.shards.filter((shard) => shard.state === 'cached' || shard.state === 'complete').length;
+  const activeShard = progress.shards.find((shard) => shard.state === 'downloading' || shard.state === 'verifying');
+  const shardDetail = shardCount > 0 ? `${readyShards} of ${shardCount} shards ready` : 'Preparing shard map';
+  const byteDetail = progress.totalBytes > 0
+    ? `${formatBytes(progress.downloadedBytes)} / ${formatBytes(progress.totalBytes)}`
+    : '';
+  switch (progress.stage) {
+    case 'manifest':
+      return { label: 'Reading model manifest', detail: progress.modelLabel || 'Pinned release metadata' };
+    case 'cache':
+      return { label: 'Checking local cache', detail: shardCount > 0 ? shardDetail : 'Looking for existing shards' };
+    case 'download':
+      return {
+        label: activeShard ? `Downloading shard ${activeShard.index + 1} of ${shardCount}` : 'Downloading model shards',
+        detail: [shardDetail, byteDetail].filter(Boolean).join(' · '),
+      };
+    case 'verify':
+      return {
+        label: activeShard ? `Verifying shard ${activeShard.index + 1} of ${shardCount}` : 'Verifying model shards',
+        detail: [shardDetail, byteDetail].filter(Boolean).join(' · '),
+      };
+    case 'load':
+      return {
+        label: progress.nativeStage ? humanizeStage(progress.nativeStage) : 'Allocating model',
+        detail: progress.residentBytes > 0 ? `${formatBytes(progress.residentBytes)} resident` : 'Building the local graph',
+      };
+    default:
+      return { label: 'Preparing model', detail: progress.modelLabel };
+  }
+}
+export function ComposerActivity({ modelId, streamState, progress }: ComposerActivityProps) {
+  const displayedProgress = useRef<{ modelId: ModelId | null; value: number }>({ modelId: null, value: 0 });
+  const isLoading = streamState === 'loading' && progress.modelId === modelId;
+  if (!isLoading) {
+    displayedProgress.current = { modelId: null, value: 0 };
+    return null;
+  }
+  const measuredProgress = overallLoadProgress(progress);
+  const overallProgress = displayedProgress.current.modelId === modelId
+    ? Math.max(displayedProgress.current.value, measuredProgress)
+    : measuredProgress;
+  displayedProgress.current = { modelId, value: overallProgress };
+  const status = describeLoadProgress(progress);
+  const percentage = Math.round(overallProgress * 100);
+  return (
+    <section className="composer-activity" aria-label="Model load progress">
       <div className="activity-status" aria-live="polite" aria-atomic="true">
         <div>
           <span className="activity-pulse" aria-hidden="true" />
+          <span>
+            <strong>{status.label}</strong>
+            <small>{status.detail}</small>
+          </span>
         </div>
+        <b>{formatPercent(overallProgress)}</b>
       </div>
+      <div
+        className="activity-track"
+        role="progressbar"
+        aria-label={`${status.label}: ${status.detail}`}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={percentage}
+      >
+        <span style={{ width: `${percentage}%` }} />
       </div>
     </section>
   );
 }

src/app/components/ConversationList.tsx ADDED Viewed

	@@ -0,0 +1,72 @@

+import type { ChatSession } from '../../lib/contracts';
+import { conversationPreview } from '../../lib/conversations';
+interface ConversationListProps {
+  conversations: ChatSession[];
+  activeConversationId: string;
+  onNewConversation: () => void;
+  onOpenConversation: (conversationId: string) => void;
+  onOpenConversationSettings: (conversationId: string) => void;
+  onDeleteConversation: (conversationId: string) => void;
+}
+export function ConversationList({
+  conversations,
+  activeConversationId,
+  onNewConversation,
+  onOpenConversation,
+  onOpenConversationSettings,
+  onDeleteConversation,
+}: ConversationListProps) {
+  return (
+    <main className="chat-surface conversation-library">
+      <header className="chat-header conversation-list-header">
+        <div>
+          <h2>Chats</h2>
+          <p>Saved only in this browser</p>
+        </div>
+        <button className="new-chat-button" type="button" onClick={onNewConversation}>New chat</button>
+      </header>
+      <section className="conversation-list" aria-label="Saved chats">
+        {conversations.length === 0 ? (
+          <div className="conversation-list-empty">
+            <h3>No saved chats</h3>
+            <p>Your first prompt creates a local session automatically.</p>
+            <button type="button" onClick={onNewConversation}>Start a chat</button>
+          </div>
+        ) : conversations.map((conversation) => (
+          <article className={`conversation-row${conversation.id === activeConversationId ? ' is-current' : ''}`} key={conversation.id}>
+            <button className="conversation-open" type="button" onClick={() => onOpenConversation(conversation.id)}>
+              <span className="conversation-title-line">
+                <strong>{conversation.title}</strong>
+                {conversation.id === activeConversationId && <small>Current</small>}
+              </span>
+              <span>{conversationPreview(conversation.messages)}</span>
+              <small>{conversation.modelId.replace('bonsai-', 'Bonsai ')} · {formatConversationTime(conversation.updatedAt)}</small>
+            </button>
+            <div className="conversation-actions">
+              <button type="button" onClick={() => onOpenConversationSettings(conversation.id)}>Settings</button>
+              <button
+                className="conversation-delete"
+                type="button"
+                aria-label={`Delete chat: ${conversation.title}`}
+                onClick={() => onDeleteConversation(conversation.id)}
+              >
+                Delete
+              </button>
+            </div>
+          </article>
+        ))}
+      </section>
+    </main>
+  );
+}
+function formatConversationTime(timestamp: number): string {
+  return new Intl.DateTimeFormat('en', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(new Date(timestamp));
+}

src/app/components/Header.test.ts ADDED Viewed

	@@ -0,0 +1,11 @@

+import { describe, expect, it } from 'vitest';
+import { isSafariUserAgent } from './Header';
+describe('Safari performance notice routing', () => {
+  it('detects desktop Safari without matching Chromium user agents', () => {
+    expect(isSafariUserAgent('Mozilla/5.0 AppleWebKit/605.1.15 Version/26.5 Safari/605.1.15')).toBe(true);
+    expect(isSafariUserAgent('Mozilla/5.0 AppleWebKit/537.36 Chrome/150.0.0.0 Safari/537.36')).toBe(false);
+    expect(isSafariUserAgent('Mozilla/5.0 AppleWebKit/537.36 HeadlessChrome/150.0.0.0 Safari/537.36')).toBe(false);
+    expect(isSafariUserAgent('Mozilla/5.0 AppleWebKit/537.36 Edg/150.0.0.0 Safari/537.36')).toBe(false);
+  });
+});

src/app/components/Header.tsx CHANGED Viewed

@@ -1,33 +1,79 @@
 interface HeaderProps {
   onOpenSettings: () => void;
   disabled?: boolean;
 }
-export function Header({ onOpenSettings, disabled = false }: HeaderProps) {
   return (
     <header className="station-header">
-      <div className="brand-block" aria-label="Bonsai field station">
-        <span className="brand-mark" aria-hidden="true">
-          <span />
-        </span>
         <div>
-          <p className="eyebrow">Local inference specimen no. 01</p>
-          <h1>Bonsai <i>field station</i></h1>
         </div>
       </div>
-      <div className="local-promise">
-        <span className="signal-dot" aria-hidden="true" />
         <span>
-          <strong>Private by construction</strong>
-          <small>No prompts, tokens, or tools leave this device</small>
         </span>
       </div>
       <div className="header-actions">
-        <div className="station-clock" aria-label="Station coordinates">
-          <small>STATION</small>
-          <span>GPU·LOCAL / 07</span>
         </div>
         <button className="icon-button" type="button" disabled={disabled} onClick={onOpenSettings} aria-label="Open runtime settings">
           <SettingsIcon />
@@ -37,6 +83,18 @@ export function Header({ onOpenSettings, disabled = false }: HeaderProps) {
   );
 }
 function SettingsIcon() {
   return (
     <svg viewBox="0 0 24 24" aria-hidden="true">

+export type ChatWidth = 'centered' | 'wide';
 interface HeaderProps {
   onOpenSettings: () => void;
+  leftSidebarOpen: boolean;
+  rightSidebarOpen: boolean;
+  chatWidth: ChatWidth;
+  onToggleLeftSidebar: () => void;
+  onToggleRightSidebar: () => void;
+  onToggleChatWidth: () => void;
   disabled?: boolean;
 }
+export function isSafariUserAgent(userAgent: string): boolean {
+  return /\bSafari\//.test(userAgent) && !/(?:HeadlessChrome|\bChrome|\bChromium|\bCriOS|\bEdg|\bOPR)\//.test(userAgent);
+}
+export function Header({
+  onOpenSettings,
+  leftSidebarOpen,
+  rightSidebarOpen,
+  chatWidth,
+  onToggleLeftSidebar,
+  onToggleRightSidebar,
+  onToggleChatWidth,
+  disabled = false,
+}: HeaderProps) {
+  const safari = isSafariUserAgent(globalThis.navigator?.userAgent ?? '');
   return (
     <header className="station-header">
+      <div className="brand-block" aria-label="Bonsai local WebGPU chat">
+        <span className="brand-glyph" aria-hidden="true">B</span>
         <div>
+          <h1>Bonsai</h1>
+          <span>Local WebGPU chat</span>
         </div>
       </div>
+      <div className={`browser-notice${safari ? ' is-warning' : ''}`} role={safari ? 'status' : undefined}>
+        <span className="notice-mark" aria-hidden="true" />
         <span>
+          <strong>{safari ? 'Safari compatibility mode' : 'Private local inference'}</strong>
+          <span>{safari ? 'Use Chrome or Edge for substantially faster generation.' : 'Prompts and model output stay in this browser.'}</span>
         </span>
       </div>
       <div className="header-actions">
+        <div className="layout-controls" role="group" aria-label="Workspace layout">
+          <button
+            type="button"
+            aria-label={leftSidebarOpen ? 'Hide model sidebar' : 'Show model sidebar'}
+            aria-pressed={leftSidebarOpen}
+            onClick={onToggleLeftSidebar}
+            title={leftSidebarOpen ? 'Hide models' : 'Show models'}
+          >
+            <PanelLeftIcon />
+          </button>
+          <button
+            type="button"
+            aria-label={chatWidth === 'wide' ? 'Center chat' : 'Use wide chat'}
+            aria-pressed={chatWidth === 'wide'}
+            onClick={onToggleChatWidth}
+            title={chatWidth === 'wide' ? 'Centered chat' : 'Wide chat'}
+          >
+            <WidthIcon />
+          </button>
+          <button
+            type="button"
+            aria-label={rightSidebarOpen ? 'Hide telemetry sidebar' : 'Show telemetry sidebar'}
+            aria-pressed={rightSidebarOpen}
+            onClick={onToggleRightSidebar}
+            title={rightSidebarOpen ? 'Hide telemetry' : 'Show telemetry'}
+          >
+            <PanelRightIcon />
+          </button>
         </div>
         <button className="icon-button" type="button" disabled={disabled} onClick={onOpenSettings} aria-label="Open runtime settings">
           <SettingsIcon />
   );
 }
+function PanelLeftIcon() {
+  return <svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2.5" y="3" width="15" height="14" rx="1.5" /><path d="M7.5 3v14" /></svg>;
+}
+function PanelRightIcon() {
+  return <svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2.5" y="3" width="15" height="14" rx="1.5" /><path d="M12.5 3v14" /></svg>;
+}
+function WidthIcon() {
+  return <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3 6v8M17 6v8M7 10h6M8.5 8.5 7 10l1.5 1.5M11.5 8.5 13 10l-1.5 1.5" /></svg>;
+}
 function SettingsIcon() {
   return (
     <svg viewBox="0 0 24 24" aria-hidden="true">

src/app/components/InspectorPanel.tsx CHANGED Viewed

@@ -1,59 +1,75 @@
 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">
       <section className="inspector-section telemetry-section" aria-labelledby="telemetry-title">
         <div className="section-heading">
-          <span>02</span>
-          <div>
-            <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>
         </div>
         <div className="device-card">
           <span className="device-icon" aria-hidden="true"><i /><i /><i /></span>
           <div>
@@ -63,7 +79,7 @@ export function InspectorPanel({ telemetry, toolEvents, artifact, onCloseArtifac
           <span>{telemetry.gpuLayers}<small>layers</small></span>
         </div>
-        <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>
@@ -72,11 +88,7 @@ export function InspectorPanel({ telemetry, toolEvents, artifact, onCloseArtifac
       <section className="inspector-section tool-log-section" aria-labelledby="tool-log-title">
         <div className="section-heading compact">
-          <span>03</span>
-          <div>
-            <p className="eyebrow">Instrument trace</p>
-            <h2 id="tool-log-title">Tool log</h2>
-          </div>
         </div>
         <ol className="event-log">
           {toolEvents.length === 0 && <li className="event-empty">No tool calls in this session.</li>}
@@ -95,6 +107,33 @@ export function InspectorPanel({ telemetry, toolEvents, artifact, onCloseArtifac
   );
 }
 function Meter({ label, value, detail }: { label: string; value: number; detail: string }) {
   const percentage = Math.round(Math.min(1, Math.max(0, value)) * 100);
   return (

 import type { ArtifactDocument } from '../../lib/agent-tools';
 import type { TelemetrySnapshot, ToolEvent } from '../../lib/contracts';
+import { formatBytes, formatPercent } from '../../lib/format';
 import { ArtifactPane } from './ArtifactPane';
 interface InspectorPanelProps {
+  hidden?: boolean;
   telemetry: TelemetrySnapshot;
   toolEvents: ToolEvent[];
   artifact: ArtifactDocument | null;
   onCloseArtifact: () => void;
 }
+export function InspectorPanel({ hidden = false, telemetry, toolEvents, artifact, onCloseArtifact }: InspectorPanelProps) {
   const contextRatio = telemetry.contextLimit > 0 ? telemetry.contextUsed / telemetry.contextLimit : 0;
+  const prefillRatio = telemetry.promptTotal > 0 ? telemetry.promptProcessed / telemetry.promptTotal : 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'
     : telemetry.inferencePhase === 'decode'
+      ? 'Decode'
+      : 'Average';
+  const samplingLabel = telemetry.inferencePhase === 'idle'
+    ? 'Ready'
+    : telemetry.inferencePhase === 'complete' ? 'Average' : 'Live';
   return (
+    <aside className="inspector" aria-label="Runtime inspector" hidden={hidden}>
       <section className="inspector-section telemetry-section" aria-labelledby="telemetry-title">
         <div className="section-heading">
+          <h2 id="telemetry-title">Telemetry</h2>
+          <span className={`sampling-label phase-${telemetry.inferencePhase}`}>{samplingLabel}</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><span>{gaugeLabel}</span><span>tok/s</span></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>
         </div>
+        <div className="telemetry-live-grid" aria-label="Live inference rates">
+          <TelemetryMetric
+            label="Prefill"
+            value={`${telemetry.prefillTokensPerSecond.toFixed(1)} tok/s`}
+            detail={telemetry.promptTotal > 0
+              ? `${telemetry.promptProcessed.toLocaleString()} / ${telemetry.promptTotal.toLocaleString()} tokens`
+              : 'No prompt yet'}
+            ratio={prefillRatio}
+            active={telemetry.inferencePhase === 'prefill'}
+            progressLabel={telemetry.promptTotal > 0 ? formatPercent(prefillRatio) : 'Waiting'}
+          />
+          <TelemetryMetric
+            label="Decode"
+            value={`${telemetry.decodeTokensPerSecond.toFixed(1)} tok/s`}
+            detail={`${telemetry.completionTokens.toLocaleString()} generated tokens`}
+            ratio={telemetry.decodeTokensPerSecond / 50}
+            active={telemetry.inferencePhase === 'decode'}
+            progressLabel="Rate / 50 tok/s"
+          />
+        </div>
         <div className="device-card">
           <span className="device-icon" aria-hidden="true"><i /><i /><i /></span>
           <div>
           <span>{telemetry.gpuLayers}<small>layers</small></span>
         </div>
+        <Meter label="Context" 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>
       <section className="inspector-section tool-log-section" aria-labelledby="tool-log-title">
         <div className="section-heading compact">
+          <h2 id="tool-log-title">Tool log</h2>
         </div>
         <ol className="event-log">
           {toolEvents.length === 0 && <li className="event-empty">No tool calls in this session.</li>}
   );
 }
+function TelemetryMetric({
+  label,
+  value,
+  detail,
+  ratio,
+  active,
+  progressLabel,
+}: {
+  label: string;
+  value: string;
+  detail: string;
+  ratio: number;
+  active: boolean;
+  progressLabel: string;
+}) {
+  const percentage = Math.round(Math.min(1, Math.max(0, ratio)) * 100);
+  return (
+    <div className={`telemetry-metric${active ? ' is-active' : ''}`}>
+      <div><span>{label}</span><strong>{value}</strong></div>
+      <small>{detail}</small>
+      <div className="telemetry-meter" role="meter" aria-label={`${label}: ${progressLabel}`} aria-valuemin={0} aria-valuemax={100} aria-valuenow={percentage}>
+        <span style={{ width: `${percentage}%` }} />
+      </div>
+    </div>
+  );
+}
 function Meter({ label, value, detail }: { label: string; value: number; detail: string }) {
   const percentage = Math.round(Math.min(1, Math.max(0, value)) * 100);
   return (

src/app/components/ModelRail.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import type { ModelId, ModelOption } from '../../lib/contracts';
 interface ModelRailProps {
   models: ModelOption[];
   activeModelId: ModelId;
   busy: boolean;
@@ -16,23 +17,23 @@ const availabilityLabels: Record<ModelOption['availability'], string> = {
 };
 export function ModelRail({
   models,
   activeModelId,
   busy,
   onModelSelect,
 }: ModelRailProps) {
   return (
-    <aside className="model-rail" aria-labelledby="model-rail-title">
       <div className="rail-heading">
-        <span>01</span>
         <div>
-          <p className="eyebrow">Specimen drawer</p>
-          <h2 id="model-rail-title">Choose canopy</h2>
         </div>
       </div>
       <div className="model-list" role="list" aria-label="Available Bonsai models">
-        {models.map((model, index) => {
           const active = model.id === activeModelId;
           return (
             <article className={`model-card${active ? ' is-active' : ''}`} key={model.id} role="listitem">
@@ -43,7 +44,6 @@ export function ModelRail({
                 onClick={() => onModelSelect(model.id)}
                 aria-pressed={active}
               >
-                <span className="model-index">{String(index + 1).padStart(2, '0')}</span>
                 <span className="model-copy">
                   <span className="model-title-line">
                     <strong>{model.parameters}</strong>
@@ -64,7 +64,7 @@ export function ModelRail({
       <footer className="rail-footnote">
         <span>GGUF · Q1_0</span>
-        <span>Manifest v2 · commit pinned</span>
       </footer>
     </aside>
   );

 import type { ModelId, ModelOption } from '../../lib/contracts';
 interface ModelRailProps {
+  hidden?: boolean;
   models: ModelOption[];
   activeModelId: ModelId;
   busy: boolean;
 };
 export function ModelRail({
+  hidden = false,
   models,
   activeModelId,
   busy,
   onModelSelect,
 }: ModelRailProps) {
   return (
+    <aside className="model-rail" aria-labelledby="model-rail-title" hidden={hidden}>
       <div className="rail-heading">
         <div>
+          <h2 id="model-rail-title">Models</h2>
+          <p>Choose what runs in this browser.</p>
         </div>
       </div>
       <div className="model-list" role="list" aria-label="Available Bonsai models">
+        {models.map((model) => {
           const active = model.id === activeModelId;
           return (
             <article className={`model-card${active ? ' is-active' : ''}`} key={model.id} role="listitem">
                 onClick={() => onModelSelect(model.id)}
                 aria-pressed={active}
               >
                 <span className="model-copy">
                   <span className="model-title-line">
                     <strong>{model.parameters}</strong>
       <footer className="rail-footnote">
         <span>GGUF · Q1_0</span>
+        <span>Commit pinned</span>
       </footer>
     </aside>
   );

src/app/components/SettingsSheet.tsx CHANGED Viewed

@@ -1,8 +1,11 @@
 import { useEffect, useRef } from 'react';
 import type { ModelOption, RuntimeSettings, TelemetrySnapshot } from '../../lib/contracts';
 interface SettingsSheetProps {
   open: boolean;
   activeModel: ModelOption;
   telemetry: TelemetrySnapshot;
   settings: RuntimeSettings;
@@ -15,6 +18,8 @@ interface SettingsSheetProps {
 export function SettingsSheet({
   open,
   activeModel,
   telemetry,
   settings,
@@ -52,15 +57,19 @@ export function SettingsSheet({
     }}>
       <section className="settings-sheet" role="dialog" aria-modal="true" aria-labelledby="settings-title">
         <header>
-          <div>
-            <p className="eyebrow">Instrument calibration</p>
-            <h2 id="settings-title">Runtime settings</h2>
-          </div>
           <button ref={closeButtonRef} className="sheet-close" type="button" onClick={onClose} aria-label="Close settings">×</button>
         </header>
         <label className="setting-group setting-select">
-          <span className="setting-number">01</span>
           <div><small>Compute backend</small><strong>Auto prefers WebGPU</strong></div>
           <select value={settings.backend} onChange={(event) => update('backend', event.target.value as RuntimeSettings['backend'])}>
             <option value="auto">Auto</option>
@@ -69,7 +78,6 @@ export function SettingsSheet({
           </select>
         </label>
         <div className="setting-group">
-          <span className="setting-number">02</span>
           <div><small>Selected specimen</small><strong>{activeModel.label}</strong></div>
           <span className="setting-locked">{activeModel.footprint}</span>
         </div>
@@ -100,7 +108,7 @@ export function SettingsSheet({
         </label>
         <label className="system-prompt-setting">
-          <span><small>System prompt</small><strong>Stored only in this browser</strong></span>
           <textarea rows={5} value={settings.systemPrompt} onChange={(event) => update('systemPrompt', event.target.value.slice(0, 8192))} />
         </label>

 import { useEffect, useRef } from 'react';
 import type { ModelOption, RuntimeSettings, TelemetrySnapshot } from '../../lib/contracts';
+import type { ThemeMode } from '../theme';
 interface SettingsSheetProps {
   open: boolean;
+  themeMode: ThemeMode;
+  onThemeModeChange: (theme: ThemeMode) => void;
   activeModel: ModelOption;
   telemetry: TelemetrySnapshot;
   settings: RuntimeSettings;
 export function SettingsSheet({
   open,
+  themeMode,
+  onThemeModeChange,
   activeModel,
   telemetry,
   settings,
     }}>
       <section className="settings-sheet" role="dialog" aria-modal="true" aria-labelledby="settings-title">
         <header>
+          <h2 id="settings-title">Chat settings</h2>
           <button ref={closeButtonRef} className="sheet-close" type="button" onClick={onClose} aria-label="Close settings">×</button>
         </header>
         <label className="setting-group setting-select">
+          <div><small>Appearance</small><strong>Follow the system or choose a theme</strong></div>
+          <select aria-label="Color theme" value={themeMode} onChange={(event) => onThemeModeChange(event.target.value as ThemeMode)}>
+            <option value="system">System</option>
+            <option value="light">Light</option>
+            <option value="dark">Dark</option>
+          </select>
+        </label>
+        <label className="setting-group setting-select">
           <div><small>Compute backend</small><strong>Auto prefers WebGPU</strong></div>
           <select value={settings.backend} onChange={(event) => update('backend', event.target.value as RuntimeSettings['backend'])}>
             <option value="auto">Auto</option>
           </select>
         </label>
         <div className="setting-group">
           <div><small>Selected specimen</small><strong>{activeModel.label}</strong></div>
           <span className="setting-locked">{activeModel.footprint}</span>
         </div>
         </label>
         <label className="system-prompt-setting">
+          <span><small>System instructions</small><strong>Saved with this chat</strong></span>
           <textarea rows={5} value={settings.systemPrompt} onChange={(event) => update('systemPrompt', event.target.value.slice(0, 8192))} />
         </label>

src/app/styles.css CHANGED Viewed

@@ -1,24 +1,24 @@
 :root {
   color-scheme: dark;
-  --ink: #111512;
-  --ink-raised: #191e1a;
-  --ink-soft: #252b25;
-  --paper: #e8dfca;
-  --paper-deep: #d8cdb4;
-  --paper-ghost: rgba(232, 223, 202, 0.62);
-  --phosphor: #b9ff45;
-  --phosphor-dim: rgba(185, 255, 69, 0.16);
-  --moss: #6f8062;
-  --rust: #c96f43;
-  --line-light: rgba(232, 223, 202, 0.14);
-  --line-dark: rgba(17, 21, 18, 0.18);
-  --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;
@@ -36,10 +36,7 @@ body {
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
-  background:
-    linear-gradient(90deg, rgba(17, 21, 18, 0.06) 1px, transparent 1px) 0 0 / 22px 22px,
-    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);
 }
@@ -72,62 +69,77 @@ button:disabled {
 }
 .station-frame {
   min-height: 100dvh;
   isolation: isolate;
   animation: station-in 580ms cubic-bezier(.16, 1, .3, 1) both;
 }
 .station-frame::before {
-  position: fixed;
-  z-index: 20;
-  inset: 0;
-  pointer-events: none;
-  content: "";
-  opacity: 0.14;
-  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");
-  mix-blend-mode: soft-light;
 }
 .station-header {
-  min-height: 76px;
   display: grid;
-  grid-template-columns: minmax(330px, 1fr) auto minmax(220px, 1fr);
   align-items: stretch;
   background: var(--ink);
-  border-bottom: 1px solid var(--phosphor);
-  box-shadow: 0 12px 38px rgba(17, 21, 18, 0.22);
   position: relative;
   z-index: 10;
 }
 .brand-block {
   display: flex;
-  gap: 14px;
   align-items: center;
-  padding: 12px 24px;
 }
 .brand-block h1 {
   margin: 0;
-  font: 400 clamp(25px, 2vw, 34px) / 0.9 var(--display);
-  letter-spacing: -0.035em;
 }
-.brand-block h1 i {
-  color: var(--phosphor);
-  font-weight: 400;
 }
-.brand-mark {
-  width: 42px;
-  height: 42px;
-  flex: 0 0 42px;
   display: grid;
   place-items: center;
-  border: 1px solid rgba(185, 255, 69, 0.48);
-  border-radius: 50%;
-  background: repeating-radial-gradient(ellipse at 52% 62%, transparent 0 4px, rgba(185, 255, 69, 0.42) 4.5px 5px);
-  transform: rotate(-11deg);
 }
 .brand-mark::before,
@@ -173,49 +185,92 @@ button:disabled {
   color: rgba(17, 21, 18, 0.52);
 }
-.local-promise {
   display: flex;
   align-items: center;
-  gap: 11px;
-  min-width: 360px;
-  padding: 0 28px;
-  border-inline: 1px solid var(--line-light);
-  background: linear-gradient(115deg, rgba(185, 255, 69, 0.08), transparent 66%);
 }
-.signal-dot,
-.live-label i,
-.sampling-label i {
-  display: inline-block;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
   background: var(--phosphor);
-  box-shadow: 0 0 0 5px var(--phosphor-dim), 0 0 17px rgba(185, 255, 69, 0.62);
 }
-.local-promise span:last-child {
   display: grid;
-  gap: 3px;
 }
-.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 {
   justify-self: end;
   display: flex;
   align-items: center;
-  padding-right: 18px;
 }
 .station-clock {
@@ -238,21 +293,11 @@ button:disabled {
 }
 .icon-button {
-  width: 44px;
-  height: 44px;
-  display: grid;
-  place-items: center;
-  border: 1px solid rgba(232, 223, 202, 0.24);
-  border-radius: 50%;
-  background: transparent;
-  cursor: pointer;
-  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
 }
 .icon-button:hover {
-  color: var(--phosphor);
-  border-color: var(--phosphor);
-  transform: rotate(-7deg);
 }
 .icon-button svg {
@@ -263,10 +308,37 @@ button:disabled {
 }
 .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";
 }
 .model-rail,
@@ -282,22 +354,11 @@ button:disabled {
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--line-light);
-  padding: 24px 16px 14px;
-  animation: rise-in 520ms 100ms cubic-bezier(.16, 1, .3, 1) both;
 }
 .model-rail::before {
-  position: absolute;
-  z-index: 0;
-  left: -103px;
-  bottom: 44px;
-  width: 265px;
-  height: 265px;
-  border-radius: 43% 57% 52% 48%;
-  content: "";
-  opacity: 0.18;
-  background: repeating-radial-gradient(ellipse at 51% 47%, transparent 0 7px, var(--moss) 7.5px 8.5px);
-  transform: rotate(18deg);
 }
 .rail-heading,
@@ -305,8 +366,8 @@ button:disabled {
   position: relative;
   z-index: 1;
   display: flex;
-  align-items: flex-start;
-  gap: 11px;
 }
 .rail-heading > span,
@@ -320,8 +381,15 @@ button:disabled {
 .rail-heading h2,
 .section-heading h2 {
   margin: 0;
-  font: 400 26px/1 var(--display);
-  letter-spacing: -0.025em;
 }
 .model-list {
@@ -333,22 +401,22 @@ button:disabled {
 }
 .model-card {
-  border: 1px solid transparent;
   transition: border-color 180ms ease, background 180ms ease;
 }
 .model-card.is-active {
-  border-color: var(--phosphor);
   background: var(--phosphor-dim);
-  box-shadow: inset 3px 0 0 var(--phosphor);
 }
 .model-select {
   width: 100%;
   display: grid;
-  grid-template-columns: 23px 1fr auto;
   gap: 8px;
-  min-height: 76px;
   padding: 13px 9px 12px;
   text-align: left;
   color: var(--paper);
@@ -358,7 +426,7 @@ button:disabled {
 }
 .model-card:not(.is-active) .model-select:hover {
-  background: rgba(232, 223, 202, 0.055);
 }
 .model-index {
@@ -381,7 +449,7 @@ button:disabled {
 }
 .model-title-line strong {
-  font: 500 24px/1 var(--display);
 }
 .model-copy em {
@@ -401,8 +469,7 @@ button:disabled {
 .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);
 }
@@ -428,7 +495,7 @@ button:disabled {
 .model-limit-reason {
   display: block;
-  margin: -4px 8px 9px 30px;
   color: rgba(232, 223, 202, 0.58);
   font: var(--type-utility)/1.35 var(--mono);
 }
@@ -448,17 +515,13 @@ button:disabled {
 .chat-surface {
   grid-area: chat;
   min-width: 0;
-  min-height: calc(100dvh - 76px);
-  height: calc(100dvh - 76px);
   display: grid;
-  grid-template-rows: auto 19px minmax(0, 1fr) auto;
   overflow: hidden;
-  color: var(--ink);
-  background:
-    radial-gradient(ellipse at 82% 16%, transparent 0 77px, rgba(17, 21, 18, 0.055) 78px 79px, transparent 80px 89px, rgba(17, 21, 18, 0.045) 90px 91px, transparent 92px),
-    linear-gradient(100deg, transparent 0 67%, rgba(17, 21, 18, 0.025) 67.2% 67.35%, transparent 67.5%),
-    var(--paper);
-  animation: rise-in 560ms 160ms cubic-bezier(.16, 1, .3, 1) both;
   position: relative;
 }
@@ -467,22 +530,64 @@ button:disabled {
   align-items: center;
   justify-content: space-between;
   gap: 20px;
-  min-height: 82px;
-  padding: 17px clamp(21px, 3vw, 44px) 13px;
-  border-bottom: 1px solid var(--line-dark);
 }
 .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 {
@@ -491,8 +596,7 @@ button:disabled {
   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 {
@@ -501,14 +605,14 @@ button:disabled {
   display: flex;
   align-items: center;
   gap: 7px;
-  color: #3d551d;
 }
 .live-label i {
   width: 5px;
   height: 5px;
-  box-shadow: 0 0 0 3px rgba(90, 120, 43, 0.13);
-  background: #5d7e2e;
 }
 .live-label.is-dormant {
@@ -517,7 +621,7 @@ button:disabled {
 .live-label.is-dormant i {
   background: rgba(17, 21, 18, 0.36);
-  box-shadow: 0 0 0 3px rgba(17, 21, 18, 0.09);
 }
 .runtime-error {
@@ -599,16 +703,12 @@ button:disabled {
   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-date::before,
 .transcript-date::after {
-  content: "";
-  height: 1px;
-  flex: 1;
-  background: rgba(17, 21, 18, 0.14);
 }
 .transcript-empty {
@@ -618,16 +718,10 @@ button:disabled {
   color: rgba(17, 21, 18, 0.5);
 }
-.transcript-empty > span {
-  display: block;
-  color: #507324;
-  font: 42px/1 var(--display);
-}
 .transcript-empty h3 {
-  margin: 8px 0 6px;
   color: var(--ink);
-  font: 400 25px/1 var(--display);
 }
 .transcript-empty p {
@@ -636,10 +730,159 @@ button:disabled {
   line-height: 1.5;
 }
 .message {
-  max-width: 690px;
   margin-bottom: 25px;
-  animation: note-in 430ms cubic-bezier(.16, 1, .3, 1) both;
 }
 .message > header {
@@ -649,8 +892,7 @@ button:disabled {
   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 > header strong {
@@ -747,16 +989,15 @@ button:disabled {
   margin: 0 0 11px;
   padding: 8px 10px;
   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;
 }
@@ -782,14 +1023,14 @@ button:disabled {
 .message-assistant {
   padding-left: 22px;
-  border-left: 2px solid var(--ink);
 }
 .message-assistant .message-content > p::first-letter {
-  float: left;
-  margin: 1px 6px 0 0;
-  color: #38511d;
-  font: 42px/0.75 var(--display);
 }
 .message-user {
@@ -798,8 +1039,7 @@ button:disabled {
   padding: 12px 15px 13px;
   color: var(--paper);
   background: var(--ink);
-  box-shadow: 5px 5px 0 rgba(17, 21, 18, 0.12);
-  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
 }
 .message-user > header,
@@ -817,7 +1057,7 @@ button:disabled {
   margin-top: 9px;
   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);
 }
@@ -885,287 +1125,107 @@ button:disabled {
   background: var(--rust);
 }
-.tool-call > div {
-  padding: 9px 10px;
-  border-top: 1px solid rgba(17, 21, 18, 0.13);
-}
-.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);
-  backdrop-filter: blur(9px);
-}
-.composer::before {
-  position: absolute;
-  top: -5px;
-  right: 0;
-  left: 0;
-  height: 5px;
-  content: "";
-  background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 12px);
-  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 {
@@ -1189,7 +1249,6 @@ button:disabled {
   border: 0;
   background: transparent;
   font: 700 var(--type-utility)/1 var(--mono);
-  text-transform: uppercase;
   cursor: pointer;
 }
@@ -1205,7 +1264,6 @@ button:disabled {
   border: 0;
   background: transparent;
   font: 700 var(--type-utility)/1 var(--mono);
-  text-transform: uppercase;
   cursor: pointer;
 }
@@ -1226,9 +1284,10 @@ button:disabled {
   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);
 }
 .composer-field label {
@@ -1237,15 +1296,14 @@ button:disabled {
   left: 11px;
   color: rgba(17, 21, 18, 0.45);
   font: var(--type-utility)/1 var(--mono);
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
 }
 .composer-field textarea {
   min-width: 0;
   resize: none;
   padding: 23px 13px 9px;
-  color: var(--ink);
   border: 0;
   outline: none;
   background: transparent;
@@ -1266,16 +1324,15 @@ button:disabled {
   margin: 7px;
   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;
 }
 .send-button:hover:not(:disabled) {
-  transform: translate(-2px, -2px);
-  box-shadow: 3px 3px 0 var(--ink);
 }
 .send-button:disabled {
@@ -1304,14 +1361,121 @@ button:disabled {
   background: var(--phosphor);
 }
 .inspector {
   grid-area: inspector;
-  min-height: calc(100dvh - 76px);
-  height: calc(100dvh - 76px);
   overflow-y: auto;
   border-left: 1px solid var(--line-light);
   scrollbar-color: rgba(232, 223, 202, 0.18) transparent;
-  animation: rise-in 570ms 220ms cubic-bezier(.16, 1, .3, 1) both;
 }
 .inspector-section {
@@ -1322,6 +1486,7 @@ button:disabled {
 .section-heading {
   align-items: center;
   margin-bottom: 17px;
 }
 .section-heading.compact {
@@ -1333,22 +1498,21 @@ button:disabled {
 }
 .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;
 }
-.sampling-label i {
-  width: 4px;
-  height: 4px;
 }
 .speed-gauge {
@@ -1363,21 +1527,15 @@ button:disabled {
   height: 116px;
   display: grid;
   place-items: center;
-  border-radius: 49% 51% 47% 53%;
   background:
-    radial-gradient(circle, var(--ink) 0 51%, transparent 52%),
-    conic-gradient(var(--phosphor) 0 var(--gauge), rgba(232, 223, 202, 0.11) var(--gauge) 100%);
-  transform: rotate(-9deg);
-  box-shadow: inset 0 0 0 1px rgba(232, 223, 202, 0.1), 0 0 30px rgba(185, 255, 69, 0.055);
 }
 .gauge-ring::after {
-  position: absolute;
-  width: 128px;
-  height: 128px;
-  border: 1px dashed rgba(232, 223, 202, 0.13);
-  border-radius: 45% 55% 52% 48%;
-  content: "";
 }
 .gauge-ring > div {
@@ -1385,21 +1543,30 @@ button:disabled {
   z-index: 1;
   display: grid;
   justify-items: center;
-  transform: rotate(9deg);
 }
 .gauge-ring strong {
   color: var(--phosphor);
-  font: 400 29px/1 var(--display);
 }
 .gauge-ring small {
   margin-top: 3px;
   color: var(--paper-ghost);
-  font: var(--type-utility)/1 var(--mono);
   text-transform: uppercase;
 }
 .speed-gauge dl {
   margin: 0;
 }
@@ -1421,6 +1588,65 @@ button:disabled {
   color: var(--paper);
 }
 .device-card {
   display: grid;
   grid-template-columns: auto 1fr auto;
@@ -1428,8 +1654,9 @@ button:disabled {
   gap: 10px;
   margin: 19px 0 14px;
   padding: 10px;
-  border: 1px solid rgba(185, 255, 69, 0.23);
-  background: linear-gradient(90deg, rgba(185, 255, 69, 0.08), transparent);
 }
 .device-icon {
@@ -1501,7 +1728,7 @@ button:disabled {
 .meter-track > span {
   display: block;
   height: 100%;
-  background: repeating-linear-gradient(90deg, var(--phosphor) 0 5px, transparent 5px 7px);
 }
 .memory-grid {
@@ -1586,15 +1813,15 @@ button:disabled {
   width: 25px;
   height: 25px;
   border: 1px solid var(--line-light);
-  border-radius: 50%;
   background: transparent;
   cursor: pointer;
 }
 .artifact-empty {
   margin: 0;
-  color: rgba(232, 223, 202, 0.4);
-  font: var(--type-utility)/1.5 var(--mono);
 }
 .artifact-pane {
@@ -1711,7 +1938,6 @@ button:disabled {
   display: flex;
   justify-content: flex-end;
   background: rgba(8, 11, 9, 0.64);
-  backdrop-filter: blur(4px);
   animation: station-in 160ms ease both;
 }
@@ -1722,9 +1948,7 @@ button:disabled {
   padding: 30px 27px;
   color: var(--paper);
   border-left: 1px solid var(--phosphor);
-  background:
-    repeating-radial-gradient(ellipse at 104% 101%, transparent 0 13px, rgba(185, 255, 69, 0.055) 13.5px 14.5px),
-    var(--ink);
   box-shadow: -24px 0 70px rgba(0, 0, 0, 0.32);
   animation: sheet-in 300ms cubic-bezier(.16, 1, .3, 1) both;
 }
@@ -1761,18 +1985,13 @@ button:disabled {
 .setting-group {
   display: grid;
-  grid-template-columns: 24px 1fr auto;
   align-items: center;
   gap: 12px;
   padding: 15px 0;
   border-bottom: 1px solid var(--line-light);
 }
-.setting-number {
-  color: var(--phosphor);
-  font: var(--type-utility)/1 var(--mono);
-}
 .setting-group > div,
 .range-setting > span:first-child {
   display: grid;
@@ -2012,28 +2231,37 @@ button:disabled {
 @media (max-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 {
-    min-height: calc(100dvh - 76px);
-    height: calc(100dvh - 76px);
   }
   .inspector {
@@ -2042,7 +2270,7 @@ button:disabled {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     overflow: visible;
-    border-top: 1px solid var(--phosphor);
     border-left: 0;
   }
@@ -2054,36 +2282,37 @@ button:disabled {
 @media (max-width: 820px) {
   .station-header {
-    display: block;
-    min-height: 70px;
   }
   .brand-block {
-    padding: 11px 15px;
-    padding-right: 70px;
   }
-  .brand-mark {
-    width: 36px;
-    height: 36px;
-    flex-basis: 36px;
   }
-  .local-promise {
-    min-height: 31px;
-    padding: 0 16px;
-    border: 0;
     border-top: 1px solid var(--line-light);
   }
   .header-actions {
-    position: absolute;
-    top: 10px;
-    right: 0;
-  }
-  .station-clock {
-    display: none;
   }
   .workspace-grid {
@@ -2101,7 +2330,7 @@ button:disabled {
     display: block;
     padding: 18px 15px;
     border-right: 0;
-    border-bottom: 1px solid var(--phosphor);
   }
   .model-list {
@@ -2123,7 +2352,9 @@ button:disabled {
   .chat-surface {
     display: grid;
-    grid-template-rows: auto 19px minmax(240px, auto) auto;
     overflow: visible;
   }
@@ -2156,7 +2387,7 @@ button:disabled {
   .inspector {
     display: block;
-    border-top: 1px solid var(--phosphor);
   }
   .inspector-section {
@@ -2167,12 +2398,21 @@ button:disabled {
 @media (max-width: 520px) {
   .brand-block h1 {
-    font-size: 24px;
   }
-  .brand-block .eyebrow,
-  .local-promise strong {
-    font-size: var(--type-utility);
   }
   .chat-header {
@@ -2180,8 +2420,7 @@ button:disabled {
   }
   .botanical-subtitle {
-    display: block;
-    margin: 4px 0 0;
   }
   .message-user {
@@ -2193,38 +2432,11 @@ button:disabled {
   }
   .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 {
@@ -2249,8 +2461,11 @@ button:disabled {
   }
   .gauge-ring::after {
-    width: 113px;
-    height: 113px;
   }
 }

 :root {
   color-scheme: dark;
+  --ink: #141613;
+  --ink-raised: #1b1e1a;
+  --ink-soft: #252921;
+  --paper: #f1f2ed;
+  --paper-deep: #e4e6df;
+  --paper-ghost: rgba(241, 242, 237, 0.64);
+  --phosphor: #a8d574;
+  --phosphor-dim: rgba(168, 213, 116, 0.14);
+  --moss: #738066;
+  --rust: #c27a56;
+  --line-light: rgba(241, 242, 237, 0.13);
+  --line-dark: rgba(20, 22, 19, 0.15);
+  --display: "Avenir Next", "Helvetica Neue", ui-sans-serif, sans-serif;
+  --body: "Avenir Next", "Helvetica Neue", ui-sans-serif, sans-serif;
   --mono: "Berkeley Mono", Iosevka, "SFMono-Regular", Consolas, monospace;
+  --type-utility: clamp(0.75rem, 0.12vw + 0.72rem, 0.8125rem);
+  --type-caption: clamp(0.8125rem, 0.15vw + 0.77rem, 0.9375rem);
+  --type-body: clamp(1.0625rem, 0.18vw + 1.02rem, 1.1875rem);
+  --type-heading: clamp(1.55rem, 0.85vw + 1.35rem, 2.15rem);
   font-family: var(--body);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
+  background: var(--ink);
   color: var(--paper);
   font-size: var(--type-body);
 }
 }
 .station-frame {
+  --canvas-bg: #f1f2ed;
+  --canvas-raised: #e4e6df;
+  --canvas-field: #f8f9f5;
+  --canvas-text: #141613;
+  --canvas-muted: rgba(20, 22, 19, 0.52);
+  --canvas-line: rgba(20, 22, 19, 0.15);
   min-height: 100dvh;
+  color-scheme: light;
   isolation: isolate;
   animation: station-in 580ms cubic-bezier(.16, 1, .3, 1) both;
 }
+.station-frame[data-theme="dark"] {
+  --canvas-bg: #1a1c18;
+  --canvas-raised: #20231f;
+  --canvas-field: #252823;
+  --canvas-text: #edf0e8;
+  --canvas-muted: rgba(237, 240, 232, 0.58);
+  --canvas-line: rgba(237, 240, 232, 0.13);
+  color-scheme: dark;
+}
 .station-frame::before {
+  display: none;
 }
 .station-header {
+  min-height: 64px;
   display: grid;
+  grid-template-columns: 260px minmax(320px, 1fr) auto;
   align-items: stretch;
   background: var(--ink);
+  border-bottom: 1px solid var(--line-light);
   position: relative;
   z-index: 10;
 }
 .brand-block {
   display: flex;
+  gap: 10px;
   align-items: center;
+  padding: 10px 18px;
+  border-right: 1px solid var(--line-light);
 }
 .brand-block h1 {
   margin: 0;
+  font: 650 20px/1.1 var(--display);
+  letter-spacing: -0.02em;
 }
+.brand-block > div {
+  display: grid;
+  gap: 2px;
 }
+.brand-block > div > span {
+  color: var(--paper-ghost);
+  font-size: var(--type-caption);
+}
+.brand-glyph {
+  width: 34px;
+  height: 34px;
+  flex: 0 0 34px;
   display: grid;
   place-items: center;
+  color: var(--phosphor);
+  border: 1px solid rgba(168, 213, 116, 0.42);
+  border-radius: 8px;
+  font: 650 16px/1 var(--mono);
 }
 .brand-mark::before,
   color: rgba(17, 21, 18, 0.52);
 }
+.browser-notice {
   display: flex;
   align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 0 20px;
 }
+.notice-mark {
+  width: 6px;
+  height: 6px;
+  flex: 0 0 6px;
+  border-radius: 2px;
   background: var(--phosphor);
 }
+.browser-notice > span:last-child {
   display: grid;
+  gap: 2px;
 }
+.browser-notice strong {
+  color: var(--paper);
+  font: 600 var(--type-caption)/1.2 var(--body);
 }
+.browser-notice > span > span {
   color: var(--paper-ghost);
   font: var(--type-caption)/1.25 var(--body);
 }
+.browser-notice.is-warning .notice-mark {
+  background: var(--rust);
+}
+.browser-notice.is-warning strong {
+  color: #efb08f;
+}
 .header-actions {
   justify-self: end;
   display: flex;
   align-items: center;
+  gap: 10px;
+  padding: 0 14px;
+  border-left: 1px solid var(--line-light);
+}
+.layout-controls {
+  display: flex;
+  gap: 4px;
+}
+.layout-controls button,
+.icon-button {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  color: var(--paper-ghost);
+  border: 1px solid var(--line-light);
+  border-radius: 7px;
+  background: transparent;
+  cursor: pointer;
+  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
+}
+.layout-controls button:hover,
+.icon-button:hover {
+  color: var(--paper);
+  border-color: rgba(241, 242, 237, 0.3);
+  background: rgba(241, 242, 237, 0.05);
+}
+.layout-controls button[aria-pressed="true"] {
+  color: var(--phosphor);
+  border-color: rgba(168, 213, 116, 0.34);
+  background: var(--phosphor-dim);
+}
+.layout-controls svg,
+.icon-button svg {
+  width: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.4;
 }
 .station-clock {
 }
 .icon-button {
+  flex: 0 0 36px;
 }
 .icon-button:hover {
+  color: var(--paper);
 }
 .icon-button svg {
 }
 .workspace-grid {
+  min-height: calc(100dvh - 64px);
   display: grid;
+  grid-template-columns: 260px minmax(0, 1fr) 340px;
   grid-template-areas: "models chat inspector";
+  background: #10120f;
+}
+.workspace-grid.is-models-collapsed {
+  grid-template-columns: 0 minmax(0, 1fr) 340px;
+}
+.workspace-grid.is-inspector-collapsed {
+  grid-template-columns: 260px minmax(0, 1fr) 0;
+}
+.workspace-grid.is-models-collapsed.is-inspector-collapsed {
+  grid-template-columns: 0 minmax(0, 1fr) 0;
+}
+.workspace-grid.layout-centered .chat-surface {
+  width: min(100%, 1120px);
+  justify-self: center;
+}
+.workspace-grid.layout-wide .chat-surface {
+  width: 100%;
+}
+.model-rail[hidden],
+.inspector[hidden] {
+  display: none !important;
 }
 .model-rail,
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--line-light);
+  padding: 20px 14px 14px;
 }
 .model-rail::before {
+  display: none;
 }
 .rail-heading,
   position: relative;
   z-index: 1;
   display: flex;
+  align-items: center;
+  gap: 10px;
 }
 .rail-heading > span,
 .rail-heading h2,
 .section-heading h2 {
   margin: 0;
+  font: 600 20px/1.2 var(--display);
+  letter-spacing: -0.015em;
+}
+.rail-heading p {
+  margin: 4px 0 0;
+  color: var(--paper-ghost);
+  font-size: var(--type-caption);
+  line-height: 1.35;
 }
 .model-list {
 }
 .model-card {
+  border: 1px solid var(--line-light);
+  border-radius: 8px;
   transition: border-color 180ms ease, background 180ms ease;
 }
 .model-card.is-active {
+  border-color: rgba(168, 213, 116, 0.58);
   background: var(--phosphor-dim);
 }
 .model-select {
   width: 100%;
   display: grid;
+  grid-template-columns: 1fr auto;
   gap: 8px;
+  min-height: 72px;
   padding: 13px 9px 12px;
   text-align: left;
   color: var(--paper);
 }
 .model-card:not(.is-active) .model-select:hover {
+  background: rgba(241, 242, 237, 0.045);
 }
 .model-index {
 }
 .model-title-line strong {
+  font: 600 20px/1 var(--display);
 }
 .model-copy em {
 .availability {
   padding: 2px 4px;
   font: 600 var(--type-utility)/1 var(--mono);
+  letter-spacing: 0;
   border: 1px solid var(--line-light);
 }
 .model-limit-reason {
   display: block;
+  margin: -4px 8px 9px;
   color: rgba(232, 223, 202, 0.58);
   font: var(--type-utility)/1.35 var(--mono);
 }
 .chat-surface {
   grid-area: chat;
   min-width: 0;
+  min-height: calc(100dvh - 64px);
+  height: calc(100dvh - 64px);
   display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
   overflow: hidden;
+  color: var(--canvas-text);
+  background: var(--canvas-bg);
   position: relative;
 }
   align-items: center;
   justify-content: space-between;
   gap: 20px;
+  min-height: 72px;
+  padding: 14px clamp(20px, 3vw, 40px);
+  border-bottom: 1px solid var(--canvas-line);
 }
 .chat-header h2 {
   display: inline;
   margin: 0;
+  font: 650 var(--type-heading)/1.1 var(--display);
+  letter-spacing: -0.025em;
+}
+.chat-header-main {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.chat-list-button,
+.chat-settings-button {
+  min-height: 36px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0 9px;
+  color: var(--canvas-muted);
+  border: 1px solid var(--canvas-line);
+  border-radius: 7px;
+  background: transparent;
+  font: 600 var(--type-utility)/1 var(--body);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.chat-list-button:hover,
+.chat-settings-button:hover {
+  color: var(--canvas-text);
+  border-color: var(--canvas-muted);
+}
+.chat-list-button svg {
+  width: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+}
+.chat-title {
+  min-width: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
 }
 .botanical-subtitle {
   color: rgba(17, 21, 18, 0.46);
+  font: var(--type-caption)/1 var(--body);
 }
 .chat-header-meta {
   gap: 5px 13px;
   color: rgba(17, 21, 18, 0.55);
   font: var(--type-utility)/1.2 var(--mono);
+  letter-spacing: 0;
 }
 .live-label {
   display: flex;
   align-items: center;
   gap: 7px;
+  color: #46622f;
 }
 .live-label i {
   width: 5px;
   height: 5px;
+  box-shadow: none;
+  background: #668a45;
 }
 .live-label.is-dormant {
 .live-label.is-dormant i {
   background: rgba(17, 21, 18, 0.36);
+  box-shadow: none;
 }
 .runtime-error {
   margin-bottom: 22px;
   color: rgba(17, 21, 18, 0.45);
   font: var(--type-utility)/1 var(--mono);
+  letter-spacing: 0;
 }
 .transcript-date::before,
 .transcript-date::after {
+  display: none;
 }
 .transcript-empty {
   color: rgba(17, 21, 18, 0.5);
 }
 .transcript-empty h3 {
+  margin: 0 0 8px;
   color: var(--ink);
+  font: 650 22px/1.2 var(--display);
 }
 .transcript-empty p {
   line-height: 1.5;
 }
+.system-instructions-button,
+.conversation-list-empty button,
+.new-chat-button {
+  min-height: 42px;
+  padding: 0 13px;
+  color: var(--ink);
+  border: 1px solid var(--ink);
+  border-radius: 7px;
+  background: var(--phosphor);
+  font: 650 var(--type-caption)/1 var(--body);
+  cursor: pointer;
+}
+.system-instructions-button {
+  margin-top: 18px;
+}
+.conversation-library {
+  grid-template-rows: auto minmax(0, 1fr);
+}
+.conversation-list-header > div {
+  display: grid;
+  gap: 4px;
+}
+.conversation-list-header p {
+  margin: 0;
+  color: var(--canvas-muted);
+  font-size: var(--type-caption);
+}
+.conversation-list {
+  min-height: 0;
+  overflow-y: auto;
+  padding: clamp(20px, 4vw, 48px);
+  scrollbar-color: var(--canvas-muted) transparent;
+}
+.conversation-row {
+  max-width: 850px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: stretch;
+  margin: 0 auto 9px;
+  border: 1px solid var(--canvas-line);
+  border-radius: 9px;
+  background: var(--canvas-field);
+}
+.conversation-row.is-current {
+  border-color: rgba(115, 128, 102, 0.72);
+}
+.conversation-open {
+  min-width: 0;
+  display: grid;
+  gap: 6px;
+  padding: 15px 16px;
+  color: var(--canvas-text);
+  border: 0;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+.conversation-title-line {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+.conversation-title-line strong {
+  overflow: hidden;
+  font: 650 var(--type-body)/1.2 var(--display);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.conversation-title-line small {
+  flex: 0 0 auto;
+  color: #52712f;
+  font: 600 var(--type-utility)/1 var(--body);
+}
+.conversation-open > span:nth-child(2) {
+  overflow: hidden;
+  color: var(--canvas-muted);
+  font-size: var(--type-caption);
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.conversation-open > small {
+  color: var(--canvas-muted);
+  font: var(--type-utility)/1.2 var(--mono);
+}
+.conversation-actions {
+  display: grid;
+  align-content: center;
+  gap: 4px;
+  padding: 7px;
+  border-left: 1px solid var(--canvas-line);
+}
+.conversation-actions button {
+  min-height: 34px;
+  padding: 0 8px;
+  color: var(--canvas-muted);
+  border: 0;
+  background: transparent;
+  font: 600 var(--type-utility)/1 var(--body);
+  cursor: pointer;
+}
+.conversation-actions button:hover {
+  color: var(--canvas-text);
+}
+.conversation-actions .conversation-delete {
+  color: var(--rust);
+}
+.conversation-list-empty {
+  max-width: 430px;
+  display: grid;
+  justify-items: center;
+  gap: 10px;
+  margin: 15vh auto 0;
+  color: var(--canvas-muted);
+  text-align: center;
+}
+.conversation-list-empty h3,
+.conversation-list-empty p {
+  margin: 0;
+}
+.conversation-list-empty h3 {
+  color: var(--canvas-text);
+  font: 650 22px/1.2 var(--display);
+}
+.conversation-list-empty button {
+  margin-top: 8px;
+}
 .message {
+  max-width: 760px;
   margin-bottom: 25px;
 }
 .message > header {
   margin-bottom: 8px;
   color: rgba(17, 21, 18, 0.47);
   font: var(--type-utility)/1.2 var(--mono);
+  letter-spacing: 0;
 }
 .message > header strong {
   margin: 0 0 11px;
   padding: 8px 10px;
   color: rgba(17, 21, 18, 0.62);
+  border: 1px solid rgba(17, 21, 18, 0.16);
+  border-radius: 8px;
+  background: rgba(17, 21, 18, 0.03);
   font-size: var(--type-caption);
 }
 .reasoning-block summary {
   color: #4d6728;
+  font: 600 var(--type-caption)/1.2 var(--body);
   cursor: pointer;
 }
 .message-assistant {
   padding-left: 22px;
+  border-left: 2px solid rgba(84, 111, 60, 0.45);
 }
 .message-assistant .message-content > p::first-letter {
+  float: none;
+  margin: 0;
+  color: inherit;
+  font: inherit;
 }
 .message-user {
   padding: 12px 15px 13px;
   color: var(--paper);
   background: var(--ink);
+  border-radius: 10px;
 }
 .message-user > header,
   margin-top: 9px;
   padding-top: 7px;
   color: rgba(17, 21, 18, 0.43);
+  border-top: 1px solid rgba(17, 21, 18, 0.13);
   font: var(--type-utility)/1.2 var(--mono);
 }
   background: var(--rust);
 }
+.tool-call > div {
+  padding: 9px 10px;
+  border-top: 1px solid rgba(17, 21, 18, 0.13);
 }
+.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(--canvas-line);
+  background: var(--canvas-raised);
 }
+.composer::before {
+  display: none;
 }
+.composer-activity {
   display: grid;
+  gap: 10px;
+  margin-bottom: 12px;
+  padding: 12px 14px;
+  color: var(--paper);
+  border: 1px solid rgba(20, 22, 19, 0.9);
+  border-radius: 8px;
+  background: var(--ink);
 }
+.activity-status,
+.activity-status > div {
   display: flex;
   align-items: center;
 }
+.activity-status {
+  min-width: 0;
+  justify-content: space-between;
+  gap: 12px;
+  font: var(--type-caption)/1.2 var(--body);
 }
+.activity-status > div {
   min-width: 0;
+  gap: 10px;
 }
+.activity-status > div > span:last-child {
+  min-width: 0;
+  display: grid;
+  gap: 3px;
 }
+.activity-status strong,
+.activity-status small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
+.activity-status strong {
   color: var(--paper);
   font-weight: 600;
 }
+.activity-status small {
+  color: var(--paper-ghost);
+  font-size: var(--type-utility);
+}
+.activity-status > b {
+  flex: 0 0 auto;
+  color: var(--phosphor);
+  font: 600 var(--type-caption)/1 var(--mono);
+}
+.activity-pulse {
+  width: 5px;
+  height: 22px;
+  flex: 0 0 5px;
+  border-radius: 2px;
+  background: var(--phosphor);
+}
+.activity-track {
+  height: 6px;
   overflow: hidden;
+  border-radius: 3px;
+  background: rgba(241, 242, 237, 0.12);
+}
+.activity-track > span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--phosphor);
+  transition: width 120ms linear;
 }
 .composer-meta {
   border: 0;
   background: transparent;
   font: 700 var(--type-utility)/1 var(--mono);
   cursor: pointer;
 }
   border: 0;
   background: transparent;
   font: 700 var(--type-utility)/1 var(--mono);
   cursor: pointer;
 }
   grid-template-columns: 1fr auto;
   position: relative;
   min-height: 84px;
+  border: 1px solid var(--canvas-text);
+  border-radius: 10px;
+  background: var(--canvas-field);
+  overflow: hidden;
 }
 .composer-field label {
   left: 11px;
   color: rgba(17, 21, 18, 0.45);
   font: var(--type-utility)/1 var(--mono);
+  letter-spacing: 0;
 }
 .composer-field textarea {
   min-width: 0;
   resize: none;
   padding: 23px 13px 9px;
+  color: var(--canvas-text);
   border: 0;
   outline: none;
   background: transparent;
   margin: 7px;
   color: var(--ink);
   border: 1px solid var(--ink);
+  border-radius: 8px;
   background: var(--phosphor);
   font: 700 var(--type-caption)/1 var(--mono);
   cursor: pointer;
+  transition: background 150ms ease, opacity 150ms ease;
 }
 .send-button:hover:not(:disabled) {
+  background: #b6df87;
 }
 .send-button:disabled {
   background: var(--phosphor);
 }
+.station-frame[data-theme="dark"] .botanical-subtitle,
+.station-frame[data-theme="dark"] .chat-header-meta,
+.station-frame[data-theme="dark"] .transcript-date,
+.station-frame[data-theme="dark"] .transcript-empty,
+.station-frame[data-theme="dark"] .message > header,
+.station-frame[data-theme="dark"] .message > footer,
+.station-frame[data-theme="dark"] .composer-meta,
+.station-frame[data-theme="dark"] .tool-toggle,
+.station-frame[data-theme="dark"] .regenerate-button,
+.station-frame[data-theme="dark"] .composer-field label {
+  color: var(--canvas-muted);
+}
+.station-frame[data-theme="dark"] .transcript-empty h3,
+.station-frame[data-theme="dark"] .message > header strong {
+  color: var(--canvas-text);
+}
+.station-frame[data-theme="dark"] .live-label {
+  color: #a8d574;
+}
+.station-frame[data-theme="dark"] .conversation-title-line small {
+  color: var(--phosphor);
+}
+.station-frame[data-theme="dark"] .live-label.is-dormant {
+  color: var(--canvas-muted);
+}
+.station-frame[data-theme="dark"] .live-label.is-dormant i {
+  background: var(--canvas-muted);
+}
+.station-frame[data-theme="dark"] .transcript {
+  scrollbar-color: rgba(237, 240, 232, 0.24) transparent;
+}
+.station-frame[data-theme="dark"] .markdown-content blockquote,
+.station-frame[data-theme="dark"] .reasoning-block,
+.station-frame[data-theme="dark"] .tool-call > div p {
+  color: rgba(237, 240, 232, 0.7);
+}
+.station-frame[data-theme="dark"] .markdown-content code {
+  background: rgba(237, 240, 232, 0.09);
+}
+.station-frame[data-theme="dark"] .markdown-content pre {
+  color: var(--paper);
+  background: #0f110e;
+}
+.station-frame[data-theme="dark"] .markdown-content a,
+.station-frame[data-theme="dark"] .reasoning-block summary {
+  color: var(--phosphor);
+}
+.station-frame[data-theme="dark"] .reasoning-block,
+.station-frame[data-theme="dark"] .tool-call {
+  border-color: var(--canvas-line);
+  background: rgba(237, 240, 232, 0.035);
+}
+.station-frame[data-theme="dark"] .generation-placeholder,
+.station-frame[data-theme="dark"] .tool-call summary > span:last-child,
+.station-frame[data-theme="dark"] .composer-field textarea::placeholder {
+  color: rgba(237, 240, 232, 0.4);
+}
+.station-frame[data-theme="dark"] .message-assistant {
+  border-left-color: rgba(168, 213, 116, 0.44);
+}
+.station-frame[data-theme="dark"] .message-user {
+  color: var(--canvas-text);
+  border: 1px solid var(--canvas-line);
+  background: #11130f;
+}
+.station-frame[data-theme="dark"] .message > footer,
+.station-frame[data-theme="dark"] .tool-call > div {
+  border-color: var(--canvas-line);
+}
+.station-frame[data-theme="dark"] .tool-toggle.is-on {
+  color: var(--phosphor);
+}
+.station-frame[data-theme="dark"] .composer-field textarea {
+  color: var(--canvas-text);
+}
+.station-frame[data-theme="dark"] .composer-field {
+  border-color: rgba(237, 240, 232, 0.3);
+}
+.station-frame[data-theme="dark"] .send-button {
+  color: var(--ink);
+  border-color: #0f110e;
+}
+.station-frame[data-theme="dark"] .send-button.stop {
+  color: var(--canvas-text);
+  border-color: var(--canvas-line);
+  background: #11130f;
+}
 .inspector {
   grid-area: inspector;
+  min-height: calc(100dvh - 64px);
+  height: calc(100dvh - 64px);
   overflow-y: auto;
   border-left: 1px solid var(--line-light);
   scrollbar-color: rgba(232, 223, 202, 0.18) transparent;
 }
 .inspector-section {
 .section-heading {
   align-items: center;
   margin-bottom: 17px;
+  justify-content: space-between;
 }
 .section-heading.compact {
 }
 .section-heading h2 {
+  font-size: 20px;
 }
 .sampling-label {
+  padding: 3px 6px;
+  color: var(--paper-ghost);
+  border: 1px solid var(--line-light);
+  border-radius: 6px;
+  font: var(--type-utility)/1 var(--body);
 }
+.sampling-label.phase-prefill,
+.sampling-label.phase-decode {
+  color: var(--phosphor);
+  border-color: rgba(168, 213, 116, 0.35);
 }
 .speed-gauge {
   height: 116px;
   display: grid;
   place-items: center;
+  border-radius: 50%;
   background:
+    radial-gradient(circle, var(--ink) 0 56%, transparent 57%),
+    conic-gradient(var(--phosphor) 0 var(--gauge), rgba(241, 242, 237, 0.11) var(--gauge) 100%);
+  box-shadow: inset 0 0 0 1px rgba(241, 242, 237, 0.08);
 }
 .gauge-ring::after {
+  display: none;
 }
 .gauge-ring > div {
   z-index: 1;
   display: grid;
   justify-items: center;
+  min-width: 0;
 }
 .gauge-ring strong {
   color: var(--phosphor);
+  font: 600 clamp(24px, 2vw, 29px)/1 var(--display);
+  white-space: nowrap;
 }
 .gauge-ring small {
+  display: grid;
+  justify-items: center;
+  gap: 2px;
   margin-top: 3px;
   color: var(--paper-ghost);
+  font: 600 10px/1 var(--mono);
+  letter-spacing: 0.02em;
   text-transform: uppercase;
 }
+.gauge-ring small span {
+  white-space: nowrap;
+}
 .speed-gauge dl {
   margin: 0;
 }
   color: var(--paper);
 }
+.telemetry-live-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 16px;
+}
+.telemetry-metric {
+  min-width: 0;
+  display: grid;
+  gap: 6px;
+  padding: 10px;
+  border: 1px solid var(--line-light);
+  border-radius: 8px;
+  background: var(--ink-raised);
+}
+.telemetry-metric.is-active {
+  border-color: rgba(168, 213, 116, 0.4);
+}
+.telemetry-metric > div:first-child {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+.telemetry-metric span,
+.telemetry-metric small {
+  color: var(--paper-ghost);
+  font-size: var(--type-utility);
+}
+.telemetry-metric strong {
+  color: var(--paper);
+  font: 600 var(--type-caption)/1 var(--mono);
+  white-space: nowrap;
+}
+.telemetry-metric.is-active strong {
+  color: var(--phosphor);
+}
+.telemetry-meter {
+  height: 4px;
+  overflow: hidden;
+  border-radius: 2px;
+  background: rgba(241, 242, 237, 0.1);
+}
+.telemetry-meter > span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--phosphor);
+  transition: width 120ms linear;
+}
 .device-card {
   display: grid;
   grid-template-columns: auto 1fr auto;
   gap: 10px;
   margin: 19px 0 14px;
   padding: 10px;
+  border: 1px solid var(--line-light);
+  border-radius: 8px;
+  background: var(--ink-raised);
 }
 .device-icon {
 .meter-track > span {
   display: block;
   height: 100%;
+  background: var(--phosphor);
 }
 .memory-grid {
   width: 25px;
   height: 25px;
   border: 1px solid var(--line-light);
+  border-radius: 6px;
   background: transparent;
   cursor: pointer;
 }
 .artifact-empty {
   margin: 0;
+  color: var(--paper-ghost);
+  font: var(--type-caption)/1.5 var(--body);
 }
 .artifact-pane {
   display: flex;
   justify-content: flex-end;
   background: rgba(8, 11, 9, 0.64);
   animation: station-in 160ms ease both;
 }
   padding: 30px 27px;
   color: var(--paper);
   border-left: 1px solid var(--phosphor);
+  background: var(--ink);
   box-shadow: -24px 0 70px rgba(0, 0, 0, 0.32);
   animation: sheet-in 300ms cubic-bezier(.16, 1, .3, 1) both;
 }
 .setting-group {
   display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 12px;
   padding: 15px 0;
   border-bottom: 1px solid var(--line-light);
 }
 .setting-group > div,
 .range-setting > span:first-child {
   display: grid;
 @media (max-width: 1279px) {
   .station-header {
+    grid-template-columns: 240px minmax(260px, 1fr) auto;
   }
+  .browser-notice > span > span {
+    display: none;
   }
+  .browser-notice.is-warning > span > span {
+    display: block;
   }
   .workspace-grid {
+    grid-template-columns: 240px minmax(0, 1fr);
     grid-template-areas:
       "models chat"
       "inspector inspector";
   }
+  .workspace-grid.is-models-collapsed,
+  .workspace-grid.is-models-collapsed.is-inspector-collapsed {
+    grid-template-columns: 0 minmax(0, 1fr);
+  }
+  .workspace-grid.is-inspector-collapsed:not(.is-models-collapsed) {
+    grid-template-columns: 240px minmax(0, 1fr);
+  }
   .model-rail,
   .chat-surface {
+    min-height: calc(100dvh - 64px);
+    height: calc(100dvh - 64px);
   }
   .inspector {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     overflow: visible;
+    border-top: 1px solid var(--line-light);
     border-left: 0;
   }
 @media (max-width: 820px) {
   .station-header {
+    min-height: 58px;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
   }
   .brand-block {
+    min-width: 0;
+    padding: 10px 14px;
+    border-right: 0;
   }
+  .brand-glyph {
+    width: 32px;
+    height: 32px;
+    flex-basis: 32px;
   }
+  .browser-notice {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    min-height: 38px;
+    padding: 7px 14px;
     border-top: 1px solid var(--line-light);
   }
   .header-actions {
+    grid-column: 2;
+    grid-row: 1;
+    position: static;
+    padding-inline: 10px;
+    border-left: 0;
   }
   .workspace-grid {
     display: block;
     padding: 18px 15px;
     border-right: 0;
+    border-bottom: 1px solid var(--line-light);
   }
   .model-list {
   .chat-surface {
     display: grid;
+    width: 100% !important;
+    min-height: calc(100dvh - 96px);
+    grid-template-rows: auto minmax(240px, auto) auto;
     overflow: visible;
   }
   .inspector {
     display: block;
+    border-top: 1px solid var(--line-light);
   }
   .inspector-section {
 @media (max-width: 520px) {
   .brand-block h1 {
+    font-size: 18px;
+  }
+  .brand-block > div > span {
+    display: none;
+  }
+  .layout-controls {
+    gap: 2px;
   }
+  .layout-controls button,
+  .icon-button {
+    width: 32px;
+    height: 32px;
   }
   .chat-header {
   }
   .botanical-subtitle {
+    display: none;
   }
   .message-user {
   }
   .composer-activity {
+    padding-inline: 10px;
   }
+  .activity-status small {
+    max-width: 210px;
   }
   .composer-field {
   }
   .gauge-ring::after {
+    display: none;
+  }
+  .telemetry-live-grid {
+    grid-template-columns: 1fr;
   }
 }

src/app/theme.test.ts ADDED Viewed

	@@ -0,0 +1,16 @@

+import { describe, expect, it } from 'vitest';
+import { normalizeThemeMode, resolveThemeMode } from './theme';
+describe('workspace theme', () => {
+  it('falls back to the system theme for missing or invalid persisted values', () => {
+    expect(normalizeThemeMode(null)).toBe('system');
+    expect(normalizeThemeMode('sepia')).toBe('system');
+  });
+  it('resolves system mode without overriding explicit light and dark choices', () => {
+    expect(resolveThemeMode('system', true)).toBe('dark');
+    expect(resolveThemeMode('system', false)).toBe('light');
+    expect(resolveThemeMode('light', true)).toBe('light');
+    expect(resolveThemeMode('dark', false)).toBe('dark');
+  });
+});

src/app/theme.ts ADDED Viewed

	@@ -0,0 +1,12 @@

+export type ThemeMode = 'system' | 'light' | 'dark';
+export type ResolvedTheme = Exclude<ThemeMode, 'system'>;
+export const THEME_STORAGE_KEY = 'bonsai-theme';
+export function normalizeThemeMode(value: string | null | undefined): ThemeMode {
+  return value === 'light' || value === 'dark' || value === 'system' ? value : 'system';
+}
+export function resolveThemeMode(mode: ThemeMode, systemDark: boolean): ResolvedTheme {
+  return mode === 'system' ? (systemDark ? 'dark' : 'light') : mode;
+}

src/lib/contracts.ts CHANGED Viewed

@@ -50,6 +50,15 @@ export interface ChatMessage {
   error?: string;
 }
 export interface TelemetrySnapshot {
   backend: 'WebGPU' | 'WASM' | 'Unavailable';
   device: string;
@@ -140,6 +149,9 @@ export interface BonsaiShellProps {
   activeModelId: ModelId;
   loadedModelId: ModelId | null;
   messages: ChatMessage[];
   streamState: StreamState;
   modelLoadProgress: ModelLoadProgress;
   telemetry: TelemetrySnapshot;
@@ -164,6 +176,11 @@ export interface BonsaiShellProps {
   onPersistStorage: () => void;
   onClearStorage: () => void;
   onClearConversation: () => void;
   onDismissError: () => void;
   onRetryShard: (modelId: ModelId) => void;
   onCloseArtifact: () => void;

   error?: string;
 }
+export interface ChatSession {
+  id: string;
+  title: string;
+  messages: ChatMessage[];
+  modelId: ModelId;
+  systemPrompt: string;
+  updatedAt: number;
+}
 export interface TelemetrySnapshot {
   backend: 'WebGPU' | 'WASM' | 'Unavailable';
   device: string;
   activeModelId: ModelId;
   loadedModelId: ModelId | null;
   messages: ChatMessage[];
+  conversations: ChatSession[];
+  activeConversationId: string;
+  conversationListOpen: boolean;
   streamState: StreamState;
   modelLoadProgress: ModelLoadProgress;
   telemetry: TelemetrySnapshot;
   onPersistStorage: () => void;
   onClearStorage: () => void;
   onClearConversation: () => void;
+  onOpenConversationList: () => void;
+  onNewConversation: () => void;
+  onOpenConversation: (conversationId: string) => void;
+  onOpenConversationSettings: (conversationId: string) => void;
+  onDeleteConversation: (conversationId: string) => void;
   onDismissError: () => void;
   onRetryShard: (modelId: ModelId) => void;
   onCloseArtifact: () => void;

src/lib/conversations.test.ts ADDED Viewed

	@@ -0,0 +1,33 @@

+import { describe, expect, it } from 'vitest';
+import type { ChatMessage, ChatSession } from './contracts';
+import { conversationPreview, conversationTitle, normalizeConversationModelId, upsertConversation } from './conversations';
+const message = (content: string, role: ChatMessage['role'] = 'user'): ChatMessage => ({
+  id: content,
+  role,
+  content,
+  timestamp: '12:00:00',
+});
+describe('local conversation sessions', () => {
+  it('derives a compact title from the first user prompt and a preview from the latest message', () => {
+    const messages = [message('  Explain   recurrent models  '), message('A compact answer', 'assistant')];
+    expect(conversationTitle(messages)).toBe('Explain recurrent models');
+    expect(conversationPreview(messages)).toBe('A compact answer');
+  });
+  it('falls back to the flagship model for stale persisted model ids', () => {
+    expect(normalizeConversationModelId('bonsai-8b')).toBe('bonsai-8b');
+    expect(normalizeConversationModelId('removed-model')).toBe('bonsai-27b');
+  });
+  it('moves an updated session to the front without duplicating it', () => {
+    const older: ChatSession = { id: 'a', title: 'A', messages: [], modelId: 'bonsai-27b', systemPrompt: 'A', updatedAt: 1 };
+    const other: ChatSession = { id: 'b', title: 'B', messages: [], modelId: 'bonsai-8b', systemPrompt: 'B', updatedAt: 2 };
+    const updated = { ...older, title: 'Updated', updatedAt: 3 };
+    expect(upsertConversation([other, older], updated).map(({ id, title }) => ({ id, title }))).toEqual([
+      { id: 'a', title: 'Updated' },
+      { id: 'b', title: 'B' },
+    ]);
+  });
+});

src/lib/conversations.ts ADDED Viewed

	@@ -0,0 +1,22 @@

+import type { ChatMessage, ChatSession, ModelId } from './contracts';
+const MODEL_IDS: readonly ModelId[] = ['bonsai-1.7b', 'bonsai-4b', 'bonsai-8b', 'bonsai-27b'];
+export function conversationTitle(messages: ChatMessage[]): string {
+  const firstPrompt = messages.find((message) => message.role === 'user' && message.content.trim())?.content.trim();
+  return firstPrompt ? firstPrompt.replace(/\s+/g, ' ').slice(0, 80) : 'New chat';
+}
+export function conversationPreview(messages: ChatMessage[]): string {
+  const latest = [...messages].reverse().find((message) => message.content.trim())?.content.trim();
+  return latest ? latest.replace(/\s+/g, ' ').slice(0, 140) : 'No messages yet';
+}
+export function normalizeConversationModelId(value: string): ModelId {
+  return MODEL_IDS.includes(value as ModelId) ? value as ModelId : 'bonsai-27b';
+}
+export function upsertConversation(sessions: ChatSession[], next: ChatSession): ChatSession[] {
+  return [next, ...sessions.filter((session) => session.id !== next.id)]
+    .sort((left, right) => right.updatedAt - left.updatedAt);
+}

src/lib/idb.ts CHANGED Viewed

@@ -14,6 +14,7 @@ export interface ConversationRecord<TMessage = unknown> {
   title: string;
   messages: TMessage[];
   modelId: string;
   updatedAt: number;
 }
@@ -116,3 +117,11 @@ export async function listConversations<TMessage>(): Promise<ConversationRecord<
   database.close();
   return result.sort((left, right) => right.updatedAt - left.updatedAt);
 }

   title: string;
   messages: TMessage[];
   modelId: string;
+  systemPrompt?: string;
   updatedAt: number;
 }
   database.close();
   return result.sort((left, right) => right.updatedAt - left.updatedAt);
 }
+export async function deleteConversation(id: string): Promise<void> {
+  const database = await openDatabase();
+  const transaction = database.transaction(CONVERSATION_STORE, 'readwrite');
+  transaction.objectStore(CONVERSATION_STORE).delete(validateIdentifier(id, 'conversation id'));
+  await transactionDone(transaction);
+  database.close();
+}