gradio server

app.py

@@ -3,6 +3,7 @@
 from __future__ import annotations
 
 import html
+import json
 import logging
 import os
 import re
@@ -15,7 +16,8 @@ from dataclasses import dataclass
 from pathlib import Path
 from typing import Any
 
-import gradio as gr
+from gradio import Server
+from fastapi.responses import HTMLResponse, FileResponse
 from cohere import ClientV2
 from cohere.core.api_error import ApiError
 
@@ -345,8 +347,8 @@ def _targeted_prompt(
         "If the user asks a coding question or wants reasoning that does not require running code, "
         "answer directly without a fenced block. If they ask to generate, revise, or fix runnable "
         "web code, return one ```html fenced block only. The code is rendered inside a sandboxed "
-        "iframe that spans the full width of the preview panel and is about 680px tall, so design "
-        "the page to fill that iframe responsively: html/body at margin:0 and 100% width/height, "
+        "iframe that fills the preview panel, so design the page to fill that iframe responsively: "
+        "html/body at margin:0 and 100% width/height, "
         "avoid fixed widths larger than the iframe, and resize any <canvas> to its container "
         "(including on window resize) so the whole app is visible without horizontal scrolling."
         f"{context_block}\n\n"
@@ -560,123 +562,7 @@ def build_iframe(code: str, fence_lang: str | None = None) -> str:
     )
 
 
-TAB_PREVIEW = "preview"
-TAB_CONSOLE = "console"
-TAB_CODE = "code"
-
-
-def _status_badge(text: str, state: str = "idle") -> str:
-    spinner = '<span class="status-spinner"></span>' if state == "working" else '<span class="status-dot"></span>'
-    return (
-        f'<div class="status-badge status-{state}">{spinner}'
-        f"<span>{html.escape(text)}</span></div>"
-    )
-
-
-def _preview_placeholder(message: str = "Run code to see the result here.") -> str:
-    return (
-        '<div class="preview-placeholder">'
-        '<div class="pp-emoji">🖼️</div>'
-        f"<strong>{html.escape(message)}</strong>"
-        "<span>A matplotlib figure or a live web preview will appear in this panel.</span>"
-        "</div>"
-    )
-
-
-def _write_download(code: str, language: str) -> str | None:
-    if not code:
-        return None
-    ext = "py" if language == "python" else "html"
-    try:
-        directory = tempfile.mkdtemp(prefix="coding_model_dl_")
-        path = Path(directory) / f"generated.{ext}"
-        path.write_text(code, encoding="utf-8")
-        return str(path)
-    except Exception:
-        logger.warning("Could not write downloadable snippet", exc_info=True)
-        return None
-
-
-def _display_kwargs(execution_context: dict[str, Any] | None) -> dict[str, Any]:
-    """Map the persisted execution context onto concrete component updates."""
-
-    base = {
-        "show_image": False,
-        "image": None,
-        "show_web": False,
-        "web_html": "",
-        "show_placeholder": True,
-        "placeholder_msg": "Run code to see the result here.",
-        "stdout": "",
-        "stderr": "",
-        "code": "",
-        "code_language": "python",
-        "download_path": None,
-        "suggested_tab": None,
-    }
-    if not execution_context or not execution_context.get("code"):
-        return base
-
-    target = str(execution_context.get("target") or "")
-    code = str(execution_context.get("code") or "")
-    fence_lang = str(execution_context.get("fence_lang") or target)
-    download = execution_context.get("download_path")
-
-    if target == "web":
-        base.update(
-            show_web=True,
-            web_html=build_iframe(code, fence_lang),
-            show_placeholder=False,
-            code=code,
-            code_language="html",
-            download_path=download,
-            suggested_tab=TAB_PREVIEW,
-        )
-        return base
-
-    image = execution_context.get("image_path")
-    base.update(
-        show_image=bool(image),
-        image=image,
-        show_placeholder=not bool(image),
-        placeholder_msg="No figure produced — open the Console tab for program output.",
-        stdout=str(execution_context.get("stdout") or ""),
-        stderr=str(execution_context.get("stderr") or ""),
-        code=code,
-        code_language="python",
-        download_path=download,
-        suggested_tab=TAB_PREVIEW if image else TAB_CONSOLE,
-    )
-    return base
-
-
-def _output_state(
-    history: list[dict[str, str]],
-    prompt_value: str,
-    status_text: str,
-    status_state: str,
-    execution_context: dict[str, Any] | None,
-    *,
-    selected_tab: str | None = None,
-    display: dict[str, Any] | None = None,
-) -> tuple[Any, ...]:
-    data = display if display is not None else _display_kwargs(execution_context)
-    tab_update = gr.update(selected=selected_tab) if selected_tab else gr.update()
-    return (
-        history,
-        prompt_value,
-        _status_badge(status_text, status_state),
-        tab_update,
-        gr.update(value=_preview_placeholder(data["placeholder_msg"]), visible=data["show_placeholder"]),
-        gr.update(value=data["image"], visible=data["show_image"]),
-        gr.update(value=data["web_html"], visible=data["show_web"]),
-        gr.update(visible=data["show_web"]),
-        data["stdout"],
-        data["stderr"],
-        gr.update(value=data["code"], language=data["code_language"]),
-        gr.update(value=data["download_path"], visible=bool(data["download_path"])),
-        execution_context or {},
-    )
+# ---------- gradio.Server application ----------
 
 
 def _run_extracted_code(
@@ -719,509 +605,125 @@ def _updated_execution_context(
     }
 
 
-def handle_submit(
-    prompt: str,
-    target_language: str,
-    history: list[dict[str, str]] | None,
-    execution_context: dict[str, Any] | None,
-) -> Iterator[tuple[Any, ...]]:
-    history = list(history or [])
-    execution_context = execution_context or {}
+# In-memory registry of temp files to serve (images, downloads)
+_served_files: dict[str, str] = {}
+
+app = Server()
+
+
+@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:
+        content = f.read()
+    # Inject runtime config
+    config = json.dumps({
+        "api_key_configured": API_KEY_CONFIGURED,
+        "app_title": APP_TITLE,
+        "model_id": MODEL_ID,
+        "model_url": MODEL_URL,
+        "opencode_url": OPENCODE_URL,
+        "examples": [{"label": label, "prompt": prompt, "target": target} for label, prompt, target in EXAMPLE_PROMPTS],
+    })
+    content = content.replace("__RUNTIME_CONFIG__", config)
+    return content
+
+
+@app.get("/images/{filename}")
+async def serve_image(filename: str):
+    path = _served_files.get(f"img:{filename}")
+    if path and os.path.exists(path):
+        return FileResponse(path, media_type="image/png")
+    return HTMLResponse("Not found", status_code=404)
+
+
+@app.get("/download/{filename}")
+async def serve_download(filename: str):
+    path = _served_files.get(f"dl:{filename}")
+    if path and os.path.exists(path):
+        return FileResponse(path, filename=filename, media_type="application/octet-stream")
+    return HTMLResponse("Not found", status_code=404)
+
+
+@app.api(name="chat", concurrency_limit=2)
+def handle_chat(prompt: str, target_language: str, history_json: str, exec_context_json: str) -> str:
+    """Stream chat responses with code execution. Yields JSON strings."""
+    history = json.loads(history_json) if history_json else []
+    execution_context = json.loads(exec_context_json) if exec_context_json else {}
+
     prompt = (prompt or "").strip()
     if not prompt:
-        yield _output_state(history, "", "Enter a prompt to get started.", "info", execution_context)
+        yield json.dumps({"type": "error", "status_text": "Enter a prompt to get started.", "status_state": "info", "history": history, "execution": execution_context})
         return
 
-    generation_history = history + [
+    # Add user message and placeholder assistant message
+    history = list(history) + [
         {"role": "user", "content": prompt},
         {"role": "assistant", "content": ""},
     ]
-    assistant_index = len(generation_history) - 1
-    yield _output_state(generation_history, "", "Thinking…", "working", execution_context)
+    yield json.dumps({"type": "status", "status_text": "Thinking…", "status_state": "working", "history": history, "execution": execution_context})
 
-    cohere_history = history + [
-        {"role": "user", "content": _targeted_prompt(prompt, target_language, execution_context)}
-    ]
+    # Build messages for Cohere — use targeted prompt
+    cohere_history = list(history[:-1])  # everything except empty assistant
+    # Replace the last user message with the targeted version
+    cohere_history[-1] = {"role": "user", "content": _targeted_prompt(prompt, target_language, execution_context)}
     messages = _chat_history_to_messages(cohere_history)
 
     final_response = ""
     for partial in call_model(messages):
         final_response = partial
-        generation_history[assistant_index]["content"] = partial
-        yield _output_state(generation_history, "", "Generating…", "working", execution_context)
+        history[-1]["content"] = partial
+        yield json.dumps({"type": "streaming", "status_text": "Generating…", "status_state": "working", "history": history, "execution": execution_context})
 
     if not final_response:
-        generation_history[assistant_index]["content"] = "The model did not return a response."
-        yield _output_state(generation_history, "", "No model response.", "error", execution_context)
+        history[-1]["content"] = "The model did not return a response."
+        yield json.dumps({"type": "error", "status_text": "No model response.", "status_state": "error", "history": history, "execution": execution_context})
         return
 
     code, fence_lang = extract_code(final_response)
     target = _normalize_language(target_language, fence_lang)
+
     if not code:
-        yield _output_state(generation_history, "", "Answered without running code.", "info", execution_context)
+        yield json.dumps({"type": "complete", "status_text": "Answered without running code.", "status_state": "info", "history": history, "execution": execution_context})
         return
 
-    yield _output_state(generation_history, "", "Running…", "working", execution_context)
-
-    stdout, stderr, image, status_text, status_state = _run_extracted_code(code, target)
-    download = _write_download(code, "python" if target == "python" else "html")
-    execution_context = _updated_execution_context(
-        code=code,
-        target=target,
-        fence_lang=fence_lang,
-        stdout=stdout,
-        stderr=stderr,
-        image_path=image,
-        status=status_text,
-        download_path=download,
-    )
-    data = _display_kwargs(execution_context)
-    yield _output_state(
-        generation_history,
-        "",
-        status_text,
-        status_state,
-        execution_context,
-        selected_tab=data["suggested_tab"],
-        display=data,
-    )
-
-
-def _make_example_runner(prompt: str, target: str):
-    def runner(*_ignored: Any) -> Iterator[tuple[Any, ...]]:
-        # Starters always begin a fresh conversation rather than appending to the
-        # current thread, so prior history and execution context are discarded.
-        yield from handle_submit(prompt, target, [], {})
-
-    return runner
-
-
-def start_new_conversation() -> tuple[Any, ...]:
-    return _output_state(
-        [],
-        "",
-        "New conversation — ask anything about code.",
-        "idle",
-        {},
-        selected_tab=TAB_PREVIEW,
-    )
-
-
-def _cancelled_status() -> str:
-    return _status_badge("Stopped.", "info")
-
-
-APP_THEME = gr.themes.Soft(
-    primary_hue="indigo",
-    secondary_hue="violet",
-    neutral_hue="slate",
-    radius_size=gr.themes.sizes.radius_lg,
-    font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
-    font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "ui-monospace", "SFMono-Regular", "monospace"],
-).set(
-    body_background_fill="*neutral_50",
-    body_background_fill_dark="*neutral_950",
-    block_shadow="0 1px 2px rgba(16,24,40,.04), 0 10px 28px -18px rgba(16,24,40,.22)",
-    button_primary_shadow="0 8px 22px -10px rgba(99,102,241,.7)",
-)
-
-CUSTOM_CSS = """
-.gradio-container { max-width: 1720px !important; margin: 0 auto !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
-
-/* ---------- Hero ---------- */
-.hero { padding: 1.2rem 0 0.2rem; }
-.hero-row { display: flex; align-items: center; gap: 0.95rem; flex-wrap: wrap; }
-.hero-mark {
-  width: 54px; height: 54px; border-radius: 16px; flex: none;
-  background: linear-gradient(135deg, #3b82f6, #6366f1 45%, #8b5cf6);
-  display: flex; align-items: center; justify-content: center;
-  font-size: 1.75rem; box-shadow: 0 10px 26px -10px rgba(99,102,241,.7);
-}
-.hero h1 {
-  font-size: 1.95rem; font-weight: 800; line-height: 1.1; margin: 0;
-  letter-spacing: -0.025em;
-  background: linear-gradient(110deg, #2563eb, #7c3aed 55%, #9333ea);
-  -webkit-background-clip: text; background-clip: text; color: transparent;
-}
-.hero .subtitle { margin: 0.28rem 0 0; color: var(--body-text-color-subdued); font-size: 1.02rem; }
-.hero-tip {
-  margin: 0.7rem 0 0; padding: 0.5rem 0.8rem; font-size: 0.86rem; line-height: 1.45;
-  display: flex; align-items: baseline; gap: 0.45rem;
-  border: 1px solid var(--border-color-primary); border-left: 3px solid #7c3aed;
-  border-radius: 12px; background: var(--block-background-fill);
-  color: var(--body-text-color-subdued);
-}
-.hero-tip a { color: #6d28d9; font-weight: 600; text-decoration: none; white-space: nowrap; }
-.hero-tip a:hover { text-decoration: underline; }
-.dark .hero-tip a { color: #c4b5fd; }
-.hero-spacer { flex: 1 1 auto; min-width: 1rem; }
-.hero-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
-.brand-pill {
-  display: inline-flex; align-items: center; gap: 0.4rem;
-  font-size: 0.78rem; font-weight: 600; padding: 0.34rem 0.7rem;
-  border-radius: 999px; border: 1px solid var(--border-color-primary);
-  background: var(--block-background-fill); color: var(--body-text-color-subdued);
-  white-space: nowrap; text-decoration: none;
-  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
-}
-a.brand-pill:hover {
-  transform: translateY(-1px);
-  border-color: #8b5cf6; color: var(--body-text-color);
-  box-shadow: 0 8px 18px -12px rgba(124,58,237,.75);
-}
-.brand-pill .pill-ext { opacity: 0.55; font-size: 0.72rem; }
-.brand-pill.accent {
-  border-color: transparent; color: #fff;
-  background: linear-gradient(110deg, #4f46e5, #7c3aed);
-}
-
-/* ---------- Config alert ---------- */
-.config-alert {
-  border: 1px solid #f4c7c7; background: #fdeeee; color: #8a1f1f;
-  border-radius: 14px; padding: 0.75rem 0.95rem; font-size: 0.9rem; margin: 0.55rem 0 0;
-  line-height: 1.45;
-}
-.config-alert code { background: rgba(0,0,0,.07); padding: 0.05rem 0.32rem; border-radius: 6px; }
-.dark .config-alert { background: rgba(180,35,24,.13); border-color: rgba(180,35,24,.42); color: #f3b4b4; }
-.dark .config-alert code { background: rgba(255,255,255,.1); }
-
-/* ---------- Panels ---------- */
-.panel-card {
-  border: 1px solid var(--border-color-primary);
-  border-radius: 20px; padding: 1.05rem 1.1rem 1.15rem;
-  background: var(--block-background-fill);
-}
-.panel-head {
-  display: flex; align-items: center; justify-content: space-between;
-  gap: 0.6rem; margin-bottom: 0.7rem; min-height: 34px;
-}
-.panel-title { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 0.45rem; margin: 0; }
-.workbench-status { display: flex; justify-content: flex-end; }
-
-/* ---------- Status badge ---------- */
-.status-badge {
-  display: inline-flex; align-items: center; gap: 0.5rem;
-  font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.8rem;
-  border-radius: 999px; border: 1px solid var(--border-color-primary);
-  background: var(--block-background-fill); white-space: nowrap;
-}
-.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; flex: none; }
-.status-info .status-dot { background: #3b82f6; }
-.status-success .status-dot { background: #22c55e; }
-.status-error .status-dot { background: #ef4444; }
-.status-error { border-color: rgba(239,68,68,.45); }
-.status-success { border-color: rgba(34,197,94,.45); }
-.status-working { border-color: rgba(99,102,241,.5); color: var(--body-text-color); }
-.status-spinner {
-  width: 12px; height: 12px; border-radius: 50%; flex: none;
-  border: 2px solid rgba(99,102,241,.3); border-top-color: #6366f1;
-  animation: spin 0.7s linear infinite;
-}
-@keyframes spin { to { transform: rotate(360deg); } }
-
-/* ---------- Examples ---------- */
-.examples-label { font-size: 0.78rem; font-weight: 600; color: var(--body-text-color-subdued);
-  text-transform: uppercase; letter-spacing: 0.05em; margin: 0.45rem 0 0.15rem; }
-.examples-wrap { flex-wrap: wrap !important; gap: 0.5rem !important; }
-button.example-chip {
-  flex: 0 0 auto !important;
-  border-radius: 999px !important;
-  font-size: 0.83rem !important; font-weight: 600 !important;
-  padding: 0.45rem 0.95rem !important;
-  white-space: nowrap !important;
-  width: auto !important; min-width: 0 !important;
-  background: var(--block-background-fill) !important;
-  border: 1px solid var(--border-color-primary) !important;
-  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
-}
-button.example-chip:hover {
-  transform: translateY(-1px);
-  border-color: #8b5cf6 !important;
-  box-shadow: 0 8px 18px -12px rgba(124,58,237,.75);
-}
-
-/* ---------- Inputs ---------- */
-.send-btn button { font-weight: 700 !important; }
-.input-hint { font-size: 0.78rem; color: var(--body-text-color-subdued); margin: 0.2rem 0 0; }
-
-/* ---------- Target toggle ---------- */
-.target-toggle { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
-
-/* ---------- Console ---------- */
-.console-box textarea {
-  font-family: var(--font-mono) !important;
-  font-size: 0.82rem !important; line-height: 1.5 !important;
-}
-.stderr-box textarea { color: #b42318 !important; }
-.dark .stderr-box textarea { color: #fca5a5 !important; }
-
-/* ---------- Preview ---------- */
-.preview-placeholder {
-  min-height: 560px;
-  border: 1.5px dashed var(--border-color-primary);
-  border-radius: 16px;
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  gap: 0.45rem; color: var(--body-text-color-subdued); text-align: center; padding: 2rem;
-}
-.preview-placeholder .pp-emoji { font-size: 2.3rem; opacity: 0.85; }
-.preview-placeholder strong { font-size: 1.02rem; color: var(--body-text-color); }
-.web-frame { box-shadow: 0 8px 30px -18px rgba(16,24,40,.5); }
-.web-frame:fullscreen { border-radius: 0 !important; box-shadow: none !important; min-height: 100vh !important; background: #fff; }
-.preview-toolbar { justify-content: flex-end !important; margin-bottom: 0.5rem; }
-.fullscreen-btn button {
-  border-radius: 999px !important;
-  font-weight: 600 !important;
-  white-space: nowrap !important;
-}
-
-/* ---------- Footer note ---------- */
-.safety-note {
-  font-size: 0.78rem; color: var(--body-text-color-subdued);
-  margin: 0.7rem 0 0; line-height: 1.45; display: flex; align-items: center; gap: 0.4rem;
-}
-
-/* ---------- Responsive ---------- */
-@media (max-width: 1024px) {
-  .hero h1 { font-size: 1.6rem; }
-}
-"""
-
-
-def _configuration_banner_html() -> str:
-    messages: list[str] = []
-    if not API_KEY_CONFIGURED:
-        messages.append("Set <code>COHERE_API_KEY</code> as a Hugging Face Space secret.")
-    if not messages:
-        return ""
-    items = " ".join(messages)
-    return (
-        '<div class="config-alert"><strong>⚙️ Configuration required.</strong> '
-        f"{items} Generation stays disabled until this is done.</div>"
-    )
-
-
-def _hero_html() -> str:
-    model_pill = (
-        f'<a class="brand-pill" href="{html.escape(MODEL_URL, quote=True)}" '
-        'target="_blank" rel="noopener noreferrer" '
-        f'title="View {html.escape(MODEL_ID)} on Hugging Face">'
-        f'🧠 {html.escape(MODEL_ID)} <span class="pill-ext">↗</span></a>'
-    )
-    opencode_url = html.escape(OPENCODE_URL, quote=True)
-    return f"""
-<section class="hero">
-  <div class="hero-row">
-    <div class="hero-mark">💻</div>
-    <div>
-      <h1>{html.escape(APP_TITLE)}</h1>
-      <p class="subtitle">Chat with a coding model. Run Python or Web code.</p>
-    </div>
-    <div class="hero-spacer"></div>
-    <div class="hero-pills">
-      {model_pill}
-    </div>
-  </div>
-  <p class="hero-tip">⌨️ <span><strong>North-Mini-Code-1.0</strong> is built for agentic coding and works best
-  in your terminal with <a href="{opencode_url}" target="_blank" rel="noopener noreferrer">OpenCode ↗</a>.
-  This Space is a browser playground for trying the model.</span></p>
-</section>
-{_configuration_banner_html()}
-"""
-
-
-def build_demo() -> gr.Blocks:
-    with gr.Blocks(title=APP_TITLE, fill_height=True) as demo:
-        gr.HTML(_hero_html())
-
-        execution_state = gr.State({})
-
-        with gr.Row(equal_height=False):
-            # ----- Left: conversation -----
-            with gr.Column(scale=6, min_width=420, elem_classes=["panel-card"]):
-                with gr.Row(elem_classes=["panel-head"]):
-                    gr.HTML('<div class="panel-title">💬 Conversation</div>')
-                    new_conversation_btn = gr.Button(
-                        "＋ New chat", variant="secondary", size="sm", scale=0, min_width=120
-                    )
-
-                chatbot = gr.Chatbot(
-                    label=None,
-                    show_label=False,
-                    height=440,
-                    layout="bubble",
-                    reasoning_tags=[("<think>", "</think>")],
-                    placeholder=(
-                        "### 👋 Ask me to write code\n"
-                        "I can build runnable **Python** scripts and self-contained **web** demos.\n\n"
-                        "Pick a starter below, or describe what you want to build."
-                    ),
-                )
-
-                gr.HTML('<p class="examples-label">Run generated code as</p>')
-                target_language = gr.Radio(
-                    choices=["Python", "Web"],
-                    value="Python",
-                    show_label=False,
-                    container=False,
-                    interactive=True,
-                    elem_classes=["target-toggle"],
-                )
-
-                prompt = gr.Textbox(
-                    label=None,
-                    show_label=False,
-                    placeholder="Ask a coding question, request code, or iterate on the previous result…",
-                    lines=3,
-                    max_lines=10,
-                    submit_btn=False,
-                    autofocus=True,
-                )
-                with gr.Row():
-                    submit_btn = gr.Button("Send ➤", variant="primary", scale=4, elem_classes=["send-btn"])
-                    stop_btn = gr.Button("Stop", variant="stop", scale=1, min_width=90)
-                gr.HTML('<p class="input-hint">Press <strong>Shift+Enter</strong> to send · <strong>Enter</strong> for a new line</p>')
-
-                gr.HTML('<p class="examples-label">Try a starter</p>')
-                example_buttons: list[tuple[gr.Button, str, str]] = []
-                with gr.Row(elem_classes=["examples-wrap"]):
-                    for label, ex_prompt, ex_target in EXAMPLE_PROMPTS:
-                        btn = gr.Button(label, size="sm", scale=0, elem_classes=["example-chip"])
-                        example_buttons.append((btn, ex_prompt, ex_target))
-
-            # ----- Right: workbench -----
-            with gr.Column(scale=6, min_width=420, elem_classes=["panel-card"]):
-                with gr.Row(elem_classes=["panel-head"]):
-                    gr.HTML('<div class="panel-title">🛠️ Workbench</div>')
-                    status = gr.HTML(_status_badge("Idle.", "idle"), elem_classes=["workbench-status"])
-
-                with gr.Tabs() as result_tabs:
-                    with gr.Tab("Preview", id=TAB_PREVIEW):
-                        preview_placeholder = gr.HTML(_preview_placeholder())
-                        py_image = gr.Image(
-                            label="Matplotlib figure",
-                            type="filepath",
-                            visible=False,
-                            interactive=False,
-                            show_label=False,
-                        )
-                        with gr.Row(elem_classes=["preview-toolbar"], visible=False) as preview_toolbar:
-                            fullscreen_btn = gr.Button(
-                                "⤢ Fullscreen",
-                                size="sm",
-                                scale=0,
-                                min_width=120,
-                                elem_classes=["fullscreen-btn"],
-                            )
-                        web_preview = gr.HTML(value="", visible=False, min_height=680)
-
-                    with gr.Tab("Console", id=TAB_CONSOLE):
-                        py_stdout = gr.Textbox(
-                            label="Program output (stdout)",
-                            lines=11,
-                            interactive=False,
-                            elem_classes=["console-box"],
-                            placeholder="Program output will appear here after a Python run.",
-                        )
-                        py_stderr = gr.Textbox(
-                            label="Errors / stderr",
-                            lines=7,
-                            interactive=False,
-                            elem_classes=["console-box", "stderr-box"],
-                            placeholder="Tracebacks and error messages will appear here.",
-                        )
-
-                    with gr.Tab("Code", id=TAB_CODE):
-                        code_view = gr.Code(
-                            label="Generated source",
-                            language="python",
-                            lines=20,
-                            interactive=False,
-                            wrap_lines=True,
-                        )
-                        download_btn = gr.DownloadButton(
-                            "⬇ Download snippet", size="sm", visible=False
-                        )
-
-        outputs = [
-            chatbot,
-            prompt,
-            status,
-            result_tabs,
-            preview_placeholder,
-            py_image,
-            web_preview,
-            preview_toolbar,
-            py_stdout,
-            py_stderr,
-            code_view,
-            download_btn,
-            execution_state,
-        ]
-
-        new_conversation_btn.click(
-            fn=start_new_conversation,
-            inputs=[],
-            outputs=outputs,
-            show_progress="hidden",
-        )
-
-        submit_event = submit_btn.click(
-            fn=handle_submit,
-            inputs=[prompt, target_language, chatbot, execution_state],
-            outputs=outputs,
-            show_progress="minimal",
-        )
-        prompt_event = prompt.submit(
-            fn=handle_submit,
-            inputs=[prompt, target_language, chatbot, execution_state],
-            outputs=outputs,
-            show_progress="minimal",
-        )
-
-        cancellable_events = [submit_event, prompt_event]
-        for btn, ex_prompt, ex_target in example_buttons:
-            set_target = btn.click(
-                fn=lambda t=ex_target: gr.update(value=t),
-                inputs=[],
-                outputs=[target_language],
-                show_progress="hidden",
-            )
-            run_event = set_target.then(
-                fn=_make_example_runner(ex_prompt, ex_target),
-                inputs=[chatbot, execution_state],
-                outputs=outputs,
-                show_progress="minimal",
-            )
-            cancellable_events.append(run_event)
-
-        stop_btn.click(
-            fn=_cancelled_status,
-            inputs=[],
-            outputs=[status],
-            cancels=cancellable_events,
-            show_progress="hidden",
-        )
-
-        # Expand the sandboxed web preview to fill the screen so users can actually
-        # interact with apps larger than the side panel. Runs purely client-side and
-        # keeps the iframe's sandbox attributes intact.
-        fullscreen_btn.click(
-            fn=None,
-            inputs=None,
-            outputs=None,
-            js=(
-                "() => { const f = document.querySelector('.web-frame'); "
-                "if (f) { const r = f.requestFullscreen || f.webkitRequestFullscreen; "
-                "if (r) { try { Promise.resolve(r.call(f)).catch(() => {}); } catch (e) {} } } }"
-            ),
-        )
-
-    return demo
-
+    yield json.dumps({"type": "status", "status_text": "Running…", "status_state": "working", "history": history, "execution": execution_context})
+
+    stdout, stderr, image_path, status_text, status_state = _run_extracted_code(code, target)
+
+    # Register image for serving
+    image_url = None
+    if image_path:
+        filename = os.path.basename(image_path)
+        _served_files[f"img:{filename}"] = image_path
+        image_url = f"/images/{filename}"
+
+    # Register code for download
+    download_url = None
+    if code:
+        ext = "py" if target == "python" else "html"
+        dl_filename = f"generated.{ext}"
+        dl_dir = tempfile.mkdtemp(prefix="coding_model_dl_")
+        dl_path = os.path.join(dl_dir, dl_filename)
+        Path(dl_path).write_text(code, encoding="utf-8")
+        _served_files[f"dl:{dl_filename}"] = dl_path
+        download_url = f"/download/{dl_filename}"
+
+    execution_context = {
+        "code": code,
+        "target": target,
+        "fence_lang": fence_lang or target,
+        "stdout": stdout,
+        "stderr": stderr,
+        "image_url": image_url,
+        "image_path": image_path,
+        "status": status_text,
+        "language": "python" if target == "python" else "html",
+        "suggested_tab": "preview" if (image_path or target == "web") else "console",
+        "download_url": download_url,
+    }
 
-demo = build_demo()
-demo.queue(default_concurrency_limit=2)
+    yield json.dumps({"type": "complete", "status_text": status_text, "status_state": status_state, "history": history, "execution": execution_context})
 
 
-if __name__ == "__main__":
-    demo.launch(theme=APP_THEME, css=CUSTOM_CSS)
+app.launch(show_error=True)

index.html

@@ -0,0 +1,1830 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>North Mini Code 1.0</title>
+<meta name="description" content="Terminal-style coding assistant powered by North Mini Code 1.0">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+<style>
+/* ═══════════════════════════════════════════════════════
+   RESET & BASE
+   ═══════════════════════════════════════════════════════ */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg-deep: #0a0e14;
+  --bg-panel: #0d1117;
+  --bg-code: #161b22;
+  --border: #1e2a3a;
+  --border-focus: #2d4a6a;
+  --green: #39ff14;
+  --green-dim: #1a7a0a;
+  --cyan: #00d4ff;
+  --amber: #ffb300;
+  --gray-light: #e0e0e0;
+  --gray-mid: #8b949e;
+  --gray-dim: #484f58;
+  --red: #ff5555;
+  --success: #50fa7b;
+  --code-text: #f8f8f2;
+  --glow-green: 0 0 8px rgba(57,255,20,0.3);
+  --glow-cyan: 0 0 8px rgba(0,212,255,0.3);
+  --glow-amber: 0 0 8px rgba(255,179,0,0.2);
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+  --radius: 4px;
+  --transition: 0.2s ease;
+}
+
+html, body {
+  height: 100%;
+  background: var(--bg-deep);
+  color: var(--gray-light);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.6;
+  overflow: hidden;
+}
+
+/* CRT scanline overlay */
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.03) 2px,
+    rgba(0, 0, 0, 0.03) 4px
+  );
+}
+
+::selection {
+  background: rgba(57, 255, 20, 0.25);
+  color: #fff;
+}
+
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--gray-dim); }
+
+a { color: var(--cyan); text-decoration: none; }
+a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
+
+/* ═══════════════════════════════════════════════════════
+   APP SHELL
+   ═══════════════════════════════════════════════════════ */
+#app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  max-height: 100vh;
+}
+
+/* ═══════════════════════════════════════════════════════
+   CONFIG WARNING
+   ═══════════════════════════════════════════════════════ */
+#config-warning {
+  display: none;
+  background: linear-gradient(90deg, rgba(255,85,85,0.1), rgba(255,179,0,0.1));
+  border-bottom: 1px solid var(--red);
+  padding: 8px 16px;
+  font-size: 12px;
+  color: var(--amber);
+  text-align: center;
+  text-shadow: var(--glow-amber);
+}
+#config-warning.visible { display: block; }
+
+#playground-banner {
+  background: linear-gradient(90deg, rgba(0,212,255,0.08), rgba(57,255,20,0.05));
+  border-bottom: 1px solid var(--border);
+  color: var(--gray-mid);
+  font-size: 12px;
+  padding: 7px 18px;
+  text-align: center;
+  flex-shrink: 0;
+}
+#playground-banner strong {
+  color: var(--gray-light);
+  font-weight: 600;
+}
+#playground-banner a {
+  color: var(--cyan);
+  font-weight: 600;
+}
+
+/* ═══════════════════════════════════════════════════════
+   HEADER
+   ═══════════════════════════════════════════════════════ */
+#header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 20px;
+  background: var(--bg-panel);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  gap: 16px;
+}
+
+.header-title {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.header-ascii {
+  color: var(--green);
+  font-size: 11px;
+  line-height: 1.3;
+  text-shadow: var(--glow-green);
+  white-space: pre;
+  letter-spacing: 0.5px;
+}
+
+.header-subtitle {
+  color: var(--gray-mid);
+  font-size: 11px;
+  padding-left: 3px;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  font-size: 11px;
+  color: var(--gray-mid);
+  text-decoration: none;
+  transition: all var(--transition);
+}
+.pill:hover {
+  border-color: var(--cyan);
+  color: var(--cyan);
+  text-decoration: none;
+  text-shadow: var(--glow-cyan);
+}
+.pill .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 6px var(--success);
+}
+
+#btn-new-chat {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--amber);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 5px 12px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all var(--transition);
+  letter-spacing: 1px;
+}
+#btn-new-chat:hover {
+  border-color: var(--amber);
+  background: rgba(255,179,0,0.08);
+  text-shadow: var(--glow-amber);
+}
+
+/* ═══════════════════════════════════════════════════════
+   MAIN LAYOUT
+   ═══════════════════════════════════════════════════════ */
+#main {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* ═══════════════════════════════════════════════════════
+   TERMINAL (LEFT PANEL)
+   ═══════════════════════════════════════════════════════ */
+#terminal-panel {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  border-right: 1px solid var(--border);
+}
+
+.panel-label {
+  padding: 6px 16px;
+  font-size: 10px;
+  letter-spacing: 2px;
+  color: var(--gray-dim);
+  border-bottom: 1px solid var(--border);
+  background: rgba(13,17,23,0.6);
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+#chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  scroll-behavior: smooth;
+}
+
+/* Message styles */
+.msg {
+  margin-bottom: 14px;
+  line-height: 1.65;
+  animation: msgFadeIn 0.25s ease;
+}
+
+@keyframes msgFadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.msg-prefix {
+  font-weight: 600;
+  margin-right: 4px;
+}
+
+.msg-user .msg-prefix {
+  color: var(--green);
+  text-shadow: var(--glow-green);
+}
+.msg-user .msg-content {
+  color: var(--green);
+  text-shadow: var(--glow-green);
+}
+
+.msg-assistant .msg-prefix {
+  color: var(--cyan);
+  text-shadow: var(--glow-cyan);
+}
+.msg-assistant .msg-content {
+  color: var(--gray-light);
+}
+
+.msg-system .msg-prefix {
+  color: var(--amber);
+  text-shadow: var(--glow-amber);
+}
+.msg-system .msg-content {
+  color: var(--amber);
+  opacity: 0.85;
+}
+
+/* Markdown elements */
+.msg-content strong { color: #fff; font-weight: 600; }
+.msg-content em { font-style: italic; color: var(--gray-mid); }
+.msg-content code:not(pre code) {
+  background: var(--bg-code);
+  color: var(--code-text);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 12px;
+  border: 1px solid var(--border);
+}
+.msg-content a { color: var(--cyan); }
+.msg-content ul, .msg-content ol {
+  margin: 6px 0 6px 20px;
+}
+.msg-content li { margin-bottom: 3px; }
+.msg-content h1, .msg-content h2, .msg-content h3 {
+  color: var(--cyan);
+  margin: 10px 0 6px;
+  font-size: 14px;
+  text-shadow: var(--glow-cyan);
+}
+.msg-content h1 { font-size: 16px; }
+.msg-content h2 { font-size: 15px; }
+.msg-content p { margin: 4px 0; }
+
+/* Code blocks */
+.code-block-wrap {
+  margin: 8px 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: var(--bg-code);
+}
+.code-block-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 10px;
+  background: rgba(30,42,58,0.5);
+  border-bottom: 1px solid var(--border);
+  font-size: 11px;
+}
+.code-lang {
+  color: var(--amber);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+.btn-copy {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--gray-mid);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 3px;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.btn-copy:hover {
+  border-color: var(--green);
+  color: var(--green);
+}
+.btn-copy.copied {
+  border-color: var(--success);
+  color: var(--success);
+}
+.code-block-wrap pre {
+  margin: 0;
+  padding: 10px 12px;
+  overflow-x: auto;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--code-text);
+}
+.code-block-wrap pre code {
+  font-family: var(--font-mono);
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+/* Thinking blocks */
+.think-block {
+  margin: 8px 0;
+  border: 1px solid rgba(255,179,0,0.15);
+  border-radius: var(--radius);
+  background: rgba(255,179,0,0.03);
+}
+.think-summary {
+  display: block;
+  width: 100%;
+  background: transparent;
+  border: none;
+  padding: 6px 10px;
+  cursor: pointer;
+  font-size: 12px;
+  font-family: var(--font-mono);
+  text-align: left;
+  color: var(--gray-dim);
+  user-select: none;
+  transition: color var(--transition);
+}
+.think-summary:hover { color: var(--amber); }
+.think-block .think-content {
+  padding: 6px 12px 10px;
+  font-size: 12px;
+  color: var(--gray-dim);
+  line-height: 1.55;
+  border-top: 1px solid rgba(255,179,0,0.1);
+}
+.think-block:not(.open) .think-content {
+  display: none;
+}
+
+/* Streaming cursor */
+.streaming-cursor::after {
+  content: '█';
+  animation: blink 0.8s step-end infinite;
+  color: var(--green);
+  margin-left: 2px;
+}
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
+/* ═══════════════════════════════════════════════════════
+   INPUT AREA
+   ═══════════════════════════════════════════════════════ */
+#input-area {
+  flex-shrink: 0;
+  border-top: 1px solid var(--border);
+  background: var(--bg-panel);
+  padding: 10px 16px 8px;
+}
+
+/* Target toggle */
+#target-toggle {
+  display: flex;
+  gap: 14px;
+  margin-bottom: 8px;
+  align-items: center;
+}
+
+.target-label {
+  font-size: 10px;
+  color: var(--gray-dim);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.target-btn {
+  background: transparent;
+  border: none;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--gray-dim);
+  cursor: pointer;
+  padding: 2px 0;
+  border-bottom: 2px solid transparent;
+  transition: all var(--transition);
+  letter-spacing: 0.5px;
+}
+.target-btn:hover { color: var(--gray-mid); }
+.target-btn.active {
+  color: var(--green);
+  border-bottom-color: var(--green);
+  text-shadow: var(--glow-green);
+}
+
+#input-row {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+}
+
+.input-prompt-symbol {
+  color: var(--green);
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 36px;
+  text-shadow: var(--glow-green);
+  flex-shrink: 0;
+}
+
+#chat-input {
+  flex: 1;
+  background: var(--bg-deep);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--green);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  padding: 8px 12px;
+  resize: none;
+  outline: none;
+  min-height: 36px;
+  max-height: 120px;
+  line-height: 1.5;
+  transition: border-color var(--transition);
+  caret-color: var(--green);
+  text-shadow: var(--glow-green);
+}
+#chat-input::placeholder {
+  color: var(--gray-dim);
+  text-shadow: none;
+}
+#chat-input:focus {
+  border-color: var(--border-focus);
+}
+
+#btn-send, #btn-stop {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 8px 14px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all var(--transition);
+  letter-spacing: 1px;
+  flex-shrink: 0;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+#btn-send {
+  background: transparent;
+  border: 1px solid var(--green);
+  color: var(--green);
+}
+#btn-send:hover:not(:disabled) {
+  background: var(--green);
+  color: var(--bg-deep);
+  box-shadow: 0 0 12px rgba(57,255,20,0.3);
+}
+#btn-send:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+#btn-stop {
+  background: transparent;
+  border: 1px solid var(--red);
+  color: var(--red);
+  display: none;
+}
+#btn-stop:hover {
+  background: var(--red);
+  color: var(--bg-deep);
+  box-shadow: 0 0 12px rgba(255,85,85,0.3);
+}
+
+/* Examples */
+#examples-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  flex-wrap: wrap;
+}
+.examples-label {
+  font-size: 10px;
+  color: var(--gray-dim);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+.example-chip {
+  background: rgba(30,42,58,0.4);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 3px 10px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--gray-mid);
+  cursor: pointer;
+  transition: all var(--transition);
+  white-space: nowrap;
+}
+.example-chip:hover {
+  border-color: var(--cyan);
+  color: var(--cyan);
+  background: rgba(0,212,255,0.05);
+  text-shadow: var(--glow-cyan);
+}
+
+/* ═══════════════════════════════════════════════════════
+   OUTPUT PANEL (RIGHT)
+   ═══════════════════════════════════════════════════════ */
+#output-panel {
+  display: flex;
+  flex-direction: column;
+  width: 45%;
+  min-width: 340px;
+  max-width: 55%;
+  min-height: 0;
+  background: var(--bg-panel);
+}
+
+#output-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  background: rgba(13,17,23,0.6);
+  flex-shrink: 0;
+}
+
+.output-tab {
+  flex: 1;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--gray-dim);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: all var(--transition);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+.output-tab:hover { color: var(--gray-mid); }
+.output-tab.active {
+  color: var(--cyan);
+  border-bottom-color: var(--cyan);
+  text-shadow: var(--glow-cyan);
+}
+
+#output-content {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Tab panes */
+.tab-pane { display: none; height: 100%; min-height: 0; }
+.tab-pane.active { display: flex; flex-direction: column; }
+
+/* Preview tab */
+#pane-preview {
+  align-items: stretch;
+  justify-content: stretch;
+  position: relative;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.preview-placeholder {
+  align-self: center;
+  margin: auto;
+  text-align: center;
+  color: var(--gray-dim);
+  padding: 40px 20px;
+}
+.preview-placeholder .ascii-art {
+  font-size: 11px;
+  line-height: 1.3;
+  margin-bottom: 16px;
+  color: var(--border-focus);
+}
+.preview-placeholder .placeholder-text {
+  font-size: 12px;
+  letter-spacing: 0.5px;
+}
+
+#preview-image {
+  display: none;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  padding: 12px;
+}
+
+#preview-iframe {
+  display: none;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  border: none;
+  background: #fff;
+}
+
+#btn-fullscreen {
+  display: none;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: rgba(13,17,23,0.8);
+  border: 1px solid var(--border);
+  color: var(--gray-mid);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  z-index: 5;
+  transition: all var(--transition);
+}
+#btn-fullscreen:hover {
+  border-color: var(--cyan);
+  color: var(--cyan);
+}
+
+/* Console tab */
+#pane-console { padding: 12px 16px; gap: 12px; overflow-y: auto; }
+
+.console-section { margin-bottom: 8px; }
+.console-label {
+  font-size: 10px;
+  letter-spacing: 2px;
+  color: var(--gray-dim);
+  margin-bottom: 4px;
+  text-transform: uppercase;
+}
+.console-output {
+  background: var(--bg-deep);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 10px 12px;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  min-height: 40px;
+  max-height: 280px;
+  overflow-y: auto;
+}
+#console-stdout { color: var(--success); }
+#console-stderr { color: var(--red); }
+
+/* Code tab */
+#pane-code { padding: 0; }
+
+.code-tab-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  background: rgba(30,42,58,0.3);
+  flex-shrink: 0;
+}
+.code-tab-lang {
+  font-size: 11px;
+  color: var(--amber);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+.code-tab-actions {
+  display: flex;
+  gap: 8px;
+}
+.code-tab-btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--gray-mid);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 3px 8px;
+  border-radius: 3px;
+  cursor: pointer;
+  text-decoration: none;
+  transition: all var(--transition);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.code-tab-btn:hover {
+  border-color: var(--cyan);
+  color: var(--cyan);
+  text-decoration: none;
+}
+
+#code-display {
+  flex: 1;
+  overflow: auto;
+  padding: 12px;
+  background: var(--bg-code);
+}
+#code-display pre {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--code-text);
+}
+
+.code-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--gray-dim);
+  font-size: 12px;
+}
+
+/* ═══════════════════════════════════════════════════════
+   STATUS BAR
+   ═══════════════════════════════════════════════════════ */
+#status-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 16px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-panel);
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+.status-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.status-dot {
+  font-size: 10px;
+  line-height: 1;
+}
+
+#status-text {
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.status-idle { color: var(--gray-dim); }
+.status-working { color: var(--amber); text-shadow: var(--glow-amber); }
+.status-success { color: var(--success); text-shadow: 0 0 8px rgba(80,250,123,0.3); }
+.status-error { color: var(--red); text-shadow: 0 0 8px rgba(255,85,85,0.3); }
+.status-info { color: var(--cyan); text-shadow: var(--glow-cyan); }
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+.status-working .status-dot {
+  display: inline-block;
+  animation: spin 1s linear infinite;
+}
+
+/* ═══════════════════════════════════════════════════════
+   FULLSCREEN OVERLAY
+   ═══════════════════════════════════════════════════════ */
+#fullscreen-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: var(--bg-deep);
+  flex-direction: column;
+}
+#fullscreen-overlay.active { display: flex; }
+
+#fullscreen-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-panel);
+}
+#fullscreen-bar span {
+  color: var(--cyan);
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+#btn-exit-fullscreen {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--gray-mid);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 4px 12px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all var(--transition);
+}
+#btn-exit-fullscreen:hover {
+  border-color: var(--red);
+  color: var(--red);
+}
+#fullscreen-iframe {
+  flex: 1;
+  border: none;
+  background: #fff;
+}
+
+/* ═══════════════════════════════════════════════════════
+   RESPONSIVE
+   ═══════════════════════════════════════════════════════ */
+@media (max-width: 900px) {
+  #main {
+    flex-direction: column;
+  }
+  #terminal-panel {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+    max-height: 55vh;
+  }
+  #output-panel {
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    flex: 1;
+  }
+  .header-ascii { font-size: 10px; }
+  #chat-input { font-size: 12px; }
+  #preview-iframe { min-height: 400px; }
+}
+
+@media (max-width: 600px) {
+  #header { padding: 8px 12px; gap: 8px; }
+  .header-ascii { display: none; }
+  .header-subtitle { display: none; }
+  .pill { font-size: 10px; padding: 3px 8px; }
+  #chat-messages { padding: 10px; }
+  #input-area { padding: 8px 10px 6px; }
+  #examples-row { display: none; }
+}
+</style>
+</head>
+<body>
+<div id="app">
+  <!-- Config Warning -->
+  <div id="config-warning">⚠ WARNING: COHERE_API_KEY not configured. Set it as a Space secret to enable the model.</div>
+
+  <!-- Header -->
+  <header id="header">
+    <div class="header-title">
+      <div class="header-ascii" id="header-ascii-art">╔═══ NORTH MINI CODE 1.0 ═══╗</div>
+      <div class="header-subtitle" id="header-subtitle">Terminal Coding Assistant</div>
+    </div>
+    <div class="header-actions">
+      <a class="pill" id="model-pill" href="#" target="_blank" rel="noopener">
+        <span class="dot"></span>
+        <span id="model-pill-text">north-mini-code-1-0</span>
+      </a>
+      <a class="pill" id="opencode-pill" href="#" target="_blank" rel="noopener">OpenCode</a>
+      <button id="btn-new-chat" onclick="newChat()" title="Start a new chat session">[NEW]</button>
+    </div>
+  </header>
+
+  <div id="playground-banner">
+    <a id="banner-model-link" href="https://huggingface.co/CohereLabs/North-Mini-Code-1.0" target="_blank" rel="noopener"><strong>North-Mini-Code-1.0</strong></a>
+    is built for agentic coding and works best in your terminal with
+    <a id="opencode-banner-link" href="#" target="_blank" rel="noopener">OpenCode ↗</a>.
+    This Space is a browser playground for trying the model.
+  </div>
+
+  <!-- Main Layout -->
+  <div id="main">
+    <!-- Terminal Panel -->
+    <div id="terminal-panel">
+      <div class="panel-label">Terminal</div>
+      <div id="chat-messages"></div>
+      <div id="input-area">
+        <div id="target-toggle">
+          <span class="target-label">Mode:</span>
+          <button class="target-btn active" data-target="Python" onclick="setTarget('Python')">[ Python ● ]</button>
+          <button class="target-btn" data-target="Web" onclick="setTarget('Web')">[ Web ○ ]</button>
+        </div>
+        <div id="input-row">
+          <span class="input-prompt-symbol">❯</span>
+          <textarea id="chat-input" rows="1" placeholder="Ask a coding question or describe what to build…" spellcheck="false"></textarea>
+          <button id="btn-send" onclick="handleSend()" title="Send message (Shift+Enter)">➤</button>
+          <button id="btn-stop" onclick="stopGeneration()" title="Stop generation">■ STOP</button>
+        </div>
+        <div id="examples-row"></div>
+      </div>
+    </div>
+
+    <!-- Output Panel -->
+    <div id="output-panel">
+      <div id="output-tabs">
+        <button class="output-tab active" data-tab="preview" onclick="switchTab('preview')">Preview</button>
+        <button class="output-tab" data-tab="console" onclick="switchTab('console')">Console</button>
+        <button class="output-tab" data-tab="code" onclick="switchTab('code')">Code</button>
+      </div>
+      <div id="output-content">
+        <!-- Preview Pane -->
+        <div class="tab-pane active" id="pane-preview">
+          <div class="preview-placeholder" id="preview-placeholder">
+            <div class="ascii-art">
+  ┌──────────────────────┐
+  │   ╭━━━╮              │
+  │   ┃ ▶ ┃  OUTPUT      │
+  │   ╰━━━╯              │
+  └──────────────────────┘</div>
+            <div class="placeholder-text">Run code to see output here</div>
+          </div>
+          <img id="preview-image" alt="Generated output">
+          <iframe id="preview-iframe" sandbox="allow-scripts"></iframe>
+          <button id="btn-fullscreen" onclick="openFullscreen()">⤢ FULLSCREEN</button>
+        </div>
+
+        <!-- Console Pane -->
+        <div class="tab-pane" id="pane-console">
+          <div class="console-section">
+            <div class="console-label">stdout:</div>
+            <div class="console-output" id="console-stdout">No output yet.</div>
+          </div>
+          <div class="console-section">
+            <div class="console-label">stderr:</div>
+            <div class="console-output" id="console-stderr">No errors.</div>
+          </div>
+        </div>
+
+        <!-- Code Pane -->
+        <div class="tab-pane" id="pane-code">
+          <div class="code-tab-header">
+            <span class="code-tab-lang" id="code-tab-lang">—</span>
+            <div class="code-tab-actions">
+              <button class="code-tab-btn" id="btn-copy-code" onclick="copyCode()">📋 Copy</button>
+              <a class="code-tab-btn" id="btn-download" href="#" style="display:none;">⬇ Download</a>
+            </div>
+          </div>
+          <div id="code-display">
+            <div class="code-placeholder">No code generated yet.</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Status Bar -->
+  <div id="status-bar">
+    <div class="status-indicator status-idle" id="status-indicator">
+      <span class="status-dot">●</span>
+      <span id="status-text">IDLE</span>
+    </div>
+  </div>
+</div>
+
+<!-- Fullscreen Overlay -->
+<div id="fullscreen-overlay">
+  <div id="fullscreen-bar">
+    <span>WEB PREVIEW</span>
+    <button id="btn-exit-fullscreen" onclick="closeFullscreen()">[✕ CLOSE]</button>
+  </div>
+  <iframe id="fullscreen-iframe" sandbox="allow-scripts"></iframe>
+</div>
+
+<script>
+// ═══════════════════════════════════════════════════════
+// CONFIG
+// ═══════════════════════════════════════════════════════
+const CONFIG = __RUNTIME_CONFIG__;
+
+// ═══════════════════════════════════════════════════════
+// STATE
+// ═══════════════════════════════════════════════════════
+const state = {
+  history: [],
+  executionContext: {},
+  targetLanguage: 'Python',
+  isGenerating: false,
+  currentEventSource: null,
+  activeTab: 'preview',
+  lastExecution: null,
+  lastCode: '',
+  lastCodeLang: '',
+  pendingWebPreviewCode: '',
+  loadedWebPreviewCode: '',
+  scheduledWebPreviewCode: '',
+  reasoningExpanded: false,
+  lastReasoningPressAt: 0
+};
+
+// ═══════════════════════════════════════════════════════
+// INITIALIZATION
+// ═══════════════════════════════════════════════════════
+document.addEventListener('DOMContentLoaded', () => {
+  // Apply config
+  document.title = CONFIG.app_title || 'North Mini Code 1.0';
+
+  if (CONFIG.model_url) {
+    document.getElementById('model-pill').href = CONFIG.model_url;
+    document.getElementById('banner-model-link').href = CONFIG.model_url;
+  }
+  if (CONFIG.model_id) {
+    document.getElementById('model-pill-text').textContent = CONFIG.model_id;
+  }
+  if (CONFIG.opencode_url) {
+    document.getElementById('opencode-pill').href = CONFIG.opencode_url;
+    document.getElementById('opencode-banner-link').href = CONFIG.opencode_url;
+  }
+
+  // Config warning
+  if (!CONFIG.api_key_configured) {
+    document.getElementById('config-warning').classList.add('visible');
+  }
+
+  // Render examples
+  renderExamples();
+
+  // Welcome message
+  addSystemMessage(`Welcome to ${CONFIG.app_title || 'North Mini Code 1.0'}. Type a coding question or select an example below to get started.`);
+
+  // Input auto-resize & keybinding
+  const input = document.getElementById('chat-input');
+  input.addEventListener('input', autoResize);
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  });
+
+  document.addEventListener('pointerdown', handleReasoningPress, true);
+  document.addEventListener('mousedown', handleReasoningPress, true);
+  document.addEventListener('keydown', handleReasoningKeydown, true);
+  document.addEventListener('keydown', handleFullscreenKeydown);
+  observePreviewSize();
+});
+
+function autoResize() {
+  const el = document.getElementById('chat-input');
+  el.style.height = 'auto';
+  el.style.height = Math.min(el.scrollHeight, 120) + 'px';
+}
+
+// ═══════════════════════════════════════════════════════
+// EXAMPLES
+// ═══════════════════════════════════════════════════════
+function renderExamples() {
+  const row = document.getElementById('examples-row');
+  if (!CONFIG.examples || CONFIG.examples.length === 0) {
+    row.style.display = 'none';
+    return;
+  }
+  row.innerHTML = '<span class="examples-label">Try:</span>';
+  CONFIG.examples.forEach((ex) => {
+    const chip = document.createElement('button');
+    chip.className = 'example-chip';
+    chip.textContent = ex.label;
+    chip.title = ex.prompt;
+    chip.addEventListener('click', () => {
+      if (state.isGenerating) return;
+      resetConversation();
+      if (ex.target) setTarget(ex.target);
+      sendMessage(ex.prompt);
+    });
+    row.appendChild(chip);
+  });
+}
+
+// ═══════════════════════════════════════════════════════
+// TARGET LANGUAGE
+// ═══════════════════════════════════════════════════════
+function setTarget(target) {
+  state.targetLanguage = target;
+  document.querySelectorAll('.target-btn').forEach((btn) => {
+    const isActive = btn.dataset.target === target;
+    btn.classList.toggle('active', isActive);
+    btn.textContent = `[ ${btn.dataset.target} ${isActive ? '●' : '○'} ]`;
+  });
+}
+
+// ═══════════════════════════════════════════════════════
+// CHAT MESSAGES
+// ═══════════════════════════════════════════════════════
+function addSystemMessage(text) {
+  const container = document.getElementById('chat-messages');
+  const div = document.createElement('div');
+  div.className = 'msg msg-system';
+  div.innerHTML = `<span class="msg-prefix">system&gt;</span><span class="msg-content">${escapeHtml(text)}</span>`;
+  container.appendChild(div);
+  scrollToBottom();
+}
+
+function addUserMessage(text) {
+  const container = document.getElementById('chat-messages');
+  const div = document.createElement('div');
+  div.className = 'msg msg-user';
+  div.innerHTML = `<span class="msg-prefix">user&gt;</span><span class="msg-content">${escapeHtml(text)}</span>`;
+  container.appendChild(div);
+  scrollToBottom();
+}
+
+function addAssistantMessage() {
+  const container = document.getElementById('chat-messages');
+  const div = document.createElement('div');
+  div.className = 'msg msg-assistant';
+  div.id = 'current-assistant-msg';
+  div.innerHTML = `<span class="msg-prefix">north&gt;</span><span class="msg-content streaming-cursor"></span>`;
+  container.appendChild(div);
+  state.reasoningExpanded = false;
+  scrollToBottom();
+  return div;
+}
+
+function updateAssistantMessage(content, isStreaming) {
+  const div = document.getElementById('current-assistant-msg');
+  if (!div) return;
+  const contentEl = div.querySelector('.msg-content');
+  const keepReasoningExpanded = state.reasoningExpanded || Boolean(contentEl.querySelector('.think-block.open'));
+  state.reasoningExpanded = keepReasoningExpanded;
+  contentEl.innerHTML = parseMarkdown(content);
+  contentEl.querySelectorAll('.think-block').forEach((block) => {
+    setReasoningBlockOpen(block, keepReasoningExpanded);
+  });
+  if (isStreaming) {
+    contentEl.classList.add('streaming-cursor');
+  } else {
+    contentEl.classList.remove('streaming-cursor');
+  }
+  scrollToBottom();
+}
+
+function finalizeAssistantMessage() {
+  const div = document.getElementById('current-assistant-msg');
+  if (div) {
+    div.id = '';
+    const contentEl = div.querySelector('.msg-content');
+    if (contentEl) contentEl.classList.remove('streaming-cursor');
+  }
+}
+
+function scrollToBottom() {
+  const container = document.getElementById('chat-messages');
+  requestAnimationFrame(() => {
+    container.scrollTop = container.scrollHeight;
+  });
+}
+
+// ═══════════════════════════════════════════════════════
+// MARKDOWN PARSER
+// ═══════════════════════════════════════════════════════
+function parseMarkdown(text) {
+  if (!text) return '';
+
+  // Extract reasoning blocks before escaping so they render as collapsed details.
+  const thinkBlocks = [];
+  text = text.replace(/<think>([\s\S]*?)<\/think>/g, (_, content) => {
+    const idx = thinkBlocks.length;
+    thinkBlocks.push(renderThinkBlock(content, '💭 Reasoning (click to expand)'));
+    return `@@THINKBLOCK_${idx}@@`;
+  });
+  // Handle unclosed think blocks (during streaming)
+  text = text.replace(/<think>([\s\S]*)$/g, (_, content) => {
+    const idx = thinkBlocks.length;
+    thinkBlocks.push(renderThinkBlock(content, '💭 Reasoning (thinking…)'));
+    return `@@THINKBLOCK_${idx}@@`;
+  });
+
+  // Extract code blocks first to prevent inner processing
+  const codeBlocks = [];
+  text = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => {
+    const idx = codeBlocks.length;
+    codeBlocks.push({ lang: lang || 'text', code: code.trimEnd() });
+    return `@@CODEBLOCK_${idx}@@`;
+  });
+
+  // Escape HTML in remaining text
+  text = escapeHtml(text);
+
+  // Inline formatting
+  text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  text = text.replace(/(?<!\*)\*([^*]+?)\*(?!\*)/g, '<em>$1</em>');
+  text = text.replace(/`([^`]+?)`/g, '<code>$1</code>');
+  text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+
+  // Headings
+  text = text.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+  text = text.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+  text = text.replace(/^# (.+)$/gm, '<h1>$1</h1>');
+
+  // Lists - simple approach
+  // Unordered
+  text = text.replace(/^(?:[-*]) (.+)$/gm, '<li>$1</li>');
+  text = text.replace(/((?:<li>.*<\/li>\n?)+)/g, '<ul>$1</ul>');
+  // Ordered
+  text = text.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
+  // Wrap consecutive <li> that aren't in <ul> into <ol>
+  text = text.replace(/(<li>(?:(?!<\/?[uo]l>).)*<\/li>(?:\s*<li>(?:(?!<\/?[uo]l>).)*<\/li>)*)/g, (match) => {
+    if (!match.includes('<ul>') && !match.includes('</ul>')) {
+      return '<ol>' + match + '</ol>';
+    }
+    return match;
+  });
+
+  // Restore block-level placeholders after inline parsing so their contents remain literal.
+  text = text.replace(/@@CODEBLOCK_(\d+)@@/g, (_, idx) => {
+    const block = codeBlocks[parseInt(idx)];
+    const escapedCode = escapeHtml(block.code);
+    const id = `code-${Date.now()}-${idx}`;
+    return `<div class="code-block-wrap"><div class="code-block-header"><span class="code-lang">${escapeHtml(block.lang)}</span><button class="btn-copy" onclick="copyBlock(this, '${id}')">📋 Copy</button></div><pre><code id="${id}">${escapedCode}</code></pre></div>`;
+  });
+  text = text.replace(/@@THINKBLOCK_(\d+)@@/g, (_, idx) => thinkBlocks[parseInt(idx)]);
+
+  // Line breaks (preserve paragraph structure)
+  text = text.replace(/\n\n/g, '</p><p>');
+  text = text.replace(/\n/g, '<br>');
+  text = '<p>' + text + '</p>';
+
+  // Clean up empty paragraphs
+  text = text.replace(/<p>\s*<\/p>/g, '');
+  text = text.replace(/<p>(<(?:div|ul|ol|h[1-3]))/g, '$1');
+  text = text.replace(/(<\/(?:div|ul|ol|h[1-3])>)<\/p>/g, '$1');
+
+  return text;
+}
+
+function renderThinkBlock(content, summary) {
+  const escapedContent = escapeHtml(content.trim()).replace(/\n/g, '<br>');
+  const openClass = state.reasoningExpanded ? ' open' : '';
+  const expanded = state.reasoningExpanded ? 'true' : 'false';
+  return `<div class="think-block${openClass}"><button type="button" class="think-summary" aria-expanded="${expanded}">${summary}</button><div class="think-content">${escapedContent}</div></div>`;
+}
+
+function handleReasoningPress(event) {
+  updateReasoningFromEvent(event);
+}
+
+function handleReasoningKeydown(event) {
+  if (event.key !== 'Enter' && event.key !== ' ') return;
+  updateReasoningFromEvent(event);
+}
+
+function updateReasoningFromEvent(event) {
+  if (event.type === 'mousedown' && Date.now() - state.lastReasoningPressAt < 500) {
+    return;
+  }
+  const target = event.target;
+  if (!target || !target.closest) return;
+  const button = target.closest('.think-summary');
+  if (!button) return;
+  const block = button.closest('.think-block');
+  if (!block) return;
+  event.preventDefault();
+  event.stopPropagation();
+  if (event.stopImmediatePropagation) {
+    event.stopImmediatePropagation();
+  }
+  state.lastReasoningPressAt = Date.now();
+  const nextOpen = !block.classList.contains('open');
+  state.reasoningExpanded = nextOpen;
+  const scope = block.closest('.msg-content') || document;
+  scope.querySelectorAll('.think-block').forEach((trace) => {
+    setReasoningBlockOpen(trace, nextOpen);
+  });
+}
+
+function setReasoningBlockOpen(block, open) {
+  block.classList.toggle('open', open);
+  const button = block.querySelector('.think-summary');
+  if (button) {
+    button.setAttribute('aria-expanded', open ? 'true' : 'false');
+  }
+}
+
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+// ═══════════════════════════════════════════════════════
+// COPY FUNCTIONS
+// ═══════════════════════════════════════════════════════
+function copyBlock(button, codeId) {
+  const codeEl = document.getElementById(codeId);
+  if (!codeEl) return;
+  navigator.clipboard.writeText(codeEl.textContent).then(() => {
+    button.textContent = '✓ Copied!';
+    button.classList.add('copied');
+    setTimeout(() => {
+      button.textContent = '📋 Copy';
+      button.classList.remove('copied');
+    }, 2000);
+  });
+}
+
+function copyCode() {
+  if (!state.lastCode) return;
+  const btn = document.getElementById('btn-copy-code');
+  navigator.clipboard.writeText(state.lastCode).then(() => {
+    btn.textContent = '✓ Copied!';
+    setTimeout(() => { btn.textContent = '📋 Copy'; }, 2000);
+  });
+}
+
+// ═══════════════════════════════════════════════════════
+// STATUS BAR
+// ═══════════════════════════════════════════════════════
+function renderStatus(text, statusState) {
+  const indicator = document.getElementById('status-indicator');
+  const textEl = document.getElementById('status-text');
+  const dotEl = indicator.querySelector('.status-dot');
+
+  indicator.className = 'status-indicator';
+  switch (statusState) {
+    case 'working':
+      indicator.classList.add('status-working');
+      dotEl.textContent = '◐';
+      break;
+    case 'success':
+      indicator.classList.add('status-success');
+      dotEl.textContent = '✓';
+      break;
+    case 'error':
+      indicator.classList.add('status-error');
+      dotEl.textContent = '✗';
+      break;
+    case 'info':
+      indicator.classList.add('status-info');
+      dotEl.textContent = 'ℹ';
+      break;
+    default:
+      indicator.classList.add('status-idle');
+      dotEl.textContent = '●';
+  }
+  textEl.textContent = text || 'IDLE';
+}
+
+// ═══════════════════════════════════════════════════════
+// OUTPUT PANEL
+// ═══════════════════════════════════════════════════════
+function switchTab(tab, { forcePreviewReload = false } = {}) {
+  const wasPreview = state.activeTab === 'preview';
+  state.activeTab = tab;
+  document.querySelectorAll('.output-tab').forEach((btn) => {
+    btn.classList.toggle('active', btn.dataset.tab === tab);
+  });
+  document.querySelectorAll('.tab-pane').forEach((pane) => {
+    pane.classList.toggle('active', pane.id === `pane-${tab}`);
+  });
+  if (tab === 'preview') {
+    ensureWebPreviewLoaded({ forceReload: forcePreviewReload || !wasPreview });
+  }
+}
+
+function renderExecution(execution) {
+  if (!execution) return;
+  state.lastExecution = execution;
+
+  // Console
+  const stdout = execution.stdout || '';
+  const stderr = execution.stderr || '';
+  document.getElementById('console-stdout').textContent = stdout || 'No output.';
+  document.getElementById('console-stderr').textContent = stderr || 'No errors.';
+
+  // Code
+  if (execution.code) {
+    state.lastCode = execution.code;
+    state.lastCodeLang = execution.language || 'code';
+    document.getElementById('code-tab-lang').textContent = state.lastCodeLang;
+    document.getElementById('code-display').innerHTML = `<pre>${escapeHtml(execution.code)}</pre>`;
+  }
+
+  // Download
+  const dlBtn = document.getElementById('btn-download');
+  if (execution.download_url) {
+    dlBtn.href = execution.download_url;
+    dlBtn.style.display = 'inline-flex';
+    dlBtn.setAttribute('download', '');
+  } else {
+    dlBtn.style.display = 'none';
+  }
+
+  // Preview
+  const placeholder = document.getElementById('preview-placeholder');
+  const img = document.getElementById('preview-image');
+  const iframe = getPreviewIframe();
+  const fsBtn = document.getElementById('btn-fullscreen');
+
+  if (execution.image_url) {
+    placeholder.style.display = 'none';
+    iframe.style.display = 'none';
+    fsBtn.style.display = 'none';
+    img.src = execution.image_url;
+    img.style.display = 'block';
+    if (state.activeTab !== 'console' && state.activeTab !== 'code') {
+      switchTab('preview');
+    }
+  } else if (execution.target === 'web' && execution.code) {
+    placeholder.style.display = 'none';
+    img.style.display = 'none';
+    iframe.style.display = 'block';
+    fsBtn.style.display = 'block';
+    state.pendingWebPreviewCode = execution.code;
+    state.loadedWebPreviewCode = '';
+    state.scheduledWebPreviewCode = '';
+    if (state.activeTab !== 'console' && state.activeTab !== 'code') {
+      switchTab('preview', { forcePreviewReload: true });
+    } else {
+      iframe.srcdoc = '';
+    }
+  } else {
+    // No visual preview, but maybe there's stdout
+    if (stdout || stderr) {
+      // Auto-switch to suggested tab or console
+      const suggested = execution.suggested_tab || 'console';
+      switchTab(suggested);
+    }
+  }
+}
+
+function resetOutput() {
+  const iframe = getPreviewIframe();
+  document.getElementById('preview-placeholder').style.display = '';
+  document.getElementById('preview-image').style.display = 'none';
+  iframe.style.display = 'none';
+  iframe.srcdoc = '';
+  document.getElementById('btn-fullscreen').style.display = 'none';
+  document.getElementById('console-stdout').textContent = 'No output.';
+  document.getElementById('console-stderr').textContent = 'No errors.';
+  document.getElementById('code-display').innerHTML = '<div class="code-placeholder">No code generated yet.</div>';
+  document.getElementById('code-tab-lang').textContent = '—';
+  document.getElementById('btn-download').style.display = 'none';
+  state.lastExecution = null;
+  state.lastCode = '';
+  state.lastCodeLang = '';
+  state.pendingWebPreviewCode = '';
+  state.loadedWebPreviewCode = '';
+  state.scheduledWebPreviewCode = '';
+}
+
+// ═══════════════════════════════════════════════════════
+// FULLSCREEN
+// ═══════════════════════════════════════════════════════
+function getPreviewIframe() {
+  return document.getElementById('preview-iframe');
+}
+
+function recreatePreviewIframe() {
+  const oldFrame = getPreviewIframe();
+  const freshFrame = document.createElement('iframe');
+  freshFrame.id = 'preview-iframe';
+  freshFrame.setAttribute('sandbox', 'allow-scripts');
+  freshFrame.style.display = oldFrame.style.display || 'block';
+  oldFrame.replaceWith(freshFrame);
+  return freshFrame;
+}
+
+function ensureWebPreviewLoaded({ forceReload = false } = {}) {
+  const iframe = getPreviewIframe();
+  if (!state.pendingWebPreviewCode || state.activeTab !== 'preview' || iframe.style.display === 'none') {
+    return;
+  }
+  if (!forceReload && state.loadedWebPreviewCode === state.pendingWebPreviewCode) {
+    schedulePreviewResize(iframe);
+    return;
+  }
+  if (!forceReload && state.scheduledWebPreviewCode === state.pendingWebPreviewCode) {
+    return;
+  }
+
+  state.scheduledWebPreviewCode = state.pendingWebPreviewCode;
+  iframe.srcdoc = '';
+  const loadWhenLaidOut = () => {
+    if (state.activeTab !== 'preview' || !state.pendingWebPreviewCode) {
+      state.scheduledWebPreviewCode = '';
+      return;
+    }
+    if (!forceReload && state.loadedWebPreviewCode === state.pendingWebPreviewCode) return;
+    const visibleFrame = getPreviewIframe();
+    const rect = visibleFrame.getBoundingClientRect();
+    if (rect.width < 10 || rect.height < 10) {
+      state.scheduledWebPreviewCode = '';
+      setTimeout(() => ensureWebPreviewLoaded({ forceReload }), 50);
+      return;
+    }
+    const freshFrame = recreatePreviewIframe();
+    freshFrame.srcdoc = state.pendingWebPreviewCode;
+    state.loadedWebPreviewCode = state.pendingWebPreviewCode;
+    state.scheduledWebPreviewCode = '';
+    schedulePreviewResize(freshFrame);
+  };
+  requestAnimationFrame(() => requestAnimationFrame(loadWhenLaidOut));
+  setTimeout(loadWhenLaidOut, 75);
+}
+
+function schedulePreviewResize(iframe) {
+  const dispatchResize = () => {
+    try {
+      iframe.contentWindow?.dispatchEvent(new Event('resize'));
+    } catch (_err) {
+      // Sandboxed srcdoc frames may reject parent-origin access; visible-load timing is the main fix.
+    }
+  };
+  requestAnimationFrame(() => {
+    requestAnimationFrame(dispatchResize);
+  });
+  setTimeout(dispatchResize, 100);
+  setTimeout(dispatchResize, 350);
+}
+
+function observePreviewSize() {
+  const previewPane = document.getElementById('pane-preview');
+  if (!previewPane) return;
+
+  window.addEventListener('resize', () => {
+    if (state.activeTab === 'preview' && state.loadedWebPreviewCode) {
+      schedulePreviewResize(getPreviewIframe());
+    }
+  });
+
+  if (typeof ResizeObserver === 'undefined') return;
+  const observer = new ResizeObserver(() => {
+    if (state.activeTab === 'preview' && state.loadedWebPreviewCode) {
+      schedulePreviewResize(getPreviewIframe());
+    }
+  });
+  observer.observe(previewPane);
+}
+
+function openFullscreen() {
+  const overlay = document.getElementById('fullscreen-overlay');
+  const iframe = document.getElementById('fullscreen-iframe');
+  if (state.lastExecution && state.lastExecution.target === 'web' && state.lastExecution.code) {
+    iframe.srcdoc = state.lastExecution.code;
+  }
+  overlay.classList.add('active');
+}
+
+function closeFullscreen() {
+  document.getElementById('fullscreen-overlay').classList.remove('active');
+  document.getElementById('fullscreen-iframe').srcdoc = '';
+}
+
+function handleFullscreenKeydown(event) {
+  if (event.key !== 'Escape') return;
+  const overlay = document.getElementById('fullscreen-overlay');
+  if (!overlay.classList.contains('active')) return;
+  event.preventDefault();
+  closeFullscreen();
+}
+
+// ═══════════════════════════════════════════════════════
+// SEND / RECEIVE
+// ═══════════════════════════════════════════════════════
+function handleSend() {
+  const input = document.getElementById('chat-input');
+  const prompt = input.value.trim();
+  if (!prompt || state.isGenerating) return;
+  input.value = '';
+  autoResize();
+  sendMessage(prompt);
+}
+
+async function sendMessage(prompt) {
+  if (state.isGenerating) return;
+
+  // UI updates
+  state.isGenerating = true;
+  toggleInputState(true);
+  addUserMessage(prompt);
+  addAssistantMessage();
+  renderStatus('Thinking…', 'working');
+
+  const historyJSON = JSON.stringify(state.history);
+  const execContextJSON = JSON.stringify(state.executionContext);
+
+  try {
+    // Step 1: POST to get event_id
+    const resp = await fetch('/gradio_api/call/chat', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        data: [prompt, state.targetLanguage, historyJSON, execContextJSON]
+      })
+    });
+
+    if (!resp.ok) {
+      throw new Error(`API error: ${resp.status} ${resp.statusText}`);
+    }
+
+    const { event_id } = await resp.json();
+
+    // Step 2: Connect EventSource
+    const eventSource = new EventSource(`/gradio_api/call/chat/${event_id}`);
+    state.currentEventSource = eventSource;
+
+    let lastContent = '';
+
+    eventSource.addEventListener('generating', (e) => {
+      try {
+        const dataArray = JSON.parse(e.data);
+        const payload = JSON.parse(dataArray[0]);
+        handlePayload(payload, true);
+        if (payload.history && payload.history.length > 0) {
+          const lastMsg = payload.history[payload.history.length - 1];
+          if (lastMsg.role === 'assistant') {
+            lastContent = lastMsg.content;
+          }
+        }
+      } catch (err) {
+        console.error('Parse error (generating):', err);
+      }
+    });
+
+    eventSource.addEventListener('complete', (e) => {
+      try {
+        const dataArray = JSON.parse(e.data);
+        const payload = JSON.parse(dataArray[0]);
+        handlePayload(payload, false);
+      } catch (err) {
+        console.error('Parse error (complete):', err);
+      }
+      eventSource.close();
+      onGenerationEnd();
+    });
+
+    eventSource.addEventListener('error', (e) => {
+      let errorMsg = 'An error occurred during generation.';
+      if (e.data) {
+        errorMsg = e.data;
+      }
+      console.error('SSE error:', errorMsg);
+      finalizeAssistantMessage();
+      addSystemMessage(`Error: ${errorMsg}`);
+      renderStatus('Error', 'error');
+      eventSource.close();
+      onGenerationEnd();
+    });
+
+  } catch (err) {
+    console.error('Send error:', err);
+    finalizeAssistantMessage();
+    addSystemMessage(`Error: ${err.message}`);
+    renderStatus('Error', 'error');
+    onGenerationEnd();
+  }
+}
+
+function handlePayload(payload, isStreaming) {
+  // Status
+  if (payload.status_text) {
+    renderStatus(payload.status_text, payload.status_state || 'working');
+  }
+
+  // History
+  if (payload.history) {
+    state.history = payload.history;
+    const lastMsg = payload.history[payload.history.length - 1];
+    if (lastMsg && lastMsg.role === 'assistant') {
+      updateAssistantMessage(lastMsg.content, isStreaming);
+    }
+  }
+
+  // Execution
+  if (payload.execution) {
+    renderExecution(payload.execution);
+    // Persist execution context if needed
+    if (payload.execution) {
+      state.executionContext = payload.execution;
+    }
+  }
+
+  // Final state
+  if (payload.type === 'complete') {
+    finalizeAssistantMessage();
+    renderStatus('Done', 'success');
+    setTimeout(() => {
+      if (!state.isGenerating) renderStatus('Idle', 'idle');
+    }, 3000);
+  }
+
+  if (payload.type === 'error') {
+    finalizeAssistantMessage();
+    addSystemMessage(`Error: ${payload.status_text || 'Unknown error'}`);
+    renderStatus('Error', 'error');
+  }
+
+  // Auto-switch tab
+  if (payload.execution && payload.execution.suggested_tab) {
+    switchTab(payload.execution.suggested_tab);
+  }
+}
+
+function onGenerationEnd() {
+  state.isGenerating = false;
+  state.currentEventSource = null;
+  toggleInputState(false);
+}
+
+function toggleInputState(generating) {
+  const sendBtn = document.getElementById('btn-send');
+  const stopBtn = document.getElementById('btn-stop');
+  const input = document.getElementById('chat-input');
+
+  if (generating) {
+    sendBtn.style.display = 'none';
+    stopBtn.style.display = 'flex';
+    input.disabled = true;
+    input.placeholder = 'Generating…';
+  } else {
+    sendBtn.style.display = 'flex';
+    stopBtn.style.display = 'none';
+    sendBtn.disabled = false;
+    input.disabled = false;
+    input.placeholder = 'Ask a coding question or describe what to build…';
+    input.focus();
+  }
+}
+
+function stopGeneration() {
+  if (state.currentEventSource) {
+    state.currentEventSource.close();
+    state.currentEventSource = null;
+  }
+  finalizeAssistantMessage();
+  addSystemMessage('Generation stopped by user.');
+  renderStatus('Stopped', 'info');
+  onGenerationEnd();
+}
+
+function resetConversation(announcement) {
+  state.history = [];
+  state.executionContext = {};
+  state.lastExecution = null;
+  state.lastCode = '';
+  state.lastCodeLang = '';
+  state.reasoningExpanded = false;
+
+  if (state.currentEventSource) {
+    state.currentEventSource.close();
+    state.currentEventSource = null;
+  }
+  state.isGenerating = false;
+  toggleInputState(false);
+
+  document.getElementById('chat-messages').innerHTML = '';
+  resetOutput();
+  switchTab('preview');
+  renderStatus('Idle', 'idle');
+  if (announcement) {
+    addSystemMessage(announcement);
+  }
+}
+
+function newChat() {
+  resetConversation(`Session reset. Welcome back to ${CONFIG.app_title || 'North Mini Code 1.0'}.`);
+}
+</script>
+</body>
+</html>