diff --git a/package.json b/package.json
index b8ca7382..c68207de 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "openscan",
-	"version": "1.2.3-alpha",
+	"version": "1.2.4-alpha",
 	"private": true,
 	"type": "module",
 	"packageManager": "bun@1.1.0",
diff --git a/scripts/audit.sh b/scripts/audit.sh
index 1da20e39..55924383 100755
--- a/scripts/audit.sh
+++ b/scripts/audit.sh
@@ -8,7 +8,7 @@ echo "Generating package-lock.json..."
 npm i --package-lock-only --silent
 
 echo "Running npm audit..."
-npm audit "$@" || true
+npm audit --audit-level=moderate "$@"
 
 echo "Cleaning up..."
 rm -f package-lock.json
diff --git a/src/App.tsx b/src/App.tsx
index 3ba0fcab..d09f0a50 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import ErrorBoundary from "./components/common/ErrorBoundary";
 import Footer from "./components/common/Footer";
 import { IsometricBlocks } from "./components/common/IsometricBlocks";
 import NotificationDisplay from "./components/common/NotificationDisplay";
+import ValidateNetwork from "./components/common/ValidateNetwork";
 import Navbar from "./components/navbar";
 import "./styles/base.css";
 import "./styles/styles.css";
@@ -148,17 +149,19 @@ function AppContent() {
               <Route path="tbtc/address/:address" element={<LazyBitcoinAddress />} />
               <Route path="tbtc/mempool" element={<LazyBitcoinMempool />} />
               <Route path="tbtc/mempool/:filter" element={<LazyBitcoinTx />} />
-              {/* EVM network routes */}
-              <Route path=":networkId" element={<LazyChain />} />
-              <Route path=":networkId/gastracker" element={<LazyGasTracker />} />
-              <Route path=":networkId/blocks" element={<LazyBlocks />} />
-              <Route path=":networkId/block/:filter" element={<LazyBlock />} />
-              <Route path=":networkId/txs" element={<LazyTxs />} />
-              <Route path=":networkId/tx/:filter" element={<LazyTx />} />
-              <Route path=":networkId/address/:address" element={<LazyAddress />} />
-              <Route path=":networkId/address/:address/:tokenId" element={<LazyTokenDetails />} />
-              <Route path=":networkId/mempool" element={<LazyMempool />} />
-              <Route path=":networkId/mempool/:filter" element={<LazyTx />} />
+              {/* EVM network routes — validated */}
+              <Route path=":networkId" element={<ValidateNetwork />}>
+                <Route index element={<LazyChain />} />
+                <Route path="gastracker" element={<LazyGasTracker />} />
+                <Route path="blocks" element={<LazyBlocks />} />
+                <Route path="block/:filter" element={<LazyBlock />} />
+                <Route path="txs" element={<LazyTxs />} />
+                <Route path="tx/:filter" element={<LazyTx />} />
+                <Route path="address/:address" element={<LazyAddress />} />
+                <Route path="address/:address/:tokenId" element={<LazyTokenDetails />} />
+                <Route path="mempool" element={<LazyMempool />} />
+                <Route path="mempool/:filter" element={<LazyTx />} />
+              </Route>
               <Route path="*" element={<Navigate to="/" replace />} />
             </Routes>
             <Footer />
diff --git a/src/components/common/ValidateNetwork.tsx b/src/components/common/ValidateNetwork.tsx
new file mode 100644
index 00000000..79aa5b86
--- /dev/null
+++ b/src/components/common/ValidateNetwork.tsx
@@ -0,0 +1,30 @@
+import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Navigate, Outlet, useParams } from "react-router-dom";
+import { isNetworkEnabled } from "../../config/networks";
+import { useNotifications } from "../../context/NotificationContext";
+
+export default function ValidateNetwork() {
+  const { networkId } = useParams<{ networkId: string }>();
+  const { addNotification } = useNotifications();
+  const { t } = useTranslation();
+  const isValid = !!networkId && isNetworkEnabled(networkId);
+  const notifiedRef = useRef(false);
+
+  useEffect(() => {
+    if (!isValid && !notifiedRef.current) {
+      notifiedRef.current = true;
+      addNotification(
+        t("errors.networkNotFoundMessage", { network: networkId || "" }),
+        "warning",
+        8000,
+      );
+    }
+  }, [isValid, networkId, addNotification, t]);
+
+  if (!isValid) {
+    return <Navigate to="/" replace />;
+  }
+
+  return <Outlet />;
+}
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
index 1e5fb374..aa6b0240 100644
--- a/src/components/navbar/index.tsx
+++ b/src/components/navbar/index.tsx
@@ -108,47 +108,6 @@ const Navbar = () => {
 
             {/* Desktop icons - hidden on mobile */}
             <ul className="hide-mobile">
-              {isSuperUser && (
-                <li>
-                  <span className="navbar-super-user-badge">{t("nav.superUserBadge")}</span>
-                </li>
-              )}
-              <li>
-                <button
-                  type="button"
-                  onClick={toggleSuperUserMode}
-                  className={`navbar-toggle-btn ${isSuperUser ? "navbar-toggle-active" : ""}`}
-                  aria-label={isSuperUser ? t("nav.disableSuperUser") : t("nav.enableSuperUser")}
-                  title={isSuperUser ? "Disable Super User Mode" : "Enable Super User Mode"}
-                >
-                  <svg
-                    width="18"
-                    height="18"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                    aria-hidden="true"
-                  >
-                    <title>Super User Mode</title>
-                    <polyline
-                      points="4 17 10 11 4 5"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                    <line
-                      x1="12"
-                      y1="19"
-                      x2="20"
-                      y2="19"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                    />
-                  </svg>
-                </button>
-              </li>
               {isSuperUser && (
                 <li>
                   <button
@@ -267,6 +226,42 @@ const Navbar = () => {
                   )}
                 </button>
               </li>
+              <li>
+                <button
+                  type="button"
+                  onClick={toggleSuperUserMode}
+                  className={`navbar-toggle-btn ${isSuperUser ? "navbar-toggle-active" : ""}`}
+                  aria-label={isSuperUser ? t("nav.disableSuperUser") : t("nav.enableSuperUser")}
+                  title={isSuperUser ? "Disable Super User Mode" : "Enable Super User Mode"}
+                >
+                  <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <title>Super User Mode</title>
+                    <polyline
+                      points="4 17 10 11 4 5"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                    <line
+                      x1="12"
+                      y1="19"
+                      x2="20"
+                      y2="19"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                </button>
+              </li>
               <li>
                 <button
                   type="button"
diff --git a/src/components/pages/bitcoin/BitcoinTransactionDisplay.tsx b/src/components/pages/bitcoin/BitcoinTransactionDisplay.tsx
index b60f5ee5..2e29b92c 100644
--- a/src/components/pages/bitcoin/BitcoinTransactionDisplay.tsx
+++ b/src/components/pages/bitcoin/BitcoinTransactionDisplay.tsx
@@ -15,12 +15,28 @@ import {
 import {
   calculateTotalInput,
   calculateTotalOutput,
+  decodeOpReturnData,
   hasWitness,
   isCoinbaseTransaction,
   isRBFEnabled,
 } from "../../../utils/bitcoinUtils";
 import AIAnalysisPanel from "../../common/AIAnalysis/AIAnalysisPanel";
 
+const OpReturnDisplay: React.FC<{ hex: string }> = ({ hex }) => {
+  const decoded = useMemo(() => decodeOpReturnData(hex), [hex]);
+  return (
+    <div className="btc-op-return">
+      <span className="btc-op-return-label">OP_RETURN</span>
+      {decoded.text ? (
+        <span className="btc-op-return-text">{decoded.text}</span>
+      ) : (
+        <span className="btc-op-return-hex tx-mono">{decoded.hex}</span>
+      )}
+      <CopyButton value={decoded.text || decoded.hex} />
+    </div>
+  );
+};
+
 interface BitcoinTransactionDisplayProps {
   transaction: BitcoinTransaction;
   networkId?: string;
@@ -422,12 +438,10 @@ const BitcoinTransactionDisplay: React.FC<BitcoinTransactionDisplayProps> = Reac
                             )}
                             <CopyButton value={output.scriptPubKey.address} />
                           </>
+                        ) : output.scriptPubKey.type === "nulldata" ? (
+                          <OpReturnDisplay hex={output.scriptPubKey.hex} />
                         ) : (
-                          <span className="tx-mono text-muted">
-                            {output.scriptPubKey.type === "nulldata"
-                              ? "OP_RETURN (Data)"
-                              : output.scriptPubKey.type}
-                          </span>
+                          <span className="tx-mono text-muted">{output.scriptPubKey.type}</span>
                         )}
                       </div>
                       <div className="btc-io-details">
diff --git a/src/components/pages/evm/block/BlockDisplay.tsx b/src/components/pages/evm/block/BlockDisplay.tsx
index a6546577..c8de7882 100644
--- a/src/components/pages/evm/block/BlockDisplay.tsx
+++ b/src/components/pages/evm/block/BlockDisplay.tsx
@@ -250,6 +250,14 @@ const BlockDisplay: React.FC<BlockDisplayProps> = React.memo(
                     </span>
                   </div>
                 )}
+
+                {/* Blob Gas Used (EIP-4844) */}
+                {block.blobGasUsed && Number(block.blobGasUsed) > 0 && (
+                  <div className="tx-row tx-row-blob">
+                    <span className="tx-label">{t("blobGasUsed")}</span>
+                    <span className="tx-value">{Number(block.blobGasUsed).toLocaleString()}</span>
+                  </div>
+                )}
               </div>
 
               {/* Right Column */}
@@ -287,6 +295,24 @@ const BlockDisplay: React.FC<BlockDisplayProps> = React.memo(
                   </div>
                 )}
 
+                {/* Blob fields continued (EIP-4844) */}
+                {block.blobGasUsed && Number(block.blobGasUsed) > 0 && (
+                  <>
+                    <div className="tx-row tx-row-blob">
+                      <span className="tx-label">{t("excessBlobGas")}</span>
+                      <span className="tx-value">
+                        {Number(block.excessBlobGas).toLocaleString()}
+                      </span>
+                    </div>
+                    <div className="tx-row tx-row-blob">
+                      <span className="tx-label">{t("blobCount")}</span>
+                      <span className="tx-value">
+                        {Math.floor(Number(block.blobGasUsed) / 131072)}
+                      </span>
+                    </div>
+                  </>
+                )}
+
                 {/* Arbitrum-specific fields */}
                 {isArbitrumBlock(block) && (
                   <>
diff --git a/src/components/pages/evm/tx/TransactionDisplay.tsx b/src/components/pages/evm/tx/TransactionDisplay.tsx
index 90a8440b..2ac7a1d0 100644
--- a/src/components/pages/evm/tx/TransactionDisplay.tsx
+++ b/src/components/pages/evm/tx/TransactionDisplay.tsx
@@ -9,6 +9,8 @@ import { getNetworkById } from "../../../../config/networks";
 import { AppContext } from "../../../../context";
 import { useSourcify } from "../../../../hooks/useSourcify";
 import { useTransactionPreAnalysis } from "../../../../hooks/useTransactionPreAnalysis";
+import { useSettings } from "../../../../context/SettingsContext";
+import TxAnalyser from "./TxAnalyser";
 import type { DataService } from "../../../../services/DataService";
 import {
   fetchToken,
@@ -30,12 +32,7 @@ import type {
   TransactionReceiptArbitrum,
   TransactionReceiptOptimism,
 } from "../../../../types";
-import {
-  type DecodedEvent,
-  decodeEventLog,
-  formatDecodedValue,
-  getEventTypeColor,
-} from "../../../../utils/eventDecoder";
+import { type DecodedEvent, decodeEventLog } from "../../../../utils/eventDecoder";
 import {
   type DecodedInput,
   decodeEventWithAbi,
@@ -63,6 +60,7 @@ const TransactionDisplay: React.FC<TransactionDisplayProps> = React.memo(
     onProviderSelect,
   }) => {
     const { t } = useTranslation("transaction");
+    const { isSuperUser } = useSettings();
     const network = networkId ? getNetworkById(networkId) : undefined;
     const networkName = network?.name ?? "Unknown Network";
     const networkCurrency = network?.currency ?? "ETH";
@@ -73,7 +71,6 @@ const TransactionDisplay: React.FC<TransactionDisplayProps> = React.memo(
     const [callTargetTokenListMatch, setCallTargetTokenListMatch] = useState<TokenListItem | null>(
       null,
     );
-    const [showEventLogs, setShowEventLogs] = useState(false);
     const [showTrace, setShowTrace] = useState(false);
     const [traceData, setTraceData] = useState<TraceResult | null>(null);
     // biome-ignore lint/suspicious/noExplicitAny: <TODO>
@@ -778,224 +775,81 @@ const TransactionDisplay: React.FC<TransactionDisplayProps> = React.memo(
               </div>
             )}
 
-            {/* Event Logs Section - Collapsible, closed by default */}
-            {transaction.receipt && transaction.receipt.logs.length > 0 && (
-              <div className="tx-section event-logs-section">
-                <button
-                  type="button"
-                  className="tx-section-header tx-section-header-toggle"
-                  onClick={() => setShowEventLogs(!showEventLogs)}
-                >
-                  <span className="tx-section-title">
-                    {t("eventLogs")} ({transaction.receipt.logs.length})
-                  </span>
-                  <span className="tx-section-chevron">{showEventLogs ? "▲" : "▼"}</span>
-                </button>
-                {showEventLogs && (
-                  <div className="tx-logs">
-                    {/** biome-ignore lint/suspicious/noExplicitAny: <TODO> */}
-                    {transaction.receipt.logs.map((log: any, index: number) => {
-                      // Try ABI-based decoding first if log is from tx.to and we have contract data
-                      let decoded: DecodedEvent | null = null;
-                      let abiDecoded: DecodedInput | null = null;
-
-                      const isFromTxRecipient =
-                        transaction.to &&
-                        log.address &&
-                        log.address.toLowerCase() === transaction.to.toLowerCase();
-
-                      if (isFromTxRecipient && contractData?.abi && log.topics) {
-                        abiDecoded = decodeEventWithAbi(
-                          log.topics,
-                          log.data || "0x",
-                          contractData.abi,
-                        );
-                      }
-
-                      // Fallback to standard event lookup
-                      if (!abiDecoded && log.topics) {
-                        decoded = decodeEventLog(log.topics, log.data || "0x");
-                      }
-
-                      // Determine which decoded data to display
-                      const hasDecoded = abiDecoded || decoded;
-                      const displayName = abiDecoded?.functionName || decoded?.name;
-                      const displaySignature = abiDecoded?.signature || decoded?.fullSignature;
-                      const displayParams = abiDecoded?.params || decoded?.params || [];
-
-                      return (
-                        // biome-ignore lint/suspicious/noArrayIndexKey: <TODO>
-                        <div key={index} className="tx-log">
-                          <div className="tx-log-index">{index}</div>
-                          <div className="tx-log-content">
-                            {/* Decoded Event Header */}
-                            {hasDecoded && (
-                              <div className="tx-log-decoded">
-                                <span
-                                  className="tx-event-badge"
-                                  style={
-                                    {
-                                      "--event-color": abiDecoded
-                                        ? "#10b981"
-                                        : getEventTypeColor(decoded?.type || ""),
-                                    } as React.CSSProperties
-                                  }
-                                >
-                                  {displayName}
-                                </span>
-                                <span
-                                  className="tx-event-signature"
-                                  title={decoded?.description || displaySignature}
-                                >
-                                  {displaySignature}
-                                </span>
-                                {abiDecoded && (
-                                  <span className="tx-abi-badge" title="Decoded using contract ABI">
-                                    {t("logsAbi")}
-                                  </span>
-                                )}
-                              </div>
-                            )}
-
-                            {/* Address */}
-                            <div className="tx-log-row">
-                              <span className="tx-log-label">{t("logsAddress")}</span>
-                              <span className="tx-log-value tx-mono">
-                                {networkId ? (
-                                  <Link
-                                    to={`/${networkId}/address/${log.address}`}
-                                    className="link-accent"
-                                  >
-                                    {log.address}
-                                  </Link>
-                                ) : (
-                                  log.address
-                                )}
-                              </span>
-                            </div>
-
-                            {/* Decoded Parameters */}
-                            {displayParams.length > 0 && (
-                              <div className="tx-log-row tx-log-params">
-                                <span className="tx-log-label">{t("logsDecoded")}</span>
-                                <div className="tx-log-value">
-                                  {displayParams.map((param, i) => (
-                                    // biome-ignore lint/suspicious/noArrayIndexKey: <TODO>
-                                    <div key={i} className="tx-decoded-param">
-                                      <span className="tx-param-name">{param.name}</span>
-                                      <span className="tx-param-type">({param.type})</span>
-                                      <span
-                                        className={`tx-param-value ${param.type === "address" ? "tx-mono" : ""}`}
-                                      >
-                                        {param.type === "address" && networkId ? (
-                                          <Link
-                                            to={`/${networkId}/address/${param.value}`}
-                                            className="link-accent"
-                                          >
-                                            {param.value}
-                                          </Link>
-                                        ) : (
-                                          formatDecodedValue(param.value, param.type)
-                                        )}
-                                      </span>
-                                      {param.indexed && (
-                                        <span className="tx-param-indexed">{t("logsIndexed")}</span>
-                                      )}
-                                    </div>
-                                  ))}
-                                </div>
-                              </div>
-                            )}
-
-                            {/* Raw Topics (collapsed if decoded) */}
-                            {log.topics && log.topics.length > 0 && (
-                              <div className="tx-log-row tx-log-topics">
-                                <span className="tx-log-label">
-                                  {hasDecoded ? t("logsRawTopics") : t("logsTopics")}
-                                </span>
-                                <div className="tx-log-value">
-                                  {log.topics.map((topic: string, i: number) => (
-                                    <div key={topic} className="tx-topic">
-                                      <span className="tx-topic-index">[{i}]</span>
-                                      <code className="tx-topic-value">{topic}</code>
-                                    </div>
-                                  ))}
-                                </div>
-                              </div>
-                            )}
-
-                            {/* Raw Data */}
-                            {log.data && log.data !== "0x" && (
-                              <div className="tx-log-row">
-                                <span className="tx-log-label">
-                                  {hasDecoded ? t("logsRawData") : t("logsData")}
-                                </span>
-                                <div className="tx-log-value">
-                                  <code className="tx-log-data">{log.data}</code>
-                                </div>
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* Full-width rows: long content */}
-            {/* Input Data */}
-            <div className="tx-row tx-row-vertical">
-              <span className="tx-label">{t("inputData")}</span>
-              {transaction.data && transaction.data !== "0x" ? (
-                <div className="tx-input-data">
-                  <code>{transaction.data}</code>
+            {/* EIP-4844 Blob Transaction fields */}
+            {transaction.type === "0x3" && (
+              <div className="tx-details-grid">
+                <div className="tx-details-column">
+                  {transaction.maxFeePerBlobGas && (
+                    <div className="tx-row tx-row-blob">
+                      <span className="tx-label">{t("maxFeePerBlobGas")}</span>
+                      <span className="tx-value">{formatGwei(transaction.maxFeePerBlobGas)}</span>
+                    </div>
+                  )}
+                  {transaction.receipt?.blobGasPrice && (
+                    <div className="tx-row tx-row-blob">
+                      <span className="tx-label">{t("blobGasPrice")}</span>
+                      <span className="tx-value">
+                        {formatGwei(transaction.receipt.blobGasPrice)}
+                      </span>
+                    </div>
+                  )}
                 </div>
-              ) : (
-                <span className="tx-empty">0x</span>
-              )}
-            </div>
-
-            {/* Decoded Input Data */}
-            {decodedInput && (
-              <div className="tx-row tx-row-vertical">
-                <span className="tx-label">{t("decodedInput")}</span>
-                <div className="tx-decoded-input">
-                  <div className="tx-decoded-function">
-                    <span className="tx-function-badge">{decodedInput.functionName}</span>
-                    <span className="tx-function-signature">{decodedInput.signature}</span>
-                  </div>
-                  {decodedInput.params.length > 0 && (
-                    <div className="tx-decoded-params">
-                      {decodedInput.params.map((param, i) => (
-                        // biome-ignore lint/suspicious/noArrayIndexKey: params have stable order
-                        <div key={i} className="tx-decoded-param">
-                          <span className="tx-param-name">{param.name}</span>
-                          <span className="tx-param-type">({param.type})</span>
-                          <span
-                            className={`tx-param-value ${param.type === "address" ? "tx-mono" : ""}`}
-                          >
-                            {param.type === "address" && networkId ? (
-                              <Link
-                                to={`/${networkId}/address/${param.value}`}
-                                className="link-accent"
-                              >
-                                {param.value}
-                              </Link>
-                            ) : (
-                              formatDecodedValue(param.value, param.type)
-                            )}
-                          </span>
-                        </div>
-                      ))}
+                <div className="tx-details-column">
+                  {transaction.receipt?.blobGasUsed && (
+                    <div className="tx-row tx-row-blob">
+                      <span className="tx-label">{t("blobGasUsed")}</span>
+                      <span className="tx-value">
+                        {Number(transaction.receipt.blobGasUsed).toLocaleString()}
+                      </span>
                     </div>
                   )}
+                  {transaction.blobVersionedHashes &&
+                    transaction.blobVersionedHashes.length > 0 && (
+                      <div className="tx-row tx-row-blob">
+                        <span className="tx-label">{t("blobCount")}</span>
+                        <span className="tx-value">{transaction.blobVersionedHashes.length}</span>
+                      </div>
+                    )}
                 </div>
               </div>
             )}
+
+            {/* Blob Versioned Hashes */}
+            {transaction.type === "0x3" &&
+              transaction.blobVersionedHashes &&
+              transaction.blobVersionedHashes.length > 0 && (
+                <div className="tx-row tx-row-blob">
+                  <span className="tx-label">{t("blobVersionedHashes")}</span>
+                  <span className="tx-value">
+                    {transaction.blobVersionedHashes.map((hash) => (
+                      <div key={hash} className="tx-mono" style={{ marginBottom: "4px" }}>
+                        <LongString value={hash} start={20} end={16} />
+                        <CopyButton value={hash} />
+                      </div>
+                    ))}
+                  </span>
+                </div>
+              )}
+
+            {/* Event Logs + Input Data are now always in TX Analyser */}
           </div>
 
+          {/* TX Analyser — always shown; super user mode unlocks advanced tabs */}
+          {dataService && networkId && (
+            <TxAnalyser
+              txHash={transaction.hash}
+              networkId={networkId}
+              networkCurrency={networkCurrency}
+              dataService={dataService}
+              logs={transaction.receipt?.logs}
+              txToAddress={transaction.to}
+              contractAbi={contractData?.abi}
+              inputData={transaction.data}
+              decodedInputData={decodedInput}
+              isSuperUser={isSuperUser}
+            />
+          )}
+
           {/* Debug Trace Section (Localhost Only) */}
           {isTraceAvailable && (
             <div className="collapsible-container">
diff --git a/src/components/pages/evm/tx/TxAnalyser.tsx b/src/components/pages/evm/tx/TxAnalyser.tsx
new file mode 100644
index 00000000..ff570233
--- /dev/null
+++ b/src/components/pages/evm/tx/TxAnalyser.tsx
@@ -0,0 +1,352 @@
+import type React from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { CallNode, PrestateTrace } from "../../../../services/adapters/NetworkAdapter";
+import { useCallTreeEnrichment } from "../../../../hooks/useCallTreeEnrichment";
+import { type ContractInfo, fetchContractInfoBatch } from "../../../../utils/contractLookup";
+import { useSettings } from "../../../../context/SettingsContext";
+import { logger } from "../../../../utils/logger";
+import type { AnalyserTab, TxAnalyserProps } from "./analyser/types";
+import CallTreeTab from "./analyser/CallTreeTab";
+import StateChangesTab from "./analyser/StateChangesTab";
+import GasProfilerTab from "./analyser/GasProfilerTab";
+import InputDataTab from "./analyser/InputDataTab";
+import EventLogsTab from "./analyser/EventLogsTab";
+
+const TxAnalyser: React.FC<TxAnalyserProps> = ({
+  txHash,
+  networkId,
+  networkCurrency,
+  dataService,
+  logs,
+  txToAddress,
+  contractAbi,
+  inputData,
+  decodedInputData,
+  isSuperUser,
+}) => {
+  const { t } = useTranslation("transaction");
+  const hasEvents = logs && logs.length > 0;
+  const hasInputData = inputData && inputData !== "0x";
+  const defaultTab: AnalyserTab = hasEvents ? "events" : hasInputData ? "inputData" : "callTree";
+  const [activeTab, setActiveTab] = useState<AnalyserTab>(defaultTab);
+
+  // Reset to a base tab when leaving super user mode
+  // biome-ignore lint/correctness/useExhaustiveDependencies: only react to isSuperUser changes
+  useEffect(() => {
+    if (isSuperUser) {
+      setCollapsed(false);
+    } else {
+      const superTabs: AnalyserTab[] = ["callTree", "gasProfiler", "stateChanges"];
+      setActiveTab((prev) => (superTabs.includes(prev) ? defaultTab : prev));
+    }
+  }, [isSuperUser]);
+
+  const [callTree, setCallTree] = useState<CallNode | null>(null);
+  const [prestateTrace, setPrestateTrace] = useState<PrestateTrace | null>(null);
+  const [loadingCallTree, setLoadingCallTree] = useState(false);
+  const [loadingPrestate, setLoadingPrestate] = useState(false);
+  const [callTreeError, setCallTreeError] = useState<string | null>(null);
+  const [prestateError, setPrestateError] = useState<string | null>(null);
+
+  // Contract name + ABI enrichment for the call tree
+  const { contracts: treeContracts, enrichmentLoading } = useCallTreeEnrichment(
+    callTree,
+    networkId,
+  );
+
+  // Enrich log addresses independently (works for all users, not just super)
+  const { settings } = useSettings();
+  const [logContracts, setLogContracts] = useState<Record<string, ContractInfo>>({});
+  const [logEnrichmentDone, setLogEnrichmentDone] = useState(false);
+  const logAbortRef = useRef<AbortController | null>(null);
+
+  // Stable key: sorted unique addresses from logs
+  const logAddresses = logs
+    ? Array.from(new Set(logs.map((l) => l.address?.toLowerCase()).filter(Boolean) as string[]))
+    : [];
+  const logAddressKey = logAddresses.join(",");
+
+  useEffect(() => {
+    if (!logAddressKey || !networkId) {
+      setLogEnrichmentDone(true);
+      return;
+    }
+
+    const addresses = logAddressKey.split(",");
+
+    logAbortRef.current?.abort();
+    const controller = new AbortController();
+    logAbortRef.current = controller;
+
+    setLogEnrichmentDone(false);
+
+    const chainId = Number(networkId);
+    fetchContractInfoBatch(addresses, chainId, controller.signal, settings.apiKeys?.etherscan)
+      .then((map) => {
+        if (!controller.signal.aborted) setLogContracts(map);
+      })
+      .finally(() => {
+        if (!controller.signal.aborted) setLogEnrichmentDone(true);
+      });
+
+    return () => controller.abort();
+  }, [logAddressKey, networkId, settings.apiKeys?.etherscan]);
+
+  // Merge tree + log contracts (tree contracts take priority since they include call tree addresses)
+  const contracts = { ...logContracts, ...treeContracts };
+  const logEnrichmentLoading = !!(logs && logs.length > 0) && !logEnrichmentDone;
+
+  const isUnsupported = useCallback((msg: string) => {
+    return /method not found|not supported|unsupported|does not exist/i.test(msg);
+  }, []);
+
+  // Load call tree on first render (super user only)
+  useEffect(() => {
+    if (!isSuperUser) return;
+    if (callTree || callTreeError || loadingCallTree) return;
+    setLoadingCallTree(true);
+    dataService.networkAdapter
+      .getAnalyserCallTrace(txHash)
+      .then((data) => {
+        if (data) {
+          setCallTree(data);
+        } else {
+          setCallTreeError(t("analyser.notSupported"));
+        }
+      })
+      .catch((err) => {
+        const msg = err instanceof Error ? err.message : String(err);
+        logger.warn("TX Analyser call trace error:", msg);
+        setCallTreeError(
+          isUnsupported(msg) ? t("analyser.notSupported") : `${t("analyser.error")}: ${msg}`,
+        );
+      })
+      .finally(() => setLoadingCallTree(false));
+  }, [
+    isSuperUser,
+    txHash,
+    dataService,
+    callTree,
+    callTreeError,
+    loadingCallTree,
+    t,
+    isUnsupported,
+  ]);
+
+  // Load prestate when switching to that tab (super user only)
+  useEffect(() => {
+    if (!isSuperUser) return;
+    if (activeTab !== "stateChanges") return;
+    if (prestateTrace || prestateError || loadingPrestate) return;
+    setLoadingPrestate(true);
+    dataService.networkAdapter
+      .getAnalyserPrestateTrace(txHash)
+      .then((data) => {
+        if (data) {
+          setPrestateTrace(data);
+        } else {
+          setPrestateError(t("analyser.notSupported"));
+        }
+      })
+      .catch((err) => {
+        const msg = err instanceof Error ? err.message : String(err);
+        logger.warn("TX Analyser prestate trace error:", msg);
+        setPrestateError(
+          isUnsupported(msg) ? t("analyser.notSupported") : `${t("analyser.error")}: ${msg}`,
+        );
+      })
+      .finally(() => setLoadingPrestate(false));
+  }, [
+    isSuperUser,
+    activeTab,
+    txHash,
+    dataService,
+    prestateTrace,
+    prestateError,
+    loadingPrestate,
+    t,
+    isUnsupported,
+  ]);
+
+  const [collapsed, setCollapsed] = useState(!isSuperUser);
+
+  const handleTabClick = useCallback(
+    (tab: AnalyserTab) => {
+      if (tab === activeTab) {
+        setCollapsed((c) => !c);
+      } else {
+        setActiveTab(tab);
+        setCollapsed(false);
+      }
+    },
+    [activeTab],
+  );
+
+  return (
+    <div className="tx-analyser">
+      {/* Tab bar */}
+      <div className="tx-analyser-tabs">
+        {hasEvents && (
+          <button
+            type="button"
+            className={`tx-analyser-tab${activeTab === "events" ? " tx-analyser-tab--active-base" : ""}`}
+            onClick={() => handleTabClick("events")}
+          >
+            {t("analyser.events")} ({logs.length})
+          </button>
+        )}
+        {hasInputData && (
+          <button
+            type="button"
+            className={`tx-analyser-tab${activeTab === "inputData" ? " tx-analyser-tab--active-base" : ""}`}
+            onClick={() => handleTabClick("inputData")}
+          >
+            {t("analyser.inputDataTab")}
+          </button>
+        )}
+        {isSuperUser && (
+          <>
+            <button
+              type="button"
+              className={`tx-analyser-tab${activeTab === "callTree" ? " tx-analyser-tab--active" : ""}`}
+              onClick={() => handleTabClick("callTree")}
+            >
+              {t("analyser.callTree")}
+            </button>
+            <button
+              type="button"
+              className={`tx-analyser-tab${activeTab === "gasProfiler" ? " tx-analyser-tab--active" : ""}`}
+              onClick={() => handleTabClick("gasProfiler")}
+            >
+              {t("analyser.gasProfiler")}
+            </button>
+            <button
+              type="button"
+              className={`tx-analyser-tab${activeTab === "stateChanges" ? " tx-analyser-tab--active" : ""}`}
+              onClick={() => handleTabClick("stateChanges")}
+            >
+              {t("analyser.stateChanges")}
+            </button>
+          </>
+        )}
+        <button
+          type="button"
+          className="tx-analyser-collapse-btn"
+          onClick={() => setCollapsed((c) => !c)}
+          aria-label={collapsed ? t("analyser.expand") : t("analyser.collapse")}
+        >
+          {collapsed ? `▸ ${t("analyser.expand")}` : `▾ ${t("analyser.collapse")}`}
+        </button>
+      </div>
+
+      {/* Tab content */}
+      {!collapsed && (
+        <div className="tx-analyser-body">
+          {activeTab === "callTree" && (
+            <>
+              {(loadingCallTree || enrichmentLoading) && (
+                <div className="analyser-loading">
+                  {loadingCallTree ? t("analyser.loading") : t("analyser.enriching")}
+                </div>
+              )}
+              {callTreeError && (
+                <div className="analyser-error">
+                  <div>{callTreeError}</div>
+                  {callTreeError === t("analyser.notSupported") && (
+                    <div className="analyser-hint">{t("analyser.traceHint")}</div>
+                  )}
+                </div>
+              )}
+              {callTree && !enrichmentLoading && (
+                <CallTreeTab
+                  root={callTree}
+                  networkId={networkId}
+                  networkCurrency={networkCurrency}
+                  contracts={contracts}
+                  enrichmentLoading={false}
+                />
+              )}
+            </>
+          )}
+
+          {activeTab === "gasProfiler" && (
+            <>
+              {(loadingCallTree || enrichmentLoading) && (
+                <div className="analyser-loading">
+                  {loadingCallTree ? t("analyser.loading") : t("analyser.enriching")}
+                </div>
+              )}
+              {callTreeError && (
+                <div className="analyser-error">
+                  <div>{callTreeError}</div>
+                  {callTreeError === t("analyser.notSupported") && (
+                    <div className="analyser-hint">{t("analyser.traceHint")}</div>
+                  )}
+                </div>
+              )}
+              {callTree && !enrichmentLoading && (
+                <GasProfilerTab root={callTree} networkId={networkId} contracts={contracts} />
+              )}
+            </>
+          )}
+
+          {activeTab === "stateChanges" && (
+            <>
+              {(loadingPrestate || enrichmentLoading) && (
+                <div className="analyser-loading">
+                  {loadingPrestate ? t("analyser.loading") : t("analyser.enriching")}
+                </div>
+              )}
+              {prestateError && (
+                <div className="analyser-error">
+                  <div>{prestateError}</div>
+                  {prestateError === t("analyser.notSupported") && (
+                    <div className="analyser-hint">{t("analyser.traceHint")}</div>
+                  )}
+                </div>
+              )}
+              {prestateTrace && !enrichmentLoading && (
+                <StateChangesTab
+                  trace={prestateTrace}
+                  networkId={networkId}
+                  networkCurrency={networkCurrency}
+                  contracts={contracts}
+                />
+              )}
+            </>
+          )}
+
+          {activeTab === "events" && logs && logs.length > 0 && (
+            <>
+              {logEnrichmentLoading && (
+                <div className="analyser-loading">{t("analyser.enriching")}</div>
+              )}
+              {!logEnrichmentLoading && (
+                <EventLogsTab
+                  logs={logs}
+                  networkId={networkId}
+                  txToAddress={txToAddress}
+                  contractAbi={contractAbi}
+                  contracts={contracts}
+                />
+              )}
+            </>
+          )}
+
+          {activeTab === "inputData" && inputData && inputData !== "0x" && (
+            <InputDataTab
+              inputData={inputData}
+              decodedInput={decodedInputData ?? null}
+              networkId={networkId}
+              contracts={contracts}
+              txToAddress={txToAddress}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TxAnalyser;
diff --git a/src/components/pages/evm/tx/analyser/CallTreeTab.tsx b/src/components/pages/evm/tx/analyser/CallTreeTab.tsx
new file mode 100644
index 00000000..76689dae
--- /dev/null
+++ b/src/components/pages/evm/tx/analyser/CallTreeTab.tsx
@@ -0,0 +1,186 @@
+import type React from "react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import type { CallNode } from "../../../../../services/adapters/NetworkAdapter";
+import {
+  countByType,
+  countCalls,
+  countReverts,
+  hexToGas,
+} from "../../../../../utils/callTreeUtils";
+import type { ContractInfo } from "../../../../../utils/contractLookup";
+import { decodeFunctionCall } from "../../../../../utils/inputDecoder";
+import { formatNativeFromWei } from "../../../../../utils/unitFormatters";
+import { getCallTypeColor } from "./types";
+
+function truncateParamValue(value: string, max = 20): string {
+  if (!value) return "";
+  const str = String(value);
+  return str.length > max ? `${str.slice(0, max)}…` : str;
+}
+
+const CallTreeNode: React.FC<{
+  node: CallNode;
+  networkId: string;
+  networkCurrency: string;
+  depth: number;
+  defaultExpanded: boolean;
+  contracts: Record<string, ContractInfo>;
+}> = ({ node, networkId, networkCurrency, depth, defaultExpanded, contracts }) => {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const hasChildren = node.calls && node.calls.length > 0;
+  const isError = !!node.error;
+  const color = getCallTypeColor(node.type);
+
+  const formattedValue =
+    node.value && node.value !== "0x0" && node.value !== "0x"
+      ? formatNativeFromWei(node.value, networkCurrency, 4)
+      : null;
+
+  const gasUsed = hexToGas(node.gasUsed);
+  const contractInfo = node.to ? contracts[node.to.toLowerCase()] : undefined;
+
+  const decoded =
+    node.input && node.input !== "0x" && contractInfo?.abi
+      ? decodeFunctionCall(node.input, contractInfo.abi)
+      : null;
+
+  const addressLink = (addr: string | undefined, name?: string) => {
+    if (!addr) return null;
+    return (
+      <Link
+        to={`/${networkId}/address/${addr}`}
+        className="call-tree-address"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {name ? <span className="call-tree-contract-name">{name}</span> : addr}
+      </Link>
+    );
+  };
+
+  return (
+    <div className={`call-tree-node${isError ? " call-tree-node--error" : ""}`}>
+      {/* biome-ignore lint/a11y/noStaticElementInteractions: call tree expand/collapse via click */}
+      {/* biome-ignore lint/a11y/useKeyWithClickEvents: call tree expand/collapse via click */}
+      <div
+        className="call-tree-node-header"
+        onClick={() => hasChildren && setExpanded((e) => !e)}
+        style={{ cursor: hasChildren ? "pointer" : "default" }}
+      >
+        <span className="call-tree-toggle">{hasChildren ? (expanded ? "▾" : "▸") : "·"}</span>
+        <span
+          className="call-tree-type-badge"
+          style={{ background: `${color}22`, color, borderColor: `${color}66` }}
+        >
+          {node.type}
+        </span>
+        <span className="call-tree-addresses">
+          {addressLink(node.from, contracts[node.from?.toLowerCase() ?? ""]?.name)}
+          {node.to && (
+            <>
+              <span className="call-tree-arrow">→</span>
+              {addressLink(node.to, contractInfo?.name)}
+            </>
+          )}
+        </span>
+        {decoded && (
+          <span className="call-tree-decoded">
+            {decoded.functionName}
+            {decoded.params.length > 0 && (
+              <span className="call-tree-decoded-params">
+                ({decoded.params.map((p) => truncateParamValue(p.value, 16)).join(", ")})
+              </span>
+            )}
+          </span>
+        )}
+        {formattedValue && <span className="call-tree-value">{formattedValue}</span>}
+        {gasUsed !== undefined && (
+          <span className="call-tree-gas">{gasUsed.toLocaleString()} gas</span>
+        )}
+        {isError && <span className="call-tree-error-badge">{node.error}</span>}
+      </div>
+      {expanded && hasChildren && (
+        <div className="call-tree-children">
+          {node.calls?.map((child, i) => (
+            <CallTreeNode
+              key={`${i}-${child.type}-${child.from}-${child.to ?? ""}`}
+              node={child}
+              networkId={networkId}
+              networkCurrency={networkCurrency}
+              depth={depth + 1}
+              defaultExpanded={depth < 2}
+              contracts={contracts}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const CALL_TYPE_LABELS: Record<string, string> = {
+  CALL: "CALL",
+  STATICCALL: "STATICCALL",
+  DELEGATECALL: "DELEGATECALL",
+  CREATE: "CREATE",
+  CREATE2: "CREATE2",
+  SELFDESTRUCT: "SELFDESTRUCT",
+};
+
+const CallTreeTab: React.FC<{
+  root: CallNode;
+  networkId: string;
+  networkCurrency: string;
+  contracts: Record<string, ContractInfo>;
+  enrichmentLoading: boolean;
+}> = ({ root, networkId, networkCurrency, contracts, enrichmentLoading }) => {
+  const { t } = useTranslation("transaction");
+  const totalCalls = countCalls(root);
+  const totalReverts = countReverts(root);
+  const gasUsed = hexToGas(root.gasUsed);
+  const typeCounts = countByType(root);
+
+  return (
+    <div className="analyser-tab-content">
+      <div className="analyser-summary">
+        {gasUsed !== undefined && (
+          <span>{t("analyser.summaryGas", { gas: gasUsed.toLocaleString() })}</span>
+        )}
+        <span>{t("analyser.summaryCalls", { calls: totalCalls })}</span>
+        {Object.entries(typeCounts)
+          .filter(([type]) => type !== "CALL" && CALL_TYPE_LABELS[type])
+          .sort((a, b) => b[1] - a[1])
+          .map(([type, count]) => (
+            <span
+              key={type}
+              className="analyser-summary-type"
+              style={{ color: getCallTypeColor(type) }}
+            >
+              {count}× {type}
+            </span>
+          ))}
+        {totalReverts > 0 && (
+          <span className="analyser-summary-reverts">
+            {t("analyser.summaryReverts", { reverts: totalReverts })}
+          </span>
+        )}
+        {enrichmentLoading && (
+          <span className="analyser-summary-loading">{t("analyser.enriching")}</span>
+        )}
+      </div>
+      <div className="call-tree-root">
+        <CallTreeNode
+          node={root}
+          networkId={networkId}
+          networkCurrency={networkCurrency}
+          depth={0}
+          defaultExpanded
+          contracts={contracts}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CallTreeTab;
diff --git a/src/components/pages/evm/tx/analyser/EventLogsTab.tsx b/src/components/pages/evm/tx/analyser/EventLogsTab.tsx
new file mode 100644
index 00000000..f7672e86
--- /dev/null
+++ b/src/components/pages/evm/tx/analyser/EventLogsTab.tsx
@@ -0,0 +1,218 @@
+import type React from "react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import type { EthLog } from "@openscan/network-connectors";
+import type { ContractInfo } from "../../../../../utils/contractLookup";
+import {
+  type DecodedEvent,
+  decodeEventLog,
+  formatDecodedValue,
+  getEventTypeColor,
+} from "../../../../../utils/eventDecoder";
+import { decodeEventWithAbi } from "../../../../../utils/inputDecoder";
+import LongString from "../../../../common/LongString";
+
+const EventLogsTab: React.FC<{
+  logs: EthLog[];
+  networkId: string;
+  txToAddress?: string;
+  // biome-ignore lint/suspicious/noExplicitAny: ABI types are dynamic
+  contractAbi?: any[];
+  contracts: Record<string, ContractInfo>;
+}> = ({ logs, networkId, txToAddress, contractAbi, contracts }) => {
+  const { t } = useTranslation("transaction");
+  const [expandedSet, setExpandedSet] = useState<Set<number>>(new Set());
+
+  const expandAll = () => setExpandedSet(new Set(logs.map((_, i) => i)));
+  const collapseAll = () => setExpandedSet(new Set());
+
+  const toggleLog = (idx: number) => {
+    setExpandedSet((prev) => {
+      const next = new Set(prev);
+      if (next.has(idx)) next.delete(idx);
+      else next.add(idx);
+      return next;
+    });
+  };
+
+  return (
+    <div className="analyser-tab-content">
+      <div className="analyser-summary">
+        <span>
+          {logs.length} {t("analyser.events").toLowerCase()}
+        </span>
+        <span className="analyser-expand-controls">
+          <button type="button" className="analyser-expand-btn" onClick={expandAll}>
+            {t("analyser.expandAll")}
+          </button>
+          <button type="button" className="analyser-expand-btn" onClick={collapseAll}>
+            {t("analyser.collapseAll")}
+          </button>
+        </span>
+      </div>
+      <div className="tx-logs">
+        {logs.map((log, index) => {
+          let decoded: DecodedEvent | null = null;
+          let abiDecoded: ReturnType<typeof decodeEventWithAbi> = null;
+
+          // Try enriched ABI first (from call tree enrichment)
+          const enrichedContract = log.address ? contracts[log.address.toLowerCase()] : undefined;
+
+          if (enrichedContract?.abi && log.topics) {
+            abiDecoded = decodeEventWithAbi(log.topics, log.data || "0x", enrichedContract.abi);
+          }
+
+          // Try tx recipient ABI
+          if (
+            !abiDecoded &&
+            txToAddress &&
+            log.address?.toLowerCase() === txToAddress.toLowerCase() &&
+            contractAbi &&
+            log.topics
+          ) {
+            abiDecoded = decodeEventWithAbi(log.topics, log.data || "0x", contractAbi);
+          }
+
+          // Fallback to standard event lookup
+          if (!abiDecoded && log.topics) {
+            decoded = decodeEventLog(log.topics, log.data || "0x");
+          }
+
+          const hasDecoded = abiDecoded || decoded;
+          const displayName = abiDecoded?.functionName || decoded?.name;
+          const displaySignature = abiDecoded?.signature || decoded?.fullSignature;
+          const displayParams = abiDecoded?.params || decoded?.params || [];
+
+          const isExpanded = expandedSet.has(index);
+
+          return (
+            // biome-ignore lint/suspicious/noArrayIndexKey: log index is stable
+            <div key={index} className="tx-log">
+              {/* biome-ignore lint/a11y/noStaticElementInteractions: collapsible header */}
+              {/* biome-ignore lint/a11y/useKeyWithClickEvents: collapsible header */}
+              <div className="tx-log-header tx-log-header--toggle" onClick={() => toggleLog(index)}>
+                <span className="call-tree-toggle">{isExpanded ? "▾" : "▸"}</span>
+                <span className="tx-log-index">{index}</span>
+                {hasDecoded && (
+                  <div>
+                    <span
+                      className="tx-event-badge"
+                      style={
+                        {
+                          "--event-color": abiDecoded
+                            ? "#10b981"
+                            : getEventTypeColor(decoded?.type || ""),
+                        } as React.CSSProperties
+                      }
+                    >
+                      {displayName}
+                    </span>
+                    <span
+                      className="tx-event-signature"
+                      title={decoded?.description || displaySignature}
+                    >
+                      {displaySignature}
+                    </span>
+                  </div>
+                )}
+                <span className="tx-log-header-address tx-mono">
+                  <Link
+                    to={`/${networkId}/address/${log.address}`}
+                    className="link-accent"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    {enrichedContract?.name ?? log.address}
+                  </Link>
+                </span>
+              </div>
+
+              {isExpanded && (
+                <div className="tx-log-content">
+                  <div className="tx-log-row">
+                    <span className="tx-log-label">{t("logsAddress")}</span>
+                    <span className="tx-log-value tx-mono">
+                      <Link to={`/${networkId}/address/${log.address}`} className="link-accent">
+                        {enrichedContract?.name ? (
+                          <>
+                            {enrichedContract.name}{" "}
+                            <span className="tx-log-address-hex">
+                              (<LongString value={log.address} start={6} end={4} />)
+                            </span>
+                          </>
+                        ) : (
+                          log.address
+                        )}
+                      </Link>
+                    </span>
+                  </div>
+
+                  {displayParams.length > 0 && (
+                    <div className="tx-log-row tx-log-params">
+                      <span className="tx-log-label">{t("logsDecoded")}</span>
+                      <div className="tx-log-value">
+                        {displayParams.map((param, i) => (
+                          // biome-ignore lint/suspicious/noArrayIndexKey: param index is stable
+                          <div key={i} className="tx-decoded-param">
+                            <span className="tx-param-name">{param.name}</span>
+                            <span className="tx-param-type">({param.type})</span>
+                            <span
+                              className={`tx-param-value ${param.type === "address" ? "tx-mono" : ""}`}
+                            >
+                              {param.type === "address" ? (
+                                <Link
+                                  to={`/${networkId}/address/${param.value}`}
+                                  className="link-accent"
+                                >
+                                  {param.value}
+                                </Link>
+                              ) : (
+                                formatDecodedValue(param.value, param.type)
+                              )}
+                            </span>
+                            {param.indexed && (
+                              <span className="tx-param-indexed">{t("logsIndexed")}</span>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {log.topics && log.topics.length > 0 && (
+                    <div className="tx-log-row tx-log-topics">
+                      <span className="tx-log-label">
+                        {hasDecoded ? t("logsRawTopics") : t("logsTopics")}
+                      </span>
+                      <div className="tx-log-value">
+                        {log.topics.map((topic: string, i: number) => (
+                          <div key={topic} className="tx-topic">
+                            <span className="tx-topic-index">[{i}]</span>
+                            <code className="tx-topic-value">{topic}</code>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {log.data && log.data !== "0x" && (
+                    <div className="tx-log-row">
+                      <span className="tx-log-label">
+                        {hasDecoded ? t("logsRawData") : t("logsData")}
+                      </span>
+                      <div className="tx-log-value">
+                        <code className="tx-log-data">{log.data}</code>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default EventLogsTab;
diff --git a/src/components/pages/evm/tx/analyser/GasProfilerTab.tsx b/src/components/pages/evm/tx/analyser/GasProfilerTab.tsx
new file mode 100644
index 00000000..73db3e88
--- /dev/null
+++ b/src/components/pages/evm/tx/analyser/GasProfilerTab.tsx
@@ -0,0 +1,225 @@
+import type React from "react";
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import type { CallNode } from "../../../../../services/adapters/NetworkAdapter";
+import { hexToGas } from "../../../../../utils/callTreeUtils";
+import type { ContractInfo } from "../../../../../utils/contractLookup";
+import { decodeFunctionCall } from "../../../../../utils/inputDecoder";
+import { CALL_TYPE_COLORS } from "./types";
+
+function getFlameColor(node: CallNode): string {
+  if (node.error) return "#ef4444";
+  const typeColor = CALL_TYPE_COLORS[node.type];
+  if (typeColor) return typeColor;
+  // hash-based fallback
+  const addr = node.to ?? node.from;
+  let h = 0;
+  for (let i = 0; i < addr.length; i++) h = (h * 31 + addr.charCodeAt(i)) & 0xffffff;
+  return `hsl(${h % 360}, 55%, 50%)`;
+}
+
+function getFlameLabel(node: CallNode, contracts: Record<string, ContractInfo>): string {
+  const contractInfo = node.to ? contracts[node.to.toLowerCase()] : undefined;
+  const target = contractInfo?.name ?? (node.to ? `${node.to.slice(0, 10)}…` : node.type);
+
+  // Try full ABI decode first
+  if (node.input && node.input.length >= 10 && node.input !== "0x" && contractInfo?.abi) {
+    const decoded = decodeFunctionCall(node.input, contractInfo.abi);
+    if (decoded) return `${target}.${decoded.functionName}()`;
+  }
+
+  // Fallback: show 4-byte selector if present
+  if (node.input && node.input.length >= 10 && node.input !== "0x") {
+    return `${target}.${node.input.slice(0, 10)}()`;
+  }
+
+  // No input data (plain ETH transfer or CREATE)
+  if (node.type === "CREATE" || node.type === "CREATE2") return `${target} [${node.type}]`;
+  return `${target} [${node.type}]`;
+}
+
+interface BreakdownEntry {
+  label: string;
+  gas: number;
+  pct: number;
+  color: string;
+  type: string;
+  to?: string;
+}
+
+function getChildBreakdown(
+  node: CallNode,
+  parentGas: number,
+  contracts: Record<string, ContractInfo>,
+): BreakdownEntry[] {
+  if (!node.calls?.length) return [];
+  const entries: BreakdownEntry[] = node.calls.map((child) => {
+    const gas = hexToGas(child.gasUsed) ?? 0;
+    return {
+      label: getFlameLabel(child, contracts),
+      gas,
+      pct: parentGas > 0 ? (gas / parentGas) * 100 : 0,
+      color: getFlameColor(child),
+      type: child.type,
+      to: child.to,
+    };
+  });
+  const childSum = entries.reduce((s, e) => s + e.gas, 0);
+  const selfGas = parentGas - childSum;
+  if (selfGas > 0) {
+    entries.unshift({
+      label: "self",
+      gas: selfGas,
+      pct: (selfGas / parentGas) * 100,
+      color: "var(--text-tertiary)",
+      type: "self",
+    });
+  }
+  return entries.sort((a, b) => b.gas - a.gas);
+}
+
+const FlameRow: React.FC<{
+  node: CallNode;
+  totalGas: number;
+  contracts: Record<string, ContractInfo>;
+  networkId: string;
+  selected: CallNode | null;
+  onSelect: (node: CallNode) => void;
+}> = ({ node, totalGas, contracts, networkId, selected, onSelect }) => {
+  const gas = hexToGas(node.gasUsed) ?? 0;
+  const widthPct = totalGas > 0 ? (gas / totalGas) * 100 : 0;
+  if (widthPct < 0.3) return null;
+
+  const color = getFlameColor(node);
+  const label = getFlameLabel(node, contracts);
+  const isSelected = selected === node;
+
+  return (
+    <div className="flame-row" style={{ width: `${widthPct}%` }}>
+      <button
+        type="button"
+        className={`flame-bar${node.error ? " flame-bar--error" : ""}${isSelected ? " flame-bar--selected" : ""}`}
+        style={{ backgroundColor: color }}
+        onClick={() => onSelect(node)}
+        title={`${label} — ${gas.toLocaleString()} gas (${widthPct.toFixed(1)}%)`}
+      >
+        <span className="flame-bar-label">{label}</span>
+        <span className="flame-bar-gas">{gas.toLocaleString()}</span>
+      </button>
+      {node.calls && node.calls.length > 0 && (
+        <div className="flame-children">
+          {node.calls.map((child, i) => (
+            <FlameRow
+              key={`${i}-${child.type}-${child.to ?? child.from}`}
+              node={child}
+              totalGas={totalGas}
+              contracts={contracts}
+              networkId={networkId}
+              selected={selected}
+              onSelect={onSelect}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const GasProfilerTab: React.FC<{
+  root: CallNode;
+  networkId: string;
+  contracts: Record<string, ContractInfo>;
+}> = ({ root, networkId, contracts }) => {
+  const { t } = useTranslation("transaction");
+  const [zoomNode, setZoomNode] = useState<CallNode>(root);
+  const [selected, setSelected] = useState<CallNode | null>(null);
+
+  const zoomGas = hexToGas(zoomNode.gasUsed) ?? 1;
+  const totalGas = hexToGas(root.gasUsed) ?? 1;
+  const isZoomed = zoomNode !== root;
+
+  const handleSelect = useCallback((node: CallNode) => {
+    setSelected(node);
+    setZoomNode(node);
+  }, []);
+
+  const resetZoom = useCallback(() => {
+    setZoomNode(root);
+    setSelected(null);
+  }, [root]);
+
+  const breakdown = selected
+    ? getChildBreakdown(selected, hexToGas(selected.gasUsed) ?? 1, contracts)
+    : [];
+
+  return (
+    <div className="analyser-tab-content">
+      <div className="analyser-summary">
+        <span>{t("analyser.summaryGas", { gas: totalGas.toLocaleString() })}</span>
+        {isZoomed && (
+          <button type="button" className="gas-profiler-reset" onClick={resetZoom}>
+            {t("analyser.gasResetView")}
+          </button>
+        )}
+      </div>
+      {/* Flame chart */}
+      <div className="gas-profiler-flame">
+        <FlameRow
+          node={zoomNode}
+          totalGas={zoomGas}
+          contracts={contracts}
+          networkId={networkId}
+          selected={selected}
+          onSelect={handleSelect}
+        />
+      </div>
+      {/* Breakdown panel */}
+      {selected && breakdown.length > 0 && (
+        <div className="gas-profiler-breakdown">
+          <div className="gas-profiler-breakdown-header">
+            <span className="gas-profiler-breakdown-title">
+              {t("analyser.gasBreakdownTitle")}:{" "}
+              <strong>{getFlameLabel(selected, contracts)}</strong>
+            </span>
+            <span className="gas-profiler-breakdown-gas">
+              {(hexToGas(selected.gasUsed) ?? 0).toLocaleString()} gas
+            </span>
+          </div>
+          <div className="gas-profiler-breakdown-list">
+            {breakdown.map((entry, i) => (
+              <div key={`${i}-${entry.label}`} className="gas-profiler-breakdown-row">
+                <span
+                  className="gas-profiler-breakdown-swatch"
+                  style={{ backgroundColor: entry.color }}
+                />
+                <span className="gas-profiler-breakdown-label">
+                  {entry.to ? (
+                    <Link to={`/${networkId}/address/${entry.to}`} className="call-tree-address">
+                      {entry.label}
+                    </Link>
+                  ) : (
+                    entry.label
+                  )}
+                </span>
+                <span className="gas-profiler-breakdown-pct">{entry.pct.toFixed(1)}%</span>
+                <span className="gas-profiler-breakdown-value">
+                  {entry.gas.toLocaleString()} gas
+                </span>
+                <span className="gas-profiler-breakdown-bar-bg">
+                  <span
+                    className="gas-profiler-breakdown-bar-fill"
+                    style={{ width: `${entry.pct}%`, backgroundColor: entry.color }}
+                  />
+                </span>
+              </div>
+            ))}
+          </div>
+          <div className="gas-profiler-breakdown-hint">{t("analyser.gasBreakdownHint")}</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GasProfilerTab;
diff --git a/src/components/pages/evm/tx/analyser/InputDataTab.tsx b/src/components/pages/evm/tx/analyser/InputDataTab.tsx
new file mode 100644
index 00000000..6dc58f84
--- /dev/null
+++ b/src/components/pages/evm/tx/analyser/InputDataTab.tsx
@@ -0,0 +1,90 @@
+import type React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import type { ContractInfo } from "../../../../../utils/contractLookup";
+import { formatDecodedValue } from "../../../../../utils/eventDecoder";
+import {
+  type DecodedInput,
+  decodeFunctionCall,
+  tryDecodeUtf8,
+} from "../../../../../utils/inputDecoder";
+
+const InputDataTab: React.FC<{
+  inputData: string;
+  decodedInput: DecodedInput | null;
+  networkId: string;
+  contracts: Record<string, ContractInfo>;
+  txToAddress?: string;
+}> = ({ inputData, decodedInput, networkId, contracts, txToAddress }) => {
+  const { t } = useTranslation("transaction");
+
+  // Try enriched ABI decode if no decoded input from sourcify/local
+  const resolved =
+    decodedInput ??
+    (() => {
+      if (!txToAddress || !inputData || inputData === "0x") return null;
+      const enriched = contracts[txToAddress.toLowerCase()];
+      if (!enriched?.abi) return null;
+      return decodeFunctionCall(inputData, enriched.abi);
+    })();
+
+  // If no ABI decode, try UTF-8 text decode
+  const utf8Text = !resolved ? tryDecodeUtf8(inputData) : null;
+
+  return (
+    <div className="analyser-tab-content">
+      {resolved && (
+        <div className="analyser-input-decoded">
+          <div className="analyser-summary">
+            <span>{t("decodedInput")}</span>
+          </div>
+          <div className="tx-decoded-input">
+            <div className="tx-decoded-function">
+              <span className="tx-function-signature">{resolved.signature}</span>
+            </div>
+            {resolved.params.length > 0 && (
+              <div className="tx-decoded-params">
+                {resolved.params.map((param, i) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: params have stable order
+                  <div key={i} className="tx-decoded-param">
+                    <span className="tx-param-name">{param.name}</span>
+                    <span className="tx-param-type">({param.type})</span>
+                    <span className={`tx-param-value ${param.type === "address" ? "tx-mono" : ""}`}>
+                      {param.type === "address" ? (
+                        <Link to={`/${networkId}/address/${param.value}`} className="link-accent">
+                          {param.value}
+                        </Link>
+                      ) : (
+                        formatDecodedValue(param.value, param.type)
+                      )}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+      {utf8Text && (
+        <div className="analyser-input-decoded">
+          <div className="analyser-summary">
+            <span>{t("analyser.utf8Text")}</span>
+          </div>
+          <div className="tx-input-utf8">
+            <pre>{utf8Text}</pre>
+          </div>
+        </div>
+      )}
+      <div className="analyser-input-raw">
+        <div className="analyser-summary">
+          <span>{t("analyser.rawInputData")}</span>
+        </div>
+        <div className="tx-input-data">
+          <code>{inputData}</code>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InputDataTab;
diff --git a/src/components/pages/evm/tx/analyser/StateChangesTab.tsx b/src/components/pages/evm/tx/analyser/StateChangesTab.tsx
new file mode 100644
index 00000000..d6985c56
--- /dev/null
+++ b/src/components/pages/evm/tx/analyser/StateChangesTab.tsx
@@ -0,0 +1,199 @@
+import type React from "react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import type {
+  PrestateAccountState,
+  PrestateTrace,
+} from "../../../../../services/adapters/NetworkAdapter";
+import type { ContractInfo } from "../../../../../utils/contractLookup";
+import LongString from "../../../../common/LongString";
+
+function formatHexBalance(hex: string | undefined): string {
+  if (!hex) return "—";
+  try {
+    const bn = BigInt(hex);
+    const eth = Number(bn) / 1e18;
+    return eth.toFixed(6);
+  } catch {
+    return hex;
+  }
+}
+
+function balanceDiff(pre?: string, post?: string): string | null {
+  if (pre === undefined && post === undefined) return null;
+  if (pre === post) return null;
+  try {
+    const preBn = BigInt(pre ?? "0x0");
+    const postBn = BigInt(post ?? "0x0");
+    const diff = postBn - preBn;
+    const sign = diff >= 0n ? "+" : "";
+    const eth = Number(diff) / 1e18;
+    return `${sign}${eth.toFixed(6)}`;
+  } catch {
+    return null;
+  }
+}
+
+const StateChangesTab: React.FC<{
+  trace: PrestateTrace;
+  networkId: string;
+  networkCurrency: string;
+  contracts: Record<string, ContractInfo>;
+}> = ({ trace, networkId, networkCurrency, contracts }) => {
+  const { t } = useTranslation("transaction");
+  const [expandedSet, setExpandedSet] = useState<Set<string>>(new Set());
+
+  const allAddresses = Array.from(new Set([...Object.keys(trace.pre), ...Object.keys(trace.post)]));
+
+  // Filter to only addresses with actual changes
+  const changedAddresses = allAddresses.filter((address) => {
+    const pre: PrestateAccountState = trace.pre[address] ?? {};
+    const post: PrestateAccountState = trace.post[address] ?? {};
+    const balDiff = balanceDiff(pre.balance, post.balance);
+    const nonceDiff =
+      pre.nonce !== post.nonce && (pre.nonce !== undefined || post.nonce !== undefined);
+    const storageKeys = Array.from(
+      new Set([...Object.keys(pre.storage ?? {}), ...Object.keys(post.storage ?? {})]),
+    ).filter((k) => pre.storage?.[k] !== post.storage?.[k]);
+    const codeChanged = pre.code !== post.code;
+    return !!(balDiff || nonceDiff || storageKeys.length > 0 || codeChanged);
+  });
+
+  if (changedAddresses.length === 0) {
+    return (
+      <div className="analyser-tab-content">
+        <div className="analyser-empty">{t("analyser.noChanges")}</div>
+      </div>
+    );
+  }
+
+  const toggleAddress = (addr: string) => {
+    setExpandedSet((prev) => {
+      const next = new Set(prev);
+      if (next.has(addr)) next.delete(addr);
+      else next.add(addr);
+      return next;
+    });
+  };
+
+  const expandAll = () => setExpandedSet(new Set(changedAddresses));
+  const collapseAll = () => setExpandedSet(new Set());
+
+  return (
+    <div className="analyser-tab-content">
+      <div className="analyser-summary">
+        <span>
+          {changedAddresses.length} {t("analyser.stateChanges").toLowerCase()}
+        </span>
+        <span className="analyser-expand-controls">
+          <button type="button" className="analyser-expand-btn" onClick={expandAll}>
+            {t("analyser.expandAll")}
+          </button>
+          <button type="button" className="analyser-expand-btn" onClick={collapseAll}>
+            {t("analyser.collapseAll")}
+          </button>
+        </span>
+      </div>
+      {changedAddresses.map((address) => {
+        const pre: PrestateAccountState = trace.pre[address] ?? {};
+        const post: PrestateAccountState = trace.post[address] ?? {};
+        const balDiff = balanceDiff(pre.balance, post.balance);
+        const nonceDiff =
+          pre.nonce !== post.nonce && (pre.nonce !== undefined || post.nonce !== undefined);
+        const storageKeys = Array.from(
+          new Set([...Object.keys(pre.storage ?? {}), ...Object.keys(post.storage ?? {})]),
+        ).filter((k) => pre.storage?.[k] !== post.storage?.[k]);
+        const codeChanged = pre.code !== post.code;
+        const contractName = contracts[address.toLowerCase()]?.name;
+        const isExpanded = expandedSet.has(address);
+
+        return (
+          <div key={address} className="state-change-block">
+            {/* biome-ignore lint/a11y/noStaticElementInteractions: collapsible header */}
+            {/* biome-ignore lint/a11y/useKeyWithClickEvents: collapsible header */}
+            <div
+              className="state-change-address state-change-address--toggle"
+              onClick={() => toggleAddress(address)}
+            >
+              <span className="call-tree-toggle">{isExpanded ? "▾" : "▸"}</span>
+              <Link
+                to={`/${networkId}/address/${address}`}
+                className="call-tree-address"
+                onClick={(e) => e.stopPropagation()}
+              >
+                {contractName ? (
+                  <>
+                    <span className="call-tree-contract-name">{contractName}</span>
+                    <span className="state-change-addr-sub">({address})</span>
+                  </>
+                ) : (
+                  address
+                )}
+              </Link>
+            </div>
+
+            {isExpanded && (
+              <div className="state-change-rows">
+                {balDiff && (
+                  <div className="state-change-row">
+                    <span className="state-change-label">
+                      {t("analyser.balanceChange")} ({networkCurrency})
+                    </span>
+                    <span className="state-change-before">{formatHexBalance(pre.balance)}</span>
+                    <span className="state-change-arrow">→</span>
+                    <span className="state-change-after">{formatHexBalance(post.balance)}</span>
+                    <span
+                      className={`state-change-diff ${balDiff.startsWith("+") ? "state-change-diff--positive" : "state-change-diff--negative"}`}
+                    >
+                      {balDiff}
+                    </span>
+                  </div>
+                )}
+
+                {nonceDiff && (
+                  <div className="state-change-row">
+                    <span className="state-change-label">{t("analyser.nonceChange")}</span>
+                    <span className="state-change-before">{pre.nonce ?? "—"}</span>
+                    <span className="state-change-arrow">→</span>
+                    <span className="state-change-after">{post.nonce ?? "—"}</span>
+                    <span className="state-change-diff state-change-diff--positive">
+                      +{(post.nonce ?? 0) - (pre.nonce ?? 0)}
+                    </span>
+                  </div>
+                )}
+
+                {codeChanged && (
+                  <div className="state-change-row">
+                    <span className="state-change-label">{t("analyser.codeDeployed")}</span>
+                    <span className="state-change-after state-change-code">
+                      {post.code ? `${post.code.slice(0, 20)}…` : "—"}
+                    </span>
+                  </div>
+                )}
+
+                {storageKeys.map((slot) => (
+                  <div key={slot} className="state-change-row state-change-row--storage">
+                    <span className="state-change-label">{t("analyser.storageChange")}</span>
+                    <span className="state-change-slot">
+                      <LongString value={slot} start={8} end={6} />
+                    </span>
+                    <span className="state-change-before">
+                      <LongString value={pre.storage?.[slot] ?? "0x0"} start={8} end={6} />
+                    </span>
+                    <span className="state-change-arrow">→</span>
+                    <span className="state-change-after">
+                      <LongString value={post.storage?.[slot] ?? "0x0"} start={8} end={6} />
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default StateChangesTab;
diff --git a/src/components/pages/evm/tx/analyser/types.ts b/src/components/pages/evm/tx/analyser/types.ts
new file mode 100644
index 00000000..74f1315a
--- /dev/null
+++ b/src/components/pages/evm/tx/analyser/types.ts
@@ -0,0 +1,31 @@
+import type { DecodedInput } from "../../../../../utils/inputDecoder";
+import type { DataService } from "../../../../../services/DataService";
+
+export type AnalyserTab = "callTree" | "gasProfiler" | "stateChanges" | "events" | "inputData";
+
+export interface TxAnalyserProps {
+  txHash: string;
+  networkId: string;
+  networkCurrency: string;
+  dataService: DataService;
+  logs?: import("@openscan/network-connectors").EthLog[];
+  txToAddress?: string;
+  // biome-ignore lint/suspicious/noExplicitAny: ABI types are dynamic
+  contractAbi?: any[];
+  inputData?: string;
+  decodedInputData?: DecodedInput | null;
+  isSuperUser?: boolean;
+}
+
+export const CALL_TYPE_COLORS: Record<string, string> = {
+  CALL: "#3b82f6",
+  DELEGATECALL: "#f97316",
+  STATICCALL: "#8b5cf6",
+  CREATE: "#10b981",
+  CREATE2: "#10b981",
+  SELFDESTRUCT: "#ef4444",
+};
+
+export function getCallTypeColor(type: string): string {
+  return CALL_TYPE_COLORS[type.toUpperCase()] ?? "#6b7280";
+}
diff --git a/src/components/pages/settings/index.tsx b/src/components/pages/settings/index.tsx
index 128a4135..5bf1f322 100644
--- a/src/components/pages/settings/index.tsx
+++ b/src/components/pages/settings/index.tsx
@@ -1,6 +1,6 @@
 import type React from "react";
-import { useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { Link } from "react-router-dom";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { MetaMaskIcon } from "../../common/MetaMaskIcon";
 import { getEnabledNetworks } from "../../../config/networks";
@@ -19,6 +19,7 @@ import type {
 } from "../../../types";
 import { AI_PROVIDERS, AI_PROVIDER_ORDER } from "../../../config/aiProviders";
 import { clearAICache } from "../../common/AIAnalysis/aiCache";
+import { downloadConfigFile, exportConfig, importConfig } from "../../../utils/configExportImport";
 import { logger } from "../../../utils/logger";
 import { getChainIdFromNetwork } from "../../../utils/networkResolver";
 import { clearPersistentCache, getPersistentCacheSize } from "../../../utils/persistentCache";
@@ -46,6 +47,26 @@ const ALCHEMY_NETWORKS: Record<number, string> = {
   8453: "base-mainnet",
 };
 
+// Alchemy Bitcoin networks keyed by CAIP-2 networkId
+const ALCHEMY_BTC_NETWORKS: Record<string, string> = {
+  "bip122:000000000019d6689c085ae165831e93": "btc-mainnet",
+  "bip122:00000000da84f2bafbbc53dee25a72ae": "btc-testnet",
+};
+
+const SETTINGS_ACTIVE_TAB_KEY = "openscan_settings_active_tab";
+
+type SettingsTab = "network" | "providers" | "display" | "advanced";
+
+const SETTINGS_TABS: Array<{ id: SettingsTab; label: string }> = [
+  { id: "network", label: "🌐 Network" },
+  { id: "providers", label: "🔑 Providers" },
+  { id: "display", label: "🎨 Display" },
+  { id: "advanced", label: "🧪 Advanced" },
+];
+
+const isValidSettingsTab = (value: string | null): value is SettingsTab =>
+  value === "network" || value === "providers" || value === "display" || value === "advanced";
+
 const getInfuraUrl = (chainId: number, apiKey: string): string | null => {
   const slug = INFURA_NETWORKS[chainId];
   return slug ? `https://${slug}.infura.io/v3/${apiKey}` : null;
@@ -56,20 +77,29 @@ const getAlchemyUrl = (chainId: number, apiKey: string): string | null => {
   return slug ? `https://${slug}.g.alchemy.com/v2/${apiKey}` : null;
 };
 
+const getAlchemyBtcUrl = (networkId: string, apiKey: string): string | null => {
+  const slug = ALCHEMY_BTC_NETWORKS[networkId];
+  return slug ? `https://${slug}.g.alchemy.com/v2/${apiKey}` : null;
+};
+
 const isInfuraUrl = (url: string): boolean => url.includes("infura.io");
 const isAlchemyUrl = (url: string): boolean => url.includes("alchemy.com");
 
 const Settings: React.FC = () => {
   const { t, i18n } = useTranslation("settings");
+  const location = useLocation();
+  const navigate = useNavigate();
   const { rpcUrls, setRpcUrls } = useContext(AppContext);
-  const { settings, updateSettings, isSuperUser } = useSettings();
+  const { settings, updateSettings, isSuperUser, toggleSuperUserMode } = useSettings();
   const { enabledNetworks } = useNetworks();
   const { isMetaMaskAvailable, isSupported, setAsDefaultExplorer } = useMetaMaskExplorer();
+  const [activeTab, setActiveTab] = useState<SettingsTab>("network");
   const [localRpc, setLocalRpc] = useState<Record<string, string | RPCUrls>>({
     ...rpcUrls,
   });
-  const [saveSuccess, setSaveSuccess] = useState(false);
   const [cacheCleared, setCacheCleared] = useState(false);
+  const [importSuccess, setImportSuccess] = useState(false);
+  const [importError, setImportError] = useState(false);
   const [draggedItem, setDraggedItem] = useState<{
     networkId: string;
     index: number;
@@ -101,12 +131,322 @@ const Settings: React.FC = () => {
   >({});
   const [persistentCacheBytes, setPersistentCacheBytes] = useState(() => getPersistentCacheSize());
   const [syncingChain, setSyncingChain] = useState<string | null>(null);
+  const [autoSaveState, setAutoSaveState] = useState<"idle" | "saving" | "saved">("idle");
+
+  const initialRenderRef = useRef(true);
+  const saveTimerRef = useRef<number | null>(null);
+  const savedHintTimerRef = useRef<number | null>(null);
+  const lastSavedDraftRef = useRef<string>("");
+
+  const normalizeRpcConfig = useCallback(
+    (draft: Record<string, string | RPCUrls>): RpcUrlsContextType => {
+      const normalized = Object.keys(draft)
+        .sort()
+        .reduce((acc, networkId) => {
+          const value = draft[networkId];
+          if (typeof value === "string") {
+            acc[networkId] = value
+              .split(",")
+              .map((item) => item.trim())
+              .filter(Boolean);
+            return acc;
+          }
+
+          if (Array.isArray(value)) {
+            acc[networkId] = value.map((item) => item.trim()).filter(Boolean);
+            return acc;
+          }
+
+          return acc;
+        }, {} as RpcUrlsContextType);
 
-  // Sync localRpc when context rpcUrls changes (e.g., after save)
+      return normalized;
+    },
+    [],
+  );
+
+  const serializeDraft = useCallback(
+    (draftRpc: Record<string, string | RPCUrls>, draftApiKeys: typeof localApiKeys): string => {
+      const normalizedRpc = normalizeRpcConfig(draftRpc);
+      const sortedRpcEntries = Object.keys(normalizedRpc)
+        .sort()
+        .map((networkId) => [networkId, normalizedRpc[networkId]]);
+
+      const sortedApiEntries = Object.keys(draftApiKeys)
+        .sort()
+        .map((key) => [key, draftApiKeys[key as keyof typeof draftApiKeys]]);
+
+      return JSON.stringify({ rpc: sortedRpcEntries, apiKeys: sortedApiEntries });
+    },
+    [normalizeRpcConfig],
+  );
+
+  const applyProviderUrlsToRpcs = useCallback(
+    (
+      parsedRpc: RpcUrlsContextType,
+      previousApiKeys: { infura?: string; alchemy?: string },
+      nextApiKeys: { infura: string; alchemy: string },
+    ) => {
+      const prevInfuraKey = previousApiKeys.infura || "";
+      const prevAlchemyKey = previousApiKeys.alchemy || "";
+
+      for (const chainId of Object.keys(INFURA_NETWORKS).map(Number)) {
+        const networkId = `eip155:${chainId}`;
+        let urls: string[] = (parsedRpc[networkId] as string[]) || [];
+
+        const oldInfuraUrl = prevInfuraKey ? getInfuraUrl(chainId, prevInfuraKey) : null;
+        const newInfuraUrl = nextApiKeys.infura ? getInfuraUrl(chainId, nextApiKeys.infura) : null;
+
+        if (oldInfuraUrl && oldInfuraUrl !== newInfuraUrl) {
+          urls = urls.filter((url) => url !== oldInfuraUrl);
+        }
+
+        if (newInfuraUrl && !urls.includes(newInfuraUrl)) {
+          urls = [newInfuraUrl, ...urls];
+        }
+
+        parsedRpc[networkId] = urls;
+      }
+
+      for (const chainId of Object.keys(ALCHEMY_NETWORKS).map(Number)) {
+        const networkId = `eip155:${chainId}`;
+        let urls: string[] = (parsedRpc[networkId] as string[]) || [];
+
+        const oldAlchemyUrl = prevAlchemyKey ? getAlchemyUrl(chainId, prevAlchemyKey) : null;
+        const newAlchemyUrl = nextApiKeys.alchemy
+          ? getAlchemyUrl(chainId, nextApiKeys.alchemy)
+          : null;
+
+        if (oldAlchemyUrl && oldAlchemyUrl !== newAlchemyUrl) {
+          urls = urls.filter((url) => url !== oldAlchemyUrl);
+        }
+
+        if (newAlchemyUrl && !urls.includes(newAlchemyUrl)) {
+          urls = [newAlchemyUrl, ...urls];
+        }
+
+        parsedRpc[networkId] = urls;
+      }
+    },
+    [],
+  );
+
+  const persistConfiguration = useCallback(
+    (
+      draftRpc: Record<string, string | RPCUrls>,
+      draftApiKeys: typeof localApiKeys,
+      options?: { silent?: boolean },
+    ) => {
+      const parsedRpc = normalizeRpcConfig(draftRpc);
+
+      const nextApiKeys = {
+        infura: draftApiKeys.infura,
+        alchemy: draftApiKeys.alchemy,
+      };
+
+      applyProviderUrlsToRpcs(parsedRpc, settings.apiKeys || {}, nextApiKeys);
+
+      updateSettings({
+        apiKeys: {
+          infura: draftApiKeys.infura || undefined,
+          alchemy: draftApiKeys.alchemy || undefined,
+          etherscan: draftApiKeys.etherscan || undefined,
+          groq: draftApiKeys.groq || undefined,
+          openai: draftApiKeys.openai || undefined,
+          anthropic: draftApiKeys.anthropic || undefined,
+          perplexity: draftApiKeys.perplexity || undefined,
+          gemini: draftApiKeys.gemini || undefined,
+        },
+      });
+
+      setRpcUrls(parsedRpc);
+      lastSavedDraftRef.current = serializeDraft(parsedRpc, draftApiKeys);
+
+      if (!options?.silent) {
+        setAutoSaveState("saved");
+        if (savedHintTimerRef.current) {
+          window.clearTimeout(savedHintTimerRef.current);
+        }
+        savedHintTimerRef.current = window.setTimeout(() => {
+          setAutoSaveState("idle");
+        }, 1800);
+      }
+    },
+    [
+      applyProviderUrlsToRpcs,
+      normalizeRpcConfig,
+      serializeDraft,
+      setRpcUrls,
+      settings.apiKeys,
+      updateSettings,
+    ],
+  );
+
+  // Keep local inputs in sync when context values are updated from elsewhere.
   useEffect(() => {
     setLocalRpc({ ...rpcUrls });
   }, [rpcUrls]);
 
+  useEffect(() => {
+    setLocalApiKeys({
+      infura: settings.apiKeys?.infura || "",
+      alchemy: settings.apiKeys?.alchemy || "",
+      etherscan: settings.apiKeys?.etherscan || "",
+      groq: settings.apiKeys?.groq || "",
+      openai: settings.apiKeys?.openai || "",
+      anthropic: settings.apiKeys?.anthropic || "",
+      perplexity: settings.apiKeys?.perplexity || "",
+      gemini: settings.apiKeys?.gemini || "",
+    });
+  }, [settings.apiKeys]);
+
+  // Hydrate active tab from URL query or previous session (mount only).
+  // handleTabChange owns all subsequent URL updates — the guard prevents re-running.
+  const tabHydratedRef = useRef(false);
+  useEffect(() => {
+    if (tabHydratedRef.current) {
+      return;
+    }
+    tabHydratedRef.current = true;
+
+    const params = new URLSearchParams(location.search);
+    const tabFromQuery = params.get("tab");
+
+    let nextTab: SettingsTab | null = null;
+
+    if (isValidSettingsTab(tabFromQuery)) {
+      nextTab = tabFromQuery;
+    } else {
+      const stored = localStorage.getItem(SETTINGS_ACTIVE_TAB_KEY);
+      if (isValidSettingsTab(stored)) {
+        nextTab = stored;
+      }
+    }
+
+    if (!nextTab) {
+      return;
+    }
+
+    setActiveTab(nextTab);
+    localStorage.setItem(SETTINGS_ACTIVE_TAB_KEY, nextTab);
+
+    if (tabFromQuery !== nextTab || Boolean(location.hash)) {
+      const updatedParams = new URLSearchParams(location.search);
+      updatedParams.set("tab", nextTab);
+      navigate(
+        {
+          pathname: location.pathname,
+          search: `?${updatedParams.toString()}`,
+          hash: "",
+        },
+        { replace: true },
+      );
+    }
+  }, [location.hash, location.pathname, location.search, navigate]);
+
+  const currentDraft = useMemo(
+    () => serializeDraft(localRpc, localApiKeys),
+    [localApiKeys, localRpc, serializeDraft],
+  );
+
+  const handleTabChange = useCallback(
+    (tab: SettingsTab) => {
+      if (tab === activeTab) {
+        return;
+      }
+
+      if (
+        activeTab !== "providers" &&
+        tab === "providers" &&
+        currentDraft !== lastSavedDraftRef.current
+      ) {
+        persistConfiguration(localRpc, localApiKeys, { silent: true });
+      }
+
+      setActiveTab(tab);
+      localStorage.setItem(SETTINGS_ACTIVE_TAB_KEY, tab);
+
+      const updatedParams = new URLSearchParams(location.search);
+      updatedParams.set("tab", tab);
+
+      navigate(
+        {
+          pathname: location.pathname,
+          search: `?${updatedParams.toString()}`,
+          hash: "",
+        },
+        { replace: true },
+      );
+    },
+    [
+      activeTab,
+      currentDraft,
+      localApiKeys,
+      localRpc,
+      location.pathname,
+      location.search,
+      navigate,
+      persistConfiguration,
+    ],
+  );
+
+  useEffect(() => {
+    if (initialRenderRef.current) {
+      initialRenderRef.current = false;
+      lastSavedDraftRef.current = currentDraft;
+      return;
+    }
+
+    if (currentDraft === lastSavedDraftRef.current) {
+      return;
+    }
+
+    // Providers tab uses explicit save action to avoid auto-save loops while typing API keys.
+    if (activeTab === "providers") {
+      if (saveTimerRef.current) {
+        window.clearTimeout(saveTimerRef.current);
+        saveTimerRef.current = null;
+      }
+      if (autoSaveState === "saving") {
+        setAutoSaveState("idle");
+      }
+      return;
+    }
+
+    setAutoSaveState("saving");
+
+    if (saveTimerRef.current) {
+      window.clearTimeout(saveTimerRef.current);
+    }
+
+    saveTimerRef.current = window.setTimeout(() => {
+      persistConfiguration(localRpc, localApiKeys);
+      saveTimerRef.current = null;
+    }, 450);
+
+    return () => {
+      if (saveTimerRef.current) {
+        window.clearTimeout(saveTimerRef.current);
+      }
+    };
+  }, [activeTab, autoSaveState, currentDraft, localApiKeys, localRpc, persistConfiguration]);
+
+  useEffect(() => {
+    return () => {
+      if (saveTimerRef.current) {
+        window.clearTimeout(saveTimerRef.current);
+
+        if (activeTab !== "providers" && currentDraft !== lastSavedDraftRef.current) {
+          persistConfiguration(localRpc, localApiKeys, { silent: true });
+        }
+      }
+
+      if (savedHintTimerRef.current) {
+        window.clearTimeout(savedHintTimerRef.current);
+      }
+    };
+  }, [activeTab, currentDraft, localApiKeys, localRpc, persistConfiguration]);
+
   const updateField = useCallback((networkId: string, value: string) => {
     setLocalRpc((prev) => ({ ...prev, [networkId]: value }));
   }, []);
@@ -126,22 +466,17 @@ const Settings: React.FC = () => {
 
   // Clear all caches
   const clearAllCaches = useCallback(() => {
-    // Clear metadata service caches
     clearSupportersCache();
-    // Clear metadata RPC cache
     clearMetadataRpcCache();
-    // Clear localStorage caches if any
     localStorage.removeItem("openscan_cache");
-    // Clear AI analysis cache
     clearAICache();
-    // Clear persistent cache (super user)
     clearPersistentCache();
     setPersistentCacheBytes(0);
     setCacheCleared(true);
     setTimeout(() => setCacheCleared(false), 3000);
-    // Reset sync flag so RPCs are re-sorted on next load
-    updateSettings({ rpcsSynced: false });
-  }, [updateSettings]);
+    // Clear RPC sync timestamp so RPCs are re-sorted on next load
+    localStorage.removeItem("openScan_lastRpcSyncTime");
+  }, []);
 
   // Clear all site data (like browser dev tools)
   const clearSiteData = useCallback(async () => {
@@ -149,11 +484,9 @@ const Settings: React.FC = () => {
       return;
     }
 
-    // Clear localStorage and sessionStorage
     localStorage.clear();
     sessionStorage.clear();
 
-    // Clear all cookies for this site
     for (const cookie of document.cookie.split(";")) {
       const name = cookie.split("=")[0]?.trim();
       if (name) {
@@ -162,7 +495,6 @@ const Settings: React.FC = () => {
       }
     }
 
-    // Clear IndexedDB databases
     if (window.indexedDB?.databases) {
       try {
         const databases = await window.indexedDB.databases();
@@ -176,7 +508,6 @@ const Settings: React.FC = () => {
       }
     }
 
-    // Clear Cache Storage (Service Worker caches)
     if ("caches" in window) {
       try {
         const cacheNames = await caches.keys();
@@ -186,7 +517,6 @@ const Settings: React.FC = () => {
       }
     }
 
-    // Unregister service workers
     if ("serviceWorker" in navigator) {
       try {
         const registrations = await navigator.serviceWorker.getRegistrations();
@@ -199,6 +529,42 @@ const Settings: React.FC = () => {
     window.location.reload();
   }, [t]);
 
+  const handleExportConfig = useCallback(() => {
+    if (!window.confirm(t("cacheData.exportConfig.sensitiveWarning"))) return;
+    const config = exportConfig();
+    downloadConfigFile(config);
+  }, [t]);
+
+  const handleImportConfig = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      // Reset input so the same file can be re-selected
+      e.target.value = "";
+
+      const reader = new FileReader();
+      reader.onload = (ev) => {
+        try {
+          const data = JSON.parse(ev.target?.result as string);
+          if (!window.confirm(t("cacheData.importConfig.confirmMessage"))) return;
+          const result = importConfig(data);
+          if (result.success) {
+            setImportSuccess(true);
+            setTimeout(() => window.location.reload(), 1500);
+          } else {
+            setImportError(true);
+            setTimeout(() => setImportError(false), 3000);
+          }
+        } catch {
+          setImportError(true);
+          setTimeout(() => setImportError(false), 3000);
+        }
+      };
+      reader.readAsText(file);
+    },
+    [t],
+  );
+
   // Helper to get URLs as array from localRpc
   const getLocalRpcArray = useCallback(
     (networkId: string): string[] => {
@@ -235,16 +601,8 @@ const Settings: React.FC = () => {
     return urlMap;
   }, []);
 
-  /**
-   * Get CSS class for an RPC tag based on metadata endpoint properties
-   * - rpc-tracking: has tracking (tracking !== "none") → yellow
-   * - rpc-opensource: no tracking + open source → green
-   * - rpc-private: no tracking + not open source → light green
-   * - no class: URL not found in metadata (user-added)
-   */
   const getRpcTagClass = useCallback(
     (url: string): string => {
-      // Personal API key URLs have tracking enabled
       if (isInfuraUrl(url) || isAlchemyUrl(url)) return "rpc-tracking";
       const ep = metadataUrlMap.get(url);
       if (!ep) return "";
@@ -255,10 +613,6 @@ const Settings: React.FC = () => {
     [metadataUrlMap],
   );
 
-  /**
-   * Get display label for an RPC tag.
-   * Priority: Infura/Alchemy personal → metadata provider name → hostname from URL
-   */
   const getRpcTagLabel = useCallback(
     (url: string): string => {
       if (isInfuraUrl(url)) return "Infura Personal";
@@ -278,17 +632,13 @@ const Settings: React.FC = () => {
     navigator.clipboard.writeText(url);
   }, []);
 
-  // Handle setting OpenScan as MetaMask default explorer
-  // networkId: CAIP-2 format, chainId: numeric for MetaMask API
   const handleSetMetaMaskExplorer = useCallback(
     async (networkId: string, chainId: number | undefined) => {
-      // MetaMask only supports EVM networks with numeric chainId
       if (chainId === undefined) return;
 
       const network = enabledNetworks.find((n) => n.networkId === networkId);
       if (!network) return;
 
-      // Get the RPC URLs for this network from context (now keyed by networkId)
       const networkRpcUrls = rpcUrls[networkId] || [];
 
       setMetamaskStatus((prev) => ({ ...prev, [networkId]: "loading" }));
@@ -395,127 +745,65 @@ const Settings: React.FC = () => {
       }
       const sorted = sortRpcsByQuality(urls, resultsMap, metadataUrlMap);
       updateField(chainId, sorted.join(","));
-      setRpcUrls({ ...rpcUrls, [chainId]: sorted });
       setSyncingChain(null);
     },
-    [getLocalRpcArray, metadataUrlMap, updateField, setRpcUrls, rpcUrls],
+    [getLocalRpcArray, metadataUrlMap, updateField],
   );
 
-  const save = () => {
-    // Convert comma-separated strings into arrays for each networkId
-    const parsed: RpcUrlsContextType = Object.keys(localRpc).reduce((acc, networkId) => {
-      const val = localRpc[networkId];
-      if (typeof val === "string") {
-        const arr = val
-          .split(",")
-          .map((s) => s.trim())
-          .filter(Boolean);
-        acc[networkId] = arr;
-      } else if (val !== undefined) {
-        acc[networkId] = val;
-      }
-      return acc;
-    }, {} as RpcUrlsContextType);
-
-    // Get previous API keys from settings
-    const prevInfuraKey = settings.apiKeys?.infura || "";
-    const prevAlchemyKey = settings.apiKeys?.alchemy || "";
-
-    // Process each EVM chain to add/remove provider URLs (Infura/Alchemy only support EVM)
-    // Map chainId to networkId (CAIP-2 format: "eip155:<chainId>")
-    for (const chainId of Object.keys(INFURA_NETWORKS).map(Number)) {
-      const networkId = `eip155:${chainId}`;
-      let urls: string[] = (parsed[networkId] as string[]) || [];
-
-      // Handle Infura
-      const oldInfuraUrl = prevInfuraKey ? getInfuraUrl(chainId, prevInfuraKey) : null;
-      const newInfuraUrl = localApiKeys.infura ? getInfuraUrl(chainId, localApiKeys.infura) : null;
-
-      // Remove old Infura URL if key changed or removed
-      if (oldInfuraUrl && oldInfuraUrl !== newInfuraUrl) {
-        urls = urls.filter((u) => u !== oldInfuraUrl);
-      }
-      // Add new Infura URL if key added and not already present
-      if (newInfuraUrl && !urls.includes(newInfuraUrl)) {
-        urls = [newInfuraUrl, ...urls];
-      }
-
-      parsed[networkId] = urls;
-    }
-
-    for (const chainId of Object.keys(ALCHEMY_NETWORKS).map(Number)) {
-      const networkId = `eip155:${chainId}`;
-      let urls: string[] = (parsed[networkId] as string[]) || [];
-
-      // Handle Alchemy
-      const oldAlchemyUrl = prevAlchemyKey ? getAlchemyUrl(chainId, prevAlchemyKey) : null;
-      const newAlchemyUrl = localApiKeys.alchemy
-        ? getAlchemyUrl(chainId, localApiKeys.alchemy)
-        : null;
-
-      // Remove old Alchemy URL if key changed or removed
-      if (oldAlchemyUrl && oldAlchemyUrl !== newAlchemyUrl) {
-        urls = urls.filter((u) => u !== oldAlchemyUrl);
-      }
-      // Add new Alchemy URL if key added and not already present
-      if (newAlchemyUrl && !urls.includes(newAlchemyUrl)) {
-        urls = [newAlchemyUrl, ...urls];
-      }
-
-      parsed[networkId] = urls;
-    }
-
-    // Save API keys to settings
-    updateSettings({
-      apiKeys: {
-        infura: localApiKeys.infura || undefined,
-        alchemy: localApiKeys.alchemy || undefined,
-        etherscan: localApiKeys.etherscan || undefined,
-        groq: localApiKeys.groq || undefined,
-        openai: localApiKeys.openai || undefined,
-        anthropic: localApiKeys.anthropic || undefined,
-        perplexity: localApiKeys.perplexity || undefined,
-        gemini: localApiKeys.gemini || undefined,
-      },
-    });
-
-    setRpcUrls(parsed);
-    setSaveSuccess(true);
-    setTimeout(() => setSaveSuccess(false), 3000);
-  };
-
-  // Get enabled networks from config
-  // Use networkId as primary key for RPC storage, keep chainId for EVM-specific features
   const chainConfigs = useMemo(() => {
     return getEnabledNetworks().map((network) => {
       const chainId = getChainIdFromNetwork(network);
       return {
-        id: network.networkId, // Primary key for RPC storage (CAIP-2 format)
-        chainId: chainId, // Keep chainId separate for EVM-specific features (Infura, Alchemy, MetaMask)
+        id: network.networkId,
+        chainId: chainId,
         name: network.name,
         type: network.type,
       };
     });
   }, []);
 
-  const primaryAIProviderId = AI_PROVIDER_ORDER[0] ?? ("groq" as AIProvider);
-  const otherAIProviderIds = AI_PROVIDER_ORDER.filter(
+  // Filter out keyless providers (openscan-groq) — they don't need user-configured keys
+  type KeyRequiredProvider = Exclude<AIProvider, "openscan-groq">;
+  const keyRequiredProviders = AI_PROVIDER_ORDER.filter(
+    (id): id is KeyRequiredProvider => AI_PROVIDERS[id].keyUrl !== "",
+  );
+  const primaryAIProviderId = keyRequiredProviders[0] ?? ("groq" as KeyRequiredProvider);
+  const otherAIProviderIds = keyRequiredProviders.filter(
     (providerId) => providerId !== primaryAIProviderId,
   );
 
+  const autoSaveMessage =
+    autoSaveState === "saving"
+      ? "Saving…"
+      : autoSaveState === "saved"
+        ? "Saved"
+        : "Auto-save enabled";
+
+  const hasUnsavedChanges = currentDraft !== lastSavedDraftRef.current;
+  const providersSaveMessage = hasUnsavedChanges ? "Unsaved changes" : "All changes saved";
+
+  const handleSaveProviders = useCallback(() => {
+    setAutoSaveState("saving");
+    persistConfiguration(localRpc, localApiKeys);
+  }, [localApiKeys, localRpc, persistConfiguration]);
+
   return (
     <>
-      {/* Fixed Toast Notifications */}
-      {(saveSuccess || cacheCleared) && (
+      {(cacheCleared || importSuccess || importError) && (
         <div className="settings-toast-container">
-          {saveSuccess && (
+          {cacheCleared && (
             <div className="settings-toast settings-toast-success">
-              ✓ {t("toasts.settingsSaved")}
+              ✓ {t("toasts.cacheCleared")}
             </div>
           )}
-          {cacheCleared && (
+          {importSuccess && (
             <div className="settings-toast settings-toast-success">
-              ✓ {t("toasts.cacheCleared")}
+              ✓ {t("cacheData.importConfig.success")}
+            </div>
+          )}
+          {importError && (
+            <div className="settings-toast settings-toast-error">
+              ✗ {t("cacheData.importConfig.invalidFile")}
             </div>
           )}
         </div>
@@ -525,649 +813,822 @@ const Settings: React.FC = () => {
         <div className="page-card settings-container">
           <h1 className="page-title-small">{t("pageTitle")}</h1>
 
-          {/* Settings Grid: 2x2 layout */}
-          <div className="settings-grid">
-            {/* Appearance Settings Section */}
-            <div className="settings-section no-margin">
-              <h2 className="settings-section-title">🎨 {t("appearance.title")}</h2>
-              <p className="settings-section-description">{t("appearance.description")}</p>
-
-              <div className="settings-item">
-                <div>
-                  <div className="settings-item-label">
-                    {t("appearance.backgroundBlocks.label")}
-                  </div>
-                  <div className="settings-item-description">
-                    {t("appearance.backgroundBlocks.description")}
-                  </div>
-                </div>
-                <label className="settings-toggle">
-                  <input
-                    type="checkbox"
-                    checked={settings.showBackgroundBlocks ?? true}
-                    onChange={(e) => updateSettings({ showBackgroundBlocks: e.target.checked })}
-                    className="settings-toggle-input"
-                  />
-                  <span
-                    className={`settings-toggle-slider ${settings.showBackgroundBlocks ? "active" : ""}`}
-                  >
-                    <span
-                      className={`settings-toggle-knob ${settings.showBackgroundBlocks ? "active" : ""}`}
-                    />
-                  </span>
-                </label>
-              </div>
-            </div>
-
-            {/* Language Settings Section */}
-            <div className="settings-section no-margin">
-              <h2 className="settings-section-title">🌐 {t("language.title")}</h2>
-              <p className="settings-section-description">{t("language.description")}</p>
-
-              <div className="settings-item">
-                <div>
-                  <div className="settings-item-label">{t("language.label")}</div>
-                  <div className="settings-item-description">{t("language.selectDescription")}</div>
-                </div>
-                <select
-                  value={i18n.language}
-                  onChange={(e) => i18n.changeLanguage(e.target.value)}
-                  className="settings-select"
-                >
-                  {SUPPORTED_LANGUAGES.map((lang) => (
-                    <option key={lang.code} value={lang.code}>
-                      {lang.name}
-                    </option>
-                  ))}
-                </select>
-              </div>
+          <div className="settings-tabs-shell">
+            <div className="settings-tabs-mobile">
+              <select
+                value={activeTab}
+                onChange={(e) => handleTabChange(e.target.value as SettingsTab)}
+                className="settings-tabs-mobile-select"
+              >
+                {SETTINGS_TABS.map((tab) => (
+                  <option key={tab.id} value={tab.id}>
+                    {tab.label}
+                  </option>
+                ))}
+              </select>
+              <span className="settings-tabs-mobile-arrow">▼</span>
             </div>
 
-            {/* Cache & Data Section */}
-            <div className="settings-section no-margin">
-              <h2 className="settings-section-title">🗑️ {t("cacheData.title")}</h2>
-              <p className="settings-section-description">{t("cacheData.description")}</p>
-
-              <div className="settings-item">
-                <div>
-                  <div className="settings-item-label">{t("cacheData.clearCache.label")}</div>
-                  <div className="settings-item-description">
-                    {t("cacheData.clearCache.description")}
-                  </div>
-                </div>
-                <button
-                  type="button"
-                  className="settings-clear-cache-button"
-                  onClick={clearAllCaches}
-                >
-                  🗑️ {t("cacheData.clearCache.button")}
-                </button>
-              </div>
-              <br />
-              <div className="settings-item">
-                <div>
-                  <div className="settings-item-label">{t("cacheData.clearSiteData.label")}</div>
-                  <div className="settings-item-description">
-                    {t("cacheData.clearSiteData.description")}
-                  </div>
-                </div>
+            <div className="settings-tabs" role="tablist" aria-label="Settings tabs">
+              {SETTINGS_TABS.map((tab) => (
                 <button
+                  key={tab.id}
                   type="button"
-                  className="settings-clear-site-data-button"
-                  onClick={clearSiteData}
+                  role="tab"
+                  aria-selected={activeTab === tab.id}
+                  aria-controls={`settings-panel-${tab.id}`}
+                  id={`settings-tab-${tab.id}`}
+                  className={`settings-tab ${activeTab === tab.id ? "active" : ""}`}
+                  onClick={() => handleTabChange(tab.id)}
                 >
-                  ⚠️ {t("cacheData.clearSiteData.button")}
+                  {tab.label}
                 </button>
-              </div>
+              ))}
             </div>
+          </div>
 
-            {/* RPC Strategy Section */}
-            <div className="settings-section no-margin">
-              <h2 className="settings-section-title">⚡ {t("rpcStrategy.title")}</h2>
-              <p className="settings-section-description">{t("rpcStrategy.description")}</p>
-
-              <div className="settings-item">
-                <div>
-                  <div className="settings-item-label">
-                    {t("rpcStrategy.requestStrategy.label")}
-                  </div>
-                  <div className="settings-item-description">
-                    <strong>Fallback:</strong> {t("rpcStrategy.requestStrategy.fallbackDesc")}
-                    <br />
-                    <strong>Parallel:</strong> {t("rpcStrategy.requestStrategy.parallelDesc")}
-                    <br />
-                    <strong>Race:</strong> {t("rpcStrategy.requestStrategy.raceDesc")}
+          <div className="settings-tab-panel-wrap">
+            {activeTab === "display" && (
+              <div
+                id="settings-panel-display"
+                className="settings-tab-panel"
+                role="tabpanel"
+                aria-labelledby="settings-tab-display"
+              >
+                <div className="settings-grid settings-tab-grid">
+                  <div className="settings-section no-margin">
+                    <h2 className="settings-section-title">🎨 {t("appearance.title")}</h2>
+                    <p className="settings-section-description">{t("appearance.description")}</p>
+
+                    <div className="settings-item">
+                      <div>
+                        <div className="settings-item-label">
+                          {t("appearance.backgroundBlocks.label")}
+                        </div>
+                        <div className="settings-item-description">
+                          {t("appearance.backgroundBlocks.description")}
+                        </div>
+                      </div>
+                      <label className="settings-toggle">
+                        <input
+                          type="checkbox"
+                          checked={settings.showBackgroundBlocks ?? true}
+                          onChange={(e) =>
+                            updateSettings({ showBackgroundBlocks: e.target.checked })
+                          }
+                          className="settings-toggle-input"
+                        />
+                        <span
+                          className={`settings-toggle-slider ${settings.showBackgroundBlocks ? "active" : ""}`}
+                        >
+                          <span
+                            className={`settings-toggle-knob ${settings.showBackgroundBlocks ? "active" : ""}`}
+                          />
+                        </span>
+                      </label>
+                    </div>
                   </div>
-                </div>
-                <select
-                  value={settings.rpcStrategy || "fallback"}
-                  onChange={(e) =>
-                    updateSettings({
-                      rpcStrategy: e.target.value as "fallback" | "parallel" | "race",
-                    })
-                  }
-                  className="settings-select"
-                >
-                  <option value="fallback">{t("rpcStrategy.requestStrategy.fallback")}</option>
-                  <option value="parallel">{t("rpcStrategy.requestStrategy.parallel")}</option>
-                  <option value="race">{t("rpcStrategy.requestStrategy.race")}</option>
-                </select>
-              </div>
 
-              {/* Max Parallel Requests - Only show when parallel mode is active */}
-              {(settings.rpcStrategy === "parallel" || settings.rpcStrategy === "race") && (
-                <div className="settings-item">
-                  <div>
-                    <div className="settings-item-label">
-                      {t("rpcStrategy.maxParallelRequests.label")}
-                    </div>
-                    <div className="settings-item-description">
-                      {t("rpcStrategy.maxParallelRequests.description")}
+                  <div className="settings-section no-margin">
+                    <h2 className="settings-section-title">🌐 {t("language.title")}</h2>
+                    <p className="settings-section-description">{t("language.description")}</p>
+
+                    <div className="settings-item">
+                      <div>
+                        <div className="settings-item-label">{t("language.label")}</div>
+                        <div className="settings-item-description">
+                          {t("language.selectDescription")}
+                        </div>
+                      </div>
+                      <select
+                        value={i18n.language}
+                        onChange={(e) => i18n.changeLanguage(e.target.value)}
+                        className="settings-select"
+                      >
+                        {SUPPORTED_LANGUAGES.map((lang) => (
+                          <option key={lang.code} value={lang.code}>
+                            {lang.name}
+                          </option>
+                        ))}
+                      </select>
                     </div>
                   </div>
-                  <select
-                    value={settings.maxParallelRequests ?? 3}
-                    onChange={(e) =>
-                      updateSettings({
-                        maxParallelRequests: Number(e.target.value),
-                      })
-                    }
-                    className="settings-select"
-                  >
-                    <option value={1}>{t("rpcStrategy.maxParallelRequests.option1")}</option>
-                    <option value={2}>{t("rpcStrategy.maxParallelRequests.option2")}</option>
-                    <option value={3}>{t("rpcStrategy.maxParallelRequests.option3")}</option>
-                    <option value={5}>{t("rpcStrategy.maxParallelRequests.option5")}</option>
-                    <option value={10}>{t("rpcStrategy.maxParallelRequests.option10")}</option>
-                    <option value={0}>
-                      {t("rpcStrategy.maxParallelRequests.optionUnlimited")}
-                    </option>
-                  </select>
-                </div>
-              )}
-            </div>
-
-            {/* API Keys Section */}
-            <div className="settings-section no-margin">
-              <h2 className="settings-section-title">🔑 {t("apiKeys.title")}</h2>
-              <p className="settings-section-description">{t("apiKeys.description")}</p>
-
-              <div className="settings-api-key-item">
-                <div className="settings-api-key-header">
-                  <span className="settings-api-key-name">{t("apiKeys.infura.name")}</span>
-                  <a
-                    href="https://app.infura.io/dashboard"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="settings-api-key-link"
-                  >
-                    {t("apiKeys.infura.getKey")} →
-                  </a>
-                </div>
-                <div className="settings-api-key-input-wrapper">
-                  <input
-                    type={showApiKeys.infura ? "text" : "password"}
-                    className="settings-rpc-input"
-                    value={localApiKeys.infura}
-                    onChange={(e) =>
-                      setLocalApiKeys((prev) => ({ ...prev, infura: e.target.value }))
-                    }
-                    placeholder={t("apiKeys.infura.placeholder")}
-                  />
-                  <button
-                    type="button"
-                    className="settings-api-key-toggle"
-                    onClick={() => setShowApiKeys((prev) => ({ ...prev, infura: !prev.infura }))}
-                    title={showApiKeys.infura ? t("apiKeys.toggleHide") : t("apiKeys.toggleShow")}
-                  >
-                    {showApiKeys.infura ? "👁️" : "👁️‍🗨️"}
-                  </button>
                 </div>
               </div>
+            )}
 
-              <div className="settings-api-key-item">
-                <div className="settings-api-key-header">
-                  <span className="settings-api-key-name">{t("apiKeys.alchemy.name")}</span>
-                  <a
-                    href="https://dashboard.alchemy.com/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="settings-api-key-link"
+            {activeTab === "providers" && (
+              <div
+                id="settings-panel-providers"
+                className="settings-tab-panel"
+                role="tabpanel"
+                aria-labelledby="settings-tab-providers"
+              >
+                <div className="settings-providers-save-row">
+                  <span
+                    className={`settings-autosave-pill ${hasUnsavedChanges ? "idle" : "saved"}`}
                   >
-                    {t("apiKeys.alchemy.getKey")} →
-                  </a>
-                </div>
-                <div className="settings-api-key-input-wrapper">
-                  <input
-                    type={showApiKeys.alchemy ? "text" : "password"}
-                    className="settings-rpc-input"
-                    value={localApiKeys.alchemy}
-                    onChange={(e) =>
-                      setLocalApiKeys((prev) => ({ ...prev, alchemy: e.target.value }))
-                    }
-                    placeholder={t("apiKeys.alchemy.placeholder")}
-                  />
+                    {providersSaveMessage}
+                  </span>
                   <button
                     type="button"
-                    className="settings-api-key-toggle"
-                    onClick={() => setShowApiKeys((prev) => ({ ...prev, alchemy: !prev.alchemy }))}
-                    title={showApiKeys.alchemy ? t("apiKeys.toggleHide") : t("apiKeys.toggleShow")}
+                    className="settings-save-button"
+                    onClick={handleSaveProviders}
+                    disabled={!hasUnsavedChanges}
                   >
-                    {showApiKeys.alchemy ? "👁️" : "👁️‍🗨️"}
+                    {t("saveConfiguration")}
                   </button>
                 </div>
-              </div>
 
-              <div className="settings-api-key-item">
-                <div className="settings-api-key-header">
-                  <span className="settings-api-key-name">{t("apiKeys.etherscan.name")}</span>
-                  <a
-                    href="https://etherscan.io/myapikey"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="settings-api-key-link"
-                  >
-                    {t("apiKeys.etherscan.getKey")} →
-                  </a>
-                </div>
-                <div className="settings-api-key-input-wrapper">
-                  <input
-                    type={showApiKeys.etherscan ? "text" : "password"}
-                    className="settings-rpc-input"
-                    value={localApiKeys.etherscan}
-                    onChange={(e) =>
-                      setLocalApiKeys((prev) => ({ ...prev, etherscan: e.target.value }))
-                    }
-                    placeholder={t("apiKeys.etherscan.placeholder")}
-                  />
-                  <button
-                    type="button"
-                    className="settings-api-key-toggle"
-                    onClick={() =>
-                      setShowApiKeys((prev) => ({ ...prev, etherscan: !prev.etherscan }))
-                    }
-                    title={
-                      showApiKeys.etherscan ? t("apiKeys.toggleHide") : t("apiKeys.toggleShow")
-                    }
-                  >
-                    {showApiKeys.etherscan ? "👁️" : "👁️‍🗨️"}
-                  </button>
-                </div>
-              </div>
-            </div>
+                <div className="settings-grid settings-tab-grid">
+                  <div className="settings-section no-margin">
+                    <h2 className="settings-section-title">🔑 RPC API Keys</h2>
+                    <p className="settings-section-description">{t("apiKeys.description")}</p>
+
+                    <div className="settings-api-key-item">
+                      <div className="settings-api-key-header">
+                        <span className="settings-api-key-name">{t("apiKeys.infura.name")}</span>
+                        <a
+                          href="https://app.infura.io/dashboard"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="settings-api-key-link"
+                        >
+                          {t("apiKeys.infura.getKey")} →
+                        </a>
+                      </div>
+                      <div className="settings-api-key-input-wrapper">
+                        <input
+                          type={showApiKeys.infura ? "text" : "password"}
+                          className="settings-rpc-input"
+                          value={localApiKeys.infura}
+                          onChange={(e) =>
+                            setLocalApiKeys((prev) => ({ ...prev, infura: e.target.value }))
+                          }
+                          placeholder={t("apiKeys.infura.placeholder")}
+                        />
+                        <button
+                          type="button"
+                          className="settings-api-key-toggle"
+                          onClick={() =>
+                            setShowApiKeys((prev) => ({ ...prev, infura: !prev.infura }))
+                          }
+                          title={
+                            showApiKeys.infura ? t("apiKeys.toggleHide") : t("apiKeys.toggleShow")
+                          }
+                        >
+                          {showApiKeys.infura ? "👁️" : "👁️‍🗨️"}
+                        </button>
+                      </div>
+                    </div>
 
-            {/* AI Provider API Keys */}
-            <div className="settings-section no-margin">
-              <h2 className="settings-section-title">🤖 {t("apiKeys.aiTitle")}</h2>
-              <p className="settings-section-description">{t("apiKeys.aiDescription")}</p>
+                    <div className="settings-api-key-item">
+                      <div className="settings-api-key-header">
+                        <span className="settings-api-key-name">{t("apiKeys.alchemy.name")}</span>
+                        <a
+                          href="https://dashboard.alchemy.com/"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="settings-api-key-link"
+                        >
+                          {t("apiKeys.alchemy.getKey")} →
+                        </a>
+                      </div>
+                      <div className="settings-api-key-input-wrapper">
+                        <input
+                          type={showApiKeys.alchemy ? "text" : "password"}
+                          className="settings-rpc-input"
+                          value={localApiKeys.alchemy}
+                          onChange={(e) =>
+                            setLocalApiKeys((prev) => ({ ...prev, alchemy: e.target.value }))
+                          }
+                          placeholder={t("apiKeys.alchemy.placeholder")}
+                        />
+                        <button
+                          type="button"
+                          className="settings-api-key-toggle"
+                          onClick={() =>
+                            setShowApiKeys((prev) => ({ ...prev, alchemy: !prev.alchemy }))
+                          }
+                          title={
+                            showApiKeys.alchemy ? t("apiKeys.toggleHide") : t("apiKeys.toggleShow")
+                          }
+                        >
+                          {showApiKeys.alchemy ? "👁️" : "👁️‍🗨️"}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
 
-              <div className="settings-api-key-item">
-                <div className="settings-api-key-header">
-                  <span className="settings-api-key-name">
-                    {t(`apiKeys.${primaryAIProviderId}.name`)}
-                  </span>
-                  <a
-                    href={AI_PROVIDERS[primaryAIProviderId].keyUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="settings-api-key-link"
-                  >
-                    {t(`apiKeys.${primaryAIProviderId}.getKey`)} →
-                  </a>
-                </div>
-                <div className="settings-api-key-input-wrapper">
-                  <input
-                    type={showApiKeys[primaryAIProviderId] ? "text" : "password"}
-                    className="settings-rpc-input"
-                    value={localApiKeys[primaryAIProviderId]}
-                    onChange={(e) =>
-                      setLocalApiKeys((prev) => ({
-                        ...prev,
-                        [primaryAIProviderId]: e.target.value,
-                      }))
-                    }
-                    placeholder={t(`apiKeys.${primaryAIProviderId}.placeholder`)}
-                  />
-                  <button
-                    type="button"
-                    className="settings-api-key-toggle"
-                    onClick={() =>
-                      setShowApiKeys((prev) => ({
-                        ...prev,
-                        [primaryAIProviderId]: !prev[primaryAIProviderId],
-                      }))
-                    }
-                    title={
-                      showApiKeys[primaryAIProviderId]
-                        ? t("apiKeys.toggleHide")
-                        : t("apiKeys.toggleShow")
-                    }
-                  >
-                    {showApiKeys[primaryAIProviderId] ? "👁️" : "👁️‍🗨️"}
-                  </button>
+                  <div className="settings-section no-margin">
+                    <h2 className="settings-section-title">🧾 Verifications API Keys</h2>
+                    <p className="settings-section-description">
+                      API keys used for source-code verification services.
+                    </p>
+
+                    <div className="settings-api-key-item">
+                      <div className="settings-api-key-header">
+                        <span className="settings-api-key-name">{t("apiKeys.etherscan.name")}</span>
+                        <a
+                          href="https://etherscan.io/myapikey"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="settings-api-key-link"
+                        >
+                          {t("apiKeys.etherscan.getKey")} →
+                        </a>
+                      </div>
+                      <div className="settings-api-key-input-wrapper">
+                        <input
+                          type={showApiKeys.etherscan ? "text" : "password"}
+                          className="settings-rpc-input"
+                          value={localApiKeys.etherscan}
+                          onChange={(e) =>
+                            setLocalApiKeys((prev) => ({ ...prev, etherscan: e.target.value }))
+                          }
+                          placeholder={t("apiKeys.etherscan.placeholder")}
+                        />
+                        <button
+                          type="button"
+                          className="settings-api-key-toggle"
+                          onClick={() =>
+                            setShowApiKeys((prev) => ({ ...prev, etherscan: !prev.etherscan }))
+                          }
+                          title={
+                            showApiKeys.etherscan
+                              ? t("apiKeys.toggleHide")
+                              : t("apiKeys.toggleShow")
+                          }
+                        >
+                          {showApiKeys.etherscan ? "👁️" : "👁️‍🗨️"}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="settings-section no-margin">
+                    <h2 className="settings-section-title">🤖 {t("apiKeys.aiTitle")}</h2>
+                    <p className="settings-section-description">{t("apiKeys.aiDescription")}</p>
+
+                    <div className="settings-api-key-item">
+                      <div className="settings-api-key-header">
+                        <span className="settings-api-key-name">
+                          {t(`apiKeys.${primaryAIProviderId}.name`)}
+                        </span>
+                        <a
+                          href={AI_PROVIDERS[primaryAIProviderId].keyUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="settings-api-key-link"
+                        >
+                          {t(`apiKeys.${primaryAIProviderId}.getKey`)} →
+                        </a>
+                      </div>
+                      <div className="settings-api-key-input-wrapper">
+                        <input
+                          type={showApiKeys[primaryAIProviderId] ? "text" : "password"}
+                          className="settings-rpc-input"
+                          value={localApiKeys[primaryAIProviderId]}
+                          onChange={(e) =>
+                            setLocalApiKeys((prev) => ({
+                              ...prev,
+                              [primaryAIProviderId]: e.target.value,
+                            }))
+                          }
+                          placeholder={t(`apiKeys.${primaryAIProviderId}.placeholder`)}
+                        />
+                        <button
+                          type="button"
+                          className="settings-api-key-toggle"
+                          onClick={() =>
+                            setShowApiKeys((prev) => ({
+                              ...prev,
+                              [primaryAIProviderId]: !prev[primaryAIProviderId],
+                            }))
+                          }
+                          title={
+                            showApiKeys[primaryAIProviderId]
+                              ? t("apiKeys.toggleHide")
+                              : t("apiKeys.toggleShow")
+                          }
+                        >
+                          {showApiKeys[primaryAIProviderId] ? "👁️" : "👁️‍🗨️"}
+                        </button>
+                      </div>
+                    </div>
+
+                    <button
+                      type="button"
+                      className="settings-section-collapse-button"
+                      onClick={() => setAiKeysExpanded((prev) => !prev)}
+                      aria-expanded={aiKeysExpanded}
+                      aria-controls="settings-ai-other-providers"
+                    >
+                      {aiKeysExpanded ? t("apiKeys.aiProvidersHide") : t("apiKeys.aiProvidersShow")}{" "}
+                      <span aria-hidden="true">{aiKeysExpanded ? "▲" : "▼"}</span>
+                    </button>
+
+                    {aiKeysExpanded && (
+                      <div id="settings-ai-other-providers" className="settings-ai-other-providers">
+                        {otherAIProviderIds.map((providerId) => {
+                          const provider = AI_PROVIDERS[providerId];
+                          return (
+                            <div key={providerId} className="settings-api-key-item">
+                              <div className="settings-api-key-header">
+                                <span className="settings-api-key-name">
+                                  {t(`apiKeys.${providerId}.name`)}
+                                </span>
+                                <a
+                                  href={provider.keyUrl}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  className="settings-api-key-link"
+                                >
+                                  {t(`apiKeys.${providerId}.getKey`)} →
+                                </a>
+                              </div>
+                              <div className="settings-api-key-input-wrapper">
+                                <input
+                                  type={showApiKeys[providerId] ? "text" : "password"}
+                                  className="settings-rpc-input"
+                                  value={localApiKeys[providerId]}
+                                  onChange={(e) =>
+                                    setLocalApiKeys((prev) => ({
+                                      ...prev,
+                                      [providerId]: e.target.value,
+                                    }))
+                                  }
+                                  placeholder={t(`apiKeys.${providerId}.placeholder`)}
+                                />
+                                <button
+                                  type="button"
+                                  className="settings-api-key-toggle"
+                                  onClick={() =>
+                                    setShowApiKeys((prev) => ({
+                                      ...prev,
+                                      [providerId]: !prev[providerId],
+                                    }))
+                                  }
+                                  title={
+                                    showApiKeys[providerId]
+                                      ? t("apiKeys.toggleHide")
+                                      : t("apiKeys.toggleShow")
+                                  }
+                                >
+                                  {showApiKeys[providerId] ? "👁️" : "👁️‍🗨️"}
+                                </button>
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    )}
+
+                    <div className="settings-item settings-prompt-version-item">
+                      <div>
+                        <div className="settings-item-label">
+                          {t("apiKeys.promptVersion.label")}
+                        </div>
+                        <div className="settings-item-description">
+                          {t("apiKeys.promptVersion.description")}
+                        </div>
+                      </div>
+                      <select
+                        value={settings.promptVersion || "stable"}
+                        onChange={(e) =>
+                          updateSettings({ promptVersion: e.target.value as PromptVersion })
+                        }
+                        className="settings-select"
+                      >
+                        <option value="stable">{t("apiKeys.promptVersion.stable")}</option>
+                        <option value="latest">{t("apiKeys.promptVersion.latest")}</option>
+                      </select>
+                    </div>
+                  </div>
                 </div>
               </div>
+            )}
 
-              <button
-                type="button"
-                className="settings-section-collapse-button"
-                onClick={() => setAiKeysExpanded((prev) => !prev)}
-                aria-expanded={aiKeysExpanded}
-                aria-controls="settings-ai-other-providers"
+            {activeTab === "network" && (
+              <div
+                id="settings-panel-network"
+                className="settings-tab-panel"
+                role="tabpanel"
+                aria-labelledby="settings-tab-network"
               >
-                {aiKeysExpanded ? t("apiKeys.aiProvidersHide") : t("apiKeys.aiProvidersShow")}{" "}
-                <span aria-hidden="true">{aiKeysExpanded ? "▲" : "▼"}</span>
-              </button>
-
-              {aiKeysExpanded && (
-                <div id="settings-ai-other-providers" className="settings-ai-other-providers">
-                  {otherAIProviderIds.map((providerId) => {
-                    const provider = AI_PROVIDERS[providerId];
-                    return (
-                      <div key={providerId} className="settings-api-key-item">
-                        <div className="settings-api-key-header">
-                          <span className="settings-api-key-name">
-                            {t(`apiKeys.${providerId}.name`)}
-                          </span>
-                          <a
-                            href={provider.keyUrl}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="settings-api-key-link"
-                          >
-                            {t(`apiKeys.${providerId}.getKey`)} →
-                          </a>
+                <div className="settings-autosave-row">
+                  <span className={`settings-autosave-pill ${autoSaveState}`}>
+                    {autoSaveMessage}
+                  </span>
+                </div>
+
+                <div className="settings-section no-margin-bottom">
+                  <h2 className="settings-section-title">⚡ {t("rpcStrategy.title")}</h2>
+                  <p className="settings-section-description">{t("rpcStrategy.description")}</p>
+
+                  <div className="settings-item">
+                    <div>
+                      <div className="settings-item-label">
+                        {t("rpcStrategy.requestStrategy.label")}
+                      </div>
+                      <div className="settings-item-description">
+                        <strong>Fallback:</strong> {t("rpcStrategy.requestStrategy.fallbackDesc")}
+                        <br />
+                        <strong>Parallel:</strong> {t("rpcStrategy.requestStrategy.parallelDesc")}
+                        <br />
+                        <strong>Race:</strong> {t("rpcStrategy.requestStrategy.raceDesc")}
+                      </div>
+                    </div>
+                    <select
+                      value={settings.rpcStrategy || "fallback"}
+                      onChange={(e) =>
+                        updateSettings({
+                          rpcStrategy: e.target.value as "fallback" | "parallel" | "race",
+                        })
+                      }
+                      className="settings-select"
+                    >
+                      <option value="fallback">{t("rpcStrategy.requestStrategy.fallback")}</option>
+                      <option value="parallel">{t("rpcStrategy.requestStrategy.parallel")}</option>
+                      <option value="race">{t("rpcStrategy.requestStrategy.race")}</option>
+                    </select>
+                  </div>
+
+                  {(settings.rpcStrategy === "parallel" || settings.rpcStrategy === "race") && (
+                    <div className="settings-item">
+                      <div>
+                        <div className="settings-item-label">
+                          {t("rpcStrategy.maxParallelRequests.label")}
                         </div>
-                        <div className="settings-api-key-input-wrapper">
-                          <input
-                            type={showApiKeys[providerId] ? "text" : "password"}
-                            className="settings-rpc-input"
-                            value={localApiKeys[providerId]}
-                            onChange={(e) =>
-                              setLocalApiKeys((prev) => ({
-                                ...prev,
-                                [providerId]: e.target.value,
-                              }))
-                            }
-                            placeholder={t(`apiKeys.${providerId}.placeholder`)}
-                          />
-                          <button
-                            type="button"
-                            className="settings-api-key-toggle"
-                            onClick={() =>
-                              setShowApiKeys((prev) => ({
-                                ...prev,
-                                [providerId]: !prev[providerId],
-                              }))
-                            }
-                            title={
-                              showApiKeys[providerId]
-                                ? t("apiKeys.toggleHide")
-                                : t("apiKeys.toggleShow")
-                            }
-                          >
-                            {showApiKeys[providerId] ? "👁️" : "👁️‍🗨️"}
-                          </button>
+                        <div className="settings-item-description">
+                          {t("rpcStrategy.maxParallelRequests.description")}
                         </div>
                       </div>
-                    );
-                  })}
+                      <select
+                        value={settings.maxParallelRequests ?? 3}
+                        onChange={(e) =>
+                          updateSettings({ maxParallelRequests: Number(e.target.value) })
+                        }
+                        className="settings-select"
+                      >
+                        <option value={1}>{t("rpcStrategy.maxParallelRequests.option1")}</option>
+                        <option value={2}>{t("rpcStrategy.maxParallelRequests.option2")}</option>
+                        <option value={3}>{t("rpcStrategy.maxParallelRequests.option3")}</option>
+                        <option value={5}>{t("rpcStrategy.maxParallelRequests.option5")}</option>
+                        <option value={10}>{t("rpcStrategy.maxParallelRequests.option10")}</option>
+                        <option value={0}>
+                          {t("rpcStrategy.maxParallelRequests.optionUnlimited")}
+                        </option>
+                      </select>
+                    </div>
+                  )}
                 </div>
-              )}
 
-              <div className="settings-item">
-                <div>
-                  <div className="settings-item-label">{t("apiKeys.promptVersion.label")}</div>
-                  <div className="settings-item-description">
-                    {t("apiKeys.promptVersion.description")}
+                <div className="settings-section">
+                  <div className="settings-section-title-row">
+                    <h2 className="settings-section-title">🔗 {t("rpcEndpoints.title")}</h2>
+                    <Link to="/rpcs" className="settings-section-link">
+                      {t("rpcEndpoints.testEndpoints")} →
+                    </Link>
                   </div>
-                </div>
-                <select
-                  value={settings.promptVersion || "stable"}
-                  onChange={(e) =>
-                    updateSettings({ promptVersion: e.target.value as PromptVersion })
-                  }
-                  className="settings-select"
-                >
-                  <option value="stable">{t("apiKeys.promptVersion.stable")}</option>
-                  <option value="latest">{t("apiKeys.promptVersion.latest")}</option>
-                </select>
-              </div>
-            </div>
-            {/* Super User Section - only visible in super user mode */}
-            {isSuperUser && (
-              <div className="settings-section no-margin">
-                <h2 className="settings-section-title">{t("superUser.title")}</h2>
-                <p className="settings-section-description">{t("superUser.description")}</p>
-
-                <div className="settings-item">
-                  <div>
-                    <div className="settings-item-label">
-                      {t("superUser.persistentCache.sizeLimit.label")}
-                    </div>
-                    <div className="settings-item-description">
-                      {t("superUser.persistentCache.sizeLimit.description")}
-                    </div>
+                  <p className="settings-section-description">{t("rpcEndpoints.description")}</p>
+
+                  <div className="flex-start settings-rpc-legend">
+                    <span className="settings-rpc-tag rpc-opensource">
+                      {t("rpcEndpoints.legendOpensource")}
+                    </span>
+                    <span className="settings-rpc-tag rpc-private">
+                      {t("rpcEndpoints.legendPrivate")}
+                    </span>
+                    <span className="settings-rpc-tag rpc-tracking">
+                      {t("rpcEndpoints.legendTracking")}
+                    </span>
                   </div>
-                  <select
-                    value={settings.persistentCacheSizeMB ?? 10}
-                    onChange={(e) =>
-                      updateSettings({ persistentCacheSizeMB: Number(e.target.value) })
-                    }
-                    className="settings-select"
-                  >
-                    <option value={5}>5 MB</option>
-                    <option value={10}>10 MB</option>
-                    <option value={25}>25 MB</option>
-                    <option value={50}>50 MB</option>
-                    <option value={100}>100 MB</option>
-                  </select>
-                </div>
 
-                <div className="settings-item">
-                  <div>
-                    <div className="settings-item-label">
-                      {t("superUser.persistentCache.label")}
-                    </div>
-                    <div className="settings-item-description">
-                      {t("superUser.persistentCache.usage", {
-                        used: `${(persistentCacheBytes / (1024 * 1024)).toFixed(2)} MB`,
-                        limit: `${settings.persistentCacheSizeMB ?? 10} MB`,
-                      })}
-                    </div>
+                  <div className="flex-column settings-chain-list">
+                    {chainConfigs.map((chain) => {
+                      const isExpanded = expandedChains.has(chain.id);
+                      const rpcCount = getLocalRpcArray(chain.id).length;
+
+                      return (
+                        <div key={chain.id} className="settings-chain-item">
+                          <div className="settings-chain-header">
+                            <button
+                              type="button"
+                              className="settings-chain-header-toggle"
+                              onClick={() => toggleChainExpanded(chain.id)}
+                            >
+                              <span
+                                className={`settings-chain-chevron ${isExpanded ? "expanded" : ""}`}
+                              >
+                                ▶
+                              </span>
+                              <span className="settings-chain-name-text">{chain.name}</span>
+                              <span className="settings-chain-id-badge">
+                                {chain.chainId !== undefined ? `Chain ${chain.chainId}` : chain.id}
+                              </span>
+                            </button>
+                            {isMetaMaskAvailable && chain.chainId !== undefined && (
+                              <button
+                                type="button"
+                                className={`settings-metamask-button ${metamaskStatus[chain.id] === "success" ? "success" : ""} ${metamaskStatus[chain.id] === "loading" ? "loading" : ""}`}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleSetMetaMaskExplorer(chain.id, chain.chainId);
+                                }}
+                                disabled={
+                                  !isSupported(chain.chainId) ||
+                                  metamaskStatus[chain.id] === "loading"
+                                }
+                                title={
+                                  !isSupported(chain.chainId)
+                                    ? t("rpcEndpoints.metamask.notSupported")
+                                    : metamaskStatus[chain.id] === "success"
+                                      ? t("rpcEndpoints.metamask.configured")
+                                      : t("rpcEndpoints.metamask.setDefault")
+                                }
+                              >
+                                <MetaMaskIcon size={16} />
+                                <span>
+                                  {metamaskStatus[chain.id] === "loading"
+                                    ? t("rpcEndpoints.metamask.configuring")
+                                    : metamaskStatus[chain.id] === "success"
+                                      ? t("rpcEndpoints.metamask.configuredText")
+                                      : t("rpcEndpoints.metamask.useAsDefault")}
+                                </span>
+                              </button>
+                            )}
+                            <button
+                              type="button"
+                              className={`settings-sync-button ${syncingChain === chain.id ? "loading" : ""}`}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleSyncRpcs(chain.id, chain.type);
+                              }}
+                              disabled={syncingChain !== null || rpcCount < 2}
+                              title={t("rpcEndpoints.syncRpcs")}
+                            >
+                              {syncingChain === chain.id
+                                ? t("rpcEndpoints.syncing")
+                                : t("rpcEndpoints.syncRpcs")}
+                            </button>
+                            <span className="settings-chain-rpc-count">
+                              {rpcCount} RPC{rpcCount !== 1 ? "s" : ""}
+                            </span>
+                          </div>
+
+                          {isExpanded && (
+                            <div className="settings-chain-content">
+                              <input
+                                className="settings-rpc-input"
+                                value={getLocalRpcString(chain.id)}
+                                onChange={(e) => updateField(chain.id, e.target.value)}
+                                placeholder="https://eth-mainnet.g.alchemy.com/v2/YOUR-API-KEY"
+                              />
+
+                              {chain.chainId === 31337 && (
+                                <div className="settings-help-text">
+                                  💡 {t("rpcEndpoints.localhostHelp")}{" "}
+                                  <a
+                                    href="https://dashboard.ngrok.com/get-started/setup"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="settings-link"
+                                  >
+                                    {t("rpcEndpoints.localhostHelpLink")}
+                                  </a>
+                                </div>
+                              )}
+
+                              {(() => {
+                                const rpcArray = getLocalRpcArray(chain.id);
+                                if (rpcArray.length === 0) return null;
+                                return (
+                                  <div className="flex-column settings-rpc-list">
+                                    <span className="settings-rpc-list-label">
+                                      {t("rpcEndpoints.currentRPCs")}
+                                    </span>
+                                    <div className="flex-start settings-rpc-tags">
+                                      {rpcArray.map((url, idx) => (
+                                        // biome-ignore lint/a11y/useSemanticElements: Tag container needs drag/drop behavior and contains a dedicated delete button.
+                                        <div
+                                          key={url}
+                                          className={`settings-rpc-tag ${getRpcTagClass(url)} ${draggedItem?.networkId === chain.id && draggedItem?.index === idx ? "dragging" : ""}`}
+                                          title={url}
+                                          role="button"
+                                          tabIndex={0}
+                                          draggable
+                                          onDragStart={() => handleDragStart(chain.id, idx)}
+                                          onDragOver={handleDragOver}
+                                          onDrop={() => handleDrop(chain.id, idx)}
+                                          onDragEnd={() => setDraggedItem(null)}
+                                          onClick={() => copyToClipboard(url)}
+                                          onKeyDown={(e) => {
+                                            if (e.key === "Enter" || e.key === " ")
+                                              copyToClipboard(url);
+                                          }}
+                                        >
+                                          <span className="settings-rpc-tag-index">{idx + 1}</span>
+                                          <span className="settings-rpc-tag-provider">
+                                            {getRpcTagLabel(url)}
+                                          </span>
+                                          <button
+                                            type="button"
+                                            className="settings-rpc-tag-delete"
+                                            onClick={(e) => {
+                                              e.stopPropagation();
+                                              deleteRpc(chain.id, idx);
+                                            }}
+                                            title={t("rpcEndpoints.removeRpc")}
+                                          >
+                                            ×
+                                          </button>
+                                        </div>
+                                      ))}
+                                    </div>
+                                  </div>
+                                );
+                              })()}
+                            </div>
+                          )}
+                        </div>
+                      );
+                    })}
                   </div>
-                  <button
-                    type="button"
-                    className="settings-clear-cache-button"
-                    onClick={() => {
-                      clearPersistentCache();
-                      setPersistentCacheBytes(0);
-                    }}
-                  >
-                    {t("superUser.persistentCache.clear.button")}
-                  </button>
                 </div>
               </div>
             )}
-          </div>
 
-          {/* Save Button - positioned after general settings */}
-          <div className="settings-save-section">
-            <button type="button" onClick={save} className="settings-save-button">
-              💾 {t("saveConfiguration")}
-            </button>
-          </div>
-
-          {/* RPC Configuration Section */}
-          <div className="settings-section">
-            <div className="settings-section-title-row">
-              <h2 className="settings-section-title">🔗 {t("rpcEndpoints.title")}</h2>
-              <Link to="/rpcs" className="settings-section-link">
-                {t("rpcEndpoints.testEndpoints")} →
-              </Link>
-            </div>
-            <p className="settings-section-description">{t("rpcEndpoints.description")}</p>
-
-            <div className="flex-start settings-rpc-legend">
-              <span className="settings-rpc-tag rpc-opensource">
-                {t("rpcEndpoints.legendOpensource")}
-              </span>
-              <span className="settings-rpc-tag rpc-private">
-                {t("rpcEndpoints.legendPrivate")}
-              </span>
-              <span className="settings-rpc-tag rpc-tracking">
-                {t("rpcEndpoints.legendTracking")}
-              </span>
-            </div>
+            {activeTab === "advanced" && (
+              <div
+                id="settings-panel-advanced"
+                className="settings-tab-panel"
+                role="tabpanel"
+                aria-labelledby="settings-tab-advanced"
+              >
+                <div className="settings-grid settings-tab-grid">
+                  <div className="settings-section no-margin">
+                    <h2 className="settings-section-title">🗑️ {t("cacheData.title")}</h2>
+                    <p className="settings-section-description">{t("cacheData.description")}</p>
+
+                    <div className="settings-item">
+                      <div>
+                        <div className="settings-item-label">{t("cacheData.clearCache.label")}</div>
+                        <div className="settings-item-description">
+                          {t("cacheData.clearCache.description")}
+                        </div>
+                      </div>
+                      <button
+                        type="button"
+                        className="settings-clear-cache-button"
+                        onClick={clearAllCaches}
+                      >
+                        🗑️ {t("cacheData.clearCache.button")}
+                      </button>
+                    </div>
 
-            <div className="flex-column settings-chain-list">
-              {chainConfigs.map((chain) => {
-                const isExpanded = expandedChains.has(chain.id);
-                const rpcCount = getLocalRpcArray(chain.id).length;
+                    <br />
 
-                return (
-                  <div key={chain.id} className="settings-chain-item">
-                    {/* Collapsible Header */}
-                    <div className="settings-chain-header">
+                    <div className="settings-item">
+                      <div>
+                        <div className="settings-item-label">
+                          {t("cacheData.clearSiteData.label")}
+                        </div>
+                        <div className="settings-item-description">
+                          {t("cacheData.clearSiteData.description")}
+                        </div>
+                      </div>
                       <button
                         type="button"
-                        className="settings-chain-header-toggle"
-                        onClick={() => toggleChainExpanded(chain.id)}
+                        className="settings-clear-site-data-button"
+                        onClick={clearSiteData}
                       >
-                        <span className={`settings-chain-chevron ${isExpanded ? "expanded" : ""}`}>
-                          ▶
-                        </span>
-                        <span className="settings-chain-name-text">{chain.name}</span>
-                        <span className="settings-chain-id-badge">
-                          {chain.chainId !== undefined ? `Chain ${chain.chainId}` : chain.id}
-                        </span>
+                        ⚠️ {t("cacheData.clearSiteData.button")}
                       </button>
-                      {isMetaMaskAvailable && chain.chainId !== undefined && (
-                        <button
-                          type="button"
-                          className={`settings-metamask-button ${metamaskStatus[chain.id] === "success" ? "success" : ""} ${metamaskStatus[chain.id] === "loading" ? "loading" : ""}`}
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            handleSetMetaMaskExplorer(chain.id, chain.chainId);
-                          }}
-                          disabled={
-                            !isSupported(chain.chainId) || metamaskStatus[chain.id] === "loading"
-                          }
-                          title={
-                            !isSupported(chain.chainId)
-                              ? t("rpcEndpoints.metamask.notSupported")
-                              : metamaskStatus[chain.id] === "success"
-                                ? t("rpcEndpoints.metamask.configured")
-                                : t("rpcEndpoints.metamask.setDefault")
-                          }
-                        >
-                          <MetaMaskIcon size={16} />
-                          <span>
-                            {metamaskStatus[chain.id] === "loading"
-                              ? t("rpcEndpoints.metamask.configuring")
-                              : metamaskStatus[chain.id] === "success"
-                                ? t("rpcEndpoints.metamask.configuredText")
-                                : t("rpcEndpoints.metamask.useAsDefault")}
-                          </span>
-                        </button>
-                      )}
+                    </div>
+
+                    <br />
+
+                    <div className="settings-item">
+                      <div>
+                        <div className="settings-item-label">
+                          {t("cacheData.exportConfig.label")}
+                        </div>
+                        <div className="settings-item-description">
+                          {t("cacheData.exportConfig.description")}
+                        </div>
+                      </div>
                       <button
                         type="button"
-                        className={`settings-sync-button ${syncingChain === chain.id ? "loading" : ""}`}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleSyncRpcs(chain.id, chain.type);
-                        }}
-                        disabled={syncingChain !== null || rpcCount < 2}
-                        title={t("rpcEndpoints.syncRpcs")}
+                        className="settings-clear-cache-button"
+                        onClick={handleExportConfig}
                       >
-                        {syncingChain === chain.id
-                          ? t("rpcEndpoints.syncing")
-                          : t("rpcEndpoints.syncRpcs")}
+                        📦 {t("cacheData.exportConfig.button")}
                       </button>
-                      <span className="settings-chain-rpc-count">
-                        {rpcCount} RPC{rpcCount !== 1 ? "s" : ""}
-                      </span>
                     </div>
 
-                    {/* Collapsible Content */}
-                    {isExpanded && (
-                      <div className="settings-chain-content">
+                    <br />
+
+                    <div className="settings-item">
+                      <div>
+                        <div className="settings-item-label">
+                          {t("cacheData.importConfig.label")}
+                        </div>
+                        <div className="settings-item-description">
+                          {t("cacheData.importConfig.description")}
+                        </div>
+                      </div>
+                      <label className="settings-clear-cache-button" style={{ cursor: "pointer" }}>
+                        📥 {t("cacheData.importConfig.button")}
                         <input
-                          className="settings-rpc-input"
-                          value={getLocalRpcString(chain.id)}
-                          onChange={(e) => updateField(chain.id, e.target.value)}
-                          placeholder="https://eth-mainnet.g.alchemy.com/v2/YOUR-API-KEY"
+                          type="file"
+                          accept=".json"
+                          onChange={handleImportConfig}
+                          style={{ display: "none" }}
                         />
+                      </label>
+                    </div>
+                  </div>
 
-                        {/* Help text for localhost network */}
-                        {chain.chainId === 31337 && (
-                          <div className="settings-help-text">
-                            💡 {t("rpcEndpoints.localhostHelp")}{" "}
-                            <a
-                              href="https://dashboard.ngrok.com/get-started/setup"
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              className="settings-link"
-                            >
-                              {t("rpcEndpoints.localhostHelpLink")}
-                            </a>
-                          </div>
-                        )}
+                  <div className="settings-section no-margin">
+                    <h2 className="settings-section-title">{t("superUser.title")}</h2>
+                    <p className="settings-section-description">{t("superUser.description")}</p>
 
-                        {/* Display current RPC list as tags */}
-                        {(() => {
-                          const rpcArray = getLocalRpcArray(chain.id);
-                          if (rpcArray.length === 0) return null;
-                          return (
-                            <div className="flex-column settings-rpc-list">
-                              <span className="settings-rpc-list-label">
-                                {t("rpcEndpoints.currentRPCs")}
-                              </span>
-                              <div className="flex-start settings-rpc-tags">
-                                {rpcArray.map((url, idx) => (
-                                  // biome-ignore lint/a11y/noStaticElementInteractions: Drag-and-drop requires these handlers
-                                  <div
-                                    key={url}
-                                    className={`settings-rpc-tag ${getRpcTagClass(url)} ${draggedItem?.networkId === chain.id && draggedItem?.index === idx ? "dragging" : ""}`}
-                                    title={url}
-                                    draggable
-                                    onDragStart={() => handleDragStart(chain.id, idx)}
-                                    onDragOver={handleDragOver}
-                                    onDrop={() => handleDrop(chain.id, idx)}
-                                    onDragEnd={() => setDraggedItem(null)}
-                                    onClick={() => copyToClipboard(url)}
-                                    onKeyDown={(e) => {
-                                      if (e.key === "Enter" || e.key === " ") copyToClipboard(url);
-                                    }}
-                                  >
-                                    <span className="settings-rpc-tag-index">{idx + 1}</span>
-                                    <span className="settings-rpc-tag-provider">
-                                      {getRpcTagLabel(url)}
-                                    </span>
-                                    <button
-                                      type="button"
-                                      className="settings-rpc-tag-delete"
-                                      onClick={(e) => {
-                                        e.stopPropagation();
-                                        deleteRpc(chain.id, idx);
-                                      }}
-                                      title={t("rpcEndpoints.removeRpc")}
-                                    >
-                                      ×
-                                    </button>
-                                  </div>
-                                ))}
-                              </div>
-                            </div>
-                          );
-                        })()}
+                    <div className="settings-item">
+                      <div>
+                        <div className="settings-item-label">{t("superUser.enabled.label")}</div>
+                        <div className="settings-item-description">
+                          {t("superUser.enabled.description")}
+                        </div>
                       </div>
-                    )}
+                      <label className="settings-toggle">
+                        <input
+                          type="checkbox"
+                          checked={isSuperUser}
+                          onChange={toggleSuperUserMode}
+                          className="settings-toggle-input"
+                        />
+                        <span className={`settings-toggle-slider ${isSuperUser ? "active" : ""}`}>
+                          <span className={`settings-toggle-knob ${isSuperUser ? "active" : ""}`} />
+                        </span>
+                      </label>
+                    </div>
+
+                    <br />
+
+                    <div className="settings-item">
+                      <div>
+                        <div className="settings-item-label">
+                          {t("superUser.persistentCache.sizeLimit.label")}
+                        </div>
+                        <div className="settings-item-description">
+                          {t("superUser.persistentCache.sizeLimit.description")}
+                        </div>
+                      </div>
+                      <select
+                        value={settings.persistentCacheSizeMB ?? 10}
+                        onChange={(e) =>
+                          updateSettings({ persistentCacheSizeMB: Number(e.target.value) })
+                        }
+                        className="settings-select"
+                      >
+                        <option value={5}>5 MB</option>
+                        <option value={10}>10 MB</option>
+                        <option value={25}>25 MB</option>
+                        <option value={50}>50 MB</option>
+                        <option value={100}>100 MB</option>
+                      </select>
+                    </div>
+
+                    <br />
+
+                    <div className="settings-item">
+                      <div>
+                        <div className="settings-item-label">
+                          {t("superUser.persistentCache.label")}
+                        </div>
+                        <div className="settings-item-description">
+                          {t("superUser.persistentCache.usage", {
+                            used: `${(persistentCacheBytes / (1024 * 1024)).toFixed(2)} MB`,
+                            limit: `${settings.persistentCacheSizeMB ?? 10} MB`,
+                          })}
+                        </div>
+                      </div>
+                      <button
+                        type="button"
+                        className="settings-clear-cache-button"
+                        onClick={() => {
+                          clearPersistentCache();
+                          setPersistentCacheBytes(0);
+                        }}
+                      >
+                        {t("superUser.persistentCache.clear.button")}
+                      </button>
+                    </div>
                   </div>
-                );
-              })}
-            </div>
+                </div>
+              </div>
+            )}
           </div>
         </div>
       </div>
diff --git a/src/config/aiProviders.ts b/src/config/aiProviders.ts
index d25f0de5..00b5aa1e 100644
--- a/src/config/aiProviders.ts
+++ b/src/config/aiProviders.ts
@@ -3,8 +3,18 @@ import type { AIProvider, AIProviderConfig } from "../types";
 /**
  * Static configuration for supported AI providers.
  * No API keys stored here - users provide their own keys via Settings.
+ * "openscan-groq" is a free proxy — no key required.
  */
 export const AI_PROVIDERS: Record<AIProvider, AIProviderConfig> = {
+  "openscan-groq": {
+    id: "openscan-groq",
+    name: "OpenScan Groq",
+    baseUrl:
+      process.env.REACT_APP_OPENSCAN_GROQ_AI_URL ??
+      "https://openscan-groq-ai-proxy.openscan.workers.dev",
+    defaultModel: "groq/compound",
+    keyUrl: "",
+  },
   groq: {
     id: "groq",
     name: "Groq",
@@ -48,6 +58,7 @@ export const AI_PROVIDERS: Record<AIProvider, AIProviderConfig> = {
  * When resolving which provider to use, the first provider with a configured key wins.
  */
 export const AI_PROVIDER_ORDER: AIProvider[] = [
+  "openscan-groq",
   "groq",
   "gemini",
   "perplexity",
diff --git a/src/hooks/useAIAnalysis.ts b/src/hooks/useAIAnalysis.ts
index 94de2e0b..a37447b7 100644
--- a/src/hooks/useAIAnalysis.ts
+++ b/src/hooks/useAIAnalysis.ts
@@ -45,10 +45,13 @@ export function useAIAnalysis(
     provider: (typeof AI_PROVIDERS)[AIProvider];
     apiKey: string;
   } | null => {
-    const apiKeys = settings.apiKeys;
-    if (!apiKeys) return null;
+    const apiKeys = settings.apiKeys ?? {};
 
     for (const id of AI_PROVIDER_ORDER) {
+      // openscan-groq is a free proxy — no API key needed
+      if (id === "openscan-groq") {
+        return { provider: AI_PROVIDERS[id], apiKey: "" };
+      }
       const key = apiKeys[id];
       if (key) {
         return { provider: AI_PROVIDERS[id], apiKey: key };
diff --git a/src/hooks/useCallTreeEnrichment.ts b/src/hooks/useCallTreeEnrichment.ts
new file mode 100644
index 00000000..82c9a409
--- /dev/null
+++ b/src/hooks/useCallTreeEnrichment.ts
@@ -0,0 +1,60 @@
+import { useEffect, useRef, useState } from "react";
+import { useSettings } from "../context/SettingsContext";
+import type { CallNode } from "../services/adapters/NetworkAdapter";
+import { collectAddresses } from "../utils/callTreeUtils";
+import { type ContractInfo, fetchContractInfoBatch } from "../utils/contractLookup";
+
+/**
+ * Fetches contract names + ABIs for all unique addresses in a call tree.
+ * Uses Sourcify as primary source, Etherscan as fallback (if key configured).
+ * Returns a map of lowercased address → ContractInfo.
+ *
+ * enrichmentLoading is true from the moment a tree is provided until
+ * all contract info has been resolved, so callers can gate rendering.
+ */
+export function useCallTreeEnrichment(
+  tree: CallNode | null,
+  networkId: string,
+): {
+  contracts: Record<string, ContractInfo>;
+  enrichmentLoading: boolean;
+} {
+  const { settings } = useSettings();
+  const [contracts, setContracts] = useState<Record<string, ContractInfo>>({});
+  const [done, setDone] = useState(false);
+  const abortRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    if (!tree || !networkId) return;
+
+    const chainId = Number(networkId);
+    const addresses = collectAddresses(tree);
+    if (addresses.length === 0) {
+      setDone(true);
+      return;
+    }
+
+    // Cancel previous fetch
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    setDone(false);
+    setContracts({});
+
+    fetchContractInfoBatch(addresses, chainId, controller.signal, settings.apiKeys?.etherscan)
+      .then((map) => {
+        if (!controller.signal.aborted) setContracts(map);
+      })
+      .finally(() => {
+        if (!controller.signal.aborted) setDone(true);
+      });
+
+    return () => controller.abort();
+  }, [tree, networkId, settings.apiKeys?.etherscan]);
+
+  // Loading until tree is provided AND enrichment has completed
+  const enrichmentLoading = !!tree && !done;
+
+  return { contracts, enrichmentLoading };
+}
diff --git a/src/hooks/usePersistentCache.ts b/src/hooks/usePersistentCache.ts
index 6c663195..157ee0be 100644
--- a/src/hooks/usePersistentCache.ts
+++ b/src/hooks/usePersistentCache.ts
@@ -1,10 +1,12 @@
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import { useSettings } from "../context/SettingsContext";
 import { buildPersistentCacheKey, getCachedData, setCachedData } from "../utils/persistentCache";
 
 /**
  * Hook that provides persistent cache operations.
  * All operations are no-ops when super user mode is disabled.
+ * Callbacks have stable identity so they don't trigger re-fetches
+ * when isSuperUser changes.
  *
  * Usage:
  *   const { getCached, setCached } = usePersistentCache();
@@ -15,22 +17,28 @@ export function usePersistentCache() {
   const { isSuperUser, settings } = useSettings();
   const maxSizeBytes = (settings.persistentCacheSizeMB ?? 10) * 1024 * 1024;
 
+  // Use refs so callbacks stay stable across isSuperUser toggles
+  const isSuperUserRef = useRef(isSuperUser);
+  isSuperUserRef.current = isSuperUser;
+  const maxSizeBytesRef = useRef(maxSizeBytes);
+  maxSizeBytesRef.current = maxSizeBytes;
+
   const getCached = useCallback(
     <T>(networkId: string, type: string, identifier: string): T | null => {
-      if (!isSuperUser) return null;
+      if (!isSuperUserRef.current) return null;
       const key = buildPersistentCacheKey(networkId, type, identifier);
       return getCachedData<T>(key);
     },
-    [isSuperUser],
+    [],
   );
 
   const setCached = useCallback(
     <T>(networkId: string, type: string, identifier: string, data: T): void => {
-      if (!isSuperUser) return;
+      if (!isSuperUserRef.current) return;
       const key = buildPersistentCacheKey(networkId, type, identifier);
-      setCachedData(key, data, maxSizeBytes);
+      setCachedData(key, data, maxSizeBytesRef.current);
     },
-    [isSuperUser, maxSizeBytes],
+    [],
   );
 
   return { getCached, setCached };
diff --git a/src/hooks/useRpcAutoSync.ts b/src/hooks/useRpcAutoSync.ts
index 0383b2e5..fd0e9178 100644
--- a/src/hooks/useRpcAutoSync.ts
+++ b/src/hooks/useRpcAutoSync.ts
@@ -1,16 +1,28 @@
 import { useContext, useEffect, useRef } from "react";
 import { useLocation } from "react-router-dom";
 import { AppContext } from "../context/AppContext";
-import { useSettings } from "../context/SettingsContext";
 import { logger } from "../utils/logger";
 import { autoSyncRpcs } from "../utils/rpcAutoSync";
 import { saveRpcUrlsToStorage } from "../utils/rpcStorage";
 
 const ROUTE_SETTLE_MS = 1500;
+const SYNC_INTERVAL_MS = 24 * 60 * 60 * 1000; // 24 hours
+const STORAGE_KEY = "openScan_lastRpcSyncTime";
+
+function isSyncNeeded(): boolean {
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (!stored) return true;
+
+  const elapsed = Date.now() - Number(stored);
+  return elapsed >= SYNC_INTERVAL_MS;
+}
+
+function saveSyncTimestamp(): void {
+  localStorage.setItem(STORAGE_KEY, String(Date.now()));
+}
 
 export function useRpcAutoSync(): void {
   const { rpcUrls, networksLoading, networks } = useContext(AppContext);
-  const { settings, updateSettings } = useSettings();
   const location = useLocation();
   const syncedRef = useRef(false);
   const timerRef = useRef<number | null>(null);
@@ -18,7 +30,7 @@ export function useRpcAutoSync(): void {
   // biome-ignore lint/correctness/useExhaustiveDependencies: location.key is intentional — resets the debounce timer on every navigation event
   useEffect(() => {
     if (networksLoading) return;
-    if (settings.rpcsSynced) return;
+    if (!isSyncNeeded()) return;
     if (Object.keys(rpcUrls).length === 0) return;
     if (syncedRef.current) return;
 
@@ -33,7 +45,7 @@ export function useRpcAutoSync(): void {
       autoSyncRpcs(rpcUrls, networks)
         .then((sorted) => {
           saveRpcUrlsToStorage(sorted);
-          updateSettings({ rpcsSynced: true });
+          saveSyncTimestamp();
           logger.info("Auto-sync RPCs completed, sorted order saved for next load");
         })
         .catch(() => {
@@ -46,5 +58,5 @@ export function useRpcAutoSync(): void {
         window.clearTimeout(timerRef.current);
       }
     };
-  }, [location.key, networksLoading, settings.rpcsSynced, rpcUrls, networks, updateSettings]);
+  }, [location.key, networksLoading, rpcUrls, networks]);
 }
diff --git a/src/hooks/useSearch.ts b/src/hooks/useSearch.ts
index 280cc014..490e7630 100644
--- a/src/hooks/useSearch.ts
+++ b/src/hooks/useSearch.ts
@@ -2,7 +2,7 @@ import { useCallback, useContext, useMemo, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { AppContext, useNetworks } from "../context";
 import { ENSService } from "../services/ENS/ENSService";
-import { resolveNetwork } from "../utils/networkResolver";
+import { isEVMNetwork, resolveNetwork } from "../utils/networkResolver";
 
 interface UseSearchResult {
   searchTerm: string;
@@ -58,6 +58,12 @@ export function useSearch(): UseSearchResult {
 
       // Check if it's an ENS name
       if (ENSService.isENSName(term)) {
+        // ENS is only available on EVM networks
+        if (resolvedNetwork && !isEVMNetwork(resolvedNetwork)) {
+          setError("ENS names are only supported on EVM networks.");
+          return;
+        }
+
         setIsResolving(true);
         try {
           if (!ensService) {
@@ -68,7 +74,7 @@ export function useSearch(): UseSearchResult {
           const resolvedAddress = await ensService.resolve(term);
 
           if (resolvedAddress) {
-            const targetChainId = networkId || "1";
+            const targetChainId = networkId || "eth";
             navigate(`/${targetChainId}/address/${resolvedAddress}`, {
               state: { ensName: term },
             });
@@ -118,7 +124,7 @@ export function useSearch(): UseSearchResult {
         setSearchTerm("");
       }
     },
-    [searchTerm, networkId, navigate, ensService],
+    [searchTerm, networkId, resolvedNetwork, navigate, ensService],
   );
 
   return {
diff --git a/src/hooks/useSourcify.ts b/src/hooks/useSourcify.ts
index 41efc29f..038f5be0 100644
--- a/src/hooks/useSourcify.ts
+++ b/src/hooks/useSourcify.ts
@@ -75,7 +75,7 @@ interface SourcifyV2Raw {
 
 function normalizeMatch(raw?: string): "perfect" | "partial" | null {
   if (!raw) return null;
-  if (raw === "exact_match" || raw === "perfect") return "perfect";
+  if (raw === "match" || raw === "exact_match" || raw === "perfect") return "perfect";
   if (raw.includes("partial")) return "partial";
   return null;
 }
diff --git a/src/locales/en/block.json b/src/locales/en/block.json
index c66f2ef2..012ab8f8 100644
--- a/src/locales/en/block.json
+++ b/src/locales/en/block.json
@@ -10,6 +10,9 @@
   "gasLimit": "Gas Limit:",
   "baseFeePerGas": "Base Fee Per Gas:",
   "burntFees": "Burnt Fees",
+  "blobGasUsed": "Blob Gas Used:",
+  "excessBlobGas": "Excess Blob Gas:",
+  "blobCount": "Blob Count:",
   "extraData": "Extra Data",
   "difficulty": "Difficulty",
   "totalDifficulty": "Total Difficulty",
diff --git a/src/locales/en/common.json b/src/locales/en/common.json
index 624436d1..1313d994 100644
--- a/src/locales/en/common.json
+++ b/src/locales/en/common.json
@@ -48,7 +48,10 @@
     "goHome": "Go Home",
     "errorDetailsSummary": "Error Details (Development Mode)",
     "errorLabel": "Error:",
-    "componentStackLabel": "Component Stack:"
+    "componentStackLabel": "Component Stack:",
+    "networkNotFound": "Network Not Found",
+    "networkNotFoundMessage": "The network \"{{network}}\" is not recognized. Please check the URL or select a valid network.",
+    "viewNetworks": "View Networks"
   },
   "notifications": {
     "closeAriaLabel": "Close notification"
diff --git a/src/locales/en/settings.json b/src/locales/en/settings.json
index 57e955bc..7f9b9898 100644
--- a/src/locales/en/settings.json
+++ b/src/locales/en/settings.json
@@ -27,6 +27,20 @@
       "description": "Clear all data including settings, RPC configs, and API keys.",
       "button": "Clear Site Data",
       "confirmMessage": "This will clear all settings, RPC configurations, API keys, and cached data. The page will reload. Continue?"
+    },
+    "exportConfig": {
+      "label": "Export Configuration",
+      "description": "Download all settings, RPC configs, and API keys as a JSON file.",
+      "button": "Export",
+      "sensitiveWarning": "The exported file contains sensitive data (API keys). Store it securely. Continue?"
+    },
+    "importConfig": {
+      "label": "Import Configuration",
+      "description": "Restore settings from a previously exported JSON file.",
+      "button": "Import",
+      "confirmMessage": "This will overwrite all current settings, RPC configurations, and API keys. Continue?",
+      "invalidFile": "Invalid configuration file. Please select a valid OpenScan config JSON.",
+      "success": "Configuration imported successfully!"
     }
   },
   "rpcStrategy": {
@@ -116,6 +130,10 @@
   "superUser": {
     "title": "Super User",
     "description": "Advanced settings for super user mode.",
+    "enabled": {
+      "label": "Super User Mode",
+      "description": "Enable advanced features like TX Analyser, call tree, gas profiler, and state changes."
+    },
     "persistentCache": {
       "label": "Persistent Cache",
       "description": "Cache blockchain data in local storage for faster access across sessions.",
diff --git a/src/locales/en/transaction.json b/src/locales/en/transaction.json
index de302aaf..61369bed 100644
--- a/src/locales/en/transaction.json
+++ b/src/locales/en/transaction.json
@@ -43,6 +43,12 @@
   "l1GasPrice": "L1 Gas Price:",
   "l1GasUsed": "L1 Gas Used:",
   "l1FeeScalar": "L1 Fee Scalar:",
+  "maxFeePerBlobGas": "Max Fee Per Blob Gas:",
+  "blobGasPrice": "Blob Gas Price:",
+  "blobGasUsed": "Blob Gas Used:",
+  "blobCount": "Blob Count:",
+  "blobVersionedHashes": "Blob Versioned Hashes:",
+  "blobTransaction": "Blob Transaction (EIP-4844)",
   "pending": "Pending",
   "logsAddress": "Address",
   "logsDecoded": "Decoded",
@@ -137,5 +143,36 @@
     "cost": "Cost",
     "depth": "Depth",
     "stack": "Stack"
+  },
+  "analyser": {
+    "title": "TX Analyser",
+    "analyse": "Analyse",
+    "callTree": "Call Tree",
+    "stateChanges": "State Changes",
+    "loading": "Loading trace data...",
+    "notSupported": "Your RPC does not support trace methods. Try an archive node or a trace-enabled provider.",
+    "traceHint": "Providers like dRPC and Tenderly support debug_traceTransaction.",
+    "error": "Error",
+    "summaryGas": "Gas used: {{gas}}",
+    "summaryCalls": "{{calls}} calls",
+    "summaryReverts": "{{reverts}} reverts",
+    "noChanges": "No state changes detected",
+    "balanceChange": "Balance",
+    "nonceChange": "Nonce",
+    "storageChange": "Storage",
+    "codeDeployed": "Code",
+    "enriching": "Loading contract info...",
+    "gasProfiler": "Gas Profiler",
+    "gasBreakdownTitle": "Breakdown",
+    "gasBreakdownHint": "Click any bar to zoom in and see its breakdown",
+    "gasResetView": "Reset zoom",
+    "events": "Events",
+    "inputDataTab": "Input Data",
+    "rawInputData": "Raw Input Data",
+    "utf8Text": "UTF-8 Decoded Text",
+    "expandAll": "Expand All",
+    "collapseAll": "Collapse All",
+    "expand": "Expand",
+    "collapse": "Collapse"
   }
 }
diff --git a/src/locales/es/block.json b/src/locales/es/block.json
index 00fdb297..1e6ac57a 100644
--- a/src/locales/es/block.json
+++ b/src/locales/es/block.json
@@ -10,6 +10,9 @@
   "gasLimit": "Límite de gas:",
   "baseFeePerGas": "Fee base por gas:",
   "burntFees": "Fees quemados",
+  "blobGasUsed": "Gas de Blob Usado:",
+  "excessBlobGas": "Gas de Blob Excedente:",
+  "blobCount": "Cantidad de Blobs:",
   "extraData": "Datos extra",
   "difficulty": "Dificultad",
   "totalDifficulty": "Dificultad total",
diff --git a/src/locales/es/common.json b/src/locales/es/common.json
index c4c8cfce..c37a511a 100644
--- a/src/locales/es/common.json
+++ b/src/locales/es/common.json
@@ -48,7 +48,10 @@
     "goHome": "Ir al inicio",
     "errorDetailsSummary": "Detalles del error (modo desarrollo)",
     "errorLabel": "Error:",
-    "componentStackLabel": "Stack del componente:"
+    "componentStackLabel": "Stack del componente:",
+    "networkNotFound": "Red no encontrada",
+    "networkNotFoundMessage": "La red \"{{network}}\" no es reconocida. Revisá la URL o seleccioná una red válida.",
+    "viewNetworks": "Ver redes"
   },
   "notifications": {
     "closeAriaLabel": "Cerrar notificación"
diff --git a/src/locales/es/settings.json b/src/locales/es/settings.json
index 05613dad..620b9f04 100644
--- a/src/locales/es/settings.json
+++ b/src/locales/es/settings.json
@@ -27,6 +27,20 @@
       "description": "Borrar todos los datos, incluyendo configuración, RPCs y API keys.",
       "button": "Limpiar Datos del Sitio",
       "confirmMessage": "Esto va a borrar toda la configuración, RPCs, API keys y datos cacheados. La página se va a recargar. ¿Continuar?"
+    },
+    "exportConfig": {
+      "label": "Exportar Configuración",
+      "description": "Descargar toda la configuración, RPCs y API keys como archivo JSON.",
+      "button": "Exportar",
+      "sensitiveWarning": "El archivo exportado contiene datos sensibles (API keys). Guardalo de forma segura. ¿Continuar?"
+    },
+    "importConfig": {
+      "label": "Importar Configuración",
+      "description": "Restaurar configuración desde un archivo JSON exportado previamente.",
+      "button": "Importar",
+      "confirmMessage": "Esto va a sobrescribir toda la configuración actual, RPCs y API keys. ¿Continuar?",
+      "invalidFile": "Archivo de configuración inválido. Seleccioná un archivo JSON de OpenScan válido.",
+      "success": "¡Configuración importada correctamente!"
     }
   },
   "rpcStrategy": {
@@ -116,6 +130,10 @@
   "superUser": {
     "title": "Super Usuario",
     "description": "Configuración avanzada para el modo super usuario.",
+    "enabled": {
+      "label": "Modo Super Usuario",
+      "description": "Habilitar funciones avanzadas como Analizador de TX, árbol de llamadas, perfilador de gas y cambios de estado."
+    },
     "persistentCache": {
       "label": "Cache Persistente",
       "description": "Cachear datos de blockchain en almacenamiento local para acceso más rápido entre sesiones.",
diff --git a/src/locales/es/transaction.json b/src/locales/es/transaction.json
index d858f9d6..8961b03c 100644
--- a/src/locales/es/transaction.json
+++ b/src/locales/es/transaction.json
@@ -43,6 +43,12 @@
   "l1GasPrice": "Gas Price L1:",
   "l1GasUsed": "Gas Usado L1:",
   "l1FeeScalar": "L1 Fee Scalar:",
+  "maxFeePerBlobGas": "Fee Máximo por Blob Gas:",
+  "blobGasPrice": "Precio de Blob Gas:",
+  "blobGasUsed": "Blob Gas Usado:",
+  "blobCount": "Cantidad de Blobs:",
+  "blobVersionedHashes": "Hashes Versionados de Blob:",
+  "blobTransaction": "Transacción Blob (EIP-4844)",
   "pending": "Pendiente",
   "logsAddress": "Dirección",
   "logsDecoded": "Decodificado",
@@ -137,5 +143,36 @@
     "cost": "Costo",
     "depth": "Profundidad",
     "stack": "Stack"
+  },
+  "analyser": {
+    "title": "Analizador de TX",
+    "analyse": "Analizar",
+    "callTree": "Árbol de Llamadas",
+    "stateChanges": "Cambios de Estado",
+    "loading": "Cargando datos de trace...",
+    "notSupported": "Tu RPC no soporta métodos de trace. Probá un nodo archivo o un proveedor con soporte de trace.",
+    "traceHint": "Proveedores como dRPC y Tenderly soportan debug_traceTransaction.",
+    "error": "Error",
+    "summaryGas": "Gas usado: {{gas}}",
+    "summaryCalls": "{{calls}} llamadas",
+    "summaryReverts": "{{reverts}} reverts",
+    "noChanges": "No se detectaron cambios de estado",
+    "balanceChange": "Balance",
+    "nonceChange": "Nonce",
+    "storageChange": "Storage",
+    "codeDeployed": "Código",
+    "enriching": "Cargando info de contratos...",
+    "gasProfiler": "Perfil de Gas",
+    "gasBreakdownTitle": "Desglose",
+    "gasBreakdownHint": "Haz clic en cualquier barra para ampliar y ver su desglose",
+    "gasResetView": "Restablecer zoom",
+    "events": "Eventos",
+    "inputDataTab": "Datos de Entrada",
+    "rawInputData": "Datos de Entrada sin Procesar",
+    "utf8Text": "Texto Decodificado UTF-8",
+    "expandAll": "Expandir Todo",
+    "collapseAll": "Colapsar Todo",
+    "expand": "Expandir",
+    "collapse": "Colapsar"
   }
 }
diff --git a/src/locales/ja/block.json b/src/locales/ja/block.json
index f81d2887..64028b44 100644
--- a/src/locales/ja/block.json
+++ b/src/locales/ja/block.json
@@ -10,6 +10,9 @@
   "gasLimit": "ガスリミット：",
   "baseFeePerGas": "ガスあたりの基本手数料：",
   "burntFees": "バーン手数料",
+  "blobGasUsed": "Blob Gas 使用量：",
+  "excessBlobGas": "超過 Blob Gas：",
+  "blobCount": "Blob 数：",
   "extraData": "追加データ",
   "difficulty": "難易度",
   "totalDifficulty": "総難易度",
diff --git a/src/locales/ja/settings.json b/src/locales/ja/settings.json
index 7cb825e2..3ded7c54 100644
--- a/src/locales/ja/settings.json
+++ b/src/locales/ja/settings.json
@@ -27,6 +27,20 @@
       "description": "設定、RPC設定、APIキーを含むすべてのデータをクリアします。",
       "button": "サイトデータをクリア",
       "confirmMessage": "これにより、すべての設定、RPC設定、APIキー、キャッシュデータがクリアされます。ページが再読み込みされます。続行しますか？"
+    },
+    "exportConfig": {
+      "label": "設定をエクスポート",
+      "description": "すべての設定、RPC設定、APIキーをJSONファイルとしてダウンロードします。",
+      "button": "エクスポート",
+      "sensitiveWarning": "エクスポートされたファイルには機密データ（APIキー）が含まれています。安全に保管してください。続行しますか？"
+    },
+    "importConfig": {
+      "label": "設定をインポート",
+      "description": "以前エクスポートしたJSONファイルから設定を復元します。",
+      "button": "インポート",
+      "confirmMessage": "現在のすべての設定、RPC設定、APIキーが上書きされます。続行しますか？",
+      "invalidFile": "無効な設定ファイルです。有効なOpenScan設定JSONを選択してください。",
+      "success": "設定が正常にインポートされました！"
     }
   },
   "rpcStrategy": {
@@ -113,6 +127,28 @@
     "settingsSaved": "設定が正常に保存されました！",
     "cacheCleared": "キャッシュをクリアしました！"
   },
+  "superUser": {
+    "title": "スーパーユーザー",
+    "description": "スーパーユーザーモードの詳細設定。",
+    "enabled": {
+      "label": "スーパーユーザーモード",
+      "description": "TXアナライザー、コールツリー、ガスプロファイラー、状態変更などの高度な機能を有効にします。"
+    },
+    "persistentCache": {
+      "label": "永続キャッシュ",
+      "description": "セッション間のアクセスを高速化するために、ブロックチェーンデータをローカルストレージにキャッシュします。",
+      "sizeLimit": {
+        "label": "キャッシュサイズ制限",
+        "description": "永続キャッシュの最大ストレージ容量。"
+      },
+      "usage": "{{used}} / {{limit}} 使用中",
+      "clear": {
+        "label": "永続キャッシュをクリア",
+        "description": "ローカルストレージからキャッシュされたブロックチェーンデータをすべて削除します。",
+        "button": "キャッシュをクリア"
+      }
+    }
+  },
   "rpcEndpoints": {
     "title": "RPCエンドポイント",
     "description": "各ネットワークのRPC URLを設定します。ネットワークをクリックして展開し、エンドポイントを設定してください。",
diff --git a/src/locales/ja/transaction.json b/src/locales/ja/transaction.json
index 230af3cf..38f39e56 100644
--- a/src/locales/ja/transaction.json
+++ b/src/locales/ja/transaction.json
@@ -43,6 +43,12 @@
   "l1GasPrice": "L1ガス価格：",
   "l1GasUsed": "L1使用ガス：",
   "l1FeeScalar": "L1手数料スカラー：",
+  "maxFeePerBlobGas": "Blob Gas あたりの最大手数料：",
+  "blobGasPrice": "Blob Gas 価格：",
+  "blobGasUsed": "Blob Gas 使用量：",
+  "blobCount": "Blob 数：",
+  "blobVersionedHashes": "Blob バージョンハッシュ：",
+  "blobTransaction": "Blob トランザクション (EIP-4844)",
   "pending": "保留中",
   "logsAddress": "アドレス",
   "logsDecoded": "デコード済み",
@@ -137,5 +143,36 @@
     "cost": "コスト",
     "depth": "深度",
     "stack": "スタック"
+  },
+  "analyser": {
+    "title": "TXアナライザー",
+    "analyse": "分析",
+    "callTree": "コールツリー",
+    "stateChanges": "状態変化",
+    "loading": "トレースデータを読み込み中...",
+    "notSupported": "お使いのRPCはトレースメソッドをサポートしていません。アーカイブノードまたはトレース対応プロバイダーをお試しください。",
+    "traceHint": "dRPCやTenderlyなどのプロバイダーはdebug_traceTransactionをサポートしています。",
+    "error": "エラー",
+    "summaryGas": "ガス使用量: {{gas}}",
+    "summaryCalls": "{{calls}} コール",
+    "summaryReverts": "{{reverts}} リバート",
+    "noChanges": "状態変化は検出されませんでした",
+    "balanceChange": "残高",
+    "nonceChange": "ノンス",
+    "storageChange": "ストレージ",
+    "codeDeployed": "コード",
+    "enriching": "コントラクト情報を読み込み中...",
+    "gasProfiler": "ガスプロファイラー",
+    "gasBreakdownTitle": "内訳",
+    "gasBreakdownHint": "任意のバーをクリックしてズームインし、内訳を表示します",
+    "gasResetView": "ズームをリセット",
+    "events": "イベント",
+    "inputDataTab": "入力データ",
+    "rawInputData": "生の入力データ",
+    "utf8Text": "UTF-8 デコードテキスト",
+    "expandAll": "すべて展開",
+    "collapseAll": "すべて折りたたむ",
+    "expand": "展開",
+    "collapse": "折りたたむ"
   }
 }
diff --git a/src/locales/pt-BR/block.json b/src/locales/pt-BR/block.json
index e932a4db..fffa2231 100644
--- a/src/locales/pt-BR/block.json
+++ b/src/locales/pt-BR/block.json
@@ -10,6 +10,9 @@
   "gasLimit": "Limite de Gas:",
   "baseFeePerGas": "Taxa Base por Gas:",
   "burntFees": "Taxas Queimadas",
+  "blobGasUsed": "Gas de Blob Usado:",
+  "excessBlobGas": "Gas de Blob Excedente:",
+  "blobCount": "Contagem de Blobs:",
   "extraData": "Dados Extras",
   "difficulty": "Dificuldade",
   "totalDifficulty": "Dificuldade Total",
diff --git a/src/locales/pt-BR/settings.json b/src/locales/pt-BR/settings.json
index ced77f80..eac0b08d 100644
--- a/src/locales/pt-BR/settings.json
+++ b/src/locales/pt-BR/settings.json
@@ -27,6 +27,20 @@
       "description": "Limpar todos os dados incluindo configurações, configurações RPC e chaves de API.",
       "button": "Limpar Dados do Site",
       "confirmMessage": "Isso vai limpar todas as configurações, configurações RPC, chaves de API e dados em cache. A página será recarregada. Continuar?"
+    },
+    "exportConfig": {
+      "label": "Exportar Configuração",
+      "description": "Baixar todas as configurações, configurações RPC e chaves de API como arquivo JSON.",
+      "button": "Exportar",
+      "sensitiveWarning": "O arquivo exportado contém dados sensíveis (chaves de API). Armazene-o com segurança. Continuar?"
+    },
+    "importConfig": {
+      "label": "Importar Configuração",
+      "description": "Restaurar configurações de um arquivo JSON exportado anteriormente.",
+      "button": "Importar",
+      "confirmMessage": "Isso vai sobrescrever todas as configurações atuais, configurações RPC e chaves de API. Continuar?",
+      "invalidFile": "Arquivo de configuração inválido. Selecione um JSON de configuração OpenScan válido.",
+      "success": "Configuração importada com sucesso!"
     }
   },
   "rpcStrategy": {
@@ -113,6 +127,28 @@
     "settingsSaved": "Configurações salvas com sucesso!",
     "cacheCleared": "Cache limpo!"
   },
+  "superUser": {
+    "title": "Super Usuário",
+    "description": "Configurações avançadas para o modo super usuário.",
+    "enabled": {
+      "label": "Modo Super Usuário",
+      "description": "Habilitar recursos avançados como Analisador de TX, árvore de chamadas, perfilador de gas e mudanças de estado."
+    },
+    "persistentCache": {
+      "label": "Cache Persistente",
+      "description": "Armazenar dados de blockchain no armazenamento local para acesso mais rápido entre sessões.",
+      "sizeLimit": {
+        "label": "Limite de Tamanho do Cache",
+        "description": "Espaço máximo de armazenamento para o cache persistente."
+      },
+      "usage": "Usando {{used}} de {{limit}}",
+      "clear": {
+        "label": "Limpar Cache Persistente",
+        "description": "Remover todos os dados de blockchain armazenados do armazenamento local.",
+        "button": "Limpar Cache"
+      }
+    }
+  },
   "rpcEndpoints": {
     "title": "Endpoints RPC",
     "description": "Configure URLs RPC para cada rede. Clique em uma rede para expandir e configurar seus endpoints.",
diff --git a/src/locales/pt-BR/transaction.json b/src/locales/pt-BR/transaction.json
index 4dba0ed6..8225b8a2 100644
--- a/src/locales/pt-BR/transaction.json
+++ b/src/locales/pt-BR/transaction.json
@@ -43,6 +43,12 @@
   "l1GasPrice": "Preço do Gas L1:",
   "l1GasUsed": "Gas L1 Usado:",
   "l1FeeScalar": "Escalar de Taxa L1:",
+  "maxFeePerBlobGas": "Taxa Máxima por Blob Gas:",
+  "blobGasPrice": "Preço do Blob Gas:",
+  "blobGasUsed": "Blob Gas Usado:",
+  "blobCount": "Contagem de Blobs:",
+  "blobVersionedHashes": "Hashes Versionados de Blob:",
+  "blobTransaction": "Transação Blob (EIP-4844)",
   "pending": "Pendente",
   "logsAddress": "Endereço",
   "logsDecoded": "Decodificado",
@@ -137,5 +143,36 @@
     "cost": "Custo",
     "depth": "Profundidade",
     "stack": "Pilha"
+  },
+  "analyser": {
+    "title": "Analisador de TX",
+    "analyse": "Analisar",
+    "callTree": "Árvore de Chamadas",
+    "stateChanges": "Mudanças de Estado",
+    "loading": "Carregando dados de trace...",
+    "notSupported": "Seu RPC não suporta métodos de trace. Tente um nó arquivo ou um provedor com suporte a trace.",
+    "traceHint": "Provedores como dRPC e Tenderly suportam debug_traceTransaction.",
+    "error": "Erro",
+    "summaryGas": "Gas usado: {{gas}}",
+    "summaryCalls": "{{calls}} chamadas",
+    "summaryReverts": "{{reverts}} reverts",
+    "noChanges": "Nenhuma mudança de estado detectada",
+    "balanceChange": "Saldo",
+    "nonceChange": "Nonce",
+    "storageChange": "Storage",
+    "codeDeployed": "Código",
+    "enriching": "Carregando info de contratos...",
+    "gasProfiler": "Perfil de Gás",
+    "gasBreakdownTitle": "Detalhamento",
+    "gasBreakdownHint": "Clique em qualquer barra para ampliar e ver seu detalhamento",
+    "gasResetView": "Redefinir zoom",
+    "events": "Eventos",
+    "inputDataTab": "Dados de Entrada",
+    "rawInputData": "Dados de Entrada Brutos",
+    "utf8Text": "Texto Decodificado UTF-8",
+    "expandAll": "Expandir Tudo",
+    "collapseAll": "Recolher Tudo",
+    "expand": "Expandir",
+    "collapse": "Recolher"
   }
 }
diff --git a/src/locales/zh/block.json b/src/locales/zh/block.json
index cabf5034..e079fce9 100644
--- a/src/locales/zh/block.json
+++ b/src/locales/zh/block.json
@@ -10,6 +10,9 @@
   "gasLimit": "Gas 上限：",
   "baseFeePerGas": "每 Gas 基础费用：",
   "burntFees": "已销毁费用",
+  "blobGasUsed": "Blob Gas 使用量：",
+  "excessBlobGas": "超额 Blob Gas：",
+  "blobCount": "Blob 数量：",
   "extraData": "额外数据",
   "difficulty": "难度",
   "totalDifficulty": "总难度",
diff --git a/src/locales/zh/settings.json b/src/locales/zh/settings.json
index d6f3431c..91216afd 100644
--- a/src/locales/zh/settings.json
+++ b/src/locales/zh/settings.json
@@ -27,6 +27,20 @@
       "description": "清除所有数据，包括设置、RPC 配置和 API 密钥。",
       "button": "清除站点数据",
       "confirmMessage": "这将清除所有设置、RPC 配置、API 密钥和缓存数据。页面将重新加载。继续？"
+    },
+    "exportConfig": {
+      "label": "导出配置",
+      "description": "将所有设置、RPC 配置和 API 密钥下载为 JSON 文件。",
+      "button": "导出",
+      "sensitiveWarning": "导出的文件包含敏感数据（API 密钥）。请安全存储。继续？"
+    },
+    "importConfig": {
+      "label": "导入配置",
+      "description": "从之前导出的 JSON 文件恢复设置。",
+      "button": "导入",
+      "confirmMessage": "这将覆盖所有当前设置、RPC 配置和 API 密钥。继续？",
+      "invalidFile": "无效的配置文件。请选择有效的 OpenScan 配置 JSON。",
+      "success": "配置导入成功！"
     }
   },
   "rpcStrategy": {
@@ -113,6 +127,28 @@
     "settingsSaved": "配置保存成功！",
     "cacheCleared": "缓存已清除！"
   },
+  "superUser": {
+    "title": "超级用户",
+    "description": "超级用户模式的高级设置。",
+    "enabled": {
+      "label": "超级用户模式",
+      "description": "启用高级功能，如交易分析器、调用树、Gas分析器和状态变更。"
+    },
+    "persistentCache": {
+      "label": "持久缓存",
+      "description": "将区块链数据缓存到本地存储中，以加快跨会话访问速度。",
+      "sizeLimit": {
+        "label": "缓存大小限制",
+        "description": "持久缓存的最大存储空间。"
+      },
+      "usage": "已使用 {{used}} / {{limit}}",
+      "clear": {
+        "label": "清除持久缓存",
+        "description": "从本地存储中删除所有缓存的区块链数据。",
+        "button": "清除缓存"
+      }
+    }
+  },
   "rpcEndpoints": {
     "title": "RPC 端点",
     "description": "为每个网络配置 RPC URL。点击网络展开并配置其端点。",
diff --git a/src/locales/zh/transaction.json b/src/locales/zh/transaction.json
index d80d449f..71985afb 100644
--- a/src/locales/zh/transaction.json
+++ b/src/locales/zh/transaction.json
@@ -43,6 +43,12 @@
   "l1GasPrice": "L1 Gas 价格：",
   "l1GasUsed": "L1 已用 Gas：",
   "l1FeeScalar": "L1 费用系数：",
+  "maxFeePerBlobGas": "每 Blob Gas 最大费用：",
+  "blobGasPrice": "Blob Gas 价格：",
+  "blobGasUsed": "Blob Gas 使用量：",
+  "blobCount": "Blob 数量：",
+  "blobVersionedHashes": "Blob 版本哈希：",
+  "blobTransaction": "Blob 交易 (EIP-4844)",
   "pending": "待处理",
   "logsAddress": "地址",
   "logsDecoded": "已解码",
@@ -137,5 +143,36 @@
     "cost": "消耗",
     "depth": "深度",
     "stack": "栈"
+  },
+  "analyser": {
+    "title": "交易分析器",
+    "analyse": "分析",
+    "callTree": "调用树",
+    "stateChanges": "状态变化",
+    "loading": "正在加载追踪数据...",
+    "notSupported": "您的 RPC 不支持追踪方法。请尝试使用存档节点或支持追踪的提供商。",
+    "traceHint": "dRPC 和 Tenderly 等提供商支持 debug_traceTransaction。",
+    "error": "错误",
+    "summaryGas": "Gas 消耗：{{gas}}",
+    "summaryCalls": "{{calls}} 次调用",
+    "summaryReverts": "{{reverts}} 次回滚",
+    "noChanges": "未检测到状态变化",
+    "balanceChange": "余额",
+    "nonceChange": "Nonce",
+    "storageChange": "存储",
+    "codeDeployed": "代码",
+    "enriching": "正在加载合约信息...",
+    "gasProfiler": "Gas 分析",
+    "gasBreakdownTitle": "分项明细",
+    "gasBreakdownHint": "点击任意条形以放大并查看其明细",
+    "gasResetView": "重置缩放",
+    "events": "事件",
+    "inputDataTab": "输入数据",
+    "rawInputData": "原始输入数据",
+    "utf8Text": "UTF-8 解码文本",
+    "expandAll": "全部展开",
+    "collapseAll": "全部折叠",
+    "expand": "展开",
+    "collapse": "折叠"
   }
 }
diff --git a/src/services/AIService.ts b/src/services/AIService.ts
index f455bfd3..0d8c4753 100644
--- a/src/services/AIService.ts
+++ b/src/services/AIService.ts
@@ -61,7 +61,7 @@ export class AIService {
     });
 
     try {
-      const content = await this.callAPI(system, user);
+      const content = await this.callAPI(system, user, request.type);
       return {
         summary: content,
         timestamp: Date.now(),
@@ -78,7 +78,14 @@ export class AIService {
     }
   }
 
-  private async callAPI(system: string, user: string): Promise<string> {
+  private async callAPI(
+    system: string,
+    user: string,
+    analysisType: AIAnalysisType,
+  ): Promise<string> {
+    if (this.provider.id === "openscan-groq") {
+      return this.callOpenScanProxy(system, user, analysisType);
+    }
     if (this.provider.id === "anthropic") {
       return this.callAnthropic(system, user);
     }
@@ -88,6 +95,35 @@ export class AIService {
     return this.callOpenAICompatible(system, user);
   }
 
+  private async callOpenScanProxy(
+    system: string,
+    user: string,
+    analysisType: AIAnalysisType,
+  ): Promise<string> {
+    const url = `${this.provider.baseUrl}/ai/analyze`;
+    const body = {
+      type: analysisType,
+      messages: [
+        { role: "system", content: system },
+        { role: "user", content: user },
+      ],
+    };
+
+    const response = await this.fetchWithRetry(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+
+    const data = await response.json();
+    const content = data?.choices?.[0]?.message?.content;
+    if (typeof content !== "string") {
+      logger.error("Unexpected OpenScan proxy response format:", data);
+      throw new AIServiceError("Failed to parse AI response", "parse_error");
+    }
+    return content;
+  }
+
   private async callOpenAICompatible(system: string, user: string): Promise<string> {
     const url = `${this.provider.baseUrl}/chat/completions`;
     const body = {
diff --git a/src/services/adapters/ArbitrumAdapter/ArbitrumAdapter.ts b/src/services/adapters/ArbitrumAdapter/ArbitrumAdapter.ts
index de5eb42f..78b65827 100644
--- a/src/services/adapters/ArbitrumAdapter/ArbitrumAdapter.ts
+++ b/src/services/adapters/ArbitrumAdapter/ArbitrumAdapter.ts
@@ -1,5 +1,7 @@
 import { type BlockNumberOrTag, NetworkAdapter, type TraceResult } from "../NetworkAdapter";
 import type { Block, Transaction, Address, NetworkStats, DataWithMetadata } from "../../../types";
+import type { CallNode, PrestateTrace } from "../NetworkAdapter";
+import { normalizeGethCallTrace, normalizeParityCallTrace } from "../../../utils/callTreeUtils";
 import { logger } from "../../../utils/logger";
 import {
   transformArbitrumBlockToBlock,
@@ -292,4 +294,40 @@ export class ArbitrumAdapter extends NetworkAdapter {
       return null;
     }
   }
+
+  async getAnalyserCallTrace(txHash: string): Promise<CallNode | null> {
+    // Try Geth callTracer first (works on dRPC, Tenderly for Arbitrum)
+    try {
+      const result = await this.client.debugTraceTransaction(txHash, { tracer: "callTracer" });
+      if (result.data) return normalizeGethCallTrace(result.data);
+    } catch {
+      // Fall through to arbtrace
+    }
+
+    // Fall back to arbtrace_transaction (Parity format — always available on Arbitrum)
+    try {
+      const result = await this.client.arbtraceTransaction(txHash);
+      if (result.data) {
+        // biome-ignore lint/suspicious/noExplicitAny: Parity trace format
+        return normalizeParityCallTrace(result.data as any);
+      }
+      return null;
+    } catch (error) {
+      logger.error("Error getting Arbitrum analyser call trace:", error);
+      return null;
+    }
+  }
+
+  async getAnalyserPrestateTrace(txHash: string): Promise<PrestateTrace | null> {
+    try {
+      const result = await this.client.debugTraceTransaction(txHash, {
+        tracer: "prestateTracer",
+        tracerConfig: { diffMode: true },
+      });
+      return (result.data as PrestateTrace) ?? null;
+    } catch (error) {
+      logger.error("Error getting Arbitrum analyser prestate trace:", error);
+      return null;
+    }
+  }
 }
diff --git a/src/services/adapters/ArbitrumAdapter/utils.ts b/src/services/adapters/ArbitrumAdapter/utils.ts
index f7cafdde..3d8ceae6 100644
--- a/src/services/adapters/ArbitrumAdapter/utils.ts
+++ b/src/services/adapters/ArbitrumAdapter/utils.ts
@@ -65,6 +65,12 @@ export function transformArbitrumTransactionToTransaction(
     gasPrice: rpcTx.gasPrice ? BigInt(rpcTx.gasPrice).toString() : "0",
     maxFeePerGas: undefined,
     maxPriorityFeePerGas: undefined,
+    maxFeePerBlobGas: (rpcTx as unknown as Record<string, unknown>).maxFeePerBlobGas
+      ? BigInt((rpcTx as unknown as Record<string, unknown>).maxFeePerBlobGas as string).toString()
+      : undefined,
+    blobVersionedHashes: (rpcTx as unknown as Record<string, unknown>).blobVersionedHashes as
+      | string[]
+      | undefined,
     nonce: rpcTx.nonce ? parseInt(rpcTx.nonce, 16).toString() : "0",
     data: rpcTx.input,
     blockNumber: rpcTx.blockNumber ? parseInt(rpcTx.blockNumber, 16).toString() : "0",
@@ -96,6 +102,12 @@ export function transformArbitrumTransactionToTransaction(
       transactionHash: receipt.transactionHash,
       transactionIndex: parseInt(receipt.transactionIndex, 16).toString(),
       type: receipt.type,
+      blobGasUsed: (receipt as unknown as Record<string, unknown>).blobGasUsed
+        ? BigInt((receipt as unknown as Record<string, unknown>).blobGasUsed as string).toString()
+        : undefined,
+      blobGasPrice: (receipt as unknown as Record<string, unknown>).blobGasPrice
+        ? BigInt((receipt as unknown as Record<string, unknown>).blobGasPrice as string).toString()
+        : undefined,
     };
     transaction.receipt = arbitrumReceipt;
   }
diff --git a/src/services/adapters/BNBAdapter/BNBAdapter.ts b/src/services/adapters/BNBAdapter/BNBAdapter.ts
index 414256ca..fe675c46 100644
--- a/src/services/adapters/BNBAdapter/BNBAdapter.ts
+++ b/src/services/adapters/BNBAdapter/BNBAdapter.ts
@@ -1,6 +1,7 @@
 import { type BlockNumberOrTag, NetworkAdapter } from "../NetworkAdapter";
 import type { Block, Transaction, Address, NetworkStats, DataWithMetadata } from "../../../types";
-import type { TraceResult } from "../NetworkAdapter";
+import type { TraceResult, CallNode, PrestateTrace } from "../NetworkAdapter";
+import { normalizeGethCallTrace } from "../../../utils/callTreeUtils";
 import { logger } from "../../../utils/logger";
 import {
   transformBNBBlockToBlock,
@@ -292,4 +293,26 @@ export class BNBAdapter extends NetworkAdapter {
       return null;
     }
   }
+  async getAnalyserCallTrace(txHash: string): Promise<CallNode | null> {
+    try {
+      const result = await this.client.debugTraceTransaction(txHash, { tracer: "callTracer" });
+      return result.data ? normalizeGethCallTrace(result.data) : null;
+    } catch (error) {
+      logger.error("Error getting analyser call trace:", error);
+      return null;
+    }
+  }
+
+  async getAnalyserPrestateTrace(txHash: string): Promise<PrestateTrace | null> {
+    try {
+      const result = await this.client.debugTraceTransaction(txHash, {
+        tracer: "prestateTracer",
+        tracerConfig: { diffMode: true },
+      });
+      return (result.data as PrestateTrace) ?? null;
+    } catch (error) {
+      logger.error("Error getting analyser prestate trace:", error);
+      return null;
+    }
+  }
 }
diff --git a/src/services/adapters/BNBAdapter/utils.ts b/src/services/adapters/BNBAdapter/utils.ts
index b28fa9b9..4a6738d7 100644
--- a/src/services/adapters/BNBAdapter/utils.ts
+++ b/src/services/adapters/BNBAdapter/utils.ts
@@ -38,8 +38,14 @@ export function transformBNBBlockToBlock(rpcBlock: BNBBlock): Block {
     totalDifficulty: rpcBlock.totalDifficulty
       ? BigInt(rpcBlock.totalDifficulty).toString()
       : BigInt(rpcBlock.difficulty).toString(),
-    blobGasUsed: "",
-    excessBlobGas: "",
+    blobGasUsed: (() => {
+      const val = (rpcBlock as unknown as Record<string, unknown>).blobGasUsed;
+      return typeof val === "string" && val !== "0x0" && val !== "0x" ? BigInt(val).toString() : "";
+    })(),
+    excessBlobGas: (() => {
+      const val = (rpcBlock as unknown as Record<string, unknown>).excessBlobGas;
+      return typeof val === "string" && val !== "0x0" && val !== "0x" ? BigInt(val).toString() : "";
+    })(),
     withdrawalsRoot: rpcBlock.withdrawalsRoot || "",
     withdrawals: rpcBlock.withdrawals
       ? rpcBlock.withdrawals.map((w) => ({
@@ -71,6 +77,10 @@ export function transformBNBTransactionToTransaction(
     maxPriorityFeePerGas: rpcTx.maxPriorityFeePerGas
       ? BigInt(rpcTx.maxPriorityFeePerGas).toString()
       : undefined,
+    maxFeePerBlobGas: rpcTx.maxFeePerBlobGas
+      ? BigInt(rpcTx.maxFeePerBlobGas).toString()
+      : undefined,
+    blobVersionedHashes: rpcTx.blobVersionedHashes,
     nonce: rpcTx.nonce ? parseInt(rpcTx.nonce, 16).toString() : "0",
     data: rpcTx.input,
     blockNumber: rpcTx.blockNumber ? parseInt(rpcTx.blockNumber, 16).toString() : "0",
@@ -102,6 +112,8 @@ export function transformBNBTransactionToTransaction(
       transactionHash: receipt.transactionHash,
       transactionIndex: parseInt(receipt.transactionIndex, 16).toString(),
       type: receipt.type,
+      blobGasUsed: receipt.blobGasUsed ? BigInt(receipt.blobGasUsed).toString() : undefined,
+      blobGasPrice: receipt.blobGasPrice ? BigInt(receipt.blobGasPrice).toString() : undefined,
     };
   }
 
diff --git a/src/services/adapters/BaseAdapter/BaseAdapter.ts b/src/services/adapters/BaseAdapter/BaseAdapter.ts
index 73020e90..dd23c7f0 100644
--- a/src/services/adapters/BaseAdapter/BaseAdapter.ts
+++ b/src/services/adapters/BaseAdapter/BaseAdapter.ts
@@ -1,4 +1,6 @@
 import { type BlockNumberOrTag, NetworkAdapter, type TraceResult } from "../NetworkAdapter";
+import type { CallNode, PrestateTrace } from "../NetworkAdapter";
+import { normalizeGethCallTrace } from "../../../utils/callTreeUtils";
 import type { Block, Transaction, Address, NetworkStats, DataWithMetadata } from "../../../types";
 import { logger } from "../../../utils/logger";
 import {
@@ -291,4 +293,26 @@ export class BaseAdapter extends NetworkAdapter {
       return null;
     }
   }
+  async getAnalyserCallTrace(txHash: string): Promise<CallNode | null> {
+    try {
+      const result = await this.client.debugTraceTransaction(txHash, { tracer: "callTracer" });
+      return result.data ? normalizeGethCallTrace(result.data) : null;
+    } catch (error) {
+      logger.error("Error getting analyser call trace:", error);
+      return null;
+    }
+  }
+
+  async getAnalyserPrestateTrace(txHash: string): Promise<PrestateTrace | null> {
+    try {
+      const result = await this.client.debugTraceTransaction(txHash, {
+        tracer: "prestateTracer",
+        tracerConfig: { diffMode: true },
+      });
+      return (result.data as PrestateTrace) ?? null;
+    } catch (error) {
+      logger.error("Error getting analyser prestate trace:", error);
+      return null;
+    }
+  }
 }
diff --git a/src/services/adapters/BaseAdapter/utils.ts b/src/services/adapters/BaseAdapter/utils.ts
index fd078187..dbf246d8 100644
--- a/src/services/adapters/BaseAdapter/utils.ts
+++ b/src/services/adapters/BaseAdapter/utils.ts
@@ -42,8 +42,14 @@ export function transformBaseBlockToBlock(rpcBlock: BaseBlock): Block {
     totalDifficulty: rpcBlock.totalDifficulty
       ? BigInt(rpcBlock.totalDifficulty).toString()
       : BigInt(rpcBlock.difficulty).toString(),
-    blobGasUsed: "",
-    excessBlobGas: "",
+    blobGasUsed: (() => {
+      const val = (rpcBlock as unknown as Record<string, unknown>).blobGasUsed;
+      return typeof val === "string" && val !== "0x0" && val !== "0x" ? BigInt(val).toString() : "";
+    })(),
+    excessBlobGas: (() => {
+      const val = (rpcBlock as unknown as Record<string, unknown>).excessBlobGas;
+      return typeof val === "string" && val !== "0x0" && val !== "0x" ? BigInt(val).toString() : "";
+    })(),
     withdrawalsRoot: rpcBlock.withdrawalsRoot || "",
     withdrawals: rpcBlock.withdrawals
       ? rpcBlock.withdrawals.map((w) => ({
@@ -75,6 +81,10 @@ export function transformBaseTransactionToTransaction(
     maxPriorityFeePerGas: rpcTx.maxPriorityFeePerGas
       ? BigInt(rpcTx.maxPriorityFeePerGas).toString()
       : undefined,
+    maxFeePerBlobGas: rpcTx.maxFeePerBlobGas
+      ? BigInt(rpcTx.maxFeePerBlobGas).toString()
+      : undefined,
+    blobVersionedHashes: rpcTx.blobVersionedHashes,
     nonce: rpcTx.nonce ? parseInt(rpcTx.nonce, 16).toString() : "0",
     data: rpcTx.input,
     blockNumber: rpcTx.blockNumber ? parseInt(rpcTx.blockNumber, 16).toString() : "0",
@@ -106,6 +116,8 @@ export function transformBaseTransactionToTransaction(
       transactionHash: receipt.transactionHash,
       transactionIndex: parseInt(receipt.transactionIndex, 16).toString(),
       type: receipt.type,
+      blobGasUsed: receipt.blobGasUsed ? BigInt(receipt.blobGasUsed).toString() : undefined,
+      blobGasPrice: receipt.blobGasPrice ? BigInt(receipt.blobGasPrice).toString() : undefined,
       // Base-specific L1 fee fields (OP Stack compatible)
       l1Fee: receipt.l1Fee || "0",
       l1GasPrice: receipt.l1GasPrice || "0",
diff --git a/src/services/adapters/EVMAdapter/EVMAdapter.ts b/src/services/adapters/EVMAdapter/EVMAdapter.ts
index d4e4cded..905571a6 100644
--- a/src/services/adapters/EVMAdapter/EVMAdapter.ts
+++ b/src/services/adapters/EVMAdapter/EVMAdapter.ts
@@ -1,6 +1,7 @@
 import { type BlockNumberOrTag, NetworkAdapter } from "../NetworkAdapter";
 import type { Block, Transaction, Address, NetworkStats, DataWithMetadata } from "../../../types";
-import type { TraceResult } from "../NetworkAdapter";
+import type { CallNode, PrestateTrace, TraceResult } from "../NetworkAdapter";
+import { normalizeGethCallTrace } from "../../../utils/callTreeUtils";
 import { logger } from "../../../utils/logger";
 import {
   transformRPCBlockToBlock,
@@ -299,4 +300,27 @@ export class EVMAdapter extends NetworkAdapter {
       return null;
     }
   }
+
+  async getAnalyserCallTrace(txHash: string): Promise<CallNode | null> {
+    try {
+      const result = await this.client.debugTraceTransaction(txHash, { tracer: "callTracer" });
+      return result.data ? normalizeGethCallTrace(result.data) : null;
+    } catch (error) {
+      logger.error("Error getting analyser call trace:", error);
+      return null;
+    }
+  }
+
+  async getAnalyserPrestateTrace(txHash: string): Promise<PrestateTrace | null> {
+    try {
+      const result = await this.client.debugTraceTransaction(txHash, {
+        tracer: "prestateTracer",
+        tracerConfig: { diffMode: true },
+      });
+      return (result.data as PrestateTrace) ?? null;
+    } catch (error) {
+      logger.error("Error getting analyser prestate trace:", error);
+      return null;
+    }
+  }
 }
diff --git a/src/services/adapters/EVMAdapter/utils.ts b/src/services/adapters/EVMAdapter/utils.ts
index d4f2f4f4..eecec543 100644
--- a/src/services/adapters/EVMAdapter/utils.ts
+++ b/src/services/adapters/EVMAdapter/utils.ts
@@ -36,8 +36,14 @@ export function transformRPCBlockToBlock(rpcBlock: EthBlock): Block {
     totalDifficulty: rpcBlock.totalDifficulty
       ? BigInt(rpcBlock.totalDifficulty).toString()
       : BigInt(rpcBlock.difficulty).toString(),
-    blobGasUsed: "",
-    excessBlobGas: "",
+    blobGasUsed: (() => {
+      const val = (rpcBlock as unknown as Record<string, unknown>).blobGasUsed;
+      return typeof val === "string" && val !== "0x0" && val !== "0x" ? BigInt(val).toString() : "";
+    })(),
+    excessBlobGas: (() => {
+      const val = (rpcBlock as unknown as Record<string, unknown>).excessBlobGas;
+      return typeof val === "string" && val !== "0x0" && val !== "0x" ? BigInt(val).toString() : "";
+    })(),
     withdrawalsRoot: rpcBlock.withdrawalsRoot || "",
     withdrawals: rpcBlock.withdrawals || [],
   };
@@ -62,6 +68,10 @@ export function transformRPCTransactionToTransaction(
     maxPriorityFeePerGas: rpcTx.maxPriorityFeePerGas
       ? BigInt(rpcTx.maxPriorityFeePerGas).toString()
       : undefined,
+    maxFeePerBlobGas: rpcTx.maxFeePerBlobGas
+      ? BigInt(rpcTx.maxFeePerBlobGas).toString()
+      : undefined,
+    blobVersionedHashes: rpcTx.blobVersionedHashes,
     nonce: rpcTx.nonce ? parseInt(rpcTx.nonce, 16).toString() : "0",
     data: rpcTx.input,
     blockNumber: rpcTx.blockNumber ? parseInt(rpcTx.blockNumber, 16).toString() : "0",
@@ -93,6 +103,8 @@ export function transformRPCTransactionToTransaction(
       transactionHash: receipt.transactionHash,
       transactionIndex: parseInt(receipt.transactionIndex, 16).toString(),
       type: receipt.type,
+      blobGasUsed: receipt.blobGasUsed ? BigInt(receipt.blobGasUsed).toString() : undefined,
+      blobGasPrice: receipt.blobGasPrice ? BigInt(receipt.blobGasPrice).toString() : undefined,
     };
   }
 
diff --git a/src/services/adapters/NetworkAdapter.ts b/src/services/adapters/NetworkAdapter.ts
index ad7f1e85..5d2f5211 100644
--- a/src/services/adapters/NetworkAdapter.ts
+++ b/src/services/adapters/NetworkAdapter.ts
@@ -42,6 +42,32 @@ export interface TraceCallConfig {
     withLog?: boolean;
   };
 }
+
+export interface CallNode {
+  type: string;
+  from: string;
+  to?: string;
+  value?: string;
+  gas?: string;
+  gasUsed?: string;
+  input?: string;
+  output?: string;
+  error?: string;
+  revertReason?: string;
+  calls?: CallNode[];
+}
+
+export interface PrestateAccountState {
+  balance?: string;
+  nonce?: number;
+  code?: string;
+  storage?: Record<string, string>;
+}
+
+export interface PrestateTrace {
+  pre: Record<string, PrestateAccountState>;
+  post: Record<string, PrestateAccountState>;
+}
 /**
  * Base interface for blockchain-specific services
  * All chain implementations must conform to this unified API
@@ -377,4 +403,20 @@ export abstract class NetworkAdapter {
    * @returns Array of trace results or null
    */
   abstract getBlockTrace(blockHash: string): Promise<TraceResult[] | null>;
+
+  /**
+   * Get call tree trace using debug_traceTransaction with callTracer.
+   * Available in Super User Mode — no localhost restriction.
+   * @param txHash - Transaction hash
+   * @returns Nested CallNode tree or null
+   */
+  abstract getAnalyserCallTrace(txHash: string): Promise<CallNode | null>;
+
+  /**
+   * Get prestate diff trace using debug_traceTransaction with prestateTracer.
+   * Available in Super User Mode — no localhost restriction.
+   * @param txHash - Transaction hash
+   * @returns PrestateTrace with pre/post state or null
+   */
+  abstract getAnalyserPrestateTrace(txHash: string): Promise<PrestateTrace | null>;
 }
diff --git a/src/services/adapters/OptimismAdapter/OptimismAdapter.ts b/src/services/adapters/OptimismAdapter/OptimismAdapter.ts
index 13e72397..cb1935e4 100644
--- a/src/services/adapters/OptimismAdapter/OptimismAdapter.ts
+++ b/src/services/adapters/OptimismAdapter/OptimismAdapter.ts
@@ -1,4 +1,6 @@
 import { type BlockNumberOrTag, NetworkAdapter, type TraceResult } from "../NetworkAdapter";
+import type { CallNode, PrestateTrace } from "../NetworkAdapter";
+import { normalizeGethCallTrace } from "../../../utils/callTreeUtils";
 import type { Block, Transaction, Address, NetworkStats, DataWithMetadata } from "../../../types";
 import { logger } from "../../../utils/logger";
 import {
@@ -291,4 +293,26 @@ export class OptimismAdapter extends NetworkAdapter {
       return null;
     }
   }
+  async getAnalyserCallTrace(txHash: string): Promise<CallNode | null> {
+    try {
+      const result = await this.client.debugTraceTransaction(txHash, { tracer: "callTracer" });
+      return result.data ? normalizeGethCallTrace(result.data) : null;
+    } catch (error) {
+      logger.error("Error getting analyser call trace:", error);
+      return null;
+    }
+  }
+
+  async getAnalyserPrestateTrace(txHash: string): Promise<PrestateTrace | null> {
+    try {
+      const result = await this.client.debugTraceTransaction(txHash, {
+        tracer: "prestateTracer",
+        tracerConfig: { diffMode: true },
+      });
+      return (result.data as PrestateTrace) ?? null;
+    } catch (error) {
+      logger.error("Error getting analyser prestate trace:", error);
+      return null;
+    }
+  }
 }
diff --git a/src/services/adapters/OptimismAdapter/utils.ts b/src/services/adapters/OptimismAdapter/utils.ts
index 204238cf..e05fb694 100644
--- a/src/services/adapters/OptimismAdapter/utils.ts
+++ b/src/services/adapters/OptimismAdapter/utils.ts
@@ -42,8 +42,14 @@ export function transformOptimismBlockToBlock(rpcBlock: OptimismBlock): Block {
     totalDifficulty: rpcBlock.totalDifficulty
       ? BigInt(rpcBlock.totalDifficulty).toString()
       : BigInt(rpcBlock.difficulty).toString(),
-    blobGasUsed: "",
-    excessBlobGas: "",
+    blobGasUsed: (() => {
+      const val = (rpcBlock as unknown as Record<string, unknown>).blobGasUsed;
+      return typeof val === "string" && val !== "0x0" && val !== "0x" ? BigInt(val).toString() : "";
+    })(),
+    excessBlobGas: (() => {
+      const val = (rpcBlock as unknown as Record<string, unknown>).excessBlobGas;
+      return typeof val === "string" && val !== "0x0" && val !== "0x" ? BigInt(val).toString() : "";
+    })(),
     withdrawalsRoot: rpcBlock.withdrawalsRoot || "",
     withdrawals: rpcBlock.withdrawals
       ? rpcBlock.withdrawals.map((w) => ({
@@ -75,6 +81,10 @@ export function transformOptimismTransactionToTransaction(
     maxPriorityFeePerGas: rpcTx.maxPriorityFeePerGas
       ? BigInt(rpcTx.maxPriorityFeePerGas).toString()
       : undefined,
+    maxFeePerBlobGas: rpcTx.maxFeePerBlobGas
+      ? BigInt(rpcTx.maxFeePerBlobGas).toString()
+      : undefined,
+    blobVersionedHashes: rpcTx.blobVersionedHashes,
     nonce: rpcTx.nonce ? parseInt(rpcTx.nonce, 16).toString() : "0",
     data: rpcTx.input,
     blockNumber: rpcTx.blockNumber ? parseInt(rpcTx.blockNumber, 16).toString() : "0",
@@ -106,6 +116,8 @@ export function transformOptimismTransactionToTransaction(
       transactionHash: receipt.transactionHash,
       transactionIndex: parseInt(receipt.transactionIndex, 16).toString(),
       type: receipt.type,
+      blobGasUsed: receipt.blobGasUsed ? BigInt(receipt.blobGasUsed).toString() : undefined,
+      blobGasPrice: receipt.blobGasPrice ? BigInt(receipt.blobGasPrice).toString() : undefined,
       // Optimism-specific L1 fee fields
       l1Fee: receipt.l1Fee || "0",
       l1GasPrice: receipt.l1GasPrice || "0",
diff --git a/src/services/adapters/PolygonAdapter/PolygonAdapter.ts b/src/services/adapters/PolygonAdapter/PolygonAdapter.ts
index 90b7d06b..eaf106eb 100644
--- a/src/services/adapters/PolygonAdapter/PolygonAdapter.ts
+++ b/src/services/adapters/PolygonAdapter/PolygonAdapter.ts
@@ -1,6 +1,7 @@
 import { type BlockNumberOrTag, NetworkAdapter } from "../NetworkAdapter";
 import type { Block, Transaction, Address, NetworkStats, DataWithMetadata } from "../../../types";
-import type { TraceResult } from "../NetworkAdapter";
+import type { TraceResult, CallNode, PrestateTrace } from "../NetworkAdapter";
+import { normalizeGethCallTrace } from "../../../utils/callTreeUtils";
 import { logger } from "../../../utils/logger";
 import {
   transformPolygonBlockToBlock,
@@ -291,4 +292,26 @@ export class PolygonAdapter extends NetworkAdapter {
       return null;
     }
   }
+  async getAnalyserCallTrace(txHash: string): Promise<CallNode | null> {
+    try {
+      const result = await this.client.debugTraceTransaction(txHash, { tracer: "callTracer" });
+      return result.data ? normalizeGethCallTrace(result.data) : null;
+    } catch (error) {
+      logger.error("Error getting analyser call trace:", error);
+      return null;
+    }
+  }
+
+  async getAnalyserPrestateTrace(txHash: string): Promise<PrestateTrace | null> {
+    try {
+      const result = await this.client.debugTraceTransaction(txHash, {
+        tracer: "prestateTracer",
+        tracerConfig: { diffMode: true },
+      });
+      return (result.data as PrestateTrace) ?? null;
+    } catch (error) {
+      logger.error("Error getting analyser prestate trace:", error);
+      return null;
+    }
+  }
 }
diff --git a/src/services/adapters/PolygonAdapter/utils.ts b/src/services/adapters/PolygonAdapter/utils.ts
index f6cb1be3..a63f2bf7 100644
--- a/src/services/adapters/PolygonAdapter/utils.ts
+++ b/src/services/adapters/PolygonAdapter/utils.ts
@@ -40,8 +40,14 @@ export function transformPolygonBlockToBlock(rpcBlock: PolygonBlock): Block {
     totalDifficulty: rpcBlock.totalDifficulty
       ? BigInt(rpcBlock.totalDifficulty).toString()
       : BigInt(rpcBlock.difficulty).toString(),
-    blobGasUsed: "",
-    excessBlobGas: "",
+    blobGasUsed: (() => {
+      const val = (rpcBlock as unknown as Record<string, unknown>).blobGasUsed;
+      return typeof val === "string" && val !== "0x0" && val !== "0x" ? BigInt(val).toString() : "";
+    })(),
+    excessBlobGas: (() => {
+      const val = (rpcBlock as unknown as Record<string, unknown>).excessBlobGas;
+      return typeof val === "string" && val !== "0x0" && val !== "0x" ? BigInt(val).toString() : "";
+    })(),
     withdrawalsRoot: rpcBlock.withdrawalsRoot || "",
     withdrawals: rpcBlock.withdrawals || [],
   };
@@ -66,6 +72,10 @@ export function transformPolygonTransactionToTransaction(
     maxPriorityFeePerGas: rpcTx.maxPriorityFeePerGas
       ? BigInt(rpcTx.maxPriorityFeePerGas).toString()
       : undefined,
+    maxFeePerBlobGas: rpcTx.maxFeePerBlobGas
+      ? BigInt(rpcTx.maxFeePerBlobGas).toString()
+      : undefined,
+    blobVersionedHashes: rpcTx.blobVersionedHashes,
     nonce: rpcTx.nonce ? parseInt(rpcTx.nonce, 16).toString() : "0",
     data: rpcTx.input,
     blockNumber: rpcTx.blockNumber ? parseInt(rpcTx.blockNumber, 16).toString() : "0",
@@ -97,6 +107,8 @@ export function transformPolygonTransactionToTransaction(
       transactionHash: receipt.transactionHash,
       transactionIndex: parseInt(receipt.transactionIndex, 16).toString(),
       type: receipt.type,
+      blobGasUsed: receipt.blobGasUsed ? BigInt(receipt.blobGasUsed).toString() : undefined,
+      blobGasPrice: receipt.blobGasPrice ? BigInt(receipt.blobGasPrice).toString() : undefined,
     };
   }
 
diff --git a/src/styles/components.css b/src/styles/components.css
index 69c11b9e..01058c03 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -164,6 +164,15 @@
 	color: #0052ff;
 }
 
+.tx-row-blob {
+	background: rgba(139, 92, 246, 0.1);
+	border-left: 3px solid #8b5cf6;
+}
+
+.tx-row-blob .tx-label {
+	color: #8b5cf6;
+}
+
 /* Block Display - Block navigation and details */
 .block-height-value {
 	font-weight: 600;
@@ -378,6 +387,24 @@
 	color: var(--text-primary);
 }
 
+.tx-input-utf8 {
+	background: var(--overlay-light-5);
+	border: 1px solid var(--overlay-light-10);
+	border-radius: 6px;
+	padding: 12px;
+	max-height: 400px;
+	overflow: auto;
+}
+
+.tx-input-utf8 pre {
+	font-family: "JetBrains Mono", "Fira Code", monospace;
+	font-size: 0.8rem;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	color: var(--text-primary);
+	margin: 0;
+}
+
 .tx-empty {
 	color: var(--text-secondary);
 	font-style: italic;
@@ -513,9 +540,8 @@ button.tx-section-header-toggle {
 
 .tx-log {
 	display: flex;
+	flex-direction: column;
 	border-bottom: 1px solid var(--color-primary-alpha-10);
-	padding: 16px;
-	gap: 16px;
 }
 
 .tx-log:last-child {
@@ -523,8 +549,8 @@ button.tx-section-header-toggle {
 }
 
 .tx-log-index {
-	flex: 0 0 32px;
-	height: 32px;
+	flex: 0 0 24px;
+	height: 24px;
 	background: var(--color-primary-alpha-15);
 	border-radius: 50%;
 	display: flex;
@@ -532,16 +558,16 @@ button.tx-section-header-toggle {
 	justify-content: center;
 	font-family: "Outfit", sans-serif;
 	font-weight: 600;
-	font-size: 0.85rem;
+	font-size: 0.75rem;
 	color: var(--color-primary);
 }
 
 .tx-log-content {
-	flex: 1;
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
 	min-width: 0;
+	padding: 8px 16px 8px 16px;
 }
 
 .tx-log-row {
@@ -613,7 +639,6 @@ button.tx-section-header-toggle {
 	display: flex;
 	align-items: center;
 	gap: 10px;
-	margin-bottom: 12px;
 	flex-wrap: wrap;
 }
 
@@ -633,6 +658,7 @@ button.tx-section-header-toggle {
 	font-size: 0.75rem;
 	color: var(--text-secondary);
 	cursor: help;
+	margin-left: 8px;
 }
 
 .tx-log-params {
@@ -1023,14 +1049,14 @@ button.tx-section-header-toggle {
 	color: var(--color-primary);
 	font-weight: 600;
 	text-decoration: none;
-	font-family: "monospace";
+	font-family: monospace;
 	font-size: 0.85rem;
 	word-break: break-all;
 	flex: 1;
 }
 
 .list-item-hash-plain {
-	font-family: "monospace";
+	font-family: monospace;
 	font-size: 0.85rem;
 	word-break: break-all;
 	flex: 1;
@@ -1248,7 +1274,7 @@ button.tx-section-header-toggle {
 	font-size: 1.2rem;
 	color: var(--color-primary);
 	font-weight: 600;
-	font-family: "monospace";
+	font-family: monospace;
 }
 
 /* Network Cards (for About page) */
@@ -1296,7 +1322,7 @@ button.tx-section-header-toggle {
 
 .network-chain-id {
 	font-size: 0.85rem;
-	font-family: "monospace";
+	font-family: monospace;
 	color: var(--text-secondary);
 }
 
@@ -1547,7 +1573,7 @@ button.tx-section-header-toggle {
 	background: var(--color-primary-alpha-10);
 	border: 1px solid var(--color-primary-alpha-30);
 	border-radius: 8px;
-	font-family: "monospace";
+	font-family: monospace;
 	font-size: 0.85rem;
 	word-break: break-all;
 	color: var(--color-primary);
@@ -1560,7 +1586,7 @@ button.tx-section-header-toggle {
 	background: var(--overlay-light-3);
 	border: 1px solid var(--overlay-light-10);
 	border-radius: 8px;
-	font-family: "monospace";
+	font-family: monospace;
 	font-size: 0.75rem;
 	word-break: break-all;
 	max-height: 200px;
@@ -1572,7 +1598,7 @@ button.tx-section-header-toggle {
 	background: var(--color-primary-alpha-8);
 	border: 1px solid var(--color-primary-alpha-20);
 	border-radius: 6px 6px 0 0;
-	font-family: "monospace";
+	font-family: monospace;
 	font-size: 0.85rem;
 	color: var(--color-primary);
 	font-weight: 600;
@@ -1585,7 +1611,7 @@ button.tx-section-header-toggle {
 	border: 1px solid var(--color-primary-alpha-20);
 	border-top: none;
 	border-radius: 0 0 6px 6px;
-	font-family: "monospace";
+	font-family: monospace;
 	font-size: 0.75rem;
 	color: var(--text-primary);
 	max-height: 400px;
@@ -1608,7 +1634,7 @@ button.tx-section-header-toggle {
 	color: var(--color-info);
 	border-radius: 6px;
 	font-size: 0.8rem;
-	font-family: "monospace";
+	font-family: monospace;
 }
 
 .abi-badge-event {
@@ -1617,7 +1643,7 @@ button.tx-section-header-toggle {
 	color: var(--color-accent);
 	border-radius: 6px;
 	font-size: 0.8rem;
-	font-family: "monospace";
+	font-family: monospace;
 }
 
 .abi-badge-constructor {
@@ -1626,7 +1652,7 @@ button.tx-section-header-toggle {
 	color: var(--color-warning);
 	border-radius: 6px;
 	font-size: 0.8rem;
-	font-family: "monospace";
+	font-family: monospace;
 	display: inline-block;
 }
 
@@ -1724,13 +1750,13 @@ button.tx-section-header-toggle {
 }
 
 .log-value {
-	font-family: "monospace";
+	font-family: monospace;
 	color: var(--text-primary);
 	font-weight: 500;
 }
 
 .log-topic-item {
-	font-family: "monospace";
+	font-family: monospace;
 	font-size: 0.85rem;
 	margin-left: 10px;
 	color: var(--text-primary);
@@ -1757,7 +1783,7 @@ button.tx-section-header-toggle {
 	display: grid;
 	gap: 8px;
 	font-size: 0.85rem;
-	font-family: "monospace";
+	font-family: monospace;
 	color: var(--text-primary); 
 }
 
@@ -1791,7 +1817,7 @@ button.tx-section-header-toggle {
 	background: rgba(0, 0, 0, 0.02);
 	padding: 10px;
 	border-radius: 6px;
-	font-family: "monospace";
+	font-family: monospace;
 	font-size: 0.75rem;
 }
 
@@ -1829,13 +1855,587 @@ button.tx-section-header-toggle {
 	padding: 10px;
 }
 
+/* ── TX Analyser ─────────────────────────────────────────────────────────── */
+
+.tx-analyser {
+	margin-top: 16px;
+	border: 1px solid var(--border-primary);
+	border-radius: 10px;
+	overflow: hidden;
+	background: var(--bg-secondary);
+}
+
+.tx-analyser-tabs {
+	display: flex;
+	align-items: center;
+	border-bottom: 1px solid var(--border-primary);
+	background: var(--bg-tertiary);
+}
+
+.tx-analyser-collapse-btn {
+	margin-left: auto;
+	padding: 6px 12px;
+	background: none;
+	border: none;
+	color: var(--text-tertiary);
+	cursor: pointer;
+	font-size: 0.85rem;
+}
+
+.tx-analyser-collapse-btn:hover {
+	color: var(--text-primary);
+}
+
+.tx-analyser-tab {
+	padding: 10px 18px;
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: var(--text-secondary);
+	background: transparent;
+	border: none;
+	border-bottom: 2px solid transparent;
+	cursor: pointer;
+	transition: color 0.15s, border-color 0.15s;
+	margin-bottom: -1px;
+}
+
+.tx-analyser-tab:hover {
+	color: var(--text-primary);
+}
+
+.tx-analyser-tab--active {
+	color: var(--color-accent);
+	border-bottom-color: var(--color-accent);
+}
+
+.tx-analyser-tab--active-base {
+	color: var(--text-primary);
+	border-bottom-color: var(--text-primary);
+}
+
+.tx-analyser-body {
+	padding: 16px;
+	min-height: 80px;
+}
+
+.analyser-tab-content {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.analyser-loading {
+	text-align: center;
+	padding: 32px;
+	color: var(--text-secondary);
+}
+
+.analyser-error {
+	padding: 16px;
+	border-radius: 8px;
+	background: rgba(239, 68, 68, 0.08);
+	border: 1px solid rgba(239, 68, 68, 0.3);
+	color: var(--color-error);
+	font-size: 0.875rem;
+}
+
+.analyser-hint {
+	margin-top: 8px;
+	color: var(--text-secondary);
+	font-size: 0.8rem;
+}
+
+.analyser-empty {
+	text-align: center;
+	padding: 32px;
+	color: var(--text-tertiary);
+	font-size: 0.875rem;
+}
+
+.analyser-summary {
+	display: flex;
+	gap: 16px;
+	flex-wrap: wrap;
+	font-size: 0.8rem;
+	color: var(--text-secondary);
+	padding: 8px 12px;
+	background: var(--bg-tertiary);
+	border-radius: 6px;
+	border: 1px solid var(--border-primary);
+}
+
+.analyser-summary-reverts {
+	color: var(--color-error);
+}
+
+/* ── Call Tree ───────────────────────────────────────────────────────────── */
+
+.call-tree-root {
+	overflow-x: auto;
+}
+
+.call-tree-node {
+	font-size: 0.82rem;
+	font-family: monospace;
+}
+
+.call-tree-node + .call-tree-node {
+	margin-top: 2px;
+}
+
+.call-tree-node--error > .call-tree-node-header {
+	background: rgba(239, 68, 68, 0.05);
+	border-radius: 4px;
+}
+
+.call-tree-node-header {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 6px;
+	padding: 5px 6px;
+	border-radius: 4px;
+	transition: background 0.1s;
+	min-width: max-content;
+}
+
+.call-tree-node-header:hover {
+	background: var(--overlay-light-1);
+}
+
+.call-tree-toggle {
+	width: 14px;
+	flex-shrink: 0;
+	color: var(--text-tertiary);
+	font-size: 0.9rem;
+}
+
+.call-tree-type-badge {
+	display: inline-flex;
+	align-items: center;
+	font-size: 0.7rem;
+	font-weight: 700;
+	padding: 1px 7px;
+	border-radius: 4px;
+	border: 1px solid;
+	letter-spacing: 0.03em;
+	flex-shrink: 0;
+}
+
+.call-tree-addresses {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.call-tree-address {
+	color: var(--color-link);
+	text-decoration: none;
+}
+
+.call-tree-address:hover {
+	text-decoration: underline;
+}
+
+.call-tree-arrow {
+	color: var(--text-tertiary);
+}
+
+.call-tree-value {
+	color: #10b981;
+	font-weight: 600;
+	font-size: 0.78rem;
+}
+
+.call-tree-gas {
+	color: var(--text-tertiary);
+	font-size: 0.75rem;
+}
+
+.call-tree-error-badge {
+	background: rgba(239, 68, 68, 0.12);
+	color: var(--color-error);
+	border: 1px solid rgba(239, 68, 68, 0.3);
+	border-radius: 4px;
+	padding: 1px 6px;
+	font-size: 0.7rem;
+	font-weight: 600;
+}
+
+.call-tree-children {
+	padding-left: 20px;
+	border-left: 2px solid var(--border-primary);
+	margin-left: 6px;
+	margin-top: 2px;
+	margin-bottom: 2px;
+}
+
+/* ── State Changes ───────────────────────────────────────────────────────── */
+
+.state-change-block {
+	border: 1px solid var(--border-primary);
+	border-radius: 8px;
+	overflow: hidden;
+}
+
+.state-change-address {
+	padding: 8px 12px;
+	background: var(--bg-tertiary);
+	border-bottom: 1px solid var(--border-primary);
+	font-size: 0.85rem;
+	font-family: monospace;
+	font-weight: 600;
+}
+
+.state-change-address--toggle {
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.state-change-address--toggle:hover {
+	background: var(--overlay-light-2);
+}
+
+.analyser-expand-controls {
+	margin-left: auto;
+	display: flex;
+	gap: 8px;
+}
+
+.analyser-expand-btn {
+	background: none;
+	border: 1px solid var(--border-primary);
+	border-radius: 4px;
+	padding: 2px 8px;
+	font-size: 0.75rem;
+	color: var(--text-secondary);
+	cursor: pointer;
+}
+
+.analyser-expand-btn:hover {
+	color: var(--text-primary);
+	border-color: var(--text-tertiary);
+}
+
+.tx-log-header--toggle {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 12px;
+	cursor: pointer;
+	font-size: 0.85rem;
+}
+
+.tx-log-header--toggle:hover {
+	background: var(--overlay-light-2);
+}
+
+.tx-log-header-address {
+	font-size: 0.8rem;
+	margin-left: auto;
+}
+
+.state-change-rows {
+	display: flex;
+	flex-direction: column;
+}
+
+.state-change-row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 7px 12px;
+	font-size: 0.8rem;
+	font-family: monospace;
+	border-bottom: 1px solid var(--border-primary);
+	flex-wrap: wrap;
+}
+
+.state-change-row:last-child {
+	border-bottom: none;
+}
+
+.state-change-row--storage {
+	background: var(--overlay-light-1);
+}
+
+.state-change-label {
+	color: var(--text-secondary);
+	min-width: 120px;
+	font-size: 0.75rem;
+	font-family: "Outfit", sans-serif;
+}
+
+.state-change-slot {
+	color: var(--text-tertiary);
+	font-size: 0.75rem;
+}
+
+.state-change-before {
+	color: var(--text-primary);
+	opacity: 0.6;
+}
+
+.state-change-arrow {
+	color: var(--text-tertiary);
+}
+
+.state-change-after {
+	color: var(--text-primary);
+	font-weight: 500;
+}
+
+.state-change-diff {
+	margin-left: auto;
+	font-weight: 700;
+	font-size: 0.78rem;
+}
+
+.state-change-diff--positive {
+	color: #10b981;
+}
+
+.state-change-diff--negative {
+	color: var(--color-error);
+}
+
+.state-change-code {
+	color: var(--text-tertiary);
+	font-size: 0.75rem;
+}
+
+.state-change-addr-sub {
+	color: var(--text-tertiary);
+	font-size: 0.75rem;
+	margin-left: 4px;
+}
+
+.call-tree-contract-name {
+	color: var(--text-primary);
+	font-weight: 600;
+}
+
+.call-tree-decoded {
+	color: var(--color-accent);
+	font-size: 0.8rem;
+	margin-left: 6px;
+}
+
+.call-tree-decoded-params {
+	color: var(--text-secondary);
+}
+
+.analyser-summary-type {
+	font-size: 0.8rem;
+	font-weight: 500;
+}
+
+.analyser-summary-loading {
+	color: var(--text-tertiary);
+	font-size: 0.8rem;
+	font-style: italic;
+}
+
+/* Gas Profiler */
+/* Gas Profiler — Flame / Icicle Chart */
+.gas-profiler-flame {
+	border: 1px solid var(--border-primary);
+	border-radius: 8px;
+	padding: 8px;
+	overflow-x: auto;
+}
+
+.flame-row {
+	min-width: 0;
+}
+
+.flame-bar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+	padding: 4px 8px;
+	margin-bottom: 1px;
+	border: none;
+	border-radius: 3px;
+	color: #fff;
+	font-size: 0.78rem;
+	cursor: pointer;
+	text-align: left;
+	transition: filter 0.15s;
+	min-height: 26px;
+	overflow: hidden;
+	white-space: nowrap;
+	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+.flame-bar:hover {
+	filter: brightness(1.15);
+}
+
+.flame-bar--error {
+	outline: 2px solid #ef4444;
+	outline-offset: -2px;
+}
+
+.flame-bar--selected {
+	outline: 2px solid var(--text-primary);
+	outline-offset: -2px;
+}
+
+.flame-bar-label {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	flex: 1;
+	min-width: 0;
+	font-family: monospace;
+}
+
+.flame-bar-gas {
+	flex-shrink: 0;
+	margin-left: 8px;
+	font-family: monospace;
+	font-size: 0.72rem;
+	opacity: 0.85;
+}
+
+.flame-children {
+	display: flex;
+	flex-direction: row;
+	gap: 1px;
+	margin-top: 1px;
+}
+
+/* Reset zoom button */
+.gas-profiler-reset {
+	background: var(--bg-tertiary);
+	border: 1px solid var(--border-primary);
+	border-radius: 4px;
+	padding: 2px 10px;
+	font-size: 0.78rem;
+	color: var(--text-secondary);
+	cursor: pointer;
+}
+
+.gas-profiler-reset:hover {
+	background: var(--overlay-light-10);
+}
+
+/* Breakdown panel */
+.gas-profiler-breakdown {
+	margin-top: 12px;
+	border: 1px solid var(--border-primary);
+	border-radius: 8px;
+	overflow: hidden;
+}
+
+.gas-profiler-breakdown-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 10px 14px;
+	background: var(--bg-tertiary);
+	border-bottom: 1px solid var(--border-primary);
+	font-size: 0.82rem;
+}
+
+.gas-profiler-breakdown-title {
+	color: var(--text-secondary);
+}
+
+.gas-profiler-breakdown-title strong {
+	color: var(--text-primary);
+}
+
+.gas-profiler-breakdown-gas {
+	font-family: monospace;
+	font-size: 0.78rem;
+	color: var(--text-tertiary);
+}
+
+.gas-profiler-breakdown-list {
+	padding: 4px 0;
+}
+
+.gas-profiler-breakdown-row {
+	display: grid;
+	grid-template-columns: 14px 1fr 60px 120px 100px;
+	gap: 8px;
+	padding: 5px 14px;
+	align-items: center;
+	font-size: 0.8rem;
+}
+
+.gas-profiler-breakdown-row:hover {
+	background: var(--overlay-light-5);
+}
+
+.gas-profiler-breakdown-swatch {
+	width: 10px;
+	height: 10px;
+	border-radius: 2px;
+	flex-shrink: 0;
+}
+
+.gas-profiler-breakdown-label {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-family: monospace;
+}
+
+.gas-profiler-breakdown-pct {
+	text-align: right;
+	font-weight: 600;
+	color: var(--text-primary);
+}
+
+.gas-profiler-breakdown-value {
+	text-align: right;
+	font-family: monospace;
+	font-size: 0.75rem;
+	color: var(--text-tertiary);
+}
+
+.gas-profiler-breakdown-bar-bg {
+	height: 8px;
+	background: var(--overlay-light-5);
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+.gas-profiler-breakdown-bar-fill {
+	height: 100%;
+	border-radius: 4px;
+	min-width: 1px;
+}
+
+.gas-profiler-breakdown-hint {
+	padding: 6px 14px 10px;
+	font-size: 0.72rem;
+	color: var(--text-tertiary);
+	font-style: italic;
+}
+
+@media (max-width: 640px) {
+	.gas-profiler-breakdown-row {
+		grid-template-columns: 14px 1fr 50px 80px;
+	}
+
+	.gas-profiler-breakdown-bar-bg {
+		display: none;
+	}
+}
+
 /* Input Data Display */
 .input-data-display {
 	background: var(--bg-tertiary);
 	padding: 15px;
 	border-radius: 8px;
 	border: 1px solid var(--border-primary);
-	font-family: "monospace";
+	font-family: monospace;
 	font-size: 0.85rem;
 	word-break: break-all;
 	max-height: 300px;
@@ -1978,7 +2578,7 @@ button.tx-section-header-toggle {
 
 /* Address Display Specific */
 .address-block-number {
-	font-family: "monospace";
+	font-family: monospace;
 	font-size: 1.1rem;
 }
 
@@ -7132,6 +7732,33 @@ button.tx-section-header-toggle {
 	font-style: italic;
 }
 
+.btc-op-return {
+	display: flex;
+	align-items: baseline;
+	gap: 8px;
+	flex-wrap: wrap;
+	word-break: break-all;
+}
+
+.btc-op-return-label {
+	font-weight: 600;
+	font-size: 0.8rem;
+	color: var(--text-secondary);
+	background: var(--overlay-light-5);
+	padding: 2px 6px;
+	border-radius: 4px;
+	white-space: nowrap;
+}
+
+.btc-op-return-text {
+	color: var(--text-primary);
+}
+
+.btc-op-return-hex {
+	color: var(--text-secondary);
+	font-size: 0.85rem;
+}
+
 .btc-io-details {
 	display: flex;
 	flex-wrap: wrap;
diff --git a/src/styles/responsive.css b/src/styles/responsive.css
index 7a482e8a..c89cd844 100644
--- a/src/styles/responsive.css
+++ b/src/styles/responsive.css
@@ -1408,6 +1408,25 @@
     width: 100%;
     padding: 14px 24px;
   }
+
+  .settings-providers-save-row {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "status"
+      "save";
+    gap: 10px;
+  }
+
+  .settings-providers-save-row .settings-save-button {
+    grid-area: save;
+    width: auto;
+    justify-self: center;
+  }
+
+  .settings-providers-save-row .settings-autosave-pill {
+    grid-area: status;
+    justify-self: end;
+  }
 }
 
 @media (max-width: 480px) {
diff --git a/src/styles/styles.css b/src/styles/styles.css
index cbf35360..44b02a46 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -634,37 +634,7 @@ a.navbar-logo-dropdown-item:hover {
 }
 
 /* Notifications */
-.notification-container {
-  position: fixed;
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  z-index: 1000;
-  width: clamp(240px, 90vw, 520px);
-}
-
-.notification {
-  padding: 14px 18px;
-}
-
-.notification__content {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-}
-
-.notification__message {
-  flex: 1;
-  line-height: 1.3;
-}
-
-.notification__close {
-  padding: 2px 6px;
-  cursor: pointer;
-}
+/* Base notification styles moved to notification section below */
 
 /* Loading */
 .loading-container {
@@ -2497,35 +2467,42 @@ a.navbar-logo-dropdown-item:hover {
 /* Notifications */
 .notification-container {
   position: fixed;
-  top: 20px;
+  top: 70px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: 10px;
   z-index: 1000;
-  width: clamp(240px, 90vw, 520px);
 }
 
 .notification {
+  width: clamp(240px, 90vw, 520px);
   padding: 14px 18px;
-  border-radius: var(--radius-sm);
-  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.5);
-  border-left: 5px solid var(--accent);
+  border-radius: 12px;
+  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--overlay-light-10);
   background: var(--panel);
   backdrop-filter: blur(10px);
 }
 
 .notification--success {
-  border-left-color: var(--success);
+  border-color: var(--success);
 }
 
 .notification--warning {
-  border-left-color: var(--warning);
+  background: rgba(255, 193, 7, 0.12);
+  border-color: var(--warning);
+  color: var(--warning);
+}
+
+.notification--warning .notification__message {
+  color: var(--warning);
 }
 
 .notification--error {
-  border-left-color: var(--danger);
+  border-color: var(--danger);
 }
 
 .notification__content {
@@ -4678,6 +4655,147 @@ code {
   text-align: center;
 }
 
+.settings-tabs-shell {
+  margin-bottom: 20px;
+}
+
+.settings-tabs {
+  display: flex;
+  gap: 8px;
+  padding: 4px;
+  background: var(--color-primary-alpha-6);
+  border-radius: 12px;
+  border: 1px solid var(--color-primary-alpha-10);
+  min-height: 52px;
+}
+
+.settings-tab {
+  flex: 1;
+  padding: 10px 14px;
+  border: none;
+  border-radius: 8px;
+  color: var(--text-primary);
+  font-family: "Outfit", sans-serif;
+  font-weight: 600;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: transparent;
+}
+
+.settings-tab:hover {
+  background: var(--color-primary-alpha-10);
+  color: var(--color-primary);
+}
+
+.settings-tab.active {
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-muted) 100%);
+  color: white;
+  box-shadow: 0 2px 8px var(--color-primary-alpha-30);
+}
+
+.settings-tabs-mobile {
+  display: none;
+  position: relative;
+}
+
+.settings-tabs-mobile-select {
+  width: 100%;
+  padding: 12px 40px 12px 16px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  font-family: "Outfit", sans-serif;
+  color: white;
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-muted) 100%);
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  box-shadow: 0 2px 8px var(--color-primary-alpha-30);
+}
+
+.settings-tabs-mobile-arrow {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: white;
+  font-size: 0.75rem;
+  pointer-events: none;
+}
+
+.settings-tab-panel-wrap {
+  min-height: 280px;
+}
+
+.settings-tab-panel {
+  animation: settingsTabFade 0.18s ease;
+}
+
+@keyframes settingsTabFade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.settings-tab-grid {
+  align-items: start;
+}
+
+.settings-autosave-row {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+}
+
+.settings-providers-save-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  grid-template-areas: ". save status";
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.settings-providers-save-row .settings-save-button {
+  grid-area: save;
+  justify-self: center;
+}
+
+.settings-providers-save-row .settings-autosave-pill {
+  grid-area: status;
+  justify-self: end;
+}
+
+.settings-autosave-pill {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 6px 10px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border: 1px solid var(--color-primary-alpha-20);
+  background: var(--color-primary-alpha-6);
+  color: var(--text-secondary);
+  min-width: 130px;
+  justify-content: center;
+}
+
+.settings-autosave-pill.saving {
+  color: var(--color-primary);
+  border-color: var(--color-primary-alpha-40);
+}
+
+.settings-autosave-pill.saved {
+  color: #16a34a;
+  border-color: rgba(34, 197, 94, 0.4);
+  background: rgba(34, 197, 94, 0.08);
+}
+
 .settings-top-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -4697,6 +4815,23 @@ code {
   .settings-grid {
     grid-template-columns: 1fr;
   }
+
+  .settings-tabs-mobile {
+    display: block;
+    margin-bottom: 12px;
+  }
+
+  .settings-tabs {
+    display: none;
+  }
+
+  .settings-autosave-row {
+    justify-content: flex-start;
+  }
+
+  .settings-autosave-pill {
+    min-width: auto;
+  }
 }
 
 .settings-success-message {
@@ -5087,6 +5222,17 @@ code {
   box-shadow: 0 6px 16px var(--color-primary-alpha-40);
 }
 
+.settings-save-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  transform: none;
+  box-shadow: none;
+}
+
+.settings-providers-save-row .settings-save-button {
+  margin: 0;
+}
+
 /* Sticky Save Button Container */
 /* Save Section */
 .settings-save-section {
@@ -5114,6 +5260,15 @@ code {
   margin-top: 0;
 }
 
+.settings-api-key-group-title {
+  margin: 16px 0 4px;
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
 .settings-api-key-header {
   display: flex;
   justify-content: space-between;
@@ -5190,6 +5345,10 @@ code {
   margin-top: 12px;
 }
 
+.settings-prompt-version-item {
+  margin-top: 20px;
+}
+
 /* Toast Notifications */
 .settings-toast-container {
   position: fixed;
@@ -5217,6 +5376,11 @@ code {
   color: white;
 }
 
+.settings-toast-error {
+  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
+  color: white;
+}
+
 @keyframes slideDown {
   from {
     opacity: 0;
diff --git a/src/types/index.ts b/src/types/index.ts
index 92b8e135..169da421 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -74,6 +74,8 @@ export interface Transaction {
   gasPrice: string;
   maxFeePerGas?: string;
   maxPriorityFeePerGas?: string;
+  maxFeePerBlobGas?: string;
+  blobVersionedHashes?: string[];
   hash: string;
   nonce: string;
   to: string;
@@ -108,6 +110,8 @@ export interface TransactionReceipt {
   transactionHash: string;
   transactionIndex: string;
   type: string;
+  blobGasUsed?: string;
+  blobGasPrice?: string;
 }
 
 export interface TransactionReceiptArbitrum extends TransactionReceipt {
@@ -432,7 +436,13 @@ export interface ApiKeys {
 /**
  * Supported AI providers for blockchain analysis
  */
-export type AIProvider = "groq" | "openai" | "anthropic" | "perplexity" | "gemini";
+export type AIProvider =
+  | "openscan-groq"
+  | "groq"
+  | "openai"
+  | "anthropic"
+  | "perplexity"
+  | "gemini";
 
 /**
  * Configuration for an AI provider
@@ -485,7 +495,6 @@ export interface UserSettings {
   isSuperUser?: boolean;
   promptVersion?: PromptVersion;
   persistentCacheSizeMB?: number;
-  rpcsSynced?: boolean;
 }
 
 /**
diff --git a/src/utils/bitcoinUtils.ts b/src/utils/bitcoinUtils.ts
index 1923aa36..5c712dba 100644
--- a/src/utils/bitcoinUtils.ts
+++ b/src/utils/bitcoinUtils.ts
@@ -60,3 +60,73 @@ export function hasWitness(tx: BitcoinTransaction): boolean {
 export function isCoinbaseTransaction(tx: BitcoinTransaction): boolean {
   return tx.vin.length === 1 && !tx.vin[0]?.txid;
 }
+
+/**
+ * Decode OP_RETURN payload from scriptPubKey hex.
+ * Script format: 6a [push opcodes] <data>
+ * Returns the decoded UTF-8 string if valid, otherwise the raw hex data.
+ */
+export function decodeOpReturnData(hex: string): { text: string | null; hex: string } {
+  // Strip the OP_RETURN opcode (0x6a) prefix
+  if (!hex.startsWith("6a") || hex.length < 4) {
+    return { text: null, hex };
+  }
+
+  let offset = 2; // skip OP_RETURN (6a)
+  const dataChunks: string[] = [];
+
+  while (offset < hex.length) {
+    const opByte = parseInt(hex.slice(offset, offset + 2), 16);
+    if (Number.isNaN(opByte)) break;
+    offset += 2;
+
+    let pushLen: number;
+    if (opByte >= 0x01 && opByte <= 0x4b) {
+      // Direct push: opByte is the number of bytes to push
+      pushLen = opByte;
+    } else if (opByte === 0x4c) {
+      // OP_PUSHDATA1: next 1 byte is the length
+      pushLen = parseInt(hex.slice(offset, offset + 2), 16);
+      if (Number.isNaN(pushLen)) break;
+      offset += 2;
+    } else if (opByte === 0x4d) {
+      // OP_PUSHDATA2: next 2 bytes (little-endian) is the length
+      const lo = parseInt(hex.slice(offset, offset + 2), 16);
+      const hi = parseInt(hex.slice(offset + 2, offset + 4), 16);
+      if (Number.isNaN(lo) || Number.isNaN(hi)) break;
+      pushLen = lo | (hi << 8);
+      offset += 4;
+    } else {
+      // Unknown opcode or OP_0, skip rest
+      break;
+    }
+
+    const chunkHex = hex.slice(offset, offset + pushLen * 2);
+    if (chunkHex.length < pushLen * 2) break;
+    dataChunks.push(chunkHex);
+    offset += pushLen * 2;
+  }
+
+  const rawHex = dataChunks.join("");
+  if (!rawHex) {
+    return { text: null, hex };
+  }
+
+  // Try to decode as UTF-8
+  try {
+    const bytes = new Uint8Array(rawHex.length / 2);
+    for (let i = 0; i < bytes.length; i++) {
+      bytes[i] = parseInt(rawHex.slice(i * 2, i * 2 + 2), 16);
+    }
+    const decoded = new TextDecoder("utf-8", { fatal: true }).decode(bytes);
+    // Check if it has enough printable characters to be meaningful text
+    const printable = decoded.replace(/[^\x20-\x7E\u00A0-\uFFFF]/g, "");
+    if (printable.length >= decoded.length * 0.5) {
+      return { text: decoded, hex: rawHex };
+    }
+  } catch {
+    // Not valid UTF-8
+  }
+
+  return { text: null, hex: rawHex };
+}
diff --git a/src/utils/callTreeUtils.ts b/src/utils/callTreeUtils.ts
new file mode 100644
index 00000000..d763b8d9
--- /dev/null
+++ b/src/utils/callTreeUtils.ts
@@ -0,0 +1,126 @@
+import type { CallNode } from "../services/adapters/NetworkAdapter";
+
+/**
+ * Normalize a Geth callTracer response to CallNode.
+ * The callTracer already returns a nested tree — we just map field names.
+ */
+// biome-ignore lint/suspicious/noExplicitAny: Generic callTracer response
+export function normalizeGethCallTrace(raw: any): CallNode {
+  return {
+    type: (raw.type || "CALL").toUpperCase(),
+    from: raw.from ?? "",
+    to: raw.to,
+    value: raw.value,
+    gas: raw.gas,
+    gasUsed: raw.gasUsed,
+    input: raw.input,
+    output: raw.output,
+    error: raw.error,
+    revertReason: raw.revertReason,
+    // biome-ignore lint/suspicious/noExplicitAny: Generic callTracer response
+    calls: raw.calls?.map((c: any) => normalizeGethCallTrace(c)),
+  };
+}
+
+interface ParityTraceAction {
+  callType?: string;
+  from?: string;
+  to?: string;
+  value?: string;
+  gas?: string;
+  input?: string;
+}
+
+interface ParityTraceResult {
+  gasUsed?: string;
+  output?: string;
+  address?: string;
+}
+
+interface ParityTrace {
+  type: string;
+  action: ParityTraceAction;
+  result?: ParityTraceResult;
+  error?: string;
+  traceAddress: number[];
+  subtraces: number;
+}
+
+/**
+ * Normalize a flat Parity/arbtrace_transaction response to a CallNode tree.
+ * The traceAddress array encodes position in the call hierarchy.
+ */
+export function normalizeParityCallTrace(traces: ParityTrace[]): CallNode | null {
+  if (!traces || traces.length === 0) return null;
+
+  const root = traces.find((t) => t.traceAddress.length === 0);
+  if (!root) return null;
+
+  function buildNode(trace: ParityTrace): CallNode {
+    const action = trace.action;
+    const result = trace.result;
+
+    const children = traces
+      .filter((t) => {
+        if (t.traceAddress.length !== trace.traceAddress.length + 1) return false;
+        return trace.traceAddress.every((v, i) => t.traceAddress[i] === v);
+      })
+      .map(buildNode);
+
+    return {
+      type: (action.callType || trace.type || "CALL").toUpperCase(),
+      from: action.from ?? "",
+      to: action.to ?? result?.address,
+      value: action.value,
+      gas: action.gas,
+      gasUsed: result?.gasUsed,
+      input: action.input,
+      output: result?.output,
+      error: trace.error,
+      calls: children.length > 0 ? children : undefined,
+    };
+  }
+
+  return buildNode(root);
+}
+
+/** Count total calls in a tree */
+export function countCalls(node: CallNode): number {
+  return 1 + (node.calls?.reduce((sum, c) => sum + countCalls(c), 0) ?? 0);
+}
+
+/** Count reverted calls in a tree */
+export function countReverts(node: CallNode): number {
+  const selfReverted = node.error ? 1 : 0;
+  return selfReverted + (node.calls?.reduce((sum, c) => sum + countReverts(c), 0) ?? 0);
+}
+
+/** Count calls by type (CALL, STATICCALL, DELEGATECALL, CREATE, etc.) */
+export function countByType(node: CallNode): Record<string, number> {
+  const counts: Record<string, number> = {};
+  function traverse(n: CallNode) {
+    const type = n.type.toUpperCase();
+    counts[type] = (counts[type] ?? 0) + 1;
+    n.calls?.forEach(traverse);
+  }
+  traverse(node);
+  return counts;
+}
+
+/** Collect all unique addresses from a call tree (lowercased) */
+export function collectAddresses(node: CallNode): string[] {
+  const addrs = new Set<string>();
+  function traverse(n: CallNode) {
+    if (n.from) addrs.add(n.from.toLowerCase());
+    if (n.to) addrs.add(n.to.toLowerCase());
+    n.calls?.forEach(traverse);
+  }
+  traverse(node);
+  return Array.from(addrs);
+}
+
+/** Parse hex gas value to number */
+export function hexToGas(hex: string | undefined): number | undefined {
+  if (!hex) return undefined;
+  return Number.parseInt(hex.startsWith("0x") ? hex : `0x${hex}`, 16);
+}
diff --git a/src/utils/configExportImport.ts b/src/utils/configExportImport.ts
new file mode 100644
index 00000000..8443f656
--- /dev/null
+++ b/src/utils/configExportImport.ts
@@ -0,0 +1,117 @@
+import { saveJsonFilesToStorage } from "./artifactsStorage";
+import { saveRpcUrlsToStorage } from "./rpcStorage";
+
+const CONFIG_VERSION = 1;
+
+const EXPORTED_KEYS = {
+  settings: "openScan_user_settings",
+  rpcUrls: "OPENSCAN_RPC_URLS_V3",
+  artifacts: "OPENSCAN_ARTIFACTS_JSON_V1",
+  language: "openScan_language",
+} as const;
+
+interface OpenScanConfig {
+  version: number;
+  settings?: Record<string, unknown>;
+  rpcUrls?: Record<string, string[]>;
+  // biome-ignore lint/suspicious/noExplicitAny: artifacts have dynamic shape
+  artifacts?: Record<string, any>;
+  language?: string;
+}
+
+function parseStorageItem(key: string): unknown {
+  try {
+    const raw = localStorage.getItem(key);
+    if (raw === null) return undefined;
+    return JSON.parse(raw);
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Reads user configuration from localStorage and returns a serializable object.
+ */
+export function exportConfig(): OpenScanConfig {
+  const config: OpenScanConfig = { version: CONFIG_VERSION };
+
+  const settings = parseStorageItem(EXPORTED_KEYS.settings);
+  if (settings && typeof settings === "object") {
+    config.settings = settings as Record<string, unknown>;
+  }
+
+  const rpcUrls = parseStorageItem(EXPORTED_KEYS.rpcUrls);
+  if (rpcUrls && typeof rpcUrls === "object") {
+    config.rpcUrls = rpcUrls as Record<string, string[]>;
+  }
+
+  const artifacts = parseStorageItem(EXPORTED_KEYS.artifacts);
+  if (artifacts && typeof artifacts === "object") {
+    config.artifacts = artifacts as Record<string, unknown>;
+  }
+
+  const language = localStorage.getItem(EXPORTED_KEYS.language);
+  if (language) {
+    config.language = language;
+  }
+
+  return config;
+}
+
+/**
+ * Validates and writes an imported configuration to localStorage.
+ */
+export function importConfig(data: unknown): { success: boolean; error?: string } {
+  if (!data || typeof data !== "object") {
+    return { success: false, error: "Invalid configuration file." };
+  }
+
+  const config = data as Record<string, unknown>;
+
+  if (config.version !== CONFIG_VERSION) {
+    return { success: false, error: `Unsupported config version: ${String(config.version)}` };
+  }
+
+  if (config.settings !== undefined && typeof config.settings !== "object") {
+    return { success: false, error: "Invalid settings format." };
+  }
+
+  // Apply settings
+  if (config.settings && typeof config.settings === "object") {
+    localStorage.setItem(EXPORTED_KEYS.settings, JSON.stringify(config.settings));
+  }
+
+  // Apply RPC URLs
+  if (config.rpcUrls && typeof config.rpcUrls === "object") {
+    saveRpcUrlsToStorage(config.rpcUrls as Record<string, string[]>);
+  }
+
+  // Apply artifacts
+  if (config.artifacts && typeof config.artifacts === "object") {
+    saveJsonFilesToStorage(config.artifacts as Record<string, unknown>);
+  }
+
+  // Apply language
+  if (typeof config.language === "string") {
+    localStorage.setItem(EXPORTED_KEYS.language, config.language);
+  }
+
+  return { success: true };
+}
+
+/**
+ * Triggers a browser download of the config as a JSON file.
+ */
+export function downloadConfigFile(config: OpenScanConfig): void {
+  const dateStr = new Date().toISOString().slice(0, 10);
+  const filename = `openscan-config-${dateStr}.json`;
+  const blob = new Blob([JSON.stringify(config, null, 2)], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.click();
+
+  URL.revokeObjectURL(url);
+}
diff --git a/src/utils/contractLookup.ts b/src/utils/contractLookup.ts
new file mode 100644
index 00000000..9b20a155
--- /dev/null
+++ b/src/utils/contractLookup.ts
@@ -0,0 +1,109 @@
+import { logger } from "./logger";
+
+export interface ContractInfo {
+  name?: string;
+  // biome-ignore lint/suspicious/noExplicitAny: ABI types are dynamic
+  abi?: any[];
+}
+
+// Session-level cache keyed by "chainId:address"
+const cache = new Map<string, ContractInfo | null>();
+
+/**
+ * Fetch contract name + ABI for a single address.
+ * Tries Sourcify first; falls back to Etherscan V2 API if a key is provided.
+ * Results are cached in memory for the session.
+ */
+export async function fetchContractInfo(
+  address: string,
+  chainId: number,
+  signal?: AbortSignal,
+  etherscanKey?: string,
+): Promise<ContractInfo | null> {
+  const cacheKey = `${chainId}:${address.toLowerCase()}`;
+  if (cache.has(cacheKey)) return cache.get(cacheKey) ?? null;
+
+  // ── Sourcify V2 ──────────────────────────────────────────────────────────
+  try {
+    const res = await fetch(
+      `https://sourcify.dev/server/v2/contract/${chainId}/${address}?fields=abi,compilation,proxyResolution`,
+      { signal },
+    );
+    if (res.ok) {
+      const data = await res.json();
+      const name = data?.compilation?.name;
+      let abi = data?.abi;
+
+      // If this is a proxy, fetch the implementation ABI and merge it
+      const implAddr = data?.proxyResolution?.implementations?.[0]?.address;
+      if (implAddr) {
+        const implInfo = await fetchContractInfo(implAddr, chainId, signal, etherscanKey);
+        if (implInfo?.abi) {
+          abi = abi ? [...abi, ...implInfo.abi] : implInfo.abi;
+        }
+      }
+
+      if (abi || name) {
+        const info: ContractInfo = { name, abi };
+        cache.set(cacheKey, info);
+        return info;
+      }
+    }
+  } catch (err) {
+    if (err instanceof Error && err.name === "AbortError") return null;
+    logger.debug("Sourcify lookup failed for", address, err);
+  }
+
+  // ── Etherscan fallback ────────────────────────────────────────────────────
+  if (etherscanKey) {
+    try {
+      const url = `https://api.etherscan.io/v2/api?chainid=${chainId}&module=contract&action=getsourcecode&address=${address}&apikey=${etherscanKey}`;
+      const res = await fetch(url, { signal });
+      const json = await res.json();
+      if (
+        json.status === "1" &&
+        Array.isArray(json.result) &&
+        json.result[0]?.ABI &&
+        json.result[0].ABI !== "Contract source code not verified"
+      ) {
+        const r = json.result[0];
+        const abi = JSON.parse(r.ABI);
+        const info: ContractInfo = { name: r.ContractName || undefined, abi };
+        cache.set(cacheKey, info);
+        return info;
+      }
+    } catch (err) {
+      if (err instanceof Error && err.name === "AbortError") return null;
+      logger.debug("Etherscan lookup failed for", address, err);
+    }
+  }
+
+  cache.set(cacheKey, null);
+  return null;
+}
+
+/**
+ * Fetch contract info for multiple addresses in parallel.
+ * Returns a map of lowercased address → ContractInfo.
+ */
+export async function fetchContractInfoBatch(
+  addresses: string[],
+  chainId: number,
+  signal?: AbortSignal,
+  etherscanKey?: string,
+): Promise<Record<string, ContractInfo>> {
+  const results = await Promise.allSettled(
+    addresses.map((addr) => fetchContractInfo(addr, chainId, signal, etherscanKey)),
+  );
+
+  const map: Record<string, ContractInfo> = {};
+  for (let i = 0; i < addresses.length; i++) {
+    const result = results[i];
+    const addr = addresses[i]?.toLowerCase();
+    if (!addr) continue;
+    if (result?.status === "fulfilled" && result.value) {
+      map[addr] = result.value;
+    }
+  }
+  return map;
+}
diff --git a/src/utils/inputDecoder.ts b/src/utils/inputDecoder.ts
index 312f2357..f7757bd0 100644
--- a/src/utils/inputDecoder.ts
+++ b/src/utils/inputDecoder.ts
@@ -227,3 +227,41 @@ export function decodeEventWithAbi(
     };
   }
 }
+
+/**
+ * Try to decode hex input data as UTF-8 text.
+ * Returns the decoded string if ≥80% of characters are printable, null otherwise.
+ */
+export function tryDecodeUtf8(hex: string): string | null {
+  if (!hex || hex === "0x" || hex.length < 4) return null;
+
+  const cleaned = hex.startsWith("0x") ? hex.slice(2) : hex;
+  if (cleaned.length === 0 || cleaned.length % 2 !== 0) return null;
+
+  const bytes = new Uint8Array(cleaned.length / 2);
+  for (let i = 0; i < cleaned.length; i += 2) {
+    bytes[i / 2] = Number.parseInt(cleaned.substring(i, i + 2), 16);
+  }
+
+  const decoded = new TextDecoder("utf-8", { fatal: false }).decode(bytes);
+
+  // Check if mostly printable (letters, digits, punctuation, whitespace)
+  let printable = 0;
+  for (let i = 0; i < decoded.length; i++) {
+    const code = decoded.charCodeAt(i);
+    if (
+      (code >= 0x20 && code <= 0x7e) || // ASCII printable
+      code === 0x09 || // tab
+      code === 0x0a || // newline
+      code === 0x0d || // carriage return
+      code >= 0x80 // multibyte (accented chars, CJK, emoji, etc.)
+    ) {
+      printable++;
+    }
+  }
+
+  const ratio = printable / decoded.length;
+  if (ratio < 0.8) return null;
+
+  return decoded;
+}
diff --git a/vite.config.ts b/vite.config.ts
index 38fa1a12..7ec37b31 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -58,6 +58,9 @@ export default defineConfig({
     "process.env.REACT_APP_OPENSCAN_NETWORKS": JSON.stringify(
       process.env.REACT_APP_OPENSCAN_NETWORKS || ""
     ),
+    "process.env.REACT_APP_OPENSCAN_GROQ_AI_URL": JSON.stringify(
+      process.env.REACT_APP_OPENSCAN_GROQ_AI_URL || "https://openscan-groq-ai-proxy.openscan.workers.dev"
+    ),
     "import.meta.env.VITE_ENVIRONMENT": JSON.stringify(
       process.env.NODE_ENV || "development"
     ),
diff --git a/worker/package.json b/worker/package.json
new file mode 100644
index 00000000..c691d553
--- /dev/null
+++ b/worker/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "openscan-groq-ai-proxy",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "wrangler dev",
+    "deploy": "wrangler deploy",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "hono": "^4.7.0"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20250109.0",
+    "typescript": "^5.7.0",
+    "wrangler": "^4.72.0"
+  }
+}
diff --git a/worker/src/index.ts b/worker/src/index.ts
new file mode 100644
index 00000000..c180ba61
--- /dev/null
+++ b/worker/src/index.ts
@@ -0,0 +1,22 @@
+import { Hono } from "hono";
+import type { Env } from "./types";
+import { corsMiddleware } from "./middleware/cors";
+import { rateLimitMiddleware } from "./middleware/rateLimit";
+import { validateMiddleware } from "./middleware/validate";
+import { analyzeHandler } from "./routes/analyze";
+
+const app = new Hono<{ Bindings: Env }>();
+
+// Global CORS handling (including preflight)
+app.use("*", corsMiddleware);
+
+// POST /ai/analyze — rate limit, validate, then handle
+app.post("/ai/analyze", rateLimitMiddleware, validateMiddleware, analyzeHandler);
+
+// Health check
+app.get("/health", (c) => c.json({ status: "ok" }));
+
+// 404 for everything else
+app.all("*", (c) => c.json({ error: "Not found" }, 404));
+
+export default app;
diff --git a/worker/src/middleware/cors.ts b/worker/src/middleware/cors.ts
new file mode 100644
index 00000000..3f908012
--- /dev/null
+++ b/worker/src/middleware/cors.ts
@@ -0,0 +1,57 @@
+import type { Context, Next } from "hono";
+import type { Env } from "../types";
+
+/**
+ * Check if an origin is allowed.
+ * Entries starting with "*" are suffix patterns on the hostname — e.g.
+ * "*--openscan.netlify.app" matches "https://pr-306--openscan.netlify.app".
+ * All other entries are exact origin matches.
+ */
+function isOriginAllowed(origin: string, allowed: string[]): boolean {
+  for (const entry of allowed) {
+    if (entry.startsWith("*")) {
+      const suffix = entry.slice(1); // e.g. "--openscan.netlify.app"
+      try {
+        const { hostname } = new URL(origin);
+        if (hostname.endsWith(suffix)) {
+          return true;
+        }
+      } catch {
+        continue;
+      }
+    } else if (origin === entry) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export async function corsMiddleware(c: Context<{ Bindings: Env }>, next: Next) {
+  const origin = c.req.header("Origin") ?? "";
+  const allowed = c.env.ALLOWED_ORIGINS.split(",").map((o) => o.trim());
+
+  if (c.req.method === "OPTIONS") {
+    if (!isOriginAllowed(origin, allowed)) {
+      return c.text("Forbidden", 403);
+    }
+    return new Response(null, {
+      status: 204,
+      headers: {
+        "Access-Control-Allow-Origin": origin,
+        "Access-Control-Allow-Methods": "POST, OPTIONS",
+        "Access-Control-Allow-Headers": "Content-Type",
+        "Access-Control-Max-Age": "86400",
+      },
+    });
+  }
+
+  if (origin && !isOriginAllowed(origin, allowed)) {
+    return c.text("Forbidden", 403);
+  }
+
+  await next();
+
+  if (origin && isOriginAllowed(origin, allowed)) {
+    c.header("Access-Control-Allow-Origin", origin);
+  }
+}
diff --git a/worker/src/middleware/rateLimit.ts b/worker/src/middleware/rateLimit.ts
new file mode 100644
index 00000000..859c1889
--- /dev/null
+++ b/worker/src/middleware/rateLimit.ts
@@ -0,0 +1,53 @@
+import type { Context, Next } from "hono";
+import type { Env } from "../types";
+
+const WINDOW_MS = 60_000; // 1 minute
+const MAX_REQUESTS = 10;
+
+interface RateLimitEntry {
+  timestamps: number[];
+}
+
+// In-memory store — resets on worker cold start, which is acceptable
+// for a lightweight rate limiter. For stricter limits, use Durable Objects.
+const store = new Map<string, RateLimitEntry>();
+
+// Periodic cleanup to prevent unbounded growth
+let lastCleanup = Date.now();
+const CLEANUP_INTERVAL_MS = 300_000; // 5 minutes
+
+function cleanup(now: number) {
+  if (now - lastCleanup < CLEANUP_INTERVAL_MS) return;
+  lastCleanup = now;
+  for (const [key, entry] of store) {
+    if (entry.timestamps.every((ts) => now - ts > WINDOW_MS)) {
+      store.delete(key);
+    }
+  }
+}
+
+export async function rateLimitMiddleware(c: Context<{ Bindings: Env }>, next: Next) {
+  const ip = c.req.header("CF-Connecting-IP") ?? c.req.header("X-Forwarded-For") ?? "unknown";
+  const now = Date.now();
+
+  cleanup(now);
+
+  let entry = store.get(ip);
+  if (!entry) {
+    entry = { timestamps: [] };
+    store.set(ip, entry);
+  }
+
+  // Sliding window: keep only timestamps within the window
+  entry.timestamps = entry.timestamps.filter((ts) => now - ts < WINDOW_MS);
+
+  if (entry.timestamps.length >= MAX_REQUESTS) {
+    const oldestInWindow = entry.timestamps[0]!;
+    const retryAfterSec = Math.ceil((WINDOW_MS - (now - oldestInWindow)) / 1000);
+    c.header("Retry-After", String(retryAfterSec));
+    return c.json({ error: "Rate limit exceeded. Try again later." }, 429);
+  }
+
+  entry.timestamps.push(now);
+  await next();
+}
diff --git a/worker/src/middleware/validate.ts b/worker/src/middleware/validate.ts
new file mode 100644
index 00000000..69d7a0d8
--- /dev/null
+++ b/worker/src/middleware/validate.ts
@@ -0,0 +1,41 @@
+import type { Context, Next } from "hono";
+import { type AnalyzeRequestBody, VALID_ANALYSIS_TYPES, type Env } from "../types";
+
+const MAX_BODY_SIZE = 32 * 1024; // 32 KB
+
+export async function validateMiddleware(c: Context<{ Bindings: Env }>, next: Next) {
+  const contentLength = c.req.header("Content-Length");
+  if (contentLength && Number.parseInt(contentLength, 10) > MAX_BODY_SIZE) {
+    return c.json({ error: "Request body too large" }, 413);
+  }
+
+  let body: AnalyzeRequestBody;
+  try {
+    body = await c.req.json<AnalyzeRequestBody>();
+  } catch {
+    return c.json({ error: "Invalid JSON" }, 400);
+  }
+
+  if (!body.type || !VALID_ANALYSIS_TYPES.includes(body.type)) {
+    return c.json(
+      { error: `Invalid type. Must be one of: ${VALID_ANALYSIS_TYPES.join(", ")}` },
+      400,
+    );
+  }
+
+  if (!Array.isArray(body.messages) || body.messages.length !== 2) {
+    return c.json({ error: "messages must be an array of exactly 2 entries" }, 400);
+  }
+
+  const [systemMsg, userMsg] = body.messages;
+  if (systemMsg?.role !== "system" || typeof systemMsg?.content !== "string") {
+    return c.json({ error: "First message must have role 'system' with string content" }, 400);
+  }
+  if (userMsg?.role !== "user" || typeof userMsg?.content !== "string") {
+    return c.json({ error: "Second message must have role 'user' with string content" }, 400);
+  }
+
+  // Store validated body for route handler
+  c.set("validatedBody" as never, body as never);
+  await next();
+}
diff --git a/worker/src/routes/analyze.ts b/worker/src/routes/analyze.ts
new file mode 100644
index 00000000..bbd3fe7d
--- /dev/null
+++ b/worker/src/routes/analyze.ts
@@ -0,0 +1,46 @@
+import type { Context } from "hono";
+import type { AnalyzeRequestBody, Env } from "../types";
+
+const MAX_TOKENS = 4096;
+const GROQ_API_URL = "https://api.groq.com/openai/v1/chat/completions";
+
+export async function analyzeHandler(c: Context<{ Bindings: Env }>) {
+  const body = c.get("validatedBody" as never) as unknown as AnalyzeRequestBody;
+  const model = c.env.GROQ_MODEL || "groq/compound";
+
+  const groqBody = {
+    model,
+    messages: body.messages,
+    max_tokens: MAX_TOKENS,
+    temperature: 0,
+  };
+
+  try {
+    const response = await fetch(GROQ_API_URL, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${c.env.GROQ_API_KEY}`,
+      },
+      body: JSON.stringify(groqBody),
+    });
+
+    if (!response.ok) {
+      const status = response.status;
+      if (status === 429) {
+        const retryAfter = response.headers.get("Retry-After");
+        if (retryAfter) c.header("Retry-After", retryAfter);
+        return c.json({ error: "Groq rate limit exceeded" }, 429);
+      }
+      if (status === 401) {
+        return c.json({ error: "AI service configuration error" }, 500);
+      }
+      return c.json({ error: `AI service error (HTTP ${status})` }, 502);
+    }
+
+    const data = await response.json();
+    return c.json(data);
+  } catch {
+    return c.json({ error: "Failed to connect to AI service" }, 502);
+  }
+}
diff --git a/worker/src/types.ts b/worker/src/types.ts
new file mode 100644
index 00000000..4ac5db72
--- /dev/null
+++ b/worker/src/types.ts
@@ -0,0 +1,22 @@
+export const VALID_ANALYSIS_TYPES = [
+  "transaction",
+  "account",
+  "contract",
+  "block",
+  "bitcoin_transaction",
+  "bitcoin_block",
+  "bitcoin_address",
+] as const;
+
+export type AIAnalysisType = (typeof VALID_ANALYSIS_TYPES)[number];
+
+export interface AnalyzeRequestBody {
+  type: AIAnalysisType;
+  messages: Array<{ role: "system" | "user"; content: string }>;
+}
+
+export interface Env {
+  GROQ_API_KEY: string;
+  ALLOWED_ORIGINS: string;
+  GROQ_MODEL: string;
+}
diff --git a/worker/tsconfig.json b/worker/tsconfig.json
new file mode 100644
index 00000000..d8dd20b7
--- /dev/null
+++ b/worker/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022"],
+    "types": ["@cloudflare/workers-types"],
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": ["src/**/*.ts"]
+}
diff --git a/worker/wrangler.toml b/worker/wrangler.toml
new file mode 100644
index 00000000..70cf84c7
--- /dev/null
+++ b/worker/wrangler.toml
@@ -0,0 +1,10 @@
+name = "openscan-groq-ai-proxy"
+main = "src/index.ts"
+compatibility_date = "2024-12-01"
+
+[vars]
+ALLOWED_ORIGINS = "http://openscan.eth.link,https://openscan-explorer.github.io,https://openscan.netlify.app,*--openscan.netlify.app"
+GROQ_MODEL = "groq/compound"
+
+# Secret: GROQ_API_KEY — set via `wrangler secret put GROQ_API_KEY`
+