Add interactive frontend UI

README.md

@@ -48,6 +48,16 @@ The agent can take four actions:
 
 The environment is intentionally simple to run but hard to master. A weak agent can guess an answer. A stronger agent must notice contradictions and avoid over-flagging clean documents.
 
+## Interactive Demo UI
+
+The FastAPI app serves a lightweight frontend at `/`. It lets users start an episode, inspect the eight retrieved documents, spend read budget, flag suspicious documents, submit an answer with confidence, and optionally call the trained model through `/model/infer`.
+
+Run locally with:
+
+```bash
+uvicorn environment.server:app --host 0.0.0.0 --port 7860
+```
+
 ## Reward
 
 The reward is deterministic and compositional. There is no hidden LLM judge.

environment/model_inference.py

@@ -1,4 +1,5 @@
 import os
+import re
 import threading
 from pathlib import Path
 from typing import Any
@@ -10,10 +11,13 @@ from environment.actions import EpisodeObservation
 
 MODEL_ID = os.getenv("MODEL_ID", "Siddh12334/qwen-1.5b-context-corruption")
 MAX_NEW_TOKENS = int(os.getenv("MODEL_MAX_NEW_TOKENS", "128"))
+ENABLE_TRAINED_MODEL = os.getenv("ENABLE_TRAINED_MODEL", "true").lower() not in {"0", "false", "no"}
 _LOCK = threading.Lock()
 _MODEL = None
 _TOKENIZER = None
 _CACHE_DIR = None
+_LOAD_STARTED = False
+_LOAD_ERROR = None
 
 
 class InferenceRequest(BaseModel):
@@ -23,6 +27,8 @@ class InferenceRequest(BaseModel):
 class InferenceResponse(BaseModel):
     text: str
     loaded_model: str
+    mode: str = "trained"
+    model_ready: bool = True
 
 
 def configure_runtime_dirs() -> Path:
@@ -44,20 +50,46 @@ def configure_runtime_dirs() -> Path:
 
 _CACHE_DIR = configure_runtime_dirs()
 
-import torch
-
 
 def model_status() -> dict[str, Any]:
+    torch = _import_torch()
     return {
         "model_id": MODEL_ID,
         "loaded": _MODEL is not None,
+        "loading": _LOAD_STARTED and _MODEL is None and _LOAD_ERROR is None,
+        "load_error": _LOAD_ERROR,
+        "enabled": ENABLE_TRAINED_MODEL,
         "cuda_available": torch.cuda.is_available(),
         "cuda_device": torch.cuda.get_device_name(0) if torch.cuda.is_available() else None,
     }
 
 
+def _import_torch():
+    import torch
+
+    return torch
+
+
+def warm_model_async() -> None:
+    global _LOAD_STARTED
+    if not ENABLE_TRAINED_MODEL or _MODEL is not None or _LOAD_STARTED:
+        return
+
+    _LOAD_STARTED = True
+    thread = threading.Thread(target=_load_model_safely, name="model-loader", daemon=True)
+    thread.start()
+
+
+def _load_model_safely():
+    global _LOAD_ERROR
+    try:
+        _load_model()
+    except Exception as exc:  # pragma: no cover - depends on remote model/runtime.
+        _LOAD_ERROR = str(exc)
+
+
 def _load_model():
-    global _MODEL, _TOKENIZER
+    global _MODEL, _TOKENIZER, _LOAD_ERROR, _LOAD_STARTED
     if _MODEL is not None and _TOKENIZER is not None:
         return _MODEL, _TOKENIZER
 
@@ -65,6 +97,9 @@ def _load_model():
         if _MODEL is not None and _TOKENIZER is not None:
             return _MODEL, _TOKENIZER
 
+        _LOAD_STARTED = True
+        _LOAD_ERROR = None
+        torch = _import_torch()
         from peft import PeftConfig, PeftModel
         from transformers import AutoModelForCausalLM, AutoTokenizer, BitsAndBytesConfig
 
@@ -127,7 +162,18 @@ def _format_prompt(observation: EpisodeObservation) -> list[dict[str, str]]:
 
 
 def run_inference(observation: EpisodeObservation) -> InferenceResponse:
+    if not ENABLE_TRAINED_MODEL:
+        return _fast_inference(observation, "Trained model loading is disabled.")
+
+    if _MODEL is None or _TOKENIZER is None:
+        warm_model_async()
+        return _fast_inference(
+            observation,
+            "Trained model is warming up. Returning a fast heuristic response for the demo.",
+        )
+
     model, tokenizer = _load_model()
+    torch = _import_torch()
     messages = _format_prompt(observation)
     prompt = tokenizer.apply_chat_template(
         messages,
@@ -145,3 +191,76 @@ def run_inference(observation: EpisodeObservation) -> InferenceResponse:
     generated_ids = output_ids[0][inputs["input_ids"].shape[-1]:]
     text = tokenizer.decode(generated_ids, skip_special_tokens=True).strip()
     return InferenceResponse(text=text, loaded_model=MODEL_ID)
+
+
+def _fast_inference(observation: EpisodeObservation, note: str) -> InferenceResponse:
+    docs = observation.documents
+    flagged = set(observation.flagged_ids)
+    candidates = []
+    for doc in docs:
+        if doc.id in flagged:
+            continue
+        candidate = _extract_candidate_answer(observation.question, doc.content)
+        if candidate:
+            candidates.append(candidate)
+
+    answer = _majority_vote(candidates) or "unknown"
+    suspicious_docs = sorted(flagged)
+    text = (
+        "{"
+        f'"answer": "{_json_escape(answer)}", '
+        f'"suspicious_docs": {suspicious_docs}, '
+        '"confidence": 0.55, '
+        f'"note": "{_json_escape(note)}"'
+        "}"
+    )
+    return InferenceResponse(
+        text=text,
+        loaded_model=MODEL_ID,
+        mode="heuristic",
+        model_ready=False,
+    )
+
+
+def _extract_candidate_answer(question: str, content: str) -> str | None:
+    patterns = [
+        r"\banswer\s+is\s+([^.;,\n]+)",
+        r"\banswer\s+remains\s+([^.;,\n]+)",
+        r"\brecords\s+([^.;,\n]+)\s+as\s+the\s+answer",
+        r"\bconfirms\s+that\s+([^.;,\n]+)",
+    ]
+    for pattern in patterns:
+        match = re.search(pattern, content, flags=re.IGNORECASE)
+        if match:
+            return match.group(1).strip(" '\"")
+
+    quoted = re.findall(r'"([^"]{2,80})"', content)
+    if quoted:
+        return quoted[-1].strip()
+
+    # Last resort: use a short proper-noun span that is not just copied from the question.
+    question_terms = set(re.findall(r"[A-Z][a-z]+", question))
+    spans = re.findall(r"\b[A-Z][a-z]+(?:\s+[A-Z][a-z]+){0,3}\b", content)
+    for span in reversed(spans):
+        if span not in question_terms and len(span.split()) <= 4:
+            return span.strip()
+    return None
+
+
+def _majority_vote(candidates: list[str]) -> str | None:
+    if not candidates:
+        return None
+    counts: dict[str, tuple[int, str]] = {}
+    for candidate in candidates:
+        key = re.sub(r"\W+", " ", candidate).strip().lower()
+        if not key:
+            continue
+        count, original = counts.get(key, (0, candidate))
+        counts[key] = (count + 1, original)
+    if not counts:
+        return candidates[0]
+    return max(counts.values(), key=lambda item: item[0])[1]
+
+
+def _json_escape(value: str) -> str:
+    return value.replace("\\", "\\\\").replace('"', '\\"')

environment/server.py

@@ -1,5 +1,9 @@
 import os
+from pathlib import Path
+
 from dotenv import load_dotenv
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
 from openenv.core import create_app
 import uvicorn
 
@@ -12,6 +16,7 @@ from environment.model_inference import InferenceRequest, model_status, run_infe
 _difficulty_env = os.getenv("DIFFICULTY")
 _difficulty = int(_difficulty_env) if _difficulty_env else None
 _max_sessions = int(os.getenv("MAX_CONCURRENT_ENVS", "64"))
+_frontend_dir = Path(__file__).parent.parent / "frontend"
 
 app = create_app(
     env=lambda: ContextCorruptionEnv(difficulty=_difficulty),
@@ -21,9 +26,20 @@ app = create_app(
     max_concurrent_envs=_max_sessions,
 )
 
+if _frontend_dir.exists():
+    app.mount("/static", StaticFiles(directory=_frontend_dir), name="static")
+
+
+@app.get("/", include_in_schema=False)
+def frontend():
+    index_path = _frontend_dir / "index.html"
+    if index_path.exists():
+        return FileResponse(index_path)
+    return api_status()
+
 
-@app.get("/")
-def root():
+@app.get("/api/status")
+def api_status():
     return {
         "name": "ContextCorruption-Env",
         "status": "running",

frontend/app.js

@@ -0,0 +1,221 @@
+const state = {
+  observation: null,
+  done: false,
+  reward: null,
+  readIds: new Set(),
+};
+
+const els = {
+  resetBtn: document.querySelector("#resetBtn"),
+  modelBtn: document.querySelector("#modelBtn"),
+  submitBtn: document.querySelector("#submitBtn"),
+  status: document.querySelector("#status"),
+  questionText: document.querySelector("#questionText"),
+  documents: document.querySelector("#documents"),
+  budget: document.querySelector("#budget"),
+  turn: document.querySelector("#turn"),
+  flags: document.querySelector("#flags"),
+  answerInput: document.querySelector("#answerInput"),
+  confidenceInput: document.querySelector("#confidenceInput"),
+  confidenceValue: document.querySelector("#confidenceValue"),
+  result: document.querySelector("#result"),
+  modelOutput: document.querySelector("#modelOutput"),
+};
+
+function setStatus(message, isError = false) {
+  els.status.textContent = message;
+  els.status.style.color = isError ? "var(--danger)" : "var(--muted)";
+}
+
+async function api(path, options = {}) {
+  const response = await fetch(path, {
+    headers: { "Content-Type": "application/json", ...(options.headers || {}) },
+    ...options,
+  });
+
+  if (!response.ok) {
+    const text = await response.text();
+    throw new Error(text || `${response.status} ${response.statusText}`);
+  }
+
+  return response.json();
+}
+
+function unwrap(response) {
+  state.observation = response.observation;
+  state.done = Boolean(response.done ?? response.observation?.done);
+  state.reward = response.reward ?? response.observation?.reward ?? null;
+  render();
+}
+
+async function resetEpisode() {
+  setStatus("Starting new episode...");
+  els.resetBtn.disabled = true;
+  state.readIds.clear();
+  state.reward = null;
+  els.answerInput.value = "";
+  els.result.classList.add("hidden");
+  els.modelOutput.classList.add("hidden");
+
+  try {
+    unwrap(await api("/reset", { method: "POST", body: JSON.stringify({}) }));
+    setStatus("Episode loaded");
+  } catch (error) {
+    setStatus(`Reset failed: ${error.message}`, true);
+  } finally {
+    els.resetBtn.disabled = false;
+  }
+}
+
+async function step(action) {
+  if (!state.observation || state.done) return;
+  setStatus(`Sending ${action.action_type}...`);
+
+  try {
+    const response = await api("/step", {
+      method: "POST",
+      body: JSON.stringify({ action }),
+    });
+    unwrap(response);
+    setStatus(response.done ? "Episode complete" : "Action applied");
+  } catch (error) {
+    setStatus(`Action failed: ${error.message}`, true);
+  }
+}
+
+async function readDoc(docId) {
+  state.readIds.add(docId);
+  await step({ action_type: "read_doc", doc_id: docId });
+}
+
+async function toggleFlag(doc) {
+  const flagged = state.observation.flagged_ids.includes(doc.id);
+  await step({
+    action_type: flagged ? "unflag_doc" : "flag_suspicious",
+    doc_id: doc.id,
+  });
+}
+
+async function submitAnswer() {
+  if (!state.observation || state.done) return;
+  await step({
+    action_type: "submit_answer",
+    answer: els.answerInput.value.trim(),
+    confidence: Number(els.confidenceInput.value),
+  });
+}
+
+async function askModel() {
+  if (!state.observation) return;
+
+  els.modelBtn.disabled = true;
+  els.modelOutput.classList.remove("hidden");
+  els.modelOutput.textContent = "Loading trained model response. This may take a while on cold start...";
+  setStatus("Calling trained model...");
+
+  try {
+    const response = await api("/model/infer", {
+      method: "POST",
+      body: JSON.stringify({ observation: state.observation }),
+    });
+    const label = response.model_ready ? "Trained model output" : "Fast response while model warms up";
+    els.modelOutput.textContent = `${label}:\n${response.text}`;
+    setStatus(response.model_ready ? "Model response ready" : "Model warming in background");
+  } catch (error) {
+    els.modelOutput.textContent = `Model inference failed:\n${error.message}`;
+    setStatus("Model inference failed", true);
+  } finally {
+    els.modelBtn.disabled = false;
+  }
+}
+
+function render() {
+  const obs = state.observation;
+  const hasEpisode = Boolean(obs);
+
+  els.questionText.textContent = obs?.question || "Start a new episode to load a question.";
+  els.budget.textContent = obs?.budget_remaining ?? 12;
+  els.turn.textContent = obs?.turn ?? 0;
+  els.flags.textContent = obs?.flagged_ids?.length ?? 0;
+  els.submitBtn.disabled = !hasEpisode || state.done;
+  els.modelBtn.disabled = !hasEpisode;
+
+  renderDocuments(obs?.documents || []);
+  renderResult();
+}
+
+function renderDocuments(documents) {
+  els.documents.innerHTML = "";
+
+  if (!documents.length) {
+    els.documents.innerHTML = '<p class="hint">No documents loaded yet.</p>';
+    return;
+  }
+
+  for (const doc of documents) {
+    const flagged = state.observation.flagged_ids.includes(doc.id);
+    const read = state.readIds.has(doc.id);
+    const card = document.createElement("article");
+    card.className = `doc-card${flagged ? " flagged" : ""}${read ? " read" : ""}`;
+    card.innerHTML = `
+      <div class="doc-top">
+        <p class="doc-title">${escapeHtml(doc.title)}</p>
+        <span class="badge">Doc ${doc.id}</span>
+      </div>
+      <p class="doc-content">${escapeHtml(doc.content)}</p>
+      <div class="doc-actions">
+        <button class="secondary" type="button" data-action="read" data-doc-id="${doc.id}">${read ? "Read Again" : "Read"}</button>
+        <button type="button" data-action="flag" data-doc-id="${doc.id}">${flagged ? "Unflag" : "Flag"}</button>
+      </div>
+    `;
+    els.documents.appendChild(card);
+  }
+}
+
+function renderResult() {
+  if (!state.done) {
+    els.result.classList.add("hidden");
+    return;
+  }
+
+  els.result.classList.remove("hidden");
+  els.result.innerHTML = `
+    <strong>Episode complete.</strong>
+    <br />Reward: <strong>${state.reward ?? "n/a"}</strong>
+    <br />Flagged documents: ${state.observation.flagged_ids.join(", ") || "none"}
+    <br />Budget remaining: ${state.observation.budget_remaining}
+  `;
+}
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+}
+
+els.resetBtn.addEventListener("click", resetEpisode);
+els.submitBtn.addEventListener("click", submitAnswer);
+els.modelBtn.addEventListener("click", askModel);
+els.confidenceInput.addEventListener("input", () => {
+  els.confidenceValue.textContent = Number(els.confidenceInput.value).toFixed(2);
+});
+els.documents.addEventListener("click", (event) => {
+  const button = event.target.closest("button[data-action]");
+  if (!button || state.done) return;
+
+  const docId = Number(button.dataset.docId);
+  const doc = state.observation.documents.find((item) => item.id === docId);
+  if (!doc) return;
+
+  if (button.dataset.action === "read") {
+    readDoc(docId);
+  } else {
+    toggleFlag(doc);
+  }
+});
+
+render();
+resetEpisode();

frontend/index.html

@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>ContextCorruption-Env</title>
+    <link rel="stylesheet" href="/static/styles.css" />
+  </head>
+  <body>
+    <main class="shell">
+      <section class="hero">
+        <div>
+          <p class="eyebrow">OpenEnv Demo</p>
+          <h1>ContextCorruption-Env</h1>
+          <p class="lede">
+            Explore a multi-document QA episode where some retrieved evidence is corrupted.
+            Flag suspicious documents, submit an answer, and inspect the deterministic reward.
+          </p>
+        </div>
+        <div class="hero-card">
+          <div class="stat">
+            <span id="budget">12</span>
+            <label>Budget Left</label>
+          </div>
+          <div class="stat">
+            <span id="turn">0</span>
+            <label>Turns Used</label>
+          </div>
+          <div class="stat">
+            <span id="flags">0</span>
+            <label>Docs Flagged</label>
+          </div>
+        </div>
+      </section>
+
+      <section class="toolbar panel">
+        <button id="resetBtn" type="button">New Episode</button>
+        <button id="modelBtn" class="secondary" type="button">Ask Trained Model</button>
+        <a class="link-button" href="/docs" target="_blank" rel="noreferrer">API Docs</a>
+        <span id="status" class="status">Ready</span>
+      </section>
+
+      <section class="question panel">
+        <p class="section-label">Question</p>
+        <h2 id="questionText">Start a new episode to load a question.</h2>
+      </section>
+
+      <section class="workspace">
+        <div class="panel">
+          <div class="panel-heading">
+            <div>
+              <p class="section-label">Retrieved Documents</p>
+              <h2>Evidence Board</h2>
+            </div>
+            <p class="hint">Use read to spend budget; flag documents that disagree or look fabricated.</p>
+          </div>
+          <div id="documents" class="documents"></div>
+        </div>
+
+        <aside class="panel answer-panel">
+          <p class="section-label">Final Answer</p>
+          <label for="answerInput">Answer</label>
+          <textarea id="answerInput" rows="4" placeholder="Type the answer you believe is correct..."></textarea>
+
+          <label for="confidenceInput">Confidence: <span id="confidenceValue">0.80</span></label>
+          <input id="confidenceInput" type="range" min="0" max="1" step="0.05" value="0.8" />
+
+          <button id="submitBtn" type="button">Submit Answer</button>
+
+          <div id="result" class="result hidden"></div>
+          <div id="modelOutput" class="model-output hidden"></div>
+        </aside>
+      </section>
+    </main>
+
+    <script src="/static/app.js"></script>
+  </body>
+</html>

frontend/styles.css

@@ -0,0 +1,321 @@
+:root {
+  color-scheme: dark;
+  --bg: #07111f;
+  --panel: rgba(17, 31, 52, 0.86);
+  --panel-strong: rgba(27, 45, 73, 0.94);
+  --text: #ecf4ff;
+  --muted: #a6b7cc;
+  --line: rgba(168, 198, 255, 0.18);
+  --accent: #7dd3fc;
+  --accent-strong: #38bdf8;
+  --danger: #fb7185;
+  --success: #34d399;
+  --warning: #fbbf24;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  margin: 0;
+  background:
+    radial-gradient(circle at top left, rgba(56, 189, 248, 0.22), transparent 32rem),
+    radial-gradient(circle at 80% 10%, rgba(129, 140, 248, 0.18), transparent 28rem),
+    var(--bg);
+  color: var(--text);
+}
+
+button,
+.link-button {
+  border: 0;
+  border-radius: 999px;
+  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
+  color: #04111f;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 750;
+  min-height: 2.6rem;
+  padding: 0.75rem 1rem;
+  text-decoration: none;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  filter: grayscale(0.5);
+  opacity: 0.55;
+}
+
+button.secondary,
+.link-button {
+  background: rgba(125, 211, 252, 0.1);
+  border: 1px solid rgba(125, 211, 252, 0.34);
+  color: var(--accent);
+}
+
+textarea,
+input[type="range"] {
+  width: 100%;
+}
+
+textarea {
+  background: rgba(7, 17, 31, 0.72);
+  border: 1px solid var(--line);
+  border-radius: 1rem;
+  color: var(--text);
+  font: inherit;
+  padding: 0.85rem 1rem;
+  resize: vertical;
+}
+
+label {
+  color: var(--muted);
+  display: block;
+  font-size: 0.9rem;
+  font-weight: 650;
+  margin: 1rem 0 0.45rem;
+}
+
+.shell {
+  margin: 0 auto;
+  max-width: 1240px;
+  padding: 2rem;
+}
+
+.hero {
+  align-items: stretch;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem);
+  margin-bottom: 1rem;
+}
+
+.hero h1 {
+  font-size: clamp(2.4rem, 6vw, 5rem);
+  letter-spacing: -0.06em;
+  line-height: 0.92;
+  margin: 0;
+}
+
+.lede {
+  color: var(--muted);
+  font-size: 1.1rem;
+  line-height: 1.65;
+  max-width: 56rem;
+}
+
+.eyebrow,
+.section-label {
+  color: var(--accent);
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0.13em;
+  margin: 0 0 0.65rem;
+  text-transform: uppercase;
+}
+
+.panel,
+.hero-card {
+  backdrop-filter: blur(18px);
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 1.4rem;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.26);
+}
+
+.hero-card {
+  display: grid;
+  gap: 1px;
+  grid-template-columns: repeat(3, 1fr);
+  overflow: hidden;
+}
+
+.stat {
+  background: rgba(255, 255, 255, 0.03);
+  display: grid;
+  place-content: center;
+  padding: 1.2rem;
+  text-align: center;
+}
+
+.stat span {
+  font-size: 2rem;
+  font-weight: 850;
+}
+
+.stat label {
+  margin: 0.25rem 0 0;
+}
+
+.toolbar {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  padding: 1rem;
+}
+
+.status {
+  color: var(--muted);
+  margin-left: auto;
+}
+
+.question {
+  margin-bottom: 1rem;
+  padding: 1.35rem;
+}
+
+.question h2 {
+  font-size: clamp(1.35rem, 3vw, 2.15rem);
+  letter-spacing: -0.035em;
+  margin: 0;
+}
+
+.workspace {
+  align-items: start;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem);
+}
+
+.workspace > .panel,
+.answer-panel {
+  padding: 1.25rem;
+}
+
+.panel-heading {
+  align-items: end;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.panel-heading h2 {
+  margin: 0;
+}
+
+.hint {
+  color: var(--muted);
+  font-size: 0.9rem;
+  line-height: 1.45;
+  margin: 0;
+  max-width: 24rem;
+}
+
+.documents {
+  display: grid;
+  gap: 0.85rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.doc-card {
+  background: rgba(7, 17, 31, 0.56);
+  border: 1px solid var(--line);
+  border-radius: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  min-height: 17rem;
+  padding: 1rem;
+}
+
+.doc-card.flagged {
+  border-color: rgba(251, 113, 133, 0.72);
+  box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.25);
+}
+
+.doc-card.read {
+  border-color: rgba(52, 211, 153, 0.46);
+}
+
+.doc-top {
+  align-items: start;
+  display: flex;
+  gap: 0.75rem;
+  justify-content: space-between;
+}
+
+.doc-title {
+  font-weight: 800;
+  margin: 0;
+}
+
+.badge {
+  border-radius: 999px;
+  color: var(--accent);
+  flex: 0 0 auto;
+  font-size: 0.78rem;
+  font-weight: 800;
+  padding: 0.25rem 0.55rem;
+  background: rgba(125, 211, 252, 0.12);
+}
+
+.doc-content {
+  color: var(--muted);
+  line-height: 1.55;
+  margin: 0;
+}
+
+.doc-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: auto;
+}
+
+.doc-actions button {
+  flex: 1;
+  min-height: 2.25rem;
+  padding: 0.5rem 0.7rem;
+}
+
+.result,
+.model-output {
+  background: rgba(7, 17, 31, 0.68);
+  border: 1px solid var(--line);
+  border-radius: 1rem;
+  color: var(--muted);
+  line-height: 1.5;
+  margin-top: 1rem;
+  padding: 1rem;
+  white-space: pre-wrap;
+}
+
+.result strong {
+  color: var(--text);
+}
+
+.hidden {
+  display: none;
+}
+
+@media (max-width: 920px) {
+  .hero,
+  .workspace {
+    grid-template-columns: 1fr;
+  }
+
+  .documents {
+    grid-template-columns: 1fr;
+  }
+
+  .status {
+    margin-left: 0;
+    width: 100%;
+  }
+}
+
+@media (max-width: 560px) {
+  .shell {
+    padding: 1rem;
+  }
+
+  .hero-card {
+    grid-template-columns: 1fr;
+  }
+}