Upload folder using huggingface_hub

web/app.js

@@ -127,11 +127,15 @@ function renderScenes() {
     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>';
+    // 三行压成两行：城市并进第一行（原来单独占一行只为显示一个词），
+    // 没有徽章时整条 meta 行不渲染，而不是留一个占位的破折号。
+    var name = sc.scene_id.split(':')[1] || sc.scene_id;
+    b.title = sc.scene_id;
     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>';
+      '<div class="queue-top"><strong>' + esc(name) + '</strong>' +
+        '<span>' + sc.node_count + 'n/' + sc.edge_count + 'e</span></div>' +
+      '<div class="queue-sub"><em>' + esc(sc.city) + '</em>' +
+        (badges ? '<span class="queue-badges">' + badges + '</span>' : '') + '</div>';
     b.onclick = function () { openScene(sc.scene_id); };
     list.appendChild(b);
   });
@@ -158,13 +162,74 @@ function setMode(mode) {
   $('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 片段、城市…';
+  syncFilterChrome();
   loadList();
 }
 
+/* ---------- 筛选抽屉与 token ------------------------------------------
+ * 抽屉里的控件收起后就看不见了，所以已激活的项必须在外面留痕：
+ * 一个计数徽标 + 一排可点掉的 token。否则「筛了但忘了筛过」是必然的。
+ */
+var FILTERS = [
+  { id: 'minNodes',        label: '最少节点', mode: 'scenes', type: 'value' },
+  { id: 'editedFilter',    label: '状态',     mode: 'scenes', type: 'select' },
+  { id: 'fOrphan',         label: '含孤儿',   mode: 'scenes', type: 'check' },
+  { id: 'fHighCost',       label: '含高花费边', mode: 'scenes', type: 'check' },
+  { id: 'fFragmented',     label: '路网碎片化', mode: 'scenes', type: 'check' },
+  { id: 'kindFilter',      label: 'Kind',    mode: 'queue',  type: 'select' },
+  { id: 'tierFilter',      label: 'Tier',    mode: 'queue',  type: 'select' },
+  { id: 'signalFilter',    label: 'Signal',  mode: 'queue',  type: 'select' },
+  { id: 'showReviewedSel', label: '已复核',   mode: 'queue',  type: 'select' },
+];
+
+function activeFilters() {
+  return FILTERS.filter(function (f) {
+    if (f.mode !== S.mode) return false;
+    var el = $(f.id);
+    if (!el) return false;
+    return f.type === 'check' ? el.checked : !!String(el.value || '').trim();
+  });
+}
+
+function clearFilter(f) {
+  var el = $(f.id);
+  if (!el) return;
+  if (f.type === 'check') el.checked = false; else el.value = '';
+}
+
+function syncFilterChrome() {
+  var act = activeFilters();
+  var badge = $('filterCount');
+  badge.textContent = act.length;
+  badge.hidden = act.length === 0;
+
+  var row = $('activeTokens');
+  row.innerHTML = '';
+  row.hidden = act.length === 0;
+  act.forEach(function (f) {
+    var el = $(f.id);
+    var shown = f.type === 'check' ? ''
+      : (el.tagName === 'SELECT' ? el.options[el.selectedIndex].textContent : el.value);
+    var b = document.createElement('button');
+    b.type = 'button';
+    b.className = 'token';
+    b.title = '点击取消该筛选';
+    b.innerHTML = esc(f.label) + (shown ? ' <b>' + esc(shown) + '</b>' : '') + ' <i>×</i>';
+    b.onclick = function () { clearFilter(f); S.offset = 0; syncFilterChrome(); loadList(); };
+    row.appendChild(b);
+  });
+}
+
+function toggleDrawer(force) {
+  var btn = $('filterToggle'), box = $('filterDrawer');
+  var open = force != null ? force : box.hidden;
+  box.hidden = !open;
+  btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+}
+
 function loadQueue(keepSelection) {
   return api('/api/queue?' + queueQuery()).then(function (d) {
     S.queue = d.items;
@@ -202,6 +267,11 @@ function itemId(i) { return i.kind + '|' + i.scene_id + '|' + i.item_key; }
 function renderList() {
   if (S.mode === 'queue') renderQueue();
   else renderScenes();
+  var n = (S.mode === 'queue' ? S.filtered : S.scenes).length;
+  var pg = Math.floor(S.offset / S.limit) + 1;
+  $('listCount').textContent = n
+    ? (n + ' 条 · 第 ' + pg + ' 页 · 序号 ' + (S.offset + 1) + '–' + (S.offset + n))
+    : '无结果';
 }
 
 function renderQueue() {
@@ -346,6 +416,116 @@ function drawScene() {
   if (S.basemap === 'map') renderMapTiles();
 }
 
+/* ---------- 重叠边的分离 ----------------------------------------------
+ * 同一条街上常常叠着好几条边：桥接边从 A 直连到 B，而 A-B 之间的走廊链
+ * 正好也沿着同一条路；不同走廊被合并成同一几何时也会完全重合。叠在一起
+ * 后只有最后画的那条可见，颜色就"丢"了一种。
+ *
+ * 判定用真实几何而不是哈希：沿边 A 采样若干点，量它们到边 B 折线的距离，
+ * 若绝大部分点都落在 COINCIDE_TOL 之内，就认为两条边视觉上压在一起。
+ * （早先的版本按「中点+角度」分桶，结果在共享节点处首尾相接的相邻边被
+ * 误判成重叠，全库 83% 的边都被挪开——那不是重叠，是正常的链式连接。）
+ *
+ * 同组的边各自沿法线偏移 (i - (n-1)/2) * SEG_SEP，并排显示。
+ */
+var SEG_SEP = 3.2;          // 相邻两条重合边的间距（raster 单位，400 = 全宽）
+var COINCIDE_TOL = 2.5;     // 视为"压在一起"的垂直距离
+var COINCIDE_FRAC = 0.75;   // 采样点落在容差内的比例门槛
+
+function distToSegment(p, a, b) {
+  var dx = b[0] - a[0], dy = b[1] - a[1];
+  var L2 = dx * dx + dy * dy;
+  var t = L2 ? ((p[0] - a[0]) * dx + (p[1] - a[1]) * dy) / L2 : 0;
+  t = t < 0 ? 0 : (t > 1 ? 1 : t);
+  return Math.hypot(p[0] - (a[0] + t * dx), p[1] - (a[1] + t * dy));
+}
+function distToPolyline(p, pts) {
+  var best = Infinity;
+  for (var i = 0; i + 1 < pts.length; i++) {
+    var d = distToSegment(p, pts[i], pts[i + 1]);
+    if (d < best) best = d;
+  }
+  return best;
+}
+/* 沿折线等距取 n 个点（含两端） */
+function sampleAlong(pts, n) {
+  var segs = [], total = 0;
+  for (var i = 0; i + 1 < pts.length; i++) {
+    var L = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]);
+    segs.push(L); total += L;
+  }
+  if (!total) return [pts[0]];
+  var out = [], step = total / (n - 1);
+  for (var k = 0; k < n; k++) {
+    var want = Math.min(k * step, total), acc = 0, j = 0;
+    while (j < segs.length && acc + segs[j] < want) { acc += segs[j]; j++; }
+    var t = segs[j] ? (want - acc) / segs[j] : 0;
+    out.push([pts[j][0] + (pts[j + 1][0] - pts[j][0]) * t,
+              pts[j][1] + (pts[j + 1][1] - pts[j][1]) * t]);
+  }
+  return out;
+}
+function coincideFraction(a, b) {
+  var pts = sampleAlong(a, 12);
+  var hit = 0;
+  pts.forEach(function (p) { if (distToPolyline(p, b) <= COINCIDE_TOL) hit++; });
+  return hit / pts.length;
+}
+
+/* 返回 edgeIndex -> 偏移量。只有真正重合的边才会拿到非零值。 */
+function planOffsets(polys) {
+  var n = polys.length;
+  var parent = [];
+  for (var i = 0; i < n; i++) parent.push(i);
+  function find(x) { while (parent[x] !== x) { parent[x] = parent[parent[x]]; x = parent[x]; } return x; }
+  function join(x, y) { var a = find(x), b = find(y); if (a !== b) parent[b] = a; }
+
+  for (var i = 0; i < n; i++) {
+    if (!polys[i] || polys[i].length < 2) continue;
+    for (var j = i + 1; j < n; j++) {
+      if (!polys[j] || polys[j].length < 2) continue;
+      // 一条短边完全压在长边上时，只有短→长这个方向比例高，取 max
+      var f = Math.max(coincideFraction(polys[i], polys[j]),
+                       coincideFraction(polys[j], polys[i]));
+      if (f >= COINCIDE_FRAC) join(i, j);
+    }
+  }
+  var groups = {};
+  for (var k = 0; k < n; k++) {
+    if (!polys[k] || polys[k].length < 2) continue;
+    var r = find(k);
+    (groups[r] || (groups[r] = [])).push(k);
+  }
+  var shift = {};
+  Object.keys(groups).forEach(function (g) {
+    var list = groups[g];
+    if (list.length < 2) return;               // 不重合的一条都不动
+    list.sort(function (a, b) { return a - b; });   // 稳定：按边的绘制序
+    list.forEach(function (ei, idx) {
+      shift[ei] = (idx - (list.length - 1) / 2) * SEG_SEP;
+    });
+  });
+  return shift;
+}
+
+/* 按法线方向平移一条折线。每段单独算法线，拐角处取相邻两段的平均，
+   这样折线偏移后不会在拐点裂开。 */
+function offsetPolyline(pts, dist) {
+  if (!dist || pts.length < 2) return pts;
+  var norms = [];
+  for (var i = 0; i + 1 < pts.length; i++) {
+    var dx = pts[i + 1][0] - pts[i][0], dy = pts[i + 1][1] - pts[i][1];
+    var L = Math.hypot(dx, dy) || 1;
+    norms.push([-dy / L, dx / L]);
+  }
+  return pts.map(function (p, i) {
+    var a = norms[Math.max(0, i - 1)], b = norms[Math.min(norms.length - 1, i)];
+    var nx = (a[0] + b[0]) / 2, ny = (a[1] + b[1]) / 2;
+    var L = Math.hypot(nx, ny) || 1;
+    return [p[0] + nx / L * dist, p[1] + ny / L * dist];
+  });
+}
+
 function drawGraph() {
   var svg = $('graphSvg');
   svg.innerHTML = '';
@@ -360,26 +540,39 @@ function drawGraph() {
     return el;
   }
   var sel = S.selected;
-  S.scene.edges.forEach(function (e) {
+
+  // 先把每条边的几何算出来，再统一规划重叠偏移，最后才画。
+  var geo = S.scene.edges.map(function (e) {
     var a = pos[e.source_label], b = pos[e.target_label];
-    if (!a || !b) return;
+    if (!a || !b) return null;
+    // 高花费边一律画直线：它的 road_path 已在建图阶段丢弃（绕出几十倍的
+    // 折线画在图上只会误导），真实路网距离仍在 road_distance_m 里。
+    var costly = !!e.high_cost;
+    if (!costly && S.edgeMode === 'road' && e.road_path && e.road_path.length > 1) {
+      // 折线两端落在吸附点上，不在节点上——补两段短接头，否则边看着是断的
+      return { e: e, costly: costly, road: true,
+               pts: [a].concat(e.road_path.map(function (q) { return proj(q[0], q[1]); })).concat([b]) };
+    }
+    return { e: e, costly: costly, road: false, pts: [a, b] };
+  });
+  var rank = planOffsets(geo.map(function (g) { return g ? g.pts : []; }));
+
+  geo.forEach(function (g, ei) {
+    if (!g) return;
+    var e = g.e;
     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 shift = rank[ei] || 0;
+    var pts = offsetPolyline(g.pts, shift);
+
     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]);
+    if (g.road) {
       el = mk('polyline', {
-        points: pts.map(function (p) { return p.join(','); }).join(' '),
+        points: pts.map(function (q) { return q[0].toFixed(2) + ',' + q[1].toFixed(2); }).join(' '),
         fill: 'none', stroke: isSel ? '#fff' : colour,
         'stroke-width': isSel ? 3 : 1.7, opacity: dead ? .22 : 1,
         'stroke-linejoin': 'round', 'stroke-linecap': 'round',
@@ -387,17 +580,24 @@ function drawGraph() {
       });
     } else {
       el = mk('line', {
-        x1: a[0], y1: a[1], x2: b[0], y2: b[1],
+        x1: pts[0][0], y1: pts[0][1], x2: pts[1][0], y2: pts[1][1],
         stroke: isSel ? '#fff' : colour,
-        'stroke-width': isSel ? 3 : (costly ? 2.2 : 1.7),
+        'stroke-width': isSel ? 3 : (g.costly ? 2.2 : 1.7),
         opacity: dead ? .22 : 1,
-        'stroke-dasharray': costly ? '6 4' : '',
+        'stroke-dasharray': g.costly ? '6 4' : '',
         style: 'cursor:pointer',
       });
     }
+    // 被挪开的边加一层深色描边，和邻线之间留出视觉缝隙
+    if (shift) el.setAttribute('paint-order', 'stroke');
     el.onclick = function () { pickEdge(e); };
+    var title = mk('title', {});
+    title.textContent = e.source_label + '–' + e.target_label + ' · ' + (e.origin || '')
+      + (shift ? '（与其它边重合，已错开显示）' : '');
+    el.appendChild(title);
     svg.appendChild(el);
   });
+
   S.scene.nodes.forEach(function (n) {
     var p = pos[n.label];
     if (!p) return;
@@ -418,6 +618,79 @@ function drawGraph() {
     g.onclick = function () { pickNode(n); };
     svg.appendChild(g);
   });
+
+  drawHeadingArrows(svg, mk, pos);
+}
+
+/* ---------- 朝向箭头 ----------------------------------------------------
+ * 街景有 4 个朝向，但光看图片说不出它朝哪边。给当前选中的节点（选中一条边
+ * 时则是两端）在图上画出这 4 个方向，正在看的那个用信号色加粗——这样
+ * 「图片里的这条路」和「图上的这条边」能直接对上。
+ * heading 以正北为 0、顺时针增大；SVG 的 y 轴向下，所以
+ * dx = sin(θ), dy = -cos(θ)。
+ */
+function drawHeadingArrows(svg, mk, pos) {
+  var sel = S.selected;
+  if (!sel) return;
+  var roles = sel.kind === 'node'
+    ? [['anchor', sel.key[1]]]
+    : [['anchor', sel.key[1]], ['target', sel.key[2]]];
+
+  roles.forEach(function (pair) {
+    var n = S.scene.nodes.find(function (x) { return x.label === pair[1]; });
+    if (!n || !n.ground_headings || !n.ground_headings.length) return;
+    var p = pos[n.label];
+    if (!p) return;
+    var active = groundView[pair[0]] || 0;
+
+    n.ground_headings.forEach(function (h, k) {
+      if (h == null) return;
+      var th = (Number(h) % 360 + 360) % 360 * Math.PI / 180;
+      var dx = Math.sin(th), dy = -Math.cos(th);
+      var on = k === active;
+      var r0 = 7.5, r1 = on ? 22 : 14;          // 起点让开节点圆点
+      var x0 = p[0] + dx * r0, y0 = p[1] + dy * r0;
+      var x1 = p[0] + dx * r1, y1 = p[1] + dy * r1;
+      // 底图可能是深色卫星图，也可能是浅色电子地图。所以���个箭头都先铺
+      // 一层深色描边再画本体，两种底图上都读得出来——只靠半透明白色，
+      // 在 OSM 的浅底上基本看不见。
+      var col = on ? 'var(--signal)' : '#f2f5ef';
+      var halo = 'rgba(8,12,11,.85)';
+      var lw = on ? 2 : 1.3;
+
+      var gg = mk('g', { style: 'cursor:pointer' });
+      gg.appendChild(mk('line', {
+        x1: x0, y1: y0, x2: x1, y2: y1, stroke: halo,
+        'stroke-width': lw + 1.6, 'stroke-linecap': 'round',
+      }));
+      gg.appendChild(mk('line', {
+        x1: x0, y1: y0, x2: x1, y2: y1, stroke: col,
+        'stroke-width': lw, 'stroke-linecap': 'round',
+      }));
+      // 箭头：沿朝向的等腰三角形，深色描边 + 本体填充
+      var hw = on ? 3.4 : 2.4, hl = on ? 6 : 4.2;
+      var px = -dy, py = dx;                    // 法线
+      gg.appendChild(mk('polygon', {
+        points: [
+          (x1 + dx * hl) + ',' + (y1 + dy * hl),
+          (x1 + px * hw) + ',' + (y1 + py * hw),
+          (x1 - px * hw) + ',' + (y1 - py * hw),
+        ].join(' '),
+        fill: col, stroke: halo, 'stroke-width': 1.1,
+        'stroke-linejoin': 'round', 'paint-order': 'stroke',
+      }));
+      var t = mk('title', {});
+      t.textContent = headingLabel(h) + (on ? '（当前街景）' : '（点击切到该朝向）');
+      gg.appendChild(t);
+      gg.onclick = function (ev) {
+        ev.stopPropagation();
+        groundView[pair[0]] = k;
+        drawGroundImages();
+        drawGraph();
+      };
+      svg.appendChild(gg);
+    });
+  });
 }
 
 function drawNodeChips(cors) {
@@ -552,7 +825,7 @@ function drawGroundImages() {
       b.className = k === i ? 'active' : '';
       b.setAttribute('role', 'tab');
       b.setAttribute('aria-selected', k === i ? 'true' : 'false');
-      b.onclick = function () { groundView[role] = k; drawGroundImages(); };
+      b.onclick = function () { groundView[role] = k; drawGroundImages(); drawGraph(); };
       strip.appendChild(b);
     });
   }
@@ -580,6 +853,7 @@ function cycleGround(step) {
     if (len > 1) groundView[pair[0]] = ((groundView[pair[0]] + step) % len + len) % len;
   });
   drawGroundImages();
+  drawGraph();            // 图上的朝向箭头跟着换高亮
 }
 
 function pickNode(n) {
@@ -692,6 +966,12 @@ function setBasemap(mode) {
   $('baseMap').classList.toggle('active', mode === 'map');
   if (mode === 'map') renderMapTiles();
 }
+/* 瓦片按 raster 百分比定位，和 SVG 的 400x400 viewBox 共用同一套坐标。
+ *
+ * 旧版把瓦片按固定 256 CSS px 摆在 stage 里，而 SVG 把 400 个 raster 单位
+ * 拉伸到 stage 的实际宽度（通常 500+ px）。两套尺度不一致，图和底图对不上；
+ * 窗口一改大小错得更多。现在换算成百分比，缩放与 zoom 都自动跟随。
+ */
 function renderMapTiles() {
   if (!S.scene) return;
   var c = tileCenter(S.scene.scene.satellite_path);
@@ -703,17 +983,27 @@ function renderMapTiles() {
   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;
+
+  // z 级的 1 像素 = 2^(z-ZOOM) 个 raster 单位的倒数
+  var k = Math.pow(2, z - ZOOM);          // z 像素 / raster 单位
+  var tileR = 256 / k;                     // 一块瓦片占多少 raster 单位
+  var pct = function (v) { return (v / RASTER * 100) + '%'; };
+
   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++) {
+  // 场景中心位于 raster 的正中；瓦片 (tx,ty) 左上角相对中心的 z 像素偏移
+  var span = Math.ceil(RASTER / 2 / tileR) + 1;
+  for (var dx = -span; dx <= span; dx++) {
+    for (var dy = -span; dy <= span; dy++) {
+      var gx = tx + dx, gy = ty + dy;
+      if (gy < 0 || gy >= Math.pow(2, z)) continue;
       var img = document.createElement('img');
-      img.src = 'https://tile.openstreetmap.org/' + z + '/' + (tx + dx) + '/' + (ty + dy) + '.png';
+      img.src = 'https://tile.openstreetmap.org/' + z + '/' + gx + '/' + gy + '.png';
       img.loading = 'lazy';
-      img.style.left = (cx - ox + dx * 256) + 'px';
-      img.style.top = (cy - oy + dy * 256) + 'px';
+      img.alt = '';
+      img.style.left = pct((gx * 256 - x) / k + RASTER / 2);
+      img.style.top = pct((gy * 256 - y) / k + RASTER / 2);
+      img.style.width = pct(tileR);
+      img.style.height = pct(tileR);
       layer.appendChild(img);
     }
   }
@@ -757,8 +1047,13 @@ function boot() {
    'fOrphan', 'fHighCost', 'fFragmented',
    'tierFilter', 'kindFilter', 'signalFilter', 'showReviewedSel'].forEach(function (id) {
     var el = $(id);
-    if (el) el.onchange = function () { S.offset = 0; loadList(); };
+    if (el) el.onchange = function () { S.offset = 0; syncFilterChrome(); loadList(); };
   });
+  $('filterToggle').onclick = function () { toggleDrawer(); };
+  $('filterReset').onclick = function () {
+    FILTERS.forEach(clearFilter);
+    S.offset = 0; syncFilterChrome(); loadList();
+  };
   $('modeScenes').onclick = function () { setMode('scenes'); };
   $('modeQueue').onclick = function () { setMode('queue'); };
   $('pagePrev').onclick = function () { page(-1); };

web/index.html

@@ -12,37 +12,30 @@
 <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>
+    <h1>Node Graph Viewer<em>SetVL · 只读</em></h1>
   </div>
-  <div class="reviewer-field">
-    <label>Dataset</label>
-    <span id="datasetLabel" style="font:600 11px var(--mono);color:var(--cyan)">—</span>
+
+  <!-- 全库读数：一行内用竖线断开，不再单独占一条 progress-strip -->
+  <div class="readout" role="group" aria-label="全库统计">
+    <b id="statScenes">—</b><span>场景</span>
+    <i aria-hidden="true"></i>
+    <b id="statItems">—</b><span>节点</span>
+    <i aria-hidden="true"></i>
+    <b id="statQueue">—</b><span>边</span>
+    <i aria-hidden="true"></i>
+    <span class="readout-origins" id="originBreakdown" title="边按来源构成">
+      <em class="o-chain"><b id="countChain">—</b>走廊链</em>
+      <em class="o-inter"><b id="countInter">—</b>路口</em>
+      <em class="o-bridge"><b id="countBridge">—</b>桥接</em>
+      <em class="o-cost"><b id="countCost">—</b>高花费</em>
+    </span>
   </div>
+
+  <div class="origin-meter" id="originMeter" aria-hidden="true"><span id="progressBar"></span></div>
+  <span class="readout-label" id="progressLabel">—</span>
   <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">
@@ -55,73 +48,105 @@
       <button type="button" id="modeQueue">带信号的</button>
     </div>
     <div class="filter-stack">
+      <!-- 一级：搜索。常驻，最宽，视觉重量最大。 -->
       <div class="search-wrap">
+        <svg class="search-icon" viewBox="0 0 16 16" aria-hidden="true">
+          <circle cx="7" cy="7" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/>
+          <path d="M10.4 10.4 L14 14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
+        </svg>
         <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>
+
+      <!-- 二级：最常用的两个，压成一行紧凑控件 -->
+      <div class="filter-row">
+        <label class="ctl"><span>City</span>
+          <select id="cityFilter"><option value="">全部</option></select>
         </label>
-        <label><span>Sort</span>
+        <label class="ctl"><span>Sort</span>
           <select id="orderFilter">
-            <option value="scene_id">按 ID</option>
+            <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>
+        <button type="button" class="filter-toggle" id="filterToggle"
+                aria-expanded="false" aria-controls="filterDrawer">
+          筛选<b class="filter-count" id="filterCount" hidden>0</b>
+          <svg viewBox="0 0 10 6" aria-hidden="true"><path d="M1 1l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+        </button>
       </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>
+
+      <!-- 已激活的筛选以 token 回显：抽屉收起时状态依然可见、可单独撤销 -->
+      <div class="token-row" id="activeTokens" hidden></div>
+
+      <!-- 三级：抽屉。默认收起，把纵向空间让给列表 -->
+      <div class="filter-drawer" id="filterDrawer" hidden>
+        <div class="drawer-group" id="sceneFilters">
+          <p class="drawer-title">场景</p>
+          <div class="filter-row">
+            <label class="ctl"><span>Min nodes</span>
+              <input id="minNodes" type="number" min="1" max="38" placeholder="—">
+            </label>
+            <label class="ctl"><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"><span>含孤儿</span></label>
+            <label class="chip"><input id="fHighCost" type="checkbox"><span>含高花费边</span></label>
+            <label class="chip"><input id="fFragmented" type="checkbox"><span>路网碎片化</span></label>
+          </div>
+        </div>
+
+        <div class="drawer-group" id="queueFilters" hidden>
+          <p class="drawer-title">信号队列</p>
+          <div class="filter-row">
+            <label class="ctl"><span>Kind</span>
+              <select id="kindFilter">
+                <option value="">节点 + 边</option>
+                <option value="node">只看节点</option>
+                <option value="edge">只看边</option>
+              </select>
+            </label>
+            <label class="ctl"><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>
+          </div>
+          <div class="filter-row">
+            <label class="ctl"><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 class="ctl"><span>已复核</span>
+              <select id="showReviewedSel">
+                <option value="">不含</option>
+                <option value="1">含已复核</option>
+              </select>
+            </label>
+          </div>
+        </div>
+        <button type="button" class="drawer-reset" id="filterReset">清空全部筛选</button>
       </div>
     </div>
+    <div class="list-meter"><span id="listCount">—</span></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>

web/styles.css

@@ -7,6 +7,9 @@
 :root {
   --ink: #0d1211;
   --asphalt: #141a18;
+  --rail-w: 320px;          /* 左栏：比原来的 294px 宽，场景 id 少截断 */
+  --inspect-w: 340px;
+  --topbar-h: 46px;         /* 原来 70px 顶栏 + 41px 进度条 = 111px，省出 65px */
   --panel: #1a211f;
   --panel-raised: #202926;
   --line: #34403c;
@@ -37,11 +40,21 @@
 * { box-sizing: border-box; }
 html, body { height: 100%; }
 body {
+  /* 之前 .app-shell 用 calc(100vh - 70px - 41px) 写死两条头部的高度。
+     窗口一窄，顶栏换行变高，app-shell 就被挤出视口下沿，而 body 是
+     overflow:hidden——底部那排 Prev/Next 直接被裁掉。改成 flex 列，
+     让 app-shell 吃掉剩余高度，头部多高都不会溢出。 */
+  display: flex; flex-direction: column; height: 100vh; max-height: 100vh;
   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; }
+/* 任何带 display 的类选择器都会压过浏览器对 [hidden] 的 UA 样式
+   （display:none 来自 UA 样式表，特异度最低）。这里一次性钉死，
+   否则 .drawer-group / .token-row 这类 display:flex 的元素
+   设了 hidden 也照样显示。 */
+[hidden] { display: none !important; }
 button { color: inherit; }
 
 .topographic-grid {
@@ -54,57 +67,67 @@ button { color: inherit; }
 }
 
 /* ---------------------------------------------------------------- 顶栏 */
+/* 一行搞定：品牌 / 读数 / 构成条 / 帮助。旧版拆成 topbar + progress-strip
+   两行共 111px，装饰占掉的纵向空间比左侧列表还多。 */
 .topbar {
-  height: 70px; display: grid;
-  grid-template-columns: minmax(340px, 1fr) auto minmax(250px, 320px) 38px;
-  align-items: center; gap: 18px; padding: 0 20px;
+  flex: 0 0 auto; height: var(--topbar-h);
+  display: flex; align-items: center; gap: 15px; padding: 0 15px;
   border-bottom: 1px solid var(--line); background: rgba(20,26,24,.96);
-  position: relative; z-index: 5;
+  position: relative; z-index: 5; white-space: nowrap;
 }
-.brand { display: flex; align-items: center; gap: 13px; }
+.brand { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
 .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); }
+  width: 24px; height: 24px; display: grid; place-items: center;
+  background: var(--signal); color: var(--ink); font: 800 10px var(--mono); letter-spacing: .04em;
+}
+.brand h1 {
+  margin: 0; font: 600 13px var(--display); letter-spacing: .09em; text-transform: uppercase;
+  display: flex; align-items: baseline; gap: 8px;
+}
+.brand h1 em {
+  font: 600 8px var(--mono); letter-spacing: .14em; color: var(--faint);
+  text-transform: uppercase; font-style: normal;
+}
+
+/* 读数：数字实、单位虚，细竖线断开，不用边框盒子 */
+.readout { display: flex; align-items: baseline; gap: 6px; font: 600 10px var(--mono); min-width: 0; overflow: hidden; }
+.readout > b { color: var(--paper); font: 650 13px var(--display); letter-spacing: .03em; }
+.readout > span { color: var(--faint); letter-spacing: .1em; text-transform: uppercase; }
+.readout > i { width: 1px; height: 13px; background: var(--line); margin: 0 4px; align-self: center; flex: 0 0 auto; }
+.readout-origins { display: flex; gap: 10px; min-width: 0; overflow: hidden; }
+.readout-origins em { font-style: normal; display: flex; align-items: baseline; gap: 3px; color: var(--faint); letter-spacing: .06em; }
+.readout-origins b { font: 650 11px var(--mono); }
+.o-chain b { color: var(--chain); } .o-inter b { color: var(--intersection); }
+.o-bridge b { color: var(--bridge); } .o-cost b { color: var(--paper); }
+
+.origin-meter { flex: 1 1 auto; min-width: 50px; height: 2px; background: var(--line-soft); }
+.origin-meter span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--signal), #ffd38b); transition: width .45s ease; }
+.readout-label { flex: 0 0 auto; color: var(--faint); font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
+
+/* 窄窗口下按重要性依次藏：构成明细 -> 构成条与标签 */
+@media (max-width: 1400px) { .readout-origins { display: none; } }
+@media (max-width: 1150px) { .origin-meter, .readout-label { display: none; } }
+
 .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);
+  flex: 0 0 auto; margin-left: auto;
+  width: 26px; height: 26px; border: 1px solid var(--line); background: transparent;
+  color: var(--muted); cursor: pointer; border-radius: var(--radius); font: 700 13px 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;
+  flex: 1 1 auto; min-height: 0; overflow: hidden;
+  display: grid; grid-template-columns: var(--rail-w) minmax(420px, 1fr) var(--inspect-w);
   position: relative; z-index: 2;
 }
+/* 窄窗口下先收右栏，再收左栏；三栏的最小可用宽度守住，避免内容被压烂 */
+@media (max-width: 1500px) { :root { --rail-w: 300px; --inspect-w: 310px; } }
+@media (max-width: 1280px) { :root { --rail-w: 286px; --inspect-w: 280px; } }
+@media (max-width: 1100px) {
+  .app-shell { grid-template-columns: var(--rail-w) minmax(360px, 1fr); }
+  .inspector-panel { display: none; }
+}
 .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; }
@@ -125,16 +148,6 @@ button { color: inherit; }
   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); }
@@ -142,26 +155,100 @@ button { color: inherit; }
 .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; }
+/* --- 筛选：三级信息层级 ------------------------------------------------
+   旧版把搜索框、4 个下拉、3 个勾选框平铺成一堵墙，全部常驻、权重相同，
+   既看不出主次，又吃掉了列表的纵向空间。现在：
+     一级 搜索     —— 常驻，最宽
+     二级 City/Sort —— 压成一行紧凑控件（实测这两个用得最多）
+     三级 其余     —— 收进抽屉，已激活项用 token 回显，收起也看得见
+*/
+.filter-stack { padding: 9px 12px 8px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; flex: 0 0 auto; }
+
+.search-wrap { position: relative; display: flex; align-items: center; }
+.search-icon { position: absolute; left: 8px; width: 13px; height: 13px; color: var(--faint); pointer-events: none; }
 .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);
+  padding: 7px 9px 7px 27px; border-radius: var(--radius); font: 500 12px var(--body);
 }
+.search-wrap input::-webkit-search-cancel-button { filter: invert(.6); }
 .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); }
+.search-wrap:focus-within .search-icon { color: var(--signal); }
+
+.filter-row { display: flex; gap: 6px; align-items: flex-end; }
+.ctl { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.ctl > span { color: var(--faint); font: 600 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
+.ctl select, .ctl input {
+  width: 100%; background: var(--ink); border: 1px solid var(--line); color: var(--paper);
+  padding: 5px 6px; border-radius: var(--radius); font: 500 11px var(--body); min-width: 0;
+}
+.ctl select:focus, .ctl input:focus { outline: none; border-color: var(--signal); }
+
+.filter-toggle {
+  flex: 0 0 auto; display: flex; align-items: center; gap: 5px; cursor: pointer;
+  background: transparent; border: 1px solid var(--line); color: var(--muted);
+  padding: 5px 8px; border-radius: var(--radius); font: 600 10px var(--mono);
+  letter-spacing: .06em;
+}
+.filter-toggle:hover { border-color: var(--signal); color: var(--signal); }
+.filter-toggle svg { width: 9px; height: 6px; transition: transform .18s ease; }
+.filter-toggle[aria-expanded="true"] { border-color: var(--signal); color: var(--signal); }
+.filter-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
+.filter-count {
+  min-width: 14px; height: 14px; padding: 0 3px; display: grid; place-items: center;
+  background: var(--signal); color: var(--ink); font: 800 9px var(--mono); border-radius: 7px;
+}
+
+/* 已激活筛选的 token：抽屉收起时状态依然可见，点 × 单独撤销 */
+.token-row { display: flex; flex-wrap: wrap; gap: 4px; }
+.token {
+  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
+  background: rgba(241,164,60,.1); border: 1px solid rgba(241,164,60,.4);
+  color: var(--signal); padding: 2px 4px 2px 6px; border-radius: var(--radius);
+  font: 600 9px var(--mono); letter-spacing: .04em;
+}
+.token:hover { background: rgba(241,164,60,.2); }
+.token b { color: var(--paper); font-weight: 700; }
+.token i { font-style: normal; opacity: .65; font-size: 11px; line-height: 1; }
+
+.filter-drawer {
+  display: flex; flex-direction: column; gap: 8px;
+  padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius);
+  background: rgba(10,14,13,.45);
+  animation: drawerIn .16s ease;
+}
+@keyframes drawerIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
+.drawer-group { display: flex; flex-direction: column; gap: 6px; }
+.drawer-title { margin: 0; color: var(--faint); font: 700 8px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
+.drawer-reset {
+  align-self: flex-start; background: transparent; border: 0; cursor: pointer;
+  color: var(--faint); font: 600 9px var(--mono); letter-spacing: .08em;
+  text-decoration: underline; text-underline-offset: 2px; padding: 0;
+}
+.drawer-reset:hover { color: var(--no); }
+
+.chip-row { display: flex; flex-wrap: wrap; gap: 4px; }
+.chip {
+  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
+  border: 1px solid var(--line); border-radius: var(--radius); padding: 3px 7px;
+  color: var(--muted); font: 600 9px var(--mono); letter-spacing: .04em;
+  transition: border-color .14s ease, color .14s ease;
+}
+.chip:hover { border-color: var(--muted); color: var(--paper); }
+.chip input { appearance: none; width: 7px; height: 7px; margin: 0; border: 1px solid var(--muted); border-radius: 50%; }
+.chip:has(input:checked) { border-color: var(--signal); color: var(--signal); background: rgba(241,164,60,.08); }
+.chip input:checked { background: var(--signal); border-color: var(--signal); }
+
+/* 列表计数条：把「当前看到多少条」从底部挪上来，底部只留导航 */
+.list-meter {
+  flex: 0 0 auto; padding: 4px 13px; border-bottom: 1px solid var(--line-soft);
+  color: var(--faint); font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase;
+}
+
 .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;
+  padding: 7px 12px; 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); }
@@ -175,6 +262,12 @@ button { color: inherit; }
 .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-sub { margin-top: 3px; display: flex; align-items: center; gap: 6px; min-width: 0; }
+.queue-sub em { font-style: normal; color: #56635c; font: 600 9px var(--mono); letter-spacing: .08em; flex: 0 0 auto; }
+.queue-badges { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
+.queue-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.queue-top span { flex: 0 0 auto; }
 .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);
@@ -223,11 +316,22 @@ kbd {
 .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 有 z-index:1 而 .graph-svg 没有，于是电子地图模式下
+   瓦片整个盖在图上——节点和边全看不见。给 SVG 更高的层级。 */
+.graph-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
 .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; }
+/* 瓦片按 stage 的百分比定位，与 SVG 的 400x400 viewBox 共用同一套坐标，
+   缩放窗口或换 zoom 都不会和图层错位（旧版用固定 256px，必然错位）。 */
+.map-tile-layer img { position: absolute; }
+/* 电子地图是浅色底（OSM 标准样式接近白），走廊配色是为深色卫星图挑的
+   高亮色，直接画上去会糊。整层加一圈深色投影把图元从底图上"抬"出来。 */
+.satellite-stage.map-mode .graph-svg {
+  filter: drop-shadow(0 0 1px rgba(8,12,11,.9)) drop-shadow(0 0 2.5px rgba(8,12,11,.55));
+}
+/* 电子地图底图压暗一点，让图元成为视觉主角 */
+.satellite-stage.map-mode .map-tile-layer { filter: brightness(.94) saturate(.85); }
 .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); }