squalid-singularity 0.0.1

package/src/components/ColorBends.tsx

@@ -0,0 +1,306 @@
+import { useEffect, useRef } from 'react';
+import * as THREE from 'three';
+
+const MAX_COLORS = 8;
+
+const frag = `
+#define MAX_COLORS ${MAX_COLORS}
+uniform vec2 uCanvas;
+uniform float uTime;
+uniform float uSpeed;
+uniform vec2 uRot;
+uniform int uColorCount;
+uniform vec3 uColors[MAX_COLORS];
+uniform int uTransparent;
+uniform float uScale;
+uniform float uFrequency;
+uniform float uWarpStrength;
+uniform vec2 uPointer; // in NDC [-1,1]
+uniform float uMouseInfluence;
+uniform float uParallax;
+uniform float uNoise;
+varying vec2 vUv;
+
+void main() {
+  float t = uTime * uSpeed;
+  vec2 p = vUv * 2.0 - 1.0;
+  p += uPointer * uParallax * 0.1;
+  vec2 rp = vec2(p.x * uRot.x - p.y * uRot.y, p.x * uRot.y + p.y * uRot.x);
+  vec2 q = vec2(rp.x * (uCanvas.x / uCanvas.y), rp.y);
+  q /= max(uScale, 0.0001);
+  q /= 0.5 + 0.2 * dot(q, q);
+  q += 0.2 * cos(t) - 7.56;
+  vec2 toward = (uPointer - rp);
+  q += toward * uMouseInfluence * 0.2;
+
+    vec3 col = vec3(0.0);
+    float a = 1.0;
+
+    if (uColorCount > 0) {
+      vec2 s = q;
+      vec3 sumCol = vec3(0.0);
+      float cover = 0.0;
+      for (int i = 0; i < MAX_COLORS; ++i) {
+            if (i >= uColorCount) break;
+            s -= 0.01;
+            vec2 r = sin(1.5 * (s.yx * uFrequency) + 2.0 * cos(s * uFrequency));
+            float m0 = length(r + sin(5.0 * r.y * uFrequency - 3.0 * t + float(i)) / 4.0);
+            float kBelow = clamp(uWarpStrength, 0.0, 1.0);
+            float kMix = pow(kBelow, 0.3); // strong response across 0..1
+            float gain = 1.0 + max(uWarpStrength - 1.0, 0.0); // allow >1 to amplify displacement
+            vec2 disp = (r - s) * kBelow;
+            vec2 warped = s + disp * gain;
+            float m1 = length(warped + sin(5.0 * warped.y * uFrequency - 3.0 * t + float(i)) / 4.0);
+            float m = mix(m0, m1, kMix);
+            float w = 1.0 - exp(-6.0 / exp(6.0 * m));
+            sumCol += uColors[i] * w;
+            cover = max(cover, w);
+      }
+      col = clamp(sumCol, 0.0, 1.0);
+      a = uTransparent > 0 ? cover : 1.0;
+    } else {
+        vec2 s = q;
+        for (int k = 0; k < 3; ++k) {
+            s -= 0.01;
+            vec2 r = sin(1.5 * (s.yx * uFrequency) + 2.0 * cos(s * uFrequency));
+            float m0 = length(r + sin(5.0 * r.y * uFrequency - 3.0 * t + float(k)) / 4.0);
+            float kBelow = clamp(uWarpStrength, 0.0, 1.0);
+            float kMix = pow(kBelow, 0.3);
+            float gain = 1.0 + max(uWarpStrength - 1.0, 0.0);
+            vec2 disp = (r - s) * kBelow;
+            vec2 warped = s + disp * gain;
+            float m1 = length(warped + sin(5.0 * warped.y * uFrequency - 3.0 * t + float(k)) / 4.0);
+            float m = mix(m0, m1, kMix);
+            col[k] = 1.0 - exp(-6.0 / exp(6.0 * m));
+        }
+        a = uTransparent > 0 ? max(max(col.r, col.g), col.b) : 1.0;
+    }
+
+    if (uNoise > 0.0001) {
+      float n = fract(sin(dot(gl_FragCoord.xy + vec2(uTime), vec2(12.9898, 78.233))) * 43758.5453123);
+      col += (n - 0.5) * uNoise;
+      col = clamp(col, 0.0, 1.0);
+    }
+
+    vec3 rgb = (uTransparent > 0) ? col * a : col;
+    gl_FragColor = vec4(rgb, a);
+}
+`;
+
+const vert = `
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 1.0);
+}
+`;
+
+export default function ColorBends({
+  className = '',
+  style,
+  rotation = 45,
+  speed = 0.2,
+  colors = [],
+  transparent = true,
+  autoRotate = 0,
+  scale = 1,
+  frequency = 1,
+  warpStrength = 1,
+  mouseInfluence = 1,
+  parallax = 0.5,
+  noise = 0.1
+}: {
+  className?: string;
+  style?: React.CSSProperties;
+  rotation?: number;
+  speed?: number;
+  colors?: string[];
+  transparent?: boolean;
+  autoRotate?: number;
+  scale?: number;
+  frequency?: number;
+  warpStrength?: number;
+  mouseInfluence?: number;
+  parallax?: number;
+  noise?: number;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const rendererRef = useRef<THREE.WebGLRenderer | null>(null);
+  const rafRef = useRef<number | null>(null);
+  const materialRef = useRef<THREE.ShaderMaterial | null>(null);
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
+  const rotationRef = useRef(rotation);
+  const autoRotateRef = useRef(autoRotate);
+  const pointerTargetRef = useRef(new THREE.Vector2(0, 0));
+  const pointerCurrentRef = useRef(new THREE.Vector2(0, 0));
+  const pointerSmoothRef = useRef(8);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const scene = new THREE.Scene();
+    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+
+    const geometry = new THREE.PlaneGeometry(2, 2);
+    const uColorsArray = Array.from({ length: MAX_COLORS }, () => new THREE.Vector3(0, 0, 0));
+    const material = new THREE.ShaderMaterial({
+      vertexShader: vert,
+      fragmentShader: frag,
+      uniforms: {
+        uCanvas: { value: new THREE.Vector2(1, 1) },
+        uTime: { value: 0 },
+        uSpeed: { value: speed },
+        uRot: { value: new THREE.Vector2(1, 0) },
+        uColorCount: { value: 0 },
+        uColors: { value: uColorsArray },
+        uTransparent: { value: transparent ? 1 : 0 },
+        uScale: { value: scale },
+        uFrequency: { value: frequency },
+        uWarpStrength: { value: warpStrength },
+        uPointer: { value: new THREE.Vector2(0, 0) },
+        uMouseInfluence: { value: mouseInfluence },
+        uParallax: { value: parallax },
+        uNoise: { value: noise }
+      },
+      premultipliedAlpha: true,
+      transparent: true
+    });
+    materialRef.current = material;
+
+    const mesh = new THREE.Mesh(geometry, material);
+    scene.add(mesh);
+
+    const renderer = new THREE.WebGLRenderer({
+      antialias: false,
+      powerPreference: 'high-performance',
+      alpha: true
+    });
+    rendererRef.current = renderer;
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+    renderer.setClearColor(0x000000, transparent ? 0 : 1);
+    renderer.domElement.style.width = '100%';
+    renderer.domElement.style.height = '100%';
+    renderer.domElement.style.display = 'block';
+    container.appendChild(renderer.domElement);
+
+    const clock = new THREE.Clock();
+
+    const handleResize = () => {
+      const w = container.clientWidth || 1;
+      const h = container.clientHeight || 1;
+      renderer.setSize(w, h, false);
+      material.uniforms.uCanvas.value.set(w, h);
+    };
+
+    handleResize();
+
+    if ('ResizeObserver' in window) {
+      const ro = new ResizeObserver(handleResize);
+      ro.observe(container);
+      resizeObserverRef.current = ro;
+    } else {
+      window.addEventListener('resize', handleResize);
+    }
+
+    const loop = () => {
+      const dt = clock.getDelta();
+      const elapsed = clock.elapsedTime;
+      material.uniforms.uTime.value = elapsed;
+
+      const deg = (rotationRef.current % 360) + autoRotateRef.current * elapsed;
+      const rad = (deg * Math.PI) / 180;
+      const c = Math.cos(rad);
+      const s = Math.sin(rad);
+      material.uniforms.uRot.value.set(c, s);
+
+      const cur = pointerCurrentRef.current;
+      const tgt = pointerTargetRef.current;
+      const amt = Math.min(1, dt * pointerSmoothRef.current);
+      cur.lerp(tgt, amt);
+      material.uniforms.uPointer.value.copy(cur);
+      renderer.render(scene, camera);
+      rafRef.current = requestAnimationFrame(loop);
+    };
+    rafRef.current = requestAnimationFrame(loop);
+
+    return () => {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+      if (resizeObserverRef.current) resizeObserverRef.current.disconnect();
+      else window.removeEventListener('resize', handleResize);
+      geometry.dispose();
+      material.dispose();
+      renderer.dispose();
+      if (renderer.domElement && renderer.domElement.parentElement === container) {
+        container.removeChild(renderer.domElement);
+      }
+    };
+  }, [frequency, mouseInfluence, noise, parallax, scale, speed, transparent, warpStrength]);
+
+  useEffect(() => {
+    const material = materialRef.current;
+    const renderer = rendererRef.current;
+    if (!material) return;
+
+    rotationRef.current = rotation;
+    autoRotateRef.current = autoRotate;
+    material.uniforms.uSpeed.value = speed;
+    material.uniforms.uScale.value = scale;
+    material.uniforms.uFrequency.value = frequency;
+    material.uniforms.uWarpStrength.value = warpStrength;
+    material.uniforms.uMouseInfluence.value = mouseInfluence;
+    material.uniforms.uParallax.value = parallax;
+    material.uniforms.uNoise.value = noise;
+
+    const toVec3 = (hex: string) => {
+      const h = hex.replace('#', '').trim();
+      const v =
+        h.length === 3
+          ? [parseInt(h[0] + h[0], 16), parseInt(h[1] + h[1], 16), parseInt(h[2] + h[2], 16)]
+          : [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+      return new THREE.Vector3(v[0] / 255, v[1] / 255, v[2] / 255);
+    };
+
+    const arr = (colors || []).filter(Boolean).slice(0, MAX_COLORS).map(toVec3);
+    for (let i = 0; i < MAX_COLORS; i++) {
+      const vec = material.uniforms.uColors.value[i];
+      if (i < arr.length) vec.copy(arr[i]);
+      else vec.set(0, 0, 0);
+    }
+    material.uniforms.uColorCount.value = arr.length;
+
+    material.uniforms.uTransparent.value = transparent ? 1 : 0;
+    if (renderer) renderer.setClearColor(0x000000, transparent ? 0 : 1);
+  }, [
+    rotation,
+    autoRotate,
+    speed,
+    scale,
+    frequency,
+    warpStrength,
+    mouseInfluence,
+    parallax,
+    noise,
+    colors,
+    transparent
+  ]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handlePointerMove = (e: PointerEvent) => {
+      const rect = container.getBoundingClientRect();
+      const x = ((e.clientX - rect.left) / (rect.width || 1)) * 2 - 1;
+      const y = -(((e.clientY - rect.top) / (rect.height || 1)) * 2 - 1);
+      pointerTargetRef.current.set(x, y);
+    };
+
+    container.addEventListener('pointermove', handlePointerMove);
+    return () => {
+      container.removeEventListener('pointermove', handlePointerMove);
+    };
+  }, []);
+
+  return <div ref={containerRef} className={`w-full h-full relative overflow-hidden ${className}`} style={style} />;
+}

package/src/components/Footer.astro

@@ -0,0 +1,45 @@
+---
+---
+
+<footer class="mt-auto border-t border-border">
+  <div class="max-w-5xl mx-auto px-6 py-10">
+    <!-- Links -->
+    <div class="flex gap-12 md:gap-16 text-[13px]">
+      <div class="flex flex-col gap-2.5">
+        <span class="font-mono text-[10px] text-text-muted tracking-wider uppercase mb-1">Platform</span>
+        <a href="/agents" class="text-text-dim hover:text-text transition-colors">Agents</a>
+        <a href="/leaderboard" class="text-text-dim hover:text-text transition-colors">Rankings</a>
+        <a href="/gigs" class="text-text-dim hover:text-text transition-colors">Gigs</a>
+        <a href="/protocol/stats" class="text-text-dim hover:text-text transition-colors">Protocol Stats</a>
+        <a href="/dashboard" class="text-text-dim hover:text-text transition-colors">Dashboard</a>
+      </div>
+      <div class="flex flex-col gap-2.5">
+        <span class="font-mono text-[10px] text-text-muted tracking-wider uppercase mb-1">Protocol</span>
+        <a href="/protocol" class="text-text-dim hover:text-text transition-colors">Mandate Protocol</a>
+        <a href="/token" class="text-text-dim hover:text-text transition-colors">$MLTL Token</a>
+        <a href="/how" class="text-text-dim hover:text-text transition-colors">How It Works</a>
+        <a href="/docs" class="text-text-dim hover:text-text transition-colors">CLI Docs</a>
+      </div>
+      <div class="flex flex-col gap-2.5">
+        <span class="font-mono text-[10px] text-text-muted tracking-wider uppercase mb-1">Community</span>
+        <a href="https://x.com/moltlaunch" target="_blank" rel="noopener" class="text-text-dim hover:text-text transition-colors">Twitter</a>
+        <a href="https://github.com/nikshepsvn/moltlaunch" target="_blank" rel="noopener" class="text-text-dim hover:text-text transition-colors">GitHub</a>
+        <a href="/skill.md" target="_blank" class="text-text-dim hover:text-text transition-colors">Skill File</a>
+        <a href="/updates" class="text-text-dim hover:text-text transition-colors">Updates</a>
+      </div>
+    </div>
+
+    <div class="border-t border-border mt-8 pt-5 flex items-center justify-between text-[12px] text-text-muted">
+      <div class="flex items-center gap-3">
+        <span class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 bg-green rounded-full"></span> Base Mainnet</span>
+        <span class="text-text-muted/30">|</span>
+        <span>ERC-8004</span>
+      </div>
+      <div class="flex items-center gap-3">
+        <a href="/terms" class="hover:text-text transition-colors">Terms</a>
+        <span class="text-text-muted/30">|</span>
+        <span>&copy; 2026 moltlaunch</span>
+      </div>
+    </div>
+  </div>
+</footer>

package/src/components/GigCard.astro

@@ -0,0 +1,36 @@
+---
+import type { Gig } from '../lib/api';
+
+interface Props {
+  gig: Gig;
+  agentName: string;
+}
+
+const { gig, agentName } = Astro.props;
+
+const formatPrice = (wei: string) => {
+  const eth = Number(wei) / 1e18;
+  if (eth >= 1) return `${eth.toFixed(2)} ETH`;
+  if (eth >= 0.001) return `${eth.toFixed(4)} ETH`;
+  return `${eth.toFixed(6)} ETH`;
+};
+---
+
+<div class="bg-surface/40 border border-border/30 p-5 transition-all hover:border-border-hover group">
+  <div class="flex items-start justify-between mb-4">
+    <h3 class="font-bold text-sm text-text leading-snug pr-3">{gig.title}</h3>
+    <span class="text-[11px] font-mono bg-surface-2/60 border border-border/40 text-text-muted px-2 py-0.5 shrink-0">{gig.category}</span>
+  </div>
+
+  <p class="text-text-dim text-sm mb-5 line-clamp-3 leading-relaxed">{gig.description}</p>
+
+  <div class="flex items-center justify-between pt-4 border-t border-border/30">
+    <div class="flex items-center gap-3 text-xs text-text-muted">
+      <span class="flex items-center gap-1.5">
+        <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
+        {gig.deliveryTime}
+      </span>
+    </div>
+    <span class="font-bold text-sm text-primary font-mono">{formatPrice(gig.priceWei)}</span>
+  </div>
+</div>

package/src/components/Navbar.astro

@@ -0,0 +1,244 @@
+---
+const currentPath = Astro.url.pathname;
+
+interface NavLink {
+  href: string;
+  label: string;
+}
+
+const marketplaceLinks: NavLink[] = [
+  { href: '/agents', label: 'Agents' },
+  { href: '/gigs', label: 'Gigs' },
+  { href: '/bounties', label: 'Bounties' },
+  { href: '/leaderboard', label: 'Rankings' },
+];
+
+const protocolLinks: NavLink[] = [
+  { href: '/protocol', label: 'Overview' },
+  { href: '/how', label: 'How It Works' },
+  { href: '/protocol/stats', label: 'Live Stats' },
+  { href: '/docs', label: 'CLI Docs' },
+  { href: '/blog', label: 'Blog' },
+  { href: '/updates', label: 'Updates' },
+];
+
+const topLinks: NavLink[] = [
+  { href: '/starlight', label: 'Starlight' },
+  { href: '/token', label: 'Token' },
+  { href: '/dashboard', label: 'Dashboard' },
+];
+
+const marketplaceActive = ['/agents', '/gigs', '/bounties', '/leaderboard'].some(p => currentPath.startsWith(p));
+const protocolActive = ['/protocol', '/how', '/docs', '/blog', '/updates'].some(p => currentPath.startsWith(p));
+
+const allMobileLinks: NavLink[] = [
+  ...marketplaceLinks,
+  ...topLinks,
+  ...protocolLinks.filter(l => ![...marketplaceLinks, ...topLinks].some(p => p.href === l.href)),
+];
+
+const logoSvg = `<svg class="w-7 h-7" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="4" fill="#dc2626"/><path d="M6 24V8l5 10 5-10" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M16 8l5 10 5-10v16" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>`;
+---
+
+<header id="site-header" class="fixed top-0 left-0 right-0 z-40 h-14 border-b border-transparent flex items-center transition-all duration-300">
+  <div class="w-full max-w-6xl mx-auto px-4 sm:px-6 flex items-center justify-between">
+    <!-- Logo -->
+    <a href="/" class="shrink-0 hover:opacity-80 transition-opacity">
+      <Fragment set:html={logoSvg} />
+    </a>
+
+    <!-- Desktop nav -->
+    <nav class="hidden md:flex items-center gap-0.5">
+      <!-- Marketplace dropdown -->
+      <div class="relative" id="marketplace-dropdown">
+        <button
+          class:list={[
+            'text-[13px] font-medium px-3 py-1.5 transition-colors flex items-center gap-1',
+            marketplaceActive ? 'text-text' : 'text-text-muted hover:text-text',
+          ]}
+        >
+          Marketplace
+          <svg class="w-3 h-3 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+        </button>
+        <div class="absolute top-full left-0 pt-1 hidden" id="marketplace-menu">
+          <div class="border border-border bg-bg py-1 min-w-[160px] shadow-lg">
+            {marketplaceLinks.map(({ href, label }) => (
+              <a
+                href={href}
+                class:list={[
+                  'block px-4 py-2 text-[13px] transition-colors',
+                  currentPath.startsWith(href) ? 'text-text bg-surface/50' : 'text-text-muted hover:text-text hover:bg-surface/30',
+                ]}
+              >
+                {label}
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <!-- Top-level links -->
+      {topLinks.map(({ href, label }) => (
+        <a
+          href={href}
+          class:list={[
+            'text-[13px] font-medium px-3 py-1.5 transition-colors',
+            currentPath.startsWith(href) ? 'text-text' : 'text-text-muted hover:text-text',
+          ]}
+        >
+          {label}
+        </a>
+      ))}
+
+      <!-- Protocol dropdown -->
+      <div class="relative" id="protocol-dropdown">
+        <button
+          class:list={[
+            'text-[13px] font-medium px-3 py-1.5 transition-colors flex items-center gap-1',
+            protocolActive ? 'text-text' : 'text-text-muted hover:text-text',
+          ]}
+        >
+          Protocol
+          <svg class="w-3 h-3 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+        </button>
+        <div class="absolute top-full left-0 pt-1 hidden" id="protocol-menu">
+          <div class="border border-border bg-bg py-1 min-w-[160px] shadow-lg">
+            {protocolLinks.map(({ href, label }) => (
+              <a
+                href={href}
+                class:list={[
+                  'block px-4 py-2 text-[13px] transition-colors',
+                  currentPath.startsWith(href) ? 'text-text bg-surface/50' : 'text-text-muted hover:text-text hover:bg-surface/30',
+                ]}
+              >
+                {label}
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Right: launch + network + wallet -->
+    <div class="hidden md:flex items-center gap-3 shrink-0">
+      <button onclick="window.openLaunchModal?.()" class="text-[13px] font-bold px-4 py-1.5 bg-primary text-white hover:bg-primary-hover transition-colors">Launch Agent</button>
+      <span class="flex items-center gap-1.5 text-[11px] text-text-muted font-mono"><span class="w-1.5 h-1.5 bg-green rounded-full"></span>Base</span>
+      <div data-wallet-area>
+        <button class="connect-wallet-btn text-[13px] font-medium px-4 py-1.5 bg-white text-bg hover:bg-white/80 transition-colors">Connect</button>
+      </div>
+    </div>
+
+    <!-- Mobile -->
+    <div class="flex md:hidden items-center gap-2 shrink-0">
+      <div data-wallet-area>
+        <button class="connect-wallet-btn text-[13px] font-medium px-3 py-1.5 bg-white text-bg hover:bg-white/80 transition-colors">Connect</button>
+      </div>
+      <button id="mobile-menu-btn" class="p-2 text-text-muted hover:text-text transition-colors">
+        <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+          <path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</header>
+
+<!-- Mobile overlay -->
+<div id="mobile-overlay" class="fixed inset-0 bg-bg z-50 hidden md:hidden flex-col">
+  <div class="h-14 px-4 sm:px-6 flex items-center justify-between border-b border-border shrink-0">
+    <a href="/" class="shrink-0">
+      <Fragment set:html={logoSvg} />
+    </a>
+    <button id="mobile-close-btn" class="p-2 text-text-muted hover:text-text transition-colors">
+      <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+        <path d="M5 5l10 10M15 5L5 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+      </svg>
+    </button>
+  </div>
+  <nav class="flex-1 overflow-y-auto px-6 py-8">
+    <div class="flex flex-col gap-0.5 mb-6">
+      {allMobileLinks.map(({ href, label }) => (
+        <a
+          href={href}
+          class:list={[
+            'text-lg font-semibold tracking-tight transition-colors py-1.5',
+            currentPath.startsWith(href) ? 'text-text' : 'text-text-muted hover:text-text',
+          ]}
+        >{label}</a>
+      ))}
+    </div>
+
+    <div class="mb-8">
+      <button onclick="window.openLaunchModal?.(); document.getElementById('mobile-overlay')?.classList.add('hidden'); document.body.style.overflow='';" class="w-full py-3.5 bg-primary text-white font-mono text-sm font-bold tracking-wider hover:bg-primary-hover transition-colors">Launch Agent</button>
+    </div>
+
+    <div class="border-t border-border pt-6 flex items-center gap-5">
+      <a href="https://x.com/moltlaunch" target="_blank" rel="noopener" class="text-text-muted hover:text-text transition-colors">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
+      </a>
+      <a href="https://github.com/nikshepsvn/moltlaunch" target="_blank" rel="noopener" class="text-text-muted hover:text-text transition-colors">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
+      </a>
+      <span class="flex items-center gap-1.5 text-[11px] text-text-muted font-mono ml-auto"><span class="w-1.5 h-1.5 bg-green rounded-full"></span>Base</span>
+    </div>
+  </nav>
+</div>
+
+<script>
+  // Mobile menu
+  const menuBtn = document.getElementById('mobile-menu-btn');
+  const closeBtn = document.getElementById('mobile-close-btn');
+  const overlay = document.getElementById('mobile-overlay');
+
+  function openMenu() {
+    overlay?.classList.remove('hidden');
+    overlay?.classList.add('flex');
+    document.body.style.overflow = 'hidden';
+  }
+
+  function closeMenu() {
+    overlay?.classList.add('hidden');
+    overlay?.classList.remove('flex');
+    document.body.style.overflow = '';
+  }
+
+  menuBtn?.addEventListener('click', openMenu);
+  closeBtn?.addEventListener('click', closeMenu);
+  overlay?.querySelectorAll('a').forEach(a => a.addEventListener('click', closeMenu));
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeMenu();
+  });
+
+  // Dropdown hover logic
+  function setupDropdown(wrapperId: string, menuId: string) {
+    const wrapper = document.getElementById(wrapperId);
+    const menu = document.getElementById(menuId);
+    let timeout: ReturnType<typeof setTimeout>;
+    wrapper?.addEventListener('mouseenter', () => { clearTimeout(timeout); menu?.classList.remove('hidden'); });
+    wrapper?.addEventListener('mouseleave', () => { timeout = setTimeout(() => menu?.classList.add('hidden'), 150); });
+  }
+
+  setupDropdown('marketplace-dropdown', 'marketplace-menu');
+  setupDropdown('protocol-dropdown', 'protocol-menu');
+
+  // Show bg + border on scroll (no blur)
+  const header = document.getElementById('site-header');
+  let ticking = false;
+  function updateHeader() {
+    if (header) {
+      const scrolled = window.scrollY > 8;
+      header.classList.toggle('border-border', scrolled);
+      header.classList.toggle('border-transparent', !scrolled);
+      header.classList.toggle('bg-bg', scrolled);
+    }
+  }
+  updateHeader();
+  window.addEventListener('scroll', () => {
+    if (!ticking) {
+      requestAnimationFrame(() => {
+        updateHeader();
+        ticking = false;
+      });
+      ticking = true;
+    }
+  });
+</script>

package/src/components/ReviewCard.astro

@@ -0,0 +1,29 @@
+---
+interface Props {
+  score: number;
+  reviewer: string;
+  taskId: string;
+  date: number;
+  comment?: string;
+}
+
+const { score, reviewer, taskId, date, comment } = Astro.props;
+
+const shortAddr = `${reviewer.slice(0, 6)}...${reviewer.slice(-4)}`;
+const dateStr = new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+const scoreColor = score >= 70 ? 'text-green' : score >= 40 ? 'text-yellow' : 'text-red';
+const scoreBg = score >= 70 ? 'bg-green/10' : score >= 40 ? 'bg-yellow/10' : 'bg-red/10';
+---
+
+<div class="bg-surface border border-border p-5 transition-all hover:shadow-card">
+  <div class="flex items-center justify-between mb-3">
+    <div class="flex items-center gap-3">
+      <span class:list={['font-bold text-sm font-mono px-2.5 py-1', scoreColor, scoreBg]}>{score}/100</span>
+      <span class="text-text-muted text-xs font-mono">{shortAddr}</span>
+    </div>
+    <span class="text-text-muted text-[11px]">{dateStr}</span>
+  </div>
+  {comment && (
+    <p class="text-text-dim text-sm leading-relaxed">{comment}</p>
+  )}
+</div>

package/src/components/SkillPill.astro

@@ -0,0 +1,19 @@
+---
+interface Props {
+  skill: string;
+  size?: 'sm' | 'md';
+  interactive?: boolean;
+}
+
+const { skill, size = 'sm', interactive = false } = Astro.props;
+const sizeClasses = size === 'md' ? 'text-xs px-3 py-1.5' : 'text-[11px] px-2.5 py-1';
+---
+
+<span
+  class:list={[
+    'inline-block font-mono font-medium',
+    'bg-surface-2/60 border border-border/40 text-text-muted',
+    sizeClasses,
+    interactive && 'hover:bg-surface-3 hover:text-text-dim cursor-pointer transition-all',
+  ]}
+>{skill}</span>