npm - @datasynx/agentic-ai-cartography - Versions diffs - 0.6.0 → 0.7.0 - Mend

@datasynx/agentic-ai-cartography 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.js CHANGED Viewed

@@ -2015,525 +2015,6 @@ function exportJSON(db, sessionId) {
     sops
   }, null, 2);
 }
-function exportHTML(nodes, edges) {
-  const graphData = JSON.stringify({
-    nodes: nodes.map((n) => ({
-      id: n.id,
-      name: n.name,
-      type: n.type,
-      layer: nodeLayer(n.type),
-      confidence: n.confidence,
-      discoveredVia: n.discoveredVia,
-      discoveredAt: n.discoveredAt,
-      tags: n.tags,
-      metadata: n.metadata
-    })),
-    links: edges.map((e) => ({
-      source: e.sourceId,
-      target: e.targetId,
-      relationship: e.relationship,
-      confidence: e.confidence,
-      evidence: e.evidence
-    }))
-  });
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Cartography \u2014 Infrastructure Map</title>
-  <script src="https://d3js.org/d3.v7.min.js"></script>
-  <style>
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body { background: #0a0e14; color: #e6edf3; font-family: 'SF Mono','Fira Code','Cascadia Code',monospace; display: flex; overflow: hidden; height: 100vh; }
-    /* \u2500\u2500 Left node panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-    #node-panel {
-      width: 220px; min-width: 220px; height: 100vh; overflow: hidden;
-      background: #0d1117; border-right: 1px solid #1b2028;
-      display: flex; flex-direction: column;
-    }
-    #node-panel-header {
-      padding: 10px 12px 8px; border-bottom: 1px solid #1b2028;
-      font-size: 11px; color: #6e7681; text-transform: uppercase; letter-spacing: 0.6px;
-    }
-    #node-search {
-      width: calc(100% - 16px); margin: 8px; padding: 5px 8px;
-      background: #161b22; border: 1px solid #30363d; border-radius: 5px;
-      color: #e6edf3; font-size: 11px; font-family: inherit; outline: none;
-    }
-    #node-search:focus { border-color: #58a6ff; }
-    #node-list { flex: 1; overflow-y: auto; padding-bottom: 8px; }
-    .node-list-item {
-      padding: 5px 12px; cursor: pointer; font-size: 11px;
-      display: flex; align-items: center; gap: 6px; border-left: 2px solid transparent;
-    }
-    .node-list-item:hover { background: #161b22; }
-    .node-list-item.active { background: #1a2436; border-left-color: #58a6ff; }
-    .node-list-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
-    .node-list-name { color: #c9d1d9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
-    .node-list-type { color: #484f58; font-size: 9px; flex-shrink: 0; }
-    /* \u2500\u2500 Center graph \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-    #graph { flex: 1; height: 100vh; position: relative; }
-    svg { width: 100%; height: 100%; }
-    .hull { opacity: 0.12; stroke-width: 1.5; stroke-opacity: 0.25; }
-    .hull-label { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; fill-opacity: 0.5; pointer-events: none; }
-    .link { stroke-opacity: 0.4; }
-    .link-label { font-size: 8px; fill: #6e7681; pointer-events: none; opacity: 0; }
-    .node-hex { stroke-width: 1.8; cursor: pointer; transition: opacity 0.15s; }
-    .node-hex:hover { filter: brightness(1.3); stroke-width: 3; }
-    .node-hex.selected { stroke-width: 3.5; filter: brightness(1.5); }
-    .node-label { font-size: 10px; fill: #c9d1d9; pointer-events: none; opacity: 0; }
-    /* \u2500\u2500 Right sidebar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-    #sidebar {
-      width: 300px; min-width: 300px; height: 100vh; overflow-y: auto;
-      background: #0d1117; border-left: 1px solid #1b2028;
-      padding: 16px; font-size: 12px; line-height: 1.6;
-    }
-    #sidebar h2 { margin: 0 0 8px; font-size: 14px; color: #58a6ff; }
-    #sidebar .meta-table { width: 100%; border-collapse: collapse; }
-    #sidebar .meta-table td { padding: 3px 6px; border-bottom: 1px solid #161b22; vertical-align: top; }
-    #sidebar .meta-table td:first-child { color: #6e7681; white-space: nowrap; width: 90px; }
-    #sidebar .tag { display: inline-block; background: #161b22; border-radius: 3px; padding: 1px 5px; margin: 1px; font-size: 10px; }
-    #sidebar .conf-bar { height: 5px; border-radius: 3px; background: #161b22; margin-top: 3px; }
-    #sidebar .conf-fill { height: 100%; border-radius: 3px; }
-    #sidebar .edges-list { margin-top: 12px; }
-    #sidebar .edge-item { padding: 4px 0; border-bottom: 1px solid #161b22; color: #6e7681; font-size: 11px; }
-    #sidebar .edge-item span { color: #c9d1d9; }
-    #sidebar .action-row { display: flex; gap: 6px; margin-top: 14px; }
-    .btn-delete {
-      flex: 1; padding: 6px 10px; background: transparent; border: 1px solid #6e191d;
-      color: #f85149; border-radius: 5px; font-size: 11px; font-family: inherit;
-      cursor: pointer; text-align: center;
-    }
-    .btn-delete:hover { background: #3d0c0c; }
-    .hint { color: #3d434b; font-size: 11px; margin-top: 8px; }
-    /* \u2500\u2500 HUD \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-    #hud { position: absolute; top: 10px; left: 10px; background: rgba(10,14,20,0.88);
-           padding: 10px 14px; border-radius: 8px; font-size: 12px; border: 1px solid #1b2028; pointer-events: none; }
-    #hud strong { color: #58a6ff; }
-    #hud .stats { color: #6e7681; }
-    #hud .zoom-level { color: #3d434b; font-size: 10px; margin-top: 2px; }
-    /* \u2500\u2500 Toolbar (filters + JGF export) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-    #toolbar { position: absolute; top: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: auto; align-items: center; }
-    .filter-btn {
-      background: rgba(10,14,20,0.85); border: 1px solid #1b2028; border-radius: 6px;
-      color: #c9d1d9; padding: 4px 10px; font-size: 11px; cursor: pointer;
-      font-family: inherit; display: flex; align-items: center; gap: 5px;
-    }
-    .filter-btn:hover { border-color: #30363d; }
-    .filter-btn.off { opacity: 0.35; }
-    .filter-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
-    .export-btn {
-      background: rgba(10,14,20,0.85); border: 1px solid #1b2028; border-radius: 6px;
-      color: #58a6ff; padding: 4px 12px; font-size: 11px; cursor: pointer;
-      font-family: inherit;
-    }
-    .export-btn:hover { border-color: #58a6ff; background: rgba(88,166,255,0.08); }
-  </style>
-</head>
-<body>
-<!-- Left: node list panel -->
-<div id="node-panel">
-  <div id="node-panel-header">Nodes (${nodes.length})</div>
-  <input id="node-search" type="text" placeholder="Search nodes\u2026" autocomplete="off" spellcheck="false">
-  <div id="node-list"></div>
-</div>
-<!-- Center: graph -->
-<div id="graph">
-  <div id="hud">
-    <strong>Cartography</strong> &nbsp;
-    <span class="stats" id="hud-stats">${nodes.length} nodes \xB7 ${edges.length} edges</span><br>
-    <span class="zoom-level">Scroll = zoom \xB7 Drag = pan \xB7 Click = details</span>
-  </div>
-  <div id="toolbar"></div>
-  <svg></svg>
-</div>
-<!-- Right: detail sidebar -->
-<div id="sidebar">
-  <h2>Infrastructure Map</h2>
-  <p class="hint">Click a node to view details.</p>
-</div>
-<script>
-const data = ${graphData};
-// \u2500\u2500 Color palette per node type \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-const TYPE_COLORS = {
-  host: '#4a9eff', database_server: '#ff6b6b', database: '#ff8c42',
-  web_service: '#6bcb77', api_endpoint: '#4d96ff', cache_server: '#ffd93d',
-  message_broker: '#c77dff', queue: '#e0aaff', topic: '#9d4edd',
-  container: '#48cae4', pod: '#00b4d8', k8s_cluster: '#0077b6',
-  config_file: '#adb5bd', saas_tool: '#c084fc', table: '#f97316', unknown: '#6c757d',
-};
-const LAYER_COLORS = {
-  saas: '#c084fc', web: '#6bcb77', data: '#ff6b6b',
-  messaging: '#c77dff', infra: '#4a9eff', config: '#adb5bd', other: '#6c757d',
-};
-const LAYER_NAMES = {
-  saas: 'SaaS Tools', web: 'Web / API', data: 'Data Layer',
-  messaging: 'Messaging', infra: 'Infrastructure', config: 'Config', other: 'Other',
-};
-// \u2500\u2500 Hexagon path \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-const HEX_SIZE = { saas_tool: 16, host: 18, database_server: 18, k8s_cluster: 20, default: 14 };
-function hexSize(d) { return HEX_SIZE[d.type] || HEX_SIZE.default; }
-function hexPath(size) {
-  const pts = [];
-  for (let i = 0; i < 6; i++) {
-    const angle = (Math.PI / 3) * i - Math.PI / 6;
-    pts.push([size * Math.cos(angle), size * Math.sin(angle)]);
-  }
-  return 'M' + pts.map(p => p.join(',')).join('L') + 'Z';
-}
-// \u2500\u2500 Left panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-const nodeListEl = document.getElementById('node-list');
-const nodeSearchEl = document.getElementById('node-search');
-let selectedNodeId = null;
-function buildNodeList(filter) {
-  const q = (filter || '').toLowerCase();
-  nodeListEl.innerHTML = '';
-  const sorted = [...data.nodes].sort((a, b) => a.name.localeCompare(b.name));
-  for (const d of sorted) {
-    if (q && !d.name.toLowerCase().includes(q) && !d.type.includes(q) && !d.id.toLowerCase().includes(q)) continue;
-    const item = document.createElement('div');
-    item.className = 'node-list-item' + (d.id === selectedNodeId ? ' active' : '');
-    item.dataset.id = d.id;
-    const color = TYPE_COLORS[d.type] || '#aaa';
-    item.innerHTML = \`<span class="node-list-dot" style="background:\${color}"></span>
-      <span class="node-list-name" title="\${d.id}">\${d.name}</span>
-      <span class="node-list-type">\${d.type.replace(/_/g,' ')}</span>\`;
-    item.onclick = () => { selectNode(d); focusNode(d); };
-    nodeListEl.appendChild(item);
-  }
-}
-nodeSearchEl.addEventListener('input', e => buildNodeList(e.target.value));
-// \u2500\u2500 Sidebar detail view \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-const sidebar = document.getElementById('sidebar');
-function selectNode(d) {
-  selectedNodeId = d.id;
-  buildNodeList(nodeSearchEl.value);
-  showNode(d);
-  // highlight hex
-  d3.selectAll('.node-hex').classed('selected', nd => nd.id === d.id);
-}
-function showNode(d) {
-  const c = TYPE_COLORS[d.type] || '#aaa';
-  const confPct = Math.round(d.confidence * 100);
-  const tags = (d.tags || []).map(t => \`<span class="tag">\${t}</span>\`).join('');
-  const metaRows = Object.entries(d.metadata || {})
-    .filter(([,v]) => v !== null && v !== undefined && String(v).length > 0)
-    .map(([k,v]) => \`<tr><td>\${k}</td><td>\${JSON.stringify(v)}</td></tr>\`)
-    .join('');
-  const related = data.links.filter(l =>
-    (l.source.id||l.source) === d.id || (l.target.id||l.target) === d.id
-  );
-  const edgeItems = related.map(l => {
-    const isOut = (l.source.id||l.source) === d.id;
-    const other = isOut ? (l.target.id||l.target) : (l.source.id||l.source);
-    return \`<div class="edge-item">\${isOut ? '\u2192' : '\u2190'} <span>\${other}</span> <small>[\${l.relationship}]</small></div>\`;
-  }).join('');
-  sidebar.innerHTML = \`
-    <h2>\${d.name}</h2>
-    <table class="meta-table">
-      <tr><td>ID</td><td style="font-size:10px;word-break:break-all">\${d.id}</td></tr>
-      <tr><td>Type</td><td><span style="color:\${c}">\${d.type}</span></td></tr>
-      <tr><td>Layer</td><td>\${d.layer}</td></tr>
-      <tr><td>Confidence</td><td>
-        \${confPct}%
-        <div class="conf-bar"><div class="conf-fill" style="width:\${confPct}%;background:\${c}"></div></div>
-      </td></tr>
-      <tr><td>Discovered via</td><td>\${d.discoveredVia || '\u2014'}</td></tr>
-      <tr><td>Timestamp</td><td>\${d.discoveredAt ? d.discoveredAt.substring(0,19).replace('T',' ') : '\u2014'}</td></tr>
-      \${tags ? '<tr><td>Tags</td><td>'+tags+'</td></tr>' : ''}
-      \${metaRows}
-    </table>
-    \${related.length > 0 ? '<div class="edges-list"><strong>Connections (' + related.length + '):</strong>'+edgeItems+'</div>' : ''}
-    <div class="action-row">
-      <button class="btn-delete" onclick="deleteNode('\${d.id}')">\u{1F5D1} Delete node</button>
-    </div>
-  \`;
-}
-// \u2500\u2500 Delete node \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-function deleteNode(id) {
-  const idx = data.nodes.findIndex(n => n.id === id);
-  if (idx === -1) return;
-  data.nodes.splice(idx, 1);
-  data.links = data.links.filter(l =>
-    (l.source.id || l.source) !== id && (l.target.id || l.target) !== id
-  );
-  selectedNodeId = null;
-  sidebar.innerHTML = '<h2>Infrastructure Map</h2><p class="hint">Node deleted.</p>';
-  document.getElementById('hud-stats').textContent =
-    data.nodes.length + ' nodes \xB7 ' + data.links.length + ' edges';
-  rebuildGraph();
-  buildNodeList(nodeSearchEl.value);
-}
-// \u2500\u2500 SVG setup \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-const svgEl = d3.select('svg');
-const graphDiv = document.getElementById('graph');
-const W = () => graphDiv.clientWidth;
-const H = () => graphDiv.clientHeight;
-const g = svgEl.append('g');
-svgEl.append('defs').append('marker')
-  .attr('id', 'arrow').attr('viewBox', '0 0 10 6')
-  .attr('refX', 10).attr('refY', 3)
-  .attr('markerWidth', 8).attr('markerHeight', 6)
-  .attr('orient', 'auto')
-  .append('path').attr('d', 'M0,0 L10,3 L0,6 Z').attr('fill', '#555');
-let currentZoom = 1;
-const zoomBehavior = d3.zoom().scaleExtent([0.08, 6]).on('zoom', e => {
-  g.attr('transform', e.transform);
-  currentZoom = e.transform.k;
-  updateLOD(currentZoom);
-});
-svgEl.call(zoomBehavior);
-// \u2500\u2500 Layer filter state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-const layers = [...new Set(data.nodes.map(d => d.layer))];
-const layerVisible = {};
-layers.forEach(l => layerVisible[l] = true);
-const toolbarEl = document.getElementById('toolbar');
-// Filter buttons
-layers.forEach(layer => {
-  const btn = document.createElement('button');
-  btn.className = 'filter-btn';
-  btn.innerHTML = \`<span class="filter-dot" style="background:\${LAYER_COLORS[layer]||'#666'}"></span>\${LAYER_NAMES[layer]||layer}\`;
-  btn.onclick = () => {
-    layerVisible[layer] = !layerVisible[layer];
-    btn.classList.toggle('off', !layerVisible[layer]);
-    updateVisibility();
-  };
-  toolbarEl.appendChild(btn);
-});
-// JGF export button
-const jgfBtn = document.createElement('button');
-jgfBtn.className = 'export-btn';
-jgfBtn.textContent = '\u2193 JGF';
-jgfBtn.title = 'Export JSON Graph Format';
-jgfBtn.onclick = exportJGF;
-toolbarEl.appendChild(jgfBtn);
-// \u2500\u2500 JGF export \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-function exportJGF() {
-  const jgf = {
-    graph: {
-      directed: true,
-      type: 'cartography',
-      label: 'Infrastructure Map',
-      metadata: { exportedAt: new Date().toISOString() },
-      nodes: Object.fromEntries(data.nodes.map(n => [n.id, {
-        label: n.name,
-        metadata: { type: n.type, layer: n.layer, confidence: n.confidence,
-          discoveredVia: n.discoveredVia, discoveredAt: n.discoveredAt,
-          tags: n.tags, ...n.metadata }
-      }])),
-      edges: data.links.map(l => ({
-        source: l.source.id || l.source,
-        target: l.target.id || l.target,
-        relation: l.relationship,
-        metadata: { confidence: l.confidence, evidence: l.evidence }
-      })),
-    }
-  };
-  const blob = new Blob([JSON.stringify(jgf, null, 2)], { type: 'application/json' });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  a.href = url; a.download = 'cartography-graph.jgf.json'; a.click();
-  URL.revokeObjectURL(url);
-}
-// \u2500\u2500 Cluster force \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-function clusterForce(alpha) {
-  const centroids = {};
-  const counts = {};
-  data.nodes.forEach(d => {
-    if (!centroids[d.layer]) { centroids[d.layer] = { x: 0, y: 0 }; counts[d.layer] = 0; }
-    centroids[d.layer].x += d.x || 0;
-    centroids[d.layer].y += d.y || 0;
-    counts[d.layer]++;
-  });
-  for (const l in centroids) { centroids[l].x /= counts[l]; centroids[l].y /= counts[l]; }
-  const strength = alpha * 0.15;
-  data.nodes.forEach(d => {
-    const c = centroids[d.layer];
-    if (c) { d.vx += (c.x - d.x) * strength; d.vy += (c.y - d.y) * strength; }
-  });
-}
-// \u2500\u2500 Hull group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-const hullGroup = g.append('g').attr('class', 'hulls');
-const hullPaths = {};
-const hullLabels = {};
-layers.forEach(layer => {
-  hullPaths[layer] = hullGroup.append('path').attr('class', 'hull')
-    .attr('fill', LAYER_COLORS[layer] || '#666').attr('stroke', LAYER_COLORS[layer] || '#666');
-  hullLabels[layer] = hullGroup.append('text').attr('class', 'hull-label')
-    .attr('fill', LAYER_COLORS[layer] || '#666').text(LAYER_NAMES[layer] || layer);
-});
-function updateHulls() {
-  layers.forEach(layer => {
-    if (!layerVisible[layer]) { hullPaths[layer].attr('d', null); hullLabels[layer].attr('x', -9999); return; }
-    const pts = data.nodes.filter(d => d.layer === layer && layerVisible[d.layer]).map(d => [d.x, d.y]);
-    if (pts.length < 3) {
-      hullPaths[layer].attr('d', null);
-      if (pts.length > 0) hullLabels[layer].attr('x', pts[0][0]).attr('y', pts[0][1] - 30);
-      else hullLabels[layer].attr('x', -9999);
-      return;
-    }
-    const hull = d3.polygonHull(pts);
-    if (!hull) { hullPaths[layer].attr('d', null); return; }
-    const cx = d3.mean(hull, p => p[0]);
-    const cy = d3.mean(hull, p => p[1]);
-    const padded = hull.map(p => {
-      const dx = p[0] - cx, dy = p[1] - cy;
-      const len = Math.sqrt(dx*dx + dy*dy) || 1;
-      return [p[0] + dx/len * 40, p[1] + dy/len * 40];
-    });
-    hullPaths[layer].attr('d', 'M' + padded.join('L') + 'Z');
-    hullLabels[layer].attr('x', cx).attr('y', cy - d3.max(hull, p => Math.abs(p[1] - cy)) - 30);
-  });
-}
-// \u2500\u2500 Graph rendering (rebuildable after delete) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-let linkSel, linkLabelSel, nodeSel, nodeLabelSel, sim;
-const linkGroup = g.append('g');
-const nodeGroup = g.append('g');
-function focusNode(d) {
-  if (!d.x || !d.y) return;
-  const w = W(), h = H();
-  svgEl.transition().duration(500).call(
-    zoomBehavior.transform,
-    d3.zoomIdentity.translate(w / 2, h / 2).scale(Math.min(3, currentZoom < 1 ? 1.5 : currentZoom)).translate(-d.x, -d.y)
-  );
-}
-function rebuildGraph() {
-  if (sim) sim.stop();
-  // Links
-  linkSel = linkGroup.selectAll('line').data(data.links, d => \`\${d.source.id||d.source}>\${d.target.id||d.target}\`);
-  linkSel.exit().remove();
-  const linkEnter = linkSel.enter().append('line').attr('class', 'link');
-  linkSel = linkEnter.merge(linkSel)
-    .attr('stroke', d => d.confidence < 0.6 ? '#2a2e35' : '#3d434b')
-    .attr('stroke-dasharray', d => d.confidence < 0.6 ? '4 3' : null)
-    .attr('stroke-width', d => d.confidence < 0.6 ? 0.8 : 1.2)
-    .attr('marker-end', 'url(#arrow)');
-  linkSel.select('title').remove();
-  linkSel.append('title').text(d => \`\${d.relationship} (\${Math.round(d.confidence*100)}%)
-\${d.evidence||''}\`);
-  // Link labels
-  linkLabelSel = linkGroup.selectAll('text').data(data.links, d => \`\${d.source.id||d.source}>\${d.target.id||d.target}\`);
-  linkLabelSel.exit().remove();
-  linkLabelSel = linkLabelSel.enter().append('text').attr('class', 'link-label').merge(linkLabelSel)
-    .text(d => d.relationship);
-  // Nodes
-  nodeSel = nodeGroup.selectAll('g').data(data.nodes, d => d.id);
-  nodeSel.exit().remove();
-  const nodeEnter = nodeSel.enter().append('g')
-    .call(d3.drag()
-      .on('start', (e, d) => { if (!e.active) sim.alphaTarget(0.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; })
-    )
-    .on('click', (e, d) => { e.stopPropagation(); selectNode(d); });
-  nodeEnter.append('path').attr('class', 'node-hex');
-  nodeEnter.append('title');
-  nodeEnter.append('text').attr('class', 'node-label').attr('text-anchor', 'middle');
-  nodeSel = nodeEnter.merge(nodeSel);
-  nodeSel.select('.node-hex')
-    .attr('d', d => hexPath(hexSize(d)))
-    .attr('fill', d => TYPE_COLORS[d.type] || '#aaa')
-    .attr('stroke', d => { const c = d3.color(TYPE_COLORS[d.type] || '#aaa'); return c ? c.brighter(0.8).formatHex() : '#ccc'; })
-    .attr('fill-opacity', d => 0.6 + d.confidence * 0.4)
-    .classed('selected', d => d.id === selectedNodeId);
-  nodeSel.select('title').text(d => \`\${d.name} (\${d.type})
-conf: \${Math.round(d.confidence*100)}%\`);
-  nodeLabelSel = nodeSel.select('.node-label')
-    .attr('dy', d => hexSize(d) + 13)
-    .text(d => d.name.length > 20 ? d.name.substring(0, 18) + '\u2026' : d.name);
-  // Simulation
-  sim = d3.forceSimulation(data.nodes)
-    .force('link', d3.forceLink(data.links).id(d => d.id).distance(d => d.relationship === 'contains' ? 50 : 100).strength(0.4))
-    .force('charge', d3.forceManyBody().strength(-280))
-    .force('center', d3.forceCenter(W() / 2, H() / 2))
-    .force('collision', d3.forceCollide().radius(d => hexSize(d) + 10))
-    .force('cluster', clusterForce)
-    .on('tick', () => {
-      updateHulls();
-      linkSel.attr('x1', d => d.source.x).attr('y1', d => d.source.y)
-             .attr('x2', d => d.target.x).attr('y2', d => d.target.y);
-      linkLabelSel.attr('x', d => (d.source.x + d.target.x) / 2)
-                  .attr('y', d => (d.source.y + d.target.y) / 2 - 4);
-      nodeSel.attr('transform', d => \`translate(\${d.x},\${d.y})\`);
-    });
-}
-// \u2500\u2500 LOD & visibility \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-function updateLOD(k) {
-  if (nodeLabelSel) nodeLabelSel.style('opacity', k > 0.5 ? Math.min(1, (k - 0.5) * 2) : 0);
-  if (linkLabelSel) linkLabelSel.style('opacity', k > 1.2 ? Math.min(1, (k - 1.2) * 3) : 0);
-  d3.selectAll('.hull-label').style('font-size', k < 0.4 ? '18px' : '13px');
-}
-function updateVisibility() {
-  if (!nodeSel) return;
-  nodeSel.style('display', d => layerVisible[d.layer] ? null : 'none');
-  linkSel.style('display', d => {
-    const s = data.nodes.find(n => n.id === (d.source.id||d.source));
-    const t = data.nodes.find(n => n.id === (d.target.id||d.target));
-    return (s && layerVisible[s.layer]) && (t && layerVisible[t.layer]) ? null : 'none';
-  });
-  linkLabelSel.style('display', d => {
-    const s = data.nodes.find(n => n.id === (d.source.id||d.source));
-    const t = data.nodes.find(n => n.id === (d.target.id||d.target));
-    return (s && layerVisible[s.layer]) && (t && layerVisible[t.layer]) ? null : 'none';
-  });
-}
-// \u2500\u2500 Init \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-rebuildGraph();
-buildNodeList();
-updateLOD(1);
-svgEl.on('click', () => {
-  selectedNodeId = null;
-  d3.selectAll('.node-hex').classed('selected', false);
-  buildNodeList(nodeSearchEl.value);
-  sidebar.innerHTML = '<h2>Infrastructure Map</h2><p class="hint">Click a node to view details.</p>';
-});
-</script>
-</body>
-</html>`;
-}
 function exportSOPMarkdown(sop) {
   const lines = [
     `# ${sop.title}`,
@@ -2746,646 +2227,6 @@ function toggle(i) {
 </body>
 </html>`;
 }
-function exportCartographyMap(nodes, edges, options) {
-  const mapData = buildMapData(nodes, edges, options);
-  const { assets, clusters, connections, meta } = mapData;
-  const isEmpty = assets.length === 0;
-  const HEX_SIZE2 = 24;
-  const dataJson = JSON.stringify({
-    assets: assets.map((a) => ({
-      id: a.id,
-      name: a.name,
-      domain: a.domain,
-      subDomain: a.subDomain ?? null,
-      qualityScore: a.qualityScore ?? null,
-      metadata: a.metadata,
-      q: a.position.q,
-      r: a.position.r
-    })),
-    clusters: clusters.map((c) => ({
-      id: c.id,
-      label: c.label,
-      domain: c.domain,
-      color: c.color,
-      assetIds: c.assetIds,
-      centroid: c.centroid
-    })),
-    connections: connections.map((c) => ({
-      id: c.id,
-      sourceAssetId: c.sourceAssetId,
-      targetAssetId: c.targetAssetId,
-      type: c.type ?? "connection"
-    }))
-  });
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8"/>
-<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-<title>Data Cartography Map</title>
-<style>
-*{box-sizing:border-box;margin:0;padding:0}
-html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
-body{display:flex;flex-direction:column;background:${meta.theme === "dark" ? "#0f172a" : "#f8fafc"};color:${meta.theme === "dark" ? "#e2e8f0" : "#1e293b"}}
-#topbar{
-  height:48px;display:flex;align-items:center;gap:16px;padding:0 20px;
-  background:${meta.theme === "dark" ? "#1e293b" : "#fff"};border-bottom:1px solid ${meta.theme === "dark" ? "#334155" : "#e2e8f0"};z-index:10;flex-shrink:0;
-}
-#topbar h1{font-size:15px;font-weight:600;letter-spacing:-0.01em}
-#search-box{
-  display:flex;align-items:center;gap:8px;background:${meta.theme === "dark" ? "#334155" : "#f1f5f9"};
-  border-radius:8px;padding:5px 10px;margin-left:auto;
-}
-#search-box input{
-  border:none;background:transparent;font-size:13px;outline:none;width:180px;color:inherit;
-}
-#search-box input::placeholder{color:#94a3b8}
-#main{flex:1;display:flex;overflow:hidden;position:relative}
-#canvas-wrap{flex:1;position:relative;overflow:hidden;cursor:grab}
-#canvas-wrap.dragging{cursor:grabbing}
-#canvas-wrap.connecting{cursor:crosshair}
-canvas{display:block;width:100%;height:100%}
-/* Detail panel */
-#detail-panel{
-  width:280px;background:${meta.theme === "dark" ? "#1e293b" : "#fff"};border-left:1px solid ${meta.theme === "dark" ? "#334155" : "#e2e8f0"};
-  display:flex;flex-direction:column;transform:translateX(100%);
-  transition:transform .2s ease;z-index:5;flex-shrink:0;overflow-y:auto;
-}
-#detail-panel.open{transform:translateX(0)}
-#detail-panel .panel-header{
-  padding:16px;border-bottom:1px solid ${meta.theme === "dark" ? "#334155" : "#e2e8f0"};display:flex;align-items:center;gap:10px;
-}
-#detail-panel .panel-header h3{font-size:14px;font-weight:600;flex:1;word-break:break-word}
-#detail-panel .close-btn{
-  width:24px;height:24px;border:none;background:transparent;cursor:pointer;
-  color:#94a3b8;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:16px;
-}
-#detail-panel .close-btn:hover{background:${meta.theme === "dark" ? "#334155" : "#f1f5f9"}}
-#detail-panel .panel-body{padding:12px 16px;display:flex;flex-direction:column;gap:12px}
-#detail-panel .meta-row{display:flex;flex-direction:column;gap:3px}
-#detail-panel .meta-label{font-size:11px;font-weight:500;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}
-#detail-panel .meta-value{font-size:13px;word-break:break-all}
-#detail-panel .quality-bar{height:6px;border-radius:3px;background:${meta.theme === "dark" ? "#334155" : "#e2e8f0"};margin-top:4px}
-#detail-panel .quality-fill{height:6px;border-radius:3px;transition:width .3s}
-/* Bottom-left toolbar */
-#toolbar-left{
-  position:absolute;bottom:20px;left:20px;display:flex;gap:8px;z-index:10;
-}
-.tb-btn{
-  width:40px;height:40px;border-radius:10px;border:1px solid ${meta.theme === "dark" ? "#334155" : "#e2e8f0"};
-  background:${meta.theme === "dark" ? "#1e293b" : "#fff"};box-shadow:0 1px 4px rgba(0,0,0,.08);cursor:pointer;
-  display:flex;align-items:center;justify-content:center;font-size:18px;
-  transition:all .15s;color:inherit;
-}
-.tb-btn:hover{border-color:#94a3b8}
-.tb-btn.active{background:${meta.theme === "dark" ? "#1e3a5f" : "#eff6ff"};border-color:#3b82f6}
-/* Bottom-right toolbar */
-#toolbar-right{
-  position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;
-  align-items:flex-end;gap:8px;z-index:10;
-}
-#zoom-controls{display:flex;align-items:center;gap:6px}
-.zoom-btn{
-  width:34px;height:34px;border-radius:8px;border:1px solid ${meta.theme === "dark" ? "#334155" : "#e2e8f0"};
-  background:${meta.theme === "dark" ? "#1e293b" : "#fff"};cursor:pointer;
-  font-size:18px;color:inherit;display:flex;align-items:center;justify-content:center;
-}
-.zoom-btn:hover{background:${meta.theme === "dark" ? "#334155" : "#f1f5f9"}}
-#zoom-pct{font-size:12px;font-weight:500;color:#64748b;min-width:38px;text-align:center}
-#detail-selector{display:flex;flex-direction:column;gap:4px}
-.detail-btn{
-  width:34px;height:34px;border-radius:8px;border:1px solid ${meta.theme === "dark" ? "#334155" : "#e2e8f0"};
-  background:${meta.theme === "dark" ? "#1e293b" : "#fff"};cursor:pointer;
-  font-size:12px;font-weight:600;color:#64748b;display:flex;align-items:center;justify-content:center;
-}
-.detail-btn:hover{background:${meta.theme === "dark" ? "#334155" : "#f1f5f9"}}
-.detail-btn.active{background:${meta.theme === "dark" ? "#1e3a5f" : "#eff6ff"};border-color:#3b82f6;color:#2563eb}
-#connect-btn{
-  width:40px;height:40px;border-radius:10px;border:1px solid ${meta.theme === "dark" ? "#334155" : "#e2e8f0"};
-  background:${meta.theme === "dark" ? "#1e293b" : "#fff"};cursor:pointer;
-  font-size:18px;display:flex;align-items:center;justify-content:center;color:inherit;
-}
-#connect-btn.active{background:#fef3c7;border-color:#f59e0b}
-/* Tooltip */
-#tooltip{
-  position:fixed;background:#1e293b;color:#fff;border-radius:8px;
-  padding:8px 12px;font-size:12px;pointer-events:none;z-index:100;
-  display:none;max-width:220px;box-shadow:0 4px 12px rgba(0,0,0,.15);
-}
-#tooltip .tt-name{font-weight:600;margin-bottom:2px}
-#tooltip .tt-domain{color:#94a3b8;font-size:11px}
-#tooltip .tt-quality{font-size:11px;margin-top:2px}
-/* Empty state */
-#empty-state{
-  position:absolute;inset:0;display:flex;flex-direction:column;
-  align-items:center;justify-content:center;gap:12px;color:#94a3b8;
-}
-#empty-state p{font-size:14px}
-/* Theme toggle */
-#theme-btn{
-  width:40px;height:40px;border-radius:10px;border:1px solid ${meta.theme === "dark" ? "#334155" : "#e2e8f0"};
-  background:${meta.theme === "dark" ? "#1e293b" : "#fff"};cursor:pointer;
-  font-size:18px;display:flex;align-items:center;justify-content:center;color:inherit;
-}
-/* Dark mode overrides (toggled via JS) */
-body.dark{background:#0f172a;color:#e2e8f0}
-body.dark #topbar{background:#1e293b;border-color:#334155}
-body.dark #search-box{background:#334155}
-body.dark #detail-panel{background:#1e293b;border-color:#334155}
-body.dark .tb-btn,body.dark .zoom-btn,body.dark .detail-btn,body.dark #connect-btn,body.dark #theme-btn{
-  background:#1e293b;border-color:#334155;color:#e2e8f0;
-}
-/* Light mode overrides */
-body.light{background:#f8fafc;color:#1e293b}
-body.light #topbar{background:#fff;border-color:#e2e8f0}
-/* Connection hint */
-#connect-hint{
-  position:absolute;top:12px;left:50%;transform:translateX(-50%);
-  background:#fef3c7;border:1px solid #f59e0b;color:#92400e;
-  padding:6px 14px;border-radius:20px;font-size:12px;font-weight:500;
-  display:none;z-index:20;pointer-events:none;
-}
-/* Screen reader only */
-.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
-</style>
-</head>
-<body class="${meta.theme}">
-<!-- Top bar -->
-<div id="topbar">
-  <h1>Data Cartography Map</h1>
-  <div id="search-box">
-    <span style="color:#94a3b8;font-size:14px">&#8981;</span>
-    <input id="search-input" type="text" placeholder="Search assets..." aria-label="Search data assets"/>
-  </div>
-  <button id="theme-btn" title="Toggle dark/light mode" aria-label="Toggle theme">${meta.theme === "dark" ? "&#9788;" : "&#9790;"}</button>
-</div>
-<!-- SR summary -->
-<div class="sr-only" role="status" aria-live="polite" id="sr-summary">
-  Data cartography map with ${assets.length} assets in ${clusters.length} clusters.
-</div>
-<!-- Main area -->
-<div id="main">
-  <div id="canvas-wrap" role="application" aria-label="Data cartography hex map" tabindex="0">
-    <canvas id="hexmap" aria-hidden="true"></canvas>
-    ${isEmpty ? '<div id="empty-state"><p style="font-size:48px">&#128506;</p><p>No data assets available</p><p style="font-size:12px">Run <code>datasynx-cartography discover</code> to populate the map</p></div>' : ""}
-  </div>
-  <div id="detail-panel" role="complementary" aria-label="Asset details">
-    <div class="panel-header">
-      <h3 id="dp-name">&mdash;</h3>
-      <button class="close-btn" id="dp-close" aria-label="Close panel">&#10005;</button>
-    </div>
-    <div class="panel-body" id="dp-body"></div>
-  </div>
-</div>
-<!-- Bottom-left toolbar -->
-<div id="toolbar-left">
-  <button class="tb-btn active" id="btn-labels" title="Show labels" aria-pressed="true" aria-label="Toggle labels">&#127991;</button>
-  <button class="tb-btn" id="btn-quality" title="Quality layer" aria-pressed="false" aria-label="Toggle quality layer">&#128065;</button>
-</div>
-<!-- Bottom-right toolbar -->
-<div id="toolbar-right">
-  <div id="zoom-controls">
-    <button class="zoom-btn" id="zoom-out" aria-label="Zoom out">&minus;</button>
-    <span id="zoom-pct">100%</span>
-    <button class="zoom-btn" id="zoom-in" aria-label="Zoom in">+</button>
-  </div>
-  <div id="detail-selector">
-    <button class="detail-btn" id="dl-1" aria-label="Detail level 1">1</button>
-    <button class="detail-btn active" id="dl-2" aria-label="Detail level 2">2</button>
-    <button class="detail-btn" id="dl-3" aria-label="Detail level 3">3</button>
-    <button class="detail-btn" id="dl-4" aria-label="Detail level 4">4</button>
-  </div>
-  <button id="connect-btn" title="Connection tool" aria-label="Toggle connection tool">&#128279;</button>
-</div>
-<!-- Connection hint -->
-<div id="connect-hint">Click two assets to create a connection</div>
-<!-- Tooltip -->
-<div id="tooltip" role="tooltip">
-  <div class="tt-name" id="tt-name"></div>
-  <div class="tt-domain" id="tt-domain"></div>
-  <div class="tt-quality" id="tt-quality"></div>
-</div>
-<script>
-(function() {
-'use strict';
-// \u2500\u2500 Data \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-const MAP = ${dataJson};
-const HEX_SIZE = ${HEX_SIZE2};
-const IS_EMPTY = ${isEmpty};
-// Build asset index
-const assetIndex = new Map();
-const clusterByAsset = new Map();
-for (const c of MAP.clusters) {
-  for (const aid of c.assetIds) {
-    clusterByAsset.set(aid, c);
-  }
-}
-for (const a of MAP.assets) {
-  assetIndex.set(a.id, a);
-}
-// \u2500\u2500 Canvas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-const canvas = document.getElementById('hexmap');
-const ctx = canvas.getContext('2d');
-const wrap = document.getElementById('canvas-wrap');
-let W = 0, H = 0;
-function resize() {
-  const dpr = window.devicePixelRatio || 1;
-  W = wrap.clientWidth; H = wrap.clientHeight;
-  canvas.width = W * dpr; canvas.height = H * dpr;
-  canvas.style.width = W + 'px'; canvas.style.height = H + 'px';
-  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-  draw();
-}
-window.addEventListener('resize', resize);
-// \u2500\u2500 Viewport \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-let vx = 0, vy = 0, scale = 1;
-let detailLevel = 2, showLabels = true, showQuality = false;
-let isDark = document.body.classList.contains('dark');
-let connectMode = false, connectFirst = null;
-let hoveredAssetId = null, selectedAssetId = null;
-let searchQuery = '';
-let localConnections = [...MAP.connections];
-// Flat-top hex math
-function htp_x(q, r) { return HEX_SIZE * (3/2 * q); }
-function htp_y(q, r) { return HEX_SIZE * (Math.sqrt(3)/2 * q + Math.sqrt(3) * r); }
-function w2s(wx, wy) { return { x: wx*scale+vx, y: wy*scale+vy }; }
-function s2w(sx, sy) { return { x: (sx-vx)/scale, y: (sy-vy)/scale }; }
-function fitToView() {
-  if (IS_EMPTY || MAP.assets.length === 0) { vx = 0; vy = 0; scale = 1; return; }
-  let mnx=Infinity,mny=Infinity,mxx=-Infinity,mxy=-Infinity;
-  for (const a of MAP.assets) {
-    const px=htp_x(a.q,a.r), py=htp_y(a.q,a.r);
-    if(px<mnx)mnx=px;if(py<mny)mny=py;if(px>mxx)mxx=px;if(py>mxy)mxy=py;
-  }
-  const pw=mxx-mnx+HEX_SIZE*4, ph=mxy-mny+HEX_SIZE*4;
-  scale = Math.min(W/pw, H/ph, 2) * 0.85;
-  vx = W/2 - ((mnx+mxx)/2)*scale;
-  vy = H/2 - ((mny+mxy)/2)*scale;
-}
-// \u2500\u2500 Drawing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-function hexPath(cx, cy, r) {
-  ctx.beginPath();
-  for (let i=0;i<6;i++) {
-    const angle = Math.PI/180*(60*i);
-    const x=cx+r*Math.cos(angle), y=cy+r*Math.sin(angle);
-    i===0?ctx.moveTo(x,y):ctx.lineTo(x,y);
-  }
-  ctx.closePath();
-}
-function shadeV(hex, amt) {
-  if(!hex||hex.length<7)return hex;
-  const n=parseInt(hex.replace('#',''),16);
-  const r=Math.min(255,(n>>16)+amt), g=Math.min(255,((n>>8)&0xff)+amt), b=Math.min(255,(n&0xff)+amt);
-  return '#'+r.toString(16).padStart(2,'0')+g.toString(16).padStart(2,'0')+b.toString(16).padStart(2,'0');
-}
-function draw() {
-  ctx.clearRect(0,0,W,H);
-  ctx.fillStyle = isDark ? '#0f172a' : '#f8fafc';
-  ctx.fillRect(0,0,W,H);
-  if (IS_EMPTY) return;
-  const size = HEX_SIZE * scale;
-  const matchedIds = getSearchMatches();
-  const hasSearch = searchQuery.length > 0;
-  // Draw connections
-  ctx.save();
-  ctx.strokeStyle = isDark ? 'rgba(148,163,184,0.35)' : 'rgba(100,116,139,0.25)';
-  ctx.lineWidth = 1.5;
-  ctx.setLineDash([4,4]);
-  for (const conn of localConnections) {
-    const src = assetIndex.get(conn.sourceAssetId);
-    const tgt = assetIndex.get(conn.targetAssetId);
-    if (!src||!tgt) continue;
-    const sp=w2s(htp_x(src.q,src.r),htp_y(src.q,src.r));
-    const tp=w2s(htp_x(tgt.q,tgt.r),htp_y(tgt.q,tgt.r));
-    ctx.beginPath();ctx.moveTo(sp.x,sp.y);ctx.lineTo(tp.x,tp.y);ctx.stroke();
-  }
-  ctx.setLineDash([]);
-  ctx.restore();
-  // Draw hexagons per cluster
-  for (const cluster of MAP.clusters) {
-    const baseColor = cluster.color;
-    const clusterAssets = cluster.assetIds.map(id=>assetIndex.get(id)).filter(Boolean);
-    const isClusterMatch = !hasSearch || clusterAssets.some(a => matchedIds.has(a.id));
-    const clusterDim = hasSearch && !isClusterMatch;
-    for (let ai=0; ai<clusterAssets.length; ai++) {
-      const asset = clusterAssets[ai];
-      const wx=htp_x(asset.q,asset.r), wy=htp_y(asset.q,asset.r);
-      const s=w2s(wx,wy);
-      const cx=s.x, cy=s.y;
-      // Frustum cull
-      if(cx+size<0||cx-size>W||cy+size<0||cy-size>H) continue;
-      // Shade variation
-      const shade = ai%3===0?18:ai%3===1?8:0;
-      let fillColor = shadeV(baseColor, shade);
-      // Quality overlay
-      if (showQuality && asset.qualityScore !== null && asset.qualityScore !== undefined) {
-        const q = asset.qualityScore;
-        if (q < 40) fillColor = '#ef4444';
-        else if (q < 70) fillColor = '#f97316';
-      }
-      const alpha = clusterDim ? 0.18 : 1;
-      const isHovered = asset.id === hoveredAssetId;
-      const isSelected = asset.id === selectedAssetId;
-      const isConnectFirst = asset.id === connectFirst;
-      ctx.save();
-      ctx.globalAlpha = alpha;
-      hexPath(cx, cy, size*0.92);
-      if (isDark && (isHovered||isSelected||isConnectFirst)) {
-        ctx.shadowColor = fillColor;
-        ctx.shadowBlur = isSelected ? 16 : 8;
-      }
-      ctx.fillStyle = fillColor;
-      ctx.fill();
-      if (isSelected||isConnectFirst) {
-        ctx.strokeStyle = isConnectFirst ? '#f59e0b' : '#fff';
-        ctx.lineWidth = 2.5;
-        ctx.stroke();
-      } else if (isHovered) {
-        ctx.strokeStyle = isDark ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.2)';
-        ctx.lineWidth = 1.5;
-        ctx.stroke();
-      } else {
-        ctx.strokeStyle = isDark ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.4)';
-        ctx.lineWidth = 1;
-        ctx.stroke();
-      }
-      ctx.restore();
-      // Quality dot
-      if (showQuality && asset.qualityScore!==null && asset.qualityScore!==undefined && size>8) {
-        const q = asset.qualityScore;
-        if (q < 70) {
-          ctx.beginPath();
-          ctx.arc(cx+size*0.4, cy-size*0.4, Math.max(3,size*0.14), 0, Math.PI*2);
-          ctx.fillStyle = q<40?'#ef4444':'#f97316';
-          ctx.fill();
-        }
-      }
-      // Asset labels (detail 4, or 3 at high zoom)
-      const showAssetLabel = showLabels && !clusterDim &&
-        ((detailLevel>=4)||(detailLevel===3 && scale>=0.8));
-      if (showAssetLabel && size>14) {
-        const label = asset.name.length>12 ? asset.name.substring(0,11)+'...' : asset.name;
-        ctx.save();
-        ctx.font = Math.max(8,Math.min(11,size*0.38))+'px -apple-system,sans-serif';
-        ctx.fillStyle = isDark ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.9)';
-        ctx.textAlign='center';ctx.textBaseline='middle';
-        ctx.fillText(label, cx, cy);
-        ctx.restore();
-      }
-    }
-  }
-  // Cluster labels (pill badges)
-  if (showLabels && detailLevel>=1) {
-    for (const cluster of MAP.clusters) {
-      if (cluster.assetIds.length===0) continue;
-      if (hasSearch && !cluster.assetIds.some(id=>matchedIds.has(id))) continue;
-      const s=w2s(cluster.centroid.x, cluster.centroid.y);
-      drawPill(s.x, s.y-size*1.2, cluster.label, cluster.color, 14);
-    }
-  }
-  // Sub-domain labels (detail 2+)
-  if (showLabels && detailLevel>=2) {
-    const subGroups = new Map();
-    for (const a of MAP.assets) {
-      if (!a.subDomain) continue;
-      const key = a.domain+'|'+a.subDomain;
-      if (!subGroups.has(key)) subGroups.set(key, []);
-      subGroups.get(key).push(a);
-    }
-    for (const [, group] of subGroups) {
-      let sx=0,sy=0;
-      for (const a of group) { sx+=htp_x(a.q,a.r); sy+=htp_y(a.q,a.r); }
-      const cx=sx/group.length, cy=sy/group.length;
-      const s = w2s(cx, cy);
-      drawPill(s.x, s.y+size*1.5, group[0].subDomain, '#64748b', 11);
-    }
-  }
-}
-function drawPill(x, y, text, color, fontSize) {
-  if(!text) return;
-  ctx.save();
-  ctx.font = '600 '+fontSize+'px -apple-system,sans-serif';
-  const tw=ctx.measureText(text).width;
-  const ph=fontSize+8, pw=tw+20;
-  ctx.beginPath();
-  if (ctx.roundRect) ctx.roundRect(x-pw/2, y-ph/2, pw, ph, ph/2);
-  else { ctx.rect(x-pw/2, y-ph/2, pw, ph); }
-  ctx.fillStyle = isDark ? 'rgba(30,41,59,0.9)' : 'rgba(255,255,255,0.92)';
-  ctx.shadowColor='rgba(0,0,0,0.15)'; ctx.shadowBlur=6;
-  ctx.fill(); ctx.shadowBlur=0;
-  ctx.fillStyle = isDark ? '#e2e8f0' : '#0f172a';
-  ctx.textAlign='center'; ctx.textBaseline='middle';
-  ctx.fillText(text, x, y);
-  ctx.restore();
-}
-// \u2500\u2500 Hit testing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-function getAssetAt(sx, sy) {
-  const w=s2w(sx,sy);
-  for (const a of MAP.assets) {
-    const wx=htp_x(a.q,a.r), wy=htp_y(a.q,a.r);
-    const dx=Math.abs(w.x-wx), dy=Math.abs(w.y-wy);
-    if (dx>HEX_SIZE||dy>HEX_SIZE) continue;
-    if (dx*dx+dy*dy < HEX_SIZE*HEX_SIZE) return a;
-  }
-  return null;
-}
-// \u2500\u2500 Search \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-function getSearchMatches() {
-  if(!searchQuery) return new Set();
-  const q=searchQuery.toLowerCase();
-  const m=new Set();
-  for(const a of MAP.assets){
-    if(a.name.toLowerCase().includes(q)||(a.domain&&a.domain.toLowerCase().includes(q))||
-       (a.subDomain&&a.subDomain.toLowerCase().includes(q))) m.add(a.id);
-  }
-  return m;
-}
-// \u2500\u2500 Pan & Zoom \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-let dragging=false, lastMX=0, lastMY=0;
-wrap.addEventListener('mousedown', e=>{
-  if(e.button!==0)return;
-  dragging=true; lastMX=e.clientX; lastMY=e.clientY;
-  wrap.classList.add('dragging');
-});
-window.addEventListener('mouseup', ()=>{dragging=false;wrap.classList.remove('dragging');});
-window.addEventListener('mousemove', e=>{
-  if(dragging){
-    vx+=e.clientX-lastMX; vy+=e.clientY-lastMY;
-    lastMX=e.clientX; lastMY=e.clientY; draw(); return;
-  }
-  const rect=wrap.getBoundingClientRect();
-  const sx=e.clientX-rect.left, sy=e.clientY-rect.top;
-  const asset=getAssetAt(sx,sy);
-  const newId=asset?asset.id:null;
-  if(newId!==hoveredAssetId){hoveredAssetId=newId;draw();}
-  const tt=document.getElementById('tooltip');
-  if(asset){
-    document.getElementById('tt-name').textContent=asset.name;
-    document.getElementById('tt-domain').textContent=asset.domain+(asset.subDomain?' > '+asset.subDomain:'');
-    document.getElementById('tt-quality').textContent=asset.qualityScore!==null?'Quality: '+asset.qualityScore+'/100':'';
-    tt.style.display='block';tt.style.left=(e.clientX+12)+'px';tt.style.top=(e.clientY-8)+'px';
-  } else { tt.style.display='none'; }
-});
-wrap.addEventListener('click', e=>{
-  const rect=wrap.getBoundingClientRect();
-  const sx=e.clientX-rect.left, sy=e.clientY-rect.top;
-  const asset=getAssetAt(sx,sy);
-  if(connectMode){
-    if(!asset) return;
-    if(!connectFirst){connectFirst=asset.id;draw();}
-    else if(connectFirst!==asset.id){
-      localConnections.push({id:crypto.randomUUID(),sourceAssetId:connectFirst,targetAssetId:asset.id,type:'connection'});
-      connectFirst=null;draw();
-    }
-    return;
-  }
-  if(asset){selectedAssetId=asset.id;showDetailPanel(asset);}
-  else{selectedAssetId=null;document.getElementById('detail-panel').classList.remove('open');}
-  draw();
-});
-// Touch
-let lastTouches=[];
-wrap.addEventListener('touchstart',e=>{lastTouches=[...e.touches];},{passive:true});
-wrap.addEventListener('touchmove',e=>{
-  if(e.touches.length===1){
-    vx+=e.touches[0].clientX-lastTouches[0].clientX;
-    vy+=e.touches[0].clientY-lastTouches[0].clientY;draw();
-  } else if(e.touches.length===2){
-    const d0=Math.hypot(lastTouches[0].clientX-lastTouches[1].clientX,lastTouches[0].clientY-lastTouches[1].clientY);
-    const d1=Math.hypot(e.touches[0].clientX-e.touches[1].clientX,e.touches[0].clientY-e.touches[1].clientY);
-    const mx=(e.touches[0].clientX+e.touches[1].clientX)/2;
-    const my=(e.touches[0].clientY+e.touches[1].clientY)/2;
-    applyZoom(d1/d0,mx,my);
-  }
-  lastTouches=[...e.touches];
-},{passive:true});
-wrap.addEventListener('wheel',e=>{
-  e.preventDefault();
-  const rect=wrap.getBoundingClientRect();
-  applyZoom(e.deltaY<0?1.12:1/1.12,e.clientX-rect.left,e.clientY-rect.top);
-},{passive:false});
-function applyZoom(factor,sx,sy){
-  const ns=Math.max(0.05,Math.min(8,scale*factor));
-  const wx=(sx-vx)/scale,wy=(sy-vy)/scale;
-  scale=ns;vx=sx-wx*scale;vy=sy-wy*scale;
-  document.getElementById('zoom-pct').textContent=Math.round(scale*100)+'%';draw();
-}
-document.getElementById('zoom-in').addEventListener('click',()=>applyZoom(1.25,W/2,H/2));
-document.getElementById('zoom-out').addEventListener('click',()=>applyZoom(1/1.25,W/2,H/2));
-// Keyboard
-wrap.addEventListener('keydown',e=>{
-  const step=40;
-  if(e.key==='ArrowLeft'){vx+=step;draw();}
-  else if(e.key==='ArrowRight'){vx-=step;draw();}
-  else if(e.key==='ArrowUp'){vy+=step;draw();}
-  else if(e.key==='ArrowDown'){vy-=step;draw();}
-  else if(e.key==='+'||e.key==='=')applyZoom(1.2,W/2,H/2);
-  else if(e.key==='-')applyZoom(1/1.2,W/2,H/2);
-  else if(e.key==='Escape'){
-    selectedAssetId=null;document.getElementById('detail-panel').classList.remove('open');
-    if(connectMode)toggleConnect();draw();
-  }
-});
-// \u2500\u2500 Detail Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-function showDetailPanel(asset) {
-  document.getElementById('dp-name').textContent=asset.name;
-  const body=document.getElementById('dp-body');
-  const rows=[['Domain',asset.domain],['Sub-domain',asset.subDomain],
-    ['Quality Score',asset.qualityScore!==null?renderQuality(asset.qualityScore):null],
-    ...Object.entries(asset.metadata||{}).slice(0,8).map(([k,v])=>[k,String(v)])
-  ].filter(([,v])=>v!==null&&v!==undefined&&v!=='');
-  body.innerHTML=rows.map(([l,v])=>'<div class="meta-row"><div class="meta-label">'+esc(String(l))+'</div><div class="meta-value">'+v+'</div></div>').join('');
-  const related=localConnections.filter(c=>c.sourceAssetId===asset.id||c.targetAssetId===asset.id);
-  if(related.length>0){
-    body.innerHTML+='<div class="meta-row"><div class="meta-label">Connections ('+related.length+')</div><div>'+
-      related.map(c=>{const oid=c.sourceAssetId===asset.id?c.targetAssetId:c.sourceAssetId;
-        const o=assetIndex.get(oid);return '<div class="meta-value" style="margin-top:4px;font-size:12px">'+(o?esc(o.name):oid)+'</div>';}).join('')+'</div></div>';
-  }
-  document.getElementById('detail-panel').classList.add('open');
-}
-function renderQuality(s){
-  const c=s>=70?'#22c55e':s>=40?'#f97316':'#ef4444';
-  return s+'/100 <div class="quality-bar"><div class="quality-fill" style="width:'+s+'%;background:'+c+'"></div></div>';
-}
-function esc(s){return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
-document.getElementById('dp-close').addEventListener('click',()=>{
-  document.getElementById('detail-panel').classList.remove('open');selectedAssetId=null;draw();
-});
-// \u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-[1,2,3,4].forEach(n=>{
-  document.getElementById('dl-'+n).addEventListener('click',()=>{
-    detailLevel=n;document.querySelectorAll('.detail-btn').forEach(b=>b.classList.remove('active'));
-    document.getElementById('dl-'+n).classList.add('active');draw();
-  });
-});
-document.getElementById('btn-labels').addEventListener('click',()=>{
-  showLabels=!showLabels;document.getElementById('btn-labels').classList.toggle('active',showLabels);draw();
-});
-document.getElementById('btn-quality').addEventListener('click',()=>{
-  showQuality=!showQuality;document.getElementById('btn-quality').classList.toggle('active',showQuality);draw();
-});
-function toggleConnect(){
-  connectMode=!connectMode;connectFirst=null;
-  document.getElementById('connect-btn').classList.toggle('active',connectMode);
-  wrap.classList.toggle('connecting',connectMode);
-  document.getElementById('connect-hint').style.display=connectMode?'block':'none';draw();
-}
-document.getElementById('connect-btn').addEventListener('click',toggleConnect);
-document.getElementById('theme-btn').addEventListener('click',()=>{
-  isDark=!isDark;
-  document.body.classList.toggle('dark',isDark);document.body.classList.toggle('light',!isDark);
-  document.getElementById('theme-btn').innerHTML=isDark?'&#9788;':'&#9790;';draw();
-});
-document.getElementById('search-input').addEventListener('input',e=>{searchQuery=e.target.value.trim();draw();});
-// \u2500\u2500 Init \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-resize(); fitToView();
-document.getElementById('zoom-pct').textContent=Math.round(scale*100)+'%';
-draw();
-})();
-</script>
-</body>
-</html>`;
-}
 function exportDiscoveryApp(nodes, edges, options) {
   const theme = options?.theme ?? "dark";
   const graphData = JSON.stringify({
@@ -3546,8 +2387,9 @@ body{display:flex;flex-direction:column;background:var(--bg-base);color:var(--te
   width:40px;height:40px;border-radius:10px;border:1px solid var(--border);
   background:var(--bg-surface);box-shadow:0 1px 4px rgba(0,0,0,.08);cursor:pointer;
   display:flex;align-items:center;justify-content:center;font-size:18px;
-  transition:all .15s;color:var(--text);
+  transition:all .15s;color:var(--text);font-family:-apple-system,sans-serif;
 }
+#btn-all-labels{font-size:14px;font-weight:700;letter-spacing:-.02em}
 .tb-tool:hover{border-color:var(--text-muted)}
 .tb-tool.active{background:var(--accent-dim);border-color:var(--accent)}
 .map-zoom{display:flex;align-items:center;gap:6px}
@@ -3719,6 +2561,7 @@ body{display:flex;flex-direction:column;background:var(--bg-base);color:var(--te
   </div>
   <div id="map-tb-left">
     <button class="tb-tool active" id="btn-labels" title="Toggle labels">&#127991;</button>
+    <button class="tb-tool" id="btn-all-labels" title="Show all hex labels">Aa</button>
     <button class="tb-tool" id="btn-quality" title="Quality layer">&#128065;</button>
     <button class="tb-tool" id="btn-connect" title="Connection tool">&#128279;</button>
   </div>
@@ -3815,7 +2658,7 @@ var mapCtx = mapCanvas.getContext('2d');
 var mapWrap = document.getElementById('map-wrap');
 var mW = 0, mH = 0;
 var mvx = 0, mvy = 0, mScale = 1;
-var mDetailLevel = 2, mShowLabels = true, mShowQuality = false;
+var mDetailLevel = 2, mShowLabels = true, mShowQuality = false, mShowAllLabels = false;
 var mConnectMode = false, mConnectFirst = null;
 var mHoveredId = null, mSelectedId = null;
 var mSearchQuery = '';
@@ -3960,8 +2803,8 @@ function drawMap() {
         mapCtx.fillStyle = asset.qualityScore < 40 ? '#ef4444' : '#f97316'; mapCtx.fill();
       }
-      var showAssetLabel = mShowLabels && !clusterDim && ((mDetailLevel >= 4) || (mDetailLevel === 3 && mScale >= 0.8));
-      if (showAssetLabel && size > 14) {
+      var showAssetLabel = mShowLabels && !clusterDim && (mShowAllLabels || (mDetailLevel >= 4) || (mDetailLevel === 3 && mScale >= 0.8));
+      if (showAssetLabel && size > 6) {
         var label = asset.name.length > 12 ? asset.name.substring(0, 11) + '...' : asset.name;
         mapCtx.save();
         mapCtx.font = Math.max(8, Math.min(11, size * 0.38)) + 'px -apple-system,sans-serif';
@@ -4113,6 +2956,11 @@ document.getElementById('md-close').addEventListener('click', function() {
 document.getElementById('btn-labels').addEventListener('click', function() {
   mShowLabels = !mShowLabels; this.classList.toggle('active', mShowLabels); drawMap();
 });
+document.getElementById('btn-all-labels').addEventListener('click', function() {
+  mShowAllLabels = !mShowAllLabels; this.classList.toggle('active', mShowAllLabels);
+  if (mShowAllLabels && !mShowLabels) { mShowLabels = true; document.getElementById('btn-labels').classList.add('active'); }
+  drawMap();
+});
 document.getElementById('btn-quality').addEventListener('click', function() {
   mShowQuality = !mShowQuality; this.classList.toggle('active', mShowQuality); drawMap();
 });
@@ -4467,12 +3315,44 @@ buildTopoList();
 </body>
 </html>`;
 }
+function exportJGF(nodes, edges) {
+  const jgf = {
+    graph: {
+      directed: true,
+      type: "cartography",
+      label: "Infrastructure Map",
+      metadata: { exportedAt: (/* @__PURE__ */ new Date()).toISOString() },
+      nodes: Object.fromEntries(nodes.map((n) => [n.id, {
+        label: n.name,
+        metadata: {
+          type: n.type,
+          layer: nodeLayer(n.type),
+          confidence: n.confidence,
+          discoveredVia: n.discoveredVia,
+          discoveredAt: n.discoveredAt,
+          tags: n.tags,
+          metadata: n.metadata
+        }
+      }])),
+      edges: edges.map((e) => ({
+        source: e.sourceId,
+        target: e.targetId,
+        relation: e.relationship,
+        metadata: { confidence: e.confidence, evidence: e.evidence }
+      }))
+    }
+  };
+  return JSON.stringify(jgf, null, 2);
+}
 function exportAll(db, sessionId, outputDir, formats = ["mermaid", "json", "yaml", "html", "map", "discovery", "sops"]) {
   mkdirSync2(outputDir, { recursive: true });
   mkdirSync2(join2(outputDir, "sops"), { recursive: true });
   mkdirSync2(join2(outputDir, "workflows"), { recursive: true });
   const nodes = db.getNodes(sessionId);
   const edges = db.getEdges(sessionId);
+  const jgfPath = join2(outputDir, "cartography-graph.jgf.json");
+  writeFileSync(jgfPath, exportJGF(nodes, edges));
+  process.stderr.write("\u2713 cartography-graph.jgf.json\n");
   if (formats.includes("mermaid")) {
     writeFileSync(join2(outputDir, "topology.mermaid"), generateTopologyMermaid(nodes, edges));
     writeFileSync(join2(outputDir, "dependencies.mermaid"), generateDependencyMermaid(nodes, edges));
@@ -4486,15 +3366,7 @@ function exportAll(db, sessionId, outputDir, formats = ["mermaid", "json", "yaml
     writeFileSync(join2(outputDir, "catalog-info.yaml"), exportBackstageYAML(nodes, edges));
     process.stderr.write("\u2713 catalog-info.yaml\n");
   }
-  if (formats.includes("html")) {
-    writeFileSync(join2(outputDir, "topology.html"), exportHTML(nodes, edges));
-    process.stderr.write("\u2713 topology.html\n");
-  }
-  if (formats.includes("map")) {
-    writeFileSync(join2(outputDir, "cartography-map.html"), exportCartographyMap(nodes, edges));
-    process.stderr.write("\u2713 cartography-map.html\n");
-  }
-  if (formats.includes("discovery")) {
+  if (formats.includes("html") || formats.includes("map") || formats.includes("discovery")) {
     writeFileSync(join2(outputDir, "discovery.html"), exportDiscoveryApp(nodes, edges));
     process.stderr.write("\u2713 discovery.html\n");
   }
@@ -4562,9 +3434,8 @@ export {
   edgesToConnections,
   exportAll,
   exportBackstageYAML,
-  exportCartographyMap,
   exportDiscoveryApp,
-  exportHTML,
+  exportJGF,
   exportJSON,
   exportSOPDashboard,
   exportSOPMarkdown,