@hongmaple0820/scale-engine 0.50.1 → 0.50.2

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

@@ -1,251 +0,0 @@
-/**
- * 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

@@ -1,370 +0,0 @@
-/**
- * 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
-})()