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

@auto-ai/agent 2.1.163 → 2.1.167

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 (502) hide show

package/dist/agent-office.html CHANGED Viewed

@@ -3,157 +3,136 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>办公室</title>
-  <link rel="stylesheet" href="/ws-test.css" />
+  <title>Agent 列表</title>
   <style>
+    :root {
+      color-scheme: light;
+      --ds-page: #f2f2f7;
+      --ds-bg: #ffffff;
+      --ds-border: #e5e5ea;
+      --ds-text: #1c1c1e;
+      --ds-muted: #8e8e93;
+      --ds-accent: #0a84ff;
+      --ds-accent-hover: #0070e0;
+      --ds-danger: #ff3b30;
+    }
+    * { box-sizing: border-box; }
+    html, body { height: 100%; margin: 0; }
     body {
+      font-family: 'PingFang SC', 'Microsoft YaHei', ui-sans-serif, system-ui, sans-serif;
+      background: var(--ds-page);
+      color: var(--ds-text);
       overflow: hidden;
-      -webkit-font-smoothing: antialiased;
     }
-    .office-app {
+    #officeApp {
       display: flex;
       flex-direction: column;
       width: 100%;
       height: 100%;
-      background: var(--ds-bg);
     }
-    .office-header {
+    .office-topbar {
       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);
+      padding: 14px 20px;
       background: var(--ds-bg);
+      border-bottom: 1px solid var(--ds-border);
     }
-    .office-header-main {
-      min-width: 0;
-      flex: 1;
-    }
-    .office-header-title {
+    .office-brand h1 {
       margin: 0;
-      font-size: 16px;
+      font-size: 1.15rem;
       font-weight: 600;
-      line-height: 1.3;
-      color: var(--ds-text);
     }
-    .office-header-sub {
-      margin: 2px 0 0;
-      font-size: 12px;
+    .office-brand p {
+      margin: 0.2rem 0 0;
+      font-size: 0.82rem;
       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-top-actions {
+      display: flex;
+      gap: 8px;
     }
     .office-main {
       flex: 1;
       display: flex;
       min-height: 0;
       overflow: hidden;
-      background: var(--ds-bg);
     }
-    .office-list-root {
+    #agentListRoot {
       flex: 1;
       overflow: auto;
-      padding: 20px;
+      padding: 16px 20px 24px;
       min-width: 0;
     }
     .agent-list {
       list-style: none;
-      margin: 0 auto;
+      margin: 0;
       padding: 0;
       display: flex;
       flex-direction: column;
-      gap: 2px;
-      max-width: 640px;
+      gap: 10px;
+      max-width: 720px;
     }
     .agent-list-empty {
       color: var(--ds-muted);
-      font-size: 14px;
-      padding: 64px 16px;
+      font-size: 0.9rem;
+      padding: 48px 16px;
       text-align: center;
-      max-width: 640px;
-      margin: 0 auto;
     }
     .agent-list-item {
-      display: block;
+      display: flex;
+      align-items: center;
+      gap: 14px;
       width: 100%;
-      padding: 12px 14px;
-      border: none;
-      border-radius: 10px;
-      background: transparent;
+      padding: 14px 16px;
+      border: 1px solid var(--ds-border);
+      border-radius: 12px;
+      background: var(--ds-bg);
       cursor: pointer;
       text-align: left;
       font: inherit;
       color: inherit;
-      transition: background 120ms ease;
+      transition: border-color 0.15s, box-shadow 0.15s;
     }
     .agent-list-item:hover {
-      background: var(--ds-item-hover);
+      border-color: rgba(10, 132, 255, 0.35);
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
     }
     .agent-list-item.is-selected {
-      background: var(--ds-item-active);
+      border-color: var(--ds-accent);
+      box-shadow: 0 0 0 1px var(--ds-accent);
+    }
+    .agent-list-accent {
+      flex-shrink: 0;
+      width: 4px;
+      height: 40px;
+      border-radius: 2px;
     }
     .agent-list-body {
+      flex: 1;
+      min-width: 0;
       display: flex;
       flex-direction: column;
-      gap: 3px;
-      min-width: 0;
+      gap: 4px;
     }
-    .agent-list-name {
-      font-size: 15px;
+    .agent-list-id {
+      font-size: 1rem;
       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;
+    .agent-list-desc {
+      font-size: 0.82rem;
       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;
+      text-overflow: ellipsis;
     }
     .agent-list-team {
-      font-size: 12px;
-      color: var(--ds-muted);
+      font-size: 0.78rem;
+      color: var(--ds-accent);
+      white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      white-space: nowrap;
     }
     .office-team-section {
       margin-bottom: 1rem;
@@ -176,11 +155,11 @@
       display: inline-flex;
       align-items: center;
       gap: 4px;
-      padding: 4px 10px;
+      padding: 0.2rem 0.45rem 0.2rem 0.55rem;
       border-radius: 999px;
-      background: var(--ds-item-hover);
-      border: 1px solid var(--ds-border);
-      font-size: 12px;
+      background: rgba(10, 132, 255, 0.1);
+      border: 1px solid rgba(10, 132, 255, 0.25);
+      font-size: 0.78rem;
     }
     .office-team-chip button {
       border: none;
@@ -210,18 +189,22 @@
       padding: 0.45rem 0.55rem;
       font: inherit;
     }
+    .agent-list-arrow {
+      flex-shrink: 0;
+      color: var(--ds-muted);
+      font-size: 1.2rem;
+      line-height: 1;
+    }
     .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;
+      border-radius: 10px;
+      padding: 0.45rem 0.85rem;
+      font-size: 0.85rem;
       cursor: pointer;
-      transition: background 120ms ease, border-color 120ms ease;
     }
-    .office-btn:hover { background: var(--ds-item-hover); }
+    .office-btn:hover { background: #fafafa; }
     .office-btn-primary {
       background: var(--ds-accent);
       border-color: var(--ds-accent);
@@ -230,121 +213,86 @@
     .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;
+      border-color: rgba(255, 59, 48, 0.35);
     }
-    .office-btn-danger:hover {
-      background: #fef2f2;
-      border-color: var(--ds-danger);
-    }
-    .office-panel {
+    #officePanel {
       flex-shrink: 0;
-      width: min(400px, 44vw);
+      width: min(380px, 42vw);
       background: var(--ds-bg);
       border-left: 1px solid var(--ds-border);
       display: none;
       flex-direction: column;
       min-height: 0;
     }
-    .office-panel.is-open {
+    #officePanel.is-open {
       display: flex;
     }
     .office-panel-head {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: 12px;
-      padding: 14px 16px;
+      padding: 1rem 1rem 0.5rem;
       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;
+      font-size: 1rem;
     }
     .office-panel-close {
-      flex-shrink: 0;
-      width: 28px;
-      height: 28px;
       border: none;
-      border-radius: 6px;
       background: transparent;
-      font-size: 18px;
+      font-size: 1.4rem;
       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;
+      padding: 1rem;
       overflow: auto;
       flex: 1;
       min-height: 0;
     }
     .office-panel-meta {
-      margin: 0 0 14px;
-      font-size: 12px;
+      margin: 0 0 0.75rem;
+      font-size: 0.8rem;
       color: var(--ds-muted);
-      line-height: 1.45;
     }
     .office-form-row {
       display: flex;
       flex-direction: column;
-      gap: 6px;
-      margin-bottom: 14px;
+      gap: 0.35rem;
+      margin-bottom: 0.85rem;
     }
     .office-form-row label {
-      font-size: 12px;
-      font-weight: 500;
+      font-size: 0.82rem;
       color: var(--ds-muted);
     }
     .office-form-row input,
-    .office-form-row textarea,
-    .office-team-add select {
+    .office-form-row textarea {
       width: 100%;
       border: 1px solid var(--ds-border);
-      border-radius: var(--ds-radius-sm);
-      padding: 9px 11px;
+      border-radius: 10px;
+      padding: 0.55rem 0.65rem;
       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-row textarea { min-height: 72px; }
     .office-form-actions {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
-      margin-top: 8px;
-      padding-top: 4px;
+      margin-top: 0.5rem;
     }
     #officeToast {
       position: fixed;
       left: 50%;
       bottom: 28px;
       transform: translateX(-50%) translateY(12px);
-      background: var(--ds-text);
+      background: rgba(28, 28, 30, 0.92);
       color: #fff;
-      padding: 10px 16px;
-      border-radius: var(--ds-radius);
-      font-size: 13px;
+      padding: 0.65rem 1rem;
+      border-radius: 10px;
+      font-size: 0.85rem;
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.2s, transform 0.2s;
@@ -356,19 +304,10 @@
       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;
-    }
+    #officeToast.is-error { background: rgba(192, 57, 43, 0.95); }
     @media (max-width: 768px) {
       .office-main { flex-direction: column; }
-      .office-panel {
+      #officePanel {
         width: 100%;
         border-left: none;
         border-top: 1px solid var(--ds-border);
@@ -378,24 +317,21 @@
   </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 id="officeApp">
+    <header class="office-topbar">
+      <div class="office-brand">
+        <h1>Agent 列表</h1>
+        <p id="officeSubtitle">加载中…</p>
+      </div>
+      <div class="office-top-actions">
+        <button type="button" class="office-btn office-btn-primary" id="btnOfficeNewAgent">新建 Agent</button>
       </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>
+      <div id="agentListRoot" aria-label="Agent 列表"></div>
-      <aside id="officePanel" class="office-panel" aria-label="Agent 管理面板">
+      <aside id="officePanel" 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>
@@ -662,21 +598,31 @@
         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
+      const AGENT_ACCENT_COLORS = [
+        '#22d3c5',
+        '#4da3ff',
+        '#8b5cf6',
+        '#e84855',
+        '#f5c518',
+        '#c5e84c',
+      ]
+      const KNOWN_ACCENTS = {
+        dev: '#22d3c5',
+        edr: '#4da3ff',
+        qihoo: '#8b5cf6',
       }
-      /** 列表副 id：displayName 与 id 不同时展示 id */
-      function agentListSubId(row) {
-        const id = String(row.id || '').trim()
-        const title = agentListTitle(row)
-        return title !== id ? id : ''
+      /** 根据 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 */
@@ -726,7 +672,7 @@
           if (!agents.length) {
             const empty = document.createElement('div')
             empty.className = 'agent-list-empty'
-            empty.textContent = '暂无 Agent，点击「新建 Agent」创建'
+            empty.textContent = '暂无 Agent，点击右上角「新建 Agent」创建'
             this.container.appendChild(empty)
             return
           }
@@ -747,26 +693,22 @@
               '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-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)
-            }
+            title.className = 'agent-list-id'
+            title.textContent = id
             const desc = document.createElement('span')
             desc.className = 'agent-list-desc'
-            desc.textContent = truncateListDesc(row.whentouse, 120)
+            desc.textContent = truncateListDesc(row.whentouse, 80)
+            body.appendChild(title)
             body.appendChild(desc)
             const teamLine = formatAgentTeamLine(row)
@@ -777,7 +719,13 @@
               body.appendChild(team)
             }
+            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)
@@ -1054,12 +1002,7 @@
           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.panelTitleEl) this.panelTitleEl.textContent = 'Agent · ' + agentId
           if (this.panelMetaEl) this.panelMetaEl.textContent = '加载中…'
           if (this.btnDelete) {
             this.btnDelete.disabled = false
@@ -1084,15 +1027,6 @@
               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
               : []
@@ -1164,12 +1098,7 @@
               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
-            }
+            if (this.panelTitleEl) this.panelTitleEl.textContent = 'Agent · ' + id
             this.controller.selectAgent(id)
             this.syncUrlAgentParam(id)
             if (isEdit) {
@@ -1268,7 +1197,7 @@
             const subtitle = document.getElementById('officeSubtitle')
             if (subtitle) {
               subtitle.textContent =
-                String(agents.length) + ' 个 Agent'
+                String(agents.length) + ' 个 Agent · 点击列表项管理'
             }
             list.render(agents, controller.selectedId)
           },