@wealthx/shadcn 1.4.1 → 1.5.0

package/dist/components/ui/signup-form-primitives.mjs

@@ -0,0 +1,25 @@
+import {
+  FormField,
+  PasswordField,
+  SectionHeading,
+  StaffRowItem
+} from "../../chunk-TXUBGKB7.mjs";
+import "../../chunk-F4O2YPXJ.mjs";
+import "../../chunk-MUV4EGDW.mjs";
+import "../../chunk-TAX3KL66.mjs";
+import "../../chunk-2GIYVERS.mjs";
+import "../../chunk-C6SWS7OW.mjs";
+import "../../chunk-P7CEBZM6.mjs";
+import "../../chunk-LBTHZSBT.mjs";
+import "../../chunk-WDTXHLYM.mjs";
+import "../../chunk-S4CTM3UE.mjs";
+import "../../chunk-NOOEKOWY.mjs";
+import "../../chunk-R4HCRDU5.mjs";
+import "../../chunk-AFML43VJ.mjs";
+import "../../chunk-WNQUEZJF.mjs";
+export {
+  FormField,
+  PasswordField,
+  SectionHeading,
+  StaffRowItem
+};

package/dist/components/ui/signup-shell.js

@@ -0,0 +1,338 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ui/signup-shell.tsx
+var signup_shell_exports = {};
+__export(signup_shell_exports, {
+  FrontendShell: () => FrontendShell,
+  SignupShell: () => SignupShell,
+  SignupVideoPanel: () => SignupVideoPanel
+});
+module.exports = __toCommonJS(signup_shell_exports);
+
+// src/components/ui/stepper.tsx
+var React = __toESM(require("react"));
+var import_lucide_react = require("lucide-react");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-large",
+            "display-medium",
+            "display-small",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "body-large",
+            "body-medium",
+            "body-small",
+            "label-large",
+            "label-medium",
+            "label-small",
+            "button",
+            "button-xs",
+            "caption",
+            "overline",
+            "code"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/ui/stepper.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var StepperContext = React.createContext({
+  activeStep: 0,
+  orientation: "horizontal",
+  totalSteps: 0
+});
+var StepContext = React.createContext({
+  index: 0,
+  isActive: false,
+  isCompleted: false,
+  isFirst: true,
+  isLast: false
+});
+function Stepper({
+  activeStep = 0,
+  orientation = "horizontal",
+  className,
+  children
+}) {
+  const totalSteps = React.Children.count(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StepperContext.Provider, { value: { activeStep, orientation, totalSteps }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "stepper",
+      className: cn(
+        "font-sans",
+        orientation === "horizontal" ? "flex w-full items-start" : "flex flex-col",
+        className
+      ),
+      children: React.Children.map(
+        children,
+        (step, index) => React.isValidElement(step) ? React.cloneElement(
+          step,
+          { _index: index }
+        ) : step
+      )
+    }
+  ) });
+}
+function Step({ _index = 0, error, className, children }) {
+  const { activeStep, orientation, totalSteps } = React.useContext(StepperContext);
+  const isActive = _index === activeStep;
+  const isCompleted = _index < activeStep;
+  const isFirst = _index === 0;
+  const isLast = _index === totalSteps - 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StepContext.Provider,
+    {
+      value: { index: _index, isActive, isCompleted, isFirst, isLast },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          "data-slot": "step",
+          "aria-current": isActive ? "step" : void 0,
+          "data-active": isActive || void 0,
+          "data-completed": isCompleted || void 0,
+          "data-error": error || void 0,
+          className: cn(
+            orientation === "horizontal" ? "flex flex-1 flex-col items-center" : "flex flex-row gap-3",
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+function StepIndicator({ error, className }) {
+  const { orientation } = React.useContext(StepperContext);
+  const { index, isActive, isCompleted, isFirst, isLast } = React.useContext(StepContext);
+  const filled = isActive || isCompleted;
+  const circle = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: cn(
+        "relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full text-sm font-medium transition-colors",
+        !filled && !error && "border-2 border-border bg-background text-muted-foreground",
+        isActive && !error && "border-2 border-primary bg-primary text-primary-foreground",
+        isCompleted && !error && "bg-primary text-primary-foreground",
+        error && "border-2 border-destructive bg-destructive text-destructive-foreground"
+      ),
+      children: isCompleted && !error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "size-4", strokeWidth: 2.5 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: index + 1 })
+    }
+  );
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        "data-slot": "step-indicator",
+        className: cn("flex w-full items-center", className),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: cn(
+                "h-[2px] flex-1 transition-colors",
+                isFirst ? "bg-transparent" : isActive || isCompleted ? "bg-primary" : "bg-border"
+              )
+            }
+          ),
+          circle,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: cn(
+                "h-[2px] flex-1 transition-colors",
+                isLast ? "bg-transparent" : isCompleted ? "bg-primary" : "bg-border"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      "data-slot": "step-indicator",
+      className: cn("flex w-8 shrink-0 flex-col items-center", className),
+      children: [
+        circle,
+        !isLast && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            "data-slot": "step-connector",
+            className: cn(
+              "mt-1 w-[2px] flex-1 transition-colors",
+              isActive || isCompleted ? "bg-primary" : "bg-border"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function StepLabel({
+  children,
+  description,
+  error,
+  className
+}) {
+  const { orientation } = React.useContext(StepperContext);
+  const { isActive, isCompleted, isLast } = React.useContext(StepContext);
+  const subtext = typeof error === "string" ? error : description;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      "data-slot": "step-label",
+      className: cn(
+        "flex flex-col",
+        orientation === "horizontal" ? "mt-2 items-center text-center" : cn("flex-1", !isLast && "pb-5"),
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: cn(
+              "text-sm font-medium leading-tight transition-colors",
+              (isActive || isCompleted) && !error && "text-foreground",
+              !isActive && !isCompleted && !error && "text-muted-foreground",
+              error && "text-destructive"
+            ),
+            children
+          }
+        ),
+        subtext && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: cn(
+              "mt-0.5 text-xs",
+              error ? "text-destructive" : "text-muted-foreground"
+            ),
+            children: subtext
+          }
+        )
+      ]
+    }
+  );
+}
+function StepItem({ label, description, error }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StepIndicator, { error: !!error }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StepLabel, { description, error, children: label })
+  ] });
+}
+
+// src/components/ui/signup-shell.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DEFAULT_VIDEO_SRC = "https://d1rndq5v7rs3ry.cloudfront.net/padua-landing-video.mp4";
+function SignupVideoPanel({
+  videoSrc = DEFAULT_VIDEO_SRC
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hidden @md:block relative bg-neutral-900 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "video",
+    {
+      autoPlay: true,
+      muted: true,
+      loop: true,
+      playsInline: true,
+      className: "absolute inset-0 w-full h-full object-cover",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("source", { src: videoSrc, type: "video/mp4" })
+    }
+  ) });
+}
+function SignupShell({
+  steps,
+  step,
+  children,
+  footer,
+  videoSrc,
+  title = "Sign Up"
+}) {
+  const isSuccess = step >= steps.length;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "@md:grid @md:grid-cols-2 h-screen overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SignupVideoPanel, { videoSrc }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-col h-full overflow-hidden", children: isSuccess ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 overflow-y-auto min-h-0 flex items-center justify-center", children }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 overflow-y-auto min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex min-h-full justify-center px-4 py-6 @sm:px-10 @sm:py-10", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "w-full max-w-[560px] flex flex-col gap-8", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { className: "text-3xl font-bold text-foreground text-center", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Stepper, { activeStep: step, className: "w-full", children: steps.map((label) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Step, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StepItem, { label }) }, label)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "text-2xl font-bold text-foreground", children: steps[step] }),
+        children
+      ] }) }) }),
+      footer && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "shrink-0 border-t border-border bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-full max-w-[560px] mx-auto px-0 py-4 flex justify-between", children: footer }) })
+    ] }) })
+  ] });
+}
+function FrontendShell({
+  steps,
+  stepIndex,
+  children,
+  footer,
+  isSuccess = false,
+  videoSrc,
+  title = "Create Account"
+}) {
+  const hasStepper = stepIndex !== void 0 && steps !== void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "@md:grid @md:grid-cols-2 h-screen overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SignupVideoPanel, { videoSrc }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-col h-full overflow-hidden", children: isSuccess ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 overflow-y-auto min-h-0 flex items-center justify-center", children }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 overflow-y-auto min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex min-h-full justify-center px-4 py-6 @sm:px-10 @sm:py-10", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "w-full max-w-[520px] flex flex-col gap-8", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { className: "text-3xl font-bold text-foreground text-center", children: title }),
+        hasStepper && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Stepper, { activeStep: stepIndex, className: "w-full", children: steps.map((label) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Step, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StepItem, { label }) }, label)) }),
+        hasStepper && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "text-2xl font-bold text-foreground", children: steps[stepIndex] }),
+        children
+      ] }) }) }),
+      footer && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "shrink-0 border-t border-border bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-full max-w-[520px] mx-auto px-0 py-4 flex justify-between", children: footer }) })
+    ] }) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FrontendShell,
+  SignupShell,
+  SignupVideoPanel
+});

package/dist/components/ui/signup-shell.mjs

@@ -0,0 +1,13 @@
+import {
+  FrontendShell,
+  SignupShell,
+  SignupVideoPanel
+} from "../../chunk-UEREFDAE.mjs";
+import "../../chunk-6TX73WG7.mjs";
+import "../../chunk-AFML43VJ.mjs";
+import "../../chunk-WNQUEZJF.mjs";
+export {
+  FrontendShell,
+  SignupShell,
+  SignupVideoPanel
+};

package/dist/components/ui/stage-timeline.js

@@ -345,18 +345,65 @@ function Checkbox(_a) {
   );
 }
 
-// src/components/ui/pipeline-primitives.tsx
+// src/components/ui/switch.tsx
+var import_react2 = require("react");
+var import_switch = require("@base-ui/react/switch");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function Switch(_a) {
+  var _b = _a, {
+    className,
+    size = "default"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "size"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_switch.Switch.Root,
+    __spreadProps(__spreadValues({
+      className: cn(
+        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[size=default]:h-[1.15rem] data-[size=default]:w-8",
+        "data-[size=sm]:h-3.5 data-[size=sm]:w-6",
+        "data-checked:bg-primary data-unchecked:bg-input",
+        "aria-invalid:data-checked:bg-destructive aria-invalid:border-destructive",
+        "dark:data-unchecked:bg-input/80",
+        className
+      ),
+      "data-size": size,
+      "data-slot": "switch"
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_switch.Switch.Thumb,
+        {
+          className: cn(
+            "pointer-events-none block rounded-full bg-background ring-0 transition-transform",
+            "group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3",
+            "data-checked:translate-x-[calc(100%-2px)] data-unchecked:translate-x-0",
+            "dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground"
+          ),
+          "data-slot": "switch-thumb"
+        }
+      )
+    })
+  );
+}
+
+// src/components/ui/pipeline-primitives.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function TaskCheckItem({
   title,
   completed,
   aiAgentName,
+  autoCompleteEnabled,
+  onAutoCompleteToggle,
   onToggle,
   disabled = false,
   size = "xs",
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: cn(
@@ -367,7 +414,7 @@ function TaskCheckItem({
       onClick: () => onToggle == null ? void 0 : onToggle(),
       "data-slot": "task-check-item",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { onClick: (e) => e.stopPropagation(), className: "mt-0.5 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { onClick: (e) => e.stopPropagation(), className: "mt-0.5 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Checkbox,
           {
             checked: completed,
@@ -375,8 +422,8 @@ function TaskCheckItem({
             disabled
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "span",
             {
               className: cn(
@@ -387,8 +434,8 @@ function TaskCheckItem({
               children: title
             }
           ),
-          aiAgentName && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Badge, { variant: "secondary", className: "gap-1 text-[10px]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          aiAgentName && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Badge, { variant: "secondary", className: "gap-1 text-[10px]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "span",
               {
                 className: "size-1.5 rounded-full bg-primary",
@@ -396,7 +443,27 @@ function TaskCheckItem({
               }
             ),
             aiAgentName
-          ] })
+          ] }),
+          aiAgentName && autoCompleteEnabled !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            "span",
+            {
+              className: "flex items-center gap-1.5",
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  Switch,
+                  {
+                    checked: autoCompleteEnabled,
+                    onCheckedChange: () => onAutoCompleteToggle == null ? void 0 : onAutoCompleteToggle(),
+                    disabled,
+                    className: "scale-75 origin-left",
+                    "aria-label": "Allow agent to auto complete"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-[10px] text-muted-foreground", children: "Allow Agent to Auto Complete" })
+              ]
+            }
+          )
         ] })
       ]
     }
@@ -406,7 +473,7 @@ function TaskCheckItem({
 // src/components/ui/spinner.tsx
 var import_class_variance_authority2 = require("class-variance-authority");
 var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var spinnerVariants = (0, import_class_variance_authority2.cva)("animate-spin shrink-0", {
   variants: {
     size: {
@@ -422,7 +489,7 @@ var spinnerVariants = (0, import_class_variance_authority2.cva)("animate-spin sh
 });
 function Spinner(_a) {
   var _b = _a, { className, size } = _b, props = __objRest(_b, ["className", "size"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_lucide_react3.LoaderCircle,
     __spreadValues({
       "aria-hidden": "true",
@@ -433,16 +500,17 @@ function Spinner(_a) {
 }
 
 // src/components/ui/stage-timeline.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function StageTimeline({
   stages,
   onTaskToggle,
+  onTaskAutoCompleteToggle,
   isLoading = false,
   className
 }) {
   var _a, _b;
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         className: cn(
@@ -451,14 +519,14 @@ function StageTimeline({
         ),
         "data-slot": "stage-timeline",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Spinner, { size: "lg", className: "text-muted-foreground" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm text-muted-foreground", children: "Loading stages\u2026" })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Spinner, { size: "lg", className: "text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-muted-foreground", children: "Loading stages\u2026" })
         ]
       }
     );
   }
   if (stages.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         className: cn(
@@ -473,25 +541,25 @@ function StageTimeline({
   const completedCount = stages.filter((s) => s.isCompleted).length;
   const progressPct = Math.round(completedCount / stages.length * 100);
   const defaultOpen = (_b = (_a = stages.find((s) => s.isCurrentStage)) == null ? void 0 : _a.id) != null ? _b : stages[0].id;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className: cn("flex flex-col gap-4", className),
       "data-slot": "stage-timeline",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Stage progress" }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Stage progress" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
               completedCount,
               " / ",
               stages.length,
               " completed"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Progress, { value: progressPct, className: "h-2.5" })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Progress, { value: progressPct, className: "h-2.5" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Accordion,
           {
             type: "single",
@@ -501,13 +569,13 @@ function StageTimeline({
             children: stages.map((stage) => {
               const completedTasks = stage.tasks.filter((t) => t.completed).length;
               const hasTasks = stage.tasks.length > 0;
-              return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 AccordionItem,
                 {
                   value: stage.id,
                   className: "border-b border-border last:border-0",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       AccordionTrigger,
                       {
                         className: cn(
@@ -515,13 +583,13 @@ function StageTimeline({
                           stage.isCompleted ? "text-muted-foreground" : stage.isCurrentStage ? "font-semibold text-foreground" : "font-normal text-muted-foreground"
                         ),
                         disabled: !hasTasks,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex items-center gap-2.5", children: [
-                          stage.isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex items-center gap-2.5", children: [
+                          stage.isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                             "span",
                             {
                               className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-primary",
                               "aria-hidden": "true",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                                 import_lucide_react4.Check,
                                 {
                                   className: "size-3 text-primary-foreground",
@@ -529,21 +597,21 @@ function StageTimeline({
                                 }
                               )
                             }
-                          ) : stage.isCurrentStage ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                          ) : stage.isCurrentStage ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                             "span",
                             {
                               className: "size-5 shrink-0 rounded-full border-2 border-primary bg-background",
                               "aria-hidden": "true"
                             }
-                          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                             "span",
                             {
                               className: "size-5 shrink-0 rounded-full border-2 border-muted-foreground/30 bg-background",
                               "aria-hidden": "true"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn(stage.isCompleted && "line-through"), children: stage.name }),
-                          hasTasks && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn(stage.isCompleted && "line-through"), children: stage.name }),
+                          hasTasks && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
                             completedTasks,
                             "/",
                             stage.tasks.length
@@ -551,14 +619,16 @@ function StageTimeline({
                         ] })
                       }
                     ),
-                    hasTasks && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AccordionContent, { className: "p-0 pb-3 pl-8", children: stage.tasks.map((task) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    hasTasks && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AccordionContent, { className: "p-0 pb-3 pl-8", children: stage.tasks.map((task) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       TaskCheckItem,
                       {
                         title: task.title,
                         completed: task.completed,
                         aiAgentName: task.aiAgentName,
+                        autoCompleteEnabled: task.autoCompleteEnabled,
                         size: "sm",
-                        onToggle: onTaskToggle ? () => onTaskToggle(stage.id, task.id) : void 0
+                        onToggle: onTaskToggle ? () => onTaskToggle(stage.id, task.id) : void 0,
+                        onAutoCompleteToggle: onTaskAutoCompleteToggle ? () => onTaskAutoCompleteToggle(stage.id, task.id) : void 0
                       },
                       task.id
                     )) })