Agent/examples/process_pipeline/ui/app.js

let requirements = [];
let currentSelectedIndex = null;
let activeRuns = {};
let statusInterval = null;
let currentAvailablePlatforms = ['xhs', 'youtube', 'bili', 'x'];

let currentPromptName = null;
const modalPrompts = document.getElementById('prompts-modal');
const elPromptList = document.getElementById('prompt-list');
const elPromptTextarea = document.getElementById('prompt-textarea');
const elSchemaTextarea = document.getElementById('schema-textarea');
const elPromptStatus = document.getElementById('prompt-save-status');

// DOM Elements
const elReqSelector = document.getElementById('req-selector');
const elStatsContainer = document.getElementById('stats-container');

const elMainContent = document.getElementById('main-content');
const elEmptyState = document.getElementById('empty-state');
const elDetailView = document.getElementById('detail-view');

const elStatusBanner = document.getElementById('status-banner');
const elStatusText = document.getElementById('status-text');

// Form logic
const selectForcePhase = document.getElementById('select-force-phase');
const groupPlatforms = document.getElementById('group-platforms');

if (selectForcePhase && groupPlatforms) {
    selectForcePhase.addEventListener('change', (e) => {
        const val = e.target.value;
        if (val.startsWith('phase2') || val === 'phase3') {
            groupPlatforms.style.display = 'none';
        } else {
            groupPlatforms.style.display = 'block';
        }
    });
}

const jsonStrategy = document.getElementById('json-strategy');
const jsonBlueprint = document.getElementById('json-blueprint');
const jsonCapability = document.getElementById('json-capability');
const jsonSource = document.getElementById('json-source');
const jsonRaw = document.getElementById('json-raw');

const modalRun = document.getElementById('run-modal');
const modalLogs = document.getElementById('logs-modal');
const terminalLogs = document.getElementById('terminal-logs');
const modalFragDetail = document.getElementById('frag-detail-modal');
const btnCloseFragDetail = document.getElementById('btn-close-frag-detail');
if (btnCloseFragDetail) btnCloseFragDetail.onclick = () => modalFragDetail.classList.add('hidden');

window.allFragmentsMap = {};

const PIPELINE_STEPS = [
    { id: 'research', label: '1.1 分布式爬取' },
    { id: 'source', label: '1.5 提取数据源' },
    { id: 'generate-case', label: '1.6 生成 case.json' },
    { id: 'workflow-extract', label: '1.6 提取' },
    { id: 'apply-grounding', label: '1.7 场景映射' },
    { id: 'process-cluster', label: '2.1.1 工序聚类' },
    { id: 'process-score', label: '2.1.2 工序打分' },
    { id: 'capability-extract', label: '2.2.1 能力提取' },
    { id: 'capability-enrich', label: '2.2.2 能力丰富化' },
    { id: 'strategy', label: '3.0 策略组装' }
];
let chainStartNode = null;
let chainEndNode = null;
let currentPipelineStatus = {};

// Initialize
async function init() {
    await fetchRequirements();
    setupEventListeners();
    setupFloatingApplyToTooltips();
    startStatusPolling();
}

function setupFloatingApplyToTooltips() {
    if (window.__applyToTooltipReady) return;
    window.__applyToTooltipReady = true;

    let floatingTooltip = null;
    let activeTarget = null;

    const hideTooltip = () => {
        activeTarget = null;
        if (floatingTooltip) {
            floatingTooltip.remove();
            floatingTooltip = null;
        }
    };

    const positionTooltip = () => {
        if (!floatingTooltip || !activeTarget) return;
        const rect = activeTarget.getBoundingClientRect();
        const tipRect = floatingTooltip.getBoundingClientRect();
        const gap = 8;
        const margin = 12;

        let left = rect.left + rect.width / 2 - tipRect.width / 2;
        left = Math.max(margin, Math.min(left, window.innerWidth - tipRect.width - margin));

        let top = rect.bottom + gap;
        if (top + tipRect.height > window.innerHeight - margin) {
            top = rect.top - tipRect.height - gap;
        }
        top = Math.max(margin, top);

        floatingTooltip.style.left = `${left}px`;
        floatingTooltip.style.top = `${top}px`;
        floatingTooltip.style.visibility = 'visible';
        floatingTooltip.style.opacity = '1';
    };

    document.addEventListener('pointerover', (event) => {
        const target = event.target.closest('.apply-to-path-item.has-tooltip');
        if (!target) return;
        const sourceTooltip = target.querySelector('.apply-to-tooltip');
        if (!sourceTooltip) return;

        activeTarget = target;
        if (!floatingTooltip) {
            floatingTooltip = document.createElement('div');
            floatingTooltip.className = 'floating-apply-to-tooltip';
            document.body.appendChild(floatingTooltip);
        }
        floatingTooltip.innerHTML = sourceTooltip.innerHTML;
        floatingTooltip.style.visibility = 'hidden';
        floatingTooltip.style.opacity = '0';
        requestAnimationFrame(positionTooltip);
    });

    document.addEventListener('pointerout', (event) => {
        const target = event.target.closest('.apply-to-path-item.has-tooltip');
        if (!target || target.contains(event.relatedTarget)) return;
        hideTooltip();
    });

    document.addEventListener('pointerover', (event) => {
        const target = event.target.closest('.apply-to-evidence-note[data-excerpt-key]');
        if (!target) return;
        const row = target.closest('tr');
        if (!row) return;
        row.querySelectorAll(`.body-excerpt-highlight[data-excerpt-key="${target.dataset.excerptKey}"]`).forEach(el => {
            el.classList.add('active');
        });
    });

    document.addEventListener('pointerout', (event) => {
        const target = event.target.closest('.apply-to-evidence-note[data-excerpt-key]');
        if (!target || target.contains(event.relatedTarget)) return;
        const row = target.closest('tr');
        if (!row) return;
        row.querySelectorAll(`.body-excerpt-highlight[data-excerpt-key="${target.dataset.excerptKey}"]`).forEach(el => {
            el.classList.remove('active');
        });
    });

    window.addEventListener('scroll', hideTooltip, true);
    window.addEventListener('resize', hideTooltip);
}

function makeExcerptKey(text) {
    let hash = 0;
    const str = String(text || '');
    for (let i = 0; i < str.length; i += 1) {
        hash = ((hash << 5) - hash) + str.charCodeAt(i);
        hash |= 0;
    }
    return `e${Math.abs(hash)}`;
}

function getWorkflowGroups(item) {
    if (!item || !Array.isArray(item.workflow_groups)) return [];
    return item.workflow_groups.filter(group => group && typeof group === 'object');
}

function getWorkflowItems(item) {
    return getWorkflowGroups(item)
        .filter(group => group.workflow)
        .map(group => ({
            ...group.workflow,
            workflow_id: group.workflow.workflow_id || group.workflow_id,
            capability: Array.isArray(group.capability) ? group.capability : []
        }));
}

function getCapabilityItems(item) {
    return getWorkflowGroups(item).flatMap(group => Array.isArray(group.capability) ? group.capability : []);
}

// Fetch Data
async function fetchRequirements() {
    try {
        const res = await fetch('/api/requirements');
        requirements = await res.json();
        requirements.sort((a, b) => b.index - a.index);
        renderTaskList(requirements);
        updateStats();
    } catch (e) {
        console.error("Failed to fetch requirements", e);
        elReqSelector.innerHTML = '<option value="">加载数据失败。请检查后端是否运行。</option>';
    }
}

function renderJSON(obj) {
    if (obj === null) return `<span class="json-null">null</span>`;
    if (typeof obj === 'number') return `<span class="json-number">${obj}</span>`;
    if (typeof obj === 'boolean') return `<span class="json-boolean">${obj}</span>`;
    if (typeof obj === 'string') {
        const escaped = obj.replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return `<span class="json-string">"${escaped}"</span>`;
    }

    if (Array.isArray(obj)) {
        if (obj.length === 0) return '[]';
        let html = '<div class="json-array">[<div class="json-children">';
        obj.forEach((val, i) => {
            html += `<div class="json-item">${renderJSON(val)}${i < obj.length - 1 ? ',' : ''}</div>`;
        });
        html += '</div>]</div>';
        return html;
    }

    if (typeof obj === 'object') {
        const keys = Object.keys(obj);
        if (keys.length === 0) return '{}';
        let html = '<div class="json-object">{<div class="json-children">';
        keys.forEach((k, i) => {
            html += `<div class="json-prop"><span class="json-key">"${k}"</span>: ${renderJSON(obj[k])}${i < keys.length - 1 ? ',' : ''}</div>`;
        });
        html += '</div>}</div>';
        return html;
    }
    return String(obj);
}

function renderDataOrRaw(dataObj, renderFunc) {
    if (!dataObj) return '<p style="color:var(--text-muted)">无可用数据</p>';

    let safeRaw = "";
    if (dataObj.error) {
        safeRaw = dataObj.raw_content ? dataObj.raw_content.replace(/</g, "&lt;").replace(/>/g, "&gt;") : "文件为空。";
        return `<div style="padding:1rem; background:rgba(239, 68, 68, 0.1); border:1px solid var(--danger); border-radius:8px;">
            <h3 style="color:var(--danger); margin-bottom:0.5rem">⚠️ JSON 解析失败</h3>
            <pre style="white-space: pre-wrap; font-family: monospace; font-size: 0.85rem; color: var(--text-muted); overflow-x: auto">${safeRaw}</pre>
        </div>`;
    } else {
        safeRaw = JSON.stringify(dataObj, null, 2).replace(/</g, "&lt;").replace(/>/g, "&gt;");
    }

    // Check global toggle state
    const isRaw = document.getElementById('global-json-toggle') && document.getElementById('global-json-toggle').checked;

    return `
    <div class="data-view-container">
        <div class="data-view-ui" style="${isRaw ? 'display:none;' : ''}">
            ${renderFunc(dataObj)}
        </div>
        <div class="data-view-raw" style="${isRaw ? '' : 'display:none;'}">
            <div style="padding:1rem; background:rgba(0, 0, 0, 0.05); border:1px solid rgba(0, 0, 0, 0.1); border-radius:8px;">
                <h3 style="color:var(--text-muted); margin-bottom:0.5rem">📝 JSON 原文</h3>
                <pre style="white-space: pre-wrap; font-family: monospace; font-size: 0.85rem; color: var(--text-muted); overflow-x: auto">${safeRaw}</pre>
            </div>
        </div>
    </div>`;
}

function renderRawCases(rawCasesObj) {
    if (!rawCasesObj || Object.keys(rawCasesObj).length === 0) return '无原始案例数据';
    const reqId = requirements[currentSelectedIndex]?.id || "001";

    // Build maps
    const sourceMap = {};
    const sourceData = rawCasesObj['source'];
    const sourceList = sourceData ? (Array.isArray(sourceData) ? sourceData : sourceData.sources) : null;
    if (sourceList) {
        sourceList.forEach(s => {
            const sId = s.case_id || (s._raw && s._raw.case_id);
            const sUrl = s.source_url || s.url;
            if (sId) sourceMap[sId] = s;
            if (sUrl) sourceMap[sUrl] = s;
        });
    }

    const detailMap = {};
    const detailMapByUrl = {};

    // Cache context for modal
    window._currentRawCasesContext = {
        rawCasesObj, sourceMap, detailMap, detailMapByUrl, reqId
    };

    let totalStatsHtml = '';
    const detailedCaseObj = rawCasesObj['case'] || rawCasesObj['case_detailed'];
    if (detailedCaseObj) {
        const cd = detailedCaseObj;
        let uniqueCases = new Set();
        let calcWorkflow = 0;
        let calcCapabilities = 0;

        if (cd.cases) {
            cd.cases.forEach(c => {
                const cId = c.case_id || (c._raw && c._raw.case_id);
                const cUrl = c.source_url || c.url;
                const uniqueKey = cId || cUrl || Math.random().toString();
                uniqueCases.add(uniqueKey);
                const workflowGroups = getWorkflowGroups(c);
                const capabilityItems = getCapabilityItems(c);
                if (workflowGroups.length > 0) calcWorkflow += workflowGroups.length;
                if (capabilityItems.length > 0) calcCapabilities += capabilityItems.length;

                if (cId) {
                    if (workflowGroups.length > 0) detailMap[cId] = { ...detailMap[cId], workflow_groups: c.workflow_groups };
                }
                if (cUrl) {
                    if (workflowGroups.length > 0) detailMapByUrl[cUrl] = { ...detailMapByUrl[cUrl], workflow_groups: c.workflow_groups };
                }
            });
        }

        const displayTotal = uniqueCases.size > 0 ? uniqueCases.size : (cd.total !== undefined ? cd.total : 0);
        const displayWorkflowSuccess = calcWorkflow > 0 ? calcWorkflow : (cd.workflow_success !== undefined && cd.workflow_success !== null ? cd.workflow_success : (cd.success !== undefined && cd.success !== null ? cd.success : 0));
        const displayCapabilitiesSuccess = calcCapabilities > 0 ? calcCapabilities : (cd.capabilities_success !== undefined && cd.capabilities_success !== null ? cd.capabilities_success : 0);

        if (cd.total !== undefined || uniqueCases.size > 0) {
            totalStatsHtml = `<div style="display:flex; gap:1rem; margin-bottom:1rem; padding:0.5rem 1rem; background:rgba(0, 0, 0, 0.03); border-radius:8px; align-items:center;">
                <div style="flex:1; text-align:center; display:flex; flex-direction:column; gap:2px;">
                    <span style="font-size:1.3rem; color:var(--text-main); font-weight:bold; line-height:1;">${displayTotal}</span>
                    <span style="color:var(--text-muted); font-size:0.75rem;">未被过滤的帖子总数</span>
                </div>
                <div style="flex:1; text-align:center; display:flex; flex-direction:column; gap:2px;">
                    <span style="font-size:1.3rem; color:var(--success); font-weight:bold; line-height:1;">${displayWorkflowSuccess}</span>
                    <span style="color:var(--text-muted); font-size:0.75rem;">工序提取成功数</span>
                </div>
                <div style="flex:1; text-align:center; display:flex; flex-direction:column; gap:2px;">
                    <span style="font-size:1.3rem; color:var(--accent-primary); font-weight:bold; line-height:1;">${displayCapabilitiesSuccess}</span>
                    <span style="color:var(--text-muted); font-size:0.75rem;">能力提取成功数</span>
                </div>
            </div>`;
        }
    }

    let filteredStatsHtml = '';
    if (rawCasesObj['filtered_cases']) {
        const fObj = rawCasesObj['filtered_cases'];
        let totalFiltered = 0;
        if (fObj.total !== undefined) totalFiltered = fObj.total;
        else if (fObj.cases) totalFiltered = fObj.cases.length;
        else if (fObj.sources) totalFiltered = fObj.sources.length;
        else if (fObj.by_reason) {
            Object.values(fObj.by_reason).forEach(r => {
                if (r.sources) totalFiltered += r.sources.length;
                else if (r.cases) totalFiltered += r.cases.length;
            });
        } else if (Array.isArray(fObj)) totalFiltered = fObj.length;

        filteredStatsHtml = `<div style="display:flex; gap:1rem; margin-bottom:1rem; padding:0.5rem 1rem; background:rgba(0, 0, 0, 0.03); border-radius:8px; align-items:center;">
            <div style="flex:1; text-align:center; display:flex; flex-direction:column; gap:2px;">
                <span style="font-size:1.3rem; color:var(--text-main); font-weight:bold; line-height:1;">${totalFiltered}</span>
                <span style="color:var(--text-muted); font-size:0.75rem;">被过滤的帖子数</span>
            </div>
        </div>`;
    }

    const allPlatforms = Object.keys(rawCasesObj).filter(p => p !== 'source' && p !== 'case_detailed' && p !== 'case' && p !== 'images');
    const channelPlatforms = allPlatforms.filter(p => p !== 'filtered_cases' && p !== 'source_ex');
    const hasFiltered = allPlatforms.includes('filtered_cases');
    const hasExternal = allPlatforms.includes('source_ex');

    let html = '';
    html += `<div class="sub-tabs">`;
    html += `<button class="sub-tab-btn active" onclick="selectSubTab('total')">TOTAL</button>`;
    if (hasFiltered) html += `<button class="sub-tab-btn" onclick="selectSubTab('filtered_cases')">FILTERED</button>`;
    if (hasExternal) html += `<button class="sub-tab-btn" onclick="selectSubTab('source_ex')">EXTERNAL</button>`;
    html += `<button class="sub-tab-btn" id="btn-upload-source-ex" style="background-color: var(--primary); margin-left: auto;">+ 上传 source_ex</button>`;
    html += `<input type="file" id="input-upload-source-ex" accept=".json" style="display:none;">`;
    html += `</div><div class="sub-tab-contents">`;

    const renderPaneContent = (pList, paneType) => {
        let paneHtml = '';
        if (paneType === 'total' && typeof totalStatsHtml !== 'undefined' && totalStatsHtml) {
            paneHtml += totalStatsHtml;
        } else if (paneType === 'filtered_cases' && typeof filteredStatsHtml !== 'undefined' && filteredStatsHtml) {
            paneHtml += filteredStatsHtml;
        }
        let totalCases = 0;
        let seenIds = new Set();

        let groupedHtml = {};
        const getGroupKey = (c, p) => (p === 'filtered_cases' && c.filter_reason) ? `🚫 过滤原因: ${c.filter_reason}` : 'default';

        let allCases = [];

        pList.forEach(p => {
            if (!rawCasesObj[p]) return;
            if (rawCasesObj[p].error) {
                const safeRaw = rawCasesObj[p].raw_content ? rawCasesObj[p].raw_content.replace(/</g, "&lt;").replace(/>/g, "&gt;") : "文件为空。";
                paneHtml += `<div style="padding:1rem; background:rgba(239, 68, 68, 0.1); border:1px solid var(--danger); border-radius:8px; margin-bottom:1rem;">
                    <h3 style="color:var(--danger); margin-bottom:0.5rem">⚠️ ${p} JSON 解析失败</h3>
                    <pre style="white-space: pre-wrap; font-family: monospace; font-size: 0.85rem; color: var(--text-muted); overflow-x: auto">${safeRaw}</pre>
                </div>`;
                return;
            }
            if (rawCasesObj[p].reason && p !== 'filtered_cases') {
                paneHtml += `<div style="padding:0.5rem 1rem; background:rgba(239, 68, 68, 0.1); border:1px solid var(--danger); border-radius:6px; margin-bottom:1rem; color:var(--danger); font-size:0.9rem;">🛑 ${p} 提示: ${rawCasesObj[p].reason}</div>`;
            }

            let cases = [];
            if (Array.isArray(rawCasesObj[p])) {
                cases = rawCasesObj[p];
            } else if (rawCasesObj[p].cases) {
                cases = rawCasesObj[p].cases;
            } else if (rawCasesObj[p].sources) {
                cases = rawCasesObj[p].sources;
            } else if (rawCasesObj[p].by_reason) {
                Object.entries(rawCasesObj[p].by_reason).forEach(([reasonKey, reasonObj]) => {
                    if (reasonObj.sources && Array.isArray(reasonObj.sources)) {
                        reasonObj.sources.forEach(src => {
                            if (!src.filter_reason) src.filter_reason = reasonKey;
                            cases.push(src);
                        });
                    }
                });
            }
            if (cases.length > 0) {
                if (!rawCasesObj['source'] && p !== 'source_ex' && p !== 'filtered_cases' && p !== 'source') {
                    paneHtml += `<div style="padding:1rem; background:rgba(0, 0, 0, 0.05); border:1px solid rgba(0, 0, 0, 0.1); border-radius:8px; margin-bottom:1rem;">
                        <h3 style="color:var(--text-main); margin-bottom:0.5rem">📝 ${p} 原始爬取数据 (未进行 1.5 数据源提取)</h3>
                        <div style="font-family: monospace; font-size: 0.85rem; overflow-x: auto">${renderJSON(rawCasesObj[p])}</div>
                    </div>`;
                    return;
                }
                cases.forEach((c, idx) => {
                    allCases.push({ c: c, p: p, originalIdx: idx });
                });
            }
        });

        allCases.sort((aObj, bObj) => {
            const getScore = (item) => {
                const iId = item.case_id || (item._raw && item._raw.case_id) || (item.post && item.post.channel_content_id);
                const iUrl = item.source_url || item.url || (item.post && item.post.link);
                const mapped = sourceMap[iId] || sourceMap[iUrl] || (item._raw && sourceMap[item._raw.case_id]) || item;
                return mapped.evaluation && mapped.evaluation.quality ? (mapped.evaluation.quality.overall_score || 0) : 0;
            };
            return getScore(bObj.c) - getScore(aObj.c);
        });

        allCases.forEach(itemObj => {
            const c = itemObj.c;
            const p = itemObj.p;
            const idx = itemObj.originalIdx;

            totalCases++;
            const cId = c.case_id || (c._raw && c._raw.case_id) || (c.post && c.post.channel_content_id) || `temp_${p}_${idx}`;
            const cUrl = c.source_url || c.url || (c.post && c.post.link) || '';

            const groupKey = getGroupKey(c, p);
            if (!groupedHtml[groupKey]) groupedHtml[groupKey] = '';

            if (cId || cUrl || c.post) {
                const mappedS = sourceMap[cId] || sourceMap[cUrl] || (c._raw && sourceMap[c._raw.case_id]);
                if (p !== 'filtered_cases' && p !== 'source' && p !== 'source_ex' && !mappedS) return;
                if (cId && seenIds.has(cId)) return;
                if (cId) seenIds.add(cId);
                const s = mappedS || c;
                const post = s.post || s || {};

                const images = post.images || [];
                const xImages = post.image_url_list || [];
                const ytThumbnails = post.thumbnails && post.thumbnails.length > 0 ? [post.thumbnails[post.thumbnails.length - 1].url] : [];
                const allImages = [...images, ...xImages.map(img => img.image_url), ...ytThumbnails].filter(Boolean);

                const coverImgUrl = allImages.length > 0 ? `/output/${reqId}/raw_cases/images/${cId}/00.jpg` : '';
                const fallbackImgUrl = allImages.length > 0 ? allImages[0] : '';

                const title = post.title || c.title || post.desc || (post.body_text ? post.body_text.substring(0, 30) + '...' : '') || cId || '无标题';
                const author = post.channel_account_name || s.author || '-';
                const likes = post.like_count !== undefined ? post.like_count : (post.likes !== undefined ? post.likes : '-');
                const snippetStr = (post.body_text || post.body || '').substring(0, 100);
                const snippetHtml = snippetStr ? `<div class="masonry-card-snippet">${snippetStr.replace(/</g, "&lt;").replace(/>/g, "&gt;")}...</div>` : '';

                const platBadge = p.startsWith('case_') ? `<span class="tag" style="position:absolute; top:8px; left:8px; background:rgba(0,0,0,0.6); color:#fff; padding:2px 6px; border-radius:4px; font-size:0.7em; z-index:2; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.2);">${p.replace('case_', '').toUpperCase()}</span>` : '';

                const score = s.evaluation && s.evaluation.quality ? s.evaluation.quality.overall_score : null;
                let scoreBadge = '';
                if (score !== null && score !== undefined) {
                    let color = score >= 80 ? '#10b981' : (score >= 60 ? '#f59e0b' : '#ef4444');
                    scoreBadge = `<div style="position:absolute; top:8px; right:8px; background:rgba(0,0,0,0.7); color:${color}; font-weight:bold; padding:2px 8px; border-radius:12px; font-size:0.8em; z-index:2; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.2);">⭐️ ${score}</div>`;
                }

                let actionBtn = '';
                if (p === 'source_ex') {
                    const isImported = !!sourceMap[cId] || !!sourceMap[cUrl];
                    if (isImported) {
                        actionBtn = `<button disabled style="position:absolute; top:8px; right:8px; background:#10b981; color:#fff; border:none; padding:4px 8px; border-radius:4px; font-size:0.7em; z-index:3; cursor:not-allowed; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">✅ 已导入</button>`;
                    } else {
                        actionBtn = `<button onclick="importExternalCase(event, '${cId}')" style="position:absolute; top:8px; right:8px; background:var(--accent-primary); color:#fff; border:none; padding:4px 8px; border-radius:4px; font-size:0.7em; z-index:3; cursor:pointer; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">📥 导入 Source</button>`;
                    }
                }

                groupedHtml[groupKey] += `<div class="masonry-card" style="position:relative;" onclick="openCaseDetail('${p}', ${idx})">
                            ${platBadge}
                            ${scoreBadge}
                            ${actionBtn}
                            ${allImages.length > 0 ? `<img class="cover-img" src="${coverImgUrl}" onerror="this.onerror=null; this.src='${fallbackImgUrl}';">` : ''}
                            <div class="masonry-card-info">
                                <div class="masonry-card-title">${title}</div>
                                ${allImages.length === 0 ? snippetHtml : ''}
                                <div class="masonry-card-stats">
                                    <div class="masonry-card-author">👤 ${author}</div>
                                    <div class="masonry-card-likes">❤️ ${likes}</div>
                                </div>
                            </div>
                        </div>`;
            } else {
                groupedHtml[groupKey] += `<div class="masonry-card" style="padding:12px; font-family:monospace; font-size:0.8em;" onclick="openCaseDetail('${p}', ${idx})">
                            📝 旧版格式 / 解析失败<br>点击查看详情
                        </div>`;
            }
        });
        if (totalCases === 0 && pList.length > 0 && !paneHtml.includes('解析失败') && !paneHtml.includes('未进行')) {
            paneHtml += `<div style="padding:1rem; color:var(--text-muted); text-align:center;">暂无数据</div>`;
        } else {
            Object.entries(groupedHtml).forEach(([groupName, gHtml]) => {
                if (gHtml) {
                    if (groupName !== 'default') {
                        paneHtml += `<h3 style="margin-top: 1rem; margin-bottom: 0.5rem; font-size: 1.1rem; color: var(--text-main); border-left: 4px solid var(--accent-primary); padding-left: 8px;">${groupName}</h3>`;
                    }
                    paneHtml += `<div class="masonry-grid">${gHtml}</div>`;
                }
            });
        }
        return paneHtml;
    };

    html += `<div id="sub-tab-total" class="sub-tab-pane">${renderPaneContent([...channelPlatforms, 'source'], 'total')}</div>`;
    if (hasFiltered) html += `<div id="sub-tab-filtered_cases" class="sub-tab-pane hidden">${renderPaneContent(['filtered_cases'], 'filtered_cases')}</div>`;
    if (hasExternal) {
        html += `<div id="sub-tab-source_ex" class="sub-tab-pane hidden">`;
        html += `<div style="margin-bottom: 1rem; text-align: right;"><button onclick="importAllExternalCases()" class="btn btn-primary btn-small">📥 全部导入 Source</button></div>`;
        html += renderPaneContent(['source_ex'], 'source_ex');
        html += `</div>`;
    }

    html += `</div>`;
    return html;
}

window.importExternalCase = async function (e, caseId) {
    e.stopPropagation();
    if (!confirm('确定要将该外部数据导入到 source 吗？')) return;

    try {
        const res = await fetch(`/api/requirements/${currentSelectedIndex}/import_source_ex`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ case_id: caseId })
        });
        const data = await res.json();
        if (data.status === 'success') {
            fetchRequirementData(currentSelectedIndex); // Refresh data
        } else {
            alert('导入失败: ' + (data.detail || data.message || JSON.stringify(data)));
        }
    } catch (err) {
        alert('导入出错: ' + err);
    }
};

window.importAllExternalCases = async function () {
    if (!confirm('确定要将所有外部数据全部导入到 source 吗？')) return;
    try {
        const res = await fetch(`/api/requirements/${currentSelectedIndex}/import_all_source_ex`, {
            method: 'POST'
        });
        const data = await res.json();
        if (data.status === 'success') {
            alert(`成功导入 ${data.count} 条数据！`);
            fetchRequirementData(currentSelectedIndex); // Refresh data
        } else {
            alert('全部导入失败: ' + (data.detail || data.message || JSON.stringify(data)));
        }
    } catch (err) {
        alert('导入出错: ' + err);
    }
};

function selectSubTab(tabName) {
    document.querySelectorAll('#json-raw .sub-tab-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    const activeBtn = document.querySelector(`#json-raw .sub-tab-btn[data-target="sub-tab-${tabName}"]`);
    if (activeBtn) activeBtn.classList.add('active');

    document.querySelectorAll('#json-raw .sub-tab-pane').forEach(pane => {
        pane.classList.add('hidden');
    });
    document.getElementById(`sub-tab-${tabName}`).classList.remove('hidden');
}

window.deleteClusterItems = async function (indices) {
    if (currentSelectedIndex === null) return;
    const data = window.dataCache[currentSelectedIndex]?.cluster;
    if (!data) return;

    let newData = Array.isArray(data) ? [...data] : { ...data };
    let count = 0;

    // Sort indices descending to avoid shifting issues if it's an array
    indices.sort((a, b) => b - a);

    if (Array.isArray(newData)) {
        indices.forEach(i => { newData.splice(i, 1); count++; });
    } else {
        const keys = Object.keys(newData);
        indices.forEach(i => { delete newData[keys[i]]; count++; });
    }

    if (!confirm(`确定要删除选中的 ${count} 个项目吗？`)) return;

    try {
        const res = await fetch(`/api/requirements/${currentSelectedIndex}/save_cluster`, {
            method: 'POST',
            body: JSON.stringify(newData),
            headers: { 'Content-Type': 'application/json' }
        });
        if (res.ok) {
            fetchRequirementData(currentSelectedIndex);
        } else {
            alert('删除失败');
        }
    } catch (e) {
        console.error(e);
        alert('删除失败');
    }
};

window.deleteSingleCluster = function (idx) {
    deleteClusterItems([idx]);
};

window.deleteSelectedClusters = function () {
    const checkboxes = document.querySelectorAll('.cluster-checkbox:checked');
    const indices = Array.from(checkboxes).map(cb => parseInt(cb.dataset.idx));
    if (indices.length === 0) {
        alert('请先选择要删除的项目');
        return;
    }
    deleteClusterItems(indices);
};

window.clearAllClusters = async function () {
    if (currentSelectedIndex === null) return;
    if (!confirm('确定要清空全部聚类结果吗？')) return;
    try {
        const res = await fetch(`/api/requirements/${currentSelectedIndex}/save_cluster`, {
            method: 'POST',
            body: JSON.stringify(Array.isArray(window.dataCache[currentSelectedIndex]?.cluster) ? [] : {}),
            headers: { 'Content-Type': 'application/json' }
        });
        if (res.ok) {
            fetchRequirementData(currentSelectedIndex);
        } else {
            alert('清空失败');
        }
    } catch (e) {
        console.error(e);
        alert('清空失败');
    }
};

function renderClusterDeletable(clusterData) {
    if (!clusterData || (Array.isArray(clusterData) && clusterData.length === 0) || (typeof clusterData === 'object' && Object.keys(clusterData).length === 0)) {
        return `<div style="color:var(--text-muted); padding:2rem; text-align:center;">暂无聚类结果数据，请导入 JSON 文件</div>`;
    }

    let html = `<div style="margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;">
        <button class="btn btn-danger btn-small" onclick="deleteSelectedClusters()" style="background-color: var(--danger); border-color: var(--danger); color: white;">🗑️ 删除选中项</button>
        <button class="btn btn-secondary btn-small" onclick="clearAllClusters()">🧹 清空全部</button>
    </div>`;

    html += `<div style="display:flex; flex-direction:column; gap:1rem;">`;

    const items = Array.isArray(clusterData) ? clusterData : Object.entries(clusterData).map(([k, v]) => ({ key: k, value: v }));

    items.forEach((item, idx) => {
        const displayData = Array.isArray(clusterData) ? item : item.value;
        const displayKey = Array.isArray(clusterData) ? `导入记录 #${idx + 1}` : `Key: ${item.key}`;

        html += `<div style="background: rgba(0,0,0,0.02); border: 1px solid var(--border-glass); border-radius: 8px; padding: 1rem;">
            <div style="display:flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 0.5rem;">
                <label style="display:flex; align-items:center; gap:8px; cursor:pointer; font-weight:bold; color:var(--text-main);">
                    <input type="checkbox" class="cluster-checkbox" data-idx="${idx}" style="cursor:pointer; width:16px; height:16px;">
                    ${displayKey}
                </label>
                <button class="btn btn-secondary btn-small" onclick="deleteSingleCluster(${idx})" style="color:var(--danger); border-color:rgba(239, 68, 68, 0.2); background:rgba(239, 68, 68, 0.05);">❌ 删除此项</button>
            </div>
            <div style="background: #1e1e1e; color: #d4d4d4; padding: 1rem; border-radius: 6px; font-family: monospace; font-size: 0.85rem; overflow-x: auto; max-height: 400px;">
                ${renderJSON(displayData)}
            </div>
        </div>`;
    });

    html += `</div>`;
    return html;
}

window.selectGenericSubTab = function (prefix, targetId) {
    const parentContainer = document.getElementById(`container-${prefix}`);
    if (!parentContainer) return;

    parentContainer.querySelectorAll('.sub-tab-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    const activeBtn = parentContainer.querySelector(`[data-target="${targetId}"]`);
    if (activeBtn) activeBtn.classList.add('active');

    parentContainer.querySelectorAll('.sub-tab-pane').forEach(pane => {
        pane.classList.add('hidden');
    });
    const activePane = document.getElementById(targetId);
    if (activePane) activePane.classList.remove('hidden');
};

function renderWithSubTabs(dataMain, dataTemp, renderFn, tabPrefix) {
    if (!dataTemp || Object.keys(dataTemp).length === 0) {
        return renderDataOrRaw(dataMain, renderFn);
    }

    const mainHtml = renderDataOrRaw(dataMain, renderFn);
    const tempHtml = renderDataOrRaw(dataTemp, renderFn);

    return `<div id="container-${tabPrefix}">
        <div class="sub-tabs">
            <button class="sub-tab-btn active" data-target="sub-tab-${tabPrefix}-main" onclick="selectGenericSubTab('${tabPrefix}', 'sub-tab-${tabPrefix}-main')">最终版本</button>
            <button class="sub-tab-btn" data-target="sub-tab-${tabPrefix}-temp" onclick="selectGenericSubTab('${tabPrefix}', 'sub-tab-${tabPrefix}-temp')">中间过程 (Temp)</button>
        </div>
        <div class="sub-tab-contents">
            <div id="sub-tab-${tabPrefix}-main" class="sub-tab-pane">
                ${mainHtml}
            </div>
            <div id="sub-tab-${tabPrefix}-temp" class="sub-tab-pane hidden">
                ${tempHtml}
            </div>
        </div>
    </div>`;
}

function renderCaseTags(caseRefs) {
    if (!caseRefs || caseRefs.length === 0) return '';
    let html = `<div class="tags-container" style="gap:0.8rem; flex-wrap:wrap; margin-top: 0.5rem;">`;
    caseRefs.forEach(ref => {
        let caseId = null;
        let title = ref;

        const matchNew = ref.match(/^([a-z]+)_([^\s：:]+)(?:[：:\s]+(.*))?/);
        if (matchNew && matchNew[1] !== 'case') {
            caseId = `${matchNew[1]}_${matchNew[2]}`;
            title = matchNew[3] || ref;
        } else {
            const matchA = ref.match(/^case_([a-z]+)_([a-zA-Z0-9]+)(?:[：:\s]+(.*))?/);
            if (matchA) {
                caseId = `${matchA[1]}-case_${matchA[2]}`;
                title = matchA[3] || ref;
            } else {
                const matchB = ref.match(/^([a-z]+)[\/\s](case_[a-zA-Z0-9]+)(?:[：:\s]+(.*))?/);
                if (matchB) {
                    caseId = `${matchB[1]}-${matchB[2]}`;
                    title = matchB[3] || ref;
                } else {
                    const matchC = ref.match(/^case_([a-zA-Z0-9]+)_([a-z]+)(?:[：:\s]+(.*))?/);
                    if (matchC) {
                        caseId = `${matchC[2]}-case_${matchC[1]}`;
                        title = matchC[3] || ref;
                    }
                }
            }
        }

        if (caseId) {
            html += `<a href="#" onclick="jumpToCase('${caseId}'); return false;" class="badge-emoji primary" style="text-decoration:none; white-space:normal; text-align:left; line-height:1.4">
                <strong>🔍 ${caseId.replace('-', ' ')}</strong><br>
                <span style="font-size:0.75rem">${title.substring(0, 40) + (title.length > 40 ? '...' : '')}</span>
            </a>`;
        } else {
            html += `<span class="badge-emoji" style="white-space:normal; text-align:left; line-height:1.4; font-size:0.75rem">${ref}</span>`;
        }
    });
    html += `</div>`;
    return html;
}

function renderCapabilities(capsObj) {
    if (!capsObj || (!capsObj.extracted_capabilities && !capsObj.capabilities)) {
        return `<div class="data-card" style="border-color: var(--warning)"><div class="card-header"><div class="card-title">⚠️ 未知或非标准格式 (Capabilities)</div></div><div class="card-body" style="font-family: monospace; font-size: 0.85rem; overflow-x: auto;">${renderJSON(capsObj)}</div></div>`;
    }
    const caps = capsObj.capabilities || capsObj.extracted_capabilities;
    if (caps.length === 0) return '<p>未提取到能力。</p>';

    let html = ``;
    caps.forEach(cap => {
        if (!cap.name && !cap.能力名称 && !cap.description && !cap.能力描述 && !cap.id) {
            html += `<div class="data-card"><div class="card-header"><div class="card-title">⚠️ 非标准能力项</div></div><div class="card-body" style="font-family: monospace; font-size: 0.85rem; overflow-x: auto;">${renderJSON(cap)}</div></div>`;
            return;
        }
        const isNew = cap.is_new ? '<span class="badge-emoji success">✨ 新能力</span>' : '';
        html += `<div class="data-card">
            <div class="card-header">
                <div class="card-title">⚡ [${cap.id || 'N/A'}] ${cap.name || cap.能力名称 || '未命名'}</div>
                ${isNew}
            </div>
            <div class="card-body">
                <p>${cap.description || cap.能力描述 || ''}</p>`;

        if (cap.enriched_details) {
            const ed = cap.enriched_details;
            if (ed.execution_process) {
                html += `<div class="card-section"><div class="section-title">🚀 执行流程</div><p style="white-space:pre-wrap;">${ed.execution_process}</p></div>`;
            }
            if (ed.core_parameters) {
                html += `<div class="card-section"><div class="section-title">⚙️ 核心参数</div><p style="white-space:pre-wrap;">${ed.core_parameters}</p></div>`;
            }
            if (ed.effects) {
                html += `<div class="card-section"><div class="section-title">✨ 影响效果</div><p style="white-space:pre-wrap;">${ed.effects}</p></div>`;
            }
            if (ed.visual_notes) {
                html += `<div class="card-section"><div class="section-title">🖼️ 视觉备注</div><p style="white-space:pre-wrap;">${ed.visual_notes}</p></div>`;
            }
        } else {
            html += `<div class="card-section"><div class="section-title">✨ 影响 (Effects)</div><ul>`;
            if (cap.effects) cap.effects.forEach(eff => html += `<li>${eff}</li>`);
            html += `</ul></div>`;
            if (cap.implements && Object.keys(cap.implements).length > 0) {
                html += `<div class="card-section"><div class="section-title">🛠️ 实现工具 (Tools)</div><div class="tags-container">`;
                for (const [tool, args] of Object.entries(cap.implements)) {
                    html += `<span class="badge-emoji primary" title="${args}">🔧 ${tool}</span>`;
                }
                html += `</div></div>`;
            }
        }

        if (cap.case_references && cap.case_references.length > 0) {
            html += `<div class="card-section"><div class="section-title">📌 来源案例</div>${renderCaseTags(cap.case_references)}</div>`;
        }
        html += `</div></div>`;
    });
    return html;
}

function renderFragmentsGrid(fragments) {
    if (!fragments || fragments.length === 0) return '<p>没有片段数据。</p>';
    window.allFragmentsMap = {}; // Reset map
    let html = `<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 10px;">`;
    fragments.forEach(f => {
        let cid = f.capability_id || ('temp_cap_' + Math.random().toString(36).substring(7));
        window.allFragmentsMap[cid] = f;
        
        let tools = f.tools && f.tools.length > 0 ? f.tools.join(', ') : '无工具';
        let actionDesc = f.action && f.action.description ? f.action.description : (f.capability_id || 'unknown');
        let bodyText = f.body || f.body_excerpt || f.rationale || '';
        if (bodyText.length > 180) bodyText = bodyText.substring(0, 180) + '...';
        
        let inputs = f.inputs ? f.inputs.map(i => i.modality || '').filter(Boolean).join('+') : '';
        let outputs = f.outputs ? f.outputs.map(o => o.modality || '').filter(Boolean).join('+') : '';
        let ioStr = (inputs && outputs) ? `${inputs} -> ${outputs}` : (f.action && f.action.description ? f.action.description : '转换');

        let applyHtml = '';
        if (f.apply_to) {
            Object.values(f.apply_to).forEach(arr => {
                arr.forEach(item => {
                    const parts = item.category_path ? item.category_path.split('/') : [];
                    const label = parts.length > 0 ? parts[parts.length - 1] : '标签';
                    applyHtml += `<span class="frag-apply-pill">${label}</span>`;
                });
            });
        }

        const caseShort = f._caseId ? f._caseId.split('-').pop() : 'case';

        html += `<div class="frag" onclick="openFragDetail('${cid}')" style="cursor:pointer;">
            <div class="frag-head">
                <span class="case-badge" onclick="jumpToCase('${f._caseId}'); event.stopPropagation();" style="cursor:pointer" title="点击跳转案例">${caseShort}</span>
                <span class="frag-badge">${f._workflowId || 'w'}</span>
                <span style="margin-left: auto; font-weight: 600; color: var(--accent-primary, #3b82f6);">${ioStr}</span>
            </div>
            <div class="frag-sig">${actionDesc} [${tools}]</div>
            <div class="frag-body">${bodyText}</div>
            ${applyHtml ? `<div class="frag-apply">${applyHtml}</div>` : ''}
        </div>`;
    });
    html += `</div>`;
    return html;
}

window.openFragDetail = function(fragId) {
    const f = window.allFragmentsMap[fragId];
    if (!f) return;
    const modal = document.getElementById('frag-detail-modal');
    const body = document.getElementById('frag-detail-modal-body');
    
    let html = `<div style="background:#fff; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">`;
    
    let inputs = f.inputs ? f.inputs.map(i => i.modality || '').filter(Boolean).join('+') : '';
    let outputs = f.outputs ? f.outputs.map(o => o.modality || '').filter(Boolean).join('+') : '';
    let ioStr = (inputs && outputs) ? `${inputs} → ${outputs}` : (f.action && f.action.description ? f.action.description : '转换');

    html += `<div style="display:flex; gap: 8px; margin-bottom: 16px;">
        <span class="case-badge">${f._caseId ? f._caseId.split('-').pop() : 'case'}</span>
        <span class="frag-badge">${f._workflowId || 'w'}</span>
        <span class="badge-emoji warning">${f.capability_id || 'unknown'}</span>
    </div>`;

    html += `<h4 style="margin: 0 0 10px 0; color: #334155;">I/O 模态</h4>`;
    html += `<div style="font-size: 14px; margin-bottom: 8px;"><strong>${ioStr}</strong></div>`;
    
    if (f.inputs && f.inputs.length > 0) {
        html += `<div style="font-size: 13px; color: #64748b; margin-bottom: 4px;">IN <span style="margin-left: 8px;">${f.inputs.map(i => `<span style="background: #e0e7ff; color: #3730a3; padding: 2px 6px; border-radius: 4px; margin-right: 4px;">${i.description || '输入'} [${i.modality || '未知'}]</span>`).join('')}</span></div>`;
    }
    if (f.outputs && f.outputs.length > 0) {
        html += `<div style="font-size: 13px; color: #64748b; margin-bottom: 16px;">OUT <span style="margin-left: 8px;">${f.outputs.map(o => `<span style="background: #fce7f3; color: #9d174d; padding: 2px 6px; border-radius: 4px; margin-right: 4px;">${o.description || '输出'} [${o.modality || '未知'}]</span>`).join('')}</span></div>`;
    }

    if (f.body || f.body_excerpt || f.rationale) {
        html += `<h4 style="margin: 20px 0 10px 0; color: #334155;">BODY</h4>`;
        html += `<div style="background: #f8fafc; padding: 12px; border-left: 4px solid #cbd5e1; border-radius: 4px; font-size: 14px; color: #475569; line-height: 1.6; white-space: pre-wrap;">${f.body || f.body_excerpt || f.rationale}</div>`;
    }

    if (f.apply_to) {
        html += `<h4 style="margin: 20px 0 10px 0; color: #334155;">APPLY TO</h4>`;
        Object.keys(f.apply_to).forEach(k => {
            f.apply_to[k].forEach(item => {
                html += `<div style="margin-bottom: 12px;">
                    <div style="font-size: 13px; font-weight: 600; color: #2563eb; margin-bottom: 4px;">${item.category_path || k}</div>
                    <div style="font-size: 13px; color: #64748b; padding-left: 10px; border-left: 2px solid #e2e8f0;">${item.rationale || item.body_excerpt || '无推理说明'}</div>
                </div>`;
            });
        });
    }

    if (f.suggest_apply_to && f.suggest_apply_to.length > 0) {
        html += `<h4 style="margin: 20px 0 10px 0; color: #334155;">SUGGEST APPLY TO <span style="font-size: 12px; font-weight: normal; color: #8b5cf6;">(建议新增节点)</span></h4>`;
        f.suggest_apply_to.forEach(item => {
            html += `<div style="margin-bottom: 12px;">
                <div style="font-size: 13px; font-weight: 600; color: #8b5cf6; margin-bottom: 4px;">${item.path || '新节点'}</div>
                <div style="font-size: 13px; color: #64748b; padding-left: 10px; border-left: 2px solid #e2e8f0;">${item.rationale || item.body_excerpt || '无推理说明'}</div>
            </div>`;
        });
    }

    if (f.effects && f.effects.length > 0) {
        html += `<h4 style="margin: 20px 0 10px 0; color: #334155;">EFFECTS</h4>`;
        f.effects.forEach((eff, i) => {
            html += `<div style="background: #f1f5f9; padding: 12px; border-radius: 6px; margin-bottom: 8px;">
                <div style="font-size: 14px; font-weight: 600; color: #1e293b; margin-bottom: 8px;">#${i} ${eff.statement || 'Effect'}</div>
                <div style="font-size: 13px; color: #475569; margin-bottom: 4px;"><strong>判定标准:</strong> ${eff.criteria || '无'}</div>
                <div style="font-size: 13px; color: #475569; margin-bottom: 4px;"><strong>判定方式:</strong> ${eff.judge_method || '未知'}</div>`;
            if (eff.negative_examples && eff.negative_examples.length > 0) {
                html += `<div style="font-size: 13px; color: #475569; margin-top: 8px;"><strong>反例:</strong><ul style="margin: 4px 0 0 20px;">${eff.negative_examples.map(ex => `<li>${ex}</li>`).join('')}</ul></div>`;
            }
            html += `</div>`;
        });
    }
    
    html += `<h4 style="margin: 20px 0 10px 0; color: #334155;">其他</h4>`;
    let tools = f.tools && f.tools.length > 0 ? f.tools.join(', ') : '无';
    html += `<div style="font-size: 13px; color: #475569; margin-bottom: 4px;"><strong>tools:</strong> ${tools}</div>`;
    if (f.artifact_type) html += `<div style="font-size: 13px; color: #475569; margin-bottom: 4px;"><strong>artifact_type:</strong> ${f.artifact_type}</div>`;
    if (f.control_target) html += `<div style="font-size: 13px; color: #475569; margin-bottom: 4px;"><strong>control_target:</strong> ${Array.isArray(f.control_target) ? f.control_target.join(', ') : f.control_target}</div>`;
    
    html += `</div>`;
    body.innerHTML = html;
    modal.classList.remove('hidden');
};

function renderBlueprint(bpObj) {
    if (!bpObj || (!bpObj.blueprints && !bpObj.clusters)) {
        return `<div class="data-card" style="border-color: var(--warning)"><div class="card-header"><div class="card-title">⚠️ 未知或非标准格式 (Blueprint)</div></div><div class="card-body" style="font-family: monospace; font-size: 0.85rem; overflow-x: auto;">${renderJSON(bpObj)}</div></div>`;
    }
    let html = ``;

    // New process.json format
    if (bpObj.clusters) {
        html += `<div style="margin-bottom: 1.5rem; padding: 1rem; background: rgba(0,0,0,0.2); border-radius: 8px;">
            <h3 style="color:var(--text-main); margin-bottom:0.8rem">🎯 需求</h3>
            <p style="color:var(--text-muted)">${bpObj.requirement || ''}</p>
        </div>`;
        bpObj.clusters.forEach(c => {
            if (!c.cluster_id && !c.cluster_name && !c.工序步骤) {
                html += `<div class="data-card"><div class="card-header"><div class="card-title">⚠️ 非标准聚类项</div></div><div class="card-body" style="font-family: monospace; font-size: 0.85rem; overflow-x: auto;">${renderJSON(c)}</div></div>`;
                return;
            }
            const score = c.score || 0;
            const deg = score * 360;
            const scoreClass = score >= 0.8 ? '' : (score >= 0.5 ? 'medium' : 'low');
            html += `<div class="data-card">
                <div class="card-header">
                    <div class="card-title">🧩 [${c.cluster_id || 'N/A'}] ${c.cluster_name || '未命名'}</div>
                </div>
                <div class="card-body">
                    <div class="score-container" style="margin-bottom:1rem">
                        <div class="score-circle ${scoreClass}" style="--score-deg: ${deg}deg"><span>${Math.round(score * 100)}%</span></div>
                        <div class="score-text"><strong>匹配度得分</strong></div>
                    </div>
                    <div class="card-section"><div class="section-title">🧠 解释 (Explanation)</div>
                    <p>${c.explanation || ''}</p></div>
                    <div class="card-section"><div class="section-title">📍 工序步骤</div><div class="phase-list">`;
            if (c.工序步骤) c.工序步骤.forEach(step => {
                html += `<div class="phase-item">
                    <div class="phase-title">步骤 ${step.步骤序号}</div>
                    <div>${step.步骤描述 || ''}</div>
                </div>`;
            });
            html += `</div></div>`;

            if (c.关联案例 && c.关联案例.length > 0) {
                html += `<div class="card-section"><div class="section-title">📌 关联案例</div>${renderCaseTags(c.关联案例)}</div>`;
            }
            html += `</div></div>`;
        });
        return html;
    }

    // Old blueprint format
    if (bpObj.distilled_cases && bpObj.distilled_cases.length > 0) {
        html += `<div style="margin-bottom: 1.5rem; padding: 1rem; background: rgba(0,0,0,0.2); border-radius: 8px;">
            <h3 style="color:var(--text-main); margin-bottom:0.8rem">📚 蓝图来源案例</h3>
            <div class="tags-container" style="gap:0.8rem">`;
        bpObj.distilled_cases.forEach(c => {
            let targetId = c.id;
            const matchA = targetId.match(/^case_([a-z]+)_(\d+)/);
            if (matchA) {
                targetId = `${matchA[1]}-case_${matchA[2]}`;
            } else {
                const matchB = targetId.match(/^([a-z]+)[\/\s](case_\d+)/);
                if (matchB) {
                    targetId = `${matchB[1]}-${matchB[2]}`;
                } else {
                    const matchC = targetId.match(/^case_(\d+)_([a-z]+)/);
                    if (matchC) targetId = `${matchC[2]}-case_${matchC[1]}`;
                }
            }

            html += `<a href="#" onclick="jumpToCase('${targetId}'); return false;" class="badge-emoji primary" style="text-decoration:none; white-space:normal; text-align:left; line-height:1.4">
                <strong>🔍 ${c.id}</strong><br>
                <span style="font-size:0.75rem">${c.title ? c.title.substring(0, 40) + (c.title.length > 40 ? '...' : '') : 'View Source'}</span>
            </a>`;
        });
        html += `</div></div>`;
    }

    if (bpObj.blueprints) bpObj.blueprints.forEach(bp => {
        if (!bp.name && !bp.phases) {
            html += `<div class="data-card"><div class="card-header"><div class="card-title">⚠️ 非标准蓝图项</div></div><div class="card-body" style="font-family: monospace; font-size: 0.85rem; overflow-x: auto;">${renderJSON(bp)}</div></div>`;
            return;
        }
        html += `<div class="data-card">
            <div class="card-header">
                <div class="card-title">🗺️ ${bp.name || '未命名'}</div>
            </div>
            <div class="card-body">
                <div class="card-section"><div class="section-title">🧠 推理逻辑 (Reasoning)</div>
                <p>${bp.reasoning || ''}</p></div>
                <div class="card-section"><div class="section-title">📍 阶段 (Phases)</div><div class="phase-list">`;
        if (bp.phases) bp.phases.forEach(ph => {
            html += `<div class="phase-item">
                <div class="phase-title">${ph.phase || ''}</div>
                <div>${ph.description || ''}</div>
            </div>`;
        });
        html += `</div></div></div>`;
    });
    return html;
}

function renderStrategy(stratObj) {
    if (!stratObj || (!stratObj.strategies && !stratObj.workflow)) {
        return `<div class="data-card" style="border-color: var(--warning)"><div class="card-header"><div class="card-title">⚠️ 未知或非标准格式 (Strategy)</div></div><div class="card-body" style="font-family: monospace; font-size: 0.85rem; overflow-x: auto;">${renderJSON(stratObj)}</div></div>`;
    }
    let html = `<div style="margin-bottom: 1.5rem; padding: 1rem; background: rgba(0,0,0,0.2); border-radius: 8px;">
        <h3 style="color:var(--text-main); margin-bottom:0.5rem">🎯 需求描述</h3>
        <p style="color:var(--text-muted)">${stratObj.requirement || ''}</p>
    </div>`;

    // New Workflow Format
    if (stratObj.workflow) {
        stratObj.workflow.forEach(strat => {
            if (!strat.cluster_id && !strat.cluster_name && !strat.steps) {
                html += `<div class="data-card"><div class="card-header"><div class="card-title">⚠️ 非标准工作流项</div></div><div class="card-body" style="font-family: monospace; font-size: 0.85rem; overflow-x: auto;">${renderJSON(strat)}</div></div>`;
                return;
            }
            const score = strat.score || 0;
            const deg = score * 360;
            const scoreClass = score >= 0.8 ? '' : (score >= 0.5 ? 'medium' : 'low');
            let scoreHtml = `<div class="score-container">
                <div class="score-circle ${scoreClass}" style="--score-deg: ${deg}deg"><span>${Math.round(score * 100)}%</span></div>
                <div class="score-text"><strong>匹配得分</strong><br>${strat.explanation || ''}</div>
            </div>`;

            html += `<div class="data-card">
                <div class="card-header">
                    <div class="card-title">🎯 [${strat.cluster_id}] ${strat.cluster_name || '未命名'}</div>
                </div>
                <div class="card-body">
                    ${scoreHtml}
                    ${(strat.关联案例 && strat.关联案例.length > 0) ? `<div class="card-section" style="margin-bottom: 1rem;"><div class="section-title">📌 关联案例</div>${renderCaseTags(strat.关联案例)}</div>` : ''}
                    <div class="card-section"><div class="section-title">🧱 工作流步骤</div><div class="phase-list">`;

            if (strat.steps) strat.steps.forEach(step => {
                html += `<div class="phase-item">
                    <div class="phase-title">步骤 ${step.步骤序号}</div>
                    <div style="margin-bottom:0.5rem">${step.步骤描述}</div>
                    <div class="tags-container">`;
                if (step.capabilities) {
                    step.capabilities.forEach(cap => {
                        html += `<div style="margin-top: 0.5rem; padding: 0.5rem; background: rgba(0, 0, 0, 0.05); border-radius: 4px; width: 100%;">
                            <div style="font-weight: bold; margin-bottom: 0.3rem;">⚡ [${cap.id}] ${cap.name}</div>
                            <div style="font-size: 0.8rem; color: var(--text-muted);">${cap.description}</div>
                            ${(cap.case_references && cap.case_references.length > 0) ? `<div style="margin-top: 0.5rem;">${renderCaseTags(cap.case_references)}</div>` : ''}
                        </div>`;
                    });
                }
                html += `</div></div>`;
            });
            html += `</div></div></div></div>`;
        });
        return html;
    }

    if (stratObj.strategies) {
        stratObj.strategies.sort((a, b) => (b.is_selected === true) - (a.is_selected === true));

        stratObj.strategies.forEach(strat => {
            if (!strat.name && !strat.workflow_outline) {
                html += `<div class="data-card"><div class="card-header"><div class="card-title">⚠️ 非标准策略项</div></div><div class="card-body" style="font-family: monospace; font-size: 0.85rem; overflow-x: auto;">${renderJSON(strat)}</div></div>`;
                return;
            }
            const isSelected = strat.is_selected;
            const icon = isSelected ? '🎯' : '🥈';
            const badge = isSelected ? '<span class="badge-emoji success">⭐ 被选中的策略</span>' : '<span class="badge-emoji warning">备选策略</span>';

            let scoreHtml = '';
            if (strat.coverage_score !== undefined) {
                const score = strat.coverage_score;
                const deg = score * 360;
                const scoreClass = score >= 0.8 ? '' : (score >= 0.5 ? 'medium' : 'low');
                scoreHtml = `<div class="score-container">
                    <div class="score-circle ${scoreClass}" style="--score-deg: ${deg}deg"><span>${Math.round(score * 100)}%</span></div>
                    <div class="score-text"><strong>覆盖率得分</strong><br>${strat.coverage_explanation || ''}</div>
                </div>`;
            }

            html += `<div class="data-card" style="${isSelected ? 'border-color: var(--accent-primary); box-shadow: 0 0 15px rgba(59,130,246,0.1);' : ''}">
                <div class="card-header">
                    <div class="card-title">${icon} ${strat.name || '未命名'}</div>
                    ${badge}
                </div>
                <div class="card-body">
                    ${scoreHtml}
                    <div class="tags-container" style="margin-bottom:1rem">
                        <span class="badge-emoji">📥 来源: ${strat.source || 'N/A'}</span>
                    </div>`;

            if (strat.reasoning) html += `<div class="card-section"><div class="section-title">🧠 推理逻辑 (Reasoning)</div><p>${strat.reasoning}</p></div>`;
            if (strat.why_not) html += `<div class="card-section"><div class="section-title">❌ 为何未被选中</div><p>${strat.why_not}</p></div>`;

            if (strat.workflow_outline && strat.workflow_outline.length > 0) {
                html += `<div class="card-section"><div class="section-title">🧱 工作流大纲</div><div class="phase-list">`;
                strat.workflow_outline.forEach(wo => {
                    html += `<div class="phase-item">
                        <div class="phase-title">${wo.phase}</div>
                        <div style="margin-bottom:0.5rem">${wo.description}</div>
                        <div class="tags-container">`;
                    if (wo.capabilities) {
                        wo.capabilities.forEach(cap => html += `<span class="badge-emoji primary">⚡ ${cap.name}</span>`);
                    }
                    html += `</div></div>`;
                });
                html += `</div></div>`;
            }
            html += `</div></div>`;
        });
    }

    if (stratObj.uncovered_requirements && stratObj.uncovered_requirements.length > 0) {
        html += `<div class="data-card" style="border-color: var(--danger)">
            <div class="card-header"><div class="card-title">⚠️ Uncovered Requirements</div></div>
            <div class="card-body"><ul>`;
        stratObj.uncovered_requirements.forEach(req => html += `<li>${req}</li>`);
        html += `</ul></div></div>`;
    }

    return html;
}

window.selectSubTab = function (p) {
    document.querySelectorAll('.sub-tab-btn').forEach(b => {
        b.classList.remove('active');
        if (b.textContent === p.replace('case_', '').toUpperCase()) b.classList.add('active');
    });
    document.querySelectorAll('.sub-tab-pane').forEach(pane => pane.classList.add('hidden'));
    const target = document.getElementById('sub-tab-' + p);
    if (target) target.classList.remove('hidden');
};

window.jumpToCase = function (caseId) {
    // Switch to raw tab
    document.querySelector('.tab-btn-pill[data-target="tab-raw"]').click();

    // Find the case card
    const targetCard = document.getElementById('case-card-' + caseId);
    if (targetCard) {
        // Find which sub-tab pane it's inside
        const pane = targetCard.closest('.sub-tab-pane');
        if (pane) {
            const platformId = pane.id.replace('sub-tab-', '');
            selectSubTab(platformId);
        }

        // Scroll into view
        targetCard.scrollIntoView({ behavior: 'smooth', block: 'center' });

        // Add highlight
        targetCard.classList.remove('highlight-pulse');
        void targetCard.offsetWidth; // Trigger reflow
        targetCard.classList.add('highlight-pulse');
    } else {
        alert("Case not found in raw cases data.");
    }
};

async function fetchPromptsList() {
    try {
        const res = await fetch('/api/prompts');
        let list = await res.json();

        // Handle DAG nodes
        document.querySelectorAll('.prompt-node').forEach(node => {
            const p = node.dataset.prompt;
            if (list.includes(p)) {
                node.onclick = () => selectPrompt(p, node);
                // Remove from list so it doesn't appear in "other"
                list = list.filter(item => item !== p);
            } else {
                node.style.opacity = 0.5; // gray out if not found
                node.style.cursor = 'not-allowed';
            }
        });

        const elOtherPromptsList = document.getElementById('other-prompts-list');
        if (elOtherPromptsList) {
            elOtherPromptsList.innerHTML = '';
            list.forEach((p) => {
                const div = document.createElement('div');
                div.className = 'prompt-tab';
                div.textContent = p;
                div.onclick = () => selectPrompt(p, div);
                elOtherPromptsList.appendChild(div);
            });
        }

        // Select the first prompt by default (maybe researcher.prompt)
        const firstNode = document.querySelector('.prompt-node[data-prompt="researcher.prompt"]');
        if (firstNode) {
            selectPrompt('researcher.prompt', firstNode);
        }

    } catch (e) {
        console.error("Failed to load prompts", e);
    }
}

async function selectPrompt(name, tabEl) {
    currentPromptName = name;
    document.querySelectorAll('.prompt-tab').forEach(el => el.classList.remove('active'));
    document.querySelectorAll('.prompt-node').forEach(el => el.classList.remove('active'));

    if (tabEl) tabEl.classList.add('active');

    elPromptTextarea.value = 'Loading...';
    elPromptTextarea.disabled = true;
    if (elSchemaTextarea) {
        elSchemaTextarea.value = 'Loading...';
        elSchemaTextarea.disabled = true;
    }

    try {
        const res = await fetch(`/api/prompts/${name}`);
        const data = await res.json();
        elPromptTextarea.value = data.content || '';
        if (elSchemaTextarea) {
            elSchemaTextarea.value = data.schema_content || '';
        }
    } catch (e) {
        elPromptTextarea.value = 'Error loading prompt.';
        if (elSchemaTextarea) elSchemaTextarea.value = '';
    }
    elPromptTextarea.disabled = false;
    if (elSchemaTextarea) elSchemaTextarea.disabled = false;
    elPromptStatus.textContent = '';
}

function renderAggregatedPerCaseData(cases, type) {
    if (!cases || !Array.isArray(cases) || cases.length === 0) {
        return '<div style="color:var(--text-muted); padding: 1rem; text-align: center;">暂无案例数据</div>';
    }

    let sidebarHtml = `<div class="case-sidebar" style="width: 56px; flex-shrink: 0; position: sticky; top: 0; align-self: flex-start; height: calc(100vh - 100px); overflow-y: auto; background: #fff;">`;
    sidebarHtml += `<div class="sidebar-nav-list" style="padding: 6px;">`;
    let contentHtml = `<div class="case-content-area" style="flex: 1; min-width: 0; padding-left: 1.25rem; padding-right: 2rem; border-left: 1px solid #f1f3f4; margin-left: -1px;">`;
    let hasData = false;
    let displayIndex = 1;

    // Sort cases by score
    const sortedCases = [...cases].sort((a, b) => {
        const aId = a.case_id || (a._raw && a._raw.case_id);
        const bId = b.case_id || (b._raw && b._raw.case_id);
        const sourceMap = window._currentRawCasesContext ? window._currentRawCasesContext.sourceMap || {} : {};
        const aMapped = sourceMap[aId] || {};
        const bMapped = sourceMap[bId] || {};
        const aScore = aMapped.evaluation && aMapped.evaluation.quality ? (aMapped.evaluation.quality.overall_score || 0) : 0;
        const bScore = bMapped.evaluation && bMapped.evaluation.quality ? (bMapped.evaluation.quality.overall_score || 0) : 0;
        return bScore - aScore;
    });

    sortedCases.forEach((c, idx) => {
        const cId = c.case_id || (c._raw && c._raw.case_id) || `temp_${idx}`;
        const sourceMap = window._currentRawCasesContext ? window._currentRawCasesContext.sourceMap || {} : {};
        const mappedS = sourceMap[cId] || {};
        const postObj = mappedS.post || c.post || c || {};
        const title = postObj.title || c.title || postObj.desc || (postObj.body_text ? postObj.body_text.substring(0, 30) + '...' : '') || cId || `案例 ${idx + 1}`;

        hasData = true; // Always render if there is a case, so the user can click Rerun.
        let items = null;
        if (type === 'workflow') {
            const workflowItems = getWorkflowItems(c);
            items = workflowItems.length > 0 ? workflowItems : null;
        } else if (type === 'capabilities') {
            const capabilityItems = getCapabilityItems(c);
            items = capabilityItems.length > 0 ? capabilityItems : null;
        }

        const targetId = `case-${type}-${idx}`;

        const navIndex = displayIndex++;

        let publishStrHtml = '';
        if (c.published_at) {
            const dateObj = new Date(c.published_at);
            const dateStr = isNaN(dateObj.getTime()) ? c.published_at : dateObj.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
            publishStrHtml = `<span style="font-size: 0.75em; font-weight: normal; color: #94a3b8; background: #f1f5f9; border: 1px solid #e2e8f0; padding: 2px 8px; border-radius: 12px; margin-left: 8px;">发布于: ${dateStr}</span>`;
        }

        const score = mappedS.evaluation && mappedS.evaluation.quality ? mappedS.evaluation.quality.overall_score : null;
        let scoreBadge = '';
        if (score !== null && score !== undefined) {
            let color = score >= 80 ? '#10b981' : (score >= 60 ? '#f59e0b' : '#ef4444');
            scoreBadge = `<span style="font-size: 0.85em; font-weight: bold; color: #fff; background: ${color}; padding: 2px 8px; border-radius: 12px; margin-left: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">⭐️ ${score}</span>`;
        }

        const typeLabel = type === 'workflow' ? '工序' : '能力';

        // Add to sidebar
        sidebarHtml += `<div class="sidebar-nav-item" title="${title.replace(/"/g, '&quot;')}" style="min-height: 34px; padding: 0; margin-bottom: 6px; display:flex; align-items:center; justify-content:center; font-family: monospace; font-weight: 700; color:#64748b;" onclick="
            document.querySelectorAll('.sidebar-nav-item').forEach(el => el.classList.remove('active'));
            this.classList.add('active');
            document.getElementById('${targetId}').scrollIntoView({behavior: 'smooth'})
        ">
            ${navIndex}
        </div>`;

        contentHtml += `<div id="${targetId}" class="case-section" style="margin-bottom: 3.5rem; padding-top: 1rem;">`;

        const stepName = 'workflow-extract';
        const caseIndexToPass = c.index || (idx + 1);
        const btnHtml = `<button class="btn btn-secondary" style="font-size: 0.85em; padding: 0.4rem 0.8rem; border-radius: 4px;" onclick="event.stopPropagation(); triggerSingleCaseRerun('${stepName}', ${caseIndexToPass})">🔄 重跑${typeLabel}</button>`;

        contentHtml += `<div style="display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.02); border-radius: 8px; padding-right: 1rem; cursor: pointer; margin-bottom: 1.2rem;" onclick="const content = this.nextElementSibling; content.classList.toggle('hidden'); this.querySelector('.case-arrow').textContent = content.classList.contains('hidden') ? '▶' : '▼';">`;
        contentHtml += `<h3 style="margin: 0; padding: 1rem; color: var(--text-main); font-size: 1.2rem; display: flex; align-items: center; gap: 10px; user-select: none; flex: 1;">`;
        contentHtml += `<span class="case-arrow" style="font-size: 0.8em; color: var(--text-muted); width: 16px; display: inline-block;">▶</span>`;
        contentHtml += `<span style="color: #64748b; font-size: 1.1rem; font-weight: bold; font-family: monospace;">#${idx + 1}</span>`;
        contentHtml += `<span>${title.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</span>${scoreBadge}${publishStrHtml}</h3>`;
        contentHtml += btnHtml;
        contentHtml += `</div>`;

        // Collapsible Post Info
        const post = mappedS.post || c.post || c || {};

        const images = post.images || [];
        const xImages = post.image_url_list || [];
        const ytThumbnails = post.thumbnails && post.thumbnails.length > 0 ? [post.thumbnails[post.thumbnails.length - 1].url] : [];
        const allImages = [...images, ...xImages.map(img => img.image_url), ...ytThumbnails].filter(Boolean);

        const bodyText = post.body_text || post.body || post.desc || '';
        let mediaHtml = '';
        if (allImages.length > 0) {
            mediaHtml = `<div style="display:flex; gap:8px; overflow-x:auto; margin-bottom: 1rem; padding-bottom: 8px;">`;
            allImages.forEach((img, i) => {
                const coverImgUrl = `/output/${window._currentRawCasesContext.reqId}/raw_cases/images/${cId}/${i.toString().padStart(2, '0')}.jpg`;
                mediaHtml += `<img src="${coverImgUrl}" onerror="this.onerror=null; this.src='${img}';" style="height: 150px; border-radius: 6px; object-fit: cover; flex-shrink: 0;">`;
            });
            mediaHtml += `</div>`;
        }

        contentHtml += `<div class="case-post-info hidden" style="padding: 1.5rem; background: #f8fafc; border-radius: 8px; margin-bottom: 1.5rem; border: 1px solid #e2e8f0;">
            ${mediaHtml}
            <div style="font-size: 0.95em; color: #334155; white-space: pre-wrap; line-height: 1.6; word-break: break-all;">${bodyText.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>
        </div>`;

        // Always Expanded Structured Data
        contentHtml += window.renderStructuredData(items, type, c);

        // Add JSON toggle at the bottom of the case section
        const caseJsonStr = JSON.stringify(c, null, 2).replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        contentHtml += `<div style="margin-top: 1.5rem; border-top: 1px dashed rgba(0,0,0,0.1); padding-top: 1rem;">
            <div style="font-size: 0.8rem; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: 4px;" onclick="const content = this.nextElementSibling; content.classList.toggle('hidden'); this.querySelector('.arrow').textContent = content.classList.contains('hidden') ? '▶' : '▼';">
                <span class="arrow">▶</span> 查看 raw JSON
            </div>
            <div class="json-container hidden" style="margin-top: 0.8rem;"><pre style="background: #1e1e1e; color: #d4d4d4; padding: 1rem; border-radius: 6px; font-size: 0.8rem; overflow-x: auto; max-height: 400px; margin: 0;"><code>${caseJsonStr}</code></pre></div>
        </div>`;

        contentHtml += `</div>`;
    });

    sidebarHtml += `</div></div>`;
    contentHtml += `</div>`;

    if (!hasData) {
        return `<div style="color:var(--text-muted); padding: 1rem; text-align: center;">当前需求的所有案例均无提取的${type === 'workflow' ? '工序' : '能力'}</div>`;
    }

    return `<div style="display: flex; align-items: stretch; position: relative;">${sidebarHtml}${contentHtml}</div>`;
}

async function fetchRequirementData(index) {
    try {
        const res = await fetch(`/api/requirements/${index}/data`);
        const data = await res.json();

        window.dataCache = window.dataCache || {};
        window.dataCache[index] = data;

        let rawCasesClone = null;
        let casesList = [];
        if (data.raw_cases) {
            rawCasesClone = { ...data.raw_cases };
            const detailedCaseObj = data.raw_cases['case'] || data.raw_cases['case_detailed'];
            if (detailedCaseObj && detailedCaseObj.cases) {
                casesList = detailedCaseObj.cases;
            }
        }

        if (jsonStrategy) jsonStrategy.innerHTML = ''; // Tab removed

        if (jsonCapability) {
            const reqStr = (index + 1).toString().padStart(3, '0');
            jsonCapability.innerHTML = `
                <div id="container-capability" style="height: calc(100vh - 120px); width: 100%;">
                    <iframe src="/static/viz_fragment.html?req=${reqStr}&v=17" style="width: 100%; height: 100%; border: none; border-radius: 8px; background: var(--bg-primary);"></iframe>
                </div>
            `;
        }

        jsonRaw.innerHTML = renderDataOrRaw(rawCasesClone, renderRawCases);

        const clusterData = window.dataCache[index].cluster;

        const oldActiveWorkflowTab = jsonBlueprint.querySelector('.sub-tab-btn.active')?.dataset?.target || 'sub-tab-workflow-cases';

        const workflowCasesHtml = renderAggregatedPerCaseData(casesList, 'workflow');
        let bpHtml = `<div id="container-workflow">`;
        bpHtml += `<div class="sub-tabs-container" style="margin-bottom: 1rem; border-bottom: 1px solid var(--border-glass); padding-bottom: 8px; display: flex; gap: 8px;">`;
        bpHtml += `<button class="sub-tab-btn ${oldActiveWorkflowTab === 'sub-tab-workflow-cases' ? 'active' : ''}" data-target="sub-tab-workflow-cases" onclick="selectGenericSubTab('workflow', 'sub-tab-workflow-cases')">📊 案例解析页</button>`;
        bpHtml += `<button class="sub-tab-btn ${oldActiveWorkflowTab === 'sub-tab-workflow-cluster' ? 'active' : ''}" data-target="sub-tab-workflow-cluster" onclick="selectGenericSubTab('workflow', 'sub-tab-workflow-cluster')">🧩 聚类结果 (Cluster)</button>`;
        bpHtml += `</div>`;

        bpHtml += `<div id="sub-tab-workflow-cases" class="sub-tab-pane ${oldActiveWorkflowTab === 'sub-tab-workflow-cases' ? '' : 'hidden'}">${workflowCasesHtml}</div>`;
        bpHtml += `<div id="sub-tab-workflow-cluster" class="sub-tab-pane ${oldActiveWorkflowTab === 'sub-tab-workflow-cluster' ? '' : 'hidden'}">
            <div style="margin-bottom: 1.5rem; padding: 1.2rem; background: rgba(0,0,0,0.02); border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px dashed rgba(0,0,0,0.1);">
                <span style="color: var(--text-muted); font-size: 0.9em;">导入本地生成的 JSON (如 process.json 等) 将保存为 cluster.json 并支持单项删除与多选清除。</span>
                <div>
                    <input type="file" id="input-upload-cluster" accept=".json" style="display:none;">
                    <button class="btn btn-primary btn-small" onclick="document.getElementById('input-upload-cluster').click()">📥 导入 JSON</button>
                </div>
            </div>
            <div id="cluster-preview-content">${renderClusterDeletable(clusterData)}</div>
        </div>`;
        bpHtml += `</div>`;
        jsonBlueprint.innerHTML = bpHtml;

        const clusterFileInput = document.getElementById('input-upload-cluster');
        if (clusterFileInput) {
            clusterFileInput.onchange = async (e) => {
                const file = e.target.files[0];
                if (!file) return;

                const formData = new FormData();
                formData.append('file', file);

                try {
                    const res = await fetch(`/api/requirements/${index}/upload_cluster`, {
                        method: 'POST',
                        body: formData
                    });
                    if (res.ok) {
                        fetchRequirementData(index);
                    } else {
                        alert('上传失败');
                    }
                } catch (err) {
                    console.error(err);
                    alert('上传出错');
                }
            };
        }
        const btnUpload = document.getElementById('btn-upload-source-ex');
        const fileInput = document.getElementById('input-upload-source-ex');
        if (btnUpload && fileInput) {
            btnUpload.onclick = () => fileInput.click();
            fileInput.onchange = async (e) => {
                const file = e.target.files[0];
                if (!file) return;

                const formData = new FormData();
                formData.append('file', file);

                try {
                    const res = await fetch(`/api/requirements/${index}/upload_source_ex`, {
                        method: 'POST',
                        body: formData
                    });
                    if (res.ok) {
                        alert('上传成功！');
                        fetchRequirementData(index);
                    } else {
                        alert('上传失败');
                    }
                } catch (err) {
                    console.error(err);
                    alert('上传出错');
                }
            };
        }

        if (rawCasesClone && Object.keys(rawCasesClone).length > 0) {
            currentAvailablePlatforms = Object.keys(rawCasesClone)
                .filter(p => p.startsWith('case_') && p !== 'case_detailed' && p !== 'case')
                .map(p => p.replace('case_', ''));
            if (currentAvailablePlatforms.length === 0) {
                currentAvailablePlatforms = ['xhs', 'youtube', 'bili', 'x'];
            }
        } else {
            currentAvailablePlatforms = ['xhs', 'youtube', 'bili', 'x'];
        }
    } catch (e) {
        console.error("Failed to fetch data", e);
    }
}

async function pollStatus() {
    try {
        const res = await fetch('/api/pipeline/status');
        const statusData = await res.json();

        let needsListUpdate = false;

        // Check if any status changed
        for (const [idxStr, runInfo] of Object.entries(statusData)) {
            const idx = parseInt(idxStr);
            if (!activeRuns[idx] || activeRuns[idx].status !== runInfo.status) {
                needsListUpdate = true;
            }
            activeRuns[idx] = runInfo;

            // Update logs if modal is open for this index
            if (currentSelectedIndex === idx && !modalLogs.classList.contains('hidden')) {
                terminalLogs.textContent = runInfo.logs.join('');
                terminalLogs.scrollTop = terminalLogs.scrollHeight;
            }

            // Update detail view banner if this is the selected one
            if (currentSelectedIndex === idx) {
                updateDetailBannerStatus(runInfo.status);
            }
        }

        if (needsListUpdate) {
            // update in requirements array
            requirements.forEach(req => {
                if (activeRuns[req.index]) {
                    req.status = activeRuns[req.index].status;
                }
            });
            renderTaskList(requirements);
            updateStats();
        }

    } catch (e) {
        console.error("Failed to poll status", e);
    }
}

function startStatusPolling() {
    if (statusInterval) clearInterval(statusInterval);
    statusInterval = setInterval(pollStatus, 2000);
}

// Render
function renderTaskList(list) {
    elReqSelector.innerHTML = '<option value="">-- 选择一个需求 --</option>';
    list.forEach(req => {
        const option = document.createElement('option');
        option.value = req.index;
        let statusMarker = '';
        if (req.status === 'running') statusMarker = '🚀';
        else if (req.status === 'completed') statusMarker = '✅';
        else if (req.status === 'partial') statusMarker = '⚠️';
        else if (req.status === 'failed') statusMarker = '❌';
        else statusMarker = '⏳';
        option.textContent = `${statusMarker} [#${req.id}] ${req.requirement} (Cases: ${req.raw_cases_count})`;
        if (currentSelectedIndex === req.index) {
            option.selected = true;
        }
        elReqSelector.appendChild(option);
    });
}

function updateStats() {
    const total = requirements.length;
    const completed = requirements.filter(r => r.status === 'completed').length;
    const running = requirements.filter(r => r.status === 'running').length;

    elStatsContainer.innerHTML = `
        <span>Total: ${total}</span>
        <span style="color:var(--success)">Done: ${completed}</span>
        ${running > 0 ? `<span style="color:var(--accent-primary)">Running: ${running}</span>` : ''}
    `;
}

function selectRequirement(index) {
    currentSelectedIndex = index;
    const req = requirements.find(r => r.index === index);
    if (!req) return;

    // Sync dropdown if called from somewhere else
    if (elReqSelector.value != index) {
        elReqSelector.value = index;
    }

    // Update Detail UI
    elEmptyState.classList.add('hidden');
    elDetailView.classList.remove('hidden');

    updateDetailBannerStatus(activeRuns[index] ? activeRuns[index].status : req.status);

    // Fetch data
    if (jsonStrategy) jsonStrategy.textContent = 'Loading...';
    if (jsonBlueprint) jsonBlueprint.textContent = 'Loading...';
    if (jsonRaw) jsonRaw.textContent = 'Loading...';
    fetchRequirementData(index);
}

function updateDetailBannerStatus(status) {
    const btnStop = document.getElementById('btn-stop-pipeline');
    if (status === 'running') {
        elStatusBanner.classList.remove('hidden');
        elStatusBanner.style.background = 'rgba(59, 130, 246, 0.1)';
        elStatusText.textContent = 'Pipeline is currently running...';
        elStatusBanner.querySelector('.status-indicator').style.display = 'block';
        elStatusBanner.querySelector('.status-indicator').style.background = 'var(--accent-primary)';
        if (btnStop) btnStop.style.display = 'inline-block';
    } else if (status === 'failed') {
        elStatusBanner.classList.remove('hidden');
        elStatusBanner.style.background = 'rgba(239, 68, 68, 0.1)';
        elStatusText.textContent = 'Pipeline run failed.';
        elStatusBanner.querySelector('.status-indicator').style.display = 'block';
        elStatusBanner.querySelector('.status-indicator').style.background = 'var(--danger)';
        if (btnStop) btnStop.style.display = 'none';
    } else {
        elStatusBanner.classList.add('hidden');
        if (btnStop) btnStop.style.display = 'none';
    }
}

// Actions
async function triggerRun() {
    if (currentSelectedIndex === null) return;

    const checkSdk = document.getElementById('check-claude-sdk').checked;
    const mode = document.getElementById('select-force-phase').value;
    const platforms = document.getElementById('input-platforms').value;

    let only_step = null;
    let start_from = null;
    let end_at = null;
    let restart_mode = null;
    let phase = null;

    if (mode === "custom_range") {
        if (!chainStartNode) {
            alert('请在下方链条中选择至少一个节点作为起点。');
            return;
        }
        if (chainStartNode === chainEndNode || !chainEndNode) {
            only_step = chainStartNode.replace(/-1$/, '');
        } else {
            start_from = chainStartNode.replace(/-1$/, '');
            end_at = chainEndNode.replace(/-1$/, '');
        }
    } else if (mode.startsWith("step_")) {
        const stepMap = {
            "step_1.1": "research",
            "step_1.5": "source",
            "step_1.6": "generate-case",
            "step_1.6_extract": "workflow-extract",
            "step_1.7": "apply-grounding",
            "step_2.1.1": "process-cluster",
            "step_2.1.2": "process-score",
            "step_2.2.1": "capability-extract",
            "step_2.2.2": "capability-enrich",
            "step_3.0": "strategy"
        };
        only_step = stepMap[mode];
        if (mode === "step_1.1") {
            restart_mode = "single_platforms"; // triggers backend's platform specific clearing
        }
    } else if (mode.startsWith("phase")) {
        if (mode === "phase1") {
            phase = 1;
        } else if (mode === "phase2") {
            phase = 2;
        } else if (mode === "phase3") {
            phase = 3;
        }
    } else {
        restart_mode = "smart";
    }

    const groupPlatforms = document.getElementById('group-platforms');
    const platformsToSend = groupPlatforms && groupPlatforms.style.display !== 'none' ? platforms : "";

    const requestData = {
        platforms: platformsToSend,
        use_claude_sdk: checkSdk,
        restart_mode: restart_mode,
        phase: phase,
        only_step: only_step,
        start_from: start_from,
        end_at: end_at
    };
    modalRun.classList.add('hidden');

    // Optimistic UI update
    const req = requirements.find(r => r.index === currentSelectedIndex);
    if (req) req.status = 'running';
    activeRuns[currentSelectedIndex] = { status: 'running', logs: ['Initializing request...'] };
    renderTaskList(requirements);
    updateDetailBannerStatus('running');

    try {
        const res = await fetch(`/api/pipeline/run/${currentSelectedIndex}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(requestData)
        });

        if (!res.ok) {
            const err = await res.json();
            alert("Error: " + err.detail);
        }
    } catch (e) {
        console.error("Run failed", e);
        alert("Failed to trigger run");
    }
}

// Event Listeners
function setupEventListeners() {
    // Global JSON Toggle
    const globalJsonToggle = document.getElementById('global-json-toggle');
    if (globalJsonToggle) {
        globalJsonToggle.addEventListener('change', (e) => {
            const isRaw = e.target.checked;
            document.querySelectorAll('.data-view-ui').forEach(el => el.style.display = isRaw ? 'none' : '');
            document.querySelectorAll('.data-view-raw').forEach(el => el.style.display = isRaw ? '' : 'none');
        });
    }

    // Dropdown change
    elReqSelector.addEventListener('change', (e) => {
        const val = e.target.value;
        if (val) {
            selectRequirement(parseInt(val));
        } else {
            currentSelectedIndex = null;
            elEmptyState.classList.remove('hidden');
            elDetailView.classList.add('hidden');
        }
    });

    // Refresh Data without changing page position
    const btnRefresh = document.getElementById('btn-refresh-data');
    if (btnRefresh) {
        btnRefresh.addEventListener('click', async () => {
            if (currentSelectedIndex === null) {
                alert("请先选择一个需求项目！");
                return;
            }

            const oldText = btnRefresh.innerHTML;
            btnRefresh.innerHTML = '🔄 刷新中...';
            btnRefresh.disabled = true;

            const modalCaseDetail = document.getElementById('case-detail-modal');
            const isModalOpen = modalCaseDetail && !modalCaseDetail.classList.contains('hidden');
            const activeSidebarItem = document.querySelector('.modal-sidebar-item.active');
            const activeCaseIdx = activeSidebarItem ? parseInt(activeSidebarItem.id.replace('sidebar-item-', '')) : null;

            try {
                await fetchRequirementData(currentSelectedIndex);

                if (isModalOpen && activeCaseIdx !== null && typeof window.renderSingleCaseDetail === 'function') {
                    window.renderSingleCaseDetail(activeCaseIdx);
                }
            } catch (e) {
                console.error("Failed to refresh data", e);
            } finally {
                btnRefresh.innerHTML = oldText;
                btnRefresh.disabled = false;
            }
        });
    }

    // Tabs
    document.querySelectorAll('.tab-btn-pill').forEach(btn => {
        btn.addEventListener('click', () => {
            document.querySelectorAll('.tab-btn-pill').forEach(b => b.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));

            btn.classList.add('active');
            document.getElementById(btn.dataset.target).classList.add('active');
        });
    });

    // Modals
    document.getElementById('btn-open-run-modal').addEventListener('click', async () => {
        if (currentSelectedIndex !== null) {
            modalRun.classList.remove('hidden');
            const selectForcePhase = document.getElementById('select-force-phase');
            if (selectForcePhase) selectForcePhase.dispatchEvent(new Event('change'));

            const inputPlatforms = document.getElementById('input-platforms');
            if (inputPlatforms && currentAvailablePlatforms && currentAvailablePlatforms.length > 0) {
                inputPlatforms.value = currentAvailablePlatforms.join(',');
            }

            // Fetch status and render chain
            await fetchAndRenderPipelineChain(currentSelectedIndex);
        }
    });

    document.getElementById('btn-close-modal').addEventListener('click', () => {
        modalRun.classList.add('hidden');
    });

    document.getElementById('btn-cancel-run').addEventListener('click', () => {
        modalRun.classList.add('hidden');
    });

    const selectForcePhase = document.getElementById('select-force-phase');
    const groupPlatforms = document.getElementById('group-platforms');
    const chainContainer = document.getElementById('pipeline-chain-container');

    if (selectForcePhase && groupPlatforms) {
        selectForcePhase.addEventListener('change', (e) => {
            const val = e.target.value;
            if (['smart', 'phase1', 'step_1.1'].includes(val) || (val === 'custom_range' && chainStartNode === 'research')) {
                groupPlatforms.style.display = 'block';
            } else {
                groupPlatforms.style.display = 'none';
            }

            if (val === 'custom_range') {
                chainContainer.classList.remove('hidden');
            } else {
                chainContainer.classList.add('hidden');
            }
        });
    }

    document.getElementById('btn-reset-chain').addEventListener('click', () => {
        chainStartNode = null;
        chainEndNode = null;
        renderPipelineChain();
    });

    // Add Requirement Modal Events
    const modalAddReq = document.getElementById('add-req-modal');
    const inputAddReq = document.getElementById('input-new-req');

    document.getElementById('btn-add-req').addEventListener('click', () => {
        inputAddReq.value = "";
        modalAddReq.classList.remove('hidden');
    });

    document.getElementById('btn-close-add-req').addEventListener('click', () => {
        modalAddReq.classList.add('hidden');
    });

    document.getElementById('btn-cancel-add-req').addEventListener('click', () => {
        modalAddReq.classList.add('hidden');
    });

    document.getElementById('btn-submit-add-req').addEventListener('click', async () => {
        const val = inputAddReq.value.trim();
        if (!val) {
            alert('需求内容不能为空');
            return;
        }

        try {
            const res = await fetch(`/api/requirements`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ requirement: val })
            });

            if (res.ok) {
                modalAddReq.classList.add('hidden');
                await fetchRequirements();
            } else {
                alert('添加失败');
            }
        } catch (e) {
            console.error(e);
            alert('网络错误');
        }
    });

    const modalEditReq = document.getElementById('edit-req-modal');
    const inputEditReq = document.getElementById('edit-req-textarea');

    document.getElementById('btn-edit-req').addEventListener('click', () => {
        if (currentSelectedIndex !== null) {
            const req = requirements.find(r => r.index === currentSelectedIndex);
            if (req) {
                inputEditReq.value = req.requirement;
                modalEditReq.classList.remove('hidden');
            }
        }
    });

    const closeEditReq = () => modalEditReq.classList.add('hidden');
    document.getElementById('btn-close-edit-req').addEventListener('click', closeEditReq);
    document.getElementById('btn-cancel-edit-req').addEventListener('click', closeEditReq);

    const saveRequirementText = async (runAfter) => {
        if (currentSelectedIndex === null) return;
        const newText = inputEditReq.value.trim();
        if (!newText) {
            alert('需求文本不能为空');
            return;
        }

        try {
            const res = await fetch(`/api/requirements/${currentSelectedIndex}`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ requirement: newText })
            });

            if (!res.ok) {
                const err = await res.json();
                alert('保存失败: ' + (err.detail || '未知错误'));
                return;
            }

            // Update locally
            const req = requirements.find(r => r.index === currentSelectedIndex);
            if (req) {
                req.requirement = newText;
                renderTaskList(requirements);
            }

            closeEditReq();

            if (runAfter) {
                document.getElementById('btn-open-run-modal').click();
            }

        } catch (e) {
            console.error(e);
            alert('保存请求失败');
        }
    };

    document.getElementById('btn-save-edit-req').addEventListener('click', () => saveRequirementText(false));
    document.getElementById('btn-save-run-edit-req').addEventListener('click', () => saveRequirementText(true));

    document.getElementById('btn-confirm-run').addEventListener('click', triggerRun);

    document.getElementById('btn-view-logs').addEventListener('click', () => {
        modalLogs.classList.remove('hidden');
        if (activeRuns[currentSelectedIndex]) {
            terminalLogs.textContent = activeRuns[currentSelectedIndex].logs.join('');
            terminalLogs.scrollTop = terminalLogs.scrollHeight;
        } else {
            terminalLogs.textContent = 'No logs available.';
        }
    });

    const btnStop = document.getElementById('btn-stop-pipeline');
    if (btnStop) {
        btnStop.addEventListener('click', async () => {
            if (currentSelectedIndex === null) return;
            if (!confirm('Are you sure you want to stop the running pipeline?')) return;
            try {
                const res = await fetch(`/api/pipeline/stop/${currentSelectedIndex}`, { method: 'POST' });
                if (!res.ok) {
                    const err = await res.json();
                    alert("Error stopping pipeline: " + err.detail);
                }
            } catch (e) {
                console.error("Failed to stop pipeline", e);
                alert("Failed to stop pipeline");
            }
        });
    }

    document.getElementById('btn-close-logs').addEventListener('click', () => {
        modalLogs.classList.add('hidden');
    });

    const btnOpenPrompts = document.getElementById('btn-open-prompts');
    if (btnOpenPrompts) {
        btnOpenPrompts.addEventListener('click', () => {
            modalPrompts.classList.remove('hidden');
            fetchPromptsList();
        });
    }

    const btnClosePrompts = document.getElementById('btn-close-prompts');
    if (btnClosePrompts) {
        btnClosePrompts.addEventListener('click', () => {
            modalPrompts.classList.add('hidden');
        });
    }

    const btnSavePrompt = document.getElementById('btn-save-prompt');
    if (btnSavePrompt) {
        btnSavePrompt.addEventListener('click', async () => {
            if (!currentPromptName) return;
            elPromptStatus.textContent = 'Saving...';
            elPromptStatus.style.color = 'var(--text-muted)';

            try {
                const reqBody = { content: elPromptTextarea.value };
                if (elSchemaTextarea) reqBody.schema_content = elSchemaTextarea.value;

                const res = await fetch(`/api/prompts/${currentPromptName}`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(reqBody)
                });
                if (res.ok) {
                    elPromptStatus.textContent = 'Saved!';
                    elPromptStatus.style.color = 'var(--success)';
                    setTimeout(() => elPromptStatus.textContent = '', 2000);
                } else {
                    const errData = await res.json();
                    throw new Error(errData.detail || "Failed to save");
                }
            } catch (e) {
                elPromptStatus.textContent = e.message || 'Save failed';
                elPromptStatus.style.color = 'var(--danger)';
            }
        });
    }
    const btnUpdateSchema = document.getElementById('update-schema-btn');
    if (btnUpdateSchema) {
        btnUpdateSchema.addEventListener('click', async () => {
            if (!currentPromptName) return;
            const originalText = btnUpdateSchema.innerHTML;
            btnUpdateSchema.innerHTML = '<span style="font-size: 1.1em;">⏳</span> 更新中...';
            btnUpdateSchema.disabled = true;

            try {
                // First save the prompt so the backend reads the latest content
                const reqBody = { content: elPromptTextarea.value };
                if (elSchemaTextarea) reqBody.schema_content = elSchemaTextarea.value;

                let res = await fetch(`/api/prompts/${currentPromptName}`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(reqBody)
                });
                if (!res.ok) {
                    const errData = await res.json();
                    throw new Error(errData.detail || "保存 Prompt 失败");
                }

                // Then call the schema update API
                res = await fetch(`/api/prompts/${currentPromptName}/update_schema`, {
                    method: 'POST'
                });

                if (res.ok) {
                    const data = await res.json();
                    if (elSchemaTextarea && data.schema_content) {
                        elSchemaTextarea.value = data.schema_content;
                    }
                    btnUpdateSchema.innerHTML = '<span style="font-size: 1.1em;">✅</span> 更新成功';
                    setTimeout(() => {
                        btnUpdateSchema.innerHTML = originalText;
                        btnUpdateSchema.disabled = false;
                    }, 2000);
                } else {
                    const errData = await res.json();
                    throw new Error(errData.detail || "更新 Schema 失败");
                }
            } catch (e) {
                alert(e.message || '更新失败');
                btnUpdateSchema.innerHTML = '<span style="font-size: 1.1em;">❌</span> 失败';
                setTimeout(() => {
                    btnUpdateSchema.innerHTML = originalText;
                    btnUpdateSchema.disabled = false;
                }, 2000);
            }
        });
    }
}

// Boot
// ----------------------------------------------------
// Pipeline Chain Visualization Logic
// ----------------------------------------------------
async function fetchAndRenderPipelineChain(index) {
    try {
        const res = await fetch(`/api/requirements/${index}/pipeline-status`);
        if (res.ok) {
            currentPipelineStatus = await res.json();
        } else {
            currentPipelineStatus = {};
        }
    } catch (e) {
        console.error("Failed to fetch pipeline status", e);
        currentPipelineStatus = {};
    }
    chainStartNode = null;
    chainEndNode = null;
    renderPipelineChain();
}

function bindPipelineChainEvents() {
    PIPELINE_STEPS.forEach((step) => {
        const node = document.getElementById('node-' + step.id);
        if (!node) return;

        node.addEventListener('click', () => {
            if (!chainStartNode) {
                chainStartNode = step.id;
            } else if (!chainEndNode) {
                if (chainStartNode === step.id) {
                    chainEndNode = step.id; // Double click = single step mode
                } else {
                    chainEndNode = step.id;
                }
            } else {
                chainStartNode = step.id; // Reset and start new
                chainEndNode = null;
            }
            renderPipelineChain();

            // Toggle platforms group if research is selected
            const groupPlatforms = document.getElementById('group-platforms');
            if (groupPlatforms && document.getElementById('select-force-phase').value === 'custom_range') {
                const startIndex = PIPELINE_STEPS.findIndex(s => s.id === chainStartNode);
                const endIndex = chainEndNode ? PIPELINE_STEPS.findIndex(s => s.id === chainEndNode) : startIndex;
                const finalStart = Math.min(startIndex, endIndex);
                const finalEnd = Math.max(startIndex, endIndex);

                if (finalStart === 0) { // 'research' is index 0
                    groupPlatforms.style.display = 'block';
                } else {
                    groupPlatforms.style.display = 'none';
                }
            }
        });
    });
}

function renderPipelineChain() {
    if (chainStartNode && chainEndNode) {
        const startIndex = PIPELINE_STEPS.findIndex(s => s.id === chainStartNode);
        const endIndex = PIPELINE_STEPS.findIndex(s => s.id === chainEndNode);
        if (endIndex < startIndex) {
            const tempId = chainStartNode;
            chainStartNode = chainEndNode;
            chainEndNode = tempId;
        }
    }

    const LINEAR_PREFIX = ["research", "source", "generate-case", "workflow-extract", "apply-grounding"];
    const BRANCH_21 = ["process-cluster", "process-score"];
    const BRANCH_22 = ["capability-extract", "capability-enrich"];
    const STRATEGY = "strategy";

    let activeSteps = new Set();

    if (chainStartNode && !chainEndNode) {
        activeSteps.add(chainStartNode);
    } else if (chainStartNode && chainEndNode) {
        const start = chainStartNode;
        const end = chainEndNode;

        const start_in_linear = LINEAR_PREFIX.includes(start);
        const start_in_21 = BRANCH_21.includes(start);
        const start_in_22 = BRANCH_22.includes(start);

        const end_in_linear = LINEAR_PREFIX.includes(end);
        const end_in_21 = BRANCH_21.includes(end);
        const end_in_22 = BRANCH_22.includes(end);
        const end_is_strategy = end === STRATEGY;

        // 1. Linear Prefix
        LINEAR_PREFIX.forEach(s => {
            const s_idx = LINEAR_PREFIX.indexOf(s);
            const start_idx = LINEAR_PREFIX.indexOf(start);
            if (start_idx >= 0 && s_idx >= start_idx) {
                if (end_in_linear) {
                    if (s_idx <= LINEAR_PREFIX.indexOf(end)) activeSteps.add(s);
                } else {
                    activeSteps.add(s);
                }
            }
        });

        // 2. Branches
        if (end_is_strategy || (!end_in_21 && !end_in_22 && !end_in_linear)) {
            if (!start_in_21 && !start_in_22) {
                BRANCH_21.forEach(s => activeSteps.add(s));
                BRANCH_22.forEach(s => activeSteps.add(s));
            } else if (start_in_21) {
                const idx = BRANCH_21.indexOf(start);
                BRANCH_21.slice(idx).forEach(s => activeSteps.add(s));
                BRANCH_22.forEach(s => activeSteps.add(s));
            } else if (start_in_22) {
                const idx = BRANCH_22.indexOf(start);
                BRANCH_22.slice(idx).forEach(s => activeSteps.add(s));
                BRANCH_21.forEach(s => activeSteps.add(s));
            }
        } else if (end_in_21) {
            const end_idx = BRANCH_21.indexOf(end);
            const start_idx = start_in_21 ? BRANCH_21.indexOf(start) : 0;
            BRANCH_21.slice(start_idx, end_idx + 1).forEach(s => activeSteps.add(s));
        } else if (end_in_22) {
            const end_idx = BRANCH_22.indexOf(end);
            const start_idx = start_in_22 ? BRANCH_22.indexOf(start) : 0;
            BRANCH_22.slice(start_idx, end_idx + 1).forEach(s => activeSteps.add(s));
        }

        // 3. Strategy
        if (end_is_strategy) {
            activeSteps.add("strategy");
        }
    }

    PIPELINE_STEPS.forEach((step) => {
        const node = document.getElementById('node-' + step.id);
        if (!node) return;

        node.className = 'chain-node';

        if (currentPipelineStatus[step.id]) {
            node.classList.add('completed');
        } else {
            node.classList.add('missing');
        }

        if (activeSteps.has(step.id)) {
            if ((chainStartNode && !chainEndNode) || step.id === chainStartNode || step.id === chainEndNode) {
                node.classList.add('selected');
            } else {
                node.classList.add('selected-range');
            }
        }
    });
}

bindPipelineChainEvents();

// Case Detail Modal Listeners
const btnCloseCaseDetail = document.getElementById('btn-close-case-detail');
const modalCaseDetail = document.getElementById('case-detail-modal');
if (btnCloseCaseDetail && modalCaseDetail) {
    btnCloseCaseDetail.addEventListener('click', () => {
        modalCaseDetail.classList.add('hidden');
    });

    // Close on escape
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && !modalCaseDetail.classList.contains('hidden')) {
            modalCaseDetail.classList.add('hidden');
        }
    });

    // Close on click outside
    modalCaseDetail.addEventListener('click', (e) => {
        if (e.target === modalCaseDetail) {
            modalCaseDetail.classList.add('hidden');
        }
    });
}

window.openCaseDetail = function (p, initialIdx) {
    if (!window._currentRawCasesContext) return;
    const ctx = window._currentRawCasesContext;

    // Determine the list of platforms to aggregate.
    let platformsToAggregate = [p];
    if (p !== 'filtered_cases' && p !== 'source_ex') {
        const crawlerPlatforms = Object.keys(ctx.rawCasesObj).filter(k => k !== 'source' && k !== 'case_detailed' && k !== 'case' && k !== 'images' && k !== 'filtered_cases' && k !== 'source_ex');
        platformsToAggregate = [...crawlerPlatforms, 'source'];
    }

    let casesList = [];
    let globalInitialIdx = 0;
    const seenIds = new Set();

    platformsToAggregate.forEach(plat => {
        if (!ctx.rawCasesObj[plat]) return;
        let platCases = [];
        if (Array.isArray(ctx.rawCasesObj[plat])) {
            platCases = ctx.rawCasesObj[plat];
        } else if (ctx.rawCasesObj[plat].cases) {
            platCases = ctx.rawCasesObj[plat].cases;
        } else if (ctx.rawCasesObj[plat].sources) {
            platCases = ctx.rawCasesObj[plat].sources;
        } else if (ctx.rawCasesObj[plat].by_reason) {
            Object.entries(ctx.rawCasesObj[plat].by_reason).forEach(([reasonKey, reasonObj]) => {
                if (reasonObj.sources && Array.isArray(reasonObj.sources)) {
                    reasonObj.sources.forEach(src => {
                        if (!src.filter_reason) src.filter_reason = reasonKey;
                        platCases.push(src);
                    });
                }
            });
        }
        platCases.forEach((c, idx) => {
            const cId = c.case_id || (c._raw && c._raw.case_id) || (c.post && c.post.channel_content_id) || `temp_${plat}_${idx}`;
            const cUrl = c.source_url || c.url || (c.post && c.post.link) || '';

            const mappedS = ctx.sourceMap[cId] || ctx.sourceMap[cUrl] || (c._raw && ctx.sourceMap[c._raw.case_id]);
            if (plat !== 'filtered_cases' && plat !== 'source' && plat !== 'source_ex' && !mappedS) return;

            if (seenIds.has(cId)) return;
            seenIds.add(cId);

            const augmentedC = { ...c, _actualPlatform: plat };
            if (plat === p && idx === initialIdx) {
                globalInitialIdx = casesList.length;
            }
            casesList.push(augmentedC);
        });
    });

    window._currentModalCases = casesList;
    window._currentModalPlatform = p;
    window._currentModalContext = ctx;
    window._currentModalIdx = globalInitialIdx;

    // Build Sidebar
    let sidebarHtml = '<div class="modal-sidebar">';
    casesList.forEach((c, idx) => {
        const cId = c.case_id || (c._raw && c._raw.case_id) || (c.post && c.post.channel_content_id) || `temp_${idx}`;
        const cUrl = c.source_url || c.url || (c.post && c.post.link) || '';
        const mappedS = ctx.sourceMap[cId] || ctx.sourceMap[cUrl] || (c._raw && ctx.sourceMap[c._raw.case_id]);
        const s = mappedS || c;
        const post = s.post || s || {};
        const title = post.title || c.title || '无标题';

        let metaHtml = '';
        const wf = ctx.detailMap[cId] || (cUrl ? ctx.detailMapByUrl[cUrl] : null) || c;
        const workflowGroups = getWorkflowGroups(wf);
        const capabilityItems = getCapabilityItems(wf);
        if (workflowGroups.length > 0) metaHtml += `<span>工作流 ${workflowGroups.length}</span>`;
        if (capabilityItems.length > 0) metaHtml += `<span>能力 ${capabilityItems.length}</span>`;
        if (!metaHtml) metaHtml = '<span>无提取</span>';

        sidebarHtml += `<div class="modal-sidebar-item ${idx === globalInitialIdx ? 'active' : ''}" id="sidebar-item-${idx}" onclick="window.renderSingleCaseDetail(${idx})">
            <div class="sidebar-item-index">${idx + 1}.</div>
            <div class="sidebar-item-content">
                <div class="sidebar-item-title">${title}</div>
                <div class="sidebar-item-meta">${metaHtml}</div>
            </div>
        </div>`;
    });
    sidebarHtml += '</div>';

    // Build Main Content Skeleton
    const mainHtml = `
        <div class="modal-main-content">
            <div id="modal-main-header" style="padding: 1.5rem 1.5rem 0 1.5rem; flex-shrink: 0;"></div>
            <div class="modal-main-scrollable" id="modal-main-scrollable"></div>
        </div>
    `;

    document.getElementById('case-detail-modal-body').innerHTML = sidebarHtml + mainHtml;

    // Render the selected case
    window.renderSingleCaseDetail(globalInitialIdx);
    document.getElementById('case-detail-modal').classList.remove('hidden');

    // Scroll sidebar to active item
    setTimeout(() => {
        const activeItem = document.getElementById(`sidebar-item-${globalInitialIdx}`);
        if (activeItem) activeItem.scrollIntoView({ block: 'nearest' });
    }, 10);
};

window.renderSingleCaseDetail = function (idx) {
    window._currentModalIdx = idx;
    const ctx = window._currentModalContext;
    const c = window._currentModalCases[idx];
    if (!c) return;

    // Update Sidebar Active State
    document.querySelectorAll('.modal-sidebar-item').forEach(el => el.classList.remove('active'));
    const activeEl = document.getElementById(`sidebar-item-${idx}`);
    if (activeEl) activeEl.classList.add('active');

    const p = c._actualPlatform || window._currentModalPlatform;
    const platCode = p.replace('case_', '');
    const cId = c.case_id || (c._raw && c._raw.case_id) || (c.post && c.post.channel_content_id) || `temp_${idx}`;
    const cUrl = c.source_url || c.url || (c.post && c.post.link) || '';

    const mappedS = ctx.sourceMap[cId] || ctx.sourceMap[cUrl] || (c._raw && ctx.sourceMap[c._raw.case_id]);
    const s = mappedS || c;
    const post = s.post || s || {};
    const platformName = s.platform || (s._raw && s._raw.platform) || platCode;
    const title = post.title || c.title || '无标题';
    const workflowUrl = s.source_url || s.url || cUrl;

    const publishedTime = post.publish_timestamp || post.published_at || '-';
    const likeCount = post.like_count !== undefined ? post.like_count : (post.likes !== undefined ? post.likes : '-');
    const collectCount = post.collect_count !== undefined ? post.collect_count : (post.collects !== undefined ? post.collects : '-');
    const commentCount = post.comment_count !== undefined ? post.comment_count : (post.comments !== undefined ? post.comments : '-');
    const shareCount = post.share_count !== undefined ? post.share_count : (post.shares !== undefined ? post.shares : '-');

    const isFiltered = (c._actualPlatform === 'filtered_cases');
    let filterActionHtml = '';
    if (isFiltered) {
        filterActionHtml = `<button onclick="window.toggleCaseFilter('${cId}', true)" style="padding: 6px 12px; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9em; font-weight: bold; margin-left: auto;">↩️ 恢复至总库</button>`;
    } else {
        filterActionHtml = `<button onclick="window.toggleCaseFilter('${cId}', false)" style="padding: 6px 12px; background: #ef4444; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9em; font-weight: bold; margin-left: auto;">🗑️ 移至被过滤</button>`;
    }

    const headerHtml = `
        <div style="display:flex; justify-content: space-between; align-items: flex-start; gap: 1rem;">
            <h2 style="margin: 0 0 0.5rem 0; font-size: 1.4em; color: var(--text-main); flex: 1;">${title}</h2>
            ${filterActionHtml}
        </div>
        <div style="display: flex; gap: 12px; margin-bottom: 0.8rem;">
            ${workflowUrl ? `<a href="${workflowUrl}" target="_blank" style="color: var(--accent-primary); text-decoration: none; font-size: 0.9em;">原文 ↗</a>` : ''}
            <span style="color: var(--text-muted); font-size: 0.9em;">平台: ${platformName}</span>
        </div>
        <div style="display: flex; gap: 10px; margin-bottom: 1rem; flex-wrap: wrap;">
            <div style="display: flex; flex-direction: column; background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.06); padding: 4px 10px; border-radius: 6px;">
                <span style="font-size: 0.7em; color: var(--text-muted); text-transform: uppercase;">Published</span>
                <span style="font-size: 0.9rem; font-weight: 500; color: var(--text-main);">${publishedTime}</span>
            </div>
            <div style="display: flex; flex-direction: column; background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.06); padding: 4px 10px; border-radius: 6px;">
                <span style="font-size: 0.7em; color: var(--text-muted); text-transform: uppercase;">Likes</span>
                <span style="font-size: 0.9rem; font-weight: 500; color: var(--text-main);">${likeCount}</span>
            </div>
            <div style="display: flex; flex-direction: column; background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.06); padding: 4px 10px; border-radius: 6px;">
                <span style="font-size: 0.7em; color: var(--text-muted); text-transform: uppercase;">Collects</span>
                <span style="font-size: 0.9rem; font-weight: 500; color: var(--text-main);">${collectCount}</span>
            </div>
            <div style="display: flex; flex-direction: column; background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.06); padding: 4px 10px; border-radius: 6px;">
                <span style="font-size: 0.7em; color: var(--text-muted); text-transform: uppercase;">Comments</span>
                <span style="font-size: 0.9rem; font-weight: 500; color: var(--text-main);">${commentCount}</span>
            </div>
            <div style="display: flex; flex-direction: column; background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.06); padding: 4px 10px; border-radius: 6px;">
                <span style="font-size: 0.7em; color: var(--text-muted); text-transform: uppercase;">Shares</span>
                <span style="font-size: 0.9rem; font-weight: 500; color: var(--text-main);">${shareCount}</span>
            </div>
        </div>
    `;
    document.getElementById('modal-main-header').innerHTML = headerHtml;

    // Media & Body
    let mediaHtml = '';
    const images = post.images || [];
    const xImages = post.image_url_list || [];
    const ytThumbnails = post.thumbnails && post.thumbnails.length > 0 ? [post.thumbnails[post.thumbnails.length - 1].url] : [];
    const allImages = [...images, ...xImages.map(img => img.image_url), ...ytThumbnails].filter(Boolean);

    if (allImages.length > 0) {
        mediaHtml += `<div class="image-gallery" style="margin-bottom: 1rem;">`;
        allImages.forEach((imgUrl, imgIdx) => {
            const localPath = `/output/${ctx.reqId}/raw_cases/images/${cId}/${String(imgIdx).padStart(2, '0')}.jpg`;
            mediaHtml += `<div class="image-item" style="cursor:pointer" onclick="window.open(this.querySelector('img').src, '_blank')">
                <img src="${localPath}" onerror="this.onerror=null; this.src='${imgUrl}';">
            </div>`;
        });
        mediaHtml += `</div>`;
    }

    const videos = post.videos || [];
    const xVideos = post.video_url_list || [];
    const allVideos = [...videos, ...xVideos.map(vid => vid.video_url)].filter(Boolean);
    if (allVideos.length > 0) {
        mediaHtml += `<div style="display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 1rem;">`;
        allVideos.forEach(vidUrl => {
            mediaHtml += `<video controls src="${vidUrl}" style="height: 200px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.1);"></video>`;
        });
        mediaHtml += `</div>`;
    }

    const bodyText = post.body_text || post.body || '';

    // Source Panel
    let mainScrollableHtml = `
        <div class="source-panel open" id="source-panel">
            <div class="source-panel-header" onclick="document.getElementById('source-panel').classList.toggle('open')">
                <span>原始内容 / SOURCE POSTS</span>
                <span style="font-size: 0.8em; color: var(--text-muted);">点击展开/折叠</span>
            </div>
            <div class="source-panel-body">
                ${mediaHtml}
                ${bodyText ? `<div style="font-size:0.9rem; line-height:1.6; color:var(--text-main); white-space: pre-wrap;">${bodyText}</div>` : '<div style="color:var(--text-muted)">无正文</div>'}
            </div>
        </div>
    `;

    // Evaluation Panel
    if (s.evaluation && Object.keys(s.evaluation).length > 0) {
        const renderEvalNode = (node, indent = 0) => {
            let html = '';
            if (typeof node === 'object' && node !== null) {
                Object.entries(node).forEach(([k, v]) => {
                    html += `<div style="display: flex; flex-direction: column; padding-left: ${indent}px; margin-bottom: 8px;">
                        <span style="color: var(--text-muted); font-size: 0.85rem; font-weight: bold; text-transform: uppercase;">${k.replace(/_/g, ' ')}</span>`;
                    if (typeof v === 'object' && v !== null) {
                        html += `<div style="margin-top: 4px; border-left: 2px solid rgba(0,0,0,0.1); padding-left: 8px;">${renderEvalNode(v, 0)}</div>`;
                    } else {
                        const valColor = typeof v === 'number' ? '#3b82f6' : 'var(--text-main)';
                        html += `<span style="font-weight: 500; font-size: 0.95rem; color: ${valColor}; margin-top: 2px;">${String(v).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</span>`;
                    }
                    html += `</div>`;
                });
            }
            return html;
        };

        mainScrollableHtml += `
        <div class="case-section" style="margin-top: 1rem;">
            <div style="background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.05); border-radius: 8px; padding: 1rem;">
                <h3 style="margin: 0 0 1rem 0; color: var(--text-main); font-size: 1.1rem; display: flex; align-items: center; gap: 10px;">
                    <span style="color: #10b981;">📊</span> 质量评估 (Evaluation)
                </h3>
                <div style="display: flex; flex-direction: column; gap: 4px;">
                    ${renderEvalNode(s.evaluation)}
                </div>
            </div>
        </div>`;
    }


    // Extracted Data
    const wf = ctx.detailMap[cId] || (workflowUrl ? ctx.detailMapByUrl[workflowUrl] : null) || c;

    const detailedCaseObj = ctx.rawCasesObj['case'] || ctx.rawCasesObj['case_detailed'];
    const caseJsonCases = (detailedCaseObj && detailedCaseObj.cases) || [];
    const realCaseIndex = caseJsonCases.findIndex(jc =>
        (jc.case_id === cId) ||
        (jc._raw && jc._raw.case_id === cId) ||
        (jc.post && jc.post.channel_content_id === cId)
    );
    const caseIndexToPass = realCaseIndex >= 0 ? (caseJsonCases[realCaseIndex].index || (realCaseIndex + 1)) : -1;
    const btnWorkflowHtml = caseIndexToPass !== -1 ? `<button class="btn btn-secondary" style="font-size: 0.8em; padding: 0.3rem 0.6rem; border-radius: 4px;" onclick="event.stopPropagation(); triggerSingleCaseRerun('workflow-extract', ${caseIndexToPass})">🔄 重跑工序</button>` : '';
    const btnCapabilityHtml = caseIndexToPass !== -1 ? `<button class="btn btn-secondary" style="font-size: 0.8em; padding: 0.3rem 0.6rem; border-radius: 4px;" onclick="event.stopPropagation(); triggerSingleCaseRerun('workflow-extract', ${caseIndexToPass})">🔄 重跑能力</button>` : '';

    mainScrollableHtml += `
        <div class="case-section" style="margin-top: 2rem;">
            <div style="display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.02); border-radius: 8px; padding-right: 1rem; cursor: pointer;" onclick="const content = this.nextElementSibling; content.classList.toggle('hidden'); this.querySelector('.case-arrow').textContent = content.classList.contains('hidden') ? '▶' : '▼';">
                <h3 style="margin: 0; padding: 1rem; color: var(--text-main); font-size: 1.1rem; display: flex; align-items: center; gap: 10px; user-select: none;">
                    <span class="case-arrow" style="font-size: 0.8em; color: var(--text-muted); width: 16px; display: inline-block;">▶</span>
                    <span style="color: var(--accent-primary);">⚡</span> 提取的工序 (Strategy)
                </h3>
                ${btnWorkflowHtml}
            </div>
            <div class="hidden" style="padding-top: 1.2rem;">
                ${window.renderStructuredData(getWorkflowItems(wf), 'workflow', wf)}
            </div>
        </div>
        
        <div class="case-section" style="margin-top: 1rem; margin-bottom: 2rem;">
            <div style="display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.02); border-radius: 8px; padding-right: 1rem; cursor: pointer;" onclick="const content = this.nextElementSibling; content.classList.toggle('hidden'); this.querySelector('.case-arrow').textContent = content.classList.contains('hidden') ? '▶' : '▼';">
                <h3 style="margin: 0; padding: 1rem; color: var(--text-main); font-size: 1.1rem; display: flex; align-items: center; gap: 10px; user-select: none;">
                    <span class="case-arrow" style="font-size: 0.8em; color: var(--text-muted); width: 16px; display: inline-block;">▶</span>
                    <span style="color: var(--accent-secondary);">✨</span> 提取的能力 (Capability)
                </h3>
                ${btnCapabilityHtml}
            </div>
            <div class="hidden" style="padding-top: 1.2rem;">
                ${window.renderStructuredData(getCapabilityItems(wf), 'capabilities', wf)}
            </div>
        </div>
    `;

    document.getElementById('modal-main-scrollable').innerHTML = mainScrollableHtml;
};

window.switchDetailTab = function (tabId) {
    document.querySelectorAll('.detail-tab-btn').forEach(btn => btn.classList.remove('active'));
    document.querySelectorAll('.detail-tab-content').forEach(content => content.style.display = 'none');

    document.getElementById(`tab-btn-${tabId}`).classList.add('active');
    document.getElementById(`tab-content-${tabId}`).style.display = 'block';
};

window.renderStructuredData = function (items, type, parentItem = null) {
    if (!items || items.length === 0) {
        return `<div style="color:var(--text-muted); padding: 1rem;">暂无${type === 'workflow' ? '工序' : '能力'}数据</div>`;
    }

    const formatIOs = (ios) => {
        if (!ios || !Array.isArray(ios) || ios.length === 0) return '';
        const escapeHtml = (s) => String(s).replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return ios.map(io => {
            const desc = escapeHtml(io.description || io.role || '未知');
            const mod = escapeHtml(io.modality || '未知');
            return `${desc}[${mod}]`;
        }).join(' + ');
    };

    const buildFullTitle = (inputs, outputs, actionStr, fallbackTitle) => {
        const escapeHtml = (s) => String(s).replace(/</g, '&lt;').replace(/>/g, '&gt;');
        const inStr = formatIOs(inputs) || '无';
        const outStr = formatIOs(outputs) || '无';

        let parts = [];
        parts.push(inStr);
        if (actionStr) parts.push(`<strong>${escapeHtml(actionStr)}</strong>`);
        parts.push(outStr);
        return parts.join(' ➔ ');
    };

    let html = '';
    items.forEach((item, idx) => {
        let title = '';
        const hasValidIO = (arr) => Array.isArray(arr) && arr.length > 0 && (arr[0].role || arr[0].description);
        if (hasValidIO(item.inputs) || hasValidIO(item.outputs) || (item.steps && item.steps.length > 0)) {
            let actionStr = '';
            if (item.action && item.action.description) {
                actionStr = item.action.description;
            } else if (item.method && !item.method.includes('[')) {
                actionStr = item.method;
            } else if (item.steps && Array.isArray(item.steps)) {
                const hasAnyValidIO = item.steps.some(s => hasValidIO(s.inputs) || hasValidIO(s.outputs) || s.body);
                if (hasAnyValidIO) {
                    actionStr = item.steps.map(s => {
                        if (s.action && s.action.description) {
                            return s.action.description;
                        }
                        if (s.body) return s.body.length > 20 ? s.body.substring(0, 20) + '...' : s.body;
                        if (s.method) return s.method;
                        if (s.phase) return s.phase;
                        return '未知';
                    }).join(' ➔ ');
                } else {
                    actionStr = item.method || item.name || type === 'workflow' ? '工作流' : `节点 ${idx + 1}`;
                }
            }

            if (hasValidIO(item.inputs) || hasValidIO(item.outputs)) {
                title = buildFullTitle(item.inputs, item.outputs, actionStr, item.method || item.name || `节点 ${idx + 1}`);
            } else {
                title = String(actionStr).replace(/</g, '&lt;').replace(/>/g, '&gt;');
            }
        } else {
            const escapeHtml = (s) => String(s).replace(/</g, '&lt;').replace(/>/g, '&gt;');
            title = escapeHtml(item.method || item.name || '');
            if (!title && item.action && item.action.description) {
                title = escapeHtml(item.action.description);
            }
            if (!title && item.body) {
                const actText = item.body.length > 50 ? item.body.substring(0, 50) + '...' : item.body;
                title = escapeHtml(actText);
            }
            if (!title) {
                title = escapeHtml(type === 'workflow' ? '工作流' : `节点 ${idx + 1}`);
            }
        }
        if (type === 'workflow' && item.workflow_id) {
            title = `${title} <span style="color:#94a3b8; font-family:monospace; font-size:0.75em;">${String(item.workflow_id).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</span>`;
        }

        // Tree node tags (from apply_to keys) or unstructured_what fallback
        const getApplyToField = (it) => {
            if (it.apply_to_grounding) return { key: 'apply_to_grounding', val: it.apply_to_grounding, suggest: it.suggest_apply_to };
            if (it.apply_to_draft) return { key: 'apply_to_draft', val: it.apply_to_draft, suggest: null };
            if (it.apply_to) return { key: 'apply_to', val: it.apply_to, suggest: it.suggest_apply_to };
            return null;
        };
        const applyToData = getApplyToField(item);

        let treeNodeTags = '';
        if (applyToData && typeof applyToData.val === 'object') {
            const allLeafs = [];
            Object.values(applyToData.val).forEach(v => {
                if (Array.isArray(v)) {
                    v.forEach(pathObj => {
                        let leaf = '';
                        if (typeof pathObj === 'object' && pathObj !== null) {
                            if (pathObj.element) leaf = pathObj.element;
                            else if (pathObj.category_path || pathObj.path) {
                                leaf = (pathObj.category_path || pathObj.path).split('/').pop();
                            }
                        } else {
                            leaf = String(pathObj).split('/').pop();
                        }
                        if (leaf) allLeafs.push(leaf);
                    });
                }
            });
            const uniqueLeafs = [...new Set(allLeafs)];
            const badgeStyle = 'background: #f8fafc; color: #475569; border: 1px solid #cbd5e1; border-radius: 12px; padding: 2px 10px; font-size: 0.85em; font-weight: normal; margin-right: 6px; display: inline-block; white-space: nowrap;';
            treeNodeTags = uniqueLeafs.map(leaf => `<span class="unstruct-badge" style="${badgeStyle}">${leaf.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</span>`).join('');
        } else if (item.unstructured_what && Array.isArray(item.unstructured_what)) {
            const badgeStyle = 'background: #f8fafc; color: #475569; border: 1px solid #cbd5e1; border-radius: 12px; padding: 2px 10px; font-size: 0.85em; font-weight: normal; margin-right: 6px; display: inline-block; white-space: nowrap;';
            treeNodeTags = item.unstructured_what.map(t => `<span class="unstruct-badge" style="${badgeStyle}">${String(t).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</span>`).join('');
        }

        html += `<div class="structured-card">
            <div class="structured-card-title-row" style="display:flex; align-items:center; flex-wrap:wrap; gap: 8px; margin-bottom: 1rem;">
                <div class="structured-card-title" style="margin:0;">${title}</div>
                ${treeNodeTags}
            </div>
        `;

        const renderApplyToVal = (valObj, suggestApplyTo = null) => {
            if (!valObj || typeof valObj !== 'object') return '-';
            const escapeApplyToText = (s) => String(s).replace(/</g, '&lt;').replace(/>/g, '&gt;');
            const renderPathParts = (pathValue, highlight = false) => {
                const pathStr = String(pathValue || '').trim();
                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 `
                    ${prefix ? `<span class="apply-to-path-prefix">${escapeApplyToText(prefix)}</span>` : ''}
                    <span class="apply-to-path-leaf" style="${leafStyle}">${escapeApplyToText(leaf)}</span>
                `;
            };
            const renderTooltip = (pathObj) => {
                if (
                    typeof pathObj !== 'object'
                    || pathObj === null
                    || !(pathObj.rationale || pathObj.body_excerpt || pathObj.body_excerpt_note || pathObj.category_id)
                ) {
                    return '';
                }
                return `
                    <div class="apply-to-tooltip">
                        ${pathObj.category_id ? `<span class="tooltip-id">id: ${pathObj.category_id}</span>` : ''}
                        ${pathObj.rationale ? `<span class="tooltip-rationale">${escapeApplyToText(pathObj.rationale)}</span>` : ''}
                        ${pathObj.body_excerpt ? `<span class="tooltip-body-excerpt">${escapeApplyToText(pathObj.body_excerpt)}</span>` : ''}
                        ${pathObj.body_excerpt_note ? `<span class="tooltip-body-note">${escapeApplyToText(pathObj.body_excerpt_note)}</span>` : ''}
                    </div>
                `;
            };
            const renderEvidence = (pathObj) => {
                if (typeof pathObj !== 'object' || pathObj === null) return '';
                if (!('body_excerpt' in pathObj) && !('body_excerpt_note' in pathObj)) return '';
                const excerpt = pathObj.body_excerpt || '';
                const note = pathObj.body_excerpt_note || '';
                const excerptKey = excerpt ? makeExcerptKey(excerpt) : '';
                return `<div class="apply-to-evidence">
                    <div class="apply-to-evidence-row">
                        <span class="apply-to-evidence-label">关联做法</span>
                        <span class="apply-to-evidence-value apply-to-evidence-note ${note ? '' : 'empty'}" ${excerptKey ? `data-excerpt-key="${excerptKey}"` : ''}>${note ? escapeApplyToText(note) : '空'}</span>
                    </div>
                </div>`;
            };
            let res = '<div style="display:flex; flex-direction:column; gap:6px;">';
            let hasRows = false;
            Object.entries(valObj).forEach(([k, v]) => {
                if (Array.isArray(v) && v.length > 0) {
                    hasRows = true;
                    res += `<div class="apply-to-subrow">
                        <span class="apply-to-key-badge" style="background: rgba(0,0,0,0.05); color: #475569;">${escapeApplyToText(k)}</span>
                        <div class="apply-to-values" style="display:flex; flex-wrap:wrap; gap:4px;">`;

                    v.forEach(pathObj => {
                        let pathStr = '';
                        let elementStr = '';
                        if (typeof pathObj === 'object' && pathObj !== null) {
                            pathStr = pathObj.category_path || pathObj.path || '';
                            elementStr = pathObj.element || '';
                        } else {
                            pathStr = String(pathObj);
                        }

                        let tooltipHtml = renderTooltip(pathObj);

                        let htmlParts = '';
                        if (pathStr && elementStr) {
                            htmlParts = `<span class="apply-to-path-prefix">${escapeApplyToText(pathStr)}</span><span class="apply-to-path-leaf" style="margin-left: 4px;">${escapeApplyToText(elementStr)}</span>`;
                        } else if (pathStr) {
                            htmlParts = renderPathParts(pathStr);
                        }

                        if (htmlParts) {
                            const evidenceHtml = renderEvidence(pathObj);
                            res += `<span class="apply-to-path-block"><span class="apply-to-path-item ${tooltipHtml ? 'has-tooltip' : ''}">${htmlParts}${tooltipHtml}</span>${evidenceHtml}</span>`;
                        }
                    });

                    res += `</div></div>`;
                }
            });

            const suggestItems = Array.isArray(suggestApplyTo)
                ? suggestApplyTo
                : (typeof suggestApplyTo === 'string' && suggestApplyTo.trim() ? [{ path: suggestApplyTo }] : []);
            if (suggestItems.length > 0) {
                hasRows = true;
                res += `<div class="apply-to-subrow">
                    <span class="apply-to-key-badge" style="background:#eff6ff; color:#2563eb; border-color:#bfdbfe;">建议</span>
                    <div class="apply-to-values" style="display:flex; flex-wrap:wrap; gap:4px;">`;
                suggestItems.forEach(item => {
                    const pathStr = typeof item === 'object' && item !== null ? item.path : String(item || '');
                    const tooltipHtml = renderTooltip(item);
                    if (pathStr) {
                        const evidenceHtml = renderEvidence(item);
                        res += `<span class="apply-to-path-block"><span class="apply-to-path-item ${tooltipHtml ? 'has-tooltip' : ''}" style="border: 2px dashed #94a3b8; background: transparent;">${renderPathParts(pathStr, true)}${tooltipHtml}</span>${evidenceHtml}</span>`;
                    }
                });
                res += `</div></div>`;
            }

            res += `</div>`;
            return hasRows ? res : '-';
        };

        // Render apply_to / apply_to_grounding at workflow level (if it exists)
        if (applyToData && typeof applyToData.val === 'object' && Object.keys(applyToData.val).length > 0) {
            html += `<div class="structured-row">
                <div class="structured-label">${applyToData.key}</div>
                <div class="structured-value">${renderApplyToVal(applyToData.val, applyToData.suggest)}</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" style="background:#e0e7ff;color:#3730a3;font-weight:normal;margin-right:6px;">${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>`;
        }

        // Stage rendering removed per request
        // Render effects
        if (item.effects && Array.isArray(item.effects) && item.effects.length > 0) {
            let effectsHtml = '';
            item.effects.forEach(effectItem => {
                if (typeof effectItem === 'string') {
                    effectsHtml += `<li style="margin-bottom: 4px;">${effectItem.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</li>`;
                } else if (typeof effectItem === 'object' && effectItem !== null) {
                    const stmt = effectItem.statement ? effectItem.statement.replace(/</g, '&lt;').replace(/>/g, '&gt;') : 'Effect';
                    let detailsHtml = '';
                    const excludeKeys = ['statement'];
                    Object.entries(effectItem).forEach(([k, v]) => {
                        if (!excludeKeys.includes(k) && v !== null && v !== undefined && v !== '' && (!Array.isArray(v) || v.length > 0)) {
                            let valStr = '';
                            if (Array.isArray(v)) {
                                valStr = `<ul style="margin: 2px 0 0 20px; padding: 0;">` + v.map(vi => `<li>${String(vi).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</li>`).join('') + `</ul>`;
                            } else if (typeof v === 'object') {
                                valStr = JSON.stringify(v);
                            } else {
                                valStr = String(v).replace(/</g, '&lt;').replace(/>/g, '&gt;');
                            }

                            if (Array.isArray(v)) {
                                detailsHtml += `<div style="margin-top: 6px; font-size: 0.9em;">
                                    <div style="color: var(--text-muted); font-weight: 500; margin-bottom: 2px; text-transform: capitalize;">${k.replace(/_/g, ' ')}:</div> 
                                    <div style="color: var(--text-main);">${valStr}</div>
                                </div>`;
                            } else {
                                detailsHtml += `<div style="margin-top: 4px; font-size: 0.9em;">
                                    <span style="color: var(--text-muted); font-weight: 500; text-transform: capitalize;">${k.replace(/_/g, ' ')}:</span> 
                                    <span style="color: var(--text-main);">${valStr}</span>
                                </div>`;
                            }
                        }
                    });

                    effectsHtml += `<li style="list-style: none; margin-bottom: 8px; margin-left: -20px;">
                        <details style="background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.06); border-radius: 6px; padding: 6px 10px;">
                            <summary style="cursor: pointer; font-weight: 500; color: var(--accent-primary); outline: none;">
                                ${stmt}
                            </summary>
                            <div style="padding-top: 8px; margin-top: 6px; border-top: 1px dashed rgba(0,0,0,0.1);">
                                ${detailsHtml}
                            </div>
                        </details>
                    </li>`;
                }
            });

            html += `<div class="structured-row">
                <div class="structured-label">effects</div>
                <div class="structured-value">
                    <ul class="effects-list">
                        ${effectsHtml}
                    </ul>
                </div>
            </div>`;
        }

        // Render confidence fields
        const formatDate = (ts) => {
            if (!ts) return '-';
            if (typeof ts === 'string' && ts.includes('-')) return ts;
            const num = Number(ts);
            if (isNaN(num) || num <= 0) return '-';
            const d = new Date(num > 10000000000 ? num : num * 1000);
            return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
        };

        html += `<div class="structured-row">
            <div class="structured-label" style="display:flex; align-items:center; gap:4px;">
                置信度
            </div>
            <div class="structured-value" style="display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85em;">
                <div style="background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.06); padding: 4px 8px; border-radius: 6px; display:flex; gap: 6px;">
                    <span style="color: var(--text-muted);">Maturity:</span>
                    <span style="font-weight: 500; color: var(--text-main);">${String((item.maturity || (parentItem && parentItem.maturity)) || '-').replace(/</g, '&lt;').replace(/>/g, '&gt;')}</span>
                </div>
                <div style="background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.06); padding: 4px 8px; border-radius: 6px; display:flex; gap: 6px;">
                    <span style="color: var(--text-muted);">Validation:</span>
                    <span style="font-weight: 500; color: var(--text-main);">${(item.validation_count !== undefined && item.validation_count !== null) ? String(item.validation_count).replace(/</g, '&lt;').replace(/>/g, '&gt;') : (parentItem && parentItem.validation_count !== undefined && parentItem.validation_count !== null) ? String(parentItem.validation_count).replace(/</g, '&lt;').replace(/>/g, '&gt;') : '-'}</span>
                </div>
                <div style="background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.06); padding: 4px 8px; border-radius: 6px; display:flex; gap: 6px;">
                    <span style="color: var(--text-muted);">Published:</span>
                    <span style="font-weight: 500; color: var(--text-main);">${formatDate(item.published_at || (parentItem && parentItem.published_at))}</span>
                </div>
                <div style="background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.06); padding: 4px 8px; border-radius: 6px; display:flex; gap: 6px;">
                    <span style="color: var(--text-muted);">Last Verified:</span>
                    <span style="font-weight: 500; color: var(--text-main);">${formatDate(item.last_verified_at || (parentItem && parentItem.last_verified_at))}</span>
                </div>
                <div style="background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.06); padding: 4px 8px; border-radius: 6px; display:flex; gap: 6px;">
                    <span style="color: var(--text-muted);">Created:</span>
                    <span style="font-weight: 500; color: var(--text-main);">${formatDate(item.created_at || (parentItem && parentItem.created_at))}</span>
                </div>
                <div style="background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.06); padding: 4px 8px; border-radius: 6px; display:flex; gap: 6px;">
                    <span style="color: var(--text-muted);">Updated:</span>
                    <span style="font-weight: 500; color: var(--text-main);">${formatDate(item.updated_at || (parentItem && parentItem.updated_at))}</span>
                </div>
            </div>
        </div>`;

        // Render feedback if available
        const feedbackVal = item.feedback || (parentItem && parentItem.feedback);
        if (feedbackVal) {
            let feedbackHtml = '';
            if (typeof feedbackVal === 'object' && feedbackVal !== null) {
                Object.entries(feedbackVal).forEach(([k, v]) => {
                    if (v !== null && v !== undefined && String(v).trim() !== '') {
                        feedbackHtml += `<div style="background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.06); padding: 4px 8px; border-radius: 6px; display:flex; gap: 6px;">
                            <span style="color: var(--text-muted);">${k}:</span>
                            <span style="font-weight: 500; color: var(--text-main);">${v}</span>
                        </div>`;
                    }
                });
                if (feedbackHtml !== '') {
                    feedbackHtml = `<div style="display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85em;">${feedbackHtml}</div>`;
                }
            } else if (typeof feedbackVal === 'string' && feedbackVal.trim() !== '') {
                feedbackHtml = `<div style="color: var(--text-main); font-size: 0.95em; line-height: 1.5; white-space: pre-wrap; padding-top: 2px;">${String(feedbackVal).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>`;
            }

            if (feedbackHtml !== '') {
                html += `<div class="structured-row">
                    <div class="structured-label">feedback</div>
                    <div class="structured-value" style="display: flex; align-items: center;">
                        ${feedbackHtml}
                    </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>`;
        }

        // Helper for inputs/outputs (Moved up so it can be used by steps)
        const renderDataObjList = (list) => {
            const isValid = (v) => v !== null && v !== undefined && String(v).toLowerCase() !== 'null' && String(v).toLowerCase() !== 'none' && String(v).trim() !== '';

            return list.map(io => {
                const desc = isValid(io.description) ? io.description.replace(/</g, '&lt;').replace(/>/g, '&gt;') : '';
                const mod = isValid(io.modality) ? io.modality : '';
                const relation = isValid(io.relation) ? io.relation.replace(/</g, '&lt;').replace(/>/g, '&gt;') : '';

                let content = '';
                if (mod) {
                    content += `<span class="data-type-badge" style="background:#e0e7ff;color:#3730a3;font-weight:normal;margin-right:6px;margin-bottom:2px;display:inline-block;">${mod}</span>`;
                }
                if (desc) {
                    content += desc;
                }

                let extraHtml = '';
                if (relation) {
                    extraHtml = `<div style="font-size: 0.85em; color: #94a3b8; margin-top: 2px; font-weight: normal;">↳ relation: ${relation}</div>`;
                }

                if (!content) {
                    const keys = Object.keys(io);
                    if (keys.length === 1 && typeof io[keys[0]] === 'string') {
                        content = `<span class="data-type-badge">${keys[0]}</span><span class="io-desc" style="margin-left:6px;">${io[keys[0]]}</span>`;
                    } else {
                        content = `<span class="data-type-badge">未知</span>`;
                    }
                }
                return `<div style="margin-bottom: 6px; color: var(--text-main); font-weight: bold; line-height: 1.5; word-wrap: break-word;">${content}${extraHtml}</div>`;
            }).join('');
        };

        // Render steps array specially
        if (item.steps && Array.isArray(item.steps)) {
            const allCapabilities = (item && item.capability) || (parentItem && parentItem.capability) || [];
            const escapeHtml = (s) => String(s).replace(/</g, '&lt;').replace(/>/g, '&gt;');
            const minWidth = 1250;
            const renderAction = (src) => {
                if (!src) return '-';
                if (src.action && src.action.description) {
                    const description = escapeHtml(src.action.description);
                    const reasoning = src.action.reasoning ? escapeHtml(src.action.reasoning) : '';
                    return `<span class="action-description-tooltip">
                        <span class="data-type-badge" style="background:#e0e7ff;color:#3730a3;font-weight:normal;margin-right:6px;margin-bottom:2px;display:inline-block;">${description}</span>
                        ${reasoning ? `<span class="action-reasoning-popover">${reasoning}</span>` : ''}
                    </span>`;
                }
                if (src.method) return escapeHtml(src.method);
                if (src.description) return escapeHtml(src.description);
                return '-';
            };
            const renderTools = (tools) => {
                if (!tools || !Array.isArray(tools) || tools.length === 0) return '-';
                return tools.map(t => `<span class="structured-badge tool-badge" style="display:inline-block; margin:2px;">${escapeHtml(t)}</span>`).join('');
            };
            const renderEffects = (effects) => {
                if (!effects || !Array.isArray(effects) || effects.length === 0) return '-';
                const renderKeyTag = (keyText) => `<span style="display:inline-block; padding: 2px 6px; background: #f1f5f9; color: #475569; border-radius: 4px; font-size: 0.85em; font-weight: 500; margin-right: 6px; border: 1px solid #e2e8f0; vertical-align: middle; white-space: nowrap;">${keyText}</span>`;
                return `<div style="display:flex; flex-direction:column; gap:8px;">${effects.map(effect => {
                    if (typeof effect === 'string') {
                        return `<div class="effect-item"><div style="margin-bottom: 2px; display: flex; align-items: flex-start; line-height: 1.6;">${renderKeyTag('效果')}<span style="flex:1;">${escapeHtml(effect)}</span></div></div>`;
                    }
                    if (typeof effect !== 'object' || effect === null) return '';
                    const statement = effect.statement ? escapeHtml(effect.statement) : '效果';
                    const criteria = effect.criteria ? escapeHtml(effect.criteria) : '';
                    const judgeMethod = effect.judge_method ? escapeHtml(effect.judge_method) : '';
                    const negativeExamples = Array.isArray(effect.negative_examples) && effect.negative_examples.length > 0
                        ? `<div style="display:flex; flex-direction:column; gap:4px; flex:1;">` +
                        effect.negative_examples.map(ex => `<span style="background: #f8fafc; color: #64748b; padding: 2px 8px; border-radius: 4px; font-size: 0.9em; border: 1px solid #cbd5e1; display: inline-block; word-break: break-word;">${escapeHtml(ex)}</span>`).join('') +
                        `</div>`
                        : '';
                    return `<div class="effect-item">
                        <div class="effect-content" style="font-size: 0.95em; line-height: 1.6;">
                            <div style="font-weight: 600; margin-bottom: 6px; color: #0f172a; font-size: 1.05em;">${statement}</div>
                            ${criteria ? `<div style="margin-bottom: 4px; display: flex; align-items: flex-start;">${renderKeyTag('判断标准')}<span style="flex:1; color: #334155;">${criteria}</span></div>` : ''}
                            ${judgeMethod ? `<div style="margin-bottom: 4px; display: flex; align-items: flex-start;">${renderKeyTag('评判方式')}<span style="flex:1; color: #334155;">${judgeMethod}</span></div>` : ''}
                            ${negativeExamples ? `<div style="display: flex; align-items: flex-start;">${renderKeyTag('负面示例')}${negativeExamples}</div>` : ''}
                        </div>
                    </div>`;
                }).join('')}</div>`;
            };
            const getStepCapabilities = (step) => {
                if (!step || !step.step_id) return [];
                const workflowId = item && item.workflow_id;
                return allCapabilities.filter(capability => {
                    const ref = capability.workflow_step_ref || {};
                    const refStepId = ref.step_id;
                    const refWorkflowId = ref.workflow_id;
                    if (refStepId === step.step_id && (!workflowId || !refWorkflowId || refWorkflowId === workflowId)) {
                        return true;
                    }
                    return capability.capability_id && new RegExp(`^c_${workflowId || 'w[0-9]+'}_${step.step_id}_[0-9]+$`).test(capability.capability_id);
                });
            };
            const matchedCapabilities = new Set();
            const collectBodyExcerpts = (applyTo, suggestApplyTo) => {
                const excerpts = [];
                const addExcerpt = (entry) => {
                    if (entry && typeof entry === 'object' && typeof entry.body_excerpt === 'string' && entry.body_excerpt.trim()) {
                        excerpts.push(entry.body_excerpt.trim());
                    }
                };
                if (applyTo && typeof applyTo === 'object') {
                    Object.values(applyTo).forEach(items => {
                        if (Array.isArray(items)) items.forEach(addExcerpt);
                    });
                }
                if (Array.isArray(suggestApplyTo)) {
                    suggestApplyTo.forEach(addExcerpt);
                }
                return [...new Set(excerpts)].sort((a, b) => b.length - a.length);
            };
            const renderBodyWithExcerptHighlights = (body, applyTo, suggestApplyTo) => {
                if (!body) return '-';
                const text = String(body);
                const excerpts = collectBodyExcerpts(applyTo, suggestApplyTo);
                if (excerpts.length === 0) return escapeHtml(text);

                let out = '';
                let i = 0;
                while (i < text.length) {
                    const match = excerpts.find(excerpt => text.startsWith(excerpt, i));
                    if (match) {
                        out += `<span class="body-excerpt-highlight" data-excerpt-key="${makeExcerptKey(match)}">${escapeHtml(match)}</span>`;
                        i += match.length;
                    } else {
                        out += escapeHtml(text[i]);
                        i += 1;
                    }
                }
                return out;
            };
            const renderCapabilityColumns = (capability) => {
                const applyTo = capability && (capability.apply_to_draft || capability.apply_to_grounding || capability.apply_to);
                const suggestApplyTo = capability && capability.apply_to_draft ? null : capability && capability.suggest_apply_to;
                const bodyHtml = capability && capability.body ? renderBodyWithExcerptHighlights(capability.body, applyTo, suggestApplyTo) : '-';
                return `
                    <td class="capability-cell" style="font-family: monospace;">
                        <span class="row-expand-icon">▶</span>
                        ${capability && capability.capability_id ? `<span style="display:inline-block; color:#94a3b8; font-size:0.85em; font-weight:400;">${escapeHtml(capability.capability_id)}</span>` : '-'}
                    </td>
                    <td class="capability-cell">${capability && capability.inputs && capability.inputs.length > 0 ? renderDataObjList(capability.inputs) : '-'}</td>
                    <td class="capability-cell">${renderAction(capability)}</td>
                    <td class="capability-cell">${capability && capability.outputs && capability.outputs.length > 0 ? renderDataObjList(capability.outputs) : '-'}</td>
                    <td class="capability-cell" style="font-size:0.9em;"><div class="capability-clamp apply-to-clamp">${applyTo ? renderApplyToVal(applyTo, suggestApplyTo) : '-'}</div></td>
                    <td class="capability-cell"><div class="capability-clamp capability-text">${bodyHtml}</div></td>
                    <td class="capability-cell"><div class="capability-clamp">${capability ? renderEffects(capability.effects) : '-'}</div></td>
                    <td class="capability-cell"><div class="capability-clamp">${capability ? renderTools(capability.tools) : '-'}</div></td>
                `;
            };

            html += `<div class="structured-row">
                <div class="structured-label">steps</div>
                <div class="structured-value" style="width: 100%; overflow-x: auto; padding-bottom: 8px;">
                    <style>
                        .steps-table tbody tr { cursor: pointer; transition: background 0.2s; }
                        .steps-table tbody tr:hover { background: rgba(0,0,0,0.02) !important; }
                        .steps-table td { border-bottom: 1px solid rgba(0,0,0,0.05); }
                        .steps-table .step-merged-cell { background: #fbfdff; border-right: 1px dashed rgba(0,0,0,0.08); }
                        .steps-table .capability-cell { padding: 12px 10px; vertical-align: top; line-height: 1.5; color: var(--text-main); }
                        .steps-table .capability-clamp { max-height: 72px; overflow: hidden; position: relative; }
                        .steps-table .capability-clamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: linear-gradient(to bottom, rgba(255,255,255,0), white); pointer-events: none; }
                        .steps-table tr.capability-expanded .capability-clamp { max-height: none; overflow: visible; }
                        .steps-table tr.capability-expanded .capability-clamp::after { display: none; }
                        .steps-table .row-expand-icon { display: inline-block; margin-right: 6px; color: var(--text-muted); font-size: 0.8em; transition: transform 0.2s; }
                        .steps-table tr.capability-expanded .row-expand-icon { transform: rotate(90deg); }
                        .steps-table .capability-text { white-space: pre-wrap; word-break: break-word; }
                        .steps-table .action-description-tooltip { position: relative; display: inline-block; max-width: 100%; }
                        .steps-table .action-reasoning-popover {
                            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;
                        }
                        .steps-table .action-description-tooltip:hover .action-reasoning-popover { display: block; }
                        .steps-table .effect-item { padding-bottom:8px; margin-bottom:8px; border-bottom:1px dashed rgba(0,0,0,0.08); color:var(--text-main); line-height:1.5; }
                        .steps-table .effect-item:last-child { margin-bottom:0; padding-bottom:0; border-bottom:0; }
                        .steps-table .effect-content { min-width:0; flex:1; }
                        .steps-table .effect-statement { color:var(--text-main); font-weight:600; }
                        .steps-table .effect-criteria { margin-top:4px; color:var(--text-secondary); font-size:0.9em; line-height:1.45; }
                        .steps-table .effect-meta { margin-top:6px; display:flex; flex-wrap:wrap; gap:4px; }
                        .steps-table .effect-method { background:#e0e7ff; color:#3730a3; font-weight:normal; margin-right:6px; margin-bottom:2px; display:inline-block; transform:translateY(-1px); }
                        .steps-table .effect-negative { background:#f8fafc; color:#64748b; border:1px solid #cbd5e1; border-radius:999px; padding:1px 7px; font-size:0.78em; }
                    </style>
                    <table class="steps-table" style="width: 100%; min-width: ${minWidth + 220}px; border-collapse: collapse; margin-top: 8px; font-size: 0.9em; background: white; border-radius: 8px; overflow: visible; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
                        <thead>
                            <tr style="background: rgba(0,0,0,0.03); border-bottom: 2px solid rgba(0,0,0,0.1); text-align: left;">
                                <th style="padding: 12px 10px; width: 60px;">序号</th>
                                <th style="padding: 12px 10px; width: 90px;">阶段</th>
                                <th style="padding: 12px 8px; width: 90px;"></th>
                                <th style="padding: 12px 10px; width: 180px;">输入</th>
                                <th style="padding: 12px 10px; width: 140px;">动作</th>
                                <th style="padding: 12px 10px; width: 180px;">输出</th>
                                <th style="padding: 12px 10px; width: 260px;">作用域</th>
                                <th style="padding: 12px 10px; width: 300px;">做法</th>
                                <th style="padding: 12px 10px; width: 360px;">效果</th>
                                <th style="padding: 12px 10px; width: 130px;">工具</th>
                            </tr>
                        </thead>
                        <tbody>`;

            item.steps.forEach((step, stepIdx) => {
                const stepCapabilities = getStepCapabilities(step);
                stepCapabilities.forEach(capability => matchedCapabilities.add(capability));
                const capabilitiesToRender = stepCapabilities.length > 0 ? stepCapabilities : [null];
                const rowspan = capabilitiesToRender.length;

                capabilitiesToRender.forEach((capability, capabilityIdx) => {
                    html += `
                        <tr style="vertical-align: top;" onclick="this.classList.toggle('capability-expanded')">
                            ${capabilityIdx === 0 ? `
                            <td class="step-merged-cell" rowspan="${rowspan}" style="padding: 14px 10px; font-weight: 600; color: var(--text-muted); text-align: center;">
                                ${step.order || stepIdx + 1}
                            </td>
                            <td class="step-merged-cell" rowspan="${rowspan}" style="padding: 14px 10px;">
                                ${step.phase ? `<span class="structured-badge" style="background:#f1f5f9; color:#475569; font-weight: 500;">${escapeHtml(step.phase)}</span>` : '-'}
                            </td>` : ''}
                            ${renderCapabilityColumns(capability)}
                        </tr>
                    `;
                });
            });
            allCapabilities.filter(capability => !matchedCapabilities.has(capability)).forEach(capability => {
                html += `
                    <tr style="vertical-align: top;" onclick="this.classList.toggle('capability-expanded')">
                        <td class="step-merged-cell" style="padding: 14px 10px; font-weight: 600; color: var(--text-muted); text-align: center;">-</td>
                        <td class="step-merged-cell" style="padding: 14px 10px;">
                            <span class="structured-badge" style="background:#f8fafc; color:#64748b; font-weight: 500;">独立能力</span>
                        </td>
                        ${renderCapabilityColumns(capability)}
                    </tr>
                `;
            });
            html += `</tbody></table></div></div>`;
        }


        // 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:6px;">
                    ${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" style="display:flex; flex-direction:column; gap:6px;">`;
            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:6px;">
                    ${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" style="display:flex; flex-direction:column; gap:6px;">`;
            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 (for non-step items like capabilities)
        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>`;
        }

        // Dynamic fallback for any other unhandled keys
        const handledKeys = [
            'method', 'name', 'action', 'unstructured_what', 'apply_to_grounding', 'apply_to_draft', 'apply_to',
            'suggest_apply_to', 'stage', 'effects', 'body', 'steps', 'inputs', 'outputs', 'tools',
            'workflow_id', 'capability'
        ];

        Object.keys(item).forEach(k => {
            if (!handledKeys.includes(k)) {
                let v = item[k];
                if (v === null || v === undefined || v === '') return;

                let displayHtml = '';
                if (typeof v === 'object') {
                    if (Array.isArray(v)) {
                        if (v.length === 0) return;
                        if (typeof v[0] === 'object') {
                            displayHtml = `<pre style="margin:0; background:rgba(0,0,0,0.03); padding:8px; border-radius:4px; font-size:0.85em; overflow-x:auto;">${JSON.stringify(v, null, 2).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</pre>`;
                        } else {
                            displayHtml = v.map(vi => `<span class="structured-badge">${String(vi).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</span>`).join('');
                        }
                    } else {
                        if (Object.keys(v).length === 0) return;
                        displayHtml = `<pre style="margin:0; background:rgba(0,0,0,0.03); padding:8px; border-radius:4px; font-size:0.85em; overflow-x:auto;">${JSON.stringify(v, null, 2).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</pre>`;
                    }
                } else {
                    displayHtml = String(v).replace(/</g, '&lt;').replace(/>/g, '&gt;');
                }

                html += `<div class="structured-row">
                    <div class="structured-label">${k}</div>
                    <div class="structured-value">${displayHtml}</div>
                </div>`;
            }
        });

        html += `</div>`;
    });

    return html;
};

window.triggerSingleCaseRerun = async function (step, caseIndex) {
    if (typeof currentSelectedIndex === 'undefined' || currentSelectedIndex === null) {
        alert("请先选择一个需求项目！");
        return;
    }

    const confirmMsg = `确定要针对当前 Case 单独重跑 [${step}] 步骤吗？\n注意：这会覆盖现有的提取结果！`;
    if (!confirm(confirmMsg)) return;

    try {
        const payload = {
            use_claude_sdk: false, // Default
            only_step: step,
            case_index: caseIndex
        };

        // Use global Claude SDK checkbox if it's checked in the UI
        const cbClaudeSdk = document.getElementById('check-claude-sdk');
        if (cbClaudeSdk) {
            payload.use_claude_sdk = cbClaudeSdk.checked;
        }

        const res = await fetch(`/api/pipeline/run/${currentSelectedIndex}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });

        if (res.ok) {
            alert(`✅ 单Case重跑已触发 (${step})！请在 Pipeline 终端查看进度。`);
            // Show the logs modal instead of non-existent logs tab
            const btnViewLogs = document.getElementById('btn-view-logs');
            if (btnViewLogs) {
                btnViewLogs.click();
            }

            const modalCaseDetail = document.getElementById('case-detail-modal');
            if (modalCaseDetail) modalCaseDetail.classList.add('hidden');
        } else {
            const err = await res.json();
            alert(`启动重跑失败: ${err.detail || JSON.stringify(err)}`);
        }
    } catch (e) {
        console.error("Error triggering single case rerun:", e);
        alert(`发生错误: ${e.message}`);
    }
};

window.toggleCaseFilter = async function (caseId, isRestore) {
    if (currentSelectedIndex === null) return;
    const reqIndex = currentSelectedIndex;

    let reason = "manual_delete";
    if (!isRestore) {
        reason = prompt("请输入移除原因 (默认: manual_delete):", "manual_delete");
        if (reason === null) return; // Cancelled
        if (!reason.trim()) reason = "manual_delete";
    }

    try {
        const action = isRestore ? 'restore' : 'filter';
        const res = await fetch(`/api/requirements/${reqIndex}/cases/${action}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ case_id: caseId, reason: reason })
        });

        if (!res.ok) {
            const err = await res.json();
            alert('操作失败: ' + (err.detail || '未知错误'));
            return;
        }

        // Close modal and refresh data
        document.getElementById('case-detail-modal').classList.add('hidden');
        document.getElementById('btn-refresh-data').click();
    } catch (e) {
        console.error(e);
        alert('操作失败');
    }
};

init();