orcheo-studio 0.21.1

package/src/features/workflow/components/panels/rjsf-text-widgets.tsx

@@ -0,0 +1,139 @@
+/* eslint-disable react-refresh/only-export-components */
+/**
+ * Text-based widgets (input + textarea) with schema drag-and-drop support.
+ */
+
+import React from "react";
+import { RegistryWidgetsType, WidgetProps, getUiOptions } from "@rjsf/utils";
+import { Input } from "@/design-system/ui/input";
+import { Textarea } from "@/design-system/ui/textarea";
+import {
+  hasSchemaFieldData,
+  insertSchemaFieldReference,
+  readSchemaFieldDragData,
+} from "./schema-dnd";
+
+const useSchemaFieldDnd = <
+  Element extends HTMLInputElement | HTMLTextAreaElement,
+>(
+  disabled: boolean | undefined,
+  readonly: boolean | undefined,
+  onChange: (value: string) => void,
+) => {
+  const handleDragOver = React.useCallback(
+    (event: React.DragEvent<Element>) => {
+      if (disabled || readonly) {
+        return;
+      }
+      if (hasSchemaFieldData(event.dataTransfer)) {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "copy";
+      }
+    },
+    [disabled, readonly],
+  );
+
+  const handleDrop = React.useCallback(
+    (event: React.DragEvent<Element>) => {
+      if (disabled || readonly) {
+        return;
+      }
+
+      const payload = readSchemaFieldDragData(event.dataTransfer);
+      if (!payload?.path) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      const target = event.target as Element;
+      const { value: nextValue, selectionStart } = insertSchemaFieldReference(
+        target,
+        payload.path,
+      );
+
+      target.value = nextValue;
+      target.focus();
+      const restoreSelection = () =>
+        target.setSelectionRange(selectionStart, selectionStart);
+      if (typeof window !== "undefined" && window.requestAnimationFrame) {
+        window.requestAnimationFrame(restoreSelection);
+      } else {
+        restoreSelection();
+      }
+
+      onChange(nextValue);
+    },
+    [disabled, onChange, readonly],
+  );
+
+  return { handleDragOver, handleDrop };
+};
+
+/**
+ * Custom Text Input Widget
+ */
+function TextWidget(props: WidgetProps) {
+  const { id, value, onChange, required, disabled, readonly, placeholder } =
+    props;
+  const { handleDragOver, handleDrop } = useSchemaFieldDnd<HTMLInputElement>(
+    disabled,
+    readonly,
+    onChange,
+  );
+
+  return (
+    <Input
+      id={id}
+      type="text"
+      value={value || ""}
+      onChange={(e) => onChange(e.target.value)}
+      required={required}
+      disabled={disabled}
+      readOnly={readonly}
+      placeholder={placeholder}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    />
+  );
+}
+
+/**
+ * Custom Textarea Widget
+ */
+function TextareaWidget(props: WidgetProps) {
+  const { id, value, onChange, required, disabled, readonly, placeholder } =
+    props;
+  const uiOptions = getUiOptions(props.uiSchema || {});
+  const rows = (uiOptions.rows as number) || 3;
+  const { handleDragOver, handleDrop } = useSchemaFieldDnd<HTMLTextAreaElement>(
+    disabled,
+    readonly,
+    onChange,
+  );
+
+  return (
+    <Textarea
+      id={id}
+      value={value || ""}
+      onChange={(e) => onChange(e.target.value)}
+      required={required}
+      disabled={disabled}
+      readOnly={readonly}
+      placeholder={placeholder}
+      rows={rows}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    />
+  );
+}
+
+type TextWidgetMap = Pick<RegistryWidgetsType, "TextWidget" | "TextareaWidget">;
+
+export const textWidgets: TextWidgetMap = {
+  TextWidget,
+  TextareaWidget,
+};
+
+export { TextWidget, TextareaWidget };

package/src/features/workflow/components/panels/rjsf-theme.tsx

@@ -0,0 +1,10 @@
+import { RegistryWidgetsType } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
+import { basicWidgets } from "./rjsf-basic-widgets";
+import { customTemplates } from "./rjsf-templates";
+
+export const customWidgets = {
+  ...basicWidgets,
+} satisfies RegistryWidgetsType;
+
+export { customTemplates, validator };

package/src/features/workflow/components/panels/schema-dnd.ts

@@ -0,0 +1,79 @@
+export const SCHEMA_FIELD_DRAG_TYPE = "application/x.orcheo.schema-field";
+
+export type SchemaFieldDragPayload = {
+  path: string;
+  name?: string;
+  type?: string;
+  description?: string;
+};
+
+export function writeSchemaFieldDragData(
+  dataTransfer: DataTransfer,
+  field: SchemaFieldDragPayload,
+): void {
+  dataTransfer.effectAllowed = "copy";
+  dataTransfer.setData(SCHEMA_FIELD_DRAG_TYPE, JSON.stringify(field));
+  dataTransfer.setData("text/plain", field.path);
+}
+
+export function hasSchemaFieldData(dataTransfer: DataTransfer | null): boolean {
+  if (!dataTransfer) {
+    return false;
+  }
+
+  const types = Array.from(dataTransfer.types ?? []);
+  if (types.includes(SCHEMA_FIELD_DRAG_TYPE)) {
+    return true;
+  }
+  if (types.includes("text/plain")) {
+    const preview = dataTransfer.getData("text/plain");
+    return preview.trim().length > 0;
+  }
+  return false;
+}
+
+export function readSchemaFieldDragData(
+  dataTransfer: DataTransfer | null,
+): SchemaFieldDragPayload | null {
+  if (!dataTransfer) {
+    return null;
+  }
+
+  const rawPayload = dataTransfer.getData(SCHEMA_FIELD_DRAG_TYPE);
+  if (rawPayload) {
+    try {
+      const parsed = JSON.parse(rawPayload) as SchemaFieldDragPayload;
+      if (parsed && typeof parsed.path === "string" && parsed.path.length > 0) {
+        return parsed;
+      }
+    } catch (error) {
+      console.warn("Failed to parse schema field payload", error);
+    }
+  }
+
+  const fallbackPath = dataTransfer.getData("text/plain");
+  if (fallbackPath && fallbackPath.trim().length > 0) {
+    return { path: fallbackPath.trim() };
+  }
+
+  return null;
+}
+
+export function insertSchemaFieldReference(
+  target: HTMLInputElement | HTMLTextAreaElement,
+  path: string,
+): { value: string; selectionStart: number } {
+  const moustache = `{{ ${path} }}`;
+  const currentValue = target.value ?? "";
+  const selectionStart = target.selectionStart ?? currentValue.length;
+  const selectionEnd = target.selectionEnd ?? selectionStart;
+
+  const value =
+    currentValue.slice(0, selectionStart) +
+    moustache +
+    currentValue.slice(selectionEnd);
+
+  const caretPosition = selectionStart + moustache.length;
+
+  return { value, selectionStart: caretPosition };
+}

package/src/features/workflow/components/panels/workflow-diff-dialog.tsx

@@ -0,0 +1,207 @@
+import React from "react";
+import { FileDown, GitBranch } from "lucide-react";
+
+import { Badge } from "@/design-system/ui/badge";
+import { Button } from "@/design-system/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/design-system/ui/dialog";
+import type { WorkflowDiffResult } from "@features/workflow/lib/workflow-diff";
+import type { WorkflowVersionRecord } from "@features/workflow/lib/workflow-storage";
+
+export interface WorkflowDiffContext {
+  base: WorkflowVersionRecord;
+  target: WorkflowVersionRecord;
+  result: WorkflowDiffResult;
+}
+
+interface WorkflowDiffDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  diffContext: WorkflowDiffContext | null;
+  selectedVersionRecord: WorkflowVersionRecord | null;
+  compareVersionRecord: WorkflowVersionRecord | null;
+}
+
+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",
+};
+
+const formatValue = (value: unknown) =>
+  typeof value === "string" ||
+  typeof value === "number" ||
+  typeof value === "boolean"
+    ? value.toString()
+    : JSON.stringify(value, null, 2);
+
+const DiffSummary = ({
+  diffContext,
+}: {
+  diffContext: WorkflowDiffContext | null;
+}) => {
+  const summary = diffContext?.result.summary ?? {
+    added: 0,
+    removed: 0,
+    modified: 0,
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <Badge className={summaryBadgeClass.added}>Added {summary.added}</Badge>
+      <Badge className={summaryBadgeClass.removed}>
+        Removed {summary.removed}
+      </Badge>
+      <Badge className={summaryBadgeClass.modified}>
+        Modified {summary.modified}
+      </Badge>
+    </div>
+  );
+};
+
+const Differences = ({
+  diffContext,
+}: {
+  diffContext: WorkflowDiffContext | null;
+}) => {
+  if (!diffContext || diffContext.result.entries.length === 0) {
+    return (
+      <div className="text-sm text-muted-foreground">
+        No differences detected between the selected versions.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {diffContext.result.entries.map((entry) => {
+        const badgeClass =
+          entry.type === "added"
+            ? summaryBadgeClass.added
+            : entry.type === "removed"
+              ? summaryBadgeClass.removed
+              : summaryBadgeClass.modified;
+
+        return (
+          <div key={entry.id} className="border rounded-md overflow-hidden">
+            <div className="bg-muted p-2 border-b border-border flex items-center justify-between">
+              <div>
+                <span className="font-medium">{entry.name}</span>
+                <span className="ml-2 text-xs uppercase text-muted-foreground">
+                  {entry.entity}
+                </span>
+              </div>
+              <Badge className={badgeClass}>{entry.type}</Badge>
+            </div>
+            <div className="p-3 space-y-2 text-sm">
+              {entry.detail && (
+                <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">
+                  - {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">
+                  + {formatValue(entry.after)}
+                </pre>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default function WorkflowDiffDialog({
+  open,
+  onOpenChange,
+  diffContext,
+  selectedVersionRecord,
+  compareVersionRecord,
+}: WorkflowDiffDialogProps) {
+  const handleExport = () => {
+    if (!diffContext) {
+      return;
+    }
+
+    const payload = {
+      baseVersion: diffContext.base.version,
+      targetVersion: diffContext.target.version,
+      summary: diffContext.result.summary,
+      entries: diffContext.result.entries,
+    };
+    const serialized = JSON.stringify(payload, null, 2);
+    const blob = new Blob([serialized], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = `workflow-diff-${diffContext.base.version}-vs-${diffContext.target.version}.json`;
+    anchor.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl">
+        <DialogHeader>
+          <DialogTitle>Compare Versions</DialogTitle>
+          <DialogDescription>
+            {diffContext
+              ? `Comparing ${diffContext.base.version} with ${diffContext.target.version}`
+              : "Select two versions to compare."}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <GitBranch className="h-4 w-4" />
+
+              <span className="font-medium">
+                {diffContext?.base.version ??
+                  selectedVersionRecord?.version ??
+                  "Select a version"}
+              </span>
+              <span className="text-muted-foreground">→</span>
+              <GitBranch className="h-4 w-4" />
+
+              <span className="font-medium">
+                {diffContext?.target.version ??
+                  compareVersionRecord?.version ??
+                  "Select a version"}
+              </span>
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleExport}
+              disabled={!diffContext}
+            >
+              <FileDown className="h-4 w-4 mr-2" />
+              Export Diff
+            </Button>
+          </div>
+
+          <div className="border rounded-md overflow-hidden">
+            <div className="bg-muted p-2 border-b border-border flex items-center justify-between">
+              <div className="text-sm font-medium">Changes</div>
+              <DiffSummary diffContext={diffContext} />
+            </div>
+
+            <div className="p-4 bg-muted/20">
+              <Differences diffContext={diffContext} />
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/features/workflow/components/panels/workflow-history-filters.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { Search } from "lucide-react";
+
+import { Input } from "@/design-system/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/design-system/ui/select";
+import type { WorkflowVersionRecord } from "@features/workflow/lib/workflow-storage";
+
+interface WorkflowHistoryFiltersProps {
+  searchQuery: string;
+  onSearchChange: (value: string) => void;
+  compareVersionId: string | null;
+  onSelectCompareVersion: (value: string | null) => void;
+  versions: WorkflowVersionRecord[];
+  selectedVersionId: string | null;
+}
+
+export default function WorkflowHistoryFilters({
+  searchQuery,
+  onSearchChange,
+  compareVersionId,
+  onSelectCompareVersion,
+  versions,
+  selectedVersionId,
+}: WorkflowHistoryFiltersProps) {
+  return (
+    <div className="flex items-center gap-2 p-4 border-b border-border">
+      <div className="relative flex-1">
+        <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+
+        <Input
+          placeholder="Search versions..."
+          className="pl-8"
+          value={searchQuery}
+          onChange={(event) => onSearchChange(event.target.value)}
+        />
+      </div>
+      <Select
+        value={compareVersionId ?? ""}
+        onValueChange={(value) => onSelectCompareVersion(value || null)}
+      >
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="Compare with..." />
+        </SelectTrigger>
+        <SelectContent>
+          {versions
+            .filter((version) => version.id !== selectedVersionId)
+            .map((version) => (
+              <SelectItem key={version.id} value={version.id}>
+                {version.version}
+              </SelectItem>
+            ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

package/src/features/workflow/components/panels/workflow-history-footer.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "@/design-system/ui/button";
+
+interface WorkflowHistoryFooterProps {
+  totalVersions: number;
+}
+
+export default function WorkflowHistoryFooter({
+  totalVersions,
+}: WorkflowHistoryFooterProps) {
+  return (
+    <div className="flex items-center justify-between p-4 border-t border-border">
+      <div className="text-sm text-muted-foreground">
+        {totalVersions} versions
+      </div>
+      <div className="flex items-center gap-1">
+        <Button variant="outline" size="icon" className="h-8 w-8">
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+        <Button variant="outline" size="icon" className="h-8 w-8">
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/features/workflow/components/panels/workflow-history-header.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { History, RotateCcw } from "lucide-react";
+
+import { Button } from "@/design-system/ui/button";
+
+interface WorkflowHistoryHeaderProps {
+  onRestoreVersion: () => void;
+  onCompareVersions: () => void;
+  canRestore: boolean;
+  canCompare: boolean;
+}
+
+export default function WorkflowHistoryHeader({
+  onRestoreVersion,
+  onCompareVersions,
+  canRestore,
+  canCompare,
+}: WorkflowHistoryHeaderProps) {
+  return (
+    <div className="flex items-center justify-between p-4 border-b border-border">
+      <div className="flex items-center gap-2">
+        <History className="h-5 w-5" />
+
+        <h3 className="font-medium">Version History</h3>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onRestoreVersion}
+          disabled={!canRestore}
+        >
+          <RotateCcw className="h-4 w-4 mr-2" />
+          Restore
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onCompareVersions}
+          disabled={!canCompare}
+        >
+          Compare
+        </Button>
+      </div>
+    </div>
+  );
+}