@ryanfw/prompt-orchestration-pipeline 0.11.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ryanfw/prompt-orchestration-pipeline",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "A Prompt-orchestration pipeline (POP) is a framework for building, running, and experimenting with complex chains of LLM tasks.",
   "type": "module",
   "main": "src/ui/server.js",
@@ -20,6 +20,8 @@
     "access": "public"
   },
   "scripts": {
+    "analyze": "node src/cli/index.js analyze",
+    "deduce-schemas": "node scripts/deduce-schemas.js",
     "test": "vitest run --config ./vite.config.js --root .",
     "lint": "eslint . --ext .js,.jsx",
     "backend": "NODE_ENV=development nodemon src/ui/server.js",
@@ -34,6 +36,9 @@
     "demo:prod": "npm run ui:build && NODE_ENV=production PO_ROOT=demo node src/ui/server.js"
   },
   "dependencies": {
+    "@babel/parser": "^7.28.5",
+    "@babel/traverse": "^7.28.5",
+    "@babel/types": "^7.28.5",
     "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toast": "^1.2.15",
@@ -43,12 +48,17 @@
     "chokidar": "^3.5.3",
     "commander": "^14.0.2",
     "dotenv": "^17.2.3",
+    "express": "^4.19.2",
     "fflate": "^0.8.2",
     "lucide-react": "^0.544.0",
     "openai": "^5.23.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "^7.9.4",
+    "react-syntax-highlighter": "^15.6.1",
+    "rehype-highlight": "^7.0.2",
+    "remark-gfm": "^4.0.1",
     "tslib": "^2.8.1"
   },
   "devDependencies": {

package/src/cli/analyze-task.js

@@ -0,0 +1,51 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+
+/**
+ * Analyze a task file and output the analysis as JSON.
+ *
+ * @param {string} taskPath - Path to the task file
+ * @returns {Promise<void>}
+ */
+export async function analyzeTaskFile(taskPath) {
+  try {
+    // Use dynamic import to handle ESM/CommonJS interop for @babel/traverse
+    const { analyzeTask } = await import("../task-analysis/index.js");
+
+    // Resolve the task path (handle both relative and absolute paths)
+    const absolutePath = path.isAbsolute(taskPath)
+      ? taskPath
+      : path.resolve(process.cwd(), taskPath);
+
+    // Read the task file
+    const code = await fs.readFile(absolutePath, "utf8");
+
+    // Run analysis
+    const analysis = analyzeTask(code, absolutePath);
+
+    // Output as JSON
+    console.log(JSON.stringify(analysis, null, 2));
+  } catch (error) {
+    if (error && error.code === "ENOENT") {
+      console.error(`Error: Task file not found: ${taskPath}`);
+      process.exit(1);
+    }
+
+    const isDev =
+      process.env.NODE_ENV === "development" ||
+      process.env.DEBUG_TASK_ANALYSIS === "1";
+
+    console.error("Error analyzing task:");
+
+    if (isDev) {
+      // In development/debug mode, preserve full error context (including stack trace)
+      console.error(error && error.stack ? error.stack : error);
+    } else if (error && typeof error.message === "string") {
+      // In normal mode, show a concise message while keeping the library's formatting
+      console.error(error.message);
+    } else {
+      console.error(String(error));
+    }
+    process.exit(1);
+  }
+}

package/src/cli/index.js

@@ -7,6 +7,7 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { spawn } from "node:child_process";
 import { updatePipelineJson } from "./update-pipeline-json.js";
+import { analyzeTaskFile } from "./analyze-task.js";
 
 // Derive package root for resolving internal paths regardless of host CWD
 const currentFile = fileURLToPath(import.meta.url);
@@ -368,6 +369,13 @@ program
     }
   });
 
+program
+  .command("analyze <task-path>")
+  .description("Analyze a task file and output metadata")
+  .action(async (taskPath) => {
+    await analyzeTaskFile(taskPath);
+  });
+
 program
   .command("add-pipeline-task <pipeline-slug> <task-slug>")
   .description("Add a new task to a pipeline")

package/src/components/AddPipelineSidebar.jsx

@@ -0,0 +1,144 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { Button } from "./ui/button.jsx";
+import { Sidebar, SidebarFooter } from "./ui/sidebar.jsx";
+
+export function AddPipelineSidebar({ open, onOpenChange }) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [error, setError] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!open) {
+      setName("");
+      setDescription("");
+      setError(null);
+    }
+  }, [open]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+
+    if (!name.trim() || !description.trim()) {
+      setError("Name and description are required");
+      setSubmitting(false);
+      return;
+    }
+
+    try {
+      const response = await fetch("/api/pipelines", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          name: name.trim(),
+          description: description.trim(),
+        }),
+      });
+
+      if (!response.ok) {
+        const result = await response.json();
+        throw new Error(result.error || "Failed to create pipeline");
+      }
+
+      const { slug } = await response.json();
+      onOpenChange(false);
+
+      // Wait for watcher to detect registry change and reload config
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      navigate(`/pipelines/${slug}`);
+    } catch (err) {
+      setError(err.message || "Failed to create pipeline");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Sidebar
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Add Pipeline Type"
+      description="Create a new pipeline type for your workflow"
+    >
+      <form onSubmit={handleSubmit}>
+        <div className="p-6 space-y-4">
+          <label className="block">
+            <span className="block text-sm font-medium text-foreground mb-1">
+              Name
+            </span>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring bg-background"
+              placeholder="My Pipeline"
+              aria-describedby="name-description"
+            />
+            <span
+              id="name-description"
+              className="text-xs text-muted-foreground"
+            >
+              A unique identifier for this pipeline type
+            </span>
+          </label>
+
+          <label className="block">
+            <span className="block text-sm font-medium text-foreground mb-1">
+              Description
+            </span>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={3}
+              className="w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring bg-background resize-none"
+              placeholder="Describe what this pipeline does"
+              aria-describedby="description-description"
+            />
+            <span
+              id="description-description"
+              className="text-xs text-muted-foreground"
+            >
+              Explain the purpose and expected outcomes
+            </span>
+          </label>
+
+          {error && (
+            <div className="p-3 bg-destructive/10 border border-destructive/20 rounded-md">
+              <p className="text-sm text-destructive">{error}</p>
+            </div>
+          )}
+        </div>
+
+        <SidebarFooter>
+          <Button
+            variant="outline"
+            size="md"
+            type="button"
+            onClick={() => onOpenChange(false)}
+            className="flex-1"
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="solid"
+            size="md"
+            type="submit"
+            loading={submitting}
+            className="flex-1"
+          >
+            Create
+          </Button>
+        </SidebarFooter>
+      </form>
+    </Sidebar>
+  );
+}
+
+export default AddPipelineSidebar;

package/src/components/AnalysisProgressTray.jsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { Progress } from "./ui/progress.jsx";
+import { Button } from "./ui/button.jsx";
+
+export function AnalysisProgressTray({
+  status,
+  pipelineSlug,
+  completedTasks = 0,
+  totalTasks = 0,
+  completedArtifacts = 0,
+  totalArtifacts = 0,
+  currentTask,
+  currentArtifact,
+  error,
+  onDismiss,
+}) {
+  if (status === "idle") return null;
+
+  const progressPct = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;
+  const progressVariant =
+    status === "error"
+      ? "error"
+      : status === "complete"
+        ? "completed"
+        : "running";
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 w-80 rounded-lg border bg-white shadow-lg dark:bg-gray-800 dark:border-gray-700">
+      <div className="flex items-center justify-between border-b p-3 dark:border-gray-700">
+        <h3 className="font-semibold text-sm">Analyzing {pipelineSlug}</h3>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onDismiss}
+          className="h-6 w-6 p-0"
+        >
+          ×
+        </Button>
+      </div>
+
+      <div className="p-3">
+        {status === "running" && (
+          <>
+            <div className="mb-2 flex items-center justify-between text-xs">
+              <span className="text-muted-foreground">
+                {completedTasks} of {totalTasks} tasks
+              </span>
+            </div>
+            <Progress
+              value={progressPct}
+              variant={progressVariant}
+              className="mb-3"
+            />
+
+            {currentArtifact && (
+              <p className="text-xs text-muted-foreground">
+                Deducing schema for {currentArtifact}...
+              </p>
+            )}
+            {currentTask && !currentArtifact && (
+              <p className="text-xs text-muted-foreground">
+                Analyzing {currentTask}...
+              </p>
+            )}
+          </>
+        )}
+
+        {status === "complete" && (
+          <div className="flex items-center gap-2 text-sm">
+            <span className="text-green-600 dark:text-green-400">✓</span>
+            <span>Analysis complete</span>
+          </div>
+        )}
+
+        {status === "error" && (
+          <div className="text-sm text-red-600 dark:text-red-400">
+            {error || "Analysis failed"}
+          </div>
+        )}
+
+        {status === "connecting" && (
+          <div className="text-sm text-muted-foreground">Connecting...</div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/DAGGrid.jsx

@@ -10,9 +10,10 @@ import { areGeometriesEqual } from "../utils/geometry-equality.js";
 import { TaskDetailSidebar } from "./TaskDetailSidebar.jsx";
 import { RestartJobModal } from "./ui/RestartJobModal.jsx";
 import { Button } from "./ui/button.jsx";
-import { restartJob } from "../ui/client/api.js";
+import { restartJob, startTask } from "../ui/client/api.js";
 import { createEmptyTaskFiles } from "../utils/task-files.js";
 import { TaskState } from "../config/statuses.js";
+import { deriveAllowedActions } from "../ui/client/adapters/job-adapter.js";
 import TimerText from "./TimerText.jsx";
 import { taskToTimerProps } from "../utils/time-utils.js";
 
@@ -87,6 +88,11 @@ const canShowRestart = (status) => {
   return status === TaskState.FAILED || status === TaskState.DONE;
 };
 
+// Check if Start button should be shown for a given status
+const canShowStart = (status) => {
+  return status === TaskState.PENDING;
+};
+
 // Custom comparison function for TaskCard memoization
 const areEqualTaskCardProps = (prevProps, nextProps) => {
   return (
@@ -95,11 +101,14 @@ const areEqualTaskCardProps = (prevProps, nextProps) => {
     prevProps.status === nextProps.status &&
     prevProps.isActive === nextProps.isActive &&
     prevProps.canRestart === nextProps.canRestart &&
+    prevProps.canStart === nextProps.canStart &&
     prevProps.isSubmitting === nextProps.isSubmitting &&
     prevProps.disabledReason === nextProps.disabledReason &&
+    prevProps.startDisabledReason === nextProps.startDisabledReason &&
     prevProps.onClick === nextProps.onClick &&
     prevProps.onKeyDown === nextProps.onKeyDown &&
-    prevProps.handleRestartClick === nextProps.handleRestartClick
+    prevProps.handleRestartClick === nextProps.handleRestartClick &&
+    prevProps.handleStartClick === nextProps.handleStartClick
   );
 };
 
@@ -111,11 +120,14 @@ const TaskCard = memo(function TaskCard({
   status,
   isActive,
   canRestart,
+  canStart,
   isSubmitting,
   disabledReason,
+  startDisabledReason,
   onClick,
   onKeyDown,
   handleRestartClick,
+  handleStartClick,
 }) {
   const { startMs, endMs } = taskToTimerProps(item);
   const reducedMotion = prefersReducedMotion();
@@ -196,9 +208,24 @@ const TaskCard = memo(function TaskCard({
           <div className="mt-2 text-sm text-gray-700">{item.body}</div>
         )}
 
-        {/* Restart button */}
-        {canShowRestart(status) && (
-          <div className="mt-3 pt-3 border-t border-gray-100">
+        {/* Action buttons */}
+        <div className="mt-3 pt-3 border-t border-gray-100 flex gap-2">
+          {/* Start button */}
+          {canShowStart(status) && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={(e) => handleStartClick(e, item.id)}
+              disabled={!canStart || isSubmitting}
+              className="text-xs cursor-pointer disabled:cursor-not-allowed"
+              title={!canStart ? startDisabledReason : `Start task ${item.id}`}
+            >
+              Start
+            </Button>
+          )}
+
+          {/* Restart button */}
+          {canShowRestart(status) && (
             <Button
               variant="outline"
               size="sm"
@@ -211,8 +238,8 @@ const TaskCard = memo(function TaskCard({
             >
               Restart
             </Button>
-          </div>
-        )}
+          )}
+        </div>
       </div>
     </div>
   );
@@ -237,6 +264,7 @@ function DAGGrid({
   jobId,
   filesByTypeForItem = () => createEmptyTaskFiles(),
   taskById = {},
+  pipelineTasks = [],
 }) {
   const overlayRef = useRef(null);
   const gridRef = useRef(null);
@@ -443,15 +471,11 @@ function DAGGrid({
     }
 
     const handleResize = () => compute();
-    const handleScroll = () => compute();
-
     window.addEventListener("resize", handleResize);
-    window.addEventListener("scroll", handleScroll, true);
 
     return () => {
       if (ro) ro.disconnect();
       window.removeEventListener("resize", handleResize);
-      window.removeEventListener("scroll", handleScroll, true);
       if (rafRef.current) {
         cancelAnimationFrame(rafRef.current);
       }
@@ -487,6 +511,62 @@ function DAGGrid({
     }
   }, [openIdx]);
 
+  // Start functionality
+  const handleStartClick = async (e, taskId) => {
+    e.stopPropagation(); // Prevent card click
+
+    if (!jobId || isSubmitting) return;
+
+    setIsSubmitting(true);
+    setAlertMessage(null);
+
+    try {
+      await startTask(jobId, taskId);
+
+      const successMessage = `Task ${taskId} started successfully.`;
+      setAlertMessage(successMessage);
+      setAlertType("success");
+    } catch (error) {
+      let message;
+      let type;
+
+      switch (error.code) {
+        case "job_running":
+          message = "Job is currently running; start is unavailable.";
+          type = "warning";
+          break;
+        case "job_not_found":
+          message = "Job not found.";
+          type = "error";
+          break;
+        case "task_not_found":
+          message = "Task not found.";
+          type = "error";
+          break;
+        case "task_not_pending":
+          message = "Task is not in pending state.";
+          type = "warning";
+          break;
+        case "dependencies_not_satisfied":
+          message = "Dependencies not satisfied for task.";
+          type = "warning";
+          break;
+        case "unsupported_lifecycle":
+          message = "Job must be in current to start a task.";
+          type = "warning";
+          break;
+        default:
+          message = error.message || "An unexpected error occurred.";
+          type = "error";
+      }
+
+      setAlertMessage(message);
+      setAlertType(type);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   // Restart functionality
   const handleRestartClick = (e, taskId) => {
     e.stopPropagation(); // Prevent card click
@@ -494,7 +574,7 @@ function DAGGrid({
     setRestartModalOpen(true);
   };
 
-  const handleRestartConfirm = async () => {
+  const handleRestartConfirm = async (options) => {
     if (!jobId || isSubmitting) return;
 
     setIsSubmitting(true);
@@ -505,12 +585,17 @@ function DAGGrid({
       if (restartTaskId) {
         restartOptions.fromTask = restartTaskId;
       }
+      if (options?.singleTask) {
+        restartOptions.singleTask = options.singleTask;
+      }
 
       await restartJob(jobId, restartOptions);
 
-      const successMessage = restartTaskId
-        ? `Restart requested from ${restartTaskId}. The job will start from that task in the background.`
-        : "Restart requested. The job will reset to pending and start in the background.";
+      const successMessage = options?.singleTask
+        ? `Re-running task ${restartTaskId} in isolation. The job will remain in current after completion.`
+        : restartTaskId
+          ? `Restart requested from ${restartTaskId}. The job will start from that task in the background.`
+          : "Restart requested. The job will reset to pending and start in the background.";
       setAlertMessage(successMessage);
       setAlertType("success");
       setRestartModalOpen(false);
@@ -524,10 +609,6 @@ function DAGGrid({
           message = "Job is currently running; restart is unavailable.";
           type = "warning";
           break;
-        case "unsupported_lifecycle":
-          message = "Job must be in current lifecycle to restart.";
-          type = "warning";
-          break;
         case "job_not_found":
           message = "Job not found.";
           type = "error";
@@ -563,41 +644,65 @@ function DAGGrid({
     }
   }, [alertMessage]);
 
-  // Check if restart should be enabled (job lifecycle = current and not running)
-  const isRestartEnabled = React.useCallback(() => {
-    // Check if any item indicates that job is running (job-level state)
-    const isJobRunning = items.some(
-      (item) => item?.state === TaskState.RUNNING
-    );
-
-    // Check if any task has explicit running status (not derived from activeIndex)
-    const hasRunningTask = items.some(
-      (item) => item?.status === TaskState.RUNNING
-    );
+  // Use adapter to derive allowed actions based on job and task states
+  const allowedActions = React.useMemo(() => {
+    // Create a normalized job object for the adapter
+    const adaptedJob = {
+      status: items.some((item) => item?.state === TaskState.RUNNING)
+        ? "running"
+        : "pending",
+      tasks: items.reduce((acc, item) => {
+        if (item?.id) {
+          acc[item.id] = {
+            state: item?.status || TaskState.PENDING,
+          };
+        }
+        return acc;
+      }, {}),
+    };
 
-    const jobLifecycle = items[0]?.lifecycle || "current";
+    return deriveAllowedActions(adaptedJob, pipelineTasks);
+  }, [items, pipelineTasks]);
 
-    return jobLifecycle === "current" && !isJobRunning && !hasRunningTask;
-  }, [items]);
+  // Check if restart should be enabled using adapter logic
+  const isRestartEnabled = React.useCallback(() => {
+    return allowedActions.restart;
+  }, [allowedActions]);
+
+  // Check if start should be enabled for a specific task using adapter logic
+  const canStartTask = React.useCallback(
+    (task) => {
+      if (!task) return false;
+
+      // Use adapter logic - start is enabled globally, so check if this specific task can start
+      return allowedActions.start && task.status === TaskState.PENDING;
+    },
+    [allowedActions]
+  );
 
-  // Get disabled reason for tooltip
+  // Get disabled reason for tooltip using adapter logic
   const getRestartDisabledReason = React.useCallback(() => {
-    // Check if any item indicates that job is running (job-level state)
-    const isJobRunning = items.some(
-      (item) => item?.state === TaskState.RUNNING
-    );
+    if (allowedActions.restart) return "";
+    return "Job is currently running";
+  }, [allowedActions]);
 
-    // Check if any task has explicit running status (not derived from activeIndex)
-    const hasRunningTask = items.some(
-      (item) => item?.status === TaskState.RUNNING
-    );
+  // Get disabled reason for start tooltip using adapter logic
+  const getStartDisabledReason = React.useCallback(
+    (task) => {
+      if (!task) return "Task not found";
 
-    const jobLifecycle = items[0]?.lifecycle || "current";
+      if (task.status !== TaskState.PENDING) {
+        return "Task is not in pending state";
+      }
+
+      if (!allowedActions.start) {
+        return "Job lifecycle policy does not allow starting";
+      }
 
-    if (isJobRunning || hasRunningTask) return "Job is currently running";
-    if (jobLifecycle !== "current") return "Job must be in current lifecycle";
-    return "";
-  }, [items]);
+      return "";
+    },
+    [allowedActions]
+  );
 
   return (
     <div className="relative w-full" role="list">
@@ -694,7 +799,9 @@ function DAGGrid({
           const status = getStatus(idx);
           const isActive = idx === activeIndex;
           const canRestart = isRestartEnabled();
+          const canStart = canStartTask(item);
           const restartDisabledReason = getRestartDisabledReason();
+          const startDisabledReason = getStartDisabledReason(item);
 
           return (
             <TaskCard
@@ -704,8 +811,10 @@ function DAGGrid({
               status={status}
               isActive={isActive}
               canRestart={canRestart}
+              canStart={canStart}
               isSubmitting={isSubmitting}
               disabledReason={restartDisabledReason}
+              startDisabledReason={startDisabledReason}
               onClick={() => {
                 setOpenIdx(idx);
               }}
@@ -716,6 +825,7 @@ function DAGGrid({
                 }
               }}
               handleRestartClick={handleRestartClick}
+              handleStartClick={handleStartClick}
               item={item}
             />
           );