@diagrammo/dgmo 0.5.3 → 0.5.4

package/src/infra/renderer.ts

@@ -11,7 +11,7 @@ import type { ParsedInfra, InfraTagGroup } from './types';
 import { resolveColor } from '../colors';
 import type { ComputedInfraModel } from './types';
 import type { InfraLayoutResult, InfraLayoutNode, InfraLayoutEdge, InfraLayoutGroup } from './layout';
-import { inferRoles, collectDiagramRoles } from './roles';
+import { inferRoles, collectDiagramRoles, collectFanoutSourceIds, FANOUT_ROLE } from './roles';
 import type { InfraRole } from './roles';
 import { parseInfra } from './parser';
 import { computeInfra } from './compute';
@@ -52,6 +52,9 @@ const LEGEND_ENTRY_DOT_GAP = 4;
 const LEGEND_ENTRY_TRAIL = 8;
 const LEGEND_GROUP_GAP = 12;
 const LEGEND_FIXED_GAP = 16; // gap between fixed legend and scaled diagram
+const SPEED_BADGE_H_PAD = 5; // horizontal padding inside active speed badge
+const SPEED_BADGE_V_PAD = 3; // vertical padding inside active speed badge
+const SPEED_BADGE_GAP = 6;   // gap between speed option slots
 
 // Health colors (from UX spec)
 const COLOR_HEALTHY = '#22c55e';
@@ -59,6 +62,33 @@ const COLOR_WARNING = '#eab308';
 const COLOR_OVERLOADED = '#ef4444';
 const COLOR_NEUTRAL = '#94a3b8';
 
+/** SLO thresholds resolved for a single node (chart-level + per-node override). */
+interface NodeSlo {
+  availThreshold: number | null; // fraction e.g. 0.999
+  latencyP90: number | null;     // ms e.g. 200
+  warningMargin: number;         // fraction e.g. 0.05
+}
+
+/** Resolve effective SLO for a node: per-node properties take precedence over chart-level options.
+ *  Returns null if neither availThreshold nor latencyP90 is declared. */
+function resolveNodeSlo(node: InfraLayoutNode, diagramOptions: Record<string, string>): NodeSlo | null {
+  const nodeProp = (key: string) => node.properties.find((p) => p.key === key);
+
+  const availRaw = nodeProp('slo-availability')?.value ?? diagramOptions['slo-availability'];
+  const latencyRaw = nodeProp('slo-p90-latency-ms')?.value ?? diagramOptions['slo-p90-latency-ms'];
+  const marginRaw = nodeProp('slo-warning-margin')?.value ?? diagramOptions['slo-warning-margin'];
+
+  const availParsed = availRaw != null ? parseFloat(String(availRaw).replace('%', '')) / 100 : NaN;
+  const availThreshold = !isNaN(availParsed) ? availParsed : null;
+  const latencyParsed = latencyRaw != null ? parseFloat(String(latencyRaw)) : NaN;
+  const latencyP90 = !isNaN(latencyParsed) ? latencyParsed : null;
+  const marginParsed = marginRaw != null ? parseFloat(String(marginRaw).replace('%', '')) / 100 : NaN;
+  const warningMargin = !isNaN(marginParsed) ? marginParsed : 0.05;
+
+  if (availThreshold == null && latencyP90 == null) return null;
+  return { availThreshold, latencyP90, warningMargin };
+}
+
 /** A row in the node card body. `inverted` renders as a colored pill with light text. */
 interface NodeRow {
   key: string;
@@ -162,26 +192,34 @@ function isWarning(node: InfraLayoutNode): boolean {
 // Helpers
 // ============================================================
 
-/** Display names for behavior property keys. */
+/** Display names for behavior property keys. Aligned with DSL property names. */
 const PROP_DISPLAY: Record<string, string> = {
   'cache-hit': 'cache hit',
-  'firewall-block': 'fw block',
-  'ratelimit-rps': 'rate limit',
+  'firewall-block': 'firewall block',
+  'ratelimit-rps': 'rate limit RPS',
   'latency-ms': 'latency',
   'uptime': 'uptime',
   'instances': 'instances',
-  'max-rps': 'capacity',
-  'cb-error-threshold': 'CB error',
-  'cb-latency-threshold-ms': 'CB latency',
+  'max-rps': 'max RPS',
+  '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',
+  'drain-rate': 'drain rate',
   'retention-hours': 'retention',
   'partitions': 'partitions',
 };
 
+const DESC_MAX_CHARS = 120;
+
+/** Truncate description text to DESC_MAX_CHARS. */
+function truncateDesc(text: string): string {
+  if (text.length <= DESC_MAX_CHARS) return text;
+  return text.slice(0, DESC_MAX_CHARS - 1) + '…';
+}
+
 /** Keys whose values are RPS counts and should be formatted like RPS. */
 const RPS_FORMAT_KEYS = new Set(['max-rps', 'ratelimit-rps']);
 
@@ -191,8 +229,17 @@ const MS_FORMAT_KEYS = new Set(['latency-ms', 'cb-latency-threshold-ms', 'durati
 /** Keys whose values are percentages and should show the "%" suffix. */
 const PCT_FORMAT_KEYS = new Set(['cache-hit', 'firewall-block', 'uptime', 'cb-error-threshold']);
 
+/** Compute SLO color for a p90 latency value against the configured threshold.
+ *  Callers must guard slo.latencyP90 != null before calling. */
+function sloLatencyColor(p90: number, slo: NodeSlo): string {
+  const t = slo.latencyP90 ?? 0;
+  if (t === 0) return COLOR_HEALTHY; // no meaningful threshold — treat as healthy
+  const m = slo.warningMargin;
+  return p90 > t ? COLOR_OVERLOADED : p90 > t * (1 - m) ? COLOR_WARNING : COLOR_HEALTHY;
+}
+
 /** Computed metric rows (latency percentiles, uptime, availability, CB state) shown after declared props. */
-function getComputedRows(node: InfraLayoutNode, expanded: boolean): ComputedRow[] {
+function getComputedRows(node: InfraLayoutNode, expanded: boolean, slo?: NodeSlo | null): ComputedRow[] {
   const rows: ComputedRow[] = [];
 
   // Serverless instances: demand vs concurrency limit
@@ -211,9 +258,28 @@ function getComputedRows(node: InfraLayoutNode, expanded: boolean): ComputedRow[
   if (p.p50 > 0 || p.p90 > 0 || p.p99 > 0) {
     if (expanded) {
       rows.push({ key: 'p50', value: formatMsShort(p.p50) });
-      rows.push({ key: 'p90', value: formatMsShort(p.p90) });
+      if (slo?.latencyP90 != null) {
+        const color = sloLatencyColor(p.p90, slo);
+        const p90Value = color !== COLOR_HEALTHY
+          ? `${formatMsShort(p.p90)} / ${formatMsShort(slo.latencyP90!)}`
+          : formatMsShort(p.p90);
+        rows.push({ key: 'p90', value: p90Value, color, inverted: color !== COLOR_HEALTHY });
+      } else {
+        rows.push({ key: 'p90', value: formatMsShort(p.p90) });
+      }
+      rows.push({ key: 'p99', value: formatMsShort(p.p99) });
+    } else if (p.p90 > 0) {
+      // Collapsed: show p90 (with SLO color if configured) instead of p99
+      if (slo?.latencyP90 != null) {
+        const color = sloLatencyColor(p.p90, slo);
+        const p90Value = color !== COLOR_HEALTHY
+          ? `${formatMsShort(p.p90)} / ${formatMsShort(slo.latencyP90!)}`
+          : formatMsShort(p.p90);
+        rows.push({ key: 'p90', value: p90Value, color, inverted: color !== COLOR_HEALTHY });
+      } else {
+        rows.push({ key: 'p90', value: formatMsShort(p.p90) });
+      }
     }
-    rows.push({ key: 'p99', value: formatMsShort(p.p99) });
   }
   // Computed (cumulative) uptime — only show when it differs from the declared node uptime.
   // On the edge node this is the system-wide uptime; on other nodes it's the path product.
@@ -227,10 +293,19 @@ function getComputedRows(node: InfraLayoutNode, expanded: boolean): ComputedRow[
     }
   }
   if (node.computedAvailability < 1) {
-    const color = node.computedAvailability < 0.95 ? COLOR_OVERLOADED
-      : node.computedAvailability < 0.99 ? COLOR_WARNING
-      : undefined;
-    rows.push({ key: 'availability', value: formatUptimeShort(node.computedAvailability), color, inverted: color != null });
+    let color: string | undefined;
+    if (slo?.availThreshold != null) {
+      const t = slo.availThreshold;
+      const m = slo.warningMargin;
+      if (node.computedAvailability < t) color = COLOR_OVERLOADED;
+      else if (node.computedAvailability < Math.min(1, t + m)) color = COLOR_WARNING;
+      else color = COLOR_HEALTHY;
+    } else {
+      color = node.computedAvailability < 0.95 ? COLOR_OVERLOADED
+        : node.computedAvailability < 0.99 ? COLOR_WARNING
+        : undefined;
+    }
+    rows.push({ key: 'availability', value: formatUptimeShort(node.computedAvailability), color, inverted: color != null && color !== COLOR_HEALTHY });
   }
   // Circuit breaker state — show when a CB is configured and open
   if (node.computedCbState === 'open') {
@@ -326,6 +401,7 @@ function getDisplayProps(node: InfraLayoutNode, expanded: boolean, diagramOption
   return rows;
 }
 
+
 function formatRps(rps: number): string {
   if (rps >= 1000) return `${(rps / 1000).toFixed(1)}k rps`;
   return `${Math.round(rps)} rps`;
@@ -338,8 +414,11 @@ function formatRpsShort(rps: number): string {
 }
 
 /** Compute the worst severity across all row-producing conditions for a node.
- *  Returns 'overloaded' (red), 'warning' (yellow), or 'normal'. */
-function worstNodeSeverity(node: InfraLayoutNode): 'overloaded' | 'warning' | 'normal' {
+ *  Returns 'overloaded' (red), 'warning' (yellow), 'healthy' (green), or 'normal'. */
+function worstNodeSeverity(
+  node: InfraLayoutNode,
+  slo?: NodeSlo | null,
+): 'overloaded' | 'warning' | 'healthy' | 'normal' {
   let worst: 'overloaded' | 'warning' | 'normal' = 'normal';
   const upgrade = (s: 'overloaded' | 'warning') => {
     if (s === 'overloaded') worst = 'overloaded';
@@ -355,9 +434,27 @@ function worstNodeSeverity(node: InfraLayoutNode): 'overloaded' | 'warning' | 'n
   if (node.rateLimited) upgrade('warning');
   if (isWarning(node)) upgrade('warning');
 
-  // Availability
-  if (node.computedAvailability < 0.95) upgrade('overloaded');
-  else if (node.computedAvailability < 0.99) upgrade('warning');
+  // Availability — SLO threshold if declared, otherwise hardcoded fallback
+  if (slo?.availThreshold != null) {
+    const t = slo.availThreshold;
+    const m = slo.warningMargin;
+    if (node.computedAvailability < t) upgrade('overloaded');
+    else if (node.computedAvailability < Math.min(1, t + m)) upgrade('warning');
+    // else: in green zone — handled after loop
+  } else {
+    if (node.computedAvailability < 0.95) upgrade('overloaded');
+    else if (node.computedAvailability < 0.99) upgrade('warning');
+  }
+
+  // p90 Latency SLO
+  if (slo?.latencyP90 != null) {
+    const t = slo.latencyP90;
+    const m = slo.warningMargin;
+    const p90 = node.computedLatencyPercentiles.p90;
+    if (p90 > t) upgrade('overloaded');
+    else if (p90 > t * (1 - m)) upgrade('warning');
+    // else: in green zone
+  }
 
   // Circuit breaker open
   if (node.computedCbState === 'open') upgrade('overloaded');
@@ -382,15 +479,28 @@ function worstNodeSeverity(node: InfraLayoutNode): 'overloaded' | 'warning' | 'n
     }
   }
 
+  // Healthy: SLO declared AND all checks are in the green zone
+  if (worst === 'normal' && slo != null) {
+    const availGreen = slo.availThreshold == null ||
+      node.computedAvailability >= Math.min(1, slo.availThreshold + slo.warningMargin);
+    const latencyGreen = slo.latencyP90 == null ||
+      node.computedLatencyPercentiles.p90 <= slo.latencyP90 * (1 - slo.warningMargin);
+    if (availGreen && latencyGreen) return 'healthy';
+  }
+
   return worst;
 }
 
-function nodeColor(node: InfraLayoutNode, palette: PaletteColors, isDark: boolean): {
+function nodeColor(
+  _node: InfraLayoutNode,
+  palette: PaletteColors,
+  isDark: boolean,
+  severity: ReturnType<typeof worstNodeSeverity>,
+): {
   fill: string;
   stroke: string;
   textFill: string;
 } {
-  const severity = worstNodeSeverity(node);
   if (severity === 'overloaded') {
     return {
       fill: mix(palette.bg, COLOR_OVERLOADED, isDark ? 80 : 92),
@@ -405,6 +515,13 @@ function nodeColor(node: InfraLayoutNode, palette: PaletteColors, isDark: boolea
       textFill: palette.text,
     };
   }
+  if (severity === 'healthy') {
+    return {
+      fill: mix(palette.bg, COLOR_HEALTHY, isDark ? 85 : 93),
+      stroke: COLOR_HEALTHY,
+      textFill: palette.text,
+    };
+  }
   return {
     fill: isDark ? mix(palette.bg, palette.text, 90) : mix(palette.bg, palette.text, 95),
     stroke: isDark ? mix(palette.text, palette.bg, 60) : mix(palette.text, palette.bg, 40),
@@ -629,16 +746,20 @@ function renderNodes(
   palette: PaletteColors,
   isDark: boolean,
   animate: boolean,
-  selectedNodeId?: string | null,
+  expandedNodeIds?: Set<string> | null,
   activeGroup?: string | null,
   diagramOptions?: Record<string, string>,
   collapsedNodes?: Set<string> | null,
   tagGroups?: InfraTagGroup[],
+  fanoutSourceIds?: Set<string>,
+  scaledGroupIds?: Set<string>,
 ) {
   const mutedColor = palette.textMuted;
 
   for (const node of nodes) {
-    let { fill, stroke, textFill } = nodeColor(node, palette, isDark);
+    const slo = (!node.isEdge && diagramOptions) ? resolveNodeSlo(node, diagramOptions) : null;
+    const severity = worstNodeSeverity(node, slo);
+    let { fill, stroke, textFill } = nodeColor(node, palette, isDark, severity);
 
     // When a tag legend is active, override border color with tag color
     if (activeGroup && tagGroups && !node.isEdge) {
@@ -652,7 +773,6 @@ function renderNodes(
     if (animate && node.isEdge) {
       cls += ' infra-node-edge-throb';
     } else if (animate && !node.isEdge) {
-      const severity = worstNodeSeverity(node);
       if (node.computedCbState === 'open') cls += ' infra-node-cb-open';
       else if (severity === 'overloaded') cls += ' infra-node-overload';
       else if (severity === 'warning') cls += ' infra-node-warning';
@@ -680,12 +800,15 @@ function renderNodes(
       for (const role of roles) {
         g.attr(`data-role-${role.name.toLowerCase().replace(/\s+/g, '-')}`, 'true');
       }
+      if (fanoutSourceIds?.has(node.id)) {
+        g.attr('data-role-fan-out', 'true');
+      }
     }
 
     const x = node.x - node.width / 2;
     const y = node.y - node.height / 2;
     const isCollapsedGroup = node.id.startsWith('[');
-    const strokeWidth = worstNodeSeverity(node) !== 'normal' ? OVERLOAD_STROKE_WIDTH : NODE_STROKE_WIDTH;
+    const strokeWidth = severity !== 'normal' ? OVERLOAD_STROKE_WIDTH : NODE_STROKE_WIDTH;
 
     // Node rect
     g.append('rect')
@@ -726,15 +849,32 @@ function renderNodes(
         .text('▼');
     }
     if (!isNodeCollapsed) {
-      const expanded = node.id === selectedNodeId;
+      const expanded = expandedNodeIds?.has(node.id) ?? false;
+
+      // Description subtitle — shown below label only when node is selected
+      const descH = (expanded && node.description && !node.isEdge) ? META_LINE_HEIGHT : 0;
+      if (descH > 0 && node.description) {
+        const descTruncated = truncateDesc(node.description);
+        const isTruncated = descTruncated !== node.description;
+        const textEl = g.append('text')
+          .attr('x', node.x)
+          .attr('y', y + NODE_HEADER_HEIGHT + META_LINE_HEIGHT / 2 + META_FONT_SIZE * 0.35)
+          .attr('text-anchor', 'middle')
+          .attr('font-family', FONT_FAMILY)
+          .attr('font-size', META_FONT_SIZE)
+          .attr('fill', mutedColor)
+          .text(descTruncated);
+        if (isTruncated) textEl.append('title').text(node.description);
+      }
+
       // Declared properties only shown when node is selected (expanded)
       const displayProps = (!node.isEdge && expanded) ? getDisplayProps(node, expanded, diagramOptions) : [];
-      const computedRows = getComputedRows(node, expanded);
+      const computedRows = getComputedRows(node, expanded, slo);
       const hasContent = displayProps.length > 0 || computedRows.length > 0 || node.computedRps > 0;
 
       if (hasContent) {
         // Separator line between header and body
-        const sepY = y + NODE_HEADER_HEIGHT;
+        const sepY = y + NODE_HEADER_HEIGHT + descH;
         g.append('line')
           .attr('x1', x)
           .attr('y1', sepY)
@@ -904,7 +1044,9 @@ function renderNodes(
 
       // Instance badge — clickable for interactive adjustment (not for edge or serverless nodes)
       // Serverless nodes show instances in a computed row instead (demand / concurrency).
-      if (!node.isEdge && node.computedConcurrentInvocations === 0 && node.computedInstances > 1) {
+      // Nodes inside a scaled group suppress their badge — the group header already shows Nx.
+      const inScaledGroup = node.groupId != null && (scaledGroupIds?.has(node.groupId) ?? false);
+      if (!node.isEdge && node.computedConcurrentInvocations === 0 && node.computedInstances > 1 && !inScaledGroup) {
         const badgeText = `${node.computedInstances}x`;
         g.append('text')
           .attr('x', x + node.width - 6)
@@ -1109,11 +1251,15 @@ export function computeInfraLegendGroups(
   nodes: InfraLayoutNode[],
   tagGroups: InfraTagGroup[],
   palette: PaletteColors,
+  edges?: InfraLayoutEdge[],
 ): InfraLegendGroup[] {
   const groups: InfraLegendGroup[] = [];
 
-  // Capabilities group (from inferred roles)
+  // Capabilities group (from inferred roles + fanout edges)
   const roles = collectDiagramRoles(nodes.filter((n) => !n.isEdge).map((n) => n.properties));
+  if (edges && collectFanoutSourceIds(edges).size > 0) {
+    roles.push(FANOUT_ROLE);
+  }
   if (roles.length > 0) {
     const entries = roles.map((r) => ({
       value: r.name,
@@ -1174,7 +1320,7 @@ function computePlaybackWidth(playback: InfraPlaybackState | undefined): number
   let entriesW = 8; // gap after pill
   entriesW += LEGEND_PILL_FONT_SIZE * 0.8 + 6; // play/pause
   for (const s of playback.speedOptions) {
-    entriesW += `${s}x`.length * LEGEND_ENTRY_FONT_W + 6;
+    entriesW += `${s}x`.length * LEGEND_ENTRY_FONT_W + SPEED_BADGE_H_PAD * 2 + SPEED_BADGE_GAP;
   }
   return LEGEND_CAPSULE_PAD * 2 + pillWidth + entriesW;
 }
@@ -1380,17 +1526,35 @@ function renderLegend(
       for (const s of playback.speedOptions) {
         const label = `${s}x`;
         const isActive = playback.speed === s;
-        pbG.append('text')
-          .attr('x', entryX).attr('y', entryY)
+        const slotW = label.length * LEGEND_ENTRY_FONT_W + SPEED_BADGE_H_PAD * 2;
+        const badgeH = LEGEND_ENTRY_FONT_SIZE + SPEED_BADGE_V_PAD * 2;
+        const badgeY = (LEGEND_HEIGHT - badgeH) / 2;
+
+        // Wrap in <g> with data attrs so a single element carries the action,
+        // and both rect and text inherit the hit target cleanly.
+        const speedG = pbG.append('g')
+          .attr('data-playback-action', 'set-speed')
+          .attr('data-playback-value', String(s))
+          .style('cursor', 'pointer');
+
+        // Badge rect: filled for active, transparent hit-target for inactive
+        speedG.append('rect')
+          .attr('x', entryX)
+          .attr('y', badgeY)
+          .attr('width', slotW)
+          .attr('height', badgeH)
+          .attr('rx', badgeH / 2)
+          .attr('fill', isActive ? palette.primary : 'transparent');
+
+        speedG.append('text')
+          .attr('x', entryX + slotW / 2).attr('y', entryY)
           .attr('font-family', FONT_FAMILY)
           .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
           .attr('font-weight', isActive ? '600' : '400')
-          .attr('fill', isActive ? palette.primary : palette.textMuted)
-          .attr('data-playback-action', 'set-speed')
-          .attr('data-playback-value', String(s))
-          .style('cursor', 'pointer')
+          .attr('fill', isActive ? palette.bg : palette.textMuted)
+          .attr('text-anchor', 'middle')
           .text(label);
-        entryX += label.length * LEGEND_ENTRY_FONT_W + 6;
+        entryX += slotW + SPEED_BADGE_GAP;
       }
     }
 
@@ -1421,7 +1585,7 @@ export function renderInfra(
   activeGroup?: string | null,
   animate?: boolean,
   playback?: InfraPlaybackState | null,
-  selectedNodeId?: string | null,
+  expandedNodeIds?: Set<string> | null,
   exportMode?: boolean,
   collapsedNodes?: Set<string> | null,
 ) {
@@ -1429,7 +1593,7 @@ export function renderInfra(
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
   // Build legend groups
-  const legendGroups = computeInfraLegendGroups(layout.nodes, tagGroups ?? [], palette);
+  const legendGroups = computeInfraLegendGroups(layout.nodes, tagGroups ?? [], palette, layout.edges);
   const hasLegend = legendGroups.length > 0 || !!playback;
   // In app mode (not export), legend is rendered as a separate fixed-size SVG
   const fixedLegend = !exportMode && hasLegend;
@@ -1514,7 +1678,17 @@ export function renderInfra(
   // Render layers: groups (back), edge paths, nodes, reject particles, edge labels (front)
   renderGroups(svg, layout.groups, palette, isDark);
   renderEdgePaths(svg, layout.edges, layout.nodes, palette, isDark, shouldAnimate);
-  renderNodes(svg, layout.nodes, palette, isDark, shouldAnimate, selectedNodeId, activeGroup, layout.options, collapsedNodes, tagGroups ?? []);
+  const fanoutSourceIds = collectFanoutSourceIds(layout.edges);
+  const scaledGroupIds = new Set<string>(
+    layout.groups
+      .filter((g) => {
+        const gi = typeof g.instances === 'number' ? g.instances
+          : typeof g.instances === 'string' ? parseInt(String(g.instances), 10) || 0 : 0;
+        return gi > 1;
+      })
+      .map((g) => g.id)
+  );
+  renderNodes(svg, layout.nodes, palette, isDark, shouldAnimate, expandedNodeIds, activeGroup, layout.options, collapsedNodes, tagGroups ?? [], fanoutSourceIds, scaledGroupIds);
   if (shouldAnimate) {
     renderRejectParticles(svg, layout.nodes);
   }

package/src/infra/roles.ts

@@ -6,6 +6,7 @@
 // Each role maps to a specific color for badge rendering.
 
 import type { InfraProperty } from './types';
+import type { InfraLayoutEdge } from './layout';
 
 export interface InfraRole {
   name: string;
@@ -40,6 +41,20 @@ export function inferRoles(properties: InfraProperty[]): InfraRole[] {
   return roles;
 }
 
+/** The Fan-Out role, assigned to nodes with at least one outgoing fanout edge. */
+export const FANOUT_ROLE: InfraRole = { name: 'Fan-Out', color: '#f97316' };
+
+/**
+ * Return the set of sourceIds that have at least one outgoing edge with fanout.
+ */
+export function collectFanoutSourceIds(edges: InfraLayoutEdge[]): Set<string> {
+  const ids = new Set<string>();
+  for (const e of edges) {
+    if (e.fanout != null) ids.add(e.sourceId);
+  }
+  return ids;
+}
+
 /**
  * Collect all unique roles present in the diagram (for legend).
  */

package/src/infra/types.ts

@@ -41,6 +41,9 @@ export const INFRA_BEHAVIOR_KEYS = new Set<string>([
   'drain-rate',
   'retention-hours',
   'partitions',
+  'slo-availability',
+  'slo-p90-latency-ms',
+  'slo-warning-margin',
 ]);
 
 /** The `rps` key is only valid on the `edge` component. */
@@ -59,6 +62,7 @@ export interface InfraNode {
   groupId: string | null;
   tags: Record<string, string>; // tagGroup -> tagValue
   isEdge: boolean; // true for the `edge` entry-point component
+  description?: string;
   lineNumber: number;
 }
 
@@ -67,6 +71,7 @@ export interface InfraEdge {
   targetId: string;
   label: string;
   split: number | null; // percentage 0-100, or null if not declared
+  fanout: number | null; // request multiplier: target receives inbound * (split/100) * fanout RPS
   lineNumber: number;
 }
 
@@ -172,6 +177,7 @@ export interface ComputedInfraNode {
   };
   properties: InfraProperty[];
   tags: Record<string, string>;
+  description?: string;
   lineNumber: number;
 }
 
@@ -181,6 +187,7 @@ export interface ComputedInfraEdge {
   label: string;
   computedRps: number;
   split: number; // resolved split (always 0-100)
+  fanout: number | null;
   lineNumber: number;
 }
 

package/src/initiative-status/collapse.ts

@@ -0,0 +1,76 @@
+import type { ParsedInitiativeStatus, InitiativeStatus, ISGroup } from './types';
+import { rollUpStatus } from './layout';
+
+// ============================================================
+// CollapseResult — returned by collapseInitiativeStatus
+// ============================================================
+
+export interface CollapseResult {
+  parsed: ParsedInitiativeStatus;
+  collapsedGroupStatuses: Map<string, InitiativeStatus>;
+  originalGroups: ISGroup[];
+}
+
+// ============================================================
+// collapseInitiativeStatus — pure transform
+//
+// Returns a new ParsedInitiativeStatus with:
+//   - Children of collapsed groups removed from nodes
+//   - Edges redirected: source/target pointing to hidden nodes
+//     → point to the group label
+//   - Internal edges (both endpoints in same collapsed group) dropped
+//   - Duplicate edges (same source, target, label) deduplicated
+//     (first occurrence kept)
+//   - Collapsed groups removed from groups[] (layout handles them
+//     as regular nodes)
+//   - collapsedGroupStatuses: worst-case status per collapsed group
+// ============================================================
+
+export function collapseInitiativeStatus(
+  parsed: ParsedInitiativeStatus,
+  collapsedGroups: Set<string>
+): CollapseResult {
+  const originalGroups = parsed.groups;
+
+  if (collapsedGroups.size === 0) {
+    return { parsed, collapsedGroupStatuses: new Map(), originalGroups };
+  }
+
+  // Build node → collapsed group lookup
+  const nodeToGroup = new Map<string, string>();
+  const collapsedGroupStatuses = new Map<string, InitiativeStatus>();
+
+  for (const group of parsed.groups) {
+    if (!collapsedGroups.has(group.label)) continue;
+    const children = group.nodeLabels
+      .map((l) => parsed.nodes.find((n) => n.label === l))
+      .filter((n): n is (typeof parsed.nodes)[0] => n !== undefined);
+    for (const node of children) nodeToGroup.set(node.label, group.label);
+    collapsedGroupStatuses.set(group.label, rollUpStatus(children));
+  }
+
+  // Filter nodes: remove children of collapsed groups
+  const nodes = parsed.nodes.filter((n) => !nodeToGroup.has(n.label));
+
+  // Remap and deduplicate edges
+  const edgeKeys = new Set<string>();
+  const edges: typeof parsed.edges = [];
+  for (const edge of parsed.edges) {
+    const src = nodeToGroup.get(edge.source) ?? edge.source;
+    const tgt = nodeToGroup.get(edge.target) ?? edge.target;
+    if (src === tgt) continue; // internal edge → drop
+    const key = `${src}|${tgt}|${edge.label ?? ''}`;
+    if (edgeKeys.has(key)) continue; // duplicate → drop
+    edgeKeys.add(key);
+    edges.push({ ...edge, source: src, target: tgt });
+  }
+
+  // Keep only expanded groups in groups[]
+  const groups = parsed.groups.filter((g) => !collapsedGroups.has(g.label));
+
+  return {
+    parsed: { ...parsed, nodes, edges, groups },
+    collapsedGroupStatuses,
+    originalGroups,
+  };
+}