@transitrix/diagrams 1.4.0 → 1.6.0

package/src/compliance/__tests__/trace.test.ts

@@ -0,0 +1,157 @@
+import { describe, it, expect } from 'vitest';
+import { buildComplianceIndex } from '../reverse-index.js';
+import { buildRequirementTrace, buildTraceElementCatalog } from '../trace.js';
+import type { ComplianceIndexInput } from '../types.js';
+import type { ComplianceCodexDoc } from '../classify.js';
+
+// Requirement traceability + hierarchy view.
+//
+// The two halves the view exposes:
+//   1. Trace chain — derived_from → REQUIREMENT → ASSERTION → subject +
+//      realised_via.
+//   2. Hierarchy — parent chain + children via the `parent` field
+//      (15-requirement.md §2.4 / ELEMENT_PRIMITIVES.md §7.13).
+
+const input: ComplianceIndexInput = {
+  requirements: [
+    // A broad legislative parent decomposed into two child requirements.
+    { id: 'REQUIREMENT-DATA-PROTECTION-1', name: 'Personal-data protection', origin: 'legislative', derived_from: ['REGULATION-GDPR-2016-1'], element_kind: 'requirement' },
+    { id: 'REQUIREMENT-DATA-ERASURE-1',    name: 'Erase on request within 30 days', origin: 'legislative', parent: 'REQUIREMENT-DATA-PROTECTION-1', derived_from: ['REGULATION-GDPR-2016-1'], element_kind: 'requirement' },
+    { id: 'REQUIREMENT-DATA-CONSENT-1',    name: 'Obtain consent before processing', origin: 'legislative', parent: 'REQUIREMENT-DATA-PROTECTION-1', element_kind: 'requirement' },
+    // A process-product sub-requirement below the erasure duty (cross-origin).
+    { id: 'REQUIREMENT-ERASURE-SLA-1',     name: 'Erasure SOP — 30d target', origin: 'process-product', parent: 'REQUIREMENT-DATA-ERASURE-1', element_kind: 'requirement' },
+    // Constraint hierarchy (mirror pattern).
+    { id: 'CONSTRAINT-EEA-TRANSFER-1',     name: 'No transfer outside EEA without safeguards', element_kind: 'constraint' },
+    { id: 'CONSTRAINT-EEA-ANALYTICS-1',    name: 'No PII in analytics logs', parent: 'CONSTRAINT-EEA-TRANSFER-1', element_kind: 'constraint' },
+    // Internal-only requirement — no source, no parent — for the empty-case sanity check.
+    { id: 'REQUIREMENT-INTERNAL-1',        name: 'Internal-only', element_kind: 'requirement' },
+  ],
+  assertions: [
+    { id: 'ASSERTION-1', about: 'REQUIREMENT-DATA-ERASURE-1', subject: 'PRODUCT-MOBILE-1', realised_via: ['CAPABILITY-V1', 'PROCESS-PURGE-1'], status: 'compliant' },
+    { id: 'ASSERTION-2', about: 'REQUIREMENT-DATA-ERASURE-1', subject: 'PRODUCT-WEB-1',    status: 'partial' },
+    { id: 'ASSERTION-3', about: 'REQUIREMENT-DATA-CONSENT-1', subject: 'PRODUCT-WEB-1',    status: 'compliant' },
+  ],
+};
+
+const codex: ComplianceCodexDoc[] = [
+  { id: 'REGULATION-GDPR-2016-1', name: 'GDPR', type: 'REGULATION', jurisdiction: 'EU' },
+];
+
+const catalog = buildTraceElementCatalog(
+  [{ id: 'PRODUCT-MOBILE-1', name: 'Mobile app' }, { id: 'PRODUCT-WEB-1', name: 'Web app' }],
+  [{ id: 'CAPABILITY-V1', name: 'Erasure capability v1' }, { id: 'PROCESS-PURGE-1', name: 'Purge process' }],
+);
+
+describe('buildComplianceIndex — requirementsByParent', () => {
+  const idx = buildComplianceIndex(input);
+  it('groups children of the same parent', () => {
+    const children = idx.requirementsByParent.get('REQUIREMENT-DATA-PROTECTION-1');
+    expect(children?.map(r => r.id).sort()).toEqual(['REQUIREMENT-DATA-CONSENT-1', 'REQUIREMENT-DATA-ERASURE-1']);
+  });
+  it('groups CONSTRAINT children the same way (element_kind-agnostic)', () => {
+    const children = idx.requirementsByParent.get('CONSTRAINT-EEA-TRANSFER-1');
+    expect(children?.map(r => r.id)).toEqual(['CONSTRAINT-EEA-ANALYTICS-1']);
+  });
+  it('returns undefined for a leaf with no children', () => {
+    expect(idx.requirementsByParent.has('REQUIREMENT-INTERNAL-1')).toBe(false);
+  });
+});
+
+describe('buildRequirementTrace — trace chain', () => {
+  const idx = buildComplianceIndex(input);
+  it('resolves derived_from codex artefacts on the sources block', () => {
+    const trace = buildRequirementTrace('REQUIREMENT-DATA-ERASURE-1', idx, catalog, codex);
+    expect(trace.sources).toHaveLength(1);
+    expect(trace.sources[0].id).toBe('REGULATION-GDPR-2016-1');
+    expect(trace.sources[0].codex?.jurisdiction).toBe('EU');
+  });
+  it('keeps a dangling derived_from ref with no codex when the artefact is missing', () => {
+    const local: ComplianceIndexInput = {
+      requirements: [{ id: 'REQUIREMENT-X-1', name: 'X', derived_from: ['LAW-MISSING-1'] }],
+      assertions: [],
+    };
+    const trace = buildRequirementTrace('REQUIREMENT-X-1', buildComplianceIndex(local), catalog);
+    expect(trace.sources).toEqual([{ id: 'LAW-MISSING-1' }]);
+  });
+  it('lists ASSERTIONs id-sorted, each with resolved subject + realised_via names', () => {
+    const trace = buildRequirementTrace('REQUIREMENT-DATA-ERASURE-1', idx, catalog, codex);
+    expect(trace.assertions.map(a => a.assertion.id)).toEqual(['ASSERTION-1', 'ASSERTION-2']);
+    expect(trace.assertions[0].subject).toEqual({ id: 'PRODUCT-MOBILE-1', name: 'Mobile app' });
+    expect(trace.assertions[0].realisedVia.map(r => r.name)).toEqual(['Erasure capability v1', 'Purge process']);
+  });
+  it('returns an empty assertions list for a REQUIREMENT with no filed claim', () => {
+    const trace = buildRequirementTrace('REQUIREMENT-DATA-PROTECTION-1', idx, catalog);
+    expect(trace.assertions).toEqual([]);
+  });
+  it('returns an empty assertions list for a CONSTRAINT (16-assertion.md §1 — CONSTRAINT-side out of v1)', () => {
+    const trace = buildRequirementTrace('CONSTRAINT-EEA-TRANSFER-1', idx, catalog);
+    expect(trace.assertions).toEqual([]);
+  });
+  it('falls back to id when the subject / realised_via element is not in the catalog (dangling ref)', () => {
+    const local: ComplianceIndexInput = {
+      requirements: [{ id: 'REQUIREMENT-Y-1', name: 'Y' }],
+      assertions: [{ id: 'ASSERTION-9', about: 'REQUIREMENT-Y-1', subject: 'PRODUCT-GONE-1', realised_via: ['CAPABILITY-GONE-1'], status: 'n_a' }],
+    };
+    const trace = buildRequirementTrace('REQUIREMENT-Y-1', buildComplianceIndex(local), catalog);
+    expect(trace.assertions[0].subject).toEqual({ id: 'PRODUCT-GONE-1' });
+    expect(trace.assertions[0].realisedVia).toEqual([{ id: 'CAPABILITY-GONE-1' }]);
+  });
+});
+
+describe('buildRequirementTrace — hierarchy', () => {
+  const idx = buildComplianceIndex(input);
+  it('walks ancestors: immediate parent first, root last', () => {
+    const trace = buildRequirementTrace('REQUIREMENT-ERASURE-SLA-1', idx, catalog);
+    expect(trace.ancestors.map(r => r.id)).toEqual([
+      'REQUIREMENT-DATA-ERASURE-1',
+      'REQUIREMENT-DATA-PROTECTION-1',
+    ]);
+  });
+  it('lists direct children id-sorted', () => {
+    const trace = buildRequirementTrace('REQUIREMENT-DATA-PROTECTION-1', idx, catalog);
+    expect(trace.children.map(r => r.id)).toEqual([
+      'REQUIREMENT-DATA-CONSENT-1',
+      'REQUIREMENT-DATA-ERASURE-1',
+    ]);
+  });
+  it('handles a top-level requirement (no ancestors) with no children', () => {
+    const trace = buildRequirementTrace('REQUIREMENT-INTERNAL-1', idx, catalog);
+    expect(trace.ancestors).toEqual([]);
+    expect(trace.children).toEqual([]);
+  });
+  it('supports CONSTRAINT hierarchy the same way', () => {
+    const trace = buildRequirementTrace('CONSTRAINT-EEA-ANALYTICS-1', idx, catalog);
+    expect(trace.ancestors.map(r => r.id)).toEqual(['CONSTRAINT-EEA-TRANSFER-1']);
+  });
+  it('terminates at a missing parent without throwing (broken model)', () => {
+    const local: ComplianceIndexInput = {
+      requirements: [{ id: 'REQUIREMENT-ORPHAN-1', name: 'Orphan', parent: 'REQUIREMENT-GONE-1' }],
+      assertions: [],
+    };
+    const trace = buildRequirementTrace('REQUIREMENT-ORPHAN-1', buildComplianceIndex(local), catalog);
+    expect(trace.ancestors).toEqual([]);
+  });
+  it('breaks a parent cycle rather than looping', () => {
+    // A → B → A (misauthored).
+    const local: ComplianceIndexInput = {
+      requirements: [
+        { id: 'REQUIREMENT-A-1', name: 'A', parent: 'REQUIREMENT-B-1' },
+        { id: 'REQUIREMENT-B-1', name: 'B', parent: 'REQUIREMENT-A-1' },
+      ],
+      assertions: [],
+    };
+    const trace = buildRequirementTrace('REQUIREMENT-A-1', buildComplianceIndex(local), catalog);
+    expect(trace.ancestors.map(r => r.id)).toEqual(['REQUIREMENT-B-1']);
+  });
+});
+
+describe('buildRequirementTrace — dangling target', () => {
+  it('returns a stub carrying the id as name when the requirement is not scanned', () => {
+    const trace = buildRequirementTrace('REQUIREMENT-UNKNOWN-1', buildComplianceIndex({ requirements: [], assertions: [] }), catalog);
+    expect(trace.requirement).toEqual({ id: 'REQUIREMENT-UNKNOWN-1', name: 'REQUIREMENT-UNKNOWN-1' });
+    expect(trace.sources).toEqual([]);
+    expect(trace.assertions).toEqual([]);
+    expect(trace.ancestors).toEqual([]);
+    expect(trace.children).toEqual([]);
+  });
+});

package/src/compliance/classify.ts

@@ -65,7 +65,8 @@ export function ingestComplianceDoc(canon: ComplianceCanon, doc: unknown): strin
     canon.subjects.push({ id, name: str(d.name) ?? id });
     return id;
   }
-  if (d.notation === 'requirement') {
+  if (d.notation === 'requirement' || d.notation === 'constraint') {
+    const origin = str(d.origin);
     canon.requirements.push({
       id,
       name: str(d.name) ?? id,
@@ -73,6 +74,11 @@ export function ingestComplianceDoc(canon: ComplianceCanon, doc: unknown): strin
       derived_from: strArray(d.derived_from),
       admitted_at: str(d.admitted_at),
       deadline: str(d.deadline),
+      origin: origin === 'legislative' || origin === 'process-product' || origin === 'project-product' ? origin : undefined,
+      parent: str(d.parent),
+      element_kind: d.notation,
+      description: str(d.description),
+      next_review_at: str(d.next_review_at),
     });
     return id;
   }

package/src/compliance/index.ts

@@ -1,5 +1,6 @@
 export { buildComplianceIndex } from './reverse-index.js';
 export { buildLawTree, buildProductView } from './views.js';
+export { buildRequirementTrace, buildTraceElementCatalog } from './trace.js';
 export { buildGapReport } from './gap-report.js';
 export type { GapReport, GapReportOptions } from './gap-report.js';
 export { emptyCanon, ingestComplianceDoc } from './classify.js';
@@ -54,4 +55,9 @@ export type {
   ProductRequirementStatus,
   ObjectDetailDef,
   ObjectDetailInput,
+  RequirementTrace,
+  TraceAssertionRow,
+  TraceElementCatalog,
+  TraceElementRef,
+  TraceSourceRef,
 } from './types.js';

package/src/compliance/reverse-index.ts

@@ -19,15 +19,17 @@ export function buildComplianceIndex(input: ComplianceIndexInput): ComplianceInd
   const requirementsByLaw = new Map<string, IndexRequirement[]>();
   const assertionsByRequirement = new Map<string, IndexAssertion[]>();
   const assertionsBySubject = new Map<string, IndexAssertion[]>();
+  const requirementsByParent = new Map<string, IndexRequirement[]>();
 
   for (const r of input.requirements) {
     requirementById.set(r.id, r);
     for (const law of r.derived_from ?? []) push(requirementsByLaw, law, r);
+    if (r.parent) push(requirementsByParent, r.parent, r);
   }
   for (const a of input.assertions) {
     push(assertionsByRequirement, a.about, a);
     push(assertionsBySubject, a.subject, a);
   }
 
-  return { requirementById, requirementsByLaw, assertionsByRequirement, assertionsBySubject };
+  return { requirementById, requirementsByLaw, assertionsByRequirement, assertionsBySubject, requirementsByParent };
 }

package/src/compliance/trace.ts

@@ -0,0 +1,118 @@
+// Requirement traceability + hierarchy builder.
+//
+// Two halves, both origin-agnostic per 15-requirement.md §2.1:
+//
+//   1. Trace chain — `derived_from` sources → the REQUIREMENT / CONSTRAINT
+//      itself → any ASSERTION targeting it (`about`) → the asserted `subject`
+//      + `realised_via` elements. Assertion coverage applies to REQUIREMENT
+//      only (16-assertion.md §1); CONSTRAINT trace shows sources + hierarchy
+//      only.
+//
+//   2. Hierarchy — the `parent` chain (ancestors, root last) plus the direct
+//      children (elements whose `parent` names this one). Same-TYPE only per
+//      15-requirement.md §2.4; the chain terminates at the first missing or
+//      cyclic parent so a broken model still renders something useful.
+//
+// Pure: takes the reverse index + a name-resolution map + optional codex list;
+// no IO. `ComplianceCodexDoc` comes from the scanner so we get jurisdiction
+// alongside the codex id in the sources block.
+
+import type {
+  ComplianceIndex,
+  IndexRequirement,
+  RequirementTrace,
+  TraceAssertionRow,
+  TraceElementCatalog,
+  TraceElementRef,
+  TraceSourceRef,
+} from './types.js';
+import type { ComplianceCodexDoc } from './classify.js';
+
+function byId<T extends { id: string }>(a: T, b: T): number {
+  return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;
+}
+
+function resolveElement(id: string, catalog: TraceElementCatalog): TraceElementRef {
+  const name = catalog.nameById.get(id);
+  return name ? { id, name } : { id };
+}
+
+/**
+ * Walk the `parent` chain upward from `requirement`, stopping at the first
+ * missing or already-seen parent (cycle guard). Returns immediate parent first,
+ * root last. Empty array when the element has no `parent`.
+ */
+function collectAncestors(
+  requirement: IndexRequirement,
+  index: ComplianceIndex,
+): IndexRequirement[] {
+  const out: IndexRequirement[] = [];
+  const seen = new Set<string>([requirement.id]);
+  let current: IndexRequirement | undefined = requirement;
+  while (current?.parent && !seen.has(current.parent)) {
+    seen.add(current.parent);
+    const next = index.requirementById.get(current.parent);
+    if (!next) break;
+    out.push(next);
+    current = next;
+  }
+  return out;
+}
+
+/**
+ * Builds the REQUIREMENT / CONSTRAINT traceability view.
+ *
+ * @param requirementId typed id of the element to trace
+ * @param index         reverse index built by `buildComplianceIndex`
+ * @param catalog       name-resolution map for subject / realised_via refs
+ * @param codex         optional codex artefact list (from the scanner); when
+ *                      supplied, `sources[].codex` is populated with the
+ *                      resolved codex artefact for jurisdiction display
+ */
+export function buildRequirementTrace(
+  requirementId: string,
+  index: ComplianceIndex,
+  catalog: TraceElementCatalog,
+  codex: ComplianceCodexDoc[] = [],
+): RequirementTrace {
+  const requirement: IndexRequirement =
+    index.requirementById.get(requirementId) ?? { id: requirementId, name: requirementId };
+
+  const codexById = new Map<string, ComplianceCodexDoc>();
+  for (const c of codex) codexById.set(c.id, c);
+
+  const sources: TraceSourceRef[] = (requirement.derived_from ?? []).map(sid => {
+    const c = codexById.get(sid);
+    return c ? { id: sid, codex: c } : { id: sid };
+  });
+
+  const rawAssertions = index.assertionsByRequirement.get(requirementId) ?? [];
+  const assertions: TraceAssertionRow[] = [...rawAssertions]
+    .sort(byId)
+    .map(assertion => ({
+      assertion,
+      subject: resolveElement(assertion.subject, catalog),
+      realisedVia: (assertion.realised_via ?? []).map(rid => resolveElement(rid, catalog)),
+    }));
+
+  const ancestors = collectAncestors(requirement, index);
+  const children = [...(index.requirementsByParent.get(requirementId) ?? [])].sort(byId);
+
+  return { requirement, sources, assertions, ancestors, children };
+}
+
+/**
+ * Convenience: build a `TraceElementCatalog` from the scanned canon's product
+ * and subject buckets. Requirements/assertions are excluded — they are indexed
+ * separately by `buildComplianceIndex`; the catalog is only for resolving the
+ * elements a trace references (subjects + realised_via).
+ */
+export function buildTraceElementCatalog(
+  products: Array<{ id: string; name: string }>,
+  subjects: Array<{ id: string; name: string }>,
+): TraceElementCatalog {
+  const nameById = new Map<string, string>();
+  for (const p of products) nameById.set(p.id, p.name);
+  for (const s of subjects) nameById.set(s.id, s.name);
+  return { nameById };
+}

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

@@ -0,0 +1,212 @@
+import React, { memo, useState } from 'react';
+import { Handle, Position } from 'reactflow';
+import type { Factor, Goal } from './types.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;
+}
+
+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: {goal.id} | 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}
+              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',
+              }}
+            >
+              <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;