No tool invocations detected.
'; + return; + } + + events.forEach(event => { + const card = document.createElement('article'); + card.className = 'tool-card'; + const header = document.createElement('header'); + header.innerHTML = `${event.name}${event.status}`; + const body = document.createElement('pre'); + body.textContent = event.detail; + card.appendChild(header); + card.appendChild(body); + ui.toolEvents.appendChild(card); + }); +} + +function extractToolEvents(payload) { + const events = []; + + function visit(node) { + if (!node || typeof node !== 'object') return; + if (Array.isArray(node)) { + node.forEach(visit); + return; + } + + if (node.toolName || node.tool || node.name) { + const name = node.toolName || node.tool || node.name; + const input = node.input || node.args || node.arguments || node.payload; + const status = node.status || node.state || (node.success ? 'success' : 'invoked'); + events.push({ + name, + status: status || 'invoked', + detail: normaliseContent(input || node), + }); + } + + Object.values(node).forEach(visit); + } + + visit(payload); + return events; +} + +function handleCopyThreadId() { + if (!settings.threadId) return; + navigator.clipboard?.writeText(settings.threadId).then(() => { + setStatus('Thread ID copied', true); + setTimeout(() => setStatus('Idle'), 1500); + }); +} + +function handleCopyPayload() { + if (!ui.payloadView.textContent) return; + navigator.clipboard?.writeText(ui.payloadView.textContent).then(() => { + setStatus('Payload copied', true); + setTimeout(() => setStatus('Idle'), 1500); + }); +} + +function safeParseJson(value) { + if (!value || typeof value !== 'string') return null; + try { + return JSON.parse(value); + } catch (error) { + return null; + } +} + +function formatError(error) { + if (!error) return 'Unknown error'; + if (error instanceof Error) { + return `${error.name}: ${error.message}`; + } + if (typeof error === 'string') return error; + try { + return JSON.stringify(error, null, 2); + } catch (serializationError) { + return String(error); + } +} + +function setStatus(text, active = false, isError = false) { + ui.status.textContent = text; + ui.status.classList.toggle('active', active && !isError); + ui.status.classList.toggle('error', isError); +} + +function clearAttachments() { + state.attachments = []; + ui.attachmentList.innerHTML = ''; + ui.attachmentInput.value = ''; +} + +function handleAttachmentSelection(event) { + const files = Array.from(event.target.files || []); + if (!files.length) return; + Promise.all(files.map(materialiseFile)) + .then(results => { + state.attachments.push(...results); + renderAttachmentList(); + updatePayloadPreview(); + }) + .catch(error => { + console.error('Unable to read attachments', error); + setStatus('Attachment import failed', false, true); + setTimeout(() => setStatus('Idle'), 2000); + }); +} + +function materialiseFile(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = () => { + const base64 = reader.result?.toString().split(',').pop() || ''; + resolve({ + name: file.name, + type: file.type, + size: file.size, + lastModified: file.lastModified, + data: base64, + }); + }; + reader.onerror = () => reject(reader.error); + reader.readAsDataURL(file); + }); +} + +function renderAttachmentList() { + ui.attachmentList.innerHTML = ''; + if (!state.attachments.length) return; + state.attachments.forEach((attachment, index) => { + const badge = document.createElement('span'); + badge.className = 'badge'; + badge.textContent = `${attachment.name} (${formatBytes(attachment.size)})`; + badge.title = `${attachment.type || 'unknown'} • ${formatBytes(attachment.size)}`; + badge.dataset.index = String(index); + badge.addEventListener('click', () => { + state.attachments.splice(index, 1); + renderAttachmentList(); + updatePayloadPreview(); + }); + ui.attachmentList.appendChild(badge); + }); +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..25a00ef --- /dev/null +++ b/public/index.html @@ -0,0 +1,191 @@ + + + + + +Idle
+