@ryanfw/prompt-orchestration-pipeline 0.11.0 → 0.13.0

package/src/ui/client/api.js

@@ -3,12 +3,14 @@
  */
 
 /**
- * Restart a job with clean-slate mode
+ * Restart a job with clean-slate mode or from a specific task
  *
  * @param {string} jobId - The ID of the job to restart
  * @param {Object} opts - Options object
- * @param {Object} opts.options - Additional options for the restart
- * @param {boolean} opts.options.clearTokenUsage - Whether to clear token usage (default: true)
+ * @param {string} [opts.fromTask] - Task ID to restart from (inclusive)
+ * @param {boolean} [opts.singleTask] - Whether to run only the target task and then stop
+ * @param {Object} [opts.options] - Additional options for the restart
+ * @param {boolean} [opts.options.clearTokenUsage=true] - Whether to clear token usage
  * @returns {Promise<Object>} Parsed JSON response from the server
  * @throws {Object} Structured error object with { code, message } for non-2xx responses
  */
@@ -19,8 +21,16 @@ export async function restartJob(jobId, opts = {}) {
   };
 
   const requestBody = opts.fromTask
-    ? { fromTask: opts.fromTask, options }
-    : { mode: "clean-slate", options };
+    ? {
+        fromTask: opts.fromTask,
+        options,
+        ...(opts.singleTask !== undefined && { singleTask: opts.singleTask }),
+      }
+    : {
+        mode: "clean-slate",
+        options,
+        ...(opts.singleTask !== undefined && { singleTask: opts.singleTask }),
+      };
 
   try {
     const response = await fetch(
@@ -67,6 +77,164 @@ export async function restartJob(jobId, opts = {}) {
   }
 }
 
+/**
+ * Rescan a job to synchronize tasks with the pipeline definition, detecting both added and removed tasks.
+ *
+ * @param {string} jobId - The ID of the job to rescan
+ * @returns {Promise<Object>} Parsed JSON response from the server
+ * @throws {Object} Structured error object with { code, message } for non-2xx responses
+ */
+export async function rescanJob(jobId) {
+  try {
+    const response = await fetch(
+      `/api/jobs/${encodeURIComponent(jobId)}/rescan`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+
+    if (!response.ok) {
+      // Try to parse error response, fall back to status text if parsing fails
+      let errorData;
+      try {
+        errorData = await response.json();
+      } catch {
+        errorData = { message: response.statusText };
+      }
+
+      // Throw structured error with code and message
+      throw {
+        code: errorData.code || getErrorCodeFromStatus(response.status),
+        message:
+          errorData.message || getErrorMessageFromStatus(response.status),
+        status: response.status,
+      };
+    }
+
+    // Return parsed JSON for successful responses
+    return await response.json();
+  } catch (error) {
+    // Re-throw structured errors as-is
+    if (error.code && error.message) {
+      throw error;
+    }
+
+    // Handle network errors or other unexpected errors
+    throw {
+      code: "network_error",
+      message: error.message || "Failed to connect to server",
+    };
+  }
+}
+
+/**
+ * Start a specific pending task for a job that is not actively running
+ *
+ * @param {string} jobId - The ID of the job
+ * @param {string} taskId - The ID of the task to start
+ * @returns {Promise<Object>} Parsed JSON response from the server
+ * @throws {Object} Structured error object with { code, message } for non-2xx responses
+ */
+export async function startTask(jobId, taskId) {
+  try {
+    const response = await fetch(
+      `/api/jobs/${encodeURIComponent(jobId)}/tasks/${encodeURIComponent(taskId)}/start`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+
+    if (!response.ok) {
+      // Try to parse error response, fall back to status text if parsing fails
+      let errorData;
+      try {
+        errorData = await response.json();
+      } catch {
+        errorData = { message: response.statusText };
+      }
+
+      // Throw structured error with code and message
+      throw {
+        code: errorData.code || getErrorCodeFromStatus(response.status),
+        message: getStartTaskErrorMessage(errorData, response.status),
+        status: response.status,
+      };
+    }
+
+    // Return parsed JSON for successful responses
+    return await response.json();
+  } catch (error) {
+    // Re-throw structured errors as-is
+    if (error.code && error.message) {
+      throw error;
+    }
+
+    // Handle network errors or other unexpected errors
+    throw {
+      code: "network_error",
+      message: error.message || "Failed to connect to server",
+    };
+  }
+}
+
+/**
+ * Stop a running job's pipeline
+ *
+ * @param {string} jobId - The ID of the job to stop
+ * @returns {Promise<Object>} Parsed JSON response from the server
+ * @throws {Object} Structured error object with { code, message } for non-2xx responses
+ */
+export async function stopJob(jobId) {
+  try {
+    const response = await fetch(
+      `/api/jobs/${encodeURIComponent(jobId)}/stop`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+
+    if (!response.ok) {
+      // Try to parse error response, fall back to status text if parsing fails
+      let errorData;
+      try {
+        errorData = await response.json();
+      } catch {
+        errorData = { message: response.statusText };
+      }
+
+      // Throw structured error with code and message
+      throw {
+        code: errorData.code || getErrorCodeFromStatus(response.status),
+        message: getStopErrorMessage(errorData, response.status),
+        status: response.status,
+      };
+    }
+
+    // Return parsed JSON for successful responses
+    return await response.json();
+  } catch (error) {
+    // Re-throw structured errors as-is
+    if (error.code && error.message) {
+      throw error;
+    }
+
+    // Handle network errors or other unexpected errors
+    throw {
+      code: "network_error",
+      message: error.message || "Failed to connect to server",
+    };
+  }
+}
+
 /**
  * Map HTTP status codes to error codes for structured error handling
  */
@@ -108,9 +276,6 @@ function getRestartErrorMessage(errorData, status) {
     if (errorData.code === "job_running") {
       return "Job is currently running; restart is unavailable.";
     }
-    if (errorData.code === "unsupported_lifecycle") {
-      return "Job must be in current to restart.";
-    }
     if (errorData.message?.includes("job_running")) {
       return "Job is currently running; restart is unavailable.";
     }
@@ -132,3 +297,63 @@ function getRestartErrorMessage(errorData, status) {
   // Fall back to provided message or default
   return errorData.message || "Failed to restart job.";
 }
+
+/**
+ * Get specific error message from error response for start task functionality
+ */
+function getStartTaskErrorMessage(errorData, status) {
+  // Handle specific 409 conflict errors
+  if (status === 409) {
+    if (errorData.code === "job_running") {
+      return "Job is currently running; start is unavailable.";
+    }
+    if (errorData.code === "dependencies_not_satisfied") {
+      return "Dependencies not satisfied for task.";
+    }
+    if (errorData.code === "unsupported_lifecycle") {
+      return "Job must be in current to start a task.";
+    }
+    return "Request conflict.";
+  }
+
+  // Handle 404 errors
+  if (status === 404) {
+    return "Job not found.";
+  }
+
+  // Handle 400 errors
+  if (status === 400) {
+    return errorData.message || "Bad request";
+  }
+
+  // Handle 500 errors
+  if (status === 500) {
+    return "Internal server error";
+  }
+
+  // Fall back to provided message or default
+  return errorData.message || "Failed to start task.";
+}
+
+/**
+ * Get specific error message from error response for stop functionality
+ */
+function getStopErrorMessage(errorData, status) {
+  // Handle 404 errors
+  if (status === 404) {
+    return "Job not found.";
+  }
+
+  // Handle 409 errors
+  if (status === 409) {
+    return errorData.message || "Job stop is already in progress.";
+  }
+
+  // Handle 500 errors
+  if (status === 500) {
+    return "Internal server error";
+  }
+
+  // Fall back to provided message or default
+  return errorData.message || `Request failed with status ${status}`;
+}

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/hooks/useJobList.js

@@ -20,7 +20,20 @@ export function useJobList() {
         setData(null);
       } else {
         const json = await res.json();
-        setData(json);
+        if (json && typeof json === "object" && "ok" in json) {
+          if (json.ok && Array.isArray(json.data)) {
+            setData(json.data);
+          } else if (!json.ok) {
+            setError({ code: json.code, message: json.message });
+            setData(null);
+          } else {
+            // Fallback: data is not an array; treat as empty to avoid crashes
+            setData([]);
+          }
+        } else {
+          // Legacy path: response is already an array
+          setData(Array.isArray(json) ? json : []);
+        }
       }
     } catch (err) {
       if (err.name === "AbortError") {

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 };
+}