feat: Disable node dragging and conditionally display Source section

packages/open-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx

@@ -164,6 +164,7 @@ export const Diagram = ({ divRef, ref, colorMode = "light" }: DiagramProps) => {
         zoomOnDoubleClick={false}
         elementsSelectable={true}
         panOnScroll={true}
+        panOnDrag={false}
         zoomOnScroll={false}
         preventScrolling={true}
         selectionOnDrag={true}
@@ -178,7 +179,7 @@ export const Diagram = ({ divRef, ref, colorMode = "light" }: DiagramProps) => {
         }}
         data-testid={"react-flow-canvas"}
         elevateEdgesOnSelect={false}
-        nodesDraggable={!isReadOnly}
+        nodesDraggable={false}
         nodesConnectable={!isReadOnly}
       >
         {minimapVisible && (

packages/open-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx

@@ -51,7 +51,7 @@ function FieldRow({ label, field }: { label: string; field: DetailField }) {
 
 export function NodeDetailsView({ node }: NodeDetailsViewProps) {
   const { t } = useI18n();
-  const { errors, nodeIds } = useDiagramEditorContext();
+  const { errors, nodeIds, isReadOnly } = useDiagramEditorContext();
   const task = node.data.task;
 
   const nodeErrors = getNodeErrors(errors, node.id, nodeIds);
@@ -79,7 +79,7 @@ export function NodeDetailsView({ node }: NodeDetailsViewProps) {
           </dl>
         </>
       )}
-      {task !== undefined && (
+      {isReadOnly && task !== undefined && (
         <>
           <div className="dec-sidebar-section-spacer" />
           <SectionHeader label={t("sidebar.sectionSource")} />

packages/open-workflow-diagram-editor/tests/react-flow/diagram/Diagram.test.tsx

@@ -173,11 +173,12 @@ describe("Diagram Component", () => {
       expect(ReactFlow).toHaveBeenCalled();
     });
 
-    // Verify that ReactFlow was called with nodesDraggable={true} and nodesConnectable={true}
+    // Verify that ReactFlow was called with nodesDraggable={false} and nodesConnectable={true} and panOnDrag={false}
     const mockReactFlow = vi.mocked(ReactFlow);
     const reactFlowProps = mockReactFlow.mock.calls[mockReactFlow.mock.calls.length - 1][0];
-    expect(reactFlowProps.nodesDraggable).toBe(true);
+    expect(reactFlowProps.nodesDraggable).toBe(false);
     expect(reactFlowProps.nodesConnectable).toBe(true);
+    expect(reactFlowProps.panOnDrag).toBe(false);
 
     await waitFor(() => {
       expect(applyAutoLayoutSpy).toHaveBeenCalled();

packages/open-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx

@@ -161,5 +161,21 @@ describe("NodeDetailsView", () => {
       expect(screen.queryByTestId("sidebar-errors")).not.toBeInTheDocument();
       expect(screen.getByText("Properties")).toBeInTheDocument();
     });
+
+    it("does not render the Source section in editable mode", () => {
+      const task = {
+        call: "http",
+        with: { endpoint: "https://api.example.com" },
+      };
+      const node = makeNode({ label: "getPets", task });
+
+      const { container } = renderWithProviders(<NodeDetailsView node={node} />, {
+        isReadOnly: false,
+      });
+
+      expect(screen.queryByRole("heading", { name: "Source" })).not.toBeInTheDocument();
+      expect(container.querySelector(".dec-sidebar-yaml-summary")).toBeNull();
+      expect(container.querySelector(".dec-sidebar-yaml-pre")).toBeNull();
+    });
   });
 });