yana-web 0.1.0

package/PUBLISH.md

@@ -0,0 +1,26 @@
+# Publish to npm
+
+GitHub repo đã lên: https://github.com/phamlongh230-lgtm/yana-web
+
+## Còn 2 bước npm — anh chạy khi về:
+
+### 1. Publish yamtam-core (dependency)
+```bash
+cd ~/yamtam-engine/packages/yamtam-core
+npm login
+npm publish --access public
+```
+
+### 2. Publish yana-web
+```bash
+cd ~/yana-web
+npm publish --access public
+```
+
+## Sau khi publish, người dùng chạy:
+```bash
+npx yana
+```
+
+## Nếu muốn scoped package (@phamlongh230/yana):
+Sửa name trong package.json thành "@phamlongh230/yana" trước khi publish.

package/README.md

@@ -0,0 +1,46 @@
+# Yana
+
+Self-hosted AI workspace. One command to run.
+
+## Quick start
+
+```bash
+npx yana
+```
+
+Opens at `http://localhost:8081`. Add your API key in **System → Providers**, start chatting.
+
+## Features
+
+- **Multi-provider** — Claude, OpenAI, Gemini, Groq, DeepSeek, OpenRouter, Ollama
+- **Encrypted keys** — API keys stored with AES-256-GCM, never sent anywhere except the provider you choose
+- **Memory** — Yana remembers context across conversations
+- **Missions** — break goals into tracked tasks
+- **Mobile + Desktop UI** — auto-detects device, separate optimised shells
+- **Self-hosted** — runs on your machine, your data stays local
+
+## Install globally
+
+```bash
+npm install -g yana-web
+yana
+```
+
+## Environment variables
+
+| Variable | Default | Description |
+|---|---|---|
+| `PORT` | `8081` | Server port |
+| `HOST` | `127.0.0.1` | Bind address (`0.0.0.0` for Docker/remote) |
+| `YANA_DATA_DIR` | `~/.yana` | Where auth, memory and missions are stored |
+| `YANA_ROOT` | `process.cwd()` | Optional: path to a YAMTAM engine checkout for skill routing |
+
+## Docker
+
+```bash
+docker run -p 8081:8081 -e HOST=0.0.0.0 -v ~/.yana:/root/.yana ghcr.io/phamlongh230-lgtm/yana-web
+```
+
+## License
+
+MIT

package/auth.js

@@ -0,0 +1,204 @@
+'use strict';
+// Yana Auth — single-user password gate for the local web UI.
+//
+// Password: scrypt hash (random salt, N=16384) in .yana/auth.json — never
+// plaintext, never in env, never in a URL (rule 66 / api-security-gate API2).
+// Sessions: random 256-bit tokens in an HttpOnly SameSite=Lax cookie,
+// persisted to .yana/sessions.json so a server restart keeps you signed in.
+// Login attempts are rate-limited per IP (5 per 15 min) — OWASP API6.
+
+const crypto = require('crypto');
+const fs     = require('fs');
+const path   = require('path');
+
+// Persistent data dir. Default: dot-dir next to the server (static server never
+// serves it). Override with YANA_DATA_DIR to point at a mounted volume
+// (e.g. /data on Railway) so accounts survive redeploys.
+const DATA_DIR      = process.env.YANA_DATA_DIR || path.join(require('os').homedir(), '.yana');
+const AUTH_FILE     = path.join(DATA_DIR, 'auth.json');
+const SESSIONS_FILE = path.join(DATA_DIR, 'sessions.json');
+const COOKIE        = 'yana_sid';
+const SESSION_TTL   = 7 * 24 * 3600 * 1000;            // 7 days (default)
+const REMEMBER_TTL  = 30 * 24 * 3600 * 1000;           // 30 days ("remember me")
+const SCRYPT        = { N: 16384, r: 8, p: 1, keylen: 64 };
+
+const LOGIN_RATE = { windowMs: 15 * 60_000, max: 5, hits: new Map() };
+
+let sessions = loadJson(SESSIONS_FILE) || {};
+
+function loadJson(file) {
+  try { return JSON.parse(fs.readFileSync(file, 'utf8')); } catch (_) { return null; }
+}
+
+function saveJson(file, data) {
+  fs.mkdirSync(DATA_DIR, { recursive: true });
+  fs.writeFileSync(file, JSON.stringify(data), { mode: 0o600 });
+}
+
+function hashPassword(password) {
+  const salt = crypto.randomBytes(16);
+  const hash = crypto.scryptSync(password, salt, SCRYPT.keylen, SCRYPT);
+  return { salt: salt.toString('hex'), hash: hash.toString('hex') };
+}
+
+function verifyPassword(password, rec) {
+  const expected = Buffer.from(rec.hash, 'hex');
+  const actual   = crypto.scryptSync(password, Buffer.from(rec.salt, 'hex'), expected.length, SCRYPT);
+  return crypto.timingSafeEqual(actual, expected);
+}
+
+function isSetUp() {
+  const rec = loadJson(AUTH_FILE);
+  return !!(rec && rec.salt && rec.hash);
+}
+
+// ── Sessions ──────────────────────────────────────────────────────────────────
+function createSession(remember) {
+  const token = crypto.randomBytes(32).toString('hex');
+  sessions[token] = { created: Date.now(), ttl: remember ? REMEMBER_TTL : SESSION_TTL };
+  pruneSessions();
+  saveJson(SESSIONS_FILE, sessions);
+  return token;
+}
+
+function pruneSessions() {
+  const now = Date.now();
+  for (const [t, s] of Object.entries(sessions)) {
+    if (now - s.created > (s.ttl || SESSION_TTL)) delete sessions[t];
+  }
+}
+
+function sessionToken(req) {
+  const header = req.headers.cookie || '';
+  for (const part of header.split(';')) {
+    const [k, v] = part.trim().split('=');
+    if (k === COOKIE && v) return v;
+  }
+  return null;
+}
+
+function isAuthed(req) {
+  const token = sessionToken(req);
+  if (!token || !sessions[token]) return false;
+  const s = sessions[token];
+  if (Date.now() - s.created > (s.ttl || SESSION_TTL)) {
+    delete sessions[token];
+    saveJson(SESSIONS_FILE, sessions);
+    return false;
+  }
+  return true;
+}
+
+// req.secure is resolved by server.js (X-Forwarded-Proto behind a trusted
+// proxy) — the Secure flag keeps the session cookie off plain-HTTP hops.
+function setCookie(req, res, token) {
+  const ttl    = (sessions[token] && sessions[token].ttl) || SESSION_TTL;
+  const secure = req.secure ? '; Secure' : '';
+  res.setHeader('Set-Cookie',
+    `${COOKIE}=${token}; HttpOnly; SameSite=Lax; Path=/; Max-Age=${ttl / 1000}${secure}`);
+}
+
+function clearCookie(req, res) {
+  const secure = req.secure ? '; Secure' : '';
+  res.setHeader('Set-Cookie', `${COOKIE}=; HttpOnly; SameSite=Lax; Path=/; Max-Age=0${secure}`);
+}
+
+// ── Rate limit (login only — stricter than the global POST limiter) ──────────
+function loginRateLimited(req) {
+  // req.clientIp is the proxy-aware address resolved by server.js — without it
+  // every visitor behind Railway's proxy would share one rate-limit bucket
+  const ip  = req.clientIp || req.socket.remoteAddress || 'unknown';
+  const now = Date.now();
+  let rec = LOGIN_RATE.hits.get(ip);
+  if (!rec || now - rec.start > LOGIN_RATE.windowMs) rec = { count: 0, start: now };
+  rec.count++;
+  LOGIN_RATE.hits.set(ip, rec);
+  return rec.count > LOGIN_RATE.max;
+}
+
+// ── Handlers ──────────────────────────────────────────────────────────────────
+function json(res, status, obj) {
+  res.writeHead(status, { 'Content-Type': 'application/json' });
+  res.end(JSON.stringify(obj));
+}
+
+function handleStatus(req, res) {
+  const rec = loadJson(AUTH_FILE);
+  json(res, 200, {
+    setup: isSetUp(),
+    authed: isAuthed(req),
+    // Account name is shown on the login screen (single-user local app) —
+    // it is display data, not a secret.
+    username: (rec && rec.username) || null,
+  });
+}
+
+// Account names are compared NFC-normalized and case-insensitive so that
+// Vietnamese IME composition differences never lock the owner out.
+function normalizeUsername(name) {
+  return String(name).normalize('NFC').trim();
+}
+
+function validUsername(name) {
+  if (typeof name !== 'string') return false;
+  const n = normalizeUsername(name);
+  // 2–32 visible chars, no control characters
+  return n.length >= 2 && n.length <= 32 && !/[\u0000-\u001f\u007f]/.test(n);
+}
+
+// First run only: create the account (username + password), then sign in.
+function handleSetup(req, res, body) {
+  if (isSetUp()) { json(res, 409, { error: 'Already set up' }); return; }
+  const username = body && body.username;
+  const password = body && body.password;
+  if (!validUsername(username)) {
+    json(res, 400, { error: 'Username must be 2-32 characters' }); return;
+  }
+  if (typeof password !== 'string' || password.length < 6) {
+    json(res, 400, { error: 'Password must be at least 6 characters' }); return;
+  }
+  saveJson(AUTH_FILE, {
+    ...hashPassword(password),
+    username: normalizeUsername(username),
+    created: new Date().toISOString(),
+  });
+  setCookie(req, res, createSession(!!body.remember));
+  json(res, 200, { ok: true });
+}
+
+function handleLogin(req, res, body) {
+  if (loginRateLimited(req)) {
+    res.writeHead(429, { 'Content-Type': 'application/json', 'Retry-After': '900' });
+    res.end(JSON.stringify({ error: 'Too many attempts — wait 15 minutes' }));
+    return;
+  }
+  const rec = loadJson(AUTH_FILE);
+  if (!rec) { json(res, 409, { error: 'Not set up yet' }); return; }
+  const password = body && body.password;
+  // Accounts created before usernames existed have no rec.username — skip the
+  // name check for them so the owner is never locked out by this upgrade.
+  if (rec.username) {
+    const given = body && body.username;
+    if (typeof given !== 'string' ||
+        normalizeUsername(given).toLowerCase() !== rec.username.toLowerCase()) {
+      json(res, 401, { error: 'Wrong username or password' }); return;
+    }
+  }
+  if (typeof password !== 'string' || !verifyPassword(password, rec)) {
+    json(res, 401, { error: 'Wrong username or password' }); return;
+  }
+  setCookie(req, res, createSession(!!body.remember));
+  json(res, 200, { ok: true });
+}
+
+function handleLogout(req, res) {
+  const token = sessionToken(req);
+  if (token && sessions[token]) {
+    delete sessions[token];
+    saveJson(SESSIONS_FILE, sessions);
+  }
+  clearCookie(req, res);
+  json(res, 200, { ok: true });
+}
+
+module.exports = { isAuthed, isSetUp, handleStatus, handleSetup, handleLogin, handleLogout };

package/bin/yana.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+'use strict';
+// Open browser automatically after server starts
+const { execSync } = require('child_process');
+const http = require('http');
+
+// Forward to server.js — it exports the http.Server instance
+const server = require('../server.js');
+
+// Wait for server to be listening, then open browser
+server.on('listening', () => {
+  const { port } = server.address();
+  const url = `http://localhost:${port}`;
+  try {
+    const cmd = process.platform === 'darwin' ? `open ${url}`
+              : process.platform === 'win32'  ? `start ${url}`
+              : `xdg-open ${url}`;
+    execSync(cmd, { stdio: 'ignore' });
+  } catch (_) {}
+});

package/desktop/app.jsx

@@ -0,0 +1,240 @@
+// Yana AI — app shell, routing, tweaks wiring
+
+/* ---------- Memory Garden — real L1 atomic facts via /api/memories ---------- */
+function MemoryGarden() {
+  const [data, setData] = React.useState(null);
+  const [filter, setFilter] = React.useState("all");
+
+  React.useEffect(() => {
+    fetch("/api/memories")
+      .then((r) => (r.ok ? r.json() : null))
+      .then((d) => { if (d) setData(d); })
+      .catch(() => {});
+  }, []);
+
+  const memories = data ? data.memories : [];
+  const kinds = ["all", ...Array.from(new Set(memories.map((m) => m.kind)))];
+  const visible = filter === "all" ? memories : memories.filter((m) => m.kind === filter);
+
+  return (
+    <div data-screen-label="Memory Garden">
+      <PageHeader
+        title={L("Memory Garden", "Vườn ký ức")}
+        sub={data
+          ? data.total + L(" L1 atomic facts · persisted in memory/L1_atomic", " fact L1 · lưu tại memory/L1_atomic")
+          : L("Loading memories…", "Đang tải ký ức…")}>
+        <div style={{ display: "flex", gap: 6 }}>
+          {kinds.map((k) => (
+            <button key={k} onClick={() => setFilter(k)} style={{
+              padding: "5px 13px", borderRadius: 99, border: "none", cursor: "pointer", fontSize: 12.5,
+              fontWeight: filter === k ? 500 : 400,
+              background: filter === k ? "var(--primary)" : "rgba(var(--shadow-rgb), .08)",
+              color: filter === k ? "white" : "var(--ink-2)",
+              transition: "background .15s",
+            }}>{k === "all" ? L("All", "Tất cả") : k}</button>
+          ))}
+        </div>
+      </PageHeader>
+      <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap)", maxWidth: 800 }}>
+        {data && visible.length === 0 && (
+          <div style={{ color: "var(--ink-3)", fontSize: 13 }}>{L("No memories yet.", "Chưa có ký ức nào.")}</div>
+        )}
+        {visible.map((m) => (
+          <div key={m.id} className="glass" style={{ borderRadius: "var(--r-lg)", padding: "var(--pad-card)", display: "flex", gap: 14 }}>
+            <div style={{ flex: "none", paddingTop: 2 }}>
+              <span style={{ color: "var(--pink)" }}>{Icons.memory(16)}</span>
+            </div>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
+                <span className="chip neutral" style={{ fontSize: 11 }}>{m.kind}</span>
+                {m.confidence && <span className="chip gold" style={{ fontSize: 10.5 }}>{m.confidence}</span>}
+                {m.fresh && <span className="chip" style={{ fontSize: 10.5, color: "var(--good)" }}>{L("Fresh", "Mới")}</span>}
+              </div>
+              <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.55, color: "var(--ink)" }}>{m.text}</p>
+              {m.source && <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 7 }}>{m.source}</div>}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/* ---------- Skills — real counts via /api/skills (core/skills on disk) ---------- */
+function Skills() {
+  const [data, setData] = React.useState(null);
+
+  React.useEffect(() => {
+    fetch("/api/skills")
+      .then((r) => (r.ok ? r.json() : null))
+      .then((d) => { if (d) setData(d); })
+      .catch(() => {});
+  }, []);
+
+  const groups = data
+    ? [{ name: L("core (standalone)", "lõi (độc lập)"), count: data.standalone }, ...data.packs]
+    : [];
+
+  return (
+    <div data-screen-label="Skills">
+      <PageHeader
+        title={L("Skills", "Kỹ năng")}
+        sub={data
+          ? data.total.toLocaleString() + L(" skills on disk · " + data.pack_count + " imported packs", " kỹ năng trên đĩa · " + data.pack_count + " gói đã nhập")
+          : L("Counting skills…", "Đang đếm kỹ năng…")} />
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: "var(--gap)" }}>
+        {groups.map((c) => (
+          <div key={c.name} className="glass" style={{ borderRadius: "var(--r-lg)", padding: "var(--pad-card)", display: "flex", flexDirection: "column", gap: 10 }}>
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
+              <span style={{ fontSize: 14.5, fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.name}</span>
+              <span className="chip neutral" style={{ fontSize: 11.5, flex: "none" }}>{c.count.toLocaleString()}</span>
+            </div>
+            <div className="bar" style={{ height: 4 }}>
+              <i style={{ width: Math.round(c.count / data.total * 100) + "%" }}></i>
+            </div>
+            <div style={{ fontSize: 12, color: "var(--ink-3)" }}>
+              {Math.round(c.count / data.total * 100)}% {L("of catalog", "danh mục")}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/* ---------- App shell ---------- */
+const TWEAK_DEFAULTS = {
+  "theme": "Jade Lake 🌿",
+  "language": "English",
+  "blur": 70,
+  "transparency": 60,
+  "reflection": 70,
+  "depth": 55,
+  "layout": "Regular",
+  "showAgents": true,
+  "showMissions": true,
+  "showMemory": true,
+  "showSystem": true,
+  "accent": ""
+};
+
+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.page") || "dashboard");
+  window.YANA_LANG = t.language === "Tiếng Việt" ? "vi" : "en";
+
+  React.useEffect(() => applyTweaks(t), [t]);
+  React.useEffect(() => localStorage.setItem("yana.page", page), [page]);
+
+  const Page = {
+    dashboard: () => <Dashboard t={t} onNav={setPage} />,
+    chat: () => <Chat t={t} />,
+    agents: () => <AgentSpace />,
+    missions: () => <MissionCenter />,
+    memory: () => <MemoryGarden />,
+    skills: () => <Skills />,
+    providers: () => <Providers />,
+    settings: () => <Settings t={t} setTweak={setTweak} />,
+  }[page] || (() => <Dashboard t={t} onNav={setPage} />);
+
+  return (
+    <div key={t.language} className="yana-app" style={{ position: "relative", zIndex: 1, height: "100%", display: "flex", gap: "var(--gap)" }}>
+      <Sidebar page={page} onNav={setPage} />
+      <main className="yana-main" style={{ flex: 1, minWidth: 0, minHeight: 0, overflowY: page === "chat" ? "hidden" : "auto", display: "flex", flexDirection: "column" }}>
+        <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }}>
+          <Page />
+        </div>
+      </main>
+
+      <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="AI Control Center" />
+        <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>
+  );
+}
+
+/* ---------- Undercurrent: 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 },
+  { left: "35%", top: "94%", dur: "86s", delay: "-65s", dx: "55px",  dy: "-60px", peak: 0.14 },
+  { left: "92%", top: "68%", dur: "79s", delay: "-48s", dx: "-35px", dy: "-50px", peak: 0.14 },
+];
+
+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>
+  );
+}
+
+// Render only after the key vault has decrypted into its in-memory cache —
+// otherwise ProviderCard/Chat would see an empty vault on first paint.
+YanaVault.ready.then(() => ReactDOM.createRoot(document.getElementById("root")).render(
+  <>
+    <Undercurrent />
+    <App />
+  </>
+));