Move work preview navigation beside workspace tabs

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) => <>