@transitrix/diagrams 1.6.0 → 1.8.1

package/src/constraint/validate.ts

@@ -0,0 +1,131 @@
+// CONSTRAINT validator — methodology ELEMENT_PRIMITIVES.md §7.13 (sibling to
+// 15-requirement.md). Implements CONST-001..005 for the compliance suite (#518 C4).
+
+import type { ValidationError, ValidationWarning, ValidationResult } from '../validation-types.js';
+import { typeOfId, isCanonicalIdOfType, type CanonCatalog } from '../typed-id.js';
+import { CONSTRAINT_STATUSES, CONSTRAINT_SEVERITIES } from './types.js';
+
+export interface ConstraintValidateOptions {
+  /** When provided, CONST-004/005 enforce artefact existence for cross-refs. */
+  catalog?: CanonCatalog;
+}
+
+const REQUIRED_FIELDS = [
+  'notation',
+  'name',
+  'statement',
+  'status',
+  'zone',
+  'admitted_at',
+  'admitted_by',
+  'gate_checks',
+  'valid_from',
+] as const;
+
+export function validateConstraint(
+  input: unknown,
+  options: ConstraintValidateOptions = {},
+): ValidationResult {
+  const errors: ValidationError[] = [];
+  const warnings: ValidationWarning[] = [];
+
+  if (input === null || typeof input !== 'object' || Array.isArray(input)) {
+    errors.push({ code: 'CONST-001', message: 'Constraint must be a YAML mapping.' });
+    return { valid: false, errors, warnings };
+  }
+  const c = input as Record<string, unknown>;
+
+  if (!isCanonicalIdOfType(c.id, 'CONSTRAINT')) {
+    errors.push({
+      code: 'CONST-001',
+      message: `id "${String(c.id)}" must match CONSTRAINT-[<middle>-]<INTEGER>.`,
+      path: 'id',
+    });
+  }
+  if (c.notation !== 'constraint') {
+    errors.push({ code: 'CONST-001', message: 'notation must be the fixed value "constraint".', path: 'notation' });
+  }
+  for (const f of REQUIRED_FIELDS) {
+    if (f === 'notation') continue;
+    if (f === 'gate_checks') {
+      if (c.gate_checks === null || typeof c.gate_checks !== 'object') {
+        errors.push({ code: 'CONST-001', message: 'gate_checks is required and must be a mapping.', path: 'gate_checks' });
+      }
+      continue;
+    }
+    const v = c[f];
+    if (typeof v !== 'string' || v.trim() === '') {
+      errors.push({ code: 'CONST-001', message: `${f} is required.`, path: f });
+    }
+  }
+  if (c.zone !== 'canon') {
+    errors.push({ code: 'CONST-001', message: 'zone must be "canon" for a CONSTRAINT.', path: 'zone' });
+  }
+  if (!('valid_to' in c) || !(typeof c.valid_to === 'string' || c.valid_to === null)) {
+    errors.push({ code: 'CONST-001', message: 'valid_to is required (an ISO date string or null).', path: 'valid_to' });
+  }
+
+  const status = typeof c.status === 'string' ? c.status.trim() : '';
+  if (status && !(CONSTRAINT_STATUSES as readonly string[]).includes(status)) {
+    errors.push({
+      code: 'CONST-002',
+      message: `status must be one of ${CONSTRAINT_STATUSES.join(', ')}.`,
+      path: 'status',
+    });
+  }
+
+  if (c.severity !== undefined) {
+    const severity = typeof c.severity === 'string' ? c.severity.trim() : '';
+    if (!severity || !(CONSTRAINT_SEVERITIES as readonly string[]).includes(severity)) {
+      errors.push({
+        code: 'CONST-003',
+        message: `severity must be one of ${CONSTRAINT_SEVERITIES.join(', ')}.`,
+        path: 'severity',
+      });
+    }
+  }
+
+  if (c.applies_to !== undefined) {
+    if (!Array.isArray(c.applies_to)) {
+      errors.push({ code: 'CONST-001', message: 'applies_to must be a list of typed IDs.', path: 'applies_to' });
+    } else {
+      c.applies_to.forEach((ref, i) => {
+        const type = typeOfId(ref);
+        if (!type) {
+          errors.push({
+            code: 'CONST-004',
+            message: `applies_to[${i}] "${String(ref)}" is not a resolvable typed ID.`,
+            path: `applies_to[${i}]`,
+          });
+          return;
+        }
+        if (options.catalog && options.catalog.typeOf(ref as string) === undefined) {
+          errors.push({
+            code: 'CONST-004',
+            message: `applies_to[${i}] "${String(ref)}" does not resolve to an admitted artefact.`,
+            path: `applies_to[${i}]`,
+          });
+        }
+      });
+    }
+  }
+
+  if (c.owner_role !== undefined) {
+    const role = c.owner_role;
+    if (typeof role !== 'string' || !isCanonicalIdOfType(role, 'ROLE')) {
+      errors.push({
+        code: 'CONST-005',
+        message: `owner_role "${String(role)}" must be a typed ROLE id.`,
+        path: 'owner_role',
+      });
+    } else if (options.catalog && options.catalog.typeOf(role) === undefined) {
+      errors.push({
+        code: 'CONST-005',
+        message: `owner_role "${role}" does not resolve to an admitted artefact.`,
+        path: 'owner_role',
+      });
+    }
+  }
+
+  return { valid: errors.length === 0, errors, warnings };
+}

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

@@ -35,6 +35,31 @@ describe('parseCanonicalFGCA', () => {
     expect(r.parsed?.activities).toHaveLength(1);
   });
 
+  it('accepts ACTION-* ids (methodology 1.0) alongside legacy ACTIVITY-*', () => {
+    const r = parseCanonicalFGCA({
+      ...VALID,
+      actions: [
+        { id: 'ACTION-CRM-EU-1', name: 'CRM rollout', changes: ['CHANGE-1'] },
+        { id: 'ACTIVITY-2', name: 'Legacy workstream', changes: ['CHANGE-1'] },
+      ],
+    });
+    expect(r.valid, JSON.stringify(r.errors)).toBe(true);
+    expect(r.parsed?.activities.map((a) => a.id)).toEqual(['ACTION-CRM-EU-1', 'ACTIVITY-2']);
+  });
+
+  it('defaults changes to [] when view_config.layers.changes is off (DGA-in-dgca)', () => {
+    const r = parseCanonicalFGCA({
+      ...VALID,
+      changes: undefined,
+      view_config: { layers: { changes: 'off' } },
+      actions: [
+        { id: 'ACTION-DISCOVERY-1', name: 'Gap assessment', goals: ['GOAL-1'] },
+      ],
+    });
+    expect(r.valid, JSON.stringify(r.errors)).toBe(true);
+    expect(r.parsed?.changes).toEqual([]);
+  });
+
   it('FGCA-001: rejects non-object input', () => {
     expect(parseCanonicalFGCA(null).errors[0].code).toBe('FGCA-001');
     expect(parseCanonicalFGCA('string').errors[0].code).toBe('FGCA-001');
@@ -198,6 +223,15 @@ describe('parseCanonicalFGA', () => {
     expect(r.parsed?.activities).toHaveLength(1);
   });
 
+  it('accepts ACTION-* ids in FGA mode', () => {
+    const r = parseCanonicalFGA({
+      ...VALID_FGA,
+      actions: [{ id: 'ACTION-GDPR-DSR-WORKFLOW-1', name: 'DSR workflow', goals: ['GOAL-1'] }],
+    });
+    expect(r.valid, JSON.stringify(r.errors)).toBe(true);
+    expect(r.parsed?.activities[0].id).toBe('ACTION-GDPR-DSR-WORKFLOW-1');
+  });
+
   it('populates activity.goal_id from activity.goals[] (the FGA edge-driving field)', () => {
     // The "FGA nodes render, no edges" bug: activities had no resolvable
     // goal_id, so the renderer drew no goal → activity edges.

package/src/fgca/parse-canonical.ts

@@ -6,7 +6,7 @@
  *
  * - Flat top-level arrays, no `fgca:` wrapper.
  * - Typed string IDs per `IDS_AND_REFERENCES.md` (`FACTOR-1`,
- *   `GOAL-RET-1`, `CHANGE-1`, `ACTIVITY-ONBOARD-1`).
+ *   `GOAL-RET-1`, `CHANGE-1`, `ACTION-ONBOARD-1` (legacy `ACTIVITY-*` accepted).
  * - Plural canonical-direction cross-references: `goal.factors`,
  *   `change.goals`, `activity.changes`, `activity.goals`.
  * - Per-notation validation codes `FGCA-001 … FGCA-015`.
@@ -50,7 +50,8 @@ const DRIVER_ID_RE = /^DRIVER(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
 const FACTOR_OR_DRIVER_ID_RE = /^(FACTOR|DRIVER)(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
 const GOAL_ID_RE = /^GOAL(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
 const CHANGE_ID_RE = /^CHANGE(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
-const ACTIVITY_ID_RE = /^ACTIVITY(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
+// ACTION is canonical since methodology 1.0; ACTIVITY accepted for legacy docs.
+const ACTION_OR_ACTIVITY_ID_RE = /^(ACTION|ACTIVITY)(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
 const FGCA_DOC_ID_RE = /^(FGCA|DGCA)(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
 const CONSTRAINT_ID_RE = /^CONSTRAINT(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
 
@@ -63,6 +64,15 @@ 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>);
 }
 
+/** DGA mode (`view_config.layers.changes: off`) may omit the changes layer. */
+function isChangesLayerOff(raw: Record<string, unknown>): boolean {
+  const vc = raw['view_config'];
+  if (!vc || typeof vc !== 'object') return false;
+  const layers = (vc as Record<string, unknown>)['layers'];
+  if (!layers || typeof layers !== 'object') return false;
+  return (layers as Record<string, unknown>)['changes'] === 'off';
+}
+
 
 /**
  * Validate canonical FGCA YAML and, on success, return an internal-form
@@ -114,7 +124,10 @@ export function parseCanonicalFGCA(input: unknown): CanonicalFGCAResult {
 
   const factorsRaw = asObjectArray(raw['factors']);
   const goalsRaw = asObjectArray(raw['goals']);
-  const changesRaw = asObjectArray(raw['changes']);
+  let changesRaw = asObjectArray(raw['changes']);
+  if (changesRaw === null && raw['changes'] === undefined && isChangesLayerOff(raw)) {
+    changesRaw = [];
+  }
   const activitiesRaw = asObjectArray(raw['actions']);
   if (activitiesRaw === null && 'activities' in raw) {
     errors.push({ code: 'FGCA-004', message: '"activities" key is not accepted — rename to "actions"', path: 'actions' });
@@ -177,7 +190,7 @@ export function parseCanonicalFGCA(input: unknown): CanonicalFGCAResult {
   factors.forEach((el, i) => checkLayerElement(el, `factors[${i}]`, FACTOR_OR_DRIVER_ID_RE, factorIds));
   goals.forEach((el, i) => checkLayerElement(el, `goals[${i}]`, GOAL_ID_RE, goalIds));
   changes.forEach((el, i) => checkLayerElement(el, `changes[${i}]`, CHANGE_ID_RE, changeIds));
-  activities.forEach((el, i) => checkLayerElement(el, `activities[${i}]`, ACTIVITY_ID_RE, activityIds));
+  activities.forEach((el, i) => checkLayerElement(el, `activities[${i}]`, ACTION_OR_ACTIVITY_ID_RE, activityIds));
 
   if (errors.length > 0) return { valid: false, errors, warnings };
 

package/src/fgca/preview-layout.ts

@@ -1,6 +1,6 @@
-// Pure column-layout geometry for the static FGCA / FGA previews.
+// Pure column-layout geometry for the static DGCA / DGA previews.
 //
-// This is the layout the Studio extension's `fgca-preview.ts` renders to SVG
+// This is the layout the Studio extension's `dgca-preview.ts` renders to SVG
 // (NOT the ReactFlow `buildFGCALayout` in `./layout.ts`, which targets the
 // interactive web UI). It lives here — rather than inline in the extension —
 // so the gap geometry is unit-testable: the extension has no test harness.
@@ -33,7 +33,7 @@ export interface FGCAPreviewActivity {
   goal_id?: number | string | null;
 }
 
-/** Structural input the preview layout needs — a subset of the parsed FGCA/FGA doc. */
+/** Structural input the preview layout needs — a subset of the parsed DGCA/DGA doc. */
 export interface FGCAPreviewDoc {
   factors: FGCAPreviewFactor[];
   goals: FGCAPreviewGoal[];
@@ -42,7 +42,7 @@ export interface FGCAPreviewDoc {
 }
 
 export interface FGCAPreviewLayoutOptions {
-  /** FGA hides the Changes column and links Goal → Activity directly. */
+  /** DGA hides the Changes column and links Goal → Activity directly. */
   hideChanges?: boolean;
   /** Horizontal gap (px) between columns. Default matches the historical hardcoded value. */
   colGap?: number;
@@ -50,12 +50,16 @@ export interface FGCAPreviewLayoutOptions {
   rowGap?: number;
   /** Trim to a level cap or a single root goal (vkgeorgia/strategy#77). Defaults to 'all'. */
   scope?: Scope;
+  /** Entity node width (px). Default {@link FGCA_NODE_W}. */
+  nodeWidth?: number;
+  /** Entity node height (px). Default {@link FGCA_NODE_H}. */
+  nodeHeight?: number;
 }
 
 /**
- * Trims an FGCA/FGA doc to a scope (vkgeorgia/strategy#77).
+ * Trims a DGCA/DGA doc to a scope.
  *
- * FGCA/FGA goals are flat (no parent_id), so:
+ * 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).
  *
@@ -119,8 +123,8 @@ export interface FGCAPreviewLayout {
   height: number;
 }
 
-// Fixed node + frame geometry. Only the inter-node gaps are user-configurable
-// (vkgeorgia/strategy#75); node size and padding stay constant.
+// Default node + frame geometry. Inter-node gaps are user-configurable via
+// Inter-node gaps are user-configurable via spacing settings; node size uses presets.
 export const FGCA_NODE_W = 220;
 export const FGCA_NODE_H = 72;
 export const FGCA_HEADER_H = 32;
@@ -137,12 +141,14 @@ export function layoutFGCAPreview(
     colGap = FGCA_DEFAULT_COL_GAP,
     rowGap = FGCA_DEFAULT_ROW_GAP,
     scope = { mode: 'all' },
+    nodeWidth = FGCA_NODE_W,
+    nodeHeight = FGCA_NODE_H,
   } = options;
 
   // Trim to scope first; everything below lays out the visible subset only.
   const doc = selectScopedFGCA(inputDoc, scope);
 
-  const colStride = FGCA_NODE_W + colGap;
+  const colStride = nodeWidth + colGap;
   const cols: FGCAPreviewColumn[] = hideChanges
     ? ['driver', 'goal', 'activity']
     : ['driver', 'goal', 'change', 'activity'];
@@ -206,7 +212,7 @@ export function layoutFGCAPreview(
   const nodeMap = new Map<string, FGCAPreviewNode>();
   const nodes: FGCAPreviewNode[] = [];
   const columns: FGCAPreviewColumnPos[] = [];
-  const yCenters = new Map<string, number>(); // nodeId → y + FGCA_NODE_H / 2
+  const yCenters = new Map<string, number>(); // nodeId → y + nodeHeight / 2
 
   for (let ci = 0; ci < cols.length; ci++) {
     const col = cols[ci];
@@ -218,8 +224,8 @@ export function layoutFGCAPreview(
       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;
+      yCenters.set(item.id, y + nodeHeight / 2);
+      y += nodeHeight + rowGap;
     }
   }
 
@@ -228,7 +234,7 @@ export function layoutFGCAPreview(
     const s = nodeMap.get(sourceId);
     const t = nodeMap.get(targetId);
     if (!s || !t) return;
-    edges.push({ sx: s.x + FGCA_NODE_W, sy: s.y + FGCA_NODE_H / 2, tx: t.x, ty: t.y + FGCA_NODE_H / 2 });
+    edges.push({ sx: s.x + nodeWidth, sy: s.y + nodeHeight / 2, tx: t.x, ty: t.y + nodeHeight / 2 });
   }
 
   for (const g of doc.goals) {
@@ -259,8 +265,8 @@ export function layoutFGCAPreview(
   }
 
   const maxNodeBottom = nodes.reduce(
-    (m, n) => Math.max(m, n.y + FGCA_NODE_H),
-    FGCA_PAD + FGCA_HEADER_H + rowGap + FGCA_NODE_H,
+    (m, n) => Math.max(m, n.y + nodeHeight),
+    FGCA_PAD + FGCA_HEADER_H + rowGap + nodeHeight,
   );
   const width = FGCA_PAD * 2 + cols.length * colStride - colGap;
   const height = maxNodeBottom + FGCA_PAD;

package/src/goals/GoalNode.tsx

@@ -1,6 +1,7 @@
 import React, { memo, useState } from 'react';
 import { Handle, Position } from 'reactflow';
 import type { Factor, Goal } from './types.js';
+import { displayGoalId } from './parse-canonical.js';
 import type { ThemeTokens } from './theme.js';
 
 const NODE_WIDTH = 250;
@@ -23,6 +24,7 @@ export interface GoalNodeData {
   onAddChild: (parentId: number, parentLevel: number) => void;
   onDelete: (id: number) => void;
   onToggleCollapse: (id: number) => void;
+  onFactorClick?: (factor: Factor) => void;
 }
 
 const GoalNode = memo(({ data }: { data: GoalNodeData }) => {
@@ -91,7 +93,7 @@ const GoalNode = memo(({ data }: { data: GoalNodeData }) => {
           {goal.name}
         </div>
         <div style={{ fontSize: 10, color: theme.cardMetaColor, marginTop: 2 }}>
-          ID: {goal.id} | Lvl: {goal.level}
+          ID: {displayGoalId(goal)} | Lvl: {goal.level}
           {goal.tag ? ` | #${goal.tag}` : ''}
         </div>
       </div>
@@ -130,6 +132,10 @@ const GoalNode = memo(({ data }: { data: GoalNodeData }) => {
           {(openPanel === 'positive' ? positive : negative).map((f) => (
             <div
               key={f.id}
+              onClick={(e) => {
+                e.stopPropagation();
+                data.onFactorClick?.(f);
+              }}
               style={{
                 background: openPanel === 'positive' ? '#f0fdf4' : '#fef2f2',
                 border: `1px solid ${openPanel === 'positive' ? '#bbf7d0' : '#fecaca'}`,
@@ -138,6 +144,7 @@ const GoalNode = memo(({ data }: { data: GoalNodeData }) => {
                 padding: '4px 6px',
                 fontSize: 10,
                 textAlign: 'left',
+                cursor: data.onFactorClick ? 'pointer' : 'default',
               }}
             >
               <div style={{ fontWeight: 700 }}>{f.name}</div>

package/src/goals/GoalTreeView.tsx

@@ -12,7 +12,7 @@ import ReactFlow, {
   type NodeDragHandler,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
-import type { Goal, GoalTree, GoalTreeLayout, LayoutOptions } from './types.js';
+import type { Factor, Goal, GoalTree, GoalTreeLayout, LayoutOptions } from './types.js';
 import { layoutGoalTree } from './layout.js';
 import { reparent, addChild, deleteWithDescendants, moveToBacklog, restoreFromBacklog } from './mutations.js';
 import type { ThemeTokens } from './theme.js';
@@ -28,9 +28,11 @@ export interface GoalTreeViewProps {
   theme?: ThemeTokens;
   readOnly?: boolean;
   showBacklog?: boolean;
+  defaultBacklogOpen?: boolean;
   showMiniMap?: boolean;
   onChange?: (event: GoalTreeChange) => void;
   onEditRequest?: (goal: Goal) => void;
+  onFactorClick?: (factor: Factor) => void;
 }
 
 export type GoalTreeChange =
@@ -99,13 +101,16 @@ function GoalTreeViewInner({
   theme: themeProp,
   readOnly = false,
   showBacklog = false,
+  defaultBacklogOpen = true,
   showMiniMap = false,
   onChange,
   onEditRequest,
+  onFactorClick,
 }: GoalTreeViewProps): React.ReactElement {
   const theme = useMemo(() => resolveTheme(themeProp), [themeProp]);
   const [collapsedIds, setCollapsedIds] = useState<Set<number>>(new Set());
   const [hoveredId, setHoveredId] = useState<number | null>(null);
+  const [isBacklogOpen, setIsBacklogOpen] = useState(defaultBacklogOpen);
 
   const { canvas: canvasGoals, backlog: backlogGoals } = useMemo(
     () => partitionCanvasAndBacklog(tree.goals),
@@ -179,9 +184,10 @@ function GoalTreeViewInner({
         onAddChild,
         onDelete: onDeleteNode,
         onToggleCollapse,
+        onFactorClick,
       },
     }));
-  }, [layout.nodes, theme, readOnly, hoveredId, collapsedIds, onAddChild, onDeleteNode, onToggleCollapse]);
+  }, [layout.nodes, theme, readOnly, hoveredId, collapsedIds, onAddChild, onDeleteNode, onToggleCollapse, onFactorClick]);
 
   const buildEdges = useCallback((): Edge[] => {
     return layout.edges.map((e) => ({
@@ -286,38 +292,66 @@ function GoalTreeViewInner({
     <div style={{ display: 'flex', width: '100%', height: '100%' }}>
       {showBacklogPanel && (
         <div
-          data-goaltree-backlog-zone
+          {...(isBacklogOpen ? { 'data-goaltree-backlog-zone': true } : {})}
           style={{
-            width: 220,
+            width: isBacklogOpen ? 220 : 28,
             flexShrink: 0,
             borderRight: '1px solid #e2e8f0',
-            padding: 10,
-            overflowY: 'auto',
             background: '#f8fafc',
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
           }}
         >
-          <div style={{ fontWeight: 700, fontSize: 12, color: '#334155', marginBottom: 8 }}>Backlog</div>
-          {backlogGoals.map((goal) => (
-            <div
-              key={goal.id}
-              draggable={!readOnly}
-              onDragStart={(e) => onBacklogItemDragStart(e, goal.id)}
-              onDoubleClick={() => onEditRequest?.(goal)}
-              title="Drag onto a canvas card to set its parent"
-              style={{
-                padding: 8,
-                marginBottom: 6,
-                background: '#ffffff',
-                border: '1px solid #cbd5e1',
-                borderRadius: 6,
-                fontSize: 11,
-                cursor: readOnly ? 'default' : 'grab',
-              }}
-            >
-              <div style={{ fontWeight: 600 }}>{goal.name}</div>
-              <div style={{ color: '#64748b' }}>Level: {goal.level}</div>
+          <button
+            type="button"
+            aria-label={isBacklogOpen ? 'Collapse backlog' : 'Expand backlog'}
+            title={isBacklogOpen ? 'Collapse backlog' : 'Expand backlog'}
+            onClick={() => setIsBacklogOpen((v) => !v)}
+            style={{
+              alignSelf: 'flex-end',
+              margin: '6px 6px 0 6px',
+              width: 16,
+              height: 16,
+              border: '1px solid #cbd5e1',
+              borderRadius: 4,
+              background: '#ffffff',
+              color: '#64748b',
+              fontSize: 10,
+              lineHeight: '14px',
+              padding: 0,
+              cursor: 'pointer',
+              flexShrink: 0,
+            }}
+          >
+            {isBacklogOpen ? '◀' : '▶'}
+          </button>
+          {isBacklogOpen && (
+            <div style={{ padding: '4px 10px 10px', overflowY: 'auto', flex: 1 }}>
+              <div style={{ fontWeight: 700, fontSize: 12, color: '#334155', marginBottom: 8 }}>Backlog</div>
+              {backlogGoals.map((goal) => (
+                <div
+                  key={goal.id}
+                  draggable={!readOnly}
+                  onDragStart={(e) => onBacklogItemDragStart(e, goal.id)}
+                  onDoubleClick={() => onEditRequest?.(goal)}
+                  title="Drag onto a canvas card to set its parent"
+                  style={{
+                    padding: 8,
+                    marginBottom: 6,
+                    background: '#ffffff',
+                    border: '1px solid #cbd5e1',
+                    borderRadius: 6,
+                    fontSize: 11,
+                    cursor: readOnly ? 'default' : 'grab',
+                  }}
+                >
+                  <div style={{ fontWeight: 600 }}>{goal.name}</div>
+                  <div style={{ color: '#64748b' }}>Level: {goal.level}</div>
+                </div>
+              ))}
             </div>
-          ))}
+          )}
         </div>
       )}
 

package/src/goals/__tests__/GoalTreeView.test.tsx

@@ -297,6 +297,54 @@ describe('GoalTreeView', () => {
     });
   });
 
+  it('fires onFactorClick with the clicked factor when a popover item is clicked', async () => {
+    const onFactorClick = vi.fn();
+    render(<GoalTreeView tree={makeTree()} onFactorClick={onFactorClick} />);
+    await waitFor(() => {
+      expect(screen.getByText('Cut churn')).toBeTruthy();
+    });
+
+    // Open the negative-factor panel on "Cut churn" (id=3, has risk factor "Support backlog")
+    const negativeBadge = screen.getByLabelText('1 negative factor');
+    negativeBadge.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+    // The popover item for the risk factor should now be in the DOM
+    const factorItem = await waitFor(() => screen.getByText('Support backlog'));
+    factorItem.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+    await waitFor(() => expect(onFactorClick).toHaveBeenCalledTimes(1));
+    expect(onFactorClick.mock.calls[0][0]).toMatchObject({ id: 10, name: 'Support backlog', impact_type: 'risk' });
+  });
+
+  it('backlog panel is collapsible — toggle hides and restores content', async () => {
+    const tree: GoalTree = {
+      goal_types: [
+        { name: 'Strategy', level: 0 },
+        { name: 'Business Goal', level: 1 },
+      ],
+      goals: [
+        { id: 1, name: 'Root goal', type: 'Strategy', level: 0, parent_id: 0 },
+        { id: 2, name: 'Orphaned goal', type: 'Business Goal', level: 1, parent_id: 999 },
+      ],
+    };
+    render(<GoalTreeView tree={tree} showBacklog />);
+    await waitFor(() => {
+      expect(screen.getByText('Backlog')).toBeTruthy();
+    });
+
+    // Collapse
+    screen.getByLabelText('Collapse backlog').dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    await waitFor(() => {
+      expect(screen.queryByText('Backlog')).toBeNull();
+    });
+
+    // Expand again
+    screen.getByLabelText('Expand backlog').dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    await waitFor(() => {
+      expect(screen.getByText('Backlog')).toBeTruthy();
+    });
+  });
+
   it('fires onEditRequest on double-click', async () => {
     const onEditRequest = vi.fn();
     render(<GoalTreeView tree={makeTree()} onEditRequest={onEditRequest} />);

package/src/goals/__tests__/mutations.test.ts

@@ -109,3 +109,45 @@ describe('restoreFromBacklog', () => {
     expect(r.result!.goals.find(g => g.id === 3)!.parent_id).toBe(1);
   });
 });
+
+describe('reparent — descendant type relabeling and level cap', () => {
+  const DEEP: GoalTree = {
+    goal_types: [
+      { name: 'Strategy', level: 0 },
+      { name: 'Business Goal', level: 1 },
+      { name: 'Project', level: 2 },
+      { name: 'Task', level: 3 },
+    ],
+    goals: [
+      { id: 1, name: 'Root', type: 'Strategy', level: 0, parent_id: 0 },
+      { id: 2, name: 'BG1', type: 'Business Goal', level: 1, parent_id: 1 },
+      { id: 3, name: 'Proj1', type: 'Project', level: 2, parent_id: 2 },
+      { id: 4, name: 'Task1', type: 'Task', level: 3, parent_id: 3 },
+    ],
+  };
+
+  it('relabels descendant types via getTypeForLevel when reparenting shifts levels', () => {
+    // Move Proj1 (id=3, level=2) directly under Root (id=1, level=0); delta = -1
+    // Task1 (child of Proj1, level=3): new level = 2, type should be 'Project'
+    const r = reparent(DEEP, 3, 1);
+    expect(r.ok).toBe(true);
+    const proj = r.result!.goals.find(g => g.id === 3)!;
+    const task = r.result!.goals.find(g => g.id === 4)!;
+    expect(proj.level).toBe(1);
+    expect(proj.type).toBe('Business Goal');
+    expect(task.level).toBe(2);
+    expect(task.type).toBe('Project');
+  });
+
+  it('caps descendant level at maxLevel and refuses when that violates GOALS-012', () => {
+    // Move Root (id=1, level=0) under Root2 (id=5, level=0); delta = +1
+    // BG1: 1→2, Proj1: 2→3 (maxLevel), Task1: 3→4, capped at 3
+    // Task1 (capped level=3) under Proj1 (level=3) violates GOALS-012 → refused
+    const tree: GoalTree = {
+      ...DEEP,
+      goals: [...DEEP.goals, { id: 5, name: 'Root2', type: 'Strategy', level: 0, parent_id: 0 }],
+    };
+    const r = reparent(tree, 1, 5);
+    expect(r.ok).toBe(false);
+  });
+});

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

@@ -122,8 +122,10 @@ describe('parseCanonicalGoals', () => {
   it('maps canonical IDs to internal numeric ids; parent_id is the parent\'s mapped id', () => {
     const r = parseCanonicalGoals(VALID);
     expect(r.parsed?.goals[0].id).toBe(1);
+    expect(r.parsed?.goals[0].canonical_id).toBe('GOAL-1');
     expect(r.parsed?.goals[0].parent_id).toBe(0);
     expect(r.parsed?.goals[1].id).toBe(2);
+    expect(r.parsed?.goals[1].canonical_id).toBe('GOAL-2');
     expect(r.parsed?.goals[1].parent_id).toBe(1);
   });
 });

package/src/goals/layout.ts

@@ -1,5 +1,6 @@
 import type { Goal, GoalTree, LayoutOptions, GoalTreeLayout, LaidOutNode, LaidOutEdge } from './types.js';
 import type { Scope } from '../scope.js';
+import { displayGoalId } from './parse-canonical.js';
 
 const DEFAULT_NODE_WIDTH = 250;
 const DEFAULT_NODE_HEIGHT = 80;
@@ -23,7 +24,7 @@ export function selectScopedGoals(goals: Goal[], scope: Scope): Goal[] {
     if (!children.has(g.parent_id)) children.set(g.parent_id, []);
     children.get(g.parent_id)!.push(g.id);
   }
-  const root = goals.find(g => String(g.id) === scope.rootGoalId);
+  const root = goals.find(g => displayGoalId(g) === scope.rootGoalId);
   if (!root) return [];
   const keep = new Set<number>();
   const stack = [root.id];