优化：多Agent协作表单按模式动态展示 + DAG画布文字可读性

1. 多Agent协作：
- 选择不同模式时表单只显示该模式专属参数（主管:参与Agent+上下文；评审:+返工轮次/分数线；辩论:+质询轮次/立场）
- 参数改为下拉选择（轮次/分数线预设档位），提示文案按模式动态切换，点模式卡片可直接切换

2. DAG画布：
- 修复文字看不清：CSS .dag-node fill 覆盖节点内联状态色 → 移除，文字改纯白+半透明白
- 节点加宽 110→140px，标题超 13 字符自动省略号，不再溢出
- 节点描边加亮(#5a6b8f)提升状态区分度

agents.py

@@ -92,6 +92,23 @@ def _extract_score(text):
     return 60.0, text
 
 
+def _chat_json(worker, messages, max_tokens=2000, temperature=None):
+    """调用 LLM 并解析 JSON；解析失败自动加大 max_tokens 重试（防止长文截断）。
+    返回 (data, raw_text, usage)；全部失败抛最后异常。"""
+    last_err = None
+    for attempt in range(3):
+        mt = max_tokens * (attempt + 1)  # 2000 → 4000 → 6000
+        text, usage = _chat_worker(worker, messages, temperature=temperature, max_tokens=mt)
+        try:
+            data = _extract_json(text)
+            if isinstance(data, dict) and not data:
+                raise ValueError('空 JSON')
+            return data, text, usage
+        except Exception as e:
+            last_err = e
+    raise last_err or ValueError('JSON 解析失败')
+
+
 # ---------------------------------------------------------------------------
 # 主管模式
 # ---------------------------------------------------------------------------
@@ -114,17 +131,17 @@ SUPERVISOR_SYNTH_PROMPT = (
 def run_supervisor(run_id, run, workers):
     _log(run_id, 'supervisor', None, 'plan',
          f'主管开始规划：{run["topic"][:200]}')
-    # 1) 主管拆解
-    plan_text, u1 = _chat_worker(
-        workers[0],
-        [{'role': 'system', 'content': '你只输出 JSON。'},
-         {'role': 'user', 'content': SUPERVISOR_PLAN_PROMPT.format(
-             topic=run['topic'], context=run['context'] or '无')}],
-        temperature=0.3, max_tokens=2000)
+    # 1) 主管拆解（JSON 解析失败自动加大 max_tokens 重试）
     try:
-        subtasks = _extract_json(plan_text)
-        if isinstance(subtasks, dict):
-            subtasks = subtasks.get('subtasks') or subtasks.get('tasks') or []
+        data, _, u1 = _chat_json(
+            workers[0],
+            [{'role': 'system', 'content': '你只输出 JSON。'},
+             {'role': 'user', 'content': SUPERVISOR_PLAN_PROMPT.format(
+                 topic=run['topic'], context=run['context'] or '无')}],
+            max_tokens=3000, temperature=0.3)
+        subtasks = data.get('subtasks') or data.get('tasks') or []
+        if isinstance(data, list):
+            subtasks = data
     except Exception as e:
         _update_run(run_id, status='failed', error=f'主管规划解析失败: {e}')
         _log(run_id, 'supervisor', None, 'plan', f'❌ 规划解析失败: {e}')
@@ -216,15 +233,19 @@ def run_review(run_id, run, workers):
         # 评审
         review_usage = None
         try:
-            review_text, u2 = _chat_worker(
+            review_data, review_text, u2 = _chat_json(
                 reviewer_w,
                 [{'role': 'system', 'content': '你只输出 JSON。'},
                  {'role': 'user', 'content': REVIEWER_PROMPT.format(
                      topic=run['topic'], output=final_output, rubric=rubric)}],
-                temperature=0.2, max_tokens=1500)
-            score, judgment = _extract_score(review_text)
+                max_tokens=2000, temperature=0.2)
             review_usage = u2
             total_tokens += u2['total_tokens']; total_cost += u2['cost']
+            if isinstance(review_data, dict):
+                score = float(review_data.get('score', review_data.get('总分', 60)))
+                judgment = review_data.get('judgment') or review_data.get('意见') or review_text
+            else:
+                score, judgment = _extract_score(review_text)
         except Exception as e:
             score, judgment = 0, f'评审调用失败: {e}'
         final_score = score
@@ -325,14 +346,13 @@ def run_debate(run_id, run, workers):
                 f"【{v['stance']}】(#{k})：{v['view'][:500]}"
                 for k, v in views.items() if k != w['id'])
             try:
-                text, u = _chat_worker(
+                data, _, u = _chat_json(
                     w,
                     [{'role': 'system', 'content': '你只输出 JSON。'},
                      {'role': 'user', 'content': DEBATE_REBUT_PROMPT.format(
                          stance=mine['stance'], topic=run['topic'],
                          my_view=mine['view'], others=others)}],
-                    temperature=0.7, max_tokens=800)
-                data = _extract_json(text)
+                    max_tokens=1200, temperature=0.7)
                 rebut = data.get('rebuttal') if isinstance(data, dict) else text
                 mine['view'] = mine['view'] + '\n\n【质询回应】' + str(rebut)
                 total_tokens += u['total_tokens']; total_cost += u['cost']
@@ -346,12 +366,11 @@ def run_debate(run_id, run, workers):
         f"【{v['stance']}】{v['view']}" for v in views.values())
     _log(run_id, 'judge', judge_w['id'], 'verdict', '裁判综合裁决中…')
     try:
-        verdict, u4 = _chat_worker(
+        data, verdict, u4 = _chat_json(
             judge_w,
             [{'role': 'system', 'content': '你只输出 JSON。你是公正严明的首席裁判。'},
              {'role': 'user', 'content': JUDGE_PROMPT.format(topic=run['topic'], transcript=transcript)}],
-            temperature=0.3, max_tokens=1500)
-        data = _extract_json(verdict)
+            max_tokens=2500, temperature=0.3)
         if isinstance(data, dict):
             consensus = data.get('consensus') or data.get('结论') or verdict
             summary = data.get('summary') or data.get('摘要') or ''

static/app.js

@@ -287,14 +287,10 @@ async function moveTask(tid, status) {
   toast('状态已更新', 'ok'); refreshProj();
 }
 
-/* --- DAG 工作流 --- */
-function renderDag() {
-  const {tasks} = projCtx;
-  const idMap = {};
-  tasks.forEach(t => { idMap[t.id] = t; });
-  const edges = [];
-  tasks.forEach(t => (t.depends_on || []).forEach(d => { if (idMap[d]) edges.push({from:d, to:t.id}); }));
+/* --- DAG 工作流（可交互画布：拖节点 / 滚轮缩放 / 拖画布平移） --- */
+let dagState = null;   // {pid, pos:{id:{x,y}}, scale, tx, ty, drag:null, moved:false}
 
+function dagLayout(tasks, idMap) {
   // 拓扑分层：最长路径
   const layer = {};
   const visit = id => {
@@ -308,43 +304,236 @@ function renderDag() {
   tasks.forEach(t => visit(t.id));
   const layers = {};
   tasks.forEach(t => { (layers[layer[t.id]] = layers[layer[t.id]] || []).push(t.id); });
-
   const W = 260, H = 110, PAD = 60;
   const width = Math.max(2, Object.keys(layers).length) * W + PAD;
   const height = Math.max(...tasks.map(t => layer[t.id] === undefined ? 0 : layer[t.id]), 0) * H + PAD + 60;
   const pos = {};
   Object.entries(layers).forEach(([l, ids]) => {
     const x = PAD + parseInt(l) * W;
-    const step = Math.min(H - 60, Math.max(70, (height - 2*PAD) / (ids.length + 1)));
+    const step = Math.min(H - 60, Math.max(70, (height - 2 * PAD) / (ids.length + 1)));
     ids.forEach((id, i) => { pos[id] = {x, y: PAD + (i + 1) * step}; });
   });
+  return {width, height, pos};
+}
+
+function dagSize() {
+  const {tasks} = projCtx;
+  const idMap = {};
+  tasks.forEach(t => { idMap[t.id] = t; });
+  return dagLayout(tasks, idMap);
+}
+
+function saveDagState() {
+  if (!dagState) return;
+  try {
+    const pos = {};
+    Object.entries(dagState.pos).forEach(([k, v]) => { pos[k] = {x: Math.round(v.x), y: Math.round(v.y)}; });
+    localStorage.setItem('aw_dag_pos_' + dagState.pid, JSON.stringify(pos));
+    localStorage.setItem('aw_dag_view_' + dagState.pid,
+      JSON.stringify({scale: dagState.scale, tx: Math.round(dagState.tx), ty: Math.round(dagState.ty)}));
+  } catch (e) {}
+}
+
+function dagApplyView() {
+  const s = dagState;
+  const svg = $('#dag-svg');
+  if (!svg) return;
+  svg.style.transform = `translate(${s.tx}px, ${s.ty}px) scale(${s.scale})`;
+  svg.style.transformOrigin = '0 0';
+}
+
+function drawDag() {
+  const {tasks} = projCtx;
+  const idMap = {};
+  tasks.forEach(t => { idMap[t.id] = t; });
+  const edges = [];
+  tasks.forEach(t => (t.depends_on || []).forEach(d => { if (idMap[d]) edges.push({from: d, to: t.id}); }));
+  const {width, height} = dagSize();
   const colors = {todo:'#2a3550', running:'#173b6b', review:'#4a3a10', done:'#0f3d2e', rejected:'#4a1c1c', failed:'#3d1c2e', cancelled:'#333'};
   const ready = tasks.filter(t => (t.status === 'todo' || t.status === 'failed') && (!t.depends_on || t.depends_on.every(d => idMap[d]?.status === 'done')));
-  $('#tab-body').innerHTML = `
+  const body = $('#tab-body');
+  if (!body) return;
+  const NW = 140, NHW = 70;   // 节点宽 / 半宽
+  const dagText = t => {
+    const raw = `#${t.id} ${t.title}`;
+    return raw.length > 13 ? raw.slice(0, 13) + '…' : raw;
+  };
+  body.innerHTML = `
     <div class="toolbar" style="margin-bottom:10px">
-      <span class="pager-tip">共 ${tasks.length} 个节点 · ${edges.length} 条依赖边${ready.length ? ` · ${ready.length} 个任务就绪` : ''}</span>
+      <span class="pager-tip">共 ${tasks.length} 个节点 · ${edges.length} 条依赖边${ready.length ? ` · ${ready.length} 个任务就绪` : ''} · 拖节点调位 / 滚轮缩放 / 拖空白平移 / 双击复位</span>
       <button class="btn success" ${ready.length ? '' : 'disabled'} onclick="runWorkflow()">▶ 执行整个工作流（${ready.length}）</button>
     </div>
-    <div class="dag-box"><svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
-      <defs><marker id="arrow" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto"><path d="M0,0 L8,3 L0,6 Z" fill="#4a5878"/></marker></defs>
-      ${edges.map(e => {
-        const a = pos[e.from], b = pos[e.to];
-        if (!a || !b) return '';
-        const mx = (a.x + b.x) / 2;
-        const act = idMap[e.from].status === 'done';
-        return `<path class="dag-edge${act ? ' act' : ''}" d="M${a.x+55},${a.y} C${mx},${a.y} ${mx},${b.y} ${b.x-55},${b.y}"/>`;
-      }).join('')}
-      ${tasks.map(t => {
-        const p = pos[t.id];
-        const col = colors[t.status];
-        return `<g>
-          <rect class="dag-node" x="${p.x-55}" y="${p.y-24}" width="110" height="48" fill="${col}" stroke="#3a4a6a" onclick="openTaskDetail(${t.id})"/>
-          <text class="dag-label" x="${p.x}" y="${p.y-2}" fill="#fff">#${t.id} ${esc(t.title).slice(0,10)}</text>
-          <text class="dag-sub" x="${p.x}" y="${p.y+15}">${STATUS[t.status].label}${t.depends_on?.length ? ' · 前置'+t.depends_on.length : ''}</text>
-        </g>`;
-      }).join('')}
-    </svg></div>
-    <div class="tab-note" style="margin-top:10px">💡 节点点击查看详情；前置任务完成后下游自动触发。执行整个工作流 = 派发所有就绪任务（含失败重试）。</div>`;
+    <div class="dag-box" id="dag-box">
+      <svg id="dag-svg" width="100%" height="${Math.max(480, height)}" viewBox="0 0 ${width} ${height}" style="transform-origin:0 0">
+        <defs><marker id="arrow" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto"><path d="M0,0 L8,3 L0,6 Z" fill="#4a5878"/></marker></defs>
+        <rect id="dag-bg" x="-2000" y="-2000" width="${width + 4000}" height="${height + 4000}" fill="transparent"/>
+        ${edges.map(e => {
+          const a = dagState.pos[e.from], b = dagState.pos[e.to];
+          if (!a || !b) return '';
+          const mx = (a.x + b.x) / 2;
+          const act = idMap[e.from].status === 'done';
+          return `<path data-e="${e.from}-${e.to}" class="dag-edge${act ? ' act' : ''}" d="M${a.x + NHW},${a.y} C${mx},${a.y} ${mx},${b.y} ${b.x - NHW},${b.y}"/>`;
+        }).join('')}
+        ${tasks.map(t => {
+          const p = dagState.pos[t.id];
+          const col = colors[t.status];
+          return `<g class="dag-node" data-id="${t.id}" style="cursor:grab">
+            <rect x="${p.x - NHW}" y="${p.y - 24}" width="${NW}" height="48" fill="${col}" stroke="#5a6b8f"/>
+            <text class="dag-label" x="${p.x}" y="${p.y - 2}">${esc(dagText(t))}</text>
+            <text class="dag-sub" x="${p.x}" y="${p.y + 15}">${STATUS[t.status].label}${t.depends_on?.length ? ' · 前置' + t.depends_on.length : ''}</text>
+          </g>`;
+        }).join('')}
+      </svg>
+    </div>
+    <div class="tab-note" style="margin-top:10px">💡 节点点击查看详情；拖动节点可自定义布局（自动记忆）；前置任务完成后下游自动触发。执行整个工作流 = 派发所有就绪任务（含失败重试）。</div>`;
+  dagApplyView();
+  bindDagEvents();
+}
+
+function bindDagEvents() {
+  const box = $('#dag-box');
+  const svg = $('#dag-svg');
+  if (!box || !svg) return;
+  const s = dagState;
+  let down = null;   // {type:'node'|'pan', id?, sx, sy, ox, oy}
+
+  box.addEventListener('mousedown', e => {
+    if (e.button !== 0) return;
+    const nodeEl = e.target.closest('.dag-node');
+    if (nodeEl) {
+      const id = Number(nodeEl.dataset.id);
+      const p = s.pos[id];
+      down = {type: 'node', id, sx: e.clientX, sy: e.clientY, ox: p.x, oy: p.y, moved: false};
+      nodeEl.style.cursor = 'grabbing';
+      svg.style.cursor = 'grabbing';
+    } else {
+      down = {type: 'pan', sx: e.clientX, sy: e.clientY, ox: s.tx, oy: s.ty, moved: false};
+      svg.style.cursor = 'grabbing';
+    }
+    e.preventDefault();
+  });
+
+  window.addEventListener('mousemove', e => {
+    if (!down) return;
+    const dx = e.clientX - down.sx, dy = e.clientY - down.sy;
+    if (!down.moved && Math.abs(dx) + Math.abs(dy) < 3) return;
+    down.moved = true;
+    if (down.type === 'node') {
+      const p = s.pos[down.id];
+      if (p) { p.x = down.ox + dx / s.scale; p.y = down.oy + dy / s.scale; }
+    } else {
+      s.tx = down.ox + dx;
+      s.ty = down.oy + dy;
+    }
+    dagApplyView();
+    if (down.type === 'node') {
+      // 轻量更新：节点坐标 + 关联连线
+      const svgEl = $('#dag-svg');
+      if (!svgEl) return;
+      svgEl.querySelectorAll('.dag-node').forEach(g => {
+        const nid = Number(g.dataset.id);
+        const pp = s.pos[nid];
+        if (!pp) return;
+        g.querySelector('rect').setAttribute('x', pp.x - 70);
+        g.querySelector('rect').setAttribute('y', pp.y - 24);
+        const ts = g.querySelectorAll('text');
+        ts[0].setAttribute('x', pp.x); ts[0].setAttribute('y', pp.y - 2);
+        ts[1].setAttribute('x', pp.x); ts[1].setAttribute('y', pp.y + 15);
+      });
+      // 以拖动节点为中心更新相关连线
+      const touched = new Set([down.id]);
+      projCtx.tasks.forEach(t => (t.depends_on || []).forEach(d => {
+        if (d === down.id || t.id === down.id) { touched.add(d); touched.add(t.id); }
+      }));
+      touched.forEach(tid => {
+        const a = s.pos[tid];
+        if (!a) return;
+        projCtx.tasks.forEach(t => {
+          if (t.id !== tid) return;
+          (t.depends_on || []).forEach(d => {
+            const b = s.pos[d];
+            if (!b) return;
+            const path = svgEl.querySelector(`path[data-e="${d}-${tid}"]`);
+            if (!path) return;
+            const mx = (b.x + a.x) / 2;
+            path.setAttribute('d', `M${b.x + 70},${b.y} C${mx},${b.y} ${mx},${a.y} ${a.x - 70},${a.y}`);
+          });
+        });
+      });
+    }
+  });
+
+  window.addEventListener('mouseup', () => {
+    if (!down) return;
+    const wasNode = down.type === 'node';
+    if (wasNode) {
+      const nodeEl = svg.querySelector('.dag-node[data-id="' + down.id + '"]');
+      if (nodeEl) nodeEl.style.cursor = 'grab';
+    }
+    svg.style.cursor = '';
+    if (down.moved) {
+      dagState.suppressClick = true;
+      setTimeout(() => { if (dagState) dagState.suppressClick = false; }, 400);
+      saveDagState();
+    }
+    down = null;
+  });
+
+  // 滚轮缩放（以鼠标为锚点）
+  box.addEventListener('wheel', e => {
+    e.preventDefault();
+    const rect = box.getBoundingClientRect();
+    const mx = e.clientX - rect.left, my = e.clientY - rect.top;
+    const factor = e.deltaY < 0 ? 1.12 : 1 / 1.12;
+    const ns = Math.min(3, Math.max(0.25, s.scale * factor));
+    // 保持鼠标指向的内容坐标不动
+    const cx = (mx - s.tx) / s.scale, cy = (my - s.ty) / s.scale;
+    s.scale = ns;
+    s.tx = mx - cx * ns;
+    s.ty = my - cy * ns;
+    dagApplyView();
+    saveDagState();
+  }, {passive: false});
+
+  // 双击空白复位视图
+  box.addEventListener('dblclick', e => {
+    if (e.target.closest('.dag-node')) return;
+    s.scale = 1; s.tx = 0; s.ty = 0;
+    dagApplyView();
+    saveDagState();
+  });
+
+  // 点击节点打开详情（拖动超过阈值则不触发）
+  box.addEventListener('click', e => {
+    const nodeEl = e.target.closest('.dag-node');
+    if (!nodeEl) return;
+    if (dagState.suppressClick) { dagState.suppressClick = false; return; }
+    openTaskDetail(Number(nodeEl.dataset.id));
+  });
+}
+
+function renderDag() {
+  const {tasks, pid} = projCtx;
+  const idMap = {};
+  tasks.forEach(t => { idMap[t.id] = t; });
+  const {pos} = dagLayout(tasks, idMap);
+  // 恢复已保存布局 / 视图
+  let savedPos = null, savedView = null;
+  try {
+    savedPos = JSON.parse(localStorage.getItem('aw_dag_pos_' + pid) || 'null');
+    savedView = JSON.parse(localStorage.getItem('aw_dag_view_' + pid) || 'null');
+  } catch (e) {}
+  if (savedPos) Object.entries(savedPos).forEach(([k, v]) => { if (pos[k]) pos[k] = v; });
+  dagState = {
+    pid, pos,
+    scale: savedView?.scale || 1,
+    tx: savedView?.tx || 0,
+    ty: savedView?.ty || 0,
+    drag: null, moved: false,
+  };
+  const box = $('#tab-body');
+  box.innerHTML = '';
+  drawDag();
 }
 
 async function runWorkflow() {
@@ -940,6 +1129,20 @@ function renderAgents() {
   const {modes, workers, runs} = agentsCtx;
   const wOpts = workers.map(w =>
     `<option value="${w.id}">${esc(w.name)}（${esc(w.model)}）</option>`).join('');
+  // 各模式专属参数定义（m: 适用模式列表）
+  const paramRows = [
+    {id: 'ag-workers', m: 'all', html: `<label data-modes="all">参与 Agent（可多选）<select id="ag-workers" multiple size="3">${wOpts}</select></label>`},
+    {id: 'ag-rounds', m: 'review', html: `<label data-modes="review">最大返工轮次<select id="ag-rounds"><option value="1">1 轮（快）</option><option value="2" selected>2 轮（推荐）</option><option value="3">3 轮（严苛）</option></select></label>`},
+    {id: 'ag-pass', m: 'review', html: `<label data-modes="review">通过分数线<select id="ag-pass"><option value="60">60 分（宽松）</option><option value="70" selected>70 分（标准）</option><option value="80">80 分（严格）</option><option value="90">90 分（严苛）</option></select></label>`},
+    {id: 'ag-debate-rounds', m: 'debate', html: `<label data-modes="debate">质询轮次<select id="ag-debate-rounds"><option value="1" selected>1 轮</option><option value="2">2 轮</option><option value="3">3 轮</option></select></label>`},
+    {id: 'ag-stances', m: 'debate', html: `<label data-modes="debate">辩论立场（逗号分隔，按辩手顺序分配）<input id="ag-stances" placeholder="正方,反方,中立"></label>`},
+    {id: 'ag-context', m: 'all', html: `<label data-modes="all" style="grid-column:span 2">背景上下文<textarea id="ag-context" rows="2" placeholder="选填：背景资料、约束条件、参考知识"></textarea></label>`},
+  ];
+  const modeHints = {
+    supervisor: '💡 第 1 个 Agent 担任主管（负责拆解与最终合成），其余 Agent 并行执行子任务。',
+    review: '💡 第 1 个 Agent 为执行者，第 2 个为评审（只选 1 个时由同一 Agent 自评）。低于分数线自动返工，最多重试所选轮次。',
+    debate: '💡 除最后 1 个 Agent 为裁判外，其余均为辩手；立场按顺序分配，裁判综合裁决输出共识。',
+  };
   $('#main').innerHTML = `
     <h1 class="page-title">多 Agent 协作<small>主管 / 评审 / 辩论 三种团队协作模式</small></h1>
     <div class="grid g3">${modes.map(m => `
@@ -947,25 +1150,18 @@ function renderAgents() {
         <div style="font-size:26px">${m.icon}</div>
         <div class="sec-title" style="margin:6px 0 4px">${esc(m.name)}</div>
         <div style="font-size:12px;color:var(--muted);min-height:34px">${esc(m.desc)}</div>
-        <div style="margin-top:8px"><span class="tag">${m.params.length} 项参数</span></div>
+        <div style="margin-top:8px"><span class="tag">${m.id === 'supervisor' ? '拆解+委派+合成' : m.id === 'review' ? '产出+评审+返工' : '立论+质询+裁决'}</span></div>
       </div>`).join('')}</div>
     <div class="card" style="margin-top:14px">
       <div class="sec-title" style="margin-top:0">⚡ 发起协作运行</div>
       <div class="form-grid">
         <label>协作模式<select id="ag-mode">${modes.map(m => `<option value="${m.id}">${m.icon} ${esc(m.name)}</option>`).join('')}</select></label>
         <label>标题<input id="ag-title" placeholder="选填，默认自动生成"></label>
-        <label>任务主题 / 议题<textarea id="ag-topic" rows="2" placeholder="例如：为新产品策划上市方案…"></textarea></label>
-        <label>参与 Agent（可多选）<select id="ag-workers" multiple size="3">${wOpts}</select></label>
-        <label>最大返工轮次（评审）<input id="ag-rounds" type="number" value="2"></label>
-        <label>通过分数线（评审）<input id="ag-pass" type="number" value="70"></label>
-        <label>质询轮次（辩论）<input id="ag-debate-rounds" type="number" value="1"></label>
-        <label>辩论立场（逗号分隔）<input id="ag-stances" placeholder="正方,反方,裁判"></label>
-        <label style="grid-column:span 2">背景上下文<textarea id="ag-context" rows="2" placeholder="选填：背景资料、约束条件、参考知识"></textarea></label>
-      </div>
-      <div style="margin-top:10px">
-        <button class="btn primary" id="ag-run">🚀 发起运行</button>
-        <span class="tab-note">💡 评审模式第 1 个 Agent 为执行者，第 2 个（若有）为评审；辩论模式最后一个为裁判。</span>
+        <label style="grid-column:span 2">任务主题 / 议题<textarea id="ag-topic" rows="2" placeholder="例如：为新产品策划上市方案…"></textarea></label>
+        ${paramRows.map(r => r.html).join('')}
       </div>
+      <div class="tab-note" id="ag-hint" style="margin-top:10px">${modeHints.supervisor}</div>
+      <div style="margin-top:10px"><button class="btn primary" id="ag-run">🚀 发起运行</button></div>
     </div>
     <div class="card" style="margin-top:14px">
       <div class="sec-title" style="margin-top:0">📋 运行记录 <button class="btn mini" style="float:right" onclick="location.hash='#/agents'">刷新</button></div>
@@ -982,10 +1178,21 @@ function renderAgents() {
         </tr>`).join('') || '<tr><td colspan="8" class="empty-td">暂无运行记录</td></tr>'}
       </tbody></table>
     </div>`;
-  $('#ag-mode').addEventListener('change', e => {
-    const m = modes.find(x => x.id === e.target.value);
-    toast('已选择：' + m.name, '');
-  });
+  // 模式切换：动态显示/隐藏专属参数
+  const applyMode = mode => {
+    $$('.form-grid [data-modes]').forEach(el => {
+      const ms = el.dataset.modes.split(',');
+      el.style.display = (ms.includes('all') || ms.includes(mode)) ? '' : 'none';
+    });
+    $('#ag-hint').textContent = modeHints[mode] || '';
+    $$('.mode-card').forEach(c => c.style.outline = c.dataset.mode === mode ? '2px solid var(--accent)' : '');
+  };
+  $('#ag-mode').addEventListener('change', e => applyMode(e.target.value));
+  $$('.mode-card').forEach(c => c.addEventListener('click', () => {
+    $('#ag-mode').value = c.dataset.mode;
+    applyMode(c.dataset.mode);
+  }));
+  applyMode($('#ag-mode').value);
   $('#ag-run').addEventListener('click', async () => {
     const mode = $('#ag-mode').value;
     const topic = $('#ag-topic').value.trim();

static/style.css

@@ -131,11 +131,13 @@ tr:hover td{background:var(--panel2)}
 .tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--border)}
 .tabs a{padding:9px 16px;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;font-size:13px}
 .tabs a.active{color:var(--accent);border-bottom-color:var(--accent)}
-.dag-box{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;overflow:auto}
-.dag-node{fill:var(--panel2);stroke:var(--border);stroke-width:1.5;rx:10;cursor:pointer}
+.dag-box{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;height:520px;position:relative;touch-action:none;user-select:none;cursor:grab}
+.dag-box svg{display:block;transition:transform .05s linear}
+.dag-node{stroke:var(--border);stroke-width:1.5;rx:10;cursor:grab}
 .dag-node:hover{stroke:var(--accent)}
-.dag-label{font-size:12px;fill:var(--text);text-anchor:middle}
-.dag-sub{font-size:10px;fill:var(--muted);text-anchor:middle}
+.dag-node rect{stroke-width:1.5;rx:10}
+.dag-label{font-size:12px;fill:#ffffff;text-anchor:middle;pointer-events:none}
+.dag-sub{font-size:10px;fill:rgba(255,255,255,.78);text-anchor:middle;pointer-events:none}
 .dag-edge{stroke:var(--border);stroke-width:1.5;fill:none;marker-end:url(#arrow)}
 .dag-edge.act{stroke:var(--accent)}
 .alert-row{border-left:3px solid var(--border);padding:12px 14px;margin-bottom:8px;background:var(--panel2);border-radius:0 10px 10px 0;cursor:pointer}