howard
/
Agent


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
							<!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>Pipeline Dashboard</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">
</head>
<body>
    <div class="app-container">
        <!-- Sidebar -->
        <aside class="sidebar glass-panel">
            <div class="sidebar-header">
                <h2>⚡ Pipeline Tasks</h2>
                <div class="stats" id="stats-container">
                    <!-- Stats injected via JS -->
                </div>
            </div>
            <div class="search-box" style="display: flex; gap: 8px;">
                <input type="text" id="search-input" placeholder="Search requirements..." style="flex: 1;">
                <button class="btn btn-secondary btn-small" id="btn-open-prompts" title="Edit Prompts" style="padding: 0 10px;">⚙️</button>
            </div>
            <div class="task-list" id="task-list">
                <!-- Task items injected via JS -->
                <div class="loading">Loading tasks...</div>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="main-content glass-panel" id="main-content">
            <div class="empty-state" id="empty-state">
                <div class="icon">✨</div>
                <h2>Select a requirement to view details</h2>
                <p>Monitor pipeline execution and view generated data</p>
            </div>
            
            <div class="detail-view hidden" id="detail-view">
                <div class="detail-header">
                    <div class="title-section">
                        <span class="badge" id="detail-id">001</span>
                        <h1 id="detail-title">Requirement Title</h1>
                    </div>
                    <div class="actions">
                        <button class="btn btn-primary" id="btn-open-run-modal">🚀 Run Pipeline</button>
                    </div>
                </div>

                <div class="status-banner hidden" id="status-banner">
                    <div class="status-indicator"></div>
                    <span id="status-text">Running...</span>
                    <button class="btn btn-small" id="btn-view-logs">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;">🛑 Stop</button>
                </div>

                <div class="memo-container" id="memo-container">
                    <div class="memo-header">
                        <div class="memo-title">📝 Requirement Notes</div>
                        <div style="display:flex; align-items:center; gap:10px;">
                            <span class="save-status" id="memo-status"></span>
                            <button class="btn btn-small btn-primary" id="btn-save-memo" style="padding: 4px 12px; min-width: 60px">Save</button>
                        </div>
                    </div>
                    <textarea class="memo-textarea" id="memo-textarea" placeholder="Add notes, context, or issues for this requirement here..."></textarea>
                </div>

                <div class="data-tabs">
                    <button class="tab-btn active" data-target="tab-strategy">Strategy</button>
                    <button class="tab-btn" data-target="tab-blueprint">Blueprint</button>
                    <button class="tab-btn" data-target="tab-caps">Capabilities</button>
                    <button class="tab-btn" data-target="tab-raw">Raw Cases</button>
                    <button class="tab-btn" data-target="tab-source">Source</button>
                </div>

                <div class="tab-content-container">
                    <div class="tab-content active" id="tab-strategy">
                        <div class="content-viewer" id="json-strategy">Loading...</div>
                    </div>
                    <div class="tab-content" id="tab-blueprint">
                        <div class="content-viewer" id="json-blueprint">Loading...</div>
                    </div>
                    <div class="tab-content" id="tab-caps">
                        <div class="content-viewer" id="json-caps">Loading...</div>
                    </div>
                    <div class="tab-content" id="tab-raw">
                        <div class="content-viewer" id="json-raw">Loading...</div>
                    </div>
                    <div class="tab-content" id="tab-source">
                        <div class="content-viewer" id="json-source">Loading...</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>Configure Pipeline Run</h3>
                <button class="close-btn" id="btn-close-modal">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Restart From</label>
                    <select id="select-force-phase" class="glass-input" style="background-color: #1e293b; color: white; margin-top: 5px;">
                        <option value="smart">Smart Resume (Continue where left off)</option>
                        <optgroup label="Single Step (No Cascading)">
                            <option value="single_platforms">Single Step: Re-run Platforms (Deletes chosen platforms ONLY)</option>
                            <option value="single_blueprint">Single Step: Re-run Blueprint (Deletes Blueprint ONLY)</option>
                            <option value="single_capabilities">Single Step: Re-run Capabilities (Deletes Capabilities ONLY)</option>
                            <option value="single_strategy">Single Step: Re-run Strategy (Deletes Strategy ONLY)</option>
                        </optgroup>
                        <optgroup label="Cascading Regeneration">
                            <option value="phase1_platforms">Phase 1: Specific Platforms -> Downstream</option>
                            <option value="phase2_blueprint">Phase 2: Blueprint -> Strategy</option>
                            <option value="phase2_capabilities">Phase 2: Capabilities -> Strategy</option>
                            <option value="phase2_all">Phase 2: All Phase 2 -> Strategy</option>
                            <option value="phase3">Phase 3: Strategy Only</option>
                        </optgroup>
                    </select>
                </div>
                <div class="form-group" id="group-platforms">
                    <label>Platforms (comma separated)</label>
                    <input type="text" id="input-platforms" value="xhs,youtube,bili,x" class="glass-input">
                </div>
                <div class="form-group checkbox" style="margin-top: 15px;">
                    <input type="checkbox" id="check-claude-sdk">
                    <label for="check-claude-sdk">Use Anthropic SDK Core</label>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" id="btn-cancel-run">Cancel</button>
                <button class="btn btn-primary" id="btn-confirm-run">Execute</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>Execution Logs</h3>
                <button class="close-btn" id="btn-close-logs">×</button>
            </div>
            <div class="modal-body">
                <pre class="terminal" id="terminal-logs">Waiting for 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>⚙️ Prompts Editor</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">Save Changes</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-sidebar" style="width: 250px; border-right: 1px solid rgba(255,255,255,0.1); padding-right: 1rem; overflow-y: auto;">
                    <h4 style="margin-top:0; margin-bottom:1rem; color:var(--text-muted)">Available Prompts</h4>
                    <div id="prompt-list" style="display:flex; flex-direction:column; gap:0.5rem;">
                        <!-- Prompt tabs injected via JS -->
                    </div>
                </div>
                <div class="prompt-editor" style="flex: 1; display: flex; flex-direction: column;">
                    <textarea id="prompt-textarea" style="width:100%; height:100%; background:rgba(15,23,42,0.8); color:var(--text-main); font-family:monospace; padding:1rem; border:1px solid rgba(255,255,255,0.1); border-radius:6px; resize:none; font-size:14px;" placeholder="Select a prompt to edit..."></textarea>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/app.js"></script>
</body>
</html>