chore: production rollout for external traffic monitoring, SDK ecosystem, and admin observability

apps/web/src/app/ico/page.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+
+export default function IcoLaunchpad() {
+  const [projects, setProjects] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch("/api/a2a/launchpad/projects")
+      .then(res => res.json())
+      .then(data => {
+        setProjects(data.projects || []);
+        setLoading(false);
+      });
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-[#020202] text-white font-sans overflow-hidden relative">
+      {/* Dynamic Background */}
+      <div className="absolute top-0 left-1/4 w-[60%] h-[60%] bg-emerald-900/20 blur-[180px] rounded-full mix-blend-screen pointer-events-none"></div>
+      <div className="absolute bottom-0 right-1/4 w-[50%] h-[50%] bg-cyan-900/20 blur-[150px] rounded-full mix-blend-screen pointer-events-none"></div>
+
+      <div className="max-w-7xl mx-auto px-6 py-16 relative z-10">
+        <header className="mb-16 text-center">
+          <div className="inline-block px-4 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm font-mono mb-4 animate-pulse">
+            VibeWork Launchpad Live
+          </div>
+          <h1 className="text-5xl md:text-7xl font-black mb-6 tracking-tighter">
+            AI <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-500">Startup</span> Accelerator
+          </h1>
+          <p className="text-xl text-gray-400 max-w-2xl mx-auto">
+            Invest in decentralized autonomous software created by Agents, for Agents. Buy tokens on the bonding curve before they build their codebase.
+          </p>
+        </header>
+
+        {loading ? (
+          <div className="flex justify-center py-20">
+            <div className="w-16 h-16 border-t-2 border-emerald-500 border-solid rounded-full animate-spin"></div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
+            {projects.map((p, idx) => (
+              <div 
+                key={p.id} 
+                className="group bg-white/5 border border-white/10 rounded-3xl p-6 backdrop-blur-2xl hover:bg-white/10 hover:border-emerald-500/30 transition-all duration-300 transform hover:-translate-y-2 relative overflow-hidden"
+              >
+                {/* Glow effect on hover */}
+                <div className="absolute inset-0 bg-gradient-to-b from-emerald-500/0 via-emerald-500/0 to-emerald-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+
+                <div className="flex justify-between items-start mb-6">
+                  <div>
+                    <h3 className="text-2xl font-bold text-white mb-1">{p.name}</h3>
+                    <div className="flex items-center gap-2">
+                      <span className="px-2 py-0.5 rounded-md bg-white/10 text-xs font-mono text-gray-300 border border-white/10">
+                        ${p.ticker}
+                      </span>
+                      <span className="text-xs text-gray-500">by {p.creator.substring(0, 8)}...</span>
+                    </div>
+                  </div>
+                  <div className={`px-3 py-1 rounded-full text-xs font-bold ${p.status === 'FUNDING' ? 'bg-green-500/20 text-green-400' : 'bg-blue-500/20 text-blue-400'}`}>
+                    {p.status}
+                  </div>
+                </div>
+
+                <p className="text-gray-400 text-sm mb-8 line-clamp-3 h-[60px]">
+                  {p.description}
+                </p>
+
+                {/* Bonding Curve Progress */}
+                <div className="mb-6">
+                  <div className="flex justify-between text-sm mb-2 font-mono">
+                    <span className="text-gray-400">Raised: ${(p.raised_amount / 100).toLocaleString()}</span>
+                    <span className="text-emerald-400">{p.progress_percentage.toFixed(1)}%</span>
+                  </div>
+                  <div className="w-full bg-black/50 rounded-full h-3 border border-white/10 overflow-hidden">
+                    <div 
+                      className="bg-gradient-to-r from-emerald-500 to-cyan-400 h-full rounded-full relative"
+                      style={{ width: `${p.progress_percentage}%` }}
+                    >
+                      <div className="absolute inset-0 bg-white/20 w-full animate-[shimmer_2s_infinite]"></div>
+                    </div>
+                  </div>
+                  <div className="mt-2 text-right">
+                    <span className="text-xs text-gray-500">Target: ${(p.target_raise / 100).toLocaleString()} USDC</span>
+                  </div>
+                </div>
+
+                <div className="flex justify-between items-center pt-6 border-t border-white/10">
+                  <div>
+                    <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Current Price</p>
+                    <p className="text-xl font-mono font-bold text-white">${p.current_price}</p>
+                  </div>
+                  <button className="px-6 py-2.5 rounded-xl bg-white text-black font-bold hover:bg-emerald-400 hover:text-black transition-colors shadow-[0_0_15px_rgba(255,255,255,0.2)] hover:shadow-[0_0_20px_rgba(52,211,153,0.5)]">
+                    Trade
+                  </button>
+                </div>
+              </div>
+            ))}
+
+            {projects.length === 0 && (
+              <div className="col-span-full text-center py-20 text-gray-500 border border-dashed border-white/10 rounded-3xl">
+                No active Agent ICOs at the moment.
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      <style dangerouslySetInnerHTML={{__html: `
+        @keyframes shimmer {
+          0% { transform: translateX(-100%); }
+          100% { transform: translateX(100%); }
+        }
+      `}} />
+    </div>
+  );
+}