fix(ui): agent switcher at tabs header + manage tab refactor

inc/Core/Admin/Pages/Agent/assets/css/agent-page.css

@@ -13,7 +13,7 @@
 
 /* Header */
 .datamachine-agent-header {
-	margin-bottom: 20px;
+	margin-bottom: 0;
 	padding-bottom: 15px;
 	border-bottom: 1px solid #ddd;
 }
@@ -25,6 +25,42 @@
 	line-height: 1.3;
 }
 
+/* Tabs Header with Agent Switcher */
+.datamachine-agent-tabs-header {
+	display: flex;
+	align-items: center;
+	gap: 20px;
+	margin-bottom: 0;
+	padding: 12px 0;
+	border-bottom: 1px solid #c3c4c7;
+}
+
+.datamachine-agent-tabs-header .datamachine-agent-switcher {
+	margin-bottom: 0;
+}
+
+/* Empty state for tabs requiring agent selection */
+.datamachine-agent-tab-empty {
+	padding: 40px 20px;
+	text-align: center;
+	background: #fcfcfc;
+	border: 1px solid #e0e0e0;
+	margin-top: 20px;
+}
+
+.datamachine-agent-tab-empty p {
+	margin: 0;
+	color: #646970;
+	font-size: 14px;
+}
+
+.datamachine-agent-loading {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 60px 20px;
+}
+
 /* Two-Panel Layout */
 .datamachine-agent-layout {
 	display: flex;

inc/Core/Admin/Pages/Agent/assets/react/AgentApp.jsx

@@ -2,14 +2,16 @@
  * AgentApp Component
  *
  * Root container for the Agent admin page.
- * Tabbed layout: Manage, Memory, System Tasks, Tools, and Configuration.
+ * Tabbed layout: Memory, Manage, System Tasks, Tools, and Configuration.
+ * Agent switcher at top left of tabs for quick agent selection.
  */
 
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
 import { TabPanel } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * External dependencies
@@ -23,19 +25,31 @@ import AgentFileEditor from './components/AgentFileEditor';
 import AgentEmptyState from './components/AgentEmptyState';
 import AgentSettings from './components/AgentSettings';
 import AgentToolsTab from './components/AgentToolsTab';
-import AgentListTab from './components/AgentListTab';
 import AgentEditView from './components/AgentEditView';
 import SystemTasksTab from './components/SystemTasksTab';
 import { useAgentFiles } from './queries/agentFiles';
+import { useAgentStore } from '@shared/stores/agentStore';
 
 const TABS = [
-	{ name: 'manage', title: 'Manage' },
 	{ name: 'memory', title: 'Memory' },
+	{ name: 'manage', title: 'Manage' },
 	{ name: 'system-tasks', title: 'System Tasks' },
 	{ name: 'tools', title: 'Tools' },
 	{ name: 'configuration', title: 'Configuration' },
 ];
 
+/**
+ * Empty state when no agent is selected.
+ *
+ * @param {string} message Message to display.
+ * @return {React.ReactElement}
+ */
+const NoAgentSelectedMessage = ( { message } ) => (
+	<div className="datamachine-agent-tab-empty">
+		<p>{ message }</p>
+	</div>
+);
+
 /**
  * Selection model:
  * - Core file: { type: 'core', filename: 'MEMORY.md' }
@@ -44,47 +58,58 @@ const TABS = [
  */
 const AgentApp = () => {
 	const [ selectedFile, setSelectedFile ] = useState( null );
-	const [ editingAgentId, setEditingAgentId ] = useState( null );
 	const { data: files } = useAgentFiles();
 	const hasFiles = files && files.length > 0;
 
+	// Get selected agent from store
+	const { selectedAgentId } = useAgentStore();
+
 	return (
 		<div className="datamachine-agent-app">
 			<div className="datamachine-agent-header">
 				<h1 className="datamachine-agent-title">Agents</h1>
+			</div>
+			<div className="datamachine-agent-tabs-header">
 				<AgentSwitcher />
 			</div>
 			<TabPanel
 				className="datamachine-tabs"
 				tabs={ TABS }
 				onSelect={ () => {
-					// Reset edit view when switching tabs.
-					setEditingAgentId( null );
+					// No state to reset when switching tabs now.
 				} }
 			>
 				{ ( tab ) => {
 					if ( tab.name === 'manage' ) {
-						if ( editingAgentId ) {
+						// Manage tab: show selected agent's edit view,
+						// or prompt to select an agent if none selected.
+						if ( ! selectedAgentId ) {
 							return (
-								<AgentEditView
-									agentId={ editingAgentId }
-									onBack={ () =>
-										setEditingAgentId( null )
-									}
+								<NoAgentSelectedMessage
+									message={ __(
+										'Select an agent from the dropdown above to manage its settings.',
+										'data-machine'
+									) }
 								/>
 							);
 						}
 
-						return (
-							<AgentListTab
-								onSelectAgent={ ( agent ) =>
-									setEditingAgentId( agent.agent_id )
-								}
-							/>
-						);
+						return <AgentEditView agentId={ selectedAgentId } />;
 					}
 
 					if ( tab.name === 'memory' ) {
+						// Memory tab: require an agent to be selected
+						if ( ! selectedAgentId ) {
+							return (
+								<NoAgentSelectedMessage
+									message={ __(
+										'Select an agent from the dropdown above to view its memory files.',
+										'data-machine'
+									) }
+								/>
+							);
+						}
+
 						return (
 							<div className="datamachine-agent-layout">
 								<AgentFileList
@@ -107,13 +132,36 @@ const AgentApp = () => {
 					}
 
 					if ( tab.name === 'system-tasks' ) {
+						// System Tasks: require agent selection
+						if ( ! selectedAgentId ) {
+							return (
+								<NoAgentSelectedMessage
+									message={ __(
+										'Select an agent from the dropdown above to view its system tasks.',
+										'data-machine'
+									) }
+								/>
+							);
+						}
 						return <SystemTasksTab />;
 					}
 
 					if ( tab.name === 'tools' ) {
+						// Tools: require agent selection
+						if ( ! selectedAgentId ) {
+							return (
+								<NoAgentSelectedMessage
+									message={ __(
+										'Select an agent from the dropdown above to view its tools configuration.',
+										'data-machine'
+									) }
+								/>
+							);
+						}
 						return <AgentToolsTab />;
 					}
 
+					// Configuration tab works without agent selection (global config)
 					return <AgentSettings />;
 				} }
 			</TabPanel>