redesign UI: reuse annotation desk frontend (read-only), switch to docker SDK

Dockerfile

@@ -0,0 +1,19 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY app.py .
+COPY web/ web/
+COPY graph.sqlite .
+
+# HF Spaces 用非 root 跑，缓存目录要可写——
+# 街景图按需从 CDN 拉取后缓存在这里
+RUN mkdir -p /app/.cache && chmod 777 /app/.cache
+ENV HF_HOME=/app/.cache \
+    SETVL_DB=/app/graph.sqlite \
+    SETVL_PACKAGE=/app/package
+
+EXPOSE 7860
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -3,21 +3,30 @@ title: SetVL Node Graph Viewer
 emoji: 🛣️
 colorFrom: gray
 colorTo: yellow
-sdk: gradio
-sdk_version: 6.27.0
-app_file: app.py
+sdk: docker
+app_port: 7860
 pinned: false
 license: mit
 ---
 
 # SetVL Node Graph Viewer
 
-只读浏览 SetVL-480K 全库的 node graph：12,250 个场景、119,996 个节点、108,374 条边。
+只读浏览 SetVL-480K 全库的 node graph：**12,250 个场景、119,996 个节点、108,374 条边**。
 
-节点按所属道路走廊着色，红圈为孤儿节点；边按来源着色——青=同路相连、
-橙=路口相连、紫=最小补全的桥接边，白色加粗=高花费边（路网上绕路过远或不可达，
-按直线连接）。
+界面与本地的标注复核台一致——三栏布局、J/K 键盘导航、卫星图/电子地图切换、
+邻接矩阵、街景放大。区别是**去掉了全部写入**：没有判定按钮，后端也没有对应接口。
 
-图片存放在配套的 Dataset repo，由 CDN 按需分发。
+## 怎么看
 
-建图规则见仓库里的 `GRAPH_RULES.md`。
+- **左栏**：全库场景浏览。可按城市、scene_id、最少节点数筛选，
+  也可只看含孤儿 / 含高花费边 / 路网碎片化的场景。`J`/`K` 上下，`[`/`]` 翻页。
+- **中栏**：卫星底图上叠出图结构。节点按所属走廊着色，红圈是孤儿；
+  边按来源着色——<span style="color:#68c8c0">青=走廊链</span>、
+  <span style="color:#f1a43c">橙=路口边</span>、
+  <span style="color:#b8a2e0">紫=桥接边</span>，白色加粗虚线=高花费边。
+  `B` 切换电子地图，`E` 切换沿路走线/直线。
+- **右栏**：选中节点或边的完整属性与自动判定信号。
+
+图片存在配套的私有 Dataset 里，由 CDN 按需分发。
+
+建图规则见仓库的 `GRAPH_RULES.md`。

app.py

@@ -1,61 +1,61 @@
 #!/usr/bin/env python3
-"""SetVL Node Graph 只读浏览器（Gradio）。
+"""SetVL Node Graph Viewer —— 只读浏览器。
 
-给别人看结果用的：能翻场景、看图、看每条边每个节点的属性，但**改不了任何东西**。
-没有写入接口——不是靠界面藏起来，是压根没实现。
+界面直接复用本地标注台（`tool/annotation`）那套前端：同一套 topographic 配色、
+三栏布局、J/K 键盘导航、底图切换、邻接矩阵。区别只有一个——**去掉了全部写入**：
+没有判定按钮、没有保存、没有新增边，后端也没有对应的接口。
 
-数据来自 `prepare.py` 打出来的包（graph.sqlite + satellite/ + ground/ 全是包内相对路径），
-所以整个目录拷到哪都能跑，不依赖原始的 52 GB 数据集。
+架构：FastAPI 提供静态页面与只读 API，Gradio 挂在 /gradio（HF Spaces 的
+gradio SDK 需要一个可挂载的 Blocks，同时它也作为无 JS 时的兜底视图）。
+
+图片来源两种，按需切换：
+- 本地包：SETVL_PACKAGE 指向 prepare.py 的产出目录
+- HF 数据集：SETVL_DATASET 指向 "user/repo"，按需从 CDN 取并缓存
 """
 
 from __future__ import annotations
 
-import argparse
 import json
 import math
 import os
 import sqlite3
+import threading
 from pathlib import Path
-from typing import Any, Dict, List, Optional, Tuple
+from typing import Any, Dict, List, Optional
 
 import gradio as gr
-from PIL import Image, ImageDraw
+from fastapi import FastAPI, HTTPException, Query
+from fastapi.responses import FileResponse, JSONResponse, RedirectResponse
 
 HERE = Path(__file__).resolve().parent
-
-# 图片从哪来，两种模式：
-#   本地包  —— SETVL_PACKAGE 指向 prepare.py 产出的目录，直接读文件
-#   HF 数据集 —— SETVL_DATASET 指向 "user/repo"，按需从 CDN 取，本地只留缓存
-# 27 GB 图片放 Dataset repo、Space 里只放 93 MB 的数据库，Space 构建才快。
+WEB = HERE / "web"
 PACKAGE = Path(os.environ.get("SETVL_PACKAGE", HERE / "package"))
 DATASET = os.environ.get("SETVL_DATASET", "").strip()
 HF_TOKEN = (os.environ.get("HF_TOKEN")
             or os.environ.get("HUGGING_FACE_HUB_TOKEN") or "").strip()
-DB = Path(os.environ.get("SETVL_DB", "")) if os.environ.get("SETVL_DB") else None
-if DB is None:
-    DB = (HERE / "graph.sqlite") if (HERE / "graph.sqlite").exists() else PACKAGE / "graph.sqlite"
-
-ZOOM, RASTER = 17, 400
-CITIES: List[str] = []
-
-# 与复核台一致的配色，换个地方看图不会认错
-COL = {
-    "corridor_chain": (104, 200, 192),
-    "intersection": (241, 164, 60),
-    "bridge": (184, 162, 224),
-    "manual": (104, 200, 192),
-}
-COL_ORPHAN = (239, 91, 77)
-COL_HIGHCOST = (232, 229, 218)
-
-
-def asset(rel: str) -> Optional[Path]:
-    """把包内相对路径解析成本地可读文件。
-
-    数据集模式下按需从 HF CDN 拉取并缓存——27 GB 不必也不该整个下到 Space 里。
-    取不到就返回 None，让调用方降级（画空白底图、跳过该张街景），不要抛异常
-    把整个页面打挂。
-    """
+DB = (Path(os.environ["SETVL_DB"]) if os.environ.get("SETVL_DB")
+      else (HERE / "graph.sqlite" if (HERE / "graph.sqlite").exists()
+            else PACKAGE / "graph.sqlite"))
+
+_TLS = threading.local()
+
+
+def con() -> sqlite3.Connection:
+    """每线程一个只读连接。sqlite3 的连接不能跨线程共用。"""
+    c = getattr(_TLS, "con", None)
+    if c is None:
+        if not DB.exists():
+            raise RuntimeError(f"找不到数据库 {DB}")
+        c = sqlite3.connect(f"file:{DB}?mode=ro", uri=True)
+        c.row_factory = sqlite3.Row
+        _TLS.con = c
+    return c
+
+
+def asset_path(rel: str) -> Optional[Path]:
+    """包内相对路径 -> 本地文件。数据集模式下按需从 CDN 拉取并缓存。"""
+    if not rel or ".." in rel:
+        return None
     local = PACKAGE / rel
     if local.is_file():
         return local
@@ -63,380 +63,249 @@ def asset(rel: str) -> Optional[Path]:
         return None
     try:
         from huggingface_hub import hf_hub_download
-        # 私有数据集必须带 token。Space 不会自动注入个人 token，
-        # 要在 Space 的 Settings -> Secrets 里配 HF_TOKEN（读权限即可）。
-        # 不配的话每次取图都是 401，界面只剩空白底图。
+        # 私有数据集必须带 token；Space 里要配 HF_TOKEN secret
         return Path(hf_hub_download(DATASET, rel, repo_type="dataset",
                                     token=HF_TOKEN or None))
     except Exception:
         return None
 
 
-def connect() -> sqlite3.Connection:
-    if not DB.exists():
-        raise FileNotFoundError(
-            f"找不到 {DB}。先跑 prepare.py 打包，或设 SETVL_DB 指向 graph.sqlite。")
-    con = sqlite3.connect(f"file:{DB}?mode=ro", uri=True, check_same_thread=False)
-    con.row_factory = sqlite3.Row
-    return con
+def _loads(raw: Optional[str]) -> Any:
+    if not raw:
+        return None
+    try:
+        return json.loads(raw)
+    except (ValueError, TypeError):
+        return None
 
 
-CON = None
+def effective(nodes: List[Dict], edges: List[Dict]) -> None:
+    """合成 _auto / _human 的生效值，与标注台一致。"""
+    for n in nodes:
+        n["corridor_id"] = n["corridor_id_human"] or n["corridor_id_auto"]
+        n["corridor_name"] = (n["corridor_name_human"] or n["corridor_name_auto"]
+                              or n["corridor_id"])
+        o = n["is_orphan_human"]
+        n["is_orphan"] = int(o) if o is not None else (n["is_orphan_auto"] or 0)
+        n["corridor_overridden"] = n["corridor_id_human"] is not None
+        n["triage_signals"] = _loads(n["triage_signals_auto"]) or []
+    for e in edges:
+        e["origin"] = e["origin_human"] or e["origin_auto"] or "bridge"
+        rc = e["road_connected_human"]
+        e["road_connected"] = int(rc) if rc is not None else (e["road_connected_auto"] or 0)
+        hc = e["high_cost_human"]
+        e["high_cost"] = int(hc) if hc is not None else (e["high_cost_auto"] or 0)
+        e["cost_class"] = e["cost_class_auto"]
+        e["verdict"] = e["edge_verdict_human"]
+        e["in_graph"] = e["edge_verdict_human"] != "reject"
+        e["is_manual"] = e["origin_human"] == "manual" or e["origin_auto"] is None
+        e["origin_overridden"] = e["origin_human"] is not None
+        e["road_path"] = _loads(e["road_path_auto"])
+        e["evidence"] = _loads(e["evidence_auto"])
+        e["triage_signals"] = _loads(e["triage_signals_auto"]) or []
+        e["review_status"] = e["review_status_human"] or "unreviewed"
 
 
-def con() -> sqlite3.Connection:
-    global CON
-    if CON is None:
-        CON = connect()
-    return CON
+api = FastAPI(title="SetVL Node Graph Viewer")
 
 
-# --------------------------------------------------------------- 投影
+@api.get("/")
+def index() -> FileResponse:
+    return FileResponse(WEB / "index.html")
 
-def mercator(lat: float, lon: float) -> Tuple[float, float]:
-    s = 256 * (2 ** ZOOM)
-    x = (lon + 180.0) / 360.0 * s
-    sy = math.sin(math.radians(lat))
-    y = (0.5 - math.log((1 + sy) / (1 - sy)) / (4 * math.pi)) * s
-    return x, y
 
+@api.get("/app.js")
+def appjs() -> FileResponse:
+    return FileResponse(WEB / "app.js", media_type="application/javascript")
 
-def tile_center(sat_rel: str) -> Optional[Tuple[float, float]]:
-    parts = Path(sat_rel).stem.split("_")
-    try:
-        return float(parts[-1]), float(parts[-2])
-    except (ValueError, IndexError):
-        return None
 
+@api.get("/styles.css")
+def css() -> FileResponse:
+    return FileResponse(WEB / "styles.css", media_type="text/css")
 
-def projector(sat_rel: str):
-    c = tile_center(sat_rel)
-    if c is None:
-        return None
-    cx, cy = mercator(*c)
 
-    def to_px(lat: float, lon: float) -> Tuple[float, float]:
-        x, y = mercator(lat, lon)
-        return x - cx + RASTER / 2, y - cy + RASTER / 2
-    return to_px
+@api.get("/api/bootstrap")
+def bootstrap() -> JSONResponse:
+    c = con()
+    cities = [r[0] for r in c.execute("SELECT DISTINCT city FROM scene ORDER BY city")]
+    return JSONResponse({
+        "cities": cities,
+        "stats": stats_payload(),
+        "dataset": DATASET or "local package",
+        "read_only": True,
+    })
+
 
+def stats_payload() -> Dict[str, Any]:
+    c = con()
+    q = lambda s: c.execute(s).fetchone()[0]
+    origins = {r[0] or "unknown": r[1] for r in
+               c.execute("SELECT origin_auto, COUNT(*) FROM edge GROUP BY origin_auto")}
+    return {
+        "scenes": q("SELECT COUNT(*) FROM scene"),
+        "nodes": q("SELECT COUNT(*) FROM node"),
+        "edges": q("SELECT COUNT(*) FROM edge"),
+        "total_items": q("SELECT COUNT(*) FROM node") + q("SELECT COUNT(*) FROM edge"),
+        "origins": origins,
+        "high_cost": q("SELECT COUNT(*) FROM edge WHERE high_cost_auto=1"),
+        "orphans": q("SELECT COUNT(*) FROM node WHERE is_orphan_auto=1"),
+        "fragmented": q("SELECT COUNT(*) FROM scene WHERE net_fragmented_auto=1"),
+    }
 
-def corridor_color(cid: Optional[str]) -> Tuple[int, int, int]:
-    if not cid:
-        return (120, 130, 125)
-    h = 0
-    for ch in cid:
-        h = (h * 31 + ord(ch)) & 0xFFFFFFFF
-    import colorsys
-    r, g, b = colorsys.hls_to_rgb((h % 360) / 360.0, 0.58, 0.55)
-    return int(r * 255), int(g * 255), int(b * 255)
 
+@api.get("/api/stats")
+def stats() -> JSONResponse:
+    return JSONResponse(stats_payload())
 
-# --------------------------------------------------------------- 查询
 
-def list_scenes(city: str, min_nodes: int, only_high_cost: bool,
-                only_orphan: bool, query: str, page: int,
-                per_page: int = 60) -> Tuple[List[str], int]:
+@api.get("/api/scenes")
+def scenes(city: str = "", min_nodes: Optional[int] = None,
+           orphan: str = "", high_cost: str = "", fragmented: str = "",
+           q: str = "", order: str = "scene_id",
+           limit: int = 60, offset: int = 0) -> JSONResponse:
     where, args = [], []
-    if city and city != "全部":
+    if city:
         where.append("s.city = ?")
         args.append(city)
     if min_nodes:
         where.append("s.node_count >= ?")
         args.append(int(min_nodes))
-    if query.strip():
+    if q:
         where.append("s.scene_id LIKE ?")
-        args.append(f"%{query.strip()}%")
-    if only_high_cost:
-        where.append("EXISTS (SELECT 1 FROM edge e WHERE e.scene_id = s.scene_id "
-                     "AND e.high_cost_auto = 1)")
-    if only_orphan:
-        where.append("EXISTS (SELECT 1 FROM node n WHERE n.scene_id = s.scene_id "
-                     "AND n.is_orphan_auto = 1)")
+        args.append(f"%{q}%")
+    if orphan in ("1", "true"):
+        where.append("EXISTS (SELECT 1 FROM node n WHERE n.scene_id=s.scene_id "
+                     "AND n.is_orphan_auto=1)")
+    if high_cost in ("1", "true"):
+        where.append("EXISTS (SELECT 1 FROM edge e WHERE e.scene_id=s.scene_id "
+                     "AND e.high_cost_auto=1)")
+    if fragmented in ("1", "true"):
+        where.append("s.net_fragmented_auto = 1")
     clause = (" WHERE " + " AND ".join(where)) if where else ""
-    total = con().execute(f"SELECT COUNT(*) FROM scene s{clause}", args).fetchone()[0]
-    page = max(0, page)
+    order_sql = {"scene_id": "s.scene_id",
+                 "nodes_desc": "s.node_count DESC, s.scene_id",
+                 "nodes_asc": "s.node_count ASC, s.scene_id"}.get(order, "s.scene_id")
+    limit = max(1, min(int(limit), 200))
     rows = con().execute(
-        f"SELECT s.scene_id, s.city, s.node_count FROM scene s{clause} "
-        "ORDER BY s.scene_id LIMIT ? OFFSET ?", args + [per_page, page * per_page])
-    labels = [f"{r['scene_id']}  ·  {r['node_count']}n  ·  {r['city']}" for r in rows]
-    return labels, total
+        "SELECT s.scene_id, s.city, s.node_count, s.satellite_path, "
+        "s.net_fragmented_auto, "
+        "(SELECT COUNT(*) FROM edge e WHERE e.scene_id=s.scene_id) AS edge_count, "
+        "(SELECT COUNT(*) FROM node n WHERE n.scene_id=s.scene_id AND n.is_orphan_auto=1) "
+        " AS orphan_count, "
+        "(SELECT COUNT(*) FROM edge e WHERE e.scene_id=s.scene_id AND e.high_cost_auto=1) "
+        " AS high_cost_count, 0 AS revision_count "
+        f"FROM scene s{clause} ORDER BY {order_sql} LIMIT ? OFFSET ?",
+        args + [limit, max(0, int(offset))])
+    total = con().execute(f"SELECT COUNT(*) FROM scene s{clause}", args).fetchone()[0]
+    return JSONResponse({"items": [dict(r) for r in rows], "total": total,
+                         "limit": limit, "offset": offset})
+
+
+@api.get("/api/queue")
+def queue(city: str = "", signal: str = "", kind: str = "",
+          tier: str = "", include_reviewed: str = "",
+          limit: int = 60, offset: int = 0) -> JSONResponse:
+    """「带信号的」列表。只读版没有复核队列，这里按信号码筛条目供排查。"""
+    parts, args = [], []
+    limit = max(1, min(int(limit), 200))
+    for tbl in ("node", "edge"):
+        if kind and kind != tbl:
+            continue
+        key = "t.label" if tbl == "node" else "t.source_label || '-' || t.target_label"
+        cond = ["t.triage_signals_auto IS NOT NULL", "t.triage_signals_auto != '[]'"]
+        sub: List[Any] = []
+        if city:
+            cond.append("s.city = ?")
+            sub.append(city)
+        if signal:
+            cond.append("EXISTS (SELECT 1 FROM json_each(t.triage_signals_auto) je "
+                        "WHERE json_extract(je.value,'$.code') = ?)")
+            sub.append(signal)
+        parts.append(
+            f"SELECT '{tbl}' AS kind, t.scene_id AS scene_id, s.city AS city, "
+            f"{key} AS item_key, COALESCE(t.triage_tier_auto,0) AS tier, "
+            "t.confidence_auto AS confidence, "
+            "(t.confidence_auto IS NULL) AS conf_null, "
+            "t.triage_signals_auto AS signals, 'unreviewed' AS review_status "
+            f"FROM {tbl} t JOIN scene s ON s.scene_id=t.scene_id "
+            "WHERE " + " AND ".join(cond))
+        args += sub
+    if not parts:
+        return JSONResponse({"items": [], "limit": limit, "offset": offset})
+    sql = (" UNION ALL ".join(parts) +
+           " ORDER BY conf_null ASC, confidence ASC, scene_id, item_key LIMIT ? OFFSET ?")
+    items = []
+    for r in con().execute(sql, args + [limit, max(0, int(offset))]):
+        d = dict(r)
+        d.pop("conf_null", None)
+        d["signals"] = _loads(d.pop("signals")) or []
+        items.append(d)
+    return JSONResponse({"items": items, "limit": limit, "offset": offset})
+
+
+@api.get("/api/scene/{scene_id:path}")
+def scene(scene_id: str) -> JSONResponse:
+    c = con()
+    s = c.execute("SELECT * FROM scene WHERE scene_id=?", (scene_id,)).fetchone()
+    if s is None:
+        raise HTTPException(404, f"无此场景 {scene_id}")
+    nodes = [dict(r) for r in c.execute(
+        "SELECT * FROM node WHERE scene_id=? ORDER BY label", (scene_id,))]
+    edges = [dict(r) for r in c.execute(
+        "SELECT * FROM edge WHERE scene_id=? ORDER BY source_label, target_label",
+        (scene_id,))]
+    effective(nodes, edges)
+    # 街景路径：打包时建的索引，运行时猜不出文件名（含 alt/year/heading）
+    for n in nodes:
+        row = c.execute("SELECT rel FROM ground_index WHERE panoid=? LIMIT 1",
+                        (n["panoid"],)).fetchone()
+        n["ground_asset"] = row[0] if row else None
+        n["ground_assets"] = [row[0]] if row else []
+    return JSONResponse({"scene": dict(s), "nodes": nodes, "edges": edges,
+                         "asset": {"satellite": dict(s)["satellite_path"]}})
 
 
-def scene_of(label: str) -> Optional[str]:
-    return label.split("  ·  ")[0] if label else None
+@api.get("/api/revisions")
+def revisions(table: str = "", key: str = "", limit: int = 50) -> JSONResponse:
+    # 只读包不带修订历史，返回空让前端正常渲染
+    return JSONResponse({"items": []})
 
 
-def load_scene(scene_id: str) -> Optional[Dict[str, Any]]:
-    s = con().execute("SELECT * FROM scene WHERE scene_id = ?", (scene_id,)).fetchone()
-    if s is None:
-        return None
-    nodes = [dict(r) for r in con().execute(
-        "SELECT * FROM node WHERE scene_id = ? ORDER BY label", (scene_id,))]
-    edges = [dict(r) for r in con().execute(
-        "SELECT * FROM edge WHERE scene_id = ? ORDER BY source_label, target_label",
-        (scene_id,))]
-    for n in nodes:
-        n["corridor_id"] = n["corridor_id_human"] or n["corridor_id_auto"]
-        n["corridor_name"] = (n["corridor_name_human"] or n["corridor_name_auto"]
-                              or n["corridor_id"])
-        o = n["is_orphan_human"]
-        n["is_orphan"] = int(o) if o is not None else (n["is_orphan_auto"] or 0)
-    for e in edges:
-        e["origin"] = e["origin_human"] or e["origin_auto"] or "bridge"
-        hc = e["high_cost_human"]
-        e["high_cost"] = int(hc) if hc is not None else (e["high_cost_auto"] or 0)
-        e["in_graph"] = e["edge_verdict_human"] != "reject"
-    return {"scene": dict(s), "nodes": nodes, "edges": edges}
-
-
-# --------------------------------------------------------------- 绘图
-
-def render(scene_id: str, show_road_path: bool) -> Tuple[Optional[Image.Image], str, str]:
-    det = load_scene(scene_id)
-    if det is None:
-        return None, "未找到该场景", ""
-    sat = asset(det["scene"]["satellite_path"])
-    base = (Image.open(sat).convert("RGB") if sat
-            else Image.new("RGB", (RASTER, RASTER), (18, 22, 20)))
-    base = base.resize((RASTER * 2, RASTER * 2), Image.LANCZOS)
-    d = ImageDraw.Draw(base, "RGBA")
-    proj = projector(det["scene"]["satellite_path"])
-    if proj is None:
-        return base, "无法从瓦片名解析中心坐标", ""
-    P = {n["label"]: tuple(v * 2 for v in proj(n["lat"], n["lon"])) for n in det["nodes"]}
-
-    for e in det["edges"]:
-        a, b = P.get(e["source_label"]), P.get(e["target_label"])
-        if not a or not b:
-            continue
-        col = COL.get(e["origin"], COL["bridge"])
-        alpha = 60 if not e["in_graph"] else 255
-        if e["high_cost"]:
-            col = COL_HIGHCOST
-        path = None
-        if show_road_path and not e["high_cost"] and e["road_path_auto"]:
-            try:
-                pts = json.loads(e["road_path_auto"])
-                path = [tuple(v * 2 for v in proj(p[0], p[1])) for p in pts]
-            except (ValueError, TypeError):
-                path = None
-        if path and len(path) > 1:
-            d.line([a] + path + [b], fill=col + (alpha,), width=3, joint="curve")
-        else:
-            d.line([a, b], fill=col + (alpha,), width=3)
-
-    for n in det["nodes"]:
-        p = P[n["label"]]
-        fill = corridor_color(n["corridor_id"])
-        r = 9
-        d.ellipse([p[0] - r, p[1] - r, p[0] + r, p[1] + r], fill=fill + (255,),
-                  outline=(COL_ORPHAN if n["is_orphan"] else (12, 16, 14)) + (255,),
-                  width=3 if n["is_orphan"] else 2)
-        d.text((p[0] - 4, p[1] - 6), n["label"], fill=(12, 16, 14))
-
-    sc = det["scene"]
-    from collections import Counter
-    oc = Counter(e["origin"] for e in det["edges"])
-    corridors = sorted({n["corridor_name"] for n in det["nodes"] if n["corridor_name"]})
-    summary = "\n".join([
-        f"**{sc['scene_id']}**",
-        "",
-        f"- 城市：{sc['city']}　节点 {len(det['nodes'])}　边 {len(det['edges'])}",
-        f"- 边构成：走廊链 {oc.get('corridor_chain',0)}　路口 {oc.get('intersection',0)}　"
-        f"桥接 {oc.get('bridge',0)}　人工 {oc.get('manual',0)}",
-        f"- 孤儿节点 {sum(n['is_orphan'] for n in det['nodes'])}　"
-        f"高花费边 {sum(e['high_cost'] for e in det['edges'])}　"
-        f"被拒边 {sum(0 if e['in_graph'] else 1 for e in det['edges'])}",
-        f"- 路网碎片化：{'是' if sc['net_fragmented_auto'] else '否'}",
-        "",
-        f"**走廊（{len(corridors)}）**：" + ("、".join(corridors[:8]) or "—")
-        + ("…" if len(corridors) > 8 else ""),
-    ])
-
-    lines = ["| 边 | 来源 | 欧氏 m | 路网 m | 绕路 | 高花费 | 状态 |",
-             "|---|---|---|---|---|---|---|"]
-    for e in det["edges"]:
-        lines.append(
-            f"| {e['source_label']}–{e['target_label']} | {e['origin']} | "
-            f"{(e['euclid_distance_m_auto'] or 0):.1f} | "
-            f"{('%.1f' % e['road_distance_m_auto']) if e['road_distance_m_auto'] else '—'} | "
-            f"{('%.2fx' % e['detour_ratio_auto']) if e['detour_ratio_auto'] else '—'} | "
-            f"{'是' if e['high_cost'] else ''} | "
-            f"{'已拒' if not e['in_graph'] else ''} |")
-    return base, summary, "\n".join(lines)
-
-
-def node_gallery(scene_id: str) -> List[Tuple[str, str]]:
-    """取本场景每个节点的一张街景。
-
-    数据集模式下每张图都要走一次 CDN，串行拉 38 张要等半分钟。
-    并行拉——单张仍是那个延迟，但总时长压到接近单张。
-    """
-    det = load_scene(scene_id)
-    if det is None:
-        return []
-    city = det["scene"]["city"]
-    folder = PACKAGE / "ground" / city
-
-    def fetch(n: Dict[str, Any]) -> Optional[Tuple[str, str]]:
-        cap = (f"{n['label']} · {n['corridor_name'] or '无走廊'}"
-               + (" · 孤儿" if n["is_orphan"] else ""))
-        if folder.is_dir():
-            hits = sorted(folder.rglob(f"{city},{n['panoid']},*.webp"))
-            if hits:
-                return (str(hits[0]), cap)
-        rel = ground_rel(n)
-        if not rel:
-            return None
-        p = asset(rel)
-        return (str(p), cap) if p else None
-
-    from concurrent.futures import ThreadPoolExecutor
-    with ThreadPoolExecutor(max_workers=12) as ex:
-        got = list(ex.map(fetch, det["nodes"]))
-    return [g for g in got if g]
-
-
-_TLS = __import__("threading").local()
-
-
-def ro_con() -> sqlite3.Connection:
-    """每个线程一个只读连接。
-
-    sqlite3 的连接默认不允许跨线程用，而街景是并行拉的——共用一个连接
-    会抛 ProgrammingError。
-    """
-    c = getattr(_TLS, "con", None)
-    if c is None:
-        c = sqlite3.connect(f"file:{DB}?mode=ro", uri=True)
-        c.row_factory = sqlite3.Row
-        _TLS.con = c
-    return c
+@api.get("/asset")
+def serve_asset(path: str = Query(...)) -> FileResponse:
+    p = asset_path(path)
+    if p is None:
+        raise HTTPException(404, "取不到该图片")
+    return FileResponse(p)
 
 
-def ground_rel(node: Dict[str, Any]) -> Optional[str]:
-    """从索引表查这个 pano 的街景文件名。
-
-    打包时写了一张 pano -> 文件名 的索引，因为文件名里有 alt/year/heading
-    三个字段是数据库里没有的，猜不出来。
-    """
-    row = ro_con().execute(
-        "SELECT rel FROM ground_index WHERE panoid = ? LIMIT 1",
-        (node["panoid"],)).fetchone()
-    return row[0] if row else None
-
-
-def node_table(scene_id: str) -> str:
-    det = load_scene(scene_id)
-    if det is None:
-        return ""
-    lines = ["| 节点 | 走廊 | 来源 | 吸附 m | 孤儿 | 人工覆盖 |", "|---|---|---|---|---|---|"]
-    for n in det["nodes"]:
-        ov = []
-        if n["corridor_id_human"] is not None:
-            ov.append("走廊")
-        if n["is_orphan_human"] is not None:
-            ov.append("孤儿")
-        lines.append(
-            f"| {n['label']} | {n['corridor_name'] or '—'} | "
-            f"{n['corridor_source_auto'] or '—'} | "
-            f"{(n['snap_distance_m_auto'] or 0):.1f} | {'是' if n['is_orphan'] else ''} | "
-            f"{'、'.join(ov)} |")
-    return "\n".join(lines)
-
-
-# --------------------------------------------------------------- 界面
-
-def build() -> gr.Blocks:
-    global CITIES
-    CITIES = ["全部"] + [r[0] for r in
-                        con().execute("SELECT DISTINCT city FROM scene ORDER BY city")]
-    n_scene = con().execute("SELECT COUNT(*) FROM scene").fetchone()[0]
-    n_node = con().execute("SELECT COUNT(*) FROM node").fetchone()[0]
-    n_edge = con().execute("SELECT COUNT(*) FROM edge").fetchone()[0]
-
-    with gr.Blocks(title="SetVL Node Graph Viewer", theme=gr.themes.Base()) as demo:
-        warn = ""
-        if DATASET and not HF_TOKEN and not (PACKAGE / "satellite").is_dir():
-            warn = ("\n\n> ⚠ **未检测到 HF_TOKEN**，而图片来自私有数据集 "
-                    f"`{DATASET}`。请在 Space 的 Settings → Variables and secrets "
-                    "里添加名为 `HF_TOKEN` 的 secret（read 权限即可），否则所有"
-                    "卫星图与街景都会加载失败。")
-        gr.Markdown(
-            f"# SetVL Node Graph Viewer\n"
-            f"{n_scene:,} 个场景 · {n_node:,} 个节点 · {n_edge:,} 条边 · **只读浏览**\n\n"
-            f"节点按所属走廊着色，红圈是孤儿；边按来源着色："
-            f"<span style='color:#68c8c0'>青=走廊链</span>、"
-            f"<span style='color:#f1a43c'>橙=路口边</span>、"
-            f"<span style='color:#b8a2e0'>紫=桥接边</span>，"
-            f"白色加粗=高花费边（直线连接）。" + warn)
-        with gr.Row():
-            with gr.Column(scale=1):
-                city = gr.Dropdown(CITIES, value="全部", label="城市")
-                query = gr.Textbox(label="scene_id 搜索", placeholder="片段即可")
-                min_nodes = gr.Slider(1, 38, value=1, step=1, label="最少节点数")
-                with gr.Row():
-                    f_cost = gr.Checkbox(label="含高花费边")
-                    f_orph = gr.Checkbox(label="含孤儿")
-                page = gr.Number(value=0, precision=0, label="页码（每页 60）")
-                info = gr.Markdown()
-                # 用 Dropdown + allow_custom_value：choices 是运行时才填的，
-                # Gradio 6 会拿组件初始的空 choices 去校验提交值，
-                # 结果用户一点场景就报 "not in the list of choices: []"。
-                picker = gr.Dropdown(choices=[], label="场景", interactive=True,
-                                     allow_custom_value=True, filterable=True)
-            with gr.Column(scale=2):
-                show_path = gr.Checkbox(value=True, label="按道路走线绘制边")
-                canvas = gr.Image(label="场景图", type="pil", height=560)
-                summary = gr.Markdown()
-        with gr.Row():
-            with gr.Column():
-                gr.Markdown("### 节点")
-                ntab = gr.Markdown()
-            with gr.Column():
-                gr.Markdown("### 边")
-                etab = gr.Markdown()
-        gallery = gr.Gallery(label="街景", columns=6, height=260)
-
-        def refresh(c, mn, hc, orp, q, pg):
-            labels, total = list_scenes(c, mn, hc, orp, q, int(pg or 0))
-            pages = max(1, -(-total // 60))
-            msg = f"命中 **{total:,}** 个场景　第 {int(pg or 0)+1} / {pages} 页"
-            return gr.update(choices=labels, value=labels[0] if labels else None), msg
-
-        def show(label, sp):
-            sid = scene_of(label)
-            if not sid:
-                return None, "", "", "", []
-            img, summ, et = render(sid, sp)
-            return img, summ, node_table(sid), et, node_gallery(sid)
-
-        for ctl in (city, min_nodes, f_cost, f_orph, query, page):
-            ctl.change(refresh, [city, min_nodes, f_cost, f_orph, query, page],
-                       [picker, info])
-        picker.change(show, [picker, show_path], [canvas, summary, ntab, etab, gallery])
-        show_path.change(show, [picker, show_path], [canvas, summary, ntab, etab, gallery])
-        demo.load(refresh, [city, min_nodes, f_cost, f_orph, query, page], [picker, info])
+# ---------------------------------------------------------------- Gradio 兜底
+
+def _gradio_fallback() -> gr.Blocks:
+    st = None
+    try:
+        st = stats_payload()
+    except Exception:
+        pass
+    with gr.Blocks(title="SetVL Node Graph Viewer") as demo:
+        if st:
+            gr.Markdown(
+                f"# SetVL Node Graph Viewer\n\n"
+                f"{st['scenes']:,} 场景 · {st['nodes']:,} 节点 · {st['edges']:,} 边\n\n"
+                f"**[→ 打开浏览器界面](/)**")
+        else:
+            gr.Markdown("# SetVL Node Graph Viewer\n\n数据库未就绪。")
     return demo
 
 
-def main() -> int:
-    ap = argparse.ArgumentParser(description=__doc__)
-    ap.add_argument("--package", type=Path)
-    ap.add_argument("--share", action="store_true", help="开公网临时链接（72 小时）")
-    ap.add_argument("--port", type=int, default=7860)
-    args = ap.parse_args()
-    if args.package:
-        global PACKAGE, DB
-        PACKAGE = args.package
-        DB = PACKAGE / "graph.sqlite"
-    import tempfile
-    build().launch(share=args.share, server_port=args.port,
-                   allowed_paths=[str(PACKAGE), tempfile.gettempdir(),
-                                  os.path.expanduser("~/.cache/huggingface")])
-    return 0
+app = gr.mount_gradio_app(api, _gradio_fallback(), path="/gradio")
 
 
 if __name__ == "__main__":
-    raise SystemExit(main())
+    import argparse
+    import uvicorn
+    ap = argparse.ArgumentParser()
+    ap.add_argument("--port", type=int, default=7860)
+    ap.add_argument("--host", default="0.0.0.0")
+    a = ap.parse_args()
+    uvicorn.run(app, host=a.host, port=a.port, log_level="info")

requirements.txt

@@ -1,3 +1,5 @@
+fastapi>=0.115
+uvicorn[standard]>=0.30
 gradio>=5.0
 pillow>=10.0
 huggingface_hub>=0.25

web/app.js

@@ -0,0 +1,772 @@
+/* SetVL node graph 复核台 —— 零构建步骤的原生 JS。
+ *
+ * 操作逻辑沿用上一代 pair 复核台：三栏、全键盘流、底图切换、图片放大、
+ * 队列 J/K 导航、进度条。变的是判定对象——从「一对节点的关系」变成
+ * 「节点归属哪条走廊」与「这条边该不该存在」。
+ *
+ * 快捷键按新语义重新映射：
+ *   J/K 导航   1-9 选走廊   0 撤销覆盖   Y/N 边裁定
+ *   S 保存     U 存疑        A 撤销       B 切底图   ? 帮助
+ */
+'use strict';
+
+var S = {
+  mode: 'scenes',              // 'scenes' 浏览全库 | 'queue' 复核队列
+  queue: [], filtered: [], selected: null,   // {kind, scene_id, key:[...]}
+  scenes: [], sceneSel: null,
+  scene: null, offset: 0, limit: 100,
+  basemap: 'satellite', mapZoom: 17, edgeMode: 'road',
+  boot: null, pending: {},                    // pending: 未保存的编辑
+};
+
+function $(id) { return document.getElementById(id); }
+function esc(s) {
+  return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) {
+    return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c];
+  });
+}
+function api(path, opts) {
+  return fetch(path, opts).then(function (r) {
+    return r.json().catch(function () { return { error: 'HTTP ' + r.status }; })
+      .then(function (b) {
+        if (!r.ok) throw new Error(b.error || ('HTTP ' + r.status));
+        return b;
+      });
+  });
+}
+function toast(msg, isErr) {
+  var t = $('toast');
+  t.textContent = msg;
+  t.className = 'toast show' + (isErr ? ' err' : '');
+  clearTimeout(toast._t);
+  toast._t = setTimeout(function () { t.className = 'toast'; }, 2600);
+}
+
+/* ---------- Web Mercator：lat/lon -> 400x400 瓦片像素 -------------------
+ * 瓦片名 City_year_<lon>_<lat>.png，north-up，zoom 17，400x400。
+ * 与 benchmark 的 satellite_registration 一致。 */
+var ZOOM = 17, RASTER = 400;
+function mercator(lat, lon) {
+  var s = 256 * Math.pow(2, ZOOM);
+  var x = (lon + 180) / 360 * s;
+  var sy = Math.sin(lat * Math.PI / 180);
+  var y = (0.5 - Math.log((1 + sy) / (1 - sy)) / (4 * Math.PI)) * s;
+  return [x, y];
+}
+function tileCenter(satPath) {
+  var stem = String(satPath || '').split('/').pop().replace(/\.png$/, '');
+  var p = stem.split('_');
+  var lat = parseFloat(p[p.length - 1]), lon = parseFloat(p[p.length - 2]);
+  return (isFinite(lat) && isFinite(lon)) ? [lat, lon] : null;
+}
+function makeProjector(satPath) {
+  var c = tileCenter(satPath);
+  if (!c) return null;
+  var m = mercator(c[0], c[1]);
+  return function (lat, lon) {
+    var q = mercator(lat, lon);
+    return [q[0] - m[0] + RASTER / 2, q[1] - m[1] + RASTER / 2];
+  };
+}
+function corridorColor(cid) {
+  if (!cid) return '#66736d';
+  var h = 0;
+  for (var i = 0; i < cid.length; i++) h = (h * 31 + cid.charCodeAt(i)) >>> 0;
+  return 'hsl(' + (h % 360) + ' 58% 60%)';
+}
+
+/* ---------- 队列 ------------------------------------------------------ */
+function queueQuery() {
+  var q = new URLSearchParams();
+  if ($('cityFilter').value) q.set('city', $('cityFilter').value);
+  if ($('tierFilter').value) q.set('tier', $('tierFilter').value);
+  if ($('kindFilter').value) q.set('kind', $('kindFilter').value);
+  if ($('signalFilter').value) q.set('signal', $('signalFilter').value);
+  if ($('showReviewedSel').value) q.set('include_reviewed', '1');
+  q.set('limit', String(S.limit));
+  q.set('offset', String(S.offset));
+  return q.toString();
+}
+function sceneQuery() {
+  var q = new URLSearchParams();
+  var v;
+  if ((v = $('cityFilter').value)) q.set('city', v);
+  if ((v = $('orderFilter').value)) q.set('order', v);
+  if ((v = $('minNodes').value)) q.set('min_nodes', v);
+  if ((v = $('editedFilter').value)) q.set('edited', v);
+  if ($('fOrphan').checked) q.set('orphan', '1');
+  if ($('fHighCost').checked) q.set('high_cost', '1');
+  if ($('fFragmented').checked) q.set('fragmented', '1');
+  if ((v = $('searchInput').value.trim())) q.set('q', v);
+  q.set('limit', String(S.limit));
+  q.set('offset', String(S.offset));
+  return q.toString();
+}
+
+function loadScenes(keepSelection) {
+  return api('/api/scenes?' + sceneQuery()).then(function (d) {
+    S.scenes = d.items;
+    renderScenes();
+    if (!keepSelection && S.scenes.length && !S.scene) openScene(S.scenes[0].scene_id);
+  }).catch(function (e) { toast(e.message, true); });
+}
+
+function renderScenes() {
+  var list = $('queueList');
+  list.innerHTML = '';
+  if (!S.scenes.length) {
+    list.innerHTML = '<p class="empty-note">没有符合条件的场景。</p>';
+    return;
+  }
+  S.scenes.forEach(function (sc) {
+    var b = document.createElement('button');
+    b.className = 'queue-item' + (S.scene && S.scene.scene.scene_id === sc.scene_id ? ' active' : '')
+      + (sc.revision_count ? ' reviewed' : '');
+    var badges = '';
+    if (sc.revision_count) badges += '<span class="badge edited">改过 ' + sc.revision_count + '</span>';
+    if (sc.orphan_count) badges += '<span class="badge orphan">孤儿 ' + sc.orphan_count + '</span>';
+    if (sc.high_cost_count) badges += '<span class="badge cost">$$ ' + sc.high_cost_count + '</span>';
+    if (sc.net_fragmented_auto) badges += '<span class="badge frag">S1</span>';
+    b.innerHTML =
+      '<div class="queue-top"><strong>' + esc(sc.scene_id.split(':')[1] || sc.scene_id) +
+        '</strong><span>' + sc.node_count + 'n / ' + sc.edge_count + 'e</span></div>' +
+      '<div class="queue-meta scene-item-meta">' + (badges || '<span>—</span>') + '</div>' +
+      '<div class="queue-scene">' + esc(sc.city) + '</div>';
+    b.onclick = function () { openScene(sc.scene_id); };
+    list.appendChild(b);
+  });
+}
+
+function openScene(sceneId) {
+  S.pending = {};
+  S.selected = null;
+  S.scene = null;
+  loadScene(sceneId).then(function () {
+    renderScenes();
+    // 打开场景时默认选中第一个节点，右栏才有东西可改
+    if (S.scene && S.scene.nodes.length) pickNode(S.scene.nodes[0]);
+    else renderInspector();
+  });
+}
+
+function loadList(keepSelection) {
+  return S.mode === 'queue' ? loadQueue(keepSelection) : loadScenes(keepSelection);
+}
+
+function setMode(mode) {
+  S.mode = mode;
+  S.offset = 0;
+  $('modeScenes').classList.toggle('active', mode === 'scenes');
+  $('modeQueue').classList.toggle('active', mode === 'queue');
+  $('sceneFilters').hidden = mode !== 'scenes';
+  $('sceneChips').hidden = mode !== 'scenes';
+  $('queueFilters').hidden = mode !== 'queue';
+  $('panelTitle').textContent = mode === 'queue' ? '复核队列' : '场景浏览';
+  $('searchInput').placeholder = mode === 'queue' ? '场景 ID、城市或标签…' : 'scene_id 片段、城市…';
+  loadList();
+}
+
+function loadQueue(keepSelection) {
+  return api('/api/queue?' + queueQuery()).then(function (d) {
+    S.queue = d.items;
+    applySearch();
+    if (!keepSelection && S.filtered.length) selectItem(S.filtered[0]);
+    else renderList();
+  }).catch(function (e) { toast(e.message, true); });
+}
+function applySearch() {
+  var term = $('searchInput').value.trim().toLowerCase();
+  S.filtered = !term ? S.queue : S.queue.filter(function (i) {
+    return (i.scene_id + ' ' + i.city + ' ' + i.item_key).toLowerCase().indexOf(term) >= 0
+      || i.signals.some(function (s) { return s.code.toLowerCase() === term; });
+  });
+  renderList();
+}
+function signalHtml(sigs) {
+  if (!sigs || !sigs.length) return '<b>信号缺失</b>';
+  return sigs.map(function (s) {
+    var extra = Object.keys(s).filter(function (k) { return k !== 'code' && k !== 'queued'; })
+      .map(function (k) {
+        var v = s[k];
+        return k + '=' + (typeof v === 'number' ? (+v).toFixed(2) : JSON.stringify(v));
+      }).join(' ');
+    return '<span class="sig-code">' + esc(s.code) + '</span>' + (extra ? ' ' + esc(extra) : '');
+  }).join(' · ');
+}
+function itemId(i) { return i.kind + '|' + i.scene_id + '|' + i.item_key; }
+/* 左栏渲染的统一入口。
+ *
+ * 必须按模式分流：pickNode/pickEdge 里如果直接调 renderQueue()，
+ * 浏览模式下会把刚渲染好的场景列表覆盖成「队列为空」——点开一个场景后
+ * 左栏就空了，其他场景全看不见。
+ */
+function renderList() {
+  if (S.mode === 'queue') renderQueue();
+  else renderScenes();
+}
+
+function renderQueue() {
+  var list = $('queueList');
+  list.innerHTML = '';
+  if (!S.filtered.length) {
+    list.innerHTML = '<p class="empty-note">队列为空（可能已全部复核，或筛选过窄）。</p>';
+    return;
+  }
+  var selId = S.selected ? itemId(S.selected) : null;
+  S.filtered.forEach(function (i) {
+    var b = document.createElement('button');
+    b.className = 'queue-item'
+      + (itemId(i) === selId ? ' active' : '')
+      + (i.review_status === 'reviewed' ? ' reviewed' : '')
+      + (i.review_status === 'needs_adjudication' ? ' adjudication' : '');
+    b.innerHTML =
+      '<div class="queue-top"><strong>' + (i.kind === 'node' ? '●' : '─') + ' ' +
+        esc(i.item_key) + '</strong><span>' +
+        (i.confidence == null ? '—' : (+i.confidence).toFixed(3)) + '</span></div>' +
+      '<div class="queue-meta"><span class="tier-pill tier-' + i.tier + '">T' + i.tier + '</span>' +
+        signalHtml(i.signals) + '</div>' +
+      '<div class="queue-scene">' + esc(i.scene_id) + '</div>';
+    b.onclick = function () { selectItem(i); };
+    list.appendChild(b);
+  });
+}
+function page(delta) {
+  var next = S.offset + delta * S.limit;
+  if (next < 0) { toast('已是第一页'); return; }
+  S.offset = next;
+  loadList(true).then(function () {
+    var n = S.mode === 'queue' ? S.filtered.length : S.scenes.length;
+    if (!n && delta > 0) { S.offset -= S.limit; loadList(true); toast('已是最后一页'); }
+    else toast('第 ' + (Math.floor(S.offset / S.limit) + 1) + ' 页');
+  });
+}
+
+function navigate(delta) {
+  if (S.mode === 'scenes') { navigateScenes(delta); return; }
+  if (!S.filtered.length) return;
+  var idx = S.selected ? S.filtered.findIndex(function (i) {
+    return itemId(i) === itemId(S.selected);
+  }) : -1;
+  var next = idx + delta;
+  if (next < 0 || next >= S.filtered.length) {
+    toast(next < 0 ? '已是第一条' : '已是最后一条');
+    return;
+  }
+  selectItem(S.filtered[next]);
+  var el = $('queueList').children[next];
+  if (el && el.scrollIntoView) el.scrollIntoView({ block: 'nearest' });
+}
+
+function navigateScenes(delta) {
+  if (!S.scenes.length) return;
+  var cur = S.scene ? S.scene.scene.scene_id : null;
+  var idx = S.scenes.findIndex(function (x) { return x.scene_id === cur; });
+  var next = idx + delta;
+  if (next < 0 || next >= S.scenes.length) {
+    toast(next < 0 ? '已是本页第一个' : '已是本页最后一个，按 ] 翻页');
+    return;
+  }
+  openScene(S.scenes[next].scene_id);
+  var el = $('queueList').children[next];
+  if (el && el.scrollIntoView) el.scrollIntoView({ block: 'nearest' });
+}
+
+function selectItem(item) {
+  S.pending = {};
+  var key = item.kind === 'node'
+    ? [item.scene_id, item.item_key]
+    : [item.scene_id].concat(item.item_key.split('-'));
+  S.selected = { kind: item.kind, scene_id: item.scene_id, key: key, queue: item };
+  renderList();
+  loadScene(item.scene_id).then(renderInspector);
+}
+
+/* ---------- 场景 ------------------------------------------------------ */
+function loadScene(sceneId) {
+  if (S.scene && S.scene.scene.scene_id === sceneId) {
+    drawScene();
+    return Promise.resolve();
+  }
+  return api('/api/scene/' + encodeURIComponent(sceneId)).then(function (d) {
+    S.scene = d;
+    drawScene();
+  }).catch(function (e) { toast(e.message, true); });
+}
+
+function sceneCorridors() {
+  var seen = {}, out = [];
+  (S.scene ? S.scene.nodes : []).forEach(function (n) {
+    var cid = n.corridor_id;
+    if (cid && !seen[cid]) {
+      seen[cid] = 1;
+      out.push({ id: cid, name: n.corridor_name || cid, color: corridorColor(cid) });
+    }
+  });
+  out.sort(function (a, b) { return a.name < b.name ? -1 : 1; });
+  return out;
+}
+
+/* 给某个节点列出可选走廊。
+ *
+ * 光靠「本场景其他节点已归属的走廊」是不够的：歧义节点纠结的那条对手路
+ * 往往一个节点都没有，于是正确答案根本不在选项里，这条复核就做不了。
+ * 所以先放该节点自己的邻近候选（带距离，按远近排），再补上场景里的其它走廊。
+ */
+function corridorChoices(row) {
+  var out = [], seen = {};
+  (row && row.corridor_candidates ? row.corridor_candidates : []).forEach(function (c) {
+    if (seen[c.corridor_id]) return;
+    seen[c.corridor_id] = 1;
+    out.push({ id: c.corridor_id, name: c.name || c.corridor_id,
+               color: corridorColor(c.corridor_id), distance: c.distance_m });
+  });
+  sceneCorridors().forEach(function (c) {
+    if (seen[c.id]) return;
+    seen[c.id] = 1;
+    out.push({ id: c.id, name: c.name, color: c.color, distance: null });
+  });
+  return out;
+}
+
+function drawScene() {
+  if (!S.scene) return;
+  var sc = S.scene.scene;
+  $('sceneTitle').textContent = sc.scene_id.split(':')[1] || sc.scene_id;
+  $('sceneCity').textContent = sc.city;
+  $('sceneId').textContent = sc.scene_id;
+  $('mNodes').textContent = S.scene.nodes.length;
+  $('mEdges').textContent = S.scene.edges.length;
+  var cors = sceneCorridors();
+  $('mCorridors').textContent = cors.length;
+  $('mOrphans').textContent = S.scene.nodes.filter(function (n) { return n.is_orphan_auto; }).length;
+  $('satelliteImage').src = (S.scene.asset && S.scene.asset.satellite)
+    ? '/asset?path=' + encodeURIComponent(S.scene.asset.satellite) : '';
+  drawGraph();
+  drawNodeChips(cors);
+  drawAdjacency();
+  drawGroundImages();
+  if (S.basemap === 'map') renderMapTiles();
+}
+
+function drawGraph() {
+  var svg = $('graphSvg');
+  svg.innerHTML = '';
+  var proj = makeProjector(S.scene.scene.satellite_path);
+  if (!proj) return;
+  var pos = {};
+  S.scene.nodes.forEach(function (n) { pos[n.label] = proj(n.lat, n.lon); });
+  var NS = 'http://www.w3.org/2000/svg';
+  function mk(tag, attrs) {
+    var el = document.createElementNS(NS, tag);
+    for (var k in attrs) el.setAttribute(k, attrs[k]);
+    return el;
+  }
+  var sel = S.selected;
+  S.scene.edges.forEach(function (e) {
+    var a = pos[e.source_label], b = pos[e.target_label];
+    if (!a || !b) return;
+    var colour = { corridor_chain: 'var(--chain)', intersection: 'var(--intersection)' }[e.origin]
+      || 'var(--bridge)';
+    var isSel = sel && sel.kind === 'edge'
+      && sel.key[1] === e.source_label && sel.key[2] === e.target_label;
+    var dead = !e.in_graph;
+    var costly = !!e.high_cost;
+    // 一条边只画一笔。有走线就用走线（那才是这条边的真实走向），
+    // 没有就画直线并用虚线标出「无道路可走」。
+    // 之前直线与折线同时画，全库 81% 的边两者不重合，叠出一片乱麻。
+    var el;
+    // 高花费边一律画直线：它的 road_path 已在建图阶段丢弃（绕出几十倍的
+    // 折线画在图上只会误导），真实路网距离仍在 road_distance_m 里。
+    if (!costly && S.edgeMode === 'road' && e.road_path && e.road_path.length > 1) {
+      // 折线两端落在吸附点上，不在节点上——补两段短接头，否则边看着是断的
+      var pts = [a].concat(e.road_path.map(function (p) { return proj(p[0], p[1]); })).concat([b]);
+      el = mk('polyline', {
+        points: pts.map(function (p) { return p.join(','); }).join(' '),
+        fill: 'none', stroke: isSel ? '#fff' : colour,
+        'stroke-width': isSel ? 3 : 1.7, opacity: dead ? .22 : 1,
+        'stroke-linejoin': 'round', 'stroke-linecap': 'round',
+        style: 'cursor:pointer',
+      });
+    } else {
+      el = mk('line', {
+        x1: a[0], y1: a[1], x2: b[0], y2: b[1],
+        stroke: isSel ? '#fff' : colour,
+        'stroke-width': isSel ? 3 : (costly ? 2.2 : 1.7),
+        opacity: dead ? .22 : 1,
+        'stroke-dasharray': costly ? '6 4' : '',
+        style: 'cursor:pointer',
+      });
+    }
+    el.onclick = function () { pickEdge(e); };
+    svg.appendChild(el);
+  });
+  S.scene.nodes.forEach(function (n) {
+    var p = pos[n.label];
+    if (!p) return;
+    var isSel = sel && sel.kind === 'node' && sel.key[1] === n.label;
+    var g = mk('g', { style: 'cursor:pointer' });
+    g.appendChild(mk('circle', {
+      cx: p[0], cy: p[1], r: isSel ? 6.5 : 5,
+      fill: corridorColor(n.corridor_id),
+      stroke: isSel ? '#fff' : (n.is_orphan_auto ? 'var(--anchor)' : '#0b0e0d'),
+      'stroke-width': isSel ? 2.4 : (n.is_orphan_auto ? 2.2 : 1.2),
+    }));
+    var t = mk('text', {
+      x: p[0], y: p[1], fill: '#0b0e0d',
+      style: 'font:800 6px var(--mono);text-anchor:middle;dominant-baseline:central;pointer-events:none',
+    });
+    t.textContent = n.label;
+    g.appendChild(t);
+    g.onclick = function () { pickNode(n); };
+    svg.appendChild(g);
+  });
+}
+
+function drawNodeChips(cors) {
+  var wrap = $('nodeThumbnails');
+  wrap.innerHTML = '';
+  S.scene.nodes.forEach(function (n) {
+    var b = document.createElement('button');
+    var isSel = S.selected && S.selected.kind === 'node' && S.selected.key[1] === n.label;
+    b.className = 'node-chip' + (isSel ? ' active' : '') + (n.is_orphan_auto ? ' orphan' : '');
+    b.textContent = n.label;
+    b.title = (n.corridor_name_auto || '（无走廊）') + (n.corridor_overridden ? ' · 人工覆盖' : '');
+    b.onclick = function () { pickNode(n); };
+    wrap.appendChild(b);
+  });
+  var leg = $('corridorLegend');
+  leg.innerHTML = cors.slice(0, 6).map(function (c) {
+    return '<div><i style="background:' + c.color + '"></i>' + esc(c.name) + '</div>';
+  }).join('') || '<div>（无走廊）</div>';
+}
+
+function drawAdjacency() {
+  var labels = S.scene.nodes.map(function (n) { return n.label; });
+  var idx = {};
+  labels.forEach(function (l, i) { idx[l] = i; });
+  var cell = {};
+  var counts = { corridor_chain: 0, intersection: 0, bridge: 0 };
+  S.scene.edges.forEach(function (e) {
+    cell[e.source_label + '|' + e.target_label] = e;
+    cell[e.target_label + '|' + e.source_label] = e;
+    if (counts[e.origin_auto] != null) counts[e.origin_auto]++;
+  });
+  $('gChain').textContent = counts.corridor_chain;
+  $('gInter').textContent = counts.intersection;
+  $('gBridge').textContent = counts.bridge;
+
+  var sel = S.selected;
+  var html = '<tr><th></th>' + labels.map(function (l) { return '<th>' + l + '</th>'; }).join('') + '</tr>';
+  labels.forEach(function (r) {
+    html += '<tr><th>' + r + '</th>';
+    labels.forEach(function (c) {
+      if (r === c) { html += '<td class="diag"></td>'; return; }
+      var e = cell[r + '|' + c];
+      if (!e) {
+        // 空格子也可点——那是「自动化没给出这条边，但人认为该有」的入口
+        html += '<td></td>';
+        return;
+      }
+      var isSel = sel && sel.kind === 'edge'
+        && sel.key[1] === e.source_label && sel.key[2] === e.target_label;
+      var cls = 'edge e-' + (e.origin || 'bridge') + (isSel ? ' sel' : '') +
+        (e.in_graph ? '' : ' rejected');
+      html += '<td class="' + cls + '" data-e="' + e.source_label + '-' +
+        e.target_label + '">' + (e.in_graph ? '·' : '×') + '</td>';
+    });
+    html += '</tr>';
+  });
+  var tbl = $('adjacencyTable');
+  tbl.innerHTML = html;
+  Array.prototype.forEach.call(tbl.querySelectorAll('td.addable'), function (td) {
+    td.onclick = function () {
+      toast('只读浏览，不能新增边');
+    };
+  });
+  Array.prototype.forEach.call(tbl.querySelectorAll('td.edge'), function (td) {
+    td.onclick = function () {
+      var k = td.getAttribute('data-e').split('-');
+      var e = S.scene.edges.find(function (x) {
+        return x.source_label === k[0] && x.target_label === k[1];
+      });
+      if (e) pickEdge(e);
+    };
+  });
+
+  var listEl = $('edgeList');
+  listEl.innerHTML = '';
+  S.scene.edges.forEach(function (e) {
+    var d = document.createElement('div');
+    var isSel = sel && sel.kind === 'edge'
+      && sel.key[1] === e.source_label && sel.key[2] === e.target_label;
+    d.className = 'edge-row' + (isSel ? ' sel' : '');
+    var colour = { corridor_chain: 'var(--chain)', intersection: 'var(--intersection)' }[e.origin]
+      || 'var(--bridge)';
+    if (!e.in_graph) d.classList.add('rejected');
+    d.innerHTML = '<i style="background:' + colour + '"></i>' +
+      esc(e.source_label) + '–' + esc(e.target_label) +
+      (e.is_manual ? ' <span style="color:var(--cyan)">M</span>' : '') +
+      (e.in_graph ? '' : ' <span style="color:var(--no)">已拒</span>') +
+      (e.high_cost ? ' <span class="cost-tag" title="' + esc(e.cost_class || '') +
+        '">$$</span>' : '') +
+      '<span class="len">' + (e.euclid_distance_m == null ? '—' : (+e.euclid_distance_m).toFixed(0) + ' m') + '</span>';
+    d.onclick = function () { pickEdge(e); };
+    listEl.appendChild(d);
+  });
+}
+
+function groundUrl(panoid) {
+  // 街景文件名带朝向，这里只用节点坐标做占位；真实图由 /asset 白名单服务。
+  return null;
+}
+function drawGroundImages() {
+  var sel = S.selected;
+  if (!sel || !S.scene) return;
+  function fill(role, label) {
+    var n = S.scene.nodes.find(function (x) { return x.label === label; });
+    $(role + 'Badge').textContent = label || '—';
+    $(role + 'Caption').textContent = n
+      ? (n.lat.toFixed(6) + ', ' + n.lon.toFixed(6) + ' · ' + (n.corridor_name_auto || '无走廊'))
+      : '—';
+    var img = $(role + 'Image');
+    if (n && n.ground_asset) img.src = '/asset?path=' + encodeURIComponent(n.ground_asset);
+    else { img.removeAttribute('src'); }
+  }
+  if (sel.kind === 'node') {
+    $('anchorKind').textContent = 'Node';
+    $('targetCard').style.display = 'none';
+    fill('anchor', sel.key[1]);
+  } else {
+    $('anchorKind').textContent = 'Source';
+    $('targetCard').style.display = '';
+    fill('anchor', sel.key[1]);
+    fill('target', sel.key[2]);
+  }
+}
+
+function pickNode(n) {
+  S.pending = {};
+  S.selected = { kind: 'node', scene_id: S.scene.scene.scene_id,
+                 key: [S.scene.scene.scene_id, n.label] };
+  drawScene();
+  renderInspector();
+  renderList();
+}
+function pickEdge(e) {
+  S.pending = {};
+  S.selected = { kind: 'edge', scene_id: S.scene.scene.scene_id,
+                 key: [S.scene.scene.scene_id, e.source_label, e.target_label] };
+  drawScene();
+  renderInspector();
+  renderList();
+}
+
+/* ---------- 判定面板 -------------------------------------------------- */
+function currentRow() {
+  if (!S.selected || !S.scene) return null;
+  if (S.selected.kind === 'node') {
+    return S.scene.nodes.find(function (n) { return n.label === S.selected.key[1]; });
+  }
+  return S.scene.edges.find(function (e) {
+    return e.source_label === S.selected.key[1] && e.target_label === S.selected.key[2];
+  });
+}
+function kv(pairs) {
+  return '<dl class="kv">' + pairs.map(function (p) {
+    return '<dt>' + esc(p[0]) + '</dt><dd>' + esc(p[1] == null ? 'null' : p[1]) + '</dd>';
+  }).join('') + '</dl>';
+}
+function renderInspector() {
+  var body = $('inspectorBody');
+  var row = currentRow();
+  if (!row) {
+    body.innerHTML = '<p class="empty-note">在图上点一个节点或一条边查看属性。</p>';
+    $('itemId').textContent = '—';
+    return;
+  }
+  var isNode = S.selected.kind === 'node';
+  $('decisionTitle').textContent = isNode ? '节点属性' : '边属性';
+  $('itemId').textContent = isNode ? row.label : (row.source_label + '→' + row.target_label);
+  var conf = row.confidence_auto;
+  var html = '';
+
+  html += '<section class="signal-block"><div class="block-title">' +
+    '<span>自动判定信号</span></div>';
+  var sigs = row.triage_signals || [];
+  html += sigs.length ? sigs.map(function (sg) {
+    var extra = Object.keys(sg).filter(function (k) { return k !== 'code'; })
+      .map(function (k) {
+        var v = sg[k];
+        return k + '=' + (typeof v === 'number' ? (+v).toFixed(3) : JSON.stringify(v));
+      }).join('  ');
+    return '<div class="signal-row"><b>' + esc(sg.code) + '</b><em>' + esc(extra) + '</em></div>';
+  }).join('') : '<div class="signal-row"><em>无信号（高置信）</em></div>';
+  html += '<div class="conf-meter"><span style="width:' +
+    Math.round((conf == null ? 0 : conf) * 100) + '%"></span></div>';
+  html += '<div style="margin-top:5px;color:var(--faint);font:600 9px var(--mono)">CONFIDENCE ' +
+    (conf == null ? '—' : (+conf).toFixed(4)) + '</div></section>';
+
+  if (isNode) {
+    html += kv([
+      ['panoid', row.panoid],
+      ['lat / lon', row.lat.toFixed(6) + ', ' + row.lon.toFixed(6)],
+      ['走廊', row.corridor_name || '—'],
+      ['走廊来源', row.corridor_source_auto],
+      ['吸附距离 m', row.snap_distance_m_auto],
+      ['孤儿', row.is_orphan ? '是' : '否'],
+      ['人工覆盖', row.corridor_overridden ? '走廊已改' : '—'],
+    ]).replace('<dl', '<dl style="padding:11px 14px"');
+  } else {
+    html += kv([
+      ['来源', row.origin],
+      ['欧氏距离 m', row.euclid_distance_m_auto],
+      ['路网距离 m', row.road_distance_m_auto],
+      ['绕路比', row.detour_ratio_auto],
+      ['有道路可通', row.road_connected ? '是' : '否'],
+      ['高花费边', row.high_cost ? ('是 · ' + (row.cost_class || '')) : '否'],
+      ['走线点数', row.road_path ? row.road_path.length : '—'],
+      ['证据', row.evidence ? JSON.stringify(row.evidence) : '—'],
+      ['人工裁定', row.verdict || '—'],
+    ]).replace('<dl', '<dl style="padding:11px 14px"');
+  }
+  html += '<section class="field-block"><div class="block-title">' +
+    '<span>只读浏览</span></div><p style="margin:0;color:var(--faint);font-size:11px">' +
+    '这是结果浏览器，不提供修改。标注与复核在本地的 tool/annotation 里做。</p></section>';
+  body.innerHTML = html;
+  drawGroundImages();
+}
+
+
+
+
+
+
+function setEdgeMode(mode) {
+  S.edgeMode = mode;
+  $('edgeRoad').classList.toggle('active', mode === 'road');
+  $('edgeStraight').classList.toggle('active', mode === 'straight');
+  if (S.scene) drawGraph();
+}
+
+/* ---------- 底图：OSM 电子地图瓦片 ------------------------------------ */
+function setBasemap(mode) {
+  S.basemap = mode;
+  $('satelliteStage').classList.toggle('map-mode', mode === 'map');
+  $('baseSat').classList.toggle('active', mode === 'satellite');
+  $('baseMap').classList.toggle('active', mode === 'map');
+  if (mode === 'map') renderMapTiles();
+}
+function renderMapTiles() {
+  if (!S.scene) return;
+  var c = tileCenter(S.scene.scene.satellite_path);
+  if (!c) return;
+  var layer = $('mapTileLayer');
+  layer.innerHTML = '';
+  var z = S.mapZoom;
+  var s = 256 * Math.pow(2, z);
+  var x = (c[1] + 180) / 360 * s;
+  var sy = Math.sin(c[0] * Math.PI / 180);
+  var y = (0.5 - Math.log((1 + sy) / (1 - sy)) / (4 * Math.PI)) * s;
+  var tx = Math.floor(x / 256), ty = Math.floor(y / 256);
+  var ox = x - tx * 256, oy = y - ty * 256;
+  var box = $('satelliteStage').getBoundingClientRect();
+  var cx = box.width / 2, cy = box.height / 2;
+  for (var dx = -2; dx <= 2; dx++) {
+    for (var dy = -2; dy <= 2; dy++) {
+      var img = document.createElement('img');
+      img.src = 'https://tile.openstreetmap.org/' + z + '/' + (tx + dx) + '/' + (ty + dy) + '.png';
+      img.loading = 'lazy';
+      img.style.left = (cx - ox + dx * 256) + 'px';
+      img.style.top = (cy - oy + dy * 256) + 'px';
+      layer.appendChild(img);
+    }
+  }
+}
+
+/* ---------- 统计与进度 ------------------------------------------------ */
+function refreshStats() {
+  return api('/api/stats').then(function (st) {
+    S.boot = st;
+    $('statScenes').textContent = st.scenes.toLocaleString();
+    $('statItems').textContent = st.nodes.toLocaleString() + ' 节点';
+    $('statQueue').textContent = st.edges.toLocaleString() + ' 边';
+    var o = st.origins || {};
+    var chain = o.corridor_chain || 0, inter = o.intersection || 0, bridge = o.bridge || 0;
+    var tot = chain + inter + bridge || 1;
+    $('countChain').textContent = chain.toLocaleString();
+    $('countInter').textContent = inter.toLocaleString();
+    $('countBridge').textContent = bridge.toLocaleString();
+    $('countCost').textContent = (st.high_cost || 0).toLocaleString();
+    $('progressLabel').textContent =
+      '走廊链 ' + Math.round(chain / tot * 100) + '%';
+    // 进度条在这里表示「边有多少来自真实道路走廊」，而不是复核进度
+    $('progressBar').style.width = (chain / tot * 100) + '%';
+    if ($('datasetLabel')) $('datasetLabel').textContent = '';
+  }).catch(function () {});
+}
+
+/* ---------- 启动与键盘 ------------------------------------------------ */
+function boot() {
+  api('/api/bootstrap').then(function (b) {
+    var sel = $('cityFilter');
+    b.cities.forEach(function (c) {
+      var o = document.createElement('option');
+      o.value = o.textContent = c;
+      sel.appendChild(o);
+    });
+    return refreshStats();
+  }).then(function () { setMode('scenes'); });
+
+  ['cityFilter', 'orderFilter', 'minNodes', 'editedFilter',
+   'fOrphan', 'fHighCost', 'fFragmented',
+   'tierFilter', 'kindFilter', 'signalFilter', 'showReviewedSel'].forEach(function (id) {
+    var el = $(id);
+    if (el) el.onchange = function () { S.offset = 0; loadList(); };
+  });
+  $('modeScenes').onclick = function () { setMode('scenes'); };
+  $('modeQueue').onclick = function () { setMode('queue'); };
+  $('pagePrev').onclick = function () { page(-1); };
+  $('pageNext').onclick = function () { page(1); };
+  $('searchInput').oninput = function () {
+    clearTimeout(boot._t);
+    boot._t = setTimeout(function () {
+      if (S.mode === 'queue') applySearch();
+      else { S.offset = 0; loadScenes(true); }
+    }, 250);
+  };
+  $('previousButton').onclick = function () { navigate(-1); };
+  $('nextButton').onclick = function () { navigate(1); };
+  $('edgeRoad').onclick = function () { setEdgeMode('road'); };
+  $('edgeStraight').onclick = function () { setEdgeMode('straight'); };
+  $('baseSat').onclick = function () { setBasemap('satellite'); };
+  $('baseMap').onclick = function () { setBasemap('map'); };
+  $('mapZoomIn').onclick = function () { S.mapZoom = Math.min(19, S.mapZoom + 1); renderMapTiles(); };
+  $('mapZoomOut').onclick = function () { S.mapZoom = Math.max(13, S.mapZoom - 1); renderMapTiles(); };
+  $('helpButton').onclick = function () { $('helpDialog').showModal(); };
+  $('helpClose').onclick = function () { $('helpDialog').close(); };
+  $('lightbox').onclick = function () { this.classList.remove('open'); };
+  Array.prototype.forEach.call(document.querySelectorAll('.ground-stage'), function (b) {
+    b.onclick = function () {
+      var img = b.querySelector('img');
+      if (!img || !img.getAttribute('src')) return;
+      $('lightboxImage').src = img.src;
+      $('lightbox').classList.add('open');
+    };
+  });
+
+  document.addEventListener('keydown', function (ev) {
+    var tag = (ev.target.tagName || '').toLowerCase();
+    if (tag === 'input' || tag === 'textarea' || tag === 'select') return;
+    if (ev.metaKey || ev.ctrlKey || ev.altKey) return;
+    var k = ev.key.toLowerCase();
+    if (k === '?') { $('helpDialog').showModal(); ev.preventDefault(); return; }
+    if (k === 'j') { navigate(1); ev.preventDefault(); }
+    else if (k === 'k') { navigate(-1); ev.preventDefault(); }
+    else if (k === 'b') { setBasemap(S.basemap === 'map' ? 'satellite' : 'map'); ev.preventDefault(); }
+    else if (k === '[') { page(-1); ev.preventDefault(); }
+    else if (k === ']') { page(1); ev.preventDefault(); }
+    else if (k === 'q') { setMode(S.mode === 'queue' ? 'scenes' : 'queue'); ev.preventDefault(); }
+    else if (k === 'e') { setEdgeMode(S.edgeMode === 'road' ? 'straight' : 'road'); ev.preventDefault(); }
+  });
+}
+document.addEventListener('DOMContentLoaded', boot);

web/index.html

@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>SetVL Node Graph Viewer</title>
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<div class="topographic-grid" aria-hidden="true"></div>
+
+<header class="topbar">
+  <div class="brand">
+    <div class="brand-mark" aria-hidden="true">SG</div>
+    <div>
+      <h1>Node Graph Viewer</h1>
+      <p>SetVL · 只读浏览</p>
+    </div>
+  </div>
+  <div class="run-status">
+    <div><span>Scenes</span><strong id="statScenes">—</strong></div>
+    <div><span>Items</span><strong id="statItems">—</strong></div>
+    <div><span>Queue T1+2</span><strong id="statQueue">—</strong></div>
+  </div>
+  <div class="reviewer-field">
+    <label>Dataset</label>
+    <span id="datasetLabel" style="font:600 11px var(--mono);color:var(--cyan)">—</span>
+  </div>
+  <button class="icon-button" id="helpButton" title="帮助与快捷键" aria-label="帮助与快捷键">?</button>
+</header>
+
+<section class="progress-strip" aria-label="Graph composition">
+  <div class="progress-copy">
+    <span>Edges by origin</span>
+    <strong id="progressLabel">—</strong>
+  </div>
+  <div class="progress-track"><span id="progressBar"></span></div>
+  <div class="progress-counters">
+    <div><b id="countChain">—</b> 走廊链</div>
+    <div><b id="countInter">—</b> 路口</div>
+    <div><b id="countBridge">—</b> 桥接</div>
+    <div><b id="countCost">—</b> 高花费</div>
+  </div>
+</section>
+
+<main class="app-shell">
+  <!-- 01 队列 --------------------------------------------------------->
+  <aside class="queue-panel">
+    <div class="panel-heading">
+      <p class="section-index">01 / BROWSE</p>
+      <h2 id="panelTitle">场景浏览</h2>
+    </div>
+    <div class="mode-switch" role="group" aria-label="列表模式">
+      <button type="button" id="modeScenes" class="active">全部场景</button>
+      <button type="button" id="modeQueue">带信号的</button>
+    </div>
+    <div class="filter-stack">
+      <div class="search-wrap">
+        <input id="searchInput" type="search" placeholder="scene_id 片段、城市…">
+      </div>
+      <div class="filter-grid" id="sceneFilters">
+        <label><span>City</span>
+          <select id="cityFilter"><option value="">All cities</option></select>
+        </label>
+        <label><span>Sort</span>
+          <select id="orderFilter">
+            <option value="scene_id">按 ID</option>
+            <option value="nodes_desc">节点多→少</option>
+            <option value="nodes_asc">节点少→多</option>
+          </select>
+        </label>
+        <label><span>Min nodes</span>
+          <input id="minNodes" type="number" min="1" max="38" placeholder="—">
+        </label>
+        <label><span>状态</span>
+          <select id="editedFilter">
+            <option value="">全部</option>
+            <option value="1">已人工改过</option>
+            <option value="0">未改动</option>
+          </select>
+        </label>
+      </div>
+      <div class="chip-row" id="sceneChips">
+        <label class="chip"><input id="fOrphan" type="checkbox"> 含孤儿</label>
+        <label class="chip"><input id="fHighCost" type="checkbox"> 含高花费边</label>
+        <label class="chip"><input id="fFragmented" type="checkbox"> 路网碎片化</label>
+      </div>
+      <div class="filter-grid" id="queueFilters" hidden>
+        <label><span>Kind</span>
+          <select id="kindFilter">
+            <option value="">节点 + 边</option>
+            <option value="node">只看节点</option>
+            <option value="edge">只看边</option>
+          </select>
+        </label>
+        <label><span>Tier</span>
+          <select id="tierFilter">
+            <option value="">全部</option>
+            <option value="1">Tier 1 必须</option>
+            <option value="2">Tier 2 优先</option>
+            <option value="3">Tier 3 抽查</option>
+          </select>
+        </label>
+        <label><span>Signal</span>
+          <select id="signalFilter">
+            <option value="">全部信号</option>
+            <option value="A1">A1 孤儿</option>
+            <option value="A2">A2 吸附偏远</option>
+            <option value="A3">A3 无路名</option>
+            <option value="A4">A4 归属歧义</option>
+            <option value="E1">E1 无道路通路</option>
+            <option value="E2">E2 绕路超限</option>
+            <option value="E3">E3 绕路偏大</option>
+            <option value="E4">E4 选边并列</option>
+          </select>
+        </label>
+        <label><span>已复核</span>
+          <select id="showReviewedSel">
+            <option value="">不含</option>
+            <option value="1">含已复核</option>
+          </select>
+        </label>
+      </div>
+    </div>
+    <div class="queue-list" id="queueList" role="listbox" aria-label="Review queue"></div>
+    <div class="queue-footer">
+      <button class="quiet-button" id="pagePrev">←</button>
+      <button class="quiet-button" id="previousButton"><kbd>K</kbd> Prev</button>
+      <button class="quiet-button" id="nextButton">Next <kbd>J</kbd></button>
+      <button class="quiet-button" id="pageNext">→</button>
+    </div>
+  </aside>
+
+  <!-- 02 证据 --------------------------------------------------------->
+  <section class="evidence-panel">
+    <div class="scene-header">
+      <div>
+        <div class="scene-title-row">
+          <h2 id="sceneTitle">未选择</h2>
+          <span class="scene-city" id="sceneCity">—</span>
+        </div>
+        <p class="scene-id" id="sceneId">—</p>
+      </div>
+      <div class="scene-metrics">
+        <div><span>Nodes</span><strong id="mNodes">—</strong></div>
+        <div><span>Edges</span><strong id="mEdges">—</strong></div>
+        <div><span>Corridors</span><strong id="mCorridors">—</strong></div>
+        <div><span>Orphans</span><strong id="mOrphans">—</strong></div>
+      </div>
+    </div>
+
+    <div class="evidence-grid">
+      <article class="image-card">
+        <div class="image-card-head">
+          <span class="image-kind">Scene Graph</span>
+          <div class="map-card-tools">
+            <div class="basemap-switch" role="group" aria-label="边的画法">
+              <button type="button" id="edgeRoad" class="active" title="沿道路走线">ROAD</button>
+              <button type="button" id="edgeStraight" title="直线连接">LINE</button>
+            </div>
+            <div class="basemap-switch" role="group" aria-label="底图切换">
+              <button type="button" id="baseSat" class="active">SAT</button>
+              <button type="button" id="baseMap">MAP</button>
+            </div>
+            <div class="map-controls" aria-label="电子地图缩放">
+              <button type="button" id="mapZoomIn" title="放大">+</button>
+              <button type="button" id="mapZoomOut" title="缩小">−</button>
+            </div>
+          </div>
+        </div>
+        <div class="image-stage satellite-stage" id="satelliteStage">
+          <img id="satelliteImage" alt="satellite">
+          <div class="street-map" id="streetMap" aria-hidden="true">
+            <div class="map-tile-layer" id="mapTileLayer"></div>
+          </div>
+          <svg class="graph-svg" id="graphSvg" viewBox="0 0 400 400" preserveAspectRatio="none"></svg>
+        </div>
+        <div class="image-caption">
+          <span class="legend">
+            <span><i class="lg-chain"></i>走廊链</span>
+            <span><i class="lg-inter"></i>路口边</span>
+            <span><i class="lg-bridge"></i>桥接边</span>
+            <span><i class="lg-road" style="border-top:3px dashed var(--paper);background:none"></i>高花费边</span>
+            <span><i class="lg-orphan"></i>孤儿</span>
+          </span>
+        </div>
+      </article>
+
+      <div class="ground-stack">
+        <article class="image-card ground-card">
+          <div class="image-card-head compact">
+            <div class="node-label anchor-label" id="anchorBadge">—</div>
+            <span class="image-kind" id="anchorKind">Node</span>
+          </div>
+          <button type="button" class="image-stage ground-stage" data-role="anchor" aria-label="放大街景">
+            <img id="anchorImage" alt="ground view">
+          </button>
+          <div class="image-caption mono" id="anchorCaption">—</div>
+        </article>
+        <article class="image-card ground-card" id="targetCard">
+          <div class="image-card-head compact">
+            <div class="node-label target-label" id="targetBadge">—</div>
+            <span class="image-kind">Target</span>
+          </div>
+          <button type="button" class="image-stage ground-stage" data-role="target" aria-label="放大街景">
+            <img id="targetImage" alt="ground view">
+          </button>
+          <div class="image-caption mono" id="targetCaption">—</div>
+        </article>
+      </div>
+    </div>
+
+    <div class="context-rail">
+      <div>
+        <span class="image-kind">Scene Nodes</span>
+        <p>点击可切换到该节点</p>
+      </div>
+      <div class="node-thumbnails" id="nodeThumbnails"></div>
+      <div class="corridor-legend" id="corridorLegend"></div>
+    </div>
+
+    <section class="graph-card" aria-labelledby="graphTitle">
+      <div class="graph-head">
+        <div>
+          <p class="section-index">SCENE ADJACENCY</p>
+          <h3 id="graphTitle">节点邻接矩阵</h3>
+        </div>
+        <div class="graph-counts">
+          <span><b id="gChain">—</b> chain</span>
+          <span><b id="gInter">—</b> inter</span>
+          <span><b id="gBridge">—</b> bridge</span>
+        </div>
+      </div>
+      <p class="graph-rule">每一格是一条无向边，颜色对应它的来源。点击格子或右侧列表可直接检查该条边。</p>
+      <div class="graph-body">
+        <div><table class="adjacency-table" id="adjacencyTable"></table></div>
+        <div class="graph-edge-list" id="edgeList"></div>
+      </div>
+    </section>
+  </section>
+
+  <!-- 03 判定 --------------------------------------------------------->
+  <aside class="inspector-panel">
+    <div class="panel-heading inspector-heading">
+      <div>
+        <p class="section-index">03 / PROPERTIES</p>
+        <h2 id="decisionTitle">属性</h2>
+      </div>
+      <span class="relation-id" id="itemId">—</span>
+    </div>
+    <div id="inspectorBody"><p class="empty-note">从左侧队列选一条，或在图上点节点/边。</p></div>
+  </aside>
+</main>
+
+<dialog id="helpDialog">
+  <div class="dialog-head">
+    <h3>快捷键</h3>
+    <button class="icon-button" id="helpClose" aria-label="关闭">×</button>
+  </div>
+  <div class="dialog-body">
+    <div class="shortcut-grid">
+      <kbd>J</kbd><span>队列下一条</span>
+      <kbd>K</kbd><span>队列上一条</span>
+      <kbd>B</kbd><span>切换卫星图 / 电子地图</span>
+      <kbd>E</kbd><span>切换边的画法：沿路走线 / 直线</span>
+      <kbd>[</kbd> <kbd>]</kbd><span>列表上一页 / 下一页</span>
+      <kbd>Q</kbd><span>切换「全部场景」/「复核队列」</span>
+      <kbd>?</kbd><span>打开本帮助</span>
+    </div>
+  </div>
+</dialog>
+
+<div class="lightbox" id="lightbox"><img id="lightboxImage" alt=""></div>
+<div id="toast" class="toast"></div>
+<script src="app.js"></script>
+</body>
+</html>

web/styles.css

@@ -0,0 +1,370 @@
+/* SetVL node graph 复核台
+ *
+ * 视觉系统沿用上一代 pair 复核台：同一套 topographic/asphalt 配色、
+ * DIN Condensed 标题、三栏骨架。变的只是数据模型——从「一对节点的关系」
+ * 变成「一张图上的节点与边」。
+ */
+:root {
+  --ink: #0d1211;
+  --asphalt: #141a18;
+  --panel: #1a211f;
+  --panel-raised: #202926;
+  --line: #34403c;
+  --line-soft: #29332f;
+  --paper: #e8e5da;
+  --muted: #9aa69f;
+  --faint: #66736d;
+  --signal: #f1a43c;
+  --signal-dark: #a86112;
+  --cyan: #68c8c0;
+  --yes: #70c79b;
+  --no: #e27667;
+  --uncertain: #d0b87b;
+  --anchor: #ef5b4d;
+  --target: #3c8ee8;
+  /* 边的三种来源，沿用旧版的语义配色逻辑 */
+  --chain: #68c8c0;
+  --intersection: #f1a43c;
+  --bridge: #b8a2e0;
+  --road: #70c79b;
+  --radius: 4px;
+  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
+  --display: "DIN Condensed", "Avenir Next Condensed", "Franklin Gothic Condensed", sans-serif;
+  --body: "Avenir Next", "Helvetica Neue", sans-serif;
+  --mono: "SFMono-Regular", "Roboto Mono", "Courier New", monospace;
+}
+
+* { box-sizing: border-box; }
+html, body { height: 100%; }
+body {
+  margin: 0; overflow: hidden; color: var(--paper);
+  background: radial-gradient(circle at 74% 8%, rgba(87,126,111,.15), transparent 28rem), var(--ink);
+  font-family: var(--body); font-size: 14px;
+}
+button, input, select, textarea { font: inherit; }
+button { color: inherit; }
+
+.topographic-grid {
+  position: fixed; inset: 0; pointer-events: none; opacity: .24;
+  background-image:
+    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
+  background-size: 42px 42px;
+  mask-image: linear-gradient(to bottom, black, transparent 72%);
+}
+
+/* ---------------------------------------------------------------- 顶栏 */
+.topbar {
+  height: 70px; display: grid;
+  grid-template-columns: minmax(340px, 1fr) auto minmax(250px, 320px) 38px;
+  align-items: center; gap: 18px; padding: 0 20px;
+  border-bottom: 1px solid var(--line); background: rgba(20,26,24,.96);
+  position: relative; z-index: 5;
+}
+.brand { display: flex; align-items: center; gap: 13px; }
+.brand-mark {
+  width: 34px; height: 34px; display: grid; place-items: center;
+  border: 1px solid var(--signal); color: var(--signal);
+  font: 800 15px var(--mono);
+}
+.brand h1 { margin: 0; font: 600 19px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
+.brand p { margin: 3px 0 0; color: var(--faint); font: 600 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
+.run-status { display: flex; gap: 20px; }
+.run-status div { text-align: right; }
+.run-status span { display: block; color: var(--faint); font: 600 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
+.run-status strong { font: 600 17px var(--display); letter-spacing: .04em; }
+.reviewer-field { display: flex; flex-direction: column; gap: 4px; }
+.reviewer-field label { color: var(--faint); font: 600 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
+.reviewer-field input {
+  background: var(--ink); border: 1px solid var(--line); color: var(--paper);
+  padding: 6px 9px; border-radius: var(--radius); font: 600 12px var(--mono);
+}
+.reviewer-field input:focus { outline: none; border-color: var(--signal); }
+.icon-button {
+  width: 30px; height: 30px; border: 1px solid var(--line); background: transparent;
+  color: var(--muted); cursor: pointer; border-radius: var(--radius); font: 700 14px var(--mono);
+}
+.icon-button:hover { border-color: var(--signal); color: var(--signal); }
+
+/* ---------------------------------------------------------------- 进度条 */
+.progress-strip {
+  display: grid; grid-template-columns: 210px minmax(180px, 1fr) auto;
+  align-items: center; gap: 16px; padding: 9px 20px;
+  border-bottom: 1px solid var(--line); background: rgba(16,21,19,.9);
+}
+.progress-copy span { color: var(--faint); font: 600 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
+.progress-copy strong { display: block; font: 600 15px var(--display); letter-spacing: .04em; }
+.progress-track { height: 3px; background: var(--line-soft); overflow: hidden; }
+.progress-track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--signal), #ffd38b); transition: width .45s ease; }
+.progress-counters { display: flex; gap: 14px; color: var(--faint); font: 600 10px var(--mono); text-transform: uppercase; }
+.progress-counters b { color: var(--paper); }
+
+/* ---------------------------------------------------------------- 三栏 */
+.app-shell {
+  height: calc(100vh - 70px - 41px);
+  display: grid; grid-template-columns: 294px minmax(600px, 1fr) 350px;
+  position: relative; z-index: 2;
+}
+.queue-panel, .inspector-panel, .evidence-panel { min-height: 0; }
+.queue-panel, .inspector-panel { background: rgba(20,26,24,.96); }
+.queue-panel { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
+.inspector-panel { border-left: 1px solid var(--line); overflow-y: auto; }
+.evidence-panel { overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
+
+.panel-heading { padding: 14px 16px 11px; border-bottom: 1px solid var(--line); }
+.panel-heading h2 { margin: 2px 0 0; font: 600 16px var(--display); letter-spacing: .05em; text-transform: uppercase; }
+.section-index { margin: 0; color: var(--signal); font: 700 9px var(--mono); letter-spacing: .16em; }
+.inspector-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
+.relation-id { color: var(--muted); font: 700 12px var(--mono); }
+
+/* ---------------------------------------------------------------- 队列 */
+.mode-switch { display: flex; border-bottom: 1px solid var(--line); }
+.mode-switch button {
+  flex: 1; background: transparent; border: 0; padding: 8px; cursor: pointer;
+  color: var(--faint); font: 700 10px var(--mono); letter-spacing: .08em;
+  border-bottom: 2px solid transparent;
+}
+.mode-switch button.active { color: var(--signal); border-bottom-color: var(--signal); }
+.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
+.chip {
+  display: flex; align-items: center; gap: 4px; padding: 3px 7px; cursor: pointer;
+  border: 1px solid var(--line); color: var(--faint); font: 600 9px var(--mono);
+}
+.chip:hover { border-color: var(--muted); }
+.filter-grid input[type=number] {
+  background: var(--ink); border: 1px solid var(--line); color: var(--paper);
+  padding: 5px 6px; border-radius: var(--radius); font: 500 11px var(--body); width: 100%;
+}
+.scene-item-meta { display: flex; gap: 8px; flex-wrap: wrap; }
+.badge { padding: 0 4px; font: 700 9px var(--mono); border: 1px solid; }
+.badge.edited { color: var(--yes); border-color: var(--yes); }
+.badge.orphan { color: var(--anchor); border-color: var(--anchor); }
+.badge.cost { color: var(--uncertain); border-color: var(--uncertain); }
+.badge.frag { color: var(--no); border-color: var(--no); }
+
+.filter-stack { padding: 11px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
+.search-wrap { position: relative; }
+.search-wrap input {
+  width: 100%; background: var(--ink); border: 1px solid var(--line); color: var(--paper);
+  padding: 7px 9px; border-radius: var(--radius); font: 500 12px var(--body);
+}
+.search-wrap input:focus { outline: none; border-color: var(--signal); }
+.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
+.filter-grid label { display: flex; flex-direction: column; gap: 3px; }
+.filter-grid span { color: var(--faint); font: 600 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
+.filter-grid select {
+  background: var(--ink); border: 1px solid var(--line); color: var(--paper);
+  padding: 5px 6px; border-radius: var(--radius); font: 500 11px var(--body);
+}
+.filter-grid select:focus { outline: none; border-color: var(--signal); }
+.queue-list { flex: 1; overflow-y: auto; }
+.queue-item {
+  width: 100%; text-align: left; border: 0; border-left: 2px solid transparent;
+  border-bottom: 1px solid var(--line-soft); background: transparent;
+  padding: 10px 13px; cursor: pointer; position: relative; display: block;
+}
+.queue-item:hover { background: rgba(255,255,255,.025); }
+.queue-item.active { background: rgba(241,164,60,.075); border-left-color: var(--signal); }
+.queue-item.reviewed::after { content: ""; position: absolute; right: 9px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--yes); }
+.queue-item.adjudication::after { content: ""; position: absolute; right: 9px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--no); }
+.queue-top { display: flex; align-items: baseline; gap: 8px; }
+.queue-top strong { color: var(--paper); font: 650 12px var(--mono); }
+.queue-top span { color: var(--muted); font-size: 11px; margin-left: auto; }
+.queue-meta { margin-top: 7px; display: flex; align-items: center; gap: 5px; color: var(--faint); font: 600 9px var(--mono); flex-wrap: wrap; }
+.tier-pill { padding: 1px 5px; color: var(--ink); font: 800 9px var(--mono); }
+.tier-1 { background: var(--no); } .tier-2 { background: var(--signal); } .tier-3 { background: var(--uncertain); }
+.sig-code { color: var(--signal); font-weight: 800; }
+.queue-scene { margin-top: 4px; color: #56635c; font: 500 9px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.queue-footer { padding: 9px 13px; border-top: 1px solid var(--line); display: flex; gap: 7px; }
+.quiet-button {
+  flex: 1; background: transparent; border: 1px solid var(--line); color: var(--muted);
+  padding: 6px; cursor: pointer; border-radius: var(--radius); font: 600 10px var(--mono);
+}
+.quiet-button:hover:not(:disabled) { border-color: var(--signal); color: var(--signal); }
+.quiet-button:disabled { opacity: .35; cursor: default; }
+kbd {
+  display: inline-block; padding: 0 4px; margin: 0 2px; border: 1px solid var(--line);
+  border-bottom-width: 2px; border-radius: 3px; background: var(--ink);
+  font: 700 9px var(--mono); color: var(--muted);
+}
+
+/* ---------------------------------------------------------------- 证据区 */
+.scene-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
+.scene-title-row { display: flex; align-items: baseline; gap: 10px; }
+.scene-title-row h2 { margin: 0; font: 600 20px var(--display); letter-spacing: .04em; }
+.scene-city { color: var(--cyan); font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
+.scene-id { margin: 3px 0 0; color: var(--faint); font: 500 10px var(--mono); }
+.scene-metrics { display: flex; gap: 16px; }
+.scene-metrics div { text-align: right; }
+.scene-metrics span { display: block; color: var(--faint); font: 600 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
+.scene-metrics strong { font: 600 15px var(--display); }
+
+.evidence-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(260px, 380px); gap: 14px; align-items: start; }
+.image-card { border: 1px solid var(--line); background: var(--panel); }
+.image-card-head { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-bottom: 1px solid var(--line-soft); }
+.image-card-head.compact { padding: 6px 9px; }
+.image-kind { color: var(--faint); font: 700 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
+.map-card-tools { margin-left: auto; display: flex; align-items: center; gap: 9px; }
+.basemap-switch { display: flex; border: 1px solid var(--line); }
+.basemap-switch button {
+  background: transparent; border: 0; padding: 3px 9px; cursor: pointer;
+  color: var(--faint); font: 700 9px var(--mono); letter-spacing: .08em;
+}
+.basemap-switch button.active { background: var(--signal); color: var(--ink); }
+.legend { display: flex; gap: 9px; }
+.legend i { display: inline-block; width: 12px; height: 2px; margin-right: 3px; vertical-align: middle; }
+.legend span { color: var(--faint); font: 600 8px var(--mono); white-space: nowrap; }
+.lg-chain { background: var(--chain); } .lg-inter { background: var(--intersection); }
+.lg-bridge { background: var(--bridge); } .lg-road { background: var(--road); }
+.lg-orphan { width: 7px !important; height: 7px !important; border-radius: 50%; background: var(--anchor); }
+
+.image-stage { display: block; width: 100%; padding: 0; border: 0; background: #0b0e0d; position: relative; overflow: hidden; }
+.image-stage > img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.satellite-stage { aspect-ratio: 1/1; cursor: crosshair; }
+.ground-stage { aspect-ratio: 16/8.3; cursor: zoom-in; }
+.ground-stage:hover > img { filter: brightness(1.06); }
+.graph-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+.street-map { display: none; position: absolute; inset: 0; z-index: 1; background: #d7d5cb; }
+.satellite-stage.map-mode .street-map { display: block; }
+.map-tile-layer { position: absolute; inset: 0; }
+.map-tile-layer img { position: absolute; width: 256px; height: 256px; }
+.map-controls { display: flex; border: 1px solid var(--line); }
+.map-controls button { background: transparent; border: 0; width: 22px; cursor: pointer; color: var(--muted); font: 700 12px var(--mono); }
+.map-controls button:hover { color: var(--signal); }
+.image-caption { min-height: 34px; padding: 8px 11px; display: flex; justify-content: space-between; gap: 10px; color: var(--faint); border-top: 1px solid var(--line-soft); font: 600 9px var(--mono); }
+.image-caption.mono { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.ground-stack { display: grid; grid-template-rows: auto auto; gap: 12px; }
+.node-label { width: 29px; height: 29px; display: grid; place-items: center; font: 800 14px var(--mono); border: 1px solid; }
+.anchor-label { color: var(--anchor); border-color: var(--anchor); background: rgba(239,91,77,.1); }
+.target-label { color: var(--target); border-color: var(--target); background: rgba(60,142,232,.1); }
+
+.context-rail {
+  min-height: 70px; display: grid; grid-template-columns: 160px 1fr auto;
+  align-items: center; gap: 14px; padding: 10px 12px;
+  border: 1px solid var(--line); background: var(--panel);
+}
+.context-rail span.image-kind { display: block; }
+.context-rail p { margin: 3px 0 0; color: var(--faint); font-size: 10px; }
+.node-thumbnails { display: flex; gap: 5px; flex-wrap: wrap; }
+.node-chip {
+  width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer;
+  border: 1px solid var(--line); background: var(--ink); color: var(--muted);
+  font: 700 11px var(--mono);
+}
+.node-chip:hover { border-color: var(--signal); }
+.node-chip.active { border-color: var(--signal); color: var(--signal); background: rgba(241,164,60,.12); }
+.node-chip.orphan { border-color: var(--anchor); color: var(--anchor); }
+.node-chip.reviewed::after { content: "·"; position: absolute; }
+.corridor-legend { display: flex; flex-direction: column; gap: 3px; max-height: 62px; overflow-y: auto; }
+.corridor-legend div { display: flex; align-items: center; gap: 5px; color: var(--muted); font: 600 9px var(--mono); white-space: nowrap; }
+.corridor-legend i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
+
+/* ---------------------------------------------------------------- 邻接矩阵 */
+.graph-card { border: 1px solid var(--line); background: var(--panel); }
+.graph-head { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
+.graph-head h3 { margin: 2px 0 0; font: 600 15px var(--display); letter-spacing: .04em; text-transform: uppercase; }
+.graph-counts { margin-left: auto; display: flex; gap: 12px; color: var(--faint); font: 600 9px var(--mono); text-transform: uppercase; }
+.graph-counts b { color: var(--paper); }
+.graph-rule { margin: 0; padding: 8px 12px; color: var(--faint); font-size: 10px; border-bottom: 1px solid var(--line-soft); }
+.graph-body { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 11px 12px; align-items: start; }
+.adjacency-table { border-collapse: collapse; font: 700 10px var(--mono); }
+.adjacency-table th, .adjacency-table td {
+  width: 21px; height: 21px; text-align: center; border: 1px solid var(--line-soft); color: var(--faint);
+}
+.adjacency-table td.edge { cursor: pointer; }
+.adjacency-table td.e-chain { background: rgba(104,200,192,.3); color: var(--paper); }
+.adjacency-table td.e-intersection { background: rgba(241,164,60,.3); color: var(--paper); }
+.adjacency-table td.e-bridge { background: rgba(184,162,224,.3); color: var(--paper); }
+.adjacency-table td.diag { background: var(--line-soft); }
+.adjacency-table td.addable { cursor: cell; color: #3d4a45; }
+.adjacency-table td.addable:hover { background: rgba(104,200,192,.18); color: var(--cyan); }
+.adjacency-table td.rejected { opacity: .4; text-decoration: line-through; }
+.edge-row.rejected { opacity: .45; }
+.cost-tag { color: var(--uncertain); font-weight: 800; letter-spacing: -1px; }
+.adjacency-table td.sel { outline: 2px solid var(--signal); outline-offset: -2px; }
+.graph-edge-list { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
+.edge-row {
+  display: flex; align-items: center; gap: 7px; padding: 3px 6px; cursor: pointer;
+  border: 1px solid transparent; font: 600 10px var(--mono); color: var(--muted);
+}
+.edge-row:hover { background: rgba(255,255,255,.03); }
+.edge-row.sel { border-color: var(--signal); color: var(--paper); }
+.edge-row i { width: 10px; height: 2px; flex: none; }
+.edge-row .len { margin-left: auto; color: var(--faint); }
+
+/* ---------------------------------------------------------------- 判定区 */
+.signal-block { padding: 12px 14px; border-bottom: 1px solid var(--line); }
+.block-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
+.block-title span { color: var(--faint); font: 700 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
+.text-button { background: none; border: 0; color: var(--signal); cursor: pointer; font: 600 10px var(--mono); padding: 0; }
+.signal-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
+.signal-row:last-child { border-bottom: 0; }
+.signal-row b { color: var(--no); font: 800 11px var(--mono); }
+.signal-row em { color: var(--muted); font-style: normal; font: 600 10px var(--mono); }
+.conf-meter { height: 3px; background: var(--line-soft); margin-top: 8px; }
+.conf-meter span { display: block; height: 100%; background: var(--signal); }
+
+.field-block { padding: 12px 14px; border-bottom: 1px solid var(--line); }
+.choice-row { display: flex; gap: 6px; margin-top: 6px; }
+.choice {
+  flex: 1; padding: 7px 4px; cursor: pointer; text-align: center;
+  border: 1px solid var(--line); background: var(--ink); color: var(--muted);
+  font: 700 10px var(--mono); letter-spacing: .05em;
+}
+.choice:hover { border-color: var(--muted); }
+.choice.on-yes { border-color: var(--yes); color: var(--yes); background: rgba(112,199,155,.12); }
+.choice.on-no { border-color: var(--no); color: var(--no); background: rgba(226,118,103,.12); }
+.choice.on-uncertain { border-color: var(--uncertain); color: var(--uncertain); background: rgba(208,184,123,.12); }
+.corridor-picker { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 190px; overflow-y: auto; }
+.corridor-option {
+  display: flex; align-items: center; gap: 7px; padding: 6px 8px; cursor: pointer;
+  border: 1px solid var(--line); background: var(--ink); color: var(--muted);
+  font: 600 11px var(--mono); text-align: left;
+}
+.corridor-option:hover { border-color: var(--muted); }
+.corridor-option.active { border-color: var(--signal); color: var(--paper); background: rgba(241,164,60,.1); }
+.corridor-option i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
+.corridor-option kbd { margin-left: auto; }
+.corridor-option .auto-tag { color: var(--cyan); font-size: 9px; }
+.corridor-option span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.corridor-option .dist-tag { color: var(--faint); font-size: 9px; flex: none; }
+.notes-field { width: 100%; margin-top: 6px; background: var(--ink); border: 1px solid var(--line); color: var(--paper); padding: 7px 9px; border-radius: var(--radius); resize: vertical; min-height: 52px; font: 500 11px var(--body); }
+.notes-field:focus { outline: none; border-color: var(--signal); }
+.commit-row { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
+.primary-button {
+  padding: 9px; cursor: pointer; border: 1px solid var(--signal); background: var(--signal);
+  color: var(--ink); font: 800 11px var(--mono); letter-spacing: .08em; text-transform: uppercase;
+}
+.primary-button:hover { background: #ffc069; }
+.ghost-button {
+  padding: 8px; cursor: pointer; border: 1px solid var(--line); background: transparent;
+  color: var(--muted); font: 700 10px var(--mono); letter-spacing: .06em; text-transform: uppercase;
+}
+.ghost-button:hover { border-color: var(--uncertain); color: var(--uncertain); }
+.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font: 600 10px var(--mono); }
+.kv dt { color: var(--faint); }
+.kv dd { margin: 0; color: var(--muted); word-break: break-all; }
+.revision-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 150px; overflow-y: auto; }
+.revision-list li { padding: 3px 0; border-bottom: 1px solid var(--line-soft); color: var(--faint); font: 500 9px var(--mono); word-break: break-all; }
+
+/* ---------------------------------------------------------------- 浮层 */
+dialog { border: 1px solid var(--line); background: var(--panel); color: var(--paper); padding: 0; box-shadow: var(--shadow); }
+dialog::backdrop { background: rgba(6,9,8,.72); }
+.dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--line); }
+.dialog-head h3 { margin: 0; font: 600 16px var(--display); letter-spacing: .05em; text-transform: uppercase; }
+.dialog-body { padding: 14px 16px; max-width: 520px; }
+.shortcut-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: baseline; font-size: 12px; }
+.shortcut-grid span { color: var(--muted); }
+.lightbox { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; background: rgba(6,9,8,.9); cursor: zoom-out; }
+.lightbox.open { display: grid; }
+.lightbox img { max-width: 92vw; max-height: 92vh; border: 1px solid var(--line); }
+.toast {
+  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 60;
+  padding: 9px 16px; border: 1px solid var(--line); background: var(--panel-raised);
+  color: var(--paper); font: 600 11px var(--mono); opacity: 0; pointer-events: none;
+  transition: opacity .2s ease;
+}
+.toast.show { opacity: 1; }
+.toast.err { border-color: var(--no); color: var(--no); }
+.empty-note { color: var(--faint); font-size: 12px; padding: 16px; }