orcheo-studio 0.24.4 → 0.24.6

package/src/features/workflow/components/dialogs/workflow-folder-picker.tsx

@@ -0,0 +1,178 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { FileJson, FileText, FolderUp, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  collectDroppedFolderFiles,
+  collectFolderInputFiles,
+  loadWorkflowFolderSelection,
+  WorkflowFolderSelectionError,
+  type WorkflowFolderSelection,
+} from "@features/workflow/lib/workflow-folder-selection";
+
+interface WorkflowFolderPickerProps {
+  /** Unique prefix for the input id so labels stay associated per dialog. */
+  idPrefix: string;
+  disabled?: boolean;
+  /** Name of the currently selected script, or "" when none is selected. */
+  scriptName: string;
+  /** Name of the currently selected config, or null when none is selected. */
+  configName: string | null;
+  onSelect: (selection: WorkflowFolderSelection) => void;
+  onError: (message: string) => void;
+}
+
+const READ_FOLDER_FALLBACK_ERROR =
+  "Could not read the selected folder. Please try again.";
+const EMPTY_FOLDER_ERROR =
+  "No files were found in the selected folder. Add a folder containing a .py workflow script and try again.";
+
+export function WorkflowFolderPicker({
+  idPrefix,
+  disabled = false,
+  scriptName,
+  configName,
+  onSelect,
+  onError,
+}: WorkflowFolderPickerProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const inputId = `${idPrefix}-folder`;
+
+  // `webkitdirectory` is not part of the standard input typings, so set it
+  // imperatively to opt the file picker into folder selection.
+  useEffect(() => {
+    const input = inputRef.current;
+    if (input) {
+      input.setAttribute("webkitdirectory", "");
+      input.setAttribute("directory", "");
+    }
+  }, []);
+
+  const processFiles = useCallback(
+    async (files: File[]) => {
+      if (files.length === 0) {
+        onError(EMPTY_FOLDER_ERROR);
+        return;
+      }
+      setIsProcessing(true);
+      try {
+        const selection = await loadWorkflowFolderSelection(files);
+        onSelect(selection);
+      } catch (err) {
+        const message =
+          err instanceof WorkflowFolderSelectionError
+            ? err.message
+            : READ_FOLDER_FALLBACK_ERROR;
+        onError(message);
+      } finally {
+        setIsProcessing(false);
+      }
+    },
+    [onSelect, onError],
+  );
+
+  const handleInputChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const files = collectFolderInputFiles(event.target.files);
+      // Allow re-selecting the same folder later.
+      event.target.value = "";
+      void processFiles(files);
+    },
+    [processFiles],
+  );
+
+  const handleDrop = useCallback(
+    (event: React.DragEvent<HTMLLabelElement>) => {
+      event.preventDefault();
+      setIsDragging(false);
+      if (disabled) {
+        return;
+      }
+      void (async () => {
+        try {
+          const files = await collectDroppedFolderFiles(event.dataTransfer);
+          await processFiles(files);
+        } catch {
+          onError(READ_FOLDER_FALLBACK_ERROR);
+        }
+      })();
+    },
+    [disabled, processFiles, onError],
+  );
+
+  const handleDragOver = useCallback(
+    (event: React.DragEvent<HTMLLabelElement>) => {
+      event.preventDefault();
+      if (!disabled) {
+        setIsDragging(true);
+      }
+    },
+    [disabled],
+  );
+
+  const handleDragLeave = useCallback(
+    (event: React.DragEvent<HTMLLabelElement>) => {
+      // Ignore drag-leave events bubbling up from child elements.
+      if (event.currentTarget.contains(event.relatedTarget as Node | null)) {
+        return;
+      }
+      setIsDragging(false);
+    },
+    [],
+  );
+
+  const hasSelection = scriptName.length > 0;
+
+  return (
+    <div className="space-y-1.5">
+      <label
+        htmlFor={inputId}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragEnter={handleDragOver}
+        onDragLeave={handleDragLeave}
+        className={cn(
+          "flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-dashed border-input bg-transparent px-4 py-6 text-center transition-colors",
+          "hover:border-ring focus-within:outline-none focus-within:ring-1 focus-within:ring-ring",
+          disabled && "pointer-events-none opacity-50",
+          isDragging && "border-ring bg-accent",
+        )}
+      >
+        {isProcessing ? (
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        ) : (
+          <FolderUp className="h-6 w-6 text-muted-foreground" />
+        )}
+        <span className="text-sm font-medium">
+          {isDragging ? "Drop folder to load" : "Drag a folder here or browse"}
+        </span>
+        <span className="text-xs text-muted-foreground">
+          The folder should contain one <code>.py</code> script and an optional{" "}
+          <code>.json</code> config.
+        </span>
+      </label>
+      <input
+        ref={inputRef}
+        id={inputId}
+        type="file"
+        multiple
+        className="sr-only"
+        onChange={handleInputChange}
+        disabled={disabled}
+      />
+      {hasSelection && (
+        <div className="space-y-1 rounded-md bg-muted/50 px-3 py-2 text-xs">
+          <p className="flex items-center gap-1.5 text-foreground">
+            <FileText className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+            <span className="truncate">{scriptName}</span>
+          </p>
+          <p className="flex items-center gap-1.5 text-muted-foreground">
+            <FileJson className="h-3.5 w-3.5 shrink-0" />
+            <span className="truncate">{configName ?? "No config file"}</span>
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/features/workflow/components/panels/rjsf-cron-widget.tsx

@@ -72,11 +72,20 @@ const clampInt = (value: string, max: number, fallback: number) => {
 };
 
 /** Parse a single cron field's first numeric token, falling back to `fallback`. */
-const parseField = (field: string | undefined, max: number, fallback: number) =>
-  field && field !== "*" ? clampInt(field.split(/[,/-]/)[0], max, fallback) : fallback;
+const parseField = (
+  field: string | undefined,
+  max: number,
+  fallback: number,
+) =>
+  field && field !== "*"
+    ? clampInt(field.split(/[,/-]/)[0], max, fallback)
+    : fallback;
 
 /** Extract the step N from a `*\/N` field (clamped to `max`), or undefined if it isn't a step. */
-const parseStep = (field: string | undefined, max: number): number | undefined => {
+const parseStep = (
+  field: string | undefined,
+  max: number,
+): number | undefined => {
   const match = /^\*\/(\d+)$/.exec(field ?? "");
   return match ? clampInt(match[1], max, 1) || 1 : undefined;
 };
@@ -98,7 +107,9 @@ const parseDaysOfWeek = (field: string | undefined): number[] => {
   return Array.from(new Set(days));
 };
 
-const parseCron = (value: string | undefined): { freq: Frequency; parts: CronParts } => {
+const parseCron = (
+  value: string | undefined,
+): { freq: Frequency; parts: CronParts } => {
   const [minute, hour, dom, , dow] = (value ?? "").trim().split(/\s+/);
   const minuteStep = parseStep(minute, 59);
   const hourStep = parseStep(hour, 23);
@@ -117,13 +128,15 @@ const parseCron = (value: string | undefined): { freq: Frequency; parts: CronPar
   // `*/30 * * * *` (step) or `* * * * *` (every minute) → minute interval.
   else if (minuteStep !== undefined || minute === "*") freq = "minute";
   // `M */2 * * *` (step) or `M * * * *` (every hour) → hour interval.
-  else if (hourStep !== undefined || hour === "*" || hour === undefined) freq = "hour";
+  else if (hourStep !== undefined || hour === "*" || hour === undefined)
+    freq = "hour";
 
   return { freq, parts };
 };
 
 const buildCron = (freq: Frequency, parts: CronParts): string => {
-  const { interval, hourInterval, minute, hour, dayOfMonth, daysOfWeek } = parts;
+  const { interval, hourInterval, minute, hour, dayOfMonth, daysOfWeek } =
+    parts;
   switch (freq) {
     case "minute":
       // `*/1` is just "every minute"; emit the canonical wildcard form.
@@ -136,7 +149,9 @@ const buildCron = (freq: Frequency, parts: CronParts): string => {
     case "day":
       return `${minute} ${hour} * * *`;
     case "week": {
-      const dow = daysOfWeek.length ? [...daysOfWeek].sort((a, b) => a - b).join(",") : "*";
+      const dow = daysOfWeek.length
+        ? [...daysOfWeek].sort((a, b) => a - b).join(",")
+        : "*";
       return `${minute} ${hour} * * ${dow}`;
     }
     case "month":
@@ -165,7 +180,11 @@ const canonicalCron = (value: string | undefined): string | null => {
   if (/[a-z]/i.test(fields.join(""))) return null;
   const days = parseDaysOfWeek(dow);
   const dowField =
-    dow === "*" ? "*" : days.length ? [...days].sort((a, b) => a - b).join(",") : dow;
+    dow === "*"
+      ? "*"
+      : days.length
+        ? [...days].sort((a, b) => a - b).join(",")
+        : dow;
   return [minute, hour, dom, month, dowField].join(" ");
 };
 
@@ -292,7 +311,9 @@ function CronWidget(props: WidgetProps) {
 
       {(freq === "minute" || freq === "hour") && (
         <Select
-          value={String(freq === "minute" ? parts.interval : parts.hourInterval)}
+          value={String(
+            freq === "minute" ? parts.interval : parts.hourInterval,
+          )}
           onValueChange={(v) =>
             freq === "minute"
               ? update("minute", { ...parts, interval: Number(v) })
@@ -343,7 +364,11 @@ function CronWidget(props: WidgetProps) {
                 "flex h-9 min-w-[6rem] items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
               )}
             >
-              <span className={cn(parts.daysOfWeek.length === 0 && "text-muted-foreground")}>
+              <span
+                className={cn(
+                  parts.daysOfWeek.length === 0 && "text-muted-foreground",
+                )}
+              >
                 {selectedDaysLabel}
               </span>
               <ChevronDown className="h-4 w-4 opacity-50" />

package/src/features/workflow/components/panels/workflow-diff-dialog.tsx

@@ -28,9 +28,9 @@ interface WorkflowDiffDialogProps {
 }
 
 const summaryBadgeClass = {
-  added: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
-  removed: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
-  modified: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
+  added: "bg-success-muted text-success-muted-foreground",
+  removed: "bg-destructive-muted text-destructive-muted-foreground",
+  modified: "bg-info-muted text-info-muted-foreground",
 };
 
 const formatValue = (value: unknown) =>
@@ -103,12 +103,12 @@ const Differences = ({
                 <p className="text-muted-foreground">{entry.detail}</p>
               )}
               {entry.type !== "added" && entry.before !== undefined && (
-                <pre className="bg-red-50 dark:bg-red-900/20 rounded-md p-2 font-mono text-xs whitespace-pre-wrap">
+                <pre className="bg-destructive-muted/60 rounded-md p-2 font-mono text-xs whitespace-pre-wrap">
                   - {formatValue(entry.before)}
                 </pre>
               )}
               {entry.type !== "removed" && entry.after !== undefined && (
-                <pre className="bg-green-50 dark:bg-green-900/20 rounded-md p-2 font-mono text-xs whitespace-pre-wrap">
+                <pre className="bg-success-muted/60 rounded-md p-2 font-mono text-xs whitespace-pre-wrap">
                   + {formatValue(entry.after)}
                 </pre>
               )}

package/src/features/workflow/components/panels/workflow-history-table.tsx

@@ -22,13 +22,12 @@ interface WorkflowHistoryTableProps {
   onSelectVersion: (versionId: string) => void;
 }
 
-const statusBadgeClass =
-  "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400";
+const statusBadgeClass = "bg-success-muted text-success-muted-foreground";
 
 const summaryBadgeClasses: Record<"added" | "removed" | "modified", string> = {
   added: statusBadgeClass,
-  removed: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
-  modified: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
+  removed: "bg-destructive-muted text-destructive-muted-foreground",
+  modified: "bg-info-muted text-info-muted-foreground",
 };
 
 const SummaryBadge = ({

package/src/features/workflow/components/trace/agent-prism/SpanCard/SpanCardConnector.tsx

@@ -1,9 +1,5 @@
 export type SpanCardConnectorType =
-  | "horizontal"
-  | "vertical"
-  | "t-right"
-  | "corner-top-right"
-  | "empty";
+  "horizontal" | "vertical" | "t-right" | "corner-top-right" | "empty";
 
 interface SpanCardConnectorProps {
   type: SpanCardConnectorType;

package/src/features/workflow/components/trace/agent-prism/shared.ts

@@ -31,16 +31,7 @@ export type ColorVariant =
   | "gray";
 
 export type ComponentSize =
-  | "4"
-  | "5"
-  | "6"
-  | "7"
-  | "8"
-  | "9"
-  | "10"
-  | "11"
-  | "12"
-  | "16";
+  "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "16";
 
 // CONSTANTS
 

package/src/features/workflow/components/trace/agent-prism/theme/theme.css

@@ -1,59 +1,61 @@
 :root {
-  /* General purpose colors */
-  --agentprism-background: 1 0 0; /* white */
-  --agentprism-foreground: 21% 0.034 264.665; /* gray.900 */
-  --agentprism-primary: 21% 0.034 264.665; /* gray.900 */
-  --agentprism-primary-foreground: 98.5% 0.002 247.839; /* gray.50 */
-  --agentprism-primary: 21% 0.034 264.665; /* gray.900 */
-  --agentprism-primary-foreground: 98.5% 0.002 247.839; /* gray.50 */
-  --agentprism-secondary: 96.7% 0.003 264.542; /* gray.100 */
-  --agentprism-secondary-foreground: 55.1% 0.027 264.364; /* gray.500 */
-  --agentprism-muted: 98.5% 0.002 247.839; /* gray.50 */
-  --agentprism-muted-foreground: 44.6% 0.03 256.802; /* gray.600 */
-  --agentprism-accent: 96.7% 0.003 264.542; /* gray.100 */
-  --agentprism-accent-foreground: 96.7% 0.003 264.542; /* gray.100 */
+  /*
+   * General-purpose colors aligned with the Orcheo design system
+   * (orcheo-design-system/tokens/colors.css): warm ink neutrals,
+   * Orcheo orange brand, warm-harmonized status hues.
+   */
+  --agentprism-background: 97% 0.008 91.483; /* ink-50 */
+  --agentprism-foreground: 21.3% 0.006 91.63; /* ink-900 */
+  --agentprism-primary: 21.3% 0.006 91.63; /* ink-900 */
+  --agentprism-primary-foreground: 97% 0.008 91.483; /* ink-50 */
+  --agentprism-secondary: 93.4% 0.014 88.686; /* ink-100 */
+  --agentprism-secondary-foreground: 54.4% 0.02 84.589; /* ink-500 */
+  --agentprism-muted: 93.4% 0.014 88.686; /* ink-100 */
+  --agentprism-muted-foreground: 44.3% 0.015 86.885; /* ink-600 */
+  --agentprism-accent: 93.4% 0.014 88.686; /* ink-100 */
+  --agentprism-accent-foreground: 27.3% 0.009 88.77; /* ink-800 */
 
   /* Brand colors */
-  --agentprism-brand: 60.6% 0.25 292.717; /* violet.500 */
+  --agentprism-brand: 71.1% 0.179 48.062; /* orange-500 */
   --agentprism-brand-foreground: 1 0 0; /* white */
-  --agentprism-brand-secondary: 70.5% 0.213 47.604; /* orange.500 */
+  --agentprism-brand-secondary: 69.5% 0.092 72.981; /* tan-500 */
   --agentprism-brand-secondary-foreground: 1 0 0; /* white */
 
   /* Borders */
-  --agentprism-border: 92.8% 0.006 264.531; /* gray.200 */
-  --agentprism-border-subtle: 96.7% 0.003 264.542; /* gray.100 */
-  --agentprism-border-strong: 87.2% 0.01 258.338; /* gray.300 */
-  --agentprism-border-inverse: 21% 0.034 264.665; /* gray.900 */
+  --agentprism-border: 87.7% 0.02 87.522; /* ink-200 */
+  --agentprism-border-subtle: 93.4% 0.014 88.686; /* ink-100 */
+  --agentprism-border-strong: 78.7% 0.025 88.258; /* ink-300 */
+  --agentprism-border-inverse: 21.3% 0.006 91.63; /* ink-900 */
 
   /* Success status color */
-  --agentprism-success: 69.6% 0.17 162.48; /* emerald.500 */
-  --agentprism-success-muted: 97.9% 0.021 166.113; /* emerald.50 */
-  --agentprism-success-muted-foreground: 50.8% 0.118 165.612; /* emerald.700 */
+  --agentprism-success: 52.9% 0.103 156.217; /* green-500 */
+  --agentprism-success-muted: 94.2% 0.018 161.108; /* green-100 */
+  --agentprism-success-muted-foreground: 45.8% 0.089 156.156; /* green-600 */
 
   /* Error status color */
-  --agentprism-error: 63.7% 0.237 25.331; /* red.500 */
-  --agentprism-error-muted: 97.1% 0.013 17.38; /* red.50 */
-  --agentprism-error-muted-foreground: 57.7% 0.245 27.325; /* red.600 */
+  --agentprism-error: 57.3% 0.184 32.327; /* red-500 */
+  --agentprism-error-muted: 93.1% 0.029 36.154; /* red-100 */
+  --agentprism-error-muted-foreground: 50% 0.164 32.898; /* red-600 */
 
   /* Warning status color */
-  --agentprism-warning: 79.5% 0.184 86.047; /* yellow.500 */
-  --agentprism-warning-muted: 98.7% 0.026 102.212; /* yellow.50 */
-  --agentprism-warning-muted-foreground: 55.4% 0.135 66.442; /* yellow.700 */
+  --agentprism-warning: 72.9% 0.147 78.341; /* amber-500 */
+  --agentprism-warning-muted: 95.1% 0.041 88.794; /* amber-100 */
+  --agentprism-warning-muted-foreground: 63.6% 0.129 77.25; /* amber-600 */
 
   /* Pending status color */
-  --agentprism-pending: 60.6% 0.25 292.717; /* violet.500 */
-  --agentprism-pending-muted: 94.3% 0.029 294.588; /* violet.100 */
-  --agentprism-pending-muted-foreground: 54.1% 0.281 293.009; /* violet.600 */
+  --agentprism-pending: 52.2% 0.082 245.431; /* blue-500 */
+  --agentprism-pending-muted: 93.8% 0.014 238.015; /* blue-100 */
+  --agentprism-pending-muted-foreground: 44.6% 0.07 244.417; /* blue-600 */
 
   /* Code syntax highlighting */
-  --agentprism-code-string: 57.7% 0.245 27.325; /* red.600 */
-  --agentprism-code-number: 57.7% 0.245 27.325; /* red.600 */
-  --agentprism-code-key: 54.6% 0.245 262.881; /* blue.600 */
-  --agentprism-code-base: 55.1% 0.027 264.364; /* gray.500 */
+  --agentprism-code-string: 50% 0.164 32.898; /* red-600 */
+  --agentprism-code-number: 50% 0.164 32.898; /* red-600 */
+  --agentprism-code-key: 44.6% 0.07 244.417; /* blue-600 */
+  --agentprism-code-base: 54.4% 0.02 84.589; /* ink-500 */
 
   /* Generic badge colors */
-  --agentprism-badge-default: 96.7% 0.003 264.542; /* gray.100 */
-  --agentprism-badge-default-foreground: 44.6% 0.03 256.802; /* gray.600 */
+  --agentprism-badge-default: 93.4% 0.014 88.686; /* ink-100 */
+  --agentprism-badge-default-foreground: 44.3% 0.015 86.885; /* ink-600 */
 
   /* Trace colors (llm) */
   --agentprism-avatar-llm: 62.7% 0.265 303.9; /* purple.500 */
@@ -123,61 +125,59 @@
 }
 
 .dark {
-  /* General purpose colors */
-  --agentprism-background: 4% 0 0; /* align with workflow dark background */
-  --agentprism-foreground: 96.7% 0.003 264.542; /* gray.100 */
-  --agentprism-primary: 96.7% 0.003 264.542; /* gray.100 */
-  --agentprism-primary-foreground: 13% 0.028 261.692; /* gray.950 */
-  --agentprism-primary: 96.7% 0.003 264.542; /* gray.100 */
-  --agentprism-primary-foreground: 13% 0.028 261.692; /* gray.950 */
-  --agentprism-secondary: 27.8% 0.033 256.848; /* gray.800 */
-  --agentprism-secondary-foreground: 55.1% 0.027 264.364; /* gray.500 */
-  --agentprism-muted: 21% 0.034 264.665; /* gray.900 */
-  --agentprism-muted-foreground: 70.7% 0.022 261.325; /* gray.400 */
-  --agentprism-accent: 96.7% 0.003 264.542; /* gray.100 */
-  --agentprism-accent-foreground: 21% 0.034 264.665; /* gray.900 */
+  /* General purpose colors — warm ink dark ramp (orcheo-design-system) */
+  --agentprism-background: 16.3% 0.004 106.847; /* ink-950 */
+  --agentprism-foreground: 93.4% 0.014 88.686; /* ink-100 */
+  --agentprism-primary: 93.4% 0.014 88.686; /* ink-100 */
+  --agentprism-primary-foreground: 16.3% 0.004 106.847; /* ink-950 */
+  --agentprism-secondary: 27.3% 0.009 88.77; /* ink-800 */
+  --agentprism-secondary-foreground: 66.5% 0.023 85.959; /* ink-400 */
+  --agentprism-muted: 21.3% 0.006 91.63; /* ink-900 */
+  --agentprism-muted-foreground: 66.5% 0.023 85.959; /* ink-400 */
+  --agentprism-accent: 27.3% 0.009 88.77; /* ink-800 */
+  --agentprism-accent-foreground: 93.4% 0.014 88.686; /* ink-100 */
 
   /* Brand colors */
-  --agentprism-brand: 60.6% 0.25 292.717; /* violet.500 */
+  --agentprism-brand: 71.1% 0.179 48.062; /* orange-500 */
   --agentprism-brand-foreground: 1 0 0; /* white */
-  --agentprism-brand-secondary: 70.5% 0.213 47.604; /* orange.500 */
+  --agentprism-brand-secondary: 69.5% 0.092 72.981; /* tan-500 */
   --agentprism-brand-secondary-foreground: 1 0 0; /* white */
 
   /* Borders */
-  --agentprism-border: 44.6% 0.03 256.802; /* gray.600 */
-  --agentprism-border-subtle: 37.3% 0.034 259.733; /* gray.700 */
-  --agentprism-border-strong: 55.1% 0.027 264.364; /* gray.500 */
-  --agentprism-border-inverse: 92.8% 0.006 264.531; /* gray.200 */
+  --agentprism-border: 34.9% 0.013 87.556; /* ink-700 */
+  --agentprism-border-subtle: 27.3% 0.009 88.77; /* ink-800 */
+  --agentprism-border-strong: 44.3% 0.015 86.885; /* ink-600 */
+  --agentprism-border-inverse: 87.7% 0.02 87.522; /* ink-200 */
 
   /* Success status color */
-  --agentprism-success: 72.3% 0.219 149.579; /* green.500 */
-  --agentprism-success-muted: 26.6% 0.065 152.934; /* green.950 */
-  --agentprism-success-muted-foreground: 87.1% 0.15 154.449; /* green.300 */
+  --agentprism-success: 52.9% 0.103 156.217; /* green-500 */
+  --agentprism-success-muted: 29.7% 0.053 156.812; /* dark forest tint */
+  --agentprism-success-muted-foreground: 77.1% 0.081 159.669;
 
   /* Error status color */
-  --agentprism-error: 63.7% 0.237 25.331; /* red.500 */
-  --agentprism-error-muted: 25.8% 0.092 26.042; /* red.950 */
-  --agentprism-error-muted-foreground: 80.8% 0.114 19.571; /* red.300 */
+  --agentprism-error: 57.3% 0.184 32.327; /* red-500 */
+  --agentprism-error-muted: 26.5% 0.076 33.199; /* dark warm-red tint */
+  --agentprism-error-muted-foreground: 74.1% 0.111 33.398;
 
   /* Warning status color */
-  --agentprism-warning: 79.5% 0.184 86.047; /* yellow.500 */
-  --agentprism-warning-muted: 28.6% 0.066 53.813; /* yellow.950 */
-  --agentprism-warning-muted-foreground: 90.5% 0.182 98.111; /* yellow.300 */
+  --agentprism-warning: 72.9% 0.147 78.341; /* amber-500 */
+  --agentprism-warning-muted: 31.6% 0.06 79.88; /* dark ochre tint */
+  --agentprism-warning-muted-foreground: 81.5% 0.114 84.939;
 
   /* Pending status color */
-  --agentprism-pending: 60.6% 0.25 292.717; /* violet.500 */
-  --agentprism-pending-muted: 28.3% 0.141 291.089; /* violet.950 */
-  --agentprism-pending-muted-foreground: 70.2% 0.183 293.541; /* violet.400 */
+  --agentprism-pending: 52.2% 0.082 245.431; /* blue-500 */
+  --agentprism-pending-muted: 27.9% 0.039 244.504; /* dark slate-blue tint */
+  --agentprism-pending-muted-foreground: 75.9% 0.061 243.329;
 
   /* Code syntax highlighting */
-  --agentprism-code-string: 70.4% 0.191 22.216; /* red.400 */
-  --agentprism-code-number: 70.4% 0.191 22.216; /* red.400 */
-  --agentprism-code-key: 80.9% 0.105 251.813; /* blue.300 */
-  --agentprism-code-base: 70.7% 0.022 261.325; /* gray.400 */
+  --agentprism-code-string: 74.1% 0.111 33.398; /* warm red, lightened */
+  --agentprism-code-number: 74.1% 0.111 33.398;
+  --agentprism-code-key: 75.9% 0.061 243.329; /* slate blue, lightened */
+  --agentprism-code-base: 66.5% 0.023 85.959; /* ink-400 */
 
   /* Generic badge colors */
-  --agentprism-badge-default: 21% 0.034 264.665; /* gray.900 */
-  --agentprism-badge-default-foreground: 70.7% 0.022 261.325; /* gray.400 */
+  --agentprism-badge-default: 21.3% 0.006 91.63; /* ink-900 */
+  --agentprism-badge-default-foreground: 66.5% 0.023 85.959; /* ink-400 */
 
   /* Trace colors (llm) */
   --agentprism-avatar-llm: 82.7% 0.119 306.383; /* purple.300 */

package/src/features/workflow/lib/workflow-execution-builders.ts

@@ -50,10 +50,10 @@ const extractVersionRecord = (
   lookup: WorkflowLookup,
 ) => {
   const inputs = history.inputs ?? {};
-  const metadata = (inputs.metadata ?? inputs.workflow ?? inputs.canvas ?? {}) as Record<
-    string,
-    unknown
-  >;
+  const metadata = (inputs.metadata ??
+    inputs.workflow ??
+    inputs.canvas ??
+    {}) as Record<string, unknown>;
   const versionIdRaw = metadata?.workflow_version_id;
   if (typeof versionIdRaw === "string" && versionIdRaw) {
     return lookup.versions.get(versionIdRaw);

package/src/features/workflow/lib/workflow-execution.types.ts

@@ -31,17 +31,10 @@ export type WorkflowLookup = {
 };
 
 export type WorkflowExecutionStatus =
-  | "running"
-  | "success"
-  | "failed"
-  | "partial";
+  "running" | "success" | "failed" | "partial";
 
 export type WorkflowExecutionNodeStatus =
-  | "idle"
-  | "running"
-  | "success"
-  | "error"
-  | "warning";
+  "idle" | "running" | "success" | "error" | "warning";
 
 export interface WorkflowExecutionNode {
   id: string;