falak-app-duo 1.2.0 → 1.3.1

package/README.md

@@ -13,7 +13,7 @@ integrations on the frontend side: **Ably** (realtime) and **Brevo**
 | Ably (realtime) | **New** — via Laravel Echo, authorized through the same API-key + user-token headers as the rest of the app |
 | Brevo (email/SMS) | Kept — calls go through Laravel, key never ships to the browser |
 | Laravel API auth | `X-API-Key` (app) + `Authorization: Bearer <token>` (user) |
-| AES-256 | Kept — encrypts the cached user token in localStorage |
+| AES-256 | Kept — encrypts the cached user token in IndexedDB |
 | Arabic/RTL | Kept — baked in via vue-i18n + postcss-rtlcss (opt-out: `--no-rtl` or the RTL prompt) |
 
 ## Install & run
@@ -43,7 +43,7 @@ Every request from `src/services/api.js` carries two headers:
 - `X-API-Key` — identifies this client app, set once per environment in `.env`.
 - `Authorization: Bearer <user token>` — identifies the logged-in user, issued
   by your Laravel `/auth/login` endpoint and stored AES-256 encrypted in
-  `localStorage` (see `src/utils/crypto.js` and `src/stores/auth.js`).
+  IndexedDB (see `src/utils/crypto.js`, `src/storage.js` and `src/stores/auth.js`).
 
 ## Ably (realtime)
 

package/bin/falak-app-duo

@@ -215,6 +215,7 @@ function buildI18nModule(locales, defaultLocale) {
   const ordered = ["ar", "en", "es", "de", "fr", "ru", "it"].filter((c) => locales.includes(c));
   const lines = [];
   lines.push('import { createI18n } from "vue-i18n";');
+  lines.push('import storage from "@/storage";');
   for (const code of ordered) {
     lines.push(`import ${code} from "./locales/${code}.json";`);
   }
@@ -226,27 +227,30 @@ function buildI18nModule(locales, defaultLocale) {
   lines.push("];");
   lines.push("");
   lines.push('const STORAGE_KEY = "falak_locale";');
-  lines.push("const stored = localStorage.getItem(STORAGE_KEY);");
-  lines.push(
-    `const savedLocale = SUPPORTED_LOCALES.some((l) => l.code === stored) ? stored : "${defaultLocale}";`
-  );
   lines.push("");
   lines.push("const i18n = createI18n({");
   lines.push("  legacy: false,");
-  lines.push("  locale: savedLocale,");
+  lines.push(`  locale: "${defaultLocale}",`);
   lines.push('  fallbackLocale: "en",');
   lines.push(`  messages: { ${ordered.join(", ")} },`);
   lines.push("});");
   lines.push("");
   lines.push("export function setLocale(locale) {");
   lines.push("  i18n.global.locale.value = locale;");
-  lines.push("  localStorage.setItem(STORAGE_KEY, locale);");
+  lines.push("  storage.set(STORAGE_KEY, locale);");
   lines.push("  document.documentElement.lang = locale;");
   lines.push('  document.documentElement.dir = locale === "ar" ? "rtl" : "ltr";');
   lines.push("}");
   lines.push("");
-  lines.push("// Apply on load");
-  lines.push("setLocale(savedLocale);");
+  lines.push("// Apply the persisted locale (falling back to the default) once storage is");
+  lines.push("// ready. main.js awaits this before mounting so the first paint is correct.");
+  lines.push("export async function initLocale() {");
+  lines.push("  const stored = await storage.get(STORAGE_KEY);");
+  lines.push(
+    `  const saved = SUPPORTED_LOCALES.some((l) => l.code === stored) ? stored : "${defaultLocale}";`
+  );
+  lines.push("  setLocale(saved);");
+  lines.push("}");
   lines.push("");
   lines.push("export default i18n;");
   lines.push("");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "falak-app-duo",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "Vue 3 boilerplate scaffolder — Ably (realtime), Brevo, AES-256, Arabic/RTL, and a Laravel API client (API key + user token auth). No Firebase, no Groq/Paymob on the frontend (Groq is backend-only; Paymob dropped).",
   "type": "module",
   "bin": {

package/templates/default/index.html

@@ -4,6 +4,26 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Falak App</title>
+    <style>
+      /* The theme is resolved from IndexedDB (async) before the app mounts;
+         keep the page hidden until then so the first paint is never the wrong
+         theme. main.js removes this class once the theme is applied. */
+      html.theme-loading {
+        visibility: hidden;
+      }
+    </style>
+    <script>
+      // Runs before first paint: hide the page until main.js has hydrated the
+      // IndexedDB store and applied the theme (see src/main.js).
+      (function () {
+        var el = document.documentElement;
+        el.classList.add("theme-loading");
+        // Safety net: never leave the page hidden if the app fails to boot.
+        setTimeout(function () {
+          el.classList.remove("theme-loading");
+        }, 3000);
+      })();
+    </script>
   </head>
   <body>
     <div id="app"></div>

package/templates/default/package.json

@@ -13,10 +13,13 @@
     "ably": "^2.5.0",
     "axios": "^1.7.7",
     "crypto-js": "^4.2.0",
+    "idb": "^8.0.0",
     "laravel-echo": "^1.16.1",
+    "otplib": "^12.0.1",
     "pinia": "^2.2.2",
     "primeicons": "^7.0.0",
     "primevue": "^4.5.5",
+    "qrcode": "^1.5.4",
     "vue": "^3.5.0",
     "vue-i18n": "^9.14.0",
     "vue-router": "^4.4.5"

package/templates/default/src/App.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter, RouterLink, RouterView } from "vue-router";
 import { setLocale, SUPPORTED_LOCALES } from "@/i18n";
 import { useAuthStore } from "@/stores/auth";
+import { getTheme, toggleTheme } from "@/theme";
 import AppBackdrop from "@/components/AppBackdrop.vue";
 
 const { t, locale } = useI18n();
@@ -11,6 +12,7 @@ const locales = SUPPORTED_LOCALES;
 const auth = useAuthStore();
 const route = useRoute();
 const router = useRouter();
+const theme = ref(getTheme());
 
 // Auth pages hide the app chrome and go full-screen.
 const authPageNames = ["login", "register", "forgot-password"];
@@ -34,7 +36,7 @@ async function logout() {
     <div class="relative z-10 flex min-h-screen flex-col">
       <header
         v-if="!isAuthPage"
-        class="sticky top-0 z-30 border-b border-white/10 bg-[#0b0f19]/70 backdrop-blur-xl"
+        class="sticky top-0 z-30 border-b border-edge bg-page/70 backdrop-blur-xl"
       >
         <nav class="mx-auto flex w-full max-w-6xl flex-wrap items-center justify-between gap-x-6 gap-y-3 px-4 py-3 sm:px-6">
           <RouterLink to="/" class="group flex items-center gap-2.5">
@@ -43,14 +45,14 @@ async function logout() {
             >
               F
             </span>
-            <span class="text-lg font-bold text-white">{{ t("app.name") }}</span>
+            <span class="text-lg font-bold text-ink">{{ t("app.name") }}</span>
           </RouterLink>
 
           <div class="flex flex-1 flex-wrap items-center justify-end gap-1.5 text-sm">
             <RouterLink
               to="/"
               class="rounded-full px-3 py-1.5 font-medium transition"
-              :class="route.name === 'home' ? 'bg-emerald-500/15 text-emerald-200 ring-1 ring-emerald-300/30' : 'text-gray-300 hover:bg-white/5 hover:text-white'"
+              :class="route.name === 'home' ? 'bg-emerald-500/15 text-emerald-200 ring-1 ring-emerald-300/30' : 'text-ink2 hover:bg-glass hover:text-ink'"
             >
               {{ t("nav.home") }}
             </RouterLink>
@@ -60,7 +62,7 @@ async function logout() {
                 :key="link.to"
                 :to="link.to"
                 class="rounded-full px-3 py-1.5 font-medium transition"
-                :class="route.path === link.to ? 'bg-emerald-500/15 text-emerald-200 ring-1 ring-emerald-300/30' : 'text-gray-300 hover:bg-white/5 hover:text-white'"
+                :class="route.path === link.to ? 'bg-emerald-500/15 text-emerald-200 ring-1 ring-emerald-300/30' : 'text-ink2 hover:bg-glass hover:text-ink'"
               >
                 {{ link.label }}
               </RouterLink>
@@ -68,6 +70,21 @@ async function logout() {
           </div>
 
           <div class="flex items-center gap-2.5">
+            <button
+              type="button"
+              :title="t(theme === 'light' ? 'theme.light' : 'theme.dark')"
+              :aria-label="t(theme === 'light' ? 'theme.light' : 'theme.dark')"
+              class="grid h-9 w-9 place-items-center rounded-full border border-edge2 bg-glass text-ink2 transition hover:bg-glass3 hover:text-ink"
+              @click="theme = toggleTheme()"
+            >
+              <svg v-if="theme === 'light'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4.5 w-4.5">
+                <circle cx="12" cy="12" r="4" />
+                <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+              </svg>
+              <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4.5 w-4.5">
+                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z" />
+              </svg>
+            </button>
             <RouterLink
               v-if="!auth.userToken"
               to="/login"
@@ -82,7 +99,7 @@ async function logout() {
               v-if="locales.length > 1"
               :value="locale"
               @change="setLocale($event.target.value)"
-              class="rounded-full border border-white/15 bg-white/5 px-2.5 py-1.5 text-sm font-medium text-gray-300 outline-none transition hover:bg-white/10 hover:text-white"
+              class="rounded-full border border-edge2 bg-glass px-2.5 py-1.5 text-sm font-medium text-ink2 outline-none transition hover:bg-glass3 hover:text-ink"
             >
               <option v-for="l in locales" :key="l.code" :value="l.code">{{ l.label }}</option>
             </select>

package/templates/default/src/assets/main.css

@@ -2,6 +2,82 @@
 @tailwind components;
 @tailwind utilities;
 
+/* ============================================================
+   Theme tokens
+   Dark is the default (no class on <html>); light is applied by
+   toggling `.light` on <html> (see src/theme.js + the `theme-loading`
+   guard in index.html). Components use ONLY these semantic tokens — never
+   hardcoded dark-palette utilities — so a single var flip re-themes
+   the whole app. Keep `html { }` (dark) and `html.light { }` in sync.
+   ============================================================ */
+
+:root {
+  --c-page: 11 15 25; /* #0b0f19 body/backdrop base */
+  --c-page-2: 13 21 32; /* #0d1520 raised surface */
+  --glass-a: 0.05;
+  --glass-a-2: 0.08;
+  --glass-a-3: 0.1;
+  --c-ink: 243 244 246; /* gray-100 primary text */
+  --c-ink-2: 229 231 235; /* gray-200 secondary text */
+  --c-ink-3: 156 163 175; /* gray-400 muted text */
+  --c-mute: 107 114 128; /* gray-500 faint text */
+  --c-edge: rgba(255, 255, 255, 0.1);
+  --c-edge-2: rgba(255, 255, 255, 0.15);
+  --c-edge-3: rgba(255, 255, 255, 0.2);
+  /* Pale "soft accent" text tones (glow-y on dark, deepened on light) */
+  --c-em-200: 167 243 208; /* emerald-200 */
+  --c-em-300: 110 231 183; /* emerald-300 */
+  --c-teal-200: 153 246 228; /* teal-200 */
+  --c-teal-300: 94 234 212; /* teal-300 */
+  --c-cyan-200: 165 243 252; /* cyan-200 */
+  --c-cyan-300: 103 232 249; /* cyan-300 */
+  --c-sky-200: 186 230 253; /* sky-200 */
+  --c-amber-200: 254 240 138; /* amber-200 */
+  --c-amber-300: 252 211 77; /* amber-300 */
+  --c-orange-300: 253 186 116; /* orange-300 */
+  --c-rose-200: 254 205 211; /* rose-200 */
+  --c-rose-300: 253 164 175; /* rose-300 */
+  --c-rose-400: 251 113 133; /* rose-400 */
+  --glass-shine: rgba(255, 255, 255, 0.08);
+  --ripple: rgba(255, 255, 255, 0.4);
+  --grid-dot: rgba(255, 255, 255, 0.06);
+  --vignette: rgba(5, 8, 15, 0.55);
+  --scroll-thumb: rgba(255, 255, 255, 0.14);
+}
+
+html.light {
+  --c-page: 248 250 252; /* slate-50 */
+  --c-page-2: 226 232 240; /* slate-200 */
+  --glass-a: 0.72;
+  --glass-a-2: 0.8;
+  --glass-a-3: 0.85;
+  --c-ink: 30 41 59; /* slate-800 */
+  --c-ink-2: 51 65 85; /* slate-700 */
+  --c-ink-3: 71 85 105; /* slate-600 */
+  --c-mute: 100 116 139; /* slate-500 */
+  --c-edge: rgba(15, 23, 42, 0.08);
+  --c-edge-2: rgba(15, 23, 42, 0.14);
+  --c-edge-3: rgba(15, 23, 42, 0.2);
+  --c-em-200: 6 95 70; /* emerald-800 */
+  --c-em-300: 4 120 87; /* emerald-700 */
+  --c-teal-200: 19 78 74; /* teal-800 */
+  --c-teal-300: 15 118 110; /* teal-700 */
+  --c-cyan-200: 21 94 117; /* cyan-800 */
+  --c-cyan-300: 14 116 144; /* cyan-700 */
+  --c-sky-200: 20 83 136; /* sky-800 */
+  --c-amber-200: 146 64 14; /* amber-800 */
+  --c-amber-300: 180 83 9; /* amber-700 */
+  --c-orange-300: 194 65 12; /* orange-700 */
+  --c-rose-200: 159 18 57; /* rose-800 */
+  --c-rose-300: 190 18 60; /* rose-700 */
+  --c-rose-400: 225 29 72; /* rose-600 */
+  --glass-shine: rgba(255, 255, 255, 0.35);
+  --ripple: rgba(2, 6, 23, 0.14);
+  --grid-dot: rgba(2, 6, 23, 0.09);
+  --vignette: rgba(100, 116, 139, 0.18);
+  --scroll-thumb: rgba(2, 6, 23, 0.22);
+}
+
 /* Registered once for the animated gradient-border effect (Tailwind v3 has no
    @property in config, so it lives here in plain CSS next to the keyframes). */
 @property --tw-border-angle {
@@ -27,10 +103,10 @@
   html,
   body {
     font-family: "Almarai", "IBM Plex Sans Arabic", sans-serif;
-    background-color: #0b0f19;
+    background-color: rgb(var(--c-page));
   }
   body {
-    color: rgb(243 244 246 / 1);
+    color: rgb(var(--c-ink));
   }
   ::selection {
     background: rgb(16 185 129 / 0.35);
@@ -38,7 +114,7 @@
   }
   * {
     scrollbar-width: thin;
-    scrollbar-color: rgb(255 255 255 / 0.14) transparent;
+    scrollbar-color: var(--scroll-thumb) transparent;
   }
   *::-webkit-scrollbar {
     width: 8px;
@@ -46,17 +122,17 @@
   }
   *::-webkit-scrollbar-thumb {
     border-radius: 9999px;
-    background: rgb(255 255 255 / 0.14);
+    background: var(--scroll-thumb);
   }
 }
 
 @layer components {
   /* Reusable glass surfaces — the app's core visual language */
   .glass-card {
-    @apply relative rounded-2xl border border-white/10 bg-white/[0.05] shadow-2xl shadow-black/30 backdrop-blur-xl backdrop-saturate-150;
+    @apply relative rounded-2xl border border-edge bg-glass shadow-2xl shadow-black/30 backdrop-blur-xl backdrop-saturate-150;
   }
   .glass-card-hover {
-    @apply transition-all duration-300 ease-out hover:-translate-y-1 hover:border-white/20 hover:bg-white/[0.08] hover:shadow-emerald-500/10;
+    @apply transition-all duration-300 ease-out hover:-translate-y-1 hover:border-edge3 hover:bg-glass2 hover:shadow-emerald-500/10;
   }
 
   /* Fine hairline top highlight so glass reads as "lit" from above */
@@ -68,16 +144,12 @@
     position: absolute;
     inset: 0;
     border-radius: inherit;
-    background: linear-gradient(
-      180deg,
-      rgb(255 255 255 / 0.08) 0%,
-      rgb(255 255 255 / 0) 32%
-    );
+    background: linear-gradient(180deg, var(--glass-shine) 0%, rgba(0, 0, 0, 0) 32%);
     pointer-events: none;
   }
 
   .glass-input {
-    @apply w-full rounded-xl border border-white/10 bg-white/[0.05] px-4 py-2.5 text-sm text-gray-100 placeholder-gray-500 outline-none ring-1 ring-transparent transition focus:border-emerald-400/50 focus:bg-white/[0.08] focus:ring-2 focus:ring-emerald-400/20;
+    @apply w-full rounded-xl border border-edge bg-glass px-4 py-2.5 text-sm text-ink placeholder-mute outline-none ring-1 ring-transparent transition focus:border-emerald-400/50 focus:bg-glass2 focus:ring-2 focus:ring-emerald-400/20 caret-emerald-500;
   }
   .glass-select {
     @apply glass-input appearance-none pe-10;
@@ -88,11 +160,11 @@
   }
 
   .btn-primary {
-    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-500 bg-[length:200%_200%] px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-emerald-500/25 ring-1 ring-white/10 transition-all duration-200 hover:brightness-110 hover:shadow-emerald-400/40 hover:ring-white/20 animate-gradient-pan motion-reduce:animate-none disabled:cursor-not-allowed disabled:opacity-50 active:translate-y-px;
+    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-500 bg-[length:200%_200%] px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-emerald-500/25 ring-1 ring-edge transition-all duration-200 hover:brightness-110 hover:shadow-emerald-400/40 hover:ring-edge3 animate-gradient-pan motion-reduce:animate-none disabled:cursor-not-allowed disabled:opacity-50 active:translate-y-px;
   }
 
   .btn-ghost {
-    @apply inline-flex items-center justify-center gap-2 rounded-xl border border-white/15 bg-white/5 px-4 py-2.5 text-sm font-semibold text-gray-200 shadow-sm backdrop-blur transition-all duration-200 hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-50;
+    @apply inline-flex items-center justify-center gap-2 rounded-xl border border-edge2 bg-glass px-4 py-2.5 text-sm font-semibold text-ink2 shadow-sm backdrop-blur transition-all duration-200 hover:bg-glass3 hover:text-ink disabled:cursor-not-allowed disabled:opacity-50;
   }
 
   /* Bright brand accent button — CTA on auth/settings pages */
@@ -105,16 +177,17 @@
     @apply relative isolate overflow-hidden;
   }
   .ripple {
-    @apply pointer-events-none absolute rounded-full bg-white/40;
+    @apply pointer-events-none absolute rounded-full;
+    background: var(--ripple);
     transform: translate(-50%, -50%) scale(0);
     animation: ripple-expand 0.6s ease-out forwards;
   }
 
   .field-label {
-    @apply mb-1.5 block text-sm font-medium text-gray-300;
+    @apply mb-1.5 block text-sm font-medium text-ink;
   }
   .field-hint {
-    @apply mt-1 block text-xs text-gray-500;
+    @apply mt-1 block text-xs text-mute;
   }
 
   /* Two-stop gradient headline text (2 stops only — 3+ reads muddy at text size) */
@@ -127,7 +200,7 @@
 
   /* Small pill / chip */
   .chip {
-    @apply inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-gray-300;
+    @apply inline-flex items-center gap-1.5 rounded-full border border-edge bg-glass px-3 py-1 text-xs font-medium text-ink2;
   }
 
   /* Section heading with gradient marker bar */
@@ -141,7 +214,7 @@
 
   /* Fine dotted grid used by the backdrop and hero */
   .bg-grid {
-    background-image: radial-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px);
+    background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
     background-size: 26px 26px;
   }
 }

package/templates/default/src/components/AppBackdrop.vue

@@ -8,7 +8,7 @@ defineOptions({ name: "AppBackdrop" });
 <template>
   <div
     aria-hidden="true"
-    class="pointer-events-none fixed inset-0 -z-10 overflow-hidden bg-[#0b0f19]"
+    class="pointer-events-none fixed inset-0 -z-10 overflow-hidden bg-page"
   >
     <!-- Aurora mesh base -->
     <div
@@ -38,6 +38,6 @@ defineOptions({ name: "AppBackdrop" });
     ></div>
 
     <!-- Vignette so content keeps contrast -->
-    <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_55%,rgba(5,8,15,0.55))]"></div>
+    <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_55%,var(--vignette))]"></div>
   </div>
 </template>

package/templates/default/src/components/AuthLayout.vue

@@ -33,7 +33,7 @@ const highlights = computed(() => [
 <template>
   <div class="grid min-h-screen lg:grid-cols-2">
     <!-- Brand panel (large screens) -->
-    <aside class="relative hidden overflow-hidden border-e border-white/10 lg:flex lg:flex-col lg:justify-between lg:p-14">
+    <aside class="relative hidden overflow-hidden border-e border-edge lg:flex lg:flex-col lg:justify-between lg:p-14">
       <div class="absolute -start-24 -top-24 h-80 w-80 rounded-full bg-emerald-500/20 blur-[100px] animate-float motion-reduce:animate-none"></div>
       <div class="absolute -end-20 bottom-10 h-72 w-72 rounded-full bg-rose-500/15 blur-[100px] animate-float motion-reduce:animate-none" style="animation-delay: -3.5s"></div>
 
@@ -41,7 +41,7 @@ const highlights = computed(() => [
         <span class="grid h-11 w-11 place-items-center rounded-2xl bg-gradient-to-br from-emerald-400 to-teal-500 text-xl font-black text-emerald-950 shadow-lg shadow-emerald-500/30">
           F
         </span>
-        <span class="text-xl font-bold text-white">{{ t("app.name") }}</span>
+        <span class="text-xl font-bold text-ink">{{ t("app.name") }}</span>
       </div>
 
       <div class="relative">
@@ -53,11 +53,11 @@ const highlights = computed(() => [
           <span class="text-xs font-medium tracking-wide text-emerald-300 uppercase">{{ t("auth.brand.badge") }}</span>
         </div>
 
-        <h1 class="text-4xl font-extrabold leading-tight tracking-tight text-white">
+        <h1 class="text-4xl font-extrabold leading-tight tracking-tight text-ink">
           {{ t("auth.brand.headline1") }}
           <span class="text-gradient">{{ t("auth.brand.headline2") }}</span>
         </h1>
-        <p class="mt-4 max-w-md text-sm leading-relaxed text-gray-400">
+        <p class="mt-4 max-w-md text-sm leading-relaxed text-mute">
           {{ t("auth.brand.tagline") }}
         </p>
 
@@ -65,9 +65,9 @@ const highlights = computed(() => [
           <li
             v-for="h in highlights"
             :key="h.title"
-            class="flex items-start gap-3 rounded-xl border border-white/10 bg-white/[0.03] p-3.5 backdrop-blur"
+            class="flex items-start gap-3 rounded-xl border border-edge bg-glass p-3.5 backdrop-blur"
           >
-            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-gradient-to-br from-emerald-400/20 to-teal-500/20 text-emerald-200 ring-1 ring-white/10">
+            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-gradient-to-br from-emerald-400/20 to-teal-500/20 text-emerald-200 ring-1 ring-edge">
               <svg v-if="h.icon === 'realtime'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
                 <circle cx="12" cy="12" r="9" />
                 <path d="M12 3a9 9 0 0 1 9 9" opacity=".4" />
@@ -84,14 +84,14 @@ const highlights = computed(() => [
               </svg>
             </span>
             <div>
-              <p class="text-sm font-semibold text-white">{{ h.title }}</p>
-              <p class="mt-0.5 text-xs text-gray-500">{{ h.desc }}</p>
+              <p class="text-sm font-semibold text-ink">{{ h.title }}</p>
+              <p class="mt-0.5 text-xs text-mute">{{ h.desc }}</p>
             </div>
           </li>
         </ul>
       </div>
 
-      <p class="relative text-xs text-gray-500">
+      <p class="relative text-xs text-mute">
         {{ t("auth.brand.footer") }}
       </p>
     </aside>
@@ -103,8 +103,8 @@ const highlights = computed(() => [
           <div class="mx-auto mb-5 grid h-12 w-12 place-items-center rounded-2xl bg-gradient-to-br from-emerald-400 to-teal-500 text-2xl font-black text-emerald-950 shadow-lg shadow-emerald-500/30 lg:hidden">
             F
           </div>
-          <h1 class="text-2xl font-bold text-white">{{ title }}</h1>
-          <p v-if="subtitle" class="mt-2 text-sm text-gray-400">{{ subtitle }}</p>
+          <h1 class="text-2xl font-bold text-ink">{{ title }}</h1>
+          <p v-if="subtitle" class="mt-2 text-sm text-mute">{{ subtitle }}</p>
         </div>
         <GlassCard spotlight class="p-6 sm:p-8">
           <slot />

package/templates/default/src/components/ToggleSwitch.vue

@@ -19,7 +19,7 @@ function toggle() {
     :class="
       modelValue
         ? 'border-emerald-300/40 bg-gradient-to-r from-emerald-500 to-teal-500'
-        : 'border-white/15 bg-white/10'
+        : 'border-edge2 bg-glass'
     "
     @click="toggle"
   >

package/templates/default/src/components/settings/AIAgentDialog.vue

@@ -23,7 +23,6 @@ const form = ref({
   model: user?.ai_agent?.model ?? "llama-3.3-70b-versatile",
   temperature: user?.ai_agent?.temperature ?? 0.7,
   reasoning: user?.ai_agent?.reasoning ?? false,
-  system_prompt: user?.ai_agent?.system_prompt ?? "",
 });
 
 const models = [
@@ -63,8 +62,8 @@ async function save() {
           AI
         </span>
         <div>
-          <h2 class="text-base font-semibold text-white">{{ t("aiAgent.key.title") }}</h2>
-          <p class="text-xs text-gray-500">{{ t("aiAgent.key.subtitle") }}</p>
+          <h2 class="text-base font-semibold text-ink">{{ t("aiAgent.key.title") }}</h2>
+          <p class="text-xs text-mute">{{ t("aiAgent.key.subtitle") }}</p>
         </div>
         <span class="ms-auto inline-flex items-center gap-1.5 rounded-full bg-emerald-500/15 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wide text-emerald-300">
           <span class="relative inline-flex h-1.5 w-1.5">
@@ -75,16 +74,16 @@ async function save() {
         </span>
       </div>
 
-      <ol class="mt-5 flex flex-col gap-3">
-        <li
+      <div class="mt-5 flex flex-col gap-3 rounded-xl border border-edge bg-glass p-4">
+        <div
           v-for="(step, i) in steps"
           :key="step.num"
-          class="group flex items-start gap-3.5 rounded-xl border border-white/10 bg-white/[0.03] p-4 transition hover:border-emerald-300/25 hover:bg-white/[0.05]"
+          class="flex items-start gap-3.5"
         >
           <span class="relative grid h-8 w-8 shrink-0 place-items-center rounded-full bg-gradient-to-br from-emerald-500/20 to-teal-500/20 font-bold text-emerald-300 ring-1 ring-emerald-300/30">
             {{ step.num }}
           </span>
-          <span class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-white/5 text-gray-400 ring-1 ring-white/10 transition group-hover:text-emerald-300">
+          <span class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-glass text-mute ring-1 ring-edge">
             <svg v-if="step.icon === 'account'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
               <circle cx="12" cy="8" r="4" />
               <path d="M4 21a8 8 0 0 1 16 0" />
@@ -101,9 +100,9 @@ async function save() {
               <path d="M12 16v4M8 20h8" />
             </svg>
           </span>
-          <span class="flex-1 pt-0.5 text-sm leading-relaxed text-gray-300">{{ t(`aiAgent.key.steps.${step.num}`) }}</span>
-        </li>
-      </ol>
+          <span class="flex-1 pt-0.5 text-sm leading-relaxed text-ink2">{{ t(`aiAgent.key.steps.${step.num}`) }}</span>
+        </div>
+      </div>
 
       <div class="mt-4 flex items-start gap-2.5 rounded-xl border border-amber-300/20 bg-amber-500/10 p-3.5 text-xs leading-relaxed text-amber-200">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-0.5 h-4 w-4 shrink-0">
@@ -118,8 +117,8 @@ async function save() {
     <GlassCard spotlight class="p-4 sm:p-6">
       <div class="flex items-center justify-between gap-4">
         <div>
-          <h2 class="text-base font-semibold text-white">{{ t("aiAgent.settings.title") }}</h2>
-          <p class="mt-1 text-sm text-gray-400">{{ t("aiAgent.settings.hint") }}</p>
+          <h2 class="text-base font-semibold text-ink">{{ t("aiAgent.settings.title") }}</h2>
+          <p class="mt-1 text-sm text-mute">{{ t("aiAgent.settings.hint") }}</p>
         </div>
         <ToggleSwitch v-model="form.enabled" />
       </div>
@@ -133,15 +132,15 @@ async function save() {
               :key="m.id"
               type="button"
               class="flex items-center gap-3 rounded-xl border px-3.5 py-3 text-start transition"
-              :class="form.model === m.id ? 'border-emerald-300/50 bg-emerald-500/15 shadow-lg shadow-emerald-500/10' : 'border-white/10 bg-white/[0.03] hover:bg-white/[0.07]'"
+              :class="form.model === m.id ? 'border-emerald-300/50 bg-emerald-500/15 shadow-lg shadow-emerald-500/10' : 'border-edge bg-glass hover:bg-glass2'"
               @click="form.model = m.id"
             >
-              <span class="grid h-7 w-7 shrink-0 place-items-center rounded-lg text-[10px] font-black" :class="form.model === m.id ? 'bg-emerald-400/20 text-emerald-300' : 'bg-white/5 text-gray-500'">
+              <span class="grid h-7 w-7 shrink-0 place-items-center rounded-lg text-[10px] font-black" :class="form.model === m.id ? 'bg-emerald-400/20 text-emerald-300' : 'bg-glass text-mute'">
                 {{ m.tag.slice(0, 2) }}
               </span>
               <span class="min-w-0">
-                <span class="block truncate font-mono text-xs font-medium text-gray-200">{{ m.id }}</span>
-                <span class="mt-0.5 flex items-center gap-1 text-[10px] text-gray-500">
+                <span class="block truncate font-mono text-xs font-medium text-ink2">{{ m.id }}</span>
+                <span class="mt-0.5 flex items-center gap-1 text-[10px] text-mute">
                   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3">
                     <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" />
                   </svg>
@@ -168,26 +167,16 @@ async function save() {
             step="0.1"
             class="mt-2 w-full accent-emerald-500"
           />
-          <div class="flex justify-between text-xs text-gray-500">
+          <div class="flex justify-between text-xs text-mute">
             <span>{{ t("aiAgent.temperatureLow") }}</span>
             <span>{{ t("aiAgent.temperatureHigh") }}</span>
           </div>
         </label>
 
-        <label class="block">
-          <span class="field-label">{{ t("aiAgent.systemPrompt") }}</span>
-          <textarea
-            v-model="form.system_prompt"
-            rows="4"
-            class="glass-input resize-y font-mono text-xs"
-            :placeholder="t('aiAgent.systemPromptPlaceholder')"
-          ></textarea>
-        </label>
-
-        <label class="flex cursor-pointer items-center gap-3 rounded-xl border border-white/10 bg-white/[0.03] p-4">
+        <label class="flex cursor-pointer items-center gap-3 rounded-xl border border-edge bg-glass p-4">
           <ToggleSwitch v-model="form.reasoning" />
-          <span class="text-sm text-gray-300">{{ t("aiAgent.reasoning") }}</span>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ms-auto h-4 w-4 text-gray-500">
+          <span class="text-sm text-ink2">{{ t("aiAgent.reasoning") }}</span>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ms-auto h-4 w-4 text-mute">
             <circle cx="12" cy="12" r="10" />
             <path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3" />
             <path d="M12 17h.01" />