diff --git a/src/components/Editor/Context/PipelineDetails.tsx b/src/components/Editor/Context/PipelineDetails.tsx
new file mode 100644
index 000000000..4436d4d44
--- /dev/null
+++ b/src/components/Editor/Context/PipelineDetails.tsx
@@ -0,0 +1,132 @@
+import { useEffect, useState } from "react";
+
+import { useValidationIssueNavigation } from "@/components/Editor/hooks/useValidationIssueNavigation";
+import { ActionBlock } from "@/components/shared/ContextPanel/Blocks/ActionBlock";
+import { ContentBlock } from "@/components/shared/ContextPanel/Blocks/ContentBlock";
+import { ListBlock } from "@/components/shared/ContextPanel/Blocks/ListBlock";
+import { TextBlock } from "@/components/shared/ContextPanel/Blocks/TextBlock";
+import { CopyText } from "@/components/shared/CopyText/CopyText";
+import { TaskImplementation } from "@/components/shared/TaskDetails";
+import { BlockStack } from "@/components/ui/layout";
+import { useComponentSpec } from "@/providers/ComponentSpecProvider";
+import { getComponentFileFromList } from "@/utils/componentStore";
+import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
+
+import PipelineIO from "../../shared/ArtifactsList/PipelineIO";
+import { PipelineValidationList } from "./PipelineValidationList";
+import RenamePipeline from "./RenamePipeline";
+
+const PipelineDetails = () => {
+  const {
+    componentSpec,
+    digest,
+    isComponentTreeValid,
+    globalValidationIssues,
+  } = useComponentSpec();
+
+  const { handleIssueClick, groupedIssues } = useValidationIssueNavigation(
+    globalValidationIssues,
+  );
+
+  // State for file metadata
+  const [fileMeta, setFileMeta] = useState<{
+    creationTime?: Date;
+    modificationTime?: Date;
+    createdBy?: string;
+  }>({});
+
+  // Fetch file metadata on mount or when componentSpec.name changes
+  useEffect(() => {
+    const fetchMeta = async () => {
+      if (!componentSpec.name) return;
+      const file = await getComponentFileFromList(
+        USER_PIPELINES_LIST_NAME,
+        componentSpec.name,
+      );
+      if (file) {
+        setFileMeta({
+          creationTime: file.creationTime,
+          modificationTime: file.modificationTime,
+          createdBy: file.componentRef.spec.metadata?.annotations?.author,
+        });
+      }
+    };
+    fetchMeta();
+  }, [componentSpec.name]);
+
+  const metadata = [
+    {
+      label: "Created by",
+      value: fileMeta.createdBy,
+    },
+    {
+      label: "Created at",
+      value: fileMeta.creationTime?.toLocaleString(),
+    },
+    {
+      label: "Last updated",
+      value: fileMeta.modificationTime?.toLocaleString(),
+    },
+  ];
+
+  const annotations = Object.entries(
+    componentSpec.metadata?.annotations || {},
+  ).map(([key, value]) => ({ label: key, value: String(value) }));
+
+  const actions = [
+    <RenamePipeline key="rename-pipeline-action" />,
+    <TaskImplementation
+      key="pipeline-implementation-action"
+      displayName={componentSpec.name ?? "Pipeline"}
+      componentSpec={componentSpec}
+      showInlineContent={false}
+    />,
+  ];
+
+  return (
+    <BlockStack
+      gap="4"
+      className="h-full px-2"
+      data-context-panel="pipeline-details"
+    >
+      <CopyText className="text-lg font-semibold">
+        {componentSpec.name ?? "Unnamed Pipeline"}
+      </CopyText>
+
+      <ActionBlock actions={actions} />
+
+      <ListBlock items={metadata} marker="none" />
+
+      {componentSpec.description && (
+        <TextBlock title="Description" text={componentSpec.description} />
+      )}
+
+      {digest && (
+        <TextBlock
+          title="Digest"
+          text={digest}
+          copyable
+          className="bg-secondary p-2 rounded-md border"
+          mono
+        />
+      )}
+
+      {annotations.length > 0 && (
+        <ListBlock title="Annotations" items={annotations} marker="none" />
+      )}
+
+      <PipelineIO />
+
+      <ContentBlock title="Validations">
+        <PipelineValidationList
+          isComponentTreeValid={isComponentTreeValid}
+          groupedIssues={groupedIssues}
+          totalIssueCount={globalValidationIssues.length}
+          onIssueSelect={handleIssueClick}
+        />
+      </ContentBlock>
+    </BlockStack>
+  );
+};
+
+export default PipelineDetails;
diff --git a/src/components/Editor/components/PipelineValidationList/PipelineValidationList.tsx b/src/components/Editor/Context/PipelineValidationList.tsx
similarity index 98%
rename from src/components/Editor/components/PipelineValidationList/PipelineValidationList.tsx
rename to src/components/Editor/Context/PipelineValidationList.tsx
index 80ad8c7b3..223128f98 100644
--- a/src/components/Editor/components/PipelineValidationList/PipelineValidationList.tsx
+++ b/src/components/Editor/Context/PipelineValidationList.tsx
@@ -20,7 +20,7 @@ import { cn } from "@/lib/utils";
 import { pluralize } from "@/utils/string";
 import type { ComponentValidationIssue } from "@/utils/validations";
 
-import type { ValidationIssueGroup } from "../../hooks/useValidationIssueNavigation";
+import type { ValidationIssueGroup } from "../hooks/useValidationIssueNavigation";
 
 interface PipelineValidationListProps {
   isComponentTreeValid: boolean;
@@ -75,13 +75,13 @@ export const PipelineValidationList = ({
       title={`${totalIssueCount} ${pluralize(totalIssueCount, "issue")} detected`}
     >
       <Paragraph size="sm" className="mb-4">
-        {" "}
         Select an item to jump to its location in the pipeline.
       </Paragraph>
 
       <BlockStack gap="2">
         {groupedIssues.map((group) => {
           const isOpen = openGroups.has(group.pathKey);
+
           return (
             <Collapsible
               key={group.pathKey}
diff --git a/src/components/Editor/RenamePipeline.tsx b/src/components/Editor/Context/RenamePipeline.tsx
similarity index 96%
rename from src/components/Editor/RenamePipeline.tsx
rename to src/components/Editor/Context/RenamePipeline.tsx
index a64c7c247..787342578 100644
--- a/src/components/Editor/RenamePipeline.tsx
+++ b/src/components/Editor/Context/RenamePipeline.tsx
@@ -2,14 +2,13 @@ import { useLocation, useNavigate } from "@tanstack/react-router";
 import { Edit3 } from "lucide-react";
 
 import TooltipButton from "@/components/shared/Buttons/TooltipButton";
+import { PipelineNameDialog } from "@/components/shared/Dialogs";
 import useToastNotification from "@/hooks/useToastNotification";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { APP_ROUTES } from "@/routes/router";
 import { renameComponentFileInList } from "@/utils/componentStore";
 import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
 
-import { PipelineNameDialog } from "../shared/Dialogs";
-
 const RenamePipeline = () => {
   const { componentSpec, saveComponentSpec } = useComponentSpec();
   const notify = useToastNotification();
diff --git a/src/components/Editor/PipelineDetails.tsx b/src/components/Editor/PipelineDetails.tsx
deleted file mode 100644
index 767f6cd7a..000000000
--- a/src/components/Editor/PipelineDetails.tsx
+++ /dev/null
@@ -1,281 +0,0 @@
-import { Frown } from "lucide-react";
-import { useEffect, useState } from "react";
-
-import { PipelineValidationList } from "@/components/Editor/components/PipelineValidationList/PipelineValidationList";
-import { useValidationIssueNavigation } from "@/components/Editor/hooks/useValidationIssueNavigation";
-import { ArtifactsList } from "@/components/shared/ArtifactsList/ArtifactsList";
-import { CopyText } from "@/components/shared/CopyText/CopyText";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@/components/ui/icon";
-import { BlockStack, InlineStack } from "@/components/ui/layout";
-import { Text } from "@/components/ui/typography";
-import useToastNotification from "@/hooks/useToastNotification";
-import { useComponentSpec } from "@/providers/ComponentSpecProvider";
-import { useContextPanel } from "@/providers/ContextPanelProvider";
-import {
-  type InputSpec,
-  type OutputSpec,
-  type TypeSpecType,
-} from "@/utils/componentSpec";
-import { getComponentFileFromList } from "@/utils/componentStore";
-import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
-
-import { TaskImplementation } from "../shared/TaskDetails";
-import { InputValueEditor } from "./IOEditor/InputValueEditor";
-import { OutputNameEditor } from "./IOEditor/OutputNameEditor";
-import RenamePipeline from "./RenamePipeline";
-import { getOutputConnectedDetails } from "./utils/getOutputConnectedDetails";
-
-const PipelineDetails = () => {
-  const { setContent } = useContextPanel();
-  const {
-    componentSpec,
-    graphSpec,
-    digest,
-    isComponentTreeValid,
-    globalValidationIssues,
-  } = useComponentSpec();
-
-  const notify = useToastNotification();
-
-  const { handleIssueClick, groupedIssues } = useValidationIssueNavigation(
-    globalValidationIssues,
-  );
-
-  // Utility function to convert TypeSpecType to string
-  const typeSpecToString = (typeSpec?: TypeSpecType): string => {
-    if (typeSpec === undefined) {
-      return "Any";
-    }
-    if (typeof typeSpec === "string") {
-      return typeSpec;
-    }
-    return JSON.stringify(typeSpec);
-  };
-
-  // State for file metadata
-  const [fileMeta, setFileMeta] = useState<{
-    creationTime?: Date;
-    modificationTime?: Date;
-    createdBy?: string;
-  }>({});
-
-  // Fetch file metadata on mount or when componentSpec.name changes
-  useEffect(() => {
-    const fetchMeta = async () => {
-      if (!componentSpec?.name) return;
-      const file = await getComponentFileFromList(
-        USER_PIPELINES_LIST_NAME,
-        componentSpec.name,
-      );
-      if (file) {
-        setFileMeta({
-          creationTime: file.creationTime,
-          modificationTime: file.modificationTime,
-          createdBy: file.componentRef.spec.metadata?.annotations?.author as
-            | string
-            | undefined,
-        });
-      }
-    };
-    fetchMeta();
-  }, [componentSpec?.name]);
-
-  const handleInputEdit = (input: InputSpec) => {
-    setContent(<InputValueEditor key={input.name} input={input} />);
-  };
-
-  const handleOutputEdit = (output: OutputSpec) => {
-    const outputConnectedDetails = getOutputConnectedDetails(
-      graphSpec,
-      output.name,
-    );
-    setContent(
-      <OutputNameEditor
-        connectedDetails={outputConnectedDetails}
-        key={output.name}
-        output={output}
-      />,
-    );
-  };
-
-  const handleDigestCopy = () => {
-    navigator.clipboard.writeText(digest);
-    notify("Digest copied to clipboard", "success");
-  };
-
-  if (!componentSpec) {
-    return (
-      <div className="flex flex-col gap-8 items-center justify-center h-full">
-        <Frown className="w-12 h-12 text-secondary-foreground" />
-        <div className="text-secondary-foreground">
-          Error loading pipeline details.
-        </div>
-      </div>
-    );
-  }
-
-  const annotations = componentSpec.metadata?.annotations || {};
-
-  return (
-    <BlockStack
-      gap="6"
-      className="p-2 h-full"
-      data-context-panel="pipeline-details"
-    >
-      <CopyText className="text-lg font-semibold">
-        {componentSpec.name ?? "Unnamed Pipeline"}
-      </CopyText>
-      <InlineStack gap="2">
-        <RenamePipeline />
-        <TaskImplementation
-          displayName={componentSpec.name ?? "Pipeline"}
-          componentSpec={componentSpec}
-          showInlineContent={false}
-        />
-      </InlineStack>
-
-      {(fileMeta.createdBy ||
-        fileMeta.creationTime ||
-        fileMeta.modificationTime) && (
-        <BlockStack>
-          <Text as="h3" size="md" weight="semibold" className="mb-1">
-            Pipeline Info
-          </Text>
-          <dl className="flex flex-col gap-1 text-xs text-secondary-foreground">
-            {fileMeta.createdBy && (
-              <InlineStack as="div" gap="1" blockAlign="center">
-                <Text as="dt" weight="semibold">
-                  Created by:
-                </Text>
-                <dd>{fileMeta.createdBy}</dd>
-              </InlineStack>
-            )}
-            {fileMeta.creationTime && (
-              <InlineStack as="div" gap="1" blockAlign="center">
-                <Text as="dt" weight="semibold">
-                  Created at:
-                </Text>
-                <dd>{new Date(fileMeta.creationTime).toLocaleString()}</dd>
-              </InlineStack>
-            )}
-            {fileMeta.modificationTime && (
-              <InlineStack as="div" gap="1" blockAlign="center">
-                <Text as="dt" weight="semibold">
-                  Last updated:
-                </Text>
-                <dd>{new Date(fileMeta.modificationTime).toLocaleString()}</dd>
-              </InlineStack>
-            )}
-          </dl>
-        </BlockStack>
-      )}
-
-      {componentSpec.description && (
-        <BlockStack>
-          <Text as="h3" size="md" weight="semibold" className="mb-1">
-            Description
-          </Text>
-          <Text as="p" size="sm" className="whitespace-pre-line">
-            {componentSpec.description}
-          </Text>
-        </BlockStack>
-      )}
-
-      {/* Component Digest */}
-      {digest && (
-        <BlockStack>
-          <Text as="h3" size="md" weight="semibold" className="mb-1">
-            Digest
-          </Text>
-          <Button
-            className="bg-gray-100 border border-gray-300 rounded p-2 h-fit text-xs w-full text-left hover:bg-gray-200 active:bg-gray-300 transition cursor-pointer"
-            onClick={handleDigestCopy}
-            variant="ghost"
-          >
-            <Text as="span" font="mono" className="break-all w-full text-wrap">
-              {digest}
-            </Text>
-          </Button>
-        </BlockStack>
-      )}
-
-      {/* Annotations */}
-      {Object.keys(annotations).length > 0 && (
-        <BlockStack>
-          <Text as="h3" size="md" weight="semibold" className="mb-1">
-            Annotations
-          </Text>
-          <ul className="text-xs text-secondary-foreground">
-            {Object.entries(annotations).map(([key, value]) => (
-              <li key={key}>
-                <Text as="span" weight="semibold">
-                  {key}:
-                </Text>{" "}
-                <Text as="span" className="break-all">
-                  {String(value)}
-                </Text>
-              </li>
-            ))}
-          </ul>
-        </BlockStack>
-      )}
-
-      <ArtifactsList
-        inputs={(componentSpec.inputs ?? []).map((input) => ({
-          name: input.name,
-          type: typeSpecToString(input?.type),
-          value: input.value || input.default,
-          actions: (
-            <Button
-              type="button"
-              variant="ghost"
-              size="min"
-              onClick={() => handleInputEdit(input)}
-              className="text-muted-foreground hover:text-foreground h-4 w-4"
-            >
-              <Icon name="Pencil" className="size-2.5" />
-            </Button>
-          ),
-        }))}
-        outputs={(componentSpec.outputs ?? []).map((output) => {
-          const connectedDetails = getOutputConnectedDetails(
-            graphSpec,
-            output.name,
-          );
-          return {
-            name: output.name,
-            type: typeSpecToString(connectedDetails.outputType),
-            value: connectedDetails.outputName,
-            actions: (
-              <Button
-                type="button"
-                variant="ghost"
-                size="min"
-                onClick={() => handleOutputEdit(output)}
-                className="text-muted-foreground hover:text-foreground h-4 w-4"
-              >
-                <Icon name="Pencil" className="size-2.5" />
-              </Button>
-            ),
-          };
-        })}
-      />
-
-      {/* Validations */}
-      <BlockStack>
-        <Text as="h3" size="md" weight="semibold" className="mb-1">
-          Validations
-        </Text>
-        <PipelineValidationList
-          isComponentTreeValid={isComponentTreeValid}
-          groupedIssues={groupedIssues}
-          totalIssueCount={globalValidationIssues.length}
-          onIssueSelect={handleIssueClick}
-        />
-      </BlockStack>
-    </BlockStack>
-  );
-};
-
-export default PipelineDetails;
diff --git a/src/components/Editor/PipelineEditor.tsx b/src/components/Editor/PipelineEditor.tsx
index 43160f14a..8ffcd1ef7 100644
--- a/src/components/Editor/PipelineEditor.tsx
+++ b/src/components/Editor/PipelineEditor.tsx
@@ -22,7 +22,7 @@ import { ContextPanelProvider } from "@/providers/ContextPanelProvider";
 
 import { LoadingScreen } from "../shared/LoadingScreen";
 import { NodesOverlayProvider } from "../shared/ReactFlow/NodesOverlay/NodesOverlayProvider";
-import PipelineDetails from "./PipelineDetails";
+import PipelineDetails from "./Context/PipelineDetails";
 
 const GRID_SIZE = 10;
 
diff --git a/src/components/shared/ArtifactsList/PipelineIO.tsx b/src/components/shared/ArtifactsList/PipelineIO.tsx
new file mode 100644
index 000000000..0c18f61c5
--- /dev/null
+++ b/src/components/shared/ArtifactsList/PipelineIO.tsx
@@ -0,0 +1,167 @@
+import { type ReactNode } from "react";
+
+import { ContentBlock } from "@/components/shared/ContextPanel/Blocks/ContentBlock";
+import { KeyValuePair } from "@/components/shared/ContextPanel/Blocks/KeyValuePair";
+import { typeSpecToString } from "@/components/shared/ReactFlow/FlowCanvas/TaskNode/ArgumentsEditor/utils";
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Paragraph } from "@/components/ui/typography";
+import { useComponentSpec } from "@/providers/ComponentSpecProvider";
+import { useContextPanel } from "@/providers/ContextPanelProvider";
+import { type InputSpec, type OutputSpec } from "@/utils/componentSpec";
+
+import { InputValueEditor } from "../../Editor/IOEditor/InputValueEditor";
+import { OutputNameEditor } from "../../Editor/IOEditor/OutputNameEditor";
+import { getOutputConnectedDetails } from "../../Editor/utils/getOutputConnectedDetails";
+
+const PipelineIO = ({ readOnly }: { readOnly?: boolean }) => {
+  const { setContent } = useContextPanel();
+  const { componentSpec, graphSpec } = useComponentSpec();
+
+  const handleInputEdit = (input: InputSpec) => {
+    setContent(<InputValueEditor key={input.name} input={input} />);
+  };
+
+  const handleOutputEdit = (output: OutputSpec) => {
+    const outputConnectedDetails = getOutputConnectedDetails(
+      graphSpec,
+      output.name,
+    );
+    setContent(
+      <OutputNameEditor
+        connectedDetails={outputConnectedDetails}
+        key={output.name}
+        output={output}
+      />,
+    );
+  };
+
+  const inputActions: IORowAction[] = [
+    {
+      label: "Edit",
+      icon: <Icon name="Pencil" size="sm" />,
+      hidden: readOnly,
+      onClick: () => handleInputEdit,
+    },
+  ];
+  const outputActions: IORowAction[] = [];
+
+  if (!readOnly) {
+    inputActions.push();
+
+    outputActions.push({
+      label: "Edit",
+      icon: <Icon name="Pencil" size="sm" />,
+      hidden: readOnly,
+      onClick: () => handleOutputEdit,
+    });
+  }
+
+  return (
+    <BlockStack gap="4">
+      <ContentBlock title="Inputs">
+        {componentSpec.inputs && componentSpec.inputs.length > 0 ? (
+          <BlockStack>
+            {componentSpec.inputs.map((input) => (
+              <IORow
+                key={input.name}
+                name={input.name}
+                value={input.value || input.default || "—"}
+                type={typeSpecToString(input?.type)}
+                actions={inputActions}
+              />
+            ))}
+          </BlockStack>
+        ) : (
+          <Paragraph tone="subdued" size="xs">
+            No inputs
+          </Paragraph>
+        )}
+      </ContentBlock>
+      <ContentBlock title="Outputs">
+        {componentSpec.outputs && componentSpec.outputs.length > 0 ? (
+          <BlockStack>
+            {componentSpec.outputs.map((output) => {
+              const connectedOutput = getOutputConnectedDetails(
+                graphSpec,
+                output.name,
+              );
+
+              return (
+                <IORow
+                  key={output.name}
+                  name={output.name}
+                  value={connectedOutput.outputName ?? "No value"}
+                  type={typeSpecToString(connectedOutput.outputType)}
+                  actions={outputActions}
+                />
+              );
+            })}
+          </BlockStack>
+        ) : (
+          <Paragraph tone="subdued" size="xs">
+            No outputs
+          </Paragraph>
+        )}
+      </ContentBlock>
+    </BlockStack>
+  );
+};
+
+export default PipelineIO;
+
+type IORowAction = {
+  label: string;
+  icon?: ReactNode;
+  hidden?: boolean;
+  onClick: () => void;
+};
+
+interface IORowProps {
+  name: string;
+  value: string;
+  type: string;
+  actions?: IORowAction[];
+}
+
+function IORow({ name, value, type, actions }: IORowProps) {
+  return (
+    <InlineStack
+      gap="1"
+      align="space-between"
+      blockAlign="center"
+      className="even:bg-white odd:bg-secondary px-2 py-0 rounded-xs w-full"
+      wrap="nowrap"
+    >
+      <div className="flex-1 min-w-0">
+        <KeyValuePair label={name} value={value} copyable />
+      </div>
+
+      <InlineStack
+        className="min-w-16 shrink-0"
+        align="end"
+        blockAlign="center"
+      >
+        <Paragraph size="xs" tone="subdued">
+          ({type})
+        </Paragraph>
+        {actions?.map(
+          (action) =>
+            !action.hidden && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={action.onClick}
+                className="text-xs text-muted-foreground hover:text-foreground hover:bg-transparent"
+                key={action.label}
+              >
+                {action.icon ?? action.label}
+              </Button>
+            ),
+        )}
+      </InlineStack>
+    </InlineStack>
+  );
+}
diff --git a/src/components/ui/icon.tsx b/src/components/ui/icon.tsx
index ca6b0a15e..a6b5a467d 100644
--- a/src/components/ui/icon.tsx
+++ b/src/components/ui/icon.tsx
@@ -10,6 +10,7 @@ const iconVariants = cva("", {
       sm: "!w-3.5 !h-3.5",
       md: "!w-4 !h-4",
       lg: "!w-5 !h-5",
+      xl: "!w-6 !h-6",
       fill: "!w-full !h-full",
     },
   },