diff --git a/index.html b/index.html
index 495149b..bfafc91 100644
--- a/index.html
+++ b/index.html
@@ -1,805 +1,185 @@
 <!DOCTYPE html>
-<html lang="vi" class="dark">
+<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>RKIX3 AI - Lập trình, Code, Build, Tự động hoá</title>
-    <meta name="description" content="RKIX3 AI Studio: web app lập trình, build, tự động hoá và điều phối CLI/mobile workflow.">
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    colors: {
-                        rkixDark: '#02050c',
-                        rkixSidebar: '#050915',
-                        rkixBorder: '#102142',
-                        rkixBlue: '#0052cc',
-                        rkixLightBlue: '#00d2ff',
-                        rkixTextGray: '#52525b'
-                    },
-                    boxShadow: {
-                        rkix: '0 0 42px rgba(0, 82, 204, 0.18)'
-                    }
-                }
-            }
-        }
-    </script>
-    <script src="https://unpkg.com/lucide@latest"></script>
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
-
-        body {
-            font-family: 'Inter', sans-serif;
-            background-color: #02050c;
-            background-image:
-                linear-gradient(rgba(0, 210, 255, 0.025) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(0, 210, 255, 0.025) 1px, transparent 1px),
-                radial-gradient(circle at 50% 24%, rgba(0, 82, 204, 0.22) 0%, transparent 58%),
-                radial-gradient(circle at 92% 8%, rgba(0, 210, 255, 0.11) 0%, transparent 28%);
-            background-size: 42px 42px, 42px 42px, auto, auto;
-            background-attachment: fixed;
-        }
-
-        .square-flat { border-radius: 0 !important; }
-        .no-scrollbar::-webkit-scrollbar { display: none; }
-        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
-        .scanline::after {
-            content: '';
-            position: absolute;
-            inset: 0;
-            pointer-events: none;
-            background: linear-gradient(180deg, transparent, rgba(0, 210, 255, 0.055), transparent);
-            transform: translateY(-100%);
-            animation: scan 4.2s linear infinite;
-        }
-        .animate-fade-in { animation: fadeIn 0.42s ease-out both; }
-        .terminal-caret::after { content: '▌'; color: #00d2ff; animation: blink 1s steps(1) infinite; }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-        @keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
-        @keyframes blink { 50% { opacity: 0; } }
-    </style>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>RKIX3 — Developer Workspace Platform</title>
+  <meta name="description" content="RKIX3 is a dark-first developer workspace with AI tools, project management, code studio, build center, library hub, integrations, and profile settings." />
+  <style>
+    :root {
+      color-scheme: dark;
+      --bg: #050712; --panel: rgba(12,18,35,.82); --panel-2: rgba(20,29,52,.72);
+      --line: rgba(255,255,255,.11); --line-strong: rgba(0,210,255,.38);
+      --text: #f7fbff; --muted: #a5afc2; --faint: #657189;
+      --cyan: #00d2ff; --blue: #4f7cff; --violet: #8b5cf6; --lime: #9cff6e; --amber: #fbbf24;
+      --shadow: 0 24px 80px rgba(0,0,0,.36); --radius: 28px;
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0; min-height: 100vh; color: var(--text);
+      background:
+        radial-gradient(circle at top left, rgba(0,210,255,.18), transparent 34rem),
+        radial-gradient(circle at 82% 8%, rgba(139,92,246,.22), transparent 31rem),
+        linear-gradient(135deg, #050712 0%, #09101e 55%, #04060d 100%);
+      overflow-x: hidden;
+    }
+    body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 42px 42px; }
+    button, input { font: inherit; }
+    button { cursor: pointer; }
+    .app { position: relative; min-height: 100vh; }
+    .sidebar { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 20; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); background: rgba(8,13,27,.86); backdrop-filter: blur(20px); }
+    .brand { border: 0; background: transparent; padding: 0; display: flex; align-items: center; margin-bottom: 28px; }
+    .brand img { height: 52px; filter: drop-shadow(0 0 22px rgba(0,210,255,.45)); }
+    .new-session { width: 100%; padding: 14px; margin-bottom: 18px; border: 1px solid rgba(0,210,255,.24); border-radius: 20px; color: var(--text); background: rgba(0,210,255,.09); text-align: left; font-weight: 800; }
+    .nav { display: grid; gap: 8px; }
+    .nav-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 13px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 18px; transition: .2s ease; text-align: left; }
+    .nav-btn:hover, .nav-btn.active { color: white; border-color: var(--line-strong); background: linear-gradient(90deg, rgba(79,124,255,.22), rgba(0,210,255,.08)); }
+    .capacity { border: 1px solid var(--line); border-radius: 24px; padding: 16px; background: rgba(255,255,255,.04); color: var(--muted); font-size: 12px; }
+    .bar { height: 8px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.1); margin: 10px 0; }
+    .bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
+    main { margin-left: 280px; min-height: 100vh; padding-bottom: 40px; }
+    header { position: relative; z-index: 10; padding: 18px 32px; border-bottom: 1px solid var(--line); background: rgba(8,13,27,.78); backdrop-filter: blur(18px); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
+    .eyebrow { margin: 0 0 4px; color: var(--cyan); font-size: 11px; font-weight: 900; letter-spacing: .32em; text-transform: uppercase; }
+    h1, h2, h3, h4, p { margin-top: 0; }
+    h1 { margin: 0; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; }
+    .top-actions { display: flex; gap: 12px; align-items: center; }
+    .branch { border: 1px solid var(--line); border-radius: 16px; background: rgba(0,0,0,.22); color: var(--muted); padding: 10px 12px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; }
+    .shell { max-width: 1500px; padding: 28px 32px; margin: 0 auto; display: grid; gap: 22px; }
+    .page { display: none; animation: rise .28s ease-out both; } .page.active { display: grid; gap: 22px; }
+    @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+    .card { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, var(--panel), rgba(10,16,32,.66)); box-shadow: var(--shadow); backdrop-filter: blur(18px); padding: 24px; }
+    .hero { min-height: 560px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr); gap: 22px; }
+    .hero-copy { position: relative; overflow: hidden; padding: 56px 36px 36px; display: flex; flex-direction: column; justify-content: flex-start; }
+    .hero-copy::after { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 999px; background: rgba(0,210,255,.13); filter: blur(14px); }
+    .hero h2 { position: relative; z-index: 1; margin: 14px 0 18px; font-size: clamp(38px, 5.4vw, 66px); line-height: 1.02; letter-spacing: -.07em; }
+    .lead { color: var(--muted); font-size: 18px; line-height: 1.65; max-width: 760px; }
+    .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
+    .btn { border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.05); color: var(--text); padding: 12px 16px; font-weight: 900; transition: .2s ease; }
+    .btn:hover { transform: translateY(-1px); border-color: var(--line-strong); }
+    .btn.primary { color: #06111c; background: var(--cyan); border-color: var(--cyan); }
+    .badge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(0,210,255,.25); border-radius: 999px; background: rgba(0,210,255,.1); color: var(--cyan); padding: 6px 10px; font-size: 11px; font-weight: 900; }
+    .grid { display: grid; gap: 16px; } .cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
+    .metric strong { display: block; margin-top: 8px; font-size: 34px; letter-spacing: -.05em; } .muted { color: var(--muted); } .faint { color: var(--faint); }
+    .project, .mini-card, .task { border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.04); padding: 18px; transition: .2s ease; }
+    .project:hover, .mini-card:hover, .task:hover { border-color: var(--line-strong); transform: translateY(-1px); }
+    .code { font-family: "JetBrains Mono", ui-monospace, monospace; white-space: pre-wrap; color: #c8d7ff; background: #050813; border-radius: 0 0 var(--radius) var(--radius); padding: 22px; min-height: 520px; overflow: auto; line-height: 1.7; }
+    .window-head { border-bottom: 1px solid var(--line); padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; }
+    .dots { display: flex; gap: 7px; } .dots span { width: 12px; height: 12px; border-radius: 99px; display: block; }
+    .chat { height: 520px; overflow: auto; display: grid; gap: 14px; align-content: start; }
+    .bubble { max-width: 76%; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.04); padding: 16px; } .bubble.user { justify-self: end; border-color: rgba(0,210,255,.35); background: rgba(0,210,255,.1); }
+    .chat-input { display: flex; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; } input { width: 100%; border: 1px solid var(--line); border-radius: 18px; background: rgba(0,0,0,.26); color: var(--text); padding: 13px 15px; outline: none; } input:focus { border-color: var(--line-strong); }
+    .kanban { grid-template-columns: repeat(4, minmax(220px,1fr)); align-items: start; overflow-x: auto; } .lane { border: 1px solid var(--line); border-radius: 24px; background: rgba(0,0,0,.18); padding: 14px; min-height: 360px; }
+    .roadmap-row { display: grid; grid-template-columns: 170px 1fr 80px; gap: 14px; align-items: center; margin: 12px 0; }
+    .bottom-nav, .drawer, .mobile-menu { display: none; }
+    @media (max-width: 1100px) { .cols-4 { grid-template-columns: repeat(2,1fr); } .cols-3 { grid-template-columns: repeat(2,1fr); } .hero { grid-template-columns: 1fr; } }
+    @media (max-width: 860px) { .sidebar { display:none; } main { margin-left:0; } header { padding: 15px; } .shell { padding: 16px; } .top-actions { display:none; } .mobile-menu { display:block; } .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr; } .hero-copy { padding: 24px; } .bottom-nav { display:grid; position:fixed; bottom:0; inset-inline:0; z-index:30; grid-template-columns:repeat(5,1fr); gap:4px; padding:8px; border-top:1px solid var(--line); background:rgba(8,13,27,.92); backdrop-filter:blur(18px); } .bottom-nav .nav-btn { justify-content:center; font-size:11px; padding:10px 4px; } .drawer.open { display:block; position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.68); } .drawer-panel { width:min(84vw,320px); height:100%; padding:20px; background:rgba(8,13,27,.95); border-right:1px solid var(--line); } }
+
+    /* Mobile app polish: compact controls + RKIX3 smoky color depth */
+    .app::before, .app::after {
+      content: "";
+      position: fixed;
+      pointer-events: none;
+      border-radius: 999px;
+      filter: blur(52px);
+      opacity: .42;
+      z-index: 0;
+    }
+    .app::before { width: 34vw; height: 34vw; left: 22%; top: 10%; background: rgba(0,210,255,.22); }
+    .app::after { width: 42vw; height: 42vw; right: -14%; top: 16%; background: rgba(139,92,246,.18); }
+    header, .shell, .sidebar, .drawer, .bottom-nav { position: relative; z-index: 1; }
+    @media (max-width: 860px) {
+      body {
+        background:
+          radial-gradient(circle at 18% 8%, rgba(0,210,255,.20), transparent 18rem),
+          radial-gradient(circle at 78% 12%, rgba(139,92,246,.22), transparent 19rem),
+          radial-gradient(circle at 50% 88%, rgba(79,124,255,.12), transparent 20rem),
+          linear-gradient(145deg, #040712 0%, #07111f 48%, #03050c 100%);
+      }
+      body::before { opacity: .32; background-size: 34px 34px; }
+      .app::before { width: 240px; height: 240px; left: -58px; top: 148px; opacity: .34; }
+      .app::after { width: 280px; height: 280px; right: -96px; top: 76px; opacity: .34; }
+      main { padding-bottom: 76px; }
+      header { padding: 14px 18px; background: rgba(7,12,27,.82); }
+      header > .row { flex-wrap: nowrap; gap: 12px; }
+      .eyebrow { font-size: 10px; letter-spacing: .28em; margin-bottom: 3px; }
+      h1 { font-size: 25px; line-height: 1.06; }
+      h2 { font-size: 25px; line-height: 1.1; margin-bottom: 12px; }
+      h3 { font-size: 18px; line-height: 1.15; }
+      p { line-height: 1.45; }
+      .shell { padding: 14px; gap: 14px; }
+      .page.active { gap: 14px; }
+      .card { border-radius: 22px; padding: 17px; background: linear-gradient(145deg, rgba(17,24,43,.74), rgba(6,11,24,.62)); box-shadow: 0 18px 54px rgba(0,0,0,.30); }
+      .hero { min-height: auto; gap: 14px; }
+      .hero-copy { padding: 22px 18px; }
+      .hero h2 { font-size: clamp(34px, 12vw, 46px); line-height: .98; letter-spacing: -.055em; margin: 10px 0 14px; }
+      .lead { font-size: 15px; line-height: 1.55; }
+      .row { gap: 9px; }
+      .btn { border-radius: 14px; padding: 9px 12px; font-size: 13px; line-height: 1; }
+      .mobile-menu { display: grid; place-items: center; width: 46px; height: 46px; min-width: 46px; padding: 0; font-size: 22px; border-radius: 15px; background: rgba(255,255,255,.055); }
+      .badge { padding: 4px 8px; font-size: 10px; }
+      .grid { gap: 12px; }
+      .page > .grid[style], #code > .grid[style] { grid-template-columns: 1fr !important; }
+      .mini-card, .project, .task { border-radius: 18px; padding: 13px 14px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); }
+      .mini-card h2, .mini-card h3, .project h3, .task h4 { margin-bottom: 7px; }
+      .mini-card p, .project p, .task p, .muted { font-size: 13px; }
+      .metric strong { font-size: 28px; }
+      .chat { height: min(52vh, 430px); gap: 10px; }
+      .bubble { max-width: 88%; border-radius: 18px; padding: 12px; font-size: 13px; }
+      .chat-input { gap: 8px; padding-top: 12px; }
+      input { border-radius: 14px; padding: 10px 12px; font-size: 13px; }
+      .code { min-height: 360px; padding: 14px; font-size: 12px; line-height: 1.55; border-radius: 0 0 20px 20px; }
+      .window-head { padding: 14px; align-items: flex-start; }
+      .kanban { grid-template-columns: 1fr; overflow-x: visible; }
+      .lane { min-height: auto; border-radius: 18px; padding: 12px; }
+      .roadmap-row { grid-template-columns: 1fr; gap: 6px; margin: 10px 0 14px; }
+      .drawer-panel { width: min(78vw, 300px); padding: 18px; background: rgba(6,10,23,.94); backdrop-filter: blur(18px); }
+      .drawer-panel .nav-btn { padding: 10px 12px; border-radius: 15px; font-size: 14px; }
+      .bottom-nav { min-height: 58px; padding: 6px 8px; gap: 3px; background: rgba(5,9,20,.90); }
+      .bottom-nav .nav-btn { min-width: 0; gap: 4px; padding: 8px 3px; border-radius: 14px; font-size: 10px; line-height: 1; }
+      .bottom-nav .nav-btn b { font-size: 12px; }
+      .bottom-nav .nav-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    }
+  </style>
 </head>
-<body class="text-zinc-200 min-h-screen flex flex-col overflow-x-hidden relative select-none">
-
-    <div class="fixed top-4 right-36 z-50 hidden lg:flex items-center bg-zinc-950 border border-zinc-800 p-1 square-flat shadow-2xl">
-        <button onclick="switchViewMode('desktop')" id="pcViewBtn" class="px-3 py-1 text-[9px] font-bold uppercase square-flat bg-blue-600 text-white transition-all">Bản PC</button>
-        <button onclick="switchViewMode('mobile')" id="moViewBtn" class="px-3 py-1 text-[9px] font-bold uppercase square-flat text-zinc-400 hover:text-white transition-all">Bản Mobile</button>
-    </div>
-
-    <div id="appShell" class="flex flex-1 w-full min-h-screen relative z-10 transition-all duration-300">
-        <aside id="sidebar" class="fixed inset-y-0 left-0 w-[270px] bg-rkixSidebar border-r border-zinc-900/60 p-4 flex flex-col justify-between transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-out z-50 backdrop-blur-xl">
-            <div class="flex flex-col gap-6">
-                <div class="flex items-center justify-between">
-                    <div class="w-[170px] h-[45px] cursor-pointer flex items-center justify-start overflow-hidden" onclick="goHome()">
-                        <img src="1780136894650-Photoroom.png" alt="RKIX3 Logo" class="h-full w-auto object-contain object-left drop-shadow-[0_0_12px_rgba(0,210,255,0.35)]">
-                    </div>
-                    <button onclick="setMobileSidebar(false)" class="p-1.5 text-zinc-500 hover:text-white md:hidden hover:bg-zinc-900 square-flat transition-all">
-                        <i data-lucide="x" class="w-5 h-5"></i>
-                    </button>
-                </div>
-
-                <button onclick="startFreshChat()" class="w-full flex items-center gap-3 px-4 py-3 bg-[#081326] hover:bg-[#0d1f3d] border border-blue-900/80 text-white square-flat text-xs font-semibold transition-all">
-                    <i data-lucide="message-square" class="w-4.5 h-4.5 text-blue-500"></i>
-                    <span>Đoạn chat mới</span>
-                </button>
-
-                <nav class="space-y-1">
-                    <button onclick="menuCommand('Tìm kiếm')" class="w-full flex items-center gap-3.5 px-3 py-2 text-zinc-400 hover:text-zinc-100 hover:bg-zinc-900/30 square-flat text-xs font-medium text-left transition-all">
-                        <i data-lucide="search" class="w-4.5 h-4.5 text-zinc-500"></i><span>Tìm kiếm đoạn chat</span>
-                    </button>
-                    <button onclick="menuCommand('Thư viện')" class="w-full flex items-center gap-3.5 px-3 py-2 text-zinc-400 hover:text-zinc-100 hover:bg-zinc-900/30 square-flat text-xs font-medium text-left transition-all">
-                        <div class="flex gap-0.5 text-zinc-500 font-bold text-xs select-none"><span>/</span><span>/</span><span>/</span><span>\</span></div><span>Thư viện</span>
-                    </button>
-                    <button onclick="menuCommand('Tạo dự án')" class="w-full flex items-center justify-between px-3 py-2 text-zinc-400 hover:text-zinc-100 hover:bg-zinc-900/30 square-flat text-xs font-medium text-left transition-all">
-                        <div class="flex items-center gap-3.5"><i data-lucide="folder" class="w-4.5 h-4.5 text-zinc-500"></i><span>Dự án</span></div><i data-lucide="plus" class="w-3.5 h-3.5 text-zinc-600"></i>
-                    </button>
-                    <button onclick="menuCommand('Ứng dụng')" class="w-full flex items-center gap-3.5 px-3 py-2 text-zinc-400 hover:text-zinc-100 hover:bg-zinc-900/30 square-flat text-xs font-medium text-left transition-all">
-                        <i data-lucide="layout-grid" class="w-4.5 h-4.5 text-zinc-500"></i><span>Ứng dụng</span>
-                    </button>
-                    <button onclick="menuCommand('Codex')" class="w-full flex items-center justify-between px-3 py-2 text-zinc-400 hover:text-zinc-100 hover:bg-zinc-900/30 square-flat text-xs font-medium text-left transition-all">
-                        <div class="flex items-center gap-3.5"><i data-lucide="terminal" class="w-4.5 h-4.5 text-zinc-500"></i><span>Codex</span></div><i data-lucide="arrow-up-right" class="w-3.5 h-3.5 text-zinc-600"></i>
-                    </button>
-                    <button onclick="openCommandCenter()" class="w-full flex items-center gap-3.5 px-3 py-2 text-zinc-400 hover:text-zinc-100 hover:bg-zinc-900/30 square-flat text-xs font-medium text-left transition-all">
-                        <i data-lucide="command" class="w-4.5 h-4.5 text-zinc-500"></i><span>Command Center</span>
-                    </button>
-                </nav>
-
-                <div class="border border-zinc-900 bg-black/20 p-3 square-flat">
-                    <p class="text-[9px] font-black text-zinc-500 uppercase tracking-[0.22em] mb-3">Engine Stack</p>
-                    <div id="engineStatusList" class="space-y-2"></div>
-                </div>
-            </div>
-        </aside>
-
-        <div id="drawerOverlay" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 hidden" onclick="setMobileSidebar(false)"></div>
-
-        <main class="flex-1 flex flex-col min-h-screen md:pl-[270px] pb-16 md:pb-0 relative z-10">
-            <header class="flex items-center justify-between px-6 py-4 border-b border-zinc-900/80 bg-rkixDark/30 backdrop-blur-md">
-                <div class="flex items-center gap-3">
-                    <button onclick="setMobileSidebar(true)" class="md:hidden p-2 text-zinc-300 hover:text-white hover:bg-zinc-900 square-flat transition-all"><i data-lucide="menu" class="w-5 h-5"></i></button>
-                    <button onclick="menuCommand('Quét mô mạch')" class="p-2 text-zinc-400 hover:text-white hover:bg-zinc-900 square-flat transition-all"><i data-lucide="scan-face" class="w-4.5 h-4.5"></i></button>
-                    <div class="hidden md:flex items-center gap-2 text-[10px] uppercase tracking-widest text-zinc-500">
-                        <span class="w-2 h-2 bg-emerald-400 square-flat animate-pulse"></span>
-                        <span id="currentModeLabel">OpenAI GPT-5.5 Ready</span>
-                    </div>
-                </div>
-
-                <div class="flex items-center gap-3">
-                    <button onclick="openCommandCenter()" class="hidden sm:inline-flex px-4 py-1.5 text-xs text-zinc-400 hover:text-white bg-zinc-900/80 border border-zinc-800 square-flat transition-all">Lệnh nhanh</button>
-                    <button onclick="toggleApiSettingsModal()" class="px-4 py-1.5 text-xs text-zinc-400 hover:text-white bg-zinc-900/80 border border-zinc-800 square-flat transition-all">Mã API</button>
-                    <button onclick="menuCommand('Đăng nhập')" class="px-5 py-2 text-xs font-bold text-white bg-blue-700 hover:bg-blue-600 square-flat transition-all duration-300 active:scale-95 shadow-lg shadow-blue-950/20">Đăng nhập</button>
-                </div>
-            </header>
-
-            <div class="flex-1 flex flex-col justify-center max-w-6xl w-full mx-auto px-4 md:px-8 py-8">
-                <div id="brandCentral" class="text-center mb-8 flex flex-col items-center animate-fade-in">
-                    <div class="w-full max-w-[520px] cursor-pointer drop-shadow-[0_0_24px_rgba(0,210,255,0.22)] mb-2" onclick="goHome()">
-                        <img src="1780136894650-Photoroom.png" alt="RKIX3 Logo" class="w-full h-auto object-contain mx-auto">
-                    </div>
-                    <div class="grid grid-cols-2 md:grid-cols-4 gap-2 mb-6 w-full max-w-3xl">
-                        <div class="border border-zinc-900 bg-rkixSidebar/50 px-3 py-2 square-flat"><p class="text-[9px] text-zinc-500 uppercase">Model chủ lực</p><p class="text-xs font-bold text-white">GPT-5.5 / Gemini 2.5</p></div>
-                        <div class="border border-zinc-900 bg-rkixSidebar/50 px-3 py-2 square-flat"><p class="text-[9px] text-zinc-500 uppercase">Workflow</p><p class="text-xs font-bold text-white">Auth · Init · AI · DB · Deploy</p></div>
-                        <div class="border border-zinc-900 bg-rkixSidebar/50 px-3 py-2 square-flat"><p class="text-[9px] text-zinc-500 uppercase">Mobile CLI</p><p class="text-xs font-bold text-white">Termux-ready</p></div>
-                        <div class="border border-zinc-900 bg-rkixSidebar/50 px-3 py-2 square-flat"><p class="text-[9px] text-zinc-500 uppercase">Preview</p><p class="text-xs font-bold text-white">HTML live sandbox</p></div>
-                    </div>
-                    <h3 class="text-lg md:text-xl font-bold tracking-tight text-white mb-4 terminal-caret" id="welcomingText">Chúng ta nên bắt đầu từ đâu?</h3>
-                </div>
-
-                <section class="w-full max-w-3xl mx-auto mb-6">
-                    <div class="bg-rkixSidebar border border-rkixBorder p-3 square-flat shadow-rkix relative transition-all duration-300 focus-within:border-blue-500/80 scanline overflow-hidden">
-                        <textarea id="promptInput" rows="3" class="w-full bg-transparent text-sm text-zinc-100 placeholder-zinc-500 focus:outline-none resize-none leading-relaxed px-2 relative z-10" placeholder="Hỏi RKIX3: tạo web app, CLI OAuth loopback, API server, database schema, test, deploy..."></textarea>
-                        <div id="attachedFileBadge" class="hidden mx-2 mt-2 px-2 py-1 bg-blue-950/30 border border-blue-900/60 text-[10px] text-blue-200 square-flat"></div>
-                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mt-3 px-1 relative z-10">
-                            <div class="flex items-center gap-2">
-                                <input id="fileInput" type="file" class="hidden" accept=".txt,.md,.json,.js,.ts,.tsx,.jsx,.html,.css,.py,.go,.rs,.java,.kt,.swift,.php,.rb,.yml,.yaml,.toml,.env" onchange="handleFileAttach(event)">
-                                <button onclick="document.getElementById('fileInput').click()" class="w-8 h-8 flex items-center justify-center bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 text-zinc-400 hover:text-white square-flat transition-all active:scale-95" title="Đính kèm tệp"><i data-lucide="plus" class="w-4 h-4"></i></button>
-                                <select id="taskMode" class="h-8 bg-zinc-950 border border-zinc-800 text-[10px] text-zinc-300 px-2 square-flat focus:outline-none focus:border-blue-500">
-                                    <option value="code">Code Builder</option>
-                                    <option value="agent">Agent Workflow</option>
-                                    <option value="security">Security Review</option>
-                                    <option value="deploy">Deploy Plan</option>
-                                </select>
-                            </div>
-                            <div class="flex items-center gap-2 justify-end">
-                                <button id="micBtn" onclick="toggleVoiceRecording()" class="w-8 h-8 flex items-center justify-center bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 text-zinc-400 hover:text-white square-flat transition-all" title="Nhập giọng nói"><i data-lucide="mic" class="w-4 h-4"></i></button>
-                                <button onclick="runDemoBlueprint()" class="h-8 px-3 bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 text-[10px] font-bold text-zinc-300 hover:text-white square-flat transition-all">Demo</button>
-                                <button id="sendBtn" onclick="submitPromptToAI()" class="w-8 h-8 flex items-center justify-center bg-zinc-800 text-zinc-600 cursor-not-allowed border border-zinc-800 square-flat transition-all duration-300" disabled><i data-lucide="arrow-up" class="w-4 h-4"></i></button>
-                            </div>
-                        </div>
-                    </div>
-                    <p class="mt-2 text-[10px] text-zinc-600 text-center">Không đặt API key thật trong code public. Dùng key tạm ở modal hoặc backend proxy khi triển khai production.</p>
-                </section>
-
-                <section id="workspace" class="w-full max-w-4xl mx-auto mb-8 hidden animate-fade-in">
-                    <div class="bg-rkixSidebar border border-zinc-900 overflow-hidden square-flat shadow-2xl">
-                        <div class="flex items-center justify-between px-4 py-2.5 bg-zinc-950 border-b border-zinc-900">
-                            <div class="flex items-center gap-2"><span class="w-2 h-2 bg-blue-500 animate-pulse square-flat"></span><span class="text-[9px] font-bold text-zinc-400 uppercase tracking-widest">RKIX3 CORE ENGINE</span></div>
-                            <div class="flex items-center gap-1">
-                                <button onclick="copySourceCode()" class="p-1.5 text-zinc-400 hover:text-white hover:bg-zinc-900 square-flat transition-all" title="Copy mã nguồn"><i data-lucide="copy" class="w-4 h-4"></i></button>
-                                <button onclick="downloadOutput()" class="p-1.5 text-zinc-400 hover:text-white hover:bg-zinc-900 square-flat transition-all" title="Tải kết quả"><i data-lucide="download" class="w-4 h-4"></i></button>
-                                <button id="livePlayBtn" onclick="toggleOutputPreview()" class="p-1.5 text-zinc-400 hover:text-white hover:bg-zinc-900 square-flat transition-all hidden" title="Xem trước giao diện"><i data-lucide="play" class="w-4 h-4"></i></button>
-                            </div>
-                        </div>
-
-                        <div id="loader" class="hidden flex flex-col items-center justify-center py-12 gap-4">
-                            <div class="w-9 h-9 border-2 border-blue-500 border-t-transparent animate-spin square-flat"></div>
-                            <div class="w-full max-w-sm space-y-2 px-6">
-                                <div class="h-1 bg-blue-950 overflow-hidden square-flat"><div id="progressBar" class="h-full bg-blue-500 w-1/4 transition-all duration-500"></div></div>
-                                <span id="loaderText" class="block text-center text-xs text-zinc-500 font-mono">RKIX3 đang lập trình cấu trúc...</span>
-                            </div>
-                        </div>
-
-                        <div class="p-4">
-                            <div id="resultMeta" class="hidden mb-3 grid grid-cols-2 md:grid-cols-4 gap-2 text-[10px]"></div>
-                            <pre id="outputCode" class="text-xs text-zinc-300 font-mono leading-relaxed overflow-x-auto whitespace-pre-wrap max-h-[440px] no-scrollbar"></pre>
-                            <iframe id="previewFrame" title="RKIX3 live preview" sandbox="allow-scripts allow-forms" class="w-full h-96 border border-zinc-900 bg-white hidden mt-3 square-flat"></iframe>
-                        </div>
-                    </div>
-                </section>
-
-                <section id="cardsGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 w-full max-w-6xl mx-auto">
-                    <div onclick="loadPromptSample('Lập trình')" class="p-5 bg-rkixSidebar/40 hover:bg-zinc-900/30 border border-zinc-900 hover:border-blue-900/50 square-flat cursor-pointer transition-all duration-300 group"><div class="w-10 h-10 bg-blue-600/10 flex items-center justify-center text-blue-400 mb-4 square-flat"><i data-lucide="code-2" class="w-5 h-5"></i></div><h4 class="text-xs font-bold text-white mb-1">Lập trình</h4><p class="text-[10px] text-zinc-500">Viết code, debug và tối ưu hệ thống</p></div>
-                    <div onclick="loadPromptSample('Build')" class="p-5 bg-rkixSidebar/40 hover:bg-zinc-900/30 border border-zinc-900 hover:border-blue-900/50 square-flat cursor-pointer transition-all duration-300 group"><div class="w-10 h-10 bg-blue-600/10 flex items-center justify-center text-blue-400 mb-4 square-flat"><i data-lucide="box" class="w-5 h-5"></i></div><h4 class="text-xs font-bold text-white mb-1">Build</h4><p class="text-[10px] text-zinc-500">Tạo UI/web app phẳng vuông góc</p></div>
-                    <div onclick="loadPromptSample('Tự động hoá')" class="p-5 bg-rkixSidebar/40 hover:bg-zinc-900/30 border border-zinc-900 hover:border-blue-900/50 square-flat cursor-pointer transition-all duration-300 group"><div class="w-10 h-10 bg-blue-600/10 flex items-center justify-center text-blue-400 mb-4 square-flat"><i data-lucide="settings" class="w-5 h-5"></i></div><h4 class="text-xs font-bold text-white mb-1">Tự động hoá</h4><p class="text-[10px] text-zinc-500">Auth CLI, GitHub, CI, deploy</p></div>
-                    <div onclick="loadPromptSample('AI thông minh')" class="p-5 bg-rkixSidebar/40 hover:bg-zinc-900/30 border border-zinc-900 hover:border-blue-900/50 square-flat cursor-pointer transition-all duration-300 group"><div class="w-10 h-10 bg-blue-600/10 flex items-center justify-center text-blue-400 mb-4 square-flat"><i data-lucide="bot" class="w-5 h-5"></i></div><h4 class="text-xs font-bold text-white mb-1">AI thông minh</h4><p class="text-[10px] text-zinc-500">GPT-5.5, Gemini, context file</p></div>
-                    <div onclick="loadPromptSample('CLI OAuth')" class="p-5 bg-rkixSidebar/40 hover:bg-zinc-900/30 border border-zinc-900 hover:border-blue-900/50 square-flat cursor-pointer transition-all duration-300 group"><div class="w-10 h-10 bg-blue-600/10 flex items-center justify-center text-blue-400 mb-4 square-flat"><i data-lucide="key-round" class="w-5 h-5"></i></div><h4 class="text-xs font-bold text-white mb-1">CLI OAuth</h4><p class="text-[10px] text-zinc-500">Local loopback Termux flow</p></div>
-                    <div onclick="loadPromptSample('Database')" class="p-5 bg-rkixSidebar/40 hover:bg-zinc-900/30 border border-zinc-900 hover:border-blue-900/50 square-flat cursor-pointer transition-all duration-300 group"><div class="w-10 h-10 bg-blue-600/10 flex items-center justify-center text-blue-400 mb-4 square-flat"><i data-lucide="database" class="w-5 h-5"></i></div><h4 class="text-xs font-bold text-white mb-1">Database</h4><p class="text-[10px] text-zinc-500">Supabase/Neon schema + env</p></div>
-                </section>
-            </div>
-        </main>
-
-        <nav id="mobileBottomBar" class="md:hidden fixed bottom-0 left-0 right-0 h-16 bg-rkixSidebar border-t border-zinc-900 flex items-center justify-around px-4 z-40 backdrop-blur">
-            <button onclick="goHome()" class="flex flex-col items-center gap-1 text-blue-500"><i data-lucide="home" class="w-5 h-5"></i><span class="text-[9px] font-bold">Trang chủ</span></button>
-            <button onclick="openCommandCenter()" class="flex flex-col items-center gap-1 text-zinc-500 hover:text-white"><i data-lucide="command" class="w-5 h-5"></i><span class="text-[9px] font-bold">Lệnh</span></button>
-            <button onclick="menuCommand('Dự án')" class="flex flex-col items-center gap-1 text-zinc-500 hover:text-white"><i data-lucide="folder" class="w-5 h-5"></i><span class="text-[9px] font-bold">Dự án</span></button>
-            <button onclick="menuCommand('Ứng dụng')" class="flex flex-col items-center gap-1 text-zinc-500 hover:text-white"><i data-lucide="layout-grid" class="w-5 h-5"></i><span class="text-[9px] font-bold">Ứng dụng</span></button>
-            <button onclick="toggleApiSettingsModal()" class="flex flex-col items-center gap-1 text-zinc-500 hover:text-white"><i data-lucide="settings" class="w-5 h-5"></i><span class="text-[9px] font-bold">Cài đặt</span></button>
-        </nav>
-    </div>
-
-    <div id="apiKeyModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
-        <div class="bg-rkixSidebar border border-zinc-800 w-full max-w-lg overflow-hidden square-flat shadow-2xl animate-fade-in">
-            <div class="px-5 py-3.5 bg-zinc-900 border-b border-zinc-800 flex items-center justify-between">
-                <h3 class="text-xs font-bold text-white uppercase tracking-wider flex items-center gap-2"><i data-lucide="key" class="w-4 h-4 text-blue-400"></i><span>Cổng API RKIX3</span></h3>
-                <button onclick="toggleApiSettingsModal()" class="p-1 text-zinc-400 hover:text-white hover:bg-zinc-800 square-flat"><i data-lucide="x" class="w-4.5 h-4.5"></i></button>
-            </div>
-            <div class="p-5 space-y-4">
-                <p class="text-[11px] text-zinc-400 leading-relaxed">Chọn provider AI. OpenAI dùng Responses API với GPT-5.5 cho coding/pro workflow; Gemini giữ làm lựa chọn phụ. Nếu không có key, RKIX3 chạy Demo Mode để sinh blueprint offline.</p>
-                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                    <div><label class="block text-[10px] font-bold text-zinc-500 uppercase mb-1.5">Provider</label><select id="providerSelect" class="w-full bg-zinc-950 border border-zinc-800 focus:border-blue-500 px-3 py-2 text-xs text-white focus:outline-none square-flat"><option value="openai">OpenAI Responses</option><option value="gemini">Google Gemini</option><option value="demo">Demo Offline</option></select></div>
-                    <div><label class="block text-[10px] font-bold text-zinc-500 uppercase mb-1.5">Model</label><input id="modelValue" class="w-full bg-zinc-950 border border-zinc-800 focus:border-blue-500 px-3 py-2 text-xs text-white focus:outline-none square-flat" placeholder="gpt-5.5"></div>
-                </div>
-                <div><label class="block text-[10px] font-bold text-zinc-500 uppercase mb-1.5">Mã API tạm thời</label><input id="apiKeyValue" type="password" class="w-full bg-zinc-950 border border-zinc-800 focus:border-blue-500 px-3 py-2 text-xs text-white focus:outline-none square-flat" placeholder="sk-... hoặc AIzaSy..."></div>
-                <div><label class="block text-[10px] font-bold text-zinc-500 uppercase mb-1.5">Base URL proxy tuỳ chọn</label><input id="baseUrlValue" class="w-full bg-zinc-950 border border-zinc-800 focus:border-blue-500 px-3 py-2 text-xs text-white focus:outline-none square-flat" placeholder="https://api.openai.com/v1 hoặc /api/ai"></div>
-                <div class="flex items-center justify-end gap-2 pt-2"><button onclick="toggleApiSettingsModal()" class="px-3 py-1.5 text-xs text-zinc-400 hover:text-white square-flat transition-all">Đóng</button><button onclick="saveAISettings()" class="px-4 py-1.5 text-xs bg-blue-600 hover:bg-blue-500 text-white font-semibold square-flat transition-all">Áp dụng</button></div>
-            </div>
-        </div>
-    </div>
-
-    <div id="commandModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
-        <div class="bg-rkixSidebar border border-zinc-800 w-full max-w-3xl overflow-hidden square-flat shadow-2xl animate-fade-in">
-            <div class="px-5 py-3.5 bg-zinc-900 border-b border-zinc-800 flex items-center justify-between">
-                <h3 class="text-xs font-bold text-white uppercase tracking-wider flex items-center gap-2"><i data-lucide="command" class="w-4 h-4 text-blue-400"></i><span>RKIX3 Command Center</span></h3>
-                <button onclick="openCommandCenter(false)" class="p-1 text-zinc-400 hover:text-white hover:bg-zinc-800 square-flat"><i data-lucide="x" class="w-4.5 h-4.5"></i></button>
-            </div>
-            <div id="commandGrid" class="p-5 grid grid-cols-1 md:grid-cols-2 gap-3"></div>
-        </div>
-    </div>
-
-    <div id="toast" class="fixed bottom-20 md:bottom-6 right-6 bg-zinc-900 border border-zinc-800 text-zinc-100 text-xs px-4 py-3 square-flat shadow-2xl flex items-center gap-2 transform translate-y-20 opacity-0 transition-all duration-300 z-50"><i data-lucide="info" id="toastIcon" class="w-4 h-4 text-blue-400"></i><span id="toastText">Hệ thống thông báo!</span></div>
-
-    <script>
-        lucide.createIcons();
-
-        const MODEL_DEFAULTS = {
-            openai: 'gpt-5.5',
-            gemini: 'gemini-2.5-flash',
-            demo: 'rkix3-demo-core'
-        };
-
-        const engineStack = [
-            { name: 'OpenAI', model: 'gpt-5.5', state: 'primary' },
-            { name: 'Gemini', model: '2.5 Flash', state: 'fallback' },
-            { name: 'Demo', model: 'offline', state: 'safe' }
-        ];
-
-        const workflowCommands = [
-            { key: 'auth', title: 'mycli auth <service>', icon: 'key-round', prompt: 'Viết script Node.js OAuth CLI Flow cho Termux: mở trình duyệt, chạy local loopback server, nhận callback, lưu token an toàn vào .env cho service GitHub/Supabase/OpenAI.' },
-            { key: 'init', title: 'mycli init <repo>', icon: 'folder-plus', prompt: 'Tạo CLI Node.js khởi tạo dự án: clone GitHub repo, cài dependencies, tạo .env mẫu, phát hiện framework và in hướng dẫn chạy trên Termux.' },
-            { key: 'ai', title: 'mycli ai <file> "task"', icon: 'bot', prompt: 'Thiết kế lệnh CLI đọc cây dự án, gom context file liên quan, gọi AI, hiển thị git diff xanh/đỏ, hỏi xác nhận rồi commit/push.' },
-            { key: 'db', title: 'mycli db setup', icon: 'database', prompt: 'Xây dựng lệnh cấp phát database Supabase/Neon qua API, lấy connection string, ghi vào .env, sinh migration SQL và test kết nối.' },
-            { key: 'deploy', title: 'mycli deploy', icon: 'rocket', prompt: 'Tạo lệnh deploy mobile-first: chạy test, commit, push GitHub, gọi Vercel/Netlify API, theo dõi build log, mở URL live bằng termux-open.' },
-            { key: 'rkix3', title: 'rkix3 full-stack blueprint', icon: 'cpu', prompt: 'Lập blueprint web app RKIX3 mạnh nhất: frontend, API proxy, auth, database, AI providers, queue, observability, security, CI/CD, mobile Termux workflow.' }
-        ];
-
-        let aiSettings = {
-            provider: localStorage.getItem('rkix_provider') || 'demo',
-            apiKey: '',
-            model: localStorage.getItem('rkix_model') || MODEL_DEFAULTS.demo,
-            baseUrl: localStorage.getItem('rkix_base_url') || ''
-        };
-        let isRecording = false;
-        let attachedContext = '';
-        let recognitionInstance = null;
-
-        const promptInput = document.getElementById('promptInput');
-        const sendBtn = document.getElementById('sendBtn');
-        const brandCentral = document.getElementById('brandCentral');
-        const workspace = document.getElementById('workspace');
-        const loader = document.getElementById('loader');
-        const outputCode = document.getElementById('outputCode');
-        const previewFrame = document.getElementById('previewFrame');
-        const livePlayBtn = document.getElementById('livePlayBtn');
-        const resultMeta = document.getElementById('resultMeta');
-        const loaderText = document.getElementById('loaderText');
-        const progressBar = document.getElementById('progressBar');
-        const currentModeLabel = document.getElementById('currentModeLabel');
-
-        function initialize() {
-            renderEngineStatus();
-            renderCommandCenter();
-            hydrateSettingsForm();
-            updateModeLabel();
-            promptInput.addEventListener('input', syncSendButton);
-            promptInput.addEventListener('keydown', (event) => {
-                if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
-                    submitPromptToAI();
-                }
-            });
-            syncSendButton();
-        }
-
-        function renderEngineStatus() {
-            const list = document.getElementById('engineStatusList');
-            list.innerHTML = engineStack.map(item => `
-                <div class="flex items-center justify-between gap-2 text-[10px]">
-                    <span class="text-zinc-400">${item.name}</span>
-                    <span class="px-2 py-0.5 border border-zinc-800 bg-zinc-950 text-blue-200 square-flat">${item.model}</span>
-                </div>
-            `).join('');
-        }
-
-        function renderCommandCenter() {
-            const commandGrid = document.getElementById('commandGrid');
-            commandGrid.innerHTML = workflowCommands.map(command => `
-                <button onclick="applyCommandPrompt('${command.key}')" class="text-left p-4 border border-zinc-900 hover:border-blue-800 bg-black/20 hover:bg-blue-950/20 square-flat transition-all">
-                    <div class="flex items-center gap-3 mb-2">
-                        <span class="w-8 h-8 bg-blue-600/10 text-blue-300 flex items-center justify-center square-flat"><i data-lucide="${command.icon}" class="w-4 h-4"></i></span>
-                        <span class="text-xs font-bold text-white">${command.title}</span>
-                    </div>
-                    <p class="text-[10px] text-zinc-500 leading-relaxed">${command.prompt}</p>
-                </button>
-            `).join('');
-            lucide.createIcons();
-        }
-
-        function hydrateSettingsForm() {
-            document.getElementById('providerSelect').value = aiSettings.provider;
-            document.getElementById('modelValue').value = aiSettings.model;
-            document.getElementById('baseUrlValue').value = aiSettings.baseUrl;
-        }
-
-        function updateModeLabel() {
-            const providerName = aiSettings.provider === 'openai' ? 'OpenAI' : aiSettings.provider === 'gemini' ? 'Gemini' : 'Demo';
-            currentModeLabel.textContent = `${providerName} ${aiSettings.model} Ready`;
-        }
-
-        function syncSendButton() {
-            if (promptInput.value.trim().length > 0) {
-                sendBtn.removeAttribute('disabled');
-                sendBtn.classList.remove('bg-zinc-800', 'text-zinc-600', 'cursor-not-allowed');
-                sendBtn.classList.add('bg-blue-600', 'text-white', 'hover:bg-blue-500');
-            } else {
-                sendBtn.setAttribute('disabled', 'true');
-                sendBtn.classList.add('bg-zinc-800', 'text-zinc-600', 'cursor-not-allowed');
-                sendBtn.classList.remove('bg-blue-600', 'text-white', 'hover:bg-blue-500');
-            }
-        }
-
-        function setMobileSidebar(isOpen) {
-            const sidebar = document.getElementById('sidebar');
-            const overlay = document.getElementById('drawerOverlay');
-            sidebar.classList.toggle('-translate-x-full', !isOpen);
-            overlay.classList.toggle('hidden', !isOpen);
-        }
-
-        function triggerToast(message, type = 'success') {
-            const toast = document.getElementById('toast');
-            const toastText = document.getElementById('toastText');
-            const toastIcon = document.getElementById('toastIcon');
-            toastText.textContent = message;
-            const iconMap = { error: 'alert-circle', warning: 'triangle-alert', success: 'check-circle-2' };
-            const colorMap = { error: 'text-rose-500', warning: 'text-amber-400', success: 'text-emerald-400' };
-            toastIcon.setAttribute('data-lucide', iconMap[type] || iconMap.success);
-            toastIcon.className = `w-4 h-4 ${colorMap[type] || colorMap.success}`;
-            lucide.createIcons();
-            toast.classList.remove('translate-y-20', 'opacity-0');
-            toast.classList.add('translate-y-0', 'opacity-100');
-            setTimeout(() => {
-                toast.classList.add('translate-y-20', 'opacity-0');
-                toast.classList.remove('translate-y-0', 'opacity-100');
-            }, 3200);
-        }
-
-        function toggleApiSettingsModal() {
-            document.getElementById('apiKeyModal').classList.toggle('hidden');
-            hydrateSettingsForm();
-        }
-
-        function saveAISettings() {
-            const provider = document.getElementById('providerSelect').value;
-            const apiKey = document.getElementById('apiKeyValue').value.trim();
-            const model = document.getElementById('modelValue').value.trim() || MODEL_DEFAULTS[provider];
-            const baseUrl = document.getElementById('baseUrlValue').value.trim();
-            aiSettings = { provider, apiKey, model, baseUrl };
-            localStorage.setItem('rkix_provider', provider);
-            localStorage.setItem('rkix_model', model);
-            localStorage.setItem('rkix_base_url', baseUrl);
-            updateModeLabel();
-            triggerToast('Đã cập nhật cổng AI RKIX3.');
-            toggleApiSettingsModal();
-        }
-
-        function openCommandCenter(forceOpen = true) {
-            document.getElementById('commandModal').classList.toggle('hidden', !forceOpen);
-            lucide.createIcons();
-        }
-
-        function applyCommandPrompt(key) {
-            const command = workflowCommands.find(item => item.key === key);
-            if (!command) return;
-            promptInput.value = command.prompt;
-            document.getElementById('taskMode').value = key === 'deploy' ? 'deploy' : key === 'ai' ? 'agent' : 'code';
-            promptInput.dispatchEvent(new Event('input'));
-            openCommandCenter(false);
-            promptInput.focus();
-            triggerToast(`Đã nạp lệnh: ${command.title}`);
-        }
-
-        function goHome() {
-            promptInput.value = '';
-            promptInput.dispatchEvent(new Event('input'));
-            workspace.classList.add('hidden');
-            brandCentral.classList.remove('scale-75', 'opacity-50');
-            previewFrame.classList.add('hidden');
-            resultMeta.classList.add('hidden');
-            triggerToast('Đã quay về trang chủ.');
-        }
-
-        function loadPromptSample(category) {
-            const samples = {
-                'Lập trình': 'Hãy tạo API Node.js kiểm tra DNS/HTTP health của rkix.com, có retry, timeout, JSON response và unit test.',
-                'Build': 'Thiết kế landing page RKIX3 dạng phẳng vuông góc bằng HTML/Tailwind, có hero, feature grid, pricing và CTA.',
-                'Tự động hoá': 'Lập trình workflow tự động đồng bộ file JSON local lên GitHub, tạo commit, push và ghi log lỗi rõ ràng.',
-                'AI thông minh': 'Tư vấn kiến trúc tích hợp OpenAI Responses API + Gemini fallback cho web app RKIX3, bảo mật key bằng backend proxy.',
-                'CLI OAuth': workflowCommands[0].prompt,
-                'Database': workflowCommands[3].prompt
-            };
-            promptInput.value = samples[category] || `Thực thi tác vụ liên quan đến: ${category}`;
-            promptInput.dispatchEvent(new Event('input'));
-            promptInput.focus();
-            triggerToast(`Đã tải nội dung mẫu: ${category}`);
-        }
-
-        function menuCommand(action) {
-            const menuPrompts = {
-                'Tìm kiếm': 'Tạo chức năng tìm kiếm đoạn chat localStorage cho RKIX3: index theo tiêu đề, tag, nội dung và highlight keyword.',
-                'Thư viện': 'Thiết kế thư viện prompt/code snippet cho RKIX3 có danh mục API, CLI, database, deploy và nút copy nhanh.',
-                'Tạo dự án': workflowCommands[1].prompt,
-                'Dự án': workflowCommands[1].prompt,
-                'Ứng dụng': 'Tạo module quản lý ứng dụng RKIX3: danh sách app, trạng thái build, link preview, biến môi trường và log deploy.',
-                'Codex': 'Tóm tắt quy trình dùng Codex/Codex Cloud an toàn: AGENTS.md, sandbox, MCP, skills, subagents, PR review và workflow GitHub.',
-                'Đăng nhập': workflowCommands[0].prompt,
-                'Quét mô mạch': 'Review nhanh kiến trúc web app RKIX3 hiện tại, liệt kê điểm yếu UI/API/security/performance và đề xuất bản nâng cấp.'
-            };
-            promptInput.value = menuPrompts[action] || `Đang chạy lệnh hành động: ${action}`;
-            promptInput.dispatchEvent(new Event('input'));
-            promptInput.focus();
-            setMobileSidebar(false);
-            triggerToast(`Đã nạp lệnh: ${action}`);
-        }
-
-        async function handleFileAttach(event) {
-            const file = event.target.files?.[0];
-            if (!file) return;
-            if (file.size > 512 * 1024) {
-                triggerToast('Tệp quá lớn. Hãy dùng file dưới 512KB cho bản web tĩnh.', 'warning');
-                return;
-            }
-            const text = await file.text();
-            attachedContext = `\n\n--- FILE ĐÍNH KÈM: ${file.name} ---\n${text.slice(0, 12000)}`;
-            const badge = document.getElementById('attachedFileBadge');
-            badge.textContent = `Đã gắn context: ${file.name} (${Math.ceil(file.size / 1024)}KB)`;
-            badge.classList.remove('hidden');
-            triggerToast('Đã đính kèm file context.');
-        }
-
-        function buildSystemPrompt() {
-            const mode = document.getElementById('taskMode').value;
-            return `Bạn là RKIX3 Core Engine, trợ lý AI chuyên lập trình, build web app, tạo CLI mobile-first, tự động hóa DevOps và bảo mật API.
-Ngôn ngữ trả lời: tiếng Việt rõ ràng, thực dụng.
-Chế độ tác vụ: ${mode}.
-Ưu tiên: mã chạy được, kiến trúc an toàn, không lộ API key client-side, dùng backend proxy khi production, UI phẳng vuông góc cạnh tuyệt đối nếu tạo giao diện.
-Khi viết code: chia file, giải thích cách chạy test, nêu biến môi trường cần có.
-Nếu tạo HTML preview, trả về một khối HTML hoàn chỉnh.`;
-        }
-
-        function setLoadingState(isLoading, message = 'RKIX3 đang lập trình cấu trúc...') {
-            loader.classList.toggle('hidden', !isLoading);
-            outputCode.classList.toggle('hidden', isLoading);
-            loaderText.textContent = message;
-            progressBar.style.width = isLoading ? '35%' : '100%';
-            if (isLoading) {
-                setTimeout(() => { progressBar.style.width = '68%'; }, 450);
-                setTimeout(() => { progressBar.style.width = '88%'; }, 1200);
-            }
-        }
-
-        async function submitPromptToAI() {
-            const val = promptInput.value.trim();
-            if (!val) return;
-
-            brandCentral.classList.add('scale-75', 'opacity-50', 'transition-all', 'duration-500');
-            workspace.classList.remove('hidden');
-            previewFrame.classList.add('hidden');
-            livePlayBtn.classList.add('hidden');
-            resultMeta.classList.add('hidden');
-            setLoadingState(true, `${aiSettings.provider.toUpperCase()} đang xử lý tác vụ RKIX3...`);
-            workspace.scrollIntoView({ behavior: 'smooth' });
-
-            const prompt = `${val}${attachedContext}`;
-            let resultText = '';
-            let usedProvider = aiSettings.provider;
-            const startedAt = performance.now();
-
-            try {
-                if (aiSettings.provider === 'openai' && aiSettings.apiKey) {
-                    resultText = await callOpenAI(prompt);
-                } else if (aiSettings.provider === 'gemini' && aiSettings.apiKey) {
-                    resultText = await callGemini(prompt);
-                } else {
-                    usedProvider = 'demo';
-                    resultText = await generateDemoResponse(prompt);
-                }
-            } catch (err) {
-                usedProvider = 'demo-fallback';
-                resultText = `${await generateDemoResponse(prompt)}\n\n---\n⚠️ API online lỗi: ${err.message}\nRKIX3 đã tự chuyển sang Demo Fallback để bạn vẫn có blueprint/code mẫu.`;
-                triggerToast('API lỗi, đã chuyển Demo Fallback.', 'warning');
-            }
-
-            const latency = Math.max(1, Math.round(performance.now() - startedAt));
-            setLoadingState(false);
-            outputCode.textContent = resultText || 'Không có nội dung trả về.';
-            renderResultMeta(usedProvider, latency, resultText.length);
-            if (looksLikeHtml(resultText)) livePlayBtn.classList.remove('hidden');
-            triggerToast('Đã xử lý tác vụ hoàn tất!');
-        }
-
-        async function callOpenAI(prompt) {
-            const baseUrl = aiSettings.baseUrl || 'https://api.openai.com/v1';
-            const response = await fetch(`${baseUrl.replace(/\/$/, '')}/responses`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${aiSettings.apiKey}`
-                },
-                body: JSON.stringify({
-                    model: aiSettings.model || MODEL_DEFAULTS.openai,
-                    input: [
-                        { role: 'system', content: buildSystemPrompt() },
-                        { role: 'user', content: prompt }
-                    ],
-                    reasoning: { effort: 'medium' },
-                    max_output_tokens: 4096
-                })
-            });
-            if (!response.ok) throw new Error(`OpenAI HTTP ${response.status}`);
-            const data = await response.json();
-            return data.output_text || data.output?.flatMap(item => item.content || []).map(part => part.text || '').join('\n') || '';
-        }
-
-        async function callGemini(prompt) {
-            const baseUrl = aiSettings.baseUrl || 'https://generativelanguage.googleapis.com/v1beta';
-            const model = aiSettings.model || MODEL_DEFAULTS.gemini;
-            const response = await fetch(`${baseUrl.replace(/\/$/, '')}/models/${model}:generateContent?key=${aiSettings.apiKey}`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    contents: [{ parts: [{ text: prompt }] }],
-                    systemInstruction: { parts: [{ text: buildSystemPrompt() }] },
-                    generationConfig: { temperature: 0.4, maxOutputTokens: 4096 }
-                })
-            });
-            if (!response.ok) throw new Error(`Gemini HTTP ${response.status}`);
-            const data = await response.json();
-            return data.candidates?.[0]?.content?.parts?.map(part => part.text || '').join('\n') || '';
-        }
-
-        async function generateDemoResponse(prompt) {
-            await new Promise(resolve => setTimeout(resolve, 650));
-            const selected = workflowCommands.find(command => prompt.toLowerCase().includes(command.key)) || workflowCommands[5];
-            const promptPreview = `${prompt.slice(0, 1200)}${prompt.length > 1200 ? '...' : ''}`;
-            return [
-                `# RKIX3 Blueprint: ${selected.title}`,
-                '',
-                '## Mục tiêu',
-                '- Biến RKIX3 thành studio web app/CLI mobile-first cho lập trình, build, automation, database và deploy.',
-                '- Luôn giữ API key ở server/proxy; browser chỉ dùng key tạm khi thử nghiệm cá nhân.',
-                '- Thiết kế phẳng, vuông góc, tương thích Termux Android và desktop.',
-                '',
-                '## Kiến trúc đề xuất',
-                '```txt',
-                'rkix3/',
-                '├─ apps/web/                 # UI RKIX3 Studio',
-                '├─ packages/cli/             # mycli auth/init/ai/db/deploy',
-                '├─ server/api/ai-proxy.ts    # Proxy OpenAI/Gemini, rate limit, audit log',
-                '├─ server/api/oauth.ts       # Local loopback + PKCE callback',
-                '├─ db/migrations/            # Supabase/Neon schema',
-                '└─ .github/workflows/ci.yml  # test, build, deploy preview',
-                '```',
-                '',
-                '## 5 lệnh cốt lõi',
-                '1. `mycli auth <service>`: mở trình duyệt bằng `termux-open-url`, chạy `localhost:8787/callback`, lưu token vào vault/.env.',
-                '2. `mycli init <repo>`: clone repo, phát hiện npm/pnpm/yarn, tạo .env mẫu, chạy install.',
-                '3. `mycli ai <file> "task"`: đọc context, gọi AI, hiển thị diff, xác nhận rồi commit/push.',
-                '4. `mycli db setup`: tạo database, ghi `DATABASE_URL`, sinh migration và smoke test.',
-                '5. `mycli deploy`: chạy test, push GitHub, gọi Vercel/Netlify API, mở link live.',
-                '',
-                '## Mẫu CLI OAuth loopback',
-                '```js',
-                "import http from 'node:http';",
-                "import { randomUUID } from 'node:crypto';",
-                "import { execFile } from 'node:child_process';",
-                '',
-                'const port = 8787;',
-                'const state = randomUUID();',
-                "const callbackUrl = 'http://127.0.0.1:' + port + '/callback';",
-                "const authUrl = 'https://example.com/oauth/authorize?response_type=code&client_id=CLIENT_ID&redirect_uri=' + encodeURIComponent(callbackUrl) + '&state=' + state;",
-                '',
-                'const server = http.createServer(async (req, res) => {',
-                '  const url = new URL(req.url, callbackUrl);',
-                "  if (url.pathname !== '/callback' || url.searchParams.get('state') !== state) {",
-                "    res.writeHead(400).end('Invalid callback');",
-                '    return;',
-                '  }',
-                "  const code = url.searchParams.get('code');",
-                "  res.end('RKIX3 đã nhận mã đăng nhập. Có thể đóng tab này.');",
-                '  server.close();',
-                "  console.log('OAuth code:', code);",
-                '});',
-                '',
-                "server.listen(port, '127.0.0.1', () => {",
-                "  execFile('termux-open-url', [authUrl], (error) => {",
-                "    if (error) console.log('Mở URL thủ công:', authUrl);",
-                '  });',
-                '});',
-                '```',
-                '',
-                '## Checklist triển khai mạnh',
-                '- [ ] API proxy có rate limit, request id, log lỗi không chứa secret.',
-                '- [ ] LocalStorage chỉ lưu provider/model/base URL, không lưu API key dài hạn.',
-                '- [ ] CI chạy lint/test/build trước deploy.',
-                '- [ ] Preview HTML sandbox bằng iframe có `sandbox`.',
-                '- [ ] Database migration có rollback và seed dữ liệu mẫu.',
-                '',
-                '## Prompt người dùng đã gửi',
-                promptPreview
-            ].join('\n');
-        }
-
-        function renderResultMeta(provider, latency, length) {
-            const chips = [
-                ['Provider', provider],
-                ['Model', aiSettings.model],
-                ['Latency', `${latency}ms`],
-                ['Chars', String(length)]
-            ];
-            resultMeta.innerHTML = chips.map(([label, value]) => `<div class="border border-zinc-900 bg-black/20 px-3 py-2 square-flat"><p class="text-zinc-600 uppercase">${label}</p><p class="text-zinc-200 font-bold truncate">${value}</p></div>`).join('');
-            resultMeta.classList.remove('hidden');
-        }
-
-        function looksLikeHtml(text) {
-            return /<!doctype html|<html|<body|<main|<section/i.test(text);
-        }
-
-        function extractPreviewHtml(raw) {
-            if (raw.includes('```html')) return raw.split('```html')[1].split('```')[0].trim();
-            const genericFence = raw.match(/```[\s\S]*?```/);
-            if (genericFence && looksLikeHtml(genericFence[0])) return genericFence[0].replace(/```[a-z]*/i, '').replace(/```$/, '').trim();
-            return raw;
-        }
-
-        function toggleOutputPreview() {
-            const htmlStr = extractPreviewHtml(outputCode.textContent);
-            if (!htmlStr) return;
-            if (previewFrame.classList.contains('hidden')) {
-                previewFrame.srcdoc = htmlStr;
-                previewFrame.classList.remove('hidden');
-                triggerToast('Đã mở chế độ xem trước trực tiếp!');
-            } else {
-                previewFrame.classList.add('hidden');
-            }
-        }
-
-        async function copySourceCode() {
-            const rawContent = outputCode.textContent;
-            if (!rawContent) return;
-            if (navigator.clipboard?.writeText) {
-                await navigator.clipboard.writeText(rawContent);
-                triggerToast('Đã sao chép mã nguồn vào clipboard!');
-                return;
-            }
-            const tempTextArea = document.createElement('textarea');
-            tempTextArea.value = rawContent;
-            tempTextArea.style.position = 'fixed';
-            document.body.appendChild(tempTextArea);
-            tempTextArea.select();
-            document.execCommand('copy');
-            document.body.removeChild(tempTextArea);
-            triggerToast('Đã sao chép mã nguồn vào clipboard!');
-        }
-
-        function downloadOutput() {
-            const rawContent = outputCode.textContent;
-            if (!rawContent) return;
-            const blob = new Blob([rawContent], { type: 'text/plain;charset=utf-8' });
-            const url = URL.createObjectURL(blob);
-            const anchor = document.createElement('a');
-            anchor.href = url;
-            anchor.download = `rkix3-output-${Date.now()}.md`;
-            anchor.click();
-            URL.revokeObjectURL(url);
-            triggerToast('Đã tạo file tải xuống.');
-        }
-
-        function toggleVoiceRecording() {
-            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-            const micBtn = document.getElementById('micBtn');
-            if (!SpeechRecognition) {
-                promptInput.value = 'Hãy viết một kịch bản tự động hoá kiểm thử mảng cho dự án RKIX3 bằng JavaScript...';
-                promptInput.dispatchEvent(new Event('input'));
-                triggerToast('Trình duyệt không hỗ trợ Speech API, đã nạp prompt mẫu.', 'warning');
-                return;
-            }
-            if (!isRecording) {
-                recognitionInstance = new SpeechRecognition();
-                recognitionInstance.lang = 'vi-VN';
-                recognitionInstance.continuous = false;
-                recognitionInstance.interimResults = false;
-                recognitionInstance.onresult = (event) => {
-                    promptInput.value = event.results[0][0].transcript;
-                    promptInput.dispatchEvent(new Event('input'));
-                    triggerToast('Đã dịch giọng nói thành văn bản!');
-                };
-                recognitionInstance.onend = () => {
-                    isRecording = false;
-                    micBtn.innerHTML = '<i data-lucide="mic" class="w-4 h-4"></i>';
-                    lucide.createIcons();
-                };
-                isRecording = true;
-                micBtn.innerHTML = '<i data-lucide="square" class="w-4 h-4 text-rose-500 animate-pulse"></i>';
-                recognitionInstance.start();
-                triggerToast('Đang ghi âm giọng nói...');
-            } else {
-                recognitionInstance?.stop();
-            }
-            lucide.createIcons();
-        }
-
-        function startFreshChat() {
-            attachedContext = '';
-            document.getElementById('attachedFileBadge').classList.add('hidden');
-            goHome();
-            triggerToast('Đã mở phiên chat mới.');
-        }
-
-        function runDemoBlueprint() {
-            promptInput.value = workflowCommands[5].prompt;
-            promptInput.dispatchEvent(new Event('input'));
-            aiSettings.provider = 'demo';
-            aiSettings.model = MODEL_DEFAULTS.demo;
-            updateModeLabel();
-            submitPromptToAI();
-        }
-
-        function switchViewMode(mode) {
-            const appShell = document.getElementById('appShell');
-            const sidebar = document.getElementById('sidebar');
-            const mobileBottomBar = document.getElementById('mobileBottomBar');
-            const pcBtn = document.getElementById('pcViewBtn');
-            const moBtn = document.getElementById('moViewBtn');
-            const cardsGrid = document.getElementById('cardsGrid');
-            if (mode === 'mobile') {
-                appShell.style.maxWidth = '420px';
-                appShell.style.margin = '0 auto';
-                appShell.style.boxShadow = '0 0 60px rgba(0,0,0,0.95)';
-                appShell.style.borderLeft = '1px solid #102142';
-                appShell.style.borderRight = '1px solid #102142';
-                sidebar.classList.add('-translate-x-full');
-                sidebar.classList.remove('md:translate-x-0');
-                document.querySelector('main').classList.remove('md:pl-[270px]');
-                mobileBottomBar.classList.remove('md:hidden');
-                cardsGrid.className = 'grid grid-cols-2 gap-4 w-full max-w-6xl mx-auto';
-                pcBtn.className = 'px-3 py-1 text-[9px] font-bold uppercase square-flat text-zinc-400 hover:text-white transition-all';
-                moBtn.className = 'px-3 py-1 text-[9px] font-bold uppercase square-flat bg-blue-600 text-white transition-all';
-            } else {
-                appShell.style.maxWidth = '100%';
-                appShell.style.margin = '0';
-                appShell.style.boxShadow = 'none';
-                appShell.style.border = 'none';
-                sidebar.classList.add('md:translate-x-0');
-                document.querySelector('main').classList.add('md:pl-[270px]');
-                mobileBottomBar.classList.add('md:hidden');
-                cardsGrid.className = 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 w-full max-w-6xl mx-auto';
-                moBtn.className = 'px-3 py-1 text-[9px] font-bold uppercase square-flat text-zinc-400 hover:text-white transition-all';
-                pcBtn.className = 'px-3 py-1 text-[9px] font-bold uppercase square-flat bg-blue-600 text-white transition-all';
-            }
-            lucide.createIcons();
-        }
-
-        initialize();
-    </script>
+<body>
+  <div class="app">
+    <aside class="sidebar"><div><button class="brand" data-route="home"><img src="1780136894650-Photoroom.png" alt="RKIX3 Logo"></button><button class="new-session" data-route="ai">✨ New AI session<br><small class="muted">Generate, debug, plan, and ship.</small></button><nav id="sideNav" class="nav"></nav></div><div class="capacity"><div class="row" style="justify-content:space-between"><span>Build capacity</span><b>82%</b></div><div class="bar"><span style="width:82%"></span></div><span>4 agents active · 12 tasks queued · 3 deploy targets ready</span></div></aside>
+    <main><header><div class="row"><button id="mobileMenu" class="btn mobile-menu">☰</button><div><p class="eyebrow">RKIX3 Command Layer</p><h1 id="pageTitle">Dashboard</h1></div></div><div class="top-actions"><div class="branch">main · <span style="color:var(--lime)">healthy</span></div><button class="btn primary" data-route="profile">Customize</button></div></header><div class="shell"><section id="home" class="page active"></section><section id="ai" class="page"></section><section id="workspace" class="page"></section><section id="code" class="page"></section><section id="build" class="page"></section><section id="library" class="page"></section><section id="integrations" class="page"></section><section id="profile" class="page"></section></div></main>
+    <div id="drawer" class="drawer"><div class="drawer-panel"><div class="row" style="justify-content:space-between;margin-bottom:18px"><img src="1780136894650-Photoroom.png" alt="RKIX3" style="height:42px"><button id="drawerClose" class="btn">✕</button></div><nav id="drawerNav" class="nav"></nav></div></div><nav id="bottomNav" class="bottom-nav"></nav>
+  </div>
+<script>
+const entities={projects:[{id:'PRJ-101',name:'Nebula Console',stack:'Next.js · Supabase',status:'Building',progress:76,color:'var(--cyan)',due:'Jun 12',owner:'RKIX3 Core'},{id:'PRJ-102',name:'AgentOps CLI',stack:'Node · OpenAI',status:'Planning',progress:42,color:'var(--violet)',due:'Jun 20',owner:'Automation'},{id:'PRJ-103',name:'Docs Pulse',stack:'Astro · MDX',status:'Review',progress:88,color:'var(--lime)',due:'Jun 08',owner:'Library Hub'},{id:'PRJ-104',name:'Deploy Radar',stack:'Vercel · GitHub',status:'Live',progress:100,color:'var(--amber)',due:'Live',owner:'Build Center'}],tasks:[{id:'TSK-1',title:'Wire AI chat context memory',status:'todo',priority:'High',project:'Nebula Console'},{id:'TSK-2',title:'Design roadmap swimlanes',status:'todo',priority:'Medium',project:'AgentOps CLI'},{id:'TSK-3',title:'Create framework template cards',status:'doing',priority:'High',project:'Deploy Radar'},{id:'TSK-4',title:'Add snippet copy actions',status:'doing',priority:'Medium',project:'Docs Pulse'},{id:'TSK-5',title:'Validate integration settings',status:'review',priority:'High',project:'Deploy Radar'},{id:'TSK-6',title:'Publish starter docs',status:'done',priority:'Low',project:'Docs Pulse'}],snippets:[{id:'SNP-01',title:'OpenAI Responses proxy',lang:'ts',code:`export async function POST(req) {
+  const { prompt } = await req.json();
+  const result = await runAgent({ prompt, project: 'RKIX3' });
+  return Response.json({ output: result.text });
+}`},{id:'SNP-02',title:'Vercel deploy hook',lang:'bash',code:`curl -X POST "$VERCEL_DEPLOY_HOOK_URL"
+echo 'Deploy queued for RKIX3 workspace'`},{id:'SNP-03',title:'Supabase project table',lang:'sql',code:`create table projects (
+  id uuid primary key default gen_random_uuid(),
+  name text not null,
+  status text default 'planning',
+  created_at timestamptz default now()
+);`}],messages:[{role:'agent',text:'RKIX3 Agent online. I can turn goals into code, tasks, docs, deploy plans, and reusable snippets.'},{role:'user',text:'Create a typed API route for generating release notes.'},{role:'agent',text:'I drafted the route, validation schema, test plan, and deployment checklist. Want a Next.js or Express version?'}]};
+const routes=[['home','Dashboard','⌘'],['ai','AI Workspace','✦'],['workspace','Projects','▦'],['code','Code Studio','{}'],['build','Build Center','▲'],['library','Library Hub','▤'],['integrations','Integrations','⚡'],['profile','Profile','◉']];
+const $=s=>document.querySelector(s), $$=s=>[...document.querySelectorAll(s)], esc=s=>String(s).replace(/[&<>'"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#39;','"':'&quot;'}[c]));
+const card=(inner,cls='')=>`<div class="card ${cls}">${inner}</div>`, badge=t=>`<span class="badge">${t}</span>`;
+function navHTML(short=false){return routes.filter(r=>!short||['home','ai','workspace','code','profile'].includes(r[0])).map(r=>`<button class="nav-btn" data-route="${r[0]}"><b>${r[2]}</b><span>${short?r[1].split(' ')[0]:r[1]}</span></button>`).join('')}
+function metric(label,value){return card(`<p class="muted">${label}</p><div class="metric"><strong>${value}</strong></div>`)}
+function projectCard(p){return `<article class="project"><div class="row" style="justify-content:space-between"><span class="faint" style="font-family:monospace">${p.id}</span><span style="width:10px;height:10px;border-radius:50%;background:${p.color};box-shadow:0 0 16px ${p.color}"></span></div><h3>${p.name}</h3><p class="muted">${p.stack}</p><div class="bar"><span style="width:${p.progress}%;background:${p.color}"></span></div><div class="row" style="justify-content:space-between"><small class="muted">${p.status}</small><small>${p.progress}%</small></div></article>`}
+function taskCard(t){return `<article class="task"><div class="row" style="justify-content:space-between"><small class="faint">${t.id}</small><small style="color:${t.priority==='High'?'var(--amber)':t.priority==='Medium'?'var(--cyan)':'var(--muted)'}">${t.priority}</small></div><h4>${t.title}</h4><p class="muted">${t.project}</p></article>`}
+function renderHome(){$('#home').innerHTML=`<div class="hero"><div class="card hero-copy"><p class="eyebrow">Developer Workspace Platform</p><h2>Build faster with AI, projects, code, docs, and deploys in one command deck.</h2><p class="lead">RKIX3 combines an AI workspace, project roadmap, code studio, build center, library hub, integrations, and profile controls in a sleek dark-first developer UI.</p><div class="row"><button class="btn primary" data-route="ai">Launch AI Workspace</button><button class="btn" data-route="workspace">View Roadmap</button></div></div>${card(`<div class="row" style="justify-content:space-between"><h3>Live agent stream</h3>${badge('AI Online')}</div><div class="grid"><p class="mini-card">✓ Indexed 3 snippets into Code Studio</p><p class="mini-card">→ Generated deploy plan for Vercel + GitHub</p><p class="mini-card">● Monitoring 4 active projects</p></div>`)}</div><div class="grid cols-4">${metric('Active projects',entities.projects.length)}${metric('Open tasks',entities.tasks.filter(t=>t.status!=='done').length)}${metric('Code snippets',entities.snippets.length)}${metric('Integrations','8')}</div>${card(`<div class="row" style="justify-content:space-between"><div><h2>Project pulse</h2><p class="muted">Roadmap-ready entities with progress, owners, and delivery status.</p></div><button class="btn" data-route="workspace">Manage projects</button></div><div class="grid cols-4">${entities.projects.map(projectCard).join('')}</div>`)}`}
+function renderAI(){$('#ai').innerHTML=`<div class="grid" style="grid-template-columns:minmax(0,1fr) 380px"><div class="card"><div class="row" style="justify-content:space-between"><div><h2>AI Workspace</h2><p class="muted">Chat interface with an AI agent, mode switcher, and prompt accelerators.</p></div>${badge('Agent Ready')}</div><div id="chatLog" class="chat"></div><div class="row" style="margin:14px 0">${['Generate code','Debug issue','Plan sprint','Write docs'].map(x=>`<button class="btn chip">${x}</button>`).join('')}</div><div class="chat-input"><input id="chatInput" placeholder="Ask RKIX3 to build, refactor, document, or deploy..."><button id="sendChat" class="btn primary">Send</button></div></div>${card(`<h2>AI Tools</h2><div class="grid">${['Code generator','Task decomposer','Release note writer','Security reviewer','API schema planner'].map((x,i)=>`<button class="mini-card" style="text-align:left"><b>${x}</b><br><small class="muted">Run with ${i%2?'fast':'deep'} reasoning mode</small></button>`).join('')}</div>`)}</div>`; renderChat()}
+function renderChat(){$('#chatLog').innerHTML=entities.messages.map(m=>`<div class="bubble ${m.role==='user'?'user':''}"><small class="faint">${m.role==='user'?'YOU':'RKIX3 AGENT'}</small><p>${esc(m.text)}</p></div>`).join('')}
+function renderWorkspace(){const cols=[['todo','Todo'],['doing','In progress'],['review','Review'],['done','Done']];$('#workspace').innerHTML=`${card(`<div class="row" style="justify-content:space-between"><div><h2>Project & Task Management</h2><p class="muted">Kanban board, project list, and roadmap planning view.</p></div>${badge('6 tasks')}</div><div class="grid kanban">${cols.map(([k,l])=>`<div class="lane"><h3>${l}</h3><div class="grid">${entities.tasks.filter(t=>t.status===k).map(taskCard).join('')}</div></div>`).join('')}</div>`)}<div class="grid cols-2">${card(`<h2>Projects List</h2><div class="grid">${entities.projects.map(p=>`<div class="mini-card"><b>${p.name}</b><p class="muted">${p.owner} · ${p.stack} · ${p.due}</p></div>`).join('')}</div>`)}${card(`<h2>Roadmap View</h2>${entities.projects.map(p=>`<div class="roadmap-row"><b>${p.name}</b><div class="bar"><span style="width:${p.progress}%;background:${p.color}"></span></div><span class="muted">${p.due}</span></div>`).join('')}`)}</div>`}
+function renderCode(){$('#code').innerHTML=`<div class="grid" style="grid-template-columns:minmax(0,1fr) 420px"><div class="card" style="padding:0"><div class="window-head"><div><h2>Code Studio</h2><p class="muted">Editor surface with snippets, templates, and AI coding actions.</p></div><div class="dots"><span style="background:#f87171"></span><span style="background:var(--amber)"></span><span style="background:var(--lime)"></span></div></div><pre id="editorCode" class="code">${esc(entities.snippets[0].code)}</pre></div>${card(`<h2>Snippets Manager</h2><div class="grid">${entities.snippets.map(s=>`<button class="mini-card snippet" data-code="${esc(s.code)}" style="text-align:left"><b>${s.title}</b><br><small style="color:var(--cyan);font-family:monospace">.${s.lang}</small></button>`).join('')}</div><h2 style="margin-top:24px">AI Coding</h2><div class="grid cols-2">${['Explain','Refactor','Test','Optimize'].map(x=>`<button class="btn">${x}</button>`).join('')}</div>`)}</div>${card(`<h2>Code Templates</h2><div class="grid cols-3">${['Next.js API route','Express worker','Astro docs site'].map(x=>`<div class="mini-card"><h3>${x}</h3><p class="muted">Starter files, env notes, and test checklist.</p></div>`).join('')}</div>`)}`}
+function renderBuild(){const f=['Next.js','Vite React','Astro','SvelteKit','Node API','Static HTML'];$('#build').innerHTML=card(`<div class="row" style="justify-content:space-between"><div><h2>Build Center</h2><p class="muted">Create, configure, and queue builds across common frameworks.</p></div><button class="btn primary">Queue build</button></div><div class="grid cols-3">${f.map((x,i)=>`<div class="mini-card"><div class="row" style="justify-content:space-between"><span>▲</span>${badge(i%2?'Template':'Ready')}</div><h2>${x}</h2><p class="muted">Includes scripts, env schema, CI hints, and deployment presets.</p><button class="btn">Use framework</button></div>`).join('')}</div>`)}
+function renderLibrary(){const docs=['React patterns','OpenAI Responses API','Supabase schema','Vercel deployment','GitHub Actions','Tailwind tokens'];$('#library').innerHTML=card(`<h2>Library Hub</h2><p class="muted">Framework and API documentation cards for rapid implementation.</p><div class="grid cols-3">${docs.map(d=>`<article class="mini-card"><h3>▤ ${d}</h3><p class="muted">Curated usage notes, starter snippets, edge cases, and production checklist.</p></article>`).join('')}</div>`)}
+function renderIntegrations(){const xs=['GitHub','Vercel','Supabase','OpenAI','Google Gemini','Slack','Linear','Notion'];$('#integrations').innerHTML=card(`<h2>Integration Center</h2><p class="muted">Connect source control, deploy targets, databases, AI providers, and team tools.</p><div class="grid cols-4">${xs.map((x,i)=>`<div class="mini-card"><div class="row" style="justify-content:space-between"><span>⚡</span><small style="color:${i<4?'var(--lime)':'var(--faint)'}">${i<4?'Connected':'Available'}</small></div><h2>${x}</h2><button class="btn">${i<4?'Configure':'Connect'}</button></div>`).join('')}</div>`)}
+function renderProfile(){$('#profile').innerHTML=`<div class="grid cols-2">${card(`<div style="text-align:center"><div style="margin:auto;width:96px;height:96px;border-radius:28px;background:linear-gradient(135deg,var(--cyan),var(--violet));display:grid;place-items:center;color:#06111c;font-size:32px;font-weight:900">RK</div><h2>RKIX3 Builder</h2><p class="muted">Full-stack AI workspace operator</p><div class="grid cols-3"><b>12<br><small class="muted">Projects</small></b><b>48<br><small class="muted">Tasks</small></b><b>23<br><small class="muted">Builds</small></b></div></div>`)}${card(`<h2>Theme & Settings</h2><div class="grid"><label class="mini-card"><b>Accent intensity</b><input type="range" value="82"></label><label class="mini-card"><input type="checkbox" checked> Glassmorphism panels</label><label class="mini-card"><input type="checkbox" checked> Compact code mode</label><button id="themeToggle" class="btn primary">Toggle theme</button></div>`)}</div>`}
+function setRoute(id){const r=routes.find(x=>x[0]===id)||routes[0];$$('.page').forEach(p=>p.classList.toggle('active',p.id===r[0]));$$('.nav-btn').forEach(b=>b.classList.toggle('active',b.dataset.route===r[0]));$('#pageTitle').textContent=r[1];$('#drawer').classList.remove('open');history.replaceState(null,'',window.location.pathname)}
+function bind(){document.body.addEventListener('click',e=>{const r=e.target.closest('[data-route]');if(r)setRoute(r.dataset.route);const c=e.target.closest('.chip');if(c)$('#chatInput').value=c.textContent+': ';const s=e.target.closest('.snippet');if(s)$('#editorCode').textContent=s.dataset.code;if(e.target.id==='sendChat'){const input=$('#chatInput');if(!input.value.trim())return;entities.messages.push({role:'user',text:input.value.trim()},{role:'agent',text:'Queued an RKIX3 implementation plan with entity updates, code tasks, tests, and deploy notes.'});input.value='';renderChat();$('#chatLog').scrollTop=$('#chatLog').scrollHeight}if(e.target.id==='themeToggle')document.body.classList.toggle('light')});$('#mobileMenu').onclick=()=>$('#drawer').classList.add('open');$('#drawerClose').onclick=()=>$('#drawer').classList.remove('open')}
+function init(){sideNav.innerHTML=navHTML();drawerNav.innerHTML=navHTML();bottomNav.innerHTML=navHTML(true);renderHome();renderAI();renderWorkspace();renderCode();renderBuild();renderLibrary();renderIntegrations();renderProfile();bind();setRoute(location.hash.slice(1)||'home')}
+init();
+</script>
 </body>
 </html>
