@ryanfw/prompt-orchestration-pipeline 0.6.0 → 0.8.0

package/src/components/TimerText.jsx

@@ -0,0 +1,82 @@
+import React, { useSyncExternalStore, useId, useState, useEffect } from "react";
+import {
+  subscribe,
+  getSnapshot,
+  getServerSnapshot,
+  addCadenceHint,
+  removeCadenceHint,
+} from "../ui/client/time-store.js";
+import { fmtDuration } from "../utils/duration.js";
+
+/**
+ * TimerText component for displaying live-updating durations without parent re-renders
+ *
+ * @param {Object} props
+ * @param {number} props.startMs - Start timestamp in milliseconds
+ * @param {number|null} props.endMs - End timestamp in milliseconds (null for ongoing timers)
+ * @param {"second"|"minute"} props.granularity - Update granularity
+ * @param {Function} props.format - Duration formatting function (defaults to fmtDuration)
+ * @param {string} props.className - CSS className for styling
+ */
+export default function TimerText({
+  startMs,
+  endMs = null,
+  granularity = "second",
+  format = fmtDuration,
+  className,
+}) {
+  const id = useId();
+
+  // Get current time from the global time store
+  const now = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+
+  // Local state for the formatted text to avoid re-renders of parent
+  const [displayText, setDisplayText] = useState(() => {
+    // Initial text for SSR safety
+    if (!startMs) return "—";
+    const initialEnd = endMs ?? Date.now();
+    const elapsed = Math.max(0, initialEnd - startMs);
+    return format(elapsed);
+  });
+
+  // Register cadence hint and handle subscription
+  useEffect(() => {
+    if (!startMs) return;
+
+    // Register cadence hint based on granularity
+    const cadenceMs = granularity === "second" ? 1000 : 60_000;
+    addCadenceHint(id, cadenceMs);
+
+    // Cleanup function
+    return () => {
+      removeCadenceHint(id);
+    };
+  }, [id, granularity, startMs]);
+
+  // Update display text when time changes (only for ongoing timers)
+  useEffect(() => {
+    if (!startMs) return;
+
+    // If endMs is present, this is a completed timer - no further updates needed
+    if (endMs !== null) return;
+
+    // For ongoing timers, update the display text
+    const elapsed = Math.max(0, now - startMs);
+    setDisplayText(format(elapsed));
+  }, [now, startMs, endMs, format]);
+
+  // For completed timers, ensure the final duration is displayed
+  useEffect(() => {
+    if (!startMs || endMs === null) return;
+
+    const elapsed = Math.max(0, endMs - startMs);
+    setDisplayText(format(elapsed));
+  }, [startMs, endMs, format]);
+
+  // If no start time, show placeholder
+  if (!startMs) {
+    return <span className={className}>—</span>;
+  }
+
+  return <span className={className}>{displayText}</span>;
+}

package/src/components/ui/RestartJobModal.jsx

@@ -0,0 +1,140 @@
+import React, { useEffect, useRef } from "react";
+import { Box, Flex, Text, Heading } from "@radix-ui/themes";
+import { Button } from "./button.jsx";
+
+/**
+ * RestartJobModal component for confirming job restart from clean slate
+ * @param {Object} props
+ * @param {boolean} props.open - Whether the modal is open
+ * @param {Function} props.onClose - Function to call when modal is closed
+ * @param {Function} props.onConfirm - Function to call when restart is confirmed
+ * @param {string} props.jobId - The ID of the job to restart
+ * @param {string} props.taskId - The ID of the task that triggered the restart (optional)
+ * @param {boolean} props.isSubmitting - Whether the restart action is in progress
+ */
+export function RestartJobModal({
+  open,
+  onClose,
+  onConfirm,
+  jobId,
+  taskId,
+  isSubmitting = false,
+}) {
+  const modalRef = useRef(null);
+
+  // Handle Escape key to close modal
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && open) {
+        e.preventDefault();
+        onClose();
+      }
+    };
+
+    if (open) {
+      document.addEventListener("keydown", handleKeyDown);
+      // Focus the modal for accessibility
+      if (modalRef.current) {
+        modalRef.current.focus();
+      }
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [open, onClose]);
+
+  // Handle Enter key to confirm when modal is focused
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !isSubmitting && open) {
+      e.preventDefault();
+      onConfirm();
+    }
+  };
+
+  if (!open) return null;
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-50 flex items-center justify-center"
+        aria-hidden={!open}
+      >
+        {/* Backdrop */}
+        <div
+          className="absolute inset-0 bg-black/50"
+          onClick={onClose}
+          aria-hidden="true"
+        />
+
+        {/* Modal */}
+        <div
+          ref={modalRef}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="restart-modal-title"
+          aria-describedby="restart-modal-description"
+          className="relative bg-white rounded-lg shadow-2xl border border-gray-200 max-w-lg w-full mx-4 outline-none"
+          style={{ minWidth: "320px", maxWidth: "560px" }}
+          tabIndex={-1}
+          onKeyDown={handleKeyDown}
+        >
+          <div className="p-6">
+            {/* Header */}
+            <Heading
+              id="restart-modal-title"
+              as="h2"
+              size="5"
+              className="mb-4 text-gray-900"
+            >
+              {taskId
+                ? `Restart from ${taskId}`
+                : "Restart job (reset progress)"}
+            </Heading>
+
+            {/* Body */}
+            <Box id="restart-modal-description" className="mb-6">
+              <Text as="p" className="text-gray-700 mb-4">
+                {taskId
+                  ? `This will restart the job from the "${taskId}" task. Tasks before ${taskId} will remain completed, while ${taskId} and all subsequent tasks will be reset to pending. Files and artifacts are preserved. A new background run will start automatically. This cannot be undone.`
+                  : "This will clear the job's progress and active stage and reset all tasks to pending. Files and artifacts are preserved. A new background run will start automatically. This cannot be undone."}
+              </Text>
+
+              {taskId && (
+                <Text as="p" className="text-sm text-gray-600 mb-3">
+                  <strong>Triggered from task:</strong> {taskId}
+                </Text>
+              )}
+
+              <Text as="p" className="text-sm text-gray-500 italic">
+                Note: Job must be in current lifecycle and not running.
+              </Text>
+            </Box>
+
+            {/* Actions */}
+            <Flex gap="3" justify="end">
+              <Button
+                variant="outline"
+                onClick={onClose}
+                disabled={isSubmitting}
+                className="min-w-[80px]"
+              >
+                Cancel
+              </Button>
+
+              <Button
+                variant="destructive"
+                onClick={onConfirm}
+                disabled={isSubmitting}
+                className="min-w-[80px]"
+              >
+                {isSubmitting ? "Restarting..." : "Restart"}
+              </Button>
+            </Flex>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default RestartJobModal;

package/src/components/ui/toast.jsx

@@ -0,0 +1,138 @@
+import React, { createContext, useContext, useState, useCallback } from "react";
+import { Box, Flex, Text } from "@radix-ui/themes";
+
+// Toast context for managing toast notifications
+const ToastContext = createContext();
+
+/**
+ * Toast Provider component that manages toast state
+ */
+export function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+
+  const addToast = useCallback((message, options = {}) => {
+    const toast = {
+      id: Date.now() + Math.random(),
+      message,
+      type: options.type || "info",
+      duration: options.duration || 5000,
+    };
+
+    setToasts((prev) => [...prev, toast]);
+
+    // Auto-remove toast after duration
+    if (toast.duration > 0) {
+      setTimeout(() => {
+        removeToast(toast.id);
+      }, toast.duration);
+    }
+
+    return toast.id;
+  }, []);
+
+  const removeToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+
+  const value = {
+    addToast,
+    removeToast,
+    success: (message, options) =>
+      addToast(message, { ...options, type: "success" }),
+    error: (message, options) =>
+      addToast(message, { ...options, type: "error" }),
+    warning: (message, options) =>
+      addToast(message, { ...options, type: "warning" }),
+    info: (message, options) => addToast(message, { ...options, type: "info" }),
+  };
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <ToastContainer toasts={toasts} onRemove={removeToast} />
+    </ToastContext.Provider>
+  );
+}
+
+/**
+ * Hook to use toast functionality
+ */
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+}
+
+/**
+ * Toast container component that renders all active toasts
+ */
+function ToastContainer({ toasts, onRemove }) {
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="fixed top-4 right-4 z-50 space-y-2">
+      {toasts.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} onRemove={onRemove} />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Individual toast item component
+ */
+function ToastItem({ toast, onRemove }) {
+  const getToastStyles = (type) => {
+    switch (type) {
+      case "success":
+        return "bg-green-50 border-green-200 text-green-800";
+      case "error":
+        return "bg-red-50 border-red-200 text-red-800";
+      case "warning":
+        return "bg-yellow-50 border-yellow-200 text-yellow-800";
+      default:
+        return "bg-blue-50 border-blue-200 text-blue-800";
+    }
+  };
+
+  const getIcon = (type) => {
+    switch (type) {
+      case "success":
+        return "✓";
+      case "error":
+        return "✕";
+      case "warning":
+        return "⚠";
+      default:
+        return "ℹ";
+    }
+  };
+
+  return (
+    <Box
+      className={`relative flex items-start p-4 border rounded-lg shadow-lg max-w-sm ${getToastStyles(
+        toast.type
+      )}`}
+      role="alert"
+      aria-live="polite"
+    >
+      <Flex gap="3" align="start">
+        <Text className="flex-shrink-0 text-lg font-semibold">
+          {getIcon(toast.type)}
+        </Text>
+        <Text className="text-sm font-medium flex-1">{toast.message}</Text>
+        <button
+          onClick={() => onRemove(toast.id)}
+          className="flex-shrink-0 ml-4 text-sm opacity-60 hover:opacity-100 focus:outline-none focus:opacity-100"
+          aria-label="Dismiss notification"
+        >
+          ✕
+        </button>
+      </Flex>
+    </Box>
+  );
+}
+
+export default ToastProvider;

package/src/config/models.js

@@ -0,0 +1,322 @@
+/**
+ * Canonical model configuration for prompt orchestration pipeline.
+ * This module serves as single source of truth for all model metadata.
+ */
+
+// Model alias constants grouped by provider
+export const ModelAlias = Object.freeze({
+  // DeepSeek
+  DEEPSEEK_CHAT: "deepseek:chat",
+  DEEPSEEK_REASONER: "deepseek:reasoner",
+
+  // OpenAI
+  OPENAI_GPT_5: "openai:gpt-5",
+  OPENAI_GPT_5_CORE: "openai:gpt-5-core",
+  OPENAI_GPT_5_CHAT: "openai:gpt-5-chat",
+  OPENAI_GPT_5_PRO: "openai:gpt-5-pro",
+  OPENAI_GPT_5_MINI: "openai:gpt-5-mini",
+  OPENAI_GPT_5_NANO: "openai:gpt-5-nano",
+
+  // Legacy aliases for backward compatibility (tests)
+  OPENAI_GPT_4: "openai:gpt-4",
+  OPENAI_GPT_4_TURBO: "openai:gpt-4-turbo",
+
+  // Google Gemini
+  GEMINI_2_5_PRO: "gemini:pro-2.5",
+  GEMINI_2_5_FLASH: "gemini:flash-2.5",
+  GEMINI_2_5_FLASH_LITE: "gemini:flash-2.5-lite",
+  GEMINI_2_5_FLASH_IMAGE: "gemini:flash-2.5-image",
+
+  // Z.ai (formerly Zhipu) - standardized to "zhipu" provider
+  ZAI_GLM_4_6: "zhipu:glm-4.6",
+  ZAI_GLM_4_5: "zhipu:glm-4.5",
+  ZAI_GLM_4_5_AIR: "zhipu:glm-4.5-air",
+
+  // Anthropic
+  ANTHROPIC_SONNET_4_5: "anthropic:sonnet-4-5",
+  ANTHROPIC_HAIKU_4_5: "anthropic:haiku-4-5",
+  ANTHROPIC_OPUS_4_1: "anthropic:opus-4-1",
+});
+
+// Consolidated model configuration with pricing metadata
+export const MODEL_CONFIG = Object.freeze({
+  // DeepSeek (2025)
+  [ModelAlias.DEEPSEEK_CHAT]: {
+    provider: "deepseek",
+    model: "deepseek-chat", // V3.2 Exp (non-thinking) under the hood
+    tokenCostInPerMillion: 0.27,
+    tokenCostOutPerMillion: 1.1,
+  },
+  [ModelAlias.DEEPSEEK_REASONER]: {
+    provider: "deepseek",
+    model: "deepseek-reasoner", // R1 family
+    tokenCostInPerMillion: 0.55,
+    tokenCostOutPerMillion: 2.19,
+  },
+
+  // — OpenAI (2025) —
+  [ModelAlias.OPENAI_GPT_5]: {
+    provider: "openai",
+    model: "gpt-5", // stable flagship
+    tokenCostInPerMillion: 1.25,
+    tokenCostOutPerMillion: 10.0,
+  },
+  [ModelAlias.OPENAI_GPT_5_CHAT]: {
+    provider: "openai",
+    model: "gpt-5-chat-latest", // Chat variant
+    tokenCostInPerMillion: 1.25,
+    tokenCostOutPerMillion: 10.0,
+  },
+  [ModelAlias.OPENAI_GPT_5_PRO]: {
+    provider: "openai",
+    model: "gpt-5-pro", // higher-compute tier
+    tokenCostInPerMillion: 15.0,
+    tokenCostOutPerMillion: 120.0,
+  },
+  [ModelAlias.OPENAI_GPT_5_MINI]: {
+    provider: "openai",
+    model: "gpt-5-mini",
+    tokenCostInPerMillion: 0.25,
+    tokenCostOutPerMillion: 2.0,
+  },
+  [ModelAlias.OPENAI_GPT_5_NANO]: {
+    provider: "openai",
+    model: "gpt-5-nano",
+    tokenCostInPerMillion: 0.05,
+    tokenCostOutPerMillion: 0.4,
+  },
+
+  // Legacy models for backward compatibility (tests)
+  [ModelAlias.OPENAI_GPT_4]: {
+    provider: "openai",
+    model: "gpt-4",
+    tokenCostInPerMillion: 0.5,
+    tokenCostOutPerMillion: 2.0,
+  },
+  [ModelAlias.OPENAI_GPT_4_TURBO]: {
+    provider: "openai",
+    model: "gpt-4-turbo",
+    tokenCostInPerMillion: 0.3,
+    tokenCostOutPerMillion: 1.0,
+  },
+
+  // — Google Gemini (2025) —
+  [ModelAlias.GEMINI_2_5_PRO]: {
+    provider: "gemini",
+    model: "gemini-2.5-pro", // ≤200k input tier shown; >200k is higher
+    tokenCostInPerMillion: 1.25,
+    tokenCostOutPerMillion: 10.0,
+  },
+  [ModelAlias.GEMINI_2_5_FLASH]: {
+    provider: "gemini",
+    model: "gemini-2.5-flash",
+    tokenCostInPerMillion: 0.3,
+    tokenCostOutPerMillion: 2.5,
+  },
+  [ModelAlias.GEMINI_2_5_FLASH_LITE]: {
+    provider: "gemini",
+    model: "gemini-2.5-flash-lite",
+    tokenCostInPerMillion: 0.1,
+    tokenCostOutPerMillion: 0.4,
+  },
+  [ModelAlias.GEMINI_2_5_FLASH_IMAGE]: {
+    provider: "gemini",
+    model: "gemini-2.5-flash-image",
+    // Inputs follow 2.5 Flash text pricing; outputs are **image tokens** at $30/M (≈$0.039 per 1024² image)
+    tokenCostInPerMillion: 0.3,
+    tokenCostOutPerMillion: 30.0,
+  },
+
+  // — Z.ai (formerly Zhipu) —
+  [ModelAlias.ZAI_GLM_4_6]: {
+    provider: "zhipu",
+    model: "glm-4.6",
+    tokenCostInPerMillion: 0.6,
+    tokenCostOutPerMillion: 2.2,
+  },
+  [ModelAlias.ZAI_GLM_4_5]: {
+    provider: "zhipu",
+    model: "glm-4.5",
+    tokenCostInPerMillion: 0.6,
+    tokenCostOutPerMillion: 2.2,
+  },
+  [ModelAlias.ZAI_GLM_4_5_AIR]: {
+    provider: "zhipu",
+    model: "glm-4.5-air",
+    tokenCostInPerMillion: 0.2,
+    tokenCostOutPerMillion: 1.1,
+  },
+
+  // — Anthropic —
+  // current (Claude 4.5 / 4.1)
+  [ModelAlias.ANTHROPIC_SONNET_4_5]: {
+    provider: "anthropic",
+    model: "claude-sonnet-4-5-20250929", // Use actual model ID
+    tokenCostInPerMillion: 3.0,
+    tokenCostOutPerMillion: 15.0,
+  },
+  [ModelAlias.ANTHROPIC_HAIKU_4_5]: {
+    provider: "anthropic",
+    model: "claude-haiku-4-5-20250929", // Use actual model ID
+    tokenCostInPerMillion: 0.25, // Correct pricing
+    tokenCostOutPerMillion: 1.25, // Correct pricing
+  },
+  [ModelAlias.ANTHROPIC_OPUS_4_1]: {
+    provider: "anthropic",
+    model: "claude-opus-4-1-20240229", // Use actual model ID
+    tokenCostInPerMillion: 15.0,
+    tokenCostOutPerMillion: 75.0,
+  },
+});
+
+// Validation set of all valid model aliases
+export const VALID_MODEL_ALIASES = new Set(Object.keys(MODEL_CONFIG));
+
+// Default model alias for each provider (used when no model specified)
+export const DEFAULT_MODEL_BY_PROVIDER = Object.freeze({
+  deepseek: ModelAlias.DEEPSEEK_CHAT,
+  openai: ModelAlias.OPENAI_GPT_5,
+  gemini: ModelAlias.GEMINI_2_5_FLASH,
+  zhipu: ModelAlias.ZAI_GLM_4_6,
+  anthropic: ModelAlias.ANTHROPIC_SONNET_4_5,
+});
+
+/**
+ * Convert model alias to function name.
+ * Removes hyphens and dots, uppercases following alphanumeric character.
+ * @param {string} alias - Model alias (e.g., "gemini:2.5-pro")
+ * @returns {string} Function name (e.g., "25Pro")
+ * @throws {Error} If alias is invalid
+ */
+export function aliasToFunctionName(alias) {
+  if (typeof alias !== "string" || !alias.includes(":")) {
+    throw new Error(`Invalid model alias: ${alias}`);
+  }
+
+  const model = alias.split(":").slice(1).join(":");
+  return model.replace(/[-.]([a-z0-9])/gi, (_, char) => char.toUpperCase());
+}
+
+/**
+ * Derived map of alias to function name for efficient lookup.
+ * Computed at module load time and frozen for immutability.
+ */
+export const FUNCTION_NAME_BY_ALIAS = Object.freeze(
+  Object.fromEntries(
+    Object.keys(MODEL_CONFIG).map((alias) => [
+      alias,
+      aliasToFunctionName(alias),
+    ])
+  )
+);
+
+/**
+ * Build provider functions index with dotted path style.
+ * @returns {Object} Frozen provider functions index
+ */
+export function buildProviderFunctionsIndex() {
+  const result = {};
+
+  for (const [alias, config] of Object.entries(MODEL_CONFIG)) {
+    const { provider } = config;
+    const functionName = FUNCTION_NAME_BY_ALIAS[alias];
+
+    if (!result[provider]) {
+      result[provider] = [];
+    }
+
+    const fullPath = `llm.${provider}.${functionName}`;
+
+    result[provider].push({
+      alias,
+      provider,
+      model: config.model,
+      functionName,
+      fullPath,
+    });
+  }
+
+  // Freeze inner arrays and outer object
+  for (const provider of Object.keys(result)) {
+    Object.freeze(result[provider]);
+  }
+  return Object.freeze(result);
+}
+
+/**
+ * Pre-built provider functions index for convenience.
+ * Uses dotted style: llm.anthropic.sonnet45, llm.openai.gpt5, etc.
+ */
+export const PROVIDER_FUNCTIONS = buildProviderFunctionsIndex();
+
+/**
+ * Extract provider name from model alias.
+ * @param {string} alias - Model alias (e.g., "openai:gpt-5")
+ * @returns {string} Provider name (e.g., "openai")
+ */
+export function getProviderFromAlias(alias) {
+  if (typeof alias !== "string" || !alias.includes(":")) {
+    throw new Error(`Invalid model alias: ${alias}`);
+  }
+  return alias.split(":")[0];
+}
+
+/**
+ * Extract model name from model alias.
+ * @param {string} alias - Model alias (e.g., "openai:gpt-5")
+ * @returns {string} Model name (e.g., "gpt-5")
+ */
+export function getModelFromAlias(alias) {
+  if (typeof alias !== "string" || !alias.includes(":")) {
+    throw new Error(`Invalid model alias: ${alias}`);
+  }
+  return alias.split(":").slice(1).join(":");
+}
+
+/**
+ * Get model configuration by alias.
+ * @param {string} alias - Model alias (e.g., "openai:gpt-5")
+ * @returns {Object|null} Model configuration or null if not found
+ */
+export function getModelConfig(alias) {
+  return MODEL_CONFIG[alias] ?? null;
+}
+
+// Invariant checks to ensure data consistency
+for (const [alias, config] of Object.entries(MODEL_CONFIG)) {
+  const providerFromAlias = getProviderFromAlias(alias);
+  if (providerFromAlias !== config.provider) {
+    throw new Error(
+      `Model config invariant violation: alias "${alias}" has provider "${config.provider}" but alias prefix indicates "${providerFromAlias}"`
+    );
+  }
+
+  if (
+    typeof config.tokenCostInPerMillion !== "number" ||
+    config.tokenCostInPerMillion < 0
+  ) {
+    throw new Error(
+      `Model config invariant violation: alias "${alias}" has invalid tokenCostInPerMillion: ${config.tokenCostInPerMillion}`
+    );
+  }
+
+  if (
+    typeof config.tokenCostOutPerMillion !== "number" ||
+    config.tokenCostOutPerMillion < 0
+  ) {
+    throw new Error(
+      `Model config invariant violation: alias "${alias}" has invalid tokenCostOutPerMillion: ${config.tokenCostOutPerMillion}`
+    );
+  }
+}
+
+// Verify VALID_MODEL_ALIASES matches MODEL_CONFIG keys exactly
+const modelConfigKeys = new Set(Object.keys(MODEL_CONFIG));
+if (
+  modelConfigKeys.size !== VALID_MODEL_ALIASES.size ||
+  ![...modelConfigKeys].every((key) => VALID_MODEL_ALIASES.has(key))
+) {
+  throw new Error(
+    "VALID_MODEL_ALIASES does not exactly match MODEL_CONFIG keys"
+  );
+}