Upload 6 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+templates/logo.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,21 @@
+FROM python:3.11-slim
+
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV PYTHONUNBUFFERED=1
+ENV DATA_DIR=/data
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt /app/requirements.txt
+RUN pip install --no-cache-dir -r /app/requirements.txt
+
+COPY main.py /app/main.py
+COPY templates /app/templates
+
+EXPOSE 7860
+
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

NOTES.md

@@ -0,0 +1,40 @@
+## Update Notes
+
+Date: 2026-05-05
+
+This update fixes answer-thread linking and adds runtime-only related answers without changing the data schema.
+
+### What changed
+
+1. Answer linking fix
+- Frontend answer submissions now include the current question text.
+- Backend answer attachment now checks whether the loaded conversation actually belongs to that question.
+- If the user is answering a new question that was only semantically matched, a fresh conversation is created before saving the answer.
+
+2. Related answers
+- `ask` now returns a `related` list built from the top semantic matches at runtime.
+- Related answers are read-only in the UI and are shown as contextual help, not as part of the active thread.
+- No database migration or schema change was introduced.
+
+3. UI and UX polish
+- Added the app logo from `logo.png` to the top bar and page icon.
+- Related answers are visually separated from the main thread to reduce confusion.
+- The diffusion animation now reveals answer text progressively by token instead of using a single blur-to-clear block.
+
+### Behavior after update
+
+- Exact match:
+  - shows the best answer
+  - shows other answers
+  - shows related answers
+
+- Similar-but-not-same match:
+  - can still show existing knowledge
+  - does not write into the matched conversation
+  - creates a correct new conversation when the user submits an answer
+
+### Files changed
+
+- `main.py`
+- `index.html`
+- `NOTES.md`

main.py

@@ -0,0 +1,673 @@
+from __future__ import annotations
+
+import json
+import os
+import uuid
+from datetime import datetime, timezone
+from pathlib import Path
+from typing import Any, Optional
+from urllib.parse import urlencode
+
+from fastapi import FastAPI, Request
+from fastapi.responses import FileResponse, HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+
+APP_TITLE = "Human Intelligence"
+DATA_DIR = Path(os.environ.get("DATA_DIR", "/data"))
+CONVERSATIONS_FILE = DATA_DIR / "conversations.json"
+EMBED_FILE = DATA_DIR / "embeddings.json"
+PAGE_SIZE = 20
+
+DEFAULT_TEMPLATES_DIR = Path(__file__).resolve().parent / "templates"
+DOCKER_TEMPLATES_DIR = Path("/app/templates")
+TEMPLATES_DIR = DOCKER_TEMPLATES_DIR if DOCKER_TEMPLATES_DIR.exists() else DEFAULT_TEMPLATES_DIR
+
+DATA_DIR.mkdir(parents=True, exist_ok=True)
+TEMPLATES_DIR.mkdir(parents=True, exist_ok=True)
+
+app = FastAPI(title=APP_TITLE)
+templates = Jinja2Templates(directory=str(TEMPLATES_DIR))
+app.mount("/templates", StaticFiles(directory=str(TEMPLATES_DIR)), name="templates")
+
+
+# Utilities
+
+def now_iso() -> str:
+    return datetime.now(timezone.utc).isoformat(timespec="seconds")
+
+
+def read_json(path: Path, default: Any):
+    if not path.exists():
+        return default
+    try:
+        return json.loads(path.read_text(encoding="utf-8"))
+    except Exception:
+        return default
+
+
+def write_json(path: Path, data: Any) -> None:
+    tmp = path.with_suffix(path.suffix + ".tmp")
+    tmp.write_text(
+        json.dumps(data, ensure_ascii=False, indent=2, default=str),
+        encoding="utf-8",
+    )
+    tmp.replace(path)
+
+
+def get_client_id(request: Request, payload: dict | None = None) -> str:
+    header_value = request.headers.get("x-client-id", "").strip()
+    if header_value:
+        return header_value
+    if payload:
+        payload_value = str(payload.get("client_id", "")).strip()
+        if payload_value:
+            return payload_value
+    return "anon"
+
+
+def anon_label(client_id: str) -> str:
+    return "Anonymous"
+
+
+def clean_text(value: Any) -> str:
+    return str(value or "").strip()
+
+
+def to_dt(value: Any) -> datetime:
+    text = clean_text(value)
+    if not text:
+        return datetime.fromtimestamp(0, tz=timezone.utc)
+    try:
+        return datetime.fromisoformat(text.replace("Z", "+00:00"))
+    except Exception:
+        return datetime.fromtimestamp(0, tz=timezone.utc)
+
+
+def clamp_page(value: Any) -> int:
+    try:
+        page = int(value)
+    except Exception:
+        page = 1
+    return page if page > 0 else 1
+
+
+def build_list_query(status: str, q: str, page: int) -> str:
+    params = {
+        "status": status,
+        "page": page,
+    }
+    if q:
+        params["q"] = q
+    return urlencode(params)
+
+
+# Conversations CRUD
+
+def load_conversations() -> list[dict[str, Any]]:
+    data = read_json(CONVERSATIONS_FILE, [])
+    if isinstance(data, dict) and "conversations" in data:
+        data = data["conversations"]
+    return data if isinstance(data, list) else []
+
+
+def save_conversations(conversations: list[dict[str, Any]]) -> None:
+    write_json(CONVERSATIONS_FILE, conversations)
+
+
+def normalize_version(version: dict[str, Any]) -> dict[str, Any]:
+    v = dict(version or {})
+    v.setdefault("id", uuid.uuid4().hex)
+    v.setdefault("text", "")
+    v.setdefault("author", "Anonymous")
+    v.setdefault("created_at", now_iso())
+    v.setdefault("votes", 0)
+    v.setdefault("votes_by_client", {})
+    if not isinstance(v["votes_by_client"], dict):
+        v["votes_by_client"] = {}
+    v["votes"] = int(v.get("votes", 0))
+    return v
+
+
+def normalize_answer(answer: dict[str, Any]) -> dict[str, Any]:
+    a = dict(answer or {})
+    a.setdefault("id", uuid.uuid4().hex)
+    a.setdefault("versions", [])
+    a.setdefault("active_version", "")
+    a.setdefault("created_at", now_iso())
+    a.setdefault("updated_at", a["created_at"])
+
+    versions = [
+        normalize_version(v)
+        for v in a.get("versions", [])
+        if isinstance(v, dict)
+    ]
+    a["versions"] = versions
+
+    if versions:
+        version_ids = {v["id"] for v in versions}
+        if a["active_version"] not in version_ids:
+            a["active_version"] = max(
+                versions,
+                key=lambda v: (int(v.get("votes", 0)), str(v.get("created_at", ""))),
+            )["id"]
+    return a
+
+
+def normalize_conversation(conversation: dict[str, Any]) -> dict[str, Any]:
+    c = dict(conversation or {})
+    c.setdefault("id", uuid.uuid4().hex)
+    c.setdefault("question", "")
+    c.setdefault("author", "Anonymous")
+    c.setdefault("created_at", now_iso())
+    c.setdefault("updated_at", c["created_at"])
+    c.setdefault("turns", [])
+    c.setdefault("answers", [])
+
+    turns: list[dict[str, Any]] = []
+    for turn in c.get("turns", []):
+        if not isinstance(turn, dict):
+            continue
+        t = dict(turn)
+        t.setdefault("id", uuid.uuid4().hex)
+        t.setdefault("role", "user")
+        t.setdefault("text", "")
+        t.setdefault("author", "Anonymous")
+        t.setdefault("ts", now_iso())
+        turns.append(t)
+    c["turns"] = turns
+
+    c["answers"] = [
+        normalize_answer(a)
+        for a in c.get("answers", [])
+        if isinstance(a, dict)
+    ]
+
+    if not c["turns"] and c["question"]:
+        c["turns"].append(
+            {
+                "id": uuid.uuid4().hex,
+                "role": "user",
+                "text": c["question"],
+                "author": c.get("author", "Anonymous"),
+                "ts": c["created_at"],
+            }
+        )
+    return c
+
+
+def load_conversation(conversation_id: str) -> Optional[dict[str, Any]]:
+    if not conversation_id:
+        return None
+    for conv in load_conversations():
+        if str(conv.get("id")) == conversation_id:
+            return normalize_conversation(conv)
+    return None
+
+
+def save_conversation(conversation: dict[str, Any]) -> dict[str, Any]:
+    conversation = normalize_conversation(conversation)
+    conversation["updated_at"] = now_iso()
+
+    conversations = [normalize_conversation(c) for c in load_conversations()]
+    replaced = False
+    for i, existing in enumerate(conversations):
+        if str(existing.get("id")) == str(conversation["id"]):
+            conversations[i] = conversation
+            replaced = True
+            break
+    if not replaced:
+        conversations.insert(0, conversation)
+
+    save_conversations(conversations)
+    return conversation
+
+
+# Question summaries and search
+
+def active_version(answer: dict[str, Any]) -> Optional[dict[str, Any]]:
+    versions = answer.get("versions", [])
+    if not versions:
+        return None
+    active_id = answer.get("active_version")
+    for version in versions:
+        if version.get("id") == active_id:
+            return version
+    return max(
+        versions,
+        key=lambda v: (int(v.get("votes", 0)), str(v.get("created_at", ""))),
+    )
+
+
+def answer_score(answer: dict[str, Any]) -> tuple[int, str]:
+    av = active_version(answer)
+    if av is None:
+        return 0, str(answer.get("created_at", ""))
+    return int(av.get("votes", 0)), str(answer.get("created_at", ""))
+
+
+def best_answer_payload(conversation: dict[str, Any]) -> Optional[dict[str, Any]]:
+    answers = conversation.get("answers", [])
+    if not answers:
+        return None
+    best = max(answers, key=answer_score)
+    av = active_version(best)
+    if av is None:
+        return None
+    return {
+        "answer_id": best["id"],
+        "version_id": av["id"],
+        "text": av["text"],
+        "votes": int(av.get("votes", 0)),
+        "author": av.get("author", "Anonymous"),
+        "created_at": av.get("created_at", ""),
+    }
+
+
+def answer_text_length(conversation: dict[str, Any]) -> int:
+    best = best_answer_payload(conversation)
+    if not best:
+        return 0
+    return len(clean_text(best.get("text")))
+
+
+def conversation_search_blob(conversation: dict[str, Any]) -> str:
+    parts = [clean_text(conversation.get("question"))]
+    for answer in conversation.get("answers", []):
+        for version in answer.get("versions", []):
+            parts.append(clean_text(version.get("text")))
+    return "\n".join(part for part in parts if part).casefold()
+
+
+def matches_query(conversation: dict[str, Any], query: str) -> bool:
+    query = clean_text(query).casefold()
+    if not query:
+        return True
+    return query in conversation_search_blob(conversation)
+
+
+def conversation_summary(conversation: dict[str, Any]) -> dict[str, Any]:
+    conversation = normalize_conversation(conversation)
+    answers = conversation.get("answers", [])
+    best = best_answer_payload(conversation)
+    return {
+        "id": conversation["id"],
+        "question": clean_text(conversation.get("question")),
+        "created_at": conversation.get("created_at", ""),
+        "updated_at": conversation.get("updated_at", ""),
+        "answer_count": len(answers),
+        "has_answers": bool(answers),
+        "best_answer": best,
+        "best_answer_length": answer_text_length(conversation),
+        "best_answer_preview": clean_text(best.get("text"))[:220] if best else "",
+    }
+
+
+def sort_conversations_for_queue(
+    conversations: list[dict[str, Any]],
+    status: str,
+    query: str,
+) -> list[dict[str, Any]]:
+    status = clean_text(status).lower() or "unanswered"
+    query = clean_text(query)
+
+    if status == "unanswered" and not query:
+        return sorted(
+            conversations,
+            key=lambda c: to_dt(c.get("created_at") or c.get("updated_at")),
+            reverse=True,
+        )
+
+    def key(conversation: dict[str, Any]):
+        has_answers = bool(conversation.get("answers"))
+        best_length = answer_text_length(conversation) if has_answers else 0
+        updated = to_dt(conversation.get("updated_at") or conversation.get("created_at"))
+        return (
+            0 if not has_answers else 1,
+            0 if not has_answers else best_length,
+            -updated.timestamp(),
+        )
+
+    return sorted(conversations, key=key)
+
+
+def list_questions(status: str = "unanswered", q: str = "", page: int = 1) -> dict[str, Any]:
+    status = clean_text(status).lower() or "unanswered"
+    if status not in {"unanswered", "answered", "all"}:
+        status = "unanswered"
+    q = clean_text(q)
+    page = clamp_page(page)
+
+    conversations = [normalize_conversation(c) for c in load_conversations()]
+
+    if status == "unanswered":
+        conversations = [c for c in conversations if not c.get("answers")]
+    elif status == "answered":
+        conversations = [c for c in conversations if c.get("answers")]
+
+    if q:
+        conversations = [c for c in conversations if matches_query(c, q)]
+
+    conversations = sort_conversations_for_queue(conversations, status=status, query=q)
+    total = len(conversations)
+    start = (page - 1) * PAGE_SIZE
+    end = start + PAGE_SIZE
+    items = [conversation_summary(c) for c in conversations[start:end]]
+
+    return {
+        "items": items,
+        "page": page,
+        "page_size": PAGE_SIZE,
+        "total": total,
+        "has_prev": page > 1,
+        "has_next": end < total,
+        "status": status,
+        "q": q,
+    }
+
+
+# Write actions
+
+def create_conversation(question: str, author: str = "Anonymous") -> dict[str, Any]:
+    question = question.strip()
+    now = now_iso()
+    conversation = {
+        "id": uuid.uuid4().hex,
+        "question": question,
+        "author": author,
+        "created_at": now,
+        "updated_at": now,
+        "turns": [
+            {
+                "id": uuid.uuid4().hex,
+                "role": "user",
+                "text": question,
+                "author": author,
+                "ts": now,
+            }
+        ],
+        "answers": [],
+    }
+    return save_conversation(conversation)
+
+
+def add_answer(
+    conversation_id: str,
+    text: str,
+    author: str = "Anonymous",
+    question_if_new: str | None = None,
+) -> tuple[Optional[dict[str, Any]], str]:
+    text = text.strip()
+    if not text:
+        return None, "empty answer"
+
+    conversation = load_conversation(conversation_id)
+    if question_if_new:
+        if conversation is None or conversation.get("question") != question_if_new:
+            conversation = create_conversation(question_if_new, author)
+    elif conversation is None:
+        return None, "conversation not found"
+
+    now = now_iso()
+    version = normalize_version(
+        {
+            "text": text,
+            "author": author,
+            "created_at": now,
+            "votes": 0,
+            "votes_by_client": {},
+        }
+    )
+    answer = normalize_answer(
+        {
+            "id": uuid.uuid4().hex,
+            "versions": [version],
+            "active_version": version["id"],
+            "created_at": now,
+            "updated_at": now,
+        }
+    )
+
+    conversation["answers"].append(answer)
+    conversation["turns"].append(
+        {
+            "id": uuid.uuid4().hex,
+            "role": "assistant",
+            "text": text,
+            "author": author,
+            "answer_id": answer["id"],
+            "version_id": version["id"],
+            "ts": now,
+        }
+    )
+
+    conversation = save_conversation(conversation)
+    return conversation, "ok"
+
+
+def propose_version(
+    conversation_id: str,
+    answer_id: str,
+    text: str,
+    author: str = "Anonymous",
+) -> tuple[Optional[dict[str, Any]], str]:
+    text = text.strip()
+    if not text:
+        return None, "empty proposal"
+
+    conversation = load_conversation(conversation_id)
+    if conversation is None:
+        return None, "conversation not found"
+
+    for answer in conversation["answers"]:
+        if str(answer.get("id")) != answer_id:
+            continue
+
+        now = now_iso()
+        version = normalize_version(
+            {
+                "text": text,
+                "author": author,
+                "created_at": now,
+                "votes": 0,
+                "votes_by_client": {},
+            }
+        )
+        answer["versions"].append(version)
+        answer["updated_at"] = now
+        conversation = save_conversation(conversation)
+        return conversation, "ok"
+
+    return None, "answer not found"
+
+
+def vote_version(
+    conversation_id: str,
+    answer_id: str,
+    version_id: str,
+    client_id: str,
+    delta: int,
+) -> tuple[Optional[dict[str, Any]], str]:
+    conversation = load_conversation(conversation_id)
+    if conversation is None:
+        return None, "conversation not found"
+
+    delta = 1 if int(delta) >= 0 else -1
+
+    for answer in conversation["answers"]:
+        if str(answer.get("id")) != answer_id:
+            continue
+        for version in answer.get("versions", []):
+            if str(version.get("id")) != version_id:
+                continue
+
+            votes_by_client = version.setdefault("votes_by_client", {})
+            if not isinstance(votes_by_client, dict):
+                votes_by_client = {}
+                version["votes_by_client"] = votes_by_client
+
+            current = int(votes_by_client.get(client_id, 0))
+            if current == delta:
+                return conversation, "already_voted"
+
+            votes_by_client[client_id] = delta
+            version["votes"] = int(sum(int(v) for v in votes_by_client.values()))
+
+            if answer.get("versions"):
+                answer["active_version"] = max(
+                    answer["versions"],
+                    key=lambda v: (int(v.get("votes", 0)), str(v.get("created_at", ""))),
+                )["id"]
+
+            conversation = save_conversation(conversation)
+            return conversation, "ok"
+
+    return None, "version not found"
+
+
+# Routes
+
+@app.get("/", response_class=HTMLResponse)
+def home(request: Request):
+    status = clean_text(request.query_params.get("status")).lower() or "unanswered"
+    if status not in {"unanswered", "answered", "all"}:
+        status = "unanswered"
+    q = clean_text(request.query_params.get("q"))
+    page = clamp_page(request.query_params.get("page", 1))
+    conversation_id = clean_text(request.query_params.get("conversation_id"))
+
+    list_state = list_questions(status=status, q=q, page=page)
+    detail = load_conversation(conversation_id) if conversation_id else None
+
+    init = {
+        "ok": True,
+        "client_id": get_client_id(request),
+        "view": "detail" if detail else "list",
+        "filters": {
+            "status": list_state["status"],
+            "q": list_state["q"],
+            "page": list_state["page"],
+            "page_size": list_state["page_size"],
+        },
+        "list": list_state,
+        "detail": detail,
+        "conversation_id": conversation_id,
+        "back_query": build_list_query(list_state["status"], list_state["q"], list_state["page"]),
+    }
+    return templates.TemplateResponse(
+        request,
+        "index.html",
+        {
+            "app_title": APP_TITLE,
+            "init_json": json.dumps(init, ensure_ascii=False),
+        },
+    )
+
+
+@app.get("/logo.png")
+def logo():
+    logo_path = TEMPLATES_DIR / "logo.png"
+    if logo_path.exists():
+        return FileResponse(logo_path)
+    return JSONResponse({"ok": False, "error": "logo not found"}, status_code=404)
+
+
+@app.get("/health")
+def health():
+    return {"ok": True}
+
+
+@app.post("/api")
+async def api(request: Request):
+    try:
+        payload = await request.json()
+    except Exception:
+        return JSONResponse({"ok": False, "error": "bad payload"})
+
+    action = clean_text(payload.get("action"))
+    client_id = get_client_id(request, payload)
+    author = anon_label(client_id)
+
+    if action == "init":
+        status = clean_text(payload.get("status")).lower() or "unanswered"
+        q = clean_text(payload.get("q"))
+        page = clamp_page(payload.get("page", 1))
+        conversation_id = clean_text(payload.get("conversation_id"))
+        return JSONResponse(
+            {
+                "ok": True,
+                "client_id": client_id,
+                "list": list_questions(status=status, q=q, page=page),
+                "detail": load_conversation(conversation_id) if conversation_id else None,
+            }
+        )
+
+    if action == "list_questions":
+        status = clean_text(payload.get("status")).lower() or "unanswered"
+        q = clean_text(payload.get("q"))
+        page = clamp_page(payload.get("page", 1))
+        return JSONResponse({"ok": True, **list_questions(status=status, q=q, page=page)})
+
+    if action in {"get_question_detail", "get_conversation"}:
+        conversation_id = clean_text(payload.get("conversation_id"))
+        conversation = load_conversation(conversation_id)
+        if conversation is None:
+            return JSONResponse({"ok": False, "error": "not found"})
+        return JSONResponse({"ok": True, "conversation": conversation})
+
+    if action in {"add_answer", "answer"}:
+        conversation_id = clean_text(payload.get("conversation_id"))
+        text = clean_text(payload.get("text"))
+        question = clean_text(payload.get("question")) or None
+
+        conversation, msg = add_answer(
+            conversation_id=conversation_id,
+            text=text,
+            author=author,
+            question_if_new=question,
+        )
+        if conversation is None:
+            return JSONResponse({"ok": False, "error": msg})
+        return JSONResponse({"ok": True, "conversation": conversation})
+
+    if action in {"propose_version", "propose"}:
+        conversation_id = clean_text(payload.get("conversation_id"))
+        answer_id = clean_text(payload.get("answer_id"))
+        text = clean_text(payload.get("text"))
+
+        conversation, msg = propose_version(
+            conversation_id=conversation_id,
+            answer_id=answer_id,
+            text=text,
+            author=author,
+        )
+        if conversation is None:
+            return JSONResponse({"ok": False, "error": msg})
+        return JSONResponse({"ok": True, "conversation": conversation})
+
+    if action in {"vote_version", "vote"}:
+        conversation_id = clean_text(payload.get("conversation_id"))
+        answer_id = clean_text(payload.get("answer_id"))
+        version_id = clean_text(payload.get("version_id"))
+        delta = int(payload.get("delta", 1))
+
+        conversation, msg = vote_version(
+            conversation_id=conversation_id,
+            answer_id=answer_id,
+            version_id=version_id,
+            client_id=client_id,
+            delta=delta,
+        )
+        if conversation is None:
+            return JSONResponse({"ok": False, "error": msg})
+        if msg == "already_voted":
+            return JSONResponse({"ok": False, "error": "already voted"})
+        return JSONResponse({"ok": True, "conversation": conversation})
+
+    return JSONResponse({"ok": False, "error": f"unknown action: {action}"})
+
+
+if __name__ == "__main__":
+    import uvicorn
+
+    uvicorn.run("main:app", host="0.0.0.0", port=7860, reload=False)

requirements.txt

@@ -0,0 +1,3 @@
+fastapi==0.115.6
+uvicorn[standard]==0.34.0
+jinja2==3.1.5

templates/index.html

@@ -0,0 +1,967 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" type="image/png" href="/templates/logo.png" />
+  <title>{{ app_title }}</title>
+  <style>
+    :root {
+      --bg: #f4efe5;
+      --panel: #fffaf2;
+      --panel-2: #efe4d2;
+      --line: #d1bfa3;
+      --text: #2c2218;
+      --muted: #75624e;
+      --accent: #a44d2f;
+      --accent-soft: #f2d6c7;
+      --good: #3f6b3a;
+      --good-soft: #dcebd8;
+      --warn: #b07a17;
+      --warn-soft: #f9e8b9;
+      --bad: #8e3b2f;
+      --shadow: 0 18px 40px rgba(92, 62, 34, 0.14);
+      --radius: 18px;
+      --font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+      --mono: Consolas, "SFMono-Regular", monospace;
+    }
+
+    * { box-sizing: border-box; }
+    html, body { margin: 0; padding: 0; min-height: 100%; }
+    body {
+      font-family: var(--font);
+      color: var(--text);
+      background:
+        radial-gradient(circle at top right, rgba(164, 77, 47, 0.10), transparent 22%),
+        radial-gradient(circle at top left, rgba(176, 122, 23, 0.10), transparent 18%),
+        linear-gradient(180deg, #fbf6ee 0%, var(--bg) 100%);
+    }
+
+    a { color: inherit; }
+    button, input, textarea, select { font: inherit; }
+
+    .shell {
+      max-width: 1180px;
+      margin: 0 auto;
+      padding: 24px 18px 40px;
+    }
+
+    .topbar {
+      display: flex;
+      justify-content: space-between;
+      gap: 16px;
+      align-items: center;
+      padding: 18px 20px;
+      border: 1px solid var(--line);
+      border-radius: 24px;
+      background: rgba(255, 250, 242, 0.88);
+      backdrop-filter: blur(12px);
+      box-shadow: var(--shadow);
+    }
+
+    .brand {
+      display: flex;
+      gap: 14px;
+      align-items: center;
+      min-width: 0;
+    }
+
+    .brand img {
+      width: 42px;
+      height: 42px;
+      border-radius: 12px;
+      border: 1px solid var(--line);
+      object-fit: cover;
+      background: #fff;
+    }
+
+    .brand h1 {
+      margin: 0;
+      font-size: 1.15rem;
+      letter-spacing: -0.02em;
+    }
+
+    .brand p {
+      margin: 4px 0 0;
+      color: var(--muted);
+      font-size: 0.93rem;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      border: 1px solid var(--line);
+      border-radius: 999px;
+      padding: 7px 12px;
+      font-size: 0.82rem;
+      color: var(--muted);
+      background: rgba(255,255,255,0.66);
+      white-space: nowrap;
+    }
+
+    .view {
+      margin-top: 20px;
+      display: none;
+    }
+
+    .view.active { display: block; }
+
+    .panel {
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      background: var(--panel);
+      box-shadow: var(--shadow);
+    }
+
+    .list-layout {
+      display: grid;
+      gap: 18px;
+    }
+
+    .toolbar {
+      display: grid;
+      gap: 16px;
+      padding: 18px;
+    }
+
+    .toolbar-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .pill {
+      border: 1px solid var(--line);
+      background: #fff;
+      color: var(--muted);
+      border-radius: 999px;
+      padding: 9px 14px;
+      cursor: pointer;
+    }
+
+    .pill.active {
+      background: var(--accent);
+      color: #fff;
+      border-color: var(--accent);
+    }
+
+    .search-form {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      width: 100%;
+    }
+
+    .search-form input {
+      flex: 1 1 280px;
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      padding: 12px 14px;
+      background: #fff;
+      min-width: 0;
+    }
+
+    .btn {
+      border: 1px solid var(--line);
+      background: #fff;
+      color: var(--text);
+      border-radius: 14px;
+      padding: 11px 16px;
+      cursor: pointer;
+      transition: transform 120ms ease, background 120ms ease;
+    }
+
+    .btn:hover { transform: translateY(-1px); }
+    .btn.primary {
+      background: var(--accent);
+      border-color: var(--accent);
+      color: #fff;
+    }
+
+    .meta-line {
+      color: var(--muted);
+      font-size: 0.9rem;
+    }
+
+    .queue-list {
+      display: grid;
+      gap: 14px;
+      padding: 18px;
+    }
+
+    .queue-item {
+      display: grid;
+      gap: 10px;
+      padding: 16px;
+      border: 1px solid var(--line);
+      border-radius: 16px;
+      background: #fff;
+      text-decoration: none;
+      transition: border-color 120ms ease, transform 120ms ease;
+    }
+
+    .queue-item:hover {
+      border-color: var(--accent);
+      transform: translateY(-1px);
+    }
+
+    .queue-head {
+      display: flex;
+      justify-content: space-between;
+      gap: 12px;
+      align-items: flex-start;
+    }
+
+    .queue-head h2 {
+      margin: 0;
+      font-size: 1.06rem;
+      line-height: 1.4;
+    }
+
+    .queue-tags {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    .tag {
+      display: inline-flex;
+      align-items: center;
+      border-radius: 999px;
+      padding: 5px 10px;
+      font-size: 0.78rem;
+      border: 1px solid var(--line);
+      color: var(--muted);
+      background: #fffaf6;
+    }
+
+    .tag.unanswered {
+      border-color: #d7bf70;
+      background: var(--warn-soft);
+      color: #7c5b12;
+    }
+
+    .tag.answered {
+      border-color: #9cc199;
+      background: var(--good-soft);
+      color: #30502d;
+    }
+
+    .preview {
+      color: var(--muted);
+      line-height: 1.55;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .pager {
+      display: flex;
+      justify-content: space-between;
+      gap: 12px;
+      align-items: center;
+      padding: 0 18px 18px;
+      flex-wrap: wrap;
+    }
+
+    .pager-actions {
+      display: flex;
+      gap: 10px;
+    }
+
+    .empty {
+      padding: 28px 18px 34px;
+      text-align: center;
+      color: var(--muted);
+    }
+
+    .detail-layout {
+      display: grid;
+      gap: 18px;
+    }
+
+    .detail-header {
+      padding: 18px;
+      display: grid;
+      gap: 12px;
+    }
+
+    .back-link {
+      color: var(--accent);
+      text-decoration: none;
+      font-weight: 600;
+    }
+
+    .question-box {
+      padding: 20px;
+      border: 1px solid var(--line);
+      border-radius: 18px;
+      background: #fff;
+    }
+
+    .question-box h2 {
+      margin: 0 0 10px;
+      font-size: 1.35rem;
+      line-height: 1.35;
+    }
+
+    .answer-form,
+    .answer-card,
+    .version-card {
+      padding: 18px;
+      border: 1px solid var(--line);
+      border-radius: 18px;
+      background: #fff;
+    }
+
+    .answer-form textarea,
+    .proposal-form textarea {
+      width: 100%;
+      min-height: 120px;
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      padding: 12px 14px;
+      resize: vertical;
+      background: #fffdf9;
+      color: var(--text);
+    }
+
+    .section-title {
+      margin: 0;
+      font-size: 1.05rem;
+    }
+
+    .section-subtitle {
+      margin: 4px 0 0;
+      color: var(--muted);
+      font-size: 0.9rem;
+    }
+
+    .stack {
+      display: grid;
+      gap: 14px;
+    }
+
+    .answer-card {
+      display: grid;
+      gap: 14px;
+    }
+
+    .answer-top {
+      display: flex;
+      justify-content: space-between;
+      gap: 12px;
+      align-items: flex-start;
+      flex-wrap: wrap;
+    }
+
+    .answer-text,
+    .version-text {
+      line-height: 1.65;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .vote-row {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    .vote-btn {
+      border: 1px solid var(--line);
+      background: #fffaf6;
+      border-radius: 12px;
+      padding: 8px 12px;
+      cursor: pointer;
+    }
+
+    .vote-btn.active-up {
+      border-color: #709c6c;
+      background: var(--good-soft);
+      color: var(--good);
+    }
+
+    .vote-btn.active-down {
+      border-color: #c79488;
+      background: #f8ddd8;
+      color: var(--bad);
+    }
+
+    .proposal-form {
+      display: grid;
+      gap: 10px;
+      padding-top: 6px;
+    }
+
+    .proposal-actions,
+    .form-actions {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+
+    .muted {
+      color: var(--muted);
+      font-size: 0.9rem;
+    }
+
+    .toast {
+      position: fixed;
+      right: 18px;
+      bottom: 18px;
+      padding: 12px 14px;
+      border-radius: 14px;
+      color: #fff;
+      background: rgba(44, 34, 24, 0.92);
+      box-shadow: var(--shadow);
+      opacity: 0;
+      transform: translateY(10px);
+      pointer-events: none;
+      transition: opacity 150ms ease, transform 150ms ease;
+      max-width: min(340px, calc(100vw - 36px));
+    }
+
+    .toast.show {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    @media (max-width: 760px) {
+      .shell { padding: 16px 12px 28px; }
+      .topbar { padding: 14px; }
+      .queue-head,
+      .answer-top,
+      .toolbar-row,
+      .pager {
+        display: grid;
+      }
+      .search-form { grid-template-columns: 1fr; }
+      .btn, .pill { width: 100%; text-align: center; }
+      .pager-actions { width: 100%; }
+      .pager-actions .btn { flex: 1; }
+    }
+  </style>
+</head>
+<body>
+  <div class="shell">
+    <header class="topbar">
+      <div class="brand">
+        <img src="/templates/logo.png" alt="Logo" />
+        <div>
+          <h1>{{ app_title }} Queue</h1>
+          <p>Minimal project B for unanswered questions, answer versions, and voting.</p>
+        </div>
+      </div>
+      <div class="badge" id="statusBadge">Queue workspace</div>
+    </header>
+
+    <main>
+      <section id="listView" class="view">
+        <div class="list-layout">
+          <div class="panel toolbar">
+            <div class="toolbar-row">
+              <div>
+                <h2 class="section-title">Question queue</h2>
+                <p class="section-subtitle">Search stored questions and human answers with lightweight text matching.</p>
+              </div>
+              <div class="meta-line" id="listSummary"></div>
+            </div>
+            <div class="filters" id="statusFilters"></div>
+            <form id="searchForm" class="search-form">
+              <input id="searchInput" type="search" placeholder="Search questions, answers, or versions" />
+              <button class="btn primary" type="submit">Search</button>
+              <button class="btn" type="button" id="clearSearchBtn">Clear</button>
+            </form>
+          </div>
+
+          <div class="panel">
+            <div id="queueList" class="queue-list"></div>
+            <div id="emptyState" class="empty" hidden>No questions match this filter yet.</div>
+            <div class="pager">
+              <div class="meta-line" id="pagerInfo"></div>
+              <div class="pager-actions">
+                <button class="btn" id="prevPageBtn" type="button">Previous</button>
+                <button class="btn" id="nextPageBtn" type="button">Next</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="detailView" class="view">
+        <div class="detail-layout">
+          <div class="panel detail-header">
+            <a id="backLink" class="back-link" href="/">← Back to question list</a>
+            <div class="question-box">
+              <div class="queue-tags" id="detailTags"></div>
+              <h2 id="detailQuestion"></h2>
+              <div class="meta-line" id="detailMeta"></div>
+            </div>
+          </div>
+
+          <div class="panel" style="padding:18px;">
+            <div class="answer-form stack">
+              <div>
+                <h3 class="section-title">Add an answer</h3>
+                <p class="section-subtitle">Write the first answer or add another answer version path for the community to vote on.</p>
+              </div>
+              <textarea id="newAnswerText" placeholder="Write a human answer for this question"></textarea>
+              <div class="form-actions">
+                <button class="btn primary" id="submitAnswerBtn" type="button">Save answer</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="stack" id="answersMount"></div>
+        </div>
+      </section>
+    </main>
+  </div>
+
+  <div id="toast" class="toast" role="status" aria-live="polite"></div>
+
+  <script>
+    window.__INIT__ = {{ init_json|safe }};
+  </script>
+  <script>
+    (() => {
+      const S = {
+        clientId: null,
+        filters: { status: "unanswered", q: "", page: 1, page_size: 20 },
+        list: null,
+        detail: null,
+      };
+
+      const $ = (id) => document.getElementById(id);
+      const esc = (value) => String(value ?? "")
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+
+      function nl2br(value) {
+        return esc(value).replace(/\n/g, "<br>");
+      }
+
+      function trimText(value) {
+        return String(value || "").trim();
+      }
+
+      function fmtDate(value) {
+        if (!value) return "unknown time";
+        const d = new Date(value);
+        if (Number.isNaN(d.getTime())) return value;
+        return d.toLocaleString();
+      }
+
+      function getClientId() {
+        const key = "hi_queue_client_id";
+        let id = localStorage.getItem(key);
+        if (!id) {
+          id = Math.random().toString(36).slice(2) + Date.now().toString(36);
+          localStorage.setItem(key, id);
+        }
+        return id;
+      }
+
+      function showToast(message) {
+        const toast = $("toast");
+        toast.textContent = message;
+        toast.classList.add("show");
+        clearTimeout(showToast._timer);
+        showToast._timer = setTimeout(() => toast.classList.remove("show"), 2400);
+      }
+
+      function buildQuery(extra = {}) {
+        const params = new URLSearchParams();
+        const merged = {
+          status: S.filters.status,
+          q: S.filters.q,
+          page: S.filters.page,
+          ...extra,
+        };
+        if (merged.status) params.set("status", merged.status);
+        if (merged.q) params.set("q", merged.q);
+        if (merged.page && Number(merged.page) > 1) params.set("page", String(merged.page));
+        if (merged.conversation_id) params.set("conversation_id", merged.conversation_id);
+        return params.toString();
+      }
+
+      function pushListUrl() {
+        const qs = buildQuery();
+        history.replaceState({}, "", qs ? `/?${qs}` : "/");
+      }
+
+      function pushDetailUrl(conversationId) {
+        const qs = buildQuery({ conversation_id: conversationId });
+        history.pushState({}, "", `/?${qs}`);
+      }
+
+      async function callAPI(action, payload = {}) {
+        const resp = await fetch("/api", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-Client-Id": S.clientId,
+          },
+          body: JSON.stringify({ action, client_id: S.clientId, ...payload }),
+        });
+        return resp.json();
+      }
+
+      function activeVersion(answer) {
+        const versions = Array.isArray(answer?.versions) ? answer.versions : [];
+        if (!versions.length) return null;
+        const byId = versions.find((v) => v.id === answer.active_version);
+        if (byId) return byId;
+        return [...versions].sort((a, b) => {
+          const voteDiff = Number(b.votes || 0) - Number(a.votes || 0);
+          if (voteDiff !== 0) return voteDiff;
+          return String(b.created_at || "").localeCompare(String(a.created_at || ""));
+        })[0];
+      }
+
+      function sortedAnswers(conversation) {
+        return [...(conversation?.answers || [])].sort((a, b) => {
+          const av = activeVersion(a);
+          const bv = activeVersion(b);
+          const voteDiff = Number(bv?.votes || 0) - Number(av?.votes || 0);
+          if (voteDiff !== 0) return voteDiff;
+          return String(b.created_at || "").localeCompare(String(a.created_at || ""));
+        });
+      }
+
+      function renderStatusFilters() {
+        const filters = [
+          ["unanswered", "Unanswered"],
+          ["answered", "Answered"],
+          ["all", "All"],
+        ];
+        $("statusFilters").innerHTML = filters.map(([value, label]) => `
+          <button class="pill ${S.filters.status === value ? "active" : ""}" type="button" data-status="${value}">${label}</button>
+        `).join("");
+
+        document.querySelectorAll("[data-status]").forEach((button) => {
+          button.onclick = () => {
+            S.filters.status = button.getAttribute("data-status");
+            S.filters.page = 1;
+            loadList();
+          };
+        });
+      }
+
+      function renderList() {
+        const list = S.list || { items: [], total: 0, page: 1, page_size: 20, has_next: false, has_prev: false };
+        $("listSummary").textContent = `${list.total} question${list.total === 1 ? "" : "s"} in queue`;
+        $("searchInput").value = S.filters.q || "";
+
+        const items = Array.isArray(list.items) ? list.items : [];
+        $("queueList").innerHTML = items.map((item) => {
+          const answered = item.has_answers;
+          const detailHref = `/?${buildQuery({ conversation_id: item.id })}`;
+          const preview = answered ? (item.best_answer_preview || "") : "No answer yet. Open this question to write the first answer.";
+          return `
+            <a class="queue-item" href="${detailHref}" data-open-detail="${item.id}">
+              <div class="queue-head">
+                <h2>${esc(item.question || "Untitled question")}</h2>
+                <div class="queue-tags">
+                  <span class="tag ${answered ? "answered" : "unanswered"}">${answered ? "Answered" : "Unanswered"}</span>
+                  <span class="tag">${Number(item.answer_count || 0)} answer${Number(item.answer_count || 0) === 1 ? "" : "s"}</span>
+                </div>
+              </div>
+              <div class="preview">${nl2br(preview)}</div>
+              <div class="meta-line">Updated ${fmtDate(item.updated_at || item.created_at)}${answered && item.best_answer ? ` · best answer votes ${Number(item.best_answer.votes || 0)}` : ""}</div>
+            </a>
+          `;
+        }).join("");
+
+        $("emptyState").hidden = items.length > 0;
+        $("pagerInfo").textContent = `Page ${list.page} · showing ${items.length} of ${list.total}`;
+        $("prevPageBtn").disabled = !list.has_prev;
+        $("nextPageBtn").disabled = !list.has_next;
+
+        document.querySelectorAll("[data-open-detail]").forEach((link) => {
+          link.onclick = async (event) => {
+            event.preventDefault();
+            await openDetail(link.getAttribute("data-open-detail"));
+          };
+        });
+      }
+
+      function renderDetail() {
+        const conversation = S.detail;
+        if (!conversation) return;
+        const answers = sortedAnswers(conversation);
+        const hasAnswers = answers.length > 0;
+
+        $("detailQuestion").textContent = conversation.question || "Untitled question";
+        $("detailMeta").textContent = `Created ${fmtDate(conversation.created_at)} · Updated ${fmtDate(conversation.updated_at)} · ${answers.length} answer${answers.length === 1 ? "" : "s"}`;
+        $("detailTags").innerHTML = `
+          <span class="tag ${hasAnswers ? "answered" : "unanswered"}">${hasAnswers ? "Answered" : "Unanswered"}</span>
+          <span class="tag">Question ID ${esc(conversation.id)}</span>
+        `;
+        $("backLink").href = `/?${buildQuery()}`;
+        $("newAnswerText").value = "";
+
+        $("answersMount").innerHTML = answers.length
+          ? answers.map((answer, index) => renderAnswerCard(answer, index)).join("")
+          : `<div class="panel empty">No answers yet. This question is ready for its first human answer.</div>`;
+
+        bindDetailHandlers();
+      }
+
+      function renderAnswerCard(answer, index) {
+        const current = activeVersion(answer);
+        const versions = [...(answer.versions || [])].sort((a, b) => {
+          const voteDiff = Number(b.votes || 0) - Number(a.votes || 0);
+          if (voteDiff !== 0) return voteDiff;
+          return String(b.created_at || "").localeCompare(String(a.created_at || ""));
+        });
+
+        const currentHtml = current ? `
+          <div class="answer-text">${nl2br(current.text || "")}</div>
+          <div class="vote-row">
+            ${renderVoteButton(answer.id, current.id, 1, `▲ ${Number(current.votes || 0)}`, current)}
+            ${renderVoteButton(answer.id, current.id, -1, "▼", current)}
+          </div>
+        ` : `<div class="muted">This answer has no active version yet.</div>`;
+
+        const versionCards = versions.map((version) => `
+          <div class="version-card">
+            <div class="answer-top">
+              <div>
+                <strong>${esc(version.author || "Anonymous")}</strong>
+                <div class="muted">${fmtDate(version.created_at)}${version.id === answer.active_version ? " · active version" : ""}</div>
+              </div>
+              <div class="queue-tags">
+                <span class="tag">Votes ${Number(version.votes || 0)}</span>
+                ${version.id === answer.active_version ? '<span class="tag answered">Active</span>' : ""}
+              </div>
+            </div>
+            <div class="version-text">${nl2br(version.text || "")}</div>
+            <div class="vote-row">
+              ${renderVoteButton(answer.id, version.id, 1, `▲ ${Number(version.votes || 0)}`, version)}
+              ${renderVoteButton(answer.id, version.id, -1, "▼", version)}
+            </div>
+          </div>
+        `).join("");
+
+        return `
+          <div class="panel" id="answer-${answer.id}">
+            <div class="answer-card">
+              <div class="answer-top">
+                <div>
+                  <h3 class="section-title">Answer ${index + 1}</h3>
+                  <p class="section-subtitle">Current community-selected version shown first. Historical versions stay searchable and voteable.</p>
+                </div>
+                <div class="queue-tags">
+                  <span class="tag">${Number(answer.versions?.length || 0)} version${Number(answer.versions?.length || 0) === 1 ? "" : "s"}</span>
+                </div>
+              </div>
+              ${currentHtml}
+              <div class="proposal-form">
+                <label for="proposal-${answer.id}"><strong>Propose a new version</strong></label>
+                <textarea id="proposal-${answer.id}" placeholder="Write a better version for this answer"></textarea>
+                <div class="proposal-actions">
+                  <button class="btn primary" type="button" data-propose="${answer.id}">Save version</button>
+                </div>
+              </div>
+              <div class="stack">${versionCards}</div>
+            </div>
+          </div>
+        `;
+      }
+
+      function renderVoteButton(answerId, versionId, delta, label, version) {
+        const voteMap = version?.votes_by_client || {};
+        const current = Number(voteMap[S.clientId] || 0);
+        const cls = delta === 1 ? (current === 1 ? "active-up" : "") : (current === -1 ? "active-down" : "");
+        return `<button class="vote-btn ${cls}" type="button" data-vote="${answerId}|${versionId}|${delta}">${label}</button>`;
+      }
+
+      function showView(name) {
+        $("listView").classList.toggle("active", name === "list");
+        $("detailView").classList.toggle("active", name === "detail");
+        $("statusBadge").textContent = name === "detail" ? "Question detail" : "Queue workspace";
+      }
+
+      async function loadList() {
+        const res = await callAPI("list_questions", {
+          status: S.filters.status,
+          q: S.filters.q,
+          page: S.filters.page,
+        });
+        if (!res.ok) {
+          showToast(res.error || "Could not load question list");
+          return;
+        }
+        S.list = res;
+        renderStatusFilters();
+        renderList();
+        showView("list");
+        pushListUrl();
+      }
+
+      async function loadDetail(conversationId, pushUrl = false) {
+        const res = await callAPI("get_question_detail", { conversation_id: conversationId });
+        if (!res.ok) {
+          showToast(res.error || "Question not found");
+          return false;
+        }
+        S.detail = res.conversation;
+        renderDetail();
+        showView("detail");
+        if (pushUrl) pushDetailUrl(conversationId);
+        return true;
+      }
+
+      async function openDetail(conversationId) {
+        await loadDetail(conversationId, true);
+      }
+
+      function bindListHandlers() {
+        $("searchForm").addEventListener("submit", async (event) => {
+          event.preventDefault();
+          S.filters.q = trimText($("searchInput").value);
+          S.filters.page = 1;
+          await loadList();
+        });
+
+        $("clearSearchBtn").onclick = async () => {
+          $("searchInput").value = "";
+          S.filters.q = "";
+          S.filters.page = 1;
+          await loadList();
+        };
+
+        $("prevPageBtn").onclick = async () => {
+          if (!S.list?.has_prev) return;
+          S.filters.page = Math.max(1, Number(S.filters.page || 1) - 1);
+          await loadList();
+        };
+
+        $("nextPageBtn").onclick = async () => {
+          if (!S.list?.has_next) return;
+          S.filters.page = Number(S.filters.page || 1) + 1;
+          await loadList();
+        };
+      }
+
+      function bindDetailHandlers() {
+        $("submitAnswerBtn").onclick = async () => {
+          const text = trimText($("newAnswerText").value);
+          if (!text) {
+            showToast("Write an answer first");
+            return;
+          }
+          const res = await callAPI("add_answer", {
+            conversation_id: S.detail.id,
+            text,
+          });
+          if (!res.ok) {
+            showToast(res.error || "Could not save answer");
+            return;
+          }
+          S.detail = res.conversation;
+          renderDetail();
+          showToast("Answer saved");
+          if (S.filters.status === "unanswered") {
+            await loadList();
+            showView("detail");
+          }
+        };
+
+        document.querySelectorAll("[data-propose]").forEach((button) => {
+          button.onclick = async () => {
+            const answerId = button.getAttribute("data-propose");
+            const box = $("proposal-" + answerId);
+            const text = trimText(box?.value);
+            if (!text) {
+              showToast("Write a version first");
+              return;
+            }
+            const res = await callAPI("propose_version", {
+              conversation_id: S.detail.id,
+              answer_id: answerId,
+              text,
+            });
+            if (!res.ok) {
+              showToast(res.error || "Could not save version");
+              return;
+            }
+            S.detail = res.conversation;
+            renderDetail();
+            showToast("Version saved");
+          };
+        });
+
+        document.querySelectorAll("[data-vote]").forEach((button) => {
+          button.onclick = async () => {
+            const [answerId, versionId, delta] = button.getAttribute("data-vote").split("|");
+            const res = await callAPI("vote_version", {
+              conversation_id: S.detail.id,
+              answer_id: answerId,
+              version_id: versionId,
+              delta: Number(delta),
+            });
+            if (!res.ok) {
+              showToast(res.error || "Vote failed");
+              return;
+            }
+            S.detail = res.conversation;
+            renderDetail();
+            showToast("Vote saved");
+          };
+        });
+      }
+
+      function initFromServer() {
+        const init = window.__INIT__ || {};
+        S.clientId = init.client_id || getClientId();
+        S.filters = {
+          ...S.filters,
+          ...(init.filters || {}),
+        };
+        S.list = init.list || null;
+        S.detail = init.detail || null;
+
+        renderStatusFilters();
+        renderList();
+        bindListHandlers();
+
+        if (S.detail) {
+          renderDetail();
+          showView("detail");
+        } else {
+          showView("list");
+        }
+      }
+
+      window.addEventListener("popstate", async () => {
+        const params = new URLSearchParams(window.location.search);
+        S.filters.status = params.get("status") || "unanswered";
+        S.filters.q = params.get("q") || "";
+        S.filters.page = Number(params.get("page") || 1);
+        const conversationId = params.get("conversation_id");
+        await loadList();
+        if (conversationId) {
+          await loadDetail(conversationId, false);
+        }
+      });
+
+      initFromServer();
+    })();
+  </script>
+</body>
+</html>