@hef2024/llmasaservice-ui 0.24.2 → 0.24.4

package/src/AIAgentPanel.tsx

@@ -1,9 +1,15 @@
 import { LLMAsAServiceCustomer } from 'llmasaservice-client';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import './AIAgentPanel.css';
-import AIChatPanel, { AgentOption } from './AIChatPanel';
+import AIChatPanel, {
+  AgentOption,
+  BeforeSendPayload,
+  LocalToolExecutor,
+  TraceContextMode,
+} from './AIChatPanel';
 import { Button, Dialog, DialogFooter, Input, ScrollArea, Tooltip } from './components/ui';
 import { useAgentRegistry } from './hooks/useAgentRegistry';
+import { MCPAuthHeaderResolver } from './mcpAuth';
 
 /**
  * Context section for agent awareness
@@ -58,6 +64,7 @@ export interface ActiveConversation {
   stableKey: string; // Stable key for React component - never changes
   agentId: string;
   history: Record<string, { content: string; callId: string }>;
+  transcriptLoaded: boolean; // Prevent re-fetch loops for conversations with empty history
   isLoading: boolean;
   title: string;
   conversationInitialPrompt?: string; // Per-conversation initial prompt for programmatic start
@@ -126,6 +133,7 @@ export interface AIAgentPanelProps {
   // Callbacks
   onAgentSwitch?: (fromAgent: string, toAgent: string) => void;
   onConversationChange?: (conversationId: string) => void;
+  onBeforeSend?: (payload: BeforeSendPayload) => Promise<void> | void;
   historyChangedCallback?: (history: Record<string, { content: string; callId: string }>) => void;
   responseCompleteCallback?: (callId: string, prompt: string, response: string) => void;
   thumbsUpClick?: (callId: string) => void;
@@ -176,6 +184,10 @@ export interface AIAgentPanelProps {
   callToActionEmailSubject?: string;
   customerEmailCaptureMode?: "HIDE" | "OPTIONAL" | "REQUIRED";
   customerEmailCapturePlaceholder?: string;
+  resolveMcpAuthHeaders?: MCPAuthHeaderResolver;
+  localToolExecutors?: Record<string, LocalToolExecutor>;
+  traceContextMode?: TraceContextMode;
+  autoApproveTools?: boolean | string[];
 }
 
 // Icons
@@ -259,16 +271,22 @@ const normalizeConversationListPayload = (payload: any): APIConversationSummary[
   if (!payload) return [];
   
   const conversations = Array.isArray(payload) ? payload : payload.conversations || [];
-  
-  return conversations.map((conv: any) => {
+
+  const normalized = conversations.map((conv: any, index: number) => {
     // Get title, but filter out generic "Conversation" from API
     let title = conv.title && conv.title !== 'Conversation' ? conv.title : '';
     if (!title) {
       title = conv.summary || extractTitleFromConversation(conv);
     }
+
+    const resolvedConversationId =
+      conv.conversationId ||
+      conv.id ||
+      conv.conversation_id ||
+      `conversation-${index}-${Date.now()}`;
     
     return {
-      conversationId: conv.conversationId || conv.id || conv.conversation_id,
+      conversationId: resolvedConversationId,
       title,
       summary: conv.summary,
       createdAt: conv.createdAt || conv.created_at || conv.timestamp || new Date().toISOString(),
@@ -277,6 +295,25 @@ const normalizeConversationListPayload = (payload: any): APIConversationSummary[
       messageCount: conv.messageCount || conv.message_count,
     };
   });
+
+  // Dedupe by conversationId in case upstream returns duplicate rows.
+  // Keep the most recently updated entry for each ID.
+  const dedupedById = new Map<string, APIConversationSummary>();
+  for (const conv of normalized) {
+    const existing = dedupedById.get(conv.conversationId);
+    if (!existing) {
+      dedupedById.set(conv.conversationId, conv);
+      continue;
+    }
+
+    const existingUpdated = new Date(existing.updatedAt).getTime();
+    const incomingUpdated = new Date(conv.updatedAt).getTime();
+    if (incomingUpdated >= existingUpdated) {
+      dedupedById.set(conv.conversationId, conv);
+    }
+  }
+
+  return Array.from(dedupedById.values());
 };
 
 // Extract title from conversation data
@@ -376,6 +413,333 @@ const groupConversationsByTime = (conversations: APIConversationSummary[], showA
     .map(([label, conversations]) => ({ label, conversations, count: conversations.length }));
 };
 
+interface TranscriptMessage {
+  role: string;
+  content: string;
+}
+
+interface TranscriptTurn {
+  prompt: string;
+  response: string;
+  callId: string;
+  timestampMs: number;
+}
+
+const toRecord = (value: unknown): Record<string, unknown> | null => {
+  if (typeof value === 'object' && value !== null) {
+    return value as Record<string, unknown>;
+  }
+  return null;
+};
+
+const toStringValue = (value: unknown): string => {
+  if (typeof value === 'string') return value;
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+  return '';
+};
+
+const normalizeContentText = (value: unknown): string => {
+  if (typeof value === 'string') return value;
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+  if (Array.isArray(value)) {
+    return value
+      .map(item => normalizeContentText(item))
+      .filter(Boolean)
+      .join('\n')
+      .trim();
+  }
+
+  const record = toRecord(value);
+  if (!record) return '';
+
+  const directText = toStringValue(record.text);
+  if (directText) return directText;
+
+  const directValue = toStringValue(record.value);
+  if (directValue) return directValue;
+
+  const directContent = toStringValue(record.content);
+  if (directContent) return directContent;
+
+  if (Array.isArray(record.content)) {
+    return normalizeContentText(record.content);
+  }
+  if (Array.isArray(record.parts)) {
+    return normalizeContentText(record.parts);
+  }
+  if (record.content && typeof record.content === 'object') {
+    return normalizeContentText(record.content);
+  }
+
+  return '';
+};
+
+const parseCallMessages = (rawMessages: unknown): TranscriptMessage[] => {
+  let parsed: unknown = rawMessages;
+  if (typeof rawMessages === 'string') {
+    try {
+      parsed = JSON.parse(rawMessages);
+    } catch {
+      return [];
+    }
+  }
+
+  const parsedRecord = toRecord(parsed);
+  if (parsedRecord && Array.isArray(parsedRecord.messages)) {
+    parsed = parsedRecord.messages;
+  }
+
+  if (!Array.isArray(parsed)) {
+    return [];
+  }
+
+  const normalized: TranscriptMessage[] = [];
+  for (const message of parsed) {
+    const messageRecord = toRecord(message);
+    if (!messageRecord) continue;
+
+    const role = toStringValue(messageRecord.role).toLowerCase().trim();
+    if (!role) continue;
+
+    const content = normalizeContentText(
+      messageRecord.content ?? messageRecord.text ?? messageRecord.message
+    ).trim();
+    if (!content) continue;
+
+    normalized.push({ role, content });
+  }
+
+  return normalized;
+};
+
+const shouldSkipTranscriptMessage = (message: TranscriptMessage): boolean => {
+  return message.role === 'system' || (message.role === 'user' && message.content.startsWith('__system__:'));
+};
+
+const parseTimestampMs = (value: unknown): number | null => {
+  const timestamp = toStringValue(value).trim();
+  if (!timestamp) return null;
+  const parsed = Date.parse(timestamp);
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
+const getCallTimestampMs = (call: Record<string, unknown>, fallbackIndex: number): number => {
+  const timestampCandidates = [
+    call.createdAt,
+    call.created_at,
+    call.timestamp,
+    call.updatedAt,
+    call.updated_at,
+  ];
+
+  for (const candidate of timestampCandidates) {
+    const parsed = parseTimestampMs(candidate);
+    if (parsed !== null) return parsed;
+  }
+
+  // Deterministic fallback to preserve ordering when timestamps are absent
+  return fallbackIndex;
+};
+
+const getCallId = (call: Record<string, unknown>): string => {
+  const id = toStringValue(call.id);
+  if (id) return id;
+  return toStringValue(call.callId);
+};
+
+const normalizeCallsPayload = (payload: unknown): Record<string, unknown>[] => {
+  const payloadRecord = toRecord(payload);
+  const calls = Array.isArray(payload)
+    ? payload
+    : payloadRecord && Array.isArray(payloadRecord.calls)
+      ? (payloadRecord.calls as unknown[])
+      : [];
+
+  return calls
+    .map(call => toRecord(call))
+    .filter((call): call is Record<string, unknown> => call !== null);
+};
+
+const turnsEqual = (left: TranscriptTurn, right: TranscriptTurn): boolean => {
+  return left.prompt === right.prompt && left.response === right.response;
+};
+
+const getPrefixMatchLength = (existing: TranscriptTurn[], incoming: TranscriptTurn[]): number => {
+  const max = Math.min(existing.length, incoming.length);
+  let matched = 0;
+  while (matched < max && turnsEqual(existing[matched]!, incoming[matched]!)) {
+    matched += 1;
+  }
+  return matched;
+};
+
+const getSuffixPrefixOverlap = (existing: TranscriptTurn[], incoming: TranscriptTurn[]): number => {
+  const max = Math.min(existing.length, incoming.length);
+  for (let overlap = max; overlap > 0; overlap -= 1) {
+    let matches = true;
+    for (let idx = 0; idx < overlap; idx += 1) {
+      const left = existing[existing.length - overlap + idx]!;
+      const right = incoming[idx]!;
+      if (!turnsEqual(left, right)) {
+        matches = false;
+        break;
+      }
+    }
+    if (matches) return overlap;
+  }
+  return 0;
+};
+
+const mergeTranscriptTurns = (existing: TranscriptTurn[], incoming: TranscriptTurn[]): TranscriptTurn[] => {
+  if (incoming.length === 0) return existing;
+  if (existing.length === 0) return [...incoming];
+
+  const prefixMatchLength = getPrefixMatchLength(existing, incoming);
+  if (prefixMatchLength > 0) {
+    return [...existing, ...incoming.slice(prefixMatchLength)];
+  }
+
+  const overlap = getSuffixPrefixOverlap(existing, incoming);
+  if (overlap > 0) {
+    return [...existing, ...incoming.slice(overlap)];
+  }
+
+  return [...existing, ...incoming];
+};
+
+const buildTurnsFromMessages = (
+  messages: TranscriptMessage[],
+  fallbackResponse: string,
+  callId: string,
+  timestampMs: number,
+): TranscriptTurn[] => {
+  const turns: TranscriptTurn[] = [];
+
+  for (let index = 0; index < messages.length; index += 1) {
+    const message = messages[index];
+    if (!message || message.role !== 'user') continue;
+
+    const prompt = message.content.trim();
+    if (!prompt) continue;
+
+    let response = '';
+    let reachedNextUser = false;
+    for (let lookAhead = index + 1; lookAhead < messages.length; lookAhead += 1) {
+      const nextMessage = messages[lookAhead];
+      if (!nextMessage) continue;
+      if (nextMessage.role === 'assistant') {
+        response = nextMessage.content.trim();
+        index = lookAhead;
+        break;
+      }
+      if (nextMessage.role === 'user') {
+        reachedNextUser = true;
+        break;
+      }
+    }
+
+    // Only pair fallback response with the final unresolved user message for this call.
+    if (!response && !reachedNextUser) {
+      response = fallbackResponse;
+    }
+
+    if (!response) continue;
+
+    turns.push({
+      prompt,
+      response,
+      callId,
+      timestampMs,
+    });
+  }
+
+  return turns;
+};
+
+const buildTranscriptTurnsFromCalls = (calls: Record<string, unknown>[]): TranscriptTurn[] => {
+  const orderedCalls = calls
+    .map((call, index) => ({
+      call,
+      index,
+      timestampMs: getCallTimestampMs(call, index),
+    }))
+    .sort((left, right) => {
+      if (left.timestampMs === right.timestampMs) return left.index - right.index;
+      return left.timestampMs - right.timestampMs;
+    });
+
+  let mergedTurns: TranscriptTurn[] = [];
+
+  for (const orderedCall of orderedCalls) {
+    const { call, timestampMs } = orderedCall;
+    const callId = getCallId(call);
+    const fallbackResponse = normalizeContentText(call.response).trim();
+
+    const parsedMessages = parseCallMessages(call.messages).filter(
+      message => !shouldSkipTranscriptMessage(message)
+    );
+
+    let callTurns = buildTurnsFromMessages(
+      parsedMessages,
+      fallbackResponse,
+      callId,
+      timestampMs,
+    );
+
+    if (callTurns.length === 0) {
+      const fallbackPrompt = normalizeContentText(call.prompt).trim();
+      if (fallbackPrompt && fallbackResponse) {
+        callTurns = [
+          {
+            prompt: fallbackPrompt,
+            response: fallbackResponse,
+            callId,
+            timestampMs,
+          },
+        ];
+      }
+    }
+
+    mergedTurns = mergeTranscriptTurns(mergedTurns, callTurns);
+  }
+
+  return mergedTurns;
+};
+
+const buildHistoryFromTranscriptTurns = (
+  turns: TranscriptTurn[],
+): Record<string, { content: string; callId: string }> => {
+  const history: Record<string, { content: string; callId: string }> = {};
+  const keyUsageByPrompt = new Map<string, number>();
+
+  turns.forEach((turn, index) => {
+    const prompt = turn.prompt.trim();
+    const response = turn.response.trim();
+    if (!prompt || !response) return;
+
+    const baseTimestampMs = Number.isFinite(turn.timestampMs) ? turn.timestampMs : index;
+    const keySeed = `${baseTimestampMs}:${prompt}`;
+    const keyUsageCount = keyUsageByPrompt.get(keySeed) ?? 0;
+    keyUsageByPrompt.set(keySeed, keyUsageCount + 1);
+
+    const uniqueTimestamp = new Date(baseTimestampMs + keyUsageCount).toISOString();
+    const historyKey = `${uniqueTimestamp}:${prompt}`;
+    history[historyKey] = {
+      content: response,
+      callId: turn.callId,
+    };
+  });
+
+  return history;
+};
+
+const truncatePromptForTitle = (prompt: string): string => {
+  if (prompt.length > 60) {
+    return `${prompt.slice(0, 57)}...`;
+  }
+  return prompt;
+};
+
 // Empty arrays/objects to prevent recreating on every render
 const EMPTY_ARRAY: never[] = [];
 const EMPTY_HISTORY: Record<string, { content: string; callId: string }> = {};
@@ -416,6 +780,7 @@ interface ChatPanelWrapperProps {
   onToggleSection: (sectionId: string, enabled: boolean) => void;
   // Conversation creation callback
   onConversationCreated: (tempId: string, realId: string) => void;
+  onBeforeSend?: (payload: BeforeSendPayload) => Promise<void> | void;
   // Per-conversation initial prompt
   conversationInitialPrompt?: string;
   // New props from ChatPanel port
@@ -434,6 +799,10 @@ interface ChatPanelWrapperProps {
   callToActionEmailSubject?: string;
   customerEmailCaptureMode?: "HIDE" | "OPTIONAL" | "REQUIRED";
   customerEmailCapturePlaceholder?: string;
+  resolveMcpAuthHeaders?: MCPAuthHeaderResolver;
+  localToolExecutors?: Record<string, LocalToolExecutor>;
+  traceContextMode?: TraceContextMode;
+  autoApproveTools?: boolean | string[];
 }
 
 // Remove React.memo temporarily to debug - ChatPanelWrapper needs to re-render when agentId changes
@@ -468,6 +837,7 @@ const ChatPanelWrapper = (({
   disabledSectionIds,
   onToggleSection,
   onConversationCreated,
+  onBeforeSend,
   conversationInitialPrompt,
   // New props from ChatPanel port
   cssUrl,
@@ -485,6 +855,10 @@ const ChatPanelWrapper = (({
   callToActionEmailSubject,
   customerEmailCaptureMode,
   customerEmailCapturePlaceholder,
+  resolveMcpAuthHeaders,
+  localToolExecutors,
+  traceContextMode,
+  autoApproveTools,
 }) => {
   const convAgentProfile = getAgent(activeConv.agentId);
   const convAgentMetadata = convAgentProfile?.metadata;
@@ -513,6 +887,18 @@ const ChatPanelWrapper = (({
     },
     [onConversationCreated, activeConv.conversationId]
   );
+
+  const beforeSendCallback = useCallback(
+    (payload: BeforeSendPayload) => {
+      if (!onBeforeSend) return;
+      return onBeforeSend({
+        ...payload,
+        conversationId: payload.conversationId || activeConv.conversationId,
+        agentId: payload.agentId || activeConv.agentId,
+      });
+    },
+    [onBeforeSend, activeConv.conversationId, activeConv.agentId]
+  );
   
   // Compute follow-on questions - MUST update when agent switches
   // Don't use useMemo - compute fresh every render to ensure it always reflects current agent
@@ -595,6 +981,7 @@ const ChatPanelWrapper = (({
         disabledSectionIds={disabledSectionIds}
         onToggleSection={onToggleSection}
         onConversationCreated={conversationCreatedCallback}
+        onBeforeSend={beforeSendCallback}
         cssUrl={cssUrl}
         markdownClass={markdownClass}
         width={width}
@@ -610,6 +997,10 @@ const ChatPanelWrapper = (({
         callToActionEmailSubject={callToActionEmailSubject ?? convAgentMetadata.displayCallToActionEmailSubject ?? 'Agent CTA submitted'}
         customerEmailCaptureMode={customerEmailCaptureMode ?? convAgentMetadata?.customerEmailCaptureMode ?? 'HIDE'}
         customerEmailCapturePlaceholder={customerEmailCapturePlaceholder ?? convAgentMetadata?.customerEmailCapturePlaceholder ?? 'Please enter your email...'}
+        resolveMcpAuthHeaders={resolveMcpAuthHeaders}
+        localToolExecutors={localToolExecutors}
+        traceContextMode={traceContextMode}
+        autoApproveTools={autoApproveTools}
       />
     </div>
   );
@@ -668,6 +1059,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   enableContextDetailView = false,
   onAgentSwitch,
   onConversationChange,
+  onBeforeSend,
   historyChangedCallback,
   responseCompleteCallback,
   thumbsUpClick,
@@ -700,6 +1092,10 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   callToActionEmailSubject,
   customerEmailCaptureMode,
   customerEmailCapturePlaceholder,
+  resolveMcpAuthHeaders,
+  localToolExecutors,
+  traceContextMode = 'standard',
+  autoApproveTools,
 }, ref) => {
   // Dev mode warnings for prop conflicts
   useEffect(() => {
@@ -731,13 +1127,8 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   
   // Use controlled value if provided, otherwise use internal state
   const isCollapsed = isControlled ? controlledIsCollapsed : uncontrolledIsCollapsed;
-  const [isHistoryCollapsed, setIsHistoryCollapsed] = useState(() => {
-    if (typeof window !== 'undefined') {
-      const saved = localStorage.getItem('ai-agent-panel-history-collapsed');
-      return saved === 'true';
-    }
-    return false;
-  });
+  // Keep history closed by default; users can explicitly open it per session.
+  const [isHistoryCollapsed, setIsHistoryCollapsed] = useState(true);
   const [panelWidth, setPanelWidth] = useState(() => {
     if (typeof window !== 'undefined') {
       const savedWidth = localStorage.getItem('ai-agent-panel-width');
@@ -877,9 +1268,17 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   const [conversationsError, setConversationsError] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
   
+  const controlledConversationId =
+    typeof conversation === 'string' && conversation.trim() !== ''
+      ? conversation.trim()
+      : null;
+  const isConversationControlled = controlledConversationId !== null;
+
   // Multi-conversation state
   const [activeConversations, setActiveConversations] = useState<Map<string, ActiveConversation>>(new Map());
-  const [currentConversationId, setCurrentConversationId] = useState<string | null>(conversation || null);
+  const [currentConversationId, setCurrentConversationId] = useState<string | null>(
+    controlledConversationId
+  );
   
   // Store first prompts for conversations (conversationId -> firstPrompt)
   const [conversationFirstPrompts, setConversationFirstPrompts] = useState<Record<string, string>>({});
@@ -911,6 +1310,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
 
   // Ref to track if fetch is in progress (prevents duplicate calls)
   const fetchInProgressRef = useRef(false);
+  const loadingTranscriptIdsRef = useRef<Set<string>>(new Set());
   
   // Ref to track the last agent we fetched for
   const lastFetchedAgentRef = useRef<string | null>(null);
@@ -932,32 +1332,62 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   const currentConversationIdRef = useRef<string | null>(currentConversationId);
   currentConversationIdRef.current = currentConversationId;
 
-  // Imperative handle for programmatic control
-  React.useImperativeHandle(ref, () => ({
-    startNewConversation: (prompt: string, agent?: string) => {
-      const targetAgent = agent || currentAgentId;
+  // Centralized conversation selection flow.
+  // In controlled mode, we only update local selection for prop-driven updates (notify=false).
+  const commitConversationSelection = useCallback(
+    (conversationId: string | null, notifyChange: boolean) => {
+      const shouldSyncLocalState =
+        !isConversationControlled ||
+        !notifyChange ||
+        controlledConversationId === conversationId;
+
+      if (shouldSyncLocalState) {
+        setCurrentConversationId(conversationId);
+      }
+
+      if (notifyChange && conversationId && onConversationChange) {
+        const shouldNotifyParent =
+          !isConversationControlled || controlledConversationId !== conversationId;
+        if (shouldNotifyParent) {
+          onConversationChange(conversationId);
+        }
+      }
+    },
+    [controlledConversationId, isConversationControlled, onConversationChange]
+  );
+
+  const createDraftConversation = useCallback(
+    (agentId: string, conversationInitialPrompt?: string): string => {
       const tempId = `new-${Date.now()}`;
-      
+
       setActiveConversations(prev => {
         const next = new Map(prev);
         next.set(tempId, {
           conversationId: tempId,
           stableKey: tempId,
-          agentId: targetAgent,
+          agentId,
           history: {},
+          transcriptLoaded: true,
           isLoading: false,
           title: 'New conversation',
-          conversationInitialPrompt: prompt,
+          conversationInitialPrompt,
         });
         return next;
       });
-      
-      setCurrentConversationId(tempId);
-      if (onConversationChange) {
-        onConversationChange(tempId);
-      }
+
+      return tempId;
+    },
+    []
+  );
+
+  // Imperative handle for programmatic control
+  React.useImperativeHandle(ref, () => ({
+    startNewConversation: (prompt: string, agent?: string) => {
+      const targetAgent = agent || currentAgentId;
+      const tempId = createDraftConversation(targetAgent, prompt);
+      commitConversationSelection(tempId, true);
     }
-  }), [currentAgentId, onConversationChange]);
+  }), [commitConversationSelection, createDraftConversation, currentAgentId]);
 
   // Context change notification state
   const [showContextNotification, setShowContextNotification] = useState(false);
@@ -1162,15 +1592,25 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
 
   // Helper to strip context/template data from a prompt - keeps only the user's actual message
   // Load a specific conversation's transcript (or switch to it if already active)
-  const loadConversationTranscript = useCallback(async (conversationId: string, agentIdForConversation?: string, title?: string) => {
+  const loadConversationTranscript = useCallback(async (
+    conversationId: string,
+    agentIdForConversation?: string,
+    title?: string,
+    notifyConversationChange: boolean = true,
+  ) => {
     // Check if conversation is already in activeConversations (use ref to avoid dependency)
     const existingActive = activeConversationsRef.current.get(conversationId);
-    if (existingActive) {
+    if (
+      existingActive &&
+      (existingActive.transcriptLoaded || Object.keys(existingActive.history || {}).length > 0)
+    ) {
       // Just switch to it, no API call needed
-      setCurrentConversationId(conversationId);
-      if (onConversationChange) {
-        onConversationChange(conversationId);
-      }
+      commitConversationSelection(conversationId, notifyConversationChange);
+      return;
+    }
+
+    if (loadingTranscriptIdsRef.current.has(conversationId)) {
+      commitConversationSelection(conversationId, notifyConversationChange);
       return;
     }
 
@@ -1184,6 +1624,9 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
       return;
     }
 
+    loadingTranscriptIdsRef.current.add(conversationId);
+    setConversationsError(null);
+
     // Set loading state
     setLoadingConversationId(conversationId);
 
@@ -1200,83 +1643,41 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
       });
       
       if (!response.ok) {
+        if (response.status === 404) {
+          // Allow externally supplied conversation/session IDs that have not yet produced calls.
+          const conversationTitle =
+            title || conversationFirstPrompts[conversationId] || 'New conversation';
+          setActiveConversations(prev => {
+            const next = new Map(prev);
+            next.set(conversationId, {
+              conversationId,
+              stableKey: conversationId,
+              agentId: agentIdToUse,
+              history: {},
+              transcriptLoaded: true,
+              isLoading: false,
+              title: conversationTitle,
+            });
+            return next;
+          });
+          commitConversationSelection(conversationId, notifyConversationChange);
+          return;
+        }
         throw new Error(`Failed to load conversation (${response.status})`);
       }
 
       const payload = await response.json();
       console.log('loadConversationTranscript - API response:', payload);
-      
-      // The /calls endpoint returns an array of calls
-      // Use the messages property from the LAST call, which contains the full conversation history
-      const history: Record<string, { content: string; callId: string }> = {};
-      let firstPrompt: string | null = null;
-      
-      if (Array.isArray(payload) && payload.length > 0) {
-        // Get the last call - it contains the full conversation history in the messages property
-        const lastCall = payload[payload.length - 1];
-        const callId = lastCall.id || '';
-        const timestamp = lastCall.createdAt || lastCall.created_at || new Date().toISOString();
-        
-        if (lastCall.messages) {
-          try {
-            // Parse the messages JSON string
-            const messages = JSON.parse(lastCall.messages) as { role: string; content: string }[];
-            console.log('loadConversationTranscript - parsed messages:', messages);
-            
-            // Filter out system messages and special __system__: user messages
-            const relevantMessages = messages.filter(msg => 
-              msg.role !== 'system' && 
-              !(msg.role === 'user' && msg.content.startsWith('__system__:'))
-            );
-            console.log('loadConversationTranscript - filtered messages:', relevantMessages);
-            
-            // Pair user/assistant messages to build history
-            // Note: The messages array contains the INPUT to the LLM (history + new prompt)
-            // The LAST user message needs to be paired with the call's response field
-            for (let i = 0; i < relevantMessages.length; i++) {
-              const msg = relevantMessages[i];
-              
-              if (!msg) continue;
-              
-              if (msg.role === 'user') {
-                // Extract first prompt for conversation title
-                if (!firstPrompt) {
-                  firstPrompt = msg.content.length > 60 ? msg.content.slice(0, 57) + '...' : msg.content;
-                }
-                
-                // Look for the next assistant message in the array
-                const nextMsg = relevantMessages[i + 1];
-                
-                if (nextMsg && nextMsg.role === 'assistant') {
-                  // This is a historical turn - pair the user message with the assistant message from the array
-                  const historyKey = `${timestamp}:${msg.content}`;
-                  history[historyKey] = {
-                    content: nextMsg.content,
-                    callId: callId,
-                  };
-                  
-                  // Skip the assistant message we just processed
-                  i++;
-                } else {
-                  // This is the LAST user message - pair it with the response field
-                  if (lastCall.response) {
-                    const historyKey = `${timestamp}:${msg.content}`;
-                    history[historyKey] = {
-                      content: lastCall.response,
-                      callId: callId,
-                    };
-                  }
-                }
-              }
-            }
-          } catch (err) {
-            console.error('loadConversationTranscript - failed to parse messages property:', err);
-          }
-        }
-      }
 
-      console.log('loadConversationTranscript - created', Object.keys(history).length, 'history entries');
-      console.log('loadConversationTranscript - parsed history:', history);
+      const calls = normalizeCallsPayload(payload);
+      const transcriptTurns = buildTranscriptTurnsFromCalls(calls);
+      const history = buildHistoryFromTranscriptTurns(transcriptTurns);
+      const firstPrompt = transcriptTurns.length > 0
+        ? truncatePromptForTitle(transcriptTurns[0]!.prompt)
+        : null;
+
+      console.log('loadConversationTranscript - parsed calls:', calls.length);
+      console.log('loadConversationTranscript - created history entries:', Object.keys(history).length);
       
       // Update first prompt in state if we found one
       if (firstPrompt) {
@@ -1295,28 +1696,106 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
           stableKey: conversationId, // Use real ID as stable key when loading from API
           agentId: agentIdToUse,
           history,
+          transcriptLoaded: true,
           isLoading: false,
           title: conversationTitle,
         });
         return next;
       });
       
-      setCurrentConversationId(conversationId);
-      
-      if (onConversationChange) {
-        onConversationChange(conversationId);
-      }
-      
-      // Clear loading state on success
-      setLoadingConversationId(null);
+      commitConversationSelection(conversationId, notifyConversationChange);
     } catch (error: any) {
       console.error('Failed to load conversation:', error);
       setConversationsError(error.message || 'Failed to load conversation');
-      
-      // Clear loading state on error
-      setLoadingConversationId(null);
+    } finally {
+      loadingTranscriptIdsRef.current.delete(conversationId);
+      setLoadingConversationId(prev => (prev === conversationId ? null : prev));
+    }
+  }, [apiKey, commitConversationSelection, conversationFirstPrompts, currentAgentId, getAgent]);
+
+  // Controlled conversation mode: keep panel selection in sync with external conversation prop.
+  useEffect(() => {
+    if (!isConversationControlled) return;
+
+    const targetConversationId = controlledConversationId;
+    if (!targetConversationId) {
+      if (currentConversationIdRef.current !== null) {
+        setCurrentConversationId(null);
+      }
+      return;
+    }
+
+    if (targetConversationId.startsWith('new-')) {
+      setActiveConversations(prev => {
+        if (prev.has(targetConversationId)) {
+          return prev;
+        }
+        const next = new Map(prev);
+        next.set(targetConversationId, {
+          conversationId: targetConversationId,
+          stableKey: targetConversationId,
+          agentId: currentAgentId,
+          history: {},
+          transcriptLoaded: true,
+          isLoading: false,
+          title: 'New conversation',
+        });
+        return next;
+      });
+
+      if (currentConversationIdRef.current !== targetConversationId) {
+        setCurrentConversationId(targetConversationId);
+      }
+      return;
     }
-  }, [apiKey, currentAgentId, getAgent, onConversationChange]);
+
+    if (loadingConversationId === targetConversationId) {
+      return;
+    }
+
+    const existingActive = activeConversationsRef.current.get(targetConversationId);
+    if (
+      existingActive &&
+      existingActive.transcriptLoaded &&
+      currentConversationIdRef.current === targetConversationId
+    ) {
+      return;
+    }
+
+    const apiConversation = apiConversations.find(
+      conv => conv.conversationId === targetConversationId
+    );
+    const targetAgentId =
+      apiConversation?.agentId || existingActive?.agentId || currentAgentId;
+
+    if (!targetAgentId) {
+      return;
+    }
+
+    if (targetAgentId !== currentAgentId) {
+      setCurrentAgentId(targetAgentId);
+    }
+
+    const targetTitle =
+      conversationFirstPrompts[targetConversationId] ||
+      apiConversation?.title ||
+      existingActive?.title;
+
+    void loadConversationTranscript(
+      targetConversationId,
+      targetAgentId,
+      targetTitle,
+      false,
+    );
+  }, [
+    apiConversations,
+    controlledConversationId,
+    conversationFirstPrompts,
+    currentAgentId,
+    isConversationControlled,
+    loadConversationTranscript,
+    loadingConversationId,
+  ]);
 
 
   // Refresh conversations callback
@@ -1345,35 +1824,21 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
 
   // Start new conversation
   const handleNewConversation = useCallback(() => {
-    // Generate a temporary ID for the new conversation
-    const tempId = `new-${Date.now()}`;
-    
-    // Add to active conversations with empty history
-    setActiveConversations(prev => {
-      const next = new Map(prev);
-      next.set(tempId, {
-        conversationId: tempId,
-        stableKey: tempId, // Stable key never changes even when conversationId updates
-        agentId: currentAgentId,
-        history: {},
-        isLoading: false,
-        title: 'New conversation',
-      });
-      return next;
-    });
-    
-    setCurrentConversationId(tempId);
-  }, [currentAgentId]);
+    const tempId = createDraftConversation(currentAgentId);
+    commitConversationSelection(tempId, true);
+  }, [commitConversationSelection, createDraftConversation, currentAgentId]);
   
   // Auto-start a new conversation when none exist and agent is ready
   useEffect(() => {
+    if (isConversationControlled) return;
+
     const agentProfile = getAgent(currentAgentId);
     const isAgentReady = agentProfile?.metadata?.projectId;
     
     if (isAgentReady && !agentsLoading && activeConversations.size === 0) {
       handleNewConversation();
     }
-  }, [currentAgentId, agentsLoading, activeConversations.size, getAgent, handleNewConversation]);
+  }, [currentAgentId, agentsLoading, activeConversations.size, getAgent, handleNewConversation, isConversationControlled]);
   
   // Close an active conversation
   const handleCloseConversation = useCallback((conversationId: string, e?: React.MouseEvent) => {
@@ -1391,9 +1856,13 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
     if (currentConversationIdRef.current === conversationId) {
       const remaining = Array.from(activeConversationsRef.current.keys()).filter(id => id !== conversationId);
       const nextId = remaining.length > 0 ? remaining[0] ?? null : null;
-      setCurrentConversationId(nextId);
+      if (nextId) {
+        commitConversationSelection(nextId, true);
+      } else if (!isConversationControlled) {
+        setCurrentConversationId(null);
+      }
     }
-  }, []);
+  }, [commitConversationSelection, isConversationControlled]);
 
   // Select conversation
   const handleSelectConversation = useCallback((conversationId: string) => {
@@ -1830,6 +2299,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
             next.set(targetConversationId, {
               ...existing,
               history,
+              transcriptLoaded: true,
               title,
             });
             return next;
@@ -1941,18 +2411,21 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
     
     // Update currentConversationId if it was the temp one
     if (currentConversationIdRef.current === tempId) {
-      setCurrentConversationId(realId);
-      if (onConversationChange) {
-        onConversationChange(realId);
-      }
+      commitConversationSelection(realId, true);
     }
-  }, [onConversationChange]);
+  }, [commitConversationSelection]);
 
   // Toggle collapse - only if collapsible is enabled
   const toggleCollapse = useCallback(() => {
     if (!collapsible) return;
     
     const newValue = !isCollapsed;
+
+    // Expanding the main panel should not implicitly reopen conversation history.
+    if (!newValue) {
+      setIsHistoryCollapsed(true);
+      setShowSearch(false);
+    }
     
     // Update internal state if uncontrolled
     if (!isControlled) {
@@ -1965,11 +2438,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
 
   // Toggle history collapse
   const toggleHistoryCollapse = useCallback(() => {
-    setIsHistoryCollapsed((prev) => {
-      const next = !prev;
-      localStorage.setItem('ai-agent-panel-history-collapsed', String(next));
-      return next;
-    });
+    setIsHistoryCollapsed((prev) => !prev);
   }, []);
 
   // Panel classes
@@ -2055,38 +2524,23 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
                 variant={agent.id === currentAgentId ? 'secondary' : 'ghost'}
                 size="icon"
                 title={agent.name}
-                onClick={() => {
-                  // Expand panel in controlled or uncontrolled mode
-                  if (!isControlled) {
-                    setUncontrolledIsCollapsed(false);
-                  }
-                  onCollapsedChange?.(false);
-                  if (hasActiveConversation && activeConvForAgent) {
-                    // Switch to the existing conversation
-                    setCurrentConversationId(activeConvForAgent.conversationId);
-                    setCurrentAgentId(agent.id);
-                    if (onConversationChange) {
-                      onConversationChange(activeConvForAgent.conversationId);
+                  onClick={() => {
+                    // Expand panel in controlled or uncontrolled mode
+                    if (!isControlled) {
+                      setUncontrolledIsCollapsed(false);
                     }
-                  } else {
-                    // Start a new conversation with this agent
-                    const tempId = `new-${Date.now()}`;
-                    setActiveConversations(prev => {
-                      const next = new Map(prev);
-                      next.set(tempId, {
-                        conversationId: tempId,
-                        stableKey: tempId, // Stable key never changes
-                        agentId: agent.id,
-                        history: {},
-                        isLoading: false,
-                        title: 'New conversation',
-                      });
-                      return next;
-                    });
-                    setCurrentConversationId(tempId);
-                    setCurrentAgentId(agent.id);
-                  }
-                }}
+                    onCollapsedChange?.(false);
+                    if (hasActiveConversation && activeConvForAgent) {
+                      // Switch to the existing conversation
+                      setCurrentAgentId(agent.id);
+                      commitConversationSelection(activeConvForAgent.conversationId, true);
+                    } else {
+                      // Start a new conversation with this agent
+                      const tempId = createDraftConversation(agent.id);
+                      commitConversationSelection(tempId, true);
+                      setCurrentAgentId(agent.id);
+                    }
+                  }}
                 className={`ai-agent-panel__agent-icon ${hasActiveConversation ? 'ai-agent-panel__agent-icon--active' : ''}`}
               >
                 {agent.avatarUrl ? (
@@ -2184,27 +2638,12 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
                   onClick={() => {
                     if (hasActiveConversation && activeConvForAgent) {
                       // Switch to the existing conversation
-                      setCurrentConversationId(activeConvForAgent.conversationId);
                       setCurrentAgentId(agent.id);
-                      if (onConversationChange) {
-                        onConversationChange(activeConvForAgent.conversationId);
-                      }
+                      commitConversationSelection(activeConvForAgent.conversationId, true);
                     } else {
                       // Start a new conversation with this agent
-                      const tempId = `new-${Date.now()}`;
-                      setActiveConversations(prev => {
-                        const next = new Map(prev);
-                        next.set(tempId, {
-                          conversationId: tempId,
-                          stableKey: tempId, // Stable key never changes
-                          agentId: agent.id,
-                          history: {},
-                          isLoading: false,
-                          title: 'New conversation',
-                        });
-                        return next;
-                      });
-                      setCurrentConversationId(tempId);
+                      const tempId = createDraftConversation(agent.id);
+                      commitConversationSelection(tempId, true);
                       setCurrentAgentId(agent.id);
                     }
                   }}
@@ -2292,10 +2731,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
                       : ''
                   }`}
                   onClick={() => {
-                    setCurrentConversationId(activeConv.conversationId);
-                    if (onConversationChange) {
-                      onConversationChange(activeConv.conversationId);
-                    }
+                    commitConversationSelection(activeConv.conversationId, true);
                   }}
                 >
                   <div className="ai-agent-panel__conversation-content">
@@ -2353,12 +2789,12 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
                       {expandedSections[group.label] ? '▼' : '▶'}
                     </span>
                   </div>
-                  {expandedSections[group.label] && group.conversations.length > 0 && group.conversations.map((conv) => {
+                  {expandedSections[group.label] && group.conversations.length > 0 && group.conversations.map((conv, convIndex) => {
                     // Check if this conversation is already active
                     const isActive = activeConversations.has(conv.conversationId);
                     return (
                       <div
-                        key={conv.conversationId}
+                        key={`${group.label}-${conv.conversationId}-${convIndex}`}
                         className={`ai-agent-panel__conversation ${
                           currentConversationId === conv.conversationId
                             ? 'ai-agent-panel__conversation--current'
@@ -2411,7 +2847,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
         {/* Chat panels - one per active conversation, shown/hidden via CSS */}
         {activeConversationsList.map((activeConv) => (
           <ChatPanelWrapper
-            key={`${activeConv.stableKey}-${activeConv.agentId}`}
+            key={activeConv.stableKey}
             activeConv={activeConv}
             currentConversationId={currentConversationId}
             getAgent={getAgent}
@@ -2442,6 +2878,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
             disabledSectionIds={currentDisabledSections}
             onToggleSection={handleContextSectionToggle}
             onConversationCreated={handleConversationCreated}
+            onBeforeSend={onBeforeSend}
             conversationInitialPrompt={activeConv.conversationInitialPrompt}
             cssUrl={cssUrl}
             markdownClass={markdownClass}
@@ -2455,10 +2892,14 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
             showCallToAction={showCallToAction}
             callToActionButtonText={callToActionButtonText}
             callToActionEmailAddress={callToActionEmailAddress}
-            callToActionEmailSubject={callToActionEmailSubject}
-            customerEmailCaptureMode={customerEmailCaptureMode}
-            customerEmailCapturePlaceholder={customerEmailCapturePlaceholder}
-          />
+          callToActionEmailSubject={callToActionEmailSubject}
+          customerEmailCaptureMode={customerEmailCaptureMode}
+          customerEmailCapturePlaceholder={customerEmailCapturePlaceholder}
+          resolveMcpAuthHeaders={resolveMcpAuthHeaders}
+          localToolExecutors={localToolExecutors}
+          traceContextMode={traceContextMode}
+          autoApproveTools={autoApproveTools}
+        />
         ))}
         
         {/* Conversation loading overlay */}
@@ -2520,4 +2961,3 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
 AIAgentPanel.displayName = 'AIAgentPanel';
 
 export default AIAgentPanel;
-