@ryanfw/prompt-orchestration-pipeline 0.6.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,15 +15,13 @@ 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;
 
+  const { startMs, endMs } = currentTask ? taskToTimerProps(currentTask) : {};
+
   return (
     <Card
       role="button"
@@ -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,40 +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";
 
-// 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(
-    pipeline?.tasks?.[0]
-      ? typeof pipeline.tasks[0] === "string"
-        ? pipeline.tasks[0]
-        : (pipeline.tasks[0].id ?? pipeline.tasks[0].name ?? "")
-      : ""
-  );
-
+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;
@@ -58,16 +28,6 @@ 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;
@@ -91,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 || {};
@@ -118,18 +68,9 @@ 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 || {};
@@ -147,7 +88,7 @@ export default function JobDetail({ job, pipeline, onClose, onResume }) {
           ? errorMsg
           : null;
 
-      const resultItem = {
+      return {
         ...item,
         title:
           typeof item.id === "string"
@@ -155,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);
@@ -177,10 +147,10 @@ export default function JobDetail({ job, pipeline, onClose, onResume }) {
     [job]
   );
 
-  console.log("dagItems", dagItems);
-
   return (
     <div className="flex h-full flex-col">
+      {/* Job Header */}
+
       <DAGGrid
         items={dagItems}
         activeIndex={activeIndex}

package/src/components/JobTable.jsx

@@ -1,11 +1,13 @@
 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";
 
 // Local helpers for formatting costs and tokens
 function formatCurrency4(x) {
@@ -26,13 +28,7 @@ function formatTokensCompact(n) {
   return `${n} tok`;
 }
 
-export default function JobTable({
-  jobs,
-  pipeline,
-  onOpenJob,
-  overallElapsed,
-  now,
-}) {
+export default function JobTable({ jobs, pipeline, onOpenJob }) {
   if (jobs.length === 0) {
     return (
       <Box className="p-6">
@@ -72,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 ??
@@ -84,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;
@@ -157,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>
@@ -169,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>
@@ -215,9 +221,13 @@ export default function JobTable({
                 <Table.Cell>
                   <Flex align="center" gap="1">
                     <TimerReset className="h-3 w-3 text-slate-500" />
-                    <Text size="2" className="text-slate-700">
-                      {fmtDuration(duration)}
-                    </Text>
+                    <LiveText
+                      cadenceMs={10000}
+                      compute={(now) =>
+                        fmtDuration(jobCumulativeDurationMs(job, now))
+                      }
+                      className="text-slate-700"
+                    />
                   </Flex>
                 </Table.Cell>
 

package/src/components/Layout.jsx

@@ -19,7 +19,6 @@ export default function Layout({
   pageTitle,
   breadcrumbs,
   actions,
-  showBackButton = false,
   backTo = "/",
   maxWidth = "max-w-7xl",
 }) {
@@ -110,26 +109,6 @@ export default function Layout({
           >
             {/* Left side: Navigation and title */}
             <Flex align="center" 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>
-              )}
-
               {/* Logo */}
               <Box
                 asChild

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

package/src/components/TaskDetailSidebar.jsx

@@ -0,0 +1,216 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Callout } from "@radix-ui/themes";
+import { TaskFilePane } from "./TaskFilePane.jsx";
+import { TaskState } from "../config/statuses.js";
+
+/**
+ * TaskDetailSidebar component for displaying task details in a slide-over panel
+ * @param {Object} props - Component props
+ * @param {boolean} props.open - Whether the sidebar is open
+ * @param {string} props.title - Preformatted step name for the header
+ * @param {string} props.status - TaskState for styling
+ * @param {string} props.jobId - Job ID for file operations
+ * @param {string} props.taskId - Task ID for file operations
+ * @param {string|null} props.taskBody - Task body for error callout when status is FAILED
+ * @param {Function} props.filesByTypeForItem - Selector returning { artifacts, logs, tmp }
+ * @param {Object} props.task - Original task item, passed for filesByTypeForItem
+ * @param {Function} props.onClose - Close handler
+ */
+export function TaskDetailSidebar({
+  open,
+  title,
+  status,
+  jobId,
+  taskId,
+  taskBody,
+  filesByTypeForItem = () => ({ artifacts: [], logs: [], tmp: [] }),
+  task,
+  onClose,
+  taskIndex, // Add taskIndex for ID compatibility
+}) {
+  // Internal state
+  const [filePaneType, setFilePaneType] = useState("artifacts");
+  const [filePaneOpen, setFilePaneOpen] = useState(false);
+  const [filePaneFilename, setFilePaneFilename] = useState(null);
+  const closeButtonRef = useRef(null);
+
+  // Get CSS classes for card header based on status (mirrored from DAGGrid)
+  const getHeaderClasses = (status) => {
+    switch (status) {
+      case TaskState.DONE:
+        return "bg-green-50 border-green-200 text-green-700";
+      case TaskState.RUNNING:
+        return "bg-amber-50 border-amber-200 text-amber-700";
+      case TaskState.FAILED:
+        return "bg-pink-50 border-pink-200 text-pink-700";
+      default:
+        return "bg-gray-100 border-gray-200 text-gray-700";
+    }
+  };
+
+  // Focus close button when sidebar opens
+  useEffect(() => {
+    if (open && closeButtonRef.current) {
+      closeButtonRef.current.focus();
+    }
+  }, [open]);
+
+  // Reset internal state when open changes
+  useEffect(() => {
+    if (open) {
+      setFilePaneType("artifacts");
+      setFilePaneOpen(false);
+      setFilePaneFilename(null);
+    }
+  }, [open]);
+
+  // Reset file pane when type changes
+  useEffect(() => {
+    setFilePaneFilename(null);
+    setFilePaneOpen(false);
+  }, [filePaneType]);
+
+  // Handle file click
+  const handleFileClick = (filename) => {
+    setFilePaneFilename(filename);
+    setFilePaneOpen(true);
+  };
+
+  // Handle TaskFilePane close
+  const handleFilePaneClose = () => {
+    setFilePaneOpen(false);
+    setFilePaneFilename(null);
+  };
+
+  if (!open) {
+    return null;
+  }
+
+  // Get files for the current task
+  const filesForStep = filesByTypeForItem(task);
+  const filesForTab = filesForStep[filePaneType] ?? [];
+
+  return (
+    <aside
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={`slide-over-title-${taskIndex}`}
+      aria-hidden={false}
+      className={`fixed inset-y-0 right-0 z-[2000] w-full max-w-4xl bg-white border-l border-gray-200 transform transition-transform duration-300 ease-out translate-x-0`}
+    >
+      {/* Header */}
+      <div
+        className={`px-6 py-4 border-b flex items-center justify-between ${getHeaderClasses(status)}`}
+      >
+        <div
+          id={`slide-over-title-${taskIndex}`}
+          className="text-lg font-semibold truncate"
+        >
+          {title}
+        </div>
+        <button
+          ref={closeButtonRef}
+          type="button"
+          aria-label="Close details"
+          onClick={onClose}
+          className="rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 px-3 py-1.5 text-base"
+        >
+          ×
+        </button>
+      </div>
+
+      <div className="p-6 space-y-8 overflow-y-auto h-full">
+        {/* Error Callout - shown when task has error status and body */}
+        {status === TaskState.FAILED && taskBody && (
+          <section aria-label="Error">
+            <Callout.Root role="alert" aria-live="assertive">
+              <Callout.Text className="whitespace-pre-wrap break-words">
+                {taskBody}
+              </Callout.Text>
+            </Callout.Root>
+          </section>
+        )}
+
+        {/* File Display Area with Type Tabs */}
+        <section className="mt-6">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-base font-semibold text-gray-900">Files</h3>
+            <div className="flex items-center space-x-2">
+              <div className="flex rounded-lg border border-gray-200 bg-gray-50 p-1">
+                <button
+                  onClick={() => setFilePaneType("artifacts")}
+                  className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
+                    filePaneType === "artifacts"
+                      ? "bg-white text-gray-900 shadow-sm"
+                      : "text-gray-600 hover:text-gray-900"
+                  }`}
+                >
+                  Artifacts
+                </button>
+                <button
+                  onClick={() => setFilePaneType("logs")}
+                  className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
+                    filePaneType === "logs"
+                      ? "bg-white text-gray-900 shadow-sm"
+                      : "text-gray-600 hover:text-gray-900"
+                  }`}
+                >
+                  Logs
+                </button>
+                <button
+                  onClick={() => setFilePaneType("tmp")}
+                  className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
+                    filePaneType === "tmp"
+                      ? "bg-white text-gray-900 shadow-sm"
+                      : "text-gray-600 hover:text-gray-900"
+                  }`}
+                >
+                  Temp
+                </button>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* File List */}
+        <div className="space-y-2">
+          <div className="text-sm text-gray-600">
+            {filePaneType.charAt(0).toUpperCase() + filePaneType.slice(1)} files
+            for {taskId}
+          </div>
+          <div className="space-y-1">
+            {filesForTab.length === 0 ? (
+              <div className="text-sm text-gray-500 italic py-4 text-center">
+                No {filePaneType} files available for this task
+              </div>
+            ) : (
+              filesForTab.map((name) => (
+                <div
+                  key={`${filePaneType}-${name}`}
+                  className="flex items-center justify-between p-2 rounded border border-gray-200 hover:border-gray-300 hover:bg-gray-50 cursor-pointer transition-colors"
+                  onClick={() => handleFileClick(name)}
+                >
+                  <div className="flex items-center space-x-2">
+                    <span className="text-sm text-gray-700">{name}</span>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+        {/* TaskFilePane Modal */}
+        <TaskFilePane
+          isOpen={filePaneOpen}
+          jobId={jobId}
+          taskId={taskId}
+          type={filePaneType}
+          filename={filePaneFilename}
+          onClose={handleFilePaneClose}
+        />
+      </div>
+    </aside>
+  );
+}
+
+export default React.memo(TaskDetailSidebar);