pxengine 0.1.112 → 0.1.114

package/dist/index.cjs

@@ -16125,6 +16125,22 @@ var ShareIcon = () => /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("svg", { w
   /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
 ] });
 var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("polyline", { points: "20 6 9 17 4 12" }) });
+var RefreshIcon = () => /* @__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)("polyline", { points: "23 4 23 10 17 10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" })
+] });
+var SlideTypeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("rect", { x: "3", y: "4", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+] });
+function formatTemplateLabel(templateId) {
+  if (!templateId) return null;
+  return templateId.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}
+function deriveJobStatusUrl(newJobId, pollUrl, regenerateUrl) {
+  const base = pollUrl?.replace(/\/api\/jobs\/[^/]+\/status.*$/, "") ?? regenerateUrl?.replace(/\/api\/presentations\/[^/]+\/regenerate.*$/, "") ?? "";
+  return `${base}/api/jobs/${newJobId}/status`;
+}
 var FORMATS = [
   {
     key: "pptx_url",
@@ -16330,11 +16346,20 @@ var PresentationJobCard = ({
   status: initialStatus,
   slide_count: initialSlideCount,
   formats: initialFormats = {},
+  generation_mode: initialGenerationMode,
+  template_id: initialTemplateId,
+  template_version_id: initialTemplateVersionId,
+  review_status: initialReviewStatus,
+  outline: initialOutline,
   error: initialError,
   progress: initialProgress,
   pollUrl,
   authToken,
   shareUrl,
+  approveUrl,
+  approveOutlineUrl,
+  regenerateUrl,
+  hideApproval = false,
   className,
   theme,
   onComplete,
@@ -16348,9 +16373,23 @@ var PresentationJobCard = ({
   const [formats, setFormats] = (0, import_react78.useState)(initialFormats);
   const [error, setError] = (0, import_react78.useState)(initialError);
   const [progress, setProgress] = (0, import_react78.useState)(initialProgress);
+  const [generationMode, setGenerationMode] = (0, import_react78.useState)(
+    initialGenerationMode || (initialFormats?.html_url ? "template" : "")
+  );
+  const [templateId, setTemplateId] = (0, import_react78.useState)(initialTemplateId || "");
+  const [, setTemplateVersionId] = (0, import_react78.useState)(initialTemplateVersionId || "");
+  const [reviewStatus, setReviewStatus] = (0, import_react78.useState)(initialReviewStatus || "");
+  const [outline, setOutline] = (0, import_react78.useState)(initialOutline);
   const [showExport, setShowExport] = (0, import_react78.useState)(false);
   const [showFullscreen, setShowFullscreen] = (0, import_react78.useState)(false);
   const [copied, setCopied] = (0, import_react78.useState)(false);
+  const [approving, setApproving] = (0, import_react78.useState)(false);
+  const [regenerating, setRegenerating] = (0, import_react78.useState)(false);
+  const [approveError, setApproveError] = (0, import_react78.useState)(null);
+  const [messageEdits, setMessageEdits] = (0, import_react78.useState)({});
+  const [approvingOutline, setApprovingOutline] = (0, import_react78.useState)(false);
+  const [outlineWritePollUrl, setOutlineWritePollUrl] = (0, import_react78.useState)(null);
+  const [regenPollUrl, setRegenPollUrl] = (0, import_react78.useState)(null);
   const [currentSlide, setCurrentSlide] = (0, import_react78.useState)(1);
   const [previewScale, setPreviewScale] = (0, import_react78.useState)(1);
   const [iframeReady, setIframeReady] = (0, import_react78.useState)(false);
@@ -16377,6 +16416,22 @@ var PresentationJobCard = ({
   (0, import_react78.useEffect)(() => {
     if (initialTitle) setTitle(initialTitle);
   }, [initialTitle]);
+  (0, import_react78.useEffect)(() => {
+    if (initialGenerationMode) setGenerationMode(initialGenerationMode);
+  }, [initialGenerationMode]);
+  (0, import_react78.useEffect)(() => {
+    if (initialTemplateId) setTemplateId(initialTemplateId);
+  }, [initialTemplateId]);
+  (0, import_react78.useEffect)(() => {
+    if (initialTemplateVersionId) setTemplateVersionId(initialTemplateVersionId);
+  }, [initialTemplateVersionId]);
+  (0, import_react78.useEffect)(() => {
+    if (initialReviewStatus) setReviewStatus(initialReviewStatus);
+  }, [initialReviewStatus]);
+  const initialOutlineSlideCount = initialOutline?.slides?.length;
+  (0, import_react78.useEffect)(() => {
+    if (initialOutline) setOutline(initialOutline);
+  }, [initialOutlineSlideCount]);
   const updateScale = (0, import_react78.useCallback)(() => {
     if (previewRef.current) setPreviewScale(previewRef.current.offsetWidth / 1280);
   }, []);
@@ -16440,13 +16495,21 @@ var PresentationJobCard = ({
         setProgress(data.progress);
       }
       if (newStatus === "complete" && data.output) {
-        const newTitle = data.output.title || initialTitle;
-        const newSlideCount = data.output.slide_count || 0;
-        const newFormats = data.output.formats || {};
+        const output = data.output;
+        const isOutlinePhase = output.review_status === "pending_outline_approval" || output.type === "presentation-outline";
+        const newTitle = output.title || initialTitle;
+        const newSlideCount = output.slide_count || 0;
+        const newFormats = output.formats || {};
         setTitle(newTitle);
         setSlideCount(newSlideCount);
         setFormats(newFormats);
-        if (!hasNotifiedRef.current && onCompleteRef.current) {
+        if (output.generation_mode) setGenerationMode(output.generation_mode);
+        if (output.template_id) setTemplateId(output.template_id);
+        if (output.template_version_id) setTemplateVersionId(output.template_version_id);
+        if (output.review_status) setReviewStatus(output.review_status);
+        if (output.outline) setOutline(output.outline);
+        else if (output.deck_plan) setOutline(output.deck_plan);
+        if (!isOutlinePhase && !hasNotifiedRef.current && onCompleteRef.current) {
           hasNotifiedRef.current = true;
           onCompleteRef.current({
             title: newTitle,
@@ -16466,6 +16529,184 @@ var PresentationJobCard = ({
     }
     // Transient fetch errors are ignored — the shared loop retries next tick.
   );
+  const applyDeckOutput = (0, import_react78.useCallback)((out, opts) => {
+    if (out.title) setTitle(out.title);
+    if (out.slide_count !== void 0) setSlideCount(out.slide_count);
+    if (out.formats) setFormats(out.formats);
+    if (out.generation_mode) setGenerationMode(out.generation_mode);
+    if (out.template_id) setTemplateId(out.template_id);
+    setReviewStatus(out.review_status || "pending_review");
+    setTemplateVersionId(opts?.regenerated ? "" : out.template_version_id || "");
+    if (!opts?.regenerated && !hasNotifiedRef.current && onCompleteRef.current) {
+      hasNotifiedRef.current = true;
+      onCompleteRef.current({
+        title: out.title ?? title,
+        slide_count: out.slide_count ?? slideCount,
+        formats: out.formats ?? formats
+      });
+    }
+  }, [title, slideCount, formats]);
+  const refetchSourceAndApply = (0, import_react78.useCallback)(async () => {
+    if (!pollUrl) return;
+    try {
+      const headers = {};
+      if (authToken) headers["Authorization"] = `Bearer ${authToken}`;
+      const res = await fetch(pollUrl, { headers });
+      if (!res.ok) return;
+      const data = await res.json();
+      if (data.output) applyDeckOutput(data.output);
+    } catch {
+    }
+  }, [pollUrl, authToken, applyDeckOutput]);
+  useSharedPoll(
+    {
+      key: outlineWritePollUrl,
+      intervalMs: 3e3,
+      fetcher: async () => {
+        const headers = {};
+        if (authToken) headers["Authorization"] = `Bearer ${authToken}`;
+        const res = await fetch(outlineWritePollUrl, { headers });
+        if (!res.ok) throw new Error(`poll ${res.status}`);
+        return res.json();
+      },
+      shouldContinue: (data) => data.status !== "complete" && data.status !== "failed"
+    },
+    (data) => {
+      if (data.status === "complete") {
+        setOutlineWritePollUrl(null);
+        setApprovingOutline(false);
+        void refetchSourceAndApply();
+      } else if (data.status === "failed") {
+        setApproveError(data.error || "Could not build the presentation");
+        setOutlineWritePollUrl(null);
+        setApprovingOutline(false);
+      }
+    }
+  );
+  useSharedPoll(
+    {
+      key: regenPollUrl,
+      intervalMs: 3e3,
+      fetcher: async () => {
+        const headers = {};
+        if (authToken) headers["Authorization"] = `Bearer ${authToken}`;
+        const res = await fetch(regenPollUrl, { headers });
+        if (!res.ok) throw new Error(`poll ${res.status}`);
+        return res.json();
+      },
+      shouldContinue: (data) => data.status !== "complete" && data.status !== "failed"
+    },
+    (data) => {
+      if (data.status === "complete") {
+        if (data.output) applyDeckOutput(data.output, { regenerated: true });
+        setRegenPollUrl(null);
+        setRegenerating(false);
+      } else if (data.status === "failed") {
+        setApproveError(data.error || "Could not switch template");
+        setRegenPollUrl(null);
+        setRegenerating(false);
+      }
+    }
+  );
+  const buildEditedOutline = () => {
+    if (!outline || !Array.isArray(outline.slides)) return void 0;
+    let changed = false;
+    const slides = outline.slides.map((s, i) => {
+      const edited = messageEdits[i];
+      if (edited !== void 0 && edited !== s.message) {
+        changed = true;
+        return { ...s, message: edited };
+      }
+      return s;
+    });
+    return changed ? { ...outline, slides } : void 0;
+  };
+  const handleApproveOutline = async () => {
+    if (!_job_id || approvingOutline) return;
+    const endpoint = approveOutlineUrl || `/api/presentations/${_job_id}/approve-outline`;
+    setApprovingOutline(true);
+    setApproveError(null);
+    try {
+      const headers = { "Content-Type": "application/json" };
+      if (authToken) headers.Authorization = `Bearer ${authToken}`;
+      const editedOutline = buildEditedOutline();
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers,
+        body: JSON.stringify(editedOutline ? { outline: editedOutline } : {})
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.detail || err.error || `Approve failed (${res.status})`);
+      }
+      const data = await res.json();
+      if (typeof data.job_id === "string" && data.job_id !== _job_id) {
+        setOutlineWritePollUrl(deriveJobStatusUrl(data.job_id, pollUrl, regenerateUrl));
+        return;
+      }
+      setApprovingOutline(false);
+      void refetchSourceAndApply();
+    } catch (e) {
+      setApproveError(e instanceof Error ? e.message : "Could not build the presentation");
+      setApprovingOutline(false);
+    }
+  };
+  const handleApprove = async () => {
+    if (!_job_id || approving) return;
+    const endpoint = approveUrl || `/api/presentations/${_job_id}/approve-standard`;
+    setApproving(true);
+    setApproveError(null);
+    try {
+      const headers = { "Content-Type": "application/json" };
+      if (authToken) headers.Authorization = `Bearer ${authToken}`;
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({ label: title })
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.detail || err.error || `Approve failed (${res.status})`);
+      }
+      const data = await res.json();
+      setReviewStatus(data.review_status || "approved");
+      if (data.template_version_id) setTemplateVersionId(data.template_version_id);
+      if (data.template_id) setTemplateId(data.template_id);
+    } catch (e) {
+      setApproveError(e instanceof Error ? e.message : "Could not save the format");
+    } finally {
+      setApproving(false);
+    }
+  };
+  const handleRegenerate = async () => {
+    if (!_job_id || regenerating) return;
+    const endpoint = regenerateUrl || `/api/presentations/${_job_id}/regenerate`;
+    setRegenerating(true);
+    setApproveError(null);
+    try {
+      const headers = { "Content-Type": "application/json" };
+      if (authToken) headers.Authorization = `Bearer ${authToken}`;
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({})
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.detail || err.error || `Regenerate failed (${res.status})`);
+      }
+      const data = await res.json();
+      if (typeof data.job_id === "string" && data.job_id !== _job_id) {
+        setRegenPollUrl(deriveJobStatusUrl(data.job_id, pollUrl, regenerateUrl));
+        return;
+      }
+      applyDeckOutput(data.output || data, { regenerated: true });
+      setRegenerating(false);
+    } catch (e) {
+      setApproveError(e instanceof Error ? e.message : "Could not switch template");
+      setRegenerating(false);
+    }
+  };
   const handleShare = async () => {
     const link = shareUrl ?? (typeof window !== "undefined" && _job_id ? `${window.location.origin}/p/${_job_id}` : formats.html_url);
     if (!link) return;
@@ -16586,8 +16827,85 @@ var PresentationJobCard = ({
       ] })
     ] }) }) });
   }
+  if (status === "complete" && reviewStatus === "pending_outline_approval") {
+    const slides = Array.isArray(outline?.slides) ? outline.slides : [];
+    const building = Boolean(outlineWritePollUrl) || approvingOutline;
+    return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("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", style: t.root, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+        "div",
+        {
+          className: "h-[3px]",
+          style: { background: accentGradient || "linear-gradient(90deg, #8B7D5E, #C0AE82, #DCC99B)" }
+        }
+      ),
+      /* @__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 text-indigo-400",
+              style: { ...t.accentSubtle(0.1), ...t.accentBorder, ...t.accent },
+              children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(SlidesIcon, {})
+            }
+          ),
+          /* @__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", style: t.text, children: title || "Presentation outline" }),
+            /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("p", { className: "text-xs text-amber-400/90 mt-0.5", children: [
+              "Review the slide outline",
+              slides.length > 0 ? " \u2014 edit any slide message" : "",
+              ", then build the deck."
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "mt-4 space-y-2", children: [
+          slides.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "text-xs text-zinc-600 w-5 text-right tabular-nums flex-shrink-0", children: s.n ?? i + 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(
+              "span",
+              {
+                className: "flex items-center gap-1 text-[10px] uppercase tracking-wide text-zinc-500 w-20 flex-shrink-0 truncate",
+                title: s.type,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(SlideTypeIcon, {}),
+                  s.type || "slide"
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+              "input",
+              {
+                value: messageEdits[i] ?? s.message ?? "",
+                onChange: (e) => setMessageEdits((prev) => ({ ...prev, [i]: e.target.value })),
+                disabled: building,
+                className: "flex-1 min-w-0 bg-zinc-800/60 border border-zinc-700 rounded-lg px-3 h-8 text-xs text-zinc-200 focus:border-indigo-500 outline-none disabled:opacity-60"
+              }
+            )
+          ] }, i)),
+          slides.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("p", { className: "text-xs text-zinc-500", children: "No outline slides were returned; you can still build the deck." })
+        ] }),
+        approveError && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("p", { className: "mt-3 text-xs text-red-400/90", children: approveError }),
+        /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "mt-4 flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(
+          "button",
+          {
+            onClick: handleApproveOutline,
+            disabled: building,
+            title: "Approve this outline and build the full deck",
+            className: "flex items-center gap-1.5 px-3 h-8 rounded-lg border border-emerald-700/50 bg-emerald-950/40 hover:border-emerald-500 text-emerald-300 text-xs font-medium transition-colors disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(CheckIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { children: building ? "Building deck..." : "Approve & Build" })
+            ]
+          }
+        ) })
+      ] })
+    ] }) });
+  }
   const total = slideCount || 1;
   const hasHtml = Boolean(formats.html_url);
+  const templateLabel = formatTemplateLabel(templateId);
+  const isApproved = reviewStatus === "approved";
+  const canApprove = !hideApproval && generationMode === "template" && reviewStatus === "pending_review" && Boolean(_job_id);
+  const canRegenerate = canApprove;
   return /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(import_jsx_runtime147.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("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", style: t.root, children: [
       /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "h-[3px]", style: { background: accentGradient || "linear-gradient(90deg, #8B7D5E, #C0AE82, #DCC99B)" } }),
@@ -16605,10 +16923,39 @@ var PresentationJobCard = ({
             /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("h3", { className: "text-sm font-semibold text-zinc-100 truncate leading-tight", style: t.text, children: title }),
             /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("p", { className: "text-xs text-zinc-500 mt-0.5", style: t.muted, children: [
               slideCount ? `${slideCount} slides` : "Presentation",
-              " \xB7 Ready to export"
-            ] })
+              " \xB7 Ready to export",
+              templateLabel && ` \xB7 ${templateLabel}`
+            ] }),
+            generationMode === "template" && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("p", { className: "text-xs mt-1", children: isApproved ? /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "text-emerald-400/90", children: "Approved \u2014 future decks use this format" }) : reviewStatus === "pending_review" ? /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "text-amber-400/90", children: "Review this deck, then approve to lock the format" }) : null })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center gap-1.5 flex-shrink-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center gap-1.5 flex-shrink-0 flex-wrap justify-end", children: [
+            canRegenerate && /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(
+              "button",
+              {
+                onClick: handleRegenerate,
+                disabled: regenerating || approving,
+                title: "Try another design template with the same content",
+                className: "flex items-center gap-1.5 px-2.5 h-7 rounded-lg border border-zinc-700 bg-zinc-800 hover:border-zinc-500 text-zinc-300 text-xs font-medium transition-colors disabled:opacity-50",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(RefreshIcon, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { children: regenerating ? "Switching..." : "Regenerate" })
+                ]
+              }
+            ),
+            canApprove && /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(
+              "button",
+              {
+                onClick: handleApprove,
+                disabled: approving,
+                title: "Approve and save this deck format for future runs",
+                className: "flex items-center gap-1.5 px-2.5 h-7 rounded-lg border border-emerald-700/50 bg-emerald-950/40 hover:border-emerald-500 text-emerald-300 text-xs font-medium transition-colors disabled:opacity-50",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(CheckIcon, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { children: approving ? "Saving..." : "Approve" })
+                ]
+              }
+            ),
+            isApproved && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "flex items-center justify-center w-7 h-7 rounded-lg border border-emerald-500/40 bg-emerald-500/10 text-emerald-400", title: "Format saved", children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(CheckIcon, {}) }),
             /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
               "button",
               {
@@ -16650,6 +16997,7 @@ var PresentationJobCard = ({
             )
           ] })
         ] }),
+        approveError && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("p", { className: "mt-3 text-xs text-red-400/90", children: approveError }),
         hasHtml && /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "mt-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(
             "div",
@@ -16784,11 +17132,11 @@ var ShareIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("svg", {
   /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
 ] });
 var CheckIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("polyline", { points: "20 6 9 17 4 12" }) });
-var RefreshIcon = () => /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+var RefreshIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime148.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_runtime148.jsx)("polyline", { points: "23 4 23 10 17 10" }),
   /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" })
 ] });
-function formatTemplateLabel(templateId) {
+function formatTemplateLabel2(templateId) {
   if (!templateId) return null;
   return templateId.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
 }
@@ -16835,6 +17183,10 @@ var FullscreenPreviewModal = ({ url, title, onClose }) => {
     ) })
   ] });
 };
+function deriveJobStatusUrl2(newJobId, pollUrl, regenerateUrl) {
+  const base = pollUrl?.replace(/\/api\/jobs\/[^/]+\/status.*$/, "") ?? regenerateUrl?.replace(/\/api\/reports\/[^/]+\/regenerate.*$/, "") ?? "";
+  return `${base}/api/jobs/${newJobId}/status`;
+}
 var ResearchReportJobCard = (props) => {
   const {
     job_id,
@@ -16852,6 +17204,7 @@ var ResearchReportJobCard = (props) => {
     template_id: initialTemplateId,
     template_version_id: initialTemplateVersionId,
     review_status: initialReviewStatus,
+    outline: initialOutline,
     theme: initialTheme,
     error: initialError,
     progress: initialProgress,
@@ -16859,7 +17212,9 @@ var ResearchReportJobCard = (props) => {
     authToken,
     shareUrl,
     approveUrl,
+    approveOutlineUrl,
     regenerateUrl,
+    hideApproval = false,
     className,
     onComplete,
     onFailed,
@@ -16882,6 +17237,7 @@ var ResearchReportJobCard = (props) => {
   const [reviewStatus, setReviewStatus] = (0, import_react79.useState)(
     initialReviewStatus || (initialHtmlUrl ? "pending_review" : "")
   );
+  const [outline, setOutline] = (0, import_react79.useState)(initialOutline);
   const [theme, setTheme] = (0, import_react79.useState)(initialTheme || DEFAULT_THEME);
   const [error, setError] = (0, import_react79.useState)(initialError);
   const [progress, setProgress] = (0, import_react79.useState)(initialProgress);
@@ -16891,6 +17247,10 @@ var ResearchReportJobCard = (props) => {
   const [approving, setApproving] = (0, import_react79.useState)(false);
   const [regenerating, setRegenerating] = (0, import_react79.useState)(false);
   const [approveError, setApproveError] = (0, import_react79.useState)(null);
+  const [headingEdits, setHeadingEdits] = (0, import_react79.useState)({});
+  const [approvingOutline, setApprovingOutline] = (0, import_react79.useState)(false);
+  const [outlineWritePollUrl, setOutlineWritePollUrl] = (0, import_react79.useState)(null);
+  const [regenPollUrl, setRegenPollUrl] = (0, import_react79.useState)(null);
   const previewRef = (0, import_react79.useRef)(null);
   const onCompleteRef = (0, import_react79.useRef)(onComplete);
   const onFailedRef = (0, import_react79.useRef)(onFailed);
@@ -16919,6 +17279,10 @@ var ResearchReportJobCard = (props) => {
   (0, import_react79.useEffect)(() => {
     if (initialReviewStatus) setReviewStatus(initialReviewStatus);
   }, [initialReviewStatus]);
+  const initialOutlineSectionCount = initialOutline?.sections?.length;
+  (0, import_react79.useEffect)(() => {
+    if (initialOutline) setOutline(initialOutline);
+  }, [initialOutlineSectionCount]);
   (0, import_react79.useEffect)(() => {
     if (initialDepth) setDepth(initialDepth);
   }, [initialDepth]);
@@ -16984,6 +17348,7 @@ var ResearchReportJobCard = (props) => {
       }
       if (newStatus === "complete" && data.output) {
         const output = data.output;
+        const isOutlinePhase = output.review_status === "pending_outline_approval" || output.type === "research-report-outline";
         setTitle(output.title || initialTitle);
         setDepth(output.depth || "");
         setSectionCount(output.section_count || 0);
@@ -16995,10 +17360,11 @@ var ResearchReportJobCard = (props) => {
         if (output.template_id) setTemplateId(output.template_id);
         if (output.template_version_id) setTemplateVersionId(output.template_version_id);
         if (output.review_status) setReviewStatus(output.review_status);
+        if (output.outline) setOutline(output.outline);
         if (output.theme) {
           setTheme(output.theme);
         }
-        if (!hasNotifiedRef.current && onCompleteRef.current) {
+        if (!isOutlinePhase && !hasNotifiedRef.current && onCompleteRef.current) {
           hasNotifiedRef.current = true;
           onCompleteRef.current(output);
         }
@@ -17014,6 +17380,156 @@ var ResearchReportJobCard = (props) => {
     }
     // Transient fetch errors are ignored — the shared loop retries next tick.
   );
+  const applyRegeneratedOutput = (0, import_react79.useCallback)(
+    (out) => {
+      if (out.html_url) setHtmlUrl(out.html_url);
+      if (out.template_id) setTemplateId(out.template_id);
+      setReviewStatus("pending_review");
+      setTemplateVersionId("");
+      if (out.section_count !== void 0) setSectionCount(out.section_count);
+      if (out.title) setTitle(out.title);
+      if (out.depth) setDepth(out.depth);
+      if (out.theme) setTheme(out.theme);
+      if (!onCompleteRef.current) return;
+      onCompleteRef.current({
+        title: out.title ?? title,
+        depth: out.depth ?? depth,
+        section_count: out.section_count ?? sectionCount,
+        source_count: out.source_count ?? sourceCount,
+        word_count: out.word_count ?? wordCount,
+        executive_summary: out.executive_summary ?? summary,
+        html_url: out.html_url ?? htmlUrl,
+        generation_mode: "template",
+        template_id: out.template_id ?? templateId,
+        template_version_id: void 0,
+        review_status: "pending_review",
+        theme: out.theme ?? theme
+      });
+    },
+    [title, depth, sectionCount, sourceCount, wordCount, summary, htmlUrl, templateId, theme]
+  );
+  useSharedPoll(
+    {
+      key: regenPollUrl,
+      intervalMs: 3e3,
+      fetcher: async () => {
+        const headers = {};
+        if (authToken) headers["Authorization"] = `Bearer ${authToken}`;
+        const res = await fetch(regenPollUrl, { headers });
+        if (!res.ok) throw new Error(`poll ${res.status}`);
+        return res.json();
+      },
+      shouldContinue: (data) => data.status !== "complete" && data.status !== "failed"
+    },
+    (data) => {
+      if (data.status === "complete") {
+        if (data.output) applyRegeneratedOutput(data.output);
+        setRegenPollUrl(null);
+        setRegenerating(false);
+      } else if (data.status === "failed") {
+        setApproveError(data.error || "Could not switch template");
+        setRegenPollUrl(null);
+        setRegenerating(false);
+      }
+    }
+  );
+  const refetchSourceAndApply = (0, import_react79.useCallback)(async () => {
+    if (!pollUrl) return;
+    try {
+      const headers = {};
+      if (authToken) headers["Authorization"] = `Bearer ${authToken}`;
+      const res = await fetch(pollUrl, { headers });
+      if (!res.ok) return;
+      const data = await res.json();
+      const out = data.output;
+      if (!out) return;
+      if (out.title) setTitle(out.title);
+      if (out.depth) setDepth(out.depth);
+      if (out.section_count !== void 0) setSectionCount(out.section_count);
+      if (out.source_count !== void 0) setSourceCount(out.source_count);
+      if (out.word_count !== void 0) setWordCount(out.word_count);
+      if (out.executive_summary) setSummary(out.executive_summary);
+      if (out.html_url) setHtmlUrl(out.html_url);
+      if (out.generation_mode) setGenerationMode(out.generation_mode);
+      if (out.template_id) setTemplateId(out.template_id);
+      setTemplateVersionId(out.template_version_id || "");
+      setReviewStatus(out.review_status || "pending_review");
+      if (out.theme) setTheme(out.theme);
+      if (!hasNotifiedRef.current && onCompleteRef.current) {
+        hasNotifiedRef.current = true;
+        onCompleteRef.current(out);
+      }
+    } catch {
+    }
+  }, [pollUrl, authToken]);
+  useSharedPoll(
+    {
+      key: outlineWritePollUrl,
+      intervalMs: 3e3,
+      fetcher: async () => {
+        const headers = {};
+        if (authToken) headers["Authorization"] = `Bearer ${authToken}`;
+        const res = await fetch(outlineWritePollUrl, { headers });
+        if (!res.ok) throw new Error(`poll ${res.status}`);
+        return res.json();
+      },
+      shouldContinue: (data) => data.status !== "complete" && data.status !== "failed"
+    },
+    (data) => {
+      if (data.status === "complete") {
+        setOutlineWritePollUrl(null);
+        setApprovingOutline(false);
+        void refetchSourceAndApply();
+      } else if (data.status === "failed") {
+        setApproveError(data.error || "Could not build the report");
+        setOutlineWritePollUrl(null);
+        setApprovingOutline(false);
+      }
+    }
+  );
+  const buildEditedOutline = () => {
+    if (!outline || !Array.isArray(outline.sections)) return void 0;
+    let changed = false;
+    const sections = outline.sections.map((s, i) => {
+      const edited = headingEdits[i];
+      if (edited !== void 0 && edited !== s.heading) {
+        changed = true;
+        return { ...s, heading: edited };
+      }
+      return s;
+    });
+    return changed ? { ...outline, sections } : void 0;
+  };
+  const handleApproveOutline = async () => {
+    if (!job_id || approvingOutline) return;
+    const endpoint = approveOutlineUrl || `/api/reports/${job_id}/approve-outline`;
+    setApprovingOutline(true);
+    setApproveError(null);
+    try {
+      const headers = { "Content-Type": "application/json" };
+      if (authToken) headers.Authorization = `Bearer ${authToken}`;
+      const editedOutline = buildEditedOutline();
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers,
+        body: JSON.stringify(editedOutline ? { outline: editedOutline } : {})
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.detail || err.error || `Approve failed (${res.status})`);
+      }
+      const data = await res.json();
+      if (typeof data.job_id === "string" && data.job_id !== job_id) {
+        setOutlineWritePollUrl(deriveJobStatusUrl2(data.job_id, pollUrl, regenerateUrl));
+        return;
+      }
+      setApprovingOutline(false);
+      void refetchSourceAndApply();
+    } catch (e) {
+      setApproveError(e instanceof Error ? e.message : "Could not build the report");
+      setApprovingOutline(false);
+    }
+  };
   const formatWordCount = (count) => {
     if (count >= 1e3) return `${(count / 1e3).toFixed(1)}k`;
     return count.toString();
@@ -17119,6 +17635,61 @@ var ResearchReportJobCard = (props) => {
       ] })
     ] }) }) });
   }
+  if (status === "complete" && reviewStatus === "pending_outline_approval") {
+    const sections = Array.isArray(outline?.sections) ? outline.sections : [];
+    const building = Boolean(outlineWritePollUrl) || approvingOutline;
+    return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("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]",
+          style: { background: "linear-gradient(90deg, #8B7D5E, #C0AE82, #DCC99B)" }
+        }
+      ),
+      /* @__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 text-violet-300", children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(DocumentIcon, {}) }),
+          /* @__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 || "Report outline" }),
+            /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("p", { className: "text-xs text-amber-400/90 mt-0.5", children: [
+              "Review the outline",
+              sections.length > 0 ? " \u2014 edit any heading" : "",
+              ", then build the full report."
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "mt-4 space-y-2", children: [
+          sections.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { className: "text-xs text-zinc-600 w-5 text-right tabular-nums flex-shrink-0", children: i + 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+              "input",
+              {
+                value: headingEdits[i] ?? s.heading ?? "",
+                onChange: (e) => setHeadingEdits((prev) => ({ ...prev, [i]: e.target.value })),
+                disabled: building,
+                className: "flex-1 min-w-0 bg-zinc-800/60 border border-zinc-700 rounded-lg px-3 h-8 text-xs text-zinc-200 focus:border-violet-500 outline-none disabled:opacity-60"
+              }
+            )
+          ] }, i)),
+          sections.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("p", { className: "text-xs text-zinc-500", children: "No outline sections were returned; you can still build the report." })
+        ] }),
+        approveError && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("p", { className: "mt-3 text-xs text-red-400/90", children: approveError }),
+        /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "mt-4 flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(
+          "button",
+          {
+            onClick: handleApproveOutline,
+            disabled: building,
+            title: "Approve this outline and build the full report",
+            className: "flex items-center gap-1.5 px-3 h-8 rounded-lg border border-emerald-700/50 bg-emerald-950/40 hover:border-emerald-500 text-emerald-300 text-xs font-medium transition-colors disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(CheckIcon2, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { children: building ? "Building report..." : "Approve & Build" })
+            ]
+          }
+        ) })
+      ] })
+    ] }) });
+  }
   if (status === "complete" && !hasHTML) {
     return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("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)(
@@ -17182,8 +17753,8 @@ var ResearchReportJobCard = (props) => {
       window.open(link, "_blank", "noopener,noreferrer");
     }
   };
-  const canApprove = generationMode === "template" && reviewStatus === "pending_review" && Boolean(job_id);
-  const canRegenerate = generationMode === "template" && reviewStatus === "pending_review" && Boolean(job_id);
+  const canApprove = !hideApproval && generationMode === "template" && reviewStatus === "pending_review" && Boolean(job_id);
+  const canRegenerate = !hideApproval && generationMode === "template" && reviewStatus === "pending_review" && Boolean(job_id);
   const canShare = Boolean(hasHTML || job_id) && (generationMode !== "template" || reviewStatus !== "pending_review");
   const handleApprove = async () => {
     if (!job_id || approving) return;
@@ -17247,36 +17818,18 @@ var ResearchReportJobCard = (props) => {
         throw new Error(err.detail || err.error || `Regenerate failed (${res.status})`);
       }
       const data = await res.json();
-      const out = data.output || data;
-      if (out.html_url) setHtmlUrl(out.html_url);
-      if (data.template_id || out.template_id) setTemplateId(data.template_id || out.template_id);
-      setReviewStatus("pending_review");
-      setTemplateVersionId("");
-      if (out.section_count !== void 0) setSectionCount(out.section_count);
-      if (out.title) setTitle(out.title);
-      if (onCompleteRef.current) {
-        onCompleteRef.current({
-          title: out.title || title,
-          depth,
-          section_count: out.section_count ?? sectionCount,
-          source_count: sourceCount,
-          word_count: wordCount,
-          executive_summary: summary,
-          html_url: out.html_url || htmlUrl,
-          generation_mode: "template",
-          template_id: data.template_id || out.template_id || templateId,
-          template_version_id: void 0,
-          review_status: "pending_review",
-          theme
-        });
+      if (typeof data.job_id === "string" && data.job_id !== job_id) {
+        setRegenPollUrl(deriveJobStatusUrl2(data.job_id, pollUrl, regenerateUrl));
+        return;
       }
+      applyRegeneratedOutput(data.output || data);
+      setRegenerating(false);
     } catch (e) {
       setApproveError(e instanceof Error ? e.message : "Could not switch template");
-    } finally {
       setRegenerating(false);
     }
   };
-  const templateLabel = formatTemplateLabel(templateId);
+  const templateLabel = formatTemplateLabel2(templateId);
   const isApproved = reviewStatus === "approved";
   return /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(import_jsx_runtime148.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("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: [
@@ -17325,7 +17878,7 @@ var ResearchReportJobCard = (props) => {
                 title: "Try another report template with the same data",
                 className: "flex items-center gap-1.5 px-2.5 h-7 rounded-lg border border-zinc-700 bg-zinc-800 hover:border-zinc-500 text-zinc-300 text-xs font-medium transition-colors disabled:opacity-50",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(RefreshIcon, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(RefreshIcon2, {}),
                   /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { children: regenerating ? "Switching..." : "Regenerate" })
                 ]
               }