@ryanfw/prompt-orchestration-pipeline 0.4.0 → 0.6.0

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

@@ -19201,23 +19201,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 +19227,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 +19254,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 +19283,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 +19305,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 +19353,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 +19385,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 +19432,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 +19448,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 +19472,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 +19517,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 +19532,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";
@@ -19945,7 +19945,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;
     });
@@ -19967,7 +19969,9 @@ 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 };
@@ -19996,7 +20000,7 @@ function computeJobSummaryStats(tasks) {
 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 +20026,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,6 +20070,9 @@ 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;
 }
@@ -20257,49 +20276,56 @@ 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 = [
+const __iconNode$4 = [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$3);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$4);
 /**
  * @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$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$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"
-    }
-  ]
+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 House = createLucideIcon("house", __iconNode$1);
+const CodeXml = createLucideIcon("code-xml", __iconNode$2);
 /**
  * @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 = [
+const __iconNode$1 = [
   ["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 TimerReset = createLucideIcon("timer-reset", __iconNode);
+const TimerReset = createLucideIcon("timer-reset", __iconNode$1);
+/**
+ * @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 = [
+  ["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 Upload = createLucideIcon("upload", __iconNode);
 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;
@@ -20322,14 +20348,14 @@ 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" });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { intent: "blue", "aria-label": "Running", children: "Running" });
     case "failed":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "error", "aria-label": "Failed", children: "Failed" });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { intent: "red", "aria-label": "Failed", children: "Failed" });
     case "completed":
     case "complete":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "success", "aria-label": "Completed", children: "Completed" });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { intent: "green", "aria-label": "Completed", children: "Completed" });
     case "pending":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "default", "aria-label": "Pending", children: "Pending" });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { intent: "gray", "aria-label": "Pending", children: "Pending" });
     default:
       return null;
   }
@@ -20346,6 +20372,20 @@ const progressClasses = (status) => {
       return "bg-muted [&>div]:bg-muted-foreground";
   }
 };
+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,
@@ -20354,9 +20394,9 @@ function JobTable({
   now
 }) {
   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 +20404,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 }];
@@ -20383,6 +20424,9 @@ function JobTable({
       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 +20438,24 @@ 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 === "completed" ? "—" : 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(" · ") })
             ] }) }),
-            /* @__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 +20464,26 @@ 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(p$b, { size: "2", className: "text-slate-700", children: fmtDuration(duration) })
             ] }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(T, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              o$3,
+              o$2,
               {
                 variant: "ghost",
                 size: "1",
@@ -20462,7 +20510,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,6 +20520,78 @@ function Button({
     }
   );
 }
+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"
+      }
+    )
+  }
+);
+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;
@@ -20484,20 +20604,7 @@ const normalizeUploadError = (err) => {
 };
 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;
     if (!files || files.length === 0) return;
@@ -20558,7 +20665,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,63 +20738,14 @@ 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 = "/",
@@ -20695,16 +20753,51 @@ function Layout({
 }) {
   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);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$6, { className: "min-h-screen bg-gray-1", children: [
+  const toggleUploadPanel = () => {
+    setIsUploadOpen(!isUploadOpen);
+  };
+  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]);
+  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,19 +20806,19 @@ 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: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(p$4, { align: "center", className: "min-w-0 flex-1", children: [
                 showBackButton && /* @__PURE__ */ jsxRuntimeExports.jsxs(Root3, { delayDuration: 200, children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                     Button,
@@ -20738,15 +20831,44 @@ function Layout({
                       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.jsx(Content2, { side: "bottom", sideOffset: 5, children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "2", children: "Go back" }) })
                 ] }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  r$9,
+                  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(
+                  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 +20878,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 +20948,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,8 +20966,6 @@ 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,
@@ -20843,92 +21008,73 @@ 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,
+              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
+            }
+          ) })
+        ]
+      }
+    )
   ] });
 }
 function TaskFilePane({
@@ -22038,16 +22184,25 @@ function computeActiveIndex(items) {
   if (lastDoneIndex !== -1) return lastDoneIndex;
   return 0;
 }
+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, 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]);
   const taskById = React.useMemo(() => {
     const tasks = job?.tasks;
     let result;
@@ -22067,6 +22222,11 @@ function JobDetail({ job, pipeline, onClose, onResume }) {
     }
     return result;
   }, [job?.tasks]);
+  reactExports.useEffect(() => {
+    setResumeFrom(
+      pipeline?.tasks?.[0] ? typeof pipeline.tasks[0] === "string" ? pipeline.tasks[0] : pipeline.tasks[0].id ?? pipeline.tasks[0].name ?? "" : ""
+    );
+  }, [job.id, pipeline?.tasks?.length]);
   const computedPipeline = React.useMemo(() => {
     let result;
     if (pipeline?.tasks) {
@@ -22115,8 +22275,15 @@ function JobDetail({ job, pipeline, onClose, onResume }) {
           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 body = (item.status === "failed" || item.status === "error") && errorMsg ? errorMsg : null;
       const resultItem = {
         ...item,
         title: typeof item.id === "string" ? item.id : item.id?.name || item.id?.id || `Task ${item.id}`,
@@ -22138,6 +22305,7 @@ function JobDetail({ job, pipeline, onClose, onResume }) {
     },
     [job]
   );
+  console.log("dagItems", dagItems);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     DAGGrid,
     {
@@ -22325,8 +22493,7 @@ function useJobDetailWithUpdates(jobId) {
           logger.log("Refetch job data preview:", {
             status: jobData?.status,
             hasTasks: !!jobData?.tasks,
-            taskKeys: jobData?.tasks ? Object.keys(jobData.tasks) : [],
-            hasTasksStatus: !!jobData?.tasksStatus
+            taskKeys: jobData?.tasks ? Object.keys(jobData.tasks) : []
           });
           if (mountedRef.current) {
             logger.log("Refetch successful, updating data");
@@ -22642,20 +22809,64 @@ function useJobDetailWithUpdates(jobId) {
 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: "/" },
+          { label: "Pipeline Details" }
+        ],
+        showBackButton: true,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$4, { align: "center", justify: "center", className: "min-h-64", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$7, { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "5", weight: "medium", 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..." }) }) }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Layout,
+      {
+        pageTitle: "Pipeline Details",
+        breadcrumbs: [
+          { label: "Home", href: "/" },
+          { label: "Pipeline Details" }
+        ],
+        showBackButton: true,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$4, { align: "center", justify: "center", className: "min-h-64", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$7, { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "5", weight: "medium", className: "mb-2", children: "Loading job details..." }) }) })
+      }
+    );
   }
   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: "Pipeline Details" }
+        ],
+        showBackButton: true,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$4, { align: "center", justify: "center", className: "min-h-64", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p$7, { className: "text-center", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "5", weight: "medium", color: "red", className: "mb-2", children: "Failed to load job details" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "2", color: "gray", className: "mt-2", children: error })
+        ] }) })
+      }
+    );
   }
   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: "Pipeline Details" }
+        ],
+        showBackButton: true,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$4, { align: "center", justify: "center", className: "min-h-64", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$7, { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p$b, { size: "5", weight: "medium", className: "mb-2", children: "Job not found" }) }) })
+      }
+    );
   }
   const pipeline = job?.pipeline || (() => {
     if (!job?.tasks) return { tasks: [] };
@@ -22667,23 +22878,220 @@ 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: "Pipeline Details" },
+    ...job.name ? [{ label: job.name }] : []
+  ];
+  const subheaderRightContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(p$4, { align: "center", gap: "3", className: "shrink-0", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(p$b, { size: "2", color: "gray", children: [
       "ID: ",
       job.id || jobId
     ] }),
     statusBadge(job.status)
   ] });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Layout,
     {
-      title: job.name || "Pipeline Details",
+      pageTitle,
+      breadcrumbs,
       showBackButton: true,
-      actions: headerActions,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(JobDetail, { job, pipeline })
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(PageSubheader, { breadcrumbs, maxWidth: "max-w-7xl", children: subheaderRightContent }),
+        /* @__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,
+  tools?: Array<{type: "function", function: object}>,
+  toolChoice?: "auto" | "required" | { type: "function", function: { name: string } },
+  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: "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: "Z_API_KEY=" }) }) })
+          ] })
+        ] }) })
+      ] })
+    ] })
+  ] });
+}
 ReactDOM.createRoot(document.getElementById("root")).render(
   /* @__PURE__ */ jsxRuntimeExports.jsx(React.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     R$1,
@@ -22695,7 +23103,8 @@ 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, {}) })
       ] }) })
     }
   ) })