@ryanfw/prompt-orchestration-pipeline 0.15.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ryanfw/prompt-orchestration-pipeline",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "A Prompt-orchestration pipeline (POP) is a framework for building, running, and experimenting with complex chains of LLM tasks.",
   "type": "module",
   "main": "src/ui/server.js",
@@ -45,6 +45,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/themes": "^3.2.1",
     "ajv": "^8.17.1",
+    "better-sqlite3": "^11.7.0",
     "chokidar": "^3.5.3",
     "commander": "^14.0.2",
     "dotenv": "^17.2.3",
@@ -52,9 +53,11 @@
     "fflate": "^0.8.2",
     "lucide-react": "^0.544.0",
     "openai": "^5.23.1",
+    "p-limit": "^6.1.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-markdown": "^10.1.0",
+    "react-mentions": "^4.4.10",
     "react-router-dom": "^7.9.4",
     "react-syntax-highlighter": "^15.6.1",
     "rehype-highlight": "^7.0.2",

package/src/components/Layout.jsx

@@ -18,6 +18,7 @@ export default function Layout({
   pageTitle,
   breadcrumbs,
   actions,
+  subheader,
   backTo = "/",
   maxWidth = "max-w-7xl",
 }) {
@@ -227,6 +228,9 @@ export default function Layout({
         </Box>
       )}
 
+      {/* Subheader slot */}
+      {subheader}
+
       {/* Main content */}
       <main
         id="main-content"

package/src/components/TaskCreationSidebar.jsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef } from "react";
+import { MentionsInput, Mention } from "react-mentions";
 import { Button } from "./ui/button.jsx";
 import { Sidebar, SidebarFooter } from "./ui/sidebar.jsx";
 import { MarkdownRenderer } from "./MarkdownRenderer.jsx";
@@ -6,6 +7,59 @@ import { MarkdownRenderer } from "./MarkdownRenderer.jsx";
 const TASK_PROPOSAL_REGEX =
   /\[TASK_PROPOSAL\]\r?\nFILENAME:\s*(\S+)\r?\nTASKNAME:\s*(\S+)\r?\nCODE:\s*```javascript\s*([\s\S]*?)\s*```\s*\[\/TASK_PROPOSAL\]/;
 
+const MENTION_REGEX = /@\[([^\]]+)\]\([^)]+\)/g;
+
+function renderWithMentions(content) {
+  const parts = [];
+  let lastIndex = 0;
+  let match;
+  const regex = new RegExp(MENTION_REGEX.source, "g");
+
+  while ((match = regex.exec(content)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(content.slice(lastIndex, match.index));
+    }
+    parts.push(
+      <span
+        key={match.index}
+        className="bg-primary/20 text-primary rounded-md px-1"
+      >
+        @{match[1]}
+      </span>
+    );
+    lastIndex = regex.lastIndex;
+  }
+
+  if (lastIndex < content.length) {
+    parts.push(content.slice(lastIndex));
+  }
+
+  return parts.length > 0 ? parts : content;
+}
+
+const mentionsInputStyle = {
+  control: {
+    backgroundColor: "var(--background)",
+    border: "1px solid var(--border)",
+  },
+  highlighter: {
+    overflow: "hidden",
+  },
+  input: {
+    padding: "0.5rem 0.75rem",
+  },
+  suggestions: {
+    marginTop: "1.5rem",
+    list: {
+      backgroundColor: "var(--card)",
+      border: "1px solid var(--border)",
+    },
+    item: {
+      padding: "0.5rem",
+    },
+  },
+};
+
 function parseTaskProposal(content) {
   const match = content.match(TASK_PROPOSAL_REGEX);
   if (!match) return null;
@@ -77,8 +131,31 @@ export default function TaskCreationSidebar({ isOpen, onClose, pipelineSlug }) {
   const [error, setError] = useState(null);
   const [taskProposals, setTaskProposals] = useState({});
   const [creatingTask, setCreatingTask] = useState({});
+  const [artifacts, setArtifacts] = useState([]);
+  const [activeTab, setActiveTab] = useState("conversation");
   const messagesEndRef = useRef(null);
 
+  // Fetch artifacts on mount
+  useEffect(() => {
+    if (!pipelineSlug) return;
+
+    const fetchArtifacts = async () => {
+      try {
+        const response = await fetch(
+          `/api/pipelines/${pipelineSlug}/artifacts`
+        );
+        if (response.ok) {
+          const data = await response.json();
+          setArtifacts(data.artifacts || []);
+        }
+      } catch (err) {
+        console.error("[TaskCreationSidebar] Failed to fetch artifacts:", err);
+      }
+    };
+
+    fetchArtifacts();
+  }, [pipelineSlug]);
+
   // Auto-scroll to bottom when messages change
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -125,6 +202,11 @@ export default function TaskCreationSidebar({ isOpen, onClose, pipelineSlug }) {
     onClose();
   };
 
+  const insertMention = (fileName) => {
+    setInput((prev) => prev + "@" + fileName + " ");
+    setActiveTab("conversation");
+  };
+
   const handleSend = (e) => {
     e.preventDefault();
 
@@ -333,55 +415,112 @@ export default function TaskCreationSidebar({ isOpen, onClose, pipelineSlug }) {
       description="Describe the task you want to create"
       contentClassName="flex flex-col max-h-screen"
     >
-      {/* Messages area */}
+      {/* Tab Header */}
+      <div className="flex border-b border-border">
+        <button
+          type="button"
+          onClick={() => setActiveTab("conversation")}
+          className={`flex-1 px-4 py-2 text-sm font-medium ${
+            activeTab === "conversation"
+              ? "bg-primary text-primary-foreground"
+              : "bg-muted text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          Conversation
+        </button>
+        <button
+          type="button"
+          onClick={() => setActiveTab("files")}
+          className={`flex-1 px-4 py-2 text-sm font-medium ${
+            activeTab === "files"
+              ? "bg-primary text-primary-foreground"
+              : "bg-muted text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          Files ({artifacts.length})
+        </button>
+      </div>
+
+      {/* Content area */}
       <div className="flex-1 overflow-y-auto p-6 space-y-4">
-        {messages.map((msg, i) => (
-          <div key={i}>
-            <div
-              className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}
-            >
-              <div
-                className={`rounded-lg p-3 max-w-full ${
-                  msg.role === "user"
-                    ? "bg-primary text-primary-foreground"
-                    : "bg-muted text-muted-foreground"
-                }`}
+        {activeTab === "files" ? (
+          /* File List */
+          artifacts.length === 0 ? (
+            <p className="text-muted-foreground text-sm">
+              No artifact files available.
+            </p>
+          ) : (
+            artifacts.map((artifact, i) => (
+              <button
+                key={i}
+                type="button"
+                onClick={() => insertMention(artifact.fileName)}
+                className="w-full text-left p-3 rounded-lg border border-border hover:bg-muted transition-colors"
               >
-                {msg.role === "assistant" ? (
-                  <>
-                    <MarkdownRenderer
-                      content={msg.content.replace(TASK_PROPOSAL_REGEX, "")}
-                    />
-                    {isWaiting && !msg.content && (
-                      <div className="flex items-center gap-1 text-muted-foreground mt-2">
-                        {Array.from({ length: 5 }).map((_, idx) => (
-                          <span
-                            key={idx}
-                            className="animate-bounce-wave"
-                            style={{ animationDelay: `${idx * 0.1}s` }}
-                          >
-                            •
-                          </span>
-                        ))}
-                      </div>
+                <p className="font-medium text-foreground">
+                  {artifact.fileName}
+                </p>
+                {artifact.sources && artifact.sources.length > 0 && (
+                  <p className="text-xs text-muted-foreground mt-1">
+                    {artifact.sources.map((s) => s.taskName).join(", ")}
+                  </p>
+                )}
+              </button>
+            ))
+          )
+        ) : (
+          /* Conversation Messages */
+          <>
+            {messages.map((msg, i) => (
+              <div key={i}>
+                <div
+                  className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}
+                >
+                  <div
+                    className={`rounded-lg p-3 max-w-full ${
+                      msg.role === "user"
+                        ? "bg-primary text-primary-foreground"
+                        : "bg-muted text-muted-foreground"
+                    }`}
+                  >
+                    {msg.role === "assistant" ? (
+                      <>
+                        <MarkdownRenderer
+                          content={msg.content.replace(TASK_PROPOSAL_REGEX, "")}
+                        />
+                        {isWaiting && !msg.content && (
+                          <div className="flex items-center gap-1 text-muted-foreground mt-2">
+                            {Array.from({ length: 5 }).map((_, idx) => (
+                              <span
+                                key={idx}
+                                className="animate-bounce-wave"
+                                style={{ animationDelay: `${idx * 0.1}s` }}
+                              >
+                                •
+                              </span>
+                            ))}
+                          </div>
+                        )}
+                      </>
+                    ) : (
+                      <p className="whitespace-pre-wrap">
+                        {renderWithMentions(msg.content)}
+                      </p>
                     )}
-                  </>
-                ) : (
-                  <p className="whitespace-pre-wrap">{msg.content}</p>
+                  </div>
+                </div>
+                {taskProposals[i] && (
+                  <TaskProposalCard
+                    proposal={taskProposals[i]}
+                    isCreating={creatingTask[i]}
+                    onCreate={() => handleCreateTask(i, taskProposals[i])}
+                  />
                 )}
               </div>
-            </div>
-            {taskProposals[i] && (
-              <TaskProposalCard
-                proposal={taskProposals[i]}
-                isCreating={creatingTask[i]}
-                onCreate={() => handleCreateTask(i, taskProposals[i])}
-              />
-            )}
-          </div>
-        ))}
-
-        <div ref={messagesEndRef} />
+            ))}
+            <div ref={messagesEndRef} />
+          </>
+        )}
 
         {error && (
           <div className="mt-4 p-4 bg-destructive/10 border border-destructive/20 rounded-lg">
@@ -418,15 +557,27 @@ export default function TaskCreationSidebar({ isOpen, onClose, pipelineSlug }) {
       {/* Input area */}
       <SidebarFooter className="bg-card">
         <form onSubmit={handleSend} className="w-full">
-          <textarea
+          <MentionsInput
             value={input}
-            onChange={(e) => setInput(e.target.value)}
+            onChange={(e, newValue) => setInput(newValue)}
             disabled={isSending || isWaiting || isReceiving}
             placeholder="Describe the task you want to create..."
             rows={3}
             className="w-full border rounded-md px-3 py-2 resize-none disabled:bg-muted disabled:cursor-not-allowed mb-3 focus:outline-none focus:ring-2 focus:ring-ring bg-background"
             aria-label="Task description input"
-          />
+            style={mentionsInputStyle}
+          >
+            <Mention
+              trigger="@"
+              markup="@[__display__](__id__)"
+              data={artifacts.map((a) => ({
+                id: a.fileName,
+                display: a.fileName,
+              }))}
+              displayTransform={(id, display) => `@${display}`}
+              className="bg-primary/20 text-primary rounded-md px-1"
+            />
+          </MentionsInput>
           <div className="flex justify-end">
             <Button
               variant="solid"

package/src/components/ui/CopyableCode.jsx

@@ -0,0 +1,110 @@
+import React, { useState } from "react";
+import { Box, Code } from "@radix-ui/themes";
+import { Button } from "./button.jsx";
+import { Copy, Check } from "lucide-react";
+
+/**
+ * CopyableCode component - displays code with a copy button
+ * Follows Tufte principles: minimal chrome, high data-ink ratio
+ */
+export function CopyableCode({
+  children,
+  className = "",
+  block = false,
+  size = "2",
+}) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    const text = typeof children === "string" ? children : String(children);
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  if (block) {
+    return (
+      <Box className={`relative group ${className}`}>
+        <pre className="text-sm bg-gray-50 p-4 rounded-lg overflow-auto border border-gray-200 font-mono">
+          {children}
+        </pre>
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={handleCopy}
+          className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity h-7 w-7 p-0"
+          aria-label={copied ? "Copied" : "Copy code"}
+        >
+          {copied ? (
+            <Check className="h-3.5 w-3.5 text-green-600" />
+          ) : (
+            <Copy className="h-3.5 w-3.5" />
+          )}
+        </Button>
+      </Box>
+    );
+  }
+
+  return (
+    <span className={`inline-flex items-center gap-1 group ${className}`}>
+      <Code size={size}>{children}</Code>
+      <button
+        onClick={handleCopy}
+        className="opacity-0 group-hover:opacity-100 transition-opacity p-0.5 hover:bg-gray-100 rounded"
+        aria-label={copied ? "Copied" : "Copy code"}
+      >
+        {copied ? (
+          <Check className="h-3 w-3 text-green-600" />
+        ) : (
+          <Copy className="h-3 w-3 text-gray-500" />
+        )}
+      </button>
+    </span>
+  );
+}
+
+/**
+ * CopyableCodeBlock - larger block display with syntax-like formatting
+ */
+export function CopyableCodeBlock({ children, className = "", maxHeight }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    const text = typeof children === "string" ? children : String(children);
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <Box className={`relative group ${className}`}>
+      <pre
+        className="text-sm bg-gray-50 p-4 rounded-lg overflow-auto border border-gray-200 font-mono leading-relaxed"
+        style={maxHeight ? { maxHeight } : undefined}
+      >
+        {children}
+      </pre>
+      <Button
+        size="sm"
+        variant="ghost"
+        onClick={handleCopy}
+        className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity h-8 px-2 bg-white/80 hover:bg-white border border-gray-200"
+        aria-label={copied ? "Copied" : "Copy code"}
+      >
+        {copied ? (
+          <>
+            <Check className="h-3.5 w-3.5 text-green-600 mr-1" />
+            <span className="text-xs text-green-600">Copied</span>
+          </>
+        ) : (
+          <>
+            <Copy className="h-3.5 w-3.5 mr-1" />
+            <span className="text-xs">Copy</span>
+          </>
+        )}
+      </Button>
+    </Box>
+  );
+}
+
+export default CopyableCode;