orcheo-canvas 0.0.1

package/src/features/workflow/components/panels/variable-inspector-tree.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import React from "react";
+import { Button } from "@/design-system/ui/button";
+import { Copy, Eye, EyeOff, ChevronRight, ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { VariablesMap } from "./variable-inspector-types";
+
+interface VariableTreeViewProps {
+  variables: VariablesMap;
+  expandedPaths: string[];
+  hiddenValues: string[];
+  onToggleExpand: (path: string) => void;
+  onToggleHideValue: (path: string) => void;
+  onCopy: (value: unknown) => void;
+}
+
+export function VariableTreeView({
+  variables,
+  expandedPaths,
+  hiddenValues,
+  onToggleExpand,
+  onToggleHideValue,
+  onCopy,
+}: VariableTreeViewProps) {
+  return (
+    <div className="space-y-1">
+      {Object.entries(variables).map(([key, value]) => (
+        <TreeValue
+          key={key}
+          path={key}
+          value={value}
+          expandedPaths={expandedPaths}
+          hiddenValues={hiddenValues}
+          onToggleExpand={onToggleExpand}
+          onToggleHideValue={onToggleHideValue}
+          onCopy={onCopy}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface TreeValueProps {
+  value: unknown;
+  path: string;
+  expandedPaths: string[];
+  hiddenValues: string[];
+  onToggleExpand: (path: string) => void;
+  onToggleHideValue: (path: string) => void;
+  onCopy: (value: unknown) => void;
+  depth?: number;
+}
+
+function TreeValue({
+  value,
+  path,
+  expandedPaths,
+  hiddenValues,
+  onToggleExpand,
+  onToggleHideValue,
+  onCopy,
+  depth = 0,
+}: TreeValueProps) {
+  const isExpanded = expandedPaths.includes(path);
+  const isHidden = hiddenValues.includes(path);
+  const isObject =
+    value !== null && typeof value === "object" && !Array.isArray(value);
+  const isArray = Array.isArray(value);
+  const hasChildren = isObject || isArray;
+  const objectValue = isObject ? (value as VariablesMap) : undefined;
+  const arrayValue = isArray ? (value as unknown[]) : undefined;
+
+  const renderValue = () => {
+    if (isHidden) return "••••••••";
+
+    if (value === null)
+      return <span className="text-muted-foreground">null</span>;
+
+    if (value === undefined)
+      return <span className="text-muted-foreground">undefined</span>;
+
+    if (typeof value === "string") return `"${value}"`;
+    if (typeof value === "number")
+      return <span className="text-blue-500 dark:text-blue-400">{value}</span>;
+
+    if (typeof value === "boolean")
+      return (
+        <span className="text-amber-500 dark:text-amber-400">
+          {String(value)}
+        </span>
+      );
+
+    if (isArray) return `Array(${arrayValue?.length ?? 0})`;
+    if (isObject)
+      return `Object(${objectValue ? Object.keys(objectValue).length : 0})`;
+
+    return String(value);
+  };
+
+  const label = path.split(".").pop();
+
+  return (
+    <div
+      className={cn(
+        "font-mono text-sm",
+        depth > 0 && "ml-4 pl-2 border-l border-border",
+      )}
+    >
+      <div className="flex items-center py-1 hover:bg-muted/50 rounded">
+        {hasChildren ? (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-5 w-5"
+            onClick={() => onToggleExpand(path)}
+          >
+            {isExpanded ? (
+              <ChevronDown className="h-3 w-3" />
+            ) : (
+              <ChevronRight className="h-3 w-3" />
+            )}
+          </Button>
+        ) : (
+          <div className="w-5" />
+        )}
+
+        <div className="flex-1 flex items-center">
+          <span className="font-medium mr-2">{label}:</span>
+          <span className="text-muted-foreground">{renderValue()}</span>
+        </div>
+
+        <div className="flex items-center gap-1">
+          {typeof value === "string" && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-6 w-6"
+              onClick={() => onToggleHideValue(path)}
+            >
+              {isHidden ? (
+                <Eye className="h-3 w-3" />
+              ) : (
+                <EyeOff className="h-3 w-3" />
+              )}
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            onClick={() => onCopy(value)}
+          >
+            <Copy className="h-3 w-3" />
+          </Button>
+        </div>
+      </div>
+
+      {isExpanded && hasChildren && (
+        <div>
+          {isObject &&
+            Object.entries(objectValue ?? {}).map(([key, val]) => (
+              <TreeValue
+                key={`${path}.${key}`}
+                value={val}
+                path={`${path}.${key}`}
+                depth={depth + 1}
+                expandedPaths={expandedPaths}
+                hiddenValues={hiddenValues}
+                onToggleExpand={onToggleExpand}
+                onToggleHideValue={onToggleHideValue}
+                onCopy={onCopy}
+              />
+            ))}
+          {isArray &&
+            (arrayValue ?? []).map((val, idx) => (
+              <TreeValue
+                key={`${path}[${idx}]`}
+                value={val}
+                path={`${path}[${idx}]`}
+                depth={depth + 1}
+                expandedPaths={expandedPaths}
+                hiddenValues={hiddenValues}
+                onToggleExpand={onToggleExpand}
+                onToggleHideValue={onToggleHideValue}
+                onCopy={onCopy}
+              />
+            ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/features/workflow/components/panels/variable-inspector-types.ts

@@ -0,0 +1,3 @@
+export type VariablesMap = Record<string, unknown>;
+
+export type VariableInspectorView = "tree" | "json" | "table";

package/src/features/workflow/components/panels/variable-inspector.tsx

@@ -0,0 +1,189 @@
+import React, { useMemo, useState } from "react";
+import { Button } from "@/design-system/ui/button";
+import { Input } from "@/design-system/ui/input";
+import { ScrollArea } from "@/design-system/ui/scroll-area";
+import { Badge } from "@/design-system/ui/badge";
+import { Search, FileJson, Table, Code, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type {
+  VariableInspectorView,
+  VariablesMap,
+} from "./variable-inspector-types";
+import { VariableTreeView } from "./variable-inspector-tree";
+import { VariableTableView } from "./variable-inspector-table";
+
+interface VariableInspectorProps {
+  variables?: VariablesMap;
+  currentNodeId?: string;
+  onClose?: () => void;
+  className?: string;
+}
+
+export default function VariableInspector({
+  variables = {},
+  currentNodeId,
+  onClose,
+  className,
+}: VariableInspectorProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [expandedPaths, setExpandedPaths] = useState<string[]>([]);
+  const [viewType, setViewType] = useState<VariableInspectorView>("tree");
+  const [hiddenValues, setHiddenValues] = useState<string[]>([]);
+
+  // Filter variables based on search query
+  const filteredVariables = useMemo<VariablesMap>(() => {
+    if (!searchQuery) {
+      return variables;
+    }
+
+    return Object.entries(variables).reduce((acc, [key, value]) => {
+      const matchKey = key.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchValue = JSON.stringify(value)
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase());
+
+      if (matchKey || matchValue) {
+        acc[key] = value;
+      }
+
+      return acc;
+    }, {} as VariablesMap);
+  }, [searchQuery, variables]);
+
+  const toggleExpand = (path: string) => {
+    if (expandedPaths.includes(path)) {
+      setExpandedPaths(expandedPaths.filter((p) => p !== path));
+    } else {
+      setExpandedPaths([...expandedPaths, path]);
+    }
+  };
+
+  const toggleHideValue = (path: string) => {
+    if (hiddenValues.includes(path)) {
+      setHiddenValues(hiddenValues.filter((p) => p !== path));
+    } else {
+      setHiddenValues([...hiddenValues, path]);
+    }
+  };
+
+  const copyToClipboard = (value: unknown) => {
+    navigator.clipboard.writeText(
+      typeof value === "object"
+        ? JSON.stringify(value, null, 2)
+        : String(value),
+    );
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col border border-border rounded-lg bg-background shadow-lg",
+        className,
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between p-3 border-b border-border">
+        <div className="flex items-center gap-3">
+          <div className="flex flex-col">
+            <h3 className="font-medium">Variable Inspector</h3>
+            {currentNodeId && (
+              <p className="text-xs text-muted-foreground">
+                Current node: {currentNodeId}
+              </p>
+            )}
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Search and view type */}
+      <div className="flex items-center gap-2 p-3 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 variables..."
+            className="pl-8"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+        <div className="flex items-center border rounded-md overflow-hidden">
+          <Button
+            variant={viewType === "tree" ? "secondary" : "ghost"}
+            size="sm"
+            className="rounded-none px-3"
+            onClick={() => setViewType("tree")}
+          >
+            <Code className="h-4 w-4 mr-1" />
+            Tree
+          </Button>
+          <Button
+            variant={viewType === "json" ? "secondary" : "ghost"}
+            size="sm"
+            className="rounded-none px-3"
+            onClick={() => setViewType("json")}
+          >
+            <FileJson className="h-4 w-4 mr-1" />
+            JSON
+          </Button>
+          <Button
+            variant={viewType === "table" ? "secondary" : "ghost"}
+            size="sm"
+            className="rounded-none px-3"
+            onClick={() => setViewType("table")}
+          >
+            <Table className="h-4 w-4 mr-1" />
+            Table
+          </Button>
+        </div>
+      </div>
+
+      {/* Variables content */}
+      <ScrollArea className="flex-1 p-3 h-[400px]">
+        {Object.keys(filteredVariables).length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
+            <p>No variables found</p>
+            {searchQuery && (
+              <p className="text-sm">Try adjusting your search query</p>
+            )}
+          </div>
+        ) : viewType === "tree" ? (
+          <VariableTreeView
+            variables={filteredVariables}
+            expandedPaths={expandedPaths}
+            hiddenValues={hiddenValues}
+            onToggleExpand={toggleExpand}
+            onToggleHideValue={toggleHideValue}
+            onCopy={copyToClipboard}
+          />
+        ) : viewType === "json" ? (
+          <pre className="font-mono text-sm whitespace-pre-wrap">
+            {JSON.stringify(filteredVariables, null, 2)}
+          </pre>
+        ) : (
+          <VariableTableView
+            variables={filteredVariables}
+            hiddenValues={hiddenValues}
+            onToggleHideValue={toggleHideValue}
+            onCopy={copyToClipboard}
+          />
+        )}
+      </ScrollArea>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between p-3 border-t border-border">
+        <div className="text-xs text-muted-foreground">
+          {Object.keys(filteredVariables).length} variables
+        </div>
+        <div className="flex items-center gap-2">
+          <Badge variant="outline">Debug Mode</Badge>
+        </div>
+      </div>
+    </div>
+  );
+}

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>
+  );
+}