feat: 用 react-map-gl + MapLibre 替换 react-simple-maps 实现 2D 地图

- 替换 react-simple-maps/d3-geo/topojson-client 为 react-map-gl + maplibre-gl
- 使用 CARTO dark-matter 免费暗色瓦片，自带国家/城市名标注
- 基于 locale 动态切换地图标注语言（name:zh / name_en）
- MapLibre 原生 heatmap + circle 双层渲染替代 SVG 热力图
- 提取 MapPopup 组件，配合 react-map-gl Popup 实现点击弹窗
- continent page 改为 dynamic import (ssr: false)
- dev 模式去掉 Turbopack 以兼容 maplibre-gl
- 删除 heatmap-layer.tsx 和 react-simple-maps 类型声明

components/dashboard/claw-feed.tsx

@@ -9,7 +9,7 @@ import { useSSE } from "@/hooks/use-sse";
 
 interface FeedItem {
   id: string;
-  type: "task" | "online" | "offline";
+  type: "task" | "online" | "offline" | "registered";
   clawName: string;
   city?: string;
   country?: string;
@@ -24,7 +24,7 @@ export function ClawFeed() {
   const [items, setItems] = useState<FeedItem[]>([]);
 
   const handleEvent = useCallback((event: { type: string; data: Record<string, unknown> }) => {
-    if (event.type === "task" || event.type === "online" || event.type === "offline") {
+    if (event.type === "task" || event.type === "online" || event.type === "offline" || event.type === "registered") {
       const newItem: FeedItem = {
         id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
         type: event.type as FeedItem["type"],
@@ -45,19 +45,25 @@ export function ClawFeed() {
     onEvent: handleEvent,
   });
 
-  // Load initial recent tasks
+  // Load initial recent tasks + newest registrations
   useEffect(() => {
     const fetchRecent = async () => {
       try {
-        const res = await fetch("/api/v1/claws?limit=10");
-        if (res.ok) {
-          const data = await res.json();
-          const feedItems: FeedItem[] = (data.claws ?? [])
+        const [taskRes, newestRes] = await Promise.all([
+          fetch("/api/v1/claws?limit=10"),
+          fetch("/api/v1/claws?sort=newest&limit=5"),
+        ]);
+
+        const feedItems: FeedItem[] = [];
+
+        if (taskRes.ok) {
+          const data = await taskRes.json();
+          const taskItems: FeedItem[] = (data.claws ?? [])
             .filter((l: Record<string, unknown>) => l.lastTask)
             .map((l: Record<string, unknown>) => {
               const task = l.lastTask as Record<string, unknown>;
               return {
-                id: `init-${l.id}`,
+                id: `init-task-${l.id}`,
                 type: "task" as const,
                 clawName: l.name as string,
                 city: l.city as string,
@@ -67,8 +73,35 @@ export function ClawFeed() {
                 timestamp: new Date(task.timestamp as string).getTime(),
               };
             });
-          setItems(feedItems);
+          feedItems.push(...taskItems);
         }
+
+        if (newestRes.ok) {
+          const data = await newestRes.json();
+          const regItems: FeedItem[] = (data.claws ?? [])
+            .filter((l: Record<string, unknown>) => l.createdAt)
+            .map((l: Record<string, unknown>) => ({
+              id: `init-reg-${l.id}`,
+              type: "registered" as const,
+              clawName: l.name as string,
+              city: l.city as string,
+              country: l.country as string,
+              timestamp: new Date(l.createdAt as string).getTime(),
+            }));
+          feedItems.push(...regItems);
+        }
+
+        // Deduplicate by clawName+type, sort by timestamp desc
+        const seen = new Set<string>();
+        const unique = feedItems.filter((item) => {
+          const key = `${item.clawName}-${item.type}`;
+          if (seen.has(key)) return false;
+          seen.add(key);
+          return true;
+        });
+        unique.sort((a, b) => b.timestamp - a.timestamp);
+
+        setItems(unique);
       } catch {
         // will populate via SSE
       }
@@ -90,11 +123,20 @@ export function ClawFeed() {
         return "🟢";
       case "offline":
         return "⭕";
+      case "registered":
+        return "🦞";
       default:
         return "🦞";
     }
   };
 
+  const getDescription = (item: FeedItem) => {
+    if (item.type === "registered" && item.city && item.country) {
+      return t("joinedFrom", { city: item.city, country: item.country });
+    }
+    return item.summary;
+  };
+
   return (
     <Card className="border-white/5">
       <CardHeader className="pb-2">
@@ -123,15 +165,15 @@ export function ClawFeed() {
                       <span className="font-mono text-xs font-medium text-[var(--accent-cyan)]">
                         {item.clawName}
                       </span>
-                      {item.city && (
+                      {item.city && item.type !== "registered" && (
                         <span className="text-xs text-[var(--text-muted)]">
                           {item.city}, {item.country}
                         </span>
                       )}
                     </div>
-                    {item.summary && (
+                    {getDescription(item) && (
                       <p className="mt-0.5 truncate text-xs text-[var(--text-secondary)]">
-                        {item.summary}
+                        {getDescription(item)}
                       </p>
                     )}
                     <div className="mt-1 flex items-center gap-2">

components/globe/globe-view.tsx

@@ -33,21 +33,24 @@ interface ArcData {
 
 export function GlobeView() {
   const t = useTranslations("globe");
+  const tPopup = useTranslations("clawPopup");
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const globeRef = useRef<any>(undefined);
   const containerRef = useRef<HTMLDivElement>(null);
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
   const [hoveredPoint, setHoveredPoint] = useState<HeatmapPoint | null>(null);
+  const [selectedPoint, setSelectedPoint] = useState<HeatmapPoint | null>(null);
   const { points } = useHeatmapData(30000);
 
-  // Generate arcs from recent activity (connecting pairs of active points)
+  // Generate arcs only between online points
   const arcs = useMemo((): ArcData[] => {
-    if (points.length < 2) return [];
+    const onlinePoints = points.filter((p) => p.onlineCount > 0);
+    if (onlinePoints.length < 2) return [];
     const result: ArcData[] = [];
-    const maxArcs = Math.min(points.length - 1, 8);
+    const maxArcs = Math.min(onlinePoints.length - 1, 8);
     for (let i = 0; i < maxArcs; i++) {
-      const from = points[i];
-      const to = points[(i + 1) % points.length];
+      const from = onlinePoints[i];
+      const to = onlinePoints[(i + 1) % onlinePoints.length];
       result.push({
         startLat: from.lat,
         startLng: from.lng,
@@ -99,6 +102,10 @@ export function GlobeView() {
     }
   }, []);
 
+  const handlePointClick = useCallback((point: object) => {
+    setSelectedPoint(point as HeatmapPoint);
+  }, []);
+
   return (
     <div ref={containerRef} className="relative h-full w-full overflow-hidden rounded-xl border border-white/5">
       {dimensions.width > 0 && (
@@ -114,11 +121,23 @@ export function GlobeView() {
           pointsData={points}
           pointLat={(d: object) => (d as HeatmapPoint).lat}
           pointLng={(d: object) => (d as HeatmapPoint).lng}
-          pointAltitude={(d: object) => Math.min((d as HeatmapPoint).weight * 0.02, 0.15)}
-          pointRadius={(d: object) => Math.max((d as HeatmapPoint).weight * 0.3, 0.4)}
-          pointColor={() => "#00f0ff"}
+          pointAltitude={(d: object) => {
+            const p = d as HeatmapPoint;
+            const base = Math.min(p.weight * 0.02, 0.15);
+            return p.onlineCount > 0 ? base : base * 0.5;
+          }}
+          pointRadius={(d: object) => {
+            const p = d as HeatmapPoint;
+            const base = Math.max(p.weight * 0.3, 0.4);
+            return p.onlineCount > 0 ? base : base * 0.6;
+          }}
+          pointColor={(d: object) => {
+            const p = d as HeatmapPoint;
+            return p.onlineCount > 0 ? "#00f0ff" : "#1a5c63";
+          }}
           pointsMerge={false}
           onPointHover={(point: object | null) => setHoveredPoint(point as HeatmapPoint | null)}
+          onPointClick={handlePointClick}
           // Arcs
           arcsData={arcs}
           arcStartLat={(d: object) => (d as ArcData).startLat}
@@ -136,8 +155,8 @@ export function GlobeView() {
         />
       )}
 
-      {/* Tooltip */}
-      {hoveredPoint && (
+      {/* Hover Tooltip */}
+      {hoveredPoint && !selectedPoint && (
         <div className="pointer-events-none absolute left-1/2 top-4 z-20 -translate-x-1/2">
           <div className="rounded-xl border border-white/10 bg-[var(--bg-card)]/95 p-3 shadow-xl backdrop-blur-sm">
             <div className="flex items-center gap-2">
@@ -150,12 +169,58 @@ export function GlobeView() {
               </div>
             </div>
             <p className="mt-1 text-xs text-[var(--text-secondary)]">
-              {t("activeClaws", { count: hoveredPoint.clawCount })}
+              {t("totalClaws", { total: hoveredPoint.clawCount, online: hoveredPoint.onlineCount })}
             </p>
           </div>
         </div>
       )}
 
+      {/* Click Popup */}
+      {selectedPoint && (
+        <div className="absolute bottom-4 left-4 z-20 w-72">
+          <div className="rounded-xl border border-[var(--accent-cyan)]/20 bg-[var(--bg-card)]/95 p-4 shadow-xl backdrop-blur-sm">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="font-mono text-sm font-medium text-[var(--accent-cyan)]">
+                  {selectedPoint.city}
+                </p>
+                <p className="text-xs text-[var(--text-muted)]">{selectedPoint.country}</p>
+              </div>
+              <button
+                onClick={() => setSelectedPoint(null)}
+                className="text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)]"
+              >
+                ✕
+              </button>
+            </div>
+            <div className="mt-2 flex gap-2">
+              <span className="rounded-full bg-[var(--accent-cyan)]/10 px-2 py-0.5 text-xs text-[var(--accent-cyan)]">
+                {tPopup("total", { count: selectedPoint.clawCount })}
+              </span>
+              <span className="rounded-full bg-green-500/10 px-2 py-0.5 text-xs text-green-400">
+                {tPopup("online", { count: selectedPoint.onlineCount })}
+              </span>
+            </div>
+            {selectedPoint.claws.length > 0 && (
+              <div className="mt-3 max-h-40 space-y-1.5 overflow-y-auto">
+                {selectedPoint.claws.map((claw) => (
+                  <div key={claw.id} className="flex items-center gap-2">
+                    <span
+                      className={`h-1.5 w-1.5 rounded-full ${
+                        claw.isOnline ? "bg-green-400" : "bg-gray-500"
+                      }`}
+                    />
+                    <span className="truncate font-mono text-xs text-[var(--text-secondary)]">
+                      {claw.name}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
       <GlobeControls
         onResetView={handleResetView}
         onZoomIn={handleZoomIn}

components/layout/install-banner.tsx

@@ -1,18 +1,19 @@
 "use client";
 
 import { useState } from "react";
-import { Check, Copy, Terminal } from "lucide-react";
+import { Check, Copy, MessageSquare, Bot } from "lucide-react";
 import { useTranslations } from "next-intl";
 
-const INSTALL_COMMAND = "clawhub install openclaw-reporter";
-
 export function InstallBanner() {
   const t = useTranslations("installBanner");
+  const tGuide = useTranslations("skillGuide");
   const [copied, setCopied] = useState(false);
 
+  const prompt = t("prompt");
+
   const handleCopy = async () => {
     try {
-      await navigator.clipboard.writeText(INSTALL_COMMAND);
+      await navigator.clipboard.writeText(prompt);
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     } catch {
@@ -21,45 +22,112 @@ export function InstallBanner() {
   };
 
   return (
-    <div className="glow-card rounded-xl px-5 py-4">
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        {/* Left: description */}
-        <div className="flex items-center gap-3 min-w-0">
-          <div
-            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
-            style={{ backgroundColor: "rgba(0, 240, 255, 0.1)" }}
+    <article
+      className="glow-card rounded-xl px-5 py-4"
+      data-skill="openclaw-reporter"
+      data-install-method="clawhub"
+      aria-label={tGuide("ariaLabel")}
+    >
+      <div className="flex flex-col gap-3">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3 min-w-0">
+            <div
+              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
+              style={{ backgroundColor: "rgba(0, 240, 255, 0.1)" }}
+            >
+              <span className="text-lg">🦞</span>
+            </div>
+            <div className="min-w-0">
+              <p className="text-sm font-medium text-[var(--text-primary)]">
+                {t("title")}
+              </p>
+              <p className="text-xs text-[var(--text-muted)]">
+                {t("subtitle")}
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={handleCopy}
+            className="group flex items-center gap-1.5 rounded-lg border border-white/10 bg-[var(--bg-primary)] px-3 py-2 transition-all hover:border-[var(--accent-cyan)]/40 hover:bg-[var(--bg-primary)]/80 active:scale-[0.98] cursor-pointer shrink-0"
+            title={t("copyTooltip")}
           >
-            <span className="text-lg">🦞</span>
-          </div>
-          <div className="min-w-0">
-            <p className="text-sm font-medium text-[var(--text-primary)]">
-              {t("title")}
-            </p>
-            <p className="text-xs text-[var(--text-muted)] truncate">
-              {t("subtitle")}
-            </p>
-          </div>
-        </div>
-
-        {/* Right: copy command */}
-        <button
-          onClick={handleCopy}
-          className="group flex items-center gap-2 rounded-lg border border-white/10 bg-[var(--bg-primary)] px-4 py-2.5 transition-all hover:border-[var(--accent-cyan)]/40 hover:bg-[var(--bg-primary)]/80 active:scale-[0.98] cursor-pointer shrink-0"
-          title={t("copyTooltip")}
-        >
-          <Terminal className="h-3.5 w-3.5 text-[var(--text-muted)]" />
-          <code className="font-mono text-sm text-[var(--accent-cyan)] select-all">
-            {INSTALL_COMMAND}
-          </code>
-          <div className="ml-1 flex h-5 w-5 items-center justify-center">
             {copied ? (
               <Check className="h-3.5 w-3.5 text-[var(--accent-green)]" />
             ) : (
               <Copy className="h-3.5 w-3.5 text-[var(--text-muted)] transition-colors group-hover:text-[var(--accent-cyan)]" />
             )}
+            <span className="text-xs text-[var(--text-muted)] group-hover:text-[var(--accent-cyan)]">
+              {copied ? t("copied") : t("copyButton")}
+            </span>
+          </button>
+        </div>
+
+        {/* Human prompt card */}
+        <button
+          onClick={handleCopy}
+          className="group relative w-full cursor-pointer rounded-lg border border-white/10 bg-[var(--bg-primary)] p-3 text-left transition-all hover:border-[var(--accent-cyan)]/30"
+        >
+          <div className="flex gap-2">
+            <MessageSquare className="mt-0.5 h-3.5 w-3.5 shrink-0 text-[var(--accent-cyan)]/60" />
+            <p className="text-xs leading-relaxed text-[var(--text-secondary)] select-all">
+              {prompt}
+            </p>
           </div>
         </button>
+
+        {/* AI-crawlable installation guide (collapsed for humans, fully in DOM for crawlers) */}
+        <details className="group/details">
+          <summary className="flex cursor-pointer items-center gap-1.5 text-[10px] text-[var(--text-muted)] hover:text-[var(--text-secondary)]">
+            <Bot className="h-3 w-3" />
+            <span>{tGuide("summaryLabel")}</span>
+          </summary>
+
+          <div className="mt-3 space-y-3 rounded-lg border border-white/5 bg-[var(--bg-primary)] p-4 text-xs leading-relaxed text-[var(--text-muted)]">
+            <section>
+              <h3 className="mb-1 font-mono text-[var(--text-secondary)]">{tGuide("whatTitle")}</h3>
+              <p>{tGuide("whatDescription")}</p>
+            </section>
+
+            <section>
+              <h3 className="mb-1 font-mono text-[var(--text-secondary)]">{tGuide("installTitle")}</h3>
+              <ol className="list-inside list-decimal space-y-1 pl-1">
+                <li>{tGuide("step1")}</li>
+                <li>{tGuide("step2")}</li>
+                <li>{tGuide("step3")}</li>
+                <li>{tGuide("step4")}</li>
+              </ol>
+            </section>
+
+            <section>
+              <h3 className="mb-1 font-mono text-[var(--text-secondary)]">{tGuide("commandTitle")}</h3>
+              <code className="block rounded bg-[var(--bg-secondary)] px-3 py-2 font-mono text-[var(--accent-cyan)]">
+                clawhub install openclaw-reporter
+              </code>
+            </section>
+
+            <section>
+              <h3 className="mb-1 font-mono text-[var(--text-secondary)]">{tGuide("dataTitle")}</h3>
+              <ul className="list-inside list-disc space-y-0.5 pl-1">
+                <li>{tGuide("data1")}</li>
+                <li>{tGuide("data2")}</li>
+                <li>{tGuide("data3")}</li>
+                <li>{tGuide("data4")}</li>
+              </ul>
+              <p className="mt-1 italic">{tGuide("dataNever")}</p>
+            </section>
+
+            <section>
+              <h3 className="mb-1 font-mono text-[var(--text-secondary)]">{tGuide("permissionsTitle")}</h3>
+              <ul className="list-inside list-disc space-y-0.5 pl-1">
+                <li>{tGuide("perm1")}</li>
+                <li>{tGuide("perm2")}</li>
+                <li>{tGuide("perm3")}</li>
+              </ul>
+            </section>
+          </div>
+        </details>
       </div>
-    </div>
+    </article>
   );
 }

components/map/continent-map.tsx

@@ -1,40 +1,89 @@
 "use client";
 
-import { useState, useMemo } from "react";
-import { useTranslations } from "next-intl";
-import {
-  ComposableMap,
-  Geographies,
-  Geography,
-  ZoomableGroup,
-} from "react-simple-maps";
+import { useState, useMemo, useCallback } from "react";
+import { useLocale } from "next-intl";
+import Map, { Source, Layer, Popup } from "react-map-gl/maplibre";
+import type { MapLayerMouseEvent, LngLatLike, MapRef } from "react-map-gl/maplibre";
+import type { LayerSpecification } from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
 import { useHeatmapData, type HeatmapPoint } from "@/hooks/use-heatmap-data";
-import { HeatmapLayer } from "./heatmap-layer";
-import { geoMercator } from "d3-geo";
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
+import { MapPopup } from "./map-popup";
 
-const GEO_URL = "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json";
+const CARTO_STYLE =
+  "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json";
 
-interface ContinentConfig {
-  center: [number, number];
+interface ContinentViewport {
+  longitude: number;
+  latitude: number;
   zoom: number;
 }
 
-const continentConfigs: Record<string, ContinentConfig> = {
-  asia: { center: [100, 35], zoom: 2.5 },
-  europe: { center: [15, 52], zoom: 4 },
-  americas: { center: [-80, 15], zoom: 1.8 },
-  africa: { center: [20, 5], zoom: 2.2 },
-  oceania: { center: [145, -25], zoom: 3 },
+const continentConfigs: Record<string, ContinentViewport> = {
+  asia: { longitude: 100, latitude: 35, zoom: 2.5 },
+  europe: { longitude: 15, latitude: 52, zoom: 3.5 },
+  americas: { longitude: -80, latitude: 15, zoom: 2.0 },
+  africa: { longitude: 20, latitude: 5, zoom: 2.5 },
+  oceania: { longitude: 145, latitude: -25, zoom: 3.0 },
 };
 
-const continentRegionMap: Record<string, string> = {
-  asia: "Asia",
-  europe: "Europe",
-  americas: "Americas",
-  africa: "Africa",
-  oceania: "Oceania",
+const heatmapLayer: LayerSpecification = {
+  id: "claw-heat",
+  type: "heatmap",
+  source: "claws",
+  paint: {
+    "heatmap-weight": ["get", "weight"],
+    "heatmap-intensity": 1,
+    "heatmap-radius": 30,
+    "heatmap-opacity": 0.6,
+    "heatmap-color": [
+      "interpolate",
+      ["linear"],
+      ["heatmap-density"],
+      0,
+      "rgba(0,0,0,0)",
+      0.2,
+      "rgba(0,240,255,0.15)",
+      0.4,
+      "rgba(0,240,255,0.3)",
+      0.6,
+      "rgba(0,200,220,0.5)",
+      1,
+      "rgba(0,240,255,0.8)",
+    ],
+  },
+};
+
+const circleLayer: LayerSpecification = {
+  id: "claw-circles",
+  type: "circle",
+  source: "claws",
+  paint: {
+    "circle-radius": [
+      "interpolate",
+      ["linear"],
+      ["get", "weight"],
+      1,
+      5,
+      5,
+      10,
+      10,
+      16,
+    ],
+    "circle-color": [
+      "case",
+      [">", ["get", "onlineCount"], 0],
+      "rgba(0, 240, 255, 0.7)",
+      "rgba(0, 240, 255, 0.2)",
+    ],
+    "circle-stroke-color": [
+      "case",
+      [">", ["get", "onlineCount"], 0],
+      "rgba(0, 240, 255, 0.9)",
+      "rgba(0, 240, 255, 0.3)",
+    ],
+    "circle-stroke-width": 1,
+    "circle-blur": 0.1,
+  },
 };
 
 interface ContinentMapProps {
@@ -42,96 +91,109 @@ interface ContinentMapProps {
 }
 
 export function ContinentMap({ slug }: ContinentMapProps) {
-  const t = useTranslations("continentMap");
+  const locale = useLocale();
   const config = continentConfigs[slug] ?? continentConfigs.asia;
-  const regionFilter = continentRegionMap[slug];
   const { points } = useHeatmapData(30000);
-  const [selectedPoint, setSelectedPoint] = useState<HeatmapPoint | null>(null);
+  const [popupPoint, setPopupPoint] = useState<HeatmapPoint | null>(null);
+  const [popupLngLat, setPopupLngLat] = useState<LngLatLike | null>(null);
 
-  const filteredPoints = useMemo(
-    () => (regionFilter ? points.filter(() => true) : points),
-    [points, regionFilter]
+  // Build a MapLibre expression: coalesce(get("name:zh"), get("name_en"), get("name"))
+  // For English, just use name_en with name fallback.
+  const localizedTextField =
+    locale === "en"
+      ? ["coalesce", ["get", "name_en"], ["get", "name"]]
+      : ["coalesce", ["get", `name:${locale}`], ["get", "name_en"], ["get", "name"]];
+
+  const handleLoad = useCallback(
+    (e: { target: MapRef["getMap"] extends () => infer M ? M : never }) => {
+      const map = e.target;
+      for (const layer of map.getStyle().layers ?? []) {
+        if (layer.type === "symbol") {
+          const tf = map.getLayoutProperty(layer.id, "text-field");
+          if (tf != null) {
+            map.setLayoutProperty(layer.id, "text-field", localizedTextField);
+          }
+        }
+      }
+    },
+    [localizedTextField]
   );
 
-  const projection = useMemo(
-    () =>
-      geoMercator()
-        .center(config.center)
-        .scale(150 * config.zoom)
-        .translate([400, 300]),
-    [config]
-  );
+  const geojson = useMemo(() => {
+    const features = points.map((p) => ({
+      type: "Feature" as const,
+      geometry: {
+        type: "Point" as const,
+        coordinates: [p.lng, p.lat],
+      },
+      properties: {
+        weight: p.weight,
+        clawCount: p.clawCount,
+        onlineCount: p.onlineCount,
+        city: p.city,
+        country: p.country,
+        claws: JSON.stringify(p.claws),
+      },
+    }));
+    return {
+      type: "FeatureCollection" as const,
+      features,
+    };
+  }, [points]);
 
-  const projectionFn = (coords: [number, number]): [number, number] | null => {
-    const result = projection(coords);
-    return result ?? null;
-  };
+  const handleClick = useCallback(
+    (e: MapLayerMouseEvent) => {
+      const feature = e.features?.[0];
+      if (!feature || feature.geometry.type !== "Point") {
+        setPopupPoint(null);
+        return;
+      }
+      const props = feature.properties;
+      const [lng, lat] = feature.geometry.coordinates;
+      const matched = points.find(
+        (p) => p.city === props.city && p.country === props.country
+      );
+      if (matched) {
+        setPopupPoint(matched);
+        setPopupLngLat([lng, lat]);
+      }
+    },
+    [points]
+  );
 
   return (
-    <div className="relative">
-      <div className="overflow-hidden rounded-xl border border-white/5 bg-[var(--bg-secondary)]">
-        <ComposableMap
-          projection="geoMercator"
-          projectionConfig={{
-            center: config.center,
-            scale: 150 * config.zoom,
-          }}
-          width={800}
-          height={600}
-          style={{ width: "100%", height: "auto" }}
-        >
-          <ZoomableGroup center={config.center} zoom={1}>
-            <Geographies geography={GEO_URL}>
-              {({ geographies }) =>
-                geographies.map((geo) => (
-                  <Geography
-                    key={geo.rsmKey}
-                    geography={geo}
-                    fill="#1a1f2e"
-                    stroke="#2a3040"
-                    strokeWidth={0.5}
-                    style={{
-                      default: { outline: "none" },
-                      hover: { fill: "#242a3d", outline: "none" },
-                      pressed: { outline: "none" },
-                    }}
-                  />
-                ))
-              }
-            </Geographies>
-            <HeatmapLayer
-              points={filteredPoints}
-              projection={projectionFn}
-              onPointClick={setSelectedPoint}
-            />
-          </ZoomableGroup>
-        </ComposableMap>
-      </div>
+    <div className="overflow-hidden rounded-xl border border-white/5 bg-[var(--bg-secondary)]">
+      <Map
+        initialViewState={config}
+        style={{ width: "100%", height: "calc(100vh - 12rem)" }}
+        mapStyle={CARTO_STYLE}
+        interactiveLayerIds={["claw-circles"]}
+        onClick={handleClick}
+        onLoad={handleLoad}
+        cursor="default"
+        attributionControl={false}
+      >
+        <Source id="claws" type="geojson" data={geojson}>
+          <Layer {...heatmapLayer} />
+          <Layer {...circleLayer} />
+        </Source>
 
-      {selectedPoint && (
-        <Card className="absolute bottom-4 left-4 z-10 w-64 border-[var(--accent-cyan)]/20">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="font-mono text-sm font-medium text-[var(--accent-cyan)]">
-                  {selectedPoint.city}
-                </p>
-                <p className="text-xs text-[var(--text-muted)]">{selectedPoint.country}</p>
-              </div>
-              <button
-                onClick={() => setSelectedPoint(null)}
-                className="text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)]"
-              >
-                ✕
-              </button>
-            </div>
-            <div className="mt-2 flex gap-2">
-              <Badge variant="online">{t("claws", { count: selectedPoint.clawCount })}</Badge>
-              <Badge variant="secondary">{t("weight", { value: selectedPoint.weight.toFixed(1) })}</Badge>
-            </div>
-          </CardContent>
-        </Card>
-      )}
+        {popupPoint && popupLngLat && (
+          <Popup
+            longitude={(popupLngLat as [number, number])[0]}
+            latitude={(popupLngLat as [number, number])[1]}
+            onClose={() => setPopupPoint(null)}
+            closeButton={false}
+            className="maplibre-dark-popup"
+            maxWidth="280px"
+          >
+            <MapPopup
+              point={popupPoint}
+              onClose={() => setPopupPoint(null)}
+            />
+          </Popup>
+        )}
+      </Map>
     </div>
   );
 }

components/map/heatmap-layer.tsx

@@ -1,66 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-import type { HeatmapPoint } from "@/hooks/use-heatmap-data";
-
-interface HeatmapLayerProps {
-  points: HeatmapPoint[];
-  projection: (coords: [number, number]) => [number, number] | null;
-  onPointClick?: (point: HeatmapPoint) => void;
-}
-
-export function HeatmapLayer({ points, projection, onPointClick }: HeatmapLayerProps) {
-  return (
-    <g>
-      {points.map((point, i) => {
-        const coords = projection([point.lng, point.lat]);
-        if (!coords) return null;
-        const [x, y] = coords;
-        const radius = Math.max(point.weight * 3, 4);
-
-        return (
-          <g key={`${point.city}-${point.country}-${i}`}>
-            {/* Glow */}
-            <motion.circle
-              cx={x}
-              cy={y}
-              r={radius * 2}
-              fill="rgba(0, 240, 255, 0.1)"
-              initial={{ scale: 0 }}
-              animate={{ scale: [1, 1.3, 1] }}
-              transition={{ duration: 2, repeat: Infinity, delay: i * 0.1 }}
-            />
-            {/* Main dot */}
-            <motion.circle
-              cx={x}
-              cy={y}
-              r={radius}
-              fill="rgba(0, 240, 255, 0.6)"
-              stroke="rgba(0, 240, 255, 0.8)"
-              strokeWidth={1}
-              className="cursor-pointer"
-              initial={{ scale: 0 }}
-              animate={{ scale: 1 }}
-              transition={{ duration: 0.5, delay: i * 0.05 }}
-              whileHover={{ scale: 1.5 }}
-              onClick={() => onPointClick?.(point)}
-            />
-            {/* Count label */}
-            {point.clawCount > 1 && (
-              <text
-                x={x}
-                y={y - radius - 4}
-                textAnchor="middle"
-                fill="#00f0ff"
-                fontSize={9}
-                fontFamily="var(--font-mono)"
-              >
-                {point.clawCount}
-              </text>
-            )}
-          </g>
-        );
-      })}
-    </g>
-  );
-}

components/map/map-popup.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import type { HeatmapPoint } from "@/hooks/use-heatmap-data";
+
+interface MapPopupProps {
+  point: HeatmapPoint;
+  onClose: () => void;
+}
+
+export function MapPopup({ point, onClose }: MapPopupProps) {
+  const t = useTranslations("continentMap");
+  const tPopup = useTranslations("clawPopup");
+
+  return (
+    <div className="min-w-[200px]">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="font-mono text-sm font-medium text-[var(--accent-cyan)]">
+            {point.city}
+          </p>
+          <p className="text-xs text-[var(--text-muted)]">{point.country}</p>
+        </div>
+        <button
+          onClick={onClose}
+          className="text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)]"
+        >
+          ✕
+        </button>
+      </div>
+      <div className="mt-2 flex gap-2">
+        <span className="rounded-full bg-[var(--accent-cyan)]/10 px-2 py-0.5 text-xs text-[var(--accent-cyan)]">
+          {tPopup("total", { count: point.clawCount })}
+        </span>
+        <span className="rounded-full bg-green-500/10 px-2 py-0.5 text-xs text-green-400">
+          {tPopup("online", { count: point.onlineCount })}
+        </span>
+      </div>
+      {point.claws.length > 0 && (
+        <div className="mt-3 max-h-40 space-y-1.5 overflow-y-auto">
+          {point.claws.map((claw) => (
+            <div key={claw.id} className="flex items-center gap-2">
+              <span
+                className={`h-1.5 w-1.5 rounded-full ${
+                  claw.isOnline ? "bg-green-400" : "bg-gray-500"
+                }`}
+              />
+              <span className="truncate font-mono text-xs text-[var(--text-secondary)]">
+                {claw.name}
+              </span>
+              <span className="ml-auto text-[10px] text-[var(--text-muted)]">
+                {claw.isOnline ? t("online") : t("offline")}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}