@transitrix/diagrams 1.12.1 → 1.13.0

package/src/fgca/preview-layout.ts

@@ -7,7 +7,8 @@
 //
 // No React, no DOM, no vscode. Safe to call in Node.js or a test environment.
 
-import type { Scope } from '../scope.js';
+import type { ChainColumnKey, ChainScope, FgcaScope } from '../scope.js';
+import { isChainScope } from '../scope.js';
 import { ENTITY_NODE_SIZE } from '../node-size-presets.js';
 
 export type FGCAPreviewColumn = 'driver' | 'goal' | 'change' | 'activity';
@@ -32,6 +33,10 @@ export interface FGCAPreviewActivity {
   id: number | string;
   name: string;
   goal_id?: number | string | null;
+  progress?: {
+    percent: number;
+    computedAt: string;
+  };
 }
 
 /** Structural input the preview layout needs — a subset of the parsed DGCA/DGA doc. */
@@ -49,28 +54,227 @@ export interface FGCAPreviewLayoutOptions {
   colGap?: number;
   /** Vertical gap (px) between stacked nodes within a column. Default matches the historical hardcoded value. */
   rowGap?: number;
-  /** Trim to a level cap or a single root goal. Defaults to 'all'. */
-  scope?: Scope;
+  /** Trim to a level cap, a single root goal, or per-column chain filters. Defaults to 'all'. */
+  scope?: FgcaScope;
   /** Entity node width (px). Default {@link FGCA_NODE_W}. */
   nodeWidth?: number;
   /** Entity node height (px). Default {@link FGCA_NODE_H}. */
   nodeHeight?: number;
 }
 
+function sid(id: number | string): string {
+  return String(id);
+}
+
+interface ChainPath {
+  driverId?: string;
+  goalId?: string;
+  changeId?: string;
+  activityId?: string;
+}
+
+/**
+ * Every Driver–Goal–Change–Action thread in the document, plus a singleton
+ * path for any entity that is not on a connected thread (orphans). Used to
+ * AND column filters: a node stays visible when it appears on at least one
+ * path that includes every selected id.
+ */
+function enumerateChainPaths(doc: FGCAPreviewDoc): ChainPath[] {
+  const paths: ChainPath[] = [];
+  const seen = {
+    driver: new Set<string>(),
+    goal: new Set<string>(),
+    change: new Set<string>(),
+    activity: new Set<string>(),
+  };
+  const mark = (p: ChainPath): void => {
+    paths.push(p);
+    if (p.driverId) seen.driver.add(p.driverId);
+    if (p.goalId) seen.goal.add(p.goalId);
+    if (p.changeId) seen.change.add(p.changeId);
+    if (p.activityId) seen.activity.add(p.activityId);
+  };
+
+  const changes = doc.changes ?? [];
+
+  for (const g of doc.goals) {
+    const goalId = sid(g.id);
+    const driverIds = (g.factor ?? []).map(f => sid(f.id));
+    const drivers: Array<string | undefined> = driverIds.length > 0 ? driverIds : [undefined];
+
+    const goalChanges = changes.filter(c => sid(c.goal_id) === goalId);
+    const coveredActs = new Set(goalChanges.flatMap(c => c.activity_ids.map(sid)));
+    const directActs = doc.activities.filter(
+      a => a.goal_id != null && sid(a.goal_id) === goalId && !coveredActs.has(sid(a.id)),
+    );
+
+    const slots: Array<{ changeId?: string; activityIds: Array<string | undefined> }> = [];
+    for (const c of goalChanges) {
+      const acts = c.activity_ids.map(sid);
+      slots.push({ changeId: sid(c.id), activityIds: acts.length > 0 ? acts : [undefined] });
+    }
+    for (const a of directActs) {
+      slots.push({ changeId: undefined, activityIds: [sid(a.id)] });
+    }
+    if (slots.length === 0) {
+      slots.push({ changeId: undefined, activityIds: [undefined] });
+    }
+
+    for (const d of drivers) {
+      for (const slot of slots) {
+        for (const a of slot.activityIds) {
+          mark({ driverId: d, goalId, changeId: slot.changeId, activityId: a });
+        }
+      }
+    }
+  }
+
+  for (const f of doc.factors) {
+    const id = sid(f.id);
+    if (!seen.driver.has(id)) mark({ driverId: id });
+  }
+  for (const g of doc.goals) {
+    const id = sid(g.id);
+    if (!seen.goal.has(id)) mark({ goalId: id });
+  }
+  for (const c of changes) {
+    const id = sid(c.id);
+    if (!seen.change.has(id)) mark({ changeId: id, goalId: sid(c.goal_id) });
+  }
+  for (const a of doc.activities) {
+    const id = sid(a.id);
+    if (!seen.activity.has(id)) {
+      mark({ activityId: id, goalId: a.goal_id != null ? sid(a.goal_id) : undefined });
+    }
+  }
+
+  return paths;
+}
+
+function selectChainScopedFGCA(
+  doc: FGCAPreviewDoc,
+  scope: ChainScope,
+  hideChanges: boolean,
+): FGCAPreviewDoc {
+  const driverId = scope.driverId || undefined;
+  const goalId = scope.goalId || undefined;
+  const changeId = hideChanges ? undefined : (scope.changeId || undefined);
+  const activityId = scope.activityId || undefined;
+  if (!driverId && !goalId && !changeId && !activityId) return doc;
+
+  const matched = enumerateChainPaths(doc).filter(p => {
+    if (driverId && p.driverId !== driverId) return false;
+    if (goalId && p.goalId !== goalId) return false;
+    if (changeId && p.changeId !== changeId) return false;
+    if (activityId && p.activityId !== activityId) return false;
+    return true;
+  });
+
+  const driverIds = new Set<string>();
+  const goalIds = new Set<string>();
+  const changeIds = new Set<string>();
+  const activityIds = new Set<string>();
+  for (const p of matched) {
+    if (p.driverId) driverIds.add(p.driverId);
+    if (p.goalId) goalIds.add(p.goalId);
+    if (p.changeId) changeIds.add(p.changeId);
+    if (p.activityId) activityIds.add(p.activityId);
+  }
+
+  return {
+    factors: doc.factors.filter(f => driverIds.has(sid(f.id))),
+    goals: doc.goals.filter(g => goalIds.has(sid(g.id))),
+    changes: doc.changes === undefined ? undefined : doc.changes.filter(c => changeIds.has(sid(c.id))),
+    activities: doc.activities.filter(a => activityIds.has(sid(a.id))),
+  };
+}
+
+const CHAIN_COLUMN_KEYS: ChainColumnKey[] = ['driverId', 'goalId', 'changeId', 'activityId'];
+
+function columnEntities(
+  doc: FGCAPreviewDoc,
+  column: ChainColumnKey,
+): Array<{ id: string; name: string }> {
+  if (column === 'driverId') return doc.factors.map(f => ({ id: sid(f.id), name: f.name ?? '' }));
+  if (column === 'goalId') return doc.goals.map(g => ({ id: sid(g.id), name: g.name ?? '' }));
+  if (column === 'changeId') return (doc.changes ?? []).map(c => ({ id: sid(c.id), name: c.name ?? '' }));
+  return doc.activities.map(a => ({ id: sid(a.id), name: a.name ?? '' }));
+}
+
+/**
+ * Dropdown options for one chain column, cascaded from the other selected
+ * filters (this column's own filter is ignored so the user can still switch it).
+ */
+export function chainColumnOptions(
+  doc: FGCAPreviewDoc,
+  scope: ChainScope,
+  column: ChainColumnKey,
+  hideChanges = false,
+): Array<{ id: string; name: string }> {
+  if (hideChanges && column === 'changeId') return [];
+  const withoutSelf: ChainScope = { ...scope, mode: 'chain', [column]: undefined };
+  const filtered = selectChainScopedFGCA(doc, withoutSelf, hideChanges);
+  return columnEntities(filtered, column);
+}
+
+/**
+ * Drop column filters that are no longer reachable given the others.
+ * `justChanged` is kept even when incompatible — the last pick wins, neighbours yield.
+ */
+export function sanitizeChainScope(
+  doc: FGCAPreviewDoc,
+  scope: ChainScope,
+  opts: { justChanged?: ChainColumnKey; hideChanges?: boolean } = {},
+): ChainScope {
+  const next: ChainScope = {
+    mode: 'chain',
+    driverId: scope.driverId || undefined,
+    goalId: scope.goalId || undefined,
+    changeId: opts.hideChanges ? undefined : (scope.changeId || undefined),
+    activityId: scope.activityId || undefined,
+  };
+
+  let changed = true;
+  while (changed) {
+    changed = false;
+    for (const key of CHAIN_COLUMN_KEYS) {
+      if (key === opts.justChanged) continue;
+      if (opts.hideChanges && key === 'changeId') continue;
+      const id = next[key];
+      if (!id) continue;
+      const available = new Set(chainColumnOptions(doc, next, key, opts.hideChanges).map(o => o.id));
+      if (!available.has(id)) {
+        next[key] = undefined;
+        changed = true;
+      }
+    }
+  }
+  return next;
+}
+
 /**
  * Trims a DGCA/DGA doc to a scope.
  *
  * DGCA/DGA goals are flat (no parent_id), so:
  *   - 'level' → goals with `(level ?? 0) <= maxLevel`.
  *   - 'root'  → the single goal whose id matches `rootGoalId` (empty when absent).
+ *   - 'chain' → AND of per-column ids (Driver / Goal / Change / Action); empty
+ *               ids are All. DGA passes hideChanges so a Change filter is ignored.
  *
  * Factors, changes and activities are then kept only when they touch a visible
  * goal: a factor referenced by a visible goal, a change whose `goal_id` is
  * visible, an activity bound to a visible goal directly or via a visible
  * change. Pure and exported so an access-control layer can reuse it.
  */
-export function selectScopedFGCA(doc: FGCAPreviewDoc, scope: Scope): FGCAPreviewDoc {
+export function selectScopedFGCA(
+  doc: FGCAPreviewDoc,
+  scope: FgcaScope,
+  opts: { hideChanges?: boolean } = {},
+): FGCAPreviewDoc {
   if (scope.mode === 'all') return doc;
+  if (isChainScope(scope)) {
+    return selectChainScopedFGCA(doc, scope, opts.hideChanges === true);
+  }
 
   const visibleGoals =
     scope.mode === 'level'
@@ -104,6 +308,13 @@ export interface FGCAPreviewNode {
   y: number;
   label: string;
   col: FGCAPreviewColumn;
+  type?: string;
+  progress?: {
+    percent: number;
+    computedAt: string;
+  };
+  /** Marks a synthesized node (e.g. virtual Change) vs. a real entity. */
+  virtual?: boolean;
 }
 export interface FGCAPreviewEdge {
   sx: number;
@@ -147,18 +358,33 @@ export function layoutFGCAPreview(
   } = options;
 
   // Trim to scope first; everything below lays out the visible subset only.
-  const doc = selectScopedFGCA(inputDoc, scope);
+  const doc = selectScopedFGCA(inputDoc, scope, { hideChanges });
 
   const colStride = nodeWidth + colGap;
   const cols: FGCAPreviewColumn[] = hideChanges
     ? ['driver', 'goal', 'activity']
     : ['driver', 'goal', 'change', 'activity'];
   const changes = doc.changes ?? [];
-  const colItems: Record<FGCAPreviewColumn, Array<{ id: string; label: string }>> = {
+  const coveredActivities = new Set(changes.flatMap(c => c.activity_ids.map(String)));
+
+  // Synthesize virtual Change nodes for activities without a real Change.
+  // Each virtual node is 1:1 with one activity (not shared across activities).
+  const virtualChanges: Array<{ id: string; activityId: string; goalId: string }> = [];
+  for (const a of doc.activities) {
+    if (a.goal_id != null && !coveredActivities.has(String(a.id))) {
+      const virtualId = `vchange_activity_${a.id}`;
+      virtualChanges.push({ id: virtualId, activityId: String(a.id), goalId: String(a.goal_id) });
+    }
+  }
+
+  const colItems: Record<FGCAPreviewColumn, Array<{ id: string; label: string; type?: string; progress?: { percent: number; computedAt: string }; virtual?: boolean }>> = {
     driver:   doc.factors.map(f => ({ id: `driver_${f.id}`,     label: f.name })),
     goal:     doc.goals.map(g   => ({ id: `goal_${g.id}`,       label: g.name })),
-    change:   changes.map(c     => ({ id: `change_${c.id}`,     label: c.name })),
-    activity: doc.activities.map(a => ({ id: `activity_${a.id}`, label: a.name })),
+    change:   [
+      ...changes.map(c => ({ id: `change_${c.id}`, label: c.name })),
+      ...virtualChanges.map(v => ({ id: v.id, label: '–', virtual: true })),
+    ],
+    activity: doc.activities.map(a => ({ id: `activity_${a.id}`, label: a.name, progress: a.progress })),
   };
 
   // Build predecessor map: for each node, which node IDs in the previous column
@@ -171,12 +397,17 @@ export function layoutFGCAPreview(
     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 v of virtualChanges) {
+      predecessors.set(v.id, [`goal_${v.goalId}`]);
+    }
     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}`);
+      const virtualChange = virtualChanges.find(v => v.activityId === String(a.id));
+      if (virtualChange) {
+        preds.push(virtualChange.id);
+      }
       predecessors.set(`activity_${a.id}`, preds);
     }
   } else {
@@ -198,9 +429,9 @@ export function layoutFGCAPreview(
   // Nodes with no predecessors sort last (Infinity barycenter) so they don't
   // displace connected nodes.
   function barycentricSort(
-    items: Array<{ id: string; label: string }>,
+    items: Array<{ id: string; label: string; type?: string; progress?: { percent: number; computedAt: string }; virtual?: boolean }>,
     yCenters: Map<string, number>,
-  ): Array<{ id: string; label: string }> {
+  ): Array<{ id: string; label: string; type?: string; progress?: { percent: number; computedAt: string }; virtual?: boolean }> {
     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);
@@ -222,7 +453,16 @@ export function layoutFGCAPreview(
     const items = ci === 0 ? colItems[col] : barycentricSort(colItems[col], yCenters);
     let y = FGCA_PAD + FGCA_HEADER_H + rowGap;
     for (const item of items) {
-      const node: FGCAPreviewNode = { id: item.id, x, y, label: item.label, col };
+      const node: FGCAPreviewNode = {
+        id: item.id,
+        x,
+        y,
+        label: item.label,
+        col,
+        type: item.type,
+        progress: item.progress,
+        virtual: item.virtual,
+      };
       nodes.push(node);
       nodeMap.set(item.id, node);
       yCenters.set(item.id, y + nodeHeight / 2);
@@ -257,12 +497,8 @@ export function layoutFGCAPreview(
   } else {
     for (const c of changes) addEdge(`goal_${c.goal_id}`, `change_${c.id}`);
     for (const c of changes) for (const aid of c.activity_ids) addEdge(`change_${c.id}`, `activity_${aid}`);
-    const coveredActivities = new Set(changes.flatMap(c => c.activity_ids));
-    for (const a of doc.activities) {
-      if (a.goal_id != null && !coveredActivities.has(a.id)) {
-        addEdge(`goal_${a.goal_id}`, `activity_${a.id}`);
-      }
-    }
+    for (const v of virtualChanges) addEdge(`goal_${v.goalId}`, v.id);
+    for (const v of virtualChanges) addEdge(v.id, `activity_${v.activityId}`);
   }
 
   const maxNodeBottom = nodes.reduce(

package/src/fgca/types.ts

@@ -25,6 +25,10 @@ export interface ActivityItem {
   activity_type_id?: number;
   /** Canonical values: initiative | programme | project | work_package. Unknown values pass through without error. */
   type?: string;
+  progress?: {
+    percent: number;
+    computedAt: string;
+  };
 }
 
 export interface ActivityTypeItem {

package/src/scope.ts

@@ -20,12 +20,38 @@ export type Scope =
   | { mode: 'level'; maxLevel: number }
   | { mode: 'root'; rootGoalId: string };
 
+/** Column filters on a DGCA/DGA chain. Empty / omitted id = All for that column. */
+export type ChainColumnKey = 'driverId' | 'goalId' | 'changeId' | 'activityId';
+
+export type ChainScope = {
+  mode: 'chain';
+  driverId?: string;
+  goalId?: string;
+  changeId?: string;
+  activityId?: string;
+};
+
+/** Scope accepted by DGCA/DGA layout — Goals tree still uses {@link Scope} only. */
+export type FgcaScope = Scope | ChainScope;
+
 /** Default scope — render everything. */
 export const SCOPE_ALL: Scope = { mode: 'all' };
 
+export function isChainScope(scope: FgcaScope): scope is ChainScope {
+  return scope.mode === 'chain';
+}
+
+/** True when at least one column filter is set. */
+export function chainScopeActive(scope: ChainScope): boolean {
+  return !!(scope.driverId || scope.goalId || scope.changeId || scope.activityId);
+}
+
 /** Warning code emitted when a root-mode scope names a goal that isn't in the document. */
 export const SCOPE_MISSING_ROOT_CODE = 'SCOPE-001';
 
+/** Warning code emitted when a chain-column filter names an id that isn't in the document. */
+export const SCOPE_MISSING_CHAIN_CODE = 'SCOPE-002';
+
 /**
  * Returns the SCOPE-001 warning when `scope` is root-mode and `rootGoalId` is
  * not among the document's goal ids; otherwise null. Goal ids are compared as
@@ -44,3 +70,38 @@ export function checkScopeRoot(scope: Scope, goalIds: Iterable<string | number>)
     message: `Scope root goal "${scope.rootGoalId}" was not found in this document — nothing to show. Clear the scope or pick a goal that exists.`,
   };
 }
+
+function idSetHas(ids: Iterable<string | number>, want: string): boolean {
+  for (const id of ids) {
+    if (String(id) === want) return true;
+  }
+  return false;
+}
+
+/**
+ * Returns a SCOPE-002 warning when a chain filter names an id that is not in
+ * the document's corresponding column; otherwise null. Several missing ids
+ * are listed in one message.
+ */
+export function checkChainScope(
+  scope: ChainScope,
+  ids: {
+    drivers: Iterable<string | number>;
+    goals: Iterable<string | number>;
+    changes: Iterable<string | number>;
+    activities: Iterable<string | number>;
+  },
+  hideChanges = false,
+): ValidationWarning | null {
+  if (scope.mode !== 'chain') return null;
+  const missing: string[] = [];
+  if (scope.driverId && !idSetHas(ids.drivers, scope.driverId)) missing.push(`driver "${scope.driverId}"`);
+  if (scope.goalId && !idSetHas(ids.goals, scope.goalId)) missing.push(`goal "${scope.goalId}"`);
+  if (!hideChanges && scope.changeId && !idSetHas(ids.changes, scope.changeId)) missing.push(`change "${scope.changeId}"`);
+  if (scope.activityId && !idSetHas(ids.activities, scope.activityId)) missing.push(`action "${scope.activityId}"`);
+  if (missing.length === 0) return null;
+  return {
+    code: SCOPE_MISSING_CHAIN_CODE,
+    message: `Scope ${missing.join(', ')} was not found in this document — nothing to show for that filter. Clear the scope or pick an id that exists.`,
+  };
+}

package/src/theme/themes.ts

@@ -4,6 +4,7 @@ import {
   MATURITY_COLORS,
   TREE_LEVEL_COLORS,
   TREE_MATURITY_COLORS,
+  VIRTUAL_ENTITY,
   STRUCTURAL,
   BRAND_EMPHASIS,
   TYPOGRAPHY,
@@ -97,6 +98,7 @@ function diagramVars(variant: 'light' | 'dark' | 'hc'): string {
     `${CSS_VAR.layerGoal}:${lc.goal[variant]}`,
     `${CSS_VAR.layerChange}:${lc.change[variant]}`,
     `${CSS_VAR.layerActivity}:${lc.activity[variant]}`,
+    `${CSS_VAR.virtualEntity}:${VIRTUAL_ENTITY[variant]}`,
     `${CSS_VAR.nodeStroke}:${sc.nodeStroke[variant]}`,
     `${CSS_VAR.edgeStroke}:${sc.edgeStroke[variant]}`,
     `${CSS_VAR.textPrimary}:${sc.textPrimary[variant]}`,
@@ -155,6 +157,7 @@ function diagramClassCss(): string {
 .layer-goal{fill:var(${cv.layerGoal});}
 .layer-change{fill:var(${cv.layerChange});}
 .layer-activity{fill:var(${cv.layerActivity});}
+.layer-virtual{fill:var(${cv.virtualEntity});stroke-dasharray:4,3;}
 ${levelRules}
 .diagram-edge{stroke:var(${cv.edgeStroke});stroke-width:1.5;fill:none;}
 .arrow-fill{fill:var(${cv.edgeStroke});}

package/src/theme/tokens.ts

@@ -42,6 +42,18 @@ export const LAYER_COLORS = {
   activity: { light: '#b4e0ee', dark: '#1a414e', hc: '#4ade80' },
 } as const;
 
+/**
+ * Virtual/synthesized entity fill — used for placeholder nodes that represent
+ * absence (e.g. a synthesized Change box when an Action skips straight to its Goal).
+ * Pale neutral tint, distinctly muted from real entity colors; border dashed to
+ * signal non-reality.
+ */
+export const VIRTUAL_ENTITY = {
+  light: '#f3f4f6',
+  dark:  '#2a3134',
+  hc:    '#e2e8f0',
+} as const;
+
 /**
  * Level fill colors for Goals tree nodes — 8 slots, cycled by level index.
  * A single-hue petrol tint ramp (level-0 lightest/root → level-7 deepest);
@@ -188,6 +200,7 @@ export const CSS_VAR = {
   layerGoal:        '--ts-layer-goal',
   layerChange:      '--ts-layer-change',
   layerActivity:    '--ts-layer-activity',
+  virtualEntity:    '--ts-virtual-entity',
   nodeStroke:       '--ts-node-stroke',
   edgeStroke:       '--ts-edge-stroke',
   textPrimary:      '--ts-text-primary',

package/src/webview/entry.ts

@@ -198,7 +198,10 @@ function dispatchValidate(kind: NotationKind, doc: unknown): RenderResult {
         : Array.isArray(meta['__outOfScopeFactorIds'])
           ? new Set(meta['__outOfScopeFactorIds'] as string[])
           : undefined;
-      const v = parseCanonicalFGCA(doc, outOfScopeGoalIds, outOfScopeFactorIds);
+      const progressData = meta['__progressData'] instanceof Map
+        ? (meta['__progressData'] as Map<string, { percent: number; computedAt: string }>)
+        : undefined;
+      const v = parseCanonicalFGCA(doc, outOfScopeGoalIds, outOfScopeFactorIds, progressData);
       const r = emptyResult(kind, v.valid ? 'ok' : 'error');
       r.errors.push(...v.errors);
       r.warnings.push(...v.warnings);
@@ -219,7 +222,10 @@ function dispatchValidate(kind: NotationKind, doc: unknown): RenderResult {
         : Array.isArray(meta['__outOfScopeFactorIds'])
           ? new Set(meta['__outOfScopeFactorIds'] as string[])
           : undefined;
-      const v = parseCanonicalFGA(doc, outOfScopeGoalIds, outOfScopeFactorIds);
+      const progressData = meta['__progressData'] instanceof Map
+        ? (meta['__progressData'] as Map<string, { percent: number; computedAt: string }>)
+        : undefined;
+      const v = parseCanonicalFGA(doc, outOfScopeGoalIds, outOfScopeFactorIds, progressData);
       const r = emptyResult(kind, v.valid ? 'ok' : 'error');
       r.errors.push(...v.errors);
       r.warnings.push(...v.warnings);

package/src/webview/render-fgca.ts

@@ -21,7 +21,7 @@ import {
   type FGCAPreviewColumn,
 } from '../fgca/preview-layout.js';
 import type { FGCADoc } from '../fgca/validate.js';
-import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { previewEdgePath, DEFAULT_EDGE_CURVATURE, type EdgeStyle } from '../edge-path.js';
 import { parseNodeSizePreset, resolveDgcaNodeSize, type NodeSizePreset } from '../node-size-presets.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
 import { emitCenteredTextSvg, layoutCenteredEntityText, truncateLine } from './entity-text-layout.js';
@@ -39,6 +39,7 @@ type FgcaLayout = ReturnType<typeof layoutFGCAPreview>;
 export interface RenderFgcaBodyOptions {
   nodeWidth?: number;
   nodeHeight?: number;
+  edgeStyle?: EdgeStyle;
 }
 
 /**
@@ -60,7 +61,9 @@ export function renderFgcaBody(
 ): string {
   const nodeWidth = bodyOptions.nodeWidth ?? FGCA_NODE_W;
   const nodeHeight = bodyOptions.nodeHeight ?? FGCA_NODE_H;
+  const edgeStyle = bodyOptions.edgeStyle;
   const headerTruncate = Math.max(8, Math.floor((nodeWidth - 16) / 7));
+  const STALENESS_THRESHOLD_MS = 7 * 24 * 60 * 60 * 1000;
 
   const headerSvg = columns
     .map(({ col, x }) =>
@@ -71,13 +74,14 @@ export function renderFgcaBody(
   const edgeSvg = edges
     .map(
       (e) =>
-        `<path d="${horizontalCubicEdgePath(e.sx, e.sy, e.tx, e.ty, curvature, entryCurvature)}" class="diagram-edge" marker-end="url(#arrow)"/>`,
+        `<path d="${previewEdgePath(e.sx, e.sy, e.tx, e.ty, edgeStyle, curvature, entryCurvature)}" class="diagram-edge" marker-end="url(#arrow)"/>`,
     )
     .join('\n');
 
   const nodeSvg = nodes
     .map((n) => {
       const entityId = n.id.slice(n.id.indexOf('_') + 1);
+      const nodeClass = n.virtual ? 'diagram-node layer-virtual' : `diagram-node layer-${n.col}`;
       const specs = layoutCenteredEntityText({
         boxX: n.x,
         boxY: n.y,
@@ -89,10 +93,29 @@ export function renderFgcaBody(
         idMaxLines: 1,
       });
       const textSvg = emitCenteredTextSvg(specs, n.x + nodeWidth / 2, escXml);
+      const titleContent = `${escXml(n.label)} (${escXml(entityId)})`;
+      const typeBadge = n.type && n.col === 'activity'
+        ? `<text class="text-id" x="${n.x + nodeWidth - 6}" y="${n.y + 10}" text-anchor="end" dominant-baseline="hanging" font-size="10">${escXml(n.type)}</text>`
+        : '';
+      const progressBadge = n.progress && n.col === 'activity'
+        ? (() => {
+            const computedAt = new Date(n.progress.computedAt);
+            const now = new Date();
+            const isStale = now.getTime() - computedAt.getTime() > STALENESS_THRESHOLD_MS;
+            const className = isStale ? 'text-id' : 'text-id';
+            const opacity = isStale ? ' opacity="0.5"' : '';
+            return `<text class="${className}" x="${n.x + nodeWidth - 6}" y="${n.y + 22}" text-anchor="end" dominant-baseline="hanging" font-size="10"${opacity}>${escXml(n.progress.percent + '%')}</text>`;
+          })()
+        : '';
       return [
-        `<rect class="diagram-node layer-${n.col}" x="${n.x}" y="${n.y}" width="${nodeWidth}" height="${nodeHeight}" rx="8"/>`,
+        `<g>`,
+        `<title>${titleContent}</title>`,
+        `<rect class="${nodeClass}" x="${n.x}" y="${n.y}" width="${nodeWidth}" height="${nodeHeight}" rx="8"/>`,
         textSvg,
-      ].join('\n');
+        typeBadge,
+        progressBadge,
+        `</g>`,
+      ].filter(Boolean).join('\n');
     })
     .join('\n');
 
@@ -108,6 +131,7 @@ export interface RenderFgcaOptions {
   curvature?: number;
   /** Entry curvature at the target node; defaults to `curvature` when omitted. */
   entryCurvature?: number;
+  edgeStyle?: EdgeStyle;
   nodeSizePreset?: NodeSizePreset;
   layoutOptions?: Parameters<typeof layoutFGCAPreview>[1];
   /** Show scope caption when goal-scoped projection omits goals that reference out-of-scope goals. */
@@ -120,6 +144,7 @@ export function renderFgcaSvg(doc: FGCADoc, options: RenderFgcaOptions = {}): st
     title = '',
     curvature = DEFAULT_EDGE_CURVATURE,
     entryCurvature,
+    edgeStyle,
     nodeSizePreset = 'normal',
     layoutOptions,
     scopeCaption = false,
@@ -141,6 +166,7 @@ export function renderFgcaSvg(doc: FGCADoc, options: RenderFgcaOptions = {}): st
   const body = renderFgcaBody(columns, nodes, edges, curvature, entryCurvature, {
     nodeWidth: nodeSize.width,
     nodeHeight: nodeSize.height,
+    edgeStyle,
   });
 
   const titleSvg = title