components/output-viewer.js

class AgenticOutputViewer extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    static get observedAttributes() {
        return ['output'];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'output' && oldValue !== newValue) {
            this.render();
        }
    }

    render() {
        const output = this.getAttribute('output') ? JSON.parse(this.getAttribute('output')) : null;
        
        if (!output) {
            this.shadowRoot.innerHTML = `<div>No output available</div>`;
            return;
        }

        let content;
        
        if (output.type === 'markdown') {
            content = `
                <div class="markdown-viewer p-4 bg-gray-50 rounded-lg">
                    ${this.renderMarkdown(output.content)}
                </div>
            `;
        } else if (output.type === 'table') {
            content = `
                <div class="table-viewer overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                ${output.content.headers.map(header => `
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        ${header}
                                    </th>
                                `).join('')}
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            ${output.content.rows.map((row, rowIndex) => `
                                <tr class="${rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'}">
                                    ${row.map(cell => `
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            ${cell}
                                        </td>
                                    `).join('')}
                                </tr>
                            `).join('')}