diff --git a/apps/web/src/browserPanelStore.ts b/apps/web/src/browserPanelStore.ts
new file mode 100644
index 00000000000..20c990a37f9
--- /dev/null
+++ b/apps/web/src/browserPanelStore.ts
@@ -0,0 +1,157 @@
+import type { ProjectId } from "@t3tools/contracts";
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+export interface BrowserTab {
+  id: string;
+  url: string;
+  title: string;
+}
+
+interface ProjectBrowserState {
+  tabs: BrowserTab[];
+  activeTabId: string;
+}
+
+const BROWSER_PANEL_STORAGE_KEY = "t3code:browser-panel:v1";
+
+let nextTabId = 1;
+function generateTabId(): string {
+  return `browser-tab-${Date.now()}-${nextTabId++}`;
+}
+
+const DEFAULT_PROJECT_BROWSER_STATE: ProjectBrowserState = {
+  tabs: [],
+  activeTabId: "",
+};
+
+function getProjectState(
+  stateByProjectId: Record<ProjectId, ProjectBrowserState>,
+  projectId: ProjectId,
+): ProjectBrowserState {
+  return stateByProjectId[projectId] ?? DEFAULT_PROJECT_BROWSER_STATE;
+}
+
+interface BrowserPanelStoreState {
+  browserStateByProjectId: Record<ProjectId, ProjectBrowserState>;
+  openUrlInProject: (projectId: ProjectId, url: string) => void;
+  addTab: (projectId: ProjectId, url?: string) => void;
+  closeTab: (projectId: ProjectId, tabId: string) => void;
+  setActiveTab: (projectId: ProjectId, tabId: string) => void;
+  navigateTab: (projectId: ProjectId, tabId: string, url: string) => void;
+  setTabTitle: (projectId: ProjectId, tabId: string, title: string) => void;
+}
+
+export const useBrowserPanelStore = create<BrowserPanelStoreState>()(
+  persist(
+    (set) => {
+      const updateProject = (
+        projectId: ProjectId,
+        updater: (state: ProjectBrowserState) => ProjectBrowserState,
+      ) => {
+        set((store) => {
+          const current = getProjectState(store.browserStateByProjectId, projectId);
+          const next = updater(current);
+          if (next === current) return store;
+          return {
+            browserStateByProjectId: {
+              ...store.browserStateByProjectId,
+              [projectId]: next,
+            },
+          };
+        });
+      };
+
+      return {
+        browserStateByProjectId: {},
+
+        openUrlInProject: (projectId, url) => {
+          updateProject(projectId, (state) => {
+            // If there are no tabs, create one with this URL
+            if (state.tabs.length === 0) {
+              const id = generateTabId();
+              return {
+                tabs: [{ id, url, title: url }],
+                activeTabId: id,
+              };
+            }
+            // Navigate the active tab to this URL
+            return {
+              ...state,
+              tabs: state.tabs.map((tab) =>
+                tab.id === state.activeTabId ? { ...tab, url, title: url } : tab,
+              ),
+            };
+          });
+        },
+
+        addTab: (projectId, url) => {
+          updateProject(projectId, (state) => {
+            const id = generateTabId();
+            const tabUrl = url ?? "about:blank";
+            return {
+              tabs: [...state.tabs, { id, url: tabUrl, title: tabUrl }],
+              activeTabId: id,
+            };
+          });
+        },
+
+        closeTab: (projectId, tabId) => {
+          updateProject(projectId, (state) => {
+            const remaining = state.tabs.filter((tab) => tab.id !== tabId);
+            if (remaining.length === 0) {
+              return DEFAULT_PROJECT_BROWSER_STATE;
+            }
+            const closedIndex = state.tabs.findIndex((tab) => tab.id === tabId);
+            const nextActiveId =
+              state.activeTabId === tabId
+                ? (remaining[Math.min(closedIndex, remaining.length - 1)]?.id ?? remaining[0]?.id ?? "")
+                : state.activeTabId;
+            return { tabs: remaining, activeTabId: nextActiveId };
+          });
+        },
+
+        setActiveTab: (projectId, tabId) => {
+          updateProject(projectId, (state) => {
+            if (state.activeTabId === tabId) return state;
+            if (!state.tabs.some((tab) => tab.id === tabId)) return state;
+            return { ...state, activeTabId: tabId };
+          });
+        },
+
+        navigateTab: (projectId, tabId, url) => {
+          updateProject(projectId, (state) => ({
+            ...state,
+            tabs: state.tabs.map((tab) =>
+              tab.id === tabId ? { ...tab, url, title: url } : tab,
+            ),
+          }));
+        },
+
+        setTabTitle: (projectId, tabId, title) => {
+          updateProject(projectId, (state) => ({
+            ...state,
+            tabs: state.tabs.map((tab) =>
+              tab.id === tabId ? { ...tab, title } : tab,
+            ),
+          }));
+        },
+      };
+    },
+    {
+      name: BROWSER_PANEL_STORAGE_KEY,
+      version: 1,
+      storage: createJSONStorage(() => localStorage),
+      partialize: (state) => ({
+        browserStateByProjectId: state.browserStateByProjectId,
+      }),
+    },
+  ),
+);
+
+export function selectProjectBrowserState(
+  browserStateByProjectId: Record<ProjectId, ProjectBrowserState>,
+  projectId: ProjectId,
+): ProjectBrowserState {
+  return browserStateByProjectId[projectId] ?? DEFAULT_PROJECT_BROWSER_STATE;
+}
diff --git a/apps/web/src/components/BrowserPanel.tsx b/apps/web/src/components/BrowserPanel.tsx
new file mode 100644
index 00000000000..00e274cc9de
--- /dev/null
+++ b/apps/web/src/components/BrowserPanel.tsx
@@ -0,0 +1,260 @@
+import type { ProjectId } from "@t3tools/contracts";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ExternalLinkIcon,
+  PlusIcon,
+  RefreshCwIcon,
+  XIcon,
+} from "lucide-react";
+import { memo, useCallback, useRef, useState, type KeyboardEvent } from "react";
+import {
+  useBrowserPanelStore,
+  selectProjectBrowserState,
+  type BrowserTab,
+} from "../browserPanelStore";
+import { cn } from "~/lib/utils";
+import { readNativeApi } from "~/nativeApi";
+
+interface BrowserPanelProps {
+  projectId: ProjectId;
+}
+
+function BrowserTabButton({
+  tab,
+  isActive,
+  onSelect,
+  onClose,
+}: {
+  tab: BrowserTab;
+  isActive: boolean;
+  onSelect: () => void;
+  onClose: () => void;
+}) {
+  const displayTitle = tab.title || tab.url || "New Tab";
+  const shortTitle = displayTitle.length > 24 ? `${displayTitle.slice(0, 24)}...` : displayTitle;
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "flex min-w-0 max-w-[160px] shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs transition-colors",
+        isActive
+          ? "bg-accent text-accent-foreground"
+          : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+      )}
+      onClick={onSelect}
+      title={tab.url}
+    >
+      <span className="min-w-0 truncate">{shortTitle}</span>
+      <button
+        type="button"
+        className="ml-0.5 shrink-0 rounded-sm p-0.5 opacity-60 hover:bg-background/50 hover:opacity-100"
+        onClick={(e) => {
+          e.stopPropagation();
+          onClose();
+        }}
+        aria-label="Close tab"
+      >
+        <XIcon className="size-2.5" />
+      </button>
+    </button>
+  );
+}
+
+function BrowserUrlBar({
+  url,
+  onNavigate,
+  onOpenExternal,
+  iframeRef,
+}: {
+  url: string;
+  onNavigate: (url: string) => void;
+  onOpenExternal: () => void;
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+}) {
+  const [inputValue, setInputValue] = useState(url);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Keep input in sync when url prop changes (tab switch, programmatic nav)
+  const lastUrlRef = useRef(url);
+  if (url !== lastUrlRef.current) {
+    lastUrlRef.current = url;
+    setInputValue(url);
+  }
+
+  const handleSubmit = useCallback(() => {
+    let normalized = inputValue.trim();
+    if (normalized.length === 0) return;
+    if (!/^https?:\/\//i.test(normalized)) {
+      normalized = `http://${normalized}`;
+    }
+    onNavigate(normalized);
+  }, [inputValue, onNavigate]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit],
+  );
+
+  const handleRefresh = useCallback(() => {
+    const iframe = iframeRef.current;
+    if (iframe) {
+      iframe.src = iframe.src;
+    }
+  }, [iframeRef]);
+
+  return (
+    <div className="flex items-center gap-1 border-b border-border px-2 py-1">
+      <button
+        type="button"
+        className="shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+        onClick={handleRefresh}
+        aria-label="Refresh"
+      >
+        <RefreshCwIcon className="size-3" />
+      </button>
+      <input
+        ref={inputRef}
+        type="text"
+        className="min-w-0 flex-1 rounded bg-muted/50 px-2 py-0.5 text-xs text-foreground outline-none ring-1 ring-border focus:ring-ring"
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleSubmit}
+        placeholder="Enter URL..."
+        spellCheck={false}
+      />
+      <button
+        type="button"
+        className="shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+        onClick={onOpenExternal}
+        aria-label="Open in external browser"
+        title="Open in external browser"
+      >
+        <ExternalLinkIcon className="size-3" />
+      </button>
+    </div>
+  );
+}
+
+const BrowserPanel = memo(function BrowserPanel({ projectId }: BrowserPanelProps) {
+  const browserState = useBrowserPanelStore((store) =>
+    selectProjectBrowserState(store.browserStateByProjectId, projectId),
+  );
+  const addTab = useBrowserPanelStore((store) => store.addTab);
+  const closeTab = useBrowserPanelStore((store) => store.closeTab);
+  const setActiveTab = useBrowserPanelStore((store) => store.setActiveTab);
+  const navigateTab = useBrowserPanelStore((store) => store.navigateTab);
+
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const activeTab = browserState.tabs.find((tab) => tab.id === browserState.activeTabId) ?? null;
+
+  const handleNavigate = useCallback(
+    (url: string) => {
+      if (activeTab) {
+        navigateTab(projectId, activeTab.id, url);
+      } else {
+        addTab(projectId, url);
+      }
+    },
+    [activeTab, addTab, navigateTab, projectId],
+  );
+
+  const handleOpenExternal = useCallback(() => {
+    if (!activeTab) return;
+    const api = readNativeApi();
+    if (!api) return;
+    void api.shell.openExternal(activeTab.url).catch(() => undefined);
+  }, [activeTab]);
+
+  if (browserState.tabs.length === 0) {
+    return (
+      <div className="flex h-full flex-col bg-background">
+        <div className="flex items-center gap-1 border-b border-border px-2 py-1.5">
+          <span className="text-xs font-medium text-muted-foreground">Browser</span>
+          <button
+            type="button"
+            className="ml-auto shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+            onClick={() => addTab(projectId, "")}
+            aria-label="New tab"
+          >
+            <PlusIcon className="size-3" />
+          </button>
+        </div>
+        <div className="flex flex-1 flex-col items-center justify-center gap-2 text-muted-foreground">
+          <p className="text-sm">No browser tabs open</p>
+          <button
+            type="button"
+            className="rounded-md border border-border px-3 py-1.5 text-xs hover:bg-accent"
+            onClick={() => addTab(projectId, "")}
+          >
+            Open a new tab
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col bg-background">
+      {/* Tab bar */}
+      <div className="flex items-center gap-0.5 border-b border-border px-1 py-1">
+        <div className="flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto">
+          {browserState.tabs.map((tab) => (
+            <BrowserTabButton
+              key={tab.id}
+              tab={tab}
+              isActive={tab.id === browserState.activeTabId}
+              onSelect={() => setActiveTab(projectId, tab.id)}
+              onClose={() => closeTab(projectId, tab.id)}
+            />
+          ))}
+        </div>
+        <button
+          type="button"
+          className="shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+          onClick={() => addTab(projectId, "")}
+          aria-label="New tab"
+        >
+          <PlusIcon className="size-3" />
+        </button>
+      </div>
+
+      {/* URL bar */}
+      {activeTab && (
+        <BrowserUrlBar
+          url={activeTab.url}
+          onNavigate={handleNavigate}
+          onOpenExternal={handleOpenExternal}
+          iframeRef={iframeRef}
+        />
+      )}
+
+      {/* iframe area */}
+      <div className="relative min-h-0 flex-1">
+        {browserState.tabs.map((tab) => (
+          <iframe
+            key={tab.id}
+            ref={tab.id === browserState.activeTabId ? iframeRef : undefined}
+            src={tab.url || undefined}
+            title={tab.title || tab.url}
+            className={cn(
+              "absolute inset-0 h-full w-full border-none bg-white",
+              tab.id === browserState.activeTabId ? "block" : "hidden",
+            )}
+            sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals"
+          />
+        ))}
+      </div>
+    </div>
+  );
+});
+
+export default BrowserPanel;
diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index fbc887bf62f..e4af7f84f19 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -88,6 +88,7 @@ import { useTheme } from "../hooks/useTheme";
 import { useTurnDiffSummaries } from "../hooks/useTurnDiffSummaries";
 import BranchToolbar from "./BranchToolbar";
 import { resolveShortcutCommand, shortcutLabelForCommand } from "../keybindings";
+import { useBrowserPanelStore } from "../browserPanelStore";
 import PlanSidebar from "./PlanSidebar";
 import ThreadTerminalDrawer from "./ThreadTerminalDrawer";
 import {
@@ -1158,6 +1159,14 @@ export default function ChatView({ threadId }: ChatViewProps) {
     () => shortcutLabelForCommand(keybindings, "diff.toggle"),
     [keybindings],
   );
+  const browserPanelShortcutLabel = useMemo(
+    () => shortcutLabelForCommand(keybindings, "browser.toggle"),
+    [keybindings],
+  );
+  const rightPanelTab = rawSearch.rpt ?? "diff";
+  const browserOpen = diffOpen && rightPanelTab === "browser";
+  const openUrlInBrowserStore = useBrowserPanelStore((store) => store.openUrlInProject);
+
   const onToggleDiff = useCallback(() => {
     void navigate({
       to: "/$threadId",
@@ -1165,10 +1174,47 @@ export default function ChatView({ threadId }: ChatViewProps) {
       replace: true,
       search: (previous) => {
         const rest = stripDiffSearchParams(previous);
-        return diffOpen ? { ...rest, diff: undefined } : { ...rest, diff: "1" };
+        if (diffOpen && rightPanelTab === "diff") {
+          return { ...rest, diff: undefined };
+        }
+        return { ...rest, diff: "1", rpt: "diff" };
+      },
+    });
+  }, [diffOpen, rightPanelTab, navigate, threadId]);
+
+  const onToggleBrowser = useCallback(() => {
+    void navigate({
+      to: "/$threadId",
+      params: { threadId },
+      replace: true,
+      search: (previous) => {
+        const rest = stripDiffSearchParams(previous);
+        if (diffOpen && rightPanelTab === "browser") {
+          return { ...rest, diff: undefined };
+        }
+        return { ...rest, diff: "1", rpt: "browser" };
       },
     });
-  }, [diffOpen, navigate, threadId]);
+  }, [diffOpen, rightPanelTab, navigate, threadId]);
+
+  const onOpenUrlInBrowser = useCallback(
+    (url: string) => {
+      const projectId = activeProject?.id;
+      if (!projectId) return;
+      openUrlInBrowserStore(projectId, url);
+      void navigate({
+        to: "/$threadId",
+        params: { threadId },
+        replace: true,
+        search: (previous) => ({
+          ...previous,
+          diff: "1",
+          rpt: "browser",
+        }),
+      });
+    },
+    [activeProject?.id, openUrlInBrowserStore, navigate, threadId],
+  );
 
   const envLocked = Boolean(
     activeThread &&
@@ -2188,6 +2234,13 @@ export default function ChatView({ threadId }: ChatViewProps) {
         return;
       }
 
+      if (command === "browser.toggle") {
+        event.preventDefault();
+        event.stopPropagation();
+        onToggleBrowser();
+        return;
+      }
+
       const scriptId = projectScriptIdFromCommand(command);
       if (!scriptId || !activeProject) return;
       const script = activeProject.scripts.find((entry) => entry.id === scriptId);
@@ -2210,6 +2263,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
     splitTerminal,
     keybindings,
     onToggleDiff,
+    onToggleBrowser,
     toggleTerminalVisibility,
   ]);
 
@@ -3508,6 +3562,8 @@ export default function ChatView({ threadId }: ChatViewProps) {
           diffToggleShortcutLabel={diffPanelShortcutLabel}
           gitCwd={gitCwd}
           diffOpen={diffOpen}
+          browserOpen={browserOpen}
+          browserToggleShortcutLabel={browserPanelShortcutLabel}
           onRunProjectScript={(script) => {
             void runProjectScript(script);
           }}
@@ -3516,6 +3572,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
           onDeleteProjectScript={deleteProjectScript}
           onToggleTerminal={toggleTerminalVisibility}
           onToggleDiff={onToggleDiff}
+          onToggleBrowser={onToggleBrowser}
         />
       </header>
 
@@ -4159,6 +4216,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
             onCloseTerminal={closeTerminal}
             onHeightChange={setTerminalHeight}
             onAddTerminalContext={addTerminalContextToDraft}
+            onOpenUrlInBrowser={onOpenUrlInBrowser}
           />
         );
       })()}
diff --git a/apps/web/src/components/RightPanelTabs.tsx b/apps/web/src/components/RightPanelTabs.tsx
new file mode 100644
index 00000000000..f19b80ef20e
--- /dev/null
+++ b/apps/web/src/components/RightPanelTabs.tsx
@@ -0,0 +1,103 @@
+import type { ProjectId } from "@t3tools/contracts";
+import { Suspense, lazy, type ReactNode } from "react";
+import { cn } from "~/lib/utils";
+import type { RightPanelTab } from "../diffRouteSearch";
+import type { DiffPanelMode } from "./DiffPanelShell";
+import { DiffPanelHeaderSkeleton, DiffPanelLoadingState, DiffPanelShell } from "./DiffPanelShell";
+import { DiffWorkerPoolProvider } from "./DiffWorkerPoolProvider";
+
+const DiffPanel = lazy(() => import("./DiffPanel"));
+const BrowserPanel = lazy(() => import("./BrowserPanel"));
+
+function DiffLoadingFallback({ mode }: { mode: DiffPanelMode }) {
+  return (
+    <DiffPanelShell mode={mode} header={<DiffPanelHeaderSkeleton />}>
+      <DiffPanelLoadingState label="Loading diff viewer..." />
+    </DiffPanelShell>
+  );
+}
+
+function BrowserLoadingFallback() {
+  return (
+    <div className="flex h-full items-center justify-center text-muted-foreground">
+      <p className="text-sm">Loading browser...</p>
+    </div>
+  );
+}
+
+interface RightPanelTabsProps {
+  activeTab: RightPanelTab;
+  onTabChange: (tab: RightPanelTab) => void;
+  mode: DiffPanelMode;
+  projectId: ProjectId | null;
+  renderDiff: boolean;
+  renderBrowser: boolean;
+}
+
+export function RightPanelTabs({
+  activeTab,
+  onTabChange,
+  mode,
+  projectId,
+  renderDiff,
+  renderBrowser,
+}: RightPanelTabsProps) {
+  return (
+    <div className="flex h-full flex-col">
+      {/* Tab switcher */}
+      <div className="flex shrink-0 items-center gap-0.5 border-b border-border px-2 py-1">
+        <TabButton active={activeTab === "diff"} onClick={() => onTabChange("diff")}>
+          Diff
+        </TabButton>
+        <TabButton active={activeTab === "browser"} onClick={() => onTabChange("browser")}>
+          Browser
+        </TabButton>
+      </div>
+
+      {/* Content */}
+      <div className="relative min-h-0 flex-1">
+        <div className={cn("absolute inset-0", activeTab === "diff" ? "block" : "hidden")}>
+          {renderDiff ? (
+            <DiffWorkerPoolProvider>
+              <Suspense fallback={<DiffLoadingFallback mode={mode} />}>
+                <DiffPanel mode={mode} />
+              </Suspense>
+            </DiffWorkerPoolProvider>
+          ) : null}
+        </div>
+        <div className={cn("absolute inset-0", activeTab === "browser" ? "block" : "hidden")}>
+          {renderBrowser && projectId ? (
+            <Suspense fallback={<BrowserLoadingFallback />}>
+              <BrowserPanel projectId={projectId} />
+            </Suspense>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TabButton({
+  active,
+  onClick,
+  children,
+}: {
+  active: boolean;
+  onClick: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
+        active
+          ? "bg-accent text-accent-foreground"
+          : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/apps/web/src/components/ThreadTerminalDrawer.tsx b/apps/web/src/components/ThreadTerminalDrawer.tsx
index 1bdbfb6ad60..0e1aef37bcc 100644
--- a/apps/web/src/components/ThreadTerminalDrawer.tsx
+++ b/apps/web/src/components/ThreadTerminalDrawer.tsx
@@ -188,6 +188,7 @@ interface TerminalViewportProps {
   runtimeEnv?: Record<string, string>;
   onSessionExited: () => void;
   onAddTerminalContext: (selection: TerminalContextSelection) => void;
+  onOpenUrlInBrowser?: ((url: string) => void) | undefined;
   focusRequestId: number;
   autoFocus: boolean;
   resizeEpoch: number;
@@ -202,6 +203,7 @@ function TerminalViewport({
   runtimeEnv,
   onSessionExited,
   onAddTerminalContext,
+  onOpenUrlInBrowser,
   focusRequestId,
   autoFocus,
   resizeEpoch,
@@ -393,12 +395,16 @@ function TerminalViewport({
               if (!latestTerminal) return;
 
               if (match.kind === "url") {
-                void api.shell.openExternal(match.text).catch((error) => {
-                  writeSystemMessage(
-                    latestTerminal,
-                    error instanceof Error ? error.message : "Unable to open link",
-                  );
-                });
+                if (onOpenUrlInBrowser) {
+                  onOpenUrlInBrowser(match.text);
+                } else {
+                  void api.shell.openExternal(match.text).catch((error) => {
+                    writeSystemMessage(
+                      latestTerminal,
+                      error instanceof Error ? error.message : "Unable to open link",
+                    );
+                  });
+                }
                 return;
               }
 
@@ -662,6 +668,7 @@ interface ThreadTerminalDrawerProps {
   onCloseTerminal: (terminalId: string) => void;
   onHeightChange: (height: number) => void;
   onAddTerminalContext: (selection: TerminalContextSelection) => void;
+  onOpenUrlInBrowser?: (url: string) => void;
 }
 
 interface TerminalActionButtonProps {
@@ -712,6 +719,7 @@ export default function ThreadTerminalDrawer({
   onCloseTerminal,
   onHeightChange,
   onAddTerminalContext,
+  onOpenUrlInBrowser,
 }: ThreadTerminalDrawerProps) {
   const [drawerHeight, setDrawerHeight] = useState(() => clampDrawerHeight(height));
   const [resizeEpoch, setResizeEpoch] = useState(0);
@@ -1013,6 +1021,7 @@ export default function ThreadTerminalDrawer({
                         {...(runtimeEnv ? { runtimeEnv } : {})}
                         onSessionExited={() => onCloseTerminal(terminalId)}
                         onAddTerminalContext={onAddTerminalContext}
+                        onOpenUrlInBrowser={onOpenUrlInBrowser}
                         focusRequestId={focusRequestId}
                         autoFocus={terminalId === resolvedActiveTerminalId}
                         resizeEpoch={resizeEpoch}
@@ -1033,6 +1042,7 @@ export default function ThreadTerminalDrawer({
                   {...(runtimeEnv ? { runtimeEnv } : {})}
                   onSessionExited={() => onCloseTerminal(resolvedActiveTerminalId)}
                   onAddTerminalContext={onAddTerminalContext}
+                  onOpenUrlInBrowser={onOpenUrlInBrowser}
                   focusRequestId={focusRequestId}
                   autoFocus
                   resizeEpoch={resizeEpoch}
diff --git a/apps/web/src/components/chat/ChatHeader.tsx b/apps/web/src/components/chat/ChatHeader.tsx
index 39a4f6eedc6..8635758eb31 100644
--- a/apps/web/src/components/chat/ChatHeader.tsx
+++ b/apps/web/src/components/chat/ChatHeader.tsx
@@ -6,7 +6,7 @@ import {
 } from "@t3tools/contracts";
 import { memo } from "react";
 import GitActionsControl from "../GitActionsControl";
-import { DiffIcon, TerminalSquareIcon } from "lucide-react";
+import { DiffIcon, GlobeIcon, TerminalSquareIcon } from "lucide-react";
 import { Badge } from "../ui/badge";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import ProjectScriptsControl, { type NewProjectScriptInput } from "../ProjectScriptsControl";
@@ -28,14 +28,17 @@ interface ChatHeaderProps {
   terminalOpen: boolean;
   terminalToggleShortcutLabel: string | null;
   diffToggleShortcutLabel: string | null;
+  browserToggleShortcutLabel: string | null;
   gitCwd: string | null;
   diffOpen: boolean;
+  browserOpen: boolean;
   onRunProjectScript: (script: ProjectScript) => void;
   onAddProjectScript: (input: NewProjectScriptInput) => Promise<void>;
   onUpdateProjectScript: (scriptId: string, input: NewProjectScriptInput) => Promise<void>;
   onDeleteProjectScript: (scriptId: string) => Promise<void>;
   onToggleTerminal: () => void;
   onToggleDiff: () => void;
+  onToggleBrowser: () => void;
 }
 
 export const ChatHeader = memo(function ChatHeader({
@@ -54,12 +57,15 @@ export const ChatHeader = memo(function ChatHeader({
   diffToggleShortcutLabel,
   gitCwd,
   diffOpen,
+  browserOpen,
+  browserToggleShortcutLabel,
   onRunProjectScript,
   onAddProjectScript,
   onUpdateProjectScript,
   onDeleteProjectScript,
   onToggleTerminal,
   onToggleDiff,
+  onToggleBrowser,
 }: ChatHeaderProps) {
   return (
     <div className="flex min-w-0 flex-1 items-center gap-2">
@@ -150,6 +156,30 @@ export const ChatHeader = memo(function ChatHeader({
                 : "Toggle diff panel"}
           </TooltipPopup>
         </Tooltip>
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <Toggle
+                className="shrink-0"
+                pressed={browserOpen}
+                onPressedChange={onToggleBrowser}
+                aria-label="Toggle browser panel"
+                variant="outline"
+                size="xs"
+                disabled={!activeProjectName}
+              >
+                <GlobeIcon className="size-3" />
+              </Toggle>
+            }
+          />
+          <TooltipPopup side="bottom">
+            {!activeProjectName
+              ? "Browser panel is unavailable until this thread has an active project."
+              : browserToggleShortcutLabel
+                ? `Toggle browser panel (${browserToggleShortcutLabel})`
+                : "Toggle browser panel"}
+          </TooltipPopup>
+        </Tooltip>
       </div>
     </div>
   );
diff --git a/apps/web/src/diffRouteSearch.ts b/apps/web/src/diffRouteSearch.ts
index d7de23e348b..258be0d5f05 100644
--- a/apps/web/src/diffRouteSearch.ts
+++ b/apps/web/src/diffRouteSearch.ts
@@ -1,15 +1,22 @@
 import { TurnId } from "@t3tools/contracts";
 
+export type RightPanelTab = "diff" | "browser";
+
 export interface DiffRouteSearch {
   diff?: "1" | undefined;
   diffTurnId?: TurnId | undefined;
   diffFilePath?: string | undefined;
+  rpt?: RightPanelTab | undefined;
 }
 
 function isDiffOpenValue(value: unknown): boolean {
   return value === "1" || value === 1 || value === true;
 }
 
+function isRightPanelTabValue(value: unknown): value is RightPanelTab {
+  return value === "diff" || value === "browser";
+}
+
 function normalizeSearchString(value: unknown): string | undefined {
   if (typeof value !== "string") {
     return undefined;
@@ -20,9 +27,9 @@ function normalizeSearchString(value: unknown): string | undefined {
 
 export function stripDiffSearchParams<T extends Record<string, unknown>>(
   params: T,
-): Omit<T, "diff" | "diffTurnId" | "diffFilePath"> {
-  const { diff: _diff, diffTurnId: _diffTurnId, diffFilePath: _diffFilePath, ...rest } = params;
-  return rest as Omit<T, "diff" | "diffTurnId" | "diffFilePath">;
+): Omit<T, "diff" | "diffTurnId" | "diffFilePath" | "rpt"> {
+  const { diff: _diff, diffTurnId: _diffTurnId, diffFilePath: _diffFilePath, rpt: _rpt, ...rest } = params;
+  return rest as Omit<T, "diff" | "diffTurnId" | "diffFilePath" | "rpt">;
 }
 
 export function parseDiffRouteSearch(search: Record<string, unknown>): DiffRouteSearch {
@@ -30,10 +37,12 @@ export function parseDiffRouteSearch(search: Record<string, unknown>): DiffRoute
   const diffTurnIdRaw = diff ? normalizeSearchString(search.diffTurnId) : undefined;
   const diffTurnId = diffTurnIdRaw ? TurnId.makeUnsafe(diffTurnIdRaw) : undefined;
   const diffFilePath = diff && diffTurnId ? normalizeSearchString(search.diffFilePath) : undefined;
+  const rpt = diff && isRightPanelTabValue(search.rpt) ? search.rpt : undefined;
 
   return {
     ...(diff ? { diff } : {}),
     ...(diffTurnId ? { diffTurnId } : {}),
     ...(diffFilePath ? { diffFilePath } : {}),
+    ...(rpt ? { rpt } : {}),
   };
 }
diff --git a/apps/web/src/routes/_chat.$threadId.tsx b/apps/web/src/routes/_chat.$threadId.tsx
index 8e7a5d3ba8d..21af387b7b2 100644
--- a/apps/web/src/routes/_chat.$threadId.tsx
+++ b/apps/web/src/routes/_chat.$threadId.tsx
@@ -1,18 +1,13 @@
-import { ThreadId } from "@t3tools/contracts";
+import { type ProjectId, ThreadId } from "@t3tools/contracts";
 import { createFileRoute, retainSearchParams, useNavigate } from "@tanstack/react-router";
-import { Suspense, lazy, type ReactNode, useCallback, useEffect, useState } from "react";
+import { type ReactNode, useCallback, useEffect, useState } from "react";
 
 import ChatView from "../components/ChatView";
-import { DiffWorkerPoolProvider } from "../components/DiffWorkerPoolProvider";
-import {
-  DiffPanelHeaderSkeleton,
-  DiffPanelLoadingState,
-  DiffPanelShell,
-  type DiffPanelMode,
-} from "../components/DiffPanelShell";
+import { RightPanelTabs } from "../components/RightPanelTabs";
 import { useComposerDraftStore } from "../composerDraftStore";
 import {
   type DiffRouteSearch,
+  type RightPanelTab,
   parseDiffRouteSearch,
   stripDiffSearchParams,
 } from "../diffRouteSearch";
@@ -21,24 +16,23 @@ import { useStore } from "../store";
 import { Sheet, SheetPopup } from "../components/ui/sheet";
 import { Sidebar, SidebarInset, SidebarProvider, SidebarRail } from "~/components/ui/sidebar";
 
-const DiffPanel = lazy(() => import("../components/DiffPanel"));
 const DIFF_INLINE_LAYOUT_MEDIA_QUERY = "(max-width: 1180px)";
 const DIFF_INLINE_SIDEBAR_WIDTH_STORAGE_KEY = "chat_diff_sidebar_width";
 const DIFF_INLINE_DEFAULT_WIDTH = "clamp(28rem,48vw,44rem)";
 const DIFF_INLINE_SIDEBAR_MIN_WIDTH = 26 * 16;
 const COMPOSER_COMPACT_MIN_LEFT_CONTROLS_WIDTH_PX = 208;
 
-const DiffPanelSheet = (props: {
+const RightPanelSheet = (props: {
   children: ReactNode;
-  diffOpen: boolean;
-  onCloseDiff: () => void;
+  open: boolean;
+  onClose: () => void;
 }) => {
   return (
     <Sheet
-      open={props.diffOpen}
+      open={props.open}
       onOpenChange={(open) => {
         if (!open) {
-          props.onCloseDiff();
+          props.onClose();
         }
       }}
     >
@@ -54,40 +48,26 @@ const DiffPanelSheet = (props: {
   );
 };
 
-const DiffLoadingFallback = (props: { mode: DiffPanelMode }) => {
-  return (
-    <DiffPanelShell mode={props.mode} header={<DiffPanelHeaderSkeleton />}>
-      <DiffPanelLoadingState label="Loading diff viewer..." />
-    </DiffPanelShell>
-  );
-};
-
-const LazyDiffPanel = (props: { mode: DiffPanelMode }) => {
-  return (
-    <DiffWorkerPoolProvider>
-      <Suspense fallback={<DiffLoadingFallback mode={props.mode} />}>
-        <DiffPanel mode={props.mode} />
-      </Suspense>
-    </DiffWorkerPoolProvider>
-  );
-};
-
-const DiffPanelInlineSidebar = (props: {
-  diffOpen: boolean;
-  onCloseDiff: () => void;
-  onOpenDiff: () => void;
-  renderDiffContent: boolean;
+const RightPanelInlineSidebar = (props: {
+  panelOpen: boolean;
+  onClose: () => void;
+  onOpen: () => void;
+  activeTab: RightPanelTab;
+  onTabChange: (tab: RightPanelTab) => void;
+  projectId: ProjectId | null;
+  renderDiff: boolean;
+  renderBrowser: boolean;
 }) => {
-  const { diffOpen, onCloseDiff, onOpenDiff, renderDiffContent } = props;
+  const { panelOpen, onClose, onOpen, activeTab, onTabChange, projectId, renderDiff, renderBrowser } = props;
   const onOpenChange = useCallback(
     (open: boolean) => {
       if (open) {
-        onOpenDiff();
+        onOpen();
         return;
       }
-      onCloseDiff();
+      onClose();
     },
-    [onCloseDiff, onOpenDiff],
+    [onClose, onOpen],
   );
   const shouldAcceptInlineSidebarWidth = useCallback(
     ({ nextWidth, wrapper }: { nextWidth: number; wrapper: HTMLElement }) => {
@@ -138,7 +118,7 @@ const DiffPanelInlineSidebar = (props: {
   return (
     <SidebarProvider
       defaultOpen={false}
-      open={diffOpen}
+      open={panelOpen}
       onOpenChange={onOpenChange}
       className="w-auto min-h-0 flex-none bg-transparent"
       style={{ "--sidebar-width": DIFF_INLINE_DEFAULT_WIDTH } as React.CSSProperties}
@@ -153,7 +133,14 @@ const DiffPanelInlineSidebar = (props: {
           storageKey: DIFF_INLINE_SIDEBAR_WIDTH_STORAGE_KEY,
         }}
       >
-        {renderDiffContent ? <LazyDiffPanel mode="sidebar" /> : null}
+        <RightPanelTabs
+          activeTab={activeTab}
+          onTabChange={onTabChange}
+          mode="sidebar"
+          projectId={projectId}
+          renderDiff={renderDiff}
+          renderBrowser={renderBrowser}
+        />
         <SidebarRail />
       </Sidebar>
     </SidebarProvider>
@@ -172,19 +159,28 @@ function ChatThreadRouteView() {
     Object.hasOwn(store.draftThreadsByThreadId, threadId),
   );
   const routeThreadExists = threadExists || draftThreadExists;
-  const diffOpen = search.diff === "1";
-  const shouldUseDiffSheet = useMediaQuery(DIFF_INLINE_LAYOUT_MEDIA_QUERY);
+  const panelOpen = search.diff === "1";
+  const activeRightPanelTab: RightPanelTab = search.rpt ?? "diff";
+  const shouldUseSheet = useMediaQuery(DIFF_INLINE_LAYOUT_MEDIA_QUERY);
+
+  // Resolve projectId for the active thread
+  const activeThread = useStore((store) => store.threads.find((t) => t.id === threadId));
+  const projectId: ProjectId | null = activeThread?.projectId ?? null;
+
   // TanStack Router keeps active route components mounted across param-only navigations
   // unless remountDeps are configured, so this stays warm across thread switches.
-  const [hasOpenedDiff, setHasOpenedDiff] = useState(diffOpen);
-  const closeDiff = useCallback(() => {
+  const [hasOpenedDiff, setHasOpenedDiff] = useState(panelOpen && activeRightPanelTab === "diff");
+  const [hasOpenedBrowser, setHasOpenedBrowser] = useState(panelOpen && activeRightPanelTab === "browser");
+
+  const closePanel = useCallback(() => {
     void navigate({
       to: "/$threadId",
       params: { threadId },
       search: { diff: undefined },
     });
   }, [navigate, threadId]);
-  const openDiff = useCallback(() => {
+
+  const openPanel = useCallback(() => {
     void navigate({
       to: "/$threadId",
       params: { threadId },
@@ -195,11 +191,30 @@ function ChatThreadRouteView() {
     });
   }, [navigate, threadId]);
 
+  const changeTab = useCallback(
+    (tab: RightPanelTab) => {
+      void navigate({
+        to: "/$threadId",
+        params: { threadId },
+        replace: true,
+        search: (previous) => ({
+          ...previous,
+          diff: "1",
+          rpt: tab,
+        }),
+      });
+    },
+    [navigate, threadId],
+  );
+
   useEffect(() => {
-    if (diffOpen) {
+    if (panelOpen && activeRightPanelTab === "diff") {
       setHasOpenedDiff(true);
     }
-  }, [diffOpen]);
+    if (panelOpen && activeRightPanelTab === "browser") {
+      setHasOpenedBrowser(true);
+    }
+  }, [panelOpen, activeRightPanelTab]);
 
   useEffect(() => {
     if (!threadsHydrated) {
@@ -216,19 +231,24 @@ function ChatThreadRouteView() {
     return null;
   }
 
-  const shouldRenderDiffContent = diffOpen || hasOpenedDiff;
+  const shouldRenderDiff = panelOpen || hasOpenedDiff;
+  const shouldRenderBrowser = panelOpen || hasOpenedBrowser;
 
-  if (!shouldUseDiffSheet) {
+  if (!shouldUseSheet) {
     return (
       <>
         <SidebarInset className="h-dvh  min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">
           <ChatView key={threadId} threadId={threadId} />
         </SidebarInset>
-        <DiffPanelInlineSidebar
-          diffOpen={diffOpen}
-          onCloseDiff={closeDiff}
-          onOpenDiff={openDiff}
-          renderDiffContent={shouldRenderDiffContent}
+        <RightPanelInlineSidebar
+          panelOpen={panelOpen}
+          onClose={closePanel}
+          onOpen={openPanel}
+          activeTab={activeRightPanelTab}
+          onTabChange={changeTab}
+          projectId={projectId}
+          renderDiff={shouldRenderDiff}
+          renderBrowser={shouldRenderBrowser}
         />
       </>
     );
@@ -239,9 +259,16 @@ function ChatThreadRouteView() {
       <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">
         <ChatView key={threadId} threadId={threadId} />
       </SidebarInset>
-      <DiffPanelSheet diffOpen={diffOpen} onCloseDiff={closeDiff}>
-        {shouldRenderDiffContent ? <LazyDiffPanel mode="sheet" /> : null}
-      </DiffPanelSheet>
+      <RightPanelSheet open={panelOpen} onClose={closePanel}>
+        <RightPanelTabs
+          activeTab={activeRightPanelTab}
+          onTabChange={changeTab}
+          mode="sheet"
+          projectId={projectId}
+          renderDiff={shouldRenderDiff}
+          renderBrowser={shouldRenderBrowser}
+        />
+      </RightPanelSheet>
     </>
   );
 }
@@ -249,7 +276,7 @@ function ChatThreadRouteView() {
 export const Route = createFileRoute("/_chat/$threadId")({
   validateSearch: (search) => parseDiffRouteSearch(search),
   search: {
-    middlewares: [retainSearchParams<DiffRouteSearch>(["diff"])],
+    middlewares: [retainSearchParams<DiffRouteSearch>(["diff", "rpt"])],
   },
   component: ChatThreadRouteView,
 });
diff --git a/packages/contracts/src/keybindings.ts b/packages/contracts/src/keybindings.ts
index 48821b18241..856d24b97e6 100644
--- a/packages/contracts/src/keybindings.ts
+++ b/packages/contracts/src/keybindings.ts
@@ -13,6 +13,7 @@ const STATIC_KEYBINDING_COMMANDS = [
   "terminal.new",
   "terminal.close",
   "diff.toggle",
+  "browser.toggle",
   "chat.new",
   "chat.newLocal",
   "editor.openFavorite",