@auto-ai/agent 2.1.93 → 2.1.94

package/dist/agent-office.html

@@ -302,6 +302,585 @@
     <div id="officeToast" role="status" aria-live="polite"></div>
   </div>
 
-  <script type="module" src="/agent-office/main.js"></script>
+  <script>
+    ;(function () {
+      'use strict'
+
+      /** 列表/写操作 API 上下文：固定使用已存在的默认 agent */
+      const DEFAULT_CONTEXT_AGENT = 'qihoo'
+
+      /** 解析 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 列表地址 */
+      function buildAgentsListUrl(contextAgent) {
+        const u = new URL('/api/agents', httpOriginForApi() + '/')
+        u.searchParams.set('agent', contextAgent || DEFAULT_CONTEXT_AGENT)
+        return u.toString()
+      }
+
+      /** 构建单个 agent 的 REST 地址 */
+      function buildAgentItemUrl(id, contextAgent) {
+        const u = new URL(
+          '/api/agents/' + encodeURIComponent(String(id || '').trim()),
+          httpOriginForApi() + '/',
+        )
+        u.searchParams.set('agent', contextAgent || DEFAULT_CONTEXT_AGENT)
+        return u.toString()
+      }
+
+      /** 校验新建 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(contextAgent) {
+        const r = await fetch(buildAgentsListUrl(contextAgent))
+        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, contextAgent) {
+        const r = await fetch(buildAgentItemUrl(id, contextAgent))
+        const body = await r.json().catch(() => ({}))
+        if (!r.ok) {
+          throw new Error(body.message || body.error || r.statusText)
+        }
+        return body.agent || { id }
+      }
+
+      /** 删除 agent；默认 agent qihoo 不可删 */
+      async function deleteAgent(id, contextAgent) {
+        const agentId = String(id || '').trim()
+        if (!agentId) throw new Error('缺少 agent id')
+        if (agentId === DEFAULT_CONTEXT_AGENT) {
+          throw new Error('默认 Agent（' + DEFAULT_CONTEXT_AGENT + '）不可删除')
+        }
+        const r = await fetch(buildAgentItemUrl(agentId, contextAgent), { method: 'DELETE' })
+        const body = await r.json().catch(() => ({}))
+        if (!r.ok) {
+          throw new Error(body.message || body.error || 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, contextAgent), {
+            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(contextAgent), {
+          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, contextAgent)
+        const baseCfg =
+          cfgBody.config && typeof cfgBody.config === 'object' ? cfgBody.config : null
+        const patchRes = await fetch(buildAgentItemUrl(id, contextAgent), {
+          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
+      }
+
+      const AGENT_ACCENT_COLORS = [
+        '#22d3c5',
+        '#4da3ff',
+        '#8b5cf6',
+        '#e84855',
+        '#f5c518',
+        '#c5e84c',
+      ]
+
+      const KNOWN_ACCENTS = {
+        dev: '#22d3c5',
+        edr: '#4da3ff',
+        qihoo: '#8b5cf6',
+      }
+
+      /** 根据 agent id 分配列表左侧色带 */
+      function accentColorForId(id) {
+        const key = String(id || '').trim().toLowerCase()
+        if (KNOWN_ACCENTS[key]) return KNOWN_ACCENTS[key]
+        const s = String(id || 'a')
+        let h = 0
+        for (let i = 0; i < s.length; i++) {
+          h = (h + s.charCodeAt(i) * 17) % AGENT_ACCENT_COLORS.length
+        }
+        return AGENT_ACCENT_COLORS[h]
+      }
+
+      /** 列表页选中状态：仅维护当前 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) + '…'
+      }
+
+      /** 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 accent = document.createElement('span')
+            accent.className = 'agent-list-accent'
+            accent.style.background = accentColorForId(id)
+
+            const body = document.createElement('span')
+            body.className = 'agent-list-body'
+
+            const title = document.createElement('span')
+            title.className = 'agent-list-id'
+            title.textContent = id
+
+            const desc = document.createElement('span')
+            desc.className = 'agent-list-desc'
+            desc.textContent = truncateListDesc(row.whentouse, 80)
+
+            body.appendChild(title)
+            body.appendChild(desc)
+
+            const arrow = document.createElement('span')
+            arrow.className = 'agent-list-arrow'
+            arrow.textContent = '›'
+
+            btn.appendChild(accent)
+            btn.appendChild(body)
+            btn.appendChild(arrow)
+
+            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 = DEFAULT_CONTEXT_AGENT
+          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.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)
+            })
+          }
+        }
+
+        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.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.list.render(this.agents, null)
+        }
+
+        async loadAgentIntoForm(id) {
+          const agentId = String(id || '').trim()
+          if (!agentId) return
+          this.mode = 'edit'
+          this.editingId = agentId
+          if (this.panelTitleEl) this.panelTitleEl.textContent = 'Agent · ' + agentId
+          if (this.panelMetaEl) this.panelMetaEl.textContent = '加载中…'
+          if (this.btnDelete) {
+            this.btnDelete.disabled = agentId === DEFAULT_CONTEXT_AGENT
+          }
+          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.panelMetaEl) {
+              this.panelMetaEl.textContent =
+                '共 ' +
+                String(this.agents.length) +
+                ' 个 Agent · 上下文：' +
+                this.contextAgent
+            }
+          } catch (e) {
+            if (this.panelMetaEl) this.panelMetaEl.textContent = '加载失败'
+            this.showToast('加载 Agent 失败: ' + String(e), true)
+          }
+        }
+
+        async refreshAgents() {
+          this.agents = await fetchAgentsList(this.contextAgent)
+          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 = id === DEFAULT_CONTEXT_AGENT
+            }
+            if (this.btnWorkbench) this.btnWorkbench.disabled = false
+            if (this.panelTitleEl) this.panelTitleEl.textContent = 'Agent · ' + id
+            this.controller.selectAgent(id)
+            this.syncUrlAgentParam(id)
+            this.showToast(isEdit ? '已保存' : '已创建')
+          } catch (e) {
+            this.showToast((isEdit ? '保存失败: ' : '创建失败: ') + String(e), true)
+          }
+        }
+
+        async handleDelete() {
+          const id = this.editingId
+          if (!id || id === DEFAULT_CONTEXT_AGENT) return
+          if (!window.confirm('确定删除 Agent「' + id + '」？此操作不可恢复。')) {
+            return
+          }
+          try {
+            await deleteAgent(id, this.contextAgent)
+            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>