npm - @iamsamyiok/agents-chat - Versions diffs - 3.18.0 - Mend

@iamsamyiok/agents-chat 3.18.0

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

package/README.md +42 -0
package/app/lib/agent.js +487 -0
package/app/lib/aux-llm.js +107 -0
package/app/lib/cards.js +479 -0
package/app/lib/env.js +47 -0
package/app/lib/memory.js +202 -0
package/app/lib/oc.js +244 -0
package/app/lib/orchestrator.js +1177 -0
package/app/lib/store.js +686 -0
package/app/mock/mock-agent.js +125 -0
package/app/public/cards.html +628 -0
package/app/public/index.html +3279 -0
package/app/server.js +1334 -0
package/bin/agents-chat.js +263 -0
package/lib/start.js +10 -0
package/package.json +39 -0

package/app/public/cards.html ADDED Viewed

@@ -0,0 +1,628 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>多任务编排</title>
+<style>
+  :root{
+    --bg:#f5f5f5; --panel:#fff; --line:#e7e7e7; --line2:#f0f0f0;
+    --txt:#191919; --dim:#888; --acc:#07c160; --acc2:#10aeff; --warn:#e8a33d; --err:#fa5151;
+    --pending:#c9cdd4; --running:#10aeff; --done:#07c160; --failed:#fa5151;
+    --shadow:0 0 18px rgba(0,0,0,.06);
+  }
+  *{box-sizing:border-box}
+  html,body{height:100%}
+  body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
+    background:var(--bg);color:var(--txt);font-size:14px;display:flex;flex-direction:column;overflow:hidden}
+  header{display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
+  header h1{font-size:16px;margin:0;font-weight:600}
+  .backlink{font-size:13px;color:var(--acc);text-decoration:none;border:1px solid var(--acc);border-radius:6px;padding:5px 10px}
+  .backlink:hover{background:#f0faf4}
+  .sp{flex:1}
+  .btn{background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:7px 12px;cursor:pointer;font-size:13px;transition:.15s}
+  .btn:hover{border-color:var(--acc)}
+  .btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
+  .btn.primary:hover{filter:brightness(1.05)}
+  .btn.ghost{border-color:var(--warn);color:var(--warn)}
+  .btn.ghost:hover{background:#fdf6ec}
+  .btn.danger{border-color:var(--err);color:var(--err)}
+  .btn:disabled{opacity:.45;cursor:not-allowed}
+  .status-pill{font-size:12px;color:var(--dim)}
+  .ws-box{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
+  .ws-box input{border:none;outline:none;font-size:12px;width:200px;background:transparent}
+  .ws-box .ws-save{font-size:12px;color:var(--acc);cursor:pointer;white-space:nowrap}
+  .ws-box .ws-pick{font-size:12px;color:var(--acc2);cursor:pointer;white-space:nowrap}
+  /* 进程状态条 */
+  .procbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 18px;background:#0b0d11;color:#e6e9ef;font-size:12px;border-bottom:1px solid #222}
+  .procbar .ptitle{color:#9aa3b2;margin-right:4px}
+  .proc-chip{display:inline-flex;align-items:center;gap:6px;background:#1a1f29;border:1px solid #2a3340;border-radius:20px;padding:2px 10px}
+  .proc-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--done)}
+  .proc-chip.idle .dot{background:var(--warn)}
+  .proc-chip .pid{font-family:monospace;color:#cfe; }
+  .proc-chip .st{color:#9aa3b2}
+  .proc-empty{color:#5a6472}
+  main{padding:16px 18px;display:flex;gap:14px;align-items:stretch;flex:1;min-height:0}
+  /* 左侧依赖图面板（约 1/4 宽，可收起） */
+  #graphPanel{flex:0 0 25%;min-width:250px;max-width:340px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
+  #graphPanel.collapsed{display:none}
+  .gp-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line2);flex:none}
+  .gp-head h2{font-size:12px;margin:0;color:var(--dim);letter-spacing:.5px;flex:1;display:flex;align-items:center;gap:6px}
+  .gp-body{flex:1;overflow:auto;background:#fbfcfe;padding:10px 6px}
+  .gp-legend{font-size:10.5px;color:var(--dim);padding:6px 12px 8px;border-bottom:1px solid var(--line2);flex:none;line-height:1.7;background:#fff}
+  .gp-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin:0 3px 0 8px;vertical-align:middle}
+  #boardArea{flex:1;min-width:0;display:flex;gap:14px;align-items:flex-start;overflow-x:auto}
+  #boardArea .col{flex:1;min-width:190px;min-height:120px}
+  .col{flex:1;min-width:200px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:var(--shadow);display:flex;flex-direction:column;max-height:100%;overflow:hidden}
+  .col .drop-zone{flex:1;overflow-y:auto;min-height:0}
+  .col h2{font-size:13px;margin:0 0 10px;color:var(--dim);display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.5px}
+  .dot{width:8px;height:8px;border-radius:50%}
+  .card{background:#fafbfc;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px;cursor:grab;transition:.12s;position:relative}
+  .card:hover{border-color:var(--acc);box-shadow:0 2px 8px rgba(0,0,0,.08)}
+  .card.dragging{opacity:.4}
+  .card.drag-over{border-color:var(--acc);border-style:dashed}
+  .card .title{font-weight:600;margin-bottom:6px;line-height:1.4;word-break:break-word;padding-right:60px}
+  .card .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
+  .badge{font-size:11px;padding:2px 7px;border-radius:6px;background:#eef0f3;color:var(--dim);border:1px solid var(--line)}
+  .badge.prio-high{background:#fdeaea;color:var(--err);border-color:#f3c9c9}
+  .badge.prio-mid{background:#fbf2e0;color:var(--warn);border-color:#f0dcb8}
+  .badge.mode-continue{background:#e8f3ff;color:var(--acc2);border-color:#c4e2ff}
+  .badge.mode-parallel{background:#f1e9ff;color:#8a6fe8;border-color:#ddd0ff}
+  .badge.mode-new{background:#e8f7ed;color:var(--acc);border-color:#c4ecd3}
+  .card .op{position:absolute;top:8px;right:8px;display:none;gap:4px}
+  .card:hover .op{display:flex}
+  .icon-btn{background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:6px;width:24px;height:24px;cursor:pointer;font-size:12px;line-height:1}
+  .icon-btn:hover{color:var(--acc);border-color:var(--acc)}
+  .empty{color:var(--dim);font-size:12px;text-align:center;padding:18px 0}
+  .mask{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:50}
+  .mask.show{display:flex}
+  .modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:min(680px,94vw);max-height:90vh;overflow:auto;padding:20px;box-shadow:var(--shadow)}
+  .modal h3{margin:0 0 14px;font-size:16px}
+  label{display:block;font-size:12px;color:var(--dim);margin:10px 0 4px}
+  input,textarea,select{width:100%;background:#fff;border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit}
+  textarea{resize:vertical;min-height:90px}
+  .row{display:flex;gap:10px}.row>*{flex:1}
+  .modal .foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
+  .detail-log{background:#0b0d11;border:1px solid var(--line);border-radius:10px;padding:12px;max-height:42vh;overflow:auto;
+    font-family:"SFMono-Regular",Consolas,monospace;font-size:12.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word;color:#e6e9ef}
+  .detail-log .msg-user{color:#7fd0ff}
+  .detail-log .msg-assistant{color:#e6e9ef}
+  .detail-log .msg-tool{color:#e0a23b}
+  .detail-log .msg-err{color:#ff8a8a}
+  .detail-result{background:#fafbfc;border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:12px;white-space:pre-wrap;word-break:break-word;max-height:22vh;overflow:auto;line-height:1.6}
+  .dep-tag{font-size:11px;color:var(--acc2);margin-top:4px}
+  /* 失败原因摘要（看板卡） */
+  .card-err{margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--err);background:#fdeceb;border:1px solid #f3c9c9;border-radius:6px;padding:4px 8px;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+  /* 详情弹窗：完整错误块 */
+  .detail-err{background:#fdeceb;border:1px solid #f3c9c9;border-left:3px solid var(--err);border-radius:8px;padding:10px 12px;margin-bottom:10px;white-space:pre-wrap;word-break:break-word;max-height:18vh;overflow:auto;font-size:12.5px;line-height:1.6;color:#b03a31}
+  .detail-err b{color:var(--err)}
+  /* 追加聊天 */
+  .followup-box{border-top:1px dashed var(--line);margin-top:14px;padding-top:10px}
+  .followup-box .fu-head{font-size:12.5px;color:var(--acc2);margin-bottom:8px;display:flex;align-items:center;gap:6px}
+  .followup-box .fu-head .fu-st{font-size:11px;color:var(--dim)}
+  .fu-row{display:flex;gap:8px}
+  .fu-row textarea{flex:1;min-height:52px;resize:vertical;font-size:13px}
+  .fu-send{background:var(--acc2);border-color:var(--acc2);color:#fff;align-self:flex-end;white-space:nowrap}
+  .fu-send:disabled{opacity:.45;cursor:not-allowed}
+  .fu-tip{font-size:11px;color:var(--dim);margin-top:6px}
+  /* 迷你依赖图（左侧面板） */
+  .mini-svg .g-node{cursor:pointer}
+  .mini-svg .g-node rect{fill:#fff;stroke:#c9cdd4;stroke-width:1.4}
+  .mini-svg .g-node:hover rect{stroke:var(--acc);stroke-width:2.2}
+  .mini-svg .g-node.running rect{fill:#eef7ff;stroke:var(--running);stroke-dasharray:5 3}
+  .mini-svg .g-node.done rect{fill:#eef7f0;stroke:var(--done)}
+  .mini-svg .g-node.failed rect{fill:#fdeceb;stroke:var(--failed)}
+  .mini-svg .g-node text{font-size:11px;fill:#222}
+  .mini-svg .g-node .gt-sub{font-size:9.5px;fill:#999}
+  .mini-svg .edge{fill:none;stroke:#9aa8c7;stroke-width:1.6}
+  .mini-svg .edge.continue{stroke:var(--acc2);stroke-dasharray:5 3}
+  .mini-svg marker{fill:#9aa8c7}
+  .mini-svg marker.cont{fill:var(--acc2)}
+  .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;padding:10px 16px;border-radius:10px;z-index:99;opacity:0;transition:.25s;pointer-events:none}
+  .toast.show{opacity:1}
+  /* 依赖图（见左侧面板 mini-svg 样式） */
+  /* 垃圾桶 */
+  .trash-fab{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;background:var(--panel);border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.18);cursor:pointer;font-size:24px;display:flex;align-items:center;justify-content:center;z-index:40}
+  .trash-fab:hover{border-color:var(--err);color:var(--err)}
+  .trash-fab .cnt{position:absolute;top:-6px;right:-6px;background:var(--err);color:#fff;font-size:11px;border-radius:10px;padding:1px 6px}
+  #trashMask .modal{width:min(640px,94vw)}
+  .trash-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
+  .trash-item .ti-info{flex:1;min-width:0}
+  .trash-item .ti-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .trash-item .ti-sub{font-size:11px;color:var(--dim)}
+</style>
+</head>
+<body>
+<header>
+  <a class="backlink" href="/" title="返回 Agents Chat 群聊">← 群聊</a>
+  <h1>🗂️ 多任务编排</h1>
+  <span class="status-pill" id="statusPill">空闲</span>
+  <span class="sp"></span>
+  <div class="ws-box" title="工作区：选定后 Agent 在该目录读写相关文件（可选）">
+    📁 <input id="wsInput" placeholder="工作文件夹（点右侧选择）" />
+    <span class="ws-pick" id="wsPick" title="弹窗选择文件夹">选择</span>
+    <span class="ws-save" id="wsSave">保存</span>
+  </div>
+  <button class="btn" id="btnNew">＋ 新建任务</button>
+  <button class="btn primary" id="btnRun">▶ 开始编排</button>
+  <button class="btn danger" id="btnStop" disabled>⏹ 停止</button>
+  <button class="btn" id="btnClear">清空</button>
+</header>
+<div class="procbar" id="procBar"><span class="ptitle">进程：</span><span class="proc-empty">无运行中的 opencode 进程</span></div>
+<main>
+  <!-- 左侧：依赖图面板（约 1/4 宽，可收起） -->
+  <aside id="graphPanel">
+    <div class="gp-head">
+      <h2><span class="dot" style="background:var(--acc2)"></span>🔗 依赖图</h2>
+      <button class="icon-btn" id="gpCollapse" title="收起面板">◀</button>
+    </div>
+    <div class="gp-legend">
+      自上而下按依赖分层；实线=依赖，蓝色虚线=同会话续聊。
+      <i style="background:var(--pending)"></i>待执行
+      <i style="background:var(--running)"></i>执行中
+      <i style="background:var(--done)"></i>完成
+      <i style="background:var(--failed)"></i>失败
+    </div>
+    <div class="gp-body" id="graphBody"></div>
+  </aside>
+  <!-- 右侧：四列看板 -->
+  <div id="boardArea">
+    <div class="col"><h2><span class="dot" style="background:var(--pending)"></span>待执行 <span id="cntPending" class="badge"></span></h2><div id="colPending" class="drop-zone"></div></div>
+    <div class="col"><h2><span class="dot" style="background:var(--running)"></span>执行中 <span id="cntRunning" class="badge"></span></h2><div id="colRunning" class="drop-zone"></div></div>
+    <div class="col"><h2><span class="dot" style="background:var(--done)"></span>已完成 <span id="cntDone" class="badge"></span></h2><div id="colDone" class="drop-zone"></div></div>
+    <div class="col"><h2><span class="dot" style="background:var(--failed)"></span>失败 <span id="cntFailed" class="badge"></span></h2><div id="colFailed" class="drop-zone"></div></div>
+  </div>
+</main>
+<span id="gpExpand" style="display:none;position:fixed;left:14px;bottom:80px;z-index:41" title="展开依赖图"><button class="btn" id="gpExpandBtn">▶ 依赖图</button></span>
+<!-- 新建/编辑任务 -->
+<div class="mask" id="maskEdit">
+  <div class="modal">
+    <h3 id="editTitle">新建任务</h3>
+    <label>标题</label>
+    <input id="fTitle" placeholder="一句话概括任务" />
+    <label>任务内容（描述，支持 Markdown）</label>
+    <textarea id="fContent" placeholder="把要做的事详细写在这里，Agent 会据此执行"></textarea>
+    <div class="row">
+      <div><label>优先级（数字越小越优先）</label><input id="fPriority" type="number" value="999" /></div>
+      <div><label>执行模式</label>
+        <select id="fMode">
+          <option value="new">新进程（new）</option>
+          <option value="continue">同会话续聊（continue）</option>
+          <option value="parallel">并行独立进程（parallel）</option>
+        </select>
+      </div>
+    </div>
+    <div class="row">
+      <div><label>续聊链首（仅 continue 模式）</label><select id="fChain"></select></div>
+      <div><label>依赖任务（完成后才可执行）</label><select id="fDeps" multiple size="3"></select></div>
+    </div>
+    <label>模型（留空用默认）</label><input id="fModel" placeholder="provider/model" />
+    <div class="foot">
+      <button class="btn" id="btnEditCancel">取消</button>
+      <button class="btn primary" id="btnEditSave">保存</button>
+    </div>
+  </div>
+</div>
+<!-- 任务详情：失败原因 + 过程 + 结果 + 追加聊天 -->
+<div class="mask" id="maskDetail">
+  <div class="modal">
+    <h3 id="dTitle">任务详情</h3>
+    <div id="dMeta" class="meta" style="margin-bottom:10px"></div>
+    <div class="dep-tag" id="dDeps"></div>
+    <div class="detail-err" id="dError" style="display:none"></div>
+    <label>执行过程（实时）</label>
+    <div class="detail-log" id="dLog"><span class="empty">暂无过程记录</span></div>
+    <label>最终结果</label>
+    <div class="detail-result" id="dResult"><span class="empty">尚未产生结果</span></div>
+    <div class="followup-box" id="fuBox">
+      <div class="fu-head">💬 追加聊天 <span class="fu-st" id="fuState"></span></div>
+      <div class="fu-row">
+        <textarea id="fuInput" placeholder="在本次会话中继续输入，Agent 将带着此前上下文回答或继续执行…（Enter 发送，Shift+Enter 换行）"></textarea>
+        <button class="btn fu-send" id="fuSend">发送</button>
+      </div>
+      <div class="fu-tip" id="fuTip">复用该任务的会话上下文，等效同一进程的第二轮输入</div>
+    </div>
+    <div class="foot">
+      <button class="btn" id="dClose">关闭</button>
+      <button class="btn primary" id="dRun">▶ 立即执行</button>
+    </div>
+  </div>
+</div>
+<!-- 垃圾桶 -->
+<div class="mask" id="trashMask">
+  <div class="modal">
+    <h3>🗑️ 垃圾桶 <span style="font-size:12px;color:var(--dim)">（保留 30 天内删除的任务快照）</span></h3>
+    <div id="trashList"></div>
+    <div class="foot">
+      <button class="btn danger" id="trashEmpty">清空垃圾桶</button>
+      <button class="btn" id="trashClose">关闭</button>
+    </div>
+  </div>
+</div>
+<div class="trash-fab" id="trashFab" title="垃圾桶">🗑️<span class="cnt" id="trashCnt" style="display:none">0</span></div>
+<input type="file" id="dirPicker" webkitdirectory directory multiple style="display:none" />
+<div class="toast" id="toast"></div>
+<script>
+const $ = s => document.querySelector(s);
+const api = async (url, opt) => { const r = await fetch(url, opt); return r.json(); };
+const post = (url, body) => api(url, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body||{})});
+function toast(msg){ const t=$('#toast'); t.textContent=msg; t.classList.add('show'); setTimeout(()=>t.classList.remove('show'),1800); }
+function esc(s){const d=document.createElement('div');d.textContent=s==null?'':String(s);return d.innerHTML;}
+let CARDS = [];
+let OPEN_ID = null;
+async function loadCards(){
+  const data = await api('/api/cards');
+  CARDS = data.cards || [];
+  $('#statusPill').textContent = data.running ? '编排中…' : '空闲';
+  $('#btnRun').disabled = data.running;
+  $('#btnStop').disabled = !data.running;
+  if(data.config) $('#wsInput').value = data.config.workspace || '';
+  render();
+  renderGraph();
+  loadTrashCount();
+}
+function badge(card){
+  let p = card.priority;
+  let pc = p<=100?'prio-high':(p<=500?'prio-mid':'');
+  let pm = 'mode-'+card.mode;
+  let html = `<span class="badge ${pc}">P${p}</span><span class="badge ${pm}">${card.mode}</span>`;
+  if(card.dependsOn && card.dependsOn.length) html += `<span class="badge">依赖 ${card.dependsOn.length}</span>`;
+  return html;
+}
+function errSummary(err){
+  if(!err) return '';
+  return String(err).split('\n').map(s=>s.trim()).filter(Boolean)[0] || '';
+}
+function cardEl(card){
+  const el = document.createElement('div');
+  el.className='card';
+  el.draggable = true;
+  el.dataset.id = card.id;
+  el.dataset.status = card.status;
+  const errHtml = (card.status==='failed' && (card.error||card.followupError))
+    ? `<div class="card-err" title="${esc(card.error||card.followupError)}">⚠ ${esc(errSummary(card.error||card.followupError).slice(0,140))}</div>` : '';
+  el.innerHTML = `<div class="title">${esc(card.title)}</div>
+    <div class="meta">${badge(card)} ${card.status!=='pending'&&card.status!=='running'?`<span class="badge">${card.status}</span>`:''}</div>
+    ${errHtml}
+    <div class="op">
+      <button class="icon-btn" data-act="run" title="执行">▶</button>
+      <button class="icon-btn" data-act="edit" title="编辑">✎</button>
+      <button class="icon-btn" data-act="del" title="删除">✕</button>
+    </div>`;
+  el.onclick = (e)=>{ const b=e.target.closest('[data-act]'); if(b){e.stopPropagation(); const a=b.dataset.act;
+    if(a==='del') delCard(card.id); else if(a==='edit') openEdit(card); else if(a==='run') runOne(card.id); return; }
+    openDetail(card.id); };
+  el.addEventListener('dragstart', e=>{ dragId=card.id; el.classList.add('dragging'); e.dataTransfer.effectAllowed='move'; });
+  el.addEventListener('dragend', ()=>{ el.classList.remove('dragging'); document.querySelectorAll('.card').forEach(c=>c.classList.remove('drag-over')); });
+  el.addEventListener('dragover', e=>{ e.preventDefault(); el.classList.add('drag-over'); });
+  el.addEventListener('dragleave', ()=> el.classList.remove('drag-over'));
+  el.addEventListener('drop', e=>{ e.preventDefault(); el.classList.remove('drag-over'); onDrop(card.id, el); });
+  return el;
+}
+let dragId=null;
+function onDrop(targetId, targetEl){
+  if(!dragId || dragId===targetId) return;
+  const dragged = document.querySelector(`.card[data-id="${dragId}"]`);
+  if(!dragged) return;
+  const rect = targetEl.getBoundingClientRect();
+  const y = window.__dropY || 0;
+  const after = (y > rect.top + rect.height/2);
+  if(after) targetEl.parentNode.insertBefore(dragged, targetEl.nextSibling);
+  else targetEl.parentNode.insertBefore(dragged, targetEl);
+  dragId=null;
+  const ids = [...document.querySelectorAll('.card')].map(c=>c.dataset.id);
+  post('/api/cards/reorder',{ids}).then(()=>loadCards());
+}
+document.addEventListener('dragover', e=>{ window.__dropY = e.clientY; }, true);
+function render(){
+  const cols = {pending:$('#colPending'),running:$('#colRunning'),done:$('#colDone'),failed:$('#colFailed')};
+  for(const k in cols) cols[k].innerHTML='';
+  let counts={pending:0,running:0,done:0,failed:0};
+  for(const c of CARDS){ counts[c.status]=(counts[c.status]||0)+1; (cols[c.status]||cols.pending).appendChild(cardEl(c)); }
+  $('#cntPending').textContent=counts.pending||''; $('#cntRunning').textContent=counts.running||'';
+  $('#cntDone').textContent=counts.done||''; $('#cntFailed').textContent=counts.failed||'';
+  for(const k in cols){ if(!cols[k].children.length) cols[k].innerHTML='<div class="empty">—</div>'; }
+}
+// ---- 编辑/新建 ----
+function fillSelectors(){
+  const ch=$('#fChain'); ch.innerHTML='<option value="">（无）</option>'+CARDS.map(c=>`<option value="${c.id}">${esc(c.title)}</option>`).join('');
+  const dp=$('#fDeps'); dp.innerHTML=CARDS.map(c=>`<option value="${c.id}">${esc(c.title)}</option>`).join('');
+}
+let EDIT_ID=null;
+function openEdit(card){
+  EDIT_ID = card?card.id:null;
+  $('#editTitle').textContent = card?'编辑任务':'新建任务';
+  $('#fTitle').value = card?card.title:'';
+  $('#fContent').value = card?card.content:'';
+  $('#fPriority').value = card?card.priority:999;
+  $('#fMode').value = card?card.mode:'new';
+  $('#fModel').value = card?card.model:'';
+  fillSelectors();
+  if(card){ $('#fChain').value=card.chainId||''; for(const o of $('#fDeps').options) o.selected=card.dependsOn.includes(o.value); }
+  $('#maskEdit').classList.add('show');
+}
+$('#btnNew').onclick=()=>openEdit(null);
+$('#btnEditCancel').onclick=()=>$('#maskEdit').classList.remove('show');
+$('#btnEditSave').onclick=async()=>{
+  const body={ title:$('#fTitle').value, content:$('#fContent').value, priority:Number($('#fPriority').value)||999,
+    mode:$('#fMode').value, chainId:$('#fChain').value, model:$('#fModel').value,
+    dependsOn:[...$('#fDeps').selectedOptions].map(o=>o.value) };
+  if(EDIT_ID) await api('/api/cards/'+EDIT_ID,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
+  else await post('/api/cards',body);
+  $('#maskEdit').classList.remove('show'); await loadCards(); toast('已保存');
+};
+async function delCard(id){ if(!confirm('确认删除该任务？将移入垃圾桶（30 天内可还原）。'))return; await api('/api/cards/'+id,{method:'DELETE'}); await loadCards(); toast('已移入垃圾桶'); }
+$('#btnClear').onclick=async()=>{ if(!confirm('清空全部任务？将移入垃圾桶（30 天内可还原）。'))return; await post('/api/cards/clear'); await loadCards(); };
+// ---- 执行控制 ----
+$('#btnRun').onclick=async()=>{ await post('/api/cards/run'); await loadCards(); toast('已开始编排，完成即自动注入下一个任务'); };
+$('#btnStop').onclick=async()=>{ await post('/api/cards/stop'); await loadCards(); };
+async function runOne(id){ await post('/api/cards/'+id+'/run'); await loadCards(); }
+// ---- 工作区（弹窗选择文件夹） ----
+$('#wsPick').onclick=()=>{ $('#dirPicker').value=''; $('#dirPicker').click(); };
+$('#dirPicker').addEventListener('change', ()=>{
+  const f = $('#dirPicker').files && $('#dirPicker').files[0];
+  if(!f) return;
+  // 优先取绝对路径（Electron/桌面环境），否则取顶层文件夹名（标准浏览器）
+  let p = (f.path && typeof f.path === 'string') ? f.path : (f.webkitRelativePath ? f.webkitRelativePath.split('/')[0] : '');
+  $('#wsInput').value = p;
+  if(p) post('/api/cards/config',{workspace:p}).then(()=>toast('工作区已设为：'+p));
+});
+$('#wsSave').onclick=async()=>{ const v=$('#wsInput').value.trim(); const r=await post('/api/cards/config',{workspace:v}); if(r.success){ toast(v?'工作区已设为：'+v:'工作区已清除'); } };
+// ---- 详情 ----
+function appendLog(el, line, cls){
+  const span=document.createElement('div'); if(cls) span.className=cls; span.textContent=line; el.appendChild(span);
+}
+let FU_RUNNING = false;
+let FU_PARTS = new Map(); // 追加聊天正文：partId -> DOM 节点（快照覆盖式渲染）
+function fuSetState(running, tipText){
+  FU_RUNNING = running;
+  const btn=$('#fuSend');
+  btn.disabled = running || !OPEN_ID;
+  btn.textContent = running ? '回复中…' : '发送';
+  if(tipText!==undefined) $('#fuTip').textContent = tipText;
+}
+async function openDetail(id){
+  OPEN_ID=id; const data=await api('/api/cards/'+id+'/log'); const card=data.card; const msgs=data.messages||[];
+  $('#dTitle').textContent=card.title;
+  $('#dMeta').innerHTML=badge(card)+`<span class="badge">${card.status}</span>`;
+  const depTitles = (card.dependsOn||[]).map(d=>{const c=CARDS.find(x=>x.id===d);return c?c.title:d;});
+  $('#dDeps').textContent = depTitles.length ? ('依赖：'+depTitles.join('、')) : '';
+  // 失败原因块：任务执行错误优先，其次追加聊天的错误
+  const errBox=$('#dError');
+  const errText = card.error || card.followupError || '';
+  if(errText){ errBox.style.display='block'; errBox.innerHTML='<b>⚠ 失败原因</b>\n'+esc(errText); }
+  else errBox.style.display='none';
+  const log=$('#dLog'); log.innerHTML=''; FU_PARTS.clear();
+  if(!msgs.length) log.innerHTML='<span class="empty">暂无过程记录</span>';
+  for(const m of msgs){
+    if(m.role==='user') appendLog(log,'👤 '+m.content,'msg-user');
+    else if(/工具|执行完成/.test(m.content||'')) appendLog(log,'🔧 '+m.content,'msg-tool');
+    else if(/出错|失败/.test(m.content||'')) appendLog(log,'⚠ '+m.content,'msg-err');
+    else appendLog(log,'🤖 '+(m.content||'').slice(0,4000),'msg-assistant');
+    if(m.outputPath) appendLog(log,'📄 产出文件: '+m.outputPath);
+  }
+  log.scrollTop=log.scrollHeight;
+  const res=$('#dResult');
+  if(card.result) res.textContent=card.result; else res.innerHTML='<span class="empty">尚未产生结果</span>';
+  $('#dRun').style.display = (card.status==='running')?'none':'inline-block';
+  // 追加聊天：任务结束（非 pending/running）即可用；无会话时提示限制
+  const fuOk = card.status!=='pending' && card.status!=='running';
+  $('#fuBox').style.display = fuOk ? 'block' : 'none';
+  $('#fuState').textContent = FU_RUNNING ? '回复中…' : '';
+  if(fuOk && !card.ocSessionId) $('#fuTip').textContent='当前内核不支持会话续聊，追加输入将开启全新上下文';
+  else if(fuOk) $('#fuTip').textContent='复用该任务的会话上下文，等效同一进程的第二轮输入';
+  fuSetState(FU_RUNNING);
+  $('#maskDetail').classList.add('show');
+}
+$('#dClose').onclick=()=>{ OPEN_ID=null; $('#maskDetail').classList.remove('show'); };
+$('#dRun').onclick=async()=>{ if(!OPEN_ID)return; await runOne(OPEN_ID); openDetail(OPEN_ID); };
+// ---- 追加聊天：复用会话第二轮输入 ----
+async function sendFollowup(){
+  if(!OPEN_ID || FU_RUNNING) return;
+  const ta=$('#fuInput'); const text=ta.value.trim();
+  if(!text){ toast('请输入追加内容'); return; }
+  fuSetState(true,'已发送，等待 Agent 基于原会话上下文回复…');
+  appendLog($('#dLog'),'👤 '+text,'msg-user');
+  $('#dLog').scrollTop=$('#dLog').scrollHeight;
+  ta.value='';
+  try{
+    const r = await post('/api/cards/'+encodeURIComponent(OPEN_ID)+'/chat',{prompt:text});
+    if(!r.success && r.error){ toast('追加聊天失败：'+errSummary(r.error)); appendLog($('#dLog'),'⚠ '+r.error,'msg-err'); }
+  }catch(e){ toast('追加聊天请求失败'); }
+  finally{ fuSetState(false); }
+}
+$('#fuSend').onclick=sendFollowup;
+$('#fuInput').addEventListener('keydown',e=>{
+  if(e.key==='Enter'&&!e.shiftKey){ e.preventDefault(); sendFollowup(); }
+});
+// ---- 左侧依赖图面板：竖向分层（依赖在上、被依赖者在下），层内横排 ----
+let G_SIG=''; // 结构+状态指纹：无变化时跳过重绘（避免流式输出期间闪烁）
+function renderGraph(force){
+  const box=$('#graphBody');
+  const cards=CARDS;
+  const sig=cards.map(c=>c.id+':'+c.status+':'+(c.dependsOn||[]).join(',')).join('|');
+  if(!force && sig===G_SIG && box.querySelector('svg')) return;
+  G_SIG=sig;
+  if(!cards.length){ box.innerHTML='<div class="empty" style="padding:24px 8px">暂无任务<br/>新建任务后此处展示依赖关系</div>'; return; }
+  const byId=Object.fromEntries(cards.map(c=>[c.id,c]));
+  const depth={}; const visiting={};
+  function calc(id){
+    if(depth[id]!==undefined) return depth[id];
+    if(visiting[id]){ depth[id]=0; return 0; } // 环兜底
+    visiting[id]=true;
+    const c=byId[id]; const deps=(c.dependsOn||[]).filter(d=>byId[d]);
+    const d=deps.length?Math.max(...deps.map(calc))+1:0;
+    visiting[id]=false; depth[id]=d; return d;
+  }
+  cards.forEach(c=>calc(c.id));
+  const layers={};
+  cards.forEach(c=>{const d=depth[c.id]||0;(layers[d]=layers[d]||[]).push(c);});
+  const layerIdx=Object.keys(layers).map(Number).sort((a,b)=>a-b);
+  // 节点尺寸与间距（窄面板适配）
+  const W=132,H=46,xGap=14,yGap=74,pad=8;
+  let maxW=pad*2;
+  const pos={};
+  const layerWidth={};
+  for(const d of layerIdx){
+    const arr=layers[d]; layerWidth[d]=pad*2+arr.length*W+(arr.length-1)*xGap;
+    maxW=Math.max(maxW,layerWidth[d]);
+  }
+  for(const d of layerIdx){
+    const arr=layers[d];
+    const lw=layerWidth[d];
+    arr.forEach((c,i)=>{
+      pos[c.id]={x:(maxW-lw)/2+pad+i*(W+xGap), y:pad+d*yGap};
+    });
+  }
+  const svgH=pad*2+(layerIdx.length-1)*yGap+H;
+  // 连线：竖向贝塞尔（从依赖底部 → 被依赖顶部）
+  let edges='';
+  for(const c of cards){
+    for(const dep of (c.dependsOn||[])){
+      if(!pos[dep]||!pos[c.id]) continue;
+      const a=pos[dep], b=pos[c.id];
+      const x1=a.x+W/2, y1=a.y+H, x2=b.x+W/2, y2=b.y;
+      const my=(y1+y2)/2;
+      const isContinue=(c.mode==='continue'&&c.chainId===dep);
+      edges+=`<path class="edge ${isContinue?'continue':''}" d="M${x1},${y1} C${x1},${my} ${x2},${my} ${x2},${y2-3}" marker-end="${isContinue?'url(#marC)':'url(#mar)'}"/>`;
+    }
+  }
+  // 节点
+  let nodes='';
+  for(const c of cards){
+    const p=pos[c.id];
+    const label=c.title.length>9?c.title.slice(0,9)+'…':c.title;
+    const sub=`P${c.priority} · ${c.mode}`;
+    nodes+=`<g class="g-node ${c.status}" data-id="${c.id}">
+      <rect x="${p.x}" y="${p.y}" width="${W}" height="${H}" rx="7"/>
+      <text x="${p.x+W/2}" y="${p.y+19}" text-anchor="middle">${esc(label)}</text>
+      <text class="gt-sub" x="${p.x+W/2}" y="${p.y+36}" text-anchor="middle">${esc(sub)}</text>
+    </g>`;
+  }
+  const svg=`<svg class="mini-svg" width="${maxW}" height="${svgH}" viewBox="0 0 ${maxW} ${svgH}" style="display:block;margin:0 auto">
+    <defs>
+      <marker id="mar" markerWidth="8" markerHeight="8" refX="5" refY="2.6" orient="auto" markerUnits="userSpaceOnUse"><path d="M0,0 L5,2.6 L0,5.2 Z"/></marker>
+      <marker id="marC" class="cont" markerWidth="8" markerHeight="8" refX="5" refY="2.6" orient="auto" markerUnits="userSpaceOnUse"><path d="M0,0 L5,2.6 L0,5.2 Z"/></marker>
+    </defs>
+    ${edges}${nodes}</svg>`;
+  box.innerHTML=svg;
+  box.querySelectorAll('.g-node').forEach(g=>{
+    g.onclick=()=>openDetail(g.dataset.id);
+  });
+}
+// 面板收起/展开
+function setGraphCollapsed(collapsed){
+  $('#graphPanel').classList.toggle('collapsed',collapsed);
+  $('#gpExpand').style.display=collapsed?'block':'none';
+}
+$('#gpCollapse').onclick=()=>setGraphCollapsed(true);
+$('#gpExpandBtn').onclick=()=>setGraphCollapsed(false);
+// ---- 垃圾桶 ----
+async function loadTrashCount(){
+  const d = await api('/api/cards/trash');
+  const n = (d.trash||[]).length;
+  const cnt=$('#trashCnt'); cnt.textContent=n; cnt.style.display = n? 'block':'none';
+}
+async function openTrash(){
+  const d = await api('/api/cards/trash');
+  const list = d.trash||[];
+  const box=$('#trashList');
+  if(!list.length){ box.innerHTML='<div class="empty">垃圾桶是空的</div>'; }
+  else {
+    box.innerHTML = list.map(t=>{
+      const c=t.card; const dt=new Date(t.deletedAt).toLocaleString();
+      const left = Math.max(0, 30 - Math.floor((Date.now()-t.deletedAt)/(24*3600*1000)));
+      return `<div class="trash-item">
+        <div class="ti-info">
+          <div class="ti-title">${esc(c.title||'未命名任务')}</div>
+          <div class="ti-sub">删除于 ${dt} · 剩余保留约 ${left} 天 · ${c.status||''}</div>
+        </div>
+        <button class="btn" data-restore="${c.id}">还原</button>
+      </div>`;
+    }).join('');
+    box.querySelectorAll('[data-restore]').forEach(b=>{
+      b.onclick=async()=>{ await post('/api/cards/trash/restore/'+encodeURIComponent(b.dataset.restore)); await loadCards(); toast('已还原'); };
+    });
+  }
+  $('#trashMask').classList.add('show');
+}
+$('#trashFab').onclick=openTrash;
+$('#trashClose').onclick=()=>$('#trashMask').classList.remove('show');
+$('#trashEmpty').onclick=async()=>{ if(!confirm('确认清空垃圾桶？所有快照及其过程日志将被永久删除，不可恢复。'))return; const r=await post('/api/cards/trash/empty'); toast('已清空 '+r.cleared+' 项'); await loadCards(); };
+// ---- 进程状态条（PID + 是否工作中） ----
+async function refreshProcs(){
+  try{
+    const d = await api('/api/cards/processes');
+    const procs = d.processes||[];
+    const bar=$('#procBar');
+    if(!procs.length){ bar.innerHTML='<span class="ptitle">进程：</span><span class="proc-empty">无运行中的 opencode 进程</span>'; return; }
+    bar.innerHTML='<span class="ptitle">进程：</span>'+procs.map(p=>{
+      const working=p.working;
+      return `<span class="proc-chip ${working?'':'idle'}"><span class="dot"></span><span class="pid">PID ${p.pid}</span><span class="st">${working?'工作中':'空闲'}</span></span>`;
+    }).join('');
+  }catch{ /* ignore */ }
+}
+setInterval(refreshProcs, 2000);
+// ---- SSE 实时 ----
+function fuRenderText(ev){
+  const log=$('#dLog');
+  if(log.querySelector('.empty')) log.innerHTML='';
+  let el=FU_PARTS.get(ev.partId);
+  if(!el){ el=document.createElement('div'); el.className='msg-assistant'; FU_PARTS.set(ev.partId,el); log.appendChild(el); }
+  el.textContent='🤖 '+(ev.text||'').slice(0,6000);
+  log.scrollTop=log.scrollHeight;
+}
+const es = new EventSource('/api/cards/stream');
+es.onmessage = (e)=>{
+  let ev; try{ ev=JSON.parse(e.data); }catch{ return; }
+  if(ev.type==='runner_started'){ $('#statusPill').textContent='编排中…'; $('#btnRun').disabled=true; $('#btnStop').disabled=false; }
+  if(ev.type==='runner_stopped'||ev.type==='all_done'){ $('#statusPill').textContent='空闲'; $('#btnRun').disabled=false; $('#btnStop').disabled=true; }
+  if(ev.type==='followup_start'||ev.type==='followup_done'){ loadCards(); }
+  if(['task_start','text','tool','task_done','proc'].includes(ev.type)){
+    loadCards();
+    refreshProcs();
+    if(OPEN_ID && ev.cardId===OPEN_ID){
+      const log=$('#dLog'); if(log.querySelector('.empty')) log.innerHTML='';
+      if(ev.phase==='followup'){
+        // 追加聊天：正文覆盖式渲染（快照），工具逐行记录
+        if(ev.type==='text') fuRenderText(ev);
+        else if(ev.type==='tool'){ appendLog(log,'🔧 ['+ev.name+'] '+(ev.summary||''),'msg-tool'); log.scrollTop=log.scrollHeight; }
+      } else if(ev.type==='text') appendLog(log,(ev.text||'').slice(0,4000),'msg-assistant');
+      else if(ev.type==='tool') appendLog(log,'🔧 ['+ev.name+'] '+(ev.summary||''),'msg-tool');
+      else if(ev.type==='task_done'){ loadCards().then(()=>openDetail(OPEN_ID)); }
+      log.scrollTop=log.scrollHeight;
+    }
+  }
+  if(ev.type==='followup_done' && OPEN_ID===ev.cardId){
+    fuSetState(false);
+    if(ev.error){ appendLog($('#dLog'),'⚠ '+ev.error,'msg-err'); toast('追加聊天失败：'+errSummary(ev.error)); }
+    loadCards().then(()=>openDetail(OPEN_ID));
+  }
+};
+es.onerror=()=>{};
+loadCards();
+</script>
+</body>
+</html>