agmon 0.2.0 → 0.2.2

package/src/components/chat/ToolOutputView.js

@@ -64,25 +64,25 @@ export default function ToolOutputView({ output = "", onImageClick }) {
   };
 
   return (
-    <div className="mt-2 rounded-xl border border-slate-800 bg-slate-950/80 overflow-hidden text-xs font-mono">
+    <div className="mt-2 rounded-xl border border-[var(--border-card)] bg-[var(--bg-chat-code)] overflow-hidden text-xs font-mono">
       {/* Header bar */}
-      <div className="flex items-center justify-between px-3 py-1.5 bg-slate-900/80 border-b border-slate-800 text-[11px] text-slate-400">
+      <div className="flex items-center justify-between px-3 py-1.5 bg-[var(--bg-card-inner)] border-b border-[var(--border-subtle)] text-[11px] text-[var(--text-muted)]">
         <div className="flex items-center gap-2">
           <Terminal className="w-3.5 h-3.5 text-cyan-400" />
-          <span className="font-medium text-slate-300">Tool Output</span>
-          <span className="text-[10px] text-slate-500 font-mono">({totalLines} lines)</span>
+          <span className="font-medium text-[var(--text-bright)]">Tool Output</span>
+          <span className="text-[10px] text-[var(--text-muted)] font-mono">({totalLines} lines)</span>
         </div>
 
         <div className="flex items-center gap-1.5 font-sans">
           {/* JSON Tree vs Raw Text Switcher */}
           {parsedJson && (
-            <div className="flex items-center bg-slate-950 rounded-lg p-0.5 border border-slate-800 mr-1">
+            <div className="flex items-center bg-[var(--bg-card)] rounded-lg p-0.5 border border-[var(--border-card)] mr-1">
               <button
                 onClick={() => setViewMode("raw")}
-                className={`flex items-center gap-1 px-2 py-0.5 rounded text-[10px] transition-colors ${
+                className={`flex items-center gap-1 px-2 py-0.5 rounded text-[10px] transition-colors cursor-pointer ${
                   viewMode === "raw" 
-                    ? "bg-slate-800 text-slate-200" 
-                    : "text-slate-400 hover:text-slate-300"
+                    ? "bg-[var(--bg-selection)] text-[var(--text-bright)] font-semibold" 
+                    : "text-[var(--text-muted)] hover:text-[var(--text-bright)]"
                 }`}
               >
                 <AlignLeft className="w-3 h-3" />
@@ -90,10 +90,10 @@ export default function ToolOutputView({ output = "", onImageClick }) {
               </button>
               <button
                 onClick={() => setViewMode("json")}
-                className={`flex items-center gap-1 px-2 py-0.5 rounded text-[10px] transition-colors ${
+                className={`flex items-center gap-1 px-2 py-0.5 rounded text-[10px] transition-colors cursor-pointer ${
                   viewMode === "json" 
                     ? "bg-indigo-600/30 text-indigo-300 border border-indigo-500/40" 
-                    : "text-slate-400 hover:text-slate-300"
+                    : "text-[var(--text-muted)] hover:text-[var(--text-bright)]"
                 }`}
               >
                 <Braces className="w-3 h-3 text-indigo-400" />
@@ -105,7 +105,7 @@ export default function ToolOutputView({ output = "", onImageClick }) {
           {/* Copy Button */}
           <button
             onClick={handleCopy}
-            className="flex items-center gap-1 px-2 py-0.5 rounded hover:bg-slate-800 text-slate-400 hover:text-slate-200 transition-colors border border-slate-800/80"
+            className="flex items-center gap-1 px-2 py-0.5 rounded hover:bg-[var(--bg-hover)] text-[var(--text-muted)] hover:text-[var(--text-bright)] transition-colors border border-[var(--border-subtle)] cursor-pointer"
             title="Copy output"
           >
             {copied ? (
@@ -115,7 +115,7 @@ export default function ToolOutputView({ output = "", onImageClick }) {
               </>
             ) : (
               <>
-                <Copy className="w-3 h-3" />
+                <Copy className="w-3.5 h-3.5" />
                 <span className="text-[10px]">Copy</span>
               </>
             )}
@@ -125,8 +125,8 @@ export default function ToolOutputView({ output = "", onImageClick }) {
 
       {/* Detected Image Thumbnails / Chips */}
       {imageMatches.length > 0 && (
-        <div className="flex flex-wrap items-center gap-1.5 px-3 py-1.5 bg-slate-900/40 border-b border-slate-800/80 text-[11px]">
-          <span className="text-slate-400 flex items-center gap-1">
+        <div className="flex flex-wrap items-center gap-1.5 px-3 py-1.5 bg-[var(--bg-card-inner)] border-b border-[var(--border-subtle)] text-[11px]">
+          <span className="text-[var(--text-muted)] flex items-center gap-1">
             <ImageIcon className="w-3.5 h-3.5 text-cyan-400" />
             <span>Image output:</span>
           </span>
@@ -137,7 +137,7 @@ export default function ToolOutputView({ output = "", onImageClick }) {
                 src: `/api/media?path=${encodeURIComponent(imgP)}`,
                 alt: imgP.split("/").pop()
               })}
-              className="flex items-center gap-1 px-2 py-0.5 rounded bg-cyan-950/60 hover:bg-cyan-900/80 border border-cyan-500/40 text-cyan-300 font-mono transition-colors text-[10px]"
+              className="flex items-center gap-1 px-2 py-0.5 rounded bg-[var(--bg-chat-user)] hover:brightness-110 border border-[var(--border-chat-user)] text-[var(--accent-secondary)] font-mono transition-colors text-[10px] cursor-pointer"
               title="Click to view full image popup"
             >
               <span>{imgP.split("/").pop()}</span>
@@ -148,22 +148,22 @@ export default function ToolOutputView({ output = "", onImageClick }) {
 
       {/* JSON Inspector View */}
       {parsedJson && viewMode === "json" ? (
-        <div className="p-2 bg-black/60">
+        <div className="p-2 bg-[var(--bg-chat-tool)]">
           <JsonInspector data={parsedJson} title="JSON Output View" />
         </div>
       ) : (
         /* Raw Output text */
-        <pre className="p-3 text-[11px] text-slate-300 leading-relaxed overflow-x-auto max-h-80 overflow-y-auto whitespace-pre font-mono">
+        <pre className="p-3 text-[11px] text-[var(--text-chat-code)] leading-relaxed overflow-x-auto max-h-80 overflow-y-auto whitespace-pre font-mono">
           {displayedText}
         </pre>
       )}
 
       {/* Expand/Collapse Footer for Raw View */}
       {viewMode === "raw" && hasManyLines && (
-        <div className="px-3 py-1.5 bg-slate-900/60 border-t border-slate-800 text-center">
+        <div className="px-3 py-1.5 bg-[var(--bg-card-inner)] border-t border-[var(--border-subtle)] text-center">
           <button
             onClick={() => setExpanded(!expanded)}
-            className="text-[11px] text-cyan-400 hover:text-cyan-300 underline transition-colors"
+            className="text-[11px] text-[var(--accent-secondary)] hover:underline transition-colors cursor-pointer"
           >
             {expanded ? "Show less (first 50 lines)" : `Show all ${totalLines} lines`}
           </button>

package/src/components/factory/office-canvas.js

@@ -1,14 +1,29 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { ZoomIn, ZoomOut, Maximize2 } from "lucide-react";
+import { ZoomIn, ZoomOut, Maximize2, Minimize2, Sparkles, Volume2, VolumeX, Maximize, ListFilter, Clock } from "lucide-react";
 import { mountOfficeScene } from "./office-scene";
 import { SUPPORTER_CHANGE_EVENT } from "@/lib/supporterStore";
 
-export default function OfficeCanvas({ traces = [], onStats, onSelect, selectedId = null }) {
+export default function OfficeCanvas({
+  traces = [],
+  totalCount = 0,
+  top = 20,
+  onTopChange = null,
+  timeframe = "24h",
+  onTimeframeChange = null,
+  onStats,
+  onSelect,
+  selectedId = null,
+  isZenFullscreen = false,
+  onToggleZenFullscreen = null,
+  soundEnabled = false,
+  onToggleSound = null,
+}) {
   const hostRef = useRef(null);
   const sceneRef = useRef(null);
   const [zoomPct, setZoomPct] = useState(100);
+  const [showToast, setShowToast] = useState(false);
   const latest = useRef({ onSelect, selectedId, traces });
 
   useEffect(() => {
@@ -111,8 +126,49 @@ export default function OfficeCanvas({ traces = [], onStats, onSelect, selectedI
     return () => clearInterval(id);
   }, [onStats]);
 
+  // Re-fit canvas layout whenever fullscreen mode changes
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(new Event("resize"));
+      }
+      sceneRef.current?.fit?.();
+    }, 60);
+    return () => clearTimeout(timer);
+  }, [isZenFullscreen]);
+
+  // Toast notification when entering Chill Mode
+  useEffect(() => {
+    if (isZenFullscreen) {
+      setShowToast(true);
+      const timer = setTimeout(() => setShowToast(false), 3500);
+      return () => clearTimeout(timer);
+    } else {
+      setShowToast(false);
+    }
+  }, [isZenFullscreen]);
+
+  // Global ESC key listener to exit Chill Mode
+  useEffect(() => {
+    if (!isZenFullscreen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onToggleZenFullscreen?.(false);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isZenFullscreen, onToggleZenFullscreen]);
+
   return (
-    <div className="relative h-full w-full overflow-hidden rounded-xl border border-slate-800 bg-[#080d14] shadow-2xl">
+    <div
+      className={`relative h-full w-full overflow-hidden bg-[#080d14] ${
+        isZenFullscreen
+          ? "!fixed !inset-0 !z-[99] !w-screen !h-screen !rounded-none !border-none"
+          : "rounded-xl border border-slate-800 shadow-2xl"
+      }`}
+    >
       <div ref={hostRef} className="absolute inset-0" />
       {error && (
         <div className="absolute inset-0 flex items-center justify-center p-6 text-center text-sm text-rose-400">
@@ -120,6 +176,67 @@ export default function OfficeCanvas({ traces = [], onStats, onSelect, selectedI
         </div>
       )}
 
+      {/* Floating Canvas Filter Badge (Top-left) */}
+      {!isZenFullscreen && (
+        <div
+          data-testid="canvas-filter-pill"
+          className="absolute top-3 left-3 z-10 hidden sm:flex items-center gap-1.5 px-2.5 py-1 rounded-lg border border-slate-800/80 bg-slate-950/80 backdrop-blur-md shadow-xl text-slate-300 text-xs select-none pointer-events-none"
+        >
+          <ListFilter className="w-3 h-3 text-cyan-400 shrink-0" />
+          <span className="font-semibold text-[11px] text-slate-200">
+            {top === "all" ? "All Desks" : `Top ${top}`}
+          </span>
+          <span className="text-slate-600">·</span>
+          <Clock className="w-3 h-3 text-amber-400 shrink-0" />
+          <span className="text-[11px] text-slate-300">
+            {timeframe === "all" ? "All time" : timeframe}
+          </span>
+          {totalCount > 0 && traces.length > 0 && traces.length < totalCount && (
+            <span
+              title={`Showing ${traces.length} of ${totalCount} recorded conversations`}
+              className="ml-0.5 px-1.5 py-0.2 rounded text-[10px] font-mono bg-cyan-950/60 text-cyan-300 border border-cyan-800/40"
+            >
+              {traces.length}/{totalCount}
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Chill Mode Entry Toast Banner */}
+      {showToast && (
+        <div className="absolute top-5 left-1/2 -translate-x-1/2 z-30 pointer-events-none transition-all duration-300 animate-in fade-in slide-in-from-top-2">
+          <div className="flex items-center gap-2 px-4 py-2 rounded-xl bg-slate-950/90 border border-cyan-500/40 text-cyan-200 text-xs shadow-2xl backdrop-blur-md">
+            <Sparkles className="w-4 h-4 text-cyan-400 shrink-0" />
+            <span>Chế độ Chill toàn màn hình · Nhấn <kbd className="px-1.5 py-0.5 rounded bg-slate-800 text-amber-300 font-mono text-[10px]">ESC</kbd> hoặc click nút góc trên để thoát</span>
+          </div>
+        </div>
+      )}
+
+      {/* Chill Mode Floating Top Control Bar */}
+      {isZenFullscreen && (
+        <div className="absolute top-4 right-4 z-30 flex items-center gap-2 animate-in fade-in duration-200">
+          <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-950/70 border border-slate-800/80 backdrop-blur-md shadow-xl text-xs text-slate-300 select-none">
+            <span className="relative flex h-2 w-2">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
+              <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
+            </span>
+            <span className="font-medium text-[11px]">Virtual Office · Chill Mode</span>
+            <span className="text-[10px] text-slate-400 font-mono">({traces.length} Bots)</span>
+          </div>
+
+          <button
+            type="button"
+            data-testid="exit-zen-fullscreen-btn"
+            onClick={() => onToggleZenFullscreen?.(false)}
+            title="Thoát chế độ toàn màn hình Chill Mode (ESC)"
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-slate-900/80 hover:bg-slate-800 border border-slate-700/60 hover:border-amber-500/50 text-slate-300 hover:text-white backdrop-blur-md shadow-xl transition-all cursor-pointer text-xs font-medium group"
+          >
+            <Minimize2 className="w-3.5 h-3.5 text-amber-400 group-hover:scale-110 transition-transform" />
+            <span className="text-[11px]">Thoát ESC</span>
+          </button>
+        </div>
+      )}
+
       {/* Floating Canvas Camera Controls */}
       <div className="absolute bottom-3 left-3 z-10 flex items-center gap-1 rounded-lg border border-slate-800/80 bg-slate-950/80 p-1 backdrop-blur-md shadow-xl text-slate-400">
         <button
@@ -151,6 +268,51 @@ export default function OfficeCanvas({ traces = [], onStats, onSelect, selectedI
         >
           <Maximize2 className="w-3.5 h-3.5" />
         </button>
+
+        {onToggleZenFullscreen && (
+          <>
+            <div className="w-[1px] h-3.5 bg-slate-800 my-auto" />
+            <button
+              type="button"
+              data-testid="canvas-camera-zen-fullscreen-btn"
+              onClick={() => onToggleZenFullscreen(!isZenFullscreen)}
+              title={
+                isZenFullscreen
+                  ? "Thoát toàn màn hình (ESC)"
+                  : "Chế độ Chill toàn màn hình Virtual Office (ESC để thoát)"
+              }
+              className={`p-1.5 rounded-md transition-colors cursor-pointer ${
+                isZenFullscreen
+                  ? "bg-amber-500/20 text-amber-300 hover:bg-amber-500/30"
+                  : "hover:bg-slate-800 hover:text-cyan-300 text-slate-400"
+              }`}
+            >
+              {isZenFullscreen ? (
+                <Minimize2 className="w-3.5 h-3.5 text-amber-400" />
+              ) : (
+                <Maximize className="w-3.5 h-3.5" />
+              )}
+            </button>
+          </>
+        )}
+
+        {onToggleSound && (
+          <>
+            <div className="w-[1px] h-3.5 bg-slate-800 my-auto" />
+            <button
+              type="button"
+              onClick={onToggleSound}
+              title={soundEnabled ? "Âm thanh: BẬT" : "Âm thanh: TẮT"}
+              className={`p-1.5 rounded-md transition-colors cursor-pointer ${
+                soundEnabled
+                  ? "text-emerald-400 hover:bg-slate-800"
+                  : "text-slate-500 hover:text-slate-300 hover:bg-slate-800"
+              }`}
+            >
+              {soundEnabled ? <Volume2 className="w-3.5 h-3.5" /> : <VolumeX className="w-3.5 h-3.5" />}
+            </button>
+          </>
+        )}
       </div>
     </div>
   );

package/src/components/factory/scene/characters.js

@@ -51,24 +51,81 @@ export function createCharacter({ color, depth = 1, scale = 1, seed = 0, trimCol
   const skinItem = typeof skin === "string" ? getItemById(skin) : null;
   const hasCustomSkin = Boolean(skinItem || (skin && skin !== "classic" && skin !== "none"));
   const skinArchetype = skinItem?.archetype || (skin === "cat" ? "cyber_cat" : skin === "ninja" ? "stealth_ninja" : skin === "hacker" ? "matrix_hacker" : skin || "cyber_classic");
+  const skinVariant = skinItem?.variant || "tactical_visor";
   const skinColor = skinItem?.color ? parseHexColor(skinItem.color, trimColor ?? defaultTrim) : (trimColor ?? defaultTrim);
+  const skinSecondaryColor = skinItem?.secondaryColor ? parseHexColor(skinItem.secondaryColor, 0x111827) : 0x111827;
+  const skinAccentColor = skinItem?.accentColor ? parseHexColor(skinItem.accentColor, 0xffffff) : 0xffffff;
   const trim = skinColor;
   const SHELL = hasCustomSkin ? 0x1e2430 : 0xf3f5f9;
   const SHADE = hasCustomSkin ? 0x111622 : 0xc9d0dc;
 
-  // Torso: two stacked shells with a coloured band between them.
+  // Torso: 5 Distinct Staff Uniforms & Silhouettes
   const body = new Graphics();
-  body.roundRect(-17, -30, 34, 22, 11).fill(vgrad(0xffffff, SHELL, SHADE));
-  body.roundRect(-17, -30, 34, 8, 8).fill({ color: 0xffffff, alpha: 0.6 });
-  body.roundRect(-14, -12, 28, 8, 4).fill({ color: trim });
-  body.roundRect(-16, -8, 32, 16, 8).fill(vgrad(SHELL, SHADE, 0x8c97a9));
-  body.roundRect(-16, 2, 32, 6, 4).fill({ color: SHADE, alpha: 0.6 });
-
-  // Chest arc reactor for equipped custom skins
-  if (hasCustomSkin) {
-    body.circle(0, -18, 4).fill({ color: 0x0f172a });
-    body.circle(0, -18, 4).stroke({ width: 1.2, color: skinColor });
-    body.circle(0, -18, 2).fill({ color: skinColor });
+  if (skinArchetype === "mecha_pilot") {
+    // Heavy Industrial Exoskeleton Vest
+    body.poly([-22, -30, 22, -30, 18, -6, -18, -6]).fill({ color: 0x18181b }).stroke({ width: 1.5, color: skinColor });
+    // Pauldrons
+    body.poly([-27, -29, -20, -33, -17, -25, -25, -20]).fill({ color: 0x27272a }).stroke({ width: 1, color: skinColor });
+    body.poly([27, -29, 20, -33, 17, -25, 25, -20]).fill({ color: 0x27272a }).stroke({ width: 1, color: skinColor });
+    // Hazard Chevrons
+    body.poly([-12, -26, -7, -26, -3, -20, -8, -20]).fill({ color: 0xeab308 });
+    body.poly([2, -26, 7, -26, 11, -20, 6, -20]).fill({ color: 0xeab308 });
+    // Heavy Tactical Harness Straps
+    body.rect(-13, -30, 2, 24).fill({ color: skinColor });
+    body.rect(11, -30, 2, 24).fill({ color: skinColor });
+    // Central Fusion Core with Cage Grille
+    body.circle(0, -14, 5.5).fill({ color: 0x09090b }).stroke({ width: 1.4, color: skinColor });
+    body.circle(0, -14, 3).fill({ color: skinColor });
+    body.rect(-4, -15, 8, 2).fill({ color: 0xffffff });
+  } else if (skinArchetype === "stealth_ninja") {
+    // Sleek Form-Fitting Shinobi Gi
+    body.poly([-16, -30, 16, -30, 13, -6, -13, -6]).fill({ color: 0x090d16 }).stroke({ width: 1.4, color: skinColor });
+    // Crossed Kimono Lapels
+    body.poly([-16, -30, 5, -14, 2, -14, -16, -28]).fill({ color: skinColor });
+    // Diagonal Tactical Sash
+    body.poly([-16, -28, -11, -30, 14, -9, 9, -7]).fill({ color: skinColor, alpha: 0.9 });
+    // Obi Waist Sash & Knot
+    body.roundRect(-14, -12, 28, 6, 2).fill({ color: 0x1e1b4b }).stroke({ width: 1.2, color: skinColor });
+    body.poly([3, -7, 6, 1, 4, 6, 1, 1, 3, -7]).fill({ color: skinColor });
+  } else if (skinArchetype === "matrix_hacker") {
+    // Loose Oversized Slouchy Techwear Hoodie Body
+    body.roundRect(-21, -30, 42, 25, 7).fill({ color: 0x121217 }).stroke({ width: 1.5, color: skinColor });
+    // Cowl Neck Collar
+    body.roundRect(-18, -32, 36, 10, 4).fill({ color: 0x1f1f28 }).stroke({ width: 1.2, color: skinColor });
+    // Hanging Drawstrings with Metal Aglets
+    body.rect(-7, -23, 2, 16).fill({ color: 0xffffff });
+    body.rect(-7.5, -7, 3, 4).fill({ color: skinColor });
+    body.rect(5, -23, 2, 16).fill({ color: 0xffffff });
+    body.rect(4.5, -7, 3, 4).fill({ color: skinColor });
+    // Kangaroo Pouch Pocket
+    body.poly([-15, -14, 15, -14, 13, -6, -13, -6]).fill({ color: 0x09090d }).stroke({ width: 1, color: 0x27272a });
+  } else if (skinArchetype === "celestial_astro") {
+    // Pressurized Flight Suit Body
+    body.poly([-18, -30, 18, -30, 16, -6, -16, -6]).fill({ color: 0xf1f5f9 }).stroke({ width: 1.4, color: skinColor });
+    // Hermetic Helmet Seal Ring
+    body.roundRect(-14, -33, 28, 5, 2).fill({ color: 0x334155 }).stroke({ width: 1.2, color: skinColor });
+    // Gold Command Epaulets on Shoulders
+    body.roundRect(-24, -31, 8, 4.5, 1).fill({ color: 0xf59e0b }).stroke({ width: 0.8, color: 0x78350f });
+    body.roundRect(16, -31, 8, 4.5, 1).fill({ color: 0xf59e0b }).stroke({ width: 0.8, color: 0x78350f });
+    // Dual Atmospheric Pressure Regulator Dials
+    body.circle(-7, -17, 3.5).fill({ color: 0x0f172a }).stroke({ width: 1.2, color: skinColor });
+    body.circle(-7, -17, 1.5).fill({ color: 0x22c55e });
+    body.circle(7, -17, 3.5).fill({ color: 0x0f172a }).stroke({ width: 1.2, color: skinColor });
+    body.circle(7, -17, 1.5).fill({ color: 0x38bdf8 });
+  } else {
+    // Default Cyber Suit (Corporate Tech Field Ops / Executive Security)
+    body.poly([-18, -30, 18, -30, 15, -6, -15, -6]).fill(vgrad(0xffffff, SHELL, SHADE)).stroke({ width: 1.2, color: skinColor });
+    // Sharp Lapels
+    body.poly([-17, -30, -7, -14, -13, -14]).fill({ color: 0x0d1117 });
+    body.poly([17, -30, 7, -14, 13, -14]).fill({ color: 0x0d1117 });
+    // Security ID Badge Lanyard
+    body.poly([-5, -30, 0, -18, 5, -30]).stroke({ width: 1.2, color: skinAccentColor, alpha: 0.85 });
+    body.roundRect(-4.5, -19, 9, 12, 1.5).fill({ color: 0x090d16 }).stroke({ width: 1, color: skinColor });
+    body.rect(-3, -17.5, 6, 4.5).fill({ color: skinColor });
+    body.rect(-3, -11, 6, 1.5).fill({ color: 0xffffff });
+    // Corporate Belt & Buckle
+    body.rect(-15, -10, 30, 4).fill({ color: 0x020617 });
+    body.roundRect(-3.5, -11, 7, 6, 1).fill({ color: 0x1e293b }).stroke({ width: 1, color: skinColor });
   }
 
   const neck = new Graphics();
@@ -108,42 +165,220 @@ export function createCharacter({ color, depth = 1, scale = 1, seed = 0, trimCol
   head.ellipse(0, -53, 20, 15.5).fill({ color: 0x0f141c });
   head.ellipse(-5, -58, 11, 5).fill({ color: 0xffffff, alpha: 0.06 });
 
-  // Custom Skin Accessories on Head according to 5 Archetypes
-  if (skinArchetype === "cyber_suit") {
-    // Cyber Suit: Angular Tactical Brow Visor & Wing Antennas
+  // Custom Skin Accessories on Head matching 50 Curated Variants
+  // 1. CYBER SUIT VARIANTS
+  if (skinVariant === "tactical_visor") {
     head.roundRect(-24, -66, 48, 7, 2.5).fill({ color: 0x0f172a });
     head.roundRect(-24, -66, 48, 7, 2.5).stroke({ width: 1.6, color: skinColor });
     head.poly([-26, -66, -34, -76, -26, -72]).fill({ color: skinColor });
     head.poly([26, -66, 34, -76, 26, -72]).fill({ color: skinColor });
-    head.circle(0, -62.5, 2.5).fill({ color: skinColor });
-  } else if (skinArchetype === "stealth_ninja" || skinArchetype === "ninja") {
-    // Ninja Headband & Laser Visor
-    head.roundRect(-24, -66, 48, 8, 3).fill({ color: 0x1e1b4b });
-    head.roundRect(-24, -66, 48, 8, 3).stroke({ width: 1.5, color: skinColor });
+    head.circle(0, -62.5, 2.5).fill({ color: skinAccentColor });
+  } else if (skinVariant === "laser_scout") {
+    head.circle(8, -57, 7).stroke({ width: 1.6, color: skinColor });
+    head.circle(8, -57, 2.5).fill({ color: 0xff0000 });
+  } else if (skinVariant === "riot_shield") {
+    head.roundRect(-25, -68, 50, 9, 3).fill({ color: 0x1e2430 });
+    head.roundRect(-25, -68, 50, 9, 3).stroke({ width: 1.8, color: skinColor });
+    head.circle(-16, -64, 2.5).fill({ color: skinAccentColor });
+    head.circle(16, -64, 2.5).fill({ color: skinAccentColor });
+  } else if (skinVariant === "cyber_horns") {
+    head.poly([-20, -70, -30, -88, -14, -76]).fill({ color: skinColor });
+    head.poly([20, -70, 30, -88, 14, -76]).fill({ color: skinColor });
+  } else if (skinVariant === "crown_radiator") {
+    head.poly([-16, -72, -14, -86, -8, -74]).fill({ color: skinColor });
+    head.poly([-4, -74, 0, -92, 4, -74]).fill({ color: skinColor });
+    head.poly([8, -74, 14, -86, 16, -72]).fill({ color: skinColor });
+    head.circle(0, -70, 3).fill({ color: skinAccentColor });
+  } else if (skinVariant === "gas_respirator") {
+    head.circle(-14, -44, 6).fill({ color: 0x1e2430 }).stroke({ width: 1.5, color: skinColor });
+    head.circle(14, -44, 6).fill({ color: 0x1e2430 }).stroke({ width: 1.5, color: skinColor });
+    head.circle(-14, -44, 3).fill({ color: skinColor });
+    head.circle(14, -44, 3).fill({ color: skinColor });
+  } else if (skinVariant === "prism_goggles") {
+    head.poly([-16, -62, -8, -66, -2, -62, -2, -52, -8, -48, -16, -52]).fill({ color: 0x0c4a6e }).stroke({ width: 1.6, color: skinColor });
+    head.poly([2, -62, 8, -66, 16, -62, 16, -52, 8, -48, 2, -52]).fill({ color: 0x0c4a6e }).stroke({ width: 1.6, color: skinColor });
+    head.circle(-9, -57, 2.5).fill({ color: skinAccentColor });
+    head.circle(9, -57, 2.5).fill({ color: skinAccentColor });
+  } else if (skinVariant === "samurai_crest") {
+    head.poly([-22, -72, 0, -88, 22, -72, 0, -80]).fill({ color: skinColor });
+    head.circle(0, -78, 3).fill({ color: skinAccentColor });
+  } else if (skinVariant === "overdrive_vents") {
+    head.poly([-18, -72, -28, -90, -14, -76]).fill({ color: skinColor });
+    head.poly([18, -72, 28, -90, 14, -76]).fill({ color: skinColor });
+  } else if (skinVariant === "holo_shroud") {
+    head.ellipse(0, -66, 28, 12).stroke({ width: 1.8, color: skinColor, alpha: 0.8 });
+    head.circle(0, -78, 4).fill({ color: skinAccentColor });
+  }
+  // 2. MECHA PILOT VARIANTS
+  else if (skinVariant === "v_fin") {
+    head.poly([-24, -88, -18, -92, 0, -76, 18, -92, 24, -88, 0, -72]).fill({ color: skinColor });
+    head.poly([-4, -72, 0, -78, 4, -72, 0, -68]).fill({ color: 0xef4444 });
+  } else if (skinVariant === "blast_shield") {
+    head.roundRect(-24, -68, 48, 14, 3).fill({ color: 0x0f172a }).stroke({ width: 2, color: skinColor });
+    head.circle(-18, -80, 3.5).fill({ color: 0xfde047 });
+    head.circle(18, -80, 3.5).fill({ color: 0xfde047 });
+  } else if (skinVariant === "eva_horn") {
+    head.poly([-3, -74, 0, -98, 3, -74]).fill({ color: skinColor });
+    head.roundRect(-28, -48, 5, 18, 2).fill({ color: skinColor });
+    head.roundRect(23, -48, 5, 18, 2).fill({ color: skinColor });
+  } else if (skinVariant === "cage_grille") {
+    head.roundRect(-16, -52, 32, 14, 2).fill({ color: 0x18181b }).stroke({ width: 1.6, color: skinColor });
+    head.roundRect(-22, -86, 4, 16, 1).fill({ color: 0x27272a }).stroke({ width: 1, color: skinColor });
+    head.roundRect(18, -86, 4, 16, 1).fill({ color: 0x27272a }).stroke({ width: 1, color: skinColor });
+  } else if (skinVariant === "missile_pod") {
+    head.roundRect(-30, -42, 8, 12, 2).fill({ color: 0x1c1917 }).stroke({ width: 1.5, color: skinColor });
+    head.roundRect(22, -42, 8, 12, 2).fill({ color: 0x1c1917 }).stroke({ width: 1.5, color: skinColor });
+    head.circle(-26, -38, 1.5).fill({ color: 0xef4444 });
+    head.circle(26, -38, 1.5).fill({ color: 0xef4444 });
+  } else if (skinVariant === "quad_array") {
+    head.poly([-22, -72, -26, -90, -20, -72]).fill({ color: skinColor });
+    head.poly([-12, -76, -14, -94, -10, -76]).fill({ color: skinColor });
+    head.poly([10, -76, 14, -94, 12, -76]).fill({ color: skinColor });
+    head.poly([20, -72, 26, -90, 22, -72]).fill({ color: skinColor });
+    head.circle(-26, -90, 2).fill({ color: skinAccentColor });
+    head.circle(26, -90, 2).fill({ color: skinAccentColor });
+  } else if (skinVariant === "halo_shield") {
+    head.poly([-32, -42, -26, -46, -20, -42, -20, -34, -26, -30, -32, -34]).fill({ color: 0x064e3b }).stroke({ width: 1.5, color: skinColor });
+    head.poly([20, -42, 26, -46, 32, -42, 32, -34, 26, -30, 20, -34]).fill({ color: 0x064e3b }).stroke({ width: 1.5, color: skinColor });
+  } else if (skinVariant === "ram_horns") {
+    head.poly([-18, -72, -34, -86, -18, -92, -14, -72]).fill({ color: skinColor });
+    head.poly([18, -72, 34, -86, 18, -92, 14, -72]).fill({ color: skinColor });
+  } else if (skinVariant === "radar_dish") {
+    head.ellipse(-24, -84, 7, 12).fill({ color: 0x18181b }).stroke({ width: 1.5, color: skinColor });
+    head.circle(-24, -84, 2).fill({ color: skinAccentColor });
+  } else if (skinVariant === "hyper_wings") {
+    head.poly([-26, -46, -44, -64, -34, -40]).fill({ color: skinColor });
+    head.poly([26, -46, 44, -64, 34, -40]).fill({ color: skinColor });
+  }
+  // 3. STEALTH NINJA VARIANTS
+  else if (skinVariant === "flowing_headband") {
+    head.roundRect(-24, -66, 48, 8, 2).fill({ color: 0x1e1b4b }).stroke({ width: 1.5, color: skinColor });
+    head.circle(0, -62, 3).fill({ color: 0x38bdf8 });
+    head.poly([24, -62, 38, -56, 46, -46, 36, -48, 24, -56]).fill({ color: skinColor });
+  } else if (skinVariant === "tactical_cowl") {
+    head.roundRect(-24, -68, 48, 24, 6).fill({ color: 0x0f172a, alpha: 0.8 }).stroke({ width: 1.4, color: skinColor });
+    head.circle(6, -57, 4.5).stroke({ width: 1.8, color: 0x22c55e });
+    head.circle(6, -57, 1.5).fill({ color: 0x22c55e });
+  } else if (skinVariant === "oni_mask") {
+    head.poly([-16, -72, -24, -88, -12, -76]).fill({ color: 0xef4444 });
+    head.poly([16, -72, 24, -88, 12, -76]).fill({ color: 0xef4444 });
+    head.poly([-16, -46, -10, -40, 0, -42, 10, -40, 16, -46, 12, -36, -12, -36]).fill({ color: 0xffffff });
+  } else if (skinVariant === "kitsune_ears") {
+    head.poly([-22, -72, -14, -88, -6, -76]).fill({ color: 0x1e2430 });
+    head.poly([-20, -73, -14, -85, -8, -76]).fill({ color: skinColor });
+    head.poly([6, -76, 14, -88, 22, -72]).fill({ color: 0x1e2430 });
+    head.poly([8, -76, 14, -85, 20, -73]).fill({ color: skinColor });
+  } else if (skinVariant === "conical_kasa") {
+    head.poly([-36, -72, 0, -92, 36, -72]).fill({ color: 0x18181b }).stroke({ width: 1.6, color: skinColor });
+    head.roundRect(-36, -72, 72, 2.5, 1).fill({ color: skinAccentColor });
+  } else if (skinVariant === "twin_katanas") {
+    head.poly([-24, -32, 28, -88, 25, -88, -27, -32]).fill({ color: skinColor });
+    head.poly([24, -32, -28, -88, -25, -88, 27, -32]).fill({ color: skinColor });
+  } else if (skinVariant === "tengu_beak") {
+    head.poly([-12, -48, 0, -34, 12, -48, 0, -44]).fill({ color: 0x0f172a }).stroke({ width: 1.5, color: skinColor });
+  } else if (skinVariant === "veil_shroud") {
+    head.roundRect(-22, -62, 44, 26, 6).fill({ color: 0x0f172a, alpha: 0.85 }).stroke({ width: 1.2, color: skinColor });
+  } else if (skinVariant === "scythe_crest") {
+    head.poly([-14, -66, 0, -88, 14, -66, 0, -82]).fill({ color: skinColor });
+  } else if (skinVariant === "void_mask") {
+    head.roundRect(-18, -62, 36, 20, 4).fill({ color: 0x000000 }).stroke({ width: 1.8, color: skinColor });
+    head.circle(0, -52, 3).fill({ color: skinColor });
+  }
+  // 4. MATRIX HACKER VARIANTS
+  else if (skinVariant === "hoodie_cowl") {
+    head.roundRect(-28, -74, 56, 46, 14).fill({ color: 0x051f0b, alpha: 0.9 }).stroke({ width: 1.8, color: skinColor });
+  } else if (skinVariant === "vr_goggles") {
+    head.roundRect(-22, -64, 44, 15, 3).fill({ color: 0x083344 }).stroke({ width: 1.8, color: skinColor });
+    head.circle(-16, -78, 2.5).fill({ color: skinAccentColor });
+    head.poly([-16, -64, -16, -78, -14, -78, -14, -64]).fill({ color: skinColor });
+  } else if (skinVariant === "daemon_horns") {
+    head.poly([-16, -70, -22, -86, -10, -74]).fill({ color: skinColor });
+    head.poly([16, -70, 22, -86, 10, -74]).fill({ color: skinColor });
+  } else if (skinVariant === "glitch_halo") {
+    head.rect(-28, -76, 56, 42).stroke({ width: 1.5, color: skinColor, alpha: 0.8 });
+    head.rect(-18, -82, 12, 6).fill({ color: skinColor, alpha: 0.7 });
+  } else if (skinVariant === "floating_hud") {
+    head.roundRect(24, -78, 30, 16, 2).fill({ color: 0x09090b }).stroke({ width: 1, color: skinColor });
+  } else if (skinVariant === "respirator_eq") {
+    head.roundRect(-18, -46, 36, 10, 3).fill({ color: 0x0f172a }).stroke({ width: 1.2, color: skinColor });
+    head.rect(-12, -43, 4, 5).fill({ color: 0x22c55e });
+    head.rect(-4, -45, 4, 7).fill({ color: 0xeab308 });
+    head.rect(4, -45, 4, 7).fill({ color: 0xef4444 });
+    head.rect(12, -43, 4, 5).fill({ color: 0x22c55e });
+  } else if (skinVariant === "heatsink_fins") {
+    head.rect(-18, -84, 4, 14).fill({ color: 0xea580c });
+    head.rect(-10, -88, 4, 18).fill({ color: 0xea580c });
+    head.rect(-2, -90, 4, 20).fill({ color: 0xea580c });
+    head.rect(6, -88, 4, 18).fill({ color: 0xea580c });
+    head.rect(14, -84, 4, 14).fill({ color: 0xea580c });
+  } else if (skinVariant === "cable_dreads") {
+    head.poly([-22, -62, -32, -48, -28, -12, -26, -12, -30, -48, -20, -62]).fill({ color: skinColor });
+    head.poly([22, -62, 32, -48, 28, -12, 26, -12, 30, -48, 20, -62]).fill({ color: skinColor });
+  } else if (skinVariant === "cyber_skull") {
+    head.circle(-7, -55, 4).fill({ color: 0x000000 }).stroke({ width: 1.5, color: skinColor });
+    head.circle(7, -55, 4).fill({ color: 0x000000 }).stroke({ width: 1.5, color: skinColor });
+    head.poly([-8, -40, 8, -40, 8, -38, -8, -38]).fill({ color: skinColor });
+  } else if (skinVariant === "wireframe_cube") {
+    head.rect(-24, -76, 48, 42).stroke({ width: 1.6, color: skinColor });
+    head.rect(-16, -68, 32, 26).stroke({ width: 1.2, color: skinAccentColor, alpha: 0.8 });
+  }
+  // 5. CELESTIAL ASTRO VARIANTS
+  else if (skinVariant === "bubble_dome") {
+    head.circle(0, -56, 28).stroke({ width: 2.5, color: skinColor, alpha: 0.9 });
+    head.circle(0, -84, 3.5).fill({ color: 0xfef08a });
+  } else if (skinVariant === "lunar_pack") {
+    head.rect(-20, -86, 2, 18).fill({ color: skinColor });
+    head.circle(-19, -86, 2).fill({ color: 0xffffff });
+    head.ellipse(0, -54, 24, 18).stroke({ width: 2, color: 0xe2e8f0 });
+  } else if (skinVariant === "sunburst_halo") {
+    head.ellipse(0, -64, 30, 8).stroke({ width: 2, color: skinColor, alpha: 0.85 });
+    head.circle(0, -76, 3).fill({ color: 0xfef08a });
+    head.circle(-22, -70, 2).fill({ color: 0xfef08a });
+    head.circle(22, -70, 2).fill({ color: 0xfef08a });
+  } else if (skinVariant === "saturn_ring") {
+    head.ellipse(0, -56, 36, 10).stroke({ width: 2.2, color: skinColor });
+    head.circle(28, -62, 3).fill({ color: skinAccentColor });
+  } else if (skinVariant === "star_crown") {
+    head.poly([-16, -74, -12, -86, -8, -76]).fill({ color: skinColor });
+    head.poly([-6, -76, 0, -92, 6, -76]).fill({ color: skinColor });
+    head.poly([8, -76, 12, -86, 16, -74]).fill({ color: skinColor });
+    head.circle(0, -74, 2.5).fill({ color: 0xffffff });
+  } else if (skinVariant === "eclipse_corona") {
+    head.ellipse(0, -56, 32, 18).stroke({ width: 3, color: skinColor, alpha: 0.6 });
+    head.circle(0, -56, 22).fill({ color: 0x000000 }).stroke({ width: 1.5, color: skinColor });
+  } else if (skinVariant === "pulsar_spires") {
+    head.poly([-1.5, -78, 1.5, -78, 1.5, -98, -1.5, -98]).fill({ color: skinColor });
+    head.circle(0, -98, 3).fill({ color: 0xffffff });
+    head.poly([-1.5, -34, 1.5, -34, 1.5, -18, -1.5, -18]).fill({ color: skinColor });
+    head.circle(0, -18, 3).fill({ color: 0xffffff });
+  } else if (skinVariant === "aurora_ribbons") {
+    head.ellipse(0, -78, 24, 6).stroke({ width: 2.5, color: skinColor, alpha: 0.75 });
+  } else if (skinVariant === "angel_wings") {
+    head.poly([-26, -46, -48, -78, -32, -38]).fill({ color: skinColor, alpha: 0.85 });
+    head.poly([26, -46, 48, -78, 32, -38]).fill({ color: skinColor, alpha: 0.85 });
+    head.ellipse(0, -80, 16, 5).stroke({ width: 1.6, color: skinAccentColor });
+  } else if (skinVariant === "singularity_core") {
+    head.ellipse(0, -56, 30, 26).stroke({ width: 2, color: 0xffffff, alpha: 0.9 });
+    head.circle(-22, -70, 2.5).fill({ color: skinAccentColor });
+    head.circle(22, -42, 2.5).fill({ color: skinAccentColor });
+  }
+  // Archetype fallbacks
+  else if (skinArchetype === "stealth_ninja" || skinArchetype === "ninja") {
+    head.roundRect(-24, -66, 48, 8, 3).fill({ color: 0x1e1b4b }).stroke({ width: 1.5, color: skinColor });
     head.circle(0, -62, 3).fill({ color: 0x38bdf8 });
-    head.poly([24, -62, 38, -56, 32, -50, 22, -56]).fill({ color: skinColor, alpha: 0.9 });
   } else if (skinArchetype === "mecha_pilot") {
-    // Dual Heavy Antennas
     head.poly([-22, -72, -18, -90, -12, -70]).fill({ color: skinColor });
     head.poly([12, -70, 18, -90, 22, -72]).fill({ color: skinColor });
-    head.circle(-18, -90, 2.5).fill({ color: 0xffffff });
-    head.circle(18, -90, 2.5).fill({ color: 0xffffff });
   } else if (skinArchetype === "celestial_astro") {
-    // Golden Solar Halo
     head.ellipse(0, -64, 30, 8).stroke({ width: 2, color: skinColor, alpha: 0.85 });
-    head.circle(0, -72, 3).fill({ color: 0xfef08a });
   } else if (skinArchetype === "matrix_hacker" || skinArchetype === "hacker") {
-    // Hacker Matrix Hoodie Cowl
-    head.roundRect(-27, -78, 54, 48, 16).fill({ color: 0x111827 });
-    head.roundRect(-27, -78, 54, 48, 16).stroke({ width: 1.6, color: skinColor });
+    head.roundRect(-27, -78, 54, 48, 16).fill({ color: 0x111827 }).stroke({ width: 1.6, color: skinColor });
   } else if (skinArchetype === "cyber_cat" || skin === "cat") {
-    // Cute Cat Ears
     head.poly([-22, -72, -14, -86, -6, -76]).fill({ color: SHELL });
-    head.poly([-20, -73, -14, -83, -8, -76]).fill({ color: 0xf472b6, alpha: 0.8 }); // pink inner ear
+    head.poly([-20, -73, -14, -83, -8, -76]).fill({ color: 0xf472b6, alpha: 0.8 });
     head.poly([6, -76, 14, -86, 22, -72]).fill({ color: SHELL });
     head.poly([8, -76, 14, -83, 20, -73]).fill({ color: 0xf472b6, alpha: 0.8 });
   } else {
-    // High-Tech Crest
     head.poly([-8, -68, 0, -78, 8, -68]).fill({ color: skinColor });
   }