yana-web 0.1.0

package/desktop/components.jsx

@@ -0,0 +1,203 @@
+// Yana AI — shared components: icons, wordmark, sidebar, 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={<><rect x="3" y="3" width="6" height="6" rx="1.6"/><rect x="11" y="3" width="6" height="6" rx="1.6"/><rect x="3" y="11" width="6" height="6" rx="1.6"/><rect x="11" y="11" width="6" height="6" rx="1.6"/></>} />,
+  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"/>} />,
+  menu:      (s) => <Ic size={s} d={<path d="M3.5 6h13M3.5 10h13M3.5 14h13"/>} />,
+};
+
+/* ---------- Wordmark: lotus in bloom on the water (matches login.html) ---------- */
+function YanaMark({ size = 30 }) {
+  return (
+    <div aria-label="Yana" style={{
+      width: size, height: size, borderRadius: size * 0.32, flex: "none",
+      background: "linear-gradient(150deg, color-mix(in oklab, var(--primary) 92%, white), color-mix(in oklab, var(--primary) 72%, #1d3530))",
+      boxShadow: "inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px color-mix(in oklab, var(--primary) 28%, transparent)",
+      display: "grid", placeItems: "center",
+    }}>
+      <img src="/logo.png" alt="" width={Math.round(size * 0.74)} height={Math.round(size * 0.74)}
+        style={{ display: "block" }} />
+    </div>
+  );
+}
+
+function Wordmark({ compact }) {
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "4px 2px" }}>
+      <YanaMark />
+      {!compact && (
+        <div style={{ lineHeight: 1.15 }}>
+          <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: "-0.01em" }}>Yana</div>
+          <div style={{ fontSize: 10.5, color: "var(--ink-3)", letterSpacing: "0.06em" }}>YAMTAM ENGINE</div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ---------- Sign out ---------- */
+async function signOut() {
+  try { await fetch("/api/auth/logout", { method: "POST" }); } catch (_) {}
+  location.replace("/login.html");
+}
+
+/* ---------- Sidebar ---------- */
+const NAV = [
+  { id: "dashboard", label: "Lake",          vi: "Mặt hồ",        icon: "dashboard" },
+  { id: "missions",  label: "Missions",      vi: "Nhiệm vụ",      icon: "missions" },
+  { id: "chat",      label: "Conversation",  vi: "Trò chuyện",    icon: "chat" },
+  { id: "agents",    label: "Agents",        vi: "Tác nhân",      icon: "agents" },
+  { 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" },
+];
+
+function Sidebar({ page, onNav }) {
+  const D = window.YANA;
+  const [account, setAccount] = useState(null);
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    fetch("/api/auth/status")
+      .then((r) => r.json())
+      .then((d) => setAccount(d.username || null))
+      .catch(() => {});
+  }, []);
+  const nav = (id) => { onNav(id); setOpen(false); };
+  return (
+    <>
+      <button className="glass-strong yana-menu-btn" aria-label={L("Open menu", "Mở menu")}
+        aria-expanded={open} onClick={() => setOpen(true)}>
+        {Icons.menu(18)}
+      </button>
+      <div className={"yana-backdrop" + (open ? " show" : "")} onClick={() => setOpen(false)} aria-hidden="true"></div>
+    <nav className={"glass yana-sidebar" + (open ? " open" : "")} style={{
+      borderRadius: "var(--r-lg)",
+      display: "flex", flexDirection: "column",
+      padding: "calc(14px * var(--sp))", gap: 4,
+    }}>
+      <div style={{ marginBottom: "calc(14px * var(--sp))" }}><Wordmark /></div>
+
+      {NAV.map((n) => {
+        const active = page === n.id;
+        return (
+          <button key={n.id} onClick={() => nav(n.id)} style={{
+            display: "flex", alignItems: "center", gap: 11,
+            padding: "calc(8px * var(--sp)) 11px", borderRadius: "var(--r-sm)",
+            border: "none", cursor: "pointer", width: "100%", textAlign: "left",
+            fontSize: 13.5, fontWeight: active ? 500 : 400,
+            color: active ? "var(--primary)" : "var(--ink-2)",
+            background: active ? "var(--primary-soft)" : "transparent",
+            transition: "background .15s, color .15s",
+          }}
+            onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = "rgba(var(--surface-rgb), .5)"; }}
+            onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = "transparent"; }}>
+            {Icons[n.icon](17)}
+            <span>{L(n.label, n.vi)}</span>
+          </button>
+        );
+      })}
+
+      <div style={{ flex: 1 }}></div>
+
+      <div style={{
+        borderRadius: "var(--r-md)", padding: "11px 12px",
+        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: 12.5, fontWeight: 500, color: "var(--primary)" }}>YAMTAM Core</span>
+        </div>
+        <div style={{ fontSize: 12, 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: 11.5, color: "var(--ink-3)" }}>{L("All gates active", "Mọi cổng an toàn đang bật")}</span>
+        </div>
+      </div>
+
+      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 4px 2px" }}>
+        <div style={{
+          width: 28, height: 28, borderRadius: "50%", flex: "none",
+          background: "linear-gradient(145deg, var(--gold), color-mix(in oklab, var(--gold) 55%, white))",
+          color: "white", display: "grid", placeItems: "center", fontSize: 12, fontWeight: 600,
+        }}>{(account || "Y").trim().charAt(0).toUpperCase()}</div>
+        <div style={{ lineHeight: 1.2, flex: 1, minWidth: 0 }}>
+          <div title={account || ""} style={{
+            fontSize: 12.5, fontWeight: 500,
+            overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
+          }}>{account || "Yana"}</div>
+          <div style={{ fontSize: 11, color: "var(--ink-3)" }}>{L("Account", "Tài khoản")} · YAMTAM</div>
+        </div>
+        <button onClick={signOut} title={L("Sign out", "Đăng xuất")} aria-label={L("Sign out", "Đăng xuất")} style={{
+          background: "none", border: "none", cursor: "pointer", padding: 4,
+          color: "var(--ink-3)", display: "inline-flex", borderRadius: 8,
+        }}>
+          <svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor"
+            strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M12.5 6.5V4.5a1.5 1.5 0 0 0-1.5-1.5H5A1.5 1.5 0 0 0 3.5 4.5v11A1.5 1.5 0 0 0 5 17h6a1.5 1.5 0 0 0 1.5-1.5v-2M8.5 10H17m0 0-2.5-2.5M17 10l-2.5 2.5" />
+          </svg>
+        </button>
+      </div>
+    </nav>
+    </>
+  );
+}
+
+/* ---------- Page scaffolding ---------- */
+function PageHeader({ title, sub, children }) {
+  return (
+    <header style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16, marginBottom: "var(--gap)" }}>
+      <div>
+        <h1 className="h-display" style={{ margin: 0, fontSize: 26 }}>{title}</h1>
+        {sub && <p style={{ margin: "3px 0 0", color: "var(--ink-2)", fontSize: 13.5 }}>{sub}</p>}
+      </div>
+      {children}
+    </header>
+  );
+}
+
+function Card({ title, aside, children, style, className }) {
+  return (
+    <section className={"glass " + (className || "")} style={{ borderRadius: "var(--r-lg)", padding: "var(--pad-card)", ...style }}>
+      {(title || aside) && (
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
+          {title && <h2 className="label-xs" style={{ margin: 0 }}>{title}</h2>}
+          {aside}
+        </div>
+      )}
+      {children}
+    </section>
+  );
+}
+
+Object.assign(window, { Icons, YanaMark, Wordmark, Sidebar, PageHeader, Card, NAV });

package/desktop/dashboard.jsx

@@ -0,0 +1,304 @@
+// Yana AI — Dashboard (AI Control Center)
+// All numbers are real: /api/status (MANIFEST), /api/dashboard (L1 memory +
+// audit log + uptime), /api/usage (per-provider stats), YanaVault (keys).
+function StatTile({ label, value, sub, accent }) {
+  return (
+    <div className="glass" style={{ borderRadius: "var(--r-lg)", padding: "var(--pad-card)", display: "flex", flexDirection: "column", gap: 4 }}>
+      <span className="label-xs">{label}</span>
+      <span className="num-lg">{value}</span>
+      <span style={{ fontSize: 12.5, color: accent ? "var(--primary)" : "var(--ink-3)" }}>{sub}</span>
+    </div>
+  );
+}
+
+function ModelRow({ m }) {
+  return (
+    <div style={{ display: "grid", gridTemplateColumns: "16px 1fr 110px 56px", alignItems: "center", gap: 12, padding: "calc(8px * var(--sp)) 0" }}>
+      <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: 12, 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: 12, color: "var(--ink-2)", textAlign: "right" }}>{m.latency}</span>
+    </div>
+  );
+}
+
+function MissionRowMini({ m, onOpen }) {
+  return (
+    <button onClick={onOpen} style={{
+      display: "grid", gridTemplateColumns: "1fr 90px 48px", alignItems: "center", gap: 12,
+      padding: "calc(8px * var(--sp)) 0", width: "100%", textAlign: "left",
+      background: "none", border: "none", cursor: "pointer", color: "inherit",
+    }}>
+      <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: 12, color: "var(--ink-3)" }}>{m.owner} · {m.status}</div>
+      </div>
+      <div className="bar"><i style={{ width: m.progress + "%" }}></i></div>
+      <span style={{ fontSize: 12, color: "var(--ink-2)", textAlign: "right" }}>{m.progress}%</span>
+    </button>
+  );
+}
+
+function EmptyHint({ text }) {
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "calc(8px * var(--sp)) 0" }}>
+      <span className="dot idle" style={{ flex: "none" }}></span>
+      <span style={{ fontSize: 13, color: "var(--ink-3)", lineHeight: 1.45 }}>{text}</span>
+    </div>
+  );
+}
+
+function fmtAgo(iso) {
+  const ms = Date.now() - new Date(iso).getTime();
+  if (!isFinite(ms) || ms < 0) return "—";
+  const mins = Math.floor(ms / 60000);
+  if (mins < 60) return mins + L(" min ago", " phút trước");
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return hours + L(" h ago", " giờ trước");
+  return Math.floor(hours / 24) + L(" days ago", " ngày trước");
+}
+
+function fmtUptime(s) {
+  if (s < 3600) return Math.floor(s / 60) + L(" min", " phút");
+  if (s < 86400) return (s / 3600).toFixed(1) + L(" h", " giờ");
+  return (s / 86400).toFixed(1) + L(" days", " ngày");
+}
+
+/* ---------- Local time + weather (browser timezone = wherever you are) ----- */
+function greetingFor(hour, name) {
+  const who = name ? ", " + name : "";
+  if (hour >= 5  && hour < 12) return L("Good morning" + who,   "Chào buổi sáng" + who);
+  if (hour >= 12 && hour < 18) return L("Good afternoon" + who, "Chào buổi chiều" + who);
+  if (hour >= 18 && hour < 22) return L("Good evening" + who,   "Chào buổi tối" + who);
+  return L("Up late" + who, "Khuya rồi" + who);
+}
+
+// WMO weather codes → emoji + label (open-meteo current.weather_code)
+function describeWeather(code) {
+  if (code === 0)              return ["☀️", L("Clear", "Quang đãng")];
+  if (code <= 2)               return ["⛅", L("Partly cloudy", "Ít mây")];
+  if (code === 3)              return ["☁️", L("Overcast", "Nhiều mây")];
+  if (code === 45 || code === 48) return ["🌫️", L("Fog", "Sương mù")];
+  if (code <= 57)              return ["🌦️", L("Drizzle", "Mưa phùn")];
+  if (code <= 67)              return ["🌧️", L("Rain", "Mưa")];
+  if (code <= 77)              return ["🌨️", L("Snow", "Tuyết")];
+  if (code <= 82)              return ["🌧️", L("Showers", "Mưa rào")];
+  if (code <= 86)              return ["🌨️", L("Snow showers", "Mưa tuyết")];
+  return ["⛈️", L("Thunderstorm", "Dông bão")];
+}
+
+function useLocalWeather() {
+  const [weather, setWeather] = React.useState(null);
+  React.useEffect(() => {
+    if (!navigator.geolocation) return;
+    navigator.geolocation.getCurrentPosition(
+      (pos) => {
+        const { latitude, longitude } = pos.coords;
+        fetch("https://api.open-meteo.com/v1/forecast?latitude=" + latitude.toFixed(3) +
+              "&longitude=" + longitude.toFixed(3) + "&current=temperature_2m,weather_code&timezone=auto")
+          .then((r) => (r.ok ? r.json() : null))
+          .then((d) => { if (d && d.current) setWeather(d.current); })
+          .catch(() => {});
+      },
+      () => {},            // permission denied → no widget, no nagging
+      { timeout: 10000, maximumAge: 30 * 60 * 1000 }
+    );
+  }, []);
+  return weather;
+}
+
+/* ---------- The heart of Yana: the mission composer ---------- */
+function MissionComposer({ onNav, missionCount }) {
+  const D = window.YANA;
+  const [v, setV] = React.useState("");
+  const [account, setAccount] = React.useState(null);
+  const [now, setNow] = React.useState(() => new Date());
+  const weather = useLocalWeather();
+
+  React.useEffect(() => {
+    fetch("/api/auth/status")
+      .then((r) => r.json())
+      .then((d) => setAccount(d.username || null))
+      .catch(() => {});
+    const id = setInterval(() => setNow(new Date()), 30000);
+    return () => clearInterval(id);
+  }, []);
+  const suggestions = [
+    ["Ship v0.9 safely", "Phát hành v0.9 an toàn"],
+    ["Summarize what changed overnight", "Tóm tắt thay đổi qua đêm"],
+    ["Prune stale memories", "Dọn ký ức cũ"],
+  ];
+
+  async function begin(text) {
+    const goal = (text || v).trim();
+    if (!goal) return;
+    try {
+      const r = await fetch("/api/missions", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: goal }),
+      });
+      if (r.ok) {
+        const { mission } = await r.json();
+        D._openMission = mission.id;
+      }
+    } catch (_) {}
+    onNav("missions");
+  }
+
+  const connectedN = D.providers.filter((p) => YanaVault.hasKey(p.id)).length;
+
+  return (
+    <div style={{ maxWidth: 660, margin: "0 auto", padding: "calc(34px * var(--sp)) 0 calc(40px * var(--sp))", textAlign: "center" }}>
+      <h1 className="h-display" style={{ margin: "0 0 18px", fontSize: 30 }}>{greetingFor(now.getHours(), account)}</h1>
+      <div className="glass-strong" style={{ borderRadius: 18, padding: "10px 10px 10px 20px", display: "flex", alignItems: "center", gap: 12, textAlign: "left" }}>
+        <input
+          value={v}
+          onChange={(e) => setV(e.target.value)}
+          onKeyDown={(e) => { if (e.key === "Enter") begin(); }}
+          placeholder={L("What do you want to accomplish today?", "Hôm nay bạn muốn hoàn thành điều gì?")}
+          style={{ flex: 1, border: "none", outline: "none", background: "transparent", fontSize: 15.5, fontFamily: "inherit", color: "var(--ink)" }}
+        />
+        <button onClick={() => begin()} style={{
+          display: "flex", alignItems: "center", gap: 7, padding: "9px 17px", borderRadius: 13,
+          border: "none", cursor: "pointer", background: "var(--primary)", color: "white",
+          fontSize: 13.5, fontWeight: 500, flex: "none",
+          boxShadow: "0 4px 14px color-mix(in oklab, var(--primary) 32%, transparent)",
+        }}>{Icons.spark(15)} {L("New Mission", "Nhiệm vụ mới")}</button>
+      </div>
+      <div style={{ display: "flex", gap: 7, justifyContent: "center", flexWrap: "wrap", marginTop: 13 }}>
+        {suggestions.map(([en, vi]) => (
+          <button key={en} onClick={() => begin(en)} className="chip neutral" style={{ cursor: "pointer", fontSize: 12 }}>{L(en, vi)}</button>
+        ))}
+      </div>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 9, marginTop: 22, fontSize: 12.5, color: "var(--ink-3)", flexWrap: "wrap" }}>
+        <span className="dot on pulse"></span>
+        <span>{L("Lake status:", "Trạng thái hồ:")} <b style={{ fontWeight: 500, color: "var(--ink-2)" }}>{L("Calm", "Tĩnh lặng")}</b></span>
+        <span style={{ opacity: .5 }}>·</span>
+        <span>{now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}</span>
+        {weather && <span style={{ opacity: .5 }}>·</span>}
+        {weather && (
+          <span title={describeWeather(weather.weather_code)[1]}>
+            {describeWeather(weather.weather_code)[0]} {Math.round(weather.temperature_2m)}°C
+          </span>
+        )}
+        <span style={{ opacity: .5 }}>·</span>
+        <span>{connectedN} {L("providers connected", "nhà cung cấp đã kết nối")}</span>
+        <span style={{ opacity: .5 }}>·</span>
+        <span>{missionCount} {L("missions running", "nhiệm vụ đang chạy")}</span>
+      </div>
+    </div>
+  );
+}
+
+function Dashboard({ t, onNav }) {
+  const D = window.YANA;
+  const [dash, setDash]   = React.useState(null);
+  const [usage, setUsage] = React.useState(null);
+  const [missions, setMissions] = React.useState([]);
+
+  React.useEffect(() => {
+    fetch("/api/dashboard").then((r) => (r.ok ? r.json() : null)).then((d) => { if (d) setDash(d); }).catch(() => {});
+    fetch("/api/usage").then((r) => (r.ok ? r.json() : null)).then((d) => { if (d) setUsage(d.usage); }).catch(() => {});
+    fetch("/api/missions").then((r) => (r.ok ? r.json() : null)).then((d) => { if (d) setMissions(d.missions); }).catch(() => {});
+  }, []);
+
+  const connected = D.providers.filter((p) => YanaVault.hasKey(p.id));
+  const totalTok  = connected.reduce((s, p) => s + ((usage && usage[p.id] && usage[p.id].est_tokens) || 0), 0);
+  const liveModels = connected.map((p) => {
+    const u = usage && usage[p.id];
+    return {
+      id: p.id, name: p.name, model: p.models[0], role: p.role,
+      status:  u && u.requests > 0 ? "active" : "idle",
+      load:    totalTok > 0 && u ? Math.round((u.est_tokens / totalTok) * 100) : 0,
+      latency: u && u.avg_latency_ms ? (u.avg_latency_ms / 1000).toFixed(1) + "s" : "—",
+    };
+  });
+  const mem    = dash && dash.memories;
+  const safety = dash && dash.safety;
+
+  return (
+    <div data-screen-label="Lake">
+      <MissionComposer onNav={onNav} missionCount={missions.filter((m) => m.status !== "done").length} />
+
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--gap)", marginBottom: "var(--gap)" }}>
+        <StatTile label={L("Agents", "Tác nhân")} value={D.stats.agents || "—"} sub={L("in catalog", "trong danh mục")} accent />
+        <StatTile label={L("Skills", "Kỹ năng")} value={(D.stats.skills || 0).toLocaleString()} sub={L("indexed & callable", "đã lập chỉ mục")} />
+        <StatTile label={L("Missions", "Nhiệm vụ")} value={missions.filter((m) => m.status !== "done").length} sub={L("in motion", "đang diễn ra")} />
+        <StatTile label={L("Memories", "Ký ức")} value={mem ? mem.total : "—"} sub={mem ? "+" + mem.today + L(" today", " hôm nay") : L("L1 atomic facts", "L1 atomic facts")} />
+      </div>
+
+      <div style={{ display: "grid", gridTemplateColumns: "1.25fr 1fr", gap: "var(--gap)" }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap)" }}>
+          <Card title={L("Active AI Models", "Mô hình AI đang hoạt động")} aside={<span className="chip neutral">{connected.length} {L("providers", "nhà cung cấp")}</span>}>
+            <div style={{ display: "flex", flexDirection: "column" }}>
+              {liveModels.length
+                ? liveModels.map((m) => <ModelRow key={m.id} m={m} />)
+                : <EmptyHint text={L("No providers connected — add an API key in Providers.", "Chưa kết nối nhà cung cấp — thêm API key ở mục Nhà cung cấp.")} />}
+            </div>
+          </Card>
+
+          {t.showMissions && (
+            <Card title={L("Missions", "Nhiệm vụ")} aside={
+              <button onClick={() => onNav("missions")} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--primary)", fontSize: 12.5, fontWeight: 500, display: "flex", alignItems: "center", gap: 2 }}>
+                {L("Mission Center", "Trung tâm nhiệm vụ")} {Icons.chevron(13)}
+              </button>
+            }>
+              {missions.length
+                ? missions.slice(0, 4).map((m) => <MissionRowMini key={m.id} m={m} onOpen={() => { window.YANA._openMission = m.id; onNav("missions"); }} />)
+                : <EmptyHint text={L("No missions yet — start one above.", "Chưa có nhiệm vụ — bắt đầu một nhiệm vụ ở trên.")} />}
+            </Card>
+          )}
+        </div>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap)" }}>
+          {t.showAgents && (
+            <Card title={L("Running Agents", "Tác nhân đang chạy")} aside={
+              <button onClick={() => onNav("agents")} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--primary)", fontSize: 12.5, fontWeight: 500, display: "flex", alignItems: "center", gap: 2 }}>
+                {L("Agent Space", "Không gian tác nhân")} {Icons.chevron(13)}
+              </button>
+            }>
+              <EmptyHint text={L("No agents running — agents start when a mission dispatches.", "Chưa có tác nhân nào chạy — tác nhân khởi động khi nhiệm vụ được giao.")} />
+            </Card>
+          )}
+
+          {t.showMemory && (
+            <Card title={L("Memory Garden", "Vườn ký ức")} aside={<span className="chip pink">{Icons.memory(13)} {mem ? "+" + mem.today : "—"} {L("today", "hôm nay")}</span>}>
+              {mem && mem.recent.length
+                ? mem.recent.map((m, i) => (
+                    <div key={i} style={{ padding: "calc(7px * var(--sp)) 0", display: "flex", gap: 10, alignItems: "baseline" }}>
+                      <span className="chip neutral" style={{ flex: "none", fontSize: 11 }}>{m.kind}</span>
+                      <span style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.45 }}>{m.text}</span>
+                    </div>
+                  ))
+                : <EmptyHint text={L("No memories yet.", "Chưa có ký ức nào.")} />}
+            </Card>
+          )}
+
+          {t.showSystem && (
+            <Card title={L("System Health", "Sức khỏe hệ thống")}>
+              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
+                {[
+                  [L("Audit events", "Sự kiện audit"), safety ? safety.events_today + L(" today", " hôm nay") : "—"],
+                  [L("Blocked actions", "Hành động bị chặn"), safety ? String(safety.blocked_today) : "—"],
+                  [L("Last incident", "Sự cố gần nhất"), safety ? (safety.last_incident ? fmtAgo(safety.last_incident) : L("None recorded", "Chưa ghi nhận")) : "—"],
+                  [L("Server uptime", "Uptime máy chủ"), dash ? fmtUptime(dash.uptime_s) : "—"],
+                ].map(([k, v]) => (
+                  <div key={k} style={{ lineHeight: 1.35 }}>
+                    <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{k}</div>
+                    <div style={{ fontSize: 13, fontWeight: 500 }}>{v}</div>
+                  </div>
+                ))}
+              </div>
+            </Card>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+window.Dashboard = Dashboard;

package/desktop/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="icon" type="image/png" href="/logo.png" />
+  <title>Yana AI</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,700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="themes.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>
+  <!-- Plain JS first — sets window.YANA before any JSX runs -->
+  <script src="/shared/crypto-store.js"></script>
+  <script src="/shared/data.js"></script>
+  <!-- JSX components in dependency order -->
+  <script type="text/babel" src="/shared/tweaks-panel.jsx"></script>
+  <script type="text/babel" src="components.jsx"></script>
+  <script type="text/babel" src="dashboard.jsx"></script>
+  <script type="text/babel" src="chat.jsx"></script>
+  <script type="text/babel" src="spaces.jsx"></script>
+  <script type="text/babel" src="system.jsx"></script>
+  <script type="text/babel" src="app.jsx"></script>
+</body>
+</html>