';
if (logoHtml) html += '' + logoHtml + '';
html += short + '
';
html += 'Model ' + modelName.split('/').pop() + '
';
// Show static context initially, then fetch real from server
const _realCtx = window._realContextLengths && window._realContextLengths[modelName];
if (_realCtx) {
html += 'Context ' + _fmtCtx(_realCtx) + ' tokens';
if (info && info.ctx && info.ctx !== _realCtx) html += ' (spec: ' + _fmtCtx(info.ctx) + ')';
html += '
';
} else if (info && info.ctx) {
html += 'Context ' + _fmtCtx(info.ctx) + ' tokens
';
}
// Fetch real context from server async
if (!_realCtx && window.sessionModule) {
const _sid = window.sessionModule.getCurrentSessionId();
if (_sid) {
fetch('/api/session/' + _sid + '/context_info').then(r => r.ok ? r.json() : null).then(d => {
if (d && d.context_length) {
if (!window._realContextLengths) window._realContextLengths = {};
window._realContextLengths[modelName] = d.context_length;
const el = document.getElementById('_ctx-val');
if (el) {
el.innerHTML = _fmtCtx(d.context_length) + ' tokens';
if (info && info.ctx && info.ctx !== d.context_length) {
el.innerHTML += ' (spec: ' + _fmtCtx(info.ctx) + ')';
}
}
}
}).catch(() => {});
}
}
// Show configured max tokens if set
if (window.presetsModule) {
const _pid = window.presetsModule.getSelectedPreset();
const _preset = _pid ? window.presetsModule.getPreset(_pid) : null;
const _mt = _preset?.max_tokens;
if (_mt && _mt > 0 && _mt <= 8192) {
html += 'Max tokens ' + _mt.toLocaleString() + ' (configured)
';
}
}
if (info && info.input != null) html += 'Input $' + info.input.toFixed(2) + ' / 1M
';
if (info && info.output != null) html += 'Output $' + info.output.toFixed(2) + ' / 1M
';
if (!info) html += 'No pricing data available
';
popup.innerHTML = html;
const rect = roleEl.getBoundingClientRect();
popup.style.top = (rect.bottom + 4) + 'px';
popup.style.left = rect.left + 'px';
document.body.appendChild(popup);
const pr = popup.getBoundingClientRect();
if (pr.bottom > window.innerHeight - 8) popup.style.top = (rect.top - pr.height - 4) + 'px';
if (pr.right > window.innerWidth - 8) popup.style.left = (window.innerWidth - pr.width - 8) + 'px';
bindMenuDismiss(popup, () => popup.remove());
});
}
}
export function getModelCost(modelName, inputTokens, outputTokens) {
if (!modelName) return null;
const key = matchModelKey(modelName, Object.keys(MODEL_PRICING));
if (!key) return null;
const price = MODEL_PRICING[key];
return (inputTokens * price.input + outputTokens * price.output) / 1_000_000;
}
/**
* Is this endpoint a local / self-hosted model server (vLLM, Ollama, …)?
* Local models are free, so we must NOT bill them at cloud rates — the
* pricing table matches on a name substring, so a local `qwen2.5-coder`
* would otherwise be charged like cloud `qwen2.5`. When the serving host is
* loopback, a private LAN range, Tailscale CGNAT (100.64–100.127.x), a
* `.local` name, or the app's own host, the model is local → free.
* Unknown / missing endpoint also counts as local (bias to not over-bill).
*/
export function isLocalEndpoint(url) {
if (!url) return true;
let host;
try { host = new URL(url).hostname; } catch (_e) { return true; }
if (!host) return true;
if (host === 'localhost' || host === '0.0.0.0' || host === 'host.docker.internal' || host.endsWith('.local')) return true;
if (typeof window !== 'undefined' && window.location && host === window.location.hostname) return true;
// A single-label hostname (no dot) is an internal/Docker service name
// (e.g. "nim-nano", "llamaswap", "nemotron-super-49b") or a LAN shortname —
// never a public API, which always needs an FQDN. Treat as local → free.
// (Without this, container-name endpoints get billed at cloud rates because
// the pricing table matches on a name substring, e.g. "nemotron".)
if (!host.includes('.')) return true;
if (/^127\./.test(host)) return true;
if (/^10\./.test(host)) return true;
if (/^192\.168\./.test(host)) return true;
if (/^172\.(1[6-9]|2\d|3[01])\./.test(host)) return true;
const cg = host.match(/^100\.(\d+)\./); // Tailscale CGNAT
if (cg && +cg[1] >= 64 && +cg[1] <= 127) return true;
return false;
}
/** Cost for the current turn, returning null (free) for local endpoints. */
function _billableCost(model, inputTokens, outputTokens) {
const url = (window.sessionModule && window.sessionModule.getCurrentEndpointUrl)
? window.sessionModule.getCurrentEndpointUrl() : null;
if (isLocalEndpoint(url)) return null;
return getModelCost(model, inputTokens, outputTokens);
}
export function getImageCost(model, quality, size) {
if (!model) return null;
const m = model.toLowerCase();
for (const [key, quals] of Object.entries(IMAGE_PRICING)) {
if (m.includes(key)) {
const q = quals[(quality || 'medium').toLowerCase()] || quals['medium'];
return q ? (q[size] || q['1024x1024'] || null) : null;
}
}
return null;
}
/* ── Session cost helpers ─────────────────────────────────────────── */
const _COST_KEY = 'ody-session-cost';
/** Return the accumulated cost for the current (or given) session. */
export function getSessionCost(sessionId) {
const sid = sessionId || (window.sessionModule && window.sessionModule.getCurrentSessionId());
if (!sid) return 0;
try {
const costs = JSON.parse(localStorage.getItem(_COST_KEY) || '{}');
return costs[sid] || 0;
} catch (_e) { return 0; }
}
/** Reset session cost for the given session (defaults to current). */
export function resetSessionCost(sessionId) {
const sid = sessionId || (window.sessionModule && window.sessionModule.getCurrentSessionId());
if (!sid) return;
try {
const costs = JSON.parse(localStorage.getItem(_COST_KEY) || '{}');
delete costs[sid];
localStorage.setItem(_COST_KEY, JSON.stringify(costs));
} catch (_e) { /* ignore */ }
updateSessionCostUI();
}
/** Update the persistent session-cost badge in the input bar. */
export function updateSessionCostUI() {
const el = document.getElementById('session-cost-display');
if (!el) return;
// Local model? It's free — hide the badge and clear any stale cost that a
// previous (buggy) cloud-rate billing left in localStorage for this session.
const _url = (window.sessionModule && window.sessionModule.getCurrentEndpointUrl)
? window.sessionModule.getCurrentEndpointUrl() : null;
if (isLocalEndpoint(_url)) {
const sid = window.sessionModule && window.sessionModule.getCurrentSessionId();
if (sid && getSessionCost(sid) > 0) {
try {
const costs = JSON.parse(localStorage.getItem(_COST_KEY) || '{}');
delete costs[sid];
localStorage.setItem(_COST_KEY, JSON.stringify(costs));
} catch (_e) { /* ignore */ }
}
el.style.display = 'none';
return;
}
const cost = getSessionCost();
if (cost > 0) {
el.textContent = '$' + (cost < 0.01 ? cost.toFixed(4) : cost < 1 ? cost.toFixed(3) : cost.toFixed(2));
el.style.display = '';
} else {
el.style.display = 'none';
}
}
/** Create a timestamp span for role labels.
* Pass an ISO string / Date / epoch-ms to render the message's own time
* (used when replaying history). Falls back to "now" when no value is given. */
export function roleTimestamp(when) {
const ts = document.createElement('span');
ts.className = 'role-timestamp';
let d;
if (when instanceof Date) d = when;
else if (typeof when === 'number') d = new Date(when);
else if (typeof when === 'string' && when) d = new Date(when);
else d = new Date();
if (isNaN(d.getTime())) d = new Date();
ts.textContent = d.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
ts.title = d.toLocaleString();
return ts;
}
/**
* Strip tool invocation blocks from text before rendering.
*/
export function stripToolBlocks(text) {
let cleaned = text.replace(TOOL_CALL_RE, '');
cleaned = cleaned.replace(EXEC_FENCE_RE, '');
cleaned = cleaned.replace(DSML_TOOL_RE, '');
cleaned = cleaned.replace(DSML_STRAY_RE, '');
cleaned = cleaned.replace(XML_TOOL_CALL_RE, '');
cleaned = cleaned.replace(XML_INVOKE_RE, '');
cleaned = cleaned.replace(TOOL_NARRATION_RE, '');
cleaned = cleaned.replace(/\n{3,}/g, '\n\n');
return cleaned.trim();
}
/**
* Build a collapsible sources box (used by both research and web search).
*/
export function buildSourcesBox(sources, type, expanded) {
var esc = uiModule.esc;
var id = 'sources-' + Date.now() + '-' + Math.random().toString(36).substr(2, 5);
var count = sources.length;
var label = type === 'research' ? 'Research sources' : 'Web sources';
var lines = '';
for (var i = 0; i < count; i++) {
var s = sources[i];
var domain = '';
try { domain = new URL(s.url).hostname.replace('www.', ''); } catch(e) { domain = s.url; }
var title = esc(s.title || domain || '');
var safeUrl = _safeHref(s.url);
lines += ''
+ '' + (i + 1) + ''
+ '' + title + ''
+ '' + esc(domain) + ''
+ '';
}
var arrow = expanded ? 'down' : 'right';
var expandedClass = expanded ? ' expanded' : '';
return ''
+ '
';
}
/**
* Build the RAG "Sources (N documents)" box — mirrors the live render in
* chat.js so persisted rag_sources survive a refresh. Items carry a
* filename, similarity %, and snippet (not URLs, unlike web sources).
* @param {Array<{filename, similarity, snippet}>} sources
*/
export function buildRagSourcesBox(sources) {
if (!sources || !sources.length) return '';
var esc = uiModule.esc;
var items = '';
for (var i = 0; i < sources.length; i++) {
var s = sources[i] || {};
var pct = (typeof s.similarity === 'number') ? (s.similarity * 100).toFixed(1) + '%' : '';
items += ''
+ '
'
+ '' + SEARCH_ICON + '' + count + ' ' + label + '
'
+ ''
+ '' + esc(s.filename || '') + ''
+ (pct ? ' ' + pct + '' : '')
+ '
';
}
return '' + esc(s.snippet || '') + '
Sources (' + sources.length + ' documents)
' + items + ''
+ ''
+ '' + (i + 1) + ''
+ '' + title + ''
+ '' + esc(domain) + ''
+ ''
+ '
';
}
var FINDINGS_ICON = '';
var arrow = expanded ? 'down' : 'right';
var expandedClass = expanded ? ' expanded' : '';
return '' + summary + '
'
+ ''
+ '
';
}
/** Append report button + continue research prompt. */
export function appendReportButton(container, sessionId) {
_appendReportButton(container, sessionId);
_appendContinuePrompt(container);
}
function _appendContinuePrompt(container) {
var wrap = document.createElement('div');
wrap.className = 'continue-research-wrap';
wrap.innerHTML =
''
+ '
'
+ '' + FINDINGS_ICON + '' + count + ' Raw collected findings
'
+ ''
+ ''
+ ''
+ 'Dig deeper? Activate Research again and type a follow-up question to continue this research.'
+ '
';
container.appendChild(wrap);
}
function _appendReportButton(container, sessionId) {
var apiBase = window.API_BASE || '';
// Wrapper holds report button + chat-about button
var wrap = document.createElement('div');
wrap.className = 'report-btn-wrap';
var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'view-report-btn';
btn.innerHTML = REPORT_ICON + ' Open Visual Report';
var reportUrl = apiBase + '/api/research/report/' + sessionId;
btn.addEventListener('click', function() {
window.open(reportUrl, '_blank');
});
wrap.appendChild(btn);
var chatBtn = document.createElement('button');
chatBtn.type = 'button';
chatBtn.className = 'view-report-btn chat-about-btn';
chatBtn.innerHTML = CHAT_ABOUT_ICON + ' Discuss';
chatBtn.addEventListener('click', async function() {
if (chatBtn.disabled) return;
var origLabel = chatBtn.innerHTML;
chatBtn.disabled = true;
chatBtn.innerHTML = CHAT_ABOUT_ICON + ' Creating…';
try {
var res = await fetch(apiBase + '/api/research/spinoff/' + sessionId, { method: 'POST' });
if (!res.ok) {
var detail = '';
try { detail = (await res.json()).detail || ''; } catch {}
throw new Error(detail || ('HTTP ' + res.status));
}
var payload = await res.json();
if (window.sessionModule && payload.session_id) {
await window.sessionModule.loadSessions().catch(() => {});
await window.sessionModule.selectSession(payload.session_id);
}
} catch (e) {
chatBtn.disabled = false;
chatBtn.innerHTML = origLabel;
if (window.uiModule && uiModule.showError) {
uiModule.showError('Could not start follow-up chat: ' + e.message);
} else {
alert('Could not start follow-up chat: ' + e.message);
}
}
});
wrap.appendChild(chatBtn);
container.appendChild(wrap);
}
window.toggleSources = function(id) {
// Debounce to prevent double-fire from both inline onclick and delegation
var now = Date.now();
if (window._lastSourcesToggle && now - window._lastSourcesToggle < 100) return;
window._lastSourcesToggle = now;
var content = document.getElementById(id);
var toggle = document.getElementById(id + '-toggle');
if (content && toggle) {
var expanded = content.classList.contains('expanded');
content.classList.toggle('expanded', !expanded);
toggle.dataset.arrow = expanded ? 'right' : 'down';
}
};
// Event delegation for sources toggle (capture phase, handles SVG targets)
document.addEventListener('click', function(e) {
// Walk up from target manually to handle SVG elements that may not support closest()
var el = e.target;
while (el && el !== document) {
if (el.classList && el.classList.contains('sources-header') && el.dataset && el.dataset.sourcesId) {
e.stopPropagation();
window.toggleSources(el.dataset.sourcesId);
return;
}
el = el.parentElement || el.parentNode;
}
}, true);
// Jump-to-entity anchors — the agent emits links like
// [New Chat](#session-89effa28)
// [Notes](#document-abc123)
// [Reminder](#note-42)
// and the chat-history click delegate turns them into navigation
// instead of default in-page anchor jumps. Each prefix routes to the
// matching module via a dynamic import (avoids circular deps —
// sessions.js itself imports chatRenderer.js).
document.addEventListener('click', function(e) {
const a = e.target && e.target.closest && e.target.closest('a[href]');
if (!a) return;
const href = a.getAttribute('href') || '';
if (!href.startsWith('#')) return;
const m = href.match(/^#(session|document|note|image|email|event|task|skill|research)-(.+)$/);
if (!m) return;
e.preventDefault();
e.stopPropagation();
const [, kind, id] = m;
if (kind === 'session') {
import('./sessions.js').then(mod => {
const fn = mod.selectSession || (mod.default && mod.default.selectSession);
if (fn) fn(id);
});
} else if (kind === 'document') {
import('./document.js').then(mod => {
const open = mod.loadDocument
|| mod.openDocument
|| (mod.default && (mod.default.loadDocument || mod.default.openDocument));
if (open) open(id);
}).catch(() => {});
} else if (kind === 'note') {
import('./notes.js').then(mod => {
const open = mod.openNote || (mod.default && mod.default.openNote);
if (open) open(id);
}).catch(() => {});
} else if (kind === 'image') {
import('./gallery.js').then(mod => {
const open = mod.openGalleryImage || (mod.default && mod.default.openGalleryImage);
if (open) open(id);
}).catch(() => {});
} else if (kind === 'email') {
import('./emailLibrary.js').then(mod => {
const open = mod.openEmailLibrary || (mod.default && mod.default.openEmailLibrary);
if (open) open({ uid: id });
}).catch(() => {});
} else if (kind === 'event') {
import('./calendar.js').then(mod => {
const open = mod.openCalendarTo || (mod.default && mod.default.openCalendarTo);
if (open) open(id);
}).catch(() => {});
} else if (kind === 'task') {
import('./tasks.js').then(mod => {
const open = mod.openTasks || (mod.default && mod.default.openTasks);
if (open) open(id);
else { const b = document.getElementById('tasks-btn'); if (b) b.click(); }
}).catch(() => { const b = document.getElementById('tasks-btn'); if (b) b.click(); });
} else if (kind === 'skill') {
import('./skills.js').then(mod => {
const open = mod.openSkill || (mod.default && mod.default.openSkill);
if (open) open(id);
}).catch(() => {});
} else if (kind === 'research') {
import('./research/panel.js').then(mod => {
const open = mod.openPanel || (mod.default && mod.default.openPanel);
if (open) open(id);
}).catch(() => {});
}
});
/**
* Build a generated-image bubble element.
*/
export function buildImageBubble(imageUrl, prompt, model, size, quality, imageId) {
var esc = uiModule.esc;
const wrap = document.createElement('div');
wrap.className = 'msg msg-ai generated-image-wrap';
const role = document.createElement('div');
role.className = 'role';
role.textContent = (model || 'image').split('/').pop();
wrap.appendChild(role);
const body = document.createElement('div');
body.className = 'body';
const img = document.createElement('img');
img.className = 'generated-image';
img.alt = prompt || 'Generated image';
img.title = prompt || 'Generated image';
img.src = imageUrl;
img.addEventListener('click', () => { window.open(img.src, '_blank'); });
body.appendChild(img);
if (prompt) {
const caption = document.createElement('div');
caption.className = 'generated-image-caption';
caption.textContent = prompt;
body.appendChild(caption);
}
wrap.appendChild(body);
const footer = document.createElement('div');
footer.className = 'msg-footer';
const actions = document.createElement('span');
actions.className = 'msg-actions';
const copyBtn = document.createElement('button');
copyBtn.className = 'footer-copy-btn';
copyBtn.type = 'button';
copyBtn.title = 'Copy prompt';
copyBtn.innerHTML = COPY_ICON;
copyBtn.addEventListener('click', (e) => {
e.stopPropagation();
uiModule.copyToClipboard(prompt || '');
copyBtn.innerHTML = CHECK_ICON;
setTimeout(() => { copyBtn.innerHTML = COPY_ICON; }, 1500);
});
actions.appendChild(copyBtn);
const dlBtn = document.createElement('button');
dlBtn.className = 'footer-copy-btn';
dlBtn.type = 'button';
dlBtn.title = 'Download image';
dlBtn.textContent = '\u2913';
dlBtn.addEventListener('click', async (e) => {
e.stopPropagation();
try {
const resp = await fetch(imageUrl);
const blob = await resp.blob();
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = (prompt || 'image').slice(0, 40).replace(/[^a-zA-Z0-9 ]/g, '') + '.png';
document.body.appendChild(a);
a.click();
a.remove();
URL.revokeObjectURL(a.href);
dlBtn.textContent = '\u2713';
setTimeout(() => { dlBtn.textContent = '\u2913'; }, 1500);
} catch { dlBtn.textContent = '\u2717'; setTimeout(() => { dlBtn.textContent = '\u2913'; }, 1500); }
});
actions.appendChild(dlBtn);
const editBtn = document.createElement('button');
editBtn.className = 'footer-copy-btn';
editBtn.type = 'button';
editBtn.title = 'Edit in image editor';
editBtn.innerHTML = '';
editBtn.addEventListener('click', async (e) => {
e.stopPropagation();
try {
const [galleryMod, editorMod] = await Promise.all([
import('./gallery.js'),
import('./galleryEditor.js'),
]);
// Ensure the Gallery modal is open so the editor has a container
// to render into; switch its tabs to the Edit tab.
galleryMod.default.openGallery();
const modal = document.getElementById('gallery-modal');
if (modal) {
modal.querySelectorAll('.gallery-tab').forEach(t => t.classList.remove('active'));
modal.querySelector('.gallery-tab[data-tab="editor"]')?.classList.add('active');
}
const imagesContainer = document.getElementById('gallery-images-container');
const albumsContainer = document.getElementById('gallery-albums-container');
if (imagesContainer) imagesContainer.style.display = 'none';
if (albumsContainer) albumsContainer.style.display = 'none';
const editorContainer = document.getElementById('gallery-editor-container');
if (editorContainer) editorContainer.style.display = 'flex';
const label = (prompt || '').trim().slice(0, 60) || 'Generated image';
editorMod.openEditor(imageUrl, null, null, label);
} catch (err) {
console.error('[chat] open in editor failed', err);
}
});
actions.appendChild(editBtn);
const delBtn = document.createElement('button');
delBtn.className = 'footer-copy-btn footer-delete-btn';
delBtn.type = 'button';
delBtn.title = 'Delete image';
delBtn.innerHTML = '';
delBtn.addEventListener('click', async (e) => {
e.stopPropagation();
const ok = await uiModule.styledConfirm('Delete this image?', {
confirmText: 'Delete',
cancelText: 'Cancel',
danger: true,
});
if (!ok) return;
// If we have a gallery id, delete server-side; otherwise just remove
// the bubble from chat (e.g. external DALL-E url that wasn't saved).
if (imageId) {
try {
const res = await fetch(`/api/gallery/${encodeURIComponent(imageId)}`, {
method: 'DELETE', credentials: 'same-origin',
});
if (!res.ok && res.status !== 404) {
uiModule.showToast?.('Delete failed', 4000);
return;
}
window.dispatchEvent(new CustomEvent('gallery-refresh'));
} catch (_) {
uiModule.showToast?.('Delete failed', 4000);
return;
}
}
wrap.remove();
});
actions.appendChild(delBtn);
footer.appendChild(actions);
const metrics = document.createElement('span');
metrics.className = 'response-metrics';
const parts = [];
if (model) parts.push(model.split('/').pop());
if (size) parts.push(size);
if (quality) parts.push(quality);
const cost = getImageCost(model, quality, size);
if (cost !== null) parts.push('$' + (cost < 0.01 ? cost.toFixed(4) : cost.toFixed(3)));
metrics.textContent = parts.join(' \u00B7 ');
footer.appendChild(metrics);
wrap.appendChild(footer);
return wrap;
}
export function hideWelcomeScreen() {
const ws = document.getElementById('welcome-screen');
const cc = document.getElementById('chat-container');
if (ws) ws.classList.add('hidden');
if (cc) cc.classList.remove('welcome-active');
// Update send button — switches from muted arrow to + Chat
if (window._updateSendBtnIcon) setTimeout(window._updateSendBtnIcon, 50);
const ib = document.getElementById('incognito-btn');
if (ib) ib.style.display = ib.classList.contains('active') ? '' : 'none';
}
export function showWelcomeScreen() {
const ws = document.getElementById('welcome-screen');
const cc = document.getElementById('chat-container');
if (ws) ws.classList.remove('hidden');
if (cc) cc.classList.add('welcome-active');
// Entering the New Chat / welcome state: discard any stale draft left in the
// composer from the previous session so the input starts empty (issue #1343).
// Switching between existing sessions loads them directly and does NOT call
// this, so genuine drafts are not erased. Reset the autosized height and fire
// an `input` event so the send button + autosize listeners update.
const _msg = document.getElementById('message');
if (_msg) {
_msg.value = '';
_msg.style.height = '';
_msg.dispatchEvent(new Event('input', { bubbles: true }));
}
// Re-trigger the L→R clip-wipe reveal on the welcome name each time the
// welcome screen is shown (new session, deleted last session, etc.) — without
// this, the CSS animation only fires on initial DOM insertion.
const wn = document.querySelector('.welcome-name');
if (wn) {
wn.style.animation = 'none';
// force reflow so the next assignment registers as a new animation
void wn.offsetHeight;
wn.style.animation = '';
}
// Update send button — switches from + Chat to muted arrow on empty session
if (window._updateSendBtnIcon) setTimeout(window._updateSendBtnIcon, 50);
const ib = document.getElementById('incognito-btn');
const _researchChk = document.getElementById('research-toggle');
if (ib && !(_researchChk && _researchChk.checked)) ib.style.display = '';
if (window.innerWidth > 768) {
const msg = document.getElementById('message');
if (msg) msg.focus();
}
}
// ── Dynamic action buttons (show 3 most recent, rest under ···) ──
const _ACTION_RECENTS_KEY = 'odysseus-msg-actions-recent';
const _MAX_VISIBLE = 2;
function _getRecentActions() {
try { return JSON.parse(localStorage.getItem(_ACTION_RECENTS_KEY) || '[]'); } catch { return []; }
}
function _trackAction(id) {
let recent = _getRecentActions().filter(x => x !== id);
recent.unshift(id);
if (recent.length > 10) recent.length = 10;
localStorage.setItem(_ACTION_RECENTS_KEY, JSON.stringify(recent));
}
/**
* Create a footer row for an AI message with timestamp and action buttons.
*/
export function createMsgFooter(msgElement) {
const footer = document.createElement('div');
footer.className = 'msg-footer';
const actions = document.createElement('span');
actions.className = 'msg-actions';
// Define all available actions: { id, icon, title, className, handler }
const allActions = [
{ id: 'copy', icon: COPY_ICON, title: 'Copy message', cls: 'footer-copy-btn', html: true, handler(e) {
e.stopPropagation();
const btn = e.currentTarget;
uiModule.copyToClipboard(msgElement.dataset.raw || msgElement.querySelector('.body')?.textContent || '');
btn.innerHTML = CHECK_ICON;
setTimeout(() => { btn.innerHTML = COPY_ICON; }, 1500);
}},
{ id: 'edit', icon: '\u270E', title: 'Edit', cls: 'msg-action-btn', handler(e) {
e.stopPropagation();
if (window.chatModule?.editAIMessage) window.chatModule.editAIMessage(msgElement);
}},
{ id: 'regen', icon: '\u21BB', title: 'Regenerate from here', cls: 'msg-action-btn', handler(e) {
e.stopPropagation();
if (window.chatModule?.regenerateFrom) window.chatModule.regenerateFrom(msgElement);
}},
{ id: 'shorten', icon: '\u2702', title: 'Rewrite shorter', cls: 'msg-action-btn', handler(e) {
e.stopPropagation();
if (window.chatModule?.rewriteWith) window.chatModule.rewriteWith(msgElement, 'Rewrite your last response to be shorter and more concise. Keep the key information but cut the fluff.');
}},
{ id: 'explain', icon: '?', title: 'Explain simpler', cls: 'msg-action-btn', handler(e) {
e.stopPropagation();
if (window.chatModule?.rewriteWith) window.chatModule.rewriteWith(msgElement, 'Explain your last response in simpler terms. Use plain language and short sentences.');
}},
{ id: 'fork', icon: '\u2ADD', title: 'Fork conversation', cls: 'msg-action-btn', handler(e) {
e.stopPropagation();
if (window.chatModule?.forkFrom) window.chatModule.forkFrom(msgElement);
}},
{ id: 'delete', icon: '\u2715', title: 'Delete message', cls: 'msg-action-btn msg-delete-btn', handler(e) {
e.stopPropagation();
if (window.chatModule?.deleteMessage) window.chatModule.deleteMessage(msgElement);
}},
];
// Filter out unavailable actions (e.g. TTS when not enabled)
const availableActions = allActions.filter(a => !a.available || a.available());
// Determine which 3 to show: use recent order, fallback to defaults
const recent = _getRecentActions();
const defaults = ['copy', 'delete', 'fork'];
const order = recent.length > 0 ? recent : defaults;
const sorted = [...availableActions].sort((a, b) => {
const ai = order.indexOf(a.id), bi = order.indexOf(b.id);
if (ai >= 0 && bi >= 0) return ai - bi;
if (ai >= 0) return -1;
if (bi >= 0) return 1;
return 0;
});
const visible = sorted.slice(0, _MAX_VISIBLE);
const overflow = sorted.slice(_MAX_VISIBLE);
// Render visible buttons
function _addBtn(action, container) {
const btn = _makeActionBtn(action.cls, action.title, action.html ? '' : action.icon, (e) => {
_trackAction(action.id);
action.handler(e);
});
if (action.html) btn.innerHTML = action.icon;
btn.dataset.action = action.id;
container.appendChild(btn);
}
visible.forEach(a => _addBtn(a, actions));
// Overflow "···" button
if (overflow.length > 0) {
const moreBtn = document.createElement('button');
moreBtn.className = 'msg-action-btn msg-more-btn';
moreBtn.type = 'button';
moreBtn.title = 'More actions';
moreBtn.textContent = '\u00B7\u00B7\u00B7';
moreBtn.addEventListener('click', (e) => {
e.stopPropagation();
// Toggle overflow menu — close any existing one first (through its own
// dismiss so the Escape registry entry goes with it).
const existing = document.querySelector('.msg-overflow-menu');
if (existing) {
if (typeof existing._dismiss === 'function') existing._dismiss(); else existing.remove();
if (existing._trigger === moreBtn) return;
}
const menu = document.createElement('div');
menu.className = 'msg-overflow-menu';
let closeMenu = () => menu.remove();
overflow.forEach(a => {
const item = document.createElement('button');
item.className = 'msg-overflow-item';
item.type = 'button';
item.title = a.title;
item.innerHTML = ` ${a.title}`;
item.addEventListener('click', (ev) => {
ev.stopPropagation();
_trackAction(a.id);
closeMenu();
a.handler(ev);
});
menu.appendChild(item);
});
menu._trigger = moreBtn;
document.body.appendChild(menu);
// Position fixed relative to the ··· button
const btnRect = moreBtn.getBoundingClientRect();
menu.style.top = (btnRect.top - menu.offsetHeight - 4) + 'px';
menu.style.left = btnRect.left + 'px';
// Flip down if above viewport
if (parseFloat(menu.style.top) < 8) menu.style.top = (btnRect.bottom + 4) + 'px';
// Keep within right edge
const mr = menu.getBoundingClientRect();
if (mr.right > window.innerWidth - 8) menu.style.left = (window.innerWidth - mr.width - 8) + 'px';
// Close on outside click or Escape. The trigger button is treated as
// "inside" so its own click toggles rather than double-fires.
closeMenu = bindMenuDismiss(menu, () => menu.remove(), (ev) => !menu.contains(ev.target) && ev.target !== moreBtn); });
actions.appendChild(moreBtn);
}
// Memory-used indicator pill
const mems = msgElement._memoriesUsed;
if (mems && mems.length > 0) {
const pill = document.createElement('button');
pill.className = 'memory-used-pill';
pill.type = 'button';
const pinnedCount = mems.filter(m => m.type === 'pinned').length;
const recalledCount = mems.filter(m => m.type === 'recalled').length;
const parts = [];
if (pinnedCount) parts.push(`${pinnedCount} pinned`);
if (recalledCount) parts.push(`${recalledCount} recalled`);
pill.innerHTML = `${parts.join(', ')}`;
pill.title = mems.map(m => `[${m.type}] ${m.text}`).join('\n');
pill.addEventListener('click', (e) => {
e.stopPropagation();
let detail = pill._openDetail || document.querySelector('.memory-used-detail');
if (detail) {
if (typeof detail._dismiss === 'function') detail._dismiss();
else { detail.remove(); pill._openDetail = null; }
return;
}
detail = document.createElement('div');
detail.className = 'memory-used-detail';
let closeDetail = () => { detail.remove(); pill._openDetail = null; };
mems.forEach(m => {
const row = document.createElement('div');
row.className = 'memory-used-row';
row.style.cursor = 'pointer';
row.title = 'Click to open memory manager';
const badge = document.createElement('span');
badge.className = 'memory-used-badge ' + (m.type === 'pinned' ? 'pinned' : 'recalled');
badge.textContent = m.type === 'pinned' ? '\u25CF' : '\u21BB';
const text = document.createElement('span');
text.className = 'memory-used-text';
text.textContent = m.text;
row.appendChild(badge);
row.appendChild(text);
row.addEventListener('click', (ev) => {
ev.stopPropagation();
closeDetail();
const memModal = document.getElementById('memory-modal');
if (memModal) memModal.classList.remove('hidden');
});
detail.appendChild(row);
});
detail.style.visibility = 'hidden';
document.body.appendChild(detail);
const pillRect = pill.getBoundingClientRect();
const detailRect = detail.getBoundingClientRect();
const spaceAbove = pillRect.top;
const spaceBelow = window.innerHeight - pillRect.bottom;
if (spaceAbove >= detailRect.height + 8 || spaceAbove > spaceBelow) {
detail.style.top = (pillRect.top - detailRect.height - 8) + 'px';
} else {
detail.style.top = (pillRect.bottom + 8) + 'px';
}
detail.style.left = pillRect.left + 'px';
if (pillRect.left + detailRect.width > window.innerWidth - 8) {
detail.style.left = (window.innerWidth - detailRect.width - 8) + 'px';
}
if (parseFloat(detail.style.left) < 8) detail.style.left = '8px';
detail.style.visibility = '';
pill._openDetail = detail;
// Close on outside click or Escape (pill click toggles, so it's inside).
closeDetail = bindMenuDismiss(detail, () => { detail.remove(); pill._openDetail = null; }, (ev) => !detail.contains(ev.target) && ev.target !== pill); });
footer.appendChild(pill);
}
footer.appendChild(actions);
return footer;
}
/**
* Create a footer row for a user message with action buttons (same system as AI footer).
*/
const _USER_ACTION_RECENTS_KEY = 'odysseus-user-actions-recent';
function _getUserRecentActions() {
try { return JSON.parse(localStorage.getItem(_USER_ACTION_RECENTS_KEY) || '[]'); } catch { return []; }
}
function _trackUserAction(id) {
let recent = _getUserRecentActions().filter(x => x !== id);
recent.unshift(id);
if (recent.length > 10) recent.length = 10;
localStorage.setItem(_USER_ACTION_RECENTS_KEY, JSON.stringify(recent));
}
export function createUserMsgFooter(msgElement) {
const footer = document.createElement('div');
footer.className = 'msg-footer';
const actions = document.createElement('span');
actions.className = 'msg-actions';
const allActions = [
{ id: 'edit', icon: '\u270E', title: 'Edit message', cls: 'msg-action-btn', handler(e) {
e.stopPropagation();
if (window.chatModule?.editUserMessage) window.chatModule.editUserMessage(msgElement);
}},
{ id: 'delete', icon: '\u2715', title: 'Delete message', cls: 'msg-action-btn msg-delete-btn', handler(e) {
e.stopPropagation();
if (window.chatModule?.deleteMessage) window.chatModule.deleteMessage(msgElement);
}},
{ id: 'copy', icon: COPY_ICON, title: 'Copy message', cls: 'footer-copy-btn', html: true, handler(e) {
e.stopPropagation();
const btn = e.currentTarget;
uiModule.copyToClipboard(msgElement.querySelector('.body')?.textContent || '');
btn.innerHTML = CHECK_ICON;
setTimeout(() => { btn.innerHTML = COPY_ICON; }, 1500);
}},
{ id: 'resend', icon: '\u21BB', title: 'Resend message', cls: 'msg-action-btn', handler(e) {
e.stopPropagation();
if (window.chatModule?.resendUserMessage) window.chatModule.resendUserMessage(msgElement);
}},
];
const recent = _getUserRecentActions();
const defaults = ['edit', 'delete', 'copy'];
const order = recent.length > 0 ? recent : defaults;
const sorted = [...allActions].sort((a, b) => {
const ai = order.indexOf(a.id), bi = order.indexOf(b.id);
if (ai >= 0 && bi >= 0) return ai - bi;
if (ai >= 0) return -1;
if (bi >= 0) return 1;
return 0;
});
const visible = sorted.slice(0, _MAX_VISIBLE);
const overflow = sorted.slice(_MAX_VISIBLE);
visible.forEach(a => {
const btn = _makeActionBtn(a.cls, a.title, a.html ? '' : a.icon, (ev) => {
_trackUserAction(a.id);
a.handler(ev);
});
if (a.html) btn.innerHTML = a.icon;
btn.dataset.action = a.id;
actions.appendChild(btn);
});
if (overflow.length > 0) {
const moreBtn = document.createElement('button');
moreBtn.className = 'msg-action-btn msg-more-btn';
moreBtn.type = 'button';
moreBtn.title = 'More actions';
moreBtn.textContent = '\u00B7\u00B7\u00B7';
moreBtn.addEventListener('click', (e) => {
e.stopPropagation();
const existing = document.querySelector('.msg-overflow-menu');
if (existing) {
if (typeof existing._dismiss === 'function') existing._dismiss(); else existing.remove();
if (existing._trigger === moreBtn) return;
}
const menu = document.createElement('div');
menu.className = 'msg-overflow-menu';
let closeMenu = () => menu.remove();
overflow.forEach(a => {
const item = document.createElement('button');
item.className = 'msg-overflow-item';
item.type = 'button';
item.title = a.title;
item.innerHTML = ` ${a.title}`;
item.addEventListener('click', (ev) => {
ev.stopPropagation();
_trackUserAction(a.id);
closeMenu();
a.handler(ev);
});
menu.appendChild(item);
});
menu._trigger = moreBtn;
document.body.appendChild(menu);
const btnRect = moreBtn.getBoundingClientRect();
menu.style.top = (btnRect.top - menu.offsetHeight - 4) + 'px';
menu.style.left = btnRect.left + 'px';
if (parseFloat(menu.style.top) < 8) menu.style.top = (btnRect.bottom + 4) + 'px';
const mr = menu.getBoundingClientRect();
if (mr.right > window.innerWidth - 8) menu.style.left = (window.innerWidth - mr.width - 8) + 'px';
closeMenu = bindMenuDismiss(menu, () => menu.remove(), (ev) => !menu.contains(ev.target) && ev.target !== moreBtn); });
actions.appendChild(moreBtn);
}
footer.appendChild(actions);
return footer;
}
/**
* Display performance metrics for a message.
*/
export function displayMetrics(messageElement, metrics) {
const existingMetrics = messageElement.querySelector('.response-metrics');
if (existingMetrics) existingMetrics.remove();
const metricsContainer = document.createElement('span');
metricsContainer.className = 'response-metrics';
const responseTime = metrics.response_time;
const inputTokens = metrics.input_tokens || 0;
const outputTokens = metrics.output_tokens || 0;
const tps = metrics.tokens_per_second;
const isReal = metrics.usage_source === 'real';
const ctxPct = metrics.context_percent;
const model = metrics.model || 'Unknown';
const cost = _billableCost(model, inputTokens, outputTokens);
// Nothing useful to show — bail out (only if ALL metrics are missing)
if (!responseTime && !outputTokens && tps == null && !ctxPct) return;
// Accumulate session cost (only on fresh metrics, not history reload)
if (!metrics._fromHistory) {
const _sid = window.sessionModule && window.sessionModule.getCurrentSessionId();
if (_sid && cost !== null) {
try {
const _costs = JSON.parse(localStorage.getItem(_COST_KEY) || '{}');
_costs[_sid] = (_costs[_sid] || 0) + cost;
localStorage.setItem(_COST_KEY, JSON.stringify(_costs));
} catch (_e) { /* ignore */ }
updateSessionCostUI();
}
}
// Default: show tok/s if available, else fall back to other stats
const costStr0 = cost !== null ? `$${cost < 0.01 ? cost.toFixed(4) : cost.toFixed(3)}` : null;
const metricsLabel = tps != null && tps !== 'undefined'
? `${tps} tok/s`
: costStr0
? `${outputTokens} tok · ${costStr0}`
: outputTokens
? `${outputTokens} tok · ${responseTime != null ? responseTime + 's' : ''}`
: responseTime != null
? `${responseTime}s`
: '';
if (!metricsLabel) return;
metricsContainer.textContent = metricsLabel;
metricsContainer.style.cursor = 'pointer';
metricsContainer.title = 'Click for details';
const metricsDivider = document.createElement('span');
metricsDivider.textContent = ' | ';
metricsDivider.style.color = 'var(--color-muted-alt)';
metricsDivider.style.pointerEvents = 'none';
metricsContainer.addEventListener('click', (e) => {
e.stopPropagation();
document.querySelectorAll('.ctx-popup').forEach(p => { if (typeof p._dismiss === 'function') p._dismiss(); else p.remove(); });
const costStr = cost !== null ? `$${cost < 0.01 ? cost.toFixed(4) : cost.toFixed(3)}` : 'n/a';
const speedStr = tps != null && tps !== 'undefined' ? `${tps} tok/s` : 'n/a';
const totalTok = inputTokens + outputTokens;
const ctxColor = ctxPct >= 85 ? 'var(--red, #e06c75)' : ctxPct >= 70 ? '#ff9900' : 'var(--color-muted-alt, #6b7280)';
const prepTime = metrics.agent_prep_time;
const modelWaitTime = metrics.agent_model_wait_time;
const prepBreakdown = metrics.agent_prep_breakdown || null;
const prepDetails = prepBreakdown
? Object.entries(prepBreakdown).map(([k, v]) => `${k}: ${v}s`).join('') : ''; // Session total cost let sessionCostStr = ''; const sc = getSessionCost(); if (sc > 0) { sessionCostStr = `
Session $${sc < 0.01 ? sc.toFixed(4) : sc.toFixed(3)}
`;
}
const popup = document.createElement('div');
popup.className = 'ctx-popup';
popup.innerHTML = `
Message Stats
Model ${model.split('/').pop()}
Input ${inputTokens.toLocaleString()} tokens${isReal ? '' : '~'}
Output ${outputTokens.toLocaleString()} tokens${isReal ? '' : '~'}
Total ${totalTok.toLocaleString()} tokens
Speed ${speedStr}
Time ${responseTime}s
${prepTime != null ? `Prep ${prepTime}s
` : ''}
${modelWaitTime != null ? `Model wait ${modelWaitTime}s
` : ''}
Cost ${costStr}
${sessionCostStr}
${prepDetails ? `Agent prep
${prepDetails}
Context ${ctxPct}% used
` : ''}
${isReal ? '' : '~ estimated token count
'}
`;
const rect = metricsContainer.getBoundingClientRect();
popup.style.left = rect.left + 'px';
popup.style.visibility = 'hidden';
document.body.appendChild(popup);
const pr = popup.getBoundingClientRect();
const spaceAbove = rect.top;
const spaceBelow = window.innerHeight - rect.bottom;
if (spaceAbove >= pr.height + 8 || spaceAbove > spaceBelow) {
popup.style.top = (rect.top - pr.height - 8) + 'px';
} else {
popup.style.top = (rect.bottom + 8) + 'px';
}
if (pr.right > window.innerWidth - 8) popup.style.left = (window.innerWidth - pr.width - 8) + 'px';
if (parseFloat(popup.style.left) < 8) popup.style.left = '8px';
popup.style.visibility = '';
bindMenuDismiss(popup, () => popup.remove());
});
// Store real context length for model info popup
if (metrics.context_length && metrics.model) {
if (!window._realContextLengths) window._realContextLengths = {};
window._realContextLengths[metrics.model] = metrics.context_length;
}
// Context usage ring
let ctxRing = null;
const ctxLen = metrics.context_length || 0;
if (ctxPct !== undefined && ctxPct > 0) {
const r = 6, stroke = 1.5;
const circ = 2 * Math.PI * r;
const fill = circ * (ctxPct / 100);
const ctxColor = ctxPct >= 85 ? 'var(--red, #e06c75)' : ctxPct >= 70 ? '#ff9900' : 'var(--green, #98c379)';
ctxRing = document.createElement('span');
ctxRing.className = 'ctx-ring';
ctxRing.title = `${ctxPct}% context used — click for details`;
ctxRing.style.cursor = 'pointer';
ctxRing.style.setProperty('--ctx-color', ctxColor);
ctxRing.innerHTML = `${Math.round(ctxPct)}%`;
ctxRing.addEventListener('click', (e) => {
e.stopPropagation();
document.querySelectorAll('.ctx-detail-popup').forEach(p => { if (typeof p._dismiss === 'function') p._dismiss(); else p.remove(); });
const usedTokens = inputTokens || 0;
const totalCtx = ctxLen || 0;
const modelShort = model.split('/').pop();
const fmtNum = n => n ? n.toLocaleString() : '?';
const popup = document.createElement('div');
popup.className = 'ctx-detail-popup';
popup.innerHTML = `
Context Window
${fmtNum(usedTokens)} used
${fmtNum(totalCtx)} total
Model ${modelShort}
Usage ${ctxPct}%
Window ${fmtNum(totalCtx)} tokens
Output
${esc(ev.output)}Screenshot
${esc(ev.command)}` : '';
node.innerHTML = `${esc(ev.tool)}${ok ? 'done' : 'failed'}\u25B6
${evCmdHtml}${outHtml}
`;
// Click handling is delegated globally \u2014 see chat.js init.
threadWrap.appendChild(node);
}
// Check if next round has text — extend line down to connect
const nextTxt = (roundTexts[r + 1] || '').trim();
if (nextTxt) threadWrap.classList.add('has-bottom');
lastWrap = threadWrap;
for (const ev of roundTools) {
if (ev.image_url) {
box.appendChild(buildImageBubble(ev.image_url, ev.image_prompt, ev.image_model, ev.image_size, ev.image_quality, ev.image_id));
}
}
}
}
const firstWrap = lastMsgAi || lastWrap;
if (firstWrap && firstWrap.classList.contains('msg-ai')) {
if (metadata?.memories_used?.length) firstWrap._memoriesUsed = metadata.memories_used;
firstWrap.appendChild(createMsgFooter(firstWrap));
if (metadata) displayMetrics(firstWrap, metadata);
}
if (window.hljs) {
box.querySelectorAll('pre code:not(.hljs)').forEach(b => window.hljs.highlightElement(b));
}
if (markdownModule.renderMermaid) markdownModule.renderMermaid(box);
return lastWrap;
}
// --- Standard single-bubble message ---
const wrap = document.createElement('div');
wrap.className = 'msg ' + (role === 'user' ? 'msg-user' : 'msg-ai');
const r = document.createElement('div');
r.className = 'role';
const isSlash = metadata?.source === 'slash';
const isCompacted = metadata?.compacted;
const resolvedModel = modelName || metadata?.model;
var _roleText = role === 'user' ? 'You' : (isSlash || isCompacted) ? 'Odysseus' : shortModel(resolvedModel);
if (role === 'assistant' && (metadata?.research || metadata?.research_clarification)) {
_roleText += ' (Research)';
}
if (metadata?.group_model && role !== 'user') {
_roleText = metadata.group_model;
} else if (metadata?.character_name && role !== 'user' && !isSlash && !isCompacted) {
_roleText = metadata.character_name;
}
r.textContent = _roleText;
if (role !== 'user') {
if (!isSlash && !isCompacted) applyModelColor(r, resolvedModel);
r.appendChild(roleTimestamp(metadata?.timestamp));
}
const b = document.createElement('div');
b.className = 'body';
let text = markdownModule.squashOutsideCode(stripToolBlocks(textRaw || ''));
// For user messages, pull out vision-model image descriptions ([Image: name]\n
// +
block + Instruction: text
const rawDocMatch = b.innerHTML.match(/In the document, edit this specific text \((lines? [\d–\-]+)\)/);
if (rawDocMatch) {
const lineRef = rawDocMatch[1];
// Extract instruction text (after "Instruction: ")
const instrMatch = b.textContent.match(/Instruction:\s*([\s\S]*)$/);
const instrText = instrMatch ? instrMatch[1].trim() : '';
b.innerHTML = 'Doc edit: ' + lineRef + ' ' + markdownModule.processWithThinking(instrText);
}
// Render attachment cards
if (attachments?.length) {
b.appendChild(buildAttachCards(attachments));
}
}
wrap.appendChild(r);
wrap.appendChild(b);
// Add stopped indicator + continue button for messages that were stopped by user
if (role === 'assistant' && metadata?.stopped) {
const stoppedIndicator = document.createElement('div');
stoppedIndicator.className = 'stopped-indicator';
const stoppedLabel = document.createElement('span');
// Differentiate between "stopped mid-stream" (had content, can continue)
// and "cancelled before any content" — the latter has no Continue affordance.
stoppedLabel.textContent = metadata.cancelled
? '[Cancelled by user]'
: '[Message interrupted]';
stoppedIndicator.appendChild(stoppedLabel);
// Continue button only makes sense when there's partial content to
// resume from \u2014 skip it for fully-cancelled (empty) turns.
if (!metadata.cancelled) {
const continueBtn = document.createElement('button');
continueBtn.className = 'continue-btn';
continueBtn.title = 'Continue';
continueBtn.textContent = '\u25B8';
continueBtn.addEventListener('click', () => {
stoppedIndicator.remove();
if (window.chatModule) {
window.chatModule.setHideUserBubble();
window.chatModule.setPendingContinue(wrap);
const rawText = wrap.dataset.raw || wrap.querySelector('.body')?.textContent || '';
const cutoff = rawText;
const msgInput = document.getElementById('message');
if (msgInput) {
msgInput.value = 'Your previous response was interrupted. It ended with:\n\n' + cutoff.slice(-500) + '\n\nDo NOT repeat what you already said. Continue exactly from where you were cut off.';
const sb = document.querySelector('.send-btn');
if (sb) sb.click();
}
}
});
stoppedIndicator.appendChild(continueBtn);
}
b.appendChild(stoppedIndicator);
}
if (metadata?.edited) {
const editedIndicator = document.createElement('div');
editedIndicator.className = 'edited-indicator';
editedIndicator.textContent = '[Message edited]';
b.appendChild(editedIndicator);
}
// Restore variant navigation from saved metadata
if (role === 'assistant' && metadata?.variants && metadata.variants.length > 1) {
wrap.dataset.variants = JSON.stringify(metadata.variants);
const idx = metadata.variantIndex ?? metadata.variants.length - 1;
wrap.dataset.variantIndex = String(idx);
// Re-render from `raw` markdown rather than trusting cached `v.html`.
// Variants ride through localStorage / chat export-import; cached HTML
// would let an attacker-controlled session JSON inject markup.
const _renderVariant = (v) => (v && v.raw)
? markdownModule.processWithThinking(markdownModule.squashOutsideCode(v.raw))
: (v && v.html) || '';
// Show the selected variant's content
const v = metadata.variants[idx];
if (v) {
b.innerHTML = _renderVariant(v);
wrap.dataset.raw = v.raw;
}
// Render nav
const nav = document.createElement('span');
nav.className = 'variant-nav';
nav.addEventListener('click', (e) => e.stopPropagation());
const divider = document.createElement('span');
divider.className = 'variant-divider';
divider.textContent = '|';
nav.appendChild(divider);
const tagLabel = document.createElement('span');
const _icons = { regen: '\u21BB', shorter: '\u2702', simpler: '?', original: '\u25CB' };
const _tl0 = metadata.variants[idx]?.label;
tagLabel.className = 'variant-tag' + (_tl0 === 'shorter' ? ' variant-tag-scissors' : '');
tagLabel.textContent = _icons[_tl0] || '';
nav.appendChild(tagLabel);
const prevBtn = document.createElement('button');
prevBtn.className = 'variant-btn';
prevBtn.textContent = '<';
prevBtn.disabled = idx === 0;
nav.appendChild(prevBtn);
const numLeft = document.createElement('button');
numLeft.className = 'variant-num';
numLeft.textContent = String(idx + 1);
numLeft.disabled = idx === 0;
nav.appendChild(numLeft);
const slash = document.createElement('span');
slash.className = 'variant-slash';
slash.textContent = '/';
nav.appendChild(slash);
const numRight = document.createElement('button');
numRight.className = 'variant-num';
numRight.textContent = String(metadata.variants.length);
numRight.disabled = idx === metadata.variants.length - 1;
nav.appendChild(numRight);
const nextBtn = document.createElement('button');
nextBtn.className = 'variant-btn';
nextBtn.textContent = '>';
nextBtn.disabled = idx === metadata.variants.length - 1;
nav.appendChild(nextBtn);
const switchFn = (newIdx) => {
const vars = metadata.variants;
if (newIdx < 0 || newIdx >= vars.length) return;
const sv = vars[newIdx];
b.innerHTML = _renderVariant(sv);
wrap.dataset.raw = sv.raw;
wrap.dataset.variantIndex = String(newIdx);
if (window.hljs) wrap.querySelectorAll('pre code').forEach(bl => window.hljs.highlightElement(bl));
tagLabel.textContent = _icons[sv.label] || '';
tagLabel.className = 'variant-tag' + (sv.label === 'shorter' ? ' variant-tag-scissors' : '');
numLeft.textContent = String(newIdx + 1);
numLeft.disabled = newIdx === 0;
numRight.disabled = newIdx === vars.length - 1;
prevBtn.disabled = newIdx === 0;
nextBtn.disabled = newIdx === vars.length - 1;
};
prevBtn.addEventListener('click', (e) => { e.stopPropagation(); switchFn(parseInt(wrap.dataset.variantIndex) - 1); });
numLeft.addEventListener('click', (e) => { e.stopPropagation(); switchFn(parseInt(wrap.dataset.variantIndex) - 1); });
numRight.addEventListener('click', (e) => { e.stopPropagation(); switchFn(parseInt(wrap.dataset.variantIndex) + 1); });
nextBtn.addEventListener('click', (e) => { e.stopPropagation(); switchFn(parseInt(wrap.dataset.variantIndex) + 1); });
r.appendChild(nav);
}
if (role === 'assistant') {
// The "N pinned" / "N recalled" pill in the footer reads from
// wrap._memoriesUsed — propagate it from saved metadata so the pill
// survives a page refresh (live-stream path sets it via SSE, but
// history reloads need this assignment).
if (metadata?.memories_used?.length) wrap._memoriesUsed = metadata.memories_used;
wrap.appendChild(createMsgFooter(wrap));
if (metadata) displayMetrics(wrap, metadata);
} else {
// Add timestamp to user header (like AI messages)
r.appendChild(roleTimestamp(metadata?.timestamp));
wrap.appendChild(createUserMsgFooter(wrap));
}
box.appendChild(wrap);
// TTS is now part of the msg-actions system
if (role === 'assistant' && markdownModule.renderMermaid) {
markdownModule.renderMermaid(wrap);
}
return wrap;
} catch (error) {
console.error('Error in addMessage:', error);
if (uiModule) uiModule.showError('Failed to add message: ' + error.message);
}
}
const chatRenderer = {
shortModel,
modelColor,
applyModelColor,
getModelCost,
getImageCost,
getSessionCost,
resetSessionCost,
updateSessionCostUI,
roleTimestamp,
stripToolBlocks,
buildSourcesBox,
buildFindingsBox,
appendReportButton,
buildImageBubble,
hideWelcomeScreen,
showWelcomeScreen,
createMsgFooter,
displayMetrics,
addMessage,
updateMessageAttachments,
};
export default chatRenderer;