Function renderTool

app/src/modules/renderer.js:799–834

(b)

}

function renderTool(b) {
  const list = ensureGroup();
  S.currentGroupCount++;
  S.currentGroup.querySelector('.step-count').textContent = S.currentGroupCount + ' steps';

  const desc = toolDesc(b.name, b.input);
  const item = document.createElement('div');
  item.className = 'step-item loading';
  item.dataset.toolId = b.id || '';
  item.dataset.toolName = b.name || '';
  item.innerHTML = `
    <div class="step-icon">${iconFor(b.name)}</div>
    <span class="step-name">${esc(b.name)}</span>
    <span class="step-desc">${esc(trunc(desc, 40))}</span>
    <span class="step-duration" id="dur-${b.id}"></span>
    <span class="step-arrow"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></span>
  `;

  const detail = document.createElement('div');
  detail.className = 'step-detail';
  detail.id = `detail-${b.id}`;
  const inputFull = toolInputFull(b.name, b.input);
  const isEdit = b.name === 'Edit' && b.input && b.input.old_string !== undefined;
  if (isEdit) {
    detail.innerHTML = buildDiffHtml(b.input.old_string, b.input.new_string, b.input.file_path, b.input._startLine);
  } else {
    detail.innerHTML = `
      <div class="detail-input">${esc(inputFull)}</div>
      <div class="detail-result" id="result-${b.id}"></div>
    `;
  }

  list.appendChild(item);
  list.appendChild(detail);
  S.toolMap.set(b.id, { item, detail, name: b.name, group: S.currentGroup });
}

function attachResult(b) {
  const info = S.toolMap.get(b.tool_use_id);