yana-web 0.1.0

package/missions.js

@@ -0,0 +1,140 @@
+'use strict';
+// Yana Missions — file-backed mission store (.yana/missions.json).
+//
+// A mission is created from a goal, classified by the YAMTAM router
+// (simple/complex/external → owner + starter tasks), then planned in detail
+// by the LLM from the UI ("Plan with Yana" calls /api/chat and PATCHes the
+// task list back here). Progress is always computed from task states —
+// never stored, so it can't drift.
+
+const fs   = require('fs');
+const path = require('path');
+const { classifySensitivity } = require('yamtam-core');
+
+// Same persistent data dir as auth.js — YANA_DATA_DIR points at a mounted
+// volume (e.g. /data on Railway) so missions survive redeploys.
+const DATA_DIR = process.env.YANA_DATA_DIR || path.join(require('os').homedir(), '.yana');
+const FILE     = path.join(DATA_DIR, 'missions.json');
+const MAX_MISSIONS = 200;
+const MAX_TASKS    = 30;
+
+function load() {
+  try { return JSON.parse(fs.readFileSync(FILE, 'utf8')); } catch (_) { return []; }
+}
+
+function save(missions) {
+  fs.mkdirSync(DATA_DIR, { recursive: true });
+  fs.writeFileSync(FILE, JSON.stringify(missions, null, 2));
+}
+
+function json(res, status, obj) {
+  res.writeHead(status, { 'Content-Type': 'application/json' });
+  res.end(JSON.stringify(obj));
+}
+
+function progress(m) {
+  if (!m.tasks.length) return 0;
+  const done = m.tasks.filter(t => t.state === 'done').length;
+  return Math.round((done / m.tasks.length) * 100);
+}
+
+function withProgress(m) {
+  return { ...m, progress: progress(m) };
+}
+
+function sanitizeTasks(tasks) {
+  if (!Array.isArray(tasks)) return null;
+  const STATES = new Set(['queued', 'active', 'done']);
+  return tasks.slice(0, MAX_TASKS).map(t => ({
+    name:  String(t.name  || '').slice(0, 200),
+    agent: String(t.agent || 'Navigator').slice(0, 60),
+    state: STATES.has(t.state) ? t.state : 'queued',
+  })).filter(t => t.name);
+}
+
+// ── Handlers (routeFn = yamtam-core route(), injected by server.js) ──────────
+function handleList(req, res) {
+  json(res, 200, { missions: load().map(withProgress) });
+}
+
+async function handleCreate(req, res, body, routeFn) {
+  const name = body && typeof body.name === 'string' ? body.name.trim().slice(0, 200) : '';
+  if (!name) { json(res, 400, { error: 'Missing mission name' }); return; }
+
+  // Rule 68 — missions are persisted to disk; confidential content may not
+  // cross that boundary. Checked here directly (not via routeFn) so an old
+  // yamtam-rt binary without sensitivity fields can't sneak one through.
+  const sens = classifySensitivity(name);
+  if (sens.sensitivity === 'confidential' || sens.sensitivity === 'sovereign') {
+    json(res, 403, {
+      error: 'Confidential content cannot be stored in missions (rule 68). ' +
+             'Remove the confidential marker or keep this in chat with Confidential Mode on.',
+      sensitivity: sens.sensitivity,
+    });
+    return;
+  }
+
+  const missions = load();
+  if (missions.length >= MAX_MISSIONS) { json(res, 409, { error: 'Mission limit reached' }); return; }
+
+  // Classify the goal so the mission starts with an honest route decision
+  let decision = null;
+  try { decision = await routeFn(name); } catch (_) {}
+
+  const mission = {
+    id:      'm' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6),
+    name,
+    owner:   'Navigator',
+    status:  'planning',
+    route:   decision ? decision.route : null,
+    skill:   (decision && decision.suggested_skill) || null,
+    created: new Date().toISOString(),
+    tasks: [
+      { name: 'Understand the goal',            agent: 'Navigator', state: 'done'   },
+      { name: 'Plan tasks (use "Plan with Yana" or add your own)', agent: 'Navigator', state: 'active' },
+    ],
+  };
+  missions.unshift(mission);
+  save(missions);
+  json(res, 200, { mission: withProgress(mission) });
+}
+
+function handleUpdate(req, res, body) {
+  const id = body && body.id;
+  if (!id) { json(res, 400, { error: 'Missing id' }); return; }
+
+  const missions = load();
+  const m = missions.find(x => x.id === id);
+  if (!m) { json(res, 404, { error: 'Mission not found' }); return; }
+
+  if (typeof body.name === 'string' && body.name.trim()) {
+    const sens = classifySensitivity(body.name);
+    if (sens.sensitivity === 'confidential' || sens.sensitivity === 'sovereign') {
+      json(res, 403, { error: 'Confidential content cannot be stored in missions (rule 68)', sensitivity: sens.sensitivity });
+      return;
+    }
+    m.name = body.name.trim().slice(0, 200);
+  }
+  if (['planning', 'active', 'done'].includes(body.status)) m.status = body.status;
+  const tasks = sanitizeTasks(body.tasks);
+  if (tasks && tasks.length) m.tasks = tasks;
+
+  // All tasks done → mission done; any active task on a done mission → active
+  if (m.tasks.length && m.tasks.every(t => t.state === 'done')) m.status = 'done';
+  else if (m.status === 'done') m.status = 'active';
+
+  save(missions);
+  json(res, 200, { mission: withProgress(m) });
+}
+
+function handleDelete(req, res, body) {
+  const id = body && body.id;
+  if (!id) { json(res, 400, { error: 'Missing id' }); return; }
+  const missions = load();
+  const next = missions.filter(x => x.id !== id);
+  if (next.length === missions.length) { json(res, 404, { error: 'Mission not found' }); return; }
+  save(next);
+  json(res, 200, { ok: true });
+}
+
+module.exports = { handleList, handleCreate, handleUpdate, handleDelete };

package/mobile/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="jade">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
+  <link rel="icon" type="image/png" href="/logo.png" />
+  <title>Yana — Mobile</title>
+  <link rel="preconnect" href="https://fonts.bunny.net" crossorigin />
+  <link href="https://fonts.bunny.net/css?family=be-vietnam-pro:300,400,500,600&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="themes.css" />
+  <link rel="stylesheet" href="mobile.css" />
+</head>
+<body>
+  <div id="root"></div>
+  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
+  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <!-- Flag before data.js: enables the mobile hydration block (window.YANA fields) -->
+  <script>window.YANA_MOBILE = true;</script>
+  <script src="/shared/data.js"></script>
+  <!-- Encrypted vault — same module as desktop so API keys survive provider changes -->
+  <script src="/shared/crypto-store.js"></script>
+  <!-- Shared with desktop: tweaks persist to localStorage (yana.tweaks) -->
+  <script type="text/babel" src="/shared/tweaks-panel.jsx"></script>
+  <!-- Mobile shell + screens in dependency order -->
+  <script type="text/babel" src="m-shell.jsx"></script>
+  <script type="text/babel" src="m-lake.jsx"></script>
+  <script type="text/babel" src="m-missions.jsx"></script>
+  <script type="text/babel" src="m-chat.jsx"></script>
+  <script type="text/babel" src="m-garden.jsx"></script>
+  <script type="text/babel" src="m-system.jsx"></script>
+  <script type="text/babel" src="m-app.jsx"></script>
+</body>
+</html>

package/mobile/m-app.jsx

@@ -0,0 +1,152 @@
+// Yana Mobile — app shell, routing, tweaks wiring, language toggle
+const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
+  "theme": "Jade Lake 🌿",
+  "language": "English",
+  "blur": 70,
+  "transparency": 60,
+  "reflection": 70,
+  "depth": 55,
+  "layout": "Regular",
+  "showAgents": true,
+  "showMissions": true,
+  "showMemory": true,
+  "showSystem": true,
+  "accent": ""
+}/*EDITMODE-END*/;
+
+const THEME_MAP = {
+  "Lotus Dawn 🌸": "dawn",
+  "Jade Lake 🌿": "jade",
+  "Morning Mist ☁️": "mist",
+  "Glass Silver ✨": "silver",
+};
+const DENSITY = { "Compact": 0.85, "Regular": 1, "Spacious": 1.18 };
+
+function applyTweaks(t) {
+  const root = document.documentElement;
+  root.setAttribute("data-theme", THEME_MAP[t.theme] || "jade");
+  root.style.setProperty("--blur", t.blur / 100);
+  root.style.setProperty("--alpha", t.transparency / 100);
+  root.style.setProperty("--reflect", t.reflection / 100);
+  root.style.setProperty("--depth", t.depth / 100);
+  root.style.setProperty("--sp", DENSITY[t.layout] || 1);
+  if (t.accent) {
+    root.style.setProperty("--primary", t.accent);
+    root.style.setProperty("--primary-soft", `color-mix(in oklab, ${t.accent} 10%, transparent)`);
+  } else {
+    root.style.removeProperty("--primary");
+    root.style.removeProperty("--primary-soft");
+  }
+}
+
+function App() {
+  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
+  const [page, setPage] = React.useState(() => localStorage.getItem("yana.m.page") || "dashboard");
+  const [more, setMore] = React.useState(false);
+  const mainRef = React.useRef(null);
+  window.YANA_LANG = t.language === "Tiếng Việt" ? "vi" : "en";
+
+  // data.js hydrates window.YANA from the real APIs after mount — re-render
+  // when each batch lands so the screens pick up live values
+  const [, forceData] = React.useReducer((x) => x + 1, 0);
+  React.useEffect(() => {
+    window.addEventListener("yana:data", forceData);
+    return () => window.removeEventListener("yana:data", forceData);
+  }, []);
+
+  React.useEffect(() => applyTweaks(t), [t]);
+  React.useEffect(() => localStorage.setItem("yana.m.page", page), [page]);
+  // scroll the page region back to top on navigation
+  React.useEffect(() => { if (mainRef.current) mainRef.current.scrollTop = 0; }, [page]);
+
+  function nav(id) { setPage(id); }
+  function toggleLang() { setTweak("language", t.language === "Tiếng Việt" ? "English" : "Tiếng Việt"); }
+
+  const isChat = page === "chat";
+  const Page = {
+    dashboard: () => <MLake t={t} onNav={nav} />,
+    missions:  () => <MMissions />,
+    chat:      () => <MChat />,
+    agents:    () => <MAgents />,
+    memory:    () => <MMemoryGarden />,
+    skills:    () => <MSkills />,
+    providers: () => <MProviders />,
+    settings:  () => <MSettings t={t} setTweak={setTweak} />,
+  }[page] || (() => <MLake t={t} onNav={nav} />);
+
+  return (
+    <div className="app-stage">
+      <div className="app-mobile" key={t.language}>
+        <TopBar page={page} lang={window.YANA_LANG} onLang={toggleLang} onMore={() => setMore(true)} />
+
+        <main ref={mainRef} className={"mmain" + (isChat ? " flush" : "")}>
+          <Page />
+        </main>
+
+        <TabBar page={page} onNav={nav} onMore={() => setMore(true)} />
+        <MoreSheet open={more} page={page} onNav={nav} onClose={() => setMore(false)} />
+      </div>
+
+      <TweaksPanel>
+        <TweakSection label="Theme" />
+        <TweakSelect label="Direction" value={t.theme}
+          options={Object.keys(THEME_MAP)}
+          onChange={(v) => setTweak("theme", v)} />
+        <TweakRadio label="Language" value={t.language}
+          options={["English", "Tiếng Việt"]}
+          onChange={(v) => setTweak("language", v)} />
+
+        <TweakSection label="Glass" />
+        <TweakSlider label="Blur strength" value={t.blur} min={0} max={100} unit="%" onChange={(v) => setTweak("blur", v)} />
+        <TweakSlider label="Transparency" value={t.transparency} min={0} max={100} unit="%" onChange={(v) => setTweak("transparency", v)} />
+        <TweakSlider label="Reflection" value={t.reflection} min={0} max={100} unit="%" onChange={(v) => setTweak("reflection", v)} />
+        <TweakSlider label="Depth" value={t.depth} min={0} max={100} unit="%" onChange={(v) => setTweak("depth", v)} />
+
+        <TweakSection label="Layout" />
+        <TweakRadio label="Density" value={t.layout} options={["Compact", "Regular", "Spacious"]} onChange={(v) => setTweak("layout", v)} />
+
+        <TweakSection label="Lake cards" />
+        <TweakToggle label="Show agents" value={t.showAgents} onChange={(v) => setTweak("showAgents", v)} />
+        <TweakToggle label="Show missions" value={t.showMissions} onChange={(v) => setTweak("showMissions", v)} />
+        <TweakToggle label="Show Memory Garden" value={t.showMemory} onChange={(v) => setTweak("showMemory", v)} />
+        <TweakToggle label="Show system status" value={t.showSystem} onChange={(v) => setTweak("showSystem", v)} />
+
+        <TweakSection label="Visual style" />
+        <TweakColor label="Accent" value={t.accent || "#2f7e6e"}
+          options={["#2f7e6e", "#56949f", "#3a7ca5", "#7d6aa8", "#b96b80", "#b07a4f", "#b78f3d", "#6f8f5a", "#5b7282"]}
+          onChange={(v) => setTweak("accent", v)} />
+        <TweakButton label="Use theme accent" onClick={() => setTweak("accent", "")} />
+      </TweaksPanel>
+    </div>
+  );
+}
+
+/* life beneath the surface: slow drifting motes */
+const MOTES = [
+  { left: "12%", top: "78%", dur: "64s", delay: "0s",   dx: "60px",  dy: "-50px", peak: 0.20 },
+  { left: "26%", top: "88%", dur: "82s", delay: "-20s", dx: "-45px", dy: "-70px", peak: 0.16 },
+  { left: "44%", top: "72%", dur: "71s", delay: "-40s", dx: "50px",  dy: "-40px", peak: 0.18 },
+  { left: "58%", top: "84%", dur: "90s", delay: "-10s", dx: "-60px", dy: "-55px", peak: 0.22 },
+  { left: "72%", top: "76%", dur: "76s", delay: "-55s", dx: "40px",  dy: "-65px", peak: 0.16 },
+  { left: "84%", top: "90%", dur: "68s", delay: "-30s", dx: "-50px", dy: "-45px", peak: 0.20 },
+];
+
+function Undercurrent() {
+  return (
+    <div className="scene">
+      {MOTES.map((m, i) => (
+        <span key={i} className="mote" style={{
+          left: m.left, top: m.top,
+          "--dur": m.dur, "--delay": m.delay, "--dx": m.dx, "--dy": m.dy, "--peak": m.peak,
+        }}></span>
+      ))}
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <>
+    <Undercurrent />
+    <App />
+  </>
+);

package/mobile/m-chat.jsx

@@ -0,0 +1,298 @@
+// Yana Mobile — Conversation. Calls /api/chat with SSE streaming — mirrors chat.jsx.
+
+/* ── Mobile-local helpers (chat.jsx not loaded on mobile) ─────────────────── */
+const M_CHAT_MODELS = {
+  claude: "claude-sonnet-4-6", openai: "gpt-4o-mini", gemini: "gemini-2.0-flash",
+  groq: "llama-3.3-70b-versatile", deepseek: "deepseek-chat",
+  openrouter: "google/gemma-3-27b-it", "9router": "kr/claude-sonnet-4.5", ollama: "llama3.2",
+};
+const M_KEYLESS = new Set(["ollama"]);
+
+function mGetProviderConfig() {
+  if (typeof YanaVault === "undefined") return { provider: "claude", apiKey: "" };
+  const order = ["claude", "openai", "gemini", "groq", "deepseek", "openrouter", "9router"];
+  for (const id of order) {
+    if (M_KEYLESS.has(id)) continue;
+    const key = YanaVault.getKey(id);
+    if (key) return { provider: id, apiKey: key };
+  }
+  return { provider: "claude", apiKey: "" };
+}
+
+function mAboutContext() {
+  const parts = [];
+  for (const [id, label] of [["who","Who"],["strengths","Strengths"],["style","Response style"]]) {
+    const v = localStorage.getItem("yana.about." + id);
+    if (v && v.trim()) parts.push(label + ": " + v.trim());
+  }
+  return parts.join("\n");
+}
+
+const M_CONFIDENTIAL = ["bí mật","confidential","đừng lưu","don't save","#mật","#private","off the record"];
+const M_SOVEREIGN    = ["chỉ mình anh biết","sovereign only","#sovereign","local model only"];
+function mDetectSensitivity(text) {
+  const lo = (text || "").toLowerCase();
+  if (M_SOVEREIGN.some((m) => lo.includes(m)))    return "sovereign";
+  if (M_CONFIDENTIAL.some((m) => lo.includes(m))) return "confidential";
+  return null;
+}
+
+
+function MRouteChip({ route }) {
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 6 }}>
+      <YanaMark size={18} />
+      <span style={{ fontSize: 11.5, color: "var(--ink-3)" }}>
+        via <b style={{ fontWeight: 500, color: "var(--ink-2)" }}>{route.agent}</b> · {route.model}
+      </span>
+    </div>
+  );
+}
+
+function MMessage({ msg }) {
+  if (msg.who === "user") {
+    return (
+      <div style={{ display: "flex", justifyContent: "flex-end" }}>
+        <div style={{
+          maxWidth: "84%", padding: "10px 14px", borderRadius: "16px 16px 4px 16px",
+          background: "var(--primary)", color: "rgba(255,255,255,.96)",
+          fontSize: 14, lineHeight: 1.55,
+          boxShadow: "0 4px 14px color-mix(in oklab, var(--primary) 25%, transparent)",
+        }}>{msg.text}</div>
+      </div>
+    );
+  }
+  return (
+    <div style={{ display: "flex", justifyContent: "flex-start" }}>
+      <div style={{ maxWidth: "90%" }}>
+        {msg.route && <MRouteChip route={msg.route} />}
+        <div className="glass" style={{ padding: "12px 15px", borderRadius: "4px 16px 16px 16px", fontSize: 14, lineHeight: 1.6, color: "var(--ink)" }}>
+          {msg.text}
+          {msg.action && (
+            <div style={{
+              marginTop: 11, padding: "9px 12px", borderRadius: "var(--r-sm)",
+              background: "var(--primary-soft)", display: "flex", alignItems: "center", gap: 9,
+            }}>
+              <span style={{ color: "var(--primary)", flex: "none" }}>{Icons.safety(15)}</span>
+              <div style={{ lineHeight: 1.3 }}>
+                <div style={{ fontSize: 12.5, fontWeight: 500, color: "var(--primary)" }}>{msg.action.label}</div>
+                <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{msg.action.state}</div>
+              </div>
+            </div>
+          )}
+        </div>
+        {msg.refs && (
+          <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 7 }}>
+            {msg.refs.map((r) => <span key={r} className="chip neutral" style={{ fontSize: 10.5 }}>{r}</span>)}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function MContextSheet({ open, onClose }) {
+  const D = window.YANA;
+  const { provider: _p } = mGetProviderConfig();
+  const _m = M_CHAT_MODELS[_p] || _p;
+  return (
+    <Sheet open={open} title={L("Routing & context", "Định tuyến & ngữ cảnh")} onClose={onClose}>
+      <MCard title={L("Routing", "Định tuyến")}>
+        <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
+          {[[L("Orchestrator", "Điều phối"), "Navigator"], [L("Model", "Mô hình"), _m], [L("Provider", "Nhà cung cấp"), _p]].map(([k, v]) => (
+            <div key={k} style={{ display: "flex", justifyContent: "space-between", fontSize: 13 }}>
+              <span style={{ color: "var(--ink-3)" }}>{k}</span>
+              <span style={{ fontWeight: 500 }}>{v}</span>
+            </div>
+          ))}
+        </div>
+      </MCard>
+      <MCard title={L("Context in use", "Ngữ cảnh đang dùng")}>
+        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+          {D.memories.filter((m) => m.pinned || m.fresh).slice(0, 3).map((m) => (
+            <div key={m.id} style={{ fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.45, display: "flex", gap: 8 }}>
+              <span style={{ color: m.pinned ? "var(--gold)" : "var(--pink)", flex: "none", marginTop: 1 }}>
+                {m.pinned ? Icons.pin(13) : Icons.memory(13)}
+              </span>
+              {m.text}
+            </div>
+          ))}
+        </div>
+      </MCard>
+      <MCard title={L("Safety", "An toàn")}>
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <span className="dot on"></span>
+          <span style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{L("Sentinel reviewing all actions", "Sentinel đang giám sát mọi hành động")}</span>
+        </div>
+      </MCard>
+    </Sheet>
+  );
+}
+
+function MChat() {
+  const D = window.YANA;
+  const [msgs, setMsgs] = React.useState(D.chat);
+  const [draft, setDraft] = React.useState("");
+  const [thinking, setThinking] = React.useState(false);
+  const [ctx, setCtx] = React.useState(false);
+  const logRef = React.useRef(null);
+  const readerRef = React.useRef(null);
+  // active provider for context bar — reflects the first key the user has set
+  const { provider: _activeProvider } = mGetProviderConfig();
+  const _activeModel = M_CHAT_MODELS[_activeProvider] || _activeProvider;
+
+  React.useEffect(() => {
+    const el = logRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [msgs, thinking]);
+
+  // Persist chat history (non-confidential only)
+  React.useEffect(() => {
+    D.chat = msgs;
+    try {
+      localStorage.setItem("yana.chat", JSON.stringify(
+        msgs.filter((m) => !m.confidential).slice(-60)
+      ));
+    } catch (_) {}
+  }, [msgs]);
+
+  React.useEffect(() => { return () => { if (readerRef.current) readerRef.current.cancel(); }; }, []);
+
+  async function send() {
+    const text = draft.trim();
+    if (!text || thinking) return;
+
+    const tier = mDetectSensitivity(text);
+    setMsgs((m) => [...m, { who: "user", text, confidential: !!tier, tier }]);
+    setDraft("");
+    setThinking(true);
+
+    let { provider, apiKey } = mGetProviderConfig();
+    if (tier === "sovereign") { provider = "ollama"; apiKey = ""; }
+    const model = M_CHAT_MODELS[provider] || "";
+
+    try {
+      const res = await fetch("/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(tier
+          ? { task: text, apiKey, provider, model, sensitivity: tier }
+          : { task: text, apiKey, provider, model, about: mAboutContext() }),
+      });
+
+      if (!res.ok || !res.body) throw new Error("HTTP " + res.status);
+
+      const reader = res.body.getReader();
+      readerRef.current = reader;
+      const decoder = new TextDecoder();
+      let buf = "";
+      let accumulated = "";
+      const msgId = Date.now();
+
+      setMsgs((m) => [...m, {
+        who: "yana",
+        route: { agent: provider, model: model + (tier ? " · 🔒" : "") },
+        text: "", confidential: !!tier, tier, _id: msgId,
+      }]);
+      setThinking(false);
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buf += decoder.decode(value, { stream: true });
+        const lines = buf.split("\n");
+        buf = lines.pop();
+        for (const line of lines) {
+          if (!line.startsWith("data: ")) continue;
+          const payload = line.slice(6).trim();
+          if (payload === "[DONE]") break;
+          try {
+            const obj = JSON.parse(payload);
+            if (obj.error) accumulated += "\n[Error: " + obj.error + "]";
+            else if (obj.text) accumulated += obj.text;
+            const snap = accumulated;
+            setMsgs((m) => m.map((msg) => msg._id === msgId ? { ...msg, text: snap } : msg));
+          } catch (_) {}
+        }
+      }
+
+      // ChatGPT-style memory — strip MEMORY: line and persist it
+      if (!tier) {
+        const mm = accumulated.match(/(?:^|\n)\s*MEMORY:\s*(.+?)\s*$/);
+        if (mm && mm[1]) {
+          const fact  = mm[1];
+          const shown = accumulated.slice(0, mm.index).trimEnd();
+          setMsgs((m) => m.map((msg) =>
+            msg._id === msgId
+              ? { ...msg, text: shown || msg.text, refs: [...(msg.refs || []), L("🌱 Remembered: ", "🌱 Đã nhớ: ") + fact] }
+              : msg
+          ));
+          fetch("/api/memory", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ text: fact }),
+          }).catch(() => {});
+        }
+      }
+    } catch (err) {
+      setThinking(false);
+      setMsgs((m) => [...m, {
+        who: "yana",
+        route: { agent: provider, model },
+        confidential: !!tier, tier,
+        text: tier === "sovereign"
+          ? L("Cannot reach local model. SOVEREIGN content only goes to Ollama (127.0.0.1:11434) — run `ollama serve`.",
+              "Không kết nối được model local. Nội dung SOVEREIGN chỉ đến Ollama (127.0.0.1:11434) — chạy `ollama serve`.")
+          : L("Server error. Check Yana is running and an API key is set in Providers.",
+              "Lỗi kết nối. Kiểm tra Yana đang chạy và đã thêm API key trong Providers."),
+      }]);
+    }
+  }
+
+  return (
+    <div data-screen-label="Chat" style={{ display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }}>
+      {/* slim context bar replaces the desktop right rail */}
+      <button onClick={() => setCtx(true)} style={{
+        flex: "none", display: "flex", alignItems: "center", gap: 9, margin: "12px 16px 8px",
+        padding: "9px 13px", borderRadius: 99, border: "1px solid var(--border)", cursor: "pointer",
+        background: "rgba(var(--surface-rgb), .5)", color: "var(--ink-2)", textAlign: "left",
+      }}>
+        <span style={{ color: "var(--primary)", display: "inline-flex" }}>{Icons.safety(15)}</span>
+        <span style={{ fontSize: 12.5, fontWeight: 500 }}>{_activeProvider} · {_activeModel}</span>
+        <span style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11.5, color: "var(--ink-3)" }}>
+          <span className="dot on" style={{ width: 6, height: 6, boxShadow: "none" }}></span>{L("Context", "Ngữ cảnh")} {Icons.chevron(13)}
+        </span>
+      </button>
+
+      <div ref={logRef} style={{ flex: 1, overflowY: "auto", display: "flex", flexDirection: "column", gap: "calc(15px * var(--sp))", padding: "6px 16px 14px", minHeight: 0 }}>
+        {msgs.map((m, i) => <MMessage key={i} msg={m} />)}
+        {thinking && (
+          <div style={{ display: "flex", alignItems: "center", gap: 9, color: "var(--ink-3)", fontSize: 12.5 }}>
+            <YanaMark size={18} /> {L("Navigator is thinking…", "Navigator đang suy nghĩ…")}
+          </div>
+        )}
+      </div>
+
+      <div style={{ flex: "none", padding: "8px 12px calc(12px + env(safe-area-inset-bottom, 0px))" }}>
+        <div className="glass-strong" style={{ borderRadius: 18, padding: "7px 7px 7px 15px", display: "flex", alignItems: "center", gap: 9 }}>
+          <input
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Enter") send(); }}
+            placeholder={L("Give Yana a direction…", "Giao cho Yana một hướng đi…")}
+            style={{ flex: 1, minWidth: 0, border: "none", outline: "none", background: "transparent", fontSize: 14.5, fontFamily: "inherit", color: "var(--ink)" }}
+          />
+          <button onClick={send} aria-label="Send" style={{
+            width: 38, height: 38, borderRadius: 12, border: "none", cursor: "pointer", flex: "none",
+            background: "var(--primary)", color: "white", display: "grid", placeItems: "center",
+            boxShadow: "0 4px 12px color-mix(in oklab, var(--primary) 30%, transparent)",
+          }}>{Icons.send(17)}</button>
+        </div>
+      </div>
+
+      <MContextSheet open={ctx} onClose={() => setCtx(false)} />
+    </div>
+  );
+}
+
+window.MChat = MChat;