chore: sync uv.lock to version 0.2.0

Lockfile caught up to the pyproject version bump from 1f5a321 (it wasn't
regenerated at the time). No dependency changes.

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

.gitignore

@@ -35,4 +35,5 @@ data/
 
 #lyra Stuff
 /core/relay/sessions/
-/chat-gpt-export/
+/chat-gpt-export/
+/import/

lyra/chat.py

@@ -162,3 +162,60 @@ def respond(session_id: str, user_msg: str, backend: Backend = "cloud",
     # Compact this session once enough new turns have piled up.
     summary.maybe_summarize(session_id)
     return reply
+
+
+def respond_stream(session_id: str, user_msg: str, backend: Backend = "cloud",
+                   model_override: str | None = None):
+    """Streaming generator version of `respond`.
+
+    Yields ("delta", text) as content streams in, and ("tool", name) when a tool
+    runs. Persists the full exchange and yields a final ("done", reply) — matching
+    `respond`'s side effects (memory + compaction) exactly.
+    """
+    cfg = config.load()
+    model = {"local": cfg.local_model, "cloud": cfg.chat_model, "mi50": cfg.mi50_model}.get(
+        backend, backend
+    )
+    if model_override and backend == "cloud":
+        model = model_override
+    logbus.log(
+        "info", "chat request (stream)", session=session_id, backend=backend,
+        model=model, embed=cfg.embed_backend,
+    )
+
+    messages = build_messages(session_id, user_msg)
+    tool_specs = toolkit.specs() if backend in TOOL_BACKENDS else None
+    ctx = {"session_id": session_id, "backend": backend}
+    parts: list[str] = []
+    for _ in range(MAX_TOOL_ROUNDS):
+        assistant_msg = None
+        tool_calls = None
+        for ev, payload in llm.chat_call_stream(
+            messages, backend=backend, model=model, tools=tool_specs
+        ):
+            if ev == "delta":
+                parts.append(payload)
+                yield ("delta", payload)
+            elif ev == "message":
+                assistant_msg = payload
+            elif ev == "tool_calls":
+                tool_calls = payload
+        if not tool_calls:
+            break
+        messages.append(assistant_msg)  # her tool-call request
+        for tc in tool_calls:
+            result = toolkit.dispatch(tc["name"], tc["arguments"], ctx)
+            logbus.log("info", "tool call", session=session_id, tool=tc["name"], result=result[:80])
+            messages.append({"role": "tool", "tool_call_id": tc["id"], "content": result})
+            yield ("tool", tc["name"])
+
+    reply = "".join(parts)
+    if not reply:
+        reply = "(I got tangled using my tools there — say that again?)"
+        yield ("delta", reply)
+    logbus.log("info", "reply", session=session_id, chars=len(reply))
+
+    memory.remember(session_id, "user", user_msg)
+    memory.remember(session_id, "assistant", reply)
+    summary.maybe_summarize(session_id)
+    yield ("done", reply)

lyra/llm.py

@@ -1,7 +1,8 @@
 """LLM router: local (Ollama) chat, cloud (OpenAI) chat + embeddings."""
 from __future__ import annotations
 
-from typing import Literal, TypedDict
+import json
+from typing import Iterator, Literal, TypedDict
 
 import httpx
 from openai import OpenAI
@@ -80,6 +81,88 @@ def chat_call(
     return {"role": "assistant", "content": complete(messages, backend=backend, model=model)}, None
 
 
+def chat_call_stream(
+    messages: list, backend: Backend = "cloud", model: str | None = None,
+    tools: list | None = None,
+) -> Iterator[tuple[str, object]]:
+    """Streaming variant of `chat_call`. Yields ("delta", text) for each content
+    chunk as it arrives, then exactly two terminal events:
+      ("message", assistant_dict)  — the full assistant turn, to append back
+      ("tool_calls", calls | None) — list of {id,name,arguments} or None
+
+    `local` (Ollama) streams NDJSON and never returns tool calls.
+    """
+    cfg = load()
+    if backend in ("cloud", "mi50"):
+        if backend == "cloud":
+            if not cfg.openai_api_key:
+                raise RuntimeError("OPENAI_API_KEY is not set")
+            client = OpenAI(api_key=cfg.openai_api_key)
+            mdl = model or cfg.cloud_model
+        else:
+            client = OpenAI(api_key="not-needed", base_url=cfg.mi50_base_url)
+            mdl = model or cfg.mi50_model
+        kwargs: dict = {"model": mdl, "messages": messages, "stream": True}
+        if tools:
+            kwargs["tools"] = tools
+        parts: list[str] = []
+        frags: dict[int, dict] = {}  # tool-call fragments accumulated by index
+        for chunk in client.chat.completions.create(**kwargs):
+            if not chunk.choices:
+                continue
+            delta = chunk.choices[0].delta
+            if getattr(delta, "content", None):
+                parts.append(delta.content)
+                yield ("delta", delta.content)
+            for tc in getattr(delta, "tool_calls", None) or []:
+                slot = frags.setdefault(tc.index, {"id": "", "name": "", "arguments": ""})
+                if tc.id:
+                    slot["id"] = tc.id
+                if tc.function and tc.function.name:
+                    slot["name"] = tc.function.name
+                if tc.function and tc.function.arguments:
+                    slot["arguments"] += tc.function.arguments
+        content = "".join(parts)
+        if frags:
+            calls = [frags[i] for i in sorted(frags)]
+            assistant = {
+                "role": "assistant",
+                "content": content or None,
+                "tool_calls": [
+                    {"id": c["id"], "type": "function",
+                     "function": {"name": c["name"], "arguments": c["arguments"]}}
+                    for c in calls
+                ],
+            }
+            yield ("message", assistant)
+            yield ("tool_calls", [{"id": c["id"], "name": c["name"], "arguments": c["arguments"]} for c in calls])
+        else:
+            yield ("message", {"role": "assistant", "content": content})
+            yield ("tool_calls", None)
+        return
+
+    # local (Ollama): stream NDJSON, no tools.
+    parts = []
+    with httpx.stream(
+        "POST", f"{cfg.local_base_url}/api/chat",
+        json={"model": model or cfg.local_model, "messages": messages, "stream": True},
+        timeout=120,
+    ) as resp:
+        resp.raise_for_status()
+        for line in resp.iter_lines():
+            if not line:
+                continue
+            data = json.loads(line)
+            piece = (data.get("message") or {}).get("content", "")
+            if piece:
+                parts.append(piece)
+                yield ("delta", piece)
+            if data.get("done"):
+                break
+    yield ("message", {"role": "assistant", "content": "".join(parts)})
+    yield ("tool_calls", None)
+
+
 def embed(texts: list[str]) -> list[list[float]]:
     """Embed texts using the configured backend (EMBED_BACKEND: "cloud" or "local").
 

lyra/web/gen_icons.py

@@ -0,0 +1,75 @@
+#!/usr/bin/env python3
+"""Generate Lyra PWA icons with no third-party deps (pure stdlib PNG writer).
+
+Design: RTO warm/low-glow — near-black field, a soft orange ambient glow, and a
+luminous gold-orange ring (the "orb/portal"). iOS masks corners itself, so icons
+are full-bleed squares. Run from anywhere; writes PNGs into ./static.
+"""
+import math
+import os
+import struct
+import zlib
+
+HERE = os.path.join(os.path.dirname(os.path.abspath(__file__)), "static")
+
+BG = (7, 7, 7)            # #070707
+ORANGE = (255, 122, 0)    # #ff7a00 accent
+GOLD = (255, 179, 71)     # #ffb347 hot core
+
+
+def _png(width, height, rgb_rows):
+    def chunk(tag, data):
+        return (struct.pack(">I", len(data)) + tag + data
+                + struct.pack(">I", zlib.crc32(tag + data) & 0xFFFFFFFF))
+
+    raw = bytearray()
+    for row in rgb_rows:
+        raw.append(0)  # filter type 0 (None)
+        raw.extend(row)
+    ihdr = struct.pack(">IIBBBBB", width, height, 8, 2, 0, 0, 0)  # 8-bit RGB
+    return (b"\x89PNG\r\n\x1a\n"
+            + chunk(b"IHDR", ihdr)
+            + chunk(b"IDAT", zlib.compress(bytes(raw), 9))
+            + chunk(b"IEND", b""))
+
+
+def render(n):
+    c = (n - 1) / 2.0
+    sigma_glow = n * 0.30
+    ring_r = n * 0.30
+    ring_w = n * 0.050
+    core_sigma = n * 0.11
+    rows = []
+    for y in range(n):
+        row = bytearray()
+        for x in range(n):
+            dx, dy = x - c, y - c
+            d = math.hypot(dx, dy)
+            r, g, b = BG
+            # ambient orange glow
+            glow = math.exp(-(d * d) / (2 * sigma_glow * sigma_glow)) * 0.50
+            # soft hot core
+            core = math.exp(-(d * d) / (2 * core_sigma * core_sigma)) * 0.45
+            # luminous ring
+            rr = d - ring_r
+            ring = math.exp(-(rr * rr) / (2 * ring_w * ring_w))
+            r += ORANGE[0] * glow + GOLD[0] * (ring + core)
+            g += ORANGE[1] * glow + GOLD[1] * (ring + core)
+            b += ORANGE[2] * glow + GOLD[2] * (ring + core)
+            row += bytes((min(255, int(r)), min(255, int(g)), min(255, int(b))))
+        rows.append(row)
+    return rows
+
+
+def write(name, n):
+    rows = render(n)
+    with open(os.path.join(HERE, name), "wb") as f:
+        f.write(_png(n, n, rows))
+    print(f"wrote {name} ({n}x{n})")
+
+
+if __name__ == "__main__":
+    write("icon-512.png", 512)
+    write("icon-192.png", 192)
+    write("apple-touch-icon.png", 180)
+    write("icon-maskable-512.png", 512)

lyra/web/server.py

@@ -111,6 +111,45 @@ def create_app() -> FastAPI:
             ],
         }
 
+    @app.post("/v1/chat/stream")
+    async def chat_stream(request: Request) -> StreamingResponse:
+        """Server-Sent Events: stream Lyra's reply token-by-token.
+
+        `chat.respond_stream` is a blocking generator (httpx/openai), so it runs in
+        a worker thread and bridges chunks to this async generator via a queue.
+        """
+        body = await request.json()
+        session_id = body.get("sessionId") or "default"
+        backend = _backend_for(body.get("backend"))
+        user_msg = _last_user_message(body.get("messages", []))
+        model_override = body.get("model") or None
+        memory.ensure_session(session_id)
+
+        async def gen():
+            loop = asyncio.get_running_loop()
+            q: asyncio.Queue = asyncio.Queue()
+            done = object()
+
+            def produce():
+                try:
+                    for event in chat.respond_stream(session_id, user_msg, backend, model_override):
+                        loop.call_soon_threadsafe(q.put_nowait, event)
+                except Exception as exc:  # surface to the client stream, don't hang
+                    logbus.log("error", "chat stream failed", session=session_id, error=str(exc))
+                    loop.call_soon_threadsafe(q.put_nowait, ("error", str(exc)))
+                finally:
+                    loop.call_soon_threadsafe(q.put_nowait, done)
+
+            loop.run_in_executor(None, produce)
+            while True:
+                item = await q.get()
+                if item is done:
+                    break
+                ev, payload = item
+                yield f"data: {json.dumps({'type': ev, 'payload': payload})}\n\n"
+
+        return StreamingResponse(gen(), media_type="text/event-stream")
+
     @app.get("/logs")
     async def logs_page() -> FileResponse:
         """Full-page, mobile-friendly live log viewer (separate from the chat UI)."""

lyra/web/static/index.html

@@ -5,10 +5,14 @@
   <title>Lyra Core Chat</title>
   <link rel="stylesheet" href="style.css" />
   <!-- PWA -->
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
   <meta name="mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <meta name="apple-mobile-web-app-title" content="Lyra" />
+  <meta name="theme-color" content="#070707" />
+  <link rel="apple-touch-icon" href="apple-touch-icon.png" />
+  <link rel="icon" type="image/png" href="icon-192.png" />
   <link rel="manifest" href="manifest.json" />
 
 </head>
@@ -37,9 +41,7 @@
       <h4>Actions</h4>
       <button id="mobileThinkingStreamBtn">📜 Live Log (inline)</button>
       <button id="mobileFullLogBtn">⛶ Full Log</button>
-      <button id="mobileMindBtn">🧠 Read Her Mind</button>
       <button id="mobileJournalBtn">📔 Journal</button>
-      <button id="mobileHandsBtn">🃏 Hands</button>
       <button id="mobileSettingsBtn">⚙ Settings</button>
       <button id="mobileToggleThemeBtn">🌙 Toggle Theme</button>
       <button id="mobileForceReloadBtn">🔄 Force Reload</button>
@@ -55,6 +57,8 @@
         <span></span>
         <span></span>
       </button>
+      <span class="brand">Lyra</span>
+      <span class="brand-dot" id="brandDot" title="Relay status"></span>
       <label for="mode">Mode:</label>
       <select id="mode">
         <option value="standard">Standard</option>
@@ -110,6 +114,14 @@
       <input id="userInput" type="text" placeholder="Type a message..." autofocus />
       <button id="sendBtn">Send</button>
     </div>
+
+    <!-- Bottom tab bar (mobile only; hides while the keyboard is open) -->
+    <nav id="tabbar" aria-label="Primary navigation">
+      <a class="tab active" href="/" aria-current="page"><span class="ti">💬</span><span class="tl">Chat</span></a>
+      <a class="tab" href="/hands"><span class="ti">🃏</span><span class="tl">Hands</span></a>
+      <a class="tab" href="/self"><span class="ti">🧠</span><span class="tl">Mind</span></a>
+      <button class="tab" id="moreTab" type="button"><span class="ti">⋯</span><span class="tl">More</span></button>
+    </nav>
   </div>
 
   <!-- Settings Modal (outside chat container) -->
@@ -174,6 +186,7 @@
   <script>
     const RELAY_BASE = "";  // same-origin: served by lyra.web.server
     const API_URL = `${RELAY_BASE}/v1/chat/completions`;
+    const STREAM_URL = `${RELAY_BASE}/v1/chat/stream`;
 
 	function generateSessionId() {
       return "sess-" + Math.random().toString(36).substring(2, 10);
@@ -302,21 +315,101 @@
         body.model = cloudModel;
       }
 
+      // Stream the reply token-by-token (SSE). Fall back to the blocking
+      // endpoint only if nothing streamed (e.g. streaming unavailable).
+      const div = createAssistantBubble();
+      let full = "";
       try {
-        const resp = await fetch(API_URL, {
+        const resp = await fetch(STREAM_URL, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(body)
         });
+        if (!resp.ok || !resp.body) throw new Error("HTTP " + resp.status);
 
-        const data = await resp.json();
-        const reply = data.choices?.[0]?.message?.content || "(no reply)";
-        addMessage("assistant", reply);
-        history.push({ role: "assistant", content: reply });
-		await saveSession();
+        const reader = resp.body.getReader();
+        const decoder = new TextDecoder();
+        let buf = "";
+        for (;;) {
+          const { value, done } = await reader.read();
+          if (done) break;
+          buf += decoder.decode(value, { stream: true });
+          let i;
+          while ((i = buf.indexOf("\n\n")) !== -1) {
+            const frame = buf.slice(0, i).trim();
+            buf = buf.slice(i + 2);
+            if (!frame.startsWith("data:")) continue;
+            let evt;
+            try { evt = JSON.parse(frame.slice(5).trim()); } catch (e) { continue; }
+            if (evt.type === "delta") {
+              full += evt.payload;
+              updateAssistantBubble(div, full);
+            } else if (evt.type === "done") {
+              if (evt.payload) full = evt.payload;
+            } else if (evt.type === "error") {
+              throw new Error(evt.payload);
+            }
+          }
+        }
       } catch (err) {
-        addMessage("system", "Error: " + err.message);
+        if (!full) {
+          div.remove();
+          try {
+            const resp = await fetch(API_URL, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify(body)
+            });
+            const data = await resp.json();
+            const reply = data.choices?.[0]?.message?.content || "(no reply)";
+            addMessage("assistant", reply);
+            history.push({ role: "assistant", content: reply });
+            await saveSession();
+          } catch (err2) {
+            addMessage("system", "Error: " + err2.message);
+          }
+          return;
+        }
+        // Partial content arrived before the error — keep what we streamed.
       }
+
+      finalizeAssistantBubble(div, full || "(no reply)");
+      history.push({ role: "assistant", content: full || "(no reply)" });
+      await saveSession();
+    }
+
+    function createAssistantBubble() {
+      const messagesEl = document.getElementById("messages");
+      const div = document.createElement("div");
+      div.className = "msg assistant streaming";
+      messagesEl.appendChild(div);
+      messagesEl.scrollTop = messagesEl.scrollHeight;  // instant — no smooth chasing
+      return div;
+    }
+
+    // Coalesce token updates to one render per animation frame (avoids re-parsing
+    // the whole message on every token, and the iOS ghosting from rapid repaints).
+    function updateAssistantBubble(div, text) {
+      div._pending = text;
+      if (div._raf) return;
+      div._raf = requestAnimationFrame(() => {
+        div._raf = 0;
+        const messagesEl = document.getElementById("messages");
+        const stick = messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight < 90;
+        div.innerHTML = renderMarkdown(div._pending);
+        div.dataset.raw = div._pending;
+        if (stick) messagesEl.scrollTop = messagesEl.scrollHeight;  // follow only if near bottom
+      });
+    }
+
+    function finalizeAssistantBubble(div, text) {
+      if (div._raf) { cancelAnimationFrame(div._raf); div._raf = 0; }  // drop any queued render
+      div.classList.remove("streaming");
+      div.innerHTML = renderMarkdown(text);
+      div.dataset.raw = text;
+      addRateBar(div);
+      const messagesEl = document.getElementById("messages");
+      requestAnimationFrame(() => messagesEl.scrollTo({ top: messagesEl.scrollHeight, behavior: "smooth" }));
     }
 
 	function renderMarkdown(text) {
@@ -412,16 +505,58 @@
         if (resp.ok) {
           document.getElementById("status-dot").className = "dot ok";
           document.getElementById("status-text").textContent = "Relay Online";
+          document.getElementById("brandDot").className = "brand-dot ok";
         } else {
           throw new Error("Bad status");
         }
       } catch (err) {
         document.getElementById("status-dot").className = "dot fail";
         document.getElementById("status-text").textContent = "Relay Offline";
+        document.getElementById("brandDot").className = "brand-dot fail";
       }
     }
 
     document.addEventListener("DOMContentLoaded", () => {
+      // --- PWA: track the *visible* viewport height so the layout follows the
+      // iOS keyboard and the dynamic Safari toolbars (keeps the input bar visible
+      // instead of hiding behind the keyboard). Falls back to 100dvh via CSS.
+      function setAppHeight() {
+        const vv = window.visualViewport;
+        const h = (vv && vv.height) || window.innerHeight;
+        const off = (vv && vv.offsetTop) || 0;
+        const root = document.documentElement.style;
+        root.setProperty("--app-height", h + "px");
+        // iOS pans the visual viewport when the keyboard opens; follow its top
+        // edge so the pinned #chat sits exactly in the visible area.
+        root.setProperty("--app-offset", off + "px");
+        // Keyboard open ⇒ hide the bottom tab bar so the input pins to the keyboard.
+        document.body.classList.toggle("kb", (window.innerHeight - h) > 150);
+      }
+      // Re-measure across the keyboard animation: iOS reports a stale (too-short)
+      // height mid-animation, so sample a few times until it settles.
+      function nudgeAppHeight() {
+        setAppHeight();
+        [50, 150, 300, 550].forEach((t) => setTimeout(setAppHeight, t));
+      }
+      setAppHeight();
+      if (window.visualViewport) {
+        window.visualViewport.addEventListener("resize", nudgeAppHeight);
+        window.visualViewport.addEventListener("scroll", setAppHeight);
+      }
+      window.addEventListener("resize", nudgeAppHeight);
+      window.addEventListener("orientationchange", nudgeAppHeight);
+
+      // Keep the latest message in view when the keyboard opens/closes.
+      const userInputEl = document.getElementById("userInput");
+      userInputEl.addEventListener("focus", () => {
+        nudgeAppHeight();
+        setTimeout(() => {
+          const m = document.getElementById("messages");
+          m.scrollTo({ top: m.scrollHeight, behavior: "smooth" });
+        }, 350);
+      });
+      userInputEl.addEventListener("blur", nudgeAppHeight);
+
       // Mobile Menu Toggle
       const hamburgerMenu = document.getElementById("hamburgerMenu");
       const mobileMenu = document.getElementById("mobileMenu");
@@ -441,6 +576,7 @@
 
       hamburgerMenu.addEventListener("click", toggleMobileMenu);
       mobileMenuOverlay.addEventListener("click", closeMobileMenu);
+      document.getElementById("moreTab").addEventListener("click", toggleMobileMenu);
 
       // Sync mobile menu controls with desktop
       const mobileMode = document.getElementById("mobileMode");
@@ -884,15 +1020,9 @@
       document.getElementById("mobileFullLogBtn").addEventListener("click", () => {
         closeMobileMenu(); window.location.href = "/logs";
       });
-      document.getElementById("mobileMindBtn").addEventListener("click", () => {
-        closeMobileMenu(); window.location.href = "/self";
-      });
       document.getElementById("mobileJournalBtn").addEventListener("click", () => {
         closeMobileMenu(); window.location.href = "/journal";
       });
-      document.getElementById("mobileHandsBtn").addEventListener("click", () => {
-        closeMobileMenu(); window.location.href = "/hands";
-      });
 
       // Connect to the global live log on page load.
       connectThinkingStream();

lyra/web/static/manifest.json

@@ -1,20 +1,33 @@
-{
-  "name": "Lyra Chat",
-  "short_name": "Lyra",
-  "start_url": "./index.html",
-  "display": "standalone",
-  "background_color": "#181818",
-  "theme_color": "#181818",
-  "icons": [
-    {
-      "src": "icon-192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "icon-512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ]
-}
+{
+  "name": "Lyra",
+  "short_name": "Lyra",
+  "description": "Lyra — chat, mind, journal, and poker copilot.",
+  "start_url": "./index.html",
+  "scope": "./",
+  "display": "standalone",
+  "display_override": ["standalone", "minimal-ui"],
+  "orientation": "portrait",
+  "background_color": "#070707",
+  "theme_color": "#070707",
+  "categories": ["productivity", "utilities"],
+  "icons": [
+    {
+      "src": "icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "icon-maskable-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

lyra/web/static/style.css

@@ -1,31 +1,61 @@
 :root {
   --bg-dark: #070707;
-  --bg-panel: rgba(255, 122, 0, 0.1);
+  --bg-elev: #0e0e0e;
+  --bg-line: #141414;
+  --bg-panel: #0e0e0e;
+  --border: #2a1d12;
+  --border-bright: #4a2f15;
   --accent: #ff7a00;
-  --accent-glow: 0 0 6px rgba(255,122,0,0.28);
+  --gold: #ffb347;
+  --good: #8fd694;
+  --bad: #ff5a5a;
+  --accent-soft: rgba(255, 122, 0, 0.10);
+  --accent-glow: 0 0 6px rgba(255, 122, 0, 0.18);
   --text-main: #e8e8e8;
-  --text-fade: #999;
-  --font-console: "IBM Plex Mono", monospace;
+  --text-fade: #8a8a8a;
+  --font-console: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-voice: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 
-/* Light mode variables */
+/* Light mode (secondary — Brian runs dark) */
 body {
-  --bg-dark: #f5f5f5;
-  --bg-panel: rgba(255, 122, 0, 0.05);
-  --accent: #ff7a00;
-  --accent-glow: 0 0 6px rgba(255,122,0,0.28);
+  --bg-dark: #f5f3ef;
+  --bg-elev: #ffffff;
+  --bg-line: #ece8e1;
+  --bg-panel: #ffffff;
+  --border: #e2dacb;
+  --border-bright: #c9a87a;
+  --accent: #c75e00;
+  --gold: #b8791f;
+  --good: #3f9a52;
+  --bad: #c0392b;
+  --accent-soft: rgba(199, 94, 0, 0.08);
+  --accent-glow: none;
   --text-main: #1a1a1a;
-  --text-fade: #666;
+  --text-fade: #6a6a6a;
+  --text: var(--text-main);   /* alias: some rules reference var(--text) */
 }
 
-/* Dark mode variables */
+/* Dark mode (primary — RTO warm low-glow) */
 body.dark {
   --bg-dark: #070707;
-  --bg-panel: rgba(255, 122, 0, 0.1);
+  --bg-elev: #0e0e0e;
+  --bg-line: #141414;
+  --bg-panel: #0e0e0e;
+  --border: #2a1d12;
+  --border-bright: #4a2f15;
   --accent: #ff7a00;
-  --accent-glow: 0 0 6px rgba(255,122,0,0.28);
+  --gold: #ffb347;
+  --good: #8fd694;
+  --bad: #ff5a5a;
+  --accent-soft: rgba(255, 122, 0, 0.10);
+  --accent-glow: 0 0 6px rgba(255, 122, 0, 0.18);
   --text-main: #e8e8e8;
-  --text-fade: #999;
+  --text-fade: #8a8a8a;
+}
+
+html {
+  overscroll-behavior: none;
 }
 
 body {
@@ -33,10 +63,13 @@ body {
   background: var(--bg-dark);
   color: var(--text-main);
   font-family: var(--font-console);
-  height: 100vh;
+  height: 100vh;        /* fallback for old browsers */
+  height: 100dvh;
   display: flex;
   justify-content: center;
   align-items: center;
+  overscroll-behavior: none;
+  -webkit-tap-highlight-color: transparent;
 }
 
 #chat {
@@ -45,9 +78,9 @@ body {
   height: 95vh;
   display: flex;
   flex-direction: column;
-  border: 1px solid var(--accent);
-  border-radius: 10px;
-  box-shadow: var(--accent-glow);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: none;
   background: var(--bg-dark);
   overflow: hidden;
 }
@@ -58,109 +91,137 @@ body {
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  border-bottom: 1px solid var(--accent);
-  background-color: rgba(255, 122, 0, 0.05);
+  border-bottom: 1px solid var(--border);
+  background-color: var(--bg-elev);
 }
 #status {
   justify-content: flex-start;
-  border-top: 1px solid var(--accent);
+  border-top: 1px solid var(--border);
 }
 
 label, select, button {
   font-family: var(--font-console);
   font-size: 0.9rem;
   color: var(--text-main);
-  background: transparent;
-  border: 1px solid var(--accent);
-  border-radius: 4px;
-  padding: 4px 8px;
+  background: var(--bg-line);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 5px 9px;
+  transition: border-color .15s, background-color .15s;
 }
+label { background: transparent; border-color: transparent; padding-left: 0; }
 
 button:hover, select:hover {
-  box-shadow: 0 0 8px var(--accent);
+  border-color: var(--border-bright);
+  background: var(--accent-soft);
   cursor: pointer;
 }
 
 #thinkingStreamBtn {
-  background: rgba(255, 179, 71, 0.2);
-  border-color: #ffb347;
+  background: var(--bg-line);
+  border-color: var(--border-bright);
+  color: var(--gold);
 }
 
 #thinkingStreamBtn:hover {
-  box-shadow: 0 0 8px #ffb347;
-  background: rgba(255, 179, 71, 0.3);
+  background: var(--accent-soft);
+  border-color: var(--gold);
 }
 
 /* Chat area */
 #messages {
   flex: 1;
+  min-height: 0;
   padding: 16px;
   overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
   display: flex;
   flex-direction: column;
   gap: 8px;
-  scroll-behavior: smooth;
+  /* No CSS smooth-scroll: during streaming, per-token smooth scrolls pile up and
+     iOS Safari leaves ghost paint frames. Smooth is applied explicitly in JS where
+     it's a one-shot (load/finalize). */
 }
 
 /* Messages */
 .msg {
   max-width: 80%;
   padding: 10px 14px;
-  border-radius: 8px;
+  border-radius: 12px;
   line-height: 1.4;
   word-wrap: break-word;
-  box-shadow: 0 0 8px rgba(255,122,0,0.2);
+  box-shadow: none;
 }
 .msg.user {
   align-self: flex-end;
-  background: rgba(255,122,0,0.15);
-  border: 1px solid var(--accent);
+  background: var(--accent-soft);
+  border: 1px solid var(--border-bright);
+  border-bottom-right-radius: 4px;
 }
 .msg.assistant {
   align-self: flex-start;
-  background: rgba(255,122,0,0.08);
-  border: 1px solid rgba(255,122,0,0.5);
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-bottom-left-radius: 4px;
 }
 .msg.system {
   align-self: center;
-  font-size: 0.8rem;
+  font-size: 0.78rem;
   color: var(--text-fade);
+  text-align: center;
+  padding: 4px 10px;
 }
 
 /* Input bar */
 #input {
   display: flex;
-  border-top: 1px solid var(--accent);
-  background: rgba(255, 122, 0, 0.05);
+  border-top: 1px solid var(--border);
+  background: var(--bg-elev);
   padding: 10px;
 }
 #userInput {
   flex: 1;
-  background: transparent;
+  background: var(--bg-line);
   color: var(--text-main);
-  border: 1px solid var(--accent);
-  border-radius: 4px;
-  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 9px 12px;
+  font-family: var(--font-console);
+  transition: border-color .15s, box-shadow .15s;
+}
+#userInput::placeholder { color: var(--text-fade); }
+#userInput:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: var(--accent-glow);
 }
 #sendBtn {
   margin-left: 8px;
+  background: var(--accent);
+  color: #0a0a0a;
+  border-color: var(--accent);
+  font-weight: 600;
 }
+#sendBtn:hover { background: var(--gold); border-color: var(--gold); }
+#sendBtn:disabled { opacity: .45; background: var(--bg-line); color: var(--text-fade); border-color: var(--border); }
 
 /* Relay status dot */
 #status {
   display: flex;
   align-items: center;
-  margin: 10px 0;
   gap: 8px;
-  font-family: monospace;
-  color: #f5f5f5;
+  font-family: var(--font-console);
+  font-size: 0.82rem;
+  color: var(--text-fade);
 }
 
 #status-dot {
-  width: 10px;
-  height: 10px;
+  width: 9px;
+  height: 9px;
   border-radius: 50%;
   display: inline-block;
+  background: var(--text-fade);
 }
 
 @keyframes pulseGreen {
@@ -170,29 +231,29 @@ button:hover, select:hover {
 }
 
 .dot.ok {
-  background: #8fd694;
+  background: var(--good);
   animation: pulseGreen 2s infinite ease-in-out;
 }
 
 /* Offline state stays solid red */
 .dot.fail {
-  background: #ff3333;
-  box-shadow: 0 0 10px #ff3333;
+  background: var(--bad);
+  box-shadow: 0 0 8px rgba(255, 90, 90, 0.5);
 }
 
 
 /* Dropdown (session selector) styling */
 select {
-  background-color: var(--bg-dark);
+  background-color: var(--bg-line);
   color: var(--text-main);
-  border: 1px solid #b84a12;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  padding: 4px 6px;
+  padding: 5px 8px;
   font-size: 14px;
 }
 
 select option {
-  background-color: var(--bg-dark);
+  background-color: var(--bg-elev);
   color: var(--text-main);
 }
 
@@ -200,8 +261,8 @@ select option {
 select:focus,
 select:hover {
   outline: none;
-  border-color: #ff8a00;
-  background-color: var(--bg-panel);
+  border-color: var(--accent);
+  background-color: var(--bg-line);
 }
 
 /* Settings Modal */
@@ -235,10 +296,10 @@ select:hover {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background: linear-gradient(180deg, rgba(255,122,0,0.1) 0%, rgba(10,10,10,0.95) 100%);
-  border: 2px solid var(--accent);
-  border-radius: 12px;
-  box-shadow: var(--accent-glow);
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
   min-width: 400px;
   max-width: 600px;
   max-height: 80vh;
@@ -251,8 +312,8 @@ select:hover {
   justify-content: space-between;
   align-items: center;
   padding: 16px 20px;
-  border-bottom: 1px solid var(--accent);
-  background: rgba(255,122,0,0.1);
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-line);
 }
 
 .modal-header h3 {
@@ -277,8 +338,8 @@ select:hover {
 }
 
 .close-btn:hover {
-  background: rgba(255,122,0,0.2);
-  box-shadow: 0 0 8px var(--accent);
+  background: var(--accent-soft);
+  color: var(--accent);
 }
 
 .modal-body {
@@ -307,17 +368,16 @@ select:hover {
   display: flex;
   flex-direction: column;
   padding: 12px;
-  border: 1px solid rgba(255,122,0,0.3);
-  border-radius: 6px;
-  background: rgba(255,122,0,0.05);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-line);
   cursor: pointer;
-  transition: all 0.2s;
+  transition: border-color 0.15s, background-color 0.15s;
 }
 
 .radio-label:hover {
-  border-color: var(--accent);
-  background: rgba(255,122,0,0.1);
-  box-shadow: 0 0 8px rgba(255,122,0,0.3);
+  border-color: var(--border-bright);
+  background: var(--accent-soft);
 }
 
 .radio-label input[type="radio"] {
@@ -358,19 +418,20 @@ select:hover {
   justify-content: flex-end;
   gap: 10px;
   padding: 16px 20px;
-  border-top: 1px solid var(--accent);
-  background: rgba(255,122,0,0.05);
+  border-top: 1px solid var(--border);
+  background: var(--bg-line);
 }
 
 .primary-btn {
   background: var(--accent);
-  color: #000;
-  font-weight: bold;
+  color: #0a0a0a;
+  font-weight: 600;
+  border-color: var(--accent);
 }
 
 .primary-btn:hover {
-  background: #ff8a00;
-  box-shadow: var(--accent-glow);
+  background: var(--gold);
+  border-color: var(--gold);
 }
 
 /* Session List */
@@ -387,15 +448,15 @@ select:hover {
   justify-content: space-between;
   align-items: center;
   padding: 12px;
-  border: 1px solid rgba(255,122,0,0.3);
-  border-radius: 6px;
-  background: rgba(255,122,0,0.05);
-  transition: all 0.2s;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-line);
+  transition: border-color 0.15s, background-color 0.15s;
 }
 
 .session-item:hover {
-  border-color: var(--accent);
-  background: rgba(255,122,0,0.1);
+  border-color: var(--border-bright);
+  background: var(--accent-soft);
 }
 
 .session-info {
@@ -435,8 +496,8 @@ select:hover {
 
 /* Thinking Stream Panel */
 .thinking-panel {
-  border-top: 1px solid var(--accent);
-  background: rgba(255, 122, 0, 0.02);
+  border-top: 1px solid var(--border);
+  background: var(--bg-dark);
   display: flex;
   flex-direction: column;
   transition: max-height 0.3s ease;
@@ -452,16 +513,16 @@ select:hover {
   justify-content: space-between;
   align-items: center;
   padding: 10px 12px;
-  background: rgba(255, 122, 0, 0.08);
+  background: var(--bg-elev);
   cursor: pointer;
   user-select: none;
-  border-bottom: 1px solid rgba(255, 122, 0, 0.2);
+  border-bottom: 1px solid var(--border);
   font-size: 0.9rem;
   font-weight: 500;
 }
 
 .thinking-header:hover {
-  background: rgba(255, 122, 0, 0.12);
+  background: var(--accent-soft);
 }
 
 .thinking-controls {
@@ -489,19 +550,19 @@ select:hover {
 
 .thinking-clear-btn,
 .thinking-toggle-btn {
-  background: transparent;
-  border: 1px solid rgba(255, 122, 0, 0.5);
+  background: var(--bg-line);
+  border: 1px solid var(--border);
   color: var(--text-main);
   padding: 4px 8px;
-  border-radius: 4px;
+  border-radius: 6px;
   cursor: pointer;
   font-size: 0.85rem;
 }
 
 .thinking-clear-btn:hover,
 .thinking-toggle-btn:hover {
-  background: rgba(255, 122, 0, 0.2);
-  box-shadow: 0 0 6px rgba(255, 122, 0, 0.3);
+  background: var(--accent-soft);
+  border-color: var(--border-bright);
 }
 
 .thinking-toggle-btn {
@@ -613,6 +674,12 @@ select:hover {
 
 /* ========== MOBILE RESPONSIVE STYLES ========== */
 
+/* Wordmark + status dot — shown only in the mobile header (media query below) */
+.brand, .brand-dot { display: none; }
+
+/* Bottom tab bar — mobile only (shown in the media query) */
+#tabbar { display: none; }
+
 /* Hamburger Menu */
 .hamburger-menu {
   display: none;
@@ -620,9 +687,9 @@ select:hover {
   gap: 4px;
   cursor: pointer;
   padding: 8px;
-  border: 1px solid var(--accent);
-  border-radius: 4px;
-  background: transparent;
+  border: 1px solid var(--border-bright);
+  border-radius: 8px;
+  background: var(--bg-line);
   z-index: 100;
 }
 
@@ -654,13 +721,17 @@ select:hover {
   left: -100%;
   width: 280px;
   height: 100vh;
-  background: var(--bg-dark);
-  border-right: 2px solid var(--accent);
-  box-shadow: var(--accent-glow);
+  height: 100dvh;
+  background: var(--bg-elev);
+  border-right: 1px solid var(--border);
+  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5);
   z-index: 999;
   transition: left 0.3s ease;
   overflow-y: auto;
+  overscroll-behavior: contain;
   padding: 20px;
+  padding-top: calc(20px + env(safe-area-inset-top));
+  padding-bottom: calc(20px + env(safe-area-inset-bottom));
   flex-direction: column;
   gap: 16px;
 }
@@ -689,7 +760,7 @@ select:hover {
   flex-direction: column;
   gap: 8px;
   padding-bottom: 16px;
-  border-bottom: 1px solid rgba(255, 122, 0, 0.3);
+  border-bottom: 1px solid var(--border);
 }
 
 .mobile-menu-section:last-child {
@@ -716,15 +787,25 @@ select:hover {
 @media screen and (max-width: 768px) {
   body {
     padding: 0;
+    background: var(--bg-elev);  /* matches the tab bar so any strip below #chat is seamless */
   }
 
   #chat {
+    position: fixed;
+    top: 0; left: 0; right: 0;
     width: 100%;
-    max-width: 100%;
-    height: 100vh;
+    height: 100dvh;     /* the *visible* viewport (excludes the home-indicator zone);
+                           overrides the base 95vh. Body bg matches the bar below it. */
+    background: var(--bg-dark);
     border-radius: 0;
-    border-left: none;
-    border-right: none;
+    border: none;
+  }
+  /* Only while the keyboard is open do we follow the *visible* viewport: release
+     the bottom anchor and size from the top by the measured visible height. */
+  body.kb #chat {
+    bottom: auto;
+    height: var(--app-height, 100dvh);
+    transform: translateY(var(--app-offset, 0px));
   }
 
   /* Show hamburger, hide desktop header controls */
@@ -734,17 +815,38 @@ select:hover {
 
   #model-select {
     padding: 12px;
-    justify-content: space-between;
+    padding-top: calc(12px + env(safe-area-inset-top));
+    padding-left: calc(14px + env(safe-area-inset-left));
+    padding-right: calc(14px + env(safe-area-inset-right));
+    justify-content: flex-start;
+    gap: 12px;
   }
 
-  /* Hide all controls except hamburger on mobile */
-  #model-select > *:not(.hamburger-menu) {
+  /* Mobile header is [≡]  Lyra  …  [●] — hide everything else. */
+  #model-select > *:not(.hamburger-menu):not(.brand):not(.brand-dot) {
     display: none;
   }
+  .brand {
+    display: block;
+    font-family: var(--font-console);
+    font-weight: 600;
+    font-size: 1.1rem;
+    color: var(--accent);
+    letter-spacing: 0.5px;
+  }
+  .brand-dot {
+    display: block;
+    width: 9px; height: 9px;
+    border-radius: 50%;
+    background: var(--text-fade);
+    margin-left: auto;
+    transition: background-color .2s;
+  }
+  .brand-dot.ok { background: var(--good); box-shadow: 0 0 8px rgba(143, 214, 148, .55); }
+  .brand-dot.fail { background: var(--bad); }
 
-  #session-select {
-    display: none;
-  }
+  #session-select { display: none; }
+  #status { display: none; }   /* relay status now lives as the header dot */
 
   /* Show mobile menu */
   .mobile-menu {
@@ -763,11 +865,51 @@ select:hover {
     font-size: 0.85rem;
   }
 
-  /* Input area - bigger touch targets */
+  /* Input area - bigger touch targets. The tab bar owns the bottom safe-area
+     inset now (the input is no longer the bottom-most element). */
   #input {
     padding: 12px;
+    padding-left: calc(12px + env(safe-area-inset-left));
+    padding-right: calc(12px + env(safe-area-inset-right));
   }
 
+  /* Bottom tab bar */
+  #tabbar {
+    display: flex;
+    flex: none;          /* never let it be compressed/clipped by the flex column */
+    border-top: 1px solid var(--border);
+    background: var(--bg-elev);
+    padding-bottom: 6px;  /* 100dvh already excludes the home-indicator zone */
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+  }
+  #tabbar .tab {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    padding: 7px 0 5px;
+    background: none;
+    border: none;
+    border-radius: 0;
+    color: var(--text-fade);
+    font-family: var(--font-console);
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  #tabbar .tab:hover { background: none; }
+  #tabbar .tab:active { background: var(--accent-soft); }
+  #tabbar .tab .ti { font-size: 1.3rem; line-height: 1; filter: grayscale(.45); }
+  #tabbar .tab .tl { font-size: .64rem; letter-spacing: .3px; }
+  #tabbar .tab.active { color: var(--accent); }
+  #tabbar .tab.active .ti { filter: none; }
+  body.kb #tabbar { display: none; }   /* keyboard open ⇒ hide so input pins to keyboard */
+
+  /* The "More" tab is the menu trigger now — retire the hamburger. */
+  .hamburger-menu { display: none !important; }
+
   #userInput {
     font-size: 16px; /* Prevents zoom on iOS */
     padding: 12px;
@@ -995,6 +1137,16 @@ select:hover {
 }
 .msg.assistant pre code { background: none; padding: 0; font-size: 0.85em; }
 
+/* Streaming: a blinking caret while tokens arrive (and a min-size while empty). */
+.msg.assistant.streaming { min-width: 1.4em; min-height: 1.1em; }
+.msg.assistant.streaming::after {
+  content: "▋";
+  margin-left: 1px;
+  color: var(--accent);
+  animation: caretBlink 1s steps(1) infinite;
+}
+@keyframes caretBlink { 0%, 50% { opacity: 0.85; } 50.01%, 100% { opacity: 0; } }
+
 /* Behind-the-scenes 👍/👎 feedback (fine-tune signal) — subtle until hovered. */
 .rate-bar { display: flex; gap: 6px; margin-top: 7px; opacity: 0.3; transition: opacity .15s; }
 .msg.assistant:hover .rate-bar { opacity: 0.85; }
@@ -1003,5 +1155,15 @@ select:hover {
   padding: 2px 5px; border-radius: 5px; line-height: 1; filter: grayscale(0.6);
   -webkit-tap-highlight-color: transparent;
 }
-.rate-btn:hover { filter: none; background: rgba(255,122,0,0.12); }
-.rate-btn.rated { filter: none; background: rgba(255,122,0,0.25); opacity: 1; }
+.rate-btn:hover { filter: none; background: var(--accent-soft); }
+.rate-btn.rated { filter: none; background: rgba(255,122,0,0.22); opacity: 1; }
+
+/* Quality floor: honor reduced-motion preference. */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

uv.lock

@@ -278,7 +278,7 @@ wheels = [
 
 [[package]]
 name = "lyra"
-version = "0.1.0"
+version = "0.2.0"
 source = { editable = "." }
 dependencies = [
     { name = "fastapi" },