@diagrammo/dgmo 0.6.1 → 0.6.3

package/src/er/renderer.ts

@@ -13,12 +13,20 @@ import {
   LEGEND_HEIGHT,
   LEGEND_PILL_PAD,
   LEGEND_PILL_FONT_SIZE,
+  LEGEND_PILL_FONT_W,
+  LEGEND_CAPSULE_PAD,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_ENTRY_DOT_GAP,
+  LEGEND_ENTRY_TRAIL,
   LEGEND_GROUP_GAP,
 } from '../utils/legend-constants';
 import type { ParsedERDiagram, ERConstraint } from './types';
-import type { ERLayoutResult, ERLayoutNode, ERLayoutEdge } from './layout';
+import type { ERLayoutResult } from './layout';
 import { parseERDiagram } from './parser';
 import { layoutERDiagram } from './layout';
+import { classifyEREntities, ROLE_COLORS, ROLE_LABELS, ROLE_ORDER } from './classify';
+import type { EntityRole } from './classify';
 
 // ============================================================
 // Constants
@@ -208,32 +216,62 @@ export function renderERDiagram(
   isDark: boolean,
   onClickItem?: (lineNumber: number) => void,
   exportDims?: { width?: number; height?: number },
-  activeTagGroup?: string | null
+  activeTagGroup?: string | null,
+  /** When false, semantic role colors are suppressed and entities use a neutral color. */
+  semanticColorsActive?: boolean
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
-  const width = exportDims?.width ?? container.clientWidth;
-  const height = exportDims?.height ?? container.clientHeight;
-  if (width <= 0 || height <= 0) return;
+  const useSemanticColors =
+    parsed.tagGroups.length === 0 && layout.nodes.every((n) => !n.color);
+  const legendReserveH = useSemanticColors ? LEGEND_HEIGHT + DIAGRAM_PADDING : 0;
 
   const titleHeight = parsed.title ? 40 : 0;
   const diagramW = layout.width;
   const diagramH = layout.height;
-  const availH = height - titleHeight;
-  const scaleX = (width - DIAGRAM_PADDING * 2) / diagramW;
-  const scaleY = (availH - DIAGRAM_PADDING * 2) / diagramH;
-  const scale = Math.min(MAX_SCALE, scaleX, scaleY);
 
-  const scaledW = diagramW * scale;
-  const scaledH = diagramH * scale;
-  const offsetX = (width - scaledW) / 2;
-  const offsetY = titleHeight + DIAGRAM_PADDING;
+  // Natural dimensions derived purely from the layout — no dependency on container
+  // size at render time, which eliminates the stagger caused by reading clientWidth/
+  // clientHeight before the container has stabilized.
+  const naturalW = diagramW + DIAGRAM_PADDING * 2;
+  const naturalH = diagramH + titleHeight + legendReserveH + DIAGRAM_PADDING * 2;
+
+  // For export: scale the natural layout to fit the requested pixel dimensions.
+  // For live preview: render at natural scale (scale=1) and let the SVG viewBox
+  // handle fitting to the container via CSS.
+  let viewW: number;
+  let viewH: number;
+  let scale: number;
+  let offsetX: number;
+  let offsetY: number;
+
+  if (exportDims) {
+    viewW = exportDims.width ?? naturalW;
+    viewH = exportDims.height ?? naturalH;
+    const availH = viewH - titleHeight - legendReserveH;
+    const scaleX = (viewW - DIAGRAM_PADDING * 2) / diagramW;
+    const scaleY = (availH - DIAGRAM_PADDING * 2) / diagramH;
+    scale = Math.min(MAX_SCALE, scaleX, scaleY);
+    const scaledW = diagramW * scale;
+    offsetX = (viewW - scaledW) / 2;
+    offsetY = titleHeight + DIAGRAM_PADDING;
+  } else {
+    viewW = naturalW;
+    viewH = naturalH;
+    scale = 1;
+    offsetX = DIAGRAM_PADDING;
+    offsetY = titleHeight + DIAGRAM_PADDING;
+  }
+
+  if (viewW <= 0 || viewH <= 0) return;
 
   const svg = d3Selection
     .select(container)
     .append('svg')
-    .attr('width', width)
-    .attr('height', height)
+    .attr('width', exportDims ? viewW : '100%')
+    .attr('height', exportDims ? viewH : '100%')
+    .attr('viewBox', `0 0 ${viewW} ${viewH}`)
+    .attr('preserveAspectRatio', 'xMidYMid meet')
     .style('font-family', FONT_FAMILY);
 
   // ── Title ──
@@ -241,7 +279,7 @@ export function renderERDiagram(
     const titleEl = svg
       .append('text')
       .attr('class', 'chart-title')
-      .attr('x', width / 2)
+      .attr('x', viewW / 2)
       .attr('y', 30)
       .attr('text-anchor', 'middle')
       .attr('fill', palette.text)
@@ -269,6 +307,15 @@ export function renderERDiagram(
   // ── Auto-assign colors ──
   const seriesColors = getSeriesColors(palette);
 
+  // ── Semantic coloring gate ──
+  // Classify entities whenever conditions allow; suppress colors when user collapses the legend.
+  // (useSemanticColors was computed above for legend reserve height)
+  const semanticRoles: Map<string, EntityRole> | null = useSemanticColors
+    ? classifyEREntities(parsed.tables, parsed.relationships)
+    : null;
+  // semanticColorsActive defaults to true; false = legend collapsed, neutral color applied
+  const semanticActive = semanticRoles !== null && (semanticColorsActive ?? true);
+
   // ── Edges (behind nodes) ──
   const useLabels = parsed.options.notation === 'labels';
 
@@ -347,7 +394,12 @@ export function renderERDiagram(
   for (let ni = 0; ni < layout.nodes.length; ni++) {
     const node = layout.nodes[ni];
     const tagColor = resolveTagColor(node.metadata, parsed.tagGroups, activeTagGroup ?? null);
-    const nodeColor = node.color ?? tagColor ?? seriesColors[ni % seriesColors.length];
+    const semanticColor = semanticActive
+      ? palette.colors[ROLE_COLORS[semanticRoles!.get(node.id) ?? 'unclassified']]
+      : semanticRoles
+        ? palette.primary  // neutral color when legend is collapsed
+        : undefined;
+    const nodeColor = node.color ?? tagColor ?? semanticColor ?? seriesColors[ni % seriesColors.length];
 
     const nodeG = contentG
       .append('g')
@@ -365,6 +417,12 @@ export function renderERDiagram(
       }
     }
 
+    // Set data-er-role for semantic coloring (CSS targeting + test assertions)
+    if (semanticRoles) {
+      const role = semanticRoles.get(node.id);
+      if (role) nodeG.attr('data-er-role', role);
+    }
+
     if (onClickItem) {
       nodeG.style('cursor', 'pointer').on('click', () => {
         onClickItem(node.lineNumber);
@@ -463,7 +521,7 @@ export function renderERDiagram(
     }
 
     let legendX = DIAGRAM_PADDING;
-    let legendY = height - DIAGRAM_PADDING;
+    let legendY = viewH - DIAGRAM_PADDING;
 
     for (const group of parsed.tagGroups) {
       const groupG = legendG.append('g')
@@ -525,6 +583,161 @@ export function renderERDiagram(
       legendX += LEGEND_GROUP_GAP;
     }
   }
+
+  // ── Semantic Legend ──
+  // Rendered when semantic role detection is enabled (no tag groups, no explicit colors).
+  // Follows the sequence-legend pattern: one clickable "Role" group pill that expands
+  // to show colored-dot entries. Clicking toggles semanticColorsActive on/off.
+  if (semanticRoles) {
+    const presentRoles = ROLE_ORDER.filter((role) => {
+      for (const r of semanticRoles.values()) {
+        if (r === role) return true;
+      }
+      return false;
+    });
+
+    if (presentRoles.length > 0) {
+      // Measure actual text widths for consistent spacing regardless of character mix.
+      // Falls back to a character-count estimate in jsdom/test environments.
+      const measureLabelW = (text: string, fontSize: number): number => {
+        const dummy = svg.append('text')
+          .attr('font-size', fontSize)
+          .attr('font-family', FONT_FAMILY)
+          .attr('visibility', 'hidden')
+          .text(text);
+        const measured = (dummy.node() as SVGTextElement | null)?.getComputedTextLength?.() ?? 0;
+        dummy.remove();
+        return measured > 0 ? measured : text.length * fontSize * 0.6;
+      };
+
+      const labelWidths = new Map<EntityRole, number>();
+      for (const role of presentRoles) {
+        labelWidths.set(role, measureLabelW(ROLE_LABELS[role], LEGEND_ENTRY_FONT_SIZE));
+      }
+
+      const groupBg = isDark
+        ? mix(palette.surface, palette.bg, 50)
+        : mix(palette.surface, palette.bg, 30);
+
+      const groupName = 'Role';
+      const pillWidth = groupName.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+      const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
+
+      let totalWidth: number;
+      let entriesWidth = 0;
+      if (semanticActive) {
+        for (const role of presentRoles) {
+          entriesWidth +=
+            LEGEND_DOT_R * 2 +
+            LEGEND_ENTRY_DOT_GAP +
+            labelWidths.get(role)! +
+            LEGEND_ENTRY_TRAIL;
+        }
+        totalWidth = LEGEND_CAPSULE_PAD * 2 + pillWidth + LEGEND_ENTRY_TRAIL + entriesWidth;
+      } else {
+        totalWidth = pillWidth;
+      }
+
+      const legendX = (viewW - totalWidth) / 2;
+      const legendY = viewH - DIAGRAM_PADDING - LEGEND_HEIGHT;
+
+      const semanticLegendG = svg
+        .append('g')
+        .attr('class', 'er-semantic-legend')
+        .attr('data-legend-group', 'role')
+        .attr('transform', `translate(${legendX}, ${legendY})`)
+        .style('cursor', 'pointer');
+
+      if (semanticActive) {
+        // ── Expanded: outer capsule + inner pill + dot entries ──
+        semanticLegendG
+          .append('rect')
+          .attr('width', totalWidth)
+          .attr('height', LEGEND_HEIGHT)
+          .attr('rx', LEGEND_HEIGHT / 2)
+          .attr('fill', groupBg);
+
+        semanticLegendG
+          .append('rect')
+          .attr('x', LEGEND_CAPSULE_PAD)
+          .attr('y', LEGEND_CAPSULE_PAD)
+          .attr('width', pillWidth)
+          .attr('height', pillH)
+          .attr('rx', pillH / 2)
+          .attr('fill', palette.bg);
+
+        semanticLegendG
+          .append('rect')
+          .attr('x', LEGEND_CAPSULE_PAD)
+          .attr('y', LEGEND_CAPSULE_PAD)
+          .attr('width', pillWidth)
+          .attr('height', pillH)
+          .attr('rx', pillH / 2)
+          .attr('fill', 'none')
+          .attr('stroke', mix(palette.textMuted, palette.bg, 50))
+          .attr('stroke-width', 0.75);
+
+        semanticLegendG
+          .append('text')
+          .attr('x', LEGEND_CAPSULE_PAD + pillWidth / 2)
+          .attr('y', LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2)
+          .attr('font-size', LEGEND_PILL_FONT_SIZE)
+          .attr('font-weight', '500')
+          .attr('fill', palette.text)
+          .attr('text-anchor', 'middle')
+          .attr('font-family', FONT_FAMILY)
+          .text(groupName);
+
+        let entryX = LEGEND_CAPSULE_PAD + pillWidth + LEGEND_ENTRY_TRAIL;
+        for (const role of presentRoles) {
+          const label = ROLE_LABELS[role];
+          const roleColor = palette.colors[ROLE_COLORS[role]];
+
+          const entryG = semanticLegendG
+            .append('g')
+            .attr('data-legend-entry', role);
+
+          entryG
+            .append('circle')
+            .attr('cx', entryX + LEGEND_DOT_R)
+            .attr('cy', LEGEND_HEIGHT / 2)
+            .attr('r', LEGEND_DOT_R)
+            .attr('fill', roleColor);
+
+          const textX = entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
+          entryG
+            .append('text')
+            .attr('x', textX)
+            .attr('y', LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1)
+            .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
+            .attr('fill', palette.textMuted)
+            .attr('font-family', FONT_FAMILY)
+            .text(label);
+
+          entryX = textX + labelWidths.get(role)! + LEGEND_ENTRY_TRAIL;
+        }
+      } else {
+        // ── Collapsed: single muted pill, no entries ──
+        semanticLegendG
+          .append('rect')
+          .attr('width', pillWidth)
+          .attr('height', LEGEND_HEIGHT)
+          .attr('rx', LEGEND_HEIGHT / 2)
+          .attr('fill', groupBg);
+
+        semanticLegendG
+          .append('text')
+          .attr('x', pillWidth / 2)
+          .attr('y', LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2)
+          .attr('font-size', LEGEND_PILL_FONT_SIZE)
+          .attr('font-weight', '500')
+          .attr('fill', palette.textMuted)
+          .attr('text-anchor', 'middle')
+          .attr('font-family', FONT_FAMILY)
+          .text(groupName);
+      }
+    }
+  }
 }
 
 // ============================================================

package/src/graph/flowchart-parser.ts

@@ -90,10 +90,6 @@ function parseNodeRef(
  */
 function splitArrows(line: string): string[] {
   const segments: string[] = [];
-  // Match: optional `-label(color)->` or just `->`
-  // We scan left to right looking for `->` and work backwards to find the `-` start.
-  const arrowRe = /(?:^|\s)-([^>\s(][^(>]*?)?\s*(?:\(([^)]+)\))?\s*->|(?:^|\s)->/g;
-
   let lastIndex = 0;
   // Simpler approach: find all `->` positions, then determine if there's a label prefix
   const arrowPositions: { start: number; end: number; label?: string; color?: string }[] = [];
@@ -482,3 +478,30 @@ export function looksLikeFlowchart(content: string): boolean {
 
   return shapeNearArrow;
 }
+
+// ============================================================
+// Symbol extraction (for completion API)
+// ============================================================
+
+import type { DiagramSymbols } from '../completion';
+
+// Node ID: identifier at line start followed by a shape delimiter or space (arrow line)
+const NODE_ID_RE = /^([a-zA-Z_][\w-]*)[\s([</{]/;
+
+/**
+ * Extract node IDs (entities) from flowchart document text.
+ * Used by the dgmo completion API for ghost hints and popup completions.
+ */
+export function extractSymbols(docText: string): DiagramSymbols {
+  const entities: string[] = [];
+  let inMetadata = true;
+  for (const rawLine of docText.split('\n')) {
+    const line = rawLine.trim();
+    if (inMetadata && /^[a-z-]+\s*:/i.test(line)) continue;
+    inMetadata = false;
+    if (line.length === 0 || /^\s/.test(rawLine)) continue;
+    const m = NODE_ID_RE.exec(line);
+    if (m && !entities.includes(m[1]!)) entities.push(m[1]!);
+  }
+  return { kind: 'flowchart', entities, keywords: [] };
+}

package/src/graph/flowchart-renderer.ts

@@ -8,7 +8,7 @@ import { FONT_FAMILY } from '../fonts';
 import type { PaletteColors } from '../palettes';
 import { mix } from '../palettes/color-utils';
 import type { ParsedGraph, GraphShape } from './types';
-import type { LayoutResult, LayoutNode, LayoutEdge } from './layout';
+import type { LayoutResult, LayoutNode } from './layout';
 import { parseFlowchart } from './flowchart-parser';
 import { layoutGraph } from './layout';
 
@@ -246,7 +246,6 @@ export function renderFlowchart(
 
   // Center the diagram in the area below the title
   const scaledW = diagramW * scale;
-  const scaledH = diagramH * scale;
   const offsetX = (width - scaledW) / 2;
   const offsetY = titleHeight + DIAGRAM_PADDING;
 

package/src/graph/state-parser.ts

@@ -5,7 +5,6 @@ import { measureIndent, extractColor } from '../utils/parsing';
 import type {
   ParsedGraph,
   GraphNode,
-  GraphEdge,
   GraphGroup,
   GraphDirection,
 } from './types';

package/src/graph/state-renderer.ts

@@ -8,7 +8,7 @@ import { FONT_FAMILY } from '../fonts';
 import type { PaletteColors } from '../palettes';
 import { mix } from '../palettes/color-utils';
 import type { ParsedGraph } from './types';
-import type { LayoutResult, LayoutNode, LayoutEdge } from './layout';
+import type { LayoutResult, LayoutNode } from './layout';
 import { parseState } from './state-parser';
 import { layoutGraph } from './layout';
 
@@ -76,8 +76,6 @@ function selfLoopPath(node: LayoutNode): string {
 // Main renderer
 // ============================================================
 
-type GSelection = d3Selection.Selection<SVGGElement, unknown, null, undefined>;
-
 export function renderState(
   container: HTMLDivElement,
   graph: ParsedGraph,

package/src/index.ts

@@ -361,6 +361,16 @@ export type {
   DecodedDiagramUrl,
 } from './sharing';
 
+// ============================================================
+// Completion (symbol extraction API)
+// ============================================================
+
+export {
+  registerExtractor,
+  extractDiagramSymbols,
+} from './completion';
+export type { DiagramSymbols, ExtractFn } from './completion';
+
 // ============================================================
 // Branding
 // ============================================================

package/src/infra/compute.ts

@@ -22,8 +22,6 @@ import type {
   InfraAvailabilityPercentiles,
   InfraProperty,
 } from './types';
-import { INFRA_BEHAVIOR_KEYS } from './types';
-
 // ============================================================
 // Helpers
 // ============================================================
@@ -71,11 +69,6 @@ function serverlessCapacity(node: InfraNode): number {
   return concurrency / (durationMs / 1000);
 }
 
-/** Backward-compatible helper used by overload detection. */
-function getInstances(node: InfraNode): number {
-  return getInstanceRange(node).min;
-}
-
 /** Compute dynamic instance count based on load and max-rps. */
 function computeDynamicInstances(node: InfraNode, computedRps: number): number {
   const { min, max } = getInstanceRange(node);

package/src/infra/layout.ts

@@ -9,8 +9,6 @@ import dagre from '@dagrejs/dagre';
 import type {
   ComputedInfraModel,
   ComputedInfraNode,
-  ComputedInfraEdge,
-  InfraGroup,
 } from './types';
 
 // ============================================================
@@ -73,6 +71,7 @@ export interface InfraLayoutResult {
   groups: InfraLayoutGroup[];
   /** Diagram-level options (e.g., default-latency-ms, default-uptime). */
   options: Record<string, string>;
+  direction: 'LR' | 'TB';
   width: number;
   height: number;
 }
@@ -110,12 +109,12 @@ const DISPLAY_KEYS = new Set([
 
 /** Display names for width estimation. */
 const DISPLAY_NAMES: Record<string, string> = {
-  'cache-hit': 'cache hit', 'firewall-block': 'fw block',
+  'cache-hit': 'cache hit', 'firewall-block': 'firewall block',
   'ratelimit-rps': 'rate limit RPS', 'latency-ms': 'latency', 'uptime': 'uptime',
   'instances': 'instances', 'max-rps': 'max RPS',
-  'cb-error-threshold': 'CB error', 'cb-latency-threshold-ms': 'CB latency',
+  'cb-error-threshold': 'CB error threshold', 'cb-latency-threshold-ms': 'CB latency threshold',
   'concurrency': 'concurrency', 'duration-ms': 'duration', 'cold-start-ms': 'cold start',
-  'buffer': 'buffer', 'drain-rate': 'drain', 'retention-hours': 'retention', 'partitions': 'partitions',
+  'buffer': 'buffer', 'drain-rate': 'drain rate', 'retention-hours': 'retention', 'partitions': 'partitions',
 };
 
 function countDisplayProps(node: ComputedInfraNode, expanded: boolean, options?: Record<string, string>): number {
@@ -356,18 +355,20 @@ function formatUptime(fraction: number): string {
 // Group separation pass
 // ============================================================
 
-const GROUP_GAP = 24; // min clear gap between group boxes — matches GROUP_HEADER_HEIGHT
+const GROUP_GAP = GROUP_PADDING * 2 + GROUP_HEADER_HEIGHT; // min clear gap between group boxes
 
 export function separateGroups(
   groups: InfraLayoutGroup[],
   nodes: InfraLayoutNode[],
   isLR: boolean,
   maxIterations = 20,
-): void {
+): Map<string, { dx: number; dy: number }> {
   // Symmetric 2D rectangle intersection — no sorting needed, handles all
   // relative positions correctly, stable after mid-pass shifts.
   // Endpoint edge routing is not affected: renderer.ts recomputes border
   // connection points from node x/y at render time via nodeBorderPoint().
+  const groupDeltas = new Map<string, { dx: number; dy: number }>();
+  let converged = false;
   for (let iter = 0; iter < maxIterations; iter++) {
     let anyOverlap = false;
     for (let i = 0; i < groups.length; i++) {
@@ -398,6 +399,11 @@ export function separateGroups(
         if (isLR) groupToShift.y += shift;
         else groupToShift.x += shift;
 
+        // Accumulate the total delta for this group (used by fixEdgeWaypoints)
+        const prev = groupDeltas.get(groupToShift.id) ?? { dx: 0, dy: 0 };
+        if (isLR) groupDeltas.set(groupToShift.id, { dx: prev.dx, dy: prev.dy + shift });
+        else groupDeltas.set(groupToShift.id, { dx: prev.dx + shift, dy: prev.dy });
+
         for (const node of nodes) {
           if (node.groupId === groupToShift.id) {
             if (isLR) node.y += shift;
@@ -406,7 +412,44 @@ export function separateGroups(
         }
       }
     }
-    if (!anyOverlap) break;
+    if (!anyOverlap) { converged = true; break; }
+  }
+  if (!converged && maxIterations > 0) {
+    console.warn(`separateGroups: hit maxIterations (${maxIterations}) without fully resolving all group overlaps`);
+  }
+  return groupDeltas;
+}
+
+export function fixEdgeWaypoints(
+  edges: InfraLayoutEdge[],
+  nodes: InfraLayoutNode[],
+  groupDeltas: Map<string, { dx: number; dy: number }>,
+): void {
+  if (groupDeltas.size === 0) return;
+  const nodeToGroup = new Map<string, string | null>();
+  for (const node of nodes) nodeToGroup.set(node.id, node.groupId);
+
+  for (const edge of edges) {
+    const srcGroup = nodeToGroup.get(edge.sourceId) ?? null;
+    // Group-targeting edges (targetId is a group ID, not a node) return undefined from the map → null →
+    // treated as "ungrouped target", which is the correct approximation.
+    const tgtGroup = nodeToGroup.get(edge.targetId) ?? null;
+    const srcDelta = srcGroup ? groupDeltas.get(srcGroup) : undefined;
+    const tgtDelta = tgtGroup ? groupDeltas.get(tgtGroup) : undefined;
+
+    if (!srcDelta && !tgtDelta) continue; // neither side shifted
+
+    if (srcDelta && tgtDelta && srcGroup !== tgtGroup) {
+      // both sides in different shifted groups — discard, renderer draws a straight line
+      edge.points = [];
+      continue;
+    }
+
+    const delta = srcDelta ?? tgtDelta!;
+    for (const pt of edge.points) {
+      pt.x += delta.dx;
+      pt.y += delta.dy;
+    }
   }
 }
 
@@ -416,15 +459,16 @@ export function separateGroups(
 
 export function layoutInfra(computed: ComputedInfraModel, expandedNodeIds?: Set<string> | null, collapsedNodes?: Set<string> | null): InfraLayoutResult {
   if (computed.nodes.length === 0) {
-    return { nodes: [], edges: [], groups: [], options: {}, width: 0, height: 0 };
+    return { nodes: [], edges: [], groups: [], options: {}, direction: computed.direction, width: 0, height: 0 };
   }
 
+  const isLR = computed.direction !== 'TB';
   const g = new dagre.graphlib.Graph();
   g.setGraph({
     rankdir: computed.direction === 'TB' ? 'TB' : 'LR',
-    nodesep: 50,
-    ranksep: 100,
-    edgesep: 20,
+    nodesep: isLR ? 70 : 60,
+    ranksep: isLR ? 150 : 120,
+    edgesep: 30,
   });
   g.setDefaultEdgeLabel(() => ({}));
 
@@ -436,7 +480,6 @@ export function layoutInfra(computed: ComputedInfraModel, expandedNodeIds?: Set<
 
   // Extra space dagre must reserve for the group bounding box
   const GROUP_INFLATE = GROUP_PADDING * 2 + GROUP_HEADER_HEIGHT;
-  const isLR = computed.direction !== 'TB';
 
   // Add nodes — inflate grouped nodes so dagre accounts for group boxes
   const widthMap = new Map<string, number>();
@@ -591,8 +634,9 @@ export function layoutInfra(computed: ComputedInfraModel, expandedNodeIds?: Set<
     };
   });
 
-  // Separate overlapping groups (post-layout pass)
-  separateGroups(layoutGroups, layoutNodes, isLR);
+  // Separate overlapping groups (post-layout pass) and fix stale edge waypoints
+  const groupDeltas = separateGroups(layoutGroups, layoutNodes, isLR);
+  fixEdgeWaypoints(layoutEdges, layoutNodes, groupDeltas);
 
   // Compute total dimensions
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
@@ -657,6 +701,7 @@ export function layoutInfra(computed: ComputedInfraModel, expandedNodeIds?: Set<
     edges: layoutEdges,
     groups: layoutGroups,
     options: computed.options,
+    direction: computed.direction,
     width: totalWidth,
     height: totalHeight,
   };

package/src/infra/parser.ts

@@ -11,11 +11,8 @@ import { measureIndent } from '../utils/parsing';
 import type {
   ParsedInfra,
   InfraNode,
-  InfraEdge,
   InfraGroup,
   InfraTagGroup,
-  InfraTagValue,
-  InfraProperty,
 } from './types';
 import { INFRA_BEHAVIOR_KEYS, EDGE_ONLY_KEYS } from './types';
 
@@ -116,7 +113,6 @@ export function parseInfra(content: string): ParsedInfra {
   };
 
   const nodeMap = new Map<string, InfraNode>();
-  const edgeNodeId = 'edge';
 
   const setError = (line: number, message: string) => {
     const diag = makeDgmoError(line, message);
@@ -573,3 +569,49 @@ export function parseInfra(content: string): ParsedInfra {
 
   return result;
 }
+
+// ============================================================
+// Symbol extraction (for completion API)
+// ============================================================
+
+import type { DiagramSymbols } from '../completion';
+
+/**
+ * Extract component names (entities) from infra document text.
+ * Used by the dgmo completion API for ghost hints and popup completions.
+ */
+export function extractSymbols(docText: string): DiagramSymbols {
+  const entities: string[] = [];
+  let inMetadata = true;
+  let inTagGroup = false;
+  for (const rawLine of docText.split('\n')) {
+    const line = rawLine.trim();
+    if (line.length === 0) continue;
+    const indented = /^\s/.test(rawLine);
+
+    // Metadata phase: skip until first non-metadata root-level line.
+    // All lines (including indented) are skipped while inMetadata = true.
+    if (inMetadata) {
+      if (!indented && !/^[a-z-]+\s*:/i.test(line)) inMetadata = false;
+      else continue;
+    }
+
+    if (!indented) {
+      // Root-level: tag group declaration, group header, or component
+      if (/^tag\s*:/i.test(line)) { inTagGroup = true; continue; }
+      inTagGroup = false;
+      if (/^\[/.test(line)) continue; // group header
+      const m = COMPONENT_RE.exec(line);
+      if (m && !entities.includes(m[1]!)) entities.push(m[1]!);
+    } else {
+      // Indented: skip tag values, connections, and properties; extract grouped components
+      if (inTagGroup) continue;
+      if (/^->/.test(line)) continue; // simple connection
+      if (/^-[^>]+-?>/.test(line)) continue; // labeled connection
+      if (/^\w[\w-]*\s*:/.test(line)) continue; // property (key: value)
+      const m = COMPONENT_RE.exec(line);
+      if (m && !entities.includes(m[1]!)) entities.push(m[1]!);
+    }
+  }
+  return { kind: 'infra', entities, keywords: [] };
+}