|
|
@@ -0,0 +1,767 @@
|
|
|
+let requirements = [];
|
|
|
+let currentSelectedIndex = null;
|
|
|
+let activeRuns = {};
|
|
|
+let statusInterval = null;
|
|
|
+
|
|
|
+let currentPromptName = null;
|
|
|
+const modalPrompts = document.getElementById('prompts-modal');
|
|
|
+const elPromptList = document.getElementById('prompt-list');
|
|
|
+const elPromptTextarea = document.getElementById('prompt-textarea');
|
|
|
+const elPromptStatus = document.getElementById('prompt-save-status');
|
|
|
+
|
|
|
+// DOM Elements
|
|
|
+const elTaskList = document.getElementById('task-list');
|
|
|
+const elSearchInput = document.getElementById('search-input');
|
|
|
+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 elDetailId = document.getElementById('detail-id');
|
|
|
+const elDetailTitle = document.getElementById('detail-title');
|
|
|
+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 jsonCaps = document.getElementById('json-caps');
|
|
|
+const jsonRaw = document.getElementById('json-raw');
|
|
|
+
|
|
|
+// Modals
|
|
|
+const modalRun = document.getElementById('run-modal');
|
|
|
+const modalLogs = document.getElementById('logs-modal');
|
|
|
+const terminalLogs = document.getElementById('terminal-logs');
|
|
|
+
|
|
|
+// Initialize
|
|
|
+async function init() {
|
|
|
+ await fetchRequirements();
|
|
|
+ setupEventListeners();
|
|
|
+ startStatusPolling();
|
|
|
+}
|
|
|
+
|
|
|
+// Fetch Data
|
|
|
+async function fetchRequirements() {
|
|
|
+ try {
|
|
|
+ const res = await fetch('/api/requirements');
|
|
|
+ requirements = await res.json();
|
|
|
+ renderTaskList(requirements);
|
|
|
+ updateStats();
|
|
|
+ } catch (e) {
|
|
|
+ console.error("Failed to fetch requirements", e);
|
|
|
+ elTaskList.innerHTML = '<div style="padding:1rem;color:var(--danger)">Error loading data. Is the backend running?</div>';
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+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, '<').replace(/>/g, '>');
|
|
|
+ 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 renderRawCases(rawCasesObj) {
|
|
|
+ if (!rawCasesObj || Object.keys(rawCasesObj).length === 0) return 'No raw cases data';
|
|
|
+ const platforms = Object.keys(rawCasesObj);
|
|
|
+ let html = `<div class="sub-tabs">`;
|
|
|
+ platforms.forEach((p, i) => {
|
|
|
+ const name = p.replace('case_', '').toUpperCase();
|
|
|
+ html += `<button class="sub-tab-btn ${i === 0 ? 'active' : ''}" onclick="selectSubTab('${p}')">${name}</button>`;
|
|
|
+ });
|
|
|
+ html += `</div><div class="sub-tab-contents">`;
|
|
|
+ platforms.forEach((p, i) => {
|
|
|
+ html += `<div id="sub-tab-${p}" class="sub-tab-pane ${i === 0 ? '' : 'hidden'}">`;
|
|
|
+ const cases = rawCasesObj[p].cases || [];
|
|
|
+ if (cases.length === 0) {
|
|
|
+ html += `<p style="color:var(--text-muted)">No cases found for this platform.</p>`;
|
|
|
+ } else {
|
|
|
+ const platCode = p.replace('case_', '');
|
|
|
+ cases.forEach(c => {
|
|
|
+ html += `<div class="data-card" id="case-card-${platCode}-${c.id}">
|
|
|
+ <div class="card-header">
|
|
|
+ <div class="card-title">📝 ${c.title || 'Untitled'}</div>
|
|
|
+ <a href="${c.source_url}" target="_blank" class="badge-emoji primary" style="text-decoration:none">🔗 View Source</a>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="tags-container">
|
|
|
+ <span class="badge-emoji">📱 Platform: ${c.platform || p}</span>
|
|
|
+ <span class="badge-emoji">❤️ Likes: ${c.metrics?.likes || 0}</span>
|
|
|
+ <span class="badge-emoji">💬 Comments: ${c.metrics?.comments || 0}</span>
|
|
|
+ <span class="badge-emoji">🔄 Shares: ${c.metrics?.shares || 0}</span>
|
|
|
+ </div>`;
|
|
|
+ if (c.user_feedback) {
|
|
|
+ html += `<div class="card-section"><div class="section-title">🗣️ User Feedback</div>`;
|
|
|
+ if (Array.isArray(c.user_feedback)) {
|
|
|
+ html += `<ul>`;
|
|
|
+ c.user_feedback.forEach(fb => html += `<li>${fb}</li>`);
|
|
|
+ html += `</ul>`;
|
|
|
+ } else {
|
|
|
+ html += `<p>${c.user_feedback}</p>`;
|
|
|
+ }
|
|
|
+ html += `</div>`;
|
|
|
+ }
|
|
|
+ if (c.workflow_process) {
|
|
|
+ html += `<div class="card-section"><div class="section-title">🧱 Workflow Process</div>`;
|
|
|
+ if (Array.isArray(c.workflow_process)) {
|
|
|
+ html += `<div class="phase-list">`;
|
|
|
+ c.workflow_process.forEach(wp => html += `<div class="phase-item">${wp}</div>`);
|
|
|
+ html += `</div>`;
|
|
|
+ } else {
|
|
|
+ html += `<p>${c.workflow_process}</p>`;
|
|
|
+ }
|
|
|
+ html += `</div>`;
|
|
|
+ }
|
|
|
+ if (c.images && c.images.length > 0) {
|
|
|
+ html += `<div class="card-section"><div class="section-title">🖼️ Images</div><div class="image-gallery">`;
|
|
|
+ c.images.forEach(img => {
|
|
|
+ const url = typeof img === 'string' ? img : img.url;
|
|
|
+ const desc = (typeof img === 'object' ? img.description : '') || '';
|
|
|
+ html += `<div class="image-item"><img src="${url}" alt="${desc}" title="${desc}"><div class="image-caption">${desc}</div></div>`;
|
|
|
+ });
|
|
|
+ html += `</div></div>`;
|
|
|
+ }
|
|
|
+ html += `</div></div>`;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ html += `</div>`;
|
|
|
+ });
|
|
|
+ html += `</div>`;
|
|
|
+ return html;
|
|
|
+}
|
|
|
+
|
|
|
+function renderCapabilities(capsObj) {
|
|
|
+ if (!capsObj || !capsObj.extracted_capabilities) return 'No capabilities data';
|
|
|
+ const caps = capsObj.extracted_capabilities;
|
|
|
+ if (caps.length === 0) return '<p>No capabilities extracted.</p>';
|
|
|
+
|
|
|
+ let html = ``;
|
|
|
+ caps.forEach(cap => {
|
|
|
+ const isNew = cap.is_new ? '<span class="badge-emoji success">✨ New Capability</span>' : '';
|
|
|
+ html += `<div class="data-card">
|
|
|
+ <div class="card-header">
|
|
|
+ <div class="card-title">⚡ [${cap.id || 'N/A'}] ${cap.name || 'Unnamed'}</div>
|
|
|
+ ${isNew}
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <p>${cap.description || ''}</p>
|
|
|
+ <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">🛠️ Implements 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">📌 Source Cases</div><div class="tags-container" style="gap:0.8rem">`;
|
|
|
+ cap.case_references.forEach(ref => {
|
|
|
+ let caseId = null;
|
|
|
+ let title = ref;
|
|
|
+ const matchA = ref.match(/^case_([a-z]+)_(\d+)(?:[：:\s]+(.*))?/);
|
|
|
+ if (matchA) {
|
|
|
+ caseId = `${matchA[1]}-case_${matchA[2]}`;
|
|
|
+ title = matchA[3] || ref;
|
|
|
+ } else {
|
|
|
+ const matchB = ref.match(/^([a-z]+)[\/\s](case_\d+)(?:[：:\s]+(.*))?/);
|
|
|
+ if (matchB) {
|
|
|
+ caseId = `${matchB[1]}-${matchB[2]}`;
|
|
|
+ title = matchB[3] || ref;
|
|
|
+ } else {
|
|
|
+ const matchC = ref.match(/^case_(\d+)_([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></div>`;
|
|
|
+ }
|
|
|
+ html += `</div></div>`;
|
|
|
+ });
|
|
|
+ return html;
|
|
|
+}
|
|
|
+
|
|
|
+function renderBlueprint(bpObj) {
|
|
|
+ if (!bpObj || !bpObj.blueprints) return 'No blueprint data';
|
|
|
+ let html = ``;
|
|
|
+
|
|
|
+ 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">📚 Source Cases for Blueprint</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>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ bpObj.blueprints.forEach(bp => {
|
|
|
+ html += `<div class="data-card">
|
|
|
+ <div class="card-header">
|
|
|
+ <div class="card-title">🗺️ ${bp.name || 'Unnamed'}</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) return 'No strategy data';
|
|
|
+ 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">🎯 Requirement</h3>
|
|
|
+ <p style="color:var(--text-muted)">${stratObj.requirement || ''}</p>
|
|
|
+ </div>`;
|
|
|
+
|
|
|
+ stratObj.strategies.sort((a,b) => (b.is_selected === true) - (a.is_selected === true));
|
|
|
+
|
|
|
+ stratObj.strategies.forEach(strat => {
|
|
|
+ const isSelected = strat.is_selected;
|
|
|
+ const icon = isSelected ? '🎯' : '🥈';
|
|
|
+ const badge = isSelected ? '<span class="badge-emoji success">⭐ Selected Strategy</span>' : '<span class="badge-emoji warning">Alternative</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>Coverage Score</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 || 'Unnamed'}</div>
|
|
|
+ ${badge}
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ ${scoreHtml}
|
|
|
+ <div class="tags-container" style="margin-bottom:1rem">
|
|
|
+ <span class="badge-emoji">📥 Source: ${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">❌ Why Not Selected</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">🧱 Workflow Outline</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[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 fetchMemo(index) {
|
|
|
+ const elTextarea = document.getElementById('memo-textarea');
|
|
|
+ const elStatus = document.getElementById('memo-status');
|
|
|
+ if(!elTextarea) return;
|
|
|
+ elTextarea.value = 'Loading...';
|
|
|
+ elTextarea.disabled = true;
|
|
|
+ try {
|
|
|
+ const res = await fetch(`/api/requirements/${index}/memo`);
|
|
|
+ const data = await res.json();
|
|
|
+ elTextarea.value = data.memo || '';
|
|
|
+ elStatus.textContent = '';
|
|
|
+ } catch (e) {
|
|
|
+ elTextarea.value = '';
|
|
|
+ console.error("Failed to fetch memo", e);
|
|
|
+ }
|
|
|
+ elTextarea.disabled = false;
|
|
|
+}
|
|
|
+
|
|
|
+async function fetchPromptsList() {
|
|
|
+ try {
|
|
|
+ const res = await fetch('/api/prompts');
|
|
|
+ const list = await res.json();
|
|
|
+ if(!elPromptList) return;
|
|
|
+ elPromptList.innerHTML = '';
|
|
|
+ list.forEach((p, idx) => {
|
|
|
+ const div = document.createElement('div');
|
|
|
+ div.className = 'prompt-tab';
|
|
|
+ div.textContent = p;
|
|
|
+ div.onclick = () => selectPrompt(p, div);
|
|
|
+ elPromptList.appendChild(div);
|
|
|
+ if (idx === 0) selectPrompt(p, div);
|
|
|
+ });
|
|
|
+ } 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'));
|
|
|
+ tabEl.classList.add('active');
|
|
|
+
|
|
|
+ elPromptTextarea.value = 'Loading...';
|
|
|
+ elPromptTextarea.disabled = true;
|
|
|
+ try {
|
|
|
+ const res = await fetch(`/api/prompts/${name}`);
|
|
|
+ const data = await res.json();
|
|
|
+ elPromptTextarea.value = data.content || '';
|
|
|
+ } catch (e) {
|
|
|
+ elPromptTextarea.value = 'Error loading prompt.';
|
|
|
+ }
|
|
|
+ elPromptTextarea.disabled = false;
|
|
|
+ elPromptStatus.textContent = '';
|
|
|
+}
|
|
|
+
|
|
|
+async function fetchRequirementData(index) {
|
|
|
+ try {
|
|
|
+ const res = await fetch(`/api/requirements/${index}/data`);
|
|
|
+ const data = await res.json();
|
|
|
+
|
|
|
+ jsonStrategy.innerHTML = data.strategy ? renderStrategy(data.strategy) : '<p style="color:var(--text-muted)">No strategy data</p>';
|
|
|
+ jsonBlueprint.innerHTML = data.blueprint ? renderBlueprint(data.blueprint) : '<p style="color:var(--text-muted)">No blueprint data</p>';
|
|
|
+ jsonCaps.innerHTML = data.capabilities ? renderCapabilities(data.capabilities) : '<p style="color:var(--text-muted)">No capabilities data</p>';
|
|
|
+ jsonRaw.innerHTML = data.raw_cases ? renderRawCases(data.raw_cases) : '<p style="color:var(--text-muted)">No raw cases data</p>';
|
|
|
+ } 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);
|
|
|
+ }
|
|
|
+
|
|
|
+ } catch (e) {
|
|
|
+ console.error("Failed to poll status", e);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function startStatusPolling() {
|
|
|
+ if (statusInterval) clearInterval(statusInterval);
|
|
|
+ statusInterval = setInterval(pollStatus, 2000);
|
|
|
+}
|
|
|
+
|
|
|
+// Render
|
|
|
+function renderTaskList(list) {
|
|
|
+ elTaskList.innerHTML = '';
|
|
|
+ list.forEach(req => {
|
|
|
+ const div = document.createElement('div');
|
|
|
+ div.className = `task-item ${currentSelectedIndex === req.index ? 'active' : ''}`;
|
|
|
+ div.onclick = () => selectRequirement(req.index);
|
|
|
+
|
|
|
+ let statusTag = '';
|
|
|
+ if (req.status === 'running') statusTag = '<span class="tag running">Running</span>';
|
|
|
+ else if (req.status === 'completed') statusTag = '<span class="tag success">Complete</span>';
|
|
|
+ else if (req.status === 'partial') statusTag = '<span class="tag warning">Partial</span>';
|
|
|
+ else statusTag = '<span class="tag">Pending</span>';
|
|
|
+
|
|
|
+ let memoHtml = '';
|
|
|
+ if (req.memo && req.memo.trim() !== '') {
|
|
|
+ memoHtml = `<div class="task-memo" title="${req.memo}">${req.memo}</div>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ div.innerHTML = `
|
|
|
+ <div class="task-id">#${req.id}</div>
|
|
|
+ <div class="task-req" title="${req.requirement}">${req.requirement}</div>
|
|
|
+ ${memoHtml}
|
|
|
+ <div class="task-tags">
|
|
|
+ ${statusTag}
|
|
|
+ <span class="tag">Cases: ${req.raw_cases_count}</span>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ elTaskList.appendChild(div);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+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;
|
|
|
+
|
|
|
+ // Update List UI
|
|
|
+ document.querySelectorAll('.task-item').forEach(el => el.classList.remove('active'));
|
|
|
+ // We re-render to be safe, but simple class toggle is better.
|
|
|
+ renderTaskList(requirements);
|
|
|
+
|
|
|
+ // Update Detail UI
|
|
|
+ elEmptyState.classList.add('hidden');
|
|
|
+ elDetailView.classList.remove('hidden');
|
|
|
+
|
|
|
+ elDetailId.textContent = req.id;
|
|
|
+ elDetailTitle.textContent = req.requirement;
|
|
|
+
|
|
|
+ updateDetailBannerStatus(activeRuns[index] ? activeRuns[index].status : req.status);
|
|
|
+
|
|
|
+ // Fetch data
|
|
|
+ jsonStrategy.textContent = 'Loading...';
|
|
|
+ jsonBlueprint.textContent = 'Loading...';
|
|
|
+ jsonCaps.textContent = 'Loading...';
|
|
|
+ jsonRaw.textContent = 'Loading...';
|
|
|
+ fetchRequirementData(index);
|
|
|
+ fetchMemo(index);
|
|
|
+}
|
|
|
+
|
|
|
+function updateDetailBannerStatus(status) {
|
|
|
+ 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)';
|
|
|
+ } 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)';
|
|
|
+ } else {
|
|
|
+ elStatusBanner.classList.add('hidden');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// Actions
|
|
|
+async function triggerRun() {
|
|
|
+ if (currentSelectedIndex === null) return;
|
|
|
+
|
|
|
+ const requestData = {
|
|
|
+ platforms: document.getElementById('input-platforms').value,
|
|
|
+ skip_research: false,
|
|
|
+ research_only: false,
|
|
|
+ use_claude_sdk: document.getElementById('check-claude-sdk').checked,
|
|
|
+ restart_mode: document.getElementById('select-force-phase').value
|
|
|
+ };
|
|
|
+ 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() {
|
|
|
+ // Search
|
|
|
+ elSearchInput.addEventListener('input', (e) => {
|
|
|
+ const query = e.target.value.toLowerCase();
|
|
|
+ const filtered = requirements.filter(r =>
|
|
|
+ r.requirement.toLowerCase().includes(query) ||
|
|
|
+ r.id.includes(query)
|
|
|
+ );
|
|
|
+ renderTaskList(filtered);
|
|
|
+ });
|
|
|
+
|
|
|
+ // Tabs
|
|
|
+ document.querySelectorAll('.tab-btn').forEach(btn => {
|
|
|
+ btn.addEventListener('click', () => {
|
|
|
+ document.querySelectorAll('.tab-btn').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', () => {
|
|
|
+ if (currentSelectedIndex !== null) {
|
|
|
+ modalRun.classList.remove('hidden');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('btn-close-modal').addEventListener('click', () => {
|
|
|
+ modalRun.classList.add('hidden');
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('btn-cancel-run').addEventListener('click', () => {
|
|
|
+ modalRun.classList.add('hidden');
|
|
|
+ });
|
|
|
+
|
|
|
+ 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.';
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('btn-close-logs').addEventListener('click', () => {
|
|
|
+ modalLogs.classList.add('hidden');
|
|
|
+ });
|
|
|
+
|
|
|
+ const btnSaveMemo = document.getElementById('btn-save-memo');
|
|
|
+ if (btnSaveMemo) {
|
|
|
+ btnSaveMemo.addEventListener('click', async () => {
|
|
|
+ if (currentSelectedIndex === null) return;
|
|
|
+ const elTextarea = document.getElementById('memo-textarea');
|
|
|
+ const elStatus = document.getElementById('memo-status');
|
|
|
+ elStatus.textContent = 'Saving...';
|
|
|
+ elStatus.style.color = 'var(--text-muted)';
|
|
|
+
|
|
|
+ try {
|
|
|
+ const res = await fetch(`/api/requirements/${currentSelectedIndex}/memo`, {
|
|
|
+ method: 'POST',
|
|
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
+ body: JSON.stringify({ memo: elTextarea.value })
|
|
|
+ });
|
|
|
+ if (res.ok) {
|
|
|
+ elStatus.textContent = 'Saved!';
|
|
|
+ elStatus.style.color = 'var(--success)';
|
|
|
+ setTimeout(() => elStatus.textContent = '', 2000);
|
|
|
+
|
|
|
+ const req = requirements.find(r => r.index === currentSelectedIndex);
|
|
|
+ if (req) {
|
|
|
+ req.memo = elTextarea.value;
|
|
|
+ renderTaskList(requirements);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ throw new Error("Bad response");
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error("Failed to save memo", e);
|
|
|
+ elStatus.textContent = 'Save failed';
|
|
|
+ elStatus.style.color = 'var(--danger)';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ 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 res = await fetch(`/api/prompts/${currentPromptName}`, {
|
|
|
+ method: 'POST',
|
|
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
+ body: JSON.stringify({ content: elPromptTextarea.value })
|
|
|
+ });
|
|
|
+ if (res.ok) {
|
|
|
+ elPromptStatus.textContent = 'Saved!';
|
|
|
+ elPromptStatus.style.color = 'var(--success)';
|
|
|
+ setTimeout(() => elPromptStatus.textContent = '', 2000);
|
|
|
+ } else {
|
|
|
+ throw new Error("Failed to save");
|
|
|
+ }
|
|
|
+ } catch(e) {
|
|
|
+ elPromptStatus.textContent = 'Save failed';
|
|
|
+ elPromptStatus.style.color = 'var(--danger)';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// Boot
|
|
|
+init();
|
