@transitrix/diagrams 1.5.0 → 1.6.0

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;

package/src/goals/GoalTreeView.tsx

@@ -0,0 +1,350 @@
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import ReactFlow, {
+  Controls,
+  MiniMap,
+  Background,
+  ConnectionLineType,
+  useNodesState,
+  useEdgesState,
+  type Node,
+  type Edge,
+  type NodeMouseHandler,
+  type NodeDragHandler,
+} from 'reactflow';
+import 'reactflow/dist/style.css';
+import type { 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';
+import { resolveTheme } from './theme.js';
+import GoalNode, { type GoalNodeData } from './GoalNode.js';
+
+export type { ThemeTokens } from './theme.js';
+
+export interface GoalTreeViewProps {
+  tree: GoalTree;
+  layout?: GoalTreeLayout;
+  layoutOptions?: LayoutOptions;
+  theme?: ThemeTokens;
+  readOnly?: boolean;
+  showBacklog?: boolean;
+  showMiniMap?: boolean;
+  onChange?: (event: GoalTreeChange) => void;
+  onEditRequest?: (goal: Goal) => void;
+}
+
+export type GoalTreeChange =
+  | { kind: 'reparent'; sourceId: number; targetId: number; result: GoalTree }
+  | { kind: 'addChild'; parentId: number; newGoal: Goal; result: GoalTree }
+  | { kind: 'delete'; id: number; result: GoalTree }
+  | { kind: 'moveToBacklog'; id: number; result: GoalTree }
+  | { kind: 'restoreFromBacklog'; id: number; newParentId: number; result: GoalTree };
+
+const BACKLOG_DRAG_MIME = 'application/x-transitrix-goal-id';
+const nodeTypes = { goalNode: GoalNode };
+
+/** Where a card was dropped, as classified from the pointer position at drag-stop. */
+export type DropTarget = { kind: 'node'; id: number } | { kind: 'backlog' } | null;
+
+/**
+ * Pure decision: given where a dragged card was dropped, compute the mutation
+ * and the GoalTreeChange to report (or null for a no-op drop). Kept separate
+ * from the DOM/pointer-event glue in onNodeDragStop so the mutation-selection
+ * logic — which card wins reparent vs moveToBacklog vs a refused mutation —
+ * is unit-testable without needing a real drag gesture through reactflow's
+ * internal, DOM-measurement-gated dragging.
+ */
+export function computeDragOutcome(tree: GoalTree, sourceId: number, dropTarget: DropTarget): GoalTreeChange | null {
+  if (!dropTarget) return null;
+  if (dropTarget.kind === 'backlog') {
+    const mutation = moveToBacklog(tree, sourceId);
+    if (!mutation.ok || !mutation.result) return null;
+    return { kind: 'moveToBacklog', id: sourceId, result: mutation.result };
+  }
+  if (dropTarget.id === sourceId) return null;
+  const mutation = reparent(tree, sourceId, dropTarget.id);
+  if (!mutation.ok || !mutation.result) return null;
+  return { kind: 'reparent', sourceId, targetId: dropTarget.id, result: mutation.result };
+}
+
+/** Goals reachable from a root (level 0 or parent_id 0) via valid parent_id chains. */
+function partitionCanvasAndBacklog(goals: Goal[]): { canvas: Goal[]; backlog: Goal[] } {
+  const children = new Map<number, Goal[]>();
+  for (const g of goals) {
+    if (!children.has(g.parent_id)) children.set(g.parent_id, []);
+    children.get(g.parent_id)!.push(g);
+  }
+  const roots = goals.filter((g) => g.level === 0 || g.parent_id === 0);
+  const reachable = new Set<number>();
+  const stack = [...roots.map((r) => r.id)];
+  while (stack.length > 0) {
+    const id = stack.pop()!;
+    if (reachable.has(id)) continue;
+    reachable.add(id);
+    for (const child of children.get(id) ?? []) stack.push(child.id);
+  }
+  const canvas: Goal[] = [];
+  const backlog: Goal[] = [];
+  for (const g of goals) {
+    if (reachable.has(g.id)) canvas.push(g);
+    else backlog.push(g); // unreachable from any root — broken/orphaned parent chain
+  }
+  return { canvas, backlog };
+}
+
+function GoalTreeViewInner({
+  tree,
+  layout: layoutProp,
+  layoutOptions,
+  theme: themeProp,
+  readOnly = false,
+  showBacklog = false,
+  showMiniMap = false,
+  onChange,
+  onEditRequest,
+}: 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 { canvas: canvasGoals, backlog: backlogGoals } = useMemo(
+    () => partitionCanvasAndBacklog(tree.goals),
+    [tree.goals],
+  );
+
+  const layout = useMemo<GoalTreeLayout>(() => {
+    if (layoutProp) return layoutProp;
+    const hideCollapsed = [...(layoutOptions?.hideCollapsed ?? []), ...collapsedIds];
+    return layoutGoalTree(
+      { goal_types: tree.goal_types, goals: canvasGoals },
+      { ...layoutOptions, hideCollapsed },
+    );
+  }, [layoutProp, layoutOptions, collapsedIds, tree.goal_types, canvasGoals]);
+
+  const onAddChild = useCallback(
+    (parentId: number, parentLevel: number) => {
+      if (readOnly) return;
+      const before = new Set(tree.goals.map((g) => g.id));
+      const mutation = addChild(tree, parentId, { name: 'New goal', type: '', level: parentLevel + 1, parent_id: parentId });
+      if (!mutation.ok || !mutation.result) return;
+      const newGoal = mutation.result.goals.find((g) => !before.has(g.id));
+      if (!newGoal) return;
+      onChange?.({ kind: 'addChild', parentId, newGoal, result: mutation.result });
+    },
+    [tree, readOnly, onChange],
+  );
+
+  const onDeleteNode = useCallback(
+    (id: number) => {
+      if (readOnly) return;
+      const mutation = deleteWithDescendants(tree, id);
+      if (!mutation.ok || !mutation.result) return;
+      onChange?.({ kind: 'delete', id, result: mutation.result });
+    },
+    [tree, readOnly, onChange],
+  );
+
+  const onRestoreFromBacklog = useCallback(
+    (id: number, newParentId: number) => {
+      if (readOnly) return;
+      const mutation = restoreFromBacklog(tree, id, newParentId);
+      if (!mutation.ok || !mutation.result) return;
+      onChange?.({ kind: 'restoreFromBacklog', id, newParentId, result: mutation.result });
+    },
+    [tree, readOnly, onChange],
+  );
+
+  const onToggleCollapse = useCallback((id: number) => {
+    setCollapsedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  const buildNodes = useCallback((): Node<GoalNodeData>[] => {
+    return layout.nodes.map((n) => ({
+      id: String(n.id),
+      type: 'goalNode',
+      position: { x: n.x, y: n.y },
+      draggable: !readOnly,
+      data: {
+        goal: n.data,
+        theme,
+        readOnly,
+        isDropTarget: hoveredId === n.id,
+        hasHiddenChildren: n.hasHiddenChildren,
+        isCollapsed: collapsedIds.has(n.id),
+        onAddChild,
+        onDelete: onDeleteNode,
+        onToggleCollapse,
+      },
+    }));
+  }, [layout.nodes, theme, readOnly, hoveredId, collapsedIds, onAddChild, onDeleteNode, onToggleCollapse]);
+
+  const buildEdges = useCallback((): Edge[] => {
+    return layout.edges.map((e) => ({
+      id: `e${e.source}-${e.target}`,
+      source: String(e.source),
+      target: String(e.target),
+      type: 'default',
+      style: { stroke: theme.edgeColor, strokeWidth: theme.edgeWidth },
+    }));
+  }, [layout.edges, theme]);
+
+  const [nodes, setNodes, onNodesChange] = useNodesState<GoalNodeData>(buildNodes());
+  const [edges, setEdges, onEdgesChange] = useEdgesState(buildEdges());
+
+  // Re-sync whenever the underlying layout/theme/interaction state changes —
+  // tree/layout are host-controlled props, not owned by this component.
+  useEffect(() => {
+    setNodes(buildNodes());
+    setEdges(buildEdges());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [layout, theme, readOnly, hoveredId, collapsedIds]);
+
+  const checkIntersection = useCallback(
+    (a: Node<GoalNodeData>, b: Node<GoalNodeData>): boolean => {
+      const midX = a.position.x + 125;
+      const midY = a.position.y + 40;
+      return midX > b.position.x && midX < b.position.x + 250 && midY > b.position.y && midY < b.position.y + 80;
+    },
+    [],
+  );
+
+  const onNodeDrag: NodeDragHandler = useCallback(
+    (_event, node) => {
+      if (readOnly) return;
+      const hit = nodes.find((n) => n.id !== node.id && checkIntersection(node as Node<GoalNodeData>, n));
+      setHoveredId(hit ? Number(hit.id) : null);
+    },
+    [readOnly, nodes, checkIntersection],
+  );
+
+  const onNodeDragStop: NodeDragHandler = useCallback(
+    (event, node) => {
+      if (readOnly) {
+        setHoveredId(null);
+        return;
+      }
+      const sourceId = Number(node.id);
+      const mouseEvent = event as unknown as MouseEvent;
+      const dropEl = typeof document !== 'undefined' && 'clientX' in mouseEvent
+        ? document.elementFromPoint(mouseEvent.clientX, mouseEvent.clientY)
+        : null;
+      const dropTarget: DropTarget = dropEl?.closest('[data-goaltree-backlog-zone]')
+        ? { kind: 'backlog' }
+        : hoveredId != null ? { kind: 'node', id: hoveredId } : null;
+      const change = computeDragOutcome(tree, sourceId, dropTarget);
+      if (change) onChange?.(change);
+      setHoveredId(null);
+    },
+    [readOnly, hoveredId, tree, onChange],
+  );
+
+  const onNodeDoubleClick: NodeMouseHandler = useCallback(
+    (_event, node) => {
+      const goal = tree.goals.find((g) => g.id === Number(node.id));
+      if (goal) onEditRequest?.(goal);
+    },
+    [tree.goals, onEditRequest],
+  );
+
+  const onBacklogItemDragStart = useCallback((event: React.DragEvent, goalId: number) => {
+    event.dataTransfer.setData(BACKLOG_DRAG_MIME, String(goalId));
+    event.dataTransfer.effectAllowed = 'move';
+  }, []);
+
+  const onCanvasDragOver = useCallback(
+    (event: React.DragEvent) => {
+      if (readOnly) return;
+      event.preventDefault();
+    },
+    [readOnly],
+  );
+
+  const onCanvasDrop = useCallback(
+    (event: React.DragEvent) => {
+      if (readOnly) return;
+      event.preventDefault();
+      const idStr = event.dataTransfer.getData(BACKLOG_DRAG_MIME);
+      if (!idStr) return;
+      const goalId = Number(idStr);
+      const targetEl = document.elementFromPoint(event.clientX, event.clientY);
+      const nodeEl = targetEl?.closest('.react-flow__node');
+      const targetIdAttr = nodeEl?.getAttribute('data-id');
+      if (targetIdAttr == null) return;
+      onRestoreFromBacklog(goalId, Number(targetIdAttr));
+    },
+    [readOnly, onRestoreFromBacklog],
+  );
+
+  const showBacklogPanel = showBacklog && backlogGoals.length > 0;
+
+  return (
+    <div style={{ display: 'flex', width: '100%', height: '100%' }}>
+      {showBacklogPanel && (
+        <div
+          data-goaltree-backlog-zone
+          style={{
+            width: 220,
+            flexShrink: 0,
+            borderRight: '1px solid #e2e8f0',
+            padding: 10,
+            overflowY: 'auto',
+            background: '#f8fafc',
+          }}
+        >
+          <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 style={{ flex: 1, position: 'relative' }} onDragOver={onCanvasDragOver} onDrop={onCanvasDrop}>
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          onNodesChange={readOnly ? undefined : onNodesChange}
+          onEdgesChange={readOnly ? undefined : onEdgesChange}
+          nodeTypes={nodeTypes}
+          nodesDraggable={!readOnly}
+          nodesConnectable={false}
+          onNodeDrag={onNodeDrag}
+          onNodeDragStop={onNodeDragStop}
+          onNodeDoubleClick={onNodeDoubleClick}
+          connectionLineType={ConnectionLineType.Bezier}
+          fitView
+        >
+          <Background />
+          <Controls />
+          {showMiniMap && <MiniMap pannable zoomable />}
+        </ReactFlow>
+      </div>
+    </div>
+  );
+}
+
+export function GoalTreeView(props: GoalTreeViewProps): React.ReactElement {
+  return <GoalTreeViewInner {...props} />;
+}