@ryanfw/prompt-orchestration-pipeline 0.12.0 → 0.13.0

package/src/components/SchemaPreviewPanel.jsx

@@ -0,0 +1,97 @@
+import React, { useRef, useEffect } from "react";
+import { X, Copy, Check } from "lucide-react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+export const SchemaPreviewPanel = ({
+  fileName,
+  type,
+  content,
+  loading,
+  error,
+  onClose,
+}) => {
+  const panelRef = useRef(null);
+  const [copied, setCopied] = React.useState(false);
+
+  const handleCopy = async () => {
+    if (content) {
+      try {
+        await navigator.clipboard.writeText(content);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      } catch (error) {
+        console.error("Failed to copy content to clipboard:", error);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (panelRef.current) {
+      panelRef.current.focus();
+    }
+  }, []);
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      ref={panelRef}
+      tabIndex={-1}
+      onKeyDown={handleKeyDown}
+      role="region"
+      aria-label={`${type} preview for ${fileName}`}
+      className="fixed bottom-0 left-0 right-0 h-[50%] bg-white border-t shadow-lg flex flex-col z-10"
+    >
+      <div className="flex items-center justify-between px-4 py-2 border-b bg-slate-50">
+        <span className="font-medium text-sm">
+          {fileName} ({type})
+        </span>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={handleCopy}
+            aria-label="Copy content"
+            className="hover:bg-slate-200 rounded p-1"
+            disabled={!content}
+          >
+            {copied ? (
+              <Check className="h-4 w-4 text-green-600" />
+            ) : (
+              <Copy className="h-4 w-4" />
+            )}
+          </button>
+          <button
+            onClick={onClose}
+            aria-label="Close preview"
+            className="hover:bg-slate-200 rounded p-1"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+      <div className="flex-1 overflow-auto p-4">
+        {loading ? (
+          <div className="text-sm text-muted-foreground" aria-live="polite">Loading...</div>
+        ) : error ? (
+          <div className="text-sm text-red-600" role="alert">{error}</div>
+        ) : content ? (
+          <SyntaxHighlighter
+            language="json"
+            style={oneLight}
+            customStyle={{
+              margin: 0,
+              background: "transparent",
+              fontSize: "12px",
+            }}
+          >
+            {content}
+          </SyntaxHighlighter>
+        ) : null}
+      </div>
+    </div>
+  );
+};

package/src/components/StageTimeline.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Badge } from "./ui/badge.jsx";
+
+export const StageTimeline = React.memo(({ stages }) => {
+  // Filter out stages without a name property (required for React key and display)
+  const validStages = stages?.filter((stage) => stage?.name) || [];
+  
+  // Sort by order, with defensive handling for missing order property
+  const sortedStages = [...validStages].sort((a, b) => {
+    const orderA = typeof a.order === 'number' ? a.order : Number.MAX_SAFE_INTEGER;
+    const orderB = typeof b.order === 'number' ? b.order : Number.MAX_SAFE_INTEGER;
+    return orderA - orderB;
+  });
+
+  return (
+    <ol
+      role="list"
+      aria-label="Task execution stages"
+      className="relative border-l border-slate-300 ml-1 space-y-4"
+    >
+      {sortedStages.map((stage) => (
+        <li key={stage.name} className="flex items-center gap-3 pl-4 relative">
+          <div className="absolute left-[-5px] w-2 h-2 rounded-full bg-blue-500" />
+          <span className="text-sm">{stage.name}</span>
+          {stage.isAsync && (
+            <Badge intent="amber" className="ml-auto">
+              async
+            </Badge>
+          )}
+        </li>
+      ))}
+    </ol>
+  );
+});
+
+StageTimeline.displayName = "StageTimeline";

package/src/components/TaskAnalysisDisplay.jsx

@@ -0,0 +1,227 @@
+import React, { useState } from "react";
+import { Table } from "@radix-ui/themes";
+import { SidebarSection } from "./ui/sidebar.jsx";
+import { Badge } from "./ui/badge.jsx";
+import { Button } from "./ui/button.jsx";
+import { StageTimeline } from "./StageTimeline.jsx";
+import { SchemaPreviewPanel } from "./SchemaPreviewPanel.jsx";
+
+const formatDate = (isoString) => {
+  if (
+    !isoString ||
+    (typeof isoString !== "string" && !(isoString instanceof Date))
+  ) {
+    return "Unknown";
+  }
+
+  const date = isoString instanceof Date ? isoString : new Date(isoString);
+
+  if (Number.isNaN(date.getTime())) {
+    return "Unknown";
+  }
+
+  try {
+    return new Intl.DateTimeFormat("en-US", {
+      dateStyle: "medium",
+      timeStyle: "short",
+    }).format(date);
+  } catch {
+    return "Unknown";
+  }
+};
+
+const ArtifactTable = ({
+  artifacts,
+  showRequired,
+  emptyMessage,
+  onViewSchema,
+}) => {
+  if (artifacts.length === 0) {
+    return (
+      <div className="text-sm text-muted-foreground italic">{emptyMessage}</div>
+    );
+  }
+
+  return (
+    <Table.Root size="1">
+      <Table.Header>
+        <Table.Row>
+          <Table.ColumnHeaderCell>File</Table.ColumnHeaderCell>
+          <Table.ColumnHeaderCell>Stage</Table.ColumnHeaderCell>
+          {showRequired && (
+            <Table.ColumnHeaderCell>Required</Table.ColumnHeaderCell>
+          )}
+          <Table.ColumnHeaderCell>Actions</Table.ColumnHeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {artifacts.map((artifact, idx) => (
+          <Table.Row key={idx}>
+            <Table.Cell>
+              <code className="text-sm">{artifact.fileName}</code>
+            </Table.Cell>
+            <Table.Cell>
+              <Badge intent="blue">{artifact.stage}</Badge>
+            </Table.Cell>
+            {showRequired && (
+              <Table.Cell>
+                {artifact.required && <Badge intent="red">required</Badge>}
+              </Table.Cell>
+            )}
+            <Table.Cell>
+              {artifact.fileName.endsWith(".json") && (
+                <div className="flex gap-1">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => onViewSchema(artifact.fileName, "schema")}
+                  >
+                    Schema
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => onViewSchema(artifact.fileName, "sample")}
+                  >
+                    Sample
+                  </Button>
+                </div>
+              )}
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table.Root>
+  );
+};
+
+const ModelList = ({ models }) => {
+  if (models.length === 0) {
+    return <div className="text-sm text-muted-foreground">No models used</div>;
+  }
+
+  return (
+    <ul className="space-y-1 text-sm">
+      {models.map((model, idx) => (
+        <li key={idx} className="text-slate-700">
+          {model.provider}.{model.method} @ {model.stage}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export const TaskAnalysisDisplay = React.memo(
+  ({ analysis, loading, error, pipelineSlug }) => {
+    const [previewFile, setPreviewFile] = useState(null);
+    const [previewContent, setPreviewContent] = useState(null);
+    const [previewLoading, setPreviewLoading] = useState(false);
+    const [previewError, setPreviewError] = useState(null);
+
+    const handleViewSchema = async (fileName, type) => {
+      setPreviewFile({ fileName, type });
+      setPreviewLoading(true);
+      setPreviewError(null);
+      setPreviewContent(null);
+
+      try {
+        const res = await fetch(
+          `/api/pipelines/${encodeURIComponent(
+            pipelineSlug
+          )}/schemas/${encodeURIComponent(fileName)}?type=${type}`
+        );
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.message || "Failed to load");
+        setPreviewContent(data.data);
+      } catch (err) {
+        setPreviewError(err.message);
+      } finally {
+        setPreviewLoading(false);
+      }
+    };
+
+    const handleClosePreview = () => {
+      setPreviewFile(null);
+      setPreviewContent(null);
+      setPreviewError(null);
+    };
+
+    if (loading) {
+      return (
+        <div className="p-6 text-sm text-muted-foreground" aria-busy="true">
+          Loading analysis...
+        </div>
+      );
+    }
+
+    if (error) {
+      return (
+        <div className="p-6 text-sm text-red-600" role="alert">
+          {error}
+        </div>
+      );
+    }
+
+    if (analysis === null) {
+      return (
+        <div className="p-6 text-sm text-muted-foreground">
+          No analysis available
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <SidebarSection title="Artifacts">
+          <div className="space-y-4">
+            <div>
+              <h4 className="text-sm font-medium text-slate-700 mb-2">Reads</h4>
+              <ArtifactTable
+                artifacts={analysis.artifacts.reads}
+                showRequired
+                emptyMessage="No reads"
+                onViewSchema={handleViewSchema}
+              />
+            </div>
+            <div>
+              <h4 className="text-sm font-medium text-slate-700 mb-2">
+                Writes
+              </h4>
+              <ArtifactTable
+                artifacts={analysis.artifacts.writes}
+                showRequired={false}
+                emptyMessage="No writes"
+                onViewSchema={handleViewSchema}
+              />
+            </div>
+          </div>
+        </SidebarSection>
+
+        <SidebarSection title="Stages">
+          <StageTimeline stages={analysis.stages} />
+        </SidebarSection>
+
+        <SidebarSection title="Models">
+          <ModelList models={analysis.models} />
+        </SidebarSection>
+
+        <div className="px-6 pb-6 text-xs text-muted-foreground">
+          Analyzed at: {formatDate(analysis.analyzedAt)}
+        </div>
+
+        {previewFile && (
+          <SchemaPreviewPanel
+            fileName={previewFile.fileName}
+            type={previewFile.type}
+            content={previewContent}
+            loading={previewLoading}
+            error={previewError}
+            onClose={handleClosePreview}
+          />
+        )}
+      </div>
+    );
+  }
+);
+
+TaskAnalysisDisplay.displayName = "TaskAnalysisDisplay";