bosun 0.40.2 → 0.40.4

package/ui/tabs/tasks.js

@@ -96,12 +96,26 @@ const DAG_GLOBAL_ENDPOINT_CANDIDATES = [
   "/api/tasks/dag/global",
   "/api/tasks/graph/global",
 ];
+const DAG_EPIC_DEPENDENCY_ENDPOINT_CANDIDATES = [
+  "/api/tasks/epic-dependencies",
+  "/api/tasks/epics/dependencies",
+  "/api/tasks/dag/epics",
+];
 const EMPTY_DAG_GRAPH = {
   title: "",
   description: "",
   nodes: [],
   edges: [],
 };
+const DAG_EDGE_STYLES = {
+  "depends-on": { color: "var(--accent)", dash: "" },
+  dependency: { color: "var(--accent)", dash: "" },
+  sequential: { color: "var(--color-warning)", dash: "7 4" },
+  sequence: { color: "var(--color-warning)", dash: "7 4" },
+  blocks: { color: "var(--color-error)", dash: "2 4" },
+};
+const DAG_MIN_ZOOM = 0.25;
+const DAG_MAX_ZOOM = 2.4;
 
 /* ─── Status/Priority → MUI Chip color ─── */
 function statusChipColor(status) {
@@ -562,6 +576,291 @@ function normalizeDagGraph(raw, fallbackTitle = "") {
   };
 }
 
+function normalizeEpicDependenciesPayload(raw) {
+  const payload = extractDagPayload(raw);
+  const rows = toArray(payload?.data || payload?.items || payload);
+  return rows
+    .map((entry) => {
+      if (!entry || typeof entry !== "object") return null;
+      const epicId = toText(entry.epicId || entry.id || entry.epic);
+      if (!epicId) return null;
+      return {
+        epicId,
+        dependencies: normalizeDependencyInput(entry.dependencies || entry.dependsOn || []),
+      };
+    })
+    .filter(Boolean);
+}
+
+function buildEpicDagGraph(tasks = [], epicDependencies = []) {
+  const epicMap = new Map();
+  const pushEpicNode = (epicId) => {
+    const id = toText(epicId);
+    if (!id) return null;
+    if (!epicMap.has(id)) {
+      epicMap.set(id, { id, title: id, taskIds: [], statusCounts: new Map(), dependencies: [] });
+    }
+    return epicMap.get(id);
+  };
+
+  for (const task of tasks || []) {
+    const epicId = toText(task?.epicId || task?.meta?.epicId);
+    if (!epicId) continue;
+    const node = pushEpicNode(epicId);
+    node.taskIds.push(task.id);
+    const status = toText(task?.status || "todo", "todo").toLowerCase();
+    node.statusCounts.set(status, (node.statusCounts.get(status) || 0) + 1);
+  }
+
+  const depMap = new Map();
+  const addEdge = (from, to, kind = "dependency") => {
+    const src = toText(from);
+    const dst = toText(to);
+    if (!src || !dst || src === dst) return;
+    pushEpicNode(src);
+    const node = pushEpicNode(dst);
+    if (node && !node.dependencies.includes(src)) node.dependencies.push(src);
+    const key = `${src}->${dst}:${kind}`;
+    if (!depMap.has(key)) depMap.set(key, { source: src, target: dst, kind });
+  };
+
+  for (const row of epicDependencies || []) {
+    for (const dep of row.dependencies || []) addEdge(dep, row.epicId, "blocks");
+  }
+
+  const taskById = new Map((tasks || []).map((task) => [String(task?.id || ""), task]));
+  for (const task of tasks || []) {
+    const targetEpic = toText(task?.epicId || task?.meta?.epicId);
+    if (!targetEpic) continue;
+    for (const depId of normalizeDependencyInput(task?.dependencyTaskIds || task?.dependsOn || task?.meta?.dependencyTaskIds || [])) {
+      const depTask = taskById.get(String(depId));
+      const sourceEpic = toText(depTask?.epicId || depTask?.meta?.epicId);
+      if (!sourceEpic || sourceEpic === targetEpic) continue;
+      addEdge(sourceEpic, targetEpic, "dependency");
+    }
+  }
+
+  const indegree = new Map();
+  const outgoing = new Map();
+  for (const epicId of epicMap.keys()) {
+    indegree.set(epicId, 0);
+    outgoing.set(epicId, []);
+  }
+  for (const edge of depMap.values()) {
+    outgoing.get(edge.source)?.push(edge.target);
+    indegree.set(edge.target, (indegree.get(edge.target) || 0) + 1);
+  }
+
+  const queue = [];
+  for (const [id, degree] of indegree.entries()) if (degree === 0) queue.push(id);
+  const level = new Map();
+  for (const id of queue) level.set(id, 0);
+  while (queue.length) {
+    const id = queue.shift();
+    const nextLevel = (level.get(id) || 0) + 1;
+    for (const dst of outgoing.get(id) || []) {
+      if (!level.has(dst) || (level.get(dst) || 0) < nextLevel) level.set(dst, nextLevel);
+      const degree = (indegree.get(dst) || 0) - 1;
+      indegree.set(dst, degree);
+      if (degree === 0) queue.push(dst);
+    }
+  }
+
+  const nodes = [...epicMap.values()].map((entry) => {
+    const statuses = [...entry.statusCounts.entries()].sort((a, b) => b[1] - a[1]);
+    const dominantStatus = statuses[0]?.[0] || "todo";
+    return {
+      id: entry.id,
+      taskId: null,
+      title: `Epic ${entry.title}`,
+      status: dominantStatus,
+      depth: level.get(entry.id) || 0,
+      order: entry.taskIds.length,
+      taskCount: entry.taskIds.length,
+      dependencies: [...entry.dependencies],
+      epicId: entry.id,
+    };
+  });
+
+  const edges = [...depMap.values()];
+  return {
+    title: "Epic Dependency DAG",
+    description: "Epic-level execution dependencies.",
+    nodes,
+    edges,
+  };
+}
+function slugifyPlanningId(value, fallback = "item") {
+  const normalized = String(value || "")
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  return normalized || fallback;
+}
+
+function normalizeTaskTypeValue(value, fallback = "task") {
+  const normalized = toText(value, fallback).toLowerCase();
+  return ["epic", "task", "subtask"].includes(normalized) ? normalized : fallback;
+}
+
+function normalizeTaskStatusValue(value) {
+  return toText(value).toLowerCase();
+}
+
+function isTerminalTaskStatus(value) {
+  return ["done", "completed", "closed", "merged", "cancelled"].includes(normalizeTaskStatusValue(value));
+}
+
+function isQueuedTask(task) {
+  const runtime = getTaskRuntimeSnapshot(task);
+  return runtime?.state === "queued" || normalizeTaskStatusValue(task?.status) === "queued";
+}
+
+function isBacklogDraftTask(task) {
+  const status = normalizeTaskStatusValue(task?.status);
+  return status === "draft" || status === "todo" || status === "backlog" || status === "planned" || status === "";
+}
+
+function isExecutionTask(task) {
+  return isActiveStatus(task?.status) || isReviewStatus(task?.status) || isQueuedTask(task);
+}
+
+function filterDagGraphByIds(graph = EMPTY_DAG_GRAPH, allowedIds = null, resolver = (node) => toText(node?.id || node?.taskId)) {
+  if (!allowedIds || allowedIds === "all") return graph;
+  const allowed = allowedIds instanceof Set ? allowedIds : new Set(Array.isArray(allowedIds) ? allowedIds : []);
+  const nodes = (graph?.nodes || []).filter((node) => allowed.has(resolver(node)) || allowed.has(toText(node?.id || node?.taskId)));
+  const nodeIds = new Set(nodes.map((node) => toText(node?.id || node?.taskId)).filter(Boolean));
+  const edges = (graph?.edges || []).filter((edge) => nodeIds.has(toText(edge?.source || edge?.from)) && nodeIds.has(toText(edge?.target || edge?.to)));
+  return { ...graph, nodes, edges };
+}
+
+function buildEpicCatalog(tasks = [], epicDependencies = []) {
+  const catalog = new Map();
+  const ensureEpic = (epicId) => {
+    const id = toText(epicId);
+    if (!id) return null;
+    if (!catalog.has(id)) {
+      catalog.set(id, {
+        id,
+        label: id,
+        taskIds: [],
+        dependencies: [],
+        completedCount: 0,
+        activeCount: 0,
+      });
+    }
+    return catalog.get(id);
+  };
+  for (const task of tasks || []) {
+    const epicId = toText(task?.epicId || task?.meta?.epicId);
+    if (!epicId) continue;
+    const entry = ensureEpic(epicId);
+    if (!entry) continue;
+    entry.taskIds.push(task.id);
+    if (normalizeTaskTypeValue(task?.type) === "epic") {
+      entry.label = toText(task?.title, epicId);
+      entry.anchorTaskId = task.id;
+    }
+    if (isTerminalTaskStatus(task?.status)) entry.completedCount += 1;
+    if (isExecutionTask(task)) entry.activeCount += 1;
+  }
+  for (const row of epicDependencies || []) {
+    const entry = ensureEpic(row?.epicId);
+    if (!entry) continue;
+    entry.dependencies = normalizeDependencyInput(row?.dependencies || []);
+  }
+  return [...catalog.values()]
+    .map((entry) => ({
+      ...entry,
+      taskIds: normalizeDependencyInput(entry.taskIds),
+      taskCount: normalizeDependencyInput(entry.taskIds).length,
+    }))
+    .sort((a, b) => String(a.label || a.id).localeCompare(String(b.label || b.id)));
+}
+
+function buildDagPlanningState({ tasks = [], sprintId = "all", sprintOrderMode = "parallel", sprintOptions = [], epicDependencies = [] }) {
+  const scopedTasks = (tasks || []).filter((task) => sprintId === "all" ? true : getTaskSprintId(task) === sprintId);
+  const allTaskMap = new Map((tasks || []).map((task) => [toText(task?.id), task]));
+  const scopedTaskIds = new Set(scopedTasks.map((task) => toText(task?.id)).filter(Boolean));
+  const sprintModeMap = new Map((sprintOptions || []).map((sprint) => [sprint.id, toText(sprint.executionMode || sprint.taskOrderMode || 'parallel', 'parallel')]));
+  const epicDependencyMap = new Map((epicDependencies || []).map((row) => [toText(row?.epicId), normalizeDependencyInput(row?.dependencies || [])]));
+  const tasksByEpic = new Map();
+  for (const task of tasks || []) {
+    const epicId = toText(task?.epicId || task?.meta?.epicId);
+    if (!epicId) continue;
+    const list = tasksByEpic.get(epicId) || [];
+    list.push(task);
+    tasksByEpic.set(epicId, list);
+  }
+  const isSequentialBlocked = (task) => {
+    const taskSprintId = getTaskSprintId(task);
+    const mode = sprintModeMap.get(taskSprintId) || sprintOrderMode;
+    if (mode !== 'sequential') return false;
+    const currentOrder = Number(getTaskSprintOrder(task));
+    if (!Number.isFinite(currentOrder) || currentOrder <= 1) return false;
+    return scopedTasks.some((candidate) => getTaskSprintId(candidate) === taskSprintId && Number(getTaskSprintOrder(candidate)) < currentOrder && !isTerminalTaskStatus(candidate?.status));
+  };
+  const isEpicBlocked = (task) => {
+    const epicId = toText(task?.epicId || task?.meta?.epicId);
+    if (!epicId) return false;
+    const requiredEpics = epicDependencyMap.get(epicId) || [];
+    if (!requiredEpics.length) return false;
+    return requiredEpics.some((requiredEpicId) => {
+      const epicTasks = tasksByEpic.get(requiredEpicId) || [];
+      if (!epicTasks.length) return true;
+      return epicTasks.some((candidate) => !isTerminalTaskStatus(candidate?.status));
+    });
+  };
+  const isDependencyBlocked = (task) => getTaskDependencyIds(task).some((depId) => {
+    const dependencyTask = allTaskMap.get(depId);
+    return !dependencyTask || !isTerminalTaskStatus(dependencyTask?.status);
+  });
+  const backlogTaskIds = new Set();
+  const executionTaskIds = new Set();
+  const readyTaskIds = new Set();
+  const sprintIdsByFocus = { all: new Set(), backlog: new Set(), execution: new Set(), ready: new Set() };
+  const epicIdsByFocus = { all: new Set(), backlog: new Set(), execution: new Set(), ready: new Set() };
+  for (const task of scopedTasks) {
+    const taskId = toText(task?.id);
+    const taskSprintId = getTaskSprintId(task);
+    const epicId = toText(task?.epicId || task?.meta?.epicId);
+    sprintIdsByFocus.all.add(taskSprintId || 'unassigned');
+    if (epicId) epicIdsByFocus.all.add(epicId);
+    if (isBacklogDraftTask(task)) {
+      backlogTaskIds.add(taskId);
+      sprintIdsByFocus.backlog.add(taskSprintId || 'unassigned');
+      if (epicId) epicIdsByFocus.backlog.add(epicId);
+    }
+    if (isExecutionTask(task)) {
+      executionTaskIds.add(taskId);
+      sprintIdsByFocus.execution.add(taskSprintId || 'unassigned');
+      if (epicId) epicIdsByFocus.execution.add(epicId);
+    }
+    const ready = !isBacklogDraftTask(task) && !isExecutionTask(task) && !isTerminalTaskStatus(task?.status) && !isDependencyBlocked(task) && !isEpicBlocked(task) && !isSequentialBlocked(task);
+    if (ready) {
+      readyTaskIds.add(taskId);
+      sprintIdsByFocus.ready.add(taskSprintId || 'unassigned');
+      if (epicId) epicIdsByFocus.ready.add(epicId);
+    }
+  }
+  return {
+    scopedTaskIds,
+    backlogTaskIds,
+    executionTaskIds,
+    readyTaskIds,
+    sprintIdsByFocus,
+    epicIdsByFocus,
+    epicCatalog: buildEpicCatalog(tasks, epicDependencies),
+    counts: {
+      all: scopedTaskIds.size,
+      backlog: backlogTaskIds.size,
+      execution: executionTaskIds.size,
+      ready: readyTaskIds.size,
+    },
+  };
+}
+
 function extractGlobalDagPayload(...sources) {
   for (const source of sources) {
     const payload = extractDagPayload(source);
@@ -802,7 +1101,9 @@ async function applyTaskLifecycleTransition(task, requestedStatus) {
 
   const wantsDraft = decision.nextStatus === "draft";
   const prevTasks = cloneValue(tasksData.value);
-  const optimisticStatus = decision.action === "start" ? "inprogress" : decision.nextStatus;
+  const optimisticStatus = decision.action === "start"
+    ? String(task?.status || "todo")
+    : decision.nextStatus;
   let apiResult = null;
 
   await runOptimistic(
@@ -1435,6 +1736,18 @@ function isReviewStatus(s) {
   return ["inreview", "review", "pr-open", "pr-review"].includes(String(s || ""));
 }
 
+function getTaskRuntimeSnapshot(task) {
+  return task?.runtimeSnapshot || task?.meta?.runtimeSnapshot || null;
+}
+
+function hasLiveExecutionEvidence(task) {
+  const runtime = getTaskRuntimeSnapshot(task);
+  if (runtime?.isLive === true) return true;
+  if (runtime?.state === "running") return true;
+  if (runtime?.slot?.taskId) return true;
+  return false;
+}
+
 async function reactivateTaskSession(taskId, options = {}) {
   const normalizedTaskId = String(taskId || "").trim();
   if (!normalizedTaskId) return false;
@@ -1462,41 +1775,20 @@ async function reactivateTaskSession(taskId, options = {}) {
     showToast("Agent session reactivated", "success");
   }
 
+  const nextStatus = String(res?.data?.status || (res?.queued ? "queued" : "inprogress")).trim() || "todo";
   tasksData.value = (tasksData.value || []).map((t) =>
     String(t?.id || "").trim() === normalizedTaskId
-      ? { ...t, status: "inprogress" }
+      ? {
+          ...t,
+          ...(res?.data || {}),
+          status: nextStatus,
+        }
       : t,
   );
   scheduleRefresh(150);
   return true;
 }
 
-/* ─── Derive agent steps from task title/description ─── */
-function deriveSteps(task) {
-  const t = String(task?.title || "").toLowerCase();
-  const steps = [];
-  if (/feat|add|implement|build|create/.test(t)) steps.push({ label: "Understand requirements & read context" });
-  if (/fix|bug|patch|resolve|repair/.test(t)) steps.push({ label: "Reproduce and diagnose issue" });
-  if (/refactor|restructure|cleanup|reorganize/.test(t)) steps.push({ label: "Map current code structure" });
-  if (/test|spec|coverage/.test(t)) steps.push({ label: "Write test cases" });
-  if (/docs|document|readme/.test(t)) steps.push({ label: "Draft documentation content" });
-  steps.push({ label: "Write implementation" });
-  if (!/docs|readme/.test(t)) steps.push({ label: "Run tests & fix issues" });
-  steps.push({ label: "Commit changes" });
-  steps.push({ label: "Handoff PR lifecycle to Bosun" });
-  return steps;
-}
-
-/* ─── Estimate step progress from timing ─── */
-function estimateStep(task, steps) {
-  const elapsed = task?.updated ? (Date.now() - new Date(task.updated).getTime()) : 0;
-  const totalDur = task?.created ? (Date.now() - new Date(task.created).getTime()) : 60000;
-  const pct = Math.min(0.85, totalDur > 0 ? (elapsed / totalDur) : 0);
-  // Bias: show 40-75% through to look realistic
-  const biasedPct = 0.35 + pct * 0.4;
-  return Math.max(0, Math.min(steps.length - 1, Math.floor(biasedPct * steps.length)));
-}
-
 /* ─── TaskProgressModal — live view for in-progress tasks ─── */
 export function TaskProgressModal({ task, onClose }) {
   const [liveTask, setLiveTask] = useState(task);
@@ -1544,8 +1836,7 @@ export function TaskProgressModal({ task, onClose }) {
     logEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [logs]);
 
-  const steps = useMemo(() => deriveSteps(liveTask || task), [liveTask?.id]);
-  const currentStep = useMemo(() => estimateStep(liveTask || task, steps), [liveTask?.updated]);
+  const runtime = getTaskRuntimeSnapshot(liveTask || task);
 
   const healthScore = health?.currentHealthScore ?? health?.averageHealthScore ?? null;
   const healthColor =
@@ -1557,6 +1848,10 @@ export function TaskProgressModal({ task, onClose }) {
   const startedRelative = liveTask?.created ? formatRelative(liveTask.created) : "—";
   const agentLabel = liveTask?.assignee || task.assignee || "Agent";
   const branchLabel = liveTask?.branch || task.branch || "—";
+  const runtimeState = runtime?.state || "pending";
+  const runtimeLabel = runtime?.statusLabel || "Live execution";
+  const activeSlots = Number(runtime?.executor?.activeSlots || 0);
+  const maxParallel = Number(runtime?.executor?.maxParallel || 0);
 
   const handleCancel = async () => {
     const ok = await showConfirm("Cancel this task?");
@@ -1608,9 +1903,9 @@ export function TaskProgressModal({ task, onClose }) {
       <div class="tp-hero">
         <div class="tp-pulse-dot"></div>
         <div class="tp-hero-title">
-          <div class="tp-hero-status-label">${iconText(":zap: Active — Agent Working")}</div>
+          <div class="tp-hero-status-label">${iconText(`:zap: ${runtimeLabel}`)}</div>
         </div>
-        <${Badge} status="inprogress" text="running" />
+        <${Badge} status="inprogress" text=${runtimeState} />
       </div>
 
       
@@ -3229,8 +3524,19 @@ function DagGraphSection({
   description = "",
   graph = EMPTY_DAG_GRAPH,
   onOpenTask,
+  onCreateEdge,
+  allowWiring = false,
+  graphKey = "dag",
   emptyMessage = "No DAG nodes available for this view yet.",
+  highlightNodeIds = null,
 }) {
+  const stageRef = useRef(null);
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 24, y: 24 });
+  const [isPanning, setIsPanning] = useState(false);
+  const [wireSourceId, setWireSourceId] = useState("");
+  const [wiringBusy, setWiringBusy] = useState(false);
+
   const sortedNodes = useMemo(() => {
     const nodes = [...(graph?.nodes || [])];
     nodes.sort((a, b) => {
@@ -3258,22 +3564,20 @@ function DagGraphSection({
       list.push(node);
       map.set(key, list);
     }
-    if (!map.size && sortedNodes.length) {
-      map.set(0, [...sortedNodes]);
-    }
+    if (!map.size && sortedNodes.length) map.set(0, [...sortedNodes]);
     return [...map.entries()].sort((a, b) => a[0] - b[0]);
   }, [sortedNodes]);
 
   const layout = useMemo(() => {
-    const nodeWidth = 220;
-    const nodeHeight = 84;
-    const colGap = 120;
+    const nodeWidth = 250;
+    const nodeHeight = 92;
+    const colGap = 130;
     const rowGap = 34;
-    const marginX = 36;
-    const marginY = 24;
+    const marginX = 40;
+    const marginY = 28;
 
     const positions = new Map();
-    let maxRows = 0;
+    let maxRows = 1;
     levels.forEach(([, nodes], colIdx) => {
       maxRows = Math.max(maxRows, nodes.length);
       nodes.forEach((node, rowIdx) => {
@@ -3283,8 +3587,8 @@ function DagGraphSection({
       });
     });
 
-    const totalWidth = Math.max(520, marginX * 2 + Math.max(1, levels.length) * nodeWidth + Math.max(0, levels.length - 1) * colGap);
-    const totalHeight = Math.max(220, marginY * 2 + Math.max(1, maxRows) * nodeHeight + Math.max(0, maxRows - 1) * rowGap);
+    const totalWidth = Math.max(720, marginX * 2 + Math.max(1, levels.length) * nodeWidth + Math.max(0, levels.length - 1) * colGap);
+    const totalHeight = Math.max(360, marginY * 2 + maxRows * nodeHeight + Math.max(0, maxRows - 1) * rowGap);
     return { positions, totalWidth, totalHeight };
   }, [levels]);
 
@@ -3304,24 +3608,109 @@ function DagGraphSection({
       .filter(Boolean);
   }, [graph?.edges, layout.positions]);
 
-  const edgeKindCounts = useMemo(() => {
-    const counts = { "depends-on": 0, sequential: 0, blocks: 0 };
-    for (const edge of edges) {
-      const kind = toText(edge?.kind || "depends-on", "depends-on").toLowerCase();
-      counts[kind] = (counts[kind] || 0) + 1;
-    }
-    return counts;
-  }, [edges]);
+  const worldBounds = useMemo(() => ({ width: layout.totalWidth, height: layout.totalHeight }), [layout]);
+
+  const fitToView = useCallback(() => {
+    const el = stageRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const availableWidth = Math.max(320, rect.width - 24);
+    const availableHeight = Math.max(240, rect.height - 24);
+    const scaleX = availableWidth / Math.max(1, worldBounds.width);
+    const scaleY = availableHeight / Math.max(1, worldBounds.height);
+    const nextZoom = Math.max(DAG_MIN_ZOOM, Math.min(DAG_MAX_ZOOM, Math.min(scaleX, scaleY)));
+    const nextPanX = (rect.width - worldBounds.width * nextZoom) / 2;
+    const nextPanY = (rect.height - worldBounds.height * nextZoom) / 2;
+    setZoom(nextZoom);
+    setPan({ x: nextPanX, y: nextPanY });
+  }, [worldBounds.width, worldBounds.height]);
 
-  const statusCounts = useMemo(() => {
-    const counts = new Map();
-    for (const node of sortedNodes) {
-      const key = toText(node?.status || "todo", "todo").toLowerCase();
-      counts.set(key, (counts.get(key) || 0) + 1);
-    }
-    return [...counts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 4);
+  useEffect(() => {
+    fitToView();
+  }, [fitToView, graphKey, sortedNodes.length, edges.length]);
+
+  const applyZoomAtPoint = useCallback((nextZoom, clientX, clientY) => {
+    const el = stageRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const clamped = Math.max(DAG_MIN_ZOOM, Math.min(DAG_MAX_ZOOM, nextZoom));
+    const localX = clientX - rect.left;
+    const localY = clientY - rect.top;
+    const worldX = (localX - pan.x) / zoom;
+    const worldY = (localY - pan.y) / zoom;
+    setZoom(clamped);
+    setPan({ x: localX - worldX * clamped, y: localY - worldY * clamped });
+  }, [pan.x, pan.y, zoom]);
+
+  const handleWheel = useCallback((event) => {
+    event.preventDefault();
+    const delta = event.deltaY < 0 ? 1.1 : 0.9;
+    applyZoomAtPoint(zoom * delta, event.clientX, event.clientY);
+  }, [applyZoomAtPoint, zoom]);
+
+  const handlePanStart = useCallback((event) => {
+    if (event.button !== 0) return;
+    const targetEl = event.target;
+    if (targetEl?.closest?.(".dag-node")) return;
+    event.preventDefault();
+    const start = { x: event.clientX, y: event.clientY, panX: pan.x, panY: pan.y };
+    setIsPanning(true);
+    const onMove = (moveEvent) => {
+      setPan({ x: start.panX + (moveEvent.clientX - start.x), y: start.panY + (moveEvent.clientY - start.y) });
+    };
+    const onUp = () => {
+      setIsPanning(false);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  }, [pan.x, pan.y]);
+
+  const nodeById = useMemo(() => {
+    const map = new Map();
+    for (const node of sortedNodes) map.set(String(node.id), node);
+    return map;
   }, [sortedNodes]);
 
+  const highlightedIds = useMemo(() => {
+    if (!highlightNodeIds || highlightNodeIds === "all") return new Set();
+    return highlightNodeIds instanceof Set
+      ? highlightNodeIds
+      : new Set(Array.isArray(highlightNodeIds) ? highlightNodeIds : []);
+  }, [highlightNodeIds]);
+
+  const handleNodeClick = useCallback(async (node, event) => {
+    event?.stopPropagation?.();
+    if (allowWiring && typeof onCreateEdge === "function") {
+      const id = String(node?.id || "");
+      if (!id || wiringBusy) return;
+      if (!wireSourceId) {
+        setWireSourceId(id);
+        return;
+      }
+      if (wireSourceId === id) {
+        setWireSourceId("");
+        return;
+      }
+      const sourceNode = nodeById.get(wireSourceId) || null;
+      const targetNode = nodeById.get(id) || null;
+      if (!sourceNode || !targetNode) {
+        setWireSourceId("");
+        return;
+      }
+      setWiringBusy(true);
+      try {
+        await onCreateEdge({ sourceNode, targetNode });
+      } finally {
+        setWireSourceId("");
+        setWiringBusy(false);
+      }
+      return;
+    }
+    if (node?.taskId) onOpenTask?.(node.taskId);
+  }, [allowWiring, onCreateEdge, onOpenTask, wireSourceId, nodeById, wiringBusy]);
+
   if (!sortedNodes.length) {
     return html`
       <${Paper} variant="outlined" style=${{ padding: "12px", marginBottom: "10px" }}>
@@ -3332,90 +3721,97 @@ function DagGraphSection({
 
   return html`
     <div class="tasks-dag-section">
-      <div class="flex-between" style=${{ marginBottom: "8px", gap: "8px", flexWrap: "wrap" }}>
+      <div class="task-dag-header-row">
         <div>
           <div style=${{ fontWeight: "700" }}>${title || "Task DAG"}</div>
-          ${description && html`<div class="meta-text">${description}</div>`}
+          ${description ? html`<div class="meta-text">${description}</div>` : null}
+          <div class="meta-text">Drag to pan · wheel to zoom · click node to ${allowWiring ? "wire edges" : "open task"}.</div>
         </div>
-        <div class="chip-group" style=${{ gap: "6px" }}>
-          <${Chip} size="small" label=${`${sortedNodes.length} nodes`} />
-          <${Chip} size="small" label=${`${edges.length} edges`} />
-          <${Chip} size="small" label=${`depends-on ${edgeKindCounts["depends-on"] || 0}`} />
-          <${Chip} size="small" label=${`sequential ${edgeKindCounts.sequential || 0}`} />
-          <${Chip} size="small" label=${`blocks ${edgeKindCounts.blocks || 0}`} />
+        <div class="task-dag-controls">
+          <${Button} size="small" variant="outlined" onClick=${() => setZoom((z) => Math.max(DAG_MIN_ZOOM, z * 0.9))}>-</${Button}>
+          <${Button} size="small" variant="outlined" onClick=${() => setZoom((z) => Math.min(DAG_MAX_ZOOM, z * 1.1))}>+</${Button}>
+          <${Button} size="small" variant="outlined" onClick=${fitToView}>Fit</${Button}>
+          <${Button} size="small" variant="text" onClick=${() => { setZoom(1); setPan({ x: 24, y: 24 }); }}>Reset</${Button}>
+          <span class="task-dag-zoom-pill">${Math.round(zoom * 100)}%</span>
+          ${allowWiring
+            ? html`<span class="task-dag-wire-pill">${wireSourceId ? `Source: ${wireSourceId}` : wiringBusy ? "Saving edge…" : "Wiring: click source then target"}</span>`
+            : null}
         </div>
       </div>
       <div class="task-dag-legend">
         <span class="task-dag-legend-item"><span class="task-dag-legend-line" style=${{ background: "var(--accent)" }}></span>depends-on</span>
         <span class="task-dag-legend-item"><span class="task-dag-legend-line task-dag-legend-line-dashed"></span>sequential</span>
         <span class="task-dag-legend-item"><span class="task-dag-legend-line task-dag-legend-line-block"></span>blocks</span>
-        ${statusCounts.map(([status, count]) => html`<span class="task-dag-status-pill">${status} ${count}</span>`)}
       </div>
-      <div class="task-dag-canvas-wrap">
-        <svg class="task-dag-canvas" viewBox=${`0 0 ${layout.totalWidth} ${layout.totalHeight}`} role="img" aria-label="Task dependency graph">
+      <div class=${`task-dag-canvas-wrap ${isPanning ? "is-panning" : ""}`} ref=${stageRef} onWheel=${handleWheel} onPointerDown=${handlePanStart}>
+        <svg class="task-dag-canvas" role="img" aria-label="Task dependency graph">
           <defs>
-            <marker id="dag-arrow" markerWidth="10" markerHeight="8" refX="10" refY="4" orient="auto">
+            <marker id=${`dag-arrow-${graphKey}`} markerWidth="10" markerHeight="8" refX="10" refY="4" orient="auto">
               <path d="M0,0 L10,4 L0,8 z" fill="var(--accent)" />
             </marker>
           </defs>
-          ${edges.map(({ source, target, kind }, idx) => {
-            const x1 = source.x + source.width;
-            const y1 = source.y + source.height / 2;
-            const x2 = target.x;
-            const y2 = target.y + target.height / 2;
-            const c1 = x1 + Math.max(40, (x2 - x1) * 0.35);
-            const c2 = x2 - Math.max(30, (x2 - x1) * 0.35);
-            return html`
-              <path
-                key=${`edge-${idx}`}
-                d=${`M ${x1} ${y1} C ${c1} ${y1}, ${c2} ${y2}, ${x2} ${y2}`}
-                fill="none"
-                stroke=${DAG_EDGE_STYLES[kind]?.color || "var(--accent)"}
-                stroke-dasharray=${DAG_EDGE_STYLES[kind]?.dash || ""}
-                stroke-opacity="0.72"
-                stroke-width="2"
-                marker-end="url(#dag-arrow)"
-              />
-            `;
-          })}
-          ${sortedNodes.map((node) => {
-            const pos = layout.positions.get(String(node.id));
-            if (!pos) return null;
-            return html`
-              <g
-                key=${node.id}
-                class="dag-node"
-                onClick=${() => {
-                  if (node.taskId) onOpenTask?.(node.taskId);
-                }}
-                style=${{ cursor: node.taskId ? "pointer" : "default" }}
-              >
-                <rect
-                  x=${pos.x}
-                  y=${pos.y}
-                  width=${pos.width}
-                  height=${pos.height}
-                  rx="14"
-                  ry="14"
-                  fill="var(--bg-surface)"
-                  stroke="var(--border)"
-                  stroke-width="1.5"
+          <g transform=${`translate(${pan.x} ${pan.y}) scale(${zoom})`}>
+            <rect x="0" y="0" width=${worldBounds.width} height=${worldBounds.height} fill="transparent" />
+            ${edges.map(({ source, target, kind }, idx) => {
+              const x1 = source.x + source.width;
+              const y1 = source.y + source.height / 2;
+              const x2 = target.x;
+              const y2 = target.y + target.height / 2;
+              const c1 = x1 + Math.max(40, (x2 - x1) * 0.35);
+              const c2 = x2 - Math.max(30, (x2 - x1) * 0.35);
+              const style = DAG_EDGE_STYLES[kind] || DAG_EDGE_STYLES["depends-on"];
+              return html`
+                <path
+                  key=${`edge-${idx}`}
+                  d=${`M ${x1} ${y1} C ${c1} ${y1}, ${c2} ${y2}, ${x2} ${y2}`}
+                  fill="none"
+                  stroke=${style.color}
+                  stroke-dasharray=${style.dash || ""}
+                  stroke-opacity="0.75"
+                  stroke-width="2"
+                  marker-end=${`url(#dag-arrow-${graphKey})`}
                 />
-                <text x=${pos.x + 12} y=${pos.y + 24} fill="var(--text-primary)" font-size="13" font-weight="700">
-                  ${truncate(node.title || "(untitled)", 32)}
-                </text>
-                <text x=${pos.x + 12} y=${pos.y + 43} fill="var(--text-muted)" font-size="11">
-                  ${truncate(node.taskId || node.id, 36)}
-                </text>
-                <text x=${pos.x + 12} y=${pos.y + 62} fill="var(--accent)" font-size="11">
-                  ${String(node.status || "todo")}
-                </text>
-                ${Number.isFinite(node.order) && html`
-                  <text x=${pos.x + pos.width - 16} y=${pos.y + 22} text-anchor="end" fill="var(--text-muted)" font-size="11">#${node.order}</text>
-                `}
-              </g>
-            `;
-          })}
+              `;
+            })}
+            ${sortedNodes.map((node) => {
+              const pos = layout.positions.get(String(node.id));
+              if (!pos) return null;
+              const selected = wireSourceId && String(node.id) === wireSourceId;
+              const highlighted = highlightedIds.has(String(node.id)) || highlightedIds.has(String(node.taskId || ""));
+              return html`
+                <g
+                  key=${node.id}
+                  class=${`dag-node ${selected ? "dag-node-selected" : ""} ${highlighted ? "dag-node-highlighted" : ""}`}
+                  onPointerDown=${(event) => event.stopPropagation()}
+                  onClick=${(event) => handleNodeClick(node, event)}
+                  style=${{ cursor: allowWiring || node.taskId ? "pointer" : "default" }}
+                >
+                  <rect
+                    x=${pos.x}
+                    y=${pos.y}
+                    width=${pos.width}
+                    height=${pos.height}
+                    rx="14"
+                    ry="14"
+                    fill="var(--bg-surface)"
+                    stroke=${selected ? "var(--accent)" : highlighted ? "var(--color-done)" : "var(--border)"}
+                    stroke-width=${selected || highlighted ? "2.2" : "1.5"}
+                  />
+                  <text x=${pos.x + 12} y=${pos.y + 24} fill="var(--text-primary)" font-size="13" font-weight="700">
+                    ${truncate(node.title || "(untitled)", 34)}
+                  </text>
+                  <text x=${pos.x + 12} y=${pos.y + 44} fill="var(--text-muted)" font-size="11">
+                    ${truncate(node.taskId || node.id, 38)}
+                  </text>
+                  <text x=${pos.x + 12} y=${pos.y + 64} fill="var(--accent)" font-size="11">
+                    ${String(node.status || "todo")}
+                  </text>
+                  ${Number.isFinite(node.order) && html`<text x=${pos.x + pos.width - 16} y=${pos.y + 22} text-anchor="end" fill="var(--text-muted)" font-size="11">#${node.order}</text>`}
+                  ${highlighted && html`<text x=${pos.x + pos.width - 12} y=${pos.y + pos.height - 12} text-anchor="end" fill="var(--color-done)" font-size="11" font-weight="700">Ready</text>`}
+                </g>
+              `;
+            })}
+          </g>
         </svg>
       </div>
     </div>
@@ -3443,8 +3839,14 @@ export function TasksTab() {
   const [dagSelectedSprint, setDagSelectedSprint] = useState("all");
   const [dagSprintGraph, setDagSprintGraph] = useState(EMPTY_DAG_GRAPH);
   const [dagGlobalGraph, setDagGlobalGraph] = useState(EMPTY_DAG_GRAPH);
-  const [dagSources, setDagSources] = useState({ sprints: "", sprintGraph: "", globalGraph: "" });
+  const [dagEpicGraph, setDagEpicGraph] = useState(EMPTY_DAG_GRAPH);
+  const [dagSources, setDagSources] = useState({ sprints: "", sprintGraph: "", globalGraph: "", epicDeps: "", tasks: "" });
   const [dagSprintOrderMode, setDagSprintOrderMode] = useState("parallel");
+  const [dagAllTasks, setDagAllTasks] = useState([]);
+  const [dagEpicDependencies, setDagEpicDependencies] = useState([]);
+  const [dagFocusMode, setDagFocusMode] = useState("all");
+  const [showCreateSprint, setShowCreateSprint] = useState(false);
+  const [createSeed, setCreateSeed] = useState(null);
   const [isCompact, setIsCompact] = useState(() => {
     try { return globalThis.matchMedia?.("(max-width: 768px)")?.matches ?? false; }
     catch { return false; }
@@ -3512,6 +3914,21 @@ export function TasksTab() {
   const hasMoreKanbanPages = isKanban && page + 1 < totalPages;
   const boardColumnTotals = tasksStatusCounts?.value || { draft: 0, backlog: 0, inProgress: 0, inReview: 0, done: 0 };
   const boardTotalTasks = Number(tasksTotal?.value || 0);
+  const dagTaskCatalog = dagAllTasks.length ? dagAllTasks : tasks;
+  const dagPlanningState = useMemo(() => buildDagPlanningState({
+    tasks: dagTaskCatalog,
+    sprintId: dagSelectedSprint,
+    sprintOrderMode: dagSprintOrderMode,
+    sprintOptions: dagSprints,
+    epicDependencies: dagEpicDependencies,
+  }), [dagAllTasks, dagEpicDependencies, dagSelectedSprint, dagSprintOrderMode, dagSprints, tasks]);
+  const dagEpicCatalog = dagPlanningState.epicCatalog;
+  const dagFocusOptions = [
+    { id: "all", label: "All structure", count: dagPlanningState.counts.all },
+    { id: "backlog", label: "Backlog & draft", count: dagPlanningState.counts.backlog },
+    { id: "execution", label: "Running & review", count: dagPlanningState.counts.execution },
+    { id: "ready", label: "Ready next", count: dagPlanningState.counts.ready },
+  ];
 
   const loadMoreKanbanTasks = useCallback(async () => {
     if (!isKanban || kanbanLoadingMore || isSearching) return;
@@ -3542,6 +3959,8 @@ export function TasksTab() {
 
     const sprintGraphMeta = await fetchFirstAvailableDagPath(sprintGraphCandidates);
     const globalGraphMeta = await fetchFirstAvailableDagPath(globalGraphCandidates);
+    const epicDepsMeta = await fetchFirstAvailableDagPath(DAG_EPIC_DEPENDENCY_ENDPOINT_CANDIDATES);
+    const tasksMeta = await fetchFirstAvailableDagPath(["/api/tasks?limit=1000", "/api/tasks?limit=500"]);
 
     const globalSource =
       extractGlobalDagPayload(
@@ -3556,15 +3975,31 @@ export function TasksTab() {
     );
     const nextGlobalGraph = normalizeDagGraph(globalSource, "DAG of DAGs");
 
+    const allTasksPayload = extractDagPayload(tasksMeta?.payload);
+    const allTasks = Array.isArray(allTasksPayload?.data)
+      ? allTasksPayload.data
+      : Array.isArray(allTasksPayload?.tasks)
+        ? allTasksPayload.tasks
+        : Array.isArray(allTasksPayload)
+          ? allTasksPayload
+          : tasks;
+    const epicDeps = normalizeEpicDependenciesPayload(epicDepsMeta?.payload);
+    const nextEpicGraph = buildEpicDagGraph(allTasks, epicDeps);
+    setDagAllTasks(allTasks);
+    setDagEpicDependencies(epicDeps);
+
     const sprintMetaEntry = sprintOptions.find((entry) => entry.id === resolvedSprint) || null;
     setDagSprintOrderMode(toText(sprintMetaEntry?.executionMode || sprintMetaEntry?.taskOrderMode || sprintMetaEntry?.sprintOrderMode || "parallel", "parallel"));
     setDagSprints(sprintOptions);
     setDagSprintGraph(nextSprintGraph);
     setDagGlobalGraph(nextGlobalGraph);
+    setDagEpicGraph(nextEpicGraph);
     setDagSources({
       sprints: sprintMeta?.path || "",
       sprintGraph: sprintGraphMeta?.path || "",
       globalGraph: globalGraphMeta?.path || "",
+      epicDeps: epicDepsMeta?.path || "",
+      tasks: tasksMeta?.path || "",
     });
 
     if (resolvedSprint !== dagSelectedSprint) {
@@ -3573,11 +4008,12 @@ export function TasksTab() {
 
     const hasAnyGraphData =
       nextSprintGraph.nodes.length > 0 ||
-      nextGlobalGraph.nodes.length > 0;
+      nextGlobalGraph.nodes.length > 0 ||
+      nextEpicGraph.nodes.length > 0;
     if (!hasAnyGraphData) {
       throw new Error("No DAG data was returned from DAG endpoints.");
     }
-  }, [dagSelectedSprint]);
+  }, [dagSelectedSprint, tasks]);
 
   useEffect(() => {
     if (!isDag) return;
@@ -3793,6 +4229,32 @@ export function TasksTab() {
     });
   }, [visible, listSortCol, listSortDir]);
 
+  const dagTaskFocusIds = useMemo(() => {
+    if (dagFocusMode === "backlog") return dagPlanningState.backlogTaskIds;
+    if (dagFocusMode === "ready") return dagPlanningState.readyTaskIds;
+    if (dagFocusMode === "execution") return new Set([...dagPlanningState.executionTaskIds, ...dagPlanningState.readyTaskIds]);
+    return "all";
+  }, [dagFocusMode, dagPlanningState]);
+
+  const dagSprintFocusIds = useMemo(() => {
+    if (dagFocusMode === "backlog") return dagPlanningState.sprintIdsByFocus.backlog;
+    if (dagFocusMode === "ready") return dagPlanningState.sprintIdsByFocus.ready;
+    if (dagFocusMode === "execution") return new Set([...dagPlanningState.sprintIdsByFocus.execution, ...dagPlanningState.sprintIdsByFocus.ready]);
+    return "all";
+  }, [dagFocusMode, dagPlanningState]);
+
+  const dagEpicFocusIds = useMemo(() => {
+    if (dagFocusMode === "backlog") return dagPlanningState.epicIdsByFocus.backlog;
+    if (dagFocusMode === "ready") return dagPlanningState.epicIdsByFocus.ready;
+    if (dagFocusMode === "execution") return new Set([...dagPlanningState.epicIdsByFocus.execution, ...dagPlanningState.epicIdsByFocus.ready]);
+    return "all";
+  }, [dagFocusMode, dagPlanningState]);
+
+  const dagSprintGraphView = useMemo(() => filterDagGraphByIds(dagSprintGraph, dagTaskFocusIds, (node) => toText(node?.taskId || node?.id)), [dagSprintGraph, dagTaskFocusIds]);
+  const dagGlobalGraphView = useMemo(() => filterDagGraphByIds(dagGlobalGraph, dagSprintFocusIds, (node) => toText(node?.sprintId || node?.id)), [dagGlobalGraph, dagSprintFocusIds]);
+  const dagEpicGraphView = useMemo(() => filterDagGraphByIds(dagEpicGraph, dagEpicFocusIds, (node) => toText(node?.epicId || node?.id)), [dagEpicGraph, dagEpicFocusIds]);
+  const dagReadyHighlightIds = dagFocusMode === "execution" || dagFocusMode === "ready" ? dagPlanningState.readyTaskIds : null;
+
   /* ── Handlers ── */
   const handleFilter = async (s) => {
     haptic();
@@ -3879,29 +4341,31 @@ export function TasksTab() {
     }
   }, [loadDagViews]);
 
-  const handleCreateSprint = useCallback(async () => {
-    const rawName = globalThis.prompt?.("Sprint name", "Sprint " + new Date().toISOString().slice(0, 10));
-    const name = toText(rawName);
-    if (!name) return;
-    const rawId = globalThis.prompt?.("Sprint ID (optional)", name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, ""));
-    const id = toText(rawId);
+  const handleCreateSprint = useCallback(() => {
+    haptic("medium");
+    setShowCreateSprint(true);
+  }, []);
+
+  const handleMoveSprint = useCallback(async (sprintId, direction) => {
+    const currentIndex = dagSprints.findIndex((entry) => entry.id === sprintId);
+    const targetIndex = currentIndex + direction;
+    if (currentIndex < 0 || targetIndex < 0 || targetIndex >= dagSprints.length) return;
+    const reordered = [...dagSprints];
+    const [moved] = reordered.splice(currentIndex, 1);
+    reordered.splice(targetIndex, 0, moved);
     haptic("medium");
     try {
-      await apiFetch("/api/tasks/sprints", {
-        method: "POST",
-        body: JSON.stringify({
-          ...(id ? { id } : {}),
-          name,
-          status: "active",
-        }),
-      });
-      showToast("Sprint created", "success");
+      await Promise.all(reordered.map((entry, index) => apiFetch(`/api/tasks/sprints/${encodeURIComponent(entry.id)}`, {
+        method: "PATCH",
+        body: JSON.stringify({ order: index + 1 }),
+      })));
+      showToast("Sprint order updated", "success");
       await loadDagViews();
-      if (id) setDagSelectedSprint(id);
     } catch {
-      /* toast via apiFetch */
+      setDagError("Failed to reorder sprints.");
     }
-  }, [loadDagViews]);
+  }, [dagSprints, loadDagViews]);
+
   const handleDagSprintModeChange = useCallback(async (mode) => {
     const nextMode = toText(mode, "parallel").toLowerCase();
     if (!dagSelectedSprint || dagSelectedSprint === "all") {
@@ -3922,6 +4386,43 @@ export function TasksTab() {
       setDagError("Failed to update sprint execution mode.");
     }
   }, [dagSelectedSprint, loadDagViews]);
+  const handleCreateDagEdge = useCallback(async ({ sourceNode, targetNode, graphKind }) => {
+    const srcTaskId = toText(sourceNode?.taskId || sourceNode?.id);
+    const dstTaskId = toText(targetNode?.taskId || targetNode?.id);
+
+    if (graphKind === "epic") {
+      const srcEpic = toText(sourceNode?.epicId || sourceNode?.id);
+      const dstEpic = toText(targetNode?.epicId || targetNode?.id);
+      if (!srcEpic || !dstEpic || srcEpic === dstEpic) return;
+      const existing = normalizeDependencyInput(targetNode?.dependencies || []);
+      const dependencies = normalizeDependencyInput([...existing, srcEpic]);
+      await apiFetch("/api/tasks/epic-dependencies", {
+        method: "PUT",
+        body: JSON.stringify({ epicId: dstEpic, dependencies }),
+      });
+      showToast(`Wired epic dependency: ${srcEpic} -> ${dstEpic}`, "success");
+      await loadDagViews();
+      return;
+    }
+
+    if (!srcTaskId || !dstTaskId || srcTaskId === dstTaskId) return;
+    const existing = normalizeDependencyInput(
+      targetNode?.dependencies ||
+      targetNode?.dependencyTaskIds ||
+      [],
+    );
+    const dependencies = normalizeDependencyInput([...existing, srcTaskId]);
+    await apiFetch("/api/tasks/dependencies", {
+      method: "PUT",
+      body: JSON.stringify({
+        taskId: dstTaskId,
+        dependencies,
+      }),
+    });
+    showToast(`Wired dependency: ${srcTaskId} -> ${dstTaskId}`, "success");
+    await loadDagViews();
+  }, [loadDagViews]);
+
   const handleSprintChange = useCallback((nextSprint) => {
     const sprintId = toText(nextSprint, "all");
     if (sprintId === dagSelectedSprint) return;
@@ -4539,6 +5040,7 @@ export function TasksTab() {
         <span class="snapshot-view-tag">${iconText(":link: DAG")}</span>
         <span class="pill">Sprint nodes: ${dagSprintGraph.nodes.length}</span>
         <span class="pill">Global nodes: ${dagGlobalGraph.nodes.length}</span>
+        <span class="pill">Epic nodes: ${dagEpicGraph.nodes.length}</span>
         <span class="pill">Global edges: ${dagGlobalGraph.edges.length}</span>
       </div>
     `}
@@ -4583,22 +5085,37 @@ export function TasksTab() {
 
     ${isDag && html`
       <div class="task-dag-wrap" style=${{ display: "grid", gap: "10px", marginTop: "8px" }}>
-        ${dagError && html`<${Alert} severity="warning">${dagError}</${Alert}>`}
-        ${dagLoading && html`<${Alert} severity="info">Loading DAG data…</${Alert}>`}
+        ${dagError ? html`<${Alert} severity="warning">${dagError}</${Alert}>` : null}
+        ${dagLoading ? html`<${Alert} severity="info">Loading DAG data…</${Alert}>` : null}
         <${DagGraphSection}
           title=${dagSprintGraph.title || (dagSelectedSprint === "all" ? "All Sprint DAG" : `Sprint ${dagSelectedSprint} DAG`)}
           description=${dagSprintGraph.description || "Task dependency order within the selected sprint."}
           graph=${dagSprintGraph}
+          graphKey="sprint"
           onOpenTask=${openDetail}
+          onCreateEdge={({ sourceNode, targetNode }) => handleCreateDagEdge({ sourceNode, targetNode, graphKind: "task" })}
+          allowWiring=${true}
           emptyMessage="No sprint DAG data available yet."
-        />
+        ><//>
         <${DagGraphSection}
           title=${dagGlobalGraph.title || "Global DAG of DAGs"}
           description=${dagGlobalGraph.description || "Cross-sprint dependency overview."}
           graph=${dagGlobalGraph}
+          graphKey="global"
           onOpenTask=${openDetail}
+          onCreateEdge={({ sourceNode, targetNode }) => handleCreateDagEdge({ sourceNode, targetNode, graphKind: "task" })}
+          allowWiring=${true}
           emptyMessage="No global DAG data available yet."
-        />
+        ><//>
+        <${DagGraphSection}
+          title=${dagEpicGraph.title || "Epic Dependency DAG"}
+          description=${dagEpicGraph.description || "Epics and their run prerequisites."}
+          graph=${dagEpicGraph}
+          graphKey="epic"
+          onCreateEdge={({ sourceNode, targetNode }) => handleCreateDagEdge({ sourceNode, targetNode, graphKind: "epic" })}
+          allowWiring=${true}
+          emptyMessage="No epic DAG data available yet."
+        ><//>
       </div>
     `}
 
@@ -4725,22 +5242,14 @@ export function TasksTab() {
     html`
       <${CreateTaskModalInline} onClose=${() => setShowCreate(false)} />
     `}
-    ${detailTask && isActiveStatus(detailTask.status) &&
+    ${detailTask && isActiveStatus(detailTask.status) && hasLiveExecutionEvidence(detailTask) &&
     html`
       <${TaskProgressModal}
         task=${detailTask}
         onClose=${() => setDetailTask(null)}
       />
     `}
-    ${detailTask && isReviewStatus(detailTask.status) &&
-    html`
-      <${TaskReviewModal}
-        task=${detailTask}
-        onClose=${() => setDetailTask(null)}
-        onStart=${(task) => openStartModal(task)}
-      />
-    `}
-    ${detailTask && !isActiveStatus(detailTask.status) && !isReviewStatus(detailTask.status) &&
+    ${detailTask && (!isActiveStatus(detailTask.status) || !hasLiveExecutionEvidence(detailTask)) &&
     html`
       <${TaskDetailModal}
         task=${detailTask}
@@ -5196,6 +5705,8 @@ function CreateTaskModalInline({ onClose }) {
 
 
 
+
+