@transitrix/diagrams 1.1.0 → 1.2.0

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

@@ -0,0 +1,114 @@
+import type { CapabilityNode, CapabilityMapHeader } from './types.js';
+
+export const TREE_NODE_WIDTH = 250;
+export const TREE_NODE_HEIGHT = 64;
+/** Gap between sibling columns (node width + rank sep = 330px, matching DSM). */
+export const TREE_RANK_SEP = 80;
+/** Vertical gap between sibling nodes. */
+export const TREE_NODE_SEP = 24;
+
+export interface CapabilityTreeNode {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  data: CapabilityNode;
+  depth: number;
+  hasChildren: boolean;
+  isCollapsed: boolean;
+}
+
+export interface CapabilityTreeEdge {
+  source: string;
+  target: string;
+}
+
+export interface CapabilityTreeLevelCounts {
+  /** Nodes at depth 0–2 (pink band). */
+  band0: number;
+  /** Nodes at depth 3–4 (yellow band). */
+  band1: number;
+  /** Nodes at depth 5+ (blue band). */
+  band2: number;
+}
+
+export interface CapabilityTreeLayout {
+  nodes: CapabilityTreeNode[];
+  edges: CapabilityTreeEdge[];
+  bounds: { x: number; y: number; width: number; height: number };
+  levelCounts: CapabilityTreeLevelCounts;
+}
+
+export function layoutCapabilityTree(
+  map: CapabilityMapHeader,
+  collapsedIds: Set<string> = new Set(),
+): CapabilityTreeLayout {
+  const nodes: CapabilityTreeNode[] = [];
+  const edges: CapabilityTreeEdge[] = [];
+
+  const colNextY = new Map<number, number>();
+  function getNextY(col: number): number {
+    return colNextY.get(col) ?? 0;
+  }
+  function advanceY(col: number, delta: number): void {
+    colNextY.set(col, (colNextY.get(col) ?? 0) + delta);
+  }
+
+  function placeNode(node: CapabilityNode, depth: number): { top: number; bottom: number } {
+    const isCollapsed = collapsedIds.has(node.id);
+    const hasChildren = Boolean(node.children?.length);
+    const visibleChildren = !isCollapsed && node.children?.length ? node.children : [];
+
+    const x = depth * (TREE_NODE_WIDTH + TREE_RANK_SEP);
+
+    if (visibleChildren.length === 0) {
+      const y = getNextY(depth);
+      advanceY(depth, TREE_NODE_HEIGHT + TREE_NODE_SEP);
+      nodes.push({ id: node.id, x, y, width: TREE_NODE_WIDTH, height: TREE_NODE_HEIGHT, data: node, depth, hasChildren, isCollapsed });
+      return { top: y, bottom: y + TREE_NODE_HEIGHT };
+    }
+
+    const childSpans: Array<{ top: number; bottom: number }> = [];
+    for (const child of visibleChildren) {
+      childSpans.push(placeNode(child, depth + 1));
+      edges.push({ source: node.id, target: child.id });
+    }
+
+    const spanTop = Math.min(...childSpans.map(s => s.top));
+    const spanBottom = Math.max(...childSpans.map(s => s.bottom));
+    const parentY = spanTop + (spanBottom - spanTop) / 2 - TREE_NODE_HEIGHT / 2;
+
+    const curColY = getNextY(depth);
+    const finalY = Math.max(parentY, curColY);
+    advanceY(depth, finalY - curColY + TREE_NODE_HEIGHT + TREE_NODE_SEP);
+
+    nodes.push({ id: node.id, x, y: finalY, width: TREE_NODE_WIDTH, height: TREE_NODE_HEIGHT, data: node, depth, hasChildren, isCollapsed });
+    return { top: Math.min(finalY, spanTop), bottom: Math.max(finalY + TREE_NODE_HEIGHT, spanBottom) };
+  }
+
+  for (const root of map.capabilities) {
+    placeNode(root, 0);
+    for (const [col, y] of colNextY) {
+      colNextY.set(col, y + TREE_NODE_SEP);
+    }
+  }
+
+  if (nodes.length === 0) {
+    return { nodes: [], edges: [], bounds: { x: 0, y: 0, width: 0, height: 0 }, levelCounts: { band0: 0, band1: 0, band2: 0 } };
+  }
+
+  const minX = Math.min(...nodes.map(n => n.x));
+  const minY = Math.min(...nodes.map(n => n.y));
+  const maxX = Math.max(...nodes.map(n => n.x + n.width));
+  const maxY = Math.max(...nodes.map(n => n.y + n.height));
+
+  const levelCounts: CapabilityTreeLevelCounts = { band0: 0, band1: 0, band2: 0 };
+  for (const n of nodes) {
+    if (n.depth <= 2) levelCounts.band0++;
+    else if (n.depth <= 4) levelCounts.band1++;
+    else levelCounts.band2++;
+  }
+
+  return { nodes, edges, bounds: { x: minX, y: minY, width: maxX - minX, height: maxY - minY }, levelCounts };
+}

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__/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

@@ -122,12 +122,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 };
 
@@ -288,11 +292,13 @@ export function parseCanonicalFGCA(input: unknown): CanonicalFGCAResult {
   });
 
   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'])),
       name: String(el!['name'] ?? ''),
       goal_id: goalRefs.length > 0 ? intId(goalRefs[0]) : null,
+      ...(typeVal !== undefined ? { type: typeVal } : {}),
     };
   });
 

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-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>;