feat: add sort toggle and refresh buttons to log/timeline panels

Remove auto-scroll override hack. Add sort order toggle (asc/desc
by time) and manual refresh button to both the application log and
agent events timeline panels on AgentInstance and AgentHealth pages.
Default is descending (newest first); toggling reverses the array.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/pages/AgentHealth/AgentHealth.module.css

@@ -224,3 +224,27 @@
   padding: 10px 16px;
   border-bottom: 1px solid var(--border-subtle);
 }
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.sortBtn,
+.refreshBtn {
+  background: none;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 13px;
+  padding: 2px 6px;
+  line-height: 1;
+}
+
+.sortBtn:hover,
+.refreshBtn:hover {
+  color: var(--text-primary);
+  border-color: var(--amber);
+}

ui/src/pages/AgentHealth/AgentHealth.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useRef, useEffect } from 'react';
+import { useState, useMemo } from 'react';
 import { useParams, Link } from 'react-router';
 import {
   StatCard, StatusDot, Badge, MonoText, ProgressBar,
@@ -223,19 +223,8 @@ function AgentPerformanceContent({ agent }: { agent: AgentInstance }) {
 export default function AgentHealth() {
   const { appId } = useParams();
   const { data: agents } = useAgents(undefined, appId);
-  const { data: events } = useAgentEvents(appId);
+  const { data: events, refetch: refetchEvents } = useAgentEvents(appId);
-  const timelineRef = useRef<HTMLDivElement>(null);
+  const [eventSortAsc, setEventSortAsc] = useState(false);
-
-  // Override EventFeed's auto-scroll-to-bottom so newest (DESC) events stay visible at top
-  useEffect(() => {
-    const el = timelineRef.current;
-    if (!el) return;
-    const timer = requestAnimationFrame(() => {
-      const list = el.querySelector('[aria-label="Event feed"]') as HTMLElement | null;
-      if (list) list.scrollTop = 0;
-    });
-    return () => cancelAnimationFrame(timer);
-  }, [events]);
 
   const [selectedInstance, setSelectedInstance] = useState<AgentInstance | null>(null);
   const [panelOpen, setPanelOpen] = useState(false);
@@ -254,22 +243,22 @@ export default function AgentHealth() {
   const totalRoutes = agentList.reduce((s, a) => s + (a.totalRoutes ?? 0), 0);
 
   // Map events to FeedEvent
-  const feedEvents: FeedEvent[] = useMemo(
+  const feedEvents: FeedEvent[] = useMemo(() => {
-    () =>
+    const mapped = (events ?? []).map((e: { id: number; agentId: string; eventType: string; detail: string; timestamp: string }) => ({
-      (events ?? []).map((e: { id: number; agentId: string; eventType: string; detail: string; timestamp: string }) => ({
+      id: String(e.id),
-        id: String(e.id),
+      severity:
-        severity:
+        e.eventType === 'WENT_DEAD'
-          e.eventType === 'WENT_DEAD'
+          ? ('error' as const)
-            ? ('error' as const)
+          : e.eventType === 'WENT_STALE'
-            : e.eventType === 'WENT_STALE'
+            ? ('warning' as const)
-              ? ('warning' as const)
+            : e.eventType === 'RECOVERED'
-              : e.eventType === 'RECOVERED'
+              ? ('success' as const)
-                ? ('success' as const)
+              : ('running' as const),
-                : ('running' as const),
+      message: `${e.agentId}: ${e.eventType}${e.detail ? ' \u2014 ' + e.detail : ''}`,
-        message: `${e.agentId}: ${e.eventType}${e.detail ? ' \u2014 ' + e.detail : ''}`,
+      timestamp: new Date(e.timestamp),
-        timestamp: new Date(e.timestamp),
+    }));
-      })),
+    return eventSortAsc ? mapped.toReversed() : mapped;
-    [events],
+  }, [events, eventSortAsc],
   );
 
   // Column definitions for the instance DataTable
@@ -512,10 +501,18 @@ export default function AgentHealth() {
 
       {/* EventFeed */}
       {feedEvents.length > 0 && (
-        <div className={styles.eventCard} ref={timelineRef}>
+        <div className={styles.eventCard}>
           <div className={styles.eventCardHeader}>
             <span className={styles.sectionTitle}>Timeline</span>
-            <span className={styles.sectionMeta}>{feedEvents.length} events</span>
+            <div className={styles.headerActions}>
+              <span className={styles.sectionMeta}>{feedEvents.length} events</span>
+              <button className={styles.sortBtn} onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
+                {eventSortAsc ? '\u2191' : '\u2193'}
+              </button>
+              <button className={styles.refreshBtn} onClick={() => refetchEvents()} title="Refresh">
+                &#x21bb;
+              </button>
+            </div>
           </div>
           <EventFeed events={feedEvents} maxItems={100} />
         </div>

ui/src/pages/AgentInstance/AgentInstance.module.css

@@ -145,6 +145,30 @@
   border-bottom: 1px solid var(--border-subtle);
 }
 
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.sortBtn,
+.refreshBtn {
+  background: none;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 13px;
+  padding: 2px 6px;
+  line-height: 1;
+}
+
+.sortBtn:hover,
+.refreshBtn:hover {
+  color: var(--text-primary);
+  border-color: var(--amber);
+}
+
 .logToolbar {
   display: flex;
   align-items: center;

ui/src/pages/AgentInstance/AgentInstance.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState, useRef, useEffect } from 'react';
+import { useMemo, useState } from 'react';
 import { useParams, Link } from 'react-router';
 import {
   StatCard, StatusDot, Badge, LineChart, AreaChart, BarChart,
@@ -33,26 +33,15 @@ export default function AgentInstance() {
   const { timeRange } = useGlobalFilters();
   const [logSearch, setLogSearch] = useState('');
   const [logLevels, setLogLevels] = useState<Set<string>>(new Set());
+  const [logSortAsc, setLogSortAsc] = useState(false);
+  const [eventSortAsc, setEventSortAsc] = useState(false);
   const timeFrom = timeRange.start.toISOString();
   const timeTo = timeRange.end.toISOString();
 
-  const timelineRef = useRef<HTMLDivElement>(null);
-
   const { data: agents, isLoading } = useAgents(undefined, appId);
-  const { data: events } = useAgentEvents(appId, instanceId);
+  const { data: events, refetch: refetchEvents } = useAgentEvents(appId, instanceId);
   const { data: timeseries } = useStatsTimeseries(timeFrom, timeTo, undefined, appId);
 
-  // Override EventFeed's auto-scroll-to-bottom so newest (DESC) events stay visible at top
-  useEffect(() => {
-    const el = timelineRef.current;
-    if (!el) return;
-    const timer = requestAnimationFrame(() => {
-      const list = el.querySelector('[aria-label="Event feed"]') as HTMLElement | null;
-      if (list) list.scrollTop = 0;
-    });
-    return () => cancelAnimationFrame(timer);
-  }, [events]);
-
   const agent = useMemo(
     () => (agents || []).find((a: any) => a.id === instanceId) as any,
     [agents, instanceId],
@@ -87,25 +76,24 @@ export default function AgentInstance() {
     [timeseries],
   );
 
-  const feedEvents = useMemo<FeedEvent[]>(
+  const feedEvents = useMemo<FeedEvent[]>(() => {
-    () =>
+    const mapped = (events || [])
-      (events || [])
+      .filter((e: any) => !instanceId || e.agentId === instanceId)
-        .filter((e: any) => !instanceId || e.agentId === instanceId)
+      .map((e: any) => ({
-        .map((e: any) => ({
+        id: String(e.id),
-          id: String(e.id),
+        severity:
-          severity:
+          e.eventType === 'WENT_DEAD'
-            e.eventType === 'WENT_DEAD'
+            ? ('error' as const)
-              ? ('error' as const)
+            : e.eventType === 'WENT_STALE'
-              : e.eventType === 'WENT_STALE'
+              ? ('warning' as const)
-                ? ('warning' as const)
+              : e.eventType === 'RECOVERED'
-                : e.eventType === 'RECOVERED'
+                ? ('success' as const)
-                  ? ('success' as const)
+                : ('running' as const),
-                  : ('running' as const),
+        message: `${e.eventType}${e.detail ? ' \u2014 ' + e.detail : ''}`,
-          message: `${e.eventType}${e.detail ? ' \u2014 ' + e.detail : ''}`,
+        timestamp: new Date(e.timestamp),
-          timestamp: new Date(e.timestamp),
+      }));
-        })),
+    return eventSortAsc ? mapped.toReversed() : mapped;
-    [events, instanceId],
+  }, [events, instanceId, eventSortAsc]);
-  );
 
   // JVM chart series helpers
   const cpuSeries = useMemo(() => {
@@ -149,15 +137,15 @@ export default function AgentInstance() {
   );
 
   // Application logs from OpenSearch
-  const { data: rawLogs } = useApplicationLogs(appId, instanceId);
+  const { data: rawLogs, refetch: refetchLogs } = useApplicationLogs(appId, instanceId);
-  const logEntries = useMemo<LogEntry[]>(
+  const logEntries = useMemo<LogEntry[]>(() => {
-    () => (rawLogs || []).map((l) => ({
+    const mapped = (rawLogs || []).map((l) => ({
       timestamp: l.timestamp ?? '',
       level: mapLogLevel(l.level),
       message: l.message ?? '',
-    })),
+    }));
-    [rawLogs],
+    return logSortAsc ? mapped.toReversed() : mapped;
-  );
+  }, [rawLogs, logSortAsc]);
   const searchLower = logSearch.toLowerCase();
   const filteredLogs = logEntries
     .filter((l) => logLevels.size === 0 || logLevels.has(l.level))
@@ -409,7 +397,15 @@ export default function AgentInstance() {
         <div className={styles.logCard}>
           <div className={styles.logHeader}>
             <SectionHeader>Application Log</SectionHeader>
-            <span className={styles.chartMeta}>{logEntries.length} entries</span>
+            <div className={styles.headerActions}>
+              <span className={styles.chartMeta}>{logEntries.length} entries</span>
+              <button className={styles.sortBtn} onClick={() => setLogSortAsc((v) => !v)} title={logSortAsc ? 'Oldest first' : 'Newest first'}>
+                {logSortAsc ? '\u2191' : '\u2193'}
+              </button>
+              <button className={styles.refreshBtn} onClick={() => refetchLogs()} title="Refresh">
+                &#x21bb;
+              </button>
+            </div>
           </div>
           <div className={styles.logToolbar}>
             <div className={styles.logSearchWrap}>
@@ -448,10 +444,18 @@ export default function AgentInstance() {
           )}
         </div>
 
-        <div className={styles.timelineCard} ref={timelineRef}>
+        <div className={styles.timelineCard}>
           <div className={styles.timelineHeader}>
             <span className={styles.chartTitle}>Timeline</span>
-            <span className={styles.chartMeta}>{feedEvents.length} events</span>
+            <div className={styles.headerActions}>
+              <span className={styles.chartMeta}>{feedEvents.length} events</span>
+              <button className={styles.sortBtn} onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
+                {eventSortAsc ? '\u2191' : '\u2193'}
+              </button>
+              <button className={styles.refreshBtn} onClick={() => refetchEvents()} title="Refresh">
+                &#x21bb;
+              </button>
+            </div>
           </div>
           {feedEvents.length > 0 ? (
             <EventFeed events={feedEvents} maxItems={50} />