Switch to gradio.Server + custom HTML terminal UI

- app.py: gradio.Server app exposing /chat (SSE via @app .api, generator
yielding per-line deltas) and / serving the static HTML page
- index.html: hand-rolled terminal-style UI (mac dots, JetBrains Mono, ANSI
rendering) talking to /chat through the Gradio JS client; preserves
reasoning_details across turns so Laguna continues reasoning next call
- requirements.txt: pin gradio 6.20.0, add openai

Co-Authored-By: Claude <noreply@anthropic.com>

app.py

@@ -1,13 +1,28 @@
+"""
+Laguna S 2.1 — reasoning terminal.
+
+A gradio.Server app: the FastAPI layer exposes one streaming endpoint at
+/chat (SSE through Gradio's queue) and serves a hand-rolled HTML/CSS/JS
+terminal from "/". The frontend uses Gradio's JS client to call /chat, so
+it picks up queuing, SSE streaming, and concurrency control for free.
+
+Reasoning is preserved across turns: the frontend re-sends prior assistant
+turns with their `reasoning_details`, so Laguna S 2.1 continues reasoning
+from where it left off on the previous call.
+"""
+
+import json
 import os
 import time
+from typing import Iterator
 
 from openai import OpenAI
 
-import gradio as gr
+from gradio import Server
+from fastapi.responses import HTMLResponse
 
 # ---------------------------------------------------------------------------
-# Client setup. The OpenRouter API key is read from the environment; on HF
-# Spaces it is exposed as a secret named OPENROUTER_API_KEY.
+# Backend: OpenAI-compatible client pointed at OpenRouter.
 # ---------------------------------------------------------------------------
 API_KEY = os.environ.get("OPENROUTER_API_KEY") or os.environ.get("API_KEY") or ""
 MODEL = os.environ.get("MODEL", "poolside/laguna-s-2.1:free")
@@ -17,21 +32,9 @@ client = OpenAI(
     api_key=API_KEY or "missing-key",
 )
 
-
-def chat_with_reasoning(messages, reasoning_enabled=True):
-    """One reasoning-aware call. reasoning_details is kept on the assistant
-    message so the model can continue reasoning on the next turn."""
-    response = client.chat.completions.create(
-        model=MODEL,
-        messages=messages,
-        extra_body={"reasoning": {"enabled": reasoning_enabled}},
-    )
-    return response.choices[0].message
-
-
 # ---------------------------------------------------------------------------
-# ANSI styling for the terminal look. The Chatbot renders content verbatim
-# (render_markdown=False), so we emit raw escape codes and style the container.
+# ANSI palette for the terminal look. The frontend keeps this table so it
+# can render lines verbatim (no markdown parsing).
 # ---------------------------------------------------------------------------
 RESET = "\033[0m"
 BOLD = "\033[1m"
@@ -40,33 +43,33 @@ ITALIC = "\033[3m"
 GREEN = "\033[32m"
 CYAN = "\033[36m"
 YELLOW = "\033[33m"
+MAGENTA = "\033[35m"
 RED = "\033[31m"
 GREY = "\033[90m"
 BOLD_GREEN = BOLD + GREEN
+BOLD_CYAN = BOLD + CYAN
 
 
 def _extract_reasoning(reasoning_details) -> str:
-    """Pull readable text out of reasoning_details, tolerating shapes returned
-    by OpenRouter (list of part dicts / nested summaries)."""
+    """Read text out of OpenRouter reasoning_details (list/dict/str, nested)."""
     if not reasoning_details:
         return ""
-
-    chunks = []
+    chunks: list[str] = []
 
     def push(val):
         if isinstance(val, str):
             chunks.append(val)
         elif isinstance(val, list):
-            for item in val:
-                push(item)
+            for v in val:
+                push(v)
         elif isinstance(val, dict):
-            for key in ("summary", "text", "content", "reasoning"):
-                if key in val:
-                    push(val[key])
+            for k in ("summary", "text", "content", "reasoning"):
+                if k in val:
+                    push(val[k])
 
     if isinstance(reasoning_details, list):
-        for part in reasoning_details:
-            push(part)
+        for p in reasoning_details:
+            push(p)
     elif isinstance(reasoning_details, dict):
         push(reasoning_details)
     elif isinstance(reasoning_details, str):
@@ -79,229 +82,121 @@ def _one_line(text: str) -> str:
     return (text or "").replace("\n", " ").strip()
 
 
+def _emit(payload: dict) -> dict:
+    """Strip non-JSON-safe bits before yielding (we only stream ASCII)."""
+    return {"event": payload.get("event", "delta"), "text": payload.get("text", "")}
+
+
 # ---------------------------------------------------------------------------
-# Conversation state.
-#
-# `state` holds the OpenAI messages list, where each assistant turn keeps its
-# raw `reasoning_details`. Passing those back unmodified is what lets Laguna
-# continue reasoning from where it left off on the next turn.
-#
-# `display` is the messages-format list shown in the Chatbot (ANSI-styled).
+# /chat endpoint. With gradio.Server, a generator-typed function streams via
+# SSE. We yield small text events (think: print-style lines the terminal
+# renders as they arrive) and finish with a `done` event carrying the new
+# assistant message — the frontend appends that to its in-memory history
+# along with the original `reasoning_details`.
 # ---------------------------------------------------------------------------
-def _user_line(msg: str) -> str:
-    return f"{GREY}$ {RESET}{GREEN}user{RESET} {DIM}»{RESET} {_one_line(msg)}"
+app = Server()
 
 
-def _start_assistant(reasoning_enabled: bool) -> str:
-    hint = "thinking…" if reasoning_enabled else "responding…"
-    return (
-        f"{CYAN}laguna{RESET}{GREY}@{RESET}{YELLOW}openrouter{RESET}"
-        f"{GREY}:{RESET}{DIM}~{RESET} {GREY}{hint}{RESET}\n"
-    )
-
+@app.api()
+def chat(payload: dict) -> Iterator[dict]:
+    messages = payload.get("messages") or []
+    reasoning = bool(payload.get("reasoning", True))
 
-def respond(user_message, state, reasoning_enabled):
-    """Stream a single turn. Yields (display_history, new_state) tuples."""
-    state = list(state or [])
+    last_user = next(
+        (m for m in reversed(messages) if m.get("role") == "user"), None
+    )
+    user_text = (last_user or {}).get("content", "")
 
-    # Append the user turn to the OpenAI conversation.
-    state.append({"role": "user", "content": user_message})
+    yield _emit({
+        "event": "delta",
+        "text": f"{GREY}$ {RESET}{GREEN}user{RESET} {DIM}»{RESET} {_one_line(user_text)}\n",
+    })
 
-    display = []
-    display.append({"role": "user", "content": _user_line(user_message)})
-    assistant_text = _start_assistant(reasoning_enabled)
-    display.append({"role": "assistant", "content": assistant_text})
-    yield display, state
+    yield _emit({
+        "event": "delta",
+        "text": (
+            f"{CYAN}laguna{RESET}{GREY}@{RESET}{YELLOW}openrouter{RESET}"
+            f"{GREY}:{RESET}{DIM}~{RESET} {GREY}{'thinking…' if reasoning else 'responding…'}{RESET}\n"
+        ),
+    })
 
     try:
-        message = chat_with_reasoning(state, reasoning_enabled)
-
-        # Cache the assistant turn (with reasoning_details) so the next turn can
-        # continue reasoning from here.
-        assistant_turn = {"role": "assistant", "content": message.content or ""}
-        rd = getattr(message, "reasoning_details", None)
-        if rd:
-            assistant_turn["reasoning_details"] = rd
-
-        out = _start_assistant(reasoning_enabled)
-
-        reasoning = _extract_reasoning(rd)
-        if reasoning:
-            out += f"{DIM}{ITALIC}┌─ reasoning ───────────────────────{RESET}\n"
-            display[-1]["content"] = out
-            yield display, state
-            for line in reasoning.splitlines() or [""]:
-                prefix = f"{DIM}{ITALIC}│ {RESET}" if line else f"{DIM}│{RESET} "
-                out += prefix + line + "\n"
-                display[-1]["content"] = out
-                yield display, state
-                time.sleep(0.012)
-            out += f"{DIM}{ITALIC}└───────────────────────────────────{RESET}\n"
-
-        answer = (message.content or "").strip()
-        out += f"{BOLD_GREEN}┌─ laguna ──────────────────────────{RESET}\n"
-        display[-1]["content"] = out
-        yield display, state
-        for line in answer.splitlines() or [""]:
-            prefix = f"{BOLD_GREEN}│ {RESET}" if line else f"{GREEN}│{RESET} "
-            out += prefix + line + "\n"
-            display[-1]["content"] = out
-            yield display, state
-            time.sleep(0.012)
-        out += f"{BOLD_GREEN}└───────────────────────────────────{RESET}\n"
-        out += f"{GREY}── done ──{RESET}\n"
-        display[-1]["content"] = out
+        response = client.chat.completions.create(
+            model=MODEL,
+            messages=messages,
+            extra_body={"reasoning": {"enabled": reasoning}},
+        )
+        message = response.choices[0].message
     except Exception as e:
-        display[-1]["content"] += f"\n{BOLD}{RED}error{RESET} {DIM}»{RESET} {e}\n"
-    finally:
-        # Persist the assistant turn into the OpenAI conversation state so
-        # reasoning_details survive to the next call.
-        state.append(assistant_turn)
-        yield display, state
-
-
-def reset_state():
-    return [], []
+        yield _emit({
+            "event": "delta",
+            "text": f"\n{BOLD}{RED}error{RESET} {DIM}»{RESET} {e}\n",
+        })
+        yield {"event": "done", "text": "", "assistant": None}
+        return
+
+    reasoning_text = _extract_reasoning(getattr(message, "reasoning_details", None))
+
+    if reasoning_text:
+        yield _emit({
+            "event": "delta",
+            "text": f"{DIM}{ITALIC}┌─ reasoning ───────────────────────{RESET}\n",
+        })
+        for line in reasoning_text.splitlines() or [""]:
+            prefix = f"{DIM}{ITALIC}│ {RESET}" if line else f"{DIM}│{RESET} "
+            yield _emit({"event": "delta", "text": prefix + line + "\n"})
+            time.sleep(0.012)
+        yield _emit({
+            "event": "delta",
+            "text": f"{DIM}{ITALIC}└───────────────────────────────────{RESET}\n",
+        })
+
+    answer = (message.content or "").strip()
+    yield _emit({
+        "event": "delta",
+        "text": f"{BOLD_GREEN}┌─ laguna ───────────��──────────────{RESET}\n",
+    })
+    for line in answer.splitlines() or [""]:
+        prefix = f"{BOLD_GREEN}│ {RESET}" if line else f"{GREEN}│{RESET} "
+        yield _emit({"event": "delta", "text": prefix + line + "\n"})
+        time.sleep(0.012)
+    yield _emit({
+        "event": "delta",
+        "text": f"{BOLD_GREEN}└───────────────────────────────────{RESET}\n",
+    })
+    yield _emit({"event": "delta", "text": f"{GREY}── done ──{RESET}\n"})
+
+    # The new assistant message — keep reasoning_details so the JS client
+    # can re-send it on the next turn, letting Laguna continue its reasoning.
+    rd = getattr(message, "reasoning_details", None)
+    rd_json = json.loads(json.dumps(rd, default=str)) if rd else None
+
+    yield {
+        "event": "done",
+        "text": "",
+        "assistant": {
+            "role": "assistant",
+            "content": message.content or "",
+            "reasoning_details": rd_json,
+        },
+    }
 
 
 # ---------------------------------------------------------------------------
-# Terminal UI.
+# "/" serves the hand-rolled HTML terminal. It uses Gradio's JS client
+# from a CDN, connects to the same origin, and calls /chat with SSE.
 # ---------------------------------------------------------------------------
-CSS = """
-#term-root { max-width: 940px; margin: 0 auto; }
-.term-header {
-  background: linear-gradient(180deg, #1e1e2e 0%, #181825 100%);
-  border: 1px solid #313244; border-radius: 10px 10px 0 0;
-  padding: 10px 14px; display: flex; align-items: center; gap: 8px;
-  font-family: 'JetBrains Mono','SF Mono','Fira Code','Menlo',monospace;
-}
-.term-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
-.dot-r { background: #f38ba8; } .dot-y { background: #f9e2af; } .dot-g { background: #a6e3a1; }
-.term-title { margin-left: 8px; color: #cdd6f4; font-size: 13px; }
-.term-title b { color: #89b4fa; }
-/* Chatbot becomes the terminal body */
-#term-body { background: #11111b !important; border: 1px solid #313244 !important;
-  border-top: none !important; border-radius: 0 0 10px 10px !important; }
-#term-body .msg { padding: 8px 16px !important; }
-#term-body .message-row, #term-body .message-wrap,
-#term-body .message { padding: 0 !important; background: transparent !important;
-  border: none !important; box-shadow: none !important; }
-#term-body .avatar-image, #term-body .avatar { display: none !important; }
-#term-body .md, #term-body .message-body p {
-  font-family: 'JetBrains Mono','SF Mono','Fira Code','Menlo',monospace !important;
-  font-size: 13px !important; line-height: 1.5 !important; color: #cdd6f4 !important;
-  white-space: pre-wrap !important; margin: 0 !important;
-}
-#term-body .user-message .md, #term-body .user .md { color: #a6e3a1 !important; }
-#term-body .bot-message .md, #term-body .bot .md { color: #cdd6f4 !important; }
-#term-body .empty { color: #585b70 !important; font-family: monospace !important; }
-#term-body ::-webkit-scrollbar { width: 8px; }
-#term-body ::-webkit-scrollbar-thumb { background: #313244; border-radius: 4px; }
-#prompt-row { max-width: 940px; margin: 12px auto 0 auto; }
-#prompt-row .wrap { gap: 0 !important; }
-#term-foot { max-width: 940px; margin: 8px auto 28px auto; color: #7f849c;
-  font-family: monospace; font-size: 11px; }
-#term-foot b { color: #89b4fa; }
-footer { display: none !important; }
-"""
+@app.get("/", response_class=HTMLResponse)
+async def homepage():
+    html_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "index.html")
+    with open(html_path, "r", encoding="utf-8") as f:
+        return f.read()
 
-JS = """
-() => {
-  const body = document.querySelector('#term-body .scroll-container') ||
-               document.querySelector('#term-body');
-  if (body) {
-    const scroll = () => { body.scrollTop = body.scrollHeight; };
-    new MutationObserver(scroll).observe(body, { childList: true, subtree: true });
-    scroll();
-  }
-}
-"""
 
-HEADER_HTML = """
-<div class="term-header">
-  <span class="term-dot dot-r"></span>
-  <span class="term-dot dot-y"></span>
-  <span class="term-dot dot-g"></span>
-  <span class="term-title">laguna-s-2.1 — <b>reasoning terminal</b></span>
-</div>
-"""
-
-PLACEHOLDER = (
-    "laguna-s-2.1 ready.\n"
-    "Type a question; the model reasons before it answers.\n"
-)
-
-with gr.Blocks(
-    css=CSS,
-    theme=gr.themes.Default(
-        primary_hue="blue",
-        neutral_hue="slate",
-        font=[gr.themes.GoogleFont("JetBrains Mono"), "monospace"],
-    ),
-    title="Laguna S 2.1 — Reasoning Terminal",
-) as demo:
-    gr.HTML(HEADER_HTML)
-
-    convo_state = gr.State(value=[])
-
-    with gr.Column(elem_id="term-root"):
-        chatbot = gr.Chatbot(
-            label=None,
-            type="messages",
-            height=580,
-            elem_id="term-body",
-            show_label=False,
-            avatar_images=(None, None),
-            render_markdown=False,
-            placeholder=PLACEHOLDER,
-        )
-        with gr.Row(elem_id="prompt-row"):
-            txt = gr.Textbox(
-                placeholder="ask laguna anything…  (e.g. How many r's in 'strawberry'?)",
-                show_label=False,
-                scale=8,
-                container=False,
-                autofocus=True,
-                lines=1,
-                max_lines=3,
-            )
-            reasoning_toggle = gr.Checkbox(
-                label="reasoning", value=True, scale=1, container=False
-            )
-            send_btn = gr.Button("⏎ send", variant="primary", scale=1)
-            clear_btn = gr.Button("clear", scale=1)
-
-    gr.HTML(
-        "<div id='term-foot'>"
-        "model: <b>poolside/laguna-s-2.1:free</b> · via openrouter · "
-        "reasoning_details preserved across turns"
-        "</div>"
-    )
-
-    def _on_submit(user_message, state, reasoning_enabled):
-        # Drop empty submits.
-        if not (user_message or "").strip():
-            return None, state, gr.update()
-        return user_message, state, reasoning_enabled
-
-    send_event = txt.submit(
-        fn=respond,
-        inputs=[txt, convo_state, reasoning_toggle],
-        outputs=[chatbot, convo_state],
-    ).then(fn=lambda: gr.update(value=""), outputs=txt)
-
-    send_btn.click(
-        fn=respond,
-        inputs=[txt, convo_state, reasoning_toggle],
-        outputs=[chatbot, convo_state],
-    ).then(fn=lambda: gr.update(value=""), outputs=txt)
-
-    clear_btn.click(
-        fn=reset_state,
-        outputs=[chatbot, convo_state],
-    )
+@app.get("/healthz")
+async def healthz():
+    return {"ok": True, "model": MODEL}
 
-demo.load(fn=None, js=JS)
 
 if __name__ == "__main__":
-    demo.launch()
+    app.launch(show_error=True)

index.html

@@ -0,0 +1,300 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>laguna-s-2.1 — reasoning terminal</title>
+  <link rel="icon" href="https://huggingface.co/favicon.ico" />
+  <style>
+    :root {
+      --bg-0: #11111b;
+      --bg-1: #1e1e2e;
+      --bg-2: #181825;
+      --border: #313244;
+      --fg: #cdd6f4;
+      --muted: #7f849c;
+      --dim: #585b70;
+      --accent: #89b4fa;
+      --green: #a6e3a1;
+      --yellow: #f9e2af;
+      --rose: #f38ba8;
+    }
+    * { box-sizing: border-box; }
+    html, body { margin: 0; padding: 0; height: 100%; }
+    body {
+      background: radial-gradient(1200px 600px at 50% -100px, #1a1b27 0%, #0b0b14 70%);
+      color: var(--fg);
+      font-family: 'JetBrains Mono','Fira Code','SF Mono','Menlo',monospace;
+      display: flex; flex-direction: column; align-items: center;
+      padding: 24px 16px 40px;
+      min-height: 100%;
+    }
+    .frame { width: 100%; max-width: 940px; }
+    .header {
+      display: flex; align-items: center; gap: 10px;
+      background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
+      border: 1px solid var(--border);
+      border-radius: 10px 10px 0 0;
+      padding: 10px 14px;
+    }
+    .dots { display: inline-flex; gap: 7px; }
+    .dot { width: 12px; height: 12px; border-radius: 50%; }
+    .dot.r { background: var(--rose); }
+    .dot.y { background: var(--yellow); }
+    .dot.g { background: var(--green); }
+    .brand { display: flex; align-items: center; gap: 8px; margin-left: 10px; color: var(--fg); font-size: 13px; }
+    .brand .hf { width: 18px; height: 18px; }
+    .brand .name { color: var(--accent); font-weight: 700; }
+    .brand .sep { color: var(--dim); }
+    .brand .meta { color: var(--muted); font-size: 12px; margin-left: auto; }
+    .badge {
+      display: inline-flex; align-items: center; gap: 6px;
+      background: rgba(137,180,250,0.12); color: var(--accent);
+      padding: 3px 8px; border-radius: 999px; font-size: 11px;
+      border: 1px solid rgba(137,180,250,0.25);
+    }
+    .term {
+      background: var(--bg-0);
+      border: 1px solid var(--border);
+      border-top: none;
+      border-radius: 0 0 10px 10px;
+      padding: 14px 16px 8px;
+      height: 580px;
+      overflow: auto;
+      font-size: 13px;
+      line-height: 1.55;
+      white-space: pre-wrap;
+      word-break: break-word;
+      scrollbar-width: thin;
+      scrollbar-color: var(--border) transparent;
+    }
+    .term::-webkit-scrollbar { width: 8px; }
+    .term::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+    .promptbar {
+      display: flex; gap: 0; align-items: stretch;
+      margin-top: 14px;
+    }
+    .promptbar .seal {
+      background: var(--bg-1); border: 1px solid var(--border); border-right: none;
+      border-radius: 10px 0 0 10px; padding: 0 14px;
+      display: flex; align-items: center; color: var(--green);
+      font-weight: 700;
+    }
+    .promptbar input[type="text"] {
+      flex: 1; min-width: 0;
+      background: var(--bg-0); color: var(--fg);
+      border: 1px solid var(--border);
+      padding: 12px 14px; font: inherit; outline: none;
+    }
+    .promptbar input[type="text"]:focus { border-color: var(--accent); }
+    .promptbar .toggle {
+      display: flex; align-items: center; gap: 6px;
+      background: var(--bg-0); border: 1px solid var(--border); border-left: none;
+      padding: 0 12px; font-size: 12px; color: var(--muted);
+      cursor: pointer; user-select: none;
+    }
+    .promptbar .toggle input { accent-color: var(--accent); }
+    .promptbar button.send {
+      background: var(--accent); color: #11111b; border: 1px solid var(--accent);
+      border-left: none; border-radius: 0 10px 10px 0; padding: 0 18px;
+      font: inherit; font-weight: 700; cursor: pointer;
+    }
+    .promptbar button.send:disabled { opacity: 0.55; cursor: not-allowed; }
+    .promptbar button.clear {
+      background: transparent; color: var(--muted); border: 1px solid var(--border);
+      border-left: none; padding: 0 14px; font: inherit; cursor: pointer;
+    }
+    .promptbar button.clear:hover { color: var(--rose); }
+    .foot { color: var(--muted); font-size: 11px; margin-top: 10px; }
+    .foot a { color: var(--accent); text-decoration: none; }
+    .caret::after {
+      content: "▍"; color: var(--accent); animation: blink 1s steps(2) infinite;
+      margin-left: 2px;
+    }
+    @keyframes blink { 50% { opacity: 0; } }
+  </style>
+</head>
+<body>
+  <div class="frame">
+    <div class="header">
+      <span class="dots">
+        <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      </span>
+      <span class="brand">
+        <svg class="hf" viewBox="0 0 95 88" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
+          <path d="M47.41 0c-1.05 0-2.09.27-3.03.81L36.04 5.97a2.4 2.4 0 0 0-1.2 2.08v9.71c0 .86.45 1.65 1.2 2.08l8.34 4.79c.75.43 1.65.43 2.4 0l8.34-4.79a2.4 2.4 0 0 0 1.2-2.08V8.05a2.4 2.4 0 0 0-1.2-2.08L50.44.81A4.78 4.78 0 0 0 47.41 0Z"/>
+          <path d="M87.06 28.18 78.71 23.4a2.4 2.4 0 0 0-2.4 0l-8.34 4.79a2.4 2.4 0 0 0-1.2 2.08v9.61c0 .86.45 1.65 1.2 2.08l8.34 4.79c.75.43 1.65.43 2.4 0l8.35-4.79a2.4 2.4 0 0 0 1.2-2.08v-9.61a2.4 2.4 0 0 0-1.2-2.08Z"/>
+          <path d="M7.76 28.18 16.11 23.4c.75-.43 1.65-.43 2.4 0l8.34 4.79a2.4 2.4 0 0 1 1.2 2.08v9.61c0 .86-.45 1.65-1.2 2.08l-8.34 4.79c-.75.43-1.65.43-2.4 0l-8.35-4.79a2.4 2.4 0 0 1-1.2-2.08v-9.61c0-.86.45-1.65 1.2-2.08Z"/>
+          <path d="M43.51 30.32c.7-.4 1.58-.4 2.27 0l21.85 12.65c.7.4 1.13 1.15 1.13 1.95v25.3c0 .8-.43 1.55-1.13 1.95l-21.85 12.65c-.7.4-1.58.4-2.27 0L21.66 72.17a2.27 2.27 0 0 1-1.13-1.95v-25.3c0-.8.43-1.55 1.13-1.95L43.51 30.32Z"/>
+        </svg>
+        <span class="name">huggingface</span><span class="sep">›</span><span>laguna-s-2.1</span>
+        <span class="meta"><span class="badge">● online · reasoning preserved across turns</span></span>
+      </span>
+    </div>
+
+    <div id="term" class="term" aria-live="polite"></div>
+
+    <div class="promptbar">
+      <div class="seal">$&nbsp;laguna&nbsp;&gt;</div>
+      <input id="input" type="text" autocomplete="off"
+             placeholder="ask anything…  e.g. How many r's are in 'strawberry'?" />
+      <label class="toggle"><input id="reasoning" type="checkbox" checked /> reasoning</label>
+      <button id="clear" class="clear" type="button">clear</button>
+      <button id="send" class="send" type="button">send ↵</button>
+    </div>
+
+    <div class="foot">
+      model: <span style="color:var(--accent)">poolside/laguna-s-2.1:free</span>
+      · via openrouter · lossless reasoning memory via <code>reasoning_details</code>
+      · hf spaces + gradio <code>Server</code>
+    </div>
+  </div>
+
+  <script type="module">
+    import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+
+    const term = document.getElementById("term");
+    const input = document.getElementById("input");
+    const sendBtn = document.getElementById("send");
+    const clearBtn = document.getElementById("clear");
+    const reasoning = document.getElementById("reasoning");
+
+    // messages the model sees — includes reasoning_details on prior assistant turns
+    let messages = [];
+
+    const ANSI = {
+      reset: "\x1b[0m", bold: "\x1b[1m", dim: "\x1b[2m", italic: "\x1b[3m",
+      green: "\x1b[32m", cyan: "\x1b[36m", yellow: "\x1b[33m",
+      grey: "\x1b[90m", red: "\x1b[31m",
+    };
+
+    const banner = [
+      `${ANSI.cyan}┌──────────────────────────────────────────────────────────────${ANSI.reset}`,
+      `${ANSI.cyan}│${ANSI.reset}  ${ANSI.bold}laguna-s-2.1 reasoning terminal${ANSI.reset} ${ANSI.dim}· hf spaces${ANSI.reset}`,
+      `${ANSI.cyan}│${ANSI.reset}  ${ANSI.dim}model:${ANSI.reset} ${ANSI.green}poolside/laguna-s-2.1:free${ANSI.reset}  ${ANSI.dim}·${ANSI.reset}  ${ANSI.green}reasoning preserved across turns${ANSI.reset}`,
+      `${ANSI.cyan}└──────────────────────────────────────────────────────────────${ANSI.reset}`,
+      "",
+      `${ANSI.dim}type a question and press ↵. toggle ${ANSI.reset}${ANSI.italic}reasoning${ANSI.reset}${ANSI.dim} on the right to control thinking.${ANSI.reset}`,
+      "",
+    ].join("\n");
+
+    function esc(s) { return String(s).replace(/[&<>]/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[c])); }
+    // Render ANSI escape codes as inline-styled spans.
+    function render(raw) {
+      // Tokenize over SGR codes.
+      const out = [];
+      const re = /\x1b\[(\d+)m/g;
+      let last = 0, m, codes = 0;
+      const state = (add) => {
+        codes |= add;
+        let bold = !!(codes & 1),
+            dim = !!(codes & 2), italic = !!(codes & 4),
+            green = !!(codes & 32), cyan = !!(codes & 64),
+            yellow = !!(codes & 128), grey = !!(codes & 256), red = !!(codes & 512);
+        const styles = [];
+        if (bold) styles.push("font-weight:700");
+        if (dim) styles.push("opacity:0.65");
+        if (italic) styles.push("font-style:italic");
+        if (green) styles.push("color:#a6e3a1");
+        else if (cyan) styles.push("color:#89dceb");
+        else if (yellow) styles.push("color:#f9e2af");
+        else if (grey) styles.push("color:#7f849c");
+        else if (red) styles.push("color:#f38ba8");
+        if (!styles.length) styles.push("color:#cdd6f4");
+        return styles.join(";");
+      };
+      while ((m = re.exec(raw)) !== null) {
+        const txt = raw.slice(last, m.index);
+        if (txt) out.push(`<span style="${state(0)}">${esc(txt).replace(/\n/g, "<br>")}</span>`);
+        const code = +m[1];
+        if (code === 0) codes = 0; else codes |= (1 << (code - 1));
+        last = m.index + m[0].length;
+      }
+      if (last < raw.length) {
+        out.push(`<span style="${state(0)}">${esc(raw.slice(last)).replace(/\n/g, "<br>")}</span>`);
+      }
+      return out.join("");
+    }
+
+    term.innerHTML = render(banner);
+    term.scrollTop = term.scrollHeight;
+
+    function appendText(text) {
+      const span = document.createElement("span");
+      // strip the existing trailing caret before re-rendering
+      const caret = term.querySelector(".caret");
+      if (caret) caret.remove();
+      term.insertAdjacentHTML("beforeend", render(text));
+      const c = document.createElement("span");
+      c.className = "caret";
+      c.innerHTML = "&nbsp;";
+      term.appendChild(c);
+      term.scrollTop = term.scrollHeight;
+    }
+
+    function freeze() {
+      const caret = term.querySelector(".caret");
+      if (caret) caret.remove();
+    }
+
+    let busy = false;
+
+    async function send() {
+      const text = input.value.trim();
+      if (!text || busy) return;
+      busy = true; sendBtn.disabled = true; clearBtn.disabled = true;
+      try {
+        messages.push({ role: "user", content: text });
+        input.value = "";
+
+        const client = await Client.connect(window.location.origin);
+        let streamedText = ""; // accumulating stream buffer we can re-render
+        let rendered = "";     // text already appended to terminal
+
+        // First paint: user line + "thinking…" prompt
+        const prefix =
+          `${ANSI.grey}$ ${ANSI.reset}${ANSI.green}user${ANSI.reset} ${ANSI.dim}»${ANSI.reset} ${text.replace(/\n/g, " ")}\n` +
+          `${ANSI.cyan}laguna${ANSI.reset}${ANSI.grey}@${ANSI.reset}${ANSI.yellow}openrouter${ANSI.reset}${ANSI.grey}:${ANSI.reset}${ANSI.dim}~${ANSI.reset} ${ANSI.grey}thinking…${ANSI.reset}\n`;
+        appendText(prefix);
+
+        const result = await client.predict("/chat", {
+          messages, reasoning: reasoning.checked,
+        });
+
+        const events = (result && result.data && result.data[0]) || [];
+        let assistantRecord = null;
+        for (const ev of events) {
+          if (!ev || typeof ev !== "object") continue;
+          if (ev.event === "delta" && typeof ev.text === "string") appendText(ev.text);
+          else if (ev.event === "done") assistantRecord = ev.assistant || null;
+        }
+        freeze();
+
+        // Persist the assistant turn (with reasoning_details) into local history
+        // so the next call resumes the same chain of thought.
+        if (assistantRecord && assistantRecord.content !== undefined) {
+          messages.push(assistantRecord);
+        } else {
+          // fallback: snapshot whatever we saw, no reasoning_details
+          messages.push({ role: "assistant", content: "" });
+        }
+      } catch (e) {
+        freeze();
+        appendText(`\n${ANSI.bold}${ANSI.red}error${ANSI.reset} ${ANSI.dim}»${ANSI.reset} ${e && e.message || e}\n`);
+      } finally {
+        busy = false; sendBtn.disabled = false; clearBtn.disabled = false;
+        input.focus();
+      }
+    }
+
+    sendBtn.addEventListener("click", send);
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); }
+    });
+    clearBtn.addEventListener("click", () => {
+      messages = [];
+      term.innerHTML = render(banner);
+    });
+  </script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,2 @@
+openai>=1.0
+gradio==6.20.0