@harmonyos-arkts/d2h 0.1.10 → 0.1.12

package/skills/d2h-utg-ai-generate/scripts/utg_html.py

@@ -1,489 +1,489 @@
-#!/usr/bin/env python3
-# -*- coding: utf-8 -*-
-"""Interactive HTML visualization of a reconciled UTG (guided crawl output).
-
-  python scripts/utg_html.py <workspace>
-
-Reads <workspace>/utg.json, writes <workspace>/utg.html. Self-contained; D3 v7
-embedded from the bundled MIT-licensed distribution. Extends android-utg-static's renderer with the two things the crawler
-adds:
-
-  * NODE  = a page: the sidebar shows the captured screenshot thumbnail, the
-    runtime view signature, reached/unreached status, and a link to view.xml.
-  * EDGE  = a navigation with SEMANTICS: precondition (guard), operation
-    (mechanism + on-screen label), status (confirmed / static-only /
-    dynamic-only / blocked) and confidence. Edges are colored by STATUS so the
-    reconciliation is visible at a glance.
-
-Screenshots are referenced by RELATIVE path, so the HTML must live in the same
-workspace directory as the p*/route_*/overlay_* page folders (it does).
-"""
-import json
-import os
-import sys
-from pathlib import Path
-from collections import Counter
-
-# ── Node kind palette ─────────────────────────────────────────────────────────
-KIND_META = {
-    "activity":              {"color": "#e05252", "zh": "Activity"},
-    "compose-route":         {"color": "#4a90d9", "zh": "路由页面"},
-    "compose-route-variant": {"color": "#7db8e8", "zh": "数据状态变体"},
-    "fragment":              {"color": "#e07d52", "zh": "Fragment"},
-    "voyager-screen":        {"color": "#9b59b6", "zh": "Voyager 页面"},
-    "dialog":                {"color": "#f39c12", "zh": "对话框"},
-    "sheet":                 {"color": "#f1c40f", "zh": "底部弹窗"},
-    "menu":                  {"color": "#2ecc71", "zh": "菜单"},
-    "mode":                  {"color": "#8e44ad", "zh": "交互模式"},
-    "page":                  {"color": "#4a90d9", "zh": "页面"},
-    "dynamic":               {"color": "#1abc9c", "zh": "动态新增页面"},
-    "logical-entry":         {"color": "#9b59b6", "zh": "逻辑入口"},
-    "host-activity":         {"color": "#95a5a6", "zh": "页面宿主"},
-    "sentinel":              {"color": "#c0392b", "zh": "阻断哨兵"},
-    "unknown":               {"color": "#95a5a6", "zh": "未知"},
-}
-
-# ── Edge STATUS palette (the reconciliation dimension) ──────────────────────────
-STATUS_META = {
-    "confirmed":    {"color": "#2ecc71", "dash": "",      "zh": "已确认(动态复现)"},
-    "static-only":  {"color": "#8894a8", "dash": "5 4",   "zh": "仅静态(未验证)"},
-    "dynamic-only": {"color": "#4a90d9", "dash": "",       "zh": "仅动态(静态漏掉)"},
-    "blocked":      {"color": "#e05252", "dash": "3 3",   "zh": "阻断(敏感/外部)"},
-}
-
-
-def _guard_text(guard):
-    if not guard:
-        return ""
-    if isinstance(guard, dict):
-        kind = guard.get("kind", "")
-        txt = guard.get("text", "")
-        return f"{txt}（{kind}）" if kind else txt
-    return str(guard)
-
-
-def main():
-    ws = sys.argv[1] if len(sys.argv) > 1 else "."
-    utg_path = os.path.join(ws, "utg.json")
-    html_path = os.path.join(ws, "utg.html")
-    if not os.path.exists(utg_path):
-        raise SystemExit(f"utg.json not found in {ws}")
-
-    utg = json.load(open(utg_path, encoding="utf-8"))
-    nodes = utg.get("nodes", [])
-    links = utg.get("links") or utg.get("edges") or []
-
-    for n in nodes:
-        n["_display_kind"] = "logical-entry" if (n.get("extra") or {}).get("logical_entry") else n.get("kind", "unknown")
-        meta = KIND_META.get(n["_display_kind"], KIND_META["unknown"])
-        n["_color"] = meta["color"]
-        n["_zh"] = meta["zh"]
-        # dim nodes that are unreachable OR never reached by the crawl
-        n["_dim"] = (n.get("status") == "unreachable") or (n.get("reached") is False
-                    and n.get("kind") not in ("sentinel",))
-        n["_guardtext"] = ""
-
-    for e in links:
-        st = e.get("status", "static-only")
-        sm = STATUS_META.get(st, STATUS_META["static-only"])
-        e["_color"] = sm["color"]
-        e["_dash"] = sm["dash"]
-        e["_guardtext"] = _guard_text(e.get("guard"))
-        e["_label"] = (e.get("args") or {}).get("label", "")
-
-    kind_counts = Counter(n["_display_kind"] for n in nodes)
-    status_counts = Counter(e.get("status", "static-only") for e in links)
-    reached = sum(1 for n in nodes if n.get("reached"))
-    pages = sum(1 for n in nodes if n.get("kind") not in ("sentinel",))
-
-    stats_html = "\n".join(
-        f'<span class="badge" style="background:{KIND_META.get(k, KIND_META["unknown"])["color"]}">'
-        f'{KIND_META.get(k, {}).get("zh", k)}: {v}</span>'
-        for k, v in sorted(kind_counts.items(), key=lambda x: -x[1])
-    )
-    status_html = "\n".join(
-        f'<span class="badge" style="background:{STATUS_META.get(s, {}).get("color", "#888")}">'
-        f'{STATUS_META.get(s, {}).get("zh", s)}: {v}</span>'
-        for s, v in sorted(status_counts.items(), key=lambda x: -x[1])
-    )
-
-    graph_json = json.dumps({"nodes": nodes, "links": links}, ensure_ascii=False).replace("<", "\\u003c")
-    review_json = json.dumps({"audit": utg.get("graph", {}).get("discovery_audit", []), "unresolved": utg.get("graph", {}).get("unresolved", []), "boundary_transitions": utg.get("graph", {}).get("boundary_transitions", [])}, ensure_ascii=False).replace("<", "\\u003c")
-    d3_source = (Path(__file__).parent / "vendor" / "d3-7.9.0.min.js").read_text(encoding="utf-8")
-    kind_meta_json = json.dumps(KIND_META, ensure_ascii=False)
-    status_meta_json = json.dumps(STATUS_META, ensure_ascii=False)
-
-    html = f"""<!DOCTYPE html>
-<html lang="zh">
-<head>
-<meta charset="UTF-8">
-<title>UTG — {os.path.basename(os.path.abspath(ws))}</title>
-<script>{d3_source}</script>
-<style>
-* {{ box-sizing: border-box; margin: 0; padding: 0; }}
-body {{ font-family: system-ui, sans-serif; background: #1a1a2e; color: #eee; display: flex; height: 100vh; overflow: hidden; }}
-#sidebar {{ width: 360px; min-width: 260px; max-width: 520px; background: #16213e; border-right: 1px solid #0f3460; display: flex; flex-direction: column; overflow: hidden; }}
-#sidebar-header {{ padding: 14px 16px 10px; background: #0f3460; flex-shrink: 0; }}
-#sidebar-header h1 {{ font-size: 15px; font-weight: 700; }}
-#sidebar-header .sub {{ font-size: 11px; color: #aaa; margin-top: 3px; }}
-.badge {{ display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: 10px; color: #fff; margin: 2px 2px 2px 0; opacity: .9; }}
-#stats {{ padding: 10px 16px; border-bottom: 1px solid #0f3460; flex-shrink: 0; }}
-#stats .section-label {{ font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: .05em; margin: 6px 0 4px; }}
-#filter-box {{ padding: 10px 16px; border-bottom: 1px solid #0f3460; flex-shrink: 0; }}
-#filter-box input {{ width: 100%; padding: 6px 10px; border-radius: 6px; background: #0d0d1a; border: 1px solid #0f3460; color: #eee; font-size: 13px; }}
-#filter-box input:focus {{ outline: none; border-color: #4a90d9; }}
-#kind-filters {{ display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }}
-#kind-filters button {{ font-size: 10px; border: none; border-radius: 10px; padding: 2px 8px; cursor: pointer; opacity: .6; color: #fff; transition: opacity .15s; }}
-#kind-filters button.active {{ opacity: 1; }}
-#detail-panel {{ flex: 1; overflow-y: auto; padding: 12px 16px; }}
-#detail-panel h2 {{ font-size: 14px; margin-bottom: 8px; }}
-.shot {{ width: 100%; max-height: 340px; object-fit: contain; border: 1px solid #0f3460; border-radius: 6px; background:#000; margin-bottom: 10px; }}
-.detail-kv {{ margin-bottom: 5px; font-size: 12px; }}
-.detail-kv .k {{ color: #888; width: 78px; display: inline-block; vertical-align: top; }}
-.detail-kv .v {{ color: #eee; word-break: break-all; }}
-.edge-list {{ margin-top: 4px; }}
-.edge-item {{ font-size: 11px; padding: 5px 7px; margin: 3px 0; border-radius: 5px; background: #1a1a2e; cursor: pointer; }}
-.edge-item:hover {{ background: #0f3460; }}
-.edge-top {{ display: flex; align-items: center; gap: 6px; }}
-.edge-dot {{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }}
-.edge-sub {{ color: #9aa4b8; font-size: 10px; margin-top: 2px; padding-left: 14px; }}
-.edge-sub .guard {{ color: #f39c12; }}
-svg {{ width: 100%; height: 100%; display: block; }}
-#canvas-wrap {{ flex: 1; position: relative; overflow: hidden; }}
-.node circle {{ stroke-width: 2px; cursor: pointer; transition: r .1s; }}
-.node circle.dim {{ stroke-dasharray: 4 3; opacity: .45; }}
-.node text {{ pointer-events: auto; cursor: pointer; font-size: 10px; fill: #ddd; text-shadow: 0 0 3px #000, 0 0 3px #000; }}
-.link {{ fill: none; stroke-width: 1.6px; opacity: .6; pointer-events: none; }}
-.link.highlighted {{ opacity: 1; stroke-width: 2.6px; }}
-.link-hit {{ fill: none; stroke: transparent; stroke-width: 14px; pointer-events: stroke; cursor: pointer; }}
-.edge-nav {{ cursor: pointer; color: #4a90d9; }}
-.edge-nav:hover {{ text-decoration: underline; }}
-.node.dimmed circle {{ opacity: .15; }}
-.node.dimmed text {{ opacity: .15; }}
-.link.dimmed {{ opacity: .06; }}
-#tooltip {{ position: absolute; pointer-events: none; background: rgba(15,52,96,.97); border: 1px solid #4a90d9; border-radius: 6px; padding: 6px 10px; font-size: 12px; max-width: 240px; display: none; box-shadow: 0 4px 16px rgba(0,0,0,.5); }}
-#tooltip img {{ width: 120px; display:block; margin-top:5px; border-radius:4px; }}
-#controls {{ position: absolute; bottom: 14px; right: 14px; display: flex; gap: 8px; }}
-#controls button {{ background: #0f3460; border: 1px solid #4a90d9; color: #eee; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; }}
-#controls button:hover {{ background: #1a4a7a; }}
-#legend {{ position: absolute; top: 10px; right: 10px; background: rgba(15,33,62,.92); border: 1px solid #0f3460; border-radius: 6px; padding: 8px 12px; font-size: 11px; }}
-#legend .l-row {{ display: flex; align-items: center; gap: 6px; margin: 3px 0; }}
-#legend .l-line {{ width: 18px; height: 0; border-top: 3px solid; flex-shrink: 0; }}
-#legend .section-label {{ font-size: 9px; color:#888; text-transform:uppercase; margin: 4px 0 2px; }}
-</style>
-</head>
-<body>
-<div id="sidebar">
-  <div id="sidebar-header">
-    <h1>UI Transition Graph · 对账结果</h1>
-    <div class="sub">{pages} 页面 · {reached} 已到达 · {len(links)} 边</div>
-  </div>
-  <div id="stats">
-    <div class="section-label">节点分类</div>
-    {stats_html}
-    <div class="section-label">边状态(对账)</div>
-    {status_html}
-  </div>
-  <div id="filter-box">
-    <input id="search" type="text" placeholder="搜索节点 (名称 / ID)…">
-    <div id="kind-filters"></div>
-    <select id="source-filter"><option value="">全部来源</option><option value="appgraph">AppGraph</option><option value="ai-source-review">AI 修补</option><option value="ai-source-analysis">AI 源码分析</option></select>
-    <details><summary>修补与未解析项</summary><pre id="review-data" style="white-space:pre-wrap"></pre></details>
-  </div>
-  <div id="detail-panel">
-    <div id="detail-empty" style="color:#666;font-size:12px;margin-top:20px">点击图中节点查看截图与边语义</div>
-    <div id="detail-content" style="display:none"></div>
-  </div>
-</div>
-<div id="canvas-wrap">
-  <svg id="graph"></svg>
-  <div id="tooltip"></div>
-  <div id="legend"><div id="legend-items"></div></div>
-  <div id="controls">
-    <button id="btn-reset">重置视图</button>
-    <button id="btn-center">居中</button>
-    <button id="btn-cluster">聚类模式</button>
-  </div>
-</div>
-<script>
-const GRAPH = {graph_json};
-const REVIEW = {review_json};
-document.getElementById("review-data").textContent = JSON.stringify(REVIEW, null, 2);
-const KIND_META = {kind_meta_json};
-const kindOf = node => node._display_kind || node.kind;
-const STATUS_META = {status_meta_json};
-
-// ── Legend: node kinds + edge statuses ──
-const legendEl = document.getElementById('legend-items');
-let lg = '<div class="section-label">节点</div>';
-Object.entries(KIND_META).forEach(([k, m]) => {{
-  if (!GRAPH.nodes.some(n => kindOf(n) === k)) return;
-  lg += `<div class="l-row"><div style="width:10px;height:10px;border-radius:50%;background:${{m.color}}"></div><span>${{m.zh || k}}</span></div>`;
-}});
-lg += '<div class="section-label">边状态</div>';
-Object.entries(STATUS_META).forEach(([s, m]) => {{
-  if (!GRAPH.links.some(e => (e.status||'static-only') === s)) return;
-  lg += `<div class="l-row"><div class="l-line" style="border-top-style:${{m.dash?'dashed':'solid'}};border-color:${{m.color}}"></div><span>${{m.zh || s}}</span></div>`;
-}});
-legendEl.innerHTML = lg;
-
-// ── Kind filters ──
-const kinds = [...new Set(GRAPH.nodes.map(kindOf))];
-let activeKinds = new Set(kinds);
-const kindFiltersEl = document.getElementById('kind-filters');
-kinds.forEach(k => {{
-  const meta = KIND_META[k] || {{color:'#888'}};
-  const btn = document.createElement('button');
-  btn.textContent = (KIND_META[k]?.zh || k);
-  btn.style.background = meta.color;
-  btn.classList.add('active');
-  btn.addEventListener('click', () => {{
-    if (activeKinds.has(k)) {{ activeKinds.delete(k); btn.classList.remove('active'); }}
-    else {{ activeKinds.add(k); btn.classList.add('active'); }}
-    applyFilters();
-  }});
-  kindFiltersEl.appendChild(btn);
-}});
-
-const svg = d3.select('#graph');
-const width = () => document.getElementById('canvas-wrap').clientWidth;
-const height = () => document.getElementById('canvas-wrap').clientHeight;
-const defs = svg.append('defs');
-// one arrow marker per status color
-Object.entries(STATUS_META).forEach(([s, m]) => {{
-  defs.append('marker').attr('id','arrow-'+s).attr('viewBox','0 -5 10 10')
-    .attr('refX',22).attr('refY',0).attr('markerWidth',6).attr('markerHeight',6)
-    .attr('orient','auto').append('path').attr('d','M0,-5L10,0L0,5').attr('fill',m.color);
-}});
-const zoom = d3.zoom().scaleExtent([.05,4]).on('zoom', e => container.attr('transform', e.transform));
-svg.call(zoom);
-const container = svg.append('g');
-const linkGroup = container.append('g');
-const linkHitGroup = container.append('g');
-const nodeGroup = container.append('g');
-const nodeById = Object.fromEntries(GRAPH.nodes.map(n => [n.id, n]));
-const inDeg = {{}}, outDeg = {{}};
-GRAPH.nodes.forEach(n => {{ inDeg[n.id]=0; outDeg[n.id]=0; }});
-GRAPH.links.forEach(e => {{ outDeg[e.source]=(outDeg[e.source]||0)+1; inDeg[e.target]=(inDeg[e.target]||0)+1; }});
-
-// Separate parallel and opposing edges; a self-transition needs a visible loop.
-const edgeBundles = new Map();
-GRAPH.links.forEach(edge => {{
-  const pair = JSON.stringify([edge.source, edge.target].sort());
-  if (!edgeBundles.has(pair)) edgeBundles.set(pair, []);
-  edgeBundles.get(pair).push(edge);
-}});
-edgeBundles.forEach(bundle => bundle.forEach((edge, index) => {{
-  edge._bend = (index - (bundle.length - 1)/2) * 36 * (edge.source < edge.target ? 1 : -1);
-  edge._loop = 32 + index * 18;
-}}));
-function edgePath(edge) {{
-  const s=edge.source, t=edge.target;
-  if (s.id === t.id) {{ const r=edge._loop; return `M${{s.x}},${{s.y}} C${{s.x+r}},${{s.y-r*2}} ${{s.x-r}},${{s.y-r*2}} ${{s.x}},${{s.y}}`; }}
-  const dx=t.x-s.x, dy=t.y-s.y, length=Math.hypot(dx,dy)||1;
-  return `M${{s.x}},${{s.y}} Q${{(s.x+t.x)/2-dy/length*edge._bend}},${{(s.y+t.y)/2+dx/length*edge._bend}} ${{t.x}},${{t.y}}`;
-}}
-
-const sim = d3.forceSimulation(GRAPH.nodes)
-  .force('link', d3.forceLink(GRAPH.links).id(d => d.id).distance(110).strength(0.3))
-  .force('charge', d3.forceManyBody().strength(-240))
-  .force('center', d3.forceCenter(width()/2, height()/2))
-  .force('collision', d3.forceCollide(26))
-  .alphaDecay(0.02);
-
-const linkSel = linkGroup.selectAll('path').data(GRAPH.links).join('path').attr('fill','none')
-  .attr('class','link')
-  .attr('stroke', d => d._color)
-  .attr('stroke-dasharray', d => d._dash || null)
-  .attr('marker-end', d => `url(#arrow-${{d.status||'static-only'}})`);
-
-// Wide transparent hitzone lines so thin edges are easy to click/hover.
-const linkHitSel = linkHitGroup.selectAll('path').data(GRAPH.links).join('path').attr('fill','none')
-  .attr('class','link-hit');
-
-const nodeSel = nodeGroup.selectAll('g').data(GRAPH.nodes).join('g').attr('class','node')
-  .call(d3.drag()
-    .on('start', (e,d) => {{ if (!e.active) sim.alphaTarget(.3).restart(); d.fx=d.x; d.fy=d.y; }})
-    .on('drag',  (e,d) => {{ d.fx=e.x; d.fy=e.y; }})
-    .on('end',   (e,d) => {{ if (!e.active) sim.alphaTarget(0); d.fx=null; d.fy=null; }}));
-
-nodeSel.append('circle').attr('r', d => nodeRadius(d))
-  .attr('fill', d => d._color).attr('stroke', d => d3.color(d._color).brighter(.8))
-  .attr('class', d => d._dim ? 'dim' : '');
-nodeSel.append('text').attr('dy', d => nodeRadius(d) + 11).attr('text-anchor','middle')
-  .text(d => truncate(d.label || d.id, 18));
-
-function nodeRadius(d) {{ const deg=(inDeg[d.id]||0)+(outDeg[d.id]||0); return Math.max(8, Math.min(20, 8+deg*1.2)); }}
-function truncate(s,n) {{ s=String(s); return s.length>n ? s.slice(0,n-1)+'…' : s; }}
-
-sim.on('tick', () => {{
-  linkSel.attr('d',edgePath);
-  linkHitSel.attr('d',edgePath);
-  nodeSel.attr('transform', d => `translate(${{d.x}},${{d.y}})`);
-}});
-
-const tooltip = document.getElementById('tooltip');
-nodeSel.on('mouseover', (e,d) => {{
-  tooltip.style.display='block';
-  tooltip.innerHTML = `<b>${{d.label||d.id}}</b><br><span style="color:#aaa">${{d.kind}}</span>`
-    + `<br><span style="color:#4a90d9">入 ${{inDeg[d.id]||0}} · 出 ${{outDeg[d.id]||0}}</span>`
-    + (d.reached ? '<br><span style="color:#2ecc71">✓ 已到达</span>' : '<br><span style="color:#e05252">✗ 未到达</span>')
-    + (d.screenshot ? `<img src="${{d.screenshot}}">` : '');
-  moveTip(e);
-}}).on('mousemove', moveTip).on('mouseout', () => tooltip.style.display='none');
-function moveTip(e) {{ tooltip.style.left=(e.pageX+12)+'px'; tooltip.style.top=(e.pageY-28)+'px'; }}
-
-let selectedId = null;
-nodeSel.on('click', (e,d) => {{ e.stopPropagation(); selectedId=d.id; showDetail(d); highlight(d.id); }});
-svg.on('click', () => {{ selectedId=null; clearHi(); document.getElementById('detail-empty').style.display=''; document.getElementById('detail-content').style.display='none'; }});
-
-// Edge interaction: the wide transparent hitzone layer catches clicks/hovers so
-// thin edges are easy to hit. Click → edge-semantics detail; hover → tooltip.
-linkHitSel
-  .on('click', (e,d) => {{ e.stopPropagation(); selectedId=null; showEdgeDetail(d); }})
-  .on('mouseover', (e,d) => {{
-    const s=edgeEndpoint(d,'source'), t=edgeEndpoint(d,'target');
-    tooltip.style.display='block';
-    tooltip.innerHTML = `<b style="color:${{d._color}}">${{d.status||'static-only'}}</b>`
-      + `<br>${{nodeById[s]?.label||s}} → ${{nodeById[t]?.label||t}}`
-      + `<br><span style="color:#aaa">${{d._label||d.mechanism||''}}</span>`
-      + (d._guardtext ? `<br><span style="color:#f39c12">前置: ${{d._guardtext}}</span>` : '');
-    moveTip(e);
-  }}).on('mousemove', moveTip).on('mouseout', () => tooltip.style.display='none');
-
-function edgeEndpoint(l, which) {{ const x=l[which]; return typeof x==='object'?x.id:x; }}
-
-function highlight(id) {{
-  const nb=new Set([id]);
-  GRAPH.links.forEach(l => {{ const s=edgeEndpoint(l,'source'),t=edgeEndpoint(l,'target'); if(s===id||t===id){{nb.add(s);nb.add(t);}} }});
-  nodeSel.classed('dimmed', nd => !nb.has(nd.id));
-  linkSel.classed('dimmed', l => edgeEndpoint(l,'source')!==id && edgeEndpoint(l,'target')!==id)
-         .classed('highlighted', l => edgeEndpoint(l,'source')===id || edgeEndpoint(l,'target')===id);
-}}
-function clearHi() {{ nodeSel.classed('dimmed',false); linkSel.classed('dimmed',false).classed('highlighted',false); }}
-
-function edgeHtml(edges, dir) {{
-  if (!edges.length) return '<div style="color:#666;font-size:11px">无</div>';
-  return edges.map(e => {{
-    const other = dir==='out' ? edgeEndpoint(e,'target') : edgeEndpoint(e,'source');
-    const on = nodeById[other];
-    const col = e._color;
-    const op = e._label ? `<b>${{e._label}}</b>` : (e.mechanism||'');
-    const conf = (e.confidence!=null && e.confidence<1) ? ` <span style="color:#f39c12">≈${{(e.confidence*100).toFixed(0)}}%</span>` : '';
-    const guard = e._guardtext ? `<span class="guard">前置: ${{e._guardtext}}</span> · ` : '';
-    const trig = e.trigger ? String(e.trigger).replace(/^onClick@/,'').split(/[\\\\/]/).pop() : '';
-    return `<div class="edge-item" onclick="goEdge('${{other}}')">`
-      + `<div class="edge-top"><span class="edge-dot" style="background:${{col}}"></span>`
-      + `<span style="color:${{col}};font-size:10px">${{e.status||'static-only'}}</span>`
-      + `<span style="flex:1">${{dir==='out'?'→':'←'}} ${{on?.label||other}}</span>${{conf}}</div>`
-      + `<div class="edge-sub">${{guard}}操作: ${{op}} <span style="color:#667">[${{e.mechanism||'?'}}]</span>${{trig?` · ${{trig}}`:''}}</div>`
-      + `</div>`;
-  }}).join('');
-}}
-
-function showDetail(d) {{
-  document.getElementById('detail-empty').style.display='none';
-  const panel = document.getElementById('detail-content'); panel.style.display='';
-  const outE = GRAPH.links.filter(l => edgeEndpoint(l,'source')===d.id);
-  const inE  = GRAPH.links.filter(l => edgeEndpoint(l,'target')===d.id);
-  const statusColor = d.reached ? '#2ecc71' : (d.status==='unreachable'?'#e05252':'#f39c12');
-  panel.innerHTML =
-    (d.screenshot ? `<img class="shot" src="${{d.screenshot}}" onerror="this.style.display='none'">` : '')
-    + `<h2 style="color:${{d._color}}">${{d.label || d.id}}</h2>`
-    + `<div class="detail-kv"><span class="k">ID</span><span class="v">${{d.id}}</span></div>`
-    + `<div class="detail-kv"><span class="k">类型</span><span class="v" style="color:${{d._color}}">${{d._zh||d.kind}}</span></div>`
-    + `<div class="detail-kv"><span class="k">到达</span><span class="v" style="color:${{statusColor}}">${{d.reached?'✓ 已到达':'✗ 未到达'}} (${{d.status||'static-only'}})</span></div>`
-    + (d.reached && d.verify ? `<div class="detail-kv"><span class="k">验证</span><span class="v" style="color:${{d.verify==='structural'?'#f39c12':'#2ecc71'}}">${{d.verify==='structural'?'结构(身份待核)':d.verify}}</span></div>` : '')
-    + (d.phase ? `<div class="detail-kv"><span class="k">相位</span><span class="v">${{d.phase}}</span></div>` : '')
-    + (d.env_state ? `<div class="detail-kv"><span class="k">旁路原因</span><span class="v" style="color:#c78">${{d.env_state}}</span></div>` : '')
-    + (d.view_signature ? `<div class="detail-kv"><span class="k">页面签名</span><span class="v" style="font-size:10px">${{d.view_signature}}</span></div>` : '')
-    + (d.view_tree ? `<div class="detail-kv"><span class="k">视图树</span><span class="v"><a href="${{d.view_tree}}" style="color:#4a90d9" target="_blank">${{d.view_tree}}</a></span></div>` : '')
-    + (d.declared_at ? `<div class="detail-kv"><span class="k">声明位置</span><span class="v" style="font-size:10px">${{d.declared_at}}</span></div>` : '')
-    + `<div class="detail-kv" style="margin-top:10px"><span class="k">跳出边</span><span class="v">${{outE.length}} 条</span></div>`
-    + `<div class="edge-list">${{edgeHtml(outE,'out')}}</div>`
-    + `<div class="detail-kv" style="margin-top:8px"><span class="k">跳入边</span><span class="v">${{inE.length}} 条</span></div>`
-    + `<div class="edge-list">${{edgeHtml(inE,'in')}}</div>`;
-  appendEvidence({{provenance:d.provenance, declared_at:d.declared_at, expected:d.expected, widgets:d.widgets, extra:d.extra}});
-}}
-
-function appendEvidence(value) {{
-  const pre = document.createElement('pre');
-  pre.style.cssText = 'white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px';
-  pre.textContent = JSON.stringify(value, null, 2);
-  document.getElementById('detail-content').appendChild(pre);
-}}
-
-function showEdgeDetail(e) {{
-  document.getElementById('detail-empty').style.display='none';
-  const panel = document.getElementById('detail-content'); panel.style.display='';
-  const sid = edgeEndpoint(e,'source'), tid = edgeEndpoint(e,'target');
-  const s = nodeById[sid], t = nodeById[tid];
-  const st = e.status || 'static-only';
-  const conf = (e.confidence!=null && e.confidence<1) ? `≈${{(e.confidence*100).toFixed(0)}}%` : '100%';
-  const trig = e.trigger ? String(e.trigger).replace(/^onClick@/,'') : '';
-  panel.innerHTML =
-      `<h2 style="color:${{e._color}}">${{s?.label||sid}} → ${{t?.label||tid}}</h2>`
-    + `<div class="detail-kv"><span class="k">状态</span><span class="v" style="color:${{e._color}}">${{st}}</span></div>`
-    + `<div class="detail-kv"><span class="k">机制</span><span class="v">${{e.mechanism||'?'}}</span></div>`
-    + (e._label ? `<div class="detail-kv"><span class="k">操作</span><span class="v">${{e._label}}</span></div>` : '')
-    + (e._guardtext ? `<div class="detail-kv"><span class="k">前置</span><span class="v" style="color:#f39c12">${{e._guardtext}}</span></div>` : '')
-    + `<div class="detail-kv"><span class="k">置信度</span><span class="v">${{conf}}</span></div>`
-    + (e.provenance ? `<div class="detail-kv"><span class="k">来源</span><span class="v">${{e.provenance}}</span></div>` : '')
-    + (trig ? `<div class="detail-kv"><span class="k">触发</span><span class="v" style="font-size:10px">${{trig}}</span></div>` : '')
-    + `<div class="detail-kv" style="margin-top:10px"><span class="k">起点</span><span class="v edge-nav" onclick="goEdge('${{sid}}')">${{s?.label||sid}}</span></div>`
-    + `<div class="detail-kv"><span class="k">终点</span><span class="v edge-nav" onclick="goEdge('${{tid}}')">${{t?.label||tid}}</span></div>`;
-  appendEvidence({{provenance:e.provenance, trigger:e.trigger, args:e.args, guard:e.guard}});
-}}
-
-window.goEdge = function(id) {{
-  const d = nodeById[id]; if (!d) return;
-  selectedId=id; showDetail(d); highlight(id);
-  svg.transition().duration(500).call(zoom.transform, d3.zoomIdentity.translate(width()/2-d.x, height()/2-d.y));
-}};
-
-document.getElementById('search').addEventListener('input', function() {{
-  const q=this.value.toLowerCase().trim();
-  if (!q) {{ clearHi(); return; }}
-  const m=new Set(GRAPH.nodes.filter(n => (n.label||'').toLowerCase().includes(q) || n.id.toLowerCase().includes(q)).map(n=>n.id));
-  nodeSel.classed('dimmed', d => !m.has(d.id));
-  linkSel.classed('dimmed', true).classed('highlighted', false);
-}});
-
-document.getElementById("source-filter").addEventListener("change", applyFilters);
-function applyFilters() {{
-  const source = document.getElementById("source-filter").value;
-  nodeSel.style("display", d => !source || d.provenance === source ? null : "none");
-  linkSel.style("display", d => !source || d.provenance === source ? null : "none");
-  linkHitSel.style("display", d => !source || d.provenance === source ? null : "none");
-  nodeSel.classed('dimmed', d => !activeKinds.has(kindOf(d)));
-  linkSel.classed('dimmed', l => {{
-    const s=nodeById[edgeEndpoint(l,'source')], t=nodeById[edgeEndpoint(l,'target')];
-    return !(s&&activeKinds.has(kindOf(s))) || !(t&&activeKinds.has(kindOf(t)));
-  }});
-}}
-
-let clusterMode=false; const kindPos={{}};
-const R = Math.min(width(),height())*0.38;
-kinds.forEach((k,i) => {{ const a=(i/kinds.length)*2*Math.PI-Math.PI/2; kindPos[k]=[width()/2+R*Math.cos(a), height()/2+R*Math.sin(a)]; }});
-document.getElementById('btn-cluster').addEventListener('click', () => {{
-  clusterMode=!clusterMode;
-  document.getElementById('btn-cluster').textContent = clusterMode?'自由布局':'聚类模式';
-  if (clusterMode) {{
-    sim.force('cluster', alpha => GRAPH.nodes.forEach(d => {{ const [cx,cy]=kindPos[kindOf(d)]||[width()/2,height()/2]; d.vx+=(cx-d.x)*alpha*0.08; d.vy+=(cy-d.y)*alpha*0.08; }})).alphaTarget(.3).restart();
-    setTimeout(()=>sim.alphaTarget(0),2000);
-  }} else {{ sim.force('cluster',null).alphaTarget(.3).restart(); setTimeout(()=>sim.alphaTarget(0),2000); }}
-}});
-document.getElementById('btn-reset').addEventListener('click', () => {{ sim.alpha(1).restart(); clearHi(); }});
-document.getElementById('btn-center').addEventListener('click', () => {{ svg.transition().duration(600).call(zoom.transform, d3.zoomIdentity); }});
-window.addEventListener('resize', () => sim.force('center', d3.forceCenter(width()/2,height()/2)).alpha(.3).restart());
-</script>
-</body>
-</html>
-"""
-    with open(html_path, "w", encoding="utf-8") as f:
-        f.write(html)
-    print(f"Written: {html_path}  ({os.path.getsize(html_path)//1024} KB)")
-
-
-if __name__ == "__main__":
-    main()
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Interactive HTML visualization of a reconciled UTG (guided crawl output).
+
+  python scripts/utg_html.py <workspace>
+
+Reads <workspace>/utg.json, writes <workspace>/utg.html. Self-contained; D3 v7
+embedded from the bundled MIT-licensed distribution. Extends android-utg-static's renderer with the two things the crawler
+adds:
+
+  * NODE  = a page: the sidebar shows the captured screenshot thumbnail, the
+    runtime view signature, reached/unreached status, and a link to view.xml.
+  * EDGE  = a navigation with SEMANTICS: precondition (guard), operation
+    (mechanism + on-screen label), status (confirmed / static-only /
+    dynamic-only / blocked) and confidence. Edges are colored by STATUS so the
+    reconciliation is visible at a glance.
+
+Screenshots are referenced by RELATIVE path, so the HTML must live in the same
+workspace directory as the p*/route_*/overlay_* page folders (it does).
+"""
+import json
+import os
+import sys
+from pathlib import Path
+from collections import Counter
+
+# ── Node kind palette ─────────────────────────────────────────────────────────
+KIND_META = {
+    "activity":              {"color": "#e05252", "zh": "Activity"},
+    "compose-route":         {"color": "#4a90d9", "zh": "路由页面"},
+    "compose-route-variant": {"color": "#7db8e8", "zh": "数据状态变体"},
+    "fragment":              {"color": "#e07d52", "zh": "Fragment"},
+    "voyager-screen":        {"color": "#9b59b6", "zh": "Voyager 页面"},
+    "dialog":                {"color": "#f39c12", "zh": "对话框"},
+    "sheet":                 {"color": "#f1c40f", "zh": "底部弹窗"},
+    "menu":                  {"color": "#2ecc71", "zh": "菜单"},
+    "mode":                  {"color": "#8e44ad", "zh": "交互模式"},
+    "page":                  {"color": "#4a90d9", "zh": "页面"},
+    "dynamic":               {"color": "#1abc9c", "zh": "动态新增页面"},
+    "logical-entry":         {"color": "#9b59b6", "zh": "逻辑入口"},
+    "host-activity":         {"color": "#95a5a6", "zh": "页面宿主"},
+    "sentinel":              {"color": "#c0392b", "zh": "阻断哨兵"},
+    "unknown":               {"color": "#95a5a6", "zh": "未知"},
+}
+
+# ── Edge STATUS palette (the reconciliation dimension) ──────────────────────────
+STATUS_META = {
+    "confirmed":    {"color": "#2ecc71", "dash": "",      "zh": "已确认(动态复现)"},
+    "static-only":  {"color": "#8894a8", "dash": "5 4",   "zh": "仅静态(未验证)"},
+    "dynamic-only": {"color": "#4a90d9", "dash": "",       "zh": "仅动态(静态漏掉)"},
+    "blocked":      {"color": "#e05252", "dash": "3 3",   "zh": "阻断(敏感/外部)"},
+}
+
+
+def _guard_text(guard):
+    if not guard:
+        return ""
+    if isinstance(guard, dict):
+        kind = guard.get("kind", "")
+        txt = guard.get("text", "")
+        return f"{txt}（{kind}）" if kind else txt
+    return str(guard)
+
+
+def main():
+    ws = sys.argv[1] if len(sys.argv) > 1 else "."
+    utg_path = os.path.join(ws, "utg.json")
+    html_path = os.path.join(ws, "utg.html")
+    if not os.path.exists(utg_path):
+        raise SystemExit(f"utg.json not found in {ws}")
+
+    utg = json.load(open(utg_path, encoding="utf-8"))
+    nodes = utg.get("nodes", [])
+    links = utg.get("links") or utg.get("edges") or []
+
+    for n in nodes:
+        n["_display_kind"] = "logical-entry" if (n.get("extra") or {}).get("logical_entry") else n.get("kind", "unknown")
+        meta = KIND_META.get(n["_display_kind"], KIND_META["unknown"])
+        n["_color"] = meta["color"]
+        n["_zh"] = meta["zh"]
+        # dim nodes that are unreachable OR never reached by the crawl
+        n["_dim"] = (n.get("status") == "unreachable") or (n.get("reached") is False
+                    and n.get("kind") not in ("sentinel",))
+        n["_guardtext"] = ""
+
+    for e in links:
+        st = e.get("status", "static-only")
+        sm = STATUS_META.get(st, STATUS_META["static-only"])
+        e["_color"] = sm["color"]
+        e["_dash"] = sm["dash"]
+        e["_guardtext"] = _guard_text(e.get("guard"))
+        e["_label"] = (e.get("args") or {}).get("label", "")
+
+    kind_counts = Counter(n["_display_kind"] for n in nodes)
+    status_counts = Counter(e.get("status", "static-only") for e in links)
+    reached = sum(1 for n in nodes if n.get("reached"))
+    pages = sum(1 for n in nodes if n.get("kind") not in ("sentinel",))
+
+    stats_html = "\n".join(
+        f'<span class="badge" style="background:{KIND_META.get(k, KIND_META["unknown"])["color"]}">'
+        f'{KIND_META.get(k, {}).get("zh", k)}: {v}</span>'
+        for k, v in sorted(kind_counts.items(), key=lambda x: -x[1])
+    )
+    status_html = "\n".join(
+        f'<span class="badge" style="background:{STATUS_META.get(s, {}).get("color", "#888")}">'
+        f'{STATUS_META.get(s, {}).get("zh", s)}: {v}</span>'
+        for s, v in sorted(status_counts.items(), key=lambda x: -x[1])
+    )
+
+    graph_json = json.dumps({"nodes": nodes, "links": links}, ensure_ascii=False).replace("<", "\\u003c")
+    review_json = json.dumps({"audit": utg.get("graph", {}).get("discovery_audit", []), "unresolved": utg.get("graph", {}).get("unresolved", []), "boundary_transitions": utg.get("graph", {}).get("boundary_transitions", [])}, ensure_ascii=False).replace("<", "\\u003c")
+    d3_source = (Path(__file__).parent / "vendor" / "d3-7.9.0.min.js").read_text(encoding="utf-8")
+    kind_meta_json = json.dumps(KIND_META, ensure_ascii=False)
+    status_meta_json = json.dumps(STATUS_META, ensure_ascii=False)
+
+    html = f"""<!DOCTYPE html>
+<html lang="zh">
+<head>
+<meta charset="UTF-8">
+<title>UTG — {os.path.basename(os.path.abspath(ws))}</title>
+<script>{d3_source}</script>
+<style>
+* {{ box-sizing: border-box; margin: 0; padding: 0; }}
+body {{ font-family: system-ui, sans-serif; background: #1a1a2e; color: #eee; display: flex; height: 100vh; overflow: hidden; }}
+#sidebar {{ width: 360px; min-width: 260px; max-width: 520px; background: #16213e; border-right: 1px solid #0f3460; display: flex; flex-direction: column; overflow: hidden; }}
+#sidebar-header {{ padding: 14px 16px 10px; background: #0f3460; flex-shrink: 0; }}
+#sidebar-header h1 {{ font-size: 15px; font-weight: 700; }}
+#sidebar-header .sub {{ font-size: 11px; color: #aaa; margin-top: 3px; }}
+.badge {{ display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: 10px; color: #fff; margin: 2px 2px 2px 0; opacity: .9; }}
+#stats {{ padding: 10px 16px; border-bottom: 1px solid #0f3460; flex-shrink: 0; }}
+#stats .section-label {{ font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: .05em; margin: 6px 0 4px; }}
+#filter-box {{ padding: 10px 16px; border-bottom: 1px solid #0f3460; flex-shrink: 0; }}
+#filter-box input {{ width: 100%; padding: 6px 10px; border-radius: 6px; background: #0d0d1a; border: 1px solid #0f3460; color: #eee; font-size: 13px; }}
+#filter-box input:focus {{ outline: none; border-color: #4a90d9; }}
+#kind-filters {{ display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }}
+#kind-filters button {{ font-size: 10px; border: none; border-radius: 10px; padding: 2px 8px; cursor: pointer; opacity: .6; color: #fff; transition: opacity .15s; }}
+#kind-filters button.active {{ opacity: 1; }}
+#detail-panel {{ flex: 1; overflow-y: auto; padding: 12px 16px; }}
+#detail-panel h2 {{ font-size: 14px; margin-bottom: 8px; }}
+.shot {{ width: 100%; max-height: 340px; object-fit: contain; border: 1px solid #0f3460; border-radius: 6px; background:#000; margin-bottom: 10px; }}
+.detail-kv {{ margin-bottom: 5px; font-size: 12px; }}
+.detail-kv .k {{ color: #888; width: 78px; display: inline-block; vertical-align: top; }}
+.detail-kv .v {{ color: #eee; word-break: break-all; }}
+.edge-list {{ margin-top: 4px; }}
+.edge-item {{ font-size: 11px; padding: 5px 7px; margin: 3px 0; border-radius: 5px; background: #1a1a2e; cursor: pointer; }}
+.edge-item:hover {{ background: #0f3460; }}
+.edge-top {{ display: flex; align-items: center; gap: 6px; }}
+.edge-dot {{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }}
+.edge-sub {{ color: #9aa4b8; font-size: 10px; margin-top: 2px; padding-left: 14px; }}
+.edge-sub .guard {{ color: #f39c12; }}
+svg {{ width: 100%; height: 100%; display: block; }}
+#canvas-wrap {{ flex: 1; position: relative; overflow: hidden; }}
+.node circle {{ stroke-width: 2px; cursor: pointer; transition: r .1s; }}
+.node circle.dim {{ stroke-dasharray: 4 3; opacity: .45; }}
+.node text {{ pointer-events: auto; cursor: pointer; font-size: 10px; fill: #ddd; text-shadow: 0 0 3px #000, 0 0 3px #000; }}
+.link {{ fill: none; stroke-width: 1.6px; opacity: .6; pointer-events: none; }}
+.link.highlighted {{ opacity: 1; stroke-width: 2.6px; }}
+.link-hit {{ fill: none; stroke: transparent; stroke-width: 14px; pointer-events: stroke; cursor: pointer; }}
+.edge-nav {{ cursor: pointer; color: #4a90d9; }}
+.edge-nav:hover {{ text-decoration: underline; }}
+.node.dimmed circle {{ opacity: .15; }}
+.node.dimmed text {{ opacity: .15; }}
+.link.dimmed {{ opacity: .06; }}
+#tooltip {{ position: absolute; pointer-events: none; background: rgba(15,52,96,.97); border: 1px solid #4a90d9; border-radius: 6px; padding: 6px 10px; font-size: 12px; max-width: 240px; display: none; box-shadow: 0 4px 16px rgba(0,0,0,.5); }}
+#tooltip img {{ width: 120px; display:block; margin-top:5px; border-radius:4px; }}
+#controls {{ position: absolute; bottom: 14px; right: 14px; display: flex; gap: 8px; }}
+#controls button {{ background: #0f3460; border: 1px solid #4a90d9; color: #eee; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; }}
+#controls button:hover {{ background: #1a4a7a; }}
+#legend {{ position: absolute; top: 10px; right: 10px; background: rgba(15,33,62,.92); border: 1px solid #0f3460; border-radius: 6px; padding: 8px 12px; font-size: 11px; }}
+#legend .l-row {{ display: flex; align-items: center; gap: 6px; margin: 3px 0; }}
+#legend .l-line {{ width: 18px; height: 0; border-top: 3px solid; flex-shrink: 0; }}
+#legend .section-label {{ font-size: 9px; color:#888; text-transform:uppercase; margin: 4px 0 2px; }}
+</style>
+</head>
+<body>
+<div id="sidebar">
+  <div id="sidebar-header">
+    <h1>UI Transition Graph · 对账结果</h1>
+    <div class="sub">{pages} 页面 · {reached} 已到达 · {len(links)} 边</div>
+  </div>
+  <div id="stats">
+    <div class="section-label">节点分类</div>
+    {stats_html}
+    <div class="section-label">边状态(对账)</div>
+    {status_html}
+  </div>
+  <div id="filter-box">
+    <input id="search" type="text" placeholder="搜索节点 (名称 / ID)…">
+    <div id="kind-filters"></div>
+    <select id="source-filter"><option value="">全部来源</option><option value="appgraph">AppGraph</option><option value="ai-source-review">AI 修补</option><option value="ai-source-analysis">AI 源码分析</option></select>
+    <details><summary>修补与未解析项</summary><pre id="review-data" style="white-space:pre-wrap"></pre></details>
+  </div>
+  <div id="detail-panel">
+    <div id="detail-empty" style="color:#666;font-size:12px;margin-top:20px">点击图中节点查看截图与边语义</div>
+    <div id="detail-content" style="display:none"></div>
+  </div>
+</div>
+<div id="canvas-wrap">
+  <svg id="graph"></svg>
+  <div id="tooltip"></div>
+  <div id="legend"><div id="legend-items"></div></div>
+  <div id="controls">
+    <button id="btn-reset">重置视图</button>
+    <button id="btn-center">居中</button>
+    <button id="btn-cluster">聚类模式</button>
+  </div>
+</div>
+<script>
+const GRAPH = {graph_json};
+const REVIEW = {review_json};
+document.getElementById("review-data").textContent = JSON.stringify(REVIEW, null, 2);
+const KIND_META = {kind_meta_json};
+const kindOf = node => node._display_kind || node.kind;
+const STATUS_META = {status_meta_json};
+
+// ── Legend: node kinds + edge statuses ──
+const legendEl = document.getElementById('legend-items');
+let lg = '<div class="section-label">节点</div>';
+Object.entries(KIND_META).forEach(([k, m]) => {{
+  if (!GRAPH.nodes.some(n => kindOf(n) === k)) return;
+  lg += `<div class="l-row"><div style="width:10px;height:10px;border-radius:50%;background:${{m.color}}"></div><span>${{m.zh || k}}</span></div>`;
+}});
+lg += '<div class="section-label">边状态</div>';
+Object.entries(STATUS_META).forEach(([s, m]) => {{
+  if (!GRAPH.links.some(e => (e.status||'static-only') === s)) return;
+  lg += `<div class="l-row"><div class="l-line" style="border-top-style:${{m.dash?'dashed':'solid'}};border-color:${{m.color}}"></div><span>${{m.zh || s}}</span></div>`;
+}});
+legendEl.innerHTML = lg;
+
+// ── Kind filters ──
+const kinds = [...new Set(GRAPH.nodes.map(kindOf))];
+let activeKinds = new Set(kinds);
+const kindFiltersEl = document.getElementById('kind-filters');
+kinds.forEach(k => {{
+  const meta = KIND_META[k] || {{color:'#888'}};
+  const btn = document.createElement('button');
+  btn.textContent = (KIND_META[k]?.zh || k);
+  btn.style.background = meta.color;
+  btn.classList.add('active');
+  btn.addEventListener('click', () => {{
+    if (activeKinds.has(k)) {{ activeKinds.delete(k); btn.classList.remove('active'); }}
+    else {{ activeKinds.add(k); btn.classList.add('active'); }}
+    applyFilters();
+  }});
+  kindFiltersEl.appendChild(btn);
+}});
+
+const svg = d3.select('#graph');
+const width = () => document.getElementById('canvas-wrap').clientWidth;
+const height = () => document.getElementById('canvas-wrap').clientHeight;
+const defs = svg.append('defs');
+// one arrow marker per status color
+Object.entries(STATUS_META).forEach(([s, m]) => {{
+  defs.append('marker').attr('id','arrow-'+s).attr('viewBox','0 -5 10 10')
+    .attr('refX',22).attr('refY',0).attr('markerWidth',6).attr('markerHeight',6)
+    .attr('orient','auto').append('path').attr('d','M0,-5L10,0L0,5').attr('fill',m.color);
+}});
+const zoom = d3.zoom().scaleExtent([.05,4]).on('zoom', e => container.attr('transform', e.transform));
+svg.call(zoom);
+const container = svg.append('g');
+const linkGroup = container.append('g');
+const linkHitGroup = container.append('g');
+const nodeGroup = container.append('g');
+const nodeById = Object.fromEntries(GRAPH.nodes.map(n => [n.id, n]));
+const inDeg = {{}}, outDeg = {{}};
+GRAPH.nodes.forEach(n => {{ inDeg[n.id]=0; outDeg[n.id]=0; }});
+GRAPH.links.forEach(e => {{ outDeg[e.source]=(outDeg[e.source]||0)+1; inDeg[e.target]=(inDeg[e.target]||0)+1; }});
+
+// Separate parallel and opposing edges; a self-transition needs a visible loop.
+const edgeBundles = new Map();
+GRAPH.links.forEach(edge => {{
+  const pair = JSON.stringify([edge.source, edge.target].sort());
+  if (!edgeBundles.has(pair)) edgeBundles.set(pair, []);
+  edgeBundles.get(pair).push(edge);
+}});
+edgeBundles.forEach(bundle => bundle.forEach((edge, index) => {{
+  edge._bend = (index - (bundle.length - 1)/2) * 36 * (edge.source < edge.target ? 1 : -1);
+  edge._loop = 32 + index * 18;
+}}));
+function edgePath(edge) {{
+  const s=edge.source, t=edge.target;
+  if (s.id === t.id) {{ const r=edge._loop; return `M${{s.x}},${{s.y}} C${{s.x+r}},${{s.y-r*2}} ${{s.x-r}},${{s.y-r*2}} ${{s.x}},${{s.y}}`; }}
+  const dx=t.x-s.x, dy=t.y-s.y, length=Math.hypot(dx,dy)||1;
+  return `M${{s.x}},${{s.y}} Q${{(s.x+t.x)/2-dy/length*edge._bend}},${{(s.y+t.y)/2+dx/length*edge._bend}} ${{t.x}},${{t.y}}`;
+}}
+
+const sim = d3.forceSimulation(GRAPH.nodes)
+  .force('link', d3.forceLink(GRAPH.links).id(d => d.id).distance(110).strength(0.3))
+  .force('charge', d3.forceManyBody().strength(-240))
+  .force('center', d3.forceCenter(width()/2, height()/2))
+  .force('collision', d3.forceCollide(26))
+  .alphaDecay(0.02);
+
+const linkSel = linkGroup.selectAll('path').data(GRAPH.links).join('path').attr('fill','none')
+  .attr('class','link')
+  .attr('stroke', d => d._color)
+  .attr('stroke-dasharray', d => d._dash || null)
+  .attr('marker-end', d => `url(#arrow-${{d.status||'static-only'}})`);
+
+// Wide transparent hitzone lines so thin edges are easy to click/hover.
+const linkHitSel = linkHitGroup.selectAll('path').data(GRAPH.links).join('path').attr('fill','none')
+  .attr('class','link-hit');
+
+const nodeSel = nodeGroup.selectAll('g').data(GRAPH.nodes).join('g').attr('class','node')
+  .call(d3.drag()
+    .on('start', (e,d) => {{ if (!e.active) sim.alphaTarget(.3).restart(); d.fx=d.x; d.fy=d.y; }})
+    .on('drag',  (e,d) => {{ d.fx=e.x; d.fy=e.y; }})
+    .on('end',   (e,d) => {{ if (!e.active) sim.alphaTarget(0); d.fx=null; d.fy=null; }}));
+
+nodeSel.append('circle').attr('r', d => nodeRadius(d))
+  .attr('fill', d => d._color).attr('stroke', d => d3.color(d._color).brighter(.8))
+  .attr('class', d => d._dim ? 'dim' : '');
+nodeSel.append('text').attr('dy', d => nodeRadius(d) + 11).attr('text-anchor','middle')
+  .text(d => truncate(d.label || d.id, 18));
+
+function nodeRadius(d) {{ const deg=(inDeg[d.id]||0)+(outDeg[d.id]||0); return Math.max(8, Math.min(20, 8+deg*1.2)); }}
+function truncate(s,n) {{ s=String(s); return s.length>n ? s.slice(0,n-1)+'…' : s; }}
+
+sim.on('tick', () => {{
+  linkSel.attr('d',edgePath);
+  linkHitSel.attr('d',edgePath);
+  nodeSel.attr('transform', d => `translate(${{d.x}},${{d.y}})`);
+}});
+
+const tooltip = document.getElementById('tooltip');
+nodeSel.on('mouseover', (e,d) => {{
+  tooltip.style.display='block';
+  tooltip.innerHTML = `<b>${{d.label||d.id}}</b><br><span style="color:#aaa">${{d.kind}}</span>`
+    + `<br><span style="color:#4a90d9">入 ${{inDeg[d.id]||0}} · 出 ${{outDeg[d.id]||0}}</span>`
+    + (d.reached ? '<br><span style="color:#2ecc71">✓ 已到达</span>' : '<br><span style="color:#e05252">✗ 未到达</span>')
+    + (d.screenshot ? `<img src="${{d.screenshot}}">` : '');
+  moveTip(e);
+}}).on('mousemove', moveTip).on('mouseout', () => tooltip.style.display='none');
+function moveTip(e) {{ tooltip.style.left=(e.pageX+12)+'px'; tooltip.style.top=(e.pageY-28)+'px'; }}
+
+let selectedId = null;
+nodeSel.on('click', (e,d) => {{ e.stopPropagation(); selectedId=d.id; showDetail(d); highlight(d.id); }});
+svg.on('click', () => {{ selectedId=null; clearHi(); document.getElementById('detail-empty').style.display=''; document.getElementById('detail-content').style.display='none'; }});
+
+// Edge interaction: the wide transparent hitzone layer catches clicks/hovers so
+// thin edges are easy to hit. Click → edge-semantics detail; hover → tooltip.
+linkHitSel
+  .on('click', (e,d) => {{ e.stopPropagation(); selectedId=null; showEdgeDetail(d); }})
+  .on('mouseover', (e,d) => {{
+    const s=edgeEndpoint(d,'source'), t=edgeEndpoint(d,'target');
+    tooltip.style.display='block';
+    tooltip.innerHTML = `<b style="color:${{d._color}}">${{d.status||'static-only'}}</b>`
+      + `<br>${{nodeById[s]?.label||s}} → ${{nodeById[t]?.label||t}}`
+      + `<br><span style="color:#aaa">${{d._label||d.mechanism||''}}</span>`
+      + (d._guardtext ? `<br><span style="color:#f39c12">前置: ${{d._guardtext}}</span>` : '');
+    moveTip(e);
+  }}).on('mousemove', moveTip).on('mouseout', () => tooltip.style.display='none');
+
+function edgeEndpoint(l, which) {{ const x=l[which]; return typeof x==='object'?x.id:x; }}
+
+function highlight(id) {{
+  const nb=new Set([id]);
+  GRAPH.links.forEach(l => {{ const s=edgeEndpoint(l,'source'),t=edgeEndpoint(l,'target'); if(s===id||t===id){{nb.add(s);nb.add(t);}} }});
+  nodeSel.classed('dimmed', nd => !nb.has(nd.id));
+  linkSel.classed('dimmed', l => edgeEndpoint(l,'source')!==id && edgeEndpoint(l,'target')!==id)
+         .classed('highlighted', l => edgeEndpoint(l,'source')===id || edgeEndpoint(l,'target')===id);
+}}
+function clearHi() {{ nodeSel.classed('dimmed',false); linkSel.classed('dimmed',false).classed('highlighted',false); }}
+
+function edgeHtml(edges, dir) {{
+  if (!edges.length) return '<div style="color:#666;font-size:11px">无</div>';
+  return edges.map(e => {{
+    const other = dir==='out' ? edgeEndpoint(e,'target') : edgeEndpoint(e,'source');
+    const on = nodeById[other];
+    const col = e._color;
+    const op = e._label ? `<b>${{e._label}}</b>` : (e.mechanism||'');
+    const conf = (e.confidence!=null && e.confidence<1) ? ` <span style="color:#f39c12">≈${{(e.confidence*100).toFixed(0)}}%</span>` : '';
+    const guard = e._guardtext ? `<span class="guard">前置: ${{e._guardtext}}</span> · ` : '';
+    const trig = e.trigger ? String(e.trigger).replace(/^onClick@/,'').split(/[\\\\/]/).pop() : '';
+    return `<div class="edge-item" onclick="goEdge('${{other}}')">`
+      + `<div class="edge-top"><span class="edge-dot" style="background:${{col}}"></span>`
+      + `<span style="color:${{col}};font-size:10px">${{e.status||'static-only'}}</span>`
+      + `<span style="flex:1">${{dir==='out'?'→':'←'}} ${{on?.label||other}}</span>${{conf}}</div>`
+      + `<div class="edge-sub">${{guard}}操作: ${{op}} <span style="color:#667">[${{e.mechanism||'?'}}]</span>${{trig?` · ${{trig}}`:''}}</div>`
+      + `</div>`;
+  }}).join('');
+}}
+
+function showDetail(d) {{
+  document.getElementById('detail-empty').style.display='none';
+  const panel = document.getElementById('detail-content'); panel.style.display='';
+  const outE = GRAPH.links.filter(l => edgeEndpoint(l,'source')===d.id);
+  const inE  = GRAPH.links.filter(l => edgeEndpoint(l,'target')===d.id);
+  const statusColor = d.reached ? '#2ecc71' : (d.status==='unreachable'?'#e05252':'#f39c12');
+  panel.innerHTML =
+    (d.screenshot ? `<img class="shot" src="${{d.screenshot}}" onerror="this.style.display='none'">` : '')
+    + `<h2 style="color:${{d._color}}">${{d.label || d.id}}</h2>`
+    + `<div class="detail-kv"><span class="k">ID</span><span class="v">${{d.id}}</span></div>`
+    + `<div class="detail-kv"><span class="k">类型</span><span class="v" style="color:${{d._color}}">${{d._zh||d.kind}}</span></div>`
+    + `<div class="detail-kv"><span class="k">到达</span><span class="v" style="color:${{statusColor}}">${{d.reached?'✓ 已到达':'✗ 未到达'}} (${{d.status||'static-only'}})</span></div>`
+    + (d.reached && d.verify ? `<div class="detail-kv"><span class="k">验证</span><span class="v" style="color:${{d.verify==='structural'?'#f39c12':'#2ecc71'}}">${{d.verify==='structural'?'结构(身份待核)':d.verify}}</span></div>` : '')
+    + (d.phase ? `<div class="detail-kv"><span class="k">相位</span><span class="v">${{d.phase}}</span></div>` : '')
+    + (d.env_state ? `<div class="detail-kv"><span class="k">旁路原因</span><span class="v" style="color:#c78">${{d.env_state}}</span></div>` : '')
+    + (d.view_signature ? `<div class="detail-kv"><span class="k">页面签名</span><span class="v" style="font-size:10px">${{d.view_signature}}</span></div>` : '')
+    + (d.view_tree ? `<div class="detail-kv"><span class="k">视图树</span><span class="v"><a href="${{d.view_tree}}" style="color:#4a90d9" target="_blank">${{d.view_tree}}</a></span></div>` : '')
+    + (d.declared_at ? `<div class="detail-kv"><span class="k">声明位置</span><span class="v" style="font-size:10px">${{d.declared_at}}</span></div>` : '')
+    + `<div class="detail-kv" style="margin-top:10px"><span class="k">跳出边</span><span class="v">${{outE.length}} 条</span></div>`
+    + `<div class="edge-list">${{edgeHtml(outE,'out')}}</div>`
+    + `<div class="detail-kv" style="margin-top:8px"><span class="k">跳入边</span><span class="v">${{inE.length}} 条</span></div>`
+    + `<div class="edge-list">${{edgeHtml(inE,'in')}}</div>`;
+  appendEvidence({{provenance:d.provenance, declared_at:d.declared_at, expected:d.expected, widgets:d.widgets, extra:d.extra}});
+}}
+
+function appendEvidence(value) {{
+  const pre = document.createElement('pre');
+  pre.style.cssText = 'white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px';
+  pre.textContent = JSON.stringify(value, null, 2);
+  document.getElementById('detail-content').appendChild(pre);
+}}
+
+function showEdgeDetail(e) {{
+  document.getElementById('detail-empty').style.display='none';
+  const panel = document.getElementById('detail-content'); panel.style.display='';
+  const sid = edgeEndpoint(e,'source'), tid = edgeEndpoint(e,'target');
+  const s = nodeById[sid], t = nodeById[tid];
+  const st = e.status || 'static-only';
+  const conf = (e.confidence!=null && e.confidence<1) ? `≈${{(e.confidence*100).toFixed(0)}}%` : '100%';
+  const trig = e.trigger ? String(e.trigger).replace(/^onClick@/,'') : '';
+  panel.innerHTML =
+      `<h2 style="color:${{e._color}}">${{s?.label||sid}} → ${{t?.label||tid}}</h2>`
+    + `<div class="detail-kv"><span class="k">状态</span><span class="v" style="color:${{e._color}}">${{st}}</span></div>`
+    + `<div class="detail-kv"><span class="k">机制</span><span class="v">${{e.mechanism||'?'}}</span></div>`
+    + (e._label ? `<div class="detail-kv"><span class="k">操作</span><span class="v">${{e._label}}</span></div>` : '')
+    + (e._guardtext ? `<div class="detail-kv"><span class="k">前置</span><span class="v" style="color:#f39c12">${{e._guardtext}}</span></div>` : '')
+    + `<div class="detail-kv"><span class="k">置信度</span><span class="v">${{conf}}</span></div>`
+    + (e.provenance ? `<div class="detail-kv"><span class="k">来源</span><span class="v">${{e.provenance}}</span></div>` : '')
+    + (trig ? `<div class="detail-kv"><span class="k">触发</span><span class="v" style="font-size:10px">${{trig}}</span></div>` : '')
+    + `<div class="detail-kv" style="margin-top:10px"><span class="k">起点</span><span class="v edge-nav" onclick="goEdge('${{sid}}')">${{s?.label||sid}}</span></div>`
+    + `<div class="detail-kv"><span class="k">终点</span><span class="v edge-nav" onclick="goEdge('${{tid}}')">${{t?.label||tid}}</span></div>`;
+  appendEvidence({{provenance:e.provenance, trigger:e.trigger, args:e.args, guard:e.guard}});
+}}
+
+window.goEdge = function(id) {{
+  const d = nodeById[id]; if (!d) return;
+  selectedId=id; showDetail(d); highlight(id);
+  svg.transition().duration(500).call(zoom.transform, d3.zoomIdentity.translate(width()/2-d.x, height()/2-d.y));
+}};
+
+document.getElementById('search').addEventListener('input', function() {{
+  const q=this.value.toLowerCase().trim();
+  if (!q) {{ clearHi(); return; }}
+  const m=new Set(GRAPH.nodes.filter(n => (n.label||'').toLowerCase().includes(q) || n.id.toLowerCase().includes(q)).map(n=>n.id));
+  nodeSel.classed('dimmed', d => !m.has(d.id));
+  linkSel.classed('dimmed', true).classed('highlighted', false);
+}});
+
+document.getElementById("source-filter").addEventListener("change", applyFilters);
+function applyFilters() {{
+  const source = document.getElementById("source-filter").value;
+  nodeSel.style("display", d => !source || d.provenance === source ? null : "none");
+  linkSel.style("display", d => !source || d.provenance === source ? null : "none");
+  linkHitSel.style("display", d => !source || d.provenance === source ? null : "none");
+  nodeSel.classed('dimmed', d => !activeKinds.has(kindOf(d)));
+  linkSel.classed('dimmed', l => {{
+    const s=nodeById[edgeEndpoint(l,'source')], t=nodeById[edgeEndpoint(l,'target')];
+    return !(s&&activeKinds.has(kindOf(s))) || !(t&&activeKinds.has(kindOf(t)));
+  }});
+}}
+
+let clusterMode=false; const kindPos={{}};
+const R = Math.min(width(),height())*0.38;
+kinds.forEach((k,i) => {{ const a=(i/kinds.length)*2*Math.PI-Math.PI/2; kindPos[k]=[width()/2+R*Math.cos(a), height()/2+R*Math.sin(a)]; }});
+document.getElementById('btn-cluster').addEventListener('click', () => {{
+  clusterMode=!clusterMode;
+  document.getElementById('btn-cluster').textContent = clusterMode?'自由布局':'聚类模式';
+  if (clusterMode) {{
+    sim.force('cluster', alpha => GRAPH.nodes.forEach(d => {{ const [cx,cy]=kindPos[kindOf(d)]||[width()/2,height()/2]; d.vx+=(cx-d.x)*alpha*0.08; d.vy+=(cy-d.y)*alpha*0.08; }})).alphaTarget(.3).restart();
+    setTimeout(()=>sim.alphaTarget(0),2000);
+  }} else {{ sim.force('cluster',null).alphaTarget(.3).restart(); setTimeout(()=>sim.alphaTarget(0),2000); }}
+}});
+document.getElementById('btn-reset').addEventListener('click', () => {{ sim.alpha(1).restart(); clearHi(); }});
+document.getElementById('btn-center').addEventListener('click', () => {{ svg.transition().duration(600).call(zoom.transform, d3.zoomIdentity); }});
+window.addEventListener('resize', () => sim.force('center', d3.forceCenter(width()/2,height()/2)).alpha(.3).restart());
+</script>
+</body>
+</html>
+"""
+    with open(html_path, "w", encoding="utf-8") as f:
+        f.write(html)
+    print(f"Written: {html_path}  ({os.path.getsize(html_path)//1024} KB)")
+
+
+if __name__ == "__main__":
+    main()