@ryanfw/prompt-orchestration-pipeline 0.11.0 → 0.13.0

package/src/components/JobTable.jsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { Box, Flex, Table, Text, Button } from "@radix-ui/themes";
+import { Box, Flex, Table, Text } from "@radix-ui/themes";
 import { Progress } from "./ui/progress";
+import { Button } from "./ui/button.jsx";
 import { TimerReset, ChevronRight } from "lucide-react";
 import { fmtDuration, jobCumulativeDurationMs } from "../utils/duration.js";
 import { countCompleted } from "../utils/jobs";
@@ -234,8 +235,8 @@ export default function JobTable({ jobs, pipeline, onOpenJob }) {
                 <Table.Cell>
                   <Button
                     variant="ghost"
-                    size="1"
-                    className="opacity-0 group-hover:opacity-100 transition-opacity text-slate-500 hover:text-slate-700"
+                    size="sm"
+                    className="opacity-0 group-hover:opacity-100 transition-opacity"
                     aria-label={`View details for ${jobTitle}`}
                   >
                     <ChevronRight className="h-4 w-4" />

package/src/components/Layout.jsx

@@ -1,12 +1,11 @@
 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 Logo from "./ui/Logo.jsx";
 import PageSubheader from "./PageSubheader.jsx";
 import UploadSeed from "./UploadSeed.jsx";
-import { ArrowLeft, Code2, Upload } from "lucide-react";
+import { Code2, Upload, List } from "lucide-react";
 import "./ui/focus-styles.css";
 
 /**
@@ -85,153 +84,157 @@ export default function Layout({
   }, [isUploadOpen]);
 
   return (
-    <Tooltip.Provider delayDuration={200}>
-      <Box className="min-h-screen bg-gray-1">
-        {/* Skip to main content link for accessibility */}
-        <Box
-          as="a"
-          href="#main-content"
-          className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 z-50 bg-blue-600 text-white px-3 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+    <Box className="min-h-screen bg-gray-1">
+      {/* Skip to main content link for accessibility */}
+      <Box
+        as="a"
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 z-50 bg-primary text-primary-foreground px-3 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 transition-colors"
+      >
+        Skip to main content
+      </Box>
+
+      {/* Header */}
+      <Box
+        role="banner"
+        className="sticky top-0 z-20 border-b border-gray-300 bg-gray-1/80 backdrop-blur supports-[backdrop-filter]:bg-gray-1/60"
+      >
+        <Flex
+          align="center"
+          justify="between"
+          className={`mx-auto w-full ${maxWidth} px-4 sm:px-6 lg:px-8 py-4`}
+          gap="4"
         >
-          Skip to main content
-        </Box>
+          {/* Left side: Navigation and title */}
+          <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 - 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("/")}
+            >
+              <Heading
+                size="6"
+                weight="medium"
+                className="text-gray-12 truncate"
+              >
+                <>
+                  Prompt
+                  <br />
+                  Pipeline
+                </>
+              </Heading>
+            </Box>
+          </Flex>
+
+          {/* Center: Navigation */}
+          <nav
+            role="navigation"
+            aria-label="Main navigation"
+            className="hidden md:flex"
+          >
+            <Flex align="center" gap="6">
+              <RadixLink
+                href="/pipelines"
+                className={`text-sm font-medium transition-colors hover:text-blue-600 ${
+                  isActivePath("/pipelines")
+                    ? "text-blue-600"
+                    : "text-gray-11 hover:text-gray-12"
+                }`}
+                aria-current={isActivePath("/pipelines") ? "page" : undefined}
+              >
+                <Flex align="center" gap="2">
+                  <List className="h-4 w-4" />
+                  Pipelines
+                </Flex>
+              </RadixLink>
+              <RadixLink
+                href="/code"
+                className={`text-sm font-medium transition-colors hover:text-blue-600 ${
+                  isActivePath("/code")
+                    ? "text-blue-600"
+                    : "text-gray-11 hover:text-gray-12"
+                }`}
+                aria-current={isActivePath("/code") ? "page" : undefined}
+              >
+                <Flex align="center" gap="2">
+                  <Code2 className="h-4 w-4" />
+                  Help
+                </Flex>
+              </RadixLink>
+            </Flex>
+          </nav>
+
+          {/* Right side: Actions */}
+          <Flex align="center" gap="3" className="shrink-0">
+            {actions}
+            <Button
+              size="md"
+              variant="solid"
+              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>
+          </Flex>
+        </Flex>
+      </Box>
 
-        {/* Header */}
+      {/* Upload Panel */}
+      {isUploadOpen && (
         <Box
-          role="banner"
-          className="sticky top-0 z-20 border-b border-gray-300 bg-gray-1/80 backdrop-blur supports-[backdrop-filter]:bg-gray-1/60"
+          id="layout-upload-panel"
+          ref={uploadPanelRef}
+          role="region"
+          aria-label="Upload seed file"
+          className="bg-blue-50"
         >
           <Flex
-            align="center"
-            justify="between"
+            direction="column"
+            gap="3"
             className={`mx-auto w-full ${maxWidth} px-4 sm:px-6 lg:px-8 py-4`}
-            gap="4"
           >
-            {/* Left side: Navigation and title */}
-            <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 - 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("/")}
-              >
-                <Heading
-                  size="6"
-                  weight="medium"
-                  className="text-gray-12 truncate"
-                >
-                  <>
-                    Prompt
-                    <br />
-                    Pipeline
-                  </>
-                </Heading>
+            {/* 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>
-            </Flex>
+            )}
 
-            {/* Center: Navigation */}
-            <nav
-              role="navigation"
-              aria-label="Main navigation"
-              className="hidden md:flex"
-            >
-              <Flex align="center" gap="6">
-                <RadixLink
-                  href="/code"
-                  className={`text-sm font-medium transition-colors hover:text-blue-600 ${
-                    isActivePath("/code")
-                      ? "text-blue-600"
-                      : "text-gray-11 hover:text-gray-12"
-                  }`}
-                  aria-current={isActivePath("/code") ? "page" : undefined}
-                >
-                  <Flex align="center" gap="2">
-                    <Code2 className="h-4 w-4" />
-                    Help
-                  </Flex>
-                </RadixLink>
-              </Flex>
-            </nav>
-
-            {/* Right side: Actions */}
-            <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>
+            <UploadSeed onUploadSuccess={handleSeedUploadSuccess} />
           </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`}
-        >
-          {children}
-        </main>
-      </Box>
-    </Tooltip.Provider>
+      )}
+
+      {/* Main content */}
+      <main
+        id="main-content"
+        role="main"
+        className={`mx-auto w-full ${maxWidth} px-4 sm:px-6 lg:px-8`}
+      >
+        {children}
+      </main>
+    </Box>
   );
 }

package/src/components/MarkdownRenderer.jsx

@@ -0,0 +1,149 @@
+import React, { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
+import "highlight.js/styles/github-dark.css";
+
+/**
+ * MarkdownRenderer component for rendering markdown content with syntax highlighting
+ * @param {Object} props - Component props
+ * @param {string} props.content - Markdown content to render
+ * @param {string} props.className - Additional CSS classes
+ */
+export function MarkdownRenderer({ content, className = "" }) {
+  const [copiedCode, setCopiedCode] = useState(null);
+
+  // Handle code copy
+  const handleCopyCode = async (code) => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopiedCode(code);
+      setTimeout(() => setCopiedCode(null), 2000);
+    } catch (err) {
+      console.error("Failed to copy code:", err);
+    }
+  };
+
+  // Custom code block component with copy button
+  const CodeBlock = ({ children, className: codeClassName }) => {
+    const language = codeClassName?.replace("language-", "") || "text";
+    const code = React.Children.toArray(children).join("");
+    const isCopied = copiedCode === code;
+
+    return (
+      <div className="relative group">
+        <pre className="!bg-muted !text-foreground rounded-lg p-4 overflow-x-auto mt-3 mb-3">
+          <code className={codeClassName}>{children}</code>
+        </pre>
+        <button
+          onClick={() => handleCopyCode(code)}
+          className="absolute top-2 right-2 bg-muted-foreground/80 text-background text-xs px-2 py-1 rounded hover:bg-muted-foreground transition-opacity opacity-0 group-hover:opacity-100"
+          aria-label="Copy code to clipboard"
+        >
+          {isCopied ? "Copied!" : "Copy"}
+        </button>
+        {language !== "text" && (
+          <span className="absolute top-2 left-2 text-xs text-muted-foreground">
+            {language}
+          </span>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div
+      className={`!max-w-none prose prose-sm dark:prose-invert ${className}`}
+    >
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeHighlight]}
+        components={{
+          code: CodeBlock,
+          h1: ({ children }) => (
+            <h1 className="text-xl font-bold mb-3 text-foreground">
+              {children}
+            </h1>
+          ),
+          h2: ({ children }) => (
+            <h2 className="text-lg font-semibold mb-2 text-foreground">
+              {children}
+            </h2>
+          ),
+          h3: ({ children }) => (
+            <h3 className="text-base font-medium mb-2 text-foreground">
+              {children}
+            </h3>
+          ),
+          p: ({ children }) => (
+            <p className="mb-3 text-foreground leading-relaxed">{children}</p>
+          ),
+          ul: ({ children }) => (
+            <ul className="list-disc pl-5 mb-3 space-y-1 text-foreground">
+              {children}
+            </ul>
+          ),
+          ol: ({ children }) => (
+            <ol className="list-decimal pl-5 mb-3 space-y-1 text-foreground">
+              {children}
+            </ol>
+          ),
+          li: ({ children }) => <li className="ml-2">{children}</li>,
+          a: ({ children, href }) => (
+            <a
+              href={href}
+              className="text-primary hover:text-primary/80 underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {children}
+            </a>
+          ),
+          blockquote: ({ children }) => (
+            <blockquote className="border-l-4 border-primary/50 pl-4 py-2 my-3 bg-muted/30 italic text-foreground/80">
+              {children}
+            </blockquote>
+          ),
+          table: ({ children }) => (
+            <div className="overflow-x-auto my-4">
+              <table className="min-w-full border-collapse border border-border text-foreground">
+                {children}
+              </table>
+            </div>
+          ),
+          thead: ({ children }) => (
+            <thead className="bg-muted/50">{children}</thead>
+          ),
+          tbody: ({ children }) => <tbody>{children}</tbody>,
+          tr: ({ children }) => (
+            <tr className="border-b border-border hover:bg-muted/20">
+              {children}
+            </tr>
+          ),
+          th: ({ children }) => (
+            <th className="border border-border px-4 py-2 text-left font-semibold">
+              {children}
+            </th>
+          ),
+          td: ({ children }) => (
+            <td className="border border-border px-4 py-2">{children}</td>
+          ),
+          hr: () => <hr className="my-4 border-border" />,
+          strong: ({ children }) => (
+            <strong className="font-bold text-foreground">{children}</strong>
+          ),
+          em: ({ children }) => (
+            <em className="italic text-foreground">{children}</em>
+          ),
+          del: ({ children }) => (
+            <del className="line-through text-muted-foreground">{children}</del>
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
+export default MarkdownRenderer;