pxengine 0.1.88 → 0.1.90

package/dist/index.cjs

@@ -336,6 +336,7 @@ __export(index_exports, {
   TopPostsGrid: () => TopPostsGrid,
   VideoAtom: () => VideoAtom,
   WebSearchJobCard: () => WebSearchJobCard,
+  WidgetThemeContext: () => WidgetThemeContext,
   cn: () => cn,
   defaultFetchSelections: () => defaultFetchSelections,
   defaultPersistSelection: () => defaultPersistSelection,
@@ -347,12 +348,13 @@ __export(index_exports, {
   submitWidgetToAgent: () => submitWidgetToAgent,
   th: () => th,
   useCreatorWidgetPolling: () => useCreatorWidgetPolling,
+  useWidgetTheme: () => useWidgetTheme,
   withAlpha: () => withAlpha
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/render/PXEngineRenderer.tsx
-var import_react93 = __toESM(require("react"), 1);
+var import_react94 = __toESM(require("react"), 1);
 
 // src/atoms/index.ts
 var atoms_exports = {};
@@ -33964,14 +33966,22 @@ __export(molecules_exports, {
   TimelineCard: () => TimelineCard,
   TopPostsGrid: () => TopPostsGrid,
   WebSearchJobCard: () => WebSearchJobCard,
+  WidgetThemeContext: () => WidgetThemeContext,
   defaultFetchSelections: () => defaultFetchSelections,
   defaultPersistSelection: () => defaultPersistSelection,
   th: () => th,
   useCreatorWidgetPolling: () => useCreatorWidgetPolling,
+  useWidgetTheme: () => useWidgetTheme,
   withAlpha: () => withAlpha
 });
 
 // src/molecules/generic/widgetTheme.ts
+var import_react54 = require("react");
+var WidgetThemeContext = (0, import_react54.createContext)(void 0);
+function useWidgetTheme(explicit) {
+  const ctx = (0, import_react54.useContext)(WidgetThemeContext);
+  return explicit ?? ctx;
+}
 function withAlpha(color, alpha) {
   const hex = color.replace("#", "");
   if (hex.length === 6) {
@@ -33984,13 +33994,22 @@ function withAlpha(color, alpha) {
 }
 function th(theme) {
   const T = theme ?? {};
+  const shape = {
+    ...typeof T.borderWidth === "number" && { borderWidth: T.borderWidth },
+    ...typeof T.radius === "number" && { borderRadius: T.radius },
+    ...T.shadow && { boxShadow: T.shadow },
+    ...T.fontFamily && { fontFamily: T.fontFamily }
+  };
   const root = {
     ...T.background && { backgroundColor: T.background },
-    ...T.border && { borderColor: T.border }
+    ...T.border && { borderColor: T.border },
+    ...shape
   };
   const surface = {
     ...T.surface && { backgroundColor: T.surface },
-    ...T.border && { borderColor: T.border }
+    ...T.border && { borderColor: T.border },
+    ...typeof T.borderWidth === "number" && { borderWidth: T.borderWidth },
+    ...typeof T.radius === "number" && { borderRadius: Math.max(0, T.radius - 4) }
   };
   const text = {
     ...T.text && { color: T.text }
@@ -34007,14 +34026,35 @@ function th(theme) {
   const accentBorder = {
     ...T.accent && { borderColor: T.accent }
   };
+  const accentText = {
+    ...T.accentForeground && { color: T.accentForeground }
+  };
   const accentSubtle = (alpha = 0.12) => ({
     ...T.accent && { backgroundColor: withAlpha(T.accent, alpha) }
   });
-  return { root, surface, text, muted, accent, accentBg, accentBorder, accentSubtle };
+  const semantic = (kind) => ({
+    ...T[kind] && { color: T[kind] }
+  });
+  const gradientBg = {
+    ...T.gradient && { backgroundImage: T.gradient }
+  };
+  return {
+    root,
+    surface,
+    text,
+    muted,
+    accent,
+    accentBg,
+    accentBorder,
+    accentText,
+    accentSubtle,
+    semantic,
+    gradientBg
+  };
 }
 
 // src/molecules/generic/EditableField/EditableField.tsx
-var import_react54 = __toESM(require("react"), 1);
+var import_react55 = __toESM(require("react"), 1);
 
 // src/components/ui/hover-card.tsx
 var React82 = __toESM(require("react"), 1);
@@ -34333,7 +34373,7 @@ function Spinner({ className, ...props }) {
 
 // src/molecules/generic/EditableField/EditableField.tsx
 var import_jsx_runtime94 = require("react/jsx-runtime");
-var EditableField = import_react54.default.memo(
+var EditableField = import_react55.default.memo(
   ({
     label,
     value,
@@ -34353,12 +34393,12 @@ var EditableField = import_react54.default.memo(
     ...rest
   }) => {
     void rest;
-    const [localValue, setLocalValue] = (0, import_react54.useState)(value);
-    const inputRef = (0, import_react54.useRef)(null);
-    (0, import_react54.useEffect)(() => {
+    const [localValue, setLocalValue] = (0, import_react55.useState)(value);
+    const inputRef = (0, import_react55.useRef)(null);
+    (0, import_react55.useEffect)(() => {
       setLocalValue(value);
     }, [value, isEditingProp]);
-    (0, import_react54.useEffect)(() => {
+    (0, import_react55.useEffect)(() => {
       if (isEditingProp) {
         setTimeout(() => inputRef.current?.focus(), 0);
       }
@@ -34545,9 +34585,9 @@ var EditableField = import_react54.default.memo(
 EditableField.displayName = "EditableField";
 
 // src/molecules/generic/ActionButton/ActionButton.tsx
-var import_react55 = __toESM(require("react"), 1);
+var import_react56 = __toESM(require("react"), 1);
 var import_jsx_runtime95 = require("react/jsx-runtime");
-var ActionButton = import_react55.default.memo(
+var ActionButton = import_react56.default.memo(
   ({
     label,
     secondaryLabel,
@@ -34562,13 +34602,13 @@ var ActionButton = import_react55.default.memo(
     className,
     showCountdown = true
   }) => {
-    const [timeLeft, setTimeLeft] = (0, import_react55.useState)(countdownProp || 0);
-    (0, import_react55.useEffect)(() => {
+    const [timeLeft, setTimeLeft] = (0, import_react56.useState)(countdownProp || 0);
+    (0, import_react56.useEffect)(() => {
       if (countdownProp !== void 0) {
         setTimeLeft(countdownProp);
       }
     }, [countdownProp]);
-    (0, import_react55.useEffect)(() => {
+    (0, import_react56.useEffect)(() => {
       if (countdownProp === void 0 || countdownProp <= 0 || isPaused || isLoading || disabled) {
         return;
       }
@@ -34637,9 +34677,9 @@ var ActionButton = import_react55.default.memo(
 ActionButton.displayName = "ActionButton";
 
 // src/molecules/generic/FormCard/FormCard.tsx
-var import_react56 = __toESM(require("react"), 1);
+var import_react57 = __toESM(require("react"), 1);
 var import_jsx_runtime96 = require("react/jsx-runtime");
-var FormCard = import_react56.default.memo(
+var FormCard = import_react57.default.memo(
   ({
     title,
     fields,
@@ -34660,12 +34700,12 @@ var FormCard = import_react56.default.memo(
     footer,
     shouldStopPropagation = true
   }) => {
-    const [copied, setCopied] = (0, import_react56.useState)(false);
-    const [internalEditingFields, setInternalEditingFields] = (0, import_react56.useState)({});
-    const [internalSavingFields, setInternalSavingFields] = (0, import_react56.useState)({});
-    const [internalData, setInternalData] = (0, import_react56.useState)(data);
-    const [userEditedFields, setUserEditedFields] = (0, import_react56.useState)({});
-    import_react56.default.useEffect(() => {
+    const [copied, setCopied] = (0, import_react57.useState)(false);
+    const [internalEditingFields, setInternalEditingFields] = (0, import_react57.useState)({});
+    const [internalSavingFields, setInternalSavingFields] = (0, import_react57.useState)({});
+    const [internalData, setInternalData] = (0, import_react57.useState)(data);
+    const [userEditedFields, setUserEditedFields] = (0, import_react57.useState)({});
+    import_react57.default.useEffect(() => {
       setInternalData((prev) => {
         const newData = { ...data };
         Object.keys(userEditedFields).forEach((key) => {
@@ -34824,7 +34864,7 @@ var FormCard = import_react56.default.memo(
 FormCard.displayName = "FormCard";
 
 // src/molecules/generic/DynamicFormCard/DynamicFormCard.tsx
-var import_react57 = __toESM(require("react"), 1);
+var import_react58 = __toESM(require("react"), 1);
 
 // src/lib/field-utils.ts
 function normalizeLabel(key) {
@@ -34900,7 +34940,7 @@ function generateFieldsFromPropDefinitions(propDefs, data) {
 
 // src/molecules/generic/DynamicFormCard/DynamicFormCard.tsx
 var import_jsx_runtime97 = require("react/jsx-runtime");
-var DynamicFormCard = import_react57.default.memo(
+var DynamicFormCard = import_react58.default.memo(
   ({
     data = {},
     fields: providedFields,
@@ -34913,7 +34953,7 @@ var DynamicFormCard = import_react57.default.memo(
     showTimeline = true,
     ...rest
   }) => {
-    const fields = (0, import_react57.useMemo)(
+    const fields = (0, import_react58.useMemo)(
       () => providedFields ?? generateFieldsFromData(data),
       [providedFields, data]
     );
@@ -35176,10 +35216,10 @@ var FilterBar = ({ filters, showSearch = true, className, onFilterToggle, onSear
 };
 
 // src/molecules/generic/FileUpload/FileUpload.tsx
-var import_react58 = __toESM(require("react"), 1);
+var import_react59 = __toESM(require("react"), 1);
 var import_jsx_runtime102 = require("react/jsx-runtime");
 var FileUpload = ({ title, accept, multiple, className, style, onFilesSelected }) => {
-  const [isDragging, setIsDragging] = import_react58.default.useState(false);
+  const [isDragging, setIsDragging] = import_react59.default.useState(false);
   const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
   const wrapperStyle = {
     ...hasPxVars && {
@@ -35339,7 +35379,7 @@ var DataGrid = ({
 };
 
 // src/molecules/generic/StepWizard/StepWizard.tsx
-var import_react59 = __toESM(require("react"), 1);
+var import_react60 = __toESM(require("react"), 1);
 var import_jsx_runtime105 = require("react/jsx-runtime");
 var StepWizard = ({
   steps,
@@ -35350,7 +35390,7 @@ var StepWizard = ({
     const isCompleted = i < currentStep;
     const isActive = i === currentStep;
     const isLast = i === steps.length - 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_react59.default.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_react60.default.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "flex flex-col items-center relative group", children: [
         /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
           "div",
@@ -35449,10 +35489,10 @@ var NotificationList = ({
 };
 
 // src/molecules/generic/SocialPostCard/SocialPostCard.tsx
-var import_react61 = require("react");
+var import_react62 = require("react");
 
 // src/molecules/generic/SocialPostCard/PlatformPost.tsx
-var import_react60 = require("react");
+var import_react61 = require("react");
 var import_jsx_runtime107 = require("react/jsx-runtime");
 var PLATFORM_STYLES = {
   twitter: {
@@ -35478,8 +35518,8 @@ var PLATFORM_STYLES = {
   }
 };
 var PlatformPost = ({ post, loading, className }) => {
-  const [copied, setCopied] = (0, import_react60.useState)(false);
-  const [caption, setCaption] = (0, import_react60.useState)(post.caption);
+  const [copied, setCopied] = (0, import_react61.useState)(false);
+  const [caption, setCaption] = (0, import_react61.useState)(post.caption);
   const style = PLATFORM_STYLES[post.platform] || PLATFORM_STYLES.twitter;
   const charCount = caption.length;
   const isOverLimit = charCount > post.character_limit;
@@ -35608,7 +35648,7 @@ var SocialPostCard = ({
   sendMessage: _sendMessage
 }) => {
   const initialSelected = posts?.map((p) => p.platform) || ALL_PLATFORMS.slice();
-  const [selectedPlatforms, setSelectedPlatforms] = (0, import_react61.useState)(initialSelected);
+  const [selectedPlatforms, setSelectedPlatforms] = (0, import_react62.useState)(initialSelected);
   const togglePlatform = (platform) => {
     setSelectedPlatforms((prev) => {
       if (prev.includes(platform)) {
@@ -36744,9 +36784,9 @@ var GoogleSheetsListCard = ({
 };
 
 // src/molecules/generic/RecommendationCard/RecommendationCard.tsx
-var import_react62 = __toESM(require("react"), 1);
+var import_react63 = __toESM(require("react"), 1);
 var import_jsx_runtime121 = require("react/jsx-runtime");
-var RecommendationCard = import_react62.default.memo(
+var RecommendationCard = import_react63.default.memo(
   ({
     question,
     recommended,
@@ -36758,11 +36798,11 @@ var RecommendationCard = import_react62.default.memo(
     className,
     onAction
   }) => {
-    const [mode, setMode] = import_react62.default.useState(
+    const [mode, setMode] = import_react63.default.useState(
       "recommended"
     );
-    const [customText, setCustomText] = import_react62.default.useState("");
-    const [isSubmitted, setIsSubmitted] = import_react62.default.useState(false);
+    const [customText, setCustomText] = import_react63.default.useState("");
+    const [isSubmitted, setIsSubmitted] = import_react63.default.useState(false);
     const isInteractive = isLatestMessage && !disabled && !isSubmitted;
     const handleModeChange = (newMode) => {
       if (isInteractive) {
@@ -36909,9 +36949,9 @@ var RecommendationCard = import_react62.default.memo(
 RecommendationCard.displayName = "RecommendationCard";
 
 // src/molecules/generic/ConfirmationCard/ConfirmationCard.tsx
-var import_react63 = __toESM(require("react"), 1);
+var import_react64 = __toESM(require("react"), 1);
 var import_jsx_runtime122 = require("react/jsx-runtime");
-var ConfirmationCard = import_react63.default.memo(
+var ConfirmationCard = import_react64.default.memo(
   ({
     title,
     description,
@@ -36924,8 +36964,8 @@ var ConfirmationCard = import_react63.default.memo(
     className,
     onAction
   }) => {
-    const [isSubmitted, setIsSubmitted] = import_react63.default.useState(false);
-    const [choice, setChoice] = import_react63.default.useState(null);
+    const [isSubmitted, setIsSubmitted] = import_react64.default.useState(false);
+    const [choice, setChoice] = import_react64.default.useState(null);
     const isInteractive = isLatestMessage && !disabled && !isSubmitted;
     const handleConfirm = (e) => {
       e.preventDefault();
@@ -36994,7 +37034,7 @@ var ConfirmationCard = import_react63.default.memo(
 ConfirmationCard.displayName = "ConfirmationCard";
 
 // src/molecules/generic/InputWidget/InputWidget.tsx
-var import_react64 = __toESM(require("react"), 1);
+var import_react65 = __toESM(require("react"), 1);
 
 // src/lib/run-sse.ts
 var INPUT_ATOM_NAMES = /* @__PURE__ */ new Set([
@@ -37116,7 +37156,7 @@ var InputWidget = ({
   onAction,
   isSubmitting = false
 }) => {
-  const [values, setValues] = import_react64.default.useState(() => {
+  const [values, setValues] = import_react65.default.useState(() => {
     const initial = {};
     for (const f of fields) {
       initial[f.key] = f.defaultValue ?? defaultForKind(f.kind);
@@ -37372,7 +37412,7 @@ function stringifyValue(value, atomName, props) {
 }
 
 // src/molecules/generic/KPIStatsCard/KPIStatsCard.tsx
-var import_react65 = __toESM(require("react"), 1);
+var import_react66 = __toESM(require("react"), 1);
 var import_jsx_runtime124 = require("react/jsx-runtime");
 var TrendBadge = ({ item }) => {
   if (!item.delta && item.trend === void 0) return null;
@@ -37389,7 +37429,7 @@ var TrendBadge = ({ item }) => {
     item.delta
   ] });
 };
-var KPIStatsCard = import_react65.default.memo(
+var KPIStatsCard = import_react66.default.memo(
   ({ title, subtitle, stats, items, theme, className, onAction: _onAction }) => {
     const s = th(theme);
     const displayStats = stats || items || [];
@@ -37449,7 +37489,7 @@ var KPIStatsCard = import_react65.default.memo(
 KPIStatsCard.displayName = "KPIStatsCard";
 
 // src/molecules/generic/ApprovalCard/ApprovalCard.tsx
-var import_react66 = __toESM(require("react"), 1);
+var import_react67 = __toESM(require("react"), 1);
 var import_jsx_runtime125 = require("react/jsx-runtime");
 var STATUS_CONFIG2 = {
   pending: { label: "Pending Review", icon: Clock, className: "text-yellow-400 bg-yellow-500/10 border-yellow-500/20" },
@@ -37457,7 +37497,7 @@ var STATUS_CONFIG2 = {
   rejected: { label: "Rejected", icon: CircleX, className: "text-rose-400 bg-rose-500/10 border-rose-500/20" },
   changes_requested: { label: "Changes Requested", icon: MessageSquare, className: "text-blue-400 bg-blue-500/10 border-blue-500/20" }
 };
-var ApprovalCard = import_react66.default.memo(
+var ApprovalCard = import_react67.default.memo(
   ({
     title,
     description,
@@ -37475,9 +37515,9 @@ var ApprovalCard = import_react66.default.memo(
     onAction
   }) => {
     const s = th(theme);
-    const [status, setStatus] = import_react66.default.useState(propStatus || "pending");
-    const [isSubmitted, setIsSubmitted] = import_react66.default.useState(!!propStatus && propStatus !== "pending");
-    import_react66.default.useEffect(() => {
+    const [status, setStatus] = import_react67.default.useState(propStatus || "pending");
+    const [isSubmitted, setIsSubmitted] = import_react67.default.useState(!!propStatus && propStatus !== "pending");
+    import_react67.default.useEffect(() => {
       if (propStatus) {
         setStatus(propStatus);
         setIsSubmitted(propStatus !== "pending");
@@ -37565,7 +37605,7 @@ var ApprovalCard = import_react66.default.memo(
 ApprovalCard.displayName = "ApprovalCard";
 
 // src/molecules/generic/TimelineCard/TimelineCard.tsx
-var import_react67 = __toESM(require("react"), 1);
+var import_react68 = __toESM(require("react"), 1);
 var import_jsx_runtime126 = require("react/jsx-runtime");
 var StepDot = ({ step, accentColor }) => {
   if (step.status === "completed") return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-emerald-500/20 ring-2 ring-emerald-500/40", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Check, { className: "h-3 w-3 text-emerald-400", strokeWidth: 2.5 }) });
@@ -37583,7 +37623,7 @@ var StepDot = ({ step, accentColor }) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray400/20 ring-2 ring-gray400/20", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Circle, { className: "h-2.5 w-2.5 text-cardText/20" }) });
 };
-var TimelineCard = import_react67.default.memo(
+var TimelineCard = import_react68.default.memo(
   ({ title, steps, milestones, theme, className, onAction: _onAction }) => {
     const s = th(theme);
     const displaySteps = steps || milestones || [];
@@ -37641,9 +37681,9 @@ var TimelineCard = import_react67.default.memo(
 TimelineCard.displayName = "TimelineCard";
 
 // src/molecules/generic/FeedbackRatingCard/FeedbackRatingCard.tsx
-var import_react68 = __toESM(require("react"), 1);
+var import_react69 = __toESM(require("react"), 1);
 var import_jsx_runtime127 = require("react/jsx-runtime");
-var FeedbackRatingCard = import_react68.default.memo(
+var FeedbackRatingCard = import_react69.default.memo(
   ({
     question,
     max_rating = 5,
@@ -37659,10 +37699,10 @@ var FeedbackRatingCard = import_react68.default.memo(
     onAction
   }) => {
     const s = th(theme);
-    const [rating, setRating] = import_react68.default.useState(0);
-    const [hovered, setHovered] = import_react68.default.useState(0);
-    const [comment, setComment] = import_react68.default.useState("");
-    const [isSubmitted, setIsSubmitted] = import_react68.default.useState(false);
+    const [rating, setRating] = import_react69.default.useState(0);
+    const [hovered, setHovered] = import_react69.default.useState(0);
+    const [comment, setComment] = import_react69.default.useState("");
+    const [isSubmitted, setIsSubmitted] = import_react69.default.useState(false);
     const isInteractive = isLatestMessage && !disabled && !isSubmitted;
     const stars = Array.from({ length: max_rating }, (_, i) => i + 1);
     const handleSubmit = (e) => {
@@ -37741,9 +37781,9 @@ Feedback: ${comment}` : `Rating: ${rating}/${max_rating} ${label}`;
 FeedbackRatingCard.displayName = "FeedbackRatingCard";
 
 // src/molecules/generic/DataTableCard/DataTableCard.tsx
-var import_react69 = __toESM(require("react"), 1);
+var import_react70 = __toESM(require("react"), 1);
 var import_jsx_runtime128 = require("react/jsx-runtime");
-var DataTableCard = import_react69.default.memo(
+var DataTableCard = import_react70.default.memo(
   ({ title, caption, columns, rows, highlight_column, theme, className, onAction: _onAction }) => {
     const s = th(theme);
     return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: cn("w-full rounded-[16px] border border-gray400 bg-cardSurface overflow-hidden", className), style: s.root, children: [
@@ -37793,9 +37833,9 @@ var DataTableCard = import_react69.default.memo(
 DataTableCard.displayName = "DataTableCard";
 
 // src/molecules/generic/ChecklistCard/ChecklistCard.tsx
-var import_react70 = __toESM(require("react"), 1);
+var import_react71 = __toESM(require("react"), 1);
 var import_jsx_runtime129 = require("react/jsx-runtime");
-var ChecklistCard = import_react70.default.memo(
+var ChecklistCard = import_react71.default.memo(
   ({
     title,
     description,
@@ -37812,10 +37852,10 @@ var ChecklistCard = import_react70.default.memo(
   }) => {
     const s = th(theme);
     const source = items || tasks || [];
-    const [checked, setChecked] = import_react70.default.useState(
+    const [checked, setChecked] = import_react71.default.useState(
       () => new Set(source.filter((i) => i.checked).map((i) => i.id))
     );
-    const [isSubmitted, setIsSubmitted] = import_react70.default.useState(false);
+    const [isSubmitted, setIsSubmitted] = import_react71.default.useState(false);
     const isInteractive = isLatestMessage && !disabled && !isSubmitted;
     const toggle = (id) => {
       if (!isInteractive) return;
@@ -37928,9 +37968,9 @@ var ChecklistCard = import_react70.default.memo(
 ChecklistCard.displayName = "ChecklistCard";
 
 // src/molecules/generic/PollCard/PollCard.tsx
-var import_react71 = __toESM(require("react"), 1);
+var import_react72 = __toESM(require("react"), 1);
 var import_jsx_runtime130 = require("react/jsx-runtime");
-var PollCard = import_react71.default.memo(
+var PollCard = import_react72.default.memo(
   ({
     question,
     options,
@@ -37947,9 +37987,9 @@ var PollCard = import_react71.default.memo(
   }) => {
     const s = th(theme);
     const source = options || choices || [];
-    const [selected, setSelected] = import_react71.default.useState(/* @__PURE__ */ new Set());
-    const [hasVoted, setHasVoted] = import_react71.default.useState(false);
-    const [voteCounts, setVoteCounts] = import_react71.default.useState(
+    const [selected, setSelected] = import_react72.default.useState(/* @__PURE__ */ new Set());
+    const [hasVoted, setHasVoted] = import_react72.default.useState(false);
+    const [voteCounts, setVoteCounts] = import_react72.default.useState(
       () => Object.fromEntries(source.map((o) => [o.id, o.votes ?? 0]))
     );
     const isInteractive = isLatestMessage && !disabled && !hasVoted;
@@ -38088,7 +38128,7 @@ Selected: ${labels.join(", ")}`);
 PollCard.displayName = "PollCard";
 
 // src/molecules/generic/CalendarEventCard/CalendarEventCard.tsx
-var import_react72 = __toESM(require("react"), 1);
+var import_react73 = __toESM(require("react"), 1);
 var import_jsx_runtime131 = require("react/jsx-runtime");
 var STATUS_STYLES = {
   upcoming: { label: "Upcoming", className: "text-blue-400 bg-blue-500/10 border-blue-500/20", dot: "bg-blue-400" },
@@ -38109,7 +38149,7 @@ function AvatarInitials({ name }) {
     }
   );
 }
-var CalendarEventCard = import_react72.default.memo(
+var CalendarEventCard = import_react73.default.memo(
   ({
     title,
     date,
@@ -38126,7 +38166,7 @@ var CalendarEventCard = import_react72.default.memo(
   }) => {
     const s = th(theme);
     const cfg = STATUS_STYLES[status];
-    const parsedDate = import_react72.default.useMemo(() => {
+    const parsedDate = import_react73.default.useMemo(() => {
       try {
         const d = new Date(date);
         if (isNaN(d.getTime())) {
@@ -38212,7 +38252,7 @@ var CalendarEventCard = import_react72.default.memo(
 CalendarEventCard.displayName = "CalendarEventCard";
 
 // src/molecules/generic/BudgetAllocCard/BudgetAllocCard.tsx
-var import_react73 = __toESM(require("react"), 1);
+var import_react74 = __toESM(require("react"), 1);
 var import_jsx_runtime132 = require("react/jsx-runtime");
 var PALETTE = [
   "#BFAD82",
@@ -38238,7 +38278,7 @@ function formatAmount(amount, currency) {
   if (amount >= 1e3) return `${currency}${(amount / 1e3).toFixed(0)}K`;
   return `${currency}${amount.toLocaleString()}`;
 }
-var BudgetAllocCard = import_react73.default.memo(
+var BudgetAllocCard = import_react74.default.memo(
   ({
     title,
     currency = "$",
@@ -38355,7 +38395,7 @@ var BudgetAllocCard = import_react73.default.memo(
 BudgetAllocCard.displayName = "BudgetAllocCard";
 
 // src/molecules/generic/ComparisonCard/ComparisonCard.tsx
-var import_react74 = __toESM(require("react"), 1);
+var import_react75 = __toESM(require("react"), 1);
 var import_jsx_runtime133 = require("react/jsx-runtime");
 var BADGE_COLORS = {
   gold: "text-gold border-gold/30 bg-gold/10",
@@ -38363,7 +38403,7 @@ var BADGE_COLORS = {
   emerald: "text-emerald-400 border-emerald-500/30 bg-emerald-500/10",
   violet: "text-violet-400 border-violet-500/30 bg-violet-500/10"
 };
-var ComparisonCard = import_react74.default.memo(
+var ComparisonCard = import_react75.default.memo(
   ({
     title,
     description,
@@ -38378,8 +38418,8 @@ var ComparisonCard = import_react74.default.memo(
     onAction
   }) => {
     const s = th(theme);
-    const [selected, setSelected] = import_react74.default.useState(null);
-    const [isSubmitted, setIsSubmitted] = import_react74.default.useState(false);
+    const [selected, setSelected] = import_react75.default.useState(null);
+    const [isSubmitted, setIsSubmitted] = import_react75.default.useState(false);
     const isInteractive = isLatestMessage && !disabled && !isSubmitted;
     const handleSelect = (opt) => (e) => {
       e.preventDefault();
@@ -38974,7 +39014,7 @@ var NextStepCard = ({
 ] });
 
 // src/molecules/generic/PresentationJobCard/PresentationJobCard.tsx
-var import_react75 = require("react");
+var import_react76 = require("react");
 var import_jsx_runtime147 = require("react/jsx-runtime");
 var DownloadIcon = () => /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
@@ -39031,7 +39071,7 @@ var FORMATS = [
 var ExportModal = ({ formats, title, onClose }) => {
   const available = FORMATS.filter((f) => formats[f.key]);
   const filename = title.replace(/[^a-z0-9]/gi, "-").toLowerCase();
-  const [downloadingKey, setDownloadingKey] = (0, import_react75.useState)(null);
+  const [downloadingKey, setDownloadingKey] = (0, import_react76.useState)(null);
   const handleDownload = async (fmtKey, url, ext) => {
     if (downloadingKey) return;
     const downloadName = `${filename}${ext}`;
@@ -39099,10 +39139,10 @@ var ExportModal = ({ formats, title, onClose }) => {
   ] });
 };
 var FullscreenModal = ({ url, title, slideCount, initialSlide = 1, onClose }) => {
-  const [currentSlide, setCurrentSlide] = (0, import_react75.useState)(initialSlide);
-  const [iframeReady, setIframeReady] = (0, import_react75.useState)(false);
-  const iframeRef = (0, import_react75.useRef)(null);
-  (0, import_react75.useEffect)(() => {
+  const [currentSlide, setCurrentSlide] = (0, import_react76.useState)(initialSlide);
+  const [iframeReady, setIframeReady] = (0, import_react76.useState)(false);
+  const iframeRef = (0, import_react76.useRef)(null);
+  (0, import_react76.useEffect)(() => {
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -39120,7 +39160,7 @@ var FullscreenModal = ({ url, title, slideCount, initialSlide = 1, onClose }) =>
       window.removeEventListener("message", onMsg);
     };
   }, [onClose, iframeReady]);
-  (0, import_react75.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     document.body.style.overflow = "hidden";
     return () => {
       document.body.style.overflow = "";
@@ -39207,6 +39247,7 @@ var PresentationJobCard = ({
   slide_count: initialSlideCount,
   formats: initialFormats = {},
   error: initialError,
+  progress: initialProgress,
   pollUrl,
   authToken,
   shareUrl,
@@ -39214,24 +39255,46 @@ var PresentationJobCard = ({
   onComplete,
   onFailed
 }) => {
-  const [status, setStatus] = (0, import_react75.useState)(initialStatus);
-  const [title, setTitle] = (0, import_react75.useState)(initialTitle);
-  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 [showExport, setShowExport] = (0, import_react75.useState)(false);
-  const [showFullscreen, setShowFullscreen] = (0, import_react75.useState)(false);
-  const [copied, setCopied] = (0, import_react75.useState)(false);
-  const [currentSlide, setCurrentSlide] = (0, import_react75.useState)(1);
-  const [previewScale, setPreviewScale] = (0, import_react75.useState)(1);
-  const [iframeReady, setIframeReady] = (0, import_react75.useState)(false);
-  const intervalRef = (0, import_react75.useRef)(null);
-  const previewRef = (0, import_react75.useRef)(null);
-  const iframeRef = (0, import_react75.useRef)(null);
-  const updateScale = (0, import_react75.useCallback)(() => {
+  const [status, setStatus] = (0, import_react76.useState)(initialStatus);
+  const [title, setTitle] = (0, import_react76.useState)(initialTitle);
+  const [slideCount, setSlideCount] = (0, import_react76.useState)(initialSlideCount ?? 0);
+  const [formats, setFormats] = (0, import_react76.useState)(initialFormats);
+  const [error, setError] = (0, import_react76.useState)(initialError);
+  const [progress, setProgress] = (0, import_react76.useState)(initialProgress);
+  const [showExport, setShowExport] = (0, import_react76.useState)(false);
+  const [showFullscreen, setShowFullscreen] = (0, import_react76.useState)(false);
+  const [copied, setCopied] = (0, import_react76.useState)(false);
+  const [currentSlide, setCurrentSlide] = (0, import_react76.useState)(1);
+  const [previewScale, setPreviewScale] = (0, import_react76.useState)(1);
+  const [iframeReady, setIframeReady] = (0, import_react76.useState)(false);
+  const intervalRef = (0, import_react76.useRef)(null);
+  const previewRef = (0, import_react76.useRef)(null);
+  const iframeRef = (0, import_react76.useRef)(null);
+  (0, import_react76.useEffect)(() => {
+    setStatus(initialStatus);
+  }, [initialStatus]);
+  const progressPct = initialProgress?.percentage;
+  const progressStep = initialProgress?.current_step;
+  (0, import_react76.useEffect)(() => {
+    if (initialProgress) setProgress(initialProgress);
+  }, [progressPct, progressStep]);
+  (0, import_react76.useEffect)(() => {
+    if (initialError) setError(initialError);
+  }, [initialError]);
+  (0, import_react76.useEffect)(() => {
+    if (initialSlideCount !== void 0) setSlideCount(initialSlideCount);
+  }, [initialSlideCount]);
+  const htmlUrl = initialFormats?.html_url;
+  (0, import_react76.useEffect)(() => {
+    if (initialFormats) setFormats(initialFormats);
+  }, [htmlUrl]);
+  (0, import_react76.useEffect)(() => {
+    if (initialTitle) setTitle(initialTitle);
+  }, [initialTitle]);
+  const updateScale = (0, import_react76.useCallback)(() => {
     if (previewRef.current) setPreviewScale(previewRef.current.offsetWidth / 1280);
   }, []);
-  (0, import_react75.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     updateScale();
     setIframeReady(false);
     if (typeof ResizeObserver === "undefined") return;
@@ -39239,7 +39302,7 @@ var PresentationJobCard = ({
     if (previewRef.current) ro.observe(previewRef.current);
     return () => ro.disconnect();
   }, [updateScale, formats.html_url]);
-  (0, import_react75.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     const handler = (e) => {
       if (e.data?.type === "slideChanged") {
         setCurrentSlide(e.data.slide);
@@ -39264,12 +39327,12 @@ var PresentationJobCard = ({
     iframe.contentWindow.postMessage({ type: command }, "*");
   };
   const isTerminal = status === "complete" || status === "failed";
-  const onCompleteRef = (0, import_react75.useRef)(onComplete);
-  const onFailedRef = (0, import_react75.useRef)(onFailed);
-  const hasNotifiedRef = (0, import_react75.useRef)(false);
+  const onCompleteRef = (0, import_react76.useRef)(onComplete);
+  const onFailedRef = (0, import_react76.useRef)(onFailed);
+  const hasNotifiedRef = (0, import_react76.useRef)(false);
   onCompleteRef.current = onComplete;
   onFailedRef.current = onFailed;
-  (0, import_react75.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     if (isTerminal || !pollUrl) return;
     const poll = async () => {
       try {
@@ -39282,6 +39345,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;
@@ -39315,7 +39381,7 @@ var PresentationJobCard = ({
       if (intervalRef.current) clearInterval(intervalRef.current);
     };
   }, [isTerminal, pollUrl, authToken, initialTitle]);
-  (0, import_react75.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     if (isTerminal && intervalRef.current) {
       clearInterval(intervalRef.current);
       intervalRef.current = null;
@@ -39333,14 +39399,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: [
@@ -39494,7 +39639,7 @@ var PresentationJobCard = ({
 };
 
 // src/molecules/generic/ResearchReportJobCard/ResearchReportJobCard.tsx
-var import_react76 = require("react");
+var import_react77 = require("react");
 var import_jsx_runtime148 = require("react/jsx-runtime");
 var DEFAULT_THEME = {
   primary: "#8b5cf6",
@@ -39524,14 +39669,14 @@ var ExpandIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("svg", {
   /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
 ] });
 var FullscreenPreviewModal = ({ url, title, onClose }) => {
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [onClose]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     document.body.style.overflow = "hidden";
     return () => {
       document.body.style.overflow = "";
@@ -39581,6 +39726,7 @@ var ResearchReportJobCard = (props) => {
     html_url: initialHtmlUrl,
     theme: initialTheme,
     error: initialError,
+    progress: initialProgress,
     pollUrl,
     authToken,
     className,
@@ -39589,72 +39735,79 @@ var ResearchReportJobCard = (props) => {
     compact = false
   } = props;
   const inferredStatus = initialStatus ?? (initialHtmlUrl ? "complete" : void 0);
-  const [status, setStatus] = (0, import_react76.useState)(inferredStatus);
-  const [title, setTitle] = (0, import_react76.useState)(initialTitle);
-  const [depth, setDepth] = (0, import_react76.useState)(initialDepth || "");
-  const [sectionCount, setSectionCount] = (0, import_react76.useState)(initialSectionCount ?? 0);
-  const [sourceCount, setSourceCount] = (0, import_react76.useState)(initialSourceCount ?? 0);
-  const [wordCount, setWordCount] = (0, import_react76.useState)(initialWordCount ?? 0);
-  const [summary, setSummary] = (0, import_react76.useState)(initialSummary || "");
-  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 [showPreview, setShowPreview] = (0, import_react76.useState)(false);
-  const [previewScale, setPreviewScale] = (0, import_react76.useState)(1);
-  const previewRef = (0, import_react76.useRef)(null);
-  const intervalRef = (0, import_react76.useRef)(null);
-  const onCompleteRef = (0, import_react76.useRef)(onComplete);
-  const onFailedRef = (0, import_react76.useRef)(onFailed);
-  const hasNotifiedRef = (0, import_react76.useRef)(false);
+  const [status, setStatus] = (0, import_react77.useState)(inferredStatus);
+  const [title, setTitle] = (0, import_react77.useState)(initialTitle);
+  const [depth, setDepth] = (0, import_react77.useState)(initialDepth || "");
+  const [sectionCount, setSectionCount] = (0, import_react77.useState)(initialSectionCount ?? 0);
+  const [sourceCount, setSourceCount] = (0, import_react77.useState)(initialSourceCount ?? 0);
+  const [wordCount, setWordCount] = (0, import_react77.useState)(initialWordCount ?? 0);
+  const [summary, setSummary] = (0, import_react77.useState)(initialSummary || "");
+  const [htmlUrl, setHtmlUrl] = (0, import_react77.useState)(initialHtmlUrl || "");
+  const [theme, setTheme] = (0, import_react77.useState)(initialTheme || DEFAULT_THEME);
+  const [error, setError] = (0, import_react77.useState)(initialError);
+  const [progress, setProgress] = (0, import_react77.useState)(initialProgress);
+  const [showPreview, setShowPreview] = (0, import_react77.useState)(false);
+  const [previewScale, setPreviewScale] = (0, import_react77.useState)(1);
+  const previewRef = (0, import_react77.useRef)(null);
+  const intervalRef = (0, import_react77.useRef)(null);
+  const onCompleteRef = (0, import_react77.useRef)(onComplete);
+  const onFailedRef = (0, import_react77.useRef)(onFailed);
+  const hasNotifiedRef = (0, import_react77.useRef)(false);
   onCompleteRef.current = onComplete;
   onFailedRef.current = onFailed;
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     const newStatus = initialStatus ?? (initialHtmlUrl ? "complete" : void 0);
     setStatus(newStatus);
   }, [initialStatus, initialHtmlUrl]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (initialTitle) setTitle(initialTitle);
   }, [initialTitle]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (initialHtmlUrl) setHtmlUrl(initialHtmlUrl);
   }, [initialHtmlUrl]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (initialDepth) setDepth(initialDepth);
   }, [initialDepth]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (initialSectionCount !== void 0) setSectionCount(initialSectionCount);
   }, [initialSectionCount]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (initialSourceCount !== void 0) setSourceCount(initialSourceCount);
   }, [initialSourceCount]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (initialWordCount !== void 0) setWordCount(initialWordCount);
   }, [initialWordCount]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (initialSummary) setSummary(initialSummary);
   }, [initialSummary]);
-  (0, import_react76.useEffect)(() => {
+  const themePrimary = initialTheme?.primary;
+  (0, import_react77.useEffect)(() => {
     if (initialTheme) setTheme(initialTheme);
-  }, [initialTheme]);
-  (0, import_react76.useEffect)(() => {
+  }, [themePrimary]);
+  (0, import_react77.useEffect)(() => {
     if (initialError) setError(initialError);
   }, [initialError]);
+  const progressPct = initialProgress?.percentage;
+  const progressStep = initialProgress?.current_step;
+  (0, import_react77.useEffect)(() => {
+    if (initialProgress) setProgress(initialProgress);
+  }, [progressPct, progressStep]);
   const isTerminal = status === "complete" || status === "failed";
   const primaryColor = theme?.primary || DEFAULT_THEME.primary;
   const hasHTML = Boolean(htmlUrl);
-  const updateScale = (0, import_react76.useCallback)(() => {
+  const updateScale = (0, import_react77.useCallback)(() => {
     if (previewRef.current) {
       setPreviewScale(previewRef.current.offsetWidth / 800);
     }
   }, []);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     updateScale();
     if (typeof ResizeObserver === "undefined") return;
     const ro = new ResizeObserver(updateScale);
     if (previewRef.current) ro.observe(previewRef.current);
     return () => ro.disconnect();
   }, [updateScale, htmlUrl]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (isTerminal || !pollUrl) return;
     const poll = async () => {
       try {
@@ -39667,6 +39820,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);
@@ -39701,7 +39857,7 @@ var ResearchReportJobCard = (props) => {
       if (intervalRef.current) clearInterval(intervalRef.current);
     };
   }, [isTerminal, pollUrl, authToken, initialTitle]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (isTerminal && intervalRef.current) {
       clearInterval(intervalRef.current);
       intervalRef.current = null;
@@ -39712,27 +39868,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: [
@@ -39903,7 +40128,7 @@ var ResearchReportJobCard = (props) => {
 };
 
 // src/molecules/generic/WebSearchJobCard/WebSearchJobCard.tsx
-var import_react77 = require("react");
+var import_react78 = require("react");
 var import_jsx_runtime149 = require("react/jsx-runtime");
 var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
@@ -39924,6 +40149,7 @@ var WebSearchJobCard = ({
   summary: initialSummary,
   results: initialResults,
   error: initialError,
+  progress: initialProgress,
   pollUrl,
   authToken,
   className,
@@ -39931,45 +40157,51 @@ var WebSearchJobCard = ({
   onFailed,
   compact = false
 }) => {
-  const [status, setStatus] = (0, import_react77.useState)(initialStatus);
-  const [query, setQuery] = (0, import_react77.useState)(initialQuery || initialTitle || "");
-  const [resultCount, setResultCount] = (0, import_react77.useState)(initialResultCount ?? 0);
-  const [searchCount, setSearchCount] = (0, import_react77.useState)(initialSearchCount ?? 0);
-  const [summary, setSummary] = (0, import_react77.useState)(initialSummary || "");
-  const [results, setResults] = (0, import_react77.useState)(initialResults || []);
-  const [error, setError] = (0, import_react77.useState)(initialError);
-  const intervalRef = (0, import_react77.useRef)(null);
-  const onCompleteRef = (0, import_react77.useRef)(onComplete);
-  const onFailedRef = (0, import_react77.useRef)(onFailed);
-  const hasNotifiedRef = (0, import_react77.useRef)(false);
+  const [status, setStatus] = (0, import_react78.useState)(initialStatus);
+  const [query, setQuery] = (0, import_react78.useState)(initialQuery || initialTitle || "");
+  const [resultCount, setResultCount] = (0, import_react78.useState)(initialResultCount ?? 0);
+  const [searchCount, setSearchCount] = (0, import_react78.useState)(initialSearchCount ?? 0);
+  const [summary, setSummary] = (0, import_react78.useState)(initialSummary || "");
+  const [results, setResults] = (0, import_react78.useState)(initialResults || []);
+  const [error, setError] = (0, import_react78.useState)(initialError);
+  const [progress, setProgress] = (0, import_react78.useState)(initialProgress);
+  const intervalRef = (0, import_react78.useRef)(null);
+  const onCompleteRef = (0, import_react78.useRef)(onComplete);
+  const onFailedRef = (0, import_react78.useRef)(onFailed);
+  const hasNotifiedRef = (0, import_react78.useRef)(false);
   onCompleteRef.current = onComplete;
   onFailedRef.current = onFailed;
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     setStatus(initialStatus);
   }, [initialStatus]);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     if (initialQuery) setQuery(initialQuery);
   }, [initialQuery]);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     if (initialTitle && !initialQuery) setQuery(initialTitle);
   }, [initialTitle, initialQuery]);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     if (initialResultCount !== void 0) setResultCount(initialResultCount);
   }, [initialResultCount]);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     if (initialSearchCount !== void 0) setSearchCount(initialSearchCount);
   }, [initialSearchCount]);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     if (initialSummary) setSummary(initialSummary);
   }, [initialSummary]);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     if (initialResults) setResults(initialResults);
   }, [initialResults]);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     if (initialError) setError(initialError);
   }, [initialError]);
+  const progressPct = initialProgress?.percentage;
+  const progressStep = initialProgress?.current_step;
+  (0, import_react78.useEffect)(() => {
+    if (initialProgress) setProgress(initialProgress);
+  }, [progressPct, progressStep]);
   const isTerminal = status === "complete" || status === "failed";
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     if (isTerminal || !pollUrl) return;
     const poll = async () => {
       try {
@@ -39980,6 +40212,9 @@ var WebSearchJobCard = ({
         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;
           setQuery(output.query || "");
@@ -40009,38 +40244,94 @@ var WebSearchJobCard = ({
       if (intervalRef.current) clearInterval(intervalRef.current);
     };
   }, [isTerminal, pollUrl, authToken]);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     if (isTerminal && intervalRef.current) {
       clearInterval(intervalRef.current);
       intervalRef.current = null;
     }
   }, [isTerminal]);
   if (status === "pending" || status === "running") {
-    return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime149.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", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "p-5 space-y-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "w-10 h-10 rounded-xl bg-zinc-300 dark:bg-zinc-700 animate-pulse flex-shrink-0" }),
-          /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "flex-1 space-y-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "h-[13px] w-[60%] rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse" }),
-            /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "h-[10px] w-[25%] rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse", style: { animationDelay: "80ms" } })
+    const pct = progress?.percentage ?? 0;
+    const step = progress?.current_step ?? "Starting web search...";
+    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 "\u2699\uFE0F";
+        case "uploading":
+          return "\u2601\uFE0F";
+        default:
+          return "\u2728";
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "bg-zinc-900 border border-zinc-800 rounded-2xl overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
+        "div",
+        {
+          className: "h-[3px]",
+          style: {
+            background: "linear-gradient(90deg, #d97706, #f59e0b, #d97706)",
+            backgroundSize: "200% 100%",
+            animation: "gradient-shift 2s ease-in-out infinite"
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "p-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/20 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("span", { className: "text-lg", children: getPhaseIcon() }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("h3", { className: "text-sm font-semibold text-zinc-100 truncate leading-tight", children: query || initialTitle || "Web Search" }),
+            /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("p", { className: "text-xs text-zinc-500 mt-0.5", children: "In progress" })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "h-[9px] w-[85%] rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse", style: { animationDelay: "120ms" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "h-[9px] w-[70%] rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse", style: { animationDelay: "160ms" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "space-y-2 pt-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)(
-          "div",
-          {
-            className: "rounded-xl border border-zinc-200 dark:border-zinc-800 p-3 space-y-1.5",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "h-[10px] w-[65%] rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse", style: { animationDelay: `${200 + i * 80}ms` } }),
-              /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "h-[8px] w-[18%] rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse", style: { animationDelay: `${240 + i * 80}ms` } }),
-              /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "h-[8px] w-[90%] rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse", style: { animationDelay: `${280 + i * 80}ms` } })
-            ]
-          },
-          i
-        )) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime149.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_runtime149.jsxs)("div", { className: "mt-4 space-y-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "h-2 bg-zinc-800 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
+              "div",
+              {
+                className: "h-full rounded-full transition-all duration-500 ease-out",
+                style: {
+                  width: `${Math.max(pct, 2)}%`,
+                  background: "linear-gradient(90deg, #d97706, #f59e0b)"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("span", { className: "absolute right-0 -top-5 text-xs text-zinc-500 font-medium tabular-nums", children: [
+              pct,
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "w-2 h-2 rounded-full bg-amber-500 animate-pulse flex-shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("span", { className: "text-xs text-zinc-400", children: step })
+          ] }),
+          phase === "ai_generation" && searchesTotal > 0 && /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "pt-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "flex items-center justify-between mb-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("span", { className: "text-xs text-zinc-500", children: "Web searches" }),
+              /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("span", { className: "text-xs text-zinc-500 tabular-nums", children: [
+                searchesCompleted,
+                "/",
+                searchesTotal
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "flex gap-1", children: Array.from({ length: Math.min(searchesTotal, 20) }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
+              "div",
+              {
+                className: cn(
+                  "flex-1 h-1 rounded-full transition-all duration-300",
+                  i < searchesCompleted ? "bg-amber-500" : i === searchesCompleted ? "bg-amber-500/50 animate-pulse" : "bg-zinc-700"
+                )
+              },
+              i
+            )) })
+          ] })
+        ] })
+      ] })
     ] }) });
   }
   if (status === "failed") {
@@ -40097,10 +40388,10 @@ var WebSearchJobCard = ({
 };
 
 // src/molecules/creator-discovery/CampaignSeedCard/CampaignSeedCard.tsx
-var import_react79 = __toESM(require("react"), 1);
+var import_react80 = __toESM(require("react"), 1);
 
 // src/molecules/creator-discovery/SearchSpecCard/CustomFieldRenderers.tsx
-var import_react78 = require("react");
+var import_react79 = require("react");
 
 // src/lib/countries.ts
 var countries = [
@@ -40312,10 +40603,10 @@ var CountrySelectEdit = ({
   value,
   onChange
 }) => {
-  const [isDropdownOpen, setIsDropdownOpen] = (0, import_react78.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react78.useState)("");
-  const dropdownRef = (0, import_react78.useRef)(null);
-  (0, import_react78.useEffect)(() => {
+  const [isDropdownOpen, setIsDropdownOpen] = (0, import_react79.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react79.useState)("");
+  const dropdownRef = (0, import_react79.useRef)(null);
+  (0, import_react79.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsDropdownOpen(false);
@@ -40324,7 +40615,7 @@ var CountrySelectEdit = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const inputValue = (0, import_react78.useMemo)(() => {
+  const inputValue = (0, import_react79.useMemo)(() => {
     if (Array.isArray(value)) return value;
     if (typeof value === "string" && value.trim() !== "") {
       const foundCountry = countries.find(
@@ -40425,7 +40716,7 @@ var CountrySelectEdit = ({
   ] });
 };
 var CountrySelectDisplay = ({ value }) => {
-  const displayValues = (0, import_react78.useMemo)(() => {
+  const displayValues = (0, import_react79.useMemo)(() => {
     if (Array.isArray(value)) return value;
     if (typeof value === "string" && value.trim() !== "") return [value];
     return [];
@@ -40601,7 +40892,7 @@ var PlatformSelectEdit = ({
   value,
   onChange
 }) => {
-  const selectedPlatforms = (0, import_react78.useMemo)(() => {
+  const selectedPlatforms = (0, import_react79.useMemo)(() => {
     if (Array.isArray(value)) return value;
     if (typeof value === "string" && value.trim() !== "") {
       return value.split(",").map((s) => s.trim()).filter(Boolean);
@@ -40620,7 +40911,7 @@ var PlatformSelectEdit = ({
       onChange([...selectedPlatforms, platform]);
     }
   };
-  const options = (0, import_react78.useMemo)(() => {
+  const options = (0, import_react79.useMemo)(() => {
     return DEFAULT_PLATFORMS;
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { className: "flex flex-wrap gap-4 py-2", children: options.map((platform) => /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)(
@@ -40646,7 +40937,7 @@ var PlatformSelectEdit = ({
   )) });
 };
 var PlatformSelectDisplay = ({ value }) => {
-  const displayValues = (0, import_react78.useMemo)(() => {
+  const displayValues = (0, import_react79.useMemo)(() => {
     if (Array.isArray(value)) return value;
     if (typeof value === "string" && value.trim() !== "") {
       return value.split(",").map((s) => s.trim()).filter(Boolean);
@@ -40806,7 +41097,7 @@ function buildCampaignSeedFields(data) {
     return generated;
   });
 }
-var CampaignSeedCard = import_react79.default.memo(
+var CampaignSeedCard = import_react80.default.memo(
   ({
     selectionStatus,
     isLatestMessage = true,
@@ -40818,7 +41109,7 @@ var CampaignSeedCard = import_react79.default.memo(
     sendMessage,
     ...formCardProps
   }) => {
-    const fields = (0, import_react79.useMemo)(() => {
+    const fields = (0, import_react80.useMemo)(() => {
       return providedFields || buildCampaignSeedFields(data);
     }, [providedFields, data]);
     const handleProceed = () => {
@@ -40852,7 +41143,7 @@ var CampaignSeedCard = import_react79.default.memo(
 CampaignSeedCard.displayName = "CampaignSeedCard";
 
 // src/molecules/creator-discovery/SearchSpecCard/SearchSpecCard.tsx
-var import_react80 = __toESM(require("react"), 1);
+var import_react81 = __toESM(require("react"), 1);
 var import_jsx_runtime152 = require("react/jsx-runtime");
 var ObjectDisplay2 = ({ value }) => {
   if (!value || typeof value !== "object") return null;
@@ -40968,7 +41259,7 @@ function buildSearchSpecFields(data) {
     return generated;
   });
 }
-var SearchSpecCard = import_react80.default.memo(
+var SearchSpecCard = import_react81.default.memo(
   ({
     selectionStatus,
     isLatestMessage = true,
@@ -40982,7 +41273,7 @@ var SearchSpecCard = import_react80.default.memo(
     ...formCardProps
   }) => {
     const resolvedData = data || specData;
-    const fields = (0, import_react80.useMemo)(() => {
+    const fields = (0, import_react81.useMemo)(() => {
       return providedFields || buildSearchSpecFields(resolvedData ?? {});
     }, [providedFields, resolvedData]);
     const handleProceed = () => {
@@ -41018,7 +41309,7 @@ var SearchSpecCard = import_react80.default.memo(
 SearchSpecCard.displayName = "SearchSpecCard";
 
 // src/molecules/creator-discovery/MCQCard/MCQCard.tsx
-var import_react81 = __toESM(require("react"), 1);
+var import_react82 = __toESM(require("react"), 1);
 
 // src/molecules/creator-discovery/MCQCard/defaultFetchers.ts
 function getBackendOrigin() {
@@ -41119,7 +41410,7 @@ async function defaultPersistSelection(sessionId, questionKey, value) {
 
 // src/molecules/creator-discovery/MCQCard/MCQCard.tsx
 var import_jsx_runtime153 = require("react/jsx-runtime");
-var MCQCard = import_react81.default.memo(
+var MCQCard = import_react82.default.memo(
   ({
     question,
     options,
@@ -41144,16 +41435,16 @@ var MCQCard = import_react81.default.memo(
     const resolvedOptions = options || allProps.Options || allProps.opts || {};
     const resolvedRecommended = recommended || allProps.Recommended || allProps.rec;
     console.log("[MCQCard] FULL PROPS:", { allProps, resolvedQuestion, resolvedOptions: Object.keys(resolvedOptions || {}), resolvedRecommended });
-    const [selectedOption, setSelectedOption] = import_react81.default.useState(propsSelectedOption);
-    const [isProceeded, setIsProceeded] = import_react81.default.useState(false);
-    const fetchedSessionRef = import_react81.default.useRef("");
-    import_react81.default.useEffect(() => {
+    const [selectedOption, setSelectedOption] = import_react82.default.useState(propsSelectedOption);
+    const [isProceeded, setIsProceeded] = import_react82.default.useState(false);
+    const fetchedSessionRef = import_react82.default.useRef("");
+    import_react82.default.useEffect(() => {
       if (propsSelectedOption) {
         setSelectedOption(propsSelectedOption);
         setIsProceeded(true);
       }
     }, [propsSelectedOption]);
-    const buildQuestionKey = import_react81.default.useCallback((sid, question2) => {
+    const buildQuestionKey = import_react82.default.useCallback((sid, question2) => {
       let hash = 2166136261;
       for (let i = 0; i < question2.length; i++) {
         hash ^= question2.charCodeAt(i);
@@ -41161,7 +41452,7 @@ var MCQCard = import_react81.default.memo(
       }
       return `mcq_${sid}_${hash.toString(36)}`;
     }, []);
-    import_react81.default.useEffect(() => {
+    import_react82.default.useEffect(() => {
       if (!sessionId || !resolvedQuestion) return;
       const fetchKey = `${sessionId}::${resolvedQuestion}`;
       if (fetchedSessionRef.current === fetchKey) return;
@@ -41767,9 +42058,9 @@ var CreatorActionHeader = ({
 };
 
 // src/molecules/creator-discovery/CreatorSearchBox/CreatorSearch.tsx
-var import_react82 = __toESM(require("react"), 1);
+var import_react83 = __toESM(require("react"), 1);
 var import_jsx_runtime164 = require("react/jsx-runtime");
-var CreatorSearch = import_react82.default.memo(
+var CreatorSearch = import_react83.default.memo(
   ({
     selectionStatus,
     isLatestMessage = true,
@@ -41778,7 +42069,7 @@ var CreatorSearch = import_react82.default.memo(
     data,
     ...formCardProps
   }) => {
-    const fields = (0, import_react82.useMemo)(() => {
+    const fields = (0, import_react83.useMemo)(() => {
       const baseFields = providedFields || generateFieldsFromData(data);
       return baseFields.map((field) => {
         if (field.key === "platforms") {
@@ -41858,10 +42149,10 @@ var CreatorSearch = import_react82.default.memo(
 CreatorSearch.displayName = "CreatorSearch";
 
 // src/molecules/creator-discovery/CampaignConceptCard/CampaignConceptCard.tsx
-var import_react83 = __toESM(require("react"), 1);
+var import_react84 = __toESM(require("react"), 1);
 var import_framer_motion = require("framer-motion");
 var import_jsx_runtime165 = require("react/jsx-runtime");
-var CampaignConceptCard = import_react83.default.memo(
+var CampaignConceptCard = import_react84.default.memo(
   ({
     index,
     isRecommended,
@@ -41877,7 +42168,7 @@ var CampaignConceptCard = import_react83.default.memo(
     onAction,
     ...formCardProps
   }) => {
-    const [internalIsOpen, setInternalIsOpen] = (0, import_react83.useState)(false);
+    const [internalIsOpen, setInternalIsOpen] = (0, import_react84.useState)(false);
     const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
     const handleToggle = () => {
       if (onToggle) {
@@ -41896,7 +42187,7 @@ var CampaignConceptCard = import_react83.default.memo(
       });
     };
     const effectiveIsLatest = isLatestMessage && !hasUserResponded;
-    const fields = (0, import_react83.useMemo)(() => {
+    const fields = (0, import_react84.useMemo)(() => {
       const baseFields = providedFields || generateFieldsFromData(data);
       const FIELD_ORDER = [
         "description",
@@ -42208,14 +42499,14 @@ var CampaignConceptCard = import_react83.default.memo(
 CampaignConceptCard.displayName = "CampaignConceptCard";
 
 // src/molecules/creator-discovery/CreatorWidget/CreatorWidget.tsx
-var import_react91 = require("react");
+var import_react92 = require("react");
 
 // src/molecules/creator-discovery/CreatorWidget/CreatorImageList.tsx
-var import_react84 = require("react");
+var import_react85 = require("react");
 var import_jsx_runtime166 = require("react/jsx-runtime");
 function useMediaQuery(query) {
-  const [matches, setMatches] = (0, import_react84.useState)(false);
-  (0, import_react84.useEffect)(() => {
+  const [matches, setMatches] = (0, import_react85.useState)(false);
+  (0, import_react85.useEffect)(() => {
     const media = window.matchMedia(query);
     const listener = () => setMatches(media.matches);
     listener();
@@ -42298,7 +42589,7 @@ function CreatorImageList({
 }
 
 // src/molecules/creator-discovery/CreatorWidget/CreatorProgressBar.tsx
-var import_react85 = require("react");
+var import_react86 = require("react");
 var import_framer_motion2 = require("framer-motion");
 var import_jsx_runtime167 = require("react/jsx-runtime");
 function truncateName(name, maxLength) {
@@ -42306,8 +42597,8 @@ function truncateName(name, maxLength) {
   return name.substring(0, maxLength) + "...";
 }
 function ProgressBar({ overallPercentage }) {
-  const [showTooltip, setShowTooltip] = (0, import_react85.useState)(true);
-  (0, import_react85.useEffect)(() => {
+  const [showTooltip, setShowTooltip] = (0, import_react86.useState)(true);
+  (0, import_react86.useEffect)(() => {
     if (overallPercentage && overallPercentage >= 100) {
       setShowTooltip(false);
     }
@@ -42467,7 +42758,7 @@ function CreatorCompactView({
 }
 
 // src/molecules/creator-discovery/CreatorWidget/CreatorExpandedPanel.tsx
-var import_react89 = require("react");
+var import_react90 = require("react");
 var import_react_dom2 = __toESM(require("react-dom"), 1);
 var import_framer_motion5 = require("framer-motion");
 
@@ -42953,7 +43244,7 @@ function getPlatformIconColor(platform) {
 }
 
 // src/molecules/creator-discovery/CreatorWidget/PostCard.tsx
-var import_react86 = require("react");
+var import_react87 = require("react");
 var import_jsx_runtime172 = require("react/jsx-runtime");
 var formatFollowerCount = (count) => {
   if (count >= 1e6) {
@@ -42967,8 +43258,8 @@ var formatFollowerCount = (count) => {
   return Math.floor(count).toString();
 };
 function PostCard({ post, platformUsername }) {
-  const [expanded, setExpanded] = (0, import_react86.useState)(false);
-  const [errored, setErrored] = (0, import_react86.useState)(false);
+  const [expanded, setExpanded] = (0, import_react87.useState)(false);
+  const [errored, setErrored] = (0, import_react87.useState)(false);
   const thumbnail = post.thumbnail_url || post.thumbnail || post.image || "";
   const likes = post.engagement?.likes ?? post.likes ?? null;
   const comments = post.engagement?.comments ?? post.comments ?? null;
@@ -43109,7 +43400,7 @@ function PlatformMetricsBanner({
   return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(
     "div",
     {
-      className: "\r\n        grid grid-cols-1 gap-3 rounded-xl py-4 px-4 shadow-sm\r\n        md:flex md:overflow-x-auto md:gap-6 md:rounded-l-xl md:py-4 md:px-4 md:items-center md:gap-0 md:px-0 md:ml-8\r\n      ",
+      className: "\n        grid grid-cols-1 gap-3 rounded-xl py-4 px-4 shadow-sm\n        md:flex md:overflow-x-auto md:gap-6 md:rounded-l-xl md:py-4 md:px-4 md:items-center md:gap-0 md:px-0 md:ml-8\n      ",
       style: { backgroundColor: bgColor },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "flex flex-col items-center md:min-w-0", children: [
@@ -43177,7 +43468,7 @@ function PlatformPostsSection({
 }
 
 // src/molecules/creator-discovery/CreatorWidget/BrandCollaborationsList.tsx
-var import_react87 = require("react");
+var import_react88 = require("react");
 var import_react_dom = __toESM(require("react-dom"), 1);
 var import_framer_motion3 = require("framer-motion");
 var import_jsx_runtime174 = require("react/jsx-runtime");
@@ -43379,8 +43670,8 @@ function BrandMentionDetails({
 function BrandCollaborationsList({
   brandBreakdown
 }) {
-  const [openDetails, setOpenDetails] = (0, import_react87.useState)(false);
-  const [selectedBrand, setSelectedBrand] = (0, import_react87.useState)("");
+  const [openDetails, setOpenDetails] = (0, import_react88.useState)(false);
+  const [selectedBrand, setSelectedBrand] = (0, import_react88.useState)("");
   if (!brandBreakdown?.insights?.brandBreakdown || brandBreakdown.insights.brandBreakdown.length === 0) {
     return null;
   }
@@ -43439,7 +43730,7 @@ function BrandCollaborationsList({
 }
 
 // src/molecules/creator-discovery/CreatorWidget/CreatorGridView.tsx
-var import_react88 = require("react");
+var import_react89 = require("react");
 var import_framer_motion4 = require("framer-motion");
 var import_jsx_runtime175 = require("react/jsx-runtime");
 var formatFollowerCount3 = (count) => {
@@ -43488,25 +43779,25 @@ var itemsExplanation = [
   { key: "brandSafety", label: "Brand Safety" }
 ];
 function CreatorGridViewCard({ creator }) {
-  const [isExpanded, setIsExpanded] = (0, import_react88.useState)(false);
-  const [showFullDescription, setShowFullDescription] = (0, import_react88.useState)(false);
-  const [isDescriptionOverflowing, setIsDescriptionOverflowing] = (0, import_react88.useState)(false);
-  const descriptionRef = (0, import_react88.useRef)(null);
-  const cardRef = (0, import_react88.useRef)(null);
-  const checkDescriptionOverflow = (0, import_react88.useCallback)(() => {
+  const [isExpanded, setIsExpanded] = (0, import_react89.useState)(false);
+  const [showFullDescription, setShowFullDescription] = (0, import_react89.useState)(false);
+  const [isDescriptionOverflowing, setIsDescriptionOverflowing] = (0, import_react89.useState)(false);
+  const descriptionRef = (0, import_react89.useRef)(null);
+  const cardRef = (0, import_react89.useRef)(null);
+  const checkDescriptionOverflow = (0, import_react89.useCallback)(() => {
     const el = descriptionRef.current;
     if (!el) return;
     setIsDescriptionOverflowing(el.scrollHeight > el.clientHeight + 1);
   }, []);
-  (0, import_react88.useEffect)(() => {
+  (0, import_react89.useEffect)(() => {
     checkDescriptionOverflow();
   }, [checkDescriptionOverflow, isExpanded, showFullDescription]);
-  (0, import_react88.useEffect)(() => {
+  (0, import_react89.useEffect)(() => {
     const onResize = () => checkDescriptionOverflow();
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
   }, [checkDescriptionOverflow]);
-  const platformStats = (0, import_react88.useMemo)(() => {
+  const platformStats = (0, import_react89.useMemo)(() => {
     return [
       {
         platform: "instagram",
@@ -43924,7 +44215,7 @@ function BrandMentionPerformance({ creator }) {
   ] });
 }
 function CreatorFitSummary({ creator, showBrandPerformance }) {
-  const [contentExpanded, setContentExpanded] = (0, import_react89.useState)(false);
+  const [contentExpanded, setContentExpanded] = (0, import_react90.useState)(false);
   const hasDeepAnalysis = creator?.sentiment?.deepAnalysis?.deepAnalysis;
   const title = hasDeepAnalysis ? "CREATOR DEEP ANALYSIS" : "CREATOR FIT SUMMARY";
   const content = hasDeepAnalysis ? creator.sentiment.deepAnalysis.deepAnalysis : creator?.sentiment?.aiReasoning || "No data available.";
@@ -43944,7 +44235,7 @@ function CreatorFitSummary({ creator, showBrandPerformance }) {
   ] });
 }
 function ProfileSection({ creator, isValidationComplete }) {
-  const [descriptionExpanded, setDescriptionExpanded] = (0, import_react89.useState)(false);
+  const [descriptionExpanded, setDescriptionExpanded] = (0, import_react90.useState)(false);
   const username = creator.platformMetrics?.instagramMetrics?.username ? `@${creator.platformMetrics.instagramMetrics.username}` : creator.platformMetrics?.youtubeMetrics?.channelName ? `@${creator.platformMetrics.youtubeMetrics.channelName}` : creator.platformMetrics?.tiktokMetrics?.username ? `@${creator.platformMetrics.tiktokMetrics.username}` : "";
   const iso2 = normalizeToIso2(creator.country);
   const meta = codeToMeta[iso2];
@@ -44034,7 +44325,7 @@ function CreatorCard({
   creator,
   isValidationComplete
 }) {
-  const [detailsExpanded, setDetailsExpanded] = (0, import_react89.useState)(false);
+  const [detailsExpanded, setDetailsExpanded] = (0, import_react90.useState)(false);
   const hasValidBrandMention = (() => {
     const insights = creator?.brandCollaborations?.insights;
     if (!insights) return false;
@@ -44076,7 +44367,7 @@ function CreatorDisplay({
   creators,
   isValidationComplete
 }) {
-  const [viewMode, setViewMode] = (0, import_react89.useState)("list");
+  const [viewMode, setViewMode] = (0, import_react90.useState)("list");
   return /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)("div", { className: "px-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)("div", { className: "flex justify-end items-center my-3 gap-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)("span", { className: "text-xs text-gray600 mr-2", children: [
@@ -44157,10 +44448,10 @@ function CreatorExpandedPanel({
   searchSpec,
   fetchCreatorDetails
 }) {
-  const [creators, setCreators] = (0, import_react89.useState)([]);
-  const [loading, setLoading] = (0, import_react89.useState)(false);
+  const [creators, setCreators] = (0, import_react90.useState)([]);
+  const [loading, setLoading] = (0, import_react90.useState)(false);
   const fetcher = fetchCreatorDetails ?? defaultFetchCreatorDetails;
-  const loadCreators = (0, import_react89.useCallback)(async () => {
+  const loadCreators = (0, import_react90.useCallback)(async () => {
     if (!creatorIds.length) return;
     setLoading(true);
     try {
@@ -44172,7 +44463,7 @@ function CreatorExpandedPanel({
       setLoading(false);
     }
   }, [creatorIds, sessionId, version, fetcher]);
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     if (isOpen && creatorIds.length > 0) {
       loadCreators();
     }
@@ -44226,7 +44517,7 @@ function CreatorExpandedPanel({
 }
 
 // src/molecules/creator-discovery/CreatorWidget/useCreatorWidgetPolling.ts
-var import_react90 = require("react");
+var import_react91 = require("react");
 var DEFAULT_POLLING_CONFIG = {
   pollInterval: 5e3,
   maxDuration: 15 * 60 * 1e3,
@@ -44243,22 +44534,22 @@ function useCreatorWidgetPolling({
 }) {
   const fetchVersions = fetchVersionsProp ?? defaultFetchVersions;
   const fetchStatus = fetchStatusProp ?? defaultFetchStatus;
-  const config = (0, import_react90.useMemo)(
+  const config = (0, import_react91.useMemo)(
     () => ({ ...DEFAULT_POLLING_CONFIG, ...pollingConfig }),
     [pollingConfig]
   );
-  const [versionData, setVersionData] = (0, import_react90.useState)(null);
-  const [totalVersions, setTotalVersions] = (0, import_react90.useState)(0);
-  const [selectedVersion, setSelectedVersion] = (0, import_react90.useState)();
-  const [isLoadingVersion, setIsLoadingVersion] = (0, import_react90.useState)(false);
-  const [isValidationComplete, setIsValidationComplete] = (0, import_react90.useState)(false);
-  const [versionStatus, setVersionStatus] = (0, import_react90.useState)("checking");
-  const [statusDetails, setStatusDetails] = (0, import_react90.useState)();
-  const [timeDisplay, setTimeDisplay] = (0, import_react90.useState)("");
-  const [loadingStatus, setLoadingStatus] = (0, import_react90.useState)(true);
-  const remainingTimeRef = (0, import_react90.useRef)(0);
+  const [versionData, setVersionData] = (0, import_react91.useState)(null);
+  const [totalVersions, setTotalVersions] = (0, import_react91.useState)(0);
+  const [selectedVersion, setSelectedVersion] = (0, import_react91.useState)();
+  const [isLoadingVersion, setIsLoadingVersion] = (0, import_react91.useState)(false);
+  const [isValidationComplete, setIsValidationComplete] = (0, import_react91.useState)(false);
+  const [versionStatus, setVersionStatus] = (0, import_react91.useState)("checking");
+  const [statusDetails, setStatusDetails] = (0, import_react91.useState)();
+  const [timeDisplay, setTimeDisplay] = (0, import_react91.useState)("");
+  const [loadingStatus, setLoadingStatus] = (0, import_react91.useState)(true);
+  const remainingTimeRef = (0, import_react91.useRef)(0);
   const requestedVersion = selectedVersion ?? currentVersion ?? versionData?.currentVersion;
-  const fetchVersionData = (0, import_react90.useCallback)(async () => {
+  const fetchVersionData = (0, import_react91.useCallback)(async () => {
     if (!sessionId) return;
     if (!versionData) setIsLoadingVersion(true);
     try {
@@ -44279,17 +44570,17 @@ function useCreatorWidgetPolling({
       setIsLoadingVersion(false);
     }
   }, [sessionId, requestedVersion, isValidationComplete, fetchVersions, versionData]);
-  (0, import_react90.useEffect)(() => {
+  (0, import_react91.useEffect)(() => {
     fetchVersionData();
   }, [sessionId, requestedVersion, isValidationComplete]);
-  (0, import_react90.useEffect)(() => {
+  (0, import_react91.useEffect)(() => {
     if (totalVersions > 0 || !sessionId) return;
     const interval = setInterval(() => {
       if (totalVersions === 0) fetchVersionData();
     }, config.pollInterval);
     return () => clearInterval(interval);
   }, [totalVersions, sessionId, fetchVersionData, config.pollInterval]);
-  (0, import_react90.useEffect)(() => {
+  (0, import_react91.useEffect)(() => {
     if (!selectedVersion && !requestedVersion) return;
     const activeVersion = selectedVersion ?? requestedVersion;
     let isMounted = true;
@@ -44372,7 +44663,7 @@ function useCreatorWidgetPolling({
       stopPolling();
     };
   }, [selectedVersion, requestedVersion, sessionId]);
-  const versionNumbers = (0, import_react90.useMemo)(() => {
+  const versionNumbers = (0, import_react91.useMemo)(() => {
     if (!totalVersions) return [];
     return Array.from({ length: totalVersions }, (_, i) => i + 1);
   }, [totalVersions]);
@@ -44412,7 +44703,7 @@ function CreatorWidgetInner({
   onAction,
   className
 }) {
-  const [isExpanded, setIsExpanded] = (0, import_react91.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react92.useState)(false);
   const {
     versionNumbers,
     selectedVersion,
@@ -44433,11 +44724,11 @@ function CreatorWidgetInner({
     pollingConfig,
     onStatusChange
   });
-  const handleVersionSelect = (0, import_react91.useCallback)(
+  const handleVersionSelect = (0, import_react92.useCallback)(
     (version) => setSelectedVersion(version),
     [setSelectedVersion]
   );
-  const handleViewCreators = (0, import_react91.useCallback)(() => {
+  const handleViewCreators = (0, import_react92.useCallback)(() => {
     setIsExpanded(true);
     onAction?.({
       type: "view-creators",
@@ -44478,7 +44769,7 @@ function CreatorWidgetInner({
     )
   ] });
 }
-var CreatorWidget = (0, import_react91.memo)(CreatorWidgetInner);
+var CreatorWidget = (0, import_react92.memo)(CreatorWidgetInner);
 
 // src/components/ui/index.ts
 var ui_exports = {};
@@ -44935,7 +45226,7 @@ function EmptyContent({ className, ...props }) {
 }
 
 // src/components/ui/field.tsx
-var import_react92 = require("react");
+var import_react93 = require("react");
 var import_class_variance_authority10 = require("class-variance-authority");
 var import_jsx_runtime180 = require("react/jsx-runtime");
 function FieldSet({ className, ...props }) {
@@ -45118,7 +45409,7 @@ function FieldError({
   errors,
   ...props
 }) {
-  const content = (0, import_react92.useMemo)(() => {
+  const content = (0, import_react93.useMemo)(() => {
     if (children) {
       return children;
     }
@@ -46155,6 +46446,7 @@ ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/render/PXEngineRenderer.tsx
 var import_jsx_runtime187 = require("react/jsx-runtime");
+var MOLECULE_REFS = new Set(Object.values(molecules_exports));
 var CONTEXT_DEPENDENT_COMPONENTS = /* @__PURE__ */ new Set([
   // Form components - require FormField + FormItem context
   "FormLabel",
@@ -46348,18 +46640,21 @@ var normalizeProps = (props) => {
 var PXEngineRenderer = ({
   schema,
   onAction,
-  disabled
+  disabled,
+  theme
 }) => {
+  const contextTheme = import_react94.default.useContext(WidgetThemeContext);
+  const effectiveTheme = theme ?? contextTheme;
   if (!schema) return null;
   const root = schema.root || schema;
   const renderRecursive = (component, index) => {
     if (Array.isArray(component)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(import_react93.default.Fragment, { children: component.map((child, idx) => renderRecursive(child, idx)) }, index !== void 0 ? `array-${index}` : "array-root");
+      return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(import_react94.default.Fragment, { children: component.map((child, idx) => renderRecursive(child, idx)) }, index !== void 0 ? `array-${index}` : "array-root");
     }
     if (typeof component === "string" || typeof component === "number") {
       return component;
     }
-    if (import_react93.default.isValidElement(component)) {
+    if (import_react94.default.isValidElement(component)) {
       return component;
     }
     if (!component || typeof component !== "object") return null;
@@ -46439,6 +46734,9 @@ var PXEngineRenderer = ({
       "ResizableAtom"
     ]);
     const isAtomWithRenderProp = ATOMS_WITH_RENDER.has(atomName);
+    if (effectiveTheme && finalProps.theme === void 0 && MOLECULE_REFS.has(TargetComponent)) {
+      finalProps.theme = effectiveTheme;
+    }
     const finalStyle = { ...dynamicStyle, ...finalProps.style || {} };
     if (isAtomWithRenderProp) {
       return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
@@ -46465,7 +46763,7 @@ var PXEngineRenderer = ({
       );
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) });
+  return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(WidgetThemeContext.Provider, { value: effectiveTheme, children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) }) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -46775,6 +47073,7 @@ var PXEngineRenderer = ({
   TopPostsGrid,
   VideoAtom,
   WebSearchJobCard,
+  WidgetThemeContext,
   cn,
   defaultFetchSelections,
   defaultPersistSelection,
@@ -46786,6 +47085,7 @@ var PXEngineRenderer = ({
   submitWidgetToAgent,
   th,
   useCreatorWidgetPolling,
+  useWidgetTheme,
   withAlpha
 });
 /*! Bundled license information: