pxengine 0.1.147 → 0.1.148

package/dist/index.d.cts

@@ -3880,6 +3880,8 @@ interface ReportTheme {
 /** One planned section in a report outline (content only, no styling). */
 interface ReportOutlineSection {
     heading?: string;
+    /** One-line description of what this section covers (DEV-286). */
+    sub_heading?: string;
     body?: string;
     takeaway?: string;
     /** Informational review flag (DEV-194) — never gates Approve & Build. */

package/dist/index.d.ts

@@ -3880,6 +3880,8 @@ interface ReportTheme {
 /** One planned section in a report outline (content only, no styling). */
 interface ReportOutlineSection {
     heading?: string;
+    /** One-line description of what this section covers (DEV-286). */
+    sub_heading?: string;
     body?: string;
     takeaway?: string;
     /** Informational review flag (DEV-194) — never gates Approve & Build. */

package/dist/index.mjs

@@ -17985,7 +17985,26 @@ var PresentationJobCard = ({
 // src/molecules/generic/ResearchReportJobCard/ResearchReportJobCard.tsx
 import { useCallback as useCallback5, useEffect as useEffect10, useRef as useRef11, useState as useState12 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
+import {
+  DndContext,
+  closestCenter,
+  pointerWithin,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+  arrayMove
+} from "@dnd-kit/sortable";
+import { CSS as CSS2 } from "@dnd-kit/utilities";
 import { Fragment as Fragment6, jsx as jsx154, jsxs as jsxs112 } from "react/jsx-runtime";
+var outlineCollisionDetection = (args) => {
+  const pointerHits = pointerWithin(args);
+  return pointerHits.length > 0 ? pointerHits : closestCenter(args);
+};
 var DEFAULT_THEME = {
   primary: "#C0AE82",
   secondary: "#C4AD7C",
@@ -18229,6 +18248,90 @@ function deriveJobStatusUrl2(newJobId, pollUrl, regenerateUrl) {
   const base = pollUrl?.replace(/\/api\/jobs\/[^/]+\/status.*$/, "") ?? regenerateUrl?.replace(/\/api\/reports\/[^/]+\/regenerate.*$/, "") ?? "";
   return `${base}/api/jobs/${newJobId}/status`;
 }
+var OutlineSectionRow = ({
+  index,
+  section,
+  headingValue,
+  subHeadingValue,
+  onHeadingChange,
+  onSubHeadingChange,
+  onToggleApproved,
+  disabled,
+  rowBusy
+}) => {
+  const { attributes, listeners: listeners2, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: String(index),
+    disabled
+  });
+  return /* @__PURE__ */ jsx154(
+    "div",
+    {
+      ref: setNodeRef,
+      style: { transform: CSS2.Transform.toString(transform), transition, opacity: isDragging ? 0.5 : 1 },
+      className: cn(
+        "rounded-xl border bg-zinc-800/40 p-3 transition-colors",
+        section.approved ? "border-emerald-700/40" : "border-zinc-700/60"
+      ),
+      children: /* @__PURE__ */ jsxs112("div", { className: "flex items-start gap-2.5", children: [
+        /* @__PURE__ */ jsx154(
+          "span",
+          {
+            ...attributes,
+            ...listeners2,
+            className: "flex-shrink-0 mt-1.5 cursor-grab text-zinc-600 hover:text-zinc-400 active:cursor-grabbing touch-none",
+            children: /* @__PURE__ */ jsx154(GripVertical, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx154(
+          "span",
+          {
+            className: cn(
+              "flex-shrink-0 mt-1 w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-semibold tabular-nums",
+              section.approved ? "bg-emerald-500/15 text-emerald-300" : "bg-zinc-700/70 text-zinc-400"
+            ),
+            children: index + 1
+          }
+        ),
+        /* @__PURE__ */ jsxs112("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx154(
+            "input",
+            {
+              value: headingValue,
+              onChange: (e) => onHeadingChange(e.target.value),
+              disabled,
+              placeholder: "Section heading",
+              className: "w-full bg-transparent text-sm text-zinc-100 placeholder:text-zinc-600 outline-none disabled:opacity-60"
+            }
+          ),
+          /* @__PURE__ */ jsx154(
+            "input",
+            {
+              value: subHeadingValue,
+              onChange: (e) => onSubHeadingChange(e.target.value),
+              disabled,
+              placeholder: "One-line summary",
+              className: "mt-0.5 w-full bg-transparent text-xs text-zinc-500 placeholder:text-zinc-700 outline-none disabled:opacity-60"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx154(
+          "button",
+          {
+            type: "button",
+            onClick: onToggleApproved,
+            disabled: rowBusy,
+            title: section.approved ? "Marked reviewed" : "Mark as reviewed",
+            className: cn(
+              "w-7 h-7 flex-shrink-0 flex items-center justify-center rounded-md border disabled:opacity-40",
+              section.approved ? "border-emerald-600/50 bg-emerald-950/40 text-emerald-300" : "border-zinc-700 text-zinc-500 hover:text-zinc-300 hover:border-zinc-500"
+            ),
+            children: /* @__PURE__ */ jsx154(CheckIcon, {})
+          }
+        )
+      ] })
+    }
+  );
+};
 var ResearchReportJobCard = (props) => {
   const {
     job_id,
@@ -18294,9 +18397,12 @@ var ResearchReportJobCard = (props) => {
   const [regenerating, setRegenerating] = useState12(false);
   const [approveError, setApproveError] = useState12(null);
   const [headingEdits, setHeadingEdits] = useState12({});
+  const [subHeadingEdits, setSubHeadingEdits] = useState12({});
   const [approvingOutline, setApprovingOutline] = useState12(false);
   const [rowBusyIndex, setRowBusyIndex] = useState12(null);
   const [rowError, setRowError] = useState12(null);
+  const [reordering, setReordering] = useState12(false);
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }));
   const [outlineWritePollUrl, setOutlineWritePollUrl] = useState12(null);
   const [regenPollUrl, setRegenPollUrl] = useState12(null);
   const onCompleteRef = useRef11(onComplete);
@@ -18558,34 +18664,39 @@ var ResearchReportJobCard = (props) => {
     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) {
+      const editedHeading = headingEdits[i];
+      const editedSubHeading = subHeadingEdits[i];
+      let next = s;
+      if (editedHeading !== void 0 && editedHeading !== s.heading) {
+        next = { ...next, heading: editedHeading };
         changed = true;
-        return { ...s, heading: edited };
       }
-      return s;
+      if (editedSubHeading !== void 0 && editedSubHeading !== s.sub_heading) {
+        next = { ...next, sub_heading: editedSubHeading };
+        changed = true;
+      }
+      return next;
     });
     return changed ? { ...outline, sections } : void 0;
   };
-  const moveOutlineSection = async (index, delta) => {
-    if (!outline || !Array.isArray(outline.sections) || rowBusyIndex !== null) return;
+  const reorderOutlineSections = async (order) => {
+    if (!outline || !Array.isArray(outline.sections) || reordering) return;
     const sections = outline.sections;
-    const target = index + delta;
-    if (target < 0 || target >= sections.length) return;
-    const order = sections.map((_, i) => i);
-    [order[index], order[target]] = [order[target], order[index]];
     const reordered = order.map((i) => sections[i]);
     const previousOutline = outline;
-    const previousEdits = headingEdits;
-    setOutline({ ...outline, sections: reordered });
-    setHeadingEdits((prev) => {
+    const previousHeadingEdits = headingEdits;
+    const previousSubHeadingEdits = subHeadingEdits;
+    const remap = (prev) => {
       const remapped = {};
       order.forEach((originalIndex, newIndex) => {
         if (prev[originalIndex] !== void 0) remapped[newIndex] = prev[originalIndex];
       });
       return remapped;
-    });
-    setRowBusyIndex(index);
+    };
+    setOutline({ ...outline, sections: reordered });
+    setHeadingEdits(remap(previousHeadingEdits));
+    setSubHeadingEdits(remap(previousSubHeadingEdits));
+    setReordering(true);
     setRowError(null);
     try {
       const endpoint = reorderSectionsUrl || `/api/reports/${job_id}/outline/reorder-sections`;
@@ -18602,12 +18713,26 @@ var ResearchReportJobCard = (props) => {
       }
     } catch (e) {
       setOutline(previousOutline);
-      setHeadingEdits(previousEdits);
+      setHeadingEdits(previousHeadingEdits);
+      setSubHeadingEdits(previousSubHeadingEdits);
       setRowError(e instanceof Error ? e.message : "Could not reorder sections");
     } finally {
-      setRowBusyIndex(null);
+      setReordering(false);
     }
   };
+  const handleOutlineDragEnd = (event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id || !outline?.sections) return;
+    const oldIndex = Number(active.id);
+    const newIndex = Number(over.id);
+    if (Number.isNaN(oldIndex) || Number.isNaN(newIndex)) return;
+    const order = arrayMove(
+      outline.sections.map((_, i) => i),
+      oldIndex,
+      newIndex
+    );
+    void reorderOutlineSections(order);
+  };
   const toggleSectionApproved = async (index) => {
     if (!outline || !Array.isArray(outline.sections) || rowBusyIndex !== null) return;
     const sections = outline.sections;
@@ -18802,87 +18927,42 @@ var ResearchReportJobCard = (props) => {
             /* @__PURE__ */ jsx154("h3", { className: "text-sm font-semibold text-zinc-100 truncate leading-tight", children: title || "Report outline" }),
             /* @__PURE__ */ jsxs112("p", { className: "text-xs text-amber-400/90 mt-0.5", children: [
               "Review the outline",
-              sections.length > 0 ? " \u2014 edit any heading" : "",
+              sections.length > 0 ? " \u2014 edit any heading, drag to reorder" : "",
               ", then build the full report."
             ] })
           ] })
         ] }),
         /* @__PURE__ */ jsxs112("div", { className: "mt-4 space-y-2", children: [
-          sections.map((s, i) => {
-            const rowBusy = building || rowBusyIndex === i;
-            return /* @__PURE__ */ jsxs112(
-              "div",
-              {
-                className: cn(
-                  "rounded-xl border bg-zinc-800/40 p-3 transition-colors",
-                  s.approved ? "border-emerald-700/40" : "border-zinc-700/60"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxs112("div", { className: "flex items-start gap-2.5", children: [
-                    /* @__PURE__ */ jsx154(
-                      "span",
-                      {
-                        className: cn(
-                          "flex-shrink-0 mt-1 w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-semibold tabular-nums",
-                          s.approved ? "bg-emerald-500/15 text-emerald-300" : "bg-zinc-700/70 text-zinc-400"
-                        ),
-                        children: i + 1
-                      }
-                    ),
-                    /* @__PURE__ */ jsx154(
-                      "input",
-                      {
-                        value: headingEdits[i] ?? s.heading ?? "",
-                        onChange: (e) => setHeadingEdits((prev) => ({ ...prev, [i]: e.target.value })),
-                        disabled: building,
-                        placeholder: "Section heading",
-                        className: "flex-1 min-w-0 bg-transparent text-sm text-zinc-100 placeholder:text-zinc-600 outline-none disabled:opacity-60"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx154(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => toggleSectionApproved(i),
-                        disabled: rowBusy,
-                        title: s.approved ? "Marked reviewed" : "Mark as reviewed",
-                        className: cn(
-                          "w-7 h-7 flex-shrink-0 flex items-center justify-center rounded-md border disabled:opacity-40",
-                          s.approved ? "border-emerald-600/50 bg-emerald-950/40 text-emerald-300" : "border-zinc-700 text-zinc-500 hover:text-zinc-300 hover:border-zinc-500"
-                        ),
-                        children: /* @__PURE__ */ jsx154(CheckIcon, {})
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxs112("div", { className: "flex items-center justify-end gap-1 mt-2 pl-[30px]", children: [
-                    /* @__PURE__ */ jsx154(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => moveOutlineSection(i, -1),
-                        disabled: rowBusy || i === 0,
-                        title: "Move up",
-                        className: "w-6 h-6 flex items-center justify-center rounded-md text-zinc-500 hover:text-zinc-200 hover:bg-zinc-700/60 disabled:opacity-30 disabled:hover:bg-transparent",
-                        children: /* @__PURE__ */ jsx154(ChevronUpIcon, {})
-                      }
-                    ),
-                    /* @__PURE__ */ jsx154(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => moveOutlineSection(i, 1),
-                        disabled: rowBusy || i === sections.length - 1,
-                        title: "Move down",
-                        className: "w-6 h-6 flex items-center justify-center rounded-md text-zinc-500 hover:text-zinc-200 hover:bg-zinc-700/60 disabled:opacity-30 disabled:hover:bg-transparent",
-                        children: /* @__PURE__ */ jsx154(ChevronDownIcon, {})
-                      }
-                    )
-                  ] })
-                ]
-              },
-              i
-            );
-          }),
+          /* @__PURE__ */ jsx154(
+            DndContext,
+            {
+              sensors,
+              collisionDetection: outlineCollisionDetection,
+              onDragEnd: handleOutlineDragEnd,
+              children: /* @__PURE__ */ jsx154(
+                SortableContext,
+                {
+                  items: sections.map((_, i) => String(i)),
+                  strategy: verticalListSortingStrategy,
+                  children: sections.map((s, i) => /* @__PURE__ */ jsx154(
+                    OutlineSectionRow,
+                    {
+                      index: i,
+                      section: s,
+                      headingValue: headingEdits[i] ?? s.heading ?? "",
+                      subHeadingValue: subHeadingEdits[i] ?? s.sub_heading ?? "",
+                      onHeadingChange: (v) => setHeadingEdits((prev) => ({ ...prev, [i]: v })),
+                      onSubHeadingChange: (v) => setSubHeadingEdits((prev) => ({ ...prev, [i]: v })),
+                      onToggleApproved: () => toggleSectionApproved(i),
+                      disabled: building || reordering,
+                      rowBusy: building || rowBusyIndex === i
+                    },
+                    i
+                  ))
+                }
+              )
+            }
+          ),
           sections.length === 0 && /* @__PURE__ */ jsx154("p", { className: "text-xs text-zinc-500", children: "No outline sections were returned; you can still build the report." })
         ] }),
         rowError && /* @__PURE__ */ jsx154("p", { className: "mt-2 text-xs text-red-400/90", children: rowError }),