npm - @auto-ai/agent - Versions diffs - 2.1.167 → 2.1.170 - Mend

@auto-ai/agent 2.1.167 → 2.1.170

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (847) hide show

package/dist/ws-test/agent-office.html ADDED Viewed

@@ -0,0 +1,1295 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>办公室</title>
+  <link rel="stylesheet" href="/ws-test.css" />
+  <style>
+    body {
+      overflow: hidden;
+      -webkit-font-smoothing: antialiased;
+    }
+    .office-app {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      background: var(--ds-bg);
+    }
+    .office-header {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      min-height: 52px;
+      padding: 0 20px;
+      border-bottom: 1px solid var(--ds-border);
+      background: var(--ds-bg);
+    }
+    .office-header-main {
+      min-width: 0;
+      flex: 1;
+    }
+    .office-header-title {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 1.3;
+      color: var(--ds-text);
+    }
+    .office-header-sub {
+      margin: 2px 0 0;
+      font-size: 12px;
+      color: var(--ds-muted);
+      line-height: 1.4;
+    }
+    .btn-office-new {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 14px;
+      border: none;
+      border-radius: 999px;
+      background: var(--ds-accent);
+      color: #fff;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: inherit;
+      cursor: pointer;
+      transition: background 120ms ease;
+    }
+    .btn-office-new:hover {
+      background: var(--ds-accent-hover);
+    }
+    .btn-office-new svg {
+      flex-shrink: 0;
+    }
+    .office-main {
+      flex: 1;
+      display: flex;
+      min-height: 0;
+      overflow: hidden;
+      background: var(--ds-bg);
+    }
+    .office-list-root {
+      flex: 1;
+      overflow: auto;
+      padding: 20px;
+      min-width: 0;
+    }
+    .agent-list {
+      list-style: none;
+      margin: 0 auto;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      max-width: 640px;
+    }
+    .agent-list-empty {
+      color: var(--ds-muted);
+      font-size: 14px;
+      padding: 64px 16px;
+      text-align: center;
+      max-width: 640px;
+      margin: 0 auto;
+    }
+    .agent-list-item {
+      display: block;
+      width: 100%;
+      padding: 12px 14px;
+      border: none;
+      border-radius: 10px;
+      background: transparent;
+      cursor: pointer;
+      text-align: left;
+      font: inherit;
+      color: inherit;
+      transition: background 120ms ease;
+    }
+    .agent-list-item:hover {
+      background: var(--ds-item-hover);
+    }
+    .agent-list-item.is-selected {
+      background: var(--ds-item-active);
+    }
+    .agent-list-body {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+      min-width: 0;
+    }
+    .agent-list-name {
+      font-size: 15px;
+      font-weight: 600;
+      line-height: 1.35;
+      color: var(--ds-text);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .agent-list-id-sub {
+      font-size: 12px;
+      font-family: ui-monospace, Menlo, monospace;
+      color: var(--ds-muted);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .agent-list-desc {
+      font-size: 13px;
+      color: var(--ds-secondary);
+      line-height: 1.45;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+    }
+    .agent-list-team {
+      font-size: 12px;
+      color: var(--ds-muted);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .office-team-section {
+      margin-bottom: 1rem;
+      padding-top: 0.25rem;
+      border-top: 1px solid var(--ds-border);
+    }
+    .office-team-section h3 {
+      margin: 0 0 0.5rem;
+      font-size: 0.88rem;
+      font-weight: 600;
+    }
+    .office-team-chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin-bottom: 0.65rem;
+      min-height: 28px;
+    }
+    .office-team-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 10px;
+      border-radius: 999px;
+      background: var(--ds-item-hover);
+      border: 1px solid var(--ds-border);
+      font-size: 12px;
+    }
+    .office-team-chip button {
+      border: none;
+      background: transparent;
+      color: var(--ds-muted);
+      cursor: pointer;
+      font-size: 1rem;
+      line-height: 1;
+      padding: 0 2px;
+    }
+    .office-team-chip button:hover { color: var(--ds-danger); }
+    .office-team-empty {
+      font-size: 0.8rem;
+      color: var(--ds-muted);
+      margin: 0 0 0.5rem;
+    }
+    .office-team-add {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+    .office-team-add select {
+      flex: 1;
+      min-width: 0;
+      border: 1px solid var(--ds-border);
+      border-radius: 10px;
+      padding: 0.45rem 0.55rem;
+      font: inherit;
+    }
+    .office-btn {
+      border: 1px solid var(--ds-border);
+      background: var(--ds-bg);
+      color: var(--ds-text);
+      border-radius: var(--ds-radius-sm);
+      padding: 8px 14px;
+      font-size: 13px;
+      font-family: inherit;
+      cursor: pointer;
+      transition: background 120ms ease, border-color 120ms ease;
+    }
+    .office-btn:hover { background: var(--ds-item-hover); }
+    .office-btn-primary {
+      background: var(--ds-accent);
+      border-color: var(--ds-accent);
+      color: #fff;
+    }
+    .office-btn-primary:hover { background: var(--ds-accent-hover); }
+    .office-btn-danger {
+      color: var(--ds-danger);
+      border-color: rgba(220, 38, 38, 0.25);
+      background: #fff;
+    }
+    .office-btn-danger:hover {
+      background: #fef2f2;
+      border-color: var(--ds-danger);
+    }
+    .office-panel {
+      flex-shrink: 0;
+      width: min(400px, 44vw);
+      background: var(--ds-bg);
+      border-left: 1px solid var(--ds-border);
+      display: none;
+      flex-direction: column;
+      min-height: 0;
+    }
+    .office-panel.is-open {
+      display: flex;
+    }
+    .office-panel-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 14px 16px;
+      border-bottom: 1px solid var(--ds-border);
+      flex-shrink: 0;
+    }
+    .office-panel-head h2 {
+      margin: 0;
+      font-size: 15px;
+      font-weight: 600;
+      line-height: 1.3;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+    }
+    .office-panel-close {
+      flex-shrink: 0;
+      width: 28px;
+      height: 28px;
+      border: none;
+      border-radius: 6px;
+      background: transparent;
+      font-size: 18px;
+      line-height: 1;
+      cursor: pointer;
+      color: var(--ds-muted);
+    }
+    .office-panel-close:hover {
+      background: var(--ds-item-hover);
+      color: var(--ds-text);
+    }
+    .office-panel-body {
+      padding: 16px;
+      overflow: auto;
+      flex: 1;
+      min-height: 0;
+    }
+    .office-panel-meta {
+      margin: 0 0 14px;
+      font-size: 12px;
+      color: var(--ds-muted);
+      line-height: 1.45;
+    }
+    .office-form-row {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      margin-bottom: 14px;
+    }
+    .office-form-row label {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--ds-muted);
+    }
+    .office-form-row input,
+    .office-form-row textarea,
+    .office-team-add select {
+      width: 100%;
+      border: 1px solid var(--ds-border);
+      border-radius: var(--ds-radius-sm);
+      padding: 9px 11px;
+      font: inherit;
+      font-size: 14px;
+      resize: vertical;
+      background: var(--ds-bg);
+      color: var(--ds-text);
+    }
+    .office-form-row input:focus,
+    .office-form-row textarea:focus,
+    .office-team-add select:focus {
+      outline: none;
+      border-color: var(--ds-accent);
+      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
+    }
+    .office-form-row textarea { min-height: 80px; line-height: 1.5; }
+    .office-form-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 8px;
+      padding-top: 4px;
+    }
+    #officeToast {
+      position: fixed;
+      left: 50%;
+      bottom: 28px;
+      transform: translateX(-50%) translateY(12px);
+      background: var(--ds-text);
+      color: #fff;
+      padding: 10px 16px;
+      border-radius: var(--ds-radius);
+      font-size: 13px;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.2s, transform 0.2s;
+      z-index: 100;
+      max-width: min(90vw, 420px);
+      text-align: center;
+    }
+    #officeToast.is-visible {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+    #officeToast.is-error { background: var(--ds-danger); }
+    .office-list-root::-webkit-scrollbar,
+    .office-panel-body::-webkit-scrollbar {
+      width: 5px;
+    }
+    .office-list-root::-webkit-scrollbar-thumb,
+    .office-panel-body::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.15);
+      border-radius: 999px;
+    }
+    @media (max-width: 768px) {
+      .office-main { flex-direction: column; }
+      .office-panel {
+        width: 100%;
+        border-left: none;
+        border-top: 1px solid var(--ds-border);
+        max-height: 50vh;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div id="officeApp" class="office-app">
+    <header class="office-header">
+      <div class="office-header-main">
+        <h1 class="office-header-title">办公室</h1>
+        <p class="office-header-sub" id="officeSubtitle">加载中…</p>
+      </div>
+      <button type="button" class="btn-office-new" id="btnOfficeNewAgent">
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+          <path d="M12 5v14M5 12h14"/>
+        </svg>
+        <span>新建 Agent</span>
+      </button>
+    </header>
+    <div class="office-main">
+      <div id="agentListRoot" class="office-list-root" aria-label="Agent 列表"></div>
+      <aside id="officePanel" class="office-panel" aria-label="Agent 管理面板">
+        <div class="office-panel-head">
+          <h2 id="officePanelTitle">Agent</h2>
+          <button type="button" class="office-panel-close" id="btnOfficePanelClose" aria-label="关闭">&times;</button>
+        </div>
+        <div class="office-panel-body">
+          <p id="officePanelMeta" class="office-panel-meta"></p>
+          <form id="officeAgentForm" onsubmit="return false">
+            <div class="office-form-row">
+              <label for="officeAgentId">Agent ID</label>
+              <input id="officeAgentId" type="text" spellcheck="false" placeholder="例如 my-agent" />
+            </div>
+            <div class="office-form-row">
+              <label for="officeAgentWhen">使用时机（whentouse）</label>
+              <textarea id="officeAgentWhen" spellcheck="false" placeholder="输入该 agent 的使用场景与触发说明"></textarea>
+            </div>
+            <div class="office-form-row">
+              <label for="officeAgentPrompt">agent.md</label>
+              <textarea id="officeAgentPrompt" spellcheck="false" placeholder="Agent 提示词"></textarea>
+            </div>
+            <section class="office-team-section" id="officeTeamSection" hidden>
+              <h3>绑定队员</h3>
+              <p id="officeTeamEmpty" class="office-team-empty" hidden>尚未绑定队员</p>
+              <div id="officeTeamChips" class="office-team-chips"></div>
+              <div class="office-team-add">
+                <select id="officeTeamPick" aria-label="选择队员">
+                  <option value="">选择要添加的 Agent…</option>
+                </select>
+                <button type="button" class="office-btn office-btn-primary" id="btnOfficeAddTeamMember">添加</button>
+              </div>
+            </section>
+            <div class="office-form-actions">
+              <button type="button" class="office-btn office-btn-primary" id="btnOfficeSave">保存</button>
+              <button type="button" class="office-btn office-btn-danger" id="btnOfficeDelete">删除</button>
+              <button type="button" class="office-btn" id="btnOfficeWorkbench">进入工作台</button>
+            </div>
+          </form>
+        </div>
+      </aside>
+    </div>
+    <div id="officeToast" role="status" aria-live="polite"></div>
+  </div>
+  <script>
+    ;(function () {
+      'use strict'
+      /** 解析 API 基址：支持 ?apiBase= 或当前页面 origin（与 ws-test 一致） */
+      function httpOriginForApi() {
+        try {
+          const fromQuery = new URLSearchParams(window.location.search).get('apiBase')
+          if (fromQuery && String(fromQuery).trim()) {
+            return String(fromQuery).trim().replace(/\/$/, '')
+          }
+        } catch {
+          /* ignore */
+        }
+        return window.location.origin
+      }
+      /** 构建 GET/POST /api/agents 列表地址（无需 agent 查询参数） */
+      function buildAgentsListUrl() {
+        return new URL('/api/agents', httpOriginForApi() + '/').toString()
+      }
+      /** 构建单个 agent 的 REST 地址（由 path 的 id 唯一标识目标） */
+      function buildAgentItemUrl(id) {
+        return new URL(
+          '/api/agents/' + encodeURIComponent(String(id || '').trim()),
+          httpOriginForApi() + '/',
+        ).toString()
+      }
+      /** 构建队员管理子资源地址 */
+      function buildAgentTeamMembersUrl(leaderId) {
+        return new URL(
+          '/api/agents/' +
+            encodeURIComponent(String(leaderId || '').trim()) +
+            '/team-members',
+          httpOriginForApi() + '/',
+        ).toString()
+      }
+      function buildAgentTeamMemberUrl(leaderId, agentType) {
+        return new URL(
+          '/api/agents/' +
+            encodeURIComponent(String(leaderId || '').trim()) +
+            '/team-members/' +
+            encodeURIComponent(String(agentType || '').trim()),
+          httpOriginForApi() + '/',
+        ).toString()
+      }
+      /**
+       * 拉取可绑定队员候选：仅 agent-runtime 下已创建的 Agent（与 agent.json.agentTeams 同源）。
+       * 不使用 /api/agent-teams（那是仓库内置 subagent 类型，不能写入 agentTeams）。
+       */
+      async function fetchTeamMemberCatalog(leaderId) {
+        const leader = String(leaderId || '').trim()
+        const agents = await fetchAgentsList()
+        const out = []
+        for (let i = 0; i < agents.length; i++) {
+          const row = agents[i]
+          const id = String(row.id || '').trim()
+          if (!id || id === leader) continue
+          out.push({
+            agentType: id,
+            whenToUse: typeof row.whentouse === 'string' ? row.whentouse : '',
+          })
+        }
+        out.sort((a, b) => a.agentType.localeCompare(b.agentType))
+        return out
+      }
+      /** 向 leader 追加一名绑定队员 */
+      async function addTeamMember(leaderId, agentType) {
+        const r = await fetch(buildAgentTeamMembersUrl(leaderId), {
+          method: 'POST',
+          headers: { 'content-type': 'application/json; charset=utf-8' },
+          body: JSON.stringify({ agentType: String(agentType || '').trim() }),
+        })
+        const body = await r.json().catch(() => ({}))
+        if (!r.ok) {
+          throw new Error(body.message || body.error || r.statusText)
+        }
+        return body.agent || null
+      }
+      /** 从 leader 移除一名绑定队员 */
+      async function removeTeamMember(leaderId, agentType) {
+        const r = await fetch(buildAgentTeamMemberUrl(leaderId, agentType), {
+          method: 'DELETE',
+        })
+        const body = await r.json().catch(() => ({}))
+        if (!r.ok) {
+          throw new Error(body.message || body.error || r.statusText)
+        }
+        return body.agent || null
+      }
+      /** 校验新建 agent id：字母数字下划线中划线，1~64 */
+      function isValidAgentIdInput(id) {
+        return /^[a-zA-Z0-9_-]{1,64}$/.test(String(id || '').trim())
+      }
+      /**
+       * 基于已有 agent.json 构造 PATCH config，仅更新 whentouse；
+       * effort 为 null 时不写入，避免覆盖服务端默认值。
+       */
+      function buildAgentConfigPatch(baseConfig, whentouse) {
+        const c = baseConfig && typeof baseConfig === 'object' ? baseConfig : {}
+        const env = c.env && typeof c.env === 'object' && !Array.isArray(c.env) ? c.env : {}
+        const patch = {
+          tools: Array.isArray(c.tools) ? c.tools.map(String) : [],
+          disallowedTools: Array.isArray(c.disallowedTools)
+            ? c.disallowedTools.map(String)
+            : [],
+          mcpServers: Array.isArray(c.mcpServers) ? c.mcpServers.map(String) : [],
+          skills: Array.isArray(c.skills) ? c.skills.map(String) : [],
+          agentTeams: Array.isArray(c.agentTeams) ? c.agentTeams.map(String) : [],
+          model: typeof c.model === 'string' ? c.model : '',
+          background: c.background === true,
+          isolation: typeof c.isolation === 'string' ? c.isolation : '',
+          whentouse: typeof whentouse === 'string' ? whentouse : '',
+          env,
+        }
+        if (typeof c.effort === 'string' || typeof c.effort === 'number') {
+          patch.effort = c.effort
+        }
+        return patch
+      }
+      /** 拉取 agent 列表 */
+      async function fetchAgentsList() {
+        const r = await fetch(buildAgentsListUrl())
+        const body = await r.json().catch(() => ({}))
+        if (!r.ok) {
+          throw new Error(body.message || body.error || r.statusText)
+        }
+        return Array.isArray(body.agents) ? body.agents : []
+      }
+      /** 拉取单个 agent 详情（含 config、prompt） */
+      async function fetchAgentDetail(id) {
+        const r = await fetch(buildAgentItemUrl(id))
+        const body = await r.json().catch(() => ({}))
+        if (!r.ok) {
+          throw new Error(body.message || body.error || r.statusText)
+        }
+        return body.agent || { id }
+      }
+      /** 删除 agent */
+      async function deleteAgent(id) {
+        const agentId = String(id || '').trim()
+        if (!agentId) throw new Error('缺少 agent id')
+        const tryDelete = async (withAgentQuery) => {
+          const u = new URL(buildAgentItemUrl(agentId))
+          if (withAgentQuery) {
+            u.searchParams.set('agent', agentId)
+          }
+          const r = await fetch(u.toString(), { method: 'DELETE' })
+          const body = await r.json().catch(() => ({}))
+          return { r, body }
+        }
+        let ret = await tryDelete(false)
+        if (!ret.r.ok) {
+          const msg = String(ret.body && (ret.body.message || ret.body.error || ''))
+          // 兼容仍要求 ?agent 的旧服务端；新服务端不会走该分支。
+          if (ret.r.status === 400 && msg.includes('missing required query parameter: agent')) {
+            ret = await tryDelete(true)
+          }
+        }
+        if (!ret.r.ok) {
+          throw new Error(ret.body.message || ret.body.error || ret.r.statusText)
+        }
+      }
+      /**
+       * 保存 agent：新建走 POST + PATCH whentouse；编辑走 PATCH prompt + config。
+       */
+      async function saveAgent(params) {
+        const { id, whentouse, prompt, isEdit, baseConfig, contextAgent } = params
+        if (isEdit) {
+          const patchRes = await fetch(buildAgentItemUrl(id), {
+            method: 'PATCH',
+            headers: { 'content-type': 'application/json; charset=utf-8' },
+            body: JSON.stringify({
+              prompt,
+              config: buildAgentConfigPatch(baseConfig, whentouse),
+            }),
+          })
+          const patchBody = await patchRes.json().catch(() => ({}))
+          if (!patchRes.ok) {
+            throw new Error(patchBody.message || patchBody.error || patchRes.statusText)
+          }
+          return id
+        }
+        const createRes = await fetch(buildAgentsListUrl(), {
+          method: 'POST',
+          headers: { 'content-type': 'application/json; charset=utf-8' },
+          body: JSON.stringify({ name: id, prompt }),
+        })
+        const createBody = await createRes.json().catch(() => ({}))
+        if (!createRes.ok) {
+          throw new Error(createBody.message || createBody.error || createRes.statusText)
+        }
+        const cfgBody = await fetchAgentDetail(id)
+        const baseCfg =
+          cfgBody.config && typeof cfgBody.config === 'object' ? cfgBody.config : null
+        const patchRes = await fetch(buildAgentItemUrl(id), {
+          method: 'PATCH',
+          headers: { 'content-type': 'application/json; charset=utf-8' },
+          body: JSON.stringify({
+            config: buildAgentConfigPatch(baseCfg, whentouse),
+          }),
+        })
+        const patchBody = await patchRes.json().catch(() => ({}))
+        if (!patchRes.ok) {
+          throw new Error(patchBody.message || patchBody.error || patchRes.statusText)
+        }
+        return id
+      }
+      /** 列表主标题：优先 displayName，否则用 id */
+      function agentListTitle(row) {
+        const id = String(row.id || '').trim()
+        const dn =
+          row && typeof row.displayName === 'string' && row.displayName.trim()
+            ? row.displayName.trim()
+            : ''
+        return dn || id
+      }
+      /** 列表副 id：displayName 与 id 不同时展示 id */
+      function agentListSubId(row) {
+        const id = String(row.id || '').trim()
+        const title = agentListTitle(row)
+        return title !== id ? id : ''
+      }
+      /** 列表页选中状态：仅维护当前 agent id */
+      class OfficeController {
+        constructor() {
+          this.selectedId = null
+          this.onSelect = null
+        }
+        /** 选中或取消选中，并通知侧栏 UI */
+        selectAgent(id) {
+          this.selectedId = id || null
+          if (this.onSelect) this.onSelect(this.selectedId)
+        }
+      }
+      function truncateListDesc(text, max) {
+        const s = String(text || '').replace(/\s+/g, ' ').trim()
+        if (!s) return '暂无使用说明'
+        return s.length <= max ? s : s.slice(0, max - 1) + '…'
+      }
+      /** 列表副标题：绑定队员摘要 */
+      function formatAgentTeamLine(row) {
+        const members = Array.isArray(row.agentTeamMembers)
+          ? row.agentTeamMembers
+          : []
+        if (!members.length) return ''
+        const names = members.map((m) => String(m.agentType || '').trim()).filter(Boolean)
+        const n = names.length
+        const preview = names.slice(0, 3).join('、')
+        const suffix = n > 3 ? '…' : ''
+        return n + ' 名队员 · ' + preview + suffix
+      }
+      /** Agent 列表 DOM 渲染 */
+      class AgentList {
+        constructor(container, onPick) {
+          this.container = container
+          this.onPick = onPick
+        }
+        render(agents, selectedId) {
+          if (!this.container) return
+          this.container.innerHTML = ''
+          if (!agents.length) {
+            const empty = document.createElement('div')
+            empty.className = 'agent-list-empty'
+            empty.textContent = '暂无 Agent，点击「新建 Agent」创建'
+            this.container.appendChild(empty)
+            return
+          }
+          const ul = document.createElement('ul')
+          ul.className = 'agent-list'
+          ul.setAttribute('role', 'list')
+          for (let i = 0; i < agents.length; i++) {
+            const row = agents[i]
+            const id = String(row.id || '').trim()
+            if (!id) continue
+            const li = document.createElement('li')
+            const btn = document.createElement('button')
+            btn.type = 'button'
+            btn.className =
+              'agent-list-item' + (selectedId === id ? ' is-selected' : '')
+            btn.setAttribute('aria-pressed', selectedId === id ? 'true' : 'false')
+            const body = document.createElement('span')
+            body.className = 'agent-list-body'
+            const title = document.createElement('span')
+            title.className = 'agent-list-name'
+            title.textContent = agentListTitle(row)
+            body.appendChild(title)
+            const subId = agentListSubId(row)
+            if (subId) {
+              const idEl = document.createElement('span')
+              idEl.className = 'agent-list-id-sub'
+              idEl.textContent = subId
+              body.appendChild(idEl)
+            }
+            const desc = document.createElement('span')
+            desc.className = 'agent-list-desc'
+            desc.textContent = truncateListDesc(row.whentouse, 120)
+            body.appendChild(desc)
+            const teamLine = formatAgentTeamLine(row)
+            if (teamLine) {
+              const team = document.createElement('span')
+              team.className = 'agent-list-team'
+              team.textContent = teamLine
+              body.appendChild(team)
+            }
+            btn.appendChild(body)
+            btn.addEventListener('click', () => {
+              if (this.onPick) this.onPick(id)
+            })
+            li.appendChild(btn)
+            ul.appendChild(li)
+          }
+          this.container.appendChild(ul)
+        }
+      }
+      /** 列表 + 侧栏 CRUD 与 URL ?agent= 同步 */
+      class OfficeUI {
+        constructor(root, controller, list, hooks) {
+          this.root = root
+          this.controller = controller
+          this.list = list
+          this.hooks = hooks || {}
+          this.contextAgent = ''
+          this.agents = []
+          this.editingId = null
+          this.baseConfig = null
+          this.mode = 'idle'
+          this.panelEl = root.querySelector('#officePanel')
+          this.panelTitleEl = root.querySelector('#officePanelTitle')
+          this.panelMetaEl = root.querySelector('#officePanelMeta')
+          this.formEl = root.querySelector('#officeAgentForm')
+          this.idInput = root.querySelector('#officeAgentId')
+          this.whenInput = root.querySelector('#officeAgentWhen')
+          this.promptInput = root.querySelector('#officeAgentPrompt')
+          this.btnNew = root.querySelector('#btnOfficeNewAgent')
+          this.btnSave = root.querySelector('#btnOfficeSave')
+          this.btnDelete = root.querySelector('#btnOfficeDelete')
+          this.btnWorkbench = root.querySelector('#btnOfficeWorkbench')
+          this.btnClose = root.querySelector('#btnOfficePanelClose')
+          this.toastEl = root.querySelector('#officeToast')
+          this.teamSection = root.querySelector('#officeTeamSection')
+          this.teamChips = root.querySelector('#officeTeamChips')
+          this.teamEmpty = root.querySelector('#officeTeamEmpty')
+          this.teamPick = root.querySelector('#officeTeamPick')
+          this.btnAddTeamMember = root.querySelector('#btnOfficeAddTeamMember')
+          this.boundTeamMembers = []
+          this.bindEvents()
+          this.hidePanel()
+        }
+        bindEvents() {
+          if (this.btnNew) {
+            this.btnNew.addEventListener('click', () => this.showCreateForm())
+          }
+          if (this.btnClose) {
+            this.btnClose.addEventListener('click', () => {
+              this.hidePanel()
+              this.controller.selectAgent(null)
+              this.clearUrlAgentParam()
+            })
+          }
+          if (this.btnSave) {
+            this.btnSave.addEventListener('click', () => void this.submitForm())
+          }
+          if (this.btnDelete) {
+            this.btnDelete.addEventListener('click', () => void this.handleDelete())
+          }
+          if (this.btnWorkbench) {
+            this.btnWorkbench.addEventListener('click', () => {
+              const id =
+                this.editingId || (this.idInput ? this.idInput.value.trim() : '')
+              if (!id) return
+              window.location.href =
+                '/ws-test.html?agent=' + encodeURIComponent(id)
+            })
+          }
+          if (this.btnAddTeamMember) {
+            this.btnAddTeamMember.addEventListener('click', () =>
+              void this.handleAddTeamMember(),
+            )
+          }
+        }
+        /** 同步侧栏队员 chips 与下拉候选 */
+        renderTeamMembers(leaderId, members, catalog) {
+          if (!this.teamSection) return
+          const isEdit = this.mode === 'edit' && !!leaderId
+          this.teamSection.hidden = !isEdit
+          if (!isEdit) return
+          const list = Array.isArray(members) ? members : []
+          this.boundTeamMembers = list
+          if (this.teamEmpty) {
+            this.teamEmpty.hidden = list.length > 0
+          }
+          if (this.teamChips) {
+            this.teamChips.innerHTML = ''
+            const boundSet = new Set(
+              list.map((m) => String(m.agentType || '').trim()).filter(Boolean),
+            )
+            for (let i = 0; i < list.length; i++) {
+              const m = list[i]
+              const agentType = String(m.agentType || '').trim()
+              if (!agentType) continue
+              const chip = document.createElement('span')
+              chip.className = 'office-team-chip'
+              chip.title =
+                typeof m.whentouse === 'string' && m.whentouse.trim()
+                  ? m.whentouse.trim()
+                  : agentType
+              const label = document.createElement('span')
+              label.textContent = agentType
+              const rm = document.createElement('button')
+              rm.type = 'button'
+              rm.setAttribute('aria-label', '移除 ' + agentType)
+              rm.textContent = '×'
+              rm.addEventListener('click', () =>
+                void this.handleRemoveTeamMember(agentType),
+              )
+              chip.appendChild(label)
+              chip.appendChild(rm)
+              this.teamChips.appendChild(chip)
+            }
+            if (this.teamPick) {
+              this.teamPick.innerHTML =
+                '<option value="">选择要添加的 Agent…</option>'
+              const types = Array.isArray(catalog) ? catalog : []
+              for (let j = 0; j < types.length; j++) {
+                const t = types[j]
+                const id = String(t.agentType || '').trim()
+                if (!id || id === leaderId || boundSet.has(id)) continue
+                const opt = document.createElement('option')
+                opt.value = id
+                const whenRaw =
+                  typeof t.whenToUse === 'string'
+                    ? t.whenToUse
+                    : typeof t.whentouse === 'string'
+                      ? t.whentouse
+                      : ''
+                const when = whenRaw.trim()
+                opt.textContent = when ? id + ' — ' + when.slice(0, 40) : id
+                this.teamPick.appendChild(opt)
+              }
+            }
+          }
+        }
+        async handleAddTeamMember() {
+          const leaderId = this.editingId
+          if (!leaderId || !this.teamPick) return
+          const agentType = this.teamPick.value.trim()
+          if (!agentType) {
+            this.showToast('请先选择要添加的队员', true)
+            return
+          }
+          try {
+            const agent = await addTeamMember(leaderId, agentType)
+            await this.refreshAgents()
+            const members =
+              agent && Array.isArray(agent.agentTeamMembers)
+                ? agent.agentTeamMembers
+                : this.boundTeamMembers
+            this.syncBaseConfigFromTeamAgent(agent)
+            const catalog = await fetchTeamMemberCatalog(leaderId)
+            this.renderTeamMembers(leaderId, members, catalog)
+            this.teamPick.value = ''
+            this.showToast('已添加队员 ' + agentType)
+          } catch (e) {
+            this.showToast('添加队员失败: ' + String(e), true)
+          }
+        }
+        async handleRemoveTeamMember(agentType) {
+          const leaderId = this.editingId
+          if (!leaderId) return
+          if (
+            !window.confirm('确定移除队员「' + agentType + '」？')
+          ) {
+            return
+          }
+          try {
+            const agent = await removeTeamMember(leaderId, agentType)
+            await this.refreshAgents()
+            const members =
+              agent && Array.isArray(agent.agentTeamMembers)
+                ? agent.agentTeamMembers
+                : []
+            this.syncBaseConfigFromTeamAgent(agent)
+            const catalog = await fetchTeamMemberCatalog(leaderId)
+            this.renderTeamMembers(leaderId, members, catalog)
+            this.showToast('已移除队员')
+          } catch (e) {
+            this.showToast('移除队员失败: ' + String(e), true)
+          }
+        }
+        /** 队员增删后同步 baseConfig，避免点「保存」把 agentTeams 写回旧值 */
+        syncBaseConfigFromTeamAgent(agentRow) {
+          if (!agentRow || typeof agentRow !== 'object') return
+          const teams = Array.isArray(agentRow.agentTeams)
+            ? agentRow.agentTeams.map(String)
+            : []
+          if (this.baseConfig && typeof this.baseConfig === 'object') {
+            this.baseConfig = { ...this.baseConfig, agentTeams: teams }
+            return
+          }
+          this.baseConfig = {
+            tools: [],
+            disallowedTools: [],
+            mcpServers: [],
+            skills: [],
+            agentTeams: teams,
+            model: '',
+            background: false,
+            isolation: '',
+            whentouse: this.whenInput ? this.whenInput.value : '',
+            env: {},
+          }
+        }
+        showToast(msg, isError) {
+          if (!this.toastEl) return
+          this.toastEl.textContent = msg
+          this.toastEl.classList.toggle('is-error', !!isError)
+          this.toastEl.classList.add('is-visible')
+          clearTimeout(this._toastTimer)
+          this._toastTimer = setTimeout(() => {
+            this.toastEl.classList.remove('is-visible')
+          }, 3200)
+        }
+        hidePanel() {
+          if (this.panelEl) this.panelEl.classList.remove('is-open')
+          this.editingId = null
+          this.baseConfig = null
+          this.mode = 'idle'
+          this.renderTeamMembers('', [], [])
+          this.list.render(this.agents, null)
+        }
+        showPanelForAgent(id) {
+          if (!this.panelEl) return
+          this.panelEl.classList.add('is-open')
+          this.list.render(this.agents, id)
+          void this.loadAgentIntoForm(id)
+        }
+        showCreateForm() {
+          if (!this.panelEl || !this.formEl) return
+          this.panelEl.classList.add('is-open')
+          this.mode = 'create'
+          this.editingId = null
+          this.baseConfig = null
+          if (this.panelTitleEl) this.panelTitleEl.textContent = '新建 Agent'
+          if (this.panelMetaEl) {
+            this.panelMetaEl.textContent = '创建后可从列表进入工作台'
+          }
+          if (this.idInput) {
+            this.idInput.value = ''
+            this.idInput.readOnly = false
+          }
+          if (this.whenInput) this.whenInput.value = ''
+          if (this.promptInput) this.promptInput.value = ''
+          if (this.btnDelete) this.btnDelete.disabled = true
+          if (this.btnWorkbench) this.btnWorkbench.disabled = true
+          this.renderTeamMembers('', [], [])
+          this.list.render(this.agents, null)
+        }
+        async loadAgentIntoForm(id) {
+          const agentId = String(id || '').trim()
+          if (!agentId) return
+          this.mode = 'edit'
+          this.editingId = agentId
+          const cached = this.agents.find(function (a) {
+            return String(a.id || '').trim() === agentId
+          })
+          if (this.panelTitleEl) {
+            this.panelTitleEl.textContent = cached ? agentListTitle(cached) : agentId
+          }
+          if (this.panelMetaEl) this.panelMetaEl.textContent = '加载中…'
+          if (this.btnDelete) {
+            this.btnDelete.disabled = false
+          }
+          if (this.btnWorkbench) this.btnWorkbench.disabled = false
+          try {
+            const agent = await fetchAgentDetail(agentId, this.contextAgent)
+            this.baseConfig =
+              agent.config && typeof agent.config === 'object' ? agent.config : null
+            if (this.idInput) {
+              this.idInput.value = agentId
+              this.idInput.readOnly = true
+            }
+            const whentouse =
+              agent.config && typeof agent.config.whentouse === 'string'
+                ? agent.config.whentouse
+                : typeof agent.whentouse === 'string'
+                  ? agent.whentouse
+                  : ''
+            if (this.whenInput) this.whenInput.value = whentouse
+            if (this.promptInput) {
+              this.promptInput.value =
+                typeof agent.prompt === 'string' ? agent.prompt : ''
+            }
+            if (this.panelTitleEl) {
+              const dn =
+                typeof agent.displayName === 'string' && agent.displayName.trim()
+                  ? agent.displayName.trim()
+                  : cached
+                    ? agentListTitle(cached)
+                    : agentId
+              this.panelTitleEl.textContent = dn
+            }
+            const members = Array.isArray(agent.agentTeamMembers)
+              ? agent.agentTeamMembers
+              : []
+            const catalog = await fetchTeamMemberCatalog(agentId)
+            this.renderTeamMembers(agentId, members, catalog)
+            if (this.baseConfig && typeof this.baseConfig === 'object') {
+              this.baseConfig.agentTeams = Array.isArray(agent.agentTeams)
+                ? agent.agentTeams.map(String)
+                : members.map((m) => String(m.agentType || '')).filter(Boolean)
+            }
+            if (this.panelMetaEl) {
+              const teamHint =
+                members.length > 0
+                  ? ' · ' + members.length + ' 名队员'
+                  : ''
+              this.panelMetaEl.textContent =
+                '共 ' +
+                String(this.agents.length) +
+                ' 个 Agent' +
+                teamHint
+            }
+          } catch (e) {
+            if (this.panelMetaEl) this.panelMetaEl.textContent = '加载失败'
+            this.renderTeamMembers('', [], [])
+            this.showToast('加载 Agent 失败: ' + String(e), true)
+          }
+        }
+        async refreshAgents() {
+          this.agents = await fetchAgentsList()
+          this.list.render(this.agents, this.controller.selectedId)
+          if (this.hooks.onAgentsLoaded) this.hooks.onAgentsLoaded(this.agents)
+          return this.agents
+        }
+        async submitForm() {
+          const isEdit = this.mode === 'edit' && !!this.editingId
+          const id = isEdit
+            ? this.editingId
+            : this.idInput
+              ? this.idInput.value.trim()
+              : ''
+          const whentouse = this.whenInput ? this.whenInput.value : ''
+          const prompt = this.promptInput ? this.promptInput.value : ''
+          if (!isEdit && !isValidAgentIdInput(id)) {
+            this.showToast(
+              'Agent ID 仅支持字母、数字、下划线和中划线，长度 1~64',
+              true,
+            )
+            return
+          }
+          try {
+            await saveAgent({
+              id,
+              whentouse,
+              prompt,
+              isEdit,
+              baseConfig: this.baseConfig,
+              contextAgent: this.contextAgent,
+            })
+            await this.refreshAgents()
+            this.mode = 'edit'
+            this.editingId = id
+            if (this.idInput) {
+              this.idInput.value = id
+              this.idInput.readOnly = true
+            }
+            if (this.btnDelete) {
+              this.btnDelete.disabled = false
+            }
+            if (this.btnWorkbench) this.btnWorkbench.disabled = false
+            const savedRow = this.agents.find(function (a) {
+              return String(a.id || '').trim() === id
+            })
+            if (this.panelTitleEl) {
+              this.panelTitleEl.textContent = savedRow ? agentListTitle(savedRow) : id
+            }
+            this.controller.selectAgent(id)
+            this.syncUrlAgentParam(id)
+            if (isEdit) {
+              await this.loadAgentIntoForm(id)
+            } else {
+              this.showPanelForAgent(id)
+            }
+            this.showToast(isEdit ? '已保存' : '已创建')
+          } catch (e) {
+            this.showToast((isEdit ? '保存失败: ' : '创建失败: ') + String(e), true)
+          }
+        }
+        async handleDelete() {
+          const id = this.editingId
+          if (!id) return
+          if (!window.confirm('确定删除 Agent「' + id + '」？此操作不可恢复。')) {
+            return
+          }
+          try {
+            await deleteAgent(id)
+            await this.refreshAgents()
+            this.hidePanel()
+            this.clearUrlAgentParam()
+            this.showToast('已删除')
+          } catch (e) {
+            this.showToast('删除失败: ' + String(e), true)
+          }
+        }
+        /** 支持通过 ?agent= 深链打开侧栏 */
+        async handleUrlAgentParam() {
+          let param = ''
+          try {
+            param = new URLSearchParams(window.location.search).get('agent') || ''
+          } catch {
+            return
+          }
+          const id = String(param).trim()
+          if (!id) return
+          const exists = this.agents.some((a) => String(a.id) === id)
+          if (!exists) {
+            this.showToast('agent 不存在，请先创建', true)
+            this.clearUrlAgentParam()
+            return
+          }
+          this.controller.selectAgent(id)
+          this.showPanelForAgent(id)
+        }
+        syncUrlAgentParam(id) {
+          try {
+            const u = new URL(window.location.href)
+            u.searchParams.set('agent', id)
+            window.history.replaceState(null, '', u.pathname + u.search)
+          } catch {
+            /* ignore */
+          }
+        }
+        clearUrlAgentParam() {
+          try {
+            const u = new URL(window.location.href)
+            u.searchParams.delete('agent')
+            const qs = u.searchParams.toString()
+            window.history.replaceState(null, '', u.pathname + (qs ? '?' + qs : ''))
+          } catch {
+            /* ignore */
+          }
+        }
+        onSelect(id) {
+          if (!id) {
+            this.hidePanel()
+            this.clearUrlAgentParam()
+            return
+          }
+          this.showPanelForAgent(id)
+          this.syncUrlAgentParam(id)
+        }
+      }
+      /** Agent 列表页入口 */
+      async function main() {
+        const app = document.getElementById('officeApp')
+        const listRoot = document.getElementById('agentListRoot')
+        if (!app || !listRoot) return
+        const controller = new OfficeController()
+        const list = new AgentList(listRoot, (id) => controller.selectAgent(id))
+        const ui = new OfficeUI(app, controller, list, {
+          onAgentsLoaded(agents) {
+            const subtitle = document.getElementById('officeSubtitle')
+            if (subtitle) {
+              subtitle.textContent =
+                String(agents.length) + ' 个 Agent'
+            }
+            list.render(agents, controller.selectedId)
+          },
+        })
+        controller.onSelect = (id) => ui.onSelect(id)
+        try {
+          await ui.refreshAgents()
+          await ui.handleUrlAgentParam()
+        } catch (e) {
+          ui.showToast('加载 Agent 失败: ' + String(e), true)
+          const subtitle = document.getElementById('officeSubtitle')
+          if (subtitle) subtitle.textContent = '加载失败'
+        }
+      }
+      main().catch((e) => {
+        console.error(e)
+      })
+    })()
+  </script>
+</body>
+</html>