@ryanfw/prompt-orchestration-pipeline 0.5.0 → 0.7.0

package/src/utils/duration.js

@@ -1,6 +1,7 @@
 /**
  * Duration policy utilities for consistent time display across components
  */
+import { TaskState, normalizeTaskState } from "../config/statuses.js";
 
 /**
  * Normalizes task state names to canonical values
@@ -8,21 +9,15 @@
  * @returns {string} Normalized state
  */
 export function normalizeState(state) {
-  switch (state) {
-    case "done":
-      return "completed";
-    case "failed":
-    case "error":
-      return "error";
-    case "pending":
-    case "running":
-    case "current":
-    case "completed":
-    case "rejected":
-      return state;
-    default:
-      return state; // Pass through unknown states
+  // Use centralized normalization, then map to duration-specific canonical forms
+  const canonicalState = normalizeTaskState(state);
+
+  // Duration utilities use "completed" instead of "done" for legacy compatibility
+  if (canonicalState === TaskState.DONE) {
+    return "completed";
   }
+
+  return canonicalState;
 }
 
 /**
@@ -36,18 +31,17 @@ export function taskDisplayDurationMs(task, now = Date.now()) {
   const normalizedState = normalizeState(state);
 
   switch (normalizedState) {
-    case "pending":
+    case TaskState.PENDING:
       return 0;
 
-    case "running":
-    case "current":
+    case TaskState.RUNNING:
       if (!startedAt) {
         return 0;
       }
       const startTime = Date.parse(startedAt);
       return Math.max(0, now - startTime);
 
-    case "completed":
+    case "completed": // Duration utilities still use "completed" for legacy compatibility
       // Prefer executionTimeMs or executionTime if available, even without startedAt
       const execTime =
         executionTimeMs != null ? executionTimeMs : executionTime;
@@ -63,7 +57,7 @@ export function taskDisplayDurationMs(task, now = Date.now()) {
       const endTime = endedAt ? Date.parse(endedAt) : now;
       return Math.max(0, endTime - completedStartTime);
 
-    case "rejected":
+    case TaskState.FAILED:
       return 0;
 
     default:

package/src/utils/formatters.js

@@ -0,0 +1,27 @@
+/**
+ * Format currency with 4 decimal places, trimming trailing zeros
+ * @param {number} x - The number to format
+ * @returns {string} Formatted currency string
+ */
+export function formatCurrency4(x) {
+  if (typeof x !== "number" || x === 0) return "$0.0000";
+  const formatted = x.toFixed(4);
+  // Trim trailing zeros and unnecessary decimal point
+  return `$${formatted.replace(/\.?0+$/, "")}`;
+}
+
+/**
+ * Format tokens in compact notation (k, M suffixes)
+ * @param {number} n - The number of tokens to format
+ * @returns {string} Formatted tokens string
+ */
+export function formatTokensCompact(n) {
+  if (typeof n !== "number" || n === 0) return "0 tok";
+
+  if (n >= 1000000) {
+    return `${(n / 1000000).toFixed(1).replace(/\.0$/, "")}M tokens`;
+  } else if (n >= 1000) {
+    return `${(n / 1000).toFixed(1).replace(/\.0$/, "")}k tokens`;
+  }
+  return `${n} tokens`;
+}

package/src/utils/geometry-equality.js

@@ -0,0 +1,83 @@
+/**
+ * Compare two geometry snapshots for layout-relevant changes using tolerance.
+ * @param {Object} prev - Previous geometry snapshot
+ * @param {Object} next - New geometry snapshot
+ * @param {number} epsilon - Tolerance in pixels for floating-point differences (default: 0.5)
+ * @returns {boolean} true if geometries are effectively equal for rendering purposes
+ */
+export function areGeometriesEqual(prev, next, epsilon = 0.5) {
+  // Strict equality shortcut
+  if (prev === next) return true;
+  if (!prev || !next) return false;
+
+  // Compare top-level scalars
+  if (prev.itemsLength !== next.itemsLength) return false;
+  if (prev.effectiveCols !== next.effectiveCols) return false;
+
+  // Compare overlay box numeric fields only (DOMRect may have non-numeric props)
+  if (!areOverlayBoxesEqual(prev.overlayBox, next.overlayBox, epsilon)) {
+    return false;
+  }
+
+  // Compare boxes array length and each box's layout-relevant fields
+  const prevBoxes = prev.boxes;
+  const nextBoxes = next.boxes;
+  if (prevBoxes.length !== nextBoxes.length) return false;
+
+  for (let i = 0; i < prevBoxes.length; i++) {
+    if (!areBoxesEqual(prevBoxes[i], nextBoxes[i], epsilon)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/**
+ * Compare overlay box numeric fields with tolerance.
+ * @param {DOMRect|Object} a
+ * @param {DOMRect|Object} b
+ * @param {number} epsilon
+ * @returns {boolean}
+ */
+function areOverlayBoxesEqual(a, b, epsilon) {
+  return (
+    areNumbersClose(a.left, b.left, epsilon) &&
+    areNumbersClose(a.top, b.top, epsilon) &&
+    areNumbersClose(a.width, b.width, epsilon) &&
+    areNumbersClose(a.height, b.height, epsilon) &&
+    areNumbersClose(a.right, b.right, epsilon) &&
+    areNumbersClose(a.bottom, b.bottom, epsilon)
+  );
+}
+
+/**
+ * Compare individual card box layout fields with tolerance.
+ * @param {Object} a - box object with left/top/width/height/right/bottom/headerMidY
+ * @param {Object} b - box object with same shape
+ * @param {number} epsilon
+ * @returns {boolean}
+ */
+function areBoxesEqual(a, b, epsilon) {
+  if (!a || !b) return a === b;
+  return (
+    areNumbersClose(a.left, b.left, epsilon) &&
+    areNumbersClose(a.top, b.top, epsilon) &&
+    areNumbersClose(a.width, b.width, epsilon) &&
+    areNumbersClose(a.height, b.height, epsilon) &&
+    areNumbersClose(a.right, b.right, epsilon) &&
+    areNumbersClose(a.bottom, b.bottom, epsilon) &&
+    areNumbersClose(a.headerMidY, b.headerMidY, epsilon)
+  );
+}
+
+/**
+ * Numeric comparison with tolerance.
+ * @param {number} a
+ * @param {number} b
+ * @param {number} epsilon
+ * @returns {boolean}
+ */
+function areNumbersClose(a, b, epsilon) {
+  return Math.abs(a - b) <= epsilon;
+}

package/src/utils/pipelines.js

@@ -33,8 +33,12 @@ export function derivePipelineMetadata(source = {}) {
       ? pipelineSlugFromSource
       : null);
 
+  // Also return string pipeline value directly if it's a string
+  const stringPipeline =
+    typeof pipelineValue === "string" ? pipelineValue : null;
+
   return {
-    pipeline,
+    pipeline: pipeline || stringPipeline,
     pipelineSlug:
       typeof pipelineSlugFromSource === "string"
         ? pipelineSlugFromSource

package/src/utils/time-utils.js

@@ -0,0 +1,40 @@
+/**
+ * Time utilities for handling timestamp conversions
+ */
+
+/**
+ * Converts a timestamp string or number to milliseconds since epoch
+ * @param {string|number|null|undefined} timestamp - ISO string, milliseconds, or null/undefined
+ * @returns {number|null} Milliseconds since epoch, or null if input is invalid
+ */
+export function toMilliseconds(timestamp) {
+  if (timestamp === null || timestamp === undefined) {
+    return null;
+  }
+
+  // If it's already a number, return as-is
+  if (typeof timestamp === "number") {
+    return isNaN(timestamp) ? null : timestamp;
+  }
+
+  // If it's a string, try to parse it as an ISO date
+  if (typeof timestamp === "string") {
+    const parsed = Date.parse(timestamp);
+    return isNaN(parsed) ? null : parsed;
+  }
+
+  // Invalid type
+  return null;
+}
+
+/**
+ * Safely converts startedAt/endedAt timestamps for TimerText components
+ * @param {Object} task - Task object with startedAt and/or endedAt
+ * @returns {Object} Object with startMs and endMs as numbers or null
+ */
+export function taskToTimerProps(task) {
+  return {
+    startMs: toMilliseconds(task?.startedAt),
+    endMs: toMilliseconds(task?.endedAt),
+  };
+}

package/src/utils/token-cost-calculator.js

@@ -0,0 +1,294 @@
+/**
+ * Token usage and cost calculation utilities
+ *
+ * This module provides functions to calculate costs from token usage data
+ * by cross-referencing with LLM model pricing configuration.
+ */
+
+import { MODEL_CONFIG } from "../config/models.js";
+
+/**
+ * Calculate cost for a single token usage entry
+ * @param {Array} tokenUsageEntry - [modelKey, inputTokens, outputTokens]
+ * @param {Object} modelsConfig - LLM models configuration
+ * @returns {Object} Cost calculation result
+ */
+export function calculateSingleTokenCost(tokenUsageEntry, modelsConfig = null) {
+  if (!Array.isArray(tokenUsageEntry) || tokenUsageEntry.length < 3) {
+    return {
+      modelKey: null,
+      inputTokens: 0,
+      outputTokens: 0,
+      totalTokens: 0,
+      inputCost: 0,
+      outputCost: 0,
+      totalCost: 0,
+    };
+  }
+
+  const [modelKey, inputTokens, outputTokens] = tokenUsageEntry;
+
+  // Get models config if not provided
+  const config = modelsConfig || MODEL_CONFIG;
+  const modelConfig = config[modelKey];
+
+  if (!modelConfig) {
+    console.warn(
+      `[token-cost-calculator] Model configuration not found for: ${modelKey}`
+    );
+    return {
+      modelKey,
+      inputTokens: Number(inputTokens) || 0,
+      outputTokens: Number(outputTokens) || 0,
+      totalTokens: (Number(inputTokens) || 0) + (Number(outputTokens) || 0),
+      inputCost: 0,
+      outputCost: 0,
+      totalCost: 0,
+    };
+  }
+
+  const inputCost =
+    ((Number(inputTokens) || 0) * (modelConfig.tokenCostInPerMillion || 0)) /
+    1_000_000;
+  const outputCost =
+    ((Number(outputTokens) || 0) * (modelConfig.tokenCostOutPerMillion || 0)) /
+    1_000_000;
+  const totalCost = inputCost + outputCost;
+
+  return {
+    modelKey,
+    inputTokens: Number(inputTokens) || 0,
+    outputTokens: Number(outputTokens) || 0,
+    totalTokens: (Number(inputTokens) || 0) + (Number(outputTokens) || 0),
+    inputCost: Math.round(inputCost * 10000) / 10000, // Round to 4 decimal places
+    outputCost: Math.round(outputCost * 10000) / 10000,
+    totalCost: Math.round(totalCost * 10000) / 10000,
+    provider: modelConfig.provider,
+    model: modelConfig.model,
+  };
+}
+
+/**
+ * Calculate costs for multiple token usage entries
+ * @param {Array} tokenUsageArray - Array of [modelKey, inputTokens, outputTokens] entries
+ * @param {Object} modelsConfig - LLM models configuration
+ * @returns {Object} Aggregated cost calculation
+ */
+export function calculateMultipleTokenCosts(
+  tokenUsageArray,
+  modelsConfig = null
+) {
+  if (!Array.isArray(tokenUsageArray) || tokenUsageArray.length === 0) {
+    return {
+      entries: [],
+      summary: {
+        totalInputTokens: 0,
+        totalOutputTokens: 0,
+        totalTokens: 0,
+        totalInputCost: 0,
+        totalOutputCost: 0,
+        totalCost: 0,
+        modelBreakdown: {},
+      },
+    };
+  }
+
+  const entries = tokenUsageArray.map((entry) =>
+    calculateSingleTokenCost(entry, modelsConfig)
+  );
+
+  // Aggregate totals
+  const summary = entries.reduce(
+    (acc, entry) => {
+      acc.totalInputTokens += entry.inputTokens;
+      acc.totalOutputTokens += entry.outputTokens;
+      acc.totalTokens += entry.totalTokens;
+      acc.totalInputCost += entry.inputCost;
+      acc.totalOutputCost += entry.outputCost;
+      acc.totalCost += entry.totalCost;
+
+      // Model breakdown
+      const modelKey = entry.modelKey;
+      if (!acc.modelBreakdown[modelKey]) {
+        acc.modelBreakdown[modelKey] = {
+          provider: entry.provider,
+          model: entry.model,
+          inputTokens: 0,
+          outputTokens: 0,
+          totalTokens: 0,
+          inputCost: 0,
+          outputCost: 0,
+          totalCost: 0,
+          requestCount: 0,
+        };
+      }
+
+      const breakdown = acc.modelBreakdown[modelKey];
+      breakdown.inputTokens += entry.inputTokens;
+      breakdown.outputTokens += entry.outputTokens;
+      breakdown.totalTokens += entry.totalTokens;
+      breakdown.inputCost += entry.inputCost;
+      breakdown.outputCost += entry.outputCost;
+      breakdown.totalCost += entry.totalCost;
+      breakdown.requestCount += 1;
+
+      return acc;
+    },
+    {
+      totalInputTokens: 0,
+      totalOutputTokens: 0,
+      totalTokens: 0,
+      totalInputCost: 0,
+      totalOutputCost: 0,
+      totalCost: 0,
+      modelBreakdown: {},
+    }
+  );
+
+  // Round all cost values in summary
+  summary.totalInputCost = Math.round(summary.totalInputCost * 10000) / 10000;
+  summary.totalOutputCost = Math.round(summary.totalOutputCost * 10000) / 10000;
+  summary.totalCost = Math.round(summary.totalCost * 10000) / 10000;
+
+  // Round model breakdown costs
+  Object.values(summary.modelBreakdown).forEach((breakdown) => {
+    breakdown.inputCost = Math.round(breakdown.inputCost * 10000) / 10000;
+    breakdown.outputCost = Math.round(breakdown.outputCost * 10000) / 10000;
+    breakdown.totalCost = Math.round(breakdown.totalCost * 10000) / 10000;
+  });
+
+  return { entries, summary };
+}
+
+/**
+ * Extract and calculate token usage costs from tasks-status.json data
+ * @param {Object} tasksStatus - The tasks-status.json content
+ * @param {string} taskName - Optional specific task name to calculate for
+ * @returns {Object} Cost calculation for entire job or specific task
+ */
+export function calculateJobCosts(tasksStatus, taskName = null) {
+  if (!tasksStatus || typeof tasksStatus !== "object") {
+    return {
+      jobLevel: {
+        entries: [],
+        summary: {
+          totalInputTokens: 0,
+          totalOutputTokens: 0,
+          totalTokens: 0,
+          totalInputCost: 0,
+          totalOutputCost: 0,
+          totalCost: 0,
+          modelBreakdown: {},
+        },
+      },
+      tasksLevel: {},
+    };
+  }
+
+  const tasks = tasksStatus.tasks || {};
+
+  // If specific task requested, calculate only for that task
+  if (taskName && tasks[taskName]) {
+    const taskTokenUsage = tasks[taskName].tokenUsage || [];
+    const taskCosts = calculateMultipleTokenCosts(taskTokenUsage);
+
+    return {
+      jobLevel: taskCosts,
+      tasksLevel: {
+        [taskName]: taskCosts,
+      },
+    };
+  }
+
+  // Calculate for all tasks
+  const tasksLevel = {};
+  const allEntries = [];
+  const allTuples = [];
+
+  for (const [currentTaskName, taskData] of Object.entries(tasks)) {
+    const taskTokenUsage = taskData.tokenUsage || [];
+    const taskCosts = calculateMultipleTokenCosts(taskTokenUsage);
+    tasksLevel[currentTaskName] = taskCosts;
+    allEntries.push(...taskCosts.entries);
+    allTuples.push(...taskTokenUsage);
+  }
+
+  // Calculate job-level aggregation from raw tuples
+  const jobLevel = calculateMultipleTokenCosts(allTuples);
+
+  return {
+    jobLevel,
+    tasksLevel,
+  };
+}
+
+/**
+ * Format cost data for API response
+ * @param {Object} costData - Cost calculation data
+ * @returns {Object} Formatted cost data for API
+ */
+export function formatCostDataForAPI(costData) {
+  const { jobLevel, tasksLevel } = costData;
+
+  return {
+    summary: {
+      totalInputTokens: jobLevel.summary.totalInputTokens,
+      totalOutputTokens: jobLevel.summary.totalOutputTokens,
+      totalTokens: jobLevel.summary.totalTokens,
+      totalInputCost: jobLevel.summary.totalInputCost,
+      totalOutputCost: jobLevel.summary.totalOutputCost,
+      totalCost: jobLevel.summary.totalCost,
+    },
+    modelBreakdown: jobLevel.summary.modelBreakdown,
+    taskBreakdown: Object.entries(tasksLevel).reduce(
+      (acc, [taskName, taskData]) => {
+        acc[taskName] = {
+          summary: taskData.summary,
+          entries: taskData.entries,
+        };
+        return acc;
+      },
+      {}
+    ),
+  };
+}
+
+/**
+ * Get model pricing information
+ * @param {string} modelKey - Model key (e.g., "openai:gpt-5-mini")
+ * @returns {Object|null} Model pricing information
+ */
+export function getModelPricing(modelKey) {
+  const modelConfig = MODEL_CONFIG[modelKey];
+
+  if (!modelConfig) {
+    return null;
+  }
+
+  return {
+    modelKey,
+    provider: modelConfig.provider,
+    model: modelConfig.model,
+    inputCostPerMillion: modelConfig.tokenCostInPerMillion,
+    outputCostPerMillion: modelConfig.tokenCostOutPerMillion,
+  };
+}
+
+/**
+ * Get all available model pricing information
+ * @returns {Object} All model pricing information
+ */
+export function getAllModelPricing() {
+  const pricing = {};
+  for (const [modelKey, modelConfig] of Object.entries(MODEL_CONFIG)) {
+    pricing[modelKey] = {
+      modelKey,
+      provider: modelConfig.provider,
+      model: modelConfig.model,
+      inputCostPerMillion: modelConfig.tokenCostInPerMillion,
+      outputCostPerMillion: modelConfig.tokenCostOutPerMillion,
+    };
+  }
+
+  return pricing;
+}

package/src/utils/ui.jsx

@@ -1,31 +1,31 @@
 import React from "react";
 import { Badge } from "../components/ui/badge.jsx";
 import { CheckCircle2, Loader2, AlertTriangle, Circle } from "lucide-react";
+import { TaskState } from "../config/statuses.js";
 
 export const statusBadge = (status) => {
   switch (status) {
-    case "running":
+    case TaskState.RUNNING:
       return (
-        <Badge variant="info" aria-label="Running">
+        <Badge intent="blue" aria-label="Running">
           Running
         </Badge>
       );
-    case "failed":
+    case TaskState.FAILED:
       return (
-        <Badge variant="error" aria-label="Failed">
+        <Badge intent="red" aria-label="Failed">
           Failed
         </Badge>
       );
-    case "completed":
-    case "complete":
+    case TaskState.DONE:
       return (
-        <Badge variant="success" aria-label="Completed">
+        <Badge intent="green" aria-label="Completed">
           Completed
         </Badge>
       );
-    case "pending":
+    case TaskState.PENDING:
       return (
-        <Badge variant="default" aria-label="Pending">
+        <Badge intent="gray" aria-label="Pending">
           Pending
         </Badge>
       );
@@ -36,12 +36,11 @@ export const statusBadge = (status) => {
 
 export const taskStatusIcon = (state) => {
   switch (state) {
-    case "completed":
-    case "complete":
+    case TaskState.DONE:
       return <CheckCircle2 className="h-4 w-4 text-success" aria-hidden />;
-    case "running":
+    case TaskState.RUNNING:
       return <Loader2 className="h-4 w-4 animate-spin text-info" aria-hidden />;
-    case "failed":
+    case TaskState.FAILED:
       return <AlertTriangle className="h-4 w-4 text-destructive" aria-hidden />;
     default:
       return <Circle className="h-4 w-4 text-slate-500" aria-hidden />;
@@ -50,11 +49,11 @@ export const taskStatusIcon = (state) => {
 
 export const progressClasses = (status) => {
   switch (status) {
-    case "running":
+    case TaskState.RUNNING:
       return "bg-info/20 [&>div]:bg-info";
-    case "failed":
+    case TaskState.FAILED:
       return "bg-destructive/20 [&>div]:bg-destructive";
-    case "completed":
+    case TaskState.DONE:
       return "bg-success/20 [&>div]:bg-success";
     default:
       return "bg-muted [&>div]:bg-muted-foreground";
@@ -63,12 +62,11 @@ export const progressClasses = (status) => {
 
 export const barColorForState = (state) => {
   switch (state) {
-    case "running":
+    case TaskState.RUNNING:
       return "bg-info";
-    case "failed":
+    case TaskState.FAILED:
       return "bg-destructive";
-    case "completed":
-    case "complete":
+    case TaskState.DONE:
       return "bg-success";
     default:
       return "bg-muted-foreground";

package/src/components/ui/select.jsx

@@ -1,27 +0,0 @@
-import React from "react";
-export function Select({ value, onValueChange, children, className = "" }) {
-  return (
-    <select
-      className={[
-        "h-9 rounded-md border px-3 text-sm bg-white",
-        className,
-      ].join(" ")}
-      value={value}
-      onChange={(e) => onValueChange?.(e.target.value)}
-    >
-      {children}
-    </select>
-  );
-}
-export function SelectItem({ value, children }) {
-  return <option value={value}>{children}</option>;
-}
-export function SelectTrigger({ children, ...p }) {
-  return <>{children}</>;
-} // keep API compatible
-export function SelectContent({ children }) {
-  return <>{children}</>;
-}
-export function SelectValue({ placeholder }) {
-  return <>{placeholder}</>;
-}

package/src/lib/utils.js

@@ -1,6 +0,0 @@
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}

package/src/ui/client/hooks/useTicker.js

@@ -1,26 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-
-/**
- * Reactive ticker hook that provides updating timestamp
- * @param {number} intervalMs - Update interval in milliseconds (default: 1000)
- * @returns {number} Current timestamp that updates on interval
- */
-export function useTicker(intervalMs = 1000) {
-  const [now, setNow] = useState(() => Date.now());
-
-  useEffect(() => {
-    // Set up interval to update timestamp
-    const intervalId = setInterval(() => {
-      setNow(Date.now());
-    }, intervalMs);
-
-    // Cleanup interval on unmount
-    return () => {
-      clearInterval(intervalId);
-    };
-  }, [intervalMs]);
-
-  return now;
-}
-
-export default useTicker;