@principal-ai/subsystems-react 0.51.3 → 0.52.0

package/src/stories/Subsystem/ComponentGraph/ProposedTrails.stories.tsx

@@ -144,6 +144,26 @@ const trails: SubsystemTrail[] = [
       },
     ],
   },
+  {
+    id: 'wt-planned-seam',
+    title: 'Planned seam (step-proposed)',
+    steps: [
+      {
+        from: 'audit',
+        to: 'cli',
+        mechanism: 'uses',
+        file: 'src/bun/verify-subsystem-component.ts',
+        line: 1,
+        symbol: 'probeCliVersion',
+        // Step-level proposed: BOTH endpoints are real components — the
+        // seam itself is what is planned. The edge label draws dashed on
+        // the canvas; distinct from a proposed endpoint, which dashes the
+        // node instead. Verification skips the step until promoted.
+        proposed: true,
+        annotation: 'The step itself is proposed — edge label is dashed.',
+      },
+    ],
+  },
 ];
 
 function ProposedTrailsDemo() {
@@ -153,7 +173,7 @@ function ProposedTrailsDemo() {
         components={components}
         trails={trails}
         title="proposed-work marker"
-        description="Trails that touch a **proposed** component get their title tinted darkgoldenrod in the flows panel; expand a row and each step onto a proposed component is tinted too (index and title). Nodes for proposed components already draw dashed darkgoldenrod on the canvas."
+        description="Trails that touch a **proposed** component get their title tinted darkgoldenrod in the flows panel; expand a row and each step onto a proposed component is tinted too (index and title). Nodes for proposed components draw dashed darkgoldenrod on the canvas. A step that is itself `proposed` — a planned seam between real components — dashes its **edge label** instead."
       />
     </div>
   );

package/src/subsystem/C4Graph.tsx

@@ -14,6 +14,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import {
   Edge,
+  EdgeProps,
   Handle,
   MarkerType,
   Node,
@@ -25,40 +26,31 @@ import {
   useViewport,
 } from '@xyflow/react';
 import { useTheme } from '@principal-ade/industry-theme';
-import { computeElkLayout } from '../utils/elkLayout';
-import { EDGE_LABEL_FONT_SIZE, EDGE_LABEL_HEIGHT, EDGE_LABEL_WIDTH } from '../utils/edgeLabel';
-import { MECHANISM_COLOR } from './model';
-import { C4NodeCard, NODE_H, NODE_W, nodeSize, nodeStyle } from './C4NodeCard';
+import { computeElkLayout, pointAlongPath, pointsToSmoothPath } from '../utils/elkLayout';
+import { EDGE_LABEL_FONT_SIZE, EDGE_LABEL_HEIGHT, C4_LABEL_WIDTH, estimateEdgeLabelWidth } from '../utils/edgeLabel';
+import { protocolColor } from './c4';
+import { C4NodeCard, NODE_H, NODE_W, nodeSize } from './C4NodeCard';
 import { GRAPH_CANVAS_CLASS, GRAPH_NAV_PROPS, GraphChrome, GraphLayerStyle } from './graphChrome';
-import type { C4Model, C4Node } from './c4';
+import type { C4Element, C4Model } from './c4';
 
 export interface C4GraphProps {
   model: C4Model;
   title?: string;
   onSelectNode?: (id: string | null) => void;
   /**
-   * Extra width / height reserved around each card when laying out, in flow px.
-   * The visible gap between boxes is `2 × gutter` (ELK's `nodeNode` spacing,
-   * plus the frame padding where a frame adds one).
-   *
-   * Above the default 28 the `needs …` gap row was removed, so cards are
-   * shorter and packing them tighter than the spacing they were tuned at makes
-   * them collide. Raise it for a more airy graph.
+   * Breathing room around each card, in flow px, applied as ELK spacing (not by
+   * inflating the node box — that left the edge lines starting short of the
+   * card border). `nodeSpacing` is `2 × gutter`; `edgeNodeSpacing` is `gutter`.
    * @default 28
    */
   gutter?: number;
 }
 
-function edgeColor(mechanism: string | undefined, fallback: string): string {
-  if (!mechanism) return fallback;
-  return (MECHANISM_COLOR as Record<string, string>)[mechanism] ?? fallback;
-}
-
-function C4NodeView(props: NodeProps<Node<{ node: C4Node; selected: boolean }>>) {
-  const { node, selected } = props.data;
+function C4NodeView(props: NodeProps<Node<{ element: C4Element; selected: boolean }>>) {
+  const { element, selected } = props.data;
   return (
     <C4NodeCard
-      node={node}
+      node={element}
       selected={selected}
       handles={
         <>
@@ -73,21 +65,17 @@ function C4NodeView(props: NodeProps<Node<{ node: C4Node; selected: boolean }>>)
 /**
  * Edge-label overlay.
  *
- * Drawn as an HTML layer above the canvas rather than React Flow's built-in
- * edge label, so a C4 line's label reads like the subsystem graph's: an opaque
- * rounded chip in the mechanism colour, monospace text, scaling with zoom.
- *
- * Positions come from ELK's computed label anchors (`edgeLabelPositions`, flow
- * coords); the current viewport converts them to screen space.
+ * Drawn as chips in flow space via `<ViewportPortal>` — React Flow applies the
+ * viewport transform, so the label chip needs no manual zoom/pan math and can
+ * never drift from the edges it sits on. Positions are ELK's computed label
+ * anchors (`edgeLabelPositions`), in flow coordinates.
  */
 function C4EdgeLabels({
   positions,
   edges,
-  muted,
 }: {
   positions: Map<string, { x: number; y: number }>;
   edges: C4Model['edges'];
-  muted: string;
 }) {
   const { theme } = useTheme();
   const viewport = useViewport();
@@ -107,9 +95,7 @@ function C4EdgeLabels({
       {[...positions].map(([id, p]) => {
         const edge = byId.get(id);
         if (!edge) return null;
-        const color = edgeColor(edge.mechanisms[0], muted);
-        // C4 asks the line to name the interaction's protocol; fall back to the
-        // label when a caller supplied none.
+        const color = protocolColor(edge.protocol);
         const text = edge.protocol ?? edge.label;
         return (
           <div
@@ -123,7 +109,7 @@ function C4EdgeLabels({
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              width: EDGE_LABEL_WIDTH,
+              width: estimateEdgeLabelWidth(text),
               height: EDGE_LABEL_HEIGHT,
               boxSizing: 'border-box',
               padding: '7px 8px',
@@ -162,6 +148,30 @@ function C4EdgeLabels({
   );
 }
 
+/**
+ * C4 edge — draws ELK's routed polyline, not React Flow's default bezier.
+ *
+ * The line and the label chip must share one geometry: the chip is placed from
+ * the same `elkPathPoints` this renders. React Flow's built-in edge would curve
+ * between handles while the chip sat on ELK's orthogonal route, which is why
+ * labels read as "off the line".
+ */
+function C4EdgeView({ data, markerEnd }: EdgeProps<Edge<{ path?: string; color?: string }>>) {
+  const path = data?.path ?? '';
+  if (!path) return null;
+  return (
+    <path
+      d={path}
+      fill="none"
+      stroke={data?.color}
+      strokeWidth={1}
+      strokeDasharray="6 4"
+      markerEnd={markerEnd}
+      style={{ pointerEvents: 'none' }}
+    />
+  );
+}
+
 function C4GroupView(props: NodeProps<Node<{ label: string; kind: 'system' | 'container'; color: string }>>) {
   const { theme } = useTheme();
   const color = props.data.color;
@@ -211,6 +221,10 @@ const nodeTypes = {
   'c4-group': C4GroupView,
 };
 
+const edgeTypes = {
+  'c4-edge': C4EdgeView,
+};
+
 function Inner({ model, title, onSelectNode, gutter = 28 }: C4GraphProps) {
   const { theme } = useTheme();
   const { fitView } = useReactFlow();
@@ -238,12 +252,17 @@ function Inner({ model, title, onSelectNode, gutter = 28 }: C4GraphProps) {
     setReady(false);
     setSelectedId(null);
 
-    // Per-kind size, so a square component is laid out as a square. Feeding the
-    // container dimensions for everything would make ELK reserve 250x150 of
-    // space around a 140x140 box and space the component view twice as far
-    // apart as it needs. `gutter` is added here, not passed as node spacing, so
-    // a frame's padding clears the card inside it by the same margin.
-    const rfNodes: Node[] = model.nodes.map((n, i) => {
+    // Draw only the elements for this view. A container diagram shows the
+    // runtime units (containers, externals, people); components belong to the
+    // component view. Components are still carried on the model (see the side
+    // panel), just not drawn here.
+    const inView = (n: C4Element): boolean =>
+      model.view === 'component' ? n.kind !== 'container' : n.kind !== 'component';
+
+    // Layout against the true card size, so ELK's ports sit on the card's
+    // border — an inflated box leaves the line starting short of the card edge.
+    // The `gutter` becomes ELK spacing instead (see `nodeSpacing` below).
+    const rfNodes: Node[] = model.nodes.filter(inView).map((n, i) => {
       const size = nodeSize(n);
       return {
         id: n.id,
@@ -251,10 +270,10 @@ function Inner({ model, title, onSelectNode, gutter = 28 }: C4GraphProps) {
         // Fallback grid pitch uses the container box — the largest, so the
         // pre-layout positions never overlap. ELK replaces them on success.
         position: { x: (i % 5) * (NODE_W + 44), y: Math.floor(i / 5) * (NODE_H + 44) },
-        width: size.width + gutter,
-        height: size.height + gutter,
+        width: size.width,
+        height: size.height,
         ...(n.parentId ? { parentId: n.parentId } : {}),
-        data: { node: n, selected: false },
+        data: { element: n, selected: false },
       };
     });
 
@@ -264,24 +283,43 @@ function Inner({ model, title, onSelectNode, gutter = 28 }: C4GraphProps) {
       ...(g.parentId ? { parentId: g.parentId } : {}),
     }));
 
+    // Band nodes so a flat layout still reads as C4 and frames can't interleave.
+    //
+    // Flat mode has no ELK parents, so without bands ELK mixes members of
+    // different frames across the whole graph — their synthesized bounding
+    // boxes then overlap. A partition per frame keeps each frame's members
+    // contiguous; people lead, externals trail.
+    //
+    // Order (ascending = earlier in the layout direction): people, then each
+    // frame in model order, then external systems.
+    const frameIds = model.groups.map((g) => g.id);
+    const frameIndex = new Map(frameIds.map((id, i) => [id, i]));
+    const partitionByNode = new Map<string, number>(
+      model.nodes.map((n) => {
+        if (n.kind === 'person') return [n.id, 0];
+        if (n.kind === 'external-system') return [n.id, frameIds.length + 1];
+        // A node inside a frame shares its frame's band; a frame-less node
+        // (a container at container view) gets its own by id order.
+        const band = n.parentId ? (frameIndex.get(n.parentId) ?? 0) : (frameIndex.get(n.id) ?? 0);
+        return [n.id, 1 + band];
+      }),
+    );
+
     const rfEdges: Edge[] = model.edges.map((e) => {
-      // Every edge here came from a trail step, so the mechanism colours apply.
-      const color = edgeColor(e.mechanisms[0], muted);
+      // Colour keys off the protocol, not the trail verb: on a container
+      // diagram the transport is what a reader distinguishes at a glance.
+      const color = protocolColor(e.protocol);
       return {
         id: e.id,
+        type: 'c4-edge',
         source: e.source,
         target: e.target,
         // The reserved label box and the chip must agree on size, so ELK is
         // given the same text the chip draws (protocol first, then label). The
         // chip itself is the C4EdgeLabels overlay, not this field.
         label: e.protocol ?? e.label,
-        style: {
-          stroke: color,
-          strokeWidth: 1 + Math.min(e.count, 6) * 0.4,
-          strokeDasharray: '6 4',
-        },
         markerEnd: { type: MarkerType.ArrowClosed, color, width: 18, height: 18 },
-        data: { edge: e, color },
+        data: { edge: e, color, path: '' },
       };
     });
 
@@ -290,12 +328,38 @@ function Inner({ model, title, onSelectNode, gutter = 28 }: C4GraphProps) {
       preserveNodePositions: false,
       groups,
       keepSingletonGroups: true,
-      edgeLabels: { enabled: true, placement: 'CENTER' },
+      edgeLabels: { enabled: true, placement: 'CENTER', width: C4_LABEL_WIDTH, measure: estimateEdgeLabelWidth },
+      // The gutter that used to inflate each node box is now real spacing, so
+      // the ports still sit on the card edge.
+      nodeSpacing: gutter * 2,
+      edgeNodeSpacing: gutter,
+      // Between-layer/between-partition gap. This is what keeps the external
+      // band clear of the system frame's padding — ELK gives partitions zero
+      // default separation. It stacks on top of ELK's reserved label layer, so
+      // it is kept modest.
+      interLayerSpacing: 40,
+      // Draw the system frame as a decoration around the boxes rather than an
+      // ELK parent. Nesting made in-frame edges inherit the frame's padding and
+      // spacing, so they ran longer than a root-level edge touching the same
+      // nodes; flattening gives every edge one spacing.
+      flatGroups: true,
+      partitionByNode,
     })
       .then((result) => {
         if (!alive) return;
         const positioned = new Map(result.nodes.map((n) => [n.id, n]));
-        setLabelPositions(result.edgeLabelPositions ?? new Map());
+        // Draw each edge along ELK's routed polyline and place its label from
+        // the same points — one geometry for the line and the chip.
+        const labelPositions = new Map<string, { x: number; y: number }>();
+        const withPaths = rfEdges.map((e) => {
+          const pts = result.edgePathPoints?.get(e.id);
+          if (!pts || pts.length === 0) return e;
+          labelPositions.set(e.id, pointAlongPath(pts, 0.5));
+          // Rounded corners on ELK's orthogonal route — gentler than raw right
+          // angles, and still the exact polyline the label is placed on.
+          return { ...e, data: { ...e.data, path: pointsToSmoothPath(pts, 12) } };
+        });
+        setLabelPositions(labelPositions);
         const builtGroups = new Set(result.groupBounds.keys());
         const groupById = new Map(model.groups.map((g) => [g.id, g]));
 
@@ -309,15 +373,26 @@ function Inner({ model, title, onSelectNode, gutter = 28 }: C4GraphProps) {
           return d;
         };
 
+        // Shell positions from flat synthesis are absolute. React Flow reads a
+        // child's `position` as relative to its parent, so a shell nested in
+        // another shell must be made relative to it.
+        const shellAbs = new Map(result.groupBounds);
+        const shellOrigin = (id: string | undefined): { x: number; y: number } => {
+          if (!id) return { x: 0, y: 0 };
+          const b = shellAbs.get(id);
+          return b ? { x: b.x, y: b.y } : { x: 0, y: 0 };
+        };
+
         const shells: Node[] = [...result.groupBounds.entries()]
           .sort((a, b) => depthOf(a[0]) - depthOf(b[0]))
           .map(([id, b]) => {
             const def = groupById.get(id);
             const parentId = def?.parentId && builtGroups.has(def.parentId) ? def.parentId : undefined;
+            const origin = shellOrigin(parentId);
             return {
               id,
               type: 'c4-group',
-              position: { x: b.x, y: b.y },
+              position: { x: b.x - origin.x, y: b.y - origin.y },
               width: Math.max(200, b.width),
               height: Math.max(120, b.height),
               draggable: false,
@@ -333,17 +408,23 @@ function Inner({ model, title, onSelectNode, gutter = 28 }: C4GraphProps) {
 
         const leaves = rfNodes.map((n) => {
           const p = positioned.get(n.id);
-          const node = p ? { ...n, position: { x: p.position.x, y: p.position.y } } : n;
-          const parentId = (node as { parentId?: string }).parentId;
-          if (parentId && !builtGroups.has(parentId)) {
-            const { parentId: _drop, ...rest } = node as { parentId?: string } & Node;
-            return rest as Node;
+          // Absolute flow position from the flat layout.
+          const abs = p ? p.position : n.position;
+          // Re-parent to the shell this node sits in, if any: a component's
+          // container, or a container's system frame. React Flow positions a
+          // child relative to its parent, so subtract the shell origin.
+          let parentId: string | undefined;
+          if (n.data && typeof n.data === 'object') {
+            const modelNode = (n.data as { element?: C4Element }).element;
+            if (modelNode?.parentId && builtGroups.has(modelNode.parentId)) parentId = modelNode.parentId;
           }
-          return node;
+          const origin = shellOrigin(parentId);
+          const node = { ...n, position: { x: abs.x - origin.x, y: abs.y - origin.y } };
+          return (parentId ? { ...node, parentId } : { ...node, parentId: undefined }) as Node;
         });
 
         setNodes([...shells, ...leaves]);
-        setRfEdges(rfEdges);
+        setRfEdges(withPaths);
         setReady(true);
         requestAnimationFrame(() => fitView({ padding: 0.15 }));
       })
@@ -367,6 +448,24 @@ function Inner({ model, title, onSelectNode, gutter = 28 }: C4GraphProps) {
     [model, selectedId],
   );
 
+  /**
+   * The components authored inside the selected element, if it is a container.
+   * These are `C4Component`s whose `container` names the selected id (or, once
+   * flattened, whose `parentId` does). Shown in the panel so a container can be
+   * inspected without zooming the diagram into its components.
+   */
+  const selectedComponents = useMemo(
+    () =>
+      selected
+        ? model.nodes.filter(
+            (n) =>
+              n.kind === 'component' &&
+              (n.container === selected.id || n.parentId === selected.id),
+          )
+        : [],
+    [model, selected],
+  );
+
   const displayNodes = useMemo(
     () =>
       nodes.map((n) =>
@@ -377,7 +476,11 @@ function Inner({ model, title, onSelectNode, gutter = 28 }: C4GraphProps) {
     [nodes, selectedId],
   );
 
-  const runtime = model.nodes.filter((n) => n.kind === 'container' || n.kind === 'component').length;
+  // What the current view draws: runtime units at container level, components
+  // at component level. Mirrors the `inView` filter used for the nodes.
+  const runtime = model.nodes.filter((n) =>
+    model.view === 'component' ? n.kind === 'component' : n.kind === 'container',
+  ).length;
   const outside = model.nodes.filter(
     (n) => n.kind === 'external-system' || n.kind === 'person',
   ).length;
@@ -389,6 +492,7 @@ function Inner({ model, title, onSelectNode, gutter = 28 }: C4GraphProps) {
         nodes={displayNodes}
         edges={rfEdges}
         nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
         className={GRAPH_CANVAS_CLASS}
         {...GRAPH_NAV_PROPS}
         onNodeClick={(_e, node) => {
@@ -402,11 +506,15 @@ function Inner({ model, title, onSelectNode, gutter = 28 }: C4GraphProps) {
           onSelectNode?.(null);
         }}
         proOptions={{ hideAttribution: true }}
+        // Pin the flow to its container. The label overlay is a sibling sized
+        // `inset: 0`, so the two must share an origin or `viewport.y` (measured
+        // in the flow's own box) lands the chips off vertically.
+        style={{ width: '100%', height: '100%' }}
       >
         <GraphChrome />
       </ReactFlow>
       {ready && labelPositions.size > 0 && (
-        <C4EdgeLabels positions={labelPositions} edges={model.edges} muted={muted} />
+        <C4EdgeLabels positions={labelPositions} edges={model.edges} />
       )}
       {!ready && (
         <div
@@ -462,7 +570,7 @@ function Inner({ model, title, onSelectNode, gutter = 28 }: C4GraphProps) {
           }}
         >
           <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-            <span style={{ fontWeight: 600, color: theme.colors.text, flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            <span style={{ fontFamily: theme.fonts.monospace, fontWeight: 600, color: theme.colors.text, flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
               {selected.label}
             </span>
             <button
@@ -477,13 +585,30 @@ function Inner({ model, title, onSelectNode, gutter = 28 }: C4GraphProps) {
               ×
             </button>
           </div>
-          <div style={{ fontFamily: theme.fonts.monospace, fontSize: theme.fontSizes[0], color: muted, margin: '4px 0 8px' }}>
-            {selected.kind} · {selected.members.length} component{selected.members.length === 1 ? '' : 's'}
-            {selected.models && selected.models.length > 0 ? ` · ${selected.models.length} model${selected.models.length === 1 ? '' : 's'}` : ''}
-          </div>
+          {/* The sub-line carries the technology — the fact worth reading at a
+              glance. Counts are omitted: the list below is already the count,
+              and kind/state are on the box itself. A person has no technology,
+              so its sub-line is blank. */}
+          {selected.kind !== 'person' &&
+            (() => {
+              const technology = (selected as { technology?: string }).technology;
+              return (
+                <div
+                  style={{
+                    fontFamily: theme.fonts.monospace,
+                    fontSize: theme.fontSizes[0],
+                    color: technology ? muted : (theme.colors.warning ?? '#e8a33a'),
+                    margin: '4px 0 8px',
+                  }}
+                >
+                  {technology ?? 'technology: not stated'}
+                </div>
+              );
+            })()}
 
-          {/* Confirmation state, with what is still missing. */}
-          {selected.kind === 'container' && (
+          {/* The container's own description already shows on the card, so the
+              panel only adds what the card omits: the claimed process. */}
+          {selected.kind === 'container' && selected.process && (
             <div
               style={{
                 fontFamily: theme.fonts.monospace,
@@ -492,52 +617,124 @@ function Inner({ model, title, onSelectNode, gutter = 28 }: C4GraphProps) {
                 borderTop: `1px solid ${theme.colors.border ?? '#333'}`,
                 paddingTop: 6,
                 marginBottom: 8,
+                whiteSpace: 'normal',
+                lineHeight: 1.4,
+              }}
+            >
+              verifies process: {selected.process}
+            </div>
+          )}
+
+          {/* Components authored inside this container, listed so the container
+              can be inspected without zooming the diagram into them. Inert for
+              now — the drill-down hung off them comes later. */}
+          {selected.kind === 'container' && selectedComponents.length > 0 && (
+            <div
+              style={{
                 display: 'flex',
                 flexDirection: 'column',
-                gap: 3,
+                gap: 6,
+                borderTop: `1px solid ${theme.colors.border ?? '#333'}`,
+                paddingTop: 8,
               }}
             >
-              <span style={{ color: nodeStyle(selected, theme).color }}>
-                {selected.state}
-                {selected.containerKind ? ` · ${selected.containerKind}` : ` · ${selected.kind}`}
+              <span
+                style={{
+                  fontFamily: theme.fonts.monospace,
+                  fontSize: theme.fontSizes[0],
+                  color: muted,
+                  textTransform: 'uppercase',
+                  letterSpacing: 0.5,
+                }}
+              >
+                Components
               </span>
-              {selected.technology ? (
-                <span>technology: {selected.technology}</span>
-              ) : (
-                <span style={{ color: theme.colors.warning ?? '#e8a33a' }}>technology: not stated</span>
-              )}
-              {selected.description ? (
-                <span style={{ whiteSpace: 'normal', lineHeight: 1.4 }}>{selected.description}</span>
-              ) : (
-                <span style={{ color: theme.colors.warning ?? '#e8a33a' }}>description: not stated</span>
-              )}
-              {/* A merge hides its inputs, so always show what it absorbed. */}
-              {selected.derivedFrom && selected.derivedFrom.length > 1 && (
-                <span style={{ whiteSpace: 'normal', lineHeight: 1.4 }}>
-                  consolidated from: {selected.derivedFrom.join(', ')}
-                </span>
-              )}
+              {selectedComponents.map((c) => (
+                <div key={c.id} style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                  <span
+                    title={c.description ?? c.label}
+                    style={{
+                      fontFamily: theme.fonts.body,
+                      color: theme.colors.text,
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    {c.label}
+                  </span>
+                  <span
+                    style={{
+                      fontFamily: theme.fonts.monospace,
+                      fontSize: theme.fontSizes[0],
+                      color: muted,
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    {'technology' in c && c.technology ? c.technology : c.kind}
+                    {(c.members ?? []).length > 0 ? ` · ${(c.members ?? []).length} member${(c.members ?? []).length === 1 ? '' : 's'}` : ''}
+                  </span>
+                </div>
+              ))}
             </div>
           )}
 
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-            {selected.members.map((alias) => (
+          {/* No components authored: fall back to the raw member aliases, or
+              say so plainly when there is nothing inside at all. Same divider +
+              header as the authored list, so the panel sections consistently. */}
+          {selected.kind === 'container' && selectedComponents.length === 0 && (
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 6,
+                borderTop: `1px solid ${theme.colors.border ?? '#333'}`,
+                paddingTop: 8,
+              }}
+            >
               <span
-                key={alias}
-                title={alias}
                 style={{
                   fontFamily: theme.fonts.monospace,
                   fontSize: theme.fontSizes[0],
-                  color: theme.colors.text,
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
+                  color: muted,
+                  textTransform: 'uppercase',
+                  letterSpacing: 0.5,
                 }}
               >
-                {alias}
+                Components
               </span>
-            ))}
-          </div>
+              {(selected.members ?? []).length > 0 ? (
+                (selected.members ?? []).map((alias) => (
+                  <span
+                    key={alias}
+                    title={alias}
+                    style={{
+                      fontFamily: theme.fonts.monospace,
+                      fontSize: theme.fontSizes[0],
+                      color: theme.colors.text,
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    {alias}
+                  </span>
+                ))
+              ) : (
+                <span
+                  style={{
+                    fontFamily: theme.fonts.monospace,
+                    fontSize: theme.fontSizes[0],
+                    color: muted,
+                  }}
+                >
+                  No components
+                </span>
+              )}
+            </div>
+          )}
         </div>
       )}
     </div>