From f97ab7c6cebd4771d9e5271349a1912a6c4ee715 Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Sat, 7 Mar 2026 13:51:34 +0200
Subject: [PATCH] feat: enhance ClaudeLogsSection and TeamDetailView with
 improved search and layout

- Updated ClaudeLogsSection to conditionally render search and filter components based on log availability, enhancing user experience.
- Adjusted TeamDetailView layout by adding padding to the action container for better alignment and visual consistency.
- Improved handling of empty log states in ClaudeLogsSection to provide clearer user feedback.
---
 .../components/team/ClaudeLogsSection.tsx     | 60 ++++++++++---------
 .../components/team/TeamDetailView.tsx        |  2 +-
 2 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/renderer/components/team/ClaudeLogsSection.tsx b/src/renderer/components/team/ClaudeLogsSection.tsx
index d4f684a7..1616706b 100644
--- a/src/renderer/components/team/ClaudeLogsSection.tsx
+++ b/src/renderer/components/team/ClaudeLogsSection.tsx
@@ -452,32 +452,36 @@ export const ClaudeLogsSection = ({ teamName }: ClaudeLogsSectionProps): React.J
           )}
         </span>
         <div className="flex items-center gap-2">
-          <div className="flex w-48 items-center gap-1.5 rounded-md border border-[var(--color-border)] bg-transparent px-2 py-1">
-            <Search size={12} className="shrink-0 text-[var(--color-text-muted)]" />
-            <input
-              type="text"
-              placeholder="Search logs..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="min-w-0 flex-1 bg-transparent text-xs text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:outline-none"
-            />
-            {searchQuery && (
-              <button
-                type="button"
-                className="shrink-0 rounded p-0.5 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text)]"
-                onClick={() => setSearchQuery('')}
-                aria-label="Clear search"
-              >
-                <X size={14} />
-              </button>
-            )}
-          </div>
-          <ClaudeLogsFilterPopover
-            filter={filter}
-            open={filterOpen}
-            onOpenChange={setFilterOpen}
-            onApply={setFilter}
-          />
+          {data.total > 0 ? (
+            <>
+              <div className="flex w-48 items-center gap-1.5 rounded-md border border-[var(--color-border)] bg-transparent px-2 py-1">
+                <Search size={12} className="shrink-0 text-[var(--color-text-muted)]" />
+                <input
+                  type="text"
+                  placeholder="Search logs..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="min-w-0 flex-1 bg-transparent text-xs text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:outline-none"
+                />
+                {searchQuery && (
+                  <button
+                    type="button"
+                    className="shrink-0 rounded p-0.5 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text)]"
+                    onClick={() => setSearchQuery('')}
+                    aria-label="Clear search"
+                  >
+                    <X size={14} />
+                  </button>
+                )}
+              </div>
+              <ClaudeLogsFilterPopover
+                filter={filter}
+                open={filterOpen}
+                onOpenChange={setFilterOpen}
+                onApply={setFilter}
+              />
+            </>
+          ) : null}
           {pendingNewCount > 0 && (
             <Button
               variant="outline"
@@ -533,9 +537,9 @@ export const ClaudeLogsSection = ({ teamName }: ClaudeLogsSectionProps): React.J
             }
           />
         ) : null}
-        {!error && data.lines.length === 0 ? (
+        {!error && data.lines.length === 0 && isAlive ? (
           <p className="p-2 text-xs text-[var(--color-text-muted)]">
-            {loading ? 'Loading…' : isAlive ? 'No logs captured.' : 'Team is not running.'}
+            {loading ? 'Loading…' : 'No logs captured.'}
           </p>
         ) : null}
         {!error && data.lines.length > 0 && filteredText.trim().length === 0 ? (
diff --git a/src/renderer/components/team/TeamDetailView.tsx b/src/renderer/components/team/TeamDetailView.tsx
index 44600ce8..7ca55c13 100644
--- a/src/renderer/components/team/TeamDetailView.tsx
+++ b/src/renderer/components/team/TeamDetailView.tsx
@@ -1476,7 +1476,7 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
             }
             defaultOpen
             action={
-              <div className="flex items-center gap-2 pl-2">
+              <div className="flex items-center gap-2 pl-2 pr-2">
                 <div className="flex w-36 items-center gap-1.5 rounded-md border border-[var(--color-border)] bg-transparent px-2 py-1">
                   <Search size={12} className="shrink-0 text-[var(--color-text-muted)]" />
                   <input