@ryanfw/prompt-orchestration-pipeline 0.12.0 → 0.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ryanfw/prompt-orchestration-pipeline",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "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",
@@ -49,7 +54,11 @@
     "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/JobTable.jsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { Box, Flex, Table, Text, Button } from "@radix-ui/themes";
+import { Box, Flex, Table, Text } from "@radix-ui/themes";
 import { Progress } from "./ui/progress";
+import { Button } from "./ui/button.jsx";
 import { TimerReset, ChevronRight } from "lucide-react";
 import { fmtDuration, jobCumulativeDurationMs } from "../utils/duration.js";
 import { countCompleted } from "../utils/jobs";
@@ -234,8 +235,8 @@ export default function JobTable({ jobs, pipeline, onOpenJob }) {
                 <Table.Cell>
                   <Button
                     variant="ghost"
-                    size="1"
-                    className="opacity-0 group-hover:opacity-100 transition-opacity text-slate-500 hover:text-slate-700"
+                    size="sm"
+                    className="opacity-0 group-hover:opacity-100 transition-opacity"
                     aria-label={`View details for ${jobTitle}`}
                   >
                     <ChevronRight className="h-4 w-4" />

package/src/components/Layout.jsx

@@ -1,12 +1,11 @@
 import React, { useState, useRef, useEffect } from "react";
 import { useNavigate, useLocation, Link } from "react-router-dom";
-import * as Tooltip from "@radix-ui/react-tooltip";
 import { Box, Flex, Text, Heading, Link as RadixLink } from "@radix-ui/themes";
 import { Button } from "./ui/button.jsx";
 import Logo from "./ui/Logo.jsx";
 import PageSubheader from "./PageSubheader.jsx";
 import UploadSeed from "./UploadSeed.jsx";
-import { ArrowLeft, Code2, Upload } from "lucide-react";
+import { Code2, Upload, List } from "lucide-react";
 import "./ui/focus-styles.css";
 
 /**
@@ -85,153 +84,157 @@ export default function Layout({
   }, [isUploadOpen]);
 
   return (
-    <Tooltip.Provider delayDuration={200}>
-      <Box className="min-h-screen bg-gray-1">
-        {/* Skip to main content link for accessibility */}
-        <Box
-          as="a"
-          href="#main-content"
-          className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 z-50 bg-blue-600 text-white px-3 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+    <Box className="min-h-screen bg-gray-1">
+      {/* Skip to main content link for accessibility */}
+      <Box
+        as="a"
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 z-50 bg-primary text-primary-foreground px-3 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 transition-colors"
+      >
+        Skip to main content
+      </Box>
+
+      {/* Header */}
+      <Box
+        role="banner"
+        className="sticky top-0 z-20 border-b border-gray-300 bg-gray-1/80 backdrop-blur supports-[backdrop-filter]:bg-gray-1/60"
+      >
+        <Flex
+          align="center"
+          justify="between"
+          className={`mx-auto w-full ${maxWidth} px-4 sm:px-6 lg:px-8 py-4`}
+          gap="4"
         >
-          Skip to main content
-        </Box>
+          {/* Left side: Navigation and title */}
+          <Flex align="center" className="min-w-0 flex-1">
+            {/* Logo */}
+            <Box
+              asChild
+              className="shrink-0"
+              style={{ width: "80px", height: "60px" }}
+            >
+              <Link
+                to="/"
+                aria-label="Go to homepage"
+                className="rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+              >
+                <Logo />
+              </Link>
+            </Box>
+
+            {/* App title - clickable to navigate to dashboard */}
+            <Box
+              asChild
+              className="shrink-0 cursor-pointer hover:bg-gray-3 rounded p-1 -m-1 transition-colors"
+              onClick={() => navigate("/")}
+            >
+              <Heading
+                size="6"
+                weight="medium"
+                className="text-gray-12 truncate"
+              >
+                <>
+                  Prompt
+                  <br />
+                  Pipeline
+                </>
+              </Heading>
+            </Box>
+          </Flex>
+
+          {/* Center: Navigation */}
+          <nav
+            role="navigation"
+            aria-label="Main navigation"
+            className="hidden md:flex"
+          >
+            <Flex align="center" gap="6">
+              <RadixLink
+                href="/pipelines"
+                className={`text-sm font-medium transition-colors hover:text-blue-600 ${
+                  isActivePath("/pipelines")
+                    ? "text-blue-600"
+                    : "text-gray-11 hover:text-gray-12"
+                }`}
+                aria-current={isActivePath("/pipelines") ? "page" : undefined}
+              >
+                <Flex align="center" gap="2">
+                  <List className="h-4 w-4" />
+                  Pipelines
+                </Flex>
+              </RadixLink>
+              <RadixLink
+                href="/code"
+                className={`text-sm font-medium transition-colors hover:text-blue-600 ${
+                  isActivePath("/code")
+                    ? "text-blue-600"
+                    : "text-gray-11 hover:text-gray-12"
+                }`}
+                aria-current={isActivePath("/code") ? "page" : undefined}
+              >
+                <Flex align="center" gap="2">
+                  <Code2 className="h-4 w-4" />
+                  Help
+                </Flex>
+              </RadixLink>
+            </Flex>
+          </nav>
+
+          {/* Right side: Actions */}
+          <Flex align="center" gap="3" className="shrink-0">
+            {actions}
+            <Button
+              size="md"
+              variant="solid"
+              onClick={toggleUploadPanel}
+              aria-controls="layout-upload-panel"
+              aria-expanded={isUploadOpen}
+            >
+              <Upload className="h-4 w-4" />
+              <Text size="2" className="ml-2">
+                Upload Seed
+              </Text>
+            </Button>
+          </Flex>
+        </Flex>
+      </Box>
 
-        {/* Header */}
+      {/* Upload Panel */}
+      {isUploadOpen && (
         <Box
-          role="banner"
-          className="sticky top-0 z-20 border-b border-gray-300 bg-gray-1/80 backdrop-blur supports-[backdrop-filter]:bg-gray-1/60"
+          id="layout-upload-panel"
+          ref={uploadPanelRef}
+          role="region"
+          aria-label="Upload seed file"
+          className="bg-blue-50"
         >
           <Flex
-            align="center"
-            justify="between"
+            direction="column"
+            gap="3"
             className={`mx-auto w-full ${maxWidth} px-4 sm:px-6 lg:px-8 py-4`}
-            gap="4"
           >
-            {/* Left side: Navigation and title */}
-            <Flex align="center" className="min-w-0 flex-1">
-              {/* Logo */}
-              <Box
-                asChild
-                className="shrink-0"
-                style={{ width: "80px", height: "60px" }}
-              >
-                <Link
-                  to="/"
-                  aria-label="Go to homepage"
-                  className="rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
-                >
-                  <Logo />
-                </Link>
-              </Box>
-
-              {/* App title - clickable to navigate to dashboard */}
-              <Box
-                asChild
-                className="shrink-0 cursor-pointer hover:bg-gray-3 rounded p-1 -m-1 transition-colors"
-                onClick={() => navigate("/")}
-              >
-                <Heading
-                  size="6"
-                  weight="medium"
-                  className="text-gray-12 truncate"
-                >
-                  <>
-                    Prompt
-                    <br />
-                    Pipeline
-                  </>
-                </Heading>
+            {/* Success Message */}
+            {seedUploadSuccess && (
+              <Box className="rounded-md bg-green-50 p-3 border border-green-200">
+                <Text size="2" className="text-green-800">
+                  Job <strong>{seedUploadSuccess}</strong> created successfully
+                </Text>
               </Box>
-            </Flex>
+            )}
 
-            {/* Center: Navigation */}
-            <nav
-              role="navigation"
-              aria-label="Main navigation"
-              className="hidden md:flex"
-            >
-              <Flex align="center" gap="6">
-                <RadixLink
-                  href="/code"
-                  className={`text-sm font-medium transition-colors hover:text-blue-600 ${
-                    isActivePath("/code")
-                      ? "text-blue-600"
-                      : "text-gray-11 hover:text-gray-12"
-                  }`}
-                  aria-current={isActivePath("/code") ? "page" : undefined}
-                >
-                  <Flex align="center" gap="2">
-                    <Code2 className="h-4 w-4" />
-                    Help
-                  </Flex>
-                </RadixLink>
-              </Flex>
-            </nav>
-
-            {/* Right side: Actions */}
-            <Flex align="center" gap="3" className="shrink-0">
-              {actions}
-              <Tooltip.Root delayDuration={200}>
-                <Tooltip.Trigger asChild>
-                  <Button
-                    size="sm"
-                    variant="default"
-                    onClick={toggleUploadPanel}
-                    aria-controls="layout-upload-panel"
-                    aria-expanded={isUploadOpen}
-                  >
-                    <Upload className="h-4 w-4" />
-                    <Text size="2" className="ml-2">
-                      Upload Seed
-                    </Text>
-                  </Button>
-                </Tooltip.Trigger>
-                <Tooltip.Content side="bottom" sideOffset={5}>
-                  <Text size="2">Upload seed file</Text>
-                </Tooltip.Content>
-              </Tooltip.Root>
-            </Flex>
+            <UploadSeed onUploadSuccess={handleSeedUploadSuccess} />
           </Flex>
         </Box>
-
-        {/* Upload Panel */}
-        {isUploadOpen && (
-          <Box
-            id="layout-upload-panel"
-            ref={uploadPanelRef}
-            role="region"
-            aria-label="Upload seed file"
-            className="bg-blue-50"
-          >
-            <Flex
-              direction="column"
-              gap="3"
-              className={`mx-auto w-full ${maxWidth} px-4 sm:px-6 lg:px-8 py-4`}
-            >
-              {/* Success Message */}
-              {seedUploadSuccess && (
-                <Box className="rounded-md bg-green-50 p-3 border border-green-200">
-                  <Text size="2" className="text-green-800">
-                    Job <strong>{seedUploadSuccess}</strong> created
-                    successfully
-                  </Text>
-                </Box>
-              )}
-
-              <UploadSeed onUploadSuccess={handleSeedUploadSuccess} />
-            </Flex>
-          </Box>
-        )}
-
-        {/* Main content */}
-        <main
-          id="main-content"
-          role="main"
-          className={`mx-auto w-full ${maxWidth} px-4 sm:px-6 lg:px-8`}
-        >
-          {children}
-        </main>
-      </Box>
-    </Tooltip.Provider>
+      )}
+
+      {/* Main content */}
+      <main
+        id="main-content"
+        role="main"
+        className={`mx-auto w-full ${maxWidth} px-4 sm:px-6 lg:px-8`}
+      >
+        {children}
+      </main>
+    </Box>
   );
 }