@ryanfw/prompt-orchestration-pipeline 0.11.0 → 0.13.0

package/src/pages/PipelineList.jsx

@@ -0,0 +1,214 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { Box, Flex, Text, Heading, Table } from "@radix-ui/themes";
+import { ChevronRight, Plus } from "lucide-react";
+import Layout from "../components/Layout.jsx";
+import PageSubheader from "../components/PageSubheader.jsx";
+import AddPipelineSidebar from "../components/AddPipelineSidebar.jsx";
+import { Button } from "../components/ui/button.jsx";
+
+/**
+ * PipelineList component displays available pipelines in a table layout
+ *
+ * Fetches pipeline data from /api/pipelines endpoint and handles:
+ * - Loading state during fetch
+ * - Error state for failed requests
+ * - Empty state when no pipelines are available
+ * - Table layout using Radix UI components
+ * - Add pipeline type functionality via sidebar
+ */
+export default function PipelineList() {
+  const [pipelines, setPipelines] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchPipelines = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const response = await fetch("/api/pipelines");
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.message || `HTTP ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (!result.ok) {
+          throw new Error(result.message || "Failed to load pipelines");
+        }
+
+        setPipelines(result.data?.pipelines || []);
+      } catch (err) {
+        setError(err.message || "Failed to load pipelines");
+        setPipelines([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPipelines();
+  }, []);
+
+  const breadcrumbs = [{ label: "Home", href: "/" }, { label: "Pipelines" }];
+
+  const openPipeline = (slug) => {
+    navigate(`/pipelines/${slug}`);
+  };
+
+  // Loading state
+  if (loading) {
+    return (
+      <Layout>
+        <PageSubheader breadcrumbs={breadcrumbs} />
+        <Box>
+          <Box mb="8">
+            <Heading size="6" mb="4">
+              Loading pipeline types...
+            </Heading>
+          </Box>
+        </Box>
+      </Layout>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <Layout>
+        <PageSubheader breadcrumbs={breadcrumbs} />
+        <Box>
+          <Box mb="8">
+            <Heading size="6" mb="4">
+              Failed
+            </Heading>
+            <Flex align="center" justify="center" className="min-h-64">
+              <Box className="text-center">
+                <Text size="2" color="gray" className="mt-2">
+                  {error}
+                </Text>
+              </Box>
+            </Flex>
+          </Box>
+        </Box>
+      </Layout>
+    );
+  }
+
+  // Empty state
+  if (pipelines.length === 0) {
+    return (
+      <Layout>
+        <PageSubheader breadcrumbs={breadcrumbs} />
+        <Box>
+          <Box mb="8">
+            <Heading size="6" mb="4">
+              No pipelines available
+            </Heading>
+            <Flex align="center" justify="center" className="min-h-64">
+              <Box className="text-center">
+                <Text size="2" color="gray" className="mt-2">
+                  Check back later for available pipelines.
+                </Text>
+              </Box>
+            </Flex>
+          </Box>
+        </Box>
+      </Layout>
+    );
+  }
+
+  // Main content with pipeline table
+  return (
+    <Layout>
+      <PageSubheader breadcrumbs={breadcrumbs}>
+        <Button size="md" variant="solid" onClick={() => setSidebarOpen(true)}>
+          <Plus className="h-4 w-4 mr-2" />
+          Add a Pipeline Type
+        </Button>
+      </PageSubheader>
+      <Box>
+        <Box mb="8">
+          <Heading size="6" mb="4">
+            Pipeline Types
+          </Heading>
+
+          <Table.Root radius="none">
+            <Table.Header>
+              <Table.Row>
+                <Table.ColumnHeaderCell>Pipeline Name</Table.ColumnHeaderCell>
+                <Table.ColumnHeaderCell>Description</Table.ColumnHeaderCell>
+                <Table.ColumnHeaderCell className="w-12"></Table.ColumnHeaderCell>
+              </Table.Row>
+            </Table.Header>
+
+            <Table.Body>
+              {pipelines.map((pipeline) => {
+                const pipelineName = pipeline.name;
+                const pipelineSlug = pipeline.slug;
+                const description = pipeline.description || "—";
+
+                return (
+                  <Table.Row
+                    key={pipelineSlug}
+                    className="group cursor-pointer hover:bg-slate-50/50 transition-colors"
+                    onClick={() => openPipeline(pipelineSlug)}
+                    onKeyDown={(e) => {
+                      if (e.key === " ") {
+                        e.preventDefault();
+                        openPipeline(pipelineSlug);
+                      } else if (e.key === "Enter") {
+                        openPipeline(pipelineSlug);
+                      }
+                    }}
+                    tabIndex={0}
+                    aria-label={`Open ${pipelineName} pipeline`}
+                  >
+                    <Table.Cell>
+                      <Flex direction="column" gap="1">
+                        <Text
+                          size="2"
+                          weight="medium"
+                          className="text-slate-900"
+                        >
+                          {pipelineName}
+                        </Text>
+                        <Text size="1" className="text-slate-500">
+                          {pipelineSlug}
+                        </Text>
+                      </Flex>
+                    </Table.Cell>
+
+                    <Table.Cell>
+                      <Text size="2" className="text-slate-700">
+                        {description}
+                      </Text>
+                    </Table.Cell>
+
+                    <Table.Cell>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="opacity-0 group-hover:opacity-100 transition-opacity"
+                        aria-label={`View ${pipelineName} pipeline`}
+                      >
+                        <ChevronRight className="h-4 w-4" />
+                      </Button>
+                    </Table.Cell>
+                  </Table.Row>
+                );
+              })}
+            </Table.Body>
+          </Table.Root>
+        </Box>
+      </Box>
+
+      <AddPipelineSidebar open={sidebarOpen} onOpenChange={setSidebarOpen} />
+    </Layout>
+  );
+}

package/src/pages/PipelineTypeDetail.jsx

@@ -0,0 +1,234 @@
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { Box, Flex, Text } from "@radix-ui/themes";
+import Layout from "../components/Layout.jsx";
+import PageSubheader from "../components/PageSubheader.jsx";
+import { Button } from "../components/ui/button.jsx";
+
+import PipelineDAGGrid from "../components/PipelineDAGGrid.jsx";
+import TaskCreationSidebar from "../components/TaskCreationSidebar.jsx";
+import { AnalysisProgressTray } from "../components/AnalysisProgressTray.jsx";
+import { useAnalysisProgress } from "../ui/client/hooks/useAnalysisProgress.js";
+
+export default function PipelineTypeDetail() {
+  const { slug } = useParams();
+  const [pipeline, setPipeline] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [trayDismissed, setTrayDismissed] = useState(false);
+
+  const { status, startAnalysis, reset, ...progressState } =
+    useAnalysisProgress();
+
+  const handleAnalyze = () => {
+    setTrayDismissed(false);
+    startAnalysis(slug);
+  };
+
+  useEffect(() => {
+    const fetchPipeline = async () => {
+      if (!slug) {
+        setError("No pipeline slug provided");
+        setLoading(false);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        const response = await fetch(
+          `/api/pipelines/${encodeURIComponent(slug)}`
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `Failed to load pipeline: ${response.status}`
+          );
+        }
+
+        const data = await response.json();
+        if (!data.ok) {
+          throw new Error(data.message || "Failed to load pipeline");
+        }
+
+        setPipeline(data.data);
+      } catch (err) {
+        setError(err.message || "Failed to load pipeline");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPipeline();
+  }, [slug]);
+
+  // Handle missing slug
+  if (!slug) {
+    return (
+      <Layout
+        pageTitle="Pipeline Details"
+        breadcrumbs={[
+          { label: "Home", href: "/" },
+          { label: "Pipelines", href: "/pipelines" },
+        ]}
+      >
+        <Flex align="center" justify="center" className="min-h-64">
+          <Box className="text-center">
+            <Text size="5" weight="medium" color="red" className="mb-2">
+              No pipeline slug provided
+            </Text>
+          </Box>
+        </Flex>
+      </Layout>
+    );
+  }
+
+  // Loading state
+  if (loading) {
+    return (
+      <Layout
+        pageTitle="Pipeline Details"
+        breadcrumbs={[
+          { label: "Home", href: "/" },
+          { label: "Pipelines", href: "/pipelines" },
+        ]}
+      >
+        <Flex align="center" justify="center" className="min-h-64">
+          <Box className="text-center">
+            <Text size="5" weight="medium" className="mb-2">
+              Loading pipeline details...
+            </Text>
+          </Box>
+        </Flex>
+      </Layout>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <Layout
+        pageTitle="Pipeline Details"
+        breadcrumbs={[
+          { label: "Home", href: "/" },
+          { label: "Pipelines", href: "/pipelines" },
+        ]}
+      >
+        <Flex align="center" justify="center" className="min-h-64">
+          <Box className="text-center">
+            <Text size="5" weight="medium" color="red" className="mb-2">
+              Failed to load pipeline
+            </Text>
+            <Text size="2" color="gray" className="mt-2">
+              {error}
+            </Text>
+          </Box>
+        </Flex>
+      </Layout>
+    );
+  }
+
+  // No pipeline data
+  if (!pipeline) {
+    return (
+      <Layout
+        pageTitle="Pipeline Details"
+        breadcrumbs={[
+          { label: "Home", href: "/" },
+          { label: "Pipelines", href: "/pipelines" },
+        ]}
+      >
+        <Flex align="center" justify="center" className="min-h-64">
+          <Box className="text-center">
+            <Text size="5" weight="medium" className="mb-2">
+              Pipeline not found
+            </Text>
+          </Box>
+        </Flex>
+      </Layout>
+    );
+  }
+
+  const pageTitle = pipeline.name || "Pipeline Details";
+  const breadcrumbs = [
+    { label: "Home", href: "/" },
+    { label: "Pipelines", href: "/pipelines" },
+    { label: pipeline.name || slug },
+  ];
+
+  return (
+    <Layout pageTitle={pageTitle} breadcrumbs={breadcrumbs}>
+      <PageSubheader breadcrumbs={breadcrumbs} maxWidth="max-w-7xl">
+        <Flex gap="3" align="center">
+          <Text size="2" color="gray">
+            Slug: {slug}
+          </Text>
+          <Button
+            variant="solid"
+            size="md"
+            onClick={() => setSidebarOpen(true)}
+          >
+            Add Task
+          </Button>
+          <Button
+            variant="outline"
+            size="md"
+            onClick={handleAnalyze}
+            disabled={status === "connecting" || status === "running"}
+          >
+            Analyze Pipeline
+          </Button>
+        </Flex>
+      </PageSubheader>
+
+      {/* Pipeline description */}
+      {pipeline.description && (
+        <Box className="mb-6">
+          <Text size="2" color="gray" className="leading-relaxed">
+            {pipeline.description}
+          </Text>
+        </Box>
+      )}
+
+      {/* Pipeline DAG - will be implemented in step 5 */}
+      <Box className="bg-gray-50 rounded-lg p-4">
+        <Text size="3" weight="medium" className="mb-4">
+          Pipeline Tasks
+        </Text>
+
+        {pipeline.tasks && pipeline.tasks.length > 0 ? (
+          <Box>
+            <Text size="2" color="gray" className="mb-4">
+              {pipeline.tasks.length} task
+              {pipeline.tasks.length !== 1 ? "s" : ""} defined
+            </Text>
+
+            <PipelineDAGGrid items={pipeline.tasks} pipelineSlug={slug} />
+          </Box>
+        ) : (
+          <Box className="mb-4">
+            <Text size="2" color="gray">
+              No tasks defined for this pipeline
+            </Text>
+          </Box>
+        )}
+      </Box>
+
+      <TaskCreationSidebar
+        isOpen={sidebarOpen}
+        onClose={() => setSidebarOpen(false)}
+        pipelineSlug={slug}
+      />
+
+      {!trayDismissed && (
+        <AnalysisProgressTray
+          {...progressState}
+          status={status}
+          pipelineSlug={slug}
+          onDismiss={() => setTrayDismissed(true)}
+        />
+      )}
+    </Layout>
+  );
+}

package/src/pages/PromptPipelineDashboard.jsx

@@ -7,24 +7,23 @@ import { Box, Flex, Text, Tabs } from "@radix-ui/themes";
 import { Progress } from "../components/ui/progress";
 import { useJobListWithUpdates } from "../ui/client/hooks/useJobListWithUpdates";
 import { adaptJobSummary } from "../ui/client/adapters/job-adapter";
-import { TaskState, JobStatus } from "../config/statuses.js";
 
 // Referenced components — leave these alone
 import JobTable from "../components/JobTable";
 import Layout from "../components/Layout.jsx";
 
-export default function PromptPipelineDashboard({ isConnected }) {
+export default function PromptPipelineDashboard() {
   const navigate = useNavigate();
   const hookResult = useJobListWithUpdates();
 
   if (
+    /* eslint-disable-next-line no-undef */
     process.env.NODE_ENV === "test" &&
     (hookResult === undefined ||
       hookResult === null ||
       typeof hookResult !== "object" ||
       Array.isArray(hookResult))
   ) {
-    // eslint-disable-next-line no-console
     console.error(
       "[PromptPipelineDashboard] useJobListWithUpdates returned unexpected value",
       {
@@ -39,7 +38,7 @@ export default function PromptPipelineDashboard({ isConnected }) {
     );
   }
 
-  const { data: apiJobs, loading, error, connectionStatus } = hookResult;
+  const { data: apiJobs, error } = hookResult;
 
   const jobs = useMemo(() => {
     const src = Array.isArray(apiJobs) ? apiJobs : [];
@@ -57,26 +56,26 @@ export default function PromptPipelineDashboard({ isConnected }) {
   // Shared ticker for live duration updates - removed useTicker
 
   const errorCount = useMemo(
-    () => jobs.filter((j) => j.status === TaskState.FAILED).length,
+    () => jobs.filter((j) => j.displayCategory === "errors").length,
     [jobs]
   );
   const currentCount = useMemo(
-    () => jobs.filter((j) => j.status === TaskState.RUNNING).length,
+    () => jobs.filter((j) => j.displayCategory === "current").length,
     [jobs]
   );
   const completedCount = useMemo(
-    () => jobs.filter((j) => j.status === JobStatus.COMPLETE).length,
+    () => jobs.filter((j) => j.displayCategory === "complete").length,
     [jobs]
   );
 
   const filteredJobs = useMemo(() => {
     switch (activeTab) {
       case "current":
-        return jobs.filter((j) => j.status === TaskState.RUNNING);
+        return jobs.filter((j) => j.displayCategory === "current");
       case "errors":
-        return jobs.filter((j) => j.status === TaskState.FAILED);
+        return jobs.filter((j) => j.displayCategory === "errors");
       case "complete":
-        return jobs.filter((j) => j.status === JobStatus.COMPLETE);
+        return jobs.filter((j) => j.displayCategory === "complete");
       default:
         return [];
     }
@@ -86,7 +85,7 @@ export default function PromptPipelineDashboard({ isConnected }) {
 
   // Aggregate progress for currently running jobs (for a subtle top progress bar)
   const runningJobs = useMemo(
-    () => jobs.filter((j) => j.status === TaskState.RUNNING),
+    () => jobs.filter((j) => j.displayCategory === "current"),
     [jobs]
   );
   const aggregateProgress = useMemo(() => {

package/src/providers/deepseek.js

@@ -12,20 +12,24 @@ export async function deepseekChat({
   model = "deepseek-chat",
   temperature = 0.7,
   maxTokens,
-  responseFormat,
+  responseFormat = "json_object",
   topP,
   frequencyPenalty,
   presencePenalty,
   stop,
+  stream = false,
   maxRetries = 3,
 }) {
-  // Enforce JSON mode - reject calls without proper JSON responseFormat
-  ensureJsonResponseFormat(responseFormat, "DeepSeek");
-
   if (!process.env.DEEPSEEK_API_KEY) {
     throw new Error("DeepSeek API key not configured");
   }
 
+  // Determine if JSON mode is requested
+  const isJsonMode =
+    responseFormat?.type === "json_object" ||
+    responseFormat?.type === "json_schema" ||
+    responseFormat === "json";
+
   const { systemMsg, userMsg } = extractMessages(messages);
 
   let lastError;
@@ -47,10 +51,11 @@ export async function deepseekChat({
         frequency_penalty: frequencyPenalty,
         presence_penalty: presencePenalty,
         stop,
+        stream,
       };
 
-      // Add response format - this is now required for all calls
-      if (responseFormat?.type === "json_object" || responseFormat === "json") {
+      // Add response format only for JSON mode (streaming uses text mode)
+      if (isJsonMode && !stream) {
         requestBody.response_format = { type: "json_object" };
       }
 
@@ -73,22 +78,35 @@ export async function deepseekChat({
         throw { status: response.status, ...error };
       }
 
+      // Streaming mode - return async generator for real-time chunks
+      if (stream) {
+        return createStreamGenerator(response.body);
+      }
+
       const data = await response.json();
       const content = data.choices[0].message.content;
 
-      // Parse JSON - this is now required for all calls
-      const parsed = tryParseJSON(content);
-      if (!parsed) {
-        throw new ProviderJsonParseError(
-          "DeepSeek",
-          model,
-          content.substring(0, 200),
-          "Failed to parse JSON response from DeepSeek API"
-        );
+      // Parse JSON only in JSON mode; return raw string for text mode
+      if (isJsonMode) {
+        const parsed = tryParseJSON(content);
+        if (!parsed) {
+          throw new ProviderJsonParseError(
+            "DeepSeek",
+            model,
+            content.substring(0, 200),
+            "Failed to parse JSON response from DeepSeek API"
+          );
+        }
+        return {
+          content: parsed,
+          usage: data.usage,
+          raw: data,
+        };
       }
 
+      // Text mode - return raw string
       return {
-        content: parsed,
+        content,
         usage: data.usage,
         raw: data,
       };
@@ -107,3 +125,45 @@ export async function deepseekChat({
 
   throw lastError || new Error(`Failed after ${maxRetries + 1} attempts`);
 }
+
+/**
+ * Create async generator for streaming DeepSeek responses.
+ * DeepSeek uses Server-Sent Events format with "data:" prefix.
+ */
+async function* createStreamGenerator(stream) {
+  const decoder = new TextDecoder();
+  const reader = stream.getReader();
+  let buffer = "";
+
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = lines.pop(); // Keep incomplete line
+
+      for (const line of lines) {
+        if (line.startsWith("data: ")) {
+          const data = line.slice(6);
+          if (data === "[DONE]") continue;
+
+          try {
+            const parsed = JSON.parse(data);
+            const content = parsed.choices?.[0]?.delta?.content;
+            // Skip only truly empty chunks; preserve whitespace-only content
+            if (content !== undefined && content !== null && content !== "") {
+              yield { content };
+            }
+          } catch (e) {
+            // Skip malformed JSON
+            console.warn("[deepseek] Failed to parse stream chunk:", e);
+          }
+        }
+      }
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}