@ryanfw/prompt-orchestration-pipeline 0.5.0 → 0.7.0

package/src/components/JobCard.jsx

@@ -1,11 +1,12 @@
 import React from "react";
 import { Card, CardHeader, CardTitle, CardContent } from "./ui/card";
 import { Progress } from "./ui/progress";
-import { Clock, TimerReset, ChevronRight } from "lucide-react";
-import { fmtDuration, taskDisplayDurationMs } from "../utils/duration";
+import { TimerReset, ChevronRight } from "lucide-react";
+import { fmtDuration } from "../utils/duration";
 import { countCompleted } from "../utils/jobs";
 import { progressClasses, statusBadge } from "../utils/ui";
-import { useTicker } from "../ui/client/hooks/useTicker";
+import TimerText from "./TimerText";
+import { taskToTimerProps } from "../utils/time-utils.js";
 
 export default function JobCard({
   job,
@@ -14,14 +15,12 @@ export default function JobCard({
   progressPct,
   overallElapsedMs,
 }) {
-  const now = useTicker(60000);
   const currentTask = job.current ? job.tasks[job.current] : undefined;
-  const currentElapsedMs = currentTask
-    ? taskDisplayDurationMs(currentTask, now)
-    : 0;
   const totalCompleted = countCompleted(job);
   const hasValidId = Boolean(job.id);
-  const jobTitle = job.title || job.name; // Fallback for backward compatibility
+  const jobTitle = job.title;
+
+  const { startMs, endMs } = currentTask ? taskToTimerProps(currentTask) : {};
 
   return (
     <Card
@@ -68,10 +67,13 @@ export default function JobCard({
                 ? "—"
                 : (job.current ?? "—")}
           </div>
-          {currentTask && currentElapsedMs > 0 && (
-            <div className="text-slate-500">
-              {fmtDuration(currentElapsedMs)}
-            </div>
+          {startMs && (
+            <TimerText
+              startMs={startMs}
+              endMs={endMs}
+              granularity="second"
+              className="text-slate-500"
+            />
           )}
         </div>
 

package/src/components/JobDetail.jsx

@@ -1,31 +1,10 @@
-import React, { useEffect, useState } from "react";
-import { fmtDuration } from "../utils/duration.js";
-import { taskDisplayDurationMs } from "../utils/duration.js";
-import { useTicker } from "../ui/client/hooks/useTicker.js";
+import React from "react";
 import DAGGrid from "./DAGGrid.jsx";
 import { computeDagItems, computeActiveIndex } from "../utils/dag.js";
 import { getTaskFilesForTask } from "../utils/task-files.js";
+import { formatCurrency4, formatTokensCompact } from "../utils/formatters.js";
 
-export default function JobDetail({ job, pipeline, onClose, onResume }) {
-  const now = useTicker(1000);
-  const [resumeFrom, setResumeFrom] = useState(
-    pipeline?.tasks?.[0]
-      ? typeof pipeline.tasks[0] === "string"
-        ? pipeline.tasks[0]
-        : (pipeline.tasks[0].id ?? pipeline.tasks[0].name ?? "")
-      : ""
-  );
-
-  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]);
-
+export default function JobDetail({ job, pipeline }) {
   // 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;
@@ -72,21 +51,11 @@ export default function JobDetail({ job, pipeline, onClose, onResume }) {
     return result;
   }, [pipeline, job?.tasks]);
 
-  // Compute DAG items and active index for visualization
-  const dagItems = React.useMemo(() => {
+  // Memoized helper to preserve DAG item identity and minimize churn
+  const stableDagItems = React.useMemo(() => {
     const rawDagItems = computeDagItems(job, computedPipeline);
 
-    const processedItems = rawDagItems.map((item, index) => {
-      if (process.env.NODE_ENV !== "test") {
-        console.debug("[JobDetail] computed DAG item", {
-          id: item.id,
-          status: item.status,
-          stage: item.stage,
-          jobHasTasks: !!job?.tasks,
-          taskKeys: job?.tasks ? Object.keys(job.tasks) : null,
-        });
-      }
-
+    return rawDagItems.map((item, index) => {
       const task = taskById[item.id];
 
       const taskConfig = task?.config || {};
@@ -99,24 +68,27 @@ export default function JobDetail({ job, pipeline, onClose, onResume }) {
       if (taskConfig?.temperature != null) {
         subtitleParts.push(`temp ${taskConfig.temperature}`);
       }
-      if (task?.attempts != null) {
-        subtitleParts.push(`${task.attempts} attempts`);
-      }
       if (task?.refinementAttempts != null) {
         subtitleParts.push(`${task.refinementAttempts} refinements`);
       }
-      if (task?.startedAt) {
-        const durationMs = taskDisplayDurationMs(task, now);
-        if (durationMs > 0) {
-          subtitleParts.push(fmtDuration(durationMs));
-        }
+
+      // 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
+      // 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 = {
+      return {
         ...item,
         title:
           typeof item.id === "string"
@@ -124,13 +96,42 @@ export default function JobDetail({ job, pipeline, onClose, onResume }) {
             : item.id?.name || item.id?.id || `Task ${item.id}`,
         subtitle: subtitleParts.length > 0 ? subtitleParts.join(" · ") : null,
         body,
+        startedAt: task?.startedAt,
+        endedAt: task?.endedAt,
       };
+    });
+  }, [job, computedPipeline, taskById]);
+
+  // Previous dagItems reference for identity comparison
+  const prevDagItemsRef = React.useRef([]);
 
-      return resultItem;
+  // Compute DAG items with identity preservation
+  const dagItems = React.useMemo(() => {
+    const prevItems = prevDagItemsRef.current;
+
+    // Create new array but reuse objects when possible to maintain identity
+    const newItems = stableDagItems.map((item, index) => {
+      const prevItem = prevItems[index];
+
+      // Reuse previous object if all relevant properties are unchanged
+      if (
+        prevItem &&
+        prevItem.id === item.id &&
+        prevItem.status === item.status &&
+        prevItem.stage === item.stage &&
+        prevItem.title === item.title &&
+        prevItem.subtitle === item.subtitle &&
+        prevItem.body === item.body
+      ) {
+        return prevItem;
+      }
+
+      return item;
     });
 
-    return processedItems;
-  }, [job, computedPipeline, taskById, now]);
+    prevDagItemsRef.current = newItems;
+    return newItems;
+  }, [stableDagItems]);
 
   const activeIndex = React.useMemo(() => {
     const index = computeActiveIndex(dagItems);
@@ -148,6 +149,8 @@ export default function JobDetail({ job, pipeline, onClose, onResume }) {
 
   return (
     <div className="flex h-full flex-col">
+      {/* Job Header */}
+
       <DAGGrid
         items={dagItems}
         activeIndex={activeIndex}

package/src/components/JobTable.jsx

@@ -1,19 +1,34 @@
 import React from "react";
 import { Box, Flex, Table, Text, Button } from "@radix-ui/themes";
 import { Progress } from "./ui/progress";
-import { Clock, TimerReset, ChevronRight } from "lucide-react";
-import { fmtDuration } from "../utils/duration.js";
-import { taskDisplayDurationMs } from "../utils/duration.js";
+import { TimerReset, ChevronRight } from "lucide-react";
+import { fmtDuration, jobCumulativeDurationMs } from "../utils/duration.js";
 import { countCompleted } from "../utils/jobs";
 import { progressClasses, statusBadge } from "../utils/ui";
+import TimerText from "./TimerText.jsx";
+import LiveText from "./LiveText.jsx";
+import { taskToTimerProps } from "../utils/time-utils.js";
 
-export default function JobTable({
-  jobs,
-  pipeline,
-  onOpenJob,
-  overallElapsed,
-  now,
-}) {
+// 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, onOpenJob }) {
   if (jobs.length === 0) {
     return (
       <Box className="p-6">
@@ -35,6 +50,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 +58,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) => {
@@ -52,9 +68,6 @@ export default function JobTable({
                 )
               : job.tasks || {};
             const currentTask = job.current ? taskById[job.current] : undefined;
-            const currentElapsedMs = currentTask
-              ? taskDisplayDurationMs(currentTask, now)
-              : 0;
             const totalCompleted = countCompleted(job);
             const totalTasks =
               pipeline?.tasks?.length ??
@@ -64,7 +77,6 @@ export default function JobTable({
             const progress = Number.isFinite(job.progress)
               ? Math.round(job.progress)
               : 0;
-            const duration = overallElapsed(job);
             const currentTaskName = currentTask
               ? (currentTask.name ?? currentTask.id ?? job.current)
               : undefined;
@@ -73,6 +85,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
@@ -131,7 +149,7 @@ export default function JobTable({
                     <Text size="2" className="text-slate-700">
                       {currentTaskName
                         ? currentTaskName
-                        : job.status === "completed"
+                        : job.status === "done"
                           ? "—"
                           : (job.current ?? "—")}
                     </Text>
@@ -143,12 +161,26 @@ export default function JobTable({
                           currentTask?.temperature != null
                             ? `temp ${currentTaskConfig?.temperature ?? currentTask?.temperature}`
                             : null,
-                          currentElapsedMs > 0
-                            ? fmtDuration(currentElapsedMs)
-                            : null,
+                          (() => {
+                            const { startMs, endMs } =
+                              taskToTimerProps(currentTask);
+                            return startMs ? (
+                              <TimerText
+                                startMs={startMs}
+                                endMs={endMs}
+                                granularity="second"
+                                className="text-slate-500"
+                              />
+                            ) : null;
+                          })(),
                         ]
                           .filter(Boolean)
-                          .join(" · ")}
+                          .map((item, index) => (
+                            <React.Fragment key={index}>
+                              {typeof item === "string" ? item : item}
+                              {index < 2 && " · "}
+                            </React.Fragment>
+                          ))}
                       </Text>
                     )}
                   </Flex>
@@ -174,11 +206,28 @@ export default function JobTable({
                 </Table.Cell>
 
                 <Table.Cell>
-                  <Flex align="center" gap="1">
-                    <TimerReset className="h-3 w-3 text-slate-500" />
+                  <Flex direction="column" gap="1">
                     <Text size="2" className="text-slate-700">
-                      {fmtDuration(duration)}
+                      {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" />
+                    <LiveText
+                      cadenceMs={10000}
+                      compute={(now) =>
+                        fmtDuration(jobCumulativeDurationMs(job, now))
+                      }
+                      className="text-slate-700"
+                    />
                   </Flex>
                 </Table.Cell>
 

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,13 +16,18 @@ import "./ui/focus-styles.css";
 export default function Layout({
   children,
   title,
+  pageTitle,
+  breadcrumbs,
   actions,
-  showBackButton = false,
   backTo = "/",
   maxWidth = "max-w-7xl",
 }) {
   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 +40,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,35 +108,40 @@ export default function Layout({
             gap="4"
           >
             {/* Left side: Navigation and title */}
-            <Flex align="center" gap="3" className="min-w-0 flex-1">
-              {/* Back button (conditional) */}
-              {showBackButton && (
-                <Tooltip.Root delayDuration={200}>
-                  <Tooltip.Trigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={handleBack}
-                      className="shrink-0"
-                      aria-label="Go back"
-                    >
-                      <ArrowLeft className="h-4 w-4" />
-                    </Button>
-                  </Tooltip.Trigger>
-                  <Tooltip.Content side="bottom" sideOffset={5}>
-                    <Text size="2">Go back</Text>
-                  </Tooltip.Content>
-                </Tooltip.Root>
-              )}
+            <Flex align="center" className="min-w-0 flex-1">
+              {/* Logo */}
+              <Box
+                asChild
+                className="shrink-0"
+                style={{ width: "80px", height: "60px" }}
+              >
+                <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 */}
-              <Heading
-                size="5"
-                weight="medium"
-                className="text-gray-12 truncate"
+              {/* 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("/")}
               >
-                {title || "Prompt Pipeline"}
-              </Heading>
+                <Heading
+                  size="6"
+                  weight="medium"
+                  className="text-gray-12 truncate"
+                >
+                  <>
+                    Prompt
+                    <br />
+                    Pipeline
+                  </>
+                </Heading>
+              </Box>
             </Flex>
 
             {/* Center: Navigation */}
@@ -95,36 +152,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/LiveText.jsx

@@ -0,0 +1,47 @@
+import React, { useSyncExternalStore, useId, useState, useEffect } from "react";
+import {
+  subscribe,
+  getSnapshot,
+  getServerSnapshot,
+  addCadenceHint,
+  removeCadenceHint,
+} from "../ui/client/time-store.js";
+
+/**
+ * LiveText component for displaying computed text that updates on a cadence
+ *
+ * @param {Object} props
+ * @param {Function} props.compute - Function that takes nowMs and returns string to display
+ * @param {number} props.cadenceMs - Update cadence in milliseconds (default 10000)
+ * @param {string} props.className - CSS className for styling
+ */
+export default function LiveText({ compute, cadenceMs = 10000, className }) {
+  const id = useId();
+
+  // Get current time from the global time store
+  const now = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+
+  // Local state for the computed text to avoid re-renders of parent
+  const [displayText, setDisplayText] = useState(() => {
+    // Initial text for SSR safety
+    return compute(Date.now());
+  });
+
+  // Register cadence hint and handle subscription
+  useEffect(() => {
+    // Register cadence hint
+    addCadenceHint(id, cadenceMs);
+
+    // Cleanup function
+    return () => {
+      removeCadenceHint(id);
+    };
+  }, [id, cadenceMs]);
+
+  // Update display text when time changes
+  useEffect(() => {
+    setDisplayText(compute(now));
+  }, [now, compute]);
+
+  return <span className={className}>{displayText}</span>;
+}