diff --git a/Localize/lang/strings.json b/Localize/lang/strings.json
index cd42d3c7310..6c4a066f445 100644
--- a/Localize/lang/strings.json
+++ b/Localize/lang/strings.json
@@ -1334,6 +1334,7 @@
   "OFXJe0": "Tools",
   "OH9xlX": "10",
   "OIOexo": "On these days",
+  "OMW+Rg": "Saving…",
   "OMbXig": "Name",
   "OMr20n": "Sandbox Configuration (Optional)",
   "OMuMCI": "Workflow properties",
@@ -1547,6 +1548,7 @@
   "SToblZ": "Configure parameters for this node",
   "SUaXux": "These are the connection services this template depends on. When users deploy a workflow using this template, they’ll be prompted to create connections to the services it uses.",
   "SUo94t": "Add files",
+  "SUqh1Y": "Save",
   "SXb47U": "{minutes}m",
   "SY04wn": "Required. The name of the action with a form-data or form-encoded response.",
   "SY9ptd": "Each action has parameters that accept input. Check the default input sources and make any necessary changes to meet your scenario.",
@@ -3297,6 +3299,7 @@
   "_OFXJe0.comment": "Label for allowed tools dropdown",
   "_OH9xlX.comment": "Hour of the day",
   "_OIOexo.comment": "Label for schedule days",
+  "_OMW+Rg.comment": "Label shown while saving the edited action code",
   "_OMbXig.comment": "Label for the name input",
   "_OMr20n.comment": "Title for sandbox configuration section",
   "_OMuMCI.comment": "Header text for workflow properties",
@@ -3510,6 +3513,7 @@
   "_SToblZ.comment": "Parameters tab description",
   "_SUaXux.comment": "The description for the connections tab",
   "_SUo94t.comment": "Title for add files panel",
+  "_SUqh1Y.comment": "Button to save the edited action code",
   "_SXb47U.comment": "This is a period in time in seconds. {minutes} is replaced by the number and m is an abbreviation of minutes",
   "_SY04wn.comment": "Required string parameter to identify action name for formDataMultiValues function",
   "_SY9ptd.comment": "Description for the actions section",
@@ -4158,6 +4162,7 @@
   "_eXWIo2.comment": "Description for parameter default value field",
   "_eXcejw.comment": "Running status",
   "_eaEXYa.comment": "Checkbox text for the filter representing all items",
+  "_eaI2mF.comment": "Validation error shown when the edited action code is not valid JSON",
   "_eagv8j.comment": "Create logic app workspace text.",
   "_eb91v1.comment": "Header for the change connection panel",
   "_ec13/p.comment": "Link text to learn more about Independent Publisher connectors",
@@ -4469,6 +4474,7 @@
   "_kSXjTx.comment": "Assertion field no description text",
   "_kU4VfD.comment": "Choice group first choice: Stateful Type",
   "_kVwJXt.comment": "Time zone value ",
+  "_kWpQvf.comment": "Button to discard edits made to the action code",
   "_kXn5e0.comment": "Chabot input placeholder text",
   "_kZCX7t.comment": "Day of the week",
   "_kZk/Ed.comment": "ARIA label text for the download link. Do not remove the double single quotes around the display name, as it is needed to wrap the placeholder text.",
@@ -5537,6 +5543,7 @@
   "eXWIo2": "Pre-filled value used if the user doesn't enter anything.",
   "eXcejw": "In progress",
   "eaEXYa": "All",
+  "eaI2mF": "Invalid JSON. Fix the errors before saving.",
   "eagv8j": "Create logic app workspace",
   "eb91v1": "Change connection",
   "ec13/p": "Learn more",
@@ -5848,6 +5855,7 @@
   "kSXjTx": "No description",
   "kU4VfD": "Stateful",
   "kVwJXt": "(UTC+04:00) Abu Dhabi, Muscat",
+  "kWpQvf": "Discard",
   "kXn5e0": "Ask a question about this workflow or about Azure Logic Apps as a whole ...",
   "kZCX7t": "Monday",
   "kZk/Ed": "Alt/Option + select to download ''{displayName}''",
diff --git a/apps/Standalone/src/designer/app/SettingsSections/contextSettings.tsx b/apps/Standalone/src/designer/app/SettingsSections/contextSettings.tsx
index 5be18ac0f61..827a91878a8 100644
--- a/apps/Standalone/src/designer/app/SettingsSections/contextSettings.tsx
+++ b/apps/Standalone/src/designer/app/SettingsSections/contextSettings.tsx
@@ -98,6 +98,11 @@ const ContextSettings = () => {
         checked={hostOptions.collapseGraphsByDefault}
         onChange={(_, checked) => dispatch(setHostOptions({ collapseGraphsByDefault: !!checked }))}
       />
+      <Checkbox
+        label="Editable Code View"
+        checked={hostOptions.enableEditableCodeView}
+        onChange={(_, checked) => dispatch(setHostOptions({ enableEditableCodeView: !!checked }))}
+      />
       <Checkbox
         label="Suppress default node click"
         checked={suppressDefaultNodeSelect}
diff --git a/apps/Standalone/src/designer/state/workflowLoadingSlice.ts b/apps/Standalone/src/designer/state/workflowLoadingSlice.ts
index e5807fd97ef..8e3fe542e85 100644
--- a/apps/Standalone/src/designer/state/workflowLoadingSlice.ts
+++ b/apps/Standalone/src/designer/state/workflowLoadingSlice.ts
@@ -36,6 +36,7 @@ export interface WorkflowLoadingState {
     maxStateHistorySize?: number; // maximum number of states to save in history for undo/redo
     collapseGraphsByDefault?: boolean; // collapse scope by default
     enableMultiVariable?: boolean; // supports creating multiple variables in one action
+    enableEditableCodeView?: boolean; // allow editing an action's JSON inline from the node code view tab
   };
   showPerformanceDebug?: boolean;
   isFirstDesignerV2Load?: boolean;
@@ -66,6 +67,7 @@ const initialState: WorkflowLoadingState = {
     maxStateHistorySize: 20,
     collapseGraphsByDefault: false,
     enableMultiVariable: true,
+    enableEditableCodeView: true,
   },
   showPerformanceDebug: false,
   isFirstDesignerV2Load: false,
diff --git a/libs/designer-ui/src/lib/peek/__test__/editableCodeView.spec.tsx b/libs/designer-ui/src/lib/peek/__test__/editableCodeView.spec.tsx
new file mode 100644
index 00000000000..203c00a7eba
--- /dev/null
+++ b/libs/designer-ui/src/lib/peek/__test__/editableCodeView.spec.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { describe, test, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { EditableCodeView, type EditableCodeViewProps } from '../editableCodeView';
+
+// MonacoEditor is heavy and pulls in the real monaco runtime; swap it for a textarea that
+// forwards edits through the same onContentChanged contract.
+vi.mock('../../editor/monaco', () => ({
+  MonacoEditor: ({
+    value,
+    onContentChanged,
+    readOnly,
+  }: {
+    value?: string;
+    onContentChanged: (e: { value: string }) => void;
+    readOnly?: boolean;
+  }) => (
+    <textarea
+      data-testid="monaco-editor"
+      aria-label="editable-code-view"
+      readOnly={readOnly}
+      value={value ?? ''}
+      onChange={(e) => onContentChanged({ value: e.target.value })}
+    />
+  ),
+}));
+
+const labels = { save: 'Save', saving: 'Saving…', discard: 'Discard' };
+
+const renderComponent = (overrides: Partial<EditableCodeViewProps> = {}) => {
+  const props: EditableCodeViewProps = {
+    value: '{}',
+    onChange: vi.fn(),
+    onSave: vi.fn(),
+    onDiscard: vi.fn(),
+    labels,
+    ...overrides,
+  };
+  return { props, ...render(<EditableCodeView {...props} />) };
+};
+
+describe('EditableCodeView', () => {
+  beforeEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  test('renders the editor with the supplied value', () => {
+    renderComponent({ value: '{"a":1}' });
+    expect(screen.getByTestId('monaco-editor')).toHaveValue('{"a":1}');
+  });
+
+  test('forwards editor edits through onChange', () => {
+    const { props } = renderComponent();
+    fireEvent.change(screen.getByTestId('monaco-editor'), { target: { value: '{"b":2}' } });
+    expect(props.onChange).toHaveBeenCalledWith('{"b":2}');
+  });
+
+  test('disables Save and Discard when not dirty', () => {
+    renderComponent({ isDirty: false });
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Discard' })).toBeDisabled();
+  });
+
+  test('enables Save and Discard when dirty', () => {
+    renderComponent({ isDirty: true });
+    expect(screen.getByRole('button', { name: 'Save' })).toBeEnabled();
+    expect(screen.getByRole('button', { name: 'Discard' })).toBeEnabled();
+  });
+
+  test('invokes onSave / onDiscard when the buttons are clicked', () => {
+    const { props } = renderComponent({ isDirty: true });
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Discard' }));
+    expect(props.onSave).toHaveBeenCalledTimes(1);
+    expect(props.onDiscard).toHaveBeenCalledTimes(1);
+  });
+
+  test('surfaces a validation error and keeps Save disabled even when dirty', () => {
+    renderComponent({ isDirty: true, errorMessage: 'Invalid JSON' });
+    const alert = screen.getByRole('alert');
+    expect(alert).toHaveTextContent('Invalid JSON');
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled();
+  });
+
+  test('shows a saving spinner and disables both buttons while saving', () => {
+    renderComponent({ isDirty: true, isSaving: true });
+    expect(screen.getByText('Saving…')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Discard' })).toBeDisabled();
+  });
+
+  test('renders a read-only editor and disabled actions when readOnly', () => {
+    renderComponent({ isDirty: true, readOnly: true });
+    expect(screen.getByTestId('monaco-editor')).toHaveAttribute('readonly');
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Discard' })).toBeDisabled();
+  });
+});
diff --git a/libs/designer-ui/src/lib/peek/editableCodeView.tsx b/libs/designer-ui/src/lib/peek/editableCodeView.tsx
new file mode 100644
index 00000000000..1ce9b90c5e7
--- /dev/null
+++ b/libs/designer-ui/src/lib/peek/editableCodeView.tsx
@@ -0,0 +1,112 @@
+import { MonacoEditor } from '../editor/monaco';
+import { EditorLanguage } from '@microsoft/logic-apps-shared';
+import { Button, Spinner, Text, makeStyles, tokens } from '@fluentui/react-components';
+import { usePeekStyles } from './styles';
+
+const useEditableCodeViewStyles = makeStyles({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    gap: '8px',
+  },
+  toolbar: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+  },
+  spacer: {
+    flexGrow: 1,
+  },
+  error: {
+    color: tokens.colorPaletteRedForeground1,
+  },
+  editorWrapper: {
+    flexGrow: 1,
+    minHeight: 0,
+  },
+});
+
+export interface EditableCodeViewProps {
+  /** The current text shown in the editor (controlled). */
+  value: string;
+  /** Called on every edit with the new editor contents. */
+  onChange: (value: string) => void;
+  /** Called when the user clicks Save. */
+  onSave: () => void;
+  /** Called when the user clicks Discard. */
+  onDiscard: () => void;
+  /** Whether the editor contents differ from the last applied value. */
+  isDirty?: boolean;
+  /** Whether a save is currently in progress. */
+  isSaving?: boolean;
+  /** Validation/error message to surface above the editor. */
+  errorMessage?: string;
+  /** Whether editing is disabled (renders a read-only editor). */
+  readOnly?: boolean;
+  labels: {
+    save: string;
+    saving: string;
+    discard: string;
+  };
+}
+
+export function EditableCodeView({
+  value,
+  onChange,
+  onSave,
+  onDiscard,
+  isDirty = false,
+  isSaving = false,
+  errorMessage,
+  readOnly = false,
+  labels,
+}: EditableCodeViewProps): JSX.Element {
+  const peekStyles = usePeekStyles();
+  const styles = useEditableCodeViewStyles();
+
+  const hasError = !!errorMessage;
+  const saveDisabled = readOnly || !isDirty || isSaving || hasError;
+  const discardDisabled = readOnly || !isDirty || isSaving;
+
+  return (
+    <div className={styles.container} data-automation-id="msla-editable-code-view">
+      <div className={styles.toolbar}>
+        {errorMessage ? (
+          <Text size={200} className={styles.error} role="alert" data-automation-id="msla-editable-code-view-error">
+            {errorMessage}
+          </Text>
+        ) : null}
+        <div className={styles.spacer} />
+        {isSaving ? <Spinner size="tiny" label={labels.saving} labelPosition="after" /> : null}
+        <Button size="small" appearance="secondary" onClick={onDiscard} disabled={discardDisabled}>
+          {labels.discard}
+        </Button>
+        <Button
+          size="small"
+          appearance="primary"
+          onClick={onSave}
+          disabled={saveDisabled}
+          data-automation-id="msla-editable-code-view-save"
+        >
+          {labels.save}
+        </Button>
+      </div>
+      <div className={`msla-card-inner-body ${peekStyles.root} ${styles.editorWrapper}`}>
+        <MonacoEditor
+          className={'msla-monaco-peek'}
+          value={value}
+          onContentChanged={(e) => onChange(e.value ?? '')}
+          fontSize={13}
+          readOnly={readOnly}
+          folding={false}
+          lineNumbers={'on'}
+          language={EditorLanguage.json}
+          label="editable-code-view"
+          wordWrap={'on'}
+          monacoContainerStyle={{ height: '100%' }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/libs/designer-ui/src/lib/peek/index.tsx b/libs/designer-ui/src/lib/peek/index.tsx
index 78200c1dc4c..401163f4c41 100644
--- a/libs/designer-ui/src/lib/peek/index.tsx
+++ b/libs/designer-ui/src/lib/peek/index.tsx
@@ -2,6 +2,8 @@ import { MonacoEditor } from '../editor/monaco';
 import { EditorLanguage } from '@microsoft/logic-apps-shared';
 import { usePeekStyles } from './styles';
 
+export * from './editableCodeView';
+
 export interface PeekProps {
   input: string;
 }
diff --git a/libs/designer-v2/src/lib/core/actions/bjsworkflow/__test__/updateNodeFromCodeView.spec.ts b/libs/designer-v2/src/lib/core/actions/bjsworkflow/__test__/updateNodeFromCodeView.spec.ts
new file mode 100644
index 00000000000..7bc4ef750a9
--- /dev/null
+++ b/libs/designer-v2/src/lib/core/actions/bjsworkflow/__test__/updateNodeFromCodeView.spec.ts
@@ -0,0 +1,271 @@
+import { describe, test, expect, beforeEach, vi } from 'vitest';
+import { configureStore } from '@reduxjs/toolkit';
+import { InitOperationManifestService, type LogicAppsV2 } from '@microsoft/logic-apps-shared';
+import { updateNodeFromCodeView } from '../updateNodeFromCodeView';
+import workflowReducer from '../../../state/workflow/workflowSlice';
+import operationsReducer, { initializeNodes } from '../../../state/operation/operationMetadataSlice';
+import tokensReducer, { initializeTokensAndVariables } from '../../../state/tokens/tokensSlice';
+import panelReducer from '../../../state/panel/panelSlice';
+import connectionsReducer from '../../../state/connection/connectionSlice';
+import workflowParametersReducer from '../../../state/workflowparameters/workflowparametersSlice';
+import type { WorkflowState, NodeMetadata } from '../../../state/workflow/workflowInterfaces';
+
+// Heavy single-node re-initialization helpers are mocked so the test focuses on the thunk's
+// orchestration (persisting the definition, reconciling the graph, branch selection, and
+// variable lifecycle) rather than the deserializer internals.
+import * as operationDeserializer from '../operationdeserializer';
+import * as swaggerOperation from '../../../utils/swagger/operation';
+import * as agent from '../agent';
+import * as initialize from '../initialize';
+
+vi.mock('@microsoft/logic-apps-shared', async () => {
+  const actual = await vi.importActual<typeof import('@microsoft/logic-apps-shared')>('@microsoft/logic-apps-shared');
+  return {
+    ...actual,
+    LoggerService: vi.fn(() => ({ log: vi.fn(), startTrace: vi.fn(), endTrace: vi.fn() })),
+  };
+});
+
+vi.mock('../operationdeserializer', () => ({
+  initializeOperationDetailsForManagedMcpServer: vi.fn(),
+  initializeOperationDetailsForManifest: vi.fn(),
+  initializeRepetitionInfos: vi.fn(async () => ({})),
+  initializeOutputTokensForOperations: vi.fn(() => ({})),
+  initializeVariables: vi.fn(() => ({})),
+  initializeDynamicDataInNodes: vi.fn(async () => undefined),
+  updateTokenMetadataInParameters: vi.fn(),
+}));
+
+vi.mock('../../../utils/swagger/operation', () => ({
+  initializeOperationDetailsForSwagger: vi.fn(),
+}));
+
+vi.mock('../agent', () => ({
+  initializeConnectorOperationDetails: vi.fn(),
+}));
+
+vi.mock('../initialize', () => ({
+  updateAllUpstreamNodes: vi.fn(),
+}));
+
+const mockManifest = vi.mocked(operationDeserializer.initializeOperationDetailsForManifest);
+const mockManagedMcp = vi.mocked(operationDeserializer.initializeOperationDetailsForManagedMcpServer);
+const mockSwagger = vi.mocked(swaggerOperation.initializeOperationDetailsForSwagger);
+const mockConnector = vi.mocked(agent.initializeConnectorOperationDetails);
+const mockInitializeVariables = vi.mocked(operationDeserializer.initializeVariables);
+
+// Minimal node-data shape consumed by the real initializeNodes reducer. Distinct nodeInputs lets
+// us assert that the edited node's metadata was (re)written.
+const makeNodeData = (id: string) =>
+  ({
+    id,
+    nodeInputs: { parameterGroups: {}, marker: `inputs-${id}` },
+    nodeOutputs: { outputs: {} },
+    nodeDependencies: { inputs: {}, outputs: {} },
+    settings: {},
+    operationMetadata: { iconUri: '', brandColor: '' },
+    staticResult: undefined,
+    supportedChannels: [],
+  }) as any;
+
+// Linear top-level workflow: manual (trigger) -> A -> B -> C
+const buildWorkflowState = (): WorkflowState =>
+  ({
+    graph: {
+      id: 'root',
+      type: 'GRAPH_NODE',
+      children: [
+        { id: 'manual', type: 'OPERATION_NODE' },
+        { id: 'A', type: 'OPERATION_NODE' },
+        { id: 'B', type: 'OPERATION_NODE' },
+        { id: 'C', type: 'OPERATION_NODE' },
+      ],
+      edges: [
+        { id: 'manual-A', source: 'manual', target: 'A', type: 'BUTTON_EDGE' },
+        { id: 'A-B', source: 'A', target: 'B', type: 'BUTTON_EDGE' },
+        { id: 'B-C', source: 'B', target: 'C', type: 'BUTTON_EDGE' },
+      ],
+    },
+    operations: {
+      manual: { type: 'Request', kind: 'Http' },
+      A: { type: 'Compose', inputs: {} },
+      B: { type: 'Compose', inputs: {}, runAfter: { A: ['Succeeded'] } },
+      C: { type: 'Compose', inputs: {}, runAfter: { B: ['Succeeded'] } },
+    },
+    nodesMetadata: {
+      manual: { graphId: 'root', isRoot: true, isTrigger: true } as NodeMetadata,
+      A: { graphId: 'root' } as NodeMetadata,
+      B: { graphId: 'root' } as NodeMetadata,
+      C: { graphId: 'root' } as NodeMetadata,
+    },
+    collapsedGraphIds: {},
+    collapsedActionIds: {},
+    idReplacements: {},
+    newlyAddedOperations: {},
+    runInstance: null,
+    isDirty: false,
+    workflowKind: 'stateful',
+    originalDefinition: {} as LogicAppsV2.WorkflowDefinition,
+    hostData: { errorMessages: {} },
+    agentsGraph: {},
+    timelineRepetitionIndex: 0,
+    changeCount: 0,
+    timelineRepetitionArray: [],
+    flowErrors: {},
+  }) as unknown as WorkflowState;
+
+const makeStore = () =>
+  configureStore({
+    reducer: {
+      workflow: workflowReducer,
+      operations: operationsReducer,
+      tokens: tokensReducer,
+      panel: panelReducer,
+      connections: connectionsReducer,
+      workflowParameters: workflowParametersReducer,
+    },
+    middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
+    preloadedState: { workflow: buildWorkflowState() } as any,
+  });
+
+type TestStore = ReturnType<typeof makeStore>;
+
+const seedNode = (store: TestStore, id: string) => {
+  store.dispatch(initializeNodes({ nodes: [makeNodeData(id)], clearExisting: false }));
+};
+
+const composeWithoutRunAfter = { type: 'Compose', inputs: { value: 'edited' } } as unknown as LogicAppsV2.OperationDefinition;
+
+describe('updateNodeFromCodeView', () => {
+  let store: TestStore;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Default branch helpers return one node-data entry for the edited node.
+    mockManifest.mockImplementation(async (nodeId: string) => [makeNodeData(nodeId)]);
+    mockManagedMcp.mockImplementation(async (nodeId: string) => [makeNodeData(nodeId)]);
+    mockSwagger.mockImplementation(async (nodeId: string) => [makeNodeData(nodeId)]);
+    mockConnector.mockImplementation(async (nodeId: string) => [makeNodeData(nodeId)]);
+    mockInitializeVariables.mockReturnValue({});
+
+    // Manifest service: supported by default (manifest branch). Individual tests override.
+    InitOperationManifestService({
+      isSupported: () => true,
+      isAliasingSupported: () => false,
+      getOperationInfo: async () => ({}) as any,
+      getOperationManifest: async () => ({}) as any,
+      getOperation: async () => ({}) as any,
+      isBuiltInConnector: () => false,
+      getBuiltInConnector: () => ({}) as any,
+    } as any);
+
+    store = makeStore();
+  });
+
+  test('persists the edited definition and reconciles the graph (removing runAfter re-attaches to trigger)', async () => {
+    await store.dispatch(updateNodeFromCodeView({ nodeId: 'C', serializedOperation: composeWithoutRunAfter }));
+
+    const { workflow } = store.getState();
+    // Definition persisted.
+    expect((workflow.operations as any).C.inputs).toEqual({ value: 'edited' });
+    // B->C edge removed and a trigger->C edge created.
+    const edgeIds = (workflow.graph?.edges ?? []).map((edge) => edge.id).sort();
+    expect(edgeIds).toEqual(['A-B', 'manual-A', 'manual-C']);
+  });
+
+  test('re-initializes only the edited node and preserves other nodes', async () => {
+    seedNode(store, 'A'); // simulate another node with existing (unsaved) metadata
+
+    await store.dispatch(updateNodeFromCodeView({ nodeId: 'C', serializedOperation: composeWithoutRunAfter }));
+
+    const { operations } = store.getState();
+    // Only the edited node was passed to the deserializer.
+    expect(mockManifest).toHaveBeenCalledTimes(1);
+    expect(mockManifest).toHaveBeenCalledWith('C', expect.anything(), expect.anything(), false, 'stateful', expect.anything());
+    // Edited node metadata (re)written...
+    expect((operations.inputParameters as any).C.marker).toBe('inputs-C');
+    // ...and the other node's metadata is untouched.
+    expect((operations.inputParameters as any).A.marker).toBe('inputs-A');
+  });
+
+  test('clears stale node variables when an edit removes them', async () => {
+    // Edited node previously declared a variable...
+    store.dispatch(initializeTokensAndVariables({ outputTokens: {}, variables: { C: [{ name: 'oldVar', type: 'String' }] as any } }));
+    // ...but the new definition declares none.
+    mockInitializeVariables.mockReturnValue({});
+
+    await store.dispatch(updateNodeFromCodeView({ nodeId: 'C', serializedOperation: composeWithoutRunAfter }));
+
+    expect((store.getState().tokens.variables as any).C).toBeUndefined();
+  });
+
+  test('re-initializes node variables when the edit declares them', async () => {
+    const newVars = [{ name: 'newVar', type: 'Integer' }];
+    mockInitializeVariables.mockReturnValue({ C: newVars } as any);
+
+    await store.dispatch(updateNodeFromCodeView({ nodeId: 'C', serializedOperation: composeWithoutRunAfter }));
+
+    expect((store.getState().tokens.variables as any).C).toEqual(newVars);
+  });
+
+  test('uses the manifest branch when the operation is supported', async () => {
+    await store.dispatch(updateNodeFromCodeView({ nodeId: 'C', serializedOperation: composeWithoutRunAfter }));
+
+    expect(mockManifest).toHaveBeenCalledTimes(1);
+    expect(mockSwagger).not.toHaveBeenCalled();
+    expect(mockConnector).not.toHaveBeenCalled();
+    expect(mockManagedMcp).not.toHaveBeenCalled();
+  });
+
+  test('falls back to the swagger branch when the operation is not supported', async () => {
+    InitOperationManifestService({
+      isSupported: () => false,
+      isAliasingSupported: () => false,
+      getOperationInfo: async () => ({}) as any,
+      getOperationManifest: async () => ({}) as any,
+      getOperation: async () => ({}) as any,
+      isBuiltInConnector: () => false,
+      getBuiltInConnector: () => ({}) as any,
+    } as any);
+
+    const apiConnection = { type: 'ApiConnection', inputs: {} } as unknown as LogicAppsV2.OperationDefinition;
+    await store.dispatch(updateNodeFromCodeView({ nodeId: 'C', serializedOperation: apiConnection }));
+
+    expect(mockSwagger).toHaveBeenCalledTimes(1);
+    expect(mockManifest).not.toHaveBeenCalled();
+  });
+
+  test('uses the connector branch for connector-typed operations', async () => {
+    const connectorOp = { type: 'connector', inputs: {} } as unknown as LogicAppsV2.OperationDefinition;
+    await store.dispatch(updateNodeFromCodeView({ nodeId: 'C', serializedOperation: connectorOp }));
+
+    expect(mockConnector).toHaveBeenCalledTimes(1);
+    expect(mockManifest).not.toHaveBeenCalled();
+    expect(mockManagedMcp).not.toHaveBeenCalled();
+  });
+
+  test('uses the managed-MCP branch for managed MCP operations', async () => {
+    const managedMcpOp = { type: 'mcpclienttool', kind: 'managed', inputs: {} } as unknown as LogicAppsV2.OperationDefinition;
+    await store.dispatch(updateNodeFromCodeView({ nodeId: 'C', serializedOperation: managedMcpOp }));
+
+    expect(mockManagedMcp).toHaveBeenCalledTimes(1);
+    expect(mockManifest).not.toHaveBeenCalled();
+    expect(mockConnector).not.toHaveBeenCalled();
+  });
+
+  test('no-ops when the node is not present in workflow.operations', async () => {
+    await store.dispatch(updateNodeFromCodeView({ nodeId: 'does-not-exist', serializedOperation: composeWithoutRunAfter }));
+
+    expect(mockManifest).not.toHaveBeenCalled();
+    expect(mockSwagger).not.toHaveBeenCalled();
+    expect(mockConnector).not.toHaveBeenCalled();
+    expect(mockManagedMcp).not.toHaveBeenCalled();
+  });
+
+  test('toggles the panel loading flag around the mutation', async () => {
+    await store.dispatch(updateNodeFromCodeView({ nodeId: 'C', serializedOperation: composeWithoutRunAfter }));
+
+    // The finally block resets it back to false once the mutation completes.
+    expect(store.getState().panel.isLoading).toBe(false);
+  });
+});
diff --git a/libs/designer-v2/src/lib/core/actions/bjsworkflow/operationdeserializer.ts b/libs/designer-v2/src/lib/core/actions/bjsworkflow/operationdeserializer.ts
index ea74ac5cdb9..69a33a520ee 100644
--- a/libs/designer-v2/src/lib/core/actions/bjsworkflow/operationdeserializer.ts
+++ b/libs/designer-v2/src/lib/core/actions/bjsworkflow/operationdeserializer.ts
@@ -503,7 +503,7 @@ const processChildGraphAndItsInputs = (
   return nodesData;
 };
 
-const updateTokenMetadataInParameters = (
+export const updateTokenMetadataInParameters = (
   nodes: NodeDataWithOperationMetadata[],
   operations: Operations,
   workflowParameters: Record<string, WorkflowParameter>,
@@ -581,7 +581,7 @@ const updateTokenMetadataInParameters = (
   }
 };
 
-const initializeOutputTokensForOperations = (
+export const initializeOutputTokensForOperations = (
   allNodesData: NodeDataWithOperationMetadata[],
   operations: Operations,
   graph: WorkflowNode,
@@ -642,7 +642,7 @@ const initializeOutputTokensForOperations = (
   return result;
 };
 
-const initializeVariables = (
+export const initializeVariables = (
   operations: Operations,
   allNodesData: NodeDataWithOperationMetadata[]
 ): Record<string, VariableDeclaration[]> => {
@@ -667,7 +667,7 @@ const initializeVariables = (
   return declarations;
 };
 
-const initializeRepetitionInfos = async (
+export const initializeRepetitionInfos = async (
   triggerNodeId: string,
   allOperations: Operations,
   nodesData: NodeDataWithOperationMetadata[],
diff --git a/libs/designer-v2/src/lib/core/actions/bjsworkflow/updateNodeFromCodeView.ts b/libs/designer-v2/src/lib/core/actions/bjsworkflow/updateNodeFromCodeView.ts
new file mode 100644
index 00000000000..4a77822343d
--- /dev/null
+++ b/libs/designer-v2/src/lib/core/actions/bjsworkflow/updateNodeFromCodeView.ts
@@ -0,0 +1,130 @@
+import { getTriggerNodeId, type RootState } from '../..';
+import type { LogicAppsV2 } from '@microsoft/logic-apps-shared';
+import { OperationManifestService, getRecordEntry } from '@microsoft/logic-apps-shared';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { setIsPanelLoading } from '../../state/panel/panelSlice';
+import { initializeNodes } from '../../state/operation/operationMetadataSlice';
+import { deinitializeTokensAndVariables, initializeTokensAndVariables } from '../../state/tokens/tokensSlice';
+import { replaceOperationDefinition } from '../../state/workflow/workflowSlice';
+import { isManagedMcpOperation } from '../../state/workflow/helper';
+import { isTriggerNode } from '../../utils/graph';
+import Constants from '../../../common/constants';
+import { initializeConnectorOperationDetails } from './agent';
+import { updateAllUpstreamNodes } from './initialize';
+import {
+  initializeDynamicDataInNodes,
+  initializeOperationDetailsForManagedMcpServer,
+  initializeOperationDetailsForManifest,
+  initializeOutputTokensForOperations,
+  initializeRepetitionInfos,
+  initializeVariables,
+  updateTokenMetadataInParameters,
+  type NodeDataWithOperationMetadata,
+} from './operationdeserializer';
+import { initializeOperationDetailsForSwagger } from '../../utils/swagger/operation';
+
+export interface UpdateNodeFromCodeViewPayload {
+  nodeId: string;
+  serializedOperation: LogicAppsV2.OperationDefinition;
+}
+
+/**
+ * Applies an edited single-operation definition (from the per-action Code view) back into
+ * the designer state. Only the edited node is re-initialized; other nodes (and their
+ * unsaved edits) are left untouched.
+ *
+ * Changes to the edited node's `runAfter` are reconciled into the graph (via
+ * replaceOperationDefinition) so the node's position updates. Other structural changes
+ * (renaming the action key, adding or removing child actions, re-nesting into a different
+ * scope) are NOT applied here -- those still require the whole-workflow code view.
+ */
+export const updateNodeFromCodeView = createAsyncThunk(
+  'updateNodeFromCodeView',
+  async (payload: UpdateNodeFromCodeViewPayload, { dispatch, getState }): Promise<void> => {
+    const { nodeId, serializedOperation } = payload;
+    const state = getState() as RootState;
+
+    if (!getRecordEntry(state.workflow.operations, nodeId)) {
+      return;
+    }
+
+    dispatch(setIsPanelLoading(true));
+    try {
+      // Persist the new definition so serialization/runAfter fallbacks stay in sync.
+      dispatch(replaceOperationDefinition({ nodeId, operationDefinition: serializedOperation }));
+
+      const updatedState = getState() as RootState;
+      const { operations, nodesMetadata, workflowKind, graph } = updatedState.workflow;
+      const references = updatedState.connections.connectionReferences;
+      const workflowParameters = updatedState.workflowParameters.definitions;
+      const isTrigger = isTriggerNode(nodeId, nodesMetadata);
+      const triggerNodeId = getTriggerNodeId(updatedState.workflow);
+
+      const operationManifestService = OperationManifestService();
+      let nodeData: NodeDataWithOperationMetadata[] | undefined;
+      if (isManagedMcpOperation(serializedOperation)) {
+        nodeData = await initializeOperationDetailsForManagedMcpServer(nodeId, serializedOperation, references, workflowKind, dispatch);
+      } else if (serializedOperation.type === Constants.NODE.TYPE.CONNECTOR) {
+        nodeData = await initializeConnectorOperationDetails(
+          nodeId,
+          serializedOperation as LogicAppsV2.ConnectorAction,
+          workflowKind,
+          dispatch
+        );
+      } else if (operationManifestService.isSupported(serializedOperation.type, serializedOperation.kind)) {
+        nodeData = await initializeOperationDetailsForManifest(
+          nodeId,
+          serializedOperation,
+          {} /* customCode */,
+          isTrigger,
+          workflowKind,
+          dispatch
+        );
+      } else {
+        nodeData = await initializeOperationDetailsForSwagger(nodeId, serializedOperation, references, isTrigger, workflowKind, dispatch);
+      }
+
+      if (!nodeData || nodeData.length === 0) {
+        return;
+      }
+
+      const repetitionInfos = await initializeRepetitionInfos(triggerNodeId, operations, nodeData, nodesMetadata);
+      updateTokenMetadataInParameters(nodeData, operations, workflowParameters, nodesMetadata, triggerNodeId, repetitionInfos);
+
+      dispatch(
+        initializeNodes({
+          nodes: nodeData.map((data) => {
+            const { id, nodeInputs, nodeOutputs, nodeDependencies, settings, operationMetadata, staticResult, supportedChannels } = data;
+            return {
+              id,
+              nodeInputs,
+              nodeOutputs,
+              nodeDependencies,
+              settings,
+              operationMetadata,
+              staticResult,
+              supportedChannels,
+              actionMetadata: getRecordEntry(nodesMetadata, id)?.actionMetadata,
+              repetitionInfo: getRecordEntry(repetitionInfos, id),
+            };
+          }),
+          clearExisting: false,
+        })
+      );
+
+      const singleOperation = { [nodeId]: serializedOperation };
+      const outputTokens = graph ? initializeOutputTokensForOperations(nodeData, singleOperation, graph, nodesMetadata) : {};
+      const variables = initializeVariables(singleOperation, nodeData);
+      // Clear any existing variable declarations for this node first. initializeVariables skips
+      // operations with no variables, so without this an edit that removes a node's variables
+      // would leave stale entries in tokens.variables.
+      dispatch(deinitializeTokensAndVariables({ id: nodeId }));
+      dispatch(initializeTokensAndVariables({ outputTokens, variables }));
+
+      await initializeDynamicDataInNodes(getState as () => RootState, dispatch, [nodeId]);
+      updateAllUpstreamNodes(getState() as RootState, dispatch);
+    } finally {
+      dispatch(setIsPanelLoading(false));
+    }
+  }
+);
diff --git a/libs/designer-v2/src/lib/core/state/designerOptions/designerOptionsInterfaces.ts b/libs/designer-v2/src/lib/core/state/designerOptions/designerOptionsInterfaces.ts
index 16924333a17..2fddeb223b9 100644
--- a/libs/designer-v2/src/lib/core/state/designerOptions/designerOptionsInterfaces.ts
+++ b/libs/designer-v2/src/lib/core/state/designerOptions/designerOptionsInterfaces.ts
@@ -55,6 +55,7 @@ export interface DesignerOptionsState {
     enableNestedAgentLoops?: boolean; // allow agent loops to be added inside regular loops (requires bundle version >= 1.115.0)
     disableMcpClientTools?: boolean; // hide MCP client tools from browse panel
     disableNativeMcpClientTools?: boolean; // hide native (built-in) MCP client tools tab from browse panel
+    enableEditableCodeView?: boolean; // allow editing an action's JSON inline from the node code view tab (opt-in per host)
     integrationAccount?: { id?: string; name?: string }; // integration account linked to the workflow
   };
   nodeSelectAdditionalCallback?: (nodeId: string) => any;
diff --git a/libs/designer-v2/src/lib/core/state/designerOptions/designerOptionsSelectors.ts b/libs/designer-v2/src/lib/core/state/designerOptions/designerOptionsSelectors.ts
index 0c30c9d0e58..da371cf80c2 100644
--- a/libs/designer-v2/src/lib/core/state/designerOptions/designerOptionsSelectors.ts
+++ b/libs/designer-v2/src/lib/core/state/designerOptions/designerOptionsSelectors.ts
@@ -74,6 +74,10 @@ export const useDisableNativeMcpClientTools = () => {
   return useSelector((state: RootState) => state.designerOptions.hostOptions?.disableNativeMcpClientTools ?? false);
 };
 
+export const useEditableCodeViewEnabled = () => {
+  return useSelector((state: RootState) => state.designerOptions.hostOptions?.enableEditableCodeView ?? false);
+};
+
 export const useAreDesignerOptionsInitialized = () => {
   return useSelector((state: RootState) => state.designerOptions?.designerOptionsInitialized ?? false);
 };
diff --git a/libs/designer-v2/src/lib/core/state/workflow/__test__/workflowSlice.spec.ts b/libs/designer-v2/src/lib/core/state/workflow/__test__/workflowSlice.spec.ts
index cd8a25dc473..3d52e15c05c 100644
--- a/libs/designer-v2/src/lib/core/state/workflow/__test__/workflowSlice.spec.ts
+++ b/libs/designer-v2/src/lib/core/state/workflow/__test__/workflowSlice.spec.ts
@@ -208,3 +208,156 @@ describe('workflowSlice - setRepetitionRunData', () => {
     expect(updatedRunData.error).toBeUndefined();
   });
 });
+
+describe('workflowSlice - replaceOperationDefinition', () => {
+  const nodeId = 'testNode';
+
+  const buildState = (operations: Record<string, any>): WorkflowState =>
+    ({
+      graph: null,
+      operations,
+      nodesMetadata: {},
+      collapsedGraphIds: {},
+      collapsedActionIds: {},
+      idReplacements: {},
+      newlyAddedOperations: {},
+      runInstance: null,
+      isDirty: false,
+      workflowKind: undefined,
+      originalDefinition: {} as LogicAppsV2.WorkflowDefinition,
+      hostData: { errorMessages: {} },
+      agentsGraph: {},
+      timelineRepetitionIndex: 0,
+      changeCount: 0,
+      timelineRepetitionArray: [],
+      flowErrors: {},
+    }) as WorkflowState;
+
+  test('should replace the operation definition for an existing node', () => {
+    const initialState = buildState({
+      [nodeId]: { type: 'InitializeVariable', inputs: { variables: [{ name: 'old', type: 'String', value: 'a' }] } },
+    });
+
+    const operationDefinition = {
+      type: 'InitializeVariable',
+      inputs: { variables: [{ name: 'renamed', type: 'String', value: 'b' }] },
+    } as unknown as LogicAppsV2.OperationDefinition;
+
+    const newState = workflowSlice.reducer(initialState, workflowSlice.actions.replaceOperationDefinition({ nodeId, operationDefinition }));
+
+    expect(newState.operations[nodeId]).toEqual(operationDefinition);
+    expect(newState.isDirty).toBe(true);
+  });
+
+  test('should no-op when the node does not exist', () => {
+    const initialState = buildState({});
+
+    const operationDefinition = { type: 'Compose', inputs: {} } as unknown as LogicAppsV2.OperationDefinition;
+
+    const newState = workflowSlice.reducer(
+      initialState,
+      workflowSlice.actions.replaceOperationDefinition({ nodeId: 'missing', operationDefinition })
+    );
+
+    expect(newState.operations['missing']).toBeUndefined();
+  });
+});
+
+describe('workflowSlice - replaceOperationDefinition runAfter graph reconciliation', () => {
+  // Linear top-level workflow: manual (trigger) -> A -> B -> C
+  const buildLinearState = (): WorkflowState =>
+    ({
+      graph: {
+        id: 'root',
+        type: 'GRAPH_NODE',
+        children: [
+          { id: 'manual', type: 'OPERATION_NODE' },
+          { id: 'A', type: 'OPERATION_NODE' },
+          { id: 'B', type: 'OPERATION_NODE' },
+          { id: 'C', type: 'OPERATION_NODE' },
+        ],
+        edges: [
+          { id: 'manual-A', source: 'manual', target: 'A', type: 'BUTTON_EDGE' },
+          { id: 'A-B', source: 'A', target: 'B', type: 'BUTTON_EDGE' },
+          { id: 'B-C', source: 'B', target: 'C', type: 'BUTTON_EDGE' },
+        ],
+      },
+      operations: {
+        manual: { type: 'Request', kind: 'Http' },
+        A: { type: 'Compose', inputs: {} },
+        B: { type: 'Compose', inputs: {}, runAfter: { A: ['Succeeded'] } },
+        C: { type: 'Compose', inputs: {}, runAfter: { B: ['Succeeded'] } },
+      },
+      nodesMetadata: {
+        manual: { graphId: 'root', isRoot: true, isTrigger: true } as NodeMetadata,
+        A: { graphId: 'root' } as NodeMetadata,
+        B: { graphId: 'root' } as NodeMetadata,
+        C: { graphId: 'root' } as NodeMetadata,
+      },
+      collapsedGraphIds: {},
+      collapsedActionIds: {},
+      idReplacements: {},
+      newlyAddedOperations: {},
+      runInstance: null,
+      isDirty: false,
+      workflowKind: undefined,
+      originalDefinition: {} as LogicAppsV2.WorkflowDefinition,
+      hostData: { errorMessages: {} },
+      agentsGraph: {},
+      timelineRepetitionIndex: 0,
+      changeCount: 0,
+      timelineRepetitionArray: [],
+      flowErrors: {},
+    }) as unknown as WorkflowState;
+
+  const edgeIds = (state: WorkflowState) => (state.graph?.edges ?? []).map((edge) => edge.id).sort();
+
+  test('removing runAfter on a top-level node re-attaches it to the trigger', () => {
+    const initialState = buildLinearState();
+
+    const operationDefinition = { type: 'Compose', inputs: {} } as unknown as LogicAppsV2.OperationDefinition;
+
+    const newState = workflowSlice.reducer(
+      initialState,
+      workflowSlice.actions.replaceOperationDefinition({ nodeId: 'C', operationDefinition })
+    );
+
+    // The B->C edge is gone and a trigger->C edge is created.
+    expect(edgeIds(newState)).toEqual(['A-B', 'manual-A', 'manual-C']);
+  });
+
+  test('changing the runAfter parent moves the edge to the new parent', () => {
+    const initialState = buildLinearState();
+
+    const operationDefinition = {
+      type: 'Compose',
+      inputs: {},
+      runAfter: { A: ['Succeeded'] },
+    } as unknown as LogicAppsV2.OperationDefinition;
+
+    const newState = workflowSlice.reducer(
+      initialState,
+      workflowSlice.actions.replaceOperationDefinition({ nodeId: 'C', operationDefinition })
+    );
+
+    // C now runs after A instead of B: B->C replaced with A->C.
+    expect(edgeIds(newState)).toEqual(['A-B', 'A-C', 'manual-A']);
+  });
+
+  test('status-only runAfter changes do not alter the edges', () => {
+    const initialState = buildLinearState();
+
+    const operationDefinition = {
+      type: 'Compose',
+      inputs: {},
+      runAfter: { B: ['Failed'] },
+    } as unknown as LogicAppsV2.OperationDefinition;
+
+    const newState = workflowSlice.reducer(
+      initialState,
+      workflowSlice.actions.replaceOperationDefinition({ nodeId: 'C', operationDefinition })
+    );
+
+    expect(edgeIds(newState)).toEqual(['A-B', 'B-C', 'manual-A']);
+  });
+});
diff --git a/libs/designer-v2/src/lib/core/state/workflow/workflowSlice.ts b/libs/designer-v2/src/lib/core/state/workflow/workflowSlice.ts
index 0ead61c3c70..39ccc0e53cf 100644
--- a/libs/designer-v2/src/lib/core/state/workflow/workflowSlice.ts
+++ b/libs/designer-v2/src/lib/core/state/workflow/workflowSlice.ts
@@ -16,8 +16,8 @@ import type { MoveNodePayload } from '../../parsers/moveNodeInWorkflow';
 import { moveNodeInWorkflow } from '../../parsers/moveNodeInWorkflow';
 import { pasteScopeInWorkflow } from '../../parsers/pasteScopeInWorkflow';
 import type { PasteScopeNodePayload } from '../../parsers/pasteScopeInWorkflow';
-import { addNewEdge, removeEdge, reassignEdgeSources, reassignEdgeTargets } from '../../parsers/restructuringHelpers';
-import { createWorkflowNode, getImmediateSourceNodeIds, transformOperationTitle } from '../../utils/graph';
+import { addNewEdge, removeEdge, reassignEdgeSources, reassignEdgeTargets, applyIsRootNode } from '../../parsers/restructuringHelpers';
+import { createWorkflowEdge, createWorkflowNode, getImmediateSourceNodeIds, transformOperationTitle } from '../../utils/graph';
 import { resetWorkflowState, setStateAfterUndoRedo } from '../global';
 import type { AddSettingsPayload, NodeOperation } from '../operation/operationMetadataSlice';
 import {
@@ -41,6 +41,7 @@ import {
   containsIdTag,
   containsCaseTag,
   SUBGRAPH_TYPES,
+  WORKFLOW_EDGE_TYPES,
 } from '@microsoft/logic-apps-shared';
 import type { MessageLevel } from '@microsoft/designer-ui';
 import { getDurationStringPanelMode } from '@microsoft/designer-ui';
@@ -66,6 +67,90 @@ export interface WrapNodesInScopePayload {
   operation: any;
 }
 
+/**
+ * Reconciles the graph edges (and isRoot metadata) for a single node after its
+ * `runAfter` has changed via an inline code-view edit. This keeps the node's
+ * visual position in sync with its new run-after dependencies, mirroring how the
+ * BJS deserializer builds edges from `runAfter`:
+ *   - a node with run-after parents gets one BUTTON_EDGE per parent;
+ *   - a top-level node with no run-after runs after the trigger (trigger edge);
+ *   - a scoped node with no run-after attaches to its scope header (heading edge).
+ * Structural scope edges that don't represent run-after relationships are left alone.
+ */
+const reconcileRunAfterEdges = (
+  state: WorkflowState,
+  nodeId: string,
+  oldRunAfter: Record<string, string[] | null> | undefined,
+  newRunAfter: Record<string, string[] | null> | undefined
+) => {
+  const nodeMetadata = getRecordEntry(state.nodesMetadata, nodeId);
+  if (!nodeMetadata || nodeMetadata.isTrigger) {
+    return;
+  }
+
+  // Only reconcile when the set of run-after parents actually changed. Status-only
+  // changes (e.g. Succeeded -> Failed) keep the same edges and need no graph update.
+  const oldKeys = Object.keys(oldRunAfter ?? {}).sort();
+  const newKeys = Object.keys(newRunAfter ?? {}).sort();
+  const sameParents = oldKeys.length === newKeys.length && oldKeys.every((key, index) => key === newKeys[index]);
+  if (sameParents) {
+    return;
+  }
+
+  // Resolve the graph (scope) that owns this node's incoming edges.
+  const graphPath: string[] = [];
+  let operationGraph: NodeMetadata | undefined = nodeMetadata;
+  while (operationGraph && !equals(operationGraph.graphId, 'root')) {
+    graphPath.push(operationGraph.graphId);
+    operationGraph = getRecordEntry(state.nodesMetadata, operationGraph.graphId);
+  }
+  let graph: WorkflowNode | null = state.graph;
+  for (const id of graphPath.reverse()) {
+    graph = graph?.children?.find((child) => child.id === id) ?? null;
+  }
+  if (!graph) {
+    return;
+  }
+
+  // Remove the existing connection edges that point at this node. We only touch
+  // run-after (BUTTON_EDGE) and scope-attachment (HEADING_EDGE) edges so other
+  // structural edges (footer/only/hidden) are preserved.
+  graph.edges = (graph.edges ?? []).filter(
+    (edge) => edge.target !== nodeId || (edge.type !== WORKFLOW_EDGE_TYPES.BUTTON_EDGE && edge.type !== WORKFLOW_EDGE_TYPES.HEADING_EDGE)
+  );
+
+  const pushEdge = (source: string, type?: (typeof WORKFLOW_EDGE_TYPES)[keyof typeof WORKFLOW_EDGE_TYPES]) => {
+    const edgeId = `${source}-${nodeId}`;
+    if (!graph?.edges?.some((edge) => edge.id === edgeId)) {
+      graph?.edges?.push(createWorkflowEdge(source, nodeId, type));
+    }
+  };
+
+  if (newKeys.length > 0) {
+    // Node runs after one or more sibling actions.
+    for (const source of newKeys) {
+      pushEdge(source);
+    }
+  } else if (equals(nodeMetadata.graphId, 'root')) {
+    // Top-level action with no run-after runs after the trigger.
+    const triggerNodeId = Object.entries(state.nodesMetadata).find(([, node]) => node?.isTrigger ?? false)?.[0];
+    if (triggerNodeId) {
+      pushEdge(triggerNodeId);
+    }
+  } else {
+    // Scoped action with no run-after attaches to its scope/subgraph header.
+    const headerNode = graph.children?.find(
+      (child) => child.type === WORKFLOW_NODE_TYPES.SCOPE_CARD_NODE || child.type === WORKFLOW_NODE_TYPES.SUBGRAPH_CARD_NODE
+    );
+    if (headerNode) {
+      pushEdge(headerNode.id, WORKFLOW_EDGE_TYPES.HEADING_EDGE);
+    }
+  }
+
+  // Keep isRoot metadata (and root run-after cleanup) in sync with the new edges.
+  applyIsRootNode(state, graph, state.nodesMetadata);
+};
+
 export const initialWorkflowState: WorkflowState = {
   workflowSpec: 'BJS',
   workflowKind: undefined,
@@ -114,6 +199,20 @@ export const workflowSlice = createSlice({
       }
       nodeOperation.description = description;
     },
+    replaceOperationDefinition: (
+      state: WorkflowState,
+      action: PayloadAction<{ nodeId: string; operationDefinition: LogicAppsV2.OperationDefinition }>
+    ) => {
+      const { nodeId, operationDefinition } = action.payload;
+      const existingOperation = getRecordEntry(state.operations, nodeId);
+      if (!existingOperation) {
+        return;
+      }
+      const oldRunAfter = (existingOperation as LogicAppsV2.ActionDefinition).runAfter ?? undefined;
+      state.operations[nodeId] = operationDefinition;
+      const newRunAfter = (operationDefinition as LogicAppsV2.ActionDefinition).runAfter ?? undefined;
+      reconcileRunAfterEdges(state, nodeId, oldRunAfter, newRunAfter);
+    },
     addNode: (state: WorkflowState, action: PayloadAction<AddNodePayload>) => {
       if (!state.graph) {
         return; // log exception
@@ -1059,6 +1158,7 @@ export const workflowSlice = createSlice({
         wrapNodesInScope,
         pasteScopeNode,
         setNodeDescription,
+        replaceOperationDefinition,
         updateRunAfter,
         removeRunAfter,
         addRunAfter,
@@ -1092,6 +1192,7 @@ export const {
   deleteMcpServer,
   updateNodeSizes,
   setNodeDescription,
+  replaceOperationDefinition,
   toggleCollapsedGraphId,
   addSwitchCase,
   addAgentTool,
diff --git a/libs/designer-v2/src/lib/ui/panel/nodeDetailsPanel/tabs/__test__/codeViewTab.spec.tsx b/libs/designer-v2/src/lib/ui/panel/nodeDetailsPanel/tabs/__test__/codeViewTab.spec.tsx
new file mode 100644
index 00000000000..d6def243bd6
--- /dev/null
+++ b/libs/designer-v2/src/lib/ui/panel/nodeDetailsPanel/tabs/__test__/codeViewTab.spec.tsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import { describe, test, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor, cleanup } from '@testing-library/react';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { Provider } from 'react-redux';
+import { CodeViewTab } from '../codeViewTab';
+import * as serializer from '../../../../../core/actions/bjsworkflow/serializer';
+import * as updateNodeModule from '../../../../../core/actions/bjsworkflow/updateNodeFromCodeView';
+import * as designerOptionsSelectors from '../../../../../core/state/designerOptions/designerOptionsSelectors';
+import * as workflowSelectors from '../../../../../core/state/workflow/workflowSelectors';
+
+// Lightweight stand-ins for the designer-ui peek components so we can drive the container's
+// callbacks directly and assert on the props it passes down.
+vi.mock('@microsoft/designer-ui', async (importOriginal) => {
+  const original = (await importOriginal()) as Record<string, unknown>;
+  return {
+    ...original,
+    Peek: ({ input }: { input: string }) => <div data-testid="peek">{input}</div>,
+    EditableCodeView: ({ value, onChange, onSave, onDiscard, isDirty, isSaving, errorMessage, labels }: any) => (
+      <div data-testid="editable-code-view">
+        <textarea data-testid="editor" value={value} onChange={(e) => onChange(e.target.value)} />
+        <span data-testid="dirty">{String(!!isDirty)}</span>
+        <span data-testid="saving">{String(!!isSaving)}</span>
+        <span data-testid="error">{errorMessage ?? ''}</span>
+        <button type="button" data-testid="save" onClick={onSave}>
+          {labels.save}
+        </button>
+        <button type="button" data-testid="discard" onClick={onDiscard}>
+          {labels.discard}
+        </button>
+      </div>
+    ),
+  };
+});
+
+vi.mock('../../../../../core/actions/bjsworkflow/serializer', () => ({
+  serializeOperation: vi.fn(),
+}));
+
+vi.mock('../../../../../core/actions/bjsworkflow/updateNodeFromCodeView', () => ({
+  updateNodeFromCodeView: vi.fn(() => ({ type: 'mock/updateNodeFromCodeView' })),
+}));
+
+const mockSerialize = vi.mocked(serializer.serializeOperation);
+const mockUpdateNode = vi.mocked(updateNodeModule.updateNodeFromCodeView);
+
+const originalDefinition = { type: 'Compose', inputs: { value: 'original' } };
+
+const renderTab = (dispatchImpl?: (...args: any[]) => any) => {
+  const dispatch = vi.fn(dispatchImpl ?? (() => ({ unwrap: () => Promise.resolve() })));
+  const store = {
+    getState: () => ({}),
+    dispatch,
+    subscribe: () => () => undefined,
+    replaceReducer: () => undefined,
+  } as any;
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  const utils = render(
+    <Provider store={store}>
+      <QueryClientProvider client={queryClient}>
+        <CodeViewTab nodeId="Compose" {...({} as any)} />
+      </QueryClientProvider>
+    </Provider>
+  );
+  return { dispatch, ...utils };
+};
+
+describe('CodeViewTab', () => {
+  beforeEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+    mockSerialize.mockResolvedValue(originalDefinition as any);
+    vi.spyOn(designerOptionsSelectors, 'useReadOnly').mockReturnValue(false);
+    vi.spyOn(designerOptionsSelectors, 'useEditableCodeViewEnabled').mockReturnValue(true);
+    vi.spyOn(workflowSelectors, 'useActionMetadata').mockReturnValue({ inputs: {} } as any);
+    mockUpdateNode.mockReturnValue({ type: 'mock/updateNodeFromCodeView' } as any);
+  });
+
+  test('renders the editable editor seeded with the serialized operation', async () => {
+    renderTab();
+    const editor = (await screen.findByTestId('editor')) as HTMLTextAreaElement;
+    expect(editor.value).toBe(JSON.stringify(originalDefinition, null, 2));
+    expect(screen.getByTestId('dirty')).toHaveTextContent('false');
+  });
+
+  test('renders a read-only peek when the designer is read-only', async () => {
+    vi.spyOn(designerOptionsSelectors, 'useReadOnly').mockReturnValue(true);
+    renderTab();
+    const peek = await screen.findByTestId('peek');
+    expect(peek.textContent).toBe(JSON.stringify(originalDefinition, null, 2));
+    expect(screen.queryByTestId('editable-code-view')).not.toBeInTheDocument();
+  });
+
+  test('renders a read-only peek when the editable code view host option is disabled', async () => {
+    vi.spyOn(designerOptionsSelectors, 'useEditableCodeViewEnabled').mockReturnValue(false);
+    renderTab();
+    const peek = await screen.findByTestId('peek');
+    expect(peek.textContent).toBe(JSON.stringify(originalDefinition, null, 2));
+    expect(screen.queryByTestId('editable-code-view')).not.toBeInTheDocument();
+  });
+
+  test('marks the editor dirty and surfaces a validation error for invalid JSON', async () => {
+    renderTab();
+    const editor = await screen.findByTestId('editor');
+    fireEvent.change(editor, { target: { value: '{ not valid json' } });
+    expect(screen.getByTestId('dirty')).toHaveTextContent('true');
+    expect(screen.getByTestId('error')).toHaveTextContent('Invalid JSON');
+  });
+
+  test('discard reverts edits back to the serialized content', async () => {
+    renderTab();
+    const editor = (await screen.findByTestId('editor')) as HTMLTextAreaElement;
+    fireEvent.change(editor, { target: { value: '{"type":"Compose","inputs":{"value":"changed"}}' } });
+    expect(screen.getByTestId('dirty')).toHaveTextContent('true');
+    fireEvent.click(screen.getByTestId('discard'));
+    expect((screen.getByTestId('editor') as HTMLTextAreaElement).value).toBe(JSON.stringify(originalDefinition, null, 2));
+    expect(screen.getByTestId('dirty')).toHaveTextContent('false');
+  });
+
+  test('saving a valid edit dispatches updateNodeFromCodeView with the parsed operation', async () => {
+    const { dispatch } = renderTab();
+    const editor = await screen.findByTestId('editor');
+    const edited = { type: 'Compose', inputs: { value: 'changed' } };
+    fireEvent.change(editor, { target: { value: JSON.stringify(edited) } });
+
+    fireEvent.click(screen.getByTestId('save'));
+
+    await waitFor(() => expect(mockUpdateNode).toHaveBeenCalledTimes(1));
+    expect(mockUpdateNode).toHaveBeenCalledWith({ nodeId: 'Compose', serializedOperation: edited });
+    expect(dispatch).toHaveBeenCalledWith({ type: 'mock/updateNodeFromCodeView' });
+  });
+
+  test('does not dispatch when attempting to save invalid JSON', async () => {
+    renderTab();
+    const editor = await screen.findByTestId('editor');
+    fireEvent.change(editor, { target: { value: '{ broken' } });
+    fireEvent.click(screen.getByTestId('save'));
+    expect(mockUpdateNode).not.toHaveBeenCalled();
+  });
+});
diff --git a/libs/designer-v2/src/lib/ui/panel/nodeDetailsPanel/tabs/codeViewTab.tsx b/libs/designer-v2/src/lib/ui/panel/nodeDetailsPanel/tabs/codeViewTab.tsx
index ea87c9285d6..c09fd6e95f8 100644
--- a/libs/designer-v2/src/lib/ui/panel/nodeDetailsPanel/tabs/codeViewTab.tsx
+++ b/libs/designer-v2/src/lib/ui/panel/nodeDetailsPanel/tabs/codeViewTab.tsx
@@ -1,18 +1,28 @@
 import constants from '../../../../common/constants';
 import { serializeOperation } from '../../../../core/actions/bjsworkflow/serializer';
+import { updateNodeFromCodeView } from '../../../../core/actions/bjsworkflow/updateNodeFromCodeView';
+import { useReadOnly, useEditableCodeViewEnabled } from '../../../../core/state/designerOptions/designerOptionsSelectors';
 import { useActionMetadata } from '../../../../core/state/workflow/workflowSelectors';
-import type { RootState } from '../../../../core/store';
+import type { AppDispatch, RootState } from '../../../../core/store';
 import type { PanelTabFn, PanelTabProps } from '@microsoft/designer-ui';
-import { Peek } from '@microsoft/designer-ui';
+import { EditableCodeView, Peek } from '@microsoft/designer-ui';
 import { isNullOrEmpty } from '@microsoft/logic-apps-shared';
 import { useQuery } from '@tanstack/react-query';
-import { useSelector } from 'react-redux';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { useDispatch, useStore } from 'react-redux';
 
 export const CodeViewTab: React.FC<PanelTabProps> = (props) => {
   const { nodeId } = props;
+  const intl = useIntl();
+  const dispatch = useDispatch<AppDispatch>();
+  const readOnly = useReadOnly();
+  const editableCodeViewEnabled = useEditableCodeViewEnabled();
   const nodeMetaData = useActionMetadata(nodeId) as any;
-  const rootState = useSelector((state: RootState) => state);
-  const queryData = useQuery(['serialization', { nodeId }], () => serializeOperation(rootState, nodeId), {
+  // Read the store directly so that each (re)serialization—including the refetch after a
+  // save—reflects the latest state rather than a snapshot captured at render time.
+  const store = useStore<RootState>();
+  const queryData = useQuery(['serialization', { nodeId }], () => serializeOperation(store.getState(), nodeId), {
     retry: false,
     cacheTime: 0,
     refetchOnMount: false,
@@ -20,11 +30,97 @@ export const CodeViewTab: React.FC<PanelTabProps> = (props) => {
     refetchOnReconnect: false,
   });
 
-  const content = queryData.isLoading
-    ? 'Loading ...'
-    : JSON.stringify(isNullOrEmpty(queryData.data) ? { inputs: nodeMetaData?.inputs ?? {} } : queryData.data, null, 2);
+  const serializedContent = useMemo(
+    () => JSON.stringify(isNullOrEmpty(queryData.data) ? { inputs: nodeMetaData?.inputs ?? {} } : queryData.data, null, 2),
+    [queryData.data, nodeMetaData?.inputs]
+  );
 
-  return <Peek input={content} />;
+  const [editedContent, setEditedContent] = useState<string>(serializedContent);
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Re-sync the editor when the underlying serialization changes (e.g. node switch, external edits).
+  useEffect(() => {
+    setEditedContent(serializedContent);
+  }, [serializedContent]);
+
+  const isDirty = editedContent !== serializedContent;
+
+  const validationError = useMemo(() => {
+    if (!isDirty) {
+      return undefined;
+    }
+    try {
+      JSON.parse(editedContent);
+      return undefined;
+    } catch {
+      return intl.formatMessage({
+        defaultMessage: 'Invalid JSON. Fix the errors before saving.',
+        id: 'eaI2mF',
+        description: 'Validation error shown when the edited action code is not valid JSON',
+      });
+    }
+  }, [editedContent, isDirty, intl]);
+
+  const labels = useMemo(
+    () => ({
+      save: intl.formatMessage({ defaultMessage: 'Save', id: 'SUqh1Y', description: 'Button to save the edited action code' }),
+      saving: intl.formatMessage({
+        defaultMessage: 'Saving…',
+        id: 'OMW+Rg',
+        description: 'Label shown while saving the edited action code',
+      }),
+      discard: intl.formatMessage({
+        defaultMessage: 'Discard',
+        id: 'kWpQvf',
+        description: 'Button to discard edits made to the action code',
+      }),
+    }),
+    [intl]
+  );
+
+  const handleDiscard = useCallback(() => {
+    setEditedContent(serializedContent);
+  }, [serializedContent]);
+
+  const handleSave = useCallback(async () => {
+    if (validationError) {
+      return;
+    }
+    let parsed: any;
+    try {
+      parsed = JSON.parse(editedContent);
+    } catch {
+      return;
+    }
+    setIsSaving(true);
+    try {
+      await dispatch(updateNodeFromCodeView({ nodeId, serializedOperation: parsed })).unwrap();
+      await queryData.refetch();
+    } finally {
+      setIsSaving(false);
+    }
+  }, [dispatch, editedContent, nodeId, queryData, validationError]);
+
+  if (queryData.isLoading) {
+    return <Peek input={'Loading ...'} />;
+  }
+
+  if (readOnly || !editableCodeViewEnabled) {
+    return <Peek input={serializedContent} />;
+  }
+
+  return (
+    <EditableCodeView
+      value={editedContent}
+      onChange={setEditedContent}
+      onSave={handleSave}
+      onDiscard={handleDiscard}
+      isDirty={isDirty}
+      isSaving={isSaving}
+      errorMessage={validationError}
+      labels={labels}
+    />
+  );
 };
 
 export const codeViewTab: PanelTabFn = (intl, props) => ({