orcheo-studio 0.21.1

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

@@ -0,0 +1,183 @@
+import "@features/workflow/components/trace/agent-prism/theme/theme.css";
+
+import { RefreshCw } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+
+import { Alert, AlertDescription, AlertTitle } from "@/design-system/ui/alert";
+import { Button } from "@/design-system/ui/button";
+import type { TraceViewerData } from "@features/workflow/components/trace/agent-prism";
+import { TraceViewer } from "@features/workflow/components/trace/agent-prism";
+import { deriveThreadStitchedViewerDataList } from "@features/workflow/pages/workflow/helpers/trace";
+import type { TraceSpanMetadata } from "@features/workflow/pages/workflow/helpers/trace";
+
+export interface TraceTabContentProps {
+  error?: string;
+  viewerData: TraceViewerData[];
+  activeViewer?: TraceViewerData;
+  onRefresh: () => void;
+  isRefreshing: boolean;
+  onSelectTrace?: (traceId: string) => void;
+}
+
+const renderArtifactActions = (span: TraceSpan) => {
+  const metadata = span.metadata as
+    | (TraceSpanMetadata & {
+        artifacts?: Array<{ id: string; downloadUrl?: string }>;
+      })
+    | undefined;
+  const artifacts = metadata?.artifacts ?? [];
+  if (artifacts.length === 0) {
+    return null;
+  }
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {artifacts.map((artifact) => (
+        <Button
+          key={artifact.id}
+          size="sm"
+          variant="outline"
+          onClick={() => {
+            if (artifact.downloadUrl) {
+              window.open(
+                artifact.downloadUrl,
+                "_blank",
+                "noopener,noreferrer",
+              );
+            }
+          }}
+        >
+          Download {artifact.id}
+        </Button>
+      ))}
+    </div>
+  );
+};
+
+export function TraceTabContent({
+  error,
+  viewerData,
+  activeViewer,
+  onRefresh,
+  isRefreshing,
+  onSelectTrace,
+}: TraceTabContentProps) {
+  const [isStitchedTimeline, setIsStitchedTimeline] = useState(false);
+  const canStitchByThread = useMemo(
+    () => viewerData.some((trace) => Boolean(trace.threadId)),
+    [viewerData],
+  );
+
+  useEffect(() => {
+    if (!canStitchByThread && isStitchedTimeline) {
+      setIsStitchedTimeline(false);
+    }
+  }, [canStitchByThread, isStitchedTimeline]);
+
+  const displayedViewerData = useMemo(() => {
+    if (!isStitchedTimeline) {
+      return viewerData;
+    }
+    return deriveThreadStitchedViewerDataList(
+      viewerData,
+      activeViewer?.traceRecord.id,
+    );
+  }, [activeViewer?.traceRecord.id, isStitchedTimeline, viewerData]);
+
+  const displayedActiveTraceId = useMemo(() => {
+    if (!isStitchedTimeline) {
+      return activeViewer?.traceRecord.id;
+    }
+
+    const activeTraceId = activeViewer?.traceRecord.id;
+    if (
+      activeTraceId &&
+      displayedViewerData.some(
+        (trace) => trace.traceRecord.id === activeTraceId,
+      )
+    ) {
+      return activeTraceId;
+    }
+
+    const activeThreadId = activeViewer?.threadId;
+    if (activeThreadId) {
+      const stitchedGroup = displayedViewerData.find(
+        (trace) => trace.threadId === activeThreadId,
+      );
+      if (stitchedGroup) {
+        return stitchedGroup.traceRecord.id;
+      }
+    }
+
+    return displayedViewerData[0]?.traceRecord.id;
+  }, [activeViewer, displayedViewerData, isStitchedTimeline]);
+
+  const hasData = displayedViewerData.length > 0;
+
+  return (
+    <div className="flex h-full w-full min-w-0 flex-col gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <h2 className="text-lg font-semibold">Execution trace</h2>
+          <p className="text-sm text-muted-foreground">
+            Inspect span hierarchy, metrics, and artifacts for the selected run.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            size="sm"
+            variant={isStitchedTimeline ? "default" : "outline"}
+            disabled={!canStitchByThread}
+            onClick={() => {
+              setIsStitchedTimeline((current) => !current);
+            }}
+          >
+            {isStitchedTimeline ? "Stitched: On" : "Stitched: Off"}
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            disabled={isRefreshing}
+            onClick={() => {
+              void onRefresh();
+            }}
+          >
+            <RefreshCw className="mr-2 size-4" />
+            {isRefreshing ? "Refreshing..." : "Refresh"}
+          </Button>
+        </div>
+      </div>
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertTitle>Unable to load trace</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {!hasData && !error && (
+        <div
+          data-testid="trace-empty-state"
+          className="flex flex-1 items-center justify-center rounded-md border border-dashed border-border text-sm text-muted-foreground"
+        >
+          No trace spans recorded yet for this execution.
+        </div>
+      )}
+
+      {hasData && (
+        <div className="min-h-0 w-full min-w-0 flex-1 overflow-hidden rounded-lg border border-border bg-background">
+          <TraceViewer
+            data={displayedViewerData}
+            activeTraceId={displayedActiveTraceId}
+            onTraceSelect={(trace) => {
+              onSelectTrace?.(trace.id);
+            }}
+            detailsViewProps={{
+              headerActions: renderArtifactActions,
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,207 @@
+import { useEffect, useMemo, useState } from "react";
+import type { RJSFSchema, UiSchema } from "@rjsf/utils";
+
+import { Button } from "@/design-system/ui/button";
+import { ScrollArea } from "@/design-system/ui/scroll-area";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/design-system/ui/sheet";
+import { SchemaConfigForm } from "@features/workflow/components/forms/schema-config-form";
+import { JsonObjectField } from "@features/workflow/components/panels/json-object-field";
+import type { WorkflowRunnableConfig } from "@features/workflow/lib/workflow-storage.types";
+import {
+  buildConfigurableSchema,
+  toFormData,
+  toWorkflowConfig,
+} from "@features/workflow/pages/workflow/components/workflow-config-sheet.utils";
+
+const baseWorkflowConfigSchema: RJSFSchema = {
+  type: "object",
+  properties: {
+    configurable: {
+      type: "object",
+      title: "Configurable",
+      additionalProperties: true,
+      default: {},
+    },
+    run_name: {
+      type: "string",
+      title: "Run name",
+    },
+    tags: {
+      type: "array",
+      title: "Tags",
+      items: {
+        type: "string",
+      },
+    },
+    metadata: {
+      type: "object",
+      title: "Metadata",
+      additionalProperties: true,
+      default: {},
+    },
+    callbacks: {
+      type: "array",
+      title: "Callbacks",
+      items: {
+        type: ["object", "array", "string", "number", "integer", "boolean"],
+      },
+    },
+    recursion_limit: {
+      type: "integer",
+      title: "Recursion limit",
+      minimum: 1,
+    },
+    max_concurrency: {
+      type: "integer",
+      title: "Max concurrency",
+      minimum: 1,
+    },
+    prompts: {
+      type: "object",
+      title: "Prompts",
+      additionalProperties: {
+        type: "object",
+        properties: {
+          template: {
+            type: "string",
+            title: "Template",
+          },
+          input_variables: {
+            type: "array",
+            title: "Input variables",
+            items: {
+              type: "string",
+            },
+          },
+          optional_variables: {
+            type: "array",
+            title: "Optional variables",
+            items: {
+              type: "string",
+            },
+          },
+          partial_variables: {
+            type: "object",
+            title: "Partial variables",
+            additionalProperties: true,
+          },
+        },
+        required: ["template", "input_variables"],
+      },
+      default: {},
+    },
+  },
+};
+
+const workflowConfigUiSchema: UiSchema = {
+  configurable: {
+    fields: {
+      "ui:field": "jsonObject",
+    },
+  },
+  run_name: {
+    "ui:placeholder": "Optional run label",
+  },
+  tags: {
+    "ui:options": {
+      orderable: false,
+    },
+  },
+};
+
+interface WorkflowConfigSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  initialConfig: WorkflowRunnableConfig | null;
+  onSave: (nextConfig: WorkflowRunnableConfig | null) => Promise<void>;
+  configurableSchemas?: Record<string, RJSFSchema>;
+}
+
+export function WorkflowConfigSheet({
+  open,
+  onOpenChange,
+  initialConfig,
+  onSave,
+  configurableSchemas,
+}: WorkflowConfigSheetProps) {
+  const [formData, setFormData] = useState<Record<string, unknown>>(
+    toFormData(initialConfig),
+  );
+  const [isSaving, setIsSaving] = useState(false);
+
+  const workflowConfigSchema = useMemo<RJSFSchema>(() => {
+    const configurableSchema =
+      baseWorkflowConfigSchema.properties?.configurable;
+
+    return {
+      ...baseWorkflowConfigSchema,
+      properties: {
+        ...baseWorkflowConfigSchema.properties,
+        configurable: {
+          ...configurableSchema,
+          properties: buildConfigurableSchema(
+            formData.configurable,
+            configurableSchemas,
+          ),
+        },
+      },
+    };
+  }, [formData.configurable, configurableSchemas]);
+
+  useEffect(() => {
+    if (open) {
+      setFormData(toFormData(initialConfig));
+    }
+  }, [initialConfig, open]);
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      await onSave(toWorkflowConfig(formData));
+      onOpenChange(false);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-full p-0 sm:max-w-2xl">
+        <SheetHeader className="border-b px-6 py-4">
+          <SheetTitle>Workflow config</SheetTitle>
+          <SheetDescription>
+            Configure runnable options saved with this workflow version.
+          </SheetDescription>
+        </SheetHeader>
+
+        <ScrollArea className="h-[calc(100vh-9.5rem)]">
+          <div className="p-6">
+            <SchemaConfigForm
+              schema={workflowConfigSchema}
+              uiSchema={workflowConfigUiSchema}
+              formData={formData}
+              onChange={setFormData}
+              fields={{ jsonObject: JsonObjectField }}
+            />
+          </div>
+        </ScrollArea>
+
+        <SheetFooter className="border-t px-6 py-4">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={() => void handleSave()} disabled={isSaving}>
+            {isSaving ? "Saving..." : "Save config"}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/features/workflow/pages/workflow/components/workflow-config-sheet.utils.ts

@@ -0,0 +1,275 @@
+import type { RJSFSchema } from "@rjsf/utils";
+
+import type { WorkflowRunnableConfig } from "@features/workflow/lib/workflow-storage.types";
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+/**
+ * Validates if an unknown value is a valid RJSFSchema object.
+ * @param schema - The value to validate
+ * @returns True if the value is a valid schema object
+ */
+const isValidSchema = (schema: unknown): schema is RJSFSchema => {
+  return (
+    typeof schema === "object" && schema !== null && !Array.isArray(schema)
+  );
+};
+
+const toPositiveInteger = (value: unknown): number | undefined => {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    return undefined;
+  }
+  const integer = Math.floor(value);
+  return integer > 0 ? integer : undefined;
+};
+
+/**
+ * Infers schema for array items, handling both homogeneous and heterogeneous arrays.
+ * @param value - The array to analyze
+ * @returns Schema for array items
+ */
+const inferArrayItemsSchema = (value: unknown[]): RJSFSchema => {
+  if (value.length === 0) {
+    return { type: "string" };
+  }
+
+  const itemSchemas = value.map((item) => inferSchemaFromValue(item));
+  const firstSchema = JSON.stringify(itemSchemas[0]);
+  const hasSingleItemShape = itemSchemas.every(
+    (itemSchema) => JSON.stringify(itemSchema) === firstSchema,
+  );
+
+  if (hasSingleItemShape) {
+    return itemSchemas[0];
+  }
+
+  // For heterogeneous arrays, create a union type of all observed schemas
+  const uniqueSchemas = itemSchemas.filter((schema, index, array) => {
+    const schemaStr = JSON.stringify(schema);
+    return array.findIndex((s) => JSON.stringify(s) === schemaStr) === index;
+  });
+
+  // If we have multiple types, use oneOf for better widget support
+  return uniqueSchemas.length > 1
+    ? { oneOf: uniqueSchemas }
+    : uniqueSchemas[0] || {};
+};
+
+/**
+ * Infers a JSON Schema from a given value.
+ * @param value - The value to analyze
+ * @returns RJSFSchema representing the inferred type and structure
+ */
+export const inferSchemaFromValue = (value: unknown): RJSFSchema => {
+  if (Array.isArray(value)) {
+    return {
+      type: "array",
+      items: inferArrayItemsSchema(value),
+    };
+  }
+
+  if (isRecord(value)) {
+    return {
+      type: "object",
+      properties: Object.fromEntries(
+        Object.entries(value).map(([key, itemValue]) => [
+          key,
+          inferSchemaFromValue(itemValue),
+        ]),
+      ),
+      additionalProperties: true,
+      default: {},
+    };
+  }
+
+  if (typeof value === "string") {
+    return { type: "string" };
+  }
+
+  if (typeof value === "number") {
+    return { type: Number.isInteger(value) ? "integer" : "number" };
+  }
+
+  if (typeof value === "boolean") {
+    return { type: "boolean" };
+  }
+
+  if (value === null) {
+    return { type: "null" };
+  }
+
+  return {};
+};
+
+/**
+ * Merges an inferred schema with a declared schema, prioritizing declared properties.
+ * @param inferredSchema - Schema derived from the actual data
+ * @param declaredSchema - Explicitly declared schema from definitions
+ * @returns Merged schema with declared properties taking precedence
+ */
+const mergeSchemas = (
+  inferredSchema: RJSFSchema,
+  declaredSchema: RJSFSchema,
+): RJSFSchema => {
+  // Declared schema takes priority over inferred schema
+  const merged = { ...inferredSchema, ...declaredSchema };
+
+  // For objects, merge properties recursively
+  if (
+    inferredSchema.type === "object" &&
+    declaredSchema.type === "object" &&
+    inferredSchema.properties &&
+    declaredSchema.properties
+  ) {
+    merged.properties = {
+      ...inferredSchema.properties,
+      ...declaredSchema.properties,
+    };
+  }
+
+  return merged;
+};
+
+/**
+ * Builds a complete schema for configurable properties by combining inferred and declared schemas.
+ * @param configurable - The configurable data object
+ * @param schemaDefinitions - Optional declared schema definitions
+ * @returns Schema properties for the configurable object
+ * @throws Error if schemaDefinitions contains invalid schema objects
+ */
+export const buildConfigurableSchema = (
+  configurable: unknown,
+  schemaDefinitions?: Record<string, RJSFSchema>,
+): RJSFSchema["properties"] => {
+  if (!isRecord(configurable)) {
+    if (!schemaDefinitions) {
+      return {};
+    }
+    return Object.fromEntries(
+      Object.entries(schemaDefinitions).map(([key, schema]) => [key, schema]),
+    );
+  }
+
+  // Validate schema definitions if provided
+  if (schemaDefinitions) {
+    for (const [key, schema] of Object.entries(schemaDefinitions)) {
+      if (!isValidSchema(schema)) {
+        throw new Error(
+          `Invalid schema definition for key "${key}": expected object, got ${typeof schema}`,
+        );
+      }
+    }
+  }
+
+  const keys = new Set([
+    ...Object.keys(configurable),
+    ...Object.keys(schemaDefinitions ?? {}),
+  ]);
+
+  return Object.fromEntries(
+    Array.from(keys).map((key) => {
+      const value = configurable[key];
+      try {
+        const inferredSchema = inferSchemaFromValue(value);
+        const declaredSchema = schemaDefinitions?.[key];
+
+        return [
+          key,
+          declaredSchema
+            ? mergeSchemas(inferredSchema, declaredSchema)
+            : inferredSchema,
+        ];
+      } catch (error) {
+        // If schema inference fails, fall back to a basic string schema
+        console.warn(
+          `Failed to infer schema for key "${key}": ${error instanceof Error ? error.message : String(error)}`,
+        );
+        return [key, { type: "string" }];
+      }
+    }),
+  );
+};
+
+/**
+ * Converts form data to a WorkflowRunnableConfig object.
+ * @param formData - Form data from the UI
+ * @returns Validated workflow configuration or null if empty
+ */
+export const toWorkflowConfig = (
+  formData: Record<string, unknown>,
+): WorkflowRunnableConfig | null => {
+  const next: WorkflowRunnableConfig = {};
+
+  if (
+    isRecord(formData.configurable) &&
+    Object.keys(formData.configurable).length > 0
+  ) {
+    next.configurable = formData.configurable;
+  }
+
+  if (typeof formData.run_name === "string") {
+    const runName = formData.run_name.trim();
+    if (runName.length > 0) {
+      next.run_name = runName;
+    }
+  }
+
+  if (Array.isArray(formData.tags)) {
+    const tags = formData.tags
+      .filter((item): item is string => typeof item === "string")
+      .map((item) => item.trim())
+      .filter(
+        (item, index, array) =>
+          item.length > 0 && array.indexOf(item) === index,
+      );
+    if (tags.length > 0) {
+      next.tags = tags;
+    }
+  }
+
+  if (
+    isRecord(formData.metadata) &&
+    Object.keys(formData.metadata).length > 0
+  ) {
+    next.metadata = formData.metadata;
+  }
+
+  if (Array.isArray(formData.callbacks) && formData.callbacks.length > 0) {
+    next.callbacks = formData.callbacks;
+  }
+
+  const recursionLimit = toPositiveInteger(formData.recursion_limit);
+  if (recursionLimit) {
+    next.recursion_limit = recursionLimit;
+  }
+
+  const maxConcurrency = toPositiveInteger(formData.max_concurrency);
+  if (maxConcurrency) {
+    next.max_concurrency = maxConcurrency;
+  }
+
+  if (isRecord(formData.prompts) && Object.keys(formData.prompts).length > 0) {
+    next.prompts = formData.prompts;
+  }
+
+  return Object.keys(next).length > 0 ? next : null;
+};
+
+/**
+ * Converts a WorkflowRunnableConfig to form data for the UI.
+ * @param config - Workflow configuration object or null
+ * @returns Form data object with default values
+ */
+export const toFormData = (
+  config: WorkflowRunnableConfig | null,
+): Record<string, unknown> => ({
+  configurable: config?.configurable ?? {},
+  run_name: config?.run_name ?? "",
+  tags: config?.tags ?? [],
+  metadata: config?.metadata ?? {},
+  callbacks: config?.callbacks ?? [],
+  recursion_limit: config?.recursion_limit,
+  max_concurrency: config?.max_concurrency,
+  prompts: config?.prompts ?? {},
+});