npm - @auto-ai/agent - Versions diffs - 2.1.159 → 2.1.160 - Mend

@auto-ai/agent 2.1.159 → 2.1.160

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

package/dist/agent-office.html CHANGED Viewed

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