@ryanfw/prompt-orchestration-pipeline 0.5.0 → 0.7.0

package/src/ui/dist/assets/{index-CxcrauYR.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.
@@ -19201,23 +19219,23 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const y = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const o$8 = { asChild: { type: "boolean" } };
+const o$7 = { asChild: { type: "boolean" } };
 const t$7 = { width: { type: "string", className: "rt-r-w", customProperties: ["--width"], responsive: true }, minWidth: { type: "string", className: "rt-r-min-w", customProperties: ["--min-width"], responsive: true }, maxWidth: { type: "string", className: "rt-r-max-w", customProperties: ["--max-width"], responsive: true } };
-const e$g = { height: { type: "string", className: "rt-r-h", customProperties: ["--height"], responsive: true }, minHeight: { type: "string", className: "rt-r-min-h", customProperties: ["--min-height"], responsive: true }, maxHeight: { type: "string", className: "rt-r-max-h", customProperties: ["--max-height"], responsive: true } };
-const o$7 = ["gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", "sky"], r$d = { color: { type: "enum", values: o$7, default: void 0 } }, s$5 = { color: { type: "enum", values: o$7, default: "" } };
-const o$6 = { highContrast: { type: "boolean", className: "rt-high-contrast", default: void 0 } };
-const e$f = ["normal", "start", "end", "both"], r$c = { trim: { type: "enum", className: "rt-r-lt", values: e$f, responsive: true } };
-const e$e = ["left", "center", "right"], t$6 = { align: { type: "enum", className: "rt-r-ta", values: e$e, responsive: true } };
-const e$d = ["wrap", "nowrap", "pretty", "balance"], r$b = { wrap: { type: "enum", className: "rt-r-tw", values: e$d, responsive: true } };
-const e$c = { truncate: { type: "boolean", className: "rt-truncate" } };
-const e$b = ["light", "regular", "medium", "bold"], t$5 = { weight: { type: "enum", className: "rt-r-weight", values: e$b, responsive: true } };
-const m$6 = ["h1", "h2", "h3", "h4", "h5", "h6"], a$9 = ["1", "2", "3", "4", "5", "6", "7", "8", "9"], n$7 = { as: { type: "enum", values: m$6, default: "h1" }, ...o$8, size: { type: "enum", className: "rt-r-size", values: a$9, default: "6", responsive: true }, ...t$5, ...t$6, ...r$c, ...e$c, ...r$b, ...r$d, ...o$6 };
-const e$a = ["initial", "xs", "sm", "md", "lg", "xl"];
-function e$9(n2, r2) {
+const e$f = { height: { type: "string", className: "rt-r-h", customProperties: ["--height"], responsive: true }, minHeight: { type: "string", className: "rt-r-min-h", customProperties: ["--min-height"], responsive: true }, maxHeight: { type: "string", className: "rt-r-max-h", customProperties: ["--max-height"], responsive: true } };
+const o$6 = ["gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", "sky"], r$c = { color: { type: "enum", values: o$6, default: void 0 } }, s$5 = { color: { type: "enum", values: o$6, default: "" } };
+const o$5 = { highContrast: { type: "boolean", className: "rt-high-contrast", default: void 0 } };
+const e$e = ["normal", "start", "end", "both"], r$b = { trim: { type: "enum", className: "rt-r-lt", values: e$e, responsive: true } };
+const e$d = ["left", "center", "right"], t$6 = { align: { type: "enum", className: "rt-r-ta", values: e$d, responsive: true } };
+const e$c = ["wrap", "nowrap", "pretty", "balance"], r$a = { wrap: { type: "enum", className: "rt-r-tw", values: e$c, responsive: true } };
+const e$b = { truncate: { type: "boolean", className: "rt-truncate" } };
+const e$a = ["light", "regular", "medium", "bold"], t$5 = { weight: { type: "enum", className: "rt-r-weight", values: e$a, responsive: true } };
+const m$6 = ["h1", "h2", "h3", "h4", "h5", "h6"], a$9 = ["1", "2", "3", "4", "5", "6", "7", "8", "9"], n$7 = { as: { type: "enum", values: m$6, default: "h1" }, ...o$7, size: { type: "enum", className: "rt-r-size", values: a$9, default: "6", responsive: true }, ...t$5, ...t$6, ...r$b, ...e$b, ...r$a, ...r$c, ...o$5 };
+const e$9 = ["initial", "xs", "sm", "md", "lg", "xl"];
+function e$8(n2, r2) {
   return Object.prototype.hasOwnProperty.call(n2, r2);
 }
-function i$3(e2) {
-  return typeof e2 == "object" && Object.keys(e2).some((s2) => e$a.includes(s2));
+function i$4(e2) {
+  return typeof e2 == "object" && Object.keys(e2).some((s2) => e$9.includes(s2));
 }
 function R$2({ className: r2, customProperties: n2, ...t2 }) {
   const p2 = g({ allowArbitraryValues: true, className: r2, ...t2 }), e2 = m$5({ customProperties: n2, ...t2 });
@@ -19227,10 +19245,10 @@ function g({ allowArbitraryValues: r2, value: n2, className: t2, propValues: p2,
   const s2 = [];
   if (n2) {
     if (typeof n2 == "string" && p2.includes(n2)) return l$3(t2, n2, e2);
-    if (i$3(n2)) {
+    if (i$4(n2)) {
       const i2 = n2;
       for (const o2 in i2) {
-        if (!e$9(i2, o2) || !e$a.includes(o2)) continue;
+        if (!e$8(i2, o2) || !e$9.includes(o2)) continue;
         const u2 = i2[o2];
         if (u2 !== void 0) {
           if (p2.includes(u2)) {
@@ -19254,10 +19272,10 @@ function l$3(r2, n2, t2) {
 function m$5({ customProperties: r2, value: n2, propValues: t2, parseValue: p2 = (e2) => e2 }) {
   let e2 = {};
   if (!(!n2 || typeof n2 == "string" && t2.includes(n2))) {
-    if (typeof n2 == "string" && (e2 = Object.fromEntries(r2.map((s2) => [s2, n2]))), i$3(n2)) {
+    if (typeof n2 == "string" && (e2 = Object.fromEntries(r2.map((s2) => [s2, n2]))), i$4(n2)) {
       const s2 = n2;
       for (const i2 in s2) {
-        if (!e$9(s2, i2) || !e$a.includes(i2)) continue;
+        if (!e$8(s2, i2) || !e$9.includes(i2)) continue;
         const o2 = s2[i2];
         if (!t2.includes(o2)) for (const u2 of r2) e2 = { [i2 === "initial" ? u2 : `${u2}-${i2}`]: o2, ...e2 };
       }
@@ -19283,11 +19301,11 @@ function v(r2, ...m2) {
   for (const n2 in f2) {
     let s2 = a2[n2];
     const e2 = f2[n2];
-    if (e2.default !== void 0 && s2 === void 0 && (s2 = e2.default), e2.type === "enum" && ![e2.default, ...e2.values].includes(s2) && !i$3(s2) && (s2 = e2.default), a2[n2] = s2, "className" in e2 && e2.className) {
+    if (e2.default !== void 0 && s2 === void 0 && (s2 = e2.default), e2.type === "enum" && ![e2.default, ...e2.values].includes(s2) && !i$4(s2) && (s2 = e2.default), a2[n2] = s2, "className" in e2 && e2.className) {
       delete a2[n2];
       const u2 = "responsive" in e2;
-      if (!s2 || i$3(s2) && !u2) continue;
-      if (i$3(s2) && (e2.default !== void 0 && s2.initial === void 0 && (s2.initial = e2.default), e2.type === "enum" && ([e2.default, ...e2.values].includes(s2.initial) || (s2.initial = e2.default))), e2.type === "enum") {
+      if (!s2 || i$4(s2) && !u2) continue;
+      if (i$4(s2) && (e2.default !== void 0 && s2.initial === void 0 && (s2.initial = e2.default), e2.type === "enum" && ([e2.default, ...e2.values].includes(s2.initial) || (s2.initial = e2.default))), e2.type === "enum") {
         const i2 = g({ allowArbitraryValues: false, value: s2, className: e2.className, propValues: e2.values, parseValue: e2.parseValue });
         t2 = y(t2, i2);
         continue;
@@ -19305,18 +19323,18 @@ function v(r2, ...m2) {
   }
   return a2.className = y(t2, r2.className), a2.style = l$2(l2, r2.style), a2;
 }
-const e$8 = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9"], r$a = { m: { type: "enum | string", values: e$8, responsive: true, className: "rt-r-m", customProperties: ["--m"] }, mx: { type: "enum | string", values: e$8, responsive: true, className: "rt-r-mx", customProperties: ["--ml", "--mr"] }, my: { type: "enum | string", values: e$8, responsive: true, className: "rt-r-my", customProperties: ["--mt", "--mb"] }, mt: { type: "enum | string", values: e$8, responsive: true, className: "rt-r-mt", customProperties: ["--mt"] }, mr: { type: "enum | string", values: e$8, responsive: true, className: "rt-r-mr", customProperties: ["--mr"] }, mb: { type: "enum | string", values: e$8, responsive: true, className: "rt-r-mb", customProperties: ["--mb"] }, ml: { type: "enum | string", values: e$8, responsive: true, className: "rt-r-ml", customProperties: ["--ml"] } };
-const r$9 = reactExports.forwardRef((p2, t2) => {
-  const { children: e2, className: s2, asChild: a2, as: n2 = "h1", color: i2, ...m2 } = v(p2, n$7, r$a);
+const e$7 = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9"], r$9 = { m: { type: "enum | string", values: e$7, responsive: true, className: "rt-r-m", customProperties: ["--m"] }, mx: { type: "enum | string", values: e$7, responsive: true, className: "rt-r-mx", customProperties: ["--ml", "--mr"] }, my: { type: "enum | string", values: e$7, responsive: true, className: "rt-r-my", customProperties: ["--mt", "--mb"] }, mt: { type: "enum | string", values: e$7, responsive: true, className: "rt-r-mt", customProperties: ["--mt"] }, mr: { type: "enum | string", values: e$7, responsive: true, className: "rt-r-mr", customProperties: ["--mr"] }, mb: { type: "enum | string", values: e$7, responsive: true, className: "rt-r-mb", customProperties: ["--mb"] }, ml: { type: "enum | string", values: e$7, responsive: true, className: "rt-r-ml", customProperties: ["--ml"] } };
+const r$8 = reactExports.forwardRef((p2, t2) => {
+  const { children: e2, className: s2, asChild: a2, as: n2 = "h1", color: i2, ...m2 } = v(p2, n$7, r$9);
   return reactExports.createElement(Slot, { "data-accent-color": i2, ...m2, ref: t2, className: y("rt-Heading", s2) }, a2 ? e2 : reactExports.createElement(n2, null, e2));
 });
-r$9.displayName = "Heading";
-const m$4 = ["span", "div", "label", "p"], a$8 = ["1", "2", "3", "4", "5", "6", "7", "8", "9"], n$6 = { as: { type: "enum", values: m$4, default: "span" }, ...o$8, size: { type: "enum", className: "rt-r-size", values: a$8, responsive: true }, ...t$5, ...t$6, ...r$c, ...e$c, ...r$b, ...r$d, ...o$6 };
-const p$a = reactExports.forwardRef((t2, r2) => {
-  const { children: e2, className: s2, asChild: m2, as: a2 = "span", color: n2, ...P2 } = v(t2, n$6, r$a);
+r$8.displayName = "Heading";
+const m$4 = ["span", "div", "label", "p"], a$8 = ["1", "2", "3", "4", "5", "6", "7", "8", "9"], n$6 = { as: { type: "enum", values: m$4, default: "span" }, ...o$7, size: { type: "enum", className: "rt-r-size", values: a$8, responsive: true }, ...t$5, ...t$6, ...r$b, ...e$b, ...r$a, ...r$c, ...o$5 };
+const p$b = reactExports.forwardRef((t2, r2) => {
+  const { children: e2, className: s2, asChild: m2, as: a2 = "span", color: n2, ...P2 } = v(t2, n$6, r$9);
   return reactExports.createElement(Slot, { "data-accent-color": n2, ...P2, ref: r2, className: y("rt-Text", s2) }, m2 ? e2 : reactExports.createElement(a2, null, e2));
 });
-p$a.displayName = "Text";
+p$b.displayName = "Text";
 function a$7(e2) {
   switch (e2) {
     case "tomato":
@@ -19353,7 +19371,7 @@ function a$7(e2) {
       return "gray";
   }
 }
-const e$7 = ["none", "small", "medium", "large", "full"], r$8 = { radius: { type: "enum", values: e$7, default: void 0 } };
+const e$6 = ["none", "small", "medium", "large", "full"], r$7 = { radius: { type: "enum", values: e$6, default: void 0 } };
 const s$4 = { hasBackground: { default: true }, appearance: { default: "inherit" }, accentColor: { default: "indigo" }, grayColor: { default: "auto" }, panelBackground: { default: "translucent" }, radius: { default: "medium" }, scaling: { default: "100%" } };
 const d$3 = () => {
 }, P$2 = reactExports.createContext(void 0);
@@ -19385,42 +19403,42 @@ function d$2(i2, e2) {
   const t2 = reactExports.Children.only(c2);
   return reactExports.cloneElement(t2, { children: typeof e2 == "function" ? e2(t2.props.children) : e2 });
 }
-const e$6 = Slot;
-const s$3 = ["div", "span"], o$5 = ["none", "inline", "inline-block", "block", "contents"], p$9 = { as: { type: "enum", values: s$3, default: "div" }, ...o$8, display: { type: "enum", className: "rt-r-display", values: o$5, responsive: true } };
-const e$5 = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], p$8 = { p: { type: "enum | string", className: "rt-r-p", customProperties: ["--p"], values: e$5, responsive: true }, px: { type: "enum | string", className: "rt-r-px", customProperties: ["--pl", "--pr"], values: e$5, responsive: true }, py: { type: "enum | string", className: "rt-r-py", customProperties: ["--pt", "--pb"], values: e$5, responsive: true }, pt: { type: "enum | string", className: "rt-r-pt", customProperties: ["--pt"], values: e$5, responsive: true }, pr: { type: "enum | string", className: "rt-r-pr", customProperties: ["--pr"], values: e$5, responsive: true }, pb: { type: "enum | string", className: "rt-r-pb", customProperties: ["--pb"], values: e$5, responsive: true }, pl: { type: "enum | string", className: "rt-r-pl", customProperties: ["--pl"], values: e$5, responsive: true } };
-const r$7 = ["visible", "hidden", "clip", "scroll", "auto"], i$2 = ["static", "relative", "absolute", "fixed", "sticky"], e$4 = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9"], p$7 = ["0", "1"], n$5 = ["0", "1"], u$3 = { ...p$8, ...t$7, ...e$g, position: { type: "enum", className: "rt-r-position", values: i$2, responsive: true }, inset: { type: "enum | string", className: "rt-r-inset", customProperties: ["--inset"], values: e$4, responsive: true }, top: { type: "enum | string", className: "rt-r-top", customProperties: ["--top"], values: e$4, responsive: true }, right: { type: "enum | string", className: "rt-r-right", customProperties: ["--right"], values: e$4, responsive: true }, bottom: { type: "enum | string", className: "rt-r-bottom", customProperties: ["--bottom"], values: e$4, responsive: true }, left: { type: "enum | string", className: "rt-r-left", customProperties: ["--left"], values: e$4, responsive: true }, overflow: { type: "enum", className: "rt-r-overflow", values: r$7, responsive: true }, overflowX: { type: "enum", className: "rt-r-ox", values: r$7, responsive: true }, overflowY: { type: "enum", className: "rt-r-oy", values: r$7, responsive: true }, flexBasis: { type: "string", className: "rt-r-fb", customProperties: ["--flex-basis"], responsive: true }, flexShrink: { type: "enum | string", className: "rt-r-fs", customProperties: ["--flex-shrink"], values: p$7, responsive: true }, flexGrow: { type: "enum | string", className: "rt-r-fg", customProperties: ["--flex-grow"], values: n$5, responsive: true }, gridArea: { type: "string", className: "rt-r-ga", customProperties: ["--grid-area"], responsive: true }, gridColumn: { type: "string", className: "rt-r-gc", customProperties: ["--grid-column"], responsive: true }, gridColumnStart: { type: "string", className: "rt-r-gcs", customProperties: ["--grid-column-start"], responsive: true }, gridColumnEnd: { type: "string", className: "rt-r-gce", customProperties: ["--grid-column-end"], responsive: true }, gridRow: { type: "string", className: "rt-r-gr", customProperties: ["--grid-row"], responsive: true }, gridRowStart: { type: "string", className: "rt-r-grs", customProperties: ["--grid-row-start"], responsive: true }, gridRowEnd: { type: "string", className: "rt-r-gre", customProperties: ["--grid-row-end"], responsive: true } };
-const p$6 = reactExports.forwardRef((r2, s2) => {
-  const { className: t2, asChild: e2, as: m2 = "div", ...a2 } = v(r2, p$9, u$3, r$a);
-  return reactExports.createElement(e2 ? e$6 : m2, { ...a2, ref: s2, className: y("rt-Box", t2) });
+const e$5 = Slot;
+const s$3 = ["div", "span"], o$4 = ["none", "inline", "inline-block", "block", "contents"], p$a = { as: { type: "enum", values: s$3, default: "div" }, ...o$7, display: { type: "enum", className: "rt-r-display", values: o$4, responsive: true } };
+const e$4 = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], p$9 = { p: { type: "enum | string", className: "rt-r-p", customProperties: ["--p"], values: e$4, responsive: true }, px: { type: "enum | string", className: "rt-r-px", customProperties: ["--pl", "--pr"], values: e$4, responsive: true }, py: { type: "enum | string", className: "rt-r-py", customProperties: ["--pt", "--pb"], values: e$4, responsive: true }, pt: { type: "enum | string", className: "rt-r-pt", customProperties: ["--pt"], values: e$4, responsive: true }, pr: { type: "enum | string", className: "rt-r-pr", customProperties: ["--pr"], values: e$4, responsive: true }, pb: { type: "enum | string", className: "rt-r-pb", customProperties: ["--pb"], values: e$4, responsive: true }, pl: { type: "enum | string", className: "rt-r-pl", customProperties: ["--pl"], values: e$4, responsive: true } };
+const r$6 = ["visible", "hidden", "clip", "scroll", "auto"], i$3 = ["static", "relative", "absolute", "fixed", "sticky"], e$3 = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9"], p$8 = ["0", "1"], n$5 = ["0", "1"], u$3 = { ...p$9, ...t$7, ...e$f, position: { type: "enum", className: "rt-r-position", values: i$3, responsive: true }, inset: { type: "enum | string", className: "rt-r-inset", customProperties: ["--inset"], values: e$3, responsive: true }, top: { type: "enum | string", className: "rt-r-top", customProperties: ["--top"], values: e$3, responsive: true }, right: { type: "enum | string", className: "rt-r-right", customProperties: ["--right"], values: e$3, responsive: true }, bottom: { type: "enum | string", className: "rt-r-bottom", customProperties: ["--bottom"], values: e$3, responsive: true }, left: { type: "enum | string", className: "rt-r-left", customProperties: ["--left"], values: e$3, responsive: true }, overflow: { type: "enum", className: "rt-r-overflow", values: r$6, responsive: true }, overflowX: { type: "enum", className: "rt-r-ox", values: r$6, responsive: true }, overflowY: { type: "enum", className: "rt-r-oy", values: r$6, responsive: true }, flexBasis: { type: "string", className: "rt-r-fb", customProperties: ["--flex-basis"], responsive: true }, flexShrink: { type: "enum | string", className: "rt-r-fs", customProperties: ["--flex-shrink"], values: p$8, responsive: true }, flexGrow: { type: "enum | string", className: "rt-r-fg", customProperties: ["--flex-grow"], values: n$5, responsive: true }, gridArea: { type: "string", className: "rt-r-ga", customProperties: ["--grid-area"], responsive: true }, gridColumn: { type: "string", className: "rt-r-gc", customProperties: ["--grid-column"], responsive: true }, gridColumnStart: { type: "string", className: "rt-r-gcs", customProperties: ["--grid-column-start"], responsive: true }, gridColumnEnd: { type: "string", className: "rt-r-gce", customProperties: ["--grid-column-end"], responsive: true }, gridRow: { type: "string", className: "rt-r-gr", customProperties: ["--grid-row"], responsive: true }, gridRowStart: { type: "string", className: "rt-r-grs", customProperties: ["--grid-row-start"], responsive: true }, gridRowEnd: { type: "string", className: "rt-r-gre", customProperties: ["--grid-row-end"], responsive: true } };
+const p$7 = reactExports.forwardRef((r2, s2) => {
+  const { className: t2, asChild: e2, as: m2 = "div", ...a2 } = v(r2, p$a, u$3, r$9);
+  return reactExports.createElement(e2 ? e$5 : m2, { ...a2, ref: s2, className: y("rt-Box", t2) });
 });
-p$6.displayName = "Box";
-const t$4 = ["1", "2", "3", "4"], a$6 = ["classic", "solid", "soft", "surface", "outline", "ghost"], i$1 = { ...o$8, size: { type: "enum", className: "rt-r-size", values: t$4, default: "2", responsive: true }, variant: { type: "enum", className: "rt-variant", values: a$6, default: "solid" }, ...s$5, ...o$6, ...r$8, loading: { type: "boolean", className: "rt-loading", default: false } };
-const e$3 = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], p$5 = { gap: { type: "enum | string", className: "rt-r-gap", customProperties: ["--gap"], values: e$3, responsive: true }, gapX: { type: "enum | string", className: "rt-r-cg", customProperties: ["--column-gap"], values: e$3, responsive: true }, gapY: { type: "enum | string", className: "rt-r-rg", customProperties: ["--row-gap"], values: e$3, responsive: true } };
-const t$3 = ["div", "span"], p$4 = ["none", "inline-flex", "flex"], a$5 = ["row", "column", "row-reverse", "column-reverse"], o$4 = ["start", "center", "end", "baseline", "stretch"], n$4 = ["start", "center", "end", "between"], l$1 = ["nowrap", "wrap", "wrap-reverse"], u$2 = { as: { type: "enum", values: t$3, default: "div" }, ...o$8, display: { type: "enum", className: "rt-r-display", values: p$4, responsive: true }, direction: { type: "enum", className: "rt-r-fd", values: a$5, responsive: true }, align: { type: "enum", className: "rt-r-ai", values: o$4, responsive: true }, justify: { type: "enum", className: "rt-r-jc", values: n$4, parseValue: f$4, responsive: true }, wrap: { type: "enum", className: "rt-r-fw", values: l$1, responsive: true }, ...p$5 };
-function f$4(e2) {
+p$7.displayName = "Box";
+const t$4 = ["1", "2", "3", "4"], a$6 = ["classic", "solid", "soft", "surface", "outline", "ghost"], i$2 = { ...o$7, size: { type: "enum", className: "rt-r-size", values: t$4, default: "2", responsive: true }, variant: { type: "enum", className: "rt-variant", values: a$6, default: "solid" }, ...s$5, ...o$5, ...r$7, loading: { type: "boolean", className: "rt-loading", default: false } };
+const e$2 = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], p$6 = { gap: { type: "enum | string", className: "rt-r-gap", customProperties: ["--gap"], values: e$2, responsive: true }, gapX: { type: "enum | string", className: "rt-r-cg", customProperties: ["--column-gap"], values: e$2, responsive: true }, gapY: { type: "enum | string", className: "rt-r-rg", customProperties: ["--row-gap"], values: e$2, responsive: true } };
+const t$3 = ["div", "span"], p$5 = ["none", "inline-flex", "flex"], a$5 = ["row", "column", "row-reverse", "column-reverse"], o$3 = ["start", "center", "end", "baseline", "stretch"], n$4 = ["start", "center", "end", "between"], l$1 = ["nowrap", "wrap", "wrap-reverse"], u$2 = { as: { type: "enum", values: t$3, default: "div" }, ...o$7, display: { type: "enum", className: "rt-r-display", values: p$5, responsive: true }, direction: { type: "enum", className: "rt-r-fd", values: a$5, responsive: true }, align: { type: "enum", className: "rt-r-ai", values: o$3, responsive: true }, justify: { type: "enum", className: "rt-r-jc", values: n$4, parseValue: f$5, responsive: true }, wrap: { type: "enum", className: "rt-r-fw", values: l$1, responsive: true }, ...p$6 };
+function f$5(e2) {
   return e2 === "between" ? "space-between" : e2;
 }
-const p$3 = reactExports.forwardRef((r2, e2) => {
-  const { className: s2, asChild: t2, as: m2 = "div", ...l2 } = v(r2, u$2, u$3, r$a);
-  return reactExports.createElement(t2 ? e$6 : m2, { ...l2, ref: e2, className: y("rt-Flex", s2) });
+const p$4 = reactExports.forwardRef((r2, e2) => {
+  const { className: s2, asChild: t2, as: m2 = "div", ...l2 } = v(r2, u$2, u$3, r$9);
+  return reactExports.createElement(t2 ? e$5 : m2, { ...l2, ref: e2, className: y("rt-Flex", s2) });
 });
-p$3.displayName = "Flex";
-const e$2 = ["1", "2", "3"], s$2 = { size: { type: "enum", className: "rt-r-size", values: e$2, default: "2", responsive: true }, loading: { type: "boolean", default: true } };
+p$4.displayName = "Flex";
+const e$1 = ["1", "2", "3"], s$2 = { size: { type: "enum", className: "rt-r-size", values: e$1, default: "2", responsive: true }, loading: { type: "boolean", default: true } };
 const s$1 = reactExports.forwardRef((i2, o2) => {
-  const { className: a2, children: e2, loading: t2, ...m2 } = v(i2, s$2, r$a);
+  const { className: a2, children: e2, loading: t2, ...m2 } = v(i2, s$2, r$9);
   if (!t2) return e2;
   const r2 = reactExports.createElement("span", { ...m2, ref: o2, className: y("rt-Spinner", a2) }, reactExports.createElement("span", { className: "rt-SpinnerLeaf" }), reactExports.createElement("span", { className: "rt-SpinnerLeaf" }), reactExports.createElement("span", { className: "rt-SpinnerLeaf" }), reactExports.createElement("span", { className: "rt-SpinnerLeaf" }), reactExports.createElement("span", { className: "rt-SpinnerLeaf" }), reactExports.createElement("span", { className: "rt-SpinnerLeaf" }), reactExports.createElement("span", { className: "rt-SpinnerLeaf" }), reactExports.createElement("span", { className: "rt-SpinnerLeaf" }));
-  return e2 === void 0 ? r2 : reactExports.createElement(p$3, { asChild: true, position: "relative", align: "center", justify: "center" }, reactExports.createElement("span", null, reactExports.createElement("span", { "aria-hidden": true, style: { display: "contents", visibility: "hidden" }, inert: void 0 }, e2), reactExports.createElement(p$3, { asChild: true, align: "center", justify: "center", position: "absolute", inset: "0" }, reactExports.createElement("span", null, r2))));
+  return e2 === void 0 ? r2 : reactExports.createElement(p$4, { asChild: true, position: "relative", align: "center", justify: "center" }, reactExports.createElement("span", null, reactExports.createElement("span", { "aria-hidden": true, style: { display: "contents", visibility: "hidden" }, inert: void 0 }, e2), reactExports.createElement(p$4, { asChild: true, align: "center", justify: "center", position: "absolute", inset: "0" }, reactExports.createElement("span", null, r2))));
 });
 s$1.displayName = "Spinner";
 const d$1 = Root$3;
 function s(e2, t2) {
   if (e2 !== void 0) return typeof e2 == "string" ? t2(e2) : Object.fromEntries(Object.entries(e2).map(([n2, o2]) => [n2, t2(o2)]));
 }
-function p$2(e2) {
+function p$3(e2) {
   return e2 === "3" ? "3" : "2";
 }
-function r$6(e2) {
+function r$5(e2) {
   switch (e2) {
     case "1":
       return "1";
@@ -19432,15 +19450,15 @@ function r$6(e2) {
   }
 }
 const n$3 = reactExports.forwardRef((t2, p2) => {
-  const { size: i2 = i$1.size.default } = t2, { className: a2, children: e2, asChild: m2, color: d2, radius: l2, disabled: s$22 = t2.loading, ...u2 } = v(t2, i$1, r$a), f2 = m2 ? Slot : "button";
-  return reactExports.createElement(f2, { "data-disabled": s$22 || void 0, "data-accent-color": d2, "data-radius": l2, ...u2, ref: p2, className: y("rt-reset", "rt-BaseButton", a2), disabled: s$22 }, t2.loading ? reactExports.createElement(reactExports.Fragment, null, reactExports.createElement("span", { style: { display: "contents", visibility: "hidden" }, "aria-hidden": true }, e2), reactExports.createElement(d$1, null, e2), reactExports.createElement(p$3, { asChild: true, align: "center", justify: "center", position: "absolute", inset: "0" }, reactExports.createElement("span", null, reactExports.createElement(s$1, { size: s(i2, r$6) })))) : e2);
+  const { size: i2 = i$2.size.default } = t2, { className: a2, children: e2, asChild: m2, color: d2, radius: l2, disabled: s$22 = t2.loading, ...u2 } = v(t2, i$2, r$9), f2 = m2 ? Slot : "button";
+  return reactExports.createElement(f2, { "data-disabled": s$22 || void 0, "data-accent-color": d2, "data-radius": l2, ...u2, ref: p2, className: y("rt-reset", "rt-BaseButton", a2), disabled: s$22 }, t2.loading ? reactExports.createElement(reactExports.Fragment, null, reactExports.createElement("span", { style: { display: "contents", visibility: "hidden" }, "aria-hidden": true }, e2), reactExports.createElement(d$1, null, e2), reactExports.createElement(p$4, { asChild: true, align: "center", justify: "center", position: "absolute", inset: "0" }, reactExports.createElement("span", null, reactExports.createElement(s$1, { size: s(i2, r$5) })))) : e2);
 });
 n$3.displayName = "BaseButton";
-const o$3 = reactExports.forwardRef(({ className: e2, ...n2 }, r2) => reactExports.createElement(n$3, { ...n2, ref: r2, className: y("rt-Button", e2) }));
-o$3.displayName = "Button";
-const t$2 = ["1", "2", "3"], r$5 = ["soft", "surface", "outline"], a$4 = { ...o$8, size: { type: "enum", className: "rt-r-size", values: t$2, default: "2", responsive: true }, variant: { type: "enum", className: "rt-variant", values: r$5, default: "soft" }, ...s$5, ...o$6 };
+const o$2 = reactExports.forwardRef(({ className: e2, ...n2 }, r2) => reactExports.createElement(n$3, { ...n2, ref: r2, className: y("rt-Button", e2) }));
+o$2.displayName = "Button";
+const t$2 = ["1", "2", "3"], r$4 = ["soft", "surface", "outline"], a$4 = { ...o$7, size: { type: "enum", className: "rt-r-size", values: t$2, default: "2", responsive: true }, variant: { type: "enum", className: "rt-variant", values: r$4, default: "soft" }, ...s$5, ...o$5 };
 const a$3 = reactExports.createContext({}), n$2 = reactExports.forwardRef((t2, l2) => {
-  const { size: e2 = a$4.size.default } = t2, { asChild: r2, children: C, className: i2, color: c2, ...f2 } = v(t2, a$4, r$a), P2 = r2 ? Slot : "div";
+  const { size: e2 = a$4.size.default } = t2, { asChild: r2, children: C, className: i2, color: c2, ...f2 } = v(t2, a$4, r$9), P2 = r2 ? Slot : "div";
   return reactExports.createElement(P2, { "data-accent-color": c2, ...f2, className: y("rt-CalloutRoot", i2), ref: l2 }, reactExports.createElement(a$3.Provider, { value: reactExports.useMemo(() => ({ size: e2 }), [e2]) }, C));
 });
 n$2.displayName = "Callout.Root";
@@ -19448,21 +19466,21 @@ const m$3 = reactExports.forwardRef(({ className: t2, ...l2 }, e2) => reactExpor
 m$3.displayName = "Callout.Icon";
 const u$1 = reactExports.forwardRef(({ className: t2, ...l2 }, e2) => {
   const { size: r2 } = reactExports.useContext(a$3);
-  return reactExports.createElement(p$a, { as: "p", size: s(r2, p$2), ...l2, asChild: false, ref: e2, className: y("rt-CalloutText", t2) });
+  return reactExports.createElement(p$b, { as: "p", size: s(r2, p$3), ...l2, asChild: false, ref: e2, className: y("rt-CalloutText", t2) });
 });
 u$1.displayName = "Callout.Text";
-const e$1 = ["1", "2", "3", "4", "5"], r$4 = ["surface", "classic", "ghost"], a$2 = { ...o$8, size: { type: "enum", className: "rt-r-size", values: e$1, default: "1", responsive: true }, variant: { type: "enum", className: "rt-variant", values: r$4, default: "surface" } };
-const o$2 = reactExports.forwardRef((p2, e2) => {
-  const { asChild: t2, className: s2, ...a2 } = v(p2, a$2, r$a), m2 = t2 ? Slot : "div";
-  return reactExports.createElement(m2, { ref: e2, ...a2, className: y("rt-reset", "rt-BaseCard", "rt-Card", s2) });
+const a$2 = ["1", "2", "3", "4", "5", "6", "7", "8", "9"], i$1 = ["solid", "soft", "outline", "ghost"], f$4 = { ...o$7, size: { type: "enum", className: "rt-r-size", values: a$2, responsive: true }, variant: { type: "enum", className: "rt-variant", values: i$1, default: "soft" }, ...t$5, ...s$5, ...o$5, ...e$b, ...r$a };
+const p$2 = reactExports.forwardRef((o2, t2) => {
+  const { asChild: s2, className: m2, color: e2, ...d2 } = v(o2, f$4, r$9), n2 = o2.variant === "ghost" ? e2 || void 0 : e2, a2 = s2 ? Slot : "code";
+  return reactExports.createElement(a2, { "data-accent-color": n2, ...d2, ref: t2, className: y("rt-reset", "rt-Code", m2) });
 });
-o$2.displayName = "Card";
-const r$3 = ["1", "2", "3"], t$1 = { ...o$8, size: { values: r$3, default: "1" }, ...r$8, scrollbars: { default: "both" } };
+p$2.displayName = "Code";
+const r$3 = ["1", "2", "3"], t$1 = { ...o$7, size: { values: r$3, default: "1" }, ...r$7, scrollbars: { default: "both" } };
 function a$1(r2) {
   const { m: t2, mx: m2, my: o2, mt: p2, mr: n2, mb: s2, ml: e2, ...i2 } = r2;
   return { m: t2, mx: m2, my: o2, mt: p2, mr: n2, mb: s2, ml: e2, rest: i2 };
 }
-const r$2 = r$a.m.values;
+const r$2 = r$9.m.values;
 function S(s2) {
   const [e2, t2] = R$2({ className: "rt-r-m", customProperties: ["--margin"], propValues: r$2, value: s2.m }), [a2, o2] = R$2({ className: "rt-r-mx", customProperties: ["--margin-left", "--margin-right"], propValues: r$2, value: s2.mx }), [l2, i2] = R$2({ className: "rt-r-my", customProperties: ["--margin-top", "--margin-bottom"], propValues: r$2, value: s2.my }), [p2, u2] = R$2({ className: "rt-r-mt", customProperties: ["--margin-top"], propValues: r$2, value: s2.mt }), [n2, c2] = R$2({ className: "rt-r-mr", customProperties: ["--margin-right"], propValues: r$2, value: s2.mr }), [g2, P2] = R$2({ className: "rt-r-mb", customProperties: ["--margin-bottom"], propValues: r$2, value: s2.mb }), [N2, C] = R$2({ className: "rt-r-ml", customProperties: ["--margin-left"], propValues: r$2, value: s2.ml });
   return [y(e2, a2, l2, p2, n2, g2, N2), l$2(t2, o2, i2, u2, c2, P2, C)];
@@ -19472,23 +19490,23 @@ const c$1 = reactExports.forwardRef((n2, S$1) => {
   return reactExports.createElement(Root, { type: t2, scrollHideDelay: N2, className: y("rt-ScrollAreaRoot", u2, y$1), style: l$2(A2, v2), asChild: a2 }, d$2({ asChild: a2, children: d2 }, (g$1) => reactExports.createElement(reactExports.Fragment, null, reactExports.createElement(Viewport, { ...b2, ref: S$1, className: "rt-ScrollAreaViewport" }, g$1), reactExports.createElement("div", { className: "rt-ScrollAreaViewportFocusRing" }), l2 !== "vertical" ? reactExports.createElement(Scrollbar, { "data-radius": p2, orientation: "horizontal", className: y("rt-ScrollAreaScrollbar", g({ className: "rt-r-size", value: i2, propValues: t$1.size.values })) }, reactExports.createElement(Thumb, { className: "rt-ScrollAreaThumb" })) : null, l2 !== "horizontal" ? reactExports.createElement(Scrollbar, { "data-radius": p2, orientation: "vertical", className: y("rt-ScrollAreaScrollbar", g({ className: "rt-r-size", value: i2, propValues: t$1.size.values })) }, reactExports.createElement(Thumb, { className: "rt-ScrollAreaThumb" })) : null, l2 === "both" ? reactExports.createElement(Corner, { className: "rt-ScrollAreaCorner" }) : null)));
 });
 c$1.displayName = "ScrollArea";
-const n$1 = ["1", "2", "3", "4", "5", "6", "7", "8", "9"], f$3 = ["auto", "always", "hover", "none"], m$2 = { ...o$8, size: { type: "enum", className: "rt-r-size", values: n$1, responsive: true }, ...t$5, ...r$c, ...e$c, ...r$b, underline: { type: "enum", className: "rt-underline", values: f$3, default: "auto" }, ...s$5, ...o$6 };
+const n$1 = ["1", "2", "3", "4", "5", "6", "7", "8", "9"], f$3 = ["auto", "always", "hover", "none"], m$2 = { ...o$7, size: { type: "enum", className: "rt-r-size", values: n$1, responsive: true }, ...t$5, ...r$b, ...e$b, ...r$a, underline: { type: "enum", className: "rt-underline", values: f$3, default: "auto" }, ...s$5, ...o$5 };
 const e = reactExports.forwardRef((p2, t2) => {
   const { children: r2, className: s2, color: n2, asChild: i2, ...m2 } = v(p2, m$2);
-  return reactExports.createElement(p$a, { ...m2, "data-accent-color": n2, ref: t2, asChild: true, className: y("rt-reset", "rt-Link", s2) }, i2 ? r2 : reactExports.createElement("a", null, r2));
+  return reactExports.createElement(p$b, { ...m2, "data-accent-color": n2, ref: t2, asChild: true, className: y("rt-reset", "rt-Link", s2) }, i2 ? r2 : reactExports.createElement("a", null, r2));
 });
 e.displayName = "Link";
-const r$1 = ["1", "2"], t = ["nowrap", "wrap", "wrap-reverse"], o$1 = ["start", "center", "end"], p$1 = { size: { type: "enum", className: "rt-r-size", values: r$1, default: "2", responsive: true }, wrap: { type: "enum", className: "rt-r-fw", values: t, responsive: true }, justify: { type: "enum", className: "rt-r-jc", values: o$1, responsive: true }, ...r$d, ...o$6 };
+const r$1 = ["1", "2"], t = ["nowrap", "wrap", "wrap-reverse"], o$1 = ["start", "center", "end"], p$1 = { size: { type: "enum", className: "rt-r-size", values: r$1, default: "2", responsive: true }, wrap: { type: "enum", className: "rt-r-fw", values: t, responsive: true }, justify: { type: "enum", className: "rt-r-jc", values: o$1, responsive: true }, ...r$c, ...o$5 };
 const r = ["1", "2", "3"], a = ["surface", "ghost"], o = ["auto", "fixed"], n = { size: { type: "enum", className: "rt-r-size", values: r, default: "2", responsive: true }, variant: { type: "enum", className: "rt-variant", values: a, default: "ghost" }, layout: { type: "enum", className: "rt-r-tl", values: o, responsive: true } }, i = ["start", "center", "end", "baseline"], u = { align: { type: "enum", className: "rt-r-va", values: i, parseValue: l, responsive: true } };
 function l(e2) {
   return { baseline: "baseline", start: "top", center: "middle", end: "bottom" }[e2];
 }
-const p = ["start", "center", "end"], f$2 = { justify: { type: "enum", className: "rt-r-ta", values: p, parseValue: c, responsive: true }, ...t$7, ...p$8 };
+const p = ["start", "center", "end"], f$2 = { justify: { type: "enum", className: "rt-r-ta", values: p, parseValue: c, responsive: true }, ...t$7, ...p$9 };
 function c(e2) {
   return { start: "left", center: "center", end: "right" }[e2];
 }
 const m$1 = reactExports.forwardRef((o2, l2) => {
-  const { layout: a2, ...r2 } = n, { className: C, children: c2, layout: y$1, ...i2 } = v(o2, r2, r$a), w = g({ value: y$1, className: n.layout.className, propValues: n.layout.values });
+  const { layout: a2, ...r2 } = n, { className: C, children: c2, layout: y$1, ...i2 } = v(o2, r2, r$9), w = g({ value: y$1, className: n.layout.className, propValues: n.layout.values });
   return reactExports.createElement("div", { ref: l2, className: y("rt-TableRoot", C), ...i2 }, reactExports.createElement(c$1, null, reactExports.createElement("table", { className: y("rt-TableRootTable", w) }, c2)));
 });
 m$1.displayName = "Table.Root";
@@ -19517,12 +19535,12 @@ const R = reactExports.forwardRef((o2, l2) => {
 });
 R.displayName = "Table.RowHeaderCell";
 const m = reactExports.forwardRef((t2, o2) => {
-  const { className: r2, ...e2 } = v(t2, r$a);
+  const { className: r2, ...e2 } = v(t2, r$9);
   return reactExports.createElement(Root2, { ...e2, ref: o2, className: y("rt-TabsRoot", r2) });
 });
 m.displayName = "Tabs.Root";
 const b = reactExports.forwardRef((t2, o2) => {
-  const { className: r2, color: e2, ...n2 } = v(t2, p$1, r$a);
+  const { className: r2, color: e2, ...n2 } = v(t2, p$1, r$9);
   return reactExports.createElement(List, { "data-accent-color": e2, ...n2, asChild: false, ref: o2, className: y("rt-BaseTabList", "rt-TabsList", r2) });
 });
 b.displayName = "Tabs.List";
@@ -19532,7 +19550,7 @@ const P = reactExports.forwardRef((t2, o2) => {
 });
 P.displayName = "Tabs.Trigger";
 const f = reactExports.forwardRef((t2, o2) => {
-  const { className: r2, ...e2 } = v(t2, r$a);
+  const { className: r2, ...e2 } = v(t2, r$9);
   return reactExports.createElement(Content, { ...e2, ref: o2, className: y("rt-TabsContent", r2) });
 });
 f.displayName = "Tabs.Content";
@@ -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,
@@ -19945,7 +20021,9 @@ function normalizeTasks(rawTasks) {
           logs: [],
           tmp: []
         },
-        artifacts: Array.isArray(t2 && t2.artifacts) ? t2.artifacts.slice() : void 0
+        artifacts: Array.isArray(t2 && t2.artifacts) ? t2.artifacts.slice() : void 0,
+        // Preserve tokenUsage if present
+        ...t2 && t2.tokenUsage ? { tokenUsage: t2.tokenUsage } : {}
       };
       tasks[name] = taskObj;
     });
@@ -19955,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,
@@ -19967,21 +20045,15 @@ function normalizeTasks(rawTasks) {
         // Preserve stage metadata for DAG visualization
         ...typeof t2?.currentStage === "string" && t2.currentStage.length > 0 ? { currentStage: t2.currentStage } : {},
         ...typeof t2?.failedStage === "string" && t2.failedStage.length > 0 ? { failedStage: t2.failedStage } : {},
-        artifacts: Array.isArray(t2 && t2.artifacts) ? t2.artifacts.slice() : void 0
+        artifacts: Array.isArray(t2 && t2.artifacts) ? t2.artifacts.slice() : void 0,
+        // Preserve tokenUsage if present
+        ...t2 && t2.tokenUsage ? { tokenUsage: t2.tokenUsage } : {}
       };
     });
     return { tasks, warnings };
   }
   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;
@@ -19989,14 +20061,14 @@ 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 };
 }
 function adaptJobSummary(apiJob) {
   const id = apiJob.jobId;
   const name = apiJob.title || "";
-  const rawTasks = apiJob.tasksStatus;
+  const rawTasks = apiJob.tasks;
   const location = apiJob.location;
   const current = apiJob.current;
   const currentStage = apiJob.currentStage;
@@ -20022,13 +20094,25 @@ function adaptJobSummary(apiJob) {
   const { pipeline, pipelineLabel } = derivePipelineMetadata(apiJob);
   if (pipeline != null) job.pipeline = pipeline;
   if (pipelineLabel != null) job.pipelineLabel = pipelineLabel;
+  if (apiJob.costsSummary) {
+    job.costsSummary = {
+      totalTokens: apiJob.costsSummary.totalTokens || 0,
+      totalInputTokens: apiJob.costsSummary.totalInputTokens || 0,
+      totalOutputTokens: apiJob.costsSummary.totalOutputTokens || 0,
+      totalCost: apiJob.costsSummary.totalCost || 0,
+      totalInputCost: apiJob.costsSummary.totalInputCost || 0,
+      totalOutputCost: apiJob.costsSummary.totalOutputCost || 0
+    };
+    job.totalCost = job.costsSummary.totalCost;
+    job.totalTokens = job.costsSummary.totalTokens;
+  }
   if (warnings.length > 0) job.__warnings = warnings;
   return job;
 }
 function adaptJobDetail(apiDetail) {
   const id = apiDetail.jobId;
   const name = apiDetail.title || "";
-  const rawTasks = apiDetail.tasksStatus;
+  const rawTasks = apiDetail.tasks;
   const location = apiDetail.location;
   const current = apiDetail.current;
   const currentStage = apiDetail.currentStage;
@@ -20054,104 +20138,12 @@ function adaptJobDetail(apiDetail) {
   const { pipeline, pipelineLabel } = derivePipelineMetadata(apiDetail);
   if (pipeline != null) detail.pipeline = pipeline;
   if (pipelineLabel != null) detail.pipelineLabel = pipelineLabel;
+  if (apiDetail.costs) {
+    detail.costs = apiDetail.costs;
+  }
   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
  *
@@ -20257,19 +20249,20 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$3 = [
-  ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
-  ["path", { d: "M19 12H5", key: "x3x0zl" }]
-];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$3);
+const __iconNode$3 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$3);
 /**
  * @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$2 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$2);
+const __iconNode$2 = [
+  ["path", { d: "m18 16 4-4-4-4", key: "1inbqp" }],
+  ["path", { d: "m6 8-4 4 4 4", key: "15zrgr" }],
+  ["path", { d: "m14.5 4-5 16", key: "e7oirm" }]
+];
+const CodeXml = createLucideIcon("code-xml", __iconNode$2);
 /**
  * @license lucide-react v0.544.0 - ISC
  *
@@ -20277,16 +20270,12 @@ const ChevronRight = createLucideIcon("chevron-right", __iconNode$2);
  * See the LICENSE file in the root directory of this source tree.
  */
 const __iconNode$1 = [
-  ["path", { d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8", key: "5wwlr5" }],
-  [
-    "path",
-    {
-      d: "M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z",
-      key: "r6nss1"
-    }
-  ]
+  ["path", { d: "M10 2h4", key: "n1abiw" }],
+  ["path", { d: "M12 14v-4", key: "1evpnu" }],
+  ["path", { d: "M4 13a8 8 0 0 1 8-7 8 8 0 1 1-5.3 14L4 17.6", key: "1ts96g" }],
+  ["path", { d: "M9 17H4v5", key: "8t5av" }]
 ];
-const House = createLucideIcon("house", __iconNode$1);
+const TimerReset = createLucideIcon("timer-reset", __iconNode$1);
 /**
  * @license lucide-react v0.544.0 - ISC
  *
@@ -20294,12 +20283,83 @@ const House = createLucideIcon("house", __iconNode$1);
  * See the LICENSE file in the root directory of this source tree.
  */
 const __iconNode = [
-  ["path", { d: "M10 2h4", key: "n1abiw" }],
-  ["path", { d: "M12 14v-4", key: "1evpnu" }],
-  ["path", { d: "M4 13a8 8 0 0 1 8-7 8 8 0 1 1-5.3 14L4 17.6", key: "1ts96g" }],
-  ["path", { d: "M9 17H4v5", key: "8t5av" }]
+  ["path", { d: "M12 3v12", key: "1x0j5s" }],
+  ["path", { d: "m17 8-5-5-5 5", key: "7q97r8" }],
+  ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }]
 ];
-const TimerReset = createLucideIcon("timer-reset", __iconNode);
+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;
@@ -20321,42 +20381,209 @@ function Badge({ children, intent = "gray", className = "", ...props }) {
 }
 const statusBadge = (status) => {
   switch (status) {
-    case "running":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "info", "aria-label": "Running", children: "Running" });
-    case "failed":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "error", "aria-label": "Failed", children: "Failed" });
-    case "completed":
-    case "complete":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "success", "aria-label": "Completed", children: "Completed" });
-    case "pending":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "default", "aria-label": "Pending", children: "Pending" });
+    case TaskState.RUNNING:
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { intent: "blue", "aria-label": "Running", children: "Running" });
+    case TaskState.FAILED:
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { intent: "red", "aria-label": "Failed", children: "Failed" });
+    case TaskState.DONE:
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { intent: "green", "aria-label": "Completed", children: "Completed" });
+    case TaskState.PENDING:
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { intent: "gray", "aria-label": "Pending", children: "Pending" });
     default:
       return null;
   }
 };
 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";
   }
 };
-function JobTable({
-  jobs,
-  pipeline,
-  onOpenJob,
-  overallElapsed,
-  now
+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);
+  return `$${formatted.replace(/\.?0+$/, "")}`;
+}
+function formatTokensCompact$1(n2) {
+  if (typeof n2 !== "number" || n2 === 0) return "0 tok";
+  if (n2 >= 1e6) {
+    return `${(n2 / 1e6).toFixed(1).replace(/\.0$/, "")}M tok`;
+  } else if (n2 >= 1e3) {
+    return `${(n2 / 1e3).toFixed(1).replace(/\.0$/, "")}k tok`;
+  }
+  return `${n2} tok`;
+}
+function JobTable({ jobs, pipeline, onOpenJob }) {
   if (jobs.length === 0) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(p$6, { className: "p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$a, { size: "2", className: "text-slate-600", children: "No jobs to show here yet." }) });
+    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." }) });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(p$6, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(m$1, { radius: "none", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(p$7, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(m$1, { radius: "none", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(d, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(P$1, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(f$1, { children: "Job Name" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(f$1, { children: "Pipeline" }),
@@ -20364,11 +20591,12 @@ function JobTable({
       /* @__PURE__ */ jsxRuntimeExports.jsx(f$1, { children: "Current Task" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(f$1, { children: "Progress" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(f$1, { children: "Tasks" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(f$1, { children: "Cost" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(f$1, { children: "Duration" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(f$1, { className: "w-12" })
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(b$1, { children: jobs.map((job) => {
-      const jobTitle = job.title || job.name;
+      const jobTitle = job.name;
       const taskById = Array.isArray(job.tasks) ? Object.fromEntries(
         (job.tasks || []).map((t2) => {
           if (typeof t2 === "string") return [t2, { id: t2, name: t2 }];
@@ -20376,13 +20604,14 @@ 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 || {};
+      const totalCost = job.totalCost || costsSummary.totalCost || 0;
+      const totalTokens = job.totalTokens || costsSummary.totalTokens || 0;
       const hasValidId = Boolean(job.id);
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(
         P$1,
@@ -20394,24 +20623,38 @@ function JobTable({
           "aria-label": hasValidId ? `Open ${jobTitle}` : `${jobTitle} - No valid job ID, cannot open details`,
           title: hasValidId ? void 0 : "This job cannot be opened because it lacks a valid ID",
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(T, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$3, { direction: "column", gap: "1", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(p$a, { size: "2", weight: "medium", className: "text-slate-900", children: jobTitle }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(p$a, { size: "1", className: "text-slate-500", children: job.id })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(T, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$4, { direction: "column", gap: "1", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "2", weight: "medium", className: "text-slate-900", children: jobTitle }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "1", className: "text-slate-500", children: job.id })
             ] }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(T, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$3, { direction: "column", gap: "1", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(p$a, { size: "2", className: "text-slate-900", children: job.pipelineLabel || job.pipeline || "—" }),
-              job.pipelineLabel && job.pipeline && /* @__PURE__ */ jsxRuntimeExports.jsx(p$a, { size: "1", className: "text-slate-500", children: job.pipeline })
+            /* @__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-900", children: job.pipelineLabel || job.pipeline || "—" }),
+              job.pipelineLabel && job.pipeline && /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "1", className: "text-slate-500", children: job.pipeline })
             ] }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(T, { children: statusBadge(job.status) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(T, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$3, { direction: "column", gap: "1", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(p$a, { size: "2", className: "text-slate-700", children: currentTaskName ? currentTaskName : job.status === "completed" ? "—" : job.current ?? "—" }),
-              currentTask && /* @__PURE__ */ jsxRuntimeExports.jsx(p$a, { size: "1", className: "text-slate-500", children: [
+            /* @__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 === "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$3, { direction: "column", gap: "2", className: "w-32", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(T, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$4, { direction: "column", gap: "2", className: "w-32", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 Progress,
                 {
@@ -20420,22 +20663,33 @@ function JobTable({
                   "aria-label": `Progress ${progress}%`
                 }
               ),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(p$a, { size: "1", className: "text-slate-500", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(p$b, { size: "1", className: "text-slate-500", children: [
                 progress,
                 "%"
               ] })
             ] }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(T, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$a, { size: "2", className: "text-slate-700", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(T, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$b, { size: "2", className: "text-slate-700", children: [
               totalCompleted,
               " of ",
               totalTasks
             ] }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(T, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$3, { align: "center", gap: "1", children: [
+            /* @__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: totalCost > 0 ? formatCurrency4$1(totalCost) : "—" }),
+              totalTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "1", className: "text-slate-500", children: formatTokensCompact$1(totalTokens) })
+            ] }) }),
+            /* @__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$a, { 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$3,
+              o$2,
               {
                 variant: "ghost",
                 size: "1",
@@ -20462,7 +20716,7 @@ function Button({
   const color = variant === "destructive" ? "red" : void 0;
   const combinedClassName = `transition-colors duration-200 ${className}`;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    o$3,
+    o$2,
     {
       variant: radixVariant,
       size: radixSize,
@@ -20472,34 +20726,93 @@ function Button({
     }
   );
 }
-const normalizeUploadError = (err) => {
-  if (!err) return "Upload failed";
-  if (typeof err === "string") return err;
-  if (err instanceof Error) return err.message;
-  if (typeof err === "object") {
-    if ("message" in err && err.message) return String(err.message);
-    if ("error" in err && err.error) return String(err.error);
+const Logo = () => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 1200 1200",
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        fill: "#009966",
+        d: "M406.13 988.31c-17.297 75.047-84.562 131.11-164.86 131.11-93.375 0-169.18-75.797-169.18-169.18s75.797-169.18 169.18-169.18 169.18 75.797 169.18 169.18v1.266h447.74v-167.9H671.63c-14.859 0-29.062-5.906-39.562-16.406s-16.406-24.703-16.406-39.562v-37.312h-317.16c-10.312 0-18.656-8.344-18.656-18.656V355.78h-147.94c-14.859 0-29.062-5.906-39.562-16.406s-16.406-24.75-16.406-39.562v-111.94c0-14.859 5.906-29.109 16.406-39.562 10.5-10.5 24.75-16.406 39.562-16.406h391.78c14.859 0 29.062 5.906 39.562 16.406s16.406 24.75 16.406 39.562v37.312h202.4c9.281-84.609 81.094-150.52 168.14-150.52 93.375 0 169.18 75.797 169.18 169.18s-75.797 169.18-169.18 169.18c-87.047 0-158.86-65.906-168.14-150.52h-202.4v37.312c0 14.859-5.906 29.062-16.406 39.562s-24.75 16.406-39.562 16.406h-206.53v297.24h298.5v-37.312c0-14.859 5.906-29.062 16.406-39.562s24.703-16.406 39.562-16.406h392.63c14.859 0 29.062 5.906 39.562 16.406s16.406 24.703 16.406 39.562v111.94c0 14.859-5.906 29.062-16.406 39.562s-24.75 16.406-39.562 16.406h-168.74v186.56c0 10.312-8.344 18.656-18.656 18.656h-466.4c-1.5 0-2.906-.187-4.312-.516zM225.19 262.45h18.656c10.312 0 18.656-8.344 18.656-18.656s-8.344-18.656-18.656-18.656H225.19c-10.312 0-18.656 8.344-18.656 18.656s8.344 18.656 18.656 18.656zm186.56 0h18.656c10.312 0 18.656-8.344 18.656-18.656s-8.344-18.656-18.656-18.656H411.75c-10.312 0-18.656 8.344-18.656 18.656s8.344 18.656 18.656 18.656zm-93.281 0h18.656c10.312 0 18.656-8.344 18.656-18.656s-8.344-18.656-18.656-18.656h-18.656c-10.312 0-18.656 8.344-18.656 18.656s8.344 18.656 18.656 18.656zm616.18 0h85.5c10.312 0 18.656-8.344 18.656-18.656s-8.344-18.656-18.656-18.656h-85.5l29.062-22.594c8.109-6.328 9.609-18.047 3.281-26.156s-18.047-9.609-26.156-3.281l-71.953 55.969a18.61 18.61 0 0 0 0 29.438l71.953 55.969c8.109 6.328 19.875 4.875 26.156-3.281 6.328-8.109 4.875-19.875-3.281-26.203l-29.062-22.594zm-779.95 696.66l50.391 50.391c7.266 7.313 19.078 7.313 26.391 0l100.73-100.73c7.266-7.266 7.266-19.078 0-26.391-7.266-7.266-19.078-7.266-26.391 0l-87.562 87.562-37.172-37.172c-7.266-7.266-19.078-7.266-26.391 0-7.266 7.266-7.266 19.078 0 26.391zm797.21-268.78h18.656c10.312 0 18.656-8.344 18.656-18.656s-8.344-18.656-18.656-18.656h-18.656c-10.312 0-18.656 8.344-18.656 18.656s8.344 18.656 18.656 18.656zm-186.56 0h18.656c10.312 0 18.656-8.344 18.656-18.656s-8.344-18.656-18.656-18.656h-18.656c-10.312 0-18.656 8.344-18.656 18.656s8.344 18.656 18.656 18.656zm93.281 0h18.656c10.312 0 18.656-8.344 18.656-18.656s-8.344-18.656-18.656-18.656H858.63c-10.312 0-18.656 8.344-18.656 18.656s8.344 18.656 18.656 18.656z",
+        fillRule: "evenodd"
+      }
+    )
   }
-  return "Upload failed";
-};
-function UploadSeed({ onUploadSuccess }) {
-  const fileInputRef = React.useRef(null);
-  const [showSample, setShowSample] = reactExports.useState(false);
-  const [error, setError] = reactExports.useState(null);
-  const sampleSeed = {
-    name: "some-name",
-    pipeline: "content-generation",
-    data: {
-      type: "some-type",
-      contentType: "blog-post",
-      targetAudience: "software-developers",
-      tone: "professional-yet-accessible",
-      length: "1500-2000 words",
-      outputFormat: "blog-post"
-    }
-  };
-  const handleFileChange = async (event) => {
-    const files = event.target.files;
+);
+function PageSubheader({
+  breadcrumbs = [],
+  children,
+  maxWidth = "max-w-7xl"
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    p$7,
+    {
+      role: "region",
+      "aria-label": "Page header",
+      className: "border-b border-gray-300 bg-gray-1/60 backdrop-blur supports-[backdrop-filter]:bg-gray-1/40 mb-4",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        p$4,
+        {
+          align: "center",
+          justify: "between",
+          className: `mx-auto w-full ${maxWidth} px-1.5 py-3`,
+          gap: "4",
+          wrap: "wrap",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(p$4, { align: "center", gap: "3", className: "min-w-0 flex-1", children: breadcrumbs.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("nav", { "aria-label": "Breadcrumb", className: "shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("ol", { className: "flex items-center gap-2 text-sm text-gray-11", children: breadcrumbs.map((crumb, index2) => {
+              const isLast = index2 === breadcrumbs.length - 1;
+              return /* @__PURE__ */ jsxRuntimeExports.jsxs(React.Fragment, { children: [
+                index2 > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  ChevronRight,
+                  {
+                    className: "h-4 w-4 text-gray-9",
+                    "aria-hidden": "true"
+                  }
+                ),
+                crumb.href ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Link,
+                  {
+                    to: crumb.href,
+                    className: "hover:text-gray-12 transition-colors underline-offset-4 hover:underline",
+                    children: crumb.label
+                  }
+                ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  p$b,
+                  {
+                    as: "span",
+                    "aria-current": isLast ? "page" : void 0,
+                    className: isLast ? "text-gray-12 font-medium" : "",
+                    children: crumb.label
+                  }
+                )
+              ] }, index2);
+            }) }) }) }),
+            children && /* @__PURE__ */ jsxRuntimeExports.jsx(p$4, { align: "center", gap: "3", className: "shrink-0", children })
+          ]
+        }
+      )
+    }
+  );
+}
+const normalizeUploadError = (err) => {
+  if (!err) return "Upload failed";
+  if (typeof err === "string") return err;
+  if (err instanceof Error) return err.message;
+  if (typeof err === "object") {
+    if ("message" in err && err.message) return String(err.message);
+    if ("error" in err && err.error) return String(err.error);
+  }
+  return "Upload failed";
+};
+function UploadSeed({ onUploadSuccess }) {
+  const fileInputRef = React.useRef(null);
+  const [error, setError] = reactExports.useState(null);
+  const handleFileChange = async (event) => {
+    const files = event.target.files;
     if (!files || files.length === 0) return;
     const file = files[0];
     try {
@@ -20558,7 +20871,7 @@ function UploadSeed({ onUploadSuccess }) {
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-testid": "upload-seed", className: "space-y-3", children: [
     error && /* @__PURE__ */ jsxRuntimeExports.jsx(
-      p$6,
+      p$7,
       {
         role: "alert",
         "data-testid": "upload-error",
@@ -20631,80 +20944,62 @@ function UploadSeed({ onUploadSuccess }) {
         onChange: handleFileChange,
         "data-testid": "file-input"
       }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => setShowSample(!showSample),
-          className: "w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 transition-colors flex items-center justify-between",
-          "aria-expanded": showSample,
-          "data-testid": "sample-toggle",
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-700", children: "Need help? View sample seed file structure" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "svg",
-              {
-                className: `w-4 h-4 text-gray-500 transition-transform ${showSample ? "rotate-180" : ""}`,
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: 2,
-                    d: "M19 9l-7 7-7-7"
-                  }
-                )
-              }
-            )
-          ]
-        }
-      ),
-      showSample && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 bg-white border-t border-gray-200", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-600", children: "Use this structure as a reference for your seed file:" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => navigator.clipboard.writeText(
-                JSON.stringify(sampleSeed, null, 2)
-              ),
-              className: "text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded hover:bg-blue-200 transition-colors",
-              "data-testid": "copy-sample",
-              children: "Copy"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-xs bg-gray-50 p-3 rounded overflow-auto max-h-60", children: JSON.stringify(sampleSeed, null, 2) })
-      ] })
-    ] })
+    )
   ] });
 }
 function Layout({
   children,
   title,
+  pageTitle,
+  breadcrumbs,
   actions,
-  showBackButton = false,
   backTo = "/",
   maxWidth = "max-w-7xl"
 }) {
   const navigate = useNavigate();
   const location = useLocation();
+  const [isUploadOpen, setIsUploadOpen] = reactExports.useState(false);
+  const [seedUploadSuccess, setSeedUploadSuccess] = reactExports.useState(null);
+  const [seedUploadTimer, setSeedUploadTimer] = reactExports.useState(null);
+  const uploadPanelRef = reactExports.useRef(null);
   const isActivePath = (path) => {
-    if (location.pathname === "/") return true;
+    if (location.pathname.startsWith(path)) return true;
     return false;
   };
-  const handleBack = () => {
-    navigate(backTo);
+  const toggleUploadPanel = () => {
+    setIsUploadOpen(!isUploadOpen);
+  };
+  const handleSeedUploadSuccess = ({ jobName }) => {
+    if (seedUploadTimer) {
+      clearTimeout(seedUploadTimer);
+    }
+    setSeedUploadSuccess(jobName);
+    const timer = setTimeout(() => {
+      setSeedUploadSuccess(null);
+      setSeedUploadTimer(null);
+    }, 5e3);
+    setSeedUploadTimer(timer);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$6, { className: "min-h-screen bg-gray-1", children: [
+  reactExports.useEffect(() => {
+    return () => {
+      if (seedUploadTimer) {
+        clearTimeout(seedUploadTimer);
+      }
+    };
+  }, [seedUploadTimer]);
+  reactExports.useEffect(() => {
+    if (isUploadOpen && uploadPanelRef.current) {
+      const uploadArea = uploadPanelRef.current.querySelector(
+        '[data-testid="upload-area"]'
+      );
+      if (uploadArea) {
+        uploadArea.focus();
+      }
+    }
+  }, [isUploadOpen]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$7, { className: "min-h-screen bg-gray-1", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
-      p$6,
+      p$7,
       {
         as: "a",
         href: "#main-content",
@@ -20713,40 +21008,55 @@ function Layout({
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
-      p$6,
+      p$7,
       {
         role: "banner",
         className: "sticky top-0 z-20 border-b border-gray-300 bg-gray-1/80 backdrop-blur supports-[backdrop-filter]:bg-gray-1/60",
         children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          p$3,
+          p$4,
           {
             align: "center",
             justify: "between",
             className: `mx-auto w-full ${maxWidth} px-4 sm:px-6 lg:px-8 py-4`,
             gap: "4",
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(p$3, { align: "center", gap: "3", 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$a, { size: "2", children: "Go back" }) })
-                ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(p$4, { align: "center", className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  p$7,
+                  {
+                    asChild: true,
+                    className: "shrink-0",
+                    style: { width: "80px", height: "60px" },
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Link,
+                      {
+                        to: "/",
+                        "aria-label": "Go to homepage",
+                        className: "rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Logo, {})
+                      }
+                    )
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  r$9,
+                  p$7,
                   {
-                    size: "5",
-                    weight: "medium",
-                    className: "text-gray-12 truncate",
-                    children: title || "Prompt Pipeline"
+                    asChild: true,
+                    className: "shrink-0 cursor-pointer hover:bg-gray-3 rounded p-1 -m-1 transition-colors",
+                    onClick: () => navigate("/"),
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      r$8,
+                      {
+                        size: "6",
+                        weight: "medium",
+                        className: "text-gray-12 truncate",
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                          "Prompt",
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                          "Pipeline"
+                        ] })
+                      }
+                    )
                   }
                 )
               ] }),
@@ -20756,21 +21066,66 @@ function Layout({
                   role: "navigation",
                   "aria-label": "Main navigation",
                   className: "hidden md:flex",
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$3, { align: "center", gap: "6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$4, { align: "center", gap: "6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                     e,
                     {
-                      href: "/",
-                      className: `text-sm font-medium transition-colors hover:text-blue-600 ${isActivePath() ? "text-blue-600" : "text-gray-11 hover:text-gray-12"}`,
-                      "aria-current": isActivePath() ? "page" : void 0,
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$3, { align: "center", gap: "2", children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx(House, { className: "h-4 w-4" }),
-                        "Dashboard"
+                      href: "/code",
+                      className: `text-sm font-medium transition-colors hover:text-blue-600 ${isActivePath("/code") ? "text-blue-600" : "text-gray-11 hover:text-gray-12"}`,
+                      "aria-current": isActivePath("/code") ? "page" : void 0,
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$4, { align: "center", gap: "2", children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(CodeXml, { className: "h-4 w-4" }),
+                        "Help"
                       ] })
                     }
                   ) })
                 }
               ),
-              actions && /* @__PURE__ */ jsxRuntimeExports.jsx(p$3, { align: "center", gap: "3", className: "shrink-0", children: actions })
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(p$4, { align: "center", gap: "3", className: "shrink-0", children: [
+                actions,
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(Root3, { delayDuration: 200, children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    Button,
+                    {
+                      size: "sm",
+                      variant: "default",
+                      onClick: toggleUploadPanel,
+                      "aria-controls": "layout-upload-panel",
+                      "aria-expanded": isUploadOpen,
+                      children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "h-4 w-4" }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "2", className: "ml-2", children: "Upload Seed" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Content2, { side: "bottom", sideOffset: 5, children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "2", children: "Upload seed file" }) })
+                ] })
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    isUploadOpen && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      p$7,
+      {
+        id: "layout-upload-panel",
+        ref: uploadPanelRef,
+        role: "region",
+        "aria-label": "Upload seed file",
+        className: "bg-blue-50",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          p$4,
+          {
+            direction: "column",
+            gap: "3",
+            className: `mx-auto w-full ${maxWidth} px-4 sm:px-6 lg:px-8 py-4`,
+            children: [
+              seedUploadSuccess && /* @__PURE__ */ jsxRuntimeExports.jsx(p$7, { className: "rounded-md bg-green-50 p-3 border border-green-200", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$b, { size: "2", className: "text-green-800", children: [
+                "Job ",
+                /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: seedUploadSuccess }),
+                " created successfully"
+              ] }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(UploadSeed, { onUploadSuccess: handleSeedUploadSuccess })
             ]
           }
         )
@@ -20781,7 +21136,7 @@ function Layout({
       {
         id: "main-content",
         role: "main",
-        className: `mx-auto w-full ${maxWidth} px-4 sm:px-6 lg:px-8 py-6`,
+        className: `mx-auto w-full ${maxWidth} px-4 sm:px-6 lg:px-8`,
         children
       }
     )
@@ -20799,36 +21154,32 @@ function PromptPipelineDashboard({ isConnected }) {
     return src.map(adaptJobSummary);
   }, [apiJobs, error]);
   const [activeTab, setActiveTab] = reactExports.useState("current");
-  const [seedUploadSuccess, setSeedUploadSuccess] = reactExports.useState(null);
-  const [seedUploadTimer, setSeedUploadTimer] = reactExports.useState(null);
-  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(() => {
@@ -20843,94 +21194,76 @@ function PromptPipelineDashboard({ isConnected }) {
       console.warn(`Cannot open job "${job.name}" - no valid job ID available`);
     }
   };
-  const handleSeedUploadSuccess = ({ jobName }) => {
-    if (seedUploadTimer) {
-      clearTimeout(seedUploadTimer);
-    }
-    setSeedUploadSuccess(jobName);
-    const timer = setTimeout(() => {
-      setSeedUploadSuccess(null);
-      setSeedUploadTimer(null);
-    }, 5e3);
-    setSeedUploadTimer(timer);
-  };
-  reactExports.useEffect(() => {
-    return () => {
-      if (seedUploadTimer) {
-        clearTimeout(seedUploadTimer);
-      }
-    };
-  }, [seedUploadTimer]);
-  const headerActions = runningJobs.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(p$3, { align: "center", gap: "2", className: "text-gray-11", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(p$a, { size: "1", weight: "medium", children: "Overall Progress" }),
+  const headerActions = runningJobs.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(p$4, { align: "center", gap: "2", className: "text-gray-11", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "1", weight: "medium", children: "Overall Progress" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Progress, { value: aggregateProgress, className: "w-20" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(p$a, { size: "1", className: "text-gray-9", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(p$b, { size: "1", className: "text-gray-9", children: [
       aggregateProgress,
       "%"
     ] })
   ] });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Layout, { title: "Prompt Pipeline", actions: headerActions, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(o$2, { className: "mb-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$3, { direction: "column", gap: "3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(r$9, { size: "4", weight: "medium", className: "text-gray-12", children: "Upload Seed File" }),
-      seedUploadSuccess && /* @__PURE__ */ jsxRuntimeExports.jsx(p$6, { className: "rounded-md bg-green-50 p-3 border border-green-200", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$a, { size: "2", className: "text-green-800", children: [
-        "Job ",
-        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: seedUploadSuccess }),
-        " created successfully"
-      ] }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(UploadSeed, { onUploadSuccess: handleSeedUploadSuccess })
-    ] }) }),
-    error && /* @__PURE__ */ jsxRuntimeExports.jsx(p$6, { className: "mb-4 rounded-md bg-yellow-50 p-3 border border-yellow-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$a, { size: "2", className: "text-yellow-800", children: "Unable to load jobs from the server" }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(m, { value: activeTab, onValueChange: setActiveTab, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(b, { "aria-label": "Job filters", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(P, { value: "current", children: [
-          "Current (",
-          currentCount,
-          ")"
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(P, { value: "errors", children: [
-          "Errors (",
-          errorCount,
-          ")"
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(P, { value: "complete", children: [
-          "Completed (",
-          completedCount,
-          ")"
-        ] })
-      ] }),
-      /* @__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
-        }
-      ) })
-    ] })
+    error && /* @__PURE__ */ jsxRuntimeExports.jsx(p$7, { className: "mb-4 rounded-md bg-yellow-50 p-3 border border-yellow-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "2", className: "text-yellow-800", children: "Unable to load jobs from the server" }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      m,
+      {
+        value: activeTab,
+        onValueChange: setActiveTab,
+        className: "mt-4",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(b, { "aria-label": "Job filters", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(P, { value: "current", children: [
+              "Current (",
+              currentCount,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(P, { value: "errors", children: [
+              "Errors (",
+              errorCount,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(P, { value: "complete", children: [
+              "Completed (",
+              completedCount,
+              ")"
+            ] })
+          ] }),
+          /* @__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,
@@ -21366,82 +21699,428 @@ function TaskFilePane({
     ] })
   ] });
 }
-const CATEGORY_KEYS = ["artifacts", "logs", "tmp"];
-const LEGACY_KEY_SET = /* @__PURE__ */ new Set([
-  "input",
-  "inputs",
-  "output",
-  "outputs",
-  "legacyInput",
-  "legacyOutput",
-  "inputFiles",
-  "outputFiles"
-]);
-function createEmptyTaskFiles() {
-  return { artifacts: [], logs: [], tmp: [] };
-}
-function coerceStringArray(value) {
-  if (!Array.isArray(value)) return [];
-  return value.filter((entry) => typeof entry === "string");
-}
-function reportUnsupportedKeys(keys) {
-  if (keys.length === 0) return;
-  const legacyKeys = keys.filter((key) => LEGACY_KEY_SET.has(key));
-  const otherKeys = keys.filter((key) => !LEGACY_KEY_SET.has(key));
-  if (legacyKeys.length > 0) {
-    console.warn(
-      `[task-files] Ignoring unsupported legacy keys: ${legacyKeys.join(", ")}`
-    );
-  }
-  if (otherKeys.length > 0) {
-    console.warn(
-      `[task-files] Ignoring unsupported task.files keys: ${otherKeys.join(", ")}`
-    );
-  }
-}
-function normalizeTaskFiles(candidate) {
-  const safeCandidate = candidate && typeof candidate === "object" && !Array.isArray(candidate) ? candidate : {};
-  const unsupportedKeys = Object.keys(safeCandidate).filter(
-    (key) => !CATEGORY_KEYS.includes(key)
-  );
-  reportUnsupportedKeys(unsupportedKeys);
-  return {
-    artifacts: coerceStringArray(safeCandidate.artifacts),
-    logs: coerceStringArray(safeCandidate.logs),
-    tmp: coerceStringArray(safeCandidate.tmp)
-  };
-}
-function ensureTaskFiles(task) {
-  const normalized = normalizeTaskFiles(task?.files);
-  if (task && typeof task === "object") {
-    task.files = normalized;
-  }
-  return normalized;
-}
-function matchesTaskIdentifier(task, taskId) {
-  if (!task || typeof task !== "object" || taskId == null) return false;
-  const target = String(taskId);
-  if (task.id != null && String(task.id) === target) return true;
-  if (task.name != null && String(task.name) === target) return true;
-  return false;
-}
-function findTaskCandidate(tasks, taskId) {
-  if (!tasks || taskId == null) return null;
-  if (Array.isArray(tasks)) {
-    if (typeof taskId === "number" && tasks[taskId]) {
-      const indexedTask = tasks[taskId];
-      if (indexedTask && typeof indexedTask === "object") {
-        return indexedTask;
-      }
+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";
     }
-    return tasks.find((task) => matchesTaskIdentifier(task, taskId)) ?? null;
-  }
-  if (typeof tasks === "object") {
-    const direct = tasks[taskId];
-    if (direct && typeof direct === "object") {
-      return direct;
+  };
+  reactExports.useEffect(() => {
+    if (open && closeButtonRef.current) {
+      closeButtonRef.current.focus();
     }
-    for (const task of Object.values(tasks)) {
+  }, [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",
+  "inputFiles",
+  "outputFiles"
+]);
+function createEmptyTaskFiles() {
+  return { artifacts: [], logs: [], tmp: [] };
+}
+function coerceStringArray(value) {
+  if (!Array.isArray(value)) return [];
+  return value.filter((entry) => typeof entry === "string");
+}
+function reportUnsupportedKeys(keys) {
+  if (keys.length === 0) return;
+  const legacyKeys = keys.filter((key) => LEGACY_KEY_SET.has(key));
+  const otherKeys = keys.filter((key) => !LEGACY_KEY_SET.has(key));
+  if (legacyKeys.length > 0) {
+    console.warn(
+      `[task-files] Ignoring unsupported legacy keys: ${legacyKeys.join(", ")}`
+    );
+  }
+  if (otherKeys.length > 0) {
+    console.warn(
+      `[task-files] Ignoring unsupported task.files keys: ${otherKeys.join(", ")}`
+    );
+  }
+}
+function normalizeTaskFiles(candidate) {
+  const safeCandidate = candidate && typeof candidate === "object" && !Array.isArray(candidate) ? candidate : {};
+  const unsupportedKeys = Object.keys(safeCandidate).filter(
+    (key) => !CATEGORY_KEYS.includes(key)
+  );
+  reportUnsupportedKeys(unsupportedKeys);
+  return {
+    artifacts: coerceStringArray(safeCandidate.artifacts),
+    logs: coerceStringArray(safeCandidate.logs),
+    tmp: coerceStringArray(safeCandidate.tmp)
+  };
+}
+function ensureTaskFiles(task) {
+  const normalized = normalizeTaskFiles(task?.files);
+  if (task && typeof task === "object") {
+    task.files = normalized;
+  }
+  return normalized;
+}
+function matchesTaskIdentifier(task, taskId) {
+  if (!task || typeof task !== "object" || taskId == null) return false;
+  const target = String(taskId);
+  if (task.id != null && String(task.id) === target) return true;
+  if (task.name != null && String(task.name) === target) return true;
+  return false;
+}
+function findTaskCandidate(tasks, taskId) {
+  if (!tasks || taskId == null) return null;
+  if (Array.isArray(tasks)) {
+    if (typeof taskId === "number" && tasks[taskId]) {
+      const indexedTask = tasks[taskId];
+      if (indexedTask && typeof indexedTask === "object") {
+        return indexedTask;
+      }
+    }
+    return tasks.find((task) => matchesTaskIdentifier(task, taskId)) ?? null;
+  }
+  if (typeof tasks === "object") {
+    const direct = tasks[taskId];
+    if (direct && typeof direct === "object") {
+      return direct;
+    }
+    for (const task of Object.values(tasks)) {
       if (matchesTaskIdentifier(task, taskId)) {
         return task;
       }
@@ -21467,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;
 }
@@ -21489,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,
@@ -21517,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]
@@ -21564,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);
@@ -21578,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) => {
@@ -21604,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];
@@ -21638,10 +22434,10 @@ function DAGGrid({
             });
           }
         }
+        prevGeometryRef.current = currentGeometry;
         setLines(newLines);
-      } finally {
-        isComputing = false;
-      }
+        rafRef.current = null;
+      });
     };
     compute();
     let ro = null;
@@ -21658,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();
-    }
-  }, [openIdx]);
-  React.useEffect(() => {
-    setFilePaneFilename(null);
-    setFilePaneOpen(false);
-  }, [filePaneType]);
-  React.useEffect(() => {
-    if (openIdx === null) {
-      setFilePaneFilename(null);
-      setFilePaneOpen(false);
-      return;
+  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);
     }
-    setFilePaneType("artifacts");
-    setFilePaneFilename(null);
-    setFilePaneOpen(false);
-  }, [openIdx]);
+  };
+  const handleRestartCancel = () => {
+    setRestartModalOpen(false);
+    setRestartTaskId(null);
+  };
+  React.useEffect(() => {
+    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",
       {
@@ -21736,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(
@@ -21745,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)"
             }
@@ -21774,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
       }
     )
   ] });
@@ -22003,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)
     };
@@ -22026,28 +22767,35 @@ 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;
 }
-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 ?? "" : ""
-  );
-  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]);
+function formatCurrency4(x) {
+  if (typeof x !== "number" || x === 0) return "$0.0000";
+  const formatted = x.toFixed(4);
+  return `$${formatted.replace(/\.?0+$/, "")}`;
+}
+function formatTokensCompact(n2) {
+  if (typeof n2 !== "number" || n2 === 0) return "0 tok";
+  if (n2 >= 1e6) {
+    return `${(n2 / 1e6).toFixed(1).replace(/\.0$/, "")}M tokens`;
+  } else if (n2 >= 1e3) {
+    return `${(n2 / 1e3).toFixed(1).replace(/\.0$/, "")}k tokens`;
+  }
+  return `${n2} tokens`;
+}
+function JobDetail({ job, pipeline }) {
   const taskById = React.useMemo(() => {
     const tasks = job?.tasks;
     let result;
@@ -22082,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 = [];
@@ -22103,30 +22842,41 @@ 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));
+      }
+      if (taskBreakdown.totalCost > 0) {
+        subtitleParts.push(formatCurrency4(taskBreakdown.totalCost));
       }
       const errorMsg = task?.error?.message;
-      const body = item.status === "failed" && errorMsg ? errorMsg : null;
-      const resultItem = {
+      const body = (item.status === "failed" || item.status === "error") && errorMsg ? errorMsg : null;
+      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;
@@ -22149,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) {
@@ -22267,90 +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) : [],
-            hasTasksStatus: !!jobData?.tasksStatus
-          });
           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) {
@@ -22361,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) {
@@ -22457,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;
@@ -22471,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);
@@ -22482,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);
         }
@@ -22491,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);
         }
       };
@@ -22557,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);
@@ -22566,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);
@@ -22583,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);
@@ -22596,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 () => {
@@ -22636,26 +23275,77 @@ function useJobDetailWithUpdates(jobId) {
     data,
     loading,
     error,
-    connectionStatus
+    connectionStatus,
+    isRefreshing,
+    isTransitioning: isPending,
+    isHydrated
   };
 }
 function PipelineDetail() {
   const { jobId } = useParams();
   if (jobId === void 0 || jobId === null) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Layout, { title: "Pipeline Details", showBackButton: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$3, { align: "center", justify: "center", className: "min-h-64", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$6, { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$a, { size: "5", weight: "medium", color: "red", className: "mb-2", children: "No job ID provided" }) }) }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Layout,
+      {
+        pageTitle: "Pipeline Details",
+        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) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Layout, { title: "Pipeline Details", showBackButton: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$3, { align: "center", justify: "center", className: "min-h-64", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$6, { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$a, { size: "5", weight: "medium", className: "mb-2", children: "Loading job details..." }) }) }) });
+  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: job && job?.pipelineLabel ? job.pipelineLabel : "Pipeline Details"
+          }
+        ],
+        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..." }) }) })
+      }
+    );
   }
   if (error) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Layout, { title: "Pipeline Details", showBackButton: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$3, { align: "center", justify: "center", className: "min-h-64", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$6, { className: "text-center", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(p$a, { size: "5", weight: "medium", color: "red", className: "mb-2", children: "Failed to load job details" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(p$a, { size: "2", color: "gray", className: "mt-2", children: error })
-    ] }) }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Layout,
+      {
+        pageTitle: "Pipeline Details",
+        breadcrumbs: [
+          { label: "Home", href: "/" },
+          {
+            label: job && job?.pipelineLabel ? job.pipelineLabel : "Pipeline Details"
+          }
+        ],
+        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 })
+        ] }) })
+      }
+    );
   }
   if (!job) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Layout, { title: "Pipeline Details", showBackButton: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$3, { align: "center", justify: "center", className: "min-h-64", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$6, { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$a, { size: "5", weight: "medium", className: "mb-2", children: "Job not found" }) }) }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Layout,
+      {
+        pageTitle: "Pipeline Details",
+        breadcrumbs: [
+          { label: "Home", href: "/" },
+          { label: job.pipelineLabel || "Pipeline Details" }
+        ],
+        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" }) }) })
+      }
+    );
   }
   const pipeline = job?.pipeline || (() => {
     if (!job?.tasks) return { tasks: [] };
@@ -22667,25 +23357,380 @@ function PipelineDetail() {
     }
     return { tasks: pipelineTasks };
   })();
-  const headerActions = /* @__PURE__ */ jsxRuntimeExports.jsxs(p$3, { align: "center", gap: "3", className: "shrink-0", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(p$a, { size: "2", color: "gray", children: [
+  const pageTitle = job.name || "Pipeline Details";
+  const breadcrumbs = [
+    { label: "Home", href: "/" },
+    {
+      label: job && job?.pipelineLabel ? job.pipelineLabel : "Pipeline Details"
+    },
+    ...job.name ? [{ label: job.name }] : []
+  ];
+  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, 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 = [
+  {
+    name: "writeArtifact",
+    description: "Write an artifact file",
+    params: 'name: string, content: string, options?: { mode?: "replace"|"append"=replace }',
+    returns: "Promise<string>",
+    notes: "Writes to {workDir}/files/artifacts; updates tasks-status.json"
+  },
+  {
+    name: "writeLog",
+    description: "Write a log file",
+    params: 'name: string, content: string, options?: { mode?: "append"|"replace"=append }',
+    returns: "Promise<string>",
+    notes: "Writes to {workDir}/files/logs; default append; updates tasks-status.json"
+  },
+  {
+    name: "writeTmp",
+    description: "Write a temporary file",
+    params: 'name: string, content: string, options?: { mode?: "replace"|"append"=replace }',
+    returns: "Promise<string>",
+    notes: "Writes to {workDir}/files/tmp; updates tasks-status.json"
+  },
+  {
+    name: "readArtifact",
+    description: "Read an artifact file",
+    params: "name: string",
+    returns: "Promise<string>",
+    notes: "Reads from {workDir}/files/artifacts"
+  },
+  {
+    name: "readLog",
+    description: "Read a log file",
+    params: "name: string",
+    returns: "Promise<string>",
+    notes: "Reads from {workDir}/files/logs"
+  },
+  {
+    name: "readTmp",
+    description: "Read a temporary file",
+    params: "name: string",
+    returns: "Promise<string>",
+    notes: "Reads from {workDir}/files/tmp"
+  },
+  {
+    name: "getTaskDir",
+    description: "Get the task directory path",
+    params: "",
+    returns: "string",
+    notes: "Returns {workDir}/tasks/{taskName}"
+  },
+  {
+    name: "getCurrentStage",
+    description: "Get the current stage name",
+    params: "",
+    returns: "string",
+    notes: "Calls injected getStage()"
+  }
+];
+const sampleSeed = {
+  name: "some-name",
+  pipeline: "content-generation",
+  data: {
+    type: "some-type",
+    contentType: "blog-post",
+    targetAudience: "software-developers",
+    tone: "professional-yet-accessible",
+    length: "1500-2000 words",
+    outputFormat: "blog-post"
+  }
+};
+function CodePage() {
+  const [llmFunctions, setLlmFunctions] = reactExports.useState(null);
+  reactExports.useEffect(() => {
+    fetch("/api/llm/functions").then((res) => res.json()).then(setLlmFunctions).catch(console.error);
+  }, []);
+  const breadcrumbs = [{ label: "Home", href: "/" }, { label: "Code" }];
+  const handleCopySeed = () => {
+    navigator.clipboard.writeText(JSON.stringify(sampleSeed, null, 2));
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Layout, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(PageSubheader, { breadcrumbs }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(p$7, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(p$7, { mb: "8", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(r$8, { size: "6", mb: "4", children: "Seed File Example" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { as: "p", mb: "3", size: "2", children: "A seed file is a JSON object used to start a new pipeline job. It defines the job name, the pipeline to run, and any contextual data the pipeline requires to begin." }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { as: "p", mb: "3", size: "2", weight: "bold", children: "Required fields:" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("ul", { className: "list-disc list-inside mb-4 space-y-1", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "text-sm text-gray-700", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { as: "span", weight: "bold", children: "name" }),
+            " ",
+            "(string): Human-friendly title; non-empty, printable only, ≤120 chars; must be unique."
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "text-sm text-gray-700", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { as: "span", weight: "bold", children: "pipeline" }),
+            " ",
+            "(string): Pipeline slug defined in your registry (e.g., content-generation)."
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "text-sm text-gray-700", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { as: "span", weight: "bold", children: "data" }),
+            " ",
+            "(object): Required but flexible; include any arbitrary keys your pipeline tasks expect."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(p$7, { mb: "3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            size: "1",
+            onClick: handleCopySeed,
+            "data-testid": "copy-seed-example",
+            children: "Copy"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-xs bg-gray-50 p-3 rounded overflow-auto max-h-60 border border-gray-200", children: JSON.stringify(sampleSeed, null, 2) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(r$8, { size: "6", mb: "4", children: "Pipeline Task IO API" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(p$7, { overflowX: "auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(m$1, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(d, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(P$1, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(f$1, { children: "Function" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(f$1, { children: "Parameters" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(f$1, { children: "Returns" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(f$1, { children: "Notes" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(b$1, { children: ioFunctions.map((fn) => /* @__PURE__ */ jsxRuntimeExports.jsxs(P$1, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(R, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$2, { size: "3", children: [
+            "io.",
+            fn.name
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(T, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$2, { size: "3", children: fn.params || "—" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(T, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$2, { size: "3", children: fn.returns }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(T, { children: [
+            fn.description,
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            fn.notes
+          ] })
+        ] }, fn.name)) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(r$8, { size: "6", mt: "8", mb: "4", children: "Pipeline Task LLM API" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(p$7, { mb: "4", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(r$8, { size: "4", mb: "2", children: "Arguments" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(p$2, { size: "3", mb: "4", children: `{
+  messages: Array<{role: "system"|"user"|"assistant", content: string }>,
+  temperature?: number,
+  maxTokens?: number,
+  responseFormat?: "json" | { type: "json_object" | { type: "json_schema", name: string, json_schema: object } },
+  stop?: string | string[],
+  topP?: number,
+  frequencyPenalty?: number,
+  presencePenalty?: number,
+  seed?: number,
+  provider?: string,
+  model?: string,
+  metadata?: object,
+  maxRetries?: number
+}` }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(r$8, { size: "4", mb: "2", children: "Returns" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(p$2, { size: "3", children: `Promise<{ content: any, usage?: object, raw?: any }>` })
+      ] }),
+      llmFunctions && /* @__PURE__ */ jsxRuntimeExports.jsx(p$7, { overflowX: "auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(m$1, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(d, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(P$1, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(f$1, { children: "Function" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(f$1, { children: "Model" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(b$1, { children: Object.entries(llmFunctions).map(
+          ([provider, functions]) => functions.map((fn) => /* @__PURE__ */ jsxRuntimeExports.jsxs(P$1, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(R, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$2, { size: "3", children: fn.fullPath }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(T, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$2, { size: "3", children: fn.model }) })
+          ] }, 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" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(p$7, { overflowX: "auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(m$1, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(d, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(P$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(f$1, { children: "Environment Variable" }) }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(b$1, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(P$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(R, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$2, { size: "3", children: "OPENAI_API_KEY=" }) }) }),
+            /* @__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: "ZHIPU_API_KEY=" }) }) })
+          ] })
+        ] }) })
+      ] })
+    ] })
+  ] });
+}
+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(
-    Layout,
+    p$7,
     {
-      title: job.name || "Pipeline Details",
-      showBackButton: true,
-      actions: headerActions,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(JobDetail, { job, pipeline })
+      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.createRoot(document.getElementById("root")).render(
-  /* @__PURE__ */ jsxRuntimeExports.jsx(React.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+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",
@@ -22695,8 +23740,9 @@ ReactDOM.createRoot(document.getElementById("root")).render(
       radius: "full",
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(BrowserRouter, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Routes, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Route, { path: "/", element: /* @__PURE__ */ jsxRuntimeExports.jsx(PromptPipelineDashboard, {}) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Route, { path: "/pipeline/:jobId", element: /* @__PURE__ */ jsxRuntimeExports.jsx(PipelineDetail, {}) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Route, { path: "/pipeline/:jobId", element: /* @__PURE__ */ jsxRuntimeExports.jsx(PipelineDetail, {}) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Route, { path: "/code", element: /* @__PURE__ */ jsxRuntimeExports.jsx(CodePage, {}) })
       ] }) })
     }
-  ) })
+  ) }) })
 );