From c4cee9718c1d00ac58746cdba082f47af1bd9427 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Fri, 17 Apr 2026 15:53:43 +0200
Subject: [PATCH] fix(ui): align log search input styling with EventFeed,
 render ellipsis
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

JSX attribute strings don't process JS escape sequences — "Search logs\u2026"
rendered the literal "\u2026" in the placeholder. Replaced with the actual
ellipsis character.

Also aligned .logSearchInput (Application Log search) with EventFeed's
internal search input: --bg-surface background, --border border,
mono font family, 28px height. Previously used --bg-body + --border-subtle
+ body font, which looked visibly different next to the Timeline panel.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/AgentHealth/AgentHealth.tsx     |  2 +-
 ui/src/pages/AgentInstance/AgentInstance.tsx |  2 +-
 ui/src/styles/log-panel.module.css           | 10 ++++++----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index 710bcd16..dc2813ec 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -920,7 +920,7 @@ export default function AgentHealth() {
               <input
                 type="text"
                 className={logStyles.logSearchInput}
-                placeholder="Search logs\u2026"
+                placeholder="Search logs…"
                 value={logSearch}
                 onChange={(e) => setLogSearch(e.target.value)}
                 aria-label="Search logs"
diff --git a/ui/src/pages/AgentInstance/AgentInstance.tsx b/ui/src/pages/AgentInstance/AgentInstance.tsx
index df225e01..57271d03 100644
--- a/ui/src/pages/AgentInstance/AgentInstance.tsx
+++ b/ui/src/pages/AgentInstance/AgentInstance.tsx
@@ -426,7 +426,7 @@ export default function AgentInstance() {
               <input
                 type="text"
                 className={logStyles.logSearchInput}
-                placeholder="Search logs\u2026"
+                placeholder="Search logs…"
                 value={logSearch}
                 onChange={(e) => setLogSearch(e.target.value)}
                 aria-label="Search logs"
diff --git a/ui/src/styles/log-panel.module.css b/ui/src/styles/log-panel.module.css
index b0e8bd0c..daac5659 100644
--- a/ui/src/styles/log-panel.module.css
+++ b/ui/src/styles/log-panel.module.css
@@ -53,14 +53,16 @@
 
 .logSearchInput {
   width: 100%;
-  padding: 5px 28px 5px 10px;
-  border: 1px solid var(--border-subtle);
+  height: 28px;
+  padding: 0 26px 0 8px;
+  border: 1px solid var(--border);
   border-radius: var(--radius-sm);
-  background: var(--bg-body);
+  background: var(--bg-surface);
   color: var(--text-primary);
   font-size: 12px;
-  font-family: var(--font-body);
+  font-family: var(--font-mono);
   outline: none;
+  transition: border-color .15s;
 }
 
 .logSearchInput:focus {