first commit
This commit is contained in:
@@ -0,0 +1,299 @@
|
||||
// Research orchestration UI
|
||||
const RESEARCH_UI = {
|
||||
async init() {
|
||||
$("#run-research").addEventListener("click", () => this.runResearch());
|
||||
$("#query-input").addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter" && e.ctrlKey) this.runResearch();
|
||||
});
|
||||
},
|
||||
|
||||
async runResearch() {
|
||||
const query = $("#query-input").value.trim();
|
||||
if (!query) return showToast("Enter a research query", "error");
|
||||
|
||||
// Get selected skills
|
||||
const checked = [...document.querySelectorAll('.skill-toggle input:checked')].map(c => c.value);
|
||||
|
||||
const output = $("#research-output");
|
||||
output.innerHTML = "";
|
||||
showSpinner(output);
|
||||
|
||||
// Create session
|
||||
let sessionId = STORE.currentSessionId;
|
||||
if (!sessionId) {
|
||||
try {
|
||||
const session = await API.post("/api/research/session", { query });
|
||||
STORE.currentSessionId = session.session_id;
|
||||
sessionId = session.session_id;
|
||||
} catch (e) {
|
||||
showToast("Failed to create session", "error");
|
||||
output.innerHTML = `<p class='typing'>Session error: ${e.message}</p>`;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Run research
|
||||
try {
|
||||
const results = await API.post("/api/research/run", {
|
||||
query,
|
||||
doc_id: STORE.currentDocId,
|
||||
skills: checked.length ? checked : undefined,
|
||||
});
|
||||
|
||||
output.innerHTML = "";
|
||||
|
||||
// Session info
|
||||
const info = document.createElement("div");
|
||||
info.className = "research-section";
|
||||
info.innerHTML = `
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<h3 style="color:var(--accent-blue)">Research Results</h3>
|
||||
<span style="font-size:11px;color:var(--text-muted)">Session: ${sessionId.substring(0, 8)}</span>
|
||||
</div>
|
||||
<p style="color:var(--text-secondary)">Query: ${query}</p>
|
||||
<hr style="border:none;border-top:1px solid var(--border-color);margin:8px 0">`;
|
||||
output.appendChild(info);
|
||||
|
||||
// Results from each skill
|
||||
if (results.results) {
|
||||
for (const [skill, response] of Object.entries(results.results)) {
|
||||
const section = document.createElement("div");
|
||||
section.className = "research-section";
|
||||
section.id = `section-${skill}`;
|
||||
section.innerHTML = `<h3>${skill.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())}</h3>`;
|
||||
|
||||
const content = document.createElement("div");
|
||||
content.innerHTML = renderContent(response);
|
||||
section.appendChild(content);
|
||||
output.appendChild(section);
|
||||
}
|
||||
}
|
||||
|
||||
STORE.currentSessionId = sessionId;
|
||||
showToast("Research complete", "info");
|
||||
|
||||
} catch (e) {
|
||||
output.innerHTML = `<p class='typing' style="color:var(--accent-red)">Error: ${e.message}</p>`;
|
||||
showToast("Research failed", "error");
|
||||
}
|
||||
},
|
||||
|
||||
async runSemanticSearch(query, docId = null) {
|
||||
const results = await API.post("/api/research/semantic", { query, doc_id: docId, limit: 20 });
|
||||
return results.results || [];
|
||||
},
|
||||
|
||||
async runTextSearch(query, docId = null) {
|
||||
const results = await API.post("/api/research/text-search", { query, doc_id: docId, limit: 20 });
|
||||
return results.results || [];
|
||||
},
|
||||
|
||||
async getFindings(sessionId) {
|
||||
if (!sessionId) return [];
|
||||
try {
|
||||
const res = await API.get(`/api/research/findings?session_id=${sessionId}`);
|
||||
return res.findings || [];
|
||||
} catch { return []; }
|
||||
},
|
||||
|
||||
async saveMemory(sessionId, content, type = "fact", importance = 3) {
|
||||
if (!sessionId) return;
|
||||
try {
|
||||
await API.post("/api/memories/save", {
|
||||
session_id: sessionId,
|
||||
content,
|
||||
memory_type: type,
|
||||
importance,
|
||||
source_doc_id: STORE.currentDocId,
|
||||
});
|
||||
showToast("Memory saved", "info");
|
||||
} catch (e) { showToast("Save failed: " + e.message, "error"); }
|
||||
},
|
||||
|
||||
async runPipeline() {
|
||||
const query = $("#query-input").value.trim();
|
||||
if (!query) return showToast("Enter a research query", "error");
|
||||
|
||||
const mode = $("#pipeline-output-mode").value || "";
|
||||
|
||||
// Create session
|
||||
let sessionId = STORE.currentSessionId;
|
||||
if (!sessionId) {
|
||||
try {
|
||||
const session = await API.post("/api/research/session", { query });
|
||||
sessionId = session.session_id;
|
||||
STORE.currentSessionId = sessionId;
|
||||
} catch (e) {
|
||||
showToast("Failed to create session", "error");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const pipelineEl = $("#pipeline-output");
|
||||
pipelineEl.innerHTML = '<div class="spinner"></div> <span class="typing">Running: triage → evidence extraction → synthesis...</span>';
|
||||
|
||||
// Run the pipeline
|
||||
try {
|
||||
const results = await API.post("/api/research/pipeline", {
|
||||
query,
|
||||
doc_ids: STORE.currentDocId ? [STORE.currentDocId] : undefined,
|
||||
output_mode: mode || undefined,
|
||||
});
|
||||
|
||||
// Save session to the first doc or temp session
|
||||
STORE.currentSessionId = sessionId;
|
||||
|
||||
// Render pipeline sections
|
||||
// First render: get structured sections from results
|
||||
const sections = RESEARCH_UI.renderPipelineSections(results);
|
||||
pipelineEl.innerHTML = sections.map(s => RESEARCH_UI.renderSectionHtml(s)).join('');
|
||||
|
||||
// Wire up collapse toggles
|
||||
pipelineEl.querySelectorAll(".pipeline-stage-header").forEach(header => {
|
||||
header.addEventListener("click", () => {
|
||||
const body = header.nextElementSibling;
|
||||
body.classList.toggle("collapsed");
|
||||
const arrow = header.querySelector(".stage-arrow");
|
||||
if (arrow) arrow.textContent = body.classList.contains("collapsed") ? "▶" : "▼";
|
||||
});
|
||||
});
|
||||
|
||||
showToast("Pipeline complete", "info");
|
||||
|
||||
} catch (e) {
|
||||
pipelineEl.innerHTML = `<p class='typing' style="color:var(--accent-red)">Error: ${e.message}</p>`;
|
||||
showToast("Pipeline failed", "error");
|
||||
}
|
||||
},
|
||||
|
||||
renderPipelineSections(results) {
|
||||
const sections = [];
|
||||
|
||||
// Triage stage
|
||||
if (results.triage_state) {
|
||||
const plan = results.triage_state;
|
||||
sections.push({
|
||||
stage: "triage",
|
||||
title: "Stage 1: Source Triage",
|
||||
status: "complete",
|
||||
sections: [
|
||||
{ label: "Objective", content: plan.OBJECTIVE || "" },
|
||||
{ label: "Sub-questions", content: plan["SUB-QUESTIONS"] || "" },
|
||||
{ label: "Classification", content: plan.CLASSIFICATION || "" },
|
||||
{ label: "Reading Order", content: plan.READING_ORDER || "" },
|
||||
{ label: "Extraction Criteria", content: plan["EXTRACTION CRITERIA"] || "" },
|
||||
{ label: "Risks & Gaps", content: plan["RISKS and GAPS"] || plan.RISKS_AND_GAPS || "" },
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
// Evidence stage
|
||||
if (results.evidence_rows && results.evidence_rows.length > 0) {
|
||||
sections.push({
|
||||
stage: "evidence",
|
||||
title: `Stage 2: Extracted Evidence (${results.evidence_rows.length} rows)`,
|
||||
status: "complete",
|
||||
sections: [
|
||||
{ label: "", content: "table", rows: results.evidence_rows },
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
// Synthesis stage
|
||||
if (results.synthesis) {
|
||||
sections.push({
|
||||
stage: "synthesis",
|
||||
title: `Stage 3: Synthesis (mode: ${results.output_mode || "auto"})`,
|
||||
status: "complete",
|
||||
sections: [
|
||||
{ label: "Result", content: results.synthesis, mode: results.output_mode },
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
return sections;
|
||||
},
|
||||
|
||||
renderSectionHtml(section) {
|
||||
let cardsHtml = "";
|
||||
section.sections.forEach(sec => {
|
||||
if (sec.content === "table") {
|
||||
const rows = sec.rows || [];
|
||||
const hasComparison = rows[0] && rows[0].source_a !== undefined;
|
||||
if (hasComparison) {
|
||||
cardsHtml += `<div class="pipeline-section-label">Cross-Comparison</div>`;
|
||||
cardsHtml += `<table class="matrix-table"><thead><tr><th>Topic</th><th>Source A</th><th>Source B</th><th>Agreement</th><th>Conflict</th><th>Notes</th></tr></thead><tbody>`;
|
||||
rows.forEach(r => {
|
||||
cardsHtml += `<tr>
|
||||
<td>${r.topic || ""}</td>
|
||||
<td>${(r.source_a || "").substring(0, 200)}</td>
|
||||
<td>${(r.source_b || "").substring(0, 200)}</td>
|
||||
<td>${r.agreement || ""}</td>
|
||||
<td>${r.conflict || ""}</td>
|
||||
<td>${r.notes || ""}</td>
|
||||
</tr>`;
|
||||
});
|
||||
cardsHtml += `</tbody></table>`;
|
||||
} else {
|
||||
const cols = ["#", "Topic", "Evidence Type", "Description", "Doc Ref", "Evidence", "Analyst Note", "Confidence", "Review"];
|
||||
cardsHtml += `<div class="pipeline-section-label">Extracted Evidence</div>`;
|
||||
cardsHtml += `<table class="evidence-table"><thead><tr>${cols.map(c => `<th>${c}</th>`).join("")}</tr></thead><tbody>`;
|
||||
rows.forEach((r, i) => {
|
||||
const confClass = (r.confidence || "medium").toLowerCase().replace(" ", "-");
|
||||
cardsHtml += `<tr>
|
||||
<td>${i + 1}</td>
|
||||
<td>${r.topic || ""}</td>
|
||||
<td>${r.evidence_type || ""}</td>
|
||||
<td>${(r.description || "").substring(0, 150)}</td>
|
||||
<td>${(r.trace_ref || "").substring(0, 150)}</td>
|
||||
<td>${(r.evidence || "").substring(0, 200)}</td>
|
||||
<td>${(r.analyst_note || "").substring(0, 150)}</td>
|
||||
<td class="confidence-${confClass}">${r.confidence || "Medium"}</td>
|
||||
<td>${r.review_needed || "No"}</td>
|
||||
</tr>`;
|
||||
});
|
||||
cardsHtml += `</tbody></table>`;
|
||||
}
|
||||
} else {
|
||||
cardsHtml += `<div class="pipeline-section-label">${sec.label || ""}</div>`;
|
||||
cardsHtml += `<div class="pipeline-section-content">${sec.content}</div>`;
|
||||
}
|
||||
});
|
||||
|
||||
return `
|
||||
<div class="pipeline-stage-card">
|
||||
<div class="pipeline-stage-header" data-stage="${section.stage}">
|
||||
<span class="stage-title">${section.title}</span>
|
||||
<span><span class="stage-arrow" style="margin-right:6px;">▼</span><span class="stage-status ${section.status}">Complete</span></span>
|
||||
</div>
|
||||
<div class="stage-body">${cardsHtml}</div>
|
||||
</div>`;
|
||||
},
|
||||
|
||||
async loadPipelineSession(sessionId) {
|
||||
if (!sessionId) return;
|
||||
const pipelineEl = $("#pipeline-output");
|
||||
|
||||
try {
|
||||
const res = await API.get(`/api/research/pipeline/${sessionId}/render`);
|
||||
const sections = res.sections || [];
|
||||
|
||||
pipelineEl.innerHTML = sections.length > 0
|
||||
? sections.map(s => this.renderSectionHtml(s)).join('')
|
||||
: "<div class='empty-state'><div class='empty-icon'>ℹ️</div><div class='empty-text'>No pipeline data for this session</div></div>";
|
||||
|
||||
// Wire up collapse toggles
|
||||
pipelineEl.querySelectorAll(".pipeline-stage-header").forEach(header => {
|
||||
header.addEventListener("click", () => {
|
||||
const body = header.nextElementSibling;
|
||||
body.classList.toggle("collapsed");
|
||||
const arrow = header.querySelector(".stage-arrow");
|
||||
if (arrow) arrow.textContent = body.classList.contains("collapsed") ? "▶" : "▼";
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
pipelineEl.innerHTML = `<p class='typing' style="color:var(--accent-red)">Error loading pipeline: ${e.message}</p>`;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user