Premium Redesign: System Modules and Surgical Layout

WSW/src/app/cracks/page.tsx

@@ -38,37 +38,59 @@ export default async function Cracks() {
       <div className="flex flex-col md:flex-row gap-8 flex-1 min-h-0">
         
         {/* Module Sidebar */}
-        <nav className="w-full md:w-48 lg:w-64 flex-shrink-0 border-b md:border-b-0 md:border-r border-zinc-900 pr-0 md:pr-8 pb-8 md:pb-0 flex flex-row md:flex-col gap-4 overflow-x-auto md:overflow-visible">
-          <Link href="/" className="font-mono text-xs tracking-[0.2em] text-zinc-600 hover:text-white transition-colors uppercase whitespace-nowrap hidden md:block mb-8">
-            ← Back Base
-          </Link>
-          <Link href="/" className="font-mono text-xs tracking-[0.2em] text-zinc-600 hover:text-white transition-colors uppercase whitespace-nowrap block md:hidden">
-            [ BACK ]
-          </Link>
-
-          {[
-            { id: 'sources', label: 'Sources', active: false },
-            { id: 'cracks', label: 'Cracks', active: true },
-            { id: 'scripts', label: 'Scripts', active: false },
-            { id: 'tools', label: 'Tools', active: false },
-          ].map((mod) => (
-            <Link 
-              key={mod.id} 
-              href={`/${mod.id}`}
-              className={`font-mono text-xs tracking-widest uppercase py-2 flex items-center gap-3 whitespace-nowrap group ${
-                mod.active ? 'text-white' : 'text-zinc-500 hover:text-zinc-300'
-              }`}
-            >
-              <span className={`w-1.5 h-1.5 rounded-full transition-all ${
-                mod.active ? 'bg-white shadow-[0_0_10px_rgba(255,255,255,0.8)]' : 'bg-transparent border border-zinc-700 group-hover:border-zinc-500'
-              }`} />
-              {mod.label}
+        <nav className="w-full md:w-56 lg:w-72 flex-shrink-0 border-b md:border-b-0 md:border-r border-white/10 pr-0 md:pr-10 pb-8 md:pb-0 flex flex-col gap-0 overflow-hidden">
+          
+          <div className="mb-10 hidden md:block">
+            <Link href="/" className="font-mono text-[9px] tracking-[0.4em] text-zinc-500 hover:text-white transition-all uppercase flex items-center gap-2 group">
+              <span className="w-4 h-[1px] bg-zinc-800 group-hover:w-8 group-hover:bg-white transition-all" />
+              RETURN TO BASE
             </Link>
-          ))}
+          </div>
+
+          <div className="mb-6 flex flex-col gap-1">
+            <span className="font-mono text-[10px] tracking-[0.3em] text-zinc-600 uppercase">SYSTEM</span>
+            <span className="font-black text-xs tracking-tighter uppercase text-white">MODULES</span>
+          </div>
+
+          <div className="flex flex-row md:flex-col gap-2 md:gap-0 overflow-x-auto md:overflow-visible no-scrollbar">
+            {[
+              { id: 'sources', label: 'Sources', active: false, index: '01' },
+              { id: 'cracks', label: 'Cracks', active: true, index: '02' },
+              { id: 'scripts', label: 'Scripts', active: false, index: '03' },
+              { id: 'tools', label: 'Tools', active: false, index: '04' },
+            ].map((mod) => (
+              <Link 
+                key={mod.id} 
+                href={`/${mod.id}`}
+                className={`group relative flex items-center justify-between py-3 md:py-4 border-b border-white/5 transition-all ${
+                  mod.active ? 'px-4 bg-white text-black' : 'px-0 text-zinc-500 hover:text-white hover:pl-4'
+                }`}
+              >
+                <div className="flex items-center gap-4">
+                  <span className={`font-mono text-[9px] ${mod.active ? 'text-black/50' : 'text-zinc-800 group-hover:text-zinc-400'}`}>
+                    {mod.index}
+                  </span>
+                  <span className="font-black text-[11px] tracking-widest uppercase italic">
+                    {mod.label}
+                  </span>
+                </div>
+                {mod.active && (
+                  <div className="w-1.5 h-1.5 bg-black rounded-full shadow-[0_0_8px_rgba(0,0,0,0.5)]" />
+                )}
+                {!mod.active && (
+                  <span className="opacity-0 group-hover:opacity-100 transition-opacity font-mono text-[10px]">→</span>
+                )}
+              </Link>
+            ))}
+          </div>
           
-          <div className="mt-0 md:mt-12 flex items-center md:items-start ml-4 md:ml-0">
-            <Link href="/vip" className="font-mono text-[10px] tracking-[0.2em] px-4 py-2 border border-zinc-800 text-zinc-400 hover:text-black hover:bg-white transition-all uppercase whitespace-nowrap">
-              Unlock VIP
+          <div className="mt-auto pt-12 hidden md:block">
+            <Link href="/vip" className="relative group block overflow-hidden">
+              <div className="absolute inset-0 bg-white translate-y-[101%] group-hover:translate-y-0 transition-transform duration-300" />
+              <div className="border border-white/20 px-6 py-4 flex flex-col gap-1 relative transition-colors group-hover:text-black">
+                <span className="font-mono text-[8px] tracking-[.3em] text-zinc-500 group-hover:text-black/50 uppercase transition-colors">Access Level</span>
+                <span className="font-black text-xs tracking-[.2em] uppercase">Request VIP</span>
+              </div>
             </Link>
           </div>
         </nav>
@@ -79,13 +101,13 @@ export default async function Cracks() {
           {/* Top Edge Decoration Removed */}
 
           {/* Ledger Table Header (Desktop) */}
-          <div className="hidden md:grid grid-cols-12 gap-4 px-8 py-4 border-b border-zinc-800 font-mono text-[9px] tracking-[0.2em] text-zinc-500 uppercase bg-zinc-900/20">
-            <div className="col-span-2">Date</div>
-            <div className="col-span-1">ID</div>
-            <div className="col-span-4">Identifier</div>
-            <div className="col-span-2">Availability</div>
-            <div className="col-span-2">Status</div>
-            <div className="col-span-1 text-right">Action</div>
+          <div className="hidden md:grid grid-cols-12 gap-4 px-8 py-5 border-b border-zinc-900 font-mono text-[8px] tracking-[0.3em] text-zinc-600 uppercase bg-black/40">
+            <div className="col-span-2">TIMESTAMP</div>
+            <div className="col-span-1">REF</div>
+            <div className="col-span-4">IDENTIFIER</div>
+            <div className="col-span-2">LATENCY / AVAIL</div>
+            <div className="col-span-2">ENCRYPTION / STATUS</div>
+            <div className="col-span-1 text-right">ACTION</div>
           </div>
 
           {/* Ledger Content */}

WSW/src/app/globals.css

@@ -38,3 +38,11 @@ body {
   animation: noise 8s steps(10) infinite;
   z-index: 50;
 }
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}

WSW/src/app/page.tsx

@@ -30,38 +30,60 @@ export default function Home() {
         </div>
 
         {/* Right Side: Navigation Grid (4 columns) */}
-        <div className="lg:col-span-4 bg-black flex flex-col lg:h-full lg:overflow-y-auto">
+        <div className="lg:col-span-4 bg-black flex flex-col lg:h-full lg:overflow-y-auto border-t lg:border-t-0 border-zinc-900">
           
-          <div className="p-4 sm:p-6 md:p-8 border-b border-zinc-800 shrink-0 bg-black sticky top-0 z-10 hidden lg:block">
-            <h2 className="font-mono text-[9px] sm:text-[10px] tracking-[0.3em] text-zinc-500 uppercase">
-              System Modules
-            </h2>
+          <div className="p-8 border-b border-zinc-900 shrink-0 bg-black sticky top-0 z-10">
+            <div className="flex flex-col gap-1">
+              <span className="font-mono text-[10px] tracking-[0.3em] text-zinc-600 uppercase">SYSTEM</span>
+              <span className="font-black text-xs tracking-tighter uppercase text-white">MODULES</span>
+            </div>
           </div>
 
-          <div className="flex-1 flex flex-col justify-center lg:justify-start">
-            <Link href="/sources" className="flex-1 sm:min-h-[80px] p-4 sm:p-6 md:p-8 border-b border-zinc-800 flex items-center justify-between group hover:bg-white hover:text-black transition-colors duration-300">
-              <span className="font-mono text-[10px] sm:text-xs md:text-sm tracking-widest uppercase">Sources</span>
-              <span className="font-sans text-zinc-500 group-hover:text-black transition-colors">↗</span>
-            </Link>
-            
-            <Link href="/cracks" className="flex-1 sm:min-h-[80px] p-4 sm:p-6 md:p-8 border-b border-zinc-800 flex items-center justify-between group hover:bg-white hover:text-black transition-colors duration-300">
-              <span className="font-mono text-[10px] sm:text-xs md:text-sm tracking-widest uppercase">Cracks</span>
-              <span className="font-sans text-zinc-500 group-hover:text-black transition-colors">↗</span>
-            </Link>
-
-            <Link href="/scripts" className="flex-1 sm:min-h-[80px] p-4 sm:p-6 md:p-8 border-b border-zinc-800 flex items-center justify-between group hover:bg-white hover:text-black transition-colors duration-300">
-              <span className="font-mono text-[10px] sm:text-xs md:text-sm tracking-widest uppercase">Scripts</span>
-              <span className="font-sans text-zinc-500 group-hover:text-black transition-colors">↗</span>
-            </Link>
-
-            <Link href="/tools" className="flex-1 sm:min-h-[80px] p-4 sm:p-6 md:p-8 lg:border-b border-zinc-800 flex items-center justify-between group hover:bg-white hover:text-black transition-colors duration-300">
-              <span className="font-mono text-[10px] sm:text-xs md:text-sm tracking-widest uppercase">Tools</span>
-              <span className="font-sans text-zinc-500 group-hover:text-black transition-colors">↗</span>
-            </Link>
+          <div className="flex-1 flex flex-col">
+            {[
+              { id: 'sources', label: 'Sources', index: '01', desc: 'Resource Directory' },
+              { id: 'cracks', label: 'Cracks', index: '02', desc: 'Bypass Protocols' },
+              { id: 'scripts', label: 'Scripts', index: '03', desc: 'Automated Logic' },
+              { id: 'tools', label: 'Tools', index: '04', desc: 'Utility Suite' },
+            ].map((mod) => (
+              <Link 
+                key={mod.id} 
+                href={`/${mod.id}`} 
+                className="flex-1 min-h-[100px] p-8 border-b border-zinc-900 flex flex-col justify-center gap-2 group hover:bg-white transition-all duration-500"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-4">
+                    <span className="font-mono text-[10px] text-zinc-800 group-hover:text-black/30 transition-colors">
+                      {mod.index}
+                    </span>
+                    <span className="font-black text-xl tracking-tighter uppercase italic group-hover:text-black transition-colors">
+                      {mod.label}
+                    </span>
+                  </div>
+                  <span className="font-mono text-zinc-800 group-hover:text-black transition-colors">→</span>
+                </div>
+                <p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase group-hover:text-black/60 transition-colors">
+                  {mod.desc}
+                </p>
+              </Link>
+            ))}
 
-            <Link href="/vip" className="flex-1 sm:min-h-[80px] p-4 sm:p-6 md:p-8 bg-zinc-900 flex items-center justify-between group hover:bg-white hover:text-black transition-colors duration-300">
-              <span className="font-mono text-[10px] sm:text-xs md:text-sm tracking-widest uppercase text-white group-hover:text-black">VIP Access</span>
-              <span className="font-sans text-white group-hover:text-black">↗</span>
+            <Link href="/vip" className="flex-1 min-h-[120px] p-8 bg-zinc-950 flex flex-col justify-center gap-2 group hover:bg-white transition-all duration-500 relative overflow-hidden">
+              <div className="absolute top-0 left-0 w-2 h-full bg-white -translate-x-full group-hover:translate-x-0 transition-transform duration-500" />
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <span className="font-mono text-[10px] text-zinc-800 group-hover:text-black/30 transition-colors">
+                    EXP
+                  </span>
+                  <span className="font-black text-xl tracking-tighter uppercase text-white group-hover:text-black transition-colors italic">
+                    VIP Access
+                  </span>
+                </div>
+                <div className="w-2 h-2 bg-white rounded-full group-hover:bg-black transition-colors shadow-[0_0_10px_rgba(255,255,255,0.5)] group-hover:shadow-none animate-pulse" />
+              </div>
+              <p className="font-mono text-[9px] tracking-widest text-zinc-500 uppercase group-hover:text-black/60 transition-colors">
+                Clearance Elevation Required
+              </p>
             </Link>
           </div>
 

WSW/src/app/scripts/page.tsx

@@ -38,37 +38,59 @@ export default async function Scripts() {
       <div className="flex flex-col md:flex-row gap-8 flex-1 min-h-0">
         
         {/* Module Sidebar */}
-        <nav className="w-full md:w-48 lg:w-64 flex-shrink-0 border-b md:border-b-0 md:border-r border-zinc-900 pr-0 md:pr-8 pb-8 md:pb-0 flex flex-row md:flex-col gap-4 overflow-x-auto md:overflow-visible">
-          <Link href="/" className="font-mono text-xs tracking-[0.2em] text-zinc-600 hover:text-white transition-colors uppercase whitespace-nowrap hidden md:block mb-8">
-            ← Back Base
-          </Link>
-          <Link href="/" className="font-mono text-xs tracking-[0.2em] text-zinc-600 hover:text-white transition-colors uppercase whitespace-nowrap block md:hidden">
-            [ BACK ]
-          </Link>
-
-          {[
-            { id: 'sources', label: 'Sources', active: false },
-            { id: 'cracks', label: 'Cracks', active: false },
-            { id: 'scripts', label: 'Scripts', active: true },
-            { id: 'tools', label: 'Tools', active: false },
-          ].map((mod) => (
-            <Link 
-              key={mod.id} 
-              href={`/${mod.id}`}
-              className={`font-mono text-xs tracking-widest uppercase py-2 flex items-center gap-3 whitespace-nowrap group ${
-                mod.active ? 'text-white' : 'text-zinc-500 hover:text-zinc-300'
-              }`}
-            >
-              <span className={`w-1.5 h-1.5 rounded-full transition-all ${
-                mod.active ? 'bg-white shadow-[0_0_10px_rgba(255,255,255,0.8)]' : 'bg-transparent border border-zinc-700 group-hover:border-zinc-500'
-              }`} />
-              {mod.label}
+        <nav className="w-full md:w-56 lg:w-72 flex-shrink-0 border-b md:border-b-0 md:border-r border-white/10 pr-0 md:pr-10 pb-8 md:pb-0 flex flex-col gap-0 overflow-hidden">
+          
+          <div className="mb-10 hidden md:block">
+            <Link href="/" className="font-mono text-[9px] tracking-[0.4em] text-zinc-500 hover:text-white transition-all uppercase flex items-center gap-2 group">
+              <span className="w-4 h-[1px] bg-zinc-800 group-hover:w-8 group-hover:bg-white transition-all" />
+              RETURN TO BASE
             </Link>
-          ))}
+          </div>
+
+          <div className="mb-6 flex flex-col gap-1">
+            <span className="font-mono text-[10px] tracking-[0.3em] text-zinc-600 uppercase">SYSTEM</span>
+            <span className="font-black text-xs tracking-tighter uppercase text-white">MODULES</span>
+          </div>
+
+          <div className="flex flex-row md:flex-col gap-2 md:gap-0 overflow-x-auto md:overflow-visible no-scrollbar">
+            {[
+              { id: 'sources', label: 'Sources', active: false, index: '01' },
+              { id: 'cracks', label: 'Cracks', active: false, index: '02' },
+              { id: 'scripts', label: 'Scripts', active: true, index: '03' },
+              { id: 'tools', label: 'Tools', active: false, index: '04' },
+            ].map((mod) => (
+              <Link 
+                key={mod.id} 
+                href={`/${mod.id}`}
+                className={`group relative flex items-center justify-between py-3 md:py-4 border-b border-white/5 transition-all ${
+                  mod.active ? 'px-4 bg-white text-black' : 'px-0 text-zinc-500 hover:text-white hover:pl-4'
+                }`}
+              >
+                <div className="flex items-center gap-4">
+                  <span className={`font-mono text-[9px] ${mod.active ? 'text-black/50' : 'text-zinc-800 group-hover:text-zinc-400'}`}>
+                    {mod.index}
+                  </span>
+                  <span className="font-black text-[11px] tracking-widest uppercase italic">
+                    {mod.label}
+                  </span>
+                </div>
+                {mod.active && (
+                  <div className="w-1.5 h-1.5 bg-black rounded-full shadow-[0_0_8px_rgba(0,0,0,0.5)]" />
+                )}
+                {!mod.active && (
+                  <span className="opacity-0 group-hover:opacity-100 transition-opacity font-mono text-[10px]">→</span>
+                )}
+              </Link>
+            ))}
+          </div>
           
-          <div className="mt-0 md:mt-12 flex items-center md:items-start ml-4 md:ml-0">
-            <Link href="/vip" className="font-mono text-[10px] tracking-[0.2em] px-4 py-2 border border-zinc-800 text-zinc-400 hover:text-black hover:bg-white transition-all uppercase whitespace-nowrap">
-              Unlock VIP
+          <div className="mt-auto pt-12 hidden md:block">
+            <Link href="/vip" className="relative group block overflow-hidden">
+              <div className="absolute inset-0 bg-white translate-y-[101%] group-hover:translate-y-0 transition-transform duration-300" />
+              <div className="border border-white/20 px-6 py-4 flex flex-col gap-1 relative transition-colors group-hover:text-black">
+                <span className="font-mono text-[8px] tracking-[.3em] text-zinc-500 group-hover:text-black/50 uppercase transition-colors">Access Level</span>
+                <span className="font-black text-xs tracking-[.2em] uppercase">Request VIP</span>
+              </div>
             </Link>
           </div>
         </nav>
@@ -79,13 +101,13 @@ export default async function Scripts() {
           {/* Top Edge Decoration Removed */}
 
           {/* Ledger Table Header (Desktop) */}
-          <div className="hidden md:grid grid-cols-12 gap-4 px-8 py-4 border-b border-zinc-800 font-mono text-[9px] tracking-[0.2em] text-zinc-500 uppercase bg-zinc-900/20">
-            <div className="col-span-2">Date</div>
-            <div className="col-span-1">ID</div>
-            <div className="col-span-4">Identifier</div>
-            <div className="col-span-2">Availability</div>
-            <div className="col-span-2">Status</div>
-            <div className="col-span-1 text-right">Action</div>
+          <div className="hidden md:grid grid-cols-12 gap-4 px-8 py-5 border-b border-zinc-900 font-mono text-[8px] tracking-[0.3em] text-zinc-600 uppercase bg-black/40">
+            <div className="col-span-2">TIMESTAMP</div>
+            <div className="col-span-1">REF</div>
+            <div className="col-span-4">IDENTIFIER</div>
+            <div className="col-span-2">LATENCY / AVAIL</div>
+            <div className="col-span-2">ENCRYPTION / STATUS</div>
+            <div className="col-span-1 text-right">ACTION</div>
           </div>
 
           {/* Ledger Content */}

WSW/src/app/sources/page.tsx

@@ -38,37 +38,59 @@ export default async function Sources() {
       <div className="flex flex-col md:flex-row gap-8 flex-1 min-h-0">
         
         {/* Module Sidebar */}
-        <nav className="w-full md:w-48 lg:w-64 flex-shrink-0 border-b md:border-b-0 md:border-r border-zinc-900 pr-0 md:pr-8 pb-8 md:pb-0 flex flex-row md:flex-col gap-4 overflow-x-auto md:overflow-visible">
-          <Link href="/" className="font-mono text-xs tracking-[0.2em] text-zinc-600 hover:text-white transition-colors uppercase whitespace-nowrap hidden md:block mb-8">
-            ← Back Base
-          </Link>
-          <Link href="/" className="font-mono text-xs tracking-[0.2em] text-zinc-600 hover:text-white transition-colors uppercase whitespace-nowrap block md:hidden">
-            [ BACK ]
-          </Link>
-
-          {[
-            { id: 'sources', label: 'Sources', active: true },
-            { id: 'cracks', label: 'Cracks', active: false },
-            { id: 'scripts', label: 'Scripts', active: false },
-            { id: 'tools', label: 'Tools', active: false },
-          ].map((mod) => (
-            <Link 
-              key={mod.id} 
-              href={`/${mod.id}`}
-              className={`font-mono text-xs tracking-widest uppercase py-2 flex items-center gap-3 whitespace-nowrap group ${
-                mod.active ? 'text-white' : 'text-zinc-500 hover:text-zinc-300'
-              }`}
-            >
-              <span className={`w-1.5 h-1.5 rounded-full transition-all ${
-                mod.active ? 'bg-white shadow-[0_0_10px_rgba(255,255,255,0.8)]' : 'bg-transparent border border-zinc-700 group-hover:border-zinc-500'
-              }`} />
-              {mod.label}
+        <nav className="w-full md:w-56 lg:w-72 flex-shrink-0 border-b md:border-b-0 md:border-r border-white/10 pr-0 md:pr-10 pb-8 md:pb-0 flex flex-col gap-0 overflow-hidden">
+          
+          <div className="mb-10 hidden md:block">
+            <Link href="/" className="font-mono text-[9px] tracking-[0.4em] text-zinc-500 hover:text-white transition-all uppercase flex items-center gap-2 group">
+              <span className="w-4 h-[1px] bg-zinc-800 group-hover:w-8 group-hover:bg-white transition-all" />
+              RETURN TO BASE
             </Link>
-          ))}
+          </div>
+
+          <div className="mb-6 flex flex-col gap-1">
+            <span className="font-mono text-[10px] tracking-[0.3em] text-zinc-600 uppercase">SYSTEM</span>
+            <span className="font-black text-xs tracking-tighter uppercase text-white">MODULES</span>
+          </div>
+
+          <div className="flex flex-row md:flex-col gap-2 md:gap-0 overflow-x-auto md:overflow-visible no-scrollbar">
+            {[
+              { id: 'sources', label: 'Sources', active: true, index: '01' },
+              { id: 'cracks', label: 'Cracks', active: false, index: '02' },
+              { id: 'scripts', label: 'Scripts', active: false, index: '03' },
+              { id: 'tools', label: 'Tools', active: false, index: '04' },
+            ].map((mod) => (
+              <Link 
+                key={mod.id} 
+                href={`/${mod.id}`}
+                className={`group relative flex items-center justify-between py-3 md:py-4 border-b border-white/5 transition-all ${
+                  mod.active ? 'px-4 bg-white text-black' : 'px-0 text-zinc-500 hover:text-white hover:pl-4'
+                }`}
+              >
+                <div className="flex items-center gap-4">
+                  <span className={`font-mono text-[9px] ${mod.active ? 'text-black/50' : 'text-zinc-800 group-hover:text-zinc-400'}`}>
+                    {mod.index}
+                  </span>
+                  <span className="font-black text-[11px] tracking-widest uppercase italic">
+                    {mod.label}
+                  </span>
+                </div>
+                {mod.active && (
+                  <div className="w-1.5 h-1.5 bg-black rounded-full shadow-[0_0_8px_rgba(0,0,0,0.5)]" />
+                )}
+                {!mod.active && (
+                  <span className="opacity-0 group-hover:opacity-100 transition-opacity font-mono text-[10px]">→</span>
+                )}
+              </Link>
+            ))}
+          </div>
           
-          <div className="mt-0 md:mt-12 flex items-center md:items-start ml-4 md:ml-0">
-            <Link href="/vip" className="font-mono text-[10px] tracking-[0.2em] px-4 py-2 border border-zinc-800 text-zinc-400 hover:text-black hover:bg-white transition-all uppercase whitespace-nowrap">
-              Unlock VIP
+          <div className="mt-auto pt-12 hidden md:block">
+            <Link href="/vip" className="relative group block overflow-hidden">
+              <div className="absolute inset-0 bg-white translate-y-[101%] group-hover:translate-y-0 transition-transform duration-300" />
+              <div className="border border-white/20 px-6 py-4 flex flex-col gap-1 relative transition-colors group-hover:text-black">
+                <span className="font-mono text-[8px] tracking-[.3em] text-zinc-500 group-hover:text-black/50 uppercase transition-colors">Access Level</span>
+                <span className="font-black text-xs tracking-[.2em] uppercase">Request VIP</span>
+              </div>
             </Link>
           </div>
         </nav>
@@ -79,13 +101,13 @@ export default async function Sources() {
           {/* Top Edge Decoration Removed */}
 
           {/* Ledger Table Header (Desktop) */}
-          <div className="hidden md:grid grid-cols-12 gap-4 px-8 py-4 border-b border-zinc-800 font-mono text-[9px] tracking-[0.2em] text-zinc-500 uppercase bg-zinc-900/20">
-            <div className="col-span-2">Date</div>
-            <div className="col-span-1">ID</div>
-            <div className="col-span-4">Identifier</div>
-            <div className="col-span-2">Availability</div>
-            <div className="col-span-2">Status</div>
-            <div className="col-span-1 text-right">Action</div>
+          <div className="hidden md:grid grid-cols-12 gap-4 px-8 py-5 border-b border-zinc-900 font-mono text-[8px] tracking-[0.3em] text-zinc-600 uppercase bg-black/40">
+            <div className="col-span-2">TIMESTAMP</div>
+            <div className="col-span-1">REF</div>
+            <div className="col-span-4">IDENTIFIER</div>
+            <div className="col-span-2">LATENCY / AVAIL</div>
+            <div className="col-span-2">ENCRYPTION / STATUS</div>
+            <div className="col-span-1 text-right">ACTION</div>
           </div>
 
           {/* Ledger Content */}

WSW/src/app/tools/page.tsx

@@ -38,37 +38,59 @@ export default async function Tools() {
       <div className="flex flex-col md:flex-row gap-8 flex-1 min-h-0">
         
         {/* Module Sidebar */}
-        <nav className="w-full md:w-48 lg:w-64 flex-shrink-0 border-b md:border-b-0 md:border-r border-zinc-900 pr-0 md:pr-8 pb-8 md:pb-0 flex flex-row md:flex-col gap-4 overflow-x-auto md:overflow-visible">
-          <Link href="/" className="font-mono text-xs tracking-[0.2em] text-zinc-600 hover:text-white transition-colors uppercase whitespace-nowrap hidden md:block mb-8">
-            ← Back Base
-          </Link>
-          <Link href="/" className="font-mono text-xs tracking-[0.2em] text-zinc-600 hover:text-white transition-colors uppercase whitespace-nowrap block md:hidden">
-            [ BACK ]
-          </Link>
-
-          {[
-            { id: 'sources', label: 'Sources', active: false },
-            { id: 'cracks', label: 'Cracks', active: false },
-            { id: 'scripts', label: 'Scripts', active: false },
-            { id: 'tools', label: 'Tools', active: true },
-          ].map((mod) => (
-            <Link 
-              key={mod.id} 
-              href={`/${mod.id}`}
-              className={`font-mono text-xs tracking-widest uppercase py-2 flex items-center gap-3 whitespace-nowrap group ${
-                mod.active ? 'text-white' : 'text-zinc-500 hover:text-zinc-300'
-              }`}
-            >
-              <span className={`w-1.5 h-1.5 rounded-full transition-all ${
-                mod.active ? 'bg-white shadow-[0_0_10px_rgba(255,255,255,0.8)]' : 'bg-transparent border border-zinc-700 group-hover:border-zinc-500'
-              }`} />
-              {mod.label}
+        <nav className="w-full md:w-56 lg:w-72 flex-shrink-0 border-b md:border-b-0 md:border-r border-white/10 pr-0 md:pr-10 pb-8 md:pb-0 flex flex-col gap-0 overflow-hidden">
+          
+          <div className="mb-10 hidden md:block">
+            <Link href="/" className="font-mono text-[9px] tracking-[0.4em] text-zinc-500 hover:text-white transition-all uppercase flex items-center gap-2 group">
+              <span className="w-4 h-[1px] bg-zinc-800 group-hover:w-8 group-hover:bg-white transition-all" />
+              RETURN TO BASE
             </Link>
-          ))}
+          </div>
+
+          <div className="mb-6 flex flex-col gap-1">
+            <span className="font-mono text-[10px] tracking-[0.3em] text-zinc-600 uppercase">SYSTEM</span>
+            <span className="font-black text-xs tracking-tighter uppercase text-white">MODULES</span>
+          </div>
+
+          <div className="flex flex-row md:flex-col gap-2 md:gap-0 overflow-x-auto md:overflow-visible no-scrollbar">
+            {[
+              { id: 'sources', label: 'Sources', active: false, index: '01' },
+              { id: 'cracks', label: 'Cracks', active: false, index: '02' },
+              { id: 'scripts', label: 'Scripts', active: false, index: '03' },
+              { id: 'tools', label: 'Tools', active: true, index: '04' },
+            ].map((mod) => (
+              <Link 
+                key={mod.id} 
+                href={`/${mod.id}`}
+                className={`group relative flex items-center justify-between py-3 md:py-4 border-b border-white/5 transition-all ${
+                  mod.active ? 'px-4 bg-white text-black' : 'px-0 text-zinc-500 hover:text-white hover:pl-4'
+                }`}
+              >
+                <div className="flex items-center gap-4">
+                  <span className={`font-mono text-[9px] ${mod.active ? 'text-black/50' : 'text-zinc-800 group-hover:text-zinc-400'}`}>
+                    {mod.index}
+                  </span>
+                  <span className="font-black text-[11px] tracking-widest uppercase italic">
+                    {mod.label}
+                  </span>
+                </div>
+                {mod.active && (
+                  <div className="w-1.5 h-1.5 bg-black rounded-full shadow-[0_0_8px_rgba(0,0,0,0.5)]" />
+                )}
+                {!mod.active && (
+                  <span className="opacity-0 group-hover:opacity-100 transition-opacity font-mono text-[10px]">→</span>
+                )}
+              </Link>
+            ))}
+          </div>
           
-          <div className="mt-0 md:mt-12 flex items-center md:items-start ml-4 md:ml-0">
-            <Link href="/vip" className="font-mono text-[10px] tracking-[0.2em] px-4 py-2 border border-zinc-800 text-zinc-400 hover:text-black hover:bg-white transition-all uppercase whitespace-nowrap">
-              Unlock VIP
+          <div className="mt-auto pt-12 hidden md:block">
+            <Link href="/vip" className="relative group block overflow-hidden">
+              <div className="absolute inset-0 bg-white translate-y-[101%] group-hover:translate-y-0 transition-transform duration-300" />
+              <div className="border border-white/20 px-6 py-4 flex flex-col gap-1 relative transition-colors group-hover:text-black">
+                <span className="font-mono text-[8px] tracking-[.3em] text-zinc-500 group-hover:text-black/50 uppercase transition-colors">Access Level</span>
+                <span className="font-black text-xs tracking-[.2em] uppercase">Request VIP</span>
+              </div>
             </Link>
           </div>
         </nav>
@@ -79,13 +101,13 @@ export default async function Tools() {
           {/* Top Edge Decoration Removed */}
 
           {/* Ledger Table Header (Desktop) */}
-          <div className="hidden md:grid grid-cols-12 gap-4 px-8 py-4 border-b border-zinc-800 font-mono text-[9px] tracking-[0.2em] text-zinc-500 uppercase bg-zinc-900/20">
-            <div className="col-span-2">Date</div>
-            <div className="col-span-1">ID</div>
-            <div className="col-span-4">Identifier</div>
-            <div className="col-span-2">Availability</div>
-            <div className="col-span-2">Status</div>
-            <div className="col-span-1 text-right">Action</div>
+          <div className="hidden md:grid grid-cols-12 gap-4 px-8 py-5 border-b border-zinc-900 font-mono text-[8px] tracking-[0.3em] text-zinc-600 uppercase bg-black/40">
+            <div className="col-span-2">TIMESTAMP</div>
+            <div className="col-span-1">REF</div>
+            <div className="col-span-4">IDENTIFIER</div>
+            <div className="col-span-2">LATENCY / AVAIL</div>
+            <div className="col-span-2">ENCRYPTION / STATUS</div>
+            <div className="col-span-1 text-right">ACTION</div>
           </div>
 
           {/* Ledger Content */}

WSW/src/app/vip/page.tsx

@@ -90,13 +90,27 @@ export default async function VIPPage() {
             <p className="font-mono text-[10px] text-zinc-400 tracking-widest leading-relaxed mb-6">
               Your security clearance is elevated. You now have unrestricted access to all highly classified directory index protocols.
             </p>
-            <div className="grid grid-cols-2 gap-4">
-              <Link href="/sources" className="p-4 border border-zinc-700 hover:border-white transition-colors text-center font-mono text-[10px] tracking-widest text-white uppercase bg-zinc-900 group">
-                Access <span className="group-hover:text-zinc-400">Sources</span>
-              </Link>
-              <Link href="/cracks" className="p-4 border border-zinc-700 hover:border-white transition-colors text-center font-mono text-[10px] tracking-widest text-white uppercase bg-zinc-900 group">
-                Access <span className="group-hover:text-zinc-400">Cracks</span>
-              </Link>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              {[
+                { id: 'sources', label: 'Sources', index: '01' },
+                { id: 'cracks', label: 'Cracks', index: '02' },
+                { id: 'scripts', label: 'Scripts', index: '03' },
+                { id: 'tools', label: 'Tools', index: '04' },
+              ].map((mod) => (
+                <Link 
+                  key={mod.id}
+                  href={`/${mod.id}`} 
+                  className="p-6 border border-zinc-800 hover:border-white transition-all bg-zinc-900/50 group flex flex-col gap-2"
+                >
+                  <div className="flex justify-between items-center">
+                    <span className="font-mono text-[9px] text-zinc-600 group-hover:text-zinc-400 transition-colors uppercase tracking-widest">{mod.index}</span>
+                    <span className="text-zinc-700 group-hover:text-white transition-colors">→</span>
+                  </div>
+                  <span className="font-black text-sm tracking-widest text-white uppercase italic group-hover:pl-2 transition-all">
+                    {mod.label}
+                  </span>
+                </Link>
+              ))}
             </div>
           </div>
         ) : (

WSW/src/components/AnimatedRow.tsx

@@ -22,38 +22,48 @@ export default function AnimatedRow({
         delay: index * 0.05,
         ease: [0.22, 1, 0.36, 1],
       }}
-      className="grid grid-cols-1 md:grid-cols-12 gap-2 md:gap-4 px-6 md:px-8 py-4 sm:py-6 border-b border-zinc-800/50 hover:bg-zinc-900/40 hover:shadow-[inset_0_0_15px_rgba(255,255,255,0.02)] transition-all duration-300 font-mono text-[10px] tracking-widest group items-center relative overflow-hidden"
+      className="grid grid-cols-1 md:grid-cols-12 gap-2 md:gap-4 px-6 md:px-8 py-5 border-b border-zinc-900/50 hover:bg-white/[0.02] transition-all duration-300 font-mono text-[10px] tracking-widest group items-center relative overflow-hidden"
     >
-      <div className="col-span-1 border-b border-zinc-800/30 pb-2 mb-2 md:border-none md:pb-0 md:mb-0 md:col-span-3 flex md:contents justify-between text-zinc-500">
-        <div className="md:col-span-2 group-hover:text-zinc-400 transition-colors">
+      <div className="col-span-1 md:col-span-3 flex md:contents justify-between text-zinc-600">
+        <div className="md:col-span-2 group-hover:text-zinc-400 transition-colors font-mono tabular-nums">
           {new Date(drop.published_at).toLocaleDateString('en-GB', {
             day: '2-digit',
             month: '2-digit',
             year: 'numeric',
           })}
         </div>
-        <div className="md:col-span-1 text-zinc-600 group-hover:text-zinc-500 transition-colors">
-          {prefix}-{drop.id.toString().padStart(3, '0')}
+        <div className="md:col-span-1 text-zinc-700 group-hover:text-zinc-500 transition-colors">
+          {prefix}{drop.id.toString().padStart(3, '0')}
         </div>
       </div>
 
-      <div className="col-span-1 md:col-span-4 text-white font-bold truncate tracking-[0.2em] group-hover:drop-shadow-[0_0_8px_rgba(255,255,255,0.3)] transition-all duration-300">
-        {drop.title.toUpperCase()}
+      <div className="col-span-1 md:col-span-4 text-white font-black tracking-tighter uppercase text-xs italic group-hover:pl-2 transition-all duration-300">
+        {drop.title}
       </div>
 
-      <div className="col-span-1 md:col-span-5 flex md:contents justify-between items-center mt-2 md:mt-0 text-[10px]">
-        <div className="md:col-span-2 text-zinc-400 truncate pr-2 group-hover:text-zinc-300 transition-colors">
-          {drop.file_url ? 'AVAILABLE' : 'N/A'}
+      <div className="col-span-1 md:col-span-5 flex md:contents justify-between items-center text-[9px] tracking-[0.2em]">
+        <div className="md:col-span-2 text-zinc-500 group-hover:text-zinc-300 transition-colors flex items-center gap-2">
+          {drop.file_url ? (
+            <>
+              <span className="w-1 h-1 bg-green-500 rounded-full shadow-[0_0_5px_rgba(34,197,94,0.5)]" />
+              AVAILABLE
+            </>
+          ) : (
+            <>
+              <span className="w-1 h-1 bg-zinc-800 rounded-full" />
+              N/A
+            </>
+          )}
         </div>
 
         <div
           className={`md:col-span-2 ${
             drop.status === 'checked'
-              ? 'text-white group-hover:drop-shadow-[0_0_5px_rgba(255,255,255,0.5)]'
-              : 'text-zinc-400 animate-pulse group-hover:text-zinc-300'
+              ? 'text-white'
+              : 'text-zinc-600 animate-pulse'
           } transition-all duration-300`}
         >
-          [{drop.status === 'checked' ? 'VERIFIED' : 'NOT VERIFIED'}]
+          {drop.status === 'checked' ? '• SECURE' : '• UNVERIFIED'}
         </div>
 
         <div className="md:col-span-1 text-right">
@@ -63,13 +73,13 @@ export default function AnimatedRow({
                 href={drop.file_url}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-white hover:drop-shadow-[0_0_8px_rgba(255,255,255,0.8)] transition-all border-b border-transparent hover:border-white pb-0.5"
+                className="bg-white text-black px-3 py-1.5 font-black text-[9px] tracking-widest hover:bg-zinc-200 transition-colors"
               >
-                DOWNLOAD
+                FETCH
               </a>
             ) : (
-              <span className="text-zinc-600 cursor-not-allowed">
-                [ VIP ONLY ]
+              <span className="text-zinc-800 border border-zinc-900 px-3 py-1.5 cursor-not-allowed">
+                LOCKED
               </span>
             )
           )}

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@octokit/rest": "^22.0.1",
+        "@supabase/supabase-js": "^2.99.3",
         "better-sqlite3": "^11.7.0",
         "discord.js": "^14.16.0",
         "dotenv": "^16.4.0",
@@ -334,6 +335,86 @@
         "npm": ">=7.0.0"
       }
     },
+    "node_modules/@supabase/auth-js": {
+      "version": "2.99.3",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.99.3.tgz",
+      "integrity": "sha512-vMEVLA1kGGYd/kdsJSwtjiFUZM1nGfrz2DWmgMBZtocV48qL+L2+4QpIkueXyBEumMQZFEyhz57i/5zGHjvdBw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.99.3",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.99.3.tgz",
+      "integrity": "sha512-6tk2zrcBkzKaaBXPOG5nshn30uJNFGOH9LxOnE8i850eQmsX+jVm7vql9kTPyvUzEHwU4zdjSOkXS9M+9ukMVA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "2.99.3",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.99.3.tgz",
+      "integrity": "sha512-8HxEf+zNycj7Z8+ONhhlu+7J7Ha+L6weyCtdEeK2mN5OWJbh6n4LPU4iuJ5UlCvvNnbSXMoutY7piITEEAgl2g==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.99.3",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.99.3.tgz",
+      "integrity": "sha512-c1azgZ2nZPczbY5k5u5iFrk1InpxN81IvNE+UBAkjrBz3yc5ALLJNkeTQwbJZT4PZBuYXEzqYGLMuh9fdTtTMg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/phoenix": "^1.6.6",
+        "@types/ws": "^8.18.1",
+        "tslib": "2.8.1",
+        "ws": "^8.18.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.99.3",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.99.3.tgz",
+      "integrity": "sha512-lOfIm4hInNcd8x0i1LWphnLKxec42wwbjs+vhaVAvR801Vda0UAMbTooUY6gfqgQb8v29GofqKuQMMTAsl6w/w==",
+      "license": "MIT",
+      "dependencies": {
+        "iceberg-js": "^0.8.1",
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.99.3",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.99.3.tgz",
+      "integrity": "sha512-GuPbzoEaI51AkLw9VGhLNvnzw4PHbS3p8j2/JlvLeZNQMKwZw4aEYQIDBRtFwL5Nv7/275n9m4DHtakY8nCvgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/auth-js": "2.99.3",
+        "@supabase/functions-js": "2.99.3",
+        "@supabase/postgrest-js": "2.99.3",
+        "@supabase/realtime-js": "2.99.3",
+        "@supabase/storage-js": "2.99.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@types/node": {
       "version": "25.3.3",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.3.3.tgz",
@@ -343,6 +424,12 @@
         "undici-types": "~7.18.0"
       }
     },
+    "node_modules/@types/phoenix": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.7.tgz",
+      "integrity": "sha512-oN9ive//QSBkf19rfDv45M7eZPi0eEXylht2OLEXicu5b4KoQ1OzXIw+xDSGWxSxe1JmepRR/ZH283vsu518/Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -588,6 +675,15 @@
       "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
       "license": "MIT"
     },
+    "node_modules/iceberg-js": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
+      "integrity": "sha512-1dhVQZXhcHje7798IVM+xoo/1ZdVfzOMIc8/rgVSijRK38EDqOJoGula9N/8ZI5RD8QTxNQtK/Gozpr+qUqRRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@octokit/rest": "^22.0.1",
+    "@supabase/supabase-js": "^2.99.3",
     "better-sqlite3": "^11.7.0",
     "discord.js": "^14.16.0",
     "dotenv": "^16.4.0",

src/commands/deleteDrop.js

@@ -15,14 +15,14 @@ module.exports = {
         const id = parseInt(args[0]);
         if (isNaN(id)) return message.reply({ content: '❌ Invalid Drop ID. Must be a number.' });
 
-        const drop = stmts.getWebDrop.get(id);
+        const drop = await stmts.getWebDrop(id);
         if (!drop) {
             return message.reply({ content: `❌ No drop found in database with ID: **${id}**` });
         }
 
         try {
-            // 1. Delete locally from SQLite
-            stmts.deleteWebDrop.run(id);
+            // 1. Delete from Supabase
+            await stmts.deleteWebDrop(id);
 
             // 2. Send DELETE request to Website Backend API
             const WEBSITE_API = process.env.WEBSITE_API_URL || 'http://localhost:3000/api/drops';

src/commands/editDrop.js

@@ -20,7 +20,7 @@ module.exports = {
 
         if (isNaN(id)) return message.reply({ content: '❌ Invalid Drop ID. Must be a number.' });
 
-        const drop = stmts.getWebDrop.get(id);
+        const drop = await stmts.getWebDrop(id);
         if (!drop) {
             return message.reply({ content: `❌ No drop found in database with ID: **${id}**` });
         }
@@ -31,9 +31,9 @@ module.exports = {
         }
 
         try {
-            // 1. Update SQLite locally
+            // 1. Update Supabase
             const { db } = require('../database');
-            db.prepare(`UPDATE web_drops SET ${property} = ? WHERE id = ?`).run(newValue, id);
+            await db.from('web_drops').update({ [property]: newValue }).eq('id', id);
 
             // 2. Send update request to Website Backend API
             const WEBSITE_API = process.env.WEBSITE_API_URL || 'http://localhost:3000/api/drops';

src/commands/ticketStats.js

@@ -5,7 +5,7 @@ const { stmts } = require('../database');
 module.exports = {
     name: 'ticket stats',
     async execute(client, message) {
-        const stats = stmts.ticketStats.get();
+        const stats = await stmts.ticketStats();
 
         const embed = createEmbed({
             title: '🎫 Ticket Statistics',

src/database.js

@@ -1,119 +1,179 @@
-const path = require('path');
-const Database = require('better-sqlite3');
-const fs = require('fs');
+const { createClient } = require('@supabase/supabase-js');
 
-const DATA_DIR = path.join(__dirname, '..', 'data');
-if (!fs.existsSync(DATA_DIR)) fs.mkdirSync(DATA_DIR, { recursive: true });
+const supabase = createClient(
+    process.env.SUPABASE_URL,
+    process.env.SUPABASE_SERVICE_ROLE_KEY
+);
 
-const db = new Database(path.join(DATA_DIR, 'wsb.db'));
-
-// Enable WAL mode for better concurrency
-db.pragma('journal_mode = WAL');
-
-// ── Schema ────────────────────────────────────────────────────
-db.exec(`
-    CREATE TABLE IF NOT EXISTS tickets (
-        id            INTEGER PRIMARY KEY AUTOINCREMENT,
-        user_id       TEXT NOT NULL,
-        username      TEXT NOT NULL,
-        channel_id    TEXT,
-        status        TEXT DEFAULT 'open',
-        created_at    DATETIME DEFAULT CURRENT_TIMESTAMP,
-        closed_at     DATETIME
-    );
-
-    CREATE TABLE IF NOT EXISTS verification_log (
-        id            INTEGER PRIMARY KEY AUTOINCREMENT,
-        user_id       TEXT NOT NULL,
-        username      TEXT NOT NULL,
-        action        TEXT NOT NULL,
-        timestamp     DATETIME DEFAULT CURRENT_TIMESTAMP
-    );
-
-    CREATE TABLE IF NOT EXISTS bot_state (
-        key           TEXT PRIMARY KEY,
-        value         TEXT NOT NULL
-    );
-
-    CREATE TABLE IF NOT EXISTS whitelist (
-        user_id       TEXT PRIMARY KEY,
-        max_drops     INTEGER DEFAULT 3,
-        added_by      TEXT NOT NULL,
-        added_at      DATETIME DEFAULT CURRENT_TIMESTAMP
-    );
-
-    CREATE TABLE IF NOT EXISTS drop_log (
-        id            INTEGER PRIMARY KEY AUTOINCREMENT,
-        user_id       TEXT NOT NULL,
-        title         TEXT NOT NULL,
-        channel_id    TEXT NOT NULL,
-        dropped_at    DATETIME DEFAULT CURRENT_TIMESTAMP
-    );
-
-    CREATE TABLE IF NOT EXISTS web_drops (
-        id            INTEGER PRIMARY KEY AUTOINCREMENT,
-        user_id       TEXT NOT NULL,
-        category      TEXT NOT NULL DEFAULT 'sources',
-        title         TEXT NOT NULL,
-        description   TEXT,
-        status        TEXT,
-        is_external   INTEGER DEFAULT 0,
-        asset_id      TEXT,
-        file_url      TEXT,
-        image_url     TEXT,
-        published_at  DATETIME DEFAULT CURRENT_TIMESTAMP
-    );
-
-    CREATE TABLE IF NOT EXISTS vip_users (
-        discord_id    TEXT PRIMARY KEY,
-        purchased_at  DATETIME DEFAULT CURRENT_TIMESTAMP,
-        expires_at    DATETIME
-    );
-`);
-
-// ── Prepared Statements ───────────────────────────────────────
+// ── Prepared Statements (Wrappers for Supabase) ─────────────────
 const stmts = {
     // Tickets
-    createTicket: db.prepare('INSERT INTO tickets (user_id, username, channel_id) VALUES (?, ?, ?)'),
-    closeTicket: db.prepare('UPDATE tickets SET status = ?, closed_at = CURRENT_TIMESTAMP WHERE channel_id = ?'),
-    getTicket: db.prepare('SELECT * FROM tickets WHERE channel_id = ?'),
-    getOpenTickets: db.prepare('SELECT * FROM tickets WHERE status = ?'),
-    getUserTicket: db.prepare('SELECT * FROM tickets WHERE user_id = ? AND status = ?'),
-    ticketStats: db.prepare(`
-        SELECT
-            COUNT(*) as total,
-            SUM(CASE WHEN status = 'open' THEN 1 ELSE 0 END) as open_count,
-            SUM(CASE WHEN status = 'closed' THEN 1 ELSE 0 END) as closed_count,
-            SUM(CASE WHEN status = 'deleted' THEN 1 ELSE 0 END) as deleted_count
-        FROM tickets
-    `),
+    createTicket: async (userId, username, channelId) => {
+        return await supabase
+            .from('tickets')
+            .insert({ user_id: userId, username, channel_id: channelId });
+    },
+    closeTicket: async (status, channelId) => {
+        return await supabase
+            .from('tickets')
+            .update({ status, closed_at: new Date().toISOString() })
+            .eq('channel_id', channelId);
+    },
+    getTicket: async (channelId) => {
+        const { data } = await supabase
+            .from('tickets')
+            .select('*')
+            .eq('channel_id', channelId)
+            .single();
+        return data;
+    },
+    getOpenTickets: async (status) => {
+        const { data } = await supabase
+            .from('tickets')
+            .select('*')
+            .eq('status', status);
+        return data || [];
+    },
+    getUserTicket: async (userId, status) => {
+        const { data } = await supabase
+            .from('tickets')
+            .select('*')
+            .eq('user_id', userId)
+            .eq('status', status)
+            .single();
+        return data;
+    },
+    ticketStats: async () => {
+        const { data, error } = await supabase.rpc('get_ticket_stats');
+        if (data) return data;
+        
+        // Manual fallback if RPC not setup
+        const { count: total } = await supabase.from('tickets').select('*', { count: 'exact', head: true });
+        const { count: open } = await supabase.from('tickets').select('*', { count: 'exact', head: true }).eq('status', 'open');
+        const { count: closed } = await supabase.from('tickets').select('*', { count: 'exact', head: true }).eq('status', 'closed');
+        const { count: deleted } = await supabase.from('tickets').select('*', { count: 'exact', head: true }).eq('status', 'deleted');
+        
+        return { total, open_count: open, closed_count: closed, deleted_count: deleted };
+    },
 
     // Verification log
-    logVerification: db.prepare('INSERT INTO verification_log (user_id, username, action) VALUES (?, ?, ?)'),
+    logVerification: async (userId, username, action) => {
+        return await supabase
+            .from('verification_log')
+            .insert({ user_id: userId, username, action });
+    },
 
     // Bot state (key-value)
-    setState: db.prepare('INSERT OR REPLACE INTO bot_state (key, value) VALUES (?, ?)'),
-    getState: db.prepare('SELECT value FROM bot_state WHERE key = ?'),
-    delState: db.prepare('DELETE FROM bot_state WHERE key = ?'),
+    setState: async (key, value) => {
+        return await supabase
+            .from('bot_state')
+            .upsert({ key, value });
+    },
+    getState: async (key) => {
+        const { data } = await supabase
+            .from('bot_state')
+            .select('value')
+            .eq('key', key)
+            .single();
+        return data ? data.value : null;
+    },
+    delState: async (key) => {
+        return await supabase
+            .from('bot_state')
+            .delete()
+            .eq('key', key);
+    },
 
     // Whitelist
-    addWhitelist: db.prepare('INSERT OR REPLACE INTO whitelist (user_id, max_drops, added_by) VALUES (?, ?, ?)'),
-    removeWhitelist: db.prepare('DELETE FROM whitelist WHERE user_id = ?'),
-    getWhitelist: db.prepare('SELECT * FROM whitelist WHERE user_id = ?'),
-    getAllWhitelist: db.prepare('SELECT * FROM whitelist'),
+    addWhitelist: async (userId, maxDrops, addedBy) => {
+        return await supabase
+            .from('whitelist')
+            .upsert({ user_id: userId, max_drops: maxDrops, added_by: addedBy });
+    },
+    removeWhitelist: async (userId) => {
+        return await supabase
+            .from('whitelist')
+            .delete()
+            .eq('user_id', userId);
+    },
+    getWhitelist: async (userId) => {
+        const { data } = await supabase
+            .from('whitelist')
+            .select('*')
+            .eq('user_id', userId)
+            .single();
+        return data;
+    },
+    getAllWhitelist: async () => {
+        const { data } = await supabase
+            .from('whitelist')
+            .select('*');
+        return data || [];
+    },
 
     // Drops array
-    logDrop: db.prepare('INSERT INTO drop_log (user_id, title, channel_id) VALUES (?, ?, ?)'),
-    getDropCount24h: db.prepare(`SELECT COUNT(*) as count FROM drop_log WHERE user_id = ? AND dropped_at > datetime('now', '-24 hours')`),
-    getLastDrop: db.prepare(`SELECT dropped_at FROM drop_log WHERE user_id = ? ORDER BY dropped_at DESC LIMIT 1`),
+    logDrop: async (userId, title, channelId) => {
+        return await supabase
+            .from('drop_log')
+            .insert({ user_id: userId, title, channel_id: channelId });
+    },
+    getDropCount24h: async (userId) => {
+        const twentyFourHoursAgo = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString();
+        const { count } = await supabase
+            .from('drop_log')
+            .select('*', { count: 'exact', head: true })
+            .eq('user_id', userId)
+            .gt('dropped_at', twentyFourHoursAgo);
+        return { count: count || 0 };
+    },
+    getLastDrop: async (userId) => {
+        const { data } = await supabase
+            .from('drop_log')
+            .select('dropped_at')
+            .eq('user_id', userId)
+            .order('dropped_at', { ascending: false })
+            .limit(1)
+            .single();
+        return data;
+    },
     
-    addWebDrop: db.prepare(`
-        INSERT INTO web_drops (user_id, category, title, description, status, is_external, asset_id, file_url, image_url)
-        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
-    `),
-    getWebDrop: db.prepare('SELECT * FROM web_drops WHERE id = ?'),
-    deleteWebDrop: db.prepare('DELETE FROM web_drops WHERE id = ?'),
-    getAllWebDrops: db.prepare('SELECT * FROM web_drops ORDER BY published_at DESC LIMIT 50'),
+    addWebDrop: async (userId, category, title, description, status, isExternal, assetId, fileUrl, imageUrl) => {
+        return await supabase
+            .from('web_drops')
+            .insert({
+                user_id: userId,
+                category,
+                title,
+                description,
+                status,
+                is_external: isExternal,
+                asset_id: assetId,
+                file_url: fileUrl,
+                image_url: imageUrl
+            });
+    },
+    getWebDrop: async (id) => {
+        const { data } = await supabase
+            .from('web_drops')
+            .select('*')
+            .eq('id', id)
+            .single();
+        return data;
+    },
+    deleteWebDrop: async (id) => {
+        return await supabase
+            .from('web_drops')
+            .delete()
+            .eq('id', id);
+    },
+    getAllWebDrops: async () => {
+        const { data } = await supabase
+            .from('web_drops')
+            .select('*')
+            .order('published_at', { ascending: false })
+            .limit(50);
+        return data || [];
+    },
 };
 
-module.exports = { db, stmts };
+module.exports = { db: supabase, stmts };

src/events/messageCreate.js

@@ -77,7 +77,7 @@ module.exports = {
         // ── Whitelisted user: only allow "drop" ──
         if (userId !== OWNER_ID) {
             if (content === 'drop' || content === 'linkdrop') {
-                const check = canDrop(userId);
+                const check = await canDrop(userId);
                 if (!check.allowed) {
                     if (check.reason === 'not_whitelisted') {
                         return; // Silently ignore non-whitelisted users
@@ -128,7 +128,7 @@ module.exports = {
             if (!targetId || !/^\d{17,20}$/.test(targetId)) {
                 return message.reply({ embeds: [errorEmbed('Invalid ID', 'Usage: `whitelist <user_id> [limit]`\nExample: `whitelist 123456789 5`')] });
             }
-            stmts.addWhitelist.run(targetId, limit, userId);
+            await stmts.addWhitelist(targetId, limit, userId);
             const user = await client.users.fetch(targetId).catch(() => null);
             const name = user ? `**${user.tag}**` : `ID \`${targetId}\``;
             return message.reply({ embeds: [successEmbed('✅ Whitelisted', `${name} can now use \`drop\` (**${limit}** per day)`)] });
@@ -137,7 +137,7 @@ module.exports = {
         if (content.startsWith('unwhitelist ')) {
             const targetId = content.split(' ')[1]?.trim();
             if (!targetId) return message.reply({ embeds: [errorEmbed('Invalid ID', 'Usage: `unwhitelist <user_id>`')] });
-            stmts.removeWhitelist.run(targetId);
+            await stmts.removeWhitelist(targetId);
             return message.reply({ embeds: [successEmbed('✅ Removed', `User \`${targetId}\` removed from whitelist`)] });
         }
 
@@ -171,7 +171,7 @@ module.exports = {
         }
 
         if (content === 'whitelist') {
-            const all = stmts.getAllWhitelist.all();
+            const all = await stmts.getAllWhitelist();
             if (all.length === 0) {
                 return message.reply({ embeds: [infoEmbed('Whitelist', 'No users whitelisted.\n\nUse `whitelist <user_id>` to add.')] });
             }
@@ -179,7 +179,7 @@ module.exports = {
             for (const w of all) {
                 const user = await client.users.fetch(w.user_id).catch(() => null);
                 const name = user ? user.tag : 'Unknown';
-                const drops = stmts.getDropCount24h.get(w.user_id);
+                const drops = await stmts.getDropCount24h(w.user_id);
                 lines.push(`• **${name}** (\`${w.user_id}\`) — ${drops.count}/${w.max_drops} drops today`);
             }
             return message.reply({ embeds: [infoEmbed('📋 Whitelist', lines.join('\n'))] });

src/systems/drops.js

@@ -22,17 +22,17 @@ const STEPS = ['category', 'title', 'file', 'warnings', 'status', 'about', 'imag
  * Check if a user can drop (owner = unlimited, whitelisted = custom limit).
  * Returns { allowed: boolean, remaining?: number, resetIn?: string, limit?: number }
  */
-function canDrop(userId) {
+async function canDrop(userId) {
     if (userId === OWNER_ID) return { allowed: true, remaining: Infinity };
 
-    const wl = stmts.getWhitelist.get(userId);
+    const wl = await stmts.getWhitelist(userId);
     if (!wl) return { allowed: false, reason: 'not_whitelisted' };
 
     const limit = wl.max_drops;
-    const { count } = stmts.getDropCount24h.get(userId);
+    const { count } = await stmts.getDropCount24h(userId);
     if (count >= limit) {
-        const last = stmts.getLastDrop.get(userId);
-        const resetTime = new Date(last.dropped_at + 'Z');
+        const last = await stmts.getLastDrop(userId);
+        const resetTime = new Date(last.dropped_at);
         resetTime.setHours(resetTime.getHours() + 24);
         const diff = resetTime - new Date();
         const hours = Math.floor(diff / 3600000);
@@ -444,8 +444,8 @@ async function handleDropButton(interaction) {
                 }).catch(() => {});
             } catch(e) {}
 
-            // 4. Save to SQLite Web Tracking
-            stmts.addWebDrop.run(
+            // 4. Save to Supabase Web Tracking
+            await stmts.addWebDrop(
                 userId, 
                 session.category,
                 payload.title, 
@@ -458,7 +458,7 @@ async function handleDropButton(interaction) {
             );
 
             // Log drop for Discord rate limits
-            stmts.logDrop.run(userId, `[${session.category.toUpperCase()}] ${session.title}`, 'website');
+            await stmts.logDrop(userId, `[${session.category.toUpperCase()}] ${session.title}`, 'website');
 
             activeSessions.delete(userId);
             
@@ -575,4 +575,5 @@ module.exports = {
     handleDownloadButton,
     buildDropEmbed,
     canDrop,
+    activeSessions,
 };

src/systems/logger.js

@@ -7,10 +7,10 @@ const { Colors } = require('../config');
  */
 async function log(client, { title, description, fields = [], color = Colors.MUTED }) {
     try {
-        const row = stmts.getState.get('channel_staff-logs');
+        const row = await stmts.getState('channel_staff-logs');
         if (!row) return;
 
-        const channelId = row.value;
+        const channelId = row;
         const channel = await client.channels.fetch(channelId).catch(() => null);
         if (!channel) return;
 
@@ -23,7 +23,7 @@ async function log(client, { title, description, fields = [], color = Colors.MUT
 
 // Convenience wrappers
 async function logVerification(client, user, action) {
-    stmts.logVerification.run(user.id, user.tag, action);
+    await stmts.logVerification(user.id, user.tag, action);
     await log(client, {
         title: '🔐 Verification',
         description: `**${user.tag}** (${user.id})`,

src/systems/massdrop.js

@@ -328,9 +328,10 @@ async function handleMassDropMessage(message) {
                         }).catch(() => {});
                     } catch(e) {}
 
-                    // 4. Save to SQLite Web Tracking
-                    stmts.addWebDrop.run(
+                    // 4. Save to Supabase Web Tracking
+                    await stmts.addWebDrop(
                         userId, 
+                        'sources', // Defaulting to sources for mass drop for now, or use from config
                         payload.title, 
                         payload.description, 
                         payload.status, 
@@ -341,7 +342,7 @@ async function handleMassDropMessage(message) {
                     );
 
                     successCount++;
-                    stmts.logDrop.run(userId, fileConf.title, 'website-mass');
+                    await stmts.logDrop(userId, fileConf.title, 'website-mass');
 
                 } catch (pushErr) {
                     console.error(`[Mass Drop Deploy Error] ${fileConf.title}:`, pushErr);

src/systems/tickets.js

@@ -14,10 +14,10 @@ const { logTicket } = require('./logger');
  * Send the ticket embed with a "Create a Ticket" button to 🎫・open-ticket channel.
  */
 async function sendTicketEmbed(client) {
-    const row = stmts.getState.get('channel_🎫・open-ticket');
+    const row = await stmts.getState('channel_🎫・open-ticket');
     if (!row) throw new Error('Ticket channel not found in bot state.');
 
-    const channel = await client.channels.fetch(row.value);
+    const channel = await client.channels.fetch(row);
     if (!channel) throw new Error('Could not fetch ticket channel.');
 
     const embed = createEmbed({
@@ -46,8 +46,8 @@ async function sendTicketEmbed(client) {
 
     const msg = await channel.send({ embeds: [embed], components: [actionRow] });
 
-    stmts.setState.run('ticket_message_id', msg.id);
-    stmts.setState.run('ticket_channel_id', channel.id);
+    await stmts.setState('ticket_message_id', msg.id);
+    await stmts.setState('ticket_channel_id', channel.id);
 
     return msg;
 }
@@ -57,7 +57,7 @@ async function sendTicketEmbed(client) {
  */
 async function createTicket(guild, user, client) {
     // Check if user already has an open ticket
-    const existing = stmts.getUserTicket.get(user.id, 'open');
+    const existing = await stmts.getUserTicket(user.id, 'open');
     if (existing) return null;
 
     const staffRole = guild.roles.cache.find(r => r.name === '@@ Staff');
@@ -85,7 +85,7 @@ async function createTicket(guild, user, client) {
     });
 
     // Save to database
-    stmts.createTicket.run(user.id, user.tag, ticketChannel.id);
+    await stmts.createTicket(user.id, user.tag, ticketChannel.id);
 
     // Send welcome embed with action buttons
     const embed = createEmbed({
@@ -172,7 +172,7 @@ async function handleTicketButton(interaction, client) {
 
     if (!['ticket_close', 'ticket_delete', 'ticket_transcript'].includes(customId)) return false;
 
-    const ticket = stmts.getTicket.get(channel.id);
+    const ticket = await stmts.getTicket(channel.id);
     if (!ticket) {
         await interaction.reply({ content: '❌ This is not a ticket channel.', ephemeral: true });
         return true;
@@ -198,13 +198,13 @@ async function handleTicketButton(interaction, client) {
     }
 
     if (customId === 'ticket_close') {
-        stmts.closeTicket.run('closed', channel.id);
+        await stmts.closeTicket('closed', channel.id);
 
         // Save transcript to ticket-logs
         const transcript = await generateTranscript(channel);
-        const logsRow = stmts.getState.get('channel_📂・ticket-logs');
+        const logsRow = await stmts.getState('channel_📂・ticket-logs');
         if (logsRow) {
-            const logsChannel = await client.channels.fetch(logsRow.value).catch(() => null);
+            const logsChannel = await client.channels.fetch(logsRow).catch(() => null);
             if (logsChannel) {
                 const embed = createEmbed({
                     title: '📂 Ticket Closed',
@@ -233,7 +233,7 @@ async function handleTicketButton(interaction, client) {
     }
 
     if (customId === 'ticket_delete') {
-        stmts.closeTicket.run('deleted', channel.id);
+        await stmts.closeTicket('deleted', channel.id);
         await logTicket(client, { user: { tag: ticket.username, id: ticket.user_id }, action: 'deleted', channelName: channel.name });
         await interaction.reply({ content: '🗑️ Deleting ticket...' });
         setTimeout(() => channel.delete().catch(() => { }), 1000);

src/systems/verification.js

@@ -7,7 +7,7 @@ const { logVerification } = require('./logger');
  * Send the verification embed to the ✅・verify channel.
  */
 async function sendVerificationEmbed(client) {
-    const row = stmts.getState.get('channel_✅・verify');
+    const row = await stmts.getState('channel_✅・verify');
     if (!row) throw new Error('Verify channel not found in bot state.');
 
     const channel = await client.channels.fetch(row.value);
@@ -32,8 +32,8 @@ async function sendVerificationEmbed(client) {
     await msg.react('✅');
 
     // Store the message ID so we can listen for reactions
-    stmts.setState.run('verify_message_id', msg.id);
-    stmts.setState.run('verify_channel_id', channel.id);
+    await stmts.setState('verify_message_id', msg.id);
+    await stmts.setState('verify_channel_id', channel.id);
 
     return msg;
 }
@@ -49,7 +49,8 @@ async function handleVerifyReaction(reaction, user, client) {
     const isBotMessage = reaction.message.author?.id === client.user.id;
 
     // Also check stored message ID as fallback
-    const verifyMsgId = stmts.getState.get('verify_message_id')?.value;
+    const stateVal = await stmts.getState('verify_message_id');
+    const verifyMsgId = stateVal;
     const isStoredMsg = verifyMsgId && reaction.message.id === verifyMsgId;
 
     if (!isVerifyChannel && !isStoredMsg) return false;
@@ -76,7 +77,8 @@ async function handleVerifyReactionRemove(reaction, user, client) {
     const isVerifyChannel = channel.name === '✅・verify';
     const isBotMessage = reaction.message.author?.id === client.user.id;
 
-    const verifyMsgId = stmts.getState.get('verify_message_id')?.value;
+    const stateVal = await stmts.getState('verify_message_id');
+    const verifyMsgId = stateVal;
     const isStoredMsg = verifyMsgId && reaction.message.id === verifyMsgId;
 
     if (!isVerifyChannel && !isStoredMsg) return false;