@hef2024/llmasaservice-ui 0.24.2 → 0.24.4

package/src/AIChatPanel.tsx

@@ -21,6 +21,12 @@ import materialDark from 'react-syntax-highlighter/dist/esm/styles/prism/materia
 import materialLight from 'react-syntax-highlighter/dist/esm/styles/prism/material-light.js';
 import { Button, ScrollArea, Tooltip, ThinkingBlock as ThinkingBlockComponent } from './components/ui';
 import ToolInfoModal from './components/ui/ToolInfoModal';
+import {
+  MCPAuthPhase,
+  MCPAuthHeaderResolver,
+  normalizeMcpHeaders,
+} from './mcpAuth';
+import { parseToolArguments } from './toolArgsParser';
 import './AIChatPanel.css';
 
 // ============================================================================
@@ -38,6 +44,28 @@ export interface AgentOption {
   avatarUrl?: string;
 }
 
+export interface BeforeSendPayload {
+  prompt: string;
+  conversationId: string | null;
+  agentId?: string | null;
+  service?: string | null;
+  messages: { role: string; content: string }[];
+}
+
+export type TraceContextMode = 'standard' | 'full';
+
+export interface LocalToolExecutorContext {
+  toolName: string;
+  callId: string;
+  serviceTag: string;
+  mcpTool: Record<string, unknown> | null;
+}
+
+export type LocalToolExecutor = (
+  args: Record<string, unknown>,
+  context: LocalToolExecutorContext,
+) => Promise<unknown> | unknown;
+
 export interface AIChatPanelProps {
   project_id: string;
   initialPrompt?: string;
@@ -74,7 +102,11 @@ export interface AIChatPanelProps {
   initialHistory?: Record<string, { content: string; callId: string }>;
   hideRagContextInPrompt?: boolean;
   createConversationOnFirstChat?: boolean;
+  autoApproveTools?: boolean | string[];
   mcpServers?: any[];
+  resolveMcpAuthHeaders?: MCPAuthHeaderResolver;
+  localToolExecutors?: Record<string, LocalToolExecutor>;
+  traceContextMode?: TraceContextMode;
   progressiveActions?: boolean;
   
   // Agent selector props (Cursor-style at bottom of input)
@@ -94,6 +126,9 @@ export interface AIChatPanelProps {
   // Callback when a new conversation is created via API
   onConversationCreated?: (conversationId: string) => void;
 
+  // Callback invoked before each send() call
+  onBeforeSend?: (payload: BeforeSendPayload) => Promise<void> | void;
+
   // UI Customization Props (from ChatPanel)
   cssUrl?: string;
   markdownClass?: string;
@@ -143,8 +178,957 @@ interface ThinkingBlock {
   type: 'thinking' | 'reasoning' | 'searching';
   content: string;
   index: number;
+  signature: string;
+}
+
+interface ToolRequestMatch {
+  match: string;
+  groups: string[];
+  toolName: string;
+  callId: string;
+  serviceTag: string;
+  start: number;
+  end: number;
+}
+
+type ToolCallStatus = 'pending' | 'running' | 'completed' | 'error';
+
+interface ToolCallStatusRow {
+  signature: string;
+  toolName: string;
+  callId: string;
+  status: ToolCallStatus;
+  statusLabel: string;
+}
+
+interface ToolReplaySummaryEntry {
+  toolName: string;
+  callId: string;
+  status: 'ok' | 'error';
+  argsText: string;
+  resultText: string;
+}
+
+interface InlineToolMarker {
+  toolName: string;
+  callId: string;
+}
+
+interface InlineThinkingMarker {
+  type: 'thinking' | 'reasoning' | 'searching';
+  signature: string;
 }
 
+const areToolRequestListsEqual = (a: ToolRequestMatch[], b: ToolRequestMatch[]): boolean => {
+  if (a.length !== b.length) return false;
+  for (let index = 0; index < a.length; index += 1) {
+    const left = a[index];
+    const right = b[index];
+    if (!left || !right) return false;
+    if (left.callId !== right.callId) return false;
+    if (left.toolName !== right.toolName) return false;
+    if (left.serviceTag !== right.serviceTag) return false;
+    if (left.match !== right.match) return false;
+    if (left.start !== right.start || left.end !== right.end) return false;
+  }
+  return true;
+};
+
+const mergeContinuationResponseText = (baseText: string, continuationText: string): string => {
+  const base = typeof baseText === 'string' ? baseText : '';
+  const continuation = typeof continuationText === 'string' ? continuationText : '';
+  if (!base) return continuation;
+  if (!continuation) return base;
+
+  if (base.includes(continuation)) {
+    return base;
+  }
+
+  const maxOverlap = Math.min(base.length, continuation.length);
+  for (let overlap = maxOverlap; overlap > 0; overlap -= 1) {
+    if (base.slice(-overlap) === continuation.slice(0, overlap)) {
+      return `${base}${continuation.slice(overlap)}`;
+    }
+  }
+
+  return `${base}\n\n${continuation}`;
+};
+
+const INLINE_TOOL_MARKER_PREFIX = '[[AI_TOOL_CALL:';
+const INLINE_TOOL_MARKER_SUFFIX = ']]';
+const INLINE_TOOL_MARKER_REGEX = /\[\[AI_TOOL_CALL:([^|\]]+)\|([^\]]+)\]\]/g;
+const INLINE_THINKING_MARKER_PREFIX = '[[AI_THINK_BLOCK:';
+const INLINE_THINKING_MARKER_SUFFIX = ']]';
+const INLINE_THINKING_MARKER_REGEX = /\[\[AI_THINK_BLOCK:([^|\]]+)\|([^\]]+)\]\]/g;
+const MAX_TOOL_CONTINUATIONS_PER_TURN = 20;
+const MAX_TOOL_REPLAY_PAYLOAD_CHARS = 750_000;
+const MAX_TRACE_SUMMARY_CHARS = 1_800;
+const MAX_TRACE_REASONING_BLOCKS = 4;
+const MAX_TRACE_TOOL_LINES = 6;
+const MAX_TRACE_ITEM_CHARS = 220;
+const MAX_TRACE_LINE_CHARS = 420;
+
+const hasInlineRuntimeMarkers = (value: string): boolean => {
+  const source = typeof value === 'string' ? value : '';
+  return source.includes(INLINE_TOOL_MARKER_PREFIX) || source.includes(INLINE_THINKING_MARKER_PREFIX);
+};
+
+const toNonEmptyLines = (value: string): string[] =>
+  String(value || '')
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0);
+
+const isBoundarySubsetByLines = (existingLines: string[], incomingLines: string[]): boolean => {
+  if (incomingLines.length === 0 || existingLines.length === 0) return false;
+  if (incomingLines.length >= existingLines.length) return false;
+
+  const prefixMatch = incomingLines.every((line, index) => existingLines[index] === line);
+  if (prefixMatch) return true;
+
+  const suffixStart = existingLines.length - incomingLines.length;
+  return incomingLines.every((line, index) => existingLines[suffixStart + index] === line);
+};
+
+const shouldPreserveBoundaryDroppedStreamText = (
+  existingContent: string,
+  incomingContent: string,
+): boolean => {
+  const existing = String(existingContent || '').trim();
+  const incoming = String(incomingContent || '').trim();
+  if (!existing) return false;
+  if (!incoming) return true;
+  if (incoming === existing) return false;
+  if (!hasInlineRuntimeMarkers(existing)) return false;
+
+  if (existing.includes(incoming)) {
+    return true;
+  }
+
+  const existingLines = toNonEmptyLines(existing);
+  const incomingLines = toNonEmptyLines(incoming);
+  return isBoundarySubsetByLines(existingLines, incomingLines);
+};
+
+const isObjectRecord = (value: unknown): value is Record<string, unknown> =>
+  !!value && typeof value === 'object' && !Array.isArray(value);
+
+const stringifyToolArgs = (value: unknown): string => {
+  if (typeof value === 'string') return value;
+  try {
+    return JSON.stringify(value ?? {});
+  } catch (_error) {
+    return '{}';
+  }
+};
+
+const truncateTraceText = (value: string, maxChars: number): string => {
+  const text = String(value || '').trim();
+  if (!text) return '';
+  if (text.length <= maxChars) return text;
+  return `${text.slice(0, Math.max(0, maxChars - 1)).trimEnd()}…`;
+};
+
+const normalizeTraceText = (value: unknown): string => {
+  if (value === null || value === undefined) return '';
+  const raw =
+    typeof value === 'string'
+      ? value
+      : (() => {
+          try {
+            return JSON.stringify(value);
+          } catch (_error) {
+            return String(value);
+          }
+        })();
+  return String(raw || '')
+    .replace(/\s+/g, ' ')
+    .trim();
+};
+
+const toTraceObjectArray = (value: unknown): Record<string, unknown>[] => {
+  if (!Array.isArray(value)) return [];
+  return value.filter((item): item is Record<string, unknown> => isObjectRecord(item));
+};
+
+const getTraceStatusLabel = (response: Record<string, unknown> | undefined): 'ok' | 'error' | 'pending' => {
+  if (!response) return 'pending';
+  if (response.isError === true || response.error === true) return 'error';
+  return 'ok';
+};
+
+const buildCompactTraceSummary = ({
+  reasoningBlocks,
+  toolCalls,
+  toolResponses,
+}: {
+  reasoningBlocks: ThinkingBlock[];
+  toolCalls?: unknown[];
+  toolResponses?: unknown[];
+}): string => {
+  const sections: string[] = [];
+
+  const normalizedReasoning = (Array.isArray(reasoningBlocks) ? reasoningBlocks : [])
+    .filter((block) => !!block && typeof block.content === 'string' && block.content.trim().length > 0)
+    .slice(-MAX_TRACE_REASONING_BLOCKS)
+    .map((block) => {
+      const content = truncateTraceText(normalizeTraceText(block.content), MAX_TRACE_ITEM_CHARS);
+      if (!content) return '';
+      const type = typeof block.type === 'string' ? block.type : 'thinking';
+      return `- ${type}: ${content}`;
+    })
+    .filter(Boolean);
+
+  if (normalizedReasoning.length > 0) {
+    sections.push(['reasoning:', ...normalizedReasoning].join('\n'));
+  }
+
+  const calls = toTraceObjectArray(toolCalls).slice(-MAX_TRACE_TOOL_LINES);
+  const responses = toTraceObjectArray(toolResponses);
+  if (calls.length > 0) {
+    const responsesByCallId = new Map<string, Record<string, unknown>>();
+    responses.forEach((response) => {
+      const key = typeof response.tool_call_id === 'string' ? response.tool_call_id.trim() : '';
+      if (!key || responsesByCallId.has(key)) return;
+      responsesByCallId.set(key, response);
+    });
+
+    const responseOffset = Math.max(0, responses.length - calls.length);
+    const toolLines = calls
+      .map((call, index) => {
+        const toolName =
+          typeof call.name === 'string'
+            ? call.name.trim()
+            : typeof call.tool_name === 'string'
+            ? call.tool_name.trim()
+            : 'tool';
+        const callId =
+          typeof call.id === 'string'
+            ? call.id.trim()
+            : typeof call.tool_call_id === 'string'
+            ? call.tool_call_id.trim()
+            : '';
+        const response =
+          (callId ? responsesByCallId.get(callId) : undefined) || responses[responseOffset + index] || responses[index];
+        const status = getTraceStatusLabel(response);
+
+        const rawArgs = call.input ?? call.args ?? call.arguments ?? {};
+        const parsedArgs = parseToolArguments(rawArgs);
+        const normalizedArgs = truncateTraceText(
+          normalizeTraceText(parsedArgs ?? (isObjectRecord(rawArgs) ? rawArgs : rawArgs || {})),
+          MAX_TRACE_ITEM_CHARS,
+        );
+
+        const normalizedResult = truncateTraceText(
+          normalizeTraceText(response?.result ?? response?.content ?? response?.error ?? ''),
+          MAX_TRACE_ITEM_CHARS,
+        );
+
+        const base = callId ? `- ${toolName} (${callId}) ${status}` : `- ${toolName} ${status}`;
+        const withArgs = normalizedArgs ? `${base} args=${normalizedArgs}` : base;
+        const withResult = normalizedResult ? `${withArgs} result=${normalizedResult}` : withArgs;
+        return truncateTraceText(withResult, MAX_TRACE_LINE_CHARS);
+      })
+      .filter(Boolean);
+
+    if (toolLines.length > 0) {
+      sections.push(['tools:', ...toolLines].join('\n'));
+    }
+  }
+
+  if (sections.length === 0) return '';
+  return truncateTraceText(['TRACE SUMMARY (compact)', ...sections].join('\n'), MAX_TRACE_SUMMARY_CHARS);
+};
+
+const findPreviousNonWhitespaceChar = (text: string, startIndex: number): string | null => {
+  for (let index = startIndex; index >= 0; index -= 1) {
+    const char = text[index];
+    if (typeof char !== 'string') continue;
+    if (!/\s/.test(char)) {
+      return char;
+    }
+  }
+  return null;
+};
+
+const findNextNonWhitespaceChar = (text: string, startIndex: number): string | null => {
+  for (let index = startIndex; index < text.length; index += 1) {
+    const char = text[index];
+    if (typeof char !== 'string') continue;
+    if (!/\s/.test(char)) {
+      return char;
+    }
+  }
+  return null;
+};
+
+const isStandaloneToolObjectSegment = (text: string, openIndex: number, closeIndex: number): boolean => {
+  const lineStart = text.lastIndexOf('\n', openIndex - 1) + 1;
+  const lineEndRaw = text.indexOf('\n', closeIndex + 1);
+  const lineEnd = lineEndRaw === -1 ? text.length : lineEndRaw;
+
+  const linePrefix = text.slice(lineStart, openIndex);
+  const lineSuffix = text.slice(closeIndex + 1, lineEnd);
+  const startsLine = linePrefix.trim().length === 0;
+  const endsLine = lineSuffix.trim().length === 0;
+
+  const prevChar = findPreviousNonWhitespaceChar(text, openIndex - 1);
+  const nextChar = findNextNonWhitespaceChar(text, closeIndex + 1);
+  const prevDelimited = prevChar !== null && ['{', '}', '[', ']', ','].includes(prevChar);
+  const nextDelimited = nextChar !== null && ['{', '}', '[', ']', ','].includes(nextChar);
+
+  // Guard against replay-summary lines such as "Args: {...}" / "Result: {...}".
+  const prefixWindow = text.slice(Math.max(0, openIndex - 64), openIndex);
+  const hasLabelPrefix = /(?:^|[\r\n])\s*[A-Za-z][A-Za-z0-9 _-]{0,30}:\s*$/.test(prefixWindow);
+  if (hasLabelPrefix) return false;
+
+  return (startsLine || prevDelimited) && (endsLine || nextDelimited);
+};
+
+type ParsedJsonSegment = {
+  start: number;
+  end: number;
+  raw: string;
+  value: Record<string, unknown>;
+};
+
+const extractTopLevelJsonObjectSegments = (source: string): ParsedJsonSegment[] => {
+  const text = typeof source === 'string' ? source : '';
+  if (!text) return [];
+
+  const segments: ParsedJsonSegment[] = [];
+  let cursor = 0;
+
+  while (cursor < text.length) {
+    const openIndex = text.indexOf('{', cursor);
+    if (openIndex === -1) break;
+
+    let depth = 0;
+    let inString = false;
+    let escaped = false;
+    let closeIndex = -1;
+
+    for (let index = openIndex; index < text.length; index += 1) {
+      const char = text[index];
+
+      if (inString) {
+        if (escaped) {
+          escaped = false;
+          continue;
+        }
+        if (char === '\\') {
+          escaped = true;
+          continue;
+        }
+        if (char === '"') {
+          inString = false;
+        }
+        continue;
+      }
+
+      if (char === '"') {
+        inString = true;
+        continue;
+      }
+
+      if (char === '{') {
+        depth += 1;
+        continue;
+      }
+
+      if (char === '}') {
+        depth -= 1;
+        if (depth === 0) {
+          closeIndex = index;
+          break;
+        }
+        if (depth < 0) {
+          break;
+        }
+      }
+    }
+
+    if (closeIndex === -1) {
+      cursor = openIndex + 1;
+      continue;
+    }
+
+    const raw = text.slice(openIndex, closeIndex + 1);
+    try {
+      const value = JSON.parse(raw);
+      if (isObjectRecord(value) && isStandaloneToolObjectSegment(text, openIndex, closeIndex)) {
+        segments.push({
+          start: openIndex,
+          end: closeIndex + 1,
+          raw,
+          value,
+        });
+      }
+    } catch (_error) {
+      // Ignore parse failures for non-tool JSON snippets.
+    }
+
+    cursor = closeIndex + 1;
+  }
+
+  return segments;
+};
+
+const resolveToolRequestFromSegment = (
+  segment: ParsedJsonSegment,
+  fallbackIndex: number,
+): ToolRequestMatch | null => {
+  const record = segment.value;
+  const serviceTag = typeof record.service === 'string' ? record.service : '';
+  const rawId = typeof record.id === 'string' ? record.id.trim() : '';
+
+  if (record.type === 'tool_use' && typeof record.name === 'string') {
+    const toolName = String(record.name).trim();
+    if (!toolName) return null;
+    const callId = rawId || `${toolName}-${fallbackIndex + 1}`;
+    return {
+      match: segment.raw,
+      groups: [callId, toolName, stringifyToolArgs(record.input ?? {}), serviceTag],
+      toolName,
+      callId,
+      serviceTag,
+      start: segment.start,
+      end: segment.end,
+    };
+  }
+
+  if (record.type === 'function' && isObjectRecord(record.function)) {
+    const functionRecord = record.function;
+    const toolName = typeof functionRecord.name === 'string' ? functionRecord.name.trim() : '';
+    if (!toolName) return null;
+    const callId = rawId || `${toolName}-${fallbackIndex + 1}`;
+    return {
+      match: segment.raw,
+      groups: [callId, toolName, stringifyToolArgs(functionRecord.arguments ?? {}), serviceTag],
+      toolName,
+      callId,
+      serviceTag,
+      start: segment.start,
+      end: segment.end,
+    };
+  }
+
+  if (isObjectRecord(record.functionCall) && typeof record.functionCall.name === 'string') {
+    const functionCall = record.functionCall;
+    const toolName = String(functionCall.name).trim();
+    if (!toolName) return null;
+    const callId = rawId || `${toolName}-${fallbackIndex + 1}`;
+    return {
+      match: segment.raw,
+      groups: [callId, toolName, stringifyToolArgs(functionCall.args ?? {}), serviceTag],
+      toolName,
+      callId,
+      serviceTag,
+      start: segment.start,
+      end: segment.end,
+    };
+  }
+
+  return null;
+};
+
+const extractBalancedObjectCandidate = (input: string): string | null => {
+  const text = typeof input === 'string' ? input : '';
+  const start = text.indexOf('{');
+  if (start === -1) return null;
+
+  let depth = 0;
+  let inString = false;
+  let escaped = false;
+
+  for (let index = start; index < text.length; index += 1) {
+    const char = text[index];
+
+    if (inString) {
+      if (escaped) {
+        escaped = false;
+        continue;
+      }
+      if (char === '\\') {
+        escaped = true;
+        continue;
+      }
+      if (char === '"') {
+        inString = false;
+      }
+      continue;
+    }
+
+    if (char === '"') {
+      inString = true;
+      continue;
+    }
+    if (char === '{') {
+      depth += 1;
+      continue;
+    }
+    if (char === '}') {
+      depth -= 1;
+      if (depth === 0) {
+        return text.slice(start, index + 1);
+      }
+    }
+  }
+
+  return null;
+};
+
+const extractLineLevelFallbackToolRequests = (
+  source: string,
+  existing: ToolRequestMatch[],
+): ToolRequestMatch[] => {
+  const text = typeof source === 'string' ? source : '';
+  if (!text) return [];
+
+  const takenRanges = existing.map((request) => ({
+    start: request.start,
+    end: request.end,
+  }));
+
+  const overlapsExisting = (start: number, end: number): boolean =>
+    takenRanges.some((range) => start < range.end && end > range.start);
+
+  const requests: ToolRequestMatch[] = [];
+  let offset = 0;
+  const lines = text.split('\n');
+
+  const normalizeStandaloneToolJsonLine = (line: string): string | null => {
+    const trimmed = line.trim();
+    if (!trimmed) return null;
+
+    let normalized = trimmed;
+    const first = normalized[0];
+    const last = normalized[normalized.length - 1];
+    const hasSymmetricQuote =
+      normalized.length >= 2 &&
+      ((first === "'" && last === "'") || (first === '"' && last === '"') || (first === '`' && last === '`'));
+    if (hasSymmetricQuote) {
+      const inner = normalized.slice(1, -1).trim();
+      if (first === '"') {
+        try {
+          const decoded = JSON.parse(normalized);
+          if (typeof decoded === 'string') {
+            normalized = decoded.trim();
+          } else {
+            normalized = inner;
+          }
+        } catch (_error) {
+          normalized = inner;
+        }
+      } else {
+        normalized = inner;
+      }
+    }
+
+    const extractedCandidate = extractBalancedObjectCandidate(normalized);
+    if (extractedCandidate) {
+      normalized = extractedCandidate.trim();
+    }
+
+    if (!normalized.startsWith('{')) return null;
+    if (!normalized.includes('"type"')) return null;
+    return normalized;
+  };
+
+  const extractBalancedObjectAfterField = (input: string, fieldName: string): string | null => {
+    const fieldRegex = new RegExp(`"${fieldName}"\\s*:\\s*`, 'i');
+    const fieldMatch = fieldRegex.exec(input);
+    if (!fieldMatch) return null;
+
+    const startIndex = input.indexOf('{', fieldMatch.index + fieldMatch[0].length);
+    if (startIndex === -1) return null;
+
+    let depth = 0;
+    let inString = false;
+    let escaped = false;
+
+    for (let index = startIndex; index < input.length; index += 1) {
+      const char = input[index];
+
+      if (inString) {
+        if (escaped) {
+          escaped = false;
+          continue;
+        }
+        if (char === '\\') {
+          escaped = true;
+          continue;
+        }
+        if (char === '"') {
+          inString = false;
+        }
+        continue;
+      }
+
+      if (char === '"') {
+        inString = true;
+        continue;
+      }
+      if (char === '{') {
+        depth += 1;
+        continue;
+      }
+      if (char === '}') {
+        depth -= 1;
+        if (depth === 0) {
+          return input.slice(startIndex, index + 1);
+        }
+      }
+    }
+
+    return null;
+  };
+
+  lines.forEach((line, index) => {
+    const lineStart = offset;
+    const lineEnd = lineStart + line.length;
+    offset = lineEnd + (index < lines.length - 1 ? 1 : 0);
+
+    const normalized = normalizeStandaloneToolJsonLine(line);
+    if (!normalized) return;
+    if (!(normalized.includes('"tool_use"') || normalized.includes('"function"'))) return;
+    if (/(^|[\r\n])\s*[A-Za-z][A-Za-z0-9 _-]{0,30}:\s*\{/.test(line)) return;
+    if (overlapsExisting(lineStart, lineEnd)) return;
+
+    // Prefer strict JSON parsing after line-level normalization to handle
+    // quoted/escaped raw tool payload lines without brittle regex capture.
+    try {
+      const parsedLine = JSON.parse(normalized);
+      if (isObjectRecord(parsedLine)) {
+        const type = typeof parsedLine.type === 'string' ? parsedLine.type.trim().toLowerCase() : '';
+        if (type === 'tool_use') {
+          const toolName = typeof parsedLine.name === 'string' ? parsedLine.name.trim() : '';
+          if (!toolName) return;
+          const callId =
+            typeof parsedLine.id === 'string' && parsedLine.id.trim().length > 0
+              ? parsedLine.id.trim()
+              : `tool-call-${index + 1}`;
+          const serviceTag = typeof parsedLine.service === 'string' ? parsedLine.service : '';
+          const parsedArgs = parseToolArguments(parsedLine.input ?? {});
+          if (!parsedArgs) return;
+
+          requests.push({
+            match: line,
+            groups: [callId, toolName, stringifyToolArgs(parsedArgs), serviceTag],
+            toolName,
+            callId,
+            serviceTag,
+            start: lineStart,
+            end: lineEnd,
+          });
+          return;
+        }
+
+        if (type === 'function' && isObjectRecord(parsedLine.function)) {
+          const functionRecord = parsedLine.function;
+          const toolName = typeof functionRecord.name === 'string' ? functionRecord.name.trim() : '';
+          if (!toolName) return;
+          const callId =
+            typeof parsedLine.id === 'string' && parsedLine.id.trim().length > 0
+              ? parsedLine.id.trim()
+              : `tool-call-${index + 1}`;
+          const serviceTag = typeof parsedLine.service === 'string' ? parsedLine.service : '';
+          const parsedArgs = parseToolArguments(functionRecord.arguments ?? {});
+          if (!parsedArgs) return;
+
+          requests.push({
+            match: line,
+            groups: [callId, toolName, stringifyToolArgs(parsedArgs), serviceTag],
+            toolName,
+            callId,
+            serviceTag,
+            start: lineStart,
+            end: lineEnd,
+          });
+          return;
+        }
+      }
+    } catch (_error) {
+      // Fall through to permissive regex extraction for malformed-yet-recoverable payloads.
+    }
+
+    const typeMatch = normalized.match(/"type"\s*:\s*"([^"]+)"/i);
+    const type = typeMatch?.[1]?.trim().toLowerCase();
+    if (type !== 'tool_use' && type !== 'function') return;
+
+    const idMatch = normalized.match(/"id"\s*:\s*"([^"]+)"/i);
+    const callId = idMatch?.[1]?.trim() || `tool-call-${index + 1}`;
+
+    let toolName = '';
+    let argsRaw = '{}';
+    if (type === 'tool_use') {
+      const nameMatch = normalized.match(/"name"\s*:\s*"([^"]+)"/i);
+      toolName = nameMatch?.[1]?.trim() || '';
+      const inputObject = extractBalancedObjectAfterField(normalized, 'input');
+      if (inputObject) {
+        argsRaw = inputObject;
+      }
+    } else {
+      const fnNameMatch = normalized.match(/"function"\s*:\s*\{[\s\S]*?"name"\s*:\s*"([^"]+)"/i);
+      toolName = fnNameMatch?.[1]?.trim() || '';
+
+      const argumentsObject = extractBalancedObjectAfterField(normalized, 'arguments');
+      if (argumentsObject) {
+        argsRaw = argumentsObject;
+      } else {
+        const argsStringMatch = normalized.match(/"arguments"\s*:\s*"([\s\S]*?)"(?:\s*,|\s*})/i);
+        if (argsStringMatch?.[1]) {
+          const rawArgs = argsStringMatch[1];
+          try {
+            argsRaw = JSON.parse(`"${rawArgs}"`);
+          } catch (_error) {
+            argsRaw = rawArgs;
+          }
+        }
+      }
+    }
+
+    if (!toolName) return;
+    const parsedArgs = parseToolArguments(argsRaw);
+    if (!parsedArgs) return;
+
+    requests.push({
+      match: line,
+      groups: [callId, toolName, stringifyToolArgs(parsedArgs), ''],
+      toolName,
+      callId,
+      serviceTag: '',
+      start: lineStart,
+      end: lineEnd,
+    });
+  });
+
+  return requests;
+};
+
+const stripStandaloneRawToolJsonLines = (source: string): string => {
+  const text = typeof source === 'string' ? source : '';
+  if (!text) return text;
+
+  const normalizeStandaloneToolJsonLine = (line: string): string | null => {
+    const trimmed = line.trim();
+    if (!trimmed) return null;
+
+    let normalized = trimmed;
+    const first = normalized[0];
+    const last = normalized[normalized.length - 1];
+    const hasSymmetricQuote =
+      normalized.length >= 2 &&
+      ((first === "'" && last === "'") || (first === '"' && last === '"') || (first === '`' && last === '`'));
+    if (hasSymmetricQuote) {
+      const inner = normalized.slice(1, -1).trim();
+      if (first === '"') {
+        try {
+          const decoded = JSON.parse(normalized);
+          if (typeof decoded === 'string') {
+            normalized = decoded.trim();
+          } else {
+            normalized = inner;
+          }
+        } catch (_error) {
+          normalized = inner;
+        }
+      } else {
+        normalized = inner;
+      }
+    }
+
+    const extractedCandidate = extractBalancedObjectCandidate(normalized);
+    if (extractedCandidate) {
+      normalized = extractedCandidate.trim();
+    }
+
+    if (!normalized.startsWith('{') || !normalized.endsWith('}')) return null;
+    return normalized;
+  };
+
+  const lines = text.split('\n');
+  let removedAny = false;
+  const kept = lines.filter((line) => {
+    const normalized = normalizeStandaloneToolJsonLine(line);
+    if (!normalized) return true;
+
+    const hasToolType = /"type"\s*:\s*"(tool_use|function)"/i.test(normalized);
+    if (!hasToolType) return true;
+
+    const hasName = /"name"\s*:\s*"[^"]+"/i.test(normalized);
+    const hasFunctionName = /"function"\s*:\s*\{[\s\S]*?"name"\s*:\s*"[^"]+"/i.test(normalized);
+    if (!hasName && !hasFunctionName) return true;
+
+    removedAny = true;
+    return false;
+  });
+
+  if (!removedAny) return text;
+  return kept.join('\n').replace(/\n{3,}/g, '\n\n');
+};
+
+const extractToolRequestMatchesFromText = (rawResponse: string): ToolRequestMatch[] => {
+  const requests: ToolRequestMatch[] = [];
+  const segments = extractTopLevelJsonObjectSegments(rawResponse);
+  segments.forEach((segment, segmentIndex) => {
+    const parsed = resolveToolRequestFromSegment(segment, segmentIndex);
+    if (!parsed) return;
+    requests.push(parsed);
+  });
+
+  const fallbackRequests = extractLineLevelFallbackToolRequests(rawResponse, requests);
+  fallbackRequests.forEach((request) => {
+    requests.push(request);
+  });
+
+  if (requests.length === 0) return [];
+  requests.sort((a, b) => a.start - b.start);
+
+  const seenSignatures = new Set<string>();
+  const deduped = requests.filter((request) => {
+    const signature = `${String(request.toolName || '').trim().toLowerCase()}::${String(
+      request.callId || '',
+    ).trim().toLowerCase()}::${request.start}`;
+    if (seenSignatures.has(signature)) return false;
+    seenSignatures.add(signature);
+    return true;
+  });
+
+  deduped.sort((a, b) => a.start - b.start);
+  return deduped;
+};
+
+const hashInlineMarkerValue = (value: string): string => {
+  let hash = 5381;
+  const input = String(value || '');
+  for (let index = 0; index < input.length; index += 1) {
+    hash = ((hash << 5) + hash) ^ input.charCodeAt(index);
+  }
+  return (hash >>> 0).toString(36);
+};
+
+const getThinkingBlockSignature = (
+  type: 'thinking' | 'reasoning' | 'searching',
+  content: string,
+): string => {
+  const normalizedContent = String(content || '').trim();
+  return `${type}-${hashInlineMarkerValue(normalizedContent)}-${normalizedContent.length}`;
+};
+
+const buildThinkingBlockMarker = (
+  type: 'thinking' | 'reasoning' | 'searching',
+  signature: string,
+): string => {
+  const normalizedType = String(type || 'thinking').trim() as 'thinking' | 'reasoning' | 'searching';
+  const normalizedSignature = String(signature || '').trim() || `${normalizedType}-block`;
+  return `${INLINE_THINKING_MARKER_PREFIX}${encodeURIComponent(normalizedType)}|${encodeURIComponent(
+    normalizedSignature,
+  )}${INLINE_THINKING_MARKER_SUFFIX}`;
+};
+
+const buildInlineToolMarker = (toolName: string, callId: string): string => {
+  const normalizedToolName = String(toolName || '').trim() || 'tool';
+  const normalizedCallId = String(callId || '').trim() || `${normalizedToolName}-call`;
+  return `${INLINE_TOOL_MARKER_PREFIX}${encodeURIComponent(normalizedToolName)}|${encodeURIComponent(
+    normalizedCallId,
+  )}${INLINE_TOOL_MARKER_SUFFIX}`;
+};
+
+const parseInlineToolMarkers = (text: string): { parts: string[]; markers: InlineToolMarker[] } => {
+  const source = typeof text === 'string' ? text : '';
+  if (!source) return { parts: [''], markers: [] };
+
+  const parts: string[] = [];
+  const markers: InlineToolMarker[] = [];
+  let lastIndex = 0;
+  INLINE_TOOL_MARKER_REGEX.lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = INLINE_TOOL_MARKER_REGEX.exec(source)) !== null) {
+    parts.push(source.slice(lastIndex, match.index));
+
+    const encodedToolName = match[1] || '';
+    const encodedCallId = match[2] || '';
+    let toolName = encodedToolName;
+    let callId = encodedCallId;
+
+    try {
+      toolName = decodeURIComponent(encodedToolName);
+    } catch (_error) {
+      toolName = encodedToolName;
+    }
+
+    try {
+      callId = decodeURIComponent(encodedCallId);
+    } catch (_error) {
+      callId = encodedCallId;
+    }
+
+    markers.push({
+      toolName: String(toolName || '').trim() || 'tool',
+      callId: String(callId || '').trim() || 'call',
+    });
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  parts.push(source.slice(lastIndex));
+  return { parts, markers };
+};
+
+const parseInlineThinkingMarkers = (
+  text: string,
+): { parts: string[]; markers: InlineThinkingMarker[] } => {
+  const source = typeof text === 'string' ? text : '';
+  if (!source) return { parts: [''], markers: [] };
+
+  const parts: string[] = [];
+  const markers: InlineThinkingMarker[] = [];
+  let lastIndex = 0;
+  INLINE_THINKING_MARKER_REGEX.lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = INLINE_THINKING_MARKER_REGEX.exec(source)) !== null) {
+    parts.push(source.slice(lastIndex, match.index));
+
+    const encodedType = match[1] || '';
+    const encodedSignature = match[2] || '';
+    let rawType = encodedType;
+    let signature = encodedSignature;
+
+    try {
+      rawType = decodeURIComponent(encodedType);
+    } catch (_error) {
+      rawType = encodedType;
+    }
+
+    try {
+      signature = decodeURIComponent(encodedSignature);
+    } catch (_error) {
+      signature = encodedSignature;
+    }
+
+    const normalizedType = String(rawType || '').trim().toLowerCase();
+    const type: 'thinking' | 'reasoning' | 'searching' =
+      normalizedType === 'reasoning'
+        ? 'reasoning'
+        : normalizedType === 'searching'
+        ? 'searching'
+        : 'thinking';
+
+    markers.push({
+      type,
+      signature: String(signature || '').trim(),
+    });
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  parts.push(source.slice(lastIndex));
+  return { parts, markers };
+};
+
 // ============================================================================
 // Icons
 // ============================================================================
@@ -218,6 +1202,12 @@ const AgentIcon = () => (
   </svg>
 );
 
+const ToolIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+    <path d="M14.7 6.3a4 4 0 0 0-5.4 5.4l-6 6a2 2 0 0 0 2.8 2.8l6-6a4 4 0 0 0 5.4-5.4l-2.1 2.1-3.3-3.3 2.6-1.6Z" />
+  </svg>
+);
+
 const CheckIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
     <polyline points="20 6 9 17 4 12" />
@@ -287,7 +1277,7 @@ const CloseIcon = () => (
 
 interface ChatInputProps {
   placeholder: string;
-  idle: boolean;
+  isBusy: boolean;
   onSubmit: (text: string) => void;
   onStop: () => void;
   agentOptions: AgentOption[];
@@ -308,7 +1298,7 @@ interface ChatInputProps {
 
 const ChatInput = React.memo<ChatInputProps>(({
   placeholder,
-  idle,
+  isBusy,
   onSubmit,
   onStop,
   agentOptions,
@@ -345,7 +1335,7 @@ const ChatInput = React.memo<ChatInputProps>(({
   // Handle submit
   const handleSubmit = useCallback(() => {
     const trimmed = inputValue.trim();
-    if (trimmed && idle) {
+    if (trimmed && !isBusy) {
       onSubmit(trimmed);
       setInputValue('');
       // Reset textarea height
@@ -353,7 +1343,7 @@ const ChatInput = React.memo<ChatInputProps>(({
         textareaRef.current.style.height = 'auto';
       }
     }
-  }, [inputValue, idle, onSubmit]);
+  }, [inputValue, isBusy, onSubmit]);
 
   // Close dropdown on outside click
   useEffect(() => {
@@ -531,9 +1521,9 @@ const ChatInput = React.memo<ChatInputProps>(({
                       </div>
                     </div>
                     <div className="ai-chat-context-popover__sections">
-                      {contextSections.map((section) => (
+                      {contextSections.map((section, index) => (
                         <div 
-                          key={section.id} 
+                          key={`${section.id}-${index}`}
                           className={`ai-chat-context-popover__section-item ${enableContextDetailView ? 'ai-chat-context-popover__section-item--clickable' : ''}`}
                           onClick={() => {
                             if (enableContextDetailView) {
@@ -608,12 +1598,12 @@ const ChatInput = React.memo<ChatInputProps>(({
                       </div>
                     </div>
                     <div className="ai-chat-context-popover__detail-sections">
-                      {contextSections.map((section) => {
+                      {contextSections.map((section, index) => {
                         const isRawSection = hasRawData(section);
                         const isEnabled = !disabledSectionIds.has(section.id);
                         return (
                           <details 
-                            key={section.id} 
+                            key={`${section.id}-${index}`}
                             className={`ai-chat-context-popover__detail-section ${!isEnabled ? 'ai-chat-context-popover__detail-section--disabled' : ''}`}
                             open={expandedSectionId === section.id}
                           >
@@ -661,11 +1651,11 @@ const ChatInput = React.memo<ChatInputProps>(({
         )}
         
         <button
-          className={`ai-chat-send-button ${idle && !inputValue.trim() ? 'ai-chat-send-button--disabled' : ''} ${!idle ? 'ai-chat-send-button--stop' : ''}`}
-          onClick={() => idle ? handleSubmit() : onStop()}
-          disabled={idle && !inputValue.trim()}
+          className={`ai-chat-send-button ${!isBusy && !inputValue.trim() ? 'ai-chat-send-button--disabled' : ''} ${isBusy ? 'ai-chat-send-button--stop' : ''}`}
+          onClick={() => isBusy ? onStop() : handleSubmit()}
+          disabled={!isBusy && !inputValue.trim()}
         >
-          {idle ? <ArrowUpIcon /> : <StopIcon />}
+          {isBusy ? <StopIcon /> : <ArrowUpIcon />}
         </button>
       </div>
       
@@ -748,7 +1738,11 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   initialHistory = {},
   hideRagContextInPrompt = true,
   createConversationOnFirstChat = true,
+  autoApproveTools = false,
   mcpServers = [],
+  resolveMcpAuthHeaders,
+  localToolExecutors,
+  traceContextMode = 'standard',
   progressiveActions = true,
   agentOptions = [],
   currentAgentId,
@@ -761,6 +1755,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   disabledSectionIds: propDisabledSectionIds,
   onToggleSection: propOnToggleSection,
   onConversationCreated,
+  onBeforeSend,
   // UI Customization Props
   cssUrl,
   markdownClass,
@@ -801,10 +1796,12 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const [thinkingBlocks, setThinkingBlocks] = useState<ThinkingBlock[]>([]);
   const [currentThinkingIndex, setCurrentThinkingIndex] = useState(0);
   // NOTE: activeThinkingBlock is computed via useMemo, not useState - see below after processThinkingTags
-  // Track collapsed state per block (key: "block-{index}" or "active" for streaming block)
+  // Track collapsed state per block (key: "{entryKey}::block-{index}" or "{entryKey}::active")
   const [collapsedBlocks, setCollapsedBlocks] = useState<Set<string>>(new Set());
   const hasAutoCollapsedRef = useRef(false); // Track if we've auto-collapsed for current response
   const prevBlockCountRef = useRef(0); // Track previous block count to detect new blocks
+  const thinkingBlocksByKeyRef = useRef<Record<string, ThinkingBlock[]>>({});
+  const [thinkingBlocksByKey, setThinkingBlocksByKey] = useState<Record<string, ThinkingBlock[]>>({});
   const [newConversationConfirm, setNewConversationConfirm] = useState(false);
   const [justReset, setJustReset] = useState(false);
   const [copiedCallId, setCopiedCallId] = useState<string | null>(null);
@@ -831,15 +1828,80 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const [emailClickedButNoEmail, setEmailClickedButNoEmail] = useState(false);
 
   // Tool Approval state (for MCP tools)
-  const [pendingToolRequests, setPendingToolRequests] = useState<any[]>([]);
+  const [pendingToolRequests, setPendingToolRequests] = useState<ToolRequestMatch[]>([]);
   const [sessionApprovedTools, setSessionApprovedTools] = useState<string[]>([]);
   const [alwaysApprovedTools, setAlwaysApprovedTools] = useState<string[]>([]);
+  const [toolList, setToolList] = useState<any[]>([]);
+  const [toolsLoading, setToolsLoading] = useState(false);
+  const [toolsFetchError, setToolsFetchError] = useState(false);
+  const [resolvedMcpServers, setResolvedMcpServers] = useState<any[]>(mcpServers || []);
+  const [activeToolCalls, setActiveToolCalls] = useState<Array<{ toolName: string; callId: string }>>([]);
+  const normalizeToolName = useCallback((toolName: string): string => {
+    return String(toolName ?? '').trim().toLowerCase();
+  }, []);
+  const getToolCallSignature = useCallback(
+    (toolName: string, callId: string): string => {
+      const normalizedToolName = normalizeToolName(toolName);
+      const normalizedCallId = String(callId ?? '').trim();
+      if (!normalizedToolName || !normalizedCallId) return '';
+      return `${normalizedToolName}::${normalizedCallId}`;
+    },
+    [normalizeToolName],
+  );
+  const alwaysApprovedToolsStorageKey = useMemo(() => {
+    const customerId =
+      (customer as any)?.customer_id ||
+      (customer as any)?.id ||
+      (customer as any)?.customer_user_email ||
+      'anonymous';
+    const agentIdForScope = currentAgentId || agent || 'default';
+    return `llmasaservice-ui:always-approved-tools:${project_id}:${customerId}:${agentIdForScope}`;
+  }, [project_id, customer, currentAgentId, agent]);
 
   // Context section toggle state (disabled sections)
   // Use internal state only if prop is not provided
   const [internalDisabledSectionIds, setInternalDisabledSectionIds] = useState<Set<string>>(new Set());
   const disabledSectionIds = propDisabledSectionIds ?? internalDisabledSectionIds;
 
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    try {
+      const stored = window.localStorage.getItem(alwaysApprovedToolsStorageKey);
+      if (!stored) return;
+      const parsed = JSON.parse(stored);
+      if (!Array.isArray(parsed)) return;
+
+      const normalized = Array.from(
+        new Set(
+          parsed
+            .map((value) => normalizeToolName(String(value)))
+            .filter((value) => value.length > 0),
+        ),
+      );
+      setAlwaysApprovedTools(normalized);
+    } catch (error) {
+      console.warn('[AIChatPanel] Failed to load always-approved tools from localStorage:', error);
+    }
+  }, [alwaysApprovedToolsStorageKey, normalizeToolName]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    try {
+      if (alwaysApprovedTools.length === 0) {
+        window.localStorage.removeItem(alwaysApprovedToolsStorageKey);
+        return;
+      }
+      window.localStorage.setItem(
+        alwaysApprovedToolsStorageKey,
+        JSON.stringify(
+          Array.from(new Set(alwaysApprovedTools.map((value) => normalizeToolName(value)).filter(Boolean))),
+        ),
+      );
+    } catch (error) {
+      console.warn('[AIChatPanel] Failed to persist always-approved tools to localStorage:', error);
+    }
+  }, [alwaysApprovedToolsStorageKey, alwaysApprovedTools, normalizeToolName]);
+
   // Email capture mode effect - like ChatPanel
   useEffect(() => {
     setShowEmailPanel(customerEmailCaptureMode !== 'HIDE');
@@ -875,6 +1937,14 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const initialPromptSentRef = useRef<boolean>(false);
   // Track the last followOnPrompt to detect changes (for auto-submit trigger)
   const lastFollowOnPromptRef = useRef<string>('');
+  const handledToolCallSignaturesRef = useRef<Set<string>>(new Set());
+  const inFlightToolCallSignaturesRef = useRef<Set<string>>(new Set());
+  const toolContinuationCountRef = useRef<number>(0);
+  const activeStreamAppendBaseRef = useRef<{ key: string; base: string } | null>(null);
+  const toolRequestProcessingRef = useRef<boolean>(false);
+  const queuedToolRequestsRef = useRef<ToolRequestMatch[] | null>(null);
+  const suppressAbortHistoryUpdateRef = useRef<boolean>(false);
+  const toolReplaySummariesByKeyRef = useRef<Record<string, ToolReplaySummaryEntry[]>>({});
 
   // Sync new entries from initialHistory into local history state
   // This allows parent components to inject messages (e.g., page-based agent suggestions)
@@ -903,16 +1973,202 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     });
   }, [initialHistory]);
 
+  // Keep latest history ref synchronized so send() can always build context from
+  // the freshest state, even when callbacks execute between render commits.
+  useEffect(() => {
+    latestHistoryRef.current = history;
+  }, [history]);
+
   // ============================================================================
   // useLLM Hook
   // ============================================================================
+  useEffect(() => {
+    let cancelled = false;
+
+    const resolveServers = async () => {
+      if (!mcpServers || mcpServers.length === 0) {
+        if (!cancelled) {
+          setResolvedMcpServers((prev) => (prev.length === 0 ? prev : []));
+        }
+        return;
+      }
+
+      if (!resolveMcpAuthHeaders) {
+        if (!cancelled) {
+          setResolvedMcpServers((prev) => {
+            const hasSameServers =
+              prev.length === mcpServers.length &&
+              prev.every((server, index) => server === mcpServers[index]);
+            return hasSameServers ? prev : mcpServers;
+          });
+        }
+        return;
+      }
+
+      try {
+        const enriched = await Promise.all(
+          mcpServers.map(async (server) => {
+            const resolved = await resolveMcpAuthHeaders({
+              phase: 'list',
+              mcpServer: (server || {}) as Record<string, unknown>,
+              projectId: project_id,
+              customer: customer as LLMAsAServiceCustomer | undefined,
+            });
+            return {
+              ...(server || {}),
+              headers: {
+                ...(typeof server?.headers === 'object' && server?.headers ? server.headers : {}),
+                ...normalizeMcpHeaders(
+                  resolved as Record<string, unknown> | null | undefined
+                ),
+              },
+            };
+          })
+        );
+        if (!cancelled) setResolvedMcpServers(enriched);
+      } catch (error) {
+        console.error('[AIChatPanel] Failed to resolve MCP auth headers:', error);
+        if (!cancelled) setResolvedMcpServers(mcpServers);
+      }
+    };
+
+    void resolveServers();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [mcpServers, resolveMcpAuthHeaders, project_id, customer]);
+
+  const buildMcpRequestHeaders = useCallback(
+    async ({
+      phase,
+      mcpServer,
+      toolName,
+      toolArgs,
+    }: {
+      phase: MCPAuthPhase;
+      mcpServer: Record<string, unknown>;
+      toolName?: string;
+      toolArgs?: unknown;
+    }): Promise<Record<string, string>> => {
+      const merged: Record<string, string> = {};
+      const packScopeIntoAccessToken = (headers: Record<string, string>): Record<string, string> => {
+        const accessToken = typeof headers['x-mcp-access-token'] === 'string' ? headers['x-mcp-access-token'].trim() : '';
+        const scopeToken = typeof headers['x-client-id'] === 'string' ? headers['x-client-id'].trim() : '';
+        if (!accessToken || !scopeToken) return headers;
+
+        return {
+          ...headers,
+          'x-mcp-access-token': `${accessToken}::scope::${scopeToken}`,
+        };
+      };
+
+      const baseAccessToken =
+        typeof mcpServer.accessToken === 'string' ? mcpServer.accessToken.trim() : '';
+      if (baseAccessToken) {
+        merged['x-mcp-access-token'] = baseAccessToken;
+      }
+      if (project_id) {
+        merged['x-project-id'] = project_id;
+      }
+
+      if (!resolveMcpAuthHeaders) return merged;
+
+      try {
+        const resolved = await resolveMcpAuthHeaders({
+          phase,
+          mcpServer,
+          projectId: project_id,
+          customer: customer as LLMAsAServiceCustomer | undefined,
+          toolName,
+          toolArgs,
+        });
+        return packScopeIntoAccessToken({
+          ...merged,
+          ...normalizeMcpHeaders(
+            resolved as Record<string, unknown> | null | undefined
+          ),
+        });
+      } catch (error) {
+        console.error(
+          `Failed to resolve MCP auth headers for ${phase} request:`,
+          error
+        );
+        return merged;
+      }
+    },
+    [project_id, customer, resolveMcpAuthHeaders]
+  );
+
+  useEffect(() => {
+    const fetchAndSetTools = async () => {
+      if (!resolvedMcpServers || resolvedMcpServers.length === 0) {
+        setToolList((prev) => (prev.length === 0 ? prev : []));
+        setToolsLoading((prev) => (prev ? false : prev));
+        setToolsFetchError((prev) => (prev ? false : prev));
+        return;
+      }
+
+      setToolsLoading(true);
+      setToolsFetchError(false);
+
+      try {
+        const fetchPromises = (resolvedMcpServers ?? []).map(async (m: any) => {
+          const urlToFetch = `${publicAPIUrl}/tools/${encodeURIComponent(m.url)}`;
+
+          const requestHeaders = await buildMcpRequestHeaders({
+            phase: 'list',
+            mcpServer: m,
+          });
+
+          const response = await fetch(urlToFetch, {
+            headers: requestHeaders,
+          });
+          if (!response.ok) {
+            const errorBody = await response.text();
+            throw new Error(
+              `HTTP ${response.status}: ${response.statusText} ${errorBody}`
+            );
+          }
+
+          const toolsFromServer = await response.json();
+          if (!Array.isArray(toolsFromServer)) return [];
+
+          return toolsFromServer.map((tool) => ({
+            ...tool,
+            url: m.url,
+            accessToken: m.accessToken || '',
+            headers: requestHeaders,
+          }));
+        });
+
+        const results = await Promise.all(fetchPromises);
+        const allTools = results.flat();
+        setToolList(allTools);
+        setToolsFetchError(false);
+      } catch (error) {
+        console.error('[AIChatPanel] Failed to load MCP tools:', error);
+        setToolList([]);
+        setToolsFetchError(true);
+      } finally {
+        setToolsLoading(false);
+      }
+    };
+
+    void fetchAndSetTools();
+  }, [resolvedMcpServers, publicAPIUrl, buildMcpRequestHeaders]);
+
   const llmResult = useLLM({
     project_id,
     customer: customer as LLMAsAServiceCustomer | undefined,
     ...(url && { url }),
     ...(service && { group_id: service }),
     ...(agent && { agent }),
-    ...(mcpServers && mcpServers.length > 0 && { mcp_servers: mcpServers }),
+    tools: toolList.map((item) => ({
+      name: item.name,
+      description: item.description,
+      parameters: item.parameters,
+    })) as [],
   });
   
   const {
@@ -925,11 +2181,6 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     error: llmError,
   } = llmResult;
   
-  // Tool-related properties (may not exist on all versions of useLLM)
-  const toolList = (llmResult as any).toolList || [];
-  const toolsLoading = (llmResult as any).toolsLoading || false;
-  const toolsFetchError = (llmResult as any).toolsFetchError || null;
-  
   // Refs to track latest values for cleanup and callbacks (must be after useLLM)
   const historyCallbackRef = useRef(historyChangedCallback);
   const responseCompleteCallbackRef = useRef(responseCompleteCallback);
@@ -985,23 +2236,34 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   // Ensure a conversation exists before sending the first message
   // This creates a conversation on the server and returns the conversation ID
   const ensureConversation = useCallback(() => {
+    const normalizedConversationId =
+      typeof currentConversation === 'string' ? currentConversation.trim() : '';
+
     console.log('ensureConversation - called with:', {
-      currentConversation,
+      currentConversation: normalizedConversationId || null,
       createConversationOnFirstChat,
       project_id,
       publicAPIUrl,
     });
-    if (
-      (!currentConversation || currentConversation === '') &&
-      createConversationOnFirstChat
-    ) {
-      // Guard: Don't create conversation without a project_id
-      if (!project_id) {
-        console.error('ensureConversation - Cannot create conversation without project_id');
-        return Promise.resolve('');
-      }
-      
-      const requestBody = {
+
+    // Existing conversation supplied by caller: use it directly.
+    if (normalizedConversationId) {
+      console.log('ensureConversation - using existing conversation:', normalizedConversationId);
+      return Promise.resolve(normalizedConversationId);
+    }
+
+    if (!createConversationOnFirstChat) {
+      return Promise.resolve('');
+    }
+
+    // Guard: Don't create/ensure conversations without a project_id
+    if (!project_id) {
+      console.error('ensureConversation - Cannot create conversation without project_id');
+      return Promise.resolve('');
+    }
+
+    const createConversation = () => {
+      const requestBody: Record<string, unknown> = {
         project_id: project_id,
         agentId: agent,
         customerId: customer?.customer_id ?? null,
@@ -1009,9 +2271,10 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         timezone: browserInfo?.userTimezone,
         language: browserInfo?.userLanguage,
       };
+
       console.log('ensureConversation - Creating conversation with:', requestBody);
       console.log('ensureConversation - API URL:', `${publicAPIUrl}/conversations`);
-      
+
       return fetch(`${publicAPIUrl}/conversations`, {
         method: 'POST',
         headers: {
@@ -1030,13 +2293,21 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         })
         .then((newConvo) => {
           console.log('ensureConversation - API response:', newConvo);
-          if (newConvo?.id) {
-            console.log('ensureConversation - New conversation ID:', newConvo.id);
-            setCurrentConversation(newConvo.id);
+          const createdId =
+            (typeof newConvo?.id === 'string' && newConvo.id.trim()) ||
+            (typeof newConvo?.conversationId === 'string' && newConvo.conversationId.trim()) ||
+            (typeof newConvo?.conversation_id === 'string' && newConvo.conversation_id.trim()) ||
+            (typeof newConvo?.conversation?.id === 'string' && newConvo.conversation.id.trim()) ||
+            '';
+
+          if (createdId) {
+            console.log('ensureConversation - New conversation ID:', createdId);
+            setCurrentConversation(createdId);
             // NOTE: Don't call onConversationCreated here - it causes a re-render
             // before send() is called. The caller should notify after send() starts.
-            return newConvo.id;
+            return createdId;
           }
+
           console.warn('ensureConversation - No ID in response');
           return '';
         })
@@ -1044,10 +2315,9 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
           console.error('Error creating new conversation', error);
           return '';
         });
-    }
-    // If a currentConversation exists, return it in a resolved Promise.
-    console.log('ensureConversation - using existing conversation:', currentConversation);
-    return Promise.resolve(currentConversation);
+    };
+
+    return createConversation();
   }, [currentConversation, createConversationOnFirstChat, publicAPIUrl, project_id, agent, customer, browserInfo]);
 
   // Data with extras (matches ChatPanel's dataWithExtras)
@@ -1267,25 +2537,717 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     return false;
   }, [customerEmailCaptureMode, emailInputSet]);
 
-  // Handle tool approval for MCP tools
-  const handleToolApproval = useCallback((toolName: string, scope: 'once' | 'session' | 'always') => {
-    if (scope === 'session' || scope === 'always') {
-      setSessionApprovedTools((prev) => Array.from(new Set([...prev, toolName])));
-    }
-    if (scope === 'always') {
-      setAlwaysApprovedTools((prev) => Array.from(new Set([...prev, toolName])));
+  const pendingToolRequestsRef = useRef<ToolRequestMatch[]>(pendingToolRequests);
+  const streamIdleRef = useRef(idle);
+  streamIdleRef.current = idle;
+
+  const waitForStreamIdle = useCallback(async (timeoutMs: number = 2500) => {
+    const startedAt = Date.now();
+    while (!streamIdleRef.current && Date.now() - startedAt < timeoutMs) {
+      await new Promise<void>((resolve) => {
+        setTimeout(resolve, 25);
+      });
     }
+  }, []);
+
+  useEffect(() => {
+    pendingToolRequestsRef.current = pendingToolRequests;
+  }, [pendingToolRequests]);
+
+  const processGivenToolRequests = useCallback(
+    async (requests: ToolRequestMatch[]) => {
+      const dedupeToolRequests = (input: ToolRequestMatch[]): ToolRequestMatch[] => {
+        const seen = new Set<string>();
+        const deduped: ToolRequestMatch[] = [];
+        for (const request of Array.isArray(input) ? input : []) {
+          if (!request) continue;
+          const signature = getToolCallSignature(request.toolName, request.callId) || request.match;
+          if (!signature || seen.has(signature)) continue;
+          seen.add(signature);
+          deduped.push(request);
+        }
+        return deduped;
+      };
+
+      if (toolRequestProcessingRef.current) {
+        const queued = dedupeToolRequests([
+          ...(queuedToolRequestsRef.current || []),
+          ...(Array.isArray(requests) ? requests : []),
+        ]);
+        if (queued.length > 0) {
+          queuedToolRequestsRef.current = queued;
+        }
+        return;
+      }
+      toolRequestProcessingRef.current = true;
+
+      try {
+        let requestsToProcess = requests;
+        if (!requestsToProcess || requestsToProcess.length === 0) {
+          requestsToProcess = pendingToolRequestsRef.current || [];
+        }
+        if (!requestsToProcess || requestsToProcess.length === 0) return;
+
+        setIsLoading(true);
+
+        const userPrompt = lastPromptRef.current || lastKeyRef.current || '';
+        const lastPromptKey = lastKeyRef.current;
+        const assistantSeedText =
+          lastPromptKey && latestHistoryRef.current[lastPromptKey]?.content
+            ? latestHistoryRef.current[lastPromptKey]?.content
+            : '';
+        const historyForContinuation = latestHistoryRef.current || {};
+        const newMessages: any[] = [];
+
+        Object.entries(historyForContinuation).forEach(([historyPrompt, historyEntry]) => {
+          let promptForHistory = String(historyPrompt || '');
+          const isoTimestampRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:/;
+          if (isoTimestampRegex.test(promptForHistory)) {
+            const colonIndex = promptForHistory.indexOf(':', 19);
+            promptForHistory = promptForHistory.substring(colonIndex + 1);
+          } else if (/^\d+:/.test(promptForHistory)) {
+            const colonIndex = promptForHistory.indexOf(':');
+            promptForHistory = promptForHistory.substring(colonIndex + 1);
+          }
+
+          const typedHistoryEntry = (historyEntry || { content: '', callId: '' }) as HistoryEntry;
+          const assistantBaseContent =
+            typeof typedHistoryEntry.content === 'string' ? typedHistoryEntry.content : '';
+          let assistantContextContent = assistantBaseContent;
+          if (traceContextMode === 'full') {
+            const traceSummary = buildCompactTraceSummary({
+              reasoningBlocks: thinkingBlocksByKeyRef.current[historyPrompt] || [],
+              toolCalls: typedHistoryEntry.toolCalls,
+              toolResponses: typedHistoryEntry.toolResponses,
+            });
+            if (traceSummary) {
+              assistantContextContent = assistantBaseContent
+                ? `${assistantBaseContent}\n\n${traceSummary}`
+                : traceSummary;
+            }
+          }
+
+          newMessages.push({
+            role: 'user',
+            content: [
+              {
+                type: 'text',
+                text: promptForHistory,
+              },
+            ],
+          });
+          newMessages.push({
+            role: 'assistant',
+            content: [
+              {
+                type: 'text',
+                text: assistantContextContent,
+              },
+            ],
+          });
+        });
+
+        // Safety fallback if no history was materialized.
+        if (newMessages.length === 0 && userPrompt.trim().length > 0) {
+          newMessages.push({
+            role: 'user',
+            content: [
+              {
+                type: 'text',
+                text: userPrompt,
+              },
+            ],
+          });
+          if (assistantSeedText.trim().length > 0) {
+            newMessages.push({
+              role: 'assistant',
+              content: [
+                {
+                  type: 'text',
+                  text: assistantSeedText,
+                },
+              ],
+            });
+          }
+        }
+
+        const parsedToolCalls = await Promise.all(
+          requestsToProcess.map(async (req, index) => {
+            let parsedToolCall: any = null;
+            try {
+              parsedToolCall = JSON.parse(req.match);
+            } catch (error) {
+              console.error('[AIChatPanel] Failed to parse tool call payload:', error);
+            }
+
+            const toolName =
+              req.groups[1] ||
+              req.toolName ||
+              (typeof parsedToolCall?.name === 'string' ? parsedToolCall.name : '') ||
+              (typeof parsedToolCall?.function?.name === 'string' ? parsedToolCall.function.name : '');
+            if (!toolName) return null;
+
+            const rawCallId =
+              req.callId ||
+              req.groups[0] ||
+              parsedToolCall?.id ||
+              parsedToolCall?.tool_call_id ||
+              `${toolName}-${index + 1}`;
+            const callId =
+              typeof rawCallId === 'string' &&
+              rawCallId.trim().length > 0 &&
+              rawCallId !== 'functionCall'
+                ? rawCallId
+                : `${toolName}-${index + 1}`;
+
+            let args: Record<string, unknown> = {};
+            const rawArgs =
+              req.groups[2] ??
+              parsedToolCall?.input ??
+              parsedToolCall?.args ??
+              parsedToolCall?.function?.arguments ??
+              '{}';
+
+            const parsedArgs = parseToolArguments(rawArgs);
+            if (!parsedArgs) {
+              console.error('[AIChatPanel] Failed to parse tool arguments', {
+                toolName,
+                callId,
+                rawArgsPreview:
+                  typeof rawArgs === 'string'
+                    ? rawArgs.slice(0, 500)
+                    : JSON.stringify(rawArgs).slice(0, 500),
+              });
+              return null;
+            }
+            args = parsedArgs;
+
+            const serviceTag =
+              (typeof req.serviceTag === 'string' && req.serviceTag) ||
+              (typeof req.groups[3] === 'string' && req.groups[3]) ||
+              (typeof parsedToolCall?.service === 'string' && parsedToolCall.service) ||
+              '';
+
+            const callSignature = getToolCallSignature(toolName, callId);
+            if (!callSignature) return null;
+
+            return {
+              req,
+              toolName,
+              callId,
+              args,
+              serviceTag,
+              callSignature,
+            };
+          }),
+        );
+
+        const toolCallBatch = parsedToolCalls.filter(Boolean) as Array<{
+          req: ToolRequestMatch;
+          toolName: string;
+          callId: string;
+          args: Record<string, unknown>;
+          serviceTag: string;
+          callSignature: string;
+        }>;
+
+        const seenCallSignatures = new Set<string>();
+        const callsToRun: Array<{
+          req: ToolRequestMatch;
+          toolName: string;
+          callId: string;
+          args: Record<string, unknown>;
+          serviceTag: string;
+          callSignature: string;
+        }> = [];
+
+        toolCallBatch.forEach((toolCall) => {
+          if (seenCallSignatures.has(toolCall.callSignature)) return;
+          seenCallSignatures.add(toolCall.callSignature);
+
+          if (handledToolCallSignaturesRef.current.has(toolCall.callSignature)) return;
+          if (inFlightToolCallSignaturesRef.current.has(toolCall.callSignature)) return;
+
+          callsToRun.push(toolCall);
+        });
+
+        if (callsToRun.length === 0) {
+          setPendingToolRequests((prev) =>
+            prev.filter((request) => {
+              const signature = getToolCallSignature(request.toolName, request.callId);
+              if (!signature) return true;
+              return !seenCallSignatures.has(signature);
+            }),
+          );
+          setActiveToolCalls([]);
+          setIsLoading(false);
+          return;
+        }
+
+        const callsToRunSignatures = new Set(callsToRun.map((toolCall) => toolCall.callSignature));
+        setPendingToolRequests((prev) =>
+          prev.filter((request) => {
+            const signature = getToolCallSignature(request.toolName, request.callId);
+            return !signature || !callsToRunSignatures.has(signature);
+          }),
+        );
+        callsToRun.forEach((toolCall) => {
+          inFlightToolCallSignaturesRef.current.add(toolCall.callSignature);
+        });
+
+        setActiveToolCalls(
+          callsToRun.map((toolCall) => ({
+            toolName: toolCall.toolName,
+            callId: toolCall.callId,
+          })),
+        );
+
+        const finalToolCalls = callsToRun.map((toolCall) => ({
+          id: toolCall.callId,
+          type: 'tool_use',
+          name: toolCall.toolName,
+          input: toolCall.args,
+          service: toolCall.serviceTag,
+        }));
+
+        let finalToolResponses: any[] = [];
+        try {
+          const toolResponses = await Promise.all(
+            callsToRun.map(async (toolCall) => {
+            const mcpTool = (toolList.find((tool) => tool.name === toolCall.toolName) ||
+              null) as Record<string, unknown> | null;
+            const localExecutor =
+              localToolExecutors && typeof localToolExecutors[toolCall.toolName] === 'function'
+                ? localToolExecutors[toolCall.toolName]
+                : null;
+
+            if (localExecutor) {
+              try {
+                const localResult = await localExecutor(toolCall.args, {
+                  toolName: toolCall.toolName,
+                  callId: toolCall.callId,
+                  serviceTag: toolCall.serviceTag,
+                  mcpTool,
+                });
+
+                if (localResult && typeof localResult === 'object' && !Array.isArray(localResult)) {
+                  const objectResult = localResult as Record<string, unknown>;
+                  const isError = objectResult.isError === true || objectResult.error === true;
+                  const maybeResult = Object.prototype.hasOwnProperty.call(objectResult, 'result')
+                    ? objectResult.result
+                    : localResult;
+                  const textResult =
+                    typeof maybeResult === 'string' ? maybeResult : JSON.stringify(maybeResult ?? {});
+                  return {
+                    tool_call_id: toolCall.callId,
+                    tool_name: toolCall.toolName,
+                    result: textResult || '',
+                    isError,
+                  };
+                }
+
+                return {
+                  tool_call_id: toolCall.callId,
+                  tool_name: toolCall.toolName,
+                  result:
+                    typeof localResult === 'string'
+                      ? localResult
+                      : JSON.stringify(localResult ?? {}),
+                  isError: false,
+                };
+              } catch (error) {
+                return {
+                  tool_call_id: toolCall.callId,
+                  tool_name: toolCall.toolName,
+                  result: error instanceof Error ? error.message : `Unhandled error calling ${toolCall.toolName}`,
+                  isError: true,
+                };
+              }
+            }
+
+            if (!mcpTool) {
+              console.error(`[AIChatPanel] Tool ${toolCall.toolName} not found in tool list`);
+              return {
+                tool_call_id: toolCall.callId,
+                tool_name: toolCall.toolName,
+                result: `Tool ${toolCall.toolName} not found in current tool list.`,
+                isError: true,
+              };
+            }
+            const toolUrl = typeof mcpTool.url === 'string' ? mcpTool.url : '';
+            if (!toolUrl) {
+              return {
+                tool_call_id: toolCall.callId,
+                tool_name: toolCall.toolName,
+                result: `Tool ${toolCall.toolName} is missing url metadata.`,
+                isError: true,
+              };
+            }
+
+            const body = {
+              tool: toolCall.toolName,
+              args: toolCall.args,
+            };
+
+            try {
+              const result = await fetch(
+                `${publicAPIUrl}/tools/${encodeURIComponent(toolUrl)}`,
+                {
+                  method: 'POST',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    ...(await buildMcpRequestHeaders({
+                      phase: 'call',
+                      mcpServer: mcpTool as Record<string, unknown>,
+                      toolName: toolCall.toolName,
+                      toolArgs: toolCall.args,
+                    })),
+                  },
+                  body: JSON.stringify(body),
+                },
+              );
+
+              if (!result.ok) {
+                const errorBody = await result.text();
+                console.error(
+                  `[AIChatPanel] Tool call failed ${toolCall.toolName}: ${result.status} ${result.statusText} ${errorBody}`,
+                );
+                return {
+                  tool_call_id: toolCall.callId,
+                  tool_name: toolCall.toolName,
+                  result: `HTTP ${result.status} ${result.statusText}: ${errorBody || 'Tool call failed'}`,
+                  isError: true,
+                };
+              }
+
+              let resultData: any = null;
+              try {
+                resultData = await result.json();
+              } catch (error) {
+                console.error('[AIChatPanel] Failed parsing tool call JSON response:', error);
+                return {
+                  tool_call_id: toolCall.callId,
+                  tool_name: toolCall.toolName,
+                  result: 'Tool returned a non-JSON response.',
+                  isError: true,
+                };
+              }
+
+              const textResult =
+                resultData?.content?.[0]?.text ??
+                (resultData?.result ? JSON.stringify(resultData.result) : JSON.stringify(resultData));
+              const inferredError =
+                resultData?.isError === true ||
+                resultData?.error === true ||
+                typeof resultData?.error === 'string' ||
+                resultData?.status === 'error' ||
+                resultData?.result?.isError === true ||
+                resultData?.result?.error === true ||
+                typeof resultData?.result?.error === 'string';
+              const normalizedResultText =
+                typeof textResult === 'string' && textResult.trim().length > 0
+                  ? textResult
+                  : inferredError && typeof resultData?.error === 'string'
+                  ? resultData.error
+                  : inferredError && typeof resultData?.result?.error === 'string'
+                  ? resultData.result.error
+                  : '';
+
+              return {
+                tool_call_id: toolCall.callId,
+                tool_name: toolCall.toolName,
+                result: normalizedResultText,
+                isError: inferredError,
+              };
+            } catch (error) {
+              console.error(`[AIChatPanel] Error calling tool ${toolCall.toolName}:`, error);
+              return {
+                tool_call_id: toolCall.callId,
+                tool_name: toolCall.toolName,
+                result:
+                  error instanceof Error ? error.message : `Unhandled error calling ${toolCall.toolName}`,
+                isError: true,
+              };
+            }
+            }),
+          );
+
+          finalToolResponses = toolResponses.filter(Boolean) as any[];
+        } finally {
+          callsToRun.forEach((toolCall) => {
+            inFlightToolCallSignaturesRef.current.delete(toolCall.callSignature);
+            handledToolCallSignaturesRef.current.add(toolCall.callSignature);
+          });
+        }
+
+        // Keep the running state visible during execution; clear it only after completion.
+        setActiveToolCalls([]);
+
+        const currentLastKey = lastKeyRef.current;
+        if (currentLastKey) {
+          setHistory((prev) => {
+            const existingEntry = prev[currentLastKey] || { content: '', callId: '' };
+            return {
+              ...prev,
+              [currentLastKey]: {
+                ...existingEntry,
+                toolCalls: [...((existingEntry as any).toolCalls || []), ...finalToolCalls],
+                toolResponses: [...((existingEntry as any).toolResponses || []), ...finalToolResponses],
+              },
+            };
+          });
+        }
+
+        const toReplayText = (value: unknown): string => {
+          const raw =
+            typeof value === 'string'
+              ? value
+              : (() => {
+                  try {
+                    return JSON.stringify(value);
+                  } catch (_error) {
+                    return String(value ?? '');
+                  }
+                })();
+          return String(raw ?? '');
+        };
+
+        const replayEntryKey = lastKeyRef.current || '';
+        const previousReplayEntries = replayEntryKey
+          ? toolReplaySummariesByKeyRef.current[replayEntryKey] || []
+          : [];
+
+        const currentReplayEntries: ToolReplaySummaryEntry[] = callsToRun.map((toolCall, index) => {
+          const matchedResponse =
+            finalToolResponses.find((response) => response?.tool_call_id === toolCall.callId) ||
+            finalToolResponses[index];
+          return {
+            toolName: toolCall.toolName,
+            callId: toolCall.callId,
+            status: matchedResponse?.isError ? 'error' : 'ok',
+            argsText: toReplayText(toolCall.args),
+            resultText: toReplayText(matchedResponse?.result ?? 'No result returned'),
+          };
+        });
+
+        const replayEntries = [...previousReplayEntries, ...currentReplayEntries];
+        if (replayEntryKey) {
+          toolReplaySummariesByKeyRef.current[replayEntryKey] = replayEntries;
+        }
+
+        const replayLines = replayEntries.map((entry) =>
+          [
+            `Tool: ${entry.toolName}`,
+            `Call ID: ${entry.callId}`,
+            `Status: ${entry.status}`,
+            `Args: ${entry.argsText}`,
+            `Result: ${entry.resultText}`,
+          ].join('\n'),
+        );
+
+        const originalRequest =
+          (typeof lastPromptRef.current === 'string' && lastPromptRef.current.trim()) ||
+          (typeof userPrompt === 'string' && userPrompt.trim()) ||
+          '';
+
+        const continuationPromptText = [
+          originalRequest ? `Original request: ${originalRequest}` : '',
+          'Tool execution summary for the previous request:',
+          ...replayLines,
+          'Continue the same assistant response from exactly where you paused using these tool results.',
+          'Treat successful mutating tool results above as already completed actions. Do not repeat those same mutating tool calls unless the user explicitly asks to retry.',
+          'If you include meta tags, use only <thinking>, <reasoning>, <searching> for internal process.',
+          'Put the final user-facing answer outside all meta tags.',
+        ]
+          .filter(Boolean)
+          .join('\n\n');
+
+        if (continuationPromptText.length > MAX_TOOL_REPLAY_PAYLOAD_CHARS) {
+          setActiveToolCalls([]);
+          setIsLoading(false);
+          setError({
+            message: 'Tool result payload is too large to continue safely in a single turn. Narrow the query or fetch steps in chunks.',
+            code: 'TOOL_REPLAY_TOO_LARGE',
+          });
+          return;
+        }
+
+        newMessages.push({
+          role: 'user',
+          content: [
+            {
+              type: 'text',
+              text: continuationPromptText,
+            },
+          ],
+        });
+
+        if (toolContinuationCountRef.current >= MAX_TOOL_CONTINUATIONS_PER_TURN) {
+          setActiveToolCalls([]);
+          setIsLoading(false);
+          setError({
+            message: 'Tool continuation limit reached for this response. Please refine the prompt and retry.',
+            code: 'TOOL_CONTINUATION_LIMIT',
+          });
+          return;
+        }
+        toolContinuationCountRef.current += 1;
+
+        if (!streamIdleRef.current) {
+          await waitForStreamIdle(10_000);
+        }
+        if (!streamIdleRef.current) {
+          suppressAbortHistoryUpdateRef.current = true;
+          try {
+            stop(lastController);
+            await waitForStreamIdle(3_000);
+          } finally {
+            suppressAbortHistoryUpdateRef.current = false;
+          }
+        }
+        if (!streamIdleRef.current) {
+          setActiveToolCalls([]);
+          setIsLoading(false);
+          setError({
+            message: 'Timed out waiting for the previous stream to settle before tool continuation.',
+            code: 'TOOL_CONTINUATION_WAIT_TIMEOUT',
+          });
+          return;
+        }
+
+        const newController = new AbortController();
+        setLastController(newController);
+        const continuationKey = lastKeyRef.current;
+        if (continuationKey) {
+          const continuationBase = latestHistoryRef.current[continuationKey]?.content || '';
+          activeStreamAppendBaseRef.current =
+            continuationBase.trim().length > 0
+              ? { key: continuationKey, base: continuationBase }
+              : null;
+        } else {
+          activeStreamAppendBaseRef.current = null;
+        }
+        send(
+          '',
+          newMessages,
+          [
+            ...dataWithExtras(),
+            {
+              key: '--messages',
+              data: newMessages.length.toString(),
+            },
+          ],
+          true,
+          true,
+          service,
+          currentConversation,
+          newController,
+          undefined,
+          (errorMsg: string) => {
+            setActiveToolCalls([]);
+            setIsLoading(false);
+            setError({
+              message: errorMsg,
+              code: 'TOOL_ERROR',
+            });
+          },
+        );
+      } finally {
+        toolRequestProcessingRef.current = false;
+        const queued = queuedToolRequestsRef.current;
+        if (queued && queued.length > 0) {
+          queuedToolRequestsRef.current = null;
+          queueMicrotask(() => {
+            void processGivenToolRequests(queued);
+          });
+        }
+      }
+    },
+    [
+      toolList,
+      localToolExecutors,
+      publicAPIUrl,
+      buildMcpRequestHeaders,
+      dataWithExtras,
+      send,
+      service,
+      currentConversation,
+      setActiveToolCalls,
+      getToolCallSignature,
+      traceContextMode,
+      idle,
+      stop,
+      lastController,
+      waitForStreamIdle,
+    ],
+  );
+
+  // Handle tool approval for MCP tools
+  const handleToolApproval = useCallback(
+    (toolName: string, scope: 'once' | 'session' | 'always') => {
+      const normalizedToolName = normalizeToolName(toolName);
+      if (!normalizedToolName) return;
+
+      if (scope === 'session' || scope === 'always') {
+        setSessionApprovedTools((prev) => Array.from(new Set([...prev, normalizedToolName])));
+      }
+      if (scope === 'always') {
+        setAlwaysApprovedTools((prev) => Array.from(new Set([...prev, normalizedToolName])));
+      }
 
-    // Remove approved tool from pending list
-    setPendingToolRequests((prev) => prev.filter((r) => r.toolName !== toolName));
-    
-    console.log(`[AIChatPanel] Tool "${toolName}" approved with scope: ${scope}`);
-  }, []);
+      const requestsToRun = (pendingToolRequestsRef.current || []).filter(
+        (r) => normalizeToolName(r.toolName) === normalizedToolName
+      );
+      void processGivenToolRequests(requestsToRun);
+      setPendingToolRequests((prev) =>
+        prev.filter((r) => normalizeToolName(r.toolName) !== normalizedToolName),
+      );
+    },
+    [processGivenToolRequests, normalizeToolName]
+  );
 
-  // Get unique tool names from pending requests
-  const getUniqueToolNames = useCallback(() => {
-    return Array.from(new Set(pendingToolRequests.map((r) => r.toolName)));
-  }, [pendingToolRequests]);
+  useEffect(() => {
+    if (pendingToolRequests.length === 0) return;
+
+    const configuredAutoApproveTools = Array.isArray(autoApproveTools)
+      ? new Set(
+          autoApproveTools
+            .map((toolName) => normalizeToolName(String(toolName)))
+            .filter(Boolean)
+        )
+      : null;
+
+    const toAuto = pendingToolRequests.filter(
+      (r) => {
+        const normalized = normalizeToolName(r.toolName);
+        if (!normalized) return false;
+        if (autoApproveTools === true) return true;
+        if (configuredAutoApproveTools?.has(normalized)) return true;
+        return sessionApprovedTools.includes(normalized) || alwaysApprovedTools.includes(normalized);
+      }
+    ) as ToolRequestMatch[];
+    if (toAuto.length > 0) {
+      void processGivenToolRequests(toAuto);
+      setPendingToolRequests((prev) =>
+        prev.filter(
+          (r) => {
+            const normalized = normalizeToolName(r.toolName);
+            if (!normalized) return true;
+            if (autoApproveTools === true) return false;
+            if (configuredAutoApproveTools?.has(normalized)) return false;
+            return !sessionApprovedTools.includes(normalized) && !alwaysApprovedTools.includes(normalized);
+          }
+        )
+      );
+    }
+  }, [
+    autoApproveTools,
+    pendingToolRequests,
+    sessionApprovedTools,
+    alwaysApprovedTools,
+    processGivenToolRequests,
+    normalizeToolName,
+  ]);
 
   // ============================================================================
   // Callbacks
@@ -1324,38 +3286,31 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     // Remove zero-width space characters from keepalive before processing
     const processedText = text.replace(/\u200B/g, '');
 
-    const allMatches: ThinkingBlock[] = [];
-    
-    // Extract complete thinking blocks
-    const thinkingRegex = /<thinking>([\s\S]*?)<\/thinking>/gi;
-    let match;
-    while ((match = thinkingRegex.exec(processedText)) !== null) {
-      const content = match[1]?.trim();
-      if (content) {
-        allMatches.push({ content, index: match.index, type: 'thinking' });
-      }
-    }
-    
-    // Extract complete reasoning blocks
-    const reasoningRegex = /<reasoning>([\s\S]*?)<\/reasoning>/gi;
-    while ((match = reasoningRegex.exec(processedText)) !== null) {
-      const content = match[1]?.trim();
-      if (content) {
-        allMatches.push({ content, index: match.index, type: 'reasoning' });
-      }
-    }
-    
-    // Extract complete searching blocks
-    const searchingRegex = /<searching>([\s\S]*?)<\/searching>/gi;
-    while ((match = searchingRegex.exec(processedText)) !== null) {
-      const content = match[1]?.trim();
-      if (content) {
-        allMatches.push({ content, index: match.index, type: 'searching' });
-      }
-    }
-    
-    // Sort by position in original text
-    const completedBlocks = allMatches.sort((a, b) => a.index - b.index);
+    const completedBlocks: ThinkingBlock[] = [];
+    const textWithCompleteMarkers = processedText.replace(
+      /<(thinking|reasoning|searching)>([\s\S]*?)<\/\1>/gi,
+      (_fullMatch, rawType, rawContent, offset) => {
+        const normalizedType = String(rawType || '').trim().toLowerCase();
+        const type: 'thinking' | 'reasoning' | 'searching' =
+          normalizedType === 'reasoning'
+            ? 'reasoning'
+            : normalizedType === 'searching'
+            ? 'searching'
+            : 'thinking';
+        const content = String(rawContent || '').trim();
+        if (!content) return '\n\n';
+
+        const signature = getThinkingBlockSignature(type, content);
+        completedBlocks.push({
+          type,
+          content,
+          index: Number(offset || 0),
+          signature,
+        });
+
+        return `\n\n${buildThinkingBlockMarker(type, signature)}\n\n`;
+      },
+    );
 
     // Check for incomplete (streaming) tags at the end of the text
     let activeBlock: { type: 'thinking' | 'reasoning' | 'searching'; content: string } | null = null;
@@ -1399,10 +3354,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     }
 
     // Clean the text by removing all thinking-related tags (complete and incomplete)
-    let cleanedText = processedText
-      .replace(/<thinking>[\s\S]*?<\/thinking>/gi, '')
-      .replace(/<reasoning>[\s\S]*?<\/reasoning>/gi, '')
-      .replace(/<searching>[\s\S]*?<\/searching>/gi, '')
+    let cleanedText = textWithCompleteMarkers
       // Also remove partial opening tags
       .replace(/<think(?:i(?:n(?:g)?)?)?$/i, '')
       .replace(/<reas(?:o(?:n(?:i(?:n(?:g)?)?)?)?)?$/i, '')
@@ -1426,12 +3378,44 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     return { cleanedText, completedBlocks, activeBlock, lastThinkingContent };
   }, [cleanContentForDisplay]);
 
-  // Compute active thinking block directly from response during render (avoids state batching issues)
-  const activeThinkingBlock = useMemo(() => {
-    if (!response || justReset) return null;
-    const { activeBlock } = processThinkingTags(response);
-    return activeBlock;
-  }, [response, justReset, processThinkingTags]);
+  const mergeThinkingBlocks = useCallback(
+    (existing: ThinkingBlock[], incoming: ThinkingBlock[]): ThinkingBlock[] => {
+      if (incoming.length === 0) return existing;
+      if (existing.length === 0) return incoming;
+
+      // During a single stream, incoming blocks are usually a superset prefix of existing blocks.
+      // In that case, replace to keep indexes/content fully aligned with latest parse.
+      const incomingSupersetPrefix =
+        incoming.length >= existing.length &&
+        existing.every((block, index) => {
+          const next = incoming[index];
+          return !!next && next.type === block.type && next.content === block.content;
+        });
+      if (incomingSupersetPrefix) {
+        return incoming;
+      }
+
+      // For follow-on streams (e.g., tool continuations), append only unseen blocks.
+      const merged = [...existing];
+      const seen = new Set(existing.map((block) => block.signature || `${block.type}::${block.content}`));
+      for (const block of incoming) {
+        const signature = block.signature || `${block.type}::${block.content}`;
+        if (seen.has(signature)) continue;
+        seen.add(signature);
+        merged.push(block);
+      }
+      return merged;
+    },
+    [],
+  );
+
+  const getThinkingBlockCollapseKey = useCallback((entryKey: string, blockKey: string): string => {
+    return `${entryKey}::${blockKey}`;
+  }, []);
+
+  const getThinkingBlockRenderKey = useCallback((block: ThinkingBlock, fallbackIndex: number): string => {
+    return String(block?.signature || '').trim() || `block-${fallbackIndex}`;
+  }, []);
 
   // Built-in action for agent suggestion cards
   // Pattern: [SUGGEST_AGENT:agent-id|Agent Name|Brief reason]
@@ -1440,6 +3424,37 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     markdown: '<agent-suggestion data-agent-id="$1" data-agent-name="$2" data-reason="$3"></agent-suggestion>',
   };
 
+  const extractToolRequests = useCallback((rawResponse: string): ToolRequestMatch[] => {
+    return extractToolRequestMatchesFromText(rawResponse);
+  }, []);
+
+  const formatToolRequestsForDisplay = useCallback((rawResponse: string): string => {
+    if (!rawResponse) return rawResponse;
+    const requests = extractToolRequestMatchesFromText(rawResponse);
+    if (requests.length === 0) return stripStandaloneRawToolJsonLines(rawResponse);
+
+    const output: string[] = [];
+    let cursor = 0;
+    requests.forEach((request) => {
+      const start = Math.max(0, Math.min(rawResponse.length, request.start));
+      const end = Math.max(start, Math.min(rawResponse.length, request.end));
+      output.push(rawResponse.slice(cursor, start));
+      output.push(`\n\n${buildInlineToolMarker(request.toolName, request.callId)}\n\n`);
+      cursor = end;
+    });
+    output.push(rawResponse.slice(cursor));
+    return stripStandaloneRawToolJsonLines(output.join(''));
+  }, []);
+
+  // Compute active thinking block from the raw response during render.
+  // Using raw response preserves streaming reasoning/searching blocks even when
+  // tool-call payload cleanup temporarily mutates the display text.
+  const activeThinkingBlock = useMemo(() => {
+    if (!response || justReset) return null;
+    const { activeBlock } = processThinkingTags(response);
+    return activeBlock;
+  }, [response, justReset, processThinkingTags]);
+
   // Process actions in content
   const processActions = useCallback((content: string): string => {
     // Combine built-in actions with user-provided actions
@@ -1485,6 +3500,42 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     return displayPrompt;
   }, [hideRagContextInPrompt]);
 
+  const normalizeHistoryPromptForContext = useCallback((historyPrompt: string): string => {
+    let promptForHistory = String(historyPrompt || '');
+    const isoTimestampRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:/;
+    if (isoTimestampRegex.test(promptForHistory)) {
+      const colonIndex = promptForHistory.indexOf(':', 19);
+      promptForHistory = promptForHistory.substring(colonIndex + 1);
+    } else if (/^\d+:/.test(promptForHistory)) {
+      const colonIndex = promptForHistory.indexOf(':');
+      promptForHistory = promptForHistory.substring(colonIndex + 1);
+    }
+    return promptForHistory;
+  }, []);
+
+  const buildAssistantContextContent = useCallback(
+    (historyPrompt: string, historyEntry: HistoryEntry): string => {
+      const assistantBaseContent =
+        typeof historyEntry?.content === 'string' ? historyEntry.content : '';
+      if (traceContextMode !== 'full') {
+        return assistantBaseContent;
+      }
+
+      const traceSummary = buildCompactTraceSummary({
+        reasoningBlocks: thinkingBlocksByKeyRef.current[historyPrompt] || [],
+        toolCalls: historyEntry?.toolCalls,
+        toolResponses: historyEntry?.toolResponses,
+      });
+      if (!traceSummary) {
+        return assistantBaseContent;
+      }
+      return assistantBaseContent
+        ? `${assistantBaseContent}\n\n${traceSummary}`
+        : traceSummary;
+    },
+    [traceContextMode],
+  );
+
   // Built-in interaction tracking - reports to LLMAsAService API
   const interactionClicked = useCallback(async (
     callId: string,
@@ -1626,11 +3677,29 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   // Continue chat (send message) - matches ChatPanel behavior exactly
   // promptText is now required - comes from the isolated ChatInput component
   const continueChat = useCallback((promptText: string) => {
+    handledToolCallSignaturesRef.current = new Set();
+    inFlightToolCallSignaturesRef.current = new Set();
+    toolContinuationCountRef.current = 0;
+    activeStreamAppendBaseRef.current = null;
+    toolReplaySummariesByKeyRef.current = {};
+    setPendingToolRequests([]);
+    setActiveToolCalls([]);
+
+    // Preserve completed blocks from prior prompts and collapse them when a new prompt starts.
+    setCollapsedBlocks((prev) => {
+      const next = new Set(prev);
+      Object.entries(thinkingBlocksByKeyRef.current).forEach(([entryKey, blocks]) => {
+        blocks.forEach((block, index) => {
+          next.add(getThinkingBlockCollapseKey(entryKey, getThinkingBlockRenderKey(block, index)));
+        });
+      });
+      return next;
+    });
+
     // Clear thinking blocks for new response
     // Note: activeThinkingBlock is computed via useMemo from response
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
-    setCollapsedBlocks(new Set());
     hasAutoCollapsedRef.current = false;
     prevBlockCountRef.current = 0;
     
@@ -1680,6 +3749,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
       ...prevHistory,
       [promptKey]: { content: '', callId: '' },
     }));
+    toolReplaySummariesByKeyRef.current[promptKey] = [];
     
     // Store the key for later use
     setLastPrompt(promptToSend.trim());
@@ -1699,24 +3769,16 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
       console.log('AIChatPanel.continueChat - ensureConversation resolved with:', convId);
       // Build messagesAndHistory from history (matches ChatPanel)
       // IMPORTANT: Exclude the current prompt (promptKey) since it's new and we're sending it now
+      const historyForCall = latestHistoryRef.current || {};
       const messagesAndHistory: { role: string; content: string }[] = [];
-      Object.entries(history).forEach(([historyPrompt, historyEntry]) => {
+      Object.entries(historyForCall).forEach(([historyPrompt, historyEntry]) => {
         // Skip the current prompt we just added optimistically
         if (historyPrompt === promptKey) return;
-        
-        // Strip timestamp prefix from prompt before using it (matches ChatPanel)
-        let promptForHistory = historyPrompt;
-        const isoTimestampRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:/;
-        if (isoTimestampRegex.test(historyPrompt)) {
-          const colonIndex = historyPrompt.indexOf(':', 19);
-          promptForHistory = historyPrompt.substring(colonIndex + 1);
-        } else if (/^\d+:/.test(historyPrompt)) {
-          const colonIndex = historyPrompt.indexOf(':');
-          promptForHistory = historyPrompt.substring(colonIndex + 1);
-        }
-        
+        const promptForHistory = normalizeHistoryPromptForContext(historyPrompt);
+        const assistantContextContent = buildAssistantContextContent(historyPrompt, historyEntry);
+
         messagesAndHistory.push({ role: 'user', content: promptForHistory });
-        messagesAndHistory.push({ role: 'assistant', content: historyEntry.content });
+        messagesAndHistory.push({ role: 'assistant', content: assistantContextContent });
       });
       
       // Build the full prompt - only apply template for first message (matches ChatPanel)
@@ -1728,6 +3790,20 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
       
       const newController = new AbortController();
       setLastController(newController);
+
+      if (onBeforeSend) {
+        void Promise.resolve(
+          onBeforeSend({
+            prompt: promptToSend.trim(),
+            conversationId: convId || null,
+            agentId: agent,
+            service,
+            messages: messagesAndHistory,
+          })
+        ).catch((error) => {
+          console.warn('[AIChatPanel] onBeforeSend callback failed:', error);
+        });
+      }
       
       // Pass data array to send() for template replacement (e.g., {{Context}})
       // Pass service (group_id) and customer data just like ChatPanel does
@@ -1755,19 +3831,27 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
                                errorMsg.toLowerCase().includes('cancelled');
           
           if (isAbortError) {
+            if (suppressAbortHistoryUpdateRef.current) {
+              setIsLoading(false);
+              return;
+            }
             // User canceled the request - don't show error banner
             console.log('[AIChatPanel] Request was aborted by user');
             // Don't set error state - no red banner
             
             // Update history to show cancellation
             if (promptKey) {
-              setHistory((prev) => ({
-                ...prev,
-                [promptKey]: {
-                  content: 'Response canceled',
-                  callId: lastCallId || '',
-                },
-              }));
+              setHistory((prev) => {
+                const existingEntry = prev[promptKey] || { content: '', callId: '' };
+                return {
+                  ...prev,
+                  [promptKey]: {
+                    ...existingEntry,
+                    content: 'Response canceled',
+                    callId: lastCallId || existingEntry.callId || '',
+                  },
+                };
+              });
             }
           }
           // Detect 413 Content Too Large error
@@ -1779,13 +3863,17 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
             
             // Update history to show error
             if (promptKey) {
-              setHistory((prev) => ({
-                ...prev,
-                [promptKey]: {
-                  content: `Error: ${errorMsg}`,
-                  callId: lastCallId || '',
-                },
-              }));
+              setHistory((prev) => {
+                const existingEntry = prev[promptKey] || { content: '', callId: '' };
+                return {
+                  ...prev,
+                  [promptKey]: {
+                    ...existingEntry,
+                    content: `Error: ${errorMsg}`,
+                    callId: lastCallId || existingEntry.callId || '',
+                  },
+                };
+              });
             }
           }
           // Detect other network errors
@@ -1797,13 +3885,17 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
             
             // Update history to show error
             if (promptKey) {
-              setHistory((prev) => ({
-                ...prev,
-                [promptKey]: {
-                  content: `Error: ${errorMsg}`,
-                  callId: lastCallId || '',
-                },
-              }));
+              setHistory((prev) => {
+                const existingEntry = prev[promptKey] || { content: '', callId: '' };
+                return {
+                  ...prev,
+                  [promptKey]: {
+                    ...existingEntry,
+                    content: `Error: ${errorMsg}`,
+                    callId: lastCallId || existingEntry.callId || '',
+                  },
+                };
+              });
             }
           }
           // Generic error
@@ -1815,13 +3907,17 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
             
             // Update history to show error
             if (promptKey) {
-              setHistory((prev) => ({
-                ...prev,
-                [promptKey]: {
-                  content: `Error: ${errorMsg}`,
-                  callId: lastCallId || '',
-                },
-              }));
+              setHistory((prev) => {
+                const existingEntry = prev[promptKey] || { content: '', callId: '' };
+                return {
+                  ...prev,
+                  [promptKey]: {
+                    ...existingEntry,
+                    content: `Error: ${errorMsg}`,
+                    callId: lastCallId || existingEntry.callId || '',
+                  },
+                };
+              });
             }
           }
           
@@ -1850,14 +3946,20 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     lastCallId,
     processThinkingTags,
     clearFollowOnQuestionsNextPrompt,
-    history,
     promptTemplate,
     send,
     service,
+    agent,
     ensureConversation,
+    normalizeHistoryPromptForContext,
+    buildAssistantContextContent,
+    traceContextMode,
     dataWithExtras,
     scrollToBottom,
     onConversationCreated,
+    onBeforeSend,
+    getThinkingBlockCollapseKey,
+    getThinkingBlockRenderKey,
     setResponse,
   ]);
 
@@ -1894,6 +3996,14 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     setLastKey(null);
     setIsLoading(false);
     setCurrentConversation(null);
+    thinkingBlocksByKeyRef.current = {};
+    setThinkingBlocksByKey({});
+    handledToolCallSignaturesRef.current = new Set();
+    inFlightToolCallSignaturesRef.current = new Set();
+    toolContinuationCountRef.current = 0;
+    activeStreamAppendBaseRef.current = null;
+    toolReplaySummariesByKeyRef.current = {};
+    setPendingToolRequests([]);
     setFollowOnQuestionsState(followOnQuestions);
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
@@ -1905,6 +4015,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     setLastController(new AbortController());
     setUserHasScrolled(false);
     setError(null); // Clear any errors
+    setActiveToolCalls([]);
     
     setTimeout(() => {
       setJustReset(false);
@@ -1923,54 +4034,110 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   // actions will re-process the history correctly.
   useEffect(() => {
     if (!response || !lastKey || justReset) return;
-    
-    const { cleanedText, completedBlocks } = processThinkingTags(response);
+
+    const extractedToolRequests = extractToolRequests(response);
+    const seenToolCallSignatures = new Set<string>();
+    const unseenToolRequests = extractedToolRequests.filter((request) => {
+      const callSignature = getToolCallSignature(request.toolName, request.callId);
+      if (!callSignature) return false;
+      if (seenToolCallSignatures.has(callSignature)) return false;
+      seenToolCallSignatures.add(callSignature);
+      if (handledToolCallSignaturesRef.current.has(callSignature)) return false;
+      if (inFlightToolCallSignaturesRef.current.has(callSignature)) return false;
+      return true;
+    });
+
+    setPendingToolRequests((prev) => {
+      if (areToolRequestListsEqual(prev, unseenToolRequests)) {
+        return prev;
+      }
+      return unseenToolRequests;
+    });
+
+    const responseWithInlineToolLabels = formatToolRequestsForDisplay(response);
+    const { cleanedText: parsedCleanedText, completedBlocks } = processThinkingTags(responseWithInlineToolLabels);
+    const cleanedText = parsedCleanedText.trim();
+    const existingBlocks = thinkingBlocksByKeyRef.current[lastKey] || [];
+    const mergedBlocks = mergeThinkingBlocks(existingBlocks, completedBlocks);
+    thinkingBlocksByKeyRef.current[lastKey] = mergedBlocks;
+    setThinkingBlocksByKey((prev) => {
+      const existing = prev[lastKey];
+      const isSame =
+        !!existing &&
+        existing.length === mergedBlocks.length &&
+        existing.every(
+          (block, index) =>
+            block.type === mergedBlocks[index]?.type &&
+            block.content === mergedBlocks[index]?.content,
+        );
+
+      if (isSame) return prev;
+      return {
+        ...prev,
+        [lastKey]: mergedBlocks,
+      };
+    });
     
     // Update display state
     // Note: activeThinkingBlock is computed via useMemo from response directly
-    setThinkingBlocks(completedBlocks);
+    setThinkingBlocks(mergedBlocks);
+    setCurrentThinkingIndex(Math.max(0, mergedBlocks.length - 1));
     
     // When a new block appears, collapse all previous blocks
-    if (completedBlocks.length > prevBlockCountRef.current) {
+    if (mergedBlocks.length > prevBlockCountRef.current) {
       setCollapsedBlocks(prev => {
         const next = new Set(prev);
         // Collapse all blocks except the newest one
-        for (let i = 0; i < completedBlocks.length - 1; i++) {
-          next.add(`block-${i}`);
+        for (let i = 0; i < mergedBlocks.length - 1; i++) {
+          const block = mergedBlocks[i];
+          if (!block) continue;
+          next.add(getThinkingBlockCollapseKey(lastKey, getThinkingBlockRenderKey(block, i)));
         }
         return next;
       });
-      prevBlockCountRef.current = completedBlocks.length;
+      prevBlockCountRef.current = mergedBlocks.length;
     }
     
-    // Auto-collapse all thinking blocks when main content starts appearing
-    const hasMainContent = cleanedText.trim().length > 0;
-    const hasThinkingContent = completedBlocks.length > 0 || processThinkingTags(response).activeBlock !== null;
-    if (hasMainContent && hasThinkingContent && !hasAutoCollapsedRef.current) {
-      hasAutoCollapsedRef.current = true;
-      setTimeout(() => {
-        // Collapse all blocks including active
-        setCollapsedBlocks(prev => {
-          const next = new Set(prev);
-          completedBlocks.forEach((_, index) => next.add(`block-${index}`));
-          next.add('active');
-          return next;
-        });
-      }, 500);
-    }
+    // Keep reasoning blocks visible; users can collapse manually if needed.
+    // Auto-collapse here made blocks appear and then seem to disappear.
     
     // Update history state with RAW content (actions applied at render time)
     setHistory((prev) => {
       const newHistory = { ...prev };
+      const existingEntry = newHistory[lastKey] || { content: '', callId: '' };
+      const appendBase = activeStreamAppendBaseRef.current;
+      const mergedContinuationContent =
+        appendBase && appendBase.key === lastKey
+          ? mergeContinuationResponseText(appendBase.base, cleanedText)
+          : cleanedText;
+      const existingContent = typeof existingEntry.content === 'string' ? existingEntry.content : '';
+      const nextContent =
+        appendBase && appendBase.key === lastKey && existingContent.length > mergedContinuationContent.length
+          ? existingContent
+          : shouldPreserveBoundaryDroppedStreamText(existingContent, mergedContinuationContent)
+          ? existingContent
+          : mergedContinuationContent;
       newHistory[lastKey] = {
-        content: cleanedText, // Store raw content, not processed
-        callId: lastCallId || '',
+        ...existingEntry,
+        content: nextContent, // Store raw content without tool JSON or thinking tags
+        callId: lastCallId || existingEntry.callId || '',
       };
       // Keep ref in sync for callbacks (this doesn't trigger re-renders)
       latestHistoryRef.current = newHistory;
       return newHistory;
     });
-  }, [response, lastKey, lastCallId, processThinkingTags, justReset]);
+  }, [
+    response,
+    lastKey,
+    lastCallId,
+    processThinkingTags,
+    justReset,
+    extractToolRequests,
+    getToolCallSignature,
+    getThinkingBlockCollapseKey,
+    getThinkingBlockRenderKey,
+    formatToolRequestsForDisplay,
+  ]);
 
   // Effect 2: Handle response completion - SINGLE POINT for all completion logic
   // Triggers ONLY when idle transitions from false → true
@@ -2013,6 +4180,19 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
       hasNotifiedCompletionRef.current = false;
       // Reset response length tracking for new stream
       prevResponseLengthRef.current = 0;
+      const currentLastKey = lastKeyRef.current;
+      const existingContent = currentLastKey
+        ? latestHistoryRef.current[currentLastKey]?.content || ''
+        : '';
+      activeStreamAppendBaseRef.current =
+        currentLastKey && existingContent.trim().length > 0
+          ? {
+              key: currentLastKey,
+              base: existingContent,
+            }
+          : null;
+      // Keep thinking UI state across follow-on streams triggered by tool calls.
+      // New user prompts already reset this state explicitly before send().
     }
   }, [idle]); // ONLY depends on idle - no history, no callbacks in deps
   
@@ -2052,10 +4232,6 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     }
   }, [response, idle]); // ONLY response and idle - no other dependencies!
 
-  // Ref to track idle state for scroll handler (avoids stale closure)
-  const idleRef = useRef(idle);
-  idleRef.current = idle;
-  
   // Detect user scroll intent via wheel event (fires before scroll position changes)
   useEffect(() => {
     const scrollArea = responseAreaRef.current;
@@ -2068,7 +4244,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     // Wheel event detects user intent immediately (before scroll position changes)
     const handleWheel = (e: WheelEvent) => {
       // Skip if not streaming
-      if (idleRef.current) return;
+      if (streamIdleRef.current) return;
 
       // deltaY < 0 means scrolling UP (toward top of document)
       if (e.deltaY < 0 && !userHasScrolledRef.current) {
@@ -2079,7 +4255,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     // Scroll event for detecting when user returns to bottom
     const handleScroll = () => {
       // Skip if not streaming or user hasn't scrolled up
-      if (idleRef.current || !userHasScrolledRef.current) return;
+      if (streamIdleRef.current || !userHasScrolledRef.current) return;
 
       const scrollHeight = scrollElement.scrollHeight;
       const currentScrollTop = scrollElement.scrollTop;
@@ -2102,7 +4278,15 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
 
   // Update follow-on questions from props
   useEffect(() => {
-    setFollowOnQuestionsState(followOnQuestions);
+    setFollowOnQuestionsState((prev) => {
+      if (
+        prev.length === followOnQuestions.length &&
+        prev.every((question, index) => question === followOnQuestions[index])
+      ) {
+        return prev;
+      }
+      return followOnQuestions;
+    });
   }, [followOnQuestions]);
 
   // Notify loading state changes
@@ -2129,9 +4313,11 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
       
       // If there's a response in progress, make sure it's saved
       if (currentLastKey && currentResponse) {
+        const existingEntry = currentHistory[currentLastKey] || { content: '', callId: '' };
         currentHistory[currentLastKey] = {
+          ...existingEntry,
           content: currentResponse + '\n\n(response interrupted)',
-          callId: currentLastCallId || '',
+          callId: currentLastCallId || existingEntry.callId || '',
         };
       }
       
@@ -2198,13 +4384,17 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         
         // Update history to show error
         if (lastKey) {
-          setHistory((prev) => ({
-            ...prev,
-            [lastKey]: {
-              content: `Error: ${errorMessage}`,
-              callId: lastCallId || '',
-            },
-          }));
+          setHistory((prev) => {
+            const existingEntry = prev[lastKey] || { content: '', callId: '' };
+            return {
+              ...prev,
+              [lastKey]: {
+                ...existingEntry,
+                content: `Error: ${errorMessage}`,
+                callId: lastCallId || existingEntry.callId || '',
+              },
+            };
+          });
         }
       }
       // Detect other network errors
@@ -2216,13 +4406,17 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         
         // Update history to show error
         if (lastKey) {
-          setHistory((prev) => ({
-            ...prev,
-            [lastKey]: {
-              content: `Error: ${errorMessage}`,
-              callId: lastCallId || '',
-            },
-          }));
+          setHistory((prev) => {
+            const existingEntry = prev[lastKey] || { content: '', callId: '' };
+            return {
+              ...prev,
+              [lastKey]: {
+                ...existingEntry,
+                content: `Error: ${errorMessage}`,
+                callId: lastCallId || existingEntry.callId || '',
+              },
+            };
+          });
         }
       }
       // Generic error
@@ -2234,13 +4428,17 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         
         // Update history to show error
         if (lastKey) {
-          setHistory((prev) => ({
-            ...prev,
-            [lastKey]: {
-              content: `Error: ${errorMessage}`,
-              callId: lastCallId || '',
-            },
-          }));
+          setHistory((prev) => {
+            const existingEntry = prev[lastKey] || { content: '', callId: '' };
+            return {
+              ...prev,
+              [lastKey]: {
+                ...existingEntry,
+                content: `Error: ${errorMessage}`,
+                callId: lastCallId || existingEntry.callId || '',
+              },
+            };
+          });
         }
       }
       
@@ -2466,62 +4664,271 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     },
   }), [CodeBlock, AgentSuggestionCard]);
 
-  // Render thinking blocks with new collapsible design
-  const renderThinkingBlocks = useCallback((isStreaming: boolean = false): React.ReactElement | null => {
-    const hasActiveBlock = activeThinkingBlock !== null;
-    const hasCompletedBlocks = thinkingBlocks.length > 0;
-    
-    if (!hasActiveBlock && !hasCompletedBlocks) return null;
-    
-    const handleToggleCollapse = (blockKey: string) => {
-      setCollapsedBlocks(prev => {
-        const next = new Set(prev);
-        if (next.has(blockKey)) {
-          next.delete(blockKey);
-        } else {
-          next.add(blockKey);
-        }
-        return next;
-      });
-    };
-    
+  const toggleThinkingBlockCollapsed = useCallback((entryKey: string, blockKey: string) => {
+    const collapseKey = getThinkingBlockCollapseKey(entryKey, blockKey);
+    setCollapsedBlocks((prev) => {
+      const next = new Set(prev);
+      if (next.has(collapseKey)) {
+        next.delete(collapseKey);
+      } else {
+        next.add(collapseKey);
+      }
+      return next;
+    });
+  }, [getThinkingBlockCollapseKey]);
+
+  const renderThinkingBlockCard = (
+    entryKey: string,
+    block: { type: 'thinking' | 'reasoning' | 'searching'; content: string },
+    blockKey: string,
+    renderKey: string,
+    isStreaming: boolean,
+  ): React.ReactNode => {
+    const collapseKey = getThinkingBlockCollapseKey(entryKey, blockKey);
     return (
-      <>
-        {/* Render completed blocks first */}
-        {thinkingBlocks.map((block, index) => {
-          const blockKey = `block-${index}`;
-          return (
-            <ThinkingBlockComponent
-              key={blockKey}
-              type={block.type}
-              content={block.content}
-              isStreaming={false}
-              isCollapsed={collapsedBlocks.has(blockKey)}
-              onToggleCollapse={() => handleToggleCollapse(blockKey)}
-            />
-          );
-        })}
-        
-        {/* Render active (streaming) block */}
-        {activeThinkingBlock && (
-          <ThinkingBlockComponent
-            key="active-streaming"
-            type={activeThinkingBlock.type}
-            content={activeThinkingBlock.content}
-            isStreaming={true}
-            isCollapsed={collapsedBlocks.has('active')}
-            onToggleCollapse={() => handleToggleCollapse('active')}
-          />
-        )}
-      </>
+      <ThinkingBlockComponent
+        key={renderKey}
+        type={block.type}
+        content={block.content}
+        isStreaming={isStreaming}
+        isCollapsed={collapsedBlocks.has(collapseKey)}
+        onToggleCollapse={() => toggleThinkingBlockCollapsed(entryKey, blockKey)}
+      />
+    );
+  };
+
+  const renderActiveThinkingBlock = (
+    entryKey: string,
+    activeBlock: { type: 'thinking' | 'reasoning' | 'searching'; content: string } | null,
+    keyPrefix: string,
+  ): React.ReactNode => {
+    if (!activeBlock) return null;
+    return (
+      <div className="ai-chat-inline-thinking-events">
+        {renderThinkingBlockCard(entryKey, activeBlock, 'active', `${keyPrefix}-active`, true)}
+      </div>
     );
-  }, [thinkingBlocks, activeThinkingBlock, collapsedBlocks]);
+  };
 
   // ============================================================================
   // Render
   // ============================================================================
 
   const panelClasses = ['ai-chat-panel', theme === 'dark' ? 'dark-theme' : ''].filter(Boolean).join(' ');
+  const getToolStatusRank = (status: ToolCallStatus): number => {
+    switch (status) {
+      case 'error':
+        return 4;
+      case 'completed':
+        return 3;
+      case 'running':
+        return 2;
+      case 'pending':
+      default:
+        return 1;
+    }
+  };
+
+  const formatToolCallId = (callId: string): string => {
+    const normalized = String(callId || '').trim();
+    if (normalized.length <= 22) return normalized;
+    return `${normalized.slice(0, 10)}...${normalized.slice(-8)}`;
+  };
+
+  const renderMarkdownContent = (content: string, key: string): React.ReactNode => {
+    if (!content || !content.trim()) return null;
+
+    if (markdownClass) {
+      return (
+        <div key={key} className={markdownClass}>
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            rehypePlugins={[rehypeRaw]}
+            components={markdownComponents}
+          >
+            {content}
+          </ReactMarkdown>
+        </div>
+      );
+    }
+
+    return (
+      <ReactMarkdown
+        key={key}
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeRaw]}
+        components={markdownComponents}
+      >
+        {content}
+      </ReactMarkdown>
+    );
+  };
+
+  const renderToolStatusRow = (toolStatusRow: ToolCallStatusRow, key: string): React.ReactNode => (
+    <div
+      key={key}
+      className={`ai-chat-tool-status-row ai-chat-tool-status-row--${toolStatusRow.status}`}
+    >
+      <div className="ai-chat-tool-status-row__main">
+        <ToolIcon />
+        <span className="ai-chat-tool-status-row__label">{toolStatusRow.statusLabel}</span>
+        <span className="ai-chat-tool-status-row__call-id">
+          {formatToolCallId(toolStatusRow.callId)}
+        </span>
+      </div>
+      {toolStatusRow.status === 'pending' && (
+        <div className="ai-chat-tool-status-row__actions">
+          <Button
+            size="sm"
+            variant="ghost"
+            className="ai-chat-tool-status-row__button"
+            onClick={() => handleToolApproval(toolStatusRow.toolName, 'once')}
+          >
+            once
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            className="ai-chat-tool-status-row__button"
+            onClick={() => handleToolApproval(toolStatusRow.toolName, 'session')}
+          >
+            session
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            className="ai-chat-tool-status-row__button"
+            onClick={() => handleToolApproval(toolStatusRow.toolName, 'always')}
+          >
+            always
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+
+  const renderContentWithInlineToolCards = (
+    content: string,
+    toolStatusRows: ToolCallStatusRow[],
+    thinkingBlocksForEntry: ThinkingBlock[],
+    entryKey: string,
+    keyPrefix: string,
+  ): React.ReactNode => {
+    const { parts, markers } = parseInlineToolMarkers(content);
+    const thinkingBlocksBySignature = new Map<string, ThinkingBlock>();
+    thinkingBlocksForEntry.forEach((block, index) => {
+      const signature = String(block?.signature || '').trim() || getThinkingBlockRenderKey(block, index);
+      if (!thinkingBlocksBySignature.has(signature)) {
+        thinkingBlocksBySignature.set(signature, {
+          ...block,
+          signature,
+        });
+      }
+    });
+
+    const pendingBySignature = new Map<string, ToolCallStatusRow>();
+    const pendingByCallId = new Map<string, ToolCallStatusRow>();
+    toolStatusRows.forEach((row) => {
+      if (!pendingBySignature.has(row.signature)) {
+        pendingBySignature.set(row.signature, row);
+      }
+      if (!pendingByCallId.has(row.callId)) {
+        pendingByCallId.set(row.callId, row);
+      }
+    });
+
+    const nodes: React.ReactNode[] = [];
+
+    parts.forEach((part, partIndex) => {
+      const { parts: thinkingParts, markers: thinkingMarkers } = parseInlineThinkingMarkers(part);
+      thinkingParts.forEach((thinkingPart, thinkingIndex) => {
+        const markdownNode = renderMarkdownContent(
+          thinkingPart,
+          `${keyPrefix}-md-${partIndex}-${thinkingIndex}`,
+        );
+        if (markdownNode) {
+          nodes.push(markdownNode);
+        }
+
+        const thinkingMarker = thinkingMarkers[thinkingIndex];
+        if (!thinkingMarker) return;
+        const matchedBlock = thinkingBlocksBySignature.get(thinkingMarker.signature);
+        if (!matchedBlock) return;
+
+        const blockKey = getThinkingBlockRenderKey(matchedBlock, thinkingIndex);
+        nodes.push(
+          <div
+            key={`${keyPrefix}-thinking-${partIndex}-${thinkingIndex}-${blockKey}`}
+            className="ai-chat-inline-thinking-events"
+          >
+            {renderThinkingBlockCard(
+              entryKey,
+              matchedBlock,
+              blockKey,
+              `${keyPrefix}-thinking-card-${partIndex}-${thinkingIndex}-${blockKey}`,
+              false,
+            )}
+          </div>,
+        );
+      });
+
+      const marker = markers[partIndex];
+      if (!marker) return;
+
+      const markerSignature = getToolCallSignature(marker.toolName, marker.callId);
+      const matchedRow =
+        (markerSignature ? pendingBySignature.get(markerSignature) : undefined) ||
+        pendingByCallId.get(marker.callId);
+      const fallbackSignature =
+        markerSignature ||
+        getToolCallSignature(marker.toolName, `${marker.callId}-${partIndex + 1}`) ||
+        `${marker.toolName}::${marker.callId}::${partIndex}`;
+      const rowToRender: ToolCallStatusRow = matchedRow || {
+        signature: fallbackSignature,
+        toolName: marker.toolName,
+        callId: marker.callId,
+        status: 'running',
+        statusLabel: `tool call ${marker.toolName} running`,
+      };
+
+      if (matchedRow) {
+        pendingBySignature.delete(matchedRow.signature);
+        const pendingByCallIdMatch = pendingByCallId.get(matchedRow.callId);
+        if (pendingByCallIdMatch?.signature === matchedRow.signature) {
+          pendingByCallId.delete(matchedRow.callId);
+        }
+      }
+
+      nodes.push(
+        <div
+          key={`${keyPrefix}-inline-${rowToRender.signature}-${partIndex}`}
+          className="ai-chat-inline-tool-events"
+          role="status"
+          aria-live="polite"
+        >
+          {renderToolStatusRow(rowToRender, `${keyPrefix}-row-${rowToRender.signature}-${partIndex}`)}
+        </div>,
+      );
+    });
+
+    const unmatchedRows = Array.from(pendingBySignature.values());
+    if (unmatchedRows.length > 0) {
+      nodes.push(
+        <div
+          key={`${keyPrefix}-tail`}
+          className="ai-chat-inline-tool-events ai-chat-inline-tool-events--tail"
+          role="status"
+          aria-live="polite"
+        >
+          {unmatchedRows.map((row, rowIndex) =>
+            renderToolStatusRow(row, `${keyPrefix}-tail-${row.signature}-${rowIndex}`),
+          )}
+        </div>,
+      );
+    }
+
+    return <>{nodes}</>;
+  };
 
   return (
     <div 
@@ -2588,15 +4995,101 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         {/* History */}
         {Object.entries(history).map(([prompt, entry], index, entries) => {
           const isLastEntry = index === entries.length - 1;
+          const isStreamingEntry = isLastEntry && (isLoading || !idle) && !justReset;
+          const continuationAppendBase =
+            isStreamingEntry &&
+            activeStreamAppendBaseRef.current &&
+            activeStreamAppendBaseRef.current.key === prompt &&
+            activeStreamAppendBaseRef.current.base.trim().length > 0
+              ? activeStreamAppendBaseRef.current
+              : null;
+          const isContinuationStreamingEntry = !!continuationAppendBase;
           // Check if this is a system message (injected by page context, etc.)
           const isSystemMessage = prompt.startsWith('__system__:');
           // Process thinking tags first, then apply actions at render time
           // This ensures actions are always applied with current props (e.g., after agent switch)
           const { cleanedText } = processThinkingTags(entry.content);
           const processedContent = processActions(cleanedText);
+          const entryThinkingBlocks = thinkingBlocksByKey[prompt] || [];
+          const statusBySignature = new Map<string, ToolCallStatusRow>();
+          const upsertToolStatus = (row: ToolCallStatusRow) => {
+            const existing = statusBySignature.get(row.signature);
+            if (!existing || getToolStatusRank(row.status) >= getToolStatusRank(existing.status)) {
+              statusBySignature.set(row.signature, row);
+            }
+          };
+
+          const entryToolCalls = Array.isArray((entry as any).toolCalls) ? ((entry as any).toolCalls as any[]) : [];
+          const entryToolResponses = Array.isArray((entry as any).toolResponses)
+            ? ((entry as any).toolResponses as any[])
+            : [];
+
+          entryToolCalls.forEach((toolCall, toolIndex) => {
+            const toolName = String((toolCall as any)?.name || '').trim() || 'tool';
+            const callId = String((toolCall as any)?.id || '').trim() || `${toolName}-${toolIndex + 1}`;
+            const signature =
+              getToolCallSignature(toolName, callId) ||
+              `completed-${prompt}-${toolIndex}-${toolName}-${callId}`;
+            const matchedResponse =
+              entryToolResponses.find((response) => String((response as any)?.tool_call_id || '').trim() === callId) ||
+              entryToolResponses[toolIndex];
+            const isError = Boolean((matchedResponse as any)?.isError);
+            upsertToolStatus({
+              signature,
+              toolName,
+              callId,
+              status: isError ? 'error' : 'completed',
+              statusLabel: isError ? `tool call ${toolName} errored` : `tool call ${toolName} completed`,
+            });
+          });
+
+          if (isLastEntry && !justReset) {
+            pendingToolRequests.forEach((request, requestIndex) => {
+              const toolName = String(request?.toolName || '').trim() || 'tool';
+              const callId = String(request?.callId || '').trim() || `${toolName}-pending-${requestIndex + 1}`;
+              const signature =
+                getToolCallSignature(toolName, callId) ||
+                `pending-${prompt}-${requestIndex}-${toolName}-${callId}`;
+              upsertToolStatus({
+                signature,
+                toolName,
+                callId,
+                status: 'pending',
+                statusLabel: `tool call ${toolName} awaiting approval`,
+              });
+            });
+
+            activeToolCalls.forEach((activeToolCall, activeIndex) => {
+              const toolName = String(activeToolCall?.toolName || '').trim() || 'tool';
+              const callId =
+                String(activeToolCall?.callId || '').trim() || `${toolName}-running-${activeIndex + 1}`;
+              const signature =
+                getToolCallSignature(toolName, callId) ||
+                `running-${prompt}-${activeIndex}-${toolName}-${callId}`;
+              upsertToolStatus({
+                signature,
+                toolName,
+                callId,
+                status: 'running',
+                statusLabel: `tool call ${toolName} running`,
+              });
+            });
+          }
+
+          const entryToolStatusRows = Array.from(statusBySignature.values());
+          const hasInFlightToolStatus = entryToolStatusRows.some(
+            (row) => row.status === 'pending' || row.status === 'running',
+          );
+          const isActivePromptEntry = !!lastKey && prompt === lastKey;
+          const shouldShowBusyGapThinkingFallback =
+            isActivePromptEntry &&
+            !isStreamingEntry &&
+            (isLoading || !idle) &&
+            !activeThinkingBlock &&
+            !hasInFlightToolStatus;
           
           return (
-            <div key={index} className="ai-chat-entry">
+            <div key={prompt} className="ai-chat-entry">
               {/* User Message - hidden for initial prompt or system messages */}
               {!(hideInitialPrompt && index === 0) && !isSystemMessage && (
                 <div className="ai-chat-message ai-chat-message--user">
@@ -2610,42 +5103,113 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
               <div className="ai-chat-message ai-chat-message--assistant">
                 <div className="ai-chat-message__content">
                   {/* Streaming state */}
-                  {isLastEntry && (isLoading || !idle) && !justReset ? (
+                  {isStreamingEntry ? (
                     (() => {
+                      if (isContinuationStreamingEntry) {
+                        const continuationResponseWithInlineToolLabels = formatToolRequestsForDisplay(response || '');
+                        const { cleanedText: continuationCleanedText } = processThinkingTags(
+                          continuationResponseWithInlineToolLabels,
+                        );
+                        const appendBase = continuationAppendBase || activeStreamAppendBaseRef.current;
+                        const continuationMergedText =
+                          appendBase && appendBase.key === prompt
+                            ? mergeContinuationResponseText(appendBase.base, continuationCleanedText.trim())
+                            : continuationCleanedText;
+                        const continuationDisplaySource =
+                          continuationMergedText.trim().length > 0
+                            ? continuationMergedText
+                            : cleanedText;
+                        const continuationDisplayContent = processActions(continuationDisplaySource);
+                        const hasVisibleContinuationContent =
+                          continuationDisplayContent.trim().length > 0;
+                        const hasFreshContinuationContent = continuationCleanedText.trim().length > 0;
+                        const showThinkingFallback =
+                          !activeThinkingBlock && !hasFreshContinuationContent && !hasInFlightToolStatus;
+
+                        return (
+                          <div className="ai-chat-streaming">
+                            {renderActiveThinkingBlock(prompt, activeThinkingBlock, `${prompt}-continuation`)}
+                            {hasVisibleContinuationContent ? (
+                              <>
+                                {renderContentWithInlineToolCards(
+                                  continuationDisplayContent,
+                                  entryToolStatusRows,
+                                  entryThinkingBlocks,
+                                  prompt,
+                                  `${prompt}-continuation`,
+                                )}
+                                {showThinkingFallback && (
+                                  <div className="ai-chat-loading ai-chat-loading--inline">
+                                    <span>Thinking</span>
+                                    <span className="ai-chat-loading__dots">
+                                      <span className="ai-chat-loading__dot" />
+                                      <span className="ai-chat-loading__dot" />
+                                      <span className="ai-chat-loading__dot" />
+                                    </span>
+                                  </div>
+                                )}
+                              </>
+                            ) : (
+                              <div className="ai-chat-loading">
+                                <span>Continuing response</span>
+                                <span className="ai-chat-loading__dots">
+                                  <span className="ai-chat-loading__dot" />
+                                  <span className="ai-chat-loading__dot" />
+                                  <span className="ai-chat-loading__dot" />
+                                </span>
+                              </div>
+                            )}
+                          </div>
+                        );
+                      }
+
                       // During streaming, compute content directly from response (not from history which may be stale)
-                      const { cleanedText: streamingCleanedText } = processThinkingTags(response || '');
-                      const streamingContent = processActions(streamingCleanedText);
+                      const streamingResponseWithInlineToolLabels = formatToolRequestsForDisplay(response || '');
+                      const { cleanedText: streamingCleanedText } = processThinkingTags(streamingResponseWithInlineToolLabels);
+                      const appendBase = activeStreamAppendBaseRef.current;
+                      const streamingMergedText =
+                        appendBase && appendBase.key === prompt
+                          ? mergeContinuationResponseText(appendBase.base, streamingCleanedText.trim())
+                          : streamingCleanedText;
+                      const streamingContent = processActions(streamingMergedText);
                       const hasStreamingContent = streamingContent.trim().length > 0;
+                      const hasFreshStreamingContent = streamingCleanedText.trim().length > 0;
+                      const fallbackHistoryContent = processedContent.trim();
+                      const streamingDisplayContent = hasStreamingContent
+                        ? streamingContent
+                        : fallbackHistoryContent;
+                      const hasDisplayContent = streamingDisplayContent.trim().length > 0;
+                      const showThinkingFallback =
+                        !activeThinkingBlock && !hasFreshStreamingContent && !hasInFlightToolStatus;
                       
                       return (
                         <div className="ai-chat-streaming">
-                          {/* Show thinking blocks (both completed and active/streaming) */}
-                          {(thinkingBlocks.length > 0 || activeThinkingBlock) && renderThinkingBlocks(true)}
+                          {renderActiveThinkingBlock(prompt, activeThinkingBlock, `${prompt}-streaming`)}
                           
                           {/* Show streaming content or loading indicator */}
-                          {hasStreamingContent ? (
-                            markdownClass ? (
-                              <div className={markdownClass}>
-                                <ReactMarkdown
-                                  remarkPlugins={[remarkGfm]}
-                                  rehypePlugins={[rehypeRaw]}
-                                  components={markdownComponents}
-                                >
-                                  {streamingContent}
-                                </ReactMarkdown>
-                              </div>
-                            ) : (
-                              <ReactMarkdown
-                                remarkPlugins={[remarkGfm]}
-                                rehypePlugins={[rehypeRaw]}
-                                components={markdownComponents}
-                              >
-                                {streamingContent}
-                              </ReactMarkdown>
-                            )
+                          {hasDisplayContent ? (
+                            <>
+                              {renderContentWithInlineToolCards(
+                                streamingDisplayContent,
+                                entryToolStatusRows,
+                                entryThinkingBlocks,
+                                prompt,
+                                `${prompt}-streaming`,
+                              )}
+                              {showThinkingFallback && (
+                                <div className="ai-chat-loading ai-chat-loading--inline">
+                                  <span>Thinking</span>
+                                  <span className="ai-chat-loading__dots">
+                                    <span className="ai-chat-loading__dot" />
+                                    <span className="ai-chat-loading__dot" />
+                                    <span className="ai-chat-loading__dot" />
+                                  </span>
+                                </div>
+                              )}
+                            </>
                           ) : (
                             <div className="ai-chat-loading">
-                              <span>{thinkingBlocks.length > 0 || activeThinkingBlock ? 'Still thinking' : 'Thinking'}</span>
+                              <span>{activeThinkingBlock ? 'Still thinking' : 'Thinking'}</span>
                               <span className="ai-chat-loading__dots">
                                 <span className="ai-chat-loading__dot" />
                                 <span className="ai-chat-loading__dot" />
@@ -2658,26 +5222,22 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
                     })()
                   ) : (
                     <>
-                      {/* Show completed thinking blocks after streaming */}
-                      {isLastEntry && thinkingBlocks.length > 0 && renderThinkingBlocks(false)}
-                      {markdownClass ? (
-                        <div className={markdownClass}>
-                          <ReactMarkdown
-                            remarkPlugins={[remarkGfm]}
-                            rehypePlugins={[rehypeRaw]}
-                            components={markdownComponents}
-                          >
-                            {processedContent}
-                          </ReactMarkdown>
+                      {renderContentWithInlineToolCards(
+                        processedContent,
+                        entryToolStatusRows,
+                        entryThinkingBlocks,
+                        prompt,
+                        `${prompt}-final`,
+                      )}
+                      {shouldShowBusyGapThinkingFallback && (
+                        <div className="ai-chat-loading ai-chat-loading--inline" aria-live="polite">
+                          <span>Thinking</span>
+                          <span className="ai-chat-loading__dots">
+                            <span className="ai-chat-loading__dot" />
+                            <span className="ai-chat-loading__dot" />
+                            <span className="ai-chat-loading__dot" />
+                          </span>
                         </div>
-                      ) : (
-                        <ReactMarkdown
-                          remarkPlugins={[remarkGfm]}
-                          rehypePlugins={[rehypeRaw]}
-                          components={markdownComponents}
-                        >
-                          {processedContent}
-                        </ReactMarkdown>
                       )}
                     </>
                   )}
@@ -2731,26 +5291,23 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
                       )}
                     </button>
                     
-                    {/* Tool Info Button - show if entry has tool data */}
-                    {(entry.toolCalls || entry.toolResponses) && (
-                      <button
-                        className="ai-chat-action-button"
-                        onClick={() => {
-                          setToolInfoData({
-                            calls: entry.toolCalls || [],
-                            responses: entry.toolResponses || [],
-                          });
-                          setIsToolInfoModalOpen(true);
-                        }}
-                        title="View tool information"
-                      >
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
-                          <circle cx="12" cy="12" r="10" />
-                          <line x1="12" x2="12" y1="16" y2="12" />
-                          <line x1="12" x2="12.01" y1="8" y2="8" />
-                        </svg>
-                      </button>
-                    )}
+                    <button
+                      className="ai-chat-action-button"
+                      onClick={() => {
+                        setToolInfoData({
+                          calls: entry.toolCalls || [],
+                          responses: entry.toolResponses || [],
+                        });
+                        setIsToolInfoModalOpen(true);
+                      }}
+                      title="View tool information"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ai-chat-icon-sm">
+                        <circle cx="12" cy="12" r="10" />
+                        <line x1="12" x2="12" y1="16" y2="12" />
+                        <line x1="12" x2="12.01" y1="8" y2="8" />
+                      </svg>
+                    </button>
                   </div>
                 )}
               </div>
@@ -2777,50 +5334,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         
         <div ref={bottomRef} />
       </ScrollArea>
-      
-      {/* Tool Approval Panel */}
-      {pendingToolRequests.length > 0 && (
-        <div className="ai-chat-approve-tools-panel">
-          <div className="ai-chat-approve-tools-header">
-            Tool Approval Required
-          </div>
-          <div className="ai-chat-approve-tools-description">
-            The AI wants to use the following tools:
-          </div>
-          {getUniqueToolNames().map((toolName) => (
-            <div key={toolName} className="ai-chat-approve-tool-item">
-              <div className="ai-chat-approve-tool-name">{toolName}</div>
-              <div className="ai-chat-approve-tools-buttons">
-                <Button
-                  size="sm"
-                  variant="outline"
-                  className="ai-chat-approve-tools-button"
-                  onClick={() => handleToolApproval(toolName, 'once')}
-                >
-                  Once
-                </Button>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  className="ai-chat-approve-tools-button"
-                  onClick={() => handleToolApproval(toolName, 'session')}
-                >
-                  This Session
-                </Button>
-                <Button
-                  size="sm"
-                  variant="default"
-                  className="ai-chat-approve-tools-button"
-                  onClick={() => handleToolApproval(toolName, 'always')}
-                >
-                  Always
-                </Button>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-      
+
       {/* Button Container - Save, Email, CTA */}
       {(showSaveButton || showEmailButton || showCallToAction) && (
         <div className="ai-chat-button-container">
@@ -2991,11 +5505,11 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
           </div>
         </>
       )}
-      
+
       {/* Input Area - Isolated component for performance */}
       <ChatInput
         placeholder={placeholder}
-        idle={idle}
+        isBusy={isLoading || !idle}
         onSubmit={continueChat}
         onStop={handleStop}
         agentOptions={agentOptions}
@@ -3056,4 +5570,3 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
 
 // Memoize to prevent re-renders when parent state changes but our props don't
 export default React.memo(AIChatPanel);
-