From ef9bc5a614c02df1672e7070607314e71a39f283 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Fri, 17 Apr 2026 12:55:39 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui):=20AgentInstance=20=E2=80=94=20server-?=
 =?UTF-8?q?side=20multi-select=20filters=20+=20infinite=20scroll?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Same pattern as AgentHealth, scoped to a single agent instance
(passes agentId to both log and timeline streams).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/pages/AgentInstance/AgentInstance.tsx | 120 +++++++++++++------
 1 file changed, 84 insertions(+), 36 deletions(-)

diff --git a/ui/src/pages/AgentInstance/AgentInstance.tsx b/ui/src/pages/AgentInstance/AgentInstance.tsx
index dbdcf857..e2c992bf 100644
--- a/ui/src/pages/AgentInstance/AgentInstance.tsx
+++ b/ui/src/pages/AgentInstance/AgentInstance.tsx
@@ -1,6 +1,9 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router';
 import { RefreshCw } from 'lucide-react';
+import { useInfiniteApplicationLogs } from '../../api/queries/logs';
+import { useInfiniteAgentEvents } from '../../api/queries/agents';
+import { InfiniteScrollArea } from '../../components/InfiniteScrollArea';
 import {
   StatCard, StatusDot, Badge, ThemedChart, Line, Area, ReferenceLine, CHART_COLORS,
   EventFeed, Spinner, EmptyState, SectionHeader, MonoText,
@@ -11,8 +14,7 @@ import styles from './AgentInstance.module.css';
 import sectionStyles from '../../styles/section-card.module.css';
 import logStyles from '../../styles/log-panel.module.css';
 import chartCardStyles from '../../styles/chart-card.module.css';
-import { useAgents, useAgentEvents } from '../../api/queries/agents';
-import { useApplicationLogs } from '../../api/queries/logs';
+import { useAgents } from '../../api/queries/agents';
 import { useAgentMetrics } from '../../api/queries/agent-metrics';
 import { formatUptime, mapLogLevel, eventSeverity, eventIcon } from '../../utils/agent-utils';
 import { useEnvironmentStore } from '../../api/environment-store';
@@ -36,17 +38,19 @@ export default function AgentInstance() {
   const { timeRange } = useGlobalFilters();
   const [logSearch, setLogSearch] = useState('');
   const [logLevels, setLogLevels] = useState<Set<string>>(new Set());
-  const [logSource, setLogSource] = useState<string>('');  // '' = all, 'app', 'agent'
+  const [logSources, setLogSources] = useState<Set<string>>(new Set());
   const [logSortAsc, setLogSortAsc] = useState(false);
   const [eventSortAsc, setEventSortAsc] = useState(false);
-  const [logRefreshTo, setLogRefreshTo] = useState<string | undefined>();
-  const [eventRefreshTo, setEventRefreshTo] = useState<string | undefined>();
+  const [isLogAtTop, setIsLogAtTop] = useState(true);
+  const [isTimelineAtTop, setIsTimelineAtTop] = useState(true);
+  const logScrollRef = useRef<HTMLDivElement | null>(null);
+  const timelineScrollRef = useRef<HTMLDivElement | null>(null);
   const timeFrom = timeRange.start.toISOString();
   const timeTo = timeRange.end.toISOString();
 
   const selectedEnv = useEnvironmentStore((s) => s.environment);
   const { data: agents, isLoading } = useAgents(undefined, appId);
-  const { data: events } = useAgentEvents(appId, instanceId, 50, eventRefreshTo);
+  const eventStream = useInfiniteAgentEvents({ appId, agentId: instanceId, isAtTop: isTimelineAtTop });
 
   const agent = useMemo(
     () => (agents || []).find((a: any) => a.instanceId === instanceId) as any,
@@ -80,17 +84,17 @@ export default function AgentInstance() {
   );
 
   const feedEvents = useMemo<FeedEvent[]>(() => {
-    const mapped = (events || [])
-      .filter((e: any) => !instanceId || e.instanceId === instanceId)
-      .map((e: any) => ({
-        id: String(e.id),
+    const mapped = eventStream.items
+      .filter((e) => !instanceId || e.instanceId === instanceId)
+      .map((e) => ({
+        id: `${e.timestamp}:${e.instanceId}:${e.eventType}`,
         severity: eventSeverity(e.eventType),
         icon: eventIcon(e.eventType),
         message: `${e.eventType}${e.detail ? ' \u2014 ' + e.detail : ''}`,
         timestamp: new Date(e.timestamp),
       }));
     return eventSortAsc ? mapped.toReversed() : mapped;
-  }, [events, instanceId, eventSortAsc]);
+  }, [eventStream.items, instanceId, eventSortAsc]);
 
   const formatTime = (t: string) =>
     new Date(t).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
@@ -132,19 +136,26 @@ export default function AgentInstance() {
   }, [agentMetrics]);
 
   // Application logs
-  const { data: rawLogs } = useApplicationLogs(appId, instanceId, { toOverride: logRefreshTo, source: logSource || undefined });
+  const logStream = useInfiniteApplicationLogs({
+    application: appId,
+    agentId: instanceId,
+    sources: [...logSources],
+    levels: [...logLevels],
+    isAtTop: isLogAtTop,
+  });
   const logEntries = useMemo<LogEntry[]>(() => {
-    const mapped = (rawLogs || []).map((l) => ({
+    const mapped = logStream.items.map((l) => ({
       timestamp: l.timestamp ?? '',
       level: mapLogLevel(l.level),
       message: l.message ?? '',
+      source: l.source ?? undefined,
     }));
     return logSortAsc ? mapped.toReversed() : mapped;
-  }, [rawLogs, logSortAsc]);
+  }, [logStream.items, logSortAsc]);
   const searchLower = logSearch.toLowerCase();
-  const filteredLogs = logEntries
-    .filter((l) => logLevels.size === 0 || logLevels.has(l.level))
-    .filter((l) => !searchLower || l.message.toLowerCase().includes(searchLower));
+  const filteredLogs = searchLower
+    ? logEntries.filter((l) => l.message.toLowerCase().includes(searchLower))
+    : logEntries;
 
   if (isLoading) return <Spinner size="lg" />;
 
@@ -396,11 +407,14 @@ export default function AgentInstance() {
           <div className={logStyles.logHeader}>
             <SectionHeader>Application Log</SectionHeader>
             <div className={logStyles.headerActions}>
-              <span className={styles.chartMeta}>{logEntries.length} entries</span>
+              <span className={styles.chartMeta}>{logStream.items.length} entries</span>
               <button className={logStyles.sortBtn} onClick={() => setLogSortAsc((v) => !v)} title={logSortAsc ? 'Oldest first' : 'Newest first'}>
                 {logSortAsc ? '\u2191' : '\u2193'}
               </button>
-              <button className={logStyles.refreshBtn} onClick={() => setLogRefreshTo(new Date().toISOString())} title="Refresh">
+              <button className={logStyles.refreshBtn} onClick={() => {
+                logStream.refresh();
+                logScrollRef.current?.scrollTo({ top: 0 });
+              }} title="Refresh">
                 <RefreshCw size={14} />
               </button>
             </div>
@@ -428,9 +442,14 @@ export default function AgentInstance() {
             </div>
             <ButtonGroup
               items={LOG_SOURCE_ITEMS}
-              value={logSource ? new Set([logSource]) : new Set()}
-              onChange={(v) => setLogSource(v.size === 0 ? '' : [...v][0])}
+              value={logSources}
+              onChange={setLogSources}
             />
+            {logSources.size > 0 && (
+              <button className={logStyles.logClearFilters} onClick={() => setLogSources(new Set())}>
+                Clear
+              </button>
+            )}
             <ButtonGroup items={LOG_LEVEL_ITEMS} value={logLevels} onChange={setLogLevels} />
             {logLevels.size > 0 && (
               <button className={logStyles.logClearFilters} onClick={() => setLogLevels(new Set())}>
@@ -438,33 +457,62 @@ export default function AgentInstance() {
               </button>
             )}
           </div>
-          {filteredLogs.length > 0 ? (
-            <LogViewer entries={filteredLogs} maxHeight={360} />
-          ) : (
-            <div className={logStyles.logEmpty}>
-              {logSearch || logLevels.size > 0 ? 'No matching log entries' : 'No log entries available'}
-            </div>
-          )}
+          <InfiniteScrollArea
+            scrollRef={logScrollRef}
+            onEndReached={logStream.fetchNextPage}
+            onTopVisibilityChange={setIsLogAtTop}
+            isFetchingNextPage={logStream.isFetchingNextPage}
+            hasNextPage={logStream.hasNextPage}
+            isLoading={logStream.isLoading}
+            hasItems={logStream.items.length > 0}
+            maxHeight={360}
+          >
+            {filteredLogs.length > 0 ? (
+              <LogViewer entries={filteredLogs} />
+            ) : (
+              <div className={logStyles.logEmpty}>
+                {logSearch || logLevels.size > 0 || logSources.size > 0
+                  ? 'No matching log entries'
+                  : logStream.isLoading ? 'Loading logs…' : 'No log entries available'}
+              </div>
+            )}
+          </InfiniteScrollArea>
         </div>
 
         <div className={`${sectionStyles.section} ${styles.timelineCard}`}>
           <div className={styles.timelineHeader}>
             <span className={styles.chartTitle}>Timeline</span>
             <div className={logStyles.headerActions}>
-              <span className={styles.chartMeta}>{feedEvents.length} events</span>
+              <span className={styles.chartMeta}>{eventStream.items.length} events</span>
               <button className={logStyles.sortBtn} onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
                 {eventSortAsc ? '\u2191' : '\u2193'}
               </button>
-              <button className={logStyles.refreshBtn} onClick={() => setEventRefreshTo(new Date().toISOString())} title="Refresh">
+              <button className={logStyles.refreshBtn} onClick={() => {
+                eventStream.refresh();
+                timelineScrollRef.current?.scrollTo({ top: 0 });
+              }} title="Refresh">
                 <RefreshCw size={14} />
               </button>
             </div>
           </div>
-          {feedEvents.length > 0 ? (
-            <EventFeed events={feedEvents} maxItems={50} />
-          ) : (
-            <div className={logStyles.logEmpty}>No events in the selected time range.</div>
-          )}
+          <InfiniteScrollArea
+            scrollRef={timelineScrollRef}
+            onEndReached={eventStream.fetchNextPage}
+            onTopVisibilityChange={setIsTimelineAtTop}
+            isFetchingNextPage={eventStream.isFetchingNextPage}
+            hasNextPage={eventStream.hasNextPage}
+            isLoading={eventStream.isLoading}
+            hasItems={eventStream.items.length > 0}
+            maxHeight={360}
+          >
+            {feedEvents.length > 0 ? (
+              <EventFeed events={feedEvents} />
+            ) : (
+              <div className={logStyles.logEmpty}>
+                {eventStream.isLoading ? 'Loading events…' : 'No events in the selected time range.'}
+              </div>
+            )}
+          </InfiniteScrollArea>
         </div>
       </div>
     </div>