@auto-ai/agent 2.1.172 → 2.1.175

package/dist/ws-test/ws-test.css

@@ -1086,92 +1086,284 @@
       cursor: pointer;
       text-align: left;
     }
-    #agentEnvModalCard .agent-env-tab-panels {
+    /* 设置主视图（布局对齐文件管理页） */
+    .agent-settings-view {
       flex: 1;
       min-height: 0;
       display: flex;
       flex-direction: column;
       overflow: hidden;
+      padding: 0;
     }
-    /* 设置弹窗复用「工具弹窗」tabbed 头部体系，仅补充隐藏设置标题 */
-    #agentEnvModalCard.agent-picker--tabbed #agentEnvModalTitle {
-      display: none;
+    .agent-settings-view[hidden] {
+      display: none !important;
     }
-    #agentEnvModalCard .agent-env-panel.tool-files-body {
-      max-height: none;
+    .agent-settings-layout {
       flex: 1;
       min-height: 0;
+      display: flex;
+      gap: 0;
+      overflow: hidden;
     }
-    /* 覆盖下面 .agent-env-panel--md 的 display:flex，否则 [hidden] 无法隐藏 Tab 内未选中的分栏 */
-    #agentEnvModalCard .agent-env-panel[hidden] {
-      display: none !important;
+    .agent-settings-nav {
+      flex-shrink: 0;
+      width: 220px;
+      display: flex;
+      flex-direction: column;
+      border: none;
+      border-radius: 0;
+      border-right: 1px solid var(--ds-border);
+      overflow: hidden;
+      background: var(--ds-bg);
+    }
+    .agent-settings-nav-title {
+      flex-shrink: 0;
+      padding: 10px 12px;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--ds-muted);
+      border-bottom: 1px solid var(--ds-border);
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
     }
-    #agentEnvModalCard .agent-env-panel.agent-env-panel--md {
+    .agent-settings-nav-list {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      padding: 6px 0;
       display: flex;
       flex-direction: column;
-      gap: 0.4rem;
     }
-    #agentEnvModalCard .agent-env-panel--md .agent-md-editor {
-      min-height: min(42vh, 360px);
+    .agent-settings-nav-item {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 8px 12px;
+      border: none;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      font-size: 13px;
+      text-align: left;
+      cursor: pointer;
+      user-select: none;
     }
-    .agent-env-team-block {
-      margin-top: 0.35rem;
-      padding-top: 0.65rem;
-      border-top: 1px solid var(--ds-border, #e5e5ea);
+    .agent-settings-nav-item:hover {
+      background: var(--ds-item-hover);
     }
-    .agent-env-team-block > label {
-      font-size: 0.78rem;
-      color: var(--ds-text-soft);
-      display: block;
-      margin-bottom: 0.35rem;
+    .agent-settings-nav-item.is-selected {
+      background: rgba(10, 132, 255, 0.1);
+      color: var(--ds-accent);
+      font-weight: 600;
     }
-    .agent-env-team-empty {
-      margin: 0 0 0.45rem;
-      font-size: 0.78rem;
-      color: var(--ds-text-soft);
+    .agent-settings-content {
+      flex: 1;
+      min-width: 0;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      background: var(--ds-bg);
     }
-    .agent-env-team-chips {
+    .agent-settings-panels {
+      flex: 1;
+      min-height: 0;
       display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-      margin-bottom: 0.55rem;
-      min-height: 24px;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    .agent-settings-head {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 8px;
+      padding: 10px 14px;
+      border-bottom: 1px solid var(--ds-border);
+      background: var(--ds-bg);
     }
-    .agent-env-team-chip {
+    .agent-settings-actions {
       display: inline-flex;
       align-items: center;
-      gap: 4px;
-      padding: 0.15rem 0.4rem 0.15rem 0.5rem;
-      border-radius: 999px;
-      background: rgba(10, 132, 255, 0.12);
-      border: 1px solid rgba(10, 132, 255, 0.28);
-      font-size: 0.76rem;
+      gap: 8px;
     }
-    .agent-env-team-chip button {
+    .agent-settings-scroll {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      padding: 0;
+      background: var(--ds-bg);
+    }
+    .agent-settings-scroll[hidden] {
+      display: none !important;
+    }
+    .agent-settings-md-panel {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      padding: 14px 20px;
+    }
+    .agent-settings-md-editor {
+      flex: 1;
+      min-height: min(60vh, 520px);
+      border: 1px solid var(--ds-separator);
+      border-radius: 10px;
+      background: #ffffff;
+    }
+    .btn-agent-settings-cancel {
+      padding: 6px 14px;
+      border: 1px solid var(--ds-border);
+      border-radius: 8px;
+      background: var(--ds-bg);
+      color: inherit;
+      font: inherit;
+      font-size: 13px;
+      cursor: pointer;
+    }
+    .btn-agent-settings-cancel:hover {
+      background: var(--ds-item-hover);
+    }
+    .settings-unified-panel {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+    .settings-section {
+      padding: 14px 20px;
       border: none;
+      border-radius: 0;
+      border-bottom: 1px solid var(--ds-border, #e5e5ea);
+      background: var(--ds-bg);
+    }
+    .settings-section:last-child {
+      border-bottom: none;
+    }
+    .settings-section-title {
+      margin: 0 0 0.65rem;
+      font-size: 0.82rem;
+      font-weight: 600;
+      color: var(--ds-text);
+    }
+    .settings-fields {
+      display: grid;
+      gap: 0.55rem;
+    }
+    .settings-field {
+      display: grid;
+      gap: 0.3rem;
+    }
+    .settings-field-label {
+      font-size: 0.78rem;
+      color: var(--ds-text-soft);
+      line-height: 1.35;
+    }
+    .settings-textarea {
+      min-height: 110px;
+    }
+    .settings-textarea--compact {
+      min-height: 80px;
+    }
+    .settings-env-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+    .settings-env-list .agent-env-fixed-section {
+      margin-bottom: 0;
+      padding-left: 0;
+      padding-right: 0;
+      border: none;
+      border-radius: 0;
+      border-bottom: 1px solid var(--ds-border, #e5e5ea);
       background: transparent;
+    }
+    .settings-env-list .agent-env-fixed-section:last-child {
+      border-bottom: none;
+    }
+    .agent-md-panel-hint {
+      margin: 0;
+      font-size: 0.75rem;
       color: var(--ds-text-soft);
-      cursor: pointer;
-      font-size: 1rem;
-      line-height: 1;
-      padding: 0 2px;
     }
-    .agent-env-team-chip button:hover {
-      color: var(--ds-danger, #ff3b30);
+    .llm-providers-block {
+      display: grid;
+      gap: 0.75rem;
     }
-    .agent-env-team-add {
+    .llm-providers-empty {
+      margin: 0;
+      font-size: 0.74rem;
+      color: var(--ds-text-soft);
+      line-height: 1.45;
+    }
+    .llm-provider-form {
+      display: grid;
+      gap: 0.55rem;
+      padding-bottom: 0.75rem;
+      border-bottom: 1px solid var(--ds-border, #e5e5ea);
+    }
+    .llm-provider-form-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 0.55rem;
+    }
+    .llm-provider-form-field--full {
+      grid-column: 1 / -1;
+    }
+    .llm-provider-form-actions {
+      display: flex;
+      justify-content: flex-end;
+    }
+    .llm-provider-list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+    }
+    .llm-provider-list-item {
       display: flex;
-      gap: 8px;
       align-items: center;
+      justify-content: space-between;
+      gap: 0.75rem;
+      padding: 0.55rem 0;
+      border-bottom: 1px solid var(--ds-border, #e5e5ea);
+      font-size: 0.84rem;
     }
-    .agent-env-team-add select {
-      flex: 1;
+    .llm-provider-list-item:last-child {
+      border-bottom: none;
+    }
+    .llm-provider-list-name {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.45rem;
       min-width: 0;
-      border: 1px solid var(--ds-border, #e5e5ea);
-      border-radius: 8px;
-      padding: 0.4rem 0.5rem;
-      font: inherit;
-      font-size: 0.82rem;
+      color: var(--ds-text);
+    }
+    .llm-provider-list-default {
+      flex-shrink: 0;
+      font-size: 0.7rem;
+      color: var(--ds-accent);
+      background: rgba(10, 132, 255, 0.1);
+      padding: 0.1rem 0.4rem;
+      border-radius: 4px;
+    }
+    .llm-provider-list-remove {
+      flex-shrink: 0;
+      border: none;
+      background: transparent;
+      color: var(--ds-danger, #ff3b30);
+      cursor: pointer;
+      font-size: 0.76rem;
+      padding: 0.15rem 0.35rem;
+      border-radius: 4px;
+    }
+    .llm-provider-list-remove:hover {
+      background: rgba(255, 59, 48, 0.08);
+    }
+    @media (max-width: 720px) {
+      .llm-provider-form-grid {
+        grid-template-columns: 1fr;
+      }
     }
     .agent-md-modal-close {
       border: none;
@@ -1236,6 +1428,13 @@
       outline: none;
       box-shadow: inset 0 0 0 2px rgba(79, 109, 245, 0.2);
     }
+    /* whentouse 仅需约三行高度，覆盖 agent-md-editor 的大块编辑区样式 */
+    .agent-md-editor.settings-textarea--whentouse {
+      flex: none;
+      min-height: calc(3 * 1.5em + 1.7rem);
+      height: auto;
+      resize: vertical;
+    }
     .agent-md-modal-foot {
       display: flex;
       justify-content: flex-end;
@@ -1287,14 +1486,6 @@
       border-bottom: 1px solid var(--ds-separator);
       background: var(--ds-bg);
     }
-    /* 设置弹窗（tabbed）覆盖 modal-unified 头部内边距，页签贴顶与工具弹窗一致 */
-    #agentEnvModalCard.agent-picker--tabbed .agent-md-modal-head {
-      padding: 0;
-      gap: 0;
-      border-bottom: none;
-      align-items: stretch;
-      min-height: 0;
-    }
     .agent-md-modal-card.modal-unified .tool-files-body {
       flex: 1;
       min-height: 0;
@@ -1411,6 +1602,12 @@
     .agent-env-fixed-row:last-child {
       margin-bottom: 0;
     }
+    .agent-env-fixed-row--whentouse {
+      align-items: start;
+    }
+    .agent-env-fixed-row--whentouse .agent-env-kv-input {
+      min-height: 0;
+    }
     .agent-env-fixed-label {
       color: var(--ds-text-soft);
       font-size: 0.78rem;
@@ -1437,12 +1634,6 @@
       border-color: var(--ds-accent);
       box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.16);
     }
-    #agentEnvModalCard .agent-env-panel--md .agent-md-editor {
-      border: 1px solid var(--ds-separator);
-      border-radius: 10px;
-      background: #ffffff;
-    }
-
     .main {
       flex: 1;
       display: flex;

package/dist/ws-test/ws-test.html

@@ -161,6 +161,96 @@
               </section>
             </div>
           </div>
+          <div id="agentSettingsView" class="agent-settings-view" hidden>
+            <div class="agent-settings-layout">
+              <aside class="agent-settings-nav" aria-label="设置导航">
+                <div class="agent-settings-nav-title">配置</div>
+                <nav
+                  id="agentEnvSessionTabList"
+                  class="agent-settings-nav-list"
+                  role="tablist"
+                  aria-label="设置、编辑 agent.md"
+                ></nav>
+              </aside>
+              <section class="agent-settings-content">
+                <div class="agent-settings-head">
+                  <div class="agent-settings-actions">
+                    <button type="button" class="btn-agent-settings-cancel" id="btnAgentEnvCancel">取消</button>
+                    <button type="button" class="btn-primary" id="btnAgentEnvSave">保存</button>
+                  </div>
+                </div>
+                <div class="agent-settings-panels">
+                  <div id="agentEnvPanelUnified" class="agent-settings-scroll settings-unified-panel">
+                    <section class="settings-section" aria-labelledby="settingsSectionLlmTitle">
+                      <h3 id="settingsSectionLlmTitle" class="settings-section-title">LLM 服务商</h3>
+                      <div id="llmProvidersSettingsBlock" class="llm-providers-block">
+                        <form id="llmProviderForm" class="llm-provider-form" autocomplete="off" onsubmit="return false">
+                          <div class="llm-provider-form-grid">
+                            <div class="settings-field">
+                              <label class="settings-field-label" for="llmFormId">服务商 ID（slug）</label>
+                              <input id="llmFormId" class="agent-env-kv-input" type="text" spellcheck="false" placeholder="例如 openai-main" />
+                            </div>
+                            <div class="settings-field">
+                              <label class="settings-field-label" for="llmFormName">展示名称</label>
+                              <input id="llmFormName" class="agent-env-kv-input" type="text" spellcheck="false" placeholder="例如 OpenAI 主站" />
+                            </div>
+                            <div class="settings-field">
+                              <label class="settings-field-label" for="llmFormProvider">协议类型</label>
+                              <select id="llmFormProvider" class="agent-env-kv-input">
+                                <option value="openai">openai</option>
+                                <option value="anthropic">anthropic</option>
+                              </select>
+                            </div>
+                            <div class="settings-field llm-provider-form-field--full">
+                              <label class="settings-field-label" for="llmFormBaseUrl">Base URL</label>
+                              <input id="llmFormBaseUrl" class="agent-env-kv-input" type="text" spellcheck="false" placeholder="https://api.openai.com/v1" />
+                            </div>
+                            <div class="settings-field">
+                              <label class="settings-field-label" for="llmFormApiKey">API Key</label>
+                              <input id="llmFormApiKey" class="agent-env-kv-input" type="password" spellcheck="false" />
+                            </div>
+                            <div class="settings-field">
+                              <label class="settings-field-label" for="llmFormAuthToken">Auth Token</label>
+                              <input id="llmFormAuthToken" class="agent-env-kv-input" type="password" spellcheck="false" />
+                            </div>
+                            <div class="settings-field">
+                              <label class="settings-field-label" for="llmFormModelId">模型 ID</label>
+                              <input id="llmFormModelId" class="agent-env-kv-input" type="text" spellcheck="false" placeholder="例如 gpt-4o" />
+                            </div>
+                            <div class="settings-field">
+                              <label class="settings-field-label" for="llmFormModelLabel">模型展示名（可选）</label>
+                              <input id="llmFormModelLabel" class="agent-env-kv-input" type="text" spellcheck="false" />
+                            </div>
+                          </div>
+                          <div class="llm-provider-form-actions">
+                            <button type="button" class="btn-primary" id="btnLlmProvidersAdd">添加</button>
+                          </div>
+                        </form>
+                        <p id="llmProvidersEmptyHint" class="llm-providers-empty" hidden>尚未配置服务商，填写上方表单后点击「添加」。</p>
+                        <ul id="llmProvidersList" class="llm-provider-list" aria-label="已配置服务商"></ul>
+                      </div>
+                    </section>
+
+                    <section class="settings-section">
+                      <div id="agentEnvList" class="tool-files-list settings-env-list"></div>
+                    </section>
+                  </div>
+                  <div id="agentEnvPanelAgentMd" class="agent-settings-scroll agent-settings-md-panel" hidden>
+                    <p class="tool-files-meta agent-md-panel-hint">
+                      与磁盘上 <code>agent.md</code> 相同；点右上角 <strong>保存</strong> 与配置一并提交。
+                    </p>
+                    <textarea
+                      id="agentEnvAgentMdEditor"
+                      class="agent-md-editor agent-settings-md-editor"
+                      spellcheck="false"
+                      placeholder="加载中…"
+                      aria-label="agent.md 源码"
+                    ></textarea>
+                  </div>
+                </div>
+              </section>
+            </div>
+          </div>
           <div id="chatWorkspace" class="chat-workspace">
           <div id="pendingPromptsBar" class="pending-prompts-bar" hidden>
             <div class="pending-prompts-title">待执行</div>
@@ -436,143 +526,6 @@
     </div>
   </div>
 
-  <div id="agentEnvModal" class="agent-md-modal" aria-hidden="true">
-    <div class="agent-md-modal-backdrop" id="agentEnvModalBackdrop"></div>
-    <div id="agentEnvModalCard" class="agent-md-modal-card modal-unified agent-picker--tabbed" role="dialog" aria-modal="true" aria-labelledby="agentEnvModalTitle">
-      <div class="agent-md-modal-head">
-        <h2 id="agentEnvModalTitle">设置</h2>
-        <div id="agentEnvSessionTabStrip" class="session-tabs agent-picker-session-tab-strip" hidden role="tablist" aria-label="环境变量、编辑 agent.md、设置">
-          <div id="agentEnvSessionTabList" class="session-tabs-list"></div>
-        </div>
-        <div class="modal-head-actions">
-          <button type="button" class="agent-md-modal-close" id="btnAgentEnvModalClose" aria-label="关闭">
-            &times;
-          </button>
-        </div>
-      </div>
-      <div class="agent-env-tab-panels">
-        <div id="agentEnvPanelEnv" class="tool-files-body agent-env-panel" hidden>
-          <div id="agentEnvList" class="tool-files-list"></div>
-        </div>
-        <div
-          id="agentEnvPanelAgentMd"
-          class="tool-files-body agent-env-panel agent-env-panel--md"
-          hidden
-        >
-          <p class="tool-files-meta" style="margin: 0; font-size: 0.75rem; color: var(--ds-text-soft)">
-            与磁盘上 <code>agent.md</code> 相同；点底部 <strong>保存</strong> 与 <code>config.env</code> 一并提交。
-          </p>
-          <textarea
-            id="agentEnvAgentMdEditor"
-            class="agent-md-editor"
-            spellcheck="false"
-            placeholder="加载中…"
-            aria-label="agent.md 源码"
-          ></textarea>
-        </div>
-        <div id="agentEnvPanelSettings" class="tool-files-body agent-env-panel" hidden>
-          <div style="display: grid; gap: 0.45rem">
-            <label for="agentEnvAgentTypeInput" style="font-size: 0.78rem; color: var(--ds-text-soft)">
-              <code>agentType</code>（只读）
-            </label>
-            <input
-              id="agentEnvAgentTypeInput"
-              class="agent-env-kv-input"
-              type="text"
-              aria-label="agent type"
-              readonly
-            />
-            <label for="agentEnvWhenToUseInput" style="font-size: 0.78rem; color: var(--ds-text-soft)">
-              <code>agent.json.whentouse</code>
-            </label>
-            <textarea
-              id="agentEnvWhenToUseInput"
-              class="agent-md-editor"
-              spellcheck="false"
-              placeholder="输入该 agent 的使用时机描述（whentouse）"
-              aria-label="agent.json whentouse"
-              style="min-height: 110px"
-            ></textarea>
-            <div class="agent-env-team-block">
-              <label>绑定队员（agentTeams）</label>
-              <p id="agentEnvTeamEmpty" class="agent-env-team-empty" hidden>尚未绑定队员</p>
-              <div id="agentEnvTeamChips" class="agent-env-team-chips"></div>
-              <div class="agent-env-team-add">
-                <select id="agentEnvTeamPick" aria-label="选择队员">
-                  <option value="">选择要添加的 Agent…</option>
-                </select>
-                <button type="button" class="btn-primary" id="btnAgentEnvAddTeamMember">添加</button>
-              </div>
-            </div>
-            <label for="agentEnvToolsInput" style="font-size: 0.78rem; color: var(--ds-text-soft)">
-              <code>agent.json.tools</code>（逗号或换行分隔）
-            </label>
-            <textarea
-              id="agentEnvToolsInput"
-              class="agent-md-editor"
-              spellcheck="false"
-              placeholder="只读展示当前 tools"
-              aria-label="agent.json tools"
-              style="min-height: 80px"
-              readonly
-            ></textarea>
-            <label for="agentEnvModelInput" style="font-size: 0.78rem; color: var(--ds-text-soft)">
-              <code>agent.json.model</code>
-            </label>
-            <input
-              id="agentEnvModelInput"
-              class="agent-env-kv-input"
-              type="text"
-              spellcheck="false"
-              placeholder="例如：sonnet"
-              aria-label="agent.json model"
-            />
-            <label for="agentEnvEffortInput" style="font-size: 0.78rem; color: var(--ds-text-soft)">
-              <code>agent.json.effort</code>
-            </label>
-            <select
-              id="agentEnvEffortInput"
-              class="agent-env-kv-input"
-              aria-label="agent.json effort"
-            >
-              <option value="low">low</option>
-              <option value="medium">medium</option>
-              <option value="high">high</option>
-              <option value="max">max</option>
-            </select>
-            <label for="agentEnvBackgroundInput" style="font-size: 0.78rem; color: var(--ds-text-soft)">
-              <code>agent.json.background</code>
-            </label>
-            <select
-              id="agentEnvBackgroundInput"
-              class="agent-env-kv-input"
-              aria-label="agent.json background"
-            >
-              <option value="false">false</option>
-              <option value="true">true</option>
-            </select>
-            <label for="agentEnvIsolationInput" style="font-size: 0.78rem; color: var(--ds-text-soft)">
-              <code>agent.json.isolation</code>
-            </label>
-            <select
-              id="agentEnvIsolationInput"
-              class="agent-env-kv-input"
-              aria-label="agent.json isolation"
-            >
-              <option value="">（空）</option>
-              <option value="worktree">worktree</option>
-              <option value="remote">remote</option>
-            </select>
-          </div>
-        </div>
-      </div>
-      <div class="agent-md-modal-foot">
-        <button type="button" class="btn-agent-md-cancel" id="btnAgentEnvCancel">取消</button>
-        <button type="button" class="btn-primary" id="btnAgentEnvSave">保存</button>
-      </div>
-    </div>
-  </div>
-
   <div id="mcpPackageModal" class="agent-md-modal" aria-hidden="true">
     <div class="agent-md-modal-backdrop" id="mcpPackageModalBackdrop"></div>
     <div class="agent-md-modal-card modal-unified" role="dialog" aria-modal="true" aria-labelledby="mcpPackageModalTitle">