diff --git a/.project-docs/30-worklog/tasks/20260930-preview-toolbar-tabs-56e98b2d.md b/.project-docs/30-worklog/tasks/20260930-preview-toolbar-tabs-56e98b2d.md
new file mode 100644
index 00000000..7b240d43
--- /dev/null
+++ b/.project-docs/30-worklog/tasks/20260930-preview-toolbar-tabs-56e98b2d.md
@@ -0,0 +1,54 @@
+# Task: Move work preview address toolbar beside workspace tabs
+
+## Identity
+
+- Task ID: 20260930-preview-toolbar-tabs-56e98b2d
+- Mode: Feature
+- Branch: codex/20260930-preview-toolbar-tabs-56e98b2d-preview-toolbar-tabs
+- Worktree: /Users/chillishark/Makelore 麦洛/.codex-worktrees/makelore/20260930-preview-toolbar-tabs-56e98b2d
+- Base commit: c55e9c718201eb8986a83e545e9b3ad7b110dd7e
+- Owner: codex
+- Status: Ready for Integration
+
+## Scope
+
+- Move the entire embedded work-preview address toolbar (back, forward, reload and editable URL) beside the Operation Chat / Work tabs, as explicitly confirmed by the user.
+
+## Intent And Constraints
+
+- Keep the current navigation, browser/view lifecycle, URL editing, empty-work behavior, native viewport bounds, teacher clearance and student drafts. Show the toolbar only in the Work tab; retain standalone developer-browser layout. Use existing visual styles, fitting one row when space permits and wrapping cleanly on narrow panes. No live-app update, main merge or push is requested in this turn.
+
+## Outcome
+
+- Embedded work previews render their existing navigation form through a portal into a stable slot beside the two workspace tabs. The form remains outside the tablist, retains existing handlers and address focus protection, and disappears when the Work tab is hidden. The old internal toolbar row is removed only when the external slot is available; standalone/fallback browsers remain unchanged. Responsive layout keeps all controls usable and wraps the address toolbar only when the pane is too narrow. README documents the new position.
+
+## Verification
+
+- Standard typecheck, production build and scoped ESLint passed. All 59 relevant unit tests passed: 42 coding-chat-panel/use-work-preview tests and 17 agent-browser-panel tests, including external-toolbar navigation, inline fallback and hide/reopen behavior.
+- All 17 browser layout scenarios were verified (14 passed in the full run; the final 3 passed after replacing obsolete internal-toolbar spacing assumptions with native viewport clearance assertions). Screenshots verified 375px wrapping, 768/1180px alignment and the expanded teacher pane. The fixture now includes a standards-mode doctype and production tab icons. Native pixels keep 8–10px below overlapping teacher speech, reclaim space for shorter messages, and restore the original 20px content padding when speech is dismissed or no longer overlaps.
+- The updated isolated Electron work-tab scenario passed: the complete toolbar shares the tab row, address arrow keys stay in the input, refresh reaches the existing navigation endpoint, keyboard tab switches preserve the draft, and the toolbar returns without duplicate controls. Test-only changes to generated Main were restored byte-for-byte; no running user app or data was changed.
+- Independent static review found no blocking lifecycle, focus, native bounds, tab semantics or teacher-clearance issues. Root reviewed the product/test diff and browser/Electron screenshots. Logs: `/tmp/preview-toolbar-tabs-final-typecheck.log`, `/tmp/preview-toolbar-tabs-final-lint.log`, `/tmp/preview-toolbar-tabs-build.log`, `/tmp/preview-toolbar-tabs-regression.log`, `/tmp/preview-toolbar-tabs-browser-full-56e98b2d.log`, `/tmp/preview-toolbar-tabs-clearance-56e98b2d.log`, `/tmp/preview-toolbar-tabs-electron-56e98b2d.log`.
+
+## Follow-ups
+
+- None recorded.
+
+## Promotion Candidates
+
+- None recorded.
+
+## Project Context Loaded
+
+- Task: 20260930-preview-toolbar-tabs-56e98b2d; feature mode; branch/worktree/base as Identity. Official start/status confirms ownership/reservation. App create_worktree is unavailable at this parent-directory chat root (Not a git repository); official skill isolation succeeded from primary main `c55e9c7`.
+- Read AGENTS, entry/memory index, task record and planning gate. Positioning, current-state, decision index, architecture and teacher ADR remain byte-identical to the previously loaded `7bce156` snapshot; domain, success criteria and evidence/reflection/commitment context remains applicable. README and actual source govern current presentation.
+- Project supports student creation through Main-owned project conversations and a shared Agent/browser work preview. This is a Renderer layout change, without API/model/data changes.
+- Read all 26 peer task Scope/Intent/Promotion sections. New teacher-reference-isolation peer protects selected source text/teacher handoff; leave those handlers intact. Empty-work peer requires local empty detection before conversation/model launch. No semantic conflict. Old unspecified child-language task is unrelated.
+- Browser ownership remains Main/project/generation-scoped. Tabs hide the existing view without destroying or navigating it; native viewport bounds and teacher-overlay clearance must remain correct. Standalone browser and diagnostics retain current behavior.
+- Files: AgentBrowserPanel, CodingChatPanel, classroom-workspace.css, focused browser/navigation tests and README. React portal can reuse the existing toolbar state/handlers in an external sibling slot outside the semantic tablist, avoiding duplicate controls or a second browser owner.
+- Gate: Passed.
+
+## Plan
+
+1. Add an optional embedded-toolbar target and a sibling slot on the tabs row; keep the existing form/navigation handlers and standalone fallback.
+2. Scope styles to the workspace row, keep tab/button semantics separate, and prevent overflow in narrow panes.
+3. Verify navigation/disabled states/tab lifecycle, real layout/native viewport behavior, relevant regressions, typecheck/lint/build; record and commit the isolated result.
diff --git a/README.md b/README.md
index 1ca2f79d..b6acd5d6 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@ Code 会话保存的模型被下架后，会提示重新选择可用模型；用
 Makelore 是一个面向软件、视觉创作、智能机器人与个人云智能体的 AI 桌面工作台。当前版本为 `2.0.0`，源码提供四个模块入口；云智能体需配套配置 WS/Yuxi 服务。模块入口页按 Agents、Code、Canvas、Robot 排列，统一采用横向插画卡片；Agents 标语为“打造你想象中的AI助手”。工作区左上角入口点击后返回模块入口页：
 
 - `Makelore Code｜AI 编程`：管理本地项目、项目智能体、对话、文件上下文、代码变更和运行时。
-  会话工作台采用浅蓝项目栏、彩色通用手柄图标与卡片选中态；中间对话/作品使用圆角标签，右侧智能体咨询使用奶油色标题区。沿用真实项目和会话入口、侧栏伸缩与账户菜单，样式只作用于 Code 会话工作台。可编辑的空对话在输入区上方的可用区域中央显示童趣欢迎语；「去作品广场逛逛」入口紧贴输入框上方，两者一起位于底部。老师介绍以固定宽度浮在右上角，不占用中间布局；欢迎语和底部输入区始终相对项目栏右侧的整个内容区域居中；小窗口的欢迎内容独立滚动；发送首条消息后收起欢迎区。侧栏保留「作品广场」入口，只有点击后才在系统浏览器打开公共广场，不请求、摘取或内嵌展示广场作品。打开广场保留当前项目、对话、草稿和附件，不自动发送消息；老师求助按钮保留临时应用的最新文案「帮我整体看🧠」。
+  会话工作台采用浅蓝项目栏、彩色通用手柄图标与卡片选中态；中间对话/作品使用圆角标签，作品预览的后退、前进、刷新与网址输入统一放在标签右侧；只在作品页显示，窄窗口自动换行。右侧智能体咨询使用奶油色标题区。沿用真实项目和会话入口、侧栏伸缩与账户菜单，样式只作用于 Code 会话工作台。可编辑的空对话在输入区上方的可用区域中央显示童趣欢迎语；「去作品广场逛逛」入口紧贴输入框上方，两者一起位于底部。老师介绍以固定宽度浮在右上角，不占用中间布局；欢迎语和底部输入区始终相对项目栏右侧的整个内容区域居中；小窗口的欢迎内容独立滚动；发送首条消息后收起欢迎区。侧栏保留「作品广场」入口，只有点击后才在系统浏览器打开公共广场，不请求、摘取或内嵌展示广场作品。打开广场保留当前项目、对话、草稿和附件，不自动发送消息；老师求助按钮保留临时应用的最新文案「帮我整体看🧠」。
 - `Makelore Agents｜AI 智能体`：配置个人云智能体并试聊，发布后正式对话、接入个人微信或创建应用 API Key。支持流式回复、审批、排队请求、附件与产物、自动任务和活动历史；重新进入时恢复最近智能体与对话，未确认操作可按原输入重试。聊天可提出日程建议，由创建者核对能力、时间和费用后启用。知识库上传、替换及导入本人会话附件后自动解析并建立索引；文档卡片区分排队、解析、索引、可用和失败，持续刷新已加载文档，失败可原地重试；零文本内容不会显示为可用，新文档可用后才移除被替换的旧文档。支持删除知识内容；个人 MCP 凭据、Skills、子智能体可自助管理。支持智能体和会话归档、发布版本比较及恢复为草稿。除知识库 embedding 向量化外，模型调用（包括知识处理触发的对话模型调用）仍按原规则由创建者个人词元点数支付，可按智能体设置每次任务和每日上限，费用按时间、来源、应用分页统计；embedding 向量化由平台承担，不计入用户用量、词元点数或智能体费用上限；应用调用者保有自己的内容空间。Main 管理云会话和本机文件，Renderer 通过 Host API 操作。配套服务接入见 [Yuxi MakeLore 说明](https://xerrors.github.io/Yuxi/advanced/makelore-agents.html)。 编辑采用全高桌面分栏，支持拖动调整与展开、独立滚动、小窗口配置/试用切换。首次创建按选用途、说要求、试一试引导，提供科学问答、故事、英语和笔记整理起点；回答方式可多选，特别要求直接编辑，仍以草稿的 system_prompt 保存。新助手预选云端目录的第一个可用模型并明确显示，可自行更换；已有助手不自动换模型。编辑区以“我的要求”和“高级设置”两个 Tab 切换，默认显示基础要求；高级设置包含能力、知识与限制，返回时保留上次分类，切换保留未保存的输入及当前试用。已开始使用的助手在顶部显示“修改已保存，尚未应用”或“已应用最新修改”，并提供显眼的“应用最新修改”按钮；保存只更新草稿，应用沿用同一发布操作，失败重试保留原操作身份。草稿明确保存（Ctrl/⌘+S），保存与切换页面保留当前试用及未发送文字；“保存并重新试用”使用最新保存的要求，保留上次试用供对比，并可复用上次问题，不自动发送。示例问题仅填入输入框；有运行、排队、审批或未确认操作时先处理当前试用。工具确认先展示实际操作说明与参数，完整技术详情可展开。确认“开始使用”会创建仅自己可用的发布版本并进入独立对话，微信渠道与应用接入仍单独配置。费用上限在限制中独立保存。Enter 发送、Shift+Enter 换行，F6 切换面板焦点、Esc 恢复分栏。
 
   云知识库的 embedding 模型只由平台管理员在 Yuxi 后台维护：在「智能体管理 → 模型供应商」启用供应商，按供应商要求填写有效的服务地址和 API Key，添加并启用 embedding 模型并填写实际向量维度；embedding 向量化费用由平台承担，不计入用户用量、词元点数或智能体费用上限；one-api 不参与 embedding 配置，Works Square 只负责其他应计费模型调用的创建者词元点数账本。客户端区分目录加载中、加载失败与无可用模型，空状态提供管理员配置说明；「刷新知识库与模型」保留未提交名称，未确认的创建请求沿用原操作身份。
diff --git a/src/pages/Chat/AgentBrowserPanel.tsx b/src/pages/Chat/AgentBrowserPanel.tsx
index 86fcd0c3..f2384c77 100644
--- a/src/pages/Chat/AgentBrowserPanel.tsx
+++ b/src/pages/Chat/AgentBrowserPanel.tsx
@@ -6,6 +6,7 @@ import {
   useState,
   type FormEvent,
 } from 'react';
+import { createPortal } from 'react-dom';
 import {
   ArrowLeft,
   ArrowRight,
@@ -46,6 +47,7 @@ export interface AgentBrowserPanelProps {
   open: boolean;
   onOpenChange(open: boolean): void;
   embedded?: boolean;
+  toolbarContainer?: HTMLElement | null;
   teacherBubble?: HTMLElement | null;
   teacherIntroduction?: HTMLElement | null;
   conversationId?: string | null;
@@ -133,6 +135,7 @@ export function AgentBrowserPanel({
   open,
   onOpenChange,
   embedded = false,
+  toolbarContainer,
   teacherBubble,
   teacherIntroduction,
   conversationId,
@@ -482,6 +485,37 @@ export function AgentBrowserPanel({
 
   if (!open) return null;
 
+  const toolbar = (
+    <form
+      data-testid="agent-browser-toolbar"
+      aria-label="网页导航"
+      className={cn(
+        'flex shrink-0 items-center gap-1',
+        embedded && toolbarContainer ? 'h-8 w-full min-w-0' : 'h-10 border-b border-border/70 px-2',
+      )}
+      onSubmit={handleOpenAddress}
+    >
+      <Button type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0 rounded-md" aria-label="后退" disabled={!snapshot?.canGoBack || busy} onClick={() => handleNavigate('back')}>
+        <ArrowLeft className="h-3.5 w-3.5" aria-hidden="true" />
+      </Button>
+      <Button type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0 rounded-md" aria-label="前进" disabled={!snapshot?.canGoForward || busy} onClick={() => handleNavigate('forward')}>
+        <ArrowRight className="h-3.5 w-3.5" aria-hidden="true" />
+      </Button>
+      <Button type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0 rounded-md" aria-label="刷新网页" disabled={!browserActive || busy} onClick={() => handleNavigate('reload')}>
+        <RefreshCw className={cn('h-3.5 w-3.5', busy && 'animate-spin')} aria-hidden="true" />
+      </Button>
+      <input
+        ref={addressInputRef}
+        value={address}
+        onChange={(event) => setAddress(event.target.value)}
+        aria-label="网页地址"
+        className="h-7 min-w-0 flex-1 rounded-lg border border-border/90 bg-surface-input px-2.5 text-[11px] font-medium outline-none focus:border-brand/40 focus:ring-2 focus:ring-brand/15"
+        placeholder={embedded ? '作品打开后会显示地址' : '输入 URL'}
+        spellCheck={false}
+      />
+    </form>
+  );
+
   return (
     <aside
       ref={panelRef}
@@ -506,26 +540,7 @@ export function AgentBrowserPanel({
         </Button>
       </div>}
 
-      <form className="flex h-10 shrink-0 items-center gap-1 border-b border-border/70 px-2" onSubmit={handleOpenAddress}>
-        <Button type="button" variant="ghost" size="icon" className="h-7 w-7 rounded-md" aria-label="后退" disabled={!snapshot?.canGoBack || busy} onClick={() => handleNavigate('back')}>
-          <ArrowLeft className="h-3.5 w-3.5" aria-hidden="true" />
-        </Button>
-        <Button type="button" variant="ghost" size="icon" className="h-7 w-7 rounded-md" aria-label="前进" disabled={!snapshot?.canGoForward || busy} onClick={() => handleNavigate('forward')}>
-          <ArrowRight className="h-3.5 w-3.5" aria-hidden="true" />
-        </Button>
-        <Button type="button" variant="ghost" size="icon" className="h-7 w-7 rounded-md" aria-label="刷新网页" disabled={!browserActive || busy} onClick={() => handleNavigate('reload')}>
-          <RefreshCw className={cn('h-3.5 w-3.5', busy && 'animate-spin')} aria-hidden="true" />
-        </Button>
-        <input
-          ref={addressInputRef}
-          value={address}
-          onChange={(event) => setAddress(event.target.value)}
-          aria-label="网页地址"
-          className="h-7 min-w-0 flex-1 rounded-lg border border-border/90 bg-surface-input px-2.5 text-[11px] font-medium outline-none focus:border-brand/40 focus:ring-2 focus:ring-brand/15"
-          placeholder={embedded ? '作品打开后会显示地址' : '输入 URL'}
-          spellCheck={false}
-        />
-      </form>
+      {embedded && toolbarContainer ? createPortal(toolbar, toolbarContainer) : toolbar}
 
       {error && !workEmpty ? (
         <p role="alert" className="shrink-0 border-b border-destructive/15 bg-destructive/5 px-3 py-2 text-xs text-destructive">
diff --git a/src/pages/Chat/CodingChatPanel.tsx b/src/pages/Chat/CodingChatPanel.tsx
index e7bc16cd..394e36d7 100644
--- a/src/pages/Chat/CodingChatPanel.tsx
+++ b/src/pages/Chat/CodingChatPanel.tsx
@@ -183,6 +183,7 @@ export function CodingChatPanel({
     Record<string, LocalComposerAttachment[]>
   >({});
   const [agentBrowserOpen, setAgentBrowserOpen] = useState(false);
+  const [browserToolbar, setBrowserToolbar] = useState<HTMLDivElement | null>(null);
   const [workRevision, setWorkRevision] = useState(0);
   const [readyWorkProjectId, setReadyWorkProjectId] = useState<string | null>(null);
   const recoveryFlight = useRef(false);
@@ -782,12 +783,16 @@ export function CodingChatPanel({
           teacherEntry={activeProject ? <TeacherCompanion companion={teacherCompanion} open={consultationOpen} onOpen={openTeacher} onToggle={toggleTeacher} bubbleRef={setTeacherBubble} introductionRef={setTeacherIntroduction} /> : undefined}
         />
 
-        <div className="classroom-tabs" role="tablist" aria-label="当前工作">
-          <button role="tab" id="classroom-chat-tab" aria-controls="classroom-chat-view" aria-selected={!agentBrowserOpen} tabIndex={!agentBrowserOpen ? 0 : -1} onClick={() => setAgentBrowserOpen(false)} onKeyDown={(event) => { if (event.key === 'ArrowRight') { setAgentBrowserOpen(true); document.getElementById('classroom-work-tab')?.focus(); } }}><MessageSquare className="h-3.5 w-3.5" />操作对话</button>
-          <button role="tab" id="classroom-work-tab" aria-controls="classroom-work-view" aria-selected={agentBrowserOpen} tabIndex={agentBrowserOpen ? 0 : -1} onClick={() => setAgentBrowserOpen(true)} onKeyDown={(event) => { if (event.key === 'ArrowLeft') { setAgentBrowserOpen(false); document.getElementById('classroom-chat-tab')?.focus(); } }}><Play className="h-3.5 w-3.5" />作品</button>
+        <div className="classroom-workspace-toolbar" data-testid="classroom-workspace-toolbar">
+          <div className="classroom-tabs" role="tablist" aria-label="当前工作">
+            <button role="tab" id="classroom-chat-tab" aria-controls="classroom-chat-view" aria-selected={!agentBrowserOpen} tabIndex={!agentBrowserOpen ? 0 : -1} onClick={() => setAgentBrowserOpen(false)} onKeyDown={(event) => { if (event.key === 'ArrowRight') { setAgentBrowserOpen(true); document.getElementById('classroom-work-tab')?.focus(); } }}><MessageSquare className="h-3.5 w-3.5" />操作对话</button>
+            <button role="tab" id="classroom-work-tab" aria-controls="classroom-work-view" aria-selected={agentBrowserOpen} tabIndex={agentBrowserOpen ? 0 : -1} onClick={() => setAgentBrowserOpen(true)} onKeyDown={(event) => { if (event.key === 'ArrowLeft') { setAgentBrowserOpen(false); document.getElementById('classroom-chat-tab')?.focus(); } }}><Play className="h-3.5 w-3.5" />作品</button>
+          </div>
+          <div className="classroom-browser-toolbar" ref={setBrowserToolbar} hidden={!agentBrowserOpen} />
         </div>
         <div id="classroom-work-view" role="tabpanel" aria-labelledby="classroom-work-tab" hidden={!agentBrowserOpen} className="classroom-work-view min-h-0 flex-1 flex-col p-5">
           <AgentBrowserPanel projectId={activeProject?.id ?? null} open={agentBrowserOpen} onOpenChange={setAgentBrowserOpen} embedded
+            toolbarContainer={browserToolbar}
             teacherBubble={teacherBubble}
             teacherIntroduction={teacherIntroduction}
             workRevision={workRevision}
diff --git a/src/pages/Chat/classroom-workspace.css b/src/pages/Chat/classroom-workspace.css
index 1aed527a..de9fc2a6 100644
--- a/src/pages/Chat/classroom-workspace.css
+++ b/src/pages/Chat/classroom-workspace.css
@@ -40,6 +40,9 @@
 [data-testid="sidebar"][data-classroom="true"] [data-testid="sidebar-member-menu-trigger"] { min-height: 42px; border: 1px solid #d9e3ee; border-radius: 11px; background: #fff; font-size: 12px; }
 .classroom-workspace [data-testid="coding-conversation-header"] { border-bottom-color: #e8edf3; background: #fff; color: #304968; }
 .classroom-tabs { display: flex; flex-shrink: 0; height: 46px; gap: 9px; padding: 6px 22px; border-bottom: 1px solid #e8edf3; }
+.classroom-workspace-toolbar { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; gap: 6px 12px; min-height: 46px; padding: 6px 22px; border-bottom: 1px solid #e8edf3; }
+.classroom-workspace-toolbar > .classroom-tabs { height: 32px; padding: 0; border-bottom: 0; }
+.classroom-browser-toolbar { flex: 1 1 220px; min-width: min(220px, 100%); }
 .classroom-tabs button { display: flex; align-items: center; gap: 7px; position: relative; padding: 0 12px; border: 1px solid transparent; border-radius: 9px; background: #f4f7fa; font-size: 12px; color: #62738b; }
 .classroom-tabs button:hover { background: #eaf1f8; }
 .classroom-tabs button[aria-selected="true"] { background: #eaf1fb; border-color: #ccdaeb; color: #36557b; box-shadow: 0 2px 0 #dce6f3; }
@@ -86,7 +89,7 @@
 .consultation-user { background: #eaf0e1; }
 .consultation-composer { border-color: #dce3d3; border-bottom-width: 3px; }
 .consultation-send { background: #536947; }
-@media (max-width: 1100px) { .classroom-tabs { padding-left: 18px; padding-right: 18px; } }
+@media (max-width: 1100px) { .classroom-tabs, .classroom-workspace-toolbar { padding-left: 18px; padding-right: 18px; } .classroom-workspace-toolbar > .classroom-tabs { padding: 0; } }
 @media (max-width: 900px) { .classroom-consultation-dock { position: absolute; inset: 0 0 0 auto; z-index: 45; max-width: 100%; box-shadow: -12px 0 36px #24311b0d; } .classroom-consultation-resizer { display: none; } }
 @media (max-width: 600px) { .classroom-consultation-dock { width: 100%!important; } .classroom-workspace [data-testid="coding-message-composer"] { width: calc(100% - 24px); } }
 @media (prefers-reduced-motion: reduce) { .classroom-workspace *, .consultation-pane * { scroll-behavior: auto!important; } }
diff --git a/tests/e2e/fixtures/teacher-preview-layout.tsx b/tests/e2e/fixtures/teacher-preview-layout.tsx
index e453b43b..1a52315f 100644
--- a/tests/e2e/fixtures/teacher-preview-layout.tsx
+++ b/tests/e2e/fixtures/teacher-preview-layout.tsx
@@ -1,5 +1,6 @@
 import { useState, type ComponentProps } from 'react';
 import { createRoot } from 'react-dom/client';
+import { MessageSquare, Play } from 'lucide-react';
 import { TeacherCompanion } from '../../../src/pages/Chat/TeacherCompanion';
 import { AgentBrowserPanel } from '../../../src/pages/Chat/AgentBrowserPanel';
 import '../../../src/styles/globals.css';
@@ -10,6 +11,8 @@ import '../../../src/pages/Chat/classroom-workspace.css';
 export function Layout() {
   const [bubble, setBubble] = useState<HTMLDivElement | null>(null);
   const [introduction, setIntroduction] = useState<HTMLDivElement | null>(null);
+  const [toolbarContainer, setToolbarContainer] = useState<HTMLDivElement | null>(null);
+  const [workOpen, setWorkOpen] = useState(true);
   const [visible, setVisible] = useState(!new URLSearchParams(location.search).has('quiet'));
   const [open, setOpen] = useState(false);
   const [width, setWidth] = useState(508);
@@ -56,10 +59,17 @@ export function Layout() {
     </header>
     <div className="relative flex min-h-0 flex-1" data-testid="coding-chat-panel" data-consultation-open={open}>
       <main className="flex min-w-0 flex-1 flex-col">
-        <div className="classroom-tabs" role="tablist"><button role="tab">操作对话</button><button role="tab" aria-selected="true">作品</button></div>
-        <div className="classroom-work-view flex min-h-0 flex-1 flex-col p-5" data-testid="work-view">
-          <AgentBrowserPanel projectId="layout-fixture" embedded open teacherBubble={bubble} teacherIntroduction={introduction} onOpenChange={() => {}} />
+        <div className="classroom-workspace-toolbar" data-testid="classroom-workspace-toolbar">
+          <div className="classroom-tabs" role="tablist" aria-label="当前工作">
+            <button role="tab" aria-selected={!workOpen} onClick={() => setWorkOpen(false)}><MessageSquare className="h-3.5 w-3.5" />操作对话</button>
+            <button role="tab" aria-selected={workOpen} onClick={() => setWorkOpen(true)}><Play className="h-3.5 w-3.5" />作品</button>
+          </div>
+          <div className="classroom-browser-toolbar" ref={setToolbarContainer} hidden={!workOpen} />
         </div>
+        <div hidden={!workOpen} className="classroom-work-view flex min-h-0 flex-1 flex-col p-5" data-testid="work-view">
+          <AgentBrowserPanel projectId="layout-fixture" embedded open={workOpen} toolbarContainer={toolbarContainer} teacherBubble={bubble} teacherIntroduction={introduction} onOpenChange={setWorkOpen} />
+        </div>
+        {!workOpen && <div className="min-h-0 flex-1 p-5">操作对话（布局测试）</div>}
       </main>
       {open && <aside id="coding-consultation-dock" className="classroom-consultation-dock consultation-pane shrink-0 border-l p-5" style={{ width }}>
         <p className="mb-8 text-sm">老师对话（布局测试）</p>
diff --git a/tests/e2e/pi-coding-first-chat.spec.ts b/tests/e2e/pi-coding-first-chat.spec.ts
index bce675de..797a2b0e 100644
--- a/tests/e2e/pi-coding-first-chat.spec.ts
+++ b/tests/e2e/pi-coding-first-chat.spec.ts
@@ -2566,6 +2566,29 @@ test('work tab prepares the page automatically and keeps the student draft throu
   await expect(page.getByRole('button', { name: '收起作品', exact: true })).toHaveCount(0);
   await expect(page.getByTestId('agent-browser-viewport')).toBeVisible();
   await expect(page.getByText('正在打开你的作品…', { exact: true })).toHaveCount(0);
+  const workspaceToolbar = page.getByTestId('classroom-workspace-toolbar');
+  const tabs = workspaceToolbar.getByRole('tablist', { name: '当前工作' });
+  const browserToolbar = page.getByTestId('agent-browser-toolbar');
+  const address = browserToolbar.getByRole('textbox', { name: '网页地址' });
+  const workTab = tabs.getByRole('tab', { name: '作品', exact: true });
+  const chatTab = tabs.getByRole('tab', { name: '操作对话', exact: true });
+  await expect(workspaceToolbar.getByTestId('agent-browser-toolbar')).toHaveCount(1);
+  await expect(browserToolbar).toHaveAccessibleName('网页导航');
+  await expect(tabs.getByTestId('agent-browser-toolbar')).toHaveCount(0);
+  await expect(page.getByTestId('agent-browser-panel').getByTestId('agent-browser-toolbar')).toHaveCount(0);
+  const [tabsBounds, toolbarBounds] = await Promise.all([tabs.boundingBox(), browserToolbar.boundingBox()]);
+  expect(tabsBounds).not.toBeNull();
+  expect(toolbarBounds).not.toBeNull();
+  expect(toolbarBounds!.x).toBeGreaterThanOrEqual(tabsBounds!.x + tabsBounds!.width);
+  expect(Math.abs(toolbarBounds!.y + toolbarBounds!.height / 2 - tabsBounds!.y - tabsBounds!.height / 2)).toBeLessThanOrEqual(1);
+  await address.press('ArrowLeft');
+  await expect(address).toBeFocused();
+  await expect(workTab).toHaveAttribute('aria-selected', 'true');
+  await browserToolbar.getByRole('button', { name: '刷新网页', exact: true }).click();
+  await expect.poll(async () => (await readState(electronApp)).captured.filter((item) => item.path === '/api/agent-browser/navigate' && item.body?.action === 'reload').length).toBe(1);
+  await expect(browserToolbar.getByRole('button', { name: '刷新网页', exact: true })).toBeEnabled();
+  await expect(address).toHaveValue('http://127.0.0.1:4173/');
+  await page.screenshot({ path: test.info().outputPath('work-toolbar-with-tabs.png') });
   // A manual address open must not permanently disable recovery checks.
   await page.getByRole('textbox', { name: '网页地址' }).fill('http://127.0.0.1:4173/');
   await page.getByRole('textbox', { name: '网页地址' }).press('Enter');
@@ -2586,8 +2609,17 @@ test('work tab prepares the page automatically and keeps the student draft throu
   await expect(page.getByRole('button', { name: '刷新网页', exact: true })).toBeEnabled();
   await expect(page.getByText('正在打开你的作品…', { exact: true })).toHaveCount(0);
   await expect(page.getByText('开发浏览器已关闭。', { exact: true })).toHaveCount(0);
-  await page.getByRole('tab', { name: '操作对话', exact: true }).click();
+  await workTab.focus();
+  await workTab.press('ArrowLeft');
+  await expect(chatTab).toHaveAttribute('aria-selected', 'true');
+  await expect(chatTab).toBeFocused();
+  await expect(browserToolbar).toHaveCount(0);
   await expect(composer).toHaveValue('还没有发出的想法');
+  await chatTab.press('ArrowRight');
+  await expect(workTab).toHaveAttribute('aria-selected', 'true');
+  await expect(workTab).toBeFocused();
+  await expect(workspaceToolbar.getByTestId('agent-browser-toolbar')).toBeVisible();
+  await expect(address).toHaveValue('http://127.0.0.1:4173/');
   const requests = (await readState(electronApp)).captured;
   const opens = requests.filter((request) => request.path === '/api/agent-browser/ensure-work');
   expect(opens.length).toBeGreaterThanOrEqual(2);
diff --git a/tests/e2e/teacher-preview-layout.spec.ts b/tests/e2e/teacher-preview-layout.spec.ts
index 2e33e951..99ed92e5 100644
--- a/tests/e2e/teacher-preview-layout.spec.ts
+++ b/tests/e2e/teacher-preview-layout.spec.ts
@@ -34,7 +34,7 @@ test.beforeAll(async () => {
         vite.middlewares.use((req, res, next) => {
           if (req.url !== '/' && !req.url?.startsWith('/?')) return next();
           res.setHeader('Content-Type', 'text/html');
-          res.end('<html><head><meta charset="utf-8"></head><body><div id="root"></div><script type="module" src="/tests/e2e/fixtures/teacher-preview-layout.tsx"></script></body></html>');
+          res.end('<!doctype html><html><head><meta charset="utf-8"></head><body><div id="root"></div><script type="module" src="/tests/e2e/fixtures/teacher-preview-layout.tsx"></script></body></html>');
         });
       },
     }],
@@ -44,6 +44,64 @@ test.beforeAll(async () => {
 });
 test.afterAll(async () => { await server?.close(); });
 
+for (const width of [375, 768, 1180]) {
+  test(`browser navigation stays with the workspace tabs without overflow at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 800 });
+    await page.goto(`${baseUrl}?quiet=1`);
+    const row = page.getByTestId('classroom-workspace-toolbar');
+    const tabs = row.getByRole('tablist', { name: '当前工作' });
+    const toolbar = row.getByRole('form', { name: '网页导航' });
+    const address = toolbar.getByRole('textbox', { name: '网页地址' });
+    await expect(address).toHaveValue('http://127.0.0.1:4173/');
+    await expect(page.getByTestId('agent-browser-toolbar')).toHaveCount(1);
+    await expect(tabs.getByRole('tab')).toHaveCount(2);
+    await expect(tabs.getByRole('textbox')).toHaveCount(0);
+    await expect(page.getByTestId('agent-browser-panel').getByTestId('agent-browser-toolbar')).toHaveCount(0);
+    expect(await toolbar.evaluate(el => el.closest('[role="tablist"]'))).toBeNull();
+
+    const checkLayout = async () => {
+      for (const control of [tabs.getByRole('tab', { name: '操作对话' }), tabs.getByRole('tab', { name: '作品', exact: true }),
+        toolbar.getByRole('button', { name: '后退', exact: true }), toolbar.getByRole('button', { name: '前进', exact: true }),
+        toolbar.getByRole('button', { name: '刷新网页', exact: true }), address]) {
+        await expect(control).toBeInViewport({ ratio: 1 });
+      }
+      const [tabBounds, toolbarBounds, rowBounds, previewBounds, viewportBounds] = await Promise.all([
+        tabs.boundingBox(), toolbar.boundingBox(), row.boundingBox(), page.getByTestId('agent-browser-panel').boundingBox(),
+        page.getByTestId('agent-browser-viewport').boundingBox(),
+      ]);
+      if (width === 375) {
+        expect(toolbarBounds!.y).toBeGreaterThanOrEqual(tabBounds!.y + tabBounds!.height);
+      } else {
+        expect(Math.abs(tabBounds!.y + tabBounds!.height / 2 - toolbarBounds!.y - toolbarBounds!.height / 2)).toBeLessThanOrEqual(1);
+      }
+      expect(toolbarBounds!.y + toolbarBounds!.height).toBeLessThanOrEqual(rowBounds!.y + rowBounds!.height);
+      expect(viewportBounds!.y).toBeGreaterThan(rowBounds!.y + rowBounds!.height);
+      expect(viewportBounds!.y - previewBounds!.y).toBeLessThanOrEqual(2);
+      expect(await row.evaluate(el => el.scrollWidth <= el.clientWidth)).toBe(true);
+      expect(await toolbar.evaluate(el => el.scrollWidth <= el.clientWidth)).toBe(true);
+      expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
+    };
+
+    await address.fill(`http://127.0.0.1:4173/${'long-preview-path/'.repeat(12)}`);
+    await checkLayout();
+    await page.screenshot({ path: test.info().outputPath(`workspace-browser-toolbar-${width}.png`) });
+    if (width === 1180) {
+      await page.getByRole('button', { name: '智能体', exact: true }).click();
+      await expect(page.locator('#coding-consultation-dock')).toBeVisible();
+      await checkLayout();
+      await page.screenshot({ path: test.info().outputPath('workspace-browser-toolbar-with-teacher.png') });
+    }
+    await tabs.getByRole('tab', { name: '操作对话' }).click();
+    await expect(page.getByTestId('agent-browser-toolbar')).toHaveCount(0);
+    await expect(tabs.getByRole('tab', { name: '操作对话' })).toHaveAttribute('aria-selected', 'true');
+    await tabs.getByRole('tab', { name: '作品', exact: true }).click();
+    await expect(toolbar).toBeVisible();
+    await expect(address).toHaveValue('http://127.0.0.1:4173/');
+    await expect(page.getByTestId('agent-browser-toolbar')).toHaveCount(1);
+    await checkLayout();
+  });
+}
+
 test('empty work shows a local hint without opening the teacher or polling', async ({ page }) => {
   await page.setViewportSize({ width: 1180, height: 720 });
   await page.clock.install();
@@ -256,7 +314,9 @@ for (const size of [{ width: 1440, height: 900 }, { width: 1180, height: 720 },
     await page.goto(baseUrl);
     await expect(page.getByTestId('teacher-invitation')).toBeVisible();
     await expect.poll(async () => (await geometry(page)).nativeGap).toBeGreaterThanOrEqual(8);
-    expect((await geometry(page)).gap).toBeLessThan(65);
+    // Toolbar placement does not affect the native pixels' clearance: leave
+    // only the required 8px below the speech bubble, allowing pixel rounding.
+    expect((await geometry(page)).nativeGap).toBeLessThanOrEqual(10);
     await page.getByRole('button', { name: '智能体', exact: true }).click();
     await expect.poll(async () => (await geometry(page)).sideBySide).toBe(true);
     await expect.poll(async () => (await geometry(page)).gap).toBe(20);
@@ -269,11 +329,16 @@ for (const size of [{ width: 1440, height: 900 }, { width: 1180, height: 720 },
     await page.screenshot({ path: test.info().outputPath('work-with-teacher-no-gap.png') });
     await page.getByRole('button', { name: '关闭智能体栏' }).click();
     await expect.poll(async () => (await geometry(page)).nativeGap).toBeGreaterThanOrEqual(8);
+    const longMessageClearance = (await geometry(page)).clearance;
     await page.getByRole('button', { name: '切换消息长度' }).click();
-    await expect.poll(async () => (await geometry(page)).gap).toBe(20);
+    await expect.poll(async () => (await geometry(page)).clearance).toBeLessThan(longMessageClearance);
+    await expect.poll(async () => (await geometry(page)).nativeGap).toBeGreaterThanOrEqual(8);
+    expect((await geometry(page)).nativeGap).toBeLessThanOrEqual(10);
     await page.getByRole('button', { name: '等会儿聊' }).click();
     await expect(page.getByTestId('teacher-invitation')).toHaveCount(0);
     await expect(page.getByTestId('agent-browser-panel')).toHaveCSS('margin-top', '0px');
+    expect(await page.evaluate(() => document.querySelector('[data-testid="agent-browser-panel"]')!.getBoundingClientRect().top
+      - document.querySelector('[data-testid="work-view"]')!.getBoundingClientRect().top)).toBe(20);
     expect(errors).toEqual([]);
   });
 }
diff --git a/tests/unit/agent-browser-panel.test.tsx b/tests/unit/agent-browser-panel.test.tsx
index e36ccfa2..311959e8 100644
--- a/tests/unit/agent-browser-panel.test.tsx
+++ b/tests/unit/agent-browser-panel.test.tsx
@@ -1,4 +1,4 @@
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import { useState } from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { AgentBrowserPanel } from '@/pages/Chat/AgentBrowserPanel';
@@ -341,6 +341,7 @@ describe('AgentBrowserPanel', () => {
     expect(screen.queryByRole('heading', { name: '作品预览' })).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: '收起作品' })).not.toBeInTheDocument();
     expect(screen.getByRole('textbox', { name: '网页地址' })).toHaveValue('http://127.0.0.1:4173/');
+    expect(within(screen.getByTestId('agent-browser-panel')).getByRole('form', { name: '网页导航' })).toBeVisible();
     expect(screen.getByRole('textbox', { name: '网页地址' })).toBeEnabled();
     expect(screen.getByTestId('agent-browser-viewport')).toBeVisible();
     expect(screen.getByTestId('agent-browser-viewport')).toHaveAccessibleName('作品画面');
@@ -364,6 +365,60 @@ describe('AgentBrowserPanel', () => {
     expect(hostApiFetchMock.mock.calls.filter(([path]) => path === '/api/agent-browser/close')).toHaveLength(1);
   });
 
+  it('portals the complete embedded toolbar and keeps navigation working across tab visibility', async () => {
+    const original = hostApiFetchMock.getMockImplementation()!;
+    let currentUrl = 'http://127.0.0.1:4173/';
+    hostApiFetchMock.mockImplementation(async (path: string, init?: RequestInit) => {
+      if (path === '/api/agent-browser/navigate') {
+        if (body(init).action === 'url') currentUrl = String(body(init).url);
+        return { success: true, browser: snapshot({ url: currentUrl, canGoBack: true, canGoForward: true }) };
+      }
+      const result = await original(path, init);
+      return result.browser ? { ...result, browser: { ...result.browser, url: currentUrl, canGoBack: true, canGoForward: true } } : result;
+    });
+    const toolbarContainer = document.createElement('div');
+    document.body.append(toolbarContainer);
+    const onOpenChange = vi.fn();
+    const view = render(<AgentBrowserPanel projectId="project-a" open embedded toolbarContainer={toolbarContainer} onOpenChange={onOpenChange} />);
+    try {
+      await waitFor(() => expect(latestPresentation()).toMatchObject({ visible: true }));
+      const toolbar = within(toolbarContainer).getByRole('form', { name: '网页导航' });
+      expect(screen.getAllByTestId('agent-browser-toolbar')).toHaveLength(1);
+      expect(within(screen.getByTestId('agent-browser-panel')).queryByRole('form')).not.toBeInTheDocument();
+      expect(within(toolbar).getByRole('textbox', { name: '网页地址' })).toHaveValue(currentUrl);
+      for (const name of ['后退', '前进', '刷新网页']) {
+        const button = within(toolbar).getByRole('button', { name, exact: true });
+        await waitFor(() => expect(button).toBeEnabled());
+        fireEvent.click(button);
+        await waitFor(() => expect(button).toBeEnabled());
+      }
+      fireEvent.change(within(toolbar).getByRole('textbox', { name: '网页地址' }), { target: { value: 'http://127.0.0.1:4173/next' } });
+      fireEvent.submit(toolbar);
+      await waitFor(() => expect(within(toolbar).getByRole('button', { name: '刷新网页' })).toBeEnabled());
+      expect(hostApiFetchMock.mock.calls.filter(([path]) => path === '/api/agent-browser/navigate').map(([, init]) => body(init))).toEqual([
+        { project_id: 'project-a', action: 'back' },
+        { project_id: 'project-a', action: 'forward' },
+        { project_id: 'project-a', action: 'reload' },
+        { project_id: 'project-a', action: 'url', url: 'http://127.0.0.1:4173/next' },
+      ]);
+
+      view.rerender(<AgentBrowserPanel projectId="project-a" open={false} embedded toolbarContainer={toolbarContainer} onOpenChange={onOpenChange} />);
+      await waitFor(() => expect(latestPresentation()).toMatchObject({ visible: false }));
+      expect(toolbarContainer).toBeEmptyDOMElement();
+      expect(screen.queryByTestId('agent-browser-panel')).not.toBeInTheDocument();
+      view.rerender(<AgentBrowserPanel projectId="project-a" open embedded toolbarContainer={toolbarContainer} onOpenChange={onOpenChange} />);
+      await waitFor(() => expect(latestPresentation()).toMatchObject({ visible: true }));
+      expect(within(toolbarContainer).getByRole('textbox', { name: '网页地址' })).toHaveValue('http://127.0.0.1:4173/next');
+      expect(screen.getAllByTestId('agent-browser-toolbar')).toHaveLength(1);
+      expect(hostApiFetchMock.mock.calls.filter(([path]) => path === '/api/agent-browser/navigate')).toHaveLength(4);
+      expect(hostApiFetchMock.mock.calls.some(([path]) => ['/api/agent-browser/open', '/api/agent-browser/close'].includes(String(path)))).toBe(false);
+      expect(onOpenChange).not.toHaveBeenCalled();
+    } finally {
+      view.unmount();
+      toolbarContainer.remove();
+    }
+  });
+
   it.each(['absolute', 'fixed'])('hides the native work page under a %s consultation and restores it beside a relative sidebar', async (position) => {
     const onOpenChange = vi.fn();
     const content = (dockPosition: string) => <>