Automattic
diff --git a/‎client/lib/color-scheme/dark-theme.scss‎
Lines changed: 6 additions & 0 deletions b/‎client/lib/color-scheme/dark-theme.scss‎
Lines changed: 6 additions & 0 deletions
diff --git a/‎client/package.json‎
Lines changed: 1 addition & 1 deletion b/‎client/package.json‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎packages/agents-manager/package.json‎
Lines changed: 2 additions & 2 deletions b/‎packages/agents-manager/package.json‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎packages/agents-manager/src/components/__tests__/agent-dock.test.tsx‎
Lines changed: 217 additions & 21 deletions b/‎packages/agents-manager/src/components/__tests__/agent-dock.test.tsx‎
Lines changed: 217 additions & 21 deletions
diff --git a/‎packages/agents-manager/src/components/__tests__/chat-header.test.tsx‎
Lines changed: 0 additions & 23 deletions b/‎packages/agents-manager/src/components/__tests__/chat-header.test.tsx‎
Lines changed: 0 additions & 23 deletions
@@ -821,6 +821,12 @@ This mixin generates alias variables for a color palette. For example, the
 		--color-primary-foreground: var( --wp-components-color-accent-inverted );
 		--color-muted: var( --dashboard-surface__border-color );
 		--color-muted-foreground: var( --dashboard__text-muted-color );
+		--color-input-border: var( --dashboard-surface__border-color );
+		--color-input-border-focused: color-mix(
+			in srgb,
+			var( --dashboard-surface__border-color ) 85%,
+			var( --dashboard__text-muted-color )
+		);
 		--color-ring: var( --wp-admin-theme-color );
 		--color-link: var( --wp-admin-theme-color-darker-20 );
 	}
 
@@ -14,7 +14,7 @@
 	"dependencies": {
 		"@automattic/accessible-focus": "workspace:^",
 		"@automattic/agents-manager": "workspace:^",
-		"@automattic/agenttic-ui": "^0.1.83",
+		"@automattic/agenttic-ui": "^0.1.84",
 		"@automattic/api-core": "workspace:^",
 		"@automattic/api-queries": "workspace:^",
 		"@automattic/block-renderer": "workspace:^",
 
@@ -41,8 +41,8 @@
 		"watch": "tsc --build ./tsconfig.json --watch"
 	},
 	"dependencies": {
-		"@automattic/agenttic-client": "^0.1.83",
-		"@automattic/agenttic-ui": "^0.1.83",
+		"@automattic/agenttic-client": "^0.1.84",
+		"@automattic/agenttic-ui": "^0.1.84",
 		"@automattic/calypso-analytics": "workspace:^",
 		"@automattic/components": "workspace:^",
 		"@automattic/data-stores": "workspace:^",
 
@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 /* eslint-disable import/order -- jest.mock calls must precede imports */
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import { MemoryRouter, useLocation } from 'react-router-dom';
 import type { AgentsManagerContextType } from '../../contexts';
 
@@ -15,6 +15,9 @@ const mockUseAgentLayoutManager = jest.fn();
 const mockResumeActiveChat = jest.fn();
 const mockCloseSidebar = jest.fn();
 let mockLayoutIsDocked = false;
+// Overrides the layout mock's `canDock` (which otherwise follows
+// `mockLayoutIsDocked`) so floating-but-dockable states are testable.
+let mockCanDock: boolean | null = null;
 let mockContext: Partial< AgentsManagerContextType > = {};
 let mockAgentsManagerState: {
 	isOpen?: boolean;
@@ -46,11 +49,11 @@ jest.mock( '@wordpress/data', () => ( {
 } ) );
 jest.mock( '@wordpress/i18n', () => ( { __: ( text: string ) => text } ) );
 jest.mock( '@wordpress/icons', () => ( {
+	backup: 'backup',
+	cog: 'cog',
 	columns: 'columns',
 	comment: 'comment',
-	drawerRight: 'drawerRight',
-	lineSolid: 'lineSolid',
-	login: 'login',
+	heading: 'heading',
 } ) );
 jest.mock( '../../contexts', () => ( {
 	useAgentsManagerContext: () => mockContext,
@@ -68,7 +71,7 @@ jest.mock( '../../hooks/use-agent-layout-manager', () => ( options: unknown ) =>
 	return {
 		isDocked: mockLayoutIsDocked,
 		isSidebarOpen: mockLayoutIsDocked && mockAgentsManagerState.isOpen !== false,
-		canDock: mockLayoutIsDocked,
+		canDock: mockCanDock ?? mockLayoutIsDocked,
 		dock: jest.fn(),
 		undock: jest.fn(),
 		openSidebar: jest.fn(),
@@ -103,22 +106,25 @@ jest.mock( '../orchestrator-chat', () => ( {
 		onExpand,
 		onClose,
 	}: {
-		chatHeaderOptions: { title: string; onClick?: () => void; isDisabled?: boolean }[];
+		chatHeaderOptions: { title: string; onClick?: () => void; isDisabled?: boolean }[][];
 		isOpen: boolean;
 		onExpand: () => void;
 		onClose: () => void;
 	} ) => (
 		<div data-testid="orchestrator-chat" data-chat-open={ String( isOpen ) }>
-			{ chatHeaderOptions.map( ( option ) => (
-				<button
-					key={ option.title }
-					type="button"
-					onClick={ option.onClick }
-					disabled={ option.isDisabled }
-				>
-					{ option.title }
-				</button>
-			) ) }
+			{ chatHeaderOptions.map( ( group, groupIndex ) =>
+				group.map( ( option ) => (
+					<button
+						key={ option.title }
+						type="button"
+						data-group={ groupIndex }
+						onClick={ option.onClick }
+						disabled={ option.isDisabled }
+					>
+						{ option.title }
+					</button>
+				) )
+			) }
 			<button onClick={ onExpand }>Expand chat</button>
 			<button onClick={ onClose }>Close chat</button>
 		</div>
@@ -138,9 +144,20 @@ jest.mock( '../zendesk-chat', () => ( {
 } ) );
 jest.mock( '../agent-history', () => ( {
 	__esModule: true,
-	default: ( { onExpand }: { onExpand: () => void } ) => (
+	default: ( {
+		onExpand,
+		chatHeaderOptions,
+	}: {
+		onExpand: () => void;
+		chatHeaderOptions: { title: string; onClick?: () => void; isDisabled?: boolean }[][];
+	} ) => (
 		<div data-testid="agent-history">
 			History
+			{ chatHeaderOptions.flat().map( ( option ) => (
+				<button key={ option.title } onClick={ option.onClick } disabled={ option.isDisabled }>
+					{ option.title }
+				</button>
+			) ) }
 			<button onClick={ onExpand }>Expand history</button>
 		</div>
 	),
@@ -160,8 +177,9 @@ jest.mock( '../support-guides', () => ( {
 } ) );
 
 import AgentDock from '../agent-dock';
-import { recordBigSkyTracksEvent } from '../../utils/tracks';
+import { recordAgentsManagerTracksEvent, recordBigSkyTracksEvent } from '../../utils/tracks';
 
+const mockRecordAgentsManagerTracksEvent = recordAgentsManagerTracksEvent as jest.Mock;
 const mockRecordBigSkyTracksEvent = recordBigSkyTracksEvent as jest.Mock;
 
 function LocationProbe() {
@@ -201,6 +219,8 @@ describe( 'AgentDock', () => {
 		mockHasAdminBar = false;
 		mockShouldUseUnifiedAgent = false;
 		mockLayoutIsDocked = false;
+		mockCanDock = null;
+		delete ( globalThis as { agentsManagerData?: unknown } ).agentsManagerData;
 		mockAgentsManagerState = { isOpen: true, isDocked: false };
 		mockContext = {
 			siteKey: 'site-1',
@@ -420,6 +440,179 @@ describe( 'AgentDock', () => {
 		expect( mockSetIsOpen ).toHaveBeenCalledWith( true, true );
 	} );
 
+	it( 'offers View history in More Options after New chat', () => {
+		useWpAdminAgent();
+
+		renderAgentDock();
+
+		const options = within( screen.getByTestId( 'orchestrator-chat' ) ).getAllByRole( 'button' );
+
+		expect( options[ 0 ] ).toHaveTextContent( 'New chat' );
+		expect( options[ 1 ] ).toHaveTextContent( 'View history' );
+	} );
+
+	it( 'omits View history from More Options on reader chat', () => {
+		renderAgentDock();
+
+		expect( screen.queryByText( 'View history' ) ).toBeNull();
+	} );
+
+	it( 'omits View history from More Options while on the history view', () => {
+		useWpAdminAgent();
+
+		renderAgentDock( '/history' );
+
+		expect( screen.getByText( 'New chat' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'View history' ) ).toBeNull();
+	} );
+
+	it( 'dual-fires the unified and Big Sky events for New chat', () => {
+		useWpAdminAgent();
+
+		renderAgentDock( '/history' );
+		fireEvent.click( screen.getByText( 'New chat' ) );
+
+		expect( mockRecordAgentsManagerTracksEvent ).toHaveBeenCalledWith(
+			'ai_chat_more_options_click',
+			{
+				type: 'reset_chat',
+			}
+		);
+		expect( mockRecordBigSkyTracksEvent ).toHaveBeenCalledWith( 'ai_chat_more_options_click', {
+			type: 'reset_chat',
+		} );
+	} );
+
+	it( 'offers the guidelines and settings items when wp-admin injects the site', () => {
+		useWpAdminAgent();
+		( globalThis as { agentsManagerData?: unknown } ).agentsManagerData = {
+			site: { domain: 'example.com' },
+			isWpcomPlatform: true,
+		};
+
+		renderAgentDock();
+
+		expect( screen.getByText( 'Knowledge and memory' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'AI Agent settings' ) ).toBeInTheDocument();
+	} );
+
+	it( 'omits the settings item on non-WordPress.com-hosted sites', () => {
+		useWpAdminAgent();
+		( globalThis as { agentsManagerData?: unknown } ).agentsManagerData = {
+			site: { domain: 'example.com' },
+		};
+
+		renderAgentDock();
+
+		expect( screen.getByText( 'Knowledge and memory' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'AI Agent settings' ) ).toBeNull();
+	} );
+
+	it( 'omits the guidelines and settings items without the injected site', () => {
+		useWpAdminAgent();
+
+		renderAgentDock();
+
+		expect( screen.queryByText( 'Knowledge and memory' ) ).toBeNull();
+		expect( screen.queryByText( 'AI Agent settings' ) ).toBeNull();
+	} );
+
+	it( 'navigates to history from More Options', () => {
+		useWpAdminAgent();
+
+		renderAgentDock();
+		fireEvent.click( screen.getByText( 'View history' ) );
+
+		expect( mockRecordAgentsManagerTracksEvent ).toHaveBeenCalledWith(
+			'ai_chat_more_options_click',
+			{
+				type: 'view_history',
+			}
+		);
+		expect( screen.getByTestId( 'location' ) ).toHaveTextContent( '/history' );
+	} );
+
+	it( 'opens the guidelines page from More Options', () => {
+		useWpAdminAgent();
+		( globalThis as { agentsManagerData?: unknown } ).agentsManagerData = {
+			site: { domain: 'example.com' },
+		};
+		const openSpy = jest.spyOn( window, 'open' ).mockImplementation( () => null );
+
+		renderAgentDock();
+		fireEvent.click( screen.getByText( 'Knowledge and memory' ) );
+
+		expect( mockRecordAgentsManagerTracksEvent ).toHaveBeenCalledWith(
+			'ai_chat_more_options_click',
+			{
+				type: 'knowledge_memory',
+			}
+		);
+		expect( openSpy ).toHaveBeenCalledWith(
+			'/wp-admin/options-general.php?page=guidelines-wp-admin',
+			'_blank',
+			'noopener,noreferrer'
+		);
+
+		openSpy.mockRestore();
+	} );
+
+	it( 'opens the AI Agent settings for the injected site', () => {
+		useWpAdminAgent();
+		( globalThis as { agentsManagerData?: unknown } ).agentsManagerData = {
+			site: { domain: 'example.com' },
+			isWpcomPlatform: true,
+		};
+		const openSpy = jest.spyOn( window, 'open' ).mockImplementation( () => null );
+
+		renderAgentDock();
+		fireEvent.click( screen.getByText( 'AI Agent settings' ) );
+
+		expect( mockRecordAgentsManagerTracksEvent ).toHaveBeenCalledWith(
+			'ai_chat_more_options_click',
+			{
+				type: 'ai_agent_settings',
+			}
+		);
+		expect( openSpy ).toHaveBeenCalledWith(
+			'https://my.wordpress.com/sites/example.com/settings/ai-tools',
+			'_blank',
+			'noopener,noreferrer'
+		);
+
+		openSpy.mockRestore();
+	} );
+
+	it( 'offers Switch to floating behind the divider while docked', () => {
+		useWpAdminAgent();
+		mockLayoutIsDocked = true;
+
+		renderAgentDock();
+
+		expect( screen.getByText( 'New chat' ) ).toHaveAttribute( 'data-group', '0' );
+		expect( screen.getByText( 'Switch to floating' ) ).toHaveAttribute( 'data-group', '1' );
+		expect( screen.queryByText( 'Switch to sidebar' ) ).toBeNull();
+	} );
+
+	it( 'offers Switch to sidebar while floating and docking is available', () => {
+		useWpAdminAgent();
+		mockCanDock = true;
+
+		renderAgentDock();
+
+		expect( screen.getByText( 'Switch to sidebar' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'Switch to floating' ) ).toBeNull();
+	} );
+
+	it( 'omits the switch options on reader chat', () => {
+		mockLayoutIsDocked = true;
+
+		renderAgentDock();
+
+		expect( screen.queryByText( 'Switch to floating' ) ).toBeNull();
+		expect( screen.queryByText( 'Switch to sidebar' ) ).toBeNull();
+	} );
+
 	it.each( [
 		{
 			isSplitScreen: false,
@@ -447,9 +640,12 @@ describe( 'AgentDock', () => {
 			renderAgentDock( '/chat', { capabilities: { supportsSplitScreen: true } } );
 			fireEvent.click( screen.getByRole( 'button', { name: label } ) );
 
-			expect( mockRecordBigSkyTracksEvent ).toHaveBeenCalledWith( 'ai_chat_more_options_click', {
-				type,
-			} );
+			expect( mockRecordAgentsManagerTracksEvent ).toHaveBeenCalledWith(
+				'ai_chat_more_options_click',
+				{
+					type,
+				}
+			);
 			expect( mockSetIsSplitScreen ).toHaveBeenCalledWith( nextState );
 		}
 	);
 
@@ -28,11 +28,9 @@ jest.mock( '@wordpress/components', () => ( {
 } ) );
 jest.mock( '@wordpress/i18n', () => ( { __: ( text: string ) => text } ) );
 jest.mock( '@wordpress/icons', () => ( {
-	backup: 'backup',
 	chevronLeft: 'chevronLeft',
 	close: 'close',
 	Icon: () => null,
-	lineSolid: 'lineSolid',
 	moreVertical: 'moreVertical',
 } ) );
 jest.mock( '@wordpress/data', () => ( {
@@ -59,13 +57,6 @@ function installAdminBarTrigger() {
 	document.body.appendChild( el );
 }
 
-// `isReaderChatHost()` reads the agent ID from this global.
-function installReaderChatHost() {
-	( globalThis as { agentsManagerData?: { agentId?: string } } ).agentsManagerData = {
-		agentId: 'reader-chat',
-	};
-}
-
 function installMasterbarTrigger() {
 	const el = document.createElement( 'div' );
 	el.className = 'masterbar__item-agents-manager-ai-chat';
@@ -101,20 +92,6 @@ describe( 'ChatHeader', () => {
 		expect( container.querySelector( '.agents-manager-chat-header__title' ) ).toBeNull();
 	} );
 
-	it( 'shows the history button by default', () => {
-		renderChatHeader();
-
-		expect( screen.getByText( 'View history' ) ).toBeInTheDocument();
-	} );
-
-	it( 'hides the history button on reader-chat hosts', () => {
-		installReaderChatHost();
-
-		renderChatHeader();
-
-		expect( screen.queryByText( 'View history' ) ).toBeNull();
-	} );
-
 	it( 'minimizes the chat when the Minimize button is clicked', () => {
 		installAdminBarTrigger();