study-lab/app.js
app.jsRaw
1(() => {
2 'use strict';
3
4 const APP_PREFIX = 'study-lab';
5 const STORAGE_KEY = `${APP_PREFIX}:v1`;
6 const SETTINGS_KEY = `${APP_PREFIX}:settings:v1`;
7 const USAGE_KEY = `${APP_PREFIX}:usage:v1`;
8 const OPENROUTER_PRICES_KEY = `${APP_PREFIX}:openrouter-prices:v1`;
9 const TREE_ZOOM_KEY = `${APP_PREFIX}:tree-zoom`;
10 const THEME_KEY = `${APP_PREFIX}:theme`;
11 const FILE_REQUEST_LIMIT = 50 * 1024 * 1024;
12 const PRICE_CACHE_TTL = 24 * 60 * 60 * 1000;
13 const PROVIDERS = {
14 openai: {
15 label: 'OpenAI', apiUrl: 'https://api.openai.com/v1/responses', model: 'gpt-5-mini',
16 models: ['gpt-5-mini', 'gpt-5', 'gpt-4.1-mini', 'gpt-4.1']
17 },
18 openrouter: {
19 label: 'OpenRouter', apiUrl: 'https://openrouter.ai/api/v1/responses', model: 'openai/gpt-5-mini',
20 models: ['openai/gpt-5-mini', 'anthropic/claude-sonnet-4', 'google/gemini-2.5-pro', 'deepseek/deepseek-r1']
21 }
22 };
23 // USD per million tokens. Last checked against OpenAI Docs on 2026-08-17.
24 const MODEL_PRICES = [
25 { match: /^gpt-5\.6-terra(?:-|$)/, input: 2, cached: .2, output: 12 },
26 { match: /^gpt-5\.6-luna(?:-|$)/, input: .2, cached: .02, output: 1.2 },
27 { match: /^gpt-5\.6-sol(?:-|$)/, input: 5, cached: .5, output: 30 },
28 { match: /^gpt-5\.6$/, input: 5, cached: .5, output: 30 },
29 { match: /^gpt-5\.4-mini(?:-|$)/, input: .75, cached: .075, output: 4.5 },
30 { match: /^gpt-5\.4(?:-20\d{2}|$)/, input: 2.5, cached: .25, output: 15 },
31 { match: /^gpt-5-mini(?:-|$)/, input: .25, cached: .025, output: 2 },
32 { match: /^gpt-5-nano(?:-|$)/, input: .05, cached: .005, output: .4 },
33 { match: /^gpt-5(?:-20\d{2}|$)/, input: 1.25, cached: .125, output: 10 },
34 { match: /^gpt-4\.1-mini(?:-|$)/, input: .4, cached: .1, output: 1.6 },
35 { match: /^gpt-4\.1(?:-20\d{2}|$)/, input: 2, cached: .5, output: 8 },
36 { match: /^gpt-4o-mini(?:-|$)/, input: .15, cached: .075, output: .6 }
37 ];
38 const DEFAULT_SETTINGS = {
39 activeModelId: 'model-openai',
40 apiKeys: { openai: '', openrouter: '' },
41 models: [{ id: 'model-openai', provider: 'openai', model: 'gpt-5-mini', apiUrl: 'https://api.openai.com/v1/responses' }],
42 systemPrompt: 'You are a patient technical tutor. Use clear Markdown and LaTeX where useful. Use mathematical language, assume graduate level knowledge. Build on the conversation context and explain assumptions.'
43 };
44
45 const $ = (selector, root = document) => root.querySelector(selector);
46 const els = {
47 welcome: $('#welcome'), conversation: $('#conversation'), composer: $('#composer'),
48 prompt: $('#prompt'), send: $('#send'), tree: $('#tree'), mapEmpty: $('#map-empty'),
49 nodeCount: $('#node-count'), branchCount: $('#branch-count'), branchContext: $('#branch-context'),
50 branchLabel: $('#branch-label'), selectionMenu: $('#selection-menu'), selectionPreview: $('#selection-preview'),
51 selectionAction: $('#selection-action'), selectionCustom: $('#selection-custom'), settings: $('#settings-dialog'),
52 openaiApiKey: $('#openai-api-key'), openrouterApiKey: $('#openrouter-api-key'), modelConfigs: $('#model-configs'),
53 openaiModelOptions: $('#openai-model-options'), openrouterModelOptions: $('#openrouter-model-options'),
54 systemPrompt: $('#system-prompt'),
55 keyStatus: $('#key-status'), toast: $('#toast'), usageDialog: $('#usage-dialog'),
56 monthTokens: $('#month-tokens'), usageMonth: $('#usage-month'), usageTotal: $('#usage-total'),
57 usageCost: $('#usage-cost'), usageRequests: $('#usage-requests'), usageInput: $('#usage-input'),
58 usageCached: $('#usage-cached'), usageOutput: $('#usage-output'), usageModels: $('#usage-models'),
59 usageRecent: $('#usage-recent'), usageNote: $('#usage-note'), usageDashboard: $('#usage-dashboard'), historyList: $('#history-list'),
60 historyEmpty: $('#history-empty'), historyToggle: $('#toggle-history'),
61 attachments: $('#attachments'), uploadFile: $('#upload-file'), fileInput: $('#file-input'),
62 activeConnection: $('#active-connection'), activeModel: $('#active-model'), activeProvider: $('#active-provider'),
63 conversationSearch: $('#conversation-search'), searchResults: $('#search-results'),
64 treeZoom: $('#tree-zoom'), shortcutsDialog: $('#shortcuts-dialog')
65 };
66
67 migrateLegacyStorage();
68 let settings = normalizeSettings(loadJSON(SETTINGS_KEY, DEFAULT_SETTINGS));
69 let settingsDraft = null;
70 let workspace = loadWorkspace();
71 let state = currentMap();
72 let usageRecords = loadUsage();
73 let openRouterPrices = loadOpenRouterPrices();
74 let activeRequest = null;
75 let uploadingFiles = false;
76 let uploadTargetMapId = null;
77 let selectedText = null;
78 let saveTimer = 0;
79 let toastTimer = 0;
80 let searchTimer = 0;
81 let searchIndex = null;
82 let pendingG = false;
83 let pendingGTimer = 0;
84 let treeZoom = loadTreeZoom();
85 let installPrompt = null;
86
87 function loadJSON(key, fallback) {
88 try { return JSON.parse(localStorage.getItem(key) || 'null') || fallback; }
89 catch { return { ...fallback }; }
90 }
91
92 function normalizeSettings(value = {}) {
93 const apiKeys = {
94 openai: String(value.apiKeys?.openai ?? value.profiles?.openai?.apiKey ?? value.apiKey ?? ''),
95 openrouter: String(value.apiKeys?.openrouter ?? value.profiles?.openrouter?.apiKey ?? '')
96 };
97 let sourceModels = Array.isArray(value.models) ? value.models : null;
98 if (!sourceModels?.length && value.profiles) {
99 sourceModels = Object.entries(PROVIDERS).map(([provider, defaults]) => ({
100 id: `model-${provider}`, provider, model: value.profiles[provider]?.model || defaults.model,
101 apiUrl: value.profiles[provider]?.apiUrl || defaults.apiUrl
102 }));
103 }
104 if (!sourceModels?.length) {
105 const provider = PROVIDERS[value.provider] ? value.provider : 'openai';
106 sourceModels = [{
107 id: 'model-openai', provider, model: value.model || PROVIDERS[provider].model,
108 apiUrl: value.apiUrl || PROVIDERS[provider].apiUrl
109 }];
110 }
111 const usedIds = new Set();
112 const models = sourceModels.map((saved, index) => {
113 const provider = PROVIDERS[saved?.provider] ? saved.provider : 'openai';
114 let id = String(saved?.id || `model-${index + 1}`);
115 while (usedIds.has(id)) id = `${id}-${index + 1}`;
116 usedIds.add(id);
117 return {
118 id, provider, model: String(saved?.model || PROVIDERS[provider].model),
119 apiUrl: String(saved?.apiUrl || PROVIDERS[provider].apiUrl)
120 };
121 });
122 const legacyActive = models.find(model => model.provider === value.provider)?.id;
123 const activeModelId = models.some(model => model.id === value.activeModelId)
124 ? value.activeModelId : (legacyActive || models[0].id);
125 const active = models.find(model => model.id === activeModelId) || models[0];
126 return {
127 activeModelId, apiKeys, models, provider: active.provider, apiKey: apiKeys[active.provider],
128 model: active.model, apiUrl: active.apiUrl,
129 systemPrompt: String(value.systemPrompt ?? DEFAULT_SETTINGS.systemPrompt)
130 };
131 }
132
133 function providerLabel(provider = settings.provider) {
134 return PROVIDERS[provider]?.label || 'API provider';
135 }
136
137 function requestHeaders(json = false, connection = settings) {
138 const headers = { 'Authorization': `Bearer ${connection.apiKey}` };
139 if (json) headers['Content-Type'] = 'application/json';
140 if (connection.provider === 'openrouter') headers['X-OpenRouter-Title'] = 'Study Lab';
141 return headers;
142 }
143
144 function migrateLegacyStorage() {
145 const legacyPrefix = ['study', 'pal'].join('-');
146 const suffixes = [':v1', ':settings:v1', ':usage:v1', ':theme', ':tree-zoom'];
147 for (const suffix of suffixes) {
148 const currentKey = `${APP_PREFIX}${suffix}`;
149 const legacyKey = `${legacyPrefix}${suffix}`;
150 try {
151 if (localStorage.getItem(currentKey) === null && localStorage.getItem(legacyKey) !== null) {
152 localStorage.setItem(currentKey, localStorage.getItem(legacyKey));
153 }
154 } catch {}
155 }
156 }
157
158 function loadUsage() {
159 try {
160 const records = JSON.parse(localStorage.getItem(USAGE_KEY) || '[]');
161 return Array.isArray(records) ? records.filter(record => record && Number.isFinite(record.timestamp)) : [];
162 } catch { return []; }
163 }
164
165 function loadOpenRouterPrices() {
166 try {
167 const prices = JSON.parse(localStorage.getItem(OPENROUTER_PRICES_KEY) || '{}');
168 return prices && typeof prices === 'object' && !Array.isArray(prices) ? prices : {};
169 } catch { return {}; }
170 }
171
172 function persistOpenRouterPrices() {
173 const recent = Object.entries(openRouterPrices)
174 .sort((a, b) => (Number(b[1]?.checkedAt) || 0) - (Number(a[1]?.checkedAt) || 0))
175 .slice(0, 40);
176 openRouterPrices = Object.fromEntries(recent);
177 try { localStorage.setItem(OPENROUTER_PRICES_KEY, JSON.stringify(openRouterPrices)); } catch {}
178 }
179
180 function loadTreeZoom() {
181 try { return Math.max(.8, Math.min(1.4, Number(localStorage.getItem(TREE_ZOOM_KEY)) || 1)); }
182 catch { return 1; }
183 }
184
185 function blankMap() {
186 const now = Date.now();
187 return { id: uid(), title: 'Untitled map', titleCustom: false, nodes: [], attachments: [], collapsedIds: [], activeId: null, createdAt: now, updatedAt: now };
188 }
189
190 function titleFromNodes(nodes) {
191 const first = nodes.find(node => !node.parentId) || nodes[0];
192 if (!first) return 'Untitled map';
193 const title = String(first.question).replace(/\s+/g, ' ').trim();
194 return title.length > 54 ? `${title.slice(0, 54)}…` : title;
195 }
196
197 function normalizeMap(value = {}) {
198 const normalized = normalizeState(value);
199 const attachments = Array.isArray(value.attachments) ? value.attachments
200 .filter(file => file && file.id && file.name)
201 .map(file => ({
202 id: String(file.id), name: String(file.name), size: Number(file.size) || 0,
203 createdAt: Number(file.createdAt) || Date.now(), detail: file.detail === 'high' ? 'high' : 'low',
204 kind: file.kind === 'markdown' || String(file.name).toLowerCase().endsWith('.md') ? 'markdown' : 'pdf',
205 provider: PROVIDERS[file.provider] ? file.provider : 'openai'
206 })) : [];
207 const createdAt = Number(value.createdAt) || Number(normalized.nodes[0]?.createdAt) || Date.now();
208 return {
209 id: String(value.id || uid()),
210 title: String(value.title || titleFromNodes(normalized.nodes)),
211 titleCustom: Boolean(value.titleCustom),
212 ...normalized,
213 attachments,
214 collapsedIds: Array.isArray(value.collapsedIds) ? [...new Set(value.collapsedIds.map(String))] : [],
215 createdAt,
216 updatedAt: Number(value.updatedAt) || Number(normalized.nodes.at(-1)?.createdAt) || createdAt
217 };
218 }
219
220 function loadWorkspace() {
221 let raw = null;
222 try { raw = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null'); } catch {}
223 let maps = [];
224 let activeMapId = null;
225 if (raw && Array.isArray(raw.maps)) {
226 maps = raw.maps.filter(Boolean).map(normalizeMap);
227 activeMapId = raw.activeMapId;
228 } else if (raw && Array.isArray(raw.nodes) && raw.nodes.length) {
229 // Migrate the original single-map schema in place.
230 const migrated = normalizeMap(raw);
231 maps = [migrated];
232 activeMapId = migrated.id;
233 }
234 if (!maps.length) maps.push(blankMap());
235 if (!maps.some(map => map.id === activeMapId)) activeMapId = maps[0].id;
236 return { version: 2, maps, activeMapId };
237 }
238
239 function currentMap() {
240 return workspace.maps.find(map => map.id === workspace.activeMapId) || workspace.maps[0];
241 }
242
243 function normalizeState(value) {
244 const nodes = Array.isArray(value.nodes) ? value.nodes.filter(n => n && n.id && n.question).map(node => {
245 if (node.status !== 'loading') return node;
246 return { ...node, status: 'error', error: 'The page was closed before this response finished.' };
247 }) : [];
248 const activeId = nodes.some(n => n.id === value.activeId) ? value.activeId : (nodes.at(-1)?.id || null);
249 return { nodes, activeId };
250 }
251
252 function persistSoon() {
253 clearTimeout(saveTimer);
254 saveTimer = setTimeout(() => {
255 try { localStorage.setItem(STORAGE_KEY, JSON.stringify(workspace)); }
256 catch { showToast('Browser storage is full — conversations could not be saved'); }
257 }, 180);
258 }
259
260 function persistNow() {
261 clearTimeout(saveTimer);
262 try { localStorage.setItem(STORAGE_KEY, JSON.stringify(workspace)); return true; }
263 catch { showToast('Browser storage is full — conversations could not be saved'); return false; }
264 }
265
266 function touchMap(map = state) { map.updatedAt = Date.now(); searchIndex = null; }
267
268 function refreshMapTitle(map = state) {
269 if (!map.titleCustom) map.title = titleFromNodes(map.nodes);
270 }
271
272 function nodeById(id, map = state) { return map.nodes.find(node => node.id === id); }
273
274 function pathTo(id, map = state) {
275 const path = [];
276 const seen = new Set();
277 let node = nodeById(id, map);
278 while (node && !seen.has(node.id)) {
279 seen.add(node.id);
280 path.push(node);
281 node = nodeById(node.parentId, map);
282 }
283 return path.reverse();
284 }
285
286 function childrenOf(id) { return state.nodes.filter(node => node.parentId === id); }
287
288 function uid() {
289 return globalThis.crypto?.randomUUID?.() || `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
290 }
291
292 function escapeHTML(value = '') {
293 return value.replace(/[&<>'"]/g, char => ({ '&':'&', '<':'<', '>':'>', "'":''', '"':'"' })[char]);
294 }
295
296 function inlineMarkdown(text) {
297 let output = escapeHTML(text);
298 output = output.replace(/`([^`]+)`/g, '<code>$1</code>');
299 output = output.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
300 output = output.replace(/(?<!\*)\*([^*\n]+)\*(?!\*)/g, '<em>$1</em>');
301 output = output.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
302 return output;
303 }
304
305 function tableCells(line) {
306 let source = line.trim();
307 if (source.startsWith('|')) source = source.slice(1);
308 if (source.endsWith('|') && !source.endsWith('\\|')) source = source.slice(0, -1);
309 const cells = [];
310 let cell = '';
311 let code = false;
312 for (let index = 0; index < source.length; index += 1) {
313 const char = source[index];
314 if (char === '\\' && source[index + 1] === '|') {
315 cell += '|';
316 index += 1;
317 } else if (char === '`') {
318 code = !code;
319 cell += char;
320 } else if (char === '|' && !code) {
321 cells.push(cell.trim());
322 cell = '';
323 } else cell += char;
324 }
325 cells.push(cell.trim());
326 return cells;
327 }
328
329 function tableDelimiter(line) {
330 const cells = tableCells(line);
331 if (!line.includes('|') || !cells.length || cells.some(cell => !/^:?-{3,}:?$/.test(cell))) return null;
332 return cells.map(cell => cell.startsWith(':') && cell.endsWith(':') ? 'center' : cell.endsWith(':') ? 'right' : cell.startsWith(':') ? 'left' : '');
333 }
334
335 function renderTable(header, alignments, rows) {
336 const cellHTML = (cell, tag, index) => {
337 const alignment = alignments[index] ? ` style="text-align: ${alignments[index]}"` : '';
338 const scope = tag === 'th' ? ' scope="col"' : '';
339 return `<${tag}${scope}${alignment}>${inlineMarkdown(cell || '')}</${tag}>`;
340 };
341 const head = header.map((cell, index) => cellHTML(cell, 'th', index)).join('');
342 const body = rows.map(row => `<tr>${header.map((_, index) => cellHTML(row[index], 'td', index)).join('')}</tr>`).join('');
343 return `<div class="table-scroll"><table><thead><tr>${head}</tr></thead>${body ? `<tbody>${body}</tbody>` : ''}</table></div>`;
344 }
345
346 function renderMath(source, displayMode) {
347 if (!globalThis.katex) return `<code class="math-fallback">${escapeHTML(source)}</code>`;
348 try { return katex.renderToString(source, { displayMode, throwOnError: false, strict: false, trust: false }); }
349 catch { return `<code class="math-fallback">${escapeHTML(source)}</code>`; }
350 }
351
352 function markdown(source = '') {
353 const stash = [];
354 const token = html => `\u0000${stash.push(html) - 1}\u0000`;
355 let text = source.replace(/\r\n?/g, '\n');
356 text = text.replace(/```([\w+-]*)\n([\s\S]*?)```/g, (_, lang, code) => token(`<pre data-language="${escapeHTML(lang)}"><code>${escapeHTML(code.trimEnd())}</code></pre>`));
357 text = text.replace(/\$\$([\s\S]*?)\$\$/g, (_, formula) => token(renderMath(formula.trim(), true)));
358 text = text.replace(/\\\[([\s\S]*?)\\\]/g, (_, formula) => token(renderMath(formula.trim(), true)));
359 text = text.replace(/\\\((.*?)\\\)/g, (_, formula) => token(renderMath(formula.trim(), false)));
360 text = text.replace(/(?<!\\)\$([^$\n]+?)\$/g, (_, formula) => token(renderMath(formula.trim(), false)));
361
362 const lines = text.split('\n');
363 const html = [];
364 let paragraph = [];
365 let list = null;
366 let listItemOpen = false;
367 const flushParagraph = () => {
368 if (paragraph.length) html.push(`<p>${inlineMarkdown(paragraph.join('\n')).replace(/\n/g, '<br>')}</p>`);
369 paragraph = [];
370 };
371 const closeListItem = () => {
372 if (listItemOpen) html.push('</li>');
373 listItemOpen = false;
374 };
375 const closeList = () => {
376 if (!list) return;
377 closeListItem();
378 html.push(`</${list}>`);
379 list = null;
380 };
381
382 for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
383 const line = lines[lineIndex];
384 const alignments = lineIndex + 1 < lines.length ? tableDelimiter(lines[lineIndex + 1]) : null;
385 if (alignments) {
386 const header = tableCells(line);
387 if (header.length === alignments.length) {
388 flushParagraph(); closeList();
389 const rows = [];
390 lineIndex += 2;
391 while (lineIndex < lines.length && lines[lineIndex].trim() && lines[lineIndex].includes('|')) {
392 rows.push(tableCells(lines[lineIndex]));
393 lineIndex += 1;
394 }
395 html.push(renderTable(header, alignments, rows));
396 lineIndex -= 1;
397 continue;
398 }
399 }
400 const heading = line.match(/^(#{1,3})\s+(.+)/);
401 const bullet = line.match(/^\s*[-*+]\s+(.+)/);
402 const numbered = line.match(/^\s*(\d+)[.)]\s+(.+)/);
403 const quote = line.match(/^>\s?(.*)/);
404 const blockToken = line.match(/^\u0000(\d+)\u0000$/);
405 if (blockToken) { flushParagraph(); closeList(); html.push(stash[Number(blockToken[1])]); }
406 else if (heading) { flushParagraph(); closeList(); const level = heading[1].length; html.push(`<h${level}>${inlineMarkdown(heading[2])}</h${level}>`); }
407 else if (bullet || numbered) {
408 flushParagraph();
409 const wanted = bullet ? 'ul' : 'ol';
410 if (list !== wanted) {
411 closeList();
412 const start = numbered && numbered[1] !== '1' ? ` start="${Number(numbered[1])}"` : '';
413 html.push(`<${wanted}${start}>`);
414 list = wanted;
415 } else closeListItem();
416 html.push(`<li>${inlineMarkdown(bullet ? bullet[1] : numbered[2])}`);
417 listItemOpen = true;
418 } else if (quote) { flushParagraph(); closeList(); html.push(`<blockquote>${inlineMarkdown(quote[1])}</blockquote>`); }
419 else if (!line.trim()) {
420 flushParagraph();
421 let nextIndex = lineIndex + 1;
422 while (nextIndex < lines.length && !lines[nextIndex].trim()) nextIndex += 1;
423 const nextLine = lines[nextIndex] || '';
424 const continuesList = Boolean(list) && (/^\s+\S/.test(nextLine) || (list === 'ul'
425 ? /^\s*[-*+]\s+/.test(nextLine)
426 : /^\s*\d+[.)]\s+/.test(nextLine)));
427 if (!continuesList) closeList();
428 }
429 else if (list && /^\s+\S/.test(line)) html.push(`<p>${inlineMarkdown(line.trim())}</p>`);
430 else { closeList(); paragraph.push(line); }
431 }
432 flushParagraph(); closeList();
433 return html.join('').replace(/\u0000(\d+)\u0000/g, (_, index) => stash[Number(index)]);
434 }
435
436 function answerHTML(node) {
437 if (node.status === 'loading' && !node.answer) return '<span class="thinking" aria-label="Thinking"><i></i><i></i><i></i></span>';
438 if (node.status === 'error') return `<p class="error-text">${escapeHTML(node.error || 'The request failed.')}</p>`;
439 return markdown(node.answer || '');
440 }
441
442 function answerAttribution(node) {
443 if (!node.model || !node.provider || !node.answer) return '';
444 return `<div class="answer-attribution" title="Generated by ${escapeHTML(node.model)} through ${escapeHTML(providerLabel(node.provider))}"><span>${escapeHTML(node.model)}</span><small>${escapeHTML(providerLabel(node.provider))}</small></div>`;
445 }
446
447 function renderConversation({ scroll = false } = {}) {
448 const previousScroll = scroll ? null : { left: window.scrollX, top: window.scrollY };
449 const path = pathTo(state.activeId);
450 els.welcome.hidden = path.length > 0;
451 els.conversation.hidden = path.length === 0;
452 const fragment = document.createDocumentFragment();
453 for (const node of path) {
454 const article = document.createElement('article');
455 article.className = 'message';
456 article.dataset.nodeId = node.id;
457 article.innerHTML = `
458 <div class="question-row"><div class="question-bubble">${escapeHTML(node.question)}</div></div>
459 <div class="answer"><span class="answer-mark" aria-hidden="true">S</span><div class="answer-content"><div class="answer-body">${answerHTML(node)}</div>${answerAttribution(node)}</div></div>
460 <div class="answer-actions">
461 <button class="mini-action copy-answer" type="button">Copy answer</button>
462 <button class="mini-action branch-here" type="button">Branch here</button>
463 ${node.status === 'error' ? '<button class="mini-action retry-node" type="button">Retry</button>' : ''}
464 </div>`;
465 fragment.append(article);
466 }
467 els.conversation.replaceChildren(fragment);
468 if (previousScroll && (window.scrollX !== previousScroll.left || window.scrollY !== previousScroll.top)) {
469 window.scrollTo({ ...previousScroll, behavior: 'auto' });
470 }
471 renderBranchContext();
472 if (scroll && state.activeId) requestAnimationFrame(() => {
473 if (scroll === 'bottom') {
474 window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
475 return;
476 }
477 const targetId = state.activeId;
478 requestAnimationFrame(() => {
479 if (state.activeId !== targetId) return;
480 const message = $(`.message[data-node-id="${CSS.escape(targetId)}"]`, els.conversation);
481 if (!message) return;
482 const headerHeight = $('.topbar')?.getBoundingClientRect().height || 68;
483 const top = window.scrollY + message.getBoundingClientRect().top - headerHeight - 14;
484 window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
485 });
486 });
487 }
488
489 function renderTree() {
490 const ids = new Set(state.nodes.map(node => node.id));
491 const grouped = new Map();
492 for (const node of state.nodes) {
493 const parentId = node.parentId && ids.has(node.parentId) ? node.parentId : null;
494 if (!grouped.has(parentId)) grouped.set(parentId, []);
495 grouped.get(parentId).push(node);
496 }
497 const roots = grouped.get(null) || [];
498 const activePath = new Set(pathTo(state.activeId).map(node => node.id));
499 const collapsed = new Set(state.collapsedIds);
500 const build = nodes => {
501 const ul = document.createElement('ul');
502 for (const node of nodes) {
503 const li = document.createElement('li');
504 li.dataset.nodeId = node.id;
505 const wrap = document.createElement('div');
506 wrap.className = 'tree-node-wrap';
507 const button = document.createElement('button');
508 button.type = 'button';
509 button.className = `tree-node${node.id === state.activeId ? ' active' : ''}${activePath.has(node.id) ? ' on-path' : ''}`;
510 button.dataset.nodeId = node.id;
511 button.setAttribute('aria-current', node.id === state.activeId ? 'true' : 'false');
512 const children = grouped.get(node.id) || [];
513 const isCollapsed = children.length > 0 && collapsed.has(node.id);
514 const toggle = document.createElement(children.length ? 'button' : 'span');
515 toggle.className = children.length ? 'toggle-subtree' : 'toggle-placeholder';
516 if (children.length) {
517 toggle.type = 'button';
518 toggle.dataset.nodeId = node.id;
519 toggle.setAttribute('aria-label', `${isCollapsed ? 'Expand' : 'Collapse'} branch: ${node.question}`);
520 toggle.setAttribute('aria-expanded', String(!isCollapsed));
521 toggle.textContent = isCollapsed ? '▸' : '▾';
522 }
523 button.innerHTML = `<span class="node-dot">${node.status === 'loading' ? '…' : (activePath.has(node.id) ? '●' : '○')}</span><span class="node-copy"><span class="node-title">${escapeHTML(node.question)}</span><span class="node-meta">${children.length} ${children.length === 1 ? 'reply' : 'branches'}${isCollapsed ? ' · hidden' : ''}</span></span>`;
524 wrap.append(toggle, button);
525 li.append(wrap);
526 if (children.length && !isCollapsed) li.append(build(children));
527 ul.append(li);
528 }
529 return ul;
530 };
531 els.tree.replaceChildren(build(roots));
532 els.mapEmpty.hidden = state.nodes.length > 0;
533 els.tree.hidden = state.nodes.length === 0;
534 els.nodeCount.textContent = String(state.nodes.length);
535 let branchCount = 0;
536 for (const children of grouped.values()) branchCount += Math.max(0, children.length - 1);
537 els.branchCount.textContent = String(branchCount);
538 }
539
540 function revealNode(map, nodeId) {
541 if (!nodeId) return;
542 const hidden = new Set(map.collapsedIds);
543 for (const node of pathTo(nodeId, map).slice(0, -1)) hidden.delete(node.id);
544 map.collapsedIds = [...hidden];
545 }
546
547 function toggleSubtree(nodeId, force) {
548 if (!nodeById(nodeId)) return;
549 const collapsed = new Set(state.collapsedIds);
550 const shouldCollapse = force ?? !collapsed.has(nodeId);
551 if (shouldCollapse) collapsed.add(nodeId);
552 else collapsed.delete(nodeId);
553 state.collapsedIds = [...collapsed];
554 persistSoon();
555 renderTree();
556 }
557
558 function setAllSubtrees(collapsed) {
559 if (!collapsed) state.collapsedIds = [];
560 else {
561 const parents = new Set(state.nodes.map(node => node.parentId).filter(Boolean));
562 state.collapsedIds = [...parents];
563 }
564 persistSoon();
565 renderTree();
566 }
567
568 function updateTreeZoom(delta = 0) {
569 treeZoom = Math.round(Math.max(.8, Math.min(1.4, treeZoom + delta)) * 10) / 10;
570 els.tree.style.fontSize = `${.76 * treeZoom}rem`;
571 els.tree.style.setProperty('--tree-indent', `${20 * treeZoom}px`);
572 els.tree.style.setProperty('--tree-dot-size', `${17 * treeZoom}px`);
573 els.tree.style.setProperty('--tree-node-pad-y', `${8 * treeZoom}px`);
574 els.treeZoom.textContent = `${Math.round(treeZoom * 100)}%`;
575 try { localStorage.setItem(TREE_ZOOM_KEY, String(treeZoom)); } catch {}
576 }
577
578 function renderBranchContext() {
579 const active = nodeById(state.activeId);
580 const latest = state.nodes.at(-1);
581 const branching = active && latest && active.id !== latest.id;
582 els.branchContext.hidden = !branching;
583 if (branching) els.branchLabel.textContent = active.question;
584 }
585
586 function renderHistory() {
587 const maps = workspace.maps
588 .filter(map => map.nodes.length > 0 || map.attachments.length > 0)
589 .sort((a, b) => b.updatedAt - a.updatedAt);
590 const fragment = document.createDocumentFragment();
591 for (const map of maps) {
592 const row = document.createElement('div');
593 row.className = 'history-row';
594 const button = document.createElement('button');
595 button.type = 'button';
596 button.className = `history-item${map.id === workspace.activeMapId ? ' active' : ''}`;
597 button.dataset.mapId = map.id;
598 button.setAttribute('aria-current', map.id === workspace.activeMapId ? 'page' : 'false');
599 const date = new Date(map.updatedAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
600 const fileMeta = map.attachments.length ? ` · ${map.attachments.length} file${map.attachments.length === 1 ? '' : 's'}` : '';
601 button.innerHTML = `<span class="history-glyph" aria-hidden="true">${map.nodes.length || map.attachments.length ? '◇' : '＋'}</span><span class="history-copy"><span class="history-title">${escapeHTML(map.title)}</span><span class="history-meta">${map.nodes.length} ${map.nodes.length === 1 ? 'node' : 'nodes'}${fileMeta} · ${date}</span></span>`;
602 const rename = document.createElement('button');
603 rename.type = 'button';
604 rename.className = 'rename-map';
605 rename.dataset.mapId = map.id;
606 rename.setAttribute('aria-label', `Rename conversation: ${map.title}`);
607 rename.title = 'Rename this conversation';
608 rename.textContent = '✎';
609 const remove = document.createElement('button');
610 remove.type = 'button';
611 remove.className = 'delete-map';
612 remove.dataset.mapId = map.id;
613 remove.setAttribute('aria-label', `Delete conversation: ${map.title}`);
614 remove.title = 'Delete this conversation';
615 remove.textContent = '×';
616 row.append(button, rename, remove);
617 fragment.append(row);
618 }
619 els.historyList.replaceChildren(fragment);
620 els.historyEmpty.hidden = maps.length > 0;
621 els.historyList.hidden = maps.length === 0;
622 if (els.conversationSearch.value.trim()) renderSearchResults();
623 else els.searchResults.hidden = true;
624 }
625
626 function buildSearchIndex() {
627 const entries = [];
628 for (const map of workspace.maps) {
629 if (!map.nodes.length && !map.attachments.length) continue;
630 entries.push({ mapId: map.id, nodeId: null, kind: 'Map', label: map.title, fields: [map.title] });
631 for (const node of map.nodes) {
632 entries.push({
633 mapId: map.id, nodeId: node.id, kind: 'Node', label: node.question,
634 fields: [node.question, node.answer || ''], mapTitle: map.title
635 });
636 }
637 for (const file of map.attachments) {
638 entries.push({ mapId: map.id, nodeId: null, kind: file.kind === 'markdown' ? 'Markdown' : 'PDF', label: file.name, fields: [file.name], mapTitle: map.title });
639 }
640 }
641 searchIndex = entries;
642 return entries;
643 }
644
645 function searchExcerpt(fields, expression) {
646 for (const field of fields) {
647 const source = String(field || '').replace(/\s+/g, ' ').trim();
648 const index = source.search(expression);
649 if (index < 0) continue;
650 const start = Math.max(0, index - 45);
651 const end = Math.min(source.length, index + 115);
652 return `${start ? '…' : ''}${source.slice(start, end)}${end < source.length ? '…' : ''}`;
653 }
654 return '';
655 }
656
657 function renderSearchResults() {
658 const query = els.conversationSearch.value.trim();
659 if (!query) {
660 els.searchResults.hidden = true;
661 els.historyList.hidden = false;
662 els.historyEmpty.hidden = workspace.maps.some(map => map.nodes.length || map.attachments.length);
663 return;
664 }
665 const expression = new RegExp(query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i');
666 const matches = [];
667 for (const entry of searchIndex || buildSearchIndex()) {
668 const excerpt = searchExcerpt(entry.fields, expression);
669 if (!excerpt) continue;
670 matches.push({ ...entry, excerpt });
671 if (matches.length >= 60) break;
672 }
673 els.searchResults.innerHTML = matches.length ? matches.map(entry => `
674 <button class="search-result" type="button" data-map-id="${escapeHTML(entry.mapId)}"${entry.nodeId ? ` data-node-id="${escapeHTML(entry.nodeId)}"` : ''}>
675 <span class="search-result-top"><strong>${escapeHTML(entry.label)}</strong><small>${escapeHTML(entry.kind)} · ${escapeHTML(entry.mapTitle || entry.label)}</small></span>
676 <span class="search-excerpt">${escapeHTML(entry.excerpt)}</span>
677 </button>`).join('') : `<p class="search-empty">No results for “${escapeHTML(query)}”.</p>`;
678 els.searchResults.hidden = false;
679 els.historyList.hidden = true;
680 els.historyEmpty.hidden = true;
681 }
682
683 function clearSearch() {
684 clearTimeout(searchTimer);
685 els.conversationSearch.value = '';
686 renderSearchResults();
687 renderHistory();
688 }
689
690 function formatFileSize(bytes) {
691 if (!bytes) return '';
692 if (bytes < 1024 * 1024) return `${Math.max(1, Math.round(bytes / 1024))} KB`;
693 return `${(bytes / (1024 * 1024)).toFixed(bytes < 10 * 1024 * 1024 ? 1 : 0)} MB`;
694 }
695
696 function renderAttachments() {
697 const fragment = document.createDocumentFragment();
698 for (const file of state.attachments) {
699 const chip = document.createElement('span');
700 chip.className = 'attachment-chip';
701 const available = file.provider === settings.provider;
702 chip.classList.toggle('inactive-provider', !available);
703 chip.title = `${file.name}${file.size ? ` · ${formatFileSize(file.size)}` : ''} · Uploaded to ${providerLabel(file.provider)}${available ? ' · Included with every question' : ' · Not sent with the selected provider'}`;
704 const badge = file.kind === 'markdown' ? 'MD' : 'PDF';
705 chip.innerHTML = `<span class="attachment-badge${file.kind === 'markdown' ? ' md' : ''}" aria-hidden="true">${badge}</span><span class="attachment-name">${escapeHTML(file.name)}</span>${available ? '' : `<span class="attachment-provider">${escapeHTML(providerLabel(file.provider))}</span>`}<button class="remove-attachment" type="button" data-file-id="${escapeHTML(file.id)}" aria-label="Remove ${escapeHTML(file.name)} from this map">×</button>`;
706 fragment.append(chip);
707 }
708 if (uploadingFiles && state.id === uploadTargetMapId) {
709 const status = document.createElement('span');
710 status.className = 'attachment-chip upload-status';
711 status.innerHTML = '<span class="upload-spinner" aria-hidden="true"></span> Uploading…';
712 fragment.append(status);
713 }
714 els.attachments.replaceChildren(fragment);
715 els.attachments.hidden = !state.attachments.length && !(uploadingFiles && state.id === uploadTargetMapId);
716 els.uploadFile.disabled = uploadingFiles || Boolean(activeRequest);
717 }
718
719 function renderAll(options) { renderConversation(options); renderTree(); renderHistory(); renderAttachments(); }
720
721 function updateStreamedNode(node) {
722 if (state.activeId !== node.id || !state.nodes.includes(node)) return;
723 const body = $(`.message[data-node-id="${CSS.escape(node.id)}"] .answer-body`, els.conversation);
724 if (body) {
725 const previousScroll = { left: window.scrollX, top: window.scrollY };
726 body.innerHTML = answerHTML(node);
727 if (window.scrollX !== previousScroll.left || window.scrollY !== previousScroll.top) {
728 window.scrollTo({ ...previousScroll, behavior: 'auto' });
729 }
730 }
731 }
732
733 function inputFor(map, parentId, question, provider = settings.provider) {
734 const messages = [];
735 for (const node of pathTo(parentId, map)) {
736 if (provider === 'openrouter') {
737 messages.push({ type: 'message', role: 'user', content: [{ type: 'input_text', text: node.question }] });
738 if (node.answer) messages.push({
739 type: 'message', role: 'assistant', id: `msg_${String(node.id).replace(/[^a-zA-Z0-9_-]/g, '')}`,
740 status: 'completed', content: [{ type: 'output_text', text: node.answer, annotations: [] }]
741 });
742 } else {
743 messages.push({ role: 'user', content: node.question });
744 if (node.answer) messages.push({ role: 'assistant', content: node.answer });
745 }
746 }
747 const content = map.attachments
748 .filter(file => file.provider === provider)
749 .map(file => file.kind === 'markdown'
750 ? { type: 'input_file', file_id: file.id }
751 : { type: 'input_file', file_id: file.id, detail: file.detail || 'low' });
752 content.push({ type: 'input_text', text: question });
753 const structured = provider === 'openrouter' || content.length > 1;
754 messages.push(structured ? { type: 'message', role: 'user', content } : { role: 'user', content: question });
755 return messages;
756 }
757
758 function filesEndpoint(apiUrl = settings.apiUrl) {
759 const url = new URL(apiUrl);
760 if (!/\/responses\/?$/.test(url.pathname)) throw new Error('The configured endpoint is not a Responses API URL, so its Files endpoint cannot be derived.');
761 url.pathname = url.pathname.replace(/\/responses\/?$/, '/files');
762 url.search = '';
763 url.hash = '';
764 return url.toString();
765 }
766
767 async function uploadFiles(fileList) {
768 const files = [...fileList];
769 if (!files.length) return;
770 if (activeRequest || uploadingFiles) { showToast('Finish the current operation first'); return; }
771 if (!settings.apiKey) { openSettings(); showToast(`Add a ${providerLabel()} API key before uploading`); return; }
772
773 const valid = files.filter(file => /\.(pdf|md)$/i.test(file.name));
774 if (valid.length !== files.length) { showToast('Only PDF and Markdown (.md) files can be added'); return; }
775 if (valid.some(file => file.size >= FILE_REQUEST_LIMIT)) { showToast('Each file must be smaller than 50 MB'); return; }
776 const existingBytes = state.attachments.filter(file => file.provider === settings.provider).reduce((total, file) => total + file.size, 0);
777 const addedBytes = valid.reduce((total, file) => total + file.size, 0);
778 if (existingBytes + addedBytes >= FILE_REQUEST_LIMIT) { showToast('Files in one map must total less than 50 MB'); return; }
779
780 const targetMap = state;
781 const connection = { ...settings };
782 uploadingFiles = true;
783 uploadTargetMapId = targetMap.id;
784 renderAttachments();
785 let uploaded = 0;
786 try {
787 const endpoint = filesEndpoint(connection.apiUrl);
788 for (const file of valid) {
789 const form = new FormData();
790 if (connection.provider === 'openai') form.append('purpose', 'user_data');
791 form.append('file', file, file.name);
792 const response = await fetch(endpoint, {
793 method: 'POST', headers: requestHeaders(false, connection), body: form
794 });
795 if (!response.ok) {
796 let message = `File upload failed (${response.status})`;
797 try { const data = await response.json(); message = data.error?.message || message; } catch {}
798 throw new Error(message);
799 }
800 const data = await response.json();
801 if (!data.id) throw new Error('The Files API did not return a file ID.');
802 targetMap.attachments.push({
803 id: String(data.id), name: String(data.filename || file.name),
804 size: Number(data.bytes ?? data.size_bytes) || file.size, createdAt: Date.now(), detail: 'low',
805 kind: file.name.toLowerCase().endsWith('.md') ? 'markdown' : 'pdf',
806 provider: connection.provider
807 });
808 uploaded += 1;
809 touchMap(targetMap);
810 persistNow();
811 if (state === targetMap) renderAll();
812 }
813 showToast(`${uploaded} file${uploaded === 1 ? '' : 's'} added to this map`);
814 } catch (error) {
815 showToast(error.message || 'File upload failed');
816 } finally {
817 uploadingFiles = false;
818 uploadTargetMapId = null;
819 els.fileInput.value = '';
820 renderAll();
821 }
822 }
823
824 function removeAttachment(fileId) {
825 const file = state.attachments.find(candidate => candidate.id === fileId);
826 if (!file) return;
827 if (!confirm(`Remove “${file.name}” from this map? The uploaded copy is not deleted from the API provider.`)) return;
828 state.attachments = state.attachments.filter(candidate => candidate.id !== fileId);
829 touchMap();
830 persistNow();
831 renderAll();
832 showToast('File removed from this map');
833 }
834
835 async function ask(question, parentId = state.activeId) {
836 question = question.trim();
837 if (!question) return;
838 if (activeRequest) { showToast('Stop or finish the current response first'); return; }
839 if (uploadingFiles) { showToast('Wait for the file upload to finish'); return; }
840 if (!settings.apiKey) { openSettings(); showToast(`Add a ${providerLabel()} API key to begin`); return; }
841
842 const requestMap = state;
843 const connection = { ...settings };
844 const node = {
845 id: uid(), parentId: parentId || null, question, answer: '', status: 'loading', createdAt: Date.now(),
846 provider: connection.provider, model: connection.model
847 };
848 requestMap.nodes.push(node);
849 requestMap.activeId = node.id;
850 revealNode(requestMap, node.id);
851 refreshMapTitle(requestMap);
852 touchMap(requestMap);
853 persistSoon();
854 renderAll({ scroll: true });
855 setBusy(true);
856 const controller = new AbortController();
857 activeRequest = controller;
858 let completedUsage = null;
859
860 try {
861 const response = await fetch(connection.apiUrl, {
862 method: 'POST',
863 headers: requestHeaders(true, connection),
864 body: JSON.stringify({ model: connection.model, instructions: connection.systemPrompt, input: inputFor(requestMap, parentId, question, connection.provider), stream: true }),
865 signal: controller.signal
866 });
867 if (!response.ok) {
868 let message = `API request failed (${response.status})`;
869 try { const data = await response.json(); message = data.error?.message || message; } catch {}
870 throw new Error(message);
871 }
872 if (!response.body) throw new Error('This browser did not provide a streaming response body.');
873 await consumeSSE(response.body, event => {
874 if (event.type === 'response.output_text.delta' || event.type === 'response.content_part.delta') node.answer += event.delta || '';
875 if (event.type === 'response.completed' || event.type === 'response.done') {
876 node.model = String(event.response?.model || node.model);
877 completedUsage = event.response?.usage || event.usage || completedUsage;
878 }
879 if (event.type === 'response.failed') throw new Error(event.response?.error?.message || 'The model response failed.');
880 }, () => updateStreamedNode(node));
881 node.status = 'complete';
882 if (completedUsage) await recordUsage(node.id, node.model || connection.model, connection.apiUrl, completedUsage, connection.provider);
883 } catch (error) {
884 node.status = 'error';
885 node.error = error.name === 'AbortError' ? 'Response stopped.' : error.message;
886 } finally {
887 activeRequest = null;
888 touchMap(requestMap);
889 persistSoon();
890 setBusy(false);
891 renderAll();
892 }
893 }
894
895 async function consumeSSE(stream, onEvent, onPaint) {
896 const reader = stream.getReader();
897 const decoder = new TextDecoder();
898 let buffer = '';
899 let paintQueued = false;
900 const queuePaint = () => {
901 if (paintQueued) return;
902 paintQueued = true;
903 setTimeout(() => { paintQueued = false; onPaint(); }, 70);
904 };
905 const processBlock = block => {
906 for (const line of block.split(/\r?\n/)) {
907 if (!line.startsWith('data:')) continue;
908 const data = line.slice(5).trim();
909 if (!data || data === '[DONE]') continue;
910 onEvent(JSON.parse(data));
911 queuePaint();
912 }
913 };
914 while (true) {
915 const { done, value } = await reader.read();
916 buffer += decoder.decode(value || new Uint8Array(), { stream: !done });
917 const blocks = buffer.split(/\r?\n\r?\n/);
918 buffer = blocks.pop() || '';
919 for (const block of blocks) processBlock(block);
920 if (done) break;
921 }
922 if (buffer.trim()) processBlock(buffer);
923 onPaint();
924 }
925
926 function setBusy(busy) {
927 els.prompt.disabled = busy;
928 els.send.textContent = busy ? '■' : '↑';
929 els.send.setAttribute('aria-label', busy ? 'Stop response' : 'Send message');
930 els.uploadFile.disabled = busy || uploadingFiles;
931 }
932
933 function openSettings() {
934 settingsDraft = structuredClone({
935 activeModelId: settings.activeModelId, apiKeys: settings.apiKeys, models: settings.models
936 });
937 els.openaiApiKey.value = settingsDraft.apiKeys.openai || '';
938 els.openrouterApiKey.value = settingsDraft.apiKeys.openrouter || '';
939 fillModelOptions(els.openaiModelOptions, PROVIDERS.openai.models);
940 fillModelOptions(els.openrouterModelOptions, PROVIDERS.openrouter.models);
941 renderModelCards();
942 els.systemPrompt.value = settings.systemPrompt;
943 els.settings.showModal();
944 setTimeout(() => (settings.provider === 'openrouter' ? els.openrouterApiKey : els.openaiApiKey).focus(), 50);
945 }
946
947 function fillModelOptions(list, models) {
948 list.replaceChildren(...models.map(model => Object.assign(document.createElement('option'), { value: model })));
949 }
950
951 function renderModelCards() {
952 if (!settingsDraft) return;
953 els.modelConfigs.innerHTML = settingsDraft.models.map((connection, index) => {
954 const defaults = PROVIDERS[connection.provider];
955 const active = connection.id === settingsDraft.activeModelId;
956 return `<section class="model-config${active ? ' active' : ''}" data-model-card data-model-id="${escapeHTML(connection.id)}" data-provider="${connection.provider}">
957 <div class="model-config-heading">
958 <div><span class="provider-logo">${connection.provider === 'openrouter' ? 'OR' : 'OAI'}</span><h4>Model ${index + 1}</h4></div>
959 <label class="default-model"><input class="default-model-radio" type="radio" name="default-model" value="${escapeHTML(connection.id)}"${active ? ' checked' : ''}> Use by default</label>
960 </div>
961 <div class="model-fields">
962 <label>Provider
963 <select class="model-provider">
964 <option value="openai"${connection.provider === 'openai' ? ' selected' : ''}>OpenAI</option>
965 <option value="openrouter"${connection.provider === 'openrouter' ? ' selected' : ''}>OpenRouter</option>
966 </select>
967 </label>
968 <label>Model
969 <input class="model-name-input" type="text" value="${escapeHTML(connection.model)}" placeholder="${escapeHTML(defaults.model)}" list="${connection.provider}-model-options" spellcheck="false" required>
970 </label>
971 </div>
972 <details class="provider-advanced">
973 <summary>Endpoint</summary>
974 <label>Responses API endpoint
975 <input class="model-api-url" type="url" value="${escapeHTML(connection.apiUrl)}" spellcheck="false" required>
976 </label>
977 </details>
978 <button class="remove-model" type="button"${settingsDraft.models.length === 1 ? ' disabled' : ''} aria-label="Remove model ${index + 1}">Remove model</button>
979 </section>`;
980 }).join('');
981 }
982
983 function captureSettingsForm() {
984 if (!settingsDraft) return;
985 settingsDraft.apiKeys = {
986 openai: els.openaiApiKey.value.trim(), openrouter: els.openrouterApiKey.value.trim()
987 };
988 settingsDraft.models = [...els.modelConfigs.querySelectorAll('[data-model-card]')].map(card => {
989 const provider = $('.model-provider', card).value;
990 return {
991 id: card.dataset.modelId, provider,
992 model: $('.model-name-input', card).value.trim() || PROVIDERS[provider].model,
993 apiUrl: $('.model-api-url', card).value.trim() || PROVIDERS[provider].apiUrl
994 };
995 });
996 settingsDraft.activeModelId = $('input[name="default-model"]:checked', els.modelConfigs)?.value
997 || settingsDraft.models[0]?.id;
998 }
999
1000 function updateModelCardSelection() {
1001 const selected = $('input[name="default-model"]:checked', els.modelConfigs)?.value;
1002 els.modelConfigs.querySelectorAll('[data-model-card]').forEach(card => {
1003 card.classList.toggle('active', card.dataset.modelId === selected);
1004 });
1005 }
1006
1007 function showToast(message) {
1008 els.toast.textContent = message;
1009 els.toast.classList.add('show');
1010 clearTimeout(toastTimer);
1011 toastTimer = setTimeout(() => els.toast.classList.remove('show'), 2200);
1012 }
1013
1014 function updateKeyStatus() {
1015 els.keyStatus.classList.toggle('ready', Boolean(settings.apiKey));
1016 els.activeModel.textContent = settings.model;
1017 els.activeProvider.textContent = providerLabel();
1018 els.activeConnection.title = `${providerLabel()} · ${settings.model} — open settings`;
1019 els.activeConnection.setAttribute('aria-label', `Current model: ${settings.model} through ${providerLabel()}. Open API settings`);
1020 const button = $('#open-settings');
1021 button.title = `${providerLabel()} · ${settings.model}`;
1022 button.setAttribute('aria-label', `API settings — ${providerLabel()}, ${settings.model}`);
1023 }
1024
1025 function updateThemeButton() {
1026 const dark = document.documentElement.dataset.theme === 'dark';
1027 const button = $('#theme-toggle');
1028 button.querySelector('span').textContent = dark ? '☀' : '☾';
1029 button.setAttribute('aria-label', `Switch to ${dark ? 'light' : 'dark'} theme`);
1030 button.title = `Switch to ${dark ? 'light' : 'dark'} theme`;
1031 }
1032
1033 function toggleTheme() {
1034 const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
1035 document.documentElement.dataset.theme = next;
1036 try { localStorage.setItem(THEME_KEY, next); } catch {}
1037 updateThemeButton();
1038 }
1039
1040 function priceForModel(model) {
1041 const key = String(model || '').toLowerCase();
1042 return MODEL_PRICES.find(price => price.match.test(key)) || null;
1043 }
1044
1045 function isOpenAIEndpoint(apiUrl) {
1046 try { return new URL(apiUrl).hostname === 'api.openai.com'; }
1047 catch { return false; }
1048 }
1049
1050 async function openRouterPriceForModel(model) {
1051 const key = String(model || '').trim();
1052 if (!key.includes('/')) return null;
1053 const cached = openRouterPrices[key];
1054 const validCached = cached && Number.isFinite(Number(cached.input)) && Number.isFinite(Number(cached.output));
1055 if (validCached && Date.now() - Number(cached.checkedAt) < PRICE_CACHE_TTL) return cached;
1056 try {
1057 const path = key.split('/').map(encodeURIComponent).join('/');
1058 const response = await fetch(`https://openrouter.ai/api/v1/model/${path}`, {
1059 headers: { 'Accept': 'application/json' }
1060 });
1061 if (!response.ok) return validCached ? cached : null;
1062 const pricing = (await response.json()).data?.pricing;
1063 const prompt = pricing?.prompt == null ? NaN : Number(pricing.prompt);
1064 const completion = pricing?.completion == null ? NaN : Number(pricing.completion);
1065 const cacheRead = pricing?.input_cache_read == null ? NaN : Number(pricing.input_cache_read);
1066 if (!Number.isFinite(prompt) || !Number.isFinite(completion)) return validCached ? cached : null;
1067 const price = {
1068 input: prompt * 1_000_000,
1069 cached: (Number.isFinite(cacheRead) ? cacheRead : prompt) * 1_000_000,
1070 output: completion * 1_000_000,
1071 request: Number(pricing?.request) || 0,
1072 checkedAt: Date.now(),
1073 source: 'openrouter'
1074 };
1075 openRouterPrices[key] = price;
1076 persistOpenRouterPrices();
1077 return price;
1078 } catch { return validCached ? cached : null; }
1079 }
1080
1081 async function recordUsage(nodeId, model, apiUrl, rawUsage, provider) {
1082 if (usageRecords.some(record => record.nodeId === nodeId)) return;
1083 const inputTokens = Number(rawUsage.input_tokens) || 0;
1084 const outputTokens = Number(rawUsage.output_tokens) || 0;
1085 const cachedTokens = Math.min(inputTokens, Number(rawUsage.input_tokens_details?.cached_tokens) || 0);
1086 const totalTokens = Number(rawUsage.total_tokens) || inputTokens + outputTokens;
1087 const price = provider === 'openrouter'
1088 ? await openRouterPriceForModel(model)
1089 : (isOpenAIEndpoint(apiUrl) ? priceForModel(model) : null);
1090 const costUSD = price
1091 ? ((((inputTokens - cachedTokens) * price.input) + (cachedTokens * price.cached) + (outputTokens * price.output)) / 1_000_000) + (Number(price.request) || 0)
1092 : null;
1093 usageRecords.push({
1094 id: uid(), nodeId, timestamp: Date.now(), model: String(model || 'unknown'),
1095 inputTokens, cachedTokens, outputTokens, totalTokens, costUSD,
1096 rates: price ? {
1097 input: price.input, cached: price.cached, output: price.output,
1098 request: Number(price.request) || 0, source: price.source || 'openai', checkedAt: price.checkedAt || Date.now()
1099 } : null
1100 });
1101 // Keep bounded history while retaining roughly a year of normal personal use.
1102 usageRecords = usageRecords.slice(-2000);
1103 try { localStorage.setItem(USAGE_KEY, JSON.stringify(usageRecords)); }
1104 catch { showToast('Usage was returned, but local usage history is full'); }
1105 updateUsageButton();
1106 }
1107
1108 function currentMonthRecords() {
1109 const now = new Date();
1110 return usageRecords.filter(record => {
1111 const date = new Date(record.timestamp);
1112 return date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth();
1113 });
1114 }
1115
1116 function sum(records, key) { return records.reduce((total, record) => total + (Number(record[key]) || 0), 0); }
1117
1118 function formatTokens(value, compact = false) {
1119 const number = Number(value) || 0;
1120 if (!compact || number < 1000) return Math.round(number).toLocaleString();
1121 if (number < 1_000_000) return `${(number / 1000).toFixed(number < 10_000 ? 1 : 0)}K`;
1122 return `${(number / 1_000_000).toFixed(number < 10_000_000 ? 1 : 0)}M`;
1123 }
1124
1125 function formatCost(value) {
1126 if (!Number.isFinite(value)) return 'Unpriced';
1127 if (value > 0 && value < .01) return '<$0.01';
1128 return value.toLocaleString(undefined, { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: value < 1 ? 4 : 2 });
1129 }
1130
1131 function updateUsageButton() {
1132 const total = sum(currentMonthRecords(), 'totalTokens');
1133 els.monthTokens.textContent = formatTokens(total, true);
1134 const label = `${formatTokens(total)} tokens tracked this month`;
1135 $('#open-usage').title = label;
1136 $('#open-usage').setAttribute('aria-label', `${label}. Open API usage details`);
1137 }
1138
1139 function usageRowsByModel(records) {
1140 const groups = new Map();
1141 for (const record of records) {
1142 const model = String(record.model || 'unknown');
1143 if (!groups.has(model)) groups.set(model, { model, totalTokens: 0, costUSD: 0, unpriced: 0 });
1144 const group = groups.get(model);
1145 group.totalTokens += Number(record.totalTokens) || 0;
1146 if (Number.isFinite(record.costUSD)) group.costUSD += record.costUSD;
1147 else group.unpriced += 1;
1148 }
1149 return [...groups.values()].sort((a, b) => b.totalTokens - a.totalTokens);
1150 }
1151
1152 function renderUsage() {
1153 const records = currentMonthRecords().sort((a, b) => b.timestamp - a.timestamp);
1154 const totalCost = records.reduce((total, record) => total + (Number.isFinite(record.costUSD) ? record.costUSD : 0), 0);
1155 const unpriced = records.filter(record => !Number.isFinite(record.costUSD)).length;
1156 els.usageMonth.textContent = new Date().toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
1157 els.usageTotal.textContent = formatTokens(sum(records, 'totalTokens'));
1158 els.usageCost.textContent = records.length && unpriced === records.length
1159 ? 'Unpriced'
1160 : `${formatCost(totalCost)}${unpriced ? ' +' : ''}`;
1161 els.usageRequests.textContent = formatTokens(records.length);
1162 els.usageInput.textContent = formatTokens(sum(records, 'inputTokens'));
1163 els.usageCached.textContent = formatTokens(sum(records, 'cachedTokens'));
1164 els.usageOutput.textContent = formatTokens(sum(records, 'outputTokens'));
1165
1166 const groups = usageRowsByModel(records);
1167 els.usageModels.innerHTML = groups.length ? groups.map(group => `
1168 <div class="usage-row">
1169 <span class="model-name" title="${escapeHTML(group.model)}">${escapeHTML(group.model)}</span>
1170 <span class="row-tokens">${formatTokens(group.totalTokens)} tokens</span>
1171 <span class="row-cost">${group.unpriced ? 'Partly unpriced' : formatCost(group.costUSD)}</span>
1172 </div>`).join('') : '<p class="usage-empty">No tracked requests this month.</p>';
1173
1174 els.usageRecent.innerHTML = records.length ? records.slice(0, 12).map(record => `
1175 <div class="usage-row">
1176 <span class="model-name">${new Date(record.timestamp).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })}</span>
1177 <span class="row-tokens">${formatTokens(record.totalTokens)} tokens</span>
1178 <span class="row-cost">${formatCost(record.costUSD)}</span>
1179 </div>`).join('') : '<p class="usage-empty">Completed requests will appear here.</p>';
1180
1181 els.usageNote.textContent = unpriced
1182 ? `${unpriced} request${unpriced === 1 ? '' : 's'} could not be estimated because its model price could not be resolved.`
1183 : 'Estimates use the rate recorded when each request completed: the local OpenAI table or OpenRouter\'s model-pricing API.';
1184 }
1185
1186 function openUsage() {
1187 renderUsage();
1188 const openRouter = settings.provider === 'openrouter';
1189 els.usageDashboard.href = openRouter ? 'https://openrouter.ai/activity' : 'https://platform.openai.com/usage';
1190 els.usageDashboard.textContent = `${openRouter ? 'OpenRouter' : 'OpenAI'} dashboard ↗`;
1191 els.usageDialog.showModal();
1192 }
1193
1194 function createNewMap() {
1195 const existingBlank = workspace.maps.find(map => map.nodes.length === 0 && map.attachments.length === 0);
1196 const map = existingBlank || blankMap();
1197 if (!existingBlank) workspace.maps.push(map);
1198 workspace.activeMapId = map.id;
1199 state = map;
1200 els.conversationSearch.value = '';
1201 persistNow();
1202 renderAll();
1203 closeHistoryOnSmallScreen();
1204 window.scrollTo({ top: 0, behavior: 'smooth' });
1205 els.prompt.focus();
1206 }
1207
1208 function switchMap(mapId, nodeId = null) {
1209 const map = workspace.maps.find(candidate => candidate.id === mapId);
1210 if (!map) { closeHistoryOnSmallScreen(); return; }
1211 workspace.activeMapId = map.id;
1212 state = map;
1213 state.activeId = nodeId && nodeById(nodeId, state) ? nodeId : (state.nodes.at(-1)?.id || null);
1214 revealNode(state, state.activeId);
1215 persistSoon();
1216 hideSelectionMenu();
1217 renderAll({ scroll: state.activeId ? (nodeId ? true : 'bottom') : false });
1218 closeHistoryOnSmallScreen();
1219 }
1220
1221 function activateNode(nodeId, scroll = true) {
1222 if (!nodeById(nodeId)) return;
1223 state.activeId = nodeId;
1224 revealNode(state, nodeId);
1225 persistSoon();
1226 renderAll({ scroll });
1227 document.body.classList.remove('map-open');
1228 }
1229
1230 function visibleTreeNodeIds() {
1231 return [...els.tree.querySelectorAll('.tree-node')].map(button => button.dataset.nodeId);
1232 }
1233
1234 function moveVisibleNode(offset) {
1235 const ids = visibleTreeNodeIds();
1236 if (!ids.length) return;
1237 const current = Math.max(0, ids.indexOf(state.activeId));
1238 activateNode(ids[Math.max(0, Math.min(ids.length - 1, current + offset))]);
1239 }
1240
1241 function moveMap(offset) {
1242 const maps = workspace.maps
1243 .filter(map => map.nodes.length || map.attachments.length)
1244 .sort((a, b) => b.updatedAt - a.updatedAt);
1245 if (!maps.length) return;
1246 const current = Math.max(0, maps.findIndex(map => map.id === state.id));
1247 switchMap(maps[Math.max(0, Math.min(maps.length - 1, current + offset))].id);
1248 }
1249
1250 function focusConversationSearch() {
1251 document.body.classList.remove('history-collapsed', 'map-open');
1252 if (matchMedia('(max-width: 1100px)').matches) document.body.classList.add('history-open');
1253 updateHistoryToggle();
1254 els.conversationSearch.focus();
1255 els.conversationSearch.select();
1256 }
1257
1258 function handleVimNavigation(event) {
1259 if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) return;
1260 const editable = event.target.closest?.('input, textarea, select, [contenteditable="true"]');
1261 if (editable) {
1262 if (event.key === 'Escape') {
1263 event.preventDefault();
1264 if (editable === els.conversationSearch) clearSearch();
1265 editable.blur();
1266 }
1267 return;
1268 }
1269 if ($('dialog[open]')) return;
1270 if (pendingG && event.key !== 'g') {
1271 clearTimeout(pendingGTimer);
1272 pendingG = false;
1273 }
1274 if (event.key === '?') { event.preventDefault(); els.shortcutsDialog.showModal(); return; }
1275 if (event.key === '/') { event.preventDefault(); focusConversationSearch(); return; }
1276 if (event.key === 'i') { event.preventDefault(); els.prompt.focus(); return; }
1277 if (event.key === 'j') { event.preventDefault(); moveVisibleNode(1); return; }
1278 if (event.key === 'k') { event.preventDefault(); moveVisibleNode(-1); return; }
1279 if (event.key === 'J') { event.preventDefault(); moveMap(1); return; }
1280 if (event.key === 'K') { event.preventDefault(); moveMap(-1); return; }
1281 if (event.key === 'h') {
1282 const parentId = nodeById(state.activeId)?.parentId;
1283 if (parentId) { event.preventDefault(); activateNode(parentId); }
1284 return;
1285 }
1286 if (event.key === 'l') {
1287 const children = childrenOf(state.activeId);
1288 if (!children.length) return;
1289 event.preventDefault();
1290 if (state.collapsedIds.includes(state.activeId)) toggleSubtree(state.activeId, false);
1291 else activateNode(children[0].id);
1292 return;
1293 }
1294 if (event.key === ' ') {
1295 if (childrenOf(state.activeId).length) { event.preventDefault(); toggleSubtree(state.activeId); }
1296 return;
1297 }
1298 if (event.key === 'G') {
1299 const ids = visibleTreeNodeIds();
1300 if (ids.length) { event.preventDefault(); activateNode(ids.at(-1)); }
1301 return;
1302 }
1303 if (event.key === 'g') {
1304 event.preventDefault();
1305 if (pendingG) {
1306 clearTimeout(pendingGTimer);
1307 pendingG = false;
1308 const ids = visibleTreeNodeIds();
1309 if (ids.length) activateNode(ids[0]);
1310 } else {
1311 pendingG = true;
1312 pendingGTimer = setTimeout(() => { pendingG = false; }, 900);
1313 }
1314 }
1315 }
1316
1317 function closeHistoryOnSmallScreen() {
1318 if (matchMedia('(max-width: 1100px)').matches) document.body.classList.remove('history-open');
1319 updateHistoryToggle();
1320 }
1321
1322 function updateHistoryToggle() {
1323 const small = matchMedia('(max-width: 1100px)').matches;
1324 const open = small ? document.body.classList.contains('history-open') : !document.body.classList.contains('history-collapsed');
1325 els.historyToggle.setAttribute('aria-expanded', String(open));
1326 }
1327
1328 function toggleHistory() {
1329 if (matchMedia('(max-width: 1100px)').matches) {
1330 document.body.classList.remove('history-collapsed');
1331 document.body.classList.toggle('history-open');
1332 if (document.body.classList.contains('history-open')) document.body.classList.remove('map-open');
1333 } else document.body.classList.toggle('history-collapsed');
1334 updateHistoryToggle();
1335 }
1336
1337 function clearChatHistory(message = 'Clear all saved conversations? Your API key and usage records will be kept. Uploaded API files will not be deleted.') {
1338 if (!workspace.maps.some(map => map.nodes.length || map.attachments.length)) { showToast('Chat history is already empty'); return false; }
1339 if (!confirm(message)) return false;
1340 if (activeRequest) activeRequest.abort();
1341 const map = blankMap();
1342 workspace = { version: 2, maps: [map], activeMapId: map.id };
1343 state = map;
1344 searchIndex = null;
1345 els.conversationSearch.value = '';
1346 persistNow();
1347 renderAll();
1348 showToast('All conversations cleared');
1349 return true;
1350 }
1351
1352 function deleteMap(mapId) {
1353 const map = workspace.maps.find(candidate => candidate.id === mapId);
1354 if (!map) return;
1355 if (uploadingFiles && uploadTargetMapId === map.id) { showToast('Wait for this map’s file upload to finish'); return; }
1356 const remoteNote = map.attachments.length ? ' Uploaded API files will not be deleted.' : '';
1357 if (!confirm(`Delete “${map.title}” and its entire conversation? This cannot be undone.${remoteNote}`)) return;
1358 if (activeRequest && map.nodes.some(node => node.status === 'loading')) activeRequest.abort();
1359
1360 workspace.maps = workspace.maps.filter(candidate => candidate.id !== map.id);
1361 searchIndex = null;
1362 if (!workspace.maps.length) workspace.maps.push(blankMap());
1363 if (state === map) {
1364 const next = [...workspace.maps]
1365 .filter(candidate => candidate.nodes.length || candidate.attachments.length)
1366 .sort((a, b) => b.updatedAt - a.updatedAt)[0] || workspace.maps[0];
1367 workspace.activeMapId = next.id;
1368 state = next;
1369 state.activeId = state.nodes.at(-1)?.id || null;
1370 revealNode(state, state.activeId);
1371 }
1372 persistNow();
1373 renderAll({ scroll: state.activeId ? 'bottom' : false });
1374 showToast('Conversation deleted');
1375 }
1376
1377 function renameMap(mapId) {
1378 const map = workspace.maps.find(candidate => candidate.id === mapId);
1379 if (!map) return;
1380 const value = prompt('Rename this conversation. Leave blank to restore its automatic title.', map.title);
1381 if (value === null) return;
1382 const title = value.replace(/\s+/g, ' ').trim();
1383 if (title) {
1384 map.title = title.slice(0, 120);
1385 map.titleCustom = true;
1386 } else {
1387 map.titleCustom = false;
1388 refreshMapTitle(map);
1389 }
1390 touchMap(map);
1391 persistNow();
1392 renderHistory();
1393 showToast(title ? 'Conversation renamed' : 'Automatic title restored');
1394 }
1395
1396 function showSelectionMenu(text, nodeId, rect) {
1397 selectedText = { text: text.slice(0, 5000), nodeId };
1398 els.selectionPreview.textContent = text.length > 240 ? `${text.slice(0, 240)}…` : text;
1399 els.selectionMenu.hidden = false;
1400 const width = 330;
1401 const left = Math.max(12, Math.min(innerWidth - width - 12, rect.left + rect.width / 2 - width / 2));
1402 const estimatedHeight = 235;
1403 const top = rect.bottom + estimatedHeight < innerHeight ? rect.bottom + 10 : Math.max(10, rect.top - estimatedHeight - 8);
1404 Object.assign(els.selectionMenu.style, { left: `${left}px`, top: `${top}px` });
1405 }
1406
1407 function hideSelectionMenu() { els.selectionMenu.hidden = true; selectedText = null; }
1408
1409 els.composer.addEventListener('submit', event => {
1410 event.preventDefault();
1411 if (activeRequest) { activeRequest.abort(); return; }
1412 const question = els.prompt.value;
1413 els.prompt.value = '';
1414 els.prompt.style.height = '';
1415 ask(question);
1416 });
1417 els.prompt.addEventListener('keydown', event => {
1418 if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) { event.preventDefault(); els.composer.requestSubmit(); }
1419 });
1420 els.prompt.addEventListener('input', () => {
1421 els.prompt.style.height = 'auto';
1422 els.prompt.style.height = `${Math.min(els.prompt.scrollHeight, 180)}px`;
1423 });
1424 document.addEventListener('click', event => {
1425 const starter = event.target.closest('.starter');
1426 if (starter) { els.prompt.value = starter.dataset.prompt; els.prompt.focus(); }
1427 const historyItem = event.target.closest('.history-item');
1428 if (historyItem) { switchMap(historyItem.dataset.mapId); return; }
1429 const searchResult = event.target.closest('.search-result');
1430 if (searchResult) {
1431 const { mapId, nodeId } = searchResult.dataset;
1432 clearSearch();
1433 switchMap(mapId, nodeId || null);
1434 return;
1435 }
1436 const renameConversation = event.target.closest('.rename-map');
1437 if (renameConversation) { renameMap(renameConversation.dataset.mapId); return; }
1438 const deleteConversation = event.target.closest('.delete-map');
1439 if (deleteConversation) { deleteMap(deleteConversation.dataset.mapId); return; }
1440 const removeFile = event.target.closest('.remove-attachment');
1441 if (removeFile) { removeAttachment(removeFile.dataset.fileId); return; }
1442 const subtreeToggle = event.target.closest('.toggle-subtree');
1443 if (subtreeToggle) { toggleSubtree(subtreeToggle.dataset.nodeId); return; }
1444 const treeNode = event.target.closest('.tree-node');
1445 if (treeNode) { activateNode(treeNode.dataset.nodeId); return; }
1446 const branch = event.target.closest('.branch-here');
1447 if (branch) { state.activeId = branch.closest('.message').dataset.nodeId; persistSoon(); renderAll(); els.prompt.focus(); }
1448 const retry = event.target.closest('.retry-node');
1449 if (retry) { const old = nodeById(retry.closest('.message').dataset.nodeId); state.activeId = old.parentId; ask(old.question, old.parentId); }
1450 const copy = event.target.closest('.copy-answer');
1451 if (copy) { const node = nodeById(copy.closest('.message').dataset.nodeId); navigator.clipboard.writeText(node.answer).then(() => showToast('Answer copied')); }
1452 });
1453 document.addEventListener('mouseup', event => {
1454 if (event.target.closest('.selection-menu')) return;
1455 requestAnimationFrame(() => {
1456 const selection = getSelection();
1457 const text = selection?.toString().trim();
1458 if (!text || text.length < 2 || !selection.rangeCount) return;
1459 const answer = selection.anchorNode?.parentElement?.closest('.answer-body');
1460 if (!answer || !answer.contains(selection.focusNode)) return;
1461 const message = answer.closest('.message');
1462 showSelectionMenu(text, message.dataset.nodeId, selection.getRangeAt(0).getBoundingClientRect());
1463 });
1464 });
1465
1466 $('#ask-selection').addEventListener('click', () => {
1467 if (!selectedText) return;
1468 const action = els.selectionAction.value === 'custom' ? els.selectionCustom.value.trim() : els.selectionAction.value;
1469 if (!action) { els.selectionCustom.focus(); return; }
1470 const question = `${action}\n\nSelected passage:\n> ${selectedText.text.replace(/\n/g, '\n> ')}`;
1471 const parentId = selectedText.nodeId;
1472 hideSelectionMenu();
1473 getSelection()?.removeAllRanges();
1474 ask(question, parentId);
1475 });
1476 els.selectionAction.addEventListener('change', () => {
1477 els.selectionCustom.hidden = els.selectionAction.value !== 'custom';
1478 if (!els.selectionCustom.hidden) els.selectionCustom.focus();
1479 });
1480 $('#close-selection').addEventListener('click', hideSelectionMenu);
1481 window.addEventListener('scroll', hideSelectionMenu, { passive: true });
1482 $('#open-settings').addEventListener('click', openSettings);
1483 els.activeConnection.addEventListener('click', openSettings);
1484 $('#open-usage').addEventListener('click', openUsage);
1485 $('#theme-toggle').addEventListener('click', toggleTheme);
1486 $('#toggle-history').addEventListener('click', toggleHistory);
1487 els.conversationSearch.addEventListener('input', () => {
1488 clearTimeout(searchTimer);
1489 searchTimer = setTimeout(renderSearchResults, 110);
1490 });
1491 els.conversationSearch.addEventListener('keydown', event => {
1492 if (event.key !== 'Enter') return;
1493 const first = $('.search-result', els.searchResults);
1494 if (first) { event.preventDefault(); first.click(); }
1495 });
1496 $('#study-lab-home').addEventListener('click', event => { event.preventDefault(); createNewMap(); });
1497 $('#new-map-sidebar').addEventListener('click', createNewMap);
1498 els.uploadFile.addEventListener('click', () => els.fileInput.click());
1499 els.fileInput.addEventListener('change', () => uploadFiles(els.fileInput.files));
1500 $('#close-settings').addEventListener('click', () => els.settings.close());
1501 els.settings.addEventListener('close', () => { settingsDraft = null; });
1502 $('#close-usage').addEventListener('click', () => els.usageDialog.close());
1503 $('#open-shortcuts').addEventListener('click', () => els.shortcutsDialog.showModal());
1504 $('#close-shortcuts').addEventListener('click', () => els.shortcutsDialog.close());
1505 $('#expand-all-nodes').addEventListener('click', () => setAllSubtrees(false));
1506 $('#collapse-all-nodes').addEventListener('click', () => setAllSubtrees(true));
1507 $('#zoom-out-tree').addEventListener('click', () => updateTreeZoom(-.1));
1508 $('#zoom-in-tree').addEventListener('click', () => updateTreeZoom(.1));
1509 $('#reset-usage').addEventListener('click', () => {
1510 if (!usageRecords.length || confirm('Reset the locally tracked API usage history? This cannot be undone.')) {
1511 usageRecords = [];
1512 localStorage.removeItem(USAGE_KEY);
1513 updateUsageButton();
1514 renderUsage();
1515 showToast('Local usage history reset');
1516 }
1517 });
1518 document.querySelectorAll('.toggle-key').forEach(button => button.addEventListener('click', event => {
1519 const input = document.getElementById(event.currentTarget.dataset.keyInput);
1520 const show = input.type === 'password';
1521 input.type = show ? 'text' : 'password';
1522 event.currentTarget.textContent = show ? 'Hide' : 'Show';
1523 event.currentTarget.setAttribute('aria-label', `${show ? 'Hide' : 'Show'} ${input.id === 'openrouter-api-key' ? 'OpenRouter' : 'OpenAI'} API key`);
1524 }));
1525 $('#add-model').addEventListener('click', () => {
1526 captureSettingsForm();
1527 const id = uid();
1528 settingsDraft.models.push({ id, provider: 'openai', model: PROVIDERS.openai.model, apiUrl: PROVIDERS.openai.apiUrl });
1529 renderModelCards();
1530 $('.model-name-input', els.modelConfigs.lastElementChild)?.focus();
1531 });
1532 els.modelConfigs.addEventListener('change', event => {
1533 if (event.target.matches('.default-model-radio')) { updateModelCardSelection(); return; }
1534 if (!event.target.matches('.model-provider')) return;
1535 const card = event.target.closest('[data-model-card]');
1536 const previousProvider = card.dataset.provider;
1537 const provider = event.target.value;
1538 captureSettingsForm();
1539 const connection = settingsDraft.models.find(model => model.id === card.dataset.modelId);
1540 if (connection.model === PROVIDERS[previousProvider].model) connection.model = PROVIDERS[provider].model;
1541 if (connection.apiUrl === PROVIDERS[previousProvider].apiUrl) connection.apiUrl = PROVIDERS[provider].apiUrl;
1542 connection.provider = provider;
1543 renderModelCards();
1544 });
1545 els.modelConfigs.addEventListener('click', event => {
1546 const button = event.target.closest('.remove-model');
1547 if (!button || button.disabled) return;
1548 const id = button.closest('[data-model-card]').dataset.modelId;
1549 captureSettingsForm();
1550 settingsDraft.models = settingsDraft.models.filter(model => model.id !== id);
1551 if (settingsDraft.activeModelId === id) settingsDraft.activeModelId = settingsDraft.models[0].id;
1552 renderModelCards();
1553 });
1554 $('#settings-form').addEventListener('submit', event => {
1555 event.preventDefault();
1556 captureSettingsForm();
1557 settings = normalizeSettings({ ...settingsDraft, systemPrompt: els.systemPrompt.value.trim() });
1558 localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
1559 settingsDraft = null;
1560 updateKeyStatus(); renderAttachments(); els.settings.close(); showToast(`${providerLabel()} settings saved`);
1561 });
1562 $('#clear-history').addEventListener('click', () => clearChatHistory());
1563 $('#clear-branch').addEventListener('click', () => { state.activeId = state.nodes.at(-1)?.id || null; revealNode(state, state.activeId); persistSoon(); renderAll({ scroll: true }); });
1564 $('#collapse-map').addEventListener('click', () => { document.body.classList.remove('map-open'); document.body.classList.add('map-collapsed'); $('#expand-map').hidden = false; });
1565 $('#expand-map').addEventListener('click', () => { document.body.classList.remove('map-collapsed', 'history-open'); document.body.classList.add('map-open'); $('#expand-map').hidden = true; updateHistoryToggle(); });
1566 addEventListener('resize', updateHistoryToggle, { passive: true });
1567 document.addEventListener('keydown', handleVimNavigation);
1568
1569 const installButton = $('#install-app');
1570 window.addEventListener('beforeinstallprompt', event => {
1571 event.preventDefault();
1572 installPrompt = event;
1573 installButton.hidden = false;
1574 });
1575 window.addEventListener('appinstalled', () => {
1576 installPrompt = null;
1577 installButton.hidden = true;
1578 showToast('Study Lab installed');
1579 });
1580 installButton.addEventListener('click', async () => {
1581 if (!installPrompt) return;
1582 installPrompt.prompt();
1583 await installPrompt.userChoice;
1584 installPrompt = null;
1585 installButton.hidden = true;
1586 });
1587
1588 if ('serviceWorker' in navigator) {
1589 window.addEventListener('load', () => {
1590 navigator.serviceWorker.register('./service-worker.js').catch(error => {
1591 console.warn('Study Lab service worker registration failed:', error);
1592 });
1593 });
1594 }
1595
1596 updateKeyStatus();
1597 updateThemeButton();
1598 updateUsageButton();
1599 updateHistoryToggle();
1600 updateTreeZoom();
1601 state.activeId = state.nodes.at(-1)?.id || null;
1602 revealNode(state, state.activeId);
1603 renderAll();
1604})();