@ryanfw/prompt-orchestration-pipeline 0.6.0 → 0.7.0

package/src/llm/index.js

@@ -1,7 +1,15 @@
 import { openaiChat } from "../providers/openai.js";
 import { deepseekChat } from "../providers/deepseek.js";
+import { anthropicChat } from "../providers/anthropic.js";
+import { geminiChat } from "../providers/gemini.js";
+import { zhipuChat } from "../providers/zhipu.js";
 import { EventEmitter } from "node:events";
 import { getConfig } from "../core/config.js";
+import {
+  MODEL_CONFIG,
+  DEFAULT_MODEL_BY_PROVIDER,
+  aliasToFunctionName,
+} from "../config/models.js";
 import fs from "node:fs";
 
 // Global mock provider instance (for demo/testing)
@@ -44,6 +52,8 @@ export function getAvailableProviders() {
     openai: !!process.env.OPENAI_API_KEY,
     deepseek: !!process.env.DEEPSEEK_API_KEY,
     anthropic: !!process.env.ANTHROPIC_API_KEY,
+    gemini: !!process.env.GEMINI_API_KEY,
+    zhipu: !!process.env.ZHIPU_API_KEY,
     mock: !!mockProviderInstance,
   };
 }
@@ -53,36 +63,28 @@ export function estimateTokens(text) {
   return Math.ceil((text || "").length / 4);
 }
 
-// Calculate cost based on provider and model
+// Calculate cost based on provider and model, derived from config
 export function calculateCost(provider, model, usage) {
-  const pricing = {
-    mock: {
-      "gpt-3.5-turbo": { prompt: 0.0005, completion: 0.0015 },
-      "gpt-4": { prompt: 0.03, completion: 0.06 },
-      "gpt-4-turbo": { prompt: 0.01, completion: 0.03 },
-    },
-    openai: {
-      "gpt-5-chat-latest": { prompt: 0.015, completion: 0.06 },
-      "gpt-4": { prompt: 0.03, completion: 0.06 },
-      "gpt-4-turbo": { prompt: 0.01, completion: 0.03 },
-      "gpt-3.5-turbo": { prompt: 0.0005, completion: 0.0015 },
-    },
-    deepseek: {
-      "deepseek-reasoner": { prompt: 0.001, completion: 0.002 },
-      "deepseek-chat": { prompt: 0.0005, completion: 0.001 },
-    },
-    anthropic: {
-      "claude-3-opus": { prompt: 0.015, completion: 0.075 },
-      "claude-3-sonnet": { prompt: 0.003, completion: 0.015 },
-    },
-  };
+  if (!usage) {
+    // Fallback for missing usage
+    return 0;
+  }
+
+  const modelConfig = Object.values(MODEL_CONFIG).find(
+    (cfg) => cfg.provider === provider && cfg.model === model
+  );
+
+  if (!modelConfig) {
+    return 0;
+  }
 
-  const modelPricing = pricing[provider]?.[model];
-  if (!modelPricing || !usage) return 0;
+  // Convert per-million pricing to per-1k for calculation
+  const promptCostPer1k = modelConfig.tokenCostInPerMillion / 1000;
+  const completionCostPer1k = modelConfig.tokenCostOutPerMillion / 1000;
 
-  const promptCost = ((usage.promptTokens || 0) / 1000) * modelPricing.prompt;
+  const promptCost = ((usage.promptTokens || 0) / 1000) * promptCostPer1k;
   const completionCost =
-    ((usage.completionTokens || 0) / 1000) * modelPricing.completion;
+    ((usage.completionTokens || 0) / 1000) * completionCostPer1k;
 
   return promptCost + completionCost;
 }
@@ -116,12 +118,15 @@ export async function chat(options) {
   const startTime = Date.now();
   const requestId = `req_${Date.now()}_${Math.random().toString(36).substring(7)}`;
 
+  // Default to JSON mode if not specified
+  const finalResponseFormat = responseFormat ?? "json";
+
   // Extract system and user messages
   const systemMsg = messages.find((m) => m.role === "system")?.content || "";
   const userMessages = messages.filter((m) => m.role === "user");
   const userMsg = userMessages.map((m) => m.content).join("\n");
 
-  // DEBUG write the messages to /tmp/messages.log for debugging
+  // DEBUG write_to_file messages to /tmp/messages.log for debugging
   fs.writeFileSync(
     "/tmp/messages.log",
     JSON.stringify({ messages, systemMsg, userMsg, provider, model }, null, 2)
@@ -173,8 +178,7 @@ export async function chat(options) {
         maxTokens,
         ...rest,
       };
-      if (responseFormat !== undefined)
-        openaiArgs.responseFormat = responseFormat;
+      openaiArgs.responseFormat = finalResponseFormat;
       if (topP !== undefined) openaiArgs.topP = topP;
       if (frequencyPenalty !== undefined)
         openaiArgs.frequencyPenalty = frequencyPenalty;
@@ -222,8 +226,7 @@ export async function chat(options) {
       if (presencePenalty !== undefined)
         deepseekArgs.presencePenalty = presencePenalty;
       if (stop !== undefined) deepseekArgs.stop = stop;
-      if (responseFormat !== undefined)
-        deepseekArgs.responseFormat = responseFormat;
+      deepseekArgs.responseFormat = finalResponseFormat;
 
       const result = await deepseekChat(deepseekArgs);
 
@@ -250,6 +253,128 @@ export async function chat(options) {
           totalTokens: promptTokens + completionTokens,
         };
       }
+    } else if (provider === "anthropic") {
+      const defaultAlias = DEFAULT_MODEL_BY_PROVIDER.anthropic;
+      const defaultModelConfig = MODEL_CONFIG[defaultAlias];
+      const defaultModel = defaultModelConfig?.model;
+
+      const anthropicArgs = {
+        messages,
+        model: model || defaultModel,
+        temperature,
+        maxTokens,
+        ...rest,
+      };
+      if (topP !== undefined) anthropicArgs.topP = topP;
+      if (stop !== undefined) anthropicArgs.stop = stop;
+      anthropicArgs.responseFormat = finalResponseFormat;
+
+      const result = await anthropicChat(anthropicArgs);
+
+      response = {
+        content: result.content,
+        raw: result.raw,
+      };
+
+      // Use actual usage from anthropic API if available; otherwise estimate
+      if (result?.usage) {
+        const { prompt_tokens, completion_tokens, total_tokens } = result.usage;
+        usage = {
+          promptTokens: prompt_tokens,
+          completionTokens: completion_tokens,
+          totalTokens: total_tokens,
+        };
+      } else {
+        const promptTokens = estimateTokens(systemMsg + userMsg);
+        const completionTokens = estimateTokens(
+          typeof result === "string" ? result : JSON.stringify(result)
+        );
+        usage = {
+          promptTokens,
+          completionTokens,
+          totalTokens: promptTokens + completionTokens,
+        };
+      }
+    } else if (provider === "gemini") {
+      const geminiArgs = {
+        messages,
+        model: model || "gemini-2.5-flash",
+        temperature,
+        maxTokens,
+        ...rest,
+      };
+      if (topP !== undefined) geminiArgs.topP = topP;
+      if (stop !== undefined) geminiArgs.stop = stop;
+      geminiArgs.responseFormat = finalResponseFormat;
+
+      const result = await geminiChat(geminiArgs);
+
+      response = {
+        content: result.content,
+        raw: result.raw,
+      };
+
+      // Use actual usage from gemini API if available; otherwise estimate
+      if (result?.usage) {
+        const { prompt_tokens, completion_tokens, total_tokens } = result.usage;
+        usage = {
+          promptTokens: prompt_tokens,
+          completionTokens: completion_tokens,
+          totalTokens: total_tokens,
+        };
+      } else {
+        const promptTokens = estimateTokens(systemMsg + userMsg);
+        const completionTokens = estimateTokens(
+          typeof result === "string" ? result : JSON.stringify(result)
+        );
+        usage = {
+          promptTokens,
+          completionTokens,
+          totalTokens: promptTokens + completionTokens,
+        };
+      }
+    } else if (provider === "zhipu") {
+      const defaultAlias = DEFAULT_MODEL_BY_PROVIDER.zhipu;
+      const defaultModelConfig = MODEL_CONFIG[defaultAlias];
+      const defaultModel = defaultModelConfig?.model;
+
+      const zhipuArgs = {
+        messages,
+        model: model || defaultModel,
+        temperature,
+        maxTokens,
+        ...rest,
+      };
+      if (topP !== undefined) zhipuArgs.topP = topP;
+      if (stop !== undefined) zhipuArgs.stop = stop;
+      zhipuArgs.responseFormat = finalResponseFormat;
+
+      const result = await zhipuChat(zhipuArgs);
+
+      response = {
+        content: result.content,
+        raw: result.raw,
+      };
+
+      // Use actual usage from zhipu API if available; otherwise estimate
+      if (result?.usage) {
+        const { prompt_tokens, completion_tokens, total_tokens } = result.usage;
+        usage = {
+          promptTokens: prompt_tokens,
+          completionTokens: completion_tokens,
+          totalTokens: total_tokens,
+        };
+      } else {
+        const promptTokens = estimateTokens(systemMsg + userMsg);
+        const completionTokens = estimateTokens(
+          typeof result === "string" ? result : JSON.stringify(result)
+        );
+        usage = {
+          promptTokens,
+          completionTokens,
+          totalTokens: promptTokens + completionTokens,
+        };
+      }
     } else {
       throw new Error(`Provider ${provider} not yet implemented`);
     }
@@ -292,19 +417,6 @@ export async function chat(options) {
   }
 }
 
-// Helper to convert model alias to camelCase function name
-function toCamelCase(alias) {
-  const [provider, ...modelParts] = alias.split(":");
-  const model = modelParts.join("-");
-
-  // Convert to camelCase (handle both letters and numbers after hyphens)
-  const camelModel = model.replace(/-([a-z0-9])/g, (match, char) =>
-    char.toUpperCase()
-  );
-
-  return camelModel;
-}
-
 // Build provider-grouped functions from registry
 function buildProviderFunctions(models) {
   const functions = {};
@@ -324,7 +436,7 @@ function buildProviderFunctions(models) {
     functions[provider] = {};
 
     for (const [alias, modelConfig] of Object.entries(providerModels)) {
-      const functionName = toCamelCase(alias);
+      const functionName = aliasToFunctionName(alias);
 
       functions[provider][functionName] = (options = {}) => {
         // Respect provider overrides in options (last-write-wins)
@@ -460,25 +572,28 @@ export async function parallel(workerFn, items, concurrency = 5) {
 
 // Create a bound LLM interface - for named-models tests, only return provider functions
 export function createLLM() {
-  const config = getConfig();
-
-  // Build functions from registry
-  const providerFunctions = buildProviderFunctions(config.llm.models);
+  // Build functions from centralized registry
+  const providerFunctions = buildProviderFunctions(MODEL_CONFIG);
 
   return providerFunctions;
 }
 
+// Create named models API (explicit function for clarity)
+export function createNamedModelsAPI() {
+  return buildProviderFunctions(MODEL_CONFIG);
+}
+
 // Separate function for high-level LLM interface (used by llm.test.js)
 export function createHighLevelLLM(options = {}) {
   // Skip config check in tests to avoid PO_ROOT requirement
   const isTest =
     process.env.NODE_ENV === "test" || process.env.VITEST === "true";
-  const config = isTest ? { llm: { models: {} } } : getConfig();
+  const config = isTest ? { llm: { defaultProvider: "openai" } } : getConfig();
   const defaultProvider =
     options.defaultProvider || (isTest ? "openai" : config.llm.defaultProvider);
 
-  // Build functions from registry
-  const providerFunctions = buildProviderFunctions(config.llm.models);
+  // Build functions from centralized registry
+  const providerFunctions = buildProviderFunctions(MODEL_CONFIG);
 
   return {
     // High-level interface methods

package/src/pages/Code.jsx

@@ -203,8 +203,6 @@ export default function CodePage() {
   topP?: number,
   frequencyPenalty?: number,
   presencePenalty?: number,
-  tools?: Array<{type: "function", function: object}>,
-  toolChoice?: "auto" | "required" | { type: "function", function: { name: string } },
   seed?: number,
   provider?: string,
   model?: string,
@@ -245,6 +243,62 @@ export default function CodePage() {
           </Box>
         )}
 
+        <Heading size="6" mt="8" mb="4">
+          Validation API
+        </Heading>
+        <Text as="p" mb="3" size="2">
+          Schema validation helper available to task stages via validators.
+        </Text>
+        <Box mb="4">
+          <Heading size="4" mb="2">
+            Function Signature
+          </Heading>
+          <Code size="3">
+            {`validateWithSchema(schema: object, data: object | string): { valid: true } | { valid: false, errors: AjvError[] }`}
+          </Code>
+          <Heading size="4" mb="2" mt="4">
+            Behavior
+          </Heading>
+          <ul className="list-disc list-inside mb-4 space-y-1">
+            <li className="text-sm text-gray-700">
+              <Text as="span">
+                Parses string data to JSON; on parse failure returns{" "}
+                {`{ valid:false, errors:[{ keyword:"type", message:"must be a valid JSON object (string parsing failed)"} ]`}
+              </Text>
+            </li>
+            <li className="text-sm text-gray-700">
+              <Text as="span">
+                Uses Ajv({`{ allErrors: true, strict: false }`}); compiles
+                provided schema
+              </Text>
+            </li>
+            <li className="text-sm text-gray-700">
+              <Text as="span">Returns AJV errors array when invalid</Text>
+            </li>
+          </ul>
+          <Heading size="4" mb="2">
+            Source
+          </Heading>
+          <Code size="3">src/api/validators/json.js</Code>
+          <Heading size="4" mb="2" mt="4">
+            Usage Example
+          </Heading>
+          <Code size="3">{`export const validateStructure = async ({
+  io,
+  flags,
+  validators: { validateWithSchema },
+}) => {
+  const content = await io.readArtifact("research-output.json");
+  const result = validateWithSchema(researchJsonSchema, content);
+
+  if (!result.valid) {
+    console.warn("[Research:validateStructure] Validation failed", result.errors);
+    return { output: {}, flags: { ...flags, validationFailed: true } };
+  }
+  return { output: {}, flags };
+};`}</Code>
+        </Box>
+
         <Heading size="6" mt="8" mb="4">
           Environment Configuration
         </Heading>
@@ -284,7 +338,7 @@ export default function CodePage() {
                 </Table.Row>
                 <Table.Row>
                   <Table.RowHeaderCell>
-                    <Code size="3">Z_API_KEY=</Code>
+                    <Code size="3">ZHIPU_API_KEY=</Code>
                   </Table.RowHeaderCell>
                 </Table.Row>
               </Table.Body>

package/src/pages/PipelineDetail.jsx

@@ -1,11 +1,13 @@
 import React from "react";
-import { useParams } from "react-router-dom";
+import { data, useParams } from "react-router-dom";
 import { Box, Flex, Text } from "@radix-ui/themes";
+import * as Tooltip from "@radix-ui/react-tooltip";
 import JobDetail from "../components/JobDetail.jsx";
 import { useJobDetailWithUpdates } from "../ui/client/hooks/useJobDetailWithUpdates.js";
 import Layout from "../components/Layout.jsx";
 import PageSubheader from "../components/PageSubheader.jsx";
 import { statusBadge } from "../utils/ui.jsx";
+import { formatCurrency4, formatTokensCompact } from "../utils/formatters.js";
 
 export default function PipelineDetail() {
   const { jobId } = useParams();
@@ -15,11 +17,7 @@ export default function PipelineDetail() {
     return (
       <Layout
         pageTitle="Pipeline Details"
-        breadcrumbs={[
-          { label: "Home", href: "/" },
-          { label: "Pipeline Details" },
-        ]}
-        showBackButton={true}
+        breadcrumbs={[{ label: "Home", href: "/" }]}
       >
         <Flex align="center" justify="center" className="min-h-64">
           <Box className="text-center">
@@ -32,17 +30,30 @@ export default function PipelineDetail() {
     );
   }
 
-  const { data: job, loading, error } = useJobDetailWithUpdates(jobId);
+  const {
+    data: job,
+    loading,
+    error,
+    isRefreshing,
+    isHydrated,
+  } = useJobDetailWithUpdates(jobId);
 
-  if (loading) {
+  // Only show loading screen on initial load, not during refresh
+  const showLoadingScreen = loading && !isHydrated;
+
+  if (showLoadingScreen) {
     return (
       <Layout
         pageTitle="Pipeline Details"
         breadcrumbs={[
           { label: "Home", href: "/" },
-          { label: "Pipeline Details" },
+          {
+            label:
+              job && job?.pipelineLabel
+                ? job.pipelineLabel
+                : "Pipeline Details",
+          },
         ]}
-        showBackButton={true}
       >
         <Flex align="center" justify="center" className="min-h-64">
           <Box className="text-center">
@@ -61,9 +72,13 @@ export default function PipelineDetail() {
         pageTitle="Pipeline Details"
         breadcrumbs={[
           { label: "Home", href: "/" },
-          { label: "Pipeline Details" },
+          {
+            label:
+              job && job?.pipelineLabel
+                ? job.pipelineLabel
+                : "Pipeline Details",
+          },
         ]}
-        showBackButton={true}
       >
         <Flex align="center" justify="center" className="min-h-64">
           <Box className="text-center">
@@ -80,14 +95,14 @@ export default function PipelineDetail() {
   }
 
   if (!job) {
+    const pipelineDisplay = "Pipeline Details";
     return (
       <Layout
         pageTitle="Pipeline Details"
         breadcrumbs={[
           { label: "Home", href: "/" },
-          { label: "Pipeline Details" },
+          { label: job.pipelineLabel || "Pipeline Details" },
         ]}
-        showBackButton={true}
       >
         <Flex align="center" justify="center" className="min-h-64">
           <Box className="text-center">
@@ -119,30 +134,85 @@ export default function PipelineDetail() {
     })();
 
   const pageTitle = job.name || "Pipeline Details";
+
   const breadcrumbs = [
     { label: "Home", href: "/" },
-    { label: "Pipeline Details" },
+    {
+      label: job && job?.pipelineLabel ? job.pipelineLabel : "Pipeline Details",
+    },
     ...(job.name ? [{ label: job.name }] : []),
   ];
 
-  // Right side content for PageSubheader: job ID and status badge
+  // Derive cost data from job object with safe fallbacks
+  const totalCost = job?.totalCost || job?.costs?.summary?.totalCost || 0;
+  const totalTokens = job?.totalTokens || job?.costs?.summary?.totalTokens || 0;
+  const totalInputTokens = job?.costs?.summary?.totalInputTokens || 0;
+  const totalOutputTokens = job?.costs?.summary?.totalOutputTokens || 0;
+
+  // Create cost indicator with tooltip when token data is available
+  const costIndicator = (
+    <Text size="2" color="gray">
+      Cost: {totalCost > 0 ? formatCurrency4(totalCost) : "—"}
+    </Text>
+  );
+
+  const costIndicatorWithTooltip =
+    totalCost > 0 && totalTokens > 0 ? (
+      <Tooltip.Provider delayDuration={100}>
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Box
+              className="cursor-help border-b border-dotted border-gray-400 hover:border-gray-600 transition-colors"
+              aria-label={`Total cost: ${formatCurrency4(totalCost)}, ${formatTokensCompact(totalTokens)}`}
+            >
+              {costIndicator}
+            </Box>
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content
+              className="bg-gray-900 text-white px-2 py-1 rounded text-xs max-w-xs"
+              sideOffset={5}
+            >
+              <div className="space-y-1">
+                <div className="font-semibold">
+                  {formatTokensCompact(totalTokens)}
+                </div>
+                {totalInputTokens > 0 && totalOutputTokens > 0 && (
+                  <div className="text-gray-300">
+                    Input: {formatTokensCompact(totalInputTokens)} • Output:{" "}
+                    {formatTokensCompact(totalOutputTokens)}
+                  </div>
+                )}
+              </div>
+              <Tooltip.Arrow className="fill-gray-900" />
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      </Tooltip.Provider>
+    ) : (
+      costIndicator
+    );
+
+  // Right side content for PageSubheader: job ID, cost indicator, and status badge
   const subheaderRightContent = (
-    <Flex align="center" gap="3" className="shrink-0">
+    <Flex align="center" gap="3" className="shrink-0 flex-wrap">
       <Text size="2" color="gray">
         ID: {job.id || jobId}
       </Text>
+      {costIndicatorWithTooltip}
       {statusBadge(job.status)}
     </Flex>
   );
 
   return (
-    <Layout
-      pageTitle={pageTitle}
-      breadcrumbs={breadcrumbs}
-      showBackButton={true}
-    >
+    <Layout pageTitle={pageTitle} breadcrumbs={breadcrumbs}>
       <PageSubheader breadcrumbs={breadcrumbs} maxWidth="max-w-7xl">
         {subheaderRightContent}
+        {isRefreshing && (
+          <Text size="2" color="blue" className="ml-3 animate-pulse">
+            Refreshing...
+          </Text>
+        )}
       </PageSubheader>
       <JobDetail job={job} pipeline={pipeline} />
     </Layout>

package/src/pages/PromptPipelineDashboard.jsx

@@ -1,14 +1,13 @@
 // PromptPipelineDashboard.jsx
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { Box, Flex, Text, Heading, Tabs } from "@radix-ui/themes";
+import { Box, Flex, Text, Tabs } from "@radix-ui/themes";
 
 import { Progress } from "../components/ui/progress";
 import { useJobListWithUpdates } from "../ui/client/hooks/useJobListWithUpdates";
 import { adaptJobSummary } from "../ui/client/adapters/job-adapter";
-import { jobCumulativeDurationMs } from "../utils/duration";
-import { useTicker } from "../ui/client/hooks/useTicker";
+import { TaskState, JobStatus } from "../config/statuses.js";
 
 // Referenced components — leave these alone
 import JobTable from "../components/JobTable";
@@ -55,40 +54,39 @@ export default function PromptPipelineDashboard({ isConnected }) {
   }, [apiJobs, error]);
   const [activeTab, setActiveTab] = useState("current");
 
-  // Shared ticker for live duration updates
-  const now = useTicker(10000);
+  // Shared ticker for live duration updates - removed useTicker
 
   const errorCount = useMemo(
-    () => jobs.filter((j) => j.status === "failed").length,
+    () => jobs.filter((j) => j.status === TaskState.FAILED).length,
     [jobs]
   );
   const currentCount = useMemo(
-    () => jobs.filter((j) => j.status === "running").length,
+    () => jobs.filter((j) => j.status === TaskState.RUNNING).length,
     [jobs]
   );
   const completedCount = useMemo(
-    () => jobs.filter((j) => j.status === "complete").length,
+    () => jobs.filter((j) => j.status === JobStatus.COMPLETE).length,
     [jobs]
   );
 
   const filteredJobs = useMemo(() => {
     switch (activeTab) {
       case "current":
-        return jobs.filter((j) => j.status === "running");
+        return jobs.filter((j) => j.status === TaskState.RUNNING);
       case "errors":
-        return jobs.filter((j) => j.status === "failed");
+        return jobs.filter((j) => j.status === TaskState.FAILED);
       case "complete":
-        return jobs.filter((j) => j.status === "complete");
+        return jobs.filter((j) => j.status === JobStatus.COMPLETE);
       default:
         return [];
     }
   }, [jobs, activeTab]);
 
-  const overallElapsed = (job) => jobCumulativeDurationMs(job, now);
+  // overallElapsed function removed - JobTable now uses LiveText for duration calculations
 
   // Aggregate progress for currently running jobs (for a subtle top progress bar)
   const runningJobs = useMemo(
-    () => jobs.filter((j) => j.status === "running"),
+    () => jobs.filter((j) => j.status === TaskState.RUNNING),
     [jobs]
   );
   const aggregateProgress = useMemo(() => {
@@ -142,33 +140,14 @@ export default function PromptPipelineDashboard({ isConnected }) {
             Completed ({completedCount})
           </Tabs.Trigger>
         </Tabs.List>
-
         <Tabs.Content value="current">
-          <JobTable
-            jobs={filteredJobs}
-            pipeline={null}
-            onOpenJob={openJob}
-            overallElapsed={overallElapsed}
-            now={now}
-          />
+          <JobTable jobs={filteredJobs} pipeline={null} onOpenJob={openJob} />
         </Tabs.Content>
         <Tabs.Content value="errors">
-          <JobTable
-            jobs={filteredJobs}
-            pipeline={null}
-            onOpenJob={openJob}
-            overallElapsed={overallElapsed}
-            now={now}
-          />
+          <JobTable jobs={filteredJobs} pipeline={null} onOpenJob={openJob} />
         </Tabs.Content>
         <Tabs.Content value="complete">
-          <JobTable
-            jobs={filteredJobs}
-            pipeline={null}
-            onOpenJob={openJob}
-            overallElapsed={overallElapsed}
-            now={now}
-          />
+          <JobTable jobs={filteredJobs} pipeline={null} onOpenJob={openJob} />
         </Tabs.Content>
       </Tabs.Root>
     </Layout>