Agent/examples/process_pipeline/ui/scratchpad.js

function renderStructuredData(items, type) {
    if (!items || items.length === 0) {
        return `<div style="color:var(--text-muted); padding: 1rem;">暂无${type === 'workflow' ? '工序' : '能力'}数据</div>`;
    }
    
    let html = '';
    items.forEach((item, idx) => {
        let title = item.method || item.name || (type === 'workflow' ? '工作流' : `节点 ${idx + 1}`);
        
        // Unstructured what tags
        let unstructTags = '';
        if (item.unstructured_what && Array.isArray(item.unstructured_what)) {
            unstructTags = item.unstructured_what.map(t => `<span class="unstruct-badge">${t}</span>`).join('');
        }
        
        html += `<div class="structured-card">
            <div class="structured-card-title-row" style="display:flex; align-items:center; gap: 8px; margin-bottom: 1rem;">
                <div class="structured-card-title" style="margin:0;">${title}</div>
                ${unstructTags}
            </div>
        `;
        
        // Render apply_to or apply_to_draft
        const applyTo = item.apply_to_draft || item.apply_to;
        if (applyTo && typeof applyTo === 'object' && Object.keys(applyTo).length > 0) {
            html += `<div class="structured-row">
                <div class="structured-label">apply_to</div>
                <div class="structured-value" style="display:flex; flex-direction:column; gap:6px;">`;
            
            Object.entries(applyTo).forEach(([k, v]) => {
                if (Array.isArray(v) && v.length > 0) {
                    html += `<div class="apply-to-subrow">
                        <span class="apply-to-key-badge">${k}</span>
                        <div class="apply-to-values">`;
                    v.forEach(path => {
                        // split path to style the leaf node
                        const parts = path.split('/');
                        const leaf = parts.pop();
                        const prefix = parts.length > 0 ? parts.join('/') + '/' : '';
                        html += `<span class="apply-to-path-item">
                            ${prefix ? `<span class="apply-to-path-prefix">${prefix}</span>` : ''}
                            <span class="apply-to-path-leaf">${leaf}</span>
                        </span>`;
                    });
                    html += `</div></div>`;
                }
            });
            html += `</div></div>`;
        }
        
        // Render stage
        if (item.stage) {
            let stages = Array.isArray(item.stage) ? item.stage : [item.stage];
            if (stages.length > 0) {
                html += `<div class="structured-row">
                    <div class="structured-label">stage</div>
                    <div class="structured-value">`;
                stages.forEach(st => {
                    const stageUpper = st.toUpperCase();
                    const stageClass = stageUpper === 'GENERATE' ? 'stage-blue' : 'stage-purple';
                    html += `<span class="structured-badge ${stageClass}">${stageUpper}</span>`;
                });
                html += `</div></div>`;
            }
        }
        
        // Render effects
        if (item.effects && Array.isArray(item.effects) && item.effects.length > 0) {
            html += `<div class="structured-row">
                <div class="structured-label">effects</div>
                <div class="structured-value">
                    <ul class="effects-list">
                        ${item.effects.map(li => `<li>${li.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</li>`).join('')}
                    </ul>
                </div>
            </div>`;
        }
        
        // Render body
        if (item.body && typeof item.body === 'string') {
            html += `<div class="structured-row">
                <div class="structured-label">body</div>
                <div class="structured-value">${item.body.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>
            </div>`;
        }
        
        // Render steps array specially
        if (item.steps && Array.isArray(item.steps)) {
            html += `<div class="structured-row">
                <div class="structured-label">steps</div>
                <div class="structured-value">
                    <div class="steps-container">`;
            item.steps.forEach((step, stepIdx) => {
                const stepTitle = step.method || step.description || `步骤 ${step.order || stepIdx + 1}`;
                html += `
                    <div class="step-item">
                        <div class="step-header">
                            <span class="step-number">${step.order || stepIdx + 1}</span>
                            <span class="step-title">${stepTitle.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</span>
                        </div>
                        <div class="step-body">
                            ${step.body ? step.body.replace(/</g, '&lt;').replace(/>/g, '&gt;') : ''}
                        </div>
                        ${step.tools && step.tools.length > 0 ? `<div class="step-tools">
                            ${step.tools.map(t => `<span class="structured-badge tool-badge">${t}</span>`).join('')}
                        </div>` : ''}
                    </div>
                `;
            });
            html += `</div></div></div>`;
        }
        
        // Helper for inputs/outputs
        const renderDataObjList = (list) => {
            return list.map(io => {
                const dt = io.data_type || '未知';
                const desc = io.description || '';
                return `<div class="io-item"><span class="data-type-badge">${dt}</span><span class="io-desc">${desc}</span></div>`;
            }).join('');
        };
        
        // Render inputs
        if (item.inputs && Array.isArray(item.inputs) && item.inputs.length > 0) {
            html += `<div class="structured-row">
                <div class="structured-label">inputs</div>
                <div class="structured-value" style="display:flex; flex-direction:column; gap:4px;">
                    ${renderDataObjList(item.inputs)}
                </div>
            </div>`;
        } else if (item.inputs && typeof item.inputs === 'object' && Object.keys(item.inputs).length > 0 && !Array.isArray(item.inputs)) {
            // Fallback for old schema
            html += `<div class="structured-row"><div class="structured-label">inputs</div><div class="structured-value">`;
            Object.entries(item.inputs).forEach(([k, v]) => {
                html += `<div class="io-item"><span class="data-type-badge">${k}</span><span class="io-desc">${v}</span></div>`;
            });
            html += `</div></div>`;
        }
        
        // Render outputs
        if (item.outputs && Array.isArray(item.outputs) && item.outputs.length > 0) {
            html += `<div class="structured-row">
                <div class="structured-label">outputs</div>
                <div class="structured-value" style="display:flex; flex-direction:column; gap:4px;">
                    ${renderDataObjList(item.outputs)}
                </div>
            </div>`;
        } else if (item.outputs && typeof item.outputs === 'object' && Object.keys(item.outputs).length > 0 && !Array.isArray(item.outputs)) {
            // Fallback for old schema
            html += `<div class="structured-row"><div class="structured-label">outputs</div><div class="structured-value">`;
            Object.entries(item.outputs).forEach(([k, v]) => {
                html += `<div class="io-item"><span class="data-type-badge">${k}</span><span class="io-desc">${v}</span></div>`;
            });
            html += `</div></div>`;
        }
        
        // Render tools
        if (item.tools && Array.isArray(item.tools) && item.tools.length > 0) {
            html += `<div class="structured-row">
                <div class="structured-label">tools</div>
                <div class="structured-value">
                    ${item.tools.map(t => `<span class="structured-badge tool-badge">${t}</span>`).join('')}
                </div>
            </div>`;
        }
        
        html += `</div>`;
    });
    
    return html;
}