@principal-ai/subsystems-react 0.51.0 → 0.51.1

package/src/subsystem/C4NodeCard.test.ts

@@ -1,6 +1,16 @@
 import { describe, expect, test } from 'bun:test';
-import { nodeStyle, nodeSubtitle, nodeTag, nodeMissing, NODE_W, NODE_H } from './C4NodeCard';
-import type { C4Node, C4ElementType, C4AssociationState } from './toC4';
+import {
+  nodeStyle,
+  nodeSubtitle,
+  nodeTag,
+  nodeShape,
+  nodeMissing,
+  NODE_W,
+  NODE_H,
+  nodeSize,
+  COMPONENT_SIZE,
+} from './C4NodeCard';
+import type { C4Node } from './c4';
 
 const theme = {
   colors: {
@@ -12,86 +22,137 @@ const theme = {
   },
 } as Parameters<typeof nodeStyle>[1];
 
+/**
+ * A drawn node, flat. `state` is required on a real `C4Node` — every authored
+ * element carries a decision — so the card never has to cope with a box nobody
+ * proposed, and no test pretends otherwise.
+ */
 function node(over: Partial<C4Node> = {}): C4Node {
-  return { id: 'n', kind: 'container', label: 'n', members: [], constructs: [], isStore: false, ...over };
+  return { id: 'n', kind: 'container', label: 'n', members: [], constructs: [], state: 'proposed', ...over };
 }
 
-function decorated(state: C4AssociationState, extra: Record<string, unknown> = {}): C4Node {
-  return node({ decoration: { id: 'container:x', state, ...extra } as C4Node['decoration'] });
-}
-
-describe('nodeStyle', () => {
+describe('nodeStyle — one axis per channel', () => {
   test('selected overrides everything', () => {
-    expect(nodeStyle(decorated('accepted'), theme, true).width).toBe(3);
-    expect(nodeStyle(node(), theme, true).color).toBe('#4ec9b0');
+    expect(nodeStyle(node({ state: 'accepted' }), theme, true).width).toBe(3);
+    expect(nodeStyle(node({ state: 'accepted' }), theme, true).dash).toBe('solid');
   });
 
   test('accepted is solid and uses the primary colour', () => {
-    const s = nodeStyle(decorated('accepted'), theme);
+    const s = nodeStyle(node({ state: 'accepted' }), theme);
     expect(s.dash).toBe('solid');
     expect(s.color).toBe('#4ec9b0');
   });
 
   test('proposed is dashed and uses the warning colour', () => {
-    const s = nodeStyle(decorated('proposed'), theme);
+    const s = nodeStyle(node({ state: 'proposed' }), theme);
     expect(s.dash).toBe('dashed');
     expect(s.color).toBe('#e8a33a');
   });
 
   test('rejected is dotted and muted', () => {
-    const s = nodeStyle(decorated('rejected'), theme);
+    const s = nodeStyle(node({ state: 'rejected' }), theme);
     expect(s.dash).toBe('dotted');
     expect(s.color).toBe('#555');
   });
 
-  test('no association is muted, so confirmed boxes read stronger', () => {
-    expect(nodeStyle(node(), theme).color).toBe('#555');
+  test('the dash belongs to state, never to kind', () => {
+    // This is the bug that made proposed boxes draw solid: the card rendered
+    // `shape.dash`, and shape answered to kind. Every kind at the same state
+    // must now draw the same dash.
+    for (const kind of ['container', 'component', 'external-system', 'person'] as const) {
+      expect(nodeStyle(node({ kind, state: 'proposed' }), theme).dash).toBe('dashed');
+      expect(nodeStyle(node({ kind, state: 'accepted' }), theme).dash).toBe('solid');
+    }
   });
 
-  test('an external and an actor are distinguished without an association', () => {
-    expect(nodeStyle(node({ kind: 'external' }), theme).color).toBe('#e8a33a');
-    expect(nodeStyle(node({ kind: 'actor' }), theme).color).toBe('#e3b341');
+  test('confirmation state wins over kind for colour', () => {
+    // Same state, four kinds: one colour. Kind is shape's job.
+    const colors = (['container', 'component', 'external-system', 'person'] as const).map(
+      (kind) => nodeStyle(node({ kind, state: 'accepted' }), theme).color,
+    );
+    expect(new Set(colors).size).toBe(1);
   });
 
-  test('confirmation state wins over kind', () => {
-    const s = nodeStyle(decorated('accepted'), theme);
-    expect(s.color).toBe('#4ec9b0');
+  test('border weight carries the level, not the state', () => {
+    // Otherwise a component and a container differ only by hue, which is
+    // invisible in grayscale and to a colourblind reader.
+    expect(nodeStyle(node({ kind: 'component' }), theme).width).toBe(1);
+    expect(nodeStyle(node(), theme).width).toBe(2);
+  });
+
+  test('a component stays thinner once confirmed', () => {
+    expect(nodeStyle(node({ kind: 'component', state: 'accepted' }), theme).width).toBe(1);
   });
 
   test('falls back safely when the theme has no colour', () => {
     const bare = { colors: {} } as Parameters<typeof nodeStyle>[1];
-    expect(() => nodeStyle(decorated('accepted'), bare)).not.toThrow();
-    expect(nodeStyle(decorated('accepted'), bare).dash).toBe('solid');
+    expect(() => nodeStyle(node({ state: 'accepted' }), bare)).not.toThrow();
+    expect(nodeStyle(node({ state: 'accepted' }), bare).dash).toBe('solid');
   });
 });
 
-describe('nodeTag', () => {
-  test('names the confirmation state ahead of the C4 kind', () => {
-    expect(nodeTag(decorated('accepted'))).toBe('confirmed');
-    expect(nodeTag(decorated('proposed'))).toBe('proposed');
-    expect(nodeTag(decorated('rejected'))).toBe('rejected');
+describe('nodeTag — what the box IS', () => {
+  test('names the C4 kind, never the confirmation state', () => {
+    expect(nodeTag(node({ state: 'accepted' }))).toBe('container');
+    expect(nodeTag(node({ state: 'proposed' }))).toBe('container');
+    expect(nodeTag(node({ state: 'rejected' }))).toBe('container');
+  });
+
+  test('keeps all four kinds distinct', () => {
+    expect(nodeTag(node({ kind: 'component' }))).toBe('component');
+    expect(nodeTag(node({ kind: 'external-system' }))).toBe('external-system');
+    expect(nodeTag(node({ kind: 'person' }))).toBe('person');
   });
 
-  test('falls back to the kind when there is no association', () => {
-    expect(nodeTag(node())).toBe('container');
-    expect(nodeTag(node({ kind: 'external' }))).toBe('external');
-    expect(nodeTag(node({ kind: 'actor' }))).toBe('actor');
+  test('a confirmed container is still a container', () => {
+    // This is the regression that made the two levels unreadable: state used
+    // to overwrite the kind, so an accepted container stopped being one.
+    expect(nodeTag(node({ state: 'accepted' }))).not.toBe('confirmed');
   });
 });
 
-describe('nodeSubtitle', () => {
-  test('shows type and technology once confirmed', () => {
-    const s = nodeSubtitle(
-      decorated('accepted', { type: 'application', technology: 'Bun + Electrobun' }),
+describe('nodeShape — kind without relying on colour or dash', () => {
+  test('a container is a sharp rectangle', () => {
+    const s = nodeShape(node());
+    expect(s.kind).toBe('rect');
+    expect(s.radius).toBeLessThanOrEqual(4);
+  });
+
+  test('a component is a square', () => {
+    expect(nodeShape(node({ kind: 'component' })).kind).toBe('square');
+  });
+
+  test('an external system is a rounded rectangle', () => {
+    const s = nodeShape(node({ kind: 'external-system' }));
+    expect(s.kind).toBe('rect');
+    expect(s.radius).toBeGreaterThan(nodeShape(node()).radius);
+  });
+
+  test('a person is a pill', () => {
+    const s = nodeShape(node({ kind: 'person' }));
+    expect(s.kind).toBe('pill');
+    expect(s.radius).toBeGreaterThanOrEqual(NODE_H / 2);
+  });
+
+  test('shape does not depend on confirmation state', () => {
+    expect(nodeShape(node({ state: 'proposed' })).kind).toBe(
+      nodeShape(node({ state: 'accepted' })).kind,
     );
-    expect(s).toBe('application · Bun + Electrobun');
+  });
+});
+
+describe('nodeSubtitle', () => {
+  test('shows the container kind and technology', () => {
+    expect(
+      nodeSubtitle(node({ containerKind: 'application', technology: 'Bun + Electrobun' })),
+    ).toBe('application · Bun + Electrobun');
   });
 
-  test('omits technology when it was never stated', () => {
-    expect(nodeSubtitle(decorated('accepted', { type: 'data-store' }))).toBe('data-store');
+  test('shows a data store with no technology as just the kind', () => {
+    expect(nodeSubtitle(node({ containerKind: 'data-store', technology: '' }))).toBe('data-store');
   });
 
-  test('falls back to the construct breakdown for a raw container', () => {
+  test('falls back to the construct breakdown when neither is stated', () => {
     const s = nodeSubtitle(node({ constructs: ['function', 'store'], members: ['a', 'b'] }));
     expect(s).toContain('function');
     expect(s).toContain('store');
@@ -119,38 +180,85 @@ describe('nodeSubtitle', () => {
     );
     expect(s).toBe('function · model.ts');
   });
+
+  test('a component shows its technology when it has one', () => {
+    expect(nodeSubtitle(node({ kind: 'component', technology: 'React + ELK' }))).toBe('React + ELK');
+  });
 });
 
 describe('nodeMissing', () => {
-  test('a bare container reports both notation gaps', () => {
-    expect(nodeMissing(node())).toEqual(['technology', 'description']);
+  test('a container with neither reports both notation gaps', () => {
+    expect(nodeMissing(node({ technology: '', description: undefined }))).toEqual([
+      'technology',
+      'description',
+    ]);
   });
 
   test('one supplied gap drops only that one', () => {
-    expect(nodeMissing(decorated('accepted', { technology: 'React' }))).toEqual(['description']);
+    expect(nodeMissing(node({ technology: 'React', description: undefined }))).toEqual([
+      'description',
+    ]);
   });
 
   test('a fully stated container reports nothing', () => {
     expect(
-      nodeMissing(decorated('accepted', { technology: 'React', description: 'Renders graphs.' })),
+      nodeMissing(node({ technology: 'React', description: 'Renders graphs.', state: 'accepted' })),
     ).toEqual([]);
   });
 
   test('the requirement is on containers only', () => {
-    expect(nodeMissing(node({ kind: 'external' }))).toEqual([]);
-    expect(nodeMissing(node({ kind: 'actor' }))).toEqual([]);
-    expect(nodeMissing(node({ kind: 'component' }))).toEqual([]);
+    for (const kind of ['external-system', 'person', 'component'] as const) {
+      expect(nodeMissing(node({ kind, technology: '', description: undefined }))).toEqual([]);
+    }
+  });
+});
+
+describe('nodeSize — a component is a proper square', () => {
+  test('a component has equal width and height', () => {
+    const s = nodeSize(node({ kind: 'component' }));
+    expect(s.width).toBe(s.height);
+  });
+
+  test('a container is wider than it is tall', () => {
+    const s = nodeSize(node());
+    expect(s.width).toBeGreaterThan(s.height);
+  });
+
+  test('a component is smaller than its container', () => {
+    const c = nodeSize(node({ kind: 'component' }));
+    const k = nodeSize(node());
+    expect(c.width).toBeLessThan(k.width);
+    expect(c.height).toBeLessThan(k.height);
+  });
+
+  test('the square still fits its three lines of text', () => {
+    // tag + 2-line label slot + subtitle + 10px padding x2. Without this the
+    // square clips its own subtitle.
+    const s = nodeSize(node({ kind: 'component' }));
+    const content = 16 + 40 + 16 + 20;
+    expect(s.height).toBeGreaterThanOrEqual(content);
+  });
+
+  test('every kind but a component shares the container box', () => {
+    const c = nodeSize(node());
+    expect(nodeSize(node({ kind: 'external-system' }))).toEqual(c);
+    expect(nodeSize(node({ kind: 'person' }))).toEqual(c);
   });
 });
 
 describe('card metrics', () => {
   test('exposes the size the graph lays out against', () => {
-    expect(NODE_W).toBeGreaterThan(0);
-    expect(NODE_H).toBeGreaterThan(0);
+    expect(NODE_W).toBe(210);
+    expect(NODE_H).toBe(138);
+  });
+
+  test('COMPONENT_SIZE is a square, not just a smaller rectangle', () => {
+    expect(COMPONENT_SIZE).toBe(nodeSize(node({ kind: 'component' })).width);
+    expect(COMPONENT_SIZE).toBe(nodeSize(node({ kind: 'component' })).height);
   });
 
   test('is near-square, not a wide strip', () => {
-    // The card carries four fields (tag, label, type+technology, notation
+    // The card carries four fields (tag, label, kind+technology, notation
     // gap). A 3:1 strip truncates the last two; this is the aspect ratio that
     // lets each sit on its own line.
     const ratio = NODE_W / NODE_H;
@@ -177,20 +285,17 @@ describe('card metrics', () => {
   });
 });
 
-/** Compile-time guard: every declared element type is reachable from a card. */
-const ALL_TYPES: C4ElementType[] = [
-  'application',
-  'data-store',
-  'queue',
-  'library',
-  'software-system',
-  'person',
-];
-
-describe('element types', () => {
-  test('each one renders as a subtitle without special-casing', () => {
-    for (const type of ALL_TYPES) {
-      expect(nodeSubtitle(decorated('accepted', { type }))).toBe(type);
+describe('container kinds', () => {
+  test('every container kind renders as a subtitle without special-casing', () => {
+    const kinds = ['application', 'data-store', 'queue'] as const;
+    for (const containerKind of kinds) {
+      expect(nodeSubtitle(node({ containerKind, technology: '' }))).toBe(containerKind);
     }
   });
+
+  test('a library is not one of them', () => {
+    // C4 says a module "typically" is not an element at all, so there is no
+    // kind to render. A library-shaped group is a review comment.
+    expect(['application', 'data-store', 'queue']).not.toContain('library');
+  });
 });

package/src/subsystem/C4NodeCard.tsx

@@ -7,23 +7,41 @@
  *
  * 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.
- * Everything else here is C4 notation — a type, a technology, a description —
- * surfaced in the order a reader wants it.
+ * 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.
  */
 
 import { useTheme } from '@principal-ade/industry-theme';
 import { describeConstructBreakdown } from './model';
-import type { C4Node } from './toC4';
+import type { C4Node } from './c4';
 
 /**
- * Card box. Near-square rather than a wide strip: a C4 element carries four
- * things at once (tag, label, type + technology, and the notation gap it still
- * has), and a wide strip forces the last two to truncate. The extra height is
- * what lets the `needs …` marker sit on its own line instead of clipping.
+ * 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.
  */
 export const NODE_W = 210;
 export const NODE_H = 138;
 
+/**
+ * A component is a proper square — equal sides, and visibly smaller than the
+ * container it sits inside. Square-vs-rectangle is the clearest signal that
+ * 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;
+
+/**
+ * Per-level box size. The graph lays out against these, so a square component
+ * and a rectangular container do not collide at a shared nominal width.
+ */
+export function nodeSize(node: C4Node): { width: number; height: number } {
+  return node.kind === 'component'
+    ? { width: COMPONENT_SIZE, height: COMPONENT_SIZE }
+    : { width: NODE_W, height: NODE_H };
+}
+
 /**
  * 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
@@ -36,26 +54,34 @@ type Theme = ReturnType<typeof useTheme>['theme'];
 
 export interface NodeStyle {
   color: string;
-  dash: string;
+  dash: 'solid' | 'dashed' | 'dotted';
   width: number;
 }
 
 /**
- * Border style and colour for one node, by what we know about it.
+ * Border style for one node: colour, dash and weight, from confirmation state
+ * and level.
+ *
+ * One axis per channel, so nothing is said twice and nothing is contradicted:
+ *
+ *   colour + dash  → confirmation state (the primary axis)
+ *   weight         → C4 level, as a grayscale redundancy for the square
+ *   shape + size   → C4 kind (`nodeShape`, `nodeSize`)
  *
- * Confirmation state wins over C4 kind: an accepted container and a raw
- * derived container are both "containers", and the reader's first question
- * about either is whether anyone vouched for it.
+ * State owning the dash is deliberate. An earlier build gave the dash to kind
+ * and drew proposed boxes solid, quietly contradicting the one thing the
+ * confirm UI needs a reader to see. Kind now says itself through shape, and
+ * the border says who vouched for it.
  */
 export function nodeStyle(node: C4Node, theme: Theme, selected = false): NodeStyle {
   const muted = theme.colors.border ?? '#555';
   if (selected) return { color: theme.colors.primary ?? '#5aa', dash: 'solid', width: 3 };
 
-  // Border width carries the C4 level, so a component stays a component even
+  // Border weight carries the level, so a component stays a component even
   // in grayscale or for a reader who cannot separate the hues.
   const weight = node.kind === 'component' ? 1 : 2;
 
-  switch (node.decoration?.state) {
+  switch (node.state) {
     case 'accepted':
       // Solid and saturated — part of the architecture now.
       return { color: theme.colors.primary ?? '#4ec9b0', dash: 'solid', width: weight };
@@ -63,21 +89,8 @@ 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 (toC4 drops it); belt-and-braces.
+      // Should never be drawn (buildC4Model drops it); belt-and-braces.
       return { color: muted, dash: 'dotted', width: 1 };
-    default:
-      break;
-  }
-
-  // No association at all — the raw derivation. Muted, so confirmed boxes
-  // read as the stronger signal.
-  switch (node.kind) {
-    case 'external':
-      return { color: theme.colors.warning ?? '#a78bfa', dash: 'solid', width: weight };
-    case 'actor':
-      return { color: theme.colors.accent ?? theme.colors.info ?? '#e3b341', dash: 'solid', width: weight };
-    default:
-      return { color: muted, dash: 'solid', width: weight };
   }
 }
 
@@ -86,10 +99,15 @@ function baseName(path: string): string {
   return parts[parts.length - 1] ?? path;
 }
 
-/** The type + technology line under the label. */
+/**
+ * The kind + technology line under the label.
+ *
+ * A container shows its `containerKind` (application / data-store / queue);
+ * C4 has no kind for the other three, so they show technology or nothing.
+ */
 export function nodeSubtitle(node: C4Node): string {
-  const d = node.decoration;
-  if (d?.type || d?.technology) return [d.type, d.technology].filter(Boolean).join(' · ');
+  const parts = [node.containerKind, node.technology].filter(Boolean);
+  if (parts.length > 0) return parts.join(' · ');
 
   // No confirmed attributes: fall back to what the document told us.
   if (node.kind === 'component') {
@@ -100,68 +118,68 @@ export function nodeSubtitle(node: C4Node): string {
 }
 
 /**
- * The C4 level — what the box IS.
- *
- * Deliberately independent of confirmation state. An accepted container is
- * still a container, and a component is a component whether or not anyone has
- * reviewed it; collapsing the two into one label is what made the two
- * indistinguishable. Confirmation is a separate axis (`nodeStateTag`).
+ * What the box IS — its C4 kind. An accepted container is still a container;
+ * collapsing the two is what once made containers and components unreadable.
+ * Confirmation state is a separate axis carried by the border (see
+ * `nodeStyle`), not by a word on the card.
  */
 export function nodeTag(node: C4Node): string {
   return node.kind;
 }
 
-/**
- * Confirmation state, as its own short tag. Empty when nothing was proposed —
- * which is itself the distinction from a reviewed element.
- */
-export function nodeStateTag(node: C4Node): string {
-  switch (node.decoration?.state) {
-    case 'accepted':
-      return 'confirmed';
-    case 'proposed':
-      return 'proposed';
-    case 'rejected':
-      return 'rejected';
-    default:
-      return 'unconfirmed';
-  }
+/** How a box is drawn. Shape carries the C4 kind, independent of colour. */
+export type C4ShapeKind = 'rect' | 'square' | 'pill';
+
+export interface NodeShape {
+  kind: C4ShapeKind;
+  /** Corner radius, for the shapes that use one. */
+  radius: number;
 }
 
 /**
- * Shape cue for the C4 level, independent of colour and dash pattern.
+ * Shape cue for the C4 kind, independent of colour and dash — both of which
+ * belong to confirmation state.
  *
- * Colour alone is not enough: a container and a component with no association
- * both fall back to the muted border, so they were identical in grayscale.
  * The convention:
  *
- *   container   solid rectangle   — a runtime boundary, drawn to scale
- *   component   rounded rectangle — a part inside one, drawn smaller
- *   external    rounded rectangle + dashed (nothing to confirm inside)
- *   actor       fully rounded      — a person, not a box
+ *   container        wide rectangle, sharp corners — a runtime boundary
+ *   component        square — a part inside one (see `nodeSize`)
+ *   external system  wide rectangle, rounded     — someone else's system
+ *   person           pill                          — not a box at all
+ *
+ * An external system is separated from a container by radius alone, which is
+ * a weak cue. That is deliberate rather than an oversight: the border dash is
+ * the only channel that could say "outside our control" loudly, and it is
+ * already spent on proposed-vs-accepted. The kind tag says it in words, and
+ * the frame position says it structurally.
  */
-export function nodeShape(node: C4Node): { radius: number; dash: 'solid' | 'dashed' } {
+export function nodeShape(node: C4Node): NodeShape {
   switch (node.kind) {
-    case 'actor':
-      return { radius: NODE_H / 2, dash: 'solid' };
-    case 'external':
-      return { radius: 14, dash: 'dashed' };
+    case 'person':
+      return { kind: 'pill', radius: NODE_H / 2 };
+    case 'external-system':
+      return { kind: 'rect', radius: 14 };
     case 'component':
-      return { radius: 14, dash: 'solid' };
+      return { kind: 'square', radius: 6 };
     default:
-      return { radius: 4, dash: 'solid' };
+      return { kind: 'rect', radius: 4 };
   }
 }
 
 /**
- * C4 notation requires a technology and a description on every container.
- * Name the gaps rather than leaving them to be noticed.
+ * The gaps the C4 notation still wants on this element, named rather than left
+ * to be noticed.
+ *
+ * Containers are where the notation is strictest: it requires a technology and
+ * a description on every one. A component needs a technology too, but a
+ * component drawn without a parent already reports `unknown_container`, and
+ * that is the question worth asking first.
  */
 export function nodeMissing(node: C4Node): string[] {
   if (node.kind !== 'container') return [];
   const missing: string[] = [];
-  if (!node.decoration?.technology) missing.push('technology');
-  if (!node.decoration?.description) missing.push('description');
+  if (!node.technology) missing.push('technology');
+  if (!node.description) missing.push('description');
   return missing;
 }
 
@@ -179,14 +197,15 @@ export function C4NodeCard({ node, selected = false, handles, onClick }: C4NodeC
   const style = nodeStyle(node, theme, selected);
   const shape = nodeShape(node);
   const missing = nodeMissing(node);
-  const unconfirmed = !node.decoration?.state;
+
+  const size = nodeSize(node);
 
   return (
     <div
       onClick={onClick}
       style={{
-        width: NODE_W,
-        minHeight: NODE_H,
+        width: size.width,
+        minHeight: size.height,
         boxSizing: 'border-box',
         display: 'flex',
         flexDirection: 'column',
@@ -204,48 +223,23 @@ export function C4NodeCard({ node, selected = false, handles, onClick }: C4NodeC
         fontFamily: theme.fonts.body,
       }}
     >
-      {/* Level and state on one row, separately styled. The level is what the
-          box IS; the state is whether anyone has vouched for it. Merging them
-          into one label is what made containers and components unreadable. */}
+      {/* The kind is what the box IS. Confirmation state is carried by the
+          border (see `nodeStyle`), not by a word: the card says what it is,
+          and the styling says who vouched for it. */}
       <span
         style={{
-          display: 'flex',
-          alignItems: 'baseline',
-          gap: 6,
           fontFamily: theme.fonts.monospace,
           fontSize: theme.fontSizes[0],
+          color: style.color,
+          fontWeight: 600,
           letterSpacing: 0.5,
           textTransform: 'uppercase',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
         }}
       >
-        <span
-          style={{
-            color: style.color,
-            fontWeight: 600,
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            minWidth: 0,
-          }}
-        >
-          {nodeTag(node)}
-        </span>
-        <span
-          title={unconfirmed ? 'Nobody has reviewed this element yet' : undefined}
-          style={{
-            color: unconfirmed ? muted : style.color,
-            // Unconfirmed is a quiet absence, not a loud claim.
-            opacity: unconfirmed ? 0.75 : 1,
-            letterSpacing: 0,
-            textTransform: 'none',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            minWidth: 0,
-          }}
-        >
-          {nodeStateTag(node)}
-        </span>
+        {nodeTag(node)}
       </span>
       {/* Two lines rather than an ellipsis: a truncated label hides the very
           thing that distinguishes two containers from each other. The fixed
@@ -276,7 +270,7 @@ export function C4NodeCard({ node, selected = false, handles, onClick }: C4NodeC
           overflow: 'hidden',
           textOverflow: 'ellipsis',
         }}
-        title={node.decoration?.description ?? node.members.join(', ')}
+        title={node.description ?? node.members.join(', ')}
       >
         {nodeSubtitle(node)}
       </span>