@dotdotgod/cli 0.6.6 → 0.7.0

package/src/graph-view/assets/app.js

@@ -1,253 +1,75 @@
-(() => {
-  const COLORS = { seed: '#1857c8', doc: '#6b47a8', test: '#16734b', code: '#42515e', contract: '#c66a12', heading: '#8b9690', other: '#66727b' };
-  const MORPH_DURATION = 380;
-  const MOTION_MODES = new Set(['instant', 'layer', 'sequence']);
-  const savedMotionMode = localStorage.getItem('dotdotgod:graph-motion');
-  const state = { payload: null, renderer: null, graph: null, selected: null, enabledRelations: new Set(), previousPositions: new Map(), animationFrame: null, positioned: [], firstRender: true, motionMode: MOTION_MODES.has(savedMotionMode) ? savedMotionMode : 'layer', revealToken: 0 };
-  const elements = {
-    graph: document.querySelector('#graph'), fallback: document.querySelector('#graph-fallback'), filters: document.querySelector('#relation-filters'), motionMode: document.querySelector('#motion-mode'), skipReveal: document.querySelector('#skip-reveal'), list: document.querySelector('#result-list'), inspection: document.querySelector('#inspection'), status: document.querySelector('#status'), summary: document.querySelector('#plot-summary'), count: document.querySelector('#result-count'), form: document.querySelector('#reroot-form'), input: document.querySelector('#reroot-path'), reset: document.querySelector('#reset-camera'), search: document.querySelector('#node-search-input'), searchResults: document.querySelector('#node-search-results'),
-  };
-
-  function nodeKind(node) {
-    if (node.seed) return 'seed';
-    if (node.type === 'contract') return 'contract';
-    if (node.type === 'heading' || node.id.startsWith('heading:')) return 'heading';
-    if (node.path?.startsWith('docs/')) return 'doc';
-    if (/(^|\/)(test|tests)\//.test(node.path ?? '') || /\.(test|spec)\./.test(node.path ?? '')) return 'test';
-    if (node.type === 'file') return 'code';
-    return 'other';
-  }
-
-  function relationLabel(value) { return value.replace(/^incoming:/, '').replaceAll('_', ' '); }
-  function safe(value) { const span = document.createElement('span'); span.textContent = value ?? ''; return span.innerHTML; }
-
-  function layoutNodes(nodes, edges) {
-    const width = Math.max(elements.graph.clientWidth, 600);
-    const height = Math.max(elements.graph.clientHeight, 500);
-    const center = { x: width / 2, y: height / 2 };
-    const goldenAngle = Math.PI * (3 - Math.sqrt(5));
-    const layerCounts = new Map();
-    const simulationNodes = [...nodes].sort((left, right) => left.depth - right.depth || left.id.localeCompare(right.id)).map((node) => {
-      const layerIndex = layerCounts.get(node.depth) ?? 0;
-      layerCounts.set(node.depth, layerIndex + 1);
-      const radius = node.depth === 0 ? Math.min(34, nodes.filter((candidate) => candidate.depth === 0).length * 8) : 66 + node.depth * 76;
-      const angle = layerIndex * goldenAngle + node.depth * .35;
-      return { ...node, targetX: center.x + Math.cos(angle) * radius, targetY: center.y + Math.sin(angle) * radius, x: center.x + Math.cos(angle) * radius, y: center.y + Math.sin(angle) * radius };
-    });
-    const byId = new Map(simulationNodes.map((node) => [node.id, node]));
-    const simulationEdges = edges.map((edge) => ({ ...edge, source: byId.get(edge.source), target: byId.get(edge.target) })).filter((edge) => edge.source && edge.target);
-    const simulation = d3.forceSimulation(simulationNodes)
-      .force('charge', d3.forceManyBody().strength((node) => node.type === 'heading' ? -16 : node.seed ? -220 : -48))
-      .force('link', d3.forceLink(simulationEdges).id((node) => node.id).distance((edge) => edge.relation === 'contains_heading' ? 18 : edge.source.seed || edge.target.seed ? 72 : 38).strength((edge) => edge.relation === 'contains_heading' ? .72 : .34))
-      .force('x', d3.forceX((node) => node.targetX).strength(.16))
-      .force('y', d3.forceY((node) => node.targetY).strength(.16))
-      .force('center', d3.forceCenter(width / 2, height / 2).strength(.025))
-      .force('collide', d3.forceCollide().radius((node) => node.type === 'heading' ? 3.5 : 6 + Math.sqrt(node.impactScore || 0)))
-      .stop();
-    const ticks = nodes.length > 1400 ? 70 : nodes.length > 700 ? 100 : nodes.length > 300 ? 130 : 180;
-    for (let index = 0; index < ticks; index += 1) simulation.tick();
-    return simulationNodes;
-  }
-
-  function visibleModel() {
-    const sourceNodes = state.payload.graph.nodes;
-    const sourceIds = new Set(sourceNodes.map((node) => node.id));
-    return { nodes: sourceNodes, edges: state.payload.graph.edges.filter((edge) => state.enabledRelations.has(edge.relation) && sourceIds.has(edge.source) && sourceIds.has(edge.target)) };
-  }
-
-  function revealDelay(node, index, maximumDepth, totalNodes) {
-    if (!state.firstRender || state.motionMode === 'instant') return 0;
-    if (state.motionMode === 'sequence') return index * Math.min(32, 1200 / Math.max(totalNodes, 1));
-    return node.depth * Math.min(70, 650 / Math.max(maximumDepth, 1));
-  }
-
-  function finishReveal(positioned) {
-    cancelAnimationFrame(state.animationFrame);
-    state.revealToken += 1;
-    for (const node of positioned) {
-      if (!state.graph?.hasNode(node.id)) continue;
-      state.graph.setNodeAttribute(node.id, 'x', node.x);
-      state.graph.setNodeAttribute(node.id, 'y', node.y);
-      state.graph.setNodeAttribute(node.id, 'size', node.renderSize ?? 4);
-    }
-    state.renderer?.refresh();
-    state.previousPositions = new Map(positioned.map((node) => [node.id, { x: node.x, y: node.y }]));
-    state.firstRender = false;
-    elements.skipReveal.hidden = true;
-  }
-
-  function animatePositions(graph, positioned) {
-    cancelAnimationFrame(state.animationFrame);
-    const token = ++state.revealToken;
-    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
-    const mode = reduced ? 'instant' : state.motionMode;
-    const maximumDepth = Math.max(0, ...positioned.map((node) => node.depth));
-    const ordered = [...positioned].sort((left, right) => left.depth - right.depth || left.id.localeCompare(right.id));
-    const orderById = new Map(ordered.map((node, index) => [node.id, index]));
-    const starts = new Map(positioned.map((node) => {
-      const prior = state.previousPositions.get(node.id);
-      const root = positioned.find((candidate) => candidate.id === node.nearestRoot);
-      return [node.id, prior ?? { x: root?.x ?? node.x, y: root?.y ?? node.y }];
-    }));
-    const lastDelay = mode === 'instant' ? 0 : Math.max(0, ...positioned.map((node) => revealDelay(node, orderById.get(node.id), maximumDepth, positioned.length)));
-    const duration = mode === 'instant' ? 0 : MORPH_DURATION + lastDelay;
-    const startedAt = performance.now();
-    elements.skipReveal.hidden = duration === 0;
-    const tick = (now) => {
-      if (token !== state.revealToken) return;
-      const elapsed = now - startedAt;
-      for (const node of positioned) {
-        const delay = mode === 'instant' ? 0 : revealDelay(node, orderById.get(node.id), maximumDepth, positioned.length);
-        const progress = duration === 0 ? 1 : Math.max(0, Math.min(1, (elapsed - delay) / MORPH_DURATION));
-        const eased = 1 - Math.pow(1 - progress, 4);
-        const start = starts.get(node.id);
-        graph.setNodeAttribute(node.id, 'x', start.x + (node.x - start.x) * eased);
-        graph.setNodeAttribute(node.id, 'y', start.y + (node.y - start.y) * eased);
-        graph.setNodeAttribute(node.id, 'size', (node.renderSize ?? 4) * (progress === 0 ? 0 : .18 + .82 * eased));
-      }
-      state.renderer?.refresh();
-      if (elapsed < duration) state.animationFrame = requestAnimationFrame(tick);
-      else finishReveal(positioned);
-    };
-    state.animationFrame = requestAnimationFrame(tick);
-  }
-
-  function renderFilters(edges) {
-    const relations = [...new Set(edges.map((edge) => edge.relation))].sort();
-    const previous = state.enabledRelations;
-    state.enabledRelations = new Set(relations.filter((relation) => previous.size === 0 || previous.has(relation)));
-    elements.filters.replaceChildren(...relations.map((relation) => {
-      const label = document.createElement('label'); label.className = 'filter-control';
-      const input = document.createElement('input'); input.type = 'checkbox'; input.checked = state.enabledRelations.has(relation); input.value = relation;
-      input.addEventListener('change', () => { input.checked ? state.enabledRelations.add(relation) : state.enabledRelations.delete(relation); renderGraph(); });
-      const text = document.createElement('span'); text.textContent = relationLabel(relation);
-      const count = document.createElement('code'); count.textContent = String(edges.filter((edge) => edge.relation === relation).length);
-      label.append(input, text, count); return label;
-    }));
-  }
-
-  function renderGraph() {
-    if (state.graph) state.previousPositions = new Map(state.graph.nodes().map((id) => [id, { x: state.graph.getNodeAttribute(id, 'x'), y: state.graph.getNodeAttribute(id, 'y') }]));
-    cancelAnimationFrame(state.animationFrame);
-    state.renderer?.kill();
-    const model = visibleModel();
-    const visibleNodes = model.nodes;
-    const positioned = layoutNodes(visibleNodes, model.edges);
-    state.positioned = positioned;
-    try {
-      const graph = new graphology.MultiDirectedGraph();
-      for (const node of positioned) {
-        node.renderSize = node.seed ? 14 : node.type === 'heading' ? 2 : 4 + Math.sqrt(Math.max(node.impactScore, 1)) * .55;
-        const start = state.previousPositions.get(node.id) ?? positioned.find((candidate) => candidate.id === node.nearestRoot) ?? node;
-        graph.addNode(node.id, { label: node.label, x: start.x, y: start.y, size: node.renderSize, color: COLORS[nodeKind(node)], node });
-      }
-      model.edges.forEach((edge, index) => graph.addDirectedEdgeWithKey(`edge-${index}`, edge.source, edge.target, { color: edge.relation === 'vector_similarity' ? '#c66a12' : '#9ca8a3', size: edge.weight ? Math.min(3, 1 + edge.weight / 7) : 1, type: 'arrow', relation: edge.relation }));
-      state.graph = graph;
-      state.renderer = new Sigma(graph, elements.graph, { renderEdgeLabels: false, labelDensity: visibleNodes.length > 500 ? .03 : .1, labelRenderedSizeThreshold: visibleNodes.length > 500 ? 11 : 7, defaultEdgeType: 'arrow', zIndex: true, nodeReducer: (id, data) => {
-        if (!state.selected || !state.graph.hasNode(state.selected)) return data;
-        const neighbors = new Set(state.graph.neighbors(state.selected));
-        if (id === state.selected || neighbors.has(id)) return { ...data, highlighted: true, zIndex: 2 };
-        return { ...data, color: '#cbd1ce', label: '', zIndex: 0 };
-      }, edgeReducer: (key, data) => {
-        if (!state.selected || !state.graph.hasNode(state.selected)) return data;
-        const [source, target] = state.graph.extremities(key);
-        return source === state.selected || target === state.selected ? { ...data, color: '#1857c8', size: 2.4, zIndex: 2 } : { ...data, color: '#d8dedb', zIndex: 0 };
-      } });
-      state.renderer.on('clickNode', ({ node }) => selectNode(node, true));
-      animatePositions(graph, positioned);
-      elements.fallback.hidden = true;
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error);
-      console.error('Impact graph rendering failed:', error);
-      elements.fallback.textContent = `Graph rendering failed: ${message}`;
-      elements.fallback.hidden = false;
-    }
-  }
-
-  function renderList() {
-    const related = state.payload.impact.related;
-    elements.count.textContent = `${related.length} results`;
-    elements.list.replaceChildren(...related.map((item, index) => {
-      const entry = document.createElement('li');
-      const button = document.createElement('button'); button.type = 'button'; button.className = 'result-button'; button.dataset.nodeId = item.id; button.setAttribute('aria-current', item.id === state.selected ? 'true' : 'false');
-      button.innerHTML = `<span class="rank">${String(index + 1).padStart(2, '0')}</span><span class="result-copy"><span class="result-path">${safe(item.path ?? item.title ?? item.id)}</span><span class="result-reason">${safe((item.reasons ?? []).slice(0, 2).map(relationLabel).join(' · '))}</span></span><span class="score">${item.impactScore}</span>`;
-      button.addEventListener('click', () => selectNode(item.id, true)); entry.append(button); return entry;
-    }));
-  }
-
-  function renderSearch() {
-    const query = elements.search.value.trim().toLocaleLowerCase();
-    if (!query) { elements.searchResults.replaceChildren(); return; }
-    const matches = state.payload.graph.nodes.filter((node) => `${node.label} ${node.path ?? ''} ${node.id}`.toLocaleLowerCase().includes(query)).slice(0, 30);
-    elements.searchResults.replaceChildren(...matches.map((node) => {
-      const item = document.createElement('li'); const button = document.createElement('button'); button.type = 'button'; button.textContent = node.label ?? node.id;
-      button.addEventListener('click', () => { selectNode(node.id); elements.searchResults.replaceChildren(); });
-      item.append(button); return item;
-    }));
-  }
-
-  function renderInspection(node) {
-    if (!node) return;
-    const score = node.seed ? 100 : node.impactScore;
-    const reasons = (node.reasons ?? []).map(relationLabel).join(', ') || 'whole graph node';
-    const ppr = node.scoreBreakdown?.connection?.ppr;
-    const memory = node.scoreBreakdown?.memory;
-    elements.inspection.innerHTML = `<h3>${safe(node.label ?? node.path ?? node.id)}</h3><dl><dt>Type</dt><dd>${safe(node.type)}</dd><dt>Impact score</dt><dd>${safe(String(score))}</dd><dt>Evidence</dt><dd>${safe(reasons)}</dd><dt>Component</dt><dd>${safe(String((node.component ?? 0) + 1))}</dd>${ppr !== undefined ? `<dt>PPR contribution</dt><dd>${safe(String(ppr))}</dd>` : ''}${memory ? `<dt>Memory contribution</dt><dd>${safe(String((memory.priority ?? 0) + (memory.policyAdjustments ?? 0)))}</dd>` : ''}${node.vectorEvidence?.score ? `<dt>Similarity</dt><dd>${safe(String(node.vectorEvidence.score))}</dd>` : ''}<dt>Path</dt><dd>${safe(node.path ?? node.id)}</dd></dl>${node.path && !node.seed ? '<button type="button" class="reroot-selected">Re-root from this file</button>' : ''}`;
-    elements.inspection.querySelector('.reroot-selected')?.addEventListener('click', () => loadImpact([node.path]));
-  }
-
-  function selectNode(id, focusList = false) {
-    state.selected = id;
-    state.renderer?.refresh();
-    for (const button of elements.list.querySelectorAll('.result-button')) button.setAttribute('aria-current', button.dataset.nodeId === id ? 'true' : 'false');
-    if (focusList) elements.list.querySelector(`[data-node-id="${CSS.escape(id)}"]`)?.scrollIntoView({ block: 'nearest' });
-    renderInspection(state.payload.graph.nodes.find((node) => node.id === id));
-    history.replaceState(null, '', `#${encodeURIComponent(id)}`);
-  }
-
-  async function loadImpact(paths) {
-    elements.status.textContent = 'Calculating impact…';
-    const query = paths.map((path) => `changed=${encodeURIComponent(path)}`).join('&');
-    const response = await fetch(`/api/reroot?${query}`);
-    const payload = await response.json();
-    if (!response.ok || !payload.ok) { elements.status.textContent = payload.error?.message ?? 'Impact calculation failed.'; return; }
-    applyPayload(payload);
-  }
-
-  function applyPayload(payload) {
-    state.payload = payload;
-    state.selected = payload.graph.changedFiles.length === 1 ? `file:${payload.graph.changedFiles[0]}` : null;
-    elements.input.value = payload.graph.changedFiles[0] ?? '';
-    elements.status.textContent = payload.impact.semantic.status === 'available' ? 'Shared structural graph · semantic ranking available' : 'Shared structural graph · structural ranking';
-    const omitted = payload.graph.diagnostics?.disconnectedNodesOmitted ?? 0;
-    const depth = payload.graph.diagnostics?.maximumDepth ?? 0;
-    elements.summary.textContent = `${payload.graph.nodes.length} connected nodes · ${payload.graph.edges.length} relations · ${depth} hops · ${omitted} disconnected omitted`;
-    const warnings = payload.impact.warnings ?? { total: 0, omitted: 0, items: [] };
-    document.querySelector('#reference-warnings').hidden = warnings.total === 0;
-    document.querySelector('#reference-warning-summary').textContent = `${warnings.total} reference warning(s), ${warnings.omitted} omitted. Broken references are excluded; uncertain access is not proof of breakage.`;
-    const warningList = document.querySelector('#reference-warning-list');
-    warningList.replaceChildren(...warnings.items.map((warning) => {
-      const item = document.createElement('li');
-      item.textContent = `${warning.source}${warning.line ? `:${warning.line}` : ''} → ${warning.target} [${warning.reason}]`;
-      return item;
-    }));
-    renderFilters(payload.graph.edges); renderGraph(); renderList(); renderSearch();
-    if (state.selected && payload.graph.nodes.some((node) => node.id === state.selected)) renderInspection(payload.graph.nodes.find((node) => node.id === state.selected));
-    else if (payload.graph.nodes.length === 0) elements.inspection.innerHTML = '<h3>No shared structural nodes</h3><p>Add indexable shared files or relations to populate this graph. Local memory and headings are intentionally hidden.</p>';
-  }
-
-  elements.motionMode.value = state.motionMode;
-  elements.motionMode.addEventListener('change', () => {
-    state.motionMode = MOTION_MODES.has(elements.motionMode.value) ? elements.motionMode.value : 'layer';
-    localStorage.setItem('dotdotgod:graph-motion', state.motionMode);
-    state.firstRender = true;
-    state.previousPositions.clear();
-    renderGraph();
-  });
-  elements.skipReveal.addEventListener('click', () => finishReveal(state.positioned));
-  elements.form.addEventListener('submit', (event) => { event.preventDefault(); const path = elements.input.value.trim(); if (path) loadImpact([path]); });
-  elements.reset.addEventListener('click', () => state.renderer?.getCamera().animatedReset({ duration: matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 250 }));
-  elements.search.addEventListener('input', renderSearch);
-  addEventListener('resize', () => state.renderer?.refresh());
-  fetch('/api/impact').then((response) => response.json()).then(applyPayload).catch((error) => { console.error(error); elements.status.textContent = 'Unable to load impact data.'; });
-})();
+// Standalone renderer. No Obsidian application or internal code required.
+const $=id=>document.getElementById(id),ko=navigator.language.startsWith('ko');
+if(ko){document.documentElement.lang='ko';for(const [id,value]of Object.entries({'title':'그래프 옵션','documents-label':'문서만 표시','colors-label':'색상 범례 표시','weights-label':'가중치로 선 두께 표시',reload:'추적관계 새로고침',copy:'경로 복사'}))$(id).textContent=value;}
+const canvas=document.querySelector('canvas'),ctx=canvas.getContext('2d');
+const fileList = new FileList($('files'), select);
+let data,nodes=[],edges=[],simulation,hover,selected,scale=1,pan=[0,0],drag;
+let disabled=new Set();
+let topology=null;
+function plotArea(){
+ const panel=document.querySelector('aside').getBoundingClientRect();
+ const header=document.querySelector('header').getBoundingClientRect();
+ const left=16,top=header.bottom+16;
+ const right=innerWidth>700?panel.left-16:innerWidth-16;
+ const bottom=innerWidth>700?innerHeight-16:panel.top-16;
+ return {x:(left+right)/2,y:(top+bottom)/2,width:Math.max(1,right-left),height:Math.max(1,bottom-top)};
+}
+function fitGraph(){const fit=graphFit(nodes,plotArea());scale=fit.scale;pan=fit.pan;}
+try{const s=JSON.parse(localStorage.getItem('dd-graph')||'{}');disabled=new Set(s.disabled||[]);for(const id of ['documents','colors','weights'])if(id in s)$(id).checked=s[id];}catch{}
+function save(){try{localStorage.setItem('dd-graph',JSON.stringify({disabled:[...disabled],...Object.fromEntries(['documents','colors','weights'].map(id=>[id,$(id).checked]))}));}catch{}}
+function rebuild(){
+ const filtered=selectTraceability(data,{documentsOnly:$('documents').checked,disabledRelations:[...disabled]});
+ const ids=new Set(filtered.paths), incoming=data.nodes.filter(n=>ids.has(n.id));
+ const nextTopology=layoutKey(incoming,filtered.edges);
+ if(topology===nextTopology){
+  const updates=new Map(incoming.map(n=>[n.id,n]));
+  nodes.forEach(n=>Object.assign(n,updates.get(n.id)));
+  const byId=new Map(nodes.map(n=>[n.id,n]));
+  edges=filtered.edges.map(e=>({...e,source:byId.get(e.source),target:byId.get(e.target)}));
+ }else{
+ const previous=new Map(nodes.map(n=>[n.id,n]));
+ simulation?.stop();
+ nodes=incoming.map(n=>({...n,x:previous.get(n.id)?.x,y:previous.get(n.id)?.y}));
+ edges=filtered.edges.map(e=>({...e}));
+ simulation=createGraphLayout(d3,nodes,edges);
+ simulation.stop();for(let i=0;i<240;i++)simulation.tick();
+ fitGraph();
+ simulation.on('tick',draw).restart();
+ topology=nextTopology;
+ }
+ $('legend').replaceChildren();for(const t of data.types){const b=document.createElement('button');b.setAttribute('aria-pressed',String(!disabled.has(t.relation)));const s=document.createElement('span');s.className='swatch';s.style.background=t.color;b.append(s,document.createTextNode(t.label));b.onclick=()=>{disabled.has(t.relation)?disabled.delete(t.relation):disabled.add(t.relation);save();rebuild();};$('legend').append(b);}
+ for(const [group,color]of new Map(data.nodes.filter(n=>n.group).map(n=>[n.group,n.color]))){const s=document.createElement('span');s.textContent='● '+group;s.style.color=color;$('legend').append(s);}
+ $('legend').hidden=!$('colors').checked;hover=null;$('tooltip').hidden=true;selected=null;$('copy').disabled=true;$('path').textContent='';list();$('status').textContent=`${nodes.length} files · ${edges.length} connections`;draw();
+}
+function select(n){selected=n;$('path').textContent=n.id;$('copy').disabled=false;fileList.setSelected(n.id);draw();}
+function list(){if(!data)return;fileList.setItems(nodes.filter(n=>n.id.toLowerCase().includes($('search').value.toLowerCase())));fileList.setSelected(selected?.id);}
+function draw(){const w=innerWidth,h=innerHeight,d=devicePixelRatio||1;if(canvas.width!==w*d||canvas.height!==h*d){canvas.width=w*d;canvas.height=h*d;}ctx.setTransform(d,0,0,d,0,0);ctx.clearRect(0,0,w,h);const area=plotArea();ctx.translate(area.x+pan[0],area.y+pan[1]);ctx.scale(scale,scale);
+ for(const e of edges){const a=e.source,b=e.target;ctx.strokeStyle=ctx.fillStyle=e.color;ctx.lineWidth=($('weights').checked?Math.max(1,Math.min(6,e.weight)):1)/scale;ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.stroke();const angle=Math.atan2(b.y-a.y,b.x-a.x),x=b.x-Math.cos(angle)*8,y=b.y-Math.sin(angle)*8;ctx.beginPath();ctx.moveTo(x,y);ctx.lineTo(x-Math.cos(angle-.45)*8,y-Math.sin(angle-.45)*8);ctx.lineTo(x-Math.cos(angle+.45)*8,y-Math.sin(angle+.45)*8);ctx.fill();}
+ for(const n of nodes){ctx.fillStyle=n.color||'#c6ccd8';ctx.beginPath();ctx.arc(n.x,n.y,n===hover||n===selected?8:5,0,Math.PI*2);ctx.fill();if((scale>1.5&&nodes.length<60)||n===hover||n===selected){ctx.font=`${12/scale}px monospace`;ctx.textAlign='center';ctx.fillStyle='#d8dee9';ctx.fillText(n.label,n.x,n.y+20/scale);}}}
+function point(e){const area=plotArea();return[(e.clientX-area.x-pan[0])/scale,(e.clientY-area.y-pan[1])/scale];}
+function hit(e){const[x,y]=point(e);return nodes.find(n=>Math.hypot(n.x-x,n.y-y)<12/scale);}
+canvas.onpointerdown=e=>{drag={node:hit(e),x:e.clientX,y:e.clientY};canvas.setPointerCapture(e.pointerId);};
+canvas.onpointermove=e=>{if(drag){if(drag.node){const[x,y]=point(e);drag.node.fx=x;drag.node.fy=y;simulation.alpha(.2).restart();}else{pan[0]+=e.clientX-drag.x;pan[1]+=e.clientY-drag.y;}drag.x=e.clientX;drag.y=e.clientY;}hover=hit(e);const t=$('tooltip');t.hidden=!hover||!!drag;if(hover){t.textContent=hover.label;t.style.left=Math.max(8,Math.min(e.clientX+12,innerWidth-t.offsetWidth-8))+'px';t.style.top=Math.max(8,Math.min(e.clientY+18,innerHeight-t.offsetHeight-8))+'px';}draw();};
+canvas.onpointerup=()=>{if(drag?.node){select(drag.node);drag.node.fx=null;drag.node.fy=null;}drag=null;};canvas.onpointercancel=()=>{if(drag?.node){drag.node.fx=null;drag.node.fy=null;}drag=null;};canvas.onpointerleave=()=>{$('tooltip').hidden=true;hover=null;draw();};
+canvas.addEventListener('wheel',e=>{
+ e.preventDefault();
+ const [x,y]=point(e),area=plotArea(),fit=graphFit(nodes,area);
+ const minScale=Math.min(.01,fit.scale/10);
+ scale=Math.max(minScale,Math.min(6,scale*Math.exp(-e.deltaY*.001)));
+ pan=[e.clientX-area.x-x*scale,e.clientY-area.y-y*scale];
+ if(e.deltaY>0&&scale<=fit.scale)pan=keepGraphInView(nodes,area,scale,pan);
+ draw();
+},{passive:false});
+for(const id of ['documents','colors','weights'])$(id).onchange=()=>{save();if(data)rebuild();};$('search').oninput=list;$('copy').onclick=async()=>{try{await navigator.clipboard.writeText(selected.id);}catch{$('status').textContent=selected.id;}};
+async function load(){
+ if($('reload').disabled)return;
+ $('reload').disabled=true;
+ const previous=data;
+ try{data=await fetchGraph();rebuild();}
+ catch(error){
+  data=previous;
+  $('status').textContent=(ko?'새로고침 실패. 서버를 확인한 뒤 다시 시도하세요. ':'Reload failed. Check the server and try again. ')+error.message;
+  console.error(error);
+ }finally{$('reload').disabled=false;}
+}
+$('reload').onclick=load;addEventListener('resize',()=>{fitGraph();draw();});load();

package/src/graph-view/assets/file-list.js

@@ -0,0 +1,82 @@
+// Fixed-height windowing; the complete filtered set remains keyboard-navigable.
+function fileWindow(count, scrollTop, height, rowHeight = 36, overscan = 5) {
+  const start = Math.max(0, Math.min(Math.floor(scrollTop / rowHeight) - overscan, Math.max(0, count - 1)));
+  return { start, end: Math.min(count, start + Math.ceil(height / rowHeight) + overscan * 2) };
+}
+
+class FileList {
+  constructor(element, onSelect) {
+    this.element = element;
+    this.onSelect = onSelect;
+    this.items = [];
+    this.focused = 0;
+    this.selected = null;
+    this.rowHeight = 36;
+    element.setAttribute('aria-label', document.documentElement.lang === 'ko' ? '파일 목록' : 'Files');
+    element.addEventListener('scroll', () => this.render());
+    element.addEventListener('keydown', event => {
+      const keys = ['ArrowDown', 'ArrowUp', 'Home', 'End'];
+      if (!keys.includes(event.key) || !this.items.length) return;
+      event.preventDefault();
+      const delta = event.key === 'ArrowDown' ? 1 : -1;
+      this.focused = event.key === 'Home' ? 0 : event.key === 'End' ? this.items.length - 1 : Math.max(0, Math.min(this.items.length - 1, this.focused + delta));
+      const top = this.focused * this.rowHeight;
+      if (top < element.scrollTop) element.scrollTop = top;
+      else if (top + this.rowHeight > element.scrollTop + element.clientHeight) element.scrollTop = top + this.rowHeight - element.clientHeight;
+      this.render(true);
+    });
+    this.observer = new ResizeObserver(() => this.render());
+    this.observer.observe(element);
+  }
+
+  setItems(items) {
+    this.items = items;
+    this.focused = 0;
+    this.element.scrollTop = 0;
+    this.render();
+  }
+
+  setSelected(id) {
+    this.selected = id;
+    for (const button of this.element.querySelectorAll('button')) {
+      button.setAttribute('aria-pressed', String(button.dataset.path === id));
+    }
+  }
+
+  render(focus = false) {
+    const element = this.element;
+    const current = element.ownerDocument.activeElement;
+    const restoreFocus = focus || element.contains(current);
+    const { start, end } = fileWindow(this.items.length, element.scrollTop, element.clientHeight);
+    if (this.focused < start || this.focused >= end) this.focused = start;
+    const fragment = document.createDocumentFragment();
+    const spacer = height => {
+      const li = document.createElement('li');
+      li.setAttribute('aria-hidden', 'true');
+      li.style.height = `${height}px`;
+      fragment.append(li);
+    };
+    spacer(start * this.rowHeight);
+    for (let index = start; index < end; index++) {
+      const item = this.items[index];
+      const li = document.createElement('li');
+      li.setAttribute('aria-posinset', String(index + 1));
+      li.setAttribute('aria-setsize', String(this.items.length));
+      const button = document.createElement('button');
+      button.textContent = item.label;
+      button.title = item.id;
+      button.dataset.path = item.id;
+      button.tabIndex = index === this.focused ? 0 : -1;
+      button.setAttribute('aria-pressed', String(item.id === this.selected));
+      button.addEventListener('focus', () => { this.focused = index; });
+      button.onclick = () => this.onSelect(item);
+      li.append(button);
+      fragment.append(li);
+    }
+    spacer((this.items.length - end) * this.rowHeight);
+    element.replaceChildren(fragment);
+    if (restoreFocus) element.querySelector('button[tabindex="0"]')?.focus({ preventScroll: true });
+  }
+}
+
+if (typeof module !== 'undefined') module.exports = { fileWindow };

package/src/graph-view/assets/graph-client.js

@@ -0,0 +1,21 @@
+async function fetchGraph(fetcher = fetch) {
+  let response;
+  try { response = await fetcher('/api/graph', { cache: 'no-store' }); }
+  catch { throw new Error('NETWORK: graph server is unavailable'); }
+  let graph;
+  try { graph = await response.json(); }
+  catch { throw new Error(`HTTP ${response.status}: invalid graph response; check the server URL and version`); }
+  if (!response.ok) {
+    const details = typeof graph.error?.message === 'string' ? graph.error.message.slice(0, 800) : 'graph request failed';
+    throw new Error(`HTTP ${response.status}: ${details}`);
+  }
+  if (graph.version !== 1 || !Array.isArray(graph.nodes) || !Array.isArray(graph.edges) || !Array.isArray(graph.types)) {
+    throw new Error('INVALID_GRAPH: incompatible graph data; reload the page and server');
+  }
+  const paths = new Set(graph.nodes.map(node => node.id));
+  if (graph.edges.some(edge => !paths.has(edge.source) || !paths.has(edge.target))) {
+    throw new Error('INVALID_GRAPH: connection endpoint is missing');
+  }
+  return graph;
+}
+if (typeof module !== 'undefined') module.exports = { fetchGraph };

package/src/graph-view/assets/index.html

@@ -1,78 +1,21 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>dotdotgod structural graph</title>
-  <link rel="stylesheet" href="/app.css">
-</head>
-<body>
-  <header class="command-rail">
-    <div class="brand"><span class="brand-mark" aria-hidden="true"></span><strong>dotdotgod</strong><span>structural graph</span></div>
-    <form id="reroot-form" class="reroot-form">
-      <label for="reroot-path">Re-root graph</label>
-      <input id="reroot-path" name="changed" autocomplete="off" placeholder="packages/cli/src/core.mjs">
-      <button type="submit">Inspect file</button>
-    </form>
-    <p id="status" role="status">Loading impact data…</p>
-  </header>
-
-  <main class="workspace">
-    <aside class="filters" aria-labelledby="filters-title">
-      <div>
-        <h1 id="filters-title">Relation signals</h1>
-        <p>Filter what is drawn without changing the impact ranking.</p>
-      </div>
-      <fieldset id="relation-filters"><legend class="sr-only">Visible relation types</legend></fieldset>
-      <label class="motion-control" for="motion-mode">Node reveal</label>
-      <select id="motion-mode">
-        <option value="instant">Instant</option>
-        <option value="layer">By hop layer</option>
-        <option value="sequence">One by one</option>
-      </select>
-      <button id="skip-reveal" type="button" hidden>Skip reveal</button>
-      <div class="legend" aria-label="Node legend">
-        <span><i class="node-key seed"></i>Changed root</span>
-        <span><i class="node-key doc"></i>Documentation</span>
-        <span><i class="node-key test"></i>Verification</span>
-        <span><i class="node-key code"></i>Source</span>
-        <span><i class="node-key contract"></i>Contract</span>
-        <span><i class="node-key heading"></i>Heading</span>
-      </div>
-      <p class="reading-note">The graph grows outward from changed-file roots by structural hop. Position is layout only, never rank.</p>
-    </aside>
-
-    <section class="plot" aria-labelledby="plot-title">
-      <div class="plot-heading">
-        <div><h2 id="plot-title">Impact field</h2><p id="plot-summary"></p></div>
-        <button id="reset-camera" type="button">Reset view</button>
-      </div>
-      <div id="graph" aria-hidden="true"></div>
-      <div id="graph-fallback" class="graph-fallback" hidden>WebGL is unavailable. Use the synchronized ranked list.</div>
-    </section>
-
-    <aside class="evidence" aria-labelledby="evidence-title">
-      <section class="node-search" aria-labelledby="node-search-title">
-        <label id="node-search-title" for="node-search-input">Search shared graph nodes</label>
-        <input id="node-search-input" type="search" autocomplete="off" placeholder="Path, title, or node ID" aria-controls="node-search-results">
-        <ul id="node-search-results" class="node-search-results"></ul>
-      </section>
-      <div class="evidence-heading"><h2 id="evidence-title">Ranked evidence</h2><span id="result-count"></span></div>
-      <section id="reference-warnings" class="reference-warnings" aria-live="polite" hidden>
-        <h3>Reference warnings</h3>
-        <p id="reference-warning-summary"></p>
-        <ul id="reference-warning-list"></ul>
-      </section>
-      <ol id="result-list" class="result-list"></ol>
-      <section id="inspection" class="inspection" aria-live="polite">
-        <h3>Select an impacted file</h3>
-        <p>The graph and ranked list share one selection. Details will appear here.</p>
-      </section>
-    </aside>
-  </main>
-  <script src="/vendor/graphology.js"></script>
-  <script src="/vendor/sigma.js"></script>
-  <script src="/vendor/d3.js"></script>
-  <script src="/app.js"></script>
-</body>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>dotdotgod Traceability</title><link rel="stylesheet" href="/app.css">
+<header><h1>dotdotgod · Traceability</h1><div id="legend"></div></header>
+<canvas aria-label="File relationship graph"></canvas>
+<aside>
+  <details open><summary id="title">Graph options</summary>
+    <label><input id="documents" type="checkbox"><span id="documents-label">Documents only</span></label>
+    <label><input id="colors" type="checkbox" checked><span id="colors-label">Show color legend</span></label>
+    <label><input id="weights" type="checkbox" checked><span id="weights-label">Weight-based line width</span></label>
+    <button id="reload">Reload</button>
+  </details>
+  <p id="status" role="status"></p>
+  <input id="search" aria-label="Search files" placeholder="Search files">
+  <ul id="files"></ul><p id="path"></p><button id="copy" disabled>Copy path</button>
+</aside>
+<div id="tooltip" hidden></div>
+<script src="/vendor/d3.js"></script><script src="/policy.js"></script>
+<script src="/file-list.js"></script><script src="/graph-client.js"></script><script src="/layout.js"></script><script src="/app.js"></script>
 </html>

package/src/graph-view/assets/layout.js

@@ -0,0 +1,47 @@
+function layoutKey(nodes, edges) {
+  return JSON.stringify([
+    nodes.map(node => node.id).sort(),
+    edges.map(edge => [typeof edge.source === 'string' ? edge.source : edge.source.id,
+      typeof edge.target === 'string' ? edge.target : edge.target.id]).sort((a, b) => JSON.stringify(a).localeCompare(JSON.stringify(b))),
+  ]);
+}
+
+function createGraphLayout(d3, nodes, edges) {
+  return d3.forceSimulation(nodes)
+    .force('link', d3.forceLink(edges).id(node => node.id).distance(110))
+    .force('charge', d3.forceManyBody().strength(-180).distanceMax(450))
+    .force('center', d3.forceCenter())
+    .force('x', d3.forceX(0).strength(.04))
+    .force('y', d3.forceY(0).strength(.04))
+    .force('collision', d3.forceCollide(18));
+}
+
+function graphFit(nodes, viewport) {
+  const points = nodes.filter(node => Number.isFinite(node.x) && Number.isFinite(node.y));
+  if (!points.length) return { scale: 1, pan: [0, 0] };
+  let left = Infinity, right = -Infinity, top = Infinity, bottom = -Infinity;
+  for (const node of points) {
+    left = Math.min(left, node.x); right = Math.max(right, node.x);
+    top = Math.min(top, node.y); bottom = Math.max(bottom, node.y);
+  }
+  const scale = Math.min(1, Math.max(1, viewport.width - 64) / Math.max(1, right - left + 32),
+    Math.max(1, viewport.height - 64) / Math.max(1, bottom - top + 32));
+  return { scale, pan: [-(left + right) / 2 * scale, -(top + bottom) / 2 * scale] };
+}
+
+function keepGraphInView(nodes, viewport, scale, pan) {
+  if (!nodes.length) return pan;
+  let left = Infinity, right = -Infinity, top = Infinity, bottom = -Infinity;
+  for (const node of nodes) {
+    left = Math.min(left, node.x); right = Math.max(right, node.x);
+    top = Math.min(top, node.y); bottom = Math.max(bottom, node.y);
+  }
+  const constrain = (min, max, size, offset) => {
+    const low = -size / 2 + 16 - min * scale;
+    const high = size / 2 - 16 - max * scale;
+    return low <= high ? Math.max(low, Math.min(high, offset)) : offset;
+  };
+  return [constrain(left, right, viewport.width, pan[0]), constrain(top, bottom, viewport.height, pan[1])];
+}
+
+if (typeof module !== 'undefined') module.exports = { layoutKey, createGraphLayout, graphFit, keepGraphInView };

package/src/graph-view/node-style.cjs

@@ -0,0 +1,12 @@
+const palette = ['#b9a3ff', '#70c9a2', '#72b9e6', '#d6b879', '#e393a9', '#78c9cd', '#a6c67a', '#e5a475'];
+function describeNode(path, root = 'docs') {
+  root = root.replace(/^\.\//, '').replace(/\/$/, '');
+  if (!path.startsWith(`${root}/`)) return { label: path, group: null, color: null };
+  const parts = path.slice(root.length + 1).split('/');
+  const group = parts.length === 1 ? root : parts.shift();
+  let hash = 0;
+  for (const char of group) hash = (Math.imul(hash, 31) + char.charCodeAt(0)) >>> 0;
+  const known = { docs: '#b9a3ff', spec: '#72b9e6', arch: '#d6b879', test: '#70c9a2', concept: '#e393a9', report: '#78c9cd' };
+  return { label: parts.join('/'), group, color: known[group] ?? palette[hash % palette.length] };
+}
+module.exports = { describeNode };