@transitrix/diagrams 1.1.0 → 1.3.0

package/src/capability-map/render-capability-tree.ts

@@ -0,0 +1,131 @@
+import type { CapabilityMapHeader } from './types.js';
+import { layoutCapabilityTree, TREE_NODE_WIDTH, TREE_NODE_HEIGHT, TREE_NODE_SEP } from './layout-tree.js';
+import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { escXml } from '../webview/render-util.js';
+
+const PAD = 24;
+const BTN_R = 8;
+const LEGEND_H = 40;
+const LABEL_MAX_CHARS = 28;
+const LABEL_TRIM_CHARS = 26;
+
+const BAND_LABELS = ['Levels 0–2', 'Levels 3–4', 'Levels 5+'] as const;
+
+function depthBand(depth: number): 0 | 1 | 2 {
+  if (depth <= 2) return 0;
+  if (depth <= 4) return 1;
+  return 2;
+}
+
+function truncate(s: string, max: number, trim: number): string {
+  return s.length > max ? s.slice(0, trim) + '…' : s;
+}
+
+export interface RenderCapabilityTreeOptions {
+  collapsedIds?: Set<string>;
+  curvature?: number;
+}
+
+/**
+ * Renders a capability-map as a left-to-right SVG node tree with DSM-matching
+ * visual design: depth-banded fills, maturity badges, and +/− collapse buttons.
+ *
+ * The SVG uses CSS classes (`tree-level-N`, `tree-maturity-N`, `tree-collapse-btn`)
+ * that must be resolved by the host's stylesheet (injected via `diagramClassCss()`
+ * in themes.ts). Collapse buttons carry `data-node-id` / `data-collapsed` attributes
+ * for the webview click handler.
+ */
+export function renderCapabilityTreeSvg(
+  map: CapabilityMapHeader,
+  opts: RenderCapabilityTreeOptions = {},
+): string {
+  const { collapsedIds = new Set(), curvature = DEFAULT_EDGE_CURVATURE } = opts;
+  const layout = layoutCapabilityTree(map, collapsedIds);
+
+  if (layout.nodes.length === 0) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
+  }
+
+  const ox = -layout.bounds.x + PAD;
+  const oy = -layout.bounds.y + PAD;
+  const svgW = layout.bounds.width + PAD * 2 + BTN_R;
+  const svgH = layout.bounds.height + PAD * 2 + LEGEND_H + TREE_NODE_SEP;
+
+  const nodeMap = new Map(layout.nodes.map(n => [n.id, n]));
+
+  const edgeSvg = layout.edges.map(e => {
+    const s = nodeMap.get(e.source);
+    const t = nodeMap.get(e.target);
+    if (!s || !t) return '';
+    const sx = s.x + ox + s.width;
+    const sy = s.y + oy + s.height / 2;
+    const tx = t.x + ox;
+    const ty = t.y + oy + t.height / 2;
+    return `<path d="${horizontalCubicEdgePath(sx, sy, tx, ty, curvature)}" class="diagram-edge"/>`;
+  }).filter(Boolean).join('\n');
+
+  const nodeSvg = layout.nodes.map(n => {
+    const x = n.x + ox;
+    const y = n.y + oy;
+    const band = depthBand(n.depth);
+    const mat = Math.max(1, Math.min(5, n.data.current_maturity | 0));
+
+    const nameText = truncate(n.data.name, LABEL_MAX_CHARS, LABEL_TRIM_CHARS);
+    const nameTitle = n.data.name.length > LABEL_MAX_CHARS ? escXml(n.data.name) : '';
+
+    // Maturity badge: left side of node
+    const badgeW = 28;
+    const badgeH = 18;
+    const badgeX = x + 10;
+    const badgeY = y + (TREE_NODE_HEIGHT - badgeH) / 2;
+
+    // Text area: right of badge
+    const textX = badgeX + badgeW + 8;
+    const nameY = y + TREE_NODE_HEIGHT / 2 - 8;
+    const idY = y + TREE_NODE_HEIGHT / 2 + 9;
+
+    // Collapse button: centered on right edge of node
+    const btnCx = x + TREE_NODE_WIDTH;
+    const btnCy = y + TREE_NODE_HEIGHT / 2;
+
+    const collapseBtn = n.hasChildren
+      ? `<circle class="tree-collapse-btn" cx="${btnCx}" cy="${btnCy}" r="${BTN_R}" data-node-id="${escXml(n.id)}" data-collapsed="${n.isCollapsed}"/>
+  <text class="tree-collapse-lbl" x="${btnCx}" y="${btnCy}" text-anchor="middle">${n.isCollapsed ? '+' : '−'}</text>`
+      : '';
+
+    return `<g${nameTitle ? ` title="${nameTitle}"` : ''}>
+  <rect class="tree-level-${band}" x="${x}" y="${y}" width="${TREE_NODE_WIDTH}" height="${TREE_NODE_HEIGHT}" rx="11" stroke="var(--ts-node-stroke,#94a3b8)" stroke-width="3"/>
+  <rect class="tree-maturity-${mat}" x="${badgeX}" y="${badgeY}" width="${badgeW}" height="${badgeH}" rx="4"/>
+  <text class="text-pill" x="${badgeX + badgeW / 2}" y="${badgeY + badgeH / 2}" text-anchor="middle" fill="white">L${mat}</text>
+  <text class="text-primary" x="${textX}" y="${nameY}" dominant-baseline="central">${escXml(nameText)}</text>
+  <text class="text-id" x="${textX}" y="${idY}" dominant-baseline="central">${escXml(n.id)}</text>
+  ${collapseBtn}
+</g>`;
+  }).join('\n');
+
+  // Legend band: proportional coloured blocks per level-count band
+  const legendY = layout.bounds.height + PAD * 2 + TREE_NODE_SEP / 2;
+  const legendW = svgW - PAD * 2;
+  const totalNodes = layout.nodes.length || 1;
+  const bandCounts = [layout.levelCounts.band0, layout.levelCounts.band1, layout.levelCounts.band2];
+  let legendX = PAD;
+  const legendSvg = bandCounts.map((count, i) => {
+    const bw = Math.max(1, Math.round(legendW * count / totalNodes));
+    const bx = legendX;
+    legendX += bw;
+    if (count === 0) return '';
+    return `<rect class="tree-level-${i}" x="${bx}" y="${legendY}" width="${bw}" height="24" rx="4" stroke="var(--ts-node-stroke,#94a3b8)" stroke-width="1"/>
+  <text class="text-id" x="${bx + bw / 2}" y="${legendY + 12}" text-anchor="middle" dominant-baseline="central">${escXml(BAND_LABELS[i])}</text>`;
+  }).filter(Boolean).join('\n');
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${svgW}" height="${svgH}" viewBox="0 0 ${svgW} ${svgH}">
+<defs>
+  <marker id="cap-tree-arrow" markerWidth="8" markerHeight="8" refX="8" refY="3" orient="auto">
+    <path d="M0,0 L0,6 L8,3 z" class="arrow-fill"/>
+  </marker>
+</defs>
+${edgeSvg}
+${nodeSvg}
+${legendSvg}
+</svg>`;
+}

package/src/capability-map/types.ts

@@ -25,5 +25,7 @@ export interface CapabilityMapHeader {
 export interface CapabilityMapFile {
   notation: string;
   spec_version?: string;
+  /** Render mode for Studio previews. Defaults to 'cards'. */
+  view?: 'cards' | 'tree';
   capability_map: CapabilityMapHeader;
 }

package/src/fgca/__tests__/parse-canonical.test.ts

@@ -159,9 +159,23 @@ describe('parseCanonicalFGCA — edge-driving fields populated', () => {
     expect(parsed.goals[0].factor).toHaveLength(1);
     // goal → change edge
     expect(parsed.changes[0].goal_id).not.toBe(0);
+    expect(parsed.changes[0].goal_id).not.toBe('');
     // change → activity edge
     expect(parsed.changes[0].activity_ids).toHaveLength(1);
   });
+
+  it('preserves canonical string IDs — not converted to sequential numbers', () => {
+    const r = parseCanonicalFGCA(VALID);
+    expect(r.valid).toBe(true);
+    const parsed = r.parsed!;
+    expect(parsed.factors[0].id).toBe('FACTOR-1');
+    expect(parsed.goals[0].id).toBe('GOAL-1');
+    expect(parsed.goals[0].factor![0].id).toBe('FACTOR-1');
+    expect(parsed.changes[0].id).toBe('CHANGE-1');
+    expect(parsed.changes[0].goal_id).toBe('GOAL-1');
+    expect(parsed.changes[0].activity_ids[0]).toBe('ACTIVITY-1');
+    expect(parsed.activities[0].id).toBe('ACTIVITY-1');
+  });
 });
 
 describe('parseCanonicalFGA', () => {
@@ -242,7 +256,7 @@ describe('parseCanonicalFGA — example file regression', () => {
       expect(r.errors).toEqual([]);
       expect(r.valid).toBe(true);
       // Every activity must carry a goal_id, or the FGA preview draws no edges.
-      expect(r.parsed!.activities.every((a) => a.goal_id != null && a.goal_id !== 0)).toBe(true);
+      expect(r.parsed!.activities.every((a) => a.goal_id != null && a.goal_id !== 0 && a.goal_id !== '')).toBe(true);
     });
   }
 });

package/src/fgca/__tests__/validate.test.ts

@@ -56,11 +56,11 @@ describe('validateFGCADoc', () => {
     expect(result.errors.some(e => e.path === 'changes')).toBe(true);
   });
 
-  it('errors when activities array is missing', () => {
+  it('errors when actions array is missing', () => {
     const { activities: _, ...without } = VALID_DOC;
     const result = validateFGCADoc({ ...without, notation: 'fgca' });
     expect(result.valid).toBe(false);
-    expect(result.errors.some(e => e.path === 'activities')).toBe(true);
+    expect(result.errors.some(e => e.path === 'actions')).toBe(true);
   });
 
   it('errors on empty factor name', () => {

package/src/fgca/parse-canonical.ts

@@ -63,10 +63,6 @@ function asObjectArray(v: unknown): Array<Record<string, unknown>> | null {
   return v.map((el) => (el && typeof el === 'object' ? (el as Record<string, unknown>) : null) as Record<string, unknown>);
 }
 
-interface InternalIdMap {
-  /** Canonical typed-string ID → internal numeric ID for layout consumption. */
-  toInternal: Map<string, number>;
-}
 
 /**
  * Validate canonical FGCA YAML and, on success, return an internal-form
@@ -122,12 +118,16 @@ export function parseCanonicalFGCA(input: unknown): CanonicalFGCAResult {
   const factorsRaw = asObjectArray(raw['factors']);
   const goalsRaw = asObjectArray(raw['goals']);
   const changesRaw = asObjectArray(raw['changes']);
-  const activitiesRaw = asObjectArray(raw['activities']);
+  // Accept canonical `actions:` or deprecated `activities:`; warn on the latter.
+  const activitiesRaw = asObjectArray(raw['actions']) ?? asObjectArray(raw['activities']);
+  if ('activities' in raw && !('actions' in raw)) {
+    warnings.push({ code: 'FGCA-001', message: '"activities" key is deprecated — rename to "actions"' });
+  }
 
   if (factorsRaw === null) errors.push({ code: 'FGCA-004', message: 'factors must be an array', path: 'factors' });
   if (goalsRaw === null) errors.push({ code: 'FGCA-004', message: 'goals must be an array', path: 'goals' });
   if (changesRaw === null) errors.push({ code: 'FGCA-004', message: 'changes must be an array', path: 'changes' });
-  if (activitiesRaw === null) errors.push({ code: 'FGCA-004', message: 'activities must be an array', path: 'activities' });
+  if (activitiesRaw === null) errors.push({ code: 'FGCA-004', message: 'actions must be an array', path: 'actions' });
 
   if (errors.length > 0) return { valid: false, errors, warnings };
 
@@ -219,32 +219,20 @@ export function parseCanonicalFGCA(input: unknown): CanonicalFGCAResult {
     return out;
   }
 
-  // Build internal id-maps (canonical string ID → internal sequential number).
-  const idMap: InternalIdMap = { toInternal: new Map() };
-  const allCanonicalIds = [...factorIds, ...goalIds, ...changeIds, ...activityIds];
-  allCanonicalIds.forEach((id, i) => idMap.toInternal.set(id, i + 1));
-
-  function intId(canonical: string): number {
-    const n = idMap.toInternal.get(canonical);
-    if (n === undefined) {
-      // Shouldn't happen — we built the map from the same sets.
-      throw new Error(`internal: canonical id "${canonical}" not mapped`);
-    }
-    return n;
-  }
-
-  // Layer entries (internal form).
+  // Layer entries (internal form). Canonical string IDs are passed through
+  // directly — no conversion to sequential numbers. The layout and renderer
+  // treat IDs as opaque keys and also display them verbatim to the user.
   const internalFactors: DriverItem[] = factors.map((el) => ({
-    id: intId(String(el!['id'])),
+    id: String(el!['id']),
     name: String(el!['name'] ?? ''),
   }));
 
   const internalGoals: GoalItem[] = goals.map((el, i) => {
     const refIds = checkRefArray(el!, 'factors', factorIds, FACTOR_OR_DRIVER_ID_RE, 'FGCA-008', `goals[${i}]`);
     return {
-      id: intId(String(el!['id'])),
+      id: String(el!['id']),
       name: String(el!['name'] ?? ''),
-      factor: refIds.map((r) => ({ id: intId(r) })),
+      factor: refIds.map((r) => ({ id: r })),
     };
   });
 
@@ -280,19 +268,21 @@ export function parseCanonicalFGCA(input: unknown): CanonicalFGCAResult {
     const canonicalChangeId = String(el!['id']);
     const linkedActivityIds = activitiesForChange.get(canonicalChangeId) ?? [];
     return {
-      id: intId(canonicalChangeId),
+      id: canonicalChangeId,
       name: String(el!['name'] ?? ''),
-      goal_id: goalRefs.length > 0 ? intId(goalRefs[0]) : 0,
-      activity_ids: linkedActivityIds.map((aid) => intId(aid)),
+      goal_id: goalRefs.length > 0 ? goalRefs[0] : '',
+      activity_ids: linkedActivityIds,
     };
   });
 
   const internalActivities: ActivityItem[] = activities.map((el, i) => {
-    const goalRefs = checkRefArray(el!, 'goals', goalIds, GOAL_ID_RE, 'FGCA-011', `activities[${i}]`);
+    const goalRefs = checkRefArray(el!, 'goals', goalIds, GOAL_ID_RE, 'FGCA-011', `actions[${i}]`);
+    const typeVal = typeof el!['type'] === 'string' ? el!['type'] : undefined;
     return {
-      id: intId(String(el!['id'])),
+      id: String(el!['id']),
       name: String(el!['name'] ?? ''),
-      goal_id: goalRefs.length > 0 ? intId(goalRefs[0]) : null,
+      goal_id: goalRefs.length > 0 ? goalRefs[0] : null,
+      ...(typeVal !== undefined ? { type: typeVal } : {}),
     };
   });
 

package/src/fgca/preview-layout.ts

@@ -154,19 +154,71 @@ export function layoutFGCAPreview(
     activity: doc.activities.map(a => ({ id: `activity_${a.id}`, label: a.name })),
   };
 
+  // Build predecessor map: for each node, which node IDs in the previous column
+  // connect to it from the left. Used for barycenter crossing minimization.
+  const predecessors = new Map<string, string[]>();
+  for (const g of doc.goals) {
+    predecessors.set(`goal_${g.id}`, (g.factor ?? []).map(f => `driver_${f.id}`));
+  }
+  if (!hideChanges) {
+    for (const c of changes) {
+      predecessors.set(`change_${c.id}`, [`goal_${c.goal_id}`]);
+    }
+    const coveredActs = new Set(changes.flatMap(c => c.activity_ids.map(String)));
+    for (const a of doc.activities) {
+      const preds = changes
+        .filter(c => c.activity_ids.map(String).includes(String(a.id)))
+        .map(c => `change_${c.id}`);
+      if (a.goal_id != null && !coveredActs.has(String(a.id))) preds.push(`goal_${a.goal_id}`);
+      predecessors.set(`activity_${a.id}`, preds);
+    }
+  } else {
+    const connectedViaChange = new Set<string>();
+    for (const c of changes) {
+      for (const aid of c.activity_ids) {
+        predecessors.set(`activity_${aid}`, [`goal_${c.goal_id}`]);
+        connectedViaChange.add(String(aid));
+      }
+    }
+    for (const a of doc.activities) {
+      if (a.goal_id != null && !connectedViaChange.has(String(a.id))) {
+        predecessors.set(`activity_${a.id}`, [`goal_${a.goal_id}`]);
+      }
+    }
+  }
+
+  // Sort a column's items by the barycenter of their predecessors' y-centres.
+  // Nodes with no predecessors sort last (Infinity barycenter) so they don't
+  // displace connected nodes.
+  function barycentricSort(
+    items: Array<{ id: string; label: string }>,
+    yCenters: Map<string, number>,
+  ): Array<{ id: string; label: string }> {
+    return [...items].sort((a, b) => {
+      const pA = (predecessors.get(a.id) ?? []).map(p => yCenters.get(p) ?? 0).filter(v => v > 0);
+      const pB = (predecessors.get(b.id) ?? []).map(p => yCenters.get(p) ?? 0).filter(v => v > 0);
+      const bcA = pA.length > 0 ? pA.reduce((s, v) => s + v, 0) / pA.length : Infinity;
+      const bcB = pB.length > 0 ? pB.reduce((s, v) => s + v, 0) / pB.length : Infinity;
+      return bcA - bcB;
+    });
+  }
+
   const nodeMap = new Map<string, FGCAPreviewNode>();
   const nodes: FGCAPreviewNode[] = [];
   const columns: FGCAPreviewColumnPos[] = [];
+  const yCenters = new Map<string, number>(); // nodeId → y + FGCA_NODE_H / 2
 
   for (let ci = 0; ci < cols.length; ci++) {
     const col = cols[ci];
     const x = FGCA_PAD + ci * colStride;
     columns.push({ col, x });
+    const items = ci === 0 ? colItems[col] : barycentricSort(colItems[col], yCenters);
     let y = FGCA_PAD + FGCA_HEADER_H + rowGap;
-    for (const item of colItems[col]) {
+    for (const item of items) {
       const node: FGCAPreviewNode = { id: item.id, x, y, label: item.label, col };
       nodes.push(node);
       nodeMap.set(item.id, node);
+      yCenters.set(item.id, y + FGCA_NODE_H / 2);
       y += FGCA_NODE_H + rowGap;
     }
   }

package/src/fgca/types.ts

@@ -23,6 +23,8 @@ export interface ActivityItem {
   name: string;
   goal_id?: number | string | null;
   activity_type_id?: number;
+  /** Canonical values: initiative | programme | project | work_package. Unknown values pass through without error. */
+  type?: string;
 }
 
 export interface ActivityTypeItem {

package/src/fgca/validate.ts

@@ -46,9 +46,17 @@ export function validateFGCADoc(input: unknown): FGCAValidationResult {
   if (!Array.isArray(raw.factors)) errors.push({ code: 'SCHEMA_INVALID', message: 'factors must be an array', path: 'factors' });
   if (!Array.isArray(raw.goals)) errors.push({ code: 'SCHEMA_INVALID', message: 'goals must be an array', path: 'goals' });
   if (!Array.isArray(raw.changes)) errors.push({ code: 'SCHEMA_INVALID', message: 'changes must be an array', path: 'changes' });
-  if (!Array.isArray(raw.activities)) errors.push({ code: 'SCHEMA_INVALID', message: 'activities must be an array', path: 'activities' });
+  // Accept canonical `actions:` or deprecated `activities:`; warn on the latter.
+  const hasActions = Array.isArray(raw.actions);
+  const hasActivities = Array.isArray(raw.activities);
+  if (!hasActions && !hasActivities) {
+    errors.push({ code: 'SCHEMA_INVALID', message: 'actions must be an array', path: 'actions' });
+  } else if ('activities' in raw) {
+    warnings.push({ code: 'DEPRECATED_NOTATION', message: '"activities" key is deprecated — rename to "actions"' });
+  }
   if (errors.length > 0) return { valid: false, errors, warnings };
 
+  const actionsArr = (hasActions ? raw.actions : raw.activities) as unknown[];
   const doc = raw as unknown as FGCADoc;
   const collectIds = (arr: unknown[]): Set<number | string> => {
     const out = new Set<number | string>();
@@ -62,7 +70,7 @@ export function validateFGCADoc(input: unknown): FGCAValidationResult {
   };
   const factorIds = collectIds(doc.factors as unknown as unknown[]);
   const goalIds = collectIds(doc.goals as unknown as unknown[]);
-  const activityIds = collectIds(doc.activities as unknown as unknown[]);
+  const activityIds = collectIds(actionsArr);
 
   for (let i = 0; i < doc.factors.length; i++) {
     const f = doc.factors[i] as unknown;
@@ -114,15 +122,15 @@ export function validateFGCADoc(input: unknown): FGCAValidationResult {
     }
   }
 
-  for (let i = 0; i < doc.activities.length; i++) {
-    const a = doc.activities[i] as unknown;
+  for (let i = 0; i < actionsArr.length; i++) {
+    const a = actionsArr[i];
     if (!a || typeof a !== 'object') {
-      errors.push({ code: 'SCHEMA_INVALID', message: 'activity entry must be an object', path: `activities[${i}]` });
+      errors.push({ code: 'SCHEMA_INVALID', message: 'action entry must be an object', path: `actions[${i}]` });
       continue;
     }
-    const activity = a as { id?: unknown; name?: unknown };
-    if (typeof activity.id !== 'number' && typeof activity.id !== 'string') errors.push({ code: 'SCHEMA_INVALID', message: 'activity id must be a number or string', path: `activities[${i}]` });
-    if (typeof activity.name !== 'string' || !activity.name.trim()) errors.push({ code: 'EMPTY_NAME', message: `Activity ${String(activity.id)} has empty name`, path: `activities[${i}]` });
+    const action = a as { id?: unknown; name?: unknown };
+    if (typeof action.id !== 'number' && typeof action.id !== 'string') errors.push({ code: 'SCHEMA_INVALID', message: 'action id must be a number or string', path: `actions[${i}]` });
+    if (typeof action.name !== 'string' || !action.name.trim()) errors.push({ code: 'EMPTY_NAME', message: `Action ${String(action.id)} has empty name`, path: `actions[${i}]` });
   }
 
   return { valid: errors.length === 0, errors, warnings };

package/src/theme/index.ts

@@ -1,4 +1,4 @@
 export type { AdaptiveTokens } from './tokens.js';
-export { BRAND, FUNCTIONAL, LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, STRUCTURAL, TYPOGRAPHY, CSS_VAR, getBaseResetCss } from './tokens.js';
+export { BRAND, FUNCTIONAL, LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, TREE_LEVEL_COLORS, TREE_MATURITY_COLORS, STRUCTURAL, TYPOGRAPHY, CSS_VAR, getBaseResetCss } from './tokens.js';
 export type { ThemeId } from './themes.js';
 export { generateWebviewCss, generateSvgEmbedCss } from './themes.js';

package/src/theme/themes.ts

@@ -2,6 +2,8 @@ import {
   LAYER_COLORS,
   LEVEL_COLORS,
   MATURITY_COLORS,
+  TREE_LEVEL_COLORS,
+  TREE_MATURITY_COLORS,
   STRUCTURAL,
   TYPOGRAPHY,
   CSS_VAR,
@@ -75,7 +77,19 @@ function diagramVars(variant: 'light' | 'dark' | 'hc'): string {
   const sc = STRUCTURAL;
   const lv = LEVEL_COLORS[variant];
   const mat = MATURITY_COLORS[variant];
+  const treeLevel = TREE_LEVEL_COLORS;
+  const treeMat = TREE_MATURITY_COLORS[variant];
   const levelVars = lv.map((c, i) => `--ts-level-${i}:${c}`).join(';') + ';';
+  const treeVars = [
+    `${CSS_VAR.treeLevel0}:${treeLevel.band0[variant]}`,
+    `${CSS_VAR.treeLevel1}:${treeLevel.band1[variant]}`,
+    `${CSS_VAR.treeLevel2}:${treeLevel.band2[variant]}`,
+    `${CSS_VAR.treeMaturity1}:${treeMat[0]}`,
+    `${CSS_VAR.treeMaturity2}:${treeMat[1]}`,
+    `${CSS_VAR.treeMaturity3}:${treeMat[2]}`,
+    `${CSS_VAR.treeMaturity4}:${treeMat[3]}`,
+    `${CSS_VAR.treeMaturity5}:${treeMat[4]}`,
+  ].join(';') + ';';
   return [
     `${CSS_VAR.layerDriver}:${lc.driver[variant]}`,
     `${CSS_VAR.layerFactor}:${lc.factor[variant]}`,
@@ -92,7 +106,7 @@ function diagramVars(variant: 'light' | 'dark' | 'hc'): string {
     `${CSS_VAR.maturity3}:${mat[2]}`,
     `${CSS_VAR.maturity4}:${mat[3]}`,
     `${CSS_VAR.maturity5}:${mat[4]}`,
-  ].join(';') + ';' + levelVars;
+  ].join(';') + ';' + levelVars + treeVars;
 }
 
 /** CSS for the webview shell (toolbar, canvas). */
@@ -155,7 +169,18 @@ ${levelRules}
 .compliance-deadline{fill:var(${cv.statusErrorBg});stroke:var(${cv.statusErrorFg});}
 .compliance-deadline text{fill:var(${cv.statusErrorFg});}
 .compliance-badge{fill:var(${cv.statusErrorFg});}
-.compliance-badge-text{fill:var(${cv.textInverse});font-family:${t.fontFamily};font-size:8px;font-weight:700;}`;
+.compliance-badge-text{fill:var(${cv.textInverse});font-family:${t.fontFamily};font-size:8px;font-weight:700;}
+.tree-level-0{fill:var(${cv.treeLevel0});}
+.tree-level-1{fill:var(${cv.treeLevel1});}
+.tree-level-2{fill:var(${cv.treeLevel2});}
+.tree-maturity-1{fill:var(${cv.treeMaturity1});}
+.tree-maturity-2{fill:var(${cv.treeMaturity2});}
+.tree-maturity-3{fill:var(${cv.treeMaturity3});}
+.tree-maturity-4{fill:var(${cv.treeMaturity4});}
+.tree-maturity-5{fill:var(${cv.treeMaturity5});}
+.tree-collapse-btn{cursor:pointer;fill:white;stroke:var(${cv.nodeStroke});stroke-width:1.5;}
+.tree-collapse-btn:hover{fill:var(${cv.bgElevated});}
+.tree-collapse-lbl{fill:var(${cv.textSecondary});font-family:${t.fontFamily};font-size:12px;font-weight:700;dominant-baseline:central;pointer-events:none;}`;
 }
 
 /**

package/src/theme/tokens.ts

@@ -48,6 +48,28 @@ export const MATURITY_COLORS = {
   hc:    ['#f87171', '#fb923c', '#facc15', '#a3e635', '#4ade80'],
 } as const;
 
+/**
+ * DSM-matching capability tree node fill colors, grouped by depth band.
+ *   band0: depth 0–2 (pink)
+ *   band1: depth 3–4 (yellow)
+ *   band2: depth 5+  (blue)
+ */
+export const TREE_LEVEL_COLORS = {
+  band0: { light: '#fee0e0', dark: '#3d0f0f', hc: '#ff9999' },
+  band1: { light: '#ffffcb', dark: '#3a3500', hc: '#ffff88' },
+  band2: { light: '#c2f0ff', dark: '#003d4d', hc: '#66ccff' },
+} as const;
+
+/**
+ * DSM-matching maturity badge fills for the capability tree (L1–L5).
+ * Distinct from MATURITY_COLORS which drives the cards / compliance views.
+ */
+export const TREE_MATURITY_COLORS = {
+  light: ['#c1c1c1', '#ff3d67', '#ff9a59', '#fdef59', '#83cca3'],
+  dark:  ['#555555', '#cc1040', '#d06020', '#c8c000', '#4d9970'],
+  hc:    ['#cccccc', '#ff6699', '#ffbb77', '#ffff44', '#88ddaa'],
+} as const;
+
 /**
  * Typography hierarchy. All previews resolve text styling from these roles
  * — never from inline font-* attributes on individual <text> elements.
@@ -128,6 +150,14 @@ export const CSS_VAR = {
   maturity3:        '--ts-maturity-3',
   maturity4:        '--ts-maturity-4',
   maturity5:        '--ts-maturity-5',
+  treeLevel0:       '--ts-tree-level-0',
+  treeLevel1:       '--ts-tree-level-1',
+  treeLevel2:       '--ts-tree-level-2',
+  treeMaturity1:    '--ts-tree-maturity-1',
+  treeMaturity2:    '--ts-tree-maturity-2',
+  treeMaturity3:    '--ts-tree-maturity-3',
+  treeMaturity4:    '--ts-tree-maturity-4',
+  treeMaturity5:    '--ts-tree-maturity-5',
 } as const;
 
 export function getBaseResetCss(): string {

package/src/webview/render-activity-card.ts

@@ -12,7 +12,7 @@
  * CROSS-DOCUMENT RESOLUTION CAVEAT
  * The Activity Card is the only MULTI-DOCUMENT Studio notation: the card YAML
  * names a project Activity, and the project's name, dates, motivation chain
- * (Drivers → Assessments → Goals → Changes) and child activities are pulled BY
+ * (Drivers → Goals → Changes) and child activities are pulled BY
  * REFERENCE from the canonical element + relation store (`canon/elements/**`,
  * `canon/relations/**`; see `../activity-card/resolver.ts`). That resolution
  * requires reading those files from disk, which is NOT available inside the
@@ -135,10 +135,9 @@ export function renderActivityCardBody(layout: ActivityCardLayout, ox: number, o
     });
   }
 
-  // Chain sections (Drivers → Assessments → Goals → Changes).
+  // Chain sections (Drivers → Goals → Changes).
   const SECTION_LEVEL: Record<string, number> = {
     drivers: 4,
-    assessments: 5,
     goals: 5,
     changes: 6,
   };

package/src/webview/render-fgca.ts

@@ -29,7 +29,7 @@ const COL_LABELS: Record<FGCAPreviewColumn, string> = {
   driver: 'Drivers (D)',
   goal: 'Goals (G)',
   change: 'Changes (C)',
-  activity: 'Activities (A)',
+  activity: 'Actions (A)',
 };
 
 type FgcaLayout = ReturnType<typeof layoutFGCAPreview>;
@@ -90,7 +90,7 @@ export function renderFgcaBody(
         `<rect class="diagram-node layer-${n.col}" x="${n.x}" y="${n.y}" width="${NODE_W}" height="${NODE_H}" rx="8"/>`,
         `<text class="text-primary" x="${n.x + NODE_W / 2}" y="${y1}" text-anchor="middle" dominant-baseline="central">${escXml(line1)}</text>`,
         twoLines
-          ? `<text class="text-secondary" x="${n.x + NODE_W / 2}" y="${y2}" text-anchor="middle" dominant-baseline="central">${escXml(line2)}</text>`
+          ? `<text class="text-primary" x="${n.x + NODE_W / 2}" y="${y2}" text-anchor="middle" dominant-baseline="central">${escXml(line2)}</text>`
           : '',
         `<text class="text-id" x="${n.x + NODE_W / 2}" y="${idY}" text-anchor="middle" dominant-baseline="central">${escXml(entityId)}</text>`,
       ]

package/src/webview/render-goals.ts

@@ -17,12 +17,11 @@ import { generateSvgEmbedCss, type ThemeId } from '../theme/index.js';
 import { escXml } from './render-util.js';
 
 const NODE_W = 250;
-const NODE_H = 60;
+const NODE_H = 72;
 const RANK_SEP = 100;
 const NODE_SEP = 24;
 const PAD = 24;
-const LABEL_MAX = 36;
-const LABEL_TRIM = 34;
+const LABEL_CHARS = 30;
 
 export interface RenderGoalsOptions {
   treeName?: string;
@@ -110,10 +109,32 @@ export function renderGoalsLayoutSvg(layout: GoalTreeLayout, options: RenderGoal
       const y = n.y + oy;
       const level = n.data.level % 8;
       const labelText = n.data.name ?? String(n.id);
-      const label = labelText.length > LABEL_MAX ? labelText.slice(0, LABEL_TRIM) + '…' : labelText;
+      const words = labelText.split(' ');
+      let line1 = '';
+      let line2 = '';
+      for (const w of words) {
+        if ((line1 + ' ' + w).trim().length <= LABEL_CHARS) {
+          line1 = (line1 + ' ' + w).trim();
+        } else if ((line2 + ' ' + w).trim().length <= LABEL_CHARS) {
+          line2 = (line2 + ' ' + w).trim();
+        } else if (!line2) {
+          line2 = w.slice(0, LABEL_CHARS - 2) + '…';
+          break;
+        }
+      }
+      const twoLines = line2.length > 0;
+      const nameY1 = twoLines ? y + 12 : y + 16;
+      const nameY2 = y + 26;
+      const typeY = twoLines ? y + 43 : y + 35;
+      const idY = twoLines ? y + 59 : y + 55;
+      const typeLabel = n.data.type ?? '';
+      const idText = String(n.data.id);
       return `<g>
   <rect class="diagram-node level-${level}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="8"/>
-  <text class="text-primary" x="${x + n.width / 2}" y="${y + n.height / 2}" text-anchor="middle" dominant-baseline="central">${escXml(label)}</text>
+  <text class="text-primary" x="${x + n.width / 2}" y="${nameY1}" text-anchor="middle" dominant-baseline="central">${escXml(line1)}</text>${twoLines ? `
+  <text class="text-primary" x="${x + n.width / 2}" y="${nameY2}" text-anchor="middle" dominant-baseline="central">${escXml(line2)}</text>` : ''}${typeLabel ? `
+  <text class="text-secondary" x="${x + n.width / 2}" y="${typeY}" text-anchor="middle" dominant-baseline="central">${escXml(typeLabel)}</text>` : ''}
+  <text class="text-id" x="${x + n.width / 2}" y="${idY}" text-anchor="middle" dominant-baseline="central">${escXml(idText)}</text>
 </g>`;
     })
     .join('\n');