orcheo-studio 0.24.0 → 0.24.2

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

@@ -25,6 +25,10 @@ import {
   persistRunnableConfig,
   primeWorkflowCache,
 } from "./workflow-storage-versioning";
+import {
+  clearWorkflowUploadError,
+  saveWorkflowUploadError,
+} from "./workflow-upload-errors";
 import type {
   ApiWorkflow,
   SaveWorkflowInput,
@@ -53,6 +57,16 @@ let workflowListCache: WorkflowListCacheEntry | undefined;
 let workflowListInflight: Promise<StoredWorkflow[]> | undefined;
 let workflowListRequestId = 0;
 
+export class WorkflowUploadFailedError extends Error {
+  workflow: StoredWorkflow;
+
+  constructor(message: string, workflow: StoredWorkflow) {
+    super(message);
+    this.name = "WorkflowUploadFailedError";
+    this.workflow = workflow;
+  }
+}
+
 const resolveActor = (actor?: string): string => {
   const explicitActor = actor?.trim();
   if (explicitActor) {
@@ -135,24 +149,6 @@ const buildTemplateWorkflowMetadata = ({
   summary: { added: 0, removed: 0, modified: 0 },
 });
 
-const archiveWorkflowAfterFailedIngest = async (
-  workflowId: string,
-  actor: string,
-): Promise<void> => {
-  try {
-    await request(
-      `${API_BASE}/${workflowId}?actor=${encodeURIComponent(actor)}`,
-      {
-        method: "DELETE",
-      },
-    );
-    invalidateWorkflowListCache();
-    emitUpdate();
-  } catch {
-    // Preserve the original ingest error so callers see why the upload failed.
-  }
-};
-
 const assertTemplatePluginRequirements = async (
   requiredPlugins: string[] | undefined,
 ): Promise<void> => {
@@ -249,6 +245,8 @@ export const saveWorkflow = async (
   if (options?.runnableConfig !== undefined) {
     await persistRunnableConfig(workflowId, actor, options.runnableConfig);
   }
+  clearWorkflowUploadError(workflowId);
+  invalidateWorkflowCache(workflowId);
 
   const stored = await ensureWorkflow(workflowId);
   if (!stored) {
@@ -397,9 +395,27 @@ export const uploadWorkflowFromFiles = async (
       }),
     });
   } catch (error) {
-    await archiveWorkflowAfterFailedIngest(created.id, actor);
-    throw error;
+    const message =
+      error instanceof Error ? error.message : "Upload failed. Please try again.";
+    const uploadError = saveWorkflowUploadError(created.id, message);
+    const stored = await ensureWorkflow(created.id);
+    invalidateWorkflowListCache();
+    if (stored) {
+      const failedWorkflow = {
+        ...stored,
+        uploadError,
+      };
+      primeWorkflowCache(failedWorkflow);
+      emitUpdate();
+      throw new WorkflowUploadFailedError(message, failedWorkflow);
+    }
+    emitUpdate();
+    throw new WorkflowUploadFailedError(message, {
+      ...toStoredWorkflow(created, []),
+      uploadError,
+    });
   }
+  clearWorkflowUploadError(created.id);
 
   const stored = await ensureWorkflow(created.id);
   if (!stored) {
@@ -420,17 +436,28 @@ export const updateWorkflowFromFiles = async (
 ): Promise<StoredWorkflow> => {
   const actor = resolveActor(options?.actor);
 
-  await request(`${API_BASE}/${workflowId}/versions/ingest`, {
-    method: "POST",
-    body: JSON.stringify({
-      script,
-      entrypoint: null,
-      runnable_config: config ?? null,
-      metadata: { source: "studio-update" },
-      notes: null,
-      created_by: actor,
-    }),
-  });
+  try {
+    await request(`${API_BASE}/${workflowId}/versions/ingest`, {
+      method: "POST",
+      body: JSON.stringify({
+        script,
+        entrypoint: null,
+        runnable_config: config ?? null,
+        metadata: { source: "studio-update" },
+        notes: null,
+        created_by: actor,
+      }),
+    });
+  } catch (error) {
+    const message =
+      error instanceof Error ? error.message : "Update failed. Please try again.";
+    saveWorkflowUploadError(workflowId, message);
+    invalidateWorkflowListCache();
+    invalidateWorkflowCache(workflowId);
+    emitUpdate();
+    throw error;
+  }
+  clearWorkflowUploadError(workflowId);
 
   const stored = await ensureWorkflow(workflowId);
   if (!stored) {

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

@@ -17,6 +17,7 @@ export interface ApiWorkflow {
   id: string;
   handle?: string | null;
   team_id?: string | null;
+  team_slug?: string | null;
   name: string;
   slug: string;
   description: string | null;
@@ -31,10 +32,16 @@ export interface ApiWorkflow {
   updated_at: string;
   share_url?: string | null;
   chatkit?: WorkflowChatKitConfig | null;
+  upload_error?: ApiWorkflowUploadError | null;
   latest_version?: ApiWorkflowVersion | null;
   is_scheduled?: boolean;
 }
 
+export interface ApiWorkflowUploadError {
+  message: string;
+  occurred_at: string;
+}
+
 export interface ChatKitStartScreenPrompt {
   label: string;
   prompt: string;
@@ -262,6 +269,10 @@ export interface WorkflowVersionRecord {
 export interface StoredWorkflow extends Workflow {
   versions: WorkflowVersionRecord[];
   teamId?: string | null;
+  uploadError?: {
+    message: string;
+    occurredAt: string;
+  };
   draftAccess?: "personal" | "authenticated" | "workspace";
   isArchived?: boolean;
   isPublic?: boolean;

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

@@ -0,0 +1,81 @@
+import type { StoredWorkflow } from "./workflow-storage.types";
+
+export interface WorkflowUploadError {
+  message: string;
+  occurredAt: string;
+}
+
+const STORAGE_PREFIX = "orcheo.workflowUploadError.";
+
+const storageKey = (workflowId: string): string => `${STORAGE_PREFIX}${workflowId}`;
+
+const canUseSessionStorage = (): boolean =>
+  typeof window !== "undefined" && Boolean(window.sessionStorage);
+
+export const saveWorkflowUploadError = (
+  workflowId: string,
+  message: string,
+): WorkflowUploadError => {
+  const error = {
+    message,
+    occurredAt: new Date().toISOString(),
+  };
+
+  if (!canUseSessionStorage()) {
+    return error;
+  }
+
+  try {
+    window.sessionStorage.setItem(storageKey(workflowId), JSON.stringify(error));
+  } catch {
+    // Upload failure rendering should not depend on storage availability.
+  }
+
+  return error;
+};
+
+export const readWorkflowUploadError = (
+  workflowId: string,
+): WorkflowUploadError | undefined => {
+  if (!canUseSessionStorage()) {
+    return undefined;
+  }
+
+  try {
+    const raw = window.sessionStorage.getItem(storageKey(workflowId));
+    if (!raw) {
+      return undefined;
+    }
+    const parsed = JSON.parse(raw) as Partial<WorkflowUploadError>;
+    if (
+      typeof parsed.message === "string" &&
+      parsed.message.trim().length > 0 &&
+      typeof parsed.occurredAt === "string"
+    ) {
+      return {
+        message: parsed.message,
+        occurredAt: parsed.occurredAt,
+      };
+    }
+  } catch {
+    return undefined;
+  }
+
+  return undefined;
+};
+
+export const clearWorkflowUploadError = (workflowId: string): void => {
+  if (!canUseSessionStorage()) {
+    return;
+  }
+
+  try {
+    window.sessionStorage.removeItem(storageKey(workflowId));
+  } catch {
+    // Ignore storage errors; the next successful version is authoritative.
+  }
+};
+
+export const getWorkflowUploadError = (
+  workflow: Pick<StoredWorkflow, "versions" | "uploadError">,
+): WorkflowUploadError | undefined => workflow.uploadError;

package/src/features/workflow/pages/workflow/components/workflow-config-sheet.tsx

@@ -44,12 +44,28 @@ const baseWorkflowConfigSchema: RJSFSchema = {
   },
 };
 
-const workflowConfigUiSchema: UiSchema = {
-  configurable: {
-    fields: {
-      "ui:field": "jsonObject",
+const buildWorkflowConfigUiSchema = (
+  configurableSchemas?: Record<string, RJSFSchema>,
+): UiSchema => {
+  // Opt any key declared with `"format": "cron"` into the visual cron widget.
+  const cronEntries: UiSchema = {};
+  for (const [key, schema] of Object.entries(configurableSchemas ?? {})) {
+    if (schema?.format === "cron") {
+      cronEntries[key] = { "ui:widget": "cron" };
+    }
+  }
+
+  return {
+    configurable: {
+      // Render configurable fields in the order declared by config.json,
+      // with any data-only keys appended afterwards via the "*" wildcard.
+      "ui:order": [...Object.keys(configurableSchemas ?? {}), "*"],
+      fields: {
+        "ui:field": "jsonObject",
+      },
+      ...cronEntries,
     },
-  },
+  };
 };
 
 interface WorkflowConfigSheetProps {
@@ -91,6 +107,11 @@ export function WorkflowConfigSheet({
     };
   }, [formData.configurable, configurableSchemas]);
 
+  const workflowConfigUiSchema = useMemo<UiSchema>(
+    () => buildWorkflowConfigUiSchema(configurableSchemas),
+    [configurableSchemas],
+  );
+
   useEffect(() => {
     if (open) {
       setFormData(toFormData(initialConfig));

package/src/features/workflow/pages/workflow/components/workflow-layout.tsx

@@ -88,7 +88,10 @@ export function WorkflowLayout({
             forceMount
             className="m-0 flex min-h-0 flex-1 flex-col overflow-hidden p-0 data-[state=inactive]:hidden"
           >
-            <WorkflowTabContent {...workflowProps} />
+            <WorkflowTabContent
+              {...workflowProps}
+              isActive={tabsProps.activeTab === "workflow"}
+            />
           </TabsContent>
 
           <TabsContent

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

@@ -1,13 +1,15 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useUploadsAllowed } from "@/hooks/use-uploads-allowed";
 import {
   AlertTriangle,
+  CheckCircle2,
   Copy,
   ExternalLink,
   LoaderCircle,
   Play,
   RefreshCw,
   UserMinus,
+  XCircle,
 } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { Controls, ReactFlow, type Node, type NodeProps } from "@xyflow/react";
@@ -56,16 +58,27 @@ import {
 } from "@features/workflow/lib/mermaid-renderer";
 import { resolveWorkflowVersionMermaidSource } from "@features/workflow/lib/workflow-storage-helpers";
 import { WorkflowConfigSheet } from "@features/workflow/pages/workflow/components/workflow-config-sheet";
+import type { WorkflowExecutionStatus } from "@features/workflow/pages/workflow/helpers/types";
+
+const RUN_RESULT_BANNER_TIMEOUT_MS = 6000;
 
 export interface WorkflowTabContentProps {
   workflowId: string | null;
   workflowRouteRef?: string | null;
   workflowName: string;
+  workflowHandle?: string | null;
+  workflowTeamSlug?: string | null;
   versions: WorkflowVersionRecord[];
+  uploadError?: {
+    message: string;
+    occurredAt: string;
+  } | null;
   isLoading: boolean;
   loadError: string | null;
   isRunPending: boolean;
   isRunning: boolean;
+  isActive?: boolean;
+  lastRunStatus?: WorkflowExecutionStatus | null;
   onRunWorkflow: () => Promise<void>;
   onSaveConfig: (nextConfig: WorkflowRunnableConfig | null) => Promise<void>;
   hasCronTriggerNode: boolean;
@@ -189,14 +202,85 @@ const getErrorMessage = (error: unknown, fallback: string): string => {
   return rawMessage;
 };
 
+const formatWorkflowHandle = (
+  handle?: string | null,
+  teamSlug?: string | null,
+): string | null => {
+  const trimmedHandle = handle?.trim().replace(/^@+/, "");
+  if (!trimmedHandle) {
+    return null;
+  }
+
+  if (trimmedHandle.includes("/")) {
+    return `@${trimmedHandle}`;
+  }
+
+  const trimmedTeamSlug = teamSlug
+    ?.trim()
+    .replace(/^@+/, "")
+    .replace(/\/+$/, "");
+
+  return trimmedTeamSlug
+    ? `@${trimmedTeamSlug}/${trimmedHandle}`
+    : `@${trimmedHandle}`;
+};
+
+interface RunResultBanner {
+  Icon: typeof CheckCircle2;
+  className: string;
+  message: string;
+}
+
+const resolveRunResultBanner = (
+  status: WorkflowExecutionStatus,
+): RunResultBanner => {
+  switch (status) {
+    case "success":
+      return {
+        Icon: CheckCircle2,
+        className:
+          "border-emerald-500/40 bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300",
+        message: "Workflow run succeeded. See the full trace on the Trace tab.",
+      };
+    case "failed":
+      return {
+        Icon: XCircle,
+        className: "border-destructive/40 bg-destructive/5 text-destructive",
+        message: "Workflow run failed. Check the Trace tab for details.",
+      };
+    case "partial":
+      return {
+        Icon: AlertTriangle,
+        className:
+          "border-amber-500/40 bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300",
+        message:
+          "Workflow run finished with partial results. Check the Trace tab for details.",
+      };
+    default:
+      // "running" reaching here means the stream ended without a final status.
+      return {
+        Icon: AlertTriangle,
+        className:
+          "border-amber-500/40 bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300",
+        message:
+          "Workflow run ended without a final status. Check the Trace tab for the latest status.",
+      };
+  }
+};
+
 export function WorkflowTabContent({
   workflowId,
   workflowName,
+  workflowHandle,
+  workflowTeamSlug,
   versions,
+  uploadError,
   isLoading,
   loadError,
   isRunPending,
   isRunning,
+  isActive = true,
+  lastRunStatus = null,
   onRunWorkflow,
   onSaveConfig,
   hasCronTriggerNode,
@@ -208,6 +292,8 @@ export function WorkflowTabContent({
   const navigate = useNavigate();
   const uploadsAllowed = useUploadsAllowed();
   const latestVersion = versions.at(-1);
+  const workflowSubtitleLabel =
+    formatWorkflowHandle(workflowHandle, workflowTeamSlug) ?? workflowName;
   const [isConfigOpen, setIsConfigOpen] = useState(false);
   const [isPublished, setIsPublished] = useState(initialIsPublished);
   const [requireLogin, setRequireLogin] = useState(initialRequireLogin);
@@ -223,6 +309,10 @@ export function WorkflowTabContent({
   const [isUpdateDialogOpen, setIsUpdateDialogOpen] = useState(false);
   const [isMissingCredentialsDialogOpen, setIsMissingCredentialsDialogOpen] =
     useState(false);
+  const [visibleRunResultStatus, setVisibleRunResultStatus] =
+    useState<WorkflowExecutionStatus | null>(null);
+  const isRunActive = isRunPending || isRunning;
+  const wasRunActiveRef = useRef(isRunActive);
   const hasMissingCredentials = missingCredentials.length > 0;
   const canDeleteWorkflow = Boolean(workflowId);
 
@@ -348,6 +438,26 @@ export function WorkflowTabContent({
     };
   }, [mermaidCacheKey, mermaidRenderId, mermaidSource]);
 
+  useEffect(() => {
+    const didFinishRun =
+      wasRunActiveRef.current && !isRunActive && Boolean(lastRunStatus);
+    wasRunActiveRef.current = isRunActive;
+
+    if (!isActive || isRunActive || !didFinishRun || !lastRunStatus) {
+      setVisibleRunResultStatus(null);
+      return;
+    }
+
+    setVisibleRunResultStatus(lastRunStatus);
+    const timeoutId = window.setTimeout(() => {
+      setVisibleRunResultStatus(null);
+    }, RUN_RESULT_BANNER_TIMEOUT_MS);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [isActive, isRunActive, lastRunStatus]);
+
   const diagramNodes = useMemo(() => {
     if (!diagramSvg) {
       return [] as Node[];
@@ -390,6 +500,12 @@ export function WorkflowTabContent({
   }
 
   const canConfigure = Boolean(workflowId);
+  const hasUploadError = Boolean(uploadError);
+  const uploadBlocksWorkflow = hasUploadError && !latestVersion;
+  const runResultBanner =
+    !isRunActive && visibleRunResultStatus
+      ? resolveRunResultBanner(visibleRunResultStatus)
+      : null;
   const canRun = Boolean(workflowId && latestVersion);
   const runButtonDisabled = !canRun || isRunPending || isRunning;
   const runButtonLabel = isRunPending || isRunning ? "Running..." : "Run";
@@ -427,6 +543,16 @@ export function WorkflowTabContent({
       return;
     }
 
+    if (uploadBlocksWorkflow) {
+      setIsPublished(false);
+      toast({
+        title: "Fix upload error first",
+        description: "Fix the error and upload again before publishing.",
+        variant: "destructive",
+      });
+      return;
+    }
+
     if (nextValue) {
       setIsPublishDialogOpen(true);
       return;
@@ -500,6 +626,16 @@ export function WorkflowTabContent({
       return;
     }
 
+    if (uploadBlocksWorkflow) {
+      setIsScheduled(false);
+      toast({
+        title: "Fix upload error first",
+        description: "Fix the error and upload again before scheduling.",
+        variant: "destructive",
+      });
+      return;
+    }
+
     setIsSchedulePending(true);
     try {
       if (nextValue) {
@@ -577,7 +713,7 @@ export function WorkflowTabContent({
               {workflowName || "Workflow"}
             </h2>
             <p className="text-sm text-muted-foreground">
-              {workflowName}
+              {workflowSubtitleLabel}
               {latestVersion ? ` · ${latestVersion.version}` : ""}
             </p>
           </div>
@@ -595,7 +731,7 @@ export function WorkflowTabContent({
                       onCheckedChange={(checked) =>
                         void handlePublishToggle(checked)
                       }
-                      disabled={isPublishPending}
+                      disabled={isPublishPending || uploadBlocksWorkflow}
                     />
                   </div>
                 </TooltipTrigger>
@@ -615,7 +751,9 @@ export function WorkflowTabContent({
                 onCheckedChange={(checked) =>
                   void handleScheduleToggle(checked)
                 }
-                disabled={isSchedulePending || !canToggleSchedule}
+                disabled={
+                  isSchedulePending || !canToggleSchedule || uploadBlocksWorkflow
+                }
               />
             </div>
             {workflowId && uploadsAllowed === true ? (
@@ -667,7 +805,7 @@ export function WorkflowTabContent({
           </div>
         </div>
 
-        {(isRunPending || isRunning) && (
+        {isRunActive && (
           <div
             role="status"
             className="rounded-md border border-primary/30 bg-primary/5 px-3 py-2 text-sm text-primary"
@@ -677,6 +815,32 @@ export function WorkflowTabContent({
           </div>
         )}
 
+        {runResultBanner && (
+          <div
+            role="status"
+            className={`flex items-center gap-2 rounded-md border px-3 py-2 text-sm ${runResultBanner.className}`}
+          >
+            <runResultBanner.Icon className="h-4 w-4 shrink-0" />
+            <span>{runResultBanner.message}</span>
+          </div>
+        )}
+
+        {uploadError && (
+          <Alert variant="destructive">
+            <XCircle className="h-4 w-4" />
+            <AlertTitle>Workflow upload failed</AlertTitle>
+            <AlertDescription>
+              <div className="space-y-2">
+                <p>{uploadError.message}</p>
+                <p>
+                  Fix the error in the workflow script or config, then upload
+                  again.
+                </p>
+              </div>
+            </AlertDescription>
+          </Alert>
+        )}
+
         {isPublished && shareUrl && (
           <div className="flex items-center justify-between rounded-md border border-border/60 bg-muted/20 px-3 py-2">
             <div className="min-w-0">

package/src/features/workflow/pages/workflow/hooks/controller/build-layout-props.ts

@@ -75,15 +75,23 @@ export function buildWorkflowLayoutProps(
   resources: WorkflowResources,
   execution: WorkflowExecutionController,
 ): WorkflowLayoutProps {
+  const activeExecution = core.execution.executions.find(
+    (execution) => execution.id === core.execution.activeExecutionId,
+  );
+
   const workflowProps: WorkflowTabContentProps = {
     workflowId: core.metadata.currentWorkflowId,
     workflowRouteRef: core.routeWorkflowRef,
     workflowName: core.metadata.workflowName,
+    workflowHandle: core.metadata.workflowHandle,
+    workflowTeamSlug: core.metadata.workflowTeamSlug,
     versions: core.metadata.workflowVersions ?? [],
+    uploadError: core.metadata.workflowUploadError,
     isLoading: core.metadata.isWorkflowLoading,
     loadError: core.metadata.workflowLoadError,
     isRunPending: execution.isRunPending,
     isRunning: core.execution.isRunning,
+    lastRunStatus: activeExecution?.status ?? null,
     onRunWorkflow: execution.handleRunPersistedWorkflow,
     onSaveConfig: resources.saver.handleSaveWorkflowConfig,
     hasCronTriggerNode: hasSchedulableCronTrigger(

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

@@ -13,8 +13,11 @@ export function useWorkflowLifecycle(
     setCurrentWorkflowId: core.metadata.setCurrentWorkflowId,
     setWorkflowName: core.metadata.setWorkflowName,
     setWorkflowDescription: core.metadata.setWorkflowDescription,
+    setWorkflowHandle: core.metadata.setWorkflowHandle,
+    setWorkflowTeamSlug: core.metadata.setWorkflowTeamSlug,
     setWorkflowTags: core.metadata.setWorkflowTags,
     setWorkflowVersions: core.metadata.setWorkflowVersions,
+    setWorkflowUploadError: core.metadata.setWorkflowUploadError,
     setChatkitStartScreenPrompts: core.metadata.setChatkitStartScreenPrompts,
     setChatkitSupportedModels: core.metadata.setChatkitSupportedModels,
     setIsWorkflowPublic: core.metadata.setIsWorkflowPublic,
@@ -30,7 +33,10 @@ export function useWorkflowLifecycle(
     currentWorkflowId: core.metadata.currentWorkflowId,
     setWorkflowName: core.metadata.setWorkflowName,
     setWorkflowDescription: core.metadata.setWorkflowDescription,
+    setWorkflowHandle: core.metadata.setWorkflowHandle,
+    setWorkflowTeamSlug: core.metadata.setWorkflowTeamSlug,
     setWorkflowVersions: core.metadata.setWorkflowVersions,
+    setWorkflowUploadError: core.metadata.setWorkflowUploadError,
     setWorkflowTags: core.metadata.setWorkflowTags,
     setChatkitStartScreenPrompts: core.metadata.setChatkitStartScreenPrompts,
     setChatkitSupportedModels: core.metadata.setChatkitSupportedModels,

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

@@ -40,6 +40,8 @@ export function useWorkflowResources(
   const saver = useWorkflowSaver({
     setWorkflowName: core.metadata.setWorkflowName,
     setWorkflowDescription: core.metadata.setWorkflowDescription,
+    setWorkflowHandle: core.metadata.setWorkflowHandle,
+    setWorkflowTeamSlug: core.metadata.setWorkflowTeamSlug,
     setWorkflowVersions: core.metadata.setWorkflowVersions,
     setWorkflowTags: core.metadata.setWorkflowTags,
     workflowName: core.metadata.workflowName,

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

@@ -43,7 +43,7 @@ export function collectRuntimeUpdates(
       return;
     }
 
-    const resultsCandidate = value["results"];
+    const resultsCandidate = value["node_results"];
     let candidatePayload: unknown;
 
     if (isRecord(resultsCandidate)) {