orcheo-canvas 0.0.1

package/src/features/workflow/components/panels/node-inspector/input-panel.tsx

@@ -0,0 +1,199 @@
+import { useCallback } from "react";
+import type { DragEvent as ReactDragEvent } from "react";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/design-system/ui/tabs";
+import { Badge } from "@/design-system/ui/badge";
+import { Code, FileJson, GripVertical, Table } from "lucide-react";
+import { LiveDataUnavailable } from "./live-data-unavailable";
+import { writeSchemaFieldDragData } from "../schema-dnd";
+import type { SchemaField } from "./types";
+
+interface InputPanelProps {
+  inputViewMode: string;
+  onInputViewModeChange: (value: string) => void;
+  useLiveData: boolean;
+  hasRuntime: boolean;
+  hasLiveInputs: boolean;
+  liveInputs: unknown;
+  hasUpstreamConnections: boolean;
+  upstreamInputs: Record<string, unknown>;
+  schemaFields: SchemaField[];
+}
+
+export function InputPanel({
+  inputViewMode,
+  onInputViewModeChange,
+  useLiveData,
+  hasRuntime,
+  hasLiveInputs,
+  liveInputs,
+  hasUpstreamConnections,
+  upstreamInputs,
+  schemaFields,
+}: InputPanelProps) {
+  const handleDragStart = useCallback(
+    (event: ReactDragEvent<HTMLDivElement>, field: SchemaField) => {
+      writeSchemaFieldDragData(event.dataTransfer, field);
+    },
+    [],
+  );
+
+  const handleDragEnd = useCallback(() => {
+    // Placeholder for future drag end logic (e.g., analytics or visual feedback).
+  }, []);
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="border-b border-border">
+        <Tabs
+          defaultValue={inputViewMode}
+          onValueChange={onInputViewModeChange}
+        >
+          <TabsList className="w-full justify-start h-10 rounded-none bg-transparent p-0">
+            <TabsTrigger
+              value="input-json"
+              className="rounded-none data-[state=active]:bg-muted"
+            >
+              <FileJson className="h-4 w-4 mr-2" />
+              JSON
+            </TabsTrigger>
+            <TabsTrigger
+              value="input-table"
+              className="rounded-none data-[state=active]:bg-muted"
+            >
+              <Table className="h-4 w-4 mr-2" />
+              Table
+            </TabsTrigger>
+            <TabsTrigger
+              value="input-schema"
+              className="rounded-none data-[state=active]:bg-muted"
+            >
+              <Code className="h-4 w-4 mr-2" />
+              Schema
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="input-json" className="p-0 m-0">
+            <div className="flex-1 p-4 bg-muted/30">
+              {useLiveData ? (
+                hasLiveInputs ? (
+                  <pre className="font-mono text-sm whitespace-pre overflow-auto rounded-md bg-muted p-4 h-full">
+                    {JSON.stringify(liveInputs, null, 2)}
+                  </pre>
+                ) : (
+                  <LiveDataUnavailable
+                    label="Live Input"
+                    hasRuntime={hasRuntime}
+                  />
+                )
+              ) : hasUpstreamConnections ? (
+                Object.keys(upstreamInputs).length > 0 ? (
+                  <pre className="font-mono text-sm whitespace-pre overflow-auto rounded-md bg-muted p-4 h-full">
+                    {JSON.stringify(upstreamInputs, null, 2)}
+                  </pre>
+                ) : (
+                  <div className="flex items-center justify-center h-full">
+                    <div className="text-center">
+                      <Badge variant="outline" className="mb-2">
+                        No Outputs
+                      </Badge>
+                      <p className="text-sm text-muted-foreground">
+                        Connected nodes have not produced outputs yet.
+                        <br />
+                        Run the workflow to see input data.
+                      </p>
+                    </div>
+                  </div>
+                )
+              ) : (
+                <div className="flex items-center justify-center h-full">
+                  <div className="text-center">
+                    <Badge variant="outline" className="mb-2">
+                      No Connections
+                    </Badge>
+                    <p className="text-sm text-muted-foreground">
+                      This node has no incoming connections.
+                      <br />
+                      Connect nodes to see their outputs here.
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </TabsContent>
+
+          <TabsContent value="input-table" className="p-0 m-0">
+            <div className="flex-1 p-4 bg-muted/30">
+              <div className="font-mono text-sm overflow-auto rounded-md bg-muted p-4 h-full">
+                <p>Table view not implemented</p>
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="input-schema" className="p-0 m-0">
+            <div className="flex-1 p-4 bg-muted/30">
+              <div className="font-mono text-sm overflow-auto rounded-md bg-muted p-4 h-full">
+                {hasUpstreamConnections ? (
+                  schemaFields.length > 0 ? (
+                    <div className="space-y-2">
+                      {schemaFields.map((field) => (
+                        <div
+                          key={field.path}
+                          className="flex items-center justify-between p-2 bg-background rounded border border-border hover:border-primary/50 cursor-grab"
+                          draggable
+                          onDragStart={(event) => handleDragStart(event, field)}
+                          onDragEnd={handleDragEnd}
+                        >
+                          <div className="flex items-center gap-2">
+                            <GripVertical className="h-4 w-4 text-muted-foreground" />
+                            <span className="font-medium">{field.name}</span>
+                            <Badge variant="outline" className="text-xs">
+                              {field.type}
+                            </Badge>
+                          </div>
+                          <div className="text-xs text-muted-foreground">
+                            {field.path}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="flex items-center justify-center h-full">
+                      <div className="text-center">
+                        <Badge variant="outline" className="mb-2">
+                          No Schema
+                        </Badge>
+                        <p className="text-sm text-muted-foreground">
+                          Connected nodes have not produced outputs yet.
+                          <br />
+                          Run the workflow to see the schema.
+                        </p>
+                      </div>
+                    </div>
+                  )
+                ) : (
+                  <div className="flex items-center justify-center h-full">
+                    <div className="text-center">
+                      <Badge variant="outline" className="mb-2">
+                        No Connections
+                      </Badge>
+                      <p className="text-sm text-muted-foreground">
+                        This node has no incoming connections.
+                        <br />
+                        Connect nodes to see their output schema here.
+                      </p>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+}

package/src/features/workflow/components/panels/node-inspector/live-data-unavailable.tsx

@@ -0,0 +1,26 @@
+import { Badge } from "@/design-system/ui/badge";
+
+interface LiveDataUnavailableProps {
+  label: string;
+  hasRuntime: boolean;
+}
+
+export function LiveDataUnavailable({
+  label,
+  hasRuntime,
+}: LiveDataUnavailableProps) {
+  return (
+    <div className="flex items-center justify-center h-full">
+      <div className="text-center">
+        <Badge variant="outline" className="mb-2">
+          {label}
+        </Badge>
+        <p className="text-sm text-muted-foreground">
+          {hasRuntime
+            ? "No live data captured for this node yet."
+            : "Run the workflow to capture live data."}
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/features/workflow/components/panels/node-inspector/node-inspector-layout.tsx

@@ -0,0 +1,251 @@
+import type { Dispatch, SetStateAction } from "react";
+import Split from "react-split";
+import { Button } from "@/design-system/ui/button";
+import { X, FileDown, Play, Save, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { InputPanel } from "./input-panel";
+import { ConfigPanel } from "./config-panel";
+import { OutputPanel } from "./output-panel";
+import type { OnMount } from "@monaco-editor/react";
+import type {
+  NodeInspectorProps,
+  NodeRuntimeCacheEntry,
+  SchemaField,
+} from "./types";
+
+const splitGutterStyle = () => ({
+  backgroundColor: "hsl(var(--border))",
+  width: "4px",
+  margin: "0 2px",
+  cursor: "col-resize",
+  "&:hover": {
+    backgroundColor: "hsl(var(--primary))",
+  },
+  "&:active": {
+    backgroundColor: "hsl(var(--primary))",
+  },
+});
+
+const splitBaseProps = {
+  minSize: 150,
+  gutterSize: 10,
+  gutterAlign: "center" as const,
+  snapOffset: 30,
+  dragInterval: 1,
+  direction: "horizontal" as const,
+  cursor: "col-resize" as const,
+  className: "flex h-full",
+  gutterStyle: splitGutterStyle,
+};
+
+interface NodeInspectorLayoutProps {
+  node: NonNullable<NodeInspectorProps["node"]>;
+  className?: string;
+  nodeLabel: string;
+  formattedSemanticType: string | null;
+  onClose?: () => void;
+  inputViewMode: string;
+  onInputViewModeChange: (value: string) => void;
+  useLiveData: boolean;
+  hasRuntime: boolean;
+  hasLiveInputs: boolean;
+  liveInputs: unknown;
+  hasUpstreamConnections: boolean;
+  upstreamOutputs: Record<string, unknown>;
+  schemaFields: SchemaField[];
+  backendType: string | null;
+  isPythonNode: boolean;
+  draftData: Record<string, unknown>;
+  setDraftData: Dispatch<SetStateAction<Record<string, unknown>>>;
+  pythonCode: string;
+  onPythonCodeChange: (code: string) => void;
+  onEditorMount: OnMount;
+  outputViewMode: string;
+  onOutputViewModeChange: (value: string) => void;
+  onToggleLiveData: (value: boolean) => void;
+  runtime: NodeRuntimeCacheEntry | null;
+  formattedUpdatedAt: string | null;
+  testResult: unknown;
+  testError: string | null;
+  hasLiveOutputs: boolean;
+  outputDisplay: unknown;
+  onTestNode: () => Promise<void>;
+  isTestingNode: boolean;
+  onSave: () => void;
+}
+
+export function NodeInspectorLayout({
+  node,
+  className,
+  nodeLabel,
+  formattedSemanticType,
+  onClose,
+  inputViewMode,
+  onInputViewModeChange,
+  useLiveData,
+  hasRuntime,
+  hasLiveInputs,
+  liveInputs,
+  hasUpstreamConnections,
+  upstreamOutputs,
+  schemaFields,
+  backendType,
+  isPythonNode,
+  draftData,
+  setDraftData,
+  pythonCode,
+  onPythonCodeChange,
+  onEditorMount,
+  outputViewMode,
+  onOutputViewModeChange,
+  onToggleLiveData,
+  runtime,
+  formattedUpdatedAt,
+  testResult,
+  testError,
+  hasLiveOutputs,
+  outputDisplay,
+  onTestNode,
+  isTestingNode,
+  onSave,
+}: NodeInspectorLayoutProps) {
+  return (
+    <>
+      <div
+        className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50"
+        onClick={onClose}
+      />
+      <div
+        className={cn(
+          "flex flex-col border border-border rounded-lg bg-background shadow-lg",
+          "fixed top-[5vh] left-[5vw] w-[90vw] h-[90vh] z-50",
+          className,
+        )}
+        tabIndex={0}
+      >
+        <div className="flex items-center justify-between p-4 border-b border-border">
+          <div className="flex items-center gap-3">
+            <div className="flex flex-col">
+              <h3 className="font-medium">{nodeLabel}</h3>
+              <p className="text-xs text-muted-foreground">ID: {node.id}</p>
+              {formattedSemanticType && (
+                <p className="text-xs text-muted-foreground">
+                  Node type: {formattedSemanticType}
+                </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>
+
+        <div className="flex-1 flex flex-col overflow-hidden">
+          <div className="flex-1 overflow-hidden">
+            <Split {...splitBaseProps} sizes={[33, 67]}>
+              <div className="h-full overflow-hidden flex flex-col">
+                <div className="p-2 bg-muted/20 border-b border-border flex-shrink-0">
+                  <h3 className="text-sm font-medium">Input</h3>
+                </div>
+                <div className="flex-1 overflow-auto">
+                  <InputPanel
+                    inputViewMode={inputViewMode}
+                    onInputViewModeChange={onInputViewModeChange}
+                    useLiveData={useLiveData}
+                    hasRuntime={hasRuntime}
+                    hasLiveInputs={hasLiveInputs}
+                    liveInputs={liveInputs}
+                    hasUpstreamConnections={hasUpstreamConnections}
+                    upstreamInputs={
+                      hasUpstreamConnections ? upstreamOutputs : {}
+                    }
+                    schemaFields={schemaFields}
+                  />
+                </div>
+              </div>
+
+              <Split {...splitBaseProps} sizes={[50, 50]}>
+                <div className="h-full overflow-hidden flex flex-col">
+                  <div className="p-2 bg-muted/20 border-b border-border flex-shrink-0">
+                    <h3 className="text-sm font-medium">Configuration</h3>
+                  </div>
+                  <div className="flex-1 overflow-auto">
+                    <ConfigPanel
+                      backendType={backendType}
+                      isPythonNode={isPythonNode}
+                      draftData={draftData}
+                      setDraftData={setDraftData}
+                      node={node}
+                      pythonCode={pythonCode}
+                      onPythonCodeChange={onPythonCodeChange}
+                      onEditorMount={onEditorMount}
+                    />
+                  </div>
+                </div>
+
+                <div className="h-full overflow-hidden flex flex-col">
+                  <div className="p-2 bg-muted/20 border-b border-border flex-shrink-0">
+                    <h3 className="text-sm font-medium">Output</h3>
+                  </div>
+                  <div className="flex-1 overflow-auto">
+                    <OutputPanel
+                      outputViewMode={outputViewMode}
+                      onOutputViewModeChange={onOutputViewModeChange}
+                      useLiveData={useLiveData}
+                      onToggleLiveData={onToggleLiveData}
+                      runtime={runtime}
+                      formattedUpdatedAt={formattedUpdatedAt}
+                      testResult={testResult}
+                      testError={testError}
+                      hasRuntime={hasRuntime}
+                      hasLiveOutputs={hasLiveOutputs}
+                      outputDisplay={outputDisplay}
+                    />
+                  </div>
+                </div>
+              </Split>
+            </Split>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between p-4 border-t border-border">
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onTestNode}
+              disabled={isTestingNode}
+            >
+              {isTestingNode ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Testing...
+                </>
+              ) : (
+                <>
+                  <Play className="h-4 w-4 mr-2" />
+                  Test Node
+                </>
+              )}
+            </Button>
+            <Button variant="outline" size="sm">
+              <FileDown className="h-4 w-4 mr-2" />
+              Export
+            </Button>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button size="sm" onClick={onSave}>
+              <Save className="h-4 w-4 mr-2" />
+              Save
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/features/workflow/components/panels/node-inspector/output-panel.tsx

@@ -0,0 +1,165 @@
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/design-system/ui/tabs";
+import { Badge } from "@/design-system/ui/badge";
+import { Button } from "@/design-system/ui/button";
+import { Label } from "@/design-system/ui/label";
+import { Switch } from "@/design-system/ui/switch";
+import { Code, FileJson, RefreshCw, Table } from "lucide-react";
+import { LiveDataUnavailable } from "./live-data-unavailable";
+import type { NodeRuntimeCacheEntry } from "./types";
+
+interface OutputPanelProps {
+  outputViewMode: string;
+  onOutputViewModeChange: (value: string) => void;
+  useLiveData: boolean;
+  onToggleLiveData: (value: boolean) => void;
+  runtime: NodeRuntimeCacheEntry | null;
+  formattedUpdatedAt: string | null;
+  testResult: unknown;
+  testError: string | null;
+  hasRuntime: boolean;
+  hasLiveOutputs: boolean;
+  outputDisplay: unknown;
+}
+
+export function OutputPanel({
+  outputViewMode,
+  onOutputViewModeChange,
+  useLiveData,
+  onToggleLiveData,
+  runtime,
+  formattedUpdatedAt,
+  testResult,
+  testError,
+  hasRuntime,
+  hasLiveOutputs,
+  outputDisplay,
+}: OutputPanelProps) {
+  return (
+    <div className="flex h-full flex-col">
+      <div className="border-b border-border">
+        <div className="flex items-center justify-between">
+          <Tabs
+            defaultValue={outputViewMode}
+            onValueChange={onOutputViewModeChange}
+          >
+            <TabsList className="w-full justify-start h-10 rounded-none bg-transparent p-0">
+              <TabsTrigger
+                value="output-json"
+                className="rounded-none data-[state=active]:bg-muted"
+              >
+                <FileJson className="h-4 w-4 mr-2" />
+                JSON
+              </TabsTrigger>
+              <TabsTrigger
+                value="output-table"
+                className="rounded-none data-[state=active]:bg-muted"
+              >
+                <Table className="h-4 w-4 mr-2" />
+                Table
+              </TabsTrigger>
+              <TabsTrigger
+                value="output-schema"
+                className="rounded-none data-[state=active]:bg-muted"
+              >
+                <Code className="h-4 w-4 mr-2" />
+                Schema
+              </TabsTrigger>
+            </TabsList>
+
+            <div className="flex items-center gap-2 pr-2">
+              <div className="flex items-center space-x-2 mr-2">
+                <Switch
+                  id="live-data"
+                  checked={useLiveData}
+                  onCheckedChange={onToggleLiveData}
+                  disabled={!runtime}
+                />
+
+                <Label htmlFor="live-data" className="text-xs">
+                  Live data
+                </Label>
+              </div>
+              <Button variant="ghost" size="icon" className="h-8 w-8">
+                <RefreshCw className="h-4 w-4" />
+              </Button>
+              {formattedUpdatedAt && runtime && (
+                <span className="text-[10px] text-muted-foreground">
+                  Updated {formattedUpdatedAt}
+                </span>
+              )}
+            </div>
+          </Tabs>
+        </div>
+      </div>
+
+      <Tabs defaultValue={outputViewMode}>
+        <TabsContent value="output-json" className="p-0 m-0 h-full">
+          <div className="flex-1 p-4 bg-muted/30 relative h-full">
+            {testResult !== null ? (
+              <div className="h-full">
+                <div className="mb-2 flex items-center gap-2">
+                  <Badge variant="secondary">Test Result</Badge>
+                </div>
+                <pre className="font-mono text-sm whitespace-pre overflow-auto rounded-md bg-muted p-4">
+                  {JSON.stringify(testResult, null, 2)}
+                </pre>
+              </div>
+            ) : testError !== null ? (
+              <div className="h-full">
+                <div className="mb-2 flex items-center gap-2">
+                  <Badge variant="destructive">Test Error</Badge>
+                </div>
+                <pre className="font-mono text-sm whitespace-pre overflow-auto rounded-md bg-destructive/10 p-4 text-destructive">
+                  {testError}
+                </pre>
+              </div>
+            ) : useLiveData ? (
+              hasLiveOutputs && outputDisplay !== undefined ? (
+                <pre className="font-mono text-sm whitespace-pre overflow-auto rounded-md bg-muted p-4 h-full">
+                  {JSON.stringify(outputDisplay, null, 2)}
+                </pre>
+              ) : (
+                <LiveDataUnavailable
+                  label="Live Output"
+                  hasRuntime={hasRuntime}
+                />
+              )
+            ) : (
+              <div className="flex items-center justify-center h-full">
+                <div className="text-center">
+                  <Badge variant="outline" className="mb-2">
+                    Sample Data
+                  </Badge>
+                  <p className="text-sm text-muted-foreground">
+                    Click "Test Node" to execute this node in isolation
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        </TabsContent>
+
+        <TabsContent value="output-table" className="p-0 m-0 h-full">
+          <div className="flex-1 p-4 bg-muted/30 relative h-full">
+            <div className="font-mono text-sm overflow-auto rounded-md bg-muted p-4 h-full">
+              <p>Table view not implemented</p>
+            </div>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="output-schema" className="p-0 m-0 h-full">
+          <div className="flex-1 p-4 bg-muted/30 relative h-full">
+            <div className="font-mono text-sm overflow-auto rounded-md bg-muted p-4 h-full">
+              <p>Schema view not implemented</p>
+            </div>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

package/src/features/workflow/components/panels/node-inspector/schema-fields.ts

@@ -0,0 +1,39 @@
+import type { SchemaField } from "./types";
+
+export function buildSchemaFields(
+  upstreamOutputs: Record<string, unknown> | undefined,
+): SchemaField[] {
+  const fields: SchemaField[] = [];
+
+  if (!upstreamOutputs) {
+    return fields;
+  }
+
+  const processValue = (value: unknown, name: string, path: string): void => {
+    const valueType = Array.isArray(value)
+      ? "array"
+      : value === null
+        ? "null"
+        : typeof value;
+
+    fields.push({
+      name,
+      type: valueType,
+      path,
+    });
+
+    if (valueType === "object" && value !== null) {
+      for (const [key, childValue] of Object.entries(
+        value as Record<string, unknown>,
+      )) {
+        processValue(childValue, key, `${path}.${key}`);
+      }
+    }
+  };
+
+  for (const [nodeId, output] of Object.entries(upstreamOutputs)) {
+    processValue(output, nodeId, nodeId);
+  }
+
+  return fields;
+}