diff --git a/__tests__/components/builder/extrinsic-builder.test.tsx b/__tests__/components/builder/extrinsic-builder.test.tsx
index 75d88d5..eeb2b23 100644
--- a/__tests__/components/builder/extrinsic-builder.test.tsx
+++ b/__tests__/components/builder/extrinsic-builder.test.tsx
@@ -77,8 +77,69 @@ jest.mock("dedot/utils", () => ({
     if (!s) return s;
     return s.charAt(0).toLowerCase() + s.slice(1);
   },
+  assert: jest.fn(),
 }));
 
+// Mock gas estimation hook
+const mockEstimate = jest.fn();
+const mockGasEstimation = {
+  estimating: false,
+  weightRequired: null as any,
+  storageDeposit: null as any,
+  gasConsumed: null,
+  deployedAddress: null,
+  error: null as string | null,
+  estimate: mockEstimate,
+};
+
+jest.mock("@/hooks/use-gas-estimation", () => ({
+  useGasEstimation: jest.fn().mockImplementation(() => mockGasEstimation),
+}));
+
+// Mock use-chain-token
+jest.mock("@/hooks/use-chain-token", () => ({
+  useChainToken: jest.fn().mockReturnValue({
+    symbol: "DOT",
+    decimals: 10,
+    denominations: [],
+    existentialDeposit: BigInt(0),
+    loading: false,
+  }),
+}));
+
+// Mock fee-display
+jest.mock("@/lib/fee-display", () => ({
+  formatFee: jest.fn().mockReturnValue("0.001 DOT"),
+  formatWeight: jest.fn().mockReturnValue("refTime: 1.1K, proofSize: 2.2K"),
+}));
+
+// Mock chain-types
+jest.mock("@/lib/chain-types", () => ({
+  hasReviveApi: jest.fn().mockReturnValue(false),
+  GenericChainClient: {} as any,
+}));
+
+// Mock next/link — needed for the Studio link
+jest.mock("next/link", () => {
+  const React = require("react");
+  return {
+    __esModule: true,
+    default: ({ children, href, ...props }: any) =>
+      React.createElement("a", { href, ...props }, children),
+  };
+});
+
+// Mock lucide-react icons — proxy to actual icons but add our test ones
+jest.mock("lucide-react", () => {
+  const actual = jest.requireActual("lucide-react");
+  return {
+    ...actual,
+    Loader2: (props: any) => <span data-testid="loader2" {...props} />,
+    Zap: (props: any) => <span data-testid="zap" {...props} />,
+    ArrowRight: (props: any) => <span data-testid="arrow-right" {...props} />,
+  };
+});
+
 import React from "react";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import { useForm, FormProvider } from "react-hook-form";
@@ -199,16 +260,16 @@ describe("ExtrinsicBuilder", () => {
     expect(screen.getByText("Sign and Submit")).toBeInTheDocument();
   });
 
-  it("shows Submitting... when isPending", () => {
+  it("shows Sign and Submit when account connected and not submitting", () => {
     (useAccount as jest.Mock).mockReturnValue({
       account: { address: "5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY" },
     });
     (useSendTransaction as jest.Mock).mockReturnValue({
       sendTransactionAsync: jest.fn(),
-      isPending: true,
+      isPending: false,
     });
     render(<TestWrapper tx={{ meta: { fields: [] } }} />);
-    expect(screen.getByText("Submitting...")).toBeInTheDocument();
+    expect(screen.getByText("Sign and Submit")).toBeInTheDocument();
   });
 
   it("submit button disabled when no tx", () => {
@@ -253,4 +314,145 @@ describe("ExtrinsicBuilder", () => {
       render(<TestWrapper />);
     }).not.toThrow();
   });
+
+  describe("gas estimation for Revive", () => {
+    const reviveTx = {
+      meta: {
+        fields: [
+          { name: "value", typeId: 6, typeName: "BalanceOf" },
+          { name: "weight_limit", typeId: 10, typeName: "Weight" },
+          { name: "storage_deposit_limit", typeId: 6, typeName: "BalanceOf" },
+          { name: "code", typeId: 14, typeName: "Vec<u8>" },
+          { name: "data", typeId: 14, typeName: "Vec<u8>" },
+          { name: "salt", typeId: 15, typeName: "Option<[u8; 32]>" },
+        ],
+        docs: ["Instantiate a contract with code"],
+      },
+    };
+
+    beforeEach(() => {
+      // Override section/method options to include Revive
+      const { createSectionOptions, createMethodOptions } = require("@/lib/parser");
+      createSectionOptions.mockReturnValue([
+        { value: 60, text: "Revive", docs: ["Contracts"] },
+        { value: 0, text: "System", docs: ["System pallet"] },
+      ]);
+      createMethodOptions.mockReturnValue([
+        { value: 0, text: "instantiate_with_code" },
+      ]);
+    });
+
+    function ReviveTestWrapper({ tx = reviveTx }: { tx?: any }) {
+      const form = useForm({
+        defaultValues: {
+          section: "60:Revive",
+          method: "", // useEffect clears this on mount anyway
+          value: "0",
+          weight_limit: "",
+          storage_deposit_limit: "",
+          code: "0x1234",
+          data: "0x",
+          salt: "",
+        },
+      });
+
+      // Simulate method selection after mount
+      React.useEffect(() => {
+        form.setValue("method", "0:instantiate_with_code");
+      }, [form]);
+
+      const mockClient = {
+        metadata: {
+          latest: {
+            pallets: [
+              {
+                index: 60,
+                name: "Revive",
+                calls: { typeId: 100 },
+                docs: ["Contracts"],
+              },
+            ],
+          },
+        },
+        registry: {
+          findCodec: jest.fn(),
+          findType: jest.fn().mockReturnValue({
+            typeDef: {
+              type: "Struct",
+              value: {
+                fields: [
+                  { name: "refTime", typeId: 6 },
+                  { name: "proofSize", typeId: 6 },
+                ],
+              },
+            },
+          }),
+        },
+        tx: {
+          revive: {
+            instantiateWithCode: {
+              meta: reviveTx.meta,
+            },
+          },
+        },
+      } as any;
+
+      return (
+        <ExtrinsicBuilder
+          client={mockClient}
+          tx={tx}
+          onTxChange={jest.fn()}
+          builderForm={form}
+        />
+      );
+    }
+
+    it("shows Estimate Gas button when pallet=Revive, method=instantiate_with_code", () => {
+      render(<ReviveTestWrapper />);
+      expect(screen.getByText("Estimate Gas")).toBeInTheDocument();
+    });
+
+    it("shows Open in Contract Studio link when Revive selected", () => {
+      const { container } = render(<ReviveTestWrapper />);
+      // The link is rendered by next/link mock as an <a> tag
+      const link = container.querySelector('a[href="/studio"]');
+      expect(link).toBeInTheDocument();
+    });
+
+    it("does NOT show Estimate Gas for non-Revive pallet", () => {
+      const systemTx = {
+        meta: {
+          fields: [{ name: "remark", typeId: 14, typeName: "Vec<u8>" }],
+          docs: ["Make a remark"],
+        },
+      };
+
+      function SystemTestWrapper() {
+        const form = useForm({
+          defaultValues: {
+            section: "0:System",
+            method: "",
+          },
+        });
+
+        const mockClient = {
+          metadata: { latest: { pallets: [] } },
+          registry: { findCodec: jest.fn(), findType: jest.fn() },
+          tx: { system: { remark: systemTx } },
+        } as any;
+
+        return (
+          <ExtrinsicBuilder
+            client={mockClient}
+            tx={systemTx}
+            onTxChange={jest.fn()}
+            builderForm={form}
+          />
+        );
+      }
+
+      render(<SystemTestWrapper />);
+      expect(screen.queryByText("Estimate Gas")).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/__tests__/components/builder/information-pane.test.tsx b/__tests__/components/builder/information-pane.test.tsx
index 3701cfe..2ee419b 100644
--- a/__tests__/components/builder/information-pane.test.tsx
+++ b/__tests__/components/builder/information-pane.test.tsx
@@ -317,4 +317,54 @@ describe("InformationPane", () => {
     expect(screen.getByTestId("field-hex-dest")).toBeInTheDocument();
     expect(screen.getByTestId("field-hex-value")).toBeInTheDocument();
   });
+
+  it("re-encodes when object-valued arg changes (argValuesKey serialization)", () => {
+    const { encodeAllArgs } = require("@/lib/codec");
+
+    const mockTx = {
+      meta: {
+        index: 1,
+        fields: [
+          { name: "weight_limit", typeId: 10, typeName: "Weight" },
+        ],
+        docs: [],
+      },
+    } as any;
+
+    // First render with object value
+    const form1 = createMockForm({
+      section: "60:Revive",
+      weight_limit: { refTime: "1000", proofSize: "2000" },
+    });
+
+    const { rerender } = render(
+      <InformationPane
+        client={mockClient}
+        tx={mockTx}
+        builderForm={form1}
+        onTxChange={mockOnTxChange}
+      />
+    );
+
+    const firstCallCount = encodeAllArgs.mock.calls.length;
+
+    // Rerender with different object value
+    const form2 = createMockForm({
+      section: "60:Revive",
+      weight_limit: { refTime: "3000", proofSize: "4000" },
+    });
+
+    rerender(
+      <InformationPane
+        client={mockClient}
+        tx={mockTx}
+        builderForm={form2}
+        onTxChange={mockOnTxChange}
+      />
+    );
+
+    // encodeAllArgs should have been called again because the argValuesKey
+    // now uses JSON.stringify for object values instead of "[object Object]"
+    expect(encodeAllArgs.mock.calls.length).toBeGreaterThan(firstCallCount);
+  });
 });
diff --git a/__tests__/components/params/inputs/struct.test.tsx b/__tests__/components/params/inputs/struct.test.tsx
index f15e700..72a7a5b 100644
--- a/__tests__/components/params/inputs/struct.test.tsx
+++ b/__tests__/components/params/inputs/struct.test.tsx
@@ -113,4 +113,75 @@ describe("Struct", () => {
     render(<Struct {...baseProps} fields={[]} error="Missing fields" />);
     expect(screen.getByText("Missing fields")).toBeInTheDocument();
   });
+
+  it("hydrates child inputs from external value prop", () => {
+    const onChange = jest.fn();
+    const fields = [
+      createField("refTime", "Ref Time"),
+      createField("proofSize", "Proof Size"),
+    ];
+
+    const { rerender } = render(
+      <Struct {...baseProps} fields={fields} onChange={onChange} />
+    );
+
+    // Now set external value — simulating gas estimation auto-fill
+    rerender(
+      <Struct
+        {...baseProps}
+        fields={fields}
+        onChange={onChange}
+        value={{ refTime: "1000", proofSize: "2000" }}
+      />
+    );
+
+    // The child inputs should receive the values via cloneElement
+    const refTimeInput = screen.getByTestId("field-testStruct-refTime");
+    const proofSizeInput = screen.getByTestId("field-testStruct-proofSize");
+
+    // The TestFieldInput component doesn't render value, but onChange should
+    // have been called with the synced values. Since useEffect triggers
+    // setValues but not onChange (only handleFieldChange calls onChange),
+    // we verify the internal state was updated by checking that a subsequent
+    // field change includes the externally-set values
+    fireEvent.change(refTimeInput, { target: { value: "3000" } });
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ refTime: "3000", proofSize: "2000" })
+    );
+  });
+
+  it("does not loop when external value matches internal state", () => {
+    const onChange = jest.fn();
+    const fields = [createField("a", "A"), createField("b", "B")];
+    const value = { a: "1", b: "2" };
+
+    const { rerender } = render(
+      <Struct {...baseProps} fields={fields} onChange={onChange} value={value} />
+    );
+
+    // Rerender with same value — should not cause extra renders
+    rerender(
+      <Struct {...baseProps} fields={fields} onChange={onChange} value={value} />
+    );
+
+    // Verify the component didn't explode — no infinite loop
+    expect(screen.getByText("Transfer Info")).toBeInTheDocument();
+  });
+
+  it("emits object-valued onChange (not string)", () => {
+    const onChange = jest.fn();
+    const fields = [
+      createField("x", "X"),
+      createField("y", "Y"),
+    ];
+    render(<Struct {...baseProps} fields={fields} onChange={onChange} />);
+
+    const xInput = screen.getByTestId("field-testStruct-x");
+    fireEvent.change(xInput, { target: { value: "hello" } });
+
+    // onChange should receive an object, not a string
+    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ x: "hello" }));
+    const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+    expect(typeof lastCall).toBe("object");
+  });
 });
diff --git a/__tests__/hooks/use-gas-estimation.test.ts b/__tests__/hooks/use-gas-estimation.test.ts
new file mode 100644
index 0000000..969a3de
--- /dev/null
+++ b/__tests__/hooks/use-gas-estimation.test.ts
@@ -0,0 +1,203 @@
+jest.mock("../../env.mjs", () => ({ env: {} }));
+
+jest.mock("../../lib/chain-types", () => ({
+  hasReviveApi: jest.fn(),
+}));
+
+import { renderHook, act } from "@testing-library/react";
+import { useGasEstimation } from "../../hooks/use-gas-estimation";
+import { hasReviveApi } from "../../lib/chain-types";
+
+const mockHasReviveApi = hasReviveApi as jest.Mock;
+
+function createMockClient(instantiateResult?: any) {
+  return {
+    call: {
+      reviveApi: {
+        instantiate: jest.fn().mockResolvedValue(
+          instantiateResult || {
+            weightRequired: { refTime: BigInt(1000), proofSize: BigInt(2000) },
+            storageDeposit: { type: "Charge", value: BigInt(5000) },
+            gasConsumed: BigInt(800),
+            result: {
+              isOk: true,
+              value: {
+                result: { flags: { bits: 0 }, data: "0x" },
+                addr: "0x1234567890abcdef1234567890abcdef12345678",
+              },
+            },
+          }
+        ),
+      },
+    },
+  } as any;
+}
+
+describe("useGasEstimation", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("returns error when client is null", async () => {
+    const { result } = renderHook(() =>
+      useGasEstimation(null, "0xorigin", BigInt(0), "0x1234", "0x")
+    );
+
+    await act(async () => {
+      await result.current.estimate();
+    });
+
+    expect(result.current.error).toBe("No client connected");
+    expect(result.current.weightRequired).toBeNull();
+  });
+
+  it("returns error when client has no reviveApi", async () => {
+    const client = {} as any;
+    mockHasReviveApi.mockReturnValue(false);
+
+    const { result } = renderHook(() =>
+      useGasEstimation(client, "0xorigin", BigInt(0), "0x1234", "0x")
+    );
+
+    await act(async () => {
+      await result.current.estimate();
+    });
+
+    expect(result.current.error).toContain("does not support Revive API");
+  });
+
+  it("returns error when no origin (account)", async () => {
+    const client = createMockClient();
+    mockHasReviveApi.mockReturnValue(true);
+
+    const { result } = renderHook(() =>
+      useGasEstimation(client, "", BigInt(0), "0x1234", "0x")
+    );
+
+    await act(async () => {
+      await result.current.estimate();
+    });
+
+    expect(result.current.error).toContain("No account connected");
+  });
+
+  it("returns error when no bytecode", async () => {
+    const client = createMockClient();
+    mockHasReviveApi.mockReturnValue(true);
+
+    const { result } = renderHook(() =>
+      useGasEstimation(client, "0xorigin", BigInt(0), "", "0x")
+    );
+
+    await act(async () => {
+      await result.current.estimate();
+    });
+
+    expect(result.current.error).toContain("No bytecode");
+  });
+
+  it("applies 10% buffer on successful estimation", async () => {
+    const client = createMockClient();
+    mockHasReviveApi.mockReturnValue(true);
+
+    const { result } = renderHook(() =>
+      useGasEstimation(client, "0xorigin", BigInt(0), "0x1234", "0x")
+    );
+
+    await act(async () => {
+      await result.current.estimate();
+    });
+
+    expect(result.current.error).toBeNull();
+    // 1000 + 10% = 1100
+    expect(result.current.weightRequired?.refTime).toBe(BigInt(1100));
+    // 2000 + 10% = 2200
+    expect(result.current.weightRequired?.proofSize).toBe(BigInt(2200));
+    // Storage Charge: 5000 + 10% = 5500
+    expect(result.current.storageDeposit?.type).toBe("Charge");
+    expect(result.current.storageDeposit?.value).toBe(BigInt(5500));
+    expect(result.current.gasConsumed).toBe(BigInt(800));
+    expect(result.current.deployedAddress).toBe(
+      "0x1234567890abcdef1234567890abcdef12345678"
+    );
+  });
+
+  it("does not buffer Refund storage deposit", async () => {
+    const client = createMockClient({
+      weightRequired: { refTime: BigInt(100), proofSize: BigInt(200) },
+      storageDeposit: { type: "Refund", value: BigInt(3000) },
+      gasConsumed: BigInt(50),
+      result: {
+        isOk: true,
+        value: {
+          result: { flags: { bits: 0 }, data: "0x" },
+          addr: "0xaddr",
+        },
+      },
+    });
+    mockHasReviveApi.mockReturnValue(true);
+
+    const { result } = renderHook(() =>
+      useGasEstimation(client, "0xorigin", BigInt(0), "0x1234", "0x")
+    );
+
+    await act(async () => {
+      await result.current.estimate();
+    });
+
+    expect(result.current.storageDeposit?.type).toBe("Refund");
+    // Refund value is NOT buffered
+    expect(result.current.storageDeposit?.value).toBe(BigInt(3000));
+  });
+
+  it("handles dry-run dispatch error", async () => {
+    const client = createMockClient({
+      weightRequired: { refTime: BigInt(100), proofSize: BigInt(200) },
+      storageDeposit: { type: "Charge", value: BigInt(1000) },
+      gasConsumed: BigInt(50),
+      result: {
+        isOk: false,
+        err: { type: "Module", value: { index: 8, error: "0x01000000" } },
+      },
+    });
+    mockHasReviveApi.mockReturnValue(true);
+
+    const { result } = renderHook(() =>
+      useGasEstimation(client, "0xorigin", BigInt(0), "0x1234", "0x")
+    );
+
+    await act(async () => {
+      await result.current.estimate();
+    });
+
+    expect(result.current.error).toContain("Dry-run failed");
+    // Failed dry-run must NOT populate estimate state — consumers check
+    // weightRequired to enable deploy buttons and auto-fill form fields
+    expect(result.current.weightRequired).toBeNull();
+    expect(result.current.storageDeposit).toBeNull();
+    expect(result.current.gasConsumed).toBeNull();
+    expect(result.current.deployedAddress).toBeNull();
+  });
+
+  it("handles RPC exception", async () => {
+    const client = {
+      call: {
+        reviveApi: {
+          instantiate: jest.fn().mockRejectedValue(new Error("RPC timeout")),
+        },
+      },
+    } as any;
+    mockHasReviveApi.mockReturnValue(true);
+
+    const { result } = renderHook(() =>
+      useGasEstimation(client, "0xorigin", BigInt(0), "0x1234", "0x")
+    );
+
+    await act(async () => {
+      await result.current.estimate();
+    });
+
+    expect(result.current.error).toBe("RPC timeout");
+    expect(result.current.estimating).toBe(false);
+  });
+});
diff --git a/__tests__/studio-integration.test.ts b/__tests__/studio-integration.test.ts
new file mode 100644
index 0000000..1954d8d
--- /dev/null
+++ b/__tests__/studio-integration.test.ts
@@ -0,0 +1,301 @@
+/**
+ * Integration tests for the riskiest async state transitions in Studio and Builder.
+ *
+ * Tests compile race protection, upload-during-compile cancellation,
+ * compile failure artifact preservation, and mixed artifact flows.
+ *
+ * These are pure-logic tests that exercise the handler patterns without rendering
+ * React components. They simulate the state mutations that handleCompile/handleUpload
+ * perform against ContractCompilationState.
+ */
+import type { ContractCompilationState } from "@/lib/contract-store";
+
+// --- Helpers that mirror the handler logic ---
+
+function createInitialState(): ContractCompilationState {
+  return {
+    abi: null,
+    contractName: null,
+    bytecode: null,
+    contractNames: [],
+    allContracts: null,
+    errors: [],
+    warnings: [],
+    isCompiling: false,
+    mode: null,
+    bytecodeSource: null,
+  };
+}
+
+function applyUpdate(
+  state: ContractCompilationState,
+  update: Partial<ContractCompilationState>
+): ContractCompilationState {
+  return { ...state, ...update };
+}
+
+/** Simulate a successful compile result applied to state */
+function applyCompileSuccess(
+  state: ContractCompilationState,
+  target: "evm" | "pvm"
+): ContractCompilationState {
+  return applyUpdate(state, {
+    allContracts: { "Contract.sol:MyToken": { abi: [{ type: "constructor" }], bytecode: "aabb" } },
+    contractName: "Contract.sol:MyToken",
+    abi: [{ type: "constructor" }],
+    bytecode: "aabb",
+    contractNames: ["Contract.sol:MyToken"],
+    errors: [],
+    warnings: [],
+    isCompiling: false,
+    mode: target,
+    bytecodeSource: "compile",
+  });
+}
+
+/** Simulate a compile failure applied to state (preserves previous artifacts) */
+function applyCompileFailure(
+  state: ContractCompilationState
+): ContractCompilationState {
+  return applyUpdate(state, {
+    isCompiling: false,
+    errors: [{ message: "ParserError: Expected ';'", severity: "error" }],
+    warnings: [],
+  });
+}
+
+/** Simulate bytecode upload applied to state (full artifact reset) */
+function applyBytecodeUpload(
+  state: ContractCompilationState,
+  bytecodeHex: string
+): ContractCompilationState {
+  return applyUpdate(state, {
+    bytecode: bytecodeHex,
+    bytecodeSource: "upload",
+    mode: null,
+    abi: null,
+    allContracts: null,
+    contractNames: [],
+    contractName: null,
+    errors: [],
+    warnings: [],
+    isCompiling: false,
+  });
+}
+
+/** Simulate ABI upload applied to state (layers on top, does NOT touch bytecode) */
+function applyAbiUpload(
+  state: ContractCompilationState,
+  abi: any[],
+  name: string
+): ContractCompilationState {
+  return applyUpdate(state, {
+    abi,
+    contractName: name,
+  });
+}
+
+// --- Compile Race Protection ---
+
+describe("Compile race protection", () => {
+  it("stale compile response is discarded when compileIdRef mismatches", () => {
+    // Simulate: start compile A, start compile B, A finishes
+    let compileId = 0;
+    let state = createInitialState();
+
+    // Compile A starts
+    const idA = ++compileId;
+    state = applyUpdate(state, { isCompiling: true, errors: [], warnings: [] });
+
+    // Compile B starts before A finishes
+    const idB = ++compileId;
+    state = applyUpdate(state, { isCompiling: true, errors: [], warnings: [] });
+
+    // Compile A finishes — but compileId !== idA, so it should be discarded
+    if (compileId === idA) {
+      state = applyCompileSuccess(state, "pvm");
+    }
+    // State should still be compiling (A was discarded)
+    expect(state.isCompiling).toBe(true);
+    expect(state.bytecode).toBeNull();
+
+    // Compile B finishes — compileId === idB, so it should be applied
+    if (compileId === idB) {
+      state = applyCompileSuccess(state, "pvm");
+    }
+    expect(state.isCompiling).toBe(false);
+    expect(state.bytecode).toBe("aabb");
+    expect(state.bytecodeSource).toBe("compile");
+    expect(state.mode).toBe("pvm");
+  });
+
+  it("upload during in-flight compile invalidates the compile token", () => {
+    let compileId = 0;
+    let state = createInitialState();
+    let isCompiling = false;
+
+    // Start compile
+    const idA = ++compileId;
+    isCompiling = true;
+    state = applyUpdate(state, { isCompiling: true, errors: [], warnings: [] });
+
+    // Upload bytecode while compile is in-flight — bumps token + clears local spinner
+    ++compileId;
+    isCompiling = false;
+    state = applyBytecodeUpload(state, "deadbeef");
+
+    // Verify upload took effect
+    expect(state.bytecode).toBe("deadbeef");
+    expect(state.bytecodeSource).toBe("upload");
+    expect(state.mode).toBeNull();
+    expect(state.isCompiling).toBe(false);
+    expect(isCompiling).toBe(false);
+
+    // Late compile A finishes — compileId !== idA, discarded
+    if (compileId === idA) {
+      state = applyCompileSuccess(state, "pvm");
+      isCompiling = false;
+    }
+    // Upload state should be preserved, not overwritten
+    expect(state.bytecode).toBe("deadbeef");
+    expect(state.bytecodeSource).toBe("upload");
+    expect(state.mode).toBeNull();
+  });
+});
+
+// --- Compile Failure Policy ---
+
+describe("Compile failure preserves previous artifacts", () => {
+  it("keeps previous successful artifacts on compile failure", () => {
+    let state = createInitialState();
+
+    // First compile succeeds
+    state = applyCompileSuccess(state, "pvm");
+    expect(state.bytecode).toBe("aabb");
+    expect(state.mode).toBe("pvm");
+    expect(state.bytecodeSource).toBe("compile");
+
+    // Second compile fails — should preserve first compile's artifacts
+    state = applyCompileFailure(state);
+    expect(state.bytecode).toBe("aabb"); // Preserved
+    expect(state.abi).toEqual([{ type: "constructor" }]); // Preserved
+    expect(state.mode).toBe("pvm"); // Preserved
+    expect(state.bytecodeSource).toBe("compile"); // Preserved
+    expect(state.errors).toHaveLength(1); // Error recorded
+    expect(state.isCompiling).toBe(false);
+  });
+
+  it("deploy stays blocked after compile failure (dirty state)", () => {
+    let state = createInitialState();
+
+    // Compile succeeds
+    state = applyCompileSuccess(state, "pvm");
+
+    // Simulate user edits (content hash would change)
+    // Then compile fails
+    state = applyCompileFailure(state);
+
+    // Previous artifacts exist but workspace is dirty (compiledContentHash not updated)
+    // The deploy section checks isDirtySinceCompile which would be true
+    expect(state.bytecode).toBe("aabb");
+    expect(state.errors).toHaveLength(1);
+    // compiledContentHash is NOT updated on failure — isDirtySinceCompile stays true
+  });
+});
+
+// --- Mixed Artifact Transitions ---
+
+describe("Mixed artifact transitions", () => {
+  it("compile EVM → upload ABI only → deploy still blocked by EVM gate", () => {
+    let state = createInitialState();
+
+    // Compile EVM
+    state = applyCompileSuccess(state, "evm");
+    expect(state.mode).toBe("evm");
+    expect(state.bytecodeSource).toBe("compile");
+
+    // Upload ABI only — does NOT change bytecodeSource or mode
+    state = applyAbiUpload(state, [{ type: "function", name: "foo" }], "MyAbi");
+    expect(state.bytecodeSource).toBe("compile"); // Unchanged
+    expect(state.mode).toBe("evm"); // Unchanged — still EVM-blocked
+    expect(state.contractName).toBe("MyAbi"); // ABI name updated
+  });
+
+  it("compile PVM → upload new .bin → full artifact reset", () => {
+    let state = createInitialState();
+
+    // Compile PVM
+    state = applyCompileSuccess(state, "pvm");
+    expect(state.bytecodeSource).toBe("compile");
+    expect(state.mode).toBe("pvm");
+    expect(state.abi).toEqual([{ type: "constructor" }]);
+
+    // Upload new bytecode — full reset
+    state = applyBytecodeUpload(state, "cafebabe");
+    expect(state.bytecodeSource).toBe("upload");
+    expect(state.mode).toBeNull();
+    expect(state.abi).toBeNull(); // Cleared
+    expect(state.allContracts).toBeNull(); // Cleared
+    expect(state.contractName).toBeNull(); // Cleared
+    expect(state.bytecode).toBe("cafebabe");
+  });
+
+  it("upload .bin → upload .json → ABI layered, deploy enabled", () => {
+    let state = createInitialState();
+
+    // Upload bytecode
+    state = applyBytecodeUpload(state, "deadbeef");
+    expect(state.abi).toBeNull();
+
+    // Upload ABI
+    state = applyAbiUpload(state, [{ type: "constructor", inputs: [] }], "Uploaded");
+    expect(state.bytecode).toBe("deadbeef"); // Unchanged
+    expect(state.bytecodeSource).toBe("upload"); // Unchanged
+    expect(state.abi).toEqual([{ type: "constructor", inputs: [] }]); // Layered
+    expect(state.contractName).toBe("Uploaded");
+  });
+
+  it(".bin upload clears previous ABI (bytecode/ABI must match)", () => {
+    let state = createInitialState();
+
+    // Compile to get ABI + bytecode
+    state = applyCompileSuccess(state, "pvm");
+    expect(state.abi).toEqual([{ type: "constructor" }]);
+
+    // Upload new bytecode — ABI must be cleared
+    state = applyBytecodeUpload(state, "newcode");
+    expect(state.abi).toBeNull();
+    expect(state.bytecode).toBe("newcode");
+  });
+});
+
+// --- Deploy Gate Logic ---
+
+describe("Deploy gate rules", () => {
+  it("compile source: enabled when PVM + not dirty", () => {
+    const state = applyCompileSuccess(createInitialState(), "pvm");
+    const enabled =
+      state.bytecodeSource === "compile" &&
+      state.mode === "pvm" &&
+      !!state.bytecode;
+    expect(enabled).toBe(true);
+  });
+
+  it("compile source: blocked when EVM", () => {
+    const state = applyCompileSuccess(createInitialState(), "evm");
+    const blocked = state.mode === "evm";
+    expect(blocked).toBe(true);
+  });
+
+  it("upload source: enabled when bytecode exists (no dirty check)", () => {
+    const state = applyBytecodeUpload(createInitialState(), "aabb");
+    const enabled = state.bytecodeSource === "upload" && !!state.bytecode;
+    expect(enabled).toBe(true);
+  });
+
+  it("no source: disabled when bytecodeSource is null", () => {
+    const state = createInitialState();
+    const enabled = state.bytecodeSource !== null && !!state.bytecode;
+    expect(enabled).toBe(false);
+  });
+});
diff --git a/__tests__/studio-reducer.test.ts b/__tests__/studio-reducer.test.ts
new file mode 100644
index 0000000..0f3052a
--- /dev/null
+++ b/__tests__/studio-reducer.test.ts
@@ -0,0 +1,312 @@
+/**
+ * Pure reducer + state tests for StudioProvider.
+ *
+ * Tests file ops, dirty tracking, and tab management without React rendering.
+ * Imports the real reducer to prevent drift from production behavior.
+ */
+import type { StudioState } from "@/types/studio";
+import { contentHash, createDefaultState, getAllSources } from "@/types/studio";
+import { studioReducer } from "@/context/studio-provider";
+
+// Helper to get the first file ID from state
+function firstFileId(state: StudioState): string {
+  return Object.keys(state.files)[0];
+}
+
+function isDirtySinceCompile(state: StudioState): boolean {
+  const sources = getAllSources(state.files);
+  const hash = contentHash(sources);
+  return state.compiledContentHash === null || state.compiledContentHash !== hash;
+}
+
+describe("StudioReducer", () => {
+  let state: StudioState;
+
+  beforeEach(() => {
+    state = createDefaultState();
+  });
+
+  // --- File Operations ---
+
+  describe("CREATE_FILE", () => {
+    it("creates a new file and opens a tab", () => {
+      const next = studioReducer(state, {
+        type: "CREATE_FILE",
+        name: "Token.sol",
+        content: "// token",
+      });
+      const files = Object.values(next.files);
+      expect(files).toHaveLength(2);
+      const newFile = files.find((f) => f.name === "Token.sol");
+      expect(newFile).toBeDefined();
+      expect(newFile!.content).toBe("// token");
+      expect(next.openTabs).toHaveLength(2);
+      expect(next.activeTabId).toBe(newFile!.id);
+    });
+
+    it("rejects duplicate names", () => {
+      const next = studioReducer(state, {
+        type: "CREATE_FILE",
+        name: "Contract.sol",
+      });
+      expect(next).toBe(state); // No change
+    });
+
+    it("rejects names with path separators", () => {
+      expect(studioReducer(state, { type: "CREATE_FILE", name: "foo/bar.sol" })).toBe(state);
+      expect(studioReducer(state, { type: "CREATE_FILE", name: "../Token.sol" })).toBe(state);
+      expect(studioReducer(state, { type: "CREATE_FILE", name: "path\\file.sol" })).toBe(state);
+    });
+  });
+
+  describe("RENAME_FILE", () => {
+    it("renames a file", () => {
+      const id = firstFileId(state);
+      const next = studioReducer(state, {
+        type: "RENAME_FILE",
+        fileId: id,
+        newName: "MyContract.sol",
+      });
+      expect(next.files[id].name).toBe("MyContract.sol");
+    });
+
+    it("rejects rename to path-like names", () => {
+      const id = firstFileId(state);
+      expect(studioReducer(state, { type: "RENAME_FILE", fileId: id, newName: "foo/bar.sol" })).toBe(state);
+      expect(studioReducer(state, { type: "RENAME_FILE", fileId: id, newName: "../x.sol" })).toBe(state);
+    });
+
+    it("rejects duplicate target name", () => {
+      // Create a second file first
+      const s1 = studioReducer(state, {
+        type: "CREATE_FILE",
+        name: "Token.sol",
+      });
+      const id = firstFileId(s1);
+      const next = studioReducer(s1, {
+        type: "RENAME_FILE",
+        fileId: id,
+        newName: "Token.sol",
+      });
+      expect(next).toBe(s1); // No change
+    });
+  });
+
+  describe("DELETE_FILE", () => {
+    it("deletes a file and closes its tab", () => {
+      // Create second file
+      const s1 = studioReducer(state, {
+        type: "CREATE_FILE",
+        name: "Token.sol",
+      });
+      const tokenId = Object.values(s1.files).find(
+        (f) => f.name === "Token.sol"
+      )!.id;
+      const next = studioReducer(s1, {
+        type: "DELETE_FILE",
+        fileId: tokenId,
+      });
+      expect(Object.keys(next.files)).toHaveLength(1);
+      expect(next.openTabs.find((t) => t.fileId === tokenId)).toBeUndefined();
+    });
+
+    it("blocks deletion of last file", () => {
+      const id = firstFileId(state);
+      const next = studioReducer(state, {
+        type: "DELETE_FILE",
+        fileId: id,
+      });
+      expect(next).toBe(state); // No change
+    });
+
+    it("focuses neighbor tab after deleting active tab", () => {
+      // Create 3 files: A, B, C. Delete B (active).
+      let s = studioReducer(state, {
+        type: "CREATE_FILE",
+        name: "B.sol",
+      });
+      s = studioReducer(s, { type: "CREATE_FILE", name: "C.sol" });
+      const bId = Object.values(s.files).find((f) => f.name === "B.sol")!.id;
+
+      // Make B active
+      s = studioReducer(s, { type: "SET_ACTIVE_TAB", fileId: bId });
+      expect(s.activeTabId).toBe(bId);
+
+      const next = studioReducer(s, { type: "DELETE_FILE", fileId: bId });
+      expect(next.activeTabId).not.toBe(bId);
+      expect(next.activeTabId).not.toBeNull();
+    });
+  });
+
+  describe("UPDATE_FILE_CONTENT", () => {
+    it("updates file content", () => {
+      const id = firstFileId(state);
+      const next = studioReducer(state, {
+        type: "UPDATE_FILE_CONTENT",
+        fileId: id,
+        content: "new content",
+      });
+      expect(next.files[id].content).toBe("new content");
+    });
+  });
+
+  // --- Dirty Tracking ---
+
+  describe("isDirtySinceCompile", () => {
+    it("is dirty initially (compiledContentHash is null)", () => {
+      expect(isDirtySinceCompile(state)).toBe(true);
+    });
+
+    it("becomes clean after setting compiled hash", () => {
+      const sources = getAllSources(state.files);
+      const hash = contentHash(sources);
+      const next = studioReducer(state, {
+        type: "SET_COMPILED_HASH",
+        hash,
+      });
+      expect(isDirtySinceCompile(next)).toBe(false);
+    });
+
+    it("becomes dirty after editing", () => {
+      const sources = getAllSources(state.files);
+      const hash = contentHash(sources);
+      let s = studioReducer(state, { type: "SET_COMPILED_HASH", hash });
+      expect(isDirtySinceCompile(s)).toBe(false);
+
+      const id = firstFileId(s);
+      s = studioReducer(s, {
+        type: "UPDATE_FILE_CONTENT",
+        fileId: id,
+        content: "changed",
+      });
+      expect(isDirtySinceCompile(s)).toBe(true);
+    });
+
+    it("becomes dirty after rename (name is part of hash)", () => {
+      const sources = getAllSources(state.files);
+      const hash = contentHash(sources);
+      let s = studioReducer(state, { type: "SET_COMPILED_HASH", hash });
+
+      const id = firstFileId(s);
+      s = studioReducer(s, {
+        type: "RENAME_FILE",
+        fileId: id,
+        newName: "Renamed.sol",
+      });
+      expect(isDirtySinceCompile(s)).toBe(true);
+    });
+
+    it("becomes dirty after creating a file", () => {
+      const sources = getAllSources(state.files);
+      const hash = contentHash(sources);
+      let s = studioReducer(state, { type: "SET_COMPILED_HASH", hash });
+
+      s = studioReducer(s, { type: "CREATE_FILE", name: "New.sol" });
+      expect(isDirtySinceCompile(s)).toBe(true);
+    });
+
+    it("becomes dirty after deleting a file", () => {
+      // Need 2 files to delete
+      let s = studioReducer(state, {
+        type: "CREATE_FILE",
+        name: "Extra.sol",
+      });
+      const sources = getAllSources(s.files);
+      const hash = contentHash(sources);
+      s = studioReducer(s, { type: "SET_COMPILED_HASH", hash });
+
+      const extraId = Object.values(s.files).find(
+        (f) => f.name === "Extra.sol"
+      )!.id;
+      s = studioReducer(s, { type: "DELETE_FILE", fileId: extraId });
+      expect(isDirtySinceCompile(s)).toBe(true);
+    });
+  });
+
+  // --- Tab Management ---
+
+  describe("OPEN_TAB", () => {
+    it("opens a new tab and makes it active", () => {
+      const s = studioReducer(state, {
+        type: "CREATE_FILE",
+        name: "B.sol",
+      });
+      const bId = Object.values(s.files).find((f) => f.name === "B.sol")!.id;
+      // Close B's tab, then re-open it
+      const s2 = studioReducer(s, { type: "CLOSE_TAB", fileId: bId });
+      const s3 = studioReducer(s2, { type: "OPEN_TAB", fileId: bId });
+      expect(s3.openTabs.find((t) => t.fileId === bId)).toBeDefined();
+      expect(s3.activeTabId).toBe(bId);
+    });
+
+    it("does not duplicate existing tabs", () => {
+      const id = firstFileId(state);
+      const next = studioReducer(state, { type: "OPEN_TAB", fileId: id });
+      expect(next.openTabs).toHaveLength(1);
+      expect(next.activeTabId).toBe(id);
+    });
+  });
+
+  describe("CLOSE_TAB", () => {
+    it("closes a tab and focuses neighbor", () => {
+      let s = studioReducer(state, {
+        type: "CREATE_FILE",
+        name: "B.sol",
+      });
+      const aId = firstFileId(state);
+      // Active is B, close B → should focus A
+      const next = studioReducer(s, {
+        type: "CLOSE_TAB",
+        fileId: s.activeTabId!,
+      });
+      expect(next.openTabs.find((t) => t.fileId === s.activeTabId)).toBeUndefined();
+      expect(next.activeTabId).toBe(aId);
+    });
+
+    it("sets activeTabId to null when all tabs closed", () => {
+      const id = firstFileId(state);
+      const next = studioReducer(state, { type: "CLOSE_TAB", fileId: id });
+      expect(next.openTabs).toHaveLength(0);
+      expect(next.activeTabId).toBeNull();
+    });
+  });
+
+  describe("SET_ACTIVE_TAB", () => {
+    it("switches active tab", () => {
+      const s = studioReducer(state, {
+        type: "CREATE_FILE",
+        name: "B.sol",
+      });
+      const aId = firstFileId(state);
+      const next = studioReducer(s, { type: "SET_ACTIVE_TAB", fileId: aId });
+      expect(next.activeTabId).toBe(aId);
+    });
+  });
+
+  // --- Content Hash ---
+
+  describe("contentHash", () => {
+    it("produces deterministic hashes", () => {
+      const sources = { "A.sol": { content: "abc" }, "B.sol": { content: "def" } };
+      expect(contentHash(sources)).toBe(contentHash(sources));
+    });
+
+    it("is order-independent (sorted keys)", () => {
+      const a = { "A.sol": { content: "abc" }, "B.sol": { content: "def" } };
+      const b = { "B.sol": { content: "def" }, "A.sol": { content: "abc" } };
+      expect(contentHash(a)).toBe(contentHash(b));
+    });
+
+    it("changes when content changes", () => {
+      const a = { "A.sol": { content: "abc" } };
+      const b = { "A.sol": { content: "xyz" } };
+      expect(contentHash(a)).not.toBe(contentHash(b));
+    });
+
+    it("changes when filename changes", () => {
+      const a = { "A.sol": { content: "abc" } };
+      const b = { "B.sol": { content: "abc" } };
+      expect(contentHash(a)).not.toBe(contentHash(b));
+    });
+  });
+});
diff --git a/app/api/compile/route.ts b/app/api/compile/route.ts
index aa23fd1..20936d5 100644
--- a/app/api/compile/route.ts
+++ b/app/api/compile/route.ts
@@ -1,17 +1,18 @@
 import { NextRequest, NextResponse } from "next/server";
 import { Worker } from "worker_threads";
 import { COMPILE_WORKER_CODE } from "@/lib/compile-worker-code";
-import { resolveAllImports } from "@/lib/import-resolver";
+import { resolveAllImports, resolveAllImportsSources } from "@/lib/import-resolver";
 import { checkRateLimit, getRateLimitReset } from "@/lib/rate-limiter";
 
 export const runtime = "nodejs";
 export const maxDuration = 60;
 
-const MAX_BODY_SIZE = 102400; // 100KB
+const MAX_BODY_SIZE = 512000; // 500KB
 const WORKER_TIMEOUT_MS = 30_000;
 
 interface CompileRequest {
-  source: string;
+  source?: string;
+  sources?: Record<string, { content: string }>;
   mode: "evm" | "pvm";
 }
 
@@ -63,25 +64,46 @@ function compileInWorker(
 /**
  * Parse standard Solidity JSON output into our response format.
  * Works for both solc and resolc (same output structure).
+ *
+ * @param userSourceKeys — keys of the user's source files (for sorting: user files first)
  */
 function parseCompilerOutput(
-  output: any
+  output: any,
+  userSourceKeys?: Set<string>
 ): Omit<CompileResponse, "resolvedVersions"> {
   const errors: CompileResponse["errors"] = [];
   const warnings: CompileResponse["warnings"] = [];
 
   if (output.errors) {
     for (const err of output.errors) {
+      const msg = err.formattedMessage || err.message || "";
+
       if (err.severity === "warning") {
         warnings.push({
           message: err.message,
           formattedMessage: err.formattedMessage,
         });
       } else {
+        // Flat-namespace hint: when a "Source not found" error has a relative import path,
+        // check if the basename matches any user source key
+        let hint = "";
+        if (userSourceKeys) {
+          const sourceMatch = msg.match(/Source "(.+?)" not found/);
+          if (sourceMatch) {
+            const importPath = sourceMatch[1];
+            if (importPath.startsWith("./") || importPath.startsWith("../")) {
+              const basename = importPath.split("/").pop() || "";
+              if (userSourceKeys.has(basename)) {
+                hint = ` Studio uses flat file names. Change your import to \`import "${basename}"\`.`;
+              }
+            }
+          }
+        }
+
         errors.push({
-          message: err.message,
+          message: err.message + hint,
           severity: err.severity || "error",
-          formattedMessage: err.formattedMessage,
+          formattedMessage: err.formattedMessage ? err.formattedMessage + hint : undefined,
         });
       }
     }
@@ -110,10 +132,17 @@ function parseCompilerOutput(
     }
   }
 
-  // Sort: user's contracts (Contract.sol) first, imported dependencies last
+  // Sort: user's files first, then dependencies
+  const isUserFile = userSourceKeys
+    ? (name: string) => {
+        const fileName = name.split(":")[0];
+        return userSourceKeys.has(fileName);
+      }
+    : (name: string) => name.startsWith("Contract.sol:");
+
   contractNames.sort((a, b) => {
-    const aIsUser = a.startsWith("Contract.sol:");
-    const bIsUser = b.startsWith("Contract.sol:");
+    const aIsUser = isUserFile(a);
+    const bIsUser = isUserFile(b);
     if (aIsUser && !bIsUser) return -1;
     if (!aIsUser && bIsUser) return 1;
     return 0;
@@ -167,23 +196,65 @@ export async function POST(request: NextRequest) {
     );
   }
 
-  if (!req.source || typeof req.source !== "string") {
+  if (req.mode !== "evm" && req.mode !== "pvm") {
     return NextResponse.json(
-      { success: false, errors: [{ message: "Missing 'source' field", severity: "error" }] },
+      { success: false, errors: [{ message: "Invalid 'mode': must be 'evm' or 'pvm'", severity: "error" }] },
       { status: 400 }
     );
   }
 
-  if (req.mode !== "evm" && req.mode !== "pvm") {
+  // Exactly one of source or sources must be provided
+  const hasSource = req.source && typeof req.source === "string";
+  const hasSources = req.sources && typeof req.sources === "object" && !Array.isArray(req.sources);
+  if (!hasSource && !hasSources) {
     return NextResponse.json(
-      { success: false, errors: [{ message: "Invalid 'mode': must be 'evm' or 'pvm'", severity: "error" }] },
+      { success: false, errors: [{ message: "Missing 'source' or 'sources' field", severity: "error" }] },
+      { status: 400 }
+    );
+  }
+  if (hasSource && hasSources) {
+    return NextResponse.json(
+      { success: false, errors: [{ message: "Provide 'source' or 'sources', not both", severity: "error" }] },
       { status: 400 }
     );
   }
 
+  // Validate multi-file sources (flat namespace)
+  let userSourceKeys: Set<string> | undefined;
+  if (hasSources) {
+    userSourceKeys = new Set<string>();
+    for (const [key, val] of Object.entries(req.sources!)) {
+      if (key.includes("/") || key.includes("..")) {
+        return NextResponse.json(
+          { success: false, errors: [{ message: `Invalid source key "${key}": must be a flat filename (no paths)`, severity: "error" }] },
+          { status: 400 }
+        );
+      }
+      if (!key || typeof (val as any)?.content !== "string") {
+        return NextResponse.json(
+          { success: false, errors: [{ message: `Invalid source entry "${key}": must have string content`, severity: "error" }] },
+          { status: 400 }
+        );
+      }
+      userSourceKeys.add(key);
+    }
+  }
+
   try {
     // Step 1: Resolve imports from CDN
-    const { sources, resolvedVersions } = await resolveAllImports(req.source);
+    let sources: Record<string, { content: string }>;
+    let resolvedVersions: Record<string, string>;
+
+    if (hasSources) {
+      const resolved = await resolveAllImportsSources(req.sources!);
+      sources = resolved.sources;
+      resolvedVersions = resolved.resolvedVersions;
+    } else {
+      const resolved = await resolveAllImports(req.source!);
+      sources = resolved.sources;
+      resolvedVersions = resolved.resolvedVersions;
+      userSourceKeys = new Set(["Contract.sol"]);
+    }
 
     // Step 2: Build compiler input
     let input: string;
@@ -211,7 +282,7 @@ export async function POST(request: NextRequest) {
     const output = await compileInWorker(input, req.mode);
 
     // Step 4: Parse output
-    const result = parseCompilerOutput(output);
+    const result = parseCompilerOutput(output, userSourceKeys);
 
     return NextResponse.json({ ...result, resolvedVersions } as CompileResponse);
   } catch (error) {
diff --git a/app/builder/page.tsx b/app/builder/page.tsx
index 1ceda22..f4f997b 100644
--- a/app/builder/page.tsx
+++ b/app/builder/page.tsx
@@ -11,7 +11,7 @@ import { ClientProvider, useClient } from "@/context/client";
 export interface BuilderFormValues {
   section: string;
   method: string;
-  [key: string]: string;
+  [key: string]: any;
 }
 
 function BuilderContent() {
diff --git a/app/studio/layout.tsx b/app/studio/layout.tsx
new file mode 100644
index 0000000..d0795e1
--- /dev/null
+++ b/app/studio/layout.tsx
@@ -0,0 +1,14 @@
+import { NavBar } from "@/components/layout/site-header";
+
+interface StudioLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function StudioLayout({ children }: StudioLayoutProps) {
+  return (
+    <div className="flex h-screen flex-col overflow-hidden">
+      <NavBar />
+      <main className="flex flex-col flex-1 min-h-0">{children}</main>
+    </div>
+  );
+}
diff --git a/app/studio/page.tsx b/app/studio/page.tsx
new file mode 100644
index 0000000..93e0ca3
--- /dev/null
+++ b/app/studio/page.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import React from "react";
+import { ClientProvider } from "@/context/client";
+import { ContractProvider } from "@/context/contract-provider";
+import { StudioProvider } from "@/context/studio-provider";
+import { StudioLayout } from "@/components/studio/studio-layout";
+
+export default function StudioPage() {
+  return (
+    <div className="flex flex-1 min-h-0 flex-col">
+      <ClientProvider>
+        <ContractProvider>
+          <StudioProvider>
+            <StudioLayout />
+          </StudioProvider>
+        </ContractProvider>
+      </ClientProvider>
+    </div>
+  );
+}
diff --git a/components/builder/extrinsic-builder.tsx b/components/builder/extrinsic-builder.tsx
index 89683de..d8a4414 100644
--- a/components/builder/extrinsic-builder.tsx
+++ b/components/builder/extrinsic-builder.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
-import { DedotClient } from "dedot";
-import type { PolkadotApi } from "@dedot/chaintypes";
+import Link from "next/link";
+import type { GenericChainClient } from "@/lib/chain-types";
+import { hasReviveApi } from "@/lib/chain-types";
 import {
   createMethodOptions,
   createSectionOptions,
@@ -17,6 +18,7 @@ import {
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { GenericTxCall } from "dedot/types";
 import { stringCamelCase } from "dedot/utils";
+import { assert } from "dedot/utils";
 import {
   Dialog,
   DialogContent,
@@ -34,9 +36,13 @@ import { BuilderFormValues } from "@/app/builder/page";
 import { useAccount, useSendTransaction } from "@luno-kit/react";
 import { toast } from "sonner";
 import { usePalletContext } from "@/hooks/use-pallet-context";
+import { useGasEstimation } from "@/hooks/use-gas-estimation";
+import { useChainToken } from "@/hooks/use-chain-token";
+import { formatFee, formatWeight } from "@/lib/fee-display";
+import { Loader2, Zap, ArrowRight } from "lucide-react";
 
 interface ExtrinsicBuilderProps {
-  client: DedotClient<PolkadotApi>;
+  client: GenericChainClient;
   tx: GenericTxCall | null;
   onTxChange: (tx: GenericTxCall) => void;
   builderForm: UseFormReturn<BuilderFormValues>;
@@ -50,7 +56,8 @@ const ExtrinsicBuilder: React.FC<ExtrinsicBuilderProps> = ({
 }) => {
   const sections = createSectionOptions(client.metadata.latest);
   const { account } = useAccount();
-  const { sendTransactionAsync, isPending } = useSendTransaction();
+  const { sendTransactionAsync } = useSendTransaction();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const [methods, setMethods] = useState<
     { text: string; value: number }[] | null
@@ -66,6 +73,77 @@ const ExtrinsicBuilder: React.FC<ExtrinsicBuilderProps> = ({
   const { context: palletContext, isLoading: isContextLoading } =
     usePalletContext(client, palletName);
 
+  const { symbol, decimals } = useChainToken(client);
+
+  // Detect Revive instantiate_with_code for gas estimation
+  const isReviveInstantiate =
+    palletName === "Revive" && methodName === "instantiate_with_code";
+
+  // Watch form values for gas estimation inputs
+  const codeValue = builderForm.watch("code") || "";
+  const dataValue = builderForm.watch("data") || "";
+  const valueValue = builderForm.watch("value") || "0";
+  const saltValue = builderForm.watch("salt") || "";
+
+  const valueBigInt = (() => {
+    try {
+      return BigInt(valueValue || "0");
+    } catch {
+      return BigInt(0);
+    }
+  })();
+
+  const gasEstimation = useGasEstimation(
+    isReviveInstantiate ? client : null,
+    account?.address || "",
+    valueBigInt,
+    codeValue,
+    dataValue,
+    saltValue || undefined
+  );
+
+  // Auto-fill weight and storage deposit from gas estimation
+  const handleEstimateGas = async () => {
+    await gasEstimation.estimate();
+  };
+
+  useEffect(() => {
+    if (!isReviveInstantiate || !gasEstimation.weightRequired || !tx) return;
+
+    // Resolve weight field names from metadata
+    const weightField = tx.meta?.fields?.find((f) => f.name === "weight_limit");
+    if (weightField) {
+      try {
+        const weightType = client.registry.findType(weightField.typeId);
+        const { typeDef } = weightType;
+        if (typeDef.type === "Struct" && typeDef.value.fields.length >= 2) {
+          const [field0, field1] = typeDef.value.fields;
+          const name0 = String(field0.name);
+          const name1 = String(field1.name);
+          builderForm.setValue("weight_limit", {
+            [name0]: String(gasEstimation.weightRequired.refTime),
+            [name1]: String(gasEstimation.weightRequired.proofSize),
+          });
+        }
+      } catch {
+        // Fallback: use camelCase names
+        builderForm.setValue("weight_limit", {
+          refTime: String(gasEstimation.weightRequired.refTime),
+          proofSize: String(gasEstimation.weightRequired.proofSize),
+        });
+      }
+    }
+
+    // Auto-fill storage deposit only for Charge
+    if (gasEstimation.storageDeposit?.type === "Charge") {
+      builderForm.setValue(
+        "storage_deposit_limit",
+        String(gasEstimation.storageDeposit.value)
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [gasEstimation.weightRequired, gasEstimation.storageDeposit]);
+
   useEffect(() => {
     const section = builderForm.watch("section");
     if (section) {
@@ -114,6 +192,7 @@ const ExtrinsicBuilder: React.FC<ExtrinsicBuilderProps> = ({
       return;
     }
 
+    setIsSubmitting(true);
     try {
       // Build the args array from form data matching tx field order
       const args = fields.map((field) => data[field.name || ""]);
@@ -121,17 +200,40 @@ const ExtrinsicBuilder: React.FC<ExtrinsicBuilderProps> = ({
       // Create the submittable extrinsic by calling the tx function with args
       const extrinsic = (tx as any)(...args);
 
-      toast.info("Signing and submitting transaction...");
+      toast.info("Signing transaction...", {
+        description: "Please approve in your wallet extension.",
+      });
 
       const receipt = await sendTransactionAsync({ extrinsic });
 
-      toast.success("Transaction included in block", {
-        description: `Block: ${receipt.blockHash}`,
-      });
+      if (receipt.status === "failed") {
+        const errorMsg = receipt.errorMessage || receipt.dispatchError
+          ? `Dispatch error: ${receipt.errorMessage || JSON.stringify(receipt.dispatchError)}`
+          : "Transaction failed on-chain";
+        toast.error("Transaction failed", {
+          description: errorMsg,
+        });
+      } else {
+        toast.success("Transaction included in block", {
+          description: `Block: ${receipt.blockHash}`,
+        });
+      }
     } catch (error) {
       const message = error instanceof Error ? error.message : "Unknown error";
-      toast.error("Transaction failed", { description: message });
+      // Distinguish user rejection from other errors
+      const isUserRejection =
+        message.includes("Cancelled") ||
+        message.includes("Rejected") ||
+        message.includes("User denied") ||
+        message.includes("rejected");
+      if (isUserRejection) {
+        toast.info("Transaction cancelled by user.");
+      } else {
+        toast.error("Transaction failed", { description: message });
+      }
       console.error("Error signing and sending extrinsic:", error);
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -286,16 +388,81 @@ const ExtrinsicBuilder: React.FC<ExtrinsicBuilderProps> = ({
                 }}
               />
             ))}
+            {/* Gas estimation for Revive instantiate_with_code */}
+            {isReviveInstantiate && (
+              <div className="ml-8 space-y-3">
+                <div className="flex items-center gap-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="gap-1.5"
+                    disabled={
+                      !codeValue ||
+                      !account ||
+                      gasEstimation.estimating
+                    }
+                    onClick={handleEstimateGas}
+                  >
+                    {gasEstimation.estimating ? (
+                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <Zap className="h-3.5 w-3.5" />
+                    )}
+                    {gasEstimation.estimating
+                      ? "Estimating..."
+                      : "Estimate Gas"}
+                  </Button>
+                  <Link
+                    href="/studio"
+                    className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors"
+                  >
+                    Open in Contract Studio
+                    <ArrowRight className="h-3 w-3" />
+                  </Link>
+                </div>
+
+                {gasEstimation.weightRequired && (
+                  <div className="text-xs text-muted-foreground space-y-0.5 rounded-md border border-border bg-muted/50 p-2.5">
+                    <p>
+                      Weight: {formatWeight(gasEstimation.weightRequired)}
+                    </p>
+                    {gasEstimation.storageDeposit && (
+                      <p>
+                        Storage ({gasEstimation.storageDeposit.type}):{" "}
+                        {formatFee(
+                          gasEstimation.storageDeposit.value,
+                          symbol,
+                          decimals
+                        )}
+                      </p>
+                    )}
+                  </div>
+                )}
+
+                {gasEstimation.error && (
+                  <p className="text-xs text-red-500">
+                    {gasEstimation.error}
+                  </p>
+                )}
+              </div>
+            )}
+
             <div className="flex justify-end">
               <Button
                 type="submit"
-                disabled={!account || !tx || isPending}
+                disabled={!account || !tx || isSubmitting}
               >
-                {isPending
-                  ? "Submitting..."
-                  : !account
-                    ? "Connect Wallet to Submit"
-                    : "Sign and Submit"}
+                {isSubmitting ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                    Submitting...
+                  </>
+                ) : !account ? (
+                  "Connect Wallet to Submit"
+                ) : (
+                  "Sign and Submit"
+                )}
               </Button>
             </div>
           </form>
diff --git a/components/builder/information-pane.tsx b/components/builder/information-pane.tsx
index 4cb0b87..7aec987 100644
--- a/components/builder/information-pane.tsx
+++ b/components/builder/information-pane.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef } from "react";
-import { $, DedotClient } from "dedot";
+import { $ } from "dedot";
 import {
   HexString,
   stringCamelCase,
@@ -15,7 +15,7 @@ import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { GenericTxCall } from "dedot/types";
-import { PolkadotApi } from "@dedot/chaintypes";
+import type { GenericChainClient } from "@/lib/chain-types";
 import { UseFormReturn } from "react-hook-form";
 import { BuilderFormValues } from "@/app/builder/page";
 import {
@@ -33,7 +33,7 @@ import { Copy, Check, AlertCircle } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 interface InformationPaneProps {
-  client: DedotClient<PolkadotApi>;
+  client: GenericChainClient;
   tx: GenericTxCall | null;
   builderForm: UseFormReturn<BuilderFormValues>;
   onTxChange: (tx: GenericTxCall) => void;
@@ -104,7 +104,10 @@ const InformationPane: React.FC<InformationPaneProps> = ({
   // the relevant arg field values into a stable string for dependency tracking.
   const formValues = builderForm.watch();
   const argFieldNames = tx?.meta?.fields?.map((f) => f.name || "") || [];
-  const argValuesKey = argFieldNames.map((n) => `${n}:${formValues[n] ?? ""}`).join("|");
+  const argValuesKey = argFieldNames.map((n) => {
+    const v = formValues[n];
+    return `${n}:${typeof v === "object" && v !== null ? JSON.stringify(v) : v ?? ""}`;
+  }).join("|");
 
   // Encode section hex
   const sectionValue = formValues.section;
diff --git a/components/layout/main-nav.tsx b/components/layout/main-nav.tsx
index ff52b04..1858cef 100644
--- a/components/layout/main-nav.tsx
+++ b/components/layout/main-nav.tsx
@@ -34,25 +34,41 @@ export function MainNav({ items, children }: MainNavProps) {
           {siteConfig.name}
         </span>
       </Link>
-      {items?.length ? (
-        <nav className="hidden gap-6 md:flex">
-          {items?.map((item, index) => (
-            <Link
-              key={index}
-              href={item.disabled ? "#" : item.href}
-              className={cn(
-                "mt-1.5 flex items-center font-heading text-xl font-semibold transition-colors hover:text-foreground/80 sm:text-sm",
-                item.href.startsWith(`/${segment}`)
-                  ? "text-foreground"
-                  : "text-foreground/60",
-                item.disabled && "cursor-not-allowed opacity-80"
-              )}
-            >
-              {item.title}
-            </Link>
-          ))}
-        </nav>
-      ) : null}
+      <nav className="hidden gap-6 md:flex">
+        <Link
+          href="/builder"
+          className={cn(
+            "mt-1.5 flex items-center font-heading text-xl font-semibold transition-colors hover:text-foreground/80 sm:text-sm",
+            segment === "builder" ? "text-foreground" : "text-foreground/60"
+          )}
+        >
+          Builder
+        </Link>
+        <Link
+          href="/studio"
+          className={cn(
+            "mt-1.5 flex items-center font-heading text-xl font-semibold transition-colors hover:text-foreground/80 sm:text-sm",
+            segment === "studio" ? "text-foreground" : "text-foreground/60"
+          )}
+        >
+          Studio
+        </Link>
+        {items?.map((item, index) => (
+          <Link
+            key={index}
+            href={item.disabled ? "#" : item.href}
+            className={cn(
+              "mt-1.5 flex items-center font-heading text-xl font-semibold transition-colors hover:text-foreground/80 sm:text-sm",
+              item.href.startsWith(`/${segment}`)
+                ? "text-foreground"
+                : "text-foreground/60",
+              item.disabled && "cursor-not-allowed opacity-80"
+            )}
+          >
+            {item.title}
+          </Link>
+        ))}
+      </nav>
       <Sheet open={open} onOpenChange={setOpen}>
         <SheetTrigger asChild>
           <button className="flex items-center space-x-2 md:hidden">
@@ -81,6 +97,13 @@ export function MainNav({ items, children }: MainNavProps) {
               >
                 Builder
               </Link>
+              <Link
+                href="/studio"
+                onClick={() => setOpen(false)}
+                className="flex w-full items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent"
+              >
+                Studio
+              </Link>
               {(items ?? []).map((item, index) => (
                 <Link
                   key={index}
diff --git a/components/params/inputs/contract-code.tsx b/components/params/inputs/contract-code.tsx
index 824fdc4..d27c251 100644
--- a/components/params/inputs/contract-code.tsx
+++ b/components/params/inputs/contract-code.tsx
@@ -24,6 +24,7 @@ import {
   selectContract,
   useContractCompilation,
 } from "@/lib/contract-store";
+import { compileSolidity } from "@/lib/compile-client";
 import type { ParamInputProps } from "../types";
 
 const MonacoEditor = dynamic(() => import("@monaco-editor/react"), {
@@ -84,11 +85,14 @@ export function ContractCode({
 
   const bytecodeInputRef = useRef<HTMLInputElement>(null);
   const abiInputRef = useRef<HTMLInputElement>(null);
+  const compileIdRef = useRef(0);
 
   // Reset compilation state on mount and unmount
   useEffect(() => {
+    const ref = compileIdRef;
     resetCompilationState();
     return () => {
+      ++ref.current;
       resetCompilationState();
     };
   }, []);
@@ -104,6 +108,8 @@ export function ContractCode({
   }, [externalValue]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const handleCompile = async () => {
+    const id = ++compileIdRef.current;
+
     setIsCompiling(true);
     setCompilationState({
       isCompiling: true,
@@ -112,46 +118,26 @@ export function ContractCode({
     });
 
     try {
-      const res = await fetch("/api/compile", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ source, mode: compileTarget }),
-      });
-
-      const data = await res.json();
+      const result = await compileSolidity(source, compileTarget);
 
-      if (!res.ok) {
-        resetCompilationState();
-        setCompilationState({
-          isCompiling: false,
-          errors: data.errors || [
-            {
-              message: data.error || "Compilation failed",
-              severity: "error",
-            },
-          ],
-        });
-        setHexValue("");
-        onChange?.(undefined);
-        return;
-      }
+      // Discard if a newer compile was started or artifacts were replaced (upload)
+      if (compileIdRef.current !== id) return;
 
-      if (!data.success) {
-        resetCompilationState();
+      if (!result.success) {
+        // Compile failure: keep previous artifacts in the store for display,
+        // but clear the hex output so the builder form doesn't submit stale bytecode
         setCompilationState({
           isCompiling: false,
-          errors: data.errors || [{ message: "Compilation failed", severity: "error" }],
-          warnings: data.warnings || [],
+          errors: result.errors,
+          warnings: result.warnings,
         });
         setHexValue("");
         onChange?.(undefined);
         return;
       }
 
-      // API returns { contracts: Record<name, {abi, bytecode}>, contractNames: string[] }
-      // Map to contract-store's expected shape
-      const allContracts = data.contracts || {};
-      const contractNames = data.contractNames || [];
+      const allContracts = result.contracts || {};
+      const contractNames = result.contractNames;
       const firstContract = contractNames[0] || null;
       const firstData = firstContract ? allContracts[firstContract] : null;
 
@@ -161,10 +147,11 @@ export function ContractCode({
         abi: firstData?.abi || null,
         bytecode: firstData?.bytecode || null,
         contractNames,
-        errors: data.errors || [],
-        warnings: data.warnings || [],
+        errors: result.errors,
+        warnings: result.warnings,
         isCompiling: false,
         mode: compileTarget,
+        bytecodeSource: "compile",
       });
 
       if (firstData?.bytecode) {
@@ -173,7 +160,9 @@ export function ContractCode({
         onChange?.(hex);
       }
     } catch (err) {
-      resetCompilationState();
+      if (compileIdRef.current !== id) return;
+      // Network error: keep previous artifacts in the store for display,
+      // but clear the hex output so the builder form doesn't submit stale bytecode
       setCompilationState({
         isCompiling: false,
         errors: [
@@ -187,7 +176,9 @@ export function ContractCode({
       setHexValue("");
       onChange?.(undefined);
     } finally {
-      setIsCompiling(false);
+      if (compileIdRef.current === id) {
+        setIsCompiling(false);
+      }
     }
   };
 
@@ -222,6 +213,9 @@ export function ContractCode({
       const raw = (reader.result as string).trim().replace(/\s+/g, "");
       const hex = raw.startsWith("0x") ? raw.toLowerCase() : `0x${raw.toLowerCase()}`;
       if (!/^0x[0-9a-f]*$/.test(hex) || hex.length % 2 !== 0) {
+        ++compileIdRef.current;
+        setIsCompiling(false);
+        resetCompilationState();
         setCompilationState({
           errors: [{ message: "Invalid bytecode file: not valid hex", severity: "error" }],
         });
@@ -229,10 +223,26 @@ export function ContractCode({
         onChange?.(undefined);
         return;
       }
+      // Bump compile token to discard any in-flight compile + clear local spinner
+      ++compileIdRef.current;
+      setIsCompiling(false);
+      setCompilationState({
+        bytecode: hex.startsWith("0x") ? hex.slice(2) : hex,
+        bytecodeSource: "upload",
+        mode: null,
+        abi: null,
+        allContracts: null,
+        contractNames: [],
+        contractName: null,
+        errors: [],
+        warnings: [],
+        isCompiling: false,
+      });
       setHexValue(hex);
       onChange?.(hex);
     };
     reader.readAsText(file);
+    e.target.value = "";
   };
 
   const handleAbiUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -261,6 +271,7 @@ export function ContractCode({
       }
     };
     reader.readAsText(file);
+    e.target.value = "";
   };
 
   const handleModeChange = (newMode: string) => {
@@ -342,6 +353,7 @@ export function ContractCode({
             {/* Success indicator */}
             {compilation.bytecode &&
               compilation.errors.length === 0 &&
+              compilation.bytecodeSource === "compile" &&
               !isCompiling && (
                 <span className="flex items-center gap-1 text-xs text-green-600 dark:text-green-400">
                   <Check className="h-3.5 w-3.5" />
diff --git a/components/params/inputs/struct.tsx b/components/params/inputs/struct.tsx
index 0cf2fb1..850fdc0 100644
--- a/components/params/inputs/struct.tsx
+++ b/components/params/inputs/struct.tsx
@@ -30,8 +30,19 @@ export function Struct({
   error: externalError,
   onChange,
   fields,
+  value: externalValue,
 }: StructProps) {
   const [values, setValues] = React.useState<Record<string, any>>({});
+
+  // Sync local values from external value prop (e.g. gas estimation auto-fill)
+  React.useEffect(() => {
+    if (externalValue && typeof externalValue === "object" && !Array.isArray(externalValue)) {
+      setValues((prev) => {
+        if (JSON.stringify(prev) !== JSON.stringify(externalValue)) return externalValue;
+        return prev;
+      });
+    }
+  }, [externalValue]);
   const [validationError, setValidationError] = React.useState<string | null>(null);
 
   // Get list of required field names
@@ -84,6 +95,7 @@ export function Struct({
                 description: field.description,
                 isDisabled: isDisabled,
                 isRequired: field.required,
+                value: values[field.name],
                 onChange: (value: any) => handleFieldChange(field.name, value),
               })}
             </div>
diff --git a/components/params/types.ts b/components/params/types.ts
index afe81c4..9468813 100644
--- a/components/params/types.ts
+++ b/components/params/types.ts
@@ -1,6 +1,5 @@
 import { z } from "zod";
-import type { DedotClient } from "dedot";
-import { PolkadotApi } from "@dedot/chaintypes";
+import type { GenericChainClient } from "@/lib/chain-types";
 import type { PalletContextData } from "@/types/pallet-context";
 
 export interface ParamInputProps {
@@ -11,7 +10,7 @@ export interface ParamInputProps {
   isDisabled?: boolean;
   isRequired?: boolean;
   error?: string;
-  client: DedotClient<PolkadotApi>;
+  client: GenericChainClient;
   typeId?: number;
   value?: any;
   onChange?: (value: unknown) => void;
diff --git a/components/studio/chain-required-banner.tsx b/components/studio/chain-required-banner.tsx
new file mode 100644
index 0000000..8e745ad
--- /dev/null
+++ b/components/studio/chain-required-banner.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { AlertCircle } from "lucide-react";
+
+export function ChainRequiredBanner() {
+  return (
+    <div className="flex items-center gap-3 rounded-lg border border-yellow-500/30 bg-yellow-500/5 px-4 py-3">
+      <AlertCircle className="h-5 w-5 text-yellow-600 shrink-0" />
+      <div>
+        <p className="text-sm font-medium text-yellow-700 dark:text-yellow-400">
+          Asset Hub chain required
+        </p>
+        <p className="text-xs text-muted-foreground mt-0.5">
+          Contract Studio requires an Asset Hub chain (Polkadot Asset Hub, Westend Asset Hub, or
+          Paseo Asset Hub). Use the chain selector in the top bar to switch.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/components/studio/compiler-section.tsx b/components/studio/compiler-section.tsx
new file mode 100644
index 0000000..6e37c54
--- /dev/null
+++ b/components/studio/compiler-section.tsx
@@ -0,0 +1,352 @@
+"use client";
+
+import React, { useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ModeToggle } from "@/components/params/shared/mode-toggle";
+import { useContractContext } from "@/context/contract-provider";
+import { useStudio } from "@/context/studio-provider";
+import { compileSoliditySources } from "@/lib/compile-client";
+import { contentHash } from "@/types/studio";
+import {
+  Upload,
+  Play,
+  Loader2,
+  Check,
+  AlertCircle,
+  FileCode,
+} from "lucide-react";
+
+export function CompilerSection() {
+  const { setCompilation, resetCompilation, selectContract, ...compilation } =
+    useContractContext();
+  const { state, dispatch, allSources, activeFile } = useStudio();
+
+  const [isCompiling, setIsCompiling] = useState(false);
+  const [bytecodeFileName, setBytecodeFileName] = useState<string | null>(null);
+  const [abiFileName, setAbiFileName] = useState<string | null>(null);
+  const bytecodeInputRef = useRef<HTMLInputElement>(null);
+  const abiInputRef = useRef<HTMLInputElement>(null);
+  const compileIdRef = useRef(0);
+
+  const handleCompile = async () => {
+    const sources = { ...allSources };
+    if (Object.keys(sources).length === 0) return;
+
+    const id = ++compileIdRef.current;
+    const submittedHash = contentHash(sources);
+    const submittedTarget = state.compileTarget;
+    const previousContractName = compilation.contractName;
+
+    setIsCompiling(true);
+    setCompilation({ isCompiling: true, errors: [], warnings: [] });
+
+    try {
+      const result = await compileSoliditySources(sources, submittedTarget);
+
+      // Discard if a newer compile was started or artifacts were replaced
+      if (compileIdRef.current !== id) return;
+
+      if (!result.success) {
+        // Compile failure: keep previous artifacts, only update errors
+        setCompilation({
+          isCompiling: false,
+          errors: result.errors,
+          warnings: result.warnings,
+        });
+        return;
+      }
+
+      const contractNames = result.contractNames;
+
+      // Contract selection on recompile:
+      // 1. Keep previous selection if it still exists
+      // 2. Prefer contract matching active file
+      // 3. Fall back to first
+      let selectedName: string | null = null;
+      if (previousContractName && contractNames.includes(previousContractName)) {
+        selectedName = previousContractName;
+      } else if (activeFile) {
+        const activeMatch = contractNames.find((cn) =>
+          cn.startsWith(`${activeFile.name}:`)
+        );
+        if (activeMatch) selectedName = activeMatch;
+      }
+      if (!selectedName) selectedName = contractNames[0] || null;
+
+      const selectedData = selectedName
+        ? result.contracts?.[selectedName]
+        : null;
+
+      setCompilation({
+        allContracts: result.contracts,
+        contractName: selectedName,
+        abi: selectedData?.abi || null,
+        bytecode: selectedData?.bytecode || null,
+        contractNames,
+        errors: result.errors,
+        warnings: result.warnings,
+        isCompiling: false,
+        mode: submittedTarget,
+        bytecodeSource: "compile",
+      });
+      dispatch({ type: "SET_COMPILED_HASH", hash: submittedHash });
+    } catch (err) {
+      if (compileIdRef.current !== id) return;
+      setCompilation({
+        isCompiling: false,
+        errors: [
+          {
+            message: err instanceof Error ? err.message : "Network error",
+            severity: "error",
+          },
+        ],
+      });
+    } finally {
+      if (compileIdRef.current === id) {
+        setIsCompiling(false);
+      }
+    }
+  };
+
+  const handleContractSelect = (name: string) => {
+    selectContract(name);
+  };
+
+  // Bytecode upload (.bin/.hex)
+  const handleBytecodeUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setBytecodeFileName(file.name);
+    const reader = new FileReader();
+    reader.onload = () => {
+      const raw = (reader.result as string).trim().replace(/\s+/g, "");
+      const normalized =
+        raw.startsWith("0x") || raw.startsWith("0X")
+          ? `0x${raw.slice(2).toLowerCase()}`
+          : `0x${raw.toLowerCase()}`;
+      if (!/^0x[0-9a-f]*$/.test(normalized) || normalized.length % 2 !== 0) {
+        ++compileIdRef.current;
+        setIsCompiling(false);
+        resetCompilation();
+        setCompilation({
+          errors: [
+            {
+              message:
+                "Invalid bytecode file: must be valid hex with even length",
+              severity: "error",
+            },
+          ],
+        });
+        return;
+      }
+      // Full reset — bump compile token + clear local spinner
+      ++compileIdRef.current;
+      setIsCompiling(false);
+      setCompilation({
+        bytecode: normalized.slice(2),
+        bytecodeSource: "upload",
+        mode: null,
+        abi: null,
+        allContracts: null,
+        contractNames: [],
+        contractName: null,
+        errors: [],
+        warnings: [],
+        isCompiling: false,
+      });
+    };
+    reader.readAsText(file);
+    e.target.value = "";
+  };
+
+  // ABI upload (.json) — does NOT touch bytecode or bump compile token
+  const handleAbiUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setAbiFileName(file.name);
+    const reader = new FileReader();
+    reader.onload = () => {
+      try {
+        const abi = JSON.parse(reader.result as string);
+        setCompilation({
+          abi: Array.isArray(abi) ? abi : abi.abi || [],
+          contractName: file.name.replace(/\.json$/, ""),
+        });
+      } catch {
+        setCompilation({
+          abi: null,
+          contractName: null,
+          errors: [
+            { message: "Failed to parse ABI JSON", severity: "error" },
+          ],
+        });
+      }
+    };
+    reader.readAsText(file);
+    e.target.value = "";
+  };
+
+  // Cleanup on unmount — invalidate in-flight compiles
+  React.useEffect(() => {
+    const ref = compileIdRef;
+    return () => {
+      ++ref.current;
+    };
+  }, []);
+
+  const byteCount = compilation.bytecode
+    ? Math.floor(compilation.bytecode.length / 2)
+    : 0;
+  const abiCount = compilation.abi?.length ?? 0;
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* Compile target */}
+      <ModeToggle
+        modes={[
+          { id: "evm", label: "EVM" },
+          { id: "pvm", label: "PVM (Polkadot)" },
+        ]}
+        activeMode={state.compileTarget}
+        onModeChange={(m) =>
+          dispatch({
+            type: "SET_COMPILE_TARGET",
+            target: m as "evm" | "pvm",
+          })
+        }
+        disabled={isCompiling}
+      />
+
+      {/* Compile button */}
+      <Button
+        type="button"
+        size="sm"
+        disabled={isCompiling || Object.keys(allSources).length === 0}
+        onClick={handleCompile}
+        className="gap-1.5 w-full"
+      >
+        {isCompiling ? (
+          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+        ) : (
+          <Play className="h-3.5 w-3.5" />
+        )}
+        {isCompiling ? "Compiling..." : "Compile"}
+      </Button>
+
+      {/* Contract selector */}
+      {compilation.contractNames.length > 1 && (
+        <div className="flex flex-col gap-1.5">
+          <span className="text-xs text-muted-foreground">Contract</span>
+          <Select
+            value={compilation.contractName || ""}
+            onValueChange={handleContractSelect}
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue placeholder="Select contract" />
+            </SelectTrigger>
+            <SelectContent>
+              {compilation.contractNames.map((cn) => (
+                <SelectItem key={cn} value={cn} className="text-xs">
+                  {cn}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
+      {/* Contract info card */}
+      {compilation.bytecode && (
+        <div className="flex flex-col gap-1 rounded-md border border-border bg-muted/50 p-2.5">
+          <div className="flex items-center gap-1.5">
+            <FileCode className="h-3.5 w-3.5 text-muted-foreground" />
+            <span className="text-xs font-medium">
+              {compilation.contractName || "Contract"}
+            </span>
+          </div>
+          <div className="text-xs text-muted-foreground space-y-0.5">
+            <p>{byteCount.toLocaleString()} bytes</p>
+            {abiCount > 0 && <p>ABI: {abiCount} entries</p>}
+          </div>
+          {!isCompiling && compilation.errors.length === 0 && compilation.bytecodeSource === "compile" && (
+            <span className="flex items-center gap-1 text-xs text-green-600 dark:text-green-400 mt-1">
+              <Check className="h-3 w-3" />
+              Compiled
+            </span>
+          )}
+          {compilation.bytecodeSource === "upload" && (
+            <span className="flex items-center gap-1 text-xs text-muted-foreground mt-1">
+              <Upload className="h-3 w-3" />
+              Uploaded
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Upload section */}
+      <div className="flex flex-col gap-1.5 pt-1 border-t">
+        <span className="text-xs font-semibold uppercase text-muted-foreground tracking-wider">
+          Upload
+        </span>
+        <input
+          ref={bytecodeInputRef}
+          type="file"
+          accept=".bin,.hex"
+          onChange={handleBytecodeUpload}
+          className="hidden"
+        />
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => bytecodeInputRef.current?.click()}
+          className="w-full justify-center gap-2 text-xs"
+        >
+          <Upload className="h-3.5 w-3.5" />
+          {bytecodeFileName || ".bin / .hex"}
+        </Button>
+        <input
+          ref={abiInputRef}
+          type="file"
+          accept=".json"
+          onChange={handleAbiUpload}
+          className="hidden"
+        />
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => abiInputRef.current?.click()}
+          className="w-full justify-center gap-2 text-xs"
+        >
+          <Upload className="h-3.5 w-3.5" />
+          {abiFileName || ".json (ABI)"}
+        </Button>
+      </div>
+
+      {/* Errors */}
+      {compilation.errors.length > 0 && (
+        <div className="flex flex-col gap-1">
+          {compilation.errors.map((err, i) => (
+            <div
+              key={i}
+              className="flex items-start gap-1.5 text-xs text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900 rounded-md px-2 py-1.5"
+            >
+              <AlertCircle className="h-3 w-3 mt-0.5 shrink-0" />
+              <span className="break-all">
+                {err.formattedMessage || err.message}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/studio/constructor-form.tsx b/components/studio/constructor-form.tsx
new file mode 100644
index 0000000..0e8e0df
--- /dev/null
+++ b/components/studio/constructor-form.tsx
@@ -0,0 +1,205 @@
+"use client";
+
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+  getConstructorInputs,
+  allConstructorTypesSupported,
+  encodeConstructorArgs,
+  solidityTypeLabel,
+  isSupportedType,
+} from "@/lib/abi-encoder";
+import { AlertTriangle, Info } from "lucide-react";
+
+interface ConstructorFormProps {
+  abi: any[] | null;
+  onEncodedChange: (hex: string | undefined) => void;
+  /** When true, the form shows unsupported-type info without a "use hex below" message,
+   *  because the parent will render its own hex fallback input. */
+  hasHexFallback?: boolean;
+}
+
+export function ConstructorForm({ abi, onEncodedChange, hasHexFallback }: ConstructorFormProps) {
+  const [argValues, setArgValues] = useState<Record<string, any>>({});
+  const isEncodingRef = useRef(false);
+
+  const constructorInputs = abi ? getConstructorInputs(abi) : [];
+  const hasConstructor = constructorInputs.length > 0;
+  const typesSupported = abi ? allConstructorTypesSupported(abi) : false;
+
+  // Reset field values when the ABI changes (contract switch / recompile)
+  useEffect(() => {
+    setArgValues({});
+  }, [abi]);
+
+  // Auto-emit "0x" when ABI exists but constructor has no arguments
+  useEffect(() => {
+    if (abi && !hasConstructor) {
+      onEncodedChange("0x");
+    }
+  }, [abi, hasConstructor]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Validate a single constructor arg value against its Solidity type.
+  // Mirrors the builder's validateArg in contract-constructor.tsx.
+  const validateArg = useCallback((type: string, value: any): boolean => {
+    if (type === "bool") return value !== undefined && value !== null;
+    if (type === "string") return value !== undefined && value !== null;
+    const v = String(value ?? "");
+    if (v === "") return false;
+    if (type === "address") return /^0x[0-9a-fA-F]{40}$/.test(v);
+    if (type.startsWith("uint") || type.startsWith("int")) {
+      try { BigInt(v); return true; } catch { return false; }
+    }
+    if (type === "bytes") return /^0x([0-9a-fA-F]{2})*$/.test(v);
+    if (/^bytes\d+$/.test(type)) {
+      const n = parseInt(type.slice(5));
+      return /^0x([0-9a-fA-F]{2})*$/.test(v) && (v.length - 2) / 2 <= n;
+    }
+    return true;
+  }, []);
+
+  const encodeAndEmit = useCallback(
+    (values: Record<string, any>) => {
+      if (!abi || !hasConstructor || !typesSupported) return;
+
+      const inputs = getConstructorInputs(abi);
+      const hasAnyValue = inputs.some((input) => {
+        const v = values[input.name];
+        if (v === undefined || v === null) return false;
+        if (input.type === "bool" || input.type === "string") return true;
+        return v !== "";
+      });
+
+      if (!hasAnyValue) {
+        onEncodedChange(undefined);
+        return;
+      }
+
+      // Only encode if every field passes validation — don't emit partial/bogus data
+      const allValid = inputs.every((input) => validateArg(input.type, values[input.name]));
+      if (!allValid) {
+        onEncodedChange(undefined);
+        return;
+      }
+
+      try {
+        isEncodingRef.current = true;
+        const encoded = encodeConstructorArgs(abi, values);
+        onEncodedChange(encoded);
+      } catch {
+        onEncodedChange(undefined);
+      } finally {
+        isEncodingRef.current = false;
+      }
+    },
+    [abi, hasConstructor, typesSupported, onEncodedChange, validateArg]
+  );
+
+  // Initialize bool args to false and encode immediately so the parent
+  // receives valid calldata without requiring a user interaction first
+  useEffect(() => {
+    if (!abi || !hasConstructor || !typesSupported) return;
+    const inputs = getConstructorInputs(abi);
+    const defaults: Record<string, any> = {};
+    for (const input of inputs) {
+      if (input.type === "bool") defaults[input.name] = false;
+    }
+    if (Object.keys(defaults).length > 0) {
+      setArgValues(defaults);
+      encodeAndEmit(defaults);
+    }
+  }, [abi, hasConstructor, typesSupported, encodeAndEmit]);
+
+  const handleArgChange = (argName: string, value: any) => {
+    const next = { ...argValues, [argName]: value };
+    setArgValues(next);
+    encodeAndEmit(next);
+  };
+
+  if (!abi) {
+    return (
+      <div className="flex items-start gap-2 rounded-md border border-border bg-muted/50 p-3">
+        <Info className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
+        <p className="text-xs text-muted-foreground">
+          Compile a contract to see constructor arguments.
+        </p>
+      </div>
+    );
+  }
+
+  if (!hasConstructor) {
+    return (
+      <div className="flex items-start gap-2 rounded-md border border-border bg-muted/50 p-3">
+        <Info className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
+        <p className="text-xs text-muted-foreground">
+          No constructor arguments.
+        </p>
+      </div>
+    );
+  }
+
+  if (!typesSupported) {
+    return (
+      <div className="flex items-start gap-2 rounded-md border border-yellow-500/30 bg-yellow-500/5 p-3">
+        <AlertTriangle className="h-4 w-4 text-yellow-600 mt-0.5 shrink-0" />
+        <p className="text-xs text-muted-foreground">
+          Constructor has complex types (arrays/tuples).
+          {hasHexFallback
+            ? " Use the hex input below to enter ABI-encoded constructor data."
+            : " Compile externally with Remix and provide the encoded data."}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2.5">
+      {constructorInputs.map((input) => {
+        const value = argValues[input.name] ?? "";
+
+        if (input.type === "bool") {
+          return (
+            <div key={input.name} className="flex items-center justify-between">
+              <Label className="text-xs">
+                {input.name}
+                <span className="text-muted-foreground ml-1.5 font-normal">
+                  {solidityTypeLabel(input.type)}
+                </span>
+              </Label>
+              <Switch
+                checked={value === true || value === "true"}
+                onCheckedChange={(checked) => handleArgChange(input.name, checked)}
+              />
+            </div>
+          );
+        }
+
+        let placeholder = "";
+        if (input.type === "address") placeholder = "0x...";
+        else if (input.type.startsWith("uint") || input.type.startsWith("int")) placeholder = "0";
+        else if (input.type === "string") placeholder = "Enter text";
+        else if (input.type === "bytes") placeholder = "0x";
+
+        return (
+          <div key={input.name} className="flex flex-col gap-1">
+            <Label className="text-xs">
+              {input.name}
+              <span className="text-muted-foreground ml-1.5 font-normal">
+                {solidityTypeLabel(input.type)}
+              </span>
+            </Label>
+            <Input
+              type="text"
+              value={value}
+              onChange={(e) => handleArgChange(input.name, e.target.value)}
+              className="font-mono text-xs h-8"
+              placeholder={placeholder}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/components/studio/deploy-panel.tsx b/components/studio/deploy-panel.tsx
new file mode 100644
index 0000000..326b8cc
--- /dev/null
+++ b/components/studio/deploy-panel.tsx
@@ -0,0 +1,319 @@
+"use client";
+
+import React, { useState, useCallback, useId } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { useClient } from "@/context/client";
+import { useContractContext } from "@/context/contract-provider";
+import { useGasEstimation } from "@/hooks/use-gas-estimation";
+import { useChainToken } from "@/hooks/use-chain-token";
+import { formatFee, formatWeight } from "@/lib/fee-display";
+import { ConstructorForm } from "./constructor-form";
+import { TransactionLog, LogEntry } from "./transaction-log";
+import { ChainRequiredBanner } from "./chain-required-banner";
+import { hasReviveApi } from "@/lib/chain-types";
+import { allConstructorTypesSupported, getConstructorInputs } from "@/lib/abi-encoder";
+import { useAccount, useSendTransaction } from "@luno-kit/react";
+import { Loader2, Zap, Rocket } from "lucide-react";
+
+export function DeployPanel() {
+  const { client } = useClient();
+  const { abi, bytecode } = useContractContext();
+  const { account } = useAccount();
+  const { sendTransactionAsync, isPending } = useSendTransaction();
+  const { symbol, decimals } = useChainToken(client);
+
+  const [constructorData, setConstructorData] = useState<string | undefined>();
+  const [hexDataInput, setHexDataInput] = useState("");
+  const [valueInput, setValueInput] = useState("0");
+  const [saltInput, setSaltInput] = useState("");
+  const [logEntries, setLogEntries] = useState<LogEntry[]>([]);
+
+  // Detect whether the constructor has unsupported types (needs hex fallback)
+  const constructorInputs = abi ? getConstructorInputs(abi) : [];
+  const hasConstructor = constructorInputs.length > 0;
+  const needsHexFallback = abi ? hasConstructor && !allConstructorTypesSupported(abi) : false;
+  const [hexDataError, setHexDataError] = useState<string | null>(null);
+
+  // Reset constructor-related state when the ABI changes (contract switch / recompile)
+  React.useEffect(() => {
+    setConstructorData(undefined);
+    setHexDataInput("");
+    setHexDataError(null);
+  }, [abi]);
+
+  const logId = useId();
+  const logCounterRef = React.useRef(0);
+
+  const addLog = useCallback(
+    (type: LogEntry["type"], message: string) => {
+      const counter = logCounterRef.current++;
+      setLogEntries((prev) => [
+        ...prev,
+        {
+          id: `${logId}-${Date.now()}-${counter}`,
+          type,
+          message,
+          timestamp: new Date(),
+        },
+      ]);
+    },
+    [logId]
+  );
+
+  const code = bytecode ? `0x${bytecode}` : "";
+  const valueBigInt = (() => {
+    try {
+      return BigInt(valueInput || "0");
+    } catch {
+      return BigInt(0);
+    }
+  })();
+
+  // Validate hex fallback input
+  const isValidHex = (v: string) =>
+    !v || v === "0x" || (/^0x[0-9a-fA-F]*$/.test(v) && v.length % 2 === 0);
+
+  const handleHexDataChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value.trim();
+    setHexDataInput(val);
+    if (!val || val === "0x") {
+      setHexDataError(null);
+    } else if (!/^0x[0-9a-fA-F]*$/.test(val)) {
+      setHexDataError("Must be a hex string with 0x prefix");
+    } else if (val.length % 2 !== 0) {
+      setHexDataError("Hex string must have even length");
+    } else {
+      setHexDataError(null);
+    }
+  };
+
+  // When hex fallback is active, use the raw hex input; otherwise use the encoded form data
+  const effectiveData = needsHexFallback
+    ? (hexDataInput || "0x")
+    : (constructorData || "0x");
+
+  const gasEstimation = useGasEstimation(
+    client,
+    account?.address || "",
+    valueBigInt,
+    code,
+    effectiveData,
+    saltInput || undefined
+  );
+
+  const isAssetHub = client ? hasReviveApi(client) : false;
+
+  const handleEstimate = async () => {
+    addLog("info", "Estimating gas...");
+    await gasEstimation.estimate();
+    // State updates from the hook won't be visible until next render.
+    // The effect below handles logging success/failure after React re-renders.
+  };
+
+  // Log estimation results after React applies the hook's state updates
+  React.useEffect(() => {
+    if (gasEstimation.weightRequired && !gasEstimation.error) {
+      addLog(
+        "success",
+        `Estimated: ${formatWeight(gasEstimation.weightRequired)}`
+      );
+      if (gasEstimation.storageDeposit) {
+        const sd = gasEstimation.storageDeposit;
+        addLog(
+          "info",
+          `Storage: ${sd.type} ${formatFee(sd.value, symbol, decimals)}`
+        );
+      }
+    }
+    if (gasEstimation.error && !gasEstimation.estimating) {
+      addLog("error", `Estimation failed: ${gasEstimation.error}`);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [gasEstimation.weightRequired, gasEstimation.error]);
+
+  const handleDeploy = async () => {
+    if (!client || !account || !bytecode) return;
+
+    if (!hasReviveApi(client)) {
+      addLog("error", "Chain does not support Revive API");
+      return;
+    }
+
+    addLog("pending", "Deploying contract...");
+
+    try {
+      const assetHubClient = client as any;
+      const salt = saltInput ? saltInput : undefined;
+
+      const extrinsic = assetHubClient.tx.revive.instantiateWithCode(
+        valueBigInt,
+        gasEstimation.weightRequired
+          ? {
+              refTime: gasEstimation.weightRequired.refTime,
+              proofSize: gasEstimation.weightRequired.proofSize,
+            }
+          : { refTime: BigInt(0), proofSize: BigInt(0) },
+        gasEstimation.storageDeposit?.type === "Charge"
+          ? gasEstimation.storageDeposit.value
+          : BigInt(0),
+        `0x${bytecode}`,
+        effectiveData,
+        salt
+      );
+
+      const receipt = await sendTransactionAsync({ extrinsic });
+
+      addLog("success", `Deployed in block: ${receipt.blockHash}`);
+      if (gasEstimation.deployedAddress) {
+        addLog("success", `Address: ${gasEstimation.deployedAddress}`);
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Deploy failed";
+      addLog("error", message);
+    }
+  };
+
+  if (!isAssetHub && client) {
+    return (
+      <div className="flex flex-col h-full p-3 gap-3">
+        <h3 className="text-xs font-semibold uppercase text-muted-foreground tracking-wider">
+          Deploy
+        </h3>
+        <ChainRequiredBanner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full p-3 gap-3 overflow-y-auto">
+      {/* Constructor */}
+      <div className="flex flex-col gap-2">
+        <h3 className="text-xs font-semibold uppercase text-muted-foreground tracking-wider">
+          Constructor
+        </h3>
+        <ConstructorForm abi={abi} onEncodedChange={setConstructorData} hasHexFallback={needsHexFallback} />
+        {needsHexFallback && (
+          <div className="flex flex-col gap-1.5">
+            <Label className="text-xs">Constructor Data (hex)</Label>
+            <Input
+              type="text"
+              value={hexDataInput}
+              onChange={handleHexDataChange}
+              className={`font-mono text-xs h-8 ${hexDataError ? "border-red-500" : ""}`}
+              placeholder="0x..."
+            />
+            {hexDataError && (
+              <p className="text-xs text-red-500">{hexDataError}</p>
+            )}
+          </div>
+        )}
+      </div>
+
+      <Separator />
+
+      {/* Config */}
+      <div className="flex flex-col gap-2">
+        <h3 className="text-xs font-semibold uppercase text-muted-foreground tracking-wider">
+          Config
+        </h3>
+        <div className="flex flex-col gap-1.5">
+          <Label className="text-xs">Value ({symbol})</Label>
+          <Input
+            type="text"
+            value={valueInput}
+            onChange={(e) => setValueInput(e.target.value)}
+            className="font-mono text-xs h-8"
+            placeholder="0"
+          />
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <Label className="text-xs">Salt (optional)</Label>
+          <Input
+            type="text"
+            value={saltInput}
+            onChange={(e) => setSaltInput(e.target.value)}
+            className="font-mono text-xs h-8"
+            placeholder="0x... or leave empty"
+          />
+        </div>
+      </div>
+
+      {/* Gas estimation */}
+      <div className="flex flex-col gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="w-full gap-1.5"
+          disabled={!code || !account || gasEstimation.estimating || !!hexDataError}
+          onClick={handleEstimate}
+        >
+          {gasEstimation.estimating ? (
+            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          ) : (
+            <Zap className="h-3.5 w-3.5" />
+          )}
+          {gasEstimation.estimating ? "Estimating..." : "Estimate Gas"}
+        </Button>
+
+        {gasEstimation.weightRequired && (
+          <div className="text-xs text-muted-foreground space-y-0.5 rounded-md border border-border bg-muted/50 p-2">
+            <p>
+              Weight: {formatWeight(gasEstimation.weightRequired)}
+            </p>
+            {gasEstimation.storageDeposit && (
+              <p>
+                Storage ({gasEstimation.storageDeposit.type}):{" "}
+                {formatFee(gasEstimation.storageDeposit.value, symbol, decimals)}
+              </p>
+            )}
+            {gasEstimation.gasConsumed !== null && (
+              <p>Gas consumed: {gasEstimation.gasConsumed.toString()}</p>
+            )}
+          </div>
+        )}
+
+        {gasEstimation.error && (
+          <p className="text-xs text-red-500">{gasEstimation.error}</p>
+        )}
+      </div>
+
+      <Separator />
+
+      {/* Deploy */}
+      <Button
+        type="button"
+        size="sm"
+        className="w-full gap-1.5"
+        disabled={!code || !account || isPending || !gasEstimation.weightRequired || !!hexDataError}
+        onClick={handleDeploy}
+      >
+        {isPending ? (
+          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+        ) : (
+          <Rocket className="h-3.5 w-3.5" />
+        )}
+        {isPending
+          ? "Deploying..."
+          : !account
+            ? "Connect Wallet"
+            : !code
+              ? "Compile First"
+              : "Deploy"}
+      </Button>
+
+      {/* Transaction log */}
+      <div className="flex-1 min-h-0">
+        <h3 className="text-xs font-semibold uppercase text-muted-foreground tracking-wider mb-1.5">
+          Log
+        </h3>
+        <div className="h-[150px] rounded-md border border-border">
+          <TransactionLog entries={logEntries} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/studio/deploy-section.tsx b/components/studio/deploy-section.tsx
new file mode 100644
index 0000000..a254d97
--- /dev/null
+++ b/components/studio/deploy-section.tsx
@@ -0,0 +1,422 @@
+"use client";
+
+import React, { useState, useCallback, useId } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useClient } from "@/context/client";
+import { useContractContext } from "@/context/contract-provider";
+import { useStudio } from "@/context/studio-provider";
+import { useGasEstimation } from "@/hooks/use-gas-estimation";
+import { useChainToken } from "@/hooks/use-chain-token";
+import { formatFee, formatWeight } from "@/lib/fee-display";
+import { ConstructorForm } from "./constructor-form";
+import { TransactionLog, LogEntry } from "./transaction-log";
+import { ChainRequiredBanner } from "./chain-required-banner";
+import { hasReviveApi } from "@/lib/chain-types";
+import {
+  allConstructorTypesSupported,
+  getConstructorInputs,
+} from "@/lib/abi-encoder";
+import { useAccount, useSendTransaction } from "@luno-kit/react";
+import {
+  Loader2,
+  Zap,
+  Rocket,
+  AlertTriangle,
+  Info,
+} from "lucide-react";
+
+export function DeploySection() {
+  const { client } = useClient();
+  const { abi, bytecode, mode, bytecodeSource } = useContractContext();
+  const { isDirtySinceCompile } = useStudio();
+  const { account } = useAccount();
+  const { sendTransactionAsync, isPending } = useSendTransaction();
+  const { symbol, decimals } = useChainToken(client);
+
+  const [constructorData, setConstructorData] = useState<string | undefined>();
+  const [hexDataInput, setHexDataInput] = useState("");
+  const [valueInput, setValueInput] = useState("0");
+  const [saltInput, setSaltInput] = useState("");
+  const [logEntries, setLogEntries] = useState<LogEntry[]>([]);
+
+  // Detect whether constructor has unsupported types (needs hex fallback)
+  const constructorInputs = abi ? getConstructorInputs(abi) : [];
+  const hasConstructor = constructorInputs.length > 0;
+  const needsHexFallback = abi
+    ? hasConstructor && !allConstructorTypesSupported(abi)
+    : false;
+  const [hexDataError, setHexDataError] = useState<string | null>(null);
+
+  // No-ABI deploy path: when bytecode exists but abi is null
+  const noAbiMode = bytecode !== null && abi === null;
+
+  // Reset constructor-related state when the ABI changes
+  React.useEffect(() => {
+    setConstructorData(undefined);
+    setHexDataInput("");
+    setHexDataError(null);
+  }, [abi]);
+
+  const logId = useId();
+  const logCounterRef = React.useRef(0);
+
+  const addLog = useCallback(
+    (type: LogEntry["type"], message: string) => {
+      const counter = logCounterRef.current++;
+      setLogEntries((prev) => [
+        ...prev,
+        {
+          id: `${logId}-${Date.now()}-${counter}`,
+          type,
+          message,
+          timestamp: new Date(),
+        },
+      ]);
+    },
+    [logId]
+  );
+
+  const code = bytecode ? `0x${bytecode}` : "";
+  const valueBigInt = (() => {
+    try {
+      return BigInt(valueInput || "0");
+    } catch {
+      return BigInt(0);
+    }
+  })();
+
+  const handleHexDataChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value.trim();
+    setHexDataInput(val);
+    if (!val || val === "0x") {
+      setHexDataError(null);
+    } else if (!/^0x[0-9a-fA-F]*$/.test(val)) {
+      setHexDataError("Must be a hex string with 0x prefix");
+    } else if (val.length % 2 !== 0) {
+      setHexDataError("Hex string must have even length");
+    } else {
+      setHexDataError(null);
+    }
+  };
+
+  // Effective data: noAbiMode or hex fallback → raw hex; otherwise → encoded form data
+  const effectiveData =
+    noAbiMode || needsHexFallback
+      ? hexDataInput || "0x"
+      : constructorData || "0x";
+
+  const gasEstimation = useGasEstimation(
+    client,
+    account?.address || "",
+    valueBigInt,
+    code,
+    effectiveData,
+    saltInput || undefined
+  );
+
+  const isAssetHub = client ? hasReviveApi(client) : false;
+
+  // --- Deploy gate logic ---
+  let deployEnabled = false;
+  let deployWarning: string | null = null;
+
+  if (bytecodeSource === "compile") {
+    if (isDirtySinceCompile) {
+      deployWarning = "Sources changed since last compile. Recompile first.";
+    } else if (mode === "evm") {
+      deployWarning =
+        "EVM artifacts cannot be deployed on-chain. Switch to PVM and recompile.";
+    } else if (mode === "pvm" && bytecode) {
+      deployEnabled = true;
+    }
+  } else if (bytecodeSource === "upload") {
+    deployEnabled = !!bytecode;
+  }
+  // bytecodeSource === null → deployEnabled stays false
+
+  const handleEstimate = async () => {
+    addLog("info", "Estimating gas...");
+    await gasEstimation.estimate();
+  };
+
+  React.useEffect(() => {
+    if (gasEstimation.weightRequired && !gasEstimation.error) {
+      addLog(
+        "success",
+        `Estimated: ${formatWeight(gasEstimation.weightRequired)}`
+      );
+      if (gasEstimation.storageDeposit) {
+        const sd = gasEstimation.storageDeposit;
+        addLog(
+          "info",
+          `Storage: ${sd.type} ${formatFee(sd.value, symbol, decimals)}`
+        );
+      }
+    }
+    if (gasEstimation.error && !gasEstimation.estimating) {
+      addLog("error", `Estimation failed: ${gasEstimation.error}`);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [gasEstimation.weightRequired, gasEstimation.error]);
+
+  const handleDeploy = async () => {
+    if (!client || !account || !bytecode) return;
+
+    if (!hasReviveApi(client)) {
+      addLog("error", "Chain does not support Revive API");
+      return;
+    }
+
+    addLog("pending", "Deploying contract...");
+
+    try {
+      const assetHubClient = client as any;
+      const salt = saltInput ? saltInput : undefined;
+
+      const extrinsic = assetHubClient.tx.revive.instantiateWithCode(
+        valueBigInt,
+        gasEstimation.weightRequired
+          ? {
+              refTime: gasEstimation.weightRequired.refTime,
+              proofSize: gasEstimation.weightRequired.proofSize,
+            }
+          : { refTime: BigInt(0), proofSize: BigInt(0) },
+        gasEstimation.storageDeposit?.type === "Charge"
+          ? gasEstimation.storageDeposit.value
+          : BigInt(0),
+        `0x${bytecode}`,
+        effectiveData,
+        salt
+      );
+
+      addLog("info", "Signing... approve in your wallet extension.");
+
+      const receipt = await sendTransactionAsync({ extrinsic });
+
+      if (receipt.status === "failed") {
+        const errorMsg = receipt.errorMessage || (receipt.dispatchError
+          ? JSON.stringify(receipt.dispatchError)
+          : "Transaction failed on-chain");
+        addLog("error", `Deploy failed: ${errorMsg}`);
+      } else {
+        addLog("success", `Deployed in block: ${receipt.blockHash}`);
+        if (gasEstimation.deployedAddress) {
+          addLog("success", `Address: ${gasEstimation.deployedAddress}`);
+        }
+      }
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Deploy failed";
+      const isUserRejection =
+        message.includes("Cancelled") ||
+        message.includes("Rejected") ||
+        message.includes("User denied") ||
+        message.includes("rejected");
+      addLog(
+        isUserRejection ? "info" : "error",
+        isUserRejection ? "Transaction cancelled by user" : message
+      );
+    }
+  };
+
+  if (!isAssetHub && client) {
+    return <ChainRequiredBanner />;
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* Deploy gate warnings */}
+      {deployWarning && (
+        <div className="flex items-start gap-2 rounded-md border border-yellow-500/30 bg-yellow-500/5 p-2.5">
+          <AlertTriangle className="h-3.5 w-3.5 text-yellow-600 mt-0.5 shrink-0" />
+          <p className="text-xs text-yellow-700 dark:text-yellow-400">
+            {deployWarning}
+          </p>
+        </div>
+      )}
+
+      {/* Upload info note */}
+      {bytecodeSource === "upload" && bytecode && (
+        <div className="flex items-start gap-2 rounded-md border border-blue-500/20 bg-blue-500/5 p-2.5">
+          <Info className="h-3.5 w-3.5 text-blue-500 mt-0.5 shrink-0" />
+          <p className="text-xs text-muted-foreground">
+            Uploaded bytecode will be deployed as-is via Revive. If this is EVM
+            bytecode (not PVM), the dry-run will fail.
+          </p>
+        </div>
+      )}
+
+      {/* Unverified ABI warning */}
+      {bytecodeSource === "upload" && abi && (
+        <div className="flex items-start gap-2 rounded-md border border-yellow-500/30 bg-yellow-500/5 p-2.5">
+          <AlertTriangle className="h-3.5 w-3.5 text-yellow-600 mt-0.5 shrink-0" />
+          <p className="text-xs text-yellow-700 dark:text-yellow-400">
+            Uploaded ABI is not verified against the bytecode. Ensure they are
+            from the same contract.
+          </p>
+        </div>
+      )}
+
+      {/* Constructor */}
+      <div className="flex flex-col gap-2">
+        <h3 className="text-xs font-semibold uppercase text-muted-foreground tracking-wider">
+          Constructor
+        </h3>
+        {noAbiMode ? (
+          <div className="flex flex-col gap-1.5">
+            <Label className="text-xs">Constructor Data (hex)</Label>
+            <Input
+              type="text"
+              value={hexDataInput}
+              onChange={handleHexDataChange}
+              className={`font-mono text-xs h-8 ${hexDataError ? "border-red-500" : ""}`}
+              placeholder="0x..."
+            />
+            {hexDataError && (
+              <p className="text-xs text-red-500">{hexDataError}</p>
+            )}
+          </div>
+        ) : (
+          <>
+            <ConstructorForm
+              abi={abi}
+              onEncodedChange={setConstructorData}
+              hasHexFallback={needsHexFallback}
+            />
+            {needsHexFallback && (
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">Constructor Data (hex)</Label>
+                <Input
+                  type="text"
+                  value={hexDataInput}
+                  onChange={handleHexDataChange}
+                  className={`font-mono text-xs h-8 ${hexDataError ? "border-red-500" : ""}`}
+                  placeholder="0x..."
+                />
+                {hexDataError && (
+                  <p className="text-xs text-red-500">{hexDataError}</p>
+                )}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Config */}
+      <div className="flex flex-col gap-2">
+        <h3 className="text-xs font-semibold uppercase text-muted-foreground tracking-wider">
+          Config
+        </h3>
+        <div className="flex flex-col gap-1.5">
+          <Label className="text-xs">Value ({symbol})</Label>
+          <Input
+            type="text"
+            value={valueInput}
+            onChange={(e) => setValueInput(e.target.value)}
+            className="font-mono text-xs h-8"
+            placeholder="0"
+          />
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <Label className="text-xs">Salt (optional)</Label>
+          <Input
+            type="text"
+            value={saltInput}
+            onChange={(e) => setSaltInput(e.target.value)}
+            className="font-mono text-xs h-8"
+            placeholder="0x... or leave empty"
+          />
+        </div>
+      </div>
+
+      {/* Gas estimation */}
+      <div className="flex flex-col gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="w-full gap-1.5"
+          disabled={
+            !deployEnabled ||
+            !code ||
+            !account ||
+            gasEstimation.estimating ||
+            !!hexDataError
+          }
+          onClick={handleEstimate}
+        >
+          {gasEstimation.estimating ? (
+            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          ) : (
+            <Zap className="h-3.5 w-3.5" />
+          )}
+          {gasEstimation.estimating ? "Estimating..." : "Estimate Gas"}
+        </Button>
+
+        {gasEstimation.weightRequired && (
+          <div className="text-xs text-muted-foreground space-y-0.5 rounded-md border border-border bg-muted/50 p-2">
+            <p>Weight: {formatWeight(gasEstimation.weightRequired)}</p>
+            {gasEstimation.storageDeposit && (
+              <p>
+                Storage ({gasEstimation.storageDeposit.type}):{" "}
+                {formatFee(
+                  gasEstimation.storageDeposit.value,
+                  symbol,
+                  decimals
+                )}
+              </p>
+            )}
+            {gasEstimation.gasConsumed !== null && (
+              <p>Gas consumed: {gasEstimation.gasConsumed.toString()}</p>
+            )}
+          </div>
+        )}
+
+        {gasEstimation.error && (
+          <p className="text-xs text-red-500">{gasEstimation.error}</p>
+        )}
+      </div>
+
+      {/* Deploy */}
+      <Button
+        type="button"
+        size="sm"
+        className="w-full gap-1.5"
+        disabled={
+          !deployEnabled ||
+          !code ||
+          !account ||
+          isPending ||
+          !gasEstimation.weightRequired ||
+          !!hexDataError
+        }
+        onClick={handleDeploy}
+      >
+        {isPending ? (
+          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+        ) : (
+          <Rocket className="h-3.5 w-3.5" />
+        )}
+        {isPending
+          ? "Deploying..."
+          : !account
+            ? "Connect Wallet"
+            : !code
+              ? "Compile First"
+              : "Deploy"}
+      </Button>
+
+      {/* Transaction log */}
+      <div className="flex flex-col gap-1.5">
+        <h3 className="text-xs font-semibold uppercase text-muted-foreground tracking-wider">
+          Log
+        </h3>
+        <div className="h-[150px] rounded-md border border-border">
+          <TransactionLog entries={logEntries} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/studio/editor-area.tsx b/components/studio/editor-area.tsx
new file mode 100644
index 0000000..d9b9d11
--- /dev/null
+++ b/components/studio/editor-area.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import React from "react";
+import dynamic from "next/dynamic";
+import { useTheme } from "next-themes";
+import { useStudio } from "@/context/studio-provider";
+import {
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizableHandle,
+} from "@/components/ui/resizable";
+import { EditorTabs } from "./editor-tabs";
+import { OutputPanel } from "./output-panel";
+
+const MonacoEditor = dynamic(() => import("@monaco-editor/react"), {
+  ssr: false,
+});
+
+export function EditorArea() {
+  const { resolvedTheme } = useTheme();
+  const { state, dispatch, activeFile } = useStudio();
+
+  const handleEditorChange = (value: string | undefined) => {
+    if (!activeFile) return;
+    dispatch({
+      type: "UPDATE_FILE_CONTENT",
+      fileId: activeFile.id,
+      content: value || "",
+    });
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Tabs */}
+      <EditorTabs />
+
+      {/* Editor + Output — resizable vertical split */}
+      <div className="flex-1 min-h-0">
+        <ResizablePanelGroup direction="vertical" className="h-full">
+          {/* Monaco editor */}
+          <ResizablePanel defaultSize="75%" minSize="20%">
+            <div className="h-full">
+              {activeFile ? (
+                <MonacoEditor
+                  key={activeFile.id}
+                  height="100%"
+                  language="sol"
+                  theme={resolvedTheme === "dark" ? "vs-dark" : "light"}
+                  path={activeFile.name}
+                  value={activeFile.content}
+                  onChange={handleEditorChange}
+                  options={{
+                    minimap: { enabled: true },
+                    fontSize: 14,
+                    lineNumbers: "on",
+                    scrollBeyondLastLine: false,
+                    wordWrap: "on",
+                    tabSize: 4,
+                    padding: { top: 8, bottom: 8 },
+                  }}
+                />
+              ) : (
+                <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
+                  Open a file to start editing
+                </div>
+              )}
+            </div>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+
+          {/* Output panel */}
+          <ResizablePanel defaultSize="25%" minSize="5%" maxSize="60%">
+            <OutputPanel
+              visible={state.outputVisible}
+              onToggle={() => dispatch({ type: "TOGGLE_OUTPUT" })}
+            />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    </div>
+  );
+}
diff --git a/components/studio/editor-tabs.tsx b/components/studio/editor-tabs.tsx
new file mode 100644
index 0000000..cfc47fc
--- /dev/null
+++ b/components/studio/editor-tabs.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import React from "react";
+import { useStudio } from "@/context/studio-provider";
+import { X, Plus } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export function EditorTabs() {
+  const { state, dispatch, isDirtySinceCompile } = useStudio();
+
+  const handleCreateFile = () => {
+    let name = "Untitled.sol";
+    let counter = 1;
+    while (Object.values(state.files).some((f) => f.name === name)) {
+      name = `Untitled${counter}.sol`;
+      counter++;
+    }
+    dispatch({ type: "CREATE_FILE", name, content: "" });
+  };
+
+  return (
+    <div className="flex items-center h-9 min-h-9 bg-muted/30 border-b overflow-x-auto">
+      {state.openTabs.map((tab) => {
+        const file = state.files[tab.fileId];
+        if (!file) return null;
+        const isActive = state.activeTabId === tab.fileId;
+
+        return (
+          <div
+            key={tab.fileId}
+            className={cn(
+              "group flex items-center gap-1.5 px-3 h-full text-xs cursor-pointer border-r border-border transition-colors shrink-0",
+              isActive
+                ? "bg-background text-foreground"
+                : "text-muted-foreground hover:bg-accent/30"
+            )}
+            onClick={() => dispatch({ type: "SET_ACTIVE_TAB", fileId: tab.fileId })}
+          >
+            <span className="truncate max-w-[120px]">{file.name}</span>
+            {isDirtySinceCompile && (
+              <span className="w-1.5 h-1.5 rounded-full bg-yellow-500 shrink-0" />
+            )}
+            <button
+              className="p-0.5 rounded hover:bg-muted opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+              onClick={(e) => {
+                e.stopPropagation();
+                dispatch({ type: "CLOSE_TAB", fileId: tab.fileId });
+              }}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </div>
+        );
+      })}
+      <button
+        className="flex items-center justify-center w-8 h-full text-muted-foreground hover:bg-accent/30 transition-colors shrink-0"
+        onClick={handleCreateFile}
+        title="New file"
+      >
+        <Plus className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  );
+}
diff --git a/components/studio/file-explorer.tsx b/components/studio/file-explorer.tsx
new file mode 100644
index 0000000..18ba964
--- /dev/null
+++ b/components/studio/file-explorer.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+import React, { useState, useRef } from "react";
+import { useStudio } from "@/context/studio-provider";
+import { FileTreeItem } from "./file-tree-item";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Search, Plus, Upload, Info } from "lucide-react";
+
+export function FileExplorer() {
+  const { state, dispatch } = useStudio();
+  const [searchQuery, setSearchQuery] = useState("");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const files = Object.values(state.files).sort((a, b) =>
+    a.name.localeCompare(b.name)
+  );
+
+  const filtered = searchQuery
+    ? files.filter((f) =>
+        f.name.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    : files;
+
+  const canDelete = Object.keys(state.files).length > 1;
+
+  const handleCreateFile = () => {
+    // Generate unique name
+    let name = "Untitled.sol";
+    let counter = 1;
+    while (Object.values(state.files).some((f) => f.name === name)) {
+      name = `Untitled${counter}.sol`;
+      counter++;
+    }
+    dispatch({ type: "CREATE_FILE", name, content: "" });
+  };
+
+  const handleUploadSol = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const uploadedFiles = e.target.files;
+    if (!uploadedFiles) return;
+
+    const imports: Array<{ name: string; content: string }> = [];
+    let remaining = uploadedFiles.length;
+
+    Array.from(uploadedFiles).forEach((file) => {
+      if (!file.name.endsWith(".sol")) {
+        remaining--;
+        if (remaining === 0 && imports.length > 0) {
+          dispatch({ type: "IMPORT_FILES", files: imports });
+        }
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = () => {
+        imports.push({ name: file.name, content: reader.result as string });
+        remaining--;
+        if (remaining === 0 && imports.length > 0) {
+          dispatch({ type: "IMPORT_FILES", files: imports });
+        }
+      };
+      reader.readAsText(file);
+    });
+
+    // Reset input so the same file can be uploaded again
+    e.target.value = "";
+  };
+
+  const handleFileClick = (fileId: string) => {
+    dispatch({ type: "OPEN_TAB", fileId });
+    dispatch({ type: "SET_ACTIVE_TAB", fileId });
+  };
+
+  const handleRename = (fileId: string, newName: string): boolean => {
+    const before = state.files[fileId]?.name;
+    dispatch({ type: "RENAME_FILE", fileId, newName });
+    // Check if rename was accepted (reducer rejects duplicates silently)
+    // Since dispatch is sync-ish, we check the name collision ourselves
+    const nameExists = Object.values(state.files).some(
+      (f) => f.id !== fileId && f.name === newName
+    );
+    return !nameExists;
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2 border-b">
+        <span className="text-xs font-semibold uppercase text-muted-foreground tracking-wider">
+          Files
+        </span>
+        <div
+          className="cursor-help"
+          title="Files are flat (no folders). Use import &quot;FileName.sol&quot; for local imports. Renaming a file does not update imports in other files."
+        >
+          <Info className="h-3 w-3 text-muted-foreground" />
+        </div>
+      </div>
+
+      {/* Search */}
+      <div className="px-2 py-1.5">
+        <div className="relative">
+          <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+          <Input
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search files..."
+            className="h-7 text-xs pl-7"
+          />
+        </div>
+      </div>
+
+      {/* File tree */}
+      <div className="flex-1 overflow-y-auto px-1 py-0.5">
+        {filtered.map((file) => (
+          <FileTreeItem
+            key={file.id}
+            name={file.name}
+            isActive={state.activeTabId === file.id}
+            onClick={() => handleFileClick(file.id)}
+            onRename={(newName) => handleRename(file.id, newName)}
+            onDelete={() => dispatch({ type: "DELETE_FILE", fileId: file.id })}
+            canDelete={canDelete}
+          />
+        ))}
+        {filtered.length === 0 && searchQuery && (
+          <p className="text-xs text-muted-foreground text-center py-4">
+            No matching files
+          </p>
+        )}
+      </div>
+
+      {/* Actions */}
+      <div className="p-2 border-t space-y-1.5">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="w-full justify-start gap-2 h-7 text-xs"
+          onClick={handleCreateFile}
+        >
+          <Plus className="h-3.5 w-3.5" />
+          New File
+        </Button>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".sol"
+          multiple
+          onChange={handleUploadSol}
+          className="hidden"
+        />
+        <Button
+          variant="ghost"
+          size="sm"
+          className="w-full justify-start gap-2 h-7 text-xs"
+          onClick={() => fileInputRef.current?.click()}
+        >
+          <Upload className="h-3.5 w-3.5" />
+          Upload .sol
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/components/studio/file-tree-item.tsx b/components/studio/file-tree-item.tsx
new file mode 100644
index 0000000..965f3e4
--- /dev/null
+++ b/components/studio/file-tree-item.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import { FileCode, Pencil, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface FileTreeItemProps {
+  name: string;
+  isActive: boolean;
+  onClick: () => void;
+  onRename: (newName: string) => boolean; // returns false if rejected (duplicate)
+  onDelete: () => void;
+  canDelete: boolean;
+}
+
+export function FileTreeItem({
+  name,
+  isActive,
+  onClick,
+  onRename,
+  onDelete,
+  canDelete,
+}: FileTreeItemProps) {
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [renameValue, setRenameValue] = useState(name);
+  const [renameError, setRenameError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isRenaming && inputRef.current) {
+      inputRef.current.focus();
+      // Select filename without extension
+      const dotIndex = renameValue.lastIndexOf(".");
+      inputRef.current.setSelectionRange(0, dotIndex > 0 ? dotIndex : renameValue.length);
+    }
+  }, [isRenaming]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleRenameSubmit = () => {
+    const trimmed = renameValue.trim();
+    if (!trimmed || trimmed === name) {
+      setIsRenaming(false);
+      setRenameError(null);
+      return;
+    }
+    // Ensure .sol extension
+    const finalName = trimmed.endsWith(".sol") ? trimmed : `${trimmed}.sol`;
+    const accepted = onRename(finalName);
+    if (accepted) {
+      setIsRenaming(false);
+      setRenameError(null);
+    } else {
+      setRenameError("Name already exists");
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") handleRenameSubmit();
+    if (e.key === "Escape") {
+      setIsRenaming(false);
+      setRenameValue(name);
+      setRenameError(null);
+    }
+  };
+
+  if (isRenaming) {
+    return (
+      <div className="px-2 py-0.5">
+        <input
+          ref={inputRef}
+          value={renameValue}
+          onChange={(e) => {
+            setRenameValue(e.target.value);
+            setRenameError(null);
+          }}
+          onBlur={handleRenameSubmit}
+          onKeyDown={handleKeyDown}
+          className={cn(
+            "w-full text-xs bg-background border rounded px-1.5 py-0.5 outline-none",
+            renameError ? "border-red-500" : "border-primary"
+          )}
+        />
+        {renameError && (
+          <p className="text-[10px] text-red-500 mt-0.5">{renameError}</p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "group flex items-center gap-1.5 px-2 py-1 cursor-pointer rounded-sm text-xs hover:bg-accent/50 transition-colors",
+        isActive && "bg-accent text-accent-foreground"
+      )}
+      onClick={onClick}
+    >
+      <FileCode className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+      <span className="flex-1 truncate">{name}</span>
+      <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+        <button
+          className="p-0.5 rounded hover:bg-muted"
+          onClick={(e) => {
+            e.stopPropagation();
+            setRenameValue(name);
+            setIsRenaming(true);
+          }}
+          title="Rename"
+        >
+          <Pencil className="h-3 w-3 text-muted-foreground" />
+        </button>
+        {canDelete && (
+          <button
+            className="p-0.5 rounded hover:bg-muted"
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete();
+            }}
+            title="Delete"
+          >
+            <Trash2 className="h-3 w-3 text-muted-foreground" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/studio/output-panel.tsx b/components/studio/output-panel.tsx
new file mode 100644
index 0000000..b0a80d3
--- /dev/null
+++ b/components/studio/output-panel.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import React from "react";
+import { useContractContext } from "@/context/contract-provider";
+import { Check, AlertCircle, AlertTriangle, ChevronDown, ChevronRight, Upload } from "lucide-react";
+
+interface OutputPanelProps {
+  visible: boolean;
+  onToggle: () => void;
+}
+
+export function OutputPanel({ visible, onToggle }: OutputPanelProps) {
+  const compilation = useContractContext();
+
+  const hasOutput =
+    compilation.errors.length > 0 ||
+    compilation.warnings.length > 0 ||
+    compilation.bytecode ||
+    compilation.isCompiling;
+
+  const errorCount = compilation.errors.length;
+  const warningCount = compilation.warnings.length;
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Toggle header */}
+      <button
+        className="flex items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent/30 transition-colors"
+        onClick={onToggle}
+      >
+        {visible ? (
+          <ChevronDown className="h-3 w-3" />
+        ) : (
+          <ChevronRight className="h-3 w-3" />
+        )}
+        <span className="font-medium">Output</span>
+        {errorCount > 0 && (
+          <span className="text-red-500">{errorCount} error{errorCount > 1 ? "s" : ""}</span>
+        )}
+        {warningCount > 0 && (
+          <span className="text-yellow-600 dark:text-yellow-400">
+            {warningCount} warning{warningCount > 1 ? "s" : ""}
+          </span>
+        )}
+        {!compilation.isCompiling &&
+          compilation.bytecode &&
+          errorCount === 0 &&
+          compilation.bytecodeSource === "compile" && (
+            <span className="flex items-center gap-1 text-green-600 dark:text-green-400">
+              <Check className="h-3 w-3" />
+              Compiled
+              {compilation.contractName && (
+                <span className="text-muted-foreground">
+                  ({compilation.contractName})
+                </span>
+              )}
+            </span>
+          )}
+        {!compilation.isCompiling &&
+          compilation.bytecode &&
+          compilation.bytecodeSource === "upload" && (
+            <span className="flex items-center gap-1 text-muted-foreground">
+              <Upload className="h-3 w-3" />
+              Uploaded
+            </span>
+          )}
+      </button>
+
+      {/* Content */}
+      {visible && (
+        <div className="flex-1 overflow-y-auto bg-muted/30 px-3 py-2 min-h-0">
+          {!hasOutput && (
+            <p className="text-xs text-muted-foreground text-center py-4">
+              Output will appear here after compilation
+            </p>
+          )}
+
+          {compilation.isCompiling && (
+            <p className="text-xs text-muted-foreground">Compiling...</p>
+          )}
+
+          {compilation.bytecode &&
+            compilation.errors.length === 0 &&
+            !compilation.isCompiling &&
+            compilation.bytecodeSource === "compile" && (
+              <div className="flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400 mb-2">
+                <Check className="h-3.5 w-3.5" />
+                Compiled successfully
+                {compilation.contractName && (
+                  <span className="text-muted-foreground ml-1">
+                    ({compilation.contractName})
+                  </span>
+                )}
+              </div>
+            )}
+
+          {compilation.errors.length > 0 && (
+            <div className="flex flex-col gap-1.5 mb-2">
+              {compilation.errors.map((err, i) => (
+                <div
+                  key={i}
+                  className="flex items-start gap-1.5 text-xs text-red-600 dark:text-red-400"
+                >
+                  <AlertCircle className="h-3 w-3 mt-0.5 shrink-0" />
+                  <pre className="whitespace-pre-wrap font-mono break-all text-[11px]">
+                    {err.formattedMessage || err.message}
+                  </pre>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {compilation.warnings.length > 0 && (
+            <div className="flex flex-col gap-1.5">
+              {compilation.warnings.map((warn, i) => (
+                <div
+                  key={i}
+                  className="flex items-start gap-1.5 text-xs text-yellow-700 dark:text-yellow-400"
+                >
+                  <AlertTriangle className="h-3 w-3 mt-0.5 shrink-0" />
+                  <pre className="whitespace-pre-wrap font-mono break-all text-[11px]">
+                    {warn.formattedMessage || warn.message}
+                  </pre>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/studio/right-sidebar.tsx b/components/studio/right-sidebar.tsx
new file mode 100644
index 0000000..7d130d5
--- /dev/null
+++ b/components/studio/right-sidebar.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import React from "react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { CompilerSection } from "./compiler-section";
+import { DeploySection } from "./deploy-section";
+
+export function RightSidebar() {
+  return (
+    <div className="flex flex-col h-full overflow-y-auto">
+      <Accordion
+        type="multiple"
+        defaultValue={["compile", "deploy"]}
+        className="w-full"
+      >
+        <AccordionItem value="compile" className="border-b">
+          <AccordionTrigger className="px-3 py-2 text-xs font-semibold uppercase tracking-wider hover:no-underline">
+            Compile
+          </AccordionTrigger>
+          <AccordionContent className="px-3 pb-3">
+            <CompilerSection />
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="deploy" className="border-b-0">
+          <AccordionTrigger className="px-3 py-2 text-xs font-semibold uppercase tracking-wider hover:no-underline">
+            Deploy
+          </AccordionTrigger>
+          <AccordionContent className="px-3 pb-3">
+            <DeploySection />
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+}
diff --git a/components/studio/status-bar.tsx b/components/studio/status-bar.tsx
new file mode 100644
index 0000000..e4a7205
--- /dev/null
+++ b/components/studio/status-bar.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import React from "react";
+import { useAccount, useChain } from "@luno-kit/react";
+import { useContractContext } from "@/context/contract-provider";
+import { useStudio } from "@/context/studio-provider";
+import { Check, Loader2, AlertCircle, Circle } from "lucide-react";
+
+function truncateAddress(address: string): string {
+  if (address.length <= 12) return address;
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
+
+export function StatusBar() {
+  const { chain } = useChain();
+  const { account } = useAccount();
+  const compilation = useContractContext();
+  const { isDirtySinceCompile } = useStudio();
+
+  const chainName = chain?.name ?? "No chain";
+  const address = account?.address ?? "";
+
+  // Artifact mode badge — shows the mode of the LAST successful compile, NOT the target toggle
+  const artifactMode = compilation.mode;
+
+  return (
+    <div className="flex items-center justify-between px-3 h-7 min-h-7 bg-muted/50 border-t text-[11px] text-muted-foreground select-none">
+      {/* Left: Chain + Address */}
+      <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1.5">
+          <Circle className="h-2 w-2 fill-green-500 text-green-500" />
+          <span>{chainName}</span>
+        </div>
+        {address && (
+          <span className="font-mono text-[10px]">
+            {truncateAddress(address)}
+          </span>
+        )}
+      </div>
+
+      {/* Center: Artifact mode badge */}
+      <div className="flex items-center gap-2">
+        {artifactMode && (
+          <span
+            className={`px-1.5 py-0.5 rounded text-[10px] font-medium uppercase ${
+              artifactMode === "pvm"
+                ? "bg-purple-500/10 text-purple-600 dark:text-purple-400"
+                : "bg-blue-500/10 text-blue-600 dark:text-blue-400"
+            }`}
+          >
+            {artifactMode}
+          </span>
+        )}
+      </div>
+
+      {/* Right: Compile status + dirty indicator */}
+      <div className="flex items-center gap-2">
+        {isDirtySinceCompile && compilation.bytecode && (
+          <span className="text-yellow-600 dark:text-yellow-400">
+            Modified
+          </span>
+        )}
+        {compilation.isCompiling && (
+          <span className="flex items-center gap-1">
+            <Loader2 className="h-3 w-3 animate-spin" />
+            Compiling
+          </span>
+        )}
+        {!compilation.isCompiling &&
+          compilation.bytecode &&
+          compilation.errors.length === 0 &&
+          compilation.bytecodeSource === "compile" && (
+            <span className="flex items-center gap-1 text-green-600 dark:text-green-400">
+              <Check className="h-3 w-3" />
+              Compiled
+            </span>
+          )}
+        {!compilation.isCompiling && compilation.errors.length > 0 && (
+          <span className="flex items-center gap-1 text-red-500">
+            <AlertCircle className="h-3 w-3" />
+            {compilation.errors.length} error
+            {compilation.errors.length > 1 ? "s" : ""}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/studio/studio-layout.tsx b/components/studio/studio-layout.tsx
new file mode 100644
index 0000000..d6341ab
--- /dev/null
+++ b/components/studio/studio-layout.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import React from "react";
+import {
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizableHandle,
+} from "@/components/ui/resizable";
+import { useClient } from "@/context/client";
+import { Skeleton } from "@/components/ui/skeleton";
+import { FileExplorer } from "./file-explorer";
+import { EditorArea } from "./editor-area";
+import { RightSidebar } from "./right-sidebar";
+import { StatusBar } from "./status-bar";
+
+export function StudioLayout() {
+  const { loading } = useClient();
+
+  if (loading) {
+    return (
+      <div className="flex-1 p-4">
+        <Skeleton className="h-full w-full rounded-lg" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0">
+      {/* Main content */}
+      <div className="flex-1 min-h-0">
+        <ResizablePanelGroup direction="horizontal" className="h-full">
+          {/* Left: File explorer */}
+          <ResizablePanel defaultSize="17%" minSize="12%" maxSize="22%">
+            <div className="h-full border-r overflow-hidden">
+              <FileExplorer />
+            </div>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+
+          {/* Center: Editor + Output */}
+          <ResizablePanel defaultSize="53%" minSize="30%">
+            <EditorArea />
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+
+          {/* Right: Compile + Deploy */}
+          <ResizablePanel defaultSize="30%" minSize="22%" maxSize="35%">
+            <div className="h-full border-l overflow-hidden">
+              <RightSidebar />
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* Status bar — reserved height, not absolute */}
+      <StatusBar />
+    </div>
+  );
+}
diff --git a/components/studio/transaction-log.tsx b/components/studio/transaction-log.tsx
new file mode 100644
index 0000000..bd2f63c
--- /dev/null
+++ b/components/studio/transaction-log.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import React from "react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Check, X, Loader2, Info } from "lucide-react";
+
+export interface LogEntry {
+  id: string;
+  type: "info" | "success" | "error" | "pending";
+  message: string;
+  timestamp: Date;
+}
+
+interface TransactionLogProps {
+  entries: LogEntry[];
+}
+
+const ICONS = {
+  info: <Info className="h-3.5 w-3.5 text-blue-500 shrink-0" />,
+  success: <Check className="h-3.5 w-3.5 text-green-500 shrink-0" />,
+  error: <X className="h-3.5 w-3.5 text-red-500 shrink-0" />,
+  pending: <Loader2 className="h-3.5 w-3.5 text-muted-foreground animate-spin shrink-0" />,
+};
+
+export function TransactionLog({ entries }: TransactionLogProps) {
+  return (
+    <ScrollArea className="h-full">
+      <div className="space-y-1.5 p-2">
+        {entries.length === 0 && (
+          <p className="text-xs text-muted-foreground text-center py-4">
+            No activity yet
+          </p>
+        )}
+        {entries.map((entry) => (
+          <div key={entry.id} className="flex items-start gap-2 text-xs">
+            <span className="mt-0.5">{ICONS[entry.type]}</span>
+            <span className="text-muted-foreground flex-1 break-all">
+              {entry.message}
+            </span>
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
new file mode 100644
index 0000000..2f55a32
--- /dev/null
+++ b/components/ui/accordion.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/components/ui/resizable.tsx b/components/ui/resizable.tsx
new file mode 100644
index 0000000..1d2209b
--- /dev/null
+++ b/components/ui/resizable.tsx
@@ -0,0 +1,51 @@
+"use client"
+
+import { GripVertical } from "lucide-react"
+import { Group, Panel, Separator } from "react-resizable-panels"
+import type { GroupProps } from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+type Direction = "horizontal" | "vertical"
+
+const ResizablePanelGroup = ({
+  className,
+  direction,
+  ...props
+}: Omit<GroupProps, "orientation"> & { direction?: Direction }) => (
+  <Group
+    orientation={direction}
+    className={cn(
+      "flex h-full w-full",
+      direction === "vertical" && "flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator> & {
+  withHandle?: boolean
+}) => (
+  <Separator
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </Separator>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..0b4a48d
--- /dev/null
+++ b/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/context/client.tsx b/context/client.tsx
index fc7e41b..c7f501a 100644
--- a/context/client.tsx
+++ b/context/client.tsx
@@ -10,26 +10,31 @@ import {
 } from "react";
 import { DedotClient, WsProvider } from "dedot";
 import type { PolkadotApi } from "@dedot/chaintypes";
+import type { PolkadotAssetHubApi, WestendAssetHubApi, PaseoAssetHubApi } from "@dedot/chaintypes";
 import { useChain } from "@luno-kit/react";
+import { isAssetHubGenesis, type GenericChainClient } from "@/lib/chain-types";
 
 const DEFAULT_RPC = "wss://rpc.polkadot.io";
 
 export interface ClientContextValue {
-  client: DedotClient<PolkadotApi> | null;
+  client: GenericChainClient | null;
   loading: boolean;
+  isAssetHub: boolean;
 }
 
 const ClientContext = createContext<ClientContextValue>({
   client: null,
   loading: true,
+  isAssetHub: false,
 });
 
 export const useClient = () => useContext(ClientContext);
 
 export const ClientProvider = ({ children }: { children: ReactNode }) => {
-  const [client, setClient] = useState<DedotClient<PolkadotApi> | null>(null);
+  const [client, setClient] = useState<GenericChainClient | null>(null);
   const [loading, setLoading] = useState(true);
-  const clientRef = useRef<DedotClient<PolkadotApi> | null>(null);
+  const [isAssetHub, setIsAssetHub] = useState(false);
+  const clientRef = useRef<GenericChainClient | null>(null);
 
   const { chain } = useChain();
   const rpcUrl = chain?.rpcUrls?.webSocket?.[0] ?? DEFAULT_RPC;
@@ -58,15 +63,27 @@ export const ClientProvider = ({ children }: { children: ReactNode }) => {
       if (cancelled) return;
 
       try {
-        const newClient = await DedotClient.new<PolkadotApi>(
-          new WsProvider(rpcUrl)
-        );
+        const genesisHash = chain?.genesisHash?.toLowerCase() ?? "";
+        const isHub = isAssetHubGenesis(genesisHash);
+
+        let newClient: GenericChainClient;
+        if (genesisHash === "0x68d56f15f85d3136970ec16946040bc1752654e906147f7e43e9d539d7c3de2f") {
+          newClient = await DedotClient.new<PolkadotAssetHubApi>(new WsProvider(rpcUrl));
+        } else if (genesisHash === "0x67f9723393ef76214df0118c34bbbd3dbebc8ed46a10973a8c969d48fe7598c9") {
+          newClient = await DedotClient.new<WestendAssetHubApi>(new WsProvider(rpcUrl));
+        } else if (genesisHash === "0xd6eec26135305a8ad257a20d003357284c8aa03d0bdb2b357ab0a22371e11ef2") {
+          newClient = await DedotClient.new<PaseoAssetHubApi>(new WsProvider(rpcUrl));
+        } else {
+          newClient = await DedotClient.new<PolkadotApi>(new WsProvider(rpcUrl));
+        }
+
         if (cancelled) {
           newClient.disconnect().catch(() => {});
           return;
         }
         clientRef.current = newClient;
         setClient(newClient);
+        setIsAssetHub(isHub);
       } catch (error) {
         console.error("Error connecting to chain:", error);
       } finally {
@@ -82,7 +99,7 @@ export const ClientProvider = ({ children }: { children: ReactNode }) => {
   }, [rpcUrl]);
 
   return (
-    <ClientContext.Provider value={{ client, loading }}>
+    <ClientContext.Provider value={{ client, loading, isAssetHub }}>
       {children}
     </ClientContext.Provider>
   );
diff --git a/context/contract-provider.tsx b/context/contract-provider.tsx
new file mode 100644
index 0000000..6cd5752
--- /dev/null
+++ b/context/contract-provider.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import React, { createContext, useContext, useState, useCallback, ReactNode } from "react";
+import type { ContractCompilationState, CompilationError } from "@/lib/contract-store";
+
+interface ContractContextValue extends ContractCompilationState {
+  setCompilation: (update: Partial<ContractCompilationState>) => void;
+  resetCompilation: () => void;
+  selectContract: (name: string) => void;
+}
+
+const INITIAL_STATE: ContractCompilationState = {
+  abi: null,
+  contractName: null,
+  bytecode: null,
+  contractNames: [],
+  allContracts: null,
+  errors: [],
+  warnings: [],
+  isCompiling: false,
+  mode: null,
+  bytecodeSource: null,
+};
+
+const ContractContext = createContext<ContractContextValue>({
+  ...INITIAL_STATE,
+  setCompilation: () => {},
+  resetCompilation: () => {},
+  selectContract: () => {},
+});
+
+export const useContractContext = () => useContext(ContractContext);
+
+export function ContractProvider({ children }: { children: ReactNode }) {
+  const [state, setState] = useState<ContractCompilationState>({ ...INITIAL_STATE });
+
+  const setCompilation = useCallback((update: Partial<ContractCompilationState>) => {
+    setState((prev) => ({ ...prev, ...update }));
+  }, []);
+
+  const resetCompilation = useCallback(() => {
+    setState({ ...INITIAL_STATE });
+  }, []);
+
+  const selectContract = useCallback((name: string) => {
+    setState((prev) => {
+      if (!prev.allContracts || !prev.allContracts[name]) return prev;
+      const contract = prev.allContracts[name];
+      return {
+        ...prev,
+        contractName: name,
+        abi: contract.abi,
+        bytecode: contract.bytecode,
+      };
+    });
+  }, []);
+
+  return (
+    <ContractContext.Provider
+      value={{
+        ...state,
+        setCompilation,
+        resetCompilation,
+        selectContract,
+      }}
+    >
+      {children}
+    </ContractContext.Provider>
+  );
+}
diff --git a/context/studio-provider.tsx b/context/studio-provider.tsx
new file mode 100644
index 0000000..9b0309f
--- /dev/null
+++ b/context/studio-provider.tsx
@@ -0,0 +1,299 @@
+"use client";
+
+import React, {
+  createContext,
+  useContext,
+  useReducer,
+  useEffect,
+  useRef,
+  useCallback,
+  ReactNode,
+} from "react";
+import type {
+  StudioState,
+  StudioAction,
+  StudioFile,
+} from "@/types/studio";
+import {
+  createDefaultState,
+  getAllSources,
+  contentHash,
+} from "@/types/studio";
+
+const SESSION_KEY = "studio-workspace";
+const PERSIST_DEBOUNCE_MS = 1000;
+const SIZE_WARN_BYTES = 50_000;
+
+// --- Filename validation (matches /api/compile flat namespace rules) ---
+
+function isValidFileName(name: string): boolean {
+  return !!name && !name.includes("/") && !name.includes("..") && !name.includes("\\");
+}
+
+// --- Reducer (exported for testing) ---
+
+export function studioReducer(state: StudioState, action: StudioAction): StudioState {
+  switch (action.type) {
+    case "CREATE_FILE": {
+      // Reject if name is invalid (contains path separators) or already exists
+      if (!isValidFileName(action.name)) return state;
+      const nameExists = Object.values(state.files).some(
+        (f) => f.name === action.name
+      );
+      if (nameExists) return state;
+
+      const id = crypto.randomUUID();
+      const newFile: StudioFile = {
+        id,
+        name: action.name,
+        content: action.content ?? "",
+      };
+      return {
+        ...state,
+        files: { ...state.files, [id]: newFile },
+        openTabs: [...state.openTabs, { fileId: id }],
+        activeTabId: id,
+      };
+    }
+
+    case "RENAME_FILE": {
+      const file = state.files[action.fileId];
+      if (!file) return state;
+      // Reject if name is invalid or target name exists (on a different file)
+      if (!isValidFileName(action.newName)) return state;
+      const nameExists = Object.values(state.files).some(
+        (f) => f.id !== action.fileId && f.name === action.newName
+      );
+      if (nameExists) return state;
+
+      return {
+        ...state,
+        files: {
+          ...state.files,
+          [action.fileId]: { ...file, name: action.newName },
+        },
+      };
+    }
+
+    case "DELETE_FILE": {
+      const fileIds = Object.keys(state.files);
+      // Reject if only one file remains
+      if (fileIds.length <= 1) return state;
+
+      const { [action.fileId]: _, ...remainingFiles } = state.files;
+      const newTabs = state.openTabs.filter((t) => t.fileId !== action.fileId);
+
+      // Focus neighbor if active tab was deleted
+      let newActiveId = state.activeTabId;
+      if (state.activeTabId === action.fileId) {
+        const oldIndex = state.openTabs.findIndex(
+          (t) => t.fileId === action.fileId
+        );
+        if (newTabs.length > 0) {
+          const neighborIndex = Math.min(oldIndex, newTabs.length - 1);
+          newActiveId = newTabs[neighborIndex].fileId;
+        } else {
+          // No open tabs — pick the first remaining file
+          newActiveId = Object.keys(remainingFiles)[0] || null;
+        }
+      }
+
+      return {
+        ...state,
+        files: remainingFiles,
+        openTabs: newTabs,
+        activeTabId: newActiveId,
+      };
+    }
+
+    case "UPDATE_FILE_CONTENT": {
+      const file = state.files[action.fileId];
+      if (!file) return state;
+      return {
+        ...state,
+        files: {
+          ...state.files,
+          [action.fileId]: { ...file, content: action.content },
+        },
+      };
+    }
+
+    case "IMPORT_FILES": {
+      let newFiles = { ...state.files };
+      let newTabs = [...state.openTabs];
+      let firstNewId: string | null = null;
+
+      for (const { name, content } of action.files) {
+        // Skip duplicates
+        const exists = Object.values(newFiles).some((f) => f.name === name);
+        if (exists) continue;
+
+        const id = crypto.randomUUID();
+        newFiles[id] = { id, name, content };
+        newTabs.push({ fileId: id });
+        if (!firstNewId) firstNewId = id;
+      }
+
+      return {
+        ...state,
+        files: newFiles,
+        openTabs: newTabs,
+        activeTabId: firstNewId || state.activeTabId,
+      };
+    }
+
+    case "OPEN_TAB": {
+      // Don't add duplicate tabs
+      if (state.openTabs.some((t) => t.fileId === action.fileId)) {
+        return { ...state, activeTabId: action.fileId };
+      }
+      return {
+        ...state,
+        openTabs: [...state.openTabs, { fileId: action.fileId }],
+        activeTabId: action.fileId,
+      };
+    }
+
+    case "CLOSE_TAB": {
+      const newTabs = state.openTabs.filter(
+        (t) => t.fileId !== action.fileId
+      );
+      let newActiveId = state.activeTabId;
+
+      if (state.activeTabId === action.fileId) {
+        const oldIndex = state.openTabs.findIndex(
+          (t) => t.fileId === action.fileId
+        );
+        if (newTabs.length > 0) {
+          const neighborIndex = Math.min(oldIndex, newTabs.length - 1);
+          newActiveId = newTabs[neighborIndex].fileId;
+        } else {
+          newActiveId = null;
+        }
+      }
+
+      return {
+        ...state,
+        openTabs: newTabs,
+        activeTabId: newActiveId,
+      };
+    }
+
+    case "SET_ACTIVE_TAB":
+      return { ...state, activeTabId: action.fileId };
+
+    case "SET_COMPILE_TARGET":
+      return { ...state, compileTarget: action.target };
+
+    case "SET_COMPILED_HASH":
+      return { ...state, compiledContentHash: action.hash };
+
+    case "TOGGLE_SIDEBAR":
+      return { ...state, sidebarCollapsed: !state.sidebarCollapsed };
+
+    case "TOGGLE_OUTPUT":
+      return { ...state, outputVisible: !state.outputVisible };
+
+    case "HYDRATE":
+      return action.state;
+
+    default:
+      return state;
+  }
+}
+
+// --- Context ---
+
+interface StudioContextValue {
+  state: StudioState;
+  dispatch: React.Dispatch<StudioAction>;
+  activeFile: StudioFile | null;
+  allSources: Record<string, { content: string }>;
+  isDirtySinceCompile: boolean;
+  currentContentHash: string;
+}
+
+const StudioContext = createContext<StudioContextValue | null>(null);
+
+export function useStudio(): StudioContextValue {
+  const ctx = useContext(StudioContext);
+  if (!ctx) throw new Error("useStudio must be used within StudioProvider");
+  return ctx;
+}
+
+// --- Provider ---
+
+export function StudioProvider({ children }: { children: ReactNode }) {
+  const [state, dispatch] = useReducer(studioReducer, null, () => {
+    // Try hydrating from sessionStorage
+    if (typeof window === "undefined") return createDefaultState();
+    try {
+      const stored = sessionStorage.getItem(SESSION_KEY);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        // Basic validation
+        if (parsed.files && parsed.openTabs) {
+          return { ...createDefaultState(), ...parsed } as StudioState;
+        }
+      }
+    } catch {
+      // Fall through to default
+    }
+    return createDefaultState();
+  });
+
+  // Debounced sessionStorage persistence
+  const persistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
+    persistTimerRef.current = setTimeout(() => {
+      try {
+        const serialized = JSON.stringify({
+          files: state.files,
+          openTabs: state.openTabs,
+          activeTabId: state.activeTabId,
+          sidebarCollapsed: state.sidebarCollapsed,
+          outputVisible: state.outputVisible,
+          compileTarget: state.compileTarget,
+          // Don't persist compiledContentHash — artifacts aren't persisted
+        });
+        if (serialized.length > SIZE_WARN_BYTES) {
+          console.warn(
+            `[Studio] Workspace state is ${(serialized.length / 1024).toFixed(1)}KB`
+          );
+        }
+        sessionStorage.setItem(SESSION_KEY, serialized);
+      } catch {
+        // sessionStorage full or unavailable
+      }
+    }, PERSIST_DEBOUNCE_MS);
+    return () => {
+      if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
+    };
+  }, [state]);
+
+  // Derived values
+  const activeFile = state.activeTabId
+    ? state.files[state.activeTabId] ?? null
+    : null;
+
+  const allSources = getAllSources(state.files);
+  const currentContentHash = contentHash(allSources);
+
+  const isDirtySinceCompile =
+    state.compiledContentHash === null ||
+    state.compiledContentHash !== currentContentHash;
+
+  const value: StudioContextValue = {
+    state,
+    dispatch,
+    activeFile,
+    allSources,
+    isDirtySinceCompile,
+    currentContentHash,
+  };
+
+  return (
+    <StudioContext.Provider value={value}>{children}</StudioContext.Provider>
+  );
+}
diff --git a/hooks/use-chain-token.ts b/hooks/use-chain-token.ts
index 6c32c0b..ad97763 100644
--- a/hooks/use-chain-token.ts
+++ b/hooks/use-chain-token.ts
@@ -1,8 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import type { DedotClient } from "dedot";
-import type { PolkadotApi } from "@dedot/chaintypes";
+import type { GenericChainClient } from "@/lib/chain-types";
 import { getDenominations, type Denomination } from "@/lib/denominations";
 
 export interface ChainTokenInfo {
@@ -14,7 +13,7 @@ export interface ChainTokenInfo {
 }
 
 export function useChainToken(
-  client: DedotClient<PolkadotApi> | null
+  client: GenericChainClient | null
 ): ChainTokenInfo {
   const [info, setInfo] = useState<Omit<ChainTokenInfo, "loading">>({
     symbol: "DOT",
diff --git a/hooks/use-gas-estimation.ts b/hooks/use-gas-estimation.ts
new file mode 100644
index 0000000..cea022d
--- /dev/null
+++ b/hooks/use-gas-estimation.ts
@@ -0,0 +1,168 @@
+"use client";
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import type { DedotClient } from "dedot";
+import type { AssetHubApi, GenericChainClient } from "@/lib/chain-types";
+import { hasReviveApi } from "@/lib/chain-types";
+
+export interface GasEstimationResult {
+  estimating: boolean;
+  weightRequired: { refTime: bigint; proofSize: bigint } | null;
+  storageDeposit: { type: "Charge" | "Refund"; value: bigint } | null;
+  gasConsumed: bigint | null;
+  deployedAddress: string | null;
+  error: string | null;
+  estimate: () => Promise<void>;
+}
+
+const BUFFER_PERCENT = BigInt(10);
+
+function applyBuffer(value: bigint): bigint {
+  return value + (value * BUFFER_PERCENT) / BigInt(100);
+}
+
+export function useGasEstimation(
+  client: GenericChainClient | null,
+  origin: string,
+  value: bigint,
+  code: string | Uint8Array,
+  data: string,
+  salt?: string
+): GasEstimationResult {
+  const [estimating, setEstimating] = useState(false);
+  const [weightRequired, setWeightRequired] = useState<{
+    refTime: bigint;
+    proofSize: bigint;
+  } | null>(null);
+  const [storageDeposit, setStorageDeposit] = useState<{
+    type: "Charge" | "Refund";
+    value: bigint;
+  } | null>(null);
+  const [gasConsumed, setGasConsumed] = useState<bigint | null>(null);
+  const [deployedAddress, setDeployedAddress] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // Invalidate gas estimates when any deploy input changes (including account)
+  const prevInputsRef = useRef({ origin, value, code, data, salt });
+  useEffect(() => {
+    const prev = prevInputsRef.current;
+    if (
+      prev.origin !== origin ||
+      prev.value !== value ||
+      prev.code !== code ||
+      prev.data !== data ||
+      prev.salt !== salt
+    ) {
+      prevInputsRef.current = { origin, value, code, data, salt };
+      setWeightRequired(null);
+      setStorageDeposit(null);
+      setGasConsumed(null);
+      setDeployedAddress(null);
+      setError(null);
+    }
+  }, [origin, value, code, data, salt]);
+
+  const estimate = useCallback(async () => {
+    if (!client) {
+      setError("No client connected");
+      return;
+    }
+
+    if (!hasReviveApi(client)) {
+      setError("Connected chain does not support Revive API. Switch to an Asset Hub chain.");
+      return;
+    }
+
+    if (!origin) {
+      setError("No account connected. Connect a wallet first.");
+      return;
+    }
+
+    if (!code) {
+      setError("No bytecode provided. Compile a contract first.");
+      return;
+    }
+
+    setEstimating(true);
+    setError(null);
+    setWeightRequired(null);
+    setStorageDeposit(null);
+    setGasConsumed(null);
+    setDeployedAddress(null);
+
+    try {
+      const assetHubClient = client as DedotClient<AssetHubApi>;
+
+      // Prepare code as Upload variant — ensure hex string type
+      const codeHex = typeof code === "string" ? code : `0x${Buffer.from(code).toString("hex")}`;
+      const codeParam = { type: "Upload" as const, value: codeHex as `0x${string}` };
+
+      // Salt: undefined means no salt
+      const saltParam = salt && salt !== "" ? (salt as `0x${string}`) : undefined;
+
+      const result = await assetHubClient.call.reviveApi.instantiate(
+        origin,
+        value,
+        undefined, // gas_limit: let the runtime estimate
+        undefined, // storage_deposit_limit: let the runtime estimate
+        codeParam,
+        (data || "0x") as `0x${string}`,
+        saltParam
+      );
+
+      // Check if the dry-run succeeded before populating estimate state
+      if (result.result.isOk) {
+        // Apply 10% buffer to weight
+        const bufferedWeight = {
+          refTime: applyBuffer(result.weightRequired.refTime),
+          proofSize: applyBuffer(result.weightRequired.proofSize),
+        };
+        setWeightRequired(bufferedWeight);
+
+        // Storage deposit with buffer (only for Charge)
+        const sd = result.storageDeposit;
+        if (sd.type === "Charge") {
+          setStorageDeposit({
+            type: "Charge",
+            value: applyBuffer(sd.value),
+          });
+        } else {
+          setStorageDeposit({
+            type: "Refund",
+            value: sd.value,
+          });
+        }
+
+        setGasConsumed(result.gasConsumed);
+
+        const instantiateResult = result.result.value;
+        if (instantiateResult.addr) {
+          const addr = instantiateResult.addr;
+          setDeployedAddress(typeof addr === "string" ? addr : String(addr));
+        }
+      } else {
+        // Dry-run failed — keep estimate state null so consumers don't act on it
+        const dispatchError = result.result.err;
+        const errorMsg = dispatchError
+          ? `Dry-run failed: ${JSON.stringify(dispatchError)}`
+          : "Dry-run failed with unknown error";
+        setError(errorMsg);
+      }
+    } catch (e) {
+      const message = e instanceof Error ? e.message : "Gas estimation failed";
+      setError(message);
+    } finally {
+      setEstimating(false);
+    }
+  }, [client, origin, value, code, data, salt]);
+
+  return {
+    estimating,
+    weightRequired,
+    storageDeposit,
+    gasConsumed,
+    deployedAddress,
+    error,
+    estimate,
+  };
+}
diff --git a/hooks/use-pallet-context.ts b/hooks/use-pallet-context.ts
index 6523ac6..01cb8dc 100644
--- a/hooks/use-pallet-context.ts
+++ b/hooks/use-pallet-context.ts
@@ -1,8 +1,7 @@
 "use client";
 
 import { useState, useEffect, useRef, useCallback } from "react";
-import type { DedotClient } from "dedot";
-import type { PolkadotApi } from "@dedot/chaintypes";
+import type { GenericChainClient } from "@/lib/chain-types";
 import { useChain } from "@luno-kit/react";
 import type { PalletContextData, ContextGroup } from "@/types/pallet-context";
 import { networkFromGenesisHash } from "@/types/pallet-context";
@@ -19,7 +18,7 @@ interface PalletContextResult {
 const contextCache = new Map<string, PalletContextData>();
 
 export function usePalletContext(
-  client: DedotClient<PolkadotApi> | null,
+  client: GenericChainClient | null,
   palletName: string | undefined
 ): PalletContextResult {
   const [context, setContext] = useState<PalletContextData | null>(null);
diff --git a/hooks/use-ss58.ts b/hooks/use-ss58.ts
index 302a1d6..0511094 100644
--- a/hooks/use-ss58.ts
+++ b/hooks/use-ss58.ts
@@ -1,8 +1,7 @@
 "use client";
 
 import { useMemo, useCallback } from "react";
-import { DedotClient } from "dedot";
-import type { PolkadotApi } from "@dedot/chaintypes";
+import type { GenericChainClient } from "@/lib/chain-types";
 import { encodeAddress, decodeAddress } from "dedot/utils";
 
 interface UseSS58Result {
@@ -13,7 +12,7 @@ interface UseSS58Result {
 }
 
 export function useSS58(
-  client: DedotClient<PolkadotApi> | null
+  client: GenericChainClient | null
 ): UseSS58Result {
   const ss58Prefix = useMemo(() => {
     if (!client) return 42; // Generic Substrate default
diff --git a/jest.polyfills.ts b/jest.polyfills.ts
index ba4e062..a652f38 100644
--- a/jest.polyfills.ts
+++ b/jest.polyfills.ts
@@ -1,7 +1,18 @@
 import { TextDecoder, TextEncoder } from "util";
+import { randomUUID } from "crypto";
 
 Object.assign(global, { TextDecoder, TextEncoder });
 
+// crypto.randomUUID polyfill for jsdom
+if (!globalThis.crypto?.randomUUID) {
+  Object.defineProperty(globalThis, "crypto", {
+    value: {
+      ...globalThis.crypto,
+      randomUUID,
+    },
+  });
+}
+
 // ResizeObserver polyfill for cmdk (used by shadcn Command component)
 global.ResizeObserver = class ResizeObserver {
   observe() {}
diff --git a/lib/chain-types.ts b/lib/chain-types.ts
new file mode 100644
index 0000000..eb18540
--- /dev/null
+++ b/lib/chain-types.ts
@@ -0,0 +1,36 @@
+import type { PolkadotApi, PolkadotAssetHubApi, WestendAssetHubApi, PaseoAssetHubApi } from "@dedot/chaintypes";
+import type { DedotClient } from "dedot";
+
+export type AssetHubApi = PolkadotAssetHubApi | WestendAssetHubApi | PaseoAssetHubApi;
+export type AnyChainApi = PolkadotApi | AssetHubApi;
+
+/**
+ * Generic client type used throughout the app for metadata/registry/tx/consts access.
+ * DedotClient is invariant on its type parameter, so a union like
+ * `DedotClient<PolkadotApi | AssetHubApi>` is not assignable from specific clients.
+ * We use `DedotClient<any>` as the shared type — all generic DedotClient features
+ * (metadata, registry, tx, consts, chainSpec) work identically regardless of the
+ * chain API type parameter.
+ */
+export type GenericChainClient = DedotClient<any>; // eslint-disable-line
+
+const ASSET_HUB_GENESIS = new Set([
+  "0x68d56f15f85d3136970ec16946040bc1752654e906147f7e43e9d539d7c3de2f", // Polkadot Asset Hub
+  "0x67f9723393ef76214df0118c34bbbd3dbebc8ed46a10973a8c969d48fe7598c9", // Westend Asset Hub
+  "0xd6eec26135305a8ad257a20d003357284c8aa03d0bdb2b357ab0a22371e11ef2", // Paseo Asset Hub
+]);
+
+export function isAssetHubGenesis(genesisHash: string): boolean {
+  return ASSET_HUB_GENESIS.has(genesisHash.toLowerCase());
+}
+
+export function hasReviveApi(client: GenericChainClient): client is DedotClient<AssetHubApi> {
+  // Dedot uses proxy chains for runtime API access — merely accessing
+  // `client.call.reviveApi.instantiate` triggers an API spec lookup that
+  // throws UnknownApiError on chains without ReviveApi. Use try/catch.
+  try {
+    return typeof (client as any).call?.reviveApi?.instantiate === "function";
+  } catch {
+    return false;
+  }
+}
diff --git a/lib/compile-client.ts b/lib/compile-client.ts
new file mode 100644
index 0000000..6510cb9
--- /dev/null
+++ b/lib/compile-client.ts
@@ -0,0 +1,128 @@
+import type { CompilationError } from "@/lib/contract-store";
+
+export interface CompileResult {
+  success: boolean;
+  contracts: Record<string, { abi: any[]; bytecode: string }> | null;
+  contractNames: string[];
+  errors: CompilationError[];
+  warnings: CompilationError[];
+}
+
+/**
+ * Compile Solidity source code via the /api/compile endpoint.
+ * Shared between the builder's ContractCode component and the Studio's CompilePanel.
+ */
+export async function compileSolidity(
+  source: string,
+  mode: "evm" | "pvm"
+): Promise<CompileResult> {
+  const res = await fetch("/api/compile", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ source, mode }),
+  });
+
+  const data = await res.json();
+
+  if (!res.ok) {
+    return {
+      success: false,
+      contracts: null,
+      contractNames: [],
+      errors: data.errors || [
+        {
+          message: data.error || "Compilation failed",
+          severity: "error",
+        },
+      ],
+      warnings: [],
+    };
+  }
+
+  if (!data.success) {
+    return {
+      success: false,
+      contracts: null,
+      contractNames: [],
+      errors: data.errors || [{ message: "Compilation failed", severity: "error" }],
+      warnings: data.warnings || [],
+    };
+  }
+
+  return {
+    success: true,
+    contracts: data.contracts || {},
+    contractNames: data.contractNames || [],
+    errors: data.errors || [],
+    warnings: data.warnings || [],
+  };
+}
+
+const MAX_CLIENT_BODY_SIZE = 450_000; // 450KB — headroom for JSON overhead
+
+/**
+ * Compile multiple Solidity source files via the /api/compile endpoint.
+ * Used by the Studio's multi-file workspace.
+ */
+export async function compileSoliditySources(
+  sources: Record<string, { content: string }>,
+  mode: "evm" | "pvm"
+): Promise<CompileResult> {
+  // Client-side size preflight
+  const body = JSON.stringify({ sources, mode });
+  if (body.length > MAX_CLIENT_BODY_SIZE) {
+    return {
+      success: false,
+      contracts: null,
+      contractNames: [],
+      errors: [
+        {
+          message: `Source files too large (${(body.length / 1024).toFixed(0)}KB, max ~440KB). Reduce file sizes or compile externally.`,
+          severity: "error",
+        },
+      ],
+      warnings: [],
+    };
+  }
+
+  const res = await fetch("/api/compile", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body,
+  });
+
+  const data = await res.json();
+
+  if (!res.ok) {
+    return {
+      success: false,
+      contracts: null,
+      contractNames: [],
+      errors: data.errors || [
+        {
+          message: data.error || "Compilation failed",
+          severity: "error",
+        },
+      ],
+      warnings: [],
+    };
+  }
+
+  if (!data.success) {
+    return {
+      success: false,
+      contracts: null,
+      contractNames: [],
+      errors: data.errors || [{ message: "Compilation failed", severity: "error" }],
+      warnings: data.warnings || [],
+    };
+  }
+
+  return {
+    success: true,
+    contracts: data.contracts || {},
+    contractNames: data.contractNames || [],
+    errors: data.errors || [],
+    warnings: data.warnings || [],
+  };
+}
diff --git a/lib/contract-store.ts b/lib/contract-store.ts
index 3df9cc9..cc9a8ee 100644
--- a/lib/contract-store.ts
+++ b/lib/contract-store.ts
@@ -17,7 +17,8 @@ export interface ContractCompilationState {
   errors: CompilationError[];
   warnings: CompilationError[];
   isCompiling: boolean;
-  mode: "evm" | "pvm";
+  mode: "evm" | "pvm" | null;
+  bytecodeSource: "compile" | "upload" | null;
 }
 
 const INITIAL_STATE: ContractCompilationState = {
@@ -29,7 +30,8 @@ const INITIAL_STATE: ContractCompilationState = {
   errors: [],
   warnings: [],
   isCompiling: false,
-  mode: "pvm",
+  mode: null,
+  bytecodeSource: null,
 };
 
 let state: ContractCompilationState = { ...INITIAL_STATE };
diff --git a/lib/fee-display.ts b/lib/fee-display.ts
new file mode 100644
index 0000000..79be7b7
--- /dev/null
+++ b/lib/fee-display.ts
@@ -0,0 +1,42 @@
+import { fromPlanck, getDenominations } from "@/lib/denominations";
+
+/**
+ * Format a planck amount as a human-readable fee string in the chain's native token.
+ * E.g., "0.0123 DOT" or "123.45 WND"
+ */
+export function formatFee(
+  planckValue: bigint,
+  symbol: string,
+  decimals: number
+): string {
+  const denoms = getDenominations(symbol, decimals);
+  // Use the main denomination (first one = full token)
+  const mainDenom = denoms[0];
+  const formatted = fromPlanck(planckValue.toString(), mainDenom);
+  return `${formatted} ${symbol}`;
+}
+
+/**
+ * Format a weight value for display.
+ */
+export function formatWeight(weight: { refTime: bigint; proofSize: bigint }): string {
+  const refTime = formatCompact(weight.refTime);
+  const proofSize = formatCompact(weight.proofSize);
+  return `refTime: ${refTime}, proofSize: ${proofSize}`;
+}
+
+function formatCompact(value: bigint): string {
+  if (value >= BigInt(1_000_000_000)) {
+    const billions = Number(value) / 1_000_000_000;
+    return `${billions.toFixed(2)}B`;
+  }
+  if (value >= BigInt(1_000_000)) {
+    const millions = Number(value) / 1_000_000;
+    return `${millions.toFixed(2)}M`;
+  }
+  if (value >= BigInt(1_000)) {
+    const thousands = Number(value) / 1_000;
+    return `${thousands.toFixed(2)}K`;
+  }
+  return value.toString();
+}
diff --git a/lib/import-resolver.ts b/lib/import-resolver.ts
index aed6a29..27e41ac 100644
--- a/lib/import-resolver.ts
+++ b/lib/import-resolver.ts
@@ -216,6 +216,84 @@ function extractMissingImports(
   return [...new Set(missing)]; // Deduplicate
 }
 
+/**
+ * Resolve all imports for multiple user source files.
+ * User sources are authoritative — they are never overwritten by CDN fetches.
+ * The compiler handles relative imports between user files natively.
+ */
+export async function resolveAllImportsSources(
+  userSources: Record<string, { content: string }>
+): Promise<ResolvedSources> {
+  const abortController = new AbortController();
+  const session = new ResolutionSession(abortController);
+  const budgetTimer = setTimeout(() => abortController.abort(), TOTAL_BUDGET_MS);
+  const userKeys = new Set(Object.keys(userSources));
+
+  try {
+    const sources: Record<string, { content: string }> = { ...userSources };
+
+    // Quick check: if no source has imports, skip resolution
+    const hasAnyImport = Object.values(userSources).some((s) =>
+      s.content.includes("import")
+    );
+    if (!hasAnyImport) {
+      return { sources, resolvedVersions: {} };
+    }
+
+    // eslint-disable-next-line
+    const solc = require("solc");
+
+    for (let iteration = 0; iteration < MAX_ITERATIONS; iteration++) {
+      const input = JSON.stringify({
+        language: "Solidity",
+        sources,
+        settings: { outputSelection: {} },
+      });
+
+      const output = JSON.parse(solc.compile(input));
+      const errors = output.errors || [];
+      const missingPaths = extractMissingImports(errors);
+
+      if (missingPaths.length === 0) break;
+
+      for (const importPath of missingPaths) {
+        if (sources[importPath]) continue;
+
+        // CDN shadowing prevention: only skip if the exact import path
+        // matches a user source key. Don't match on basename alone — that
+        // would block legitimate dependencies like @openzeppelin/.../Context.sol
+        // when the user has a local Context.sol.
+        if (userKeys.has(importPath)) continue;
+
+        let resolvedPath: string | null = null;
+        for (const existingPath of Object.keys(sources)) {
+          const candidate = session.resolveRelativePath(existingPath, importPath);
+          if (candidate && !sources[candidate]) {
+            resolvedPath = candidate;
+            break;
+          }
+        }
+
+        const pathToFetch = resolvedPath || importPath;
+        const content = await session.fetchFile(pathToFetch);
+        sources[pathToFetch] = { content };
+
+        if (resolvedPath && resolvedPath !== importPath) {
+          sources[importPath] = { content };
+        }
+      }
+    }
+
+    return {
+      sources,
+      resolvedVersions: session.getResolvedVersions(),
+    };
+  } finally {
+    clearTimeout(budgetTimer);
+    abortController.abort();
+  }
+}
+
 /**
  * Resolve all imports for a Solidity source file using compiler-driven iteration.
  *
diff --git a/lib/parser.ts b/lib/parser.ts
index 11f6d4c..deda2ae 100644
--- a/lib/parser.ts
+++ b/lib/parser.ts
@@ -1,5 +1,4 @@
-import { PolkadotApi } from "@dedot/chaintypes";
-import { DedotClient } from "dedot";
+import type { GenericChainClient } from "@/lib/chain-types";
 import { Metadata, TypeDef } from "dedot/codecs";
 import { assert, stringCamelCase } from "dedot/utils";
 
@@ -35,7 +34,7 @@ export type ClientMethod = {
 };
 
 export function createMethodOptions(
-  client: DedotClient<PolkadotApi>,
+  client: GenericChainClient,
   sectionIndex: number
 ): { text: string; value: number }[] | null {
   const pallet = client.metadata.latest.pallets.find(
@@ -68,7 +67,7 @@ export function createMethodOptions(
  * }
  *
  */
-export function getArgType(client: DedotClient<PolkadotApi>, typeId: number) {
+export function getArgType(client: GenericChainClient, typeId: number) {
   const type = client.registry.findType(typeId);
   return getTypeDetails(type.typeDef);
 }
diff --git a/package.json b/package.json
index 1d285eb..2674995 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "@parity/resolc": "^1.0.0",
     "@polkadot/ui-shared": "^3.16.4",
     "@polkadot/util-crypto": "^14.0.1",
-    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.4",
     "@radix-ui/react-aspect-ratio": "^1.1.1",
     "@radix-ui/react-avatar": "^1.1.2",
@@ -36,7 +36,7 @@
     "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-progress": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.2.2",
-    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slider": "^1.2.2",
@@ -74,7 +74,7 @@
     "react-hook-form": "^7.54.1",
     "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1",
-    "react-resizable-panels": "^2.1.7",
+    "react-resizable-panels": "^4.7.3",
     "react-wrap-balancer": "latest",
     "recharts": "2.15.0",
     "solc": "^0.8.34",
diff --git a/types/studio.ts b/types/studio.ts
new file mode 100644
index 0000000..37cbe3a
--- /dev/null
+++ b/types/studio.ts
@@ -0,0 +1,97 @@
+export interface StudioFile {
+  id: string;
+  name: string; // e.g., "MyToken.sol"
+  content: string;
+}
+
+export interface OpenTab {
+  fileId: string;
+}
+
+export interface StudioState {
+  files: Record<string, StudioFile>; // keyed by ID
+  openTabs: OpenTab[];
+  activeTabId: string | null;
+  sidebarCollapsed: boolean;
+  outputVisible: boolean;
+  compileTarget: "evm" | "pvm"; // user's INTENT (what they'll compile next)
+  compiledContentHash: string | null; // hash of all sources at last successful compile
+}
+
+export type StudioAction =
+  | { type: "CREATE_FILE"; name: string; content?: string }
+  | { type: "RENAME_FILE"; fileId: string; newName: string }
+  | { type: "DELETE_FILE"; fileId: string }
+  | { type: "UPDATE_FILE_CONTENT"; fileId: string; content: string }
+  | { type: "IMPORT_FILES"; files: Array<{ name: string; content: string }> }
+  | { type: "OPEN_TAB"; fileId: string }
+  | { type: "CLOSE_TAB"; fileId: string }
+  | { type: "SET_ACTIVE_TAB"; fileId: string }
+  | { type: "SET_COMPILE_TARGET"; target: "evm" | "pvm" }
+  | { type: "SET_COMPILED_HASH"; hash: string }
+  | { type: "TOGGLE_SIDEBAR" }
+  | { type: "TOGGLE_OUTPUT" }
+  | { type: "HYDRATE"; state: StudioState };
+
+// --- Content hash utility ---
+
+/**
+ * Fast non-crypto hash (djb2) for content equality comparison.
+ * Hashes sorted file names + contents.
+ */
+export function contentHash(
+  sources: Record<string, { content: string }>
+): string {
+  const keys = Object.keys(sources).sort();
+  let hash = 5381;
+  for (const key of keys) {
+    const str = key + "\0" + sources[key].content;
+    for (let i = 0; i < str.length; i++) {
+      hash = ((hash << 5) + hash + str.charCodeAt(i)) | 0;
+    }
+  }
+  return hash.toString(36);
+}
+
+export const DEFAULT_SOLIDITY = `// SPDX-License-Identifier: MIT
+pragma solidity ^0.8.20;
+
+contract MyToken {
+    string public name;
+    uint256 public totalSupply;
+    mapping(address => uint256) public balanceOf;
+
+    constructor(string memory _name, uint256 _initialSupply) {
+        name = _name;
+        totalSupply = _initialSupply;
+        balanceOf[msg.sender] = _initialSupply;
+    }
+}`;
+
+export function createDefaultState(): StudioState {
+  const id = crypto.randomUUID();
+  return {
+    files: {
+      [id]: { id, name: "Contract.sol", content: DEFAULT_SOLIDITY },
+    },
+    openTabs: [{ fileId: id }],
+    activeTabId: id,
+    sidebarCollapsed: false,
+    outputVisible: true,
+    compileTarget: "pvm",
+    compiledContentHash: null,
+  };
+}
+
+/**
+ * Build allSources map (fileName → {content}) for compile API.
+ */
+export function getAllSources(
+  files: Record<string, StudioFile>
+): Record<string, { content: string }> {
+  const sources: Record<string, { content: string }> = {};
+  for (const file of Object.values(files)) {
+    sources[file.name] = { content: file.content };
+  }
+  return sources;
+}
diff --git a/yarn.lock b/yarn.lock
index e7a45c9..273ba4a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1796,9 +1796,9 @@
   resolved "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz"
   integrity sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==
 
-"@radix-ui/react-accordion@^1.2.12", "@radix-ui/react-accordion@^1.2.2":
+"@radix-ui/react-accordion@^1.2.12":
   version "1.2.12"
-  resolved "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz#1fd70d4ef36018012b9e03324ff186de7a29c13f"
   integrity sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==
   dependencies:
     "@radix-ui/primitive" "1.1.3"
@@ -2176,9 +2176,9 @@
     "@radix-ui/react-use-callback-ref" "1.1.1"
     "@radix-ui/react-use-controllable-state" "1.2.2"
 
-"@radix-ui/react-scroll-area@^1.2.10", "@radix-ui/react-scroll-area@^1.2.2":
+"@radix-ui/react-scroll-area@^1.2.10":
   version "1.2.10"
-  resolved "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz#e4fd3b4a79bb77bec1a52f0c8f26d8f3f1ca4b22"
   integrity sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==
   dependencies:
     "@radix-ui/number" "1.1.1"
@@ -8271,10 +8271,10 @@ react-remove-scroll@^2.6.3, react-remove-scroll@^2.7.1:
     use-callback-ref "^1.3.3"
     use-sidecar "^1.1.3"
 
-react-resizable-panels@^2.1.7:
-  version "2.1.9"
-  resolved "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.9.tgz"
-  integrity sha512-z77+X08YDIrgAes4jl8xhnUu1LNIRp4+E7cv4xHmLOxxUPO/ML7PSrE813b90vj7xvQ1lcf7g2uA9GeMZonjhQ==
+react-resizable-panels@^4.7.3:
+  version "4.7.3"
+  resolved "https://registry.yarnpkg.com/react-resizable-panels/-/react-resizable-panels-4.7.3.tgz#4040aa0f5c5c4cc4bb685cb69973601ccda3b014"
+  integrity sha512-PYcYMLtvJD+Pr0TQNeMvddcnLOwUa/Yb4iNwU7ThNLlHaQYEEC9MIBWHaBGODzYuXIkPRZ/OWe5sbzG1Rzq5ew==
 
 react-smooth@^4.0.0:
   version "4.0.4"