@hongmaple0820/scale-engine 0.49.0 → 0.50.1

package/dist/dashboard/spa/pages/topology-renderers.js

@@ -0,0 +1,251 @@
+/**
+ * Safe DOM renderers for the topology page.
+ */
+;(() => {
+  'use strict'
+
+  const { t, dom } = window.Dashboard
+  const { el, emptyState } = dom
+
+  const LAYER_COLORS = {
+    api: '#00dc82',
+    service: '#5588ff',
+    data: '#ffaa00',
+    ui: '#ff6688',
+    utility: '#aa88ff',
+    config: '#888888',
+    test: '#44cccc',
+    unknown: '#555555',
+  }
+
+  function renderLayout(app) {
+    app.replaceChildren(
+      el('div', { className: 'topology-controls', id: 'topo-controls' }, [
+        layoutButton('cose', t('topology.force'), true),
+        layoutButton('breadthfirst', t('topology.tree')),
+        layoutButton('circle', t('topology.circle')),
+        layoutButton('concentric', t('topology.concentric')),
+        layoutButton('dagre', t('topology.dag')),
+        separator(),
+        el('button', { className: 'topo-btn', id: 'topo-fit', text: t('topology.fitView'), title: t('topology.fitView') }),
+        el('button', { className: 'topo-btn', id: 'topo-export-png', text: `PNG ${t('topology.exportPNG')}`, title: t('topology.exportPNG') }),
+        el('button', { className: 'topo-btn', id: 'topo-export-json', text: `JSON ${t('topology.exportJSON')}`, title: t('topology.exportJSON') }),
+        separator(),
+        el('input', { id: 'topo-filter', type: 'text', className: 'search-box', placeholder: t('topology.searchNodes'), style: { width: '180px' } }),
+        el('span', { id: 'topo-stats', className: 'text-muted text-sm', style: { alignSelf: 'center' } }),
+      ]),
+      el('div', { style: { display: 'flex', gap: '16px', height: 'calc(100vh - 140px)' } }, [
+        el('div', { style: { flex: '1', minWidth: '0', position: 'relative' } }, [
+          el('div', { id: 'topology-cy', style: { width: '100%', height: '100%' } }),
+          el('div', { id: 'topo-minimap', style: minimapStyle() }),
+        ]),
+        el('div', { id: 'topo-sidebar', style: sidebarStyle() }, [
+          panel('topo-detail', [el('div', { className: 'panel-title', text: t('topology.nodes') }), el('div', { className: 'text-muted text-sm', text: t('common.search') })]),
+          panel('topo-legend', [el('div', { className: 'panel-title' }, [document.createTextNode(t('topology.layers')), el('span', { className: 'count', id: 'topo-layer-count' })]), el('div', { id: 'topo-layer-legend' })]),
+          panel('topo-domains-panel', [el('div', { className: 'panel-title', text: t('topology.domains') }), el('div', { id: 'topo-domains' })]),
+          panel('topo-kind-filter', [el('div', { className: 'panel-title', text: t('topology.kinds') }), el('div', { id: 'topo-kind-legend' })]),
+        ]),
+      ])
+    )
+  }
+
+  function renderNoData(container) {
+    if (container) container.replaceChildren(emptyState(t('topology.noData')))
+  }
+
+  function renderLayerLegend({ container, countNode, topologyData, activeLayerFilters, onToggle }) {
+    if (!container || !topologyData) return
+    const layers = countBy(topologyData.nodes, node => node.layer ?? 'unknown')
+    const total = topologyData.nodes.length
+    if (countNode) countNode.textContent = t('topology.layerNodeStats', { layers: Object.keys(layers).length, nodes: total })
+    container.replaceChildren(...Object.entries(layers)
+      .sort((left, right) => right[1] - left[1])
+      .map(([layer, count]) => legendItem({
+        className: 'topo-legend-item',
+        dataset: { layer },
+        active: !activeLayerFilters.has(layer),
+        swatch: swatch(LAYER_COLORS[layer] || '#555', false),
+        label: layer,
+        meta: `${count} (${((count / total) * 100).toFixed(1)}%)`,
+        onClick: () => onToggle(layer),
+      })))
+  }
+
+  function renderKindFilter({ container, topologyData, activeKindFilters, onToggle }) {
+    if (!container || !topologyData) return
+    const kinds = countBy(topologyData.nodes, node => node.kind ?? 'unknown')
+    container.replaceChildren(...Object.entries(kinds)
+      .sort((left, right) => right[1] - left[1])
+      .map(([kind, count]) => legendItem({
+        className: 'topo-kind-item',
+        dataset: { kind },
+        active: !activeKindFilters.has(kind),
+        label: kind,
+        meta: String(count),
+        onClick: () => onToggle(kind),
+      })))
+  }
+
+  function renderDomainPanel({ container, domainData, onSelect }) {
+    if (!container) return
+    if (!domainData?.domains?.length) {
+      container.replaceChildren(el('div', { className: 'text-muted text-sm', text: t('topology.noDomains') }))
+      return
+    }
+    const children = domainData.domains.slice(0, 12).map(domain => legendItem({
+      className: 'topo-domain-item',
+      dataset: { domain: domain.name },
+      swatch: swatch(hashColor(domain.name), true),
+      label: domain.name,
+      meta: String(domain.nodes?.length ?? 0),
+      onClick: () => onSelect(domain),
+    }))
+    if (domainData.flows?.length) children.push(flowList(domainData.flows.slice(0, 5)))
+    container.replaceChildren(...children)
+  }
+
+  function renderDomainDetail(panelNode, domain) {
+    if (!panelNode || !domain) return
+    const color = hashColor(domain.name)
+    const rows = (domain.nodes ?? []).slice(0, 20).map(node => {
+      const row = el('div', { style: { fontSize: '12px', padding: '3px 0', color: 'var(--text-1)' } })
+      row.append(document.createTextNode(node.name ?? ''))
+      row.append(el('span', { text: ` (${node.kind ?? '-'})`, style: { color: 'var(--text-2)' } }))
+      return row
+    })
+    if ((domain.nodes?.length ?? 0) > 20) {
+      rows.push(el('div', { text: t('topology.moreNodes', { count: domain.nodes.length - 20 }), style: { fontSize: '12px', color: 'var(--text-2)' } }))
+    }
+    panelNode.replaceChildren(
+      el('div', { className: 'panel-title', text: domain.name, style: { color } }),
+      el('div', { text: `${domain.nodes?.length ?? 0} nodes`, style: { fontSize: '13px', color: 'var(--text-1)', marginBottom: '8px' } }),
+      el('div', { style: { maxHeight: '200px', overflowY: 'auto' } }, rows)
+    )
+  }
+
+  function renderMinimapCanvas(container) {
+    const canvas = el('canvas', { attrs: { width: 160, height: 120 } })
+    container.replaceChildren(canvas)
+    return canvas
+  }
+
+  function renderNodeEmpty(panelNode) {
+    if (!panelNode) return
+    panelNode.replaceChildren(
+      el('div', { className: 'panel-title', text: t('topology.nodeDetails') }),
+      el('div', { className: 'text-muted text-sm', text: t('topology.clickNodeHint') })
+    )
+  }
+
+  function renderNodeDetail(panelNode, data, metrics) {
+    if (!panelNode) return
+    const layerColor = LAYER_COLORS[data.layer] || '#888'
+    const children = [
+      el('div', { className: 'panel-title', text: data.kind ?? '-', style: { color: layerColor } }),
+      el('div', { text: data.label ?? '', style: { fontSize: '15px', fontWeight: '600', marginBottom: '12px' } }),
+      nodeMeta(data, metrics, layerColor),
+    ]
+    if (metrics.callers.length > 0) children.push(nameList(t('topology.calledBy', { count: metrics.callers.length }), metrics.callers))
+    if (metrics.callees.length > 0) children.push(nameList(t('topology.calls', { count: metrics.callees.length }), metrics.callees))
+    panelNode.replaceChildren(...children)
+  }
+
+  function nodeMeta(data, metrics, layerColor) {
+    const rows = [
+      labelValue(t('topology.layer'), el('span', { text: data.layer ?? '-', style: { color: layerColor } })),
+      labelValue(t('topology.file'), el('span', { text: data.filePath ?? '-', style: { wordBreak: 'break-all' } })),
+    ]
+    if (data.line) rows.push(labelValue(t('topology.line'), document.createTextNode(String(data.line))))
+    if (data.signature) rows.push(labelValue(t('topology.signature'), el('code', { text: data.signature, style: { fontSize: '12px', wordBreak: 'break-all' } })))
+    if (data.domain) rows.push(labelValue(t('topology.domain'), document.createTextNode(String(data.domain))))
+    rows.push(labelValue(`${t('topology.degree')}:`, document.createTextNode(`in=${metrics.inDegree} out=${metrics.outDegree}`)))
+    return el('div', { style: { fontSize: '13px', color: 'var(--text-1)' } }, rows)
+  }
+
+  function labelValue(label, valueNode) {
+    const row = el('div', { style: { marginBottom: '6px' } })
+    row.append(el('strong', { text: label }), document.createTextNode(' '), valueNode)
+    return row
+  }
+
+  function nameList(title, names) {
+    return el('div', { style: { marginTop: '10px', fontSize: '12px' } }, [
+      el('div', { text: title, style: { color: 'var(--text-2)', marginBottom: '4px' } }),
+      ...names.map(name => el('div', { text: name, style: { color: 'var(--text-1)', padding: '1px 0' } })),
+    ])
+  }
+
+  function legendItem({ className, dataset = {}, active = true, swatch: swatchNode, label, meta, onClick }) {
+    const node = el('div', { className, dataset, style: legendItemStyle(active) }, [
+      swatchNode,
+      el('span', { text: label, style: { color: 'var(--text-1)', flex: '1', overflow: 'hidden', textOverflow: 'ellipsis' } }),
+      el('span', { text: meta, style: { color: 'var(--text-2)', fontSize: '11px', flexShrink: '0' } }),
+    ].filter(Boolean))
+    node.addEventListener('click', onClick)
+    return node
+  }
+
+  function flowList(flows) {
+    return el('div', { style: { marginTop: '12px', paddingTop: '8px', borderTop: '1px solid var(--border)' } }, [
+      el('div', { text: t('topology.detectedFlows'), style: { fontSize: '11px', color: 'var(--text-2)', marginBottom: '6px' } }),
+      ...flows.map(flow => el('div', { text: `${flow.from} -> ${flow.to}`, style: { fontSize: '12px', color: 'var(--text-1)', padding: '3px 0' } })),
+    ])
+  }
+
+  function layoutButton(layout, label, active = false) {
+    return el('button', { className: `topo-btn${active ? ' active' : ''}`, text: label, dataset: { layout } })
+  }
+
+  function panel(id, children) {
+    return el('div', { className: 'panel', id }, children)
+  }
+
+  function separator() {
+    return el('span', { style: { marginLeft: '12px', borderLeft: '1px solid var(--border)', paddingLeft: '12px' } })
+  }
+
+  function swatch(color, round) {
+    return el('div', { style: { width: round ? '10px' : '12px', height: round ? '10px' : '12px', borderRadius: round ? '50%' : '3px', background: color, flexShrink: '0' } })
+  }
+
+  function legendItemStyle(active) {
+    return { display: 'flex', alignItems: 'center', gap: '8px', padding: '5px 6px', borderRadius: '4px', cursor: 'pointer', fontSize: '13px', opacity: active ? '1' : '0.35' }
+  }
+
+  function sidebarStyle() {
+    return { width: '300px', flexShrink: '0', display: 'flex', flexDirection: 'column', gap: '16px', overflowY: 'auto' }
+  }
+
+  function minimapStyle() {
+    return { position: 'absolute', bottom: '12px', right: '12px', width: '160px', height: '120px', background: 'var(--bg-2)', border: '1px solid var(--border)', borderRadius: '6px', overflow: 'hidden', opacity: '0.8' }
+  }
+
+  function countBy(items, selector) {
+    const counts = {}
+    for (const item of items ?? []) {
+      const key = selector(item)
+      counts[key] = (counts[key] ?? 0) + 1
+    }
+    return counts
+  }
+
+  function hashColor(str) {
+    const text = String(str ?? '')
+    let hash = 0
+    for (let i = 0; i < text.length; i++) hash = text.charCodeAt(i) + ((hash << 5) - hash)
+    return `hsl(${hash % 360}, 60%, 55%)`
+  }
+
+  window.DashboardTopologyRenderers = {
+    LAYER_COLORS,
+    renderDomainDetail,
+    renderDomainPanel,
+    renderKindFilter,
+    renderLayerLegend,
+    renderLayout,
+    renderMinimapCanvas,
+    renderNoData,
+    renderNodeDetail,
+    renderNodeEmpty,
+  }
+})()

package/dist/dashboard/spa/pages/topology.js

@@ -0,0 +1,370 @@
+/**
+ * Topology page controller. Rendering lives in topology-renderers.js so this
+ * file stays focused on data flow, Cytoscape setup, and interactions.
+ */
+;(() => {
+  'use strict'
+
+  const { fetchJSON, registerChart, getTheme, t, $, $$ } = window.Dashboard
+  const renderers = window.DashboardTopologyRenderers
+  const { LAYER_COLORS } = renderers
+
+  let cy = null
+  let topologyData = null
+  let domainData = null
+  let activeLayerFilters = new Set()
+  let activeKindFilters = new Set()
+
+  async function renderTopology() {
+    const app = $('#app')
+    renderers.renderLayout(app)
+
+    const [topo, domains] = await Promise.all([
+      fetchJSON('/api/topology'),
+      fetchJSON('/api/topology/domains'),
+    ])
+
+    topologyData = topo
+    domainData = domains
+    cy = null
+
+    if (!topologyData?.nodes?.length) {
+      renderers.renderNoData($('#topology-cy'))
+      return
+    }
+
+    renderLayerLegend()
+    renderDomainPanel()
+    renderKindFilter()
+    initCytoscape(topologyData)
+    wireControls()
+    wireKeyboard()
+  }
+
+  function renderLayerLegend() {
+    renderers.renderLayerLegend({
+      container: $('#topo-layer-legend'),
+      countNode: $('#topo-layer-count'),
+      topologyData,
+      activeLayerFilters,
+      onToggle: layer => {
+        toggleFilter(activeLayerFilters, layer)
+        renderLayerLegend()
+        applyFilters()
+      },
+    })
+  }
+
+  function renderKindFilter() {
+    renderers.renderKindFilter({
+      container: $('#topo-kind-legend'),
+      topologyData,
+      activeKindFilters,
+      onToggle: kind => {
+        toggleFilter(activeKindFilters, kind)
+        renderKindFilter()
+        applyFilters()
+      },
+    })
+  }
+
+  function renderDomainPanel() {
+    renderers.renderDomainPanel({
+      container: $('#topo-domains'),
+      domainData,
+      onSelect: domain => {
+        if (!domain || !cy) return
+        const nodeIds = new Set((domain.nodes ?? []).map(node => node.id))
+        cy.elements().removeClass('highlighted dimmed')
+        cy.nodes().forEach(node => {
+          node.addClass(nodeIds.has(node.id()) ? 'highlighted' : 'dimmed')
+        })
+        showDomainDetail(domain)
+      },
+    })
+  }
+
+  function showDomainDetail(domain) {
+    renderers.renderDomainDetail($('#topo-detail'), domain)
+  }
+
+  function initCytoscape(data) {
+    if (!window.cytoscape) {
+      const script = document.createElement('script')
+      script.src = 'https://cdn.jsdelivr.net/npm/cytoscape@3/dist/cytoscape.min.js'
+      script.onload = () => {
+        const dagre = document.createElement('script')
+        dagre.src = 'https://cdn.jsdelivr.net/npm/cytoscape-dagre@2/cytoscape-dagre.min.js'
+        dagre.onload = () => buildGraph(data)
+        dagre.onerror = () => buildGraph(data)
+        document.head.appendChild(dagre)
+      }
+      document.head.appendChild(script)
+      return
+    }
+    buildGraph(data)
+  }
+
+  function buildGraph(data) {
+    const container = $('#topology-cy')
+    if (!container) return
+
+    const maxNodes = 800
+    const degreeMap = buildDegreeMap(data.edges)
+    const sortedNodes = [...data.nodes].sort((a, b) => (degreeMap.get(b.id) ?? 0) - (degreeMap.get(a.id) ?? 0))
+    const nodes = sortedNodes.slice(0, maxNodes)
+    const nodeIds = new Set(nodes.map(node => node.id))
+    const edges = data.edges.filter(edge => nodeIds.has(edge.source) && nodeIds.has(edge.target))
+    const maxDegree = Math.max(...nodes.map(node => degreeMap.get(node.id) ?? 0), 1)
+
+    $('#topo-stats').textContent = `${nodes.length}/${data.nodes.length} ${t('topology.nodes')}, ${edges.length} ${t('topology.edges')}`
+    cy = cytoscape({
+      container,
+      elements: [
+        ...nodes.map(node => graphNode(node, degreeMap, maxDegree)),
+        ...edges.map((edge, index) => ({ data: { id: `e${index}`, source: edge.source, target: edge.target, kind: edge.kind } })),
+      ],
+      style: graphStyles(),
+      layout: { name: 'cose', animate: false, padding: 30, nodeRepulsion: () => 4000 },
+      minZoom: 0.05,
+      maxZoom: 10,
+      wheelSensitivity: 0.3,
+    })
+
+    cy.on('mouseover', 'node', event => {
+      const node = event.target
+      const neighborhood = node.neighborhood().add(node)
+      cy.elements().removeClass('highlighted').not(neighborhood).addClass('dimmed')
+      neighborhood.removeClass('dimmed').addClass('highlighted')
+    })
+    cy.on('mouseout', 'node', () => cy.elements().removeClass('highlighted dimmed'))
+    cy.on('tap', 'node', event => {
+      showNodeDetail(event.target.data())
+      highlightNeighbors(event.target)
+    })
+    cy.on('tap', event => {
+      if (event.target === cy) {
+        cy.elements().removeClass('highlighted dimmed')
+        showNodeDetail(null)
+      }
+    })
+
+    renderMinimap()
+  }
+
+  function buildDegreeMap(edges) {
+    const degreeMap = new Map()
+    for (const edge of edges) {
+      degreeMap.set(edge.source, (degreeMap.get(edge.source) ?? 0) + 1)
+      degreeMap.set(edge.target, (degreeMap.get(edge.target) ?? 0) + 1)
+    }
+    return degreeMap
+  }
+
+  function graphNode(node, degreeMap, maxDegree) {
+    const degree = degreeMap.get(node.id) ?? 0
+    return {
+      data: {
+        id: node.id,
+        label: node.name,
+        layer: node.layer ?? 'unknown',
+        kind: node.kind,
+        filePath: node.filePath,
+        line: node.line,
+        signature: node.signature,
+        domain: node.domain,
+        degree,
+        size: 8 + Math.round((degree / maxDegree) * 20),
+      },
+    }
+  }
+
+  function graphStyles() {
+    return [
+      {
+        selector: 'node',
+        style: {
+          'background-color': ele => LAYER_COLORS[ele.data('layer')] || '#555',
+          label: ele => ele.data('degree') > 3 ? ele.data('label') : '',
+          color: '#a1a1a1',
+          'font-size': '10px',
+          'text-valign': 'bottom',
+          'text-margin-y': 5,
+          width: 'data(size)',
+          height: 'data(size)',
+          'border-width': 1,
+          'border-color': '#333',
+          'transition-property': 'background-color, border-color, opacity',
+          'transition-duration': '0.15s',
+        },
+      },
+      { selector: 'node:selected', style: { 'border-width': 3, 'border-color': '#00dc82', 'font-weight': 'bold', label: 'data(label)' } },
+      { selector: 'edge', style: { width: 1, 'line-color': '#333', 'target-arrow-color': '#333', 'target-arrow-shape': 'triangle', 'curve-style': 'bezier', opacity: 0.3, 'transition-property': 'line-color, opacity, width', 'transition-duration': '0.15s' } },
+      { selector: '.highlighted', style: { 'background-color': '#00dc82', 'line-color': '#00dc82', 'target-arrow-color': '#00dc82', opacity: 1, width: 2, 'z-index': 10 } },
+      { selector: '.search-match', style: { 'border-width': 3, 'border-color': '#ffaa00', 'background-color': '#ffaa00', label: 'data(label)', 'z-index': 20 } },
+      { selector: '.dimmed', style: { opacity: 0.08 } },
+    ]
+  }
+
+  function highlightNeighbors(node) {
+    const neighborhood = node.neighborhood().add(node)
+    cy.elements().removeClass('highlighted').addClass('dimmed')
+    neighborhood.removeClass('dimmed').addClass('highlighted')
+  }
+
+  function renderMinimap() {
+    const miniContainer = $('#topo-minimap')
+    if (!miniContainer || !cy) return
+    const canvas = renderers.renderMinimapCanvas(miniContainer)
+
+    function drawMinimap() {
+      const ctx = canvas.getContext('2d')
+      ctx.clearRect(0, 0, 160, 120)
+      ctx.fillStyle = getTheme() === 'dark' ? '#111' : '#f5f5f5'
+      ctx.fillRect(0, 0, 160, 120)
+
+      const bb = cy.elements().boundingBox()
+      if (bb.w === 0 || bb.h === 0) return
+      const scale = Math.min(150 / bb.w, 110 / bb.h)
+      const offsetX = (160 - bb.w * scale) / 2 - bb.x1 * scale
+      const offsetY = (120 - bb.h * scale) / 2 - bb.y1 * scale
+
+      cy.nodes().forEach(node => {
+        const pos = node.position()
+        ctx.fillStyle = LAYER_COLORS[node.data('layer')] || '#555'
+        ctx.fillRect(pos.x * scale + offsetX - 1, pos.y * scale + offsetY - 1, 2, 2)
+      })
+
+      const ext = cy.extent()
+      ctx.strokeStyle = '#00dc82'
+      ctx.lineWidth = 1
+      ctx.strokeRect(ext.x1 * scale + offsetX, ext.y1 * scale + offsetY, ext.w * scale, ext.h * scale)
+    }
+
+    cy.on('viewport', drawMinimap)
+    drawMinimap()
+  }
+
+  function showNodeDetail(data) {
+    const panel = $('#topo-detail')
+    if (!data) {
+      renderers.renderNodeEmpty(panel)
+      return
+    }
+    const node = cy?.getElementById(data.id)
+    renderers.renderNodeDetail(panel, data, {
+      inDegree: node?.indegree?.() ?? 0,
+      outDegree: node?.outdegree?.() ?? 0,
+      callers: node?.incomers('node').map(item => item.data('label')).slice(0, 10) ?? [],
+      callees: node?.outgoers('node').map(item => item.data('label')).slice(0, 10) ?? [],
+    })
+  }
+
+  function applyFilters() {
+    if (!cy) return
+    const searchQ = ($('#topo-filter')?.value ?? '').toLowerCase()
+
+    cy.nodes().forEach(node => {
+      const layer = node.data('layer')
+      const kind = node.data('kind')
+      const label = String(node.data('label') ?? '').toLowerCase()
+      const filePath = String(node.data('filePath') ?? '').toLowerCase()
+      const layerOk = activeLayerFilters.size === 0 || !activeLayerFilters.has(layer)
+      const kindOk = activeKindFilters.size === 0 || !activeKindFilters.has(kind)
+      const searchOk = !searchQ || label.includes(searchQ) || filePath.includes(searchQ)
+
+      node.style('display', layerOk && kindOk ? 'element' : 'none')
+      node.toggleClass('search-match', Boolean(searchQ && searchOk && layerOk && kindOk))
+    })
+
+    cy.edges().forEach(edge => {
+      const visible = edge.source().style('display') !== 'none' && edge.target().style('display') !== 'none'
+      edge.style('display', visible ? 'element' : 'none')
+    })
+    updateVisibleStats()
+  }
+
+  function updateVisibleStats() {
+    if (!cy) return
+    const visible = cy.nodes().filter(node => node.style('display') !== 'none').length
+    const total = topologyData?.nodes?.length ?? 0
+    const visibleEdges = cy.edges().filter(edge => edge.style('display') !== 'none').length
+    $('#topo-stats').textContent = `${visible}/${total} ${t('topology.nodes')}, ${visibleEdges} ${t('topology.edges')}`
+  }
+
+  function wireControls() {
+    $$('.topo-btn[data-layout]', $('#topo-controls')).forEach(btn => {
+      btn.addEventListener('click', () => {
+        $$('.topo-btn[data-layout]').forEach(item => item.classList.remove('active'))
+        btn.classList.add('active')
+        if (!cy) return
+        const opts = { name: btn.dataset.layout, animate: true, padding: 30 }
+        if (opts.name === 'dagre' && cy.dagre) {
+          opts.rankDir = 'TB'
+          opts.rankSep = 50
+        }
+        cy.layout(opts).run()
+        setTimeout(renderMinimap, 600)
+      })
+    })
+
+    $('#topo-fit')?.addEventListener('click', () => {
+      if (cy) { cy.fit(undefined, 30); renderMinimap() }
+    })
+    $('#topo-export-png')?.addEventListener('click', exportPng)
+    $('#topo-export-json')?.addEventListener('click', exportJson)
+
+    let searchTimer = null
+    $('#topo-filter')?.addEventListener('input', () => {
+      clearTimeout(searchTimer)
+      searchTimer = setTimeout(() => applyFilters(), 150)
+    })
+  }
+
+  function exportPng() {
+    if (!cy) return
+    const link = document.createElement('a')
+    link.href = cy.png({ bg: getTheme() === 'dark' ? '#0a0a0a' : '#ffffff', full: true, scale: 2 })
+    link.download = 'topology.png'
+    link.click()
+  }
+
+  function exportJson() {
+    if (!topologyData) return
+    const blob = new Blob([JSON.stringify(topologyData, null, 2)], { type: 'application/json' })
+    const link = document.createElement('a')
+    link.href = URL.createObjectURL(blob)
+    link.download = 'topology.json'
+    link.click()
+    URL.revokeObjectURL(link.href)
+  }
+
+  function wireKeyboard() {
+    document.addEventListener('keydown', event => {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'f') {
+        event.preventDefault()
+        $('#topo-filter')?.focus()
+      }
+      if (event.key === 'Escape') {
+        const filter = $('#topo-filter')
+        if (filter) filter.value = ''
+        if (cy) {
+          cy.elements().removeClass('highlighted dimmed search-match').style('display', 'element')
+          showNodeDetail(null)
+        }
+        applyFilters()
+      }
+      if (event.key === 'f' && !event.ctrlKey && !event.metaKey && document.activeElement.tagName !== 'INPUT') {
+        if (cy) cy.fit(undefined, 30)
+      }
+    })
+  }
+
+  function toggleFilter(filters, value) {
+    if (filters.has(value)) filters.delete(value)
+    else filters.add(value)
+  }
+
+  window.DashboardPages = window.DashboardPages || {}
+  window.DashboardPages.topology = renderTopology
+})()