@transitrix/diagrams 1.5.0 → 1.7.6

package/src/compliance/types.ts

@@ -4,8 +4,9 @@
 // single-product view here, and the gap dashboard in Phase 4.
 
 import type { AssertionStatus } from '../assertion/types.js';
+import type { ComplianceCodexDoc } from './classify.js';
 
-/** Projection of a REQUIREMENT the compliance views need. */
+/** Projection of a REQUIREMENT (or CONSTRAINT) the compliance views need. */
 export interface IndexRequirement {
   id: string;
   name: string;
@@ -20,6 +21,38 @@ export interface IndexRequirement {
    * past or imminent, CV-3 renders an urgent decoration on the cell.
    */
   deadline?: string;
+  /**
+   * Origin taxonomy (15-requirement.md §2.1): `legislative`, `process-product`,
+   * or `project-product`. Distinguishes the context from which the obligation
+   * was derived. Undefined for existing pre-taxonomy admissions (treated as
+   * `legislative` by tooling that supports origin-based filtering).
+   */
+  origin?: 'legislative' | 'process-product' | 'project-product';
+  /**
+   * Same-TYPE `parent` reference: the higher-scale obligation this one
+   * decomposes from (15-requirement.md §2.4; ELEMENT_PRIMITIVES.md §7.13 for
+   * CONSTRAINT). Origin-agnostic, structure-only. Enables the hierarchy half
+   * of the requirement traceability view.
+   */
+  parent?: string;
+  /**
+   * Motivation-layer element kind. `requirement` = positive obligation
+   * (15-requirement.md); `constraint` = restriction / prohibition
+   * (ELEMENT_PRIMITIVES.md §7.13). ASSERTION coverage applies to `requirement`
+   * only (16-assertion.md §1); the hierarchy half applies to both.
+   */
+  element_kind?: 'requirement' | 'constraint';
+  /**
+   * Longer-form description of the obligation (15-requirement.md §2). Optional;
+   * used by the requirement traceability view to show the requirement body
+   * inline. Not used by matrix / list views.
+   */
+  description?: string;
+  /**
+   * `next_review_at` review-checkpoint date (15-requirement.md §2.3; ISO 8601).
+   * Present when the author has scheduled a review; drives `REQ-STALE-001`.
+   */
+  next_review_at?: string;
 }
 
 // ── Temporal status (CV-3) ──────────────────────────────────────────────────
@@ -106,6 +139,11 @@ export interface ComplianceIndex {
   assertionsByRequirement: Map<string, IndexAssertion[]>;
   /** Subject id (product / process / capability) → assertions about it. */
   assertionsBySubject: Map<string, IndexAssertion[]>;
+  /**
+   * Parent id → the requirements/constraints that name it in `parent`
+   * (15-requirement.md §2.4). Enables the requirement-hierarchy view.
+   */
+  requirementsByParent: Map<string, IndexRequirement[]>;
 }
 
 // ── Single-law tree ─────────────────────────────────────────────────────────
@@ -134,3 +172,65 @@ export interface ProductView {
   /** Requirements bound to the product via an assertion, requirement-id-sorted. */
   requirements: ProductRequirementStatus[];
 }
+
+// ── Requirement traceability + hierarchy view ───────────────────────────────
+
+/** A codex artefact resolved from a requirement's `derived_from` reference. */
+export interface TraceSourceRef {
+  /** Verbatim id from `derived_from`. Always present. */
+  id: string;
+  /** The codex artefact, when resolved by the scan. Absent for dangling refs. */
+  codex?: ComplianceCodexDoc;
+}
+
+/** A named element (subject or realising element) resolved by the trace. */
+export interface TraceElementRef {
+  id: string;
+  /** Element name when resolved by the scan; absent for dangling refs. */
+  name?: string;
+}
+
+/** One ASSERTION targeting the traced requirement, with subject + realising elements. */
+export interface TraceAssertionRow {
+  assertion: IndexAssertion;
+  subject: TraceElementRef;
+  /** Elements named in the assertion's `realised_via` list (may be empty). */
+  realisedVia: TraceElementRef[];
+}
+
+/**
+ * Requirement traceability + hierarchy view.
+ *
+ * Two halves, both origin-agnostic (15-requirement.md §2.1):
+ *  1. Trace chain — `derived_from` source(s) → the element itself → any
+ *     ASSERTION targeting it (`about`) → the asserted `subject` + `realised_via`
+ *     elements. Origin-agnostic per 15-requirement.md §2.1; assertion coverage
+ *     applies to REQUIREMENT only (16-assertion.md §1) — CONSTRAINT trace shows
+ *     only the source chain + hierarchy.
+ *  2. Hierarchy — `parent` chain (ancestors, root last of the array) + children
+ *     (any element whose `parent` names this one), sorted by id.
+ */
+export interface RequirementTrace {
+  /** The element being traced (REQUIREMENT or CONSTRAINT). Falls back to a
+   *  stub carrying the id as its name when the element is missing from the
+   *  scan (a dangling `parent` or a repository being edited). */
+  requirement: IndexRequirement;
+  /** Backward-trace: `derived_from` codex artefacts, verbatim order. */
+  sources: TraceSourceRef[];
+  /** Forward-trace via ASSERTION. Empty for CONSTRAINT elements (16-assertion.md §1) or for a REQUIREMENT with no filed assertion. */
+  assertions: TraceAssertionRow[];
+  /** Parent chain: immediate parent first, root last. Empty when the element has no `parent`. */
+  ancestors: IndexRequirement[];
+  /** Direct children: elements naming this one as their `parent`, id-sorted. */
+  children: IndexRequirement[];
+}
+
+/**
+ * The complementary data the trace builder needs to name subjects and realising
+ * elements. Names are resolved by looking up the id in this map; unresolved ids
+ * surface as the id alone (a dangling reference).
+ */
+export interface TraceElementCatalog {
+  /** id → human-readable name (or the id itself when unnamed). */
+  nameById: Map<string, string>;
+}

package/src/constraint/__tests__/example.test.ts

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import yaml from 'js-yaml';
+import { validateConstraint } from '../validate.js';
+
+const dir = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '../../../../../tests/fixtures/notation-corpus/constraint',
+);
+
+describe('constraint worked example (notation-corpus)', () => {
+  it('validates CONSTRAINT-GDPR-RESIDENCY-1.yaml without error', () => {
+    const data = yaml.load(readFileSync(path.join(dir, 'CONSTRAINT-GDPR-RESIDENCY-1.yaml'), 'utf-8'));
+    const v = validateConstraint(data);
+    expect(v.valid, JSON.stringify(v.errors)).toBe(true);
+  });
+});

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

@@ -0,0 +1,68 @@
+import { describe, it, expect } from 'vitest';
+import { validateConstraint } from '../validate.js';
+import type { CanonCatalog } from '../../typed-id.js';
+
+function valid(): Record<string, unknown> {
+  return {
+    notation: 'constraint',
+    id: 'CONSTRAINT-GDPR-RESIDENCY-1',
+    name: 'EU customer personal data must be stored within EU/EEA jurisdictions',
+    statement: 'Personal data of EU customers MUST NOT be persisted outside EU / EEA jurisdictions.',
+    status: 'active',
+    zone: 'canon',
+    admitted_at: '2026-05-29',
+    admitted_by: 'v.korobeinikov',
+    gate_checks: { uniqueness: 'pass', consistency: 'pass', completeness: 'pass' },
+    valid_from: '2018-05-25',
+    valid_to: null,
+    severity: 'mandatory',
+    owner_role: 'ROLE-DPO-1',
+    applies_to: ['APPLICATION-CRM-1'],
+  };
+}
+
+const codes = (input: unknown, opts?: Parameters<typeof validateConstraint>[1]): string[] =>
+  validateConstraint(input, opts).errors.map((e) => e.code);
+
+describe('validateConstraint — positive', () => {
+  it('accepts a well-formed constraint', () => {
+    const r = validateConstraint(valid());
+    expect(r.valid, JSON.stringify(r.errors)).toBe(true);
+  });
+});
+
+describe('validateConstraint — CONST-001', () => {
+  it('flags missing required fields and wrong notation', () => {
+    const r = valid();
+    delete r.statement;
+    expect(codes(r)).toContain('CONST-001');
+    expect(codes({ ...valid(), notation: 'requirement' })).toContain('CONST-001');
+    expect(codes({ ...valid(), id: 'CONSTRAINT-001' })).toContain('CONST-001');
+  });
+});
+
+describe('validateConstraint — CONST-002/003', () => {
+  it('flags invalid status and severity', () => {
+    expect(codes({ ...valid(), status: 'enabled' })).toContain('CONST-002');
+    expect(codes({ ...valid(), severity: 'critical' })).toContain('CONST-003');
+  });
+});
+
+describe('validateConstraint — CONST-004/005 (catalog)', () => {
+  it('flags unresolved applies_to and owner_role with catalog', () => {
+    const catalog: CanonCatalog = { typeOf: () => undefined };
+    expect(codes(valid(), { catalog })).toContain('CONST-004');
+    expect(codes(valid(), { catalog })).toContain('CONST-005');
+  });
+
+  it('does not flag CONST-004 without catalog for well-formed applies_to', () => {
+    expect(codes(valid())).not.toContain('CONST-004');
+  });
+
+  it('resolves applies_to when catalogue admits the target', () => {
+    const catalog: CanonCatalog = {
+      typeOf: (id) => (id === 'APPLICATION-CRM-1' ? 'APPLICATION' : id === 'ROLE-DPO-1' ? 'ROLE' : undefined),
+    };
+    expect(validateConstraint(valid(), { catalog }).valid).toBe(true);
+  });
+});

package/src/constraint/index.ts

@@ -0,0 +1,4 @@
+export { CONSTRAINT_STATUSES, CONSTRAINT_SEVERITIES } from './types.js';
+export type { ConstraintStatus, ConstraintSeverity } from './types.js';
+export { validateConstraint } from './validate.js';
+export type { ConstraintValidateOptions } from './validate.js';

package/src/constraint/types.ts

@@ -0,0 +1,5 @@
+export const CONSTRAINT_STATUSES = ['active', 'proposed', 'deprecated', 'retired'] as const;
+export type ConstraintStatus = (typeof CONSTRAINT_STATUSES)[number];
+
+export const CONSTRAINT_SEVERITIES = ['mandatory', 'recommended', 'advisory'] as const;
+export type ConstraintSeverity = (typeof CONSTRAINT_SEVERITIES)[number];

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/goals/GoalNode.tsx

@@ -0,0 +1,219 @@
+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;
+const NODE_HEIGHT = 80;
+
+function impactSign(f: Factor): 'positive' | 'negative' | 'both' {
+  const t = f.impact_type;
+  if (t === 'mixed') return 'both';
+  if (t === 'opportunity' || t === 'positive') return 'positive';
+  return 'negative';
+}
+
+export interface GoalNodeData {
+  goal: Goal;
+  theme: Required<ThemeTokens>;
+  readOnly: boolean;
+  isDropTarget: boolean;
+  hasHiddenChildren: boolean;
+  isCollapsed: boolean;
+  onAddChild: (parentId: number, parentLevel: number) => void;
+  onDelete: (id: number) => void;
+  onToggleCollapse: (id: number) => void;
+  onFactorClick?: (factor: Factor) => void;
+}
+
+const GoalNode = memo(({ data }: { data: GoalNodeData }) => {
+  const { goal, theme, readOnly, isDropTarget, hasHiddenChildren, isCollapsed } = data;
+  const [openPanel, setOpenPanel] = useState<'positive' | 'negative' | null>(null);
+
+  const positive = (goal.factors ?? []).filter((f) => impactSign(f) !== 'negative');
+  const negative = (goal.factors ?? []).filter((f) => impactSign(f) !== 'positive');
+  const bg = theme.goalLevelColors[goal.level] ?? theme.goalLevelColors[0];
+
+  return (
+    <div
+      className="tx-goal-node"
+      style={{
+        position: 'relative',
+        width: NODE_WIDTH,
+        height: NODE_HEIGHT,
+        background: bg,
+        borderRadius: 12,
+        borderStyle: 'solid',
+        borderWidth: isDropTarget ? 2 : theme.cardBorderWidth,
+        borderColor: isDropTarget ? theme.dropTargetBorderColor : theme.cardBorderColor,
+        boxShadow: '0 1px 4px rgba(0,0,0,0.12)',
+        padding: '6px 8px',
+        fontSize: 12,
+        display: 'flex',
+        alignItems: 'stretch',
+        justifyContent: 'center',
+      }}
+    >
+      <Handle type="target" position={Position.Left} style={{ opacity: 0 }} />
+      <Handle type="source" position={Position.Right} style={{ opacity: 0 }} />
+
+      <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center', width: 16 }}>
+        {positive.length > 0 && (
+          <span
+            role="button"
+            aria-label={`${positive.length} positive factor${positive.length > 1 ? 's' : ''}`}
+            title={`${positive.length} positive factor${positive.length > 1 ? 's' : ''}`}
+            onClick={(e) => {
+              e.stopPropagation();
+              setOpenPanel(openPanel === 'positive' ? null : 'positive');
+            }}
+            style={{ cursor: 'pointer', color: '#16a34a', fontSize: 14, lineHeight: 1, userSelect: 'none' }}
+          >
+            &#9650;
+            {positive.length > 1 && <span style={{ fontSize: 9, fontWeight: 700, marginLeft: 2 }}>{positive.length}</span>}
+          </span>
+        )}
+      </div>
+
+      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', textAlign: 'center', padding: '0 4px' }}>
+        <div
+          title={goal.name}
+          style={{
+            fontWeight: 600,
+            color: theme.cardTextColor,
+            lineHeight: 1.2,
+            overflow: 'hidden',
+            display: '-webkit-box',
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: 'vertical',
+            wordBreak: 'break-word',
+          }}
+        >
+          {goal.name}
+        </div>
+        <div style={{ fontSize: 10, color: theme.cardMetaColor, marginTop: 2 }}>
+          ID: {displayGoalId(goal)} | Lvl: {goal.level}
+          {goal.tag ? ` | #${goal.tag}` : ''}
+        </div>
+      </div>
+
+      <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center', width: 16, justifyContent: 'flex-end' }}>
+        {negative.length > 0 && (
+          <span
+            role="button"
+            aria-label={`${negative.length} negative factor${negative.length > 1 ? 's' : ''}`}
+            title={`${negative.length} negative factor${negative.length > 1 ? 's' : ''}`}
+            onClick={(e) => {
+              e.stopPropagation();
+              setOpenPanel(openPanel === 'negative' ? null : 'negative');
+            }}
+            style={{ cursor: 'pointer', color: '#dc2626', fontSize: 14, lineHeight: 1, userSelect: 'none' }}
+          >
+            &#9660;
+            {negative.length > 1 && <span style={{ fontSize: 9, fontWeight: 700, marginLeft: 2 }}>{negative.length}</span>}
+          </span>
+        )}
+      </div>
+
+      {openPanel && (
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            width: '100%',
+            zIndex: 20,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 4,
+            ...(openPanel === 'positive' ? { bottom: 'calc(100% + 8px)' } : { top: 'calc(100% + 8px)' }),
+          }}
+        >
+          {(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'}`,
+                color: openPanel === 'positive' ? '#166534' : '#991b1b',
+                borderRadius: 4,
+                padding: '4px 6px',
+                fontSize: 10,
+                textAlign: 'left',
+                cursor: data.onFactorClick ? 'pointer' : 'default',
+              }}
+            >
+              <div style={{ fontWeight: 700 }}>{f.name}</div>
+              {f.description && <div style={{ opacity: 0.85 }}>{f.description}</div>}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {!readOnly && (
+        <button
+          type="button"
+          aria-label="Add child goal"
+          title="Add child goal"
+          onClick={(e) => {
+            e.stopPropagation();
+            data.onAddChild(goal.id, goal.level);
+          }}
+          style={{
+            position: 'absolute', top: -8, right: -8, width: 16, height: 16,
+            borderRadius: '50%', border: '1px solid #86efac', background: '#ffffff',
+            color: '#16a34a', fontSize: 11, lineHeight: '14px', padding: 0, cursor: 'pointer',
+          }}
+        >
+          +
+        </button>
+      )}
+
+      {!readOnly && (
+        <button
+          type="button"
+          aria-label="Delete goal"
+          title="Delete goal and descendants"
+          onClick={(e) => {
+            e.stopPropagation();
+            data.onDelete(goal.id);
+          }}
+          style={{
+            position: 'absolute', bottom: -8, right: -8, width: 16, height: 16,
+            borderRadius: '50%', border: '1px solid #fca5a5', background: '#ffffff',
+            color: '#dc2626', fontSize: 11, lineHeight: '14px', padding: 0, cursor: 'pointer',
+          }}
+        >
+          &times;
+        </button>
+      )}
+
+      {hasHiddenChildren && (
+        <button
+          type="button"
+          aria-label={isCollapsed ? 'Expand branch' : 'Collapse branch'}
+          title={isCollapsed ? 'Expand branch' : 'Collapse branch'}
+          onClick={(e) => {
+            e.stopPropagation();
+            data.onToggleCollapse(goal.id);
+          }}
+          style={{
+            position: 'absolute', top: '50%', right: -8, transform: 'translateY(-50%)',
+            width: 16, height: 16, borderRadius: '50%', border: `1px solid ${theme.cardBorderColor}`,
+            background: '#ffffff', color: theme.cardBorderColor, fontSize: 11, lineHeight: '14px', padding: 0, cursor: 'pointer',
+          }}
+        >
+          {isCollapsed ? '+' : '−'}
+        </button>
+      )}
+    </div>
+  );
+});
+
+GoalNode.displayName = 'GoalNode';
+
+export default GoalNode;