';
if (logoHtml) html += '' + logoHtml + '';
html += uiModule.esc(short) + '
';
html += 'Model ' + uiModule.esc(modelName.split('/').pop()) + '
';
// Provider = the serving endpoint, distinct from the model vendor/logo
// (e.g. the same model via OpenRouter vs Copilot vs Anthropic direct).
const _epUrl = (window.sessionModule && window.sessionModule.getCurrentEndpointUrl)
? window.sessionModule.getCurrentEndpointUrl() : null;
const _provLabel = providerLabel(_epUrl);
if (_provLabel) html += 'Provider ' + uiModule.esc(_provLabel) + '
';
// 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 (isCostTrackedEndpoint(_epUrl)) {
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;
}
export function isSubscriptionEndpoint(url) {
if (!url) return false;
try {
const parsed = new URL(url);
const path = parsed.pathname.replace(/\/+$/, '');
return parsed.hostname === 'chatgpt.com'
&& (path === '/backend-api/codex' || path.startsWith('/backend-api/codex/'));
} catch (_e) {
return false;
}
}
function _currentEndpointUrl() {
return (window.sessionModule && window.sessionModule.getCurrentEndpointUrl)
? window.sessionModule.getCurrentEndpointUrl() : null;
}
export function isCostTrackedEndpoint(url) {
return !isLocalEndpoint(url) && !isSubscriptionEndpoint(url);
}
/** Cost for the current turn, returning null for non-billable endpoints. */
function _billableCost(model, inputTokens, outputTokens, endpointCostTracked, selectedEndpointUrl) {
// Foreground fallback can answer on a different endpoint than the session's
// selected route. Prefer the backend's non-secret actual-route
// classification; retain the selected-endpoint check for older history.
if (endpointCostTracked === false) return null;
const selectedUrl = selectedEndpointUrl === undefined
? _currentEndpointUrl()
: selectedEndpointUrl;
if (endpointCostTracked !== true && !isCostTrackedEndpoint(selectedUrl)) {
return null;
}
return getModelCost(model, inputTokens, outputTokens);
}
/** Sum cost using the route/model that produced each Agent round. */
function _metricsBillableCost(metrics, model, inputTokens, outputTokens, selectedEndpointUrl) {
const buckets = Array.isArray(metrics.usage_buckets) ? metrics.usage_buckets : [];
if (!buckets.length) {
return _billableCost(
model,
inputTokens,
outputTokens,
metrics.endpoint_cost_tracked,
selectedEndpointUrl,
);
}
let total = 0;
let hasPricedUsage = false;
for (const bucket of buckets) {
if (!bucket || typeof bucket !== 'object') continue;
const bucketCost = _billableCost(
bucket.model || model,
Number(bucket.input_tokens) || 0,
Number(bucket.output_tokens) || 0,
bucket.endpoint_cost_tracked,
selectedEndpointUrl,
);
if (bucketCost === null) continue;
total += bucketCost;
hasPricedUsage = true;
}
return hasPricedUsage ? total : null;
}
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';
const _COST_RUNS_KEY = 'ody-session-cost-runs';
const _MAX_COST_RUNS_PER_SESSION = 256;
const _COST_LEDGER_LOCK = 'odysseus-session-cost-ledger';
/** 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) || '{}');
const runCosts = JSON.parse(localStorage.getItem(_COST_RUNS_KEY) || '{}');
const recordedRuns = runCosts[sid] && typeof runCosts[sid] === 'object'
? Object.values(runCosts[sid])
: [];
return (costs[sid] || 0) + recordedRuns.reduce(
(total, value) => total + (Number(value) || 0),
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));
const runCosts = JSON.parse(localStorage.getItem(_COST_RUNS_KEY) || '{}');
delete runCosts[sid];
localStorage.setItem(_COST_RUNS_KEY, JSON.stringify(runCosts));
} 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;
// The ledger records billable work already performed in this session. A
// selected local endpoint does not erase cost from a paid fallback route.
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';
}
}
/** Record one metrics payload in a session ledger at most once. */
export function recordSessionMetricsCost(metrics, sessionId, selectedEndpointUrl) {
if (!metrics || typeof metrics !== 'object') return null;
const cost = _metricsBillableCost(
metrics,
metrics.model || 'Unknown',
metrics.input_tokens || 0,
metrics.output_tokens || 0,
selectedEndpointUrl,
);
if (metrics._fromHistory) return cost;
const sid = sessionId || (
window.sessionModule && window.sessionModule.getCurrentSessionId()
);
if (!sid || cost === null) return cost;
const runId = typeof metrics._costRecordId === 'string'
? metrics._costRecordId.trim()
: '';
if ((metrics._costRecorded || metrics._costRecordPending) && !runId) return cost;
// Recorded is only set once the write actually runs; pending covers the
// window while the write waits on the cross-tab lock, so a replay in that
// window cannot double-add and a tab closed mid-queue never claims recorded.
metrics._costRecordPending = true;
const writeCost = () => {
if (runId) {
try {
const runCosts = JSON.parse(localStorage.getItem(_COST_RUNS_KEY) || '{}');
const sessionRuns = runCosts[sid] && typeof runCosts[sid] === 'object'
? runCosts[sid]
: {};
// Assigning by detached-run identity is replay-idempotent even when a
// refresh produces a fresh metrics object. The Web Lock around this
// read/modify/write also keeps distinct runs from two tabs from
// overwriting one another's stale snapshot.
sessionRuns[runId] = cost;
const entries = Object.entries(sessionRuns);
if (entries.length > _MAX_COST_RUNS_PER_SESSION) {
const overflow = entries.slice(0, entries.length - _MAX_COST_RUNS_PER_SESSION);
const costs = JSON.parse(localStorage.getItem(_COST_KEY) || '{}');
costs[sid] = (costs[sid] || 0) + overflow.reduce(
(total, entry) => total + (Number(entry[1]) || 0),
0,
);
overflow.forEach(([oldRunId]) => delete sessionRuns[oldRunId]);
localStorage.setItem(_COST_KEY, JSON.stringify(costs));
}
runCosts[sid] = sessionRuns;
localStorage.setItem(_COST_RUNS_KEY, JSON.stringify(runCosts));
} catch (_e) { /* ignore */ }
} else {
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 */ }
}
metrics._costRecorded = true;
metrics._costRecordPending = false;
const currentSid = window.sessionModule && window.sessionModule.getCurrentSessionId();
if (currentSid === sid) updateSessionCostUI();
};
let writeStarted = false;
const guardedWrite = () => {
writeStarted = true;
writeCost();
};
try {
if (
typeof navigator !== 'undefined'
&& navigator.locks
&& typeof navigator.locks.request === 'function'
) {
const pendingWrite = navigator.locks.request(_COST_LEDGER_LOCK, guardedWrite);
if (pendingWrite && typeof pendingWrite.catch === 'function') {
pendingWrite.catch(() => {
if (!writeStarted) guardedWrite();
});
}
} else {
guardedWrite();
}
} catch (_e) {
if (!writeStarted) guardedWrite();
}
return cost;
}
/** 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;
}
function userModePill(metadata) {
const mode = String(metadata?.interaction_mode || metadata?.mode || '').toLowerCase();
if (mode !== 'agent' && mode !== 'chat' && mode !== 'research') return null;
const pill = document.createElement('span');
pill.className = 'user-mode-pill user-mode-pill-' + mode;
if (mode === 'agent' || mode === 'chat') {
pill.innerHTML = mode === 'agent' ? USER_MODE_AGENT_ICON : USER_MODE_CHAT_ICON;
pill.setAttribute('aria-label', mode === 'agent' ? 'Agent mode' : 'Chat mode');
} else {
pill.textContent = 'research';
}
pill.title = metadata?.auto_escalated
? 'Auto-promoted from chat for this tool request'
: `Sent in ${mode} mode`;
if (metadata?.auto_escalated) pill.dataset.auto = 'true';
return pill;
}
export function setUserModePill(messageEl, mode, autoEscalated) {
if (!messageEl) return;
const role = messageEl.querySelector?.('.role');
if (!role) return;
role.querySelectorAll('.user-mode-pill').forEach(el => el.remove());
const pill = userModePill({
interaction_mode: mode,
auto_escalated: !!autoEscalated,
});
if (pill) role.appendChild(pill);
}
/**
* Strip tool invocation blocks from text before rendering.
*/
export function stripToolBlocks(text) {
let cleaned = text.replace(TOOL_CALL_RE, '');
if (EXEC_FENCE_RE) cleaned = cleaned.replace(EXEC_FENCE_RE, stripExecutedFence);
cleaned = cleaned.replace(DSML_TOOL_RE, '');
cleaned = cleaned.replace(DSML_INVOKE_RE, '');
cleaned = cleaned.replace(DSML_STRAY_RE, '');
cleaned = cleaned.replace(XML_TOOL_CALL_RE, '');
cleaned = cleaned.replace(XML_INVOKE_RE, '');
cleaned = cleaned.replace(RAW_OPENAI_TOOL_JSON_RE, '');
cleaned = cleaned.replace(QWEN_ROLE_MARKER_RE, '');
cleaned = cleaned.replace(QWEN_BARE_MARKER_RE, ' ');
cleaned = cleaned.replace(TOOL_NARRATION_RE, '');
cleaned = cleaned.replace(/\n{3,}/g, '\n\n');
return cleaned.trim();
}
/**
* Plain-text payload for the message copy buttons: the reply as the renderer
* displays it — tool blocks and '
+ '
';
}
/**
* 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);
function resolveDocumentPlaceholderLinks(text, metadata) {
if (!text || !metadata || !Array.isArray(metadata.tool_events)) return text;
const docEvents = metadata.tool_events.filter(ev => ev && ev.doc_id);
if (!docEvents.length) return text;
return String(text).replace(/#document-(\d+)\b/g, (match, num) => {
const idx = Number(num) - 1;
const ev = Number.isInteger(idx) && idx >= 0 ? docEvents[idx] : null;
return ev && ev.doc_id ? `#document-${ev.doc_id}` : match;
});
}
// 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).
function _activateEntityAnchor(e, forcedAnchor = null) {
// Walk past Text nodes — clicking link text yields a Text node target
// whose .closest is undefined, so preventDefault never fires and the
// browser performs a default hash-navigation that resets the session.
let _t = e.target;
while (_t && _t.nodeType === Node.TEXT_NODE) _t = _t.parentElement;
const a = forcedAnchor || (_t && _t.closest && _t.closest('a[href]'));
if (!a) return;
const rawHref = a.getAttribute('href') || '';
let href = rawHref;
try {
const parsed = new URL(rawHref, window.location.origin);
if (parsed.origin === window.location.origin && parsed.pathname === window.location.pathname) {
href = parsed.hash || rawHref;
}
} catch (_) {}
if (!href.startsWith('#')) return;
if (href === '#plan') {
e.preventDefault();
e.stopPropagation();
if (typeof window.__odysseusOpenPlanReview === 'function') window.__odysseusOpenPlanReview();
return;
}
const barePanel = href.match(/^#(calendar|memory|notes|tasks|documents|skills|research)$/);
if (barePanel) {
e.preventDefault();
e.stopPropagation();
const panel = barePanel[1];
if (panel === 'calendar') {
document.getElementById('tool-calendar-btn')?.click();
} else if (panel === 'memory') {
import('./memory.js').then(mod => {
const open = mod.openMemoryModal || (mod.default && mod.default.openMemoryModal);
if (open) open('browse');
}).catch(() => {});
} else if (panel === 'notes') {
document.getElementById('tool-notes-btn')?.click();
} else if (panel === 'tasks') {
document.getElementById('tool-tasks-btn')?.click();
} else if (panel === 'documents') {
document.getElementById('tool-library-btn')?.click();
} else if (panel === 'skills') {
document.getElementById('tool-skills-btn')?.click();
} else if (panel === 'research') {
import('./research/panel.js?v=20260911researchcardselect1').then(mod => {
const open = mod.openPanel || (mod.default && mod.default.openPanel);
if (open) open();
}).catch(() => {});
}
return;
}
let m = href.match(/^#(session|document|note|memory|image|email|event|task|skill|research|cookbook)-(.+)$/);
if (!m) {
const noteOpen = href.match(/^#open=notes¬e=([^&]+)/);
if (noteOpen) m = ['note', 'note', decodeURIComponent(noteOpen[1])];
}
if (!m) {
const bareSession = href.match(/^#([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})$/i);
if (bareSession) m = ['session', 'session', bareSession[1]];
}
if (!m) return;
e.preventDefault();
e.stopPropagation();
const [, kind, rawId] = m;
let id = rawId;
try { id = decodeURIComponent(String(rawId || '').replace(/\+/g, ' ')); } catch (_) {}
if (kind === 'session') {
const fallback = () => {
try {
if (window.sessionModule && typeof window.sessionModule.selectSession === 'function') {
return window.sessionModule.selectSession(id, { showLoading: true, immediateLoading: true });
}
} catch (_) {}
try { window.location.hash = id; } catch (_) {}
};
try {
a.classList.add('is-loading');
a.setAttribute('aria-busy', 'true');
} catch {}
import('./sessions.js').then(mod => {
const fn = mod.selectSession || (mod.default && mod.default.selectSession);
if (fn) return fn(id, { showLoading: true, immediateLoading: true });
return fallback();
}).catch(() => {
return fallback();
}).finally(() => {
try {
a.classList.remove('is-loading');
a.removeAttribute('aria-busy');
} catch {}
});
} else if (kind === 'document') {
import('./document.js?v=20260911removealignrightshortcut1').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?v=20260910drawmerge1').then(mod => {
const open = mod.openNote || (mod.default && mod.default.openNote);
if (open) open(id);
try {
if (/^#(?:note-|open=notes¬e=)/.test(window.location.hash || '')) {
history.replaceState(null, '', window.location.pathname + window.location.search);
}
} catch (_) {}
}).catch(() => {});
} else if (kind === 'memory') {
import('./memory.js').then(mod => {
const open = mod.openMemory || (mod.default && mod.default.openMemory);
if (open) open(id);
}).catch(() => {});
} else if (kind === 'image') {
import('./gallery.js?v=20260910promptcopy1').then(mod => {
const open = mod.openGalleryImage || (mod.default && mod.default.openGalleryImage);
if (open) open(id);
}).catch(() => {});
} else if (kind === 'email') {
import('./emailLibrary.js?v=20260910replyactions1').then(mod => {
const open = mod.openEmailLibrary || (mod.default && mod.default.openEmailLibrary);
if (!open) return;
const parts = String(id || '').split(':');
if (parts.length >= 2 && /^\d+$/.test(parts[1])) {
const opts = { folder: parts[0] || 'INBOX', uid: parts[1] };
const account = parts.slice(2).join(':');
if (account) opts.account_id = account;
open(opts);
} else {
open({ uid: id });
}
}).catch(() => {});
} else if (kind === 'event') {
import('./calendar.js?v=20260903weekscrollstable1').then(mod => {
const open = mod.openCalendarTo || (mod.default && mod.default.openCalendarTo);
if (open) open(id);
}).catch(() => {});
} else if (kind === 'task') {
import('./tasks.js?v=20260901taskskilldensity1').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?v=20260909kebabconsistency1').then(mod => {
const open = mod.openSkill || (mod.default && mod.default.openSkill);
if (open) open(id);
}).catch(() => {});
} else if (kind === 'research') {
import('./research/panel.js?v=20260911researchcardselect1').then(mod => {
const open = mod.openPanel || (mod.default && mod.default.openPanel);
if (open) open(id);
}).catch(() => {});
} else if (kind === 'cookbook') {
import('./cookbook.js').then(mod => {
const open = mod.open || (mod.default && mod.default.open);
if (!open) return;
if (id.startsWith('session-')) open({ tab: 'Running', focusSession: id.slice(8) });
else if (id.startsWith('model-')) open({ tab: 'Serve', focusRepo: id.slice(6).replace('~', '/') });
else open();
}).catch(() => {});
}
}
// The live Markdown tail is replaced as tokens arrive. On touch devices that
// can detach an anchor between pointerdown and the browser's synthetic click,
// making links appear ready but inert until streaming ends. Preserve the
// pointerdown anchor and activate it on a stationary pointerup; suppress the
// duplicate click that browsers emit immediately afterward.
let _streamEntityPointer = null;
let _streamEntitySuppressClick = null;
const _isEntityHref = (href) => /^#(?:(?:calendar|memory|notes|tasks|documents|skills|research)$|(?:session|document|note|memory|image|email|event|task|skill|research|cookbook)-)/.test(String(href || ''));
document.addEventListener('pointerdown', function(e) {
const a = e.target?.closest?.('#chat-history .msg-ai.streaming a[href]');
const href = a?.getAttribute('href') || '';
_streamEntityPointer = a && _isEntityHref(href)
? { a, href, x: e.clientX, y: e.clientY, pointerId: e.pointerId }
: null;
}, true);
document.addEventListener('pointerup', function(e) {
const pending = _streamEntityPointer;
_streamEntityPointer = null;
if (!pending || pending.pointerId !== e.pointerId) return;
if (Math.hypot(e.clientX - pending.x, e.clientY - pending.y) > 10) return;
_streamEntitySuppressClick = { href: pending.href, until: performance.now() + 800 };
_activateEntityAnchor(e, pending.a);
}, true);
document.addEventListener('pointercancel', function() {
_streamEntityPointer = null;
}, true);
document.addEventListener('click', function(e) {
const a = e.target?.closest?.('a[href]');
const href = a?.getAttribute('href') || '';
if (_streamEntitySuppressClick
&& performance.now() <= _streamEntitySuppressClick.until
&& href === _streamEntitySuppressClick.href) {
_streamEntitySuppressClick = null;
e.preventDefault();
e.stopPropagation();
return;
}
_streamEntitySuppressClick = null;
_activateEntityAnchor(e);
}, true);
/**
* 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';
wrap.dataset.imageUrl = imageUrl || '';
wrap.dataset.imageKey = String(imageId || imageUrl || '');
if (imageId) wrap.dataset.imageId = imageId;
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 safeImageUrl = safeDisplayImageSrc(imageUrl);
if (!safeImageUrl) {
body.textContent = '[Image unavailable]';
wrap.appendChild(body);
return wrap;
}
const img = document.createElement('img');
img.className = 'generated-image';
img.alt = prompt || 'Generated image';
img.title = prompt || 'Generated image';
img.src = safeImageUrl;
img.addEventListener('click', () => { window.open(safeImageUrl, '_blank', 'noopener,noreferrer'); });
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 reuseBtn = document.createElement('button');
reuseBtn.className = 'footer-copy-btn';
reuseBtn.type = 'button';
reuseBtn.title = 'Attach image to new prompt';
reuseBtn.innerHTML = PAPERCLIP_ICON;
reuseBtn.addEventListener('click', async (e) => {
e.stopPropagation();
reuseBtn.disabled = true;
try {
const resp = await fetch(safeImageUrl, { credentials: 'same-origin' });
if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
const blob = await resp.blob();
const ext = (blob.type || '').includes('jpeg') ? 'jpg'
: (blob.type || '').includes('webp') ? 'webp'
: (blob.type || '').includes('gif') ? 'gif'
: 'png';
const base = (prompt || 'generated-image').slice(0, 36).replace(/[^a-zA-Z0-9_-]+/g, '-').replace(/^-+|-+$/g, '') || 'generated-image';
const file = new File([blob], `${base}.${ext}`, { type: blob.type || 'image/png', lastModified: Date.now() });
const mod = await import('./fileHandler.js?v=20260909mobileattachmentedit1');
const addFiles = mod.addFiles || (mod.default && mod.default.addFiles);
if (!addFiles) throw new Error('attachment handler unavailable');
await addFiles([file], { skipCrop: true });
const input = document.getElementById('message');
if (input) input.focus();
reuseBtn.innerHTML = CHECK_ICON;
if (window.showToast) window.showToast('Image attached');
setTimeout(() => { reuseBtn.innerHTML = PAPERCLIP_ICON; reuseBtn.disabled = false; }, 1400);
} catch (err) {
console.warn('Attach generated image failed', err);
reuseBtn.textContent = '\u2717';
if (window.showToast) window.showToast('Could not attach image');
setTimeout(() => { reuseBtn.innerHTML = PAPERCLIP_ICON; reuseBtn.disabled = false; }, 1600);
}
});
actions.appendChild(reuseBtn);
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?v=20260910promptcopy1'),
loadPanel('editor'),
]);
// 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);
if (imageId) {
const galleryBtn = document.createElement('button');
galleryBtn.className = 'footer-copy-btn footer-open-gallery-btn';
galleryBtn.type = 'button';
galleryBtn.title = 'Open in gallery';
galleryBtn.innerHTML = 'Open in gallery';
galleryBtn.addEventListener('click', async (e) => {
e.stopPropagation();
try {
const mod = await import('./gallery.js?v=20260910promptcopy1');
const open = mod.openGalleryImage || (mod.default && mod.default.openGalleryImage);
if (open) open(imageId);
} catch (err) {
console.error('[chat] open in gallery failed', err);
}
});
actions.appendChild(galleryBtn);
}
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');
const alreadyVisible = !!(ws && !ws.classList.contains('hidden'));
if (ws) ws.classList.remove('hidden');
if (cc) cc.classList.add('welcome-active');
if (alreadyVisible) {
return;
}
// 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(copyMessageText(msgElement));
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: RESEND_ICON, title: 'Regenerate from here', cls: 'msg-action-btn', html: true, 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: TRASH_ICON, title: 'Delete message', cls: 'msg-action-btn msg-delete-btn', html: true, 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();
import('./memory.js')
.then(mod => {
const open = mod.openMemoryModal || mod.default?.openMemoryModal;
if (open) open('browse');
else document.getElementById('memory-modal')?.classList.remove('hidden');
})
.catch(() => document.getElementById('memory-modal')?.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: TRASH_ICON, title: 'Delete message', cls: 'msg-action-btn msg-delete-btn', html: true, 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: RESEND_ICON, title: 'Resend message', cls: 'msg-action-btn', html: true, 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) {
messageElement
.querySelectorAll('.response-metrics, .metrics-divider, .ctx-divider, .ctx-ring')
.forEach((el) => el.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 ttft = metrics.client_ttft ?? metrics.time_to_first_token;
const injectedTokens = metrics.injected_tokens;
const isReal = metrics.usage_source === 'real';
const ctxPct = metrics.context_percent;
const model = metrics.model || 'Unknown';
const cost = _metricsBillableCost(
metrics,
model,
inputTokens,
outputTokens,
);
// Nothing useful to show — bail out (only if ALL metrics are missing)
if (!responseTime && !inputTokens && !outputTokens && tps == null && !ctxPct) return;
// Rendering can occur when metrics arrive and again after [DONE]. The
// ledger mutation is idempotent for that shared payload.
recordSessionMetricsCost(metrics);
// Keep token counts in the Message Stats popup; the footer should stay slim.
const costStr0 = cost !== null ? `$${cost < 0.01 ? cost.toFixed(4) : cost.toFixed(3)}` : null;
const hasTps = tps != null && tps !== 'undefined' && Number.isFinite(Number(tps));
const tpsText = hasTps ? `${Number(tps).toFixed(2)} tok/s` : '';
const ttftText = ttft != null && Number.isFinite(Number(ttft))
? `${Number(ttft).toFixed(3)}s TTFT`
: '';
const injectedText = injectedTokens != null && Number.isFinite(Number(injectedTokens))
? `${Number(injectedTokens).toLocaleString()} in`
: '';
const metricsLabel = hasTps
? [tpsText, ttftText, injectedText].filter(Boolean).join(' · ')
: costStr0
? costStr0
: responseTime != null
? `${Number(responseTime).toFixed(3)}s`
: '';
if (!metricsLabel) return;
metricsContainer.textContent = metricsLabel;
metricsContainer.style.cursor = 'pointer';
metricsContainer.title = 'Click for details';
const metricsDivider = document.createElement('span');
metricsDivider.className = 'metrics-divider';
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)}` : '';
const costRows = costStr ? `Cost ${costStr}
` : '';
const speedStr = hasTps ? tpsText : 'n/a';
const speedLabel = metrics.tps_source === 'computed' ? 'Speed (wall)' : 'Speed';
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 visibleTtft = metrics.client_ttft ?? metrics.time_to_first_token;
const schemaCount = metrics.tool_schema_count;
const agentRounds = metrics.agent_rounds;
const toolCalls = metrics.tool_calls;
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 (costStr && 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 (all rounds) ${inputTokens.toLocaleString()} tokens${isReal ? '' : '~'}
${injectedTokens != null ? `Injected (first request) ${Number(injectedTokens).toLocaleString()} tokens
` : ''}
Output ${outputTokens.toLocaleString()} tokens${isReal ? '' : '~'}
Total ${totalTok.toLocaleString()} tokens
${speedLabel} ${speedStr}
Time ${Number(responseTime).toFixed(3)}s
${prepTime != null ? `Prep ${prepTime}s
` : ''}
${modelWaitTime != null ? `Model wait ${modelWaitTime}s
` : ''}
${visibleTtft != null ? `TTFT ${Number(visibleTtft).toFixed(3)}s
` : ''}
${schemaCount != null ? `Tool schemas ${Number(schemaCount).toLocaleString()}
` : ''}
${agentRounds != null ? `Agent rounds ${Number(agentRounds).toLocaleString()}
` : ''}
${toolCalls != null ? `Tool calls ${Number(toolCalls).toLocaleString()}
` : ''}
${costRows}
${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(d.file || 'diff')} ${stat}
${rows}${esc(ev.command)}` : ''));
node.innerHTML = `${evToolIcon}${esc(evToolInfo.label || ev.tool)}${evHeaderAction}${ok ? 'done' : 'failed'}
${evCmdHtml}${outHtml}${evDiffHtml}
`;
// 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);
if (pendingAskUser) {
// Session history is rendered oldest-to-newest. A later user message
// removes this card; if there is none, the pending choice survives a
// refresh. Avoid stealing focus while the history is loading.
renderAskUserCard(pendingAskUser, { focus: false, scroll: false });
}
return lastWrap;
}
// --- Wake-task / supervisor system check-in ---
// The self-wake mechanism injects "Did you finish?" as a user message
// (or persisted history shows a "[Task] Self-check: +
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 resume-btn';
continueBtn.title = 'Resume response';
continueBtn.innerHTML = 'Resume';
continueBtn.addEventListener('click', () => {
stoppedIndicator.remove();
if (window.chatModule) {
window.chatModule.setHideUserBubble();
window.chatModule.setPendingContinue(wrap);
const msgInput = document.getElementById('message');
if (msgInput) {
msgInput.value = 'Continue from where you left 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,
sameModelName,
modelRouteLabel,
replyModelPair,
modelColor,
applyModelColor,
getModelCost,
isCostTrackedEndpoint,
isSubscriptionEndpoint,
getImageCost,
getSessionCost,
resetSessionCost,
updateSessionCostUI,
recordSessionMetricsCost,
roleTimestamp,
stripToolBlocks,
copyMessageText,
safeToolScreenshotSrc,
safeDisplayImageSrc,
removeAskUserCards,
renderAskUserCard,
buildSourcesBox,
buildFindingsBox,
buildRagSourcesBox,
appendReportButton,
buildImageBubble,
hideWelcomeScreen,
showWelcomeScreen,
createMsgFooter,
displayMetrics,
addMessage,
buildAttachCards,
updateMessageAttachments,
};
export default chatRenderer;