pxengine 0.1.88 → 0.1.89

package/dist/index.cjs

@@ -39207,6 +39207,7 @@ var PresentationJobCard = ({
   slide_count: initialSlideCount,
   formats: initialFormats = {},
   error: initialError,
+  progress: initialProgress,
   pollUrl,
   authToken,
   shareUrl,
@@ -39219,6 +39220,7 @@ var PresentationJobCard = ({
   const [slideCount, setSlideCount] = (0, import_react75.useState)(initialSlideCount ?? 0);
   const [formats, setFormats] = (0, import_react75.useState)(initialFormats);
   const [error, setError] = (0, import_react75.useState)(initialError);
+  const [progress, setProgress] = (0, import_react75.useState)(initialProgress);
   const [showExport, setShowExport] = (0, import_react75.useState)(false);
   const [showFullscreen, setShowFullscreen] = (0, import_react75.useState)(false);
   const [copied, setCopied] = (0, import_react75.useState)(false);
@@ -39228,6 +39230,27 @@ var PresentationJobCard = ({
   const intervalRef = (0, import_react75.useRef)(null);
   const previewRef = (0, import_react75.useRef)(null);
   const iframeRef = (0, import_react75.useRef)(null);
+  (0, import_react75.useEffect)(() => {
+    setStatus(initialStatus);
+  }, [initialStatus]);
+  const progressPct = initialProgress?.percentage;
+  const progressStep = initialProgress?.current_step;
+  (0, import_react75.useEffect)(() => {
+    if (initialProgress) setProgress(initialProgress);
+  }, [progressPct, progressStep]);
+  (0, import_react75.useEffect)(() => {
+    if (initialError) setError(initialError);
+  }, [initialError]);
+  (0, import_react75.useEffect)(() => {
+    if (initialSlideCount !== void 0) setSlideCount(initialSlideCount);
+  }, [initialSlideCount]);
+  const htmlUrl = initialFormats?.html_url;
+  (0, import_react75.useEffect)(() => {
+    if (initialFormats) setFormats(initialFormats);
+  }, [htmlUrl]);
+  (0, import_react75.useEffect)(() => {
+    if (initialTitle) setTitle(initialTitle);
+  }, [initialTitle]);
   const updateScale = (0, import_react75.useCallback)(() => {
     if (previewRef.current) setPreviewScale(previewRef.current.offsetWidth / 1280);
   }, []);
@@ -39282,6 +39305,9 @@ var PresentationJobCard = ({
         const data = await res.json();
         const newStatus = data.status;
         setStatus(newStatus);
+        if (data.progress) {
+          setProgress(data.progress);
+        }
         if (newStatus === "complete" && data.output) {
           const newTitle = data.output.title || initialTitle;
           const newSlideCount = data.output.slide_count || 0;
@@ -39333,14 +39359,93 @@ var PresentationJobCard = ({
     }
   };
   if (status === "pending" || status === "running") {
-    return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "relative overflow-hidden rounded-xl border border-zinc-200/70 dark:border-zinc-800/70 bg-zinc-100 dark:bg-zinc-900 aspect-[16/9]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "absolute inset-0 p-[8%] flex flex-col justify-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "h-[18px] w-[42%] rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse mb-3" }),
-        /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "h-[11px] w-[65%] rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse mb-2", style: { animationDelay: "120ms" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "h-[11px] w-[52%] rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse", style: { animationDelay: "240ms" } })
+    const pct = progress?.percentage ?? 0;
+    const step = progress?.current_step ?? "Starting...";
+    const details = progress?.details;
+    const slidesCompleted = details?.slides_completed ?? 0;
+    const slidesTotal = details?.slides_total ?? 0;
+    const phase = details?.phase ?? progress?.step_type ?? "initializing";
+    const getPhaseIcon = () => {
+      switch (phase) {
+        case "ai_generation":
+          return "\u{1F3A8}";
+        case "processing":
+          return "\u2699\uFE0F";
+        case "uploading":
+          return "\u2601\uFE0F";
+        default:
+          return "\u2728";
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: cn("w-full", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "bg-zinc-900 border border-zinc-800 rounded-2xl overflow-hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+          "div",
+          {
+            className: "h-[3px] bg-gradient-to-r from-indigo-500 via-purple-500 to-indigo-500 bg-[length:200%_100%] animate-[gradient-shift_2s_ease-in-out_infinite]",
+            style: {
+              backgroundSize: "200% 100%",
+              animation: "gradient-shift 2s ease-in-out infinite"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "p-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "w-10 h-10 rounded-xl bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "text-lg", children: getPhaseIcon() }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("h3", { className: "text-sm font-semibold text-zinc-100 truncate leading-tight", children: title || "Creating Presentation" }),
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("p", { className: "text-xs text-zinc-500 mt-0.5", children: [
+                slidesTotal > 0 ? `${slidesTotal} slides` : "Presentation",
+                " \xB7 In progress"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "mt-4 space-y-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "h-2 bg-zinc-800 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+                "div",
+                {
+                  className: "h-full bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full transition-all duration-500 ease-out",
+                  style: { width: `${Math.max(pct, 2)}%` }
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("span", { className: "absolute right-0 -top-5 text-xs text-zinc-500 font-medium tabular-nums", children: [
+                pct,
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "w-2 h-2 rounded-full bg-indigo-500 animate-pulse" }),
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "text-xs text-zinc-400", children: step })
+            ] }),
+            phase === "ai_generation" && slidesTotal > 0 && /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center gap-2 pt-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "flex gap-1", children: Array.from({ length: slidesTotal }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+                "div",
+                {
+                  className: cn(
+                    "w-6 h-1.5 rounded-full transition-all duration-300",
+                    i < slidesCompleted ? "bg-indigo-500" : i === slidesCompleted ? "bg-indigo-500/50 animate-pulse" : "bg-zinc-700"
+                  )
+                },
+                i
+              )) }),
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("span", { className: "text-xs text-zinc-500 ml-1", children: [
+                slidesCompleted,
+                "/",
+                slidesTotal,
+                " slides"
+              ] })
+            ] })
+          ] })
+        ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "absolute inset-0 -translate-x-full animate-[shimmer_2s_ease-in-out_infinite] bg-gradient-to-r from-transparent via-white/10 to-transparent" })
-    ] }) });
+      /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("style", { children: `
+          @keyframes gradient-shift {
+            0%, 100% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+          }
+        ` })
+    ] });
   }
   if (status === "failed") {
     return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "bg-red-950/20 border border-red-800/25 rounded-2xl p-5", children: /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-start gap-3", children: [
@@ -39581,6 +39686,7 @@ var ResearchReportJobCard = (props) => {
     html_url: initialHtmlUrl,
     theme: initialTheme,
     error: initialError,
+    progress: initialProgress,
     pollUrl,
     authToken,
     className,
@@ -39599,6 +39705,7 @@ var ResearchReportJobCard = (props) => {
   const [htmlUrl, setHtmlUrl] = (0, import_react76.useState)(initialHtmlUrl || "");
   const [theme, setTheme] = (0, import_react76.useState)(initialTheme || DEFAULT_THEME);
   const [error, setError] = (0, import_react76.useState)(initialError);
+  const [progress, setProgress] = (0, import_react76.useState)(initialProgress);
   const [showPreview, setShowPreview] = (0, import_react76.useState)(false);
   const [previewScale, setPreviewScale] = (0, import_react76.useState)(1);
   const previewRef = (0, import_react76.useRef)(null);
@@ -39633,12 +39740,18 @@ var ResearchReportJobCard = (props) => {
   (0, import_react76.useEffect)(() => {
     if (initialSummary) setSummary(initialSummary);
   }, [initialSummary]);
+  const themePrimary = initialTheme?.primary;
   (0, import_react76.useEffect)(() => {
     if (initialTheme) setTheme(initialTheme);
-  }, [initialTheme]);
+  }, [themePrimary]);
   (0, import_react76.useEffect)(() => {
     if (initialError) setError(initialError);
   }, [initialError]);
+  const progressPct = initialProgress?.percentage;
+  const progressStep = initialProgress?.current_step;
+  (0, import_react76.useEffect)(() => {
+    if (initialProgress) setProgress(initialProgress);
+  }, [progressPct, progressStep]);
   const isTerminal = status === "complete" || status === "failed";
   const primaryColor = theme?.primary || DEFAULT_THEME.primary;
   const hasHTML = Boolean(htmlUrl);
@@ -39667,6 +39780,9 @@ var ResearchReportJobCard = (props) => {
         const data = await res.json();
         const newStatus = data.status;
         setStatus(newStatus);
+        if (data.progress) {
+          setProgress(data.progress);
+        }
         if (newStatus === "complete" && data.output) {
           const output = data.output;
           setTitle(output.title || initialTitle);
@@ -39712,27 +39828,96 @@ var ResearchReportJobCard = (props) => {
     return count.toString();
   };
   if (!status || status === "pending" || status === "running") {
-    return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "relative overflow-hidden rounded-2xl border border-zinc-200/70 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-900", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "h-[3px] bg-gradient-to-r from-zinc-300 dark:from-zinc-700 via-zinc-200 dark:via-zinc-600 to-zinc-300 dark:to-zinc-700 animate-pulse" }),
-      /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "p-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "w-10 h-10 rounded-xl bg-zinc-200 dark:bg-zinc-800 animate-pulse flex-shrink-0" }),
-          /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "h-[14px] w-[65%] rounded bg-zinc-200 dark:bg-zinc-700 animate-pulse" }),
-            /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "h-[10px] w-[45%] rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse mt-2", style: { animationDelay: "80ms" } })
+    const pct = progress?.percentage ?? 0;
+    const step = progress?.current_step ?? "Starting...";
+    const details = progress?.details;
+    const searchesCompleted = details?.searches_completed ?? 0;
+    const searchesTotal = details?.searches_total ?? 0;
+    const phase = details?.phase ?? progress?.step_type ?? "initializing";
+    const getPhaseIcon = () => {
+      switch (phase) {
+        case "ai_generation":
+          return "\u{1F50D}";
+        case "processing":
+          return "\u{1F4DD}";
+        case "uploading":
+          return "\u2601\uFE0F";
+        default:
+          return "\u2728";
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: cn("w-full", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "bg-zinc-900 border border-zinc-800 rounded-2xl overflow-hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+          "div",
+          {
+            className: "h-[3px] bg-gradient-to-r from-violet-500 via-purple-500 to-violet-500",
+            style: {
+              backgroundSize: "200% 100%",
+              animation: "gradient-shift 2s ease-in-out infinite"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "p-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "w-10 h-10 rounded-xl bg-violet-500/10 border border-violet-500/20 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { className: "text-lg", children: getPhaseIcon() }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("h3", { className: "text-sm font-semibold text-zinc-100 truncate leading-tight", children: title || "Generating Research Report" }),
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("p", { className: "text-xs text-zinc-500 mt-0.5", children: [
+                depth && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { className: "capitalize", children: depth }),
+                depth && " \xB7 ",
+                "In progress"
+              ] })
+            ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "flex items-center gap-1.5 flex-shrink-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "w-[72px] h-7 rounded-lg bg-zinc-200 dark:bg-zinc-800 animate-pulse", style: { animationDelay: "120ms" } }),
-            /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "w-[88px] h-7 rounded-lg bg-zinc-200 dark:bg-zinc-700 animate-pulse", style: { animationDelay: "160ms" } })
+          /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "mt-4 space-y-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "h-2 bg-zinc-800 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+                "div",
+                {
+                  className: "h-full bg-gradient-to-r from-violet-500 to-purple-500 rounded-full transition-all duration-500 ease-out",
+                  style: { width: `${Math.max(pct, 2)}%` }
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("span", { className: "absolute right-0 -top-5 text-xs text-zinc-500 font-medium tabular-nums", children: [
+                pct,
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "w-2 h-2 rounded-full bg-violet-500 animate-pulse" }),
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { className: "text-xs text-zinc-400", children: step })
+            ] }),
+            phase === "ai_generation" && searchesTotal > 0 && /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "pt-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "flex items-center justify-between mb-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { className: "text-xs text-zinc-500", children: "Web searches" }),
+                /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("span", { className: "text-xs text-zinc-500 tabular-nums", children: [
+                  searchesCompleted,
+                  "/",
+                  searchesTotal
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "flex gap-1", children: Array.from({ length: Math.min(searchesTotal, 20) }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+                "div",
+                {
+                  className: cn(
+                    "flex-1 h-1 rounded-full transition-all duration-300",
+                    i < searchesCompleted ? "bg-violet-500" : i === searchesCompleted ? "bg-violet-500/50 animate-pulse" : "bg-zinc-700"
+                  )
+                },
+                i
+              )) })
+            ] })
           ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "mt-4 flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "w-2 h-2 rounded-full bg-amber-500/60 animate-pulse" }),
-          /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "h-[10px] w-[120px] rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse", style: { animationDelay: "200ms" } })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "absolute inset-0 -translate-x-full animate-[shimmer_2s_ease-in-out_infinite] bg-gradient-to-r from-transparent via-white/10 to-transparent" })
-    ] }) });
+      /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("style", { children: `
+          @keyframes gradient-shift {
+            0%, 100% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+          }
+        ` })
+    ] });
   }
   if (status === "failed") {
     return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "bg-red-950/20 border border-red-800/25 rounded-2xl p-5", children: /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "flex items-start gap-3", children: [