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 || (item.action && item.action.description) || (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;
        const suggestApplyTo = item.apply_to_draft ? null : item.suggest_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;">`;

            const renderPathBadge = (path, highlight = false) => {
                const pathStr = typeof path === 'object' && path !== null
                    ? (path.element || path.category_path || path.path || '')
                    : String(path || '');
                if (!pathStr) return '';
                const parts = pathStr.split('/');
                const leaf = parts.pop();
                const prefix = parts.length > 0 ? parts.join('/') + '/' : '';
                const leafStyle = highlight ? 'background:#eff6ff; color:#2563eb; border:1px solid #bfdbfe;' : '';
                return `<span class="apply-to-path-item" ${highlight ? 'style="border: 2px dashed #94a3b8; background: transparent;"' : ''}>
                    ${prefix ? `<span class="apply-to-path-prefix">${prefix}</span>` : ''}
                    <span class="apply-to-path-leaf" style="${leafStyle}">${leaf}</span>
                </span>`;
            };
            
            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 => {
                        html += renderPathBadge(path);
                    });
                    html += `</div></div>`;
                }
            });
            if (typeof suggestApplyTo === 'string' && suggestApplyTo.trim()) {
                html += `<div class="apply-to-subrow">
                    <span class="apply-to-key-badge">最优</span>
                    <div class="apply-to-values">${renderPathBadge(suggestApplyTo, true)}</div>
                </div>`;
            }
            html += `</div></div>`;
        }

        if (item.action && typeof item.action === 'object' && (item.action.description || item.action.reasoning)) {
            const actionDescription = item.action.description ? String(item.action.description).replace(/</g, '&lt;').replace(/>/g, '&gt;') : '';
            const actionReasoning = item.action.reasoning ? String(item.action.reasoning).replace(/</g, '&lt;').replace(/>/g, '&gt;') : '';
            html += `<div class="structured-row">
                <div class="structured-label">action</div>
                <div class="structured-value">
                    <style>
                        .action-description-tooltip:hover .action-reasoning-popover { display:block !important; }
                    </style>
                    ${actionDescription ? `<span class="action-description-tooltip" style="position:relative; display:inline-block;">
                        <span class="data-type-badge">${actionDescription}</span>
                        ${actionReasoning ? `<span class="action-reasoning-popover" style="display:none; position:absolute; left:0; top:calc(100% + 6px); z-index:50; width:300px; max-width:60vw; padding:8px 10px; border-radius:8px; background:#0f172a; color:#f8fafc; box-shadow:0 10px 25px rgba(15,23,42,0.18); font-size:0.86em; line-height:1.5; white-space:normal; font-weight:400;">${actionReasoning}</span>` : ''}
                    </span>` : ''}
                </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;
}