From e1cab5aa8c7983ff5f531e6d212590af9bb4167f Mon Sep 17 00:00:00 2001
From: Camiel van Schoonhoven <camiel.vanschoonhoven@shopify.com>
Date: Tue, 24 Mar 2026 10:31:28 -0700
Subject: [PATCH] feat: Add Visualization to Output Nodes

---
 .../FormFields/FormFields.tsx                 | 37 +++----------------
 .../OutputNameEditor/OutputNameEditor.tsx     | 10 ++---
 .../ReactFlow/FlowCanvas/IONode/IONode.tsx    |  5 +--
 3 files changed, 12 insertions(+), 40 deletions(-)

diff --git a/src/components/Editor/IOEditor/InputValueEditor/FormFields/FormFields.tsx b/src/components/Editor/IOEditor/InputValueEditor/FormFields/FormFields.tsx
index 20835f0dd..c6bcb0935 100644
--- a/src/components/Editor/IOEditor/InputValueEditor/FormFields/FormFields.tsx
+++ b/src/components/Editor/IOEditor/InputValueEditor/FormFields/FormFields.tsx
@@ -1,18 +1,16 @@
 import type { icons } from "lucide-react";
 import { Activity, type ReactNode } from "react";
 
-import type { ArtifactDataResponse } from "@/api/types.gen";
-import { CopyText } from "@/components/shared/CopyText/CopyText";
+import type { ArtifactNodeResponse } from "@/api/types.gen";
+import IOCell from "@/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCell";
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
 import { Input } from "@/components/ui/input";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
-import { Link } from "@/components/ui/link";
 import { Textarea } from "@/components/ui/textarea";
 import { Paragraph } from "@/components/ui/typography";
 import { cn } from "@/lib/utils";
 import type { InputSpec, OutputSpec } from "@/utils/componentSpec";
-import { convertArtifactUriToHTTPUrl } from "@/utils/URL";
 
 type FormFieldAction = {
   icon: keyof typeof icons;
@@ -204,38 +202,13 @@ const TypeField = ({
 
 const ArtifactField = ({
   io,
-  artifactData,
+  artifact,
 }: {
   io: InputSpec | OutputSpec;
-  artifactData: ArtifactDataResponse;
+  artifact: ArtifactNodeResponse;
 }) => (
   <FormField label="Artifact" id={`artifact-${io.name}`}>
-    <BlockStack gap="3" className="p-2 border rounded-md bg-background">
-      {artifactData.value && (
-        <InlineStack gap="2">
-          <Paragraph size="xs">Value:</Paragraph>
-          <CopyText size="sm" className="font-light font-mono">
-            {artifactData.value}
-          </CopyText>
-        </InlineStack>
-      )}
-
-      {artifactData.uri && (
-        <InlineStack gap="2" wrap="nowrap" blockAlign="start">
-          <Paragraph size="xs">URI:</Paragraph>
-          <Link
-            external
-            href={convertArtifactUriToHTTPUrl(
-              artifactData.uri,
-              artifactData.is_dir,
-            )}
-            className="text-xs whitespace-pre-wrap break-all"
-          >
-            {artifactData.uri}
-          </Link>
-        </InlineStack>
-      )}
-    </BlockStack>
+    <IOCell artifact={artifact} name={io.name} type={io.type?.toString()} />
   </FormField>
 );
 
diff --git a/src/components/Editor/IOEditor/OutputNameEditor/OutputNameEditor.tsx b/src/components/Editor/IOEditor/OutputNameEditor/OutputNameEditor.tsx
index 23fbcf933..351bf201e 100644
--- a/src/components/Editor/IOEditor/OutputNameEditor/OutputNameEditor.tsx
+++ b/src/components/Editor/IOEditor/OutputNameEditor/OutputNameEditor.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-import type { ArtifactDataResponse } from "@/api/types.gen";
+import type { ArtifactNodeResponse } from "@/api/types.gen";
 import { LinkNodeButton } from "@/components/shared/Buttons/LinkNodeButton";
 import ConfirmationDialog from "@/components/shared/Dialogs/ConfirmationDialog";
 import { removeGraphOutput } from "@/components/shared/ReactFlow/FlowCanvas/utils/removeNode";
@@ -31,14 +31,14 @@ interface OutputNameEditorProps {
   output: OutputSpec;
   disabled?: boolean;
   connectedDetails: OutputConnectedDetails;
-  artifactData?: ArtifactDataResponse | null;
+  artifact?: ArtifactNodeResponse | null;
 }
 
 export const OutputNameEditor = ({
   output,
   disabled,
   connectedDetails,
-  artifactData,
+  artifact,
 }: OutputNameEditorProps) => {
   const { transferSelection } = useNodeSelectionTransfer(outputNameToNodeId);
   const {
@@ -211,8 +211,8 @@ export const OutputNameEditor = ({
         inputName={output.name}
       />
 
-      {disabled && artifactData && (
-        <ArtifactField artifactData={artifactData} io={output} />
+      {disabled && artifact && (
+        <ArtifactField artifact={artifact} io={output} />
       )}
 
       <InlineStack gap="4">
diff --git a/src/components/shared/ReactFlow/FlowCanvas/IONode/IONode.tsx b/src/components/shared/ReactFlow/FlowCanvas/IONode/IONode.tsx
index 2831c1e1b..70a5a25dd 100644
--- a/src/components/shared/ReactFlow/FlowCanvas/IONode/IONode.tsx
+++ b/src/components/shared/ReactFlow/FlowCanvas/IONode/IONode.tsx
@@ -149,8 +149,7 @@ const IONode = ({ id, type, data, selected = false }: IONodeProps) => {
           output.name,
         );
 
-        const artifactData =
-          artifacts?.output_artifacts?.[output.name]?.artifact_data;
+        const artifact = artifacts?.output_artifacts?.[output.name];
 
         setContent(
           <OutputNameEditor
@@ -158,7 +157,7 @@ const IONode = ({ id, type, data, selected = false }: IONodeProps) => {
             connectedDetails={outputConnectedDetails}
             key={output.name}
             disabled={readOnly}
-            artifactData={artifactData}
+            artifact={artifact}
           />,
         );
       }