@ryanfw/prompt-orchestration-pipeline 0.12.0 → 0.13.0

package/src/task-analysis/parser.js

@@ -0,0 +1,28 @@
+import { createRequire } from "node:module";
+const require = createRequire(import.meta.url);
+const parser = require("@babel/parser");
+
+/**
+ * Parse task source code into a Babel AST.
+ *
+ * @param {string} code - The source code to parse
+ * @returns {import("@babel/types").File} The parsed AST
+ * @throws {Error} If parsing fails, includes syntax error location and message
+ */
+export function parseTaskSource(code) {
+  try {
+    const ast = parser.parse(code, {
+      sourceType: "module",
+      plugins: ["jsx"],
+    });
+    return ast;
+  } catch (error) {
+    const loc = error.loc
+      ? `line ${error.loc.line}, column ${error.loc.column}`
+      : "unknown location";
+    throw new Error(
+      `Failed to parse task source code at ${loc}: ${error.message}`,
+      { cause: error }
+    );
+  }
+}

package/src/task-analysis/utils/ast.js

@@ -0,0 +1,43 @@
+/**
+ * Check if a path is inside a try/catch block.
+ *
+ * @param {import("@babel/traverse").NodePath} path - The node path to check
+ * @returns {boolean} True if inside try/catch, false otherwise
+ */
+export function isInsideTryCatch(path) {
+  return path.findParent((p) => p.isTryStatement()) !== null;
+}
+
+/**
+ * Get the stage name by finding the nearest exported function.
+ *
+ * Walks up the AST to find the parent ExportNamedDeclaration and returns
+ * the exported identifier name.
+ *
+ * @param {import("@babel/traverse").NodePath} path - The node path to start from
+ * @returns {string | null} The stage name or null if not in exported function
+ */
+export function getStageName(path) {
+  const exportPath = path.findParent((p) => p.isExportNamedDeclaration());
+
+  if (!exportPath) {
+    return null;
+  }
+
+  const declaration = exportPath.node.declaration;
+
+  // Handle: export function name() {}
+  if (declaration?.type === "FunctionDeclaration") {
+    return declaration.id?.name ?? null;
+  }
+
+  // Handle: export const name = () => {}
+  if (declaration?.type === "VariableDeclaration") {
+    const declarator = declaration.declarations[0];
+    if (declarator?.id?.type === "Identifier") {
+      return declarator.id.name;
+    }
+  }
+
+  return null;
+}

package/src/ui/client/hooks/useAnalysisProgress.js

@@ -0,0 +1,145 @@
+import { useState, useRef, useCallback } from "react";
+import { fetchSSE } from "../sse-fetch.js";
+
+const initialState = {
+  status: "idle",
+  pipelineSlug: null,
+  totalTasks: 0,
+  completedTasks: 0,
+  totalArtifacts: 0,
+  completedArtifacts: 0,
+  currentTask: null,
+  currentArtifact: null,
+  error: null,
+};
+
+/**
+ * useAnalysisProgress - Hook for managing pipeline analysis progress via SSE
+ *
+ * Provides state and controls for triggering pipeline analysis with real-time
+ * progress updates via Server-Sent Events.
+ *
+ * @returns {Object} { ...state, startAnalysis, reset }
+ */
+export function useAnalysisProgress() {
+  const [state, setState] = useState(initialState);
+  const cancelRef = useRef(null);
+
+  const reset = useCallback(() => {
+    if (cancelRef.current) {
+      cancelRef.current();
+      cancelRef.current = null;
+    }
+    setState(initialState);
+  }, []);
+
+  const handleEvent = useCallback((event, data) => {
+    switch (event) {
+      case "started":
+        setState((prev) => ({
+          ...prev,
+          status: "running",
+          pipelineSlug: data.pipelineSlug || prev.pipelineSlug,
+          totalTasks: data.totalTasks || 0,
+          totalArtifacts: data.totalArtifacts || 0,
+        }));
+        break;
+
+      case "task:start":
+        setState((prev) => ({
+          ...prev,
+          currentTask: data.taskId || null,
+        }));
+        break;
+
+      case "artifact:start":
+        setState((prev) => ({
+          ...prev,
+          currentArtifact: data.artifactName || null,
+        }));
+        break;
+
+      case "artifact:complete":
+        setState((prev) => ({
+          ...prev,
+          completedArtifacts: prev.completedArtifacts + 1,
+        }));
+        break;
+
+      case "task:complete":
+        setState((prev) => ({
+          ...prev,
+          completedTasks: prev.completedTasks + 1,
+          currentArtifact: null,
+        }));
+        break;
+
+      case "complete":
+        setState((prev) => ({
+          ...prev,
+          status: "complete",
+          currentTask: null,
+          currentArtifact: null,
+        }));
+        if (cancelRef.current) {
+          cancelRef.current = null;
+        }
+        break;
+
+      case "error":
+        setState((prev) => ({
+          ...prev,
+          status: "error",
+          error: data.message || "Unknown error",
+        }));
+        if (cancelRef.current) {
+          cancelRef.current = null;
+        }
+        break;
+
+      default:
+        console.warn("Unknown SSE event:", event);
+    }
+  }, []);
+
+  const startAnalysis = useCallback(
+    async (pipelineSlug) => {
+      // Reset previous state
+      if (cancelRef.current) {
+        cancelRef.current();
+      }
+
+      setState({
+        ...initialState,
+        status: "connecting",
+        pipelineSlug,
+      });
+
+      const url = `/api/pipelines/${encodeURIComponent(pipelineSlug)}/analyze`;
+
+      const sse = fetchSSE(
+        url,
+        {},
+        handleEvent,
+        // Error handler for HTTP errors
+        (errorData) => {
+          setState((prev) => ({
+            ...prev,
+            status: "error",
+            error:
+              errorData.message ||
+              `HTTP ${errorData.status || "error"}: ${errorData.statusText || "Unknown error"}`,
+          }));
+        }
+      );
+      cancelRef.current = sse.cancel;
+    },
+    [handleEvent]
+  );
+
+  return {
+    ...state,
+    startAnalysis,
+    reset,
+  };
+}

package/src/ui/client/index.css

@@ -2,6 +2,55 @@
 @import "@radix-ui/themes/styles.css" layer(radix);
 @import "tailwindcss";
 
+/* Steel Terminal Theme - CSS Variables */
+:root {
+  /* Base colors */
+  --background: 30 5% 97%; /* Soft warm gray */
+  --foreground: 210 15% 15%; /* Deep slate */
+  --card: 0 0% 100%; /* Pure white */
+  --card-foreground: 210 15% 15%; /* Deep slate */
+  --popover: 0 0% 100%; /* Pure white */
+  --popover-foreground: 210 15% 15%; /* Deep slate */
+
+  /* Primary colors - Indigo for primary actions with clear active state */
+  --primary: 243deg 75% 59%; /* #4f46e5 - indigo-600 */
+  --primary-foreground: 0deg 0% 100%; /* #ffffff */
+  --primary-hover: 243deg 77% 49%; /* #4338ca - indigo-700 */
+
+  /* Secondary colors - For outline buttons */
+  --secondary: 210deg 20% 98%; /* #f8fafc - slate-50 */
+  --secondary-foreground: 243deg 75% 30%; /* #312e81 - indigo-950 */
+
+  /* Destructive colors - For danger actions */
+  --destructive: 0deg 84% 60%; /* #dc2626 - red-600 */
+  --destructive-foreground: 0deg 0% 100%; /* #ffffff */
+
+  /* Muted colors - For disabled/subtle states */
+  --muted: 210deg 40% 96%; /* #f1f5f9 - slate-100 */
+  --muted-foreground: 243deg 50% 45%; /* #6366f1 - indigo-500 */
+
+  /* Accent colors - For highlights */
+  --accent: 210deg 40% 96%; /* #f1f5f9 - slate-100 */
+  --accent-foreground: 243deg 75% 59%; /* #4f46e5 - indigo-600 */
+
+  /* Border and input colors */
+  --border: 214deg 32% 91%; /* #e2e8f0 - slate-200 */
+  --input: 214deg 32% 91%; /* #e2e8f0 - slate-200 */
+
+  /* Ring - For focus states */
+  --ring: 243deg 75% 59%; /* #4f46e5 - indigo-600 */
+
+  /* Status colors */
+  --success: 142deg 76% 36%; /* #16a34a - green-600 */
+  --success-foreground: 0deg 0% 100%;
+  --warning: 38deg 92% 50%; /* #ca8a04 - yellow-600 */
+  --warning-foreground: 0deg 0% 100%;
+  --error: 0deg 84% 60%; /* #dc2626 - red-600 */
+  --error-foreground: 0deg 0% 100%;
+  --info: 215deg 90% 52%; /* #0284c7 - sky-600 */
+  --info-foreground: 0deg 0% 100%;
+}
+
 .radix-themes {
   --heading-font-family: "Source Sans 3", sans-serif;
   --body-font-family: "Source Sans 3", sans-serif;
@@ -44,3 +93,18 @@ body {
   margin: 0 auto;
   padding: 2rem;
 }
+
+/* Bouncing wave animation for typing indicators */
+@keyframes bounce-wave {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+.animate-bounce-wave {
+  animation: bounce-wave 0.6s ease-in-out infinite;
+}

package/src/ui/client/main.jsx

@@ -17,6 +17,8 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import PromptPipelineDashboard from "@/pages/PromptPipelineDashboard.jsx";
 import PipelineDetail from "@/pages/PipelineDetail.jsx";
 import Code from "@/pages/Code.jsx";
+import PipelineList from "@/pages/PipelineList.jsx";
+import PipelineTypeDetail from "@/pages/PipelineTypeDetail.jsx";
 import { Theme } from "@radix-ui/themes";
 import { ToastProvider } from "@/components/ui/toast.jsx";
 
@@ -34,6 +36,8 @@ ReactDOM.createRoot(document.getElementById("root")).render(
           <Routes>
             <Route path="/" element={<PromptPipelineDashboard />} />
             <Route path="/pipeline/:jobId" element={<PipelineDetail />} />
+            <Route path="/pipelines" element={<PipelineList />} />
+            <Route path="/pipelines/:slug" element={<PipelineTypeDetail />} />
             <Route path="/code" element={<Code />} />
           </Routes>
         </BrowserRouter>

package/src/ui/client/sse-fetch.js

@@ -0,0 +1,120 @@
+/**
+ * Parse Server-Sent Events from a fetch response stream.
+ * Supports POST requests (unlike native EventSource).
+ *
+ * @param {string} url - The URL to fetch
+ * @param {RequestInit} options - Fetch options (method defaults to POST)
+ * @param {function} onEvent - Callback for each SSE event: (eventName, parsedData) => void
+ * @param {function} onError - Callback for HTTP errors: (errorData) => void
+ * @returns {{ cancel: () => void }} Object with cancel method to abort the fetch
+ */
+export function fetchSSE(url, options = {}, onEvent, onError) {
+  if (typeof onEvent !== "function") {
+    throw new Error("onEvent callback is required");
+  }
+
+  const controller = new AbortController();
+  const requestOptions = {
+    method: "POST",
+    ...options,
+    signal: controller.signal,
+  };
+
+  fetch(url, requestOptions)
+    .then(async (response) => {
+      // Handle HTTP errors before attempting to read stream
+      if (!response.ok) {
+        let errorData = {};
+        try {
+          errorData = await response.json();
+        } catch {
+          // If response isn't JSON, just use status text
+          errorData = {
+            ok: false,
+            code: "http_error",
+            message: response.statusText,
+            status: response.status,
+          };
+        }
+        if (typeof onError === "function") {
+          onError(errorData);
+        } else {
+          console.error(`[sse-fetch] HTTP ${response.status}:`, errorData);
+        }
+        return;
+      }
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const events = buffer.split("\n\n");
+
+        // Keep the last partial event in the buffer
+        buffer = events.pop();
+
+        for (const eventText of events) {
+          if (!eventText.trim()) continue;
+
+          const event = parseSSEEvent(eventText);
+          if (event) {
+            onEvent(event.type, event.data);
+          }
+        }
+      }
+
+      // Process any remaining content in buffer
+      if (buffer.trim()) {
+        const event = parseSSEEvent(buffer);
+        if (event) {
+          onEvent(event.type, event.data);
+        }
+      }
+    })
+    .catch((error) => {
+      if (error.name === "AbortError") {
+        return; // Expected when cancel() is called
+      }
+      console.error("[sse-fetch] Error:", error);
+    });
+
+  return {
+    cancel: () => controller.abort(),
+  };
+}
+
+/**
+ * Parse a single SSE event string.
+ *
+ * @param {string} eventText - The raw SSE event text
+ * @returns {{ type: string, data: object }|null} Parsed event or null if invalid
+ */
+function parseSSEEvent(eventText) {
+  let type = null;
+  let data = null;
+
+  for (const line of eventText.split("\n")) {
+    const trimmedLine = line.trim();
+    if (trimmedLine.startsWith("event:")) {
+      type = trimmedLine.slice(6).trim();
+    } else if (trimmedLine.startsWith("data:")) {
+      const dataStr = trimmedLine.slice(5).trim();
+      try {
+        data = JSON.parse(dataStr);
+      } catch {
+        console.error("[sse-fetch] Failed to parse data:", dataStr);
+      }
+    }
+  }
+
+  if (!type || data === null) {
+    return null;
+  }
+
+  return { type, data };
+}