@principal-ai/subsystems-react 0.51.2 → 0.51.3

package/src/subsystem/C4NodeCard.tsx

@@ -7,24 +7,24 @@
  *
  * The encoding has one job: make confirmation state legible at a glance. A box
  * nobody has looked at must not read the same as a box a person signed off.
- * Kind says what the box is — shape, size, and a written tag — and everything
- * else in C4 notation (technology, description) is surfaced in the order a
- * reader wants it.
+ * Kind is carried by shape and size — plus an icon for a container's sort,
+ * application vs data-store — and C4 notation is surfaced in the order a reader
+ * wants it: technology on the top row, description under the label.
  */
 
 import { useTheme } from '@principal-ade/industry-theme';
-import { Cloud, Component, Container, UserRound } from 'lucide-react';
+import { AppWindow, Database } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
-import { describeConstructBreakdown } from './model';
+import { TechMark, technologyBrand } from './techIcons';
 import type { C4Node } from './c4';
 
 /**
  * Card box for a container: a wide rectangle. A container carries four things
- * at once (tag, label, type + technology, and the notation gap it still has),
- * and a strip would force the last two to truncate.
+ * at once (technology row, label, description, and the notation gap it still
+ * has), and a strip would force the last two to wrap hard.
  */
-export const NODE_W = 210;
-export const NODE_H = 138;
+export const NODE_W = 250;
+export const NODE_H = 150;
 
 /**
  * A component is a proper square — equal sides, and visibly smaller than the
@@ -32,7 +32,7 @@ export const NODE_H = 138;
  * these are different C4 levels, and it survives grayscale and colour-blind
  * reading where a border-weight difference alone does not.
  */
-export const COMPONENT_SIZE = 132;
+export const COMPONENT_SIZE = 140;
 
 /**
  * Per-level box size. The graph lays out against these, so a square component
@@ -45,12 +45,10 @@ export function nodeSize(node: C4Node): { width: number; height: number } {
 }
 
 /**
- * Fixed slot heights, so rows line up across every card regardless of which
- * optional fields are present. Without these a card missing its notation-gap
- * marker is two lines shorter and a row of cards reads as ragged.
+ * Fixed label slot, so the description below sits at the same y on every card
+ * even when a label is one line rather than two.
  */
 const LABEL_SLOT_H = 40;
-const GAP_SLOT_H = 18;
 
 type Theme = ReturnType<typeof useTheme>['theme'];
 
@@ -91,32 +89,18 @@ export function nodeStyle(node: C4Node, theme: Theme, selected = false): NodeSty
       // Dashed — an agent asked; a human has not answered.
       return { color: theme.colors.warning ?? '#e8a33a', dash: 'dashed', width: weight };
     case 'rejected':
-      // Should never be drawn (buildC4Model drops it); belt-and-braces.
+      // Should never be drawn (a rejected element is not projected); belt-and-braces.
       return { color: muted, dash: 'dotted', width: 1 };
   }
 }
 
-function baseName(path: string): string {
-  const parts = path.split('/').filter(Boolean);
-  return parts[parts.length - 1] ?? path;
-}
-
 /**
- * The kind + technology line under the label.
- *
- * The container kind moved up to the icon row (see `nodeTypeLabel`), so it is
- * not repeated here. Technology is the remaining confirmed attribute; without
- * one we fall back to what the document told us.
+ * The line under the label: the element's one-line responsibility, which C4
+ * asks every element to carry. No fallback — when nothing is stated, the
+ * notation-gap row says so rather than the card inventing a summary.
  */
 export function nodeSubtitle(node: C4Node): string {
-  if (node.technology) return node.technology;
-
-  // No stated technology: fall back to what the document told us.
-  if (node.kind === 'component') {
-    return `${node.component?.construct ?? 'code'}${node.component?.file ? ` · ${baseName(node.component.file)}` : ''}`;
-  }
-  const count = node.members.length;
-  return `${describeConstructBreakdown(node.constructs)}${count > 0 ? ` · ${count} component${count === 1 ? '' : 's'}` : ''}`;
+  return node.description ?? '';
 }
 
 /**
@@ -130,31 +114,26 @@ export function nodeTag(node: C4Node): string {
 }
 
 /**
- * The glyph for the C4 kind, shown in place of a word. The kind is already
- * carried by the box shape (see `nodeShape`); the icon lets the top row spend
- * its one piece of text on the container's kind instead of repeating
- * "container".
+ * The icon on the top row: a container's sort, **application vs data-store**.
+ *
+ * The C4 kind itself does not need a glyph — the box shape already carries it
+ * (square vs rectangle vs pill), and the row's one text slot is worth more
+ * spent on the technology. Only containers have a C4-recognised split, so the
+ * other three kinds return nothing.
  */
-export function nodeKindIcon(node: C4Node): LucideIcon {
-  switch (node.kind) {
-    case 'container':
-      return Container;
-    case 'component':
-      return Component;
-    case 'external-system':
-      return Cloud;
-    case 'person':
-      return UserRound;
-  }
+export function nodeKindIcon(node: C4Node): LucideIcon | undefined {
+  if (node.kind !== 'container') return undefined;
+  return node.containerKind === 'data-store' ? Database : AppWindow;
 }
 
 /**
- * The word beside the kind icon: what sort of container this is — C4's two,
- * `application` or `data-store`. The other three kinds have no such subtype,
- * so they show nothing; the icon and shape are the whole label.
+ * The text on the top row: the technology the box is built with (Bun, React,
+ * Postgres…). Falls back to the container kind / C4 kind when no technology is
+ * stated, so the row is never blank.
  */
-export function nodeTypeLabel(node: C4Node): string | undefined {
-  return node.kind === 'container' ? node.containerKind : undefined;
+export function nodeTopLabel(node: C4Node): string {
+  if (node.technology) return node.technology;
+  return node.kind === 'container' ? (node.containerKind ?? 'container') : node.kind;
 }
 
 /** How a box is drawn. Shape carries the C4 kind, independent of colour. */
@@ -226,11 +205,15 @@ export function C4NodeCard({ node, selected = false, handles, onClick }: C4NodeC
   const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
   const style = nodeStyle(node, theme, selected);
   const shape = nodeShape(node);
-  const missing = nodeMissing(node);
   const Icon = nodeKindIcon(node);
-  const typeLabel = nodeTypeLabel(node);
+  const brand = technologyBrand(node.technology);
+  const topLabel = nodeTopLabel(node);
+  const subtitle = nodeSubtitle(node);
 
   const size = nodeSize(node);
+  // A pill (a person) has no straight left edge, so left-aligned text reads as
+  // spilling out of the oval. Centre the text and inset it from the curve.
+  const centered = shape.kind === 'pill';
 
   return (
     <div
@@ -246,7 +229,7 @@ export function C4NodeCard({ node, selected = false, handles, onClick }: C4NodeC
         // height on every card. In a graph grid that makes the row unscannable.
         justifyContent: 'flex-start',
         gap: 3,
-        padding: '10px 12px',
+        padding: centered ? '10px 30px' : '10px 12px',
         borderRadius: shape.radius,
         background: theme.colors.backgroundSecondary ?? theme.colors.background,
         border: `${style.width} ${style.dash} ${style.color}`,
@@ -255,30 +238,26 @@ export function C4NodeCard({ node, selected = false, handles, onClick }: C4NodeC
         fontFamily: theme.fonts.body,
       }}
     >
-      {/* The kind is carried by the icon and the box shape; the one word here
-          is the container's kind. Confirmation state is carried by the border
-          (see `nodeStyle`), not by a word. */}
+      {/* Left: the brand mark when we hold the official one, then the
+          technology. Right: a container's C4 sort, application vs data-store.
+          The kind itself stays on the shape, confirmation on the border (see
+          `nodeShape`, `nodeStyle`). */}
       <span
         style={{
           display: 'flex',
           alignItems: 'center',
+          justifyContent: centered ? 'center' : 'space-between',
           gap: 6,
           fontFamily: theme.fonts.monospace,
           fontSize: theme.fontSizes[0],
-          color: style.color,
+          color: muted,
           letterSpacing: 0.5,
           textTransform: 'uppercase',
           minWidth: 0,
         }}
       >
-        <span
-          title={nodeTag(node)}
-          aria-label={nodeTag(node)}
-          style={{ display: 'inline-flex', flexShrink: 0 }}
-        >
-          <Icon size={13} strokeWidth={2.25} />
-        </span>
-        {typeLabel && (
+        <span style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
+          {brand && <TechMark brand={brand} />}
           <span
             style={{
               fontWeight: 600,
@@ -288,7 +267,16 @@ export function C4NodeCard({ node, selected = false, handles, onClick }: C4NodeC
               minWidth: 0,
             }}
           >
-            {typeLabel}
+            {topLabel}
+          </span>
+        </span>
+        {Icon && (
+          <span
+            title={node.containerKind ?? node.kind}
+            aria-label={node.containerKind ?? node.kind}
+            style={{ display: 'inline-flex', flexShrink: 0, color: style.color }}
+          >
+            <Icon size={13} strokeWidth={2.25} />
           </span>
         )}
       </span>
@@ -307,43 +295,25 @@ export function C4NodeCard({ node, selected = false, handles, onClick }: C4NodeC
           WebkitLineClamp: 2,
           WebkitBoxOrient: 'vertical',
           overflow: 'hidden',
+          textAlign: centered ? 'center' : 'left',
         }}
         title={node.label}
       >
         {node.label}
       </span>
-      <span
-        style={{
-          fontFamily: theme.fonts.monospace,
-          fontSize: theme.fontSizes[0],
-          color: muted,
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-        }}
-        title={node.description ?? node.members.join(', ')}
-      >
-        {nodeSubtitle(node)}
-      </span>
-      {/* Reserved row: without it, a card with no notation gap is two lines
-          shorter and the row of cards reads as ragged. */}
-      <span style={{ height: GAP_SLOT_H }} aria-hidden="true" />
-      {missing.length > 0 && (
+      {subtitle && (
         <span
-          title={`C4 requires a ${missing.join(' and a ')} on every container`}
           style={{
             fontFamily: theme.fonts.monospace,
             fontSize: theme.fontSizes[0],
-            color: theme.colors.warning ?? '#e8a33a',
-            lineHeight: 1.3,
-            height: GAP_SLOT_H,
-            display: '-webkit-box',
-            WebkitLineClamp: 2,
-            WebkitBoxOrient: 'vertical',
-            overflow: 'hidden',
+            color: muted,
+            lineHeight: 1.35,
+            whiteSpace: 'normal',
+            overflowWrap: 'anywhere',
+            textAlign: centered ? 'center' : 'left',
           }}
         >
-          needs {missing.join(' + ')}
+          {subtitle}
         </span>
       )}
       {handles}

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -1190,18 +1190,15 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
   const stepIssueBadgeByEdgeId = useMemo(() => {
     const map = new Map<string, { kind: 'step_unconfirmed' | 'step_stale'; severity: 'info' | 'error'; count: number }>();
     if (!issues?.length || !trails?.length) {
-      console.log('[stepIssueBadge] early return: issues=', issues?.length, 'trails=', trails?.length);
       return map;
     }
     for (const issue of issues) {
       if (issue.kind !== 'step_unconfirmed' && issue.kind !== 'step_stale') continue;
       const stepInfo = issueStep(issue);
-      console.log('[stepIssueBadge] issue', issue.id, 'kind=', issue.kind, 'stepInfo=', stepInfo);
       if (!stepInfo) continue;
       const step = stepInfo.trail.steps[stepInfo.stepIndex];
       if (!step) continue;
       const edgeId = trailStepGraphEdgeId(step);
-      console.log('[stepIssueBadge] -> edgeId=', edgeId);
       const prev = map.get(edgeId);
       // step_stale is worse than step_unconfirmed
       const isWorse = issue.kind === 'step_stale' && prev?.kind !== 'step_stale';
@@ -1211,7 +1208,6 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
         count: (prev?.count ?? 0) + 1,
       });
     }
-    console.log('[stepIssueBadge] final map size=', map.size);
     return map;
   }, [issues, trails, issueStep]);
 
@@ -2499,7 +2495,6 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
           pathLength?: number;
         } | undefined;
         const stepIssue = stepIssueBadgeByEdgeId.get(e.id);
-        console.log('[edgeLabels] edge', e.id, 'stepIssue=', stepIssue);
         return {
           id: e.id,
           mechanism: d?.mechanism ?? 'uses',
@@ -2512,7 +2507,6 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
           stepIssue,
         };
       });
-    console.log('[edgeLabels] total labels=', labels.length, 'with stepIssue=', labels.filter(l => l.stepIssue).length);
     return labels;
   }, [dispEdges, selectedFlowStepNos, stepIssueBadgeByEdgeId]);
 

package/src/subsystem/TrailsPanel.tsx

@@ -20,6 +20,7 @@ import {
   reorderTrails,
   trailStepGraphEdgeId,
   type SubsystemTrail,
+  type SubsystemTrailStep,
 } from './model';
 import { buildStepBrief } from './trailBrief';
 
@@ -90,10 +91,14 @@ function TrailFlow({
   const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
   const hoverBg = theme.colors.background;
   const wholeFlowActive = active !== null && active.stepIndex === null;
-  // A step is "proposed" when either endpoint is a proposed component.
-  const stepProposed = (from: string, to: string) =>
-    proposedAliases != null && (proposedAliases.has(from) || proposedAliases.has(to));
-  const touchesProposed = trail.steps.some((s) => stepProposed(s.from, s.to));
+  // A step is "proposed" when it says so itself OR either endpoint component
+  // is proposed — the step flag covers planned seams whose endpoints already
+  // exist as real components.
+  const stepProposed = (step: SubsystemTrailStep) =>
+    step.proposed === true ||
+    (proposedAliases != null &&
+      (proposedAliases.has(step.from) || proposedAliases.has(step.to)));
+  const touchesProposed = trail.steps.some((s) => stepProposed(s));
   const [headerHover, setHeaderHover] = useState(false);
   const [collapseHover, setCollapseHover] = useState(false);
   const [playHover, setPlayHover] = useState(false);
@@ -366,7 +371,7 @@ function TrailFlow({
         >
           {trail.steps.map((step, i) => {
             const stepActive = active !== null && active.stepIndex === i;
-            const proposed = stepProposed(step.from, step.to);
+            const proposed = stepProposed(step);
             const revealed =
               stepActive || hoveredStep === i || focusedStep === i || copiedStep === i;
             const copied = copiedStep === i;