@ryanfw/prompt-orchestration-pipeline 0.6.0 → 0.7.0

package/src/ui/dist/assets/{index-WgJUlSmE.js → index-DqkbzXZ1.js}

@@ -520,11 +520,11 @@ function requireReact_production() {
   react_production.useState = function(initialState) {
     return ReactSharedInternals.H.useState(initialState);
   };
-  react_production.useSyncExternalStore = function(subscribe, getSnapshot, getServerSnapshot) {
+  react_production.useSyncExternalStore = function(subscribe2, getSnapshot2, getServerSnapshot2) {
     return ReactSharedInternals.H.useSyncExternalStore(
-      subscribe,
-      getSnapshot,
-      getServerSnapshot
+      subscribe2,
+      getSnapshot2,
+      getServerSnapshot2
     );
   };
   react_production.useTransition = function() {
@@ -3180,15 +3180,15 @@ function requireReactDomClient_production() {
     return value;
   }
   var AbortControllerLocal = "undefined" !== typeof AbortController ? AbortController : function() {
-    var listeners = [], signal = this.signal = {
+    var listeners2 = [], signal = this.signal = {
       aborted: false,
       addEventListener: function(type, listener) {
-        listeners.push(listener);
+        listeners2.push(listener);
       }
     };
     this.abort = function() {
       signal.aborted = true;
-      listeners.forEach(function(listener) {
+      listeners2.forEach(function(listener) {
         return listener();
       });
     };
@@ -3234,33 +3234,33 @@ function requireReactDomClient_production() {
   function pingEngtangledActionScope() {
     if (0 === --currentEntangledPendingCount && null !== currentEntangledListeners) {
       null !== currentEntangledActionThenable && (currentEntangledActionThenable.status = "fulfilled");
-      var listeners = currentEntangledListeners;
+      var listeners2 = currentEntangledListeners;
       currentEntangledListeners = null;
       currentEntangledLane = 0;
       currentEntangledActionThenable = null;
-      for (var i2 = 0; i2 < listeners.length; i2++) (0, listeners[i2])();
+      for (var i2 = 0; i2 < listeners2.length; i2++) (0, listeners2[i2])();
     }
   }
   function chainThenableValue(thenable, result) {
-    var listeners = [], thenableWithOverride = {
+    var listeners2 = [], thenableWithOverride = {
       status: "pending",
       value: null,
       reason: null,
       then: function(resolve) {
-        listeners.push(resolve);
+        listeners2.push(resolve);
       }
     };
     thenable.then(
       function() {
         thenableWithOverride.status = "fulfilled";
         thenableWithOverride.value = result;
-        for (var i2 = 0; i2 < listeners.length; i2++) (0, listeners[i2])(result);
+        for (var i2 = 0; i2 < listeners2.length; i2++) (0, listeners2[i2])(result);
       },
       function(error) {
         thenableWithOverride.status = "rejected";
         thenableWithOverride.reason = error;
-        for (error = 0; error < listeners.length; error++)
-          (0, listeners[error])(void 0);
+        for (error = 0; error < listeners2.length; error++)
+          (0, listeners2[error])(void 0);
       }
     );
     return thenableWithOverride;
@@ -4327,22 +4327,22 @@ function requireReactDomClient_production() {
     }
     return [newState, dispatch];
   }
-  function updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
+  function updateSyncExternalStore(subscribe2, getSnapshot2, getServerSnapshot2) {
     var fiber = currentlyRenderingFiber, hook = updateWorkInProgressHook(), isHydrating$jscomp$0 = isHydrating;
     if (isHydrating$jscomp$0) {
-      if (void 0 === getServerSnapshot) throw Error(formatProdErrorMessage(407));
-      getServerSnapshot = getServerSnapshot();
-    } else getServerSnapshot = getSnapshot();
+      if (void 0 === getServerSnapshot2) throw Error(formatProdErrorMessage(407));
+      getServerSnapshot2 = getServerSnapshot2();
+    } else getServerSnapshot2 = getSnapshot2();
     var snapshotChanged = !objectIs(
       (currentHook || hook).memoizedState,
-      getServerSnapshot
+      getServerSnapshot2
     );
-    snapshotChanged && (hook.memoizedState = getServerSnapshot, didReceiveUpdate = true);
+    snapshotChanged && (hook.memoizedState = getServerSnapshot2, didReceiveUpdate = true);
     hook = hook.queue;
-    updateEffect(subscribeToStore.bind(null, fiber, hook, subscribe), [
-      subscribe
+    updateEffect(subscribeToStore.bind(null, fiber, hook, subscribe2), [
+      subscribe2
     ]);
-    if (hook.getSnapshot !== getSnapshot || snapshotChanged || null !== workInProgressHook && workInProgressHook.memoizedState.tag & 1) {
+    if (hook.getSnapshot !== getSnapshot2 || snapshotChanged || null !== workInProgressHook && workInProgressHook.memoizedState.tag & 1) {
       fiber.flags |= 2048;
       pushSimpleEffect(
         9,
@@ -4351,29 +4351,29 @@ function requireReactDomClient_production() {
           null,
           fiber,
           hook,
-          getServerSnapshot,
-          getSnapshot
+          getServerSnapshot2,
+          getSnapshot2
         ),
         null
       );
       if (null === workInProgressRoot) throw Error(formatProdErrorMessage(349));
-      isHydrating$jscomp$0 || 0 !== (renderLanes & 127) || pushStoreConsistencyCheck(fiber, getSnapshot, getServerSnapshot);
+      isHydrating$jscomp$0 || 0 !== (renderLanes & 127) || pushStoreConsistencyCheck(fiber, getSnapshot2, getServerSnapshot2);
     }
-    return getServerSnapshot;
+    return getServerSnapshot2;
   }
-  function pushStoreConsistencyCheck(fiber, getSnapshot, renderedSnapshot) {
+  function pushStoreConsistencyCheck(fiber, getSnapshot2, renderedSnapshot) {
     fiber.flags |= 16384;
-    fiber = { getSnapshot, value: renderedSnapshot };
-    getSnapshot = currentlyRenderingFiber.updateQueue;
-    null === getSnapshot ? (getSnapshot = createFunctionComponentUpdateQueue(), currentlyRenderingFiber.updateQueue = getSnapshot, getSnapshot.stores = [fiber]) : (renderedSnapshot = getSnapshot.stores, null === renderedSnapshot ? getSnapshot.stores = [fiber] : renderedSnapshot.push(fiber));
+    fiber = { getSnapshot: getSnapshot2, value: renderedSnapshot };
+    getSnapshot2 = currentlyRenderingFiber.updateQueue;
+    null === getSnapshot2 ? (getSnapshot2 = createFunctionComponentUpdateQueue(), currentlyRenderingFiber.updateQueue = getSnapshot2, getSnapshot2.stores = [fiber]) : (renderedSnapshot = getSnapshot2.stores, null === renderedSnapshot ? getSnapshot2.stores = [fiber] : renderedSnapshot.push(fiber));
   }
-  function updateStoreInstance(fiber, inst, nextSnapshot, getSnapshot) {
+  function updateStoreInstance(fiber, inst, nextSnapshot, getSnapshot2) {
     inst.value = nextSnapshot;
-    inst.getSnapshot = getSnapshot;
+    inst.getSnapshot = getSnapshot2;
     checkIfSnapshotChanged(inst) && forceStoreRerender(fiber);
   }
-  function subscribeToStore(fiber, inst, subscribe) {
-    return subscribe(function() {
+  function subscribeToStore(fiber, inst, subscribe2) {
+    return subscribe2(function() {
       checkIfSnapshotChanged(inst) && forceStoreRerender(fiber);
     });
   }
@@ -5092,23 +5092,23 @@ function requireReactDomClient_production() {
       mountWorkInProgressHook().memoizedState = stateHook;
       return [false, stateHook];
     },
-    useSyncExternalStore: function(subscribe, getSnapshot, getServerSnapshot) {
+    useSyncExternalStore: function(subscribe2, getSnapshot2, getServerSnapshot2) {
       var fiber = currentlyRenderingFiber, hook = mountWorkInProgressHook();
       if (isHydrating) {
-        if (void 0 === getServerSnapshot)
+        if (void 0 === getServerSnapshot2)
           throw Error(formatProdErrorMessage(407));
-        getServerSnapshot = getServerSnapshot();
+        getServerSnapshot2 = getServerSnapshot2();
       } else {
-        getServerSnapshot = getSnapshot();
+        getServerSnapshot2 = getSnapshot2();
         if (null === workInProgressRoot)
           throw Error(formatProdErrorMessage(349));
-        0 !== (workInProgressRootRenderLanes & 127) || pushStoreConsistencyCheck(fiber, getSnapshot, getServerSnapshot);
+        0 !== (workInProgressRootRenderLanes & 127) || pushStoreConsistencyCheck(fiber, getSnapshot2, getServerSnapshot2);
       }
-      hook.memoizedState = getServerSnapshot;
-      var inst = { value: getServerSnapshot, getSnapshot };
+      hook.memoizedState = getServerSnapshot2;
+      var inst = { value: getServerSnapshot2, getSnapshot: getSnapshot2 };
       hook.queue = inst;
-      mountEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [
-        subscribe
+      mountEffect(subscribeToStore.bind(null, fiber, inst, subscribe2), [
+        subscribe2
       ]);
       fiber.flags |= 2048;
       pushSimpleEffect(
@@ -5118,12 +5118,12 @@ function requireReactDomClient_production() {
           null,
           fiber,
           inst,
-          getServerSnapshot,
-          getSnapshot
+          getServerSnapshot2,
+          getSnapshot2
         ),
         null
       );
-      return getServerSnapshot;
+      return getServerSnapshot2;
     },
     useId: function() {
       var hook = mountWorkInProgressHook(), identifierPrefix = workInProgressRoot.identifierPrefix;
@@ -8813,10 +8813,10 @@ function requireReactDomClient_production() {
       var tag = node.tag;
       if ((0 === tag || 11 === tag || 15 === tag) && node.flags & 16384 && (tag = node.updateQueue, null !== tag && (tag = tag.stores, null !== tag)))
         for (var i2 = 0; i2 < tag.length; i2++) {
-          var check = tag[i2], getSnapshot = check.getSnapshot;
+          var check = tag[i2], getSnapshot2 = check.getSnapshot;
           check = check.value;
           try {
-            if (!objectIs(getSnapshot(), check)) return false;
+            if (!objectIs(getSnapshot2(), check)) return false;
           } catch (error) {
             return false;
           }
@@ -10201,15 +10201,15 @@ function requireReactDomClient_production() {
     };
   }
   function accumulateTwoPhaseListeners(targetFiber, reactName) {
-    for (var captureName = reactName + "Capture", listeners = []; null !== targetFiber; ) {
+    for (var captureName = reactName + "Capture", listeners2 = []; null !== targetFiber; ) {
       var _instance2 = targetFiber, stateNode = _instance2.stateNode;
       _instance2 = _instance2.tag;
-      5 !== _instance2 && 26 !== _instance2 && 27 !== _instance2 || null === stateNode || (_instance2 = getListener(targetFiber, captureName), null != _instance2 && listeners.unshift(
+      5 !== _instance2 && 26 !== _instance2 && 27 !== _instance2 || null === stateNode || (_instance2 = getListener(targetFiber, captureName), null != _instance2 && listeners2.unshift(
         createDispatchListener(targetFiber, _instance2, stateNode)
-      ), _instance2 = getListener(targetFiber, reactName), null != _instance2 && listeners.push(
+      ), _instance2 = getListener(targetFiber, reactName), null != _instance2 && listeners2.push(
         createDispatchListener(targetFiber, _instance2, stateNode)
       ));
-      if (3 === targetFiber.tag) return listeners;
+      if (3 === targetFiber.tag) return listeners2;
       targetFiber = targetFiber.return;
     }
     return [];
@@ -10222,18 +10222,18 @@ function requireReactDomClient_production() {
     return inst ? inst : null;
   }
   function accumulateEnterLeaveListenersForEvent(dispatchQueue, event, target, common, inCapturePhase) {
-    for (var registrationName = event._reactName, listeners = []; null !== target && target !== common; ) {
+    for (var registrationName = event._reactName, listeners2 = []; null !== target && target !== common; ) {
       var _instance3 = target, alternate = _instance3.alternate, stateNode = _instance3.stateNode;
       _instance3 = _instance3.tag;
       if (null !== alternate && alternate === common) break;
-      5 !== _instance3 && 26 !== _instance3 && 27 !== _instance3 || null === stateNode || (alternate = stateNode, inCapturePhase ? (stateNode = getListener(target, registrationName), null != stateNode && listeners.unshift(
+      5 !== _instance3 && 26 !== _instance3 && 27 !== _instance3 || null === stateNode || (alternate = stateNode, inCapturePhase ? (stateNode = getListener(target, registrationName), null != stateNode && listeners2.unshift(
         createDispatchListener(target, stateNode, alternate)
-      )) : inCapturePhase || (stateNode = getListener(target, registrationName), null != stateNode && listeners.push(
+      )) : inCapturePhase || (stateNode = getListener(target, registrationName), null != stateNode && listeners2.push(
         createDispatchListener(target, stateNode, alternate)
       )));
       target = target.return;
     }
-    0 !== listeners.length && dispatchQueue.push({ event, listeners });
+    0 !== listeners2.length && dispatchQueue.push({ event, listeners: listeners2 });
   }
   var NORMALIZE_NEWLINES_REGEX = /\r\n?/g, NORMALIZE_NULL_AND_REPLACEMENT_REGEX = /\u0000|\uFFFD/g;
   function normalizeMarkupForTextOrAttribute(markup) {
@@ -12550,7 +12550,7 @@ function requireClient() {
   return client.exports;
 }
 var clientExports = requireClient();
-const ReactDOM = /* @__PURE__ */ getDefaultExportFromCjs(clientExports);
+const ReactDOM$1 = /* @__PURE__ */ getDefaultExportFromCjs(clientExports);
 /**
  * react-router v7.9.4
  *
@@ -14637,6 +14637,7 @@ function useViewTransitionState(to, { relative } = {}) {
   return matchPath(path.pathname, nextPath) != null || matchPath(path.pathname, currentPath) != null;
 }
 var reactDomExports = requireReactDom();
+const ReactDOM = /* @__PURE__ */ getDefaultExportFromCjs(reactDomExports);
 function setRef(ref, value) {
   if (typeof ref === "function") {
     return ref(value);
@@ -15332,11 +15333,11 @@ function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?
       }
       isPointerInsideReactTreeRef.current = false;
     };
-    const timerId = window.setTimeout(() => {
+    const timerId2 = window.setTimeout(() => {
       ownerDocument.addEventListener("pointerdown", handlePointerDown);
     }, 0);
     return () => {
-      window.clearTimeout(timerId);
+      window.clearTimeout(timerId2);
       ownerDocument.removeEventListener("pointerdown", handlePointerDown);
       ownerDocument.removeEventListener("click", handleClickRef.current);
     };
@@ -15380,6 +15381,15 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
     target.dispatchEvent(event);
   }
 }
+var PORTAL_NAME$1 = "Portal";
+var Portal$1 = reactExports.forwardRef((props, forwardedRef) => {
+  const { container: containerProp, ...portalProps } = props;
+  const [mounted, setMounted] = reactExports.useState(false);
+  useLayoutEffect2(() => setMounted(true), []);
+  const container = containerProp || mounted && globalThis?.document?.body;
+  return container ? ReactDOM.createPortal(/* @__PURE__ */ jsxRuntimeExports.jsx(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
+});
+Portal$1.displayName = PORTAL_NAME$1;
 function useSize(element) {
   const [size2, setSize] = reactExports.useState(void 0);
   useLayoutEffect2(() => {
@@ -16007,7 +16017,7 @@ async function convertValueToCoords(state, options) {
     y: crossAxis * crossAxisMulti
   };
 }
-const offset$2 = function(options) {
+const offset$3 = function(options) {
   if (options === void 0) {
     options = 0;
   }
@@ -16990,7 +17000,7 @@ function autoUpdate(reference, floating, update, options) {
     }
   };
 }
-const offset$1 = offset$2;
+const offset$2 = offset$3;
 const shift$1 = shift$2;
 const flip$1 = flip$2;
 const size$1 = size$2;
@@ -17263,8 +17273,8 @@ const arrow$1 = (options) => {
     }
   };
 };
-const offset = (options, deps) => ({
-  ...offset$1(options),
+const offset$1 = (options, deps) => ({
+  ...offset$2(options),
   options: [options, deps]
 });
 const shift = (options, deps) => ({
@@ -17388,7 +17398,7 @@ var PopperContent = reactExports.forwardRef(
         reference: context.anchor
       },
       middleware: [
-        offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
+        offset$1({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
         avoidCollisions && shift({
           mainAxis: true,
           crossAxis: false,
@@ -18867,6 +18877,12 @@ var PORTAL_NAME = "TooltipPortal";
 var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
   forceMount: void 0
 });
+var TooltipPortal = (props) => {
+  const { __scopeTooltip, forceMount, children, container } = props;
+  const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(PortalProvider, { scope: __scopeTooltip, forceMount, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$1, { asChild: true, container, children }) }) });
+};
+TooltipPortal.displayName = PORTAL_NAME;
 var CONTENT_NAME = "TooltipContent";
 var TooltipContent = reactExports.forwardRef(
   (props, forwardedRef) => {
@@ -19135,7 +19151,9 @@ function getHullPresorted(points) {
 var Provider = TooltipProvider;
 var Root3 = Tooltip;
 var Trigger = TooltipTrigger;
+var Portal = TooltipPortal;
 var Content2 = TooltipContent;
+var Arrow2 = TooltipArrow;
 var classnames = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
@@ -19610,8 +19628,9 @@ function derivePipelineMetadata(source = {}) {
   const pipelineLabel = source?.pipelineLabel ?? (typeof pipelineSlugFromSource === "string" ? humanizePipelineSlug(pipelineSlugFromSource) : null);
   const pipelineObject = pipelineValue && typeof pipelineValue === "object" && !Array.isArray(pipelineValue) ? pipelineValue : null;
   const pipeline = pipelineObject ?? (typeof pipelineSlugFromSource === "string" ? pipelineSlugFromSource : null);
+  const stringPipeline = typeof pipelineValue === "string" ? pipelineValue : null;
   return {
-    pipeline,
+    pipeline: pipeline || stringPipeline,
     pipelineSlug: typeof pipelineSlugFromSource === "string" ? pipelineSlugFromSource : null,
     pipelineLabel: pipelineLabel || null
   };
@@ -19909,13 +19928,70 @@ function useJobListWithUpdates() {
     connectionStatus
   };
 }
-const ALLOWED_STATES = /* @__PURE__ */ new Set(["pending", "running", "done", "failed"]);
-function normalizeTaskState(raw) {
+const TaskState = Object.freeze({
+  PENDING: "pending",
+  RUNNING: "running",
+  DONE: "done",
+  FAILED: "failed"
+});
+const JobStatus = Object.freeze({
+  PENDING: "pending",
+  RUNNING: "running",
+  FAILED: "failed",
+  COMPLETE: "complete"
+});
+const JobLocation = Object.freeze({
+  PENDING: "pending",
+  CURRENT: "current",
+  COMPLETE: "complete",
+  REJECTED: "rejected"
+});
+new Set(Object.values(TaskState));
+new Set(Object.values(JobStatus));
+new Set(Object.values(JobLocation));
+function normalizeTaskState(state) {
+  if (typeof state !== "string") {
+    return TaskState.PENDING;
+  }
+  const normalized = state.toLowerCase().trim();
+  switch (normalized) {
+    case "error":
+      return TaskState.FAILED;
+    case "succeeded":
+      return TaskState.DONE;
+    case TaskState.PENDING:
+    case TaskState.RUNNING:
+    case TaskState.DONE:
+    case TaskState.FAILED:
+      return normalized;
+    default:
+      return TaskState.PENDING;
+  }
+}
+function deriveJobStatusFromTasks(tasks) {
+  if (!Array.isArray(tasks) || tasks.length === 0) {
+    return JobStatus.PENDING;
+  }
+  const normalizedStates = tasks.map((task) => normalizeTaskState(task.state));
+  if (normalizedStates.some((state) => state === TaskState.FAILED)) {
+    return JobStatus.FAILED;
+  }
+  if (normalizedStates.some((state) => state === TaskState.RUNNING)) {
+    return JobStatus.RUNNING;
+  }
+  if (normalizedStates.every((state) => state === TaskState.DONE)) {
+    return JobStatus.COMPLETE;
+  }
+  return JobStatus.PENDING;
+}
+function normalizeTaskStateWithWarning(raw) {
   if (!raw || typeof raw !== "string")
     return { state: "pending", warning: "missing_state" };
-  const s2 = raw.toLowerCase();
-  if (ALLOWED_STATES.has(s2)) return { state: s2 };
-  return { state: "pending", warning: `unknown_state:${raw}` };
+  const normalizedState = normalizeTaskState(raw);
+  if (raw !== normalizedState) {
+    return { state: normalizedState, warning: `unknown_state:${raw}` };
+  }
+  return { state: normalizedState };
 }
 function normalizeTasks(rawTasks) {
   if (!rawTasks) return { tasks: {}, warnings: [] };
@@ -19923,7 +19999,7 @@ function normalizeTasks(rawTasks) {
   if (typeof rawTasks === "object" && !Array.isArray(rawTasks)) {
     const tasks = {};
     Object.entries(rawTasks).forEach(([name, t2]) => {
-      const ns = normalizeTaskState(t2 && t2.state);
+      const ns = normalizeTaskStateWithWarning(t2 && t2.state);
       if (ns.warning) warnings.push(`${name}:${ns.warning}`);
       const taskObj = {
         name,
@@ -19957,7 +20033,7 @@ function normalizeTasks(rawTasks) {
     const tasks = {};
     rawTasks.forEach((t2, idx) => {
       const name = t2 && t2.name ? String(t2.name) : `task-${idx}`;
-      const ns = normalizeTaskState(t2 && t2.state);
+      const ns = normalizeTaskStateWithWarning(t2 && t2.state);
       if (ns.warning) warnings.push(`${name}:${ns.warning}`);
       tasks[name] = {
         name,
@@ -19978,14 +20054,6 @@ function normalizeTasks(rawTasks) {
   }
   return { tasks: {}, warnings: ["invalid_tasks_shape"] };
 }
-function deriveStatusFromTasks(tasks) {
-  const taskList = Object.values(tasks);
-  if (!Array.isArray(taskList) || taskList.length === 0) return "pending";
-  if (taskList.some((t2) => t2.state === "failed")) return "failed";
-  if (taskList.some((t2) => t2.state === "running")) return "running";
-  if (taskList.every((t2) => t2.state === "done")) return "complete";
-  return "pending";
-}
 function computeJobSummaryStats(tasks) {
   const taskList = Object.values(tasks);
   const taskCount = taskList.length;
@@ -19993,7 +20061,7 @@ function computeJobSummaryStats(tasks) {
     (acc, t2) => acc + (t2.state === "done" ? 1 : 0),
     0
   );
-  const status = deriveStatusFromTasks(tasks);
+  const status = deriveJobStatusFromTasks(Object.values(tasks));
   const progress = taskCount > 0 ? Math.round(doneCount / taskCount * 100) : 0;
   return { status, progress, doneCount, taskCount };
 }
@@ -20076,101 +20144,6 @@ function adaptJobDetail(apiDetail) {
   if (warnings.length > 0) detail.__warnings = warnings;
   return detail;
 }
-function normalizeState(state) {
-  switch (state) {
-    case "done":
-      return "completed";
-    case "failed":
-    case "error":
-      return "error";
-    case "pending":
-    case "running":
-    case "current":
-    case "completed":
-    case "rejected":
-      return state;
-    default:
-      return state;
-  }
-}
-function taskDisplayDurationMs(task, now = Date.now()) {
-  const { state, startedAt, endedAt, executionTime, executionTimeMs } = task;
-  const normalizedState = normalizeState(state);
-  switch (normalizedState) {
-    case "pending":
-      return 0;
-    case "running":
-    case "current":
-      if (!startedAt) {
-        return 0;
-      }
-      const startTime = Date.parse(startedAt);
-      return Math.max(0, now - startTime);
-    case "completed":
-      const execTime = executionTimeMs != null ? executionTimeMs : executionTime;
-      if (typeof execTime === "number" && execTime >= 0) {
-        return execTime;
-      }
-      if (!startedAt) {
-        return 0;
-      }
-      const completedStartTime = Date.parse(startedAt);
-      const endTime = endedAt ? Date.parse(endedAt) : now;
-      return Math.max(0, endTime - completedStartTime);
-    case "rejected":
-      return 0;
-    default:
-      return 0;
-  }
-}
-function jobCumulativeDurationMs(job, now = Date.now()) {
-  const { tasks } = job;
-  if (!tasks) {
-    return 0;
-  }
-  let taskList;
-  if (Array.isArray(tasks)) {
-    taskList = tasks;
-  } else if (typeof tasks === "object") {
-    taskList = Object.values(tasks);
-  } else {
-    return 0;
-  }
-  return taskList.reduce((total, task) => {
-    return total + taskDisplayDurationMs(task, now);
-  }, 0);
-}
-function fmtDuration(ms) {
-  if (ms <= 0) return "0s";
-  const seconds = Math.floor(ms / 1e3);
-  const minutes = Math.floor(seconds / 60);
-  const hours = Math.floor(minutes / 60);
-  if (hours > 0) {
-    const remainingMinutes = minutes % 60;
-    const remainingSeconds = seconds % 60;
-    if (remainingSeconds > 0) {
-      return `${hours}h ${remainingMinutes}m ${remainingSeconds}s`;
-    } else {
-      return `${hours}h ${remainingMinutes}m`;
-    }
-  } else if (minutes > 0) {
-    return `${minutes}m ${seconds % 60}s`;
-  } else {
-    return `${seconds}s`;
-  }
-}
-function useTicker(intervalMs = 1e3) {
-  const [now, setNow] = reactExports.useState(() => Date.now());
-  reactExports.useEffect(() => {
-    const intervalId = setInterval(() => {
-      setNow(Date.now());
-    }, intervalMs);
-    return () => {
-      clearInterval(intervalId);
-    };
-  }, [intervalMs]);
-  return now;
-}
 /**
  * @license lucide-react v0.544.0 - ISC
  *
@@ -20270,17 +20243,6 @@ const createLucideIcon = (iconName, iconNode) => {
   Component.displayName = toPascalCase(iconName);
   return Component;
 };
-/**
- * @license lucide-react v0.544.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$4 = [
-  ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
-  ["path", { d: "M19 12H5", key: "x3x0zl" }]
-];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$4);
 /**
  * @license lucide-react v0.544.0 - ISC
  *
@@ -20326,6 +20288,78 @@ const __iconNode = [
   ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }]
 ];
 const Upload = createLucideIcon("upload", __iconNode);
+function normalizeState(state) {
+  const canonicalState = normalizeTaskState(state);
+  if (canonicalState === TaskState.DONE) {
+    return "completed";
+  }
+  return canonicalState;
+}
+function taskDisplayDurationMs(task, now = Date.now()) {
+  const { state, startedAt, endedAt, executionTime, executionTimeMs } = task;
+  const normalizedState = normalizeState(state);
+  switch (normalizedState) {
+    case TaskState.PENDING:
+      return 0;
+    case TaskState.RUNNING:
+      if (!startedAt) {
+        return 0;
+      }
+      const startTime = Date.parse(startedAt);
+      return Math.max(0, now - startTime);
+    case "completed":
+      const execTime = executionTimeMs != null ? executionTimeMs : executionTime;
+      if (typeof execTime === "number" && execTime >= 0) {
+        return execTime;
+      }
+      if (!startedAt) {
+        return 0;
+      }
+      const completedStartTime = Date.parse(startedAt);
+      const endTime = endedAt ? Date.parse(endedAt) : now;
+      return Math.max(0, endTime - completedStartTime);
+    case TaskState.FAILED:
+      return 0;
+    default:
+      return 0;
+  }
+}
+function jobCumulativeDurationMs(job, now = Date.now()) {
+  const { tasks } = job;
+  if (!tasks) {
+    return 0;
+  }
+  let taskList;
+  if (Array.isArray(tasks)) {
+    taskList = tasks;
+  } else if (typeof tasks === "object") {
+    taskList = Object.values(tasks);
+  } else {
+    return 0;
+  }
+  return taskList.reduce((total, task) => {
+    return total + taskDisplayDurationMs(task, now);
+  }, 0);
+}
+function fmtDuration(ms) {
+  if (ms <= 0) return "0s";
+  const seconds = Math.floor(ms / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  if (hours > 0) {
+    const remainingMinutes = minutes % 60;
+    const remainingSeconds = seconds % 60;
+    if (remainingSeconds > 0) {
+      return `${hours}h ${remainingMinutes}m ${remainingSeconds}s`;
+    } else {
+      return `${hours}h ${remainingMinutes}m`;
+    }
+  } else if (minutes > 0) {
+    return `${minutes}m ${seconds % 60}s`;
+  } else {
+    return `${seconds}s`;
+  }
+}
 const countCompleted = (job) => {
   const list = Array.isArray(job?.tasks) ? job.tasks : Object.values(job?.tasks || {});
   return list.filter((t2) => t2?.state === "done" || t2?.state === "completed").length;
@@ -20347,14 +20381,13 @@ function Badge({ children, intent = "gray", className = "", ...props }) {
 }
 const statusBadge = (status) => {
   switch (status) {
-    case "running":
+    case TaskState.RUNNING:
       return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { intent: "blue", "aria-label": "Running", children: "Running" });
-    case "failed":
+    case TaskState.FAILED:
       return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { intent: "red", "aria-label": "Failed", children: "Failed" });
-    case "completed":
-    case "complete":
+    case TaskState.DONE:
       return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { intent: "green", "aria-label": "Completed", children: "Completed" });
-    case "pending":
+    case TaskState.PENDING:
       return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { intent: "gray", "aria-label": "Pending", children: "Pending" });
     default:
       return null;
@@ -20362,16 +20395,176 @@ const statusBadge = (status) => {
 };
 const progressClasses = (status) => {
   switch (status) {
-    case "running":
+    case TaskState.RUNNING:
       return "bg-info/20 [&>div]:bg-info";
-    case "failed":
+    case TaskState.FAILED:
       return "bg-destructive/20 [&>div]:bg-destructive";
-    case "completed":
+    case TaskState.DONE:
       return "bg-success/20 [&>div]:bg-success";
     default:
       return "bg-muted [&>div]:bg-muted-foreground";
   }
 };
+const offset = Date.now() - performance.now();
+let currentNow = Math.floor(performance.now() + offset);
+const listeners = /* @__PURE__ */ new Set();
+const cadenceHints = /* @__PURE__ */ new Map();
+let timerId = null;
+let activeIntervalMs = 1e3;
+let isBackground = false;
+function subscribe(listener) {
+  listeners.add(listener);
+  if (listeners.size === 1) {
+    startTimer();
+  }
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) {
+      stopTimer();
+    }
+  };
+}
+function getSnapshot() {
+  return currentNow;
+}
+function getServerSnapshot() {
+  return Date.now();
+}
+function addCadenceHint(id, ms) {
+  cadenceHints.set(id, ms);
+  recalculateInterval();
+}
+function removeCadenceHint(id) {
+  cadenceHints.delete(id);
+  recalculateInterval();
+}
+function recalculateInterval() {
+  const minCadence = Math.min(...cadenceHints.values(), 1e3);
+  const newIntervalMs = isBackground ? Math.max(minCadence, 6e4) : minCadence;
+  if (newIntervalMs !== activeIntervalMs) {
+    activeIntervalMs = newIntervalMs;
+    if (listeners.size > 0) {
+      stopTimer();
+      startTimer();
+    }
+  }
+}
+function startTimer() {
+  if (timerId !== null) return;
+  const tick = () => {
+    currentNow = Math.floor(performance.now() + offset);
+    listeners.forEach((listener) => {
+      try {
+        listener();
+      } catch (error) {
+        console.error("Error in time store listener:", error);
+      }
+    });
+  };
+  if (activeIntervalMs >= 6e4) {
+    const now = Date.now();
+    const nextMinuteBoundary = Math.ceil(now / 6e4) * 6e4;
+    const initialDelay = nextMinuteBoundary - now;
+    timerId = setTimeout(() => {
+      tick();
+      timerId = setInterval(tick, 6e4);
+    }, initialDelay);
+  } else {
+    timerId = setInterval(tick, activeIntervalMs);
+  }
+}
+function stopTimer() {
+  if (timerId !== null) {
+    clearTimeout(timerId);
+    clearInterval(timerId);
+    timerId = null;
+  }
+}
+function handleVisibilityChange() {
+  const wasBackground = isBackground;
+  isBackground = document.visibilityState === "hidden";
+  if (wasBackground !== isBackground) {
+    recalculateInterval();
+  }
+}
+if (typeof document !== "undefined") {
+  document.addEventListener("visibilitychange", handleVisibilityChange);
+}
+function TimerText({
+  startMs,
+  endMs = null,
+  granularity = "second",
+  format = fmtDuration,
+  className
+}) {
+  const id = reactExports.useId();
+  const now = reactExports.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const [displayText, setDisplayText] = reactExports.useState(() => {
+    if (!startMs) return "—";
+    const initialEnd = endMs ?? Date.now();
+    const elapsed = Math.max(0, initialEnd - startMs);
+    return format(elapsed);
+  });
+  reactExports.useEffect(() => {
+    if (!startMs) return;
+    const cadenceMs = granularity === "second" ? 1e3 : 6e4;
+    addCadenceHint(id, cadenceMs);
+    return () => {
+      removeCadenceHint(id);
+    };
+  }, [id, granularity, startMs]);
+  reactExports.useEffect(() => {
+    if (!startMs) return;
+    if (endMs !== null) return;
+    const elapsed = Math.max(0, now - startMs);
+    setDisplayText(format(elapsed));
+  }, [now, startMs, endMs, format]);
+  reactExports.useEffect(() => {
+    if (!startMs || endMs === null) return;
+    const elapsed = Math.max(0, endMs - startMs);
+    setDisplayText(format(elapsed));
+  }, [startMs, endMs, format]);
+  if (!startMs) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className, children: "—" });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className, children: displayText });
+}
+function LiveText({ compute, cadenceMs = 1e4, className }) {
+  const id = reactExports.useId();
+  const now = reactExports.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const [displayText, setDisplayText] = reactExports.useState(() => {
+    return compute(Date.now());
+  });
+  reactExports.useEffect(() => {
+    addCadenceHint(id, cadenceMs);
+    return () => {
+      removeCadenceHint(id);
+    };
+  }, [id, cadenceMs]);
+  reactExports.useEffect(() => {
+    setDisplayText(compute(now));
+  }, [now, compute]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className, children: displayText });
+}
+function toMilliseconds(timestamp) {
+  if (timestamp === null || timestamp === void 0) {
+    return null;
+  }
+  if (typeof timestamp === "number") {
+    return isNaN(timestamp) ? null : timestamp;
+  }
+  if (typeof timestamp === "string") {
+    const parsed = Date.parse(timestamp);
+    return isNaN(parsed) ? null : parsed;
+  }
+  return null;
+}
+function taskToTimerProps(task) {
+  return {
+    startMs: toMilliseconds(task?.startedAt),
+    endMs: toMilliseconds(task?.endedAt)
+  };
+}
 function formatCurrency4$1(x) {
   if (typeof x !== "number" || x === 0) return "$0.0000";
   const formatted = x.toFixed(4);
@@ -20386,13 +20579,7 @@ function formatTokensCompact$1(n2) {
   }
   return `${n2} tok`;
 }
-function JobTable({
-  jobs,
-  pipeline,
-  onOpenJob,
-  overallElapsed,
-  now
-}) {
+function JobTable({ jobs, pipeline, onOpenJob }) {
   if (jobs.length === 0) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(p$7, { className: "p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "2", className: "text-slate-600", children: "No jobs to show here yet." }) });
   }
@@ -20417,11 +20604,9 @@ function JobTable({
         })
       ) : job.tasks || {};
       const currentTask = job.current ? taskById[job.current] : void 0;
-      const currentElapsedMs = currentTask ? taskDisplayDurationMs(currentTask, now) : 0;
       const totalCompleted = countCompleted(job);
       const totalTasks = pipeline?.tasks?.length ?? (Array.isArray(job.tasks) ? job.tasks.length : Object.keys(job.tasks || {}).length);
       const progress = Number.isFinite(job.progress) ? Math.round(job.progress) : 0;
-      const duration = overallElapsed(job);
       const currentTaskName = currentTask ? currentTask.name ?? currentTask.id ?? job.current : void 0;
       const currentTaskConfig = job.current && (currentTask?.config || pipeline?.taskConfig?.[job.current]) || {};
       const costsSummary = job.costsSummary || {};
@@ -20448,12 +20633,26 @@ function JobTable({
             ] }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(T, { children: statusBadge(job.status) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(T, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$4, { direction: "column", gap: "1", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "2", className: "text-slate-700", children: currentTaskName ? currentTaskName : job.status === "completed" ? "—" : job.current ?? "—" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "2", className: "text-slate-700", children: currentTaskName ? currentTaskName : job.status === "done" ? "—" : job.current ?? "—" }),
               currentTask && /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "1", className: "text-slate-500", children: [
                 currentTaskConfig?.model || currentTask?.model,
                 currentTaskConfig?.temperature != null || currentTask?.temperature != null ? `temp ${currentTaskConfig?.temperature ?? currentTask?.temperature}` : null,
-                currentElapsedMs > 0 ? fmtDuration(currentElapsedMs) : null
-              ].filter(Boolean).join(" · ") })
+                (() => {
+                  const { startMs, endMs } = taskToTimerProps(currentTask);
+                  return startMs ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    TimerText,
+                    {
+                      startMs,
+                      endMs,
+                      granularity: "second",
+                      className: "text-slate-500"
+                    }
+                  ) : null;
+                })()
+              ].filter(Boolean).map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(React.Fragment, { children: [
+                typeof item === "string" ? item : item,
+                index2 < 2 && " · "
+              ] }, index2)) })
             ] }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(T, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$4, { direction: "column", gap: "2", className: "w-32", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -20480,7 +20679,14 @@ function JobTable({
             ] }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(T, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$4, { align: "center", gap: "1", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(TimerReset, { className: "h-3 w-3 text-slate-500" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "2", className: "text-slate-700", children: fmtDuration(duration) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                LiveText,
+                {
+                  cadenceMs: 1e4,
+                  compute: (now) => fmtDuration(jobCumulativeDurationMs(job, now)),
+                  className: "text-slate-700"
+                }
+              )
             ] }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(T, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               o$2,
@@ -20747,7 +20953,6 @@ function Layout({
   pageTitle,
   breadcrumbs,
   actions,
-  showBackButton = false,
   backTo = "/",
   maxWidth = "max-w-7xl"
 }) {
@@ -20761,9 +20966,6 @@ function Layout({
     if (location.pathname.startsWith(path)) return true;
     return false;
   };
-  const handleBack = () => {
-    navigate(backTo);
-  };
   const toggleUploadPanel = () => {
     setIsUploadOpen(!isUploadOpen);
   };
@@ -20819,20 +21021,6 @@ function Layout({
             gap: "4",
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs(p$4, { align: "center", className: "min-w-0 flex-1", children: [
-                showBackButton && /* @__PURE__ */ jsxRuntimeExports.jsxs(Root3, { delayDuration: 200, children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    Button,
-                    {
-                      variant: "ghost",
-                      size: "sm",
-                      onClick: handleBack,
-                      className: "shrink-0",
-                      "aria-label": "Go back",
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "h-4 w-4" })
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(Content2, { side: "bottom", sideOffset: 5, children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "2", children: "Go back" }) })
-                ] }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   p$7,
                   {
@@ -20966,34 +21154,32 @@ function PromptPipelineDashboard({ isConnected }) {
     return src.map(adaptJobSummary);
   }, [apiJobs, error]);
   const [activeTab, setActiveTab] = reactExports.useState("current");
-  const now = useTicker(1e4);
   const errorCount = reactExports.useMemo(
-    () => jobs.filter((j) => j.status === "failed").length,
+    () => jobs.filter((j) => j.status === TaskState.FAILED).length,
     [jobs]
   );
   const currentCount = reactExports.useMemo(
-    () => jobs.filter((j) => j.status === "running").length,
+    () => jobs.filter((j) => j.status === TaskState.RUNNING).length,
     [jobs]
   );
   const completedCount = reactExports.useMemo(
-    () => jobs.filter((j) => j.status === "complete").length,
+    () => jobs.filter((j) => j.status === JobStatus.COMPLETE).length,
     [jobs]
   );
   const filteredJobs = reactExports.useMemo(() => {
     switch (activeTab) {
       case "current":
-        return jobs.filter((j) => j.status === "running");
+        return jobs.filter((j) => j.status === TaskState.RUNNING);
       case "errors":
-        return jobs.filter((j) => j.status === "failed");
+        return jobs.filter((j) => j.status === TaskState.FAILED);
       case "complete":
-        return jobs.filter((j) => j.status === "complete");
+        return jobs.filter((j) => j.status === JobStatus.COMPLETE);
       default:
         return [];
     }
   }, [jobs, activeTab]);
-  const overallElapsed = (job) => jobCumulativeDurationMs(job, now);
   const runningJobs = reactExports.useMemo(
-    () => jobs.filter((j) => j.status === "running"),
+    () => jobs.filter((j) => j.status === TaskState.RUNNING),
     [jobs]
   );
   const aggregateProgress = reactExports.useMemo(() => {
@@ -21042,41 +21228,42 @@ function PromptPipelineDashboard({ isConnected }) {
               ")"
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(f, { value: "current", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            JobTable,
-            {
-              jobs: filteredJobs,
-              pipeline: null,
-              onOpenJob: openJob,
-              overallElapsed,
-              now
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(f, { value: "errors", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            JobTable,
-            {
-              jobs: filteredJobs,
-              pipeline: null,
-              onOpenJob: openJob,
-              overallElapsed,
-              now
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(f, { value: "complete", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            JobTable,
-            {
-              jobs: filteredJobs,
-              pipeline: null,
-              onOpenJob: openJob,
-              overallElapsed,
-              now
-            }
-          ) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(f, { value: "current", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JobTable, { jobs: filteredJobs, pipeline: null, onOpenJob: openJob }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(f, { value: "errors", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JobTable, { jobs: filteredJobs, pipeline: null, onOpenJob: openJob }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(f, { value: "complete", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JobTable, { jobs: filteredJobs, pipeline: null, onOpenJob: openJob }) })
         ]
       }
     )
   ] });
 }
+function areGeometriesEqual(prev, next, epsilon = 0.5) {
+  if (prev === next) return true;
+  if (!prev || !next) return false;
+  if (prev.itemsLength !== next.itemsLength) return false;
+  if (prev.effectiveCols !== next.effectiveCols) return false;
+  if (!areOverlayBoxesEqual(prev.overlayBox, next.overlayBox, epsilon)) {
+    return false;
+  }
+  const prevBoxes = prev.boxes;
+  const nextBoxes = next.boxes;
+  if (prevBoxes.length !== nextBoxes.length) return false;
+  for (let i2 = 0; i2 < prevBoxes.length; i2++) {
+    if (!areBoxesEqual(prevBoxes[i2], nextBoxes[i2], epsilon)) {
+      return false;
+    }
+  }
+  return true;
+}
+function areOverlayBoxesEqual(a2, b2, epsilon) {
+  return areNumbersClose(a2.left, b2.left, epsilon) && areNumbersClose(a2.top, b2.top, epsilon) && areNumbersClose(a2.width, b2.width, epsilon) && areNumbersClose(a2.height, b2.height, epsilon) && areNumbersClose(a2.right, b2.right, epsilon) && areNumbersClose(a2.bottom, b2.bottom, epsilon);
+}
+function areBoxesEqual(a2, b2, epsilon) {
+  if (!a2 || !b2) return a2 === b2;
+  return areNumbersClose(a2.left, b2.left, epsilon) && areNumbersClose(a2.top, b2.top, epsilon) && areNumbersClose(a2.width, b2.width, epsilon) && areNumbersClose(a2.height, b2.height, epsilon) && areNumbersClose(a2.right, b2.right, epsilon) && areNumbersClose(a2.bottom, b2.bottom, epsilon) && areNumbersClose(a2.headerMidY, b2.headerMidY, epsilon);
+}
+function areNumbersClose(a2, b2, epsilon) {
+  return Math.abs(a2 - b2) <= epsilon;
+}
 function TaskFilePane({
   isOpen,
   jobId,
@@ -21512,11 +21699,357 @@ function TaskFilePane({
     ] })
   ] });
 }
-const CATEGORY_KEYS = ["artifacts", "logs", "tmp"];
-const LEGACY_KEY_SET = /* @__PURE__ */ new Set([
-  "input",
-  "inputs",
-  "output",
+function TaskDetailSidebar({
+  open,
+  title,
+  status,
+  jobId,
+  taskId,
+  taskBody,
+  filesByTypeForItem = () => ({ artifacts: [], logs: [], tmp: [] }),
+  task,
+  onClose,
+  taskIndex
+  // Add taskIndex for ID compatibility
+}) {
+  const [filePaneType, setFilePaneType] = reactExports.useState("artifacts");
+  const [filePaneOpen, setFilePaneOpen] = reactExports.useState(false);
+  const [filePaneFilename, setFilePaneFilename] = reactExports.useState(null);
+  const closeButtonRef = reactExports.useRef(null);
+  const getHeaderClasses2 = (status2) => {
+    switch (status2) {
+      case TaskState.DONE:
+        return "bg-green-50 border-green-200 text-green-700";
+      case TaskState.RUNNING:
+        return "bg-amber-50 border-amber-200 text-amber-700";
+      case TaskState.FAILED:
+        return "bg-pink-50 border-pink-200 text-pink-700";
+      default:
+        return "bg-gray-100 border-gray-200 text-gray-700";
+    }
+  };
+  reactExports.useEffect(() => {
+    if (open && closeButtonRef.current) {
+      closeButtonRef.current.focus();
+    }
+  }, [open]);
+  reactExports.useEffect(() => {
+    if (open) {
+      setFilePaneType("artifacts");
+      setFilePaneOpen(false);
+      setFilePaneFilename(null);
+    }
+  }, [open]);
+  reactExports.useEffect(() => {
+    setFilePaneFilename(null);
+    setFilePaneOpen(false);
+  }, [filePaneType]);
+  const handleFileClick = (filename) => {
+    setFilePaneFilename(filename);
+    setFilePaneOpen(true);
+  };
+  const handleFilePaneClose = () => {
+    setFilePaneOpen(false);
+    setFilePaneFilename(null);
+  };
+  if (!open) {
+    return null;
+  }
+  const filesForStep = filesByTypeForItem(task);
+  const filesForTab = filesForStep[filePaneType] ?? [];
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "aside",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": `slide-over-title-${taskIndex}`,
+      "aria-hidden": false,
+      className: `fixed inset-y-0 right-0 z-[2000] w-full max-w-4xl bg-white border-l border-gray-200 transform transition-transform duration-300 ease-out translate-x-0`,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: `px-6 py-4 border-b flex items-center justify-between ${getHeaderClasses2(status)}`,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  id: `slide-over-title-${taskIndex}`,
+                  className: "text-lg font-semibold truncate",
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  ref: closeButtonRef,
+                  type: "button",
+                  "aria-label": "Close details",
+                  onClick: onClose,
+                  className: "rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 px-3 py-1.5 text-base",
+                  children: "×"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 space-y-8 overflow-y-auto h-full", children: [
+          status === TaskState.FAILED && taskBody && /* @__PURE__ */ jsxRuntimeExports.jsx("section", { "aria-label": "Error", children: /* @__PURE__ */ jsxRuntimeExports.jsx(n$2, { role: "alert", "aria-live": "assertive", children: /* @__PURE__ */ jsxRuntimeExports.jsx(u$1, { className: "whitespace-pre-wrap break-words", children: taskBody }) }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "mt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-base font-semibold text-gray-900", children: "Files" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex rounded-lg border border-gray-200 bg-gray-50 p-1", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: () => setFilePaneType("artifacts"),
+                  className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${filePaneType === "artifacts" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
+                  children: "Artifacts"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: () => setFilePaneType("logs"),
+                  className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${filePaneType === "logs" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
+                  children: "Logs"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: () => setFilePaneType("tmp"),
+                  className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${filePaneType === "tmp" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
+                  children: "Temp"
+                }
+              )
+            ] }) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-gray-600", children: [
+              filePaneType.charAt(0).toUpperCase() + filePaneType.slice(1),
+              " files for ",
+              taskId
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1", children: filesForTab.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-gray-500 italic py-4 text-center", children: [
+              "No ",
+              filePaneType,
+              " files available for this task"
+            ] }) : filesForTab.map((name) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: "flex items-center justify-between p-2 rounded border border-gray-200 hover:border-gray-300 hover:bg-gray-50 cursor-pointer transition-colors",
+                onClick: () => handleFileClick(name),
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: name }) })
+              },
+              `${filePaneType}-${name}`
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            TaskFilePane,
+            {
+              isOpen: filePaneOpen,
+              jobId,
+              taskId,
+              type: filePaneType,
+              filename: filePaneFilename,
+              onClose: handleFilePaneClose
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+React.memo(TaskDetailSidebar);
+function RestartJobModal({
+  open,
+  onClose,
+  onConfirm,
+  jobId,
+  taskId,
+  isSubmitting = false
+}) {
+  const modalRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    const handleKeyDown2 = (e2) => {
+      if (e2.key === "Escape" && open) {
+        e2.preventDefault();
+        onClose();
+      }
+    };
+    if (open) {
+      document.addEventListener("keydown", handleKeyDown2);
+      if (modalRef.current) {
+        modalRef.current.focus();
+      }
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown2);
+      };
+    }
+  }, [open, onClose]);
+  const handleKeyDown = (e2) => {
+    if (e2.key === "Enter" && !isSubmitting && open) {
+      e2.preventDefault();
+      onConfirm();
+    }
+  };
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center",
+      "aria-hidden": !open,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "absolute inset-0 bg-black/50",
+            onClick: onClose,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            ref: modalRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "restart-modal-title",
+            "aria-describedby": "restart-modal-description",
+            className: "relative bg-white rounded-lg shadow-2xl border border-gray-200 max-w-lg w-full mx-4 outline-none",
+            style: { minWidth: "320px", maxWidth: "560px" },
+            tabIndex: -1,
+            onKeyDown: handleKeyDown,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                r$8,
+                {
+                  id: "restart-modal-title",
+                  as: "h2",
+                  size: "5",
+                  className: "mb-4 text-gray-900",
+                  children: taskId ? `Restart from ${taskId}` : "Restart job (reset progress)"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(p$7, { id: "restart-modal-description", className: "mb-6", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { as: "p", className: "text-gray-700 mb-4", children: taskId ? `This will restart the job from the "${taskId}" task. Tasks before ${taskId} will remain completed, while ${taskId} and all subsequent tasks will be reset to pending. Files and artifacts are preserved. A new background run will start automatically. This cannot be undone.` : "This will clear the job's progress and active stage and reset all tasks to pending. Files and artifacts are preserved. A new background run will start automatically. This cannot be undone." }),
+                taskId && /* @__PURE__ */ jsxRuntimeExports.jsxs(p$b, { as: "p", className: "text-sm text-gray-600 mb-3", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Triggered from task:" }),
+                  " ",
+                  taskId
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { as: "p", className: "text-sm text-gray-500 italic", children: "Note: Job must be in current lifecycle and not running." })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(p$4, { gap: "3", justify: "end", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    onClick: onClose,
+                    disabled: isSubmitting,
+                    className: "min-w-[80px]",
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button,
+                  {
+                    variant: "destructive",
+                    onClick: onConfirm,
+                    disabled: isSubmitting,
+                    className: "min-w-[80px]",
+                    children: isSubmitting ? "Restarting..." : "Restart"
+                  }
+                )
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  ) });
+}
+async function restartJob(jobId, opts = {}) {
+  const options = {
+    clearTokenUsage: true,
+    ...opts.options
+  };
+  const requestBody = opts.fromTask ? { fromTask: opts.fromTask, options } : { mode: "clean-slate", options };
+  try {
+    const response = await fetch(
+      `/api/jobs/${encodeURIComponent(jobId)}/restart`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(requestBody)
+      }
+    );
+    if (!response.ok) {
+      let errorData;
+      try {
+        errorData = await response.json();
+      } catch {
+        errorData = { message: response.statusText };
+      }
+      throw {
+        code: errorData.code || getErrorCodeFromStatus(response.status),
+        message: getRestartErrorMessage(errorData, response.status),
+        status: response.status
+      };
+    }
+    return await response.json();
+  } catch (error) {
+    if (error.code && error.message) {
+      throw error;
+    }
+    throw {
+      code: "network_error",
+      message: error.message || "Failed to connect to server"
+    };
+  }
+}
+function getErrorCodeFromStatus(status) {
+  switch (status) {
+    case 404:
+      return "job_not_found";
+    case 409:
+      return "conflict";
+    case 500:
+      return "spawn_failed";
+    default:
+      return "unknown_error";
+  }
+}
+function getRestartErrorMessage(errorData, status) {
+  if (status === 409) {
+    if (errorData.code === "job_running") {
+      return "Job is currently running; restart is unavailable.";
+    }
+    if (errorData.code === "unsupported_lifecycle") {
+      return "Job must be in current to restart.";
+    }
+    if (errorData.message?.includes("job_running")) {
+      return "Job is currently running; restart is unavailable.";
+    }
+    if (errorData.message?.includes("unsupported_lifecycle")) {
+      return "Job must be in current to restart.";
+    }
+  }
+  if (status === 404) {
+    return "Job not found.";
+  }
+  if (status === 500) {
+    return "Failed to start restart. Try again.";
+  }
+  return errorData.message || "Failed to restart job.";
+}
+const CATEGORY_KEYS = ["artifacts", "logs", "tmp"];
+const LEGACY_KEY_SET = /* @__PURE__ */ new Set([
+  "input",
+  "inputs",
+  "output",
   "outputs",
   "legacyInput",
   "legacyOutput",
@@ -21613,6 +22146,10 @@ function getTaskFilesForTask(job, taskId) {
   console.debug("[getTaskFilesForTask] Task files result:", { taskId, result });
   return result;
 }
+const prefersReducedMotion = () => {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+};
 function upperFirst(s2) {
   return typeof s2 === "string" && s2.length > 0 ? s2.charAt(0).toUpperCase() + s2.slice(1) : s2;
 }
@@ -21635,26 +22172,136 @@ function formatStepName(item, idx) {
   const raw = item.title ?? item.id ?? `Step ${idx + 1}`;
   return upperFirst(item.title ? item.title : raw);
 }
-const createDAGGridLogger = (jobId) => {
-  const prefix = `[DAGGrid:${jobId || "unknown"}]`;
-  return {
-    log: (message, data = null) => {
-      console.log(`${prefix} ${message}`, data ? data : "");
-    },
-    warn: (message, data = null) => {
-      console.warn(`${prefix} ${message}`, data ? data : "");
-    },
-    error: (message, data = null) => {
-      console.error(`${prefix} ${message}`, data ? data : "");
-    },
-    group: (label) => console.group(`${prefix} ${label}`),
-    groupEnd: () => console.groupEnd(),
-    table: (data, title) => {
-      console.log(`${prefix} ${title}:`);
-      console.table(data);
-    }
-  };
+const getHeaderClasses = (status) => {
+  switch (status) {
+    case TaskState.DONE:
+      return "bg-green-50 border-green-200 text-green-700";
+    case TaskState.RUNNING:
+      return "bg-amber-50 border-amber-200 text-amber-700";
+    case TaskState.FAILED:
+      return "bg-pink-50 border-pink-200 text-pink-700";
+    default:
+      return "bg-gray-100 border-gray-200 text-gray-700";
+  }
 };
+const canShowRestart = (status) => {
+  return status === TaskState.FAILED || status === TaskState.DONE;
+};
+const TaskCard = reactExports.memo(function TaskCard2({
+  item,
+  idx,
+  nodeRef,
+  status,
+  isActive,
+  canRestart,
+  isSubmitting,
+  getRestartDisabledReason,
+  onClick,
+  onKeyDown,
+  handleRestartClick
+}) {
+  const { startMs, endMs } = taskToTimerProps(item);
+  const reducedMotion = prefersReducedMotion();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      ref: nodeRef,
+      role: "listitem",
+      "aria-current": isActive ? "step" : void 0,
+      tabIndex: 0,
+      onClick,
+      onKeyDown,
+      className: `cursor-pointer rounded-lg border border-gray-400 ${status === TaskState.PENDING ? "bg-gray-50" : "bg-white"} overflow-hidden flex flex-col ${reducedMotion ? "" : "transition-all duration-200 ease-in-out"} outline outline-2 outline-transparent hover:outline-gray-400/70 focus-visible:outline-blue-500/60`,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            "data-role": "card-header",
+            className: `rounded-t-lg px-4 py-2 border-b flex items-center justify-between gap-3 ${reducedMotion ? "" : "transition-opacity duration-300 ease-in-out"} ${getHeaderClasses(status)}`,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium truncate", children: formatStepName(item, idx) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2", children: status === TaskState.RUNNING ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative h-4 w-4", "aria-label": "Active", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Active" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute inset-0 rounded-full border-2 border-amber-200" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "span",
+                    {
+                      className: `absolute inset-0 rounded-full border-2 border-transparent border-t-amber-600 ${reducedMotion ? "" : "animate-spin"}`
+                    }
+                  )
+                ] }),
+                item.stage && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "span",
+                  {
+                    className: "text-[11px] font-medium opacity-80 truncate uppercase tracking-wide",
+                    title: item.stage,
+                    children: formatStageLabel(item.stage)
+                  }
+                ),
+                startMs && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  TimerText,
+                  {
+                    startMs,
+                    granularity: "second",
+                    className: "text-[11px] opacity-80"
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "span",
+                  {
+                    className: `text-[11px] uppercase tracking-wide opacity-80${reducedMotion ? "" : " transition-opacity duration-200"}`,
+                    children: [
+                      status,
+                      status === TaskState.FAILED && item.stage && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                        "span",
+                        {
+                          className: "text-[11px] font-medium opacity-80 truncate ml-2 uppercase tracking-wide",
+                          title: item.stage,
+                          children: [
+                            "(",
+                            formatStageLabel(item.stage),
+                            ")"
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                status === TaskState.DONE && startMs && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  TimerText,
+                  {
+                    startMs,
+                    endMs: endMs || item.finishedAt,
+                    granularity: "minute",
+                    className: "text-[11px] opacity-80"
+                  }
+                )
+              ] }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4", children: [
+          item.subtitle && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600", children: item.subtitle }),
+          item.body && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-sm text-gray-700", children: item.body }),
+          canShowRestart(status) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-3 pt-3 border-t border-gray-100", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: (e2) => handleRestartClick(e2, item.id),
+              disabled: !canRestart || isSubmitting,
+              className: "text-xs cursor-pointer disabled:cursor-not-allowed",
+              title: !canRestart ? getRestartDisabledReason() : `Restart job from ${item.id}`,
+              children: "Restart"
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+});
 function DAGGrid({
   items,
   cols = 3,
@@ -21663,28 +22310,19 @@ function DAGGrid({
   jobId,
   filesByTypeForItem = () => createEmptyTaskFiles()
 }) {
-  const logger = React.useMemo(() => createDAGGridLogger(jobId), [jobId]);
   const overlayRef = reactExports.useRef(null);
   const gridRef = reactExports.useRef(null);
   const nodeRefs = reactExports.useRef([]);
   const [lines, setLines] = reactExports.useState([]);
   const [effectiveCols, setEffectiveCols] = reactExports.useState(cols);
-  const [openIdx, setOpenIdx] = reactExports.useState(null);
-  const [selectedFile, setSelectedFile] = reactExports.useState(null);
-  const [filePaneOpen, setFilePaneOpen] = reactExports.useState(false);
-  const [filePaneType, setFilePaneType] = reactExports.useState("artifacts");
-  const [filePaneFilename, setFilePaneFilename] = reactExports.useState(null);
-  React.useEffect(() => {
-    logger.group("Component Render");
-    logger.log("Props received:", {
-      itemCount: items?.length,
-      cols,
-      activeIndex,
-      jobId
-    });
-    logger.log("Items data:", items);
-    logger.groupEnd();
-  }, [items, cols, activeIndex, jobId, logger]);
+  const [openIdx, setOpenIdx] = reactExports.useState(-1);
+  const [restartModalOpen, setRestartModalOpen] = reactExports.useState(false);
+  const [restartTaskId, setRestartTaskId] = reactExports.useState(null);
+  const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
+  const [alertMessage, setAlertMessage] = reactExports.useState(null);
+  const [alertType, setAlertType] = reactExports.useState("info");
+  const prevGeometryRef = reactExports.useRef(null);
+  const rafRef = reactExports.useRef(null);
   nodeRefs.current = reactExports.useMemo(
     () => items.map((_, i2) => nodeRefs.current[i2] ?? reactExports.createRef()),
     [items.length]
@@ -21710,9 +22348,10 @@ function DAGGrid({
       const end = Math.min(start + effectiveCols, items.length);
       const slice = Array.from({ length: end - start }, (_, k) => start + k);
       const rowLen = slice.length;
-      const pad = Math.max(0, effectiveCols - rowLen);
-      if (r2 % 2 === 1) {
+      const isReversedRow = r2 % 2 === 1;
+      if (isReversedRow) {
         const reversed = slice.reverse();
+        const pad = effectiveCols - rowLen;
         order.push(...Array(pad).fill(-1), ...reversed);
       } else {
         order.push(...slice);
@@ -21724,11 +22363,11 @@ function DAGGrid({
     if (typeof window === "undefined" || !overlayRef.current || items.length === 0) {
       return;
     }
-    let isComputing = false;
     const compute = () => {
-      if (isComputing) return;
-      isComputing = true;
-      try {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+      rafRef.current = requestAnimationFrame(() => {
         if (!overlayRef.current) return;
         const overlayBox = overlayRef.current.getBoundingClientRect();
         const boxes = nodeRefs.current.map((r2) => {
@@ -21750,6 +22389,17 @@ function DAGGrid({
             headerMidY
           };
         });
+        const currentGeometry = {
+          overlayBox,
+          boxes: boxes.filter(Boolean),
+          effectiveCols,
+          itemsLength: items.length
+        };
+        const geometryChanged = !prevGeometryRef.current || !areGeometriesEqual(prevGeometryRef.current, currentGeometry);
+        if (!geometryChanged) {
+          rafRef.current = null;
+          return;
+        }
         const newLines = [];
         for (let i2 = 0; i2 < items.length - 1; i2++) {
           const a2 = boxes[i2];
@@ -21784,10 +22434,10 @@ function DAGGrid({
             });
           }
         }
+        prevGeometryRef.current = currentGeometry;
         setLines(newLines);
-      } finally {
-        isComputing = false;
-      }
+        rafRef.current = null;
+      });
     };
     compute();
     let ro = null;
@@ -21804,66 +22454,147 @@ function DAGGrid({
       if (ro) ro.disconnect();
       window.removeEventListener("resize", handleResize);
       window.removeEventListener("scroll", handleScroll, true);
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
     };
   }, [items, effectiveCols, visualOrder]);
   const getStatus = (index2) => {
     const item = items[index2];
     const s2 = item?.status;
-    if (s2 === "failed") return "failed";
-    if (s2 === "done") return "done";
-    if (s2 === "running") return "running";
+    if (s2 === TaskState.FAILED) return TaskState.FAILED;
+    if (s2 === TaskState.DONE) return TaskState.DONE;
+    if (s2 === TaskState.RUNNING) return TaskState.RUNNING;
     if (typeof activeIndex === "number") {
-      if (index2 < activeIndex) return "done";
-      if (index2 === activeIndex) return "running";
-      return "pending";
-    }
-    return "pending";
-  };
-  const getHeaderClasses = (status) => {
-    switch (status) {
-      case "done":
-        return "bg-green-50 border-green-200 text-green-700";
-      case "running":
-        return "bg-amber-50 border-amber-200 text-amber-700";
-      case "failed":
-        return "bg-pink-50 border-pink-200 text-pink-700";
-      default:
-        return "bg-gray-100 border-gray-200 text-gray-700";
+      if (index2 < activeIndex) return TaskState.DONE;
+      if (index2 === activeIndex) return TaskState.RUNNING;
+      return TaskState.PENDING;
     }
+    return TaskState.PENDING;
   };
   React.useEffect(() => {
     const handleKeyDown = (e2) => {
-      if (e2.key === "Escape" && openIdx !== null) {
-        setOpenIdx(null);
-        setSelectedFile(null);
+      if (e2.key === "Escape" && openIdx !== -1) {
+        setOpenIdx(-1);
       }
     };
-    if (openIdx !== null) {
+    if (openIdx !== -1) {
       document.addEventListener("keydown", handleKeyDown);
       return () => document.removeEventListener("keydown", handleKeyDown);
     }
   }, [openIdx]);
-  const closeButtonRef = reactExports.useRef(null);
-  React.useEffect(() => {
-    if (openIdx !== null && closeButtonRef.current) {
-      closeButtonRef.current.focus();
+  const handleRestartClick = (e2, taskId) => {
+    e2.stopPropagation();
+    setRestartTaskId(taskId);
+    setRestartModalOpen(true);
+  };
+  const handleRestartConfirm = async () => {
+    if (!jobId || isSubmitting) return;
+    setIsSubmitting(true);
+    setAlertMessage(null);
+    try {
+      const restartOptions = {};
+      if (restartTaskId) {
+        restartOptions.fromTask = restartTaskId;
+      }
+      await restartJob(jobId, restartOptions);
+      const successMessage = restartTaskId ? `Restart requested from ${restartTaskId}. The job will start from that task in the background.` : "Restart requested. The job will reset to pending and start in the background.";
+      setAlertMessage(successMessage);
+      setAlertType("success");
+      setRestartModalOpen(false);
+      setRestartTaskId(null);
+    } catch (error) {
+      let message = "Failed to start restart. Try again.";
+      let type = "error";
+      switch (error.code) {
+        case "job_running":
+          message = "Job is currently running; restart is unavailable.";
+          type = "warning";
+          break;
+        case "unsupported_lifecycle":
+          message = "Job must be in current lifecycle to restart.";
+          type = "warning";
+          break;
+        case "job_not_found":
+          message = "Job not found.";
+          type = "error";
+          break;
+        case "spawn_failed":
+          message = "Failed to start restart. Try again.";
+          type = "error";
+          break;
+        default:
+          message = error.message || "An unexpected error occurred.";
+          type = "error";
+      }
+      setAlertMessage(message);
+      setAlertType(type);
+    } finally {
+      setIsSubmitting(false);
     }
-  }, [openIdx]);
-  React.useEffect(() => {
-    setFilePaneFilename(null);
-    setFilePaneOpen(false);
-  }, [filePaneType]);
+  };
+  const handleRestartCancel = () => {
+    setRestartModalOpen(false);
+    setRestartTaskId(null);
+  };
   React.useEffect(() => {
-    if (openIdx === null) {
-      setFilePaneFilename(null);
-      setFilePaneOpen(false);
-      return;
-    }
-    setFilePaneType("artifacts");
-    setFilePaneFilename(null);
-    setFilePaneOpen(false);
-  }, [openIdx]);
+    if (alertMessage) {
+      const timer = setTimeout(() => {
+        setAlertMessage(null);
+      }, 5e3);
+      return () => clearTimeout(timer);
+    }
+  }, [alertMessage]);
+  const isRestartEnabled = React.useCallback(() => {
+    const isJobRunning = items.some(
+      (item) => item?.state === TaskState.RUNNING
+    );
+    const hasRunningTask = items.some(
+      (item) => item?.status === TaskState.RUNNING
+    );
+    const jobLifecycle = items[0]?.lifecycle || "current";
+    return jobLifecycle === "current" && !isJobRunning && !hasRunningTask;
+  }, [items]);
+  const getRestartDisabledReason = React.useCallback(() => {
+    const isJobRunning = items.some(
+      (item) => item?.state === TaskState.RUNNING
+    );
+    const hasRunningTask = items.some(
+      (item) => item?.status === TaskState.RUNNING
+    );
+    const jobLifecycle = items[0]?.lifecycle || "current";
+    if (isJobRunning || hasRunningTask) return "Job is currently running";
+    if (jobLifecycle !== "current") return "Job must be in current lifecycle";
+    return "";
+  }, [items]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full", role: "list", children: [
+    alertMessage && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: `fixed top-4 right-4 z-[3000] max-w-sm p-4 rounded-lg shadow-lg border ${alertType === "success" ? "bg-green-50 border-green-200 text-green-800" : alertType === "error" ? "bg-red-50 border-red-200 text-red-800" : alertType === "warning" ? "bg-yellow-50 border-yellow-200 text-yellow-800" : "bg-blue-50 border-blue-200 text-blue-800"}`,
+        role: "alert",
+        "aria-live": "polite",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium", children: alertMessage }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              onClick: () => setAlertMessage(null),
+              className: "ml-3 flex-shrink-0 inline-flex text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
+              "aria-label": "Dismiss notification",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "h-4 w-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                  clipRule: "evenodd"
+                }
+              ) })
+            }
+          )
+        ] })
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "svg",
       {
@@ -21882,7 +22613,8 @@ function DAGGrid({
               markerHeight: "8",
               orient: "auto",
               markerUnits: "userSpaceOnUse",
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: "#9ca3af" })
+              className: "text-gray-400",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M 0 0 L 10 5 L 0 10 z" })
             }
           ) }),
           lines.map((line, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -21891,9 +22623,9 @@ function DAGGrid({
               d: line.d,
               fill: "none",
               stroke: "currentColor",
-              strokeWidth: "3",
-              strokeLinecap: "round",
-              className: "text-gray-300",
+              strokeWidth: "1",
+              strokeLinecap: "square",
+              className: "text-gray-400",
               strokeLinejoin: "round",
               markerEnd: "url(#arrow)"
             }
@@ -21920,195 +22652,58 @@ function DAGGrid({
           const item = items[idx];
           const status = getStatus(idx);
           const isActive = idx === activeIndex;
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "div",
+          const canRestart = isRestartEnabled();
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            TaskCard,
             {
-              ref: nodeRefs.current[idx],
-              role: "listitem",
-              "aria-current": isActive ? "step" : void 0,
-              tabIndex: 0,
+              idx,
+              nodeRef: nodeRefs.current[idx],
+              status,
+              isActive,
+              canRestart,
+              isSubmitting,
+              getRestartDisabledReason,
               onClick: () => {
                 setOpenIdx(idx);
-                setSelectedFile(null);
               },
               onKeyDown: (e2) => {
                 if (e2.key === "Enter" || e2.key === " ") {
                   e2.preventDefault();
                   setOpenIdx(idx);
-                  setSelectedFile(null);
                 }
               },
-              className: `cursor-pointer rounded-lg border border-gray-400 bg-white overflow-hidden flex flex-col transition outline outline-2 outline-transparent hover:outline-gray-400/70 focus-visible:outline-blue-500/60 ${cardClass}`,
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  "div",
-                  {
-                    "data-role": "card-header",
-                    className: `rounded-t-lg px-4 py-2 border-b flex items-center justify-between gap-3 ${getHeaderClasses(status)}`,
-                    children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium truncate", children: formatStepName(item, idx) }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2", children: status === "running" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative h-4 w-4", "aria-label": "Running", children: [
-                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Running" }),
-                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute inset-0 rounded-full border-2 border-amber-200" }),
-                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute inset-0 rounded-full border-2 border-transparent border-t-amber-600 animate-spin" })
-                        ] }),
-                        item.stage && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                          "span",
-                          {
-                            className: "text-[11px] font-medium opacity-80 truncate",
-                            title: item.stage,
-                            children: formatStageLabel(item.stage)
-                          }
-                        )
-                      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[11px] uppercase tracking-wide opacity-80", children: [
-                        status,
-                        status === "failed" && item.stage && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                          "span",
-                          {
-                            className: "text-[11px] font-medium opacity-80 truncate ml-2",
-                            title: item.stage,
-                            children: [
-                              "(",
-                              formatStageLabel(item.stage),
-                              ")"
-                            ]
-                          }
-                        )
-                      ] }) })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4", children: [
-                  item.subtitle && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600", children: item.subtitle }),
-                  item.body && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-sm text-gray-700", children: item.body })
-                ] })
-              ]
+              handleRestartClick,
+              item
             },
             item.id ?? idx
           );
         })
       }
     ),
+    openIdx !== -1 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      TaskDetailSidebar,
+      {
+        open: openIdx !== -1,
+        title: formatStepName(items[openIdx], openIdx),
+        status: getStatus(openIdx),
+        jobId,
+        taskId: items[openIdx]?.id || `task-${openIdx}`,
+        taskBody: items[openIdx]?.body || null,
+        filesByTypeForItem,
+        task: items[openIdx],
+        taskIndex: openIdx,
+        onClose: () => setOpenIdx(-1)
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "aside",
+      RestartJobModal,
       {
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": `slide-over-title-${openIdx}`,
-        "aria-hidden": openIdx === null,
-        className: `fixed inset-y-0 right-0 z-[2000] w-full max-w-4xl bg-white border-l border-gray-200 transform transition-transform duration-300 ease-out ${openIdx !== null ? "translate-x-0" : "translate-x-full"}`,
-        children: openIdx !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "div",
-            {
-              className: `px-6 py-4 border-b flex items-center justify-between ${getHeaderClasses(getStatus(openIdx))}`,
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    id: `slide-over-title-${openIdx}`,
-                    className: "text-lg font-semibold truncate",
-                    children: formatStepName(items[openIdx], openIdx)
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "button",
-                  {
-                    ref: closeButtonRef,
-                    type: "button",
-                    "aria-label": "Close details",
-                    onClick: () => {
-                      setOpenIdx(null);
-                      setSelectedFile(null);
-                    },
-                    className: "rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 px-3 py-1.5 text-base",
-                    children: "×"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 space-y-8 overflow-y-auto h-full", children: [
-            items[openIdx]?.status === "failed" && items[openIdx]?.body && /* @__PURE__ */ jsxRuntimeExports.jsx("section", { "aria-label": "Error", children: /* @__PURE__ */ jsxRuntimeExports.jsx(n$2, { role: "alert", "aria-live": "assertive", children: /* @__PURE__ */ jsxRuntimeExports.jsx(u$1, { className: "whitespace-pre-wrap break-words", children: items[openIdx].body }) }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "mt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-base font-semibold text-gray-900", children: "Files" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex rounded-lg border border-gray-200 bg-gray-50 p-1", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "button",
-                  {
-                    onClick: () => setFilePaneType("artifacts"),
-                    className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${filePaneType === "artifacts" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
-                    children: "Artifacts"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "button",
-                  {
-                    onClick: () => setFilePaneType("logs"),
-                    className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${filePaneType === "logs" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
-                    children: "Logs"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "button",
-                  {
-                    onClick: () => setFilePaneType("tmp"),
-                    className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${filePaneType === "tmp" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
-                    children: "Temp"
-                  }
-                )
-              ] }) })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-gray-600", children: [
-                filePaneType.charAt(0).toUpperCase() + filePaneType.slice(1),
-                " ",
-                "files for ",
-                items[openIdx]?.id || `Task ${openIdx + 1}`
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1", children: (() => {
-                const filesForStep = filesByTypeForItem(items[openIdx]);
-                const filesForTab = filesForStep[filePaneType] ?? [];
-                if (filesForTab.length === 0) {
-                  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-gray-500 italic py-4 text-center", children: [
-                    "No ",
-                    filePaneType,
-                    " files available for this task"
-                  ] });
-                }
-                return filesForTab.map((name) => {
-                  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "div",
-                    {
-                      className: "flex items-center justify-between p-2 rounded border border-gray-200 hover:border-gray-300 hover:bg-gray-50 cursor-pointer transition-colors",
-                      onClick: () => {
-                        setFilePaneFilename(name);
-                        setFilePaneOpen(true);
-                      },
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: name }) })
-                    },
-                    `${filePaneType}-${name}`
-                  );
-                });
-              })() })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              TaskFilePane,
-              {
-                isOpen: filePaneOpen,
-                jobId,
-                taskId: items[openIdx]?.id || `task-${openIdx}`,
-                type: filePaneType,
-                filename: filePaneFilename,
-                onClose: () => {
-                  setFilePaneOpen(false);
-                  setFilePaneFilename(null);
-                }
-              }
-            )
-          ] })
-        ] })
+        open: restartModalOpen,
+        onClose: handleRestartCancel,
+        onConfirm: handleRestartConfirm,
+        jobId,
+        taskId: restartTaskId,
+        isSubmitting
       }
     )
   ] });
@@ -22149,7 +22744,7 @@ function computeDagItems(job, pipeline) {
     const jobTask = jobTasks[taskId];
     return {
       id: taskId,
-      status: jobTask ? jobTask.state : "pending",
+      status: jobTask ? jobTask.state : TaskState.PENDING,
       source: "pipeline",
       stage: computeTaskStage(job, taskId)
     };
@@ -22172,14 +22767,16 @@ function computeDagItems(job, pipeline) {
 function computeActiveIndex(items) {
   if (!items || items.length === 0) return 0;
   const firstRunningIndex = items.findIndex(
-    (item) => item.status === "running"
+    (item) => item.status === TaskState.RUNNING
   );
   if (firstRunningIndex !== -1) return firstRunningIndex;
-  const firstFailedIndex = items.findIndex((item) => item.status === "failed");
+  const firstFailedIndex = items.findIndex(
+    (item) => item.status === TaskState.FAILED
+  );
   if (firstFailedIndex !== -1) return firstFailedIndex;
   let lastDoneIndex = -1;
   items.forEach((item, index2) => {
-    if (item.status === "done") lastDoneIndex = index2;
+    if (item.status === TaskState.DONE) lastDoneIndex = index2;
   });
   if (lastDoneIndex !== -1) return lastDoneIndex;
   return 0;
@@ -22198,11 +22795,7 @@ function formatTokensCompact(n2) {
   }
   return `${n2} tokens`;
 }
-function JobDetail({ job, pipeline, onClose, onResume }) {
-  const now = useTicker(1e3);
-  const [resumeFrom, setResumeFrom] = reactExports.useState(
-    pipeline?.tasks?.[0] ? typeof pipeline.tasks[0] === "string" ? pipeline.tasks[0] : pipeline.tasks[0].id ?? pipeline.tasks[0].name ?? "" : ""
-  );
+function JobDetail({ job, pipeline }) {
   const taskById = React.useMemo(() => {
     const tasks = job?.tasks;
     let result;
@@ -22222,11 +22815,6 @@ function JobDetail({ job, pipeline, onClose, onResume }) {
     }
     return result;
   }, [job?.tasks]);
-  reactExports.useEffect(() => {
-    setResumeFrom(
-      pipeline?.tasks?.[0] ? typeof pipeline.tasks[0] === "string" ? pipeline.tasks[0] : pipeline.tasks[0].id ?? pipeline.tasks[0].name ?? "" : ""
-    );
-  }, [job.id, pipeline?.tasks?.length]);
   const computedPipeline = React.useMemo(() => {
     let result;
     if (pipeline?.tasks) {
@@ -22242,18 +22830,9 @@ function JobDetail({ job, pipeline, onClose, onResume }) {
     }
     return result;
   }, [pipeline, job?.tasks]);
-  const dagItems = React.useMemo(() => {
+  const stableDagItems = React.useMemo(() => {
     const rawDagItems = computeDagItems(job, computedPipeline);
-    const processedItems = rawDagItems.map((item, index2) => {
-      {
-        console.debug("[JobDetail] computed DAG item", {
-          id: item.id,
-          status: item.status,
-          stage: item.stage,
-          jobHasTasks: !!job?.tasks,
-          taskKeys: job?.tasks ? Object.keys(job.tasks) : null
-        });
-      }
+    return rawDagItems.map((item, index2) => {
       const task = taskById[item.id];
       const taskConfig = task?.config || {};
       const subtitleParts = [];
@@ -22263,18 +22842,9 @@ function JobDetail({ job, pipeline, onClose, onResume }) {
       if (taskConfig?.temperature != null) {
         subtitleParts.push(`temp ${taskConfig.temperature}`);
       }
-      if (task?.attempts != null) {
-        subtitleParts.push(`${task.attempts} attempts`);
-      }
       if (task?.refinementAttempts != null) {
         subtitleParts.push(`${task.refinementAttempts} refinements`);
       }
-      if (task?.startedAt) {
-        const durationMs = taskDisplayDurationMs(task, now);
-        if (durationMs > 0) {
-          subtitleParts.push(fmtDuration(durationMs));
-        }
-      }
       const taskBreakdown = job?.costs?.taskBreakdown?.[item.id]?.summary || {};
       if (taskBreakdown.totalTokens > 0) {
         subtitleParts.push(formatTokensCompact(taskBreakdown.totalTokens));
@@ -22284,16 +22854,29 @@ function JobDetail({ job, pipeline, onClose, onResume }) {
       }
       const errorMsg = task?.error?.message;
       const body = (item.status === "failed" || item.status === "error") && errorMsg ? errorMsg : null;
-      const resultItem = {
+      return {
         ...item,
         title: typeof item.id === "string" ? item.id : item.id?.name || item.id?.id || `Task ${item.id}`,
         subtitle: subtitleParts.length > 0 ? subtitleParts.join(" · ") : null,
-        body
+        body,
+        startedAt: task?.startedAt,
+        endedAt: task?.endedAt
       };
-      return resultItem;
     });
-    return processedItems;
-  }, [job, computedPipeline, taskById, now]);
+  }, [job, computedPipeline, taskById]);
+  const prevDagItemsRef = React.useRef([]);
+  const dagItems = React.useMemo(() => {
+    const prevItems = prevDagItemsRef.current;
+    const newItems = stableDagItems.map((item, index2) => {
+      const prevItem = prevItems[index2];
+      if (prevItem && prevItem.id === item.id && prevItem.status === item.status && prevItem.stage === item.stage && prevItem.title === item.title && prevItem.subtitle === item.subtitle && prevItem.body === item.body) {
+        return prevItem;
+      }
+      return item;
+    });
+    prevDagItemsRef.current = newItems;
+    return newItems;
+  }, [stableDagItems]);
   const activeIndex = React.useMemo(() => {
     const index2 = computeActiveIndex(dagItems);
     return index2;
@@ -22305,7 +22888,6 @@ function JobDetail({ job, pipeline, onClose, onResume }) {
     },
     [job]
   );
-  console.log("dagItems", dagItems);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     DAGGrid,
     {
@@ -22317,40 +22899,6 @@ function JobDetail({ job, pipeline, onClose, onResume }) {
   ) });
 }
 const REFRESH_DEBOUNCE_MS = 200;
-const createHookLogger = (jobId) => {
-  const prefix = `[useJobDetailWithUpdates:${jobId || "unknown"}]`;
-  return {
-    log: (message, data = null) => {
-      console.log(`${prefix} ${message}`, data ? data : "");
-    },
-    warn: (message, data = null) => {
-      console.warn(`${prefix} ${message}`, data ? data : "");
-    },
-    error: (message, data = null) => {
-      console.error(`${prefix} ${message}`, data ? data : "");
-    },
-    group: (label) => console.group(`${prefix} ${label}`),
-    groupEnd: () => console.groupEnd(),
-    table: (data, title) => {
-      console.log(`${prefix} ${title}:`);
-      console.table(data);
-    },
-    sse: (eventType, eventData) => {
-      console.log(
-        `%c${prefix} SSE Event: ${eventType}`,
-        "color: #0066cc; font-weight: bold;",
-        eventData
-      );
-    },
-    state: (stateName, value) => {
-      console.log(
-        `%c${prefix} State Change: ${stateName}`,
-        "color: #006600; font-weight: bold;",
-        value
-      );
-    }
-  };
-};
 async function fetchJobDetail(jobId, { signal } = {}) {
   const response = await fetch(`/api/jobs/${jobId}`, { signal });
   if (!response.ok) {
@@ -22435,89 +22983,63 @@ function matchesJobTasksStatusPath(path, jobId) {
   }
 }
 function useJobDetailWithUpdates(jobId) {
-  const logger = reactExports.useMemo(() => createHookLogger(jobId), [jobId]);
   const [data, setData] = reactExports.useState(null);
   const [loading, setLoading] = reactExports.useState(true);
   const [error, setError] = reactExports.useState(null);
   const [connectionStatus, setConnectionStatus] = reactExports.useState("disconnected");
+  const [isRefreshing, setIsRefreshing] = reactExports.useState(false);
+  const [isPending, startTransition] = reactExports.useTransition();
+  const [isHydrated, setIsHydrated] = reactExports.useState(false);
   const esRef = reactExports.useRef(null);
   const reconnectTimer = reactExports.useRef(null);
   const hydratedRef = reactExports.useRef(false);
   const eventQueue = reactExports.useRef([]);
   const mountedRef = reactExports.useRef(true);
   const refetchTimerRef = reactExports.useRef(null);
-  reactExports.useEffect(() => {
-    logger.group("Hook Initialization");
-    logger.log("Job ID:", jobId);
-    logger.log("Initial state:", { data, loading, error, connectionStatus });
-    logger.groupEnd();
-  }, [jobId, logger]);
-  reactExports.useEffect(() => {
-    logger.state("data", data);
-  }, [data, logger]);
-  reactExports.useEffect(() => {
-    logger.state("loading", loading);
-  }, [loading, logger]);
-  reactExports.useEffect(() => {
-    logger.state("error", error);
-  }, [error, logger]);
-  reactExports.useEffect(() => {
-    logger.state("connectionStatus", connectionStatus);
-  }, [connectionStatus, logger]);
   const scheduleDebouncedRefetch = reactExports.useCallback(
     (context = {}) => {
-      logger.group("Debounced Refetch Request");
-      logger.log("Request context:", context);
-      logger.log("Scheduling debounced refetch");
       if (refetchTimerRef.current) {
-        logger.log("Clearing existing refetch timer");
         clearTimeout(refetchTimerRef.current);
       }
       refetchTimerRef.current = setTimeout(async () => {
         if (!mountedRef.current || !hydratedRef.current) {
-          logger.warn(
-            "Refetch aborted - component not mounted or not hydrated",
-            { mounted: mountedRef.current, hydrated: hydratedRef.current }
-          );
-          logger.groupEnd();
           return;
         }
-        logger.log("Executing debounced refetch");
-        logger.log("Refetch jobId:", jobId);
         const abortController = new AbortController();
         try {
+          startTransition(() => {
+            setIsRefreshing(true);
+          });
           const jobData = await fetchJobDetail(jobId, {
             signal: abortController.signal
           });
-          logger.log("Refetch response received");
-          logger.log("Refetch job data preview:", {
-            status: jobData?.status,
-            hasTasks: !!jobData?.tasks,
-            taskKeys: jobData?.tasks ? Object.keys(jobData.tasks) : []
-          });
           if (mountedRef.current) {
-            logger.log("Refetch successful, updating data");
-            setData(jobData);
-            setError(null);
-          } else {
-            logger.warn("Refetch completed but component is unmounted");
+            startTransition(() => {
+              setData(jobData);
+              setError(null);
+              setIsRefreshing(false);
+            });
           }
         } catch (err) {
-          logger.error("Failed to refetch job detail:", err);
-          if (mountedRef.current) setError(err.message);
+          if (mountedRef.current) {
+            startTransition(() => {
+              setError(err.message);
+              setIsRefreshing(false);
+            });
+          }
         } finally {
           refetchTimerRef.current = null;
-          logger.groupEnd();
         }
       }, REFRESH_DEBOUNCE_MS);
     },
-    [jobId, logger]
+    [jobId]
   );
   reactExports.useEffect(() => {
     setData(null);
     setLoading(true);
     setError(null);
     setConnectionStatus("disconnected");
+    setIsHydrated(false);
     hydratedRef.current = false;
     eventQueue.current = [];
     if (refetchTimerRef.current) {
@@ -22528,92 +23050,80 @@ function useJobDetailWithUpdates(jobId) {
   reactExports.useEffect(() => {
     if (!jobId || !mountedRef.current) return;
     const doFetch = async () => {
-      logger.group("Initial Data Fetch");
       try {
-        setLoading(true);
+        if (!hydratedRef.current) {
+          setLoading(true);
+        }
         setError(null);
-        logger.log("Starting initial job data fetch");
         const jobData = await fetchJobDetail(jobId);
-        logger.log("Initial fetch successful", jobData);
         let finalData = jobData;
         let queuedNeedsRefetch = false;
         if (eventQueue.current.length > 0) {
-          logger.log(`Processing ${eventQueue.current.length} queued events`);
           for (const ev of eventQueue.current) {
-            logger.log("Processing queued event:", ev);
             if (ev.type === "state:change") {
               const d2 = ev.payload && (ev.payload.data || ev.payload) || {};
               if (typeof d2.path === "string" && matchesJobTasksStatusPath(d2.path, jobId)) {
-                logger.log(
-                  "Queued state:change matches tasks-status path, scheduling refetch"
-                );
                 queuedNeedsRefetch = true;
                 continue;
               }
             }
             finalData = applyJobEvent(finalData, ev, jobId);
-            logger.log("Applied queued event, result:", finalData);
           }
           eventQueue.current = [];
         }
         if (mountedRef.current) {
-          logger.log("Updating state with final data");
-          setData(finalData);
-          setError(null);
-          hydratedRef.current = true;
-          logger.log("Component hydrated");
+          startTransition(() => {
+            setData(finalData);
+            setError(null);
+            const wasHydrated = hydratedRef.current;
+            hydratedRef.current = true;
+            if (!wasHydrated) {
+              setIsHydrated(true);
+              setLoading(false);
+            }
+          });
           if (queuedNeedsRefetch) {
-            logger.log("Scheduling refetch for queued path changes");
             scheduleDebouncedRefetch();
           }
         }
       } catch (err) {
-        logger.error("Failed to fetch job detail:", err);
         if (mountedRef.current) {
-          setError(err.message);
-          setData(null);
+          startTransition(() => {
+            setError(err.message);
+            setData(null);
+            if (!hydratedRef.current) {
+              setLoading(false);
+            }
+          });
         }
       } finally {
-        if (mountedRef.current) {
+        if (mountedRef.current && !hydratedRef.current) {
           setLoading(false);
         }
-        logger.groupEnd();
       }
     };
     doFetch();
-  }, [jobId, scheduleDebouncedRefetch, logger]);
+  }, [jobId, scheduleDebouncedRefetch]);
   reactExports.useEffect(() => {
     if (!jobId) {
-      logger.log("SSE setup skipped - no jobId available", {
-        hasJobId: !!jobId,
-        hasExistingEs: !!esRef.current,
-        isMounted: mountedRef.current
-      });
       return void 0;
     }
     if (esRef.current) {
-      logger.log("Closing existing EventSource before reinitializing");
       try {
         esRef.current.close();
       } catch (err) {
-        logger.warn("Error closing existing EventSource during reinit", err);
       }
       esRef.current = null;
     }
-    logger.group("SSE Connection Setup");
-    logger.log("Setting up SSE connection for job:", jobId);
     const attachListeners = (es) => {
       const onOpen = () => {
-        logger.log("SSE connection opened");
         if (mountedRef.current) {
           setConnectionStatus("connected");
         }
       };
       const onError = () => {
-        logger.warn("SSE connection error");
         try {
           const rs = esRef.current?.readyState;
-          logger.log("SSE readyState:", rs);
           if (rs === 0) {
             if (mountedRef.current) setConnectionStatus("disconnected");
           } else if (rs === 1) {
@@ -22624,11 +23134,9 @@ function useJobDetailWithUpdates(jobId) {
             if (mountedRef.current) setConnectionStatus("disconnected");
           }
         } catch (err) {
-          logger.error("Error getting readyState:", err);
           if (mountedRef.current) setConnectionStatus("disconnected");
         }
         if (esRef.current && esRef.current.readyState === 2 && mountedRef.current) {
-          logger.log("Scheduling SSE reconnection");
           if (reconnectTimer.current) clearTimeout(reconnectTimer.current);
           reconnectTimer.current = setTimeout(() => {
             if (!mountedRef.current) return;
@@ -22638,7 +23146,6 @@ function useJobDetailWithUpdates(jobId) {
               } catch (e2) {
               }
               const eventsUrl = jobId ? `/api/events?jobId=${encodeURIComponent(jobId)}` : "/api/events";
-              logger.log("Creating new EventSource for reconnection");
               const newEs = new EventSource(eventsUrl);
               newEs.addEventListener("open", onOpen);
               newEs.addEventListener("job:updated", onJobUpdated);
@@ -22649,7 +23156,7 @@ function useJobDetailWithUpdates(jobId) {
               newEs.addEventListener("error", onError);
               esRef.current = newEs;
             } catch (err) {
-              logger.error("Failed to reconnect SSE:", err);
+              console.error("Failed to reconnect SSE:", err);
             }
           }, 2e3);
         }
@@ -22658,64 +23165,37 @@ function useJobDetailWithUpdates(jobId) {
         try {
           const payload = evt && evt.data ? JSON.parse(evt.data) : null;
           const eventObj = { type, payload };
-          logger.sse(type, payload);
           if (payload && payload.jobId && payload.jobId !== jobId) {
-            logger.log(
-              `Ignoring event for different job: ${payload.jobId} (current: ${jobId})`
-            );
             return;
           }
           if (!hydratedRef.current) {
-            logger.log(`Queueing event until hydration: ${type}`);
             eventQueue.current = (eventQueue.current || []).concat(eventObj);
             return;
           }
           if (type === "state:change") {
             const d2 = payload && (payload.data || payload) || {};
-            logger.log("Processing state:change event:", d2);
             if (typeof d2.path === "string" && matchesJobTasksStatusPath(d2.path, jobId)) {
-              logger.log(
-                `state:change matches tasks-status path: ${d2.path}, scheduling refetch`
-              );
               scheduleDebouncedRefetch({
                 reason: "state:change",
                 path: d2.path
               });
               return;
-            } else {
-              logger.log(
-                `state:change does not match tasks-status path: ${d2.path}`
-              );
             }
           }
-          setData((prev) => {
-            logger.group("Applying SSE event to state");
-            logger.log("Previous state snapshot:", {
-              hasTasks: !!prev?.tasks,
-              taskKeys: prev?.tasks ? Object.keys(prev.tasks) : [],
-              status: prev?.status
-            });
-            logger.log("Incoming event payload:", payload);
-            const next = applyJobEvent(prev, eventObj, jobId);
-            try {
-              if (JSON.stringify(prev) === JSON.stringify(next)) {
-                logger.log("Event application resulted in no state change");
-                logger.groupEnd();
-                return prev;
+          startTransition(() => {
+            setData((prev) => {
+              const next = applyJobEvent(prev, eventObj, jobId);
+              try {
+                if (JSON.stringify(prev) === JSON.stringify(next)) {
+                  return prev;
+                }
+              } catch (e2) {
+                console.error("Error comparing states:", e2);
               }
-            } catch (e2) {
-              logger.error("Error comparing states:", e2);
-            }
-            logger.log("Event applied, state updated", {
-              hasTasks: !!next?.tasks,
-              taskKeys: next?.tasks ? Object.keys(next.tasks) : [],
-              status: next?.status
+              return next;
             });
-            logger.groupEnd();
-            return next;
           });
         } catch (err) {
-          logger.error("Failed to handle SSE event:", err);
           console.error("Failed to handle SSE event:", err);
         }
       };
@@ -22724,7 +23204,6 @@ function useJobDetailWithUpdates(jobId) {
       const onJobRemoved = (evt) => handleIncomingEvent("job:removed", evt);
       const onStatusChanged = (evt) => handleIncomingEvent("status:changed", evt);
       const onStateChange = (evt) => handleIncomingEvent("state:change", evt);
-      logger.log("Attaching SSE event listeners");
       es.addEventListener("open", onOpen);
       es.addEventListener("job:updated", onJobUpdated);
       es.addEventListener("job:created", onJobCreated);
@@ -22733,14 +23212,11 @@ function useJobDetailWithUpdates(jobId) {
       es.addEventListener("state:change", onStateChange);
       es.addEventListener("error", onError);
       if (es.readyState === 1 && mountedRef.current) {
-        logger.log("SSE already open, setting connected");
         setConnectionStatus("connected");
       } else if (es.readyState === 0 && mountedRef.current) {
-        logger.log("SSE connecting, setting disconnected");
         setConnectionStatus("disconnected");
       }
       return () => {
-        logger.log("Cleaning up SSE connection");
         try {
           es.removeEventListener("open", onOpen);
           es.removeEventListener("job:updated", onJobUpdated);
@@ -22750,9 +23226,8 @@ function useJobDetailWithUpdates(jobId) {
           es.removeEventListener("state:change", onStateChange);
           es.removeEventListener("error", onError);
           es.close();
-          logger.log("SSE connection closed");
         } catch (err) {
-          logger.error("Error during SSE cleanup:", err);
+          console.error("Error during SSE cleanup:", err);
         }
         if (reconnectTimer.current) {
           clearTimeout(reconnectTimer.current);
@@ -22763,21 +23238,18 @@ function useJobDetailWithUpdates(jobId) {
     };
     try {
       const eventsUrl = jobId ? `/api/events?jobId=${encodeURIComponent(jobId)}` : "/api/events";
-      logger.log(`Creating EventSource with URL: ${eventsUrl}`);
       const es = new EventSource(eventsUrl);
       esRef.current = es;
       const cleanup = attachListeners(es);
-      logger.groupEnd();
       return cleanup;
     } catch (err) {
-      logger.error("Failed to create SSE connection:", err);
+      console.error("Failed to create SSE connection:", err);
       if (mountedRef.current) {
         setConnectionStatus("error");
       }
-      logger.groupEnd();
       return void 0;
     }
-  }, [jobId, scheduleDebouncedRefetch, logger]);
+  }, [jobId, scheduleDebouncedRefetch]);
   reactExports.useEffect(() => {
     mountedRef.current = true;
     return () => {
@@ -22803,7 +23275,10 @@ function useJobDetailWithUpdates(jobId) {
     data,
     loading,
     error,
-    connectionStatus
+    connectionStatus,
+    isRefreshing,
+    isTransitioning: isPending,
+    isHydrated
   };
 }
 function PipelineDetail() {
@@ -22813,26 +23288,30 @@ function PipelineDetail() {
       Layout,
       {
         pageTitle: "Pipeline Details",
-        breadcrumbs: [
-          { label: "Home", href: "/" },
-          { label: "Pipeline Details" }
-        ],
-        showBackButton: true,
+        breadcrumbs: [{ label: "Home", href: "/" }],
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$4, { align: "center", justify: "center", className: "min-h-64", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$7, { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "5", weight: "medium", color: "red", className: "mb-2", children: "No job ID provided" }) }) })
       }
     );
   }
-  const { data: job, loading, error } = useJobDetailWithUpdates(jobId);
-  if (loading) {
+  const {
+    data: job,
+    loading,
+    error,
+    isRefreshing,
+    isHydrated
+  } = useJobDetailWithUpdates(jobId);
+  const showLoadingScreen = loading && !isHydrated;
+  if (showLoadingScreen) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       Layout,
       {
         pageTitle: "Pipeline Details",
         breadcrumbs: [
           { label: "Home", href: "/" },
-          { label: "Pipeline Details" }
+          {
+            label: job && job?.pipelineLabel ? job.pipelineLabel : "Pipeline Details"
+          }
         ],
-        showBackButton: true,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$4, { align: "center", justify: "center", className: "min-h-64", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$7, { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "5", weight: "medium", className: "mb-2", children: "Loading job details..." }) }) })
       }
     );
@@ -22844,9 +23323,10 @@ function PipelineDetail() {
         pageTitle: "Pipeline Details",
         breadcrumbs: [
           { label: "Home", href: "/" },
-          { label: "Pipeline Details" }
+          {
+            label: job && job?.pipelineLabel ? job.pipelineLabel : "Pipeline Details"
+          }
         ],
-        showBackButton: true,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$4, { align: "center", justify: "center", className: "min-h-64", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$7, { className: "text-center", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "5", weight: "medium", color: "red", className: "mb-2", children: "Failed to load job details" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "2", color: "gray", className: "mt-2", children: error })
@@ -22861,9 +23341,8 @@ function PipelineDetail() {
         pageTitle: "Pipeline Details",
         breadcrumbs: [
           { label: "Home", href: "/" },
-          { label: "Pipeline Details" }
+          { label: job.pipelineLabel || "Pipeline Details" }
         ],
-        showBackButton: true,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$4, { align: "center", justify: "center", className: "min-h-64", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$7, { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "5", weight: "medium", className: "mb-2", children: "Job not found" }) }) })
       }
     );
@@ -22881,28 +23360,64 @@ function PipelineDetail() {
   const pageTitle = job.name || "Pipeline Details";
   const breadcrumbs = [
     { label: "Home", href: "/" },
-    { label: "Pipeline Details" },
+    {
+      label: job && job?.pipelineLabel ? job.pipelineLabel : "Pipeline Details"
+    },
     ...job.name ? [{ label: job.name }] : []
   ];
-  const subheaderRightContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(p$4, { align: "center", gap: "3", className: "shrink-0", children: [
+  const totalCost = job?.totalCost || job?.costs?.summary?.totalCost || 0;
+  const totalTokens = job?.totalTokens || job?.costs?.summary?.totalTokens || 0;
+  const totalInputTokens = job?.costs?.summary?.totalInputTokens || 0;
+  const totalOutputTokens = job?.costs?.summary?.totalOutputTokens || 0;
+  const costIndicator = /* @__PURE__ */ jsxRuntimeExports.jsxs(p$b, { size: "2", color: "gray", children: [
+    "Cost: ",
+    totalCost > 0 ? formatCurrency4(totalCost) : "—"
+  ] });
+  const costIndicatorWithTooltip = totalCost > 0 && totalTokens > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Provider, { delayDuration: 100, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Root3, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      p$7,
+      {
+        className: "cursor-help border-b border-dotted border-gray-400 hover:border-gray-600 transition-colors",
+        "aria-label": `Total cost: ${formatCurrency4(totalCost)}, ${formatTokensCompact(totalTokens)}`,
+        children: costIndicator
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Portal, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Content2,
+      {
+        className: "bg-gray-900 text-white px-2 py-1 rounded text-xs max-w-xs",
+        sideOffset: 5,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: formatTokensCompact(totalTokens) }),
+            totalInputTokens > 0 && totalOutputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-gray-300", children: [
+              "Input: ",
+              formatTokensCompact(totalInputTokens),
+              " • Output:",
+              " ",
+              formatTokensCompact(totalOutputTokens)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Arrow2, { className: "fill-gray-900" })
+        ]
+      }
+    ) })
+  ] }) }) : costIndicator;
+  const subheaderRightContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(p$4, { align: "center", gap: "3", className: "shrink-0 flex-wrap", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(p$b, { size: "2", color: "gray", children: [
       "ID: ",
       job.id || jobId
     ] }),
+    costIndicatorWithTooltip,
     statusBadge(job.status)
   ] });
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Layout,
-    {
-      pageTitle,
-      breadcrumbs,
-      showBackButton: true,
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(PageSubheader, { breadcrumbs, maxWidth: "max-w-7xl", children: subheaderRightContent }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(JobDetail, { job, pipeline })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Layout, { pageTitle, breadcrumbs, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(PageSubheader, { breadcrumbs, maxWidth: "max-w-7xl", children: [
+      subheaderRightContent,
+      isRefreshing && /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "2", color: "blue", className: "ml-3 animate-pulse", children: "Refreshing..." })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(JobDetail, { job, pipeline })
+  ] });
 }
 const ioFunctions = [
   {
@@ -23052,8 +23567,6 @@ function CodePage() {
   topP?: number,
   frequencyPenalty?: number,
   presencePenalty?: number,
-  tools?: Array<{type: "function", function: object}>,
-  toolChoice?: "auto" | "required" | { type: "function", function: { name: string } },
   seed?: number,
   provider?: string,
   model?: string,
@@ -23075,6 +23588,43 @@ function CodePage() {
           ] }, fn.fullPath))
         ) })
       ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(r$8, { size: "6", mt: "8", mb: "4", children: "Validation API" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { as: "p", mb: "3", size: "2", children: "Schema validation helper available to task stages via validators." }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(p$7, { mb: "4", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(r$8, { size: "4", mb: "2", children: "Function Signature" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(p$2, { size: "3", children: `validateWithSchema(schema: object, data: object | string): { valid: true } | { valid: false, errors: AjvError[] }` }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(r$8, { size: "4", mb: "2", mt: "4", children: "Behavior" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("ul", { className: "list-disc list-inside mb-4 space-y-1", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: "text-sm text-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$b, { as: "span", children: [
+            "Parses string data to JSON; on parse failure returns",
+            " ",
+            `{ valid:false, errors:[{ keyword:"type", message:"must be a valid JSON object (string parsing failed)"} ]`
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: "text-sm text-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$b, { as: "span", children: [
+            "Uses Ajv(",
+            `{ allErrors: true, strict: false }`,
+            "); compiles provided schema"
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: "text-sm text-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { as: "span", children: "Returns AJV errors array when invalid" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(r$8, { size: "4", mb: "2", children: "Source" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(p$2, { size: "3", children: "src/api/validators/json.js" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(r$8, { size: "4", mb: "2", mt: "4", children: "Usage Example" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(p$2, { size: "3", children: `export const validateStructure = async ({
+  io,
+  flags,
+  validators: { validateWithSchema },
+}) => {
+  const content = await io.readArtifact("research-output.json");
+  const result = validateWithSchema(researchJsonSchema, content);
+
+  if (!result.valid) {
+    console.warn("[Research:validateStructure] Validation failed", result.errors);
+    return { output: {}, flags: { ...flags, validationFailed: true } };
+  }
+  return { output: {}, flags };
+};` })
+      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(r$8, { size: "6", mt: "8", mb: "4", children: "Environment Configuration" }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(p$7, { mb: "4", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(r$8, { size: "4", mb: "2", children: "Example .env Configuration" }),
@@ -23085,15 +23635,102 @@ function CodePage() {
             /* @__PURE__ */ jsxRuntimeExports.jsx(P$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(R, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$2, { size: "3", children: "DEEPSEEK_API_KEY=" }) }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(P$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(R, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$2, { size: "3", children: "GEMINI_API_KEY=" }) }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(P$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(R, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$2, { size: "3", children: "ANTHROPIC_API_KEY=" }) }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(P$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(R, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$2, { size: "3", children: "Z_API_KEY=" }) }) })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(P$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(R, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$2, { size: "3", children: "ZHIPU_API_KEY=" }) }) })
           ] })
         ] }) })
       ] })
     ] })
   ] });
 }
-ReactDOM.createRoot(document.getElementById("root")).render(
-  /* @__PURE__ */ jsxRuntimeExports.jsx(React.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+const ToastContext = reactExports.createContext();
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = reactExports.useState([]);
+  const addToast = reactExports.useCallback((message, options = {}) => {
+    const toast = {
+      id: Date.now() + Math.random(),
+      message,
+      type: options.type || "info",
+      duration: options.duration || 5e3
+    };
+    setToasts((prev) => [...prev, toast]);
+    if (toast.duration > 0) {
+      setTimeout(() => {
+        removeToast(toast.id);
+      }, toast.duration);
+    }
+    return toast.id;
+  }, []);
+  const removeToast = reactExports.useCallback((id) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+  const value = {
+    addToast,
+    removeToast,
+    success: (message, options) => addToast(message, { ...options, type: "success" }),
+    error: (message, options) => addToast(message, { ...options, type: "error" }),
+    warning: (message, options) => addToast(message, { ...options, type: "warning" }),
+    info: (message, options) => addToast(message, { ...options, type: "info" })
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(ToastContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ToastContainer, { toasts, onRemove: removeToast })
+  ] });
+}
+function ToastContainer({ toasts, onRemove }) {
+  if (toasts.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed top-4 right-4 z-50 space-y-2", children: toasts.map((toast) => /* @__PURE__ */ jsxRuntimeExports.jsx(ToastItem, { toast, onRemove }, toast.id)) });
+}
+function ToastItem({ toast, onRemove }) {
+  const getToastStyles = (type) => {
+    switch (type) {
+      case "success":
+        return "bg-green-50 border-green-200 text-green-800";
+      case "error":
+        return "bg-red-50 border-red-200 text-red-800";
+      case "warning":
+        return "bg-yellow-50 border-yellow-200 text-yellow-800";
+      default:
+        return "bg-blue-50 border-blue-200 text-blue-800";
+    }
+  };
+  const getIcon = (type) => {
+    switch (type) {
+      case "success":
+        return "✓";
+      case "error":
+        return "✕";
+      case "warning":
+        return "⚠";
+      default:
+        return "ℹ";
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    p$7,
+    {
+      className: `relative flex items-start p-4 border rounded-lg shadow-lg max-w-sm ${getToastStyles(
+        toast.type
+      )}`,
+      role: "alert",
+      "aria-live": "polite",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$4, { gap: "3", align: "start", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { className: "flex-shrink-0 text-lg font-semibold", children: getIcon(toast.type) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { className: "text-sm font-medium flex-1", children: toast.message }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: () => onRemove(toast.id),
+            className: "flex-shrink-0 ml-4 text-sm opacity-60 hover:opacity-100 focus:outline-none focus:opacity-100",
+            "aria-label": "Dismiss notification",
+            children: "✕"
+          }
+        )
+      ] })
+    }
+  );
+}
+ReactDOM$1.createRoot(document.getElementById("root")).render(
+  /* @__PURE__ */ jsxRuntimeExports.jsx(React.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ToastProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     R$1,
     {
       accentColor: "iris",
@@ -23107,5 +23744,5 @@ ReactDOM.createRoot(document.getElementById("root")).render(
         /* @__PURE__ */ jsxRuntimeExports.jsx(Route, { path: "/code", element: /* @__PURE__ */ jsxRuntimeExports.jsx(CodePage, {}) })
       ] }) })
     }
-  ) })
+  ) }) })
 );