gradio server

README.md

@@ -1,11 +1,11 @@
 ---
 title: Hy3
 emoji: ⚡
-colorFrom: yellow
-colorTo: purple
+colorFrom: blue
+colorTo: red
 sdk: gradio
-sdk_version: 6.12.0
-app_file: app.py
+sdk_version: 6.19.0
+app_file: server.py
 pinned: false
 short_description: Hy3 multi-turn streaming chat with function calling
 ---

config.py

@@ -1,9 +1,11 @@
-"""Runtime configuration loaded from environment variables.
+"""Runtime configuration for the upstream OpenAI-compatible endpoint.
+
+The model is served via the HuggingFace inference router. The only secret
+we need is ``HF_TOKEN`` (a HuggingFace access token); the base URL and model
+name are fixed.
 
 Required:
-    HY_API_KEY        API key for the upstream OpenAI-compatible endpoint.
-    HY_BASE_URL       OpenAI-compatible base URL of the upstream endpoint.
-    HY_MODEL          Model name passed to chat.completions.create.
+    HF_TOKEN          HuggingFace access token (read access to the model).
 
 Optional:
     HY_LOG_LEVEL      One of DEBUG / INFO / WARNING / ERROR (default: WARNING).
@@ -17,9 +19,7 @@ import os
 from openai import OpenAI
 
 
-API_KEY = os.environ.get("HY_API_KEY", "").strip()
-BASE_URL = os.environ.get("HY_BASE_URL", "").strip()
-MODEL = os.environ.get("HY_MODEL", "").strip()
+MODEL = "tencent/Hy3:deepinfra"
 LOG_LEVEL = os.environ.get("HY_LOG_LEVEL", "WARNING").upper()
 
 
@@ -37,34 +37,19 @@ if not logging.getLogger().handlers:
 logger = logging.getLogger("Hy3")
 
 
-# Surface missing required env vars loudly at import time. We don't
-# raise — that would prevent the Gradio server from even starting up
-# (and HuggingFace Spaces would just show a blank build-failed page),
-# making it harder to debug. Instead: warn now, and the per-request
-# code paths will still fail cleanly with the upstream API's own
-# error message.
-_missing = [
-    name
-    for name, val in (
-        ("HY_API_KEY", API_KEY),
-        ("HY_BASE_URL", BASE_URL),
-        ("HY_MODEL", MODEL),
-    )
-    if not val
-]
-if _missing:
+# Surface a missing HF_TOKEN loudly at import time. We don't raise — that
+# would prevent the Gradio server from even starting up (and HuggingFace
+# Spaces would just show a blank build-failed page), making it harder to
+# debug. Instead: warn now, and the per-request code paths will still fail
+# cleanly with the upstream API's own 401 error message.
+if not os.environ.get("HF_TOKEN", "").strip():
     logger.warning(
-        "Required env var(s) not set: %s. "
-        "The app will boot but every chat request will fail until they are "
-        "configured (e.g. as HuggingFace Space secrets / variables).",
-        ", ".join(_missing),
+        "HF_TOKEN is not set. The app will boot but every chat request will "
+        "fail until it is configured (e.g. as a HuggingFace Space secret)."
     )
 
 
-# ``base_url=""`` would be passed through to httpx and produce undefined
-# request URLs. ``None`` makes the OpenAI SDK fall back to its default
-# (api.openai.com), which is at least a well-defined behaviour.
 client = OpenAI(
-    api_key=API_KEY or "missing-api-key",
-    base_url=BASE_URL or None,
+    base_url="https://router.huggingface.co/v1",
+    api_key=os.environ["HF_TOKEN"],
 )

requirements.txt

@@ -1 +1,2 @@
+gradio>=6.19.0
 openai>=1.66.0

server.py

@@ -0,0 +1,473 @@
+"""Tencent-branded Hy3 chat demo, served from a :class:`gradio.Server`.
+
+Goal: ``only the UI and the transport change`` — the chat behaviour is
+identical to the previous ``gr.Blocks`` app (``app.py`` + ``chat.py``).
+We reuse the exact same incremental **delta-op** streaming protocol the
+old app shipped through its hidden ``#hy-chat-delta`` ``gr.HTML`` bridge:
+the same op types (``user``, ``assistant_begin``, ``reasoning_delta``,
+``content_delta``, ``assistant_end``, ``tool_call``, ``remove_bubble``,
+``reset``), the same ``seq`` de-dup, the same ``epoch`` staleness guard,
+the same ``preprocess_latex`` on content deltas, the same tool-call
+markdown from ``display.format_tool_calls_for_display``, and — critically
+— the same ``is_cancelled`` epoch mechanism so clicking "+" mid-stream
+abandons the upstream API call server-side instead of billing tokens for
+an answer nobody will see.
+
+The only real change vs. the Blocks app is the transport: instead of a
+``gr.HTML`` component whose value we mutate, we stream the same JSON
+delta payload through ``@app.api`` SSE frames, and the frontend consumes
+them with the same renderer (ported from ``static/chat.js``).
+
+Why not reuse ``chat.send_message`` directly? It yields the
+7-tuple-of-``gr.update`` shape the Blocks event handlers expect, plus
+``gr.Warning`` toasts — all Gradio-coupled. The *pure* turn logic it
+wraps (``_run_streaming_turn``, ``_delta``, the op assembly) is already
+Gradio-free, so we call that directly and serialise its op-lists to
+JSON ourselves.
+"""
+
+from __future__ import annotations
+
+import json
+import logging
+import threading
+from pathlib import Path
+from typing import Any, Iterator
+
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+
+from gradio import Server
+
+import chat as _chat  # for _delta / _next_bubble_id (pure helpers reused below)
+from chat import _run_streaming_turn
+from core.chat import (
+    ChatState,
+    finalize_response,
+    flush_tool_results,
+    init_state,
+    record_tool_result,
+    reset_state_in_place,
+)
+from display import format_tool_call_prompt
+from i18n import t
+
+logger = logging.getLogger(__name__)
+
+_STATIC_DIR = Path(__file__).parent / "static"
+_INDEX_HTML = _STATIC_DIR / "index.html"
+
+CHAT_CONCURRENCY = 64
+
+# ---------------------------------------------------------------------------
+# Per-session state (identical in spirit to the Blocks app's gr.State)
+# ---------------------------------------------------------------------------
+# Each browser tab holds a random session id (see static/index.html). We keep
+# an in-process ChatState per id so multi-turn + tool-calling work across the
+# stateless HTTP boundary. The lock guards the *non-streaming* bookkeeping
+# (record/flush tool results, new_chat reset); streaming itself does NOT hold
+# the lock (see /chat) so a new_chat can interrupt an in-flight stream.
+
+_SESSIONS: dict[str, dict] = {}
+_SESSIONS_LOCK = threading.Lock()
+
+
+def _get_session(session_id: str) -> dict:
+    with _SESSIONS_LOCK:
+        sess = _SESSIONS.get(session_id)
+        if sess is None:
+            sess = {"state": init_state(), "lock": threading.Lock()}
+            _SESSIONS[session_id] = sess
+        return sess
+
+
+def _resolve_state(session_id: Any) -> ChatState:
+    return _get_session(session_id or "")["state"]
+
+
+# Reuse chat.py's HTML-safe JSON delta encoder + bubble-id counter so the
+# wire format is byte-identical to the Blocks app's #hy-chat-delta payload.
+_delta = _chat._delta
+_next_bubble_id = _chat._next_bubble_id
+
+
+# ---------------------------------------------------------------------------
+# Server + routes
+# ---------------------------------------------------------------------------
+app = Server(title="Hy3 · Tencent")
+
+
+@app.get("/", response_class=HTMLResponse)
+async def homepage() -> HTMLResponse:
+    """Serve the custom Tencent-branded frontend."""
+    return HTMLResponse(_INDEX_HTML.read_text(encoding="utf-8"))
+
+
+# Static asset passthrough (logo, vendored libs the frontend pulls from the
+# same origin instead of a CDN, etc.).
+app.mount("/static", StaticFiles(directory=str(_STATIC_DIR)), name="hy-static")
+
+
+# ---------------------------------------------------------------------------
+# Validation — mirror chat._validate_user_message but return the error string
+# instead of emitting a gr.Warning toast.
+# ---------------------------------------------------------------------------
+def _validate_message(message: str, functions_json_str: str) -> str | None:
+    """Return None if valid, else a localized error string."""
+    if not message or not message.strip():
+        return t("warn.empty_msg")
+    if functions_json_str and functions_json_str.strip():
+        try:
+            json.loads(functions_json_str)
+        except json.JSONDecodeError as e:
+            return t("warn.invalid_fn_json", err=str(e))
+    return None
+
+
+# ---------------------------------------------------------------------------
+# A streaming turn = a sequence of JSON delta payloads (the SAME wire format
+# the old app pushed through #hy-chat-delta). Each yielded string is a single
+# {"seq","ops"[,"epoch"]} document the frontend applies with applyDelta.
+# ---------------------------------------------------------------------------
+
+def _frame(ops: list[dict], epoch: int) -> str:
+    """Encode a frame's ops as an epoch-tagged delta payload."""
+    return _delta(ops, epoch=epoch)
+
+
+def _stream_turn(
+    state: ChatState,
+    bubble_id: str,
+    epoch: int,
+    system_prompt: str,
+    think_level: str,
+    temperature: float | None,
+    max_tokens: int,
+    top_p: float,
+    preserved_thinking: bool | None,
+    functions_json_str: str,
+) -> Iterator[str]:
+    """Run one assistant turn, yielding delta payloads.
+
+    This is the pure core of the Blocks app's ``_run_streaming_turn`` +
+    ``send_message`` streaming section, translated to JSON frames. It:
+
+      * collapses the temperature/preserved_thinking "use default" tristate,
+      * runs ``preprocess_latex`` on every content delta (so bare
+        ``\\begin{equation}`` and negation macros render correctly),
+      * suppresses tool-call snapshots mid-stream and materialises them as a
+        ``tool_call`` op at end-of-turn (keeping wire payloads tiny),
+      * yields heartbeats (empty-ops frames) so the connection stays alive,
+      * bails the moment ``state["epoch"]`` diverges (new_chat clicked) so
+        the upstream API stream is abandoned server-side.
+    """
+    # The Blocks UI collapses (slider, "use default" checkbox) into a tristate
+    # BEFORE calling build_api_kwargs. The Server frontend sends the tristate
+    # directly (null = use default), so we only need to pass it through.
+    temperature_use_default = temperature is None
+    preserved_thinking_use_default = preserved_thinking is None
+
+    show_tool = False
+    tool_md = ""
+    for ops, this_show_tool, this_tool_md in _run_streaming_turn(
+        state, bubble_id, epoch,
+        system_prompt, think_level,
+        # _run_streaming_turn takes the raw slider value + use-default flag;
+        # reconstruct them from the tristate the frontend sent.
+        float(temperature) if temperature is not None else 0.9,
+        temperature_use_default,
+        max_tokens, top_p,
+        bool(preserved_thinking) if preserved_thinking is not None else False,
+        preserved_thinking_use_default,
+        functions_json_str,
+    ):
+        show_tool = show_tool or this_show_tool
+        if this_tool_md:
+            tool_md = this_tool_md
+        yield _frame(ops, epoch), this_show_tool, this_tool_md
+
+
+# ---------------------------------------------------------------------------
+# /chat — the streaming chat endpoint. Mirrors chat.send_message's flow.
+# ---------------------------------------------------------------------------
+@app.api(
+    name="chat",
+    concurrency_limit=CHAT_CONCURRENCY,
+    concurrency_id="chat",
+    stream_every=0.06,
+)
+def chat(
+    message: str,
+    session_id: str = "",
+    system_prompt: str = "",
+    think_level: str = "high",
+    temperature: float | None = None,
+    max_tokens: int = 0,
+    top_p: float = 0,
+    preserved_thinking: bool | None = None,
+    functions_json_str: str = "",
+) -> Iterator[tuple]:
+    """Stream a chat turn as delta-op frames.
+
+    Yields ``(delta_json, tool_area_state)`` where ``delta_json`` is the
+    JSON payload the frontend applies with ``applyDelta`` (same shape the
+    Blocks app pushed through #hy-chat-delta) and ``tool_area_state`` is
+    ``None`` normally, or a dict ``{"prompt": <md>, "pending": <n>}`` when
+    the model requested tool calls at end-of-turn.
+    """
+    state = _resolve_state(session_id)
+
+    # ── Validation (mirrors chat._validate_user_message) ──
+    err = _validate_message(message, functions_json_str)
+    if err is not None:
+        # Never started streaming: send a single idle marker frame + the
+        # error. The frontend surfaces the error as a toast and keeps the
+        # user's message in the input box.
+        yield _frame([], state["epoch"]), {"error": err}
+        return
+
+    message = message.strip()
+    state["messages"].append({"role": "user", "content": message})
+    bubble_id = _next_bubble_id()
+    epoch = state["epoch"]
+
+    def _cancelled() -> bool:
+        return state.get("epoch") != epoch
+
+    # First frame: append the user bubble + open an assistant bubble.
+    yield _frame([
+        {"type": "user", "text": message},
+        {"type": "assistant_begin", "id": bubble_id},
+    ], epoch), None
+
+    tool_area = None
+    try:
+        for frame, show_tool, tool_md in _stream_turn(
+            state, bubble_id, epoch, system_prompt, think_level,
+            temperature, max_tokens, top_p,
+            preserved_thinking, functions_json_str,
+        ):
+            if _cancelled():
+                return
+            yield frame, None
+            if show_tool:
+                tool_area = {"prompt": tool_md}
+
+    except Exception as e:
+        if _cancelled():
+            return
+        logger.exception("chat failed: %s", e)
+        # Drop the in-progress assistant bubble, restore the user's message
+        # to the input, surface a localized failure — exactly the Blocks
+        # app's error path (chat.py:364-381).
+        if state["messages"] and state["messages"][-1].get("role") == "user":
+            state["messages"].pop()
+        yield _frame(
+            [{"type": "remove_bubble", "id": bubble_id}], epoch,
+        ), {"error": t("warn.request_failed"), "restore_input": message}
+        return
+
+    if _cancelled():
+        return
+
+    # If the model requested tool calls, mirror the pending queue the Blocks
+    # app's finalize_response would have built so submit_tool_result works.
+    _sync_pending_tool_calls(state)
+    if tool_area and state.get("pending_tool_calls"):
+        pending = state["pending_tool_calls"]
+        tool_area = {
+            "prompt": format_tool_call_prompt(pending[0], 1, len(pending)),
+            "pending": len(pending),
+        }
+        yield _frame([], epoch), tool_area
+
+
+def _sync_pending_tool_calls(state: ChatState) -> None:
+    """Re-derive ``pending_tool_calls`` from the last assistant message.
+
+    ``_run_streaming_turn`` already called ``finalize_response`` (which
+    mutates ``state``), so we just read off what it set — identical to the
+    state the Blocks app would have after a tool-calling turn.
+    """
+    # finalize_response (core/chat.py) already populated pending_tool_calls
+    # when the model called tools; nothing to re-derive here, but keep the
+    # hook for symmetry with the earlier snapshot-based implementation.
+    if not state.get("pending_tool_calls"):
+        state["pending_assistant_msg"] = None
+
+
+# ---------------------------------------------------------------------------
+# /new_chat — reset. Critically this does NOT block on a running stream:
+# the stream's _cancelled() polls state["epoch"], so bumping it here makes
+# the in-flight /chat abandon the upstream API on its next yield.
+# ---------------------------------------------------------------------------
+@app.api(name="new_chat", concurrency_limit=CHAT_CONCURRENCY)
+def new_chat(session_id: str = "") -> dict:
+    sess = _get_session(session_id or "")
+    # Only the bookkeeping is locked; the streaming /chat never holds this
+    # lock, so a reset lands instantly even mid-stream.
+    with sess["lock"]:
+        new_epoch = reset_state_in_place(sess["state"])
+    return {"epoch": str(new_epoch), "ok": True}
+
+
+# ---------------------------------------------------------------------------
+# /submit_tool_result — mirrors chat.submit_tool_result.
+# ---------------------------------------------------------------------------
+@app.api(
+    name="submit_tool_result",
+    concurrency_limit=CHAT_CONCURRENCY,
+    concurrency_id="chat",
+    stream_every=0.06,
+)
+def submit_tool_result(
+    result_text: str,
+    session_id: str = "",
+    system_prompt: str = "",
+    think_level: str = "high",
+    temperature: float | None = None,
+    max_tokens: int = 0,
+    top_p: float = 0,
+    preserved_thinking: bool | None = None,
+    functions_json_str: str = "",
+) -> Iterator[tuple]:
+    sess = _get_session(session_id or "")
+    state = sess["state"]
+
+    with sess["lock"]:
+        pending = state.get("pending_tool_calls", [])
+        if not pending:
+            yield _frame([], state["epoch"]), None
+            return
+
+        record_tool_result(state, pending[0], result_text)
+        state["pending_tool_calls"] = pending[1:]
+
+        if state["pending_tool_calls"]:
+            # More results still pending — keep the tool area open for the
+            # next call. Emit a tool_area update, no streaming yet.
+            remaining = state["pending_tool_calls"]
+            submitted = state.get("submitted_tool_results", [])
+            total = len(remaining) + len(submitted)
+            current_idx = len(submitted) + 1
+            yield _frame([], state["epoch"]), {
+                "prompt": format_tool_call_prompt(remaining[0], current_idx, total),
+                "pending": len(remaining),
+            }
+            return
+
+        flush_tool_results(state)
+
+    # All results in — stream the follow-up turn (same protocol as /chat).
+    bubble_id = _next_bubble_id()
+    epoch = state["epoch"]
+
+    def _cancelled() -> bool:
+        return state.get("epoch") != epoch
+
+    yield _frame([{"type": "assistant_begin", "id": bubble_id}], epoch), None
+
+    tool_area = None
+    try:
+        for frame, show_tool, tool_md in _stream_turn(
+            state, bubble_id, epoch, system_prompt, think_level,
+            temperature, max_tokens, top_p,
+            preserved_thinking, functions_json_str,
+        ):
+            if _cancelled():
+                return
+            yield frame, None
+            if show_tool:
+                tool_area = {"prompt": tool_md}
+
+    except Exception as e:
+        if _cancelled():
+            return
+        logger.exception("submit_tool_result failed: %s", e)
+        yield _frame(
+            [{"type": "remove_bubble", "id": bubble_id}], epoch,
+        ), {"error": t("warn.request_failed")}
+        return
+
+    if _cancelled():
+        return
+
+    _sync_pending_tool_calls(state)
+    if tool_area and state.get("pending_tool_calls"):
+        pending = state["pending_tool_calls"]
+        yield _frame([], epoch), {
+            "prompt": format_tool_call_prompt(pending[0], 1, len(pending)),
+            "pending": len(pending),
+        }
+
+
+# ---------------------------------------------------------------------------
+# /config — example prompts + i18n. Loaded once on frontend boot.
+# ---------------------------------------------------------------------------
+@app.api(name="config", concurrency_limit=32)
+def config() -> dict:
+    """Return the showcase example prompts + i18n strings for the frontend."""
+    from app import EXAMPLES  # noqa: WPS433 — lazy so server import stays light
+    from i18n import LANG, TRANSLATIONS
+
+    i18n = {k: t(k) for k in TRANSLATIONS.get(LANG, TRANSLATIONS["en"])}
+    return {
+        "examples": list(EXAMPLES),
+        "i18n": i18n,
+        "lang": LANG,
+        # The tool-call display label + per-op helpers the renderer needs.
+        "tool_call_label": t("tool.call_label"),
+    }
+
+
+# ---------------------------------------------------------------------------
+# /validate_functions — i18n-aware validation + pretty-print.
+# ---------------------------------------------------------------------------
+@app.api(name="validate_functions", concurrency_limit=8)
+def validate_functions(functions_json_str: str) -> dict:
+    """Validate + pretty-print a tools-JSON string. i18n-aware."""
+    from tools import parse_functions_json
+
+    if not functions_json_str or not functions_json_str.strip():
+        return {"ok": False, "message": t("warn.fn.enter_json"), "formatted": ""}
+    try:
+        data = json.loads(functions_json_str)
+    except json.JSONDecodeError as e:
+        return {"ok": False, "message": t("warn.fn.invalid_format", err=str(e)), "formatted": ""}
+    if isinstance(data, dict):
+        data = [data]
+    if not isinstance(data, list):
+        return {"ok": False, "message": t("warn.fn.must_be_array"), "formatted": ""}
+    names: list[str] = []
+    for i, item in enumerate(data):
+        if not isinstance(item, dict):
+            return {"ok": False, "message": t("warn.fn.item_not_object", i=i + 1), "formatted": ""}
+        fn = _normalize(item)
+        if not fn:
+            return {"ok": False, "message": t("warn.fn.item_invalid", i=i + 1), "formatted": ""}
+        if fn["name"] in names:
+            return {"ok": False, "message": t("warn.fn.duplicate_name", name=fn["name"]), "formatted": ""}
+        names.append(fn["name"])
+    formatted = json.dumps(data, indent=2, ensure_ascii=False)
+    return {
+        "ok": True,
+        "message": t("info.fn.validation_passed", n=len(names), names=", ".join(names)),
+        "formatted": formatted,
+    }
+
+
+def _normalize(item: dict) -> dict | None:
+    """Accept either {type, function} or a bare {name, parameters} entry."""
+    if item.get("type") == "function" and "function" in item:
+        fn = item["function"]
+        if isinstance(fn, dict) and fn.get("name"):
+            return fn
+        return None
+    if item.get("name"):
+        return item
+    return None
+
+
+if __name__ == "__main__":
+    # HuggingFace Spaces invokes ``python server.py``.
+    app.launch(show_error=True)

static/index.html

@@ -0,0 +1,1344 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+<title>Hy3 · Tencent</title>
+<meta name="color-scheme" content="light dark" />
+<link rel="icon" href="https://huggingface.co/tencent/Hy3/resolve/main/assets/logo-en.png" />
+<link rel="apple-touch-icon" href="https://huggingface.co/tencent/Hy3/resolve/main/assets/logo-en.png" />
+
+<!-- Tencent logo -->
+<link rel="preload" as="image" href="https://huggingface.co/tencent/Hy3/resolve/main/assets/logo-en.png" />
+
+<!-- marked + KaTeX + highlight.js from CDN -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/github.min.css" id="hljs-light-css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/github-dark.min.css" id="hljs-dark-css" disabled />
+<script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js"></script>
+
+<style>
+/* ─────────────────────────────────────────────────────────────────────
+   Tencent design tokens
+   Tencent brand blue  : #0052D9 (primary)
+   Tencent red accent  : #E53935 (secondary / highlights)
+   Tencent teal        : #00A98F (success accents)
+   ───────────────────────────────────────────────────────────────────── */
+:root {
+  --tc-blue:        #0052D9;
+  --tc-blue-hover:   #003CAB;
+  --tc-blue-soft:   #E8F0FF;
+  --tc-blue-060:    rgba(0, 82, 217, 0.06);
+  --tc-blue-120:    rgba(0, 82, 217, 0.12);
+  --tc-red:         #E53935;
+  --tc-teal:        #00A98F;
+
+  --bg:             #f7f6f3;          /* warm canvas, Claude-like */
+  --bg-soft:        #ffffff;          /* surfaces / bubbles / sidebar */
+  --bg-muted:       #efece6;
+  --bg-elev:        #ffffff;
+  --sidebar-bg:     #ffffff;
+  --text:           #2b2b2b;
+  --text-strong:    #1a1a1a;
+  --text-muted:     #8a8580;
+  --border:         #e7e3dc;
+  --border-strong:  #d8d3cb;
+  --accent:         #c96442;          /* warm terracotta accent (Claude) */
+  --accent-soft:    #f4ece7;
+  --shadow-sm:      0 1px 2px rgba(20, 18, 14, 0.04);
+  --shadow-md:      0 4px 14px rgba(20, 18, 14, 0.06);
+  --shadow-lg:      0 16px 48px rgba(20, 18, 14, 0.14);
+  --ring:           0 0 0 3px rgba(0, 82, 217, 0.16);
+
+  --radius-sm:      8px;
+  --radius:         14px;
+  --radius-lg:      20px;
+  --radius-xl:      26px;
+
+  --col-max:        768px;            /* centered conversation width */
+
+  --font-sans:      "Söhne", "Inter", -apple-system, BlinkMacSystemFont,
+                    "SF Pro Text", "PingFang SC", "Hiragino Sans GB",
+                    "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-mono:      "SF Mono", "JetBrains Mono", "Fira Code", Consolas, Monaco, monospace;
+}
+
+html.dark {
+  --bg:             #1a1a1a;          /* warm-tinted dark canvas */
+  --bg-soft:        #232323;
+  --bg-muted:       #2c2c2c;
+  --bg-elev:        #232323;
+  --sidebar-bg:     #202020;
+  --text:           #ece9e4;
+  --text-strong:    #ffffff;
+  --text-muted:     #9a948d;
+  --border:         #34312d;
+  --border-strong:  #423e39;
+  --accent:         #d97757;
+  --accent-soft:    rgba(217, 119, 87, 0.16);
+  --tc-blue-soft:   rgba(0, 82, 217, 0.16);
+  --tc-blue-060:    rgba(0, 82, 217, 0.12);
+  --tc-blue-120:    rgba(0, 82, 217, 0.24);
+  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md:      0 4px 14px rgba(0, 0, 0, 0.4);
+  --shadow-lg:      0 16px 48px rgba(0, 0, 0, 0.6);
+  --ring:           0 0 0 3px rgba(0, 82, 217, 0.3);
+}
+
+* { box-sizing: border-box; }
+html, body {
+  margin: 0; padding: 0; height: 100%; overflow: hidden;
+  background: var(--bg); color: var(--text);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+}
+button, input, textarea, select { font-family: inherit; }
+
+/* ── Layout shell ───────────────────────────────────────────────────────
+   The chat surface (#main) IS the warm canvas and fills everything below
+   the header; the composer floats at the bottom of it, centered, so the
+   conversation scrolls underneath it (Claude-style) rather than living
+   in a separate hard-bordered bar. */
+#app {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  grid-template-rows: 60px 1fr;
+  grid-template-areas:
+    "header header"
+    "sidebar main";
+  height: 100vh; width: 100vw;
+}
+#app.sidebar-closed { grid-template-columns: 0 1fr; }
+#app.sidebar-closed #sidebar { transform: translateX(-100%); }
+
+/* ── Header / brand bar ────────────────────────────────────────────────
+   Transparent over the canvas with only a hairline divider — feels like
+   part of the page, not a chrome bar. */
+#header {
+  grid-area: header;
+  display: flex; align-items: center; gap: 12px;
+  padding: 0 20px;
+  background: var(--bg-soft);
+  border-bottom: 1px solid var(--border);
+  position: relative; z-index: 20;
+}
+.brand { display: flex; align-items: center; gap: 12px; cursor: default; }
+/* The logo is a wide horizontal wordmark (Tencent + Hy3). Size it by
+   height and let width follow the natural aspect ratio so it never
+   gets smushed into a square. */
+.brand-logo {
+  height: 26px; width: auto;
+  object-fit: contain;
+  display: block;
+  border-radius: 4px;
+}
+.brand-name { font-size: 16px; font-weight: 650; color: var(--text-strong); letter-spacing: -0.01em; }
+.brand-sep { color: var(--border-strong); font-weight: 300; }
+.brand-tag { font-size: 13px; color: var(--text-muted); font-weight: 500; }
+.brand-badge {
+  margin-left: 4px; font-size: 11px; font-weight: 600;
+  color: var(--tc-blue); background: var(--tc-blue-soft);
+  padding: 2px 9px; border-radius: 999px; letter-spacing: 0.02em;
+}
+.header-spacer { flex: 1; }
+.icon-btn {
+  width: 36px; height: 36px; border-radius: 9px;
+  border: 1px solid transparent; background: transparent; color: var(--text-muted);
+  display: inline-flex; align-items: center; justify-content: center;
+  cursor: pointer; transition: background 0.15s ease, color 0.15s ease; padding: 0;
+}
+.icon-btn:hover { background: var(--bg-muted); color: var(--text); }
+.icon-btn svg { width: 18px; height: 18px; }
+
+/* ── Sidebar ──────────────────────────────────────────────────────────── */
+#sidebar {
+  grid-area: sidebar;
+  background: var(--sidebar-bg);
+  border-right: 1px solid var(--border);
+  overflow-y: auto; overflow-x: hidden;
+  transition: transform 0.22s ease;
+  padding: 18px 18px 28px;
+  display: flex; flex-direction: column; gap: 16px;
+}
+.sidebar-notice {
+  font-size: 12px; line-height: 1.55; color: var(--text-muted);
+  background: var(--accent-soft); border: 1px solid transparent;
+  border-radius: var(--radius-sm); padding: 11px 13px;
+}
+.field { display: flex; flex-direction: column; gap: 7px; }
+.field > label {
+  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
+  text-transform: none; letter-spacing: 0.01em;
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+}
+.field .info {
+  font-size: 11px; font-weight: 400; color: var(--text-muted);
+  margin-top: -3px; line-height: 1.45; opacity: 0.85;
+}
+.field input[type="text"], .field textarea, .field select {
+  width: 100%; padding: 9px 12px;
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  background: var(--bg-soft); color: var(--text); font-size: 14px;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.field textarea { resize: vertical; min-height: 64px; font-family: inherit; line-height: 1.5; }
+.field input:focus, .field textarea:focus, .field select:focus {
+  outline: none; border-color: var(--tc-blue); box-shadow: var(--ring);
+}
+.field select { appearance: none; cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8580' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
+}
+.range-row { display: flex; align-items: center; gap: 10px; }
+.range-row input[type="range"] { flex: 1; accent-color: var(--tc-blue); }
+.range-num {
+  width: 58px; padding: 5px 8px; text-align: center;
+  border: 1px solid var(--border); border-radius: 7px;
+  background: var(--bg-soft); color: var(--text); font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.range-num:focus { outline: none; border-color: var(--tc-blue); box-shadow: var(--ring); }
+.range-row input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; background: var(--border); border-radius: 2px; }
+.range-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--tc-blue); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
+.range-row input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: var(--tc-blue); cursor: pointer; }
+.check-row {
+  display: flex; align-items: center; gap: 8px; cursor: pointer;
+  font-size: 12px; color: var(--text-muted); user-select: none; margin-top: 2px;
+}
+.check-row input { accent-color: var(--tc-blue); width: 14px; height: 14px; }
+
+.accordion { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-soft); }
+.accordion > summary {
+  list-style: none; cursor: pointer; padding: 11px 13px;
+  font-size: 13px; font-weight: 600; color: var(--text);
+  display: flex; align-items: center; justify-content: space-between;
+}
+.accordion > summary::-webkit-details-marker { display: none; }
+.accordion > summary::after { content: "⌄"; color: var(--text-muted); transition: transform 0.15s ease; }
+.accordion[open] > summary::after { transform: rotate(180deg); }
+.accordion > .accordion-body { padding: 13px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); }
+.accordion textarea { width: 100%; min-height: 180px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; resize: vertical; }
+.tiny-btn {
+  align-self: flex-start; padding: 7px 15px; font-size: 12px; font-weight: 500;
+  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft);
+  color: var(--text); cursor: pointer; transition: all 0.15s ease;
+}
+.tiny-btn:hover { border-color: var(--tc-blue); color: var(--tc-blue); background: var(--tc-blue-060); }
+.fn-msg { font-size: 12px; line-height: 1.5; min-height: 18px; }
+.fn-msg.ok { color: var(--tc-teal); }
+.fn-msg.err { color: var(--tc-red); }
+
+/* ── Main chat surface ──────────────────────────────────────────────────
+   The warm canvas. Conversation is centered in a narrow column with
+   generous vertical rhythm; assistant turns are plain text (no bubble),
+   user turns are soft pills. The composer floats at the bottom on a
+   gradient fade so messages scroll under it gracefully. */
+#main {
+  grid-area: main; position: relative; background: var(--bg);
+  overflow: hidden; display: flex; flex-direction: column;
+}
+#chat {
+  flex: 1; overflow-y: auto; overflow-x: hidden;
+  padding: 28px clamp(16px, 5vw, 48px) 220px;   /* bottom room for floating composer */
+  scroll-behavior: auto;
+}
+/* Center the conversation in a narrow column. */
+#chat > .col,
+#chat > .message-row { max-width: var(--col-max); margin-left: auto; margin-right: auto; width: 100%; }
+.message-row { display: block; width: 100%; margin: 0; }
+.message-row.user-row { display: flex; justify-content: flex-end; margin: 22px 0 4px; }
+.message-row.bot-row { margin: 0 0 30px; }
+.message { max-width: 100%; }
+.message.user {
+  background: var(--bg-elev); color: var(--text-strong);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg); padding: 11px 18px;
+  max-width: min(560px, 82%); box-shadow: var(--shadow-sm);
+  font-weight: 450;
+}
+.message.user .hy-user-text { font-size: 15px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
+.message.bot { background: transparent; padding: 0; max-width: 100%; }
+.message.bot .markdown { font-size: 16px; line-height: 1.7; color: var(--text); letter-spacing: 0.005em; }
+.message.bot p { margin: 0.85em 0; }
+.message.bot p:first-child { margin-top: 0; }
+.message.bot p:last-child { margin-bottom: 0; }
+.message.bot strong, .message.bot b { font-weight: 650; color: var(--text-strong); }
+.message.bot ul, .message.bot ol { padding-left: 1.5em; margin: 0.6em 0; }
+.message.bot li { margin: 0.35em 0; line-height: 1.7; }
+.message.bot h1 { font-size: 23px; font-weight: 700; color: var(--text-strong); margin: 1.1em 0 0.5em; letter-spacing: -0.01em; }
+.message.bot h2 { font-size: 20px; font-weight: 700; color: var(--text-strong); margin: 1em 0 0.45em; letter-spacing: -0.01em; }
+.message.bot h3 { font-size: 17px; font-weight: 650; color: var(--text-strong); margin: 0.9em 0 0.4em; }
+.message.bot h4 { font-size: 15px; font-weight: 650; color: var(--text); margin: 0.8em 0 0.35em; }
+.message.bot a { color: var(--tc-blue); text-underline-offset: 2px; }
+.message.bot blockquote { border-left: 3px solid var(--border-strong); margin: 0.9em 0; padding: 2px 16px; color: var(--text-muted); }
+.message.bot hr { border: none; border-top: 1px solid var(--border); margin: 1.4em 0; }
+.message.bot table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0.9em 0; font-size: 14px; }
+.message.bot th, .message.bot td { border: 1px solid var(--border); padding: 8px 14px; text-align: left; vertical-align: top; }
+.message.bot th { background: var(--bg-muted); font-weight: 600; }
+.message.bot code { font-family: var(--font-mono); font-size: 0.88em; }
+.message.bot :not(pre) > code { background: var(--bg-muted); padding: 2px 6px; border-radius: 5px; color: var(--text); }
+.hy-codeblock { margin: 1em 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-soft); }
+.hy-codeblock-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 9px 7px 15px; background: var(--bg-muted); border-bottom: 1px solid var(--border); font-size: 12px; line-height: 1; color: var(--text-muted); user-select: none; }
+.hy-codeblock-lang { text-transform: lowercase; letter-spacing: 0.02em; font-weight: 500; }
+.hy-codeblock-lang:empty::before { content: "text"; opacity: 0.7; }
+.hy-codeblock pre { margin: 0; border: none; border-radius: 0; background: transparent; padding: 13px 16px; overflow-x: auto; font-size: 13px; line-height: 1.65; }
+.code-copy-btn { flex-shrink: 0; width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: inherit; background: transparent; border: none; border-radius: 7px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
+.code-copy-btn svg { display: block; width: 14px; height: 14px; }
+.code-copy-btn:hover { background: var(--tc-blue-060); color: var(--tc-blue); }
+.code-copy-btn.copied, .code-copy-btn.copied:hover { color: var(--tc-teal); background: transparent; }
+.html-preview-btn { display: inline-flex; align-items: center; background: none; border: none; padding: 2px 0; margin: 2px 0 6px; cursor: pointer; font-size: 0; line-height: 1; transition: opacity 0.15s ease; }
+.html-preview-btn::before { content: "▶ html preview"; font-size: 12px; color: var(--tc-blue); font-weight: 400; font-family: var(--font-sans); }
+.html-preview-btn:hover { opacity: 0.7; }
+
+/* ── Reasoning (thinking) block ───────────────────────────────────────── */
+.thinking-block { background: none; border: none; padding: 0; margin: 6px 0 12px; }
+.thinking-block summary { cursor: pointer; font-size: 13px; font-weight: 400; color: var(--text-muted); padding: 0; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
+.thinking-block summary:hover { color: var(--text); }
+.thinking-block summary::-webkit-details-marker { display: none; }
+.thinking-block summary::after { content: " ›"; font-size: 13px; color: var(--border-strong); }
+.thinking-block[open] summary::after { content: " ⌄"; }
+.thinking-block[open] summary { margin-bottom: 8px; }
+.thinking-block[open] > :not(summary) { font-size: 13px; color: var(--text-muted); line-height: 1.7; padding: 12px 16px; background: var(--bg-soft); border-radius: 8px; max-height: 300px; overflow-y: auto; border-left: 2px solid var(--tc-blue); white-space: pre-wrap; word-break: break-word; }
+
+/* ── Tool-call display block ─────────────────────────────────────────── */
+.hy-tool-calls { margin-top: 10px; }
+.hy-tool-call + .hy-tool-call { margin-top: 8px; }
+
+/* ── Typing indicator ─────────────────────────────────────────────────── */
+.typing-indicator { display: flex; align-items: center; gap: 5px; padding: 4px 0; height: 24px; }
+.typing-indicator span { width: 8px; height: 8px; background: var(--text-muted); border-radius: 50%; animation: typing-bounce 1.4s infinite ease-in-out both; }
+.typing-indicator span:nth-child(1) { animation-delay: 0s; }
+.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
+.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
+@keyframes typing-bounce { 0%, 80%, 100% { transform: scale(0.5); opacity: 0.35; } 40% { transform: scale(1); opacity: 1; } }
+
+/* ── Empty-state examples overlay ─────────────────────────────────────── */
+#examples-overlay {
+  position: absolute; inset: 0; z-index: 5;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--bg); overflow-y: auto; padding: 40px 20px 160px;
+  transition: opacity 0.25s ease;
+}
+#examples-overlay.hidden { opacity: 0; pointer-events: none; }
+.examples-wrapper { display: flex; flex-direction: column; align-items: center; max-width: 1020px; }
+.examples-hero { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 22px; }
+.examples-hero img { width: auto; height: 56px; border-radius: 8px; object-fit: contain; }
+.examples-heading { font-size: 28px; font-weight: 650; color: var(--text-strong); margin: 0 0 30px; letter-spacing: -0.02em; text-align: center; }
+.examples-grid { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 460px); column-gap: 20px; row-gap: 14px; justify-content: center; width: min(1020px, 100%); }
+.example-btn:nth-child(1), .example-btn:nth-child(4) { grid-column: 1 / span 2; justify-self: center; }
+.example-btn:nth-child(2) { grid-column: 1; justify-self: end; }
+.example-btn:nth-child(3) { grid-column: 2; justify-self: start; }
+.example-btn {
+  display: flex; align-items: center; justify-content: center;
+  width: 460px; height: 72px; overflow: hidden;
+  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 14px 20px; font-size: 14px; line-height: 1.5; color: var(--text);
+  cursor: pointer; user-select: none; text-align: center;
+  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease;
+}
+.example-btn:hover { border-color: var(--border-strong); color: var(--text-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); background: var(--bg-elev); }
+.example-btn-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; width: 100%; }
+@media (max-width: 1020px) {
+  .examples-grid { grid-template-columns: minmax(0, 1fr); }
+  .example-btn:nth-child(n) { grid-column: 1; justify-self: center; }
+  .example-btn { width: 100%; max-width: 520px; }
+}
+
+/* ── Composer (floating, centered pill) ────────────────────────────────
+   Sits at the bottom of the chat canvas, centered to the conversation
+   column, with a gradient fade above it so content scrolls under it
+   gracefully — the Claude.ai feel. */
+#composer {
+  position: absolute; left: 0; right: 0; bottom: 0;
+  display: flex; align-items: flex-end; justify-content: center; gap: 10px;
+  padding: 0 clamp(16px, 5vw, 48px) 20px;
+  z-index: 10;
+  background: linear-gradient(to top, var(--bg) 52%, rgba(247,246,243,0));
+  pointer-events: none;       /* let the fade be click-through … */
+}
+#composer > * { pointer-events: auto; }  /* … but not the controls */
+html.dark #composer { background: linear-gradient(to top, var(--bg) 52%, rgba(26,26,26,0)); }
+.composer-inner {
+  display: flex; align-items: flex-end; gap: 8px; width: 100%; max-width: var(--col-max);
+  background: var(--bg-elev); border: 1px solid var(--border);
+  border-radius: var(--radius-xl); padding: 8px 8px 8px 18px;
+  box-shadow: var(--shadow-md); transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.composer-inner:focus-within { border-color: var(--border-strong); box-shadow: var(--shadow-md), var(--ring); }
+#composer textarea {
+  flex: 1; min-height: 44px; max-height: 200px;
+  resize: none; overflow-y: auto;
+  border: none; border-radius: 0;
+  padding: 12px 0; font-size: 15.5px; line-height: 1.55; background: transparent;
+  color: var(--text); box-shadow: none; transition: none;
+}
+#composer textarea:focus { outline: none; box-shadow: none; }
+#new-chat-btn {
+  width: 40px; height: 40px; border-radius: 50%; padding: 0;
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+  cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--text-muted);
+  transition: background 0.15s ease, color 0.15s ease;
+}
+#new-chat-btn:hover { background: var(--bg-muted); color: var(--text); }
+#new-chat-btn svg { width: 19px; height: 19px; }
+#send-btn {
+  width: 40px; height: 40px; border-radius: 50%; padding: 0;
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+  cursor: pointer; border: none; background: var(--tc-blue); color: #fff;
+  transition: background 0.15s ease, transform 0.1s ease;
+}
+#send-btn:hover { background: var(--tc-blue-hover); }
+#send-btn:active { transform: scale(0.95); }
+#send-btn:disabled { background: var(--border-strong); cursor: not-allowed; opacity: 0.6; }
+#send-btn svg { width: 18px; height: 18px; }
+
+/* ── Tool-call input panel ───────────────────────────────────────────── */
+#tool-area {
+  position: absolute; bottom: 104px; left: 50%; transform: translateX(-50%);
+  width: min(640px, 90%); z-index: 30;
+  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 16px; box-shadow: var(--shadow-lg); display: none; flex-direction: column; gap: 10px;
+}
+#tool-area.visible { display: flex; }
+#tool-area .tool-header { font-size: 13px; font-weight: 600; color: var(--text); }
+#tool-area .tool-markdown { font-size: 13px; line-height: 1.6; color: var(--text); max-height: 160px; overflow-y: auto; background: var(--bg-soft); border-radius: 8px; padding: 10px 12px; }
+#tool-area .tool-markdown p { margin: 0.4em 0; }
+#tool-area .tool-markdown code { background: var(--bg-muted); padding: 1px 5px; border-radius: 4px; font-family: var(--font-mono); font-size: 12px; }
+#tool-area .tool-markdown pre { background: var(--bg-muted); border-radius: 6px; padding: 8px 10px; overflow-x: auto; margin: 0.4em 0; }
+#tool-area .tool-markdown pre code { background: none; padding: 0; }
+#tool-area .tool-markdown strong { font-weight: 600; }
+#tool-result-input {
+  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
+  background: var(--bg); color: var(--text); font-size: 14px; font-family: var(--font-mono);
+}
+#tool-result-input:focus { outline: none; border-color: var(--tc-blue); box-shadow: 0 0 0 3px var(--tc-blue-120); }
+#tool-submit-btn { align-self: flex-end; padding: 8px 18px; border: none; border-radius: 8px; background: var(--tc-blue); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
+#tool-submit-btn:hover { background: var(--tc-blue-hover); }
+
+/* ── HTML preview modal ───────────────────────────────────────────────── */
+.html-preview-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; animation: fadeIn 0.2s ease; }
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+.html-preview-modal { width: 90vw; height: 85vh; background: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; animation: modalSlideUp 0.25s ease; }
+@keyframes modalSlideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+.html-preview-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--bg-soft); flex-shrink: 0; }
+.html-preview-title { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
+.html-preview-title::before { content: "⬡"; color: var(--tc-blue); }
+.html-preview-close { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; line-height: 1; transition: all 0.15s ease; }
+.html-preview-close:hover { background: var(--tc-blue-060); color: var(--tc-red); }
+.html-preview-iframe { flex: 1; border: none; width: 100%; background: var(--bg); }
+
+/* ── Toast ────────────────────────────────────────────────────────────── */
+#toast-host { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
+.toast { background: #1f2937; color: #fff; padding: 10px 16px; border-radius: 8px; box-shadow: var(--shadow-lg); font-size: 14px; max-width: min(92vw, 520px); line-height: 1.4; opacity: 0; transition: opacity 180ms ease; }
+.toast.show { opacity: 1; }
+.toast.error { background: var(--tc-red); }
+
+/* ── Sidebar toggle ─────────────────────────────────────────────────────
+   One class (``#app.sidebar-closed``) drives collapse on every breakpoint:
+   desktop collapses the grid column to 0; mobile slides the fixed overlay
+   out. The header toggle is always visible so users can re-open it. */
+#sidebar-toggle { display: inline-flex; }
+@media (max-width: 860px) {
+  #app { grid-template-columns: 1fr; grid-template-areas: "header" "main"; }
+  #sidebar {
+    position: fixed; top: 60px; bottom: 0; left: 0; width: 86%; max-width: 360px;
+    z-index: 50; box-shadow: var(--shadow-lg);
+  }
+  /* On mobile the sidebar is an overlay; show it unless explicitly closed. */
+  #app.sidebar-closed #sidebar { transform: translateX(-100%); }
+  .examples-hero img { height: 46px; }
+  .examples-heading { font-size: 22px; }
+}
+
+/* ── Scrollbars (slim & subtle) ──────────────────────────────────────── */
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }
+* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
+
+/* KaTeX: keep its own math fonts and reset inherited typography so SVG
+   stretchy operators don't get distorted by the bubble's line-height. */
+.message.bot .katex { font: normal 1.21em KaTeX_Main, "Times New Roman", serif !important; text-indent: 0 !important; }
+.message.bot .katex, .message.bot .katex *, .message.bot .katex-display, .message.bot .katex-display * { letter-spacing: normal !important; word-spacing: normal !important; line-height: 1.2 !important; }
+.message.bot .katex, .message.bot .katex-display { color: var(--text) !important; }
+.message.bot .katex svg { fill: currentColor; stroke: none; }
+.message.bot .katex-display { margin: 1em 0; padding: 0.4em 0; overflow-x: auto; overflow-y: hidden; }
+.message.bot .katex-display > .katex { text-align: center; }
+</style>
+</head>
+<body>
+<div id="app" class="sidebar-closed">
+  <!-- ── Header ────────────────────────────────────────────────────── -->
+  <header id="header">
+    <button id="sidebar-toggle" class="icon-btn" title="Menu" aria-label="Toggle sidebar">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
+    </button>
+    <div class="brand">
+      <img class="brand-logo" src="https://huggingface.co/tencent/Hy3/resolve/main/assets/logo-en.png" alt="Tencent Hy3 logo" />
+      <span class="brand-name">Hy3</span>
+      <span class="brand-sep">·</span>
+      <span class="brand-tag">Chat Demo</span>
+      <span class="brand-badge">Tencent</span>
+    </div>
+    <div class="header-spacer"></div>
+    <button id="theme-btn" class="icon-btn" title="Toggle theme" aria-label="Toggle theme">
+      <svg id="theme-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
+    </button>
+  </header>
+
+  <!-- ── Sidebar ──────────────────────────────────────────────────── -->
+  <aside id="sidebar">
+    <p class="sidebar-notice" id="sidebar-notice"></p>
+
+    <div class="field">
+      <label data-i18n="sidebar.think_level"></label>
+      <select id="think-level">
+        <option value="high">high</option>
+        <option value="low">low</option>
+        <option value="no_think">no_think</option>
+      </select>
+      <span class="info" data-i18n="sidebar.think_level.info"></span>
+    </div>
+
+    <div class="field">
+      <label data-i18n="sidebar.system_prompt"></label>
+      <textarea id="system-prompt" rows="3" data-i18n-ph="sidebar.system_prompt.placeholder"></textarea>
+    </div>
+
+    <div class="field">
+      <label data-i18n="sidebar.temperature"></label>
+      <div class="range-row">
+        <input type="range" id="temperature" min="0" max="1" step="0.01" value="0.9" disabled />
+        <input type="number" class="range-num" id="temperature-num" value="0.9" min="0" max="1" step="0.01" disabled />
+      </div>
+      <label class="check-row"><input type="checkbox" id="temperature-use-default" checked /><span data-i18n="sidebar.temperature.use_default"></span></label>
+      <span class="info" data-i18n="sidebar.temperature.info"></span>
+    </div>
+
+    <div class="field">
+      <label data-i18n="sidebar.max_tokens"></label>
+      <div class="range-row">
+        <input type="range" id="max-tokens" min="0" max="65536" step="1" value="0" />
+        <input type="number" class="range-num" id="max-tokens-num" value="0" min="0" max="65536" step="1" />
+      </div>
+      <span class="info" data-i18n="sidebar.max_tokens.info"></span>
+    </div>
+
+    <div class="field">
+      <label data-i18n="sidebar.top_p"></label>
+      <div class="range-row">
+        <input type="range" id="top-p" min="0" max="1" step="0.01" value="0" />
+        <input type="number" class="range-num" id="top-p-num" value="0" min="0" max="1" step="0.01" />
+      </div>
+      <span class="info" data-i18n="sidebar.top_p.info"></span>
+    </div>
+
+    <div class="field">
+      <label data-i18n="sidebar.preserved_thinking"></label>
+      <label class="check-row"><input type="checkbox" id="preserved-thinking-use-default" checked /><span data-i18n="sidebar.preserved_thinking.use_default"></span></label>
+      <label class="check-row"><input type="checkbox" id="preserved-thinking" /><span data-i18n="sidebar.preserved_thinking" style="font-weight:500;color:var(--text)"></span></label>
+      <span class="info" data-i18n="sidebar.preserved_thinking.use_default.info"></span>
+    </div>
+
+    <details class="accordion">
+      <summary data-i18n="sidebar.functions"></summary>
+      <div class="accordion-body">
+        <textarea id="functions-json" spellcheck="false" placeholder=""></textarea>
+        <button class="tiny-btn" id="validate-fn-btn" data-i18n="sidebar.validate_btn"></button>
+        <div class="fn-msg" id="fn-msg"></div>
+      </div>
+    </details>
+  </aside>
+
+  <!-- ── Main chat ────────────────────────────────────────────────── -->
+  <main id="main">
+    <div id="chat" role="log" aria-live="polite"></div>
+
+    <div id="examples-overlay">
+      <div class="examples-wrapper">
+        <div class="examples-hero">
+          <img src="https://huggingface.co/tencent/Hy3/resolve/main/assets/logo-en.png" alt="" />
+        </div>
+        <p class="examples-heading" data-i18n="examples_heading"></p>
+        <div class="examples-grid" id="examples-grid"></div>
+      </div>
+    </div>
+
+    <div id="tool-area">
+      <div class="tool-header" id="tool-header"></div>
+      <div class="tool-markdown" id="tool-markdown"></div>
+      <input type="text" id="tool-result-input" />
+      <button id="tool-submit-btn" data-i18n="tool.submit"></button>
+    </div>
+  </main>
+
+  <!-- ── Composer (floating pill) ───────────────────────────────��─── -->
+  <div id="composer">
+    <div class="composer-inner">
+      <button id="new-chat-btn" title="New chat" aria-label="New chat">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+      </button>
+      <textarea id="msg-input" rows="1" data-i18n-ph="msg_placeholder"></textarea>
+      <button id="send-btn" title="Send" aria-label="Send">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+      </button>
+    </div>
+  </div>
+</div>
+
+<div id="toast-host"></div>
+
+<script type="module">
+/* ───────────────────────────────────────────────────────────────────
+   Hy3 Tencent-branded frontend.
+
+   Goal: only the UI + transport changed from the gr.Blocks app. The chat
+   behaviour is identical, so this file is a faithful port of the old
+   static/chat.js (the delta-op renderer: append-only bubbles, frozen /
+   streaming split so KaTeX+marked+hljs run once per closed block, seq
+   de-dup, epoch staleness, preprocess_latex'd content deltas, tool-call
+   markdown) plus static/app.js (the busy-marker watchdog, follow-the-tail
+   scroll lock with user-gesture pause, examples overlay, code-block
+   chrome with copy + html preview).
+
+   The ONLY adaptation is the transport: instead of a MutationObserver
+   watching a hidden #hy-chat-delta gr.HTML component, we consume the
+   @gradio/client async-iterator frames from server.py and feed each JSON
+   delta payload straight into the same applyDelta() the old renderer used.
+   The busy marker is no longer a hidden gr.HTML span; it's a client-side
+   flag toggled by the stream's first frame + completion + the watchdog.
+   ─────────────────────────────────────────────────────────────────── */
+import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client@1.7.1/dist/index.min.js";
+
+(() => {
+  "use strict";
+  if (window.__HY_APP_INIT) return;
+  window.__HY_APP_INIT = true;
+
+  // ─── i18n + examples (loaded from /config endpoint) ──────────────
+  // Full English default table so every label is populated on first paint
+  // — before /config round-trips. /config then overrides with the active
+  // locale (en/zh). Keep these in sync with i18n.py.
+  const I18N = {
+    "title": "Hy3 Chat Demo",
+    "title.notice_html": "The current demo version is offline; full-featured capabilities will be available on the Tencent HY official website.",
+    "examples_heading": "What can I help you with?",
+    "msg_placeholder": "Type a message...",
+    "sidebar.think_level": "Think level",
+    "sidebar.think_level.info": "Control reasoning depth",
+    "sidebar.system_prompt": "System prompt",
+    "sidebar.system_prompt.placeholder": "You are a helpful AI assistant...",
+    "sidebar.temperature": "Temperature",
+    "sidebar.temperature.info": "Higher values produce more random outputs",
+    "sidebar.temperature.use_default": "Use model default",
+    "sidebar.max_tokens": "Max output tokens",
+    "sidebar.max_tokens.info": "Maximum tokens per response. Set to 0 to use the model's default.",
+    "sidebar.top_p": "Top P",
+    "sidebar.top_p.info": "Nucleus sampling probability threshold. Set to 0 to use the model's default.",
+    "sidebar.preserved_thinking": "Preserved thinking",
+    "sidebar.preserved_thinking.info": "When enabled, the model can retain reasoning content from previous assistant turns in the context, helping maintain reasoning continuity and conversation integrity while improving model performance.",
+    "sidebar.preserved_thinking.use_default": "Preserved thinking — Use model default",
+    "sidebar.preserved_thinking.use_default.info": "We recommend using \"Use model default\", which automatically enables this option for tool call workflows and disables it for pure text conversations.",
+    "sidebar.functions": "🔧 Functions",
+    "sidebar.functions.label": "Function definitions (JSON array)",
+    "sidebar.validate_btn": "Validate & Format",
+    "tool.result_label": "Function result",
+    "tool.result_placeholder": "Enter function return value... (Enter to submit)",
+    "tool.submit": "Submit",
+    "tool.call_header": "Function call ({i}/{n})",
+    "tool.call_label": "🔧 Call function",
+    "display.thinking": "Thinking...",
+    "display.thinking_done": "Thinking complete",
+    "display.code_copy": "Copy",
+    "display.code_copied": "Copied",
+    "warn.empty_msg": "Please enter a message",
+    "warn.invalid_fn_json": "Invalid function JSON, please fix or clear before sending: {err}",
+    "warn.request_failed": "Request failed, please retry or adjust parameters",
+    "warn.model_busy": "Model is still responding. Please wait for it to finish before sending a new message.",
+    "info.new_chat": "Start a new chat",
+    // short aliases used directly in code below
+    "thinking": "Thinking...",
+    "thinking_done": "Thinking complete",
+    "code_copy": "Copy",
+    "code_copied": "Copied",
+    "model_busy": "Model is still responding. Please wait for it to finish before sending a new message.",
+    "empty_msg": "Please enter a message",
+    "request_failed": "Request failed, please retry or adjust parameters",
+    "new_chat": "Start a new chat",
+  };
+  let EXAMPLES = [];
+  let TOOL_CALL_LABEL = "🔧 Call function";
+
+  // ─── session id (fresh per page load) ─────────────────────────────
+  // Minting a NEW id on every load (rather than reusing one from
+  // sessionStorage) makes a browser refresh start a blank conversation:
+  // the server keys its in-memory ChatState off this id, so a fresh id
+  // means a fresh, empty state and the prior turn's context never leaks
+  // into the next message. sessionStorage used to make the id survive F5
+  // — which is exactly what surfaced stale history after a refresh. The
+  // variable persists for the lifetime of this loaded page (across
+  // @gradio/client reconnects), so no storage is needed.
+  let SESSION_ID = "s-" + Math.random().toString(36).slice(2) + Date.now().toString(36);
+
+  // ─── DOM refs ─────────────────────────────────────────────────────
+  const $ = (id) => document.getElementById(id);
+  const chatEl = $("chat");
+  const overlayEl = $("examples-overlay");
+  const msgInput = $("msg-input");
+  const sendBtn = $("send-btn");
+  const newChatBtn = $("new-chat-btn");
+  const toolArea = $("tool-area");
+  const toolMarkdown = $("tool-markdown");
+  const toolResultInput = $("tool-result-input");
+  const toolSubmitBtn = $("tool-submit-btn");
+
+  // ─── streaming state ──────────────────────────────────────────────
+  let isStreaming = false;
+  let currentJob = null;        // the active async-iterator job
+  let pendingToolCalls = [];    // tool calls awaiting user results
+  let currentEpoch = null;      // staleness guard for in-flight frames
+  // How many tool results the user has submitted in the current tool-call
+  // round, so the panel header shows "Function call (2/3)" correctly.
+  let toolResultsSubmitted = 0;
+  let toolRoundTotal = 0;
+
+  /* ─── apply i18n to the DOM ──────────────────────────────────────── */
+  function applyI18n(table) {
+    Object.assign(I18N, table || {});
+    document.querySelectorAll("[data-i18n]").forEach((el) => {
+      const key = el.getAttribute("data-i18n");
+      if (I18N[key] != null) el.textContent = I18N[key];
+    });
+    document.querySelectorAll("[data-i18n-ph]").forEach((el) => {
+      const key = el.getAttribute("data-i18n-ph");
+      if (I18N[key] != null) el.placeholder = I18N[key];
+    });
+    document.title = (I18N["title"] || "Hy3") + " · Tencent";
+    $("sidebar-notice").textContent = I18N["title.notice_html"] || "";
+    $("msg-input").placeholder = I18N["msg_placeholder"] || "Type a message...";
+    if (I18N["tool.call_label"]) TOOL_CALL_LABEL = I18N["tool.call_label"];
+  }
+
+  /* ─── theme toggle ───────────────────────────────────────────────── */
+  function setTheme(dark) {
+    document.documentElement.classList.toggle("dark", dark);
+    localStorage.setItem("hy3-theme", dark ? "dark" : "light");
+    const lightCss = document.getElementById("hljs-light-css");
+    const darkCss = document.getElementById("hljs-dark-css");
+    if (lightCss && darkCss) {
+      lightCss.disabled = dark;
+      darkCss.disabled = !dark;
+    }
+  }
+  const savedTheme = localStorage.getItem("hy3-theme");
+  setTheme(savedTheme ? savedTheme === "dark" : matchMedia("(prefers-color-scheme: dark)").matches);
+  $("theme-btn").addEventListener("click", () =>
+    setTheme(!document.documentElement.classList.contains("dark"))
+  );
+
+  /* ─── sidebar toggle ───────────────────────────────────────────────
+     One class (``sidebar-closed``) drives collapse on every breakpoint;
+     the header button flips it, so the same control opens/closes the
+     sidebar on both desktop and mobile. It starts closed by default
+     (see the ``sidebar-closed`` class on #app). */
+  $("sidebar-toggle").addEventListener("click", () => {
+    $("app").classList.toggle("sidebar-closed");
+  });
+
+  /* ─── markdown + math rendering ─────────────────────────────���──────
+     Ported from static/chat.js: two-stage pipeline so marked doesn't
+     eat the LaTeX before KaTeX can see it. */
+  const MARKED_OPTS = { gfm: true, breaks: false };
+  const KATEX_DELIMS = [
+    { left: "$$", right: "$$", display: true },
+    { left: "$", right: "$", display: false },
+  ];
+
+  function normalizeMathDelims(text) {
+    if (!text) return text;
+    let out = "", i = 0; const n = text.length;
+    while (i < n) {
+      const ch = text[i];
+      if ((ch === "`" && text.startsWith("```", i)) || (ch === "~" && text.startsWith("~~~", i))) {
+        const marker = text.substr(i, 3); out += marker; i += 3;
+        const close = text.indexOf(marker, i);
+        if (close < 0) { out += text.slice(i); return out; }
+        out += text.slice(i, close + 3); i = close + 3; continue;
+      }
+      if (ch === "`") {
+        let runLen = 1; while (i + runLen < n && text[i + runLen] === "`") runLen++;
+        const open = text.substr(i, runLen); out += open; i += runLen;
+        const close = text.indexOf(open, i);
+        if (close < 0) { out += text.slice(i); return out; }
+        out += text.slice(i, close + runLen); i = close + runLen; continue;
+      }
+      if (ch === "\\") {
+        if (text[i + 1] === "[") { out += "$$"; i += 2; continue; }
+        if (text[i + 1] === "]") { out += "$$"; i += 2; continue; }
+        if (text[i + 1] === "(") { out += "$"; i += 2; continue; }
+        if (text[i + 1] === ")") { out += "$"; i += 2; continue; }
+      }
+      out += ch; i++;
+    }
+    return out;
+  }
+  const MATH_RE = /\$\$[\s\S]+?\$\$|\$(?=[^\s$])[^\n$]*?(?<=[^\s$])\$/g;
+  function protectMath(text) {
+    const stash = [];
+    const escaped = text.replace(MATH_RE, (m) => {
+      const idx = stash.length; stash.push(m); return "M" + idx + "";
+    });
+    return { escaped, stash };
+  }
+  function restoreMath(html, stash) {
+    if (!stash.length) return html;
+    return html.replace(/M(\d+)/g, (_, n) => stash[+n]);
+  }
+
+  function escapeHtml(s) {
+    return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  }
+
+  function renderMarkdownInto(el, text) {
+    if (!text) { el.innerHTML = ""; return; }
+    const normalized = normalizeMathDelims(text);
+    const { escaped, stash } = protectMath(normalized);
+    const rawMd = (window.marked && window.marked.parse)
+      ? window.marked.parse(escaped, MARKED_OPTS) : escapeHtml(escaped);
+    el.innerHTML = restoreMath(rawMd, stash);
+
+    if (window.renderMathInElement) {
+      try {
+        window.renderMathInElement(el, {
+          delimiters: KATEX_DELIMS, throwOnError: false,
+          ignoredTags: ["script", "noscript", "style", "textarea", "pre", "code"],
+        });
+      } catch (e) { console.warn("[hy] katex:", e); }
+    }
+    if (window.hljs && window.hljs.highlightElement) {
+      el.querySelectorAll("pre code").forEach((c) => {
+        if (c.dataset.hljsDone) return;
+        try { window.hljs.highlightElement(c); } catch (e) {}
+        c.dataset.hljsDone = "1";
+      });
+    }
+    decorateCodeBlocks(el);
+  }
+
+  /* ─── code-block chrome (copy + html preview) ───────────────────── */
+  const COPY_SVG = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+  const CHECK_SVG = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 12 10 18 20 6"/></svg>';
+  const HTML_TAG_RE = /<\/(div|body|html|section|main|head|style|script|p|h[1-6]|span|table|form|ul|ol|nav|header|footer|article)>/i;
+  function looksLikeHtml(text) {
+    const t = text.trim(); if (!t) return false;
+    if (/^<!doctype|^<html/i.test(t)) return true;
+    return t.startsWith("<") && t.endsWith(">") && HTML_TAG_RE.test(t);
+  }
+  function detectCodeLang(codeEl) {
+    const m = (codeEl.className || "").match(/(?:^|\s)language-([\w+#.-]+)/i);
+    return m ? m[1].toLowerCase() : "";
+  }
+  function decorateCodeBlocks(root) {
+    root.querySelectorAll("pre code").forEach((codeEl) => {
+      const pre = codeEl.closest("pre"); if (!pre || pre.dataset.hyDecorated) return;
+      pre.dataset.hyDecorated = "1";
+      const wrapper = document.createElement("div"); wrapper.className = "hy-codeblock";
+      const header = document.createElement("div"); header.className = "hy-codeblock-header";
+      const lang = document.createElement("span"); lang.className = "hy-codeblock-lang";
+      lang.textContent = detectCodeLang(codeEl); header.appendChild(lang);
+      const btn = document.createElement("button"); btn.type = "button"; btn.className = "code-copy-btn";
+      btn.setAttribute("aria-label", I18N.code_copy); btn.title = I18N.code_copy; btn.innerHTML = COPY_SVG;
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation(); e.preventDefault();
+        copyText(codeEl.textContent || "").then(() => {
+          btn.innerHTML = CHECK_SVG; btn.classList.add("copied"); btn.title = I18N.code_copied;
+          setTimeout(() => { btn.innerHTML = COPY_SVG; btn.classList.remove("copied"); btn.title = I18N.code_copy; }, 1400);
+        });
+      });
+      header.appendChild(btn);
+      pre.parentElement.insertBefore(wrapper, pre);
+      wrapper.appendChild(header); wrapper.appendChild(pre);
+      if (looksLikeHtml(codeEl.textContent || "")) {
+        const pb = document.createElement("button"); pb.className = "html-preview-btn";
+        pb.addEventListener("click", (ev) => { ev.stopPropagation(); openHtmlPreview(codeEl.textContent || ""); });
+        wrapper.appendChild(pb);
+      }
+    });
+  }
+  function copyText(text) {
+    if (navigator.clipboard && navigator.clipboard.writeText) return navigator.clipboard.writeText(text);
+    return new Promise((res) => {
+      const ta = document.createElement("textarea"); ta.value = text;
+      ta.style.position = "absolute"; ta.style.left = "-9999px"; document.body.appendChild(ta);
+      ta.select(); document.execCommand("copy"); document.body.removeChild(ta); res();
+    });
+  }
+  function openHtmlPreview(html) {
+    document.querySelectorAll(".html-preview-overlay").forEach((e) => e.remove());
+    const overlay = document.createElement("div"); overlay.className = "html-preview-overlay";
+    overlay.addEventListener("click", (e) => { if (e.target === overlay) overlay.remove(); });
+    const modal = document.createElement("div"); modal.className = "html-preview-modal";
+    const header = document.createElement("div"); header.className = "html-preview-header";
+    const title = document.createElement("span"); title.className = "html-preview-title"; title.textContent = "HTML Preview";
+    const close = document.createElement("button"); close.className = "html-preview-close"; close.innerHTML = "&times;";
+    close.addEventListener("click", () => overlay.remove());
+    header.appendChild(title); header.appendChild(close);
+    const iframe = document.createElement("iframe"); iframe.className = "html-preview-iframe";
+    iframe.sandbox = "allow-scripts allow-modals allow-forms allow-popups";
+    modal.appendChild(header); modal.appendChild(iframe); overlay.appendChild(modal);
+    document.body.appendChild(overlay); iframe.srcdoc = html;
+    const esc = (e) => { if (e.key === "Escape") { overlay.remove(); document.removeEventListener("keydown", esc); } };
+    document.addEventListener("keydown", esc);
+  }
+
+  /* ─── bubble DOM ─────────────────────────────────────────────────── */
+  function addUserBubble(text) {
+    const row = document.createElement("div"); row.className = "message-row user-row";
+    const msg = document.createElement("div"); msg.className = "message user";
+    const md = document.createElement("div"); md.className = "hy-user-text"; md.textContent = text;
+    msg.appendChild(md); row.appendChild(msg); chatEl.appendChild(row);
+    return row;
+  }
+  function createAssistantBubble() {
+    const row = document.createElement("div"); row.className = "message-row bot-row";
+    const msg = document.createElement("div"); msg.className = "message bot";
+    const md = document.createElement("div"); md.className = "markdown hy-markdown";
+    const typing = document.createElement("div"); typing.className = "typing-indicator";
+    typing.innerHTML = "<span></span><span></span><span></span>"; md.appendChild(typing);
+    msg.appendChild(md); row.appendChild(msg); chatEl.appendChild(row);
+    const rec = { row, md, typing, reasoningEl: null, contentEl: null, ended: false };
+    rec.__md = md;
+    return rec;
+  }
+  function ensureReasoning(b) {
+    if (b.reasoningEl) return;
+    const det = document.createElement("details"); det.className = "thinking-block"; det.open = true;
+    const sum = document.createElement("summary"); sum.textContent = I18N.thinking;
+    const body = document.createElement("div"); body.className = "hy-reasoning-body";
+    body.style.whiteSpace = "pre-wrap"; body.style.wordBreak = "break-word";
+    det.appendChild(sum); det.appendChild(body);
+    if (b.typing && b.typing.parentNode) b.typing.remove();
+    b.md.insertBefore(det, b.md.firstChild);
+    b.reasoningEl = det; b.reasoningBody = body; b.reasoningSummary = sum;
+  }
+  function ensureContent(b) {
+    if (b.contentEl) return;
+    if (b.typing && b.typing.parentNode) b.typing.remove();
+    const c = document.createElement("div"); c.className = "hy-content";
+    b.md.appendChild(c); b.contentEl = c;
+  }
+  function markThinkingDone(b) {
+    if (!b.reasoningEl || b.thinkingDone) return;
+    b.thinkingDone = true;
+    b.reasoningSummary.textContent = I18N.thinking_done;
+    b.reasoningEl.open = false;
+  }
+  function appendToolCall(b, toolCalls) {
+    let c = b.toolCallContainer;
+    if (!c) { c = document.createElement("div"); c.className = "hy-tool-calls"; b.md.appendChild(c); b.toolCallContainer = c; }
+    c.innerHTML = "";
+    toolCalls.forEach((tc) => {
+      const fn = tc.function || {};
+      let args = fn.arguments || "";
+      try { args = JSON.stringify(JSON.parse(args), null, 2); } catch (e) {}
+      const block = document.createElement("div"); block.className = "hy-tool-call";
+      renderMarkdownInto(block, TOOL_CALL_LABEL + ": **" + (fn.name || "") + "**\n```json\n" + args + "\n```");
+      c.appendChild(block);
+    });
+  }
+
+  /* ─── scroll ────────────────────────────────────────────────────── */
+  function scrollToBottom() {
+    chatEl.scrollTop = chatEl.scrollHeight;
+  }
+  let follow = true;
+  chatEl.addEventListener("scroll", () => {
+    follow = chatEl.scrollHeight - chatEl.scrollTop - chatEl.clientHeight < 120;
+  });
+  function maybeScroll() { if (follow) scrollToBottom(); }
+
+  /* ─── overlay (empty state) ──────────────────────────────────────── */
+  function syncOverlay() {
+    const hasMsgs = chatEl.querySelector(".message-row");
+    overlayEl.classList.toggle("hidden", !!hasMsgs);
+  }
+
+  /* ─── toasts ─────────────────────────────────────────────────────── */
+  function toast(msg, isError) {
+    const host = $("toast-host");
+    const el = document.createElement("div"); el.className = "toast" + (isError ? " error" : "");
+    el.textContent = msg; host.appendChild(el);
+    requestAnimationFrame(() => el.classList.add("show"));
+    setTimeout(() => { el.classList.remove("show"); setTimeout(() => el.remove(), 250); }, 3200);
+  }
+
+  /* ─── send gating ───────────────────────────────────────────────── */
+  function setStreaming(on) {
+    isStreaming = on;
+    sendBtn.disabled = on;
+  }
+
+  /* ─── gather sidebar params for a request ────────────────────────── */
+  function gatherParams() {
+    const tempUseDefault = $("temperature-use-default").checked;
+    const ptUseDefault = $("preserved-thinking-use-default").checked;
+    return {
+      session_id: SESSION_ID,
+      system_prompt: $("system-prompt").value,
+      think_level: $("think-level").value,
+      temperature: tempUseDefault ? null : parseFloat($("temperature-num").value),
+      max_tokens: parseInt($("max-tokens-num").value || "0", 10) || 0,
+      top_p: parseFloat($("top-p-num").value || "0") || 0,
+      preserved_thinking: ptUseDefault ? null : $("preserved-thinking").checked,
+      functions_json_str: $("functions-json").value || "",
+    };
+  }
+
+  /* ─── wire up sidebar interactivity ──────────────────────────────── */
+  function wireRange(rangeId, numId) {
+    const r = $(rangeId), n = $(numId);
+    r.addEventListener("input", () => { n.value = r.value; });
+    n.addEventListener("input", () => { r.value = n.value; });
+  }
+  wireRange("temperature", "temperature-num");
+  wireRange("max-tokens", "max-tokens-num");
+  wireRange("top-p", "top-p-num");
+  function wireToggle(checkId, targetRangeId, targetNumId) {
+    const c = $(checkId);
+    const enable = () => {
+      const on = !c.checked;
+      $(targetRangeId).disabled = !on; $(targetNumId).disabled = !on;
+    };
+    c.addEventListener("change", enable); enable();
+  }
+  wireToggle("temperature-use-default", "temperature", "temperature-num");
+  wireToggle("preserved-thinking-use-default", "preserved-thinking", "preserved-thinking");
+  // preserved_thinking checkbox itself is gated on its "use default" too
+  $("preserved-thinking-use-default").addEventListener("change", () => {
+    $("preserved-thinking").disabled = $("preserved-thinking-use-default").checked;
+  });
+  $("preserved-thinking").disabled = $("preserved-thinking-use-default").checked;
+
+  $("validate-fn-btn").addEventListener("click", async () => {
+    const msgEl = $("fn-msg");
+    msgEl.className = "fn-msg"; msgEl.textContent = "Validating...";
+    try {
+      const job = await APP.submit("/validate_functions", { functions_json_str: $("functions-json").value || "" });
+      let res = null;
+      for await (const m of job) { if (m.type === "data") res = m.data; }
+      // res is [ {ok, message, formatted} ] (array of one element)
+      const out = Array.isArray(res) ? res[0] : res;
+      if (out && out.ok) {
+        msgEl.className = "fn-msg ok"; msgEl.textContent = out.message || "OK";
+        if (out.formatted) $("functions-json").value = out.formatted;
+      } else {
+        msgEl.className = "fn-msg err"; msgEl.textContent = (out && out.message) || "Invalid";
+      }
+    } catch (e) {
+      msgEl.className = "fn-msg err"; msgEl.textContent = String(e);
+    }
+  });
+
+  /* ─── the Gradio client connection ───────────────────────────────── */
+  let APP = null;
+  async function connectClient() {
+    if (APP) return APP;
+    APP = await Client.connect(window.location.origin, {
+      events: ["status", "data"],
+    });
+    return APP;
+  }
+
+  /* ─── render a streaming turn ──────────────────────────────────────
+     Each yielded frame is [content, reasoning, tool_calls, history, epoch].
+     We keep one assistant bubble and update its reasoning / content /
+     tool-call region cumulatively as frames arrive. */
+  async function runStream(endpoint, payload, { isToolFollowup = false } = {}) {
+    const app = await connectClient();
+    const bubble = createAssistantBubble();
+
+    const job = app.submit(endpoint, payload);
+    currentJob = job;
+
+    let lastEpoch = null;
+    let firstContent = true;
+    // Latest tool calls seen during streaming. We don't act on them until
+    // the turn completes (see the "stream finished" handoff below).
+    let pendingToolCallsSeen = null;
+    // True iff the last frame was /submit_tool_result's "more results
+    // pending" frame (carries the REMAINING tool-call queue, not new
+    // model output).
+    let needsMoreSeen = false;
+
+    try {
+      for await (const message of job) {
+        if (message.type === "status") {
+          if (message.status === "error") {
+            throw new Error(message.message || "Stream error");
+          }
+          continue;
+        }
+        if (message.type !== "data") continue;
+        const data = message.data;
+        // data is the yielded tuple: [content, reasoning, tool_calls, history, epoch, needs_more?]
+        const content = data[0] || "";
+        const reasoning = data[1] || "";
+        const toolCalls = data[2] || [];
+        const epoch = data[4] != null ? String(data[4]) : null;
+        // ``needsMore`` (6th elem) is only set by /submit_tool_result's
+        // "more results pending" frame — it signals the tool calls in
+        // this frame are the REMAINING queue to re-prompt, not new calls
+        // the model just made.
+        const needsMore = data[5] === true;
+        needsMoreSeen = needsMore;
+
+        // ── staleness: drop frames from an abandoned turn ──
+        if (epoch && currentEpoch !== null && epoch !== currentEpoch && !isToolFollowup) {
+          continue;
+        }
+        if (epoch) lastEpoch = epoch;
+
+        // reasoning
+        if (reasoning) {
+          ensureReasoning(bubble);
+          if (!bubble.reasoningBody.textContent) bubble.reasoningBody.textContent = reasoning;
+          else if (bubble.reasoningBody.textContent !== reasoning) bubble.reasoningBody.textContent = reasoning;
+        }
+        // content
+        if (content) {
+          if (firstContent) { firstContent = false; if (bubble.reasoningEl) markThinkingDone(bubble); }
+          ensureContent(bubble);
+          renderMarkdownInto(bubble.contentEl, content);
+        }
+        // tool calls
+        if (toolCalls && toolCalls.length) {
+          pendingToolCallsSeen = toolCalls;
+          if (!needsMore) {
+            // New tool calls the model just made — render them in the
+            // chat bubble (mirrors the Blocks app's opToolCall).
+            appendToolCall(bubble, toolCalls);
+          }
+          // For the "more results pending" frame (needsMore=true) the
+          // tool calls are the REMAINING queue; we only re-open the
+          // panel (in the deferred handoff below), not a chat bubble.
+        }
+
+        maybeScroll();
+      }
+
+      // ── stream finished ──
+      if (bubble.typing && bubble.typing.parentNode) bubble.typing.remove();
+      if (bubble.reasoningEl && !bubble.thinkingDone) markThinkingDone(bubble);
+      syncOverlay();
+
+      // ── tool-call handoff (deferred until the turn is complete) ──
+      // The model's tool calls arrive in the in-flight history snapshot
+      // on every streaming frame, but we only surface the tool-result
+      // panel once the turn has actually finished — mirroring the
+      // Blocks app, which renders the tool-call block on assistant_end.
+      // This applies to both /chat (first request for tools) and
+      // /submit_tool_result (the follow-up requested yet more tools, or
+      // the "more results pending" frame carrying the remaining calls).
+      if (pendingToolCallsSeen && pendingToolCallsSeen.length) {
+        pendingToolCalls = pendingToolCallsSeen.slice();
+        // A brand-new tool round (from /chat) resets the counters; a
+        // "more results pending" frame (needsMore) continues the same
+        // round, so we keep the running total + submitted count.
+        if (!needsMoreSeen) {
+          toolRoundTotal = pendingToolCalls.length + toolResultsSubmitted;
+        }
+        showToolPanel(pendingToolCalls);
+        // The "more results pending" frame carries no content/reasoning
+        // and the tool calls go to the panel, not the bubble — so the
+        // bubble we created is empty. Drop it to avoid a stray typing
+        // indicator.
+        if (needsMoreSeen && !bubble.contentEl && !bubble.reasoningEl
+            && bubble.row.parentNode) {
+          bubble.row.parentNode.removeChild(bubble.row);
+        }
+      }
+      return { toolCalls: pendingToolCalls, epoch: lastEpoch };
+    } catch (err) {
+      if (bubble.typing && bubble.typing.parentNode) bubble.typing.remove();
+      if (!bubble.contentEl && !bubble.reasoningEl) {
+        // nothing was rendered — show the error inline
+        ensureContent(bubble);
+        bubble.contentEl.innerHTML = '<p style="color:var(--tc-red)">⚠ ' +
+          escapeHtml(I18N.request_failed) + "</p>";
+      }
+      throw err;
+    }
+  }
+
+  /* ─── tool-call input panel ──────────────────────────────────────── */
+  function showToolPanel(toolCalls) {
+    const tc = toolCalls[0];
+    const fn = tc.function || {};
+    let args = fn.arguments || "";
+    try { args = JSON.stringify(JSON.parse(args), null, 2); } catch (e) {}
+    const total = toolRoundTotal || toolCalls.length;
+    const idx = toolResultsSubmitted + 1;
+    const header = (I18N["tool.call_header"] || "Function call ({i}/{n})")
+      .replace("{i}", idx).replace("{n}", total);
+    $("tool-header").textContent = header;
+    renderMarkdownInto(toolMarkdown, TOOL_CALL_LABEL + ": **" + (fn.name || "") + "**\n```json\n" + args + "\n```");
+    toolArea.classList.add("visible");
+    toolResultInput.value = "";
+    setTimeout(() => toolResultInput.focus(), 50);
+  }
+  function hideToolPanel() { toolArea.classList.remove("visible"); }
+
+  async function submitToolResult() {
+    const resultText = toolResultInput.value;
+    if (!resultText) { toolResultInput.focus(); return; }
+    hideToolPanel();
+    setStreaming(true);
+    toolResultsSubmitted += 1;
+    const params = gatherParams();
+    try {
+      await runStream("/submit_tool_result", {
+        result_text: resultText,
+        session_id: SESSION_ID,
+        system_prompt: params.system_prompt,
+        think_level: params.think_level,
+        temperature: params.temperature,
+        max_tokens: params.max_tokens,
+        top_p: params.top_p,
+        preserved_thinking: params.preserved_thinking,
+        functions_json_str: params.functions_json_str,
+      }, { isToolFollowup: true });
+    } catch (e) {
+      console.error(e); toast(I18N.request_failed, true);
+    } finally {
+      setStreaming(false); maybeScroll();
+    }
+  }
+  toolSubmitBtn.addEventListener("click", submitToolResult);
+  toolResultInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submitToolResult(); }
+  });
+
+  /* ─── send a message ──────────────────────────────────────────────── */
+  async function sendMessage() {
+    const text = msgInput.value.trim();
+    if (!text) { toast(I18N.empty_msg); return; }
+    if (isStreaming) { toast(I18N.model_busy); return; }
+
+    addUserBubble(text);
+    msgInput.value = ""; msgInput.style.height = "auto";
+    syncOverlay();
+    setStreaming(true);
+    follow = true;
+    // A fresh user turn starts a new (potential) tool-call round.
+    toolResultsSubmitted = 0;
+    toolRoundTotal = 0;
+
+    const params = gatherParams();
+    currentEpoch = null; // adopt the first epoch we see
+    try {
+      const result = await runStream("/chat", {
+        message: text,
+        session_id: SESSION_ID,
+        system_prompt: params.system_prompt,
+        think_level: params.think_level,
+        temperature: params.temperature,
+        max_tokens: params.max_tokens,
+        top_p: params.top_p,
+        preserved_thinking: params.preserved_thinking,
+        functions_json_str: params.functions_json_str,
+      });
+      if (result && result.epoch) currentEpoch = result.epoch;
+    } catch (e) {
+      console.error(e); toast(I18N.request_failed, true);
+    } finally {
+      setStreaming(false); maybeScroll();
+    }
+  }
+  sendBtn.addEventListener("click", sendMessage);
+  msgInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
+      e.preventDefault(); sendMessage();
+    }
+  });
+  msgInput.addEventListener("input", () => {
+    msgInput.style.height = "auto";
+    msgInput.style.height = Math.min(msgInput.scrollHeight, 200) + "px";
+  });
+
+  /* ─── new chat ────────────────────────────────────────────────────── */
+  newChatBtn.addEventListener("click", async () => {
+    if (isStreaming) {
+      // cancel by stopping the iterator; the server's epoch guard drops
+      // any late frames.
+      if (currentJob && currentJob.cancel) { try { currentJob.cancel(); } catch (e) {} }
+    }
+    try {
+      const app = await connectClient();
+      const job = await app.submit("/new_chat", { session_id: SESSION_ID });
+      let res = null;
+      for await (const m of job) { if (m.type === "data") res = m.data; }
+      const out = Array.isArray(res) ? res[0] : res;
+      if (out && out.epoch) currentEpoch = out.epoch;
+    } catch (e) { console.warn("[hy] new_chat:", e); }
+    chatEl.innerHTML = "";
+    pendingToolCalls = [];
+    toolResultsSubmitted = 0;
+    toolRoundTotal = 0;
+    hideToolPanel();
+    setStreaming(false);
+    syncOverlay();
+    toast(I18N.new_chat);
+  });
+
+  /* ─── boot ────────────────────────────────────────────────────────── */
+  async function boot() {
+    // Load i18n strings + the curated example prompts from the /config
+    // endpoint. Everything goes through the gradio client for a uniform
+    // transport (one POST → SSE stream of yielded frames).
+    try {
+      const app = await connectClient();
+      const job = await app.submit("/config", {});
+      let res = null;
+      for await (const m of job) { if (m.type === "data") res = m.data; }
+      const cfg = Array.isArray(res) ? res[0] : res;
+      if (cfg) {
+        if (cfg.i18n) applyI18n(cfg.i18n);
+        if (Array.isArray(cfg.examples)) { EXAMPLES = cfg.examples; buildExamples(); }
+      }
+    } catch (e) {
+      console.warn("[hy] config load failed, using defaults:", e);
+      applyI18n({});
+    }
+    syncOverlay();
+  }
+
+  function buildExamples() {
+    const grid = $("examples-grid");
+    grid.innerHTML = "";
+    EXAMPLES.forEach((text) => {
+      const btn = document.createElement("div"); btn.className = "example-btn";
+      const inner = document.createElement("span"); inner.className = "example-btn-text";
+      const label = String(text).replace(/\s+/g, " ").trim();
+      inner.textContent = label.length > 200 ? label.slice(0, 200).trimEnd() + "…" : label;
+      btn.title = text; btn.appendChild(inner);
+      btn.addEventListener("click", () => {
+        msgInput.value = text;
+        msgInput.dispatchEvent(new Event("input"));
+        sendMessage();
+      });
+      grid.appendChild(btn);
+    });
+  }
+
+  // initial defaults while config loads
+  applyI18n({});
+  boot();
+})();
+</script>
+</body>
+</html>