Deploy static pi web agent

.gitignore

@@ -0,0 +1,9 @@
+node_modules/
+dist/
+.vite/
+.cache/
+output/
+refs/
+source/
+.swapfile
+*.log

README.md

@@ -1,10 +1,120 @@
 ---
 title: MiniCPM5 Pi Web Agent
-emoji: 💻
-colorFrom: blue
-colorTo: indigo
 sdk: static
-pinned: false
+app_build_command: npm ci --omit=dev && npm run build
+app_file: dist/index.html
+fullWidth: true
+models:
+  - Mike0021/MiniCPM5-1B-ONNX-Web
+custom_headers:
+  cross-origin-embedder-policy: credentialless
+  cross-origin-opener-policy: same-origin
+  cross-origin-resource-policy: cross-origin
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# MiniCPM5-1B Pi Web Agent
+
+This workspace converts `openbmb/MiniCPM5-1B` into a browser-loadable Transformers.js model and ships a browser-only pi agent app.
+
+Published artifact: https://huggingface.co/Mike0021/MiniCPM5-1B-ONNX-Web
+
+The required runtime layout is:
+
+- `config.json`, `generation_config.json`, tokenizer files, and `chat_template.jinja` at the repo root
+- q4 ONNX weights at `onnx/model_q4.onnx`
+- `config.json` includes `transformers.js_config.dtype = "q4"` so the default loader selects the web-sized artifact
+
+The conversion uses an ONNX export with KV cache (`text-generation-with-past`) and then applies ONNX Runtime 4-bit MatMul quantization. A generic ONNX export without KV cache is not enough for normal Transformers.js autoregressive generation.
+
+## Run the Web App
+
+```bash
+npm install
+npm run dev
+```
+
+Open http://localhost:5173/.
+
+The app uses:
+
+- `@earendil-works/pi-agent-core` for the agent loop, transcript state, and tool execution.
+- `@huggingface/transformers` with `Mike0021/MiniCPM5-1B-ONNX-Web` for the local browser model.
+- `@webcontainer/api` for the client-only sandbox with a virtual filesystem and browser-contained Node.js processes.
+
+Vite serves the app with COOP/COEP headers and boots WebContainers with `coep: "credentialless"`. The deterministic test model is available at `http://localhost:5173/?mode=mock&device=wasm` for fast harness and sandbox smoke tests without downloading the full ONNX model.
+
+The Static Space uses the same isolation policy through `custom_headers` in this README frontmatter.
+
+## Test the Agent App
+
+Start the dev server, then run:
+
+```bash
+npm run smoke:web
+```
+
+The smoke test opens Chromium, confirms `crossOriginIsolated`, boots the WebContainer sandbox, runs the pi agent in deterministic mode, writes `hello.js`, spawns `node hello.js`, and checks for `pi sandbox result: 42` in the transcript.
+
+For the heavier end-to-end check with the real MiniCPM5 ONNX model in browser WASM mode:
+
+```bash
+npm run smoke:local-model
+```
+
+This downloads/loads the q4 ONNX artifact in Chromium, runs the same pi/WebContainer task, and checks that the model reaches `Model ready` before the sandbox result is accepted.
+
+## Verify the Published Artifact
+
+```bash
+npm install
+node scripts/verify_tjs_model.mjs Mike0021/MiniCPM5-1B-ONNX-Web
+```
+
+The verifier asks Transformers.js for the `text-generation` file plan, checks for `onnx/model_q4.onnx`, then loads the model and generates a short completion.
+
+## Convert and Upload
+
+The published repo was produced locally with a CPU fp16 export followed by q4 ONNX quantization:
+
+```bash
+uv run --python 3.12 \
+  --with "numpy<2" \
+  --with "transformers==4.57.6" \
+  --with "optimum[onnx]" \
+  --with "onnxruntime==1.20.1" \
+  --with onnxslim \
+  --with "huggingface_hub>=0.33" \
+  --with accelerate \
+  --with sentencepiece \
+  --with protobuf \
+  scripts/convert_minicpm5_tjs.py \
+  --source-model openbmb/MiniCPM5-1B \
+  --target-repo Mike0021/MiniCPM5-1B-ONNX-Web \
+  --output-dir output/MiniCPM5-1B-ONNX-Web \
+  --work-dir output/minicpm5-work \
+  --device cpu \
+  --export-dtype fp16
+```
+
+For a clean remote conversion, the same script can be run on Hugging Face Jobs with a configured Hub token:
+
+```bash
+hf repos create Mike0021/MiniCPM5-1B-ONNX-Web --repo-type model --exist-ok
+hf jobs uv run scripts/convert_minicpm5_tjs.py \
+  --flavor l4x1 \
+  --timeout 6h \
+  --secrets HF_TOKEN \
+  --with "numpy<2" \
+  --with "transformers==4.57.6" \
+  --with "optimum[onnx]" \
+  --with "onnxruntime==1.20.1" \
+  --with onnxslim \
+  --with "huggingface_hub>=0.33" \
+  --with accelerate \
+  --with sentencepiece \
+  --with protobuf \
+  --python 3.12 \
+  -- \
+  --target-repo Mike0021/MiniCPM5-1B-ONNX-Web \
+  --export-dtype fp16
+```

index.html

@@ -1,19 +1,81 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MiniCPM5 Pi Web Agent</title>
+  </head>
+  <body>
+    <main id="app">
+      <section class="shell">
+        <header class="topbar">
+          <div>
+            <h1>Pi Web Agent</h1>
+            <p id="model-label"></p>
+          </div>
+          <div class="status-stack" aria-label="Runtime status">
+            <span class="status" id="status">Idle</span>
+            <span class="status" id="model-status">Model idle</span>
+            <span class="status" id="sandbox-status">Sandbox idle</span>
+          </div>
+        </header>
+
+        <section class="controls" aria-label="Agent controls">
+          <label>
+            Model
+            <select id="mode">
+              <option value="local">MiniCPM5 q4</option>
+              <option value="mock">Deterministic test</option>
+            </select>
+          </label>
+          <label>
+            Device
+            <select id="device">
+              <option value="webgpu">WebGPU</option>
+              <option value="wasm">WASM</option>
+            </select>
+          </label>
+          <label>
+            Max tokens
+            <input id="max-new-tokens" type="number" min="16" max="512" step="1" value="160" />
+          </label>
+          <label>
+            Temperature
+            <input id="temperature" type="number" min="0" max="1.5" step="0.05" value="0" />
+          </label>
+        </section>
+
+        <section class="command-row" aria-label="Sandbox actions">
+          <button id="boot-sandbox" type="button">Boot Sandbox</button>
+          <button id="reset-sandbox" type="button">Reset</button>
+          <button id="demo-prompt" type="button">Demo Prompt</button>
+        </section>
+
+        <section class="workspace">
+          <div class="prompt-pane">
+            <label class="prompt-label" for="prompt">Task</label>
+            <textarea id="prompt" spellcheck="true">Create hello.js that prints the result of 21 * 2, run it with Node, and tell me the command output.</textarea>
+            <button id="run" type="button">Run Agent</button>
+          </div>
+
+          <div class="panes">
+            <section class="pane">
+              <h2>Transcript</h2>
+              <pre id="transcript"></pre>
+            </section>
+            <section class="pane">
+              <h2>Sandbox Files</h2>
+              <pre id="files"></pre>
+            </section>
+            <section class="pane wide">
+              <h2>Events</h2>
+              <pre id="event-log"></pre>
+            </section>
+          </div>
+        </section>
+      </section>
+    </main>
+    <script type="module" src="/src/main.js"></script>
+  </body>
 </html>
+

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "minicpm5-transformersjs-web",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0",
+    "build": "vite build",
+    "preview": "vite preview --host 0.0.0.0",
+    "smoke:local-model": "node scripts/smoke_local_model_web_agent.mjs",
+    "smoke:web": "node scripts/smoke_web_agent.mjs",
+    "verify": "node scripts/verify_tjs_model.mjs"
+  },
+  "dependencies": {
+    "@earendil-works/pi-agent-core": "^0.75.5",
+    "@earendil-works/pi-ai": "^0.75.5",
+    "@huggingface/transformers": "^4.2.0",
+    "@webcontainer/api": "^1.6.4",
+    "vite": "^7.2.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.60.0"
+  }
+}

scripts/convert_minicpm5_tjs.py

@@ -0,0 +1,229 @@
+#!/usr/bin/env python3
+"""Convert openbmb/MiniCPM5-1B to a Transformers.js q4 ONNX repo."""
+
+from __future__ import annotations
+
+import argparse
+import json
+import logging
+import os
+import shutil
+import subprocess
+import sys
+import tarfile
+import tempfile
+import urllib.request
+from dataclasses import asdict
+from pathlib import Path
+
+from huggingface_hub import HfApi, create_repo
+from optimum.exporters.onnx import main_export
+from transformers import AutoConfig
+
+
+SOURCE_MODEL = "openbmb/MiniCPM5-1B"
+TRANSFORMERS_JS_TAG = "3.8.1"
+TRANSFORMERS_JS_TARBALL = (
+    f"https://github.com/huggingface/transformers.js/archive/refs/tags/{TRANSFORMERS_JS_TAG}.tar.gz"
+)
+
+
+def run(cmd: list[str], cwd: Path | None = None) -> None:
+    print("+", " ".join(cmd), flush=True)
+    subprocess.run(cmd, cwd=cwd, check=True)
+
+
+def download_transformers_js(work_dir: Path) -> Path:
+    archive_path = work_dir / "transformers.js.tar.gz"
+    urllib.request.urlretrieve(TRANSFORMERS_JS_TARBALL, archive_path)
+    with tarfile.open(archive_path) as archive:
+        archive.extractall(work_dir)
+    return work_dir / f"transformers.js-{TRANSFORMERS_JS_TAG}"
+
+
+def patch_config(config_path: Path, dtype: str, q4_external_chunks: int) -> None:
+    config = json.loads(config_path.read_text())
+    config.setdefault("transformers.js_config", {})
+    config["transformers.js_config"]["dtype"] = dtype
+    if q4_external_chunks:
+        config["transformers.js_config"]["use_external_data_format"] = {
+            "model_q4.onnx": q4_external_chunks,
+        }
+    else:
+        config["transformers.js_config"].pop("use_external_data_format", None)
+    config_path.write_text(json.dumps(config, indent=2) + "\n")
+
+
+def write_readme(output_dir: Path, source_model: str, target_repo: str) -> None:
+    readme = f"""---
+license: apache-2.0
+library_name: transformers.js
+pipeline_tag: text-generation
+base_model: {source_model}
+tags:
+- transformers.js
+- onnx
+- onnxruntime-web
+- llama
+- minicpm5
+- text-generation
+- browser
+- webgpu
+---
+
+# MiniCPM5-1B ONNX Web
+
+Transformers.js q4 ONNX export of `{source_model}` for browser text generation.
+
+## Files
+
+- `onnx/model_q4.onnx`: ONNX Runtime 4-bit MatMul quantized decoder with KV cache.
+- `config.json`: includes `transformers.js_config.dtype = "q4"` so Transformers.js loads the q4 artifact by default.
+- tokenizer and generation config files copied from the source model export.
+
+## Usage
+
+```js
+import {{ pipeline }} from "@huggingface/transformers";
+
+const generator = await pipeline("text-generation", "{target_repo}", {{
+  dtype: "q4",
+  device: "webgpu",
+}});
+
+const output = await generator("Briefly introduce yourself.", {{
+  max_new_tokens: 64,
+  temperature: 0.2,
+  do_sample: true,
+}});
+console.log(output[0].generated_text);
+```
+
+If WebGPU is unavailable, use `device: "wasm"` in the browser.
+"""
+    (output_dir / "README.md").write_text(readme)
+
+
+def convert(args: argparse.Namespace) -> Path:
+    work_dir = Path(args.work_dir or tempfile.mkdtemp(prefix="minicpm5-tjs-")).resolve()
+    work_dir.mkdir(parents=True, exist_ok=True)
+    print(f"Working directory: {work_dir}", flush=True)
+
+    transformers_js_dir = download_transformers_js(work_dir)
+    scripts_dir = transformers_js_dir / "scripts"
+    sys.path.insert(0, str(transformers_js_dir))
+
+    from scripts.quantize import QuantizationArguments, quantize
+    logging.getLogger("onnxruntime.quantization.matmul_4bits_quantizer").setLevel(logging.WARNING)
+
+    export_root = work_dir / "export"
+    model_dir = export_root / args.source_model
+    model_dir.mkdir(parents=True, exist_ok=True)
+
+    device = args.device
+    if device == "auto":
+        try:
+            import torch
+
+            device = "cuda" if torch.cuda.is_available() else "cpu"
+        except Exception:
+            device = "cpu"
+    print(f"Export device: {device}", flush=True)
+
+    config = AutoConfig.from_pretrained(args.source_model)
+    print(
+        "Source config:",
+        json.dumps(
+            {
+                "model_type": config.model_type,
+                "architectures": getattr(config, "architectures", None),
+                "hidden_size": getattr(config, "hidden_size", None),
+                "num_hidden_layers": getattr(config, "num_hidden_layers", None),
+                "torch_dtype": str(getattr(config, "torch_dtype", None)),
+            },
+            indent=2,
+        ),
+        flush=True,
+    )
+
+    main_export(
+        model_name_or_path=args.source_model,
+        output=model_dir,
+        task="text-generation-with-past",
+        opset=args.opset,
+        device=device,
+        dtype=args.export_dtype,
+        do_validation=False,
+        trust_remote_code=False,
+        library_name="transformers",
+        slim=False,
+    )
+
+    onnx_dir = model_dir / "onnx"
+    onnx_dir.mkdir(exist_ok=True)
+
+    quant_args = QuantizationArguments(
+        modes=["q4"],
+        per_channel=False,
+        reduce_range=False,
+        block_size=args.block_size,
+        is_symmetric=True,
+        accuracy_level=None,
+        op_block_list=None,
+    )
+    quantize(str(model_dir), str(onnx_dir), quant_args)
+    (model_dir / "quantize_config.json").write_text(json.dumps(asdict(quant_args), indent=2) + "\n")
+
+    for path in model_dir.glob("*.onnx*"):
+        path.unlink()
+
+    q4_model = onnx_dir / "model_q4.onnx"
+    if not q4_model.exists():
+        raise FileNotFoundError(f"Missing expected quantized model: {q4_model}")
+
+    q4_external_chunks = 1 if (onnx_dir / "model_q4.onnx_data").exists() else 0
+    patch_config(model_dir / "config.json", "q4", q4_external_chunks)
+    write_readme(model_dir, args.source_model, args.target_repo)
+
+    if args.output_dir:
+        final_dir = Path(args.output_dir).resolve()
+        if final_dir.exists():
+            shutil.rmtree(final_dir)
+        shutil.copytree(model_dir, final_dir)
+        model_dir = final_dir
+
+    print("Final files:", flush=True)
+    for file in sorted(p.relative_to(model_dir).as_posix() for p in model_dir.rglob("*") if p.is_file()):
+        print(file, flush=True)
+
+    if args.target_repo:
+        token = os.environ.get("HF_TOKEN") or True
+        create_repo(args.target_repo, repo_type="model", private=args.private, exist_ok=True, token=token)
+        api = HfApi(token=token)
+        api.upload_folder(
+            repo_id=args.target_repo,
+            repo_type="model",
+            folder_path=str(model_dir),
+            commit_message=f"Add q4 Transformers.js export of {args.source_model}",
+        )
+        print(f"Uploaded to https://huggingface.co/{args.target_repo}", flush=True)
+
+    return model_dir
+
+
+def parse_args() -> argparse.Namespace:
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--source-model", default=SOURCE_MODEL)
+    parser.add_argument("--target-repo", default="")
+    parser.add_argument("--output-dir", default="")
+    parser.add_argument("--work-dir", default="")
+    parser.add_argument("--device", default="auto", choices=["auto", "cpu", "cuda"])
+    parser.add_argument("--export-dtype", default="fp32", choices=["fp32", "fp16"])
+    parser.add_argument("--opset", type=int, default=18)
+    parser.add_argument("--block-size", type=int, default=32)
+    parser.add_argument("--private", action="store_true")
+    return parser.parse_args()
+
+
+if __name__ == "__main__":
+    convert(parse_args())

scripts/smoke_local_model_web_agent.mjs

@@ -0,0 +1,61 @@
+import { chromium } from "@playwright/test";
+
+const baseUrl = process.argv[2] || "http://localhost:5173/?device=wasm";
+const executablePath = process.env.CHROMIUM_PATH || "/snap/bin/chromium";
+
+const browser = await chromium.launch({
+  executablePath,
+  headless: true,
+  args: ["--no-sandbox", "--disable-dev-shm-usage"],
+});
+
+try {
+  const page = await browser.newPage();
+  page.setDefaultTimeout(600000);
+  const consoleLines = [];
+  page.on("console", (message) => {
+    consoleLines.push(`${message.type()}: ${message.text()}`);
+  });
+  page.on("pageerror", (error) => {
+    consoleLines.push(`pageerror: ${error.stack || error.message}`);
+  });
+
+  await page.goto(baseUrl, { waitUntil: "networkidle" });
+  await page.waitForFunction(() => document.querySelector("#status")?.textContent === "Ready");
+
+  const isolated = await page.evaluate(() => globalThis.crossOriginIsolated);
+  if (!isolated) throw new Error("Page is not cross-origin isolated.");
+
+  await page.fill("#max-new-tokens", "1");
+  await page.fill("#temperature", "0");
+  await page.click("#run");
+  await page.waitForFunction(() => document.querySelector("#status")?.textContent === "Agent running", null, {
+    timeout: 10000,
+  });
+  await page.waitForFunction(() => document.querySelector("#status")?.textContent === "Ready", null, {
+    timeout: 600000,
+  });
+
+  const transcript = await page.textContent("#transcript");
+  const files = await page.textContent("#files");
+  const events = await page.textContent("#event-log");
+  const modelStatus = await page.textContent("#model-status");
+
+  if (!transcript?.includes("pi sandbox result: 42")) {
+    throw new Error(`Expected command output in transcript.\n\nTranscript:\n${transcript}\n\nEvents:\n${events}`);
+  }
+  if (!files?.includes("hello.js")) {
+    throw new Error(`Expected hello.js in file listing.\n\nFiles:\n${files}`);
+  }
+  if (modelStatus !== "Model ready") {
+    throw new Error(`Expected MiniCPM model status to be ready, got: ${modelStatus}`);
+  }
+
+  console.log(JSON.stringify({ ok: true, isolated, modelStatus, transcript, files }, null, 2));
+} catch (error) {
+  console.error(error instanceof Error ? error.stack || error.message : String(error));
+  throw error;
+} finally {
+  await browser.close();
+}
+

scripts/smoke_web_agent.mjs

@@ -0,0 +1,60 @@
+import { chromium } from "@playwright/test";
+
+const baseUrl = process.argv[2] || "http://localhost:5173/?mode=mock&device=wasm";
+const executablePath = process.env.CHROMIUM_PATH || "/snap/bin/chromium";
+
+const browser = await chromium.launch({
+  executablePath,
+  headless: true,
+  args: ["--no-sandbox", "--disable-dev-shm-usage"],
+});
+
+try {
+  const page = await browser.newPage();
+  page.setDefaultTimeout(90000);
+
+  const consoleLines = [];
+  page.on("console", (message) => {
+    consoleLines.push(`${message.type()}: ${message.text()}`);
+  });
+  page.on("pageerror", (error) => {
+    consoleLines.push(`pageerror: ${error.stack || error.message}`);
+  });
+
+  await page.goto(baseUrl, { waitUntil: "domcontentloaded" });
+  const isolated = await page.evaluate(() => globalThis.crossOriginIsolated);
+  if (!isolated) {
+    throw new Error("Page is not cross-origin isolated.");
+  }
+
+  await page.click("#boot-sandbox");
+  await page.waitForFunction(() => document.querySelector("#sandbox-status")?.textContent === "Sandbox ready");
+  await page.waitForFunction(() => document.querySelector("#files")?.textContent?.includes("hello.js"));
+
+  await page.click("#run");
+  await page.waitForFunction(() => document.querySelector("#status")?.textContent === "Ready", null, {
+    timeout: 120000,
+  });
+
+  const transcript = await page.textContent("#transcript");
+  const files = await page.textContent("#files");
+  const events = await page.textContent("#event-log");
+
+  if (!transcript?.includes("pi sandbox result: 42")) {
+    throw new Error(`Expected command output in transcript.\n\nTranscript:\n${transcript}\n\nEvents:\n${events}`);
+  }
+  if (!files?.includes("hello.js")) {
+    throw new Error(`Expected hello.js in file listing.\n\nFiles:\n${files}`);
+  }
+  if (!events?.includes("run_command finished")) {
+    throw new Error(`Expected pi tool execution events.\n\nEvents:\n${events}`);
+  }
+
+  console.log(JSON.stringify({ ok: true, isolated, transcript, files }, null, 2));
+} catch (error) {
+  console.error(error instanceof Error ? error.stack || error.message : String(error));
+  throw error;
+} finally {
+  await browser.close();
+}
+

scripts/verify_tjs_model.mjs

@@ -0,0 +1,31 @@
+import { env, ModelRegistry, pipeline } from "@huggingface/transformers";
+
+const modelId = process.argv[2] || "Mike0021/MiniCPM5-1B-ONNX-Web";
+const prompt = process.argv[3] || "Hello";
+
+env.allowLocalModels = true;
+env.allowRemoteModels = true;
+
+const files = await ModelRegistry.get_pipeline_files("text-generation", modelId, {
+  dtype: "q4",
+  device: "cpu",
+});
+console.log("files", JSON.stringify(files, null, 2));
+
+if (!files.includes("onnx/model_q4.onnx")) {
+  throw new Error("Expected onnx/model_q4.onnx in Transformers.js file plan.");
+}
+
+const generator = await pipeline("text-generation", modelId, {
+  dtype: "q4",
+  device: "cpu",
+});
+
+const result = await generator(prompt, {
+  max_new_tokens: 2,
+  do_sample: false,
+  return_full_text: false,
+});
+
+console.log("generation", JSON.stringify(result, null, 2));
+

src/main.js

@@ -0,0 +1,192 @@
+import { MODEL_ID, createPiAgent } from "./piAgent.js";
+import { createSandbox } from "./sandbox.js";
+import "./styles.css";
+
+const nodes = {
+  status: document.querySelector("#status"),
+  modelStatus: document.querySelector("#model-status"),
+  sandboxStatus: document.querySelector("#sandbox-status"),
+  transcript: document.querySelector("#transcript"),
+  eventLog: document.querySelector("#event-log"),
+  files: document.querySelector("#files"),
+  prompt: document.querySelector("#prompt"),
+  run: document.querySelector("#run"),
+  boot: document.querySelector("#boot-sandbox"),
+  reset: document.querySelector("#reset-sandbox"),
+  demo: document.querySelector("#demo-prompt"),
+  mode: document.querySelector("#mode"),
+  device: document.querySelector("#device"),
+  maxTokens: document.querySelector("#max-new-tokens"),
+  temperature: document.querySelector("#temperature"),
+  modelLabel: document.querySelector("#model-label"),
+};
+
+nodes.modelLabel.textContent = MODEL_ID;
+if (!navigator.gpu) nodes.device.value = "wasm";
+
+const params = new URLSearchParams(window.location.search);
+if (params.get("mode") === "mock") nodes.mode.value = "mock";
+if (params.get("device")) nodes.device.value = params.get("device");
+
+const sandbox = createSandbox({
+  onStatus: (text) => setSandboxStatus(text),
+  onLog: (text) => logEvent("sandbox", text),
+});
+
+let agent = createAgent();
+
+function textFromContent(content) {
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return "";
+  return content
+    .filter((part) => part.type === "text")
+    .map((part) => part.text)
+    .join("\n");
+}
+
+function setStatus(text) {
+  nodes.status.textContent = text;
+}
+
+function setSandboxStatus(text) {
+  nodes.sandboxStatus.textContent = text;
+}
+
+function setModelStatus(text) {
+  nodes.modelStatus.textContent = text;
+}
+
+function logEvent(kind, text) {
+  const line = `[${new Date().toLocaleTimeString()}] ${kind}: ${text}`;
+  nodes.eventLog.textContent = `${nodes.eventLog.textContent}${line}\n`;
+  nodes.eventLog.scrollTop = nodes.eventLog.scrollHeight;
+}
+
+function createAgent() {
+  const next = createPiAgent({
+    sandbox,
+    modelMode: () => nodes.mode.value,
+    device: () => nodes.device.value,
+    maxTokens: () => nodes.maxTokens.value,
+    temperature: () => nodes.temperature.value,
+    onModelStatus: setModelStatus,
+  });
+  next.subscribe((event) => {
+    switch (event.type) {
+      case "agent_start":
+        setStatus("Agent running");
+        logEvent("agent", "start");
+        break;
+      case "message_end":
+        renderTranscript();
+        break;
+      case "tool_execution_start":
+        logEvent("tool", `${event.toolName} started`);
+        break;
+      case "tool_execution_end":
+        logEvent("tool", `${event.toolName} finished`);
+        break;
+      case "agent_end":
+        setStatus("Ready");
+        renderTranscript();
+        refreshFiles().catch((error) => logEvent("files", error.message));
+        break;
+      default:
+        break;
+    }
+  });
+  return next;
+}
+
+function resetAgent() {
+  agent.abort();
+  agent = createAgent();
+  renderTranscript();
+}
+
+function renderTranscript() {
+  const rendered = agent.state.messages
+    .map((message) => {
+      if (message.role === "toolResult") {
+        return `TOOL ${message.toolName}${message.isError ? " ERROR" : ""}\n${textFromContent(message.content)}`;
+      }
+      const heading = message.role.toUpperCase();
+      const toolCalls =
+        message.role === "assistant"
+          ? message.content
+              .filter((part) => part.type === "toolCall")
+              .map((part) => `\nTOOL CALL ${part.name} ${JSON.stringify(part.arguments)}`)
+              .join("")
+          : "";
+      return `${heading}\n${textFromContent(message.content)}${toolCalls}`;
+    })
+    .join("\n\n");
+  nodes.transcript.textContent = rendered || "No messages yet.";
+  nodes.transcript.scrollTop = nodes.transcript.scrollHeight;
+}
+
+async function refreshFiles() {
+  if (!sandbox.isReady) {
+    nodes.files.textContent = "Sandbox not booted.";
+    return;
+  }
+  nodes.files.textContent = await sandbox.listFiles(".");
+}
+
+async function bootSandbox() {
+  nodes.boot.disabled = true;
+  try {
+    await sandbox.boot();
+    await refreshFiles();
+  } catch (error) {
+    setSandboxStatus("Sandbox error");
+    logEvent("sandbox", error.stack || error.message || String(error));
+  } finally {
+    nodes.boot.disabled = false;
+  }
+}
+
+nodes.boot.addEventListener("click", bootSandbox);
+
+nodes.reset.addEventListener("click", async () => {
+  nodes.reset.disabled = true;
+  try {
+    await sandbox.reset();
+    resetAgent();
+    await refreshFiles();
+  } catch (error) {
+    logEvent("reset", error.stack || error.message || String(error));
+  } finally {
+    nodes.reset.disabled = false;
+  }
+});
+
+nodes.demo.addEventListener("click", () => {
+  nodes.prompt.value =
+    "Create hello.js that prints the result of 21 * 2, run it with Node, and tell me the command output.";
+});
+
+nodes.run.addEventListener("click", async () => {
+  nodes.run.disabled = true;
+  try {
+    await bootSandbox();
+    await agent.prompt(nodes.prompt.value);
+  } catch (error) {
+    setStatus("Error");
+    logEvent("agent", error.stack || error.message || String(error));
+  } finally {
+    nodes.run.disabled = false;
+  }
+});
+
+nodes.mode.addEventListener("change", () => {
+  resetAgent();
+  setModelStatus(nodes.mode.value === "mock" ? "Deterministic test model" : "Model idle");
+});
+
+setStatus("Ready");
+setSandboxStatus("Not booted");
+setModelStatus(nodes.mode.value === "mock" ? "Deterministic test model" : "Model idle");
+renderTranscript();
+refreshFiles().catch(() => {});
+

src/piAgent.js

@@ -0,0 +1,348 @@
+import { Agent } from "@earendil-works/pi-agent-core";
+import { createAssistantMessageEventStream, Type } from "@earendil-works/pi-ai";
+import { env, pipeline } from "@huggingface/transformers";
+
+const MODEL_ID = "Mike0021/MiniCPM5-1B-ONNX-Web";
+
+const LOCAL_MODEL = {
+  id: MODEL_ID,
+  name: "MiniCPM5-1B ONNX Web",
+  api: "transformers-js",
+  provider: "huggingface-transformers-js",
+  baseUrl: "https://huggingface.co",
+  reasoning: false,
+  input: ["text"],
+  cost: {
+    input: 0,
+    output: 0,
+    cacheRead: 0,
+    cacheWrite: 0,
+  },
+  contextWindow: 4096,
+  maxTokens: 512,
+};
+
+const EMPTY_USAGE = {
+  input: 0,
+  output: 0,
+  cacheRead: 0,
+  cacheWrite: 0,
+  totalTokens: 0,
+  cost: {
+    input: 0,
+    output: 0,
+    cacheRead: 0,
+    cacheWrite: 0,
+    total: 0,
+  },
+};
+
+function textFromContent(content) {
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return "";
+  return content
+    .filter((part) => part.type === "text")
+    .map((part) => part.text)
+    .join("\n");
+}
+
+function now() {
+  return Date.now();
+}
+
+function createMessage(content, stopReason = "stop") {
+  return {
+    role: "assistant",
+    content,
+    api: LOCAL_MODEL.api,
+    provider: LOCAL_MODEL.provider,
+    model: LOCAL_MODEL.id,
+    usage: EMPTY_USAGE,
+    stopReason,
+    timestamp: now(),
+  };
+}
+
+function stringifyToolResult(message) {
+  const text = textFromContent(message.content);
+  return `${message.toolName}(${message.toolCallId}) ${message.isError ? "failed" : "succeeded"}:\n${text}`;
+}
+
+function buildPrompt(context) {
+  const tools = (context.tools || []).map((tool) => ({
+    name: tool.name,
+    description: tool.description,
+    parameters: tool.parameters,
+  }));
+  const transcript = context.messages
+    .slice(-8)
+    .map((message) => {
+      if (message.role === "toolResult") return `TOOL_RESULT:\n${stringifyToolResult(message)}`;
+      return `${message.role.toUpperCase()}:\n${textFromContent(message.content)}`;
+    })
+    .join("\n\n");
+
+  return `${context.systemPrompt || ""}
+
+You are running as a pi Agent inside a browser-only app. The sandbox is a WebContainer: it has a virtual filesystem and can spawn browser-contained Node.js processes.
+
+Use tools by returning strict JSON only. Do not use markdown.
+
+To call tools:
+{"toolCalls":[{"tool":"write_file","args":{"path":"hello.js","content":"console.log(2 + 2)\\n"}},{"tool":"run_command","args":{"command":"node","args":["hello.js"]}}]}
+
+To answer the user after tool results:
+{"final":"Short answer that explains what happened."}
+
+Available tools:
+${JSON.stringify(tools, null, 2)}
+
+Conversation:
+${transcript}
+
+Return JSON now.`;
+}
+
+function extractJsonPayload(text) {
+  const trimmed = String(text || "").trim();
+  const fence = trimmed.match(/```(?:json)?\s*([\s\S]*?)```/i);
+  const candidate = fence ? fence[1].trim() : trimmed;
+  const firstBrace = candidate.indexOf("{");
+  const firstBracket = candidate.indexOf("[");
+  const starts = [firstBrace, firstBracket].filter((index) => index >= 0);
+  if (starts.length === 0) return null;
+  const start = Math.min(...starts);
+  const lastBrace = candidate.lastIndexOf("}");
+  const lastBracket = candidate.lastIndexOf("]");
+  const end = Math.max(lastBrace, lastBracket);
+  if (end <= start) return null;
+  try {
+    return JSON.parse(candidate.slice(start, end + 1));
+  } catch {
+    return null;
+  }
+}
+
+function normalizeToolCalls(payload) {
+  if (!payload) return [];
+  const rawCalls = Array.isArray(payload) ? payload : payload.toolCalls || payload.tools || payload.actions || [];
+  if (!Array.isArray(rawCalls)) return [];
+  return rawCalls
+    .map((call, index) => ({
+      type: "toolCall",
+      id: `tool-${now()}-${index}`,
+      name: String(call.tool || call.name || ""),
+      arguments: call.args || call.arguments || {},
+    }))
+    .filter((call) => call.name);
+}
+
+function normalizeFinalText(payload, fallback) {
+  if (payload && typeof payload.final === "string") return payload.final;
+  if (payload && typeof payload.message === "string") return payload.message;
+  if (payload && typeof payload.answer === "string") return payload.answer;
+  return String(fallback || "").trim() || "Done.";
+}
+
+function mockPlan(context) {
+  const last = context.messages[context.messages.length - 1];
+  if (last?.role === "toolResult") {
+    const results = context.messages.filter((message) => message.role === "toolResult").slice(-4).map(stringifyToolResult);
+    return {
+      final: `The sandbox work completed.\n\n${results.join("\n\n")}`,
+    };
+  }
+
+  const userText = textFromContent(last?.content || "").toLowerCase();
+  if (userText.includes("read")) {
+    return {
+      toolCalls: [{ tool: "read_file", args: { path: "hello.js" } }],
+    };
+  }
+  if (userText.includes("list")) {
+    return {
+      toolCalls: [{ tool: "list_files", args: { path: "." } }],
+    };
+  }
+  return {
+    toolCalls: [
+      {
+        tool: "write_file",
+        args: {
+          path: "hello.js",
+          content: 'const value = 21 * 2;\nconsole.log(`pi sandbox result: ${value}`);\n',
+        },
+      },
+      {
+        tool: "run_command",
+        args: {
+          command: "node",
+          args: ["hello.js"],
+        },
+      },
+    ],
+  };
+}
+
+function emitFinal(stream, message, text = "") {
+  stream.push({ type: "start", partial: { ...message, content: [{ type: "text", text: "" }] } });
+  if (text) {
+    const partial = { ...message, content: [{ type: "text", text }] };
+    stream.push({ type: "text_start", contentIndex: 0, partial: { ...message, content: [{ type: "text", text: "" }] } });
+    stream.push({ type: "text_delta", contentIndex: 0, delta: text, partial });
+    stream.push({ type: "text_end", contentIndex: 0, content: text, partial });
+  }
+  if (message.stopReason === "error" || message.stopReason === "aborted") {
+    stream.push({ type: "error", reason: message.stopReason, error: message });
+  } else {
+    stream.push({ type: "done", reason: message.stopReason, message });
+  }
+}
+
+export function createPiAgent({ sandbox, modelMode, device, maxTokens, temperature, onModelStatus = () => {} }) {
+  env.allowLocalModels = false;
+  env.allowRemoteModels = true;
+  env.backends.onnx.wasm.numThreads = Math.min(4, navigator.hardwareConcurrency || 4);
+
+  let generatorPromise = null;
+  let generatorKey = "";
+
+  async function getGenerator() {
+    const key = `${MODEL_ID}:${device()}`;
+    if (!generatorPromise || generatorKey !== key) {
+      generatorKey = key;
+      onModelStatus(`Loading ${device()}`);
+      generatorPromise = pipeline("text-generation", MODEL_ID, {
+        dtype: "q4",
+        device: device(),
+        progress_callback: (event) => {
+          if (event.status === "progress") {
+            onModelStatus(`${event.file} ${Math.round(event.progress)}%`);
+          } else if (event.status) {
+            onModelStatus(event.status);
+          }
+        },
+      });
+    }
+    return generatorPromise;
+  }
+
+  async function producePlan(context, signal) {
+    if (modelMode() === "mock") {
+      return JSON.stringify(mockPlan(context));
+    }
+
+    const generator = await getGenerator();
+    if (signal?.aborted) throw new Error("Aborted");
+    const result = await generator(buildPrompt(context), {
+      max_new_tokens: Number(maxTokens()) || 128,
+      temperature: Number(temperature()) || 0,
+      do_sample: Number(temperature()) > 0,
+      return_full_text: false,
+    });
+    onModelStatus("Model ready");
+    return result?.[0]?.generated_text ?? "";
+  }
+
+  function streamFn(_model, context, options = {}) {
+    const stream = createAssistantMessageEventStream();
+    queueMicrotask(async () => {
+      try {
+        const generated = await producePlan(context, options.signal);
+        const payload = extractJsonPayload(generated);
+        const lastMessage = context.messages[context.messages.length - 1];
+        const forceFinal = lastMessage?.role === "toolResult";
+        const fallbackPayload = payload ? null : mockPlan(context);
+        const toolCalls = forceFinal ? [] : normalizeToolCalls(payload || fallbackPayload);
+        if (toolCalls.length > 0) {
+          const message = createMessage([{ type: "text", text: "Using sandbox tools." }, ...toolCalls], "toolUse");
+          emitFinal(stream, message, "Using sandbox tools.");
+          return;
+        }
+        const text = normalizeFinalText(payload || fallbackPayload, generated);
+        const message = createMessage([{ type: "text", text }], "stop");
+        emitFinal(stream, message, text);
+      } catch (error) {
+        const text = error instanceof Error ? error.message : String(error);
+        const message = {
+          ...createMessage([{ type: "text", text }], options.signal?.aborted ? "aborted" : "error"),
+          errorMessage: text,
+        };
+        emitFinal(stream, message, text);
+      }
+    });
+    return stream;
+  }
+
+  const tools = [
+    {
+      name: "list_files",
+      label: "List files",
+      description: "List files in the sandbox workspace.",
+      parameters: Type.Object({
+        path: Type.Optional(Type.String()),
+      }),
+      execute: async (_id, args) => {
+        const output = await sandbox.listFiles(args.path || ".");
+        return { content: [{ type: "text", text: output }], details: { output } };
+      },
+    },
+    {
+      name: "read_file",
+      label: "Read file",
+      description: "Read a UTF-8 file from the sandbox workspace.",
+      parameters: Type.Object({
+        path: Type.String(),
+      }),
+      execute: async (_id, args) => {
+        const output = await sandbox.readFile(args.path);
+        return { content: [{ type: "text", text: output }], details: { path: args.path, output } };
+      },
+    },
+    {
+      name: "write_file",
+      label: "Write file",
+      description: "Create or replace a UTF-8 file inside the sandbox workspace.",
+      parameters: Type.Object({
+        path: Type.String(),
+        content: Type.String(),
+      }),
+      execute: async (_id, args) => {
+        const output = await sandbox.writeFile(args.path, args.content);
+        return { content: [{ type: "text", text: output }], details: { path: args.path } };
+      },
+    },
+    {
+      name: "run_command",
+      label: "Run command",
+      description: "Spawn a process inside the browser-only WebContainer sandbox.",
+      parameters: Type.Object({
+        command: Type.String(),
+        args: Type.Optional(Type.Array(Type.String())),
+        timeoutMs: Type.Optional(Type.Number()),
+      }),
+      execute: async (_id, args) => {
+        const result = await sandbox.runCommand(args.command, args.args || [], args.timeoutMs || 10000);
+        const text = `$ ${result.command}\nexit ${result.exitCode}\n${result.output}`;
+        return {
+          content: [{ type: "text", text }],
+          details: result,
+        };
+      },
+      executionMode: "sequential",
+    },
+  ];
+
+  return new Agent({
+    initialState: {
+      model: LOCAL_MODEL,
+      systemPrompt:
+        "You are Pi Web Agent. Use the sandbox tools for filesystem or command tasks, then give concise results.",
+      tools,
+    },
+    streamFn,
+    toolExecution: "sequential",
+  });
+}
+
+export { MODEL_ID };

src/sandbox.js

@@ -0,0 +1,183 @@
+const BOOT_FILES = {
+  "package.json": {
+    file: {
+      contents: JSON.stringify(
+        {
+          type: "module",
+          scripts: {
+            demo: "node hello.js",
+          },
+          dependencies: {},
+          devDependencies: {},
+        },
+        null,
+        2,
+      ),
+    },
+  },
+  "README.md": {
+    file: {
+      contents:
+        "# Pi web sandbox\n\nThis filesystem and every spawned process run inside WebContainers in this browser tab.\n",
+    },
+  },
+  "hello.js": {
+    file: {
+      contents: 'console.log("hello from the browser sandbox");\nconsole.log(2 + 2);\n',
+    },
+  },
+};
+
+const MAX_OUTPUT_CHARS = 16000;
+const DEFAULT_TIMEOUT_MS = 10000;
+
+export function createSandbox({ onLog = () => {}, onStatus = () => {} } = {}) {
+  let instance = null;
+  let booting = null;
+  let root = "";
+
+  async function boot() {
+    if (instance) return instance;
+    if (booting) return booting;
+
+    booting = (async () => {
+      if (!globalThis.crossOriginIsolated) {
+        throw new Error("WebContainers need cross-origin isolation. Start this app through Vite or another server that sends COOP/COEP headers.");
+      }
+
+      onStatus("Booting WebContainer");
+      const { WebContainer } = await import("@webcontainer/api");
+      instance = await WebContainer.boot({
+        coep: "credentialless",
+        workdirName: "workspace",
+      });
+      root = instance.workdir;
+      await instance.mount(BOOT_FILES);
+      onLog(`sandbox booted at ${root}`);
+      onStatus("Sandbox ready");
+      return instance;
+    })();
+
+    try {
+      return await booting;
+    } finally {
+      booting = null;
+    }
+  }
+
+  function assertRelativePath(path) {
+    const value = String(path || "").trim().replace(/^\/+/, "");
+    if (!value || value.includes("\0")) {
+      throw new Error("Path is required.");
+    }
+    const segments = value.split("/").filter(Boolean);
+    if (segments.some((segment) => segment === "." || segment === "..")) {
+      throw new Error("Paths must stay inside the sandbox workspace.");
+    }
+    return segments.join("/");
+  }
+
+  function toWorkspacePath(path) {
+    return assertRelativePath(path);
+  }
+
+  async function reset() {
+    const wc = await boot();
+    const entries = await wc.fs.readdir(".");
+    await Promise.all(
+      entries.map((entry) =>
+        wc.fs.rm(entry, {
+          force: true,
+          recursive: true,
+        }),
+      ),
+    );
+    await wc.mount(BOOT_FILES);
+    onLog("sandbox reset");
+    return "Sandbox reset to the starter project.";
+  }
+
+  async function listFiles(path = ".") {
+    const wc = await boot();
+    const target = path === "." || path === "" ? "." : toWorkspacePath(path);
+    const entries = await wc.fs.readdir(target, { withFileTypes: true });
+    return entries.map((entry) => `${entry.isDirectory() ? "dir " : "file"} ${entry.name}`).join("\n") || "(empty)";
+  }
+
+  async function readFile(path) {
+    const wc = await boot();
+    return await wc.fs.readFile(toWorkspacePath(path), "utf-8");
+  }
+
+  async function writeFile(path, content) {
+    const wc = await boot();
+    const relative = assertRelativePath(path);
+    const parent = relative.split("/").slice(0, -1).join("/");
+    if (parent) {
+      await wc.fs.mkdir(parent, { recursive: true });
+    }
+    await wc.fs.writeFile(relative, String(content ?? ""));
+    onLog(`wrote ${relative}`);
+    return `Wrote ${relative}`;
+  }
+
+  async function runCommand(command, args = [], timeoutMs = DEFAULT_TIMEOUT_MS) {
+    const wc = await boot();
+    const cmd = String(command || "").trim();
+    if (!cmd) throw new Error("Command is required.");
+    const cleanArgs = Array.isArray(args) ? args.map((arg) => String(arg)) : [];
+
+    onLog(`$ ${[cmd, ...cleanArgs].join(" ")}`);
+    const process = await wc.spawn(cmd, cleanArgs, {
+      terminal: {
+        cols: 96,
+        rows: 28,
+      },
+    });
+
+    let output = "";
+    const reader = process.output.getReader();
+    const pump = (async () => {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        output += value;
+        if (output.length > MAX_OUTPUT_CHARS) {
+          output = `${output.slice(0, MAX_OUTPUT_CHARS)}\n[output truncated]`;
+          process.kill();
+          break;
+        }
+      }
+    })();
+
+    const timeout = new Promise((resolve) => {
+      setTimeout(() => {
+        process.kill();
+        resolve("timeout");
+      }, Number(timeoutMs) || DEFAULT_TIMEOUT_MS);
+    });
+
+    const exitCode = await Promise.race([process.exit, timeout]);
+    await pump.catch(() => {});
+    const normalizedExitCode = exitCode === "timeout" ? 124 : exitCode;
+    const result = {
+      command: [cmd, ...cleanArgs].join(" "),
+      exitCode: normalizedExitCode,
+      output: output.trimEnd(),
+    };
+    onLog(`exit ${normalizedExitCode}`);
+    return result;
+  }
+
+  return {
+    boot,
+    reset,
+    listFiles,
+    readFile,
+    writeFile,
+    runCommand,
+    get isReady() {
+      return Boolean(instance);
+    },
+  };
+}

src/styles.css

@@ -0,0 +1,225 @@
+:root {
+  color: #172033;
+  background: #f3f6f9;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+#app {
+  min-height: 100vh;
+  padding: 18px;
+}
+
+.shell {
+  width: min(1280px, 100%);
+  margin: 0 auto;
+}
+
+.topbar {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 8px 0 18px;
+  border-bottom: 1px solid #c7d2df;
+}
+
+h1,
+h2,
+p {
+  margin: 0;
+}
+
+h1 {
+  font-size: 38px;
+  line-height: 1;
+  letter-spacing: 0;
+}
+
+h2 {
+  font-size: 15px;
+  line-height: 1.2;
+  color: #405064;
+}
+
+#model-label {
+  margin-top: 8px;
+  color: #5d6c7f;
+  overflow-wrap: anywhere;
+}
+
+.status-stack {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: end;
+  gap: 8px;
+  max-width: 620px;
+}
+
+.status {
+  min-height: 34px;
+  max-width: 260px;
+  padding: 7px 10px;
+  border: 1px solid #b7c4d3;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #314155;
+  overflow-wrap: anywhere;
+}
+
+.controls {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr 1fr 1fr;
+  gap: 12px;
+  margin: 18px 0 12px;
+}
+
+label {
+  display: grid;
+  gap: 6px;
+  color: #526173;
+  font-size: 14px;
+  font-weight: 650;
+}
+
+select,
+input,
+textarea {
+  width: 100%;
+  border: 1px solid #b8c5d4;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #152033;
+}
+
+select,
+input {
+  height: 42px;
+  padding: 0 10px;
+}
+
+.command-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+button {
+  min-width: 116px;
+  height: 42px;
+  padding: 0 16px;
+  border: 0;
+  border-radius: 6px;
+  background: #176b6c;
+  color: #ffffff;
+  font-weight: 750;
+  cursor: pointer;
+}
+
+button:nth-child(2) {
+  background: #4f5f73;
+}
+
+button:nth-child(3) {
+  background: #7a4d18;
+}
+
+button:disabled {
+  cursor: wait;
+  opacity: 0.64;
+}
+
+.workspace {
+  display: grid;
+  gap: 14px;
+}
+
+.prompt-pane {
+  display: grid;
+  gap: 10px;
+}
+
+textarea {
+  min-height: 116px;
+  resize: vertical;
+  padding: 13px;
+  line-height: 1.45;
+}
+
+#run {
+  width: fit-content;
+}
+
+.panes {
+  display: grid;
+  grid-template-columns: 1.35fr 0.9fr;
+  gap: 12px;
+}
+
+.pane {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.pane.wide {
+  grid-column: 1 / -1;
+}
+
+pre {
+  min-height: 220px;
+  max-height: 360px;
+  margin: 0;
+  padding: 14px;
+  border: 1px solid #b8c5d4;
+  border-radius: 6px;
+  background: #fbfcfd;
+  color: #162033;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  overflow: auto;
+  overflow-wrap: anywhere;
+}
+
+#event-log {
+  min-height: 150px;
+  max-height: 220px;
+}
+
+@media (max-width: 780px) {
+  #app {
+    padding: 12px;
+  }
+
+  .topbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .status-stack {
+    justify-content: start;
+  }
+
+  .controls,
+  .panes {
+    grid-template-columns: 1fr;
+  }
+}
+

vite.config.js

@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+
+const headers = {
+  "Cross-Origin-Embedder-Policy": "credentialless",
+  "Cross-Origin-Opener-Policy": "same-origin",
+};
+
+export default defineConfig({
+  server: {
+    headers,
+  },
+  preview: {
+    headers,
+  },
+});
+