From ee5babd1f7c6d2d2dad348df095567eba4e129b9 Mon Sep 17 00:00:00 2001 From: lzt404 <2596933790@qq.com> Date: Mon, 31 Aug 2026 17:09:39 +0800 Subject: [PATCH] refactor(agents): simplify embedded beginner mode UI --- src/i18n/ja.ts | 2 + src/i18n/locales/en.ts | 2 + src/i18n/locales/zh-CN.ts | 2 + src/pages/AgentsPage.tsx | 121 +++++++++++++++++- src/styles.css | 258 ++++++++++++++++++++++++++++++++++++++ 5 files changed, 382 insertions(+), 3 deletions(-) diff --git a/src/i18n/ja.ts b/src/i18n/ja.ts index 260c282..31c2a52 100644 --- a/src/i18n/ja.ts +++ b/src/i18n/ja.ts @@ -602,6 +602,8 @@ export const jaOverrides = { 'agents.status.applied': '適用済み', 'agents.status.unconfigured': '未設定', 'agents.title': 'エージェント設定', + 'agents.embedded.title': 'クライアントとモデルを選んで起動', + 'agents.embedded.subtitle': 'ない場合は先にインストールしてください', 'agents.redetect': '再検出', 'agents.tabs.label': 'エージェント設定ページ', 'agents.tabs.core': 'コア設定', diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts index 584970f..72c0e3d 100644 --- a/src/i18n/locales/en.ts +++ b/src/i18n/locales/en.ts @@ -644,6 +644,8 @@ export const en: Record = { 'agents.status.applied': 'Applied', 'agents.status.unconfigured': 'Not Configured', 'agents.title': 'Agent Configuration', + 'agents.embedded.title': 'Select a client and model, then start', + 'agents.embedded.subtitle': 'Install it first if it is not available', 'agents.redetect': 'Detect Again', 'agents.tabs.label': 'Agent configuration sections', 'agents.tabs.core': 'Core Configuration', diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts index dcc9ae2..0eb4e09 100644 --- a/src/i18n/locales/zh-CN.ts +++ b/src/i18n/locales/zh-CN.ts @@ -642,6 +642,8 @@ export const zhCN = { 'agents.status.applied': '已应用', 'agents.status.unconfigured': '尚未配置', 'agents.title': '智能体配置', + 'agents.embedded.title': '选择客户端和模型后启动', + 'agents.embedded.subtitle': '如果没有客户端请自行安装', 'agents.redetect': '重新检测', 'agents.tabs.label': '智能体配置子页面', 'agents.tabs.core': '核心配置', diff --git a/src/pages/AgentsPage.tsx b/src/pages/AgentsPage.tsx index ea90405..9cb2d4e 100644 --- a/src/pages/AgentsPage.tsx +++ b/src/pages/AgentsPage.tsx @@ -986,6 +986,16 @@ export function AgentsPage({ embedded = false }: AgentsPageProps = {}) { void loadModels(selected); }; + const runEmbeddedPrimaryAction = () => { + if (isPiClient) { + void (activeStatus?.pluginInstalled ? repairPiProvider() : installPiProvider()); + return; + } + void (configurationAction === 'close' + ? closeConfigurationChanges() + : applyConfigurationChanges()); + }; + const reloadStatusesAfterAction = async () => { setDetectionError(''); try { @@ -1006,6 +1016,24 @@ export function AgentsPage({ embedded = false }: AgentsPageProps = {}) { }); }; + const selectEmbeddedModel = (value: string) => { + const model = findAgentModel(models, value); + if (!model) return; + if (isClaudeModelMappingClient) { + claudeModelMappingsDirtyRef.current[selected] = true; + setClaudeModelMappingsDraftByClient((current) => ({ + ...current, + [selected]: { + ...current[selected], + opus: model.name, + sonnet: model.name, + haiku: model.name, + }, + })); + } + selectModel(model.name); + }; + const selectClaudeModelMapping = ( role: 'opus' | 'sonnet' | 'haiku', value: string, @@ -1448,9 +1476,18 @@ export function AgentsPage({ embedded = false }: AgentsPageProps = {}) { return (
-
- Agent Clients -

{t('agents.title')}

+
+ {embedded ? ( + <> +

{t('agents.embedded.title')}

+

{t('agents.embedded.subtitle')}

+ + ) : ( + <> + Agent Clients +

{t('agents.title')}

+ + )}
{detectionError ? ( @@ -1500,6 +1537,82 @@ export function AgentsPage({ embedded = false }: AgentsPageProps = {}) {
+ {embedded ? ( +
+
+ +
+ {activeDefinition.name} + {activeStatus?.installed ? t('agents.clientDetected') : t('agents.clientNotDetected')} +
+ + {activeStatus?.version ?? activeStatus?.appVersion ?? activeStatus?.cliVersion ?? t('agents.notFetched')} + +
+ + {activeStatus?.error || activeStatus?.warnings.length ? ( +
+ {activeStatus.error ? ( + {activeStatus.error} + ) : ( + {activeStatus.warnings.join('；')} + )} +
+ ) : null} + +
+ + +
+ +
+ + +
+ + {configurationError || modelSelectionError || launchError ? ( +
+ {configurationError || modelSelectionError || launchError} +
+ ) : null} +
+ ) : ( + <>
{availableSubpages.map((subpage) => (
) : null} + + )}
diff --git a/src/styles.css b/src/styles.css index e92a730..6fec376 100644 --- a/src/styles.css +++ b/src/styles.css @@ -11548,3 +11548,261 @@ body.table-col-resizing * { grid-template-columns: 1fr; } } + +.agents-page-embedded .agent-workbench { + grid-template-columns: minmax(280px, 310px) minmax(0, 1fr); + gap: 18px; +} + +.agents-page-embedded .management-header { + align-items: center; + min-height: 48px; +} + +.agents-page-embedded .agent-embedded-header-copy { + display: grid; + gap: 4px; +} + +.agents-page-embedded .agent-embedded-header-copy h1 { + white-space: normal; +} + +.agents-page-embedded .agent-embedded-header-copy p { + margin: 0; + color: var(--theme-8a847c); + font-size: var(--font-size-meta); + line-height: var(--line-height-body); +} + +.agents-page-embedded .agent-client-list { + 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)); + overflow-y: auto; + overscroll-behavior: contain; + padding-right: 4px; + scrollbar-gutter: stable; +} + +.agents-page-embedded .agent-list-items button { + grid-template-columns: 30px minmax(0, 1fr) 8px; + gap: 11px; + min-height: 66px; + padding: 10px 11px; +} + +@media (max-width: 760px) { + .agents-page-embedded .agent-workbench { + grid-template-columns: 1fr; + gap: 14px; + } + + .agents-page-embedded .agent-client-list { + max-height: 270px; + } + + .agents-page-embedded .agent-list-items { + grid-template-columns: 1fr; + max-height: 202px; + overflow-y: auto; + } +} + +.agents-page-embedded .agent-config-panel { + max-height: min(720px, calc(100vh - 260px)); + overflow-y: auto; + padding: 14px; + scrollbar-gutter: stable; +} + +.agents-page-embedded .agent-config-panel { + display: block; + overflow: hidden; + padding: 0; + background: var(--theme-fffdf8); +} + +.agents-page-embedded .agent-minimal-config { + display: grid; + min-width: 0; + gap: 18px; + padding: 20px; +} + +.agents-page-embedded .agent-minimal-client-summary { + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + align-items: center; + gap: 12px; + min-width: 0; + padding-bottom: 16px; + border-bottom: 1px solid var(--theme-e3e1db); +} + +.agents-page-embedded .agent-minimal-client-icon { + display: grid; + width: 42px; + height: 42px; + place-items: center; + border: 1px solid var(--theme-e3e1db); + border-radius: 10px; + background: var(--theme-faf9f5); + color: var(--theme-59544d); +} + +.agents-page-embedded .agent-minimal-client-icon .provider-logo { + width: 24px; + height: 24px; +} + +.agents-page-embedded .agent-minimal-client-summary > div { + display: grid; + min-width: 0; + gap: 3px; +} + +.agents-page-embedded .agent-minimal-client-summary strong { + overflow: hidden; + color: var(--theme-2d2a26); + font-size: var(--font-size-body); + text-overflow: ellipsis; + white-space: nowrap; +} + +.agents-page-embedded .agent-minimal-client-summary span:not(.agent-minimal-client-icon):not(.agent-minimal-version) { + overflow: hidden; + color: var(--theme-8a847c); + font-size: var(--font-size-meta); + text-overflow: ellipsis; + white-space: nowrap; +} + +.agents-page-embedded .agent-minimal-version { + max-width: 120px; + overflow: hidden; + color: var(--theme-8a847c); + font-size: var(--font-size-meta); + text-overflow: ellipsis; + white-space: nowrap; +} + +.agents-page-embedded .agent-minimal-field { + display: grid; + gap: 8px; +} + +.agents-page-embedded .agent-minimal-field > label { + color: var(--theme-59544d); + font-size: var(--font-size-label); + font-weight: 700; +} + +.agents-page-embedded .agent-minimal-field .agent-model-picker, +.agents-page-embedded .agent-minimal-field .agent-model-trigger { + width: 100%; +} + +.agents-page-embedded .agent-minimal-actions { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; + padding-top: 2px; +} + +.agents-page-embedded .agent-minimal-actions button { + min-height: 42px; + min-width: 0; +} + +.agents-page-embedded .agent-minimal-message { + color: var(--theme-7a746c); + font-size: var(--font-size-meta); + line-height: var(--line-height-body); + overflow-wrap: anywhere; +} + +.agents-page-embedded .agent-core-config { + gap: 10px; +} + +.agents-page-embedded .agent-status-grid { + min-height: 0; + gap: 6px; +} + +.agents-page-embedded .agent-status-grid > div { + gap: 3px; + padding: 9px 10px; +} + +.agents-page-embedded .agent-core-setting-section { + gap: 9px; + padding: 12px; +} + +.agents-page-embedded .agent-section-heading { + gap: 8px; +} + +.agents-page-embedded .agent-section-heading strong { + font-size: var(--font-size-label); +} + +.agents-page-embedded .agent-model-trigger { + min-height: 40px; + padding: 6px 10px; +} + +.agents-page-embedded .agent-modification-buttons button { + min-height: 34px; + padding: 6px 8px; +} + +.agents-page-embedded .agent-config-footer { + min-height: 40px; + gap: 10px; + padding-top: 10px; +} + +@media (max-width: 760px) { + .agents-page-embedded .agent-config-panel { + max-height: calc(100vh - 180px); + } + + .agents-page-embedded .agent-minimal-config { + padding: 16px; + } + + .agents-page-embedded .agent-minimal-actions { + grid-template-columns: 1fr; + } +}