ts-knowledge-graph 0.1.1 → 0.1.2

package/README.md

@@ -1,9 +1,15 @@
-# open_ts_optim_ai
+# ts_knowledge_graph
 
 Parse TypeScript source code into a **knowledge graph**, then use that graph as
 the substrate for an autonomous AI agent that finds and applies code
 optimizations.
 
+## Documentation
+
+Full documentation lives in [`./docs`](docs/INDEX.md). The
+[documentation index](docs/INDEX.md) describes every guide and command — start
+there, or jump straight to [Getting Started](docs/GETTING_STARTED.md).
+
 ## Why a graph
 
 An optimization agent constantly needs to reason about *blast radius*:
@@ -73,12 +79,27 @@ The query methods on `GraphQuery` (`whoCalls`, `blastRadius`, `deadExports`,
 `neighborhood`, …) are designed to map one-to-one onto agent tools: JSON in,
 JSON out.
 
+For a task-oriented walk-through of these commands — using them by hand to
+answer impact, dead-code, and dependency questions — see the
+[Static Analysis guide](docs/STATIC_ANALYSIS.md).
+
 > **`dead-exports` accuracy:** it is member-aware (a class/interface counts as
 > live when any contained member is referenced) and considers `CALLS`,
 > `EXTENDS`, `IMPLEMENTS`, `USES_TYPE`, `RETURNS`, `PARAM_TYPE`, `INSTANTIATES`,
 > and `READS` (value-identifier) edges. On this repository it reports exactly the
 > two genuinely-unused type aliases — no false positives.
 
+### Web visualisation
+
+Serve the database as an interactive graph — pan/zoom, kind filters, symbol
+search, per-node edge listing (see
+[contribs/web_visualisation](contribs/web_visualisation)):
+
+```bash
+npm run web            # reads ./outputs/graph.kuzu, serves http://localhost:4173
+npm run web -- --db ./outputs/graph.kuzu --port 8080
+```
+
 ### The optimization agent
 
 The end goal: an agent that uses the graph to find and apply optimizations,
@@ -109,22 +130,22 @@ find/replace with in-memory backups; run on a clean git tree so you can review
 src/
   schema/        Zod schemas for nodes and edges (the wire format)
   extract/
-    project-loader.ts        load a ts-morph Project from tsconfig
-    node-id.ts               deterministic, position-stable node ids
-    structural-extractor.ts  modules, declarations, imports, containment
-    semantic-extractor.ts    heritage, CALLS, INSTANTIATES, type edges
-    graph-builder.ts         orchestrates extraction, dedupes by id
+    project_loader.ts        load a ts-morph Project from tsconfig
+    node_id.ts               deterministic, position-stable node ids
+    structural_extractor.ts  modules, declarations, imports, containment
+    semantic_extractor.ts    heritage, CALLS, INSTANTIATES, type edges
+    graph_builder.ts         orchestrates extraction, dedupes by id
   store/
-    jsonl-store.ts           serialize the graph to JSONL
-    jsonl-reader.ts          read + Zod-validate the JSONL back in
-    kuzu-store.ts            load the graph into embedded Kùzu, run Cypher
+    jsonl_store.ts           serialize the graph to JSONL
+    jsonl_reader.ts          read + Zod-validate the JSONL back in
+    kuzu_store.ts            load the graph into embedded Kùzu, run Cypher
   query/
-    graph-query.ts           the agent's query tools (who-calls, blast-radius…)
+    graph_query.ts           the agent's query tools (who-calls, blast-radius…)
   agent/
-    agent-tools.ts           graph queries + read_file + propose_optimization, as LLM tools
-    code-editor.ts           unique-match find/replace with in-memory backup + revert
+    agent_tools.ts           graph queries + read_file + propose_optimization, as LLM tools
+    code_editor.ts           unique-match find/replace with in-memory backup + revert
     verifier.ts              runs `tsc --noEmit`, returns pass/fail + output
-    optimizer-agent.ts       the LLM tool-calling loop (propose → verify → keep/revert)
+    optimizer_agent.ts       the LLM tool-calling loop (propose → verify → keep/revert)
   cli.ts                     extract / load / query / optimize commands
 ```
 

package/contribs/web_visualisation/README.md

@@ -0,0 +1,55 @@
+# Web visualisation
+
+Interactive viewer for the knowledge graph — pan/zoom, color-coded node and
+edge kinds with toggleable filters, symbol search, and a per-node detail panel
+showing every incoming/outgoing edge.
+
+**No server required.** The page (in [web/](web)) is fully static; only the
+Cytoscape.js library comes from a CDN (so you need internet, or vendor the
+file).
+
+## Commands
+
+```bash
+npm run build    # embed ../../outputs/graph/*.jsonl into web/data/graph_data.js
+npm start        # serve web/ on http://localhost:4173 (optional)
+npm run open     # open web/index.html directly (file://, macOS)
+```
+
+## Loading data — pick one
+
+**A. Embed the data, then open the page** (works from `file://`, no server):
+
+```bash
+# from the repo root, after `npm run extract -- . --semantic`
+cd contribs/web_visualisation
+npm run build
+npm run open
+```
+
+`scripts/build-data.ts` reads `../../outputs/graph/{nodes,edges}.jsonl` by
+default; pass a different graph directory as the first argument
+(`npx tsx scripts/build-data.ts /path/to/graph`).
+
+**B. Drag & drop** — open `web/index.html` any way at all and drop
+`outputs/graph/nodes.jsonl` + `outputs/graph/edges.jsonl` onto the page.
+
+**C. Serve the repo root** — the page then auto-fetches
+`../../../outputs/graph/*.jsonl`:
+
+```bash
+# from the repo root
+npx serve        # or: python3 -m http.server
+# open http://localhost:3000/contribs/web_visualisation/web/
+```
+
+## Reading the graph
+
+- **Node size** scales with degree (how connected a symbol is).
+- **Edge colors**: red `CALLS`, green/teal type edges (`USES_TYPE`, `RETURNS`,
+  `PARAM_TYPE`), yellow `READS`, violet heritage, gray structure
+  (`CONTAINS`, `IMPORTS`).
+- Uncheck noisy kinds (`CONTAINS`, `IMPORTS`) to see the behavioral core;
+  enable **hide isolated nodes** to drop whatever the filter disconnected.
+- Click a node to fade everything outside its neighborhood and list its edges
+  in the sidebar — the links navigate the graph.

package/contribs/web_visualisation/web/css/style.css

@@ -0,0 +1,115 @@
+* { box-sizing: border-box; }
+
+html, body {
+	margin: 0;
+	height: 100%;
+	font: 13px/1.45 -apple-system, 'Segoe UI', Roboto, sans-serif;
+	background: #0f172a;
+	color: #cbd5e1;
+}
+
+body { display: flex; }
+
+#sidebar {
+	width: 300px;
+	flex: none;
+	height: 100%;
+	overflow-y: auto;
+	padding: 14px;
+	background: #111c33;
+	border-right: 1px solid #1e293b;
+}
+
+#sidebar h1 { font-size: 15px; margin: 0 0 4px; color: #f1f5f9; }
+#sidebar h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; margin: 16px 0 6px; }
+#sidebar section { margin-top: 8px; }
+
+#status { font-size: 11px; color: #64748b; margin-bottom: 10px; }
+
+#search {
+	width: 100%;
+	padding: 6px 8px;
+	border: 1px solid #334155;
+	border-radius: 6px;
+	background: #0f172a;
+	color: #e2e8f0;
+}
+#search:focus { outline: none; border-color: #4f8cff; }
+
+#search-results { margin-top: 4px; }
+#search-results .hit {
+	padding: 3px 6px;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 12px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+#search-results .hit:hover { background: #1e293b; }
+#search-results .hit .loc { color: #64748b; font-size: 10px; }
+
+.legend label {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 1px 0;
+	cursor: pointer;
+	user-select: none;
+}
+.legend .swatch {
+	width: 10px;
+	height: 10px;
+	border-radius: 3px;
+	flex: none;
+}
+.legend .count { margin-left: auto; color: #64748b; font-size: 11px; }
+
+.row { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
+
+select, button {
+	background: #1e293b;
+	color: #e2e8f0;
+	border: 1px solid #334155;
+	border-radius: 6px;
+	padding: 4px 8px;
+	font: inherit;
+	cursor: pointer;
+}
+button:hover { background: #334155; }
+select { flex: 1; }
+
+#details-body { font-size: 12px; }
+#details-body .id { color: #64748b; font-size: 10px; word-break: break-all; }
+#details-body .kind-tag {
+	display: inline-block;
+	padding: 1px 6px;
+	border-radius: 4px;
+	font-size: 10px;
+	color: #0f172a;
+	font-weight: 600;
+}
+#details-body h3 { font-size: 11px; color: #64748b; margin: 10px 0 3px; }
+#details-body .edge-row { padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+#details-body .edge-kind { color: #64748b; font-size: 10px; }
+#details-body a { color: #7db2ff; cursor: pointer; text-decoration: none; }
+#details-body a:hover { text-decoration: underline; }
+
+#cy { flex: 1; height: 100%; }
+
+#dropzone {
+	position: fixed;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 18px;
+	color: #e2e8f0;
+	background: rgba(15, 23, 42, .85);
+	border: 3px dashed #4f8cff;
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity .15s;
+}
+#dropzone.active { opacity: 1; }
+#dropzone code { color: #7db2ff; }

package/contribs/web_visualisation/web/data/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

package/contribs/web_visualisation/web/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>open_ts_optim_ai — knowledge graph</title>
+	<link rel="stylesheet" href="./css/style.css">
+</head>
+<body>
+	<aside id="sidebar">
+		<h1>Knowledge graph</h1>
+		<div id="status">no data loaded</div>
+
+		<input id="search" type="search" placeholder="Search symbol or file… (Enter)" autocomplete="off">
+		<div id="search-results"></div>
+
+		<section>
+			<h2>Node kinds</h2>
+			<div id="node-kinds" class="legend"></div>
+		</section>
+
+		<section>
+			<h2>Edge kinds</h2>
+			<div id="edge-kinds" class="legend"></div>
+		</section>
+
+		<section>
+			<h2>Options</h2>
+			<label class="row"><input id="hide-isolated" type="checkbox"> hide isolated nodes</label>
+			<div class="row">
+				<select id="layout-select">
+					<option value="cose">cose (force)</option>
+					<option value="concentric">concentric (by degree)</option>
+					<option value="breadthfirst">breadthfirst</option>
+					<option value="circle">circle</option>
+					<option value="grid">grid</option>
+				</select>
+				<button id="relayout">layout</button>
+			</div>
+		</section>
+
+		<section id="details" class="empty">
+			<h2>Selection</h2>
+			<div id="details-body">click a node</div>
+		</section>
+	</aside>
+
+	<main id="cy"></main>
+
+	<div id="dropzone" class="hidden-overlay">
+		<div>drop <code>nodes.jsonl</code> + <code>edges.jsonl</code> here</div>
+	</div>
+
+	<script src="./data/graph_data.js"></script>
+	<script src="https://unpkg.com/cytoscape@3/dist/cytoscape.min.js"></script>
+	<script src="./js/app.js"></script>
+</body>
+</html>

package/contribs/web_visualisation/web/js/app.js

@@ -0,0 +1,364 @@
+'use strict';
+
+const NODE_COLORS = {
+	Module: '#4f8cff',
+	Class: '#f59e0b',
+	Interface: '#a78bfa',
+	TypeAlias: '#34d399',
+	Enum: '#f472b6',
+	Function: '#fb923c',
+	Method: '#facc15',
+	Property: '#94a3b8',
+	Parameter: '#64748b',
+	Variable: '#2dd4bf',
+	ExternalModule: '#6b7280',
+};
+
+const EDGE_COLORS = {
+	CONTAINS: '#475569',
+	IMPORTS: '#64748b',
+	EXPORTS: '#64748b',
+	CALLS: '#ef4444',
+	INSTANTIATES: '#f97316',
+	EXTENDS: '#8b5cf6',
+	IMPLEMENTS: '#a78bfa',
+	USES_TYPE: '#10b981',
+	RETURNS: '#14b8a6',
+	PARAM_TYPE: '#06b6d4',
+	READS: '#eab308',
+	WRITES: '#eab308',
+	OVERRIDES: '#94a3b8',
+};
+
+const state = {
+	nodes: [],
+	edges: [],
+	cy: undefined,
+	hiddenNodeKinds: new Set(),
+	hiddenEdgeKinds: new Set(),
+	hideIsolated: false,
+	droppedFiles: { nodes: undefined, edges: undefined },
+};
+
+const el = (id) => document.getElementById(id);
+
+/* ---------- data loading ---------- */
+
+function boot() {
+	setupDropzone();
+	el('hide-isolated').addEventListener('change', (event) => {
+		state.hideIsolated = event.target.checked;
+		applyFilters();
+	});
+	el('relayout').addEventListener('click', () => runLayout());
+	el('search').addEventListener('input', () => renderSearchResults());
+	el('search').addEventListener('keydown', (event) => {
+		if (event.key === 'Enter') {
+			const first = document.querySelector('#search-results .hit');
+			if (first !== null) {
+				first.click();
+			}
+		}
+	});
+
+	if (window.GRAPH_DATA !== undefined) {
+		setData(window.GRAPH_DATA.nodes, window.GRAPH_DATA.edges, 'embedded graph_data.js');
+		return;
+	}
+	if (location.protocol.startsWith('http') === true) {
+		tryFetch();
+		return;
+	}
+	el('status').textContent = 'no data — run `npm run build`, or drop the JSONL files here';
+}
+
+async function tryFetch() {
+	try {
+		const [nodesText, edgesText] = await Promise.all([
+			fetch('../../../outputs/graph/nodes.jsonl').then((r) => r.ok === true ? r.text() : Promise.reject(new Error(String(r.status)))),
+			fetch('../../../outputs/graph/edges.jsonl').then((r) => r.ok === true ? r.text() : Promise.reject(new Error(String(r.status)))),
+		]);
+		setData(parseJsonl(nodesText), parseJsonl(edgesText), 'fetched ../../../outputs/graph/*.jsonl');
+	} catch {
+		el('status').textContent = 'no data — generate data/graph_data.js or drop the JSONL files here';
+	}
+}
+
+function parseJsonl(text) {
+	return text.split('\n').filter((line) => line.trim().length > 0).map((line) => JSON.parse(line));
+}
+
+function setupDropzone() {
+	const zone = el('dropzone');
+	window.addEventListener('dragover', (event) => {
+		event.preventDefault();
+		zone.classList.add('active');
+	});
+	window.addEventListener('dragleave', (event) => {
+		if (event.relatedTarget === null) {
+			zone.classList.remove('active');
+		}
+	});
+	window.addEventListener('drop', async (event) => {
+		event.preventDefault();
+		zone.classList.remove('active');
+		for (const file of event.dataTransfer.files) {
+			const records = parseJsonl(await file.text());
+			if (records.length === 0) {
+				continue;
+			}
+			if (records[0].from !== undefined && records[0].to !== undefined) {
+				state.droppedFiles.edges = records;
+			} else {
+				state.droppedFiles.nodes = records;
+			}
+		}
+		if (state.droppedFiles.nodes !== undefined && state.droppedFiles.edges !== undefined) {
+			setData(state.droppedFiles.nodes, state.droppedFiles.edges, 'dropped files');
+		} else {
+			el('status').textContent = 'got one file — drop the other one too';
+		}
+	});
+}
+
+/* ---------- graph construction ---------- */
+
+function setData(nodes, edges, sourceLabel) {
+	state.nodes = nodes;
+	state.edges = edges;
+
+	const nodeIds = new Set(nodes.map((node) => node.id));
+	const degree = new Map();
+	for (const edge of edges) {
+		degree.set(edge.from, (degree.get(edge.from) ?? 0) + 1);
+		degree.set(edge.to, (degree.get(edge.to) ?? 0) + 1);
+	}
+
+	const elements = [
+		...nodes.map((node) => ({
+			group: 'nodes',
+			data: { id: node.id, name: node.name, kind: node.kind, filePath: node.filePath, startLine: node.range === undefined ? 0 : node.range.startLine, exported: node.exported === true, degree: degree.get(node.id) ?? 0 },
+		})),
+		...edges
+			.filter((edge) => nodeIds.has(edge.from) === true && nodeIds.has(edge.to) === true)
+			.map((edge) => ({
+				group: 'edges',
+				data: { id: edge.id, source: edge.from, target: edge.to, kind: edge.kind },
+			})),
+	];
+
+	if (state.cy !== undefined) {
+		state.cy.destroy();
+	}
+	state.cy = cytoscape({
+		container: el('cy'),
+		elements,
+		style: cyStyle(),
+		layout: { name: 'cose', animate: false, padding: 30 },
+	});
+	state.cy.on('tap', 'node', (event) => select(event.target));
+	state.cy.on('tap', (event) => {
+		if (event.target === state.cy) {
+			clearSelection();
+		}
+	});
+
+	buildLegends();
+	applyFilters();
+	el('status').textContent = `${sourceLabel} — ${nodes.length} nodes, ${edges.length} edges`;
+}
+
+function cyStyle() {
+	return [
+		{
+			selector: 'node',
+			style: {
+				'background-color': (node) => NODE_COLORS[node.data('kind')] ?? '#9ca3af',
+				'width': (node) => 8 + Math.sqrt(node.data('degree')) * 4,
+				'height': (node) => 8 + Math.sqrt(node.data('degree')) * 4,
+				'label': 'data(name)',
+				'color': '#cbd5e1',
+				'font-size': 8,
+				'min-zoomed-font-size': 7,
+				'text-valign': 'bottom',
+				'text-margin-y': 3,
+			},
+		},
+		{
+			selector: 'edge',
+			style: {
+				'width': 1,
+				'line-color': (edge) => EDGE_COLORS[edge.data('kind')] ?? '#475569',
+				'target-arrow-color': (edge) => EDGE_COLORS[edge.data('kind')] ?? '#475569',
+				'target-arrow-shape': 'triangle',
+				'arrow-scale': 0.6,
+				'curve-style': 'bezier',
+				'opacity': 0.65,
+			},
+		},
+		{ selector: '.hidden', style: { display: 'none' } },
+		{ selector: '.faded', style: { opacity: 0.08, 'text-opacity': 0 } },
+		{ selector: 'node.sel', style: { 'border-width': 3, 'border-color': '#ffffff' } },
+	];
+}
+
+function runLayout() {
+	const name = el('layout-select').value;
+	const options = name === 'concentric'
+		? { name, concentric: (node) => node.degree(), levelWidth: () => 2, animate: false, padding: 30 }
+		: { name, animate: false, padding: 30 };
+	state.cy.elements(':visible').layout(options).run();
+}
+
+/* ---------- legends & filtering ---------- */
+
+function buildLegends() {
+	const nodeCounts = countBy(state.nodes.map((node) => node.kind));
+	const edgeCounts = countBy(state.edges.map((edge) => edge.kind));
+	renderLegend(el('node-kinds'), nodeCounts, NODE_COLORS, state.hiddenNodeKinds);
+	renderLegend(el('edge-kinds'), edgeCounts, EDGE_COLORS, state.hiddenEdgeKinds);
+}
+
+function renderLegend(container, counts, colors, hiddenSet) {
+	container.innerHTML = '';
+	for (const [kind, count] of counts) {
+		const label = document.createElement('label');
+		const checkbox = document.createElement('input');
+		checkbox.type = 'checkbox';
+		checkbox.checked = hiddenSet.has(kind) === false;
+		checkbox.addEventListener('change', () => {
+			if (checkbox.checked === true) {
+				hiddenSet.delete(kind);
+			} else {
+				hiddenSet.add(kind);
+			}
+			applyFilters();
+		});
+		const swatch = document.createElement('span');
+		swatch.className = 'swatch';
+		swatch.style.background = colors[kind] ?? '#9ca3af';
+		const text = document.createElement('span');
+		text.textContent = kind;
+		const countSpan = document.createElement('span');
+		countSpan.className = 'count';
+		countSpan.textContent = String(count);
+		label.append(checkbox, swatch, text, countSpan);
+		container.appendChild(label);
+	}
+}
+
+function applyFilters() {
+	const cy = state.cy;
+	if (cy === undefined) {
+		return;
+	}
+	cy.batch(() => {
+		cy.nodes().forEach((node) => {
+			node.toggleClass('hidden', state.hiddenNodeKinds.has(node.data('kind')) === true);
+		});
+		cy.edges().forEach((edge) => {
+			edge.toggleClass('hidden', state.hiddenEdgeKinds.has(edge.data('kind')) === true);
+		});
+		if (state.hideIsolated === true) {
+			cy.nodes().not('.hidden').forEach((node) => {
+				const hasVisibleEdge = node.connectedEdges().some((edge) =>
+					edge.hasClass('hidden') === false
+					&& edge.source().hasClass('hidden') === false
+					&& edge.target().hasClass('hidden') === false);
+				if (hasVisibleEdge === false) {
+					node.addClass('hidden');
+				}
+			});
+		}
+	});
+}
+
+function countBy(values) {
+	const counts = new Map();
+	for (const value of values) {
+		counts.set(value, (counts.get(value) ?? 0) + 1);
+	}
+	return [...counts.entries()].sort((a, b) => b[1] - a[1]);
+}
+
+/* ---------- search ---------- */
+
+function renderSearchResults() {
+	const query = el('search').value.trim().toLowerCase();
+	const container = el('search-results');
+	container.innerHTML = '';
+	if (query.length < 2) {
+		return;
+	}
+	const hits = state.nodes
+		.filter((node) => node.name.toLowerCase().includes(query) === true || node.filePath.toLowerCase().includes(query) === true)
+		.slice(0, 15);
+	for (const hit of hits) {
+		const row = document.createElement('div');
+		row.className = 'hit';
+		row.innerHTML = `${escapeHtml(hit.name)} <span class="loc">${escapeHtml(hit.kind)} · ${escapeHtml(hit.filePath)}</span>`;
+		row.addEventListener('click', () => {
+			const node = state.cy.getElementById(hit.id);
+			if (node.length === 1) {
+				select(node);
+				state.cy.animate({ center: { eles: node }, zoom: 2 }, { duration: 350 });
+			}
+		});
+		container.appendChild(row);
+	}
+}
+
+/* ---------- selection & details ---------- */
+
+function select(node) {
+	const cy = state.cy;
+	cy.elements().addClass('faded').removeClass('sel');
+	const hood = node.closedNeighborhood();
+	hood.removeClass('faded');
+	node.addClass('sel');
+	renderDetails(node);
+}
+
+function clearSelection() {
+	state.cy.elements().removeClass('faded sel');
+	el('details-body').textContent = 'click a node';
+}
+
+function renderDetails(node) {
+	const id = node.id();
+	const color = NODE_COLORS[node.data('kind')] ?? '#9ca3af';
+	const outgoing = state.edges.filter((edge) => edge.from === id);
+	const incoming = state.edges.filter((edge) => edge.to === id);
+	const nodeById = new Map(state.nodes.map((entry) => [entry.id, entry]));
+
+	const renderEdgeRows = (edges, direction) => edges.map((edge) => {
+		const otherId = direction === 'out' ? edge.to : edge.from;
+		const other = nodeById.get(otherId);
+		const name = other === undefined ? otherId : other.name;
+		const arrow = direction === 'out' ? '→' : '←';
+		return `<div class="edge-row"><span class="edge-kind">${escapeHtml(edge.kind)}</span> ${arrow} <a data-target="${escapeHtml(otherId)}">${escapeHtml(name)}</a></div>`;
+	}).join('');
+
+	el('details-body').innerHTML = `
+		<div><span class="kind-tag" style="background:${color}">${escapeHtml(node.data('kind'))}</span> <strong>${escapeHtml(node.data('name'))}</strong></div>
+		<div>${escapeHtml(node.data('filePath'))}${node.data('startLine') > 0 ? ':' + node.data('startLine') : ''}</div>
+		<div class="id">${escapeHtml(id)}</div>
+		<h3>outgoing (${outgoing.length})</h3>${renderEdgeRows(outgoing, 'out')}
+		<h3>incoming (${incoming.length})</h3>${renderEdgeRows(incoming, 'in')}
+	`;
+	el('details-body').querySelectorAll('a[data-target]').forEach((link) => {
+		link.addEventListener('click', () => {
+			const target = state.cy.getElementById(link.dataset.target);
+			if (target.length === 1) {
+				select(target);
+				state.cy.animate({ center: { eles: target } }, { duration: 300 });
+			}
+		});
+	});
+}
+
+function escapeHtml(value) {
+	return String(value).replace(/[&<>"']/g, (char) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[char]));
+}
+
+boot();

package/dist/agent/agent_tools.d.ts

@@ -0,0 +1,13 @@
+import OpenAI from 'openai';
+import { GraphQuery } from '../query/graph_query.js';
+export declare const PROPOSE_TOOL_NAME = "propose_optimization";
+export declare const AGENT_TOOLS: OpenAI.Chat.Completions.ChatCompletionTool[];
+export declare class AgentTools {
+    private readonly query;
+    private readonly rootPath;
+    constructor(query: GraphQuery, rootPath: string);
+    dispatch(name: string, input: Record<string, unknown>): Promise<string>;
+    private readFile;
+    private static stringify;
+}
+//# sourceMappingURL=agent_tools.d.ts.map

package/dist/agent/agent_tools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent_tools.d.ts","sourceRoot":"","sources":["../../src/agent/agent_tools.ts"],"names":[],"mappings":"AAEA,OAAO,MAAM,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,eAAO,MAAM,iBAAiB,yBAAyB,CAAC;AAExD,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,kBAAkB,EAyGnE,CAAC;AAEF,qBAAa,UAAU;IACtB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAa;IACnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;gBAEtB,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM;IAKzC,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;YAqB/D,QAAQ;IAetB,OAAO,CAAC,MAAM,CAAC,SAAS;CAGxB"}