diff --git a/react-compiler.config.js b/react-compiler.config.js
index d15540781..1062f5da5 100644
--- a/react-compiler.config.js
+++ b/react-compiler.config.js
@@ -59,6 +59,7 @@ export const REACT_COMPILER_ENABLED_DIRS = [
   "src/components/shared/Dialogs/MultilineTextInputDialog.tsx",
   "src/components/shared/HighlightText.tsx",
   "src/components/shared/AnnouncementBanners.tsx",
+  "src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection",
 
   // 11-20 useCallback/useMemo
   // "src/components/ui",                         // 12
diff --git a/src/components/shared/CopyText/CopyText.tsx b/src/components/shared/CopyText/CopyText.tsx
index e43db4ea0..e411ee67a 100644
--- a/src/components/shared/CopyText/CopyText.tsx
+++ b/src/components/shared/CopyText/CopyText.tsx
@@ -9,6 +9,7 @@ import { copyToClipboard } from "@/utils/string";
 
 interface CopyTextProps {
   children: string;
+  displayValue?: string;
   className?: string;
   alwaysShowButton?: boolean;
   compact?: boolean;
@@ -17,6 +18,7 @@ interface CopyTextProps {
 
 export const CopyText = ({
   children,
+  displayValue,
   className,
   alwaysShowButton = false,
   compact = false,
@@ -61,7 +63,7 @@ export const CopyText = ({
             isCopied && "text-emerald-400!",
           )}
         >
-          {children}
+          {displayValue ?? children}
         </Text>
 
         <Button
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/ArtifactURI.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/ArtifactURI.tsx
new file mode 100644
index 000000000..2dc04d77c
--- /dev/null
+++ b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/ArtifactURI.tsx
@@ -0,0 +1,33 @@
+import { CopyText } from "@/components/shared/CopyText/CopyText";
+import { Icon } from "@/components/ui/icon";
+import { InlineStack } from "@/components/ui/layout";
+import { Link } from "@/components/ui/link";
+import { convertArtifactUriToHTTPUrl } from "@/utils/URL";
+
+interface ArtifactURIProps {
+  uri: string;
+  isDir: boolean;
+}
+
+const ArtifactURI = ({ uri, isDir }: ArtifactURIProps) => {
+  return (
+    <InlineStack gap="1" wrap="nowrap" blockAlign="center">
+      <Link href={convertArtifactUriToHTTPUrl(uri, isDir)} external size="xs">
+        Link
+      </Link>
+
+      <Icon name="Dot" size="md" className="text-muted-foreground" />
+
+      <CopyText
+        size="xs"
+        compact
+        displayValue="Copy URI"
+        className="text-sky-500 hover:text-sky-600"
+      >
+        {uri}
+      </CopyText>
+    </InlineStack>
+  );
+};
+
+export default ArtifactURI;
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCell.test.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCell.test.tsx
deleted file mode 100644
index 223cba524..000000000
--- a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCell.test.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import { act, fireEvent, render, screen } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-
-import type { ArtifactDataResponse } from "@/api/types.gen";
-import type { InputSpec } from "@/utils/componentSpec";
-
-import IOCell from "./IOCell";
-
-vi.mock("@/utils/string", () => ({
-  copyToClipboard: vi.fn(),
-}));
-
-const { copyToClipboard } = vi.mocked(await import("@/utils/string"));
-
-vi.mock("./IOCellHeader", () => ({
-  default: ({ copyState, actions, isOpen }: any) => (
-    <div data-testid="io-cell-header">
-      <button onClick={actions.handleCopyName} data-testid="copy-name-btn">
-        Copy Name
-      </button>
-      <button onClick={actions.handleCopyValue} data-testid="copy-value-btn">
-        Copy Value
-      </button>
-      <span data-testid="copy-state">
-        {copyState.isCopied ? `${copyState.copyType} copied` : "Not copied"}
-      </span>
-      <span data-testid="is-open">{isOpen ? "Open" : "Closed"}</span>
-    </div>
-  ),
-}));
-
-vi.mock("./IOCellDetails", () => ({
-  default: () => <div data-testid="io-cell-details">Details</div>,
-}));
-
-vi.mock("@/components/ui/collapsible", () => ({
-  Collapsible: ({ children }: any) => <div>{children}</div>,
-  CollapsibleContent: ({ children }: any) => <div>{children}</div>,
-}));
-
-describe("IOCell", () => {
-  const mockInputSpec: InputSpec = {
-    name: "test-input",
-    type: "String",
-  };
-
-  const mockArtifactData: ArtifactDataResponse = {
-    value: "test-value",
-    uri: "gs://bucket/path",
-    total_size: 1024,
-    is_dir: false,
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("renders IOCell with header", () => {
-    render(<IOCell io={mockInputSpec} artifactData={mockArtifactData} />);
-
-    expect(screen.getByTestId("io-cell-header")).toBeInTheDocument();
-    expect(screen.getByTestId("copy-name-btn")).toBeInTheDocument();
-  });
-
-  it("renders IOCellDetails when artifactData is provided", () => {
-    render(<IOCell io={mockInputSpec} artifactData={mockArtifactData} />);
-
-    expect(screen.getByTestId("io-cell-details")).toBeInTheDocument();
-  });
-
-  it("does not render IOCellDetails when artifactData is null", () => {
-    render(<IOCell io={mockInputSpec} artifactData={null} />);
-
-    expect(screen.queryByTestId("io-cell-details")).not.toBeInTheDocument();
-  });
-
-  it("handles copy name functionality", () => {
-    render(<IOCell io={mockInputSpec} artifactData={mockArtifactData} />);
-
-    fireEvent.click(screen.getByTestId("copy-name-btn"));
-
-    expect(copyToClipboard).toHaveBeenCalledWith("test-input");
-    expect(screen.getByTestId("copy-state")).toHaveTextContent("Name copied");
-  });
-
-  it("handles copy value functionality", () => {
-    render(<IOCell io={mockInputSpec} artifactData={mockArtifactData} />);
-
-    fireEvent.click(screen.getByTestId("copy-value-btn"));
-
-    expect(copyToClipboard).toHaveBeenCalledWith("test-value");
-    expect(screen.getByTestId("copy-state")).toHaveTextContent("Value copied");
-  });
-
-  it("does not copy value when artifactData.value is null", () => {
-    const artifactDataWithoutValue = { ...mockArtifactData, value: null };
-    render(
-      <IOCell io={mockInputSpec} artifactData={artifactDataWithoutValue} />,
-    );
-
-    fireEvent.click(screen.getByTestId("copy-value-btn"));
-
-    expect(copyToClipboard).not.toHaveBeenCalled();
-  });
-
-  it("clears copied state after timeout", async () => {
-    vi.useFakeTimers();
-
-    render(<IOCell io={mockInputSpec} artifactData={mockArtifactData} />);
-
-    fireEvent.click(screen.getByTestId("copy-name-btn"));
-    expect(screen.getByTestId("copy-state")).toHaveTextContent("Name copied");
-
-    await act(async () => {
-      vi.advanceTimersByTime(1500);
-    });
-
-    expect(screen.getByTestId("copy-state")).toHaveTextContent("Not copied");
-
-    vi.useRealTimers();
-  });
-
-  it("starts with collapsible closed", () => {
-    render(<IOCell io={mockInputSpec} artifactData={mockArtifactData} />);
-
-    expect(screen.getByTestId("is-open")).toHaveTextContent("Closed");
-  });
-
-  it("clears timeout on unmount", () => {
-    const clearTimeoutSpy = vi.spyOn(global, "clearTimeout");
-
-    const { unmount } = render(
-      <IOCell io={mockInputSpec} artifactData={mockArtifactData} />,
-    );
-
-    fireEvent.click(screen.getByTestId("copy-name-btn"));
-    unmount();
-
-    expect(clearTimeoutSpy).toHaveBeenCalled();
-  });
-
-  it("manages copy state transitions correctly", () => {
-    render(<IOCell io={mockInputSpec} artifactData={mockArtifactData} />);
-
-    expect(screen.getByTestId("copy-state")).toHaveTextContent("Not copied");
-
-    fireEvent.click(screen.getByTestId("copy-name-btn"));
-    expect(screen.getByTestId("copy-state")).toHaveTextContent("Name copied");
-
-    fireEvent.click(screen.getByTestId("copy-value-btn"));
-    expect(screen.getByTestId("copy-state")).toHaveTextContent("Value copied");
-  });
-
-  it("handles empty artifact data gracefully", () => {
-    const emptyArtifactData = {
-      ...mockArtifactData,
-      value: "",
-      uri: null,
-    };
-
-    render(<IOCell io={mockInputSpec} artifactData={emptyArtifactData} />);
-
-    expect(screen.getByTestId("io-cell-header")).toBeInTheDocument();
-
-    expect(screen.getByTestId("io-cell-details")).toBeInTheDocument();
-
-    fireEvent.click(screen.getByTestId("copy-value-btn"));
-    expect(copyToClipboard).not.toHaveBeenCalled();
-  });
-});
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCell.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCell.tsx
index 64152b1be..a15c330e6 100644
--- a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCell.tsx
+++ b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCell.tsx
@@ -1,116 +1,77 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import type { ArtifactNodeResponse } from "@/api/types.gen";
+import { CopyText } from "@/components/shared/CopyText/CopyText";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Text } from "@/components/ui/typography";
+import { formatBytes } from "@/utils/string";
 
-import type { ArtifactDataResponse } from "@/api/types.gen";
-import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
-import type { InputSpec, OutputSpec } from "@/utils/componentSpec";
-import { copyToClipboard } from "@/utils/string";
-
-import IOCellDetails from "./IOCellDetails";
-import IOCellHeader from "./IOCellHeader";
+import ArtifactURI from "./ArtifactURI";
 
 interface IOCellProps {
-  io: InputSpec | OutputSpec;
-  artifactData: ArtifactDataResponse | null | undefined;
-}
-
-export interface IOCellCopyState {
-  isCopied: boolean;
-  isTooltipOpen: boolean;
-  copyType?: "Name" | "Value";
-}
-
-export interface IOCellActions {
-  handleCopyName: () => void;
-  handleCopyValue: () => void;
-  handleTooltipOpen: (open: boolean) => void;
+  name: string;
+  type?: string;
+  artifact: ArtifactNodeResponse | null | undefined;
 }
 
-const IOCell = ({ io, artifactData }: IOCellProps) => {
-  const [isCopied, setIsCopied] = useState(false);
-  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
-  const [copyType, setCopyType] = useState<"Name" | "Value">();
-  const [isOpen, setIsOpen] = useState(false);
-  const tooltipTimerRef = useRef<NodeJS.Timeout | null>(null);
-
-  const handleTooltipOpen = useCallback((open: boolean) => {
-    // When the tooltip is closed, we need to clear the copied state
-    if (!open) {
-      if (tooltipTimerRef.current) clearTimeout(tooltipTimerRef.current);
-      setIsCopied(false);
-    }
-    setIsTooltipOpen(open);
-  }, []);
-
-  const handleCopy = useCallback((value: string, type: "Name" | "Value") => {
-    copyToClipboard(value);
-    setIsCopied(true);
-    setIsTooltipOpen(true);
-    setCopyType(type);
-
-    // Clear any existing timer
-    if (tooltipTimerRef.current) clearTimeout(tooltipTimerRef.current);
-
-    tooltipTimerRef.current = setTimeout(() => {
-      setIsTooltipOpen(false);
-      setCopyType(undefined);
-      setIsCopied(false);
-    }, 1500);
-  }, []);
+const IOCell = ({ name, type, artifact }: IOCellProps) => {
+  const artifactData = artifact?.artifact_data;
+  const inlineValue = artifactData?.value;
+  const hasInlineValue = canShowInlineValue(inlineValue);
 
-  const handleCopyName = useCallback(() => {
-    handleCopy(io.name, "Name");
-  }, [io.name, handleCopy]);
-
-  const handleCopyValue = useCallback(() => {
-    if (!artifactData?.value) return;
-
-    handleCopy(artifactData.value, "Value");
-  }, [artifactData?.value, handleCopy]);
-
-  useEffect(() => {
-    return () => {
-      if (tooltipTimerRef.current) clearTimeout(tooltipTimerRef.current);
-    };
-  }, []);
-
-  const copyState: IOCellCopyState = {
-    isCopied,
-    isTooltipOpen,
-    copyType,
-  };
-
-  const actions: IOCellActions = {
-    handleCopyName,
-    handleCopyValue,
-    handleTooltipOpen,
-  };
+  const artifactType =
+    type ?? artifact?.type_name ?? (artifactData?.is_dir ? "Directory" : "Any");
 
   return (
-    <Collapsible
-      key={io.name}
-      open={isOpen}
-      onOpenChange={setIsOpen}
-      className="w-full"
-    >
-      <IOCellHeader
-        io={io}
-        artifactData={artifactData}
-        copyState={copyState}
-        actions={actions}
-        isOpen={isOpen}
-      />
+    <BlockStack gap="1" className="w-full p-2 border bg-white rounded-md">
+      <InlineStack
+        gap="2"
+        blockAlign="center"
+        align="space-between"
+        className="w-full"
+      >
+        <CopyText compact size="sm" className="break-all">
+          {name}
+        </CopyText>
+
+        <InlineStack gap="2" blockAlign="center">
+          <Text size="xs" tone="subdued">
+            {artifactType}
+          </Text>
+
+          {!!artifactData?.total_size && (
+            <Text size="xs" tone="subdued" font="mono">
+              ({formatBytes(artifactData.total_size)})
+            </Text>
+          )}
+        </InlineStack>
+      </InlineStack>
+
+      {hasInlineValue && (
+        <CopyText
+          size="xs"
+          compact
+          className="font-mono text-success line-clamp-2 break-all"
+        >
+          {inlineValue}
+        </CopyText>
+      )}
 
-      {artifactData && (
-        <CollapsibleContent>
-          <IOCellDetails
-            io={io}
-            artifactData={artifactData}
-            actions={actions}
-          />
-        </CollapsibleContent>
+      {!!artifactData?.uri && (
+        <ArtifactURI uri={artifactData.uri} isDir={artifactData.is_dir} />
       )}
-    </Collapsible>
+    </BlockStack>
   );
 };
 
 export default IOCell;
+
+const canShowInlineValue = (
+  value: string | null | undefined,
+): value is string => {
+  if (!value) {
+    return false;
+  }
+  if (String(value).trim() !== "") {
+    return true;
+  }
+  return false;
+};
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellDetails.test.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellDetails.test.tsx
deleted file mode 100644
index 0d51f28e3..000000000
--- a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellDetails.test.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-
-import type { ArtifactDataResponse } from "@/api/types.gen";
-import type { InputSpec } from "@/utils/componentSpec";
-
-import type { IOCellActions } from "./IOCell";
-import IOCellDetails from "./IOCellDetails";
-
-vi.mock("./IOCodeViewer", () => ({
-  default: ({ title, value }: any) => (
-    <div data-testid="io-code-viewer" data-title={title} data-value={value}>
-      {value}
-    </div>
-  ),
-}));
-
-describe("IOCellDetails", () => {
-  const mockInputSpec: InputSpec = {
-    name: "test-input",
-    type: "String",
-  };
-
-  const mockArtifactData: ArtifactDataResponse = {
-    value: "test-value",
-    uri: "gs://bucket/path",
-    total_size: 1024,
-    is_dir: false,
-  };
-
-  const mockActions: IOCellActions = {
-    handleCopyName: vi.fn(),
-    handleCopyValue: vi.fn(),
-    handleTooltipOpen: vi.fn(),
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("renders IOCodeViewer when value exists", () => {
-    render(
-      <IOCellDetails
-        io={mockInputSpec}
-        artifactData={mockArtifactData}
-        actions={mockActions}
-      />,
-    );
-
-    const codeViewer = screen.getByTestId("io-code-viewer");
-    expect(codeViewer).toBeInTheDocument();
-    expect(codeViewer).toHaveAttribute("data-title", "test-input");
-    expect(codeViewer).toHaveAttribute("data-value", "test-value");
-  });
-
-  it("calls handleCopyValue when code viewer area is clicked", () => {
-    render(
-      <IOCellDetails
-        io={mockInputSpec}
-        artifactData={mockArtifactData}
-        actions={mockActions}
-      />,
-    );
-
-    const codeViewer = screen.getByTestId("io-code-viewer");
-    fireEvent.click(codeViewer.parentElement!);
-
-    expect(mockActions.handleCopyValue).toHaveBeenCalledTimes(1);
-  });
-
-  it("does not render IOCodeViewer when value is null", () => {
-    const artifactWithoutValue = { ...mockArtifactData, value: null };
-
-    render(
-      <IOCellDetails
-        io={mockInputSpec}
-        artifactData={artifactWithoutValue}
-        actions={mockActions}
-      />,
-    );
-
-    expect(screen.queryByTestId("io-code-viewer")).not.toBeInTheDocument();
-  });
-
-  it("does not render IOCodeViewer when value is empty string", () => {
-    const artifactWithEmptyValue = { ...mockArtifactData, value: "" };
-
-    render(
-      <IOCellDetails
-        io={mockInputSpec}
-        artifactData={artifactWithEmptyValue}
-        actions={mockActions}
-      />,
-    );
-
-    expect(screen.queryByTestId("io-code-viewer")).not.toBeInTheDocument();
-  });
-
-  it("renders URI section when uri exists", () => {
-    render(
-      <IOCellDetails
-        io={mockInputSpec}
-        artifactData={mockArtifactData}
-        actions={mockActions}
-      />,
-    );
-
-    expect(screen.getByText("URI:")).toBeInTheDocument();
-    expect(screen.getByText("gs://bucket/path")).toBeInTheDocument();
-  });
-
-  it("does not render URI section when uri is null", () => {
-    const artifactWithoutUri = { ...mockArtifactData, uri: null };
-
-    render(
-      <IOCellDetails
-        io={mockInputSpec}
-        artifactData={artifactWithoutUri}
-        actions={mockActions}
-      />,
-    );
-
-    expect(screen.queryByText("URI:")).not.toBeInTheDocument();
-  });
-
-  it("does not render URI section when uri is empty string", () => {
-    const artifactWithEmptyUri = { ...mockArtifactData, uri: "" };
-
-    render(
-      <IOCellDetails
-        io={mockInputSpec}
-        artifactData={artifactWithEmptyUri}
-        actions={mockActions}
-      />,
-    );
-
-    expect(screen.queryByText("URI:")).not.toBeInTheDocument();
-  });
-
-  it("renders both sections when both value and URI exist", () => {
-    render(
-      <IOCellDetails
-        io={mockInputSpec}
-        artifactData={mockArtifactData}
-        actions={mockActions}
-      />,
-    );
-
-    expect(screen.getByTestId("io-code-viewer")).toBeInTheDocument();
-    expect(screen.getByText("URI:")).toBeInTheDocument();
-  });
-
-  it("renders only URI when value is null but URI exists", () => {
-    const artifactDataOnlyUri = {
-      ...mockArtifactData,
-      value: null,
-      uri: "gs://bucket/path",
-    };
-
-    render(
-      <IOCellDetails
-        io={mockInputSpec}
-        artifactData={artifactDataOnlyUri}
-        actions={mockActions}
-      />,
-    );
-
-    expect(screen.queryByTestId("io-code-viewer")).not.toBeInTheDocument();
-    expect(screen.getByText("URI:")).toBeInTheDocument();
-  });
-
-  it("renders only value when URI is null but value exists", () => {
-    const artifactDataOnlyValue = {
-      ...mockArtifactData,
-      value: "test-value",
-      uri: null,
-    };
-
-    render(
-      <IOCellDetails
-        io={mockInputSpec}
-        artifactData={artifactDataOnlyValue}
-        actions={mockActions}
-      />,
-    );
-
-    expect(screen.getByTestId("io-code-viewer")).toBeInTheDocument();
-    expect(screen.queryByText("URI:")).not.toBeInTheDocument();
-  });
-});
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellDetails.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellDetails.tsx
deleted file mode 100644
index 1c086526d..000000000
--- a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellDetails.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { ArtifactDataResponse } from "@/api/types.gen";
-import { BlockStack, InlineStack } from "@/components/ui/layout";
-import { Link } from "@/components/ui/link";
-import { Text } from "@/components/ui/typography";
-import type { InputSpec, OutputSpec } from "@/utils/componentSpec";
-import { convertArtifactUriToHTTPUrl } from "@/utils/URL";
-
-import type { IOCellActions } from "./IOCell";
-import IOCodeViewer from "./IOCodeViewer";
-
-interface IOCellDetailsProps {
-  io: InputSpec | OutputSpec;
-  artifactData: ArtifactDataResponse;
-  actions: IOCellActions;
-}
-
-const IOCellDetails = ({ io, artifactData, actions }: IOCellDetailsProps) => {
-  const { handleCopyValue } = actions;
-
-  return (
-    <BlockStack gap="3" className="pb-3 pt-5 border rounded-b-md bg-gray-50">
-      {artifactData.value && (
-        <InlineStack className="px-3 w-full">
-          <span
-            className="flex-1 w-full cursor-copy overflow-hidden"
-            onClick={handleCopyValue}
-          >
-            <IOCodeViewer title={io.name} value={artifactData.value} />
-          </span>
-        </InlineStack>
-      )}
-
-      {artifactData.uri && (
-        <InlineStack className="px-3">
-          <Text size="xs">URI:</Text>
-          <Link
-            external
-            href={convertArtifactUriToHTTPUrl(
-              artifactData.uri,
-              artifactData.is_dir,
-            )}
-            className="text-xs whitespace-pre-wrap break-all"
-          >
-            {artifactData.uri}
-          </Link>
-        </InlineStack>
-      )}
-    </BlockStack>
-  );
-};
-
-export default IOCellDetails;
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellHeader.test.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellHeader.test.tsx
deleted file mode 100644
index 75837cdc1..000000000
--- a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellHeader.test.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-
-import type { ArtifactDataResponse } from "@/api/types.gen";
-import type { InputSpec } from "@/utils/componentSpec";
-
-import type { IOCellActions, IOCellCopyState } from "./IOCell";
-import IOCellHeader from "./IOCellHeader";
-
-vi.mock("@/components/ui/collapsible", () => ({
-  CollapsibleTrigger: ({ children }: any) => <button>{children}</button>,
-}));
-
-describe("IOCellHeader", () => {
-  const mockInputSpec: InputSpec = {
-    name: "test-input",
-    type: "String",
-  };
-
-  const mockArtifactData: ArtifactDataResponse = {
-    value: "short-value",
-    uri: "gs://bucket/path",
-    total_size: 1024,
-    is_dir: false,
-  };
-
-  const mockCopyState: IOCellCopyState = {
-    isCopied: false,
-    isTooltipOpen: false,
-    copyType: undefined,
-  };
-
-  const mockActions: IOCellActions = {
-    handleCopyName: vi.fn(),
-    handleCopyValue: vi.fn(),
-    handleTooltipOpen: vi.fn(),
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("renders the input name", () => {
-    render(
-      <IOCellHeader
-        io={mockInputSpec}
-        artifactData={mockArtifactData}
-        copyState={mockCopyState}
-        actions={mockActions}
-      />,
-    );
-
-    expect(screen.getByText("test-input")).toBeInTheDocument();
-  });
-
-  it("calls handleCopyName when name is clicked", () => {
-    render(
-      <IOCellHeader
-        io={mockInputSpec}
-        artifactData={mockArtifactData}
-        copyState={mockCopyState}
-        actions={mockActions}
-      />,
-    );
-
-    const nameElement = screen.getByText("test-input");
-    fireEvent.click(nameElement);
-    expect(mockActions.handleCopyName).toHaveBeenCalledTimes(1);
-  });
-
-  it("shows artifact metadata when artifactData is provided", () => {
-    const { container } = render(
-      <IOCellHeader
-        io={mockInputSpec}
-        artifactData={mockArtifactData}
-        copyState={mockCopyState}
-        actions={mockActions}
-      />,
-    );
-
-    expect(screen.getByText("Link")).toBeInTheDocument();
-    expect(screen.getByText("short-value")).toBeInTheDocument();
-    expect(container.textContent).toContain("String");
-  });
-
-  it("does not render artifact metadata when artifactData is null", () => {
-    const { container } = render(
-      <IOCellHeader
-        io={mockInputSpec}
-        artifactData={null}
-        copyState={mockCopyState}
-        actions={mockActions}
-      />,
-    );
-
-    expect(screen.queryByText("Link")).not.toBeInTheDocument();
-    expect(screen.queryByText("short-value")).not.toBeInTheDocument();
-    expect(container.textContent).not.toContain("String");
-  });
-
-  it("shows inline value for short strings", () => {
-    render(
-      <IOCellHeader
-        io={mockInputSpec}
-        artifactData={mockArtifactData}
-        copyState={mockCopyState}
-        actions={mockActions}
-      />,
-    );
-
-    expect(screen.getByText("short-value")).toBeInTheDocument();
-  });
-
-  it("does not show inline value for long strings", () => {
-    const longValueData = {
-      ...mockArtifactData,
-      value:
-        "this is a very long string that should not be displayed inline because it exceeds the character limit",
-    };
-
-    render(
-      <IOCellHeader
-        io={mockInputSpec}
-        artifactData={longValueData}
-        copyState={mockCopyState}
-        actions={mockActions}
-      />,
-    );
-
-    expect(screen.queryByText(longValueData.value)).not.toBeInTheDocument();
-  });
-
-  it("shows inline value for integers", () => {
-    const integerInput = { ...mockInputSpec, type: "Integer" as const };
-    const integerData = { ...mockArtifactData, value: "42" };
-
-    render(
-      <IOCellHeader
-        io={integerInput}
-        artifactData={integerData}
-        copyState={mockCopyState}
-        actions={mockActions}
-      />,
-    );
-
-    expect(screen.getByText("42")).toBeInTheDocument();
-  });
-
-  it("shows inline value for booleans", () => {
-    const booleanInput = { ...mockInputSpec, type: "Boolean" as const };
-    const booleanData = { ...mockArtifactData, value: "true" };
-
-    render(
-      <IOCellHeader
-        io={booleanInput}
-        artifactData={booleanData}
-        copyState={mockCopyState}
-        actions={mockActions}
-      />,
-    );
-
-    expect(screen.getByText("true")).toBeInTheDocument();
-  });
-
-  it("does not render URI link when uri is null", () => {
-    const dataWithoutUri = { ...mockArtifactData, uri: null };
-
-    render(
-      <IOCellHeader
-        io={mockInputSpec}
-        artifactData={dataWithoutUri}
-        copyState={mockCopyState}
-        actions={mockActions}
-      />,
-    );
-
-    expect(screen.queryByText("Link")).not.toBeInTheDocument();
-  });
-});
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellHeader.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellHeader.tsx
deleted file mode 100644
index ba0c2cabd..000000000
--- a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellHeader.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import type { ArtifactDataResponse } from "@/api/types.gen";
-import { CollapsibleTrigger } from "@/components/ui/collapsible";
-import { Icon } from "@/components/ui/icon";
-import { BlockStack, InlineStack } from "@/components/ui/layout";
-import { Link } from "@/components/ui/link";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import type {
-  InputSpec,
-  OutputSpec,
-  TypeSpecType,
-} from "@/utils/componentSpec";
-import { formatBytes } from "@/utils/string";
-import { convertArtifactUriToHTTPUrl } from "@/utils/URL";
-
-import type { IOCellActions, IOCellCopyState } from "./IOCell";
-
-interface IOCellHeaderProps {
-  io: InputSpec | OutputSpec;
-  artifactData: ArtifactDataResponse | null | undefined;
-  copyState: IOCellCopyState;
-  actions: IOCellActions;
-  isOpen?: boolean;
-}
-
-const IOCellHeader = ({
-  io,
-  artifactData,
-  copyState,
-  actions,
-  isOpen = false,
-}: IOCellHeaderProps) => {
-  const { isCopied, isTooltipOpen, copyType } = copyState;
-  const { handleCopyName, handleTooltipOpen } = actions;
-
-  const hasCollapsableContent = !canShowInlineValue(
-    artifactData?.value,
-    io.type,
-  );
-
-  const hasArtifactDetails =
-    (!!artifactData?.value && artifactData.value.trim() !== "") ||
-    !!artifactData?.uri;
-
-  return (
-    <BlockStack
-      gap="3"
-      className={cn(
-        "py-3 border bg-white",
-        isOpen && hasCollapsableContent
-          ? "rounded-t-md border-b-0"
-          : "rounded-md",
-      )}
-    >
-      <InlineStack align="space-between" gap="2" className="px-3 w-full">
-        <div className="flex-1 min-w-auto shrink-0">
-          <Tooltip
-            delayDuration={300}
-            open={isTooltipOpen}
-            onOpenChange={handleTooltipOpen}
-          >
-            <TooltipTrigger className="text-left">
-              <span
-                className="font-medium text-sm cursor-copy hover:text-gray-500"
-                onClick={handleCopyName}
-              >
-                {io.name}
-              </span>
-            </TooltipTrigger>
-            <TooltipContent
-              arrowClassName={cn(isCopied && "bg-emerald-200 fill-emerald-200")}
-              className={cn(isCopied && "bg-emerald-200 text-emerald-800")}
-            >
-              {isCopied ? `${copyType} copied` : `Copy`}
-            </TooltipContent>
-          </Tooltip>
-        </div>
-
-        {artifactData && (
-          <InlineStack gap="2">
-            <InlineStack gap="1" className="text-xs text-gray-500">
-              {artifactData.uri && (
-                <>
-                  <Link
-                    href={convertArtifactUriToHTTPUrl(
-                      artifactData.uri || "",
-                      artifactData.is_dir || false,
-                    )}
-                    external
-                    size="xs"
-                  >
-                    Link
-                  </Link>
-                  &bull;
-                </>
-              )}
-
-              {artifactData.value &&
-                canShowInlineValue(artifactData.value, io.type) && (
-                  <>
-                    <span className="font-mono text-[10px] text-amber-500">
-                      {artifactData.value}
-                    </span>
-                    &bull;
-                  </>
-                )}
-
-              <span className="font-mono text-[10px] text-gray-500">
-                {formatBytes(artifactData.total_size)} &bull;
-              </span>
-
-              {io.type?.toString()}
-
-              {hasArtifactDetails && (
-                <CollapsibleTrigger
-                  disabled={!hasCollapsableContent}
-                  className={cn({
-                    hidden: !hasCollapsableContent,
-                  })}
-                >
-                  <Icon name="ChevronsUpDown" className="cursor-pointer" />
-                </CollapsibleTrigger>
-              )}
-            </InlineStack>
-          </InlineStack>
-        )}
-      </InlineStack>
-    </BlockStack>
-  );
-};
-
-export default IOCellHeader;
-
-const canShowInlineValue = (
-  value: string | null | undefined,
-  type: TypeSpecType | undefined,
-) => {
-  if (!type || !value) {
-    return false;
-  }
-  if (type === "Integer" || type === "Boolean") {
-    return true;
-  }
-  if (type === "String" && value.length < 31 && value.trim() !== "") {
-    return true;
-  }
-  return false;
-};
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/index.ts b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/index.ts
deleted file mode 100644
index ccca61d9d..000000000
--- a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./IOCell";
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOExtras.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOExtras.tsx
index 7e2c0902f..e50fabd46 100644
--- a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOExtras.tsx
+++ b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOExtras.tsx
@@ -1,10 +1,9 @@
 import type { GetExecutionArtifactsResponse } from "@/api/types.gen";
-import { BlockStack, InlineStack } from "@/components/ui/layout";
-import { Link } from "@/components/ui/link";
-import { Heading, Paragraph } from "@/components/ui/typography";
+import { BlockStack } from "@/components/ui/layout";
+import { Heading } from "@/components/ui/typography";
 import type { InputSpec, OutputSpec } from "@/utils/componentSpec";
-import { formatBytes } from "@/utils/string";
-import { convertArtifactUriToHTTPUrl } from "@/utils/URL";
+
+import IOCell from "./IOCell/IOCell";
 
 interface IOExtrasProps {
   inputs?: InputSpec[];
@@ -21,162 +20,27 @@ const IOExtras = ({ inputs, outputs, artifacts }: IOExtrasProps) => {
     artifacts.output_artifacts || {},
   ).filter(([key]) => !outputs?.some((output) => output.name === key));
 
-  const hasAdditionalInputs = additionalInputs.length > 0;
-  const hasAdditionalOutputs = additionalOutputs.length > 0;
-
-  if (!hasAdditionalInputs && !hasAdditionalOutputs) {
+  if (!additionalInputs.length && !additionalOutputs.length) {
     return null;
   }
+
   return (
     <>
-      {hasAdditionalInputs && (
+      {additionalInputs.length > 0 && (
         <BlockStack gap="1" className="w-full">
           <Heading level={1}>Additional Input Artifacts</Heading>
-          <div className="border rounded-md divide-y">
-            {additionalInputs.map(([key, artifact]) => (
-              <BlockStack key={key} className="px-3 py-2">
-                <BlockStack align="center">
-                  <Paragraph>{key}</Paragraph>
-                  {artifact.type_name && (
-                    <Paragraph
-                      tone="subdued"
-                      size="xs"
-                      className="ml-1.5 bg-gray-100 px-1 py-0.5 rounded"
-                    >
-                      Type: {artifact.type_name}
-                    </Paragraph>
-                  )}
-                </BlockStack>
-
-                {artifact.artifact_data && (
-                  <BlockStack gap="1">
-                    {artifact.artifact_data.value !== undefined && (
-                      <InlineStack gap="1">
-                        <Paragraph tone="subdued" size="xs" className="w-14">
-                          Value:
-                        </Paragraph>
-                        <Paragraph font="mono">
-                          {JSON.stringify(artifact.artifact_data.value)}
-                        </Paragraph>
-                      </InlineStack>
-                    )}
-
-                    {artifact.artifact_data.uri && (
-                      <InlineStack gap="1">
-                        <Paragraph tone="subdued" size="xs" className="w-14">
-                          URI:
-                        </Paragraph>
-                        <Link
-                          href={convertArtifactUriToHTTPUrl(
-                            artifact.artifact_data.uri,
-                            artifact.artifact_data.is_dir,
-                          )}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          <Paragraph font="mono" size="xs">
-                            {artifact.artifact_data.uri}
-                          </Paragraph>
-                        </Link>
-                      </InlineStack>
-                    )}
-
-                    {artifact.artifact_data.total_size && (
-                      <InlineStack gap="1">
-                        <Paragraph tone="subdued" size="xs" className="w-14">
-                          Size:
-                        </Paragraph>
-                        <Paragraph font="mono" size="xs">
-                          {formatBytes(artifact.artifact_data.total_size)}
-                        </Paragraph>
-                      </InlineStack>
-                    )}
-                  </BlockStack>
-                )}
-              </BlockStack>
-            ))}
-          </div>
+          {additionalInputs.map(([key, artifact]) => (
+            <IOCell key={key} name={key} artifact={artifact} />
+          ))}
         </BlockStack>
       )}
 
-      {hasAdditionalOutputs && (
+      {additionalOutputs.length > 0 && (
         <BlockStack gap="1" className="w-full">
           <Heading level={1}>Additional Output Artifacts</Heading>
-          <div className="border rounded-md divide-y">
-            {additionalOutputs.map(([key, artifact]) => (
-              <BlockStack key={key} className="px-3 py-2">
-                <BlockStack align="center">
-                  <Paragraph>{key}</Paragraph>
-                  {artifact.type_name && (
-                    <Paragraph
-                      tone="subdued"
-                      size="xs"
-                      className="ml-1.5 bg-gray-100 px-1 py-0.5 rounded"
-                    >
-                      Type: {artifact.type_name}
-                    </Paragraph>
-                  )}
-                </BlockStack>
-
-                {artifact.artifact_data && (
-                  <BlockStack gap="1">
-                    {artifact.artifact_data.value !== undefined && (
-                      <InlineStack gap="1">
-                        <Paragraph tone="subdued" size="xs" className="w-14">
-                          Value:
-                        </Paragraph>
-                        <Paragraph font="mono">
-                          {JSON.stringify(artifact.artifact_data.value)}
-                        </Paragraph>
-                      </InlineStack>
-                    )}
-
-                    {artifact.artifact_data.uri && (
-                      <InlineStack gap="1">
-                        <Paragraph tone="subdued" size="xs" className="w-14">
-                          URI:
-                        </Paragraph>
-                        <Link
-                          href={convertArtifactUriToHTTPUrl(
-                            artifact.artifact_data.uri,
-                            artifact.artifact_data.is_dir,
-                          )}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          <Paragraph font="mono" size="xs">
-                            {artifact.artifact_data.uri}
-                          </Paragraph>
-                        </Link>
-                      </InlineStack>
-                    )}
-
-                    {artifact.artifact_data.total_size && (
-                      <InlineStack gap="1">
-                        <Paragraph tone="subdued" size="xs" className="w-14">
-                          Size:
-                        </Paragraph>
-                        <Paragraph font="mono" size="xs">
-                          {formatBytes(artifact.artifact_data.total_size)}
-                        </Paragraph>
-                      </InlineStack>
-                    )}
-
-                    {artifact.artifact_data.is_dir && (
-                      <InlineStack gap="1">
-                        <Paragraph tone="subdued" size="xs" className="w-14">
-                          Type:
-                        </Paragraph>
-                        <Paragraph font="mono" size="xs">
-                          Directory
-                        </Paragraph>
-                      </InlineStack>
-                    )}
-                  </BlockStack>
-                )}
-              </BlockStack>
-            ))}
-          </div>
+          {additionalOutputs.map(([key, artifact]) => (
+            <IOCell key={key} name={key} artifact={artifact} />
+          ))}
         </BlockStack>
       )}
     </>
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOInputs.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOInputs.tsx
index 2d14d938f..a64a6c7f7 100644
--- a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOInputs.tsx
+++ b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOInputs.tsx
@@ -3,7 +3,7 @@ import { BlockStack } from "@/components/ui/layout";
 import { Heading, Paragraph } from "@/components/ui/typography";
 import type { InputSpec } from "@/utils/componentSpec";
 
-import IoCell from "./IOCell";
+import IOCell from "./IOCell/IOCell";
 
 interface IOInputsProps {
   inputs?: InputSpec[];
@@ -25,10 +25,11 @@ const IOInputs = ({ inputs, artifacts }: IOInputsProps) => {
         const inputArtifact = artifacts.input_artifacts?.[input.name];
 
         return (
-          <IoCell
+          <IOCell
             key={input.name}
-            io={input}
-            artifactData={inputArtifact?.artifact_data}
+            name={input.name}
+            type={input.type?.toString()}
+            artifact={inputArtifact}
           />
         );
       })}
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOOutputs.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOOutputs.tsx
index 63dd3376f..0e9ebba79 100644
--- a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOOutputs.tsx
+++ b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOOutputs.tsx
@@ -3,7 +3,7 @@ import { BlockStack } from "@/components/ui/layout";
 import { Heading, Paragraph } from "@/components/ui/typography";
 import type { OutputSpec } from "@/utils/componentSpec";
 
-import IoCell from "./IOCell";
+import IOCell from "./IOCell/IOCell";
 
 interface IOOutputsProps {
   outputs?: OutputSpec[];
@@ -25,10 +25,11 @@ const IOOutputs = ({ outputs, artifacts }: IOOutputsProps) => {
         const outputArtifact = artifacts?.output_artifacts?.[output.name];
 
         return (
-          <IoCell
+          <IOCell
             key={output.name}
-            io={output}
-            artifactData={outputArtifact?.artifact_data}
+            name={output.name}
+            type={output.type?.toString()}
+            artifact={outputArtifact}
           />
         );
       })}