sqlite-hub 2.0.1 → 2.2.0

package/frontend/js/components/queryHistoryDetail.js

@@ -23,42 +23,14 @@ function canOpenQueryHistoryInCharts(item) {
   return Boolean(item?.chartsEligible);
 }
 
-function getQueryTypeTone(queryType) {
-  if (queryType === "select" || queryType === "update") {
-    return "success";
-  }
-
-  if (queryType === "pragma") {
-    return "primary";
-  }
-
-  return "muted";
-}
-
-function getExecutionSourceTone(source) {
-  if (source === "api") {
-    return "primary";
-  }
-
-  if (source === "cli") {
-    return "warning";
-  }
-
-  if (source === "mcp") {
-    return "muted";
-  }
-
-  return "success";
-}
-
 function renderRunItem(run) {
   const executedBy = String(run.executedBy ?? "user").trim().toLowerCase() || "user";
 
   return `
     <div class="border border-outline-variant/10 bg-surface-container px-3 py-3">
       <div class="flex flex-wrap items-center gap-2">
-        ${renderStatusBadge(run.status, run.status === "error" ? "alert" : "success")}
-        ${renderStatusBadge(executedBy, getExecutionSourceTone(executedBy))}
+        ${renderStatusBadge(run.status, "muted")}
+        ${renderStatusBadge(executedBy, "muted")}
         <span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
           ${escapeHtml(formatCompactDateTime(run.executedAt))}
         </span>
@@ -100,9 +72,14 @@ export function renderQueryHistoryDetail({
       <section class="flex h-full min-h-0 flex-col bg-surface-low">
         <div class="border-b border-outline-variant/10 px-5 py-4">
           <div class="flex items-center justify-between gap-3">
-            <span class="font-body text-sm font-black uppercase tracking-[0.18em] text-primary-container">
-              Query Detail
-            </span>
+            <div class="min-w-0">
+              <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-primary-container/70">
+                SQL Editor // Query History
+              </div>
+              <h2 class="mt-1 truncate font-body text-lg font-black uppercase tracking-tight text-on-surface">
+                Loading
+              </h2>
+            </div>
             <button
               class="query-history-icon-button"
               data-action="clear-query-history-selection"
@@ -124,9 +101,14 @@ export function renderQueryHistoryDetail({
       <section class="flex h-full min-h-0 flex-col bg-surface-low">
         <div class="border-b border-outline-variant/10 px-5 py-4">
           <div class="flex items-center justify-between gap-3">
-            <span class="font-body text-sm font-black uppercase tracking-[0.18em] text-primary-container">
-              Query Detail
-            </span>
+            <div class="min-w-0">
+              <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-primary-container/70">
+                SQL Editor // Query History
+              </div>
+              <h2 class="mt-1 truncate font-body text-lg font-black uppercase tracking-tight text-on-surface">
+                Error
+              </h2>
+            </div>
             <button
               class="query-history-icon-button"
               data-action="clear-query-history-selection"
@@ -153,12 +135,10 @@ export function renderQueryHistoryDetail({
       ].join("")
     : "";
   const statusMarkup = [
-    renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType)),
-    item.isSaved ? renderStatusBadge("saved", "primary") : "",
-    item.isDestructive ? renderStatusBadge("destructive", "warning") : "",
-    item.lastRun
-      ? renderStatusBadge(item.lastRun.status, item.lastRun.status === "error" ? "alert" : "success")
-      : "",
+    renderStatusBadge(item.queryType, "muted"),
+    item.isSaved ? renderStatusBadge("saved", "muted") : "",
+    item.isDestructive ? renderStatusBadge("destructive", "muted") : "",
+    item.lastRun ? renderStatusBadge(item.lastRun.status, "muted") : "",
   ].join("");
   const metaMarkup = [
     renderDetailMetaItem("Last Used", formatDateTime(item.lastUsedAt)),
@@ -176,9 +156,9 @@ export function renderQueryHistoryDetail({
   return [
     '<section class="flex h-full min-h-0 flex-col bg-surface-low">',
     '<div class="border-b border-outline-variant/10 px-5 py-4">',
-    '<div class="flex items-center justify-between gap-3"><div>',
-    '<div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">Query Detail</div>',
-    '<h2 class="mt-1 font-body text-lg font-black uppercase tracking-tight text-on-surface">',
+    '<div class="flex items-center justify-between gap-3"><div class="min-w-0">',
+    '<div class="font-mono text-[10px] uppercase tracking-[0.18em] text-primary-container/70">SQL Editor // Query History</div>',
+    '<h2 class="mt-1 truncate font-body text-lg font-black uppercase tracking-tight text-on-surface">',
     escapeHtml(item.displayTitle),
     "</h2></div>",
     '<button class="query-history-icon-button" data-action="clear-query-history-selection" type="button"><span class="material-symbols-outlined text-[18px]">close</span></button>',

package/frontend/js/components/rowEditorPanel.js

@@ -215,7 +215,7 @@ function renderTextCharacterCountBadge(value) {
 
   return `
     <span
-      class="border px-2 py-1 text-[9px] ${getFieldBadgeClassName("char-count")}"
+      class="status-badge status-badge--muted"
       data-row-editor-char-count
       ${count === null ? "hidden" : ""}
     >
@@ -337,22 +337,10 @@ function renderReadonlyField(field = {}, tableMeta = {}) {
   `;
 }
 
-function getValueStateBadgeClassName(state) {
-  if (state === "null") {
-    return "border-primary-container/35 bg-primary-container/15 text-primary-container";
-  }
-
-  if (state === "empty") {
-    return "border-outline-variant/35 bg-surface-container-high text-on-surface-variant";
-  }
-
-  return "border-outline-variant/20 bg-surface-container text-on-surface-variant";
-}
-
 function renderValueStateBadge(state) {
   return `
     <span
-      class="border px-2 py-1 text-[9px] ${getValueStateBadgeClassName(state)}"
+      class="status-badge status-badge--muted"
       data-row-editor-value-state
       data-value-state="${escapeHtml(state)}"
     >${escapeHtml(getRowEditorValueStateLabel(state))}</span>
@@ -447,44 +435,11 @@ function renderEditableField(field, tableMeta = {}) {
   `;
 }
 
-function getFieldBadgeClassName(tone) {
-  if (tone === "primary-key") {
-    return "border-primary-container/35 bg-primary-container/15 text-primary-container";
-  }
-
-  if (tone === "foreign-key") {
-    return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
-  }
-
-  if (tone === "url") {
-    return "border-primary-container/35 bg-primary-container/15 text-primary-container";
-  }
-
-  if (tone === "email") {
-    return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
-  }
-
-  if (tone === "check") {
-    return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
-  }
-
-  if (tone === "filepath") {
-    return "border-outline-variant/30 bg-surface-container-high text-on-surface";
-  }
-
-  if (tone === "char-count") {
-    return "border-outline-variant/25 bg-surface-container text-on-surface-variant";
-  }
-
-  return "border-outline-variant/20 bg-surface-container text-on-surface-variant";
-}
-
 function renderFieldBadge(badge) {
   const label = typeof badge === "object" ? badge.label : badge;
-  const tone = typeof badge === "object" ? badge.tone : "";
 
   return `
-    <span class="border px-2 py-1 text-[9px] ${getFieldBadgeClassName(tone)}">
+    <span class="status-badge status-badge--muted">
       ${escapeHtml(label)}
     </span>
   `;
@@ -578,27 +533,19 @@ export function renderRowEditorPanel({
   ]
     .filter(Boolean)
     .join("");
+  const eyebrow = [sectionLabel, subtitle].filter(Boolean).join(" // ");
 
   return `
     <section class="flex h-full min-h-0 flex-col bg-surface-low">
       <header class="border-b border-outline-variant/10 bg-surface-container px-6 py-5">
         <div class="flex items-start justify-between gap-4">
           <div class="min-w-0 flex-1">
-            <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
-              ${escapeHtml(sectionLabel)}
+            <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-primary-container/70">
+              ${escapeHtml(eyebrow)}
             </div>
-            <h2 class="mt-2 font-body text-3xl font-black uppercase tracking-tight text-primary-container">
+            <h2 class="mt-1 truncate font-body text-lg font-black uppercase tracking-tight text-on-surface">
               ${escapeHtml(title)}
             </h2>
-            ${
-              subtitle
-                ? `
-                    <div class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-                      ${escapeHtml(subtitle)}
-                    </div>
-                  `
-                : ""
-            }
           </div>
           <button
             aria-label="Close panel"

package/frontend/js/components/structureGraph.js

@@ -1,4 +1,4 @@
-import { showToast } from '../store.js';
+import { clearStructureSelection, showToast } from '../store.js';
 import { replaceChildrenFromRenderedMarkup } from '../utils/dom.js';
 import { escapeHtml, formatNumber } from '../utils/format.js';
 
@@ -56,10 +56,68 @@ function getTableId(tableName) {
     return `table:${tableName}`;
 }
 
+function isShadowRelationship(edgeData) {
+    return edgeData?.relationshipKind === 'shadow';
+}
+
+function resolveShadowOwnerTableName(shadowTable, tables, tableMap) {
+    if (!shadowTable?.isShadow) {
+        return '';
+    }
+
+    const explicitOwnerName = String(shadowTable.shadowOwnerTable ?? '');
+    const explicitOwner = tableMap.get(explicitOwnerName);
+
+    if (explicitOwner?.isVirtual) {
+        return explicitOwnerName;
+    }
+
+    return (
+        tables
+            .filter(table => table.isVirtual && shadowTable.name.startsWith(`${table.name}_`))
+            .sort((left, right) => right.name.length - left.name.length)[0]?.name ?? ''
+    );
+}
+
+function unquoteSqlIdentifier(identifier) {
+    const value = String(identifier ?? '').trim();
+
+    if (value.length >= 2 && value[0] === '"' && value.at(-1) === '"') {
+        return value.slice(1, -1).replaceAll('""', '"');
+    }
+
+    if (value.length >= 2 && value[0] === '`' && value.at(-1) === '`') {
+        return value.slice(1, -1).replaceAll('``', '`');
+    }
+
+    if (value.length >= 2 && value[0] === '[' && value.at(-1) === ']') {
+        return value.slice(1, -1);
+    }
+
+    return value;
+}
+
+function extractVirtualTableModule(ddl = '') {
+    const match = String(ddl ?? '').match(
+        /\bUSING\s+("[^"]+(?:""[^"]*)*"|`[^`]+(?:``[^`]*)*`|\[[^\]]+\]|[A-Za-z_][A-Za-z0-9_]*)/i,
+    );
+
+    return match ? unquoteSqlIdentifier(match[1]) : '';
+}
+
+function resolveVirtualTableModule(table) {
+    if (!table?.isVirtual) {
+        return '';
+    }
+
+    return String(table.virtualModule ?? '').trim() || extractVirtualTableModule(table.ddl);
+}
+
 function getSchemaSignature(schema) {
     return JSON.stringify(
         (schema?.tables ?? []).map(table => ({
             name: table.name,
+            virtualModule: table.virtualModule ?? null,
             columns: (table.columns ?? []).map(column => column.name),
             foreignKeys: (table.foreignKeys ?? []).map(foreignKey => ({
                 referencedTable: foreignKey.referencedTable,
@@ -237,6 +295,18 @@ function createColumnFlags(column, foreignKeyColumns) {
     return flags.join('');
 }
 
+function renderTableKindFlag(tableData) {
+    if (tableData?.isVirtual) {
+        return '<span class="structure-graph__flag is-virtual" title="Virtual table">Virtual</span>';
+    }
+
+    if (tableData?.isShadow) {
+        return '<span class="structure-graph__flag is-shadow" title="Shadow table">Shadow</span>';
+    }
+
+    return '';
+}
+
 function quoteSqlIdentifier(identifier) {
     return `"${String(identifier ?? '').replaceAll('"', '""')}"`;
 }
@@ -298,6 +368,47 @@ function buildJoinSql(edgeData) {
 }
 
 function renderJoinInspector(edgeData) {
+    if (isShadowRelationship(edgeData)) {
+        const sourceTable = edgeData?.sourceTable || '';
+        const targetTable = edgeData?.targetTable || '';
+
+        return `
+    <div class="structure-graph__panel">
+      <div class="space-y-3">
+        <div class="structure-graph__panel-heading">
+          <div class="structure-graph__eyebrow">Shadow Link</div>
+          <button
+            class="query-history-icon-button"
+            data-structure-graph-action="toggle-inspector"
+            type="button"
+            aria-label="Hide inspector"
+          >
+            <span class="material-symbols-outlined text-[18px]">close</span>
+          </button>
+        </div>
+        <div class="structure-graph__title">${escapeHtml(sourceTable)} → ${escapeHtml(targetTable)}</div>
+        <div class="structure-graph__subtitle">Shadow table relationship</div>
+      </div>
+
+      <section class="structure-graph__section">
+        <div class="structure-graph__section-title">Relationship</div>
+        <div class="structure-graph__join-flow">
+          <div class="structure-graph__join-table">${escapeHtml(sourceTable)}</div>
+          <span class="material-symbols-outlined structure-graph__join-arrow" aria-hidden="true">arrow_forward</span>
+          <div class="structure-graph__join-table">${escapeHtml(targetTable)}</div>
+        </div>
+        <div class="structure-graph__join-condition-list">
+          <div class="structure-graph__join-condition">
+            <span>Virtual table</span>
+            <span aria-hidden="true">→</span>
+            <span>Shadow table</span>
+          </div>
+        </div>
+      </section>
+    </div>
+  `;
+    }
+
     const sourceTable = edgeData?.sourceTable || '';
     const targetTable = edgeData?.targetTable || '';
     const conditions = getJoinConditions(edgeData);
@@ -429,7 +540,10 @@ export function renderInspector(tableData) {
             <span class="material-symbols-outlined text-[18px]">close</span>
           </button>
         </div>
-        <div class="structure-graph__title">${escapeHtml(tableData.name)}</div>
+        <div class="flex min-w-0 flex-wrap items-center gap-2">
+          <div class="structure-graph__title min-w-0">${escapeHtml(tableData.name)}</div>
+          ${renderTableKindFlag(tableData)}
+        </div>
       </div>
 
       <div class="structure-graph__summary">
@@ -474,19 +588,51 @@ export function renderInspector(tableData) {
 export function buildGraphElements(schema) {
     const tables = schema?.tables ?? [];
     const tableMap = new Map(tables.map(table => [table.name, table]));
-    const nodes = tables.map(table => ({
-        group: 'nodes',
-        data: {
-            id: getTableId(table.name),
-            label: table.name,
-            tableName: table.name,
-            width: Math.max(184, table.name.length * 9 + 64),
-            height: 56,
-            table,
-        },
-    }));
+    const nodes = tables.map(table => {
+        const isVirtual = Boolean(table.isVirtual);
+        const isShadow = Boolean(table.isShadow);
+        const virtualModule = resolveVirtualTableModule(table);
+        const moduleWidth = virtualModule ? virtualModule.length * 8 + 72 : 0;
+
+        return {
+            group: 'nodes',
+            classes: [isVirtual ? 'virtual-table' : '', isShadow ? 'shadow-table' : ''].filter(Boolean).join(' '),
+            data: {
+                id: getTableId(table.name),
+                label: table.name,
+                tableName: table.name,
+                tableKind: table.tableKind ?? 'table',
+                isVirtual,
+                isShadow,
+                virtualModule,
+                width: Math.max(isVirtual ? 208 : 184, table.name.length * 9 + 64, moduleWidth),
+                height: isVirtual ? (virtualModule ? 82 : 70) : 56,
+                table,
+            },
+        };
+    });
     const edges = [];
 
+    tables.forEach(table => {
+        const shadowOwnerTableName = resolveShadowOwnerTableName(table, tables, tableMap);
+
+        if (!shadowOwnerTableName || !tableMap.has(shadowOwnerTableName)) {
+            return;
+        }
+
+        edges.push({
+            group: 'edges',
+            classes: 'shadow-link',
+            data: {
+                source: getTableId(shadowOwnerTableName),
+                target: getTableId(table.name),
+                sourceTable: shadowOwnerTableName,
+                targetTable: table.name,
+                relationshipKind: 'shadow',
+            },
+        });
+    });
+
     tables.forEach(table => {
         (table.foreignKeys ?? []).forEach((foreignKey, foreignKeyIndex) => {
             if (!tableMap.has(foreignKey.referencedTable)) {
@@ -582,6 +728,27 @@ export function createCytoscapeInstance(container, elements) {
                     'transition-duration': '140ms',
                 },
             },
+            {
+                selector: 'node.virtual-table',
+                style: {
+                    'background-color': '#3d1238',
+                    'border-color': '#ff4fa3',
+                    'border-width': 2.4,
+                    color: '#ffe8f4',
+                    'font-size': 12.5,
+                    'text-wrap': 'wrap',
+                    'text-max-width': 174,
+                },
+            },
+            {
+                selector: 'node.shadow-table',
+                style: {
+                    'background-color': '#221f1a',
+                    'border-color': '#8f8a75',
+                    'border-style': 'dashed',
+                    color: '#f3ecd0',
+                },
+            },
             {
                 selector: 'node.selected',
                 style: {
@@ -643,6 +810,22 @@ export function createCytoscapeInstance(container, elements) {
                     'transition-duration': '120ms',
                 },
             },
+            {
+                selector: 'edge.shadow-link',
+                style: {
+                    width: 1.8,
+                    label: '',
+                    'line-color': '#8f8a75',
+                    'line-style': 'dashed',
+                    'target-arrow-color': '#8f8a75',
+                    'target-arrow-shape': 'vee',
+                    'arrow-scale': 0.9,
+                    'text-background-opacity': 0,
+                    'text-border-opacity': 0,
+                    'text-outline-width': 0,
+                    'z-index': 0,
+                },
+            },
             {
                 selector: 'edge.related',
                 style: {
@@ -714,6 +897,21 @@ function showEdgeReadout(edge, renderedPosition) {
         return;
     }
 
+    if (isShadowRelationship(edge.data())) {
+        const sourceTable = edge.data('sourceTable') || edge.source().data('tableName') || '?';
+        const targetTable = edge.data('targetTable') || edge.target().data('tableName') || '?';
+
+        currentGraph.edgeReadout.innerHTML = `
+      <div class="structure-graph__edge-readout-meta">Shadow table</div>
+      <div class="structure-graph__edge-readout-path">
+        ${escapeHtml(sourceTable)} <span aria-hidden="true">→</span> ${escapeHtml(targetTable)}
+      </div>
+    `;
+        currentGraph.edgeReadout.removeAttribute('hidden');
+        positionEdgeReadout(renderedPosition);
+        return;
+    }
+
     const sourceTable = edge.data('sourceTable') || edge.source().data('tableName') || '?';
     const targetTable = edge.data('targetTable') || edge.target().data('tableName') || '?';
     const sourceColumn = edge.data('sourceColumn') || '?';
@@ -741,6 +939,65 @@ function hideEdgeReadout() {
     currentGraph.edgeReadout.setAttribute('hidden', 'hidden');
 }
 
+function clearVirtualModuleBadges(graph = currentGraph) {
+    if (!graph?.virtualModuleBadges) {
+        return;
+    }
+
+    graph.virtualModuleBadges.forEach(badge => badge.remove());
+    graph.virtualModuleBadges.clear();
+}
+
+function syncVirtualModuleBadges(graph = currentGraph) {
+    if (!graph?.cy || !graph.canvasShell || !graph.virtualModuleBadges) {
+        return;
+    }
+
+    const activeNodeIds = new Set();
+
+    graph.cy.nodes('.virtual-table').forEach(node => {
+        const moduleName = String(node.data('virtualModule') ?? '').trim();
+
+        if (!moduleName) {
+            return;
+        }
+
+        const nodeId = node.id();
+        activeNodeIds.add(nodeId);
+
+        let badge = graph.virtualModuleBadges.get(nodeId);
+
+        if (!badge) {
+            badge = document.createElement('div');
+            badge.className = 'structure-graph__virtual-module-badge';
+            badge.dataset.structureVirtualModuleBadge = node.data('tableName') || '';
+            graph.canvasShell.appendChild(badge);
+            graph.virtualModuleBadges.set(nodeId, badge);
+        }
+
+        badge.textContent = moduleName;
+        badge.classList.toggle('is-dimmed', node.hasClass('dimmed'));
+        badge.classList.toggle('is-related', node.hasClass('related'));
+        badge.classList.toggle('is-selected', node.hasClass('selected'));
+
+        const position = node.renderedPosition();
+        const renderedHeight = Number(node.renderedHeight?.() ?? 0);
+        const yOffset = Math.max(12, Math.min(22, renderedHeight * 0.24));
+        const scale = Math.max(0.72, Math.min(1, graph.cy.zoom()));
+
+        badge.style.left = `${position.x}px`;
+        badge.style.top = `${position.y + yOffset}px`;
+        badge.style.transform = `translate(-50%, -50%) scale(${scale})`;
+    });
+
+    graph.virtualModuleBadges.forEach((badge, nodeId) => {
+        if (!activeNodeIds.has(nodeId)) {
+            badge.remove();
+            graph.virtualModuleBadges.delete(nodeId);
+        }
+    });
+}
+
 function createGraphStateSnapshot(graph = currentGraph) {
     if (!graph?.cy) {
         return null;
@@ -858,6 +1115,8 @@ function destroyCurrentGraph() {
         currentGraph.resizeObserver.disconnect();
     }
 
+    clearVirtualModuleBadges(currentGraph);
+
     if (currentGraph.resizeHandler) {
         window.removeEventListener('resize', currentGraph.resizeHandler);
     }
@@ -987,6 +1246,8 @@ function clearSelection() {
     syncEntryHighlights();
     replaceChildrenFromRenderedMarkup(currentGraph.inspector, getDefaultInspectorMarkup());
     updateOpenDataButton();
+    syncVirtualModuleBadges();
+    clearStructureSelection();
 }
 
 function applyTableSelection(node, { focus = true } = {}) {
@@ -1002,6 +1263,7 @@ function applyTableSelection(node, { focus = true } = {}) {
     highlightConnectedElements(currentGraph.cy, node);
     syncEntryHighlights([tableData.name]);
     updateOpenDataButton();
+    syncVirtualModuleBadges();
 
     if (focus) {
         currentGraph.cy.animate(
@@ -1033,6 +1295,7 @@ function applyEdgeSelection(edge) {
     highlightConnectedElements(currentGraph.cy, edge);
     syncEntryHighlights([], [edge.data('sourceTable'), edge.data('targetTable')]);
     updateOpenDataButton();
+    syncVirtualModuleBadges();
     return edge;
 }
 
@@ -1202,6 +1465,7 @@ function runLayout(cy, onStop, { randomize = false } = {}) {
 
     applyReadableLayoutPositions(cy, { variant: currentGraph?.layoutVariant ?? 0 });
     cy.fit(cy.elements(), 90);
+    syncVirtualModuleBadges();
 
     if (typeof onStop === 'function') {
         onStop();
@@ -1235,6 +1499,8 @@ function restorePersistedViewport(cy, persistedState) {
         cy.pan(persistedState.pan);
     }
 
+    syncVirtualModuleBadges();
+
     return true;
 }
 
@@ -1375,6 +1641,7 @@ export async function mountStructureGraph(snapshot) {
         persistStateOnDestroy: true,
         selectedEdgeId: null,
         selectedTableName: null,
+        virtualModuleBadges: new Map(),
     };
 
     currentGraph.cleanup.push(setupToolbar(cy));
@@ -1407,14 +1674,20 @@ export async function mountStructureGraph(snapshot) {
     });
 
     cy.on('dragfree', 'node', () => {
+        syncVirtualModuleBadges();
         scheduleGraphStatePersist(0);
     });
 
+    cy.on('position drag', 'node', () => {
+        syncVirtualModuleBadges();
+    });
+
     cy.on('mouseover', 'edge', event => {
         const edge = event.target;
         highlightConnectedElements(cy, edge);
         syncEntryHighlights([], [edge.data('sourceTable'), edge.data('targetTable')]);
         showEdgeReadout(edge, event.renderedPosition);
+        syncVirtualModuleBadges();
     });
 
     cy.on('mousemove', 'edge', event => {
@@ -1424,10 +1697,12 @@ export async function mountStructureGraph(snapshot) {
     cy.on('mouseout', 'edge', () => {
         hideEdgeReadout();
         restoreGraphState();
+        syncVirtualModuleBadges();
     });
 
     cy.on('pan zoom', () => {
         hideEdgeReadout();
+        syncVirtualModuleBadges();
         scheduleGraphStatePersist(300);
     });
 
@@ -1465,14 +1740,18 @@ export async function mountStructureGraph(snapshot) {
         });
     }
 
+    syncVirtualModuleBadges();
+
     if (typeof ResizeObserver === 'function') {
         currentGraph.resizeObserver = new ResizeObserver(() => {
             cy.resize();
+            syncVirtualModuleBadges();
         });
         currentGraph.resizeObserver.observe(canvas);
     } else {
         currentGraph.resizeHandler = () => {
             cy.resize();
+            syncVirtualModuleBadges();
         };
         window.addEventListener('resize', currentGraph.resizeHandler);
     }