refactor: improve code formatting and organization in various components

- Adjusted formatting in SettingsPage for better readability.
- Streamlined import statements in browser-chat-header and browser-message-actions for consistency.
- Enhanced the MCP bridge panel layout for improved clarity.
- Refactored WebSocket bridge exports for better structure.

These changes enhance code maintainability and readability across the project.

packages/aipex-react/src/components/settings/index.tsx

@@ -852,7 +852,10 @@ export function SettingsPage({
               </TabsTrigger>
             )}
             {connectionContent && (
-              <TabsTrigger value="connection" className="flex items-center gap-2">
+              <TabsTrigger
+                value="connection"
+                className="flex items-center gap-2"
+              >
                 <Plug className="h-4 w-4" />
                 {language === "zh" ? "连接" : "Connection"}
               </TabsTrigger>

packages/aipex-react/src/hooks/use-chat-config.ts

@@ -83,18 +83,15 @@ export function useChatConfig(
   });
   const [isLoading, setIsLoading] = useState(autoLoad);
 
-  const applyStoredSettings = useCallback(
-    (stored: unknown) => {
-      setSettings((prev: AppSettings) => ({
-        ...prev,
-        ...(stored as Partial<AppSettings>),
-        customModels: (stored as AppSettings).customModels ?? [],
-        providerType: (stored as AppSettings).providerType ?? "openai",
-        providerEnabled: (stored as AppSettings).providerEnabled ?? false,
-      }));
-    },
-    [],
-  );
+  const applyStoredSettings = useCallback((stored: unknown) => {
+    setSettings((prev: AppSettings) => ({
+      ...prev,
+      ...(stored as Partial<AppSettings>),
+      customModels: (stored as AppSettings).customModels ?? [],
+      providerType: (stored as AppSettings).providerType ?? "openai",
+      providerEnabled: (stored as AppSettings).providerEnabled ?? false,
+    }));
+  }, []);
 
   const loadSettings = useCallback(async () => {
     setIsLoading(true);

packages/browser-ext/src/lib/browser-chat-header.tsx

@@ -10,12 +10,7 @@ import { getRuntime } from "@aipexstudio/aipex-react/lib/runtime";
 import { cn } from "@aipexstudio/aipex-react/lib/utils";
 import type { HeaderProps } from "@aipexstudio/aipex-react/types";
 import { conversationStorage } from "@aipexstudio/browser-runtime";
-import {
-  KeyboardIcon,
-  MicIcon,
-  PlusIcon,
-  SettingsIcon,
-} from "lucide-react";
+import { KeyboardIcon, MicIcon, PlusIcon, SettingsIcon } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { UserProfile, useAuth } from "../auth";
 import { ConversationHistory } from "./conversation-history";

packages/browser-ext/src/lib/browser-message-actions.tsx

@@ -9,19 +9,16 @@ import {
   Action,
   Actions,
 } from "@aipexstudio/aipex-react/components/ai-elements/actions";
-import { useChatContext } from "@aipexstudio/aipex-react/components/chatbot";
-import type { MessageActionsSlotProps } from "@aipexstudio/aipex-react/types";
 import {
-  CopyIcon,
-  PuzzleIcon,
-  RefreshCcwIcon,
-  Share2Icon,
-} from "lucide-react";
+  useChatContext,
+  useConfigContext,
+} from "@aipexstudio/aipex-react/components/chatbot";
+import type { MessageActionsSlotProps } from "@aipexstudio/aipex-react/types";
+import { CopyIcon, PuzzleIcon, RefreshCcwIcon, Share2Icon } from "lucide-react";
 import { useCallback, useState } from "react";
-import { useConfigContext } from "@aipexstudio/aipex-react/components/chatbot";
 import { useAuth } from "../auth";
-import { isByokConfigured } from "./ai-provider";
 import { shareConversation } from "../services/share-conversation";
+import { isByokConfigured } from "./ai-provider";
 
 export function BrowserMessageActions({
   onRegenerate,

packages/browser-ext/src/pages/common/app-root.tsx

@@ -29,12 +29,12 @@ import {
 import { BrowserChatHeader } from "../../lib/browser-chat-header";
 import { BrowserChatInputArea } from "../../lib/browser-chat-input-area";
 import { BrowserContextLoader } from "../../lib/browser-context-loader";
+import { BrowserMessageActions } from "../../lib/browser-message-actions";
 import { BrowserMessageList } from "../../lib/browser-message-list";
 import { ChatImagesListener } from "../../lib/chat-images-listener";
 import { InputModeProvider } from "../../lib/input-mode-context";
 import { InterventionModeProvider } from "../../lib/intervention-mode-context";
 import { InterventionUI } from "../../lib/intervention-ui";
-import { BrowserMessageActions } from "../../lib/browser-message-actions";
 import { UpdateBannerWrapper } from "../../lib/update-banner-wrapper";
 
 const i18nStorageAdapter = new ChromeStorageAdapter<Language>();

packages/browser-ext/src/pages/options/mcp-bridge-panel.tsx

@@ -3,8 +3,8 @@
  * UI for connecting/disconnecting the extension to the aipex-mcp-bridge.
  */
 
-import { useCallback, useEffect, useState } from "react";
 import type { WsMcpServerState } from "@aipexstudio/browser-runtime";
+import { useCallback, useEffect, useState } from "react";
 
 const DEFAULT_URL = "ws://localhost:9223";
 
@@ -74,9 +74,7 @@ export function McpBridgePanel() {
 
   return (
     <div className="rounded-lg border bg-card p-6 shadow-sm">
-      <h3 className="text-lg font-semibold mb-4">
-        MCP WebSocket Bridge
-      </h3>
+      <h3 className="text-lg font-semibold mb-4">MCP WebSocket Bridge</h3>
       <p className="text-sm text-muted-foreground mb-4">
         Connect to an external MCP client (e.g. Claude, Cursor) via the
         aipex-mcp-bridge. The bridge exposes AIPex browser tools to external AI
@@ -139,9 +137,9 @@ export function McpBridgePanel() {
       {/* Info */}
       <div className="mt-4 text-xs text-muted-foreground space-y-1">
         <p>
-          The bridge exposes <code>tools/list</code> and{" "}
-          <code>tools/call</code> over the MCP protocol, allowing external
-          agents to use AIPex browser automation tools.
+          The bridge exposes <code>tools/list</code> and <code>tools/call</code>{" "}
+          over the MCP protocol, allowing external agents to use AIPex browser
+          automation tools.
         </p>
         <p>Only localhost connections (127.0.0.1, ::1) are allowed.</p>
       </div>

packages/browser-runtime/src/ws-bridge/index.ts

@@ -1,13 +1,13 @@
 export {
-  wsMcpServer,
-  WsMcpServer,
   type ConnectionStatus,
+  WsMcpServer,
   type WsMcpServerState,
+  wsMcpServer,
 } from "./ws-mcp-server.js";
 export {
-  WebSocketClientTransport,
   type JSONRPCMessage,
+  type JSONRPCNotification,
   type JSONRPCRequest,
   type JSONRPCResponse,
-  type JSONRPCNotification,
+  WebSocketClientTransport,
 } from "./ws-transport.js";

packages/browser-runtime/src/ws-bridge/ws-mcp-server.ts

@@ -16,9 +16,9 @@
 import type { FunctionTool } from "@aipexstudio/aipex-core";
 import { allBrowserTools } from "../tools/index.js";
 import {
-  WebSocketClientTransport,
   type JSONRPCMessage,
   type JSONRPCRequest,
+  WebSocketClientTransport,
 } from "./ws-transport.js";
 
 export type ConnectionStatus =
@@ -46,7 +46,7 @@ const STORAGE_KEY_WS_URL = "ws-mcp-url";
 function getReconnectDelayMs(attempt: number): number {
   const withJitter = (base: number) =>
     Math.round(base * (0.7 + Math.random() * 0.6));
-  return withJitter(Math.min(500 * Math.pow(2, attempt), 10_000));
+  return withJitter(Math.min(500 * 2 ** attempt, 10_000));
 }
 
 /**
@@ -347,10 +347,7 @@ export class WsMcpServer {
 
     // FunctionTool.invoke(runContext, inputJsonString, details?)
     // We pass an empty object as RunContext since we're outside the agent loop.
-    return await (browserTool as any).invoke(
-      {} as any,
-      JSON.stringify(args),
-    );
+    return await (browserTool as any).invoke({} as any, JSON.stringify(args));
   }
 
   private async sendResult(