@ryanfw/prompt-orchestration-pipeline 0.0.1 → 0.3.0

package/src/components/UploadSeed.jsx

@@ -0,0 +1,239 @@
+import React, { useState } from "react";
+import { Box } from "@radix-ui/themes";
+import { Button } from "./ui/button.jsx";
+
+/**
+ * Normalize upload errors to a user-facing string
+ */
+export const normalizeUploadError = (err) => {
+  if (!err) return "Upload failed";
+  if (typeof err === "string") return err;
+  if (err instanceof Error) return err.message;
+  if (typeof err === "object") {
+    if ("message" in err && err.message) return String(err.message);
+    if ("error" in err && err.error) return String(err.error);
+  }
+  return "Upload failed";
+};
+
+/**
+ * UploadSeed component for uploading seed files
+ *
+ * @param {Object} props
+ * @param {function} props.onUploadSuccess - Callback called on successful upload with { jobName }
+ */
+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;
+
+    const file = files[0];
+
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+
+      const response = await fetch("/api/upload/seed", {
+        method: "POST",
+        body: formData,
+      });
+
+      const result = await response.json();
+
+      if (result.success) {
+        // Emit console log as required
+        console.log("Seed uploaded:", result.jobName);
+
+        // Clear any prior error and call success callback
+        setError(null);
+        if (onUploadSuccess) {
+          onUploadSuccess({ jobName: result.jobName });
+        }
+      } else {
+        console.error("Upload failed:", result.message);
+        setError(normalizeUploadError(result));
+      }
+    } catch (error) {
+      console.error("Upload error:", error);
+      setError(normalizeUploadError(error));
+    } finally {
+      // Reset file input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  };
+
+  const handleDropAreaClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  const handleDragOver = (event) => {
+    event.preventDefault();
+    event.currentTarget.classList.add("border-blue-500", "bg-blue-50");
+  };
+
+  const handleDragLeave = (event) => {
+    event.preventDefault();
+    event.currentTarget.classList.remove("border-blue-500", "bg-blue-50");
+  };
+
+  const handleDrop = (event) => {
+    event.preventDefault();
+    event.currentTarget.classList.remove("border-blue-500", "bg-blue-50");
+
+    if (event.dataTransfer.files.length > 0) {
+      const files = event.dataTransfer.files;
+      const fileInput = fileInputRef.current;
+      if (fileInput) {
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(files[0]);
+        fileInput.files = dataTransfer.files;
+        handleFileChange({ target: fileInput });
+      }
+    }
+  };
+
+  return (
+    <div data-testid="upload-seed" className="space-y-3">
+      {error && (
+        <Box
+          role="alert"
+          data-testid="upload-error"
+          className="rounded-md bg-red-50 p-3 border border-red-200"
+        >
+          <div className="flex items-start justify-between gap-3">
+            <div className="text-sm text-red-800">{error}</div>
+            <Button
+              size="1"
+              variant="ghost"
+              onClick={() => setError(null)}
+              data-testid="dismiss-error"
+            >
+              Dismiss
+            </Button>
+          </div>
+        </Box>
+      )}
+      <div
+        data-testid="upload-area"
+        className={`
+          border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors
+          border-gray-400 bg-white text-gray-600 hover:border-blue-500 hover:bg-blue-50
+        `}
+        onClick={handleDropAreaClick}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        role="button"
+        tabIndex={0}
+      >
+        <div className="space-y-2">
+          <svg
+            className="mx-auto h-8 w-8 text-gray-400"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+            />
+          </svg>
+          <div className="text-sm">
+            <span className="font-medium text-gray-900">Click to upload</span>{" "}
+            or drag and drop
+          </div>
+          <p className="text-xs text-gray-500">JSON files only</p>
+        </div>
+      </div>
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".json"
+        className="hidden"
+        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/badge.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+export function Badge({ children, intent = "gray", className = "", ...props }) {
+  const intents = {
+    gray: "border-slate-300 text-slate-700 bg-slate-100",
+    blue: "border-blue-300 text-blue-800 bg-blue-100",
+    green: "border-green-300 text-green-800 bg-green-100",
+    red: "border-red-300 text-red-800 bg-red-100",
+    amber: "border-amber-300 text-amber-900 bg-amber-100",
+  };
+  const cls = [
+    "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium",
+    intents[intent] || intents.gray,
+    className,
+  ].join(" ");
+  return (
+    <span className={cls} {...props}>
+      {children}
+    </span>
+  );
+}

package/src/components/ui/button.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Button as RadixButton } from "@radix-ui/themes";
+
+export function Button({
+  variant = "solid",
+  size = "2",
+  className = "",
+  ...props
+}) {
+  // Map custom variant names to Radix UI variants
+  const radixVariant =
+    variant === "solid"
+      ? "solid"
+      : variant === "outline"
+        ? "outline"
+        : variant === "ghost"
+          ? "ghost"
+          : variant === "secondary"
+            ? "soft"
+            : variant === "destructive"
+              ? "solid"
+              : "solid";
+
+  // Map custom size names to Radix UI sizes
+  const radixSize =
+    size === "sm" ? "1" : size === "md" ? "2" : size === "lg" ? "3" : "2";
+
+  // Map destructive variant to appropriate color
+  const color = variant === "destructive" ? "red" : undefined;
+
+  // Combine base classes with any additional className
+  const combinedClassName = `transition-colors duration-200 ${className}`;
+
+  return (
+    <RadixButton
+      variant={radixVariant}
+      size={radixSize}
+      color={color}
+      className={combinedClassName}
+      {...props}
+    />
+  );
+}

package/src/components/ui/card.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+export function Card({ className = "", ...p }) {
+  return (
+    <div
+      className={["rounded-xl border bg-white shadow-sm", className].join(" ")}
+      {...p}
+    />
+  );
+}
+export function CardHeader({ className = "", ...p }) {
+  return <div className={["p-4 border-b", className].join(" ")} {...p} />;
+}
+export function CardTitle({ className = "", ...p }) {
+  return (
+    <h3 className={["text-base font-semibold", className].join(" ")} {...p} />
+  );
+}
+export function CardContent({ className = "", ...p }) {
+  return <div className={["p-4", className].join(" ")} {...p} />;
+}

package/src/components/ui/focus-styles.css

@@ -0,0 +1,60 @@
+/* Focus styles for accessibility */
+.focus-visible:focus {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+/* High contrast focus for better visibility */
+.focus-visible:focus-visible {
+  outline: 2px solid #1d4ed8;
+  outline-offset: 2px;
+}
+
+/* Skip link styles */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 6px;
+  background: #2563eb;
+  color: white;
+  padding: 8px;
+  text-decoration: none;
+  border-radius: 4px;
+  z-index: 1000;
+  transition: top 0.3s;
+}
+
+.skip-link:focus {
+  top: 6px;
+}
+
+/* Ensure good contrast for interactive elements */
+.interactive-element {
+  min-height: 44px;
+  min-width: 44px;
+}
+
+/* Header navigation focus styles */
+.nav-link:focus {
+  background-color: #f3f4f6;
+  border-radius: 4px;
+  outline: 2px solid #2563eb;
+  outline-offset: -2px;
+}
+
+/* Button focus styles */
+button:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+/* Link hover and focus states */
+a:hover {
+  text-decoration: underline;
+}
+
+a:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+  border-radius: 2px;
+}

package/src/components/ui/progress.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+export function Progress({ value = 0, variant = "default", className = "" }) {
+  const pct = Math.max(0, Math.min(100, Number(value)));
+
+  const variantClasses = {
+    default: "bg-blue-600",
+    running: "bg-blue-600",
+    error: "bg-red-600",
+    completed: "bg-green-600",
+    pending: "bg-slate-400",
+  };
+
+  return (
+    <div
+      className={[
+        "h-2 w-full overflow-hidden rounded bg-slate-200",
+        className,
+      ].join(" ")}
+    >
+      <div
+        className={`h-full transition-all duration-300 ${variantClasses[variant] || variantClasses.default}`}
+        style={{ width: `${pct}%` }}
+      />
+    </div>
+  );
+}

package/src/components/ui/select.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+export function Select({ value, onValueChange, children, className = "" }) {
+  return (
+    <select
+      className={[
+        "h-9 rounded-md border px-3 text-sm bg-white",
+        className,
+      ].join(" ")}
+      value={value}
+      onChange={(e) => onValueChange?.(e.target.value)}
+    >
+      {children}
+    </select>
+  );
+}
+export function SelectItem({ value, children }) {
+  return <option value={value}>{children}</option>;
+}
+export function SelectTrigger({ children, ...p }) {
+  return <>{children}</>;
+} // keep API compatible
+export function SelectContent({ children }) {
+  return <>{children}</>;
+}
+export function SelectValue({ placeholder }) {
+  return <>{placeholder}</>;
+}

package/src/components/ui/separator.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+export function Separator({ className = "", ...p }) {
+  return (
+    <hr className={["my-4 border-slate-200", className].join(" ")} {...p} />
+  );
+}

package/src/config/paths.js

@@ -0,0 +1,99 @@
+/**
+ * Path resolution utilities for pipeline data directories
+ * @module config/paths
+ */
+
+import path from "path";
+
+/**
+ * Resolve pipeline data directory paths from a base directory
+ * @param {string} baseDir - Base data directory
+ * @returns {Object} Object containing resolved paths
+ */
+function resolvePipelinePaths(baseDir) {
+  return {
+    pending: path.join(baseDir, "pipeline-data", "pending"),
+    current: path.join(baseDir, "pipeline-data", "current"),
+    complete: path.join(baseDir, "pipeline-data", "complete"),
+    rejected: path.join(baseDir, "pipeline-data", "rejected"),
+  };
+}
+
+/**
+ * Get the exact pending filename for a given job ID
+ * @param {string} baseDir - Base data directory
+ * @param {string} jobId - Job ID
+ * @returns {string} Full path to pending seed file
+ */
+function getPendingSeedPath(baseDir, jobId) {
+  const paths = resolvePipelinePaths(baseDir);
+  return path.join(paths.pending, `${jobId}-seed.json`);
+}
+
+/**
+ * Get the current seed file path for a given job ID
+ * @param {string} baseDir - Base data directory
+ * @param {string} jobId - Job ID
+ * @returns {string} Full path to current seed file
+ */
+function getCurrentSeedPath(baseDir, jobId) {
+  const paths = resolvePipelinePaths(baseDir);
+  return path.join(paths.current, jobId, "seed.json");
+}
+
+/**
+ * Get the complete seed file path for a given job ID
+ * @param {string} baseDir - Base data directory
+ * @param {string} jobId - Job ID
+ * @returns {string} Full path to complete seed file
+ */
+function getCompleteSeedPath(baseDir, jobId) {
+  const paths = resolvePipelinePaths(baseDir);
+  return path.join(paths.complete, jobId, "seed.json");
+}
+
+/**
+ * Get the job directory path for a given job ID and location
+ * @param {string} baseDir - Base data directory
+ * @param {string} jobId - Job ID
+ * @param {string} location - Job location ('current', 'complete', 'pending')
+ * @returns {string} Full path to job directory
+ */
+function getJobDirectoryPath(baseDir, jobId, location) {
+  const paths = resolvePipelinePaths(baseDir);
+  return path.join(paths[location], jobId);
+}
+
+/**
+ * Get the job metadata file path for a given job ID
+ * @param {string} baseDir - Base data directory
+ * @param {string} jobId - Job ID
+ * @param {string} location - Job location ('current', 'complete')
+ * @returns {string} Full path to job metadata file
+ */
+function getJobMetadataPath(baseDir, jobId, location = "current") {
+  const jobDir = getJobDirectoryPath(baseDir, jobId, location);
+  return path.join(jobDir, "job.json");
+}
+
+/**
+ * Get the pipeline snapshot file path for a given job ID
+ * @param {string} baseDir - Base data directory
+ * @param {string} jobId - Job ID
+ * @param {string} location - Job location ('current', 'complete')
+ * @returns {string} Full path to pipeline snapshot file
+ */
+function getJobPipelinePath(baseDir, jobId, location = "current") {
+  const jobDir = getJobDirectoryPath(baseDir, jobId, location);
+  return path.join(jobDir, "pipeline.json");
+}
+
+export {
+  resolvePipelinePaths,
+  getPendingSeedPath,
+  getCurrentSeedPath,
+  getCompleteSeedPath,
+  getJobDirectoryPath,
+  getJobMetadataPath,
+  getJobPipelinePath,
+};