Personas + war-diary via llama.cpp (reusing woid's persona SSE protocol)

- llm.py: configurable runtime behind one stream_chat() — in-Space llama-cpp-python
(local GGUF or HF pull) by default, OR an external OpenAI-compatible llama.cpp
endpoint (TINY_LLM_BASE_URL, woid's switch). Lock-serialized; stub fallback.
- prompts.py: Tiny-Army persona + war-diary system prompts.
- persona_parse.py: woid's parse.js ported to Python (defensive JSON extraction).
- app.py: Barracks diary() now streams from the model (Gradio generator); new
POST /persona/generate/stream emitting woid-compatible SSE; Personas tab.
- web/personaStream.js: vendored from woid (now takes an optional path param,
upstream-safe); web/personaPanel.js: vanilla panel reusing it verbatim;
web/shell/persona.css. nav.json gains a Personas item.
- Dockerfile/requirements: llama-cpp-python prebuilt CPU wheel + huggingface_hub.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Dockerfile

@@ -13,7 +13,9 @@ USER user
 WORKDIR /home/user/app
 
 COPY --chown=user requirements.txt .
-RUN pip install --no-cache-dir --user -r requirements.txt
+# The extra index serves prebuilt llama-cpp-python CPU wheels (no source compile).
+RUN pip install --no-cache-dir --user -r requirements.txt \
+      --extra-index-url https://abetlen.github.io/llama-cpp-python/whl/cpu
 
 COPY --chown=user . .
 

app.py

@@ -1,20 +1,35 @@
 """Tiny Army — HF Space, a Gradio Blocks app.
 
-The UI chrome is 100% Gradio (gr.Tabs / gr.Dropdown / gr.Button). The Pixi
-battlefield + sprite viewer render into gr.HTML canvas divs, driven by a head-
-injected JS module (web/tiny.js) via `js=` event handlers — so the rendering is
-Pixi but the app is unambiguously a Gradio app. Sprite data is the auto-battler's
-own static manifest + sheets (a curated subset under web/assets). The diary is a
-plain Gradio fn (stub — wired to a local llama.cpp small model during the hack).
+Gradio is the host/shell: gr.Blocks → gr.Tabs, mounted on FastAPI via
+gr.mount_gradio_app, with tab-switching and the page served by Gradio. The tabs
+differ in how much Gradio UI they use:
+  • Battle / Sprite Animations — each is just an empty `gr.HTML` div that a head-
+    injected ES module (web/tiny.js) fills with our OWN UI: Pixi canvas + the
+    shared, framework-agnostic render core and chrome (auto-battler's
+    spriteScene.js / spritePlayground.js, bundled to web/, styled by
+    web/shell/spriteScene.css). These tabs use NO Gradio widgets — they're custom
+    canvas surfaces inside the Gradio shell. (Sprite Animations previously used
+    gr.Dropdown/gr.Button; those were replaced by the shared playground.)
+  • Barracks — genuine Gradio widgets (gr.Textbox × 2 + gr.Button) wired to a
+    Python diary() fn (stub — to be backed by a local llama.cpp small model).
+Sprite data is auto-battler's own static manifest + sheets under web/assets.
 """
 import json
+import asyncio
+import json as _json
 import os
+import threading
 
 import gradio as gr
 import uvicorn
-from fastapi import FastAPI
+from fastapi import FastAPI, Request
+from fastapi.responses import StreamingResponse
 from fastapi.staticfiles import StaticFiles
 
+import llm
+import persona_parse
+import prompts
+
 HERE = os.path.dirname(os.path.abspath(__file__))
 WEB = os.path.join(HERE, "web")
 
@@ -76,15 +91,16 @@ THEME = ('<style>'
          # Gradio still hides it (display:none on the inactive tab's ancestor).
          '.gradio-container .tabitem{padding:0 !important;}'
          '.gradio-container .tabs{border:0 !important;}'
-         '#sprite-stage{position:fixed !important;top:0;bottom:0;right:0;'
+         '#sprite-stage,#persona-stage{position:fixed !important;top:0;bottom:0;right:0;'
          'left:var(--tac-w,240px);height:auto !important;z-index:1;}'
-         'body.tac-collapsed #sprite-stage{left:0;}'
-         '@media (max-width:768px){#sprite-stage{left:0;}}'
+         'body.tac-collapsed #sprite-stage,body.tac-collapsed #persona-stage{left:0;}'
+         '@media (max-width:768px){#sprite-stage,#persona-stage{left:0;}}'
          '</style>')
 HEAD = ('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">'
         + HIDE_TABS + FONTS + THEME +
         '<link rel="stylesheet" href="/web/shell/sidebar.css">'
         '<link rel="stylesheet" href="/web/shell/spriteScene.css">'
+        '<link rel="stylesheet" href="/web/shell/persona.css">'
         '<script type="module" src="/web/tiny.js"></script>'
         '<script src="/web/shell/sidebar.js"></script>')
 STAGE = "height:56vh;border:1px solid #20262e;border-radius:12px;overflow:hidden;background:#0b0e12"
@@ -132,13 +148,28 @@ def build_sidebar(nav):
 SIDEBAR_HTML = build_sidebar(json.load(open(os.path.join(WEB, "shell", "nav.json"))))
 
 
-def diary(unit: str, traits: str) -> str:
-    """Stub — replaced during the hack by a local llama.cpp small model."""
-    t = (traits or "").strip() or "untested"
-    u = (unit or "").strip() or "a nameless soldier"
-    return (f"— Diary of {u} ({t}) —\n\n(placeholder) Today I held the line. A local "
-            f"small model will give me a real voice soon, shaped by what I lived "
-            f"through on the field.")
+def diary(unit, traits):
+    """Streaming war-diary via the llama.cpp runtime. A Gradio generator: each yield
+    replaces the output Textbox, so tokens appear live. Falls back to a stub line if
+    the model can't load, so the Barracks tab always works."""
+    header = f"— Diary of {(unit or 'a nameless soldier').strip()} —\n\n"
+    yield header + "_(summoning the model — the first run downloads it, please wait…)_"
+    try:
+        acc = header
+        first = True
+        for chunk in llm.stream_chat(
+            prompts.DIARY_SYSTEM, prompts.diary_user_prompt(unit, traits),
+            max_tokens=240, temperature=0.9,
+        ):
+            if first:
+                acc = header  # drop the loading note once tokens arrive
+                first = False
+            acc += chunk
+            yield acc
+        if first:  # produced nothing
+            yield header + "Today I held the line."
+    except llm.LlmUnavailable as e:
+        yield header + f"Today I held the line. _(model unavailable: {e})_"
 
 
 with gr.Blocks(title="Tiny Army") as demo:
@@ -161,6 +192,10 @@ with gr.Blocks(title="Tiny Army") as demo:
                 traits = gr.Textbox("Cautious, Veteran, Vengeful", label="Traits")
             out = gr.Textbox(label="War diary", lines=6)
             gr.Button("Write diary", variant="primary").click(diary, [unit, traits], out)
+        with gr.Tab("Personas"):
+            # The vanilla persona panel (web/personaPanel.js) builds the whole page
+            # into this div and streams from /persona/generate/stream.
+            gr.HTML('<div id="persona-stage" style="overflow:hidden"></div>')
 
 # Mount Gradio on FastAPI so we can also serve the JS module + the sprite assets.
 fastapi_app = FastAPI()
@@ -182,6 +217,70 @@ fastapi_app.mount("/web", StaticFiles(directory=WEB), name="web")
 # NOTE: serve sprite assets at /sprites, NOT /assets — Gradio serves its own UI
 # bundle from /assets, and mounting there shadows it (breaks the whole UI).
 fastapi_app.mount("/sprites", StaticFiles(directory=os.path.join(WEB, "assets")), name="sprites")
+
+
+def _sse(event, data):
+    return f"event: {event}\ndata: {_json.dumps(data)}\n\n"
+
+
+# Persona generation, woid-protocol-compatible so web/personaStream.js consumes it
+# unchanged: emits `model` → `delta`* → `persona-done` → `done` (or `error`). The
+# blocking llama.cpp generator runs in a worker thread bridged to this async SSE
+# generator via a thread-safe queue, so it never stalls uvicorn's event loop.
+# Defined BEFORE mount_gradio_app so the "/" Gradio mount doesn't shadow it.
+@fastapi_app.post("/persona/generate/stream")
+async def persona_generate_stream(request: Request):
+    body = await request.json()
+    seed = body.get("seed", "")
+    unit_class = body.get("class") or body.get("unitClass") or ""
+
+    async def gen():
+        yield _sse("model", {"model": llm.model_id()})
+        loop = asyncio.get_running_loop()
+        q: asyncio.Queue = asyncio.Queue()
+        DONE = object()
+
+        def worker():
+            try:
+                for chunk in llm.stream_chat(
+                    prompts.PERSONA_SYSTEM, prompts.persona_user_prompt(unit_class, seed),
+                    max_tokens=400, temperature=0.8,
+                ):
+                    loop.call_soon_threadsafe(q.put_nowait, ("delta", chunk))
+            except Exception as e:  # LlmUnavailable or runtime error
+                loop.call_soon_threadsafe(q.put_nowait, ("error", str(e)))
+            loop.call_soon_threadsafe(q.put_nowait, (DONE, None))
+
+        threading.Thread(target=worker, daemon=True).start()
+
+        raw_parts = []
+        while True:
+            kind, val = await q.get()
+            if kind is DONE:
+                break
+            if kind == "error":
+                yield _sse("error", {"error": val})
+                return
+            raw_parts.append(val)
+            yield _sse("delta", {"content": val})
+
+        try:
+            p = persona_parse.parse_persona_json("".join(raw_parts))
+        except Exception as e:
+            yield _sse("error", {"error": f"could not parse persona: {e}"})
+            return
+        payload = {"name": p["name"], "about": p["about"], "specialty": p["specialty"],
+                   "personality": p["personality"], "vibe": p["vibe"], "profileModel": llm.model_id()}
+        yield _sse("persona-done", payload)
+        yield _sse("done", {**payload, "_generator": {"model": llm.model_id()}})
+
+    return StreamingResponse(gen(), media_type="text/event-stream", headers={
+        "Cache-Control": "no-cache, no-transform",
+        "Connection": "keep-alive",
+        "X-Accel-Buffering": "no",
+    })
+
+
 app = gr.mount_gradio_app(fastapi_app, demo, path="/", head=HEAD, theme=gr.themes.Soft())
 
 

llm.py

@@ -0,0 +1,116 @@
+"""Configurable llama.cpp runtime for Tiny Army's persona + war-diary.
+
+Two modes, env-selected, behind ONE uniform `stream_chat()` generator so callers are
+runtime-agnostic:
+
+  • External (TINY_LLM_BASE_URL set): stream from any OpenAI-compatible llama.cpp
+    server — your local `llama-server`, or an HF-hosted GGUF endpoint. This mirrors
+    woid's LOCAL_LLM_BASE_URL switch (reused, not reinvented).
+  • In-Space (default): llama-cpp-python loads a GGUF — a local file
+    (TINY_LLM_MODEL_PATH) or one pulled from Hugging Face (TINY_LLM_HF_REPO +
+    TINY_LLM_HF_FILE).
+
+Generation is synchronous and CPU-bound, so it's serialized by a lock (one CPU model
+can't decode in parallel) — async callers (the SSE endpoint) run `stream_chat` in a
+threadpool. If no backend can load, `stream_chat` raises LlmUnavailable and callers
+fall back to a stub so the Space still works.
+"""
+import json
+import os
+import threading
+import urllib.request
+
+BASE_URL = os.environ.get("TINY_LLM_BASE_URL", "").rstrip("/")
+API_KEY = os.environ.get("TINY_LLM_API_KEY", "")
+MODEL_PATH = os.environ.get("TINY_LLM_MODEL_PATH", "")
+HF_REPO = os.environ.get("TINY_LLM_HF_REPO", "Qwen/Qwen2.5-0.5B-Instruct-GGUF")
+HF_FILE = os.environ.get("TINY_LLM_HF_FILE", "*q4_k_m.gguf")
+N_CTX = int(os.environ.get("TINY_LLM_N_CTX", "4096"))
+N_THREADS = int(os.environ.get("TINY_LLM_N_THREADS", str(os.cpu_count() or 2)))
+
+# A label for the `model` SSE event / UI — not used to route requests.
+MODEL_ID = (
+    os.environ.get("TINY_LLM_MODEL")
+    or ("external" if BASE_URL else "")
+    or (os.path.basename(MODEL_PATH) if MODEL_PATH else "")
+    or HF_REPO.split("/")[-1]
+)
+
+_lock = threading.Lock()
+_llm = None
+_load_error = None
+
+
+class LlmUnavailable(RuntimeError):
+    """No backend could be reached/loaded — callers should fall back to a stub."""
+
+
+def model_id():
+    return MODEL_ID or "tiny-llm"
+
+
+def _get_local():
+    global _llm, _load_error
+    if _llm is not None:
+        return _llm
+    if _load_error is not None:
+        raise LlmUnavailable(_load_error)
+    try:
+        from llama_cpp import Llama
+        common = dict(n_ctx=N_CTX, n_threads=N_THREADS, verbose=False)
+        if MODEL_PATH:
+            _llm = Llama(model_path=MODEL_PATH, **common)
+        else:  # pulls + caches the GGUF from Hugging Face on first use
+            _llm = Llama.from_pretrained(repo_id=HF_REPO, filename=HF_FILE, **common)
+        return _llm
+    except Exception as e:  # import / download / OOM / bad file
+        _load_error = f"{type(e).__name__}: {e}"
+        raise LlmUnavailable(_load_error)
+
+
+def _stream_external(system, user, max_tokens, temperature):
+    body = json.dumps({
+        "model": os.environ.get("TINY_LLM_MODEL", "local"),
+        "messages": [{"role": "system", "content": system}, {"role": "user", "content": user}],
+        "temperature": temperature, "max_tokens": max_tokens, "stream": True,
+    }).encode()
+    headers = {"Content-Type": "application/json"}
+    if API_KEY:
+        headers["Authorization"] = f"Bearer {API_KEY}"
+    req = urllib.request.Request(f"{BASE_URL}/chat/completions", data=body, headers=headers)
+    try:
+        with urllib.request.urlopen(req, timeout=120) as resp:
+            for raw in resp:
+                line = raw.decode("utf-8").strip()
+                if not line.startswith("data:"):
+                    continue
+                data = line[5:].strip()
+                if data == "[DONE]":
+                    break
+                try:
+                    delta = json.loads(data)["choices"][0]["delta"].get("content")
+                except Exception:
+                    continue
+                if delta:
+                    yield delta
+    except Exception as e:
+        raise LlmUnavailable(f"external endpoint: {type(e).__name__}: {e}")
+
+
+def _stream_local(system, user, max_tokens, temperature):
+    llm = _get_local()
+    for chunk in llm.create_chat_completion(
+        messages=[{"role": "system", "content": system}, {"role": "user", "content": user}],
+        max_tokens=max_tokens, temperature=temperature, stream=True,
+    ):
+        delta = chunk["choices"][0]["delta"].get("content")
+        if delta:
+            yield delta
+
+
+def stream_chat(system, user, max_tokens=400, temperature=0.8):
+    """Yield text chunks from the configured backend. Serialized by a module lock.
+    Raises LlmUnavailable if no backend is available."""
+    with _lock:
+        gen = _stream_external if BASE_URL else _stream_local
+        yield from gen(system, user, max_tokens, temperature)

persona_parse.py

@@ -0,0 +1,88 @@
+"""Persona JSON parsing — ported from woid's agent-sandbox/woid-core/persona/parse.js.
+
+LLMs wrap persona JSON in noise (code fences, preambles, trailing prose, multi-object
+emissions). These helpers defensively extract the first bracket-balanced JSON object
+and sanitize the standard fields. `about` is load-bearing; the rest are optional.
+"""
+import json
+import re
+
+_NAME_TRIM = re.compile(r'^[\s"\'“”‘’`]+|[\s"\'“”‘’`]+$')
+_NAME_KV = re.compile(r'^(name|character|persona)\s*[:=]', re.I)
+_FENCE = re.compile(r'```(?:json)?\s*([\s\S]*?)```', re.I)
+
+
+def sanitize_name(raw):
+    s = re.sub(r'\s+', ' ', _NAME_TRIM.sub('', str(raw or ''))).strip()
+    if len(s) < 2 or len(s) > 40:
+        return ''
+    if _NAME_KV.match(s):
+        return ''
+    return s
+
+
+def trim_tag(raw):
+    if not isinstance(raw, str):
+        return None
+    s = re.sub(r'\.\s*$', '', raw.strip())
+    if not s:
+        return None
+    return (s[:46].strip() + '…') if len(s) > 48 else s
+
+
+def extract_first_json_object(raw):
+    """Walk forward from each `{` until a bracket-balanced, string-aware `}`. First
+    successful parse wins — tolerates trailing prose and `}` inside string literals."""
+    n = len(raw)
+    for i in range(n):
+        if raw[i] != '{':
+            continue
+        depth = 0
+        in_str = False
+        esc = False
+        for j in range(i, n):
+            ch = raw[j]
+            if in_str:
+                if esc:
+                    esc = False
+                elif ch == '\\':
+                    esc = True
+                elif ch == '"':
+                    in_str = False
+                continue
+            if ch == '"':
+                in_str = True
+            elif ch == '{':
+                depth += 1
+            elif ch == '}':
+                depth -= 1
+                if depth == 0:
+                    try:
+                        return json.loads(raw[i:j + 1])
+                    except Exception:
+                        break
+    return None
+
+
+def parse_persona_json(raw):
+    """Strip ```json fences, bracket-balance-extract, sanitize. Raises ValueError if no
+    parseable JSON or no `about`."""
+    raw = str(raw or '')
+    m = _FENCE.search(raw)
+    candidate = (m.group(1) if m else raw).strip()
+    parsed = extract_first_json_object(candidate)
+    if not isinstance(parsed, dict):
+        raise ValueError('model did not return a parseable JSON object')
+    name = sanitize_name(parsed.get('name') or parsed.get('callSign') or '')
+    about_raw = parsed.get('about')
+    about = (about_raw.strip() if isinstance(about_raw, str) else '')[:1000]
+    if not about:
+        raise ValueError('model did not return an about')
+    return {
+        'name': name or None,
+        'about': about,
+        'avatar_hint': str(parsed.get('avatar_hint') or parsed.get('avatarHint') or '')[:200],
+        'vibe': str(parsed.get('vibe') or '')[:40],
+        'specialty': trim_tag(parsed.get('specialty') or parsed.get('role') or parsed.get('job')),
+        'personality': trim_tag(parsed.get('personality') or parsed.get('personalityTag')),
+    }

prompts.py

@@ -0,0 +1,33 @@
+"""Tiny-Army-specific system prompts (war/legend tone). Deliberately NOT woid's
+Severance/shelter persona prompts — these fit an auto-battler where every fighter
+writes its own legend."""
+
+PERSONA_SYSTEM = (
+    "You invent tiny soldiers for a fantasy auto-battler called Tiny Army, where every "
+    "fighter writes its own legend. Given a class and an optional seed, return ONE JSON "
+    "object and NOTHING else, with exactly these keys:\n"
+    '  "name": a short evocative soldier name (2-4 words),\n'
+    '  "about": 1-3 sentences of backstory in a heroic, slightly wry war-legend tone,\n'
+    '  "specialty": a 1-3 word combat specialty,\n'
+    '  "personality": a 1-3 word personality tag,\n'
+    '  "vibe": a 1-3 word vibe.\n'
+    "Output strictly valid JSON. No preamble, no code fences, no commentary."
+)
+
+DIARY_SYSTEM = (
+    "You are a tiny soldier in the auto-battler Tiny Army, writing a short first-person "
+    "war-diary entry. Given your name and traits, write 2-4 vivid sentences in first "
+    "person about a day on the battlefield — heroic, grounded, a touch of dark humor. "
+    "Prose only: no headings, no lists, no preamble."
+)
+
+
+def persona_user_prompt(unit_class="", seed=""):
+    s = f' Seed inspiration: "{seed.strip()}".' if seed and seed.strip() else ""
+    return f"Class: {(unit_class or 'soldier').strip()}.{s} Return the JSON object now."
+
+
+def diary_user_prompt(unit="", traits=""):
+    u = (unit or "a nameless soldier").strip()
+    t = (traits or "untested").strip()
+    return f"Name: {u}. Traits: {t}. Write the diary entry."

requirements.txt

@@ -1 +1,6 @@
 gradio==6.15.2
+huggingface_hub
+# llama.cpp runtime for the persona + war-diary model. The CPU wheel index ships a
+# prebuilt py3-none-manylinux_2_17_x86_64 wheel (no source compile needed). Pulled
+# via the --extra-index-url in the Dockerfile.
+llama-cpp-python==0.3.25

web/personaPanel.js

@@ -0,0 +1,83 @@
+// Tiny Army persona panel — vanilla DOM, mounted by tiny.js into #persona-stage.
+// Reuses woid's persona SSE client (/web/personaStream.js) VERBATIM against the
+// Space's own /persona/generate/stream endpoint, live-updating name/about as tokens
+// stream (the same extractLivePersona trick woid uses). No Pixi, no framework.
+import { streamGenerateProfile, extractLivePersona } from '/web/personaStream.js'
+
+const CLASSES = ['Warrior', 'Ranger', 'Monk', 'Assassin', 'Mage', 'Paladin', 'Cleric', 'Knight']
+
+function el(tag, props = {}, kids = []) {
+  const n = document.createElement(tag)
+  for (const [k, v] of Object.entries(props)) {
+    if (k === 'class') n.className = v
+    else if (k === 'html') n.innerHTML = v
+    else if (k.startsWith('on') && typeof v === 'function') n.addEventListener(k.slice(2), v)
+    else if (v != null) n.setAttribute(k, v)
+  }
+  for (const kid of [].concat(kids)) if (kid != null) n.append(kid)
+  return n
+}
+
+export function mountPersonaPanel(host, opts = {}) {
+  const path = opts.path || '/persona/generate/stream'
+  const classes = opts.classes || CLASSES
+
+  const sel = el('select', { class: 'persona-input' }, classes.map((c) => el('option', { value: c }, c)))
+  const seed = el('input', { class: 'persona-input', type: 'text', placeholder: 'a word, a vibe… (optional)' })
+  const status = el('div', { class: 'persona-status' })
+  const btn = el('button', { class: 'persona-go', type: 'button' }, '⚔ Recruit a soldier')
+
+  const nameEl = el('div', { class: 'persona-name' }, 'Your soldier')
+  const tagsEl = el('div', { class: 'persona-tags' })
+  const aboutEl = el('div', { class: 'persona-about' }, 'Pick a class and recruit — the model writes their legend.')
+
+  const controls = el('aside', { class: 'persona-controls' }, [
+    el('h2', { class: 'persona-title' }, 'Recruit'),
+    el('label', { class: 'persona-label' }, 'Class'), sel,
+    el('label', { class: 'persona-label' }, 'Seed'), seed,
+    btn, status,
+  ])
+  const result = el('div', { class: 'persona-result' }, [nameEl, tagsEl, aboutEl])
+  host.appendChild(el('div', { class: 'persona-view' }, [controls, result]))
+
+  function setTags(p) {
+    tagsEl.replaceChildren(...[p.specialty, p.personality, p.vibe].filter(Boolean)
+      .map((t) => el('span', { class: 'persona-tag' }, t)))
+  }
+
+  let busy = false
+  async function generate() {
+    if (busy) return
+    busy = true; btn.disabled = true
+    nameEl.textContent = '…'; aboutEl.textContent = ''; tagsEl.replaceChildren()
+    status.textContent = 'summoning the model… (first run downloads it)'
+    let acc = ''
+    try {
+      await streamGenerateProfile({
+        bridgeUrl: '', path, body: { class: sel.value, seed: seed.value },
+        onEvent: (evt, parsed) => {
+          if (evt === 'model') status.textContent = `writing with ${parsed?.model || 'the model'}…`
+          else if (evt === 'delta') {
+            acc += (parsed?.content || '')
+            const live = extractLivePersona(acc)
+            if (live.name) nameEl.textContent = live.name
+            if (live.about) aboutEl.textContent = live.about
+          } else if (evt === 'persona-done') {
+            if (parsed?.name) nameEl.textContent = parsed.name
+            if (parsed?.about) aboutEl.textContent = parsed.about
+            setTags(parsed || {})
+          } else if (evt === 'done') {
+            status.textContent = 'enlisted ✓'
+          } else if (evt === 'error') {
+            status.textContent = `couldn't recruit: ${parsed?.error || 'unknown error'}`
+          }
+        },
+      })
+    } catch (e) {
+      status.textContent = `couldn't recruit: ${e.message || e}`
+    } finally {
+      busy = false; btn.disabled = false
+    }
+  }
+  btn.addEventListener('click', generate)
+}

web/personaStream.js

@@ -0,0 +1,81 @@
+/**
+ * Shared helpers for the bridge's persona-generation stream.
+ *
+ * Both AgentProfile (player characters) and NPCs use the same SSE
+ * endpoint and the same partial-JSON extraction trick to live-update
+ * a name + about input as the stream arrives. Keeping the consumer
+ * here means there's a single place to evolve the protocol — events
+ * the bridge emits today (`model`, `delta`, `persona-done`,
+ * `avatar-start/done/error`, `done`, `error`) and any future ones.
+ */
+
+/**
+ * Best-effort partial-JSON extraction so we can stream growing fields
+ * back into the form before the closing `"` or `}` lands. Pulls the
+ * value of the named key, treating an unterminated string as
+ * "everything after the key marker up to EOL".
+ *
+ * Bounded outputs (name 80 chars, about 1000 chars) match the bridge's
+ * own caps so we don't overshoot the field on partial reads.
+ */
+export function extractLivePersona(raw) {
+  if (!raw) return { name: '', about: '' }
+  function pull(key) {
+    const closed = raw.match(new RegExp(`"${key}"\\s*:\\s*"((?:[^"\\\\]|\\\\.)*)"`))
+    if (closed) return closed[1].replace(/\\n/g, '\n').replace(/\\"/g, '"')
+    const open = raw.match(new RegExp(`"${key}"\\s*:\\s*"((?:[^"\\\\]|\\\\.)*)$`))
+    if (open) return open[1].replace(/\\n/g, '\n').replace(/\\"/g, '"')
+    return ''
+  }
+  return {
+    name: pull('name').slice(0, 80),
+    about: pull('about').slice(0, 1000),
+  }
+}
+
+/**
+ * POST /characters/:pubkey/generate-profile/stream and dispatch each
+ * SSE event to `onEvent(eventType, parsed, raw)`. Resolves when the
+ * stream ends; throws if the response isn't OK or if an `error`
+ * event arrives.
+ *
+ * `body` is the JSON payload — typically `{ seed, overwriteName, skipAvatar }`.
+ * `signal` is an optional AbortSignal so the caller can cancel.
+ * `path` optionally overrides the endpoint (e.g. a host without per-pubkey
+ * characters, like Tiny Army's `/persona/generate/stream`); defaults to woid's.
+ */
+export async function streamGenerateProfile({ bridgeUrl, pubkey, path, body, onEvent, signal }) {
+  const url = `${bridgeUrl}${path || `/characters/${pubkey}/generate-profile/stream`}`
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body ?? {}),
+    signal,
+  })
+  if (!res.ok || !res.body) throw new Error(`HTTP ${res.status}`)
+  const reader = res.body.getReader()
+  const decoder = new TextDecoder()
+  let buf = ''
+  while (true) {
+    const { value, done } = await reader.read()
+    if (done) break
+    buf += decoder.decode(value, { stream: true })
+    const events = buf.split(/\n\n/)
+    buf = events.pop() ?? ''
+    for (const evChunk of events) {
+      const lines = evChunk.split('\n')
+      let evt = 'message'
+      const dataLines = []
+      for (const line of lines) {
+        if (line.startsWith('event:')) evt = line.slice(6).trim()
+        else if (line.startsWith('data:')) dataLines.push(line.slice(5).trimStart())
+      }
+      const data = dataLines.join('\n')
+      if (!data) continue
+      let parsed = null
+      try { parsed = JSON.parse(data) } catch { /* tolerated — non-JSON deltas exist */ }
+      if (evt === 'error' && parsed?.error) throw new Error(parsed.error)
+      onEvent?.(evt, parsed, data)
+    }
+  }
+}

web/shell/nav.json

@@ -24,7 +24,8 @@
     {
       "title": "Barracks",
       "items": [
-        { "label": "War Diaries", "icon": "📓", "space": "Barracks" }
+        { "label": "War Diaries", "icon": "📓", "space": "Barracks" },
+        { "label": "Personas", "icon": "🪖", "space": "Personas" }
       ]
     }
   ]

web/shell/persona.css

@@ -0,0 +1,69 @@
+/* Persona panel chrome — parchment palette, self-contained (scoped on .persona-view)
+ * so it matches the app whether the OS is light or dark. Mirrors the spriteScene.css
+ * approach. */
+.persona-view {
+  --p-ink: #141821; --p-muted: #6d6a5f; --p-paper: #f3ebdc; --p-paper-2: #ece2cc;
+  --p-card: #fbf6ea; --p-transmit: #d8271a;
+  --p-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --p-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
+  display: flex; height: 100%; width: 100%; box-sizing: border-box;
+  color: var(--p-ink); font-family: var(--p-sans);
+}
+.persona-view * { box-sizing: border-box; }
+
+.persona-controls {
+  width: 280px; flex-shrink: 0; border-right: 2px solid var(--p-ink);
+  background: var(--p-paper-2); overflow-y: auto; padding: 16px;
+  display: flex; flex-direction: column; gap: 8px;
+}
+.persona-title {
+  margin: 0 0 6px !important; font-family: var(--p-mono) !important; font-size: 11px !important;
+  font-weight: 500 !important; letter-spacing: .2em; text-transform: uppercase;
+  color: var(--p-transmit) !important; line-height: 1.4 !important;
+}
+.persona-label {
+  font-family: var(--p-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
+  color: var(--p-muted); margin-top: 6px;
+}
+.persona-input {
+  font-family: var(--p-sans) !important; font-size: 14px !important; color: var(--p-ink) !important;
+  background: var(--p-card) !important; border: 1.5px solid var(--p-ink) !important;
+  border-radius: 0 !important; padding: 7px 9px !important; width: 100%;
+}
+.persona-go {
+  margin-top: 10px; font-family: var(--p-mono) !important; font-size: 12px !important;
+  font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase;
+  color: var(--p-paper) !important; background: var(--p-ink) !important;
+  border: 1.5px solid var(--p-ink) !important; border-radius: 0 !important;
+  padding: 9px 12px !important; cursor: pointer; box-shadow: 2px 2px 0 var(--p-transmit);
+}
+.persona-go:hover { background: var(--p-transmit) !important; }
+.persona-go:disabled { opacity: .55; cursor: default; box-shadow: none; }
+.persona-status {
+  margin-top: 8px; font-family: var(--p-mono); font-size: 10px; letter-spacing: .06em;
+  color: var(--p-muted); min-height: 14px; line-height: 1.5;
+}
+
+.persona-result {
+  flex: 1; min-width: 0; overflow-y: auto; padding: 28px 32px;
+  background: var(--p-paper);
+}
+.persona-name {
+  font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-size: 34px;
+  line-height: 1; letter-spacing: -.02em; color: var(--p-ink);
+}
+.persona-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
+.persona-tag {
+  font-family: var(--p-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
+  color: var(--p-ink); background: var(--p-card); border: 1.5px solid var(--p-ink);
+  padding: 3px 8px;
+}
+.persona-about {
+  font-size: 17px; line-height: 1.6; max-width: 60ch; color: var(--p-ink);
+  white-space: pre-wrap;
+}
+
+@media (max-width: 768px) {
+  .persona-view { flex-direction: column; }
+  .persona-controls { width: 100%; border-right: 0; border-bottom: 2px solid var(--p-ink); }
+}

web/tiny.js

@@ -7,6 +7,7 @@ import * as PIXI from 'https://cdn.jsdelivr.net/npm/pixi.js@8/dist/pixi.min.mjs'
 import { makeTeamBattle, step, FIELD } from '/web/engine.js'
 import { sliceGridWith, cellOf, rowFor, facingFor, ANIM } from '/web/sheet.js'
 import { mountSpritePlayground } from '/web/playground.js'
+import { mountPersonaPanel } from '/web/personaPanel.js'
 
 function whenEl(id, cb) {
   const found = document.getElementById(id)
@@ -52,6 +53,9 @@ whenEl('sprite-stage', async (el) => {
   playground = mountSpritePlayground(PIXI, el, { packs: man.packs || [], urlFor: spriteUrl })
 })
 
+// ── Personas tab — vanilla persona panel streaming from /persona/generate/stream ──
+whenEl('persona-stage', (el) => { mountPersonaPanel(el) })
+
 // ── Battle tab (real sprites, reusing the engine + shared renderer) ──────────
 const PLAYERS = [
   { profession: 'Warrior', name: 'Bram', skills: [], slug: 'true-heroes-iii-fighter' },