stack/apps/web/src/spa/chat/tool-call-list.tsx

import type { ReactElement } from 'react';
import type { ToolCallState } from './use-chat-connection';

export function ToolCallList({ tools }: { tools: ToolCallState[] }): ReactElement | null {
  if (tools.length === 0) return null;

  return (
    <ul aria-label="Tool calls" className="flex flex-col gap-1 px-4 pb-2 text-xs">
      {tools.map((tool, index) => (
        <li
          // A valid server-controlled toolCallId can legitimately repeat
          // (e.g. two tool:start events sharing one id) — keying on it alone
          // would give React two identical keys. Pairing it with its
          // (stable, append-only) render index keeps every key unique.
          key={`${tool.toolCallId}-${index}`}
          role={tool.status === 'error' || tool.status === 'anomaly' ? 'alert' : 'status'}
        >
          {tool.toolName} —{' '}
          {tool.status === 'anomaly' ? 'unexpected end (unknown tool call)' : tool.status}
        </li>
      ))}
    </ul>
  );
}