Improve Agent UI active agent context (#1578)

GaetanVDB07 · itomek · web-flow · commit 0fe21871bee0 · 2026-06-11T19:27:44.000Z
## Summary Updates the Agent UI chat view so an empty chat reflects the selected agent, and adds a compact active-agent indicator to the task header. ## Why The Agent UI previously showed a generic empty state even when a specific agent was selected. That made it harder to confirm which agent would handle the next prompt and hid useful metadata like the agent description, starter prompts, tags, and tool count. ## Linked issue Closes #1526 ## Changes - Resolve the displayed agent from the session agent or active agent selection. - Show agent-specific empty-state icon, title, description, conversation starters, and capability summary. - Add a compact active-agent header indicator with the agent icon, name, and capability summary. - Add a focused Vitest coverage case for the agent-aware empty state and header indicator. ## Test plan - [x] `npm run test` from `src/gaia/apps/webui` passed: 4 files, 41 tests. - [x] `npm run build` from `src/gaia/apps/webui` passed. - [x] `git diff --check` passed. - [x] `python util/lint.py --all` was run. Black, isort, Flake8, import validation, dependabot validation, and doc version checks passed. The all-repo Pylint gate reported existing Python analyzer errors unrelated to this Agent UI change: - `src/gaia/agents/base/console.py:933` - `src/gaia/installer/lemonade_installer.py:630` - `src/gaia/mcp/servers/agent_ui_mcp.py:470` - [x] `python -m pytest tests/unit` was run after installing the local dev/API/MCP extras. The suite collected 5424 tests, then hit unrelated baseline/env failures and timed out after 10 minutes at 78%. ## Checklist - [x] I have linked a GitHub issue above (`Closes #N` / `Fixes #N` / `Refs #N`). - [x] I have described **why** this change is being made, not just what changed. - [x] I have run linting and tests locally (`python util/lint.py --all`, `pytest tests/unit/`), with the repo-wide Python baseline notes included above. - [x] Documentation not updated; this is a small contextual UI affordance with no setup, API, or workflow documentation change. Co-authored-by: Tomasz Iniewicz <itomek@users.noreply.github.com>
diff --git a/src/gaia/apps/webui/src/components/ChatView.css b/src/gaia/apps/webui/src/components/ChatView.css
@@ -42,6 +42,50 @@
 .task-header-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .task-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
 
+.active-agent-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    min-width: 0;
+    max-width: 260px;
+    padding: 4px 9px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
+}
+
+.active-agent-icon {
+    flex-shrink: 0;
+    color: var(--amd-red);
+}
+
+.active-agent-copy {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    gap: 1px;
+    line-height: 1.1;
+}
+
+.active-agent-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 11px;
+    font-weight: 650;
+    color: var(--text-primary);
+}
+
+.active-agent-capabilities {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 9px;
+    font-family: var(--font-mono);
+    color: var(--text-muted);
+}
+
 .task-title {
     font-size: 13px;
     font-weight: 600;
@@ -260,6 +304,11 @@
     opacity: 0.3;
 }
 
+.empty-task-icon.agent-aware {
+    color: var(--amd-red);
+    opacity: 0.8;
+}
+
 .empty-task-title {
     font-size: 20px;
     font-weight: 700;
@@ -273,11 +322,27 @@
     font-size: 14px;
     font-family: var(--font-sans);
     color: var(--text-muted);
-    margin-bottom: 32px;
+    margin-bottom: 14px;
     line-height: 1.75;
     max-width: 440px;
 }
 
+.empty-task-desc-spaced {
+    margin-bottom: 32px;
+}
+
+.empty-task-capabilities {
+    margin-bottom: 28px;
+    padding: 4px 10px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg-tertiary);
+    color: var(--text-muted);
+    font-size: 10px;
+    font-family: var(--font-mono);
+    white-space: nowrap;
+}
+
 .empty-task-suggestions {
     display: flex;
     flex-wrap: wrap;
diff --git a/src/gaia/apps/webui/src/components/ChatView.tsx b/src/gaia/apps/webui/src/components/ChatView.tsx
@@ -10,7 +10,8 @@ import type { GaiaNotification } from '../types/agent';
 import * as api from '../services/api';
 import { log } from '../utils/logger';
 import { bugReportUrl } from './UnsupportedFeature';
-import type { Message, StreamEvent, AgentStep, Attachment, Session } from '../types';
+import { getAgentIcon } from './agentIcons';
+import type { Message, StreamEvent, AgentStep, Attachment, Session, AgentInfo } from '../types';
 
 import './ChatView.css';
 import DashboardProgress from './DashboardProgress';
@@ -23,6 +24,17 @@ const EMPTY_SUGGESTIONS = [
     'Show my recent files',
 ];
 
+function formatAgentCapabilities(agent?: AgentInfo): string {
+    if (!agent) return '';
+    const parts: string[] = [];
+    if (typeof agent.tools_count === 'number' && agent.tools_count > 0) {
+        parts.push(`${agent.tools_count} ${agent.tools_count === 1 ? 'tool' : 'tools'}`);
+    }
+    const tags = (agent.tags ?? []).filter(Boolean).slice(0, 3);
+    if (tags.length > 0) parts.push(tags.join(', '));
+    return parts.join(' | ');
+}
+
 /**
  * Safety-net regex to strip raw tool-call JSON from streaming content.
  *
@@ -195,6 +207,15 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
     // Resolve human-readable agent names for the message header
     const sessionAgentName = agents.find((a) => a.id === session?.agent_type)?.name;
     const activeAgentName = agents.find((a) => a.id === activeAgentId)?.name;
+    const displayedAgent = useMemo(
+        () => agents.find((a) => a.id === displayedAgentId),
+        [agents, displayedAgentId],
+    );
+    const displayedAgentCapabilities = useMemo(
+        () => formatAgentCapabilities(displayedAgent),
+        [displayedAgent],
+    );
+    const DisplayedAgentIcon = getAgentIcon(displayedAgent?.icon);
 
     // Close agent picker on outside click
     useEffect(() => {
@@ -1294,6 +1315,9 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
     };
 
     const showEmptyState = !isLoadingMessages && messages.length === 0 && !isStreaming;
+    const emptyStateSuggestions = displayedAgent?.conversation_starters?.length
+        ? displayedAgent.conversation_starters
+        : EMPTY_SUGGESTIONS;
 
     // Pre-compute per-message latency: time from preceding user message to each
     // assistant message. O(N) single pass, avoids repeated backward scans in render.
@@ -1347,6 +1371,23 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
                     )}
                 </div>
                 <div className="task-header-right">
+                    {displayedAgent && (
+                        <div
+                            className="active-agent-indicator"
+                            aria-label="Active agent"
+                            title={displayedAgentCapabilities
+                                ? `${displayedAgent.name}: ${displayedAgentCapabilities}`
+                                : displayedAgent.name}
+                        >
+                            <DisplayedAgentIcon size={13} className="active-agent-icon" />
+                            <span className="active-agent-copy">
+                                <span className="active-agent-name">{displayedAgent.name}</span>
+                                {displayedAgentCapabilities && (
+                                    <span className="active-agent-capabilities">{displayedAgentCapabilities}</span>
+                                )}
+                            </span>
+                        </div>
+                    )}
                     <span
                         className={`model-badge ${!systemStatus?.model_loaded ? 'no-model' : ''}`}
                         title={
@@ -1495,15 +1536,24 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
 
                 {showEmptyState && (
                     <div className="empty-task">
-                        <div className="empty-task-icon">
-                            <MessageSquare size={36} strokeWidth={1.2} />
+                        <div className={`empty-task-icon${displayedAgent ? ' agent-aware' : ''}`}>
+                            {displayedAgent ? (
+                                <DisplayedAgentIcon size={36} strokeWidth={1.2} />
+                            ) : (
+                                <MessageSquare size={36} strokeWidth={1.2} />
+                            )}
                         </div>
-                        <h4 className="empty-task-title">What can I help you with?</h4>
-                        <p className="empty-task-desc">
-                            Ask about your documents, search files, or analyze data &mdash; powered by local AI.
+                        <h4 className="empty-task-title">{displayedAgent?.name || 'What can I help you with?'}</h4>
+                        <p className={`empty-task-desc${displayedAgentCapabilities ? '' : ' empty-task-desc-spaced'}`}>
+                            {displayedAgent?.description || (
+                                <>Ask about your documents, search files, or analyze data &mdash; powered by local AI.</>
+                            )}
                         </p>
+                        {displayedAgentCapabilities && (
+                            <div className="empty-task-capabilities">{displayedAgentCapabilities}</div>
+                        )}
                         <div className="empty-task-suggestions">
-                            {EMPTY_SUGGESTIONS.map((s) => (
+                            {emptyStateSuggestions.map((s) => (
                                 <button
                                     key={s}
                                     className="empty-task-chip"
diff --git a/src/gaia/apps/webui/src/components/__tests__/ChatView.test.tsx b/src/gaia/apps/webui/src/components/__tests__/ChatView.test.tsx
@@ -0,0 +1,90 @@
+// Copyright(C) 2025-2026 Advanced Micro Devices, Inc. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+import { render, screen, within } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ChatView } from '../ChatView';
+import { useChatStore } from '../../stores/chatStore';
+import type { AgentInfo, Session } from '../../types';
+import * as api from '../../services/api';
+
+vi.mock('../../services/api');
+
+const mockedApi = vi.mocked(api);
+
+const SESSION: Session = {
+    id: 'session-1',
+    title: 'New Task',
+    created_at: '2026-06-10T00:00:00Z',
+    updated_at: '2026-06-10T00:00:00Z',
+    model: 'qwen',
+    system_prompt: null,
+    message_count: 0,
+    document_ids: [],
+    agent_type: 'doc',
+};
+
+const DOC_AGENT: AgentInfo = {
+    id: 'doc',
+    name: 'Doc Agent',
+    description: 'Search and answer questions from indexed documents.',
+    source: 'builtin',
+    conversation_starters: [
+        'Find contract clauses',
+        'Summarize this folder',
+    ],
+    models: [],
+    tags: ['rag', 'files'],
+    icon: 'file-text',
+    tools_count: 3,
+};
+
+beforeEach(() => {
+    vi.clearAllMocks();
+    mockedApi.getMessages.mockResolvedValue({ messages: [], total: 0 });
+    mockedApi.listDocuments.mockResolvedValue({
+        documents: [],
+        total: 0,
+        total_size_bytes: 0,
+        total_chunks: 0,
+    });
+
+    Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
+        configurable: true,
+        value: vi.fn(),
+    });
+
+    useChatStore.setState({
+        agents: [DOC_AGENT],
+        activeAgentId: 'doc',
+        sessions: [SESSION],
+        currentSessionId: SESSION.id,
+        messages: [],
+        documents: [],
+        isStreaming: false,
+        streamingContent: '',
+        agentSteps: [],
+        isLoadingMessages: false,
+        pendingPrompt: null,
+        systemStatus: null,
+    });
+});
+
+describe('ChatView agent metadata', () => {
+    it('uses the active agent metadata for the empty state and header indicator', async () => {
+        render(<ChatView sessionId={SESSION.id} />);
+
+        expect(await screen.findByRole('heading', { name: 'Doc Agent' })).toBeInTheDocument();
+        expect(screen.getByText('Search and answer questions from indexed documents.')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Find contract clauses' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Summarize this folder' })).toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: 'Summarize a document' })).not.toBeInTheDocument();
+
+        const capabilitySummaries = screen.getAllByText('3 tools | rag, files');
+        expect(capabilitySummaries.length).toBeGreaterThan(0);
+
+        const headerIndicator = screen.getByLabelText('Active agent');
+        expect(within(headerIndicator).getByText('Doc Agent')).toBeInTheDocument();
+        expect(within(headerIndicator).getByText('3 tools | rag, files')).toBeInTheDocument();
+    });
+});
