No providers configured. Add one to get started.
';
}
container.innerHTML = html;
}
// Render models list in settings
function renderModelsList() {
const container = document.getElementById('models-list');
if (!container) return;
const models = settings.models || {};
const providers = settings.providers || {};
let html = '';
Object.entries(models).forEach(([id, model]) => {
const provider = providers[model.providerId];
const providerName = provider ? provider.name : 'Unknown';
html += `
No models configured. Add a provider first, then add models.
';
}
container.innerHTML = html;
}
// Populate model dropdowns for agent selection
function populateModelDropdowns() {
const models = settings.models || {};
const agents = settings.agents || {};
// Build dropdown IDs from registry + special dropdowns
const dropdownIds = [
...Object.keys(AGENT_REGISTRY).map(t => `setting-agent-${t}`),
'setting-research-sub-agent-model',
'setting-image-gen-model',
'setting-image-edit-model'
];
dropdownIds.forEach(dropdownId => {
const dropdown = document.getElementById(dropdownId);
if (!dropdown) return;
// Preserve current selection
const currentValue = dropdown.value;
// Clear and rebuild options
dropdown.innerHTML = 'No LLM calls recorded yet.
Send a message in this tab to see the call history here.
';
return;
}
debugContent.innerHTML = calls.map((call, i) => {
const isLast = i === calls.length - 1;
const arrow = isLast ? '▼' : '▶';
const display = isLast ? 'block' : 'none';
const msgCount = call.input ? call.input.length : 0;
const inputHtml = call.input ? formatDebugJson(call.input) : ' elements (not inside )
const codeEls = [...container.querySelectorAll('code')].filter(c => !c.closest('pre'));
if (codeEls.length === 0) return;
// Collect candidate paths (must look like a file path)
const candidates = new Map(); // normalized path -> code element(s)
for (const code of codeEls) {
const text = code.textContent.trim();
if (!text || text.includes(' ') || text.length > 200) continue;
// Must contain a dot (extension) or slash (directory)
if (!text.includes('.') && !text.includes('/')) continue;
const normalized = text.replace(/^\.\//, '');
if (!candidates.has(normalized)) candidates.set(normalized, []);
candidates.get(normalized).push(code);
}
if (candidates.size === 0) return;
// Check which paths exist on the server
try {
const resp = await apiFetch('/api/files/check', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ paths: [...candidates.keys()] })
});
if (!resp.ok) return;
const { existing } = await resp.json();
for (const path of existing) {
for (const code of candidates.get(path) || []) {
if (code.closest('.file-path-link')) continue; // already linked
const link = document.createElement('a');
link.className = 'file-path-link';
link.href = '#';
link.title = 'Open in file explorer';
link.addEventListener('click', (e) => {
e.preventDefault();
navigateToFileInExplorer(path);
});
code.parentNode.insertBefore(link, code);
link.appendChild(code);
}
}
} catch (e) {
// Silently fail — linkification is a nice-to-have
}
}
// Helper to show click feedback
function showClickFeedback(el) {
const originalColor = el.style.color;
el.style.color = 'var(--theme-accent)';
setTimeout(() => {
el.style.color = originalColor;
}, 300);
}
// Navigate to a file in the file explorer and highlight it
function navigateToFileInExplorer(path) {
let relPath = path.replace(/^\.\//, '');
// Open files panel if not already open
if (!filesPanel.classList.contains('active')) {
filesBtn.click();
}
// Wait for tree to render, then expand parents and highlight
setTimeout(() => {
const segments = relPath.split('/');
let currentPath = '';
for (let i = 0; i < segments.length - 1; i++) {
currentPath += (i > 0 ? '/' : '') + segments[i];
const folderItem = fileTree.querySelector(`.file-tree-item[data-path="${currentPath}"]`);
if (folderItem && !folderItem.classList.contains('expanded')) {
folderItem.classList.add('expanded');
const children = folderItem.querySelector('.file-tree-children');
if (children) children.classList.add('expanded');
const icon = folderItem.querySelector('.file-tree-icon');
if (icon) icon.textContent = '▼';
expandedPaths.add(currentPath);
}
}
const targetItem = fileTree.querySelector(`.file-tree-item[data-path="${relPath}"]`);
if (targetItem) {
targetItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
const line = targetItem.querySelector('.file-tree-line');
if (line) {
line.classList.add('file-tree-highlight');
setTimeout(() => line.classList.remove('file-tree-highlight'), 2000);
}
}
}, 500);
}
// Open files panel when FILES button is clicked
if (filesBtn) {
filesBtn.addEventListener('click', () => {
const isOpening = !filesPanel.classList.contains('active');
closeAllPanels();
if (isOpening) {
filesPanel.classList.add('active');
filesBtn.classList.add('active');
appContainer.classList.add('files-panel-open');
loadFileTree();
}
});
}
// Close files panel
if (filesPanelClose) {
filesPanelClose.addEventListener('click', () => {
filesPanel.classList.remove('active');
filesBtn.classList.remove('active');
appContainer.classList.remove('files-panel-open');
});
}
// Refresh button
if (filesRefresh) {
filesRefresh.addEventListener('click', () => {
loadFileTree();
});
}
// Upload to root directory
if (filesUpload) {
filesUpload.addEventListener('click', () => {
const input = document.createElement('input');
input.type = 'file';
input.addEventListener('change', async () => {
if (!input.files.length) return;
const formData = new FormData();
formData.append('file', input.files[0]);
try {
await apiFetch('/api/files/upload?folder=', { method: 'POST', body: formData });
loadFileTree();
} catch (err) {
console.error('Upload failed:', err);
}
});
input.click();
});
}
// Show hidden files toggle
if (showHiddenFiles) {
showHiddenFiles.addEventListener('change', () => {
loadFileTree();
});
}
// Drag & drop upload on files panel
if (fileTree) {
let dragOverFolder = null;
fileTree.addEventListener('dragover', (e) => {
// Only handle external file drops (not internal path drags)
if (!e.dataTransfer.types.includes('Files')) return;
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
// Find folder under cursor
const folderItem = e.target.closest('.file-tree-item.folder');
if (folderItem) {
if (dragOverFolder !== folderItem) {
if (dragOverFolder) dragOverFolder.classList.remove('drag-over');
fileTree.classList.remove('drag-over-root');
folderItem.classList.add('drag-over');
dragOverFolder = folderItem;
}
} else {
if (dragOverFolder) { dragOverFolder.classList.remove('drag-over'); dragOverFolder = null; }
fileTree.classList.add('drag-over-root');
}
});
fileTree.addEventListener('dragleave', (e) => {
// Only clear when leaving the fileTree entirely
if (!fileTree.contains(e.relatedTarget)) {
if (dragOverFolder) { dragOverFolder.classList.remove('drag-over'); dragOverFolder = null; }
fileTree.classList.remove('drag-over-root');
}
});
fileTree.addEventListener('drop', async (e) => {
if (!e.dataTransfer.files.length) return;
e.preventDefault();
// Determine target folder
const folderItem = e.target.closest('.file-tree-item.folder');
const folder = folderItem ? folderItem.dataset.path : '';
// Clear highlights
if (dragOverFolder) { dragOverFolder.classList.remove('drag-over'); dragOverFolder = null; }
fileTree.classList.remove('drag-over-root');
// Upload all files
for (const file of e.dataTransfer.files) {
const formData = new FormData();
formData.append('file', file);
try {
await apiFetch(`/api/files/upload?folder=${encodeURIComponent(folder)}`, { method: 'POST', body: formData });
} catch (err) {
console.error('Upload failed:', err);
}
}
loadFileTree();
});
}
// Sessions panel (same pattern as Files/Settings/Debug panels)
const sessionsPanel = document.getElementById('sessionsPanel');
const sessionsPanelClose = document.getElementById('sessionsPanelClose');
const sessionsBtn = document.getElementById('sessionsBtn');
if (sessionsBtn && sessionsPanel) {
sessionsBtn.addEventListener('click', () => {
const isOpening = !sessionsPanel.classList.contains('active');
closeAllPanels();
if (isOpening) {
sessionsPanel.classList.add('active');
sessionsBtn.classList.add('active');
appContainer.classList.add('sessions-panel-open');
refreshSessionsList();
}
});
}
if (sessionsPanelClose) {
sessionsPanelClose.addEventListener('click', () => {
sessionsPanel.classList.remove('active');
sessionsBtn.classList.remove('active');
appContainer.classList.remove('sessions-panel-open');
});
}