From 862a27b0b8ffec99190a548dd5ce208840cc19a9 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 26 Mar 2026 23:03:15 +0100
Subject: [PATCH] feat: add TRACE log level support across UI

Add TRACE option to log forwarding level dropdowns (AppConfig,
AgentHealth), badge color mapping, and log filter ButtonGroups
on all pages that display application logs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/Admin/AppConfigDetailPage.tsx     | 2 ++
 ui/src/pages/Admin/AppConfigPage.tsx           | 4 ++--
 ui/src/pages/AgentHealth/AgentHealth.tsx       | 5 ++++-
 ui/src/pages/AgentInstance/AgentInstance.tsx   | 1 +
 ui/src/pages/ExchangeDetail/ExchangeDetail.tsx | 1 +
 5 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/ui/src/pages/Admin/AppConfigDetailPage.tsx b/ui/src/pages/Admin/AppConfigDetailPage.tsx
index ff483a90..19ca7337 100644
--- a/ui/src/pages/Admin/AppConfigDetailPage.tsx
+++ b/ui/src/pages/Admin/AppConfigDetailPage.tsx
@@ -38,6 +38,7 @@ function logLevelColor(level?: string): BadgeColor {
     case 'ERROR': return 'error';
     case 'WARN': return 'warning';
     case 'DEBUG': return 'running';
+    case 'TRACE': return 'auto';
     default: return 'success';
   }
 }
@@ -334,6 +335,7 @@ export default function AppConfigDetailPage() {
                 <option value="WARN">WARN</option>
                 <option value="INFO">INFO</option>
                 <option value="DEBUG">DEBUG</option>
+                <option value="TRACE">TRACE</option>
               </select>
             ) : (
               <Badge label={String(form.logForwardingLevel)} color={logLevelColor(form.logForwardingLevel as string)} variant="filled" />
diff --git a/ui/src/pages/Admin/AppConfigPage.tsx b/ui/src/pages/Admin/AppConfigPage.tsx
index 4d95b335..83654a0e 100644
--- a/ui/src/pages/Admin/AppConfigPage.tsx
+++ b/ui/src/pages/Admin/AppConfigPage.tsx
@@ -30,7 +30,7 @@ function timeAgo(iso?: string): string {
 
 function logLevelColor(level?: string): BadgeColor {
   switch (level?.toUpperCase()) {
-    case 'ERROR': return 'error'; case 'WARN': return 'warning'; case 'DEBUG': return 'running'; default: return 'success';
+    case 'ERROR': return 'error'; case 'WARN': return 'warning'; case 'DEBUG': return 'running'; case 'TRACE': return 'auto'; default: return 'success';
   }
 }
 function engineLevelColor(level?: string): BadgeColor {
@@ -241,7 +241,7 @@ function AppConfigDetail({ appId, onClose }: { appId: string; onClose: () => voi
           <div className={styles.field}>
             <span className={styles.fieldLabel}>Log Forwarding</span>
             {editing
-              ? <select className={styles.select} value={String(form.logForwardingLevel)} onChange={(e) => updateField('logForwardingLevel', e.target.value)}><option value="ERROR">ERROR</option><option value="WARN">WARN</option><option value="INFO">INFO</option><option value="DEBUG">DEBUG</option></select>
+              ? <select className={styles.select} value={String(form.logForwardingLevel)} onChange={(e) => updateField('logForwardingLevel', e.target.value)}><option value="ERROR">ERROR</option><option value="WARN">WARN</option><option value="INFO">INFO</option><option value="DEBUG">DEBUG</option><option value="TRACE">TRACE</option></select>
               : <Badge label={String(form.logForwardingLevel)} color={logLevelColor(form.logForwardingLevel as string)} variant="filled" />}
           </div>
           <div className={styles.field}>
diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index 5e8e9f0a..f083f9ca 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -226,6 +226,7 @@ const LOG_LEVEL_ITEMS: ButtonGroupItem[] = [
   { value: 'warn', label: 'Warn', color: 'var(--warning)' },
   { value: 'info', label: 'Info', color: 'var(--success)' },
   { value: 'debug', label: 'Debug', color: 'var(--running)' },
+  { value: 'trace', label: 'Trace', color: 'var(--text-muted)' },
 ];
 
 function mapLogLevel(level: string): LogEntry['level'] {
@@ -535,6 +536,7 @@ export default function AgentHealth() {
                   <option value="WARN">WARN</option>
                   <option value="INFO">INFO</option>
                   <option value="DEBUG">DEBUG</option>
+                  <option value="TRACE">TRACE</option>
                 </select>
               </div>
               <div className={styles.configField}>
@@ -574,7 +576,8 @@ export default function AgentHealth() {
                 <Badge label={appConfig.logForwardingLevel ?? 'INFO'} color={
                   (appConfig.logForwardingLevel ?? 'INFO') === 'ERROR' ? 'error'
                   : (appConfig.logForwardingLevel ?? 'INFO') === 'WARN' ? 'warning'
-                  : (appConfig.logForwardingLevel ?? 'INFO') === 'DEBUG' ? 'running' : 'success'
+                  : (appConfig.logForwardingLevel ?? 'INFO') === 'DEBUG' ? 'running'
+                  : (appConfig.logForwardingLevel ?? 'INFO') === 'TRACE' ? 'auto' : 'success'
                 } variant="filled" />
               </div>
               <div className={styles.configField}>
diff --git a/ui/src/pages/AgentInstance/AgentInstance.tsx b/ui/src/pages/AgentInstance/AgentInstance.tsx
index f316a9af..c1e89907 100644
--- a/ui/src/pages/AgentInstance/AgentInstance.tsx
+++ b/ui/src/pages/AgentInstance/AgentInstance.tsx
@@ -17,6 +17,7 @@ const LOG_LEVEL_ITEMS: ButtonGroupItem[] = [
   { value: 'warn', label: 'Warn', color: 'var(--warning)' },
   { value: 'info', label: 'Info', color: 'var(--success)' },
   { value: 'debug', label: 'Debug', color: 'var(--running)' },
+  { value: 'trace', label: 'Trace', color: 'var(--text-muted)' },
 ];
 
 function mapLogLevel(level: string): LogEntry['level'] {
diff --git a/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx b/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx
index 8dcd39d0..b6b864b5 100644
--- a/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx
+++ b/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx
@@ -22,6 +22,7 @@ const LOG_LEVEL_ITEMS: ButtonGroupItem[] = [
   { value: 'warn', label: 'Warn', color: 'var(--warning)' },
   { value: 'info', label: 'Info', color: 'var(--success)' },
   { value: 'debug', label: 'Debug', color: 'var(--running)' },
+  { value: 'trace', label: 'Trace', color: 'var(--text-muted)' },
 ]
 
 function mapLogLevel(level: string): LogEntry['level'] {