yana-web 0.1.0

package/desktop/themes.css

@@ -0,0 +1,275 @@
+/* ============================================================
+   Yana AI — theme tokens
+   Four themes, one architecture:
+   dawn  — Lotus Dawn: pink-gold sunrise over the lake
+   jade  — Jade Lake: warm pearl, jade green, clear water
+   mist  — Morning Mist: near-monochrome paper, minimal glass
+   silver— Glass Silver: cool silver-blue liquid glass
+   Glass knobs (set by Tweaks): --blur, --alpha, --reflect, --depth (0..1)
+   Density: --sp (0.85 compact / 1 regular / 1.18 spacious)
+   ============================================================ */
+
+:root {
+  --font-ui: "Be Vietnam Pro", -apple-system, "Segoe UI", sans-serif;
+
+  --blur: 0.7;
+  --alpha: 0.6;
+  --reflect: 0.7;
+  --depth: 0.55;
+  --sp: 1;
+
+  --pad-card: calc(18px * var(--sp));
+  --gap: calc(14px * var(--sp));
+
+  --r-lg: 20px;
+  --r-md: 14px;
+  --r-sm: 9px;
+}
+
+/* ---------- Jade Lake (default) ---------- */
+[data-theme="jade"] {
+  --bg-base: #f2f7f4;
+  --bg-scene:
+    radial-gradient(1100px 520px at 12% -8%, rgba(233, 201, 138, 0.14), transparent 60%),
+    radial-gradient(900px 600px at 88% 4%, rgba(232, 180, 192, 0.15), transparent 58%),
+    radial-gradient(1300px 800px at 50% 110%, rgba(122, 184, 168, 0.20), transparent 62%),
+    linear-gradient(180deg, #f6faf7 0%, #eef5f1 100%);
+  --surface-rgb: 255, 255, 255;
+  --shadow-rgb: 20, 40, 36;
+  --ink: #21403a;
+  --ink-2: #51695f;
+  --ink-3: #84988f;
+  --primary: #2f7e6e;
+  --primary-soft: rgba(47, 126, 110, 0.10);
+  --pink: #c77b92;
+  --pink-soft: rgba(199, 123, 146, 0.12);
+  --gold: #b78f3d;
+  --gold-soft: rgba(183, 143, 61, 0.13);
+  --good: #3d8b6e;
+  --warn: #b78f3d;
+  --border: rgba(31, 56, 51, 0.10);
+  --border-strong: rgba(31, 56, 51, 0.16);
+  --glass-blur-max: 24px;
+}
+
+/* ---------- Lotus Dawn ---------- */
+[data-theme="dawn"] {
+  --bg-base: #f9f4f2;
+  --bg-scene:
+    radial-gradient(1100px 540px at 16% -10%, rgba(236, 196, 134, 0.26), transparent 60%),
+    radial-gradient(1000px 620px at 86% 2%, rgba(231, 168, 185, 0.28), transparent 58%),
+    radial-gradient(1300px 760px at 50% 112%, rgba(168, 196, 186, 0.18), transparent 64%),
+    linear-gradient(180deg, #faf5f3 0%, #f4ece9 100%);
+  --surface-rgb: 255, 253, 252;
+  --shadow-rgb: 54, 36, 38;
+  --ink: #3c2e33;
+  --ink-2: #6f5d62;
+  --ink-3: #a08e92;
+  --primary: #b96b80;
+  --primary-soft: rgba(185, 107, 128, 0.11);
+  --pink: #b96b80;
+  --pink-soft: rgba(185, 107, 128, 0.11);
+  --gold: #b78a3f;
+  --gold-soft: rgba(183, 138, 63, 0.14);
+  --good: #4f8b6e;
+  --warn: #b78a3f;
+  --border: rgba(60, 46, 51, 0.10);
+  --border-strong: rgba(60, 46, 51, 0.16);
+  --glass-blur-max: 24px;
+}
+
+/* ---------- Morning Mist ---------- */
+[data-theme="mist"] {
+  --bg-base: #f7f6f3;
+  --bg-scene:
+    radial-gradient(1200px 600px at 50% -12%, rgba(214, 222, 214, 0.35), transparent 62%),
+    linear-gradient(180deg, #f8f7f4 0%, #f3f2ee 100%);
+  --surface-rgb: 255, 255, 255;
+  --shadow-rgb: 30, 38, 34;
+  --ink: #26302c;
+  --ink-2: #5b6661;
+  --ink-3: #939c96;
+  --primary: #4a7a6a;
+  --primary-soft: rgba(74, 122, 106, 0.09);
+  --pink: #ab7e8d;
+  --pink-soft: rgba(171, 126, 141, 0.10);
+  --gold: #a3884e;
+  --gold-soft: rgba(163, 136, 78, 0.11);
+  --good: #4a7a6a;
+  --warn: #a3884e;
+  --border: rgba(38, 48, 44, 0.09);
+  --border-strong: rgba(38, 48, 44, 0.15);
+  --glass-blur-max: 10px;
+}
+
+/* ---------- Glass Silver ---------- */
+[data-theme="silver"] {
+  --bg-base: #eef2f6;
+  --bg-scene:
+    radial-gradient(1100px 560px at 18% -10%, rgba(168, 199, 224, 0.30), transparent 60%),
+    radial-gradient(1000px 620px at 85% 0%, rgba(199, 214, 229, 0.32), transparent 58%),
+    radial-gradient(1300px 760px at 50% 112%, rgba(122, 158, 186, 0.22), transparent 64%),
+    linear-gradient(180deg, #f3f6fa 0%, #e9eef4 100%);
+  --surface-rgb: 252, 254, 255;
+  --shadow-rgb: 18, 34, 46;
+  --ink: #1c2f3a;
+  --ink-2: #4c6271;
+  --ink-3: #8194a1;
+  --primary: #3a7ca5;
+  --primary-soft: rgba(58, 124, 165, 0.10);
+  --pink: #b585a4;
+  --pink-soft: rgba(181, 133, 164, 0.12);
+  --gold: #a98e4b;
+  --gold-soft: rgba(169, 142, 75, 0.13);
+  --good: #44897c;
+  --warn: #a98e4b;
+  --border: rgba(28, 43, 51, 0.11);
+  --border-strong: rgba(28, 43, 51, 0.18);
+  --glass-blur-max: 32px;
+}
+
+/* ============ base ============ */
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; height: 100%; }
+body {
+  font-family: var(--font-ui);
+  color: var(--ink);
+  background: var(--bg-base);
+  -webkit-font-smoothing: antialiased;
+  font-size: 14px;
+  line-height: 1.5;
+}
+#root { height: 100%; }
+
+.scene { position: fixed; inset: 0; background: var(--bg-scene); z-index: 0; }
+
+/* Yana signature: quiet ripples on the lake surface */
+.scene::after {
+  content: "";
+  position: absolute; inset: 0;
+  background:
+    repeating-radial-gradient(circle at 78% 86%, rgba(var(--surface-rgb), 0) 0 54px, rgba(var(--shadow-rgb), 0.028) 54px 56px, rgba(var(--surface-rgb), 0) 56px 120px),
+    repeating-radial-gradient(circle at 14% 102%, rgba(var(--surface-rgb), 0) 0 70px, rgba(var(--shadow-rgb), 0.022) 70px 72px, rgba(var(--surface-rgb), 0) 72px 150px);
+  -webkit-mask-image: linear-gradient(180deg, transparent 30%, black 75%);
+  mask-image: linear-gradient(180deg, transparent 30%, black 75%);
+  pointer-events: none;
+}
+
+/* ============ glass surfaces ============ */
+/* Transparency slider raises see-through-ness; reflection lights the top edge;
+   depth scales the shadow; blur scales backdrop blur. */
+.glass, .glass-strong {
+  border: 1px solid var(--border);
+  -webkit-backdrop-filter: blur(calc(var(--glass-blur-max) * var(--blur))) saturate(1.15);
+  backdrop-filter: blur(calc(var(--glass-blur-max) * var(--blur))) saturate(1.15);
+  box-shadow:
+    0 1px 2px rgba(var(--shadow-rgb), calc(0.02 + var(--depth) * 0.05)),
+    0 12px 36px rgba(var(--shadow-rgb), calc(0.02 + var(--depth) * 0.10)),
+    inset 0 1px 0 rgba(255, 255, 255, calc(var(--reflect) * 0.85));
+}
+.glass { background: rgba(var(--surface-rgb), calc(0.92 - var(--alpha) * 0.48)); }
+.glass-strong { background: rgba(var(--surface-rgb), calc(0.97 - var(--alpha) * 0.25)); }
+
+/* ============ shared atoms ============ */
+.h-display { font-weight: 300; letter-spacing: -0.02em; }
+.label-xs {
+  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
+  text-transform: uppercase; color: var(--ink-3);
+}
+.num-lg { font-size: 32px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
+
+.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
+.dot.on   { background: var(--good); box-shadow: 0 0 0 3px color-mix(in oklab, var(--good) 18%, transparent); }
+.dot.idle { background: var(--gold); box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold) 16%, transparent); }
+.dot.off  { background: var(--ink-3); }
+
+.chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 3px 10px; border-radius: 99px;
+  font-size: 12px; font-weight: 500;
+  background: var(--primary-soft); color: var(--primary);
+}
+.chip.pink { background: var(--pink-soft); color: var(--pink); }
+.chip.gold { background: var(--gold-soft); color: var(--gold); }
+.chip.neutral { background: rgba(var(--surface-rgb), 0.6); border: 1px solid var(--border); color: var(--ink-2); }
+
+.bar { height: 5px; border-radius: 99px; background: rgba(var(--shadow-rgb), 0.08); overflow: hidden; }
+.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--primary); }
+
+button { font-family: inherit; }
+::selection { background: var(--primary-soft); }
+
+*::-webkit-scrollbar { width: 10px; height: 10px; }
+*::-webkit-scrollbar-thumb { background: rgba(var(--shadow-rgb), 0.14); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
+*::-webkit-scrollbar-track { background: transparent; }
+
+/* ============ responsive: sidebar becomes a drawer ≤ 860px ============ */
+.yana-app { padding: calc(16px * var(--sp)); }
+.yana-sidebar { width: 218px; flex: none; position: relative; z-index: 2; }
+.yana-chat-aside { width: 240px; flex: none; }
+.yana-menu-btn, .yana-backdrop { display: none; }
+
+@media (max-width: 860px) {
+  .yana-app { padding: 10px; }
+
+  .yana-sidebar {
+    position: fixed; top: 10px; bottom: 10px; left: 10px; z-index: 40;
+    width: min(280px, 80vw);
+    transform: translateX(calc(-100% - 20px));
+    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
+    overflow-y: auto;
+    /* drawer floats over content — needs a near-solid surface to stay readable */
+    background: rgba(var(--surface-rgb), .94);
+  }
+  .yana-sidebar.open { transform: translateX(0); }
+
+  .yana-backdrop {
+    display: block; position: fixed; inset: 0; z-index: 39;
+    background: rgba(var(--shadow-rgb), .30);
+    opacity: 0; pointer-events: none;
+    transition: opacity .28s;
+  }
+  .yana-backdrop.show { opacity: 1; pointer-events: auto; }
+
+  .yana-menu-btn {
+    display: grid; place-items: center;
+    position: fixed; top: 12px; left: 12px; z-index: 38;
+    width: 40px; height: 40px; border-radius: 13px;
+    border: 1px solid var(--border); cursor: pointer;
+    color: var(--ink-2);
+  }
+
+  /* clear the floating menu button */
+  .yana-main { padding-top: 50px; }
+
+  /* chat info panels (routing/context/safety) yield to the conversation */
+  .yana-chat-aside { display: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .yana-sidebar, .yana-backdrop { transition: none; }
+}
+
+/* ============ life beneath the surface ============ */
+.pulse { animation: none; }
+.mote {
+  position: absolute;
+  width: 5px; height: 5px; border-radius: 50%;
+  background: color-mix(in oklab, var(--primary) 60%, white);
+  opacity: 0; filter: blur(1.2px);
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .pulse { animation: yana-pulse 3.2s ease-in-out infinite; }
+  .mote { animation: yana-drift var(--dur, 70s) linear infinite; animation-delay: var(--delay, 0s); }
+}
+@keyframes yana-pulse {
+  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--good) 18%, transparent); }
+  50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--good) 8%, transparent); }
+}
+@keyframes yana-drift {
+  0%   { transform: translate(0, 0); opacity: 0; }
+  12%  { opacity: var(--peak, 0.22); }
+  88%  { opacity: var(--peak, 0.22); }
+  100% { transform: translate(var(--dx, 40px), var(--dy, -60px)); opacity: 0; }
+}

package/desktop/welcome.html

@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
+  <link rel="icon" type="image/png" href="/logo.png" />
+  <title>Yana — Trợ lý AI của bạn</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" />
+  <style>
+    :root {
+      --primary: #2f7e6e;
+      --ink: #1d3530; --ink-2: #44615a; --ink-3: #7a948d;
+      --border: rgba(31, 70, 60, .14);
+    }
+    * { box-sizing: border-box; }
+    html, body { height: 100%; }
+    body {
+      margin: 0; overflow-x: hidden;
+      font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+      background: linear-gradient(160deg, #f6faf7 30%, #ddeee7 100%);
+      color: var(--ink);
+      display: grid; place-items: center; min-height: 100vh;
+    }
+
+    /* ── Aurora backdrop ── */
+    .aurora { position: fixed; inset: 0; pointer-events: none; filter: blur(70px); z-index: 0; }
+    .blob { position: absolute; border-radius: 50%; opacity: .5; animation: drift 26s ease-in-out infinite alternate; }
+    .b1 { width: 46vw; height: 46vw; left: -10vw; top: -16vh; background: radial-gradient(circle, rgba(122,184,168,.8), transparent 65%); }
+    .b2 { width: 38vw; height: 38vw; right: -8vw; bottom: -14vh; background: radial-gradient(circle, rgba(86,148,159,.7), transparent 65%); animation-delay: -9s; }
+    .b3 { width: 30vw; height: 30vw; right: 16vw; top: -10vh; background: radial-gradient(circle, rgba(236,196,134,.55), transparent 65%); animation-delay: -17s; }
+    @keyframes drift {
+      from { transform: translate(0, 0) scale(1); }
+      to   { transform: translate(5vw, 6vh) scale(1.12); }
+    }
+    @media (prefers-reduced-motion: reduce) { .blob, .mark, .stage > * { animation: none !important; opacity: 1 !important; transform: none !important; } }
+
+    /* ── Stage ── */
+    .stage {
+      position: relative; z-index: 1; width: min(94vw, 720px);
+      padding: 48px 24px 36px; text-align: center;
+    }
+    .stage > * { animation: rise .6s cubic-bezier(.21,.8,.32,1) both; }
+
+    .lang {
+      position: fixed; top: 18px; right: 18px; z-index: 2;
+      display: flex; gap: 2px; padding: 3px;
+      background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7);
+      border-radius: 99px; backdrop-filter: blur(12px);
+    }
+    .lang button {
+      border: none; cursor: pointer; font-family: inherit;
+      font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
+      padding: 4px 10px; border-radius: 99px; color: var(--ink-3);
+      background: transparent; transition: background .15s, color .15s;
+    }
+    .lang button.on { background: rgba(255,255,255,.95); color: var(--ink); box-shadow: 0 1px 3px rgba(31,70,60,.12); }
+
+    .mark {
+      width: 84px; height: 84px; margin: 0 auto 24px; border-radius: 27px;
+      display: grid; place-items: center;
+      background: linear-gradient(150deg, color-mix(in oklab, var(--primary) 92%, white), color-mix(in oklab, var(--primary) 72%, #1d3530));
+      box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 14px 36px color-mix(in oklab, var(--primary) 32%, transparent);
+      animation: rise .6s cubic-bezier(.21,.8,.32,1) both, breathe 5s ease-in-out 1s infinite;
+    }
+    @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
+    @keyframes rise { from { opacity: 0; transform: translateY(18px); } }
+
+    h1 {
+      margin: 0 0 10px; font-size: clamp(28px, 5vw, 38px); font-weight: 600;
+      letter-spacing: -0.02em; animation-delay: .06s;
+    }
+    h1 .name { color: var(--primary); }
+    .tagline {
+      margin: 0 auto 34px; max-width: 46ch;
+      font-size: clamp(13.5px, 2.2vw, 15.5px); color: var(--ink-2); line-height: 1.7;
+      animation-delay: .12s;
+    }
+
+    /* Feature cards */
+    .feats {
+      display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 12px; margin-bottom: 36px; animation-delay: .18s;
+    }
+    .feat {
+      padding: 18px 14px 16px; border-radius: 18px; text-align: center;
+      background: rgba(255,255,255,.5);
+      backdrop-filter: blur(16px) saturate(1.2);
+      -webkit-backdrop-filter: blur(16px) saturate(1.2);
+      border: 1px solid rgba(255,255,255,.65);
+      box-shadow: 0 8px 26px rgba(31,70,60,.07), inset 0 1px 0 rgba(255,255,255,.7);
+      transition: transform .2s ease, box-shadow .2s ease;
+    }
+    .feat:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(31,70,60,.11), inset 0 1px 0 rgba(255,255,255,.7); }
+    .feat .ico {
+      width: 38px; height: 38px; margin: 0 auto 10px; border-radius: 12px;
+      display: grid; place-items: center; color: var(--primary);
+      background: color-mix(in oklab, var(--primary) 10%, transparent);
+    }
+    .feat .t { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
+    .feat .d { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
+
+    /* CTA */
+    .ctas { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; animation-delay: .24s; }
+    a.cta {
+      display: inline-flex; align-items: center; gap: 9px;
+      padding: 14px 30px; border-radius: 16px; text-decoration: none;
+      font-size: 15px; font-weight: 500; color: white;
+      background: var(--primary);
+      box-shadow: 0 10px 28px color-mix(in oklab, var(--primary) 38%, transparent);
+      transition: transform .12s, box-shadow .2s;
+    }
+    a.cta:hover { box-shadow: 0 12px 34px color-mix(in oklab, var(--primary) 50%, transparent); transform: translateY(-1px); }
+    a.cta:active { transform: translateY(1px); }
+    .cta-note { font-size: 12px; color: var(--ink-3); margin-top: 14px; animation-delay: .3s; }
+
+    .foot {
+      margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 7px;
+      font-size: 11px; color: var(--ink-3); letter-spacing: .05em; animation-delay: .36s;
+    }
+    .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 6px var(--primary); }
+
+    @media (max-width: 540px) {
+      .feats { grid-template-columns: 1fr 1fr; }
+      .stage { padding-top: 64px; }
+    }
+  </style>
+</head>
+<body>
+  <div class="aurora"><span class="blob b1"></span><span class="blob b2"></span><span class="blob b3"></span></div>
+
+  <div class="lang" role="group" aria-label="Language">
+    <button type="button" id="lang-vi" class="on">VI</button>
+    <button type="button" id="lang-en">EN</button>
+  </div>
+
+  <main class="stage">
+    <div class="mark" aria-label="Yana">
+      <img src="/logo.png" alt="" width="52" height="52" style="display:block" />
+    </div>
+
+    <h1 id="title">Gặp <span class="name">Yana</span> — trợ lý AI của bạn</h1>
+    <p class="tagline" id="tagline">
+      Một cuộc trò chuyện, nhiều bàn tay. Yana định tuyến từng yêu cầu đến đúng mô hình,
+      ghi nhớ những gì quan trọng, và mọi hành động đều được YAMTAM giám sát an toàn.
+    </p>
+
+    <div class="feats">
+      <div class="feat">
+        <div class="ico">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>
+        </div>
+        <div class="t" id="f1t">Chat đa mô hình</div>
+        <div class="d" id="f1d">Claude, GPT, Gemini, Groq… — một khung chat, tự chọn đúng mô hình</div>
+      </div>
+      <div class="feat">
+        <div class="ico">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><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"/></svg>
+        </div>
+        <div class="t" id="f2t">Nhiệm vụ</div>
+        <div class="d" id="f2d">Giao mục tiêu, Yana lập kế hoạch và theo dõi đến khi xong</div>
+      </div>
+      <div class="feat">
+        <div class="ico">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><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"/></svg>
+        </div>
+        <div class="t" id="f3t">Vườn ký ức</div>
+        <div class="d" id="f3d">Ghi nhớ điều quan trọng về bạn — lưu cục bộ, có mã hóa</div>
+      </div>
+      <div class="feat">
+        <div class="ico">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>
+        </div>
+        <div class="t" id="f4t">An toàn YAMTAM</div>
+        <div class="d" id="f4d">Mọi lệnh gọi đi qua lớp giám sát — chặn trước khi gây hại</div>
+      </div>
+    </div>
+
+    <div class="ctas">
+      <a class="cta" href="/login.html" id="cta">
+        <span id="cta-text">Bắt đầu</span>
+        <svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10h12m-5-5 5 5-5 5"/></svg>
+      </a>
+    </div>
+    <p class="cta-note" id="cta-note">Chạy trên máy bạn · Dùng API key của bạn · Không tài khoản đám mây</p>
+
+    <div class="foot"><span class="dot"></span> YAMTAM ENGINE · local &amp; private</div>
+  </main>
+
+  <script>
+    'use strict';
+    var lang = localStorage.getItem('yana.login.lang') || 'vi';
+    var $ = function (id) { return document.getElementById(id); };
+
+    var T = {
+      vi: {
+        title: 'Gặp <span class="name">Yana</span> — trợ lý AI của bạn',
+        tagline: 'Một cuộc trò chuyện, nhiều bàn tay. Yana định tuyến từng yêu cầu đến đúng mô hình, ghi nhớ những gì quan trọng, và mọi hành động đều được YAMTAM giám sát an toàn.',
+        f1t: 'Chat đa mô hình',  f1d: 'Claude, GPT, Gemini, Groq… — một khung chat, tự chọn đúng mô hình',
+        f2t: 'Nhiệm vụ',          f2d: 'Giao mục tiêu, Yana lập kế hoạch và theo dõi đến khi xong',
+        f3t: 'Vườn ký ức',        f3d: 'Ghi nhớ điều quan trọng về bạn — lưu cục bộ, có mã hóa',
+        f4t: 'An toàn YAMTAM',    f4d: 'Mọi lệnh gọi đi qua lớp giám sát — chặn trước khi gây hại',
+        ctaSetup: 'Bắt đầu', ctaLogin: 'Đăng nhập',
+        note: 'Chạy trên máy bạn · Dùng API key của bạn · Không tài khoản đám mây',
+      },
+      en: {
+        title: 'Meet <span class="name">Yana</span> — your AI assistant',
+        tagline: 'One conversation, many hands. Yana routes every request to the right model, remembers what matters, and every action is supervised by YAMTAM.',
+        f1t: 'Multi-model chat',  f1d: 'Claude, GPT, Gemini, Groq… — one chat, the right model picked for you',
+        f2t: 'Missions',          f2d: 'Give a goal — Yana plans the tasks and tracks them to done',
+        f3t: 'Memory Garden',     f3d: 'Remembers what matters about you — stored locally, encrypted',
+        f4t: 'YAMTAM safety',     f4d: 'Every call passes a supervision layer — blocked before harm',
+        ctaSetup: 'Get started', ctaLogin: 'Sign in',
+        note: 'Runs on your machine · Your own API keys · No cloud account',
+      },
+    };
+
+    var isSetUp = false;
+
+    function applyLang() {
+      var d = T[lang];
+      document.documentElement.lang = lang;
+      $('lang-vi').classList.toggle('on', lang === 'vi');
+      $('lang-en').classList.toggle('on', lang === 'en');
+      $('title').innerHTML = d.title;
+      $('tagline').textContent = d.tagline;
+      for (var i = 1; i <= 4; i++) {
+        $('f' + i + 't').textContent = d['f' + i + 't'];
+        $('f' + i + 'd').textContent = d['f' + i + 'd'];
+      }
+      $('cta-text').textContent = isSetUp ? d.ctaLogin : d.ctaSetup;
+      $('cta-note').textContent = d.note;
+    }
+
+    $('lang-vi').addEventListener('click', function () { lang = 'vi'; localStorage.setItem('yana.login.lang', lang); applyLang(); });
+    $('lang-en').addEventListener('click', function () { lang = 'en'; localStorage.setItem('yana.login.lang', lang); applyLang(); });
+
+    // Already signed in → straight to the app; password exists → CTA says "Sign in"
+    fetch('/api/auth/status')
+      .then(function (r) { return r.json(); })
+      .then(function (d) {
+        if (d.authed) { location.replace('/'); return; }
+        isSetUp = d.setup;
+        applyLang();
+      })
+      .catch(function () {});
+
+    applyLang();
+  </script>
+</body>
+</html>

package/memory.js

@@ -0,0 +1,112 @@
+'use strict';
+// Yana Memory — file-backed long-term memory (.yana/memory.json).
+//
+// ChatGPT-style mechanism: the model decides what is worth keeping. When a
+// normal (non-confidential) chat turn contains a durable fact, preference,
+// or decision, the model ends its reply with a `MEMORY: <sentence>` line.
+// The client strips that line from the display and POSTs it here; every
+// later normal turn gets the saved memories attached to the system prompt.
+//
+// Rule 68: confidential/sovereign turns never read from or write to this
+// store — the gating lives in server.js handleApiChat (tier check).
+
+const fs   = require('fs');
+const path = require('path');
+
+// Same persistent data dir as auth.js/missions.js — survives redeploys.
+const DATA_DIR = process.env.YANA_DATA_DIR || path.join(require('os').homedir(), '.yana');
+const FILE     = path.join(DATA_DIR, 'memory.json');
+
+const MAX_MEMORIES = 200;   // hard storage quota — oldest entries fall off the end
+const MAX_LEN      = 300;   // one concise sentence, not a transcript
+const TTL_DAYS     = Math.max(1, Number(process.env.YANA_MEMORY_TTL_DAYS) || 90);
+
+// Saved memories are re-injected into future system prompts, which makes the
+// store a prompt-injection persistence vector (OWASP LLM01). Reject entries
+// that look like instructions rather than facts about the user.
+const INJECTION_PATTERNS = [
+  /ignore\s+(?:(?:all|previous|prior|the|above|your)\s+)*(instructions|rules)/i,
+  /you\s+are\s+now/i,
+  /new\s+instructions/i,
+  /system\s*:/i,
+  /\[INST\]/i,
+  /<\|im_start\|>/i,
+];
+
+function load() {
+  try { return JSON.parse(fs.readFileSync(FILE, 'utf8')); } catch (_) { return []; }
+}
+
+function save(memories) {
+  fs.mkdirSync(DATA_DIR, { recursive: true });
+  fs.writeFileSync(FILE, JSON.stringify(memories, null, 2));
+}
+
+// Returns the stored entry, or null with a reason when the text is rejected.
+function add(text) {
+  if (typeof text !== 'string') return { error: 'Invalid text' };
+  // one line, printable characters only
+  const clean = text.replace(/[\r\n]+/g, ' ').replace(/[\x00-\x1f\x7f]/g, '').trim().slice(0, MAX_LEN);
+  if (!clean) return { error: 'Empty memory' };
+  if (INJECTION_PATTERNS.some(p => p.test(clean))) return { error: 'Rejected: instruction-like content' };
+
+  const memories = load();
+  const lower = clean.toLowerCase();
+  if (memories.some(m => m.text.toLowerCase() === lower)) return { error: 'Duplicate' };
+
+  const entry = { id: 'ym' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6), text: clean, ts: Date.now() };
+  memories.unshift(entry);
+  save(memories.slice(0, MAX_MEMORIES));
+  return { memory: entry };
+}
+
+// Periodic cleanup: drop entries older than TTL_DAYS and enforce the quota.
+// server.js runs this at boot and once a day; add() keeps the cap on write.
+// Returns how many entries were removed.
+function prune() {
+  const cutoff   = Date.now() - TTL_DAYS * 86400 * 1000;
+  const memories = load();
+  const next     = memories.filter(m => m.ts >= cutoff).slice(0, MAX_MEMORIES);
+  if (next.length !== memories.length) save(next);
+  return memories.length - next.length;
+}
+
+function remove(id) {
+  const memories = load();
+  const next = memories.filter(m => m.id !== id);
+  if (next.length === memories.length) return false;
+  save(next);
+  return true;
+}
+
+// Newest n memories as a plain-text block for the system prompt, or null.
+// Wrapped as data, not instructions — recalled text must never steer the model.
+function contextBlock(n) {
+  const memories = load().slice(0, n || 12);
+  if (!memories.length) return null;
+  return memories.map(m => '- ' + m.text).join('\n');
+}
+
+// ── HTTP handlers ─────────────────────────────────────────────────────────────
+function json(res, status, obj) {
+  res.writeHead(status, { 'Content-Type': 'application/json' });
+  res.end(JSON.stringify(obj));
+}
+
+function handleList(req, res) {
+  json(res, 200, { memories: load() });
+}
+
+function handleAdd(req, res, body) {
+  const result = add(body && body.text);
+  if (result.error) { json(res, 400, { error: result.error }); return; }
+  json(res, 200, { ok: true, memory: result.memory });
+}
+
+function handleDelete(req, res, body) {
+  const id = body && body.id;
+  if (typeof id !== 'string' || !remove(id)) { json(res, 404, { error: 'Not found' }); return; }
+  json(res, 200, { ok: true });
+}
+
+module.exports = { add, remove, load, prune, contextBlock, handleList, handleAdd, handleDelete, MAX_MEMORIES, MAX_LEN, TTL_DAYS };