@sanqianx/claude-ai-workbench 0.13.2 → 0.13.4

package/apps/agent-terminal/app.js

@@ -115,9 +115,29 @@ const dock = window.createRightWorkspaceDock && client
       client, apiBase, document,
       storage: typeof localStorage !== 'undefined' ? localStorage : null,
       renderMarkdown, toast,
+      renderToolStep: (event, input) => buildToolStep(event, input, { taskLinks: false }),
+      renderToolResult: (step, event) => finishToolStep(step, event, true),
+      renderMessage: (role, text) => buildConversationMessage(role, text),
+      renderProcess: () => buildConversationProcess(),
+      renderPageIcon: name => icon(name || 'file', 16),
+      createComposer: options => window.createConversationComposer({ ...options, document, icon }),
+      getSelection: () => {
+        const selected = state.sessionSummary || {};
+        return { agentId: selected.agentId || state.currentAgent, aiProfileId: selected.aiProfileId === undefined ? state.currentProfileId : selected.aiProfileId,
+          ...(state.currentModel ? { model: state.currentModel } : {}) };
+      },
+      taskTitle: toolUseId => {
+        const step = $('stream-col')?.querySelector(`.step[data-tool-id="${cssEscape(toolUseId || '')}"]`);
+        return step?._toolInput?.description || '';
+      },
+      renderChanges: events => {
+        const ctx = { changes: new Map() };
+        for (const event of events) collectTurnChanges(ctx, event, event.input || {});
+        return ctx.changes.size ? renderTurnDiffs(ctx.changes) : null;
+      },
       registry: panelRegistry,
       onPanelsChanged: reason => postPanelState(reason),
-      onBackgroundActivityChanged: activity => renderSessionStatus(activity),
+      onBackgroundActivityChanged: activity => { renderSessionStatus(activity); renderBackgroundTasks(); },
     })
   : null;
 
@@ -971,6 +991,11 @@ async function openSession(sessionId, options = {}) {
   try {
     for (const event of historyView.events) { renderEvent(event); if (!page) last = Math.max(last, event.sequence || 0); }
   } finally { state.replaying = false; }
+  if (snapshot.permission?.kind === 'question') renderEvent({ type: 'claude/permission-request', ...snapshot.permission });
+  for (const card of state.questionCards?.values() || []) {
+    if (!card.classList.contains('question-settled') && card.dataset.permId !== snapshot.permission?.requestId) card.settle({ cancelled: true });
+  }
+  renderBackgroundTasks();
   rememberTitleFromEvents(historyView.events);
   // The SSE replay window can overlap the snapshot (a slow turn raced the
   // open, or the server answered a stale cursor with a full replay). Late or
@@ -994,6 +1019,7 @@ async function openSession(sessionId, options = {}) {
       replayThrough = Number(event.highWater);
       if (!Number.isFinite(replayThrough) || replayThrough < 0) replayThrough = 0;
       resetStream();
+      renderBackgroundTasks();
       state.replaying = true;
       return;
     }
@@ -1052,6 +1078,7 @@ function rebuildHistory(view, events, prepend = true) {
   state.replaying = true;
   try { for (const event of events) renderEvent(event); }
   finally { state.replaying = false; state.follow = following; state.scrollIntent = intent; }
+  renderBackgroundTasks();
   const rebuiltFolds = [...($('stream-col').querySelectorAll?.('details') || [])];
   const offset = rebuiltFolds.length - folds.length;
   if (offset >= 0) for (let i = 0; i < folds.length; i++) rebuiltFolds[offset + i].open = folds[i];
@@ -1148,6 +1175,7 @@ function rememberTitleFromEvents(events) {
 }
 
 function resetStream() {
+  state.questionCards?.clear();
   endTurnVisuals();
   const col = $('stream-col');
   col.textContent = '';
@@ -1234,17 +1262,12 @@ function startTurn() {
 
 function ensureProc(t) {
   if (!(t.proc && t.proc.isConnected)) {
-    const details = el('details', 'proc');
+    const process = buildConversationProcess();
+    const details = process.node;
     details.open = true; // live process output stays visible while running; folds when the turn ends
-    const summary = el('summary', null, '');
-    const procCaret = el('span', 'caret');
-    procCaret.append(icon('caret', 12));
-    summary.append(procCaret);
-    t.meta = el('span', 'p-meta', '工作中 0 秒');
-    summary.append(t.meta);
-    details.append(summary);
-    t.steps = el('div', 'proc-steps');
-    details.append(t.steps);
+    t.meta = process.meta;
+    t.meta.textContent = '工作中 0 秒';
+    t.steps = process.steps;
     $('stream-col').append(details);
     t.proc = details;
     if (!state.replaying) {
@@ -1411,32 +1434,32 @@ function restoreBackgroundTasks(tasks) {
   renderBackgroundTasks();
 }
 function renderBackgroundTasks() {
-  const panel = $('background-tasks');
+  let panel = $('background-tasks');
+  if (!panel && $('stream-col')) { panel = el('section', 'background-tasks'); panel.id = 'background-tasks'; panel.setAttribute('aria-label', '子代理任务'); $('stream-col').append(panel); }
   if (!panel || !panel.dataset) return;
-  const signature = JSON.stringify([state.caps?.backgroundTasks, [...backgroundTasks.values()]]);
+  const indexed = state.activeSessionId && dock && typeof dock.taskViews === 'function' ? dock.taskViews(state.activeSessionId) : [];
+  const tasks = [...backgroundTasks.values()].filter(task => !indexed.some(view => view.taskId && view.taskId === task.taskId));
+  tasks.push(...indexed);
+  const signature = JSON.stringify([state.caps?.backgroundTasks, tasks]);
   if (panel.dataset?.signature === signature) return;
   if (panel.dataset) panel.dataset.signature = signature;
   panel.textContent = '';
-  const unsupported = state.caps?.backgroundTasks === false;
-  panel.hidden = !unsupported && !backgroundTasks.size;
-  if (unsupported) { panel.append(el('p', 'task-detail', '当前 Agent 未提供后台任务状态；文字声明不能证明任务已启动。')); return; }
-  const running = [...backgroundTasks.values()].filter(t => ['running', 'pending'].includes(t.status)).length;
-  panel.append(el('strong', null, `后台任务 · ${running} 个运行中`));
+  const unsupported = state.caps?.backgroundTasks === false && !indexed.length;
+  panel.hidden = !tasks.length;
+  if (unsupported) return;
+  const running = tasks.filter(t => ['running', 'pending'].includes(t.status)).length;
+  panel.setAttribute('aria-label', '子代理任务');
   // 单个后台任务的精确停止 API 未交付：本切片没有任何停止入口，也不以
   // 主会话 abort 冒充（stopCurrent 仅属于前台发送按钮）。
-  for (const task of backgroundTasks.values()) {
-    const card = el('article', 'task-card');
-    card.dataset.taskId = task.taskId;
-    card.append(el('strong', null, task.description || task.taskId));
-    card.append(el('div', null, ({ pending: '待执行', running: '运行中', completed: '已完成', failed: '失败', stopped: '已停止' })[task.status] || task.status));
-    const detail = [task.lastToolName && `最近工具：${task.lastToolName}`, task.summary,
-      task.usage && `工具调用 ${task.usage.tool_uses ?? '未知'} · 用时 ${task.usage.duration_ms ?? '未知'}ms`].filter(Boolean).join('\n');
-    if (detail) card.append(el('div', 'task-detail', detail));
-    if (task.taskRef && dock) {
-      const open = el('button', 'linklike', '在右侧任务面板查看');
-      open.addEventListener('click', () => { dock.openTask(task.taskRef); });
-      card.append(open);
-    }
+  for (const task of tasks) {
+    const card = el('button', 'task-card task-row');
+    card.type = 'button'; card.dataset.taskId = task.taskId || task.delegationId || '';
+    card.append(icon('agent', 14), el('span', 'task-row-title', task.description || '子代理任务'));
+    card.append(el('span', 'task-row-status', task.statusLabel || ({ pending: '待执行', running: '运行中', completed: '已完成', failed: '失败', stopped: '已停止' })[task.status] || '状态待确认'));
+    card.append(icon('arrowLeft', 13));
+    card.setAttribute('aria-label', '打开子代理：' + (task.description || '子代理任务'));
+    card.disabled = !(task.taskRef || task.delegationId);
+    card.addEventListener('click', () => { if (!dock) return; if (task.delegationId) dock.openDelegation(task.delegationId); else dock.openTask(task.taskRef, { reuse: true }); });
     panel.append(card);
   }
 }
@@ -1487,15 +1510,8 @@ function renderEvent(event) {
       state.completedReply = null;
       rememberTitleFromEvents([event]);
       if (state.activeSessionId && event.text) state.sessionTitles.set(state.activeSessionId, event.text.replace(/\s+/g, ' ').slice(0, 24));
-      const wrap = el('div', 'msg user');
+      const wrap = buildConversationMessage('user', event.text || '');
       wrap.dataset.historyKey = historyEventKey(event);
-      const bubble = el('div', 'bubble', event.text || '');
-      wrap.append(bubble);
-      const copy = el('button', 'bubble-copy');
-      copy.title = '复制';
-      copy.append(icon('copy', 13));
-      copy.addEventListener('click', () => copyText(event.text || '', copy));
-      wrap.append(copy);
       if (Array.isArray(event.attachments) && event.attachments.length) {
         const tray = el('div', 'attach-tray');
         for (const item of event.attachments) {
@@ -1522,9 +1538,9 @@ function renderEvent(event) {
       stampThinking(t);
       const ctx = t || startTurn();
       if (!ctx.liveText || !ctx.liveText.isConnected) {
-        const msg = el('div', 'msg ai');
-        const body = el('div', 'md-body streaming');
-        msg.append(body);
+        const msg = buildConversationMessage('assistant', '');
+        const body = msg.querySelector('.md-body');
+        body.classList.add('streaming');
         col.append(msg);
         ctx.liveText = msg;
         ctx.liveBody = body;
@@ -1570,26 +1586,21 @@ function renderEvent(event) {
     case 'claude/tool-result': {
       const target = col.querySelector(`.step[data-tool-id="${cssEscape(event.id || '')}"]`);
       const step = target || col.appendChild(buildToolStep({ id: event.id, name: event.toolName || '' }, {}));
-      const body = step.querySelector('.step-body');
-      if (body) {
-        const output = event.output && typeof event.output === 'object' ? JSON.stringify(event.output, null, 2) : String(event.output || '');
-        body.append(ioCard('text', output.slice(0, 4000), '输出'));
-      }
-      renderFileChanges(step, event, step._toolInput || {});
-      const meta = step.querySelector('.s-meta');
-      if (meta) {
-        const done = event.isError ? '失败' : '完成';
-        const seconds = state.replaying ? null : Math.round((Date.now() - (step._startedAt || Date.now())) / 1000);
-        meta.textContent = seconds == null ? done : `${done} · ${fmtElapsed(seconds * 1000)}`;
-        meta.classList.remove('running');
-        meta.classList.toggle('failed', Boolean(event.isError));
-      }
-      step.classList.add('done');
-      if (event.isError) step.classList.add('failed');
+      finishToolStep(step, event, state.replaying);
       if (t) collectTurnChanges(t, event, step._toolInput || {});
       break;
     }
     case 'claude/permission-request': {
+      if (col.querySelector(`[data-perm-id="${cssEscape(event.requestId || '')}"]`)) break;
+      if (event.kind === 'question' && Array.isArray(event.questions)) {
+        const sessionId = state.activeSessionId;
+        const card = window.createUserQuestionCard({ document, event,
+          storageKey: `kb.workbench.questions:${apiBase}:${sessionId}:${event.requestId}`,
+          onSubmit: answers => client.resolvePermission({ sessionId, requestId: event.requestId, allow: true, answers }),
+        });
+        state.questionCards ||= new Map(); state.questionCards.set(event.requestId, card);
+        col.append(card); setBusyState('pending-permission'); break;
+      }
       const card = el('div', 'perm');
       card.dataset.permId = event.requestId || '';
       const pIcon = el('span', 'p-icon');
@@ -1612,7 +1623,8 @@ function renderEvent(event) {
     }
     case 'claude/permission-resolved': {
       const card = col.querySelector(`.perm[data-perm-id="${cssEscape(event.requestId || '')}"]`);
-      if (card) settlePermissionCard(card, event.allow === true);
+      if (card?.settle) card.settle(event);
+      else if (card) settlePermissionCard(card, event.allow === true);
       setBusyState('running');
       break;
     }
@@ -1639,11 +1651,7 @@ function renderEvent(event) {
         col.append(err);
       } else {
         if (!hadLiveText && event.result) {
-          const msg = el('div', 'msg ai');
-          const body = el('div', 'md-body');
-          msg.append(body);
-          col.append(msg);
-          setMarkdown(body, String(event.result));
+          col.append(buildConversationMessage('assistant', String(event.result)));
         }
         const lastMsg = [...col.children].reverse().find(node => node.classList && node.classList.contains('ai'));
         if (lastMsg) lastMsg.append(msgFooter(String(event.result || lastMsg.textContent), lastPrompt, { model: turnModel, at: event.at }));
@@ -1749,7 +1757,37 @@ function renderEvent(event) {
   if (stream && state.follow) stream.scrollTop = stream.scrollHeight;
 }
 
-function buildToolStep(event, input) {
+// Shared conversation primitives keep task views in the same product language.
+function buildConversationMessage(role, text) {
+  const user = role === 'user';
+  const node = el('div', user ? 'msg user' : 'msg ai');
+  const body = el('div', user ? 'bubble' : 'md-body');
+  if (user) body.textContent = text;
+  else setMarkdown(body, text);
+  node.append(body);
+  if (user) {
+    const copy = el('button', 'bubble-copy');
+    copy.title = '复制';
+    copy.append(icon('copy', 13));
+    copy.addEventListener('click', () => copyText(text, copy));
+    node.append(copy);
+  }
+  return node;
+}
+
+function buildConversationProcess() {
+  const node = el('details', 'proc');
+  const summary = el('summary');
+  const caret = el('span', 'caret');
+  caret.append(icon('caret', 12));
+  const meta = el('span', 'p-meta');
+  const steps = el('div', 'proc-steps');
+  summary.append(caret, meta);
+  node.append(summary, steps);
+  return { node, meta, steps };
+}
+
+function buildToolStep(event, input, options = {}) {
   const step = el('details', 'step');
   step.dataset.toolId = event.id || '';
   step._toolInput = input;
@@ -1760,6 +1798,18 @@ function buildToolStep(event, input) {
   const caret = el('span', 's-caret');
   caret.append(icon('caret', 12));
   summary.append(caret, icon(TOOL_ICONS[verb] || 'dot', 13), el('span', 's-name', verb), el('span', 's-desc', toolDetail(event.name, input)), buildToolArgs(input), el('span', 's-meta running', '运行中'));
+  if (options.taskLinks !== false && verb === '子任务' && event.id && dock && typeof dock.openTaskForToolUseId === 'function') {
+    const open = el('button', 'task-open', '打开子代理');
+    open.type = 'button';
+    open.addEventListener('click', async ev => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      open.disabled = true;
+      try { await dock.openTaskForToolUseId(event.id); }
+      finally { open.disabled = false; }
+    });
+    summary.append(open);
+  }
   step.append(summary);
   // Edit/write steps change the workspace; keep them visible when the fold opens.
   if (verb === '编辑' || verb === '写入') step.open = true;
@@ -1770,6 +1820,27 @@ function buildToolStep(event, input) {
   return step;
 }
 
+// Both the main conversation and task panels use the same tool/result and
+// file-change components, so read-only task views retain the product UI.
+function finishToolStep(step, event, replaying = true) {
+  const body = step.querySelector('.step-body');
+  if (body) {
+    const output = event.output && typeof event.output === 'object' ? JSON.stringify(event.output, null, 2) : String(event.output ?? '');
+    body.append(ioCard('text', output, '输出'));
+  }
+  renderFileChanges(step, event, step._toolInput || {});
+  const meta = step.querySelector('.s-meta');
+  if (meta) {
+    const done = event.isError ? '失败' : '完成';
+    const seconds = replaying ? null : Math.round((Date.now() - (step._startedAt || Date.now())) / 1000);
+    meta.textContent = seconds == null ? done : `${done} · ${fmtElapsed(seconds * 1000)}`;
+    meta.classList.remove('running');
+    meta.classList.toggle('failed', Boolean(event.isError));
+  }
+  step.classList.add('done');
+  if (event.isError) step.classList.add('failed');
+}
+
 const TOOL_ICONS = {
   '命令': 'terminal', '读取': 'file', '写入': 'pencil', '编辑': 'pencil',
   '搜索': 'search', '网络': 'globe', '子任务': 'agent',
@@ -1800,6 +1871,7 @@ function toolVerb(name) {
 
 function toolDetail(name, input) {
   const tool = String(name || '').toLowerCase();
+  if (tool === 'agent' || tool === 'task') return String(input.description || input.prompt || name).replace(/\s+/g, ' ').slice(0, 90);
   const file = input.file_path || input.path || input.filePath || '';
   if (tool === 'bash' && input.command) return String(input.command).replace(/\s+/g, ' ').slice(0, 90);
   if (file) return String(file).slice(0, 90);
@@ -2161,7 +2233,7 @@ function renderSessionStatus(activity) {
     status.hidden = false;
     text.textContent = ({
       running: '工作中', thinking: '思考中', 'tool-running': '执行工具', spawning: '启动中',
-      'pending-permission': '等待授权', aborted: '已停止', failed: '失败',
+      'pending-permission': '等待你确认', aborted: '已停止', failed: '失败',
     }[sessionState] || sessionState) + (background > 0 ? ' · 后台运行中' : '');
     return;
   }
@@ -2216,6 +2288,8 @@ async function refreshSessionRow() { await renderProjectList(); }
 
 function wireComposer() {
   const input = $('chat-input');
+  if (window.bindConversationComposer) window.bindConversationComposer({ input, send: $('btn-send'), onSend: sendCurrent, onStop: stopCurrent, isBusy: () => state.busy, onInput: saveCurrentDraft });
+  else {
   input.addEventListener('input', () => {
     input.style.height = 'auto';
     input.style.height = `${Math.min(150, input.scrollHeight)}px`;
@@ -2227,6 +2301,7 @@ function wireComposer() {
   $('btn-send').addEventListener('click', () => {
     if (state.busy) { stopCurrent(); } else { sendCurrent(); }
   });
+  }
   $('btn-attach').addEventListener('click', () => $('file-input').click());
   $('file-input').addEventListener('change', async event => {
     for (const file of event.target.files || []) await addAttachment(file);
@@ -3073,6 +3148,7 @@ function panelStatePayload(reason) {
     open: true,
     active: tab.id === snap.activeTabId,
     error: tab.hostError || null,
+    ready: tab.hostReady === true,
     content: tab.content || null,
     scope: snap.scope ? { projectId: snap.scope.contextId, sessionId: snap.scope.parentSessionId } : null,
   })) : [];
@@ -3168,7 +3244,7 @@ window.addEventListener('message', async ev => {
       // hosts may only ever register same-origin iframe panels.
       const descriptor = Object.assign({}, data.panel, { kind: 'iframe', origin: ev.origin });
       const result = panelRegistry.register(descriptor, hostPanelOwner);
-      if (result.ok) postPanelState('register');
+      if (result.ok) { dock.refreshProviders?.(); postPanelState('register'); }
       reply({ type: 'kb:panel/registered', ok: result.ok, code: result.code || null, error: result.message || null, providerId: result.ok ? result.providerId : null });
       return;
     }

package/apps/agent-terminal/conversation-composer.js

@@ -0,0 +1,44 @@
+(function (global) {
+  'use strict';
+  function bindConversationComposer(options) {
+    const { input, send, onSend, onStop, onInput } = options;
+    input.addEventListener('input', () => {
+      input.style.height = 'auto';
+      input.style.height = Math.min(150, input.scrollHeight || 48) + 'px';
+      if (onInput) onInput(input.value);
+    });
+    input.addEventListener('keydown', event => {
+      if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) {
+        event.preventDefault();
+        if (!options.isBusy || !options.isBusy()) onSend();
+      }
+    });
+    send.addEventListener('click', () => {
+      if (options.isBusy && options.isBusy()) { if (onStop) onStop(); }
+      else onSend();
+    });
+  }
+  function createConversationComposer(options) {
+    const doc = options.document;
+    const node = doc.createElement('div'); node.className = 'composer-wrap rd-composer-wrap';
+    const box = doc.createElement('div'); box.className = 'composer';
+    const input = doc.createElement('textarea'); input.rows = 1;
+    input.placeholder = options.placeholder || '给子代理发送消息';
+    input.setAttribute('aria-label', input.placeholder); input.value = options.value || '';
+    const row = doc.createElement('div'); row.className = 'cmdrow';
+    const label = doc.createElement('span'); label.className = 'rd-composer-label'; label.textContent = '跟随主对话 · 默认防护';
+    const send = doc.createElement('button'); send.type = 'button'; send.className = 'send';
+    if (options.icon) send.append(options.icon('send', 16)); else send.textContent = '↑';
+    send.setAttribute('aria-label', '发送子代理消息');
+    row.append(label, send); box.append(input, row); node.append(box);
+    bindConversationComposer({ ...options, input, send });
+    return { node, input, send, setLabel(text) { label.textContent = text; }, setBusy(busy) {
+      send.setAttribute('aria-label', busy ? '停止子代理' : '发送子代理消息');
+      send.textContent = '';
+      if (options.icon) send.append(options.icon(busy ? 'stop' : 'send', 16)); else send.textContent = busy ? '■' : '↑';
+      input.disabled = Boolean(options.disabled && options.disabled());
+    } };
+  }
+  global.bindConversationComposer = bindConversationComposer;
+  global.createConversationComposer = createConversationComposer;
+})(typeof window === 'undefined' ? globalThis : window);