@runfusion/fusion 0.24.0 → 0.25.0

package/dist/plugins/fusion-plugin-dependency-graph/src/DependencyGraph.css

@@ -1,58 +0,0 @@
-.dependency-graph {
-  position: relative;
-  height: 100%;
-  padding: var(--space-md);
-}
-
-.dependency-graph__viewport {
-  position: relative;
-  overflow: hidden;
-  height: 100%;
-  min-height: calc(var(--space-2xl) * 10);
-  border: var(--btn-border-width) solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--surface);
-  touch-action: none;
-}
-
-.graph-canvas-transform {
-  position: relative;
-  transform-origin: top left;
-}
-
-.graph-canvas-transform--animate {
-  transition: transform var(--transition-normal);
-}
-
-.dependency-graph__nodes-layer {
-  position: relative;
-  z-index: 1;
-}
-
-.dependency-graph__nodes-layer .graph-task-node {
-  max-width: min(100%, calc(var(--space-2xl) * 9));
-}
-
-.dependency-graph-edges {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  overflow: visible;
-}
-
-
-.dependency-graph__empty {
-  color: var(--text-muted);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-
-@media (max-width: 768px) {
-  .dependency-graph {
-    padding: var(--space-sm);
-  }
-}

package/dist/plugins/fusion-plugin-dependency-graph/src/DependencyGraph.tsx

@@ -1,301 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type { Task } from "@fusion/core";
-import { GraphTaskNode } from "./GraphTaskNode";
-import { GraphToolbar } from "./GraphToolbar";
-import { GraphEdges } from "./edges";
-import { filterGraphTasks } from "./filters";
-import { computeAutoLayout } from "./layout";
-import { useGraphData } from "./useGraphData";
-import { useGraphInteraction } from "./useGraphInteraction";
-import { useDependencyChain } from "./hooks/useDependencyChain";
-import { useGraphPositions } from "./hooks/useGraphPositions";
-import { mergePositions, type NodePositions } from "./utils/graphPositionStorage";
-import "./DependencyGraph.css";
-
-const NODE_WIDTH = 280;
-const NODE_HEIGHT = 100;
-
-export interface DependencyGraphProps {
-  tasks: Task[];
-  projectId?: string;
-  onOpenTaskDetail?: (taskId: string) => void;
-  onOpenDetail?: (task: Task) => void;
-  addToast?: (message: string, type?: "success" | "error" | "info" | "warning") => void;
-  globalPaused?: boolean;
-  onUpdateTask?: (id: string, updates: { title?: string; description?: string; dependencies?: string[] }) => Promise<Task>;
-  onArchiveTask?: (id: string) => Promise<Task>;
-  onUnarchiveTask?: (id: string) => Promise<Task>;
-  onDeleteTask?: (id: string, options?: { removeDependencyReferences?: boolean }) => Promise<Task>;
-  onRetryTask?: (id: string) => Promise<Task>;
-  onOpenDetailWithTab?: (task: Task, initialTab: "changes") => void;
-  taskStuckTimeoutMs?: number;
-  onOpenMission?: (missionId: string) => void;
-  onMoveTask?: (id: string, column: Task["column"], optionsOrPosition?: { preserveProgress?: boolean } | number) => Promise<Task>;
-  lastFetchTimeMs?: number;
-  workflowStepNameLookup?: ReadonlyMap<string, string>;
-}
-
-const POINTER_MOVE_THRESHOLD = 4;
-
-export function DependencyGraph({
-  tasks,
-  projectId,
-  onOpenTaskDetail,
-  onOpenDetail,
-  addToast,
-  globalPaused,
-  onUpdateTask,
-  onArchiveTask,
-  onUnarchiveTask,
-  onDeleteTask,
-  onRetryTask,
-  onOpenDetailWithTab,
-  taskStuckTimeoutMs,
-  onOpenMission,
-  onMoveTask,
-  lastFetchTimeMs,
-  workflowStepNameLookup,
-}: DependencyGraphProps) {
-  const viewportRef = useRef<HTMLDivElement | null>(null);
-  const initialFitDoneRef = useRef(false);
-  const pointerDownRef = useRef<{ x: number; y: number } | null>(null);
-  const pointerDraggedRef = useRef(false);
-  const [hoveredTaskId, setHoveredTaskId] = useState<string | null>(null);
-  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
-  const filteredTasks = useMemo(() => filterGraphTasks(tasks), [tasks]);
-  const graphData = useGraphData(filteredTasks);
-  const { getChain } = useDependencyChain(filteredTasks);
-  const activeTaskId = hoveredTaskId ?? selectedTaskId;
-  const highlightedTaskIds = useMemo(() => (activeTaskId ? getChain(activeTaskId) : new Set<string>()), [activeTaskId, getChain]);
-
-  const autoLayoutPositions = useMemo(
-    () => computeAutoLayout(graphData, { nodeWidth: NODE_WIDTH, nodeHeight: NODE_HEIGHT, horizontalGap: 40, verticalGap: 80 }),
-    [graphData],
-  );
-  const visibleTaskIds = useMemo(() => new Set(filteredTasks.map((task) => task.id)), [filteredTasks]);
-  const { savedPositions, persistPositions, clearSavedPositions } = useGraphPositions({ projectId, visibleTaskIds });
-  const [positions, setPositions] = useState<Map<string, { x: number; y: number }>>(autoLayoutPositions);
-  const [isNodeDragging, setIsNodeDragging] = useState(false);
-
-  useEffect(() => {
-    const autoLayoutRecord: NodePositions = {};
-    for (const [taskId, position] of autoLayoutPositions.entries()) {
-      autoLayoutRecord[taskId] = position;
-    }
-
-    const merged = savedPositions ? mergePositions(autoLayoutRecord, savedPositions, visibleTaskIds) : autoLayoutRecord;
-    setPositions(new Map(Object.entries(merged)));
-  }, [autoLayoutPositions, savedPositions, visibleTaskIds]);
-
-  const {
-    transform,
-    zoom,
-    transitioning,
-    zoomIn,
-    zoomOut,
-    resetView,
-    fitToGraph,
-    onPointerDown,
-    onPointerMove,
-    onPointerUp,
-    onWheelZoom,
-    handleKeyDown,
-  } = useGraphInteraction();
-
-  useEffect(() => {
-    if (initialFitDoneRef.current) return;
-    if (filteredTasks.length === 0) return;
-
-    const hasSavedPositions = Boolean(savedPositions && Object.keys(savedPositions).length > 0);
-    if (hasSavedPositions) {
-      initialFitDoneRef.current = true;
-      return;
-    }
-
-    const viewport = viewportRef.current;
-    if (!viewport) return;
-
-    fitToGraph(positions, viewport.clientWidth, viewport.clientHeight, { nodeWidth: NODE_WIDTH, nodeHeight: NODE_HEIGHT });
-    initialFitDoneRef.current = true;
-  }, [filteredTasks.length, fitToGraph, positions, savedPositions]);
-
-  const bounds = useMemo(() => {
-    const values = Array.from(positions.values());
-    if (values.length === 0) return { width: 0, height: 0 };
-    const maxX = Math.max(...values.map((pos) => pos.x + NODE_WIDTH));
-    const maxY = Math.max(...values.map((pos) => pos.y + NODE_HEIGHT));
-    return { width: maxX, height: maxY };
-  }, [positions]);
-
-  const handleResetLayout = useCallback(() => {
-    clearSavedPositions();
-    const freshLayout = computeAutoLayout(graphData, { nodeWidth: NODE_WIDTH, nodeHeight: NODE_HEIGHT, horizontalGap: 40, verticalGap: 80 });
-    setPositions(freshLayout);
-  }, [clearSavedPositions, graphData]);
-
-  const handleNodeDragEnd = useCallback(() => {
-    const positionRecord: NodePositions = {};
-    for (const [taskId, position] of positions.entries()) {
-      positionRecord[taskId] = position;
-    }
-    persistPositions(positionRecord);
-  }, [persistPositions, positions]);
-
-  return (
-    <section className="dependency-graph" data-testid="dependency-graph">
-      <div
-        ref={viewportRef}
-        className="dependency-graph__viewport"
-        onPointerDown={(event) => {
-          if (isNodeDragging) return;
-          pointerDownRef.current = { x: event.clientX, y: event.clientY };
-          pointerDraggedRef.current = false;
-          onPointerDown(event.pointerId, { x: event.clientX, y: event.clientY });
-        }}
-        onPointerMove={(event) => {
-          if (isNodeDragging) return;
-          const viewport = viewportRef.current;
-          if (!viewport) return;
-          const pointerDown = pointerDownRef.current;
-          if (pointerDown) {
-            const deltaX = Math.abs(event.clientX - pointerDown.x);
-            const deltaY = Math.abs(event.clientY - pointerDown.y);
-            if (deltaX > POINTER_MOVE_THRESHOLD || deltaY > POINTER_MOVE_THRESHOLD) {
-              pointerDraggedRef.current = true;
-            }
-          }
-          onPointerMove(event.pointerId, { x: event.clientX, y: event.clientY }, viewport.clientWidth, viewport.clientHeight);
-        }}
-        onPointerUp={(event) => {
-          if (!isNodeDragging) {
-            onPointerUp(event.pointerId);
-          }
-          pointerDownRef.current = null;
-        }}
-        onPointerCancel={(event) => {
-          if (!isNodeDragging) {
-            onPointerUp(event.pointerId);
-          }
-          pointerDownRef.current = null;
-          pointerDraggedRef.current = false;
-        }}
-        onWheel={(event) => {
-          event.preventDefault();
-          const viewport = viewportRef.current;
-          if (!viewport) return;
-          const rect = viewport.getBoundingClientRect();
-          onWheelZoom(event.deltaY, { x: event.clientX - rect.left, y: event.clientY - rect.top }, viewport.clientWidth, viewport.clientHeight);
-        }}
-        onKeyDown={(event) => {
-          const viewport = viewportRef.current;
-          if (!viewport) return;
-          handleKeyDown(event, viewport.clientWidth, viewport.clientHeight, positions, { nodeWidth: NODE_WIDTH, nodeHeight: NODE_HEIGHT });
-        }}
-        tabIndex={0}
-        style={{ outline: "none" }}
-        onClick={() => {
-          if (pointerDraggedRef.current || isNodeDragging) return;
-          setSelectedTaskId(null);
-        }}
-      >
-        {filteredTasks.length === 0 ? (
-          <div className="dependency-graph__empty">No active tasks to display in graph view.</div>
-        ) : (
-          <div className={`graph-canvas-transform${transitioning ? " graph-canvas-transform--animate" : ""}`} style={{ transform, width: `${bounds.width}px`, height: `${bounds.height}px` }}>
-            <GraphEdges
-              edges={graphData.edges}
-              positions={positions}
-              nodeWidth={NODE_WIDTH}
-              nodeHeight={NODE_HEIGHT}
-              highlightedEdgeIds={
-                highlightedTaskIds.size > 0
-                  ? new Set(
-                      graphData.edges
-                        .filter((edge) => highlightedTaskIds.has(edge.source) && highlightedTaskIds.has(edge.target))
-                        .map((edge) => `${edge.source}->${edge.target}`),
-                    )
-                  : undefined
-              }
-            />
-            <div className="dependency-graph__nodes-layer">
-              {graphData.nodes.map((node) => {
-                const position = positions.get(node.task.id);
-                if (!position) return null;
-
-                return (
-                  <GraphTaskNode
-                    key={node.task.id}
-                    task={node.task}
-                    projectId={projectId}
-                    style={{ minHeight: `${NODE_HEIGHT}px`, left: `${position.x}px`, top: `${position.y}px` }}
-                    position={position}
-                    scale={zoom}
-                    onNodePositionChange={(taskId, nextPosition) => {
-                      setPositions((current) => {
-                        const existing = current.get(taskId);
-                        if (existing && existing.x === nextPosition.x && existing.y === nextPosition.y) return current;
-                        const next = new Map(current);
-                        next.set(taskId, nextPosition);
-                        return next;
-                      });
-                    }}
-                    onNodeDragStateChange={setIsNodeDragging}
-                    onNodeDragEnd={handleNodeDragEnd}
-                    isHighlighted={highlightedTaskIds.size > 0 && highlightedTaskIds.has(node.task.id)}
-                    isDimmed={highlightedTaskIds.size > 0 && !highlightedTaskIds.has(node.task.id)}
-                    onOpenDetail={onOpenDetail ?? ((task) => onOpenTaskDetail?.(task.id))}
-                    addToast={addToast ?? (() => {})}
-                    globalPaused={globalPaused}
-                    onUpdateTask={onUpdateTask}
-                    onArchiveTask={onArchiveTask}
-                    onUnarchiveTask={onUnarchiveTask}
-                    onDeleteTask={onDeleteTask}
-                    onRetryTask={onRetryTask}
-                    onOpenDetailWithTab={onOpenDetailWithTab}
-                    taskStuckTimeoutMs={taskStuckTimeoutMs}
-                    onOpenMission={onOpenMission}
-                    onMoveTask={onMoveTask}
-                    lastFetchTimeMs={lastFetchTimeMs}
-                    workflowStepNameLookup={workflowStepNameLookup}
-                    onMouseEnter={() => setHoveredTaskId(node.task.id)}
-                    onMouseLeave={() => setHoveredTaskId(null)}
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      pointerDraggedRef.current = false;
-                      setSelectedTaskId((current) => (current === node.task.id ? null : node.task.id));
-                    }}
-                  />
-                );
-              })}
-            </div>
-          </div>
-        )}
-      </div>
-
-      <GraphToolbar
-        zoom={zoom}
-        onZoomIn={() => {
-          const viewport = viewportRef.current;
-          if (!viewport) return;
-          zoomIn(viewport.clientWidth, viewport.clientHeight);
-        }}
-        onZoomOut={() => {
-          const viewport = viewportRef.current;
-          if (!viewport) return;
-          zoomOut(viewport.clientWidth, viewport.clientHeight);
-        }}
-        onFitToGraph={() => {
-          handleResetLayout();
-          const viewport = viewportRef.current;
-          if (!viewport) return;
-          const freshLayout = computeAutoLayout(graphData, { nodeWidth: NODE_WIDTH, nodeHeight: NODE_HEIGHT, horizontalGap: 40, verticalGap: 80 });
-          fitToGraph(freshLayout, viewport.clientWidth, viewport.clientHeight, { nodeWidth: NODE_WIDTH, nodeHeight: NODE_HEIGHT });
-        }}
-        onResetView={() => {
-          handleResetLayout();
-          resetView();
-        }}
-      />
-    </section>
-  );
-}

package/dist/plugins/fusion-plugin-dependency-graph/src/GraphHighlight.css

@@ -1,27 +0,0 @@
-.graph-node--highlighted {
-  opacity: 1;
-  box-shadow: var(--shadow-glow);
-}
-
-.graph-node--dimmed {
-  opacity: 0.25;
-  transition: opacity var(--transition-fast);
-}
-
-.graph-edge--highlighted {
-  opacity: 1;
-  stroke: var(--todo);
-  stroke-width: var(--space-xs);
-}
-
-.graph-edge--dimmed {
-  opacity: 0.15;
-  transition: opacity var(--transition-fast);
-}
-
-@media (max-width: 768px) {
-  .graph-node--dimmed,
-  .graph-edge--dimmed {
-    transition: opacity var(--transition-fast);
-  }
-}

package/dist/plugins/fusion-plugin-dependency-graph/src/GraphTaskNode.css

@@ -1,157 +0,0 @@
-.graph-task-node {
-  position: absolute;
-  z-index: 1;
-  width: min(100%, var(--graph-task-node-width, calc(var(--space-2xl) * 9)));
-  max-width: var(--graph-task-node-max-width, calc(var(--space-2xl) * 9.5));
-  transition:
-    box-shadow var(--transition-fast),
-    z-index var(--transition-fast),
-    opacity var(--transition-fast),
-    border-color var(--transition-fast);
-  border: var(--btn-border-width) solid transparent;
-  border-radius: var(--radius-sm);
-}
-
-.graph-task-node:hover {
-  box-shadow: var(--shadow-md);
-  z-index: 2;
-}
-
-.graph-task-node--highlighted {
-  box-shadow: 0 0 0 var(--btn-border-width) var(--todo), var(--shadow-md);
-  z-index: 2;
-}
-
-.graph-task-node--dimmed {
-  opacity: 0.4;
-}
-
-.graph-task-node--active {
-  border-color: rgba(var(--in-progress-rgb), 0.5);
-  box-shadow: 0 0 0 var(--btn-border-width) rgba(var(--in-progress-rgb), 0.45), 0 0 0.75rem rgba(var(--in-progress-rgb), 0.5), 0 0 1.5rem rgba(var(--in-progress-rgb), 0.2);
-  transform: scale(1.01);
-}
-
-.graph-task-node--in-review {
-  border-inline-start: calc(var(--btn-border-width) * 3) solid var(--in-review);
-  border-start-start-radius: var(--radius-md);
-  border-end-start-radius: var(--radius-md);
-}
-
-.graph-task-active-indicator {
-  display: flex;
-  align-items: center;
-  min-height: 1.25rem;
-  width: 100%;
-  padding-inline: var(--space-sm);
-  background: rgba(var(--in-progress-rgb), 0.85);
-  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
-  animation: graph-task-active-pulse calc(var(--transition-normal) * 8) ease-in-out infinite;
-}
-
-.graph-task-active-indicator-text {
-  font-family: var(--font-mono);
-  font-size: 0.625rem;
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--card);
-}
-
-.graph-task-node .card {
-  width: 100%;
-  height: 100%;
-}
-
-.graph-task-node[data-current-step="0"] .card-steps-list .card-step-item:nth-child(1),
-.graph-task-node[data-current-step="1"] .card-steps-list .card-step-item:nth-child(2),
-.graph-task-node[data-current-step="2"] .card-steps-list .card-step-item:nth-child(3),
-.graph-task-node[data-current-step="3"] .card-steps-list .card-step-item:nth-child(4),
-.graph-task-node[data-current-step="4"] .card-steps-list .card-step-item:nth-child(5),
-.graph-task-node[data-current-step="5"] .card-steps-list .card-step-item:nth-child(6),
-.graph-task-node[data-current-step="6"] .card-steps-list .card-step-item:nth-child(7),
-.graph-task-node[data-current-step="7"] .card-steps-list .card-step-item:nth-child(8),
-.graph-task-node[data-current-step="8"] .card-steps-list .card-step-item:nth-child(9),
-.graph-task-node[data-current-step="9"] .card-steps-list .card-step-item:nth-child(10),
-.graph-task-node[data-current-step="10"] .card-steps-list .card-step-item:nth-child(11),
-.graph-task-node[data-current-step="11"] .card-steps-list .card-step-item:nth-child(12),
-.graph-task-node[data-current-step="12"] .card-steps-list .card-step-item:nth-child(13),
-.graph-task-node[data-current-step="13"] .card-steps-list .card-step-item:nth-child(14),
-.graph-task-node[data-current-step="14"] .card-steps-list .card-step-item:nth-child(15),
-.graph-task-node[data-current-step="15"] .card-steps-list .card-step-item:nth-child(16),
-.graph-task-node[data-current-step="16"] .card-steps-list .card-step-item:nth-child(17),
-.graph-task-node[data-current-step="17"] .card-steps-list .card-step-item:nth-child(18),
-.graph-task-node[data-current-step="18"] .card-steps-list .card-step-item:nth-child(19),
-.graph-task-node[data-current-step="19"] .card-steps-list .card-step-item:nth-child(20) {
-  background: rgba(var(--in-progress-rgb), 0.15);
-  border-left: calc(var(--btn-border-width) * 2) solid var(--in-progress);
-  padding-left: var(--space-xs);
-  font-weight: 500;
-}
-
-.graph-task-node[data-current-step="0"] .card-steps-list .card-step-item:nth-child(1) .card-step-dot,
-.graph-task-node[data-current-step="1"] .card-steps-list .card-step-item:nth-child(2) .card-step-dot,
-.graph-task-node[data-current-step="2"] .card-steps-list .card-step-item:nth-child(3) .card-step-dot,
-.graph-task-node[data-current-step="3"] .card-steps-list .card-step-item:nth-child(4) .card-step-dot,
-.graph-task-node[data-current-step="4"] .card-steps-list .card-step-item:nth-child(5) .card-step-dot,
-.graph-task-node[data-current-step="5"] .card-steps-list .card-step-item:nth-child(6) .card-step-dot,
-.graph-task-node[data-current-step="6"] .card-steps-list .card-step-item:nth-child(7) .card-step-dot,
-.graph-task-node[data-current-step="7"] .card-steps-list .card-step-item:nth-child(8) .card-step-dot,
-.graph-task-node[data-current-step="8"] .card-steps-list .card-step-item:nth-child(9) .card-step-dot,
-.graph-task-node[data-current-step="9"] .card-steps-list .card-step-item:nth-child(10) .card-step-dot,
-.graph-task-node[data-current-step="10"] .card-steps-list .card-step-item:nth-child(11) .card-step-dot,
-.graph-task-node[data-current-step="11"] .card-steps-list .card-step-item:nth-child(12) .card-step-dot,
-.graph-task-node[data-current-step="12"] .card-steps-list .card-step-item:nth-child(13) .card-step-dot,
-.graph-task-node[data-current-step="13"] .card-steps-list .card-step-item:nth-child(14) .card-step-dot,
-.graph-task-node[data-current-step="14"] .card-steps-list .card-step-item:nth-child(15) .card-step-dot,
-.graph-task-node[data-current-step="15"] .card-steps-list .card-step-item:nth-child(16) .card-step-dot,
-.graph-task-node[data-current-step="16"] .card-steps-list .card-step-item:nth-child(17) .card-step-dot,
-.graph-task-node[data-current-step="17"] .card-steps-list .card-step-item:nth-child(18) .card-step-dot,
-.graph-task-node[data-current-step="18"] .card-steps-list .card-step-item:nth-child(19) .card-step-dot,
-.graph-task-node[data-current-step="19"] .card-steps-list .card-step-item:nth-child(20) .card-step-dot {
-  width: 0.5rem;
-  height: 0.5rem;
-  animation: graph-task-step-pulse calc(var(--transition-normal) * 10) ease-in-out infinite;
-}
-
-@keyframes graph-task-active-pulse {
-  0%,
-  100% {
-    background: rgba(var(--in-progress-rgb), 0.85);
-  }
-  50% {
-    background: rgba(var(--in-progress-rgb), 0.65);
-  }
-}
-
-@keyframes graph-task-step-pulse {
-  0%,
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.2);
-    opacity: 0.75;
-  }
-}
-
-@media (max-width: 768px) {
-  .graph-task-node {
-    width: min(100%, var(--graph-task-node-mobile-width, calc(var(--space-2xl) * 8)));
-  }
-
-  .graph-task-node--active {
-    transform: scale(1.005);
-  }
-
-  .graph-task-active-indicator {
-    min-height: 1.5rem;
-    padding-inline: var(--space-md);
-  }
-
-  .graph-task-active-indicator-text {
-    font-size: 0.6875rem;
-  }
-}

package/dist/plugins/fusion-plugin-dependency-graph/src/GraphTaskNode.tsx

@@ -1,126 +0,0 @@
-import type { CSSProperties, ComponentProps, HTMLAttributes } from "react";
-import type { GraphPosition } from "./types";
-import { useNodeDrag } from "./hooks/useNodeDrag";
-import { TaskCard } from "@fusion/dashboard/app/components/TaskCard";
-import { isTaskStuck } from "@fusion/dashboard/app/utils/taskStuck";
-import "./GraphTaskNode.css";
-import "./GraphHighlight.css";
-import "./styles/drag.css";
-
-type TaskCardComponentProps = ComponentProps<typeof TaskCard>;
-
-type TaskCardBridgeProps = Pick<
-  TaskCardComponentProps,
-  | "task"
-  | "projectId"
-  | "onOpenDetail"
-  | "addToast"
-  | "globalPaused"
-  | "onUpdateTask"
-  | "onArchiveTask"
-  | "onUnarchiveTask"
-  | "onDeleteTask"
-  | "onRetryTask"
-  | "onOpenDetailWithTab"
-  | "taskStuckTimeoutMs"
-  | "onOpenMission"
-  | "onMoveTask"
-  | "lastFetchTimeMs"
-  | "workflowStepNameLookup"
->;
-
-export interface GraphTaskNodeProps extends TaskCardBridgeProps, Pick<HTMLAttributes<HTMLDivElement>, "onMouseEnter" | "onMouseLeave" | "onClick"> {
-  style?: CSSProperties;
-  position: GraphPosition;
-  scale: number;
-  isHighlighted?: boolean;
-  isDimmed?: boolean;
-  onNodePositionChange: (taskId: string, position: GraphPosition) => void;
-  onNodeDragStateChange?: (isDragging: boolean) => void;
-  onNodeDragEnd?: () => void;
-}
-
-const ACTIVE_STATUSES = new Set(["planning", "researching", "executing", "finalizing", "merging", "merging-fix"]);
-
-function getStatusLabel(status?: string): string {
-  if (!status) {
-    return "Executing";
-  }
-
-  return status.charAt(0).toUpperCase() + status.slice(1);
-}
-
-export function GraphTaskNode({
-  style,
-  position,
-  scale,
-  isHighlighted = false,
-  isDimmed = false,
-  onMouseEnter,
-  onMouseLeave,
-  onClick,
-  onNodePositionChange,
-  onNodeDragStateChange,
-  onNodeDragEnd,
-  ...taskCardProps
-}: GraphTaskNodeProps) {
-  const { task, globalPaused, taskStuckTimeoutMs, lastFetchTimeMs, onOpenDetail } = taskCardProps;
-  const isFailed = task.status === "failed";
-  const isPaused = task.paused === true;
-  const isStuck = isTaskStuck(task, taskStuckTimeoutMs, lastFetchTimeMs);
-  const isAwaitingApproval = task.column === "triage" && task.status === "awaiting-approval";
-  const isActive =
-    !globalPaused &&
-    !isFailed &&
-    !isPaused &&
-    !isStuck &&
-    !isAwaitingApproval &&
-    (task.column === "in-progress" || ACTIVE_STATUSES.has(task.status as string));
-
-  const hasValidCurrentStep =
-    typeof task.currentStep === "number" &&
-    task.currentStep >= 0 &&
-    Array.isArray(task.steps) &&
-    task.currentStep < task.steps.length;
-  const isInReview = task.column === "in-review";
-
-  const drag = useNodeDrag({
-    taskId: task.id,
-    position,
-    scale,
-    onPositionChange: onNodePositionChange,
-    onDragStateChange: onNodeDragStateChange,
-    onDragEnd: onNodeDragEnd,
-  });
-
-  return (
-    <div
-      className={`graph-task-node graph-node--draggable${drag.isDragging ? " graph-node--dragging" : ""}${isHighlighted ? " graph-task-node--highlighted graph-node--highlighted" : ""}${isDimmed ? " graph-task-node--dimmed graph-node--dimmed" : ""}${isActive ? " graph-task-node--active" : ""}${isInReview ? " graph-task-node--in-review" : ""}`}
-      style={style}
-      draggable={false}
-      data-testid={`graph-task-node-${task.id}`}
-      data-current-step={isActive && hasValidCurrentStep ? String(task.currentStep) : undefined}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      onClick={(event) => {
-        onClick?.(event);
-        if (event.defaultPrevented) {
-          return;
-        }
-        onOpenDetail(task);
-      }}
-      onClickCapture={drag.onClickCapture}
-      onPointerDown={drag.onPointerDown}
-      onPointerMove={drag.onPointerMove}
-      onPointerUp={drag.onPointerUp}
-      onPointerCancel={drag.onPointerCancel}
-    >
-      {isActive ? (
-        <div className="graph-task-active-indicator">
-          <span className="graph-task-active-indicator-text">{getStatusLabel(task.status)}</span>
-        </div>
-      ) : null}
-      <TaskCard {...taskCardProps} onOpenDetail={() => {}} disableDrag={true} />
-    </div>
-  );
-}