@ryanfw/prompt-orchestration-pipeline 0.0.1 → 0.3.0

package/src/components/JobCard.jsx

@@ -0,0 +1,96 @@
+import React from "react";
+import { Card, CardHeader, CardTitle, CardContent } from "./ui/card";
+import { Progress } from "./ui/progress";
+import { Clock, TimerReset, ChevronRight } from "lucide-react";
+import { fmtDuration, taskDisplayDurationMs } from "../utils/duration";
+import { countCompleted } from "../utils/jobs";
+import { progressClasses, statusBadge } from "../utils/ui";
+import { useTicker } from "../ui/client/hooks/useTicker";
+
+export default function JobCard({
+  job,
+  pipeline,
+  onClick,
+  progressPct,
+  overallElapsedMs,
+}) {
+  const now = useTicker(60000);
+  const currentTask = job.current ? job.tasks[job.current] : undefined;
+  const currentElapsedMs = currentTask
+    ? taskDisplayDurationMs(currentTask, now)
+    : 0;
+  const totalCompleted = countCompleted(job);
+  const hasValidId = Boolean(job.id);
+  const jobTitle = job.title || job.name; // Fallback for backward compatibility
+
+  return (
+    <Card
+      role="button"
+      tabIndex={hasValidId ? 0 : -1}
+      aria-label={
+        hasValidId
+          ? `Open ${jobTitle}`
+          : `${jobTitle} - No valid job ID, cannot open details`
+      }
+      onClick={() => hasValidId && onClick()}
+      onKeyDown={(e) =>
+        hasValidId && (e.key === "Enter" || e.key === " ") && onClick()
+      }
+      className={`group transition-colors rounded-xl border border-slate-200 ${
+        hasValidId
+          ? "cursor-pointer hover:bg-slate-100/40 hover:shadow-sm focus-visible:ring-2"
+          : "cursor-not-allowed opacity-60"
+      }`}
+      title={
+        hasValidId
+          ? undefined
+          : "This job cannot be opened because it lacks a valid ID"
+      }
+    >
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between gap-2">
+          <div>
+            <div className="text-xs text-slate-500">{job.jobId}</div>
+            <CardTitle className="text-lg font-semibold">{jobTitle}</CardTitle>
+          </div>
+          <div className="flex items-center gap-2">
+            {statusBadge(job.status)}
+            <ChevronRight className="h-4 w-4 opacity-50 group-hover:translate-x-0.5 transition-transform" />
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="pt-0">
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
+          <div className="font-semibold">
+            {currentTask
+              ? currentTask.name
+              : job.status === "completed"
+                ? "—"
+                : (job.current ?? "—")}
+          </div>
+          {currentTask && currentElapsedMs > 0 && (
+            <div className="text-slate-500">
+              {fmtDuration(currentElapsedMs)}
+            </div>
+          )}
+        </div>
+
+        <div className="mt-3">
+          <Progress
+            className={`h-2 ${progressClasses(job.status)}`}
+            value={progressPct}
+            aria-label={`Progress ${progressPct}%`}
+          />
+          <div className="mt-2 flex flex-wrap items-center justify-between text-sm text-slate-500">
+            <div>
+              {totalCompleted} of {pipeline.tasks.length} tasks
+            </div>
+            <div className="flex items-center gap-1 text-right">
+              <TimerReset className="h-4 w-4" /> {fmtDuration(overallElapsedMs)}
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/JobDetail.jsx

@@ -0,0 +1,159 @@
+import React, { useEffect, useState } from "react";
+import { fmtDuration } from "../utils/duration.js";
+import { taskDisplayDurationMs } from "../utils/duration.js";
+import { useTicker } from "../ui/client/hooks/useTicker.js";
+import DAGGrid from "./DAGGrid.jsx";
+import { computeDagItems, computeActiveIndex } from "../utils/dag.js";
+import { getTaskFilesForTask } from "../utils/task-files.js";
+
+export default function JobDetail({ job, pipeline, onClose, onResume }) {
+  const now = useTicker(1000);
+  const [resumeFrom, setResumeFrom] = useState(
+    pipeline?.tasks?.[0]
+      ? typeof pipeline.tasks[0] === "string"
+        ? pipeline.tasks[0]
+        : (pipeline.tasks[0].id ?? pipeline.tasks[0].name ?? "")
+      : ""
+  );
+
+  useEffect(() => {
+    setResumeFrom(
+      pipeline?.tasks?.[0]
+        ? typeof pipeline.tasks[0] === "string"
+          ? pipeline.tasks[0]
+          : (pipeline.tasks[0].id ?? pipeline.tasks[0].name ?? "")
+        : ""
+    );
+  }, [job.id, pipeline?.tasks?.length]);
+
+  // job.tasks is expected to be an object keyed by task name; normalize from array if needed
+  const taskById = React.useMemo(() => {
+    const tasks = job?.tasks;
+
+    let result;
+    if (!tasks) {
+      result = {};
+    } else if (Array.isArray(tasks)) {
+      const map = {};
+      for (const t of tasks) {
+        const key = t?.name;
+        if (key) {
+          map[key] = t;
+        }
+      }
+      result = map;
+    } else {
+      result = tasks;
+    }
+
+    return result;
+  }, [job?.tasks]);
+
+  // Compute pipeline tasks from pipeline or derive from job tasks
+  const computedPipeline = React.useMemo(() => {
+    let result;
+    if (pipeline?.tasks) {
+      result = pipeline;
+    } else {
+      // Derive pipeline tasks from job tasks object keys
+      const jobTasks = job?.tasks;
+
+      if (!jobTasks) {
+        result = { tasks: [] };
+      } else {
+        const taskKeys = Array.isArray(jobTasks)
+          ? jobTasks.map((t) => t?.name).filter(Boolean)
+          : Object.keys(jobTasks);
+
+        result = { tasks: taskKeys };
+      }
+    }
+
+    return result;
+  }, [pipeline, job?.tasks]);
+
+  // Compute DAG items and active index for visualization
+  const dagItems = React.useMemo(() => {
+    const rawDagItems = computeDagItems(job, computedPipeline);
+
+    const processedItems = rawDagItems.map((item, index) => {
+      if (process.env.NODE_ENV !== "test") {
+        console.debug("[JobDetail] computed DAG item", {
+          id: item.id,
+          status: item.status,
+          stage: item.stage,
+          jobHasTasks: !!job?.tasks,
+          taskKeys: job?.tasks ? Object.keys(job.tasks) : null,
+        });
+      }
+
+      const task = taskById[item.id];
+
+      const taskConfig = task?.config || {};
+
+      // Build subtitle with useful metadata when available (Tufte-inspired inline tokens)
+      const subtitleParts = [];
+      if (taskConfig?.model) {
+        subtitleParts.push(taskConfig.model);
+      }
+      if (taskConfig?.temperature != null) {
+        subtitleParts.push(`temp ${taskConfig.temperature}`);
+      }
+      if (task?.attempts != null) {
+        subtitleParts.push(`${task.attempts} attempts`);
+      }
+      if (task?.refinementAttempts != null) {
+        subtitleParts.push(`${task.refinementAttempts} refinements`);
+      }
+      if (task?.startedAt) {
+        const durationMs = taskDisplayDurationMs(task, now);
+        if (durationMs > 0) {
+          subtitleParts.push(fmtDuration(durationMs));
+        }
+      }
+
+      // Include error message in body when task status is error
+      const errorMsg = task?.error?.message;
+      const body = item.status === "failed" && errorMsg ? errorMsg : null;
+
+      const resultItem = {
+        ...item,
+        title:
+          typeof item.id === "string"
+            ? item.id
+            : item.id?.name || item.id?.id || `Task ${item.id}`,
+        subtitle: subtitleParts.length > 0 ? subtitleParts.join(" · ") : null,
+        body,
+      };
+
+      return resultItem;
+    });
+
+    return processedItems;
+  }, [job, computedPipeline, taskById, now]);
+
+  const activeIndex = React.useMemo(() => {
+    const index = computeActiveIndex(dagItems);
+
+    return index;
+  }, [dagItems]);
+
+  const filesByTypeForItem = React.useCallback(
+    (item) => {
+      if (!item) return { artifacts: [], logs: [], tmp: [] };
+      return getTaskFilesForTask(job, item.id ?? item.name ?? item);
+    },
+    [job]
+  );
+
+  return (
+    <div className="flex h-full flex-col">
+      <DAGGrid
+        items={dagItems}
+        activeIndex={activeIndex}
+        jobId={job.id}
+        filesByTypeForItem={filesByTypeForItem}
+      />
+    </div>
+  );
+}

package/src/components/JobTable.jsx

@@ -0,0 +1,202 @@
+import React from "react";
+import { Box, Flex, Table, Text, Button } from "@radix-ui/themes";
+import { Progress } from "./ui/progress";
+import { Clock, TimerReset, ChevronRight } from "lucide-react";
+import { fmtDuration } from "../utils/duration.js";
+import { taskDisplayDurationMs } from "../utils/duration.js";
+import { countCompleted } from "../utils/jobs";
+import { progressClasses, statusBadge } from "../utils/ui";
+
+export default function JobTable({
+  jobs,
+  pipeline,
+  onOpenJob,
+  overallElapsed,
+  now,
+}) {
+  if (jobs.length === 0) {
+    return (
+      <Box className="p-6">
+        <Text size="2" className="text-slate-600">
+          No jobs to show here yet.
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Table.Root radius="none">
+        <Table.Header>
+          <Table.Row>
+            <Table.ColumnHeaderCell>Job Name</Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell>Pipeline</Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell>Status</Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell>Current Task</Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell>Progress</Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell>Tasks</Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell>Duration</Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell className="w-12"></Table.ColumnHeaderCell>
+          </Table.Row>
+        </Table.Header>
+
+        <Table.Body>
+          {jobs.map((job) => {
+            const jobTitle = job.title || job.name; // Fallback for backward compatibility
+            const taskById = Array.isArray(job.tasks)
+              ? Object.fromEntries(
+                  (job.tasks || []).map((t) => {
+                    if (typeof t === "string") return [t, { id: t, name: t }];
+                    return [t.id ?? t.name, t];
+                  })
+                )
+              : job.tasks || {};
+            const currentTask = job.current ? taskById[job.current] : undefined;
+            const currentElapsedMs = currentTask
+              ? taskDisplayDurationMs(currentTask, now)
+              : 0;
+            const totalCompleted = countCompleted(job);
+            const totalTasks =
+              pipeline?.tasks?.length ??
+              (Array.isArray(job.tasks)
+                ? job.tasks.length
+                : Object.keys(job.tasks || {}).length);
+            const progress = Number.isFinite(job.progress)
+              ? Math.round(job.progress)
+              : 0;
+            const duration = overallElapsed(job);
+            const currentTaskName = currentTask
+              ? (currentTask.name ?? currentTask.id ?? job.current)
+              : undefined;
+            const currentTaskConfig =
+              (job.current &&
+                (currentTask?.config || pipeline?.taskConfig?.[job.current])) ||
+              {};
+
+            const hasValidId = Boolean(job.id);
+            return (
+              <Table.Row
+                key={job.id}
+                className={`group transition-colors ${
+                  hasValidId
+                    ? "cursor-pointer hover:bg-slate-50/50"
+                    : "cursor-not-allowed opacity-60"
+                }`}
+                onClick={() => hasValidId && onOpenJob(job)}
+                onKeyDown={(e) =>
+                  hasValidId &&
+                  (e.key === "Enter" || e.key === " ") &&
+                  onOpenJob(job)
+                }
+                tabIndex={hasValidId ? 0 : -1}
+                aria-label={
+                  hasValidId
+                    ? `Open ${jobTitle}`
+                    : `${jobTitle} - No valid job ID, cannot open details`
+                }
+                title={
+                  hasValidId
+                    ? undefined
+                    : "This job cannot be opened because it lacks a valid ID"
+                }
+              >
+                <Table.Cell>
+                  <Flex direction="column" gap="1">
+                    <Text size="2" weight="medium" className="text-slate-900">
+                      {jobTitle}
+                    </Text>
+                    <Text size="1" className="text-slate-500">
+                      {job.id}
+                    </Text>
+                  </Flex>
+                </Table.Cell>
+
+                <Table.Cell>
+                  <Flex direction="column" gap="1">
+                    <Text size="2" className="text-slate-900">
+                      {job.pipelineLabel || job.pipeline || "—"}
+                    </Text>
+                    {job.pipelineLabel && job.pipeline && (
+                      <Text size="1" className="text-slate-500">
+                        {job.pipeline}
+                      </Text>
+                    )}
+                  </Flex>
+                </Table.Cell>
+
+                <Table.Cell>{statusBadge(job.status)}</Table.Cell>
+
+                <Table.Cell>
+                  <Flex direction="column" gap="1">
+                    <Text size="2" className="text-slate-700">
+                      {currentTaskName
+                        ? currentTaskName
+                        : job.status === "completed"
+                          ? "—"
+                          : (job.current ?? "—")}
+                    </Text>
+                    {currentTask && (
+                      <Text size="1" className="text-slate-500">
+                        {[
+                          currentTaskConfig?.model || currentTask?.model,
+                          currentTaskConfig?.temperature != null ||
+                          currentTask?.temperature != null
+                            ? `temp ${currentTaskConfig?.temperature ?? currentTask?.temperature}`
+                            : null,
+                          currentElapsedMs > 0
+                            ? fmtDuration(currentElapsedMs)
+                            : null,
+                        ]
+                          .filter(Boolean)
+                          .join(" · ")}
+                      </Text>
+                    )}
+                  </Flex>
+                </Table.Cell>
+
+                <Table.Cell>
+                  <Flex direction="column" gap="2" className="w-32">
+                    <Progress
+                      className={`h-2 ${progressClasses(job.status)}`}
+                      value={progress}
+                      aria-label={`Progress ${progress}%`}
+                    />
+                    <Text size="1" className="text-slate-500">
+                      {progress}%
+                    </Text>
+                  </Flex>
+                </Table.Cell>
+
+                <Table.Cell>
+                  <Text size="2" className="text-slate-700">
+                    {totalCompleted} of {totalTasks}
+                  </Text>
+                </Table.Cell>
+
+                <Table.Cell>
+                  <Flex align="center" gap="1">
+                    <TimerReset className="h-3 w-3 text-slate-500" />
+                    <Text size="2" className="text-slate-700">
+                      {fmtDuration(duration)}
+                    </Text>
+                  </Flex>
+                </Table.Cell>
+
+                <Table.Cell>
+                  <Button
+                    variant="ghost"
+                    size="1"
+                    className="opacity-0 group-hover:opacity-100 transition-opacity text-slate-500 hover:text-slate-700"
+                    aria-label={`View details for ${jobTitle}`}
+                  >
+                    <ChevronRight className="h-4 w-4" />
+                  </Button>
+                </Table.Cell>
+              </Table.Row>
+            );
+          })}
+        </Table.Body>
+      </Table.Root>
+    </Box>
+  );
+}

package/src/components/Layout.jsx

@@ -0,0 +1,134 @@
+import React from "react";
+import { useNavigate, useLocation } 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 { ArrowLeft, Home } from "lucide-react";
+import "./ui/focus-styles.css";
+
+/**
+ * Shared Layout component that provides consistent header, navigation,
+ * and container structure across all pages.
+ */
+export default function Layout({
+  children,
+  title,
+  actions,
+  showBackButton = false,
+  backTo = "/",
+  maxWidth = "max-w-7xl",
+}) {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  // Determine active navigation based on current path
+  const isActivePath = (path) => {
+    if (path === "/" && location.pathname === "/") return true;
+    if (path !== "/" && location.pathname.startsWith(path)) return true;
+    return false;
+  };
+
+  const handleBack = () => {
+    navigate(backTo);
+  };
+
+  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"
+        >
+          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"
+          >
+            {/* Left side: Navigation and title */}
+            <Flex align="center" gap="3" className="min-w-0 flex-1">
+              {/* Back button (conditional) */}
+              {showBackButton && (
+                <Tooltip.Root delayDuration={200}>
+                  <Tooltip.Trigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={handleBack}
+                      className="shrink-0"
+                      aria-label="Go back"
+                    >
+                      <ArrowLeft className="h-4 w-4" />
+                    </Button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Content side="bottom" sideOffset={5}>
+                    <Text size="2">Go back</Text>
+                  </Tooltip.Content>
+                </Tooltip.Root>
+              )}
+
+              {/* App title */}
+              <Heading
+                size="5"
+                weight="medium"
+                className="text-gray-12 truncate"
+              >
+                {title || "Prompt Pipeline"}
+              </Heading>
+            </Flex>
+
+            {/* Center: Navigation */}
+            <nav
+              role="navigation"
+              aria-label="Main navigation"
+              className="hidden md:flex"
+            >
+              <Flex align="center" gap="6">
+                <RadixLink
+                  href="/"
+                  className={`text-sm font-medium transition-colors hover:text-blue-600 ${
+                    isActivePath("/")
+                      ? "text-blue-600"
+                      : "text-gray-11 hover:text-gray-12"
+                  }`}
+                  aria-current={isActivePath("/") ? "page" : undefined}
+                >
+                  <Flex align="center" gap="2">
+                    <Home className="h-4 w-4" />
+                    Dashboard
+                  </Flex>
+                </RadixLink>
+              </Flex>
+            </nav>
+
+            {/* Right side: Actions */}
+            {actions && (
+              <Flex align="center" gap="3" className="shrink-0">
+                {actions}
+              </Flex>
+            )}
+          </Flex>
+        </Box>
+
+        {/* Main content */}
+        <main
+          id="main-content"
+          role="main"
+          className={`mx-auto w-full ${maxWidth} px-4 sm:px-6 lg:px-8 py-6`}
+        >
+          {children}
+        </main>
+      </Box>
+    </Tooltip.Provider>
+  );
+}