agmon 0.2.0 → 0.2.1

package/src/components/store/SupporterStoreModal.jsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect } from "react";
 import { Modal, Button } from "@/components/ui";
 import { ShieldCheck } from "lucide-react";
 import { getSupporterState, SUPPORTER_CHANGE_EVENT } from "@/lib/supporterStore";
+import { TOTAL_CATALOG_COUNT } from "@/lib/catalog/index.js";
 import SupporterStoreView from "./SupporterStoreView";
 
 export default function SupporterStoreModal({ isOpen, onClose }) {
@@ -21,7 +22,7 @@ export default function SupporterStoreModal({ isOpen, onClose }) {
     <Modal
       isOpen={isOpen}
       onClose={onClose}
-      title="Supporter Store & Vault (1,000 Tech Items & 3D Effects)"
+      title={`Supporter Store & Vault (${TOTAL_CATALOG_COUNT} Tech Items & 3D Effects)`}
       description="Support the developer to maintain the project and unlock custom AGMon virtual office decorations"
       size="full"
       footer={
@@ -30,7 +31,7 @@ export default function SupporterStoreModal({ isOpen, onClose }) {
             {storeState.isSupporter ? (
               <span className="flex items-center gap-1.5 text-amber-400 font-semibold">
                 <ShieldCheck className="w-4 h-4 text-amber-400" />
-                <span>Status: VIP Supporter Activated (All 1,000 items unlocked)</span>
+                <span>Status: VIP Supporter Activated (All {TOTAL_CATALOG_COUNT} items unlocked)</span>
               </span>
             ) : (
               <span>100% of AGMon core engineering features remain completely free</span>

package/src/components/store/SupporterStoreView.jsx

@@ -44,7 +44,10 @@ import {
   SUPPORTER_CHANGE_EVENT,
 } from "@/lib/supporterStore";
 import { startAmbient, stopAmbient, setAmbientVolume } from "@/lib/ambientAudio";
+import { TOTAL_CATALOG_COUNT } from "@/lib/catalog/index.js";
 import { Item3DPreview } from "./Item3DRenderer";
+import LiveFittingRoom from "./LiveFittingRoom";
+import { LiveReactAgent } from "./LiveReactAgent";
 
 // VietQR donation recipient info (MB Bank)
 const VIETQR_CONFIG = {
@@ -77,7 +80,7 @@ const DONATE_TIERS = [
     amount: 100000,
     amountUsd: "$5",
     tag: "VIP Supporter",
-    description: "Unlock all 1,000 3D isometric items, aura effects, and exclusive badges.",
+    description: `Unlock all ${TOTAL_CATALOG_COUNT} 3D isometric items, aura effects, and exclusive badges.`,
   },
 ];
 
@@ -253,9 +256,16 @@ export default function SupporterStoreView({ hideHeader = false, onClose = null
     {
       id: "all",
       label: "All Items",
-      count: 1010,
+      count: TOTAL_CATALOG_COUNT,
       icon: Grid,
-      desc: "10 Themes · 250 Skins · 350 Props · 200 Pets · 100 Auras · 100 Trophies",
+      desc: "10 Themes · 50 Skins · 35 Props · 21 Pets · 16 Auras · 16 Trophies",
+    },
+    {
+      id: "fitting_room",
+      label: "Live Fitting Room",
+      badge: "LIVE 3D",
+      icon: Sparkles,
+      desc: "Interactive avatar sandbox, mix props & test actions",
     },
     {
       id: "themes",
@@ -371,7 +381,7 @@ export default function SupporterStoreView({ hideHeader = false, onClose = null
             </div>
             <div>
               <h2 className="text-sm font-bold text-white leading-tight">Supporter Store</h2>
-              <p className="text-[11px] text-amber-400 font-mono">1,000 3D Items & Effects</p>
+              <p className="text-[11px] text-amber-400 font-mono">{TOTAL_CATALOG_COUNT} 3D Items & Effects</p>
             </div>
           </div>
           {onClose && (
@@ -391,7 +401,7 @@ export default function SupporterStoreView({ hideHeader = false, onClose = null
             <Search className="w-3.5 h-3.5 text-slate-500 absolute left-2.5 top-1/2 -translate-y-1/2" />
             <input
               type="text"
-              placeholder="Search across 1,000 items..."
+              placeholder={`Search across ${TOTAL_CATALOG_COUNT} items...`}
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               className="w-full pl-8 pr-7 py-1.5 bg-[#202026] border border-[#33333d] rounded-lg text-xs text-white placeholder-slate-500 focus:outline-none focus:border-[#007acc] transition-colors"
@@ -410,7 +420,7 @@ export default function SupporterStoreView({ hideHeader = false, onClose = null
         {/* Aside Category Navigation Menu */}
         <nav className="flex-1 overflow-y-auto p-2 space-y-1 text-xs">
           <div className="px-2 py-1 text-[10px] font-bold text-slate-500 uppercase tracking-wider">
-            Categories (1,000 Items)
+            Categories ({TOTAL_CATALOG_COUNT} Items)
           </div>
           {asideMenuItems.map((item) => {
             const isActive = activeTab === item.id;
@@ -494,10 +504,10 @@ export default function SupporterStoreView({ hideHeader = false, onClose = null
                 type="button"
                 onClick={handleQuickUnlockAll}
                 className="w-full flex items-center justify-center gap-1.5 px-3 py-1.5 bg-gradient-to-r from-amber-500/20 to-amber-600/20 hover:from-amber-500/30 hover:to-amber-600/30 border border-amber-500/40 text-amber-300 rounded-lg text-xs font-semibold cursor-pointer transition-all shadow-sm"
-                title="Unlock all 1,000 items instantly to preview"
+                title={`Unlock all ${TOTAL_CATALOG_COUNT} items instantly to preview`}
               >
                 <Zap className="w-3.5 h-3.5 text-amber-400" />
-                <span>Unlock all 1,000 items (VIP Demo)</span>
+                <span>Unlock all {TOTAL_CATALOG_COUNT} items (VIP Demo)</span>
               </button>
             </div>
           )}
@@ -519,10 +529,20 @@ export default function SupporterStoreView({ hideHeader = false, onClose = null
           </div>
 
           <div className="flex items-center gap-3 p-2 rounded-xl bg-[#1d1d23] border border-[#2b2b34] shadow-inner">
-            <div className="w-14 h-14 rounded-lg bg-[#141418] border border-[#33333d] flex items-center justify-center shrink-0 overflow-hidden">
-              <div className="scale-75">
-                <Item3DPreview itemId={storeState.equippedSkin} className="w-20 h-20" />
-              </div>
+            <div className="w-14 h-14 rounded-lg bg-[#141418] border border-[#33333d] flex items-center justify-center shrink-0 overflow-hidden relative shadow-inner">
+              <LiveReactAgent
+                skinId={storeState.equippedSkin || "skin_0"}
+                petId={storeState.equippedPet || "pet_0"}
+                propsList={storeState.equippedProps || []}
+                auraId={storeState.equippedAura || "aura_0"}
+                themeId={storeState.equippedOfficeTheme || "theme_default"}
+                mode="streaming"
+                intensity={0.5}
+                showFloor={false}
+                showDesk={false}
+                interactive={false}
+                className="w-full h-full"
+              />
             </div>
             <div className="space-y-0.5 flex-1 min-w-0">
               <div className="font-bold text-white text-xs truncate">
@@ -554,6 +574,15 @@ export default function SupporterStoreView({ hideHeader = false, onClose = null
               )}
             </div>
           </div>
+
+          <button
+            type="button"
+            onClick={() => setActiveTab("fitting_room")}
+            className="w-full flex items-center justify-center gap-1.5 py-1.5 px-3 rounded-lg bg-cyan-500/10 hover:bg-cyan-500/20 border border-cyan-500/30 text-cyan-300 text-xs font-semibold cursor-pointer transition-all shadow-sm"
+          >
+            <Sparkles className="w-3.5 h-3.5 text-cyan-400" />
+            <span>Open 3D Fitting Room</span>
+          </button>
         </div>
       </aside>
 
@@ -564,10 +593,11 @@ export default function SupporterStoreView({ hideHeader = false, onClose = null
           <div>
             <div className="flex items-center gap-2">
               <span className="text-xs font-mono font-bold px-2 py-0.5 rounded bg-[#007acc]/20 text-cyan-300 border border-[#007acc]/40">
-                CATALOG 1,010
+                CATALOG {TOTAL_CATALOG_COUNT}
               </span>
               <h1 className="text-base font-bold text-white flex items-center gap-2">
                 {activeTab === "all" && <Grid className="w-4 h-4 text-cyan-400" />}
+                {activeTab === "fitting_room" && <Sparkles className="w-4 h-4 text-cyan-400" />}
                 {activeTab === "themes" && <Palette className="w-4 h-4 text-purple-400" />}
                 {activeTab === "skins" && <Bot className="w-4 h-4 text-pink-400" />}
                 {activeTab === "props" && <Laptop className="w-4 h-4 text-emerald-400" />}
@@ -577,20 +607,22 @@ export default function SupporterStoreView({ hideHeader = false, onClose = null
                 {activeTab === "ambient" && <Volume2 className="w-4 h-4 text-cyan-400" />}
                 {activeTab === "donate" && <Coffee className="w-4 h-4 text-amber-400" />}
                 <span>
-                  {activeTab === "all" && "All 1,010 Tech Items & 3D Effects"}
+                  {activeTab === "all" && `All ${TOTAL_CATALOG_COUNT} Tech Items & 3D Effects`}
+                  {activeTab === "fitting_room" && "Live Avatar Fitting Room & Sandbox"}
                   {activeTab === "themes" && "Office Themes & Wallpapers (10 Floor Styles)"}
-                  {activeTab === "skins" && "Agent 3D Skins (250 Armor & Visor Models)"}
-                  {activeTab === "props" && "Desk Props & Hardware (350 Devices & Rigs)"}
-                  {activeTab === "pets" && "Pets & Cyber Companions (200 Pets & Drones)"}
-                  {activeTab === "auras" && "Auras & Character Effects (100 Energy Spectrums)"}
-                  {activeTab === "trophies" && "Trophies & Silicon Badges (100 3D Medals)"}
+                  {activeTab === "skins" && "Agent 3D Skins (50 Curated Armor & Visor Models)"}
+                  {activeTab === "props" && "Desk Props & Hardware (35 Curated Devices & Rigs)"}
+                  {activeTab === "pets" && "Pets & Cyber Companions (21 Pets & Drones)"}
+                  {activeTab === "auras" && "Auras & Character Effects (16 Energy Spectrums)"}
+                  {activeTab === "trophies" && "Trophies & Silicon Badges (16 3D Medals)"}
                   {activeTab === "ambient" && "Lo-Fi Ambient Audio (6 Soundscapes)"}
                   {activeTab === "donate" && "Buy Me a Coffee (VietQR Bank Transfer)"}
                 </span>
               </h1>
             </div>
             <p className="text-xs text-slate-400 mt-1">
-              {activeTab === "all" && "Collection of 1,010 high-precision 3D isometric items: cast shadows, directional lighting, and microchip details."}
+              {activeTab === "all" && `Collection of ${TOTAL_CATALOG_COUNT} high-precision 3D isometric items: cast shadows, directional lighting, and microchip details.`}
+              {activeTab === "fitting_room" && "Interactive 3D sandbox to mix skins, desk props, cyber pets, auras, and floor styles with live animated actions."}
               {activeTab === "themes" && "Custom floor environments, neon gridlines, and ambient lighting for the 2D Virtual Office canvas."}
               {activeTab === "skins" && "Customize chibi robot avatars for AI programming agents on the visual canvas."}
               {activeTab === "props" && "Decorate workstations with dual displays, server racks, espresso machines, and cyber bonsai."}
@@ -633,7 +665,9 @@ export default function SupporterStoreView({ hideHeader = false, onClose = null
             </div>
 
             <span className="text-xs font-mono text-cyan-300 bg-[#202026] px-3 py-1 rounded-md border border-[#2f2f38]">
-              {activeTab === "ambient"
+              {activeTab === "fitting_room"
+                ? "Live 3D Stage"
+                : activeTab === "ambient"
                 ? `${(COSMETIC_CATALOG.soundscapes || []).length} Audio Tracks`
                 : activeTab === "donate"
                 ? "3 Tiers"
@@ -655,13 +689,14 @@ export default function SupporterStoreView({ hideHeader = false, onClose = null
         {/* Quick Category Tabs Bar */}
         <div className="px-6 py-2 bg-[#1b1b20] border-b border-[#26262b] flex items-center gap-1.5 overflow-x-auto text-xs shrink-0">
           {[
-            { id: "all", label: "All (1,010)", icon: Grid },
-            { id: "themes", label: "Themes (10)", icon: Palette },
-            { id: "skins", label: "Skins (250)", icon: Bot },
-            { id: "props", label: "Props (350)", icon: Laptop },
-            { id: "pets", label: "Pets (200)", icon: Gift },
-            { id: "auras", label: "Auras (100)", icon: Sparkles },
-            { id: "trophies", label: "Trophies (100)", icon: Trophy },
+            { id: "all", label: `All (${TOTAL_CATALOG_COUNT})`, icon: Grid },
+            { id: "fitting_room", label: "Fitting Room (3D)", icon: Sparkles },
+            { id: "themes", label: `Themes (${(COSMETIC_CATALOG.officeThemes || []).length})`, icon: Palette },
+            { id: "skins", label: `Skins (${(COSMETIC_CATALOG.skins || []).length})`, icon: Bot },
+            { id: "props", label: `Props (${(COSMETIC_CATALOG.props || []).length})`, icon: Laptop },
+            { id: "pets", label: `Pets (${(COSMETIC_CATALOG.pets || []).length})`, icon: Gift },
+            { id: "auras", label: `Auras (${(COSMETIC_CATALOG.auras || []).length})`, icon: Sparkles },
+            { id: "trophies", label: `Trophies (${(COSMETIC_CATALOG.trophies || []).length})`, icon: Trophy },
             { id: "ambient", label: "Ambient (6)", icon: Volume2 },
             { id: "donate", label: "VietQR Vault", icon: Coffee },
           ].map((cat) => {
@@ -688,6 +723,14 @@ export default function SupporterStoreView({ hideHeader = false, onClose = null
         <div className="flex-1 overflow-y-auto p-4 sm:p-6">
           <div className="max-w-7xl mx-auto space-y-6">
 
+            {/* TAB: LIVE FITTING ROOM & SANDBOX */}
+            {activeTab === "fitting_room" && (
+              <LiveFittingRoom
+                initialStoreState={storeState}
+                onEquipSuccess={(updated) => setStoreState(updated)}
+              />
+            )}
+
             {/* TAB: AMBIENT SOUNDSCAPES */}
             {activeTab === "ambient" && (
               <section className="space-y-4">
@@ -795,7 +838,7 @@ export default function SupporterStoreView({ hideHeader = false, onClose = null
                     <h2 className="text-xl font-bold text-white">Supporter Vault - Fuel the Developers</h2>
                     <p className="text-xs text-slate-300 leading-relaxed">
                       AGMon is built independently with high-quality open-source spirit.
-                      Every donation via VietQR helps support server infrastructure, sustain development, and unlocks all 1,000 3D isometric items.
+                      Every donation via VietQR helps support server infrastructure, sustain development, and unlocks all {TOTAL_CATALOG_COUNT} 3D isometric items.
                     </p>
                   </div>
                 </div>
@@ -934,8 +977,8 @@ export default function SupporterStoreView({ hideHeader = false, onClose = null
               </section>
             )}
 
-            {/* TAB: ITEM GRID (ALL, SKINS, PROPS, PETS, AURAS, TROPHIES) */}
-            {activeTab !== "ambient" && activeTab !== "donate" && (
+            {/* TAB: ITEM GRID (ALL, THEMES, SKINS, PROPS, PETS, AURAS, TROPHIES) */}
+            {activeTab !== "ambient" && activeTab !== "donate" && activeTab !== "fitting_room" && (
               <section className="space-y-4">
                 {/* Items Grid */}
                 <div className={gridClasses}>
@@ -982,9 +1025,26 @@ export default function SupporterStoreView({ hideHeader = false, onClose = null
 
                         {/* Equip Action Bar */}
                         <div className="mt-3 pt-2.5 border-t border-[#2a2a34] flex items-center justify-between">
-                          <span className="text-[10px] text-slate-500 uppercase font-mono font-bold">
-                            {isEquipped ? "EQUIPPED" : isUnlocked ? "UNLOCKED" : "LOCKED"}
-                          </span>
+                          <div className="flex items-center gap-1.5">
+                            <span className="text-[10px] text-slate-500 uppercase font-mono font-bold">
+                              {isEquipped ? "EQUIPPED" : isUnlocked ? "UNLOCKED" : "LOCKED"}
+                            </span>
+                            <button
+                              type="button"
+                              onClick={() => {
+                                if (item.category === "skins") equipSkin(item.id);
+                                else if (item.category === "pets") equipPet(item.id);
+                                else if (item.category === "props") toggleProp(item.id);
+                                else if (item.category === "auras") equipAura(item.id);
+                                else if (item.category === "themes") equipOfficeTheme(item.id);
+                                setActiveTab("fitting_room");
+                              }}
+                              className="p-1 rounded hover:bg-cyan-500/20 text-slate-400 hover:text-cyan-300 transition-colors cursor-pointer"
+                              title="Test in 3D Fitting Room"
+                            >
+                              <Sparkles className="w-3.5 h-3.5" />
+                            </button>
+                          </div>
 
                           {isUnlocked ? (
                             <button

package/src/components/theme/ThemeSettingsModal.jsx

@@ -69,19 +69,19 @@ export default function ThemeSettingsModal({ isOpen = false, onClose, initialTab
       aria-modal="true"
       className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm animate-in fade-in"
     >
-      <div className="w-full max-w-2xl bg-[#1e1e1e] border border-[#333333] rounded-xl shadow-2xl overflow-hidden flex flex-col text-[#cccccc] font-sans max-h-[85vh]">
+      <div className="w-full max-w-2xl bg-[var(--bg-editor)] border border-[var(--border-card)] rounded-xl shadow-2xl overflow-hidden flex flex-col text-[var(--text-main)] font-sans max-h-[85vh]">
         {/* Header */}
-        <div className="h-[46px] min-h-[46px] bg-[#252526] border-b border-[#2b2b2b] px-4 flex items-center justify-between shrink-0 select-none">
+        <div className="h-[46px] min-h-[46px] bg-[var(--bg-card)] border-b border-[var(--border-subtle)] px-4 flex items-center justify-between shrink-0 select-none">
           <div className="flex items-center gap-2">
-            <Palette className="w-4 h-4 text-[#007acc]" />
-            <h2 className="text-xs font-bold uppercase tracking-wider text-white">
+            <Palette className="w-4 h-4 text-[var(--accent-primary)]" />
+            <h2 className="text-xs font-bold uppercase tracking-wider text-[var(--text-bright)]">
               Preferences: Theme & Typography (VS Code Settings)
             </h2>
           </div>
 
           <button
             onClick={onClose}
-            className="p-1 rounded text-slate-400 hover:text-white hover:bg-[#333333] transition-colors cursor-pointer"
+            className="p-1 rounded text-[var(--text-muted)] hover:text-[var(--text-bright)] hover:bg-[var(--bg-hover)] transition-colors cursor-pointer"
             title="Close (Escape)"
           >
             <X className="w-4 h-4" />
@@ -89,17 +89,17 @@ export default function ThemeSettingsModal({ isOpen = false, onClose, initialTab
         </div>
 
         {/* Tab Switcher */}
-        <div className="flex items-center gap-1 px-4 py-2 border-b border-[#2b2b2b] bg-[#181818] shrink-0 select-none">
+        <div className="flex items-center gap-1 px-4 py-2 border-b border-[var(--border-subtle)] bg-[var(--bg-card-inner)] shrink-0 select-none">
           <button
             type="button"
             onClick={() => setActiveTab("themes")}
             className={`flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-semibold transition-colors cursor-pointer ${
               activeTab === "themes"
-                ? "bg-[#252526] text-white border border-[#3e3e42]"
-                : "text-slate-400 hover:text-slate-200"
+                ? "bg-[var(--bg-card)] text-[var(--text-bright)] border border-[var(--border-card)] shadow-xs"
+                : "text-[var(--text-muted)] hover:text-[var(--text-bright)]"
             }`}
           >
-            <Palette className="w-3.5 h-3.5 text-cyan-400" />
+            <Palette className="w-3.5 h-3.5 text-[var(--accent-primary)]" />
             <span>Color Themes ({AVAILABLE_THEMES.length})</span>
           </button>
 
@@ -108,11 +108,11 @@ export default function ThemeSettingsModal({ isOpen = false, onClose, initialTab
             onClick={() => setActiveTab("fonts")}
             className={`flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-semibold transition-colors cursor-pointer ${
               activeTab === "fonts"
-                ? "bg-[#252526] text-white border border-[#3e3e42]"
-                : "text-slate-400 hover:text-slate-200"
+                ? "bg-[var(--bg-card)] text-[var(--text-bright)] border border-[var(--border-card)] shadow-xs"
+                : "text-[var(--text-muted)] hover:text-[var(--text-bright)]"
             }`}
           >
-            <Type className="w-3.5 h-3.5 text-emerald-400" />
+            <Type className="w-3.5 h-3.5 text-[var(--accent-secondary)]" />
             <span>Typography & Fonts</span>
           </button>
         </div>
@@ -122,7 +122,7 @@ export default function ThemeSettingsModal({ isOpen = false, onClose, initialTab
           {activeTab === "themes" ? (
             /* TAB 1: COLOR THEMES */
             <div className="space-y-3">
-              <div className="text-xs text-slate-400">
+              <div className="text-xs text-[var(--text-muted)]">
                 Choose color theme for workbench, dialogs, sidebar, and toolbars:
               </div>
 
@@ -135,29 +135,29 @@ export default function ThemeSettingsModal({ isOpen = false, onClose, initialTab
                       onClick={() => handleSelectTheme(th.id)}
                       className={`group relative p-3 rounded-lg border transition-all cursor-pointer flex flex-col justify-between space-y-2.5 ${
                         isSelected
-                          ? "bg-[#252526] border-[#007acc] shadow-md shadow-[#007acc]/10"
-                          : "bg-[#181818] border-[#2b2b2b] hover:border-[#3e3e42] hover:bg-[#252526]/50"
+                          ? "bg-[var(--bg-card)] border-[var(--accent-primary)] shadow-md shadow-[var(--accent-primary)]/10 ring-1 ring-[var(--accent-primary)]/40"
+                          : "bg-[var(--bg-card-inner)] border-[var(--border-card)] hover:border-[var(--accent-primary)]/50 hover:bg-[var(--bg-card)]"
                       }`}
                     >
                       <div className="flex items-center justify-between">
                         <div className="flex items-center gap-2">
-                          <span className="font-bold text-xs text-white">
+                          <span className="font-bold text-xs text-[var(--text-bright)]">
                             {th.name}
                           </span>
-                          <span className="text-[9px] px-1.5 py-0.2 rounded border border-[#3e3e42] text-slate-400 uppercase font-mono">
+                          <span className="text-[9px] px-1.5 py-0.2 rounded border border-[var(--border-card)] text-[var(--text-muted)] uppercase font-mono bg-[var(--bg-card)]">
                             {th.category}
                           </span>
                         </div>
 
                         {isSelected && (
-                          <div className="w-4 h-4 rounded-full bg-[#007acc] text-white flex items-center justify-center shrink-0">
+                          <div className="w-4 h-4 rounded-full bg-[var(--accent-primary)] text-[var(--text-on-accent,#ffffff)] flex items-center justify-center shrink-0">
                             <Check className="w-2.5 h-2.5" />
                           </div>
                         )}
                       </div>
 
                       {/* Swatch color preview bar */}
-                      <div className="flex items-center gap-1 h-3 rounded overflow-hidden p-0.5 bg-black/40 border border-[#2b2b2b]">
+                      <div className="flex items-center gap-1 h-3 rounded overflow-hidden p-0.5 bg-black/10 dark:bg-black/40 border border-[var(--border-card)]">
                         <span
                           className="h-full flex-1 rounded-xs"
                           style={{ backgroundColor: th.colors.workbench }}
@@ -180,7 +180,7 @@ export default function ThemeSettingsModal({ isOpen = false, onClose, initialTab
                         />
                       </div>
 
-                      <p className="text-[11px] text-slate-400 leading-relaxed">
+                      <p className="text-[11px] text-[var(--text-muted)] leading-relaxed">
                         {th.description}
                       </p>
                     </div>
@@ -192,26 +192,26 @@ export default function ThemeSettingsModal({ isOpen = false, onClose, initialTab
             /* TAB 2: TYPOGRAPHY & FONTS */
             <div className="space-y-4 text-xs">
               {/* UI Font */}
-              <div className="p-3 rounded-lg bg-[#181818] border border-[#2b2b2b] space-y-2">
+              <div className="p-3 rounded-lg bg-[var(--bg-card-inner)] border border-[var(--border-card)] space-y-2">
                 <div className="flex items-center justify-between">
-                  <span className="font-bold text-slate-200 uppercase tracking-wider text-[11px]">
+                  <span className="font-bold text-[var(--text-bright)] uppercase tracking-wider text-[11px]">
                     1. UI Font Family
                   </span>
-                  <span className="text-[10px] text-slate-500 font-mono">--font-family-ui</span>
+                  <span className="text-[10px] text-[var(--text-muted)] font-mono">--font-family-ui</span>
                 </div>
                 <select
                   value={settings.uiFont}
                   onChange={(e) => handleUpdateFont("uiFont", e.target.value)}
-                  className="w-full bg-[#252526] text-slate-200 border border-[#3e3e42] rounded px-3 py-1.5 text-xs outline-none focus:border-[#007acc] cursor-pointer"
+                  className="w-full bg-[var(--bg-card)] text-[var(--text-main)] border border-[var(--border-card)] rounded px-3 py-1.5 text-xs outline-none focus:border-[var(--accent-primary)] cursor-pointer"
                 >
                   {AVAILABLE_UI_FONTS.map((f) => (
-                    <option key={f.id} value={f.id} className="bg-[#252526] text-slate-200">
+                    <option key={f.id} value={f.id} className="bg-[var(--bg-card)] text-[var(--text-main)]">
                       {f.name}
                     </option>
                   ))}
                 </select>
                 <div
-                  className="p-2 rounded bg-black/40 border border-[#2b2b2b] text-slate-300 text-xs"
+                  className="p-2 rounded bg-[var(--bg-card)] border border-[var(--border-card)] text-[var(--text-main)] text-xs"
                   style={{ fontFamily: "var(--font-family-ui)" }}
                 >
                   UI Preview: Agent Factory - Realtime multi-agent activity and telemetry monitor.
@@ -219,26 +219,26 @@ export default function ThemeSettingsModal({ isOpen = false, onClose, initialTab
               </div>
 
               {/* Code Monospace Font */}
-              <div className="p-3 rounded-lg bg-[#181818] border border-[#2b2b2b] space-y-2">
+              <div className="p-3 rounded-lg bg-[var(--bg-card-inner)] border border-[var(--border-card)] space-y-2">
                 <div className="flex items-center justify-between">
-                  <span className="font-bold text-slate-200 uppercase tracking-wider text-[11px]">
+                  <span className="font-bold text-[var(--text-bright)] uppercase tracking-wider text-[11px]">
                     2. Monospace Font (Code & Console)
                   </span>
-                  <span className="text-[10px] text-slate-500 font-mono">--font-family-mono</span>
+                  <span className="text-[10px] text-[var(--text-muted)] font-mono">--font-family-mono</span>
                 </div>
                 <select
                   value={settings.codeFont}
                   onChange={(e) => handleUpdateFont("codeFont", e.target.value)}
-                  className="w-full bg-[#252526] text-slate-200 border border-[#3e3e42] rounded px-3 py-1.5 text-xs outline-none focus:border-[#007acc] cursor-pointer"
+                  className="w-full bg-[var(--bg-card)] text-[var(--text-main)] border border-[var(--border-card)] rounded px-3 py-1.5 text-xs outline-none focus:border-[var(--accent-primary)] cursor-pointer"
                 >
                   {AVAILABLE_CODE_FONTS.map((f) => (
-                    <option key={f.id} value={f.id} className="bg-[#252526] text-slate-200">
+                    <option key={f.id} value={f.id} className="bg-[var(--bg-card)] text-[var(--text-main)]">
                       {f.name}
                     </option>
                   ))}
                 </select>
                 <div
-                  className="p-2 rounded bg-black/40 border border-[#2b2b2b] text-emerald-400 font-mono text-[11px] leading-relaxed"
+                  className="p-2 rounded bg-[var(--bg-chat-code)] border border-[var(--border-card)] text-[var(--text-chat-code)] font-mono text-[11px] leading-relaxed"
                   style={{ fontFamily: "var(--font-family-mono)" }}
                 >
                   const agent = &#123; id: &quot;gemini-3.8-flash&quot;, tokens: 142857, state: &quot;streaming&quot; &#125;;
@@ -246,12 +246,12 @@ export default function ThemeSettingsModal({ isOpen = false, onClose, initialTab
               </div>
 
               {/* Font Size */}
-              <div className="p-3 rounded-lg bg-[#181818] border border-[#2b2b2b] space-y-2">
+              <div className="p-3 rounded-lg bg-[var(--bg-card-inner)] border border-[var(--border-card)] space-y-2">
                 <div className="flex items-center justify-between">
-                  <span className="font-bold text-slate-200 uppercase tracking-wider text-[11px]">
+                  <span className="font-bold text-[var(--text-bright)] uppercase tracking-wider text-[11px]">
                     3. Base Font Size
                   </span>
-                  <span className="text-[10px] text-slate-500 font-mono">--font-size-ui</span>
+                  <span className="text-[10px] text-[var(--text-muted)] font-mono">--font-size-ui</span>
                 </div>
                 <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                   {AVAILABLE_FONT_SIZES.map((sz) => (
@@ -261,8 +261,8 @@ export default function ThemeSettingsModal({ isOpen = false, onClose, initialTab
                       onClick={() => handleUpdateFont("fontSize", sz.id)}
                       className={`p-2 rounded border text-xs font-semibold transition-colors cursor-pointer text-center ${
                         settings.fontSize === sz.id
-                          ? "bg-[#007acc]/20 border-[#007acc] text-cyan-300"
-                          : "bg-[#252526] border-[#3e3e42] text-slate-400 hover:text-white"
+                          ? "bg-[var(--accent-primary)]/15 border-[var(--accent-primary)] text-[var(--accent-primary)] font-bold shadow-xs"
+                          : "bg-[var(--bg-card)] border-[var(--border-card)] text-[var(--text-muted)] hover:text-[var(--text-bright)] hover:bg-[var(--bg-hover)]"
                       }`}
                     >
                       {sz.label}
@@ -275,10 +275,10 @@ export default function ThemeSettingsModal({ isOpen = false, onClose, initialTab
         </div>
 
         {/* Footer */}
-        <div className="h-[46px] min-h-[46px] bg-[#252526] border-t border-[#2b2b2b] px-4 flex items-center justify-between shrink-0 select-none">
+        <div className="h-[46px] min-h-[46px] bg-[var(--bg-card)] border-t border-[var(--border-subtle)] px-4 flex items-center justify-between shrink-0 select-none">
           <button
             onClick={handleResetDefaults}
-            className="flex items-center gap-1.5 px-2.5 py-1 rounded bg-[#1e1e1e] hover:bg-[#2d2d2d] text-slate-400 hover:text-white border border-[#3e3e42] text-xs transition-colors cursor-pointer"
+            className="flex items-center gap-1.5 px-2.5 py-1 rounded bg-[var(--bg-card-inner)] hover:bg-[var(--bg-hover)] text-[var(--text-muted)] hover:text-[var(--text-bright)] border border-[var(--border-card)] text-xs transition-colors cursor-pointer"
             title="Restore default settings"
           >
             <RotateCcw className="w-3.5 h-3.5" />
@@ -287,7 +287,7 @@ export default function ThemeSettingsModal({ isOpen = false, onClose, initialTab
 
           <button
             onClick={onClose}
-            className="px-4 py-1.5 rounded bg-[#007acc] hover:bg-[#0062a3] text-white text-xs font-semibold transition-colors cursor-pointer"
+            className="px-4 py-1.5 rounded bg-[var(--accent-primary)] hover:opacity-90 text-[var(--text-on-accent,#ffffff)] text-xs font-semibold transition-colors cursor-pointer"
           >
             Done
           </button>

package/src/components/ui/Button.jsx

@@ -9,13 +9,13 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          "bg-[#007acc] hover:bg-[#0062a3] active:bg-[#005085] text-white shadow-sm",
+          "bg-[var(--accent-primary)] hover:opacity-90 active:opacity-80 text-[var(--text-on-accent,#ffffff)] shadow-sm",
         secondary:
-          "bg-[#2d2d2d] hover:bg-[#3c3c3c] active:bg-[#252526] text-[#cccccc] border border-[#3e3e42]",
+          "bg-[var(--bg-card-inner)] hover:bg-[var(--bg-hover)] active:opacity-80 text-[var(--text-main)] border border-[var(--border-card)]",
         outline:
-          "bg-transparent hover:bg-[#3c3c3c] active:bg-[#2a2d2e] text-[#cccccc] border border-[#3e3e42]",
+          "bg-transparent hover:bg-[var(--bg-hover)] active:opacity-80 text-[var(--text-main)] border border-[var(--border-card)]",
         ghost:
-          "bg-transparent hover:bg-[#3c3c3c] active:bg-[#2a2d2e] text-[#cccccc]",
+          "bg-transparent hover:bg-[var(--bg-hover)] active:opacity-80 text-[var(--text-main)]",
         danger:
           "bg-[#c72e24] hover:bg-[#a0251d] active:bg-[#8a1f18] text-white shadow-sm",
         success:

package/src/components/ui/Input.jsx

@@ -4,7 +4,7 @@ import { X } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 export const inputVariants = cva(
-  "w-full bg-[#1e1e1e] text-[#cccccc] placeholder:text-[#6e6e6e] border border-[#3e3e42] rounded-[3px] outline-none transition-colors duration-150 focus:border-[#007acc] focus:ring-1 focus:ring-[#007acc] disabled:bg-[#252526] disabled:text-[#6e6e6e] disabled:cursor-not-allowed",
+  "w-full bg-[var(--bg-input,var(--bg-card-inner))] text-[var(--text-main)] placeholder:text-[var(--text-muted)] border border-[var(--border-card)] rounded-[3px] outline-none transition-colors duration-150 focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] disabled:opacity-60 disabled:cursor-not-allowed",
   {
     variants: {
       inputSize: {

package/src/components/ui/Modal.jsx

@@ -45,7 +45,7 @@ export const Modal = ({
     >
       <div
         className={cn(
-          "relative w-full bg-[#252526] border border-[#3e3e42] rounded-md shadow-2xl flex flex-col max-h-[90vh] overflow-hidden text-[#cccccc]",
+          "relative w-full bg-[var(--bg-editor)] border border-[var(--border-card)] rounded-md shadow-2xl flex flex-col max-h-[90vh] overflow-hidden text-[var(--text-main)]",
           modalSizes[size],
           className
         )}
@@ -55,22 +55,22 @@ export const Modal = ({
       >
         {/* Header */}
         {(title || description) && (
-          <div className="flex items-start justify-between px-4 py-3 border-b border-[#3e3e42] bg-[#1e1e1e]">
+          <div className="flex items-start justify-between px-4 py-3 border-b border-[var(--border-subtle)] bg-[var(--bg-card)]">
             <div className="flex flex-col gap-0.5">
               {title && (
-                <h3 className="text-[13px] font-semibold text-white m-0 tracking-normal">
+                <h3 className="text-[13px] font-semibold text-[var(--text-bright)] m-0 tracking-normal">
                   {title}
                 </h3>
               )}
               {description && (
-                <p className="text-[11px] text-[#8c8c8c] m-0">{description}</p>
+                <p className="text-[11px] text-[var(--text-muted)] m-0">{description}</p>
               )}
             </div>
             <Button
               variant="ghost"
               size="icon-sm"
               onClick={onClose}
-              className="text-[#8c8c8c] hover:text-white"
+              className="text-[var(--text-muted)] hover:text-[var(--text-bright)] hover:bg-[var(--bg-hover)]"
               title="Close (Esc)"
             >
               <X className="w-3.5 h-3.5" />
@@ -83,7 +83,7 @@ export const Modal = ({
 
         {/* Footer */}
         {footer && (
-          <div className="flex items-center justify-end gap-2 px-4 py-3 border-t border-[#3e3e42] bg-[#1e1e1e]">
+          <div className="flex items-center justify-end gap-2 px-4 py-3 border-t border-[var(--border-subtle)] bg-[var(--bg-card)]">
             {footer}
           </div>
         )}

package/src/components/ui/Select.jsx

@@ -4,7 +4,7 @@ import { ChevronDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 export const selectVariants = cva(
-  "w-full appearance-none bg-[#1e1e1e] text-[#cccccc] border border-[#3e3e42] rounded-[3px] outline-none transition-colors duration-150 focus:border-[#007acc] focus:ring-1 focus:ring-[#007acc] disabled:bg-[#252526] disabled:text-[#6e6e6e] disabled:cursor-not-allowed cursor-pointer pr-7",
+  "w-full appearance-none bg-[var(--bg-input,var(--bg-card-inner))] text-[var(--text-main)] border border-[var(--border-card)] rounded-[3px] outline-none transition-colors duration-150 focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer pr-7",
   {
     variants: {
       selectSize: {
@@ -55,14 +55,14 @@ export const Select = React.forwardRef(
                     key={String(opt.value)}
                     value={opt.value}
                     disabled={opt.disabled}
-                    className="bg-[#1e1e1e] text-[#cccccc] py-1"
+                    className="bg-[var(--bg-card)] text-[var(--text-main)] py-1"
                   >
                     {opt.label}
                   </option>
                 ))
               : children}
           </select>
-          <div className="absolute right-2 flex items-center pointer-events-none text-[#8c8c8c]">
+          <div className="absolute right-2 flex items-center pointer-events-none text-[var(--text-muted)]">
             <ChevronDown className="w-3.5 h-3.5" />
           </div>
         </div>