orcheo-studio 0.24.5 → 0.24.7

package/src/features/workflow/components/dialogs/upload-workflow-dialog.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Loader2, Upload } from "lucide-react";
 import { Button } from "@/design-system/ui/button";
@@ -21,51 +21,24 @@ import { parseWorkflowFrontmatter } from "@features/workflow/lib/workflow-frontm
 import { getWorkflowRouteRef } from "@features/workflow/lib/workflow-storage-helpers";
 import { getSelectedWorkspaceSlug } from "@/lib/workspace-session";
 import { getWorkspaceWorkflowPath } from "@/lib/workspace-routing";
+import { WorkflowFolderPicker } from "./workflow-folder-picker";
+import type { WorkflowFolderSelection } from "@features/workflow/lib/workflow-folder-selection";
 
 interface UploadWorkflowDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
 }
 
-const MAX_SCRIPT_UPLOAD_BYTES = 1024 * 1024;
-const MAX_CONFIG_UPLOAD_BYTES = 256 * 1024;
-const JSON_CONFIG_MIME_TYPES = new Set(["", "application/json", "text/json"]);
-
-const formatUploadLimit = (bytes: number): string => {
-  if (bytes >= 1024 * 1024) {
-    return `${bytes / (1024 * 1024)} MB`;
-  }
-  return `${bytes / 1024} KB`;
-};
-
-const validateUploadFile = (
-  file: File,
-  options: {
-    label: string;
-    extension: string;
-    maxBytes: number;
-  },
-): string | null => {
-  if (!file.name.toLowerCase().endsWith(options.extension)) {
-    return `${options.label} must use the ${options.extension} extension.`;
-  }
-  if (file.size > options.maxBytes) {
-    return `${options.label} must be ${formatUploadLimit(options.maxBytes)} or smaller.`;
-  }
-  return null;
-};
-
 export function UploadWorkflowDialog({
   open,
   onOpenChange,
 }: UploadWorkflowDialogProps) {
   const navigate = useNavigate();
-  const scriptInputRef = useRef<HTMLInputElement>(null);
-  const configInputRef = useRef<HTMLInputElement>(null);
 
   const [workflowName, setWorkflowName] = useState("");
   const [scriptContent, setScriptContent] = useState<string | null>(null);
   const [scriptFileName, setScriptFileName] = useState("");
+  const [configFileName, setConfigFileName] = useState<string | null>(null);
   const [configContent, setConfigContent] = useState<Record<
     string,
     unknown
@@ -77,15 +50,10 @@ export function UploadWorkflowDialog({
     setWorkflowName("");
     setScriptContent(null);
     setScriptFileName("");
+    setConfigFileName(null);
     setConfigContent(null);
     setIsUploading(false);
     setError(null);
-    if (scriptInputRef.current) {
-      scriptInputRef.current.value = "";
-    }
-    if (configInputRef.current) {
-      configInputRef.current.value = "";
-    }
   }, []);
 
   const handleOpenChange = useCallback(
@@ -98,83 +66,33 @@ export function UploadWorkflowDialog({
     [onOpenChange, reset],
   );
 
-  const handleScriptFileChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const file = event.target.files?.[0];
-      if (!file) {
-        return;
-      }
-      const validationError = validateUploadFile(file, {
-        label: "Workflow script",
-        extension: ".py",
-        maxBytes: MAX_SCRIPT_UPLOAD_BYTES,
-      });
-      if (validationError) {
-        setError(validationError);
-        setScriptContent(null);
-        setScriptFileName("");
-        event.target.value = "";
-        return;
-      }
-      setError(null);
-      setScriptFileName(file.name);
-      if (!workflowName) {
-        const nameWithoutExt = file.name.replace(/\.py$/i, "");
-        setWorkflowName(nameWithoutExt);
+  const handleSelect = useCallback((selection: WorkflowFolderSelection) => {
+    setError(null);
+    setScriptContent(selection.scriptContent);
+    setScriptFileName(selection.scriptName);
+    setConfigFileName(selection.configName);
+    setConfigContent(selection.configContent);
+    setWorkflowName((current) => {
+      if (current) {
+        return current;
       }
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const text = e.target?.result;
-        if (typeof text === "string") {
-          setScriptContent(text);
-          const frontmatter = parseWorkflowFrontmatter(text);
-          if (!workflowName && frontmatter.name) {
-            setWorkflowName(frontmatter.name);
-          }
-        }
-      };
-      reader.readAsText(file);
-    },
-    [workflowName],
-  );
+      const frontmatter = parseWorkflowFrontmatter(selection.scriptContent);
+      return frontmatter.name ?? selection.scriptName.replace(/\.py$/i, "");
+    });
+  }, []);
 
-  const handleConfigFileChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const file = event.target.files?.[0];
-      if (!file) {
-        return;
-      }
-      const validationError = validateUploadFile(file, {
-        label: "Config file",
-        extension: ".json",
-        maxBytes: MAX_CONFIG_UPLOAD_BYTES,
-        acceptedMimeTypes: JSON_CONFIG_MIME_TYPES,
-      });
-      if (validationError) {
-        setError(validationError);
-        setConfigContent(null);
-        event.target.value = "";
-        return;
-      }
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const text = e.target?.result;
-        if (typeof text !== "string") {
-          return;
-        }
-        try {
-          const parsed = JSON.parse(text) as Record<string, unknown>;
-          setConfigContent(parsed);
-          setError(null);
-        } catch {
-          setError("config.json is not valid JSON.");
-          setConfigContent(null);
-        }
-      };
-      reader.readAsText(file);
-    },
-    [],
-  );
+  const handleSelectionError = useCallback((message: string) => {
+    setScriptContent(null);
+    setScriptFileName("");
+    setConfigFileName(null);
+    setConfigContent(null);
+    setError(message);
+    toast({
+      title: "Couldn't use that folder",
+      description: message,
+      variant: "destructive",
+    });
+  }, []);
 
   const handleUpload = useCallback(async () => {
     if (!scriptContent || !workflowName.trim()) {
@@ -230,35 +148,21 @@ export function UploadWorkflowDialog({
         <DialogHeader>
           <DialogTitle>Upload Workflow</DialogTitle>
           <DialogDescription>
-            Upload a Python workflow script and an optional JSON config to
-            create a new workflow.
+            Select a folder containing a Python workflow script and an optional
+            JSON config to create a new workflow.
           </DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4">
           <div className="space-y-1.5">
-            <Label htmlFor="upload-script">
-              Workflow Script <span className="text-destructive">*</span>
+            <Label htmlFor="upload-folder">
+              Workflow Folder <span className="text-destructive">*</span>
             </Label>
-            <Input
-              id="upload-script"
-              ref={scriptInputRef}
-              type="file"
-              accept=".py"
-              onChange={handleScriptFileChange}
-              disabled={isUploading}
-            />
-            {scriptFileName && (
-              <p className="text-xs text-muted-foreground">{scriptFileName}</p>
-            )}
-          </div>
-          <div className="space-y-1.5">
-            <Label htmlFor="upload-config">Config (optional)</Label>
-            <Input
-              id="upload-config"
-              ref={configInputRef}
-              type="file"
-              accept=".json"
-              onChange={handleConfigFileChange}
+            <WorkflowFolderPicker
+              idPrefix="upload"
+              scriptName={scriptFileName}
+              configName={configFileName}
+              onSelect={handleSelect}
+              onError={handleSelectionError}
               disabled={isUploading}
             />
           </div>

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/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 = ({