@ryanfw/prompt-orchestration-pipeline 0.5.0 → 0.7.0

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/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);

package/src/components/TimerText.jsx

@@ -0,0 +1,82 @@
+import React, { useSyncExternalStore, useId, useState, useEffect } from "react";
+import {
+  subscribe,
+  getSnapshot,
+  getServerSnapshot,
+  addCadenceHint,
+  removeCadenceHint,
+} from "../ui/client/time-store.js";
+import { fmtDuration } from "../utils/duration.js";
+
+/**
+ * TimerText component for displaying live-updating durations without parent re-renders
+ *
+ * @param {Object} props
+ * @param {number} props.startMs - Start timestamp in milliseconds
+ * @param {number|null} props.endMs - End timestamp in milliseconds (null for ongoing timers)
+ * @param {"second"|"minute"} props.granularity - Update granularity
+ * @param {Function} props.format - Duration formatting function (defaults to fmtDuration)
+ * @param {string} props.className - CSS className for styling
+ */
+export default function TimerText({
+  startMs,
+  endMs = null,
+  granularity = "second",
+  format = fmtDuration,
+  className,
+}) {
+  const id = useId();
+
+  // Get current time from the global time store
+  const now = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+
+  // Local state for the formatted text to avoid re-renders of parent
+  const [displayText, setDisplayText] = useState(() => {
+    // Initial text for SSR safety
+    if (!startMs) return "—";
+    const initialEnd = endMs ?? Date.now();
+    const elapsed = Math.max(0, initialEnd - startMs);
+    return format(elapsed);
+  });
+
+  // Register cadence hint and handle subscription
+  useEffect(() => {
+    if (!startMs) return;
+
+    // Register cadence hint based on granularity
+    const cadenceMs = granularity === "second" ? 1000 : 60_000;
+    addCadenceHint(id, cadenceMs);
+
+    // Cleanup function
+    return () => {
+      removeCadenceHint(id);
+    };
+  }, [id, granularity, startMs]);
+
+  // Update display text when time changes (only for ongoing timers)
+  useEffect(() => {
+    if (!startMs) return;
+
+    // If endMs is present, this is a completed timer - no further updates needed
+    if (endMs !== null) return;
+
+    // For ongoing timers, update the display text
+    const elapsed = Math.max(0, now - startMs);
+    setDisplayText(format(elapsed));
+  }, [now, startMs, endMs, format]);
+
+  // For completed timers, ensure the final duration is displayed
+  useEffect(() => {
+    if (!startMs || endMs === null) return;
+
+    const elapsed = Math.max(0, endMs - startMs);
+    setDisplayText(format(elapsed));
+  }, [startMs, endMs, format]);
+
+  // If no start time, show placeholder
+  if (!startMs) {
+    return <span className={className}>—</span>;
+  }
+
+  return <span className={className}>{displayText}</span>;
+}

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;

package/src/components/ui/RestartJobModal.jsx

@@ -0,0 +1,140 @@
+import React, { useEffect, useRef } from "react";
+import { Box, Flex, Text, Heading } from "@radix-ui/themes";
+import { Button } from "./button.jsx";
+
+/**
+ * RestartJobModal component for confirming job restart from clean slate
+ * @param {Object} props
+ * @param {boolean} props.open - Whether the modal is open
+ * @param {Function} props.onClose - Function to call when modal is closed
+ * @param {Function} props.onConfirm - Function to call when restart is confirmed
+ * @param {string} props.jobId - The ID of the job to restart
+ * @param {string} props.taskId - The ID of the task that triggered the restart (optional)
+ * @param {boolean} props.isSubmitting - Whether the restart action is in progress
+ */
+export function RestartJobModal({
+  open,
+  onClose,
+  onConfirm,
+  jobId,
+  taskId,
+  isSubmitting = false,
+}) {
+  const modalRef = useRef(null);
+
+  // Handle Escape key to close modal
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && open) {
+        e.preventDefault();
+        onClose();
+      }
+    };
+
+    if (open) {
+      document.addEventListener("keydown", handleKeyDown);
+      // Focus the modal for accessibility
+      if (modalRef.current) {
+        modalRef.current.focus();
+      }
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [open, onClose]);
+
+  // Handle Enter key to confirm when modal is focused
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !isSubmitting && open) {
+      e.preventDefault();
+      onConfirm();
+    }
+  };
+
+  if (!open) return null;
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-50 flex items-center justify-center"
+        aria-hidden={!open}
+      >
+        {/* Backdrop */}
+        <div
+          className="absolute inset-0 bg-black/50"
+          onClick={onClose}
+          aria-hidden="true"
+        />
+
+        {/* Modal */}
+        <div
+          ref={modalRef}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="restart-modal-title"
+          aria-describedby="restart-modal-description"
+          className="relative bg-white rounded-lg shadow-2xl border border-gray-200 max-w-lg w-full mx-4 outline-none"
+          style={{ minWidth: "320px", maxWidth: "560px" }}
+          tabIndex={-1}
+          onKeyDown={handleKeyDown}
+        >
+          <div className="p-6">
+            {/* Header */}
+            <Heading
+              id="restart-modal-title"
+              as="h2"
+              size="5"
+              className="mb-4 text-gray-900"
+            >
+              {taskId
+                ? `Restart from ${taskId}`
+                : "Restart job (reset progress)"}
+            </Heading>
+
+            {/* Body */}
+            <Box id="restart-modal-description" className="mb-6">
+              <Text as="p" className="text-gray-700 mb-4">
+                {taskId
+                  ? `This will restart the job from the "${taskId}" task. Tasks before ${taskId} will remain completed, while ${taskId} and all subsequent tasks will be reset to pending. Files and artifacts are preserved. A new background run will start automatically. This cannot be undone.`
+                  : "This will clear the job's progress and active stage and reset all tasks to pending. Files and artifacts are preserved. A new background run will start automatically. This cannot be undone."}
+              </Text>
+
+              {taskId && (
+                <Text as="p" className="text-sm text-gray-600 mb-3">
+                  <strong>Triggered from task:</strong> {taskId}
+                </Text>
+              )}
+
+              <Text as="p" className="text-sm text-gray-500 italic">
+                Note: Job must be in current lifecycle and not running.
+              </Text>
+            </Box>
+
+            {/* Actions */}
+            <Flex gap="3" justify="end">
+              <Button
+                variant="outline"
+                onClick={onClose}
+                disabled={isSubmitting}
+                className="min-w-[80px]"
+              >
+                Cancel
+              </Button>
+
+              <Button
+                variant="destructive"
+                onClick={onConfirm}
+                disabled={isSubmitting}
+                className="min-w-[80px]"
+              >
+                {isSubmitting ? "Restarting..." : "Restart"}
+              </Button>
+            </Flex>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default RestartJobModal;