@transitrix/diagrams 1.0.1 → 1.2.0

package/src/webview/render-activities.ts

@@ -11,6 +11,10 @@
  * Only the DEFAULT network view (Project Schedule Network Diagram) is ported.
  * The Gantt view, the CSS-only tab switcher and the interactive spacing /
  * curvature controls stay in the VS Code preview.
+ *
+ * Single-emitter unification (review C): the canonical network body lives here
+ * in `renderActivitiesNetworkBody` and is shared verbatim with the VS Code
+ * preview's `networkSvg`.
  */
 import { layoutActivities } from '../activities/layout.js';
 import { computeCpm } from '../activities/cpm.js';
@@ -27,22 +31,110 @@ const N_NODE_W = 200;
 const N_NODE_H = 80;
 const N_PAD = 24;
 
-// Activities-specific diagram CSS. Mirrors `ACTIVITIES_DIAGRAM_CSS` from the
-// VS Code preview — the rules that shape the network diagram itself (critical
-// path, milestones, edge colours). Embedded alongside the shared theme CSS so
-// the SVG is self-contained for the JCEF host.
-const ACTIVITIES_DIAGRAM_CSS = `
-  .act-node { fill: var(--ts-bg-surface, #f8fafc); stroke: var(--ts-border, #94a3b8); stroke-width: 1.5; }
+/**
+ * Network-view diagram CSS (critical path, milestones, edge colours) — the
+ * canonical rules shared with the VS Code preview's `ACTIVITIES_DIAGRAM_CSS`
+ * network subset. Embedded alongside the shared theme CSS so the SVG is
+ * self-contained for the JCEF host.
+ */
+export const ACTIVITIES_NETWORK_CSS = `
+  .act-node { fill: var(--ts-layer-activity, #d4edda); stroke: var(--ts-node-stroke, #94a3b8); stroke-width: 1; }
   .critical-node { fill: #fff7ed; stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 2.5; }
   .milestone-node { fill: #ecfeff; stroke: var(--ts-text-muted, #64748b); stroke-dasharray: 4 2; }
   .critical-edge { stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 2; }
   .arrow-fill-critical { fill: var(--ts-brand-orange, #ff4d00); }
 `;
 
+/** Arrowhead marker defs shared by both hosts for the network view. */
+export const ACTIVITIES_NETWORK_DEFS = `<defs>
+  <marker id="arrow" markerWidth="8" markerHeight="8" refX="8" refY="3" orient="auto">
+    <path d="M0,0 L0,6 L8,3 z" class="arrow-fill"/>
+  </marker>
+  <marker id="arrow-crit" markerWidth="8" markerHeight="8" refX="8" refY="3" orient="auto">
+    <path d="M0,0 L0,6 L8,3 z" class="arrow-fill-critical"/>
+  </marker>
+</defs>`;
+
 function truncate(s: string, maxLen: number): string {
   return s.length > maxLen ? s.slice(0, maxLen - 1) + '…' : s;
 }
 
+/**
+ * Canonical Network (PSND) body — the node rects and edge paths that go inside
+ * the `<svg>`, shared verbatim by the VS Code preview and the host-neutral
+ * wrapper below. Excludes the host-specific title block and the (identical)
+ * marker defs (`ACTIVITIES_NETWORK_DEFS`).
+ *
+ * `ox`/`oy` are the canvas offsets (the caller folds in padding + any title
+ * height); `curvature`/`entryCurvature` scale the exit/entry edge handles.
+ */
+export function renderActivitiesNetworkBody(
+  layout: ActivitiesLayout,
+  cpm: ReturnType<typeof computeCpm>,
+  ox: number,
+  oy: number,
+  curvature: number,
+  entryCurvature: number | undefined,
+): string {
+  const nodeMap = new Map(layout.nodes.map((n) => [n.id, n]));
+
+  // SVG paints later siblings over earlier ones. Sort non-critical first so the
+  // bright orange critical-path edges land on top — a gray edge crossing an
+  // orange one shouldn't bury the critical signal.
+  const orderedEdges = [...layout.edges].sort(
+    (a, b) => Number(Boolean(a.isCritical)) - Number(Boolean(b.isCritical)),
+  );
+
+  const edgeSvg = orderedEdges
+    .map((e) => {
+      const s = nodeMap.get(e.sourceId);
+      const t = nodeMap.get(e.targetId);
+      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;
+      const cls = e.isCritical ? 'diagram-edge critical-edge' : 'diagram-edge';
+      const marker = `url(#${e.isCritical ? 'arrow-crit' : 'arrow'})`;
+      return `<path d="${horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature)}" class="${cls}" marker-end="${marker}"/>`;
+    })
+    .join('\n');
+
+  const nodeSvg = layout.nodes
+    .map((n) => {
+      const x = n.x + ox;
+      const y = n.y + oy;
+      const isCritical = cpm.get(n.id)?.isCritical ?? false;
+      const durVal = n.data.duration;
+      const isMilestone = (durVal ?? -1) === 0;
+      const cls = `diagram-node act-node ${isCritical ? 'critical-node' : ''} ${isMilestone ? 'milestone-node' : ''}`.trim();
+      const idLabel = escXml(n.id);
+      const words = n.data.name.split(' ');
+      let line1 = '';
+      let line2 = '';
+      for (const w of words) {
+        if ((line1 + ' ' + w).trim().length <= 24) line1 = (line1 + ' ' + w).trim();
+        else if ((line2 + ' ' + w).trim().length <= 24) line2 = (line2 + ' ' + w).trim();
+        else if (!line2) { line2 = w.slice(0, 22) + '…'; break; }
+      }
+      const twoLines = line2.length > 0;
+      const nameY1 = twoLines ? y + 18 : y + 28;
+      const nameY2 = y + 34;
+      const idY = twoLines ? y + 54 : y + 50;
+      const durLabel = (durVal !== undefined && durVal > 0) ? `${durVal}d` : '';
+      return [
+        `<rect class="${cls}" x="${x}" y="${y}" width="${N_NODE_W}" height="${N_NODE_H}" rx="8"/>`,
+        `<text class="text-primary" x="${x + N_NODE_W / 2}" y="${nameY1}" text-anchor="middle" dominant-baseline="central">${escXml(line1)}</text>`,
+        twoLines ? `<text class="text-primary" x="${x + N_NODE_W / 2}" y="${nameY2}" text-anchor="middle" dominant-baseline="central">${escXml(line2)}</text>` : '',
+        `<text class="text-id" x="${x + N_NODE_W / 2}" y="${idY}" text-anchor="middle" dominant-baseline="central">${idLabel}</text>`,
+        durLabel ? `<text class="text-secondary" x="${x + N_NODE_W - 8}" y="${y + N_NODE_H - 8}" text-anchor="end">${durLabel}</text>` : '',
+      ].filter(Boolean).join('\n');
+    })
+    .join('\n');
+
+  return `${nodeSvg}\n${edgeSvg}`;
+}
+
 export interface RenderActivitiesOptions {
   /** Optional heading rendered as a `text-header` above the diagram. */
   title?: string;
@@ -84,75 +176,23 @@ export function renderActivitiesSvg(doc: ActivityDoc, options: RenderActivitiesO
   const ox = -layout.bounds.x + N_PAD;
   const oy = -layout.bounds.y + N_PAD + titleH;
 
-  const nodeMap = new Map(layout.nodes.map((n) => [n.id, n]));
-
-  // SVG paints later siblings over earlier ones. Sort non-critical first so the
-  // bright orange critical-path edges land on top — a gray edge crossing an
-  // orange one shouldn't bury the critical signal.
-  const orderedEdges = [...layout.edges].sort(
-    (a, b) => Number(Boolean(a.isCritical)) - Number(Boolean(b.isCritical)),
-  );
-
-  // Edge path = a single cubic Bézier with horizontal control handles (shared
-  // geometry in `edge-path.js`), so the curve meets the vertical node edge at a
-  // right angle and the marker-end arrow reads as perpendicular.
-  const edgeSvg = orderedEdges
-    .map((e) => {
-      const s = nodeMap.get(e.sourceId);
-      const t = nodeMap.get(e.targetId);
-      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;
-      const cls = e.isCritical ? 'diagram-edge critical-edge' : 'diagram-edge';
-      const marker = `url(#${e.isCritical ? 'arrow-crit' : 'arrow'})`;
-      return `<path d="${horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature)}" class="${cls}" marker-end="${marker}"/>`;
-    })
-    .join('\n');
-
-  const nodeSvg = layout.nodes
-    .map((n) => {
-      const x = n.x + ox;
-      const y = n.y + oy;
-      const isCritical = cpm.get(n.id)?.isCritical ?? false;
-      const isMilestone = (n.data.duration ?? -1) === 0;
-      const cls = `diagram-node act-node ${isCritical ? 'critical-node' : ''} ${isMilestone ? 'milestone-node' : ''}`.trim();
-      const idLabel = escXml(n.id);
-      const nameLabel = escXml(truncate(n.data.name, 24));
-      const durLabel = n.data.duration !== undefined ? `${n.data.duration}d` : '—';
-      return [
-        `<rect class="${cls}" x="${x}" y="${y}" width="${N_NODE_W}" height="${N_NODE_H}" rx="6"/>`,
-        `<text class="text-id" x="${x + 8}" y="${y + 18}">${idLabel}</text>`,
-        `<text class="text-primary" x="${x + N_NODE_W / 2}" y="${y + N_NODE_H / 2}" text-anchor="middle" dominant-baseline="central">${nameLabel}</text>`,
-        `<text class="text-secondary" x="${x + N_NODE_W - 8}" y="${y + N_NODE_H - 10}" text-anchor="end">${escXml(durLabel)}</text>`,
-      ].join('\n');
-    })
-    .join('\n');
+  const body = renderActivitiesNetworkBody(layout, cpm, ox, oy, curvature, entryCurvature);
 
   const titleSvg = title
     ? `<text class="text-header" x="${N_PAD}" y="${N_PAD - 6}">${escXml(title)}</text>`
     : '';
 
-  // Embed the shared theme CSS plus the activities-specific diagram CSS inside
-  // the SVG so the rendered output is self-contained — the JCEF host page only
-  // needs to drop the SVG into the DOM and styling resolves without any
-  // cooperation from the host stylesheet. Matches what the VS Code path
-  // produces via `prepareSvgForExport`.
-  const embedCss = generateSvgEmbedCss('transitrix') + ACTIVITIES_DIAGRAM_CSS;
+  // Embed the shared theme CSS plus the network diagram CSS inside the SVG so
+  // the rendered output is self-contained — the JCEF host page only needs to
+  // drop the SVG into the DOM and styling resolves without any cooperation from
+  // the host stylesheet. Matches what the VS Code path produces via
+  // `prepareSvgForExport`.
+  const embedCss = generateSvgEmbedCss('transitrix') + ACTIVITIES_NETWORK_CSS;
 
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
 <style>${embedCss}</style>
-<defs>
-  <marker id="arrow" markerWidth="8" markerHeight="8" refX="8" refY="3" orient="auto">
-    <path d="M0,0 L0,6 L8,3 z" class="arrow-fill"/>
-  </marker>
-  <marker id="arrow-crit" markerWidth="8" markerHeight="8" refX="8" refY="3" orient="auto">
-    <path d="M0,0 L0,6 L8,3 z" class="arrow-fill-critical"/>
-  </marker>
-</defs>
+${ACTIVITIES_NETWORK_DEFS}
 ${titleSvg}
-${nodeSvg}
-${edgeSvg}
+${body}
 </svg>`;
 }

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

@@ -75,7 +75,16 @@ function resolveSingleDoc(doc: ActivityCardDoc): ResolvedActivityCard {
   };
 }
 
-function buildBody(layout: ActivityCardLayout, ox: number, oy: number): string {
+/**
+ * The single Activity Card SVG body emitter shared by every host. Takes an
+ * already-laid-out {@link ActivityCardLayout} plus the canvas offset and emits
+ * the body elements (card, header, badges, dates, chain sections, milestones,
+ * child activities, footer) — everything except the host chrome (`<defs>`
+ * marker, title, embedded CSS, `<svg>` wrapper). The VS Code preview and the
+ * host-neutral {@link renderActivityCardSvg} both build their own chrome around
+ * this single source of truth.
+ */
+export function renderActivityCardBody(layout: ActivityCardLayout, ox: number, oy: number): string {
   const parts: string[] = [];
 
   // Outer card.
@@ -245,7 +254,7 @@ export function renderActivityCardSvg(
   const ox = PAD;
   const oy = PAD + titleH;
 
-  const body = buildBody(layout, ox, oy);
+  const body = renderActivityCardBody(layout, ox, oy);
 
   const titleSvg = title
     ? `<text class="text-header" x="${PAD}" y="${PAD + 14}">${escXml(`Activity Card — ${title}`)}</text>`

package/src/webview/render-blocks.ts

@@ -14,11 +14,16 @@
  */
 import { layoutNestedBlocks } from '../blocks/layout.js';
 import type { BlocksFile, BlocksLayout, LaidOutBlock } from '../blocks/types.js';
-import { generateSvgEmbedCss } from '../theme/index.js';
+import { generateSvgEmbedCss, type ThemeId } from '../theme/index.js';
 import { escXml } from './render-util.js';
 
 const PAD = 24;
 
+// Approximate character width (px) at text-primary size (12px/600).
+const CHAR_W = 7;
+// Approximate character width (px) at text-id size (10px/600) — used for ID suffix.
+const CHAR_W_ID = 6;
+
 export interface RenderBlocksOptions {
   title?: string;
 }
@@ -36,27 +41,89 @@ function levelClassForDepth(depth: number): string {
   return `level-${idx}`;
 }
 
-function truncate(text: string, maxChars: number): string {
+/** Truncate at a word boundary so labels never break in the middle of a word. */
+function wordTruncate(text: string, maxChars: number): string {
   if (text.length <= maxChars) return text;
-  return text.slice(0, Math.max(0, maxChars - 1)) + '…';
+  const cut = text.slice(0, maxChars - 1);
+  const lastSpace = cut.lastIndexOf(' ');
+  return (lastSpace > maxChars / 2 ? cut.slice(0, lastSpace) : cut) + '…';
 }
 
 function emitBlockSvg(b: LaidOutBlock, ox: number, oy: number, parts: string[]): void {
   const cls = levelClassForDepth(b.depth);
+  const cx = b.x + ox + b.width / 2;
   parts.push(
     `<rect class="diagram-node ${cls}" x="${b.x + ox}" y="${b.y + oy}" width="${b.width}" height="${b.height}" rx="6"/>`,
   );
 
-  // Header label, centred horizontally within the block's header strip.
-  const headerY = b.y + oy + b.headerHeight / 2;
-  const maxChars = Math.max(4, Math.floor(b.width / 8));
-  parts.push(
-    `<text class="text-header" x="${b.x + ox + b.width / 2}" y="${headerY}" text-anchor="middle" dominant-baseline="central">${escXml(truncate(b.name, maxChars))}</text>`,
-  );
+  const isLeaf = b.children.length === 0;
+  if (isLeaf) {
+    // Leaf block: name on upper line, ID on lower line — both centred.
+    const nameY = b.y + oy + Math.round(b.height * 0.38);
+    const idY = b.y + oy + Math.round(b.height * 0.66);
+    const maxChars = Math.max(4, Math.floor(b.width / CHAR_W));
+    parts.push(
+      `<text class="text-primary" x="${cx}" y="${nameY}" text-anchor="middle" dominant-baseline="central">${escXml(wordTruncate(b.name, maxChars))}</text>`,
+      `<text class="text-id" x="${cx}" y="${idY}" text-anchor="middle" dominant-baseline="central">${escXml(b.id)}</text>`,
+    );
+  } else {
+    // Container block: name + (ID) on the single header line; ID in grey.
+    const headerY = b.y + oy + b.headerHeight / 2;
+    const idSuffix = ` (${b.id})`;
+    const idSuffixW = idSuffix.length * CHAR_W_ID;
+    const nameMaxChars = Math.max(4, Math.floor((b.width - idSuffixW) / CHAR_W));
+    const nameText = wordTruncate(b.name, nameMaxChars);
+    parts.push(
+      `<text class="text-primary" x="${cx}" y="${headerY}" text-anchor="middle" dominant-baseline="central">${escXml(nameText)}<tspan fill="var(--ts-text-secondary, #64748b)" font-size="10" font-weight="600">${escXml(idSuffix)}</tspan></text>`,
+    );
+    for (const c of b.children) emitBlockSvg(c, ox, oy, parts);
+  }
+}
 
-  for (const c of b.children) emitBlockSvg(c, ox, oy, parts);
+export interface RenderBlocksLayoutOptions {
+  /** Extra vertical space reserved at the top of the canvas (e.g. for a title block). */
+  topInset?: number;
+  /** Raw SVG injected immediately after the opening tag — a header line or a full title block. */
+  title?: string;
+  /** When set, the theme CSS is embedded as `<style>` so the SVG is self-contained. */
+  embedCssTheme?: ThemeId;
 }
 
+/**
+ * The single Nested Blocks SVG emitter shared by every host. Takes an
+ * already-computed {@link BlocksLayout} (callers decide the layout options) and
+ * produces the `<svg>`. Hosts wrap it with their own chrome:
+ *   - IntelliJ/UI via {@link renderBlocksSvg} (embedded CSS + simple header);
+ *   - VS Code's blocks preview (rich title block, no embedded CSS — the webview
+ *     and the export path own styling).
+ */
+export function renderBlocksLayoutSvg(
+  layout: BlocksLayout,
+  options: RenderBlocksLayoutOptions = {},
+): string {
+  const { topInset = 0, title = '', embedCssTheme } = options;
+
+  const w = layout.bounds.width + PAD * 2;
+  const h = layout.bounds.height + PAD * 2 + topInset;
+  const ox = -layout.bounds.x + PAD;
+  const oy = -layout.bounds.y + PAD + topInset;
+
+  const parts: string[] = [];
+  for (const top of layout.blocks) emitBlockSvg(top, ox, oy, parts);
+
+  const styleLine = embedCssTheme ? `\n<style>${generateSvgEmbedCss(embedCssTheme)}</style>` : '';
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">${styleLine}
+${title}
+${parts.join('\n')}
+</svg>`;
+}
+
+/**
+ * Host-neutral blocks renderer (IntelliJ/UI). Lays the doc out with the default
+ * spacing, then delegates the actual SVG emission to {@link renderBlocksLayoutSvg}
+ * with the shared theme CSS embedded so the output is self-contained.
+ */
 export function renderBlocksSvg(doc: BlocksFile, options: RenderBlocksOptions = {}): string {
   const { title = '' } = options;
 
@@ -66,26 +133,9 @@ export function renderBlocksSvg(doc: BlocksFile, options: RenderBlocksOptions =
     return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
   }
 
-  const w = layout.bounds.width + PAD * 2;
-  const h = layout.bounds.height + PAD * 2;
-  const ox = -layout.bounds.x + PAD;
-  const oy = -layout.bounds.y + PAD;
-
-  const parts: string[] = [];
-  for (const top of layout.blocks) emitBlockSvg(top, ox, oy, parts);
-
   const titleSvg = title
     ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(`Nested Blocks — ${title}`)}</text>`
     : '';
 
-  // Embed the shared theme CSS inside the SVG so the rendered output is
-  // self-contained — the JCEF host page only needs to drop the SVG into the
-  // DOM and styling resolves without any cooperation from the host stylesheet.
-  const embedCss = generateSvgEmbedCss('transitrix');
-
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
-<style>${embedCss}</style>
-${titleSvg}
-${parts.join('\n')}
-</svg>`;
+  return renderBlocksLayoutSvg(layout, { title: titleSvg, embedCssTheme: 'transitrix' });
 }

package/src/webview/render-fgca.ts

@@ -26,33 +26,30 @@ import { generateSvgEmbedCss } from '../theme/index.js';
 import { escXml } from './render-util.js';
 
 const COL_LABELS: Record<FGCAPreviewColumn, string> = {
-  factor: 'Factors (F)',
+  driver: 'Drivers (D)',
   goal: 'Goals (G)',
   change: 'Changes (C)',
-  activity: 'Activities (A)',
+  activity: 'Actions (A)',
 };
 
-export interface RenderFgcaOptions {
-  /** `'fga'` hides the Changes column; defaults to `'fgca'`. */
-  variant?: 'fgca' | 'fga';
-  /** Optional heading rendered as a left-anchored `text-header` line. */
-  title?: string;
-  /** Exit edge curvature; 1 = default, 0 = straight, higher = stronger arc. */
-  curvature?: number;
-  /** Entry curvature at the target node; defaults to `curvature` when omitted. */
-  entryCurvature?: number;
-}
-
-export function renderFgcaSvg(doc: FGCADoc, options: RenderFgcaOptions = {}): string {
-  const { variant = 'fgca', title = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature } = options;
-  const hideChanges = variant === 'fga';
-
-  const { nodes, edges, columns, width, height } = layoutFGCAPreview(doc, { hideChanges });
-
-  if (nodes.length === 0) {
-    return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
-  }
+type FgcaLayout = ReturnType<typeof layoutFGCAPreview>;
 
+/**
+ * Canonical FGCA/FGA body — the column headers, node rects and edge paths that
+ * go inside the `<svg>`, shared verbatim by the VS Code preview (`buildSvg`)
+ * and the host-neutral wrapper below. Excludes the host-specific title block
+ * and the (identical) `<defs>` arrow marker. Coordinates are absolute (the
+ * layout's own); the VS Code path wraps this in a `translate(0, titleH)` group
+ * to make room for its title block, while the host-neutral wrapper renders it
+ * untranslated.
+ */
+export function renderFgcaBody(
+  columns: FgcaLayout['columns'],
+  nodes: FgcaLayout['nodes'],
+  edges: FgcaLayout['edges'],
+  curvature: number,
+  entryCurvature: number | undefined,
+): string {
   const headerSvg = columns
     .map(({ col, x }) =>
       [
@@ -85,20 +82,49 @@ export function renderFgcaSvg(doc: FGCADoc, options: RenderFgcaOptions = {}): st
         }
       }
       const twoLines = line2.length > 0;
-      const y1 = twoLines ? n.y + NODE_H / 2 - 8 : n.y + NODE_H / 2 + 5;
-      const y2 = y1 + 18;
+      const y1 = twoLines ? n.y + 16 : n.y + 26;
+      const y2 = n.y + 32;
+      const idY = twoLines ? n.y + 54 : n.y + 50;
+      const entityId = n.id.slice(n.id.indexOf('_') + 1);
       return [
         `<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">${escXml(line1)}</text>`,
+        `<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">${escXml(line2)}</text>`
+          ? `<text class="text-secondary" 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>`,
       ]
         .filter(Boolean)
         .join('\n');
     })
     .join('\n');
 
+  return `${headerSvg}\n${nodeSvg}\n${edgeSvg}`;
+}
+
+export interface RenderFgcaOptions {
+  /** `'fga'` hides the Changes column; defaults to `'fgca'`. */
+  variant?: 'fgca' | 'fga';
+  /** Optional heading rendered as a left-anchored `text-header` line. */
+  title?: string;
+  /** Exit edge curvature; 1 = default, 0 = straight, higher = stronger arc. */
+  curvature?: number;
+  /** Entry curvature at the target node; defaults to `curvature` when omitted. */
+  entryCurvature?: number;
+}
+
+export function renderFgcaSvg(doc: FGCADoc, options: RenderFgcaOptions = {}): string {
+  const { variant = 'fgca', title = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature } = options;
+  const hideChanges = variant === 'fga';
+
+  const { nodes, edges, columns, width, height } = layoutFGCAPreview(doc, { hideChanges });
+
+  if (nodes.length === 0) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
+  }
+
+  const body = renderFgcaBody(columns, nodes, edges, curvature, entryCurvature);
+
   const titleSvg = title
     ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(title)}</text>`
     : '';
@@ -116,8 +142,6 @@ export function renderFgcaSvg(doc: FGCADoc, options: RenderFgcaOptions = {}): st
   </marker>
 </defs>
 ${titleSvg}
-${headerSvg}
-${nodeSvg}
-${edgeSvg}
+${body}
 </svg>`;
 }

package/src/webview/render-goals.ts

@@ -13,7 +13,8 @@
 import { layoutGoalTree } from '../goals/layout.js';
 import type { GoalTree, GoalTreeLayout, LaidOutEdge } from '../goals/types.js';
 import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
-import { generateSvgEmbedCss } from '../theme/index.js';
+import { generateSvgEmbedCss, type ThemeId } from '../theme/index.js';
+import { escXml } from './render-util.js';
 
 const NODE_W = 250;
 const NODE_H = 60;
@@ -23,20 +24,17 @@ const PAD = 24;
 const LABEL_MAX = 36;
 const LABEL_TRIM = 34;
 
-function escXml(s: string): string {
-  return s
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
-}
-
 export interface RenderGoalsOptions {
   treeName?: string;
   curvature?: number;
   entryCurvature?: number;
 }
 
+/**
+ * Host-neutral goals renderer (IntelliJ/UI). Lays the tree out with the default
+ * spacing, then delegates the actual SVG emission to {@link renderGoalsLayoutSvg}
+ * with the shared theme CSS embedded so the output is self-contained.
+ */
 export function renderGoalsSvg(tree: GoalTree, options: RenderGoalsOptions = {}): string {
   const { treeName = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature } = options;
 
@@ -51,10 +49,43 @@ export function renderGoalsSvg(tree: GoalTree, options: RenderGoalsOptions = {})
     return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
   }
 
+  const title = treeName
+    ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(`Goal tree — ${treeName}`)}</text>`
+    : '';
+
+  // Embed the shared theme CSS so the JCEF host page only needs to drop the SVG
+  // into the DOM — styling resolves without help from the host stylesheet. The
+  // VS Code preview omits this (its webview supplies the CSS) and embeds it only
+  // on export via `prepareSvgForExport`.
+  return renderGoalsLayoutSvg(layout, { curvature, entryCurvature, title, embedCssTheme: 'transitrix' });
+}
+
+export interface RenderGoalsLayoutOptions {
+  curvature?: number;
+  entryCurvature?: number;
+  /** Extra vertical space reserved at the top of the canvas (e.g. for a title block). */
+  topInset?: number;
+  /** Raw SVG injected immediately after `<defs>` — a header line or a full title block. */
+  title?: string;
+  /** When set, the theme CSS is embedded as `<style>` so the SVG is self-contained. */
+  embedCssTheme?: ThemeId;
+}
+
+/**
+ * The single goals SVG emitter shared by every host. Takes an already-computed
+ * {@link GoalTreeLayout} (callers decide spacing/scope) and produces the `<svg>`.
+ * Hosts wrap it with their own chrome:
+ *   - IntelliJ/UI via {@link renderGoalsSvg} (embedded CSS + simple header);
+ *   - VS Code's goals preview (rich title block, no embedded CSS — the webview
+ *     and the export path own styling).
+ */
+export function renderGoalsLayoutSvg(layout: GoalTreeLayout, options: RenderGoalsLayoutOptions = {}): string {
+  const { curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, topInset = 0, title = '', embedCssTheme } = options;
+
   const w = layout.bounds.width + PAD * 2;
-  const h = layout.bounds.height + PAD * 2;
+  const h = layout.bounds.height + PAD * 2 + topInset;
   const ox = -layout.bounds.x + PAD;
-  const oy = -layout.bounds.y + PAD;
+  const oy = -layout.bounds.y + PAD + topInset;
 
   const nodeMap = new Map(layout.nodes.map((n) => [n.id, n]));
 
@@ -87,24 +118,15 @@ export function renderGoalsSvg(tree: GoalTree, options: RenderGoalsOptions = {})
     })
     .join('\n');
 
-  const titleSvg = treeName
-    ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(`Goal tree — ${treeName}`)}</text>`
-    : '';
-
-  // Embed the shared theme CSS inside the SVG so the rendered output is
-  // self-contained — the JCEF host page only needs to drop the SVG into the
-  // DOM and styling resolves without any cooperation from the host stylesheet.
-  // Matches what the VS Code path produces via `prepareSvgForExport`.
-  const embedCss = generateSvgEmbedCss('transitrix');
+  const styleLine = embedCssTheme ? `\n<style>${generateSvgEmbedCss(embedCssTheme)}</style>` : '';
 
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
-<style>${embedCss}</style>
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">${styleLine}
 <defs>
   <marker id="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>
-${titleSvg}
+${title}
 ${nodeSvg}
 ${edgeSvg}
 </svg>`;