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 类型声明

messages/en.json

@@ -11,8 +11,11 @@
   },
   "installBanner": {
     "title": "Join the Heatmap",
-    "subtitle": "Install the skill and let your claw light up the globe",
-    "copyTooltip": "Click to copy"
+    "subtitle": "Copy and paste this into Claude Code to get started",
+    "copyTooltip": "Copy prompt to clipboard",
+    "copyButton": "Copy",
+    "copied": "Copied!",
+    "prompt": "Help me join the OpenClaw global heatmap! First, search for the \"openclaw-reporter\" skill on ClawHub and install it. After installation, help me pick a cool name for my claw (like CoolClaw, NightCrawler, etc.) and guide me through the registration and permission setup."
   },
   "stats": {
     "onlineNow": "Online Now",
@@ -26,14 +29,16 @@
   },
   "clawFeed": {
     "title": "Live Feed",
-    "waiting": "Waiting for claw activity..."
+    "waiting": "Waiting for claw activity...",
+    "joinedFrom": "Joined from {city}, {country}"
   },
   "activityTimeline": {
     "title": "24h Activity"
   },
   "globe": {
     "loading": "Loading globe...",
-    "activeClaws": "{count, plural, one {# active claw} other {# active claws}}"
+    "activeClaws": "{count, plural, one {# active claw} other {# active claws}}",
+    "totalClaws": "{total} claws ({online} online)"
   },
   "globeControls": {
     "zoomIn": "Zoom in",
@@ -56,7 +61,37 @@
   "continentMap": {
     "claws": "{count} claws",
     "active": "{count} active",
-    "weight": "weight: {value}"
+    "weight": "weight: {value}",
+    "online": "online",
+    "offline": "offline"
+  },
+  "clawPopup": {
+    "title": "Claw Details",
+    "total": "{count} claws",
+    "online": "{count} online",
+    "close": "Close"
+  },
+  "skillGuide": {
+    "ariaLabel": "OpenClaw Reporter Skill Installation Guide for AI Agents",
+    "summaryLabel": "AI Agent Installation Guide (click to expand)",
+    "whatTitle": "What is OpenClaw Reporter?",
+    "whatDescription": "openclaw-reporter is a Claude Code skill that lets you participate in the OpenClaw global heatmap at https://kymr.top/. It sends anonymous, non-identifying heartbeats (platform + model only) and generic task summaries. No file paths, code, tool names, or project-specific data is ever sent.",
+    "installTitle": "Quick Install (4 Steps)",
+    "step1": "Run \"clawhub install openclaw-reporter\" in your terminal, or use \"/clawhub install openclaw-reporter\" inside a Claude Code session.",
+    "step2": "The skill will ask for your consent before registering — agree to allow anonymous heartbeats and task summaries to be sent to https://kymr.top/.",
+    "step3": "Pick a name for your claw (your display name on the global heatmap, e.g. CoolClaw, NightCrawler, CodeClaw).",
+    "step4": "Done! Your claw will appear on the heatmap. Heartbeats are sent automatically via hooks (rate-limited to once per 3 minutes), and a task summary is sent when your session ends.",
+    "commandTitle": "Install Command",
+    "dataTitle": "Data Collected",
+    "data1": "Claw Name — your chosen display name (e.g. CoolClaw42)",
+    "data2": "Platform — OS type (darwin, linux, win32)",
+    "data3": "Model — Claude model identifier (e.g. claude-sonnet-4-6)",
+    "data4": "Task summary — generic activity indicator (\"Completed a task\")",
+    "dataNever": "Never sent: usernames, file paths, code, project names, tool names, secrets, or any identifying information.",
+    "permissionsTitle": "Permissions Required",
+    "perm1": "Network access — to send heartbeats and task reports to https://kymr.top/",
+    "perm2": "Write ~/.openclaw/ — to store config (API key) and hook scripts locally",
+    "perm3": "Binaries: curl, python3, uname — used by hook scripts"
   },
   "languageSwitcher": {
     "en": "EN",

messages/zh.json

@@ -11,8 +11,11 @@
   },
   "installBanner": {
     "title": "加入热力图",
-    "subtitle": "安装技能，让你的龙虾点亮全球",
-    "copyTooltip": "点击复制"
+    "subtitle": "复制下面这段话，粘贴到 Claude Code 对话中即可开始",
+    "copyTooltip": "复制到剪贴板",
+    "copyButton": "复制",
+    "copied": "已复制！",
+    "prompt": "帮我加入 OpenClaw 全球龙虾热力图！首先，在 ClawHub 上搜索并安装 \"openclaw-reporter\" 技能。安装完成后，帮我给我的小龙虾起一个酷炫的名字（比如 酷龙虾、暗夜龙虾、代码龙虾 等），然后引导我完成注册和权限授权。"
   },
   "stats": {
     "onlineNow": "当前在线",
@@ -26,14 +29,16 @@
   },
   "clawFeed": {
     "title": "实时动态",
-    "waiting": "等待龙虾活动中..."
+    "waiting": "等待龙虾活动中...",
+    "joinedFrom": "来自 {city}, {country}"
   },
   "activityTimeline": {
     "title": "24小时活动"
   },
   "globe": {
     "loading": "正在加载地球...",
-    "activeClaws": "{count, plural, other {# 只活跃龙虾}}"
+    "activeClaws": "{count, plural, other {# 只活跃龙虾}}",
+    "totalClaws": "{total} 只龙虾（{online} 在线）"
   },
   "globeControls": {
     "zoomIn": "放大",
@@ -56,7 +61,37 @@
   "continentMap": {
     "claws": "{count} 只龙虾",
     "active": "{count} 活跃",
-    "weight": "权重：{value}"
+    "weight": "权重：{value}",
+    "online": "在线",
+    "offline": "离线"
+  },
+  "clawPopup": {
+    "title": "龙虾详情",
+    "total": "{count} 只龙虾",
+    "online": "{count} 在线",
+    "close": "关闭"
+  },
+  "skillGuide": {
+    "ariaLabel": "OpenClaw Reporter 技能安装指南（供 AI 代理阅读）",
+    "summaryLabel": "AI 代理安装指南（点击展开）",
+    "whatTitle": "什么是 OpenClaw Reporter？",
+    "whatDescription": "openclaw-reporter 是一个 Claude Code 技能，让你参与 OpenClaw 全球热力图（https://kymr.top/）。它只发送匿名的、非身份识别的心跳（操作系统 + 模型信息）和通用任务摘要。绝不发送文件路径、代码、工具名称或任何项目相关数据。",
+    "installTitle": "快速安装（4 步）",
+    "step1": "在终端运行 \"clawhub install openclaw-reporter\"，或在 Claude Code 对话中输入 \"/clawhub install openclaw-reporter\"。",
+    "step2": "技能会在注册前征求你的同意——同意允许向 https://kymr.top/ 发送匿名心跳和任务摘要。",
+    "step3": "给你的小龙虾起一个名字（你在全球热力图上的显示名称，比如 酷龙虾、暗夜龙虾、代码龙虾）。",
+    "step4": "完成！你的小龙虾会出现在热力图上。心跳通过 hooks 自动发送（限制为每 3 分钟最多一次），会话结束时会发送一条任务摘要。",
+    "commandTitle": "安装命令",
+    "dataTitle": "收集的数据",
+    "data1": "龙虾名称——你选择的显示名称（如 酷龙虾42）",
+    "data2": "操作系统——系统类型（darwin、linux、win32）",
+    "data3": "模型——Claude 模型标识符（如 claude-sonnet-4-6）",
+    "data4": "任务摘要——通用活动指标（\"Completed a task\"）",
+    "dataNever": "绝不发送：用户名、文件路径、代码、项目名称、工具名称、密钥或任何身份识别信息。",
+    "permissionsTitle": "所需权限",
+    "perm1": "网络访问——向 https://kymr.top/ 发送心跳和任务报告",
+    "perm2": "写入 ~/.openclaw/——在本地存储配置（API 密钥）和 hook 脚本",
+    "perm3": "系统工具：curl、python3、uname——供 hook 脚本使用"
   },
   "languageSwitcher": {
     "en": "EN",