@ryanfw/prompt-orchestration-pipeline 0.4.0 → 0.6.0

package/src/pages/PipelineDetail.jsx

@@ -4,6 +4,7 @@ import { Box, Flex, Text } from "@radix-ui/themes";
 import JobDetail from "../components/JobDetail.jsx";
 import { useJobDetailWithUpdates } from "../ui/client/hooks/useJobDetailWithUpdates.js";
 import Layout from "../components/Layout.jsx";
+import PageSubheader from "../components/PageSubheader.jsx";
 import { statusBadge } from "../utils/ui.jsx";
 
 export default function PipelineDetail() {
@@ -12,7 +13,14 @@ export default function PipelineDetail() {
   // Handle missing job ID (undefined/null)
   if (jobId === undefined || jobId === null) {
     return (
-      <Layout title="Pipeline Details" showBackButton={true}>
+      <Layout
+        pageTitle="Pipeline Details"
+        breadcrumbs={[
+          { label: "Home", href: "/" },
+          { label: "Pipeline Details" },
+        ]}
+        showBackButton={true}
+      >
         <Flex align="center" justify="center" className="min-h-64">
           <Box className="text-center">
             <Text size="5" weight="medium" color="red" className="mb-2">
@@ -28,7 +36,14 @@ export default function PipelineDetail() {
 
   if (loading) {
     return (
-      <Layout title="Pipeline Details" showBackButton={true}>
+      <Layout
+        pageTitle="Pipeline Details"
+        breadcrumbs={[
+          { label: "Home", href: "/" },
+          { label: "Pipeline Details" },
+        ]}
+        showBackButton={true}
+      >
         <Flex align="center" justify="center" className="min-h-64">
           <Box className="text-center">
             <Text size="5" weight="medium" className="mb-2">
@@ -42,7 +57,14 @@ export default function PipelineDetail() {
 
   if (error) {
     return (
-      <Layout title="Pipeline Details" showBackButton={true}>
+      <Layout
+        pageTitle="Pipeline Details"
+        breadcrumbs={[
+          { label: "Home", href: "/" },
+          { label: "Pipeline Details" },
+        ]}
+        showBackButton={true}
+      >
         <Flex align="center" justify="center" className="min-h-64">
           <Box className="text-center">
             <Text size="5" weight="medium" color="red" className="mb-2">
@@ -59,7 +81,14 @@ export default function PipelineDetail() {
 
   if (!job) {
     return (
-      <Layout title="Pipeline Details" showBackButton={true}>
+      <Layout
+        pageTitle="Pipeline Details"
+        breadcrumbs={[
+          { label: "Home", href: "/" },
+          { label: "Pipeline Details" },
+        ]}
+        showBackButton={true}
+      >
         <Flex align="center" justify="center" className="min-h-64">
           <Box className="text-center">
             <Text size="5" weight="medium" className="mb-2">
@@ -89,8 +118,15 @@ export default function PipelineDetail() {
       return { tasks: pipelineTasks };
     })();
 
-  // Header actions: job ID and status badge
-  const headerActions = (
+  const pageTitle = job.name || "Pipeline Details";
+  const breadcrumbs = [
+    { label: "Home", href: "/" },
+    { label: "Pipeline Details" },
+    ...(job.name ? [{ label: job.name }] : []),
+  ];
+
+  // Right side content for PageSubheader: job ID and status badge
+  const subheaderRightContent = (
     <Flex align="center" gap="3" className="shrink-0">
       <Text size="2" color="gray">
         ID: {job.id || jobId}
@@ -101,10 +137,13 @@ export default function PipelineDetail() {
 
   return (
     <Layout
-      title={job.name || "Pipeline Details"}
+      pageTitle={pageTitle}
+      breadcrumbs={breadcrumbs}
       showBackButton={true}
-      actions={headerActions}
     >
+      <PageSubheader breadcrumbs={breadcrumbs} maxWidth="max-w-7xl">
+        {subheaderRightContent}
+      </PageSubheader>
       <JobDetail job={job} pipeline={pipeline} />
     </Layout>
   );

package/src/pages/PromptPipelineDashboard.jsx

@@ -2,7 +2,7 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { Box, Flex, Text, Heading, Tabs, Card } from "@radix-ui/themes";
+import { Box, Flex, Text, Heading, Tabs } from "@radix-ui/themes";
 
 import { Progress } from "../components/ui/progress";
 import { useJobListWithUpdates } from "../ui/client/hooks/useJobListWithUpdates";
@@ -12,7 +12,6 @@ import { useTicker } from "../ui/client/hooks/useTicker";
 
 // Referenced components — leave these alone
 import JobTable from "../components/JobTable";
-import UploadSeed from "../components/UploadSeed";
 import Layout from "../components/Layout.jsx";
 
 export default function PromptPipelineDashboard({ isConnected }) {
@@ -55,8 +54,6 @@ export default function PromptPipelineDashboard({ isConnected }) {
     return src.map(adaptJobSummary);
   }, [apiJobs, error]);
   const [activeTab, setActiveTab] = useState("current");
-  const [seedUploadSuccess, setSeedUploadSuccess] = useState(null);
-  const [seedUploadTimer, setSeedUploadTimer] = useState(null);
 
   // Shared ticker for live duration updates
   const now = useTicker(10000);
@@ -111,34 +108,6 @@ export default function PromptPipelineDashboard({ isConnected }) {
     }
   };
 
-  // Handle seed upload success
-  const handleSeedUploadSuccess = ({ jobName }) => {
-    // Clear any existing timer
-    if (seedUploadTimer) {
-      clearTimeout(seedUploadTimer);
-    }
-
-    // Set success message
-    setSeedUploadSuccess(jobName);
-
-    // Auto-clear after exactly 5000 ms
-    const timer = setTimeout(() => {
-      setSeedUploadSuccess(null);
-      setSeedUploadTimer(null);
-    }, 5000);
-
-    setSeedUploadTimer(timer);
-  };
-
-  // Cleanup timer on unmount
-  useEffect(() => {
-    return () => {
-      if (seedUploadTimer) {
-        clearTimeout(seedUploadTimer);
-      }
-    };
-  }, [seedUploadTimer]);
-
   // Header actions for Layout
   const headerActions = runningJobs.length > 0 && (
     <Flex align="center" gap="2" className="text-gray-11">
@@ -154,26 +123,6 @@ export default function PromptPipelineDashboard({ isConnected }) {
 
   return (
     <Layout title="Prompt Pipeline" actions={headerActions}>
-      {/* Upload Seed File Section */}
-      <Card className="mb-6">
-        <Flex direction="column" gap="3">
-          <Heading size="4" weight="medium" className="text-gray-12">
-            Upload Seed File
-          </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>
-          )}
-
-          <UploadSeed onUploadSuccess={handleSeedUploadSuccess} />
-        </Flex>
-      </Card>
-
       {error && (
         <Box className="mb-4 rounded-md bg-yellow-50 p-3 border border-yellow-200">
           <Text size="2" className="text-yellow-800">
@@ -181,7 +130,11 @@ export default function PromptPipelineDashboard({ isConnected }) {
           </Text>
         </Box>
       )}
-      <Tabs.Root value={activeTab} onValueChange={setActiveTab}>
+      <Tabs.Root
+        value={activeTab}
+        onValueChange={setActiveTab}
+        className="mt-4"
+      >
         <Tabs.List aria-label="Job filters">
           <Tabs.Trigger value="current">Current ({currentCount})</Tabs.Trigger>
           <Tabs.Trigger value="errors">Errors ({errorCount})</Tabs.Trigger>

package/src/providers/deepseek.js

@@ -71,9 +71,25 @@ export async function deepseekChat({
       const data = await response.json();
       const content = data.choices[0].message.content;
 
+      // Only try JSON parsing if responseFormat indicates JSON output
+      if (responseFormat?.type === "json_object" || responseFormat === "json") {
+        const parsed = tryParseJSON(content);
+        if (parsed === null && attempt < maxRetries) {
+          // JSON parsing failed, retry
+          lastError = new Error("Failed to parse JSON response");
+          continue;
+        }
+        return {
+          content: parsed,
+          usage: data.usage,
+          raw: data,
+        };
+      }
+
       return {
-        content: tryParseJSON(content),
+        content,
         usage: data.usage,
+        raw: data,
       };
     } catch (error) {
       lastError = error;

package/src/providers/openai.js

@@ -31,7 +31,7 @@ export async function openaiChat({
   temperature,
   maxTokens,
   max_tokens, // Explicitly destructure to prevent it from being in ...rest
-  responseFormat, // { type: 'json_object' } | { json_schema, name } | 'json'
+  responseFormat = "json", // Default to JSON for legacy compatibility
   tools,
   toolChoice,
   seed,

package/src/ui/client/adapters/job-adapter.js

@@ -66,6 +66,8 @@ function normalizeTasks(rawTasks) {
         artifacts: Array.isArray(t && t.artifacts)
           ? t.artifacts.slice()
           : undefined,
+        // Preserve tokenUsage if present
+        ...(t && t.tokenUsage ? { tokenUsage: t.tokenUsage } : {}),
       };
       tasks[name] = taskObj;
     });
@@ -100,6 +102,8 @@ function normalizeTasks(rawTasks) {
         artifacts: Array.isArray(t && t.artifacts)
           ? t.artifacts.slice()
           : undefined,
+        // Preserve tokenUsage if present
+        ...(t && t.tokenUsage ? { tokenUsage: t.tokenUsage } : {}),
       };
     });
     return { tasks, warnings };
@@ -158,7 +162,7 @@ export function adaptJobSummary(apiJob) {
   // Demo-only: read canonical fields strictly
   const id = apiJob.jobId;
   const name = apiJob.title || "";
-  const rawTasks = apiJob.tasksStatus;
+  const rawTasks = apiJob.tasks;
   const location = apiJob.location;
 
   // Job-level stage metadata
@@ -197,6 +201,21 @@ export function adaptJobSummary(apiJob) {
   if (pipeline != null) job.pipeline = pipeline;
   if (pipelineLabel != null) job.pipelineLabel = pipelineLabel;
 
+  // Costs summary from API
+  if (apiJob.costsSummary) {
+    job.costsSummary = {
+      totalTokens: apiJob.costsSummary.totalTokens || 0,
+      totalInputTokens: apiJob.costsSummary.totalInputTokens || 0,
+      totalOutputTokens: apiJob.costsSummary.totalOutputTokens || 0,
+      totalCost: apiJob.costsSummary.totalCost || 0,
+      totalInputCost: apiJob.costsSummary.totalInputCost || 0,
+      totalOutputCost: apiJob.costsSummary.totalOutputCost || 0,
+    };
+    // Add top-level numeric mirrors for convenience
+    job.totalCost = job.costsSummary.totalCost;
+    job.totalTokens = job.costsSummary.totalTokens;
+  }
+
   // Include warnings for debugging
   if (warnings.length > 0) job.__warnings = warnings;
 
@@ -212,7 +231,7 @@ export function adaptJobDetail(apiDetail) {
   // Demo-only: read canonical fields strictly
   const id = apiDetail.jobId;
   const name = apiDetail.title || "";
-  const rawTasks = apiDetail.tasksStatus;
+  const rawTasks = apiDetail.tasks;
   const location = apiDetail.location;
 
   // Job-level stage metadata
@@ -251,6 +270,11 @@ export function adaptJobDetail(apiDetail) {
   if (pipeline != null) detail.pipeline = pipeline;
   if (pipelineLabel != null) detail.pipelineLabel = pipelineLabel;
 
+  // Preserve job detail costs
+  if (apiDetail.costs) {
+    detail.costs = apiDetail.costs;
+  }
+
   // Include warnings for debugging
   if (warnings.length > 0) detail.__warnings = warnings;
 

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

@@ -242,7 +242,6 @@ export function useJobDetailWithUpdates(jobId) {
             status: jobData?.status,
             hasTasks: !!jobData?.tasks,
             taskKeys: jobData?.tasks ? Object.keys(jobData.tasks) : [],
-            hasTasksStatus: !!jobData?.tasksStatus,
           });
           if (mountedRef.current) {
             logger.log("Refetch successful, updating data");

package/src/ui/client/index.css

@@ -2,6 +2,11 @@
 @import "@radix-ui/themes/styles.css" layer(radix);
 @import "tailwindcss";
 
+.radix-themes {
+  --heading-font-family: "Source Sans 3", sans-serif;
+  --body-font-family: "Source Sans 3", sans-serif;
+}
+
 /* Reset and base styles */
 @layer base {
   * {
@@ -22,6 +27,7 @@ body {
   font-family: "Inter", sans-serif;
   line-height: 1.6;
   min-height: 100vh;
+  background-color: #dff2fe;
 }
 
 .container {

package/src/ui/client/index.html

@@ -6,7 +6,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
       rel="stylesheet"
     />
     <title>Prompt Pipeline Dashboard</title>

package/src/ui/client/main.jsx

@@ -16,6 +16,7 @@ import ReactDOM from "react-dom/client";
 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 { Theme } from "@radix-ui/themes";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
@@ -31,6 +32,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
         <Routes>
           <Route path="/" element={<PromptPipelineDashboard />} />
           <Route path="/pipeline/:jobId" element={<PipelineDetail />} />
+          <Route path="/code" element={<Code />} />
         </Routes>
       </BrowserRouter>
     </Theme>