yana-web 0.1.0

package/mobile/m-garden.jsx

@@ -0,0 +1,72 @@
+// Yana Mobile — Memory Garden + Skills
+const M_MEM_KINDS = [
+  { id: "Fact",       color: "var(--primary)", soft: "var(--primary-soft)" },
+  { id: "Knowledge",  color: "var(--gold)",    soft: "var(--gold-soft)" },
+  { id: "Experience", color: "var(--pink)",    soft: "var(--pink-soft)" },
+  { id: "Context",    color: "var(--ink-2)",   soft: "rgba(var(--surface-rgb), .6)" },
+];
+const M_KIND_VI = { All: "Tất cả", Fact: "Dữ kiện", Knowledge: "Kiến thức", Experience: "Trải nghiệm", Context: "Ngữ cảnh" };
+
+function MMemoryCard({ m }) {
+  // L1 kinds outside the four buckets render with the neutral Context style
+  const kind = M_MEM_KINDS.find((k) => k.id === m.kind) || M_MEM_KINDS[3];
+  return (
+    <div className="glass" style={{ borderRadius: "var(--r-lg)", padding: "15px 16px", display: "flex", flexDirection: "column", gap: 9 }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        <span className="chip" style={{ background: kind.soft, color: kind.color, fontSize: 11 }}>{L(m.kind, M_KIND_VI[m.kind])}</span>
+        {m.pinned && <span style={{ color: "var(--gold)", display: "inline-flex" }}>{Icons.pin(13)}</span>}
+        {m.fresh && !m.pinned && <span className="chip pink" style={{ fontSize: 10.5, padding: "1px 8px" }}>{L("New", "Mới")}</span>}
+      </div>
+      <div style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--ink)" }}>{m.text}</div>
+      <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{m.source}</div>
+    </div>
+  );
+}
+
+function MMemoryGarden() {
+  const D = window.YANA;
+  const [filter, setFilter] = React.useState("All");
+  const kinds = ["All", ...M_MEM_KINDS.map((k) => k.id)];
+  const list = filter === "All" ? D.memories : D.memories.filter((m) => m.kind === filter);
+  return (
+    <div data-screen-label="Memory Garden" style={{ display: "flex", flexDirection: "column", gap: "var(--gap)" }}>
+      <MHead title={L("Memory Garden", "Vườn ký ức")} sub={D.stats.memories.toLocaleString() + L(" memories · +", " ký ức · +") + D.stats.memoriesToday + L(" planted today", " trồng hôm nay")} />
+      <div className="hscroll">
+        {kinds.map((k) => (
+          <button key={k} className="fchip" data-on={filter === k ? "1" : "0"} onClick={() => setFilter(k)}>{L(k, M_KIND_VI[k])}</button>
+        ))}
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
+        {list.map((m) => <MMemoryCard key={m.id} m={m} />)}
+      </div>
+    </div>
+  );
+}
+
+/* ---------- Skills ---------- */
+function MSkills() {
+  const D = window.YANA;
+  const max = Math.max(...D.skillCategories.map((c) => c.usage));
+  return (
+    <div data-screen-label="Skills" style={{ display: "flex", flexDirection: "column", gap: "var(--gap)" }}>
+      <MHead title={L("Skills", "Kỹ năng")} sub={D.stats.skills.toLocaleString() + L(" installed · ", " đã cài · ") + D.stats.skillsUsedToday + L(" invoked today · deny-by-default", " được gọi hôm nay · mặc định từ chối")} />
+      <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
+        {D.skillCategories.map((c) => (
+          <div key={c.name} className="glass" style={{ borderRadius: "var(--r-lg)", padding: "15px 16px", display: "flex", flexDirection: "column", gap: 10 }}>
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
+              <span style={{ fontSize: 14.5, fontWeight: 500 }}>{c.name}</span>
+              <span style={{ fontSize: 12.5, color: "var(--ink-3)" }}>{c.count.toLocaleString()}</span>
+            </div>
+            <div className="bar"><i style={{ width: (c.usage / max) * 100 + "%" }}></i></div>
+            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--ink-3)", gap: 10 }}>
+              <span style={{ minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{L("Top:", "Dùng nhiều:")} <code style={{ fontFamily: "ui-monospace, monospace", fontSize: 11.5, color: "var(--ink-2)" }}>{c.top}</code></span>
+              <span style={{ flex: "none" }}>{c.usage}%</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+Object.assign(window, { MMemoryGarden, MSkills });

package/mobile/m-lake.jsx

@@ -0,0 +1,190 @@
+// Yana Mobile — Lake (Dashboard): compact composer + stacked control cards
+function MStat({ label, value, sub, accent }) {
+  return (
+    <div className="glass" style={{ borderRadius: "var(--r-md)", padding: "13px 14px", display: "flex", flexDirection: "column", gap: 3 }}>
+      <span className="label-xs" style={{ fontSize: 10 }}>{label}</span>
+      <span style={{ fontSize: 25, fontWeight: 300, letterSpacing: "-0.02em", lineHeight: 1.1 }}>{value}</span>
+      <span style={{ fontSize: 11.5, color: accent ? "var(--primary)" : "var(--ink-3)" }}>{sub}</span>
+    </div>
+  );
+}
+
+/* Compact composer: one tappable bar that drops into the Mission flow */
+function MComposer({ onNav }) {
+  const D = window.YANA;
+  const [v, setV] = React.useState("");
+  const suggestions = [
+    ["Ship v0.9 safely", "Phát hành v0.9 an toàn"],
+    ["Summarize overnight", "Tóm tắt qua đêm"],
+    ["Prune stale memories", "Dọn ký ức cũ"],
+  ];
+  async function begin(text) {
+    const goal = (text || v).trim();
+    if (!goal) return;
+    onNav("missions");
+    // POST to real API — server classifies the goal and creates starter tasks
+    try {
+      const r = await fetch("/api/missions", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ goal }),
+      });
+      if (r.ok) {
+        const { mission } = await r.json();
+        D.missions.unshift(mission);
+        D._openMission = mission.id;
+        D.stats.missionsActive += 1;
+        window.dispatchEvent(new Event("yana:data"));
+      }
+    } catch (_) {
+      // Offline fallback — local optimistic entry shown until server responds
+      const id = "m" + Date.now();
+      D.missions.unshift({
+        id, name: goal, owner: "Navigator", progress: 0, due: "Planning", status: "analyzing",
+        tasks: [
+          { name: "Understanding the goal", agent: "Navigator", state: "active" },
+          { name: "Choosing agents & skills", agent: "Navigator", state: "queued" },
+          { name: "Drafting a plan for your review", agent: "Navigator", state: "queued" },
+        ],
+      });
+      D._openMission = id;
+      D.stats.missionsActive += 1;
+      window.dispatchEvent(new Event("yana:data"));
+    }
+  }
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
+      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 10 }}>
+        <h1 className="h-display" style={{ margin: 0, fontSize: 23 }}>{window.YANA.username ? L("Good morning, " + window.YANA.username, "Chào " + window.YANA.username) : L("Good morning", "Xin chào")}</h1>
+        <span style={{ fontSize: 11.5, color: "var(--ink-3)", display: "inline-flex", alignItems: "center", gap: 6, flex: "none" }}>
+          <span className="dot on pulse"></span>{L("Calm", "Tĩnh lặng")}
+        </span>
+      </div>
+      <div className="glass-strong" style={{ borderRadius: 16, padding: "7px 7px 7px 15px", display: "flex", alignItems: "center", gap: 9 }}>
+        <input
+          value={v}
+          onChange={(e) => setV(e.target.value)}
+          onKeyDown={(e) => { if (e.key === "Enter") begin(); }}
+          placeholder={L("What should we accomplish today?", "Hôm nay ta làm gì?")}
+          style={{ flex: 1, minWidth: 0, border: "none", outline: "none", background: "transparent", fontSize: 14.5, fontFamily: "inherit", color: "var(--ink)" }}
+        />
+        <button onClick={() => begin()} aria-label="New Mission" 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 14px color-mix(in oklab, var(--primary) 32%, transparent)",
+        }}>{Icons.spark(17)}</button>
+      </div>
+      <div className="hscroll" style={{ margin: 0, padding: 0 }}>
+        {suggestions.map(([en, vi]) => (
+          <button key={en} onClick={() => begin(en)} className="chip neutral" style={{ cursor: "pointer", fontSize: 12 }}>{L(en, vi)}</button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function MModelRow({ m }) {
+  return (
+    <div className="mrow" style={{ display: "grid", gridTemplateColumns: "14px 1fr 70px 42px", alignItems: "center", gap: 11 }}>
+      <span className={"dot " + (m.status === "active" ? "on" : "idle")}></span>
+      <div style={{ lineHeight: 1.3, minWidth: 0 }}>
+        <div style={{ fontSize: 13.5, fontWeight: 500 }}>{m.name} <span style={{ color: "var(--ink-3)", fontWeight: 400 }}>{m.model}</span></div>
+        <div style={{ fontSize: 11.5, color: "var(--ink-3)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{m.role}</div>
+      </div>
+      <div className="bar"><i style={{ width: m.load + "%" }}></i></div>
+      <span style={{ fontSize: 11.5, color: "var(--ink-2)", textAlign: "right" }}>{m.latency}</span>
+    </div>
+  );
+}
+
+function MMissionRow({ m, onOpen }) {
+  return (
+    <button onClick={onOpen} className="mrow" style={{
+      display: "grid", gridTemplateColumns: "1fr 64px 38px", alignItems: "center", gap: 11,
+      width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer", color: "inherit",
+      borderBottom: "1px solid var(--border)",
+    }}>
+      <div style={{ lineHeight: 1.3, minWidth: 0 }}>
+        <div style={{ fontSize: 13.5, fontWeight: 500, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{m.name}</div>
+        <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{m.owner} · {L("due", "hạn")} {m.due}</div>
+      </div>
+      <div className="bar"><i style={{ width: m.progress + "%" }}></i></div>
+      <span style={{ fontSize: 11.5, color: "var(--ink-2)", textAlign: "right" }}>{m.progress}%</span>
+    </button>
+  );
+}
+
+function MLake({ t, onNav }) {
+  const D = window.YANA;
+  const activeAgents = D.agents.filter((a) => a.status === "active");
+  return (
+    <div data-screen-label="Lake" style={{ display: "flex", flexDirection: "column", gap: "var(--gap)" }}>
+      <MComposer onNav={onNav} />
+
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 9 }}>
+        <MStat label={L("Agents", "Tác nhân")} value={<>{D.stats.agentsActive}<span style={{ fontSize: 15, color: "var(--ink-3)" }}> / {D.stats.agents}</span></>} sub={L("active now", "đang hoạt động")} accent />
+        <MStat label={L("Missions", "Nhiệm vụ")} value={D.stats.missionsActive} sub={L("in motion", "đang diễn ra")} />
+        <MStat label={L("Skills", "Kỹ năng")} value={D.stats.skills.toLocaleString()} sub={D.stats.skillsUsedToday + L(" today", " hôm nay")} />
+        <MStat label={L("Memories", "Ký ức")} value={D.stats.memories.toLocaleString()} sub={"+" + D.stats.memoriesToday + L(" today", " hôm nay")} />
+      </div>
+
+      <MCard title={L("Active AI Models", "Mô hình đang chạy")} aside={<span className="chip neutral">{D.models.length} {L("providers", "NCC")}</span>}>
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          {D.models.length === 0 && <span style={{ fontSize: 12.5, color: "var(--ink-3)" }}>{L("Loading providers…", "Đang tải nhà cung cấp…")}</span>}
+          {D.models.map((m) => <MModelRow key={m.id} m={m} />)}
+        </div>
+      </MCard>
+
+      {t.showMissions && (
+        <MCard title={L("Missions", "Nhiệm vụ")} aside={<SeeAll label={L("Mission Center", "Trung tâm")} onClick={() => onNav("missions")} />}>
+          {D.missions.filter((m) => m.status !== "recurring").slice(0, 4).map((m) => (
+            <MMissionRow key={m.id} m={m} onOpen={() => { D._openMission = m.id; onNav("missions"); }} />
+          ))}
+        </MCard>
+      )}
+
+      {t.showAgents && (
+        <MCard title={L("Running Agents", "Tác nhân đang chạy")} aside={<SeeAll label={L("Agent Space", "Tác nhân")} onClick={() => onNav("agents")} />}>
+          {activeAgents.slice(0, 5).map((a) => (
+            <div key={a.id} className="mrow" style={{ display: "flex", alignItems: "center", gap: 11 }}>
+              <span className={"dot " + (a.status === "active" ? "on" : "idle")}></span>
+              <span style={{ fontSize: 13.5, fontWeight: 500, width: 78, flex: "none" }}>{a.name}</span>
+              <span style={{ fontSize: 12, color: "var(--ink-3)", flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{a.load}</span>
+            </div>
+          ))}
+        </MCard>
+      )}
+
+      {t.showMemory && (
+        <MCard title={L("Memory Garden", "Vườn ký ức")} aside={<span className="chip pink">{Icons.memory(13)} +{D.stats.memoriesToday}</span>}>
+          {D.memories.filter((m) => m.fresh).slice(0, 3).map((m) => (
+            <div key={m.id} className="mrow" style={{ display: "flex", gap: 10, alignItems: "baseline" }}>
+              <span className="chip neutral" style={{ flex: "none", fontSize: 10.5 }}>{L(m.kind, { Fact: "Dữ kiện", Knowledge: "Kiến thức", Experience: "Trải nghiệm", Context: "Ngữ cảnh" }[m.kind])}</span>
+              <span style={{ fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.45 }}>{m.text}</span>
+            </div>
+          ))}
+        </MCard>
+      )}
+
+      {t.showSystem && (
+        <MCard title={L("System Health", "Sức khỏe hệ thống")}>
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "11px 14px" }}>
+            {[
+              [L("Safety checks", "Kiểm tra an toàn"), D.safety.checksToday.toLocaleString() + L(" today", " hôm nay")],
+              [L("Blocked", "Bị chặn"), D.safety.blocked + L(" · ", " · ") + D.safety.pendingReview + L(" in review", " chờ duyệt")],
+              [L("Last incident", "Sự cố gần nhất"), D.safety.lastIncident],
+              [L("Uptime", "Thời gian chạy"), D.stats.uptimeDays + L(" days", " ngày")],
+            ].map(([k, v]) => (
+              <div key={k} style={{ lineHeight: 1.35 }}>
+                <div style={{ fontSize: 11, color: "var(--ink-3)" }}>{k}</div>
+                <div style={{ fontSize: 13, fontWeight: 500 }}>{v}</div>
+              </div>
+            ))}
+          </div>
+        </MCard>
+      )}
+    </div>
+  );
+}
+
+window.MLake = MLake;

package/mobile/m-missions.jsx

@@ -0,0 +1,81 @@
+// Yana Mobile — Mission Center
+const M_TASK_STATE = {
+  done:   { label: () => L("Done", "Xong"),        color: "var(--good)" },
+  active: { label: () => L("Active", "Đang chạy"),  color: "var(--primary)" },
+  queued: { label: () => L("Queued", "Đang chờ"),   color: "var(--ink-3)" },
+};
+
+function MMissionCard({ m, open, onToggle }) {
+  const statusColor = m.status === "recurring" ? "var(--gold)" : m.status === "analyzing" ? "var(--primary)" : "var(--good)";
+  return (
+    <div className="glass" style={{ borderRadius: "var(--r-lg)", padding: "var(--pad-card)" }}>
+      <button onClick={onToggle} style={{
+        display: "flex", flexDirection: "column", gap: 9,
+        width: "100%", background: "none", border: "none", cursor: "pointer", textAlign: "left", color: "inherit", padding: 0,
+      }}>
+        <div style={{ display: "flex", alignItems: "flex-start", gap: 10, width: "100%" }}>
+          <div style={{ lineHeight: 1.3, minWidth: 0, flex: 1 }}>
+            <div style={{ fontSize: 14.5, fontWeight: 500 }}>{m.name}</div>
+            <div style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 2 }}>
+              {m.owner} · {L("due", "hạn")} {m.due} · <span style={{ color: statusColor }}>{m.status}</span>
+            </div>
+          </div>
+          <span style={{ color: "var(--ink-3)", transform: open ? "rotate(90deg)" : "none", transition: "transform .18s", display: "inline-flex", flex: "none", marginTop: 2 }}>{Icons.chevron(15)}</span>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 10, width: "100%" }}>
+          <div className="bar" style={{ flex: 1 }}><i style={{ width: m.progress + "%" }}></i></div>
+          <span style={{ fontSize: 12, color: "var(--ink-2)", flex: "none", width: 36, textAlign: "right" }}>{m.progress}%</span>
+        </div>
+      </button>
+      {open && (
+        <div style={{ marginTop: 13, paddingTop: 11, borderTop: "1px solid var(--border)", display: "flex", flexDirection: "column", gap: 2 }}>
+          {m.tasks.map((tk) => {
+            const st = M_TASK_STATE[tk.state];
+            return (
+              <div key={tk.name} style={{ display: "grid", gridTemplateColumns: "16px 1fr auto", alignItems: "center", gap: 10, padding: "7px 0", fontSize: 13 }}>
+                <span style={{ color: st.color, display: "inline-flex" }}>
+                  {tk.state === "done" ? Icons.check(14) : tk.state === "active" ? Icons.spark(14) : Icons.clock(14)}
+                </span>
+                <div style={{ minWidth: 0 }}>
+                  <div style={{ color: tk.state === "done" ? "var(--ink-3)" : "var(--ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{tk.name}</div>
+                  <div style={{ fontSize: 11, color: "var(--ink-3)" }}>{tk.agent}</div>
+                </div>
+                <span style={{ fontSize: 11.5, fontWeight: 500, color: st.color, textAlign: "right", flex: "none" }}>{st.label()}</span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function MMissions() {
+  const D = window.YANA;
+  const [open, setOpen] = React.useState(() => window.YANA._openMission || "m1");
+  const [filter, setFilter] = React.useState("active");
+  const filters = [
+    ["active", L("Active", "Đang chạy")],
+    ["all", L("All", "Tất cả")],
+    ["recurring", L("Recurring", "Định kỳ")],
+  ];
+  const list = D.missions.filter((m) =>
+    filter === "all" ? true : filter === "recurring" ? m.status === "recurring" : m.status !== "recurring");
+  return (
+    <div data-screen-label="Mission Center" style={{ display: "flex", flexDirection: "column", gap: "var(--gap)" }}>
+      <MHead title={L("Missions", "Nhiệm vụ")} sub={L("Multi-agent work, visible end to end.", "Công việc đa tác nhân, theo dõi đầu đến cuối.")} />
+      <div className="hscroll">
+        {filters.map(([id, lbl]) => (
+          <button key={id} className="fchip" data-on={filter === id ? "1" : "0"} onClick={() => setFilter(id)}>{lbl}</button>
+        ))}
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
+        {list.map((m) => (
+          <MMissionCard key={m.id} m={m} open={open === m.id} onToggle={() => setOpen(open === m.id ? null : m.id)} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+window.MMissions = MMissions;

package/mobile/m-shell.jsx

@@ -0,0 +1,237 @@
+// Yana Mobile — shell: icons, wordmark, bilingual helper, mobile chrome, atoms
+const { useState, useEffect, useMemo, useRef } = React;
+
+/* Bilingual helper: L("English", "Tiếng Việt") */
+window.L = (en, vi) => (window.YANA_LANG === "vi" ? vi : en);
+
+/* ---------- Icons: minimal 1.5px stroke, 20px grid ---------- */
+function Ic({ d, size = 18, ...rest }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 20 20" fill="none"
+      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...rest}>
+      {d}
+    </svg>
+  );
+}
+const Icons = {
+  dashboard: (s) => <Ic size={s} d={<><path d="M10 3.2 16.5 8v8.2a.8.8 0 0 1-.8.8h-3.2v-4.4H7.5V17H4.3a.8.8 0 0 1-.8-.8V8L10 3.2Z"/></>} />,
+  chat:      (s) => <Ic size={s} d={<path d="M17 9.5c0 3.3-3.1 6-7 6-.9 0-1.8-.14-2.6-.4L3 16.5l1.2-3.1C3.4 12.3 3 11 3 9.5c0-3.3 3.1-6 7-6s7 2.7 7 6Z"/>} />,
+  agents:    (s) => <Ic size={s} d={<><circle cx="7" cy="7.5" r="3"/><path d="M2.5 16.5c.6-2.6 2.4-4 4.5-4s3.9 1.4 4.5 4"/><circle cx="14.5" cy="8.5" r="2.2"/><path d="M13.3 12.6c2 .2 3.6 1.5 4.2 3.9"/></>} />,
+  missions:  (s) => <Ic size={s} d={<><circle cx="10" cy="10" r="7"/><circle cx="10" cy="10" r="3.4"/><circle cx="10" cy="10" r="0.4" fill="currentColor"/></>} />,
+  memory:    (s) => <Ic size={s} d={<><path d="M10 17c4-1.6 6.2-4.4 6.2-8.1C16.2 6 14.5 4 12.3 4 11.3 4 10.4 4.5 10 5.3 9.6 4.5 8.7 4 7.7 4 5.5 4 3.8 6 3.8 8.9 3.8 12.6 6 15.4 10 17Z"/><path d="M10 17V9.5"/></>} />,
+  skills:    (s) => <Ic size={s} d={<><path d="m10 3 7 3.5L10 10 3 6.5 10 3Z"/><path d="m3 10.5 7 3.5 7-3.5"/><path d="m3 14.5 7 3.5 7-3.5"/></>} />,
+  safety:    (s) => <Ic size={s} d={<><path d="M10 2.8 16 5v4.7c0 3.6-2.4 6.4-6 7.8-3.6-1.4-6-4.2-6-7.8V5l6-2.2Z"/><path d="m7.4 9.8 1.8 1.8 3.4-3.6"/></>} />,
+  search:    (s) => <Ic size={s} d={<><circle cx="9" cy="9" r="5.5"/><path d="m17 17-4-4"/></>} />,
+  send:      (s) => <Ic size={s} d={<path d="M3.5 10 17 3.5 13.5 17l-3-5.5-7-1.5Zm7 1.5L17 3.5"/>} />,
+  check:     (s) => <Ic size={s} d={<path d="m4.5 10.5 3.5 3.5 7.5-8"/>} />,
+  clock:     (s) => <Ic size={s} d={<><circle cx="10" cy="10" r="7"/><path d="M10 6v4.2l2.6 1.6"/></>} />,
+  pin:       (s) => <Ic size={s} d={<path d="m11.5 3 5.5 5.5-2.8.7-2.5 2.5-.4 3.8-3-3L4 16.3 7.5 12l-3-3 3.8-.4 2.5-2.5.7-2.6Z"/>} />,
+  plus:      (s) => <Ic size={s} d={<path d="M10 4v12M4 10h12"/>} />,
+  chevron:   (s) => <Ic size={s} d={<path d="m7.5 4.5 5 5.5-5 5.5"/>} />,
+  pause:     (s) => <Ic size={s} d={<path d="M7.5 5v10M12.5 5v10"/>} />,
+  providers: (s) => <Ic size={s} d={<><circle cx="10" cy="10" r="2.4"/><path d="M10 3v2.6M10 14.4V17M3 10h2.6M14.4 10H17M5.2 5.2l1.8 1.8M13 13l1.8 1.8M14.8 5.2 13 7M7 13l-1.8 1.8"/></>} />,
+  settings:  (s) => <Ic size={s} d={<><circle cx="10" cy="10" r="2.6"/><path d="M10 2.8v2.4m0 9.6v2.4M2.8 10h2.4m9.6 0h2.4M4.9 4.9l1.7 1.7m6.8 6.8 1.7 1.7m0-10.2-1.7 1.7M6.6 13.4l-1.7 1.7"/></>} />,
+  spark:     (s) => <Ic size={s} d={<path d="M10 3c.5 3.9 2.6 6.1 7 7-4.4.9-6.5 3.1-7 7-.5-3.9-2.6-6.1-7-7 4.4-.9 6.5-3.1 7-7Z"/>} />,
+  more:      (s) => <Ic size={s} d={<><circle cx="4.5" cy="10" r="1.3" fill="currentColor" stroke="none"/><circle cx="10" cy="10" r="1.3" fill="currentColor" stroke="none"/><circle cx="15.5" cy="10" r="1.3" fill="currentColor" stroke="none"/></>} />,
+  bell:      (s) => <Ic size={s} d={<><path d="M6 8.5a4 4 0 0 1 8 0c0 3 1 4.2 1.6 4.8H4.4C5 12.7 6 11.5 6 8.5Z"/><path d="M8.4 15.5a1.8 1.8 0 0 0 3.2 0"/></>} />,
+  back:      (s) => <Ic size={s} d={<path d="m11.5 5-5 5 5 5"/>} />,
+};
+
+/* ---------- Wordmark: lotus bud resting on the water ---------- */
+function YanaMark({ size = 30 }) {
+  return (
+    <div aria-label="Yana" style={{
+      width: size, height: size, borderRadius: size * 0.32, flex: "none",
+      background: "linear-gradient(145deg, color-mix(in oklab, var(--primary) 88%, white), color-mix(in oklab, var(--primary) 60%, var(--pink)))",
+      boxShadow: "inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px color-mix(in oklab, var(--primary) 28%, transparent)",
+      display: "grid", placeItems: "center",
+    }}>
+      <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 20 20" fill="none"
+        stroke="rgba(255,255,255,.95)" strokeWidth="1.6" strokeLinecap="round">
+        <path d="M10 2.8C7.5 5.3 7.5 8.7 10 10.7c2.5-2 2.5-5.4 0-7.9Z" />
+        <path d="M4.8 13.3c1.6 1.5 3.3 2.2 5.2 2.2s3.6-.7 5.2-2.2" />
+        <path d="M7.3 16.5c.85.6 1.75.9 2.7.9s1.85-.3 2.7-.9" />
+      </svg>
+    </div>
+  );
+}
+
+/* ---------- Mobile navigation model ---------- */
+// Primary tabs live in the thumb zone; the rest fold into More.
+const TABS = [
+  { id: "dashboard", label: "Lake",         vi: "Mặt hồ",      icon: "dashboard" },
+  { id: "missions",  label: "Missions",     vi: "Nhiệm vụ",    icon: "missions" },
+  { id: "chat",      label: "Chat",         vi: "Trò chuyện",  icon: "chat" },
+  { id: "agents",    label: "Agents",       vi: "Tác nhân",    icon: "agents" },
+];
+const MORE_ITEMS = [
+  { id: "memory",    label: "Memory Garden", vi: "Vườn ký ức",   icon: "memory" },
+  { id: "skills",    label: "Skills",        vi: "Kỹ năng",      icon: "skills" },
+  { id: "providers", label: "Providers",     vi: "Nhà cung cấp", icon: "providers" },
+  { id: "settings",  label: "Settings",      vi: "Cài đặt",      icon: "settings" },
+];
+const ALL_PAGES = [...TABS, ...MORE_ITEMS];
+const PAGE_TITLE = (id) => {
+  const p = ALL_PAGES.find((x) => x.id === id);
+  return p ? L(p.label, p.vi) : "Yana";
+};
+
+/* ---------- Top bar ---------- */
+function TopBar({ page, lang, onLang, onMore }) {
+  const onLake = page === "dashboard";
+  return (
+    <header className="mtopbar">
+      <div className="mtopbar-l">
+        {onLake
+          ? <YanaMark size={30} />
+          : <span style={{ color: "var(--primary)", display: "inline-flex" }}>{Icons[ALL_PAGES.find((x) => x.id === page)?.icon || "dashboard"](20)}</span>}
+        <div style={{ minWidth: 0 }}>
+          <div className="mtopbar-title">{onLake ? "Yana" : PAGE_TITLE(page)}</div>
+          {onLake && <div style={{ fontSize: 10.5, color: "var(--ink-3)", letterSpacing: ".06em" }}>YAMTAM ENGINE</div>}
+        </div>
+      </div>
+      <div className="mtopbar-r">
+        <button className="lang-pill" onClick={onLang}>{lang === "vi" ? "VI" : "EN"}</button>
+        <button className="icon-btn" aria-label="Notifications">{Icons.bell(18)}</button>
+        <button className="avatar-btn" onClick={onMore} aria-label="Menu">
+          {(window.YANA.username || "Y")[0].toUpperCase()}
+        </button>
+      </div>
+    </header>
+  );
+}
+
+/* ---------- Bottom tab bar ---------- */
+function TabBar({ page, onNav, onMore }) {
+  const moreActive = MORE_ITEMS.some((m) => m.id === page);
+  return (
+    <nav className="mtabbar">
+      {TABS.map((tb) => (
+        <button key={tb.id} className="mtab" data-on={page === tb.id ? "1" : "0"} onClick={() => onNav(tb.id)}>
+          <span className="tab-ic">{Icons[tb.icon](22)}</span>
+          <span>{L(tb.label, tb.vi)}</span>
+        </button>
+      ))}
+      <button className="mtab" data-on={moreActive ? "1" : "0"} onClick={onMore}>
+        <span className="tab-ic">{Icons.more(22)}</span>
+        <span>{L("More", "Thêm")}</span>
+      </button>
+    </nav>
+  );
+}
+
+/* ---------- Generic slide-up sheet ---------- */
+function Sheet({ open, title, onClose, children }) {
+  const [mounted, setMounted] = React.useState(open);
+  React.useEffect(() => {
+    if (open) setMounted(true);
+    else { const t = setTimeout(() => setMounted(false), 320); return () => clearTimeout(t); }
+  }, [open]);
+  if (!mounted) return null;
+  return (
+    <>
+      <div className="sheet-backdrop" data-show={open ? "1" : "0"} onClick={onClose}></div>
+      <div className="sheet" data-show={open ? "1" : "0"} role="dialog">
+        <div className="sheet-grab" onClick={onClose}></div>
+        {title && <div className="sheet-title">{title}</div>}
+        <div className="sheet-body">{children}</div>
+      </div>
+    </>
+  );
+}
+
+/* ---------- More sheet (secondary nav) ---------- */
+function MoreSheet({ open, page, onNav, onClose }) {
+  const D = window.YANA;
+  const username = D.username || L("My account", "Tài khoản");
+  function logout() {
+    fetch("/api/auth/logout", { method: "POST" }).finally(() => location.replace("/"));
+  }
+  return (
+    <Sheet open={open} title={L("All sections", "Tất cả mục")} onClose={onClose}>
+      {/* User identity card */}
+      <div className="glass" style={{ borderRadius: "var(--r-md)", padding: "11px 13px", display: "flex", alignItems: "center", gap: 11, marginBottom: 8 }}>
+        <div style={{ width: 36, height: 36, borderRadius: 11, background: "var(--primary)", color: "#fff", display: "grid", placeItems: "center", fontSize: 15, fontWeight: 600, flex: "none" }}>
+          {username[0].toUpperCase()}
+        </div>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ fontSize: 14, fontWeight: 500 }}>{username}</div>
+          <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{L("Sovereign account", "Tài khoản chủ sở hữu")}</div>
+        </div>
+        <button onClick={logout} style={{ fontSize: 12, color: "var(--ink-3)", background: "none", border: "none", cursor: "pointer", padding: "6px 8px", borderRadius: 8, flex: "none" }}>
+          {L("Sign out", "Đăng xuất")}
+        </button>
+      </div>
+      <div className="more-grid">
+        {MORE_ITEMS.map((m) => (
+          <button key={m.id} className="more-item" onClick={() => { onNav(m.id); onClose(); }}
+            style={page === m.id ? { background: "var(--primary-soft)" } : null}>
+            <span className="more-ic">{Icons[m.icon](19)}</span>
+            <span className="more-lbl">{L(m.label, m.vi)}</span>
+            <span className="more-chev">{Icons.chevron(16)}</span>
+          </button>
+        ))}
+      </div>
+      <div style={{
+        marginTop: 6, borderRadius: "var(--r-md)", padding: "13px 14px",
+        background: "var(--primary-soft)", display: "flex", flexDirection: "column", gap: 7,
+      }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <span style={{ color: "var(--primary)" }}>{Icons.safety(16)}</span>
+          <span style={{ fontSize: 13, fontWeight: 500, color: "var(--primary)" }}>YAMTAM Core</span>
+        </div>
+        <div style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{D.stats.agents} {L("agents supervised", "tác nhân được giám sát")}</div>
+        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+          <span className="dot on"></span>
+          <span style={{ fontSize: 12, color: "var(--ink-3)" }}>{L("All gates active", "Mọi cổng an toàn đang bật")}</span>
+        </div>
+      </div>
+    </Sheet>
+  );
+}
+
+/* ---------- Large-title header for a page ---------- */
+function MHead({ title, sub, children }) {
+  return (
+    <div className="mhead">
+      <div className="mhead-row">
+        <h1 className="h-display mhead-title">{title}</h1>
+        {children}
+      </div>
+      {sub && <p className="mhead-sub">{sub}</p>}
+    </div>
+  );
+}
+
+/* ---------- Card (mobile) ---------- */
+function MCard({ title, aside, children, style, pad = true, onClick }) {
+  return (
+    <section className="glass" onClick={onClick} style={{
+      borderRadius: "var(--r-lg)", padding: pad ? "var(--pad-card)" : 0,
+      ...(onClick ? { cursor: "pointer" } : null), ...style,
+    }}>
+      {(title || aside) && (
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, marginBottom: 12, padding: pad ? 0 : "var(--pad-card) var(--pad-card) 0" }}>
+          {title && <h2 className="label-xs" style={{ margin: 0 }}>{title}</h2>}
+          {aside}
+        </div>
+      )}
+      {children}
+    </section>
+  );
+}
+
+/* A "see all" link used in card headers */
+function SeeAll({ label, onClick }) {
+  return (
+    <button onClick={onClick} style={{
+      background: "none", border: "none", cursor: "pointer", color: "var(--primary)",
+      fontSize: 12.5, fontWeight: 500, display: "flex", alignItems: "center", gap: 1, padding: 0,
+    }}>{label} {Icons.chevron(13)}</button>
+  );
+}
+
+Object.assign(window, {
+  Icons, YanaMark, TopBar, TabBar, Sheet, MoreSheet, MHead, MCard, SeeAll,
+  TABS, MORE_ITEMS, ALL_PAGES, PAGE_TITLE,
+});