Prepare OpenCortex hackathon submission

README.md

@@ -0,0 +1,350 @@
+---
+title: OpenCortex
+emoji: 🧠
+colorFrom: cyan
+colorTo: blue
+sdk: gradio
+sdk_version: 6.18.0
+app_file: app.py
+pinned: false
+license: mit
+tags:
+  - build-small-hackathon
+  - backyard-ai
+  - off-brand
+  - tiny-titan
+  - best-demo
+  - codex
+  - llama-cpp
+  - local-ai
+  - ai-infra
+  - observability
+---
+
+# OpenCortex
+
+**Making LLM inference visible.**
+
+OpenCortex is a real-time observatory for local LLM inference. It pairs a chat
+interface with a living view of the runtime behind the answer: working memory,
+context pressure, token flow, and engine health.
+
+Most chat interfaces show only two things:
+
+```text
+user input -> assistant output
+```
+
+OpenCortex shows the machine in the middle.
+
+```text
+prompt prefill -> KV/cache pressure -> decode rhythm -> context boundary -> answer behavior
+```
+
+It is built for learners, local AI users, and AI infrastructure engineers who
+want to understand why an LLM slows down, loops, forgets, or runs out of
+context.
+
+![OpenCortex runtime observatory](docs/assets/opencortex-hero.png)
+
+> Screenshot TODO: replace `docs/assets/opencortex-hero.png` with the main
+> 16:9 demo screenshot before submission.
+
+## Why this exists
+
+Small local models make AI personal again. But local inference is still a black
+box for most users. When a response becomes slow or repetitive, the user rarely
+knows whether the model is thinking, overloaded, stuck in a loop, or simply
+running out of context.
+
+OpenCortex turns runtime signals into a product experience:
+
+| Runtime signal | Human-readable concept | Visual feedback |
+| --- | --- | --- |
+| KV/cache usage proxy | Working Memory | block pressure and fragmentation |
+| Context tokens | Context Window | filling chamber and active boundary |
+| Decode throughput | Token Stream | flowing, broken, or stalled token river |
+| TTFT and queue evidence | Engine State | pulse, charging, recovery, hazard state |
+| Repeated generated text | Thought Loop | red loop warning and irregular core pulse |
+
+The goal is not to build another metrics dashboard. The goal is to let people
+feel the hidden mechanics of inference while they chat.
+
+## Demo links
+
+- **Hugging Face Space:** TODO: add Space URL
+- **Demo video:** TODO: add YouTube / Space video URL
+- **Social post:** TODO: add X / LinkedIn / HF post URL
+
+The Build Small Hackathon requires a deployed Gradio Space, a demo video, a
+social post, and README tags for tracks and badges. This README is structured
+for that submission flow.
+
+The hosted Space runs in **simulated runtime mode** so judges can open the demo
+without a private llama.cpp server. The local path below connects to live
+llama.cpp metrics.
+
+## What you can try
+
+OpenCortex has one live mode and four built-in runtime experiments.
+
+### 1. Live local chat
+
+Ask the local model a question and watch the observatory react while the answer
+streams. The UI listens to llama.cpp OpenAI-compatible streaming events,
+timings, `/metrics`, and `/slots`.
+
+### 2. Long context stress
+
+Shows how prompt growth increases prefill work before generation begins.
+
+### 3. Memory pressure
+
+Shows working memory blocks fragmenting and reallocating as the runtime becomes
+strained.
+
+### 4. Slow decode
+
+Shows token flow breaking into a stop-burst-stop rhythm when generation slows.
+
+### 5. Context collapse
+
+Shows the moment earlier turns leave the active context window. The chat history
+stays visible, but OpenCortex marks the active context boundary so the user can
+see what the model can no longer reliably use.
+
+![Context boundary event](docs/assets/opencortex-context-collapse.png)
+
+> Screenshot TODO: capture the active context boundary and context window full
+> state.
+
+### 6. Thought loop detection
+
+If generation begins repeating the same pattern, OpenCortex marks it as a
+thought loop. The Token Stream and Cortex Core switch into a red hazard state.
+
+![Thought loop detected](docs/assets/opencortex-thought-loop.png)
+
+> Screenshot TODO: capture a repeated story response with `THOUGHT LOOP
+> DETECTED` visible.
+
+## How it works
+
+OpenCortex is intentionally lightweight:
+
+```text
+Browser UI
+  |
+  | POST /api/chat
+  v
+FastAPI / Space app
+  |
+  | OpenAI-compatible streaming request
+  v
+llama.cpp llama-server
+  |
+  | /v1/chat/completions
+  | /metrics
+  | /slots
+  v
+Runtime events -> semantic state -> visual organs
+```
+
+The backend converts low-level runtime evidence into normalized events:
+
+- `request_started`
+- `first_token`
+- `token`
+- `context_collapse`
+- `request_completed`
+- `error`
+
+The frontend consumes those events and updates the chat and observatory in the
+same stream, so visual state and language output stay aligned.
+
+## Runtime evidence
+
+The MVP uses real llama.cpp evidence where available:
+
+| Evidence | Source | Used for |
+| --- | --- | --- |
+| Time to first token | measured in Python client | Engine State |
+| Prompt tokens | llama.cpp usage/timings | Context Window |
+| Completion tokens | llama.cpp usage/timings | Token Stream |
+| Prompt throughput | llama.cpp timings | Prefill evidence |
+| Decode throughput | llama.cpp timings and metrics | Token Stream |
+| Active slot context | llama.cpp `/slots` | Context and memory proxy |
+| Processing/deferred requests | llama.cpp `/metrics` | Engine State |
+| Repetition pattern | generated text heuristic | Thought loop hazard |
+
+Working Memory is labeled as a **context-derived proxy** in this MVP. llama.cpp
+does not expose a simple per-request KV cache percentage through the HTTP API we
+use, so OpenCortex derives a truthful pressure estimate from active slot context
+tokens and context size.
+
+## Model
+
+The current local demo uses:
+
+```text
+Qwen/Qwen2.5-1.5B-Instruct-GGUF
+quantization: Q4_K_M
+context: 2048 tokens in the local demo
+runtime: llama.cpp llama-server
+```
+
+This keeps the submission inside the Build Small model limit and qualifies the
+project for tiny-model storytelling. The interface is backend-neutral enough to
+evolve toward Ollama, vLLM, or Modal-hosted llama.cpp later.
+
+On Hugging Face Spaces, OpenCortex defaults to `OPEN_CORTEX_BACKEND=simulated`
+when `SPACE_ID` is present. Set `OPEN_CORTEX_BACKEND=llama_cpp` only when the
+Space can reach a running llama.cpp backend.
+
+## Run locally
+
+### 1. Install project dependencies
+
+```bash
+uv sync
+```
+
+### 2. Start llama.cpp
+
+From your llama.cpp checkout:
+
+```bash
+llama-server \
+  -hf Qwen/Qwen2.5-1.5B-Instruct-GGUF:Q4_K_M \
+  -c 2048 -t 8 -tb 8 \
+  --metrics \
+  --host 127.0.0.1 --port 8080
+```
+
+Check that the server is alive:
+
+```bash
+curl --noproxy '*' http://127.0.0.1:8080/health
+```
+
+Expected:
+
+```json
+{"status":"ok"}
+```
+
+### 3. Start OpenCortex
+
+```bash
+uv run open-cortex
+```
+
+Then open:
+
+```text
+http://127.0.0.1:7860
+```
+
+## Suggested demo script
+
+Use this for the video:
+
+1. Open the app and send a normal question.
+2. Point out prefill, first-token latency, context usage, and token flow.
+3. Run **Slow decode** to show token flow breaking.
+4. Ask for a long story and show **Thought Loop Detected** when repetition
+   appears.
+5. Fill the context window and show **Context Window Full**.
+6. Send one more message and show the earliest message leaving the active
+   context boundary.
+7. Close with the core claim: OpenCortex turns runtime internals into something
+   users can see and reason about.
+
+## Screenshots needed before final submission
+
+Place these files under `docs/assets/`:
+
+```text
+docs/assets/opencortex-hero.png
+docs/assets/opencortex-thought-loop.png
+docs/assets/opencortex-context-collapse.png
+docs/assets/opencortex-slow-decode.png
+```
+
+Capture recommendations:
+
+- `opencortex-hero.png`: full UI during live decode, 16:9, both chat and
+  observatory visible.
+- `opencortex-thought-loop.png`: repeated generation with `THOUGHT LOOP
+  DETECTED` visible.
+- `opencortex-context-collapse.png`: active context boundary visible on the
+  left, context organ visible on the right.
+- `opencortex-slow-decode.png`: Slow decode experiment with broken token flow.
+
+## Hackathon fit
+
+OpenCortex targets the **Backyard AI** track: it is a practical tool for
+learning and debugging local AI behavior on hardware you own.
+
+It also targets these badges:
+
+- **Off Brand**: custom runtime cockpit UI, not default Gradio components.
+- **Tiny Titan**: built around a 1.5B local model.
+- **Best Demo**: the experience is designed around a clear visual story.
+- **Best Use of Codex**: the project was developed with Codex assistance and
+  should be submitted with Codex-attributed commits in the connected repository.
+
+Modal credits were used/planned for development exploration, but the current MVP
+does not require Modal at runtime.
+
+## Truthfulness and limitations
+
+OpenCortex is a visualization layer over real runtime evidence, but it does not
+claim to expose every internal tensor or true biological cognition.
+
+Current limitations:
+
+- KV cache usage is approximated from active context pressure.
+- Thought loop detection is heuristic pattern detection over generated text.
+- Context collapse is handled at the application layer by trimming oldest turns.
+- The current demo is optimized for a single local runtime, not multi-user
+  production serving.
+- vLLM integration is a planned evolution, not part of v0.1.
+
+These constraints are visible by design. The product shows both semantic states
+and metric evidence so users can tell which parts are measured and which parts
+are interpreted.
+
+## Project structure
+
+```text
+app.py                         Space/local entry point
+open_cortex/ui/app.py          HTTP app, event streaming, HTML shell
+open_cortex/ui/assets/         Product UI CSS and browser controller
+open_cortex/runtime/client.py  llama.cpp streaming client
+open_cortex/runtime/metrics.py llama.cpp metrics and slots parser
+open_cortex/runtime/events.py  Runtime event model
+tests/                         Runtime and UI regression tests
+```
+
+## Development checks
+
+```bash
+uv run pytest -q
+mise exec -- node --check open_cortex/ui/assets/open_cortex.js
+```
+
+## Submission checklist
+
+- [ ] Deploy Space inside `build-small-hackathon/`.
+- [ ] Confirm the Space launches as a Gradio-compatible submission.
+- [ ] Add final Space URL to this README.
+- [ ] Add demo video URL to this README.
+- [ ] Add social post URL to this README.
+- [ ] Replace screenshot placeholders in `docs/assets/`.
+- [ ] Run the Build Small README validator.
+- [ ] Confirm the model is under 32B parameters.
+
+## License
+
+MIT

app.py

@@ -1,7 +1,5 @@
-from open_cortex.ui.app import build_app
+from open_cortex.ui.app import app, main
 
-demo = build_app()
 
 if __name__ == "__main__":
-    demo.queue()
-    demo.launch()
+    main()

docs/assets/.gitkeep

@@ -0,0 +1 @@
+

docs/superpowers/plans/2026-06-15-context-collapse-retry.md

@@ -0,0 +1,40 @@
+# Context Collapse Retry Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Turn llama.cpp context overflow into a visible Context Collapse event, then trim oldest chat history and retry once.
+
+**Architecture:** Keep llama.cpp client behavior simple: it raises the HTTP 400 from llama.cpp. The UI service layer catches the overflow, emits a `context_collapse` NDJSON event, trims oldest non-system messages, and retries once. The browser renders the collapse boundary and continues streaming the retried response.
+
+**Tech Stack:** Python FastAPI streaming NDJSON, httpx, vanilla JS, CSS.
+
+---
+
+### Task 1: Backend Collapse Event And Retry
+
+**Files:**
+- Modify: `open_cortex/ui/app.py`
+- Test: `tests/ui/test_app.py`
+
+- [ ] Write a failing test that monkeypatches `stream_chat_events` to raise an HTTP 400 overflow on the first call and stream a normal response on the second call.
+- [ ] Implement `_is_context_overflow`, `_trim_for_context_collapse`, and retry-once logic in `_stream_events`.
+- [ ] Verify the stream contains `request_started`, `context_collapse`, then retried response events.
+
+### Task 2: Frontend Collapse Boundary
+
+**Files:**
+- Modify: `open_cortex/ui/assets/open_cortex.js`
+- Modify: `open_cortex/ui/assets/open_cortex.css`
+
+- [ ] Add `applyContextCollapse(event)` to mark old messages as `historical-context`, insert `active-context-boundary`, and switch the right panel to collapse visuals.
+- [ ] Ensure the next retried stream reuses the same assistant bubble.
+- [ ] Run `mise exec -- node --check open_cortex/ui/assets/open_cortex.js`.
+
+### Task 3: Verification
+
+**Files:**
+- Test: all tests
+
+- [ ] Run `uv run pytest -q`.
+- [ ] Run `uv run python -m py_compile open_cortex/ui/app.py open_cortex/runtime/client.py`.
+- [ ] Restart `uv run python app.py` and manually trigger a long-context continuation.

open_cortex/runtime/client.py

@@ -13,6 +13,39 @@ METRICS_URL = "http://127.0.0.1:8080/metrics"
 SLOTS_URL = "http://127.0.0.1:8080/slots"
 
 
+def _raise_for_status_with_body(response: httpx.Response) -> None:
+    if response.is_error:
+        try:
+            response.read()
+        except httpx.HTTPError:
+            pass
+    response.raise_for_status()
+
+
+def _working_memory_percent(
+    context_tokens: int | None,
+    context_size: int | None,
+) -> float | None:
+    if context_tokens is None or not context_size:
+        return None
+    return round(min(100.0, context_tokens / context_size * 100), 1)
+
+
+def _detect_repetition(text: str) -> bool:
+    normalized = " ".join(text.split())
+    if len(normalized) < 120:
+        return False
+
+    for window in (96, 72, 48, 32):
+        if len(normalized) <= window * 2:
+            continue
+        tail = normalized[-window:]
+        if normalized[:-window].count(tail) >= 1:
+            return True
+
+    return False
+
+
 def stream_chat_events(message: list[ChatMessage]) -> Iterator[RuntimeEvent]:
     request_body = {
         "messages": to_llama_messages(message),
@@ -25,7 +58,12 @@ def stream_chat_events(message: list[ChatMessage]) -> Iterator[RuntimeEvent]:
 
     request_started = time.perf_counter()
     first_token_seen = False
+    first_token_at = None
+    generated_tokens = 0
+    generated_text = ""
     final_stats = None
+    base_context_tokens = None
+    context_size = None
 
     yield RuntimeEvent(
         kind="request_started",
@@ -36,7 +74,7 @@ def stream_chat_events(message: list[ChatMessage]) -> Iterator[RuntimeEvent]:
 
     with httpx.Client(timeout=120.0, trust_env=False) as client:
         with client.stream("POST", CHAT_URL, json=request_body) as response:
-            response.raise_for_status()
+            _raise_for_status_with_body(response)
 
             for line in response.iter_lines():
                 if not line.startswith("data: "):
@@ -54,27 +92,78 @@ def stream_chat_events(message: list[ChatMessage]) -> Iterator[RuntimeEvent]:
                     content = choices[0].get("delta", {}).get("content")
 
                     if content:
+                        now = time.perf_counter()
+                        generated_tokens += 1
+                        generated_text += content
+                        elapsed_ms = (
+                            (now - first_token_at) * 1000
+                            if first_token_at is not None
+                            else 0.0
+                        )
+                        live_tps = (
+                            generated_tokens / (elapsed_ms / 1000)
+                            if elapsed_ms > 0
+                            else None
+                        )
+                        repetition_detected = _detect_repetition(generated_text)
+
                         if not first_token_seen:
                             first_token_seen = True
-                            first_token_at = time.perf_counter()
+                            first_token_at = now
                             ttft_ms = (first_token_at - request_started) * 1000
                             snapshot = fetch_runtime_snapshot(
                                 client,
                                 METRICS_URL,
                                 SLOTS_URL,
                             )
+                            base_context_tokens = (
+                                snapshot.slot_context_tokens[0]
+                                if snapshot.slot_context_tokens
+                                else None
+                            )
+                            context_size = snapshot.slot_context_size
+                            context_tokens = (
+                                base_context_tokens + generated_tokens
+                                if base_context_tokens is not None
+                                else None
+                            )
                             yield RuntimeEvent(
                                 kind="first_token",
                                 text_delta=content,
                                 ttft_ms=ttft_ms,
                                 snapshot=snapshot,
+                                generated_tokens=generated_tokens,
+                                elapsed_ms=0.0,
+                                live_tps=None,
+                                repetition_detected=repetition_detected,
+                                context_tokens=context_tokens,
+                                context_size=context_size,
+                                working_memory_percent=_working_memory_percent(
+                                    context_tokens,
+                                    context_size,
+                                ),
                             )
                         else:
+                            context_tokens = (
+                                base_context_tokens + generated_tokens
+                                if base_context_tokens is not None
+                                else None
+                            )
                             yield RuntimeEvent(
                                 kind="token",
                                 text_delta=content,
                                 ttft_ms=None,
                                 snapshot=None,
+                                generated_tokens=generated_tokens,
+                                elapsed_ms=elapsed_ms,
+                                live_tps=live_tps,
+                                repetition_detected=repetition_detected,
+                                context_tokens=context_tokens,
+                                context_size=context_size,
+                                working_memory_percent=_working_memory_percent(
+                                    context_tokens,
+                                    context_size,
+                                ),
                             )
 
                 if event.get("usage"):
@@ -83,6 +172,7 @@ def stream_chat_events(message: list[ChatMessage]) -> Iterator[RuntimeEvent]:
     if final_stats is not None:
         usage = final_stats["usage"]
         timings = final_stats["timings"]
+        context_tokens = usage["prompt_tokens"] + usage["completion_tokens"]
 
         yield RuntimeEvent(
             kind="request_completed",
@@ -93,4 +183,12 @@ def stream_chat_events(message: list[ChatMessage]) -> Iterator[RuntimeEvent]:
             completion_tokens=usage["completion_tokens"],
             prompt_tps=timings["prompt_per_second"],
             decode_tps=timings["predicted_per_second"],
-        )
+            generated_tokens=usage["completion_tokens"],
+            repetition_detected=_detect_repetition(generated_text),
+            context_tokens=context_tokens,
+            context_size=context_size,
+            working_memory_percent=_working_memory_percent(
+                context_tokens,
+                context_size,
+            ),
+        )

open_cortex/runtime/events.py

@@ -18,7 +18,14 @@ class RuntimeEvent:
     text_delta: str
     ttft_ms: float | None
     snapshot: RuntimeSnapshot | None
+    generated_tokens: int = 0
+    elapsed_ms: float | None = None
+    live_tps: float | None = None
+    repetition_detected: bool = False
+    context_tokens: int | None = None
+    context_size: int | None = None
+    working_memory_percent: float | None = None
     prompt_tokens: int | None = None
     completion_tokens: int | None = None
     prompt_tps: float | None = None
-    decode_tps: float | None = None
+    decode_tps: float | None = None

open_cortex/ui/app.py

@@ -1,138 +1,554 @@
-import gradio as gr
-from open_cortex.ui.gradio_history import history_to_chat_messages
+from __future__ import annotations
+
+import json
+import os
+import re
+import time
+from collections.abc import Iterator
+from pathlib import Path
+from typing import Any
+
+import httpx
+import uvicorn
+from fastapi import FastAPI, Request
+from fastapi.responses import HTMLResponse, StreamingResponse
+from fastapi.staticfiles import StaticFiles
+
 from open_cortex.runtime.client import stream_chat_events
+from open_cortex.runtime.events import RuntimeEvent
+from open_cortex.runtime.messages import ChatMessage
+from open_cortex.runtime.metrics import RuntimeSnapshot
 
 
-def format_runtime(event) -> str:
-    if event.kind == "request_started":
-        return "Phase: request started\nWaiting for first token..."
+ASSET_DIR = Path(__file__).with_name("assets")
+CSS_FILE = ASSET_DIR / "open_cortex.css"
+JS_FILE = ASSET_DIR / "open_cortex.js"
+MAX_COLLAPSE_RETAINED_CHARS = 3000
+COLLAPSED_MESSAGE_CHARS = 1200
+DEFAULT_CONTEXT_SIZE = 2048
 
-    if event.kind == "first_token" and event.snapshot is not None:
-        snapshot = event.snapshot
-        context_tokens = (
-            snapshot.slot_context_tokens[0]
-            if snapshot.slot_context_tokens
-            else None
-        )
 
-        return "\n".join(
-            [
-                "Phase: first token",
-                f"TTFT: {event.ttft_ms:.1f} ms",
-                f"Context: {context_tokens} / {snapshot.slot_context_size}",
-                f"Token Stream: {snapshot.decode_tps} tok/s",
-                (
-                    "Engine: "
-                    f"processing={snapshot.requests_processing} "
-                    f"deferred={snapshot.requests_deferred}"
-                ),
-            ]
-        )
+def _backend_mode() -> str:
+    explicit = os.getenv("OPEN_CORTEX_BACKEND")
+    if explicit:
+        return explicit
+    if os.getenv("SPACE_ID"):
+        return "simulated"
+    return "llama_cpp"
 
-    if event.kind == "request_completed":
-        return "\n".join(
-            [
-                "Phase: completed",
-                f"Prompt tokens: {event.prompt_tokens}",
-                f"Output tokens: {event.completion_tokens}",
-                f"Prefill: {event.prompt_tps:.1f} tok/s",
-                f"Decode: {event.decode_tps:.1f} tok/s",
-            ]
-        )
 
-    return "Phase: decoding"
+def _simulator_delay_seconds() -> float:
+    return float(os.getenv("OPEN_CORTEX_SIMULATOR_DELAY_SECONDS", "0.025"))
 
 
+def _asset_version() -> int:
+    return int(max(CSS_FILE.stat().st_mtime, JS_FILE.stat().st_mtime))
 
-def user(user_message: str, history: list[dict]) -> tuple[str, list[dict]]:
-    if not user_message.strip():
-        return "", history
 
-    return "", history + [
-        {
-            "role": "user",
-            "content": user_message,
-        }
-    ]
+def _memory_blocks() -> str:
+    return "\n".join(
+        '<i class="filled"></i>' if index < 1 else "<i></i>"
+        for index in range(12)
+    )
 
-def bot(history: list):
-    messages = history_to_chat_messages(history)
 
-    history.append(
-        {
-            "role": "assistant",
-            "content": "",
-        }
+def _token_particles() -> str:
+    return "\n".join('<i class="particle"></i>' for _ in range(9))
+
+
+def _latency_trace() -> str:
+    return "\n".join("<i></i>" for _ in range(8))
+
+
+def render_index() -> str:
+    asset_version = _asset_version()
+    return f"""<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OpenCortex Runtime Observatory</title>
+  <link rel="stylesheet" href="/assets/open_cortex.css?v={asset_version}">
+</head>
+<body>
+<main class="app phase-idle" id="app">
+  <header class="topbar">
+    <div class="brand">
+      <div class="mark"></div>
+      <div class="brand-name">OpenCortex</div>
+    </div>
+    <div class="top-actions">
+      <div class="runtime-connection"><span class="live-dot"></span><span>llama.cpp · local</span></div>
+    </div>
+  </header>
+
+  <div class="workspace">
+    <section class="surface conversation">
+      <div class="section-head">
+        <div class="panel-title">Conversation</div>
+        <div class="scenario" id="scenario-label">Live local chat</div>
+      </div>
+
+      <div class="messages" id="messages"></div>
+
+      <div class="composer-wrap">
+        <div class="composer">
+          <textarea id="prompt" placeholder="Ask the local model, then watch inference state change..."></textarea>
+          <div class="composer-actions">
+            <span class="hint">↵ SEND · SHIFT + ↵ NEW LINE</span>
+            <button class="send" id="send" type="button"><span>Send</span><span>↗</span></button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="resizer" id="resizer" role="separator" aria-label="Resize conversation panel" aria-orientation="vertical">
+      <span class="resize-grip"></span>
+      <button class="drawer-toggle" id="drawer-toggle" type="button" aria-label="Show conversation">›</button>
+    </div>
+
+    <section class="surface observatory">
+      <div class="observatory-head">
+        <div class="panel-title">Runtime Observatory</div>
+        <div class="model-state">
+          <div class="model-name">Qwen2.5 1.5B · Q4_K_M</div>
+          <div class="phase-pill" id="phase">IDLE</div>
+          <div class="controls">
+            <select id="experiment" aria-label="Runtime experiment">
+              <option value="live">Live detected</option>
+              <option value="long-context">Sim · Long context stress</option>
+              <option value="memory-pressure">Sim · Memory pressure</option>
+              <option value="slow-decode">Sim · Slow decode</option>
+              <option value="context-collapse">Sim · Context collapse</option>
+            </select>
+            <button class="run-experiment" id="run-experiment" type="button">Run experiment</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="observatory-stage">
+        <div class="runtime-event" id="runtime-event">READY</div>
+        <span class="conduit c1"></span>
+        <span class="conduit c2"></span>
+        <span class="conduit c3"></span>
+        <span class="conduit c4"></span>
+
+        <article class="organ memory active" id="memory-organ">
+          <div class="organ-head">
+            <div class="organ-name">Working Memory</div>
+            <span class="organ-state" id="memory-state">Memory quiet</span>
+          </div>
+          <div class="metric-row">
+            <div><span class="metric-value" id="kv">—</span><span class="metric-unit">%</span></div>
+          </div>
+          <div class="memory-blocks" id="memory-blocks">
+            {_memory_blocks()}
+          </div>
+        </article>
+
+        <article class="organ context active" id="context-organ">
+          <div class="organ-head">
+            <div class="organ-name">Context Window</div>
+            <span class="organ-state" id="context-state">Context resting</span>
+          </div>
+          <div class="metric-row">
+            <div><span class="metric-value" id="context-used">0</span><span class="metric-unit" id="context-unit">/ —</span></div>
+          </div>
+          <div class="context-vessel">
+            <div class="context-fill" id="context-fill"></div>
+            <div class="memory-tape" aria-hidden="true">
+              <i class="memory-segment old"></i><i class="memory-segment old"></i>
+              <i class="memory-segment"></i><i class="memory-segment"></i>
+              <i class="memory-segment"></i><i class="memory-segment"></i>
+              <i class="memory-segment recent"></i><i class="memory-segment recent"></i>
+            </div>
+            <div class="context-ticks"></div>
+            <span class="tape-direction">→</span>
+          </div>
+        </article>
+
+        <article class="organ tokens active" id="tokens-organ">
+          <div class="organ-head">
+            <div class="organ-name">Token Stream</div>
+            <span class="organ-state" id="token-state">Stream dormant</span>
+          </div>
+          <div class="metric-row">
+            <div><span class="metric-value" id="tps">0.0</span><span class="metric-unit">tok/s</span></div>
+          </div>
+          <div class="token-river">
+            {_token_particles()}
+          </div>
+        </article>
+
+        <article class="organ health active" id="engine-organ">
+          <div class="organ-head">
+            <div class="organ-name">Engine State</div>
+            <span class="organ-state" id="health-state">Engine healthy</span>
+          </div>
+          <div class="metric-row">
+            <div><span class="metric-value" id="ttft">—</span><span class="metric-unit">ms</span></div>
+          </div>
+          <div class="latency-trace">{_latency_trace()}</div>
+        </article>
+
+        <div class="core-wrap">
+          <div class="core-rings"></div>
+          <div class="core"></div>
+        </div>
+        <div class="core-copy">
+          <div class="core-label">Cortex Core</div>
+          <div class="core-state" id="core-state">Ready for input</div>
+          <div class="core-detail" id="core-detail">ENGINE IDLE · SLOT AVAILABLE</div>
+        </div>
+      </div>
+
+      <div class="evidence">
+        <div class="evidence-cell">
+          <div class="evidence-head"><span class="measured-dot"></span><span>Measured live by llama.cpp</span></div>
+        </div>
+        <div class="evidence-cell">
+          <div class="evidence-label">Prompt eval</div>
+          <div class="evidence-value" id="prompt-eval">measuring</div>
+        </div>
+        <div class="evidence-cell">
+          <div class="evidence-label" id="evidence-3-label">KV evidence</div>
+          <div class="evidence-value" id="kv-retained">unavailable</div>
+        </div>
+      </div>
+    </section>
+  </div>
+</main>
+<script type="module" src="/assets/open_cortex.js?v={asset_version}"></script>
+</body>
+</html>
+"""
+
+
+def _snapshot_to_payload(snapshot: RuntimeSnapshot | None) -> dict[str, Any] | None:
+    if snapshot is None:
+        return None
+    return {
+        "prompt_tps": snapshot.prompt_tps,
+        "decode_tps": snapshot.decode_tps,
+        "requests_processing": snapshot.requests_processing,
+        "requests_deferred": snapshot.requests_deferred,
+        "active_slots": snapshot.active_slots,
+        "slot_context_tokens": list(snapshot.slot_context_tokens),
+        "slot_context_size": snapshot.slot_context_size,
+    }
+
+
+def event_to_payload(event: RuntimeEvent) -> dict[str, Any]:
+    return {
+        "kind": event.kind,
+        "text_delta": event.text_delta,
+        "ttft_ms": event.ttft_ms,
+        "snapshot": _snapshot_to_payload(event.snapshot),
+        "generated_tokens": event.generated_tokens,
+        "elapsed_ms": event.elapsed_ms,
+        "live_tps": event.live_tps,
+        "repetition_detected": event.repetition_detected,
+        "context_tokens": event.context_tokens,
+        "context_size": event.context_size,
+        "working_memory_percent": event.working_memory_percent,
+        "prompt_tokens": event.prompt_tokens,
+        "completion_tokens": event.completion_tokens,
+        "prompt_tps": event.prompt_tps,
+        "decode_tps": event.decode_tps,
+    }
+
+
+def _http_error_text(exc: httpx.HTTPStatusError) -> str:
+    try:
+        return exc.response.text
+    except httpx.ResponseNotRead:
+        try:
+            exc.response.read()
+        except (httpx.HTTPError, httpx.StreamError):
+            return ""
+        return exc.response.text
+
+
+def _is_context_overflow(exc: httpx.HTTPStatusError) -> bool:
+    return (
+        exc.response.status_code == 400
+        and "exceeds the available context size" in _http_error_text(exc)
     )
 
-    runtime_text = "Phase: idle"
 
-    for event in stream_chat_events(messages):
-        runtime_text = format_runtime(event)
+def _context_size_from_error(exc: httpx.HTTPStatusError) -> int | None:
+    match = re.search(r"context size \((\d+) tokens\)", _http_error_text(exc))
+    if match is None:
+        return None
+    return int(match.group(1))
 
-        if event.text_delta:
-            history[-1]["content"] += event.text_delta
 
-        yield history, runtime_text
+def _trim_for_context_collapse(
+    messages: list[ChatMessage],
+) -> tuple[list[ChatMessage], int]:
+    system_messages = [message for message in messages if message.role == "system"]
+    conversation = [message for message in messages if message.role != "system"]
 
+    if not conversation:
+        return messages, 0
 
+    latest_user_index = next(
+        (
+            index
+            for index in range(len(conversation) - 1, -1, -1)
+            if conversation[index].role == "user"
+        ),
+        len(conversation) - 1,
+    )
+    latest_user = conversation[latest_user_index]
+    recent_start = max(1, len(conversation) - 3)
+    recent = conversation[recent_start:]
+
+    retained: list[ChatMessage] = []
+    for message in recent:
+        if message is latest_user:
+            retained.append(message)
+            continue
+        if len(message.content) > MAX_COLLAPSE_RETAINED_CHARS:
+            retained.append(
+                ChatMessage(
+                    role=message.role,
+                    content=(
+                        "[Earlier content collapsed; recent tail retained.]\n"
+                        + message.content[-COLLAPSED_MESSAGE_CHARS:]
+                    ),
+                )
+            )
+        else:
+            retained.append(message)
+
+    if latest_user not in retained:
+        retained.append(latest_user)
+
+    retained = list(dict.fromkeys(retained))
+    dropped = len(conversation) - len(retained)
+    return [*system_messages, *retained], max(0, dropped)
+
+
+def _parse_messages(raw_messages: Any) -> list[ChatMessage]:
+    if not isinstance(raw_messages, list):
+        return []
+
+    messages: list[ChatMessage] = []
+    for raw_message in raw_messages:
+        if not isinstance(raw_message, dict):
+            continue
+        role = raw_message.get("role")
+        content = raw_message.get("content")
+        if role not in {"system", "user", "assistant"}:
+            continue
+        if not isinstance(content, str) or not content.strip():
+            continue
+        messages.append(ChatMessage(role=role, content=content.strip()))
+
+    return messages
+
+
+def _latest_user_text(messages: list[ChatMessage]) -> str:
+    for message in reversed(messages):
+        if message.role == "user":
+            return message.content
+    return ""
+
+
+def _simulated_answer(messages: list[ChatMessage]) -> str:
+    latest = _latest_user_text(messages).lower()
+    if any(marker in latest for marker in ("story", "故事", "repeat", "loop")):
+        phrase = (
+            "A tiny local model begins exploring a hidden runtime chamber. "
+            "It finds the same sentence again, and the same sentence again. "
+        )
+        return (
+            "I can feel the decode rhythm becoming unstable.\n\n"
+            + phrase * 8
+            + "\n\nOpenCortex marks this as a thought loop because recent generated "
+            "text is repeating instead of moving forward."
+        )
+    if any(marker in latest for marker in ("context", "window", "memory", "上下文", "记忆")):
+        return (
+            "OpenCortex treats the context window as the model's active workspace. "
+            "As the conversation grows, more tokens must be prefetched before decode "
+            "can begin. When the active window fills, older turns are still visible in "
+            "the chat log, but they fall outside what the model can reliably use."
+        )
+    return (
+        "OpenCortex is running in Space demo mode. It simulates the same runtime "
+        "event stream used by the local llama.cpp integration: prefill, first token, "
+        "decode throughput, context pressure, and completion. Run it locally with "
+        "llama.cpp to replace this simulated stream with live engine evidence."
+    )
 
-def build_app() -> gr.Blocks:
-    with gr.Blocks() as demo:
-        gr.Markdown("# OpenCortex Minimal Chat")
 
-        with gr.Row():
-            with gr.Column(scale=2):
-                chatbot = gr.Chatbot(
-                    height=480,
-                )
-                msg = gr.Textbox(
-                    placeholder="Ask the local model...",
-                    show_label=False,
-                )
-                clear = gr.Button("Clear")
-
-            with gr.Column(scale=1):
-                runtime = gr.Textbox(
-                    label="Runtime",
-                    value="Phase: idle",
-                    lines=10,
-                    interactive=False,
-                )
+def _token_chunks(text: str) -> list[str]:
+    chunks = re.findall(r"\S+\s*", text)
+    return chunks or [text]
 
 
-        msg.submit(
-            user,
-            [msg, chatbot],
-            [msg, chatbot],
-            queue=False,
-        ).then(
-            bot,
-            chatbot,
-            [chatbot, runtime],
-        )
+def _stream_simulated_events(messages: list[ChatMessage]) -> Iterator[RuntimeEvent]:
+    answer = _simulated_answer(messages)
+    chunks = _token_chunks(answer)
+    context_size = DEFAULT_CONTEXT_SIZE
+    prompt_tokens = max(24, sum(len(message.content) for message in messages) // 3)
+    base_context_tokens = min(context_size, prompt_tokens + 96)
+    delay_seconds = _simulator_delay_seconds()
 
-        clear.click(
-            lambda: ([], "Phase: idle"),
-            None,
-            [chatbot, runtime],
-            queue=False,
-        )
-    return demo
+    yield RuntimeEvent(kind="request_started", text_delta="", ttft_ms=None, snapshot=None)
 
+    snapshot = RuntimeSnapshot(
+        prompt_tps=72.4,
+        decode_tps=24.6,
+        requests_processing=1,
+        requests_deferred=0,
+        active_slots=1,
+        slot_context_tokens=(base_context_tokens,),
+        slot_context_size=context_size,
+    )
 
-def main() -> None:
-    demo = build_app()
-    demo.queue()
-    demo.launch()
+    generated_text = ""
+    started_at = time.perf_counter()
+    for index, chunk in enumerate(chunks, start=1):
+        if delay_seconds:
+            time.sleep(delay_seconds)
+        generated_text += chunk
+        context_tokens = min(context_size, base_context_tokens + index)
+        event_kind = "first_token" if index == 1 else "token"
+        elapsed_ms = max(0.0, (time.perf_counter() - started_at) * 1000)
+        live_tps = None if index == 1 or elapsed_ms == 0 else index / (elapsed_ms / 1000)
+        repetition_detected = "same sentence again" in generated_text and index > 18
+
+        yield RuntimeEvent(
+            kind=event_kind,
+            text_delta=chunk,
+            ttft_ms=420.0 if index == 1 else None,
+            snapshot=snapshot if index == 1 else None,
+            generated_tokens=index,
+            elapsed_ms=0.0 if index == 1 else elapsed_ms,
+            live_tps=live_tps,
+            repetition_detected=repetition_detected,
+            context_tokens=context_tokens,
+            context_size=context_size,
+            working_memory_percent=round(min(100.0, context_tokens / context_size * 100), 1),
+        )
 
+    final_context_tokens = min(context_size, base_context_tokens + len(chunks))
+    yield RuntimeEvent(
+        kind="request_completed",
+        text_delta="",
+        ttft_ms=None,
+        snapshot=None,
+        generated_tokens=len(chunks),
+        repetition_detected="same sentence again" in generated_text,
+        context_tokens=final_context_tokens,
+        context_size=context_size,
+        working_memory_percent=round(min(100.0, final_context_tokens / context_size * 100), 1),
+        prompt_tokens=prompt_tokens,
+        completion_tokens=len(chunks),
+        prompt_tps=72.4,
+        decode_tps=24.6,
+    )
 
 
-if __name__ == "__main__":
-    main()
+def _stream_events(messages: list[ChatMessage]) -> Iterator[str]:
+    if _backend_mode() == "simulated":
+        for event in _stream_simulated_events(messages):
+            yield json.dumps(event_to_payload(event), ensure_ascii=False) + "\n"
+        return
+
+    try:
+        for event in stream_chat_events(messages):
+            yield json.dumps(event_to_payload(event), ensure_ascii=False) + "\n"
+    except httpx.HTTPStatusError as exc:
+        if _is_context_overflow(exc):
+            trimmed_messages, dropped_messages = _trim_for_context_collapse(messages)
+            yield json.dumps(
+                {
+                    "kind": "context_collapse",
+                    "message": (
+                        "The earliest turns fell outside the active context. "
+                        "OpenCortex trimmed old history and retried with recent memory."
+                    ),
+                    "dropped_messages": dropped_messages,
+                    "retained_messages": len(trimmed_messages),
+                    "context_size": _context_size_from_error(exc),
+                },
+                ensure_ascii=False,
+            ) + "\n"
+            try:
+                for event in stream_chat_events(trimmed_messages):
+                    yield json.dumps(event_to_payload(event), ensure_ascii=False) + "\n"
+                return
+            except httpx.HTTPStatusError as retry_exc:
+                if _is_context_overflow(retry_exc):
+                    payload = {
+                        "kind": "error",
+                        "code": "context_overflow",
+                        "message": (
+                            "The conversation still exceeds llama.cpp's context window "
+                            "after collapse. Start a new run or restart llama-server with "
+                            "a larger -c value."
+                        ),
+                    }
+                else:
+                    payload = {
+                        "kind": "error",
+                        "code": "backend_http_error",
+                        "message": f"{type(retry_exc).__name__}: {retry_exc}",
+                    }
+        else:
+            payload = {
+                "kind": "error",
+                "code": "backend_http_error",
+                "message": f"{type(exc).__name__}: {exc}",
+            }
+        yield json.dumps(payload, ensure_ascii=False) + "\n"
+    except Exception as exc:
+        yield json.dumps(
+            {
+                "kind": "error",
+                "code": "backend_error",
+                "message": f"{type(exc).__name__}: {exc}",
+            },
+            ensure_ascii=False,
+        ) + "\n"
+
+
+def create_app() -> FastAPI:
+    app = FastAPI(title="OpenCortex")
+    app.mount("/assets", StaticFiles(directory=ASSET_DIR), name="assets")
+
+    @app.get("/", response_class=HTMLResponse)
+    def index() -> str:
+        return render_index()
+
+    @app.post("/api/chat")
+    async def chat(request: Request) -> StreamingResponse:
+        payload = await request.json()
+        messages = _parse_messages(payload.get("messages"))
+        return StreamingResponse(
+            _stream_events(messages),
+            media_type="application/x-ndjson",
+        )
 
+    return app
 
 
+app = create_app()
 
 
+def main() -> None:
+    host = os.getenv("OPEN_CORTEX_HOST", "0.0.0.0" if os.getenv("SPACE_ID") else "127.0.0.1")
+    uvicorn.run(
+        "open_cortex.ui.app:app",
+        host=host,
+        port=7860,
+        reload=False,
+    )
 
+
+if __name__ == "__main__":
+    main()

open_cortex/ui/assets/open_cortex.css

@@ -0,0 +1,1410 @@
+  :root {
+    --bg: #06080d;
+    --panel: rgba(12, 16, 24, .82);
+    --panel-2: rgba(15, 21, 31, .76);
+    --line: rgba(151, 176, 211, .13);
+    --line-hot: rgba(84, 216, 255, .38);
+    --text: #e8eef7;
+    --muted: #7f8b9d;
+    --quiet: #536071;
+    --cyan: #53d7f7;
+    --cyan-2: #3aa7d2;
+    --teal: #64e8c2;
+    --yellow: #e7cf72;
+    --orange: #f2a35d;
+    --red: #f06b79;
+    --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
+    --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  * { box-sizing: border-box; }
+
+  html, body {
+    margin: 0;
+    min-width: 1180px;
+    width: 100%;
+    height: 100%;
+    min-height: 100dvh;
+    color: var(--text);
+    background:
+      radial-gradient(circle at 72% 38%, rgba(26, 111, 142, .075), transparent 34%),
+      var(--bg);
+    font-family: var(--sans);
+    overflow: hidden;
+  }
+
+  body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    opacity: .18;
+    background-image:
+      linear-gradient(rgba(132, 164, 204, .025) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(132, 164, 204, .025) 1px, transparent 1px);
+    background-size: 32px 32px;
+    mask-image: linear-gradient(to bottom, black, transparent 88%);
+  }
+
+  button, select, textarea { font: inherit; }
+  button { color: inherit; }
+
+  .app {
+    --chat-width: 40%;
+    position: relative;
+    height: 100vh;
+    height: 100dvh;
+    min-height: 100dvh;
+    padding: 12px;
+    display: grid;
+    grid-template-rows: 44px minmax(0, 1fr);
+    gap: 8px;
+  }
+
+  .topbar {
+    grid-row: 1;
+    position: relative;
+    z-index: 50;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 13px;
+    border: 1px solid var(--line);
+    border-radius: 12px;
+    background: rgba(9, 12, 18, .74);
+    backdrop-filter: blur(22px);
+  }
+
+  .brand, .top-actions, .runtime-connection, .scenario-meta, .metric-row,
+  .composer-actions, .model-state, .organ-head, .evidence-head {
+    display: flex;
+    align-items: center;
+  }
+
+  .brand { gap: 11px; }
+  .mark {
+    position: relative;
+    width: 25px;
+    height: 25px;
+    border: 1px solid rgba(91, 219, 250, .55);
+    border-radius: 8px;
+    background: radial-gradient(circle, rgba(83, 215, 247, .28), transparent 68%);
+  }
+  .mark::before, .mark::after {
+    content: "";
+    position: absolute;
+    inset: 5px;
+    border: 1px solid rgba(91, 219, 250, .5);
+    border-radius: 50%;
+  }
+  .mark::after {
+    inset: 10px;
+    border: 0;
+    background: var(--cyan);
+    box-shadow: 0 0 12px var(--cyan);
+  }
+
+  .brand-name { font-weight: 650; letter-spacing: -.02em; }
+  .top-actions { gap: 8px; }
+  .runtime-connection {
+    gap: 7px;
+    color: #79879a;
+    font: 9px var(--mono);
+  }
+  .live-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--teal);
+    box-shadow: 0 0 8px var(--teal);
+  }
+  .icon-btn {
+    height: 28px;
+    padding: 0 10px;
+    color: #9ca8b8;
+    border: 1px solid var(--line);
+    border-radius: 7px;
+    background: rgba(255, 255, 255, .018);
+    cursor: pointer;
+  }
+  .icon-btn:hover { color: white; border-color: rgba(151, 176, 211, .28); }
+
+  .workspace {
+    grid-row: 2;
+    height: 100%;
+    min-height: 0;
+    display: grid;
+    grid-template-columns: var(--chat-width) 8px minmax(0, 1fr);
+    gap: 0;
+    transition: grid-template-columns .24s ease;
+  }
+  .workspace:has(.resizer.dragging) {
+    transition: none;
+  }
+
+  .surface {
+    height: 100%;
+    min-height: 0;
+    border: 1px solid var(--line);
+    border-radius: 14px;
+    background: var(--panel);
+    backdrop-filter: blur(20px);
+    overflow: hidden;
+  }
+
+  .conversation {
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    transition: opacity .18s ease, transform .24s ease, border-color .18s ease;
+  }
+  .app.chat-collapsed {
+    --chat-width: 0px;
+  }
+  .app.chat-collapsed .conversation {
+    opacity: 0;
+    transform: translateX(-18px);
+    pointer-events: none;
+    border-color: transparent;
+  }
+  .app.collapse-preview .conversation {
+    opacity: .28;
+    transform: translateX(-8px);
+  }
+  .resizer {
+    position: relative;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: col-resize;
+    touch-action: none;
+  }
+  .resizer::before {
+    content: "";
+    width: 1px;
+    height: calc(100% - 24px);
+    background: rgba(151,176,211,.12);
+    transition: width .15s, background .15s;
+  }
+  .resizer:hover::before,
+  .resizer.dragging::before {
+    width: 2px;
+    background: rgba(83,215,247,.5);
+  }
+  .resize-grip {
+    position: absolute;
+    width: 4px;
+    height: 34px;
+    border-radius: 99px;
+    background: #202a38;
+    box-shadow: 0 0 0 1px rgba(151,176,211,.08);
+  }
+  .drawer-toggle {
+    position: absolute;
+    top: 14px;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    border: 1px solid rgba(151,176,211,.16);
+    border-radius: 6px;
+    color: #7f8c9d;
+    background: #0b1018;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity .15s, color .15s;
+  }
+  .app.chat-collapsed .drawer-toggle {
+    opacity: 1;
+    color: var(--cyan);
+  }
+
+  .section-head {
+    min-height: 52px;
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--line);
+  }
+  .eyebrow {
+    color: #708094;
+    font: 9px var(--mono);
+    letter-spacing: .14em;
+    text-transform: uppercase;
+  }
+  .panel-title {
+    font-size: 13px;
+    font-weight: 590;
+    letter-spacing: -.01em;
+  }
+  .scenario {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    padding: 6px 8px;
+    color: #aeb9c7;
+    border: 1px solid rgba(151, 176, 211, .13);
+    border-radius: 6px;
+    background: rgba(255, 255, 255, .018);
+    font-size: 11px;
+  }
+  .scenario::before {
+    content: "";
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--cyan);
+    box-shadow: 0 0 7px rgba(83, 215, 247, .45);
+  }
+
+  .messages {
+    overflow-y: auto;
+    padding: 18px 18px 10px;
+    scrollbar-width: thin;
+    scrollbar-color: #263244 transparent;
+  }
+  .message {
+    max-width: 88%;
+    margin-bottom: 17px;
+  }
+  .message.user { margin-left: auto; }
+  .message-meta {
+    margin-bottom: 6px;
+    color: #667386;
+    font: 9px var(--mono);
+    letter-spacing: .08em;
+    text-transform: uppercase;
+  }
+  .user .message-meta { text-align: right; }
+  .bubble {
+    padding: 11px 13px;
+    border: 1px solid var(--line);
+    border-radius: 11px;
+    color: #cbd5e2;
+    background: rgba(255, 255, 255, .025);
+    font-size: 12px;
+    line-height: 1.6;
+  }
+  .user .bubble {
+    color: #dcf7ff;
+    border-color: rgba(83, 215, 247, .18);
+    background: rgba(40, 128, 158, .1);
+  }
+  .assistant-live .bubble {
+    border-color: rgba(83, 215, 247, .2);
+    background: linear-gradient(135deg, rgba(42, 108, 137, .08), rgba(255,255,255,.018));
+  }
+  .markdown-body p,
+  .markdown-body ul,
+  .markdown-body pre,
+  .markdown-body h1,
+  .markdown-body h2,
+  .markdown-body h3 {
+    margin: 0 0 10px;
+  }
+  .markdown-body :last-child { margin-bottom: 0; }
+  .markdown-body h1,
+  .markdown-body h2,
+  .markdown-body h3 {
+    color: #e8eef7;
+    font-weight: 650;
+    letter-spacing: -.01em;
+    line-height: 1.35;
+  }
+  .markdown-body h1 { font-size: 17px; }
+  .markdown-body h2 { font-size: 15px; }
+  .markdown-body h3 { font-size: 13px; }
+  .markdown-body ul {
+    padding-left: 17px;
+  }
+  .markdown-body li {
+    margin: 4px 0;
+  }
+  .markdown-body code {
+    padding: 1px 5px;
+    border: 1px solid rgba(151,176,211,.14);
+    border-radius: 5px;
+    color: #d9f8ff;
+    background: rgba(3, 8, 14, .5);
+    font: 11px var(--mono);
+  }
+  .markdown-body pre {
+    overflow-x: auto;
+    padding: 10px 11px;
+    border: 1px solid rgba(151,176,211,.12);
+    border-radius: 9px;
+    background: rgba(3, 8, 14, .62);
+  }
+  .markdown-body pre code {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    white-space: pre;
+  }
+  .cursor {
+    display: inline-block;
+    width: 5px;
+    height: 13px;
+    margin-left: 3px;
+    vertical-align: -2px;
+    background: var(--cyan);
+    animation: blink .82s step-end infinite;
+  }
+  @keyframes blink { 50% { opacity: 0; } }
+
+  .composer-wrap {
+    padding: 10px;
+    border-top: 1px solid var(--line);
+    background: rgba(7, 10, 16, .66);
+  }
+  .composer {
+    padding: 10px;
+    border: 1px solid rgba(151, 176, 211, .18);
+    border-radius: 10px;
+    background: rgba(16, 22, 32, .72);
+  }
+  textarea {
+    display: block;
+    width: 100%;
+    height: 42px;
+    resize: none;
+    border: 0;
+    outline: 0;
+    color: #dce5ef;
+    background: transparent;
+    font-size: 12px;
+  }
+  textarea::placeholder { color: #596577; }
+  .composer-actions { justify-content: space-between; }
+  .hint { color: #566273; font: 9px var(--mono); }
+  .send {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    height: 29px;
+    padding: 0 11px;
+    border: 1px solid rgba(91, 219, 250, .38);
+    border-radius: 7px;
+    color: #dcf8ff;
+    background: rgba(46, 155, 190, .13);
+    cursor: pointer;
+  }
+  .send:hover { background: rgba(46, 155, 190, .2); }
+
+  .observatory {
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    background:
+      radial-gradient(circle at 49% 47%, rgba(32, 132, 168, .09), transparent 39%),
+      rgba(8, 12, 19, .84);
+  }
+  .observatory-head {
+    min-height: 52px;
+    padding: 0 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--line);
+  }
+  .model-state { gap: 8px; }
+  .model-name {
+    color: #aab5c4;
+    font: 10px var(--mono);
+  }
+  .phase-pill {
+    min-width: 82px;
+    padding: 5px 8px;
+    border: 1px solid rgba(83, 215, 247, .25);
+    border-radius: 99px;
+    color: var(--cyan);
+    background: rgba(83, 215, 247, .06);
+    font: 9px var(--mono);
+    text-align: center;
+    letter-spacing: .11em;
+    text-transform: uppercase;
+  }
+
+  .observatory-stage {
+    position: relative;
+    min-height: 0;
+    overflow: hidden;
+  }
+  .observatory-stage::before,
+  .observatory-stage::after {
+    content: "";
+    position: absolute;
+    pointer-events: none;
+  }
+  .observatory-stage::before {
+    inset: 9% 18%;
+    border: 1px solid rgba(91, 219, 250, .06);
+    border-radius: 50%;
+  }
+  .observatory-stage::after {
+    inset: 23% 32%;
+    border: 1px dashed rgba(91, 219, 250, .09);
+    border-radius: 50%;
+    animation: rotate 28s linear infinite;
+  }
+  @keyframes rotate { to { transform: rotate(360deg); } }
+
+  .conduit {
+    position: absolute;
+    z-index: 1;
+    height: 1px;
+    transform-origin: left center;
+    background: linear-gradient(90deg, rgba(83,215,247,.05), rgba(83,215,247,.28), rgba(83,215,247,.05));
+  }
+  .conduit::after {
+    content: "";
+    position: absolute;
+    top: -1px;
+    left: 0;
+    width: 34px;
+    height: 3px;
+    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
+    filter: blur(.2px);
+    animation: signal 2.2s linear infinite;
+  }
+  @keyframes signal { from { transform: translateX(0); } to { transform: translateX(190px); } }
+  .c1 { left: 30%; top: 28%; width: 190px; transform: rotate(25deg); }
+  .c2 { left: 54%; top: 45%; width: 180px; transform: rotate(-27deg); }
+  .c3 { left: 30%; top: 70%; width: 190px; transform: rotate(-23deg); }
+  .c4 { left: 54%; top: 53%; width: 175px; transform: rotate(28deg); }
+
+  .core-wrap {
+    position: absolute;
+    z-index: 3;
+    left: 50%;
+    top: 50%;
+    width: 188px;
+    height: 188px;
+    transform: translate(-50%, -50%);
+  }
+  .core-rings, .core, .core::before, .core::after {
+    position: absolute;
+    border-radius: 50%;
+  }
+  .core-rings {
+    inset: 0;
+    border: 1px solid rgba(83, 215, 247, .13);
+    box-shadow: inset 0 0 42px rgba(83, 215, 247, .04);
+    animation: breathe 3s ease-in-out infinite;
+  }
+  .core-rings::before, .core-rings::after {
+    content: "";
+    position: absolute;
+    border-radius: 50%;
+    border: 1px dashed rgba(83, 215, 247, .2);
+  }
+  .core-rings::before { inset: 13px; animation: rotate 16s linear infinite; }
+  .core-rings::after { inset: 31px; animation: rotate 11s linear infinite reverse; }
+  .core {
+    inset: 43px;
+    background:
+      radial-gradient(circle at 36% 28%, rgba(220, 251, 255, .92), rgba(92, 219, 247, .5) 11%, rgba(27, 119, 153, .4) 29%, rgba(6, 18, 27, .9) 68%);
+    box-shadow:
+      0 0 25px rgba(83, 215, 247, .35),
+      0 0 70px rgba(23, 130, 168, .16),
+      inset -9px -13px 25px rgba(0, 0, 0, .6);
+    animation: core-pulse 1.35s ease-in-out infinite;
+  }
+  .core::before {
+    content: "";
+    inset: 9px;
+    border: 1px solid rgba(186, 245, 255, .23);
+  }
+  .core::after {
+    content: "";
+    left: 24px;
+    top: 18px;
+    width: 17px;
+    height: 9px;
+    background: rgba(225, 253, 255, .55);
+    filter: blur(5px);
+    transform: rotate(-28deg);
+  }
+  @keyframes breathe {
+    50% { transform: scale(1.025); border-color: rgba(83, 215, 247, .24); }
+  }
+  @keyframes core-pulse {
+    50% {
+      transform: scale(1.075);
+      box-shadow: 0 0 36px rgba(83, 215, 247, .48), 0 0 90px rgba(23, 130, 168, .22), inset -9px -13px 25px rgba(0,0,0,.6);
+    }
+  }
+  .core-copy {
+    position: absolute;
+    z-index: 4;
+    left: 50%;
+    top: calc(50% + 105px);
+    transform: translateX(-50%);
+    text-align: center;
+    white-space: nowrap;
+  }
+  .core-label {
+    color: #718195;
+    font: 9px var(--mono);
+    letter-spacing: .15em;
+    text-transform: uppercase;
+  }
+  .core-state {
+    margin-top: 5px;
+    color: #dffaff;
+    font-size: 15px;
+    font-weight: 590;
+  }
+  .core-detail {
+    margin-top: 4px;
+    color: #688195;
+    font: 9px var(--mono);
+  }
+
+  .organ {
+    position: absolute;
+    z-index: 5;
+    width: 218px;
+    min-height: 112px;
+    padding: 12px;
+    border: 1px solid rgba(151, 176, 211, .14);
+    border-radius: 12px;
+    background: rgba(11, 16, 24, .78);
+    backdrop-filter: blur(16px);
+    transition: border-color .3s, transform .3s, box-shadow .3s;
+  }
+  .organ.active {
+    border-color: rgba(151, 176, 211, .17);
+    box-shadow: inset 0 0 25px rgba(83, 215, 247, .012);
+  }
+  .memory { left: 3.5%; top: 8%; }
+  .context { right: 3.5%; top: 8%; }
+  .tokens { left: 3.5%; bottom: 7%; }
+  .health { right: 3.5%; bottom: 7%; }
+  .organ-head { justify-content: space-between; }
+  .organ-name {
+    color: #8f9db0;
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: .025em;
+  }
+  .organ-state {
+    color: #8198a8;
+    font: 9px var(--mono);
+    letter-spacing: .03em;
+  }
+  .metric-row {
+    justify-content: space-between;
+    margin-top: 12px;
+  }
+  .metric-value {
+    font: 18px var(--mono);
+    letter-spacing: -.04em;
+  }
+  .metric-unit {
+    margin-left: 3px;
+    color: #637084;
+    font: 9px var(--mono);
+  }
+
+  .meter {
+    position: relative;
+    height: 5px;
+    margin-top: 11px;
+    overflow: hidden;
+    border-radius: 99px;
+    background: #1a2330;
+  }
+  .meter-fill {
+    width: 63%;
+    height: 100%;
+    border-radius: inherit;
+    background: linear-gradient(90deg, #277f9d, var(--cyan));
+    box-shadow: 0 0 9px rgba(83, 215, 247, .35);
+    transition: width .45s ease;
+  }
+  .memory-blocks {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 3px;
+    height: 30px;
+    margin-top: 9px;
+    padding: 3px;
+    border: 1px solid rgba(151, 176, 211, .12);
+    border-radius: 6px;
+    background: rgba(3, 8, 14, .72);
+  }
+  .memory-blocks i {
+    position: relative;
+    border: 1px solid rgba(83, 215, 247, .18);
+    border-radius: 2px;
+    background: rgba(83, 215, 247, .08);
+    transition: opacity .35s, transform .35s, background .35s;
+  }
+  .memory-blocks i::after {
+    content: "";
+    position: absolute;
+    left: 3px;
+    right: 3px;
+    bottom: 2px;
+    height: 1px;
+    background: rgba(255,255,255,.1);
+  }
+  .memory-blocks i.filled {
+    background: rgba(83, 215, 247, .48);
+    box-shadow: 0 0 5px rgba(83, 215, 247, .18);
+  }
+  .context-vessel {
+    position: relative;
+    height: 34px;
+    margin-top: 10px;
+    overflow: hidden;
+    border: 1px solid rgba(151, 176, 211, .14);
+    border-radius: 7px;
+    background: rgba(3, 8, 14, .8);
+  }
+  .context-fill {
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 59%;
+    height: 100%;
+    background: linear-gradient(90deg, rgba(48,148,181,.08), rgba(48,148,181,.22));
+    border-right: 1px solid rgba(83, 215, 247, .48);
+    transition: width .45s ease;
+  }
+  .context-ticks {
+    position: absolute;
+    z-index: 3;
+    inset: 0;
+    background: repeating-linear-gradient(90deg, transparent 0 17px, rgba(255,255,255,.055) 18px);
+  }
+  .memory-tape {
+    position: absolute;
+    z-index: 2;
+    inset: 4px;
+    display: flex;
+    gap: 3px;
+    align-items: stretch;
+  }
+  .memory-segment {
+    flex: 1;
+    border-radius: 2px;
+    background: rgba(104, 205, 232, .16);
+    border: 1px solid rgba(104, 205, 232, .08);
+    transition: opacity .7s, transform .7s, filter .7s;
+  }
+  .memory-segment.old { opacity: .45; }
+  .memory-segment.recent {
+    background: rgba(83, 215, 247, .38);
+    box-shadow: 0 0 6px rgba(83,215,247,.15);
+  }
+  .context-forgetting .memory-segment.old {
+    opacity: 0;
+    transform: translateX(-18px) scaleX(.2);
+    filter: blur(3px);
+  }
+  .tape-direction {
+    position: absolute;
+    z-index: 4;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: rgba(196, 242, 252, .6);
+    font: 9px var(--mono);
+  }
+
+  .token-river {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    height: 31px;
+    margin-top: 10px;
+    overflow: hidden;
+    padding: 0 7px;
+    border: 1px solid rgba(151,176,211,.13);
+    border-radius: 99px;
+    background: linear-gradient(180deg, rgba(83,215,247,.04), rgba(3,8,14,.84));
+  }
+  .token-river::before,
+  .token-river::after {
+    content: "";
+    position: absolute;
+    left: 5px;
+    right: 5px;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(83,215,247,.24), transparent);
+  }
+  .token-river::before { top: 5px; }
+  .token-river::after { bottom: 5px; }
+  .particle {
+    flex: 0 0 auto;
+    width: 17px;
+    height: 6px;
+    border-radius: 2px;
+    background: linear-gradient(90deg, rgba(83,215,247,.17), rgba(83,215,247,.92));
+    box-shadow: 0 0 7px rgba(83,215,247,.2);
+    animation: flow 1.35s linear infinite;
+  }
+  .particle:nth-child(2n) { width: 8px; opacity: .72; animation-delay: -.5s; }
+  .particle:nth-child(3n) { width: 12px; opacity: .45; animation-delay: -.9s; }
+  @keyframes flow {
+    from { transform: translateX(-26px); opacity: .15; }
+    25% { opacity: 1; }
+    to { transform: translateX(48px); opacity: .15; }
+  }
+
+  .latency-trace {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    height: 30px;
+    margin-top: 9px;
+    padding: 0 4px;
+    border-left: 1px solid rgba(151,176,211,.15);
+    border-right: 1px solid rgba(151,176,211,.15);
+    background: linear-gradient(180deg, transparent 48%, rgba(151,176,211,.1) 49%, rgba(151,176,211,.1) 51%, transparent 52%);
+  }
+  .latency-trace i {
+    flex: 1;
+    height: 12%;
+    border-radius: 2px;
+    background: rgba(83, 215, 247, .42);
+    animation: trace 1.6s ease-in-out infinite;
+  }
+  .latency-trace i:nth-child(2) { height: 24%; animation-delay: -.2s; }
+  .latency-trace i:nth-child(3) { height: 52%; animation-delay: -.4s; }
+  .latency-trace i:nth-child(4) { height: 92%; animation-delay: -.6s; }
+  .latency-trace i:nth-child(5) { height: 28%; animation-delay: -.8s; }
+  .latency-trace i:nth-child(6) { height: 18%; animation-delay: -1s; }
+  .latency-trace i:nth-child(7) { height: 38%; animation-delay: -1.2s; }
+  .latency-trace i:nth-child(8) { height: 14%; animation-delay: -1.4s; }
+  @keyframes trace { 50% { opacity: .35; transform: scaleY(.75); } }
+
+  .evidence {
+    min-height: 38px;
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    padding: 0 14px;
+    border-top: 1px solid var(--line);
+    background: rgba(7, 10, 15, .74);
+  }
+  .evidence-cell {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+  }
+  .evidence-head { gap: 7px; color: #78879a; font-size: 9px; }
+  .measured-dot {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--cyan);
+    box-shadow: 0 0 6px var(--cyan);
+  }
+  .evidence-label {
+    color: #5f6d80;
+    font: 8px var(--mono);
+    letter-spacing: .07em;
+    text-transform: uppercase;
+  }
+  .evidence-value {
+    margin-top: 0;
+    overflow: hidden;
+    color: #b9c6d5;
+    font: 11px var(--mono);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .controls {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+  }
+  select {
+    height: 27px;
+    padding: 0 25px 0 8px;
+    color: #9ba8b8;
+    border: 1px solid var(--line);
+    border-radius: 7px;
+    outline: 0;
+    background: #0c1119;
+    font-size: 10px;
+  }
+  .run-experiment {
+    height: 27px;
+    padding: 0 10px;
+    color: #d9f8ff;
+    border: 1px solid rgba(83, 215, 247, .3);
+    border-radius: 7px;
+    background: rgba(83, 215, 247, .075);
+    font-size: 10px;
+    cursor: pointer;
+  }
+
+  .app.phase-idle .core {
+    opacity: .42;
+    animation: none;
+    transform: scale(.86);
+  }
+  .app.phase-idle .core-rings,
+  .app.phase-idle .conduit::after,
+  .app.phase-idle .particle {
+    animation-play-state: paused;
+    opacity: .2;
+  }
+  .app.phase-prefill .core {
+    animation: charge .72s ease-in-out infinite alternate;
+  }
+  .app.phase-prefill .core-rings::before { animation-duration: 2.2s; }
+  .app.phase-prefill .core-rings::after { animation-duration: 1.4s; }
+  .app.phase-prefill .tokens .particle { animation-play-state: paused; opacity: .14; }
+  .app.phase-prefill .memory,
+  .app.phase-prefill .context {
+    border-color: rgba(83, 215, 247, .4);
+    box-shadow: inset 0 0 24px rgba(83, 215, 247, .05);
+  }
+  @keyframes charge {
+    from { transform: scale(.75); filter: brightness(.7); }
+    to { transform: scale(1.12); filter: brightness(1.35); }
+  }
+  .app.phase-decode .core { animation: core-pulse 1.35s ease-in-out infinite; }
+  .app.core-slow .core { animation-duration: 2.9s; }
+  .assistant-live.slow-stream .cursor { animation-duration: 1.8s; }
+  .app.phase-recovery .core {
+    animation: recovery 1.1s ease-out infinite;
+    background: radial-gradient(circle at 36% 28%, #fff2e4, rgba(242,163,93,.7) 12%, rgba(145,73,39,.42) 35%, rgba(12,9,8,.94) 72%);
+  }
+
+  .memory.memory-pressure {
+    border-color: rgba(242, 163, 93, .28);
+    box-shadow: inset 0 0 25px rgba(242,163,93,.04);
+  }
+  .memory.memory-pressure .organ-state { color: var(--orange); }
+  .memory.memory-pressure .memory-blocks i.filled {
+    background: rgba(242,163,93,.5);
+    border-color: rgba(242,163,93,.4);
+  }
+  .memory.memory-pressure .memory-blocks i:nth-child(3n) {
+    animation: fragment .66s ease-in-out infinite alternate;
+  }
+  .memory.memory-pressure .memory-blocks i:nth-child(4n) {
+    animation: evict 1.8s ease-in-out infinite;
+  }
+  .memory.memory-overloaded {
+    border-color: rgba(240,107,121,.4);
+    animation: shake .28s linear infinite;
+  }
+  .memory.memory-overloaded .organ-state { color: var(--red); }
+  .memory.memory-overloaded .memory-blocks i.filled {
+    background: rgba(240,107,121,.56);
+    border-color: rgba(240,107,121,.45);
+  }
+
+  .context.context-pressure {
+    border-color: rgba(242, 163, 93, .3);
+  }
+  .context.context-pressure .organ-state { color: var(--orange); }
+  .context.context-pressure .context-vessel {
+    animation: pressure 1.35s ease-in-out infinite;
+  }
+  .context.context-pressure .context-fill {
+    background: rgba(242,163,93,.18);
+    border-color: rgba(242,163,93,.62);
+  }
+  .tokens.tokens-slow {
+    border-color: rgba(242,163,93,.34);
+  }
+  .tokens.tokens-slow .organ-state { color: var(--orange); }
+  .tokens.tokens-slow .particle {
+    animation: broken-flow 3.2s steps(7, end) infinite;
+    background: linear-gradient(90deg, rgba(242,163,93,.12), rgba(242,163,93,.9));
+  }
+  .tokens.tokens-stalled {
+    border-color: rgba(240,107,121,.4);
+  }
+  .tokens.tokens-stalled .organ-state { color: var(--red); }
+  .tokens.tokens-stalled .particle {
+    animation: stalled-flow 5s steps(3, end) infinite;
+    background: rgba(240,107,121,.55);
+  }
+
+  .health.engine-strained {
+    border-color: rgba(242,163,93,.3);
+  }
+  .health.engine-strained .organ-state { color: var(--orange); }
+  .health.engine-strained .latency-trace i {
+    background: rgba(242,163,93,.55);
+    animation-duration: .7s;
+  }
+  .health.engine-recovery {
+    border-color: rgba(240,107,121,.34);
+  }
+  .health.engine-recovery .organ-state { color: var(--red); }
+  .health.engine-recovery .latency-trace i {
+    background: rgba(240,107,121,.58);
+    animation: recovery-bars .52s steps(3, end) infinite;
+  }
+
+  /* Scenario-specific signal paths into the Cortex Core. */
+  .app.scenario-memory .c1 {
+    height: 2px;
+    background: repeating-linear-gradient(90deg, rgba(242,163,93,.08) 0 8px, rgba(242,163,93,.72) 8px 15px, transparent 15px 24px);
+    animation: connection-fault .38s steps(2, end) infinite;
+  }
+  .app.scenario-memory .c1::after {
+    background: linear-gradient(90deg, transparent, var(--orange), transparent);
+    animation: signal-stutter 1.1s steps(4, end) infinite;
+  }
+  .app.scenario-memory .core {
+    animation: memory-core-strain .82s steps(5, end) infinite;
+  }
+  .app.scenario-memory .core-rings::before {
+    border-left-color: rgba(242,163,93,.85);
+    border-top-color: rgba(242,163,93,.36);
+    animation-duration: 2.1s;
+  }
+
+  .app.scenario-slow .c3 {
+    height: 2px;
+    background: repeating-linear-gradient(90deg, rgba(242,163,93,.65) 0 13px, transparent 13px 31px);
+    animation: conduit-blackout 3.4s steps(5, end) infinite;
+  }
+  .app.scenario-slow .c3::after {
+    background: linear-gradient(90deg, transparent, var(--orange), transparent);
+    animation: signal-burst 3.4s steps(7, end) infinite;
+  }
+  .app.scenario-slow .core {
+    animation: slow-core-beat 3.4s steps(7, end) infinite;
+  }
+
+  .app.scenario-collapse .c2 {
+    height: 2px;
+    opacity: .24;
+    background: repeating-linear-gradient(90deg, rgba(240,107,121,.55) 0 7px, transparent 7px 20px);
+    animation: context-disconnect .7s steps(2, end) infinite;
+  }
+  .app.scenario-collapse .c2::after { display: none; }
+  .app.scenario-collapse .core {
+    animation: context-core-loss 1.15s steps(5, end) infinite;
+  }
+  .app.scenario-collapse .core-rings::after {
+    border-right-color: rgba(240,107,121,.72);
+    opacity: .42;
+  }
+
+  .app.scenario-loop .c3 {
+    height: 2px;
+    background: repeating-linear-gradient(90deg, rgba(240,107,121,.7) 0 9px, transparent 9px 18px);
+    animation: loop-conduit 1.15s steps(4, end) infinite;
+  }
+  .app.scenario-loop .c3::after {
+    background: linear-gradient(90deg, transparent, var(--red), transparent);
+    animation: loop-signal 1.15s steps(5, end) infinite;
+  }
+  .app.scenario-loop .tokens {
+    border-color: rgba(240,107,121,.44);
+    box-shadow: 0 0 30px rgba(240,107,121,.14);
+  }
+  .app.scenario-loop .tokens .particle {
+    background: var(--red);
+    box-shadow: 0 0 10px rgba(240,107,121,.7);
+    animation: loop-token 1.15s steps(5, end) infinite;
+  }
+  .app.scenario-loop .tokens .particle:nth-child(2n) { animation-delay: -.08s; }
+  .app.scenario-loop .tokens .particle:nth-child(3n) { animation-delay: -.17s; }
+  .app.scenario-loop .core {
+    animation: thought-loop-core 1.15s steps(5, end) infinite;
+  }
+  .app.scenario-loop .core-rings::before {
+    border-bottom-color: rgba(240,107,121,.84);
+    border-left-color: rgba(240,107,121,.42);
+    animation-duration: 1.15s;
+  }
+
+  .app.hazard-context-full .observatory-stage::before,
+  .app.hazard-loop .observatory-stage::before {
+    border-color: rgba(240,107,121,.16);
+    box-shadow:
+      inset 0 0 80px rgba(240,107,121,.045),
+      0 0 120px rgba(240,107,121,.045);
+    animation: danger-atmosphere 1.8s ease-in-out infinite;
+  }
+  .app.hazard-context-full .runtime-event {
+    border-color: rgba(242,163,93,.9);
+    color: #fff1dc;
+    background:
+      linear-gradient(90deg, rgba(49,22,8,.94), rgba(76,31,10,.94), rgba(49,22,8,.94));
+    box-shadow:
+      0 0 0 1px rgba(242,163,93,.18),
+      0 0 38px rgba(242,163,93,.24),
+      0 0 92px rgba(240,107,121,.12);
+  }
+  .app.hazard-loop .runtime-event {
+    border-color: rgba(240,107,121,.9);
+    color: #ffe3e7;
+    background:
+      linear-gradient(90deg, rgba(45,7,17,.95), rgba(76,12,26,.94), rgba(45,7,17,.95));
+    box-shadow:
+      0 0 0 1px rgba(240,107,121,.2),
+      0 0 42px rgba(240,107,121,.3),
+      0 0 110px rgba(240,107,121,.16);
+  }
+  .app.hazard-context-full .context {
+    border-color: rgba(242,163,93,.62);
+    box-shadow: 0 0 36px rgba(242,163,93,.12), inset 0 0 28px rgba(242,163,93,.05);
+  }
+  .app.hazard-context-full .context .context-vessel {
+    animation: context-full-shock .74s steps(3, end) infinite;
+  }
+  .app.hazard-context-full .context .context-fill {
+    background: rgba(242,163,93,.24);
+    border-color: rgba(255,211,137,.9);
+    box-shadow: inset -9px 0 16px rgba(242,163,93,.24);
+  }
+  .app.hazard-context-full .core-rings {
+    border-color: rgba(242,163,93,.32);
+    box-shadow: 0 0 46px rgba(242,163,93,.08), inset 0 0 52px rgba(242,163,93,.06);
+  }
+  .app.hazard-context-full .core-rings::after {
+    border-color: rgba(242,163,93,.42);
+    animation: rotate 3.8s linear infinite reverse;
+  }
+  .app.hazard-loop .core-rings {
+    border-color: rgba(240,107,121,.34);
+    box-shadow: 0 0 52px rgba(240,107,121,.1), inset 0 0 52px rgba(240,107,121,.06);
+  }
+  .app.hazard-loop .core-rings::after {
+    border-color: rgba(240,107,121,.46);
+    animation: rotate 2.2s steps(9, end) infinite;
+  }
+
+  /* Memory pressure is relocation, eviction, and refill rather than a color change. */
+  .memory.memory-pressure .memory-blocks {
+    animation: bank-jolt 1.8s steps(4, end) infinite;
+  }
+  .memory.memory-pressure .memory-blocks i:nth-child(1) {
+    animation: relocate-a 1.8s steps(4, end) infinite;
+  }
+  .memory.memory-pressure .memory-blocks i:nth-child(2) {
+    animation: relocate-b 1.8s steps(4, end) infinite;
+  }
+  .memory.memory-pressure .memory-blocks i:nth-child(5) {
+    animation: relocate-c 1.8s steps(4, end) infinite;
+  }
+  .memory.memory-pressure .memory-blocks i:nth-child(8) {
+    animation: relocate-d 1.8s steps(4, end) infinite;
+  }
+  .memory.memory-pressure .memory-blocks i:nth-child(4),
+  .memory.memory-pressure .memory-blocks i:nth-child(10) {
+    animation: cell-blackout 1.8s steps(4, end) infinite;
+  }
+
+  /* Slow decode is an unmistakable stop-burst-stop rhythm. */
+  .tokens.tokens-slow .particle {
+    animation: token-burst 3.4s steps(8, end) infinite;
+  }
+  .tokens.tokens-slow .particle:nth-child(2n) { animation-delay: -.12s; }
+  .tokens.tokens-slow .particle:nth-child(3n) { animation-delay: -.24s; }
+
+  .message.context-fading { opacity: .4; transition: opacity 1s; }
+  .message.outside-context {
+    opacity: .23;
+    filter: grayscale(.8);
+  }
+  .message.context-ejected {
+    animation: context-pop-out 1.05s cubic-bezier(.2, .7, .2, 1) both;
+  }
+  .message.outside-context .bubble {
+    border-style: dashed;
+  }
+  .context-badge {
+    display: none;
+    margin-top: 5px;
+    color: var(--red);
+    font: 8px var(--mono);
+    letter-spacing: .08em;
+    text-transform: uppercase;
+  }
+  .message.outside-context .context-badge { display: block; }
+  .active-context-boundary {
+    display: none;
+    align-items: center;
+    gap: 9px;
+    margin: -2px 0 17px;
+    color: rgba(240, 107, 121, .88);
+    font: 8px var(--mono);
+    letter-spacing: .1em;
+    text-transform: uppercase;
+  }
+  .active-context-boundary::before,
+  .active-context-boundary::after {
+    content: "";
+    height: 1px;
+    flex: 1;
+    background: linear-gradient(90deg, transparent, rgba(240,107,121,.72));
+  }
+  .active-context-boundary::after {
+    background: linear-gradient(90deg, rgba(240,107,121,.72), transparent);
+  }
+  .messages.context-limited .active-context-boundary {
+    display: flex;
+    animation: boundary-arrive .7s ease-out;
+  }
+  .messages.context-limited .historical-context {
+    opacity: .18;
+    filter: grayscale(.9) blur(.25px);
+    transform: scale(.985);
+    transition: opacity .9s, filter .9s, transform .9s;
+  }
+  .messages.context-limited .historical-context .bubble {
+    border-style: dashed;
+  }
+
+  .runtime-event {
+    position: absolute;
+    z-index: 10;
+    left: 50%;
+    top: 50%;
+    min-width: 220px;
+    padding: 12px 16px;
+    transform: translate(-50%, -50%) scale(.9);
+    border: 1px solid rgba(240,107,121,.5);
+    border-radius: 10px;
+    color: #ffdce2;
+    background: rgba(30,8,16,.9);
+    box-shadow: 0 0 42px rgba(240,107,121,.14);
+    font: 10px var(--mono);
+    letter-spacing: .08em;
+    text-align: center;
+    opacity: 0;
+    pointer-events: none;
+    overflow: hidden;
+  }
+  .runtime-event.hazard {
+    min-width: 276px;
+    padding: 14px 20px;
+    font-size: 11px;
+    letter-spacing: .11em;
+  }
+  .runtime-event.critical {
+    transform: translate(-50%, -50%) scale(1.04);
+  }
+  .runtime-event.hazard::before,
+  .runtime-event.hazard::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .runtime-event.hazard::before {
+    border-radius: inherit;
+    box-shadow: inset 0 0 20px rgba(255,255,255,.05);
+  }
+  .runtime-event.hazard::after {
+    width: 42%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
+    transform: skewX(-18deg) translateX(-140%);
+    animation: loop-warning-scan 1.25s linear infinite;
+  }
+  .runtime-event.visible {
+    animation: event-pop 1.55s ease-in-out forwards;
+  }
+  .runtime-event.sticky {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+    animation: none;
+  }
+
+  @keyframes fragment {
+    to { transform: translateY(2px) rotate(3deg); opacity: .55; }
+  }
+  @keyframes evict {
+    55% { transform: translateY(-7px) scale(.8); opacity: .08; }
+    72% { transform: translateY(2px) scale(.7); opacity: 0; }
+    100% { transform: none; opacity: 1; }
+  }
+  @keyframes broken-flow {
+    0% { transform: translateX(-25px); opacity: .1; }
+    18%, 42% { transform: translateX(5px); opacity: 1; }
+    43%, 70% { transform: translateX(5px); opacity: .2; }
+    100% { transform: translateX(48px); opacity: .35; }
+  }
+  @keyframes boundary-arrive {
+    from { opacity: 0; transform: scaleX(.72); }
+    to { opacity: 1; transform: scaleX(1); }
+  }
+  @keyframes context-pop-out {
+    0% { opacity: 1; transform: translateX(0) scale(1); filter: none; }
+    42% { opacity: .72; transform: translateX(-10px) scale(.99); filter: grayscale(.2); }
+    100% { opacity: .23; transform: translateX(-20px) scale(.97); filter: grayscale(.8) blur(.25px); }
+  }
+  @keyframes connection-fault {
+    50% { opacity: .28; filter: brightness(1.8); }
+  }
+  @keyframes signal-stutter {
+    0%, 22% { transform: translateX(0); opacity: .1; }
+    35% { transform: translateX(55px); opacity: 1; }
+    36%, 58% { transform: translateX(55px); opacity: .12; }
+    100% { transform: translateX(175px); opacity: .8; }
+  }
+  @keyframes signal-burst {
+    0%, 57% { transform: translateX(0); opacity: 0; }
+    63% { opacity: 1; }
+    78% { transform: translateX(165px); opacity: 1; }
+    79%, 100% { transform: translateX(165px); opacity: 0; }
+  }
+  @keyframes conduit-blackout {
+    0%, 55% { opacity: .12; }
+    60%, 79% { opacity: 1; filter: brightness(1.6); }
+    80%, 100% { opacity: .18; }
+  }
+  @keyframes context-disconnect {
+    50% { opacity: .06; transform: rotate(-27deg) translateX(3px); }
+  }
+  @keyframes memory-core-strain {
+    0%, 100% {
+      transform: translate(-2px, -2px) scale(.92);
+      box-shadow: -18px -15px 34px rgba(242,163,93,.35), 0 0 45px rgba(83,215,247,.18), inset -9px -13px 25px rgba(0,0,0,.6);
+    }
+    24% { transform: translate(3px, -1px) scale(1.1); }
+    42% { transform: translate(-4px, 2px) scale(.86); filter: brightness(.7); }
+    70% { transform: translate(1px, 1px) scale(1.04); filter: brightness(1.25); }
+  }
+  @keyframes slow-core-beat {
+    0%, 55% { transform: scale(.86); opacity: .58; }
+    60% { transform: scale(1.15); opacity: 1; }
+    72% { transform: scale(.94); opacity: .75; }
+    100% { transform: scale(.86); opacity: .58; }
+  }
+  @keyframes context-core-loss {
+    0%, 100% {
+      transform: translate(2px, -2px) scale(.94);
+      box-shadow: 18px -14px 34px rgba(240,107,121,.27), 0 0 38px rgba(83,215,247,.13), inset -9px -13px 25px rgba(0,0,0,.6);
+    }
+    42% { transform: translate(-1px, 2px) scale(.8); opacity: .48; }
+    55% { transform: translate(3px, -3px) scale(1.06); opacity: .9; }
+  }
+  @keyframes bank-jolt {
+    0%, 100% { transform: translateX(0); }
+    28% { transform: translateX(-3px); }
+    32% { transform: translateX(4px); }
+    38% { transform: translateX(-2px); }
+  }
+  @keyframes relocate-a {
+    0%, 16%, 100% { transform: translate(0, 0); opacity: 1; }
+    35%, 58% { transform: translate(34px, 15px) rotate(5deg); opacity: .78; }
+    72% { transform: translate(0, 0); opacity: .35; }
+  }
+  @keyframes relocate-b {
+    0%, 18%, 100% { transform: translate(0, 0); }
+    36%, 62% { transform: translate(68px, 0) rotate(-4deg); opacity: .65; }
+  }
+  @keyframes relocate-c {
+    0%, 22%, 100% { transform: translate(0, 0); }
+    38%, 68% { transform: translate(-67px, 15px) rotate(7deg); opacity: .75; }
+  }
+  @keyframes relocate-d {
+    0%, 20%, 100% { transform: translate(0, 0); }
+    42%, 66% { transform: translate(-35px, -15px) rotate(-6deg); opacity: .7; }
+  }
+  @keyframes cell-blackout {
+    0%, 23%, 100% { opacity: 1; transform: scale(1); }
+    34%, 69% { opacity: .04; transform: scale(.62); background: rgba(3,8,14,.8); }
+    82% { opacity: .55; transform: scale(1.08); }
+  }
+  @keyframes token-burst {
+    0%, 52% { transform: translateX(-18px); opacity: .05; }
+    58% { transform: translateX(-8px); opacity: .9; }
+    72% { transform: translateX(52px); opacity: 1; }
+    76%, 100% { transform: translateX(58px); opacity: .04; }
+  }
+  @keyframes stalled-flow {
+    0%, 70% { transform: translateX(-15px); opacity: .08; }
+    82% { transform: translateX(12px); opacity: .8; }
+    100% { transform: translateX(18px); opacity: .1; }
+  }
+  @keyframes thought-loop-core {
+    0%, 100% {
+      transform: scale(.9);
+      box-shadow: 0 0 32px rgba(240,107,121,.2), inset -9px -13px 25px rgba(0,0,0,.6);
+    }
+    28% { transform: scale(1.12) rotate(3deg); filter: brightness(1.3); }
+    45% { transform: scale(.78) rotate(-4deg); filter: brightness(.65); }
+    64% { transform: scale(1.04) rotate(2deg); }
+  }
+  @keyframes loop-conduit {
+    0%, 100% { opacity: .26; filter: brightness(.8); }
+    30% { opacity: 1; filter: brightness(1.7); }
+    54% { opacity: .08; }
+  }
+  @keyframes loop-signal {
+    0% { transform: translateX(0); opacity: 0; }
+    20% { opacity: 1; }
+    42% { transform: translateX(78px); opacity: 1; }
+    43%, 64% { transform: translateX(78px); opacity: .12; }
+    88% { transform: translateX(18px); opacity: .9; }
+    100% { transform: translateX(0); opacity: .1; }
+  }
+  @keyframes loop-token {
+    0%, 45% { transform: translateX(-16px); opacity: .08; }
+    55% { transform: translateX(46px); opacity: 1; }
+    70% { transform: translateX(20px); opacity: .55; }
+    100% { transform: translateX(46px); opacity: .16; }
+  }
+  @keyframes recovery {
+    0% { transform: scale(.75); opacity: .45; }
+    55% { transform: scale(1.08); opacity: 1; }
+    100% { transform: scale(.92); opacity: .75; }
+  }
+  @keyframes recovery-bars {
+    50% { height: 15%; opacity: .28; }
+  }
+  @keyframes event-pop {
+    0% { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
+    18%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04); }
+  }
+  @keyframes danger-atmosphere {
+    0%, 100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    50% {
+      opacity: .58;
+      transform: scale(.985);
+    }
+  }
+  @keyframes context-full-shock {
+    0%, 100% {
+      transform: scaleX(1);
+      filter: brightness(1);
+    }
+    36% {
+      transform: scaleX(.955) translateX(-2px);
+      filter: brightness(1.35);
+    }
+    62% {
+      transform: scaleX(1.015) translateX(1px);
+      filter: brightness(.9);
+    }
+  }
+  @keyframes loop-warning-scan {
+    to { transform: skewX(-18deg) translateX(330%); }
+  }
+  @keyframes pressure {
+    50% { transform: scaleX(.97); border-color: rgba(242, 163, 93, .42); }
+  }
+  @keyframes shake {
+    25% { transform: translateX(-1px); }
+    75% { transform: translateX(1px); }
+  }

open_cortex/ui/assets/open_cortex.js

@@ -0,0 +1,738 @@
+const app = document.getElementById("app");
+const phase = document.getElementById("phase");
+const coreState = document.getElementById("core-state");
+const coreDetail = document.getElementById("core-detail");
+const kv = document.getElementById("kv");
+const contextUsed = document.getElementById("context-used");
+const contextUnit = document.getElementById("context-unit");
+const contextFill = document.getElementById("context-fill");
+const tps = document.getElementById("tps");
+const ttft = document.getElementById("ttft");
+const memoryState = document.getElementById("memory-state");
+const contextState = document.getElementById("context-state");
+const tokenState = document.getElementById("token-state");
+const healthState = document.getElementById("health-state");
+const scenarioLabel = document.getElementById("scenario-label");
+const memoryBlocks = [...document.querySelectorAll("#memory-blocks i")];
+const messages = document.getElementById("messages");
+const runtimeEvent = document.getElementById("runtime-event");
+const evidence3Label = document.getElementById("evidence-3-label");
+const evidence3Value = document.getElementById("kv-retained");
+const promptEval = document.getElementById("prompt-eval");
+const prompt = document.getElementById("prompt");
+const send = document.getElementById("send");
+const experiment = document.getElementById("experiment");
+const runExperimentButton = document.getElementById("run-experiment");
+const workspace = document.querySelector(".workspace");
+const resizer = document.getElementById("resizer");
+const drawerToggle = document.getElementById("drawer-toggle");
+const memoryOrgan = document.getElementById("memory-organ");
+const contextOrgan = document.getElementById("context-organ");
+const tokensOrgan = document.getElementById("tokens-organ");
+const engineOrgan = document.getElementById("engine-organ");
+
+let chatHistory = [];
+let activeAssistant = null;
+let previousChatWidth = workspace.getBoundingClientRect().width * 0.4;
+let pendingChatWidth = previousChatWidth;
+let collapseHoldUntil = 0;
+let contextWindowFullPending = false;
+const collapseThreshold = 230;
+
+function finishActiveAssistant() {
+  if (activeAssistant) {
+    activeAssistant.isStreaming = false;
+  }
+}
+
+function clearHazardState() {
+  app.classList.remove("hazard-loop", "hazard-context-full");
+  runtimeEvent.classList.remove("hazard", "critical");
+}
+
+function setHazardState(kind, critical = false) {
+  clearHazardState();
+  app.classList.add(kind);
+  runtimeEvent.classList.add("hazard");
+  runtimeEvent.classList.toggle("critical", critical);
+}
+
+function showRuntimeEvent(label, sticky = false) {
+  runtimeEvent.textContent = label;
+  runtimeEvent.classList.remove("visible", "sticky");
+  void runtimeEvent.offsetWidth;
+  runtimeEvent.classList.add("visible");
+  runtimeEvent.classList.toggle("sticky", sticky);
+}
+
+function escapeHtml(value) {
+  return value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+}
+
+function renderInlineMarkdown(value) {
+  return escapeHtml(value)
+    .replace(/`([^`]+)`/g, "<code>$1</code>")
+    .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+}
+
+function renderMarkdown(value) {
+  const lines = value.replace(/\r\n/g, "\n").split("\n");
+  const html = [];
+  let paragraph = [];
+  let list = [];
+  let inCode = false;
+  let codeLines = [];
+  let codeLang = "";
+
+  function flushParagraph() {
+    if (!paragraph.length) return;
+    html.push(`<p>${paragraph.map(renderInlineMarkdown).join("<br>")}</p>`);
+    paragraph = [];
+  }
+
+  function flushList() {
+    if (!list.length) return;
+    html.push(`<ul>${list.map((item) => `<li>${renderInlineMarkdown(item)}</li>`).join("")}</ul>`);
+    list = [];
+  }
+
+  for (const line of lines) {
+    const codeFence = line.match(/^```(\w+)?\s*$/);
+    if (codeFence) {
+      if (inCode) {
+        html.push(`<pre><code${codeLang ? ` data-lang="${escapeHtml(codeLang)}"` : ""}>${escapeHtml(codeLines.join("\n"))}</code></pre>`);
+        inCode = false;
+        codeLines = [];
+        codeLang = "";
+      } else {
+        flushParagraph();
+        flushList();
+        inCode = true;
+        codeLang = codeFence[1] || "";
+      }
+      continue;
+    }
+
+    if (inCode) {
+      codeLines.push(line);
+      continue;
+    }
+
+    if (!line.trim()) {
+      flushParagraph();
+      flushList();
+      continue;
+    }
+
+    const heading = line.match(/^(#{1,3})\s+(.+)$/);
+    if (heading) {
+      flushParagraph();
+      flushList();
+      const level = heading[1].length;
+      html.push(`<h${level}>${renderInlineMarkdown(heading[2])}</h${level}>`);
+      continue;
+    }
+
+    const bullet = line.match(/^\s*[-*]\s+(.+)$/);
+    if (bullet) {
+      flushParagraph();
+      list.push(bullet[1]);
+      continue;
+    }
+
+    paragraph.push(line);
+  }
+
+  if (inCode) {
+    html.push(`<pre><code${codeLang ? ` data-lang="${escapeHtml(codeLang)}"` : ""}>${escapeHtml(codeLines.join("\n"))}</code></pre>`);
+  }
+  flushParagraph();
+  flushList();
+  return html.join("");
+}
+
+function renderMessages() {
+  if (!chatHistory.length) {
+    messages.classList.remove("context-limited");
+    messages.innerHTML = `
+      <div class="message">
+        <div class="message-meta">Cortex</div>
+        <div class="bubble">Send a message to begin observing local inference.</div>
+      </div>
+    `;
+    return;
+  }
+
+  const hasCollapsedContext = chatHistory.some((message) => message.outsideContext);
+  messages.classList.toggle("context-limited", hasCollapsedContext);
+  let boundaryInserted = false;
+
+  messages.innerHTML = chatHistory.map((message, index) => {
+    const role = message.role === "user" ? "user" : "";
+    const live = message.role === "assistant" && message.isStreaming ? " assistant-live" : "";
+    const outside = message.outsideContext ? " historical-context outside-context" : "";
+    const ejected = message.contextEjected ? " context-ejected" : "";
+    const author = message.role === "user" ? "You" : "Cortex";
+    const cursor = live ? '<span class="cursor"></span>' : "";
+    const boundary = !boundaryInserted && hasCollapsedContext && !message.outsideContext
+      ? '<div class="active-context-boundary"><span>Active context boundary · outside active context above</span></div>'
+      : "";
+    if (boundary) boundaryInserted = true;
+    const body = message.role === "assistant" ? renderMarkdown(message.content) : escapeHtml(message.content);
+    return `
+      ${boundary}
+      <div class="message ${role}${live}${outside}${ejected}">
+        <div class="message-meta">${author}</div>
+        <div class="bubble markdown-body">${body}${cursor}</div>
+        ${message.outsideContext ? '<div class="context-badge">outside active context</div>' : ""}
+      </div>
+    `;
+  }).join("");
+  messages.scrollTop = messages.scrollHeight;
+}
+
+function setPhase(name, label, core, detail) {
+  const preserveCollapse = app.classList.contains("scenario-collapse") && Date.now() < collapseHoldUntil;
+  const removableClasses = [
+    "phase-idle",
+    "phase-prefill",
+    "phase-decode",
+    "phase-recovery",
+    "scenario-loop",
+    "scenario-memory",
+    "scenario-slow",
+    "scenario-collapse",
+    "hazard-loop",
+    "hazard-context-full"
+  ].filter((className) => !(preserveCollapse && className === "scenario-collapse"));
+
+  app.classList.remove(...removableClasses);
+  app.classList.add("phase-" + name);
+  phase.textContent = label;
+  coreState.textContent = core;
+  coreDetail.textContent = detail;
+}
+
+function resetRuntimeVisuals() {
+  app.classList.remove(
+    "scenario-loop",
+    "scenario-memory",
+    "scenario-slow",
+    "scenario-collapse",
+    "core-slow",
+    "hazard-loop",
+    "hazard-context-full"
+  );
+  clearHazardState();
+  collapseHoldUntil = 0;
+  contextWindowFullPending = false;
+  memoryOrgan.className = "organ memory active";
+  contextOrgan.className = "organ context active";
+  tokensOrgan.className = "organ tokens active";
+  engineOrgan.className = "organ health active";
+  runtimeEvent.classList.remove("visible", "sticky");
+}
+
+function setMetrics({ contextTokens, contextSize, speed, firstToken, promptRate }) {
+  const used = contextTokens == null ? "—" : Number(contextTokens).toLocaleString();
+  const size = contextSize == null ? "—" : Number(contextSize).toLocaleString();
+  contextUsed.textContent = used;
+  contextUnit.textContent = `/ ${size}`;
+  const fill = contextTokens && contextSize ? Math.min(100, Math.round(contextTokens / contextSize * 100)) : 0;
+  contextFill.style.width = fill + "%";
+  kv.textContent = contextTokens && contextSize ? String(fill) : "—";
+  tps.textContent = speed == null ? "—" : Number(speed).toFixed(1);
+  ttft.textContent = firstToken == null ? "—" : Number(firstToken).toFixed(0);
+  promptEval.textContent = promptRate == null ? "measuring" : `${Number(promptRate).toFixed(1)} tok/s`;
+
+  const filled = Math.max(1, Math.min(12, Math.round(fill / 100 * memoryBlocks.length)));
+  memoryBlocks.forEach((block, index) => block.classList.toggle("filled", index < filled));
+
+  memoryOrgan.classList.toggle("memory-pressure", fill >= 70 && fill < 85);
+  memoryOrgan.classList.toggle("memory-overloaded", fill >= 85);
+  contextOrgan.classList.toggle("context-pressure", fill >= 70);
+
+  if (fill >= 85) {
+    memoryState.textContent = "Memory overloaded";
+    contextState.textContent = "Near context limit";
+  } else if (fill >= 70) {
+    memoryState.textContent = "Memory strained";
+    contextState.textContent = "Context pressure";
+  } else if (fill >= 45) {
+    memoryState.textContent = "Memory busy";
+    contextState.textContent = "Context growing";
+  }
+}
+
+function setRuntimeIdle() {
+  resetRuntimeVisuals();
+  scenarioLabel.textContent = "Live local chat";
+  setPhase("idle", "IDLE", "Ready for input", "ENGINE IDLE · SLOT AVAILABLE");
+  runtimeEvent.textContent = "READY";
+  memoryState.textContent = "Memory quiet";
+  contextState.textContent = "Context resting";
+  tokenState.textContent = "Stream dormant";
+  healthState.textContent = "Engine healthy";
+  kv.textContent = "—";
+  setMetrics({ contextTokens: 0, contextSize: null, speed: 0, firstToken: null, promptRate: null });
+  evidence3Label.textContent = "KV evidence";
+  evidence3Value.textContent = "context proxy";
+}
+
+function applyRuntimeEvent(event) {
+  if (event.kind === "context_collapse") {
+    applyContextCollapse(event);
+    return;
+  }
+
+  if (event.kind === "request_started") {
+    clearHazardState();
+    scenarioLabel.textContent = "Live local chat";
+    setPhase("prefill", "PREFILL", "Waiting for first token", "PREFILL · PROCESSING PROMPT");
+    showRuntimeEvent("PREFILL STARTED");
+    memoryState.textContent = "Memory allocating";
+    contextState.textContent = "Context pending";
+    tokenState.textContent = "Stream waiting";
+    healthState.textContent = "Engine charging";
+    kv.textContent = "—";
+    evidence3Label.textContent = "KV proxy";
+    evidence3Value.textContent = "waiting for context";
+    return;
+  }
+
+  if (event.kind === "first_token") {
+    const snapshot = event.snapshot || {};
+    const contextTokens = event.context_tokens ?? snapshot.slot_context_tokens?.[0] ?? null;
+    const contextSize = event.context_size ?? snapshot.slot_context_size ?? null;
+    setPhase("decode", "DECODE", "Generating response", `TTFT ${Number(event.ttft_ms || 0).toFixed(1)} ms · LIVE`);
+    showRuntimeEvent("FIRST TOKEN");
+    memoryState.textContent = "Memory holding";
+    contextState.textContent = "Context active";
+    tokenState.textContent = "Decode flowing";
+    healthState.textContent = `processing=${snapshot.requests_processing ?? "—"} deferred=${snapshot.requests_deferred ?? "—"}`;
+    setMetrics({
+      contextTokens,
+      contextSize,
+      speed: snapshot.decode_tps,
+      firstToken: event.ttft_ms,
+      promptRate: snapshot.prompt_tps
+    });
+    evidence3Label.textContent = "KV proxy";
+    evidence3Value.textContent = event.working_memory_percent == null ? "context-derived" : `${event.working_memory_percent.toFixed(1)}% context-derived`;
+    return;
+  }
+
+  if (event.kind === "token") {
+    if (event.repetition_detected) {
+      app.classList.add("scenario-loop");
+      setHazardState("hazard-loop", true);
+      showRuntimeEvent("THOUGHT LOOP DETECTED", true);
+      coreState.textContent = "Thought loop emerging";
+      tokenState.textContent = `Thought loop · ${event.live_tps ? event.live_tps.toFixed(1) : "—"} tok/s`;
+      healthState.textContent = "Repetition detected";
+      evidence3Label.textContent = "Generation pattern";
+      evidence3Value.textContent = "thought loop detected";
+    } else {
+      runtimeEvent.textContent = "TOKEN STREAM";
+      coreState.textContent = "Generating response";
+      tokenState.textContent = `Decode flowing · ${event.live_tps ? event.live_tps.toFixed(1) : "—"} tok/s`;
+      healthState.textContent = "Engine active";
+      evidence3Label.textContent = "Generation pattern";
+      evidence3Value.textContent = "no repetition detected";
+    }
+    phase.textContent = "DECODE";
+    coreDetail.textContent = `DECODE TOKEN ${event.generated_tokens || "—"} · LIVE`;
+    setMetrics({
+      contextTokens: event.context_tokens,
+      contextSize: event.context_size,
+      speed: event.live_tps,
+      firstToken: Number(ttft.textContent) || null,
+      promptRate: null
+    });
+    promptEval.textContent = `${event.generated_tokens || 0} generated tokens`;
+    if (event.working_memory_percent != null) {
+      evidence3Label.textContent = "KV proxy";
+      evidence3Value.textContent = `${event.working_memory_percent.toFixed(1)}% context-derived`;
+    }
+    return;
+  }
+
+  if (event.kind === "request_completed") {
+    finishActiveAssistant();
+    const contextFull = event.context_size && event.context_tokens >= event.context_size;
+    phase.textContent = "DONE";
+    showRuntimeEvent(
+      contextFull ? "CONTEXT WINDOW FULL" : (event.repetition_detected ? "THOUGHT LOOP DETECTED" : "REQUEST COMPLETE"),
+      contextFull || event.repetition_detected
+    );
+    coreState.textContent = contextFull
+      ? "Context full; next turn will evict earliest memory"
+      : (event.repetition_detected ? "Generation ended in a loop" : "Generation complete");
+    coreDetail.textContent = "FINAL TIMINGS RECEIVED";
+    setMetrics({
+      contextTokens: event.context_tokens,
+      contextSize: event.context_size,
+      speed: event.decode_tps,
+      firstToken: Number(ttft.textContent) || null,
+      promptRate: event.prompt_tps
+    });
+    tokenState.textContent = `Decode ${event.decode_tps ? event.decode_tps.toFixed(1) : "—"} tok/s`;
+    healthState.textContent = "Engine settled";
+    promptEval.textContent = `Prefill ${event.prompt_tps ? event.prompt_tps.toFixed(1) : "—"} tok/s`;
+    evidence3Label.textContent = "Output tokens";
+    evidence3Value.textContent = event.completion_tokens ?? "—";
+    if (contextFull) {
+      applyContextFullWarning();
+    } else {
+      contextState.textContent = event.repetition_detected ? "Context saturated by loop" : "Context retained";
+    }
+    renderMessages();
+  }
+}
+
+function applyContextFullWarning() {
+  contextWindowFullPending = true;
+  collapseHoldUntil = Date.now() + 2500;
+  scenarioLabel.textContent = "Context full";
+  setHazardState("hazard-context-full", true);
+  app.classList.add("scenario-collapse");
+  contextOrgan.classList.add("context-pressure");
+  memoryOrgan.classList.add("memory-overloaded");
+  engineOrgan.classList.add("engine-strained");
+  runtimeEvent.textContent = "CONTEXT WINDOW FULL";
+  runtimeEvent.classList.add("visible", "sticky");
+  memoryState.textContent = "Memory overloaded";
+  contextState.textContent = "Next turn will evict earliest message";
+  tokenState.textContent = "Stream complete";
+  healthState.textContent = "Awaiting next turn";
+  evidence3Label.textContent = "Next action";
+  evidence3Value.textContent = "pop earliest turn";
+}
+
+function applyDeferredContextEjection() {
+  if (!contextWindowFullPending) return false;
+
+  const target = chatHistory.find((message) => !message.outsideContext);
+  if (!target) return false;
+
+  target.outsideContext = true;
+  target.contextEjected = true;
+  contextWindowFullPending = false;
+  clearHazardState();
+  collapseHoldUntil = Date.now() + 2500;
+  scenarioLabel.textContent = "Context collapse";
+  setPhase("decode", "COLLAPSE", "Context boundary shifted", "EARLIEST TURN OUTSIDE ACTIVE MEMORY");
+  app.classList.add("scenario-collapse");
+  showRuntimeEvent("CONTEXT COLLAPSE", true);
+  memoryState.textContent = "Memory rebalanced";
+  contextState.textContent = "Earliest message ejected";
+  tokenState.textContent = "Sending recent context";
+  healthState.textContent = "Engine recovering";
+  evidence3Label.textContent = "Dropped turns";
+  evidence3Value.textContent = "1";
+  return true;
+}
+
+function applyContextCollapse(event) {
+  const dropped = Math.max(1, Number(event.dropped_messages || 1));
+  let marked = 0;
+  for (const message of chatHistory) {
+    if (message === activeAssistant) continue;
+    if (marked >= dropped) break;
+    message.outsideContext = true;
+    message.contextEjected = marked === 0;
+    marked += 1;
+  }
+
+  collapseHoldUntil = Date.now() + 2500;
+  clearHazardState();
+  scenarioLabel.textContent = "Context collapse";
+  setPhase("decode", "COLLAPSE", "Context boundary shifted", "EARLIEST TURNS OUTSIDE ACTIVE MEMORY");
+  app.classList.add("scenario-collapse");
+  showRuntimeEvent("CONTEXT COLLAPSE", true);
+  memoryState.textContent = "Memory rebalanced";
+  contextState.textContent = "Earliest turns forgotten";
+  tokenState.textContent = "Retrying with recent context";
+  healthState.textContent = "Recovered locally";
+  contextUsed.textContent = "recent";
+  contextUnit.textContent = event.context_size ? `/ ${event.context_size}` : "/ active";
+  contextFill.style.width = "58%";
+  kv.textContent = "58";
+  evidence3Label.textContent = "Dropped turns";
+  evidence3Value.textContent = String(event.dropped_messages ?? marked);
+
+  if (activeAssistant && !activeAssistant.content) {
+    activeAssistant.content = "Earlier turns fell outside the active context.\n\n";
+  }
+  renderMessages();
+}
+
+function seedExperimentMessages({ outside = false } = {}) {
+  chatHistory = [
+    {
+      role: "user",
+      content: "Why does a long conversation make the model feel slower?",
+      outsideContext: outside
+    },
+    {
+      role: "assistant",
+      content: "Each new turn carries more history back into the model, increasing prefill work before decoding begins.",
+      outsideContext: outside
+    },
+    {
+      role: "user",
+      content: "Can you show me what changes inside the runtime?"
+    },
+    {
+      role: "assistant",
+      content: "Watch the runtime organs: context fills, working memory holds KV blocks, and token flow reveals decode health."
+    }
+  ];
+  activeAssistant = chatHistory.at(-1);
+  renderMessages();
+}
+
+function runLongContextExperiment() {
+  resetRuntimeVisuals();
+  seedExperimentMessages();
+  scenarioLabel.textContent = "Long context stress";
+  setPhase("prefill", "PREFILL", "Reading long context", "TTFT RISING · CONTEXT PRESSURE");
+  showRuntimeEvent("LONG CONTEXT STRESS", true);
+  contextOrgan.classList.add("context-pressure");
+  engineOrgan.classList.add("engine-strained");
+  memoryState.textContent = "Memory busy";
+  contextState.textContent = "Near context limit";
+  tokenState.textContent = "Stream waiting";
+  healthState.textContent = "Engine strained by prefill";
+  setMetrics({ contextTokens: 1840, contextSize: 2048, speed: 0, firstToken: 1380, promptRate: 38.6 });
+  evidence3Label.textContent = "Experiment";
+  evidence3Value.textContent = "simulated long prompt";
+}
+
+function runMemoryPressureExperiment() {
+  resetRuntimeVisuals();
+  seedExperimentMessages();
+  scenarioLabel.textContent = "Memory pressure";
+  app.classList.add("scenario-memory");
+  setPhase("decode", "STRAINED", "KV blocks reallocating", "WORKING SET PRESSURE · SIMULATED");
+  showRuntimeEvent("MEMORY PRESSURE", true);
+  memoryOrgan.classList.add("memory-pressure");
+  engineOrgan.classList.add("engine-strained");
+  memoryState.textContent = "KV blocks fragmenting";
+  contextState.textContent = "Context stable";
+  tokenState.textContent = "Decode flowing";
+  healthState.textContent = "Engine strained";
+  setMetrics({ contextTokens: 1240, contextSize: 2048, speed: 24.8, firstToken: 648, promptRate: 72.4 });
+  kv.textContent = "91";
+  evidence3Label.textContent = "KV proxy";
+  evidence3Value.textContent = "simulated pressure";
+}
+
+function runSlowDecodeExperiment() {
+  resetRuntimeVisuals();
+  seedExperimentMessages();
+  scenarioLabel.textContent = "Slow decode";
+  app.classList.add("scenario-slow", "core-slow");
+  setPhase("decode", "DECODE", "Engine decoding slowly", "TOKEN FLOW INTERRUPTED · SIMULATED");
+  showRuntimeEvent("SLOW DECODE", true);
+  tokensOrgan.classList.add("tokens-slow");
+  engineOrgan.classList.add("engine-strained");
+  memoryState.textContent = "Memory healthy";
+  contextState.textContent = "Context stable";
+  tokenState.textContent = "Flow interrupted";
+  healthState.textContent = "Decode scheduler strained";
+  setMetrics({ contextTokens: 980, contextSize: 2048, speed: 6.8, firstToken: 510, promptRate: 86.2 });
+  evidence3Label.textContent = "Experiment";
+  evidence3Value.textContent = "simulated decode delay";
+}
+
+function runContextCollapseExperiment() {
+  resetRuntimeVisuals();
+  seedExperimentMessages({ outside: true });
+  scenarioLabel.textContent = "Context collapse";
+  setPhase("recovery", "COLLAPSE", "Engine recovering", "EARLIEST MEMORY OUTSIDE ACTIVE WINDOW");
+  setHazardState("hazard-context-full", true);
+  app.classList.add("scenario-collapse");
+  showRuntimeEvent("CONTEXT COLLAPSE", true);
+  contextOrgan.classList.add("context-pressure", "context-forgetting");
+  engineOrgan.classList.add("engine-recovery");
+  memoryState.textContent = "Memory rebalanced";
+  contextState.textContent = "Earlier memory forgotten";
+  tokenState.textContent = "Retrying recent context";
+  healthState.textContent = "Engine recovering";
+  setMetrics({ contextTokens: 1180, contextSize: 2048, speed: 29.2, firstToken: 1742, promptRate: 34.8 });
+  evidence3Label.textContent = "Dropped turns";
+  evidence3Value.textContent = "2";
+}
+
+function runExperiment() {
+  switch (experiment.value) {
+    case "long-context":
+      runLongContextExperiment();
+      break;
+    case "memory-pressure":
+      runMemoryPressureExperiment();
+      break;
+    case "slow-decode":
+      runSlowDecodeExperiment();
+      break;
+    case "context-collapse":
+      runContextCollapseExperiment();
+      break;
+    default:
+      setRuntimeIdle();
+      prompt.focus();
+  }
+}
+
+async function streamChat() {
+  const value = prompt.value.trim();
+  if (!value) return;
+
+  prompt.value = "";
+  send.disabled = true;
+  const ejectedBeforeSend = applyDeferredContextEjection();
+  chatHistory.push({ role: "user", content: value });
+  activeAssistant = { role: "assistant", content: "", isStreaming: true };
+  chatHistory.push(activeAssistant);
+  if (ejectedBeforeSend) {
+    activeAssistant.content = "Earlier turns fell outside the active context.\n\n";
+  }
+  renderMessages();
+
+  try {
+    const response = await fetch("/api/chat", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        messages: chatHistory
+          .slice(0, -1)
+          .filter((message) => !message.outsideContext)
+          .map(({ role, content }) => ({ role, content }))
+      })
+    });
+
+    if (!response.ok || !response.body) {
+      finishActiveAssistant();
+      activeAssistant.content += `\n[OpenCortex backend error: ${response.status}]`;
+      renderMessages();
+      return;
+    }
+
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+
+    while (true) {
+      const { value: chunk, done } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(chunk, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = lines.pop() || "";
+
+      for (const line of lines) {
+        if (!line.trim()) continue;
+        const event = JSON.parse(line);
+        if (event.kind === "error") {
+          finishActiveAssistant();
+          const isContextOverflow = event.code === "context_overflow";
+          showRuntimeEvent(isContextOverflow ? "CONTEXT WINDOW EXCEEDED" : "BACKEND ERROR", true);
+          if (isContextOverflow) {
+            setPhase("decode", "DEGRADED", "Context window exceeded", "REQUEST REJECTED · CONTEXT FULL");
+            memoryState.textContent = "Memory overloaded";
+            contextState.textContent = "Context limit reached";
+            tokenState.textContent = "Stream blocked";
+            healthState.textContent = "Increase -c or start a new run";
+            activeAssistant.content += `\n[OpenCortex] ${event.message}`;
+          } else {
+            activeAssistant.content += `\n[OpenCortex backend error: ${event.message}]`;
+          }
+          renderMessages();
+          continue;
+        }
+        applyRuntimeEvent(event);
+        if (event.text_delta) {
+          activeAssistant.content += event.text_delta;
+          renderMessages();
+        }
+      }
+    }
+  } catch (error) {
+    showRuntimeEvent("BACKEND ERROR", true);
+    finishActiveAssistant();
+    activeAssistant.content += `\n[OpenCortex backend error: ${error.message || error}]`;
+    renderMessages();
+  } finally {
+    finishActiveAssistant();
+    renderMessages();
+    send.disabled = false;
+  }
+}
+
+send.addEventListener("click", streamChat);
+prompt.addEventListener("keydown", (event) => {
+  if (event.key === "Enter" && !event.shiftKey) {
+    event.preventDefault();
+    streamChat();
+  }
+});
+runExperimentButton.addEventListener("click", runExperiment);
+
+function collapseConversation() {
+  const current = parseFloat(getComputedStyle(app).getPropertyValue("--chat-width"));
+  if (current > collapseThreshold) previousChatWidth = current;
+  app.classList.remove("collapse-preview");
+  app.classList.add("chat-collapsed");
+  app.style.setProperty("--chat-width", "0px");
+}
+
+function restoreConversation() {
+  app.classList.remove("chat-collapsed", "collapse-preview");
+  const width = Math.max(340, previousChatWidth || workspace.clientWidth * 0.4);
+  app.style.setProperty("--chat-width", width + "px");
+}
+
+resizer.addEventListener("pointerdown", (event) => {
+  if (event.target === drawerToggle || app.classList.contains("chat-collapsed")) return;
+  event.preventDefault();
+  resizer.setPointerCapture(event.pointerId);
+  resizer.classList.add("dragging");
+  document.body.style.cursor = "col-resize";
+});
+
+resizer.addEventListener("pointermove", (event) => {
+  if (!resizer.hasPointerCapture(event.pointerId)) return;
+  const bounds = workspace.getBoundingClientRect();
+  const maximum = bounds.width * 0.62;
+  pendingChatWidth = Math.max(72, Math.min(maximum, event.clientX - bounds.left));
+  app.style.setProperty("--chat-width", pendingChatWidth + "px");
+  app.classList.toggle("collapse-preview", pendingChatWidth < collapseThreshold);
+});
+
+resizer.addEventListener("pointerup", (event) => {
+  if (!resizer.hasPointerCapture(event.pointerId)) return;
+  resizer.releasePointerCapture(event.pointerId);
+  resizer.classList.remove("dragging");
+  document.body.style.cursor = "";
+  if (pendingChatWidth < collapseThreshold) collapseConversation();
+  else {
+    previousChatWidth = pendingChatWidth;
+    app.classList.remove("collapse-preview");
+  }
+});
+
+resizer.addEventListener("dblclick", () => {
+  if (app.classList.contains("chat-collapsed")) restoreConversation();
+  else collapseConversation();
+});
+drawerToggle.addEventListener("click", (event) => {
+  event.stopPropagation();
+  restoreConversation();
+});
+
+setRuntimeIdle();

pyproject.toml

@@ -5,8 +5,10 @@ description = "Add your description here"
 readme = "README.md"
 requires-python = ">=3.12"
 dependencies = [
+    "fastapi>=0.137.0",
     "gradio>=6.18.0",
     "httpx>=0.28.1",
+    "uvicorn>=0.49.0",
 ]
 
 [build-system]

requirements.txt

@@ -0,0 +1,4 @@
+fastapi>=0.137.0
+gradio>=6.18.0
+httpx>=0.28.1
+uvicorn>=0.49.0

tests/runtime/test_client.py

@@ -0,0 +1,45 @@
+import pytest
+import httpx
+
+from open_cortex.runtime.client import (
+    _detect_repetition,
+    _raise_for_status_with_body,
+    _working_memory_percent,
+)
+
+
+def test_detect_repetition_marks_repeated_generation_loop():
+    repeated = (
+        "艾丽和卡斯一起探索了整个宇宙，他们发现了一个惊人的事实："
+        "整个宇宙的中心并不是银河系，而是整个宇宙的中心。"
+    )
+
+    assert _detect_repetition(repeated * 3) is True
+
+
+def test_detect_repetition_allows_short_normal_text():
+    text = "KV Cache stores attention keys and values so decode can reuse prior context."
+
+    assert _detect_repetition(text) is False
+
+
+def test_working_memory_percent_is_context_derived_and_capped():
+    assert _working_memory_percent(512, 2048) == 25.0
+    assert _working_memory_percent(4096, 2048) == 100.0
+    assert _working_memory_percent(None, 2048) is None
+
+
+def test_raise_for_status_with_body_preserves_streaming_error_body():
+    request = httpx.Request("POST", "http://127.0.0.1:8080/v1/chat/completions")
+    response = httpx.Response(
+        400,
+        request=request,
+        stream=httpx.ByteStream(
+            b"request (2059 tokens) exceeds the available context size (2048 tokens)"
+        ),
+    )
+
+    with pytest.raises(httpx.HTTPStatusError) as exc_info:
+        _raise_for_status_with_body(response)
+
+    assert "exceeds the available context size" in exc_info.value.response.text

tests/ui/test_app.py

@@ -0,0 +1,317 @@
+import json
+
+from fastapi import FastAPI
+from fastapi.testclient import TestClient
+import httpx
+
+from open_cortex.runtime.events import RuntimeEvent
+from open_cortex.runtime.messages import ChatMessage
+from open_cortex.runtime.metrics import RuntimeSnapshot
+from open_cortex.ui.app import (
+    create_app,
+    event_to_payload,
+    render_index,
+    _backend_mode,
+    _stream_events,
+    _stream_simulated_events,
+    _http_error_text,
+    _is_context_overflow,
+    _trim_for_context_collapse,
+)
+
+
+def test_render_index_uses_original_product_shell():
+    html = render_index()
+
+    assert 'id="app"' in html
+    assert 'class="topbar"' in html
+    assert "OpenCortex" in html
+    assert "llama.cpp · local" in html
+    assert "EN / 中" not in html
+    assert 'id="lang"' not in html
+    assert 'id="clear"' not in html
+    assert ">Clear<" not in html
+    assert ">Send<" in html
+    assert "Send message" not in html
+    assert 'class="workspace"' in html
+    assert 'id="messages"' in html
+    assert 'id="prompt"' in html
+    assert 'id="send"' in html
+    assert 'id="runtime-event"' in html
+    assert 'id="experiment"' in html
+    assert 'id="run-experiment"' in html
+    assert "Live detected" in html
+    assert "Sim · Memory pressure" in html
+    assert "Sim · Context collapse" in html
+    assert 'id="memory-organ"' in html
+    assert 'id="context-used"' in html
+    assert 'id="core-state"' in html
+    assert "/assets/open_cortex.css?v=" in html
+    assert "/assets/open_cortex.js?v=" in html
+
+
+def test_styles_use_dynamic_viewport_height():
+    css = (create_app.__globals__["ASSET_DIR"] / "open_cortex.css").read_text()
+
+    assert "height: 100dvh" in css
+    assert "min-height: 100dvh" in css
+
+
+def test_frontend_exposes_experiment_and_engine_state_handlers():
+    js = (create_app.__globals__["ASSET_DIR"] / "open_cortex.js").read_text()
+
+    assert "function renderMarkdown" in js
+    assert "message.role === \"assistant\" ? renderMarkdown" in js
+    assert "isStreaming" in js
+    assert 'message.role === "assistant" && message.isStreaming' in js
+    assert "activeAssistant.isStreaming = false" in js
+    assert "function runExperiment" in js
+    assert "function runMemoryPressureExperiment" in js
+    assert "function runSlowDecodeExperiment" in js
+    assert "function runContextCollapseExperiment" in js
+    assert "collapseHoldUntil" in js
+    assert "contextWindowFullPending" in js
+    assert "function applyContextFullWarning" in js
+    assert "function applyDeferredContextEjection" in js
+    assert "CONTEXT WINDOW FULL" in js
+    assert "hazard-context-full" in js
+    assert "hazard-loop" in js
+    assert "runtimeEvent.classList.add(\"hazard\"" in js
+    assert "Earlier turns fell outside the active context." in js
+    assert "engine-strained" in js
+    assert "Engine recovering" in js
+
+
+def test_danger_states_have_decisive_visual_treatment():
+    css = (create_app.__globals__["ASSET_DIR"] / "open_cortex.css").read_text()
+
+    assert ".app.hazard-context-full .runtime-event" in css
+    assert ".app.hazard-loop .runtime-event" in css
+    assert ".runtime-event.hazard" in css
+    assert ".runtime-event.critical" in css
+    assert "context-full-shock" in css
+    assert "loop-warning-scan" in css
+    assert "danger-atmosphere" in css
+
+
+def test_context_collapse_styles_pop_out_oldest_message():
+    css = (create_app.__globals__["ASSET_DIR"] / "open_cortex.css").read_text()
+
+    assert "context-pop-out" in css
+    assert "@keyframes context-pop-out" in css
+
+
+def test_create_app_serves_index():
+    app = create_app()
+    client = TestClient(app)
+
+    response = client.get("/")
+
+    assert isinstance(app, FastAPI)
+    assert response.status_code == 200
+    assert "OpenCortex" in response.text
+    assert 'id="send"' in response.text
+
+
+def test_space_defaults_to_simulated_backend(monkeypatch):
+    monkeypatch.delenv("OPEN_CORTEX_BACKEND", raising=False)
+    monkeypatch.setenv("SPACE_ID", "build-small-hackathon/open-cortex")
+
+    assert _backend_mode() == "simulated"
+
+
+def test_explicit_backend_overrides_space_default(monkeypatch):
+    monkeypatch.setenv("OPEN_CORTEX_BACKEND", "llama_cpp")
+    monkeypatch.setenv("SPACE_ID", "build-small-hackathon/open-cortex")
+
+    assert _backend_mode() == "llama_cpp"
+
+
+def test_stream_events_can_run_without_llama_cpp_in_simulated_mode(monkeypatch):
+    monkeypatch.setenv("OPEN_CORTEX_BACKEND", "simulated")
+    monkeypatch.setenv("OPEN_CORTEX_SIMULATOR_DELAY_SECONDS", "0")
+
+    messages = [ChatMessage(role="user", content="What is OpenCortex?")]
+
+    payloads = [json.loads(line) for line in _stream_events(messages)]
+
+    assert payloads[0]["kind"] == "request_started"
+    assert payloads[1]["kind"] == "first_token"
+    assert payloads[-1]["kind"] == "request_completed"
+    assert "OpenCortex" in "".join(payload["text_delta"] for payload in payloads)
+    assert payloads[-1]["context_size"] == 2048
+    assert payloads[-1]["decode_tps"] > 0
+
+
+def test_simulated_story_can_surface_thought_loop(monkeypatch):
+    monkeypatch.setenv("OPEN_CORTEX_SIMULATOR_DELAY_SECONDS", "0")
+
+    messages = [ChatMessage(role="user", content="Write a long repeating story.")]
+
+    payloads = [
+        event_to_payload(event)
+        for event in _stream_simulated_events(messages)
+    ]
+
+    assert any(payload["repetition_detected"] for payload in payloads)
+
+
+def test_event_to_payload_includes_live_loop_state():
+    event = RuntimeEvent(
+        kind="token",
+        text_delta="银河系",
+        ttft_ms=None,
+        snapshot=RuntimeSnapshot(
+            prompt_tps=88.8,
+            decode_tps=21.5,
+            requests_processing=1,
+            requests_deferred=0,
+            active_slots=1,
+            slot_context_tokens=(512,),
+            slot_context_size=2048,
+        ),
+        generated_tokens=66,
+        elapsed_ms=2100.0,
+        live_tps=19.7,
+        repetition_detected=True,
+        context_tokens=578,
+        context_size=2048,
+        working_memory_percent=28.2,
+    )
+
+    payload = event_to_payload(event)
+
+    assert payload["kind"] == "token"
+    assert payload["text_delta"] == "银河系"
+    assert payload["generated_tokens"] == 66
+    assert payload["live_tps"] == 19.7
+    assert payload["repetition_detected"] is True
+    assert payload["context_tokens"] == 578
+    assert payload["context_size"] == 2048
+    assert payload["working_memory_percent"] == 28.2
+    assert payload["snapshot"]["slot_context_tokens"] == [512]
+    assert payload["snapshot"]["slot_context_size"] == 2048
+
+
+def test_stream_events_emits_context_collapse_and_retries_trimmed_history(monkeypatch):
+    calls: list[list[ChatMessage]] = []
+    request = httpx.Request("POST", "http://127.0.0.1:8080/v1/chat/completions")
+    overflow = httpx.HTTPStatusError(
+        "400 Bad Request",
+        request=request,
+        response=httpx.Response(
+            400,
+            request=request,
+            text="request (2059 tokens) exceeds the available context size (2048 tokens)",
+        ),
+    )
+
+    def fake_stream_chat_events(messages: list[ChatMessage]):
+        calls.append(messages)
+        if len(calls) == 1:
+            yield RuntimeEvent(
+                kind="request_started",
+                text_delta="",
+                ttft_ms=None,
+                snapshot=None,
+            )
+            raise overflow
+        yield RuntimeEvent(
+            kind="first_token",
+            text_delta="继续",
+            ttft_ms=12.3,
+            snapshot=None,
+            context_tokens=128,
+            context_size=2048,
+            working_memory_percent=6.2,
+        )
+
+    monkeypatch.setattr("open_cortex.ui.app.stream_chat_events", fake_stream_chat_events)
+    messages = [
+        ChatMessage(role="system", content="You are Cortex."),
+        ChatMessage(role="user", content="old question"),
+        ChatMessage(role="assistant", content="old long answer"),
+        ChatMessage(role="user", content="recent question"),
+        ChatMessage(role="assistant", content="recent answer"),
+        ChatMessage(role="user", content="继续"),
+    ]
+
+    payloads = [json.loads(line) for line in _stream_events(messages)]
+
+    assert [payload["kind"] for payload in payloads] == [
+        "request_started",
+        "context_collapse",
+        "first_token",
+    ]
+    assert payloads[1]["dropped_messages"] == 2
+    assert payloads[1]["retained_messages"] == 4
+    assert payloads[1]["context_size"] == 2048
+    assert [message.content for message in calls[1]] == [
+        "You are Cortex.",
+        "recent question",
+        "recent answer",
+        "继续",
+    ]
+
+
+def test_context_overflow_detection_reads_streaming_error_body():
+    request = httpx.Request("POST", "http://127.0.0.1:8080/v1/chat/completions")
+    response = httpx.Response(
+        400,
+        request=request,
+        stream=httpx.ByteStream(
+            b"request (2059 tokens) exceeds the available context size (2048 tokens)"
+        ),
+    )
+    error = httpx.HTTPStatusError("400 Bad Request", request=request, response=response)
+
+    assert _is_context_overflow(error) is True
+
+
+def test_http_error_text_handles_closed_stream_without_crashing():
+    request = httpx.Request("POST", "http://127.0.0.1:8080/v1/chat/completions")
+    response = httpx.Response(
+        400,
+        request=request,
+        stream=httpx.ByteStream(b"closed"),
+    )
+    response.close()
+    error = httpx.HTTPStatusError("400 Bad Request", request=request, response=response)
+
+    assert _http_error_text(error) == ""
+
+
+def test_trim_for_context_collapse_drops_oversized_assistant_history():
+    messages = [
+        ChatMessage(role="user", content="write a long story"),
+        ChatMessage(role="assistant", content="故事" * 4000),
+        ChatMessage(role="user", content="what happened next?"),
+        ChatMessage(role="assistant", content="recent answer"),
+        ChatMessage(role="user", content="继续"),
+    ]
+
+    trimmed, dropped = _trim_for_context_collapse(messages)
+
+    assert dropped == 2
+    assert trimmed == [
+        ChatMessage(role="user", content="what happened next?"),
+        ChatMessage(role="assistant", content="recent answer"),
+        ChatMessage(role="user", content="继续"),
+    ]
+
+
+def test_trim_for_context_collapse_keeps_recent_tail_of_oversized_answer():
+    messages = [
+        ChatMessage(role="user", content="write a long story"),
+        ChatMessage(role="assistant", content="A" * 5000 + "recent ending"),
+        ChatMessage(role="user", content="1"),
+    ]
+
+    trimmed, dropped = _trim_for_context_collapse(messages)
+
+    assert dropped == 1
+    assert len(trimmed) == 2
+    assert trimmed[0].role == "assistant"
+    assert "Earlier content collapsed" in trimmed[0].content
+    assert "recent ending" in trimmed[0].content
+    assert trimmed[1] == ChatMessage(role="user", content="1")

uv.lock

@@ -549,8 +549,10 @@ name = "open-cortex"
 version = "0.1.0"
 source = { editable = "." }
 dependencies = [
+    { name = "fastapi" },
     { name = "gradio" },
     { name = "httpx" },
+    { name = "uvicorn" },
 ]
 
 [package.dev-dependencies]
@@ -560,8 +562,10 @@ dev = [
 
 [package.metadata]
 requires-dist = [
+    { name = "fastapi", specifier = ">=0.137.0" },
     { name = "gradio", specifier = ">=6.18.0" },
     { name = "httpx", specifier = ">=0.28.1" },
+    { name = "uvicorn", specifier = ">=0.49.0" },
 ]
 
 [package.metadata.requires-dev]