Move work preview navigation beside workspace tabs

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">