Deep Research
Research
Multi-step web research with an LLM-in-the-loop agent
${emptyText}
`;
return;
}
items.forEach(job => list.appendChild(_buildJobCard(job)));
};
appendCards(activeList, active, 'No active research.');
appendCards(pastList, visiblePast, past.length ? 'No research matches your filters.' : 'No research history yet.');
if (_historyCascadePending && _researchTab === 'history') _playHistoryCascade();
}
/** Pick parallel vs sequential as a small popover anchored to the
* Start-All button. Drops down by default; flips to drop-up if there
* isn't enough room below the button. Outside-click / Esc dismiss. */
function _promptParallelOrSequential(count, anchorBtn) {
// Strip any prior instance so a second click closes-then-reopens cleanly.
const existing = document.getElementById('research-run-mode-popover');
if (existing) { existing.remove(); return; }
if (!anchorBtn) return;
const rect = anchorBtn.getBoundingClientRect();
const pop = document.createElement('div');
pop.id = 'research-run-mode-popover';
pop.className = 'research-run-mode-popover';
// Same parallel / sequential glyphs the model-comparison picker uses.
const ICON_PARALLEL = '';
const ICON_SEQUENTIAL = '';
pop.innerHTML =
''
+ '';
document.body.appendChild(pop);
// Position: prefer dropping down from the button's bottom-right corner.
// If there isn't enough room below the viewport, flip to drop-up above.
const popHeight = pop.offsetHeight;
const margin = 6;
const spaceBelow = window.innerHeight - rect.bottom;
const goUp = spaceBelow < popHeight + margin && rect.top > popHeight + margin;
const top = goUp ? (rect.top - popHeight - margin) : (rect.bottom + margin);
// Right-align to the button so the menu doesn't extend off-screen on the right
const right = Math.max(8, window.innerWidth - rect.right);
pop.style.top = `${Math.round(top)}px`;
pop.style.right = `${Math.round(right)}px`;
pop.classList.add(goUp ? 'rrm-up' : 'rrm-down');
let unregister = () => {};
const close = () => {
pop.remove();
unregister();
unregister = () => {};
};
unregister = bindMenuDismiss(pop, close, e => !(pop.contains(e.target) || e.target === anchorBtn));
pop.querySelectorAll('.research-run-mode-row').forEach(b => {
b.addEventListener('click', () => {
const mode = b.dataset.mode;
close();
if (mode === 'parallel') jobs.startAllQueued();
else jobs.startAllQueuedSequential();
});
});
}
function _buildJobCard(job) {
const card = document.createElement('div');
const standardVariant = !job.category ? _researchVisualVariant(job) : null;
const isHistoryCard = job.status !== 'queued' && job.status !== 'running';
card.className = `doclib-card memory-item research-job-card ${job.status}${job._fromLibrary ? ' from-library' : ''}${standardVariant !== null ? ` research-standard research-standard-v${standardVariant}` : ''}`;
card.dataset.jobId = job.id;
if (job.category) card.dataset.category = job.category;
const elapsed = jobs.formatElapsed(job.elapsed || 0);
const modelTag = (job.modelName || job.settings?._modelName)
? `${_esc(job.modelName || job.settings._modelName)}` : '';
if (job.status === 'queued') {
const rounds = job.settings?.max_rounds;
const roundsLabel = rounds === -1 ? 'Explain only' : (!rounds ? 'Auto rounds' : `${rounds} rounds`);
const epName = job.settings?._endpointName || '';
const mName = job.settings?._modelName || '';
const meta = [mName, epName, roundsLabel].filter(Boolean).join(' -- ');
card.innerHTML = `
${_esc(job.query)}
${_jobOverflowHTML([{ action: 'remove', icon: _cancelIcon, label: 'Remove from queue' }])}
`;
const overflow = _wireJobOverflow(card);
card.querySelector('[data-action="start"]').addEventListener('click', (e) => {
e.stopPropagation(); jobs.startQueued(job.id);
});
card.querySelector('[data-action="edit"]').addEventListener('click', (e) => {
e.stopPropagation(); _editJob(job);
});
card.querySelector('[data-menu-action="remove"]').addEventListener('click', (e) => {
e.stopPropagation(); overflow.close(); jobs.removeJob(job.id);
});
} else if (job.status === 'running') {
// Auto mode (max_rounds=0/undefined) — show round number without total,
// and base the progress bar on a heuristic cap of 8 rounds.
const userMaxR = job.settings?.max_rounds || 0;
const phaseMaxR = userMaxR || 0; // 0 = formatPhase shows "Round X" without total
const phase = jobs.formatPhase(job.progress, phaseMaxR);
const round = job.progress?.round || 0;
const barCap = userMaxR || 8;
const explainOnly = job.mode === 'explain' || job.settings?.max_rounds === -1;
const pct = explainOnly ? 68 : Math.min(100, Math.round((round / barCap) * 100));
const hasLiveNavigationTrace = Array.isArray(job.navigation_trace) && job.navigation_trace.length;
const hasLiveActionTrace = Array.isArray(job.action_trace) && job.action_trace.length;
const liveTrace = hasLiveNavigationTrace || hasLiveActionTrace
? ``
: '';
const expanded = !_collapsedActiveJobIds.has(job.id);
card.classList.toggle('research-active-expanded', expanded);
card.innerHTML = `
${_esc(job.query)}
${modelTag}
${elapsed}
${_jobOverflowHTML([{ action: 'cancel', icon: _cancelIcon, label: 'Cancel research', danger: true }])}
${phase}
${liveTrace}
Couldn't extract, try again or change Settings.
`
: '';
const thumbSource = (job.sources || []).find(s => s && (s.image || s.og_image));
const thumbUrl = job.thumbnail || thumbSource?.image || thumbSource?.og_image || '';
const thumbnail = thumbUrl
? `
${_esc(job.query)}${doneBadge}
${_jobOverflowHTML([
{ action: 'copy', icon: _copyIcon, label: 'Copy report' },
{ action: 'dismiss', icon: _cancelIcon, label: 'Hide from list' },
{ action: 'delete', icon: _trashIcon, label: 'Delete from disk', danger: true },
])}
${thumbnail}
`;
const thumbFrame = card.querySelector('.research-job-thumb-frame');
if (thumbFrame && thumbUrl) {
thumbFrame.setAttribute('role', 'button');
thumbFrame.setAttribute('tabindex', '0');
thumbFrame.setAttribute('title', 'Open visual report');
const openReport = (e) => {
e.preventDefault();
e.stopPropagation();
window.open(`${_apiBase}/api/research/report/${job.id}`, '_blank');
};
thumbFrame.addEventListener('click', openReport);
thumbFrame.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') openReport(e);
});
}
const overflow = _wireJobOverflow(card);
card.querySelector('[data-menu-action="copy"]').addEventListener('click', async (e) => {
e.stopPropagation();
const btn = e.currentTarget; // capture before await — currentTarget becomes null after
if (!job.result) await _ensureResult(job);
_copyResult(job, btn);
overflow.close();
});
card.querySelector('[data-action="report"]').addEventListener('click', (e) => {
e.stopPropagation();
window.open(`${_apiBase}/api/research/report/${job.id}`, '_blank');
});
card.querySelector('[data-action="chat"]').addEventListener('click', (e) => {
e.stopPropagation();
_chatAboutResearch(job.id, e.currentTarget);
});
card.querySelector('[data-menu-action="delete"]').addEventListener('click', async (e) => {
e.stopPropagation();
if (window.styledConfirm) {
const ok = await window.styledConfirm('Delete this research? This permanently removes it from disk.', { confirmText: 'Delete', danger: true });
if (!ok) return;
}
try { await fetch(`${_apiBase}/api/research/${job.id}`, { method: 'DELETE', credentials: 'same-origin' }); } catch {}
overflow.close();
_animateOutThenRemove(card, () => jobs.removeJob(job.id));
});
card.querySelector('[data-menu-action="dismiss"]').addEventListener('click', (e) => {
e.stopPropagation();
overflow.close();
_animateOutThenRemove(card, () => jobs.removeJob(job.id));
});
} else {
const errMsg = job.errorMsg ? `${_esc(job.errorMsg)}` : '';
card.innerHTML = `
${failNote}
${_esc(job.query)}
${errMsg}
${_jobOverflowHTML([{ action: 'dismiss', icon: _cancelIcon, label: 'Hide from list' }])}
`;
const overflow = _wireJobOverflow(card);
card.querySelector('[data-action="retry"]').addEventListener('click', (e) => {
e.stopPropagation();
jobs.retryJob(job.id);
_setResearchTab('active');
});
card.querySelector('[data-action="edit"]').addEventListener('click', (e) => {
e.stopPropagation(); _editJob(job);
});
card.querySelector('[data-menu-action="dismiss"]').addEventListener('click', (e) => {
e.stopPropagation(); overflow.close(); jobs.removeJob(job.id);
});
}
if (_historySelectMode && isHistoryCard) {
const header = card.querySelector('.research-job-header');
if (header) {
const label = document.createElement('label');
label.className = 'research-history-card-select';
label.title = 'Select research';
label.innerHTML = ``;
// Card-level handlers must never consume an individual selection click.
const stopCardInteraction = (e) => e.stopPropagation();
['pointerdown', 'mousedown', 'click'].forEach(type => label.addEventListener(type, stopCardInteraction));
const checkbox = label.querySelector('input');
checkbox.addEventListener('click', stopCardInteraction);
checkbox.addEventListener('change', (e) => {
if (e.currentTarget.checked) _historySelectedIds.add(job.id);
else _historySelectedIds.delete(job.id);
_updateHistoryBulkBar();
});
header.prepend(label);
card.classList.add('research-history-selectable');
card.addEventListener('click', (e) => {
if (e.target.closest('button, a, input, label, .research-job-menu')) return;
checkbox.checked = !checkbox.checked;
checkbox.dispatchEvent(new Event('change', { bubbles: true }));
});
}
}
return card;
}
const _CAT_ICONS = {
product: '',
comparison: '',
howto: '',
landscape: '',
factcheck: '',
};
const _CAT_LABELS = {
product: 'Product',
comparison: 'Comparison',
howto: 'How-to Guide',
landscape: 'Landscape',
factcheck: 'Fact-check',
};
const _STANDARD_CAT_ICON = '';
function _jobOverflowHTML(items) {
const orderedItems = orderActionMenuItems(items);
const menuItems = orderedItems.map((item, index) => `${index > 0 && actionMenuRank(item) >= 700 && actionMenuRank(orderedItems[index - 1]) < 700 ? '' : ''}`).join('');
return `
Loading result...
';
const cat = job.category || '';
const isStandard = !cat;
const catIcon = _CAT_ICONS[cat] || (isStandard ? _STANDARD_CAT_ICON : '');
const catLabel = _CAT_LABELS[cat] || (isStandard ? 'Research' : '');
const heroVariant = isStandard ? ` research-hero-v${_researchVisualVariant(job)}` : '';
let html = '';
// Standard reports keep one stable identity; specialized formats use
// their category palette.
if (cat && catIcon) {
html += `
${catLabel}
${_esc(job.query)}
${catLabel}
${_esc(job.query)}
';
for (const s of job.sources.slice(0, 10)) {
const title = _esc(s.title || s.url || '');
const url = _safeSourceHref(s.url);
const badges = _researchSourceBadges(s);
html += url
? `${title}${badges}`
: `${title}${badges}`;
}
if (job.sources.length > 10) html += `+${job.sources.length - 10} more`;
html += '
';
}
if (job.source_state) {
html += `${_esc(job.source_state)}
`;
}
if (Array.isArray(job.navigation_trace) && job.navigation_trace.length) {
html += ``;
} else if (Array.isArray(job.action_trace) && job.action_trace.length) {
html += ``;
}
const bodyCls = `research-job-report-body${cat ? ' research-body-' + cat : ''}`;
if (_markdownModule) {
html += `${_markdownModule.renderContent(job.result)}
`;
} else {
html += `${_esc(job.result)}${round}${label}${meta}
`;
}).join('');
return rows;
}
function _renderNavigationTrace(trace, actionTrace = []) {
const plan = _renderActionTrace(actionTrace);
const navigation = Array.isArray(trace) ? trace : [];
const rows = navigation.slice(-8).map((item) => {
const tool = _esc(item.tool || 'tool');
const status = _esc(item.status || 'unknown');
const target = _esc(item.query || item.title || item.url || '');
const meta = [];
if (Number.isFinite(Number(item.results))) meta.push(`${Number(item.results)} results`);
if (item.source_kind) meta.push(_esc(item.source_kind));
if (Number.isFinite(Number(item.source_score))) meta.push(`${Number(item.source_score)}/100`);
if (item.retrieval && item.retrieval !== 'fetch') meta.push(_esc(item.retrieval));
const metaHtml = meta.length ? `` : '';
return `${tool}${target}${status}${metaHtml}
`;
}).join('');
const navigationHtml = rows
? `Navigation
${rows}`
: '';
return `${plan}${plan && navigationHtml ? '' : ''}${navigationHtml}`;
}
async function _copyResult(job, btn) {
if (!job.result) return;
let text = `# ${job.query}\n\n${job.result}`;
if (job.findings?.length) {
text += '\n\n---\n## Raw Findings\n';
for (const f of job.findings) {
text += `\n### ${f.title || 'Untitled'}\nSource: ${f.url || ''}\n${f.summary || ''}\n`;
}
}
if (job.sources?.length) {
const srcList = job.sources.map(s => `- [${s.title || s.url}](${s.url})`).join('\n');
text += `\n\n---\n## Sources\n${srcList}`;
}
let ok = false;
try {
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(text);
ok = true;
}
} catch {}
if (!ok) {
// Fallback for non-secure contexts (HTTP self-host) where navigator.clipboard
// is unavailable. The textarea must be in-viewport and focusable for Firefox
// Android / iOS Safari to allow execCommand('copy').
const ta = document.createElement('textarea');
ta.value = text;
ta.readOnly = false;
ta.contentEditable = 'true';
ta.style.cssText = 'position:fixed;top:0;left:0;width:1px;height:1px;padding:0;border:0;opacity:0;font-size:16px;';
document.body.appendChild(ta);
ta.focus();
ta.select();
try { ta.setSelectionRange(0, text.length); } catch {}
try {
const sel = window.getSelection();
if (sel && (!sel.rangeCount || sel.isCollapsed)) {
const range = document.createRange();
range.selectNodeContents(ta);
sel.removeAllRanges();
sel.addRange(range);
ta.setSelectionRange(0, text.length);
}
} catch {}
try { ok = document.execCommand('copy'); } catch {}
ta.remove();
}
if (btn) {
const orig = btn.innerHTML;
if (ok) {
btn.innerHTML = ``;
btn.classList.add('research-job-action-copied');
setTimeout(() => { btn.innerHTML = orig; btn.classList.remove('research-job-action-copied'); }, 2000);
} else {
btn.innerHTML = `${_cancelIcon} Failed`;
setTimeout(() => { btn.innerHTML = orig; }, 2000);
}
}
}
// ── Chat about this research (server-side spinoff) ──
async function _chatAboutResearch(researchId, btn) {
if (!researchId) return;
const origLabel = btn ? btn.innerHTML : '';
let whirlpool = null;
if (btn) {
btn.disabled = true;
btn.setAttribute('aria-busy', 'true');
btn.innerHTML = '';
try {
whirlpool = spinnerModule.createWhirlpool(13);
whirlpool.element.style.cssText += ';margin:0;';
btn.appendChild(whirlpool.element);
} catch {
btn.innerHTML = origLabel;
}
}
try {
const res = await fetch(`${_apiBase}/api/research/spinoff/${researchId}`, {
method: 'POST', credentials: 'same-origin',
});
if (!res.ok) {
let detail = '';
try { detail = (await res.json()).detail || ''; } catch {}
throw new Error(detail || `HTTP ${res.status}`);
}
const payload = await res.json();
if (_sessionModule && _sessionModule.selectSession && payload.session_id) {
if (_sessionModule.loadSessions) await _sessionModule.loadSessions().catch(() => {});
await _sessionModule.selectSession(payload.session_id);
closePanel();
} else if (payload.session_id) {
window.location.hash = '#' + payload.session_id;
window.location.reload();
} else {
// 200 OK but no session_id — server contract violation. Don't leave
// the button stuck on 'Creating…'; surface the failure instead.
throw new Error('Server returned no session id');
}
} catch (e) {
if (whirlpool) whirlpool.destroy();
if (btn) { btn.disabled = false; btn.removeAttribute('aria-busy'); btn.innerHTML = origLabel; }
alert('Could not start follow-up chat: ' + e.message);
}
}
function _esc(s) {
const d = document.createElement('div');
d.textContent = s || '';
return d.innerHTML;
}
function _safeSourceHref(raw) {
try {
const parsed = new URL(String(raw || '').trim(), window.location.origin);
if (parsed.protocol === 'http:' || parsed.protocol === 'https:') return _esc(parsed.href);
} catch {}
return '';
}
function _researchSourceBadges(source) {
const badges = [];
const kind = String(source?.source_kind || '').trim();
const retrieval = String(source?.retrieval || '').trim();
const score = Number(source?.source_score);
if (kind) badges.push(`${_esc(kind)}`);
if (retrieval && retrieval !== 'fetch') badges.push(`${_esc(retrieval)}`);
if (Number.isFinite(score)) badges.push(`${Math.max(0, Math.min(100, Math.round(score)))}`);
return badges.length ? `${badges.join('')}` : '';
}