Enable browser HTTP commands with CORS-aware errors and bounded requests

README.md

@@ -1,5 +1,5 @@
 ---
-title: MiniCPM5-2B WebGPU Pi
+title: MiniCPM5-2B Pi HTTP experiment
 emoji: 🥧
 colorFrom: green
 colorTo: blue
@@ -7,86 +7,37 @@ sdk: static
 app_file: index.html
 pinned: false
 license: apache-2.0
-short_description: A coding agent running entirely in your browser
-thumbnail: https://huggingface.co/spaces/townbox/MiniCPM5-2B-WebGPU-Pi/resolve/main/social-thumbnail-v3.png
+short_description: Browser coding agent with HTTP requests (experimental)
 models:
   - openbmb/MiniCPM5-2B
   - Mike0021/MiniCPM5-2B-ONNX
 tags:
   - transformers.js
-  - onnx
   - webgpu
-  - text-generation
   - agents
   - pi
   - just-bash
 ---
 
-# Pi browser workspace · MiniCPM5-2B
+# Pi browser HTTP experiment
 
-Run **Pi's real agent core**, **just-bash**, and **MiniCPM5-2B** entirely in your browser. Chat with Pi, inspect and edit files, and execute shell commands in a persistent virtual workspace. A browser worker runs the agent loop, local WebGPU inference, and every tool. No inference API, API key, or shell server is involved.
+An independent duplicate of [victor/MiniCPM5-2B-WebGPU-Pi](https://huggingface.co/spaces/victor/MiniCPM5-2B-WebGPU-Pi) at revision `959e272adeb7931e32d3eb2177dc1d5e96c3e967`. The original Space is unchanged.
 
-Send your first message. If the complete verified model is already cached in this browser, Pi restores it and sends your message automatically, without a confirmation dialog. Otherwise, a **Load model & send** dialog explains the download. Confirming closes the dialog and shows progress in the top bar, then sends your message automatically. Cancel or Stop keeps your unsent draft; loading errors offer a retry. If the cache is incomplete or has changed, downloading missing files requires confirmation. You can also click **Load model** ahead of time. The first download is about **1.84 GB**; files are SHA-256 verified and cached in OPFS. The loader uses bounded byte ranges, retries, cancellation, and separate download / GPU setup / warm-up phases. Chat and virtual files are saved in IndexedDB on this site. Cached weights can be reused after reloading. The entire workspace uses a dark theme.
+MiniCPM5-2B inference and just-bash run in a browser worker. This copy adds real `curl`/`wget` requests through browser `fetch`, with no backend or proxy. The first model download is about 1.84 GB, verified and cached locally. WebGPU with shader-f16 is required for inference; the Shell can run HTTP commands without loading the model.
 
-If your browser blocks storage inside Hugging Face's embedded view, use the app's **Open workspace in a new tab** button or [open the app directly](https://townbox-minicpm5-2b-webgpu-pi.static.hf.space/). This keeps inference and files in your browser and does not require changing browser privacy settings.
+Try in Shell:
 
-Requires WebGPU with FP16 (`shader-f16`) in a browser worker, OPFS, and sufficient storage and device memory. There is an 8,192-token prompt-plus-output budget, up to 2,048 generated tokens per model call, and a 12-turn limit per request. Desktop and narrow-screen layouts are included. Physical Android/iOS devices have not been tested.
+```bash
+curl -fsS https://jsonplaceholder.typicode.com/todos/1 -o todo.json
+jq '{id, title, completed}' todo.json
+```
 
-Try: **What's our total sales revenue?**
+Or ask Pi: **Fetch https://jsonplaceholder.typicode.com/todos/1, save it as todo.json, and tell me its title and whether it is completed.**
 
-Pi has `bash`, `read`, `write`, and `edit` tools. just-bash supports shell scripts, pipes, redirects, `awk`, `jq`, `sed`, `grep`, and other text commands. Node.js, Python, npm, native binaries, SQLite, and network commands are unavailable. The left column uses xterm.js with Pi's actual terminal renderer, editor, and message components. MiniCPM and the tools run in the browser worker. This reuses Pi's TUI; the full Node CLI and its extensions are not included. Files are virtual and remain on your device. Export work you want to keep.
+Allowed HTTPS hosts: `api.github.com`, `raw.githubusercontent.com`, `huggingface.co`, `jsonplaceholder.typicode.com`, and `httpbin.org`. GET, HEAD, and POST are enabled, with an 8-second deadline and 1 MiB response limit. Use `set -o pipefail` before pipelines to retain download failures.
 
-The top bar shows the model, its load status, and a live token-speed sparkline labeled **WebGPU** for inference or **JavaScript** for tool execution. Speed is measured from generated tokens, including thinking; prompt processing and tool execution have their own statuses. The chart clears when generation stops. Successful file reads open the corresponding workspace file while preserving unsaved edits. Common file types have Seti icons. The shell includes live Bash syntax coloring, multiline commands, session history, colored errors/exit states, and a resizable output area. Panels use background shading and rounded corners sized to their nested spacing throughout the dark workspace.
+Browser CORS applies. Redirects require the final URL directly: browsers hide redirect destinations, so this copy reports an error instead of silently returning empty output or following unchecked hosts. Cookies are omitted. Explicit request URLs, headers, and bodies are sent to the destination; inference and workspace storage remain local. Node.js, Python, npm, and native programs remain unavailable.
 
-The terminal uses Pi's dark palette and native message/editor padding. Recent checks cover seven viewport sizes, Unicode alignment, long tool output, a simulated 60-turn transcript, twelve keyboard interactions, five actual-model workflows, and a ten-turn conversation with twelve tool results. Mobile sizes were simulated on desktop Chromium.
+Source is under `app/`. Rebuild with `cd app && npm ci && npm test && npm run build`, then `python3 scripts/stage.py`. The HTTP implementation is in `app/src/browser-http.mjs`; it uses just-bash's existing curl/wget commands and custom transport hook. Tests and results are in `validation/`.
 
-## Our conversion
-
-The included `q4f16` model was converted directly from the official [OpenBMB MiniCPM5-2B BF16 checkpoint](https://huggingface.co/openbmb/MiniCPM5-2B/tree/abe115e887989b14f05e64a3b260648329324c3f), not from community-converted weights.
-
-- Source revision: `abe115e887989b14f05e64a3b260648329324c3f`.
-- Official weight SHA-256, verified before conversion: `14fb8e7f0a18d53d1f239773758bf581cee7e456a4523a54622c3a245b64402c`.
-- ONNX Runtime GenAI 0.15.2; symmetric int4, block size 32; FP16 activations and KV cache.
-- Fused QKV, GQA, RoPE, and normalization operations.
-- Last-position logits selected before the output projection.
-- Lossless splitting of the 510 MiB embedding allocation into four 127.5 MiB tensors.
-- Seven external-data shards; corrected tool-history serialization and Jinja compatibility.
-
-The [package manifest](https://huggingface.co/Mike0021/MiniCPM5-2B-ONNX/blob/04a6c49fcba3a65a0351c92644c3a7e9d4343059/manifest.json) contains file sizes and SHA-256 hashes. The weights are hosted in the companion [model repository](https://huggingface.co/Mike0021/MiniCPM5-2B-ONNX). The app pins model revision `04a6c49fcba3a65a0351c92644c3a7e9d4343059`; the Space hosts the app and browser runtime.
-
-## Validation
-
-Six prompts with prefill and cached decoding give 41 tested prediction positions. These are scoped conversion checks, not a broad quality evaluation.
-
-| Comparison | Top-token agreement | Mean KL divergence |
-|---|---:|---:|
-| FP16 ONNX vs FP16 PyTorch | 41/41 | 0.00000815 |
-| Int4 ONNX vs official BF16 PyTorch | 36/41 | 0.125916 |
-| Packaged int4 vs our original int4 export | 41/41; all logits bit-identical | 0 |
-| Browser WebGPU vs native packaged ONNX | 41/41 | 0.002517 |
-
-Local Chromium tests on an AMD Radeon 8060S covered streaming, stopping, thinking mode, XML tool-call generation, and one retrieval fixture at 3,888 prompt tokens. Inference also passed with the GPU device capped at a 128 MiB storage binding limit and 256 MiB buffer limit. This desktop allocation test does not emulate a phone's memory pressure or thermals.
-
-Warm local benchmark medians were about 35–42 decode tokens/s. At 1,890 prompt tokens, first-token latency improved about 9.5% against our own identical-weight control with all-position logits and unsplit embeddings. Timings depend on device, browser, prompt, and thermal state.
-
-Four-bit quantization has measurable quality loss. A multi-turn audit reproduced ineffective HTML/CDN edits and long, inconclusive reasoning with this export, while the original BF16 model completed the reference workflow. The base model also makes mistakes: one Chinese arithmetic prompt produced an incorrect answer in both the official BF16 model and the conversion. Pi translates validated XML tool calls into actions in the virtual filesystem. Integration tests do not establish broad coding-agent reliability.
-
-The agent now uses the 2B model's supported thinking mode and actual nucleus sampling (temperature 1, top-p .95, no top-k/min-p filter, repetition penalty 1). Completed thinking is retained separately in history and collapsed in the UI. The audit documents the earlier configuration mistakes, exact-prompt comparisons, parser/sampling corrections, and unresolved quality limits. It does not claim the 4-bit model matches BF16 or that multi-turn inference is fully optimized.
-
-## Browser-agent verification
-
-The production browser bundle passed five real-model agent workflows with networking disabled: reading an unseen random file value, computing CSV revenue and writing a report, creating and executing a shell script, editing that script, and recovering from a missing-file error. It made zero network requests during these tasks. Tests also cover generation cancellation, editor/import/shell controls, persisted files and chat, and cached reloads with zero weight requests. Eight unit tests cover XML/CDATA, tool-shaped code examples, context/history conversion, filesystem restoration, and inert Markdown.
-
-The same workflows passed with an actual desktop GPU capped at 128 MiB storage bindings and 256 MiB buffers. This is not mobile hardware emulation. Public-Hub download cancellation/retry was tested locally; cached reloads took about 1.8–1.9 seconds on the tested desktop.
-
-The deployed browser agent also passed all five workflows from the public Space URL, with zero requests during offline tasks and zero weight downloads on reload. The actual Hugging Face embedded page successfully loaded the model and used Pi's bash and file tools to produce and verify the $144 report.
-
-The xterm.js terminal build also passed all 12 terminal interaction checks from the public app URL, including keyboard editing, search, history, Unicode/large clipboard paste, shell execution, and a 390px layout. In the actual Hugging Face embed, it loaded MiniCPM from cache in 3.644 seconds on the tested desktop and created a fresh, verified $144 sales report through Pi's tools.
-
-## Runtime
-
-Browser runtime versions: Pi Agent / Pi AI **0.85.1**, just-bash **3.4.2**, Transformers.js **4.2.0**, and ONNX Runtime Web **1.26.0-dev.20260416-b7804b056c**. JavaScript/WASM assets are hosted in this Space. Model caching is keyed to the pinned model revision and per-file verification receipts.
-
-## Attribution
-
-Base model: **OpenBMB**, Apache-2.0. Agent: **Pi / earendil-works**. Shell: **just-bash / Vercel**. Inference: **Hugging Face Transformers.js** and **Microsoft ONNX Runtime**. Bundled license texts and notices are in [licenses](licenses). This Space contains an independently converted and quantized derivative; no weights were retrained.
+The small 4-bit model can make mistakes. Shell transport checks and actual-model trials are reported separately; they do not establish general agent reliability or physical-phone performance.

app/README.md

@@ -0,0 +1,137 @@
+# Pi in the browser
+
+A static web app running **Pi’s actual terminal UI in xterm.js**, **the real Pi Agent**, **just-bash**, and **our verified MiniCPM5-2B q4f16 conversion** in the browser. A dedicated worker owns the agent loop, WebGPU inference, and virtual shell. No inference API, API key, shell server, or Pi RPC server is involved.
+
+```sh
+cd app
+npm ci
+npm run build
+npm run preview
+```
+
+Open the printed localhost URL and send your first message. If the complete verified model is already cached, Pi restores it and sends your message automatically without a confirmation dialog. Otherwise, a **Load model & send** dialog explains the download and closes immediately on confirmation. Progress appears in the top bar while your message stays visible as queued; it sends automatically once the model is ready. Closing the dialog or pressing Stop returns the unsent message to the editor. Loading errors reopen the dialog for retry. Automatic restoration never downloads missing model files: an incomplete or changed cache requires confirmation. You can also load ahead of time with **Load model**. The default downloads our pinned model from Hugging Face. The app needs a secure context (HTTPS or localhost), WebGPU with `shader-f16` in a worker, and OPFS storage. Allow about 2 GB of free browser storage plus device memory for inference. Actual memory availability matters on phones.
+
+For development, use `npm run dev`. To use the already converted weights on this computer instead of downloading them, run `python scripts/serve.py` from the repository root in another terminal, then open `http://127.0.0.1:5173/?source=local`. The development and preview servers forward `/models` to that static file server. The local source option is accepted only on localhost/127.0.0.1.
+
+## Features
+
+- Pi’s upstream fullscreen renderer, multiline editor, user/assistant message components, Markdown, prompt history, and autocomplete. xterm.js renders their ANSI output.
+- `/load`, `/help`, `/new`, and `!command` browser commands. Enter sends, Shift+Enter inserts a newline, Escape/Ctrl+C stops, Ctrl+O expands tools. Ctrl+P/N recalls prompts; Ctrl+Shift+F searches the transcript. The Send and Newline buttons also support touch input.
+- Streaming conversation with genuine `@earendil-works/pi-agent-core` tool execution and automatic follow-up turns.
+- `bash`, `read`, `write`, and exact-match `edit` tools connected to the same just-bash filesystem.
+- File editor with Prism syntax colors for HTML/XML/SVG, CSS, JavaScript/TypeScript (including JSX/TSX), Python, Bash, JSON, Markdown, YAML, TOML, SQL, CSV, C/C++, C#, Java, Go, Rust, Dockerfiles, and diffs. Highlighting runs in a separate, lazily started worker and is debounced while typing. Native textarea editing, selection, undo, and scrolling are preserved. Unknown formats, files above 200,000 characters or 5,000 lines, excessive token output, and grammar work exceeding 1.5 seconds fall back to plain text. Text-file import, workspace export, and an interactive command entry are also included.
+- The starter workspace pairs `sales.csv` (products and units sold) with `products.json` (product prices). Both are needed for total sales revenue. The cat suggests “What's our total sales revenue?” without naming files or tools; the workspace README contains no calculation instructions. Only an untouched earlier pair is upgraded together; custom data and prior deletions are preserved.
+- Successful `read` tool calls open and highlight the resolved file in the workspace, including relative paths and symlinks. Following waits for newly created files, preserves unsaved edits, and keeps the conversation’s focus and page scroll position. Common file types use a local subset of 18 Seti icons from VS Code’s built-in theme, totaling about 12 KB of SVGs.
+- The shell highlights Bash as you type, accepts multiline commands (Shift+Enter), recalls session history (↑/↓), and separates command/output blocks with colored exit states and errors. Clear or Ctrl+L clears the output. Its output area can be resized vertically.
+- Model name, loading progress, and loaded status live in a rounded, inset top bar aligned with the workspace width. New chat sits at the bottom left of the terminal, opposite the send controls. Panels use background shading and rounded corners instead of separator borders.
+- The top bar’s activity indicator labels model inference **WebGPU** and tool execution **JavaScript**. It shows loading, prompt processing, tool execution, and live generation speed. Its sparkline uses actual generated-token counts, including thinking, over a rolling second; prompt-processing time is excluded. Rates refresh four times per second and clear when generation stops. The capsule fits its current contents with a 220ms width transition, disabled when reduced motion is preferred. Nested corner radii account for their insets: the header uses a 16px radius around 8px-radius controls with 8px padding.
+- The first-message dialog explains that the model, inference, and shell run entirely in the browser. Pi’s input receives focus when the workspace starts; cancelling setup returns focus and the unsent draft to Pi.
+- The download dialog has a matching peeking cat with transparent paws over its top edge. The sprite preloads and decodes on page startup, stays decorative for keyboard/screen-reader users, and shrinks on short screens to keep the download note and actions visible. Subtle paw prints appear around the overlay whenever the dialog is open, including before confirmation and on retry. They do not intercept clicks, pause in hidden tabs, and stay still with reduced motion.
+- After 7 seconds of inactivity, a faint paw trail occasionally crosses Pi’s transcript, with 45–60 seconds between trails. Typing, clicking, or scrolling clears it immediately; pointer movement neither resets the delay nor stops the trail. It stays above the input, never takes focus, and pauses during model activity, open dialogs, hidden or unfocused tabs, and reduced motion.
+- An empty chat has a small blocky cat with a clickable starter prompt. The bubble and cat appear together once the image is decoded. The suggestion fills Pi’s editor without sending, adapts to the workspace files, and disappears after the first user message. The 104px mascot makes one gentle hop shortly after appearing, then occasionally blinks; clicking or tapping the cat replays the hop and a short meow. Both cats are decorative and never take keyboard focus. Motion pauses while hidden and is disabled for reduced-motion preferences. Its paws align with the input divider, with room reserved beside it for the status text. Its position follows the terminal’s available blank rows, keeping the input and transcript unobstructed; short viewports omit it when there is no room.
+- IndexedDB persistence for chat, file bytes, executable modes, directories, and symbolic links. New chat keeps the workspace.
+- Verified model downloading: six concurrent files, 32 MiB byte ranges, three attempts per chunk, cancellation, incremental SHA-256 checks, and atomic OPFS writes. Completed files survive an interrupted load; an incomplete file restarts on retry.
+- Cached reloads use file size, modification time, and the stored verification receipt. Model files are hashed during download; they are not rehashed on every reload.
+- Visible download / WebGPU setup / shader warm-up phases. No image requests from model-generated Markdown.
+- MiniCPM5-2B's supported thinking mode, with completed reasoning retained separately in conversation history. Thoughts are collapsed in the terminal; click to expand. Tool-shaped text inside reasoning is never executed.
+- Temperature 1, actual top-p 0.95 sampling, no top-k/min-p filtering, and repetition penalty 1. A tested adapter applies nucleus filtering because Transformers.js 4.2.0 does not implement its exposed `top_p` option in generation.
+- An 8,192-token combined prompt/output budget, up to 2,048 generated tokens (reasoning plus answer/tool XML) per model call, and a 12-turn limit per user request. Older complete user turns can be omitted from inference context; the full saved conversation is retained. An oversized current turn produces an explicit error.
+- The terminal footer shows used/total context tokens and remaining capacity for the latest model call. It includes the formatted prompt (instructions, tool definitions, and retained history) plus generated tokens, updates during streaming, survives reloads, and resets with New chat. Unsent draft text is counted when submitted; saved turns excluded from the model context are not counted. On narrow screens the counter gets its own line.
+
+## Model quality
+
+The [September 14 multi-turn audit](../research/multiturn-audit/REPORT.md) found that the previous no-thinking/greedy profile was not faithful to the model's documented configuration. The corrected adapter handles reasoning and sampling, but the current 4-bit conversion still fails some HTML/CDN follow-ups that the original BF16 model completed. It can produce ineffective edits or exhaust its reasoning budget. Numerical conversion checks and basic tool tests do not establish general coding reliability. Cross-call KV reuse and physical-phone validation remain outstanding.
+- Responsive desktop and mobile layouts. The file workspace follows the chat on narrow screens.
+- A consistent dark theme across the terminal, header, model controls, file editor, shell, and setup dialog, including native form controls and scrollbars.
+
+## Runtime boundaries
+
+This uses Pi's actual TUI and agent core with browser host adapters. The npm `pi-tui` package supplies the renderer, editor, input parser, layout, Markdown, search, and keybindings. Unmodified CLI presentation components are in [vendor/pi-coding-agent](vendor/pi-coding-agent/README.md), with provenance checksums and the upstream dark palette. Secondary text colors are lifted for legibility at small sizes. [The build adapter](scripts/pi-browser.mjs) replaces terminal host services; [the terminal adapter](src/pi/xterm-terminal.mjs) connects xterm input/output/resize to Pi. Browser command dispatch and just-bash tool cards are app code.
+
+Message padding follows Pi 0.85.1 defaults: one column of output padding, one inner row above/below user and tool boxes, one separator row between turns, and zero editor column padding. The browser panel adds an 8px outer inset, with no right padding on desktop. Pi owns transcript scrolling, so xterm's unused native scrollbar gutter is disabled. The pinned `@xterm/addon-unicode-graphemes@0.4.0` addon matches Pi's grapheme widths for CJK, emoji sequences and combining accents. It uses xterm's proposed Unicode API and is covered by rendering assertions.
+
+The full Node CLI, host filesystem, OAuth providers, extensions, package installation, and RPC server are not included. xterm.js is the terminal emulator; it does not add Node.js or a native shell. Model inference and tool execution remain in the browser worker. Terminal control sequences from model/file output are stripped before rendering, and Markdown images do not trigger downloads.
+
+just-bash is a simulated shell, not a Linux VM. Shell scripts, pipes, redirects, `awk`, `jq`, `sed`, `grep`, `find`, and other supported text commands execute in JavaScript. Node.js, Python, npm, native executables, and SQLite are unavailable. This HTTP experiment enables curl/wget for selected HTTPS APIs through a browser fetch adapter; see public/http-help.html for hosts, examples, and limits. The installed browser bundle also excludes working gzip/zlib commands. Shell cwd and variables reset between commands; filesystem changes persist. Commands have a 10-second deadline, 3,000-command cap, 16 MiB filesystem budget, and 256 KiB output budget. Tool output passed to the model is capped at 6,000 characters.
+
+Local model and filesystem tool calls can run with the browser network disabled after loading. HTTP commands require a connection and CORS permission from the destination. Reopening the app itself still requires its static HTML/JS/WASM assets; there is no offline service worker. Browser storage belongs to this site's origin and may be evicted by the browser. Export important work.
+
+The small 4-bit model can make mistakes. These tests establish working integration on the tested device, not broad coding-agent reliability or support for every mobile browser. No physical phone has been tested.
+
+## Verification
+
+```sh
+npm test
+npm run build
+# Start npm run preview, then run the terminal checks (no model needed):
+node tests/terminal.mjs
+# Deterministic presentation fixtures, including narrow and short viewports:
+npm run test:render
+# Ten consecutive actual-model turns (local model server required):
+npm run test:conversation
+# First message, modal cancellation/retry, and actual model auto-send:
+npm run test:first-message
+# Download confirmation, top-bar progress, queued messages and cancellation (controlled worker fixtures):
+npm run test:load-flow
+# Cached auto-start, invalidated cache, Stop and GPU failure recovery:
+npm run test:cached-start
+# Live token speed, generation/tool/idle phases and eight header layouts:
+npm run test:runtime-meter
+# Automatic read following, unsaved edits, file icons and mobile layout:
+npm run test:follow-read
+# File highlighting, native editing, saving, scrolling and large-file fallback:
+npm run test:editor
+# Companion product data and preserving existing workspaces during its addition:
+npm run test:starter-products
+# Opt-in real WebGPU model evaluation; requires the dedicated cached test profile:
+npm run test:sales-demo
+# Syntax-colored command input, actual shell execution, history and layouts:
+npm run test:shell
+# Actual token usage, streaming, cancellation, reload and input focus:
+npm run test:context
+# Start npm run preview -- --port 4173 and the root static model server first:
+npm run test:browser
+```
+
+The terminal suite checks real keyboard events, multiline editing, autocomplete, history, Unicode and large clipboard pastes, shell execution, and live resize. The browser suite uses real Chromium, the actual model, and the production bundle; prompts are submitted through xterm and Pi’s editor. It disables networking while Pi reads a random value from an unseen file, calculates CSV revenue, writes and verifies a report, creates and executes a shell script, edits it, and recovers from a missing-file tool error. It also checks stopping generation, file import/edit/save, manual shell execution, workspace persistence, cached reloads, and a 390 px layout.
+
+To exercise the public Hugging Face download in a separate browser profile:
+
+```sh
+APP_URL=http://127.0.0.1:4173/ \
+BROWSER_PROFILE=../validation/agent-browser-profile/remote \
+TEST_LABEL=agent-browser-hub TEST_CANCEL_LOAD=1 npm run test:browser
+```
+
+To exercise smaller GPU buffer allocations on the desktop GPU:
+
+```sh
+APP_URL='http://127.0.0.1:4173/?source=local&limit128' \
+TEST_LABEL=agent-browser-limit128 npm run test:browser
+```
+
+`limit128` sets the actual WebGPU device to 128 MiB storage bindings and 256 MiB buffers. It is an allocation compatibility test; viewport resizing and GPU limits do not emulate mobile hardware performance.
+
+Results and screenshots are in the repository's `validation/agent-browser*` files. Test logs include complete model tool calls and results. The browser profile and downloaded weights are ignored by Git.
+
+## Static hosting
+
+Upload **the contents of `app/dist`** to an HTTPS static host. It contains the app and local ONNX Runtime assets; weights are fetched from the pinned public Hugging Face repository and cached in OPFS. No build or inference server is needed after deployment.
+
+The public deployment is [townbox/MiniCPM5-2B-WebGPU-Pi](https://huggingface.co/spaces/townbox/MiniCPM5-2B-WebGPU-Pi). From the repository root, `python scripts/prepare_space.py` stages the built app, source, licenses, and selected validation files in `.space-agent/` for upload.
+
+Browsers that deny storage in third-party embeds get an **Open workspace in a new tab** link. The top-level Space app can then use its own storage without changing browser privacy settings. Embedded-page tests restore normal Chromium storage partitioning because Playwright 1.58 disables it by default; the restricted-storage path is tested separately.
+
+## Pinned components
+
+| Component | Version / revision |
+|---|---|
+| Pi agent core and Pi AI types/event stream | `@earendil-works/*` 0.85.1 |
+| Pi TUI / CLI presentation components | 0.85.1 |
+| xterm.js / fit addon | 6.0.0 / 0.11.0 |
+| just-bash | 3.4.2, explicit `just-bash/browser` import |
+| Transformers.js | 4.2.0 |
+| Model | `Mike0021/MiniCPM5-2B-ONNX` at `04a6c49fcba3a65a0351c92644c3a7e9d4343059` |
+| Model provenance | official OpenBMB weights; see root README and package manifest |
+
+Architecture decisions and primary-source research are in [the investigation](../research/browser-agent/REPORT.md).

app/index.html

@@ -0,0 +1,100 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="theme-color" content="#18181e">
+  <meta name="color-scheme" content="dark">
+  <link rel="icon" href="./favicon.svg" type="image/svg+xml">
+  <link rel="preload" href="./modal-cat-v1.png" as="image" type="image/png" fetchpriority="high">
+  <meta name="description" content="Pi, MiniCPM5 and a bash workspace, running entirely in your browser.">
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="Pi, entirely in your browser.">
+  <meta property="og:description" content="MiniCPM5-2B, WebGPU inference, and a local shell. A coding agent running entirely in your browser.">
+  <meta property="og:url" content="https://mike0021-minicpm5-2b-webgpu-pi-http.static.hf.space/">
+  <meta property="og:image" content="https://huggingface.co/spaces/Mike0021/MiniCPM5-2B-WebGPU-Pi-HTTP/resolve/main/social-thumbnail-v3.png">
+  <meta property="og:image:width" content="3136">
+  <meta property="og:image:height" content="1984">
+  <meta property="og:image:alt" content="A coding agent running entirely in your browser, above the Pi terminal and its pixel cat mascot.">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Pi, entirely in your browser.">
+  <meta name="twitter:description" content="MiniCPM5-2B, WebGPU inference, and a local shell. A coding agent running entirely in your browser.">
+  <meta name="twitter:image" content="https://huggingface.co/spaces/Mike0021/MiniCPM5-2B-WebGPU-Pi-HTTP/resolve/main/social-thumbnail-v3.png">
+  <meta name="twitter:image:alt" content="A coding agent running entirely in your browser, above the Pi terminal and its pixel cat mascot.">
+  <title>Pi · Coding agent in your browser</title>
+</head>
+<body>
+  <header><a class="brand" href="./" aria-label="Pi"><svg class="pi-logo" viewBox="165.29 165.29 469.43 469.43" width="18" height="18" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M165.29 165.29H517.36V400H400V517.36H282.65V634.72H165.29ZM282.65 282.65V400H400V282.65Z"/><path fill="currentColor" d="M517.36 400H634.72V634.72H517.36Z"/></svg></a>
+      <div id="runtime-meter" class="runtime-meter" role="group" aria-label="Execution in this browser" data-state="idle">
+        <div class="runtime-content">
+          <span class="runtime-location"><span class="runtime-dot" aria-hidden="true"></span><span class="runtime-engine">WebGPU</span></span>
+          <span class="runtime-divider" aria-hidden="true"></span>
+          <svg class="runtime-sparkline" width="48" height="18" viewBox="0 0 48 18" aria-hidden="true" hidden><g class="runtime-bars" fill="currentColor"></g></svg>
+          <span class="runtime-value">Idle</span>
+        </div>
+        <span class="sr-only" role="status" aria-live="polite"></span>
+      </div>
+      <div class="model-panel">
+        <div class="model-heading"><div><a class="header-model-source" href="https://huggingface.co/openbmb/MiniCPM5-2B" target="_blank" rel="noopener noreferrer" aria-label="MiniCPM5-2B by OpenBMB on Hugging Face (opens in a new tab)" title="View MiniCPM5-2B on Hugging Face"><img src="./openbmb-avatar.webp" width="16" height="16" alt=""><strong>MiniCPM5-2B</strong></a><span class="badge">4-bit</span></div><button id="load" class="primary" aria-describedby="load-status load-detail">Load model</button></div>
+        <p id="load-status" class="sr-only" role="status">One download, about 1.84 GB. Cached in this browser for next time.</p>
+        <progress id="progress" hidden max="100" value="0" aria-label="Model download"></progress>
+        <div id="load-detail" class="sr-only"></div>
+      </div>
+  </header>
+  <main>
+    <section id="conversation-panel" class="conversation" aria-label="Agent conversation">
+      <div class="terminal-panel">
+      <div id="pi-terminal" aria-label="Pi terminal"></div>
+      <div id="notice" role="status" hidden></div>
+      <a id="open-tab" class="button" target="_blank" rel="noopener noreferrer" hidden>Open workspace in a new tab ↗</a>
+      <div class="terminal-controls"><button id="new-chat" type="button">New chat</button><span id="activity" class="sr-only" role="status">Files and chat are saved on this device.</span><button id="newline" type="button" title="Insert a newline (Shift+Enter)">↵ Newline</button><button id="stop" type="button" hidden>Stop</button><button id="send" class="primary">Send ↑</button></div>
+      <footer>Pi TUI · xterm.js <span>Model and tools run in your browser</span></footer>
+      </div>
+    </section>
+    <div id="column-resizer" class="column-resizer" role="separator" tabindex="0" aria-label="Resize chat and workspace" aria-orientation="vertical" aria-controls="conversation-panel workspace-panel" aria-valuemin="0" aria-valuemax="100" aria-valuenow="55" title="Drag to resize · Arrow keys to adjust · Double-click or Enter to reset"></div>
+    <aside id="workspace-panel" class="workspace" aria-label="Workspace">
+      <div class="workspace-heading"><h2>Workspace</h2><div><button id="add-file" class="quiet">+ File</button><label class="button quiet" for="upload">Import</label><input id="upload" type="file" multiple hidden><button id="export" class="quiet">Export</button></div></div>
+      <div class="file-area"><nav id="files" aria-label="Files"></nav><div class="editor-area"><div class="editor-heading"><span class="editor-file"><span id="filetype"></span><span id="filename">Select a file</span></span><button id="save" class="quiet" disabled>Save</button></div><label for="editor" class="sr-only">File contents</label><div class="editor-input"><pre id="editor-highlight" aria-hidden="true"></pre><textarea id="editor" wrap="off" autocomplete="off" autocapitalize="off" spellcheck="false" disabled placeholder="Select a file to inspect or edit it."></textarea></div></div></div>
+      <details class="terminal" open>
+        <summary>Shell <span>just-bash</span></summary>
+        <div class="shell-toolbar"><span>/workspace</span><button id="shell-clear" type="button" class="quiet" title="Clear shell output (Ctrl+L)">Clear</button></div>
+        <div id="terminal-output" role="log" aria-label="Shell output" aria-live="polite" tabindex="0"><div class="shell-empty"><strong>Ready in your workspace</strong><span>Try <code>ls -la</code> or <code>cat README.md</code>.</span></div></div>
+        <form id="shell-form">
+          <span class="shell-prompt" aria-hidden="true">$</span><label for="command" class="sr-only">Shell command</label>
+          <div class="shell-input"><pre id="command-highlight" aria-hidden="true"></pre><textarea id="command" rows="1" autocomplete="off" autocapitalize="off" spellcheck="false" placeholder="Enter a shell command…" aria-describedby="shell-hint"></textarea></div>
+          <button id="shell-run" class="primary">Run</button>
+        </form>
+        <div id="shell-hint"><span>Enter to run · Shift+Enter for newline</span><span>↑↓ history</span></div>
+      </details>
+      <p class="workspace-note">HTTP experiment: curl / wget can reach selected APIs. Browser CORS applies. <a href="./http-help.html" target="_blank" rel="noopener">Hosts &amp; examples ↗</a></p>
+    </aside>
+  </main>
+  <dialog id="model-dialog" aria-labelledby="model-title" aria-describedby="model-description">
+    <div class="setup-paws" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></div>
+    <div class="setup-cat" aria-hidden="true"><span class="setup-cat-tail"></span><img src="./modal-cat-v1.png" width="1254" height="1254" alt="" draggable="false" loading="eager" fetchpriority="high" decoding="async"><span class="setup-cat-eyelids"></span></div>
+    <div class="setup-heading">
+      <h2 id="model-title">Download model weights</h2>
+      <button id="model-cancel" type="button" aria-label="Close model setup" title="Close model setup"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="m6 6 12 12M18 6 6 18"/></svg></button>
+    </div>
+    <div class="setup-body">
+    <p id="model-description">The model and shell run in your browser. HTTP commands can send requests and data to external services.</p>
+    <dl class="setup-runtime">
+      <div><dt>Model</dt><dd class="setup-model"><a class="model-org" href="https://huggingface.co/openbmb" target="_blank" rel="noopener noreferrer" aria-label="OpenBMB on Hugging Face (opens in a new tab)" title="OpenBMB on Hugging Face"><img src="./openbmb-avatar.webp" width="18" height="18" alt=""></a><a class="model-source" href="https://huggingface.co/openbmb/MiniCPM5-2B" target="_blank" rel="noopener noreferrer" title="View MiniCPM5-2B on Hugging Face">MiniCPM5-2B</a></dd></div>
+      <div><dt>Inference</dt><dd>On your GPU</dd></div>
+      <div><dt>Shell</dt><dd>Bash in the browser</dd></div>
+    </dl>
+    <div class="setup-facts"><strong>About 1.84 GB on the first download</strong><span>Saved in this browser for faster starts next time.</span></div>
+    <p class="setup-label">Your message</p><div id="model-preview"></div>
+    <p id="model-error" role="alert" hidden></p>
+    <a id="model-open-tab" class="button" target="_blank" rel="noopener noreferrer" hidden>Open workspace in a new tab ↗</a>
+    <p class="setup-credits"><span>Powered by</span>
+      <a href="https://huggingface.co/docs/transformers.js/index" target="_blank" rel="noopener noreferrer" title="Transformers.js documentation (opens in a new tab)"><img src="./library-icons/huggingface.svg" width="14" height="14" alt="">Transformers.js</a>
+      <a href="https://onnxruntime.ai/docs/" target="_blank" rel="noopener noreferrer" title="ONNX Runtime documentation (opens in a new tab)"><img src="./library-icons/onnxruntime.ico" width="14" height="14" alt="">ONNX Runtime</a>
+      <a href="https://github.com/earendil-works/pi" target="_blank" rel="noopener noreferrer" title="Pi agent toolkit (opens in a new tab)"><svg class="credit-pi" viewBox="165.29 165.29 469.43 469.43" width="14" height="14" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M165.29 165.29H517.36V400H400V517.36H282.65V634.72H165.29ZM282.65 282.65V400H400V282.65Z"/><path fill="currentColor" d="M517.36 400H634.72V634.72H517.36Z"/></svg>Pi</a>
+      <a href="https://github.com/vercel-labs/just-bash" target="_blank" rel="noopener noreferrer" title="just-bash browser shell (opens in a new tab)"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="2.5" y="4" width="19" height="16" rx="3"/><path d="m6 9 3 3-3 3m7 0h5"/></svg>just-bash</a>
+    </p>
+    </div>
+    <div class="setup-actions"><button id="model-confirm" type="button" class="primary" autofocus>Load model &amp; send</button></div>
+  </dialog>
+  <script type="module" src="./src/main.mjs"></script>
+</body>
+</html>

app/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "minicpm5-pi-browser",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview --host 127.0.0.1",
+    "test": "node --test tests/*.test.mjs",
+    "test:browser": "node tests/browser.mjs",
+    "test:terminal": "node tests/terminal.mjs",
+    "test:render": "node tests/render.mjs",
+    "test:conversation": "node tests/conversation.mjs",
+    "test:first-message": "node tests/first-message.mjs",
+    "test:cached-start": "node tests/cached-start.mjs",
+    "test:runtime-meter": "node tests/runtime-meter.mjs",
+    "test:mascot": "node tests/mascot.mjs",
+    "test:modal-cat": "node tests/modal-cat.mjs",
+    "test:column-resizer": "node tests/column-resizer.mjs",
+    "test:load-flow": "node tests/load-flow.mjs",
+    "test:follow-read": "node tests/follow-read.mjs",
+    "test:editor": "node tests/editor.mjs",
+    "test:starter-products": "node tests/starter-products.mjs",
+    "test:sales-demo": "node tests/sales-demo.mjs",
+    "test:shell": "node tests/shell.mjs",
+    "test:context": "node tests/context.mjs"
+  },
+  "dependencies": {
+    "@earendil-works/pi-agent-core": "0.85.1",
+    "@earendil-works/pi-ai": "0.85.1",
+    "@earendil-works/pi-tui": "0.85.1",
+    "@huggingface/transformers": "4.2.0",
+    "@xmldom/xmldom": "0.9.12",
+    "@xterm/addon-fit": "0.11.0",
+    "@xterm/addon-unicode-graphemes": "0.4.0",
+    "@xterm/xterm": "6.0.0",
+    "buffer": "6.0.3",
+    "events": "3.3.0",
+    "hash-wasm": "4.12.0",
+    "just-bash": "3.4.2",
+    "markdown-it": "15.0.2",
+    "prismjs": "1.30.0"
+  },
+  "devDependencies": {
+    "playwright": "1.58.2",
+    "vite": "8.3.0"
+  }
+}

app/public/http-help.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Browser HTTP experiment</title>
+<style>html{color-scheme:dark;background:#18181e;color:#e4e4eb;font:17px/1.6 system-ui}body{max-width:760px;margin:40px auto;padding:0 20px}a{color:#a4e2d4}pre{background:#262630;padding:16px;overflow:auto;border-radius:12px}code{font-size:14px}</style>
+<h1>HTTP from the browser shell</h1>
+<p>This experimental copy enables real <code>curl</code> and <code>wget</code> requests. The model and shell run on your device. Requests go directly from your browser to the destination; there is no proxy. Request URLs, headers, and bodies are sent to that service.</p>
+<p>Allowed HTTPS hosts: <code>api.github.com</code>, <code>raw.githubusercontent.com</code>, <code>huggingface.co</code>, <code>jsonplaceholder.typicode.com</code>, and <code>httpbin.org</code>. GET, HEAD, and POST are enabled. Cookies are omitted. Requests have an 8-second deadline and a 1 MiB response limit.</p>
+<h2>Try in Shell</h2>
+<pre>curl -fsS https://jsonplaceholder.typicode.com/todos/1 -o todo.json
+jq '{id, title, completed}' todo.json</pre>
+<pre>set -o pipefail
+curl -fsS https://api.github.com/repos/huggingface/transformers.js | jq '{full_name, stargazers_count}'</pre>
+<h2>Ask Pi</h2>
+<p>“Fetch https://jsonplaceholder.typicode.com/todos/1, save it as todo.json, and tell me its title and whether it is completed.”</p>
+<p>The destination must allow browser access with CORS. Redirects are reported as errors: use the final URL directly, with the exact capitalization. A plain curl pipeline can hide an error unless you enable <code>set -o pipefail</code>. Python, Node.js, npm, and native binaries remain unavailable.</p>
+<p><a href="./">Back to the workspace</a> · <a href="https://huggingface.co/spaces/victor/MiniCPM5-2B-WebGPU-Pi">Original Space</a></p>
+</html>

app/public/licenses/library-icons-NOTICE.txt

@@ -0,0 +1,12 @@
+Library credits icons, obtained 2026-09-14.
+
+Hugging Face logo (unmodified):
+https://huggingface.co/front/assets/huggingface_logo-noborder.svg
+
+ONNX Runtime favicon (unmodified):
+https://onnxruntime.ai/favicon.ico
+
+Pi mark: official paths reused from the header; see pi-logo-NOTICE.txt.
+The terminal beside just-bash is an app-drawn generic shell icon.
+
+Names and marks identify the upstream projects used by this independent demo.

app/public/licenses/onnxruntime-LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Microsoft Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

app/public/licenses/openbmb-avatar-NOTICE.txt

@@ -0,0 +1,6 @@
+OpenBMB avatar obtained from its Hugging Face organization on 2026-09-14.
+Organization: https://huggingface.co/openbmb
+Source: https://cdn-avatars.huggingface.co/v1/production/uploads/1670387859384-633fe7784b362488336bbfad.png
+
+The unmodified WebP image returned by the CDN is hosted locally and identifies
+the model's publisher.

app/public/licenses/pi-LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Mario Zechner
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

app/public/licenses/pi-logo-NOTICE.txt

@@ -0,0 +1,9 @@
+Pi logo: official Pi / Earendil mark, obtained 2026-09-14.
+Source and brand files: https://pi.dev/press-kit
+Primary logo: https://pi.dev/logo-auto.svg
+Favicon: https://pi.dev/favicon.svg
+
+The header and setup dialog preserve the official SVG paths, with a tighter
+viewBox and currentColor for sizing and the app's dark palette. The favicon
+is the unmodified official badge. Pi's name and logo identify the upstream
+project; this browser demo is an independent integration.

app/public/licenses/seti-icons-LICENSE.txt

@@ -0,0 +1,20 @@
+Copyright (c) 2014 Jesse Weed
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

app/public/licenses/seti-icons-NOTICE.txt

@@ -0,0 +1,6 @@
+Seti UI file icons by Jesse Weed and contributors, MIT license.
+Upstream: https://github.com/jesseweed/seti-ui
+Revision: 2d6c5e68b4ded73c92dac291845ee44e1182d511
+Used by VS Code’s built-in Seti file icon theme.
+Only 18 icons are included. SVG paths are preserved; viewBoxes are tightened for consistent 16px sizing. Colors use the Seti palette.
+The ZIP icon’s white knockout shapes are encoded as a luminance mask so its zipper remains visible when tinted.

app/public/licenses/seti-icons-sources.json

@@ -0,0 +1,74 @@
+{
+  "default": {
+    "source": "https://raw.githubusercontent.com/jesseweed/seti-ui/2d6c5e68b4ded73c92dac291845ee44e1182d511/icons/default.svg",
+    "upstream_sha256": "91cd6ad5e03ba15b5f763cb7f0a7eef4f5e95c72c6e3192b9187c703ed9e7dd6"
+  },
+  "markdown": {
+    "source": "https://raw.githubusercontent.com/jesseweed/seti-ui/2d6c5e68b4ded73c92dac291845ee44e1182d511/icons/markdown.svg",
+    "upstream_sha256": "d6e4b4d8b4b32dcaf0defcb0858236326a17a50931dcd30926c8b047dadc0d6c"
+  },
+  "csv": {
+    "source": "https://raw.githubusercontent.com/jesseweed/seti-ui/2d6c5e68b4ded73c92dac291845ee44e1182d511/icons/csv.svg",
+    "upstream_sha256": "77adc99b60bfef400b7619484e8646b5b89fcf7f5a28c50563006327f7c4d0e6"
+  },
+  "json": {
+    "source": "https://raw.githubusercontent.com/jesseweed/seti-ui/2d6c5e68b4ded73c92dac291845ee44e1182d511/icons/json.svg",
+    "upstream_sha256": "24429711d8ac39d70e0fd3398b2137d82d2637786781c8ed10f3de0b81a0e547"
+  },
+  "javascript": {
+    "source": "https://raw.githubusercontent.com/jesseweed/seti-ui/2d6c5e68b4ded73c92dac291845ee44e1182d511/icons/javascript.svg",
+    "upstream_sha256": "dfac57ebdebfea573cd92b04178feee655452e24021a6b5ad4da84c3f5cf8615"
+  },
+  "typescript": {
+    "source": "https://raw.githubusercontent.com/jesseweed/seti-ui/2d6c5e68b4ded73c92dac291845ee44e1182d511/icons/typescript.svg",
+    "upstream_sha256": "af103ea54f8ac748c4c785a8074d0ba13c71df614669af4739575ceb000f191d"
+  },
+  "react": {
+    "source": "https://raw.githubusercontent.com/jesseweed/seti-ui/2d6c5e68b4ded73c92dac291845ee44e1182d511/icons/react.svg",
+    "upstream_sha256": "ef9d06d0487eac79e90d3c186fb73310231a331896482643ab33931c05073e5e"
+  },
+  "html": {
+    "source": "https://raw.githubusercontent.com/jesseweed/seti-ui/2d6c5e68b4ded73c92dac291845ee44e1182d511/icons/html.svg",
+    "upstream_sha256": "96c58a9a1dd9467412383caaf94d1f2afdceca7ea3a86c0da799219482e14709"
+  },
+  "css": {
+    "source": "https://raw.githubusercontent.com/jesseweed/seti-ui/2d6c5e68b4ded73c92dac291845ee44e1182d511/icons/css.svg",
+    "upstream_sha256": "710485c53da43d6ca2b24c653feb38e2fe8826437293c1db433e212e14c127fc"
+  },
+  "python": {
+    "source": "https://raw.githubusercontent.com/jesseweed/seti-ui/2d6c5e68b4ded73c92dac291845ee44e1182d511/icons/python.svg",
+    "upstream_sha256": "366e9a8b7ef95ec16d876e893703f8aa2150935a4798a6f8e4ed3838bd8be7a1"
+  },
+  "shell": {
+    "source": "https://raw.githubusercontent.com/jesseweed/seti-ui/2d6c5e68b4ded73c92dac291845ee44e1182d511/icons/shell.svg",
+    "upstream_sha256": "6451507061f339c16d7e04793bb2531245498dc1e2d8ede1c385337f1e847a2c"
+  },
+  "config": {
+    "source": "https://raw.githubusercontent.com/jesseweed/seti-ui/2d6c5e68b4ded73c92dac291845ee44e1182d511/icons/config.svg",
+    "upstream_sha256": "217cf6c3ccc4e8b4bfb852541c39346f02e0697079175ec7302bc22a30bd59ca"
+  },
+  "image": {
+    "source": "https://raw.githubusercontent.com/jesseweed/seti-ui/2d6c5e68b4ded73c92dac291845ee44e1182d511/icons/image.svg",
+    "upstream_sha256": "cc80f50862719e8873e28e7d02aa72f31fafe136b80edcdb2717a7d4e2200439"
+  },
+  "svg": {
+    "source": "https://raw.githubusercontent.com/jesseweed/seti-ui/2d6c5e68b4ded73c92dac291845ee44e1182d511/icons/svg.svg",
+    "upstream_sha256": "1008d60478d5ee5c8b9ce557c589ecce69da48c899a94760c52ef5ea0b5b7555"
+  },
+  "git": {
+    "source": "https://raw.githubusercontent.com/jesseweed/seti-ui/2d6c5e68b4ded73c92dac291845ee44e1182d511/icons/git.svg",
+    "upstream_sha256": "d489688dde724ee4ba28182ba21185ee9cd8524a6bab40bae72c82c5cafd9af1"
+  },
+  "pdf": {
+    "source": "https://raw.githubusercontent.com/jesseweed/seti-ui/2d6c5e68b4ded73c92dac291845ee44e1182d511/icons/pdf.svg",
+    "upstream_sha256": "c1f3f09b2283f797f5e977cca244eba8e6d1ec50b3e7944f8d75348efed4a3c8"
+  },
+  "zip": {
+    "source": "https://raw.githubusercontent.com/jesseweed/seti-ui/2d6c5e68b4ded73c92dac291845ee44e1182d511/icons/zip.svg",
+    "upstream_sha256": "ef76ed8cac7f1203def4fdd138037601d6b96272ac8b833ab91439ec582bd3ee"
+  },
+  "db": {
+    "source": "https://raw.githubusercontent.com/jesseweed/seti-ui/2d6c5e68b4ded73c92dac291845ee44e1182d511/icons/db.svg",
+    "upstream_sha256": "12d620a9c1d8da4207867a9c595d0acb267f59e6b4dca2500b3ac8de26dcd28c"
+  }
+}

app/scripts/licenses.mjs

@@ -0,0 +1,27 @@
+import { readdir, readFile, mkdir, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+
+// Include dependency notices with the static distributable, without fetching
+// anything at build time. Some upstream Pi packages omit a LICENSE file;
+// their repository license is included in public/licenses/pi-LICENSE.
+export async function collectLicenses() {
+  const notices = [];
+  async function scan(root) {
+    for (const entry of await readdir(root, { withFileTypes: true })) {
+      if (!entry.isDirectory() || entry.name.startsWith('.')) continue;
+      const directory = path.join(root, entry.name);
+      if (entry.name.startsWith('@')) { await scan(directory); continue; }
+      let pkg;
+      try { pkg = JSON.parse(await readFile(path.join(directory, 'package.json'), 'utf8')); } catch { continue; }
+      const texts = [];
+      for (const file of await readdir(directory, { withFileTypes: true })) {
+        if (file.isFile() && /^(licen[cs]e|copying|notice|thirdpartynotices)/i.test(file.name)) texts.push(await readFile(path.join(directory, file.name), 'utf8'));
+      }
+      notices.push(`${pkg.name}@${pkg.version} (${pkg.license ?? 'see upstream'})\n${texts.join('\n')}\n`);
+    }
+  }
+  await scan('node_modules');
+  await mkdir('dist/licenses', { recursive: true });
+  await writeFile('dist/licenses/dependencies.txt', notices.sort().join('\n----------------------------------------\n\n'));
+  await writeFile('dist/licenses/pi-components.json', await readFile('vendor/pi-coding-agent/provenance.json'));
+}

app/scripts/pi-browser.mjs

@@ -0,0 +1,34 @@
+import { resolve } from 'node:path';
+import { readFileSync } from 'node:fs';
+import { createHash } from 'node:crypto';
+
+// Adapt host services at build time; never edit installed or vendored Pi code.
+// Exact package pin + component checksums make this boundary reviewable.
+export function piBrowser() {
+  const sourceRoot = resolve('vendor/pi-coding-agent');
+  const provenance = JSON.parse(readFileSync(resolve(sourceRoot, 'provenance.json'), 'utf8'));
+  for (const [file, expected] of Object.entries(provenance.files)) {
+    const actual = createHash('sha256').update(readFileSync(resolve(sourceRoot, file))).digest('hex');
+    if (actual !== expected) throw Error(`Vendored Pi component differs from its upstream checksum: ${file}`);
+  }
+  const host = resolve('src/pi/browser-host.mjs');
+  return {
+    name: 'pi-browser-host', enforce: 'pre',
+    resolveId(source, importer = '') {
+      if (source === '@earendil-works/pi-tui') return resolve('src/pi/entry.mjs');
+      if (importer.includes('/@earendil-works/pi-tui/')) {
+        if (source.endsWith('/terminal-image.js')) return resolve('src/pi/capabilities.mjs');
+        if (source === 'node:perf_hooks') return host;
+      }
+      if (importer.includes('/vendor/pi-coding-agent/') && source === '../theme/theme.js') return resolve('src/pi/theme.mjs');
+    },
+    transform(code, id) {
+      if (!id.includes('/@earendil-works/pi-tui/') || !id.split('?')[0].endsWith('.js')) return;
+      // Browser timer IDs don't have Node's event-loop keepalive methods.
+      // Scrolling, selection autoscroll and flash timers still run normally.
+      let adapted = code.replace(/\.unref\(\)/g, '.unref?.()');
+      if (/\b(?:process|Buffer)\./.test(code)) adapted = `import { browserProcess as process, Buffer } from ${JSON.stringify(host)};\n${adapted}`;
+      if (adapted !== code) return { code: adapted, map: null };
+    },
+  };
+}

app/src/agent.worker.mjs

@@ -0,0 +1,102 @@
+import { Agent } from '@earendil-works/pi-agent-core';
+import { createInference, localModel } from './inference.mjs';
+import { createWorkspace, initialFiles, legacyProductsCsv, legacyProductsJson, legacyCostProductsJson, legacySalesCsv, legacyWorkspaceReadme, legacyProfitReadme } from './workspace.mjs';
+import { openStorage } from './storage.mjs';
+import { isModelCached } from './download.mjs';
+
+const emit = data => postMessage(data);
+const inference = createInference(emit);
+let workspace, agent, storage, busy = false, operation, turnCount = 0;
+const systemPrompt = `You are Pi, a coding assistant powered by MiniCPM5-2B, a language model from OpenBMB.
+The model, inference, tools, and workspace run entirely in the user's browser. Workspace files are stored in this browser, not on the user's operating-system filesystem.
+Use your tools to inspect and change actual files. Never claim a command ran or a file changed without a successful tool result.
+When the user explicitly asks you to use a tool, call that tool even if you already know the answer.
+Working directory: /workspace. Use read, write, edit, and bash. Keep tool calls and answers concise.
+The bash tool supports cat, ls, find, grep, sed, awk, jq, sort, wc, printf, pipes, redirects, and shell scripts.
+Use jq for JSON and awk for CSV and calculations; python, python3, node, npm, and native binaries are unavailable.
+Use curl -fsS for HTTP requests to the hosts listed by the bash tool. To save a response, use curl -fsS URL -o file.json, then inspect it with jq or read. For pipelines use set -o pipefail so failed downloads are not mistaken for success. CORS and redirect errors are browser limitations: report them accurately; do not invent fetched content or repeatedly retry blocked requests.
+You can create and edit text files, including HTML, CSS, JavaScript, and shell scripts. External URLs may be referenced without fetching them. Only claim an asset was fetched or tested after a successful tool result. HTTP requests send the requested URL and any explicit request data to that external server; model inference stays local.
+Interpret short follow-ups using the conversation and inspect the relevant files when needed.
+Inspect files before editing them. After changing files, verify the result with a tool. Finish with a short factual answer.`;
+
+async function snapshot() { return { version: 1, demoVersion: 4, files: await workspace.snapshot(), entries: await workspace.serialize(), messages: agent.state.messages }; }
+async function persist() {
+  const state = await snapshot();
+  try { await storage?.save(state); } catch (e) { emit({ type: 'persistence_error', error: 'Changes are in memory, but browser storage failed: ' + e.message }); }
+  emit({ type: 'workspace', files: state.files });
+  return state;
+}
+const initialized = (async () => {
+  let saved;
+  try { storage = await openStorage(); saved = await storage.load(); }
+  catch (e) { emit({ type: 'persistence_error', error: 'Workspace saving is unavailable: ' + e.message }); }
+  workspace = createWorkspace(saved?.files, saved?.entries);
+  await workspace.ready;
+  const upgradeDemo = saved && (saved.demoVersion ?? 0) < 4;
+  if (upgradeDemo) {
+    // Move prices and quantities together only for a recognized untouched demo.
+    // Never remove a price column if its companion file was edited or deleted.
+    const paths = workspace.bash.fs.getAllPaths();
+    const csv = '/workspace/products.csv', json = '/workspace/products.json', sales = '/workspace/sales.csv';
+    const untouched = async (file, versions) => paths.includes(file) && (await workspace.bash.fs.lstat(file)).isFile && versions.includes(await workspace.read(file));
+    if (await untouched(sales, [legacySalesCsv])) {
+      const oldJson = await untouched(json, [legacyProductsJson, legacyCostProductsJson]);
+      const oldCsv = !paths.includes(json) && await untouched(csv, [legacyProductsCsv]);
+      const originalDemo = (saved.demoVersion ?? 0) < 1 && !paths.includes(json) && !paths.includes(csv);
+      if (oldJson || oldCsv || originalDemo) {
+        await workspace.write(sales, initialFiles[sales]);
+        await workspace.write(json, initialFiles[json]);
+        if (oldCsv) await workspace.bash.fs.rm(csv);
+      }
+    }
+    const readme = '/workspace/README.md';
+    if (await untouched(readme, [legacyWorkspaceReadme, legacyProfitReadme])) {
+      await workspace.write(readme, initialFiles[readme]);
+    }
+  }
+  agent = new Agent({ initialState: { model: localModel, thinkingLevel: 'medium', systemPrompt, tools: workspace.tools, messages: saved?.messages ?? [] },
+    streamFn: inference.streamFn, toolExecution: 'sequential',
+    afterToolCall: ({ result, isError }) => ({ isError: isError || (result.details?.exitCode !== undefined && result.details.exitCode !== 0) }),
+    shouldStopAfterTurn: ({ toolResults }) => {
+      const stop = ++turnCount >= 12 && toolResults.length > 0;
+      if (stop) emit({ type: 'notice', text: 'Paused after 12 agent turns. Send a follow-up to continue.' });
+      return stop;
+    },
+  });
+  agent.subscribe(async event => {
+    emit({ type: 'agent_event', event });
+    if (event.type === 'tool_execution_end' || event.type === 'agent_end') await persist();
+  });
+  const state = await snapshot();
+  if (upgradeDemo) {
+    try { await storage?.save(state); }
+    catch (e) { emit({ type: 'persistence_error', error: 'Changes are in memory, but browser storage failed: ' + e.message }); }
+  }
+  emit({ type: 'initialized', ...state });
+})();
+
+onmessage = async ({ data }) => {
+  const { id, action, args = {} } = data;
+  const reply = value => emit({ type: 'reply', id, value });
+  try {
+    await initialized;
+    if (action === 'stop') { operation?.abort(); agent.abort(); inference.stop(); return reply(true); }
+    if (action === 'snapshot') return reply(await snapshot());
+    if (action === 'cache_status') return reply(await isModelCached());
+    if (busy) throw Error('Wait for the current operation or stop it first.');
+    busy = true; operation = new AbortController(); emit({ type: 'busy', action, cachedOnly: args.cachedOnly === true });
+    try {
+      let value;
+      if (action === 'load') { await inference.load(args, operation.signal); value = inference.device; }
+      else if (action === 'prompt') {
+        turnCount = 0; await agent.prompt(args.text); value = await snapshot();
+      } else if (action === 'shell') {
+        value = await workspace.bash.exec(args.command, { signal: operation.signal }); await persist();
+      } else if (action === 'write') { await workspace.write(args.path, args.content); value = await persist(); }
+      else if (action === 'new_chat') { agent.reset(); value = await persist(); }
+      else if (action === 'read') value = await workspace.read(args.path);
+      else throw Error('Unknown action: ' + action);
+      reply(value);
+    } finally { busy = false; operation = undefined; emit({ type: 'idle' }); }
+  } catch (error) { emit({ type: 'reply', id, error: error?.name === 'AbortError' ? 'Stopped.' : String(error?.message ?? error), errorName: error?.name, errorCode: error?.code }); }
+};

app/src/browser-http.mjs

@@ -0,0 +1,67 @@
+// just-bash's curl/wget use this browser transport. There is no proxy/server.
+export const HTTP_ORIGINS = Object.freeze([
+  'https://api.github.com',
+  'https://raw.githubusercontent.com',
+  'https://huggingface.co',
+  'https://jsonplaceholder.typicode.com',
+  'https://httpbin.org',
+]);
+export const HTTP_METHODS = Object.freeze(['GET', 'HEAD', 'POST']);
+export const HTTP_LIMIT = 1024 * 1024;
+export const HTTP_TIMEOUT = 8_000;
+
+export function createBrowserFetch({ transport = globalThis.fetch, origins = HTTP_ORIGINS,
+  timeoutMs = HTTP_TIMEOUT, maxBytes = HTTP_LIMIT } = {}) {
+  const allowed = new Set(origins);
+  return async (input, options = {}) => {
+    const url = new URL(input);
+    if (url.protocol !== 'https:' || !allowed.has(url.origin)) {
+      throw Error(`HTTP destination is not enabled in this experiment. Allowed hosts: ${[...allowed].map(x => new URL(x).host).join(', ')}.`);
+    }
+    if (url.username || url.password) throw Error('Credentials in URLs are unsupported. Use an explicit Authorization header if needed.');
+    const method = (options.method ?? 'GET').toUpperCase();
+    if (!HTTP_METHODS.includes(method)) throw Error(`HTTP method ${method} is not enabled. Use GET, HEAD, or POST.`);
+    const requestedTimeout = options.timeoutMs > 0 ? options.timeoutMs : timeoutMs;
+    const controller = new AbortController();
+    const deadline = Math.min(requestedTimeout, timeoutMs);
+    const timer = setTimeout(() => controller.abort(new DOMException(`HTTP request timed out after ${deadline} ms.`, 'TimeoutError')), deadline);
+    const signal = options.signal ? AbortSignal.any([options.signal, controller.signal]) : controller.signal;
+    let reader;
+    try {
+      signal.throwIfAborted();
+      const response = await transport(url.href, { method, headers: options.headers,
+        body: ['GET', 'HEAD'].includes(method) ? undefined : options.body,
+        mode: 'cors', credentials: 'omit', redirect: 'manual', referrerPolicy: 'no-referrer', signal });
+      // Browsers hide both the Location header and status on manual redirects.
+      // Following automatically would skip the host check at intermediate hops.
+      if (response.type === 'opaqueredirect' || (response.status >= 300 && response.status < 400 && response.status !== 304)) {
+        throw Error('HTTP redirect cannot be followed safely in this browser shell. Use the final HTTPS URL directly (including exact capitalization).');
+      }
+      if (response.status === 0 || response.type === 'opaque') throw Error('HTTP response is unreadable. The destination must allow browser access with CORS.');
+      if (Number(response.headers.get('content-length')) > maxBytes) {
+        await response.body?.cancel();
+        throw Error(`HTTP response exceeds the ${maxBytes}-byte limit.`);
+      }
+      const chunks = []; let size = 0;
+      if (response.body) {
+        reader = response.body.getReader();
+        while (true) {
+          const { done, value } = await reader.read();
+          signal.throwIfAborted();
+          if (done) break;
+          size += value.byteLength;
+          if (size > maxBytes) { await reader.cancel(); throw Error(`HTTP response exceeds the ${maxBytes}-byte limit.`); }
+          chunks.push(value);
+        }
+      }
+      const body = new Uint8Array(size); let offset = 0;
+      for (const chunk of chunks) { body.set(chunk, offset); offset += chunk.byteLength; }
+      return { status: response.status, statusText: response.statusText,
+        headers: Object.fromEntries(response.headers.entries()), body, url: response.url || url.href };
+    } catch (error) {
+      if (signal.aborted) throw signal.reason;
+      if (error instanceof TypeError) throw Error('HTTP request failed: the server may block browser requests (CORS), or the connection failed. No proxy is used.');
+      throw error;
+    } finally { clearTimeout(timer); reader?.releaseLock(); }
+  };
+}

app/src/cat-sound.mjs

@@ -0,0 +1,12 @@
+// Share one preloaded clip so rapid clicks replay it without stacking meows.
+const meow = new Audio(new URL('../public/cat-meow-v1.mp3', import.meta.url).href);
+meow.preload = 'auto';
+meow.volume = .65;
+
+export function playCatSound() {
+  // Call directly from the click handler so mobile browsers allow playback.
+  try {
+    meow.currentTime = 0;
+    void meow.play().catch(() => {});
+  } catch { /* A failed audio download must not interrupt the cat interaction. */ }
+}

app/src/column-resizer.mjs

@@ -0,0 +1,84 @@
+const STORAGE_KEY = 'pi-column-ratio';
+const DEFAULT_RATIO = 1 / 1.83;
+
+export function createColumnResizer(layout, handle) {
+  const desktop = matchMedia('(min-width: 851px)');
+  const style = getComputedStyle(layout);
+  const minimumChat = parseFloat(style.getPropertyValue('--conversation-min'));
+  const minimumWorkspace = parseFloat(style.getPropertyValue('--workspace-min'));
+  let ratio = DEFAULT_RATIO, drag, frame = 0;
+  try {
+    const saved = Number(localStorage.getItem(STORAGE_KEY));
+    if (Number.isFinite(saved) && saved > 0 && saved < 1) ratio = saved;
+  } catch { /* The divider also works when browser storage is unavailable. */ }
+
+  function apply() {
+    if (!desktop.matches) return;
+    const width = layout.getBoundingClientRect().width;
+    if (!width) return;
+    const chat = Math.max(minimumChat, Math.min(width - minimumWorkspace, width * ratio));
+    layout.style.setProperty('--conversation-width', `${chat}px`);
+    const percent = Math.round(chat / width * 100);
+    handle.setAttribute('aria-valuemin', String(Math.round(minimumChat / width * 100)));
+    handle.setAttribute('aria-valuemax', String(Math.round((width - minimumWorkspace) / width * 100)));
+    handle.setAttribute('aria-valuenow', String(percent));
+    handle.setAttribute('aria-valuetext', `Chat ${percent}%, workspace ${100 - percent}%`);
+  }
+  function save() { try { localStorage.setItem(STORAGE_KEY, String(ratio)); } catch {} }
+  function setWidth(pixels) {
+    const width = layout.getBoundingClientRect().width;
+    ratio = Math.max(minimumChat, Math.min(width - minimumWorkspace, pixels)) / width;
+    apply();
+  }
+  function flushDrag() {
+    cancelAnimationFrame(frame); frame = 0;
+    if (drag) setWidth(drag.x - layout.getBoundingClientRect().left - drag.offset);
+  }
+  function finish(commit) {
+    if (!drag) return;
+    if (commit) flushDrag();
+    else { cancelAnimationFrame(frame); frame = 0; ratio = drag.initialRatio; }
+    const pointer = drag.pointer; drag = undefined;
+    if (handle.hasPointerCapture(pointer)) handle.releasePointerCapture(pointer);
+    document.documentElement.classList.remove('is-resizing-columns');
+    apply(); if (commit) save();
+  }
+  function reset() { finish(false); ratio = DEFAULT_RATIO; apply(); save(); }
+  handle.addEventListener('pointerdown', event => {
+    if (!desktop.matches || event.button !== 0 || !event.isPrimary || drag) return;
+    event.preventDefault(); handle.focus({ preventScroll: true });
+    const boundary = layout.querySelector('.conversation').getBoundingClientRect().right;
+    drag = { pointer: event.pointerId, initialRatio: ratio, x: event.clientX, offset: event.clientX - boundary };
+    handle.setPointerCapture(event.pointerId);
+    document.documentElement.classList.add('is-resizing-columns');
+  });
+  handle.addEventListener('pointermove', event => {
+    if (!drag || event.pointerId !== drag.pointer) return;
+    drag.x = event.clientX;
+    if (!frame) frame = requestAnimationFrame(flushDrag);
+  });
+  handle.addEventListener('pointerup', event => {
+    if (!drag || event.pointerId !== drag.pointer) return;
+    drag.x = event.clientX; finish(true);
+  });
+  handle.addEventListener('pointercancel', () => finish(false));
+  handle.addEventListener('lostpointercapture', () => finish(false));
+  handle.addEventListener('dblclick', reset);
+  handle.addEventListener('keydown', event => {
+    if (!desktop.matches) return;
+    if (event.key === 'Escape' && drag) { event.preventDefault(); finish(false); return; }
+    if (!['ArrowLeft', 'ArrowRight', 'Home', 'End', 'Enter'].includes(event.key)) return;
+    event.preventDefault();
+    if (event.key === 'Enter') { reset(); return; }
+    finish(false);
+    const width = layout.querySelector('.conversation').getBoundingClientRect().width;
+    const step = event.shiftKey ? 48 : 16;
+    setWidth(event.key === 'Home' ? 0 : event.key === 'End' ? Infinity : width + (event.key === 'ArrowLeft' ? -step : step));
+    save();
+  });
+  window.addEventListener('blur', () => finish(false));
+  desktop.addEventListener('change', () => { finish(false); apply(); });
+  // Keep the preferred ratio on window resize, clamping only its displayed size.
+  new ResizeObserver(apply).observe(layout);
+  apply();
+}

app/src/context-usage.mjs

@@ -0,0 +1,16 @@
+export const CONTEXT_LIMIT = 8192;
+
+// Usage describes the latest model call, not unsent draft text or the full
+// saved transcript (which can contain turns excluded from model context).
+export function restoredContextUsage(messages) {
+  const last = messages.findLast(message => message.role === 'assistant' && message.usage?.input > 0);
+  if (last) return { inputTokens: last.usage.input, outputTokens: last.usage.output ?? 0 };
+  return messages.length ? null : { inputTokens: 0, outputTokens: 0 };
+}
+
+export function contextLabel(usage) {
+  if (!usage) return `—/${CONTEXT_LIMIT.toLocaleString('en-US')} context`;
+  const used = usage.inputTokens + usage.outputTokens;
+  const remaining = Math.max(0, CONTEXT_LIMIT - used);
+  return `${used.toLocaleString('en-US')}/${CONTEXT_LIMIT.toLocaleString('en-US')} context · ${remaining.toLocaleString('en-US')} free`;
+}

app/src/download.mjs

@@ -0,0 +1,144 @@
+import { createSHA256 } from 'hash-wasm';
+import manifest from './model-manifest.json';
+
+export const REVISION = '04a6c49fcba3a65a0351c92644c3a7e9d4343059';
+export const MODEL_ID = 'Mike0021/MiniCPM5-2B-ONNX';
+export const MODEL_BYTES = Object.values(manifest.files).reduce((n, f) => n + f.bytes, 0);
+const CHUNK = 32 * 1024 ** 2;
+const sleep = (ms, signal) => new Promise((resolve, reject) => {
+  signal?.throwIfAborted();
+  const abort = () => { clearTimeout(timer); reject(signal.reason); };
+  const timer = setTimeout(() => { signal?.removeEventListener('abort', abort); resolve(); }, ms);
+  signal?.addEventListener('abort', abort, { once: true });
+});
+
+async function fetchPart(url, start, end, total, signal) {
+  for (let attempt = 0; ; attempt++) {
+    try {
+      const part = total > CHUNK;
+      const response = await fetch(url, { headers: part ? { Range: `bytes=${start}-${end}` } : {},
+        signal: AbortSignal.any([signal, AbortSignal.timeout(90_000)]), cache: 'no-store' });
+      if (!response.ok) throw Error(`Download returned HTTP ${response.status}`);
+      if (part && response.status !== 206) {
+        await response.body?.cancel();
+        throw Error('The model host did not honor byte ranges.');
+      }
+      const range = response.headers.get('Content-Range');
+      if (range && range !== `bytes ${start}-${end}/${total}`) {
+        await response.body?.cancel(); throw Error('Incorrect download range.');
+      }
+      const data = new Uint8Array(await response.arrayBuffer());
+      if (data.length !== end - start + 1) throw Error('Incomplete download chunk.');
+      return data;
+    } catch (error) {
+      signal.throwIfAborted();
+      if (attempt === 2) throw error;
+      await sleep(500 * 2 ** attempt, signal);
+    }
+  }
+}
+
+export async function prepareModelCache(baseURL, options) {
+  if (navigator.locks) return navigator.locks.request('pi-minicpm5-download-' + REVISION,
+    { signal: options.signal }, () => downloadModel(baseURL, options));
+  return downloadModel(baseURL, options);
+}
+
+async function readCacheState(create = false) {
+  if (!navigator.storage?.getDirectory) throw Error('This app needs browser file storage (OPFS) to cache the 1.84 GB model. Open it in a regular browser tab.');
+  const root = await (await navigator.storage.getDirectory()).getDirectoryHandle('pi-minicpm5-' + REVISION, { create });
+  const receiptsFile = await root.getFileHandle('verified.json', { create });
+  let receipts;
+  try { receipts = JSON.parse(await (await receiptsFile.getFile()).text()); } catch { receipts = {}; }
+  if (!receipts || typeof receipts !== 'object' || Array.isArray(receipts)) receipts = {};
+  let cached = 0;
+  const pending = [];
+  const key = file => encodeURIComponent(file);
+  for (const [file, spec] of Object.entries(manifest.files)) {
+    try {
+      const stored = await (await root.getFileHandle(key(file))).getFile();
+      const receipt = receipts[file];
+      if (stored.size === spec.bytes && receipt?.sha256 === spec.sha256 && receipt.modified === stored.lastModified) {
+        cached += spec.bytes; continue;
+      }
+    } catch (e) { if (e.name !== 'NotFoundError') throw e; }
+    pending.push([file, spec]);
+  }
+  return { root, receiptsFile, receipts, pending, cached };
+}
+
+export async function isModelCached() {
+  try { return (await readCacheState()).pending.length === 0; }
+  catch { return false; }
+}
+
+function cacheMiss() {
+  return Object.assign(Error('The saved model is incomplete. Confirm the download to restore it.'), { code: 'MODEL_CACHE_MISS' });
+}
+
+async function downloadModel(baseURL, { signal, cachedOnly = false, onProgress = () => {} }) {
+  let state;
+  try { state = await readCacheState(!cachedOnly); }
+  catch (error) { if (cachedOnly && error.name === 'NotFoundError') throw cacheMiss(); throw error; }
+  const { root, receiptsFile, receipts, pending, cached } = state;
+  // Recheck under the download lock: another tab or eviction may have changed
+  // the cache after the UI checked it. Automatic restores never fetch weights.
+  if (cachedOnly && pending.length) throw cacheMiss();
+  let completed = cached;
+  const key = file => encodeURIComponent(file);
+  onProgress({ phase: 'download', loaded: completed, total: MODEL_BYTES, cached });
+  if (pending.length) {
+    const estimate = await navigator.storage.estimate();
+    if (estimate.quota && estimate.quota - estimate.usage < MODEL_BYTES - completed + CHUNK) {
+      throw Error('Not enough browser storage for the model. Free at least 2 GB and retry.');
+    }
+  }
+  const controller = new AbortController();
+  const combined = AbortSignal.any([signal, controller.signal]);
+  let receiptWrites = Promise.resolve();
+  const saveReceipts = () => {
+    const serialized = JSON.stringify(receipts);
+    const write = receiptWrites.then(async () => {
+      const stream = await receiptsFile.createWritable(); await stream.write(serialized); await stream.close();
+    });
+    receiptWrites = write.catch(() => {}); return write;
+  };
+  async function worker() {
+    while (pending.length) {
+      combined.throwIfAborted();
+      const [file, spec] = pending.shift();
+      const handle = await root.getFileHandle(key(file), { create: true });
+      const output = await handle.createWritable();
+      try {
+        const hash = await createSHA256(); hash.init();
+        for (let start = 0; start < spec.bytes; start += CHUNK) {
+          const end = Math.min(start + CHUNK, spec.bytes) - 1;
+          const data = await fetchPart(baseURL + file, start, end, spec.bytes, combined);
+          combined.throwIfAborted();
+          hash.update(data); await output.write(data); completed += data.length;
+          onProgress({ phase: 'download', file, loaded: completed, total: MODEL_BYTES, cached });
+        }
+        if (hash.digest('hex') !== spec.sha256) throw Error('SHA-256 verification failed: ' + file);
+        await output.close();
+        receipts[file] = { sha256: spec.sha256, modified: (await handle.getFile()).lastModified };
+        await saveReceipts();
+      } catch (error) { await output.abort().catch(() => {}); controller.abort(error); throw error; }
+    }
+  }
+  const outcomes = await Promise.allSettled(Array.from({ length: 6 }, worker));
+  const failed = outcomes.find(r => r.status === 'rejected');
+  if (failed) throw failed.reason;
+  await receiptWrites;
+  return {
+    cachedBytes: cached,
+    async match(request) {
+      const url = typeof request === 'string' ? request : request.url;
+      if (!url.startsWith(baseURL)) return undefined;
+      const file = url.slice(baseURL.length);
+      if (!Object.hasOwn(manifest.files, file)) return undefined;
+      const stored = await (await root.getFileHandle(key(file))).getFile();
+      return new Response(stored, { headers: { 'Content-Length': String(stored.size) } });
+    },
+    async put() { /* All supported files are already downloaded and verified. */ },
+  };
+}

app/src/editor-highlight.worker.mjs

@@ -0,0 +1,39 @@
+import './prism-worker-setup.mjs';
+import Prism from 'prismjs/components/prism-core.js';
+import 'prismjs/components/prism-markup.js';
+import 'prismjs/components/prism-css.js';
+import 'prismjs/components/prism-clike.js';
+import 'prismjs/components/prism-javascript.js';
+import 'prismjs/components/prism-typescript.js';
+import 'prismjs/components/prism-jsx.js';
+import 'prismjs/components/prism-tsx.js';
+import 'prismjs/components/prism-json.js';
+import 'prismjs/components/prism-yaml.js';
+import 'prismjs/components/prism-markdown.js';
+import 'prismjs/components/prism-python.js';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-toml.js';
+import 'prismjs/components/prism-sql.js';
+import 'prismjs/components/prism-csv.js';
+import 'prismjs/components/prism-c.js';
+import 'prismjs/components/prism-cpp.js';
+import 'prismjs/components/prism-csharp.js';
+import 'prismjs/components/prism-java.js';
+import 'prismjs/components/prism-go.js';
+import 'prismjs/components/prism-rust.js';
+import 'prismjs/components/prism-diff.js';
+import 'prismjs/components/prism-docker.js';
+import { canHighlight } from './editor-language.mjs';
+
+Prism.manual = true;
+self.onmessage = ({ data: { id, text, language } }) => {
+  let html = null;
+  try {
+    if (canHighlight(text) && Prism.languages[language]) {
+      const highlighted = Prism.highlight(text, Prism.languages[language], language);
+      // Avoid building a huge DOM even for short, unusually token-dense files.
+      if (highlighted.length < 1_000_000 && (highlighted.match(/<span /g)?.length ?? 0) < 12_000) html = highlighted;
+    }
+  } catch { /* A grammar failure must never prevent editing a file. */ }
+  self.postMessage({ id, html });
+};