@ryanfw/prompt-orchestration-pipeline 0.12.0 → 0.13.0

package/src/llm/index.js

@@ -91,6 +91,15 @@ export function calculateCost(provider, model, usage) {
 
 // Core chat function - no metrics handling needed!
 export async function chat(options) {
+  console.log("[llm] chat() called with options:", {
+    provider: options.provider,
+    model: options.model,
+    messageCount: options.messages?.length || 0,
+    hasTemperature: options.temperature !== undefined,
+    hasMaxTokens: options.maxTokens !== undefined,
+    responseFormat: options.responseFormat,
+  });
+
   const {
     provider,
     model,
@@ -103,6 +112,7 @@ export async function chat(options) {
     presencePenalty,
     stop,
     responseFormat,
+    stream = false,
     ...rest
   } = options;
 
@@ -111,27 +121,41 @@ export async function chat(options) {
 
   const available = getAvailableProviders();
 
+  console.log("[llm] Available providers:", available);
+  console.log("[llm] Requested provider:", provider);
+
   if (!available[provider]) {
+    console.error("[llm] Provider not available:", provider);
     throw new Error(`Provider ${provider} not available. Check API keys.`);
   }
 
   const startTime = Date.now();
   const requestId = `req_${Date.now()}_${Math.random().toString(36).substring(7)}`;
 
-  // Default to JSON mode if not specified
-  const finalResponseFormat = responseFormat ?? "json";
-
   // Extract system and user messages
   const systemMsg = messages.find((m) => m.role === "system")?.content || "";
   const userMessages = messages.filter((m) => m.role === "user");
   const userMsg = userMessages.map((m) => m.content).join("\n");
 
+  console.log("[llm] Message analysis:", {
+    hasSystemMessage: !!systemMsg,
+    systemMessageLength: systemMsg.length,
+    userMessageCount: userMessages.length,
+    userMessageLength: userMsg.length,
+    totalMessageLength: systemMsg.length + userMsg.length,
+  });
+
   // DEBUG write_to_file messages to /tmp/messages.log for debugging
   fs.writeFileSync(
     "/tmp/messages.log",
     JSON.stringify({ messages, systemMsg, userMsg, provider, model }, null, 2)
   );
 
+  console.log(
+    "[llm] Emitting llm:request:start event for requestId:",
+    requestId
+  );
+
   // Emit request start event
   llmEvents.emit("llm:request:start", {
     id: requestId,
@@ -142,10 +166,12 @@ export async function chat(options) {
   });
 
   try {
+    console.log("[llm] Starting provider call for:", provider);
     let response;
     let usage;
 
     if (provider === "mock") {
+      console.log("[llm] Using mock provider");
       if (!mockProviderInstance) {
         throw new Error(
           "Mock provider not registered. Call registerMockProvider() first."
@@ -159,6 +185,7 @@ export async function chat(options) {
         maxTokens,
         ...rest,
       });
+      console.log("[llm] Mock provider returned result");
 
       response = {
         content: result.content,
@@ -171,6 +198,7 @@ export async function chat(options) {
         totalTokens: result.usage.total_tokens,
       };
     } else if (provider === "openai") {
+      console.log("[llm] Using OpenAI provider");
       const openaiArgs = {
         messages,
         model: model || "gpt-5-chat-latest",
@@ -178,7 +206,14 @@ export async function chat(options) {
         maxTokens,
         ...rest,
       };
-      openaiArgs.responseFormat = finalResponseFormat;
+      console.log("[llm] OpenAI call parameters:", {
+        model: openaiArgs.model,
+        hasMessages: !!openaiArgs.messages,
+        messageCount: openaiArgs.messages?.length,
+      });
+      if (responseFormat !== undefined) {
+        openaiArgs.responseFormat = responseFormat;
+      }
       if (topP !== undefined) openaiArgs.topP = topP;
       if (frequencyPenalty !== undefined)
         openaiArgs.frequencyPenalty = frequencyPenalty;
@@ -186,7 +221,13 @@ export async function chat(options) {
         openaiArgs.presencePenalty = presencePenalty;
       if (stop !== undefined) openaiArgs.stop = stop;
 
+      console.log("[llm] Calling openaiChat()...");
       const result = await openaiChat(openaiArgs);
+      console.log("[llm] openaiChat() returned:", {
+        hasResult: !!result,
+        hasContent: !!result?.content,
+        hasUsage: !!result?.usage,
+      });
 
       response = {
         content:
@@ -213,22 +254,43 @@ export async function chat(options) {
         };
       }
     } else if (provider === "deepseek") {
+      console.log("[llm] Using DeepSeek provider");
       const deepseekArgs = {
         messages,
-        model: model || "deepseek-reasoner",
+        model: model || MODEL_CONFIG[DEFAULT_MODEL_BY_PROVIDER.deepseek].model,
         temperature,
         maxTokens,
         ...rest,
       };
+      console.log("[llm] DeepSeek call parameters:", {
+        model: deepseekArgs.model,
+        hasMessages: !!deepseekArgs.messages,
+        messageCount: deepseekArgs.messages?.length,
+      });
+      if (stream !== undefined) deepseekArgs.stream = stream;
       if (topP !== undefined) deepseekArgs.topP = topP;
       if (frequencyPenalty !== undefined)
         deepseekArgs.frequencyPenalty = frequencyPenalty;
       if (presencePenalty !== undefined)
         deepseekArgs.presencePenalty = presencePenalty;
       if (stop !== undefined) deepseekArgs.stop = stop;
-      deepseekArgs.responseFormat = finalResponseFormat;
+      if (responseFormat !== undefined) {
+        deepseekArgs.responseFormat = responseFormat;
+      }
 
+      console.log("[llm] Calling deepseekChat()...");
       const result = await deepseekChat(deepseekArgs);
+      console.log("[llm] deepseekChat() returned:", {
+        hasResult: !!result,
+        isStream: typeof result?.[Symbol.asyncIterator] !== "undefined",
+        hasContent: !!result?.content,
+        hasUsage: !!result?.usage,
+      });
+
+      // Streaming mode - return async generator directly
+      if (stream && typeof result?.[Symbol.asyncIterator] !== "undefined") {
+        return result;
+      }
 
       response = {
         content: result.content,
@@ -254,6 +316,7 @@ export async function chat(options) {
         };
       }
     } else if (provider === "anthropic") {
+      console.log("[llm] Using Anthropic provider");
       const defaultAlias = DEFAULT_MODEL_BY_PROVIDER.anthropic;
       const defaultModelConfig = MODEL_CONFIG[defaultAlias];
       const defaultModel = defaultModelConfig?.model;
@@ -265,11 +328,24 @@ export async function chat(options) {
         maxTokens,
         ...rest,
       };
+      console.log("[llm] Anthropic call parameters:", {
+        model: anthropicArgs.model,
+        hasMessages: !!anthropicArgs.messages,
+        messageCount: anthropicArgs.messages?.length,
+      });
       if (topP !== undefined) anthropicArgs.topP = topP;
       if (stop !== undefined) anthropicArgs.stop = stop;
-      anthropicArgs.responseFormat = finalResponseFormat;
+      if (responseFormat !== undefined) {
+        anthropicArgs.responseFormat = responseFormat;
+      }
 
+      console.log("[llm] Calling anthropicChat()...");
       const result = await anthropicChat(anthropicArgs);
+      console.log("[llm] anthropicChat() returned:", {
+        hasResult: !!result,
+        hasContent: !!result?.content,
+        hasUsage: !!result?.usage,
+      });
 
       response = {
         content: result.content,
@@ -296,6 +372,7 @@ export async function chat(options) {
         };
       }
     } else if (provider === "gemini") {
+      console.log("[llm] Using Gemini provider");
       const geminiArgs = {
         messages,
         model: model || "gemini-2.5-flash",
@@ -303,11 +380,24 @@ export async function chat(options) {
         maxTokens,
         ...rest,
       };
+      console.log("[llm] Gemini call parameters:", {
+        model: geminiArgs.model,
+        hasMessages: !!geminiArgs.messages,
+        messageCount: geminiArgs.messages?.length,
+      });
       if (topP !== undefined) geminiArgs.topP = topP;
       if (stop !== undefined) geminiArgs.stop = stop;
-      geminiArgs.responseFormat = finalResponseFormat;
+      if (responseFormat !== undefined) {
+        geminiArgs.responseFormat = responseFormat;
+      }
 
+      console.log("[llm] Calling geminiChat()...");
       const result = await geminiChat(geminiArgs);
+      console.log("[llm] geminiChat() returned:", {
+        hasResult: !!result,
+        hasContent: !!result?.content,
+        hasUsage: !!result?.usage,
+      });
 
       response = {
         content: result.content,
@@ -334,6 +424,7 @@ export async function chat(options) {
         };
       }
     } else if (provider === "zhipu") {
+      console.log("[llm] Using Zhipu provider");
       const defaultAlias = DEFAULT_MODEL_BY_PROVIDER.zhipu;
       const defaultModelConfig = MODEL_CONFIG[defaultAlias];
       const defaultModel = defaultModelConfig?.model;
@@ -345,11 +436,24 @@ export async function chat(options) {
         maxTokens,
         ...rest,
       };
+      console.log("[llm] Zhipu call parameters:", {
+        model: zhipuArgs.model,
+        hasMessages: !!zhipuArgs.messages,
+        messageCount: zhipuArgs.messages?.length,
+      });
       if (topP !== undefined) zhipuArgs.topP = topP;
       if (stop !== undefined) zhipuArgs.stop = stop;
-      zhipuArgs.responseFormat = finalResponseFormat;
+      if (responseFormat !== undefined) {
+        zhipuArgs.responseFormat = responseFormat;
+      }
 
+      console.log("[llm] Calling zhipuChat()...");
       const result = await zhipuChat(zhipuArgs);
+      console.log("[llm] zhipuChat() returned:", {
+        hasResult: !!result,
+        hasContent: !!result?.content,
+        hasUsage: !!result?.usage,
+      });
 
       response = {
         content: result.content,
@@ -376,12 +480,21 @@ export async function chat(options) {
         };
       }
     } else {
+      console.error("[llm] Unknown provider:", provider);
       throw new Error(`Provider ${provider} not yet implemented`);
     }
 
+    console.log("[llm] Processing response from provider:", provider);
+
     const duration = Date.now() - startTime;
     const cost = calculateCost(provider, model, usage);
 
+    console.log("[llm] Request completed:", {
+      duration: `${duration}ms`,
+      cost,
+      usage,
+    });
+
     // Emit success event with metrics
     llmEvents.emit("llm:request:complete", {
       id: requestId,
@@ -402,6 +515,13 @@ export async function chat(options) {
   } catch (error) {
     const duration = Date.now() - startTime;
 
+    console.error("[llm] Error in chat():", {
+      error: error.message,
+      name: error.name,
+      stack: error.stack,
+      duration: `${duration}ms`,
+    });
+
     // Emit error event
     llmEvents.emit("llm:request:error", {
       id: requestId,

package/src/pages/PipelineDetail.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { data, useParams } from "react-router-dom";
-import { Box, Flex, Text, Button } from "@radix-ui/themes";
+import { Box, Flex, Text } from "@radix-ui/themes";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import JobDetail from "../components/JobDetail.jsx";
 import { useJobDetailWithUpdates } from "../ui/client/hooks/useJobDetailWithUpdates.js";
@@ -11,6 +11,7 @@ import { formatCurrency4, formatTokensCompact } from "../utils/formatters.js";
 import { rescanJob } from "../ui/client/api.js";
 import StopJobModal from "../components/ui/StopJobModal.jsx";
 import { stopJob } from "../ui/client/api.js";
+import { Button } from "../components/ui/button.jsx";
 
 export default function PipelineDetail() {
   const { jobId } = useParams();
@@ -257,9 +258,8 @@ export default function PipelineDetail() {
       {costIndicatorWithTooltip}
       {isRunning && (
         <Button
-          size="1"
-          variant="solid"
-          color="red"
+          size="sm"
+          variant="destructive"
           disabled={isStopping}
           onClick={openStopModal}
         >
@@ -267,8 +267,8 @@ export default function PipelineDetail() {
         </Button>
       )}
       <Button
-        size="1"
-        variant="soft"
+        size="sm"
+        variant="outline"
         disabled={isRescanning}
         onClick={handleRescan}
       >

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