solanapolis 1.0.0

package/src/components/GameHUD.tsx

@@ -0,0 +1,393 @@
+"use client";
+
+import { useRef, useEffect, MutableRefObject, useCallback } from "react";
+import { ProjectileManager } from "@/lib/projectile-system";
+import { GRID_WORLD } from "@/lib/city-constants";
+import type { RemotePlayer } from "@/lib/multiplayer-manager";
+
+interface GameHUDProps {
+  active: boolean;
+  mode: "car" | "plane";
+  manager: ProjectileManager;
+  playerPosRef: MutableRefObject<[number, number, number] | null>;
+  playerHeadingRef: MutableRefObject<number>;
+  planePositionsRef: MutableRefObject<Array<{ x: number; y: number; z: number }>>;
+  carPositionsRef: MutableRefObject<Array<{ x: number; y: number; z: number }>>;
+  /** Real multiplayer players currently active in combat */
+  remotePlayers: Map<string, RemotePlayer>;
+  /** Building center positions for minimap dots */
+  buildingPositions: Array<{ x: number; z: number }>;
+}
+
+const MAP_SIZE = 200;    // pixels
+const MAP_PADDING = 16;
+const WORLD_HALF = GRID_WORLD / 2 + 30;  // slight margin
+const SCALE = MAP_SIZE / (WORLD_HALF * 2);
+
+/** Convert world coords to minimap pixel coords */
+function toMapXY(wx: number, wz: number): [number, number] {
+  const mx = (wx + WORLD_HALF) * SCALE;
+  const my = (wz + WORLD_HALF) * SCALE;
+  return [mx, my];
+}
+
+export default function GameHUD({
+  active,
+  mode,
+  manager,
+  playerPosRef,
+  playerHeadingRef,
+  planePositionsRef,
+  carPositionsRef,
+  remotePlayers,
+  buildingPositions,
+}: GameHUDProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const animRef = useRef<number>(0);
+  const scoreDisplayRef = useRef(0);
+
+  const draw = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const size = MAP_SIZE * 2; // retina
+    canvas.width = size;
+    canvas.height = size;
+    ctx.scale(2, 2);
+    const now = performance.now();
+
+    // Background
+    ctx.fillStyle = "rgba(10, 10, 18, 0.85)";
+    ctx.fillRect(0, 0, MAP_SIZE, MAP_SIZE);
+
+    // Grid lines
+    ctx.strokeStyle = "rgba(255,255,255,0.04)";
+    ctx.lineWidth = 0.5;
+    for (let i = 0; i <= 10; i++) {
+      const p = (i / 10) * MAP_SIZE;
+      ctx.beginPath(); ctx.moveTo(p, 0); ctx.lineTo(p, MAP_SIZE); ctx.stroke();
+      ctx.beginPath(); ctx.moveTo(0, p); ctx.lineTo(MAP_SIZE, p); ctx.stroke();
+    }
+
+    // Buildings — tiny gray dots
+    ctx.fillStyle = "rgba(255,255,255,0.12)";
+    for (const b of buildingPositions) {
+      const [mx, my] = toMapXY(b.x, b.z);
+      ctx.fillRect(mx - 0.5, my - 0.5, 1, 1);
+    }
+
+    // Resident cars — blue dots
+    ctx.fillStyle = "#6366f1";
+    for (const c of carPositionsRef.current) {
+      const [mx, my] = toMapXY(c.x, c.z);
+      ctx.beginPath();
+      ctx.arc(mx, my, 1.5, 0, Math.PI * 2);
+      ctx.fill();
+    }
+
+    // Resident planes — orange dots
+    ctx.fillStyle = "#f59e0b";
+    for (const p of planePositionsRef.current) {
+      const [mx, my] = toMapXY(p.x, p.z);
+      ctx.beginPath();
+      ctx.arc(mx, my, 2, 0, Math.PI * 2);
+      ctx.fill();
+    }
+
+    // Real humans (multiplayer) — bright pulsing markers with heading
+    let humanCars = 0;
+    let humanPlanes = 0;
+    for (const remote of remotePlayers.values()) {
+      if (remote.mode === "spectating") continue;
+
+      const [mx, my] = toMapXY(remote.x, remote.z);
+      if (mx < -6 || my < -6 || mx > MAP_SIZE + 6 || my > MAP_SIZE + 6) continue;
+
+      const isCar = remote.mode === "car";
+      if (isCar) humanCars += 1;
+      else humanPlanes += 1;
+
+      // Pulse ring to draw attention to human players
+      const pulsePhase = ((now + remote.lastSeen) % 1400) / 1400;
+      const pulseR = (isCar ? 4 : 4.8) + pulsePhase * 3;
+      const pulseAlpha = 0.55 * (1 - pulsePhase);
+      ctx.strokeStyle = isCar
+        ? `rgba(56, 189, 248, ${pulseAlpha})`
+        : `rgba(236, 72, 153, ${pulseAlpha})`;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.arc(mx, my, pulseR, 0, Math.PI * 2);
+      ctx.stroke();
+
+      // Direction tick
+      const hx = mx + Math.sin(remote.heading) * 5.5;
+      const hy = my - Math.cos(remote.heading) * 5.5;
+      ctx.strokeStyle = isCar ? "rgba(56, 189, 248, 0.9)" : "rgba(236, 72, 153, 0.9)";
+      ctx.beginPath();
+      ctx.moveTo(mx, my);
+      ctx.lineTo(hx, hy);
+      ctx.stroke();
+
+      if (isCar) {
+        // Diamond = human driver
+        ctx.fillStyle = "#38bdf8";
+        ctx.beginPath();
+        ctx.moveTo(mx, my - 3.5);
+        ctx.lineTo(mx + 3.5, my);
+        ctx.lineTo(mx, my + 3.5);
+        ctx.lineTo(mx - 3.5, my);
+        ctx.closePath();
+        ctx.fill();
+      } else {
+        // Triangle = human pilot
+        ctx.save();
+        ctx.translate(mx, my);
+        ctx.rotate(remote.heading);
+        ctx.fillStyle = "#ec4899";
+        ctx.beginPath();
+        ctx.moveTo(0, -4.5);
+        ctx.lineTo(-3.2, 3.2);
+        ctx.lineTo(3.2, 3.2);
+        ctx.closePath();
+        ctx.fill();
+        ctx.restore();
+      }
+
+      // White stroke for readability on dark/light minimap areas
+      ctx.strokeStyle = "rgba(255, 255, 255, 0.8)";
+      ctx.lineWidth = 0.8;
+      ctx.beginPath();
+      ctx.arc(mx, my, 3.8, 0, Math.PI * 2);
+      ctx.stroke();
+    }
+
+    // Human count label
+    const totalHumans = humanCars + humanPlanes;
+    if (totalHumans > 0) {
+      ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
+      ctx.font = "600 9px monospace";
+      ctx.textAlign = "left";
+      ctx.fillText(`HUMANS ${totalHumans}`, 6, 11);
+    }
+
+    // Active projectiles — red dots
+    ctx.fillStyle = "#ff4400";
+    for (const p of manager.getAlive()) {
+      const [mx, my] = toMapXY(p.x, p.z);
+      ctx.beginPath();
+      ctx.arc(mx, my, 1.5, 0, Math.PI * 2);
+      ctx.fill();
+    }
+
+    // Hit locations — expanding rings
+    ctx.strokeStyle = "#ff4400";
+    ctx.lineWidth = 1;
+    for (const h of manager.hits) {
+      const age = (now - h.timestamp) / 1000;
+      if (age > 2) continue;
+      const [mx, my] = toMapXY(h.x, h.z);
+      const radius = 3 + age * 15;
+      const alpha = 1 - age / 2;
+      ctx.globalAlpha = alpha;
+      ctx.beginPath();
+      ctx.arc(mx, my, radius, 0, Math.PI * 2);
+      ctx.stroke();
+    }
+    ctx.globalAlpha = 1;
+
+    // Player position — large arrow
+    const pos = playerPosRef.current;
+    if (pos) {
+      const [px, py] = toMapXY(pos[0], pos[2]);
+      const heading = playerHeadingRef.current;
+
+      ctx.save();
+      ctx.translate(px, py);
+      ctx.rotate(heading);
+
+      // FOV cone
+      ctx.fillStyle = "rgba(227, 89, 48, 0.12)";
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      const coneLen = 40;
+      const coneAngle = 0.4;
+      ctx.lineTo(Math.sin(-coneAngle) * coneLen, -Math.cos(-coneAngle) * coneLen);
+      ctx.lineTo(0, -coneLen * 0.8);
+      ctx.lineTo(Math.sin(coneAngle) * coneLen, -Math.cos(coneAngle) * coneLen);
+      ctx.closePath();
+      ctx.fill();
+
+      // Player triangle
+      ctx.fillStyle = "#E35930";
+      ctx.beginPath();
+      ctx.moveTo(0, -6);
+      ctx.lineTo(-4, 4);
+      ctx.lineTo(4, 4);
+      ctx.closePath();
+      ctx.fill();
+
+      // White outline
+      ctx.strokeStyle = "rgba(255,255,255,0.5)";
+      ctx.lineWidth = 0.8;
+      ctx.stroke();
+
+      ctx.restore();
+
+      // Pulsing ring around player
+      const pulsePhase = (now % 2000) / 2000;
+      const pulseR = 6 + pulsePhase * 8;
+      const pulseAlpha = 1 - pulsePhase;
+      ctx.strokeStyle = `rgba(227, 89, 48, ${pulseAlpha * 0.4})`;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.arc(px, py, pulseR, 0, Math.PI * 2);
+      ctx.stroke();
+    }
+
+    // Border
+    ctx.strokeStyle = "rgba(255,255,255,0.08)";
+    ctx.lineWidth = 1;
+    ctx.strokeRect(0.5, 0.5, MAP_SIZE - 1, MAP_SIZE - 1);
+
+    // Smooth score counter
+    scoreDisplayRef.current += (manager.score - scoreDisplayRef.current) * 0.1;
+
+    animRef.current = requestAnimationFrame(draw);
+  }, [manager, playerPosRef, playerHeadingRef, planePositionsRef, carPositionsRef, remotePlayers, buildingPositions]);
+
+  useEffect(() => {
+    if (!active) return;
+    animRef.current = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(animRef.current);
+  }, [active, draw]);
+
+  if (!active) return null;
+
+  const score = Math.round(scoreDisplayRef.current);
+  const alive = manager.getAlive().length;
+
+  return (
+    <>
+      {/* Minimap — top right, below auth buttons */}
+      <div
+        className="fixed z-50"
+        style={{
+          top: 60,
+          right: MAP_PADDING,
+          width: MAP_SIZE,
+          height: MAP_SIZE,
+          borderRadius: 12,
+          overflow: "hidden",
+          border: "1px solid rgba(255,255,255,0.08)",
+          boxShadow: "0 8px 32px rgba(0,0,0,0.5)",
+        }}
+      >
+        <canvas
+          ref={canvasRef}
+          style={{ width: MAP_SIZE, height: MAP_SIZE }}
+        />
+
+        {/* Map legend */}
+        <div className="absolute bottom-1.5 left-2 flex gap-2 items-center">
+          <div className="flex items-center gap-1">
+            <div className="w-1.5 h-1.5 rounded-full bg-[#f59e0b]" />
+            <span className="text-[8px] text-white/30">Planes</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <div className="w-1.5 h-1.5 rounded-full bg-[#6366f1]" />
+            <span className="text-[8px] text-white/30">Cars</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <div className="w-1.5 h-1.5 rotate-45 bg-sky-400" />
+            <span className="text-[8px] text-sky-300/80">Human car</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <div className="w-0 h-0 border-l-[3px] border-r-[3px] border-b-[5px] border-l-transparent border-r-transparent border-b-pink-400" />
+            <span className="text-[8px] text-pink-300/80">Human plane</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <div className="w-1.5 h-1.5 rounded-full bg-[#E35930]" />
+            <span className="text-[8px] text-white/30">You</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Score + Ammo HUD — top center */}
+      <div className="fixed top-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-4 bg-black/60 backdrop-blur-xl border border-white/[0.08] rounded-2xl px-5 py-2.5">
+        {/* Crosshair icon */}
+        <div className="flex flex-col items-center">
+          <span className="text-[9px] text-white/25 uppercase tracking-wider">Mode</span>
+          <span className="text-sm font-bold text-[#E35930]">
+            {mode === "plane" ? "✈ AIR" : "🚗 GROUND"}
+          </span>
+        </div>
+
+        <div className="w-px h-8 bg-white/[0.08]" />
+
+        {/* Score */}
+        <div className="flex flex-col items-center">
+          <span className="text-[9px] text-white/25 uppercase tracking-wider">Score</span>
+          <span className="text-lg font-bold text-white tabular-nums" style={{ fontVariantNumeric: "tabular-nums" }}>
+            {score.toLocaleString()}
+          </span>
+        </div>
+
+        <div className="w-px h-8 bg-white/[0.08]" />
+
+        {/* Hits */}
+        <div className="flex flex-col items-center">
+          <span className="text-[9px] text-white/25 uppercase tracking-wider">Hits</span>
+          <span className="text-sm font-semibold text-[#22c55e] tabular-nums">
+            {manager.hits.length}
+          </span>
+        </div>
+
+        <div className="w-px h-8 bg-white/[0.08]" />
+
+        {/* Active projectiles */}
+        <div className="flex flex-col items-center">
+          <span className="text-[9px] text-white/25 uppercase tracking-wider">Active</span>
+          <span className="text-sm font-semibold text-[#f59e0b] tabular-nums">
+            {alive}
+          </span>
+        </div>
+
+        <div className="w-px h-8 bg-white/[0.08]" />
+
+        {/* Fire key hint */}
+        <div className="flex flex-col items-center">
+          <span className="text-[9px] text-white/25 uppercase tracking-wider">Fire</span>
+          <span className="text-[11px] text-white/50 font-medium">F / Click</span>
+        </div>
+      </div>
+
+      {/* Crosshair — center of screen */}
+      <div className="fixed inset-0 z-40 pointer-events-none flex items-center justify-center">
+        <div className="relative w-8 h-8">
+          {/* Cross lines */}
+          <div className="absolute top-1/2 left-0 w-full h-px bg-white/20" />
+          <div className="absolute left-1/2 top-0 h-full w-px bg-white/20" />
+          {/* Center dot */}
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-1 h-1 rounded-full bg-[#E35930]" />
+          {/* Corner brackets */}
+          <div className="absolute top-0 left-0 w-2 h-2 border-t border-l border-white/25" />
+          <div className="absolute top-0 right-0 w-2 h-2 border-t border-r border-white/25" />
+          <div className="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-white/25" />
+          <div className="absolute bottom-0 right-0 w-2 h-2 border-b border-r border-white/25" />
+        </div>
+      </div>
+
+      {/* Hit markers — flash on screen when you hit something */}
+      {manager.hits.filter(h => performance.now() - h.timestamp < 500).map((h, i) => (
+        <div
+          key={`hit-${h.timestamp}-${i}`}
+          className="fixed inset-0 z-40 pointer-events-none flex items-center justify-center"
+        >
+          <div className="text-[#ff4400] text-3xl font-bold animate-ping">✕</div>
+        </div>
+      ))}
+    </>
+  );
+}

package/src/components/Ground.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+interface GroundProps {
+  size: number;
+}
+
+export default function Ground({ size }: GroundProps) {
+  return (
+    <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.1, 0]} receiveShadow>
+      <planeGeometry args={[size, size]} />
+      <meshStandardMaterial color="#4a4a65" />
+    </mesh>
+  );
+}

package/src/components/HowItWorksModal.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+import { useState } from "react";
+import { createPortal } from "react-dom";
+
+const HELIUS_DOCS = "https://docs.helius.dev";
+
+const DATA_SOURCES = [
+  {
+    category: "Buildings",
+    items: [
+      {
+        visual: "Building height",
+        dataPoint: "Transaction count",
+        api: "Enhanced Transactions",
+        endpoint: "getTransactionsForAddress",
+        doc: `${HELIUS_DOCS}/api-reference/enhanced-transactions`,
+        detail: "Log-scaled txn count mapped to 1-150 floors",
+      },
+      {
+        visual: "Building width",
+        dataPoint: "Volume traded (SOL)",
+        api: "Enhanced Transactions",
+        endpoint: "getTransactionsForAddress",
+        doc: `${HELIUS_DOCS}/api-reference/enhanced-transactions`,
+        detail: "Square root-scaled relative to highest volume wallet",
+      },
+      {
+        visual: "Lit windows",
+        dataPoint: "Unique tokens swapped & recency",
+        api: "Enhanced Transactions",
+        endpoint: "getTransactionsForAddress",
+        doc: `${HELIUS_DOCS}/api-reference/enhanced-transactions`,
+        detail: "Fill ratio from token diversity, brightness from last activity",
+      },
+    ],
+  },
+  {
+    category: "Wallet Info",
+    items: [
+      {
+        visual: "Wallet age",
+        dataPoint: "First funding timestamp",
+        api: "Wallet API",
+        endpoint: "getWalletFundedBy",
+        doc: `${HELIUS_DOCS}/api-reference/wallet-api`,
+        detail: "Days since first SOL transfer to this wallet",
+      },
+      {
+        visual: "Wallet identity",
+        dataPoint: "Known entity labels",
+        api: "Wallet API",
+        endpoint: "getWalletIdentity",
+        doc: `${HELIUS_DOCS}/api-reference/wallet-api`,
+        detail: "Recognizes exchanges, protocols, and notable wallets",
+      },
+      {
+        visual: "Token balances & prices",
+        dataPoint: "Fungible asset holdings",
+        api: "DAS API",
+        endpoint: "getAssetsByOwner",
+        doc: `${HELIUS_DOCS}/api-reference/digital-asset-standard`,
+        detail: "Live balances with metadata, images, and price info",
+      },
+      {
+        visual: "Token metadata",
+        dataPoint: "Name, symbol, image per mint",
+        api: "DAS API",
+        endpoint: "getAssetsByOwner",
+        doc: `${HELIUS_DOCS}/api-reference/digital-asset-standard`,
+        detail: "Token names, symbols, and images returned alongside balances",
+      },
+    ],
+  },
+  {
+    category: "Live Activity",
+    items: [
+      {
+        visual: "Cars on roads",
+        dataPoint: "Real-time swap events",
+        api: "Webhooks",
+        endpoint: "Enhanced Webhooks",
+        doc: `${HELIUS_DOCS}/api-reference/webhooks`,
+        detail: "SWAP events pushed to the server, cars spawn near the swapping wallet's building",
+      },
+    ],
+  },
+] as const;
+
+const INFRA = [
+  { label: "RPC", value: "Helius Mainnet RPC", doc: `${HELIUS_DOCS}/api-reference/rpc` },
+  { label: "Database", value: "Supabase (PostgreSQL)", doc: null },
+  { label: "Realtime", value: "Supabase Realtime", doc: null },
+  { label: "Frontend", value: "React Three Fiber + Next.js", doc: null },
+] as const;
+
+export default function HowItWorksModal() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        className="w-6 h-6 flex items-center justify-center rounded-lg text-white/30 hover:text-white/60 hover:bg-white/[0.06] transition-colors cursor-pointer"
+        aria-label="How it works"
+      >
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="8" cy="8" r="6.5" />
+          <path d="M6.5 6.5a1.5 1.5 0 1 1 1.5 1.5v1" />
+          <circle cx="8" cy="11.5" r="0.5" fill="currentColor" stroke="none" />
+        </svg>
+      </button>
+
+      {open && createPortal(
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+          onClick={() => setOpen(false)}
+        >
+          <div
+            className="relative w-full max-w-lg mx-4 max-h-[80vh] overflow-y-auto bg-[#0e0e1a]/95 backdrop-blur-xl border border-white/[0.08] rounded-2xl p-6"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between mb-5">
+              <div>
+                <h2 className="text-base font-semibold text-white">How It Works</h2>
+                <p className="text-xs text-white/35 mt-0.5">Where the data comes from</p>
+              </div>
+              <button
+                onClick={() => setOpen(false)}
+                className="w-7 h-7 flex items-center justify-center rounded-lg text-white/30 hover:text-white hover:bg-white/[0.06] transition-colors cursor-pointer"
+              >
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5">
+                  <path d="M1 1l8 8M9 1l-8 8" />
+                </svg>
+              </button>
+            </div>
+
+            {/* Install Helius */}
+            <div className="mb-5">
+              <h3 className="text-xs font-semibold text-white/40 uppercase tracking-wider mb-2.5">
+                Install Helius
+              </h3>
+              <div className="space-y-2">
+                {[
+                  { label: "CLI", command: "npm install -g helius-cli" },
+                  { label: "MCP", command: "claude mcp add helius npx helius-mcp@latest" },
+                  { label: "Marketplace", command: "/plugin marketplace add helius-labs/core-ai" },
+                  { label: "Plugin", command: "/plugin install helius@helius-labs" },
+                ].map((item) => (
+                  <div
+                    key={item.label}
+                    className="bg-white/[0.03] border border-white/[0.06] rounded-xl px-3.5 py-3"
+                  >
+                    <div className="text-xs text-white/35 mb-1">{item.label}</div>
+                    <code className="text-xs text-orange-300/80 font-mono">{item.command}</code>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Data sources */}
+            <div className="space-y-5">
+              {DATA_SOURCES.map((group) => (
+                <div key={group.category}>
+                  <h3 className="text-xs font-semibold text-white/40 uppercase tracking-wider mb-2.5">
+                    {group.category}
+                  </h3>
+                  <div className="space-y-2">
+                    {group.items.map((item) => (
+                      <div
+                        key={item.visual}
+                        className="bg-white/[0.03] border border-white/[0.06] rounded-xl px-3.5 py-3"
+                      >
+                        <div className="flex items-start justify-between gap-3">
+                          <div className="min-w-0">
+                            <div className="text-sm text-white/80">{item.visual}</div>
+                            <div className="text-xs text-white/35 mt-0.5">{item.detail}</div>
+                          </div>
+                          <a
+                            href={item.doc}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="shrink-0 px-2 py-1 bg-orange-500/10 border border-orange-500/15 rounded-lg text-xs text-orange-300/80 hover:text-orange-200 hover:bg-orange-500/15 transition-colors"
+                          >
+                            {item.endpoint}
+                          </a>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Infrastructure */}
+            <div className="mt-5 pt-4 border-t border-white/[0.06]">
+              <h3 className="text-xs font-semibold text-white/40 uppercase tracking-wider mb-2.5">
+                Infrastructure
+              </h3>
+              <div className="grid grid-cols-2 gap-2">
+                {INFRA.map((item) => (
+                  <div
+                    key={item.label}
+                    className="bg-white/[0.03] border border-white/[0.06] rounded-xl px-3 py-2.5"
+                  >
+                    <div className="text-xs text-white/35">{item.label}</div>
+                    {item.doc ? (
+                      <a
+                        href={item.doc}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-sm text-white/70 hover:text-white transition-colors"
+                      >
+                        {item.value}
+                      </a>
+                    ) : (
+                      <div className="text-sm text-white/70">{item.value}</div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Footer */}
+            <div className="mt-5 pt-4 border-t border-white/[0.06] flex items-center justify-between">
+              <a
+                href="https://www.helius.dev/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 text-xs text-white/30 hover:text-white/50 transition-colors"
+              >
+                <img src="/helius-icon.svg" alt="Helius" className="w-4 h-4" />
+                <span>Powered by Helius</span>
+              </a>
+              <a
+                href={HELIUS_DOCS}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-xs text-blue-400/60 hover:text-blue-400 transition-colors"
+              >
+                Full API Docs &rarr;
+              </a>
+            </div>
+          </div>
+        </div>,
+        document.body,
+      )}
+    </>
+  );
+}