orcheo-studio 0.24.4 → 0.24.6

package/src/features/workflow/lib/workflow-folder-selection.ts

@@ -0,0 +1,239 @@
+/**
+ * Shared logic for selecting a workflow from a folder.
+ *
+ * A workflow folder is expected to contain exactly one Python (`.py`) script
+ * and at most one JSON (`.json`) config file at its top level. Multiple files
+ * of either kind are rejected as ambiguous so callers can surface an
+ * easy-to-understand error. The helpers here work for both folder `<input>`
+ * elements (`webkitdirectory`) and folder drag-and-drop.
+ */
+
+export const MAX_SCRIPT_UPLOAD_BYTES = 1024 * 1024;
+export const MAX_CONFIG_UPLOAD_BYTES = 256 * 1024;
+
+/** Error with a user-facing message describing why a folder was rejected. */
+export class WorkflowFolderSelectionError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "WorkflowFolderSelectionError";
+  }
+}
+
+export interface WorkflowFolderSelection {
+  scriptName: string;
+  scriptContent: string;
+  configName: string | null;
+  configContent: Record<string, unknown> | null;
+}
+
+const formatUploadLimit = (bytes: number): string => {
+  if (bytes >= 1024 * 1024) {
+    return `${bytes / (1024 * 1024)} MB`;
+  }
+  return `${bytes / 1024} KB`;
+};
+
+const hasExtension = (name: string, extension: string): boolean =>
+  name.toLowerCase().endsWith(extension);
+
+const formatNames = (files: File[]): string =>
+  files.map((file) => file.name).join(", ");
+
+/**
+ * Split a list of files into the single script and optional config.
+ * Throws {@link WorkflowFolderSelectionError} when the folder is ambiguous or
+ * is missing a script.
+ */
+export const classifyWorkflowFolderFiles = (
+  files: File[],
+): { script: File; config: File | null } => {
+  const scripts = files.filter((file) => hasExtension(file.name, ".py"));
+  const configs = files.filter((file) => hasExtension(file.name, ".json"));
+
+  if (scripts.length === 0) {
+    throw new WorkflowFolderSelectionError(
+      "No Python (.py) workflow script was found in the folder. Add exactly one .py file and try again.",
+    );
+  }
+  if (scripts.length > 1) {
+    throw new WorkflowFolderSelectionError(
+      `Found ${scripts.length} Python (.py) files (${formatNames(scripts)}). ` +
+        "Keep exactly one .py file in the folder so it's clear which script to use.",
+    );
+  }
+  if (configs.length > 1) {
+    throw new WorkflowFolderSelectionError(
+      `Found ${configs.length} JSON (.json) config files (${formatNames(configs)}). ` +
+        "Keep at most one .json file in the folder so it's clear which config to use.",
+    );
+  }
+
+  return { script: scripts[0], config: configs[0] ?? null };
+};
+
+const isTopLevelFile = (file: File): boolean => {
+  const relativePath =
+    (file as File & { webkitRelativePath?: string }).webkitRelativePath ?? "";
+  // "" (no path info), "folder/file.py" → top level; "folder/sub/file.py" → nested.
+  return relativePath.split("/").length <= 2;
+};
+
+/**
+ * Collect the top-level files from a folder `<input webkitdirectory>` FileList,
+ * ignoring anything inside nested subdirectories.
+ */
+export const collectFolderInputFiles = (fileList: FileList | null): File[] => {
+  if (!fileList) {
+    return [];
+  }
+  return Array.from(fileList).filter(isTopLevelFile);
+};
+
+interface FileSystemEntryLike {
+  isFile: boolean;
+  isDirectory: boolean;
+  file?: (
+    onSuccess: (file: File) => void,
+    onError?: (err: unknown) => void,
+  ) => void;
+  createReader?: () => {
+    readEntries: (
+      onSuccess: (entries: FileSystemEntryLike[]) => void,
+      onError?: (err: unknown) => void,
+    ) => void;
+  };
+}
+
+const entryToFile = (entry: FileSystemEntryLike): Promise<File> =>
+  new Promise((resolve, reject) => {
+    if (!entry.file) {
+      reject(new Error("Unable to read dropped file."));
+      return;
+    }
+    entry.file(resolve, reject);
+  });
+
+const readDirectoryEntries = (
+  directory: FileSystemEntryLike,
+): Promise<FileSystemEntryLike[]> =>
+  new Promise((resolve, reject) => {
+    const reader = directory.createReader?.();
+    if (!reader) {
+      resolve([]);
+      return;
+    }
+    const entries: FileSystemEntryLike[] = [];
+    const readBatch = () => {
+      reader.readEntries((batch) => {
+        // readEntries returns results in batches; an empty batch marks the end.
+        if (batch.length === 0) {
+          resolve(entries);
+          return;
+        }
+        entries.push(...batch);
+        readBatch();
+      }, reject);
+    };
+    readBatch();
+  });
+
+/**
+ * Collect the top-level files from a folder drag-and-drop event. Supports
+ * dropping a folder (its immediate children are used) or dropping the loose
+ * files directly. Falls back to `dataTransfer.files` when the entry API is
+ * unavailable.
+ */
+export const collectDroppedFolderFiles = async (
+  dataTransfer: DataTransfer,
+): Promise<File[]> => {
+  const items = dataTransfer.items ? Array.from(dataTransfer.items) : [];
+  const entries: FileSystemEntryLike[] = [];
+  for (const item of items) {
+    const entry =
+      typeof item.webkitGetAsEntry === "function"
+        ? item.webkitGetAsEntry()
+        : null;
+    if (entry) {
+      entries.push(entry as unknown as FileSystemEntryLike);
+    }
+  }
+
+  if (entries.length === 0) {
+    return Array.from(dataTransfer.files ?? []);
+  }
+
+  const files: File[] = [];
+  for (const entry of entries) {
+    if (entry.isFile) {
+      files.push(await entryToFile(entry));
+    } else if (entry.isDirectory) {
+      const children = await readDirectoryEntries(entry);
+      for (const child of children) {
+        if (child.isFile) {
+          files.push(await entryToFile(child));
+        }
+      }
+    }
+  }
+  return files;
+};
+
+const readFileText = (file: File): Promise<string> =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      if (typeof result === "string") {
+        resolve(result);
+      } else {
+        reject(new Error(`Unable to read ${file.name}.`));
+      }
+    };
+    reader.onerror = () =>
+      reject(reader.error ?? new Error(`Unable to read ${file.name}.`));
+    reader.readAsText(file);
+  });
+
+/**
+ * Classify, validate, and read the workflow script and optional config from a
+ * folder's files. Throws {@link WorkflowFolderSelectionError} with a
+ * user-facing message on any problem.
+ */
+export const loadWorkflowFolderSelection = async (
+  files: File[],
+): Promise<WorkflowFolderSelection> => {
+  const { script, config } = classifyWorkflowFolderFiles(files);
+
+  if (script.size > MAX_SCRIPT_UPLOAD_BYTES) {
+    throw new WorkflowFolderSelectionError(
+      `Workflow script must be ${formatUploadLimit(MAX_SCRIPT_UPLOAD_BYTES)} or smaller.`,
+    );
+  }
+  const scriptContent = await readFileText(script);
+
+  let configName: string | null = null;
+  let configContent: Record<string, unknown> | null = null;
+  if (config) {
+    if (config.size > MAX_CONFIG_UPLOAD_BYTES) {
+      throw new WorkflowFolderSelectionError(
+        `Config file must be ${formatUploadLimit(MAX_CONFIG_UPLOAD_BYTES)} or smaller.`,
+      );
+    }
+    const configText = await readFileText(config);
+    try {
+      configContent = JSON.parse(configText) as Record<string, unknown>;
+    } catch {
+      throw new WorkflowFolderSelectionError(
+        `${config.name} is not valid JSON.`,
+      );
+    }
+    configName = config.name;
+  }
+
+  return {
+    scriptName: script.name,
+    scriptContent,
+    configName,
+    configContent,
+  };
+};

package/src/features/workflow/lib/workflow-frontmatter.ts

@@ -22,7 +22,9 @@ const parseTomlString = (value: string): string | undefined => {
   if (trimmed.startsWith('"') && trimmed.endsWith('"')) {
     try {
       const parsed = JSON.parse(trimmed) as unknown;
-      return typeof parsed === "string" && parsed.trim() ? parsed.trim() : undefined;
+      return typeof parsed === "string" && parsed.trim()
+        ? parsed.trim()
+        : undefined;
     } catch {
       return undefined;
     }

package/src/features/workflow/lib/workflow-storage-api.ts

@@ -498,7 +498,8 @@ export const extractCronConfigFromVersionGraph = (
 
 // Matches a value that is exactly a single `{{config.configurable.<name>}}`
 // placeholder, optionally padded with whitespace inside the braces.
-const CONFIGURABLE_TEMPLATE = /^\{\{\s*config\.configurable\.([^}\s.]+)\s*\}\}$/;
+const CONFIGURABLE_TEMPLATE =
+  /^\{\{\s*config\.configurable\.([^}\s.]+)\s*\}\}$/;
 
 const resolveConfigurableTemplate = (
   value: string | null | undefined,
@@ -539,16 +540,11 @@ const resolveConfigurableCronConfig = (
       resolveConfigurableTemplate(config.expression, configurable) ??
       config.expression,
     timezone: resolveConfigurableTemplate(config.timezone, configurable) as
-      | string
-      | undefined,
+      string | undefined,
     start_at: resolveConfigurableTemplate(config.start_at, configurable) as
-      | string
-      | null
-      | undefined,
+      string | null | undefined,
     end_at: resolveConfigurableTemplate(config.end_at, configurable) as
-      | string
-      | null
-      | undefined,
+      string | null | undefined,
   };
 };
 

package/src/features/workflow/lib/workflow-storage-helpers.ts

@@ -281,11 +281,9 @@ const parseWorkflowMetadata = (
 
   const workflowRecord = workflowMetadata as Record<string, unknown>;
   const snapshotPayload = workflowRecord.snapshot as
-    | WorkflowSnapshot
-    | undefined;
+    WorkflowSnapshot | undefined;
   const summaryPayload = workflowRecord.summary as
-    | WorkflowDiffResult["summary"]
-    | undefined;
+    WorkflowDiffResult["summary"] | undefined;
   const messagePayload = workflowRecord.message as string | undefined;
   const workflowToGraph = (workflowRecord.workflowToGraph ??
     workflowRecord.canvasToGraph) as Record<string, string> | undefined;

package/src/features/workflow/lib/workflow-storage.ts

@@ -399,7 +399,9 @@ export const uploadWorkflowFromFiles = async (
     });
   } catch (error) {
     const message =
-      error instanceof Error ? error.message : "Upload failed. Please try again.";
+      error instanceof Error
+        ? error.message
+        : "Upload failed. Please try again.";
     const uploadError = saveWorkflowUploadError(created.id, message);
     const stored = await ensureWorkflow(created.id);
     invalidateWorkflowListCache();
@@ -453,7 +455,9 @@ export const updateWorkflowFromFiles = async (
     });
   } catch (error) {
     const message =
-      error instanceof Error ? error.message : "Update failed. Please try again.";
+      error instanceof Error
+        ? error.message
+        : "Update failed. Please try again.";
     saveWorkflowUploadError(workflowId, message);
     invalidateWorkflowListCache();
     invalidateWorkflowCache(workflowId);

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

@@ -161,12 +161,7 @@ export interface WorkflowListenerHealth {
   last_event_at?: string | null;
   last_error?: string | null;
   runtime_status:
-    | "starting"
-    | "healthy"
-    | "backoff"
-    | "stopped"
-    | "error"
-    | "unknown";
+    "starting" | "healthy" | "backoff" | "stopped" | "error" | "unknown";
   runtime_detail?: string | null;
   last_polled_at?: string | null;
   consecutive_failures: number;

package/src/features/workflow/lib/workflow-upload-errors.ts

@@ -7,7 +7,8 @@ export interface WorkflowUploadError {
 
 const STORAGE_PREFIX = "orcheo.workflowUploadError.";
 
-const storageKey = (workflowId: string): string => `${STORAGE_PREFIX}${workflowId}`;
+const storageKey = (workflowId: string): string =>
+  `${STORAGE_PREFIX}${workflowId}`;
 
 const canUseSessionStorage = (): boolean =>
   typeof window !== "undefined" && Boolean(window.sessionStorage);
@@ -26,7 +27,10 @@ export const saveWorkflowUploadError = (
   }
 
   try {
-    window.sessionStorage.setItem(storageKey(workflowId), JSON.stringify(error));
+    window.sessionStorage.setItem(
+      storageKey(workflowId),
+      JSON.stringify(error),
+    );
   } catch {
     // Upload failure rendering should not depend on storage availability.
   }

package/src/features/workflow/pages/workflow/components/settings-tab-content.tsx

@@ -61,15 +61,27 @@ const runtimeStatusBadge = (
 ) => {
   switch (status) {
     case "healthy":
-      return { label: "Healthy", className: "bg-emerald-600 text-white" };
+      return {
+        label: "Healthy",
+        className: "bg-success text-success-foreground",
+      };
     case "starting":
-      return { label: "Starting", className: "bg-sky-600 text-white" };
+      return { label: "Starting", className: "bg-info text-info-foreground" };
     case "backoff":
-      return { label: "Backoff", className: "bg-amber-500 text-black" };
+      return {
+        label: "Backoff",
+        className: "bg-warning text-warning-foreground",
+      };
     case "error":
-      return { label: "Runtime Error", className: "bg-rose-600 text-white" };
+      return {
+        label: "Runtime Error",
+        className: "bg-destructive text-destructive-foreground",
+      };
     case "stopped":
-      return { label: "Stopped", className: "bg-slate-500 text-white" };
+      return {
+        label: "Stopped",
+        className: "bg-muted-foreground text-background",
+      };
     default:
       return { label: "Unknown", className: "bg-muted text-muted-foreground" };
   }
@@ -274,13 +286,13 @@ export function SettingsTabContent({
             </AlertDescription>
           </Alert>
         ) : isListenersLoading ? (
-          <Card>
+          <Card className="border-border/70 bg-muted/40 shadow-none">
             <CardContent className="pt-6 text-sm text-muted-foreground">
               Loading listener health and control state...
             </CardContent>
           </Card>
         ) : listeners.length === 0 ? (
-          <Card>
+          <Card className="border-border/70 bg-muted/40 shadow-none">
             <CardHeader>
               <CardTitle>No listeners detected</CardTitle>
               <CardDescription>
@@ -320,7 +332,10 @@ export function SettingsTabContent({
                   listener.status === "paused" || listener.status === "blocked";
 
                 return (
-                  <Card key={listener.subscription_id}>
+                  <Card
+                    key={listener.subscription_id}
+                    className="border-border/70 bg-muted/40 shadow-none"
+                  >
                     <CardHeader className="gap-3 sm:flex-row sm:items-start sm:justify-between">
                       <div className="space-y-2">
                         <div className="flex flex-wrap items-center gap-2">
@@ -394,7 +409,7 @@ export function SettingsTabContent({
 
                       {(listener.runtime_detail || listener.last_error) && (
                         <div className="sm:col-span-2 xl:col-span-4">
-                          <div className="rounded-lg border border-amber-300/50 bg-amber-50/70 px-3 py-2 text-amber-950 dark:border-amber-700/50 dark:bg-amber-950/30 dark:text-amber-100">
+                          <div className="rounded-lg border border-warning/40 bg-warning-muted/70 px-3 py-2 text-warning-muted-foreground">
                             <div className="mb-1 flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em]">
                               <Zap className="h-3.5 w-3.5" />
                               Runtime detail

package/src/features/workflow/pages/workflow/components/workflow-tab-content.tsx

@@ -239,7 +239,7 @@ const resolveRunResultBanner = (
       return {
         Icon: CheckCircle2,
         className:
-          "border-emerald-500/40 bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300",
+          "border-success/40 bg-success-muted text-success-muted-foreground",
         message: "Workflow run succeeded. See the full trace on the Trace tab.",
       };
     case "failed":
@@ -252,7 +252,7 @@ const resolveRunResultBanner = (
       return {
         Icon: AlertTriangle,
         className:
-          "border-amber-500/40 bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300",
+          "border-warning/40 bg-warning-muted text-warning-muted-foreground",
         message:
           "Workflow run finished with partial results. Check the Trace tab for details.",
       };
@@ -261,7 +261,7 @@ const resolveRunResultBanner = (
       return {
         Icon: AlertTriangle,
         className:
-          "border-amber-500/40 bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300",
+          "border-warning/40 bg-warning-muted text-warning-muted-foreground",
         message:
           "Workflow run ended without a final status. Check the Trace tab for the latest status.",
       };
@@ -752,7 +752,9 @@ export function WorkflowTabContent({
                   void handleScheduleToggle(checked)
                 }
                 disabled={
-                  isSchedulePending || !canToggleSchedule || uploadBlocksWorkflow
+                  isSchedulePending ||
+                  !canToggleSchedule ||
+                  uploadBlocksWorkflow
                 }
               />
             </div>

package/src/features/workflow/pages/workflow/hooks/controller/use-workflow-execution-controller.ts

@@ -92,7 +92,10 @@ export function useWorkflowExecutionController(
 
       const graphToWorkflow = latestVersionRecord?.graphToWorkflow ?? {};
       const executionId = generateRandomId("run");
-      const executionRecord = createExecutionRecord(executionId, graphToWorkflow);
+      const executionRecord = createExecutionRecord(
+        executionId,
+        graphToWorkflow,
+      );
 
       if (core.websocketRef.current) {
         core.websocketRef.current.close();

package/src/features/workflow/pages/workflow/hooks/use-execution-updates.ts

@@ -48,8 +48,10 @@ export function useExecutionUpdates({
   );
 
   const describePayload = useCallback(
-    (payload: Record<string, unknown>, graphToWorkflow: Record<string, string>) =>
-      describePayloadRaw(payload, graphToWorkflow, (id) => id),
+    (
+      payload: Record<string, unknown>,
+      graphToWorkflow: Record<string, string>,
+    ) => describePayloadRaw(payload, graphToWorkflow, (id) => id),
     [],
   );
 

package/src/features/workflow/pages/workflow-gallery/create-team-dialog.tsx

@@ -70,9 +70,7 @@ export const CreateTeamDialog = ({
       await onCreate(trimmedName, trimmedSlug);
       onOpenChange(false);
     } catch (err) {
-      setError(
-        err instanceof Error ? err.message : "Failed to create team.",
-      );
+      setError(err instanceof Error ? err.message : "Failed to create team.");
     } finally {
       setIsSubmitting(false);
     }
@@ -118,9 +116,7 @@ export const CreateTeamDialog = ({
               underscores only.
             </p>
           </div>
-          {error ? (
-            <p className="text-sm text-destructive">{error}</p>
-          ) : null}
+          {error ? <p className="text-sm text-destructive">{error}</p> : null}
         </div>
 
         <DialogFooter>

package/src/features/workflow/pages/workflow-gallery/workflow-card.tsx

@@ -213,7 +213,7 @@ export const WorkflowCard = ({
     <>
       <Card
         className={cn(
-          "flex w-full flex-col overflow-hidden border-border/70 bg-card text-card-foreground shadow-[0_16px_48px_rgba(15,23,42,0.08)] transition-transform duration-200 hover:-translate-y-1 dark:shadow-[0_16px_48px_rgba(0,0,0,0.45)] text-[20px] md:text-[14px]",
+          "flex w-full flex-col overflow-hidden border-border/70 bg-card text-card-foreground shadow-[0_16px_48px_rgba(40,30,16,0.1)] transition-transform duration-200 hover:-translate-y-1 dark:shadow-[0_16px_48px_rgba(0,0,0,0.45)] text-[20px] md:text-[14px]",
           WORKFLOW_GALLERY_CARD_ASPECT_CLASSNAME,
           isClickable && "cursor-pointer",
         )}
@@ -223,7 +223,7 @@ export const WorkflowCard = ({
         role={isClickable ? "button" : undefined}
         tabIndex={isClickable ? 0 : undefined}
       >
-        <CardHeader className="relative flex h-12 items-center justify-center overflow-hidden border-b border-border/70 bg-gradient-to-r from-slate-950 via-slate-900 to-slate-800 px-4 py-0 text-center text-slate-50 dark:border-border/60 dark:from-slate-100 dark:via-slate-50 dark:to-slate-200 dark:text-slate-950">
+        <CardHeader className="relative flex h-12 items-center justify-center overflow-hidden border-b border-border/70 bg-gradient-to-r from-stone-950 via-stone-900 to-stone-800 px-4 py-0 text-center text-stone-50 dark:border-border/60 dark:from-stone-100 dark:via-stone-50 dark:to-stone-200 dark:text-stone-950">
           <div
             className="absolute inset-0 opacity-25 dark:opacity-40"
             aria-hidden="true"
@@ -235,7 +235,7 @@ export const WorkflowCard = ({
           />
 
           <div className="relative z-10 flex items-center gap-2">
-            <span className="font-mono text-[10px] uppercase tracking-[0.22em] text-white/70 dark:text-slate-700">
+            <span className="font-mono text-[10px] uppercase tracking-[0.22em] text-white/70 dark:text-stone-700">
               {headerLabel}
             </span>
           </div>
@@ -253,7 +253,7 @@ export const WorkflowCard = ({
               <Button
                 variant="ghost"
                 size="icon"
-                className="absolute right-2 top-2 z-10 h-7 w-7 text-white/75 hover:bg-white/10 hover:text-white dark:text-slate-700 dark:hover:bg-slate-950/10 dark:hover:text-slate-950"
+                className="absolute right-2 top-2 z-10 h-7 w-7 text-white/75 hover:bg-white/10 hover:text-white dark:text-stone-700 dark:hover:bg-stone-950/10 dark:hover:text-stone-950"
                 onClick={stopPropagation}
                 onPointerDown={stopPropagation}
                 aria-label="Workflow actions"
@@ -290,7 +290,7 @@ export const WorkflowCard = ({
                     <>
                       <DropdownMenuSeparator />
                       <DropdownMenuItem
-                        className="text-red-600"
+                        className="text-destructive"
                         onSelect={(event) => {
                           event.preventDefault();
                           event.stopPropagation();
@@ -314,31 +314,31 @@ export const WorkflowCard = ({
               className={cn(
                 "absolute left-0 top-0 flex items-center gap-1 rounded-md border px-2 py-1 shadow-sm",
                 uploadError
-                  ? "border-red-500/40 bg-red-50 text-red-700 dark:bg-red-950/40 dark:text-red-300"
-                  : "border-border/70 bg-muted/60 text-muted-foreground dark:bg-slate-950/20",
+                  ? "border-destructive/40 bg-destructive-muted text-destructive-muted-foreground"
+                  : "border-border/70 bg-muted/60 text-muted-foreground dark:bg-background/30",
               )}
             >
               <span
                 className={cn(
                   "h-1.5 w-1.5 rounded-full",
                   uploadError
-                    ? "bg-red-600 shadow-[0_0_6px_rgba(220,38,38,0.45)] dark:bg-red-300"
-                    : "bg-slate-800 shadow-[0_0_6px_rgba(15,23,42,0.32)] dark:bg-slate-200 dark:shadow-[0_0_6px_rgba(226,232,240,0.28)]",
+                    ? "bg-destructive shadow-[0_0_6px_hsl(var(--destructive)/0.5)]"
+                    : "bg-foreground shadow-[0_0_6px_hsl(var(--foreground)/0.35)]",
                 )}
               />
               <span
                 className={cn(
                   "font-mono text-[9px] font-bold uppercase tracking-[0.1em]",
                   uploadError
-                    ? "text-red-700 dark:text-red-300"
-                    : "text-slate-700 dark:text-slate-300",
+                    ? "text-destructive-muted-foreground"
+                    : "text-muted-foreground",
                 )}
               >
                 {uploadError ? "Error" : "AI"}
               </span>
             </div>
 
-            <div className="flex h-[7em] w-[7em] items-center justify-center overflow-hidden rounded-full border-4 border-slate-900 bg-slate-100 shadow-[0_4px_16px_rgba(15,23,42,0.18)] dark:border-slate-100 dark:bg-slate-800 dark:shadow-[0_4px_16px_rgba(0,0,0,0.35)]">
+            <div className="flex h-[7em] w-[7em] items-center justify-center overflow-hidden rounded-full border-4 border-primary bg-muted shadow-[0_4px_16px_rgba(248,120,37,0.24)] dark:shadow-[0_4px_16px_rgba(0,0,0,0.35)]">
               <img
                 src={avatarUrl}
                 alt={workflow.name}
@@ -354,7 +354,7 @@ export const WorkflowCard = ({
                     <Button
                       variant="outline"
                       size="icon"
-                      className="absolute right-10 top-0 h-8 w-8 border-emerald-500/40 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-950/40 dark:text-emerald-300 dark:hover:bg-emerald-900/60"
+                      className="absolute right-10 top-0 h-8 w-8 border-success/40 bg-success-muted text-success-muted-foreground hover:bg-success/20"
                       aria-label={`Update ${workflow.name} to candidate version ${candidateUpdate.latestVersion}`}
                       data-card-action="true"
                       onClick={(event) => {
@@ -376,7 +376,7 @@ export const WorkflowCard = ({
                         <p>{candidateUpdate.latestSummary}</p>
                       ) : null}
                       {candidateUpdate.firstMigration ? (
-                        <p className="text-amber-600 dark:text-amber-300">
+                        <p className="text-warning-muted-foreground">
                           {candidateUpdate.firstMigration}
                         </p>
                       ) : null}
@@ -490,7 +490,7 @@ export const WorkflowCard = ({
             </DialogHeader>
 
             {candidateUpdate.isMajor ? (
-              <div className="rounded-md border border-amber-500/50 bg-amber-50 px-3 py-2 text-sm text-amber-900 dark:bg-amber-950/30 dark:text-amber-200">
+              <div className="rounded-md border border-warning/50 bg-warning-muted px-3 py-2 text-sm text-warning-muted-foreground">
                 This is a major candidate update. Review migration notes before
                 applying it to this colleague.
               </div>
@@ -508,7 +508,7 @@ export const WorkflowCard = ({
                     </div>
                     <p className="mt-1 text-muted-foreground">{note.summary}</p>
                     {note.migration ? (
-                      <p className="mt-2 text-amber-700 dark:text-amber-300">
+                      <p className="mt-2 text-warning-muted-foreground">
                         {note.migration}
                       </p>
                     ) : null}