orcheo-studio 0.24.4 → 0.24.6

package/src/features/shared/components/top-navigation/version-status.tsx

@@ -44,17 +44,6 @@ const parseCache = (raw: string | null): SystemInfoCachePayload | null => {
   }
 };
 
-const shouldRefresh = (cache: SystemInfoCachePayload | null): boolean => {
-  if (!cache) {
-    return true;
-  }
-  const lastCheckedAt = Date.parse(cache.checkedAt);
-  if (Number.isNaN(lastCheckedAt)) {
-    return true;
-  }
-  return Date.now() - lastCheckedAt >= UPDATE_CHECK_TTL_MS;
-};
-
 const parseSemver = (value: string | null | undefined): ParsedSemver | null => {
   if (!value) {
     return null;
@@ -152,7 +141,10 @@ const isDismissed = (): boolean => {
 };
 
 export default function VersionStatus() {
-  const [systemInfo, setSystemInfo] = useState<SystemInfoResponse | null>(null);
+  const [cachedInfo, setCachedInfo] = useState<SystemInfoResponse | null>(null);
+  const [liveBackendVersion, setLiveBackendVersion] = useState<string | null>(
+    null,
+  );
   const [dismissedReminder, setDismissedReminder] = useState<boolean>(() =>
     isDismissed(),
   );
@@ -163,11 +155,12 @@ export default function VersionStatus() {
       window.localStorage.getItem(UPDATE_CHECK_CACHE_KEY),
     );
     if (cache) {
-      setSystemInfo(cache.payload);
-    }
-
-    if (!shouldRefresh(cache)) {
-      return;
+      setCachedInfo(cache.payload);
+      setLiveBackendVersion(cache.payload.backend.current_version);
+      const cacheAge = Date.now() - Date.parse(cache.checkedAt);
+      if (cacheAge < UPDATE_CHECK_TTL_MS) {
+        return;
+      }
     }
 
     let active = true;
@@ -176,7 +169,8 @@ export default function VersionStatus() {
         if (!active) {
           return;
         }
-        setSystemInfo(payload);
+        setLiveBackendVersion(payload.backend.current_version);
+        setCachedInfo(payload);
         const cachePayload: SystemInfoCachePayload = {
           checkedAt: new Date().toISOString(),
           payload,
@@ -196,39 +190,41 @@ export default function VersionStatus() {
   }, []);
 
   const studioUpdateAvailable = useMemo(() => {
-    if (!systemInfo) {
+    if (!cachedInfo) {
       return false;
     }
-    if (systemInfo.studio.update_available) {
+    if (cachedInfo.studio.update_available) {
       return true;
     }
-    return compareSemver(studioVersion, systemInfo.studio.latest_version) < 0;
-  }, [studioVersion, systemInfo]);
+    return compareSemver(studioVersion, cachedInfo.studio.latest_version) < 0;
+  }, [studioVersion, cachedInfo]);
 
   const showReminder =
-    ((systemInfo?.backend.update_available ?? false) ||
+    ((cachedInfo?.backend.update_available ?? false) ||
       studioUpdateAvailable) &&
     !dismissedReminder;
 
   const versionSummary = useMemo(() => {
-    const backend = systemInfo?.backend.current_version ?? "unknown";
+    const backend = liveBackendVersion ?? "unknown";
     return `Orcheo ${studioVersion} · Backend ${backend}`;
-  }, [studioVersion, systemInfo]);
+  }, [studioVersion, liveBackendVersion]);
 
   const updateLines = useMemo(() => {
-    if (!systemInfo) return [];
+    if (!cachedInfo) return [];
     const lines: string[] = [];
-    if (systemInfo.backend.update_available) {
+    if (cachedInfo.backend.update_available) {
       lines.push(
-        `Backend: ${systemInfo.backend.current_version} → ${systemInfo.backend.latest_version}`,
+        `Backend: ${cachedInfo.backend.current_version} → ${cachedInfo.backend.latest_version}`,
       );
     }
     if (studioUpdateAvailable) {
-      const studioCurrent = systemInfo.studio.current_version ?? studioVersion;
-      lines.push(`Orcheo: ${studioCurrent} → ${systemInfo.studio.latest_version}`);
+      const studioCurrent = cachedInfo.studio.current_version ?? studioVersion;
+      lines.push(
+        `Orcheo: ${studioCurrent} → ${cachedInfo.studio.latest_version}`,
+      );
     }
     return lines;
-  }, [studioUpdateAvailable, studioVersion, systemInfo]);
+  }, [studioUpdateAvailable, studioVersion, cachedInfo]);
 
   const dismissUpdateReminder = () => {
     if (typeof window === "undefined") {

package/src/features/shared/components/workspace-bootstrap-gate.tsx

@@ -155,7 +155,7 @@ export function WorkspaceBootstrapGate({
 
   if (isLoading) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-slate-100 text-foreground dark:bg-slate-950">
+      <div className="flex min-h-screen items-center justify-center bg-background text-foreground">
         <Card className="w-full max-w-md border-border bg-card/80 backdrop-blur-xl dark:border-primary/25 dark:bg-primary/5">
           <CardContent className="flex items-center gap-3 p-6 text-sm text-muted-foreground">
             <Loader2 className="h-4 w-4 animate-spin" />
@@ -171,16 +171,16 @@ export function WorkspaceBootstrapGate({
   }
 
   return (
-    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-slate-100 text-foreground dark:bg-slate-950">
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-background text-foreground">
       <div
-        className="absolute inset-0 bg-gradient-to-br from-slate-100 via-slate-200 to-slate-100 dark:from-slate-950 dark:via-slate-900/80 dark:to-black"
+        className="absolute inset-0 bg-gradient-to-br from-background via-secondary to-background dark:via-card/80"
         aria-hidden="true"
       />
       <div
         className="absolute inset-0 opacity-40 mix-blend-soft-light dark:opacity-60"
         style={{
           backgroundImage:
-            "radial-gradient(circle at 20% 20%, rgba(148, 163, 184, 0.2), transparent 45%), radial-gradient(circle at 80% 30%, rgba(56, 189, 248, 0.25), transparent 50%), radial-gradient(circle at 50% 80%, rgba(45, 212, 191, 0.2), transparent 55%)",
+            "radial-gradient(circle at 20% 20%, rgba(224, 192, 144, 0.25), transparent 45%), radial-gradient(circle at 80% 30%, rgba(248, 120, 37, 0.2), transparent 50%), radial-gradient(circle at 50% 80%, rgba(246, 245, 212, 0.35), transparent 55%)",
         }}
         aria-hidden="true"
       />

package/src/features/workflow/components/dialogs/credential-access-badge.tsx

@@ -12,7 +12,7 @@ export function CredentialAccessBadge({ access }: CredentialAccessBadgeProps) {
       return (
         <Badge
           variant="outline"
-          className="bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800"
+          className="border-info/30 bg-info-muted text-info-muted-foreground"
         >
           <Lock className="h-3 w-3 mr-1" />
           Scoped
@@ -22,7 +22,7 @@ export function CredentialAccessBadge({ access }: CredentialAccessBadgeProps) {
       return (
         <Badge
           variant="outline"
-          className="bg-purple-100 text-purple-800 border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800"
+          className="border-primary/30 bg-primary/10 text-primary-active"
         >
           <Users className="h-3 w-3 mr-1" />
           Shared

package/src/features/workflow/components/dialogs/credential-status-badge.tsx

@@ -15,7 +15,7 @@ export function CredentialStatusBadge({ status }: CredentialStatusBadgeProps) {
       return (
         <Badge
           variant="outline"
-          className="flex items-center gap-1 bg-emerald-100 text-emerald-800 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800"
+          className="flex items-center gap-1 border-success/30 bg-success-muted text-success-muted-foreground"
         >
           <CheckCircle2 className="h-3 w-3" />
           Healthy
@@ -25,7 +25,7 @@ export function CredentialStatusBadge({ status }: CredentialStatusBadgeProps) {
       return (
         <Badge
           variant="outline"
-          className="flex items-center gap-1 bg-red-100 text-red-800 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800"
+          className="flex items-center gap-1 border-destructive/30 bg-destructive-muted text-destructive-muted-foreground"
         >
           <AlertTriangle className="h-3 w-3" />
           Unhealthy

package/src/features/workflow/components/dialogs/credentials-table.tsx

@@ -353,7 +353,7 @@ export function CredentialsTable({
                         className={cn(
                           "h-6 w-6 transition-colors",
                           currentCopyState === "success" &&
-                            "text-emerald-600 hover:text-emerald-700",
+                            "text-success hover:text-success/80",
                           currentCopyState === "error" &&
                             "text-destructive hover:text-destructive",
                         )}

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

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useState } from "react";
 import { Loader2, RefreshCw } from "lucide-react";
 import { Button } from "@/design-system/ui/button";
 import {
@@ -9,10 +9,11 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/design-system/ui/dialog";
-import { Input } from "@/design-system/ui/input";
 import { Label } from "@/design-system/ui/label";
 import { toast } from "@/hooks/use-toast";
 import { updateWorkflowFromFiles } from "@features/workflow/lib/workflow-storage";
+import { WorkflowFolderPicker } from "./workflow-folder-picker";
+import type { WorkflowFolderSelection } from "@features/workflow/lib/workflow-folder-selection";
 
 interface UpdateWorkflowDialogProps {
   open: boolean;
@@ -27,11 +28,9 @@ export function UpdateWorkflowDialog({
   workflowId,
   workflowName,
 }: UpdateWorkflowDialogProps) {
-  const scriptInputRef = useRef<HTMLInputElement>(null);
-  const configInputRef = useRef<HTMLInputElement>(null);
-
   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
@@ -42,15 +41,10 @@ export function UpdateWorkflowDialog({
   const reset = useCallback(() => {
     setScriptContent(null);
     setScriptFileName("");
+    setConfigFileName(null);
     setConfigContent(null);
     setIsUpdating(false);
     setError(null);
-    if (scriptInputRef.current) {
-      scriptInputRef.current.value = "";
-    }
-    if (configInputRef.current) {
-      configInputRef.current.value = "";
-    }
   }, []);
 
   const handleOpenChange = useCallback(
@@ -63,50 +57,26 @@ export function UpdateWorkflowDialog({
     [onOpenChange, reset],
   );
 
-  const handleScriptFileChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const file = event.target.files?.[0];
-      if (!file) {
-        return;
-      }
-      setScriptFileName(file.name);
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const text = e.target?.result;
-        if (typeof text === "string") {
-          setScriptContent(text);
-        }
-      };
-      reader.readAsText(file);
-    },
-    [],
-  );
+  const handleSelect = useCallback((selection: WorkflowFolderSelection) => {
+    setError(null);
+    setScriptContent(selection.scriptContent);
+    setScriptFileName(selection.scriptName);
+    setConfigFileName(selection.configName);
+    setConfigContent(selection.configContent);
+  }, []);
 
-  const handleConfigFileChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const file = event.target.files?.[0];
-      if (!file) {
-        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 handleUpdate = useCallback(async () => {
     if (!scriptContent) {
@@ -149,35 +119,21 @@ export function UpdateWorkflowDialog({
         <DialogHeader>
           <DialogTitle>Update Workflow</DialogTitle>
           <DialogDescription>
-            Upload a new Python script and optional JSON config to create a new
-            version of &ldquo;{workflowName}&rdquo;.
+            Select a folder with a new Python script and optional JSON config to
+            create a new version of &ldquo;{workflowName}&rdquo;.
           </DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4">
           <div className="space-y-1.5">
-            <Label htmlFor="update-script">
-              Workflow Script <span className="text-destructive">*</span>
+            <Label htmlFor="update-folder">
+              Workflow Folder <span className="text-destructive">*</span>
             </Label>
-            <Input
-              id="update-script"
-              ref={scriptInputRef}
-              type="file"
-              accept=".py"
-              onChange={handleScriptFileChange}
-              disabled={isUpdating}
-            />
-            {scriptFileName && (
-              <p className="text-xs text-muted-foreground">{scriptFileName}</p>
-            )}
-          </div>
-          <div className="space-y-1.5">
-            <Label htmlFor="update-config">Config (optional)</Label>
-            <Input
-              id="update-config"
-              ref={configInputRef}
-              type="file"
-              accept=".json"
-              onChange={handleConfigFileChange}
+            <WorkflowFolderPicker
+              idPrefix="update"
+              scriptName={scriptFileName}
+              configName={configFileName}
+              onSelect={handleSelect}
+              onError={handleSelectionError}
               disabled={isUpdating}
             />
           </div>

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>