langgraph-agent-common 2.0.0__py3-none-any.whl

langgraph_a2a_api/resources/static/js/app.js

@@ -0,0 +1,896 @@
+(function() {
+  'use strict';
+
+  const state = {
+    contexts: {},
+    currentContextId: null,
+    currentTaskId: null,
+    isSending: false,
+    hitlState: null,
+    selectedHitlType: null,
+    abortController: null,
+  };
+
+  const elements = {};
+
+  function init() {
+    cacheElements();
+    bindEvents();
+    setApiBaseUrl();
+    createNewContext();
+    loadState();
+  }
+
+  function cacheElements() {
+    elements.contextSelect = document.getElementById('contextSelect');
+    elements.newContextBtn = document.getElementById('newContextBtn');
+    elements.contextIdInput = document.getElementById('contextIdInput');
+    elements.taskIdInput = document.getElementById('taskIdInput');
+    elements.messageMetaInput = document.getElementById('messageMetaInput');
+    elements.taskMetaInput = document.getElementById('taskMetaInput');
+    elements.configInput = document.getElementById('configInput');
+    elements.validateMetaBtn = document.getElementById('validateMetaBtn');
+    elements.validateTaskMetaBtn = document.getElementById('validateTaskMetaBtn');
+    elements.validateConfigBtn = document.getElementById('validateConfigBtn');
+    elements.metaStatus = document.getElementById('metaStatus');
+    elements.taskMetaStatus = document.getElementById('taskMetaStatus');
+    elements.configStatus = document.getElementById('configStatus');
+    elements.apiBaseUrl = document.getElementById('apiBaseUrl');
+    elements.chatMessages = document.getElementById('chatMessages');
+    elements.messageInput = document.getElementById('messageInput');
+    elements.sendBtn = document.getElementById('sendBtn');
+    elements.clearChatBtn = document.getElementById('clearChatBtn');
+    elements.exportChatBtn = document.getElementById('exportChatBtn');
+    elements.hitlPanel = document.getElementById('hitlPanel');
+    elements.hitlPartsJson = document.getElementById('hitlPartsJson');
+    elements.hitlResponseForm = document.getElementById('hitlResponseForm');
+    elements.hitlResponseInput = document.getElementById('hitlResponseInput');
+    elements.hitlEditSection = document.getElementById('hitlEditSection');
+    elements.hitlEditInput = document.getElementById('hitlEditInput');
+    elements.submitHitlBtn = document.getElementById('submitHitlBtn');
+    elements.closeHitlBtn = document.getElementById('closeHitlBtn');
+  }
+
+  function bindEvents() {
+    elements.newContextBtn.addEventListener('click', createNewContext);
+    elements.contextSelect.addEventListener('change', switchContext);
+    elements.validateMetaBtn.addEventListener('click', () => validateJson('messageMeta'));
+    elements.validateTaskMetaBtn.addEventListener('click', () => validateJson('taskMeta'));
+    elements.validateConfigBtn.addEventListener('click', () => validateJson('config'));
+    elements.sendBtn.addEventListener('click', handleSendBtnClick);
+    elements.messageInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSendBtnClick();
+      }
+    });
+    elements.clearChatBtn.addEventListener('click', clearChat);
+    elements.exportChatBtn.addEventListener('click', exportChat);
+    elements.closeHitlBtn.addEventListener('click', () => elements.hitlPanel.classList.add('hidden'));
+
+    document.querySelectorAll('.hitl-btn').forEach(btn => {
+      btn.addEventListener('click', () => selectHitlType(btn.dataset.type));
+    });
+    elements.submitHitlBtn.addEventListener('click', submitHitlResponse);
+  }
+
+  function setApiBaseUrl() {
+    const protocol = window.location.protocol;
+    const host = window.location.host;
+    const basePath = window.location.pathname.replace(/\/chat\/?$/, '');
+    elements.apiBaseUrl.value = `${protocol}//${host}${basePath}`;
+  }
+
+  function getBaseUrl() {
+    return elements.apiBaseUrl.value.replace(/\/$/, '');
+  }
+
+  function generateId() {
+    return crypto.randomUUID ? crypto.randomUUID() : 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+      const r = Math.random() * 16 | 0;
+      return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+    });
+  }
+
+  function createNewContext() {
+    const contextId = generateId();
+    state.contexts[contextId] = {
+      id: contextId,
+      taskId: null,
+      messages: [],
+      createdAt: new Date().toISOString(),
+    };
+    state.currentContextId = contextId;
+    state.currentTaskId = null;
+    updateContextSelector();
+    updateContextDisplay();
+    clearChat();
+  }
+
+  function switchContext() {
+    const contextId = elements.contextSelect.value;
+    if (contextId && state.contexts[contextId]) {
+      state.currentContextId = contextId;
+      state.currentTaskId = state.contexts[contextId].taskId;
+      updateContextDisplay();
+      renderChatHistory();
+      elements.hitlPanel.classList.add('hidden');
+      state.hitlState = null;
+    }
+  }
+
+  function updateContextSelector() {
+    elements.contextSelect.innerHTML = '';
+    Object.keys(state.contexts).sort((a, b) => {
+      return new Date(state.contexts[b].createdAt) - new Date(state.contexts[a].createdAt);
+    }).forEach(id => {
+      const option = document.createElement('option');
+      option.value = id;
+      const ctx = state.contexts[id];
+      const msgCount = ctx.messages.length;
+      option.textContent = `${id.slice(0, 8)}... (${msgCount} msgs)`;
+      if (id === state.currentContextId) {
+        option.selected = true;
+      }
+      elements.contextSelect.appendChild(option);
+    });
+  }
+
+  function updateContextDisplay() {
+    elements.contextIdInput.value = state.currentContextId || '';
+    elements.taskIdInput.value = state.currentTaskId || '';
+  }
+
+  function getCurrentContext() {
+    return state.contexts[state.currentContextId];
+  }
+
+  function validateJson(type) {
+    let input, statusEl;
+    if (type === 'messageMeta') {
+      input = elements.messageMetaInput.value.trim();
+      statusEl = elements.metaStatus;
+    } else if (type === 'taskMeta') {
+      input = elements.taskMetaInput.value.trim();
+      statusEl = elements.taskMetaStatus;
+    } else {
+      input = elements.configInput.value.trim();
+      statusEl = elements.configStatus;
+    }
+
+    if (!input) {
+      statusEl.textContent = 'empty';
+      statusEl.className = 'status-indicator valid';
+      return true;
+    }
+
+    try {
+      JSON.parse(input);
+      statusEl.textContent = 'valid';
+      statusEl.className = 'status-indicator valid';
+      return true;
+    } catch (e) {
+      statusEl.textContent = 'invalid';
+      statusEl.className = 'status-indicator invalid';
+      return false;
+    }
+  }
+
+  function getJsonInput(type) {
+    let input;
+    if (type === 'messageMeta') {
+      input = elements.messageMetaInput.value.trim();
+    } else if (type === 'taskMeta') {
+      input = elements.taskMetaInput.value.trim();
+    } else {
+      input = elements.configInput.value.trim();
+    }
+    if (!input) return {};
+    try {
+      return JSON.parse(input);
+    } catch {
+      return null;
+    }
+  }
+
+  function handleSendBtnClick() {
+    if (state.isSending || state.hitlState) {
+      cancelTask();
+    } else {
+      sendMessage();
+    }
+  }
+
+  function setBtnCancel(active) {
+    if (active) {
+      elements.sendBtn.textContent = 'Cancel';
+      elements.sendBtn.classList.add('btn-cancel');
+      elements.sendBtn.disabled = false;
+    } else {
+      elements.sendBtn.textContent = 'Send';
+      elements.sendBtn.classList.remove('btn-cancel');
+      elements.sendBtn.disabled = false;
+    }
+  }
+
+  async function cancelTask() {
+    const taskId = state.currentTaskId || state.hitlState?.id;
+    if (state.abortController) {
+      state.abortController.abort();
+      state.abortController = null;
+    }
+
+    if (taskId) {
+      try {
+        await fetch(`${getBaseUrl()}/tasks/${taskId}:cancel`, {
+          method: 'POST',
+          headers: { 'X-A2A-Protocol-Version': '1.0' },
+        });
+      } catch (e) { /* ignore */ }
+    }
+
+    removeLoadingMessage();
+    elements.hitlPanel.classList.add('hidden');
+    state.hitlState = null;
+    state.isSending = false;
+    state.currentTaskId = null;
+    const context = getCurrentContext();
+    if (context) context.taskId = null;
+    updateContextDisplay();
+    setBtnCancel(false);
+    addSystemMessage('Task canceled');
+  }
+
+  async function consumeSSE(response) {
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    let lastEvent = null;
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+
+      const parts = buffer.split(/\r?\n\r?\n/);
+      buffer = parts.pop();
+
+      for (const part of parts) {
+        lastEvent = parseSSEPart(part, lastEvent);
+      }
+    }
+    // Process any remaining buffer
+    if (buffer.trim()) {
+      lastEvent = parseSSEPart(buffer, lastEvent);
+    }
+    return lastEvent;
+  }
+
+  function parseSSEPart(part, lastEvent) {
+    const lines = part.split(/\r?\n/);
+    let eventType = 'message';
+    let data = '';
+    for (const line of lines) {
+      if (line.startsWith('event:')) eventType = line.slice(6).trim();
+      else if (line.startsWith('data:')) data += (data ? '\n' : '') + line.slice(5).trim();
+    }
+    if (!data) return lastEvent;
+    try {
+      const event = JSON.parse(data);
+      if (eventType === 'error') {
+        addErrorMessage(`Stream error: ${JSON.stringify(event)}`);
+        return lastEvent;
+      }
+      // Extract taskId as early as possible for cancel support
+      const taskId = event.statusUpdate?.taskId || event.task?.id;
+      if (taskId && !state.currentTaskId) {
+        state.currentTaskId = taskId;
+        const context = getCurrentContext();
+        if (context) context.taskId = taskId;
+      }
+      const status = event.statusUpdate?.status || event.task?.status;
+      if (status?.message?.parts) {
+        const displayParts = status.message.parts.filter(p => !(p.data && p.data.type === 'tool_result') && !p.url && !p.raw);
+        const text = displayParts.map(p => p.text || (p.data && JSON.stringify(p.data, null, 2)) || '').filter(Boolean).join('\n');
+        if (text) updateLoadingMessage(text);
+      }
+      return event;
+    } catch (e) { return lastEvent; }
+  }
+
+  async function sendMessage() {
+    if (state.isSending) return;
+
+    const text = elements.messageInput.value.trim();
+    if (!text) return;
+
+    const messageMeta = getJsonInput('messageMeta');
+    if (messageMeta === null) {
+      addSystemMessage('Invalid message metadata JSON');
+      return;
+    }
+
+    const config = getJsonInput('config');
+    if (config === null) {
+      addSystemMessage('Invalid configuration JSON');
+      return;
+    }
+
+    state.isSending = true;
+    state.abortController = new AbortController();
+    setBtnCancel(true);
+    elements.messageInput.value = '';
+
+    addUserMessage(text);
+
+    const context = getCurrentContext();
+    const messageId = generateId();
+
+    const messagePayload = {
+      messageId: messageId,
+      contextId: state.currentContextId,
+      role: 'ROLE_USER',
+      parts: [{ text: text }],
+      metadata: messageMeta,
+    };
+
+    if (state.currentTaskId) {
+      messagePayload.taskId = state.currentTaskId;
+    }
+
+    const requestBody = {
+      message: messagePayload,
+      configuration: config,
+      metadata: getJsonInput('taskMeta') || {},
+    };
+
+    addLoadingMessage();
+
+    try {
+      const response = await fetch(`${getBaseUrl()}/message:stream`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-A2A-Protocol-Version': '1.0',
+        },
+        body: JSON.stringify(requestBody),
+        signal: state.abortController.signal,
+      });
+
+      if (!response.ok) {
+        const errText = await response.text();
+        removeLoadingMessage();
+        throw new Error(`HTTP ${response.status}: ${errText}`);
+      }
+
+      const lastEvent = await consumeSSE(response);
+
+      removeLoadingMessage();
+
+      if (!lastEvent) {
+        throw new Error('No events received from stream');
+      }
+
+      handleResponse(lastEvent, text);
+    } catch (error) {
+      removeLoadingMessage();
+      if (error.name === 'AbortError') return;
+      addErrorMessage(`Request failed: ${error.message}`);
+      state.isSending = false;
+      setBtnCancel(false);
+    }
+  }
+
+  function handleResponse(data, userText) {
+    const context = getCurrentContext();
+
+    let task = data.task;
+    let message = data.message;
+
+    // Handle streaming statusUpdate format
+    if (!task && !message && data.statusUpdate) {
+      task = { id: data.statusUpdate.taskId, status: data.statusUpdate.status };
+    }
+
+    if (!message && task?.status?.message) {
+      message = task.status.message;
+    }
+
+    if (!task && message) {
+      task = {
+        id: message.taskId || generateId(),
+        contextId: message.contextId || state.currentContextId,
+        status: { state: 'TASK_STATE_COMPLETED', message: message },
+        artifacts: [],
+      };
+    }
+
+    if (!task) {
+      addSystemMessage('No task or message in response');
+      state.isSending = false;
+      setBtnCancel(false);
+      return;
+    }
+
+    const taskState = task.status?.state || 'TASK_STATE_UNKNOWN';
+    const statusMessage = task.status?.message;
+
+    if (statusMessage && statusMessage.role === 'ROLE_AGENT' && statusMessage.parts) {
+      addAgentMessageFromParts(statusMessage.parts);
+    }
+
+    addDebugPayload(task.id);
+
+    if (taskState === 'TASK_STATE_INPUT_REQUIRED') {
+      state.currentTaskId = task.id;
+      context.taskId = task.id;
+      showHitlPanel(task);
+    } else {
+      state.currentTaskId = null;
+      context.taskId = null;
+      elements.hitlPanel.classList.add('hidden');
+      state.hitlState = null;
+    }
+
+    updateContextDisplay();
+
+    if (taskState === 'TASK_STATE_COMPLETED') {
+      addSystemMessage(`Task completed: ${task.id.slice(0, 8)}`);
+    } else if (taskState === 'TASK_STATE_FAILED') {
+      addSystemMessage(`Task failed: ${task.id.slice(0, 8)}`);
+    }
+
+    state.isSending = false;
+    setBtnCancel(!!state.hitlState);
+  }
+
+  function showHitlPanel(task) {
+    state.hitlState = task;
+    state.selectedHitlType = null;
+
+    const parts = task.status?.message?.parts || task.artifacts?.flatMap(a => a.parts) || [];
+    const interruptParts = parts.filter(p => p.data && p.data.hitl_id);
+
+    state.hitlState.interruptParts = interruptParts;
+    state.hitlState.currentInterruptIndex = 0;
+
+    elements.hitlPartsJson.textContent = JSON.stringify(parts, null, 2);
+
+    if (interruptParts.length > 0) {
+      updateInterruptDisplay();
+    }
+
+    elements.hitlPanel.classList.remove('hidden');
+    elements.hitlResponseForm.classList.add('hidden');
+    elements.submitHitlBtn.classList.add('hidden');
+    elements.hitlEditSection.classList.add('hidden');
+
+    document.querySelectorAll('.hitl-btn').forEach(btn => btn.classList.remove('active'));
+  }
+
+  function updateInterruptDisplay() {
+    const interruptParts = state.hitlState.interruptParts;
+    const currentIndex = state.hitlState.currentInterruptIndex;
+
+    if (interruptParts.length === 0) return;
+
+    const currentPart = interruptParts[currentIndex];
+    const hitlId = currentPart.data.hitl_id;
+    const interruptValue = currentPart.data.content;
+
+    let interruptInfo = `Interrupt ${currentIndex + 1}/${interruptParts.length}\n`;
+    interruptInfo += `HITL ID: ${hitlId}\n\n`;
+    interruptInfo += JSON.stringify(interruptValue, null, 2);
+
+    elements.hitlPartsJson.textContent = interruptInfo;
+
+    const navHtml = `
+      <div class="hitl-nav">
+        <button class="hitl-nav-btn" id="prevInterruptBtn" ${currentIndex === 0 ? 'disabled' : ''}>Previous</button>
+        <span class="hitl-nav-info">${currentIndex + 1} of ${interruptParts.length}</span>
+        <button class="hitl-nav-btn" id="nextInterruptBtn" ${currentIndex === interruptParts.length - 1 ? 'disabled' : ''}>Next</button>
+      </div>
+    `;
+
+    const existingNav = elements.hitlPanel.querySelector('.hitl-nav');
+    if (existingNav) {
+      existingNav.outerHTML = navHtml;
+    } else {
+      const hitlContent = elements.hitlPanel.querySelector('.hitl-content');
+      hitlContent.insertAdjacentHTML('afterbegin', navHtml);
+    }
+
+    document.getElementById('prevInterruptBtn')?.addEventListener('click', () => {
+      if (state.hitlState.currentInterruptIndex > 0) {
+        state.hitlState.currentInterruptIndex--;
+        updateInterruptDisplay();
+      }
+    });
+
+    document.getElementById('nextInterruptBtn')?.addEventListener('click', () => {
+      if (state.hitlState.currentInterruptIndex < interruptParts.length - 1) {
+        state.hitlState.currentInterruptIndex++;
+        updateInterruptDisplay();
+      }
+    });
+  }
+
+  function selectHitlType(type) {
+    state.selectedHitlType = type;
+    document.querySelectorAll('.hitl-btn').forEach(btn => {
+      btn.classList.toggle('active', btn.dataset.type === type);
+    });
+
+    elements.hitlResponseForm.classList.remove('hidden');
+    elements.submitHitlBtn.classList.remove('hidden');
+
+    if (type === 'approve') {
+      elements.hitlResponseInput.value = '';
+      elements.hitlResponseInput.placeholder = 'Optional message for approval';
+      elements.hitlEditSection.classList.add('hidden');
+    } else if (type === 'reject') {
+      elements.hitlResponseInput.placeholder = 'Rejection reason...';
+      elements.hitlEditSection.classList.add('hidden');
+    } else if (type === 'respond') {
+      elements.hitlResponseInput.placeholder = 'Response message...';
+      elements.hitlEditSection.classList.add('hidden');
+    }
+  }
+
+  function submitHitlResponse() {
+    if (!state.selectedHitlType || !state.hitlState) return;
+
+    const message = elements.hitlResponseInput.value.trim();
+    const interruptParts = state.hitlState.interruptParts || [];
+
+    if (interruptParts.length === 0) {
+      addSystemMessage('No interrupt parts found');
+      return;
+    }
+
+    const currentIndex = state.hitlState.currentInterruptIndex || 0;
+    const currentPart = interruptParts[currentIndex];
+    const hitlId = currentPart.data.hitl_id;
+
+    let decision;
+
+    if (state.selectedHitlType === 'approve') {
+      decision = { type: 'approve' };
+    } else if (state.selectedHitlType === 'reject') {
+      decision = { type: 'reject' };
+      if (message) {
+        decision.message = message;
+      }
+    } else if (state.selectedHitlType === 'respond') {
+      if (!message) {
+        addSystemMessage('Response message is required');
+        return;
+      }
+      decision = { type: 'respond', message: message };
+    }
+
+    const hitlResponse = {
+      hitl_id: hitlId,
+      decision: decision
+    };
+
+    const messageMeta = getJsonInput('messageMeta') || {};
+    const config = getJsonInput('config') || {};
+
+    const taskId = state.hitlState.id;
+    const messageId = generateId();
+
+    const requestBody = {
+      message: {
+        messageId: messageId,
+        contextId: state.currentContextId,
+        taskId: taskId,
+        role: 'ROLE_USER',
+        parts: [{
+          data: hitlResponse,
+        }],
+        metadata: messageMeta,
+      },
+      configuration: config,
+      metadata: getJsonInput('taskMeta') || {},
+    };
+
+    elements.hitlPanel.classList.add('hidden');
+    state.hitlState = null;
+    state.selectedHitlType = null;
+
+    addUserMessage(`[HITL Response] HITL ID: ${hitlId}, ${JSON.stringify(decision)}`);
+    addLoadingMessage();
+
+    state.isSending = true;
+    state.abortController = new AbortController();
+    setBtnCancel(true);
+
+    (async () => {
+      try {
+        const response = await fetch(`${getBaseUrl()}/message:stream`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-A2A-Protocol-Version': '1.0',
+          },
+          body: JSON.stringify(requestBody),
+          signal: state.abortController.signal,
+        });
+
+        if (!response.ok) {
+          const errText = await response.text();
+          removeLoadingMessage();
+          throw new Error(`HTTP ${response.status}: ${errText}`);
+        }
+
+        const lastEvent = await consumeSSE(response);
+        removeLoadingMessage();
+
+        if (!lastEvent) {
+          throw new Error('No events received from stream');
+        }
+
+        handleResponse(lastEvent, '[HITL Response]');
+      } catch (error) {
+        removeLoadingMessage();
+        if (error.name === 'AbortError') return;
+        addErrorMessage(`HITL request failed: ${error.message}`);
+        state.isSending = false;
+        setBtnCancel(false);
+      }
+    })();
+  }
+
+  function addUserMessage(text) {
+    const context = getCurrentContext();
+    context.messages.push({ role: 'user', content: text, timestamp: new Date().toISOString() });
+    appendMessageToChat('user', text);
+    updateContextSelector();
+  }
+
+  function addAgentMessageFromParts(parts) {
+    const context = getCurrentContext();
+    let displayText = '';
+    let hasNonText = false;
+
+    parts.forEach(part => {
+      if (part.text) {
+        displayText += part.text;
+      } else if (part.data) {
+        hasNonText = true;
+        displayText += '\n[Data]: ' + JSON.stringify(part.data, null, 2);
+      } else if (part.raw) {
+        hasNonText = true;
+        displayText += '\n[Raw data]';
+      } else if (part.url) {
+        hasNonText = true;
+        displayText += '\n[URL]: ' + part.url;
+      }
+    });
+
+    if (!displayText) {
+      displayText = JSON.stringify(parts, null, 2);
+      hasNonText = true;
+    }
+
+    context.messages.push({ role: 'agent', content: displayText, parts: parts, timestamp: new Date().toISOString() });
+    appendMessageToChat('agent', displayText, hasNonText, parts);
+    updateContextSelector();
+  }
+
+  function addSystemMessage(text) {
+    const context = getCurrentContext();
+    context.messages.push({ role: 'system', content: text, timestamp: new Date().toISOString() });
+    appendMessageToChat('system', text);
+  }
+
+  function addErrorMessage(text) {
+    appendMessageToChat('error', text);
+  }
+
+  function addLoadingMessage() {
+    const div = document.createElement('div');
+    div.className = 'message agent loading';
+    div.id = 'loadingMsg';
+    div.innerHTML = '<div class="message-content typing-indicator">Thinking</div>';
+    elements.chatMessages.appendChild(div);
+    scrollToBottom();
+  }
+
+  function updateLoadingMessage(text) {
+    const loading = document.getElementById('loadingMsg');
+    if (!loading) return;
+    const content = loading.querySelector('.message-content');
+    if (content) {
+      content.classList.remove('typing-indicator');
+      content.textContent += (content.textContent ? '\n' : '') + text;
+      scrollToBottom();
+    }
+  }
+
+  function removeLoadingMessage() {
+    const loading = document.getElementById('loadingMsg');
+    if (!loading) return;
+    const content = loading.querySelector('.message-content');
+    if (content && content.textContent && !content.classList.contains('typing-indicator')) {
+      // Keep as persistent thinking message
+      loading.removeAttribute('id');
+      loading.classList.remove('loading');
+      loading.classList.add('thinking');
+      const header = document.createElement('div');
+      header.className = 'message-header';
+      header.textContent = `THINKING - ${new Date().toLocaleTimeString()}`;
+      loading.insertBefore(header, content);
+    } else {
+      loading.remove();
+    }
+  }
+
+  function appendMessageToChat(role, content, isJson = false, parts = null) {
+    const div = document.createElement('div');
+    div.className = `message ${role}`;
+
+    const header = document.createElement('div');
+    header.className = 'message-header';
+    header.textContent = `${role.toUpperCase()} - ${new Date().toLocaleTimeString()}`;
+    div.appendChild(header);
+
+    const contentDiv = document.createElement('div');
+    contentDiv.className = `message-content ${isJson ? 'json-content' : ''}`;
+    contentDiv.textContent = content;
+    div.appendChild(contentDiv);
+
+    if (parts && parts.length > 0) {
+      const toggleBtn = document.createElement('button');
+      toggleBtn.className = 'btn-small';
+      toggleBtn.textContent = 'Show Parts JSON';
+      toggleBtn.style.marginTop = '8px';
+      toggleBtn.addEventListener('click', () => {
+        if (toggleBtn.textContent === 'Show Parts JSON') {
+          const jsonPre = document.createElement('pre');
+          jsonPre.className = 'json-display';
+          jsonPre.style.marginTop = '8px';
+          jsonPre.textContent = JSON.stringify(parts, null, 2);
+          div.appendChild(jsonPre);
+          toggleBtn.textContent = 'Hide Parts JSON';
+        } else {
+          const jsonPre = div.querySelector('.json-display');
+          if (jsonPre) jsonPre.remove();
+          toggleBtn.textContent = 'Show Parts JSON';
+        }
+      });
+      div.appendChild(toggleBtn);
+    }
+
+    elements.chatMessages.appendChild(div);
+    scrollToBottom();
+  }
+
+  function renderChatHistory() {
+    elements.chatMessages.innerHTML = '';
+    const context = getCurrentContext();
+    if (!context) return;
+
+    context.messages.forEach(msg => {
+      if (msg.role === 'agent' && msg.parts) {
+        appendMessageToChat('agent', msg.content, true, msg.parts);
+      } else {
+        appendMessageToChat(msg.role, msg.content);
+      }
+    });
+  }
+
+  function clearChat() {
+    const context = getCurrentContext();
+    if (context) {
+      context.messages = [];
+      updateContextSelector();
+    }
+    elements.chatMessages.innerHTML = '';
+  }
+
+  function exportChat() {
+    const context = getCurrentContext();
+    if (!context) return;
+
+    const exportData = {
+      contextId: state.currentContextId,
+      taskId: state.currentTaskId,
+      messages: context.messages,
+      exportedAt: new Date().toISOString(),
+    };
+
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `chat-${state.currentContextId.slice(0, 8)}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  function addDebugPayload(taskId) {
+    if (!taskId) return;
+    const div = document.createElement('div');
+    div.className = 'message system';
+
+    const toggleBtn = document.createElement('button');
+    toggleBtn.className = 'btn-small';
+    toggleBtn.textContent = '🔍 Show Task Detail';
+    toggleBtn.style.opacity = '0.5';
+    toggleBtn.style.fontSize = '11px';
+
+    toggleBtn.addEventListener('click', async () => {
+      if (toggleBtn.textContent === '🔍 Show Task Detail') {
+        try {
+          const resp = await fetch(`${getBaseUrl()}/tasks/${taskId}`, {
+            headers: { 'X-A2A-Protocol-Version': '1.0' },
+          });
+          const data = await resp.json();
+          const pre = document.createElement('pre');
+          pre.className = 'json-display';
+          pre.style.marginTop = '8px';
+          pre.style.maxHeight = '400px';
+          pre.style.overflow = 'auto';
+          pre.textContent = JSON.stringify(data, null, 2);
+          div.appendChild(pre);
+          toggleBtn.textContent = '🔍 Hide Task Detail';
+        } catch (e) {
+          addErrorMessage(`Failed to fetch task: ${e.message}`);
+        }
+      } else {
+        const pre = div.querySelector('.json-display');
+        if (pre) pre.remove();
+        toggleBtn.textContent = '🔍 Show Task Detail';
+      }
+      scrollToBottom();
+    });
+
+    div.appendChild(toggleBtn);
+    elements.chatMessages.appendChild(div);
+    scrollToBottom();
+  }
+
+  function scrollToBottom() {
+    elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
+  }
+
+  function loadState() {
+    try {
+      const saved = localStorage.getItem('a2a-chat-state');
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        if (parsed.contexts && Object.keys(parsed.contexts).length > 0) {
+          state.contexts = parsed.contexts;
+          state.currentContextId = parsed.currentContextId || Object.keys(state.contexts)[0];
+          state.currentTaskId = state.contexts[state.currentContextId]?.taskId || null;
+          updateContextSelector();
+          updateContextDisplay();
+          renderChatHistory();
+        }
+      }
+    } catch (e) {
+      console.warn('Failed to load saved state:', e);
+    }
+  }
+
+  function saveState() {
+    try {
+      localStorage.setItem('a2a-chat-state', JSON.stringify({
+        contexts: state.contexts,
+        currentContextId: state.currentContextId,
+      }));
+    } catch (e) {
+      console.warn('Failed to save state:', e);
+    }
+  }
+
+  setInterval(saveState, 5000);
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();