@ryanfw/prompt-orchestration-pipeline 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ryanfw/prompt-orchestration-pipeline",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "A Prompt-orchestration pipeline (POP) is a framework for building, running, and experimenting with complex chains of LLM tasks.",
   "type": "module",
   "main": "src/ui/server.js",

package/src/components/JobCard.jsx

@@ -21,7 +21,7 @@ export default function JobCard({
     : 0;
   const totalCompleted = countCompleted(job);
   const hasValidId = Boolean(job.id);
-  const jobTitle = job.title || job.name; // Fallback for backward compatibility
+  const jobTitle = job.title;
 
   return (
     <Card

package/src/components/JobDetail.jsx

@@ -6,6 +6,25 @@ import DAGGrid from "./DAGGrid.jsx";
 import { computeDagItems, computeActiveIndex } from "../utils/dag.js";
 import { getTaskFilesForTask } from "../utils/task-files.js";
 
+// Local helpers for formatting costs and tokens
+function formatCurrency4(x) {
+  if (typeof x !== "number" || x === 0) return "$0.0000";
+  const formatted = x.toFixed(4);
+  // Trim trailing zeros and unnecessary decimal point
+  return `$${formatted.replace(/\.?0+$/, "")}`;
+}
+
+function formatTokensCompact(n) {
+  if (typeof n !== "number" || n === 0) return "0 tok";
+
+  if (n >= 1000000) {
+    return `${(n / 1000000).toFixed(1).replace(/\.0$/, "")}M tokens`;
+  } else if (n >= 1000) {
+    return `${(n / 1000).toFixed(1).replace(/\.0$/, "")}k tokens`;
+  }
+  return `${n} tokens`;
+}
+
 export default function JobDetail({ job, pipeline, onClose, onResume }) {
   const now = useTicker(1000);
   const [resumeFrom, setResumeFrom] = useState(
@@ -16,16 +35,6 @@ export default function JobDetail({ job, pipeline, onClose, onResume }) {
       : ""
   );
 
-  useEffect(() => {
-    setResumeFrom(
-      pipeline?.tasks?.[0]
-        ? typeof pipeline.tasks[0] === "string"
-          ? pipeline.tasks[0]
-          : (pipeline.tasks[0].id ?? pipeline.tasks[0].name ?? "")
-        : ""
-    );
-  }, [job.id, pipeline?.tasks?.length]);
-
   // job.tasks is expected to be an object keyed by task name; normalize from array if needed
   const taskById = React.useMemo(() => {
     const tasks = job?.tasks;
@@ -49,6 +58,16 @@ export default function JobDetail({ job, pipeline, onClose, onResume }) {
     return result;
   }, [job?.tasks]);
 
+  useEffect(() => {
+    setResumeFrom(
+      pipeline?.tasks?.[0]
+        ? typeof pipeline.tasks[0] === "string"
+          ? pipeline.tasks[0]
+          : (pipeline.tasks[0].id ?? pipeline.tasks[0].name ?? "")
+        : ""
+    );
+  }, [job.id, pipeline?.tasks?.length]);
+
   // Compute pipeline tasks from pipeline or derive from job tasks
   const computedPipeline = React.useMemo(() => {
     let result;
@@ -112,9 +131,21 @@ export default function JobDetail({ job, pipeline, onClose, onResume }) {
         }
       }
 
-      // Include error message in body when task status is error
+      // Prefer taskBreakdown totals for consistency with backend
+      const taskBreakdown = job?.costs?.taskBreakdown?.[item.id]?.summary || {};
+      if (taskBreakdown.totalTokens > 0) {
+        subtitleParts.push(formatTokensCompact(taskBreakdown.totalTokens));
+      }
+      if (taskBreakdown.totalCost > 0) {
+        subtitleParts.push(formatCurrency4(taskBreakdown.totalCost));
+      }
+
+      // Include error message in body when task status is error or failed
       const errorMsg = task?.error?.message;
-      const body = item.status === "failed" && errorMsg ? errorMsg : null;
+      const body =
+        (item.status === "failed" || item.status === "error") && errorMsg
+          ? errorMsg
+          : null;
 
       const resultItem = {
         ...item,
@@ -146,6 +177,8 @@ export default function JobDetail({ job, pipeline, onClose, onResume }) {
     [job]
   );
 
+  console.log("dagItems", dagItems);
+
   return (
     <div className="flex h-full flex-col">
       <DAGGrid

package/src/components/JobTable.jsx

@@ -7,6 +7,25 @@ import { taskDisplayDurationMs } from "../utils/duration.js";
 import { countCompleted } from "../utils/jobs";
 import { progressClasses, statusBadge } from "../utils/ui";
 
+// Local helpers for formatting costs and tokens
+function formatCurrency4(x) {
+  if (typeof x !== "number" || x === 0) return "$0.0000";
+  const formatted = x.toFixed(4);
+  // Trim trailing zeros and unnecessary decimal point
+  return `$${formatted.replace(/\.?0+$/, "")}`;
+}
+
+function formatTokensCompact(n) {
+  if (typeof n !== "number" || n === 0) return "0 tok";
+
+  if (n >= 1000000) {
+    return `${(n / 1000000).toFixed(1).replace(/\.0$/, "")}M tok`;
+  } else if (n >= 1000) {
+    return `${(n / 1000).toFixed(1).replace(/\.0$/, "")}k tok`;
+  }
+  return `${n} tok`;
+}
+
 export default function JobTable({
   jobs,
   pipeline,
@@ -35,6 +54,7 @@ export default function JobTable({
             <Table.ColumnHeaderCell>Current Task</Table.ColumnHeaderCell>
             <Table.ColumnHeaderCell>Progress</Table.ColumnHeaderCell>
             <Table.ColumnHeaderCell>Tasks</Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell>Cost</Table.ColumnHeaderCell>
             <Table.ColumnHeaderCell>Duration</Table.ColumnHeaderCell>
             <Table.ColumnHeaderCell className="w-12"></Table.ColumnHeaderCell>
           </Table.Row>
@@ -42,7 +62,7 @@ export default function JobTable({
 
         <Table.Body>
           {jobs.map((job) => {
-            const jobTitle = job.title || job.name; // Fallback for backward compatibility
+            const jobTitle = job.name;
             const taskById = Array.isArray(job.tasks)
               ? Object.fromEntries(
                   (job.tasks || []).map((t) => {
@@ -73,6 +93,12 @@ export default function JobTable({
                 (currentTask?.config || pipeline?.taskConfig?.[job.current])) ||
               {};
 
+            // Cost and token data
+            const costsSummary = job.costsSummary || {};
+            const totalCost = job.totalCost || costsSummary.totalCost || 0;
+            const totalTokens =
+              job.totalTokens || costsSummary.totalTokens || 0;
+
             const hasValidId = Boolean(job.id);
             return (
               <Table.Row
@@ -173,6 +199,19 @@ export default function JobTable({
                   </Text>
                 </Table.Cell>
 
+                <Table.Cell>
+                  <Flex direction="column" gap="1">
+                    <Text size="2" className="text-slate-700">
+                      {totalCost > 0 ? formatCurrency4(totalCost) : "—"}
+                    </Text>
+                    {totalTokens > 0 && (
+                      <Text size="1" className="text-slate-500">
+                        {formatTokensCompact(totalTokens)}
+                      </Text>
+                    )}
+                  </Flex>
+                </Table.Cell>
+
                 <Table.Cell>
                   <Flex align="center" gap="1">
                     <TimerReset className="h-3 w-3 text-slate-500" />

package/src/components/Layout.jsx

@@ -1,9 +1,12 @@
-import React from "react";
-import { useNavigate, useLocation } from "react-router-dom";
+import React, { useState, useRef, useEffect } from "react";
+import { useNavigate, useLocation, Link } from "react-router-dom";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { Box, Flex, Text, Heading, Link as RadixLink } from "@radix-ui/themes";
 import { Button } from "./ui/button.jsx";
-import { ArrowLeft, Home } from "lucide-react";
+import Logo from "./ui/Logo.jsx";
+import PageSubheader from "./PageSubheader.jsx";
+import UploadSeed from "./UploadSeed.jsx";
+import { ArrowLeft, Code2, Upload } from "lucide-react";
 import "./ui/focus-styles.css";
 
 /**
@@ -13,6 +16,8 @@ import "./ui/focus-styles.css";
 export default function Layout({
   children,
   title,
+  pageTitle,
+  breadcrumbs,
   actions,
   showBackButton = false,
   backTo = "/",
@@ -20,6 +25,10 @@ export default function Layout({
 }) {
   const navigate = useNavigate();
   const location = useLocation();
+  const [isUploadOpen, setIsUploadOpen] = useState(false);
+  const [seedUploadSuccess, setSeedUploadSuccess] = useState(null);
+  const [seedUploadTimer, setSeedUploadTimer] = useState(null);
+  const uploadPanelRef = useRef(null);
 
   // Determine active navigation based on current path
   const isActivePath = (path) => {
@@ -32,6 +41,50 @@ export default function Layout({
     navigate(backTo);
   };
 
+  const toggleUploadPanel = () => {
+    setIsUploadOpen(!isUploadOpen);
+  };
+
+  // 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]);
+
+  // Focus upload panel when opened
+  useEffect(() => {
+    if (isUploadOpen && uploadPanelRef.current) {
+      const uploadArea = uploadPanelRef.current.querySelector(
+        '[data-testid="upload-area"]'
+      );
+      if (uploadArea) {
+        uploadArea.focus();
+      }
+    }
+  }, [isUploadOpen]);
+
   return (
     <Tooltip.Provider delayDuration={200}>
       <Box className="min-h-screen bg-gray-1">
@@ -56,7 +109,7 @@ export default function Layout({
             gap="4"
           >
             {/* Left side: Navigation and title */}
-            <Flex align="center" gap="3" className="min-w-0 flex-1">
+            <Flex align="center" className="min-w-0 flex-1">
               {/* Back button (conditional) */}
               {showBackButton && (
                 <Tooltip.Root delayDuration={200}>
@@ -77,14 +130,39 @@ export default function Layout({
                 </Tooltip.Root>
               )}
 
-              {/* App title */}
-              <Heading
-                size="5"
-                weight="medium"
-                className="text-gray-12 truncate"
+              {/* Logo */}
+              <Box
+                asChild
+                className="shrink-0"
+                style={{ width: "80px", height: "60px" }}
               >
-                {title || "Prompt Pipeline"}
-              </Heading>
+                <Link
+                  to="/"
+                  aria-label="Go to homepage"
+                  className="rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+                >
+                  <Logo />
+                </Link>
+              </Box>
+
+              {/* App title - clickable to navigate to dashboard */}
+              <Box
+                asChild
+                className="shrink-0 cursor-pointer hover:bg-gray-3 rounded p-1 -m-1 transition-colors"
+                onClick={() => navigate("/")}
+              >
+                <Heading
+                  size="6"
+                  weight="medium"
+                  className="text-gray-12 truncate"
+                >
+                  <>
+                    Prompt
+                    <br />
+                    Pipeline
+                  </>
+                </Heading>
+              </Box>
             </Flex>
 
             {/* Center: Navigation */}
@@ -95,36 +173,82 @@ export default function Layout({
             >
               <Flex align="center" gap="6">
                 <RadixLink
-                  href="/"
+                  href="/code"
                   className={`text-sm font-medium transition-colors hover:text-blue-600 ${
-                    isActivePath("/")
+                    isActivePath("/code")
                       ? "text-blue-600"
                       : "text-gray-11 hover:text-gray-12"
                   }`}
-                  aria-current={isActivePath("/") ? "page" : undefined}
+                  aria-current={isActivePath("/code") ? "page" : undefined}
                 >
                   <Flex align="center" gap="2">
-                    <Home className="h-4 w-4" />
-                    Dashboard
+                    <Code2 className="h-4 w-4" />
+                    Help
                   </Flex>
                 </RadixLink>
               </Flex>
             </nav>
 
             {/* Right side: Actions */}
-            {actions && (
-              <Flex align="center" gap="3" className="shrink-0">
-                {actions}
-              </Flex>
-            )}
+            <Flex align="center" gap="3" className="shrink-0">
+              {actions}
+              <Tooltip.Root delayDuration={200}>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    size="sm"
+                    variant="default"
+                    onClick={toggleUploadPanel}
+                    aria-controls="layout-upload-panel"
+                    aria-expanded={isUploadOpen}
+                  >
+                    <Upload className="h-4 w-4" />
+                    <Text size="2" className="ml-2">
+                      Upload Seed
+                    </Text>
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content side="bottom" sideOffset={5}>
+                  <Text size="2">Upload seed file</Text>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            </Flex>
           </Flex>
         </Box>
 
+        {/* Upload Panel */}
+        {isUploadOpen && (
+          <Box
+            id="layout-upload-panel"
+            ref={uploadPanelRef}
+            role="region"
+            aria-label="Upload seed file"
+            className="bg-blue-50"
+          >
+            <Flex
+              direction="column"
+              gap="3"
+              className={`mx-auto w-full ${maxWidth} px-4 sm:px-6 lg:px-8 py-4`}
+            >
+              {/* 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>
+          </Box>
+        )}
+
         {/* Main content */}
         <main
           id="main-content"
           role="main"
-          className={`mx-auto w-full ${maxWidth} px-4 sm:px-6 lg:px-8 py-6`}
+          className={`mx-auto w-full ${maxWidth} px-4 sm:px-6 lg:px-8`}
         >
           {children}
         </main>

package/src/components/PageSubheader.jsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Box, Flex, Text } from "@radix-ui/themes";
+import { ChevronRight } from "lucide-react";
+
+/**
+ * PageSubheader renders a secondary header with breadcrumbs and optional right-side content.
+ * Intended to be placed directly below main navigation header.
+ */
+export default function PageSubheader({
+  breadcrumbs = [],
+  children,
+  maxWidth = "max-w-7xl",
+}) {
+  return (
+    <Box
+      role="region"
+      aria-label="Page header"
+      className="border-b border-gray-300 bg-gray-1/60 backdrop-blur supports-[backdrop-filter]:bg-gray-1/40 mb-4"
+    >
+      <Flex
+        align="center"
+        justify="between"
+        className={`mx-auto w-full ${maxWidth} px-1.5 py-3`}
+        gap="4"
+        wrap="wrap"
+      >
+        <Flex align="center" gap="3" className="min-w-0 flex-1">
+          {breadcrumbs.length > 0 && (
+            <nav aria-label="Breadcrumb" className="shrink-0">
+              <ol className="flex items-center gap-2 text-sm text-gray-11">
+                {breadcrumbs.map((crumb, index) => {
+                  const isLast = index === breadcrumbs.length - 1;
+                  return (
+                    <React.Fragment key={index}>
+                      {index > 0 && (
+                        <ChevronRight
+                          className="h-4 w-4 text-gray-9"
+                          aria-hidden="true"
+                        />
+                      )}
+                      {crumb.href ? (
+                        <Link
+                          to={crumb.href}
+                          className="hover:text-gray-12 transition-colors underline-offset-4 hover:underline"
+                        >
+                          {crumb.label}
+                        </Link>
+                      ) : (
+                        <Text
+                          as="span"
+                          aria-current={isLast ? "page" : undefined}
+                          className={isLast ? "text-gray-12 font-medium" : ""}
+                        >
+                          {crumb.label}
+                        </Text>
+                      )}
+                    </React.Fragment>
+                  );
+                })}
+              </ol>
+            </nav>
+          )}
+        </Flex>
+
+        {/* Right side content */}
+        {children && (
+          <Flex align="center" gap="3" className="shrink-0">
+            {children}
+          </Flex>
+        )}
+      </Flex>
+    </Box>
+  );
+}

package/src/components/UploadSeed.jsx

@@ -24,23 +24,8 @@ export const normalizeUploadError = (err) => {
  */
 export default function UploadSeed({ onUploadSuccess }) {
   const fileInputRef = React.useRef(null);
-  const [showSample, setShowSample] = useState(false);
   const [error, setError] = useState(null);
 
-  // Sample seed file structure for reference
-  const sampleSeed = {
-    name: "some-name",
-    pipeline: "content-generation",
-    data: {
-      type: "some-type",
-      contentType: "blog-post",
-      targetAudience: "software-developers",
-      tone: "professional-yet-accessible",
-      length: "1500-2000 words",
-      outputFormat: "blog-post",
-    },
-  };
-
   const handleFileChange = async (event) => {
     const files = event.target.files;
     if (!files || files.length === 0) return;
@@ -179,61 +164,6 @@ export default function UploadSeed({ onUploadSuccess }) {
         onChange={handleFileChange}
         data-testid="file-input"
       />
-
-      {/* Sample seed file section */}
-      <div className="border border-gray-200 rounded-lg overflow-hidden">
-        <button
-          type="button"
-          onClick={() => setShowSample(!showSample)}
-          className="w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 transition-colors flex items-center justify-between"
-          aria-expanded={showSample}
-          data-testid="sample-toggle"
-        >
-          <span className="text-sm font-medium text-gray-700">
-            Need help? View sample seed file structure
-          </span>
-          <svg
-            className={`w-4 h-4 text-gray-500 transition-transform ${
-              showSample ? "rotate-180" : ""
-            }`}
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M19 9l-7 7-7-7"
-            />
-          </svg>
-        </button>
-
-        {showSample && (
-          <div className="p-4 bg-white border-t border-gray-200">
-            <div className="flex items-center justify-between mb-2">
-              <p className="text-xs text-gray-600">
-                Use this structure as a reference for your seed file:
-              </p>
-              <button
-                type="button"
-                onClick={() =>
-                  navigator.clipboard.writeText(
-                    JSON.stringify(sampleSeed, null, 2)
-                  )
-                }
-                className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded hover:bg-blue-200 transition-colors"
-                data-testid="copy-sample"
-              >
-                Copy
-              </button>
-            </div>
-            <pre className="text-xs bg-gray-50 p-3 rounded overflow-auto max-h-60">
-              {JSON.stringify(sampleSeed, null, 2)}
-            </pre>
-          </div>
-        )}
-      </div>
     </div>
   );
 }

package/src/components/ui/Logo.jsx

@@ -0,0 +1,16 @@
+export const Logo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100%"
+    height="100%"
+    viewBox="0 0 1200 1200"
+  >
+    <path
+      fill="#009966"
+      d="M406.13 988.31c-17.297 75.047-84.562 131.11-164.86 131.11-93.375 0-169.18-75.797-169.18-169.18s75.797-169.18 169.18-169.18 169.18 75.797 169.18 169.18v1.266h447.74v-167.9H671.63c-14.859 0-29.062-5.906-39.562-16.406s-16.406-24.703-16.406-39.562v-37.312h-317.16c-10.312 0-18.656-8.344-18.656-18.656V355.78h-147.94c-14.859 0-29.062-5.906-39.562-16.406s-16.406-24.75-16.406-39.562v-111.94c0-14.859 5.906-29.109 16.406-39.562 10.5-10.5 24.75-16.406 39.562-16.406h391.78c14.859 0 29.062 5.906 39.562 16.406s16.406 24.75 16.406 39.562v37.312h202.4c9.281-84.609 81.094-150.52 168.14-150.52 93.375 0 169.18 75.797 169.18 169.18s-75.797 169.18-169.18 169.18c-87.047 0-158.86-65.906-168.14-150.52h-202.4v37.312c0 14.859-5.906 29.062-16.406 39.562s-24.75 16.406-39.562 16.406h-206.53v297.24h298.5v-37.312c0-14.859 5.906-29.062 16.406-39.562s24.703-16.406 39.562-16.406h392.63c14.859 0 29.062 5.906 39.562 16.406s16.406 24.703 16.406 39.562v111.94c0 14.859-5.906 29.062-16.406 39.562s-24.75 16.406-39.562 16.406h-168.74v186.56c0 10.312-8.344 18.656-18.656 18.656h-466.4c-1.5 0-2.906-.187-4.312-.516zM225.19 262.45h18.656c10.312 0 18.656-8.344 18.656-18.656s-8.344-18.656-18.656-18.656H225.19c-10.312 0-18.656 8.344-18.656 18.656s8.344 18.656 18.656 18.656zm186.56 0h18.656c10.312 0 18.656-8.344 18.656-18.656s-8.344-18.656-18.656-18.656H411.75c-10.312 0-18.656 8.344-18.656 18.656s8.344 18.656 18.656 18.656zm-93.281 0h18.656c10.312 0 18.656-8.344 18.656-18.656s-8.344-18.656-18.656-18.656h-18.656c-10.312 0-18.656 8.344-18.656 18.656s8.344 18.656 18.656 18.656zm616.18 0h85.5c10.312 0 18.656-8.344 18.656-18.656s-8.344-18.656-18.656-18.656h-85.5l29.062-22.594c8.109-6.328 9.609-18.047 3.281-26.156s-18.047-9.609-26.156-3.281l-71.953 55.969a18.61 18.61 0 0 0 0 29.438l71.953 55.969c8.109 6.328 19.875 4.875 26.156-3.281 6.328-8.109 4.875-19.875-3.281-26.203l-29.062-22.594zm-779.95 696.66l50.391 50.391c7.266 7.313 19.078 7.313 26.391 0l100.73-100.73c7.266-7.266 7.266-19.078 0-26.391-7.266-7.266-19.078-7.266-26.391 0l-87.562 87.562-37.172-37.172c-7.266-7.266-19.078-7.266-26.391 0-7.266 7.266-7.266 19.078 0 26.391zm797.21-268.78h18.656c10.312 0 18.656-8.344 18.656-18.656s-8.344-18.656-18.656-18.656h-18.656c-10.312 0-18.656 8.344-18.656 18.656s8.344 18.656 18.656 18.656zm-186.56 0h18.656c10.312 0 18.656-8.344 18.656-18.656s-8.344-18.656-18.656-18.656h-18.656c-10.312 0-18.656 8.344-18.656 18.656s8.344 18.656 18.656 18.656zm93.281 0h18.656c10.312 0 18.656-8.344 18.656-18.656s-8.344-18.656-18.656-18.656H858.63c-10.312 0-18.656 8.344-18.656 18.656s8.344 18.656 18.656 18.656z"
+      fillRule="evenodd"
+    />
+  </svg>
+);
+
+export default Logo;