howard
/
Agent


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer">
    <title>流水线控制台</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/static/style.css">
    <style>
        .dag-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            gap: 4px;
            padding: 10px 0;
        }

        .dag-row {
            display: flex;
            justify-content: center;
            width: 100%;
        }

        .dag-arrow {
            color: #64748b;
            font-size: 1.2em;
            line-height: 1;
            user-select: none;
        }

        .dag-branch-split {
            display: flex;
            width: 100%;
            justify-content: center;
            gap: 20px;
            margin-top: 4px;
            margin-bottom: 4px;
        }

        .dag-branch {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .dag-branch-arrow-left {
            color: #64748b;
            font-size: 1.2em;
            line-height: 1;
            user-select: none;
            transform: translateX(10px);
        }

        .dag-branch-arrow-right {
            color: #64748b;
            font-size: 1.2em;
            line-height: 1;
            user-select: none;
            transform: translateX(-10px);
        }

        .chain-node {
            background: #1e293b;
            border: 2px solid #334155;
            border-radius: 6px;
            padding: 6px 12px;
            color: #94a3b8;
            font-size: 0.85em;
            cursor: pointer;
            user-select: none;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
            text-align: center;
            min-width: 140px;
            justify-content: center;
        }

        .chain-node:hover {
            border-color: #64748b;
            background: #334155;
        }

        .chain-node.completed {
            border-color: #10b981;
            color: #10b981;
        }

        .chain-node.completed::before {
            content: "✓";
        }

        .chain-node.missing {
            border-color: #f59e0b;
            color: #f59e0b;
            opacity: 0.7;
        }

        .chain-node.missing::before {
            content: "○";
        }

        .chain-node.selected {
            background: rgba(59, 130, 246, 0.2);
            border-color: #3b82f6;
            color: #fff;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
        }

        .chain-node.selected-range {
            background: rgba(59, 130, 246, 0.1);
            border-color: #60a5fa;
            color: #e2e8f0;
        }

        .prompt-node.active {
            background: rgba(16, 185, 129, 0.2);
            border-color: #10b981;
            color: #fff;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
        }
    </style>
</head>

<body>
    <div class="app-container">
        <!-- Topbar -->
        <header class="topbar glass-panel">
            <div class="topbar-left">
                <h2 style="margin: 0; font-size: 1.2rem; background: linear-gradient(to right, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; flex-shrink: 0;">⚡ 流水线</h2>
                <select id="req-selector" class="glass-input"></select>
                <button class="btn btn-primary btn-small" id="btn-add-req" title="添加新需求">➕</button>
                <button class="btn btn-secondary btn-small" id="btn-edit-req" title="编辑需求名称">✏️</button>
                <button class="btn btn-secondary btn-small" id="btn-open-prompts" title="编辑提示词">⚙️</button>
                <div class="stats" id="stats-container" style="margin-left: 10px;"></div>
            </div>
            <div class="topbar-right" style="display: flex; align-items: center; gap: 8px;">
                <!-- Merged Tabs in Topbar -->
                <div class="data-tabs-pill" style="display: flex; gap: 6px; margin-right: 15px;">
                    <button class="tab-btn-pill active" data-target="tab-raw">Case 案例</button>
                    <button class="tab-btn-pill" data-target="tab-capability">Capability 能力</button>
                    <button class="tab-btn-pill" data-target="tab-blueprint">Strategy 工序</button>
                </div>
                <!-- Search Input -->
                <input type="text" class="search-input" placeholder="搜索标题 / 能力 / 工序 / 关键词" style="padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.85rem; outline: none; min-width: 220px; margin-right: 15px;">
                
                <label style="display: flex; align-items: center; cursor: pointer; gap: 4px; margin-right: 15px;">
                    <input type="checkbox" id="check-claude-sdk" checked>
                    <span style="font-size: 0.85rem; color: var(--text-muted);">使用 Claude Agent SDK (Max)</span>
                </label>

                <button class="btn btn-secondary btn-small" id="btn-refresh-data" title="局部刷新当前数据，保持页面位置">🔄 刷新数据</button>
                <button class="btn btn-primary btn-small" id="btn-open-run-modal">🚀 运行流水线</button>
            </div>
        </header>

        <!-- Main Content -->
        <main class="main-content glass-panel" id="main-content">
            <div class="empty-state" id="empty-state">
                <div class="icon">✨</div>
                <h2>选择一个需求查看详情</h2>
                <p>监控流水线执行情况并查看生成的数据</p>
            </div>

            <div class="detail-view hidden" id="detail-view">
                    <!-- header removed -->

                <div class="status-banner hidden" id="status-banner">
                    <div class="status-indicator"></div>
                    <span id="status-text">运行中...</span>
                    <button class="btn btn-small" id="btn-view-logs">查看日志</button>
                    <button class="btn btn-small" id="btn-stop-pipeline"
                        style="background-color: var(--danger); border-color: var(--danger); margin-left: 10px; display: none;">🛑
                        停止</button>
                </div>


                <div class="tab-content-container">
                    <div class="tab-content active" id="tab-raw">
                        <div class="content-viewer" id="json-raw">加载中...</div>
                    </div>

                    <div class="tab-content" id="tab-capability" style="height: 100%; padding: 0;">
                        <iframe src="http://localhost:9999/capabilities/embed" style="width: 100%; height: 100%; border: none; border-radius: 8px;"></iframe>
                    </div>

                    <div class="tab-content" id="tab-blueprint">
                        <div class="content-viewer" id="json-blueprint">加载中...</div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Run Modal -->
    <div class="modal-overlay hidden" id="run-modal">
        <div class="modal glass-panel">
            <div class="modal-header">
                <h3>配置流水线运行</h3>
                <button class="close-btn" id="btn-close-modal">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>重启阶段</label>
                    <select id="select-force-phase" class="glass-input"
                        style="background-color: #1e293b; color: white; margin-top: 5px;">
                        <option value="smart">智能恢复 (从上次中断处继续)</option>
                        <option value="custom_range" style="color: #60a5fa; font-weight: bold;">[高级] 自定义区间: 可视化选择始终点
                        </option>
                        <optgroup label="按整体阶段运行">
                            <option value="phase1">Phase 1: 数据采编全流程 (重新爬取并提取)</option>
                            <!-- <option value="phase2">Phase 2: 并行处理全流程 (分析聚类与打分)</option>
                            <option value="phase3">Phase 3: 终态策略组装 (重新生成策略)</option> -->
                        </optgroup>
                        <optgroup label="按单步运行">
                            <option value="step_1.1">1.1 分布式爬取 (仅爬取选定平台)</option>
                            <option value="step_1.5">1.5 提取数据源 (生成 source.json)</option>
                            <option value="step_1.6">1.6 格式标准化 (生成 case.json)</option>
                            <option value="step_1.6_extract">1.6 提取 (修改 case.json)</option>
                            <option value="step_1.7">1.7 场景映射 (修改 case.json)</option>
                            <!-- <option value="step_2.1.1">2.1.1 工序聚类 (生成 blueprint_temp.json)</option>
                            <option value="step_2.1.2">2.1.2 工序打分 (生成 process.json)</option>
                            <option value="step_2.2.1">2.2.1 能力提取 (生成 capabilities_temp.json)</option>
                            <option value="step_2.2.2">2.2.2 能力丰富化 (生成 capabilities.json)</option>
                            <option value="step_3.0">3.0 策略组装 (生成 strategy.json)</option> -->
                        </optgroup>
                    </select>
                </div>

                <div id="pipeline-chain-container" class="hidden"
                    style="margin-top: 15px; padding: 15px; background: rgba(0,0,0,0.2); border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.05);">
                    <div
                        style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                        <label style="margin: 0; color: #94a3b8; font-size: 0.9em;">点击节点选择起点和终点 (双击单选)</label>
                        <button id="btn-reset-chain" class="btn btn-small"
                            style="padding: 2px 8px; font-size: 0.8em; background: rgba(0, 0, 0, 0.1);">重置选择</button>
                    </div>
                    <div class="dag-container">
                        <div class="dag-row">
                            <div class="chain-node" data-id="research" id="node-research">1.1 分布式爬取</div>
                        </div>
                        <div class="dag-arrow">↓</div>
                        <div class="dag-row">
                            <div class="chain-node" data-id="source" id="node-source">1.5 提取数据源</div>
                        </div>
                        <div class="dag-arrow">↓</div>
                        <div class="dag-row">
                            <div class="chain-node" data-id="generate-case" id="node-generate-case">1.6 格式标准化</div>
                        </div>
                        <div class="dag-arrow">↓</div>
                        <div class="dag-row">
                            <div class="chain-node" data-id="workflow-extract" id="node-workflow-extract">1.6 提取</div>
                        </div>
                        <div class="dag-arrow">↓</div>
                        <div class="dag-row">
                            <div class="chain-node" data-id="apply-grounding" id="node-apply-grounding">1.7 场景映射</div>
                        </div>

                        <!-- FUTURE STEPS
                        <div class="dag-branch-split">
                            <div class="dag-branch">
                                <div class="dag-branch-arrow-left">↙</div>
                                <div class="chain-node" data-id="process-cluster" id="node-process-cluster">2.1.1 工序聚类
                                </div>
                                <div class="dag-arrow">↓</div>
                                <div class="chain-node" data-id="process-score" id="node-process-score">2.1.2 工序打分</div>
                                <div class="dag-branch-arrow-left" style="transform: translateX(10px) rotate(-90deg);">↘
                                </div>
                            </div>
                            <div class="dag-branch">
                                <div class="dag-branch-arrow-right">↘</div>
                                <div class="chain-node" data-id="capability-extract" id="node-capability-extract">2.2.1
                                    能力提取</div>
                                <div class="dag-arrow">↓</div>
                                <div class="chain-node" data-id="capability-enrich" id="node-capability-enrich">2.2.2
                                    能力丰富化</div>
                                <div class="dag-branch-arrow-right" style="transform: translateX(-10px) rotate(90deg);">
                                    ↙</div>
                            </div>
                        </div>

                        <div class="dag-row">
                            <div class="chain-node" data-id="strategy" id="node-strategy">3.0 策略组装</div>
                        </div>
                        -->
                    </div>
                </div>

                <div class="form-group" id="group-platforms">
                    <label>平台列表 (用逗号分隔)</label>
                    <input type="text" id="input-platforms" value="xhs,gzh,zhihu,x" class="glass-input">
                </div>
                </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" id="btn-cancel-run">取消</button>
                <button class="btn btn-primary" id="btn-confirm-run">执行</button>
            </div>
        </div>
    </div>

    <!-- Edit Requirement Modal -->
    <div class="modal-overlay hidden" id="edit-req-modal">
        <div class="modal glass-panel" style="max-width: 600px; width: 100%;">
            <div class="modal-header">
                <h2>✏️ 修改需求文本</h2>
                <button class="close-btn" id="btn-close-edit-req">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>需求描述</label>
                    <textarea id="edit-req-textarea" class="glass-input"
                        style="height: 150px; resize: vertical; line-height: 1.5; width: 100%; box-sizing: border-box;"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" id="btn-cancel-edit-req">取消</button>
                <button class="btn btn-primary" id="btn-save-edit-req">仅保存</button>
                <button class="btn btn-primary" id="btn-save-run-edit-req"
                    style="background-color: var(--accent-secondary); border-color: var(--accent-secondary);">保存并运行配置</button>
            </div>
        </div>
    </div>

    <!-- Logs Modal -->
    <div class="modal-overlay hidden" id="logs-modal">
        <div class="modal large glass-panel">
            <div class="modal-header">
                <h3>执行日志</h3>
                <button class="close-btn" id="btn-close-logs">×</button>
            </div>
            <div class="modal-body">
                <pre class="terminal" id="terminal-logs">等待日志...</pre>
            </div>
        </div>
    </div>

    <!-- Prompts Modal -->
    <div class="modal-overlay hidden" id="prompts-modal">
        <div class="modal large glass-panel"
            style="max-width: 90vw; height: 90vh; display: flex; flex-direction: column;">
            <div class="modal-header">
                <h3>⚙️ 提示词编辑器</h3>
                <div style="display:flex; align-items:center; gap:10px;">
                    <span class="save-status" id="prompt-save-status"></span>
                    <button class="btn btn-primary btn-small" id="btn-save-prompt">保存修改</button>
                    <button class="close-btn" id="btn-close-prompts">×</button>
                </div>
            </div>
            <div class="modal-body" style="flex: 1; display: flex; gap: 1rem; overflow: hidden; padding: 1rem;">
                <div class="prompt-flowchart-container"
                    style="width: 380px; background: rgba(0,0,0,0.2); border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.1); padding: 15px; overflow-y: auto;">
                    <h4 style="margin-top:0; margin-bottom:1rem; color:var(--text-muted)">工作流提示词映射</h4>
                    
                    <div class="dag-container" id="prompt-dag">
                        <div class="dag-row">
                            <div class="chain-node prompt-node" data-prompt="researcher.prompt" style="font-size: 0.85em; padding: 8px;">1.1 爬取研究 (researcher)</div>
                        </div>
                        <div class="dag-arrow">↓</div>
                        <div class="dag-row">
                            <div class="chain-node prompt-node" data-prompt="generate_case.prompt" style="font-size: 0.85em; padding: 8px;">1.5.5 格式标准化 (generate_case)</div>
                        </div>
                        <div class="dag-arrow">↓</div>
                        <div class="dag-row">
                            <div class="chain-node prompt-node" data-prompt="extract_workflow.prompt" style="font-size: 0.85em; padding: 8px;">1.6 提取<br>(extract_workflow)</div>
                        </div>
                        <div class="dag-arrow">↓</div>
                        
                        <div class="dag-row">
                            <div class="chain-node prompt-node" data-prompt="apply_to_grounding.prompt" style="font-size: 0.85em; padding: 8px;">1.7 场景落地<br>(apply_to_grounding)</div>
                        </div>

                        <!-- FUTURE PROMPTS
                        <div class="dag-branch-split" style="margin: 10px 0;">
                            <div class="dag-branch">
                                <div class="dag-branch-arrow-left">↙</div>
                                <div class="chain-node prompt-node" data-prompt="process_cluster.prompt" style="font-size: 0.85em; padding: 8px;">2.1.1 工序聚类<br>(process_cluster)</div>
                                <div class="dag-arrow">↓</div>
                                <div class="chain-node prompt-node" data-prompt="score_processes.prompt" style="font-size: 0.85em; padding: 8px;">2.1.2 工序打分<br>(score_processes)</div>
                                <div class="dag-branch-arrow-left" style="transform: translateX(10px);">↘</div>
                            </div>
                            <div class="dag-branch">
                                <div class="dag-branch-arrow-right">↘</div>
                                <div class="chain-node prompt-node" data-prompt="extract_capabilities.prompt" style="font-size: 0.85em; padding: 8px;">2.2.1 能力提取<br>(extract_capabilities)</div>
                                <div class="dag-arrow">↓</div>
                                <div class="chain-node prompt-node" data-prompt="enrich_capability.prompt" style="font-size: 0.85em; padding: 8px;">2.2.2 能力丰富化<br>(enrich_capability)</div>
                                <div class="dag-branch-arrow-right" style="transform: translateX(-10px);">↙</div>
                            </div>
                        </div>

                        <div class="dag-row">
                            <div class="chain-node prompt-node" data-prompt="assemble_strategy.prompt" style="font-size: 0.85em; padding: 8px;">3.0 策略组装 (assemble_strategy)</div>
                        </div>
                        -->
                    </div>

                    <h4 style="margin-top:2rem; margin-bottom:1rem; color:var(--text-muted)">其他提示词</h4>
                    <div id="other-prompts-list" style="display:flex; flex-direction:column; gap:0.5rem;">
                        <!-- Other prompt tabs injected via JS -->
                    </div>
                </div>
                <div class="prompt-editor" style="flex: 1; display: flex; flex-direction: column; gap: 1rem;">
                    <div style="flex: 1; display: flex; flex-direction: column;">
                        <h4 style="margin-top:0; margin-bottom:0.5rem; color:var(--text-main);">Prompt 模板</h4>
                        <textarea id="prompt-textarea"
                            style="flex: 1; width:100%; background:rgba(0,0,0,0.03); color:var(--text-main); font-family:monospace; padding:1rem; border:1px solid rgba(0, 0, 0, 0.1); border-radius:6px; resize:none; font-size:14px; line-height: 1.5;"
                            placeholder="选择左侧节点或列表中的提示词进行编辑..."></textarea>
                    </div>
                    <div style="flex: 1; display: flex; flex-direction: column;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
                            <h4 style="margin:0; color:var(--text-main);">Schema JSON</h4>
                            <button id="update-schema-btn" class="btn" style="background: white; border: 1px solid #e2e8f0; color: #4f46e5; font-size: 0.85em; padding: 4px 10px; border-radius: 4px; display: flex; align-items: center; gap: 4px; cursor: pointer; transition: all 0.2s;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='white'">
                                <span style="font-size: 1.1em;">✨</span> 基于 Prompt 更新
                            </button>
                        </div>
                        <textarea id="schema-textarea"
                            style="flex: 1; width:100%; background:rgba(0,0,0,0.03); color:var(--text-main); font-family:monospace; padding:1rem; border:1px solid rgba(0, 0, 0, 0.1); border-radius:6px; resize:none; font-size:14px; line-height: 1.5;"
                            placeholder="对应的 Schema JSON..."></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Requirement Modal -->
    <div class="modal-overlay hidden" id="add-req-modal">
        <div class="modal glass-panel">
            <div class="modal-header">
                <h3>添加新需求</h3>
                <button class="close-btn" id="btn-close-add-req">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>需求内容</label>
                    <textarea id="input-new-req" class="glass-input" rows="4" placeholder="输入你想生成的场景、人物、道具等详细要求..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" id="btn-cancel-add-req">取消</button>
                <button class="btn btn-primary" id="btn-submit-add-req">添加并保存</button>
            </div>
        </div>
    </div>
    <!-- Case Detail Modal -->
    <div class="modal-overlay hidden" id="case-detail-modal">
        <div class="modal large glass-panel" style="width: 95%; min-width: 1000px; max-width: 1600px; height: 95vh; display: flex; flex-direction: column; padding: 0;">
            <div class="modal-header" style="border-bottom: 1px solid var(--border-glass); padding: 1rem 1.5rem; flex-shrink: 0; background: rgba(0,0,0,0.3);">
                <h3 id="case-detail-modal-title">案例详情</h3>
                <button class="close-btn" id="btn-close-case-detail">×</button>
            </div>
            <div class="modal-body" id="case-detail-modal-body" style="display: flex; flex-direction: row; flex: 1; overflow: hidden; padding: 0;">
                <!-- Content dynamically injected here -->
            </div>
        </div>
    </div>

    <script src="/static/app.js?v=11"></script>
</body>

</html>