cseq 0.0.1__py3-none-any.whl

cseq/html.py

@@ -0,0 +1,485 @@
+from __future__ import annotations
+
+from html import escape
+import json
+from typing import Iterable
+
+from .model import CpuEvidenceRecord
+from .runtime import TraceSession
+from .sequence import SequenceModel, build_fold_plan
+from .trace_diff import TraceDiffResult
+from .trace_analysis import MarkerSuggestion, discover_correlations, fit_clock_alignments
+
+
+def _why_next(model: SequenceModel) -> dict[str, dict[str, list[dict[str, str]]]]:
+    functions = {model.entry}
+    for m in model.messages:
+        functions.add(m.caller); functions.add(m.callee)
+    result: dict[str, dict[str, list[dict[str, str]]]] = {}
+    for name in sorted(functions):
+        why = [
+            {"function": m.caller, "label": m.label}
+            for m in model.messages if m.callee == name and m.caller != name
+        ]
+        nxt = [
+            {"function": m.callee, "label": m.label}
+            for m in model.messages if m.caller == name and m.callee != name
+        ]
+        result[name] = {"why": why, "next": nxt}
+    return result
+
+
+def _cpu_evidence_rows(cpu_evidence: Iterable[CpuEvidenceRecord]) -> list[dict[str, object]]:
+    return [
+        {
+            "function_id": e.target_function_id,
+            "layer": e.layer.value,
+            "kind": e.value_kind.value,
+            "value": e.value,
+            "provenance": e.provenance,
+            "explicit_override": e.explicit_override,
+        }
+        for e in cpu_evidence
+    ]
+
+
+def _runtime_rows(runtime_session: TraceSession | None) -> list[dict[str, object]]:
+    if runtime_session is None:
+        return []
+    return [
+        {
+            "event_index": e.event_index,
+            "marker_id": e.marker_id,
+            "timestamp": e.timestamp_raw,
+            "cpu": e.cpu_hint,
+            "task": e.task_hint,
+            "clock_domain": e.clock_domain,
+            "message": e.message,
+            "payload": e.payload_dict(),
+        }
+        for e in runtime_session.events
+    ]
+
+
+def build_html_payload(
+    model: SequenceModel,
+    *,
+    runtime_session: TraceSession | None = None,
+    cpu_evidence: Iterable[CpuEvidenceRecord] = (),
+    explanations: dict[str, list[dict[str, object]]] | None = None,
+    trace_diff: TraceDiffResult | None = None,
+    marker_suggestions: list[MarkerSuggestion] | None = None,
+    viewport_size: int = 200,
+    max_sequence_messages: int = 300,
+) -> dict[str, object]:
+    size = max(1, int(viewport_size))
+    rows = [
+        {
+            "caller": m.caller,
+            "callee": m.callee,
+            "label": m.label,
+            "external_as_self": m.external_as_self,
+            "control_context": list(m.control_context),
+            "recursive": m.recursive,
+        }
+        for m in model.messages
+    ]
+    event_count = len(runtime_session.events) if runtime_session else 0
+    correlations = discover_correlations(runtime_session.events) if runtime_session else []
+    clock_alignments = fit_clock_alignments(runtime_session.events, correlations) if runtime_session else []
+    fold_plan = build_fold_plan(model, max_sequence_messages)
+    return {
+        "entry": model.entry,
+        "messages": rows,
+        "sequence_regions": [
+            {"context": list(r.context), "start_message": r.start_message, "end_message": r.end_message}
+            for r in model.regions
+        ],
+        "sequence_fold": {
+            "max_messages": max(1, int(max_sequence_messages)),
+            "visible_indices": list(fold_plan.visible_indices),
+            "collapsed": [
+                {"start_message": x.start_message, "end_message": x.end_message, "hidden_count": x.hidden_count, "reason": x.reason}
+                for x in fold_plan.collapsed
+            ],
+        },
+        "why_next": _why_next(model),
+        "cpu_evidence": _cpu_evidence_rows(cpu_evidence),
+        "explanations": explanations or {},
+        "runtime": {
+            "session": runtime_session.name if runtime_session else None,
+            "events": _runtime_rows(runtime_session),
+            "correlations": [
+                {
+                    "left_event_index": r.left_event_index,
+                    "right_event_index": r.right_event_index,
+                    "relation_type": r.relation_type.value,
+                    "keys": list(r.keys),
+                    "values": list(r.values),
+                    "score": r.score,
+                } for r in correlations
+            ],
+            "clock_alignments": [
+                {
+                    "source_domain": a.source_domain,
+                    "target_domain": a.target_domain,
+                    "scale": a.scale,
+                    "offset_seconds": a.offset_seconds,
+                    "anchor_count": a.anchor_count,
+                    "max_abs_residual_seconds": a.max_abs_residual_seconds,
+                    "confidence": a.confidence,
+                } for a in clock_alignments
+            ],
+            "tiles": [
+                {
+                    "tile_index": tile_index,
+                    "start_offset": tile_start,
+                    "end_offset": tile_start + len(chunk) - 1,
+                    "start_event_index": chunk[0].event_index,
+                    "end_event_index": chunk[-1].event_index,
+                    "cpus": sorted({e.cpu_hint for e in chunk if e.cpu_hint}),
+                    "tasks": sorted({e.task_hint for e in chunk if e.task_hint}),
+                    "marker_count": len({e.marker_id for e in chunk}),
+                }
+                for tile_index, tile_start in enumerate(range(0, event_count, size))
+                for chunk in [runtime_session.events[tile_start:tile_start + size]]
+            ] if runtime_session else [],
+        },
+        "trace_diff": None if trace_diff is None else {
+            "left_session": trace_diff.left_session,
+            "right_session": trace_diff.right_session,
+            "added_markers": list(trace_diff.added_markers),
+            "missing_markers": list(trace_diff.missing_markers),
+            "changed_cpu": list(trace_diff.changed_cpu),
+            "changed_task": list(trace_diff.changed_task),
+            "order_changes": list(trace_diff.order_changes),
+            "timing_changes": list(trace_diff.timing_changes),
+        },
+        "lod": "summary" if event_count > 10000 else ("compact" if event_count > 1000 else "detail"),
+        "marker_suggestions": [
+            {
+                "function_name": x.function_name,
+                "score": x.information_gain_score,
+                "distinguished_path_pairs": x.distinguished_path_pairs,
+                "total_path_pairs": x.total_path_pairs,
+                "reason": x.reason,
+            } for x in (marker_suggestions or [])
+        ],
+        "viewport_size": size,
+    }
+
+
+def render_html(
+    model: SequenceModel,
+    *,
+    title: str = "cseq sequence",
+    runtime_session: TraceSession | None = None,
+    cpu_evidence: Iterable[CpuEvidenceRecord] = (),
+    explanations: dict[str, list[dict[str, object]]] | None = None,
+    trace_diff: TraceDiffResult | None = None,
+    marker_suggestions: list[MarkerSuggestion] | None = None,
+    viewport_size: int = 200,
+    max_sequence_messages: int = 300,
+) -> str:
+    payload = build_html_payload(
+        model, runtime_session=runtime_session, cpu_evidence=cpu_evidence,
+        explanations=explanations, trace_diff=trace_diff,
+        marker_suggestions=marker_suggestions, viewport_size=viewport_size,
+        max_sequence_messages=max_sequence_messages,
+    )
+    data = json.dumps(payload, ensure_ascii=False).replace("</", "<\\/")
+    safe_title = escape(title)
+    return f'''<!doctype html>
+<html lang="ja">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>{safe_title}</title>
+<style>
+:root {{ color-scheme: light dark; font-family: system-ui, sans-serif; }}
+body {{ margin:0; }}
+header {{ position:sticky; top:0; z-index:5; padding:12px; border-bottom:1px solid #8886; background:Canvas; }}
+main {{ padding:12px; display:grid; gap:16px; }}
+input,select {{ padding:8px; max-width:42rem; }}
+.panel {{ border:1px solid #8885; border-radius:8px; overflow:hidden; }}
+.panel h2 {{ margin:0; padding:10px 12px; font-size:1rem; border-bottom:1px solid #8884; }}
+.panel-body {{ padding:10px 12px; }}
+.message {{ display:grid; grid-template-columns:minmax(8rem,1fr) 2rem minmax(8rem,1fr) 3fr; gap:8px; padding:7px 4px; border-bottom:1px solid #8883; align-items:start; }}
+.external {{ opacity:.78; }}
+.recursive {{ font-weight:600; }}
+.fold-summary {{ padding:7px 4px; border-bottom:1px dashed #8885; }}
+.fold-summary summary {{ cursor:pointer; }}
+.context {{ font-size:.78em; opacity:.65; grid-column:1 / -1; }}
+.meta {{ font-size:.85em; opacity:.7; }}
+.hidden {{ display:none !important; }}
+.timeline-row {{ display:grid; grid-template-columns:5rem 9rem 10rem 10rem 1fr; gap:8px; padding:6px 0; border-bottom:1px solid #8883; }}
+.lanes {{ display:flex; flex-wrap:wrap; gap:8px; }}
+.lane {{ border:1px solid #8885; border-radius:6px; padding:7px 9px; min-width:9rem; }}
+.why-next {{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }}
+.tile-summary {{ font-size:.85em; opacity:.8; margin:.4rem 0; }}
+.timeline-canvas {{ width:100%; height:360px; border:1px solid #8883; border-radius:6px; display:block; }}
+.path-controls {{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }}
+.search-status {{ font-size:.85em; opacity:.8; margin-left:.5rem; }}
+ul {{ margin:.4rem 0; padding-left:1.2rem; }}
+@media (max-width:720px) {{
+  .message,.timeline-row {{ grid-template-columns:1fr; }}
+  .arrow {{ display:none; }}
+  .why-next {{ grid-template-columns:1fr; }}
+}}
+</style>
+</head>
+<body>
+<header>
+<strong>{safe_title}</strong>
+<div class="meta">entry: <span id="entry"></span> / messages: <span id="count"></span> / runtime: <span id="runtime-count"></span></div>
+<input id="search" type="search" placeholder="function / call / runtime text を検索" autocomplete="off"><span id="search-status" class="search-status"></span>
+</header>
+<main>
+<section class="panel"><h2>Sequence</h2><div class="panel-body" id="messages"></div></section>
+<section class="panel"><h2>CPU / Task</h2><div class="panel-body"><div id="lanes" class="lanes"></div><div id="cpu-evidence"></div></div></section>
+<section class="panel"><h2>Runtime Timeline</h2><div class="panel-body"><div id="timeline-controls"></div><canvas id="timeline-canvas" class="timeline-canvas hidden" width="1200" height="360"></canvas><div id="timeline"></div></div></section>
+<section class="panel"><h2>Runtime Correlation / Clock</h2><div class="panel-body" id="runtime-correlation"></div></section>
+<section class="panel"><h2>Trace Diff</h2><div class="panel-body" id="trace-diff"></div></section>
+<section class="panel"><h2>Marker Suggest</h2><div class="panel-body" id="marker-suggest"></div></section>
+<section class="panel"><h2>Why / Next</h2><div class="panel-body"><select id="why-function"></select><div id="why-next" class="why-next"></div></div></section>
+<section class="panel"><h2>Path Query</h2><div class="panel-body"><div class="path-controls"><select id="path-start"></select><span>→</span><select id="path-end"></select><button id="path-run">検索</button></div><pre id="path-result"></pre></div></section>
+</main>
+<script type="application/json" id="cseq-data">{data}</script>
+<script>
+const data = JSON.parse(document.getElementById('cseq-data').textContent);
+const searchable = [];
+document.getElementById('entry').textContent = data.entry;
+document.getElementById('count').textContent = data.messages.length;
+document.getElementById('runtime-count').textContent = data.runtime.events.length;
+document.querySelector('header .meta').append(` / LOD: ${{data.lod}}`);
+
+const root = document.getElementById('messages');
+function makeMessageRow(m) {{
+  const row = document.createElement('div');
+  row.className = 'message' + (m.external_as_self ? ' external' : '') + (m.recursive ? ' recursive' : '');
+  row.dataset.search = `${{m.caller}} ${{m.callee}} ${{m.label}} ${{(m.control_context||[]).join(' ')}}`.toLowerCase();
+  for (const [cls, value] of [['caller',m.caller],['arrow','→'],['callee',m.callee],['label',m.label + (m.recursive ? ' [recursive]' : '')]]) {{
+    const el = document.createElement('div'); el.className = cls; el.textContent = value; row.appendChild(el);
+  }}
+  if ((m.control_context||[]).length) {{
+    const ctx=document.createElement('div');ctx.className='context';ctx.textContent=(m.control_context||[]).join(' / ');row.appendChild(ctx);
+  }}
+  return row;
+}}
+const visibleSet=new Set(data.sequence_fold.visible_indices||[]);
+const collapsedByStart=new Map((data.sequence_fold.collapsed||[]).map(x=>[x.start_message,x]));
+for (let i=0;i<data.messages.length;) {{
+  if (visibleSet.has(i)) {{
+    const row=makeMessageRow(data.messages[i]);root.appendChild(row);searchable.push(row);i++;continue;
+  }}
+  const fold=collapsedByStart.get(i);
+  if (!fold) {{ i++; continue; }}
+  const details=document.createElement('details');details.className='fold-summary';
+  const summary=document.createElement('summary');summary.textContent=`${{fold.hidden_count}} messages collapsed (#${{fold.start_message+1}}-${{fold.end_message+1}})`;details.appendChild(summary);
+  let loaded=false;
+  details.addEventListener('toggle',()=>{{
+    if(!details.open||loaded)return;loaded=true;
+    for(let j=fold.start_message;j<=fold.end_message;j++){{const row=makeMessageRow(data.messages[j]);details.appendChild(row);searchable.push(row);}}
+  }});
+  root.appendChild(details);i=fold.end_message+1;
+}}
+
+const laneRoot = document.getElementById('lanes');
+const laneMap = new Map();
+for (const e of data.runtime.events) {{
+  const cpu = e.cpu || 'CPU?'; const task = e.task || 'Task?'; const key = `${{cpu}} / ${{task}}`;
+  laneMap.set(key, (laneMap.get(key) || 0) + 1);
+}}
+for (const [key,count] of laneMap) {{
+  const el = document.createElement('div'); el.className='lane'; el.textContent=`${{key}} (${{count}} events)`; laneRoot.appendChild(el);
+}}
+if (!laneMap.size) laneRoot.textContent = 'Runtime eventなし';
+const evRoot = document.getElementById('cpu-evidence');
+if (data.cpu_evidence.length) {{
+  const ul=document.createElement('ul');
+  for (const e of data.cpu_evidence) {{ const li=document.createElement('li'); li.textContent=`${{e.layer}}: ${{e.value}} (${{e.provenance}})`; ul.appendChild(li); }}
+  evRoot.appendChild(ul);
+}}
+
+const timeline = document.getElementById('timeline');
+const timelineCanvas = document.getElementById('timeline-canvas');
+const timelineControls = document.getElementById('timeline-controls');
+let timelineOffset = 0;
+function renderTimelineCanvas(events, startOffset) {{
+  timelineCanvas.classList.remove('hidden');
+  timeline.classList.add('hidden');
+  const ctx=timelineCanvas.getContext('2d');
+  const cssWidth=Math.max(600,timelineCanvas.clientWidth||1200); const dpr=window.devicePixelRatio||1;
+  timelineCanvas.width=Math.floor(cssWidth*dpr); timelineCanvas.height=Math.floor(360*dpr);
+  ctx.setTransform(dpr,0,0,dpr,0,0); ctx.clearRect(0,0,cssWidth,360);
+  ctx.font='12px system-ui'; ctx.textBaseline='middle';
+  const rowH=Math.max(3,Math.min(18,330/Math.max(1,events.length)));
+  const cpuNames=[...new Set(events.map(e=>e.cpu||'CPU?'))];
+  const cpuX=new Map(cpuNames.map((x,i)=>[x,80+i*Math.max(90,(cssWidth-100)/Math.max(1,cpuNames.length))]));
+  ctx.fillText(`LOD=${{data.lod}} / ${{events.length}} events`,8,14);
+  for(let i=0;i<events.length;i++){{
+    const e=events[i]; const y=28+i*rowH; const x=cpuX.get(e.cpu||'CPU?')||80;
+    ctx.fillRect(x,y,Math.max(2,Math.min(14,rowH)),Math.max(2,rowH-1));
+    if(data.lod==='compact' && rowH>=8 && i%Math.max(1,Math.floor(events.length/25))===0) ctx.fillText(`#${{e.event_index}} ${{e.marker_id}}`,x+18,y+rowH/2);
+  }}
+  for(const [cpu,x] of cpuX) ctx.fillText(cpu,x,350);
+}}
+function renderTimeline() {{
+  timeline.replaceChildren();
+  // Remove previously registered timeline rows from the search set.
+  for (let i=searchable.length-1; i>=0; --i) if (searchable[i].classList?.contains('timeline-row')) searchable.splice(i,1);
+  if (!data.runtime.events.length) {{ timelineCanvas.classList.add('hidden'); timeline.classList.remove('hidden'); timeline.textContent='Runtime eventなし'; timelineControls.textContent=''; return; }}
+  const size = data.viewport_size || 200;
+  const end = Math.min(data.runtime.events.length, timelineOffset + size);
+  const visibleEvents=data.runtime.events.slice(timelineOffset,end);
+  if(data.lod==='detail') {{
+    timelineCanvas.classList.add('hidden'); timeline.classList.remove('hidden');
+    for (const e of visibleEvents) {{
+      const row=document.createElement('div'); row.className='timeline-row';
+      row.dataset.search = `${{e.marker_id}} ${{e.cpu||''}} ${{e.task||''}} ${{e.message||''}}`.toLowerCase();
+      for (const v of [String(e.event_index), e.timestamp||'', e.cpu||'?', e.task||'?', `${{e.marker_id}} ${{e.message||''}}`]) {{
+        const el=document.createElement('div'); el.textContent=v; row.appendChild(el);
+      }}
+      timeline.appendChild(row); searchable.push(row);
+    }}
+  }} else {{
+    renderTimelineCanvas(visibleEvents,timelineOffset);
+  }}
+  timelineControls.replaceChildren();
+  const prev=document.createElement('button'); prev.textContent='前'; prev.disabled=timelineOffset===0;
+  prev.onclick=()=>{{ timelineOffset=Math.max(0,timelineOffset-size); renderTimeline(); }};
+  const next=document.createElement('button'); next.textContent='次'; next.disabled=end>=data.runtime.events.length;
+  next.onclick=()=>{{ timelineOffset=end; renderTimeline(); }};
+  const label=document.createElement('span'); label.textContent=` ${{timelineOffset+1}}-${{end}} / ${{data.runtime.events.length}} `;
+  const tile=document.createElement('select'); tile.title='Viewport Tile';
+  for (const t of (data.runtime.tiles||[])) {{
+    const o=document.createElement('option'); o.value=String(t.start_offset);
+    o.textContent=`Tile ${{t.tile_index+1}}: #${{t.start_event_index}}-${{t.end_event_index}}`;
+    if (timelineOffset>=t.start_offset && timelineOffset<=t.end_offset) o.selected=true;
+    tile.appendChild(o);
+  }}
+  tile.onchange=()=>{{ timelineOffset=Number(tile.value)||0; renderTimeline(); }};
+  timelineControls.append(prev,label,next,tile);
+  const active=(data.runtime.tiles||[]).find(t=>timelineOffset>=t.start_offset && timelineOffset<=t.end_offset);
+  if (active) {{
+    const meta=document.createElement('span'); meta.className='tile-summary';
+    meta.textContent=` CPU=${{active.cpus.join('|')||'?'}} Task=${{active.tasks.join('|')||'?'}} Markers=${{active.marker_count}}`;
+    timelineControls.append(meta);
+  }}
+}}
+renderTimeline();
+
+const correlationRoot=document.getElementById('runtime-correlation');
+if (!data.runtime.correlations.length) correlationRoot.textContent='Correlationなし';
+else {{
+  const exact=data.runtime.correlations.filter(x=>x.relation_type==='CORRELATED_EXACT');
+  const possible=data.runtime.correlations.filter(x=>x.relation_type==='CORRELATED_POSSIBLE');
+  const summary=document.createElement('div'); summary.textContent=`Exact=${{exact.length}} / Possible=${{possible.length}}`; correlationRoot.appendChild(summary);
+  for (const r of data.runtime.correlations.slice(0,100)) {{
+    const row=document.createElement('div'); row.className='meta';
+    row.textContent=`#${{r.left_event_index}} ↔ #${{r.right_event_index}} ${{r.relation_type}} [${{r.keys.join(', ')}}] score=${{r.score.toFixed(3)}}`;
+    correlationRoot.appendChild(row);
+  }}
+  if (data.runtime.correlations.length>100) {{ const more=document.createElement('div'); more.textContent=`… ${{data.runtime.correlations.length-100}} more`; correlationRoot.appendChild(more); }}
+}}
+if (data.runtime.clock_alignments.length) {{
+  const h=document.createElement('h3'); h.textContent='Clock alignment'; correlationRoot.appendChild(h);
+  for (const a of data.runtime.clock_alignments) {{
+    const row=document.createElement('div'); row.className='meta';
+    row.textContent=`${{a.source_domain}} → ${{a.target_domain}}: t'=${{a.scale.toFixed(9)}}t ${{a.offset_seconds>=0?'+':'-'}} ${{Math.abs(a.offset_seconds).toFixed(6)}}s / anchors=${{a.anchor_count}} / ${{a.confidence}}`;
+    correlationRoot.appendChild(row);
+  }}
+}}
+
+const diffRoot=document.getElementById('trace-diff');
+if (!data.trace_diff) diffRoot.textContent='比較Sessionなし';
+else {{
+  const d=data.trace_diff; const h=document.createElement('div'); h.textContent=`${{d.left_session}} → ${{d.right_session}}`; diffRoot.appendChild(h);
+  for (const [title,items] of [['追加Marker',d.added_markers],['欠落Marker',d.missing_markers]]) {{
+    const p=document.createElement('div'); p.textContent=`${{title}}: ` + (items.length ? items.map(x=>`${{x[0]}} ×${{x[1]}}`).join(', ') : 'なし'); diffRoot.appendChild(p);
+  }}
+  for (const [title,items] of [['CPU変化',d.changed_cpu],['Task変化',d.changed_task]]) {{
+    const p=document.createElement('div'); p.textContent=`${{title}}: ` + (items.length ? items.map(x=>`${{x[0]}}: ${{x[1].join('|')||'?'}} → ${{x[2].join('|')||'?'}}`).join(', ') : 'なし'); diffRoot.appendChild(p);
+  }}
+
+  for (const [title,items] of [['順序変化',d.order_changes],['時刻変化',d.timing_changes]]) {{
+    const p=document.createElement('div'); p.textContent=`${{title}}: ` + (items.length ? items.map(x=>`${{x[0]}}: ${{x[1]}} → ${{x[2]}}`).join(', ') : 'なし'); diffRoot.appendChild(p);
+  }}
+}}
+
+const suggestRoot=document.getElementById('marker-suggest');
+if (!data.marker_suggestions.length) suggestRoot.textContent='Marker候補なし';
+else {{
+  for (const s of data.marker_suggestions) {{
+    const d=document.createElement('details'); const summary=document.createElement('summary'); summary.textContent=`${{s.function_name}} score=${{s.score.toFixed(3)}}`; d.appendChild(summary);
+    const p=document.createElement('div'); p.textContent=s.reason; d.appendChild(p); suggestRoot.appendChild(d);
+  }}
+}}
+
+const select=document.getElementById('why-function');
+for (const name of Object.keys(data.why_next)) {{ const o=document.createElement('option'); o.value=name; o.textContent=name; select.appendChild(o); }}
+function renderWhyNext() {{
+  const name=select.value; const x=data.why_next[name] || {{why:[],next:[]}}; const box=document.getElementById('why-next'); box.replaceChildren();
+  for (const [title,items] of [['Why',x.why],['Next',x.next]]) {{
+    const part=document.createElement('div'); const h=document.createElement('h3'); h.textContent=title; part.appendChild(h); const ul=document.createElement('ul');
+    if (!items.length) {{ const li=document.createElement('li'); li.textContent='なし'; ul.appendChild(li); }}
+    for (const item of items) {{ const li=document.createElement('li'); li.textContent=`${{item.function}} — ${{item.label}}`; ul.appendChild(li); }}
+    part.appendChild(ul); box.appendChild(part);
+  }}
+  const evidence=document.createElement('div'); evidence.style.gridColumn='1 / -1';
+  const h=document.createElement('h3'); h.textContent='Resolution Evidence'; evidence.appendChild(h);
+  const calls=data.explanations[name] || [];
+  if (!calls.length) {{ const p=document.createElement('div'); p.textContent='呼び出しEvidenceなし'; evidence.appendChild(p); }}
+  for (const c of calls) {{
+    const d=document.createElement('details'); const summary=document.createElement('summary'); summary.textContent=`${{c.raw}} — ${{c.resolution}}`; d.appendChild(summary);
+    const ul=document.createElement('ul');
+    for (const t of (c.targets||[])) {{ const li=document.createElement('li'); li.textContent=`target: ${{t.name||t.function_id}}`; ul.appendChild(li); }}
+    for (const f of (c.value_flow||[])) {{ const li=document.createElement('li'); li.textContent=`flow: ${{f.kind}} ${{f.from}} → ${{f.to}}`; ul.appendChild(li); }}
+    for (const e of (c.cpu_evidence||[])) {{ const li=document.createElement('li'); li.textContent=`cpu: ${{e.layer}} ${{e.value}} (${{e.provenance}})`; ul.appendChild(li); }}
+    for (const e of (c.linker_evidence||[])) {{ const li=document.createElement('li'); li.textContent=`linker: ${{e.symbol}} @0x${{Number(e.address).toString(16)}} ${{e.object_file||''}}`; ul.appendChild(li); }}
+    for (const e of (c.binary_evidence||[])) {{ const li=document.createElement('li'); li.textContent=`binary: ${{e.symbol}} @0x${{Number(e.address).toString(16)}} size=${{e.size}}`; ul.appendChild(li); }}
+    for (const e of (c.dwarf_evidence||[]).slice(0,20)) {{ const li=document.createElement('li'); li.textContent=`dwarf: ${{e.source}}:${{e.line}} @0x${{Number(e.address).toString(16)}}`; ul.appendChild(li); }}
+    if (c.unknown_possible) {{ const li=document.createElement('li'); li.textContent='unknown target may also exist'; ul.appendChild(li); }}
+    d.appendChild(ul); evidence.appendChild(d);
+  }}
+  box.appendChild(evidence);
+}}
+select.addEventListener('change',renderWhyNext); renderWhyNext();
+
+const searchInput=document.getElementById('search');
+const searchStatus=document.getElementById('search-status');
+let searchWorker=null;
+if (window.Worker && window.Blob) {{
+  const workerCode=`let runtime=[];let messages=[];function paths(start,end,maxPaths=8,maxDepth=64){{const g=new Map();for(const m of messages){{if(m.external_as_self)continue;if(!g.has(m.caller))g.set(m.caller,new Set());g.get(m.caller).add(m.callee);}}const q=[[start,[start]]],out=[];let shortest=null;while(q.length&&out.length<maxPaths){{const [node,path]=q.shift();if(shortest!==null&&path.length>shortest)continue;if(path.length>maxDepth)continue;if(node===end){{out.push(path);shortest=shortest??path.length;continue;}}for(const n of [...(g.get(node)||[])].sort()){{if(!path.includes(n))q.push([n,[...path,n]]);}}}}return out;}}onmessage=e=>{{const m=e.data||{{}};if(m.type==='init'){{runtime=m.runtime||[];messages=m.messages||[];return;}}if(m.type==='search'){{const q=(m.q||'').toLowerCase();const hits=[];if(q){{for(const e of runtime){{const s=(String(e.marker_id||'')+' '+String(e.cpu||'')+' '+String(e.task||'')+' '+String(e.message||'')).toLowerCase();if(s.includes(q)){{hits.push(e.event_index);if(hits.length>=200)break;}}}}}}postMessage({{type:'result',q,hits}});return;}}if(m.type==='paths'){{postMessage({{type:'paths',start:m.start,end:m.end,paths:paths(m.start,m.end)}});}}}}`;
+  searchWorker=new Worker(URL.createObjectURL(new Blob([workerCode],{{type:'text/javascript'}})));
+  searchWorker.postMessage({{type:'init',runtime:data.runtime.events,messages:data.messages}});
+  searchWorker.onmessage=e=>{{
+    const m=e.data||{{}};
+    if(m.type==='result'){{
+      searchStatus.textContent=m.q ? `runtime hits: ${{m.hits.length}}${{m.hits.length>=200?'+':''}}` : '';
+      if(m.hits.length){{ const idx=data.runtime.events.findIndex(x=>x.event_index===m.hits[0]); if(idx>=0){{ timelineOffset=Math.floor(idx/(data.viewport_size||200))*(data.viewport_size||200); renderTimeline(); }} }}
+    }} else if(m.type==='paths') {{
+      const box=document.getElementById('path-result'); box.textContent=m.paths.length ? m.paths.map(p=>p.join(' → ')).join('\\n') : '経路なし';
+    }}
+  }};
+}}
+
+const pathStart=document.getElementById('path-start');
+const pathEnd=document.getElementById('path-end');
+const pathNames=[...new Set([data.entry,...data.messages.flatMap(m=>[m.caller,m.callee])])].sort();
+for(const name of pathNames){{for(const el of [pathStart,pathEnd]){{const o=document.createElement('option');o.value=name;o.textContent=name;el.appendChild(o);}}}}
+pathStart.value=data.entry;if(pathNames.length)pathEnd.value=pathNames[pathNames.length-1];
+document.getElementById('path-run').onclick=()=>{{
+  const box=document.getElementById('path-result');
+  if(searchWorker){{box.textContent='検索中…';searchWorker.postMessage({{type:'paths',start:pathStart.value,end:pathEnd.value}});}}
+  else box.textContent='Web Workerを利用できません';
+}};
+searchInput.addEventListener('input', e => {{
+  const q=e.target.value.toLowerCase().trim();
+  for (const row of searchable) row.classList.toggle('hidden', q && !row.dataset.search.includes(q));
+  if(searchWorker) searchWorker.postMessage({{type:'search',q}}); else searchStatus.textContent='';
+}});
+</script>
+</body>
+</html>
+'''