Symptom

The diagram__live-overlay screenshot scenario showed the dark diagram canvas panel meeting the surrounding surface with no border, no consistent outer inset, and node-list content visually colliding with the canvas area. The audit recorded the node list and diagram panel as an unresolved visual seam.

Root cause

Two related gaps:

1. DiagramOverlaySurface in Scenarios.kt used a flat Column layout that stacked the title and dark panel vertically, with node rows placed inside the dark panel. This made the structural split between “node list” and “diagram canvas” invisible — there was no left/right division, no seam separator, and no framing border.

2. The production DiagramScreen’s SVG canvas Box used Modifier.fillMaxSize() with no border or outer inset, so the canvas extended to all four screen edges without any framing.

Fix

• Scenarios.kt DiagramOverlaySurface: restructured to a Row split layout with a left node-list panel (55%, PADDING_LARGE outer inset, SPACING_SMALL gap from seam) and a right diagram-canvas panel (45%, PADDING_LARGE outer inset). A 1dp outlineVariant Box acts as the seam divider between the panels. The canvas panel also gets an outlineVariant border for a framed appearance.
• DiagramScreen.kt canvas Row: wrapped with padding(PADDING_LARGE) and the canvas Box gets a border(BORDER_THIN, outlineVariant, RoundedCornerShape(CORNER_RADIUS_SMALL)) to frame the SVG rendering area.

Prevention

• Screenshot scenario mocks that place content inside a placeholder panel mask the real structural split. Keep node-list content and canvas placeholder in separate layout children so panel seams are explicit in the PNG.
• When a full-screen composable has a visually dark content area (SVG, camera feed, etc.), add an outlineVariant border around it during initial implementation so the framing convention is set from the start.