From ad2218849374a91377309b29dce09f22c594d1c6 Mon Sep 17 00:00:00 2001
From: lzt404 <2596933790@qq.com>
Date: Tue, 22 Sep 2026 15:25:32 +0800
Subject: [PATCH] fix(ui): improve agent list scrolling and text layout

---
 src/i18n/ja.ts            |  1 -
 src/i18n/locales/en.ts    |  1 -
 src/i18n/locales/zh-CN.ts |  1 -
 src/pages/AgentsPage.tsx  |  6 +--
 src/styles.css            | 83 ++++++++++++++++++++++++---------------
 5 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/src/i18n/ja.ts b/src/i18n/ja.ts
index 48942c3..d4bed86 100644
--- a/src/i18n/ja.ts
+++ b/src/i18n/ja.ts
@@ -1157,7 +1157,6 @@ export const jaOverrides = {
   'agents.sessions.cleanupResult': '無効なセッション索引を {count} 件削除しました。{backup}',
   'agents.sessions.cleanupFailed': '無効なセッション索引の削除に失敗しました：{error}',
   'agents.localClients': 'ローカルクライアント',
-  'agents.selectClient': '管理するエージェントを選択',
   'agents.installStatus': 'インストール状態',
   'agents.clientDetected': 'クライアントを検出しました',
   'agents.clientNotDetected': 'クライアントを検出できません',
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index 7fa917a..4e9ca87 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -1157,7 +1157,6 @@ export const en: Record<MessageKey, string> = {
   'agents.sessions.cleanupResult': 'Removed {count} invalid session index entries. {backup}',
   'agents.sessions.cleanupFailed': 'Failed to remove invalid session index entries: {error}',
   'agents.localClients': 'Local Clients',
-  'agents.selectClient': 'Select an agent to manage',
   'agents.installStatus': 'Installation Status',
   'agents.clientDetected': 'Client detected',
   'agents.clientNotDetected': 'Client not detected',
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 52f12cb..b85de56 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -1157,7 +1157,6 @@ export const zhCN = {
   'agents.sessions.cleanupResult': '已清理 {count} 条无效会话索引。{backup}',
   'agents.sessions.cleanupFailed': '清理无效会话索引失败：{error}',
   'agents.localClients': '本机客户端',
-  'agents.selectClient': '选择需要管理的智能体',
   'agents.installStatus': '安装状态',
   'agents.clientDetected': '已检测到客户端',
   'agents.clientNotDetected': '未检测到客户端',
diff --git a/src/pages/AgentsPage.tsx b/src/pages/AgentsPage.tsx
index e2c4e34..c7bfb81 100644
--- a/src/pages/AgentsPage.tsx
+++ b/src/pages/AgentsPage.tsx
@@ -2026,11 +2026,7 @@ export function AgentsPage({ embedded = false, onConfigurationApplied }: AgentsP
       </header>
 
       <div className="agent-workbench">
-        <aside className="panel agent-client-list">
-          <div className="agent-list-heading">
-            <Bot size={18} />
-            <div><strong>{t('agents.localClients')}</strong><span>{t('agents.selectClient')}</span></div>
-          </div>
+        <aside className="panel agent-client-list" aria-label={t('agents.localClients')}>
           <div className="agent-list-items">
             {agentDefinitions.map((agent) => {
               const status = statuses.find((item) => item.id === agent.id);
diff --git a/src/styles.css b/src/styles.css
index 71c75a3..1bb4846 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -5953,7 +5953,7 @@ textarea:focus-visible {
 }
 
 .agent-client-list {
-  min-height: 960px;
+  min-height: 0;
 }
 
 .agent-config-panel {
@@ -6007,44 +6007,73 @@ textarea:focus-visible {
 .agent-client-list {
   display: grid;
   align-content: start;
-  gap: 14px;
   padding: 14px;
 }
 
-.agent-list-heading {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  min-height: 42px;
-  padding: 0 6px 11px;
-  border-bottom: 1px solid var(--theme-e3e1db);
-}
-
-.agent-list-heading > div,
 .agent-list-items button > span {
   display: grid;
   min-width: 0;
   gap: 3px;
 }
 
-.agent-list-heading strong,
 .agent-list-items strong {
   color: var(--theme-2d2a26);
   font-size: var(--font-size-section);
+  line-height: 1.3;
+  overflow-wrap: break-word;
 }
 
-.agent-list-heading span,
 .agent-list-items small {
-  overflow: hidden;
   color: var(--theme-8a847c);
   font-size: var(--font-size-meta);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+  white-space: normal;
 }
 
 .agent-list-items {
   display: grid;
+  align-content: start;
+  grid-auto-rows: max-content;
   gap: 6px;
+  min-height: 0;
+  max-height: min(800px, calc(100vh - 154px));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-right: 4px;
+  scrollbar-color: var(--border-primary) transparent;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+}
+
+.agent-list-items::-webkit-scrollbar {
+  width: 10px;
+}
+
+.agent-list-items::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.agent-list-items::-webkit-scrollbar-thumb {
+  min-height: 48px;
+  border: 3px solid transparent;
+  border-radius: 999px;
+  background: var(--border-primary);
+  background-clip: padding-box;
+}
+
+.agent-list-items::-webkit-scrollbar-thumb:hover {
+  border-width: 2px;
+  background-color: var(--border-hover);
+}
+
+.agent-list-items::-webkit-scrollbar-thumb:active {
+  border-width: 2px;
+  background-color: color-mix(in srgb, var(--border-hover) 72%, var(--text-quaternary));
+}
+
+.agent-list-items::-webkit-scrollbar-button {
+  display: none;
 }
 
 .agent-list-items button {
@@ -10854,7 +10883,7 @@ body.table-col-resizing * {
   }
 
   .agent-workbench {
-    grid-template-columns: 200px minmax(0, 1fr);
+    grid-template-columns: 230px minmax(0, 1fr);
   }
 
   .control-panel,
@@ -11125,7 +11154,7 @@ body.table-col-resizing * {
   }
 
   .agent-list-items {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   .agent-list-items button {
@@ -13756,34 +13785,24 @@ body.table-col-resizing * {
   min-height: 0;
   max-height: min(560px, calc(100vh - 260px));
   overflow: hidden;
-  gap: 16px;
   padding: 16px;
 }
 
-.agents-page-embedded .agent-list-heading {
-  gap: 11px;
-  min-height: 48px;
-  padding: 0 6px 13px;
-}
-
-.agents-page-embedded .agent-list-heading > div,
 .agents-page-embedded .agent-list-items button > span {
   gap: 5px;
 }
 
-.agents-page-embedded .agent-list-heading strong,
 .agents-page-embedded .agent-list-items strong {
   line-height: 1.3;
 }
 
-.agents-page-embedded .agent-list-heading span,
 .agents-page-embedded .agent-list-items small {
   line-height: 1.4;
 }
 
 .agents-page-embedded .agent-list-items {
   min-height: 0;
-  max-height: min(466px, calc(100vh - 350px));
+  max-height: min(526px, calc(100vh - 294px));
   overflow-y: auto;
   overscroll-behavior: contain;
   padding-right: 4px;
@@ -13809,7 +13828,7 @@ body.table-col-resizing * {
 
   .agents-page-embedded .agent-list-items {
     grid-template-columns: 1fr;
-    max-height: 202px;
+    max-height: 236px;
     overflow-y: auto;
   }
 }
@@ -14554,7 +14573,7 @@ body.table-col-resizing * {
   }
 
   .agent-workbench {
-    grid-template-columns: 200px minmax(0, 1fr);
+    grid-template-columns: 230px minmax(0, 1fr);
   }
 }